Repository: ThayalanGR/react-fields-keeper
Pull request #21: feat(TickAnnotation): Folder check Mark annotation implemented
Author: login: sathish151198
Created: 2025-03-19T08:47:18Z | Merged: 2025-03-20T09:31:28Z

Reviewers: @ThayalanGR 

<img width="101" alt="image" src="https://github.com/user-attachments/assets/16998b5b-7712-4540-b062-e68536da3d9a" />



Diff:
diff --git a/src/Components/svgElements/Icons.tsx b/src/Components/svgElements/Icons.tsx
new file mode 100644
index 0000000..e022ba3
--- /dev/null
+++ b/src/Components/svgElements/Icons.tsx
@@ -0,0 +1,27 @@
+type IconProps = React.HTMLAttributes<SVGElement>;
+
+export const Icons = {
+    table: (props: IconProps) => (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 20 20" {...props}>
+            <path 
+                d="M17 5.5A2.5 2.5 0 0 0 14.5 3h-9A2.5 2.5 0 0 0 3 5.5v9A2.5 2.5 0 0 0 5.5 17h9a2.5 2.5 0 0 0 2.5-2.5v-9Zm-13 9V13h3v3H5.36A1.5 1.5 0 0 1 4 14.5Zm8-1.5v3H8v-3h4Zm2.5 3H13v-3h3V14.64A1.5 1.5 0 0 1 14.5 16ZM12 8v4H8V8h4Zm1 0h3v4h-3V8Zm-1-4v3H8V4h4Zm1 0H14.64A1.5 1.5 0 0 1 16 5.5V7h-3V4ZM7 4v3H4V5.36A1.5 1.5 0 0 1 5.5 4H7Zm0 4v4H4V8h3Z">
+            </path>
+        </svg>
+    ),
+    checkMark: (props: IconProps) => (
+        <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20" {...props}>
+            <path 
+                d="M10 2a8 8 0 1 1 0 16 8 8 0 0 1 0-16Zm3.36 5.65a.5.5 0 0 0-.64-.06l-.07.06L9 11.3 7.35 9.65l-.07-.06a.5.5 0 0 0-.7.7l.07.07 2 2 .07.06c.17.11.4.11.56 0l.07-.06 4-4 .07-.08a.5.5 0 0 0-.06-.63Z" >
+            </path>
+        </svg>
+    ),
+    measure: (props: IconProps) => (
+        <svg xmlns="http://www.w3.org/2000/svg" width="16px" height="16px" viewBox="0 0 20 20" {...props}>
+            <path 
+                d="M4.04 3.8a.5.5 0 0 1 .46-.3h11a.5.5 0 1 1 0 1H5.67l4.56 4.73a.5.5 0 0 1 .02.67l-4.68 5.6h9.93a.5.5 0 1 1 0 1h-11a.5.5 0 0 1-.38-.82L9.2 9.6 4.14 4.35a.5.5 0 0 1-.1-.55Z" >
+            </path>
+        </svg>
+    )
+};
+
+
diff --git a/src/Examples/Example25_accent_color.tsx b/src/Examples/Example25_accent_color.tsx
new file mode 100644
index 0000000..e986709
--- /dev/null
+++ b/src/Examples/Example25_accent_color.tsx
@@ -0,0 +1,129 @@
+import {
+    FieldsKeeperProvider,
+    FieldsKeeperBucket,
+    FieldsKeeperRootBucket,
+    IFieldsKeeperItem,
+    IFieldsKeeperBucket,
+} from '..';
+
+export default function Example25() {
+    // compute
+    const allItems: IFieldsKeeperItem[] = [
+        {
+            id: 'a',
+            label: 'a',
+            folderScope: 'folder_1',
+            folderScopeLabel: 'Folder 1',
+            prefixNode: 'measure-icon',
+        },
+        {
+            id: 'b',
+            label: 'b',
+            folderScope: 'folder_1',
+            folderScopeLabel: 'Folder 1',
+        },
+        {
+            id: 'c',
+            label: 'c',
+            folderScope: 'folder_2',
+            folderScopeLabel: 'Folder 2 Long header sample pass',
+        },
+        {
+            id: 'd',
+            label: 'd',
+            folderScope: 'folder_2',
+            folderScopeLabel: 'Folder 2 Long header sample pass',
+            prefixNode: 'measure-icon'
+        },
+        {
+            id: 'date.quarter',
+            label: 'Quarter',
+            group: 'date',
+            groupLabel: 'Date long group header sample pass',
+            groupOrder: 1,
+            folderScope: 'folder_2',
+            folderScopeLabel: 'Folder 2 Long header sample pass',
+        },
+        {
+            id: 'date.year',
+            label: 'Year',
+            group: 'date',
+            groupLabel: 'Date long group header sample pass',
+            groupOrder: 0,
+            folderScope: 'folder_2',
+            folderScopeLabel: 'Folder 2 Long header sample pass',
+        },
+        {
+            id: 'date.month',
+            label: 'Month long string test pass',
+            group: 'date',
+            groupLabel: 'Date long group header sample pass',
+            groupOrder: 2,
+            folderScope: 'folder_2',
+            folderScopeLabel: 'Folder 2 Long header sample pass',
+            prefixNode: 'measure-icon',
+        },
+        {
+            id: 'date.day',
+            label: 'Day',
+            group: 'date',
+            groupLabel: 'Date long group header sample pass',
+            groupOrder: 3,
+            folderScope: 'folder_2',
+            folderScopeLabel: 'Folder 2 Long header sample pass',
+        },
+    ];
+
+    const buckets: IFieldsKeeperBucket[] = [
+        { id: 'bucket1', items: [allItems[0]] },
+        {
+            id: 'bucket2',
+            items: [allItems[1], allItems[2]],
+        },
+        { id: 'bucket3', items: [] },
+    ];
+
+    // paint
+    return (
+        <div className="example-container">
+            <div className="example-container-title">
+                25. Accent Color 
+            </div>
+            <FieldsKeeperProvider
+                allItems={allItems}
+                buckets={buckets}
+                onUpdate={(state) => {
+                    console.log(state);
+                }}
+                accentColor={'#117865'}
+            >
+                <div className="keeper-container">
+                    <div className="buckets-container">
+                        <FieldsKeeperBucket
+                            id="bucket1"
+                            label="Bucket 1"
+                            allowRemoveFields
+                        />
+                        <FieldsKeeperBucket
+                            id="bucket2"
+                            label="Bucket 2"
+                            allowRemoveFields
+                        />
+                        <FieldsKeeperBucket
+                            id="bucket3"
+                            label="Bucket 3"
+                            allowRemoveFields
+                        />
+                    </div>
+                    <div className="root-bucket-container">
+                        <FieldsKeeperRootBucket
+                            label="Root Bucket"
+                            collapseFoldersOnMount={false}
+                            prefixNode={{ allow: true, reserveSpace: true }}
+                        />
+                    </div>
+                </div>
+            </FieldsKeeperProvider>
+        </div>
+    );
+}
diff --git a/src/Examples/index.tsx b/src/Examples/index.tsx
index 41b7dbe..69266fd 100644
--- a/src/Examples/index.tsx
+++ b/src/Examples/index.tsx
@@ -15,13 +15,14 @@ import Example14 from './Example14';
 import Example15 from './Example15';
 import Example16 from './Example16';
 import Example17_should_render_prop from './Example17_should_render_prop';
