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

package/link-list/components/common.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.js","sources":["../../../src/link-list/components/common.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport type { LinkListItemProps, LinkListStyle } from \"../internal-types\";\nimport {\n    Description,\n    ItemContainer,\n    ItemContentContainer,\n    ItemIcon,\n    ItemTitleDefault,\n    ItemTitleSmall,\n} from \"../link-list.styles\";\n\ntype LinkListItemsProps<T> = {\n    \"data-testid\"?: string | undefined;\n    items: LinkListItemProps<T>[];\n    handleItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => void;\n    style?: LinkListStyle | undefined;\n};\nexport const LinkListItems = <T,>({\n    \"data-testid\": testId,\n    items,\n    handleItemClick,\n    style,\n}: LinkListItemsProps<T>) => {\n    const ItemTitle = style === \"small\" ? ItemTitleSmall : ItemTitleDefault;\n\n    return (\n        <>\n            {items.map((item, index) => {\n                const {\n                    title,\n                    description,\n                    secondaryDescription,\n                    onClick: _onClick, // deconstruct since we are handling it\n                    ...otherProps\n                } = item;\n\n                return (\n                    <ItemContainer\n                        key={`${testId}-${index}`}\n                        data-testid={`${testId}-${index}`}\n                        onClick={(event) => handleItemClick(event, item)}\n                        {...otherProps}\n                    >\n                        <ItemContentContainer>\n                            <ItemTitle\n                                forwardedAs=\"div\"\n                                data-testid={`link-title-${index}`}\n                                weight=\"semibold\"\n                            >\n                                {title}\n                            </ItemTitle>\n                            {description && (\n                                <Description\n                                    data-testid={`link-description-${index}`}\n                                >\n                                    {description}\n                                </Description>\n                            )}\n                            {secondaryDescription}\n                        </ItemContentContainer>\n                        <ItemIcon aria-hidden />\n                    </ItemContainer>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["LinkListItems","testId","items","handleItemClick","style","ItemTitle","ItemTitleSmall","ItemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","otherProps","__rest","_jsxs","ItemContainer","Object","assign","event","ItemContentContainer","forwardedAs","weight","Description","ItemIcon"],"mappings":"4QAqBO,MAAMA,EAAgB,EACzB,cAAeC,EACfC,QACAC,kBACAC,YAEA,MAAMC,EAAsB,UAAVD,EAAoBE,EAAiBC,EAEvD,OACIC,EAAAC,EAAA,CAAAC,SACKR,EAAMS,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,GAETN,EADGO,EAAUC,EACbR,EANE,CAAA,QAAA,cAAA,uBAAA,YAQN,OACIS,EAACC,EAAaC,OAAAC,OAAA,CAAA,cAEG,GAAGvB,KAAUY,IAC1BI,QAAUQ,GAAUtB,EAAgBsB,EAAOb,IACvCO,EAAU,CAAAT,SAAA,CAEdW,EAACK,EAAoB,CAAAhB,SAAA,CACjBF,EAACH,EAAS,CACNsB,YAAY,MAAK,cACJ,cAAcd,IAC3Be,OAAO,WAAUlB,SAEhBI,IAEJC,GACGP,EAACqB,EAAW,CAAA,cACK,oBAAoBhB,IAAOH,SAEvCK,IAGRC,KAELR,EAACsB,EAAQ,CAAA,eAAA,OAtBJ,GAAG7B,KAAUY,IAuBN,KAGzB"}
+{"version":3,"file":"common.js","sources":["../../../src/link-list/components/common.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LinkListItemProps, LinkListStyle } from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\n\ntype LinkListItemsProps<T> = {\n    \"data-testid\"?: string | undefined;\n    items: LinkListItemProps<T>[];\n    handleItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => void;\n    style?: LinkListStyle | undefined;\n};\nexport const LinkListItems = <T,>({\n    \"data-testid\": testId,\n    items,\n    handleItemClick,\n    style,\n}: LinkListItemsProps<T>) => {\n    const ItemTitle =\n        style === \"small\" ? Typography.HeadingXS : Typography.HeadingSM;\n    const itemTitleClassName =\n        style === \"small\" ? styles.itemTitleSmall : styles.itemTitleDefault;\n\n    return (\n        <>\n            {items.map((item, index) => {\n                const {\n                    title,\n                    description,\n                    secondaryDescription,\n                    onClick: _onClick, // deconstruct since we are handling it\n                    className,\n                    ...otherProps\n                } = item;\n\n                return (\n                    <a\n                        key={`${testId}-${index}`}\n                        data-testid={`${testId}-${index}`}\n                        onClick={(event) => handleItemClick(event, item)}\n                        {...otherProps}\n                        className={clsx(styles.itemContainer, className)}\n                    >\n                        <div className={styles.itemContentContainer}>\n                            <ItemTitle\n                                as=\"div\"\n                                data-testid={`link-title-${index}`}\n                                weight=\"semibold\"\n                                className={itemTitleClassName}\n                            >\n                                {title}\n                            </ItemTitle>\n                            {description && (\n                                <Typography.BodyMD\n                                    data-testid={`link-description-${index}`}\n                                    className={styles.itemDescription}\n                                >\n                                    {description}\n                                </Typography.BodyMD>\n                            )}\n                            {secondaryDescription}\n                        </div>\n                        <ChevronRightIcon\n                            aria-hidden\n                            className={styles.itemIcon}\n                        />\n                    </a>\n                );\n            })}\n        </>\n    );\n};\n"],"names":["LinkListItems","testId","items","handleItemClick","style","ItemTitle","Typography","HeadingXS","HeadingSM","itemTitleClassName","styles.itemTitleSmall","styles.itemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","className","otherProps","_jsxs","event","clsx","styles.itemContainer","styles.itemContentContainer","as","weight","BodyMD","styles.itemDescription","ChevronRightIcon","styles.itemIcon"],"mappings":"gaAiBO,MAAMA,EAAgB,EACzB,cAAeC,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAWC,UAAYD,EAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAwBC,EAEhD,OACIC,EAAAC,EAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,IACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,mCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAKC,EAAsBL,GAAUT,SAAA,CAEhDW,EAAA,MAAA,CAAKF,UAAWM,EAA2Bf,SAAA,CACvCF,EAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAACN,EAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,EAAsBnB,SAEhCK,IAGRC,KAELR,EAACsB,EAAgB,CAAA,eAAA,EAEbX,UAAWY,OA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}

package/link-list/components/link-list-eager.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{useSpring as r}from"@react-spring/web";import{useState as s}from"react";import{useResizeDetector as l}from"../../external/react-resize-detector/build/index.esm.js";import{inertValue as n}from"../../shared/accessibility/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as o}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import{Expandable as m,ExpandableChild as a,ToggleButton as d,ToggleButtonLabel as c,ViewLessIcon as h,ViewMoreIcon as p}from"../link-list.styles.js";import{LinkListItems as g}from"./common.js";const u=({items:u,maxShown:f,style:j,onItemClick:b,customLabels:k})=>{const[w,y]=s(!f||f>=u.length),x=f?u.slice(f):[],v=l(),C=v.ref,[I]=s((()=>o.generate())),D=(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):b&&(e.preventDefault(),b(t,e))},L=()=>{y(!w)},V=r({height:w?v.height:0});return e(t,{children:[i(g,{"data-testid":"link-list-items-shown",items:f?u.slice(0,f):u,handleItemClick:D,style:j}),x.length>0&&i(m,{id:I,style:V,"data-testid":"minimised-content",inert:n(!w),children:i(a,{ref:C,$border:!0,children:i(g,{"data-testid":"link-list-items-minimised",style:j,items:x,handleItemClick:D})})}),x.length>0&&e(d,{type:"button",onClick:L,"data-testid":"toggle-button","aria-expanded":w,"aria-controls":I,children:[i(c,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label",children:w?(null==k?void 0:k.viewLess)||"View less":(null==k?void 0:k.viewMore)||"View more"}),i(w?h:p,{"aria-hidden":!0})]})]})};export{u as EagerLinkList};
+import{jsxs as e,Fragment as t,jsx as i}from"react/jsx-runtime";import{MinusIcon as s}from"@lifesg/react-icons/minus";import{PlusIcon as r}from"@lifesg/react-icons/plus";import{useSpring as l,animated as o}from"@react-spring/web";import{useState as n}from"react";import{useResizeDetector as a}from"../../external/react-resize-detector/build/index.esm.js";import{inertValue as m}from"../../shared/accessibility/index.js";import{Typography as d}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as c}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{expandable as p,expandableList as h,toggleButton as u,toggleButtonLabel as f,toggleButtonIcon as g}from"../link-list.styles.js";import{LinkListItems as j}from"./common.js";const y=({items:y,maxShown:b,style:k,onItemClick:v,customLabels:x})=>{const[w,C]=n(!b||b>=y.length),N=b?y.slice(b):[],D=a(),I=D.ref,L=c(),M=(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):v&&(e.preventDefault(),v(t,e))},V=()=>{C(!w)},z=l({height:w?D.height:0});return e(t,{children:[i(j,{"data-testid":"link-list-items-shown",items:b?y.slice(0,b):y,handleItemClick:M,style:k}),N.length>0&&i(o.div,{id:L,style:z,"data-testid":"minimised-content",inert:m(!w),className:p,children:i("div",{ref:I,className:h,children:i(j,{"data-testid":"link-list-items-minimised",style:k,items:N,handleItemClick:M})})}),N.length>0&&e("button",{type:"button",onClick:V,"data-testid":"toggle-button","aria-expanded":w,"aria-controls":L,className:u,children:[i(d.BodyMD,{as:"span",weight:"semibold","data-testid":"toggle-button-label",className:f,children:w?(null==x?void 0:x.viewLess)||"View less":(null==x?void 0:x.viewMore)||"View more"}),i(w?s:r,{"aria-hidden":!0,className:g})]})]})};export{y as EagerLinkList};
 //# sourceMappingURL=link-list-eager.js.map

