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

package/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../src/popover/popover.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\n\nimport { Card } from \"../card\";\nimport { Modal } from \"../modal/modal\";\nimport { MediaWidths } from \"../v2_spec/media-spec\";\nimport { V2_Text } from \"../v2_text/text\";\nimport type { OffsetPosition } from \"./popover.styles\";\nimport { BubbleWrap, ContentWrapper, MobileModalBox } from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\n/**\n * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3.\n */\nexport const Popover = ({\n    children,\n    visible,\n    onMobileClose,\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"popover\";\n    const [offset, _setOffset] = useState<OffsetPosition>(\"none\");\n    const bubbleRef = useRef<HTMLDivElement>(null);\n    const isMobile = useMediaQuery({\n        maxWidth: MediaWidths.mobileL,\n    });\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n    const offsetStateRef = useRef<OffsetPosition>(offset);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setOffset = (value: OffsetPosition) => {\n        offsetStateRef.current = value;\n        _setOffset(value);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        updateOffsetPosition();\n        window.addEventListener(\"resize\", debounce(handleViewportResize, 300));\n\n        return () => {\n            window.removeEventListener(\n                \"resize\",\n                debounce(handleViewportResize, 300)\n            );\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewportResize = () => {\n        updateOffsetPosition();\n    };\n\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const updateOffsetPosition = () => {\n        const newOffsetPosition = getOffsetPosition();\n\n        if (newOffsetPosition) {\n            setOffset(newOffsetPosition);\n        }\n    };\n\n    const getOffsetPosition = (): OffsetPosition | undefined => {\n        if (bubbleRef.current) {\n            const bubbleRect = bubbleRef.current.getBoundingClientRect();\n            const paddingBuffer = 24; // buffer for all sides\n            const hasExceededTop = bubbleRect.y < paddingBuffer;\n            const rightLimit = window.innerWidth - paddingBuffer;\n\n            if (bubbleRect.x < paddingBuffer) {\n                // Exceed left\n                return hasExceededTop ? \"top-left\" : \"left\";\n            } else if (bubbleRect.x + bubbleRect.width > rightLimit) {\n                // Exceed right\n                return hasExceededTop ? \"top-right\" : \"right\";\n            }\n\n            /**\n             * Handle cases where there is more space and we can\n             * shift bubble back to center\n             */\n            if (\n                (offsetStateRef.current === \"top-left\" ||\n                    offsetStateRef.current === \"left\") &&\n                bubbleRect.x - bubbleRect.width / 2 > paddingBuffer\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (\n                (offsetStateRef.current === \"top-right\" ||\n                    offsetStateRef.current === \"right\") &&\n                bubbleRect.x + bubbleRect.width * 2 < rightLimit\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (hasExceededTop) {\n                return \"top-center\";\n            }\n\n            // All ok, do nothing\n            return undefined;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <V2_Text.BodySmall>{children}</V2_Text.BodySmall>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            <BubbleWrap\n                ref={bubbleRef}\n                data-testid={testId}\n                $visible={visible}\n                $offset={offset}\n                {...otherProps}\n            >\n                <Card>{renderContent()}</Card>\n            </BubbleWrap>\n            {isMobile && (\n                <Modal\n                    show={visible ?? false}\n                    onOverlayClick={handleMobileClose}\n                >\n                    <MobileModalBox onClose={handleMobileClose}>\n                        <ContentWrapper>{renderContent()}</ContentWrapper>\n                    </MobileModalBox>\n                </Modal>\n            )}\n        </>\n    );\n};\n"],"names":["Popover","_a","children","visible","onMobileClose","otherProps","__rest","testId","offset","_setOffset","useState","bubbleRef","useRef","isMobile","useMediaQuery","maxWidth","MediaWidths","mobileL","offsetStateRef","useEffect","updateOffsetPosition","window","addEventListener","debounce","handleViewportResize","removeEventListener","handleMobileClose","newOffsetPosition","getOffsetPosition","value","current","bubbleRect","getBoundingClientRect","paddingBuffer","hasExceededTop","y","rightLimit","innerWidth","x","width","renderContent","_jsx","V2_Text","BodySmall","_jsxs","_Fragment","BubbleWrap","Object","assign","ref","$visible","$offset","Card","Modal","show","onOverlayClick","MobileModalBox","onClose","ContentWrapper"],"mappings":"ijBAeO,MAAMA,EAAWC,QAAAC,SACpBA,EAAQC,QACRA,EAAOC,cACPA,KACGC,EAAUC,EAAAL,EAJO,CAAA,WAAA,UAAA,kBASpB,MAAMM,EAASF,EAAW,gBAAkB,WACrCG,EAAQC,GAAcC,EAAyB,QAChDC,EAAYC,EAAuB,MACnCC,EAAWC,EAAAA,cAAc,CAC3BC,SAAUC,EAAYC,UASpBC,EAAiBN,EAAuBJ,GAa9CW,GAAU,KACNC,IACAC,OAAOC,iBAAiB,SAAUC,EAASC,EAAsB,MAE1D,KACHH,OAAOI,oBACH,SACAF,EAASC,EAAsB,KAClC,IAEN,IAKH,MAAMA,EAAuB,KACzBJ,GAAsB,EAGpBM,EAAoB,KAClBtB,GACAA,GACJ,EAMEgB,EAAuB,KACzB,MAAMO,EAAoBC,IArCZ,IAACC,EAuCXF,IAvCWE,EAwCDF,EAvCdT,EAAeY,QAAUD,EACzBpB,EAAWoB,GAuCX,EAGED,EAAoB,KACtB,GAAIjB,EAAUmB,QAAS,CACnB,MAAMC,EAAapB,EAAUmB,QAAQE,wBAC/BC,EAAgB,GAChBC,EAAiBH,EAAWI,EAAIF,EAChCG,EAAaf,OAAOgB,WAAaJ,EAEvC,OAAIF,EAAWO,EAAIL,EAERC,EAAiB,WAAa,OAC9BH,EAAWO,EAAIP,EAAWQ,MAAQH,EAElCF,EAAiB,YAAc,SAQV,aAA3BhB,EAAeY,SACe,SAA3BZ,EAAeY,UACnBC,EAAWO,EAAIP,EAAWQ,MAAQ,EAAIN,IAMV,cAA3Bf,EAAeY,SACe,UAA3BZ,EAAeY,UACnBC,EAAWO,EAAuB,EAAnBP,EAAWQ,MAAYH,EAN/BF,EAAiB,aAAe,OAWvCA,EACO,kBAIX,CACJ,GAMEM,EAAgB,IACE,iBAAbtC,EACHuC,EAACC,EAAQC,UAAS,CAAAzC,SAAEA,IAA6B,EAKzD,OACI0C,EAAAC,EAAA,CAAA3C,SAAA,CACIuC,EAACK,EAAUC,OAAAC,OAAA,CACPC,IAAKtC,EAAS,cACDJ,EAAM2C,SACT/C,EAAOgD,QACR3C,GACLH,EAAU,CAAAH,SAEduC,EAACW,EAAI,CAAAlD,SAAEsC,SAEV3B,GACG4B,EAACY,EAAK,CACFC,KAAMnD,SAAAA,EACNoD,eAAgB7B,EAAiBxB,SAEjCuC,EAACe,EAAc,CAACC,QAAS/B,EAAiBxB,SACtCuC,EAACiB,EAAc,CAAAxD,SAAEsC,YAI9B"}
+{"version":3,"file":"popover.js","sources":["../../src/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\nexport const Popover = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["Popover","_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","isMobile","useMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"i2BAWO,MAAMA,EAAWC,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAsB,MACjCC,EAAsBC,EAAuB,MAC7CC,EAAmBC,GACrB,KAAA,CACI,CAACC,EAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAACC,EAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAC,EAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAKC,EAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAACY,EAAI,CACD7B,UAAW0B,EACPI,OACclB,IAAdhB,GACImC,EACJlC,GAAYmC,GACfvC,SAEDwB,EAACgB,EAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAACkB,EAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAACe,EAAQN,KAAI,CAAApC,SAAA,CACTwB,EAACkB,EAAQI,QAAO,CAAA9C,SACZwB,EAACgB,EAAM,CAAAxC,SAAEuB,QAEbC,EAACkB,EAAQK,YAAW,CAAA,UAIjC"}

package/popover/popover.styles.d.ts

@@ -1,11 +1,10 @@
-export type OffsetPosition = "top-center" | "top-left" | "top-right" | "left" | "right" | "none";
-interface PopoverStyleProps {
-    $visible?: boolean;
-    $offset: OffsetPosition;
-}
-export declare const BubbleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, PopoverStyleProps>> & string;
-export declare const MobileModalBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalBoxProps, never>> & string & Omit<({ id, children, onClose, showCloseButton, ...otherProps }: import("..").ModalBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const HOCWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const HOCTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const ContentWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const tokens: {
+    readonly popoverCard: {
+        readonly maxHeight: "--fds-internal-popover-popoverCard-maxHeight";
+        readonly overflowY: "--fds-internal-popover-popoverCard-overflowY";
+    };
+};
+export declare const popoverContainer: import("@linaria/core").LinariaClassName;
+export declare const popoverCard: import("@linaria/core").LinariaClassName;
+export declare const popoverCardWithMaxHeight: import("@linaria/core").LinariaClassName;
+export declare const popoverCardWithOverflow: import("@linaria/core").LinariaClassName;

package/popover/popover.styles.js

@@ -1,75 +1,2 @@
-import t,{css as o}from"styled-components";import{ModalBox as a}from"../modal/modal-box.js";import{V2_MediaQuery as i}from"../v2_media/media.js";import{V2_Transition as r}from"../v2_transition/index.js";const e=t.div`
-    max-width: 30rem;
-    pointer-events: auto;
-    position: absolute;
-
-    ${t=>t.$visible?o`
-            visibility: visible;
-            opacity: 1;
-            transition: ${r.Base};
-            z-index: 50;
-        `:o`
-            visibility: hidden;
-            opacity: 0;
-            transition: ${r.Base};
-            z-index: -1;
-        `}
-    ${t=>(t=>{switch(t){case"top-center":return o`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 50%;
-                -moz-transform: translateX(-50%);
-                -webkit-transform: translateX(-50%);
-                transform: translateX(-50%);
-            `;case"top-left":return o`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 0;
-            `;case"top-right":return o`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                right: 0;
-            `;case"left":return o`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 0;
-            `;case"right":return o`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                right: 0;
-            `;default:return o`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 50%;
-                -moz-transform: translateX(-50%);
-                -webkit-transform: translateX(-50%);
-                transform: translateX(-50%);
-            `}})(t.$offset)}
-
-	${i.MaxWidth.mobileL} {
-        display: none;
-    }
-`,n=t(a)`
-    padding: 3.5rem 1.25rem 2.5rem;
-`,m=t.div`
-    position: relative;
-    width: fit-content;
-`,s=t.button`
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: 0;
-`,l=t.div`
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-`;export{e as BubbleWrap,l as ContentWrapper,s as HOCTrigger,m as HOCWrapper,n as MobileModalBox};
+import"./popover.styles_ujnf0h.css";const o={popoverCard:{maxHeight:"--fds-internal-popover-popoverCard-maxHeight",overflowY:"--fds-internal-popover-popoverCard-overflowY"}},p="p1scb124",r="p1jmdldd",e="p51fygj",v="p1hzbz92";export{r as popoverCard,e as popoverCardWithMaxHeight,v as popoverCardWithOverflow,p as popoverContainer,o as tokens};
 //# sourceMappingURL=popover.styles.js.map

package/popover/popover.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.styles.js","sources":["../../src/popover/popover.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ModalBox } from \"../modal/modal-box\";\nimport { V2_MediaQuery } from \"../v2_media\";\nimport { V2_Transition } from \"../v2_transition\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\nexport type OffsetPosition =\n    | \"top-center\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"left\"\n    | \"right\"\n    | \"none\";\n\ninterface PopoverStyleProps {\n    $visible?: boolean;\n    $offset: OffsetPosition;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getVisibilityStyle = (visible: boolean | undefined) => {\n    if (visible) {\n        return css`\n            visibility: visible;\n            opacity: 1;\n            transition: ${V2_Transition.Base};\n            z-index: 50;\n        `;\n    } else {\n        return css`\n            visibility: hidden;\n            opacity: 0;\n            transition: ${V2_Transition.Base};\n            z-index: -1;\n        `;\n    }\n};\n\nconst getBubblePosition = (offset: OffsetPosition) => {\n    switch (offset) {\n        case \"top-center\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 50%;\n                -moz-transform: translateX(-50%);\n                -webkit-transform: translateX(-50%);\n                transform: translateX(-50%);\n            `;\n        case \"top-left\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 0;\n            `;\n        case \"top-right\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                right: 0;\n            `;\n        case \"left\":\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 0;\n            `;\n        case \"right\":\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                right: 0;\n            `;\n        default:\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 50%;\n                -moz-transform: translateX(-50%);\n                -webkit-transform: translateX(-50%);\n                transform: translateX(-50%);\n            `;\n    }\n};\n\nexport const BubbleWrap = styled.div<PopoverStyleProps>`\n    max-width: 30rem;\n    pointer-events: auto;\n    position: absolute;\n\n    ${(props) => getVisibilityStyle(props.$visible)}\n    ${(props) => getBubblePosition(props.$offset)}\n\n\t${V2_MediaQuery.MaxWidth.mobileL} {\n        display: none;\n    }\n`;\n\nexport const MobileModalBox = styled(ModalBox)`\n    padding: 3.5rem 1.25rem 2.5rem;\n`;\n\nexport const HOCWrapper = styled.div`\n    position: relative;\n    width: fit-content;\n`;\n\nexport const HOCTrigger = styled.button`\n    cursor: pointer;\n    background: none;\n    border: none;\n    padding: 0;\n`;\n\nexport const ContentWrapper = styled.div`\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n"],"names":["BubbleWrap","styled","div","props","$visible","css","V2_Transition","Base","offset","getBubblePosition","$offset","V2_MediaQuery","MaxWidth","mobileL","MobileModalBox","ModalBox","HOCWrapper","HOCTrigger","button","ContentWrapper"],"mappings":"2MA0BA,MAuEaA,EAAaC,EAAOC,GAAsB;;;;;MAKhDC,GAA6BA,EAAMC,SA1E3BC,CAAG;;;0BAGQC,EAAcC;;UAIzBF,CAAG;;;0BAGQC,EAAcC;;;MAiEjCJ,GA3DmB,CAACK,IACvB,OAAQA,GACJ,IAAK,aACD,OAAOH,CAAG;;;;;;;;cASd,IAAK,WACD,OAAOA,CAAG;;;;;cAMd,IAAK,YACD,OAAOA,CAAG;;;;;cAMd,IAAK,OACD,OAAOA,CAAG;;;;;cAMd,IAAK,QACD,OAAOA,CAAG;;;;;cAMd,QACI,OAAOA,CAAG;;;;;;;;gBAkBLI,CAAkBN,EAAMO;;GAEtCC,EAAcC,SAASC;;;EAKbC,EAAiBb,EAAOc,EAAS;;EAIjCC,EAAaf,EAAOC,GAAG;;;EAKvBe,EAAahB,EAAOiB,MAAM;;;;;EAO1BC,EAAiBlB,EAAOC,GAAG;;;;;;"}
+{"version":3,"file":"popover.styles.js","sources":["../../src/popover/popover.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius } from \"../theme\";\n\nexport const tokens = {\n    popoverCard: {\n        maxHeight: \"--fds-internal-popover-popoverCard-maxHeight\",\n        overflowY: \"--fds-internal-popover-popoverCard-overflowY\",\n    },\n} as const;\n\nexport const popoverContainer = css`\n    max-width: 30rem;\n    padding: 0 1rem;\n    pointer-events: auto;\n    outline: none;\n`;\n\nexport const popoverCard = css`\n    color: ${Colour.text};\n\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius.full};\n        background-clip: padding-box;\n    }\n`;\n\nexport const popoverCardWithMaxHeight = css`\n    ${tokens.popoverCard.maxHeight}: initial;\n    max-height: var(${tokens.popoverCard.maxHeight});\n`;\n\nexport const popoverCardWithOverflow = css`\n    ${tokens.popoverCard.overflowY}: initial;\n    overflow-y: var(${tokens.popoverCard.overflowY});\n`;\n"],"names":["tokens","popoverCard","maxHeight","overflowY","popoverContainer","popoverCardWithMaxHeight","popoverCardWithOverflow"],"mappings":"2DAIO,MAAMA,EAAS,CAClBC,YAAa,CACTC,UAAW,+CACXC,UAAW,iDAINC,EAAgB,WAOhBH,EAAW,WAuBXI,EAAwB,UAKxBC,EAAuB"}

