@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.3

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

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

package/cjs/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 type {\n    FilterItemCheckboxOptionProps,\n    FilterItemCheckboxProps,\n} from \"../types\";\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 \"./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        () => 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            <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","isToggleVisible","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/cjs/filter/addons/filter-item-checkbox.styles.js

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

package/cjs/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":"6TAQaA,EAAmBC,EAAAA,QAAOC,EAAAA,WAAW;mBAC/BC,EAAAA,WAAW;;;;mBAIXA,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;;UAE/CC,EAAAA,cAAcC,SAASC;uBACVH,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;kBAC5CA,EAAAA,WAAW;;;;;kBAKXA,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;;EAI3CI,EAAQN,EAAAA,QAAOO,GAE1B;;;;MAIIJ,EAAAA,cAAcC,SAASC;;;eAGbG,GACJA,EAAMC,oBAAsBP,EAAAA,WAAW,cAAgB;;EAItDQ,EAAOV,EAAAA,QAAOW,KAIzB;;;MAGKH,IAAWA,EAAMI,UAAY;;;;;eAKrBV,EAAAA,WAAW,gBAAgBA,EAAAA,WAAW;MAC9CM,GACCA,EAAMK,QACNC,KAAG;;kBAEOZ,EAAAA,WAAW,mBAAmBM,EAAMK;sBAChCX,EAAAA,WAAW;;;;;MAK3Ba,EAAAA,QAAQ;aACDC,EAAAA,UAAgB;MACtBR,GACCA,EAAMS,WACNH,KAAG;qBACUE,EAAAA,UAAU;;MAEzBb,EAAAA,cAAcC,SAASC;mBACVH,EAAAA,WAAW;UACnBM,GACCA,EAAMK,QACNC,KAAG;;sBAEOZ,EAAAA,WAAW,kBAAkBM,EAAMK;0BAC/BX,EAAAA,WAAW;;;;EAMxBgB,EAAiBlB,EAAAA,QAAOmB,EAAAA,SAAS;;oBAE1BjB,EAAAA,WAAW;EAGlBkB,EAAepB,EAAAA,QAAOqB,EAAAA,OAA8B;MAC1Db,IAAWA,EAAMI,UAAY;;EAIvBU,EAAkBtB,EAAAA,QAAOuB,SAAOC,MAAM;;;cAGrCtB,EAAAA,WAAW,mBAAmBA,EAAAA,WAAW;UAC7CA,EAAAA,WAAW;;MAEfC,EAAAA,cAAcC,SAASC;sBACPH,EAAAA,WAAW;;"}
+{"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    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":["item","level"],"mappings":"gHAiFqB,8BAvEE,yBAkBL,yCAWgB,wBAMjB,6BA4BM,+BAIE,kCAiBG,yBART,+BAIM,yBAtFH,CAClBA,KAAM,CACFC,MAAO"}

package/cjs/filter/addons/filter-item-checkbox.styles_18l87i2.css

@@ -0,0 +1,16 @@
+.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);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;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/cjs/filter/filter-item-page.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/chevron-left"),i=require("./filter.styles.js"),t=require("./filter-item-page.styles.js");const s=({onDismiss:s,onDone:l,children:n})=>e.jsxs(t.FilterItemPageContainer,{children:[e.jsx(i.FilterHeaderButton,{onClick:s,focusOutline:"browser",focusHighlight:!1,"aria-label":"Dismiss",children:e.jsx(r.ChevronLeftIcon,{})}),e.jsx(i.FilterBody,{children:n}),e.jsx(i.FilterFooter,{children:e.jsx(i.FilterDoneButton,{onClick:l,type:"button",children:"Done"})})]});s.displayName="Filter.Page",exports.FilterItemPage=s;
+"use strict";var e=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-left"),s=require("../button/button.js"),r=require("../shared/clickable-icon/clickable-icon.js"),t=require("./filter.styles.js"),l=require("./filter-item-page.styles.js");const n=({onDismiss:n,onDone:c,children:o})=>e.jsxs("div",{className:l.filterItemPageContainer,children:[e.jsx(r.ClickableIcon,{className:t.filterHeaderButton,onClick:n,focusOutline:"browser",focusHighlight:!1,"aria-label":"Dismiss",children:e.jsx(i.ChevronLeftIcon,{})}),e.jsx("div",{className:t.filterBody,children:o}),e.jsx("div",{className:t.filterFooter,children:e.jsx(s.Button,{className:t.filterDoneButton,onClick:c,type:"button",children:"Done"})})]});n.displayName="Filter.Page",exports.FilterItemPage=n;
 //# sourceMappingURL=filter-item-page.js.map

package/cjs/filter/filter-item-page.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item-page.js","sources":["../../../src/filter/filter-item-page.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\n\nimport {\n    FilterBody,\n    FilterDoneButton,\n    FilterFooter,\n    FilterHeaderButton,\n} from \"./filter.styles\";\nimport { FilterItemPageContainer } from \"./filter-item-page.styles\";\nimport type { FilterPageProps } from \"./types\";\n\nexport const FilterItemPage = ({\n    onDismiss,\n    onDone,\n    children,\n}: FilterPageProps) => {\n    return (\n        <FilterItemPageContainer>\n            <FilterHeaderButton\n                onClick={onDismiss}\n                focusOutline=\"browser\"\n                focusHighlight={false}\n                aria-label=\"Dismiss\"\n            >\n                <ChevronLeftIcon />\n            </FilterHeaderButton>\n            <FilterBody>{children}</FilterBody>\n            <FilterFooter>\n                <FilterDoneButton onClick={onDone} type=\"button\">\n                    Done\n                </FilterDoneButton>\n            </FilterFooter>\n        </FilterItemPageContainer>\n    );\n};\n\nFilterItemPage.displayName = \"Filter.Page\";\n"],"names":["FilterItemPage","onDismiss","onDone","children","_jsxs","FilterItemPageContainer","_jsx","FilterHeaderButton","onClick","focusOutline","focusHighlight","ChevronLeftIcon","FilterBody","FilterFooter","FilterDoneButton","type","displayName"],"mappings":"wKAWO,MAAMA,EAAiB,EAC1BC,YACAC,SACAC,cAGIC,EAAAA,KAACC,EAAAA,wBAAuB,CAAAF,SAAA,CACpBG,EAAAA,IAACC,EAAAA,mBAAkB,CACfC,QAASP,EACTQ,aAAa,UACbC,gBAAgB,EAAK,aACV,UAASP,SAEpBG,EAAAA,IAACK,kBAAe,CAAA,KAEpBL,EAAAA,IAACM,EAAAA,WAAU,CAAAT,SAAEA,IACbG,MAACO,EAAAA,aAAY,CAAAV,SACTG,EAAAA,IAACQ,EAAAA,kBAAiBN,QAASN,EAAQa,KAAK,SAAQZ,SAAA,cAQhEH,EAAegB,YAAc"}
+{"version":3,"file":"filter-item-page.js","sources":["../../../src/filter/filter-item-page.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport * as filterStyles from \"./filter.styles\";\nimport * as styles from \"./filter-item-page.styles\";\nimport type { FilterPageProps } from \"./types\";\n\nexport const FilterItemPage = ({\n    onDismiss,\n    onDone,\n    children,\n}: FilterPageProps) => {\n    return (\n        <div className={styles.filterItemPageContainer}>\n            <ClickableIcon\n                className={filterStyles.filterHeaderButton}\n                onClick={onDismiss}\n                focusOutline=\"browser\"\n                focusHighlight={false}\n                aria-label=\"Dismiss\"\n            >\n                <ChevronLeftIcon />\n            </ClickableIcon>\n            <div className={filterStyles.filterBody}>{children}</div>\n            <div className={filterStyles.filterFooter}>\n                <Button\n                    className={filterStyles.filterDoneButton}\n                    onClick={onDone}\n                    type=\"button\"\n                >\n                    Done\n                </Button>\n            </div>\n        </div>\n    );\n};\n\nFilterItemPage.displayName = \"Filter.Page\";\n"],"names":["FilterItemPage","onDismiss","onDone","children","_jsxs","className","styles.filterItemPageContainer","_jsx","ClickableIcon","filterStyles.filterHeaderButton","onClick","focusOutline","focusHighlight","ChevronLeftIcon","filterStyles.filterBody","filterStyles.filterFooter","Button","filterStyles.filterDoneButton","type","displayName"],"mappings":"iQAQO,MAAMA,EAAiB,EAC1BC,YACAC,SACAC,cAGIC,OAAA,MAAA,CAAKC,UAAWC,EAAAA,wBAA8BH,SAAA,CAC1CI,EAAAA,IAACC,EAAAA,cAAa,CACVH,UAAWI,EAAAA,mBACXC,QAAST,EACTU,aAAa,UACbC,gBAAgB,eACL,UAAST,SAEpBI,MAACM,EAAAA,sBAELN,EAAAA,IAAA,MAAA,CAAKF,UAAWS,sBAA0BX,IAC1CI,EAAAA,IAAA,MAAA,CAAKF,UAAWU,EAAAA,sBACZR,EAAAA,IAACS,EAAAA,OAAM,CACHX,UAAWY,mBACXP,QAASR,EACTgB,KAAK,SAAQf,SAAA,cASjCH,EAAemB,YAAc"}

