@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.10

package/file-upload/types.d.ts

@@ -1,27 +1,59 @@
+import type { FormLabelProps } from "../form/form-label/types";
+/**
+ * Represents a single file entry managed by `FileUpload`.
+ */
 export interface FileItemProps {
+    /** Unique identifier used to target delete, edit, and sort operations. */
     id: string;
-    /** The name of the file */
+    /** The display name of the file */
     name: string;
-    /** The MIME type of the file */
+    /** The MIME type of the file (e.g. `"application/pdf"`). */
     type: string;
-    /** The size of the file in bytes */
+    /** The size of the file in bytes. Displayed as formatted text when provided. */
     size: number;
     /** The alt text or description of the file */
     description?: string | undefined;
-    /** The upload progress display. Values from 0 to 1 */
+    /**
+     * Upload progress expressed as a fraction between 0 and 1.
+     * When provided, a progress indicator is rendered on the file item.
+     */
     progress?: number | undefined;
-    /** The error message display to indicate file upload error */
+    /**
+     * Error message shown on the file item to indicate an upload failure.
+     * Accepts a plain string or a React node for richer error display.
+     */
     errorMessage?: string | React.ReactNode | undefined;
-    /** The thumbnail of the file that will be rendered */
+    /**
+     * URL or data URL for a thumbnail image shown alongside the file entry.
+     * When not provided, a PDF icon is displayed for PDF files only;
+     * other file types show no default icon.
+     */
     thumbnailImageDataUrl?: string | undefined;
-    /** Indicates if text should be truncated */
+    /**
+     * Truncates long file names with an ellipsis when `true`.
+     *
+     * @default true
+     */
     truncateText?: boolean | undefined;
 }
+/**
+ * Visual style variant for `FileUpload`.
+ *
+ * - `"bordered"` — renders a visible border around the component.
+ * - `"no-border"` — renders the component without a border.
+ */
 export type FileUploadStyle = "bordered" | "no-border";