package/link-list/components/link-list-eager.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list-eager.js","sources":["../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { SimpleIdGenerator } from \"../../util\";\nimport type {\n    BaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../internal-types\";\nimport {\n    Expandable,\n    ExpandableChild,\n    ToggleButton,\n    ToggleButtonLabel,\n    ViewLessIcon,\n    ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const [id] = useState(() => SimpleIdGenerator.generate());\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <ToggleButton\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n        >\n            <ToggleButtonLabel\n                forwardedAs=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </ToggleButtonLabel>\n            {showMinimised ? (\n                <ViewLessIcon aria-hidden />\n            ) : (\n                <ViewMoreIcon aria-hidden />\n            )}\n        </ToggleButton>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <Expandable\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                >\n                    <ExpandableChild ref={childRef} $border>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </ExpandableChild>\n                </Expandable>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["EagerLinkList","items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","SimpleIdGenerator","generate","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_jsx","LinkListItems","handleItemClick","Expandable","inert","inertValue","children","ExpandableChild","ToggleButton","type","ToggleButtonLabel","forwardedAs","weight","viewLess","viewMore","ViewLessIcon","ViewMoreIcon"],"mappings":"wqBAwBO,MAAMA,EAAgB,EACzBC,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,GACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,IACjBC,EAAWF,EAAeG,KAEzBC,GAAMR,GAAS,IAAMS,EAAkBC,aAKxCC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNhB,IACPgB,EAAMG,iBACNnB,EAAYiB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BjB,GAAkBD,EAAc,EAgC9BmB,EAAmBC,EAAU,CAC/BC,OAAQrB,EAAgBM,EAAee,OAAS,IAGpD,OACIC,eACIC,EAACC,iBACe,wBACZ7B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C8B,gBAAiBZ,EACjBhB,MAAOA,IAEVO,EAAeD,OAAS,GACrBoB,EAACG,EAAU,CACPhB,GAAIA,EACJb,MAAOsB,EAAgB,cACX,oBACZQ,MAAOC,GAAY5B,GAAc6B,SAEjCN,EAACO,EAAe,CAACrB,IAAKD,sBAClBe,EAACC,EAAa,CAAA,cACE,4BACZ3B,MAAOA,EACPF,MAAOS,EACPqB,gBAAiBZ,QAKhCT,EAAeD,OAAS,GAtD7BmB,EAACS,EAAY,CACTC,KAAK,SACLhB,QAASE,EAAuB,cACpB,gBAAe,gBACZlB,kBACAU,EAAEmB,SAAA,CAEjBN,EAACU,GACGC,YAAY,OACZC,OAAO,WAAU,cACL,+BAEXnC,GACKD,eAAAA,EAAcqC,WAAY,aAC1BrC,aAAY,EAAZA,EAAcsC,WAAY,cAGhCd,EADHvB,EACIsC,EAEAC,EAFY,CAAA,eAAA,SAsClB"}
+{"version":3,"file":"link-list-eager.js","sources":["../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type {\n    BaseProps,\n    LinkListEagerProps,\n    LinkListItemProps,\n} from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n    items,\n    maxShown,\n    style,\n    onItemClick,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showMinimised, setShowMinimised] = useState<boolean>(\n        maxShown ? maxShown >= items.length : true\n    );\n\n    const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    const id = useId();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleToggleButtonClick = () => {\n        setShowMinimised(!showMinimised);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => (\n        <button\n            type=\"button\"\n            onClick={handleToggleButtonClick}\n            data-testid=\"toggle-button\"\n            aria-expanded={showMinimised}\n            aria-controls={id}\n            className={styles.toggleButton}\n        >\n            <Typography.BodyMD\n                as=\"span\"\n                weight=\"semibold\"\n                data-testid=\"toggle-button-label\"\n                className={styles.toggleButtonLabel}\n            >\n                {showMinimised\n                    ? customLabels?.viewLess || \"View less\"\n                    : customLabels?.viewMore || \"View more\"}\n            </Typography.BodyMD>\n            {showMinimised ? (\n                <MinusIcon aria-hidden className={styles.toggleButtonIcon} />\n            ) : (\n                <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n            )}\n        </button>\n    );\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: showMinimised ? resizeDetector.height : 0,\n    });\n\n    return (\n        <>\n            <LinkListItems\n                data-testid=\"link-list-items-shown\"\n                items={maxShown ? items.slice(0, maxShown) : items}\n                handleItemClick={handleListItemClick}\n                style={style}\n            />\n            {itemsMinimised.length > 0 && (\n                <animated.div\n                    id={id}\n                    style={expandableStyles}\n                    data-testid=\"minimised-content\"\n                    inert={inertValue(!showMinimised)}\n                    className={styles.expandable}\n                >\n                    <div ref={childRef} className={styles.expandableList}>\n                        <LinkListItems\n                            data-testid=\"link-list-items-minimised\"\n                            style={style}\n                            items={itemsMinimised}\n                            handleItemClick={handleListItemClick}\n                        />\n                    </div>\n                </animated.div>\n            )}\n            {itemsMinimised.length > 0 && renderToggle()}\n        </>\n    );\n};\n"],"names":["EagerLinkList","items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_Fragment","children","_jsx","LinkListItems","handleItemClick","animated","div","inert","inertValue","className","styles.expandable","styles.expandableList","type","styles.toggleButton","Typography","BodyMD","as","weight","styles.toggleButtonLabel","viewLess","viewMore","MinusIcon","PlusIcon","styles.toggleButtonIcon"],"mappings":"+1BAoBO,MAAMA,EAAgB,EACzBC,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,GACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,IACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,IAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,EAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAACG,EAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,GAAY9B,GACnB+B,UAAWC,WAEXR,EAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAqBV,SAChDC,EAACC,EAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAmBZ,SAAA,CAE9BC,EAACY,EAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAGhClB,EADHxB,EACI2C,EAEAC,EAFS,CAAA,eAAA,EAAab,UAAWc,SAuCvC"}

package/link-list/components/link-list-lazy.js

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsxs as t,Fragment as o,jsx as i}from"react/jsx-runtime";import{useSpring as r}from"@react-spring/web";import{useState as n}from"react";import{useResizeDetector as s}from"../../external/react-resize-detector/build/index.esm.js";import{ComponentLoadingSpinner as m}from"../../shared/component-loading-spinner/component-loading-spinner.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as l}from"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/string-helper.js";import{Expandable as d,ExpandableChild as a,ToggleButton as p,ToggleButtonLabel as c,ViewMoreIcon as h}from"../link-list.styles.js";import{LinkListItems as u}from"./common.js";const f=({items:f,style:j,onItemClick:b,loadMore:g,onLoadMore:k,customLabels:y})=>{const[v,x]=n(!1),w=s(),C=w.ref,L=()=>e(void 0,void 0,void 0,(function*(){if(!v){x(!0);try{yield k()}catch(e){}x(!1)}})),M=r({height:w.height});return t(o,{children:[i(d,{style:M,"data-testid":"content",children:i(a,{ref:C,children:i(u,{"data-testid":"link-list-items",items:f,handleItemClick:(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):b&&(e.preventDefault(),b(t,e))},style:j})})}),g&&(()=>{const e=v?"Loading...":(null==y?void 0:y.viewMore)||"View more";return t(p,{type:"button",onClick:L,"data-testid":"toggle-button","aria-disabled":v,$loading:v,children:[i(c,{forwardedAs:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":v,children:e}),v?i(m,{color:l["text-disabled"]}):i(h,{"aria-hidden":!0})]})})()]})};export{f as LazyLinkList};
+import{__awaiter as e}from"../../_virtual/_tslib.js";import{jsxs as t,Fragment as i,jsx as o}from"react/jsx-runtime";import{PlusIcon as r}from"@lifesg/react-icons/plus";import{useSpring as s,animated as m}from"@react-spring/web";import n from"clsx";import{useState as a}from"react";import{useResizeDetector as l}from"../../external/react-resize-detector/build/index.esm.js";import{ComponentLoadingSpinner as d}from"../../shared/component-loading-spinner/component-loading-spinner.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as p}from"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import"../../theme/utils/use-media-query.js";import{Typography as c}from"../../typography/index.js";import{expandable as h,toggleButtonLabel as u,toggleButtonIcon as f,toggleButton as j,toggleButtonLoading as g}from"../link-list.styles.js";import{LinkListItems as y}from"./common.js";const b=({items:b,style:v,onItemClick:k,loadMore:x,onLoadMore:C,customLabels:w})=>{const[M,N]=a(!1),D=l(),L=D.ref,q=()=>e(void 0,void 0,void 0,(function*(){if(!M){N(!0);try{yield C()}catch(e){}N(!1)}})),I=s({height:D.height});return t(i,{children:[o(m.div,{style:I,"data-testid":"content",className:h,children:o("div",{ref:L,children:o(y,{"data-testid":"link-list-items",items:b,handleItemClick:(e,t)=>{t.onClick?(e.preventDefault(),t.onClick(e)):k&&(e.preventDefault(),k(t,e))},style:v})})}),x&&(()=>{const e=M?"Loading...":(null==w?void 0:w.viewMore)||"View more";return t("button",{type:"button",onClick:q,"data-testid":"toggle-button","aria-disabled":M,className:n(j,M&&g),children:[o(c.BodyMD,{as:"span",weight:"semibold","data-testid":"toggle-button-label","aria-busy":M,className:u,children:e}),M?o(d,{color:p["text-disabled"]}):o(r,{"aria-hidden":!0,className:f})]})})()]})};export{b as LazyLinkList};
 //# sourceMappingURL=link-list-lazy.js.map