package/cjs/filter/filter-item-page.styles.js

@@ -1,8 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../v3_theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const r=o(e).default.div`
-    background-color: ${t.V3_Colour.bg};
-    height: 100%;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-`;exports.FilterItemPageContainer=r;
+"use strict";require("./filter-item-page.styles_17ewfrz.css");exports.filterItemPageContainer="f94l7xt";
 //# sourceMappingURL=filter-item-page.styles.js.map

package/cjs/filter/filter-item-page.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item-page.styles.js","sources":["../../../src/filter/filter-item-page.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\n\n// =============================================================================\n// FILTER ITEM PAGE STYLES\n// =============================================================================\n\nexport const FilterItemPageContainer = styled.div`\n    background-color: ${V3_Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n"],"names":["FilterItemPageContainer","styled","div","V3_Colour"],"mappings":"0JAQO,MAAMA,OAA0BC,QAAOC,GAAG;wBACzBC,EAAAA,UAAc;;;;;"}
+{"version":3,"file":"filter-item-page.styles.js","sources":["../../../src/filter/filter-item-page.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// FILTER ITEM PAGE STYLES\n// =============================================================================\n\nexport const filterItemPageContainer = css`\n    background-color: ${Colour[\"bg\"]};\n    height: 100%;\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n"],"names":[],"mappings":"oHAQoC"}

package/cjs/filter/filter-item-page.styles_17ewfrz.css