-import Example18_pass_suffix_node from './Example18_suffix_node_support';
+import Example18_suffix_node_support from './Example18_suffix_node_support';
 import Example19_disable_bucket from './Example19_disable_bucket';
 import Example20_folder_scope from './Example20_folder_scope';
 import Example21_prefix_node_support from './Example21_prefix_node_support';
 import Example22_bucket_accept_types from './Example22_bucket_accept_types';
 import Example23_disable_assignments from './Example23_disable_assignments';
 import Example24_filter_items from './Example24_filter_items';
+import Example25_Accent_color from './Example25_accent_color';
 
 export const examples = {
     Example1_sample_usecase,
@@ -41,11 +42,12 @@ export const examples = {
     Example15,
     Example16,
     Example17_should_render_prop,
-    Example18_pass_suffix_node,
+    Example18_suffix_node_support,
     Example19_disable_bucket,
     Example20_folder_scope,
     Example21_prefix_node_support,
     Example22_bucket_accept_types,
     Example23_disable_assignments,
     Example24_filter_items,
+    Example25_Accent_color,
 };
diff --git a/src/FieldsKeeper/FieldsKeeper.types.ts b/src/FieldsKeeper/FieldsKeeper.types.ts
index 6f695f0..6422a37 100644
--- a/src/FieldsKeeper/FieldsKeeper.types.ts
+++ b/src/FieldsKeeper/FieldsKeeper.types.ts
@@ -265,6 +265,11 @@ export interface IFieldsKeeperState {
      * @default false
      */
     allowDuplicates?: boolean;
+
+    /** 
+     * Allows setting a highlight color. Used for theming.
+     */
+    accentColor?: string
 }
 
 /**
diff --git a/src/FieldsKeeper/FieldsKeeperBucket.tsx b/src/FieldsKeeper/FieldsKeeperBucket.tsx
index 228156c..5bab989 100644
--- a/src/FieldsKeeper/FieldsKeeperBucket.tsx
+++ b/src/FieldsKeeper/FieldsKeeperBucket.tsx
@@ -30,7 +30,6 @@ export const FieldsKeeperBucket = (props: IFieldsKeeperBucketProps) => {
         centerAlignPlaceholder = false,
         placeHolderWrapperClassName,
         wrapperClassName,
-
         orientation = 'vertical',
         horizontalFillOverflowType = 'scroll',
     } = props;
@@ -246,6 +245,7 @@ const GroupedItemRenderer = (
     const { instanceId: instanceIdFromContext } =
         useContext(FieldsKeeperContext);
     const instanceId = instanceIdFromProps ?? instanceIdFromContext;
+    const { accentColor } = useStoreState(instanceId);
     const [isGroupCollapsed, setIsGroupCollapsed] = useState(false);
 
     // compute
@@ -295,6 +295,11 @@ const GroupedItemRenderer = (
                 : {}
         ) as CSSProperties;
 
+        // style
+            const accentColorStyle = (
+                accentColor ?  { '--root-bucket-accent-color': accentColor } : {}
+            ) as CSSProperties;
+
         // paint
         return fieldItems.map((fieldItem, fieldIndex) => {
             // handlers
@@ -309,6 +314,7 @@ const GroupedItemRenderer = (
                         )}
                         role="button"
                         onClick={groupHeader.onGroupHeaderToggle}
+                        style={accentColorStyle}
                     >
                         {groupHeader.isGroupCollapsed ? (
                             <i className="fk-ms-Icon fk-ms-Icon--ChevronRight" />
@@ -337,6 +343,7 @@ const GroupedItemRenderer = (
                                         )}
                                         role="button"
                                         onClick={remove}
+                                        style={accentColorStyle}
                                     >
                                         <i className="fk-ms-Icon fk-ms-Icon--ChromeClose" />
                                     </div>
diff --git a/src/FieldsKeeper/FieldsKeeperProvider.tsx b/src/FieldsKeeper/FieldsKeeperProvider.tsx
index ecb8e1b..9730cca 100644
--- a/src/FieldsKeeper/FieldsKeeperProvider.tsx
+++ b/src/FieldsKeeper/FieldsKeeperProvider.tsx
@@ -23,6 +23,7 @@ export const FieldsKeeperProvider = (props: IFieldsKeeperProviderProps) => {
         instanceId: instanceIdFromProps,
         receiveFieldItemsFromInstances,
         allowDuplicates,
+        accentColor,
         getPriorityTargetBucketToFill,
         onUpdate,
     } = props;
@@ -42,6 +43,7 @@ export const FieldsKeeperProvider = (props: IFieldsKeeperProviderProps) => {
             instanceId: instanceIdFromProps,
             receiveFieldItemsFromInstances,
             allowDuplicates,
+            accentColor,
             getPriorityTargetBucketToFill,
             onStateUpdate: (state, updateInfo) => {
                 // introduce delayed updates later
diff --git a/src/FieldsKeeper/FieldsKeeperRootBucket.tsx b/src/FieldsKeeper/FieldsKeeperRootBucket.tsx
index f39f3fc..79d3563 100644
--- a/src/FieldsKeeper/FieldsKeeperRootBucket.tsx
+++ b/src/FieldsKeeper/FieldsKeeperRootBucket.tsx
@@ -9,8 +9,6 @@ import React, {
 import FuzzySearch from 'fuzzy-search';
 import classNames from 'classnames';
 
-import tableIcon from '../assets/icons/tableIcon.svg';
-import measureIcon from '../assets/icons/measureIcon.svg';
 import './fieldsKeeper.less';
 import {
     IFieldsKeeperItem,
@@ -29,6 +27,7 @@ import {
 } from './FieldsKeeper.context';
 import { FieldsKeeperSearcher } from './FieldsKeeperSearcher';
 import { getGroupedItems } from './utils';
+import { Icons } from '../Components/svgElements/Icons';
 
 export const FieldsKeeperRootBucket = (props: IFieldsKeeperRootBucketProps) => {
     // props
@@ -56,7 +55,7 @@ export const FieldsKeeperRootBucket = (props: IFieldsKeeperRootBucketProps) => {
     const { instanceId: instanceIdFromContext } =
         useContext(FieldsKeeperContext);
     const instanceId = instanceIdFromProps ?? instanceIdFromContext;
-    const { allItems: allOriginalItems } = useStoreState(instanceId);
+    const { allItems: allOriginalItems, accentColor } = useStoreState(instanceId);
     const [searchQuery, setSearchQuery] = useState('');
     const allItems = useMemo(() => {
         // should render to spot the renderers
@@ -117,6 +116,11 @@ export const FieldsKeeperRootBucket = (props: IFieldsKeeperRootBucketProps) => {
         onClearSearch?.();
     };
 
+    // style
+    const accentColorStyle = (
+        accentColor ?  { '--root-bucket-accent-color': accentColor } : {}
+    ) as CSSProperties;
+
     // paint
     return (
         <div
@@ -147,6 +151,7 @@ export const FieldsKeeperRootBucket = (props: IFieldsKeeperRootBucketProps) => {
                     searchPlaceholder={searchPlaceholder}
                     searchQuery={searchQuery}
                     onSearchQueryChange={setSearchQuery}
+                    accentColorStyle={accentColorStyle}
                 />
             ) : (
                 <div />
@@ -185,6 +190,7 @@ export const FieldsKeeperRootBucket = (props: IFieldsKeeperRootBucketProps) => {
                                                   className="react-fields-keeper-mapping-clear-search-link"
                                                   onClick={onClearSearchQuery}
                                                   role="button"
+                                                  style={accentColorStyle}
                                               >
                                                   Clear search
                                               </div>
@@ -223,6 +229,25 @@ function FolderScopeItemRenderer(
     const toggleFolderCollapse = () =>
         setIsFolderCollapsed((collapsed) => !collapsed);
 
+    const { instanceId: instanceIdFromContext } = useContext(FieldsKeeperContext);
+    const instanceId = rootBucketProps.instanceId ?? instanceIdFromContext;
+    const { buckets, accentColor } = useStoreState(instanceId);
+
+    const hasActiveSelection = useMemo(() => {
+        return folderScopeItems.some((groupedItem) =>
+                    groupedItem.items.some((item) =>
+                        buckets.some((bucket) =>
+                            bucket.items.some((bucketItem) => bucketItem.id === item.id)  
+                        )
+                    )
+                );
+            }, [folderScopeItems, buckets])
+    
+    // style
+    const accentColorStyle = (
+        accentColor ?  { '--root-bucket-accent-color': accentColor } : {}
+    ) as CSSProperties;
+
     // paint
     if (showFlatFolderScope)
         return (
@@ -244,18 +269,20 @@ function FolderScopeItemRenderer(
         >
             <div
                 className="folder-scope-label"
-                role="buton"
+                role="button"
                 onClick={toggleFolderCollapse}
                 title={folderScopeLabel ?? ''}
             >
                 <div className="folder-scope-label-icon">
-                    <img src={tableIcon} />
+                    <Icons.table className="folder-scope-label-table-icon" style={accentColorStyle} />
+                    {hasActiveSelection && (
+                        <Icons.checkMark className="folder-scope-label-table-icon checkmark-overlay" style={accentColorStyle} />
+                    )}
                 </div>
                 <div className="folder-scope-label-text">
                     {folderScopeLabel}
                 </div>
-
-                <div className="folder-scope-label-collapse-icon react-fields-keeper-mapping-column-content-action">
+                <div className="folder-scope-label-collapse-icon react-fields-keeper-mapping-column-content-action" style={accentColorStyle}>
                     {isFolderCollapsed ? (
                         <i className="fk-ms-Icon fk-ms-Icon--ChevronRight" />
                     ) : (
@@ -294,7 +321,7 @@ function GroupedItemRenderer(
         allowDragging = true,
         toggleCheckboxOnLabelClick = false,
         prefixNode: prefixNodeConfig,
-        disableAssignments = false
+        disableAssignments = false,
     } = props;
 
     const {
@@ -311,6 +338,7 @@ function GroupedItemRenderer(
         buckets,
         getPriorityTargetBucketToFill: getPriorityTargetBucketToFillFromContext,
         allowDuplicates,
+        accentColor
     } = useStoreState(instanceId);
     const updateState = useStore((state) => state.setState);
     const [isGroupCollapsed, setIsGroupCollapsed] = useState(false);
@@ -430,6 +458,11 @@ function GroupedItemRenderer(
                 : {}
         ) as CSSProperties;
 
+        // style
+        const accentColorStyle = (
+            accentColor ?  { '--root-bucket-accent-color': accentColor } : {}
+        ) as CSSProperties;
+
         // paint
         return fieldItems.map((fieldItem) => {
             const isFieldItemAssigned = isGroupHeader
@@ -497,7 +530,9 @@ function GroupedItemRenderer(
                             <div className="react-fields-keeper-mapping-column-content-checkbox">
                                 <input
                                     type="checkbox"
+                                    className='react-fields-keeper-checkbox'
                                     checked={isFieldItemAssigned}
+                                    style={accentColorStyle}
                                     onChange={
                                         toggleCheckboxOnLabelClick
                                             ? undefined
@@ -523,15 +558,10 @@ function GroupedItemRenderer(
                                             maxWidth: prefixNodeReservedWidth,
                                         }}
                                     >
+                                        {/* style={accentColorStyle} */}
                                         {fieldItem.prefixNode ===
                                         'measure-icon' ? (
-                                            <img
-                                                src={measureIcon}
-                                                style={{
-                                                    transform:
-                                                        'translateX(-3px)',
-                                                }}
-                                            />
+                                            <Icons.measure className="folder-scope-label-measure-icon" style={{transform: 'translateX(-3px)', ...accentColorStyle}} />
                                         ) : (
                                             fieldItem.prefixNode ?? null
                                         )}
