@lifesg/react-design-system 4.0.0-alpha.12 → 4.0.0-alpha.13

package/breadcrumb/breadcrumb.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as i}from"react/jsx-runtime";import{ChevronRightIcon as o}from"@lifesg/react-icons/chevron-right";import s from"clsx";import{useState as l,useRef as n}from"react";import{useResizeDetector as a}from"../external/react-resize-detector/build/index.esm.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as m}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as d}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as c}from"../theme/utils/use-apply-styles.js";import{useResolvedBreakpointToken as h}from"../theme/utils/use-media-query.js";import{Typography as u}from"../typography/index.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{useEvent as f}from"../util/use-event.js";import{useEventListener as p}from"../util/use-event-listener.js";import{useIsomorphicLayoutEffect as j}from"../util/use-isomorphic-layout-effect.js";import{tokens as g,wrapper as v,content as b,currentLabel as y,previousLink as k,item as N,caret as x,slash as W,fade as w,fadeLeft as M,fadeRight as C}from"./breadcrumb.styles.js";const L=L=>{var O,z,{links:B,fadeColor:D,fadePosition:R="both",id:S,separatorStyle:q="chevron",className:A}=L,P=e(L,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[_,E]=l(!1),[F,G]=l(!1),[H,I]=l(!1),J="left"===R||"both"===R,K="right"===R||"both"===R,Q=n(null),T=n(null),U=n(null),V=n(null),X=m(h(d["lg-max"]));let Y;Y=Array.isArray(D)&&D.length>0?{left:D,right:D}:D||{left:void 0,right:void 0},c(U,{[g.fade.backgroundColor]:null===(O=null==Y?void 0:Y.left)||void 0===O?void 0:O.join(", ")}),c(V,{[g.fade.backgroundColor]:null===(z=null==Y?void 0:Y.right)||void 0===z?void 0:z.join(", ")});const Z=f((()=>{const e=T.current,r=Q.current;e&&r&&B&&B.length>1&&window.innerWidth<=X&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),$=f((()=>{const e=window.innerWidth<=X;E(e);const r=T.current,t=Q.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return G(r.scrollLeft>=1),void I(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);G(!1),I(!1)}));if(p("resize",$),p("scroll",$,T.current),j((()=>{Z(),$()}),[Z,$,X]),a({onResize:Z,targetRef:Q,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!B)return null;return r("div",Object.assign({ref:Q,id:S||"breadcrumb",className:s(v,A)},P,{children:[t("nav",{"aria-label":"Breadcrumb",children:t("ul",{ref:T,className:b,children:B.map(((e,i)=>{let s;return e.children?(s=i!==B.length-1&&e.href?t(u.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:k})):t(u.BodyMD,{weight:"semibold",as:"span",className:y,children:e.children}),r("li",Object.assign({className:N},i===B.length-1&&{"aria-current":"page"},{children:[s,i<B.length-1&&("chevron"===q?t(o,{"aria-hidden":!0,className:x}):t(u.BodyMD,{inline:!0,"aria-hidden":!0,className:W,children:"/"}))]}),i)):null}))})}),_&&r(i,{children:[F&&J&&t("div",{ref:U,className:s(w,M)}),H&&K&&t("div",{ref:V,className:s(w,C)})]})]}))};export{L as Breadcrumb};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{ChevronRightIcon as t}from"@lifesg/react-icons/chevron-right";import o from"clsx";import{useRef as s}from"react";import{FadeWrapper as a}from"../shared/fade-wrapper/fade-wrapper.js";import"../theme/theme-provider/index.js";import{parsePxOrRemValue as n}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as l}from"../theme/tokens/breakpoint.js";import"../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{useEvent as m}from"../util/use-event.js";import{useIsomorphicLayoutEffect as d}from"../util/use-isomorphic-layout-effect.js";import{useResolvedBreakpointToken as c}from"../theme/utils/use-media-query.js";import{Typography as p}from"../typography/index.js";import{wrapper as h,content as u,currentLabel as f,previousLink as j,item as b,caret as g,slash as v}from"./breadcrumb.styles.js";const y=y=>{var{links:k,fadeColor:N,fadePosition:x="both",id:w,separatorStyle:B="chevron",className:C}=y,D=e(y,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const M=s(null),O=n(c(l["lg-max"])),P=m((()=>{var e;k&&k.length>1&&window.innerWidth<=O&&(null===(e=M.current)||void 0===e||e.scrollToEnd())}));if(d((()=>{P()}),[P,O]),!k)return null;return r(a,Object.assign({ref:M,id:w||"breadcrumb",className:o(h,C),fadeColor:N,fadePosition:x,onResize:P},D,{children:r("nav",{"aria-label":"Breadcrumb",children:r("ul",{className:u,children:k.map(((e,o)=>{let s;return e.children?(s=o!==k.length-1&&e.href?r(p.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:j})):r(p.BodyMD,{weight:"semibold",as:"span",className:f,children:e.children}),i("li",Object.assign({className:b},o===k.length-1&&{"aria-current":"page"},{children:[s,o<k.length-1&&("chevron"===B?r(t,{"aria-hidden":!0,className:g}):r(p.BodyMD,{inline:!0,"aria-hidden":!0,className:v,children:"/"}))]}),o)):null}))})})}))};export{y as Breadcrumb};
 //# sourceMappingURL=breadcrumb.js.map

package/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    parsePxOrRemValue,\n    useApplyStyle,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\n// @catalog\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n * @keywords hierarchy, navigation, path, trail, wayfinding\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { FadeWrapper, type FadeWrapperRef } from \"../shared/fade-wrapper\";\nimport { parsePxOrRemValue, useResolvedBreakpointToken } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps } from \"./types\";\n\n// @catalog\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n * @keywords hierarchy, navigation, path, trail, wayfinding\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const fadeWrapperRef = useRef<FadeWrapperRef>(null);\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = useEvent(() => {\n        if (\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            fadeWrapperRef.current?.scrollToEnd();\n        }\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useIsomorphicLayoutEffect(() => {\n        handleResize();\n    }, [handleResize, tabletBreakpoint]);\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    return (\n        <FadeWrapper\n            ref={fadeWrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            fadeColor={fadeColor}\n            fadePosition={fadePosition}\n            onResize={handleResize}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul className={styles.content}>{renderLinks()}</ul>\n            </nav>\n        </FadeWrapper>\n    );\n};\n"],"names":["Breadcrumb","_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","fadeWrapperRef","useRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","handleResize","useEvent","length","window","innerWidth","current","scrollToEnd","useIsomorphicLayoutEffect","_jsx","FadeWrapper","Object","assign","ref","clsx","styles.wrapper","onResize","children","styles.content","map","link","index","element","href","Typography","LinkMD","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","_jsxs","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash"],"mappings":"yrCAqBO,MAAMA,EAAcC,QAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,GACrBA,EAAEC,eACFA,EAAiB,UAASC,UAC1BA,GAASN,EACNO,EAAUC,EAAAR,EAPU,wEAYvB,MAAMS,EAAiBC,EAAuB,MAExCC,EAAmBC,EACrBC,EAA2BC,EAAW,YAMpCC,EAAeC,GAAS,WAEtBf,GACAA,EAAMgB,OAAS,GACfC,OAAOC,YAAcR,IAEC,QAAtBX,EAAAS,EAAeW,eAAO,IAAApB,GAAAA,EAAEqB,cAC5B,IAaJ,GAPAC,GAA0B,KACtBP,GAAc,GACf,CAACA,EAAcJ,KAKbV,EAAO,OAAO,KA2DnB,OACIsB,EAACC,EAAWC,OAAAC,OAAA,CACRC,IAAKlB,EACLL,GAAIA,GAAM,aACVE,UAAWsB,EAAKC,EAAgBvB,GAChCJ,UAAWA,EACXC,aAAcA,EACd2B,SAAUf,GACNR,EAAU,CAAAwB,SAEdR,EAAA,MAAA,CAAA,aAAgB,aAAYQ,SACxBR,QAAIjB,UAAW0B,EAAcD,SAnE9B9B,EAAMgC,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKH,UAeNK,EAXAD,IAAUlC,EAAMgB,OAAS,GAAMiB,EAAKG,KAYhCd,EAACe,EAAWC,OAAMd,OAAAC,OAAA,GACVQ,EAAI,CACRM,OAAO,WACPC,eAAe,OACfnC,UAAWoC,KAdfnB,EAACe,EAAWK,OAAM,CACdH,OAAO,WACPI,GAAG,OACHtC,UAAWuC,EAAmBd,SAE7BG,EAAKH,WAede,EAAA,KAAArB,OAAAC,OAAA,CAEIpB,UAAWyC,GACNZ,IAAUlC,EAAMgB,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAc,SAAA,CAEDK,EACAD,EAAQlC,EAAMgB,OAAS,IACA,YAAnBZ,EACGkB,EAACyB,EAAgB,CAAA,eAAA,EAEb1C,UAAW2C,IAGf1B,EAACe,EAAWK,QACRO,QAAM,EAAA,eAAA,EAEN5C,UAAW6C,qBAjBlBhB,IA1BF,IAgDF,UAkBC"}

package/breadcrumb/breadcrumb.styles.d.ts

@@ -1,13 +1,5 @@
-export declare const tokens: {
-    fade: {
-        backgroundColor: string;
-    };
-};
 export declare const wrapper: import("@linaria/core").LinariaClassName;
 export declare const content: import("@linaria/core").LinariaClassName;
-export declare const fade: import("@linaria/core").LinariaClassName;
-export declare const fadeLeft: import("@linaria/core").LinariaClassName;
-export declare const fadeRight: import("@linaria/core").LinariaClassName;
 export declare const item: import("@linaria/core").LinariaClassName;
 export declare const caret: import("@linaria/core").LinariaClassName;
 export declare const slash: import("@linaria/core").LinariaClassName;

package/breadcrumb/breadcrumb.styles.js

@@ -1,2 +1,2 @@
-import"./breadcrumb.styles_1nl4aua.css";const r={fade:{backgroundColor:"--fds-internal-breadcrumb-fade-backgroundColor"}},a="wcpniaz",o="c10gatr7",c="fbyhxo7",d="f1xa0lk7",b="f1oxmxuo",e="ikhkv84",m="co9wmrd",n="spyv6ve",f="c1mfqdvn",s="pm022dc";export{m as caret,o as content,f as currentLabel,c as fade,d as fadeLeft,b as fadeRight,e as item,s as previousLink,n as slash,r as tokens,a as wrapper};
+import"./breadcrumb.styles_1blzn8n.css";const c="wcpniaz",r="c10gatr7",o="ibyhxo7",b="c1xa0lk7",s="s1oxmxuo",a="ckhkv84",m="po9wmrd";export{b as caret,r as content,a as currentLabel,o as item,m as previousLink,s as slash,c as wrapper};
 //# sourceMappingURL=breadcrumb.styles.js.map

package/breadcrumb/breadcrumb.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.styles.js","sources":["../../src/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\nexport const tokens = {\n    fade: {\n        backgroundColor: \"--fds-internal-breadcrumb-fade-backgroundColor\",\n    },\n};\n\n// =============================================================================\n// STYLE CLASSES\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n\nexport const content = css`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    overflow-x: scroll;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const fade = css`\n    ${tokens.fade.backgroundColor}: initial;\n    width: ${Spacing[\"spacing-64\"]};\n    height: calc(1lh + ${Spacing[\"spacing-4\"]});\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n`;\n\nexport const fadeLeft = css`\n    ${MediaQuery.MaxWidth.lg} {\n        left: calc(${Spacing[\"spacing-8\"]} * -1);\n        background-image: linear-gradient(\n            to right,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const fadeRight = css`\n    ${MediaQuery.MaxWidth.lg} {\n        right: ${Spacing[\"spacing-8\"]};\n        background-image: linear-gradient(\n            to left,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const item = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n`;\n\nexport const caret = css`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const slash = css`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const currentLabel = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const previousLink = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["tokens","fade","backgroundColor","wrapper","content","fadeLeft","fadeRight","item","caret","slash","currentLabel","previousLink"],"mappings":"kEAIO,MAAMA,EAAS,CAClBC,KAAM,CACFC,gBAAiB,mDAOZC,EAAO,UAePC,EAAO,WAoBPH,EAAI,UAUJI,EAAQ,WAWRC,EAAS,WAWTC,EAAI,UAQJC,EAAK,UAMLC,EAAK,UAKLC,EAAY,WAIZC,EAAY"}
+{"version":3,"file":"breadcrumb.styles.js","sources":["../../src/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE CLASSES\n// =============================================================================\nexport const wrapper = css`\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n\n    [data-id=\"left-fade\"],\n    [data-id=\"right-fade\"] {\n        height: calc(1lh + ${Spacing[\"spacing-4\"]});\n        top: 50%;\n        transform: translateY(-50%);\n    }\n`;\n\nexport const content = css`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    font-size: ${Font.Spec[\"body-size-md\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const item = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n`;\n\nexport const caret = css`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const slash = css`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const currentLabel = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const previousLink = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["wrapper","content","item","caret","slash","currentLabel","previousLink"],"mappings":"kEAOO,MAAMA,EAAO,UAoBPC,EAAO,WAaPC,EAAI,UAQJC,EAAK,WAMLC,EAAK,WAKLC,EAAY,UAIZC,EAAY"}

package/breadcrumb/breadcrumb.styles_1blzn8n.css

@@ -0,0 +1,7 @@
+@layer fds{.wcpniaz{z-index:1;margin:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-xl-max) .wcpniaz{margin:var(--fds-spacing-24) 0;}:where(body.fds-breakpoint-lg-max) .wcpniaz{margin:var(--fds-spacing-16) 0;}.wcpniaz [data-id="left-fade"],.wcpniaz [data-id="right-fade"]{height:calc(1lh + var(--fds-spacing-4));top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.c10gatr7{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;white-space:nowrap;margin-left:calc(var(--fds-spacing-8) * -1);font-size:var(--fds-font-body-size-md);}:where(body.fds-breakpoint-lg-max) .c10gatr7{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}
+.ibyhxo7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:inherit;font-size:inherit;}
+.c1xa0lk7{height:1em;width:1em;color:var(--fds-colour-icon-subtle);}
+.s1oxmxuo{display:inline-block;color:var(--fds-colour-text-subtlest);}
+.ckhkv84{margin:var(--fds-spacing-8)!important;}
+.po9wmrd{margin:var(--fds-spacing-8)!important;}}

package/breadcrumb/types.d.ts

@@ -1,18 +1,7 @@
+import type { FadeColorSet } from "../shared/fade-wrapper";
+export type { FadeColorSet };
 export type FadePosition = "left" | "right" | "both";
 export type SeparatorStyle = "chevron" | "slash";
-/**
- * Gradient color values for the fade overlays in the breadcrumb scroll container.
- */
-export interface FadeColorSet {
-    /**
-     * Gradient color stops for the left fade overlay.
-     */
-    left?: string[] | undefined;
-    /**
-     * Gradient color stops for the right fade overlay.
-     */
-    right?: string[] | undefined;
-}
 /** Props for the `Breadcrumb` component */
 export interface BreadcrumbProps {
     /**

package/cjs/breadcrumb/breadcrumb.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-right"),s=require("clsx"),i=require("react"),l=require("../external/react-resize-detector/build/index.esm.js");require("../theme/theme-provider/index.js");var n=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var a=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var u=require("../theme/utils/use-apply-styles.js"),o=require("../theme/utils/use-media-query.js"),d=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var c=require("../util/use-event.js"),h=require("../util/use-event-listener.js"),f=require("../util/use-isomorphic-layout-effect.js"),m=require("./breadcrumb.styles.js");function j(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=j(s);exports.Breadcrumb=s=>{var j,p,{links:g,fadeColor:y,fadePosition:q="both",id:b,separatorStyle:x="chevron",className:k}=s,R=e.__rest(s,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const[N,L]=i.useState(!1),[S,W]=i.useState(!1),[w,B]=i.useState(!1),C="left"===q||"both"===q,E="right"===q||"both"===q,M=i.useRef(null),O=i.useRef(null),z=i.useRef(null),A=i.useRef(null),D=n.parsePxOrRemValue(o.useResolvedBreakpointToken(a.Breakpoint["lg-max"]));let T;T=Array.isArray(y)&&y.length>0?{left:y,right:y}:y||{left:void 0,right:void 0},u.useApplyStyle(z,{[m.tokens.fade.backgroundColor]:null===(j=null==T?void 0:T.left)||void 0===j?void 0:j.join(", ")}),u.useApplyStyle(A,{[m.tokens.fade.backgroundColor]:null===(p=null==T?void 0:T.right)||void 0===p?void 0:p.join(", ")});const _=c.useEvent((()=>{const e=O.current,r=M.current;e&&r&&g&&g.length>1&&window.innerWidth<=D&&(e.scrollLeft=e.scrollWidth-r.offsetWidth)})),P=c.useEvent((()=>{const e=window.innerWidth<=D;L(e);const r=O.current,t=M.current;if(r&&t&&e&&r.scrollWidth>t.offsetWidth)return W(r.scrollLeft>=1),void B(r.scrollWidth-r.scrollLeft-1>t.offsetWidth);W(!1),B(!1)}));if(h.useEventListener("resize",P),h.useEventListener("scroll",P,O.current),f.useIsomorphicLayoutEffect((()=>{_(),P()}),[_,P,D]),l.useResizeDetector({onResize:_,targetRef:M,refreshMode:"debounce",refreshRate:50,skipOnMount:!0}),!g)return null;return r.jsxs("div",Object.assign({ref:M,id:b||"breadcrumb",className:v.default(m.wrapper,k)},R,{children:[r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx("ul",{ref:O,className:m.content,children:g.map(((e,s)=>{let i;return e.children?(i=s!==g.length-1&&e.href?r.jsx(d.Typography.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:m.previousLink})):r.jsx(d.Typography.BodyMD,{weight:"semibold",as:"span",className:m.currentLabel,children:e.children}),r.jsxs("li",Object.assign({className:m.item},s===g.length-1&&{"aria-current":"page"},{children:[i,s<g.length-1&&("chevron"===x?r.jsx(t.ChevronRightIcon,{"aria-hidden":!0,className:m.caret}):r.jsx(d.Typography.BodyMD,{inline:!0,"aria-hidden":!0,className:m.slash,children:"/"}))]}),s)):null}))})}),N&&r.jsxs(r.Fragment,{children:[S&&C&&r.jsx("div",{ref:z,className:v.default(m.fade,m.fadeLeft)}),w&&E&&r.jsx("div",{ref:A,className:v.default(m.fade,m.fadeRight)})]})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-right"),s=require("clsx"),a=require("react"),t=require("../shared/fade-wrapper/fade-wrapper.js");require("../theme/theme-provider/index.js");var n=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var l=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("../util/use-event.js"),o=require("../util/use-isomorphic-layout-effect.js"),c=require("../theme/utils/use-media-query.js"),d=require("../typography/index.js"),h=require("./breadcrumb.styles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=m(s);exports.Breadcrumb=s=>{var{links:m,fadeColor:j,fadePosition:q="both",id:f,separatorStyle:v="chevron",className:y}=s,g=e.__rest(s,["links","fadeColor","fadePosition","id","separatorStyle","className"]);const b=a.useRef(null),x=n.parsePxOrRemValue(c.useResolvedBreakpointToken(l.Breakpoint["lg-max"])),k=u.useEvent((()=>{var e;m&&m.length>1&&window.innerWidth<=x&&(null===(e=b.current)||void 0===e||e.scrollToEnd())}));if(o.useIsomorphicLayoutEffect((()=>{k()}),[k,x]),!m)return null;return r.jsx(t.FadeWrapper,Object.assign({ref:b,id:f||"breadcrumb",className:p.default(h.wrapper,y),fadeColor:j,fadePosition:q,onResize:k},g,{children:r.jsx("nav",{"aria-label":"Breadcrumb",children:r.jsx("ul",{className:h.content,children:m.map(((e,s)=>{let a;return e.children?(a=s!==m.length-1&&e.href?r.jsx(d.Typography.LinkMD,Object.assign({},e,{weight:"semibold",underlineStyle:"none",className:h.previousLink})):r.jsx(d.Typography.BodyMD,{weight:"semibold",as:"span",className:h.currentLabel,children:e.children}),r.jsxs("li",Object.assign({className:h.item},s===m.length-1&&{"aria-current":"page"},{children:[a,s<m.length-1&&("chevron"===v?r.jsx(i.ChevronRightIcon,{"aria-hidden":!0,className:h.caret}):r.jsx(d.Typography.BodyMD,{inline:!0,"aria-hidden":!0,className:h.slash,children:"/"}))]}),s)):null}))})})}))};
 //# sourceMappingURL=breadcrumb.js.map

package/cjs/breadcrumb/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    parsePxOrRemValue,\n    useApplyStyle,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useEventListener, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps, FadeColorSet } from \"./types\";\n\n// @catalog\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n * @keywords hierarchy, navigation, path, trail, wayfinding\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFade, setShowFade] = useState<boolean>(false);\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(false);\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(false);\n    const shouldShowFadeLeft =\n        fadePosition === \"left\" || fadePosition === \"both\";\n    const shouldShowFadeRight =\n        fadePosition === \"right\" || fadePosition === \"both\";\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLUListElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // FADE COLOR CALCULATION\n    // =============================================================================\n    let fadeColorSet: FadeColorSet;\n\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        fadeColorSet = {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    } else if (fadeColor) {\n        fadeColorSet = fadeColor as FadeColorSet;\n    } else {\n        fadeColorSet = {\n            left: undefined,\n            right: undefined,\n        };\n    }\n\n    // =============================================================================\n    // CSS VARIABLES\n    // =============================================================================\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.left?.join(\", \"),\n    });\n\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.fade.backgroundColor]: fadeColorSet?.right?.join(\", \"),\n    });\n\n    const onResize = useEvent(() => {\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n\n        if (\n            content &&\n            wrapper &&\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        }\n    });\n\n    const handleShowFadeToggle = useEvent(() => {\n        const nextShowFade = window.innerWidth <= tabletBreakpoint;\n        setShowFade(nextShowFade);\n\n        const content = contentRef.current;\n        const wrapper = wrapperRef.current;\n        if (content && wrapper && nextShowFade) {\n            if (content.scrollWidth > wrapper.offsetWidth) {\n                // set 1px margin of error to handle sub-pixel differences\n                setShowFadeLeft(content.scrollLeft >= 1);\n                setShowFadeRight(\n                    content.scrollWidth - content.scrollLeft - 1 >\n                        wrapper.offsetWidth\n                );\n                return;\n            }\n        }\n\n        setShowFadeLeft(false);\n        setShowFadeRight(false);\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEventListener(\"resize\", handleShowFadeToggle);\n    useEventListener(\"scroll\", handleShowFadeToggle, contentRef.current);\n\n    useIsomorphicLayoutEffect(() => {\n        onResize();\n        handleShowFadeToggle();\n    }, [onResize, handleShowFadeToggle, tabletBreakpoint]);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n        skipOnMount: true,\n    });\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && shouldShowFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                    />\n                )}\n                {showFadeRight && shouldShowFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                    />\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul ref={contentRef} className={styles.content}>\n                    {renderLinks()}\n                </ul>\n            </nav>\n            {showFade && renderFade()}\n        </div>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","showFade","setShowFade","useState","showFadeLeft","setShowFadeLeft","showFadeRight","setShowFadeRight","shouldShowFadeLeft","shouldShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","fadeColorSet","Array","isArray","length","left","right","undefined","useApplyStyle","styles.tokens","fade","backgroundColor","_b","join","_c","onResize","useEvent","content","current","wrapper","window","innerWidth","scrollLeft","scrollWidth","offsetWidth","handleShowFadeToggle","nextShowFade","useEventListener","useIsomorphicLayoutEffect","useResizeDetector","targetRef","refreshMode","refreshRate","skipOnMount","_jsxs","ref","clsx","styles.wrapper","children","_jsx","styles.content","map","link","index","element","href","Typography","LinkMD","Object","assign","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash","_Fragment","styles.fade","styles.fadeLeft","styles.fadeRight"],"mappings":"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"}
+{"version":3,"file":"breadcrumb.js","sources":["../../../src/breadcrumb/breadcrumb.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { FadeWrapper, type FadeWrapperRef } from \"../shared/fade-wrapper\";\nimport { parsePxOrRemValue, useResolvedBreakpointToken } from \"../theme\";\nimport { Breakpoint } from \"../theme/tokens\";\nimport { Typography } from \"../typography\";\nimport { useEvent, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./breadcrumb.styles\";\nimport type { BreadcrumbProps } from \"./types\";\n\n// @catalog\n/**\n * Horizontal breadcrumb navigation trail.\n *\n * Use `Breadcrumb` to show the user's position within a page hierarchy and\n * allow navigation to parent pages. On tablet and below, the trail scrolls\n * horizontally with optional edge fade overlays to indicate clipped content.\n * @keywords hierarchy, navigation, path, trail, wayfinding\n */\nexport const Breadcrumb = ({\n    links,\n    fadeColor,\n    fadePosition = \"both\",\n    id,\n    separatorStyle = \"chevron\",\n    className,\n    ...otherProps\n}: BreadcrumbProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const fadeWrapperRef = useRef<FadeWrapperRef>(null);\n\n    const tabletBreakpoint = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleResize = useEvent(() => {\n        if (\n            links &&\n            links.length > 1 &&\n            window.innerWidth <= tabletBreakpoint\n        ) {\n            fadeWrapperRef.current?.scrollToEnd();\n        }\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useIsomorphicLayoutEffect(() => {\n        handleResize();\n    }, [handleResize, tabletBreakpoint]);\n\n    // =========================================================================\n    // RENDER\n    // =========================================================================\n    if (!links) return null;\n\n    const renderLinks = () => {\n        return links.map((link, index) => {\n            let element: JSX.Element;\n            if (!link.children) {\n                return null;\n            }\n\n            if (index === links.length - 1 || !link.href) {\n                element = (\n                    <Typography.BodyMD\n                        weight=\"semibold\"\n                        as=\"span\"\n                        className={styles.currentLabel}\n                    >\n                        {link.children}\n                    </Typography.BodyMD>\n                );\n            } else {\n                element = (\n                    <Typography.LinkMD\n                        {...link}\n                        weight=\"semibold\"\n                        underlineStyle=\"none\"\n                        className={styles.previousLink}\n                    />\n                );\n            }\n\n            return (\n                <li\n                    key={index}\n                    className={styles.item}\n                    {...(index === links.length - 1 && {\n                        \"aria-current\": \"page\",\n                    })}\n                >\n                    {element}\n                    {index < links.length - 1 &&\n                        (separatorStyle === \"chevron\" ? (\n                            <ChevronRightIcon\n                                aria-hidden\n                                className={styles.caret}\n                            />\n                        ) : (\n                            <Typography.BodyMD\n                                inline\n                                aria-hidden\n                                className={styles.slash}\n                            >\n                                /\n                            </Typography.BodyMD>\n                        ))}\n                </li>\n            );\n        });\n    };\n\n    return (\n        <FadeWrapper\n            ref={fadeWrapperRef}\n            id={id || \"breadcrumb\"}\n            className={clsx(styles.wrapper, className)}\n            fadeColor={fadeColor}\n            fadePosition={fadePosition}\n            onResize={handleResize}\n            {...otherProps}\n        >\n            <nav aria-label=\"Breadcrumb\">\n                <ul className={styles.content}>{renderLinks()}</ul>\n            </nav>\n        </FadeWrapper>\n    );\n};\n"],"names":["_a","links","fadeColor","fadePosition","id","separatorStyle","className","otherProps","__rest","fadeWrapperRef","useRef","tabletBreakpoint","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","handleResize","useEvent","length","window","innerWidth","current","scrollToEnd","useIsomorphicLayoutEffect","_jsx","FadeWrapper","Object","assign","ref","clsx","styles.wrapper","onResize","children","styles.content","map","link","index","element","href","Typography","LinkMD","weight","underlineStyle","styles.previousLink","BodyMD","as","styles.currentLabel","_jsxs","styles.item","ChevronRightIcon","styles.caret","inline","styles.slash"],"mappings":"uiCAqB2BA,QAAAC,MACvBA,EAAKC,UACLA,EAASC,aACTA,EAAe,OAAMC,GACrBA,EAAEC,eACFA,EAAiB,UAASC,UAC1BA,GAASN,EACNO,EAAUC,EAAAA,OAAAR,EAPU,wEAYvB,MAAMS,EAAiBC,EAAAA,OAAuB,MAExCC,EAAmBC,EAAAA,kBACrBC,EAAAA,2BAA2BC,EAAAA,WAAW,YAMpCC,EAAeC,EAAAA,UAAS,WAEtBf,GACAA,EAAMgB,OAAS,GACfC,OAAOC,YAAcR,IAEC,QAAtBX,EAAAS,EAAeW,eAAO,IAAApB,GAAAA,EAAEqB,cAC5B,IAaJ,GAPAC,EAAAA,2BAA0B,KACtBP,GAAc,GACf,CAACA,EAAcJ,KAKbV,EAAO,OAAO,KA2DnB,OACIsB,EAAAA,IAACC,EAAAA,YAAWC,OAAAC,OAAA,CACRC,IAAKlB,EACLL,GAAIA,GAAM,aACVE,UAAWsB,EAAAA,QAAKC,EAAAA,QAAgBvB,GAChCJ,UAAWA,EACXC,aAAcA,EACd2B,SAAUf,GACNR,EAAU,CAAAwB,SAEdR,EAAAA,IAAA,MAAA,CAAA,aAAgB,aAAYQ,SACxBR,EAAAA,UAAIjB,UAAW0B,UAAcD,SAnE9B9B,EAAMgC,KAAI,CAACC,EAAMC,KACpB,IAAIC,EACJ,OAAKF,EAAKH,UAeNK,EAXAD,IAAUlC,EAAMgB,OAAS,GAAMiB,EAAKG,KAYhCd,EAAAA,IAACe,EAAAA,WAAWC,OAAMd,OAAAC,OAAA,GACVQ,EAAI,CACRM,OAAO,WACPC,eAAe,OACfnC,UAAWoC,EAAAA,gBAdfnB,EAAAA,IAACe,EAAAA,WAAWK,OAAM,CACdH,OAAO,WACPI,GAAG,OACHtC,UAAWuC,EAAAA,aAAmBd,SAE7BG,EAAKH,WAede,OAAA,KAAArB,OAAAC,OAAA,CAEIpB,UAAWyC,EAAAA,MACNZ,IAAUlC,EAAMgB,OAAS,GAAK,CAC/B,eAAgB,QAClB,CAAAc,SAAA,CAEDK,EACAD,EAAQlC,EAAMgB,OAAS,IACA,YAAnBZ,EACGkB,MAACyB,EAAAA,iBAAgB,CAAA,eAAA,EAEb1C,UAAW2C,EAAAA,QAGf1B,EAAAA,IAACe,EAAAA,WAAWK,QACRO,QAAM,EAAA,eAAA,EAEN5C,UAAW6C,EAAAA,yBAjBlBhB,IA1BF,IAgDF,UAkBC"}

package/cjs/breadcrumb/breadcrumb.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./breadcrumb.styles_1nl4aua.css");exports.caret="co9wmrd",exports.content="c10gatr7",exports.currentLabel="c1mfqdvn",exports.fade="fbyhxo7",exports.fadeLeft="f1xa0lk7",exports.fadeRight="f1oxmxuo",exports.item="ikhkv84",exports.previousLink="pm022dc",exports.slash="spyv6ve",exports.tokens={fade:{backgroundColor:"--fds-internal-breadcrumb-fade-backgroundColor"}},exports.wrapper="wcpniaz";
+"use strict";require("./breadcrumb.styles_1blzn8n.css");exports.caret="c1xa0lk7",exports.content="c10gatr7",exports.currentLabel="ckhkv84",exports.item="ibyhxo7",exports.previousLink="po9wmrd",exports.slash="s1oxmxuo",exports.wrapper="wcpniaz";
 //# sourceMappingURL=breadcrumb.styles.js.map

package/cjs/breadcrumb/breadcrumb.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"breadcrumb.styles.js","sources":["../../../src/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\nexport const tokens = {\n    fade: {\n        backgroundColor: \"--fds-internal-breadcrumb-fade-backgroundColor\",\n    },\n};\n\n// =============================================================================\n// STYLE CLASSES\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n`;\n\nexport const content = css`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    font-size: ${Font.Spec[\"body-size-md\"]};\n    overflow-x: scroll;\n    overflow-y: hidden;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const fade = css`\n    ${tokens.fade.backgroundColor}: initial;\n    width: ${Spacing[\"spacing-64\"]};\n    height: calc(1lh + ${Spacing[\"spacing-4\"]});\n    position: absolute;\n    top: 50%;\n    transform: translateY(-50%);\n    pointer-events: none;\n`;\n\nexport const fadeLeft = css`\n    ${MediaQuery.MaxWidth.lg} {\n        left: calc(${Spacing[\"spacing-8\"]} * -1);\n        background-image: linear-gradient(\n            to right,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const fadeRight = css`\n    ${MediaQuery.MaxWidth.lg} {\n        right: ${Spacing[\"spacing-8\"]};\n        background-image: linear-gradient(\n            to left,\n            var(${tokens.fade.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const item = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n`;\n\nexport const caret = css`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const slash = css`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const currentLabel = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const previousLink = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":["fade","backgroundColor"],"mappings":"gGAwFkB,0BA5DE,gCAuEK,wBAnDR,2BAUI,6BAWC,wBAWL,+BAuBQ,wBATP,yBA1FI,CAClBA,KAAM,CACFC,gBAAiB,mEAOL"}
+{"version":3,"file":"breadcrumb.styles.js","sources":["../../../src/breadcrumb/breadcrumb.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLE CLASSES\n// =============================================================================\nexport const wrapper = css`\n    z-index: 1;\n    margin: ${Spacing[\"spacing-32\"]} 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: ${Spacing[\"spacing-24\"]} 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: ${Spacing[\"spacing-16\"]} 0;\n    }\n\n    [data-id=\"left-fade\"],\n    [data-id=\"right-fade\"] {\n        height: calc(1lh + ${Spacing[\"spacing-4\"]});\n        top: 50%;\n        transform: translateY(-50%);\n    }\n`;\n\nexport const content = css`\n    display: inline-flex;\n    width: 100%;\n    flex-wrap: wrap;\n    white-space: nowrap;\n    margin-left: calc(${Spacing[\"spacing-8\"]} * -1);\n    font-size: ${Font.Spec[\"body-size-md\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-wrap: nowrap;\n    }\n`;\n\nexport const item = css`\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    line-height: inherit;\n    font-size: inherit;\n`;\n\nexport const caret = css`\n    height: 1em;\n    width: 1em;\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const slash = css`\n    display: inline-block;\n    color: ${Colour[\"text-subtlest\"]};\n`;\n\nexport const currentLabel = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n\nexport const previousLink = css`\n    margin: ${Spacing[\"spacing-8\"]} !important;\n`;\n"],"names":[],"mappings":"gGAgDkB,2BArBE,gCAgCK,uBAnBR,+BAuBQ,wBATP,2BA/CE"}

package/cjs/breadcrumb/breadcrumb.styles_1blzn8n.css

@@ -0,0 +1,7 @@
+@layer fds{.wcpniaz{z-index:1;margin:var(--fds-spacing-32) 0;}:where(body.fds-breakpoint-xl-max) .wcpniaz{margin:var(--fds-spacing-24) 0;}:where(body.fds-breakpoint-lg-max) .wcpniaz{margin:var(--fds-spacing-16) 0;}.wcpniaz [data-id="left-fade"],.wcpniaz [data-id="right-fade"]{height:calc(1lh + var(--fds-spacing-4));top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);}
+.c10gatr7{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;width:100%;-webkit-box-flex-wrap:wrap;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;white-space:nowrap;margin-left:calc(var(--fds-spacing-8) * -1);font-size:var(--fds-font-body-size-md);}:where(body.fds-breakpoint-lg-max) .c10gatr7{-webkit-box-flex-wrap:nowrap;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}
+.ibyhxo7{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:inherit;font-size:inherit;}
+.c1xa0lk7{height:1em;width:1em;color:var(--fds-colour-icon-subtle);}
+.s1oxmxuo{display:inline-block;color:var(--fds-colour-text-subtlest);}
+.ckhkv84{margin:var(--fds-spacing-8)!important;}
+.po9wmrd{margin:var(--fds-spacing-8)!important;}}

package/cjs/drawer/drawer.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@floating-ui/react"),i=require("@lifesg/react-icons/cross"),s=require("clsx"),t=require("react"),l=require("../overlay/overlay.js"),n=require("../shared/clickable-icon/clickable-icon.js"),o=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var c=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./drawer.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=d(s);exports.Drawer=s=>{var{children:d,heading:g,show:j,onClose:v,onOverlayClick:y,className:f}=s,x=e.__rest(s,["children","heading","show","onClose","onOverlayClick","className"]);const[m,p]=t.useState(j),q=c.useId(),b=t.useRef(null),{context:C,refs:k}=a.useFloating({open:j,onOpenChange:e=>{!e&&v&&v()}}),w=a.useDismiss(C,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:N}=a.useInteractions([w]),{isMounted:F,status:O}=a.useTransitionStatus(C,{duration:800});t.useEffect((()=>{if(!j){const e=setTimeout((()=>p(!1)),800);return()=>clearTimeout(e)}p(!0)}),[j]);return r.jsx(l.Overlay,{show:m,enableOverlayClick:!0,onOverlayClick:y,children:F?r.jsx(a.FloatingFocusManager,{context:C,initialFocus:-1,returnFocus:!0,children:r.jsxs("div",Object.assign({ref:k.setFloating,"data-status":O,"data-testid":"drawer","aria-modal":!0,role:"dialog","aria-labelledby":q,onTransitionEnd:e=>{var r;"visibility"===e.propertyName&&j&&(null===(r=b.current)||void 0===r||r.focus())},className:h.default(u.container,f)},N(),x,{children:[r.jsx("div",{className:u.header,children:r.jsx(o.Typography.HeadingMD,{as:"h2",className:u.heading,id:q,ref:b,tabIndex:-1,weight:"bold",children:g})}),r.jsx("div",{className:u.content,children:d}),r.jsx(n.ClickableIcon,{"aria-label":"Close drawer",onClick:v,focusHighlight:!1,className:u.closeButton,children:r.jsx(i.CrossIcon,{"aria-hidden":!0})})]}))}):void 0})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("@floating-ui/react"),i=require("@lifesg/react-icons/cross"),t=require("clsx"),a=require("react"),o=require("../external/react-resize-detector/build/index.esm.js"),l=require("../overlay/overlay.js"),n=require("../shared/clickable-icon/clickable-icon.js");require("../theme/theme-provider/index.js");var u=require("../theme/utils/css-variable.js");require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var c=require("../theme/tokens/breakpoint.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var d=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var h=require("../theme/utils/use-media-query.js"),m=require("../typography/index.js"),j=require("./drawer.styles.js");function v(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=v(t);exports.Drawer=t=>{var{children:v,heading:q,show:g,onClose:p,onOverlayClick:x,customCallToAction:y,className:k}=t,b=e.__rest(t,["children","heading","show","onClose","onOverlayClick","customCallToAction","className"]);const[C,T]=a.useState(g),[w,N]=a.useState(),O=d.useId(),F=a.useRef(null),{width:R,ref:I}=o.useResizeDetector({refreshMode:"throttle",refreshRate:300,onResize:()=>{const e=F.current;e&&N(e.offsetTop+e.offsetHeight/2)}}),S=u.parsePxOrRemValue(h.useResolvedBreakpointToken(c.Breakpoint["sm-max"])),A=void 0!==R&&R<=S,{context:D,refs:M}=s.useFloating({open:g,onOpenChange:e=>{!e&&p&&p()}}),_=s.useDismiss(D,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:z}=s.useInteractions([_]),{isMounted:B,status:H}=s.useTransitionStatus(D,{duration:800});a.useEffect((()=>{if(!g){const e=setTimeout((()=>T(!1)),800);return()=>clearTimeout(e)}T(!0)}),[g]);return r.jsx(l.Overlay,{show:C,enableOverlayClick:!0,onOverlayClick:x,children:B?r.jsx(s.FloatingFocusManager,{context:D,initialFocus:-1,returnFocus:!0,children:r.jsxs("div",Object.assign({ref:M.setFloating,"data-status":H,"data-testid":"drawer","aria-modal":!0,role:"dialog","aria-labelledby":O,onTransitionEnd:e=>{var r;"visibility"===e.propertyName&&g&&(null===(r=F.current)||void 0===r||r.focus())},className:f.default(j.container,k)},z(),b,{children:[r.jsxs("div",{ref:I,className:f.default(j.header,A&&j.headerStacked),children:[r.jsx(m.Typography.HeadingMD,{as:"h2",className:j.heading,id:O,ref:F,tabIndex:-1,weight:"bold",children:q}),y?r.jsx("div",{className:f.default(j.callToAction,A&&j.callToActionStacked),children:y}):null]}),r.jsx("div",{className:j.content,children:v}),r.jsx(n.ClickableIcon,{"aria-label":"Close drawer",onClick:p,focusHighlight:!1,className:j.closeButton,style:void 0!==w?{top:w,transform:"translateY(-50%)"}:void 0,children:r.jsx(i.CrossIcon,{"aria-hidden":!0})})]}))}):void 0})};
 //# sourceMappingURL=drawer.js.map

package/cjs/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Overlay } from \"../overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./drawer.styles\";\nimport type { DrawerProps } from \"./types\";\n\n// @catalog\n/**\n * A slide-in panel that overlays the page content.\n *\n * Use `Drawer` to surface supplementary content or navigation options without\n * navigating away from the current page. Focus is trapped inside the dialog\n * while it is open and returns to the triggering element on close.\n * @keywords overlay, panel, side panel, tray\n */\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    className,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    const id = useId();\n    const initialFocusRef = useRef<HTMLHeadingElement>(null);\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        outsidePress: false, // defer to Overlay click\n    });\n\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 800,\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!show) {\n            const timer = setTimeout(() => setShowOverlay(false), 800);\n            return () => clearTimeout(timer);\n        } else {\n            setShowOverlay(true);\n        }\n    }, [show]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDialogVisibility = (e: React.TransitionEvent) => {\n        if (e.propertyName === \"visibility\" && show) {\n            // focus the first element so that the screenreader enters the dialog\n            initialFocusRef.current?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={onOverlayClick}\n        >\n            {isMounted ? (\n                <FloatingFocusManager\n                    context={context}\n                    initialFocus={-1}\n                    returnFocus={true}\n                >\n                    <div\n                        ref={refs.setFloating}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        className={clsx(styles.container, className)}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <div className={styles.header}>\n                            <Typography.HeadingMD\n                                as=\"h2\"\n                                className={styles.heading}\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                            >\n                                {heading}\n                            </Typography.HeadingMD>\n                        </div>\n                        <div className={styles.content}>{children}</div>\n                        <ClickableIcon\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                            className={styles.closeButton}\n                        >\n                            <CrossIcon aria-hidden />\n                        </ClickableIcon>\n                    </div>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["_a","children","heading","show","onClose","onOverlayClick","className","otherProps","__rest","showOverlay","setShowOverlay","useState","id","useId","initialFocusRef","useRef","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","ref","setFloating","role","onTransitionEnd","e","propertyName","current","focus","clsx","styles.container","styles.header","Typography","HeadingMD","as","styles.heading","tabIndex","weight","styles.content","ClickableIcon","onClick","focusHighlight","styles.closeButton","CrossIcon","undefined"],"mappings":"8oBA2BuBA,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,UACdA,GAASN,EACNO,EAAUC,EAAAA,OAAAR,EAPM,sEAYnB,MAAOS,EAAaC,GAAkBC,EAAAA,SAASR,GACzCS,EAAKC,EAAAA,QACLC,EAAkBC,EAAAA,OAA2B,OAK7CC,QAAEA,EAAOC,KAAEA,GAASC,cAAY,CAClCC,KAAMhB,EACNiB,aAAeD,KACNA,GAAQf,GACTA,GACJ,IAIFiB,EAAUC,EAAAA,WAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,kBAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBb,EAAS,CACvDc,SAAU,MAMdC,EAAAA,WAAU,KACN,IAAK5B,EAAM,CACP,MAAM6B,EAAQC,YAAW,IAAMvB,GAAe,IAAQ,KACtD,MAAO,IAAMwB,aAAaF,EAC9B,CACItB,GAAe,EACnB,GACD,CAACP,IAeJ,OACIgC,MAACC,EAAAA,QAAO,CACJjC,KAAMM,EACN4B,oBAAkB,EAClBhC,eAAgBA,EAAcJ,SAE7B0B,EACGQ,EAAAA,IAACG,uBAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAIvC,SAEjBwC,EAAAA,0BACIC,IAAKzB,EAAK0B,YAAW,cACRf,EAAM,cACP,yBAEZgB,KAAK,SAAQ,kBACIhC,EACjBiC,gBA7BYC,UACL,eAAnBA,EAAEC,cAAiC5C,IAEZ,QAAvBH,EAAAc,EAAgBkC,eAAO,IAAAhD,GAAAA,EAAEiD,QAC7B,EA0BgB3C,UAAW4C,EAAAA,QAAKC,EAAAA,UAAkB7C,IAC9BmB,IACAlB,EAAU,CAAAN,SAAA,CAEdkC,EAAAA,IAAA,MAAA,CAAK7B,UAAW8C,EAAAA,OAAanD,SACzBkC,MAACkB,EAAAA,WAAWC,UAAS,CACjBC,GAAG,KACHjD,UAAWkD,UACX5C,GAAIA,EACJ8B,IAAK5B,EACL2C,UAAU,EACVC,OAAO,gBAENxD,MAGTiC,EAAAA,WAAK7B,UAAWqD,EAAAA,QAAc1D,SAAGA,IACjCkC,EAAAA,IAACyB,EAAAA,cAAa,CAAA,aACC,eACXC,QAASzD,EACT0D,gBAAgB,EAChBxD,UAAWyD,cAAkB9D,SAE7BkC,EAAAA,IAAC6B,YAAS,CAAA,eAAA,iBAItBC,GACE"}
+{"version":3,"file":"drawer.js","sources":["../../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Overlay } from \"../overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    Breakpoint,\n    parsePxOrRemValue,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./drawer.styles\";\nimport type { DrawerProps } from \"./types\";\n\n// @catalog\n/**\n * A slide-in panel that overlays the page content.\n *\n * Use `Drawer` to surface supplementary content or navigation options without\n * navigating away from the current page. Focus is trapped inside the dialog\n * while it is open and returns to the triggering element on close.\n * @keywords overlay, panel, side panel, tray\n */\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    customCallToAction,\n    className,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    // vertical centre of the heading, used to align the (last-in-DOM,\n    // absolutely positioned) close button with it\n    const [closeButtonTop, setCloseButtonTop] = useState<number>();\n    const id = useId();\n    const initialFocusRef = useRef<HTMLHeadingElement>(null);\n    // Observe the header (whose size tracks the drawer's actual width, which\n    // consumers may override) to drive layout in one pass: the width decides\n    // call-to-action stacking, and each resize re-centres the close button on\n    // the heading. offsetTop/offsetHeight are relative to the drawer (the\n    // positioned ancestor), so they share the close button's coordinate space.\n    const { width: headerWidth, ref: headerRef } =\n        useResizeDetector<HTMLDivElement>({\n            refreshMode: \"throttle\",\n            refreshRate: 300,\n            onResize: () => {\n                const headingEl = initialFocusRef.current;\n                if (headingEl) {\n                    setCloseButtonTop(\n                        headingEl.offsetTop + headingEl.offsetHeight / 2\n                    );\n                }\n            },\n        });\n    // stack the call-to-action below the heading once the drawer is too narrow\n    // to fit both on one line\n    const stackWidth = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"sm-max\"])\n    );\n    const stackCallToAction =\n        headerWidth !== undefined && headerWidth <= stackWidth;\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        outsidePress: false, // defer to Overlay click\n    });\n\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 800,\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!show) {\n            const timer = setTimeout(() => setShowOverlay(false), 800);\n            return () => clearTimeout(timer);\n        } else {\n            setShowOverlay(true);\n        }\n    }, [show]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDialogVisibility = (e: React.TransitionEvent) => {\n        if (e.propertyName === \"visibility\" && show) {\n            // focus the first element so that the screenreader enters the dialog\n            initialFocusRef.current?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={onOverlayClick}\n        >\n            {isMounted ? (\n                <FloatingFocusManager\n                    context={context}\n                    initialFocus={-1}\n                    returnFocus={true}\n                >\n                    <div\n                        ref={refs.setFloating}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        className={clsx(styles.container, className)}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <div\n                            ref={headerRef}\n                            className={clsx(\n                                styles.header,\n                                stackCallToAction && styles.headerStacked\n                            )}\n                        >\n                            <Typography.HeadingMD\n                                as=\"h2\"\n                                className={styles.heading}\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                            >\n                                {heading}\n                            </Typography.HeadingMD>\n                            {customCallToAction ? (\n                                <div\n                                    className={clsx(\n                                        styles.callToAction,\n                                        stackCallToAction &&\n                                            styles.callToActionStacked\n                                    )}\n                                >\n                                    {customCallToAction}\n                                </div>\n                            ) : null}\n                        </div>\n                        <div className={styles.content}>{children}</div>\n                        {/* Rendered last so assistive tech reaches the heading\n                            and content before the close button; centred against\n                            the header via its measured height. */}\n                        <ClickableIcon\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                            className={styles.closeButton}\n                            style={\n                                closeButtonTop !== undefined\n                                    ? {\n                                          top: closeButtonTop,\n                                          transform: \"translateY(-50%)\",\n                                      }\n                                    : undefined\n                            }\n                        >\n                            <CrossIcon aria-hidden />\n                        </ClickableIcon>\n                    </div>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["_a","children","heading","show","onClose","onOverlayClick","customCallToAction","className","otherProps","__rest","showOverlay","setShowOverlay","useState","closeButtonTop","setCloseButtonTop","id","useId","initialFocusRef","useRef","width","headerWidth","ref","headerRef","useResizeDetector","refreshMode","refreshRate","onResize","headingEl","current","offsetTop","offsetHeight","stackWidth","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","stackCallToAction","undefined","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","Object","assign","setFloating","role","onTransitionEnd","e","propertyName","focus","clsx","styles.container","styles.header","styles.headerStacked","Typography","HeadingMD","as","styles.heading","tabIndex","weight","styles.callToAction","styles.callToActionStacked","styles.content","ClickableIcon","onClick","focusHighlight","styles.closeButton","style","top","transform","CrossIcon"],"mappings":"+kCAiCuBA,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,mBACdA,EAAkBC,UAClBA,GAASP,EACNQ,EAAUC,EAAAA,OAAAT,EARM,2FAanB,MAAOU,EAAaC,GAAkBC,EAAAA,SAAST,IAGxCU,EAAgBC,GAAqBF,aACtCG,EAAKC,EAAAA,QACLC,EAAkBC,EAAAA,OAA2B,OAM3CC,MAAOC,EAAaC,IAAKC,GAC7BC,EAAAA,kBAAkC,CAC9BC,YAAa,WACbC,YAAa,IACbC,SAAU,KACN,MAAMC,EAAYV,EAAgBW,QAC9BD,GACAb,EACIa,EAAUE,UAAYF,EAAUG,aAAe,EAEvD,IAKNC,EAAaC,EAAAA,kBACfC,EAAAA,2BAA2BC,EAAAA,WAAW,YAEpCC,OACcC,IAAhBhB,GAA6BA,GAAeW,GAK1CM,QAAEA,EAAOC,KAAEA,GAASC,cAAY,CAClCC,KAAMrC,EACNsC,aAAeD,KACNA,GAAQpC,GACTA,GACJ,IAIFsC,EAAUC,EAAAA,WAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,kBAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBb,EAAS,CACvDc,SAAU,MAMdC,EAAAA,WAAU,KACN,IAAKjD,EAAM,CACP,MAAMkD,EAAQC,YAAW,IAAM3C,GAAe,IAAQ,KACtD,MAAO,IAAM4C,aAAaF,EAC9B,CACI1C,GAAe,EACnB,GACD,CAACR,IAeJ,OACIqD,EAAAA,IAACC,UAAO,CACJtD,KAAMO,EACNgD,oBAAkB,EAClBrD,eAAgBA,WAEf2C,EACGQ,MAACG,EAAAA,qBAAoB,CACjBtB,QAASA,EACTuB,gBACAC,aAAa,EAAI5D,SAEjB6D,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACI3C,IAAKiB,EAAK2B,YAAW,cACRhB,EAAM,cACP,SAAQ,cAAA,EAEpBiB,KAAK,2BACYnD,EACjBoD,gBA7BYC,UACL,eAAnBA,EAAEC,cAAiClE,IAEZ,QAAvBH,EAAAiB,EAAgBW,eAAO,IAAA5B,GAAAA,EAAEsE,QAC7B,EA0BgB/D,UAAWgE,EAAAA,QAAKC,EAAAA,UAAkBjE,IAC9BuC,IACAtC,EAAU,CAAAP,SAAA,CAEd6D,OAAA,MAAA,CACIzC,IAAKC,EACLf,UAAWgE,UACPE,EAAAA,OACAtC,GAAqBuC,iBACxBzE,SAAA,CAEDuD,EAAAA,IAACmB,aAAWC,UAAS,CACjBC,GAAG,KACHtE,UAAWuE,UACX/D,GAAIA,EACJM,IAAKJ,EACL8D,UAAU,EACVC,OAAO,OAAM/E,SAEZC,IAEJI,EACGkD,EAAAA,IAAA,MAAA,CACIjD,UAAWgE,UACPU,EAAAA,aACA9C,GACI+C,EAAAA,qBACPjF,SAEAK,IAEL,QAERkD,EAAAA,WAAKjD,UAAW4E,EAAAA,QAAclF,SAAGA,IAIjCuD,EAAAA,IAAC4B,EAAAA,cAAa,CAAA,aACC,eACXC,QAASjF,EACTkF,gBAAgB,EAChB/E,UAAWgF,EAAAA,YACXC,WACuBpD,IAAnBvB,EACM,CACI4E,IAAK5E,EACL6E,UAAW,yBAEftD,EAASnC,SAGnBuD,EAAAA,IAACmC,EAAAA,2CAIbvD,GACE"}

package/cjs/drawer/drawer.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./drawer.styles_94hx3y.css");exports.closeButton="c1njxz6r",exports.container="c1agands",exports.content="c2k10hw",exports.header="h1kc1wos",exports.heading="hcrz6mg";
+"use strict";require("./drawer.styles_a4bwe0.css");exports.callToAction="ccrz6mg",exports.callToActionStacked="c2k10hw",exports.closeButton="cu0iil5",exports.container="c1agands",exports.content="csm06gm",exports.header="h1kc1wos",exports.headerStacked="h1njxz6r",exports.heading="hdpobta";
 //# sourceMappingURL=drawer.styles.js.map

package/cjs/drawer/drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.js","sources":["../../../src/drawer/drawer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const container = css`\n    position: fixed;\n    top: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    width: 40%;\n    overflow: hidden;\n\n    background-color: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"lg-subtle\"]};\n    border-top-left-radius: ${Radius[\"md\"]};\n    border-bottom-left-radius: ${Radius[\"md\"]};\n\n    transition-property: right, visibility;\n\n    &[data-status=\"initial\"] {\n        right: -100%;\n        visibility: hidden;\n    }\n\n    &[data-status=\"open\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-entrance\"]};\n        right: 0;\n        visibility: visible;\n    }\n\n    &[data-status=\"close\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-exit\"]};\n        right: -100%;\n        visibility: hidden;\n    }\n\n    ${MediaQuery.MaxWidth.xl} {\n        width: 50%;\n        min-width: 700px;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        min-width: unset;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n`;\n\nexport const header = css`\n    top: 0;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-16\"]}\n        calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-32\"]});\n    background-color: ${Colour[\"bg\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        gap: ${Spacing[\"spacing-8\"]};\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]}\n            ${Spacing[\"spacing-16\"]}\n            calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-24\"]});\n    }\n`;\n\nexport const closeButton = css`\n    color: ${Colour[\"icon\"]};\n    padding: 0;\n    position: absolute;\n    top: ${Spacing[\"spacing-32\"]};\n    left: ${Spacing[\"spacing-16\"]};\n    &:active,\n    &:focus {\n        color: ${Colour[\"icon-hover\"]};\n    }\n\n    svg {\n        height: ${Font.Spec[\"heading-lh-md\"]};\n        width: ${Font.Spec[\"heading-lh-md\"]};\n    }\n`;\n\nexport const heading = css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n\nexport const content = css`\n    flex: 1;\n    overflow-y: auto;\n`;\n"],"names":[],"mappings":"6FAkFwB,6BArEF,2BA4FF,yBA1CD,2BAoCC"}
+{"version":3,"file":"drawer.styles.js","sources":["../../../src/drawer/drawer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const container = css`\n    position: fixed;\n    top: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    width: 40%;\n    overflow: hidden;\n\n    background-color: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"lg-subtle\"]};\n    border-top-left-radius: ${Radius[\"md\"]};\n    border-bottom-left-radius: ${Radius[\"md\"]};\n\n    transition-property: right, visibility;\n\n    &[data-status=\"initial\"] {\n        right: -100%;\n        visibility: hidden;\n    }\n\n    &[data-status=\"open\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-entrance\"]};\n        right: 0;\n        visibility: visible;\n    }\n\n    &[data-status=\"close\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-exit\"]};\n        right: -100%;\n        visibility: hidden;\n    }\n\n    ${MediaQuery.MaxWidth.xl} {\n        width: 50%;\n        min-width: 700px;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        min-width: unset;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n`;\n\nexport const header = css`\n    top: 0;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-16\"]}\n        calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-32\"]});\n    background-color: ${Colour[\"bg\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        gap: ${Spacing[\"spacing-8\"]};\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]}\n            ${Spacing[\"spacing-16\"]}\n            calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-24\"]});\n    }\n`;\n\n// Stack the call-to-action below the heading when the drawer is too narrow\n// to fit both on one line.\nexport const headerStacked = css`\n    flex-direction: column;\n    align-items: stretch;\n    gap: ${Spacing[\"spacing-16\"]};\n`;\n\nexport const callToAction = css`\n    display: flex;\n    margin-left: auto;\n`;\n\n// When stacked, flush left so the buttons line up with the heading (the\n// header's left padding already clears the close icon).\nexport const callToActionStacked = css`\n    margin-left: 0;\n`;\n\nexport const closeButton = css`\n    color: ${Colour[\"icon\"]};\n    padding: 0;\n    position: absolute;\n    top: ${Spacing[\"spacing-32\"]};\n    left: ${Spacing[\"spacing-16\"]};\n    &:active,\n    &:focus {\n        color: ${Colour[\"icon-hover\"]};\n    }\n\n    svg {\n        height: ${Font.Spec[\"heading-lh-md\"]};\n        width: ${Font.Spec[\"heading-lh-md\"]};\n    }\n`;\n\nexport const heading = css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n\nexport const content = css`\n    flex: 1;\n    overflow-y: auto;\n`;\n"],"names":[],"mappings":"8FA0FyB,sCAOO,8BAIR,4BAxFF,2BA+GF,yBA7DD,iCAqBO,2BAkCN"}

package/{drawer/drawer.styles_94hx3y.css → cjs/drawer/drawer.styles_a4bwe0.css}

@@ -1,5 +1,8 @@
 @layer fds{.c1agands{position:fixed;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;width:40%;overflow:hidden;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-subtle);border-top-left-radius:var(--fds-radius-md);border-bottom-left-radius:var(--fds-radius-md);transition-property:right,visibility;}.c1agands[data-status="initial"]{right:-100%;visibility:hidden;}.c1agands[data-status="open"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-entrance);right:0;visibility:visible;}.c1agands[data-status="close"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-exit);right:-100%;visibility:hidden;}:where(body.fds-breakpoint-xl-max) .c1agands{width:50%;min-width:700px;}:where(body.fds-breakpoint-lg-max) .c1agands{width:100%;min-width:unset;border-top-left-radius:0;border-bottom-left-radius:0;}
 .h1kc1wos{top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-16);padding:var(--fds-spacing-32) var(--fds-spacing-16) var(--fds-spacing-16) calc(var(--fds-font-heading-lh-md) + var(--fds-spacing-32));background-color:var(--fds-colour-bg);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}:where(body.fds-breakpoint-lg-max) .h1kc1wos{gap:var(--fds-spacing-8);padding:var(--fds-spacing-32) var(--fds-spacing-20) var(--fds-spacing-16) calc(var(--fds-font-heading-lh-md) + var(--fds-spacing-24));}
-.c1njxz6r{color:var(--fds-colour-icon);padding:0;position:absolute;top:var(--fds-spacing-32);left:var(--fds-spacing-16);}.c1njxz6r:active,.c1njxz6r:focus{color:var(--fds-colour-icon-hover);}.c1njxz6r svg{height:var(--fds-font-heading-lh-md);width:var(--fds-font-heading-lh-md);}
-.hcrz6mg{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
-.c2k10hw{-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;}}
+.h1njxz6r{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:stretch;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;gap:var(--fds-spacing-16);}
+.ccrz6mg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-left:auto;}
+.c2k10hw{margin-left:0;}
+.cu0iil5{color:var(--fds-colour-icon);padding:0;position:absolute;top:var(--fds-spacing-32);left:var(--fds-spacing-16);}.cu0iil5:active,.cu0iil5:focus{color:var(--fds-colour-icon-hover);}.cu0iil5 svg{height:var(--fds-font-heading-lh-md);width:var(--fds-font-heading-lh-md);}
+.hdpobta{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
+.csm06gm{-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;}}

package/cjs/file-upload/file-list/file-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("../../external/@dnd-kit/core/dist/core.esm.js"),t=require("../../external/@dnd-kit/sortable/dist/sortable.esm.js"),s=require("clsx"),i=require("react"),n=require("../../external/react-resize-detector/build/index.esm.js"),o=require("../../shared/accessibility/index.js"),l=require("../context.js"),a=require("../custom-sensors.js"),d=require("../file-item-edit.js"),c=require("../file-list-item/file-list-item.js"),u=require("../helper.js"),p=require("./file-list.styles.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var g=f(s);const m=i.forwardRef((function({fileItems:s=[],editableFileItems:f,fileDescriptionMaxLength:m,descriptionRequired:h,descriptionLabel:b,sortable:j,disabled:y,readOnly:v,onItemUpdate:x,onItemDelete:S,onSort:q},I){const[$,M]=i.useState({}),{setActiveId:O}=i.useContext(l.FileUploadContext),[C,D]=i.useState(""),F=i.useRef({});i.useImperativeHandle(I,(()=>({focus:()=>{var e;null===(e=R.current)||void 0===e||e.focus()}})));const{width:L=0,ref:R}=n.useResizeDetector(),E=i.useRef({}),w=r.useSensors(r.useSensor(a.MouseSensor,{activationConstraint:{distance:8}}),r.useSensor(r.TouchSensor,{activationConstraint:{delay:150,tolerance:5}}),r.useSensor(r.KeyboardSensor,{coordinateGetter:t.sortableKeyboardCoordinates})),k=e=>{delete E.current[e]};i.useEffect((()=>{const e=G(s);((e,r)=>{const t=Object.keys(e),s=Object.keys(r);if(t.length!==s.length)return!1;for(const t of s)if(e[t]!==r[t])return!1;return!0})($,e)||M(e)}),[s,f,v]),i.useEffect((()=>{var e;if(!s||0===s.length)return void D("");const r=Date.now(),t=[];for(const i of s){const s=F.current[i.id];if(i.errorMessage)"error"!==(null==s?void 0:s.status)&&(t.push("string"==typeof i.errorMessage?`Error uploading ${i.name}: ${i.errorMessage}`:`Error uploading ${i.name}`),F.current[i.id]={progress:null!==(e=i.progress)&&void 0!==e?e:1,timestamp:r,status:"error"});else if(void 0!==i.progress)if(i.progress>=1)"complete"!==(null==s?void 0:s.status)&&(t.push(`${i.name} upload is complete`),F.current[i.id]={progress:1,timestamp:r,status:"complete"});else if("number"==typeof i.progress&&i.progress<1){(!s||"in-progress"!==s.status)&&(t.push(`Starting upload of ${i.name}`),F.current[i.id]={progress:i.progress,timestamp:r,status:"in-progress"})}}t.length>0&&D(t.join(", "))}),[s]);const A=e=>r=>{V(e.id,"display"),k(e.id);const t=Object.assign(Object.assign({},e),{description:r});x(t)},W=e=>r=>{E.current[e.id]=r},H=e=>()=>{e.description&&0!==e.description.length?V(e.id,"display"):S(e),k(e.id)},N=e=>()=>{V(e.id,"edit")},U=e=>()=>{S(e),R.current&&R.current.focus()},z=e=>{if(q&&s){const{active:r,over:i}=e;if(i&&r.id!==i.id){const e=s.findIndex((e=>e.id===r.id)),n=s.findIndex((e=>e.id===i.id)),o=t.arrayMove(s,e,n);q(o)}}O(void 0)},B=e=>{const{active:r}=e;O(r.id)},K=e=>f&&u.FileUploadHelper.isSupportedImageType(e.type),T=e=>!e.errorMessage&&!v&&!("number"==typeof e.progress&&e.progress<1)&&K(e)&&!e.description,G=e=>{if(!e||0===e.length)return{};const r={};for(const t of e)t.errorMessage?r[t.id]="error":$[t.id]?r[t.id]=$[t.id]:r[t.id]=T(t)?"edit":"display";return r},V=(e,r)=>{M((t=>Object.assign(Object.assign({},t),{[e]:r})))},J=()=>s&&s.length>1&&j&&Object.values($).every((e=>"display"===e)),P=()=>{if(0===s.length)return"No files uploaded";const e=s.filter((e=>!(null==e?void 0:e.errorMessage)&&(1===e.progress||void 0===e.progress))).length,r=s.filter((e=>"number"==typeof e.progress&&e.progress<1)).length,t=s.filter((e=>e.errorMessage)).length;if(0===e&&0===r&&0===t)return"File list";const i=[e>0?`${e} completed files`:"",r>0?`${r} file in progress`:"",t>0?`${t} ${t>1?"files":"file"} with error`:""].filter(Boolean);return`${v?"Read-only file list":"File list"}. ${i.join(", ")}`},Q=()=>{const r=((e,r)=>{if(!e||0===e.length)return[];const t=[];for(const s of e)if("edit"===r[s.id]){const e=t[t.length-1];Array.isArray(e)?e.push(s):t.push([s])}else t.push(s);return t})(s,$);return 0===r.length?null:r.map(((r,t)=>Array.isArray(r)?((r,t)=>{const s=r.map((r=>{const t=Object.assign({},r);return void 0!==E.current[r.id]&&(t.description=E.current[r.id]),e.jsx(d.FileItemEdit,{fileItem:t,wrapperWidth:L,fileDescriptionMaxLength:m,descriptionRequired:h,descriptionLabel:b,onSave:A(r),onCancel:H(r),onBlur:W(r)},r.id)}));return e.jsx("li",{className:p.editableItemsContainer,children:e.jsx("ul",{children:s})},`editable-${t}`)})(r,t):e.jsx(c.FileListItem,{fileItem:r,editable:K(r),wrapperWidth:L,sortable:J(),disabled:y,readOnly:v,descriptionLabel:b,onDelete:U(r),onEditClick:N(r)},r.id)))},X=()=>e.jsxs(e.Fragment,{children:[e.jsx(o.VisuallyHidden,{"aria-live":"polite","aria-atomic":"true",children:C}),e.jsx("ul",{tabIndex:-1,className:g.default(p.listWrapper,v&&p.listWrapperReadOnly),ref:R,"aria-label":P(),children:Q()})]});return y||v||!J()?X():e.jsx(r.DndContext,{sensors:w,onDragEnd:z,onDragStart:B,children:e.jsx(t.SortableContext,{items:s,strategy:t.verticalListSortingStrategy,children:X()})})}));exports.FileList=m;
+"use strict";var e=require("react/jsx-runtime"),r=require("../../external/@dnd-kit/core/dist/core.esm.js"),t=require("../../external/@dnd-kit/sortable/dist/sortable.esm.js"),s=require("clsx"),i=require("react"),o=require("../../external/react-resize-detector/build/index.esm.js"),n=require("../../shared/accessibility/index.js"),a=require("../context.js"),l=require("../custom-sensors.js"),d=require("../file-list-item/file-list-item.js"),u=require("../helper.js"),c=require("./file-list.styles.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var f=p(s);const g=i.forwardRef((function({fileItems:s=[],editableFileItems:p,fileDescriptionMaxLength:g,descriptionRequired:m,descriptionLabel:h,sortable:v,disabled:x,readOnly:b,onItemUpdate:j,onItemDelete:y,onSort:S},q){const{setActiveId:I}=i.useContext(a.FileUploadContext),[M,$]=i.useState(0),[C,D]=i.useState(""),F=i.useRef({});i.useImperativeHandle(q,(()=>({focus:()=>{var e;null===(e=L.current)||void 0===e||e.focus()}})));const{width:R=0,ref:L}=o.useResizeDetector(),O=i.useRef({}),w=r.useSensors(r.useSensor(l.MouseSensor,{activationConstraint:{distance:8}}),r.useSensor(r.TouchSensor,{activationConstraint:{delay:150,tolerance:5}}),r.useSensor(r.KeyboardSensor,{coordinateGetter:t.sortableKeyboardCoordinates})),E=e=>{delete O.current[e]};i.useEffect((()=>{var e;if(!s||0===s.length)return void D("");const r=Date.now(),t=[];for(const i of s){const s=F.current[i.id];if(i.errorMessage)"error"!==(null==s?void 0:s.status)&&(t.push("string"==typeof i.errorMessage?`Error uploading ${i.name}: ${i.errorMessage}`:`Error uploading ${i.name}`),F.current[i.id]={progress:null!==(e=i.progress)&&void 0!==e?e:1,timestamp:r,status:"error"});else if(void 0!==i.progress)if(i.progress>=1)"complete"!==(null==s?void 0:s.status)&&(t.push(`${i.name} upload is complete`),F.current[i.id]={progress:1,timestamp:r,status:"complete"});else if("number"==typeof i.progress&&i.progress<1){(!s||"in-progress"!==s.status)&&(t.push(`Starting upload of ${i.name}`),F.current[i.id]={progress:i.progress,timestamp:r,status:"in-progress"})}}t.length>0&&D(t.join(", "))}),[s]);const H=e=>r=>{E(e.id);const t=Object.assign(Object.assign({},e),{description:r});j(t)},U=e=>r=>{O.current[e.id]=r},W=e=>()=>{E(e.id),e.description&&0!==e.description.length||y(e)},k=e=>{$((r=>"edit"===e?r+1:Math.max(0,r-1)))},z=e=>()=>{y(e),L.current&&L.current.focus()},B=e=>p&&u.FileUploadHelper.isSupportedImageType(e.type),K=()=>s&&s.length>1&&v&&!b&&!(M>0||s.some((e=>!!e.errorMessage))),N=()=>{if(0===s.length)return"No files uploaded";const e=s.filter((e=>!(null==e?void 0:e.errorMessage)&&(1===e.progress||void 0===e.progress))).length,r=s.filter((e=>"number"==typeof e.progress&&e.progress<1)).length,t=s.filter((e=>e.errorMessage)).length;if(0===e&&0===r&&0===t)return"File list";const i=[e>0?`${e} completed files`:"",r>0?`${r} file in progress`:"",t>0?`${t} ${t>1?"files":"file"} with error`:""].filter(Boolean);return`${b?"Read-only file list":"File list"}. ${i.join(", ")}`};return e.jsx(r.DndContext,{sensors:w,onDragEnd:e=>{if(S&&s){const{active:r,over:i}=e;if(i&&r.id!==i.id){const e=s.findIndex((e=>e.id===r.id)),o=s.findIndex((e=>e.id===i.id)),n=t.arrayMove(s,e,o);S(n)}}I(void 0)},onDragStart:e=>{const{active:r}=e;I(r.id)},children:e.jsx(t.SortableContext,{items:s,strategy:t.verticalListSortingStrategy,children:e.jsxs(e.Fragment,{children:[e.jsx(n.VisuallyHidden,{"aria-live":"polite","aria-atomic":"true",children:C}),e.jsx("ul",{tabIndex:-1,className:f.default(c.listWrapper,b&&c.listWrapperReadOnly),ref:L,"aria-label":N(),children:0===s.length?null:s.map((r=>{const t=Object.assign({},r);return void 0!==O.current[r.id]&&(t.description=O.current[r.id]),e.jsx(d.FileListItem,{fileItem:t,editable:B(r),wrapperWidth:R,sortable:K(),disabled:x,readOnly:b,descriptionLabel:h,fileDescriptionMaxLength:g,descriptionRequired:m,onDelete:z(r),onSave:H(r),onCancel:W(r),onBlur:U(r),onModeChange:k},r.id)}))})]})})})}));exports.FileList=g;
 //# sourceMappingURL=file-list.js.map

package/cjs/file-upload/file-list/file-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list.js","sources":["../../../../src/file-upload/file-list/file-list.tsx"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from \"@dnd-kit/core\";\nimport {\n    DndContext,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { FormLabelProps } from \"../../form/form-label/types\";\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { FileUploadContext } from \"../context\";\nimport { MouseSensor } from \"../custom-sensors\";\nimport { FileItemEdit } from \"../file-item-edit\";\nimport { FileListItem } from \"../file-list-item\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { FileItemProps } from \"../types\";\nimport * as styles from \"./file-list.styles\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype RenderMode = \"edit\" | \"display\" | \"error\";\n\ntype FileItemRenderModes = Record<string, RenderMode>;\ntype FileEditedDescriptions = Record<string, string>;\n\ntype RenderItem = FileItemProps | FileItemProps[];\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        descriptionRequired,\n        descriptionLabel,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [renderModes, setRenderModes] = useState<FileItemRenderModes>({});\n    const { setActiveId } = useContext(FileUploadContext);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    const shallowCompareRenderModes = (\n        prev: FileItemRenderModes,\n        next: FileItemRenderModes\n    ) => {\n        const prevKeys = Object.keys(prev);\n        const nextKeys = Object.keys(next);\n        if (prevKeys.length !== nextKeys.length) {\n            return false;\n        }\n        for (const k of nextKeys) {\n            if (prev[k] !== next[k]) {\n                return false;\n            }\n        }\n        return true;\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const nextModes = getItemsRenderMode(fileItems);\n        const prevModes = renderModes;\n        // We perform shallowCompare to avoid infinite re-render loop\n        if (shallowCompareRenderModes(prevModes, nextModes)) {\n            return;\n        }\n        setRenderModes(nextModes);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [fileItems, editableFileItems, readOnly]);\n\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        updateRenderModes(item.id, \"display\");\n        removeDescription(item.id);\n\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        if (!item.description || item.description.length === 0) {\n            // New addition\n            onItemDelete(item);\n        } else {\n            updateRenderModes(item.id, \"display\");\n        }\n        removeDescription(item.id);\n    };\n\n    const handleInitiateEdit = (item: FileItemProps) => () => {\n        updateRenderModes(item.id, \"edit\");\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const shouldRenderEditMode = (item: FileItemProps) => {\n        return (\n            !item.errorMessage &&\n            !readOnly &&\n            !(typeof item.progress === \"number\" && item.progress < 1) &&\n            checkEditable(item) &&\n            !item.description\n        );\n    };\n\n    const getItemsRenderMode = (\n        fileItems: FileItemProps[] | undefined\n    ): FileItemRenderModes => {\n        if (!fileItems || fileItems.length === 0) return {};\n\n        const newRenderModes: FileItemRenderModes = {};\n\n        for (const item of fileItems) {\n            if (item.errorMessage) {\n                newRenderModes[item.id] = \"error\";\n            } else if (!renderModes[item.id]) {\n                newRenderModes[item.id] = shouldRenderEditMode(item)\n                    ? \"edit\"\n                    : \"display\";\n            } else {\n                newRenderModes[item.id] = renderModes[item.id];\n            }\n        }\n\n        return newRenderModes;\n    };\n\n    const updateRenderModes = (itemId: string, mode: RenderMode) => {\n        setRenderModes((prevRenderModes) => {\n            return {\n                ...prevRenderModes,\n                [itemId]: mode,\n            };\n        });\n    };\n\n    /**\n     * Due to a UI requirement, we will render the items\n     * with edit modes as a group\n     */\n    const getArrangedItems = (\n        fileItems: FileItemProps[] | undefined,\n        renderModes: FileItemRenderModes\n    ) => {\n        if (!fileItems || fileItems.length === 0) return [];\n\n        const arrangedItems: RenderItem[] = [];\n\n        for (const fileItem of fileItems) {\n            if (renderModes[fileItem.id] === \"edit\") {\n                const previousElement = arrangedItems[arrangedItems.length - 1];\n                if (Array.isArray(previousElement)) {\n                    previousElement.push(fileItem);\n                } else {\n                    arrangedItems.push([fileItem]);\n                }\n            } else {\n                arrangedItems.push(fileItem);\n            }\n        }\n\n        return arrangedItems;\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        return Object.values(renderModes).every((mode) => mode === \"display\");\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItemsInEditMode = (\n        fileItems: FileItemProps[],\n        keyToUse: number\n    ) => {\n        const itemsToRender = fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileItemEdit\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    wrapperWidth={wrapperWidth}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    descriptionRequired={descriptionRequired}\n                    descriptionLabel={descriptionLabel}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                />\n            );\n        });\n\n        return (\n            <li\n                key={`editable-${keyToUse}`}\n                className={styles.editableItemsContainer}\n            >\n                <ul>{itemsToRender}</ul>\n            </li>\n        );\n    };\n\n    const renderItems = () => {\n        const arrangedItems = getArrangedItems(fileItems, renderModes);\n\n        if (arrangedItems.length === 0) return null;\n\n        return arrangedItems.map((item, index) => {\n            if (Array.isArray(item)) {\n                return renderItemsInEditMode(item, index);\n            } else {\n                return (\n                    <FileListItem\n                        key={item.id}\n                        fileItem={item}\n                        editable={checkEditable(item)}\n                        wrapperWidth={wrapperWidth}\n                        sortable={shouldEnableSort()}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        descriptionLabel={descriptionLabel}\n                        onDelete={handleDelete(item)}\n                        onEditClick={handleInitiateEdit(item)}\n                    />\n                );\n            }\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ul\n                    tabIndex={-1}\n                    className={clsx(\n                        styles.listWrapper,\n                        readOnly && styles.listWrapperReadOnly\n                    )}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ul>\n            </>\n        );\n    };\n\n    if (disabled || readOnly || !shouldEnableSort()) {\n        return renderItemsWithWrapper();\n    } else {\n        return (\n            <DndContext\n                sensors={sensors}\n                onDragEnd={handleDragEnd}\n                onDragStart={handleDragStart}\n            >\n                <SortableContext\n                    items={fileItems}\n                    strategy={verticalListSortingStrategy}\n                >\n                    {renderItemsWithWrapper()}\n                </SortableContext>\n            </DndContext>\n        );\n    }\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","renderModes","setRenderModes","useState","setActiveId","useContext","FileUploadContext","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","nextModes","getItemsRenderMode","prev","next","prevKeys","Object","keys","nextKeys","length","k","shallowCompareRenderModes","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updateRenderModes","updatedItem","assign","handleBlurEdit","value","handleCancel","handleInitiateEdit","handleDelete","handleDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","handleDragStart","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldRenderEditMode","newRenderModes","mode","prevRenderModes","shouldEnableSort","values","every","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","renderItems","arrangedItems","fileItem","previousElement","Array","isArray","getArrangedItems","map","index","keyToUse","itemsToRender","updatedFileItem","_jsx","FileItemEdit","onSave","onCancel","onBlur","className","styles.editableItemsContainer","children","renderItemsInEditMode","FileListItem","editable","onDelete","onEditClick","renderItemsWithWrapper","_jsxs","_Fragment","VisuallyHidden","tabIndex","clsx","styles.listWrapper","styles.listWrapperReadOnly","DndContext","onDragEnd","onDragStart","SortableContext","items","strategy","verticalListSortingStrategy"],"mappings":"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"}
+{"version":3,"file":"file-list.js","sources":["../../../../src/file-upload/file-list/file-list.tsx"],"sourcesContent":["import type { DragEndEvent, DragStartEvent } from \"@dnd-kit/core\";\nimport {\n    DndContext,\n    KeyboardSensor,\n    TouchSensor,\n    useSensor,\n    useSensors,\n} from \"@dnd-kit/core\";\nimport {\n    arrayMove,\n    SortableContext,\n    sortableKeyboardCoordinates,\n    verticalListSortingStrategy,\n} from \"@dnd-kit/sortable\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport type { FormLabelProps } from \"../../form/form-label/types\";\nimport { VisuallyHidden } from \"../../shared/accessibility\";\nimport { FileUploadContext } from \"../context\";\nimport { MouseSensor } from \"../custom-sensors\";\nimport { FileListItem } from \"../file-list-item\";\nimport type { FileItemMode } from \"../file-list-item/types\";\nimport { FileUploadHelper } from \"../helper\";\nimport type { FileItemProps } from \"../types\";\nimport * as styles from \"./file-list.styles\";\n\n// =============================================================================\n// INTERFACES\n// =============================================================================\ntype FileEditedDescriptions = Record<string, string>;\n\ninterface Props {\n    fileItems: FileItemProps[] | undefined;\n    editableFileItems: boolean;\n    fileDescriptionMaxLength?: number | undefined;\n    descriptionRequired?: boolean | undefined;\n    descriptionLabel?: FormLabelProps | undefined;\n    sortable?: boolean | undefined;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    onItemUpdate: (item: FileItemProps) => void;\n    onItemDelete: (item: FileItemProps) => void;\n    onSort?: ((reorderedFileItems: FileItemProps[]) => void) | undefined;\n}\n\ntype AnnouncementProgress = Record<\n    string,\n    {\n        progress: number;\n        timestamp: number;\n        status: \"in-progress\" | \"complete\" | \"error\";\n    }\n>;\n\nexport interface FileListRef {\n    focus: () => void;\n}\n\n// =============================================================================\n// COMPONENT\n// =============================================================================\n\nfunction Component(\n    {\n        fileItems = [],\n        editableFileItems,\n        fileDescriptionMaxLength,\n        descriptionRequired,\n        descriptionLabel,\n        sortable,\n        disabled,\n        readOnly,\n        onItemUpdate,\n        onItemDelete,\n        onSort,\n    }: Props,\n    ref: React.Ref<FileListRef>\n) {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const { setActiveId } = useContext(FileUploadContext);\n    const [editingCount, setEditingCount] = useState(0);\n\n    // Progress announcement state (for aria-live) - announces start and completion only\n    const [progressAnnouncement, setProgressAnnouncement] = useState(\"\");\n    const lastAnnouncedRef = useRef<AnnouncementProgress>({});\n\n    useImperativeHandle(ref, () => ({\n        focus: () => {\n            wrapperRef.current?.focus();\n        },\n    }));\n    const { width: wrapperWidth = 0, ref: wrapperRef } = useResizeDetector();\n\n    // Keep track of edited description without re-rendering\n    const descriptionsValueRef = useRef<FileEditedDescriptions>({});\n\n    /**\n     * As the default drag sensors interfere with click events\n     * on the file items, we'll need to configure the sensor to\n     * only activate the drag if the mouse moves a certain distance\n     */\n    const sensors = useSensors(\n        useSensor(MouseSensor, {\n            activationConstraint: {\n                distance: 8, // mouse drag of 8px then activate the drag event\n            },\n        }),\n        useSensor(TouchSensor, {\n            activationConstraint: {\n                delay: 150,\n                tolerance: 5,\n            },\n        }),\n        useSensor(KeyboardSensor, {\n            coordinateGetter: sortableKeyboardCoordinates,\n        })\n    );\n\n    // =========================================================================\n    // REF METHODS\n    // =========================================================================\n    const removeDescription = (itemId: string) => {\n        delete descriptionsValueRef.current[itemId];\n    };\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    // Progress announcements only at start and completion\n    useEffect(() => {\n        if (!fileItems || fileItems.length === 0) {\n            setProgressAnnouncement(\"\");\n            return;\n        }\n        const now = Date.now();\n        const messages: string[] = [];\n\n        for (const item of fileItems) {\n            const fileStatus = lastAnnouncedRef.current[item.id];\n\n            if (item.errorMessage) {\n                if (fileStatus?.status !== \"error\") {\n                    messages.push(\n                        typeof item.errorMessage === \"string\"\n                            ? `Error uploading ${item.name}: ${item.errorMessage}`\n                            : `Error uploading ${item.name}`\n                    );\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress ?? 1,\n                        timestamp: now,\n                        status: \"error\",\n                    };\n                }\n                continue;\n            }\n\n            if (item.progress === undefined) {\n                continue;\n            }\n\n            if (item.progress >= 1) {\n                if (fileStatus?.status !== \"complete\") {\n                    messages.push(`${item.name} upload is complete`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: 1,\n                        timestamp: now,\n                        status: \"complete\",\n                    };\n                }\n                continue;\n            }\n\n            // In progress - only announce start, not progress updates\n            if (typeof item.progress === \"number\" && item.progress < 1) {\n                // Only announce when starting upload (no previous status or status was not in-progress)\n                const shouldAnnounce =\n                    !fileStatus || fileStatus.status !== \"in-progress\";\n\n                if (shouldAnnounce) {\n                    messages.push(`Starting upload of ${item.name}`);\n                    lastAnnouncedRef.current[item.id] = {\n                        progress: item.progress,\n                        timestamp: now,\n                        status: \"in-progress\",\n                    };\n                }\n            }\n        }\n\n        if (messages.length > 0) {\n            // Update aria-live region once with aggregated message\n            setProgressAnnouncement(messages.join(\", \"));\n        }\n    }, [fileItems]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleSaveEdit = (item: FileItemProps) => (description: string) => {\n        removeDescription(item.id);\n        const updatedItem = { ...item, description };\n        onItemUpdate(updatedItem);\n    };\n\n    const handleBlurEdit = (item: FileItemProps) => (value: string) => {\n        descriptionsValueRef.current[item.id] = value;\n    };\n\n    const handleCancel = (item: FileItemProps) => () => {\n        removeDescription(item.id);\n        if (!item.description || item.description.length === 0) {\n            onItemDelete(item);\n        }\n    };\n\n    const handleModeChange = (mode: FileItemMode) => {\n        setEditingCount((prev) =>\n            mode === \"edit\" ? prev + 1 : Math.max(0, prev - 1)\n        );\n    };\n\n    const handleDelete = (item: FileItemProps) => () => {\n        onItemDelete(item);\n        if (wrapperRef.current) {\n            wrapperRef.current.focus();\n        }\n    };\n\n    const handleDragEnd = (event: DragEndEvent) => {\n        if (onSort && fileItems) {\n            const { active, over } = event;\n\n            if (over && active.id !== over.id) {\n                const oldIndex = fileItems.findIndex(\n                    (item) => item.id === active.id\n                );\n                const newIndex = fileItems.findIndex(\n                    (item) => item.id === over.id\n                );\n\n                const updatedFileItems = arrayMove(\n                    fileItems,\n                    oldIndex,\n                    newIndex\n                );\n\n                onSort(updatedFileItems);\n            }\n        }\n\n        setActiveId(undefined);\n    };\n\n    const handleDragStart = (event: DragStartEvent) => {\n        const { active } = event;\n        setActiveId(active.id as string);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const checkEditable = (item: FileItemProps) => {\n        return (\n            editableFileItems &&\n            FileUploadHelper.isSupportedImageType(item.type)\n        );\n    };\n\n    const areAllItemsInDisplayViews = () => {\n        if (editingCount > 0) return false;\n        return !fileItems.some((item) => !!item.errorMessage);\n    };\n\n    const shouldEnableSort = () => {\n        return (\n            fileItems &&\n            fileItems.length > 1 &&\n            sortable &&\n            !readOnly &&\n            areAllItemsInDisplayViews()\n        );\n    };\n\n    /**\n     * If there are no files, return \"No files uploaded\".\n     * If readOnly is true, return \"Read-only file list\".\n     * If there are files, return a summary of the file statuses.\n     * For example, \"File list. 2 completed files, 1 file in progress, 1 file with error\".\n     *\n     * @returns aria label\n     */\n    const getWrapperAriaLabel = () => {\n        if (fileItems.length === 0) {\n            return \"No files uploaded\";\n        }\n        const completedCount = fileItems.filter(\n            (item) =>\n                !item?.errorMessage &&\n                (item.progress === 1 || item.progress === undefined)\n        ).length;\n        const inProgressCount = fileItems.filter(\n            (item) => typeof item.progress === \"number\" && item.progress < 1\n        ).length;\n        const errorCount = fileItems.filter((item) => item.errorMessage).length;\n        if (completedCount === 0 && inProgressCount === 0 && errorCount === 0) {\n            return `File list`;\n        }\n        const completedText =\n            completedCount > 0 ? `${completedCount} completed files` : \"\";\n        const inProgressText =\n            inProgressCount > 0 ? `${inProgressCount} file in progress` : \"\";\n        const errorText =\n            errorCount > 0\n                ? `${errorCount} ${\n                      errorCount > 1 ? \"files\" : \"file\"\n                  } with error`\n                : \"\";\n        const parts = [completedText, inProgressText, errorText].filter(\n            Boolean\n        );\n        const prefix = readOnly ? \"Read-only file list\" : \"File list\";\n        return `${prefix}. ${parts.join(\", \")}`;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderItems = () => {\n        if (fileItems.length === 0) return null;\n\n        return fileItems.map((item) => {\n            const updatedFileItem = { ...item };\n            if (descriptionsValueRef.current[item.id] !== undefined) {\n                updatedFileItem.description =\n                    descriptionsValueRef.current[item.id];\n            }\n\n            return (\n                <FileListItem\n                    key={item.id}\n                    fileItem={updatedFileItem}\n                    editable={checkEditable(item)}\n                    wrapperWidth={wrapperWidth}\n                    sortable={shouldEnableSort()}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    descriptionLabel={descriptionLabel}\n                    fileDescriptionMaxLength={fileDescriptionMaxLength}\n                    descriptionRequired={descriptionRequired}\n                    onDelete={handleDelete(item)}\n                    onSave={handleSaveEdit(item)}\n                    onCancel={handleCancel(item)}\n                    onBlur={handleBlurEdit(item)}\n                    onModeChange={handleModeChange}\n                />\n            );\n        });\n    };\n\n    /**\n     * Renders the progress status of each file upload.\n     * In progress: 25% complete for uploading filename.pdf\n     * Complete: filename.pdf upload is complete\n     * Error: Error uploading filename.pdf: error message\n     *\n     * @returns A visually hidden element announcing the progress status.\n     */\n    const renderProgressStatus = () => (\n        <VisuallyHidden aria-live=\"polite\" aria-atomic=\"true\">\n            {progressAnnouncement}\n        </VisuallyHidden>\n    );\n\n    const renderItemsWithWrapper = () => {\n        return (\n            <>\n                {renderProgressStatus()}\n                <ul\n                    tabIndex={-1}\n                    className={clsx(\n                        styles.listWrapper,\n                        readOnly && styles.listWrapperReadOnly\n                    )}\n                    ref={wrapperRef}\n                    aria-label={getWrapperAriaLabel()}\n                >\n                    {renderItems()}\n                </ul>\n            </>\n        );\n    };\n\n    return (\n        <DndContext\n            sensors={sensors}\n            onDragEnd={handleDragEnd}\n            onDragStart={handleDragStart}\n        >\n            <SortableContext\n                items={fileItems}\n                strategy={verticalListSortingStrategy}\n            >\n                {renderItemsWithWrapper()}\n            </SortableContext>\n        </DndContext>\n    );\n}\n\nexport const FileList = forwardRef<FileListRef, Props>(Component);\n"],"names":["FileList","forwardRef","fileItems","editableFileItems","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","sortable","disabled","readOnly","onItemUpdate","onItemDelete","onSort","ref","setActiveId","useContext","FileUploadContext","editingCount","setEditingCount","useState","progressAnnouncement","setProgressAnnouncement","lastAnnouncedRef","useRef","useImperativeHandle","focus","_a","wrapperRef","current","width","wrapperWidth","useResizeDetector","descriptionsValueRef","sensors","useSensors","useSensor","MouseSensor","activationConstraint","distance","TouchSensor","delay","tolerance","KeyboardSensor","coordinateGetter","sortableKeyboardCoordinates","removeDescription","itemId","useEffect","length","now","Date","messages","item","fileStatus","id","errorMessage","status","push","name","progress","timestamp","undefined","join","handleSaveEdit","description","updatedItem","Object","assign","handleBlurEdit","value","handleCancel","handleModeChange","mode","prev","Math","max","handleDelete","checkEditable","FileUploadHelper","isSupportedImageType","type","shouldEnableSort","some","getWrapperAriaLabel","completedCount","filter","inProgressCount","errorCount","parts","Boolean","_jsx","DndContext","onDragEnd","event","active","over","oldIndex","findIndex","newIndex","updatedFileItems","arrayMove","onDragStart","children","SortableContext","items","strategy","verticalListSortingStrategy","_jsxs","_Fragment","VisuallyHidden","tabIndex","className","clsx","styles.listWrapper","styles.listWrapperReadOnly","map","updatedFileItem","FileListItem","fileItem","editable","onDelete","onSave","onCancel","onBlur","onModeChange"],"mappings":"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"}

package/cjs/file-upload/file-list/file-list.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./file-list.styles_1w7so98.css");exports.editableItemsContainer="e1y5148f",exports.listWrapper="l14goqmf",exports.listWrapperReadOnly="l1spcgo1";
+"use strict";require("./file-list.styles_1xbypnh.css");exports.listWrapper="l14goqmf",exports.listWrapperReadOnly="l1spcgo1";
 //# sourceMappingURL=file-list.styles.js.map

package/cjs/file-upload/file-list/file-list.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-list.styles.js","sources":["../../../../src/file-upload/file-list/file-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\nexport const listWrapper = css`\n    list-style-type: none;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const listWrapperReadOnly = css`\n    margin-bottom: 0;\n`;\n\nexport const editableItemsContainer = css`\n    &:not(:last-child) {\n        margin-bottom: ${Spacing[\"spacing-16\"]};\n    }\n\n    ul {\n        list-style-type: none;\n    }\n`;\n"],"names":[],"mappings":"2HAamC,+BATX,uCAKQ"}
+{"version":3,"file":"file-list.styles.js","sources":["../../../../src/file-upload/file-list/file-list.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\nexport const listWrapper = css`\n    list-style-type: none;\n    margin-bottom: ${Spacing[\"spacing-32\"]};\n`;\n\nexport const listWrapperReadOnly = css`\n    margin-bottom: 0;\n`;\n"],"names":[],"mappings":"gHAIwB,uCAKQ"}

package/cjs/file-upload/file-list/file-list.styles_1xbypnh.css

@@ -0,0 +1,2 @@
+@layer fds{.l14goqmf{list-style-type:none;margin-bottom:var(--fds-spacing-32);}
+.l1spcgo1{margin-bottom:0;}}

package/cjs/file-upload/file-list-item/file-item-actions.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/bin"),n=require("@lifesg/react-icons/pencil"),i=require("clsx"),a=require("../../button/button.js"),o=require("../../shared/progress-bar/progress-bar.js"),s=require("./file-item-actions.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=l(i);exports.FileItemActions=i=>{const{mode:l,id:r,name:c}=i;if("error"===l)return e.jsx("div",{className:s.actionContainer,children:e.jsx(a.Button,{"data-testid":`${r}-error-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${c}, error: ${i.errorMessage}`,onClick:i.onDelete,className:s.iconButton,icon:e.jsx(t.BinIcon,{"aria-hidden":!0})})});if("edit"===l)return e.jsxs("div",{className:d.default(s.actionButtonsSection,i.hasThumbnail&&s.actionButtonsSectionWithThumbnail),children:[e.jsx(a.Button,{"data-testid":`${r}-save-button`,type:"button",sizeType:"small",disabled:i.disableSave,onClick:i.onSave,className:s.actionButton,children:"Save"}),e.jsx(a.Button,{type:"button",sizeType:"small",styleType:"secondary","data-testid":`${r}-cancel-button`,onClick:i.onCancel,className:s.actionButton,children:"Cancel"})]});if(i.inline)return e.jsxs("div",{className:s.inlineActionContainer,children:[e.jsx(a.Button,{"data-testid":`${r}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${c}`,disabled:i.disabled,onClick:i.onEdit,onKeyDown:i.onKeyDown,icon:e.jsx(n.PencilIcon,{"aria-hidden":!0}),className:s.iconButton},"edit"),e.jsx(a.Button,{"data-testid":`${r}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${c}`,disabled:i.disabled,onClick:i.onDelete,onKeyDown:i.onKeyDown,icon:e.jsx(t.BinIcon,{"aria-hidden":!0}),className:s.iconButton},"delete")]});let u;return u=i.isLoading?e.jsx(o.ProgressBar,{progress:i.progress,"data-testid":`${r}-progress-bar`}):e.jsxs(e.Fragment,{children:[i.editable&&e.jsx(a.Button,{"data-testid":`${r}-edit-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`edit ${c}`,disabled:i.disabled,onClick:i.onEdit,onKeyDown:i.onKeyDown,icon:e.jsx(n.PencilIcon,{"aria-hidden":!0}),className:s.iconButton},"edit"),e.jsx(a.Button,{"data-testid":`${r}-delete-button`,"data-no-dnd":"true",type:"button",styleType:"light",sizeType:"small","aria-label":`delete ${c}`,disabled:i.disabled,onClick:i.onDelete,onKeyDown:i.onKeyDown,icon:e.jsx(t.BinIcon,{"aria-hidden":!0}),className:s.iconButton},"delete")]}),e.jsx("div",{className:s.actionContainer,"data-mobile-layout":i.isLoading?"loading":i.editable?"editable":void 0,children:u})};
+//# sourceMappingURL=file-item-actions.js.map