package/link-list/components/link-list-lazy.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list-lazy.js","sources":["../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport type {\n    BaseProps,\n    LinkListItemProps,\n    LinkListLazyProps,\n} from \"../internal-types\";\nimport {\n    Expandable,\n    ExpandableChild,\n    ToggleButton,\n    ToggleButtonLabel,\n    ViewMoreIcon,\n} from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n    items,\n    style,\n    onItemClick,\n    loadMore,\n    onLoadMore,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [isLoading, setIsLoading] = useState(false);\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleClickViewMore = async () => {\n        if (isLoading) return;\n\n        setIsLoading(true);\n        try {\n            await onLoadMore();\n        } catch {\n            // do nothing\n        }\n        setIsLoading(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => {\n        const label = isLoading\n            ? \"Loading...\"\n            : customLabels?.viewMore || \"View more\";\n\n        return (\n            <ToggleButton\n                type=\"button\"\n                onClick={handleClickViewMore}\n                data-testid=\"toggle-button\"\n                aria-disabled={isLoading}\n                $loading={isLoading}\n            >\n                <ToggleButtonLabel\n                    forwardedAs=\"span\"\n                    weight=\"semibold\"\n                    data-testid=\"toggle-button-label\"\n                    aria-busy={isLoading}\n                >\n                    {label}\n                </ToggleButtonLabel>\n\n                {isLoading ? (\n                    <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n                ) : (\n                    <ViewMoreIcon aria-hidden />\n                )}\n            </ToggleButton>\n        );\n    };\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: resizeDetector.height,\n    });\n\n    return (\n        <>\n            <Expandable style={expandableStyles} data-testid=\"content\">\n                <ExpandableChild ref={childRef}>\n                    <LinkListItems\n                        data-testid=\"link-list-items\"\n                        items={items}\n                        handleItemClick={handleListItemClick}\n                        style={style}\n                    />\n                </ExpandableChild>\n            </Expandable>\n            {loadMore && renderToggle()}\n        </>\n    );\n};\n"],"names":["LazyLinkList","items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","Expandable","ExpandableChild","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","ToggleButton","type","$loading","ToggleButtonLabel","forwardedAs","weight","ComponentLoadingSpinner","color","Colour","ViewMoreIcon","renderToggle"],"mappings":"o7BAuBO,MAAMA,EAAe,EACxBC,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,GAAS,GAErCC,EAAiBC,IACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,OAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAqCMS,EAAmBC,EAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,eACIC,EAACC,GAAWpB,MAAOe,EAAgB,cAAc,mBAC7CI,EAACE,GAAgBV,IAAKD,EAAQY,SAC1BH,EAACI,EAAa,CAAA,cACE,kBACZxB,MAAOA,EACPyB,gBA7EQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNxB,IACPwB,EAAMG,iBACN3B,EAAYyB,EAAMD,GACtB,EAgEgBzB,MAAOA,QAIlBE,GAhDY,MACjB,MAAM2B,EAAQxB,EACR,cACAD,aAAY,EAAZA,EAAc0B,WAAY,YAEhC,OACIZ,EAACa,EAAY,CACTC,KAAK,SACLL,QAASf,EAAmB,cAChB,gBAAe,gBACZP,EAAS4B,SACd5B,EAASiB,SAAA,CAEnBH,EAACe,EAAiB,CACdC,YAAY,OACZC,OAAO,yBACK,sBAAqB,YACtB/B,EAASiB,SAEnBO,IAGJxB,EACGc,EAACkB,EAAuB,CAACC,MAAOC,EAAO,mBAEvCpB,EAACqB,EAAY,CAAA,eAAA,MAEN,EAqBFC,KACd"}
+{"version":3,"file":"link-list-lazy.js","sources":["../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport type {\n    BaseProps,\n    LinkListItemProps,\n    LinkListLazyProps,\n} from \"../internal-types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<BaseProps<T>, \"className\" | \"data-testid\"> &\n    Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n    items,\n    style,\n    onItemClick,\n    loadMore,\n    onLoadMore,\n    customLabels,\n}: Props<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [isLoading, setIsLoading] = useState(false);\n\n    const resizeDetector = useResizeDetector();\n    const childRef = resizeDetector.ref;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: LinkListItemProps<T>\n    ) => {\n        /**\n         * Individual item's onClick will override\n         * the onItemClick callback\n         */\n        if (item.onClick) {\n            event.preventDefault();\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item, event);\n        }\n\n        // Do nothing and let default event happen\n    };\n\n    const handleClickViewMore = async () => {\n        if (isLoading) return;\n\n        setIsLoading(true);\n        try {\n            await onLoadMore();\n        } catch {\n            // do nothing\n        }\n        setIsLoading(false);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderToggle = () => {\n        const label = isLoading\n            ? \"Loading...\"\n            : customLabels?.viewMore || \"View more\";\n\n        return (\n            <button\n                type=\"button\"\n                onClick={handleClickViewMore}\n                data-testid=\"toggle-button\"\n                aria-disabled={isLoading}\n                className={clsx(\n                    styles.toggleButton,\n                    isLoading && styles.toggleButtonLoading\n                )}\n            >\n                <Typography.BodyMD\n                    as=\"span\"\n                    weight=\"semibold\"\n                    data-testid=\"toggle-button-label\"\n                    aria-busy={isLoading}\n                    className={styles.toggleButtonLabel}\n                >\n                    {label}\n                </Typography.BodyMD>\n\n                {isLoading ? (\n                    <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n                ) : (\n                    <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n                )}\n            </button>\n        );\n    };\n\n    // React spring animation configuration\n    const expandableStyles = useSpring({\n        height: resizeDetector.height,\n    });\n\n    return (\n        <>\n            <animated.div\n                style={expandableStyles}\n                data-testid=\"content\"\n                className={styles.expandable}\n            >\n                <div ref={childRef}>\n                    <LinkListItems\n                        data-testid=\"link-list-items\"\n                        items={items}\n                        handleItemClick={handleListItemClick}\n                        style={style}\n                    />\n                </div>\n            </animated.div>\n            {loadMore && renderToggle()}\n        </>\n    );\n};\n"],"names":["LazyLinkList","items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","animated","div","className","styles.expandable","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","type","clsx","styles.toggleButton","styles.toggleButtonLoading","Typography","BodyMD","as","weight","styles.toggleButtonLabel","ComponentLoadingSpinner","color","Colour","PlusIcon","styles.toggleButtonIcon","renderToggle"],"mappings":"msCAoBO,MAAMA,EAAe,EACxBC,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,GAAS,GAErCC,EAAiBC,IACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,OAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAyCMS,EAAmBC,EAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,eACIC,EAACC,EAASC,IAAG,CACTrB,MAAOe,EAAgB,cACX,UACZO,UAAWC,WAEXJ,EAAA,MAAA,CAAKR,IAAKD,EAAQc,SACdL,EAACM,EAAa,CAAA,cACE,kBACZ1B,MAAOA,EACP2B,gBArFQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACN1B,IACP0B,EAAMG,iBACN7B,EAAY2B,EAAMD,GACtB,EAwEgB3B,MAAOA,QAIlBE,GAxDY,MACjB,MAAM6B,EAAQ1B,EACR,cACAD,aAAY,EAAZA,EAAc4B,WAAY,YAEhC,OACId,EAAA,SAAA,CACIe,KAAK,SACLJ,QAASjB,EAAmB,cAChB,gCACGP,EACfiB,UAAWY,EACPC,EACA9B,GAAa+B,aAGjBjB,EAACkB,EAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBAAqB,YACtBnC,EACXiB,UAAWmB,WAEVV,IAGJ1B,EACGc,EAACuB,EAAuB,CAACC,MAAOC,EAAO,mBAEvCzB,EAAC0B,oBAAqBvB,UAAWwB,MAEhC,EAyBIC,KACd"}

package/link-list/link-list.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"../_virtual/_tslib.js";import{jsx as e,Fragment as t}from"react/jsx-runtime";import{EagerLinkList as s}from"./components/link-list-eager.js";import{LazyLinkList as l}from"./components/link-list-lazy.js";import{Container as m}from"./link-list.styles.js";const a=a=>{if(!a.loadMode||"eager"===a.loadMode){const{loadMode:t,items:l,style:i="default",onItemClick:n,maxShown:r,customLabels:d}=a,c=o(a,["loadMode","items","style","onItemClick","maxShown","customLabels"]);return e(m,Object.assign({},c,{children:e(s,{items:l,maxShown:r,style:i,onItemClick:n,customLabels:d})}))}if("lazy"===a.loadMode){const{loadMode:t,items:s,style:i="default",onItemClick:n,loadMore:r,onLoadMore:d,customLabels:c}=a,u=o(a,["loadMode","items","style","onItemClick","loadMore","onLoadMore","customLabels"]);return e(m,Object.assign({},u,{children:e(l,{items:s,style:i,onItemClick:n,loadMore:r,onLoadMore:d,customLabels:c})}))}return e(t,{})};export{a as LinkList};
+import{__rest as o}from"../_virtual/_tslib.js";import{jsx as e,Fragment as s}from"react/jsx-runtime";import t from"clsx";import{EagerLinkList as l}from"./components/link-list-eager.js";import{LazyLinkList as a}from"./components/link-list-lazy.js";import{container as m}from"./link-list.styles.js";const i=i=>{if(!i.loadMode||"eager"===i.loadMode){const{loadMode:s,items:a,style:r="default",onItemClick:n,maxShown:c,customLabels:d,className:u}=i,M=o(i,["loadMode","items","style","onItemClick","maxShown","customLabels","className"]);return e("div",Object.assign({},M,{className:t(m,u),children:e(l,{items:a,maxShown:c,style:r,onItemClick:n,customLabels:d})}))}if("lazy"===i.loadMode){const{loadMode:s,items:l,style:r="default",onItemClick:n,loadMore:c,onLoadMore:d,customLabels:u,className:M}=i,f=o(i,["loadMode","items","style","onItemClick","loadMore","onLoadMore","customLabels","className"]);return e("div",Object.assign({},f,{className:t(m,M),children:e(a,{items:l,style:r,onItemClick:n,loadMore:c,onLoadMore:d,customLabels:u})}))}return e(s,{})};export{i as LinkList};
 //# sourceMappingURL=link-list.js.map