@@ -557,6 +587,7 @@ function GroupedItemRenderer(
                                     )}
                                     role="button"
                                     onClick={groupHeader.onGroupHeaderToggle}
+                                    style={accentColorStyle}
                                 >
                                     {groupHeader.isGroupCollapsed ? (
                                         <i className="fk-ms-Icon fk-ms-Icon--ChevronRight" />
diff --git a/src/FieldsKeeper/FieldsKeeperSearcher.tsx b/src/FieldsKeeper/FieldsKeeperSearcher.tsx
index 730ee67..b460555 100644
--- a/src/FieldsKeeper/FieldsKeeperSearcher.tsx
+++ b/src/FieldsKeeper/FieldsKeeperSearcher.tsx
@@ -5,6 +5,7 @@ export interface IFieldsKeeperSearcherProps {
     searchQuery: string;
     searchPlaceholder?: string;
     className?: string;
+    accentColorStyle?: React.CSSProperties;
     onSearchQueryChange: (value: string) => void;
 }
 
@@ -13,8 +14,7 @@ export const FieldsKeeperSearcher = forwardRef<
     IFieldsKeeperSearcherProps
 >((props, ref) => {
     // props
-    const { className, searchPlaceholder, searchQuery, onSearchQueryChange } =
-        props;
+    const { className, searchPlaceholder, searchQuery, accentColorStyle = {}, onSearchQueryChange } = props;
 
     // refs
     const searchInputRef = useRef<HTMLInputElement>(null);
@@ -30,7 +30,6 @@ export const FieldsKeeperSearcher = forwardRef<
         else searchInputRef.current?.focus();
     };
 
-    // props
     return (
         <div
             className={classNames(
@@ -38,7 +37,7 @@ export const FieldsKeeperSearcher = forwardRef<
                 className,
             )}
         >
-            <div className="react-fields-keeper-mapping-column-searcher-prefix">
+            <div className="react-fields-keeper-mapping-column-searcher-prefix" style={accentColorStyle}>
                 <span className="fk-ms-Icon fk-ms-Icon--Search" />
             </div>
             <input
@@ -54,6 +53,7 @@ export const FieldsKeeperSearcher = forwardRef<
                     className="react-fields-keeper-mapping-column-searcher-clear"
                     role="button"
                     onClick={onClearSearchQuery}
+                    style={accentColorStyle}
                 >
                     <span className="fk-ms-Icon fk-ms-Icon--ChromeClose" />
                 </div>
diff --git a/src/FieldsKeeper/fieldsKeeper.less b/src/FieldsKeeper/fieldsKeeper.less
index a25ba30..17cec26 100644
--- a/src/FieldsKeeper/fieldsKeeper.less
+++ b/src/FieldsKeeper/fieldsKeeper.less
@@ -240,6 +240,7 @@
                 &:hover {
                     background-color: #e4e4e4;
                 }
+                color: var(--root-bucket-accent-color);
             }
         }
     }
@@ -272,6 +273,8 @@
     i {
         font-size: 8px !important;
     }
+
+    color: var(--root-bucket-accent-color);
 }
 
 .react-fields-keeper-mapping-container {
@@ -319,6 +322,10 @@
                     display: grid;
                     place-items: center;
                     padding-right: 3px;
+
+                    .folder-scope-label-table-icon {
+                        fill: var(--root-bucket-accent-color)
+                    }
                 }
 
                 .folder-scope-label-text {
@@ -416,7 +423,6 @@
                 height: 100%;
                 display: flex;
                 place-items: center;
-                padding-right: 5px;
                 // width will be passed from the client
             }
 
