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

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

@@ -1,53 +1,122 @@
 import type { RefObject } from "react";
 import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select";
-import type { DropdownCustomLabelProps, DropdownSearchProps, DropdownVariantType, ExpandMode } from "../shared/dropdown-list-v2/types";
+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 type { InputRangeSelectProps } from "./types";
-export declare const InputRangeSelect: <T, V>({ selectedOptions, placeholders, options, disabled, className, readOnly, error, "data-testid": testId, id, enableSearch, searchFunction, searchPlaceholder, valueExtractor, valueToStringFunction, listExtractor, displayValueExtractor, onSelectOption, onShowOptions, onHideOptions, onRetry, optionsLoadState, optionTruncationType, renderCustomSelectedOption, renderListItem, renderCustomCallToAction, alignment, dropdownZIndex, dropdownRootNode, dropdownWidth, ...otherProps }: InputRangeSelectProps<T, V>) => JSX.Element;
+/**
+ * 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 r,jsxs as o}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"styled-components";import{StringHelper as s}from"../util/string-helper.js";import"../v3_theme/index.js";import"../shared/dropdown-list-v2/dropdown-label.styles.js";import{DropdownList as a}from"../shared/dropdown-list-v2/dropdown-list.js";import{DropdownListState as c}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 p}from"../util/simple-id-generator.js";import{Wrapper as u,LabelContainer as m,PlaceholderLabel as h,ValueLabel as v}from"../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{RangeInputInnerContainer as w}from"../shared/range-input-inner-container/range-input-inner-container.js";import{StyledInputWrapper as g,ClearIconContainer as j}from"./input-range-select.style.js";const y=y=>{var{selectedOptions:x,placeholders:b={from:"Select",to:"Select"},options:S,disabled:T,className:O,readOnly:C,error:E,"data-testid":I,id:$,enableSearch:A=!1,searchFunction:D,searchPlaceholder:_,valueExtractor:L,valueToStringFunction:F,listExtractor:N,displayValueExtractor:R,onSelectOption:k,onShowOptions:P,onHideOptions:B,onRetry:H,optionsLoadState:W={from:"success",to:"success"},optionTruncationType:Z="middle",renderCustomSelectedOption:V,renderListItem:q,renderCustomCallToAction:G,alignment:K,dropdownZIndex:z,dropdownRootNode:J,dropdownWidth:M}=y,Q=e(y,["selectedOptions","placeholders","options","disabled","className","readOnly","error","data-testid","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth"]);const[U,X]=t(),[Y,ee]=t(),[re,oe]=t("none"),te="none"!==re,[ne,ie]=t(!1),le=n(null),de={from:n(null),to:n(null)},se=n(null),[ae]=t((()=>null!=$?$:p.generate())),ce=`${ae}-range-listbox`;i((()=>{X(null==x?void 0:x.from),ee(null==x?void 0:x.to)}),[x]),i((()=>{var e;te&&"to"===re&&(null===(e=se.current)||void 0===e||e.refocus({index:0}))}),[te,re]);const pe=e=>{e||null==B||B(),e&&(null==P||P())},ue=e=>{var r,o;const t="from"===e?U:Y;if(!t)return"";if(R)return R(t);if(L){const e=L(t);return F?F(e):null!==(o=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==o?o:""}return t.toString()},me=(e,r)=>{var o;if("middle"===Z){let t=0;return(null===(o=de[e])||void 0===o?void 0:o.current)&&(t=de[e].current.getBoundingClientRect().width),s.truncateOneLine(r,t,120,8)}return r},he=()=>{switch(re){case"from":return"start";case"to":return"end";case"none":return re}},ve=l((()=>{var e;return"none"===re?[]:null!==(e=null==S?void 0:S[re])&&void 0!==e?e:[]}),[re,S]),fe=l((()=>{if("none"===re)return[];const e="from"===re?U:Y;return e?[e]:[]}),[re,U,Y]),we=e=>r=>{r.stopPropagation(),r.preventDefault(),T||C||(oe("to"===e&&U?"to":"from"),pe(!0))},ge=(e,r)=>{var o;if("none"!==re){if("from"===re)return X(e),null==k||k({from:e},r),ee(void 0),oe("to"),void pe(!0);ee(e),null==k||k({to:e},r),oe("none"),pe(!1),null===(o=le.current)||void 0===o||o.focus(),ie(!0)}},je=()=>{var e;oe("none"),pe(!1),null===(e=le.current)||void 0===e||e.focus(),ie(!0),U&&Y||(X(void 0),ee(void 0))},ye=e=>{var r;e.stopPropagation(),e.preventDefault(),X(void 0),ee(void 0),null==k||k({from:void 0,to:void 0},void 0),null===(r=le.current)||void 0===r||r.focus(),ie(!0)},xe=()=>ie(!0),be=e=>{ne&&!te&&le.current&&!le.current.contains(e.relatedTarget)&&ie(!1)},Se=e=>{if(!T&&!C&&!te&&e.currentTarget===e.target)switch(e.key){case"Enter":case" ":case"ArrowDown":e.preventDefault(),oe("from"),pe(!0)}},Te=e=>{const o="from"===e?U:Y;return o?V?V(o):r(v,{$truncateType:Z,children:me(e,ue(e))}):r(h,{$truncateType:Z,children:me(e,(null==b?void 0:b[e])||"")})},Oe=e=>r(m,{onClick:we(e),ref:de[e],$disabled:T,children:Te(e)});return r(u,Object.assign({id:$},Q,{children:r(c,{children:r(f,{enabled:!C&&!T,isOpen:te,renderElement:()=>o(g,{className:O,"data-testid":I,ref:le,tabIndex:0,onFocus:xe,onBlur:be,$focused:ne||te,$disabled:T,$readOnly:C,$error:E,onKeyDown:Se,children:[o(w,{currentActive:he(),error:E,children:[Oe("from"),Oe("to")]}),!te&&U&&Y&&!C&&!T&&r(j,{onClick:ye,type:"button","aria-label":"Clear",children:r(d,{"aria-hidden":!0})})]}),renderDropdown:()=>r(a,{ref:se,"data-testid":`${I}-dropdown`,listboxId:ce,listItems:ve,onSelectItem:ge,onDismiss:je,valueExtractor:L,listExtractor:N,selectedItems:fe,itemsLoadState:W[re],itemTruncationType:Z,onRetry:H,width:M,matchElementWidth:!M,enableSearch:A,searchFunction:D,searchPlaceholder:_,renderListItem:q,renderCustomCallToAction:G}),onOpen:()=>{T||C||"none"===re&&(oe("from"),pe(!0))},onClose:()=>{oe("none"),pe(!1),U&&Y||(X(void 0),ee(void 0)),ie(!1)},onDismiss:je,clickToToggle:!1,offset:8,alignment:K,fitAvailableHeight:!0,customZIndex:z,rootNode:J})})}))};export{y 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 type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { ClearIcon } from \"../input/input.style\";\nimport type { DropdownListApi } from \"../shared/dropdown-list-v2\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n    Wrapper,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { SimpleIdGenerator } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    ClearIconContainer,\n    StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport type { 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    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    ...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    const [isFocused, setIsFocused] = useState(false);\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const labelContainerRef = {\n        from: useRef<HTMLDivElement>(null),\n        to: useRef<HTMLDivElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const [internalId] = useState<string>(\n        () => id ?? SimpleIdGenerator.generate()\n    );\n    const listboxId = `${internalId}-range-listbox`;\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    // HELPER FUNCTIONS\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 (labelContainerRef[type]?.current) {\n                widthOfElement =\n                    labelContainerRef[type].current.getBoundingClientRect()\n                        .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    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType?: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n\n            if (disabled || readOnly) return;\n\n            if (rangeType === \"to\" && selectedFromValue) {\n                setFocusedInput(\"to\");\n            } else {\n                setFocusedInput(\"from\");\n            }\n\n            triggerOptionDisplayCallback(true);\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            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        nodeRef.current?.focus();\n        setIsFocused(true);\n    };\n\n    const handleDismiss = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        nodeRef.current?.focus();\n        setIsFocused(true);\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        setIsFocused(false);\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\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        nodeRef.current?.focus();\n        setIsFocused(true);\n    };\n\n    const handleNodeFocus = () => setIsFocused(true);\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            isFocused &&\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n        if (disabled || readOnly) return;\n        if (isOpen) return;\n        if (event.currentTarget !== event.target) return;\n\n        switch (event.key) {\n            case \"Enter\":\n            case \" \":\n            case \"ArrowDown\":\n                event.preventDefault();\n                setFocusedInput(\"from\");\n                triggerOptionDisplayCallback(true);\n                break;\n            default:\n                break;\n        }\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        <LabelContainer\n            onClick={handleSelectorClick(rangeType)}\n            ref={labelContainerRef[rangeType]}\n            $disabled={disabled}\n        >\n            {renderLabel(rangeType)}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <StyledInputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={0}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={isFocused || isOpen}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                onKeyDown={handleKeyDown}\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                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\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","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","isFocused","setIsFocused","nodeRef","useRef","labelContainerRef","dropdownRef","internalId","SimpleIdGenerator","generate","listboxId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","handleSelectorClick","event","stopPropagation","preventDefault","handleListItemClick","item","extractedValue","undefined","focus","handleDismiss","handleClear","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleKeyDown","currentTarget","target","key","renderLabel","_jsx","ValueLabel","$truncateType","PlaceholderLabel","renderSelectorContent","LabelContainer","onClick","ref","$disabled","children","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","onKeyDown","RangeInputInnerContainer","currentActive","ClearIconContainer","ClearIcon","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"owDAwBO,MAAMA,EAA0BC,IAAA,IAAAC,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,sBACbA,EAAqBC,eACrBA,EAAcC,cACdA,EAAaC,cACbA,EAAaC,QACbA,EAAOC,iBACPA,EAAmB,CAAEpB,KAAM,UAAWC,GAAI,WAAWoB,qBACrDA,EAAuB,SAAQC,2BAC/BA,EAA0BC,eAC1BA,EAAcC,yBACdA,EAAwBC,UACxBA,EAASC,eACTA,EAAcC,iBACdA,EAAgBC,cAChBA,GAAa/B,EACVgC,EAAUC,EAAAjC,EA9BsB,8dAmCnC,MAAOkC,EAAmBC,GAAwBC,KAC3CC,EAAiBC,IAAsBF,KACvCG,GAAcC,IAAmBJ,EACpC,QAEEK,GAA0B,SAAjBF,IACRG,GAAWC,IAAgBP,GAAS,GAErCQ,GAAUC,EAA8B,MACxCC,GAAoB,CACtB3C,KAAM0C,EAAuB,MAC7BzC,GAAIyC,EAAuB,OAEzBE,GAAcF,EAAwB,OAErCG,IAAcZ,GACjB,IAAMzB,QAAAA,EAAMsC,EAAkBC,aAE5BC,GAAY,GAAGH,mBAKrBI,GAAU,KACNjB,EAAqBlC,eAAAA,EAAiBE,MACtCmC,GAAmBrC,eAAAA,EAAiBG,GAAG,GACxC,CAACH,IAEJmD,GAAU,WACDX,IAEgB,OAAjBF,KACmB,QAAnBvC,EAAA+C,GAAYM,eAAO,IAAArD,GAAAA,EAAEsD,QAAQ,CAAEC,MAAO,IAC1C,GACD,CAACd,GAAQF,KAKZ,MAAMiB,GAAgCC,IAC7BA,GAAMpC,SAAAA,IACPoC,IAAMrC,SAAAA,IAAiB,EAGzBsC,GAAmBC,YACrB,MAAMC,EACY,SAAdD,EAAuBzB,EAAoBG,EAC/C,IAAKuB,EAAU,MAAO,GAEtB,GAAI1C,EAAuB,OAAOA,EAAsB0C,GAExD,GAAI7C,EAAgB,CAChB,MAAM8C,EAAQ9C,EAAe6C,GAC7B,OAAO5C,EACDA,EAAsB6C,GACH,QAAnBC,EAAe,QAAf9D,EAAA6D,aAAK,EAALA,EAAOE,gBAAQ,IAAA/D,OAAA,EAAAA,EAAAgE,KAAAH,UAAI,IAAAC,EAAAA,EAAI,EACjC,CAEA,OAAOF,EAASG,UAAU,EAGxBE,GAAgB,CAACC,EAAiBL,WACpC,GAA6B,WAAzBrC,EAAmC,CACnC,IAAI2C,EAAiB,EAMrB,OAL2B,QAAvBnE,EAAA8C,GAAkBoB,UAAK,IAAAlE,OAAA,EAAAA,EAAEqD,WACzBc,EACIrB,GAAkBoB,GAAMb,QAAQe,wBAC3BC,OAENC,EAAaC,gBAAgBV,EAAOM,EAAgB,IAAK,EACpE,CACA,OAAON,CAAK,EAGVW,GAAoB,KACtB,OAAQjC,IACJ,IAAK,OACD,MAAO,QACX,IAAK,KACD,MAAO,MACX,IAAK,OACD,OAAOA,KAIbkC,GAAiBC,GAAQ,WAC3B,MAAqB,SAAjBnC,GAAgC,GACN,QAAvBvC,EAAAK,aAAO,EAAPA,EAAUkC,WAAa,IAAAvC,EAAAA,EAAI,EAAE,GACrC,CAACuC,GAAclC,IAEZsE,GAAuBD,GAAQ,KACjC,GAAqB,SAAjBnC,GAAyB,MAAO,GACpC,MAAMqB,EACe,SAAjBrB,GAA0BL,EAAoBG,EAClD,OAAOuB,EAAW,CAACA,GAAY,EAAE,GAClC,CAACrB,GAAcL,EAAmBG,IAK/BuC,GACDjB,GAA2BkB,IACxBA,EAAMC,kBACND,EAAME,iBAEFzE,GAAYE,IAGZgC,GADc,OAAdmB,GAAsBzB,EACN,KAEA,QAGpBsB,IAA6B,GAAK,EAGpCwB,GAAsB,CAACC,EAASC,WAClC,GAAqB,SAAjB3C,GAAJ,CAEA,GAAqB,SAAjBA,GAOA,OANAJ,EAAqB8C,GACrB9D,SAAAA,EAAiB,CAAEhB,KAAM8E,GAAQC,GAEjC5C,QAAmB6C,GACnB3C,GAAgB,WAChBgB,IAA6B,GAIjClB,GAAmB2C,GACnB9D,SAAAA,EAAiB,CAAEf,GAAI6E,GAAQC,GAE/B1C,GAAgB,QAChBgB,IAA6B,GACd,QAAfxD,EAAA4C,GAAQS,eAAO,IAAArD,GAAAA,EAAEoF,QACjBzC,IAAa,EAlBgB,CAkBX,EAGhB0C,GAAgB,WAClB7C,GAAgB,QAChBgB,IAA6B,GAEd,QAAfxD,EAAA4C,GAAQS,eAAO,IAAArD,GAAAA,EAAEoF,QACjBzC,IAAa,GAERT,GAAsBG,IACvBF,OAAqBgD,GACrB7C,QAAmB6C,GACvB,EAuBEG,GAAeT,UACjBA,EAAMC,kBACND,EAAME,iBACN5C,OAAqBgD,GACrB7C,QAAmB6C,GACnBhE,SAAAA,EAAiB,CAAEhB,UAAMgF,EAAW/E,QAAI+E,QAAaA,GAEtC,QAAfnF,EAAA4C,GAAQS,eAAO,IAAArD,GAAAA,EAAEoF,QACjBzC,IAAa,EAAK,EAGhB4C,GAAkB,IAAM5C,IAAa,GAErC6C,GAAkBC,IAEhB/C,KACCD,IACDG,GAAQS,UACPT,GAAQS,QAAQqC,SAASD,EAAEE,gBAE5BhD,IAAa,EACjB,EAGEiD,GAAiBf,IACnB,IAAIvE,IAAYE,IACZiC,IACAoC,EAAMgB,gBAAkBhB,EAAMiB,OAElC,OAAQjB,EAAMkB,KACV,IAAK,QACL,IAAK,IACL,IAAK,YACDlB,EAAME,iBACNvC,GAAgB,QAChBgB,IAA6B,KAUnCwC,GAAerC,IACjB,MAAMC,EACY,SAAdD,EAAuBzB,EAAoBG,EAE/C,OAAKuB,EAQDnC,EACOA,EAA2BmC,GAIlCqC,EAACC,EAAU,CAAAC,cAAgB3E,WACtByC,GAAcN,EAAWD,GAAgBC,MAZ1CsC,EAACG,EAAgB,CAAAD,cAAgB3E,WAC5ByC,GAAcN,GAAWzD,aAAY,EAAZA,EAAeyD,KAAc,KAYlD,EAIf0C,GAAyB1C,GAC3BsC,EAACK,EAAc,CACXC,QAAS3B,GAAoBjB,GAC7B6C,IAAK1D,GAAkBa,GAAU8C,UACtBnG,EAAQoG,SAElBV,GAAYrC,KAsErB,OACIsC,EAACU,EAAOC,OAAAC,OAAA,CAAClG,GAAIA,GAAQqB,YACjBiE,EAACa,EAAiB,CAAAJ,SACdT,EAACc,EAAmB,CAChBC,SAAUxG,IAAaF,EACvBmC,OAAQA,GACRwE,cAxEM,IAEdC,EAACC,EAAkB,CACf5G,UAAWA,EAAS,cACPG,EACb8F,IAAK5D,GACLwE,SAAU,EACVC,QAAS9B,GACT+B,OAAQ9B,GAAc+B,SACZ7E,IAAaD,aACZnC,EAAQkH,UACRhH,EAAQiH,OACXhH,EACRiH,UAAW9B,GAAac,SAAA,CAExBQ,EAACS,EAAwB,CACrBC,cAAepD,KACf/D,MAAOA,EAAKiG,SAAA,CAEXL,GAAsB,QACtBA,GAAsB,UAGzB5D,IACEP,GACAG,IACC7B,IACAF,GACG2F,EAAC4B,EAAkB,CACftB,QAASjB,GACTpB,KAAK,SAAQ,aACF,QAAOwC,SAElBT,EAAC6B,2BAwCTC,eAjCO,IAEf9B,EAAC+B,GACGxB,IAAKzD,GAAW,cACH,GAAGrC,aAChByC,UAAWA,GACX8E,UAAWxD,GACXyD,aAAclD,GACdmD,UAAW9C,GACXtE,eAAgBA,EAChBE,cAAeA,EACfmH,cAAezD,GACf0D,eAAgB9G,EAAiBgB,IACjC+F,mBAAoB9G,EACpBF,QAASA,EACT+C,MAAOtC,EACPwG,mBAAoBxG,EACpBnB,aAAcA,EACdC,eAAgBA,EAChBC,kBAAmBA,EACnBY,eAAgBA,EAChBC,yBAA0BA,IAatB6G,OAhKG,KACXlI,GAAYE,GACK,SAAjB+B,KACAC,GAAgB,QAChBgB,IAA6B,GACjC,EA4JYiF,QA7KI,KAChBjG,GAAgB,QAChBgB,IAA6B,GAExBtB,GAAsBG,IACvBF,OAAqBgD,GACrB7C,QAAmB6C,IAGvBxC,IAAa,EAAM,EAqKPwF,UAAW9C,GACXqD,eAAe,EACfC,OAAQ,EACR/G,UAAWA,EACXgH,oBAAkB,EAClBC,aAAchH,EACdiH,SAAUhH,QAGZ"}
+{"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":"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"}

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 type { RefObject } from "react";
 import type { InputSelectOptionsProps, InputSelectSharedProps } from "../input-select/types";
-import type { DropdownDisplayProps, DropdownSearchProps, ItemsLoadStateType } from "../shared/dropdown-list-v2/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 type { InputRangeSliderProps } from "./types";
-export declare const InputRangeSlider: ({ value, min, max, step, minRange, numOfThumbs, colors, disabled, readOnly, ariaLabels, showSliderLabels, sliderLabelPrefix, sliderLabelSuffix, showIndicatorLabel, indicatorLabelPrefix, indicatorLabelSuffix, renderSliderLabel, onChange, onChangeEnd, ...otherProps }: InputRangeSliderProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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 n,jsx as r}from"react/jsx-runtime";import{useState as i,useEffect as l}from"react";import{V3_Colour as a}from"../v3_theme/index.js";import{Wrapper as t,IndicatorLabelContainer as d,Slider as s,SliderTrack as o,SliderThumb as c,Knob as b,LabelContainer as u,LabelText as f}from"./input-range-slider.styles.js";const h=h=>{var{value:m,min:x=0,max:g=100,step:p=1,minRange:L,numOfThumbs:v=2,colors:$,disabled:O,readOnly:S,ariaLabels:j,showSliderLabels:y,sliderLabelPrefix:C,sliderLabelSuffix:w,showIndicatorLabel:I,indicatorLabelPrefix:P,indicatorLabelSuffix:T,renderSliderLabel:_,onChange:k,onChangeEnd:A}=h,E=e(h,["value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","ariaLabels","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","renderSliderLabel","onChange","onChangeEnd"]);const[M,R]=i(q()),D=function(){const e=function(){const e=O||S?a["border-disabled"]:a["border-strong"],n=O||S?a["border-selected-disabled"]:a["border-selected"];if(1===v)return[n,e];const r=[];r.push(e);for(let e=0;e<v-1;e++)r.push(n);return r.push(e),r}();return new Array(v+1).fill(0).map(((n,r)=>(null==$?void 0:$[r])||e[r]))}();l((()=>{m!==M&&R(q())}),[m]);function q(){if(m&&m.length===v)return m;const e=[];for(let n=0;n<v;n++)e.push(x+p*n);return e}const z=e=>_?_(e):n(f,{children:[C,e,w]});return n(t,Object.assign({},E,{children:[I&&r(d,{children:(()=>{let e="";if(1===M.length)e=`${M[0]}`;else if(2===M.length)e=`${M[0]} - ${M[1]}`;else if(M.length>2){e=`${Math.min(...M)} - ${Math.max(...M)}`}return n(f,{children:[P,e,T]})})()}),r(s,{step:p,min:x,max:g,value:M,disabled:O||S,onChange:(e,n)=>{if("number"==typeof e){const n=[e];R(n),null==k||k(n)}else{if(n>-1&&M[n]===e[n])return;const r=[...e];R(r),null==k||k(r)}},onAfterChange:e=>{if("number"==typeof e){const n=[e];R(n),null==A||A(n)}else{const n=[...e];R(n),null==A||A(n)}},minDistance:L,ariaLabel:j,renderThumb:(e,n)=>r(c,Object.assign({"data-testid":`slider-thumb-${n.index}`},e,{tabIndex:O?void 0:e.tabIndex,children:r(b,{$disabled:O,$readOnly:S})})),renderTrack:(e,n)=>r(o,Object.assign({"data-testid":`slider-track-${n.index}`},e,{$color:D[n.index]}))}),y&&n(u,{children:[r("div",{children:z(x)}),r("div",{children:z(g)})]})]}))};export{h 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

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

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.js","sources":["../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    IndicatorLabelContainer,\n    Knob,\n    LabelContainer,\n    LabelText,\n    Slider,\n    SliderThumb,\n    SliderTrack,\n    Wrapper,\n} from \"./input-range-slider.styles\";\nimport type { InputRangeSliderProps } from \"./types\";\n\nexport const InputRangeSlider = ({\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    ariaLabels,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\n    renderSliderLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputRangeSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n    const trackColors = getTrackColors();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number | readonly number[], index: number) => {\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChange?.(val);\n        } else {\n            if (index > -1 && selection[index] === value[index]) {\n                // skip unnecessary update when dragging the start thumb across the end thumb\n                return;\n            }\n            const newSelection = [...value];\n            setSelection(newSelection);\n            onChange?.(newSelection);\n        }\n    };\n\n    const handleChangeEnd = (value: number | readonly number[]) => {\n        if (typeof value === \"number\") {\n            const val = [value];\n            setSelection(val);\n            onChangeEnd?.(val);\n        } else {\n            const newSelection = [...value];\n            setSelection(newSelection);\n            onChangeEnd?.(newSelection);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        if (value && value.length === numOfThumbs) {\n            return value;\n        }\n\n        const values: number[] = [];\n        for (let i = 0; i < numOfThumbs; i++) {\n            values.push(min + step * i);\n        }\n        return values;\n    }\n\n    function getTrackColors() {\n        const defaultColors = getDefaultColors();\n        return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n            return colors?.[i] || defaultColors[i];\n        });\n    }\n\n    function getDefaultColors() {\n        const inactiveColor =\n            disabled || readOnly\n                ? V3_Colour[\"border-disabled\"]\n                : V3_Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? V3_Colour[\"border-selected-disabled\"]\n                : V3_Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [];\n        defaultColors.push(inactiveColor);\n        for (let i = 0; i < numOfThumbs - 1; i++) {\n            defaultColors.push(activeColor);\n        }\n        defaultColors.push(inactiveColor);\n        return defaultColors;\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const formatLabel = (value: number) => {\n        if (renderSliderLabel) {\n            return renderSliderLabel(value);\n        }\n\n        return (\n            <LabelText>\n                {sliderLabelPrefix}\n                {value}\n                {sliderLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    const formatIndicationLabel = () => {\n        let formattedSelection = \"\";\n\n        if (selection.length === 1) {\n            formattedSelection = `${selection[0]}`;\n        } else if (selection.length === 2) {\n            formattedSelection = `${selection[0]} - ${selection[1]}`;\n        } else if (selection.length > 2) {\n            const min = Math.min(...selection);\n            const max = Math.max(...selection);\n            formattedSelection = `${min} - ${max}`;\n        }\n\n        return (\n            <LabelText>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </LabelText>\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            {showIndicatorLabel && (\n                <IndicatorLabelContainer>\n                    {formatIndicationLabel()}\n                </IndicatorLabelContainer>\n            )}\n            <Slider\n                step={step}\n                min={min}\n                max={max}\n                value={selection}\n                disabled={disabled || readOnly}\n                onChange={handleChange}\n                onAfterChange={handleChangeEnd}\n                minDistance={minRange}\n                ariaLabel={ariaLabels}\n                renderThumb={(\n                    thumbProps: React.HTMLAttributes<HTMLDivElement>,\n                    state\n                ) => {\n                    return (\n                        <SliderThumb\n                            data-testid={`slider-thumb-${state.index}`}\n                            {...thumbProps}\n                            tabIndex={\n                                disabled ? undefined : thumbProps.tabIndex\n                            }\n                        >\n                            <Knob $disabled={disabled} $readOnly={readOnly} />\n                        </SliderThumb>\n                    );\n                }}\n                renderTrack={(\n                    trackProps: React.HTMLAttributes<HTMLDivElement>,\n                    state\n                ) => {\n                    return (\n                        <SliderTrack\n                            data-testid={`slider-track-${state.index}`}\n                            {...trackProps}\n                            $color={trackColors[state.index]}\n                        />\n                    );\n                }}\n            />\n            {showSliderLabels && (\n                <LabelContainer>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </LabelContainer>\n            )}\n        </Wrapper>\n    );\n};\n"],"names":["InputRangeSlider","_a","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","ariaLabels","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","renderSliderLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","trackColors","defaultColors","inactiveColor","V3_Colour","activeColor","push","i","getDefaultColors","Array","fill","map","_","getTrackColors","useEffect","length","values","formatLabel","_jsxs","LabelText","children","Wrapper","Object","assign","_jsx","IndicatorLabelContainer","formattedSelection","Math","formatIndicationLabel","Slider","index","val","newSelection","onAfterChange","minDistance","ariaLabel","renderThumb","thumbProps","state","SliderThumb","tabIndex","undefined","Knob","$disabled","$readOnly","renderTrack","trackProps","SliderTrack","$color","LabelContainer"],"mappings":"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"}
+{"version":3,"file":"input-range-slider.js","sources":["../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport { Slider } from \"./slider-components\";\nimport { PAGE_STEP_MULTIPLIER } from \"./slider-utils\";\nimport type { InputRangeSliderProps } from \"./types\";\n\n// @catalog\n/**\n * A draggable track slider for selecting one or more numeric values within a\n * bounded range.\n *\n * Use `InputRangeSlider` when the selection does not need to be precise;\n * the user picks a value or a range by dragging thumb controls along a track.\n * @keywords field, form, input, range, slider\n */\nexport const InputRangeSlider = ({\n    id,\n    value,\n    min = 0,\n    max = 100,\n    step = 1,\n    minRange = 0,\n    numOfThumbs = 2,\n    colors,\n    disabled,\n    readOnly,\n    showSliderLabels,\n    sliderLabelPrefix,\n    sliderLabelSuffix,\n    showIndicatorLabel,\n    indicatorLabelPrefix,\n    indicatorLabelSuffix,\n    ariaLabels,\n    ariaDescriptions,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    renderSliderLabel,\n    onChange,\n    onChangeEnd,\n    className,\n    ...otherProps\n}: InputRangeSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n    const [focusedThumbIndex, setFocusedThumbIndex] = useState<number | null>(\n        null\n    );\n    const internalId = useId();\n    const trackColors = getTrackColors();\n    const indicatorTextId = `${internalId}-indicator`;\n    const instructionTextId = `${internalId}-instruction`;\n    const resolvedAriaLabels = getResolvedAriaLabels();\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initialiseSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number[]) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        setSelection(value);\n        onChange?.(value);\n    };\n\n    const handleChangeEnd = (value: number[]) => {\n        if (readOnly || disabled) {\n            return;\n        }\n\n        setSelection(value);\n        onChangeEnd?.(value);\n    };\n\n    const handleThumbKeyDown = (\n        event: React.KeyboardEvent<HTMLDivElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        // Browser native range input only steps by 1 for PageUp/Down; apply large step manually\n        if (event.key === \"PageUp\" || event.key === \"PageDown\") {\n            event.preventDefault();\n            const delta =\n                (event.key === \"PageUp\" ? 1 : -1) * step * PAGE_STEP_MULTIPLIER;\n            const nextSelection = [...selection];\n            nextSelection[index] = clampValueForThumb(\n                selection[index] + delta,\n                index,\n                selection\n            );\n            if (nextSelection[index] !== selection[index]) {\n                setSelection(nextSelection);\n                onChange?.(nextSelection);\n                onChangeEnd?.(nextSelection);\n            }\n        }\n\n        const message = getBlockedMovementMessage(event.key, index);\n\n        if (!message) {\n            return;\n        }\n\n        clearAnnouncer(\"assertive\");\n        announce(message, \"assertive\");\n    };\n\n    const handleNativeRangeChange = (\n        event: React.ChangeEvent<HTMLInputElement>,\n        index: number\n    ) => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        const nextRawValue = Number(event.currentTarget.value);\n\n        const nextSelection = [...selection];\n        nextSelection[index] = clampValueForThumb(\n            nextRawValue,\n            index,\n            selection\n        );\n\n        setSelection(nextSelection);\n        onChange?.(nextSelection);\n        onChangeEnd?.(nextSelection);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        if (value && value.length === numOfThumbs) {\n            return value;\n        }\n\n        const values: number[] = [];\n        for (let i = 0; i < numOfThumbs; i++) {\n            values.push(min + step * i);\n        }\n        return values;\n    }\n\n    function getResolvedAriaLabels() {\n        return Array.from({ length: numOfThumbs }, (_, index) => {\n            return ariaLabels?.[index] || getDefaultAriaLabel(index);\n        });\n    }\n\n    function getDefaultAriaLabel(index: number) {\n        if (numOfThumbs === 1) {\n            return \"\";\n        }\n\n        if (index === 0) {\n            return \"Minimum value slider\";\n        }\n\n        if (index === numOfThumbs - 1) {\n            return \"Maximum value slider\";\n        }\n\n        return \"Indeterminate value slider\";\n    }\n\n    function getThumbDescriptionText(index: number) {\n        return ariaDescriptions?.[index];\n    }\n\n    function getTrackColors() {\n        const defaultColors = getDefaultColors();\n        return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n            return colors?.[i] || defaultColors[i];\n        });\n    }\n\n    function getDefaultColors() {\n        const inactiveColor =\n            disabled || readOnly\n                ? Colour[\"border-disabled\"]\n                : Colour[\"border-strong\"];\n        const activeColor =\n            disabled || readOnly\n                ? Colour[\"border-selected-disabled\"]\n                : Colour[\"border-selected\"];\n\n        if (numOfThumbs === 1) {\n            return [activeColor, inactiveColor];\n        }\n\n        const defaultColors: typeof colors = [inactiveColor];\n\n        for (let index = 0; index < numOfThumbs - 1; index++) {\n            defaultColors.push(activeColor);\n        }\n\n        defaultColors.push(inactiveColor);\n        return defaultColors;\n    }\n\n    function getValueText(currentValue: number) {\n        return `${sliderLabelPrefix || \"\"}${currentValue}${\n            sliderLabelSuffix || \"\"\n        }`;\n    }\n\n    function getThumbDescriptionIds(thumbDescriptionId?: string) {\n        return concatIds(\n            ariaDescribedBy,\n            showIndicatorLabel ? indicatorTextId : undefined,\n            disabled || readOnly ? undefined : instructionTextId,\n            thumbDescriptionId\n        );\n    }\n\n    function isIncreaseKey(key: string) {\n        return [\"ArrowRight\", \"ArrowUp\", \"PageUp\", \"End\"].includes(key);\n    }\n\n    function isDecreaseKey(key: string) {\n        return [\"ArrowLeft\", \"ArrowDown\", \"PageDown\", \"Home\"].includes(key);\n    }\n\n    function getSliderTypeText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.toLowerCase();\n    }\n\n    function getSliderTargetText(label?: string) {\n        if (!label) {\n            return \"slider\";\n        }\n\n        return label.replace(/ slider$/i, \"\").toLowerCase();\n    }\n\n    function getBlockedMovementMessage(key: string, index: number) {\n        if (numOfThumbs < 2) {\n            return \"\";\n        }\n\n        const currentValue = selection[index];\n        const previousValue = index > 0 ? selection[index - 1] : undefined;\n        const nextValue =\n            index < selection.length - 1 ? selection[index + 1] : undefined;\n\n        const currentLabel = resolvedAriaLabels[index];\n        const previousLabel =\n            index > 0 ? resolvedAriaLabels[index - 1] : undefined;\n        const nextLabel =\n            index < resolvedAriaLabels.length - 1\n                ? resolvedAriaLabels[index + 1]\n                : undefined;\n\n        if (isIncreaseKey(key)) {\n            if (\n                nextValue !== undefined &&\n                currentValue >= nextValue - minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Increase the ${getSliderTargetText(\n                    nextLabel\n                )} to set a higher ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        if (isDecreaseKey(key)) {\n            if (\n                previousValue !== undefined &&\n                currentValue <= previousValue + minRange\n            ) {\n                return `The ${getSliderTypeText(\n                    currentLabel\n                )} has reached its limit. Decrease the ${getSliderTargetText(\n                    previousLabel\n                )} to set a lower ${getSliderTargetText(currentLabel)}.`;\n            }\n        }\n\n        return \"\";\n    }\n\n    function getThumbMin(index: number, values = selection) {\n        if (index === 0) {\n            return min;\n        }\n\n        return values[index - 1] + minRange;\n    }\n\n    function getThumbMax(index: number, values = selection) {\n        if (index === values.length - 1) {\n            return max;\n        }\n\n        return values[index + 1] - minRange;\n    }\n\n    function clampValueForThumb(\n        nextValue: number,\n        index: number,\n        values: number[]\n    ) {\n        const minAllowed = getThumbMin(index, values);\n        const maxAllowed = getThumbMax(index, values);\n\n        return Math.min(maxAllowed, Math.max(minAllowed, nextValue));\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const formatLabel = (value: number) => {\n        if (renderSliderLabel) {\n            return renderSliderLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL className={styles.labelText}>\n                {sliderLabelPrefix}\n                {value}\n                {sliderLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const formatIndicationLabel = () => {\n        let formattedSelection = \"\";\n\n        if (selection.length === 1) {\n            formattedSelection = `${selection[0]}`;\n        } else if (selection.length === 2) {\n            formattedSelection = `${selection[0]} - ${selection[1]}`;\n        } else if (selection.length > 2) {\n            const minValue = Math.min(...selection);\n            const maxValue = Math.max(...selection);\n            formattedSelection = `${minValue} - ${maxValue}`;\n        }\n\n        return (\n            <Typography.BodyBL className={styles.labelText}>\n                {indicatorLabelPrefix}\n                {formattedSelection}\n                {indicatorLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    return (\n        <div\n            {...otherProps}\n            id={id}\n            role=\"group\"\n            aria-labelledby={ariaLabelledBy}\n            aria-disabled={disabled}\n            className={clsx(styles.wrapper, className)}\n        >\n            {!disabled && !readOnly && (\n                <VisuallyHidden id={instructionTextId}>\n                    Use left and right arrow keys to adjust the slider.\n                </VisuallyHidden>\n            )}\n\n            {showIndicatorLabel && (\n                <div\n                    id={indicatorTextId}\n                    className={styles.indicatorLabelContainer}\n                >\n                    {formatIndicationLabel()}\n                </div>\n            )}\n\n            {selection.map((thumbValue, index) => {\n                const thumbLabelTextId = `${internalId}-thumb-label-${index}`;\n                const thumbDescriptionText = getThumbDescriptionText(index);\n                const thumbDescriptionTextId = thumbDescriptionText\n                    ? `${internalId}-thumb-description-${index}`\n                    : undefined;\n\n                return (\n                    <VisuallyHidden key={`native-slider-${index}`}>\n                        {thumbDescriptionTextId && (\n                            <span id={thumbDescriptionTextId}>\n                                {thumbDescriptionText}\n                            </span>\n                        )}\n                        <span id={thumbLabelTextId}>\n                            {resolvedAriaLabels[index]}\n                        </span>\n\n                        <input\n                            data-testid={`slider-input-${index}`}\n                            type=\"range\"\n                            min={getThumbMin(index)}\n                            max={getThumbMax(index)}\n                            step={step}\n                            value={thumbValue}\n                            aria-disabled={disabled || undefined}\n                            readOnly={readOnly}\n                            aria-labelledby={concatIds(\n                                ariaLabelledBy,\n                                thumbLabelTextId\n                            )}\n                            aria-describedby={getThumbDescriptionIds(\n                                thumbDescriptionTextId\n                            )}\n                            aria-valuetext={getValueText(thumbValue)}\n                            aria-invalid={ariaInvalid}\n                            onFocus={() => setFocusedThumbIndex(index)}\n                            onBlur={() => setFocusedThumbIndex(null)}\n                            onChange={(event) =>\n                                handleNativeRangeChange(event, index)\n                            }\n                            onKeyDown={(event) => {\n                                handleThumbKeyDown(event, index);\n                            }}\n                        />\n                    </VisuallyHidden>\n                );\n            })}\n\n            {/* Native range inputs provide the accessible interaction model.\n                The visible slider is presentation-only. */}\n            <Slider\n                selection={selection}\n                min={min}\n                max={max}\n                step={step}\n                minRange={minRange}\n                disabled={disabled}\n                readOnly={readOnly}\n                trackColors={trackColors}\n                focusedThumbIndex={focusedThumbIndex}\n                onChange={handleChange}\n                onChangeEnd={handleChangeEnd}\n            />\n\n            {showSliderLabels && (\n                <div className={styles.labelContainer}>\n                    <div>{formatLabel(min)}</div>\n                    <div>{formatLabel(max)}</div>\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["InputRangeSlider","_a","id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","ariaInvalid","ariaLabelledBy","ariaDescribedBy","renderSliderLabel","onChange","onChangeEnd","className","otherProps","__rest","selection","setSelection","useState","initialiseSelection","focusedThumbIndex","setFocusedThumbIndex","internalId","useId","trackColors","defaultColors","inactiveColor","Colour","activeColor","index","push","getDefaultColors","Array","fill","map","_","i","getTrackColors","indicatorTextId","instructionTextId","resolvedAriaLabels","from","length","getDefaultAriaLabel","useEffect","handleThumbKeyDown","event","key","preventDefault","delta","PAGE_STEP_MULTIPLIER","nextSelection","clampValueForThumb","message","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","values","label","toLowerCase","replace","getThumbMin","getThumbMax","minAllowed","maxAllowed","Math","formatLabel","_jsxs","Typography","BodyBL","styles.labelText","children","Object","assign","role","clsx","styles.wrapper","_jsx","VisuallyHidden","styles.indicatorLabelContainer","formattedSelection","formatIndicationLabel","thumbValue","thumbLabelTextId","thumbDescriptionText","getThumbDescriptionText","thumbDescriptionTextId","type","concatIds","thumbDescriptionId","onFocus","onBlur","nextRawValue","Number","currentTarget","handleNativeRangeChange","onKeyDown","Slider","styles.labelContainer"],"mappings":"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"}