package/popover/popover.styles_ujnf0h.css

@@ -0,0 +1,4 @@
+.p1scb124{max-width:30rem;padding:0 1rem;pointer-events:auto;outline:none;}
+.p1jmdldd{color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .p1jmdldd{display:none;}.p1jmdldd::-webkit-scrollbar{width:14px;}.p1jmdldd::-webkit-scrollbar-track{background:transparent;}.p1jmdldd::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+.p51fygj{--fds-internal-popover-popoverCard-maxHeight:initial;max-height:var(--fds-internal-popover-popoverCard-maxHeight);}
+.p1hzbz92{--fds-internal-popover-popoverCard-overflowY:initial;overflow-y:var(--fds-internal-popover-popoverCard-overflowY);}

package/popover/types.d.ts

@@ -1,21 +1,59 @@
-/** @deprecated Use `PopoverV2` */
-export interface PopoverProps {
+import type { RefObject } from "react";
+export interface PopoverProps extends PopoverRenderProps {
     children: string | JSX.Element;
     visible?: boolean | undefined;
     id?: string | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     onMobileClose?: (() => void) | undefined;
+    ariaLabel?: string | undefined;
 }
-/** @deprecated Use `PopoverV2` */
-export interface PopoverHOCProps {
-    onPopoverAppear?: (() => void) | undefined;
-    onPopoverDismiss?: (() => void) | undefined;
+export interface PopoverRenderProps {
+    overflow?: PopoverOverflowType | undefined;
+    maxHeight?: number | undefined;
 }
-/** @deprecated Use `PopoverV2` */
-export interface PopoverHOCOptionsProps {
-    content: string | JSX.Element;
-    trigger?: "click" | "hover" | undefined;
+export type PopoverTriggerType = "click" | "hover";
+type Position = "top" | "right" | "bottom" | "left";
+type Alignment = "start" | "end";
+type AlignedPosition = `${Position}-${Alignment}`;
+export type PopoverOverflowType = "visible" | "hidden" | "clip" | "scroll" | "auto";
+export type PopoverPosition = Position | AlignedPosition;
+export interface PopoverTriggerProps {
+    children: React.ReactNode;
+    popoverContent: string | JSX.Element | ((renderProps: PopoverRenderProps) => React.ReactNode);
+    trigger?: PopoverTriggerType | undefined;
+    position?: PopoverPosition | undefined;
     id?: string | undefined;
+    zIndex?: number | undefined;
+    className?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * The root element that contains the popover element. Defaults to the document body.
+     *
+     * If the parent that contains the trigger element has a higher z-index than the popover,
+     * the popover may not be visible. Specify the parent element here instead
+     */
+    rootNode?: RefObject<HTMLElement> | undefined;
+    customOffset?: number | undefined;
+    delay?: {
+        open?: number | undefined;
+        close?: number | undefined;
+    } | undefined;
+    enableFlip?: boolean | undefined;
+    enableResize?: boolean | undefined;
+    overflow?: PopoverOverflowType | undefined;
+    popoverAriaLabel?: string | undefined;
+    triggerOnFocus?: boolean | undefined;
+    isModal?: boolean | undefined;
+    onPopoverAppear?: (() => void) | undefined;
+    onPopoverDismiss?: (() => void) | undefined;
+}
+export type PopoverInlineStyle = "default" | "underline" | "underline-dashed";
+export interface PopoverInlineProps extends Omit<PopoverTriggerProps, "children"> {
+    ariaLabel?: string | undefined;
+    content?: React.ReactNode | undefined;
+    icon?: JSX.Element | undefined;
+    underlineStyle?: PopoverInlineStyle | undefined;
+    underlineHoverStyle?: PopoverInlineStyle | undefined;
 }
+export {};

package/predictive-text-input/predictive-text-input.js

@@ -1,2 +1,2 @@
-import{__rest as e,__awaiter as r}from"../_virtual/_tslib.js";import{jsx as t,Fragment as o,jsxs as i}from"react/jsx-runtime";import s from"../external/lodash/debounce.js";import{useState as l,useRef as a,useCallback as n,useEffect as d}from"react";import{Input as p}from"../input/input.js";import{VisuallyHidden as c,concatIds as m}from"../shared/accessibility/index.js";import"styled-components";import"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as u}from"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as h}from"../shared/dropdown-list-v2/dropdown-list-state.js";import"../shared/dropdown-list-v2/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as g}from"../util/simple-id-generator.js";import"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{ElementWithDropdown as f}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list-v2/dropdown-list.styles.js";import"../shared/dropdown-list-v2/dropdown-search.js";import"../shared/dropdown-list-v2/nested-dropdown-list.styles.js";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import{InputWrapper as v}from"../shared/input-wrapper/input-wrapper.js";const w=w=>{var{className:x,"data-testid":j,selectedOption:y,minimumCharacters:b=3,fetchOptions:O,placeholder:T="Enter here...",readOnly:E=!1,disabled:I=!1,error:S,valueExtractor:_,listExtractor:C,displayValueExtractor:N,onSelectOption:$,alignment:B,dropdownZIndex:D,dropdownRootNode:A,dropdownWidth:L,"aria-describedby":R}=w,W=e(w,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const Z=e=>e?N?N(e):e.toString():"",[k,F]=l((()=>y?Z(y):"")),[V,q]=l((()=>y?Z(y):"")),[G,H]=l([]),[M,P]=l(!0),[z,J]=l(!1),[K,Q]=l(!!y),[U,X]=l(y),[Y,ee]=l(!1),[re,te]=l(!1),[oe]=l((()=>g.generate())),[ie,se]=l(null),le=`${oe}-instruction`,ae=a(null),ne=a(null),de=a(O),pe=n((e=>r(void 0,void 0,void 0,(function*(){if(de.current){J(!1),P(!0);try{const r=yield de.current(e);q(e),H(null!=r?r:[]),P(!1)}catch(e){J(!0),P(!1)}}}))),[]),ce=n(s((e=>{pe(e)}),500),[pe]);d((()=>{de.current=O}),[O]),d((()=>{k&&k.length>=b?K?k!==V&&ce(k):(ee(!0),ce(k)):ce.cancel(),""===k&&U&&(null==$||$(void 0,void 0),xe(),X(void 0)),y&&k!==Z(y)&&Q(!1)}),[k,y]),d((()=>{F(y?Z(y):""),q(y?Z(y):""),X(y),H([]),Q(!!y)}),[y]),d((()=>{var e;const r=je(),t=null!==(e=null==G?void 0:G.length)&&void 0!==e?e:0;"loading"===r&&k.length>=b?se("Loading suggested results"):"fail"!==r?!Y||M||z||se(0===t?k?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):se("Suggestions failed to load. Try again.")}),[G,k,z,M]),d((()=>()=>{ce.cancel()}),[ce]);const me=(e,r)=>{var t;null===(t=ne.current)||void 0===t||t.focus(),F(Z(e)),q(e?Z(e):""),Q(!0),X(e),ee(!1),null==$||$(e,r)},ue=()=>{te(!0)},he=e=>{Y||!ae.current||ae.current.contains(e.relatedTarget)||(te(!1),ve())},ge=()=>{ee(!1),te(!1)},fe=()=>{F(""),H([]),Q(!1),ee(!1),null==$||$(void 0,void 0)},ve=()=>{if(!K)if(U){const e=Z(U);F(e),ee(!1)}else fe()},we=e=>{F(e.target.value),Q(!1)},xe=e=>{q(""),Q(!1),H([]),P(!0)},je=()=>z?"fail":M?"loading":"success";return t(h,{children:t(f,{enabled:!E&&!I,isOpen:Y,renderElement:()=>i(v,{className:x,"data-testid":j,ref:ae,tabIndex:-1,onFocus:ue,onBlur:he,$focused:re,$disabled:I,$readOnly:E,$error:S,children:[i(c,{id:le,"aria-hidden":!0,children:["Type in ",b," or more characters for suggested results."]}),ie&&t(c,{"aria-live":"polite",children:ie}),t(p,Object.assign({role:"combobox",ref:ne,id:oe,type:"text",value:k,onChange:we,placeholder:T,readOnly:E,disabled:I,allowClear:!0,onClear:fe,"aria-expanded":Y,"aria-controls":oe,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:k.length<b?ve:void 0,styleType:"no-border","aria-describedby":m(R,le)},W))]}),renderDropdown:()=>t(o,{children:t(u,{listboxId:oe,listItems:G,onSelectItem:me,onDismiss:ge,valueExtractor:_,listExtractor:C,itemsLoadState:je(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>pe(k),width:L,matchElementWidth:!0})}),onOpen:()=>{!K&&k.length>=b&&te(!0)},onClose:()=>{ee(!1),te(!1),ve()},onDismiss:()=>{var e;ee(!1),te(!1),ve(),null===(e=ne.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:B,fitAvailableHeight:!0,customZIndex:D,rootNode:A})})};export{w as PredictiveTextInput};
+import{__rest as e,__awaiter as r}from"../_virtual/_tslib.js";import{jsx as t,Fragment as o,jsxs as i}from"react/jsx-runtime";import s from"../external/lodash/debounce.js";import{useState as l,useRef as n,useCallback as a,useEffect as d}from"react";import{Input as p}from"../input/input.js";import{VisuallyHidden as c,concatIds as m}from"../shared/accessibility/index.js";import"clsx";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as u}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css";import{DropdownList as h}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as f}from"../shared/dropdown-list/dropdown-list-state.js";import"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"@lifesg/react-icons/exclamation-circle-fill";import"@lifesg/react-icons/minus-square-fill";import"@lifesg/react-icons/square";import"@lifesg/react-icons/square-tick-fill";import"@lifesg/react-icons/tick";import"react-virtuoso";import"../markup/markup.js";import"../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css";import{ElementWithDropdown as g}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as x}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css";import"../shared/dropdown-list/dropdown-search.js";import"../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css";import"immer";import"../external/lodash/_getTag.js";import"../external/lodash/isArguments.js";import"../external/lodash/_baseGetTag.js";import"../external/lodash/isBuffer.js";import"../external/lodash/isTypedArray.js";import"../external/lodash/_Stack.js";import"../external/lodash/_SetCache.js";import"../external/lodash/_equalByTag.js";import"../shared/dropdown-list/virtuoso-components.js";const j=j=>{var{className:w,"data-testid":y,selectedOption:v,minimumCharacters:b=3,fetchOptions:_,placeholder:T="Enter here...",readOnly:O=!1,disabled:I=!1,error:k,valueExtractor:A,listExtractor:C,displayValueExtractor:E,onSelectOption:S,alignment:q,dropdownZIndex:N,dropdownRootNode:G,dropdownWidth:H,"aria-describedby":M}=j,P=e(j,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const B=e=>e?E?E(e):e.toString():"",[D,L]=l((()=>v?B(v):"")),[R,W]=l((()=>v?B(v):"")),[Z,$]=l([]),[F,V]=l(!0),[z,J]=l(!1),[K,Q]=l(!!v),[U,X]=l(v),[Y,ee]=l(!1),[re,te]=l(!1),oe=u(),[ie,se]=l(null),le=`${oe}-instruction`,ne=n(null),ae=n(null),de=n(_),pe=a((e=>r(void 0,void 0,void 0,(function*(){if(de.current){J(!1),V(!0);try{const r=yield de.current(e);W(e),$(null!=r?r:[]),V(!1)}catch(e){J(!0),V(!1)}}}))),[]),ce=a(s((e=>{pe(e)}),500),[pe]);d((()=>{de.current=_}),[_]),d((()=>{D&&D.length>=b?K?D!==R&&ce(D):(ee(!0),ce(D)):ce.cancel(),""===D&&U&&(null==S||S(void 0,void 0),we(),X(void 0)),v&&D!==B(v)&&Q(!1)}),[D,v]),d((()=>{L(v?B(v):""),W(v?B(v):""),X(v),$([]),Q(!!v)}),[v]),d((()=>{var e;const r=ye(),t=null!==(e=null==Z?void 0:Z.length)&&void 0!==e?e:0;"loading"===r&&D.length>=b?se("Loading suggested results"):"fail"!==r?!Y||F||z||se(0===t?D?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):se("Suggestions failed to load. Try again.")}),[Z,D,z,F]),d((()=>()=>{ce.cancel()}),[ce]);const me=(e,r)=>{var t;null===(t=ae.current)||void 0===t||t.focus(),L(B(e)),W(e?B(e):""),Q(!0),X(e),ee(!1),null==S||S(e,r)},ue=()=>{te(!0)},he=e=>{Y||!ne.current||ne.current.contains(e.relatedTarget)||(te(!1),xe())},fe=()=>{ee(!1),te(!1)},ge=()=>{L(""),$([]),Q(!1),ee(!1),null==S||S(void 0,void 0)},xe=()=>{if(!K)if(U){const e=B(U);L(e),ee(!1)}else ge()},je=e=>{L(e.target.value),Q(!1)},we=e=>{W(""),Q(!1),$([]),V(!0)},ye=()=>z?"fail":F?"loading":"success";return t(f,{children:t(g,{enabled:!O&&!I,isOpen:Y,renderElement:()=>i(x,{className:w,"data-testid":y,ref:ne,tabIndex:-1,onFocus:ue,onBlur:he,focused:re,disabled:I,readOnly:O,error:k,children:[i(c,{id:le,"aria-hidden":!0,children:["Type in ",b," or more characters for suggested results."]}),ie&&t(c,{"aria-live":"polite",children:ie}),t(p,Object.assign({role:"combobox",ref:ae,id:oe,type:"text",value:D,onChange:je,placeholder:T,readOnly:O,disabled:I,allowClear:!0,onClear:ge,"aria-expanded":Y,"aria-controls":oe,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:D.length<b?xe:void 0,styleType:"no-border","aria-describedby":m(M,le)},P))]}),renderDropdown:()=>t(o,{children:t(h,{listboxId:oe,listItems:Z,onSelectItem:me,onDismiss:fe,valueExtractor:A,listExtractor:C,itemsLoadState:ye(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>pe(D),width:H,matchElementWidth:!0})}),onOpen:()=>{!K&&D.length>=b&&te(!0)},onClose:()=>{ee(!1),te(!1),xe()},onDismiss:()=>{var e;ee(!1),te(!1),xe(),null===(e=ae.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:q,fitAvailableHeight:!0,customZIndex:N,rootNode:G})})};export{j as PredictiveTextInput};
 //# sourceMappingURL=predictive-text-input.js.map

package/predictive-text-input/predictive-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"predictive-text-input.js","sources":["../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={isFocused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["PredictiveTextInput","_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","SimpleIdGenerator","generate","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"orDAaO,MAAMA,EAA6BC,QAAAC,UACtCA,EACA,cAAeC,EAAMC,eACrBA,EAAcC,kBACdA,EAAoB,EAACC,aACrBA,EAAYC,YACZA,EAAc,gBAAeC,SAC7BA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,eACLA,EAAcC,cACdA,EAAaC,sBACbA,EAAqBC,eACrBA,EAAcC,UACdA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,cAChBA,EACA,mBAAoBC,KACjBC,EAAUC,EAAApB,EAnByB,CAAA,YAAA,cAAA,iBAAA,oBAAA,eAAA,cAAA,WAAA,WAAA,QAAA,iBAAA,gBAAA,wBAAA,iBAAA,YAAA,iBAAA,mBAAA,gBAAA,qBAqBtC,MAAMqB,EAAmBC,GAChBA,EACEV,EACDA,EAAsBU,GACtBA,EAAKC,WAHO,IASfC,EAAOC,GAAYC,GAAiB,IACvCvB,EAAiBkB,EAAgBlB,GAAkB,MAEhDwB,EAAeC,GAAoBF,GAAiB,IACvDvB,EAAiBkB,EAAgBlB,GAAkB,MAEhD0B,EAASC,GAAcJ,EAAc,KACrCK,EAAWC,GAAgBN,GAAkB,IAC7CO,EAASC,GAAcR,GAAkB,IACzCS,EAAkBC,GAAuBV,IAC1CvB,IAECkC,EAAoBC,GAAyBZ,EAChDvB,IAEGoC,EAAQC,IAAad,GAAS,IAC9Be,GAAWC,IAAgBhB,GAAS,IAEpCiB,IAAcjB,GAAiB,IAAMkB,EAAkBC,cACvDC,GAAoBC,IAAyBrB,EAChD,MAEEsB,GAAgB,GAAGL,iBAEnBM,GAAUC,EAA8B,MACxCC,GAAcD,EAAgC,MAE9CE,GAAkBF,EAAO7C,GAKzBgD,GAAqBC,GAAmB9B,GAAiB+B,OAAA,OAAA,OAAA,GAAA,YAC3D,GAAKH,GAAgBI,QAArB,CACAtB,GAAW,GACXF,GAAa,GACb,IACI,MAAMyB,QAAuBL,GAAgBI,QAAQhC,GACrDI,EAAiBJ,GACjBM,EAAW2B,QAAAA,EAAkB,IAC7BzB,GAAa,EACjB,CAAE,MAAAhC,GACEkC,GAAW,GACXF,GAAa,EACjB,CAX8B,CAYlC,KAAG,IAEG0B,GAAwBJ,EAC1BK,GAAUnC,IACN6B,GAAmB7B,EAAM,GAC1B,KACH,CAAC6B,KAOLO,GAAU,KACNR,GAAgBI,QAAUnD,CAAY,GACvC,CAACA,IAEJuD,GAAU,KAOFpC,GAASA,EAAMqC,QAAUzD,EACpB+B,EAGMX,IAAUG,GACjB+B,GAAsBlC,IAHtBgB,IAAU,GACVkB,GAAsBlC,IAK1BkC,GAAsBI,SAGZ,KAAVtC,GAAgBa,IAChBxB,SAAAA,OAAiBkD,OAAWA,GAC5BC,KACA1B,OAAsByB,IAGtB5D,GAAkBqB,IAAUH,EAAgBlB,IAC5CiC,GAAoB,EACxB,GACD,CAACZ,EAAOrB,IAEXyD,GAAU,KACNnC,EAAStB,EAAiBkB,EAAgBlB,GAAkB,IAC5DyB,EAAiBzB,EAAiBkB,EAAgBlB,GAAkB,IACpEmC,EAAsBnC,GACtB2B,EAAW,IACXM,IAAsBjC,EAAe,GACtC,CAACA,IAEJyD,GAAU,WACN,MAAMK,EAAQC,KACRC,EAAuB,QAAfnE,EAAA6B,aAAO,EAAPA,EAASgC,cAAM,IAAA7D,EAAAA,EAAI,EAEnB,YAAViE,GAAuBzC,EAAMqC,QAAUzD,EACvC2C,GAAsB,6BAIZ,SAAVkB,GAKA1B,GAAWR,GAAcE,GAErBc,GADU,IAAVoB,EACsB3C,EAAQ,oBAAsB,KAGhD,GAAG2C,WACCA,EAAQ,EAAI,IAAM,0DAV9BpB,GAAsB,yCAc1B,GACD,CAAClB,EAASL,EAAOS,EAASF,IAK7B6B,GAAU,IACC,KACHF,GAAsBI,QAAQ,GAEnC,CAACJ,KAKJ,MAAMU,GAAsB,CAAC9C,EAAS+C,WACf,QAAnBrE,EAAAmD,GAAYK,eAAO,IAAAxD,GAAAA,EAAEsE,QACrB7C,EAASJ,EAAgBC,IACzBM,EAAiBN,EAAOD,EAAgBC,GAAQ,IAChDc,GAAoB,GACpBE,EAAsBhB,GACtBkB,IAAU,GACV3B,SAAAA,EAAiBS,EAAM+C,EAAe,EAepCE,GAAkB,KACpB7B,IAAa,EAAK,EAGhB8B,GAAkBC,IAEflC,IACDU,GAAQO,SACPP,GAAQO,QAAQkB,SAASD,EAAEE,iBAE5BjC,IAAa,GACbkC,KACJ,EAGEC,GAAoB,KACtBrC,IAAU,GACVE,IAAa,EAAM,EAUjBoC,GAAgB,KAClBrD,EAAS,IACTK,EAAW,IACXM,GAAoB,GACpBI,IAAU,GACV3B,SAAAA,OAAiBkD,OAAWA,EAAU,EAGpCa,GAAe,KACjB,IAAKzC,EACD,GAAIE,EAAoB,CACpB,MAAM0C,EAAY1D,EAAgBgB,GAClCZ,EAASsD,GACTvC,IAAU,EACd,MACIsC,IAER,EAGEE,GAAgBP,IAClBhD,EAASgD,EAAEQ,OAAOC,OAClB9C,GAAoB,EAAM,EAGxB4B,GAAyB1C,IAC3BM,EAAgD,IAChDQ,GAAoB,GACpBN,EAAW,IACXE,GAAa,EAAK,EAMhBkC,GAAoB,IAClBjC,EAAgB,OACbF,EAAY,UAAY,UAiFnC,OACIoD,EAACC,EAAiB,CAAAC,SACdF,EAACG,EAAmB,CAChBC,SAAUhF,IAAaC,EACvB+B,OAAQA,EACRiD,cAhFe,IAEnBC,EAACC,EAAY,CACTzF,UAAWA,EAAS,cACPC,EACbyF,IAAK1C,GACL2C,UAAU,EACVC,QAAStB,GACTuB,OAAQtB,GAAcuB,SACZtD,aACCjC,EAAQwF,UACRzF,EAAQ0F,OACXxF,EAAK4E,SAAA,CAEbI,EAACS,EAAc,CAACC,GAAInD,GAAa,eAAA,EAAAqC,SAAA,CAAA,WACpBjF,kDAGZ0C,IACGqC,EAACe,EAAc,CAAA,YAAW,SAAQb,SAC7BvC,KAGTqC,EAACiB,EAAKC,OAAAC,OAAA,CACFC,KAAK,WACLZ,IAAKxC,GACLgD,GAAIxD,GACJ6D,KAAK,OACLtB,MAAO1D,EACPiF,SAAUzB,GACV1E,YAAaA,EACbC,SAAUA,EACVC,SAAUA,EACVkG,YAAU,EACVC,QAAS7B,GAAa,gBACPvC,kBACAI,GAAU,oBACP,OAAM,gBACV,UACdmD,OACItE,EAAMqC,OAASzD,EACTwE,QACAb,EAEV6C,UAAU,+BACQC,EAAU3F,EAAiB8B,KACzC7B,OAmCR2F,eA7BW,IAEf3B,EAAA4B,EAAA,CAAA1B,SACIF,EAAC6B,EAAY,CACTC,UAAWtE,GACXuE,UAAWrF,EACXsF,aAAc/C,GACdgD,UAAWvC,GACXnE,eAAgBA,EAChBC,cAAeA,EACf0G,eAAgBnD,KAChBoD,mBAAoB,MACpBC,aAAc,EACdC,iBAAkB,YAClBC,oBACAC,QAAS,IAAMrE,GAAmB7B,GAClCmG,MAAO1G,EACP2G,mBAAiB,MAarBC,OApKO,MACV1F,GAAoBX,EAAMqC,QAAUzD,GACrCsC,IAAa,EACjB,EAkKQoF,QA/JQ,KAChBtF,IAAU,GACVE,IAAa,GACbkC,IAAc,EA6JNwC,UAtIU,WAClB5E,IAAU,GACVE,IAAa,GACbkC,KACmB,QAAnB5E,EAAAmD,GAAYK,eAAO,IAAAxD,GAAAA,EAAEsE,OAAO,EAmIpByD,eAAe,EACfC,OAAQ,EACRlH,UAAWA,EACXmH,oBAAkB,EAClBC,aAAcnH,EACdoH,SAAUnH,KAEE"}
+{"version":3,"file":"predictive-text-input.js","sources":["../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const internalId = useId();\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={isFocused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["PredictiveTextInput","_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/predictive-text-input/types.d.ts

@@ -22,7 +22,7 @@ export interface PredictiveTextInputProps<T, V> extends React.AriaAttributes {
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Custom width for the dropdown in pixels. When specified, the dropdown will use this
+     * Custom width for the dropdown. When specified, the dropdown will use this
      * width instead of matching the input element width.
      */
     dropdownWidth?: string | undefined;

package/progress-indicator/progress-indicator.d.ts

@@ -1,2 +1,2 @@
 import type { ProgressIndicatorProps } from "./types";
-export declare const ProgressIndicator: <T>({ steps, currentIndex, displayExtractor, fadeColor: _fadeColor, fadePosition: _fadePosition, ...otherProps }: ProgressIndicatorProps<T>) => import("react/jsx-runtime").JSX.Element | null;
+export declare const ProgressIndicator: <T>({ steps, currentIndex, displayExtractor, className, ...otherProps }: ProgressIndicatorProps<T>) => import("react/jsx-runtime").JSX.Element | null;

package/progress-indicator/progress-indicator.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import i from"../external/lodash/kebabCase.js";import{useContext as o}from"react";import{r as n}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as s}from"styled-components";import{VisuallyHidden as l}from"../shared/accessibility/index.js";import{V3_Breakpoint as d}from"../v3_theme/index.js";import{Wrapper as a,Content as c,Indicator as m,IndicatorBar as h,IndicatorTitleTablet as p,IndicatorTitleDesktop as u}from"./progress-indicator.style.js";const g=g=>{var{steps:f,currentIndex:x,displayExtractor:j,fadeColor:v,fadePosition:b}=g,$=e(g,["steps","currentIndex","displayExtractor","fadeColor","fadePosition"]);const y=o(s),C=d["lg-max"]({theme:y}),w=n.useMediaQuery({maxWidth:C}),_=e=>{var r;return j?j(e):null!==(r=null==e?void 0:e.toString())&&void 0!==r?r:""},E=(e,r)=>e<r?"Completed step":e===r?"Current step":"Upcoming step",I=(e,r)=>i(`${E(e,r)} ${e}`);if(!f.length)return null;return r(a,Object.assign({},$,{children:[t(c,{children:f.map(((e,r)=>{const i=r<=x;return t(m,{id:I(r,x),children:t(h,{$highlighted:i})},r)}))}),t(c,{children:w?r(m,{id:I(x,x),children:[r(p,{weight:"semibold",id:`${I(x,x)}-counter`,children:["Step ",x+1," of ",f.length]}),t(p,{weight:"regular",id:`${I(x,x)}-title`,children:_(f[x])})]},x):f.map(((e,i)=>{const o=i<=x,n=i===x,s=n?"bold":"regular";return t(m,{id:`${I(i,x)}-title`,children:r(u,{$highlighted:o,weight:s,"aria-current":n,children:[_(e),t(l,{children:E(i,x)})]})},i)}))})]}))};export{g as ProgressIndicator};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import i from"clsx";import s from"../external/lodash/kebabCase.js";import{VisuallyHidden as o}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../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{useMaxWidthMediaQuery as a}from"../theme/utils/use-media-query.js";import{Typography as m}from"../typography/index.js";import{wrapper as l,content as n,indicator as d,indicatorBar as c,indicatorBarHighlighted as p,indicatorTitleTablet as h,indicatorTitleDesktop as u,indicatorTitleDesktopHighlighted as j}from"./progress-indicator.styles.js";const g=g=>{var{steps:v,currentIndex:x,displayExtractor:y,className:N}=g,f=e(g,["steps","currentIndex","displayExtractor","className"]);const b=a("lg"),k=e=>{var r;return y?y(e):null!==(r=null==e?void 0:e.toString())&&void 0!==r?r:""},$=(e,r)=>e<r?"Completed step":e===r?"Current step":"Upcoming step",w=(e,r)=>s(`${$(e,r)} ${e}`);if(!v.length)return null;return r("div",Object.assign({className:i(l,N)},f,{children:[t("div",{className:n,children:v.map(((e,r)=>{const s=r<=x;return t("div",{id:w(r,x),className:d,children:t("div",{className:i(c,s&&p)})},r)}))}),t("div",{className:n,children:b?r("div",{id:w(x,x),className:d,children:[r(m.BodyMD,{className:h,weight:"semibold",id:`${w(x,x)}-counter`,children:["Step ",x+1," of ",v.length]}),t(m.BodyMD,{className:h,weight:"regular",id:`${w(x,x)}-title`,children:k(v[x])})]},x):v.map(((e,s)=>{const a=s<=x,l=s===x,n=l?"bold":"regular";return t("div",{id:`${w(s,x)}-title`,className:d,children:r(m.BodyMD,{className:i(u,a&&j),weight:n,"aria-current":l,children:[k(e),t(o,{children:$(s,x)})]})},s)}))})]}))};export{g as ProgressIndicator};
 //# sourceMappingURL=progress-indicator.js.map

package/progress-indicator/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sources":["../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import kebabCase from \"lodash/kebabCase\";\nimport { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Content,\n    Indicator,\n    IndicatorBar,\n    IndicatorTitleDesktop,\n    IndicatorTitleTablet,\n    Wrapper,\n} from \"./progress-indicator.style\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    fadeColor: _fadeColor,\n    fadePosition: _fadePosition,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isTablet = useMediaQuery({\n        maxWidth: tabletBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <Indicator key={stepIndex} id={getId(stepIndex, currentIndex)}>\n                    <IndicatorBar $highlighted={highlighted}></IndicatorBar>\n                </Indicator>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <Indicator\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                >\n                    <IndicatorTitleDesktop\n                        $highlighted={highlighted}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </IndicatorTitleDesktop>\n                </Indicator>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <Indicator\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n            >\n                <IndicatorTitleTablet\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </IndicatorTitleTablet>\n                <IndicatorTitleTablet\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </IndicatorTitleTablet>\n            </Indicator>\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <Content>{renderBars()}</Content>\n            <Content>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </Content>\n        </Wrapper>\n    );\n};\n"],"names":["ProgressIndicator","_a","steps","currentIndex","displayExtractor","fadeColor","_fadeColor","fadePosition","_fadePosition","otherProps","__rest","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","isTablet","useMediaQuery","maxWidth","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","Wrapper","Object","assign","children","_jsx","Content","map","step","highlighted","Indicator","id","IndicatorBar","$highlighted","IndicatorTitleTablet","weight","current","fontWeight","IndicatorTitleDesktop","VisuallyHidden"],"mappings":"gkBAiBO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EACAC,UAAWC,EACXC,aAAcC,GAAaP,EACxBQ,EAAUC,EAAAT,EANqB,wEAWlC,MAAMU,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAC3BC,SAAUJ,IAcRK,EAAmBC,UACrB,OAAIhB,EACOA,EAAiBgB,GAEL,QAAhBnB,EAAAmB,aAAI,EAAJA,EAAMC,kBAAU,IAAApB,EAAAA,EAAI,EAAE,EAG3BqB,EAAmB,CAACC,EAAmBpB,IACrCoB,EAAYpB,EACL,iBACAoB,IAAcpB,EACd,eAEA,gBAITqB,EAAQ,CAACD,EAAmBpB,IACvBsB,EACH,GAAGH,EAAiBC,EAAWpB,MAAiBoB,KAOxD,IAAKrB,EAAMwB,OAAQ,OAAO,KA+D1B,OACIC,EAACC,EAAOC,OAAAC,OAAA,CAAA,EAAKrB,EAAU,CAAAsB,SAAA,CACnBC,EAACC,EAAO,CAAAF,SA9DL7B,EAAMgC,KAAI,CAACC,EAASZ,KAEvB,MAAMa,EAAcb,GAAapB,EAEjC,OACI6B,EAACK,EAAS,CAAiBC,GAAId,EAAMD,EAAWpB,GAAa4B,SACzDC,EAACO,EAAY,CAAAC,aAAeJ,KADhBb,EAEJ,MAwDhBS,EAACC,EAAO,CAAAF,SACHf,EAxBLW,EAACU,EAAS,CAENC,GAAId,EAAMrB,EAAcA,GAAa4B,SAAA,CAErCJ,EAACc,EAAoB,CACjBC,OAAQ,WACRJ,GAAI,GAAGd,EAAMrB,EAAcA,aAAuB4B,SAAA,CAAA,QAE5C5B,EAAe,EAAC,OAAMD,EAAMwB,UAEtCM,EAACS,EAAoB,CACjBC,OAAQ,UACRJ,GAAI,GAAGd,EAAMrB,EAAcA,WAAqB4B,SAE/CZ,EAAgBjB,EAAMC,QAbtBA,GA5BND,EAAMgC,KAAI,CAACC,EAASZ,KACvB,MAAMa,EAAcb,GAAapB,EAC3BwC,EAAUpB,IAAcpB,EACxByC,EAAaD,EAAU,OAAS,UAEtC,OACIX,EAACK,EAAS,CAENC,GAAI,GAAGd,EAAMD,EAAWpB,WAAqB4B,SAE7CJ,EAACkB,EAAqB,CAAAL,aACJJ,EACdM,OAAQE,iBACMD,EAAOZ,SAAA,CAEpBZ,EAAgBgB,GACjBH,EAACc,EAAc,CAAAf,SACVT,EAAiBC,EAAWpB,SAVhCoB,EAaG,SAiCV"}
+{"version":3,"file":"progress-indicator.js","sources":["../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport kebabCase from \"lodash/kebabCase\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./progress-indicator.styles\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    className,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={getId(stepIndex, currentIndex)}\n                    className={styles.indicator}\n                >\n                    <div\n                        className={clsx(\n                            styles.indicatorBar,\n                            highlighted && styles.indicatorBarHighlighted\n                        )}\n                    />\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                    className={styles.indicator}\n                >\n                    <Typography.BodyMD\n                        className={clsx(\n                            styles.indicatorTitleDesktop,\n                            highlighted &&\n                                styles.indicatorTitleDesktopHighlighted\n                        )}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </Typography.BodyMD>\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <div\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n                className={styles.indicator}\n            >\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </Typography.BodyMD>\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </Typography.BodyMD>\n            </div>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div className={styles.content}>{renderBars()}</div>\n            <div className={styles.content}>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </div>\n        </div>\n    );\n};\n"],"names":["ProgressIndicator","_a","steps","currentIndex","displayExtractor","className","otherProps","__rest","isTablet","useMaxWidthMediaQuery","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","clsx","styles.wrapper","children","_jsx","styles.content","map","step","highlighted","id","styles.indicator","styles.indicatorBar","styles.indicatorBarHighlighted","Typography","BodyMD","styles.indicatorTitleTablet","weight","current","fontWeight","styles.indicatorTitleDesktop","styles.indicatorTitleDesktopHighlighted","VisuallyHidden"],"mappings":"q+BASO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EAAgBC,UAChBA,GAASJ,EACNK,EAAUC,EAAAN,EALqB,CAAA,QAAA,eAAA,mBAAA,cAUlC,MAAMO,EAAWC,EAAsB,MAajCC,EAAmBC,UACrB,OAAIP,EACOA,EAAiBO,GAEL,QAAhBV,EAAAU,aAAI,EAAJA,EAAMC,kBAAU,IAAAX,EAAAA,EAAI,EAAE,EAG3BY,EAAmB,CAACC,EAAmBX,IACrCW,EAAYX,EACL,iBACAW,IAAcX,EACd,eAEA,gBAITY,EAAQ,CAACD,EAAmBX,IACvBa,EACH,GAAGH,EAAiBC,EAAWX,MAAiBW,KAOxD,IAAKZ,EAAMe,OAAQ,OAAO,KAgF1B,OACIC,uBAAKb,UAAWc,EAAKC,EAAgBf,IAAgBC,EAAU,CAAAe,SAAA,CAC3DC,EAAA,MAAA,CAAKjB,UAAWkB,EAAcF,SA/E3BnB,EAAMsB,KAAI,CAACC,EAASX,KAEvB,MAAMY,EAAcZ,GAAaX,EAEjC,OACImB,EAAA,MAAA,CAEIK,GAAIZ,EAAMD,EAAWX,GACrBE,UAAWuB,EAAgBP,SAE3BC,EAAA,MAAA,CACIjB,UAAWc,EACPU,EACAH,GAAeI,MAPlBhB,EAUH,MAgEVQ,SAAKjB,UAAWkB,EAAcF,SACzBb,EA3BLU,EAAA,MAAA,CAEIS,GAAIZ,EAAMZ,EAAcA,GACxBE,UAAWuB,EAAgBP,SAAA,CAE3BH,EAACa,EAAWC,QACR3B,UAAW4B,EACXC,OAAQ,WACRP,GAAI,GAAGZ,EAAMZ,EAAcA,+BAErBA,EAAe,EAAC,OAAMD,EAAMe,UAEtCK,EAACS,EAAWC,QACR3B,UAAW4B,EACXC,OAAQ,UACRP,GAAI,GAAGZ,EAAMZ,EAAcA,oBAE1BO,EAAgBR,EAAMC,QAhBtBA,GAjCND,EAAMsB,KAAI,CAACC,EAASX,KACvB,MAAMY,EAAcZ,GAAaX,EAC3BgC,EAAUrB,IAAcX,EACxBiC,EAAaD,EAAU,OAAS,UAEtC,OACIb,EAAA,MAAA,CAEIK,GAAI,GAAGZ,EAAMD,EAAWX,WACxBE,UAAWuB,EAAgBP,SAE3BH,EAACa,EAAWC,OAAM,CACd3B,UAAWc,EACPkB,EACAX,GACIY,GAERJ,OAAQE,EAAU,eACJD,EAAOd,SAAA,CAEpBX,EAAgBe,GACjBH,EAACiB,EAAc,CAAAlB,SACVR,EAAiBC,EAAWX,SAfhCW,EAkBH,SAoCR"}

package/progress-indicator/progress-indicator.styles.d.ts

@@ -0,0 +1,9 @@
+export declare const INDICATOR_BAR_MARGIN_RIGHT_TABLET = 0.5;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const indicatorBar: import("@linaria/core").LinariaClassName;
+export declare const indicatorBarHighlighted: import("@linaria/core").LinariaClassName;
+export declare const indicatorTitleDesktop: import("@linaria/core").LinariaClassName;
+export declare const indicatorTitleDesktopHighlighted: import("@linaria/core").LinariaClassName;
+export declare const indicatorTitleTablet: import("@linaria/core").LinariaClassName;
+export declare const indicator: import("@linaria/core").LinariaClassName;

package/progress-indicator/progress-indicator.styles.js

@@ -0,0 +1,2 @@
+import"./progress-indicator.styles_1c038s4.css";const i="w103113g",s="ck7dr6z",o="i1k6bqsf",r="inywq69",c="i1ubzlq2",t="i8ugwdc",e="i8128on",g="i1vcego5";export{s as content,g as indicator,o as indicatorBar,r as indicatorBarHighlighted,c as indicatorTitleDesktop,t as indicatorTitleDesktopHighlighted,e as indicatorTitleTablet,i as wrapper};
+//# sourceMappingURL=progress-indicator.styles.js.map

package/progress-indicator/progress-indicator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator.styles.js","sources":["../../src/progress-indicator/progress-indicator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\n// Units in rem\nexport const INDICATOR_BAR_MARGIN_RIGHT_TABLET = 0.5;\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n\n    margin: 2rem 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: 1.5rem 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 1rem 0;\n    }\n`;\n\nexport const content = css`\n    display: flex;\n    flex-basis: 0;\n    justify-content: space-between;\n    width: 100%;\n`;\n\nexport const indicatorBar = css`\n    height: 4px;\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const indicatorBarHighlighted = css`\n    background-color: ${Colour[\"bg-primary-subtle\"]};\n`;\n\nexport const indicatorTitleDesktop = css`\n    overflow-wrap: anywhere;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const indicatorTitleDesktopHighlighted = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const indicatorTitleTablet = css`\n    overflow-wrap: anywhere;\n    color: ${Colour.text};\n`;\n\nexport const indicator = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    &:not(:last-child) {\n        margin-right: ${INDICATOR_BAR_MARGIN_RIGHT_TABLET + \"rem\"};\n    }\n`;\n"],"names":["wrapper","content","indicatorBar","indicatorBarHighlighted","indicatorTitleDesktop","indicatorTitleDesktopHighlighted","indicatorTitleTablet","indicator"],"mappings":"kFAUO,MAAMA,EAAO,WAePC,EAAO,UAOPC,EAAY,WAOZC,EAAuB,UAIvBC,EAAqB,WAKrBC,EAAgC,UAIhCC,EAAoB,UAKpBC,EAAS"}

package/progress-indicator/progress-indicator.styles_1c038s4.css

@@ -0,0 +1,8 @@
+.w103113g{position:relative;width:100%;margin:2rem 0;}:where(body.fds-breakpoint-xl-max) .w103113g{margin:1.5rem 0;}:where(body.fds-breakpoint-lg-max) .w103113g{margin:1rem 0;}
+.ck7dr6z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;}
+.i1k6bqsf{height:4px;margin-bottom:var(--fds-spacing-8);border-radius:var(--fds-radius-full);background-color:var(--fds-colour-bg-disabled);}
+.inywq69{background-color:var(--fds-colour-bg-primary-subtle);}
+.i1ubzlq2{overflow-wrap:anywhere;color:var(--fds-colour-text-disabled);}
+.i8ugwdc{color:var(--fds-colour-text-primary);}
+.i8128on{overflow-wrap:anywhere;color:var(--fds-colour-text);}
+.i1vcego5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}.i1vcego5:not(:last-child){margin-right:0.5rem;}