+/**
+ * Native file-input props forwarded to the underlying `<input type="file">` element.
+ */
 export interface FileInputProps {
     /** Defines the file types that is accepted */
     accept?: string | undefined;
-    /** Specifies which camera to use for capture of image or video data  */
+    /**
+     * Specifies which camera to use for capture of image or video data
+     *
+     * @see https://www.w3.org/TR/html-media-capture/#the-capture-attribute
+     */
     capture?: boolean | "user" | "environment" | undefined;
     /** Specifies if user is allowed to select more than one file. */
     multiple?: boolean | undefined;
@@ -31,35 +63,111 @@ export interface FileInputProps {
     "data-testid"?: string | undefined;
     name?: string | undefined;
 }
+/** Props for the `FileUpload` component. */
 export interface FileUploadProps extends FileInputProps {
-    /** Component specific */
+    /**
+     * Heading rendered at the top of the component. Accepts a plain string or a JSX
+     * element for rich formatting.
+     */
     title?: string | JSX.Element | undefined;
+    /**
+     * Supporting text rendered below `title`. Accepts a plain string or a JSX
+     * element for rich formatting.
+     */
     description?: string | JSX.Element | undefined;
-    /** The style type for the component. Values "bordered" | "no-border" */
+    /**
+     * Visual style variant for the component.
+     *
+     * @default "bordered"
+     */
     styleType?: FileUploadStyle | undefined;
+    /**
+     * Maximum number of files the component will accept.
+     * Once `fileItems.length` reaches this value, uploading is disabled until an item is removed.
+     */
     maxFiles?: number | undefined;
+    /**
+     * Warning message rendered inside the component. Accepts a plain string
+     * or a JSX element for rich formatting.
+     */
     warning?: string | JSX.Element | undefined;
+    /**
+     * Controlled list of file items displayed in the file list.
+     * Update this array in response to `onChange`, `onDelete`, `onEdit`, and
+     * `onSort` to reflect the current upload state.
+     */
     fileItems?: FileItemProps[] | undefined;
-    /** If set, file items will have editable descriptions (only image files) */
+    /**
+     * When `true`, image file items render an editable description field.
+     * Editing triggers `onEdit` with the updated `FileItemProps`.
+     *
+     * @default false
+     */
     editableFileItems?: boolean | undefined;
-    /** The max length of the description of the file (only image files) */
+    /**
+     * Character limit for the description input on editable image file items.
+     * Only applies when `editableFileItems` is `true`.
+     */
     fileDescriptionMaxLength?: number | undefined;
-    /** Specifies if sorting is enabled for the file items */
+    /**
+     * When `false`, the save button on an editable file item is enabled even
+     * when the description field is empty.
+     *
+     * @default true
+     */
+    descriptionRequired?: boolean | undefined;
+    /**
+     * Overrides the default label and subtext for the description input field
+     * on editable file items.
+     */
+    descriptionLabel?: FormLabelProps | undefined;
+    /**
+     * When `true`, file items can be reordered via drag-and-drop.
+     * The reordered list is emitted via `onSort`.
+     *
+     * @default false
+     */
     sortable?: boolean | undefined;
-    /** The general error message for the component */
+    /**
+     * General error message rendered below the file list.
+     * Accepts a plain string or a JSX element for rich formatting.
+     */
     errorMessage?: string | JSX.Element | undefined;
-    /** Indicates if the component is in the readonly state */
+    /**
+     * When `true`, the upload button and drop zone are hidden and file items
+     * are rendered without delete or edit controls.
+     */
     readOnly?: boolean | undefined;
-    /** Specify custom label text for elements within the component */
+    /**
+     * Overrides default label text for elements within the component.
+     */
     customLabels?: {
         uploadButtonLabel?: string | undefined;
     } | undefined;
-    /** Called when an upload happens via drag drop or click */
+    /**
+     * Called with the newly uploaded files.
+     * Receives only the files that fit within the remaining `maxFiles` slots.
+     *
+     * @param files Array of `File` objects added by the user.
+     */
     onChange?: ((files: File[]) => void) | undefined;
-    /** Called when an update to the description happens */
+    /**
+     * Called when the user saves an edited description on a file item.
+     *
+     * @param fileItem The updated `FileItemProps` with the new description.
+     */
     onEdit?: ((fileItem: FileItemProps) => void) | undefined;
-    /** Called when a file item's delete button is clicked */
+    /**
+     * Called when the user clicks the delete button on a file item.
+     *
+     * @param fileItem The item to be removed.
+     */
     onDelete?: ((fileItem: FileItemProps) => void) | undefined;
-    /** Called when a drag sort is made */
+    /**
+     * Called after the user reorders file items via drag-and-drop.
+     * Only fired when `sortable` is `true`.
+     *
+     * @param fileItems The full reordered array of `FileItemProps`.
+     */
     onSort?: ((fileItems: FileItemProps[]) => void) | undefined;
 }

package/filter/addons/filter-item-checkbox-helpers.d.ts

@@ -1,5 +1,5 @@
-import type { FilterItemCheckboxOptionProps } from "../types";
-import type { FlattenedFilterOption } from "./types";
+import type { FlattenedFilterOption } from "./internal-types";
+import type { FilterItemCheckboxOptionProps } from "./types";
 /**
  * Builds a key path string from an array of keys
  */

package/filter/addons/filter-item-checkbox-helpers.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox-helpers.js","sources":["../../../src/filter/addons/filter-item-checkbox-helpers.ts"],"sourcesContent":["import type { FilterItemCheckboxOptionProps } from \"../types\";\nimport type { FlattenedFilterOption } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTIONS FOR NESTED OPTIONS\n// =============================================================================\n\n/**\n * Builds a key path string from an array of keys\n */\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\".\");\n};\n\n/**\n * Flattens nested options into a flat array for rendering\n */\nexport const flattenNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    nestedOptions: T[],\n    parentKeyPath: string[] = [],\n    valueExtractor?: (item: T) => string,\n    labelExtractor?: (item: T) => string\n): FlattenedFilterOption<T>[] => {\n    const flattened: FlattenedFilterOption<T>[] = [];\n\n    nestedOptions.forEach((option, index) => {\n        const value: string = valueExtractor\n            ? valueExtractor(option)\n            : (option as any).value;\n        const label: string = labelExtractor\n            ? labelExtractor(option)\n            : (option as any).label;\n        const options: any[] = (option as any).options;\n        const keyPath = [...parentKeyPath, value];\n        const hasChildren = !!(options && options.length > 0);\n\n        flattened.push({\n            originalItem: option,\n            value,\n            label,\n            keyPath,\n            level: parentKeyPath.length,\n            hasChildren,\n            parentKeyPath: parentKeyPath.length > 0 ? parentKeyPath : undefined,\n            indexInParent: index,\n            parentSetSize: nestedOptions.length,\n        });\n\n        // Recursively flatten children\n        if (hasChildren) {\n            flattened.push(\n                ...flattenNestedOptions(\n                    options,\n                    keyPath,\n                    valueExtractor,\n                    labelExtractor\n                )\n            );\n        }\n    });\n\n    return flattened;\n};\n\n/**\n * Checks if a child key path is a descendant of a parent key path\n */\nconst isChild = (parentKeyPath: string[], childKeyPath: string[]): boolean => {\n    if (childKeyPath.length <= parentKeyPath.length) return false;\n\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const childKeyPathString = buildKeyPath(childKeyPath);\n\n    return childKeyPathString.startsWith(parentKeyPathString + \".\");\n};\n\n/**\n * Gets all descendant key paths (children, grandchildren, etc.) for a given parent\n */\nexport const getAllDescendantKeyPaths = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): string[][] => {\n    return flattenedOptions\n        .filter((option) => isChild(parentKeyPath, option.keyPath))\n        .map((option) => option.keyPath);\n};\n\n/**\n * Gets all descendant leaf children (non-parent items)\n */\nexport const getAllDescendantChildren = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): T[] => {\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const children: T[] = [];\n\n    const parentIndex = flattenedOptions.findIndex(\n        (option) => buildKeyPath(option.keyPath) === parentKeyPathString\n    );\n\n    if (parentIndex === -1) return children;\n\n    // Single pass: iterate from parent+1 until we find an item that's not a descendant\n    for (let i = parentIndex + 1; i < flattenedOptions.length; i++) {\n        const option = flattenedOptions[i];\n\n        // Check if this item is a descendant\n        if (isChild(parentKeyPath, option.keyPath)) {\n            // Only include leaf nodes (non-parent items)\n            if (!option.hasChildren) {\n                children.push(option.originalItem as T);\n            }\n        } else {\n            // No more descendants - we can break early\n            break;\n        }\n    }\n\n    return children;\n};\n\n/**\n * Checks if an option has nested options\n */\nexport const hasNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    options: T[],\n    optionsExtractor?: (item: T) => T[]\n): boolean => {\n    return options.some((option: T) => {\n        const nestedOptions: any[] = optionsExtractor\n            ? optionsExtractor(option)\n            : (option as any).options;\n        return nestedOptions && nestedOptions.length > 0;\n    });\n};\n"],"names":["buildKeyPath","keyPath","join","flattenNestedOptions","nestedOptions","parentKeyPath","valueExtractor","labelExtractor","flattened","forEach","option","index","value","label","options","hasChildren","length","push","originalItem","level","undefined","indexInParent","parentSetSize","isChild","childKeyPath","parentKeyPathString","startsWith","getAllDescendantKeyPaths","flattenedOptions","filter","map","getAllDescendantChildren","children","parentIndex","findIndex","i","hasNestedOptions","optionsExtractor","some"],"mappings":"AAUO,MAAMA,EAAgBC,GAClBA,EAAQC,KAAK,KAMXC,EAAuB,CAChCC,EACAC,EAA0B,GAC1BC,EACAC,KAEA,MAAMC,EAAwC,GAsC9C,OApCAJ,EAAcK,SAAQ,CAACC,EAAQC,KAC3B,MAAMC,EAAgBN,EAChBA,EAAeI,GACdA,EAAeE,MAChBC,EAAgBN,EAChBA,EAAeG,GACdA,EAAeG,MAChBC,EAAkBJ,EAAeI,QACjCb,EAAU,IAAII,EAAeO,GAC7BG,KAAiBD,GAAWA,EAAQE,OAAS,GAEnDR,EAAUS,KAAK,CACXC,aAAcR,EACdE,QACAC,QACAZ,UACAkB,MAAOd,EAAcW,OACrBD,cACAV,cAAeA,EAAcW,OAAS,EAAIX,OAAgBe,EAC1DC,cAAeV,EACfW,cAAelB,EAAcY,SAI7BD,GACAP,EAAUS,QACHd,EACCW,EACAb,EACAK,EACAC,GAGZ,IAGGC,CAAS,EAMde,EAAU,CAAClB,EAAyBmB,KACtC,GAAIA,EAAaR,QAAUX,EAAcW,OAAQ,OAAO,EAExD,MAAMS,EAAsBzB,EAAaK,GAGzC,OAF2BL,EAAawB,GAEdE,WAAWD,EAAsB,IAAI,EAMtDE,EAA2B,CACpCC,EACAvB,IAEOuB,EACFC,QAAQnB,GAAWa,EAAQlB,EAAeK,EAAOT,WACjD6B,KAAKpB,GAAWA,EAAOT,UAMnB8B,EAA2B,CACpCH,EACAvB,KAEA,MAAMoB,EAAsBzB,EAAaK,GACnC2B,EAAgB,GAEhBC,EAAcL,EAAiBM,WAChCxB,GAAWV,EAAaU,EAAOT,WAAawB,IAGjD,IAAoB,IAAhBQ,EAAoB,OAAOD,EAG/B,IAAK,IAAIG,EAAIF,EAAc,EAAGE,EAAIP,EAAiBZ,OAAQmB,IAAK,CAC5D,MAAMzB,EAASkB,EAAiBO,GAGhC,IAAIZ,EAAQlB,EAAeK,EAAOT,SAO9B,MALKS,EAAOK,aACRiB,EAASf,KAAKP,EAAOQ,aAMjC,CAEA,OAAOc,CAAQ,EAMNI,EAAmB,CAC5BtB,EACAuB,IAEOvB,EAAQwB,MAAM5B,IACjB,MAAMN,EAAuBiC,EACvBA,EAAiB3B,GAChBA,EAAeI,QACtB,OAAOV,GAAiBA,EAAcY,OAAS,CAAC"}
+{"version":3,"file":"filter-item-checkbox-helpers.js","sources":["../../../src/filter/addons/filter-item-checkbox-helpers.ts"],"sourcesContent":["import type { FlattenedFilterOption } from \"./internal-types\";\nimport type { FilterItemCheckboxOptionProps } from \"./types\";\n\n// =============================================================================\n// HELPER FUNCTIONS FOR NESTED OPTIONS\n// =============================================================================\n\n/**\n * Builds a key path string from an array of keys\n */\nexport const buildKeyPath = (keyPath: string[]): string => {\n    return keyPath.join(\".\");\n};\n\n/**\n * Flattens nested options into a flat array for rendering\n */\nexport const flattenNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    nestedOptions: T[],\n    parentKeyPath: string[] = [],\n    valueExtractor?: (item: T) => string,\n    labelExtractor?: (item: T) => string\n): FlattenedFilterOption<T>[] => {\n    const flattened: FlattenedFilterOption<T>[] = [];\n\n    nestedOptions.forEach((option, index) => {\n        const value: string = valueExtractor\n            ? valueExtractor(option)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (option as any).value;\n        const label: string = labelExtractor\n            ? labelExtractor(option)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (option as any).label;\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const options: any[] = (option as any).options;\n        const keyPath = [...parentKeyPath, value];\n        const hasChildren = !!(options && options.length > 0);\n\n        flattened.push({\n            originalItem: option,\n            value,\n            label,\n            keyPath,\n            level: parentKeyPath.length,\n            hasChildren,\n            parentKeyPath: parentKeyPath.length > 0 ? parentKeyPath : undefined,\n            indexInParent: index,\n            parentSetSize: nestedOptions.length,\n        });\n\n        // Recursively flatten children\n        if (hasChildren) {\n            flattened.push(\n                ...flattenNestedOptions(\n                    options,\n                    keyPath,\n                    valueExtractor,\n                    labelExtractor\n                )\n            );\n        }\n    });\n\n    return flattened;\n};\n\n/**\n * Checks if a child key path is a descendant of a parent key path\n */\nconst isChild = (parentKeyPath: string[], childKeyPath: string[]): boolean => {\n    if (childKeyPath.length <= parentKeyPath.length) return false;\n\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const childKeyPathString = buildKeyPath(childKeyPath);\n\n    return childKeyPathString.startsWith(parentKeyPathString + \".\");\n};\n\n/**\n * Gets all descendant key paths (children, grandchildren, etc.) for a given parent\n */\nexport const getAllDescendantKeyPaths = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): string[][] => {\n    return flattenedOptions\n        .filter((option) => isChild(parentKeyPath, option.keyPath))\n        .map((option) => option.keyPath);\n};\n\n/**\n * Gets all descendant leaf children (non-parent items)\n */\nexport const getAllDescendantChildren = <T = FilterItemCheckboxOptionProps>(\n    flattenedOptions: FlattenedFilterOption<T>[],\n    parentKeyPath: string[]\n): T[] => {\n    const parentKeyPathString = buildKeyPath(parentKeyPath);\n    const children: T[] = [];\n\n    const parentIndex = flattenedOptions.findIndex(\n        (option) => buildKeyPath(option.keyPath) === parentKeyPathString\n    );\n\n    if (parentIndex === -1) return children;\n\n    // Single pass: iterate from parent+1 until we find an item that's not a descendant\n    for (let i = parentIndex + 1; i < flattenedOptions.length; i++) {\n        const option = flattenedOptions[i];\n\n        // Check if this item is a descendant\n        if (isChild(parentKeyPath, option.keyPath)) {\n            // Only include leaf nodes (non-parent items)\n            if (!option.hasChildren) {\n                children.push(option.originalItem as T);\n            }\n        } else {\n            // No more descendants - we can break early\n            break;\n        }\n    }\n\n    return children;\n};\n\n/**\n * Checks if an option has nested options\n */\nexport const hasNestedOptions = <T = FilterItemCheckboxOptionProps>(\n    options: T[],\n    optionsExtractor?: (item: T) => T[]\n): boolean => {\n    return options.some((option: T) => {\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        const nestedOptions: any[] = optionsExtractor\n            ? optionsExtractor(option)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (option as any).options;\n        return nestedOptions && nestedOptions.length > 0;\n    });\n};\n"],"names":["buildKeyPath","keyPath","join","flattenNestedOptions","nestedOptions","parentKeyPath","valueExtractor","labelExtractor","flattened","forEach","option","index","value","label","options","hasChildren","length","push","originalItem","level","undefined","indexInParent","parentSetSize","isChild","childKeyPath","parentKeyPathString","startsWith","getAllDescendantKeyPaths","flattenedOptions","filter","map","getAllDescendantChildren","children","parentIndex","findIndex","i","hasNestedOptions","optionsExtractor","some"],"mappings":"AAUO,MAAMA,EAAgBC,GAClBA,EAAQC,KAAK,KAMXC,EAAuB,CAChCC,EACAC,EAA0B,GAC1BC,EACAC,KAEA,MAAMC,EAAwC,GAyC9C,OAvCAJ,EAAcK,SAAQ,CAACC,EAAQC,KAC3B,MAAMC,EAAgBN,EAChBA,EAAeI,GAEdA,EAAeE,MAChBC,EAAgBN,EAChBA,EAAeG,GAEdA,EAAeG,MAEhBC,EAAkBJ,EAAeI,QACjCb,EAAU,IAAII,EAAeO,GAC7BG,KAAiBD,GAAWA,EAAQE,OAAS,GAEnDR,EAAUS,KAAK,CACXC,aAAcR,EACdE,QACAC,QACAZ,UACAkB,MAAOd,EAAcW,OACrBD,cACAV,cAAeA,EAAcW,OAAS,EAAIX,OAAgBe,EAC1DC,cAAeV,EACfW,cAAelB,EAAcY,SAI7BD,GACAP,EAAUS,QACHd,EACCW,EACAb,EACAK,EACAC,GAGZ,IAGGC,CAAS,EAMde,EAAU,CAAClB,EAAyBmB,KACtC,GAAIA,EAAaR,QAAUX,EAAcW,OAAQ,OAAO,EAExD,MAAMS,EAAsBzB,EAAaK,GAGzC,OAF2BL,EAAawB,GAEdE,WAAWD,EAAsB,IAAI,EAMtDE,EAA2B,CACpCC,EACAvB,IAEOuB,EACFC,QAAQnB,GAAWa,EAAQlB,EAAeK,EAAOT,WACjD6B,KAAKpB,GAAWA,EAAOT,UAMnB8B,EAA2B,CACpCH,EACAvB,KAEA,MAAMoB,EAAsBzB,EAAaK,GACnC2B,EAAgB,GAEhBC,EAAcL,EAAiBM,WAChCxB,GAAWV,EAAaU,EAAOT,WAAawB,IAGjD,IAAoB,IAAhBQ,EAAoB,OAAOD,EAG/B,IAAK,IAAIG,EAAIF,EAAc,EAAGE,EAAIP,EAAiBZ,OAAQmB,IAAK,CAC5D,MAAMzB,EAASkB,EAAiBO,GAGhC,IAAIZ,EAAQlB,EAAeK,EAAOT,SAO9B,MALKS,EAAOK,aACRiB,EAASf,KAAKP,EAAOQ,aAMjC,CAEA,OAAOc,CAAQ,EAMNI,EAAmB,CAC5BtB,EACAuB,IAEOvB,EAAQwB,MAAM5B,IAEjB,MAAMN,EAAuBiC,EACvBA,EAAiB3B,GAEhBA,EAAeI,QACtB,OAAOV,GAAiBA,EAAcY,OAAS,CAAC"}

