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

package/input-nested-select/types.d.ts

@@ -1,53 +1,122 @@
-import { RefObject } from "react";
-import { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select";
-import { DropdownCustomLabelProps, DropdownSearchProps, DropdownVariantType, ExpandMode } from "../shared/dropdown-list/types";
-import { DropdownAlignmentType } from "../shared/dropdown-wrapper/types";
+import type { RefObject } from "react";
+import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select";
+import type { DropdownCustomLabelProps, DropdownSearchProps, DropdownVariantType, ExpandMode } from "../shared/dropdown-list/types";
+import type { DropdownAlignmentType } from "../shared/dropdown-wrapper/types";
+/**
+ * Options and load-state configuration used by `InputNestedSelect` & `InputNestedMultiSelect`.
+ */
 export interface InputNestedSelectOptionsProps<V1, V2, V3> extends Omit<InputSelectOptionsProps<V1>, "options"> {
     options: L1OptionProps<V1, V2, V3>[];
 }
+/**
+ * Shared behavioral and visual configuration for `InputNestedSelect` & `InputNestedMultiSelect`.
+ *
+ * The three type parameters describe the value types at each nesting level.
+ */
 export interface InputNestedSelectSharedProps<V1, V2, V3> extends Omit<InputSelectSharedProps<V1>, "options"> {
     readOnly?: boolean | undefined;
     /** Specifies if items are expanded or collapsed when the dropdown is opened */
     mode?: ExpandMode | undefined;
+    /**
+     * Controls the height of the trigger and dropdown items.
+     *
+     * @default "default"
+     */
     variant?: DropdownVariantType | undefined;
+    /** Aligns the dropdown relative to the trigger 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.
+     *
+     * @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.
      *
-     * 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
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /** Function to convert selected value into a string */
     valueToStringFunction?: ((value: V1 | V2 | V3) => string) | undefined;
 }
+/**
+ * Props for `InputNestedSelect` component.
+ *
+ * The three type parameters describe the value types at each nesting level.
+ */
 export interface InputNestedSelectProps<V1, V2, V3> extends React.HTMLAttributes<HTMLElement>, InputNestedSelectOptionsProps<V1, V2, V3>, InputNestedSelectSharedProps<V1, V2, V3>, DropdownSearchProps<L1OptionProps<V1, V2, V3>> {
-    /** Specifies key path of the selected option */
+    /**
+     * Key path identifying the currently selected option. Each entry is the
+     * `key` of the option at that nesting level, ordered from level 1 to the
+     * selected level. Drives the controlled selection state.
+     */
     selectedKeyPath?: string[] | undefined;
-    /** If specified, the category label is selectable */
+    /**
+     * When `true`, parent category labels are themselves selectable as options,
+     * not just expand/collapse toggles.
+     */
     selectableCategory?: boolean | undefined;
-    /** Called when an option is selected. Returns the option's key path and value */
+    /**
+     * Called when the user selects an option.
+     *
+     * @param keyPath Key path from level 1 to the selected option.
+     * @param value Value of the selected option.
+     */
     onSelectOption?: ((keyPath: string[], value: V1 | V2 | V3) => void) | undefined;
-    /** Custom width for the dropdown  */
+    /**
+     * Custom width for the dropdown. When specified, the dropdown uses this
+     * width instead of matching the trigger element width.
+     */
     dropdownWidth?: string | undefined;
+    /**
+     * Called when focus leaves both the trigger and the dropdown.
+     */
     onBlur?: (() => void) | undefined;
+    /**
+     * Overrides the default labels shown inside the dropdown and on the trigger.
+     */
     customLabels?: DropdownCustomLabelProps | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `InputNestedSelectProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type InputNestedSelectPartialProps<V1, V2, V3> = Omit<InputNestedSelectProps<V1, V2, V3>, "error">;
 interface BaseOptionProps {
     label: string;
     key: string;
 }
+/**
+ * A top-level (level-1) option that may contain level-2 sub-options.
+ *
+ * `V1` is the value type for this level; `V2` and `V3` are the value types for
+ * nested levels 2 and 3 respectively.
+ */
 export interface L1OptionProps<V1, V2, V3> extends BaseOptionProps {
     value: V1;
+    /** Nested level-2 options belonging to this category. */
     subItems?: L2OptionProps<V2, V3>[] | undefined;
 }
+/**
+ * A level-2 option that may contain level-3 leaf options.
+ *
+ * `V2` is the value type for this level; `V3` is the value type for the nested
+ * level-3 options.
+ */
 export interface L2OptionProps<V2, V3> extends BaseOptionProps {
     value: V2;
+    /** Nested level-3 leaf options belonging to this item. */
     subItems?: L3OptionProps<V3>[] | undefined;
 }
+/**
+ * A level-3 leaf option with no further nesting.
+ *
+ * `V3` is the value type for this level.
+ */
 export interface L3OptionProps<V3> extends BaseOptionProps {
     value: V3;
     subItems?: undefined;

package/input-range-select/input-range-select.d.ts

@@ -1,2 +1,9 @@
-import { InputRangeSelectProps } from "./types";
+import type { InputRangeSelectProps } from "./types";
+/**
+ * A paired combobox input for selecting a start and end value from dropdown lists.
+ *
+ * Use `InputRangeSelect` when a consumer must choose a range by picking two
+ * values — one for "from" and one for "to" — each from their own option list.
+ * @keywords combobox, dropdown, field, form, input, pair, range
+ */
 export declare const InputRangeSelect: <T, V>({ selectedOptions, placeholders, options, disabled, className, readOnly, error, "data-testid": testId, id, enableSearch, searchFunction, searchPlaceholder, valueExtractor, valueToStringFunction, listExtractor, isOptionDisabled, displayValueExtractor, onSelectOption, onShowOptions, onHideOptions, onRetry, optionsLoadState, optionTruncationType, renderCustomSelectedOption, renderListItem, renderCustomCallToAction, alignment, dropdownZIndex, dropdownRootNode, dropdownWidth, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...otherProps }: InputRangeSelectProps<T, V>) => JSX.Element;

package/input-range-select/input-range-select.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as o,jsxs as r}from"react/jsx-runtime";import{useState as t,useRef as n,useEffect as i,useMemo as l}from"react";import{ClearIcon as d}from"../input/input.style.js";import{VisuallyHidden as a,concatIds as s}from"../shared/accessibility/index.js";import"styled-components";import"../theme/index.js";import{StringHelper as c}from"../util/string-helper.js";import"../shared/dropdown-list/dropdown-label.styles.js";import{DropdownList as p}from"../shared/dropdown-list/dropdown-list.js";import{DropdownListState as m}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 u}from"../util/simple-id-generator.js";import"@react-aria/live-announcer";import{ElementWithDropdown as h}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{Wrapper as f,PlaceholderLabel as v,ValueLabel as b}from"../shared/dropdown-wrapper/dropdown-wrapper.styles.js";import{RangeInputInnerContainer as w}from"../shared/range-input-inner-container/range-input-inner-container.js";import{StyledInputWrapper as y,ClearIconContainer as j,RangeSelectorButton as g}from"./input-range-select.style.js";const x=x=>{var{selectedOptions:S,placeholders:O={from:"Select",to:"Select"},options:T,disabled:C,className:$,readOnly:D,error:E,"data-testid":I,id:A,enableSearch:L=!1,searchFunction:_,searchPlaceholder:F,valueExtractor:N,valueToStringFunction:R,listExtractor:k,isOptionDisabled:P,displayValueExtractor:B,onSelectOption:H,onShowOptions:W,onHideOptions:Z,onRetry:V,optionsLoadState:q={from:"success",to:"success"},optionTruncationType:G="middle",renderCustomSelectedOption:K,renderListItem:z,renderCustomCallToAction:J,alignment:M,dropdownZIndex:Q,dropdownRootNode:U,dropdownWidth:X,"aria-labelledby":Y,"aria-describedby":ee}=x,oe=e(x,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-labelledby","aria-describedby"]);const[re,te]=t(),[ne,ie]=t(),[le,de]=t("none"),ae="none"!==le,se={from:n(null),to:n(null)},ce=n(null),pe=u(),me=`${pe}-range-listbox`,ue=`${pe}-from-label`,he=`${pe}-to-label`;i((()=>{te(null==S?void 0:S.from),ie(null==S?void 0:S.to)}),[S]),i((()=>{var e;ae&&"to"===le&&(null===(e=ce.current)||void 0===e||e.refocus({index:0}))}),[ae,le]);const fe=e=>{e||null==Z||Z(),e&&(null==W||W())},ve=e=>{var o,r;const t="from"===e?re:ne;if(!t)return"";if(B)return B(t);if(N){const e=N(t);return R?R(e):null!==(r=null===(o=null==e?void 0:e.toString)||void 0===o?void 0:o.call(e))&&void 0!==r?r:""}return t.toString()},be=(e,o)=>{var r;if("middle"===G){let t=0;return(null===(r=se[e])||void 0===r?void 0:r.current)&&(t=se[e].current.getBoundingClientRect().width),c.truncateOneLine(o,t,120,8)}return o},we=()=>{switch(le){case"from":return"start";case"to":return"end";case"none":return le}},ye=l((()=>{var e;return"none"===le?[]:null!==(e=null==T?void 0:T[le])&&void 0!==e?e:[]}),[le,T]),je=l((()=>{if("none"===le)return[];const e="from"===le?re:ne;return e?[e]:[]}),[le,re,ne]),ge=e=>{if(C||D)return;de("to"!==e||re?e:"from"),fe(!0)},xe=e=>{var o;null===(o=se[e].current)||void 0===o||o.focus()},Se=e=>s("from"===e?ue:he,Y),Oe=e=>o=>{o.stopPropagation(),o.preventDefault(),ge(e)},Te=e=>o=>{if(!C&&!D)switch(o.key){case"Enter":case" ":case"ArrowDown":o.preventDefault(),ge(e)}},Ce=(e,o)=>{if("none"!==le){if("from"===le)return te(e),null==H||H({from:e},o),ie(void 0),de("to"),fe(!0),void xe("to");ie(e),null==H||H({to:e},o),de("none"),fe(!1),xe("to")}},$e=()=>{const e=le;de("none"),fe(!1),xe("to"===e?"to":"from"),re&&ne||(te(void 0),ie(void 0))},De=e=>{e.stopPropagation(),e.preventDefault(),te(void 0),ie(void 0),null==H||H({from:void 0,to:void 0},void 0),xe("from")},Ee=e=>{const r="from"===e?re:ne;return r?K?K(r):o(b,{$truncateType:G,children:be(e,ve(e))}):o(v,{$truncateType:G,children:be(e,(null==O?void 0:O[e])||"")})},Ie=e=>o(g,{type:"button",role:"combobox","aria-labelledby":Se(e),"aria-describedby":ee,"aria-expanded":ae&&le===e,"aria-controls":me,"aria-disabled":C,"aria-readonly":D,onClick:Oe(e),onKeyDown:Te(e),ref:se[e],tabIndex:0,children:Ee(e)});return o(f,Object.assign({id:A},oe,{children:o(m,{children:o(h,{enabled:!D&&!C,isOpen:ae,renderElement:()=>r(y,{className:$,"data-testid":I,$disabled:C,$readOnly:D,$error:E,$focused:ae,children:[o(a,{id:ue,children:(null==O?void 0:O.from)||"Select From"}),o(a,{id:he,children:(null==O?void 0:O.to)||"Select To"}),r(w,{currentActive:we(),error:E,children:[Ie("from"),Ie("to")]}),!ae&&re&&ne&&!D&&!C&&o(j,{onClick:De,type:"button","aria-label":"Clear",children:o(d,{"aria-hidden":!0})})]}),renderDropdown:()=>o(p,{ref:ce,"data-testid":`${I}-dropdown`,listboxId:me,ariaLabel:"from"===le?`Selecting for: ${null==O?void 0:O.from}`:"to"===le?`Selecting for: ${null==O?void 0:O.to}`:void 0,listItems:ye,onSelectItem:Ce,onDismiss:$e,valueExtractor:N,listExtractor:k,isOptionDisabled:P,selectedItems:je,itemsLoadState:q[le],itemTruncationType:G,onRetry:V,width:X,matchElementWidth:!X,enableSearch:L,searchFunction:_,searchPlaceholder:F,renderListItem:z,renderCustomCallToAction:J}),onOpen:()=>{C||D||"none"===le&&(de("from"),fe(!0))},onClose:()=>{de("none"),fe(!1),re&&ne||(te(void 0),ie(void 0))},onDismiss:$e,clickToToggle:!1,offset:8,alignment:M,fitAvailableHeight:!0,customZIndex:Q,rootNode:U})})}))};export{x as InputRangeSelect};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as o,jsxs as r}from"react/jsx-runtime";import t from"clsx";import{useState as i,useRef as n,useEffect as s,useMemo as l}from"react";import{VisuallyHidden as a,concatIds as d}from"../shared/accessibility/index.js";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 p}from"../util/simple-id-generator.js";import{StringHelper as c}from"../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 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"@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 h}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as f,ClearButton as v}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";import{PlaceholderLabel as w,ValueLabel as b}from"../shared/dropdown-wrapper/dropdown-wrapper.js";import{clearButtonContainer as y}from"../shared/input-wrapper/input-wrapper.styles.js";import{RangeInputInnerContainer as g}from"../shared/range-input-inner-container/range-input-inner-container.js";import{styledInputWrapper as j,rangeSelectorButton as x}from"./input-range-select.styles.js";const S=S=>{var{selectedOptions:T,placeholders:_={from:"Select",to:"Select"},options:O,disabled:C,className:A,readOnly:I,error:k,"data-testid":D,id:E,enableSearch:P=!1,searchFunction:L,searchPlaceholder:N,valueExtractor:q,valueToStringFunction:H,listExtractor:F,isOptionDisabled:R,displayValueExtractor:$,onSelectOption:G,onShowOptions:M,onHideOptions:B,onRetry:W,optionsLoadState:Z={from:"success",to:"success"},optionTruncationType:V="middle",renderCustomSelectedOption:K,renderListItem:z,renderCustomCallToAction:J,alignment:Q,dropdownZIndex:U,dropdownRootNode:X,dropdownWidth:Y,"aria-labelledby":ee,"aria-describedby":oe}=S,re=e(S,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-labelledby","aria-describedby"]);const[te,ie]=i(),[ne,se]=i(),[le,ae]=i("none"),de="none"!==le,pe={from:n(null),to:n(null)},ce=n(null),me=p(),ue=`${me}-range-listbox`,he=`${me}-from-label`,fe=`${me}-to-label`;s((()=>{ie(null==T?void 0:T.from),se(null==T?void 0:T.to)}),[T]),s((()=>{var e;de&&"to"===le&&(null===(e=ce.current)||void 0===e||e.refocus({index:0}))}),[de,le]);const ve=e=>{e||null==B||B(),e&&(null==M||M())},we=e=>{var o,r;const t="from"===e?te:ne;if(!t)return"";if($)return $(t);if(q){const e=q(t);return H?H(e):null!==(r=null===(o=null==e?void 0:e.toString)||void 0===o?void 0:o.call(e))&&void 0!==r?r:""}return t.toString()},be=(e,o)=>{var r;if("middle"===V){let t=0;return(null===(r=pe[e])||void 0===r?void 0:r.current)&&(t=pe[e].current.getBoundingClientRect().width),c.truncateOneLine(o,t,120,8)}return o},ye=()=>{switch(le){case"from":return"start";case"to":return"end";case"none":return le}},ge=l((()=>{var e;return"none"===le?[]:null!==(e=null==O?void 0:O[le])&&void 0!==e?e:[]}),[le,O]),je=l((()=>{if("none"===le)return[];const e="from"===le?te:ne;return e?[e]:[]}),[le,te,ne]),xe=e=>{if(C||I)return;ae("to"!==e||te?e:"from"),ve(!0)},Se=e=>{var o;null===(o=pe[e].current)||void 0===o||o.focus()},Te=e=>d("from"===e?he:fe,ee),_e=e=>o=>{o.stopPropagation(),o.preventDefault(),xe(e)},Oe=e=>o=>{if(!C&&!I)switch(o.key){case"Enter":case" ":case"ArrowDown":o.preventDefault(),xe(e)}},Ce=(e,o)=>{if("none"!==le){if("from"===le)return ie(e),null==G||G({from:e},o),se(void 0),ae("to"),ve(!0),void Se("to");se(e),null==G||G({to:e},o),ae("none"),ve(!1),Se("to")}},Ae=()=>{const e=le;ae("none"),ve(!1),Se("to"===e?"to":"from"),te&&ne||(ie(void 0),se(void 0))},Ie=e=>{e.stopPropagation(),e.preventDefault(),ie(void 0),se(void 0),null==G||G({from:void 0,to:void 0},void 0),Se("from")},ke=e=>{const r="from"===e?te:ne;return r?K?K(r):o(b,{truncateType:V,children:be(e,we(e))}):o(w,{truncateType:V,children:be(e,(null==_?void 0:_[e])||"")})},De=e=>o("button",{type:"button",role:"combobox","aria-labelledby":Te(e),"aria-describedby":oe,"aria-expanded":de&&le===e,"aria-controls":ue,"aria-disabled":C,"aria-readonly":I,onClick:_e(e),onKeyDown:Oe(e),ref:pe[e],tabIndex:0,className:x,children:ke(e)});return o("div",Object.assign({id:E},re,{children:o(u,{children:o(h,{enabled:!I&&!C,isOpen:de,renderElement:()=>r(f,{className:t(j,A),"data-testid":D,disabled:C,readOnly:I,error:k,focused:de,children:[o(a,{id:he,children:(null==_?void 0:_.from)||"Select From"}),o(a,{id:fe,children:(null==_?void 0:_.to)||"Select To"}),r(g,{currentActive:ye(),error:k,children:[De("from"),De("to")]}),!de&&te&&ne&&!I&&!C&&o("div",{className:y,children:o(v,{onClick:Ie,type:"button","aria-label":"Clear"})})]}),renderDropdown:()=>o(m,{ref:ce,"data-testid":`${D}-dropdown`,listboxId:ue,ariaLabel:"from"===le?`Selecting for: ${null==_?void 0:_.from}`:"to"===le?`Selecting for: ${null==_?void 0:_.to}`:void 0,listItems:ge,onSelectItem:Ce,onDismiss:Ae,valueExtractor:q,listExtractor:F,isOptionDisabled:R,selectedItems:je,itemsLoadState:Z[le],itemTruncationType:V,onRetry:W,width:Y,matchElementWidth:!Y,enableSearch:P,searchFunction:L,searchPlaceholder:N,renderListItem:z,renderCustomCallToAction:J}),onOpen:()=>{C||I||"none"===le&&(ae("from"),ve(!0))},onClose:()=>{ae("none"),ve(!1),te&&ne||(ie(void 0),se(void 0))},onDismiss:Ae,clickToToggle:!1,offset:8,alignment:Q,fitAvailableHeight:!0,customZIndex:U,rootNode:X})})}))};export{S as InputRangeSelect};
 //# sourceMappingURL=input-range-select.js.map

package/input-range-select/input-range-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range-select.js","sources":["../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ClearIcon } from \"../input/input.style\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListApi,\n    DropdownListState,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    PlaceholderLabel,\n    ValueLabel,\n    Wrapper,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    ClearIconContainer,\n    RangeSelectorButton,\n    StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" | \"to\";\n\nexport const InputRangeSelect = <T, V>({\n    selectedOptions,\n    placeholders = { from: \"Select\", to: \"Select\" },\n    options,\n    disabled,\n    className,\n    readOnly,\n    error,\n    \"data-testid\": testId,\n    id,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    isOptionDisabled,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = { from: \"success\", to: \"success\" },\n    optionTruncationType = \"middle\",\n    renderCustomSelectedOption,\n    renderListItem,\n    renderCustomCallToAction,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedFromValue, setSelectedFromValue] = useState<T | undefined>();\n    const [selectedToValue, setSelectedToValue] = useState<T | undefined>();\n    const [focusedInput, setFocusedInput] = useState<RangeType | \"none\">(\n        \"none\"\n    );\n    const isOpen = focusedInput !== \"none\";\n\n    const labelButtonRef = {\n        from: useRef<HTMLButtonElement>(null),\n        to: useRef<HTMLButtonElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const internalId = useId();\n    const listboxId = `${internalId}-range-listbox`;\n    const fromLabelId = `${internalId}-from-label`;\n    const toLabelId = `${internalId}-to-label`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedFromValue(selectedOptions?.from);\n        setSelectedToValue(selectedOptions?.to);\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (!isOpen) return;\n\n        if (focusedInput === \"to\") {\n            dropdownRef.current?.refocus({ index: 0 });\n        }\n    }, [isOpen, focusedInput]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show) onHideOptions?.();\n        if (show) onShowOptions?.();\n    };\n\n    const getDisplayValue = (rangeType: RangeType): string => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) return displayValueExtractor(selected);\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString?.() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (type: RangeType, value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelButtonRef[type]?.current) {\n                widthOfElement =\n                    labelButtonRef[type].current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const getCurrentFocused = (): \"none\" | \"start\" | \"end\" => {\n        switch (focusedInput) {\n            case \"from\":\n                return \"start\";\n            case \"to\":\n                return \"end\";\n            case \"none\":\n                return focusedInput;\n        }\n    };\n\n    const currentOptions = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        return options?.[focusedInput] ?? [];\n    }, [focusedInput, options]);\n\n    const currentSelectedItems = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        const selected =\n            focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n        return selected ? [selected] : [];\n    }, [focusedInput, selectedFromValue, selectedToValue]);\n\n    const openDropdownFor = (rangeType: RangeType) => {\n        if (disabled || readOnly) return;\n\n        const nextFocusedInput =\n            rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n        setFocusedInput(nextFocusedInput);\n        triggerOptionDisplayCallback(true);\n    };\n\n    const focusButton = (type: RangeType) => {\n        labelButtonRef[type].current?.focus();\n    };\n\n    const getButtonLabelledBy = (rangeType: RangeType) => {\n        const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n        return concatIds(rangeLabelId, ariaLabelledBy);\n    };\n\n    const getDropdownAriaLabel = () => {\n        if (focusedInput === \"from\") {\n            return `Selecting for: ${placeholders?.from}`;\n        }\n\n        if (focusedInput === \"to\") {\n            return `Selecting for: ${placeholders?.to}`;\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n            openDropdownFor(rangeType);\n        };\n\n    const handleSelectorKeyDown =\n        (rangeType: RangeType) =>\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (disabled || readOnly) return;\n\n            switch (event.key) {\n                case \"Enter\":\n                case \" \":\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    openDropdownFor(rangeType);\n                    break;\n                default:\n                    break;\n            }\n        };\n\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        if (focusedInput === \"none\") return;\n\n        if (focusedInput === \"from\") {\n            setSelectedFromValue(item);\n            onSelectOption?.({ from: item }, extractedValue);\n\n            setSelectedToValue(undefined);\n            setFocusedInput(\"to\");\n            triggerOptionDisplayCallback(true);\n            focusButton(\"to\");\n            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        focusButton(\"to\");\n    };\n\n    const handleDismiss = () => {\n        const last = focusedInput;\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (last === \"to\") focusButton(\"to\");\n        else focusButton(\"from\");\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleClose = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n\n        if (focusedInput === \"none\") {\n            setFocusedInput(\"from\");\n            triggerOptionDisplayCallback(true);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        setSelectedFromValue(undefined);\n        setSelectedToValue(undefined);\n        onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n        focusButton(\"from\");\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderLabel = (rangeType: RangeType) => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n        if (!selected) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {truncateValue(rangeType, placeholders?.[rangeType] || \"\")}\n                </PlaceholderLabel>\n            );\n        }\n\n        if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        }\n\n        return (\n            <ValueLabel $truncateType={optionTruncationType}>\n                {truncateValue(rangeType, getDisplayValue(rangeType))}\n            </ValueLabel>\n        );\n    };\n\n    const renderSelectorContent = (rangeType: RangeType) => (\n        <RangeSelectorButton\n            type=\"button\"\n            role=\"combobox\"\n            aria-labelledby={getButtonLabelledBy(rangeType)}\n            aria-describedby={ariaDescribedBy}\n            aria-expanded={isOpen && focusedInput === rangeType}\n            aria-controls={listboxId}\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            onClick={handleSelectorClick(rangeType)}\n            onKeyDown={handleSelectorKeyDown(rangeType)}\n            ref={labelButtonRef[rangeType]}\n            tabIndex={0}\n        >\n            {renderLabel(rangeType)}\n        </RangeSelectorButton>\n    );\n\n    const renderElement = () => {\n        return (\n            <StyledInputWrapper\n                className={className}\n                data-testid={testId}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $focused={isOpen}\n            >\n                <VisuallyHidden id={fromLabelId}>\n                    {placeholders?.from || \"Select From\"}\n                </VisuallyHidden>\n                <VisuallyHidden id={toLabelId}>\n                    {placeholders?.to || \"Select To\"}\n                </VisuallyHidden>\n\n                <RangeInputInnerContainer\n                    currentActive={getCurrentFocused()}\n                    error={error}\n                >\n                    {renderSelectorContent(\"from\")}\n                    {renderSelectorContent(\"to\")}\n                </RangeInputInnerContainer>\n\n                {!isOpen &&\n                    selectedFromValue &&\n                    selectedToValue &&\n                    !readOnly &&\n                    !disabled && (\n                        <ClearIconContainer\n                            onClick={handleClear}\n                            type=\"button\"\n                            aria-label=\"Clear\"\n                        >\n                            <ClearIcon aria-hidden />\n                        </ClearIconContainer>\n                    )}\n            </StyledInputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                ref={dropdownRef}\n                data-testid={`${testId}-dropdown`}\n                listboxId={listboxId}\n                ariaLabel={getDropdownAriaLabel()}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                selectedItems={currentSelectedItems}\n                itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                width={dropdownWidth}\n                matchElementWidth={!dropdownWidth}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                renderListItem={renderListItem}\n                renderCustomCallToAction={renderCustomCallToAction}\n            />\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={isOpen}\n                    renderElement={renderElement}\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        </Wrapper>\n    );\n};\n"],"names":["InputRangeSelect","_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","labelButtonRef","useRef","dropdownRef","internalId","useId","listboxId","fromLabelId","toLabelId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","openDropdownFor","focusButton","focus","getButtonLabelledBy","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","$truncateType","PlaceholderLabel","renderSelectorContent","RangeSelectorButton","role","onClick","onKeyDown","ref","tabIndex","children","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","$disabled","$readOnly","$focused","VisuallyHidden","RangeInputInnerContainer","currentActive","ClearIconContainer","ClearIcon","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-range-select.js","sources":["../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { DropdownListApi } from \"../shared/dropdown-list\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { ClearButton, InputWrapper } from \"../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./input-range-select.styles\";\nimport type { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" | \"to\";\n\n// @catalog\n/**\n * A paired combobox input for selecting a start and end value from dropdown lists.\n *\n * Use `InputRangeSelect` when a consumer must choose a range by picking two\n * values — one for \"from\" and one for \"to\" — each from their own option list.\n * @keywords combobox, dropdown, field, form, input, pair, range\n */\nexport const InputRangeSelect = <T, V>({\n    selectedOptions,\n    placeholders = { from: \"Select\", to: \"Select\" },\n    options,\n    disabled,\n    className,\n    readOnly,\n    error,\n    \"data-testid\": testId,\n    id,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    isOptionDisabled,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = { from: \"success\", to: \"success\" },\n    optionTruncationType = \"middle\",\n    renderCustomSelectedOption,\n    renderListItem,\n    renderCustomCallToAction,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedFromValue, setSelectedFromValue] = useState<T | undefined>();\n    const [selectedToValue, setSelectedToValue] = useState<T | undefined>();\n    const [focusedInput, setFocusedInput] = useState<RangeType | \"none\">(\n        \"none\"\n    );\n    const isOpen = focusedInput !== \"none\";\n\n    const labelButtonRef = {\n        from: useRef<HTMLButtonElement>(null),\n        to: useRef<HTMLButtonElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const internalId = useId();\n    const listboxId = `${internalId}-range-listbox`;\n    const fromLabelId = `${internalId}-from-label`;\n    const toLabelId = `${internalId}-to-label`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedFromValue(selectedOptions?.from);\n        setSelectedToValue(selectedOptions?.to);\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (!isOpen) return;\n\n        if (focusedInput === \"to\") {\n            dropdownRef.current?.refocus({ index: 0 });\n        }\n    }, [isOpen, focusedInput]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show) onHideOptions?.();\n        if (show) onShowOptions?.();\n    };\n\n    const getDisplayValue = (rangeType: RangeType): string => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) return displayValueExtractor(selected);\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString?.() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (type: RangeType, value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelButtonRef[type]?.current) {\n                widthOfElement =\n                    labelButtonRef[type].current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const getCurrentFocused = (): \"none\" | \"start\" | \"end\" => {\n        switch (focusedInput) {\n            case \"from\":\n                return \"start\";\n            case \"to\":\n                return \"end\";\n            case \"none\":\n                return focusedInput;\n        }\n    };\n\n    const currentOptions = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        return options?.[focusedInput] ?? [];\n    }, [focusedInput, options]);\n\n    const currentSelectedItems = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        const selected =\n            focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n        return selected ? [selected] : [];\n    }, [focusedInput, selectedFromValue, selectedToValue]);\n\n    const openDropdownFor = (rangeType: RangeType) => {\n        if (disabled || readOnly) return;\n\n        const nextFocusedInput =\n            rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n        setFocusedInput(nextFocusedInput);\n        triggerOptionDisplayCallback(true);\n    };\n\n    const focusButton = (type: RangeType) => {\n        labelButtonRef[type].current?.focus();\n    };\n\n    const getButtonLabelledBy = (rangeType: RangeType) => {\n        const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n        return concatIds(rangeLabelId, ariaLabelledBy);\n    };\n\n    const getDropdownAriaLabel = () => {\n        if (focusedInput === \"from\") {\n            return `Selecting for: ${placeholders?.from}`;\n        }\n\n        if (focusedInput === \"to\") {\n            return `Selecting for: ${placeholders?.to}`;\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n            openDropdownFor(rangeType);\n        };\n\n    const handleSelectorKeyDown =\n        (rangeType: RangeType) =>\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (disabled || readOnly) return;\n\n            switch (event.key) {\n                case \"Enter\":\n                case \" \":\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    openDropdownFor(rangeType);\n                    break;\n                default:\n                    break;\n            }\n        };\n\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        if (focusedInput === \"none\") return;\n\n        if (focusedInput === \"from\") {\n            setSelectedFromValue(item);\n            onSelectOption?.({ from: item }, extractedValue);\n\n            setSelectedToValue(undefined);\n            setFocusedInput(\"to\");\n            triggerOptionDisplayCallback(true);\n            focusButton(\"to\");\n            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        focusButton(\"to\");\n    };\n\n    const handleDismiss = () => {\n        const last = focusedInput;\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (last === \"to\") focusButton(\"to\");\n        else focusButton(\"from\");\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleClose = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n\n        if (focusedInput === \"none\") {\n            setFocusedInput(\"from\");\n            triggerOptionDisplayCallback(true);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        setSelectedFromValue(undefined);\n        setSelectedToValue(undefined);\n        onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n        focusButton(\"from\");\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderLabel = (rangeType: RangeType) => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n        if (!selected) {\n            return (\n                <PlaceholderLabel truncateType={optionTruncationType}>\n                    {truncateValue(rangeType, placeholders?.[rangeType] || \"\")}\n                </PlaceholderLabel>\n            );\n        }\n\n        if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        }\n\n        return (\n            <ValueLabel truncateType={optionTruncationType}>\n                {truncateValue(rangeType, getDisplayValue(rangeType))}\n            </ValueLabel>\n        );\n    };\n\n    const renderSelectorContent = (rangeType: RangeType) => (\n        <button\n            type=\"button\"\n            role=\"combobox\"\n            aria-labelledby={getButtonLabelledBy(rangeType)}\n            aria-describedby={ariaDescribedBy}\n            aria-expanded={isOpen && focusedInput === rangeType}\n            aria-controls={listboxId}\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            onClick={handleSelectorClick(rangeType)}\n            onKeyDown={handleSelectorKeyDown(rangeType)}\n            ref={labelButtonRef[rangeType]}\n            tabIndex={0}\n            className={styles.rangeSelectorButton}\n        >\n            {renderLabel(rangeType)}\n        </button>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputWrapper\n                className={clsx(styles.styledInputWrapper, className)}\n                data-testid={testId}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n                focused={isOpen}\n            >\n                <VisuallyHidden id={fromLabelId}>\n                    {placeholders?.from || \"Select From\"}\n                </VisuallyHidden>\n                <VisuallyHidden id={toLabelId}>\n                    {placeholders?.to || \"Select To\"}\n                </VisuallyHidden>\n\n                <RangeInputInnerContainer\n                    currentActive={getCurrentFocused()}\n                    error={error}\n                >\n                    {renderSelectorContent(\"from\")}\n                    {renderSelectorContent(\"to\")}\n                </RangeInputInnerContainer>\n\n                {!isOpen &&\n                    selectedFromValue &&\n                    selectedToValue &&\n                    !readOnly &&\n                    !disabled && (\n                        <div\n                            className={inputWrapperStyles.clearButtonContainer}\n                        >\n                            <ClearButton\n                                onClick={handleClear}\n                                type=\"button\"\n                                aria-label=\"Clear\"\n                            />\n                        </div>\n                    )}\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                ref={dropdownRef}\n                data-testid={`${testId}-dropdown`}\n                listboxId={listboxId}\n                ariaLabel={getDropdownAriaLabel()}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                selectedItems={currentSelectedItems}\n                itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                width={dropdownWidth}\n                matchElementWidth={!dropdownWidth}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                renderListItem={renderListItem}\n                renderCustomCallToAction={renderCustomCallToAction}\n            />\n        );\n    };\n\n    return (\n        <div id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={isOpen}\n                    renderElement={renderElement}\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        </div>\n    );\n};\n"],"names":["InputRangeSelect","_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","labelButtonRef","useRef","dropdownRef","internalId","useId","listboxId","fromLabelId","toLabelId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","openDropdownFor","focusButton","focus","getButtonLabelledBy","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","truncateType","children","PlaceholderLabel","renderSelectorContent","role","onClick","onKeyDown","ref","tabIndex","styles.rangeSelectorButton","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","clsx","styles.styledInputWrapper","focused","VisuallyHidden","RangeInputInnerContainer","currentActive","inputWrapperStyles.clearButtonContainer","ClearButton","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"+jFA8BO,MAAMA,EAA0BC,QAAAC,gBACnCA,EAAeC,aACfA,EAAe,CAAEC,KAAM,SAAUC,GAAI,UAAUC,QAC/CA,EAAOC,SACPA,EAAQC,UACRA,EAASC,SACTA,EAAQC,MACRA,EACA,cAAeC,EAAMC,GACrBA,EAAEC,aACFA,GAAe,EAAKC,eACpBA,EAAcC,kBACdA,EAAiBC,eACjBA,EAAcC,sBACdA,EAAqBC,cACrBA,EAAaC,iBACbA,EAAgBC,sBAChBA,EAAqBC,eACrBA,EAAcC,cACdA,EAAaC,cACbA,EAAaC,QACbA,EAAOC,iBACPA,EAAmB,CAAErB,KAAM,UAAWC,GAAI,WAAWqB,qBACrDA,EAAuB,SAAQC,2BAC/BA,EAA0BC,eAC1BA,EAAcC,yBACdA,EAAwBC,UACxBA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,cAChBA,EACA,kBAAmBC,GACnB,mBAAoBC,MACjBC,GAAUC,EAAApC,EAjCsB,CAAA,kBAAA,eAAA,UAAA,WAAA,YAAA,WAAA,QAAA,cAAA,KAAA,eAAA,iBAAA,oBAAA,iBAAA,wBAAA,gBAAA,mBAAA,wBAAA,iBAAA,gBAAA,gBAAA,UAAA,mBAAA,uBAAA,6BAAA,iBAAA,2BAAA,YAAA,iBAAA,mBAAA,gBAAA,kBAAA,qBAsCnC,MAAOqC,GAAmBC,IAAwBC,KAC3CC,GAAiBC,IAAsBF,KACvCG,GAAcC,IAAmBJ,EACpC,QAEEK,GAA0B,SAAjBF,GAETG,GAAiB,CACnB1C,KAAM2C,EAA0B,MAChC1C,GAAI0C,EAA0B,OAE5BC,GAAcD,EAAwB,MAEtCE,GAAaC,IACbC,GAAY,GAAGF,mBACfG,GAAc,GAAGH,gBACjBI,GAAY,GAAGJ,cAKrBK,GAAU,KACNf,GAAqBrC,eAAAA,EAAiBE,MACtCsC,GAAmBxC,eAAAA,EAAiBG,GAAG,GACxC,CAACH,IAEJoD,GAAU,WACDT,IAEgB,OAAjBF,KACmB,QAAnB1C,EAAA+C,GAAYO,eAAO,IAAAtD,GAAAA,EAAEuD,QAAQ,CAAEC,MAAO,IAC1C,GACD,CAACZ,GAAQF,KAKZ,MAAMe,GAAgCC,IAC7BA,GAAMpC,SAAAA,IACPoC,IAAMrC,SAAAA,IAAiB,EAGzBsC,GAAmBC,YACrB,MAAMC,EACY,SAAdD,EAAuBvB,GAAoBG,GAC/C,IAAKqB,EAAU,MAAO,GAEtB,GAAI1C,EAAuB,OAAOA,EAAsB0C,GAExD,GAAI9C,EAAgB,CAChB,MAAM+C,EAAQ/C,EAAe8C,GAC7B,OAAO7C,EACDA,EAAsB8C,GACH,QAAnBC,EAAe,QAAf/D,EAAA8D,aAAK,EAALA,EAAOE,gBAAQ,IAAAhE,OAAA,EAAAA,EAAAiE,KAAAH,UAAI,IAAAC,EAAAA,EAAI,EACjC,CAEA,OAAOF,EAASG,UAAU,EAGxBE,GAAgB,CAACC,EAAiBL,WACpC,GAA6B,WAAzBrC,EAAmC,CACnC,IAAI2C,EAAiB,EAKrB,OAJwB,QAApBpE,EAAA6C,GAAesB,UAAK,IAAAnE,OAAA,EAAAA,EAAEsD,WACtBc,EACIvB,GAAesB,GAAMb,QAAQe,wBAAwBC,OAEtDC,EAAaC,gBAAgBV,EAAOM,EAAgB,IAAK,EACpE,CACA,OAAON,CAAK,EAGVW,GAAoB,KACtB,OAAQ/B,IACJ,IAAK,OACD,MAAO,QACX,IAAK,KACD,MAAO,MACX,IAAK,OACD,OAAOA,KAIbgC,GAAiBC,GAAQ,WAC3B,MAAqB,SAAjBjC,GAAgC,GACN,QAAvB1C,EAAAK,aAAO,EAAPA,EAAUqC,WAAa,IAAA1C,EAAAA,EAAI,EAAE,GACrC,CAAC0C,GAAcrC,IAEZuE,GAAuBD,GAAQ,KACjC,GAAqB,SAAjBjC,GAAyB,MAAO,GACpC,MAAMmB,EACe,SAAjBnB,GAA0BL,GAAoBG,GAClD,OAAOqB,EAAW,CAACA,GAAY,EAAE,GAClC,CAACnB,GAAcL,GAAmBG,KAE/BqC,GAAmBjB,IACrB,GAAItD,GAAYE,EAAU,OAK1BmC,GAFkB,OAAdiB,GAAuBvB,GAA6BuB,EAAT,QAG/CH,IAA6B,EAAK,EAGhCqB,GAAeX,UACW,QAA5BnE,EAAA6C,GAAesB,GAAMb,eAAO,IAAAtD,GAAAA,EAAE+E,OAAO,EAGnCC,GAAuBpB,GAElBqB,EAD4B,SAAdrB,EAAuBT,GAAcC,GAC3BnB,IAkB7BiD,GACDtB,GAA0BuB,IACvBA,EAAMC,kBACND,EAAME,iBACNR,GAAgBjB,EAAU,EAG5B0B,GACD1B,GACAuB,IACG,IAAI7E,IAAYE,EAEhB,OAAQ2E,EAAMI,KACV,IAAK,QACL,IAAK,IACL,IAAK,YACDJ,EAAME,iBACNR,GAAgBjB,KAO1B4B,GAAsB,CAACC,EAASC,KAClC,GAAqB,SAAjBhD,GAAJ,CAEA,GAAqB,SAAjBA,GAQA,OAPAJ,GAAqBmD,GACrBrE,SAAAA,EAAiB,CAAEjB,KAAMsF,GAAQC,GAEjCjD,QAAmBkD,GACnBhD,GAAgB,MAChBc,IAA6B,QAC7BqB,GAAY,MAIhBrC,GAAmBgD,GACnBrE,SAAAA,EAAiB,CAAEhB,GAAIqF,GAAQC,GAE/B/C,GAAgB,QAChBc,IAA6B,GAC7BqB,GAAY,KAlBiB,CAkBZ,EAGfc,GAAgB,KAClB,MAAMC,EAAOnD,GAEbC,GAAgB,QAChBc,IAA6B,GAEVqB,GAAN,OAATe,EAA2B,KACd,QAEZxD,IAAsBG,KACvBF,QAAqBqD,GACrBlD,QAAmBkD,GACvB,EAsBEG,GAAeX,IACjBA,EAAMC,kBACND,EAAME,iBACN/C,QAAqBqD,GACrBlD,QAAmBkD,GACnBvE,SAAAA,EAAiB,CAAEjB,UAAMwF,EAAWvF,QAAIuF,QAAaA,GAErDb,GAAY,OAAO,EAMjBiB,GAAenC,IACjB,MAAMC,EACY,SAAdD,EAAuBvB,GAAoBG,GAE/C,OAAKqB,EAQDnC,EACOA,EAA2BmC,GAIlCmC,EAACC,GAAWC,aAAczE,EAAoB0E,SACzCjC,GAAcN,EAAWD,GAAgBC,MAZ1CoC,EAACI,EAAgB,CAACF,aAAczE,EAAoB0E,SAC/CjC,GAAcN,GAAW1D,aAAY,EAAZA,EAAe0D,KAAc,KAYlD,EAIfyC,GAAyBzC,GAC3BoC,EAAA,SAAA,CACI7B,KAAK,SACLmC,KAAK,WAAU,kBACEtB,GAAoBpB,GAAU,mBAC7B1B,mBACHU,IAAUF,KAAiBkB,EAAS,gBACpCV,GAAS,gBACT5C,kBACAE,EACf+F,QAASrB,GAAoBtB,GAC7B4C,UAAWlB,GAAsB1B,GACjC6C,IAAK5D,GAAee,GACpB8C,SAAU,EACVnG,UAAWoG,EAA0BR,SAEpCJ,GAAYnC,KA4ErB,OACIoC,EAAA,MAAAY,OAAAC,OAAA,CAAKlG,GAAIA,GAAQwB,GAAU,CAAAgE,SACvBH,EAACc,EAAiB,CAAAX,SACdH,EAACe,GACGC,SAAUxG,IAAaF,EACvBsC,OAAQA,GACRqE,cA9EM,IAEdC,EAACC,EAAY,CACT5G,UAAW6G,EAAKC,EAA2B9G,GAAU,cACxCG,EACbJ,SAAUA,EACVE,SAAUA,EACVC,MAAOA,EACP6G,QAAS1E,GAAMuD,SAAA,CAEfH,EAACuB,EAAc,CAAC5G,GAAIwC,GAAWgD,UAC1BjG,aAAY,EAAZA,EAAcC,OAAQ,gBAE3B6F,EAACuB,EAAc,CAAC5G,GAAIyC,GAAS+C,UACxBjG,aAAY,EAAZA,EAAcE,KAAM,cAGzB8G,EAACM,EAAwB,CACrBC,cAAehD,KACfhE,MAAOA,EAAK0F,SAAA,CAEXE,GAAsB,QACtBA,GAAsB,UAGzBzD,IACEP,IACAG,KACChC,IACAF,GACG0F,EAAA,MAAA,CACIzF,UAAWmH,EAAuCvB,SAElDH,EAAC2B,EAAW,CACRpB,QAAST,GACT3B,KAAK,SAAQ,aACF,eA2CvByD,eAnCO,IAEf5B,EAAC6B,EAAY,CACTpB,IAAK1D,iBACQ,GAAGrC,aAChBwC,UAAWA,GACX4E,UAxMa,SAAjBpF,GACO,kBAAkBxC,eAAAA,EAAcC,OAGtB,OAAjBuC,GACO,kBAAkBxC,eAAAA,EAAcE,UAD3C,EAqMQ2H,UAAWrD,GACXsD,aAAcxC,GACdyC,UAAWrC,GACX7E,eAAgBA,EAChBE,cAAeA,EACfC,iBAAkBA,EAClBgH,cAAetD,GACfuD,eAAgB3G,EAAiBkB,IACjC0F,mBAAoB3G,EACpBF,QAASA,EACT+C,MAAOtC,EACPqG,mBAAoBrG,EACpBpB,aAAcA,EACdC,eAAgBA,EAChBC,kBAAmBA,EACnBa,eAAgBA,EAChBC,yBAA0BA,IAatB0G,OAjJG,KACXhI,GAAYE,GAEK,SAAjBkC,KACAC,GAAgB,QAChBc,IAA6B,GACjC,EA4IY8E,QA5JI,KAChB5F,GAAgB,QAChBc,IAA6B,GAExBpB,IAAsBG,KACvBF,QAAqBqD,GACrBlD,QAAmBkD,GACvB,EAsJYsC,UAAWrC,GACX4C,eAAe,EACfC,OAAQ,EACR5G,UAAWA,EACX6G,oBAAkB,EAClBC,aAAc7G,EACd8G,SAAU7G,QAGhB"}

package/input-range-select/input-range-select.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styledInputWrapper: import("@linaria/core").LinariaClassName;
+export declare const rangeSelectorButton: import("@linaria/core").LinariaClassName;

package/input-range-select/input-range-select.styles.js

@@ -0,0 +1,2 @@
+import"./input-range-select.styles_adbrbm.css";const e="s7h6auw",s="ryu6qy6";export{s as rangeSelectorButton,e as styledInputWrapper};
+//# sourceMappingURL=input-range-select.styles.js.map

package/input-range-select/input-range-select.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-range-select.styles.js","sources":["../../src/input-range-select/input-range-select.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Radius } from \"../theme\";\n\nexport const styledInputWrapper = css`\n    height: 3rem;\n`;\n\nexport const rangeSelectorButton = css`\n    appearance: none;\n    border: 0;\n    background: transparent;\n    display: flex;\n    flex: 1;\n    color: ${Colour.text};\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: 2px solid ${Colour[\"border-focus\"]};\n        border-radius: ${Radius.sm};\n    }\n\n    &:disabled {\n        cursor: not-allowed;\n    }\n`;\n"],"names":["styledInputWrapper","rangeSelectorButton"],"mappings":"iFAIO,MAAMA,EAAkB,UAIlBC,EAAmB"}

package/input-range-select/input-range-select.styles_adbrbm.css

@@ -0,0 +1,2 @@
+@layer fds{.s7h6auw{height:3rem;}
+.ryu6qy6{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;border:0;background:transparent;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1;-ms-flex:1;flex:1;color:var(--fds-colour-text);}.ryu6qy6:focus,.ryu6qy6:active{outline:none;}.ryu6qy6:focus-visible{outline:2px solid var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}.ryu6qy6:disabled{cursor:not-allowed;}}

package/input-range-select/types.d.ts

@@ -1,27 +1,94 @@
-import { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select/types";
-import { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType } from "../shared/dropdown-list/types";
-import { RefObject } from "react";
-import { DropdownAlignmentType } from "src/shared/dropdown-wrapper";
+import type { RefObject } from "react";
+import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select/types";
+import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType } from "../shared/dropdown-list/types";
+import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/**
+ * Options configuration for `InputRangeSelect`.
+ */
 export interface InputRangeSelectOptionsProps<T> extends Omit<InputSelectOptionsProps<T>, "options" | "optionsLoadState"> {
+    /**
+     * The list of selectable items for each end of the range.
+     */
     options: InputRangeProp<T[]>;
+    /**
+     * The async load state for each end's option list.
+     *
+     * @default { from: "success", to: "success" }
+     */
     optionsLoadState?: InputRangeProp<ItemsLoadStateType | undefined>;
 }
+/**
+ * A representation of a paired "from" and "to" value.
+ */
 export interface InputRangeProp<T> {
     from?: T | undefined;
     to?: T | undefined;
 }
+/**
+ * Props for the `InputRangeSelect`component.
+ *
+ * `T` is the option item type; `V` is the extracted value type returned by
+ * `valueExtractor`.
+ */
 export interface InputRangeSelectProps<T, V> extends React.HTMLAttributes<HTMLElement>, InputRangeSelectOptionsProps<T>, Omit<InputSelectSharedProps<T>, "options">, DropdownDisplayProps<T, V>, DropdownSearchProps<T> {
     readOnly?: boolean | undefined;
+    /**
+     * Placeholder text shown in each selector when no value is selected.
+     *
+     * @default { from: "Select", to: "Select" }
+     */
     placeholders?: InputRangeProp<string> | undefined;
+    /**
+     * The currently selected option for each end of the range.
+     * Controls the displayed value for both selectors.
+     */
     selectedOptions?: InputRangeProp<T> | undefined;
+    /** Aligns the dropdown relative to the trigger element. */
     alignment?: DropdownAlignmentType | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
+    /**
+     * The root element that contains the dropdown element.
+     *
+     * @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. When specified, the dropdown uses this
+     * width instead of matching the trigger element width.
+     */
     dropdownWidth?: string | undefined;
+    /**
+     * Called when a selection is made in either the "from" or "to" dropdown,
+     * or when the current range selection is cleared.
+     *
+     * @param option The partial or full range selection after the interaction.
+     * @param extractedValue The value produced by `valueExtractor` for the
+     *   chosen item, or `undefined` when cleared.
+     */
     onSelectOption?: ((option: InputRangeProp<T>, extractedValue: V | undefined) => void) | undefined;
+    /**
+     * Derives a display string for the selected option shown in the trigger
+     * button. Takes precedence over `valueExtractor` + `valueToStringFunction`
+     * for display purposes.
+     */
     displayValueExtractor?: ((option: T) => string) | undefined;
+    /** Function to convert selected value into a string */
     valueToStringFunction?: ((value: V) => string) | undefined;
+    /**
+     * Renders a custom element for the currently selected option.
+     */
     renderCustomSelectedOption?: ((option: T) => JSX.Element) | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `InputRangeSelectProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type InputRangeSelectPartialProps<T, V> = Omit<InputRangeSelectProps<T, V>, "error">;

package/input-range-slider/input-range-slider.d.ts

@@ -1,2 +1,10 @@
-import { InputRangeSliderProps } from "./types";
-export declare const InputRangeSlider: ({ id, value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, ariaLabels, ariaDescriptions, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, renderSliderLabel, onChange, onChangeEnd, ...otherProps }: InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element;
+import type { InputRangeSliderProps } from "./types";
+/**
+ * A draggable track slider for selecting one or more numeric values within a
+ * bounded range.
+ *
+ * Use `InputRangeSlider` when the selection does not need to be precise;
+ * the user picks a value or a range by dragging thumb controls along a track.
+ * @keywords field, form, input, range, slider
+ */
+export declare const InputRangeSlider: ({ id, value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, ariaLabels, ariaDescriptions, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, renderSliderLabel, onChange, onChangeEnd, className, ...otherProps }: InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element;

package/input-range-slider/input-range-slider.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{clearAnnouncer as n,announce as t}from"@react-aria/live-announcer";import{useState as a,useEffect as l}from"react";import{VisuallyHidden as d,concatIds as o}from"../shared/accessibility/index.js";import{Colour as s}from"../theme/index.js";import"../util/calendar-helper.js";import"../util/date-helper.js";import"../util/date-input-helper.js";import{useId as u}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Wrapper as c,IndicatorLabelContainer as h,Slider as f,SliderTrack as m,SliderThumb as b,Knob as p,LabelContainer as v,LabelText as g}from"./input-range-slider.styles.js";const $=$=>{var{id:x,value:y,min:L=0,max:w=100,step:j=1,minRange:C=0,numOfThumbs:O=2,colors:S,disabled:A,readOnly:D,showSliderLabels:T,sliderLabelPrefix:M,sliderLabelSuffix:P,showIndicatorLabel:I,indicatorLabelPrefix:k,indicatorLabelSuffix:E,ariaLabels:R,ariaDescriptions:U,"aria-invalid":_,"aria-labelledby":B,"aria-describedby":F,renderSliderLabel:H,onChange:K,onChangeEnd:N}=$,q=e($,["id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","aria-invalid","aria-labelledby","aria-describedby","renderSliderLabel","onChange","onChangeEnd"]);const[z,G]=a(ie()),[J,Q]=a(null),V=u(),W=function(){const e=function(){const e=A||D?s["border-disabled"]:s["border-strong"],r=A||D?s["border-selected-disabled"]:s["border-selected"];if(1===O)return[r,e];const i=[e];for(let e=0;e<O-1;e++)i.push(r);return i.push(e),i}();return new Array(O+1).fill(0).map(((r,i)=>(null==S?void 0:S[i])||e[i]))}(),X=`${V}-indicator`,Y=`${V}-instruction`,Z=Array.from({length:O},((e,r)=>(null==R?void 0:R[r])||function(e){return 1===O?"":0===e?"Minimum value slider":e===O-1?"Maximum value slider":"Indeterminate value slider"}(r)));l((()=>{y!==z&&G(ie())}),[y]);const ee=(e,r)=>{if(A||D)return;const i=function(e,r){if(O<2)return"";const i=z[r],n=r>0?z[r-1]:void 0,t=r<z.length-1?z[r+1]:void 0,a=Z[r],l=r>0?Z[r-1]:void 0,d=r<Z.length-1?Z[r+1]:void 0;if(function(e){return["ArrowRight","ArrowUp","PageUp","End"].includes(e)}(e)&&void 0!==t&&i>=t-C)return`The ${ne(a)} has reached its limit. Increase the ${te(d)} to set a higher ${te(a)}.`;if(function(e){return["ArrowLeft","ArrowDown","PageDown","Home"].includes(e)}(e)&&void 0!==n&&i<=n+C)return`The ${ne(a)} has reached its limit. Decrease the ${te(l)} to set a lower ${te(a)}.`;return""}(e.key,r);i&&(n("assertive"),t(i,"assertive"))},re=(e,r)=>{if(A||D)return;const i=Number(e.currentTarget.value),n=[...z];n[r]=function(e,r,i){const n=ae(r,i),t=le(r,i);return Math.min(t,Math.max(n,e))}(i,r,z),G(n),null==K||K(n),null==N||N(n)};function ie(){if(y&&y.length===O)return y;const e=[];for(let r=0;r<O;r++)e.push(L+j*r);return e}function ne(e){return e?e.toLowerCase():"slider"}function te(e){return e?e.replace(/ slider$/i,"").toLowerCase():"slider"}function ae(e,r=z){return 0===e?L:r[e-1]+C}function le(e,r=z){return e===r.length-1?w:r[e+1]-C}const de=e=>H?H(e):r(g,{children:[M,e,P]});return r(c,Object.assign({},q,{id:x,role:"group","aria-labelledby":B,"aria-disabled":A,children:[!A&&!D&&i(d,{id:Y,children:"Use left and right arrow keys to adjust the slider."}),I&&i(h,{id:X,children:(()=>{let e="";if(1===z.length)e=`${z[0]}`;else if(2===z.length)e=`${z[0]} - ${z[1]}`;else if(z.length>2){e=`${Math.min(...z)} - ${Math.max(...z)}`}return r(g,{children:[k,e,E]})})()}),z.map(((e,n)=>{const t=`${V}-thumb-label-${n}`,a=function(e){return null==U?void 0:U[e]}(n),l=a?`${V}-thumb-description-${n}`:void 0;return r(d,{children:[l&&i("span",{id:l,children:a}),i("span",{id:t,children:Z[n]}),i("input",{type:"range",min:ae(n),max:le(n),step:j,value:e,"aria-disabled":A||void 0,readOnly:D,"aria-labelledby":o(B,t),"aria-describedby":(u=l,o(F,I?X:void 0,A||D?void 0:Y,u)),"aria-valuetext":(s=e,`${M||""}${s}${P||""}`),"aria-invalid":_,onFocus:()=>Q(n),onBlur:()=>Q(null),onChange:e=>re(e,n),onKeyDown:e=>{ee(e,n)}})]},`native-slider-${n}`);var s,u})),i(f,{step:j,min:L,max:w,value:z,disabled:A||D,onChange:(e,r)=>{if(D||A)return;if("number"==typeof e){const r=[e];return G(r),void(null==K||K(r))}if(r>-1&&z[r]===e[r])return;const i=[...e];G(i),null==K||K(i)},onAfterChange:e=>{if(D||A)return;if("number"==typeof e){const r=[e];return G(r),void(null==N||N(r))}const r=[...e];G(r),null==N||N(r)},minDistance:C,"aria-hidden":!0,renderThumb:(e,r)=>i(b,Object.assign({"data-testid":`slider-thumb-${r.index}`},e,{tabIndex:-1,"aria-hidden":!0,"data-focused":J===r.index?"true":void 0,children:i(p,{$disabled:A,$readOnly:D})})),renderTrack:(e,r)=>i(m,Object.assign({"data-testid":`slider-track-${r.index}`},e,{$color:W[r.index]}))}),T&&r(v,{children:[i("div",{children:de(L)}),i("div",{children:de(w)})]})]}))};export{$ as InputRangeSlider};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{clearAnnouncer as n,announce as t}from"@react-aria/live-announcer";import a from"clsx";import{useState as l,useEffect as o}from"react";import{VisuallyHidden as s,concatIds as d}from"../shared/accessibility/index.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as u}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"../theme/utils/use-media-query.js";import{Typography as c}from"../typography/index.js";import{indicatorLabelContainer as h,labelContainer as f,wrapper as p,labelText as b}from"./input-range-slider.styles.js";import{Slider as v}from"./slider-components.js";import{PAGE_STEP_MULTIPLIER as g}from"./slider-utils.js";const y=y=>{var{id:x,value:$,min:j=0,max:L=100,step:w=1,minRange:k=0,numOfThumbs:C=2,colors:P,disabled:D,readOnly:N,showSliderLabels:S,sliderLabelPrefix:O,sliderLabelSuffix:A,showIndicatorLabel:M,indicatorLabelPrefix:T,indicatorLabelSuffix:B,ariaLabels:I,ariaDescriptions:U,"aria-invalid":E,"aria-labelledby":R,"aria-describedby":q,renderSliderLabel:_,onChange:F,onChangeEnd:H,className:K}=y,z=e(y,["id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","aria-invalid","aria-labelledby","aria-describedby","renderSliderLabel","onChange","onChangeEnd","className"]);const[G,J]=l(ie()),[Q,V]=l(null),W=m(),X=function(){const e=function(){const e=D||N?u["border-disabled"]:u["border-strong"],r=D||N?u["border-selected-disabled"]:u["border-selected"];if(1===C)return[r,e];const i=[e];for(let e=0;e<C-1;e++)i.push(r);return i.push(e),i}();return new Array(C+1).fill(0).map(((r,i)=>(null==P?void 0:P[i])||e[i]))}(),Y=`${W}-indicator`,Z=`${W}-instruction`,ee=Array.from({length:C},((e,r)=>(null==I?void 0:I[r])||function(e){return 1===C?"":0===e?"Minimum value slider":e===C-1?"Maximum value slider":"Indeterminate value slider"}(r)));o((()=>{$!==G&&J(ie())}),[$]);const re=(e,r)=>{if(D||N)return;if("PageUp"===e.key||"PageDown"===e.key){e.preventDefault();const i=("PageUp"===e.key?1:-1)*w*g,n=[...G];n[r]=oe(G[r]+i,r,G),n[r]!==G[r]&&(J(n),null==F||F(n),null==H||H(n))}const i=function(e,r){if(C<2)return"";const i=G[r],n=r>0?G[r-1]:void 0,t=r<G.length-1?G[r+1]:void 0,a=ee[r],l=r>0?ee[r-1]:void 0,o=r<ee.length-1?ee[r+1]:void 0;if(function(e){return["ArrowRight","ArrowUp","PageUp","End"].includes(e)}(e)&&void 0!==t&&i>=t-k)return`The ${ne(a)} has reached its limit. Increase the ${te(o)} to set a higher ${te(a)}.`;if(function(e){return["ArrowLeft","ArrowDown","PageDown","Home"].includes(e)}(e)&&void 0!==n&&i<=n+k)return`The ${ne(a)} has reached its limit. Decrease the ${te(l)} to set a lower ${te(a)}.`;return""}(e.key,r);i&&(n("assertive"),t(i,"assertive"))};function ie(){if($&&$.length===C)return $;const e=[];for(let r=0;r<C;r++)e.push(j+w*r);return e}function ne(e){return e?e.toLowerCase():"slider"}function te(e){return e?e.replace(/ slider$/i,"").toLowerCase():"slider"}function ae(e,r=G){return 0===e?j:r[e-1]+k}function le(e,r=G){return e===r.length-1?L:r[e+1]-k}function oe(e,r,i){const n=ae(r,i),t=le(r,i);return Math.min(t,Math.max(n,e))}const se=e=>_?_(e):r(c.BodyBL,{className:b,children:[O,e,A]});return r("div",Object.assign({},z,{id:x,role:"group","aria-labelledby":R,"aria-disabled":D,className:a(p,K),children:[!D&&!N&&i(s,{id:Z,children:"Use left and right arrow keys to adjust the slider."}),M&&i("div",{id:Y,className:h,children:(()=>{let e="";if(1===G.length)e=`${G[0]}`;else if(2===G.length)e=`${G[0]} - ${G[1]}`;else if(G.length>2){e=`${Math.min(...G)} - ${Math.max(...G)}`}return r(c.BodyBL,{className:b,children:[T,e,B]})})()}),G.map(((e,n)=>{const t=`${W}-thumb-label-${n}`,a=function(e){return null==U?void 0:U[e]}(n),l=a?`${W}-thumb-description-${n}`:void 0;return r(s,{children:[l&&i("span",{id:l,children:a}),i("span",{id:t,children:ee[n]}),i("input",{"data-testid":`slider-input-${n}`,type:"range",min:ae(n),max:le(n),step:w,value:e,"aria-disabled":D||void 0,readOnly:N,"aria-labelledby":d(R,t),"aria-describedby":(u=l,d(q,M?Y:void 0,D||N?void 0:Z,u)),"aria-valuetext":(o=e,`${O||""}${o}${A||""}`),"aria-invalid":E,onFocus:()=>V(n),onBlur:()=>V(null),onChange:e=>((e,r)=>{if(D||N)return;const i=Number(e.currentTarget.value),n=[...G];n[r]=oe(i,r,G),J(n),null==F||F(n),null==H||H(n)})(e,n),onKeyDown:e=>{re(e,n)}})]},`native-slider-${n}`);var o,u})),i(v,{selection:G,min:j,max:L,step:w,minRange:k,disabled:D,readOnly:N,trackColors:X,focusedThumbIndex:Q,onChange:e=>{N||D||(J(e),null==F||F(e))},onChangeEnd:e=>{N||D||(J(e),null==H||H(e))}}),S&&r("div",{className:f,children:[i("div",{children:se(j)}),i("div",{children:se(L)})]})]}))};export{y as InputRangeSlider};
 //# sourceMappingURL=input-range-slider.js.map