package/link-list/link-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.js","sources":["../../src/link-list/link-list.tsx"],"sourcesContent":["import { EagerLinkList } from \"./components/link-list-eager\";\nimport { LazyLinkList } from \"./components/link-list-lazy\";\nimport { Container } from \"./link-list.styles\";\nimport type { LinkListProps } from \"./types\";\n\nexport const LinkList = <T,>(props: LinkListProps<T>): JSX.Element => {\n    if (!props.loadMode || props.loadMode === \"eager\") {\n        const {\n            loadMode: _loadMode,\n            items,\n            style = \"default\",\n            onItemClick,\n            maxShown,\n            customLabels,\n            ...otherProps\n        } = props;\n\n        return (\n            <Container {...otherProps}>\n                <EagerLinkList\n                    items={items}\n                    maxShown={maxShown}\n                    style={style}\n                    onItemClick={onItemClick}\n                    customLabels={customLabels}\n                />\n            </Container>\n        );\n    }\n    if (props.loadMode === \"lazy\") {\n        {\n            const {\n                loadMode: _loadMode,\n                items,\n                style = \"default\",\n                onItemClick,\n                loadMore,\n                onLoadMore,\n                customLabels,\n                ...otherProps\n            } = props;\n\n            return (\n                <Container {...otherProps}>\n                    <LazyLinkList\n                        items={items}\n                        style={style}\n                        onItemClick={onItemClick}\n                        loadMore={loadMore}\n                        onLoadMore={onLoadMore}\n                        customLabels={customLabels}\n                    />\n                </Container>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["LinkList","props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","otherProps","__rest","_jsx","Container","Object","assign","children","EagerLinkList","loadMore","onLoadMore","LazyLinkList"],"mappings":"qRAKO,MAAMA,EAAgBC,IACzB,IAAKA,EAAMC,UAA+B,UAAnBD,EAAMC,SAAsB,CAC/C,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWC,SACXA,EAAQC,aACRA,GAEAP,EADGQ,EAAUC,EACbT,EARE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,iBAUN,OACIU,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKL,EAAU,CAAAM,SACrBJ,EAACK,EAAa,CACVZ,MAAOA,EACPG,SAAUA,EACVF,MAAOA,EACPC,YAAaA,EACbE,aAAcA,MAI9B,CACA,GAAuB,SAAnBP,EAAMC,SACN,CACI,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWW,SACXA,EAAQC,WACRA,EAAUV,aACVA,GAEAP,EADGQ,EAAUC,EACbT,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,iBAWN,OACIU,EAACC,EAASC,OAAAC,OAAA,CAAA,EAAKL,EAAU,CAAAM,SACrBJ,EAACQ,EAAY,CACTf,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbW,SAAUA,EACVC,WAAYA,EACZV,aAAcA,MAI9B,CAGJ,OAAOG,OAAK"}
+{"version":3,"file":"link-list.js","sources":["../../src/link-list/link-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { EagerLinkList } from \"./components/link-list-eager\";\nimport { LazyLinkList } from \"./components/link-list-lazy\";\nimport * as styles from \"./link-list.styles\";\nimport type { LinkListProps } from \"./types\";\n\nexport const LinkList = <T,>(props: LinkListProps<T>): JSX.Element => {\n    if (!props.loadMode || props.loadMode === \"eager\") {\n        const {\n            loadMode: _loadMode,\n            items,\n            style = \"default\",\n            onItemClick,\n            maxShown,\n            customLabels,\n            className,\n            ...otherProps\n        } = props;\n\n        return (\n            <div {...otherProps} className={clsx(styles.container, className)}>\n                <EagerLinkList\n                    items={items}\n                    maxShown={maxShown}\n                    style={style}\n                    onItemClick={onItemClick}\n                    customLabels={customLabels}\n                />\n            </div>\n        );\n    }\n    if (props.loadMode === \"lazy\") {\n        {\n            const {\n                loadMode: _loadMode,\n                items,\n                style = \"default\",\n                onItemClick,\n                loadMore,\n                onLoadMore,\n                customLabels,\n                className,\n                ...otherProps\n            } = props;\n\n            return (\n                <div\n                    {...otherProps}\n                    className={clsx(styles.container, className)}\n                >\n                    <LazyLinkList\n                        items={items}\n                        style={style}\n                        onItemClick={onItemClick}\n                        loadMore={loadMore}\n                        onLoadMore={onLoadMore}\n                        customLabels={customLabels}\n                    />\n                </div>\n            );\n        }\n    }\n\n    return <></>;\n};\n"],"names":["LinkList","props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","EagerLinkList","loadMore","onLoadMore","children","LazyLinkList"],"mappings":"ySAOO,MAAMA,EAAgBC,IACzB,IAAKA,EAAMC,UAA+B,UAAnBD,EAAMC,SAAsB,CAC/C,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWC,SACXA,EAAQC,aACRA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,EACbV,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,eAAA,cAWN,OACIW,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,GAAYD,UAAWM,EAAKC,EAAkBP,YACnDG,EAACK,GACGb,MAAOA,EACPG,SAAUA,EACVF,MAAOA,EACPC,YAAaA,EACbE,aAAcA,MAI9B,CACA,GAAuB,SAAnBP,EAAMC,SACN,CACI,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWY,SACXA,EAAQC,WACRA,EAAUX,aACVA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,EACbV,EAVE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,eAAA,cAYN,OACIW,yBACQF,EAAU,CACdD,UAAWM,EAAKC,EAAkBP,GAAUW,SAE5CR,EAACS,EAAY,CACTjB,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbY,SAAUA,EACVC,WAAYA,EACZX,aAAcA,MAI9B,CAGJ,OAAOI,OAAK"}

package/link-list/link-list.styles.d.ts