package/filter/addons/filter-item-checkbox.d.ts

@@ -1,4 +1,4 @@
-import type { FilterItemCheckboxOptionProps, FilterItemCheckboxProps } from "../types";
+import type { FilterItemCheckboxOptionProps, FilterItemCheckboxProps } from "./types";
 export declare const FilterItemCheckbox: {
     <T = FilterItemCheckboxOptionProps>({ selectedOptions, options, showAsCheckboxInMobile, minimisableOptions, onSelect, labelExtractor, valueExtractor, useToggleContentWidth, ...filterItemProps }: FilterItemCheckboxProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/filter/addons/filter-item-checkbox.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as i,Fragment as l}from"react/jsx-runtime";import{useContext as n,useState as r,useRef as o,useMemo as a,useCallback as s,useEffect as c}from"react";import{useResizeDetector as d}from"../../external/react-resize-detector/build/index.esm.js";import{FilterContext as h}from"../filter-context.js";import{StyledFilterItem as m,Group as u,SelectAllButton as g,StyledToggle as f,Item as p,StyledCheckbox as v}from"./filter-item-checkbox.styles.js";import{hasNestedOptions as b,flattenNestedOptions as k,buildKeyPath as x,getAllDescendantChildren as C,getAllDescendantKeyPaths as y}from"./filter-item-checkbox-helpers.js";const I=I=>{var{selectedOptions:S,options:j,showAsCheckboxInMobile:O=!1,minimisableOptions:E=!0,onSelect:M,labelExtractor:T,valueExtractor:$,useToggleContentWidth:z}=I,P=e(I,["selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth"]);const{mode:W}=n(h),[w,A]=r(S||[]),[H,D]=r(),[R,_]=r(j.length),F=o(null),K=o(null),L=a((()=>b(j,(e=>e.options))),[j]),N="mobile"===W&&!O&&!L,q=a((()=>k(j,[],$||(e=>e.value),T||(e=>e.label))),[j,$,T]),B=q.length,G=e=>()=>{const t=q.find((t=>t.originalItem===e));if(t)if(t.hasChildren){const e=C(q,t.keyPath),i=e.filter((e=>w.some((t=>Y(t)===Y(e)))));let l=[...w];i.length===e.length?l=l.filter((t=>!e.some((e=>Y(e)===Y(t))))):e.forEach((e=>{l.some((t=>Y(t)===Y(e)))||l.push(e)})),A(l),null==M||M(l)}else{const t=[...w],i=w.findIndex((t=>Y(t)===Y(e)));i>=0?t.splice(i,1):t.push(e),A(t),null==M||M(t)}},J=()=>{if(L)if(w.length>0)A([]),null==M||M([]);else{const e=q.filter((e=>!e.hasChildren)).map((e=>e.originalItem));A(e),null==M||M(e)}else{const e=w.length?[]:j;A(e),null==M||M(e)}},Q=e=>t=>{!L||" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),G(e)())},U=e=>()=>{L||G(e)()},V=e=>{if(!e.hasChildren)return{checked:w.some((t=>Y(t)===Y(e.originalItem))),indeterminate:!1};const t=y(q,e.keyPath).map((e=>q.find((t=>x(t.keyPath)===x(e))))).filter((e=>e&&!e.hasChildren)).map((e=>e.originalItem)),i=t.filter((e=>w.some((t=>Y(t)===Y(e)))));return{checked:i.length===t.length&&t.length>0,indeterminate:i.length>0&&i.length<t.length}},X=e=>{var t;return T?T(e):null!==(t=e.label)&&void 0!==t?t:null==e?void 0:e.toString()},Y=e=>{var t;return $?$(e):null!==(t=e.value)&&void 0!==t?t:null==e?void 0:e.toString()},Z=()=>{const e=K.current?K.current.offsetTop+K.current.clientHeight:void 0;D(e)},ee=s((()=>{if(!F.current)return void D(void 0);const e=Array.from(F.current.children);let t=0,i=0,l=-1;for(let n=0;n<e.length;n++){const r=e[n].offsetTop;if(r>l&&(i++,l=r,i>2))break;t=n}_(t),D(i>2?l-8:void 0)}),[]);c((()=>{S!==w&&A(S||[])}),[S]),c((()=>{N?ee():Z()}),[j]),d({handleWidth:!0,handleHeight:!1,skipOnMount:!0,refreshMode:"throttle",targetRef:F,onResize:N?ee:Z});const te=(e,i)=>{const{checked:l,indeterminate:n}=V(i);return t(v,{displaySize:"small",checked:l,indeterminate:n,onChange:U(e),tabIndex:L?-1:void 0,"aria-hidden":L?"true":void 0})},ie=()=>{var e;return B<3?null:t(g,{styleType:"link",type:"button",onClick:J,"aria-label":w.length?"Clear all selections":`Select all in ${(null===(e=F.current)||void 0===e?void 0:e.ariaLabel)||"this group"}`,children:w.length?"Clear all":"Select all"})};return t(m,Object.assign({minimisable:!!E&&(N?!!H:B>5),minimisedHeight:H},P,{children:(e,{minimised:n})=>i(l,{children:[ie(),t(u,{role:L?"tree":"group","aria-label":P.title,"aria-multiselectable":!0,ref:F,$isMobileToggleMode:N,children:q.map(((e,l)=>N?((e,i,l)=>{const n=e.originalItem,r=X(n),o=Y(n),a=!!w.find((e=>Y(e)===o));return t(f,{type:"checkbox",checked:a,$visible:!l||!!H&&i<=R,onChange:G(n),useContentWidth:z,children:r},o)})(e,l,n):((e,t,l)=>{const n=e.originalItem,r=X(n),{checked:o,indeterminate:a}=V(e),s=o||a,c=!l||t<5,d=L?{"aria-checked":a?"mixed":o,"aria-selected":!!o,"aria-level":e.level+1,"aria-posinset":e.indexInParent+1,"aria-setsize":e.parentSetSize}:{};return i(p,Object.assign({as:L?"div":"label",role:L?"treeitem":void 0},d,{onClick:L?G(n):void 0,onKeyDown:Q(n),tabIndex:L?0:void 0,$visible:c,$selected:s,$level:e.level,ref:4===t?K:void 0,children:[te(n,e),r]}),x(e.keyPath))})(e,l,n)))})]})}))};I.displayName="Filter.Checkbox";export{I as FilterItemCheckbox};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsx as t,jsxs as l,Fragment as i}from"react/jsx-runtime";import n from"clsx";import{useContext as r,useState as o,useRef as a,useMemo as s,useCallback as c,useEffect as m}from"react";import{useResizeDetector as h}from"../../external/react-resize-detector/build/index.esm.js";import{Button as d}from"../../button/button.js";import{Checkbox as u}from"../../checkbox/checkbox.js";import{Toggle as f}from"../../toggle/toggle.js";import{FilterContext as p}from"../filter-context.js";import{FilterItem as g}from"../filter-item.js";import{group as b,groupMobileToggleMode as v,filterItem as k,selectAllButton as x,toggle as y,toggleHidden as C,item as j,itemHidden as I,itemSelected as S,checkbox as N,tokens as O}from"./filter-item-checkbox.styles.js";import{hasNestedOptions as P,flattenNestedOptions as z,buildKeyPath as E,getAllDescendantChildren as T,getAllDescendantKeyPaths as w}from"./filter-item-checkbox-helpers.js";const M=M=>{var{selectedOptions:W,options:A,showAsCheckboxInMobile:D=!1,minimisableOptions:H=!0,onSelect:K,labelExtractor:R,valueExtractor:_,useToggleContentWidth:F}=M,L=e(M,["selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth"]);const{mode:$}=r(p),[q,B]=o(W||[]),[G,J]=o(),[Q,U]=o(A.length),V=a(null),X=a(null),Y=s((()=>P(A,(e=>e.options))),[A]),Z="mobile"===$&&!D&&!Y,ee=s((()=>z(A,[],_||(e=>e.value),R||(e=>e.label))),[A,_,R]),te=ee.length,le=e=>()=>{const t=ee.find((t=>t.originalItem===e));if(t)if(t.hasChildren){const e=T(ee,t.keyPath),l=e.filter((e=>q.some((t=>se(t)===se(e)))));let i=[...q];l.length===e.length?i=i.filter((t=>!e.some((e=>se(e)===se(t))))):e.forEach((e=>{i.some((t=>se(t)===se(e)))||i.push(e)})),B(i),null==K||K(i)}else{const t=[...q],l=q.findIndex((t=>se(t)===se(e)));l>=0?t.splice(l,1):t.push(e),B(t),null==K||K(t)}},ie=()=>{if(Y)if(q.length>0)B([]),null==K||K([]);else{const e=ee.filter((e=>!e.hasChildren)).map((e=>e.originalItem));B(e),null==K||K(e)}else{const e=q.length?[]:A;B(e),null==K||K(e)}},ne=e=>t=>{!Y||" "!==t.key&&"Enter"!==t.key||(t.preventDefault(),le(e)())},re=e=>()=>{Y||le(e)()},oe=e=>{if(!e.hasChildren)return{checked:q.some((t=>se(t)===se(e.originalItem))),indeterminate:!1};const t=w(ee,e.keyPath).map((e=>ee.find((t=>E(t.keyPath)===E(e))))).filter((e=>e&&!e.hasChildren)).map((e=>e.originalItem)),l=t.filter((e=>q.some((t=>se(t)===se(e)))));return{checked:l.length===t.length&&t.length>0,indeterminate:l.length>0&&l.length<t.length}},ae=e=>{var t;return R?R(e):null!==(t=e.label)&&void 0!==t?t:null==e?void 0:e.toString()},se=e=>{var t;return _?_(e):null!==(t=e.value)&&void 0!==t?t:null==e?void 0:e.toString()},ce=()=>{const e=X.current?X.current.offsetTop+X.current.clientHeight:void 0;J(e)},me=c((()=>{if(!V.current)return void J(void 0);const e=Array.from(V.current.children);let t=0,l=0,i=-1;for(let n=0;n<e.length;n++){const r=e[n].offsetTop;if(r>i&&(l++,i=r,l>2))break;t=n}U(t),J(l>2?i-8:void 0)}),[]);m((()=>{W!==q&&B(W||[])}),[W]),m((()=>{Z?me():ce()}),[A]),h({handleWidth:!0,handleHeight:!1,skipOnMount:!0,refreshMode:"throttle",targetRef:V,onResize:Z?me:ce});const he=(e,l)=>{const{checked:i,indeterminate:n}=oe(l);return t(u,{className:N,displaySize:"small",checked:i,indeterminate:n,onChange:re(e),tabIndex:Y?-1:void 0,"aria-hidden":Y?"true":void 0})},de=()=>{var e;return te<3?null:t(d,{className:x,styleType:"link",type:"button",sizeType:"small",onClick:ie,"aria-label":q.length?"Clear all selections":`Select all in ${(null===(e=V.current)||void 0===e?void 0:e.ariaLabel)||"this group"}`,children:q.length?"Clear all":"Select all"})};return t(g,Object.assign({minimisable:!!H&&(Z?!!G:te>5),minimisedHeight:G},L,{className:n(k,L.className),children:(e,{minimised:r})=>l(i,{children:[de(),t("div",{role:Y?"tree":"group","aria-label":L.title,"aria-multiselectable":!0,ref:V,className:n(b,Z&&v),children:ee.map(((e,o)=>Z?((e,l,i)=>{const r=e.originalItem,o=ae(r),a=se(r),s=!!q.find((e=>se(e)===a));return t(f,{type:"checkbox",checked:s,className:n(!F&&y,!(!i||G&&l<=Q)&&C),onChange:le(r),useContentWidth:F,children:o},a)})(e,o,r):((e,r,o)=>{const a=e.originalItem,s=ae(a),{checked:c,indeterminate:m}=oe(e),h=c||m,d=!o||r<5,u=Y?{"aria-checked":m?"mixed":c,"aria-selected":!!c,"aria-level":e.level+1,"aria-posinset":e.indexInParent+1,"aria-setsize":e.parentSetSize}:{},f=t=>{t&&e.level&&t.style.setProperty(O.item.level,String(e.level)),4===r&&(X.current=t)},p=n(j,!d&&I,h&&S),g=l(i,{children:[he(a,e),s]});return Y?t("div",Object.assign({role:"treeitem"},u,{onClick:le(a),onKeyDown:ne(a),tabIndex:0,className:p,ref:f,children:g}),E(e.keyPath)):t("label",{onKeyDown:ne(a),className:p,ref:f,children:g},E(e.keyPath))})(e,o,r)))})]})}))};M.displayName="Filter.Checkbox";export{M as FilterItemCheckbox};
 //# sourceMappingURL=filter-item-checkbox.js.map

package/filter/addons/filter-item-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox.js","sources":["../../../src/filter/addons/filter-item-checkbox.tsx"],"sourcesContent":["import type { AriaAttributes } from \"react\";\nimport {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { FilterContext } from \"../filter-context\";\nimport type {\n    FilterItemCheckboxOptionProps,\n    FilterItemCheckboxProps,\n} from \"../types\";\nimport {\n    Group,\n    Item,\n    SelectAllButton,\n    StyledCheckbox,\n    StyledFilterItem,\n    StyledToggle,\n} from \"./filter-item-checkbox.styles\";\nimport {\n    buildKeyPath,\n    flattenNestedOptions,\n    getAllDescendantChildren,\n    getAllDescendantKeyPaths,\n    hasNestedOptions,\n} from \"./filter-item-checkbox-helpers\";\nimport type { FlattenedFilterOption } from \"./types\";\n\nexport const FilterItemCheckbox = <T = FilterItemCheckboxOptionProps,>({\n    selectedOptions,\n    options,\n    showAsCheckboxInMobile = false,\n    minimisableOptions = true,\n    onSelect,\n    labelExtractor,\n    valueExtractor,\n    useToggleContentWidth,\n    ...filterItemProps\n}: FilterItemCheckboxProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode } = useContext(FilterContext);\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [minimisedHeight, setMinimisedHeight] = useState<number>();\n    const [lastVisibleElementIndex, setLastVisibleElementIndex] =\n        useState<number>(options.length);\n    const parentRef = useRef<HTMLDivElement>(null);\n    const lastVisibleElement = useRef<HTMLLabelElement>(null);\n\n    // Check if options have nested structure\n    const isNested = useMemo(\n        () => hasNestedOptions(options, (item) => (item as any).options),\n        [options]\n    );\n\n    const isMobileToggleMode =\n        mode === \"mobile\" && !showAsCheckboxInMobile && !isNested;\n\n    // Flatten nested options\n    const flattenedOptions = useMemo(\n        () =>\n            flattenNestedOptions(\n                options,\n                [],\n                valueExtractor || ((item) => (item as any).value),\n                labelExtractor || ((item) => (item as any).label)\n            ),\n        [options, valueExtractor, labelExtractor]\n    );\n\n    const optionCount = flattenedOptions.length;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemClick = (item: T) => () => {\n        // Find the flattened option\n        const flatOption = flattenedOptions.find(\n            (opt) => opt.originalItem === item\n        );\n        if (!flatOption) return;\n\n        if (flatOption.hasChildren) {\n            // Handle parent click - select/deselect all children\n            const allChildren = getAllDescendantChildren<T>(\n                flattenedOptions,\n                flatOption.keyPath\n            );\n\n            const currentlySelectedChildren = allChildren.filter((child) =>\n                selected.some((s) => getValue(s) === getValue(child))\n            );\n\n            let newSelection = [...selected];\n\n            if (currentlySelectedChildren.length === allChildren.length) {\n                // All children selected, deselect all\n                newSelection = newSelection.filter(\n                    (s) =>\n                        !allChildren.some(\n                            (child) => getValue(child) === getValue(s)\n                        )\n                );\n            } else {\n                // Some or no children selected, select all\n                allChildren.forEach((child) => {\n                    if (\n                        !newSelection.some(\n                            (s) => getValue(s) === getValue(child)\n                        )\n                    ) {\n                        newSelection.push(child);\n                    }\n                });\n            }\n\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        } else {\n            // Handle leaf item click - toggle selection\n            const newSelection = [...selected];\n            const selectedIndex = selected.findIndex(\n                (s) => getValue(s) === getValue(item)\n            );\n\n            if (selectedIndex >= 0) {\n                newSelection.splice(selectedIndex, 1);\n            } else {\n                newSelection.push(item);\n            }\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleSelectClearAll = () => {\n        if (isNested) {\n            if (selected.length > 0) {\n                // Clear all\n                setSelected([]);\n                onSelect?.([]);\n            } else {\n                // Select all leaf nodes\n                const leafOptions = flattenedOptions.filter(\n                    (option) => !option.hasChildren\n                );\n                const allValues = leafOptions.map(\n                    (option) => option.originalItem\n                ) as T[];\n                setSelected(allValues);\n                onSelect?.(allValues);\n            }\n        } else {\n            const newSelection = selected.length ? [] : options;\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleListItemKeyDown =\n        (originalItem: T) => (event: React.KeyboardEvent) => {\n            if (isNested && (event.key === \" \" || event.key === \"Enter\")) {\n                event.preventDefault();\n                handleItemClick(originalItem)();\n            }\n        };\n\n    const handleCheckboxChange = (originalItem: T) => () => {\n        if (!isNested) {\n            handleItemClick(originalItem)();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCheckboxState = (flatOption: (typeof flattenedOptions)[0]) => {\n        if (!flatOption.hasChildren) {\n            // Leaf item - simple check\n            return {\n                checked: selected.some(\n                    (s) =>\n                        getValue(s) === getValue(flatOption.originalItem as T)\n                ),\n                indeterminate: false,\n            };\n        }\n\n        // Parent item - check children states (following IndeterminateState pattern)\n        const allChildren = getAllDescendantKeyPaths(\n            flattenedOptions,\n            flatOption.keyPath\n        )\n            .map((keyPath: string[]) =>\n                flattenedOptions.find(\n                    (opt) => buildKeyPath(opt.keyPath) === buildKeyPath(keyPath)\n                )\n            )\n            .filter((opt) => opt && !opt.hasChildren)\n            .map((opt) => opt!.originalItem as T);\n\n        const selectedChildren = allChildren.filter((child) =>\n            selected.some((s) => getValue(s) === getValue(child))\n        );\n\n        return {\n            checked:\n                selectedChildren.length === allChildren.length &&\n                allChildren.length > 0,\n            indeterminate:\n                selectedChildren.length > 0 &&\n                selectedChildren.length < allChildren.length,\n        };\n    };\n\n    const getLabel = (item: T): React.ReactNode => {\n        return labelExtractor\n            ? labelExtractor(item)\n            : (item as any).label ?? item?.toString();\n    };\n\n    const getValue = (item: T): string => {\n        return valueExtractor\n            ? valueExtractor(item)\n            : (item as any).value ?? item?.toString();\n    };\n\n    const setVisibleItemsWhenMinimised = () => {\n        const elementBottom = lastVisibleElement.current\n            ? lastVisibleElement.current.offsetTop +\n              lastVisibleElement.current.clientHeight\n            : undefined;\n        setMinimisedHeight(elementBottom);\n    };\n\n    const setVisibleMobileItemsWhenMinimised = useCallback(() => {\n        if (!parentRef.current) {\n            setMinimisedHeight(undefined);\n            return;\n        }\n\n        const children = Array.from(parentRef.current.children);\n\n        let lastElementInRow = 0;\n        let rowCount = 0;\n        let rowTop = -1;\n\n        for (let i = 0; i < children.length; i++) {\n            const childTop = (children[i] as HTMLDivElement).offsetTop;\n            if (childTop > rowTop) {\n                rowCount++;\n                rowTop = childTop;\n                // show only the first 2 rows\n                if (rowCount > 2) {\n                    break;\n                }\n            }\n            lastElementInRow = i;\n        }\n\n        setLastVisibleElementIndex(lastElementInRow);\n\n        if (rowCount > 2) {\n            setMinimisedHeight(rowTop - 8); // gap from next row\n        } else {\n            setMinimisedHeight(undefined);\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (selectedOptions !== selected) {\n            setSelected(selectedOptions || []);\n        }\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (isMobileToggleMode) {\n            setVisibleMobileItemsWhenMinimised();\n        } else {\n            setVisibleItemsWhenMinimised();\n        }\n    }, [options]);\n\n    useResizeDetector({\n        handleWidth: true,\n        handleHeight: false,\n        skipOnMount: true,\n        refreshMode: \"throttle\",\n        targetRef: parentRef,\n        onResize: isMobileToggleMode\n            ? setVisibleMobileItemsWhenMinimised\n            : setVisibleItemsWhenMinimised,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCheckboxIcon = (\n        originalItem: T,\n        flatOption: FlattenedFilterOption<T>\n    ) => {\n        const { checked, indeterminate } = getCheckboxState(flatOption);\n\n        return (\n            <StyledCheckbox\n                displaySize=\"small\"\n                checked={checked}\n                indeterminate={indeterminate}\n                onChange={handleCheckboxChange(originalItem)}\n                tabIndex={isNested ? -1 : undefined}\n                aria-hidden={isNested ? \"true\" : undefined}\n            />\n        );\n    };\n\n    const renderCheckbox = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const { checked, indeterminate } = getCheckboxState(option);\n        const isSelected = checked || indeterminate;\n        const isVisible = !minimised || index < 5;\n\n        // ARIA attributes for tree items\n        const treeItemAriaAttributes: AriaAttributes = isNested\n            ? {\n                  \"aria-checked\": indeterminate ? \"mixed\" : checked,\n                  \"aria-selected\": !!checked,\n                  \"aria-level\": option.level + 1,\n                  \"aria-posinset\": option.indexInParent + 1,\n                  \"aria-setsize\": option.parentSetSize,\n              }\n            : {};\n\n        return (\n            <Item\n                key={buildKeyPath(option.keyPath)}\n                as={isNested ? \"div\" : \"label\"}\n                role={isNested ? \"treeitem\" : undefined}\n                {...treeItemAriaAttributes}\n                onClick={isNested ? handleItemClick(originalItem) : undefined}\n                onKeyDown={handleListItemKeyDown(originalItem)}\n                tabIndex={isNested ? 0 : undefined}\n                $visible={isVisible}\n                $selected={isSelected}\n                $level={option.level}\n                ref={index === 4 ? lastVisibleElement : undefined}\n            >\n                {renderCheckboxIcon(originalItem, option)}\n                {optionLabel}\n            </Item>\n        );\n    };\n\n    const renderToggle = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const optionValue = getValue(originalItem);\n        const checked = !!selected.find((s) => getValue(s) === optionValue);\n        return (\n            <StyledToggle\n                key={optionValue}\n                type=\"checkbox\"\n                checked={checked}\n                $visible={\n                    !minimised ||\n                    (!!minimisedHeight && index <= lastVisibleElementIndex)\n                }\n                onChange={handleItemClick(originalItem)}\n                useContentWidth={useToggleContentWidth}\n            >\n                {optionLabel}\n            </StyledToggle>\n        );\n    };\n\n    const renderSelectClearAllButton = () => {\n        if (optionCount < 3) {\n            return null;\n        }\n        return (\n            <SelectAllButton\n                styleType=\"link\"\n                type=\"button\"\n                onClick={handleSelectClearAll}\n                aria-label={\n                    selected.length\n                        ? \"Clear all selections\"\n                        : `Select all in ${\n                              parentRef.current?.ariaLabel || \"this group\"\n                          }`\n                }\n            >\n                {selected.length ? \"Clear all\" : \"Select all\"}\n            </SelectAllButton>\n        );\n    };\n\n    return (\n        <StyledFilterItem\n            minimisable={\n                minimisableOptions\n                    ? isMobileToggleMode // set minimisable base on mobile toggle mode\n                        ? !!minimisedHeight\n                        : optionCount > 5\n                    : false // if minimisableOptions is false, never allow minimising\n            }\n            minimisedHeight={minimisedHeight}\n            {...filterItemProps}\n        >\n            {(_, { minimised }) => (\n                <>\n                    {renderSelectClearAllButton()}\n                    <Group\n                        role={isNested ? \"tree\" : \"group\"}\n                        aria-label={filterItemProps.title}\n                        aria-multiselectable={true}\n                        ref={parentRef}\n                        $isMobileToggleMode={isMobileToggleMode}\n                    >\n                        {flattenedOptions.map((option, i) =>\n                            isMobileToggleMode\n                                ? renderToggle(option, i, minimised)\n                                : renderCheckbox(option, i, minimised)\n                        )}\n                    </Group>\n                </>\n            )}\n        </StyledFilterItem>\n    );\n};\n\nFilterItemCheckbox.displayName = \"Filter.Checkbox\";\n"],"names":["FilterItemCheckbox","_a","selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth","filterItemProps","__rest","mode","useContext","FilterContext","selected","setSelected","useState","minimisedHeight","setMinimisedHeight","lastVisibleElementIndex","setLastVisibleElementIndex","length","parentRef","useRef","lastVisibleElement","isNested","useMemo","hasNestedOptions","item","isMobileToggleMode","flattenedOptions","flattenNestedOptions","value","label","optionCount","handleItemClick","flatOption","find","opt","originalItem","hasChildren","allChildren","getAllDescendantChildren","keyPath","currentlySelectedChildren","filter","child","some","s","getValue","newSelection","forEach","push","selectedIndex","findIndex","splice","handleSelectClearAll","allValues","option","map","handleListItemKeyDown","event","key","preventDefault","handleCheckboxChange","getCheckboxState","checked","indeterminate","getAllDescendantKeyPaths","buildKeyPath","selectedChildren","getLabel","toString","setVisibleItemsWhenMinimised","elementBottom","current","offsetTop","clientHeight","undefined","setVisibleMobileItemsWhenMinimised","useCallback","children","Array","from","lastElementInRow","rowCount","rowTop","i","childTop","useEffect","useResizeDetector","handleWidth","handleHeight","skipOnMount","refreshMode","targetRef","onResize","renderCheckboxIcon","_jsx","StyledCheckbox","displaySize","onChange","tabIndex","renderSelectClearAllButton","SelectAllButton","styleType","type","onClick","ariaLabel","StyledFilterItem","Object","assign","minimisable","_","minimised","_jsxs","_Fragment","Group","role","title","ref","$isMobileToggleMode","index","optionLabel","optionValue","StyledToggle","$visible","useContentWidth","renderToggle","isSelected","isVisible","treeItemAriaAttributes","level","indexInParent","parentSetSize","Item","as","onKeyDown","$selected","$level","renderCheckbox","displayName"],"mappings":"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"}
+{"version":3,"file":"filter-item-checkbox.js","sources":["../../../src/filter/addons/filter-item-checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { AriaAttributes } from \"react\";\nimport {\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../../button\";\nimport { Checkbox } from \"../../checkbox\";\nimport { Toggle } from \"../../toggle\";\nimport { FilterContext } from \"../filter-context\";\nimport { FilterItem } from \"../filter-item\";\nimport * as styles from \"./filter-item-checkbox.styles\";\nimport {\n    buildKeyPath,\n    flattenNestedOptions,\n    getAllDescendantChildren,\n    getAllDescendantKeyPaths,\n    hasNestedOptions,\n} from \"./filter-item-checkbox-helpers\";\nimport type { FlattenedFilterOption } from \"./internal-types\";\nimport type {\n    FilterItemCheckboxOptionProps,\n    FilterItemCheckboxProps,\n} from \"./types\";\n\nexport const FilterItemCheckbox = <T = FilterItemCheckboxOptionProps,>({\n    selectedOptions,\n    options,\n    showAsCheckboxInMobile = false,\n    minimisableOptions = true,\n    onSelect,\n    labelExtractor,\n    valueExtractor,\n    useToggleContentWidth,\n    ...filterItemProps\n}: FilterItemCheckboxProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode } = useContext(FilterContext);\n    const [selected, setSelected] = useState<T[]>(selectedOptions || []);\n    const [minimisedHeight, setMinimisedHeight] = useState<number>();\n    const [lastVisibleElementIndex, setLastVisibleElementIndex] =\n        useState<number>(options.length);\n    const parentRef = useRef<HTMLDivElement>(null);\n    const lastVisibleElement = useRef<HTMLElement | null>(null);\n\n    // Check if options have nested structure\n    const isNested = useMemo(\n        // eslint-disable-next-line @typescript-eslint/no-explicit-any\n        () => hasNestedOptions(options, (item) => (item as any).options),\n        [options]\n    );\n\n    const isMobileToggleMode =\n        mode === \"mobile\" && !showAsCheckboxInMobile && !isNested;\n\n    // Flatten nested options\n    const flattenedOptions = useMemo(\n        () =>\n            flattenNestedOptions(\n                options,\n                [],\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                valueExtractor || ((item) => (item as any).value),\n                // eslint-disable-next-line @typescript-eslint/no-explicit-any\n                labelExtractor || ((item) => (item as any).label)\n            ),\n        [options, valueExtractor, labelExtractor]\n    );\n\n    const optionCount = flattenedOptions.length;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemClick = (item: T) => () => {\n        // Find the flattened option\n        const flatOption = flattenedOptions.find(\n            (opt) => opt.originalItem === item\n        );\n        if (!flatOption) return;\n\n        if (flatOption.hasChildren) {\n            // Handle parent click - select/deselect all children\n            const allChildren = getAllDescendantChildren<T>(\n                flattenedOptions,\n                flatOption.keyPath\n            );\n\n            const currentlySelectedChildren = allChildren.filter((child) =>\n                selected.some((s) => getValue(s) === getValue(child))\n            );\n\n            let newSelection = [...selected];\n\n            if (currentlySelectedChildren.length === allChildren.length) {\n                // All children selected, deselect all\n                newSelection = newSelection.filter(\n                    (s) =>\n                        !allChildren.some(\n                            (child) => getValue(child) === getValue(s)\n                        )\n                );\n            } else {\n                // Some or no children selected, select all\n                allChildren.forEach((child) => {\n                    if (\n                        !newSelection.some(\n                            (s) => getValue(s) === getValue(child)\n                        )\n                    ) {\n                        newSelection.push(child);\n                    }\n                });\n            }\n\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        } else {\n            // Handle leaf item click - toggle selection\n            const newSelection = [...selected];\n            const selectedIndex = selected.findIndex(\n                (s) => getValue(s) === getValue(item)\n            );\n\n            if (selectedIndex >= 0) {\n                newSelection.splice(selectedIndex, 1);\n            } else {\n                newSelection.push(item);\n            }\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleSelectClearAll = () => {\n        if (isNested) {\n            if (selected.length > 0) {\n                // Clear all\n                setSelected([]);\n                onSelect?.([]);\n            } else {\n                // Select all leaf nodes\n                const leafOptions = flattenedOptions.filter(\n                    (option) => !option.hasChildren\n                );\n                const allValues = leafOptions.map(\n                    (option) => option.originalItem\n                ) as T[];\n                setSelected(allValues);\n                onSelect?.(allValues);\n            }\n        } else {\n            const newSelection = selected.length ? [] : options;\n            setSelected(newSelection);\n            onSelect?.(newSelection);\n        }\n    };\n\n    const handleListItemKeyDown =\n        (originalItem: T) => (event: React.KeyboardEvent) => {\n            if (isNested && (event.key === \" \" || event.key === \"Enter\")) {\n                event.preventDefault();\n                handleItemClick(originalItem)();\n            }\n        };\n\n    const handleCheckboxChange = (originalItem: T) => () => {\n        if (!isNested) {\n            handleItemClick(originalItem)();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCheckboxState = (flatOption: (typeof flattenedOptions)[0]) => {\n        if (!flatOption.hasChildren) {\n            // Leaf item - simple check\n            return {\n                checked: selected.some(\n                    (s) =>\n                        getValue(s) === getValue(flatOption.originalItem as T)\n                ),\n                indeterminate: false,\n            };\n        }\n\n        // Parent item - check children states (following IndeterminateState pattern)\n        const allChildren = getAllDescendantKeyPaths(\n            flattenedOptions,\n            flatOption.keyPath\n        )\n            .map((keyPath: string[]) =>\n                flattenedOptions.find(\n                    (opt) => buildKeyPath(opt.keyPath) === buildKeyPath(keyPath)\n                )\n            )\n            .filter((opt) => opt && !opt.hasChildren)\n            .map((opt) => opt!.originalItem as T);\n\n        const selectedChildren = allChildren.filter((child) =>\n            selected.some((s) => getValue(s) === getValue(child))\n        );\n\n        return {\n            checked:\n                selectedChildren.length === allChildren.length &&\n                allChildren.length > 0,\n            indeterminate:\n                selectedChildren.length > 0 &&\n                selectedChildren.length < allChildren.length,\n        };\n    };\n\n    const getLabel = (item: T): React.ReactNode => {\n        return labelExtractor\n            ? labelExtractor(item)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (item as any).label ?? item?.toString();\n    };\n\n    const getValue = (item: T): string => {\n        return valueExtractor\n            ? valueExtractor(item)\n            : // eslint-disable-next-line @typescript-eslint/no-explicit-any\n              (item as any).value ?? item?.toString();\n    };\n\n    const setVisibleItemsWhenMinimised = () => {\n        const elementBottom = lastVisibleElement.current\n            ? lastVisibleElement.current.offsetTop +\n              lastVisibleElement.current.clientHeight\n            : undefined;\n        setMinimisedHeight(elementBottom);\n    };\n\n    const setVisibleMobileItemsWhenMinimised = useCallback(() => {\n        if (!parentRef.current) {\n            setMinimisedHeight(undefined);\n            return;\n        }\n\n        const children = Array.from(parentRef.current.children);\n\n        let lastElementInRow = 0;\n        let rowCount = 0;\n        let rowTop = -1;\n\n        for (let i = 0; i < children.length; i++) {\n            const childTop = (children[i] as HTMLDivElement).offsetTop;\n            if (childTop > rowTop) {\n                rowCount++;\n                rowTop = childTop;\n                // show only the first 2 rows\n                if (rowCount > 2) {\n                    break;\n                }\n            }\n            lastElementInRow = i;\n        }\n\n        setLastVisibleElementIndex(lastElementInRow);\n\n        if (rowCount > 2) {\n            setMinimisedHeight(rowTop - 8); // gap from next row\n        } else {\n            setMinimisedHeight(undefined);\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (selectedOptions !== selected) {\n            setSelected(selectedOptions || []);\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (isMobileToggleMode) {\n            setVisibleMobileItemsWhenMinimised();\n        } else {\n            setVisibleItemsWhenMinimised();\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [options]);\n\n    useResizeDetector({\n        handleWidth: true,\n        handleHeight: false,\n        skipOnMount: true,\n        refreshMode: \"throttle\",\n        targetRef: parentRef,\n        onResize: isMobileToggleMode\n            ? setVisibleMobileItemsWhenMinimised\n            : setVisibleItemsWhenMinimised,\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCheckboxIcon = (\n        originalItem: T,\n        flatOption: FlattenedFilterOption<T>\n    ) => {\n        const { checked, indeterminate } = getCheckboxState(flatOption);\n\n        return (\n            <Checkbox\n                className={styles.checkbox}\n                displaySize=\"small\"\n                checked={checked}\n                indeterminate={indeterminate}\n                onChange={handleCheckboxChange(originalItem)}\n                tabIndex={isNested ? -1 : undefined}\n                aria-hidden={isNested ? \"true\" : undefined}\n            />\n        );\n    };\n\n    const renderCheckbox = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const { checked, indeterminate } = getCheckboxState(option);\n        const isSelected = checked || indeterminate;\n        const isVisible = !minimised || index < 5;\n\n        // ARIA attributes for tree items\n        const treeItemAriaAttributes: AriaAttributes = isNested\n            ? {\n                  \"aria-checked\": indeterminate ? \"mixed\" : checked,\n                  \"aria-selected\": !!checked,\n                  \"aria-level\": option.level + 1,\n                  \"aria-posinset\": option.indexInParent + 1,\n                  \"aria-setsize\": option.parentSetSize,\n              }\n            : {};\n\n        const itemRef = (el: HTMLElement | null) => {\n            if (el && option.level) {\n                el.style.setProperty(\n                    styles.tokens.item.level,\n                    String(option.level)\n                );\n            }\n            if (index === 4) {\n                lastVisibleElement.current = el;\n            }\n        };\n\n        const itemClassName = clsx(\n            styles.item,\n            !isVisible && styles.itemHidden,\n            isSelected && styles.itemSelected\n        );\n\n        const itemContent = (\n            <>\n                {renderCheckboxIcon(originalItem, option)}\n                {optionLabel}\n            </>\n        );\n\n        if (isNested) {\n            return (\n                <div\n                    key={buildKeyPath(option.keyPath)}\n                    role=\"treeitem\"\n                    {...treeItemAriaAttributes}\n                    onClick={handleItemClick(originalItem)}\n                    onKeyDown={handleListItemKeyDown(originalItem)}\n                    tabIndex={0}\n                    className={itemClassName}\n                    ref={itemRef}\n                >\n                    {itemContent}\n                </div>\n            );\n        }\n\n        return (\n            <label\n                key={buildKeyPath(option.keyPath)}\n                onKeyDown={handleListItemKeyDown(originalItem)}\n                className={itemClassName}\n                ref={itemRef}\n            >\n                {itemContent}\n            </label>\n        );\n    };\n\n    const renderToggle = (\n        option: FlattenedFilterOption<T>,\n        index: number,\n        minimised: boolean\n    ) => {\n        const originalItem = option.originalItem;\n        const optionLabel = getLabel(originalItem);\n        const optionValue = getValue(originalItem);\n        const checked = !!selected.find((s) => getValue(s) === optionValue);\n        const isToggleVisible =\n            !minimised ||\n            (!!minimisedHeight && index <= lastVisibleElementIndex);\n        return (\n            <Toggle\n                key={optionValue}\n                type=\"checkbox\"\n                checked={checked}\n                className={clsx(\n                    !useToggleContentWidth && styles.toggle,\n                    !isToggleVisible && styles.toggleHidden\n                )}\n                onChange={handleItemClick(originalItem)}\n                useContentWidth={useToggleContentWidth}\n            >\n                {optionLabel}\n            </Toggle>\n        );\n    };\n\n    const renderSelectClearAllButton = () => {\n        if (optionCount < 3) {\n            return null;\n        }\n        return (\n            <Button\n                className={styles.selectAllButton}\n                styleType=\"link\"\n                type=\"button\"\n                sizeType=\"small\"\n                onClick={handleSelectClearAll}\n                aria-label={\n                    selected.length\n                        ? \"Clear all selections\"\n                        : `Select all in ${\n                              parentRef.current?.ariaLabel || \"this group\"\n                          }`\n                }\n            >\n                {selected.length ? \"Clear all\" : \"Select all\"}\n            </Button>\n        );\n    };\n\n    return (\n        <FilterItem\n            minimisable={\n                minimisableOptions\n                    ? isMobileToggleMode // set minimisable base on mobile toggle mode\n                        ? !!minimisedHeight\n                        : optionCount > 5\n                    : false // if minimisableOptions is false, never allow minimising\n            }\n            minimisedHeight={minimisedHeight}\n            {...filterItemProps}\n            className={clsx(styles.filterItem, filterItemProps.className)}\n        >\n            {(_, { minimised }) => (\n                <>\n                    {renderSelectClearAllButton()}\n                    <div\n                        role={isNested ? \"tree\" : \"group\"}\n                        aria-label={filterItemProps.title}\n                        aria-multiselectable={true}\n                        ref={parentRef}\n                        className={clsx(\n                            styles.group,\n                            isMobileToggleMode && styles.groupMobileToggleMode\n                        )}\n                    >\n                        {flattenedOptions.map((option, i) =>\n                            isMobileToggleMode\n                                ? renderToggle(option, i, minimised)\n                                : renderCheckbox(option, i, minimised)\n                        )}\n                    </div>\n                </>\n            )}\n        </FilterItem>\n    );\n};\n\nFilterItemCheckbox.displayName = \"Filter.Checkbox\";\n"],"names":["FilterItemCheckbox","_a","selectedOptions","options","showAsCheckboxInMobile","minimisableOptions","onSelect","labelExtractor","valueExtractor","useToggleContentWidth","filterItemProps","__rest","mode","useContext","FilterContext","selected","setSelected","useState","minimisedHeight","setMinimisedHeight","lastVisibleElementIndex","setLastVisibleElementIndex","length","parentRef","useRef","lastVisibleElement","isNested","useMemo","hasNestedOptions","item","isMobileToggleMode","flattenedOptions","flattenNestedOptions","value","label","optionCount","handleItemClick","flatOption","find","opt","originalItem","hasChildren","allChildren","getAllDescendantChildren","keyPath","currentlySelectedChildren","filter","child","some","s","getValue","newSelection","forEach","push","selectedIndex","findIndex","splice","handleSelectClearAll","allValues","option","map","handleListItemKeyDown","event","key","preventDefault","handleCheckboxChange","getCheckboxState","checked","indeterminate","getAllDescendantKeyPaths","buildKeyPath","selectedChildren","getLabel","toString","setVisibleItemsWhenMinimised","elementBottom","current","offsetTop","clientHeight","undefined","setVisibleMobileItemsWhenMinimised","useCallback","children","Array","from","lastElementInRow","rowCount","rowTop","i","childTop","useEffect","useResizeDetector","handleWidth","handleHeight","skipOnMount","refreshMode","targetRef","onResize","renderCheckboxIcon","_jsx","Checkbox","className","styles.checkbox","displaySize","onChange","tabIndex","renderSelectClearAllButton","Button","styles.selectAllButton","styleType","type","sizeType","onClick","ariaLabel","FilterItem","Object","assign","minimisable","clsx","styles.filterItem","_","minimised","_jsxs","_Fragment","role","title","ref","styles.group","styles.groupMobileToggleMode","index","optionLabel","optionValue","Toggle","styles.toggle","styles.toggleHidden","useContentWidth","renderToggle","isSelected","isVisible","treeItemAriaAttributes","level","indexInParent","parentSetSize","itemRef","el","style","setProperty","styles.tokens","String","itemClassName","styles.item","styles.itemHidden","styles.itemSelected","itemContent","onKeyDown","renderCheckbox","displayName"],"mappings":"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"}

package/filter/addons/filter-item-checkbox.styles.d.ts

@@ -1,17 +1,15 @@
-export declare const StyledFilterItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").FilterItemProps, never>> & string & Omit<{
-    ({ collapsible: desktopCollapsible, initialExpanded, expanded: controlledExpanded, onExpandChange, minimisable, minimisedHeight, showDivider, showMobileDivider, title, addon, children, ...otherProps }: import("..").FilterItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const Group: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
-    $isMobileToggleMode: boolean;
-}>> & string;
-export declare const Item: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, {
-    $visible: boolean;
-    $selected: boolean;
-    $level?: number;
-}>> & string;
-export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").CheckboxProps, never>> & string & Omit<({ className, checked, disabled, indeterminate, displaySize, id, ...otherProps }: import("../..").CheckboxProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const StyledToggle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../..").ToggleProps, {
-    $visible: boolean;
-}>> & string & Omit<({ type, indicator, checked, styleType, children, childrenMaxLines, subLabel, disabled, error, name, id, className, compositeSection, removable, onRemove, "data-testid": testId, onChange, useContentWidth, "aria-describedby": ariaDescribedBy, ...otherProps }: import("../..").ToggleProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const SelectAllButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const tokens: {
+    readonly item: {
+        readonly level: "--fds-internal-filterItemCheckbox-item-level";
+    };
+};
+export declare const filterItem: import("@linaria/core").LinariaClassName;
+export declare const group: import("@linaria/core").LinariaClassName;
+export declare const groupMobileToggleMode: import("@linaria/core").LinariaClassName;
+export declare const item: import("@linaria/core").LinariaClassName;
+export declare const itemHidden: import("@linaria/core").LinariaClassName;
+export declare const itemSelected: import("@linaria/core").LinariaClassName;
+export declare const checkbox: import("@linaria/core").LinariaClassName;
+export declare const toggle: import("@linaria/core").LinariaClassName;
+export declare const toggleHidden: import("@linaria/core").LinariaClassName;
+export declare const selectAllButton: import("@linaria/core").LinariaClassName;

package/filter/addons/filter-item-checkbox.styles.js

@@ -1,73 +1,2 @@
-import i,{css as e}from"styled-components";import{Button as t}from"../../button/button.js";import{Checkbox as n}from"../../checkbox/checkbox.js";import{Toggle as a}from"../../toggle/toggle.js";import{V3_Spacing as g,V3_MediaQuery as l,V3_Font as o,V3_Colour as p}from"../../v3_theme/index.js";import{FilterItem as s}from"../filter-item.js";const $=i(s)`
-    padding: 0 0 ${g["spacing-16"]};
-
-    [data-id="content-container"] {
-        position: relative; // to get the item position relative to this parent
-        padding: ${g["spacing-8"]} ${g["spacing-8"]} 0;
-
-        ${l.MaxWidth.lg} {
-            padding: ${g["spacing-16"]} ${g["spacing-20"]}
-                ${g["spacing-8"]};
-        }
-    }
-
-    [data-id="minimise-button"] {
-        margin: ${g["spacing-8"]} ${g["spacing-20"]} 0;
-    }
-`,c=i.div`
-    display: flex;
-    flex-direction: column;
-
-    ${l.MaxWidth.lg} {
-        flex-direction: row;
-        flex-wrap: wrap;
-        gap: ${i=>i.$isMobileToggleMode?g["spacing-16"]:0};
-    }
-`,d=i.label`
-    display: flex;
-    align-items: flex-start;
-    ${i=>!i.$visible&&"display: none;"}
-
-    position: relative;
-    width: 100%;
-    min-height: 1.5rem;
-    padding: ${g["spacing-8"]} ${g["spacing-12"]};
-    ${i=>i.$level&&e`
-            padding-left: calc(
-                ${g["spacing-12"]} + ${i.$level} *
-                    ${g["spacing-32"]}
-            );
-        `}
-
-    cursor: pointer;
-    ${o["body-md-regular"]}
-    color: ${p.text};
-    ${i=>i.$selected&&e`
-            color: ${p["text-selected"]};
-        `}
-    ${l.MaxWidth.lg} {
-        padding: ${g["spacing-8"]};
-        ${i=>i.$level&&e`
-                padding-left: calc(
-                    ${g["spacing-8"]} + ${i.$level} *
-                        ${g["spacing-32"]}
-                );
-            `}
-    }
-`,r=i(n)`
-    flex-shrink: 0;
-    margin-right: ${g["spacing-8"]};
-`,m=i(a)`
-    ${i=>!i.$visible&&"visibility: hidden;"}
-    min-width: 5rem;
-`,h=i(t.Small)`
-    height: fit-content;
-    padding: 0;
-    margin: ${g["spacing-16"]} 0 ${g["spacing-8"]}
-        ${g["spacing-12"]};
-
-    ${l.MaxWidth.lg} {
-        margin: 0 0 ${g["spacing-16"]} 0;
-    }
-`;export{c as Group,d as Item,h as SelectAllButton,r as StyledCheckbox,$ as StyledFilterItem,m as StyledToggle};
+import"./filter-item-checkbox.styles_6nbpdl.css";const e={item:{level:"--fds-internal-filterItemCheckbox-item-level"}},t="f1m3a5f4",i="g11488am",l="g1nnu0tt",s="i4hhc1a",f="i7vabkq",c="i4eh8j6",h="c13wglju",m="twhh8xx",n="tb2fwos",o="sbvftpe";export{h as checkbox,t as filterItem,i as group,l as groupMobileToggleMode,s as item,f as itemHidden,c as itemSelected,o as selectAllButton,m as toggle,n as toggleHidden,e as tokens};
 //# sourceMappingURL=filter-item-checkbox.styles.js.map

package/filter/addons/filter-item-checkbox.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item-checkbox.styles.js","sources":["../../../src/filter/addons/filter-item-checkbox.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../../button\";\nimport { Checkbox } from \"../../checkbox\";\nimport { Toggle } from \"../../toggle\";\nimport { V3_Colour, V3_Font, V3_MediaQuery, V3_Spacing } from \"../../v3_theme\";\nimport { FilterItem } from \"../filter-item\";\n\nexport const StyledFilterItem = styled(FilterItem)`\n    padding: 0 0 ${V3_Spacing[\"spacing-16\"]};\n\n    [data-id=\"content-container\"] {\n        position: relative; // to get the item position relative to this parent\n        padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-8\"]} 0;\n\n        ${V3_MediaQuery.MaxWidth.lg} {\n            padding: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-20\"]}\n                ${V3_Spacing[\"spacing-8\"]};\n        }\n    }\n\n    [data-id=\"minimise-button\"] {\n        margin: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-20\"]} 0;\n    }\n`;\n\nexport const Group = styled.div<{\n    $isMobileToggleMode: boolean;\n}>`\n    display: flex;\n    flex-direction: column;\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: ${(props) =>\n            props.$isMobileToggleMode ? V3_Spacing[\"spacing-16\"] : 0};\n    }\n`;\n\nexport const Item = styled.label<{\n    $visible: boolean;\n    $selected: boolean;\n    $level?: number;\n}>`\n    display: flex;\n    align-items: flex-start;\n    ${(props) => !props.$visible && \"display: none;\"}\n\n    position: relative;\n    width: 100%;\n    min-height: 1.5rem;\n    padding: ${V3_Spacing[\"spacing-8\"]} ${V3_Spacing[\"spacing-12\"]};\n    ${(props) =>\n        props.$level &&\n        css`\n            padding-left: calc(\n                ${V3_Spacing[\"spacing-12\"]} + ${props.$level} *\n                    ${V3_Spacing[\"spacing-32\"]}\n            );\n        `}\n\n    cursor: pointer;\n    ${V3_Font[\"body-md-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    ${(props) =>\n        props.$selected &&\n        css`\n            color: ${V3_Colour[\"text-selected\"]};\n        `}\n    ${V3_MediaQuery.MaxWidth.lg} {\n        padding: ${V3_Spacing[\"spacing-8\"]};\n        ${(props) =>\n            props.$level &&\n            css`\n                padding-left: calc(\n                    ${V3_Spacing[\"spacing-8\"]} + ${props.$level} *\n                        ${V3_Spacing[\"spacing-32\"]}\n                );\n            `}\n    }\n`;\n\nexport const StyledCheckbox = styled(Checkbox)`\n    flex-shrink: 0;\n    margin-right: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const StyledToggle = styled(Toggle)<{ $visible: boolean }>`\n    ${(props) => !props.$visible && \"visibility: hidden;\"}\n    min-width: 5rem;\n`;\n\nexport const SelectAllButton = styled(Button.Small)`\n    height: fit-content;\n    padding: 0;\n    margin: ${V3_Spacing[\"spacing-16\"]} 0 ${V3_Spacing[\"spacing-8\"]}\n        ${V3_Spacing[\"spacing-12\"]};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        margin: 0 0 ${V3_Spacing[\"spacing-16\"]} 0;\n    }\n`;\n"],"names":["StyledFilterItem","styled","FilterItem","V3_Spacing","V3_MediaQuery","MaxWidth","lg","Group","div","props","$isMobileToggleMode","Item","label","$visible","$level","css","V3_Font","V3_Colour","$selected","StyledCheckbox","Checkbox","StyledToggle","Toggle","SelectAllButton","Button","Small"],"mappings":"0VAQaA,EAAmBC,EAAOC,EAAW;mBAC/BC,EAAW;;;;mBAIXA,EAAW,gBAAgBA,EAAW;;UAE/CC,EAAcC,SAASC;uBACVH,EAAW,iBAAiBA,EAAW;kBAC5CA,EAAW;;;;;kBAKXA,EAAW,gBAAgBA,EAAW;;EAI3CI,EAAQN,EAAOO,GAE1B;;;;MAIIJ,EAAcC,SAASC;;;eAGbG,GACJA,EAAMC,oBAAsBP,EAAW,cAAgB;;EAItDQ,EAAOV,EAAOW,KAIzB;;;MAGKH,IAAWA,EAAMI,UAAY;;;;;eAKrBV,EAAW,gBAAgBA,EAAW;MAC9CM,GACCA,EAAMK,QACNC,CAAG;;kBAEOZ,EAAW,mBAAmBM,EAAMK;sBAChCX,EAAW;;;;;MAK3Ba,EAAQ;aACDC,EAAgB;MACtBR,GACCA,EAAMS,WACNH,CAAG;qBACUE,EAAU;;MAEzBb,EAAcC,SAASC;mBACVH,EAAW;UACnBM,GACCA,EAAMK,QACNC,CAAG;;sBAEOZ,EAAW,kBAAkBM,EAAMK;0BAC/BX,EAAW;;;;EAMxBgB,EAAiBlB,EAAOmB,EAAS;;oBAE1BjB,EAAW;EAGlBkB,EAAepB,EAAOqB,EAA8B;MAC1Db,IAAWA,EAAMI,UAAY;;EAIvBU,EAAkBtB,EAAOuB,EAAOC,MAAM;;;cAGrCtB,EAAW,mBAAmBA,EAAW;UAC7CA,EAAW;;MAEfC,EAAcC,SAASC;sBACPH,EAAW;;"}
+{"version":3,"file":"filter-item-checkbox.styles.js","sources":["../../../src/filter/addons/filter-item-checkbox.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../../theme\";\n\nexport const tokens = {\n    item: {\n        level: \"--fds-internal-filterItemCheckbox-item-level\",\n    },\n} as const;\n\nexport const filterItem = css`\n    padding: 0 0 ${Spacing[\"spacing-16\"]};\n\n    [data-id=\"content-container\"] {\n        position: relative; // to get the item position relative to this parent\n        padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-8\"]} 0;\n\n        ${MediaQuery.MaxWidth.lg} {\n            padding: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]}\n                ${Spacing[\"spacing-8\"]};\n        }\n    }\n\n    [data-id=\"minimise-button\"] {\n        margin: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-20\"]} 0;\n    }\n`;\n\nexport const group = css`\n    display: flex;\n    flex-direction: column;\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: row;\n        flex-wrap: wrap;\n        gap: 0;\n    }\n`;\n\nexport const groupMobileToggleMode = css`\n    ${MediaQuery.MaxWidth.lg} {\n        gap: ${Spacing[\"spacing-16\"]};\n    }\n`;\n\nexport const item = css`\n    ${tokens.item.level}: 0;\n\n    display: flex;\n    align-items: flex-start;\n\n    position: relative;\n    width: 100%;\n    min-height: 1.5rem;\n    padding: ${Spacing[\"spacing-8\"]} ${Spacing[\"spacing-12\"]};\n    padding-left: calc(\n        ${Spacing[\"spacing-12\"]} + var(${tokens.item.level}) *\n            ${Spacing[\"spacing-32\"]}\n    );\n\n    cursor: pointer;\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        padding: ${Spacing[\"spacing-8\"]};\n        padding-left: calc(\n            ${Spacing[\"spacing-8\"]} + var(${tokens.item.level}) *\n                ${Spacing[\"spacing-32\"]}\n        );\n    }\n`;\n\nexport const itemHidden = css`\n    display: none;\n`;\n\nexport const itemSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const checkbox = css`\n    flex-shrink: 0;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const toggle = css`\n    min-width: 5rem;\n`;\n\nexport const toggleHidden = css`\n    visibility: hidden;\n`;\n\nexport const selectAllButton = css`\n    height: fit-content;\n    min-height: unset;\n    padding: 0;\n    margin: ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-8\"]}\n        ${Spacing[\"spacing-12\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 0 0 ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n"],"names":["tokens","item","level","filterItem","group","groupMobileToggleMode","itemHidden","itemSelected","checkbox","toggle","toggleHidden","selectAllButton"],"mappings":"8EAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,MAAO,iDAIFC,EAAU,WAkBVC,EAAK,WAWLC,EAAqB,WAMrBJ,EAAI,UA4BJK,EAAU,UAIVC,EAAY,UAIZC,EAAQ,WAKRC,EAAM,UAINC,EAAY,UAIZC,EAAe"}

