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

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 @@
+@layer fds{.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,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 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 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,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 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\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":"qvEAqBO,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,IAGGyB,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,GAED,CAACZ,EAAOrB,IAEXwD,GAAU,KACNlC,EAAStB,EAAiBkB,EAAgBlB,GAAkB,IAC5DyB,EAAiBzB,EAAiBkB,EAAgBlB,GAAkB,IACpEmC,EAAsBnC,GACtBiC,IAAsBjC,EAAe,GAEtC,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,GAED,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,GACRuB,QAASrD,GACTjC,SAAUA,EACVD,SAAUA,EACVE,MAAOA,EAAK2E,SAAA,CAEZI,EAACO,EAAc,CAACC,GAAIjD,GAAa,eAAA,EAAAqC,SAAA,CAAA,WACpBhF,EAAiB,gDAG7ByC,IACGqC,EAACa,EAAc,CAAA,YAAW,SAAQX,SAC7BvC,KAGTqC,EAACe,EAAKC,OAAAC,OAAA,CACFC,KAAK,WACLV,IAAKxC,GACL8C,GAAIrD,GACJ0D,KAAK,OACLpB,MAAOzD,EACP8E,SAAUvB,GACVzE,YAAaA,EACbC,SAAUA,EACVC,SAAUA,EACV+F,YAAU,EACVC,QAAS3B,GAAa,gBACPtC,EAAM,gBACNI,GAAU,oBACP,OAAM,gBACV,UACdkD,OACIrE,EAAMoC,OAASxD,EACTuE,QACAb,EAEV2C,UAAU,+BACQC,EAAUxF,EAAiB6B,KACzC5B,OAiCRwF,eA3BW,IAEfzB,EAAC0B,EAAY,CACTC,UAAWlE,GACXmE,UAAWjF,EACXkF,aAAc5C,GACd6C,UAAWpC,GACXlE,eAAgBA,EAChBC,cAAeA,EACfsG,eAAgBhD,KAChBiD,mBAAoB,MACpBC,aAAc,EACdC,iBAAkB,YAClBC,oBACAC,QAAS,IAAMlE,GAAmB5B,GAClC+F,MAAOtG,EACPuG,mBAAiB,IAYjBC,OAvKO,MACVtF,GAAoBX,EAAMoC,QAAUxD,GACrCsC,IAAa,EACjB,EAqKQgF,QAlKQ,KAChBlF,GAAU,GACVE,IAAa,GACbiC,IAAc,EAgKNqC,UAzIU,WAClBxE,GAAU,GACVE,IAAa,GACbiC,KACmB,QAAnB3E,EAAAkD,GAAYK,eAAO,IAAAvD,GAAAA,EAAEqE,OAAO,EAsIpBsD,OAnIO,KAEf7F,EAAW,IACXE,GAAa,GACbE,GAAW,EAAM,EAgIT0F,eAAe,EACfC,OAAQ,EACR/G,UAAWA,EACXgH,oBAAkB,EAClBC,aAAchH,EACdiH,SAAUhH,KAEE"}

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

@@ -1,39 +1,93 @@
 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 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;
+/**
+ * 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{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