@@ -0,0 +1 @@
+.f94l7xt{background-color:var(--fds-colour-bg);height:100%;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

package/cjs/filter/filter-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@react-spring/web"),r=require("../external/lodash/isNil.js"),n=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),l=require("../form/form-label-addon.js"),d=require("../shared/accessibility/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var a=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("./filter-context.js"),c=require("./filter-item.styles.js");const u=u=>{var h,{collapsible:m=!0,initialExpanded:x=!1,expanded:p,onExpandChange:j,minimisable:b=!1,minimisedHeight:v,showDivider:f=!0,showMobileDivider:g=!0,title:q,addon:y,children:$}=u,I=e.__rest(u,["collapsible","initialExpanded","expanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children"]);const{mode:w,rootNode:M}=n.useContext(o.FilterContext),D="mobile"===w,[F,C]=n.useState(R()),[E,H]=n.useState(b),N=!D&&m,V=s.useResizeDetector(),_=s.useResizeDetector(),k=t.useSpring({height:F?V.height:0}),z=E?null!=v?v:Math.min(.5*(null!==(h=_.height)&&void 0!==h?h:0),216):_.height,B=a.useId(),S=`${B}-content`,O=`${B}-title`;n.useEffect((()=>{C(R())}),[m,p]),n.useEffect((()=>{H(b)}),[b]);function R(){return!!D||(r.default(p)?!m||x:p)}return i.jsxs(c.FilterItemWrapper,{$isMobile:D,$collapsible:N,"aria-labelledby":O,children:[i.jsx(c.Divider,{$isMobile:D,$showDivider:f,$showMobileDivider:g}),(q||N)&&i.jsxs(c.FilterItemHeader,{$isMobile:D,children:[q&&i.jsxs(c.FilterItemTitle,{id:O,"data-testid":"filter-item-title",$isMobile:D,children:[q," ",y&&("popover"===(null==y?void 0:y.type)?i.jsx(l.PopoverAddon,{addon:y,rootNode:D?M:void 0}):null)]}),N&&i.jsxs(c.FilterItemExpandButton,{"data-testid":"expand-collapse-button",focusHighlight:!1,focusOutline:"browser",onClick:()=>{const e=!F;r.default(p)&&C(e),j&&j(e)},"aria-expanded":F,"aria-disabled":!N,"aria-controls":S,children:[q&&i.jsx(d.VisuallyHidden,{children:q}),i.jsx(c.ChevronIcon,{$expanded:F,"aria-hidden":!0})]})]}),i.jsx(c.ExpandableItem,{id:S,"data-testid":"expandable-container","data-expanded":F,style:k,inert:d.inertValue(!F),children:i.jsx("div",{ref:V.ref,children:i.jsxs(c.FilterItemBody,Object.assign({},I,{children:[i.jsx(c.MinimisableContent,{"data-testid":"minimisable-container",$height:z,$minimisable:b,children:i.jsx("div",{ref:_.ref,children:i.jsx("div",{"data-id":"content-container",children:"function"==typeof $?$(w,{minimised:E}):$})})}),b&&i.jsxs(c.FilterItemMinimiseButton,{"data-id":"minimise-button",styleType:"link",type:"button",onClick:()=>{H(!E)},children:[i.jsx(d.VisuallyHidden,{children:`view ${E?"more":"less"} in ${q}`}),i.jsxs("span",{"aria-hidden":!0,children:["View ",E?"more":"less"]})]})]}))})})]})};u.displayName="Filter.Item",exports.FilterItem=u;
+"use strict";var e=require("../_virtual/_tslib.js"),i=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-down"),r=require("@react-spring/web"),s=require("clsx"),l=require("../external/lodash/isNil.js"),a=require("react"),n=require("../external/react-resize-detector/build/index.esm.js"),d=require("../button/button.js"),o=require("../form/form-label-addon.js"),u=require("../shared/accessibility/index.js"),c=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var m=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var h=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var f=require("./filter-context.js"),p=require("./filter-item.styles.js");function x(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=x(s);const b=s=>{var x,{collapsible:b=!0,initialExpanded:v=!1,expanded:q,onExpandChange:y,minimisable:g=!1,minimisedHeight:I,showDivider:N=!0,showMobileDivider:k=!0,title:C,addon:w,children:D,className:E}=s,M=e.__rest(s,["collapsible","initialExpanded","expanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children","className"]);const{mode:H,rootNode:V}=a.useContext(f.FilterContext),$="mobile"===H,[z,B]=a.useState(K()),[S,T]=a.useState(g),_=!$&&b,F=n.useResizeDetector(),R=n.useResizeDetector(),A=r.useSpring({height:z?F.height:0}),O=S?null!=I?I:Math.min(.5*(null!==(x=R.height)&&void 0!==x?x:0),216):R.height,W=h.useId(),P=`${W}-content`,G=`${W}-title`,J=a.useRef(null);m.useApplyStyle(J,{[p.tokens.minimisableContent.height]:O?`${O}px`:null}),a.useEffect((()=>{B(K())}),[b,q]),a.useEffect((()=>{T(g)}),[g]);function K(){return!!$||(l.default(q)?!b||v:q)}return i.jsxs("div",{"aria-labelledby":G,className:j.default(p.filterItemWrapper,(_||$)&&p.filterItemWrapperDarker),children:[i.jsx("div",{className:j.default(p.divider,($?k:N)&&p.dividerVisible,$&&p.dividerMobile)}),(C||_)&&i.jsxs("div",{className:j.default(p.filterItemHeader,$&&p.filterItemHeaderMobile),children:[C&&i.jsxs("h3",{id:G,"data-testid":"filter-item-title",className:j.default(p.filterItemTitle,$&&p.filterItemTitleMobile),children:[C," ",w&&("popover"===(null==w?void 0:w.type)?i.jsx(o.PopoverAddon,{addon:w,rootNode:$?V:void 0}):null)]}),_&&i.jsxs(c.ClickableIcon,{className:p.filterItemExpandButton,"data-testid":"expand-collapse-button",focusHighlight:!1,focusOutline:"browser",onClick:()=>{const e=!z;l.default(q)&&B(e),y&&y(e)},"aria-expanded":z,"aria-disabled":!_,"aria-controls":P,children:[C&&i.jsx(u.VisuallyHidden,{children:C}),i.jsx(t.ChevronDownIcon,{"aria-hidden":!0,className:j.default(p.chevronIcon,z&&p.chevronIconExpanded)})]})]}),i.jsx(r.animated.div,{className:p.expandableItem,id:P,"data-testid":"expandable-container","data-expanded":z,style:A,inert:u.inertValue(!z),children:i.jsx("div",{ref:F.ref,children:i.jsxs("div",Object.assign({className:j.default(p.filterItemBody,E)},M,{children:[i.jsx("div",{ref:J,"data-testid":"minimisable-container",className:j.default(p.minimisableContent,g&&p.minimisableContentMinimisable),children:i.jsx("div",{ref:R.ref,children:i.jsx("div",{"data-id":"content-container",children:"function"==typeof D?D(H,{minimised:S}):D})})}),g&&i.jsxs(d.Button,{className:p.filterItemMinimiseButton,"data-id":"minimise-button",sizeType:"small",styleType:"link",type:"button",onClick:()=>{T(!S)},children:[i.jsx(u.VisuallyHidden,{children:`view ${S?"more":"less"} in ${C}`}),i.jsxs("span",{"aria-hidden":!0,children:["View ",S?"more":"less"]})]})]}))})})]})};b.displayName="Filter.Item",exports.FilterItem=b;
 //# sourceMappingURL=filter-item.js.map

package/cjs/filter/filter-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item.js","sources":["../../../src/filter/filter-item.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport isNil from \"lodash/isNil\";\nimport { useContext, useEffect, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { PopoverAddon } from \"../form/form-label-addon\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport { FilterContext } from \"./filter-context\";\nimport {\n    ChevronIcon,\n    Divider,\n    ExpandableItem,\n    FilterItemBody,\n    FilterItemExpandButton,\n    FilterItemHeader,\n    FilterItemMinimiseButton,\n    FilterItemTitle,\n    FilterItemWrapper,\n    MinimisableContent,\n} from \"./filter-item.styles\";\nimport type { FilterItemProps } from \"./types\";\n\nexport const FilterItem = ({\n    collapsible: desktopCollapsible = true,\n    initialExpanded = false,\n    expanded: controlledExpanded,\n    onExpandChange,\n    minimisable = false,\n    minimisedHeight,\n    showDivider = true,\n    showMobileDivider = true,\n    title,\n    addon,\n    children,\n    ...otherProps\n}: FilterItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode, rootNode } = useContext(FilterContext);\n    const isMobile = mode === \"mobile\";\n    const [expanded, setExpanded] = useState(getInitialExpandState());\n    const [contentMinimised, setContentMinimised] = useState(minimisable);\n    const collapsible = !isMobile && desktopCollapsible;\n\n    const itemResizeDetector = useResizeDetector();\n    const contentResizeDetector = useResizeDetector();\n    const itemAnimationStyles = useSpring({\n        height: expanded ? itemResizeDetector.height : 0,\n    });\n    const contentHeight = contentMinimised\n        ? minimisedHeight ??\n          Math.min((contentResizeDetector.height ?? 0) * 0.5, 216)\n        : contentResizeDetector.height;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const titleId = `${internalId}-title`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setExpanded(getInitialExpandState());\n    }, [desktopCollapsible, controlledExpanded]);\n\n    useEffect(() => {\n        setContentMinimised(minimisable);\n    }, [minimisable]);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleExpandCollapse = () => {\n        const nextState = !expanded;\n\n        if (isNil(controlledExpanded)) {\n            setExpanded(nextState);\n        }\n\n        if (onExpandChange) {\n            onExpandChange(nextState);\n        }\n    };\n\n    const handleMinimise = () => {\n        setContentMinimised(!contentMinimised);\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function getInitialExpandState() {\n        if (isMobile) {\n            return true;\n        }\n        if (isNil(controlledExpanded)) {\n            return !desktopCollapsible || initialExpanded;\n        }\n        return controlledExpanded;\n    }\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n\n    const renderAddon = () => {\n        switch (addon?.type) {\n            case \"popover\":\n                return (\n                    <PopoverAddon\n                        addon={addon}\n                        rootNode={isMobile ? rootNode : undefined}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    return (\n        <FilterItemWrapper\n            $isMobile={isMobile}\n            $collapsible={collapsible}\n            aria-labelledby={titleId}\n        >\n            <Divider\n                $isMobile={isMobile}\n                $showDivider={showDivider}\n                $showMobileDivider={showMobileDivider}\n            />\n            {(title || collapsible) && (\n                <FilterItemHeader $isMobile={isMobile}>\n                    {title && (\n                        <FilterItemTitle\n                            id={titleId}\n                            data-testid=\"filter-item-title\"\n                            $isMobile={isMobile}\n                        >\n                            {title} {addon && renderAddon()}\n                        </FilterItemTitle>\n                    )}\n                    {collapsible && (\n                        <FilterItemExpandButton\n                            data-testid={\"expand-collapse-button\"}\n                            focusHighlight={false}\n                            focusOutline=\"browser\"\n                            onClick={handleExpandCollapse}\n                            aria-expanded={expanded}\n                            aria-disabled={!collapsible}\n                            aria-controls={contentId}\n                        >\n                            {title && <VisuallyHidden>{title}</VisuallyHidden>}\n                            <ChevronIcon $expanded={expanded} aria-hidden />\n                        </FilterItemExpandButton>\n                    )}\n                </FilterItemHeader>\n            )}\n            <ExpandableItem\n                id={contentId}\n                data-testid={\"expandable-container\"}\n                data-expanded={expanded}\n                style={itemAnimationStyles}\n                inert={inertValue(!expanded)}\n            >\n                <div ref={itemResizeDetector.ref}>\n                    <FilterItemBody {...otherProps}>\n                        <MinimisableContent\n                            data-testid=\"minimisable-container\"\n                            $height={contentHeight}\n                            $minimisable={minimisable}\n                        >\n                            <div ref={contentResizeDetector.ref}>\n                                <div data-id=\"content-container\">\n                                    {typeof children === \"function\"\n                                        ? children(mode, {\n                                              minimised: contentMinimised,\n                                          })\n                                        : children}\n                                </div>\n                            </div>\n                        </MinimisableContent>\n                        {minimisable && (\n                            <FilterItemMinimiseButton\n                                data-id=\"minimise-button\"\n                                styleType=\"link\"\n                                type=\"button\"\n                                onClick={handleMinimise}\n                            >\n                                <VisuallyHidden>{`view ${\n                                    contentMinimised ? \"more\" : \"less\"\n                                } in ${title}`}</VisuallyHidden>\n                                <span aria-hidden>\n                                    View {contentMinimised ? \"more\" : \"less\"}\n                                </span>\n                            </FilterItemMinimiseButton>\n                        )}\n                    </FilterItemBody>\n                </div>\n            </ExpandableItem>\n        </FilterItemWrapper>\n    );\n};\n\nFilterItem.displayName = \"Filter.Item\";\n"],"names":["FilterItem","_a","collapsible","desktopCollapsible","initialExpanded","expanded","controlledExpanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children","otherProps","__rest","mode","rootNode","useContext","FilterContext","isMobile","setExpanded","useState","getInitialExpandState","contentMinimised","setContentMinimised","itemResizeDetector","useResizeDetector","contentResizeDetector","itemAnimationStyles","useSpring","height","contentHeight","Math","min","_b","internalId","useId","contentId","titleId","useEffect","isNil","_jsxs","FilterItemWrapper","$isMobile","_jsx","Divider","$showDivider","$showMobileDivider","FilterItemHeader","FilterItemTitle","id","type","PopoverAddon","undefined","FilterItemExpandButton","focusHighlight","focusOutline","onClick","nextState","VisuallyHidden","ChevronIcon","$expanded","ExpandableItem","style","inert","inertValue","ref","FilterItemBody","Object","assign","MinimisableContent","$height","$minimisable","minimised","FilterItemMinimiseButton","styleType","displayName"],"mappings":"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"}
+{"version":3,"file":"filter-item.js","sources":["../../../src/filter/filter-item.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport isNil from \"lodash/isNil\";\nimport { useContext, useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../button\";\nimport { PopoverAddon } from \"../form/form-label-addon\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useApplyStyle } from \"../theme\";\nimport { useId } from \"../util\";\nimport { FilterContext } from \"./filter-context\";\nimport * as styles from \"./filter-item.styles\";\nimport type { FilterItemProps } from \"./types\";\n\nexport const FilterItem = ({\n    collapsible: desktopCollapsible = true,\n    initialExpanded = false,\n    expanded: controlledExpanded,\n    onExpandChange,\n    minimisable = false,\n    minimisedHeight,\n    showDivider = true,\n    showMobileDivider = true,\n    title,\n    addon,\n    children,\n    className,\n    ...otherProps\n}: FilterItemProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { mode, rootNode } = useContext(FilterContext);\n    const isMobile = mode === \"mobile\";\n    const [expanded, setExpanded] = useState(getInitialExpandState());\n    const [contentMinimised, setContentMinimised] = useState(minimisable);\n    const collapsible = !isMobile && desktopCollapsible;\n\n    const itemResizeDetector = useResizeDetector();\n    const contentResizeDetector = useResizeDetector();\n    const itemAnimationStyles = useSpring({\n        height: expanded ? itemResizeDetector.height : 0,\n    });\n    const contentHeight = contentMinimised\n        ? minimisedHeight ??\n          Math.min((contentResizeDetector.height ?? 0) * 0.5, 216)\n        : contentResizeDetector.height;\n    const internalId = useId();\n    const contentId = `${internalId}-content`;\n    const titleId = `${internalId}-title`;\n    const minimisableContentRef = useRef<HTMLDivElement | null>(null);\n\n    useApplyStyle(minimisableContentRef, {\n        [styles.tokens.minimisableContent.height]: contentHeight\n            ? `${contentHeight}px`\n            : null,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setExpanded(getInitialExpandState());\n    }, [desktopCollapsible, controlledExpanded]);\n\n    useEffect(() => {\n        setContentMinimised(minimisable);\n    }, [minimisable]);\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleExpandCollapse = () => {\n        const nextState = !expanded;\n\n        if (isNil(controlledExpanded)) {\n            setExpanded(nextState);\n        }\n\n        if (onExpandChange) {\n            onExpandChange(nextState);\n        }\n    };\n\n    const handleMinimise = () => {\n        setContentMinimised(!contentMinimised);\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function getInitialExpandState() {\n        if (isMobile) {\n            return true;\n        }\n        if (isNil(controlledExpanded)) {\n            return !desktopCollapsible || initialExpanded;\n        }\n        return controlledExpanded;\n    }\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n\n    const renderAddon = () => {\n        switch (addon?.type) {\n            case \"popover\":\n                return (\n                    <PopoverAddon\n                        addon={addon}\n                        rootNode={isMobile ? rootNode : undefined}\n                    />\n                );\n            default:\n                return null;\n        }\n    };\n\n    return (\n        <div\n            aria-labelledby={titleId}\n            className={clsx(\n                styles.filterItemWrapper,\n                (collapsible || isMobile) && styles.filterItemWrapperDarker\n            )}\n        >\n            <div\n                className={clsx(\n                    styles.divider,\n                    (isMobile ? showMobileDivider : showDivider) &&\n                        styles.dividerVisible,\n                    isMobile && styles.dividerMobile\n                )}\n            />\n            {(title || collapsible) && (\n                <div\n                    className={clsx(\n                        styles.filterItemHeader,\n                        isMobile && styles.filterItemHeaderMobile\n                    )}\n                >\n                    {title && (\n                        <h3\n                            id={titleId}\n                            data-testid=\"filter-item-title\"\n                            className={clsx(\n                                styles.filterItemTitle,\n                                isMobile && styles.filterItemTitleMobile\n                            )}\n                        >\n                            {title} {addon && renderAddon()}\n                        </h3>\n                    )}\n                    {collapsible && (\n                        <ClickableIcon\n                            className={styles.filterItemExpandButton}\n                            data-testid={\"expand-collapse-button\"}\n                            focusHighlight={false}\n                            focusOutline=\"browser\"\n                            onClick={handleExpandCollapse}\n                            aria-expanded={expanded}\n                            aria-disabled={!collapsible}\n                            aria-controls={contentId}\n                        >\n                            {title && <VisuallyHidden>{title}</VisuallyHidden>}\n                            <ChevronDownIcon\n                                aria-hidden\n                                className={clsx(\n                                    styles.chevronIcon,\n                                    expanded && styles.chevronIconExpanded\n                                )}\n                            />\n                        </ClickableIcon>\n                    )}\n                </div>\n            )}\n            <animated.div\n                className={styles.expandableItem}\n                id={contentId}\n                data-testid={\"expandable-container\"}\n                data-expanded={expanded}\n                style={itemAnimationStyles}\n                inert={inertValue(!expanded)}\n            >\n                <div ref={itemResizeDetector.ref}>\n                    <div\n                        className={clsx(styles.filterItemBody, className)}\n                        {...otherProps}\n                    >\n                        <div\n                            ref={minimisableContentRef}\n                            data-testid=\"minimisable-container\"\n                            className={clsx(\n                                styles.minimisableContent,\n                                minimisable &&\n                                    styles.minimisableContentMinimisable\n                            )}\n                        >\n                            <div ref={contentResizeDetector.ref}>\n                                <div data-id=\"content-container\">\n                                    {typeof children === \"function\"\n                                        ? children(mode, {\n                                              minimised: contentMinimised,\n                                          })\n                                        : children}\n                                </div>\n                            </div>\n                        </div>\n                        {minimisable && (\n                            <Button\n                                className={styles.filterItemMinimiseButton}\n                                data-id=\"minimise-button\"\n                                sizeType=\"small\"\n                                styleType=\"link\"\n                                type=\"button\"\n                                onClick={handleMinimise}\n                            >\n                                <VisuallyHidden>{`view ${\n                                    contentMinimised ? \"more\" : \"less\"\n                                } in ${title}`}</VisuallyHidden>\n                                <span aria-hidden>\n                                    View {contentMinimised ? \"more\" : \"less\"}\n                                </span>\n                            </Button>\n                        )}\n                    </div>\n                </div>\n            </animated.div>\n        </div>\n    );\n};\n\nFilterItem.displayName = \"Filter.Item\";\n"],"names":["FilterItem","_a","collapsible","desktopCollapsible","initialExpanded","expanded","controlledExpanded","onExpandChange","minimisable","minimisedHeight","showDivider","showMobileDivider","title","addon","children","className","otherProps","__rest","mode","rootNode","useContext","FilterContext","isMobile","setExpanded","useState","getInitialExpandState","contentMinimised","setContentMinimised","itemResizeDetector","useResizeDetector","contentResizeDetector","itemAnimationStyles","useSpring","height","contentHeight","Math","min","_b","internalId","useId","contentId","titleId","minimisableContentRef","useRef","useApplyStyle","styles.tokens","minimisableContent","useEffect","isNil","_jsxs","clsx","styles.filterItemWrapper","styles.filterItemWrapperDarker","_jsx","styles.divider","styles.dividerVisible","styles.dividerMobile","styles.filterItemHeader","styles.filterItemHeaderMobile","id","styles.filterItemTitle","styles.filterItemTitleMobile","type","PopoverAddon","undefined","ClickableIcon","styles.filterItemExpandButton","focusHighlight","focusOutline","onClick","nextState","VisuallyHidden","ChevronDownIcon","styles.chevronIcon","styles.chevronIconExpanded","animated","div","styles.expandableItem","style","inert","inertValue","ref","Object","assign","styles.filterItemBody","styles.minimisableContent","styles.minimisableContentMinimisable","minimised","Button","styles.filterItemMinimiseButton","sizeType","styleType","displayName"],"mappings":"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"}