package/filter/addons/filter-item-checkbox.styles_6nbpdl.css

@@ -0,0 +1,16 @@
+@layer fds{.f1m3a5f4{padding:0 0 var(--fds-spacing-16);}.f1m3a5f4 [data-id="content-container"]{position:relative;padding:var(--fds-spacing-8) var(--fds-spacing-8) 0;}:where(body.fds-breakpoint-lg-max) .f1m3a5f4 [data-id="content-container"]{padding:var(--fds-spacing-16) var(--fds-spacing-20) var(--fds-spacing-8);}.f1m3a5f4 [data-id="minimise-button"]{margin:var(--fds-spacing-8) var(--fds-spacing-20) 0;}
+.g11488am{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}:where(body.fds-breakpoint-lg-max) .g11488am{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:0;}
+:where(body.fds-breakpoint-lg-max) .g1nnu0tt{gap:var(--fds-spacing-16);}
+.i4hhc1a{--fds-internal-filterItemCheckbox-item-level:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;width:100%;min-height:1.5rem;padding:var(--fds-spacing-8) var(--fds-spacing-12);padding-left:calc(
+        var(--fds-spacing-12) + var(--fds-internal-filterItemCheckbox-item-level) *
+            var(--fds-spacing-32)
+    );cursor:pointer;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}:where(body.fds-breakpoint-lg-max) .i4hhc1a{padding:var(--fds-spacing-8);padding-left:calc(
+            var(--fds-spacing-8) + var(--fds-internal-filterItemCheckbox-item-level) *
+                var(--fds-spacing-32)
+        );}
+.i7vabkq{display:none;}
+.i4eh8j6{color:var(--fds-colour-text-selected);}
+.c13wglju{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;margin-right:var(--fds-spacing-8);}
+.twhh8xx{min-width:5rem;}
+.tb2fwos{visibility:hidden;}
+.sbvftpe{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;min-height:unset;padding:0;margin:var(--fds-spacing-16) 0 var(--fds-spacing-8) var(--fds-spacing-12);}:where(body.fds-breakpoint-lg-max) .sbvftpe{margin:0 0 var(--fds-spacing-16) 0;}}

package/filter/addons/internal-types.d.ts

@@ -0,0 +1,12 @@
+import type { FilterItemCheckboxOptionProps } from "./types";
+export interface FlattenedFilterOption<T = FilterItemCheckboxOptionProps> {
+    originalItem: T;
+    value: any;
+    label: string;
+    keyPath: string[];
+    level: number;
+    hasChildren: boolean;
+    parentKeyPath?: string[] | undefined;
+    indexInParent: number;
+    parentSetSize: number;
+}