@@ -1,43 +1,13 @@
-interface ExpandableChildStyleProps {
-    $border?: boolean;
-}
-interface ToggleButtonStyleProps {
-    $loading?: boolean;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ItemTitleDefault: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, never>> & string;
-export declare const ItemTitleSmall: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, never>> & string;
-export declare const ItemIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-export declare const ItemContentContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Expandable: import("@react-spring/web").AnimatedComponent<import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string>;
-export declare const ExpandableChild: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ExpandableChildStyleProps>> & string;
-export declare const ToggleButtonLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const ViewMoreIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ViewLessIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ToggleButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ToggleButtonStyleProps>> & string;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const itemIcon: import("@linaria/core").LinariaClassName;
+export declare const itemTitleDefault: import("@linaria/core").LinariaClassName;
+export declare const itemTitleSmall: import("@linaria/core").LinariaClassName;
+export declare const itemContainer: import("@linaria/core").LinariaClassName;
+export declare const itemContentContainer: import("@linaria/core").LinariaClassName;
+export declare const itemDescription: import("@linaria/core").LinariaClassName;
+export declare const expandable: import("@linaria/core").LinariaClassName;
+export declare const expandableList: import("@linaria/core").LinariaClassName;
+export declare const toggleButtonLabel: import("@linaria/core").LinariaClassName;
+export declare const toggleButtonIcon: import("@linaria/core").LinariaClassName;
+export declare const toggleButton: import("@linaria/core").LinariaClassName;
+export declare const toggleButtonLoading: import("@linaria/core").LinariaClassName;

package/link-list/link-list.styles.js

@@ -1,90 +1,2 @@
-import{ChevronRightIcon as r}from"@lifesg/react-icons/chevron-right";import{MinusIcon as o}from"@lifesg/react-icons/minus";import{PlusIcon as e}from"@lifesg/react-icons/plus";import{animated as t}from"@react-spring/web";import i,{css as d}from"styled-components";import{Typography as n}from"../typography/index.js";import{V3_Colour as m,V3_Border as $}from"../v3_theme/index.js";const l=d`
-    height: 1.125rem;
-    width: 1.125rem;
-    color: ${m["icon-primary"]};
-`,a=i.div`
-    border-top: ${$["width-010"]} ${$.solid} ${m.border};
-    border-bottom: ${$["width-010"]} ${$.solid}
-        ${m.border};
-`,c=i(n.HeadingSM)`
-    color: ${m["text-primary"]};
-    margin-bottom: 0.5rem;
-`,s=i(n.HeadingXS)`
-    color: ${m["text-primary"]};
-`,p=i(r)`
-    ${l}
-`,g=i.a`
-    padding: 1rem 0;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    min-height: 4rem;
-
-    &:not(:last-of-type) {
-        border-bottom: ${$["width-010"]} ${$.solid}
-            ${m.border};
-    }
-
-    &:hover {
-        ${c},
-        ${s},
-        ${p} {
-            color: ${m["text-hover"]};
-        }
-    }
-`,f=i.div`
-    display: flex;
-    flex-direction: column;
-    flex: 1;
-    margin-right: 1rem;
-`,h=i(n.BodyMD)`
-    margin-top: 0.25rem;
-`,b=t(i.div`
-    overflow: hidden;
-`),x=i.div`
-    ${r=>r.$border&&d`
-            border-top: ${$["width-010"]} ${$.solid}
-                ${m.border};
-        `}
-`,y=i(n.BodyMD)`
-    color: ${m["text-primary"]};
-`,v=i(e)`
-    ${l}
-`,u=i(o)`
-    ${l}
-`,w=i.button`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    padding: 1rem 0;
-    border: none;
-    background: none;
-    cursor: pointer;
-    border-top: ${$["width-010"]} ${$.solid} ${m.border};
-    gap: 1rem;
-
-    ${r=>r.$loading&&d`
-            cursor: default;
-            flex-direction: row-reverse;
-
-            ${y},
-            ${v},
-            ${u} {
-                color: ${m["text-disabled"]};
-                text-decoration: none;
-            }
-        `}
-
-    ${r=>!r.$loading&&d`
-            &:hover {
-                ${y},
-                ${v},
-                ${u} {
-                    color: ${m["text-hover"]};
-                    text-decoration: underline;
-                }
-            }
-        `}
-`;export{a as Container,h as Description,b as Expandable,x as ExpandableChild,g as ItemContainer,f as ItemContentContainer,p as ItemIcon,c as ItemTitleDefault,s as ItemTitleSmall,w as ToggleButton,y as ToggleButtonLabel,u as ViewLessIcon,v as ViewMoreIcon};
+import"./link-list.styles_1g33nb4.css";const i="cfblyzz",t="iejabo3",s="ixxi28v",l="ia0puf0",e="i191w9a9",c="i1ek9mgx",o="i6tq5i6",p="e1p9oc1w",b="e1hdpk7s",k="tjt90m3",n="t1quebcu",x="t1l68ils",_="t5821wq";export{i as container,p as expandable,b as expandableList,e as itemContainer,c as itemContentContainer,o as itemDescription,t as itemIcon,s as itemTitleDefault,l as itemTitleSmall,x as toggleButton,n as toggleButtonIcon,k as toggleButtonLabel,_ as toggleButtonLoading};
 //# sourceMappingURL=link-list.styles.js.map

package/link-list/link-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"link-list.styles.js","sources":["../../src/link-list/link-list.styles.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated } from \"@react-spring/web\";\nimport styled, { css } from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport { V3_Border, V3_Colour } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface ExpandableChildStyleProps {\n    $border?: boolean;\n}\n\ninterface ToggleButtonStyleProps {\n    $loading?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst iconStyle = css`\n    height: 1.125rem;\n    width: 1.125rem;\n    color: ${V3_Colour[\"icon-primary\"]};\n`;\n\nexport const Container = styled.div`\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour.border};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour.border};\n`;\n\nexport const ItemTitleDefault = styled(Typography.HeadingSM)`\n    color: ${V3_Colour[\"text-primary\"]};\n    margin-bottom: 0.5rem;\n`;\n\nexport const ItemTitleSmall = styled(Typography.HeadingXS)`\n    color: ${V3_Colour[\"text-primary\"]};\n`;\n\nexport const ItemIcon = styled(ChevronRightIcon)`\n    ${iconStyle}\n`;\n\nexport const ItemContainer = styled.a`\n    padding: 1rem 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 4rem;\n\n    &:not(:last-of-type) {\n        border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n            ${V3_Colour.border};\n    }\n\n    &:hover {\n        ${ItemTitleDefault},\n        ${ItemTitleSmall},\n        ${ItemIcon} {\n            color: ${V3_Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const ItemContentContainer = styled.div`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin-right: 1rem;\n`;\n\nexport const Description = styled(Typography.BodyMD)`\n    margin-top: 0.25rem;\n`;\n\nexport const Expandable = animated(styled.div`\n    overflow: hidden;\n`);\n\nexport const ExpandableChild = styled.div<ExpandableChildStyleProps>`\n    ${(props) =>\n        props.$border &&\n        css`\n            border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n                ${V3_Colour.border};\n        `}\n`;\n\nexport const ToggleButtonLabel = styled(Typography.BodyMD)`\n    color: ${V3_Colour[\"text-primary\"]};\n`;\n\nexport const ViewMoreIcon = styled(PlusIcon)`\n    ${iconStyle}\n`;\nexport const ViewLessIcon = styled(MinusIcon)`\n    ${iconStyle}\n`;\n\nexport const ToggleButton = styled.button<ToggleButtonStyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 1rem 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-top: ${V3_Border[\"width-010\"]} ${V3_Border.solid} ${V3_Colour.border};\n    gap: 1rem;\n\n    ${(props) =>\n        props.$loading &&\n        css`\n            cursor: default;\n            flex-direction: row-reverse;\n\n            ${ToggleButtonLabel},\n            ${ViewMoreIcon},\n            ${ViewLessIcon} {\n                color: ${V3_Colour[\"text-disabled\"]};\n                text-decoration: none;\n            }\n        `}\n\n    ${(props) =>\n        !props.$loading &&\n        css`\n            &:hover {\n                ${ToggleButtonLabel},\n                ${ViewMoreIcon},\n                ${ViewLessIcon} {\n                    color: ${V3_Colour[\"text-hover\"]};\n                    text-decoration: underline;\n                }\n            }\n        `}\n`;\n"],"names":["iconStyle","css","V3_Colour","Container","styled","div","V3_Border","solid","border","ItemTitleDefault","Typography","HeadingSM","ItemTitleSmall","HeadingXS","ItemIcon","ChevronRightIcon","ItemContainer","a","ItemContentContainer","Description","BodyMD","Expandable","animated","ExpandableChild","props","$border","ToggleButtonLabel","ViewMoreIcon","PlusIcon","ViewLessIcon","MinusIcon","ToggleButton","button","$loading"],"mappings":"2XAwBA,MAAMA,EAAYC,CAAG;;;aAGRC,EAAU;EAGVC,EAAYC,EAAOC,GAAG;kBACjBC,EAAU,gBAAgBA,EAAUC,SAASL,EAAUM;qBACpDF,EAAU,gBAAgBA,EAAUC;UAC/CL,EAAUM;EAGPC,EAAmBL,EAAOM,EAAWC,UAAU;aAC/CT,EAAU;;EAIVU,EAAiBR,EAAOM,EAAWG,UAAU;aAC7CX,EAAU;EAGVY,EAAWV,EAAOW,EAAiB;MAC1Cf;EAGOgB,EAAgBZ,EAAOa,CAAC;;;;;;;;yBAQZX,EAAU,gBAAgBA,EAAUC;cAC/CL,EAAUM;;;;UAIdC;UACAG;UACAE;qBACWZ,EAAU;;;EAKlBgB,EAAuBd,EAAOC,GAAG;;;;;EAOjCc,EAAcf,EAAOM,EAAWU,OAAO;;EAIvCC,EAAaC,EAASlB,EAAOC,GAAG;;GAIhCkB,EAAkBnB,EAAOC,GAA8B;MAC7DmB,GACCA,EAAMC,SACNxB,CAAG;0BACeK,EAAU,gBAAgBA,EAAUC;kBAC5CL,EAAUM;;EAIfkB,EAAoBtB,EAAOM,EAAWU,OAAO;aAC7ClB,EAAU;EAGVyB,EAAevB,EAAOwB,EAAS;MACtC5B;EAEO6B,EAAezB,EAAO0B,EAAU;MACvC9B;EAGO+B,EAAe3B,EAAO4B,MAA8B;;;;;;;;;kBAS/C1B,EAAU,gBAAgBA,EAAUC,SAASL,EAAUM;;;MAGlEgB,GACCA,EAAMS,UACNhC,CAAG;;;;cAIGyB;cACAC;cACAE;yBACW3B,EAAU;;;;;MAK5BsB,IACEA,EAAMS,UACPhC,CAAG;;kBAEOyB;kBACAC;kBACAE;6BACW3B,EAAU;;;;;"}
+{"version":3,"file":"link-list.styles.js","sources":["../../src/link-list/link-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour } from \"../theme\";\n\nexport const container = css`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\n// =============================================================================\n// ITEM STYLES\n// =============================================================================\nexport const itemIcon = css`\n    height: 1.125rem;\n    width: 1.125rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const itemTitleDefault = css`\n    color: ${Colour[\"text-primary\"]};\n    margin-bottom: 0.5rem;\n`;\n\nexport const itemTitleSmall = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const itemContainer = css`\n    padding: 1rem 0;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    min-height: 4rem;\n\n    &:not(:last-of-type) {\n        border-bottom: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    }\n\n    &:hover {\n        .${itemTitleDefault}, .${itemTitleSmall}, .${itemIcon} {\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\nexport const itemContentContainer = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n    margin-right: 1rem;\n`;\n\nexport const itemDescription = css`\n    margin-top: 0.25rem;\n`;\n\n// =============================================================================\n// TOGGLE STYLES\n// =============================================================================\nexport const expandable = css`\n    overflow: hidden;\n`;\n\nexport const expandableList = css`\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n`;\n\nexport const toggleButtonLabel = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const toggleButtonIcon = css`\n    height: 1.125rem;\n    width: 1.125rem;\n    color: ${Colour[\"icon-primary\"]};\n`;\n\nexport const toggleButton = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    width: 100%;\n    padding: 1rem 0;\n    border: none;\n    background: none;\n    cursor: pointer;\n    border-top: ${Border[\"width-010\"]} ${Border.solid} ${Colour.border};\n    gap: 1rem;\n\n    &:hover {\n        .${toggleButtonLabel}, .${toggleButtonIcon} {\n            color: ${Colour[\"text-hover\"]};\n            text-decoration: underline;\n        }\n    }\n`;\n\nexport const toggleButtonLoading = css`\n    cursor: default;\n    flex-direction: row-reverse;\n\n    .${toggleButtonLabel}, .${toggleButtonIcon} {\n        color: ${Colour[\"text-disabled\"]};\n        text-decoration: none;\n    }\n\n    &:hover {\n        .${toggleButtonLabel}, .${toggleButtonIcon} {\n            color: ${Colour[\"text-disabled\"]};\n            text-decoration: none;\n        }\n    }\n`;\n"],"names":["container","itemIcon","itemTitleDefault","itemTitleSmall","itemContainer","itemContentContainer","itemDescription","expandable","expandableList","toggleButtonLabel","toggleButtonIcon","toggleButton","toggleButtonLoading"],"mappings":"gEAIO,MAAMA,EAAS,UAQTC,EAAQ,UAMRC,EAAgB,UAKhBC,EAAc,UAIdC,EAAa,WAkBbC,EAAoB,WAOpBC,EAAe,UAOfC,EAAU,WAIVC,EAAc,WAIdC,EAAiB,UAIjBC,EAAgB,WAMhBC,EAAY,WAoBZC,EAAmB"}