package/cjs/filter/filter-item.styles.js

@@ -1,64 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-down"),o=require("@react-spring/web"),i=require("styled-components"),n=require("../button/button.js"),t=require("../shared/clickable-icon/clickable-icon.js"),r=require("../v3_theme/index.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(i);const s=l.default.div`
-    background-color: ${e=>e.$collapsible?r.V3_Colour["bg-strong"]:r.V3_Colour.bg};
-    ${e=>e.$isMobile&&i.css`
-            background-color: ${r.V3_Colour["bg-strong"]};
-        `}
-`,c=l.default.div`
-    display: ${e=>e.$showDivider?"block":"none"};
-    height: 1px;
-    background-color: ${r.V3_Colour.border};
-
-    ${e=>e.$isMobile&&i.css`
-            display: ${e.$showMobileDivider?"block":"none"};
-            margin: 0 ${r.V3_Spacing["spacing-16"]};
-        `}
-`,d=l.default.div`
-    display: flex;
-    align-items: center;
-
-    background-color: ${r.V3_Colour.bg};
-
-    ${e=>e.$isMobile&&i.css`
-            background-color: transparent;
-        `}
-`,g=l.default(t.ClickableIcon)`
-    margin: 0 0 0 auto;
-
-    color: ${r.V3_Colour.icon};
-    &:hover {
-        color: ${r.V3_Colour["icon-hover"]};
-    }
-`,p=l.default(e.ChevronDownIcon)`
-    height: ${r.V3_Font.Spec["body-size-baseline"]};
-    width: ${r.V3_Font.Spec["body-size-baseline"]};
-
-    transform: rotate(${e=>e.$expanded?180:0}deg);
-    transition: transform ${r.V3_Motion["duration-350"]}
-        ${r.V3_Motion["ease-standard"]};
-`,$=l.default.h3`
-    ${r.V3_Font["heading-xs-semibold"]}
-    color: ${r.V3_Colour.text};
-
-    margin: ${r.V3_Spacing["spacing-24"]} 0 ${r.V3_Spacing["spacing-24"]}
-        ${r.V3_Spacing["spacing-20"]};
-
-    ${e=>e.$isMobile&&i.css`
-            ${r.V3_Font["body-md-semibold"]}
-            color: ${r.V3_Colour["text-subtle"]};
-
-            margin: ${r.V3_Spacing["spacing-24"]} ${r.V3_Spacing["spacing-20"]} 0
-                ${r.V3_Spacing["spacing-20"]};
-        `}
-`,u=o.animated(l.default.div`
-    overflow: hidden;
-`),b=l.default.div`
-    padding: ${r.V3_Spacing["spacing-24"]} ${r.V3_Spacing["spacing-20"]};
-`,m=o.animated(l.default.div`
-    ${e=>e.$minimisable&&"overflow: hidden;"}
-    ${e=>e.$height&&`height: ${e.$height}px;`}
-`),h=l.default(n.Button.Small)`
-    height: fit-content;
-    padding: 0;
-    margin: ${r.V3_Spacing["spacing-16"]} 0 0 0;
-`;exports.ChevronIcon=p,exports.Divider=c,exports.ExpandableItem=u,exports.FilterItemBody=b,exports.FilterItemExpandButton=g,exports.FilterItemHeader=d,exports.FilterItemMinimiseButton=h,exports.FilterItemTitle=$,exports.FilterItemWrapper=s,exports.MinimisableContent=m;
+"use strict";require("./filter-item.styles_1e3v6qq.css");exports.chevronIcon="cjime8m",exports.chevronIconExpanded="cl88d88",exports.divider="d136l108",exports.dividerMobile="d4x3x5q",exports.dividerVisible="d89ue12",exports.expandableItem="eqgs6og",exports.filterItemBody="fu0jz3r",exports.filterItemExpandButton="fe52bn7",exports.filterItemHeader="f1eimp3e",exports.filterItemHeaderMobile="f1b5woey",exports.filterItemMinimiseButton="fw516jj",exports.filterItemTitle="fxnpooo",exports.filterItemTitleMobile="f9puapc",exports.filterItemWrapper="f1afprn0",exports.filterItemWrapperDarker="fo96iku",exports.minimisableContent="m1n17l6q",exports.minimisableContentMinimisable="my7z4fl",exports.tokens={minimisableContent:{height:"--fds-internal-filter-minimisableContent-height"}};
 //# sourceMappingURL=filter-item.styles.js.map