package/progress-indicator/types.d.ts

@@ -1,14 +1,8 @@
-type FadePosition = "left" | "right" | "both";
 export interface ProgressIndicatorProps<T> {
     steps: T[];
     currentIndex: number;
-    /** @deprecated Scrolling behaviour has been removed hence this attribute is no longer needed */
-    fadeColor?: string[] | undefined;
-    /** @deprecated Scrolling behaviour has been removed hence this attribute is no longer needed */
-    fadePosition?: FadePosition | undefined;
     displayExtractor?: ((item: T) => string) | undefined;
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
 }
-export {};

package/radio-button/radio-button.d.ts

@@ -1,2 +1,2 @@
 import type { RadioButtonProps } from "./types";
-export declare const RadioButton: ({ className, checked, disabled, displaySize, onChange, ...otherProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioButton: ({ className, checked, disabled, displaySize, focusableWhenDisabled, onChange, tabIndex, ...otherProps }: RadioButtonProps) => import("react/jsx-runtime").JSX.Element;

package/radio-button/radio-button.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as a,jsx as d}from"react/jsx-runtime";import{Container as i,Input as t,StyledCheckedIcon as s,StyledUnCheckedIcon as r}from"./radio-button.styles.js";const l=l=>{var{className:o,checked:c,disabled:n,displaySize:h="default",onChange:b}=l,m=e(l,["className","checked","disabled","displaySize","onChange"]);return a(i,{$selected:c,$disabled:n,className:o,$displaySize:h,"data-testid":"radio-button",children:[d(t,Object.assign({type:"radio","data-testid":"radio-input",onChange:e=>{n||null==b||b(e)},checked:c,disabled:n},m)),c?d(s,{"data-testid":"radio-checked",$disabled:n,"aria-hidden":!0}):d(r,{"data-testid":"radio-unchecked",$disabled:n,"aria-hidden":!0})]})};export{l as RadioButton};
+import{__rest as a}from"../_virtual/_tslib.js";import{jsxs as e,jsx as d}from"react/jsx-runtime";import{CircleDotIcon as i,CircleIcon as t}from"@lifesg/react-icons";import s from"clsx";import{input as r,inputActive as l,container as n,icon as o,checkedIconDisabled as c,checkedIcon as m,uncheckedIconDisabled as b,uncheckedIcon as h}from"./radio-button.styles.js";const p=p=>{var{className:u,checked:f,disabled:x,displaySize:N="default",focusableWhenDisabled:g,onChange:k,tabIndex:y}=p,j=a(p,["className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex"]);const v=!!x&&!!g,z=!!x&&!g;return e("div",{className:s(n,u),"data-display-size":N,"data-testid":"radio-button",children:[d("input",Object.assign({type:"radio","data-testid":"radio-input",onChange:a=>{x?a.preventDefault():null==k||k(a)},checked:f,disabled:z,"aria-disabled":v,tabIndex:v?0:y,className:s(r,!x&&l)},j)),f?d(i,{"data-testid":"radio-checked",className:s(o,x?c:m),"aria-hidden":!0}):d(t,{"data-testid":"radio-unchecked",className:s(o,x?b:h),"aria-hidden":!0})]})};export{p as RadioButton};
 //# sourceMappingURL=radio-button.js.map

package/radio-button/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sources":["../../src/radio-button/radio-button.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledUnCheckedIcon,\n} from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    onChange,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!disabled) {\n            onChange?.(event);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderIcon = () => {\n        return checked ? (\n            <StyledCheckedIcon\n                data-testid=\"radio-checked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        ) : (\n            <StyledUnCheckedIcon\n                data-testid=\"radio-unchecked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <Container\n            $selected={checked}\n            $disabled={disabled}\n            className={className}\n            $displaySize={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <Input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={disabled}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["RadioButton","_a","className","checked","disabled","displaySize","onChange","otherProps","__rest","_jsxs","Container","$selected","$disabled","$displaySize","children","_jsx","Input","Object","assign","type","event","StyledCheckedIcon","StyledUnCheckedIcon"],"mappings":"iNAUO,MAAMA,EAAeC,IAAA,IAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,SACvBA,GAAQL,EACLM,EAAUC,EAAAP,EANW,6DAqCxB,OACIQ,EAACC,EAAS,CAAAC,UACKR,EAAOS,UACPR,EACXF,UAAWA,EAASW,aACNR,gBACF,eAAcS,SAAA,CAE1BC,EAACC,EAAKC,OAAAC,OAAA,CACFC,KAAK,sBACO,cACZb,SArCYc,IACfhB,GACDE,SAAAA,EAAWc,EACf,EAmCQjB,QAASA,EACTC,SAAUA,GACNG,IA7BLJ,EACHY,EAACM,EAAiB,CAAA,cACF,gBAAeT,UAChBR,EAAQ,eAAA,IAIvBW,EAACO,EAAmB,CAAA,cACJ,kBAAiBV,UAClBR,EAAQ,eAAA,MAuBf"}
+{"version":3,"file":"radio-button.js","sources":["../../src/radio-button/radio-button.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { ChangeEvent } from \"react\";\n\nimport * as styles from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    focusableWhenDisabled,\n    onChange,\n    tabIndex,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        return checked ? (\n            <CircleDotIcon\n                data-testid=\"radio-checked\"\n                className={clsx(\n                    styles.icon,\n                    disabled ? styles.checkedIconDisabled : styles.checkedIcon\n                )}\n                aria-hidden\n            />\n        ) : (\n            <CircleIcon\n                data-testid=\"radio-unchecked\"\n                className={clsx(\n                    styles.icon,\n                    disabled\n                        ? styles.uncheckedIconDisabled\n                        : styles.uncheckedIcon\n                )}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(styles.container, className)}\n            data-display-size={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                className={clsx(styles.input, !disabled && styles.inputActive)}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["RadioButton","_a","className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex","otherProps","__rest","isFocusableWhenDisabled","isNativeDisabled","_jsxs","clsx","styles.container","children","_jsx","Object","assign","type","event","preventDefault","styles.input","styles.inputActive","CircleDotIcon","styles.icon","styles.checkedIconDisabled","styles.checkedIcon","CircleIcon","styles.uncheckedIconDisabled","styles.uncheckedIcon"],"mappings":"4WAOO,MAAMA,EAAeC,QAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,sBACvBA,EAAqBC,SACrBA,EAAQC,SACRA,GAAQP,EACLQ,EAAUC,EAAAT,EARW,gGAaxB,MAAMU,IAA4BP,KAAcE,EAC1CM,IAAqBR,IAAaE,EAyCxC,OACIO,EAAA,MAAA,CACIX,UAAWY,EAAKC,EAAkBb,GAAU,oBACzBG,gBACP,eAAcW,SAAA,CAE1BC,EAAA,QAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,cACA,cACZb,SA7CYc,IAChBjB,EACAiB,EAAMC,iBAIVf,SAAAA,EAAWc,EAAM,EAwCTlB,QAASA,EACTC,SAAUQ,EAAgB,gBACXD,EACfH,SAAUG,EAA0B,EAAIH,EACxCN,UAAWY,EAAKS,GAAenB,GAAYoB,IACvCf,IAtCLN,EACHc,EAACQ,EAAa,CAAA,cACE,gBACZvB,UAAWY,EACPY,EACAtB,EAAWuB,EAA6BC,sBAKhDX,EAACY,EAAU,CAAA,cACK,kBACZ3B,UAAWY,EACPY,EACAtB,EACM0B,EACAC,GACT,eAAA,MAwBH"}