@@ -449,14 +455,14 @@
 
         .react-fields-keeper-mapping-clear-search-link {
             margin-top: 5px;
-            border-bottom: 1px solid rgb(92, 92, 209);
-            color: rgb(92, 92, 209);
+            border-bottom: 1px solid var(--root-bucket-accent-color);
+            color: var(--root-bucket-accent-color);
             width: min-content;
             white-space: nowrap;
             cursor: pointer;
 
             &:hover {
-                color: rgb(50, 50, 172);
+                filter: brightness(80%);
             }
         }
     }
@@ -494,6 +500,8 @@
         span {
             font-size: 1em !important;
         }
+
+        color: var(--root-bucket-accent-color);
     }
 
     .react-fields-keeper-mapping-column-searcher-clear {
@@ -508,6 +516,8 @@
         display: flex;
         align-items: center;
         justify-content: center;
+        color: var(--root-bucket-accent-color);
+
         span {
             font-size: 8px !important;
         }
@@ -552,6 +562,31 @@
     }
 }
 
+.folder-scope-label-icon {
+    position: relative;
+
+    .checkmark-overlay {
+        position: absolute;
+        top: 85%;
+        left: 65%;
+        transform: translate(-50%, -50%);
+        width: 12px;
+        height: 12px;
+    }
+}
+
+.react-fields-keeper-mapping-column-content-checkbox {
+    .react-fields-keeper-checkbox{
+        accent-color: var(--root-bucket-accent-color);
+    }
+}
+
+.react-fields-keeper-mapping-column-content-prefix {
+    .folder-scope-label-measure-icon{
+        fill: var(--root-bucket-accent-color);
+    }
+}
+
 // icons
 @font-face {
     font-family: 'FabricMDL2Icons_fields_keeper';


Reviews:
user: login: ThayalanGR
body: Icons sizes are relatively big compared to the old versions. maintain old icon sizes, big size icon will look weird if have larget datasets. 

![image](https://github.com/user-attachments/assets/bd045ff8-7ed3-4182-9df7-8215428671c4)



Take pbi data pane icon sizes for reference.
state: CHANGES_REQUESTED
author_association: OWNER
submitted_at: 2025-03-19T09:13:18Z
user: login: ThayalanGR
body: Along with this let's add accent Color feature as well!

accent color code will be received via FieldsKeeperProvider prop, at it will be used in the places where the accent is
1. checkbox bg
2. table icon 
3. summation icon (in case of measure)
4. Checkmark 

and other left out items (search for examples to check if we missed something - any icons / color items).
state: CHANGES_REQUESTED
author_association: OWNER
submitted_at: 2025-03-19T09:19:35Z
user: login: sathish151198
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T09:15:09Z
user: login: ThayalanGR
state: APPROVED
author_association: OWNER
submitted_at: 2025-03-20T09:30:49Z

Review comments:
diff_hunk: @@ -210,12 +211,28 @@ function FolderScopeItemRenderer(
     const [isFolderCollapsedOriginal, setIsFolderCollapsed] = useState(
         rootBucketProps.collapseFoldersOnMount ?? true,
     );
+    const [isAnyoneFieldSelected, setIsAnyoneFieldSelected] = useState(false);
path: src/FieldsKeeper/FieldsKeeperRootBucket.tsx
user: login: ThayalanGR
body: state is not needed, derive on the go, or use memo to derive the flag like this

```typescript
const hasActiveSelection = useMemo(() => {
return folderScopeItems.some((groupedItem) =>
            groupedItem.items.some((item) =>
                buckets.some((bucket) =>
                    bucket.items.some((bucketItem) => bucketItem.id === item.id)
                )
            )
        );
        }, [folderScopeItems, buckets])
```

Using unwanted state like this can cause, unnecessary rerenders which causes poor performance for larger datasets
created_at: 2025-03-19T09:16:16Z
author_association: OWNER
diff_hunk: @@ -210,12 +211,28 @@ function FolderScopeItemRenderer(
     const [isFolderCollapsedOriginal, setIsFolderCollapsed] = useState(
         rootBucketProps.collapseFoldersOnMount ?? true,
     );
+    const [isAnyoneFieldSelected, setIsAnyoneFieldSelected] = useState(false);
path: src/FieldsKeeper/FieldsKeeperRootBucket.tsx
user: login: sathish151198
body: Updated the code !! 

Commit Reference : https://github.com/ThayalanGR/react-fields-keeper/pull/21/commits/c630b15ecd425da87c5765dfc8a87ba7dfda910a
created_at: 2025-03-20T09:15:09Z
author_association: CONTRIBUTOR
diff_hunk: @@ -295,6 +295,11 @@ const GroupedItemRenderer = (
                 : {}
         ) as CSSProperties;
 
+        // style
+            const accentColorStyle = (
path: src/FieldsKeeper/FieldsKeeperBucket.tsx
user: login: ThayalanGR
body: good one!
created_at: 2025-03-20T09:30:12Z
author_association: OWNER

PR comments:
user: login: codesandbox[bot]
created_at: 2025-03-19T08:47:21Z
body: #### Review or Edit in CodeSandbox

Open the branch in <a href="https://codesandbox.io/p/github/sathish151198/react-fields-keeper/Annotate_render?mode=review&utm_source=gh_app">Web Editor</a> &bull; <a href="https://codesandbox.io/p/vscode?owner=sathish151198&repo=react-fields-keeper&branch=Annotate_render&utm_source=gh_app">VS Code</a> &bull; <a href="https://codesandbox.io/p/vscode?owner=sathish151198&repo=react-fields-keeper&branch=Annotate_render&insiders=true&utm_source=gh_app">Insiders</a><br>
Open <a href="https://codesandbox.io/p/devtool/preview/sathish151198/react-fields-keeper/Annotate_render?task=preview&port=51423&redirect=true&utm_source=gh_app">Preview</a>

<!-- open-in-codesandbox:complete -->

author_association: NONE
user: login: vercel[bot]
created_at: 2025-03-19T08:47:22Z
body: [vc]: #5XEmKtHZQ8WvBYemEgzHg5FkDJoRFNK/fxQkuWu3Y8M=:eyJpc01vbm9yZXBvIjp0cnVlLCJ0eXBlIjoiZ2l0aHViIiwicHJvamVjdHMiOlt7Im5hbWUiOiJyZWFjdC1maWVsZHMta2VlcGVyIiwicm9vdERpcmVjdG9yeSI6bnVsbCwiaW5zcGVjdG9yVXJsIjoiaHR0cHM6Ly92ZXJjZWwuY29tL3RoYXlhbGFuZ3JzLXByb2plY3RzL3JlYWN0LWZpZWxkcy1rZWVwZXIvOHdrRHdnemphTVBrc1FhdmVvdEtqNFFvNDk5SyIsInByZXZpZXdVcmwiOiJyZWFjdC1maWVsZHMta2VlcGVyLWdpdC1mb3JrLXNhdGhpcy0yOTc2YzUtdGhheWFsYW5ncnMtcHJvamVjdHMudmVyY2VsLmFwcCIsIm5leHRDb21taXRTdGF0dXMiOiJERVBMT1lFRCIsImxpdmVGZWVkYmFjayI6eyJyZXNvbHZlZCI6MCwidW5yZXNvbHZlZCI6MCwidG90YWwiOjAsImxpbmsiOiJyZWFjdC1maWVsZHMta2VlcGVyLWdpdC1mb3JrLXNhdGhpcy0yOTc2YzUtdGhheWFsYW5ncnMtcHJvamVjdHMudmVyY2VsLmFwcCJ9fV19
**The latest updates on your projects**. Learn more about [Vercel for Git ↗︎](https://vercel.link/github-learn-more)

| Name | Status | Preview | Comments | Updated (UTC) |
| :--- | :----- | :------ | :------- | :------ |
| **react-fields-keeper** | ✅ Ready ([Inspect](https://vercel.com/thayalangrs-projects/react-fields-keeper/8wkDwgzjaMPksQaveotKj4Qo499K)) | [Visit Preview](https://react-fields-keeper-git-fork-sathis-2976c5-thayalangrs-projects.vercel.app) | 💬 [**Add feedback**](https://vercel.live/open-feedback/react-fields-keeper-git-fork-sathis-2976c5-thayalangrs-projects.vercel.app?via=pr-comment-feedback-link) | Mar 20, 2025 9:29am |


author_association: NONE
user: login: sathish151198
created_at: 2025-03-20T09:16:09Z
body: Updated the icon size and Implemented Accent Color for rfk

Commit Link For reference : https://github.com/ThayalanGR/react-fields-keeper/pull/21/commits/078afe13263ffc06e30aceb19ff7649e583830cf
author_association: CONTRIBUTOR