@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/popover/types.d.ts

@@ -1,21 +1,173 @@
-/** @deprecated Use `PopoverV2` */
-export interface PopoverProps {
+import type { RefObject } from "react";
+/**
+ * Props for the `Popover` component.
+ */
+export interface PopoverProps extends PopoverRenderProps {
+    /**
+     * Content displayed inside the popover. A plain string is automatically
+     * wrapped in a `Typography.BodyMD` element.
+     */
     children: string | JSX.Element;
+    /**
+     * Controls whether the popover is visible.
+     *
+     * @default false
+     */
     visible?: boolean | undefined;
     id?: string | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when the user dismisses the popover on a mobile viewport, either
+     * by tapping the overlay or the close button.
+     */
     onMobileClose?: (() => void) | undefined;
+    /**
+     * Accessible label for the `role="dialog"` element.
+     *
+     * @default "More information"
+     */
+    ariaLabel?: string | undefined;
 }
-/** @deprecated Use `PopoverV2` */
-export interface PopoverHOCProps {
-    onPopoverAppear?: (() => void) | undefined;
-    onPopoverDismiss?: (() => void) | undefined;
+/**
+ * Style constraints that control the popover card's height and overflow.
+ */
+export interface PopoverRenderProps {
+    /**
+     * CSS `overflow` value applied to the popover card body.
+     */
+    overflow?: PopoverOverflowType | undefined;
+    /**
+     * Maximum height of the popover card in pixels.
+     */
+    maxHeight?: number | undefined;
 }
-/** @deprecated Use `PopoverV2` */
-export interface PopoverHOCOptionsProps {
-    content: string | JSX.Element;
-    trigger?: "click" | "hover" | undefined;
+/**
+ * Interaction that opens the popover.
+ *
+ * @remarks On mobile viewports `"hover"` is automatically promoted to `"click"`.
+ */
+export type PopoverTriggerType = "click" | "hover";
+type Position = "top" | "right" | "bottom" | "left";
+type Alignment = "start" | "end";
+type AlignedPosition = `${Position}-${Alignment}`;
+/**
+ * CSS `overflow` value applied to the popover card body.
+ */
+export type PopoverOverflowType = "visible" | "hidden" | "clip" | "scroll" | "auto";
+/**
+ * Preferred placement of the popover relative to its trigger element.
+ */
+export type PopoverPosition = Position | AlignedPosition;
+/**
+ * Props for the `PopoverTrigger` component.
+ */
+export interface PopoverTriggerProps {
+    /**
+     * The trigger element rendered inside a focusable wrapper div.
+     */
+    children: React.ReactNode;
+    /**
+     * Content shown inside the popover panel. A string or JSX element is
+     * rendered inside the default `Popover`; a render function bypasses it
+     * for completely custom rendering.
+     */
+    popoverContent: string | JSX.Element | ((renderProps: PopoverRenderProps) => React.ReactNode);
+    /**
+     * Interaction that opens the popover.
+     *
+     * @remarks On mobile, always `"click"`.
+     *
+     * @default "click"
+     */
+    trigger?: PopoverTriggerType | undefined;
+    /**
+     * Preferred placement of the popover relative to the trigger.
+     *
+     * @default "top"
+     */
+    position?: PopoverPosition | undefined;
     id?: string | undefined;
+    /**
+     * Overrides the stacking context z-index for the floating popover layer.
+     * Falls back to the inherited floating context z-index when omitted.
+     */
+    zIndex?: number | undefined;
+    className?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * The root element that contains the popover element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * popover in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the popover,
+     * the popover may be obscured.
+     *
+     * @default document.body
+     */
+    rootNode?: RefObject<HTMLElement> | undefined;
+    /**
+     * Distance in pixels between the trigger element and the popover panel.
+     *
+     * @default 16
+     */
+    customOffset?: number | undefined;
+    /**
+     * Open and close delays in milliseconds. Only applies when `trigger` is `"hover"`.
+     */
+    delay?: {
+        open?: number | undefined;
+        close?: number | undefined;
+    } | undefined;
+    /**
+     * Allows the popover to flip to the opposite side when the preferred
+     * position has insufficient viewport space.
+     *
+     * @default true
+     */
+    enableFlip?: boolean | undefined;
+    /**
+     * Resizes the popover to fit the remaining vertical space in the viewport.
+     *
+     * @default false
+     */
+    enableResize?: boolean | undefined;
+    /**
+     * CSS `overflow` value forwarded to the popover card when `enableResize`
+     * is active.
+     *
+     * @default "auto"
+     */
+    overflow?: PopoverOverflowType | undefined;
+    /**
+     * Accessible label for the popover dialog element.
+     *
+     * @default "More information"
+     */
+    popoverAriaLabel?: string | undefined;
+    /**
+     * Also opens the popover when the trigger element receives focus.
+     *
+     * @default false
+     */
+    triggerOnFocus?: boolean | undefined;
+    /**
+     * When `true`, focus is trapped inside the popover until dismissed.
+     * When `false`, the popover closes automatically once the user tabs
+     * away from both the trigger and the popover.
+     *
+     * @default true
+     */
+    isModal?: boolean | undefined;
+    /**
+     * Called when the popover becomes visible.
+     */
+    onPopoverAppear?: (() => void) | undefined;
+    /**
+     * Called when the popover is dismissed.
+     */
+    onPopoverDismiss?: (() => void) | undefined;
 }
+export {};

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

@@ -1,2 +1,9 @@
-import { PredictiveTextInputProps } from "./types";
+import type { PredictiveTextInputProps } from "./types";
+/**
+ * A text input that fetches and displays matching suggestions as the user types.
+ *
+ * Use `PredictiveTextInput` for search-as-you-type or autocomplete scenarios
+ * where options are loaded asynchronously based on the current input.
+ * @keywords autocomplete, combobox, field, form, input, search, suggestions, typeahead
+ */
 export declare const PredictiveTextInput: <T, V>({ className, "data-testid": testId, selectedOption, minimumCharacters, fetchOptions, placeholder, readOnly, disabled, error, valueExtractor, listExtractor, displayValueExtractor, onSelectOption, alignment, dropdownZIndex, dropdownRootNode, dropdownWidth, "aria-describedby": ariaDescribedBy, ...otherProps }: PredictiveTextInputProps<T, V>) => JSX.Element;

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

@@ -1,2 +1,2 @@
-import{__rest as e,__awaiter as t}from"../_virtual/_tslib.js";import{jsx as r,jsxs as o}from"react/jsx-runtime";import i from"../external/lodash/debounce.js";import{useState as s,useRef as l,useCallback as a,useEffect as n}from"react";import{VisuallyHidden as d,concatIds as p}from"../shared/accessibility/index.js";import{Input as c}from"../input/input.js";import"styled-components";import"../theme/index.js";import"../util/string-helper.js";import"../shared/dropdown-list/dropdown-label.styles.js";import{DropdownList as m}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as u}from"../shared/dropdown-list/dropdown-list-state.js";import"../shared/dropdown-list/expandable-element.js";import"@lifesg/react-icons/caret-right";import"react-virtuoso";import"../button/button.style.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as h}from"../util/simple-id-generator.js";import"@react-aria/live-announcer";import{ElementWithDropdown as g}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../shared/dropdown-list/dropdown-list.styles.js";import"../shared/dropdown-list/dropdown-search.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"../shared/dropdown-list/nested-dropdown-list.styles.js";import"../shared/dropdown-list/virtuoso-components.js";import{InputWrapper as f}from"../shared/input-wrapper/input-wrapper.js";const x=x=>{var{className:j,"data-testid":w,selectedOption:b,minimumCharacters:y=3,fetchOptions:v,placeholder:O="Enter here...",readOnly:T=!1,disabled:E=!1,error:I,valueExtractor:S,listExtractor:C,displayValueExtractor:N,onSelectOption:$,alignment:_,dropdownZIndex:B,dropdownRootNode:D,dropdownWidth:A,"aria-describedby":L}=x,R=e(x,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const W=e=>e?N?N(e):e.toString():"",[Z,k]=s((()=>b?W(b):"")),[F,H]=s((()=>b?W(b):"")),[V,q]=s([]),[G,M]=s(!0),[P,z]=s(!1),[J,K]=s(!!b),[Q,U]=s(b),[X,Y]=s(!1),[ee,te]=s(!1),re=h(),[oe,ie]=s(null),se=`${re}-instruction`,le=l(null),ae=l(null),ne=l(v),de=a((e=>t(void 0,void 0,void 0,(function*(){if(ne.current){z(!1),M(!0);try{const t=yield ne.current(e);H(e),q(null!=t?t:[]),M(!1)}catch(e){z(!0),M(!1)}}}))),[]),pe=a(i((e=>{de(e)}),500),[de]);n((()=>{ne.current=v}),[v]),n((()=>{Z&&Z.length>=y?J?Z!==F&&pe(Z):(Y(!0),pe(Z)):pe.cancel(),""===Z&&Q&&(null==$||$(void 0,void 0),je(),U(void 0)),b&&Z!==W(b)&&K(!1)}),[Z,b]),n((()=>{k(b?W(b):""),H(b?W(b):""),U(b),K(!!b)}),[b]),n((()=>{var e;const t=we(),r=null!==(e=null==V?void 0:V.length)&&void 0!==e?e:0;"loading"===t&&Z.length>=y?ie("Loading suggested results"):"fail"!==t?!X||G||P||ie(0===r?Z?"No results found.":null:`${r} result${r>1?"s":""} found. Press down arrow to scroll through the list.`):ie("Suggestions failed to load. Try again.")}),[V,Z,P,G]),n((()=>()=>{pe.cancel()}),[pe]);const ce=(e,t)=>{var r;null===(r=ae.current)||void 0===r||r.focus(),k(W(e)),H(e?W(e):""),K(!0),U(e),Y(!1),null==$||$(e,t)},me=()=>{te(!0)},ue=e=>{X||!le.current||le.current.contains(e.relatedTarget)||(te(!1),fe())},he=()=>{Y(!1),te(!1)},ge=()=>{k(""),K(!1),Y(!1),null==$||$(void 0,void 0)},fe=()=>{if(!J)if(Q){const e=W(Q);k(e),Y(!1)}else ge()},xe=e=>{k(e.target.value),K(!1)},je=e=>{H(""),K(!1),M(!0)},we=()=>P?"fail":G?"loading":"success";return r(u,{children:r(g,{enabled:!T&&!E,isOpen:X,renderElement:()=>o(f,{className:j,"data-testid":w,ref:le,tabIndex:-1,onFocus:me,onBlur:ue,$focused:ee,$disabled:E,$readOnly:T,$error:I,children:[o(d,{id:se,"aria-hidden":!0,children:["Type in ",y," or more characters for suggested results."]}),oe&&r(d,{"aria-live":"polite",children:oe}),r(c,Object.assign({role:"combobox",ref:ae,id:re,type:"text",value:Z,onChange:xe,placeholder:O,readOnly:T,disabled:E,allowClear:!0,onClear:ge,"aria-expanded":X,"aria-controls":re,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:Z.length<y?fe:void 0,styleType:"no-border","aria-describedby":p(L,se)},R))]}),renderDropdown:()=>r(m,{listboxId:re,listItems:V,onSelectItem:ce,onDismiss:he,valueExtractor:S,listExtractor:C,itemsLoadState:we(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>de(Z),width:A,matchElementWidth:!0}),onOpen:()=>{!J&&Z.length>=y&&te(!0)},onClose:()=>{Y(!1),te(!1),fe()},onDismiss:()=>{var e;Y(!1),te(!1),fe(),null===(e=ae.current)||void 0===e||e.focus()},onHide:()=>{q([]),M(!0),z(!1)},clickToToggle:!1,offset:8,alignment:_,fitAvailableHeight:!0,customZIndex:B,rootNode:D})})};export{x as PredictiveTextInput};
+import{__rest as e,__awaiter as r}from"../_virtual/_tslib.js";import{jsx as t,jsxs as o}from"react/jsx-runtime";import i from"../external/lodash/debounce.js";import{useState as s,useRef as l,useCallback as n,useEffect as a}from"react";import{Input as d}from"../input/input.js";import{VisuallyHidden as p,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 c}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_mloii0.css";import{DropdownList as u}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as h}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 f}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as g}from"../shared/input-wrapper/input-wrapper.js";import"../shared/dropdown-list/dropdown-list.styles_konwm.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 x=x=>{var{className:j,"data-testid":w,selectedOption:y,minimumCharacters:v=3,fetchOptions:b,placeholder:_="Enter here...",readOnly:T=!1,disabled:O=!1,error:I,valueExtractor:k,listExtractor:A,displayValueExtractor:C,onSelectOption:E,alignment:S,dropdownZIndex:q,dropdownRootNode:N,dropdownWidth:H,"aria-describedby":G}=x,M=e(x,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const P=e=>e?C?C(e):e.toString():"",[B,D]=s((()=>y?P(y):"")),[L,R]=s((()=>y?P(y):"")),[W,Z]=s([]),[$,F]=s(!0),[V,z]=s(!1),[J,K]=s(!!y),[Q,U]=s(y),[X,Y]=s(!1),[ee,re]=s(!1),te=c(),[oe,ie]=s(null),se=`${te}-instruction`,le=l(null),ne=l(null),ae=l(b),de=n((e=>r(void 0,void 0,void 0,(function*(){if(ae.current){z(!1),F(!0);try{const r=yield ae.current(e);R(e),Z(null!=r?r:[]),F(!1)}catch(e){z(!0),F(!1)}}}))),[]),pe=n(i((e=>{de(e)}),500),[de]);a((()=>{ae.current=b}),[b]),a((()=>{B&&B.length>=v?J?B!==L&&pe(B):(Y(!0),pe(B)):pe.cancel(),""===B&&Q&&(null==E||E(void 0,void 0),je(),U(void 0)),y&&B!==P(y)&&K(!1)}),[B,y]),a((()=>{D(y?P(y):""),R(y?P(y):""),U(y),K(!!y)}),[y]),a((()=>{var e;const r=we(),t=null!==(e=null==W?void 0:W.length)&&void 0!==e?e:0;"loading"===r&&B.length>=v?ie("Loading suggested results"):"fail"!==r?!X||$||V||ie(0===t?B?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):ie("Suggestions failed to load. Try again.")}),[W,B,V,$]),a((()=>()=>{pe.cancel()}),[pe]);const me=(e,r)=>{var t;null===(t=ne.current)||void 0===t||t.focus(),D(P(e)),R(e?P(e):""),K(!0),U(e),Y(!1),null==E||E(e,r)},ce=()=>{re(!0)},ue=e=>{X||!le.current||le.current.contains(e.relatedTarget)||(re(!1),ge())},he=()=>{Y(!1),re(!1)},fe=()=>{D(""),K(!1),Y(!1),null==E||E(void 0,void 0)},ge=()=>{if(!J)if(Q){const e=P(Q);D(e),Y(!1)}else fe()},xe=e=>{D(e.target.value),K(!1)},je=e=>{R(""),K(!1),F(!0)},we=()=>V?"fail":$?"loading":"success";return t(h,{children:t(f,{enabled:!T&&!O,isOpen:X,renderElement:()=>o(g,{className:j,"data-testid":w,ref:le,tabIndex:-1,onFocus:ce,onBlur:ue,focused:ee,disabled:O,readOnly:T,error:I,children:[o(p,{id:se,"aria-hidden":!0,children:["Type in ",v," or more characters for suggested results."]}),oe&&t(p,{"aria-live":"polite",children:oe}),t(d,Object.assign({role:"combobox",ref:ne,id:te,type:"text",value:B,onChange:xe,placeholder:_,readOnly:T,disabled:O,allowClear:!0,onClear:fe,"aria-expanded":X,"aria-controls":te,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:B.length<v?ge:void 0,styleType:"no-border","aria-describedby":m(G,se)},M))]}),renderDropdown:()=>t(u,{listboxId:te,listItems:W,onSelectItem:me,onDismiss:he,valueExtractor:k,listExtractor:A,itemsLoadState:we(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>de(B),width:H,matchElementWidth:!0}),onOpen:()=>{!J&&B.length>=v&&re(!0)},onClose:()=>{Y(!1),re(!1),ge()},onDismiss:()=>{var e;Y(!1),re(!1),ge(),null===(e=ne.current)||void 0===e||e.focus()},onHide:()=>{Z([]),F(!0),z(!1)},clickToToggle:!1,offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:q,rootNode:N})})};export{x 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 React, { useCallback, useEffect, useRef, useState } from \"react\";\nimport { VisuallyHidden, concatIds } from \"src/shared/accessibility\";\nimport { Input } from \"../input\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { 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        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 handleHide = () => {\n        // reset dropdown state once it fully closes\n        setOptions([]);\n        setIsLoading(true);\n        setIsError(false);\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\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        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            <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    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                onHide={handleHide}\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","$readOnly","$error","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","onHide","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"2rDAWO,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,GAAad,GAAS,IAC9Be,GAAWC,IAAgBhB,GAAS,GAErCiB,GAAaC,KACZC,GAAoBC,IAAyBpB,EAChD,MAEEqB,GAAgB,GAAGJ,iBAEnBK,GAAUC,EAA8B,MACxCC,GAAcD,EAAgC,MAE9CE,GAAkBF,EAAO5C,GAKzB+C,GAAqBC,GAAmB7B,GAAiB8B,OAAA,OAAA,OAAA,GAAA,YAC3D,GAAKH,GAAgBI,QAArB,CACArB,GAAW,GACXF,GAAa,GACb,IACI,MAAMwB,QAAuBL,GAAgBI,QAAQ/B,GACrDI,EAAiBJ,GACjBM,EAAW0B,QAAAA,EAAkB,IAC7BxB,GAAa,EACjB,CAAE,MAAAhC,GACEkC,GAAW,GACXF,GAAa,EACjB,CAX8B,CAYlC,KAAG,IAEGyB,GAAwBJ,EAC1BK,GAAUlC,IACN4B,GAAmB5B,EAAM,GAC1B,KACH,CAAC4B,KAOLO,GAAU,KACNR,GAAgBI,QAAUlD,CAAY,GACvC,CAACA,IAEJsD,GAAU,KAOFnC,GAASA,EAAMoC,QAAUxD,EACpB+B,EAGMX,IAAUG,GACjB8B,GAAsBjC,IAHtBgB,GAAU,GACViB,GAAsBjC,IAK1BiC,GAAsBI,SAGZ,KAAVrC,GAAgBa,IAChBxB,SAAAA,OAAiBiD,OAAWA,GAC5BC,KACAzB,OAAsBwB,IAGtB3D,GAAkBqB,IAAUH,EAAgBlB,IAC5CiC,GAAoB,EACxB,GACD,CAACZ,EAAOrB,IAEXwD,GAAU,KACNlC,EAAStB,EAAiBkB,EAAgBlB,GAAkB,IAC5DyB,EAAiBzB,EAAiBkB,EAAgBlB,GAAkB,IACpEmC,EAAsBnC,GACtBiC,IAAsBjC,EAAe,GACtC,CAACA,IAEJwD,GAAU,WACN,MAAMK,EAAQC,KACRC,EAAuB,QAAflE,EAAA6B,aAAO,EAAPA,EAAS+B,cAAM,IAAA5D,EAAAA,EAAI,EAEnB,YAAVgE,GAAuBxC,EAAMoC,QAAUxD,EACvC0C,GAAsB,6BAIZ,SAAVkB,GAKAzB,GAAWR,GAAcE,GAErBa,GADU,IAAVoB,EACsB1C,EAAQ,oBAAsB,KAGhD,GAAG0C,WACCA,EAAQ,EAAI,IAAM,0DAV9BpB,GAAsB,yCAc1B,GACD,CAACjB,EAASL,EAAOS,EAASF,IAK7B4B,GAAU,IACC,KACHF,GAAsBI,QAAQ,GAEnC,CAACJ,KAKJ,MAAMU,GAAsB,CAAC7C,EAAS8C,WACf,QAAnBpE,EAAAkD,GAAYK,eAAO,IAAAvD,GAAAA,EAAEqE,QACrB5C,EAASJ,EAAgBC,IACzBM,EAAiBN,EAAOD,EAAgBC,GAAQ,IAChDc,GAAoB,GACpBE,EAAsBhB,GACtBkB,GAAU,GACV3B,SAAAA,EAAiBS,EAAM8C,EAAe,EAepCE,GAAkB,KACpB5B,IAAa,EAAK,EAGhB6B,GAAkBC,IAEfjC,IACDS,GAAQO,SACPP,GAAQO,QAAQkB,SAASD,EAAEE,iBAE5BhC,IAAa,GACbiC,KACJ,EAGEC,GAAoB,KACtBpC,GAAU,GACVE,IAAa,EAAM,EAiBjBmC,GAAgB,KAClBpD,EAAS,IACTW,GAAoB,GACpBI,GAAU,GACV3B,SAAAA,OAAiBiD,OAAWA,EAAU,EAGpCa,GAAe,KACjB,IAAKxC,EACD,GAAIE,EAAoB,CACpB,MAAMyC,EAAYzD,EAAgBgB,GAClCZ,EAASqD,GACTtC,GAAU,EACd,MACIqC,IAER,EAGEE,GAAgBP,IAClB/C,EAAS+C,EAAEQ,OAAOC,OAClB7C,GAAoB,EAAM,EAGxB2B,GAAyBzC,IAC3BM,EAAgD,IAChDQ,GAAoB,GACpBJ,GAAa,EAAK,EAMhBiC,GAAoB,IAClBhC,EAAgB,OACbF,EAAY,UAAY,UA+EnC,OACImD,EAACC,EAAiB,CAAAC,SACdF,EAACG,EAAmB,CAChBC,SAAU/E,IAAaC,EACvB+B,OAAQA,EACRgD,cA9Ee,IAEnBC,EAACC,EAAY,CACTxF,UAAWA,EAAS,cACPC,EACbwF,IAAK1C,GACL2C,UAAU,EACVC,QAAStB,GACTuB,OAAQtB,GAAcuB,SACZrD,aACCjC,EAAQuF,UACRxF,EAAQyF,OACXvF,EAAK2E,SAAA,CAEbI,EAACS,EAAc,CAACC,GAAInD,GAAa,eAAA,EAAAqC,SAAA,CAAA,WACpBhF,kDAGZyC,IACGqC,EAACe,EAAc,CAAA,YAAW,SAAQb,SAC7BvC,KAGTqC,EAACiB,EAAKC,OAAAC,OAAA,CACFC,KAAK,WACLZ,IAAKxC,GACLgD,GAAIvD,GACJ4D,KAAK,OACLtB,MAAOzD,EACPgF,SAAUzB,GACVzE,YAAaA,EACbC,SAAUA,EACVC,SAAUA,EACViG,YAAU,EACVC,QAAS7B,GAAa,gBACPtC,kBACAI,GAAU,oBACP,OAAM,gBACV,UACdkD,OACIrE,EAAMoC,OAASxD,EACTuE,QACAb,EAEV6C,UAAU,+BACQC,EAAU1F,EAAiB6B,KACzC5B,OAiCR0F,eA3BW,IAEf3B,EAAC4B,EAAY,CACTC,UAAWpE,GACXqE,UAAWnF,EACXoF,aAAc9C,GACd+C,UAAWtC,GACXlE,eAAgBA,EAChBC,cAAeA,EACfwG,eAAgBlD,KAChBmD,mBAAoB,MACpBC,aAAc,EACdC,iBAAkB,YAClBC,oBACAC,QAAS,IAAMpE,GAAmB5B,GAClCiG,MAAOxG,EACPyG,mBAAiB,IAYjBC,OAvKO,MACVxF,GAAoBX,EAAMoC,QAAUxD,GACrCsC,IAAa,EACjB,EAqKQkF,QAlKQ,KAChBpF,GAAU,GACVE,IAAa,GACbiC,IAAc,EAgKNuC,UAzIU,WAClB1E,GAAU,GACVE,IAAa,GACbiC,KACmB,QAAnB3E,EAAAkD,GAAYK,eAAO,IAAAvD,GAAAA,EAAEqE,OAAO,EAsIpBwD,OAnIO,KAEf/F,EAAW,IACXE,GAAa,GACbE,GAAW,EAAM,EAgIT4F,eAAe,EACfC,OAAQ,EACRjH,UAAWA,EACXkH,oBAAkB,EAClBC,aAAclH,EACdmH,SAAUlH,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\n// @catalog\n/**\n * A text input that fetches and displays matching suggestions as the user types.\n *\n * Use `PredictiveTextInput` for search-as-you-type or autocomplete scenarios\n * where options are loaded asynchronously based on the current input.\n * @keywords autocomplete, combobox, field, form, input, search, suggestions, typeahead\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    // eslint-disable-next-line react-hooks/exhaustive-deps\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        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setIsOptionSelected(!!selectedOption);\n        // eslint-disable-next-line react-hooks/exhaustive-deps\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        // eslint-disable-next-line react-hooks/exhaustive-deps\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 handleHide = () => {\n        // reset dropdown state once it fully closes\n        setOptions([]);\n        setIsLoading(true);\n        setIsError(false);\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\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        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            <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    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                onHide={handleHide}\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","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","onHide","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

@@ -1,39 +1,93 @@
-import { RefObject } from "react";
-import { DropdownAlignmentType } from "src/shared/dropdown-wrapper";
-import { ListItemDisplayProps } from "../shared/dropdown-list/types";
+import type { RefObject } from "react";
+import type { ListItemDisplayProps } from "../shared/dropdown-list/types";
+import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/**
+ * Props for the `PredictiveTextInput` component.
+ *
+ * `T` is the shape of each option item returned by `fetchOptions`.
+ * `V` is the extracted value type produced by `valueExtractor`.
+ */
 export interface PredictiveTextInputProps<T, V> extends React.AriaAttributes {
     id?: string | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
-    /** Minimum number of characters, before options are shown */
+    /**
+     * Minimum number of characters the user must type before `fetchOptions` is
+     * called and the dropdown opens.
+     *
+     * @default 3
+     */
     minimumCharacters?: number | undefined;
+    /**
+     * Placeholder text shown inside the input when it is empty.
+     *
+     * @default "Enter here..."
+     */
     placeholder?: string | undefined;
     readOnly?: boolean | undefined;
     disabled?: boolean | undefined;
+    /**
+     * Applies error styling to the input wrapper.
+     */
     error?: boolean | undefined;
+    /**
+     * The currently confirmed option. Updating this prop resets the displayed
+     * text and clears the dropdown options list. Pass `undefined` to clear the
+     * selection.
+     */
     selectedOption?: T | undefined;
+    /**
+     * Horizontal alignment of the dropdown relative to the input element.
+     */
     alignment?: DropdownAlignmentType | undefined;
+    /**
+     * CSS `z-index` applied to the dropdown overlay.
+     */
     dropdownZIndex?: number | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Custom width for the dropdown in pixels. When specified, the dropdown will use this
-     * width instead of matching the input element width.
+     * Custom width for the dropdown. When specified, the dropdown uses this
+     * width instead of matching the trigger element width.
      */
     dropdownWidth?: string | undefined;
-    /** Async Function to populate options */
+    /**
+     * Async function called with the current input string to retrieve matching
+     * options. A rejected promise triggers the error state in the
+     * dropdown.
+     *
+     * @param input The current text in the input field.
+     */
     fetchOptions: (input: string) => Promise<T[]>;
-    /** Function to derive value from an item */
+    /**
+     * Derives the submitted value `V` from a selected item `T`.
+     */
     valueExtractor?: ((item: T) => V) | undefined;
-    /** Function to derive options display value from an item */
+    /**
+     * Derives the display label for each option in the dropdown list.
+     */
     listExtractor?: ((item: T) => string | ListItemDisplayProps) | undefined;
-    /** Function to derive display value for selected option */
+    /**
+     * Derives the text shown in the input field after an option is selected.
+     */
     displayValueExtractor?: ((option: T) => string) | undefined;
-    /** Callback function when option is selected */
+    /**
+     * Called when the user selects an option from the dropdown or clears the
+     * field.
+     *
+     * @param option The selected item, or `undefined` when cleared.
+     * @param extractedValue The value produced by `valueExtractor`, or `undefined` when cleared.
+     */
     onSelectOption?: ((option: T | undefined, extractedValue: V | undefined) => void) | undefined;
 }

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

@@ -1,2 +1,10 @@
-import { 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;
+import type { ProgressIndicatorProps } from "./types";
+/**
+ * A horizontal step-progress bar that tracks a user's position through a
+ * multi-step flow.
+ *
+ * Use `ProgressIndicator` when you need to communicate progress through an
+ * ordered sequence of steps.
+ * @keywords multi-step, step, stepper, wizard, workflow
+ */
+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{Breakpoint as d}from"../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:b,fadePosition:v}=g,$=e(g,["steps","currentIndex","displayExtractor","fadeColor","fadePosition"]);const y=o(s),C=d["lg-max"]({theme:y}),w=n.useMediaQuery({maxWidth:C}),E=e=>{var r;return j?j(e):null!==(r=null==e?void 0:e.toString())&&void 0!==r?r:""},I=(e,r)=>e<r?"Completed step":e===r?"Current step":"Upcoming step",P=(e,r)=>i(`${I(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:P(r,x),children:t(h,{$highlighted:i})},r)}))}),t(c,{children:w?r(m,{id:P(x,x),children:[r(p,{weight:"semibold",id:`${P(x,x)}-counter`,children:["Step ",x+1," of ",f.length]}),t(p,{weight:"regular",id:`${P(x,x)}-title`,children:E(f[x])})]},x):f.map(((e,i)=>{const o=i<=x,n=i===x,s=n?"bold":"regular";return t(m,{id:`${P(i,x)}-title`,children:r(u,{$highlighted:o,weight:s,"aria-current":n,children:[E(e),t(l,{children:I(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\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Breakpoint } from \"../theme\";\nimport {\n    Content,\n    Indicator,\n    IndicatorBar,\n    IndicatorTitleDesktop,\n    IndicatorTitleTablet,\n    Wrapper,\n} from \"./progress-indicator.style\";\nimport { 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 = 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","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":"0jBAgBO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EACAC,UAAWC,EACXC,aAAcC,GAAaP,EACxBQ,EAAUC,EAAAT,EANqB,wEAWlC,MAAMU,EAAQC,EAAWC,GACnBC,EAAmBC,EAAW,UAAU,CAAEJ,UAC1CK,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\n// @catalog\n/**\n * A horizontal step-progress bar that tracks a user's position through a\n * multi-step flow.\n *\n * Use `ProgressIndicator` when you need to communicate progress through an\n * ordered sequence of steps.\n * @keywords multi-step, step, stepper, wizard, workflow\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+BAkBO,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 @@
+@layer fds{.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,26 @@
-type FadePosition = "left" | "right" | "both";
+/**
+ * Props for the `ProgressIndicator` component.
+ *
+ * The type parameter `T` represents the shape of each step item in the
+ * `steps` array.
+ */
 export interface ProgressIndicatorProps<T> {
+    /**
+     * Ordered list of step items to render as progress bars and labels.
+     */
     steps: T[];
+    /**
+     * Zero-based index of the current active step.
+     * All steps at or before this index are visually highlighted.
+     */
     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;
+    /**
+     * Derives the display label for a step item.
+     *
+     * @remarks Falls back to `item.toString()` when omitted.
+     */
     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,8 @@
-import { RadioButtonProps } from "./types";
+import type { RadioButtonProps } from "./types";
+/**
+ * A single radio button input.
+ *
+ * Use `RadioButton` as an input within a radio group.
+ * @keywords choice, field, form, input, option, select
+ */
 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 l}from"./radio-button.styles.js";const n=n=>{var{className:r,checked:o,disabled:c,displaySize:b="default",focusableWhenDisabled:h,onChange:u,tabIndex:m}=n,p=e(n,["className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex"]);const f=!!c&&!!h,$=!!c&&!h;return a(i,{$selected:o,$disabled:c,className:r,$displaySize:b,"data-testid":"radio-button",children:[d(t,Object.assign({type:"radio","data-testid":"radio-input",onChange:e=>{c?e.preventDefault():null==u||u(e)},checked:o,disabled:$,"aria-disabled":f,tabIndex:f?0:m,$disabledVisual:c},p)),o?d(s,{"data-testid":"radio-checked",$disabled:c,"aria-hidden":!0}):d(l,{"data-testid":"radio-unchecked",$disabled:c,"aria-hidden":!0})]})};export{n 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