package/cjs/filter/filter-item.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"filter-item.styles.js","sources":["../../../src/filter/filter-item.styles.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { V3_Colour, V3_Font, V3_Motion, V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLES INTERFACE\n// =============================================================================\ninterface StyleProps {\n    $collapsible?: boolean;\n    $expanded?: boolean;\n    $isMobile?: boolean;\n}\n\ninterface DividerStyleProps {\n    $showDivider: boolean;\n    $showMobileDivider: boolean;\n    $isMobile?: boolean;\n}\n\ninterface MinimisableContentProps {\n    $height?: number;\n    $minimisable: boolean;\n}\n\ninterface FilterItemHeaderStyleProps {\n    $isMobile?: boolean;\n}\ninterface FilterItemTitleStyleProps {\n    $isMobile?: boolean;\n}\n\n// =============================================================================\n// FILTER ITEM STYLES\n// =============================================================================\n\nexport const FilterItemWrapper = styled.div<StyleProps>`\n    background-color: ${(props) =>\n        props.$collapsible ? V3_Colour[\"bg-strong\"] : V3_Colour[\"bg\"]};\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            background-color: ${V3_Colour[\"bg-strong\"]};\n        `}\n`;\n\nexport const Divider = styled.div<DividerStyleProps>`\n    display: ${(props) => (props.$showDivider ? \"block\" : \"none\")};\n    height: 1px;\n    background-color: ${V3_Colour[\"border\"]};\n\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            display: ${props.$showMobileDivider ? \"block\" : \"none\"};\n            margin: 0 ${V3_Spacing[\"spacing-16\"]};\n        `}\n`;\n\n// -----------------------------------------------------------------------------\n// HEADER STYLES\n// -----------------------------------------------------------------------------\n\nexport const FilterItemHeader = styled.div<FilterItemHeaderStyleProps>`\n    display: flex;\n    align-items: center;\n\n    background-color: ${V3_Colour[\"bg\"]};\n\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            background-color: transparent;\n        `}\n`;\n\nexport const FilterItemExpandButton = styled(ClickableIcon)`\n    margin: 0 0 0 auto;\n\n    color: ${V3_Colour[\"icon\"]};\n    &:hover {\n        color: ${V3_Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIcon = styled(ChevronDownIcon)<StyleProps>`\n    height: ${V3_Font.Spec[\"body-size-baseline\"]};\n    width: ${V3_Font.Spec[\"body-size-baseline\"]};\n\n    transform: rotate(${(props) => (props.$expanded ? 180 : 0)}deg);\n    transition: transform ${V3_Motion[\"duration-350\"]}\n        ${V3_Motion[\"ease-standard\"]};\n`;\n\nexport const FilterItemTitle = styled.h3<FilterItemTitleStyleProps>`\n    ${V3_Font[\"heading-xs-semibold\"]}\n    color: ${V3_Colour[\"text\"]};\n\n    margin: ${V3_Spacing[\"spacing-24\"]} 0 ${V3_Spacing[\"spacing-24\"]}\n        ${V3_Spacing[\"spacing-20\"]};\n\n    ${(props) =>\n        props.$isMobile &&\n        css`\n            ${V3_Font[\"body-md-semibold\"]}\n            color: ${V3_Colour[\"text-subtle\"]};\n\n            margin: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]} 0\n                ${V3_Spacing[\"spacing-20\"]};\n        `}\n`;\n\n// -----------------------------------------------------------------------------\n// CONTENT STYLES\n// -----------------------------------------------------------------------------\n\nexport const ExpandableItem = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const FilterItemBody = styled.div`\n    padding: ${V3_Spacing[\"spacing-24\"]} ${V3_Spacing[\"spacing-20\"]};\n`;\n\nexport const MinimisableContent = animated(styled.div<MinimisableContentProps>`\n    ${(props) => props.$minimisable && \"overflow: hidden;\"}\n    ${(props) => props.$height && `height: ${props.$height}px;`}\n`);\n\nexport const FilterItemMinimiseButton = styled(Button.Small)`\n    height: fit-content;\n    padding: 0;\n    margin: ${V3_Spacing[\"spacing-16\"]} 0 0 0;\n`;\n"],"names":["FilterItemWrapper","styled","div","props","$collapsible","V3_Colour","$isMobile","css","Divider","$showDivider","$showMobileDivider","V3_Spacing","FilterItemHeader","FilterItemExpandButton","ClickableIcon","ChevronIcon","ChevronDownIcon","V3_Font","Spec","$expanded","V3_Motion","FilterItemTitle","h3","ExpandableItem","animated","FilterItemBody","MinimisableContent","$minimisable","$height","FilterItemMinimiseButton","Button","Small"],"mappings":"2UAuCO,MAAMA,EAAoBC,EAAAA,QAAOC,GAAe;wBAC9BC,GACjBA,EAAMC,aAAeC,EAAAA,UAAU,aAAeA,YAAc;MAC7DF,GACCA,EAAMG,WACNC,KAAG;gCACqBF,EAAAA,UAAU;;EAI7BG,EAAUP,EAAAA,QAAOC,GAAsB;eACpCC,GAAWA,EAAMM,aAAe,QAAU;;wBAElCJ,EAAAA,UAAkB;;MAEnCF,GACCA,EAAMG,WACNC,KAAG;uBACYJ,EAAMO,mBAAqB,QAAU;wBACpCC,EAAAA,WAAW;;EAQtBC,EAAmBX,EAAAA,QAAOC,GAA+B;;;;wBAI9CG,EAAAA,UAAc;;MAE/BF,GACCA,EAAMG,WACNC,KAAG;;;EAKEM,EAAyBZ,EAAAA,QAAOa,EAAAA,cAAc;;;aAG9CT,EAAAA,UAAgB;;iBAEZA,EAAAA,UAAU;;EAIdU,EAAcd,EAAAA,QAAOe,EAAAA,gBAA4B;cAChDC,EAAAA,QAAQC,KAAK;aACdD,EAAAA,QAAQC,KAAK;;wBAEDf,GAAWA,EAAMgB,UAAY,IAAM;4BAChCC,EAAAA,UAAU;UAC5BA,EAAAA,UAAU;EAGPC,EAAkBpB,EAAAA,QAAOqB,EAA6B;MAC7DL,EAAAA,QAAQ;aACDZ,EAAAA,UAAgB;;cAEfM,EAAAA,WAAW,mBAAmBA,EAAAA,WAAW;UAC7CA,EAAAA,WAAW;;MAEdR,GACCA,EAAMG,WACNC,KAAG;cACGU,EAAAA,QAAQ;qBACDZ,EAAAA,UAAU;;sBAETM,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;kBAC3CA,EAAAA,WAAW;;EAQhBY,EAAiBC,EAAAA,SAASvB,EAAAA,QAAOC,GAAG;;GAIpCuB,EAAiBxB,EAAAA,QAAOC,GAAG;eACzBS,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;EAGzCe,EAAqBF,EAAAA,SAASvB,EAAAA,QAAOC,GAA4B;MACvEC,GAAUA,EAAMwB,cAAgB;MAChCxB,GAAUA,EAAMyB,SAAW,WAAWzB,EAAMyB;GAGtCC,EAA2B5B,EAAAA,QAAO6B,SAAOC,MAAM;;;cAG9CpB,EAAAA,WAAW;"}
+{"version":3,"file":"filter-item.styles.js","sources":["../../../src/filter/filter-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Spacing } from \"../theme\";\n\nexport const tokens = {\n    minimisableContent: {\n        height: \"--fds-internal-filter-minimisableContent-height\",\n    },\n} as const;\n\n// =============================================================================\n// FILTER ITEM STYLES\n// =============================================================================\n\nexport const filterItemWrapper = css`\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemWrapperDarker = css`\n    background-color: ${Colour[\"bg-strong\"]};\n`;\n\nexport const divider = css`\n    display: none;\n    height: 1px;\n    background-color: ${Colour[\"border\"]};\n`;\n\nexport const dividerVisible = css`\n    display: block;\n`;\n\nexport const dividerMobile = css`\n    margin: 0 ${Spacing[\"spacing-16\"]};\n`;\n\n// =============================================================================\n// HEADER STYLES\n// =============================================================================\n\nexport const filterItemHeader = css`\n    display: flex;\n    align-items: center;\n\n    background-color: ${Colour[\"bg\"]};\n`;\n\nexport const filterItemHeaderMobile = css`\n    background-color: transparent;\n`;\n\nexport const filterItemExpandButton = css`\n    margin: 0 0 0 auto;\n\n    color: ${Colour[\"icon\"]};\n    &:hover {\n        color: ${Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const chevronIcon = css`\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n\n    transform: rotate(0deg);\n    transition: transform ${Motion[\"duration-350\"]} ${Motion[\"ease-standard\"]};\n`;\n\nexport const chevronIconExpanded = css`\n    transform: rotate(180deg);\n`;\n\nexport const filterItemTitle = css`\n    ${Font[\"heading-xs-semibold\"]}\n    color: ${Colour[\"text\"]};\n\n    margin: ${Spacing[\"spacing-24\"]} 0;\n    margin-left: ${Spacing[\"spacing-20\"]};\n`;\n\nexport const filterItemTitleMobile = css`\n    ${Font[\"body-md-semibold\"]}\n    color: ${Colour[\"text-subtle\"]};\n\n    margin: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]} 0\n        ${Spacing[\"spacing-20\"]};\n`;\n\n// =============================================================================\n// CONTENT STYLES\n// =============================================================================\n\nexport const expandableItem = css`\n    overflow: hidden;\n`;\n\nexport const filterItemBody = css`\n    padding: ${Spacing[\"spacing-24\"]} ${Spacing[\"spacing-20\"]};\n`;\n\nexport const minimisableContent = css`\n    ${tokens.minimisableContent.height}: initial;\n    height: var(${tokens.minimisableContent.height});\n`;\n\nexport const minimisableContentMinimisable = css`\n    overflow: hidden;\n`;\n\nexport const filterItemMinimiseButton = css`\n    height: fit-content;\n    padding: 0;\n    margin: ${Spacing[\"spacing-16\"]} 0 0 0;\n`;\n"],"names":["minimisableContent","height"],"mappings":"mGA4DwB,sCAQQ,0BA9CZ,iCAUM,iCAJC,iCAgEA,iCAIA,yCA7CQ,mCAXN,0CAOM,4CA8DE,kCArCT,wCAQM,oCAlEJ,2CAIM,qCAkFL,iDAKW,yBArGpB,CAClBA,mBAAoB,CAChBC,OAAQ"}