package/link-list/link-list.styles_1g33nb4.css

@@ -0,0 +1,13 @@
+.cfblyzz{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.iejabo3{height:1.125rem;width:1.125rem;color:var(--fds-colour-icon-primary);}
+.ixxi28v{color:var(--fds-colour-text-primary);margin-bottom:0.5rem;}
+.ia0puf0{color:var(--fds-colour-text-primary);}
+.i191w9a9{padding:1rem 0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;min-height:4rem;}.i191w9a9:not(:last-of-type){border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}.i191w9a9:hover .ixxi28v,.i191w9a9:hover .ia0puf0,.i191w9a9:hover .iejabo3{color:var(--fds-colour-text-hover);}
+.i1ek9mgx{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;margin-right:1rem;}
+.i6tq5i6{margin-top:0.25rem;}
+.e1p9oc1w{overflow:hidden;}
+.e1hdpk7s{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.tjt90m3{color:var(--fds-colour-text-primary);}
+.t1quebcu{height:1.125rem;width:1.125rem;color:var(--fds-colour-icon-primary);}
+.t1l68ils{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:1rem 0;border:none;background:none;cursor:pointer;border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);gap:1rem;}.t1l68ils:hover .tjt90m3,.t1l68ils:hover .t1quebcu{color:var(--fds-colour-text-hover);-webkit-text-decoration:underline;text-decoration:underline;}
+.t5821wq{cursor:default;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}.t5821wq .tjt90m3,.t5821wq .t1quebcu{color:var(--fds-colour-text-disabled);-webkit-text-decoration:none;text-decoration:none;}.t5821wq:hover .tjt90m3,.t5821wq:hover .t1quebcu{color:var(--fds-colour-text-disabled);-webkit-text-decoration:none;text-decoration:none;}

package/local-nav/local-nav-dropdown/local-nav-dropdown.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import r,{useRef as i,useState as o,useImperativeHandle as d,useEffect as s}from"react";import{Typography as l}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import{NavWrapper as a,NavSelect as m,NavSelectIcon as u,NavItemList as p,Backdrop as w,NavItem as f,StyledTickIcon as h,NavItemLabel as v}from"./local-nav-dropdown.styles.js";const y=r.forwardRef((({defaultLabel:r,stickyOffset:y=0,onNavItemSelect:x,items:k,selectedItemIndex:D,id:$,"data-testid":E,className:I,renderItem:L},j)=>{const C=i(null),S=i(null),B=i(null),z=i([]),[A,H]=o(!1),[K,M]=o(!1),[N,O]=o(0),[R,T]=o(0),[W,U]=o(0),[q,F]=o(0),G=E||"local-nav-dropdown",[J]=o((()=>c.generate()));d(j,(()=>B.current));const P="number"==typeof D&&D>=0&&A?k[D].title:r;s((()=>{if(S.current){const e=S.current.getBoundingClientRect().height;T(e)}}),[]),s((()=>(Q(),()=>{V("remove")})),[]),s((()=>{V(K&&A?"add":"remove")}),[K,A]),s((()=>{O(window.innerHeight);const e=()=>{O(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),s((()=>{const e=new IntersectionObserver((e=>{const[t]=e;H(!t.isIntersecting)}),{threshold:1,rootMargin:`-${y}px 0px 0px 0px`});return C.current&&e.observe(C.current),()=>e.disconnect()}),[y]),s((()=>{const e=()=>{const e=null==B?void 0:B.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,i=Math.max(n,r);U(i)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),s((()=>{var e;K&&(null===(e=z.current[q])||void 0===e||e.focus())}),[K,q]);const Q=()=>{if(!document.getElementById(g)){const e=document.createElement("style");e.id=g;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${b} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${b}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},V=e=>{const t=document.body.classList.contains(b);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(b):document.body.classList.add(b)},X=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e(t,{children:[n("span",{ref:C,"data-testid":"sticky-ref"}),e(a,{$isStickied:A,$sideMargin:W,$stickyOffset:y,ref:B,id:$,"data-testid":G,className:I,children:[e(m,{ref:S,role:"button",onClick:()=>{M((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),K||M(!0),F(0)):"ArrowUp"===t?(e.preventDefault(),K||M(!0),F(k.length-1)):"Enter"===t||" "===t?(e.preventDefault(),M(!0),F(0)):("Tab"===t||"Escape"===t)&&M(!1)},"data-testid":`${G}-label`,$isDropdownExpanded:K,"aria-haspopup":"true","aria-expanded":K,"aria-controls":J,tabIndex:0,children:[n(l.BodyBL,{weight:"semibold",children:P}),n(u,{$isDropdownExpanded:K})]}),K&&n(p,{id:J,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(q+1)%k.length;F(t)}else if("ArrowUp"===n){e.preventDefault();const t=q>0?q-1:k.length-1;F(t)}else"Tab"===n?M(!1):"Escape"===n&&(M(!1),null===(t=S.current)||void 0===t||t.focus())},"data-testid":`${G}-dropdown-list`,$viewportHeight:N-R-y,children:k.map(((t,r)=>(({handleClick:t,isSelected:r,item:i,renderItem:o,index:d})=>{const{id:s,title:l}=i;return o?n("li",{id:s,role:"menuitem",onClick:t,onKeyDown:e=>X(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{z.current[d]=e},children:o(i,{selected:r,stickied:A})},d):e(f,{id:s,role:"menuitem",$isSelected:r&&A,onClick:t,onKeyDown:e=>X(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{z.current[d]=e},children:[r&&n(h,{}),n(v,{$isSelected:r,children:l})]},d)})({handleClick:e=>((e,t,n)=>{x&&x(e,t,n),M(!1)})(e,t,r),isSelected:r===D,item:t,renderItem:L,index:r})))}),K&&A&&n(w,{onClick:()=>{M(!1)}})]})]})})),g="lifesg-ds-local-nav-dropdown-stylesheet",b="lifesg-ds-local-nav-dropdown-open";export{y as LocalNavDropdown};
+import{jsxs as e,Fragment as t,jsx as n}from"react/jsx-runtime";import{ChevronDownIcon as r}from"@lifesg/react-icons/chevron-down";import{TickIcon as o}from"@lifesg/react-icons/tick";import i from"clsx";import s,{useRef as d,useState as l,useImperativeHandle as a,useEffect as c}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as m}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{Typography as p}from"../../typography/index.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{useId as u}from"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{tokens as h,navSelectIcon as f,navSelectIconExpanded as v,navSelect as w,navSelectExpanded as y,navItemList as g,backdrop as x,navWrapper as b,navWrapperStickied as k,tickIcon as j,navItemLabel as I,navItemLabelSelected as D,navItem as E,navItemSelected as L}from"./local-nav-dropdown.styles.js";const N=s.forwardRef((({defaultLabel:s,stickyOffset:N=0,onNavItemSelect:B,items:W,selectedItemIndex:z,id:A,"data-testid":H,className:K,renderItem:M},O)=>{const R=d(null),S=d(null),T=d(null),q=d(null),U=d([]),[F,G]=l(!1),[J,P]=l(!1),[Q,V]=l(0),[X,Y]=l(0),[Z,_]=l(0),[ee,te]=l(0),ne=H||"local-nav-dropdown",re=u();a(O,(()=>T.current)),m(T,{[h.navWrapper.stickyOffset]:`${N}px`,[h.navWrapper.sideMargin]:`${Z}px`}),m(q,{[h.navItemList.viewportHeight]:Q-X-N+"px"});const oe="number"==typeof z&&z>=0&&F?W[z].title:s;c((()=>{if(S.current){const e=S.current.getBoundingClientRect().height;Y(e)}}),[]),c((()=>(ie(),()=>{se("remove")})),[]),c((()=>{se(J&&F?"add":"remove")}),[J,F]),c((()=>{V(window.innerHeight);const e=()=>{V(window.innerHeight)};return window.addEventListener("resize",e),()=>window.removeEventListener("resize",e)}),[]),c((()=>{const e=new IntersectionObserver((e=>{const[t]=e;G(!t.isIntersecting)}),{threshold:1,rootMargin:`-${N}px 0px 0px 0px`});return R.current&&e.observe(R.current),()=>e.disconnect()}),[N]),c((()=>{const e=()=>{const e=null==T?void 0:T.current;if(e){const t=e.getBoundingClientRect(),n=document.body.clientWidth-t.right,r=t.left,o=Math.max(n,r);_(o)}};return e(),window.addEventListener("resize",e),()=>{window.removeEventListener("resize",e)}}),[]),c((()=>{var e;J&&(null===(e=U.current[ee])||void 0===e||e.focus())}),[J,ee]);const ie=()=>{if(!document.getElementById(C)){const e=document.createElement("style");e.id=C;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${$} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${$}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},se=e=>{const t=document.body.classList.contains($);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove($):document.body.classList.add($)},de=(e,t)=>{const{key:n}=e;"Enter"!==n&&" "!==n||(e.preventDefault(),t(e))};return e(t,{children:[n("span",{ref:R,"data-testid":"sticky-ref"}),e("nav",{ref:T,id:A,"data-testid":ne,className:i(b,F&&k,K),children:[e("div",{ref:S,role:"button",onClick:()=>{P((e=>!e))},onKeyDown:e=>{const{key:t}=e;"ArrowDown"===t?(e.preventDefault(),J||P(!0),te(0)):"ArrowUp"===t?(e.preventDefault(),J||P(!0),te(W.length-1)):"Enter"===t||" "===t?(e.preventDefault(),P(!0),te(0)):("Tab"===t||"Escape"===t)&&P(!1)},"data-testid":`${ne}-label`,className:i(w,J&&y),"aria-haspopup":"true","aria-expanded":J,"aria-controls":re,tabIndex:0,children:[n(p.BodyBL,{weight:"semibold",children:oe}),n(r,{className:i(f,J&&v)})]}),J&&n("ul",{ref:q,id:re,role:"menu",onKeyDown:e=>{var t;const{key:n}=e;if("ArrowDown"===n){e.preventDefault();const t=(ee+1)%W.length;te(t)}else if("ArrowUp"===n){e.preventDefault();const t=ee>0?ee-1:W.length-1;te(t)}else"Tab"===n?P(!1):"Escape"===n&&(P(!1),null===(t=S.current)||void 0===t||t.focus())},"data-testid":`${ne}-dropdown-list`,className:g,children:W.map(((t,r)=>(({handleClick:t,isSelected:r,item:s,renderItem:d,index:l})=>{const{id:a,title:c}=s;return d?n("li",{id:a,role:"menuitem",onClick:t,onKeyDown:e=>de(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{U.current[l]=e},children:d(s,{selected:r,stickied:F})},l):e("li",{id:a,role:"menuitem",className:i(E,r&&F&&L),onClick:t,onKeyDown:e=>de(e,t),"aria-current":!!r||void 0,tabIndex:-1,ref:e=>{U.current[l]=e},children:[r&&n(o,{className:j}),n("div",{className:i(I,r&&D),children:c})]},l)})({handleClick:e=>((e,t,n)=>{B&&B(e,t,n),P(!1)})(e,t,r),isSelected:r===z,item:t,renderItem:M,index:r})))}),J&&F&&n("div",{className:x,onClick:()=>{P(!1)}})]})]})})),C="lifesg-ds-local-nav-dropdown-stylesheet",$="lifesg-ds-local-nav-dropdown-open";export{N as LocalNavDropdown};
 //# sourceMappingURL=local-nav-dropdown.js.map

package/local-nav/local-nav-dropdown/local-nav-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-dropdown.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport { SimpleIdGenerator } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport {\n    Backdrop,\n    NavItem,\n    NavItemLabel,\n    NavItemList,\n    NavSelect,\n    NavSelectIcon,\n    NavWrapper,\n    StyledTickIcon,\n} from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n    {\n        defaultLabel,\n        stickyOffset = 0,\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": testId,\n        className,\n        renderItem,\n    }: LocalNavDropdownProps,\n    ref: React.Ref<HTMLElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const detectStickyRef = useRef<HTMLSpanElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const navWrapperRef = useRef<HTMLElement>(null);\n    const listItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n    const [isStickied, setIsStickied] = useState<boolean>(false);\n    const [isDropdownExpanded, setIsDropdownExpanded] =\n        useState<boolean>(false);\n    const [viewportHeight, setViewportHeight] = useState(0);\n    const [dropdowntHeight, setDropdownHeight] = useState(0);\n    const [dynamicMargin, setDynamicMargin] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const navTestId = testId || \"local-nav-dropdown\";\n    const [dropdownListId] = useState(() => SimpleIdGenerator.generate());\n\n    useImperativeHandle(ref, () => navWrapperRef.current!);\n\n    const labelText =\n        typeof selectedItemIndex === \"number\" &&\n        selectedItemIndex >= 0 &&\n        isStickied\n            ? items[selectedItemIndex].title\n            : defaultLabel;\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n\n    useEffect(() => {\n        if (dropdownRef.current) {\n            const dropdownHeight =\n                dropdownRef.current.getBoundingClientRect().height;\n            setDropdownHeight(dropdownHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        return () => {\n            applyBodyStyleClass(\"remove\");\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded && isStickied) {\n            applyBodyStyleClass(\"add\");\n        } else {\n            applyBodyStyleClass(\"remove\");\n        }\n    }, [isDropdownExpanded, isStickied]);\n\n    useEffect(() => {\n        setViewportHeight(window.innerHeight);\n        const handleResize = () => {\n            setViewportHeight(window.innerHeight);\n        };\n        window.addEventListener(\"resize\", handleResize);\n        return () => window.removeEventListener(\"resize\", handleResize);\n    }, []);\n\n    useEffect(() => {\n        const callback = (entries: IntersectionObserverEntry[]) => {\n            const [entry] = entries;\n            setIsStickied(!entry.isIntersecting);\n        };\n\n        const observer = new IntersectionObserver(callback, {\n            threshold: 1,\n            rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n        });\n\n        if (detectStickyRef.current) {\n            observer.observe(detectStickyRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, [stickyOffset]);\n\n    useEffect(() => {\n        const adjustPadding = () => {\n            const dropdown = navWrapperRef?.current;\n            if (dropdown) {\n                const dropdownRect = dropdown.getBoundingClientRect();\n                const spaceToRight =\n                    document.body.clientWidth - dropdownRect.right;\n                const spaceToLeft = dropdownRect.left;\n                // Calculate the padding needed to balance the dropdown in the viewport\n                const sidePadding = Math.max(spaceToRight, spaceToLeft);\n                setDynamicMargin(sidePadding);\n            }\n        };\n        adjustPadding();\n\n        window.addEventListener(\"resize\", adjustPadding);\n\n        return () => {\n            window.removeEventListener(\"resize\", adjustPadding);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded) {\n            listItemRefs.current[focusedIndex]?.focus();\n        }\n    }, [isDropdownExpanded, focusedIndex]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            DROPDOWN_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleToggleDropdown = () => {\n        setIsDropdownExpanded((prev) => !prev);\n    };\n\n    const handleDismissBackdrop = () => {\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemClick = (\n        e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n        item: LocalNavItemProps,\n        index: number\n    ) => {\n        if (onNavItemSelect) {\n            onNavItemSelect(e, item, index);\n        }\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(0);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(items.length - 1);\n        } else if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            setIsDropdownExpanded(true);\n            setFocusedIndex(0);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n        }\n    };\n\n    const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            const nextIndex = (focusedIndex + 1) % items.length;\n            setFocusedIndex(nextIndex);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            const prevIndex =\n                focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n            setFocusedIndex(prevIndex);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n            dropdownRef.current?.focus();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDropdownNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavDropdownItemComponentProps) => {\n        const { id, title } = item;\n\n        if (renderItem) {\n            return (\n                <li\n                    id={id}\n                    key={index}\n                    role=\"menuitem\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    aria-current={isSelected ? true : undefined}\n                    tabIndex={-1}\n                    ref={(el) => {\n                        listItemRefs.current[index] = el;\n                    }}\n                >\n                    {renderItem(item, {\n                        selected: isSelected,\n                        stickied: isStickied,\n                    })}\n                </li>\n            );\n        }\n\n        return (\n            <NavItem\n                id={id}\n                key={index}\n                role=\"menuitem\"\n                $isSelected={isSelected && isStickied}\n                onClick={handleClick}\n                onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                aria-current={isSelected ? true : undefined}\n                tabIndex={-1}\n                ref={(el) => {\n                    listItemRefs.current[index] = el as HTMLLIElement;\n                }}\n            >\n                {isSelected && <StyledTickIcon />}\n                <NavItemLabel $isSelected={isSelected}>{title}</NavItemLabel>\n            </NavItem>\n        );\n    };\n\n    return (\n        <>\n            <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n            <NavWrapper\n                $isStickied={isStickied}\n                $sideMargin={dynamicMargin}\n                $stickyOffset={stickyOffset}\n                ref={navWrapperRef}\n                id={id}\n                data-testid={navTestId}\n                className={className}\n            >\n                <NavSelect\n                    ref={dropdownRef}\n                    role=\"button\"\n                    onClick={handleToggleDropdown}\n                    onKeyDown={handleNavSelectKeyDown}\n                    data-testid={`${navTestId}-label`}\n                    $isDropdownExpanded={isDropdownExpanded}\n                    aria-haspopup=\"true\"\n                    aria-expanded={isDropdownExpanded}\n                    aria-controls={dropdownListId}\n                    tabIndex={0}\n                >\n                    <Typography.BodyBL weight=\"semibold\">\n                        {labelText}\n                    </Typography.BodyBL>\n                    <NavSelectIcon $isDropdownExpanded={isDropdownExpanded} />\n                </NavSelect>\n                {isDropdownExpanded && (\n                    <NavItemList\n                        id={dropdownListId}\n                        role=\"menu\"\n                        onKeyDown={handleNavItemListKeyDown}\n                        data-testid={`${navTestId}-dropdown-list`}\n                        $viewportHeight={\n                            viewportHeight - dropdowntHeight - stickyOffset\n                        }\n                    >\n                        {items.map((item, i) =>\n                            renderDropdownNavItem({\n                                handleClick: (e) =>\n                                    handleNavItemClick(e, item, i),\n                                isSelected: i === selectedItemIndex,\n                                item,\n                                renderItem,\n                                index: i,\n                            })\n                        )}\n                    </NavItemList>\n                )}\n                {isDropdownExpanded && isStickied && (\n                    <Backdrop onClick={handleDismissBackdrop} />\n                )}\n            </NavWrapper>\n        </>\n    );\n};\n\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","SimpleIdGenerator","generate","useImperativeHandle","current","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","NavWrapper","$isStickied","$sideMargin","$stickyOffset","NavSelect","role","onClick","prev","onKeyDown","length","$isDropdownExpanded","tabIndex","Typography","BodyBL","weight","NavSelectIcon","NavItemList","nextIndex","prevIndex","$viewportHeight","map","item","i","isSelected","index","undefined","el","selected","stickied","NavItem","$isSelected","StyledTickIcon","NavItemLabel","renderDropdownNavItem","handleNavItemClick","Backdrop"],"mappings":"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"}
+{"version":3,"file":"local-nav-dropdown.js","sources":["../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n    {\n        defaultLabel,\n        stickyOffset = 0,\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": testId,\n        className,\n        renderItem,\n    }: LocalNavDropdownProps,\n    ref: React.Ref<HTMLElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const detectStickyRef = useRef<HTMLSpanElement>(null);\n    const dropdownRef = useRef<HTMLDivElement>(null);\n    const navWrapperRef = useRef<HTMLElement>(null);\n    const navItemListRef = useRef<HTMLUListElement>(null);\n    const listItemRefs = useRef<(HTMLLIElement | null)[]>([]);\n    const [isStickied, setIsStickied] = useState<boolean>(false);\n    const [isDropdownExpanded, setIsDropdownExpanded] =\n        useState<boolean>(false);\n    const [viewportHeight, setViewportHeight] = useState(0);\n    const [dropdowntHeight, setDropdownHeight] = useState(0);\n    const [dynamicMargin, setDynamicMargin] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const navTestId = testId || \"local-nav-dropdown\";\n    const dropdownListId = useId();\n\n    useImperativeHandle(ref, () => navWrapperRef.current!);\n\n    useApplyStyle(navWrapperRef, {\n        [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n        [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n    });\n\n    useApplyStyle(navItemListRef, {\n        [styles.tokens.navItemList.viewportHeight]: `${\n            viewportHeight - dropdowntHeight - stickyOffset\n        }px`,\n    });\n\n    const labelText =\n        typeof selectedItemIndex === \"number\" &&\n        selectedItemIndex >= 0 &&\n        isStickied\n            ? items[selectedItemIndex].title\n            : defaultLabel;\n\n    // =============================================================================\n    // EFFECTS, EVENT LISTENERS\n    // ============================================================================\n\n    useEffect(() => {\n        if (dropdownRef.current) {\n            const dropdownHeight =\n                dropdownRef.current.getBoundingClientRect().height;\n            setDropdownHeight(dropdownHeight);\n        }\n    }, []);\n\n    useEffect(() => {\n        addStylesheetForDocumentBody();\n        return () => {\n            applyBodyStyleClass(\"remove\");\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded && isStickied) {\n            applyBodyStyleClass(\"add\");\n        } else {\n            applyBodyStyleClass(\"remove\");\n        }\n    }, [isDropdownExpanded, isStickied]);\n\n    useEffect(() => {\n        setViewportHeight(window.innerHeight);\n        const handleResize = () => {\n            setViewportHeight(window.innerHeight);\n        };\n        window.addEventListener(\"resize\", handleResize);\n        return () => window.removeEventListener(\"resize\", handleResize);\n    }, []);\n\n    useEffect(() => {\n        const callback = (entries: IntersectionObserverEntry[]) => {\n            const [entry] = entries;\n            setIsStickied(!entry.isIntersecting);\n        };\n\n        const observer = new IntersectionObserver(callback, {\n            threshold: 1,\n            rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n        });\n\n        if (detectStickyRef.current) {\n            observer.observe(detectStickyRef.current);\n        }\n\n        return () => observer.disconnect();\n    }, [stickyOffset]);\n\n    useEffect(() => {\n        const adjustPadding = () => {\n            const dropdown = navWrapperRef?.current;\n            if (dropdown) {\n                const dropdownRect = dropdown.getBoundingClientRect();\n                const spaceToRight =\n                    document.body.clientWidth - dropdownRect.right;\n                const spaceToLeft = dropdownRect.left;\n                // Calculate the padding needed to balance the dropdown in the viewport\n                const sidePadding = Math.max(spaceToRight, spaceToLeft);\n                setDynamicMargin(sidePadding);\n            }\n        };\n        adjustPadding();\n\n        window.addEventListener(\"resize\", adjustPadding);\n\n        return () => {\n            window.removeEventListener(\"resize\", adjustPadding);\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isDropdownExpanded) {\n            listItemRefs.current[focusedIndex]?.focus();\n        }\n    }, [isDropdownExpanded, focusedIndex]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            DROPDOWN_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const handleToggleDropdown = () => {\n        setIsDropdownExpanded((prev) => !prev);\n    };\n\n    const handleDismissBackdrop = () => {\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemClick = (\n        e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,\n        item: LocalNavItemProps,\n        index: number\n    ) => {\n        if (onNavItemSelect) {\n            onNavItemSelect(e, item, index);\n        }\n        setIsDropdownExpanded(false);\n    };\n\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(0);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            if (!isDropdownExpanded) {\n                setIsDropdownExpanded(true);\n            }\n            setFocusedIndex(items.length - 1);\n        } else if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            setIsDropdownExpanded(true);\n            setFocusedIndex(0);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n        }\n    };\n\n    const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const { key } = e;\n\n        if (key === \"ArrowDown\") {\n            e.preventDefault();\n            const nextIndex = (focusedIndex + 1) % items.length;\n            setFocusedIndex(nextIndex);\n        } else if (key === \"ArrowUp\") {\n            e.preventDefault();\n            const prevIndex =\n                focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n            setFocusedIndex(prevIndex);\n        } else if (key === \"Tab\") {\n            setIsDropdownExpanded(false);\n        } else if (key === \"Escape\") {\n            setIsDropdownExpanded(false);\n            dropdownRef.current?.focus();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDropdownNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavDropdownItemComponentProps) => {\n        const { id, title } = item;\n\n        if (renderItem) {\n            return (\n                <li\n                    id={id}\n                    key={index}\n                    role=\"menuitem\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    aria-current={isSelected ? true : undefined}\n                    tabIndex={-1}\n                    ref={(el) => {\n                        listItemRefs.current[index] = el;\n                    }}\n                >\n                    {renderItem(item, {\n                        selected: isSelected,\n                        stickied: isStickied,\n                    })}\n                </li>\n            );\n        }\n\n        return (\n            <li\n                id={id}\n                key={index}\n                role=\"menuitem\"\n                className={clsx(\n                    styles.navItem,\n                    isSelected && isStickied && styles.navItemSelected\n                )}\n                onClick={handleClick}\n                onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                aria-current={isSelected ? true : undefined}\n                tabIndex={-1}\n                ref={(el) => {\n                    listItemRefs.current[index] = el as HTMLLIElement;\n                }}\n            >\n                {isSelected && <TickIcon className={styles.tickIcon} />}\n                <div\n                    className={clsx(\n                        styles.navItemLabel,\n                        isSelected && styles.navItemLabelSelected\n                    )}\n                >\n                    {title}\n                </div>\n            </li>\n        );\n    };\n\n    return (\n        <>\n            <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n            <nav\n                ref={navWrapperRef}\n                id={id}\n                data-testid={navTestId}\n                className={clsx(\n                    styles.navWrapper,\n                    isStickied && styles.navWrapperStickied,\n                    className\n                )}\n            >\n                <div\n                    ref={dropdownRef}\n                    role=\"button\"\n                    onClick={handleToggleDropdown}\n                    onKeyDown={handleNavSelectKeyDown}\n                    data-testid={`${navTestId}-label`}\n                    className={clsx(\n                        styles.navSelect,\n                        isDropdownExpanded && styles.navSelectExpanded\n                    )}\n                    aria-haspopup=\"true\"\n                    aria-expanded={isDropdownExpanded}\n                    aria-controls={dropdownListId}\n                    tabIndex={0}\n                >\n                    <Typography.BodyBL weight=\"semibold\">\n                        {labelText}\n                    </Typography.BodyBL>\n                    <ChevronDownIcon\n                        className={clsx(\n                            styles.navSelectIcon,\n                            isDropdownExpanded && styles.navSelectIconExpanded\n                        )}\n                    />\n                </div>\n                {isDropdownExpanded && (\n                    <ul\n                        ref={navItemListRef}\n                        id={dropdownListId}\n                        role=\"menu\"\n                        onKeyDown={handleNavItemListKeyDown}\n                        data-testid={`${navTestId}-dropdown-list`}\n                        className={styles.navItemList}\n                    >\n                        {items.map((item, i) =>\n                            renderDropdownNavItem({\n                                handleClick: (e) =>\n                                    handleNavItemClick(e, item, i),\n                                isSelected: i === selectedItemIndex,\n                                item,\n                                renderItem,\n                                index: i,\n                            })\n                        )}\n                    </ul>\n                )}\n                {isDropdownExpanded && isStickied && (\n                    <div\n                        className={styles.backdrop}\n                        onClick={handleDismissBackdrop}\n                    />\n                )}\n            </nav>\n        </>\n    );\n};\n\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","TickIcon","styles.tickIcon","styles.navItemLabel","styles.navItemLabelSelected","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}