package/cjs/filter/filter-item.styles_1e3v6qq.css

@@ -0,0 +1,17 @@
+.f1afprn0{background-color:var(--fds-colour-bg);}
+.fo96iku{background-color:var(--fds-colour-bg-strong);}
+.d136l108{display:none;height:1px;background-color:var(--fds-colour-border);}
+.d89ue12{display:block;}
+.d4x3x5q{margin:0 var(--fds-spacing-16);}
+.f1eimp3e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:var(--fds-colour-bg);}
+.f1b5woey{background-color:transparent;}
+.fe52bn7{margin:0 0 0 auto;color:var(--fds-colour-icon);}.fe52bn7:hover{color:var(--fds-colour-icon-hover);}
+.cjime8m{height:var(--fds-font-body-size-baseline);width:var(--fds-font-body-size-baseline);-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg);-webkit-transition:-webkit-transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);transition:transform var(--fds-motion-duration-350) var(--fds-motion-timing-ease-standard);}
+.cl88d88{-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg);}
+.fxnpooo{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-heading-size-xs);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);color:var(--fds-colour-text);margin:var(--fds-spacing-24) 0;margin-left:var(--fds-spacing-20);}
+.f9puapc{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text-subtle);margin:var(--fds-spacing-24) var(--fds-spacing-20) 0 var(--fds-spacing-20);}
+.eqgs6og{overflow:hidden;}
+.fu0jz3r{padding:var(--fds-spacing-24) var(--fds-spacing-20);}
+.m1n17l6q{--fds-internal-filter-minimisableContent-height:initial;height:var(--fds-internal-filter-minimisableContent-height);}
+.my7z4fl{overflow:hidden;}
+.fw516jj{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0;margin:var(--fds-spacing-16) 0 0 0;}

package/cjs/filter/filter-modal.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("@floating-ui/react"),i=require("@lifesg/react-icons"),r=require("react"),o=require("../overlay/overlay.js"),n=require("../shared/accessibility/index.js"),s=require("./filter.styles.js"),a=require("./filter-context.js"),d=require("./filter-modal.styles.js");const u=u=>{var{customLabels:c,onClear:b,onDone:h,onDismiss:g,onModalOpen:j,toggleFilterButtonStyle:x="light",clearButtonDisabled:F=!1,insets:v,children:f,toggleFilterButtonLabel:y,headerTitle:B,doneButtonLabel:m}=u,p=e.__rest(u,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel"]);const{context:C,refs:q}=l.useFloating(),L=r.useRef(null),[D,T]=r.useState(!1),M={toggle:(null==c?void 0:c.toggleFilterButtonLabel)||y||"Filters",title:(null==c?void 0:c.headerTitle)||B||"Filters",done:(null==c?void 0:c.doneButtonLabel)||m||"Done",clear:(null==c?void 0:c.clearButtonLabel)||"Clear"};return r.useEffect((()=>{var e;D&&(null===(e=L.current)||void 0===e||e.focus())}),[D]),t.jsxs(a.FilterContext.Provider,{value:{mode:"mobile",rootNode:L},children:[t.jsx("div",Object.assign({},p,{children:t.jsx(d.FilterButton,{"data-testid":"filter-show-button",styleType:x,onClick:()=>{T(!0),null==j||j()},type:"button",icon:t.jsx(i.FilterIcon,{}),children:M.toggle})})),t.jsx(o.Overlay,{show:D,disableTransition:!0,children:t.jsx(d.FloatingWrapper,{inert:n.inertValue(!D),children:t.jsx(l.FloatingFocusManager,{context:C,disabled:!D,children:t.jsx(d.MobileOverlayContainer,{"data-id":"filter-mobile","data-testid":"filter-mobile",ref:q.setFloating,children:t.jsxs(d.MobileContainer,{ref:L,tabIndex:0,children:[t.jsxs(d.FilterHeader,{$insetTop:null==v?void 0:v.top,children:[t.jsx(s.FilterHeaderButton,{onClick:()=>{T(!1),null==g||g()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${M.title}`,children:t.jsx(i.CrossIcon,{})}),t.jsx(d.FilterTitle,{children:M.title}),t.jsx(d.FilterClearButton,{styleType:"link",type:"button",onClick:()=>null==b?void 0:b(),disabled:F,"aria-label":`clear ${M.title}`,children:M.clear})]}),t.jsx(s.FilterBody,{children:f}),t.jsx(s.FilterFooter,{$insetBottom:null==v?void 0:v.bottom,children:t.jsx(s.FilterDoneButton,{onClick:()=>{T(!1),null==h||h()},children:M.done})})]})})})})})]})};u.displayName="Filter.Modal",exports.FilterModal=u;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),l=require("@floating-ui/react"),i=require("@lifesg/react-icons"),r=require("clsx"),s=require("../external/lodash/isNumber.js"),o=require("react"),n=require("../button/button.js"),a=require("../overlay/overlay.js"),u=require("../shared/accessibility/index.js"),d=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var c=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var m=require("./filter.styles.js"),f=require("./filter-context.js"),h=require("./filter-modal.styles.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var j=b(r);const v=r=>{var{customLabels:b,onClear:v,onDone:x,onDismiss:p,onModalOpen:y,toggleFilterButtonStyle:g="light",clearButtonDisabled:q=!1,insets:B,children:F,toggleFilterButtonLabel:N,headerTitle:k,doneButtonLabel:C,className:T}=r,L=e.__rest(r,["customLabels","onClear","onDone","onDismiss","onModalOpen","toggleFilterButtonStyle","clearButtonDisabled","insets","children","toggleFilterButtonLabel","headerTitle","doneButtonLabel","className"]);const{context:D,refs:I}=l.useFloating(),O=o.useRef(null),H=o.useRef(null),M=o.useRef(null),[S,$]=o.useState(!1);c.useApplyStyle(H,{[h.tokens.filterHeader.insetTop]:s.default(null==B?void 0:B.top)?`${B.top}px`:null}),c.useApplyStyle(M,{[m.tokens.filterFooter.insetBottom]:s.default(null==B?void 0:B.bottom)?`${B.bottom}px`:null});const _={toggle:(null==b?void 0:b.toggleFilterButtonLabel)||N||"Filters",title:(null==b?void 0:b.headerTitle)||k||"Filters",done:(null==b?void 0:b.doneButtonLabel)||C||"Done",clear:(null==b?void 0:b.clearButtonLabel)||"Clear"};return o.useEffect((()=>{var e;S&&(null===(e=O.current)||void 0===e||e.focus())}),[S]),t.jsxs(f.FilterContext.Provider,{value:{mode:"mobile",rootNode:O},children:[t.jsx("div",Object.assign({className:T},L,{children:t.jsx(n.Button,{className:h.filterButton,"data-testid":"filter-show-button",styleType:g,onClick:()=>{$(!0),null==y||y()},type:"button",icon:t.jsx(i.FilterIcon,{}),children:_.toggle})})),t.jsx(a.Overlay,{show:S,disableTransition:!0,children:t.jsx("div",{className:h.floatingWrapper,inert:u.inertValue(!S),children:t.jsx(l.FloatingFocusManager,{context:D,disabled:!S,children:t.jsx("div",{className:h.mobileOverlayContainer,"data-id":"filter-mobile","data-testid":"filter-mobile",ref:I.setFloating,children:t.jsxs("div",{className:h.mobileContainer,ref:O,tabIndex:0,children:[t.jsxs("div",{ref:H,className:j.default(h.filterHeader,s.default(null==B?void 0:B.top)&&h.filterHeaderWithInsetTop),children:[t.jsx(d.ClickableIcon,{className:m.filterHeaderButton,onClick:()=>{$(!1),null==p||p()},focusOutline:"browser",focusHighlight:!1,"aria-label":`close ${_.title}`,children:t.jsx(i.CrossIcon,{})}),t.jsx("h2",{className:h.filterTitle,children:_.title}),t.jsx(n.Button,{className:h.filterClearButton,styleType:"link",type:"button",sizeType:"small",onClick:()=>null==v?void 0:v(),disabled:q,"aria-label":`clear ${_.title}`,children:_.clear})]}),t.jsx("div",{className:m.filterBody,children:F}),t.jsx("div",{ref:M,className:j.default(m.filterFooter,s.default(null==B?void 0:B.bottom)&&m.filterFooterWithInsetBottom),children:t.jsx(n.Button,{className:m.filterDoneButton,onClick:()=>{$(!1),null==x||x()},children:_.done})})]})})})})})]})};v.displayName="Filter.Modal",exports.FilterModal=v;
 //# sourceMappingURL=filter-modal.js.map