npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.2 → 4.0.0-alpha.4 - Mend

@lifesg/react-design-system 4.0.0-alpha.2 → 4.0.0-alpha.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (2426) hide show

package/cjs/input-range-select/input-range-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/cross"),o=require("react"),n=require("../input/input.styles.js"),i=require("../shared/accessibility/index.js");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js"),a=require("../util/string-helper.js");require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var l=require("../shared/dropdown-list/dropdown-list.js"),d=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var u=require("../shared/dropdown-wrapper/element-with-dropdown.js"),c=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1qveyb9.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var p=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),m=require("../shared/range-input-inner-container/range-input-inner-container.js"),h=require("./input-range-select.style.js");exports.InputRangeSelect=f=>{var{selectedOptions:v,placeholders:q={from:"Select",to:"Select"},options:j,disabled:x,className:w,readOnly:b,error:g,"data-testid":y,id:S,enableSearch:_=!1,searchFunction:I,searchPlaceholder:T,valueExtractor:C,valueToStringFunction:O,listExtractor:A,displayValueExtractor:E,onSelectOption:k,onShowOptions:L,onHideOptions:R,onRetry:D,optionsLoadState:H={from:"success",to:"success"},optionTruncationType:P="middle",renderCustomSelectedOption:N,renderListItem:B,renderCustomCallToAction:F,alignment:M,dropdownZIndex:$,dropdownRootNode:G,dropdownWidth:V,"aria-labelledby":W,"aria-describedby":Z}=f,K=e.__rest(f,["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","aria-labelledby","aria-describedby"]);const[z,J]=o.useState(),[Q,U]=o.useState(),[X,Y]=o.useState("none"),ee="none"!==X,re={from:o.useRef(null),to:o.useRef(null)},te=o.useRef(null),oe=s.useId(),ne=`${oe}-range-listbox`,ie=`${oe}-from-label`,se=`${oe}-to-label`;o.useEffect((()=>{J(null==v?void 0:v.from),U(null==v?void 0:v.to)}),[v]),o.useEffect((()=>{var e;ee&&"to"===X&&(null===(e=te.current)||void 0===e||e.refocus({index:0}))}),[ee,X]);const ae=e=>{e||null==R||R(),e&&(null==L||L())},le=e=>{var r,t;const o="from"===e?z:Q;if(!o)return"";if(E)return E(o);if(C){const e=C(o);return O?O(e):null!==(t=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==t?t:""}return o.toString()},de=(e,r)=>{var t;if("middle"===P){let o=0;return(null===(t=re[e])||void 0===t?void 0:t.current)&&(o=re[e].current.getBoundingClientRect().width),a.StringHelper.truncateOneLine(r,o,120,8)}return r},ue=()=>{switch(X){case"from":return"start";case"to":return"end";case"none":return X}},ce=o.useMemo((()=>{var e;return"none"===X?[]:null!==(e=null==j?void 0:j[X])&&void 0!==e?e:[]}),[X,j]),pe=o.useMemo((()=>{if("none"===X)return[];const e="from"===X?z:Q;return e?[e]:[]}),[X,z,Q]),me=e=>{if(x||b)return;Y("to"!==e||z?e:"from"),ae(!0)},he=e=>{var r;null===(r=re[e].current)||void 0===r||r.focus()},fe=e=>{const r="from"===e?ie:se;return i.concatIds(r,W)},ve=e=>r=>{r.stopPropagation(),r.preventDefault(),me(e)},qe=e=>r=>{if(!x&&!b)switch(r.key){case"Enter":case" ":case"ArrowDown":r.preventDefault(),me(e)}},je=(e,r)=>{if("none"!==X){if("from"===X)return J(e),null==k||k({from:e},r),U(void 0),Y("to"),ae(!0),void he("to");U(e),null==k||k({to:e},r),Y("none"),ae(!1),he("to")}},xe=()=>{const e=X;Y("none"),ae(!1),he("to"===e?"to":"from"),z&&Q||(J(void 0),U(void 0))},we=e=>{e.stopPropagation(),e.preventDefault(),J(void 0),U(void 0),null==k||k({from:void 0,to:void 0},void 0),he("from")},be=e=>{const t="from"===e?z:Q;return t?N?N(t):r.jsx(p.ValueLabel,{truncateType:P,children:de(e,le(e))}):r.jsx(p.PlaceholderLabel,{truncateType:P,children:de(e,(null==q?void 0:q[e])||"")})},ge=e=>r.jsx(h.RangeSelectorButton,{type:"button",role:"combobox","aria-labelledby":fe(e),"aria-describedby":Z,"aria-expanded":ee&&X===e,"aria-controls":ne,"aria-disabled":x,"aria-readonly":b,onClick:ve(e),onKeyDown:qe(e),ref:re[e],tabIndex:0,children:be(e)});return r.jsx("div",Object.assign({id:S},K,{children:r.jsx(d.DropdownListState,{children:r.jsx(u.ElementWithDropdown,{enabled:!b&&!x,isOpen:ee,renderElement:()=>r.jsxs(h.StyledInputWrapper,{className:w,"data-testid":y,disabled:x,readOnly:b,error:g,focused:ee,children:[r.jsx(i.VisuallyHidden,{id:ie,children:(null==q?void 0:q.from)||"Select From"}),r.jsx(i.VisuallyHidden,{id:se,children:(null==q?void 0:q.to)||"Select To"}),r.jsxs(m.RangeInputInnerContainer,{currentActive:ue(),error:g,children:[ge("from"),ge("to")]}),!ee&&z&&Q&&!b&&!x&&r.jsx(c.BasicButton,{onClick:we,type:"button","aria-label":"Clear",className:h.ClearIconContainer,children:r.jsx(t.CrossIcon,{className:n.clearIcon,"aria-hidden":!0})})]}),renderDropdown:()=>r.jsx(l.DropdownList,{ref:te,"data-testid":`${y}-dropdown`,listboxId:ne,ariaLabel:"from"===X?`Selecting for: ${null==q?void 0:q.from}`:"to"===X?`Selecting for: ${null==q?void 0:q.to}`:void 0,listItems:ce,onSelectItem:je,onDismiss:xe,valueExtractor:C,listExtractor:A,selectedItems:pe,itemsLoadState:H[X],itemTruncationType:P,onRetry:D,width:V,matchElementWidth:!V,enableSearch:_,searchFunction:I,searchPlaceholder:T,renderListItem:B,renderCustomCallToAction:F}),onOpen:()=>{x||b||"none"===X&&(Y("from"),ae(!0))},onClose:()=>{Y("none"),ae(!1),z&&Q||(J(void 0),U(void 0))},onDismiss:xe,clickToToggle:!1,offset:8,alignment:M,fitAvailableHeight:!0,customZIndex:$,rootNode:G})})}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),o=require("react"),n=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var i=require("../util/simple-id-generator.js"),s=require("../util/string-helper.js");require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_mloii0.css");var a=require("../shared/dropdown-list/dropdown-list.js"),l=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var c=require("../shared/dropdown-wrapper/dropdown-wrapper.js"),p=require("../shared/input-wrapper/input-wrapper.styles.js"),m=require("../shared/range-input-inner-container/range-input-inner-container.js"),h=require("./input-range-select.styles.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=f(t);exports.InputRangeSelect=t=>{var{selectedOptions:f,placeholders:q={from:"Select",to:"Select"},options:j,disabled:w,className:x,readOnly:b,error:y,"data-testid":g,id:S,enableSearch:_=!1,searchFunction:T,searchPlaceholder:I,valueExtractor:C,valueToStringFunction:O,listExtractor:A,displayValueExtractor:k,onSelectOption:E,onShowOptions:L,onHideOptions:D,onRetry:R,optionsLoadState:H={from:"success",to:"success"},optionTruncationType:P="middle",renderCustomSelectedOption:N,renderListItem:B,renderCustomCallToAction:F,alignment:M,dropdownZIndex:W,dropdownRootNode:$,dropdownWidth:G,"aria-labelledby":V,"aria-describedby":Z}=t,K=e.__rest(t,["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","aria-labelledby","aria-describedby"]);const[z,J]=o.useState(),[Q,U]=o.useState(),[X,Y]=o.useState("none"),ee="none"!==X,re={from:o.useRef(null),to:o.useRef(null)},te=o.useRef(null),oe=i.useId(),ne=`${oe}-range-listbox`,ie=`${oe}-from-label`,se=`${oe}-to-label`;o.useEffect((()=>{J(null==f?void 0:f.from),U(null==f?void 0:f.to)}),[f]),o.useEffect((()=>{var e;ee&&"to"===X&&(null===(e=te.current)||void 0===e||e.refocus({index:0}))}),[ee,X]);const ae=e=>{e||null==D||D(),e&&(null==L||L())},le=e=>{var r,t;const o="from"===e?z:Q;if(!o)return"";if(k)return k(o);if(C){const e=C(o);return O?O(e):null!==(t=null===(r=null==e?void 0:e.toString)||void 0===r?void 0:r.call(e))&&void 0!==t?t:""}return o.toString()},de=(e,r)=>{var t;if("middle"===P){let o=0;return(null===(t=re[e])||void 0===t?void 0:t.current)&&(o=re[e].current.getBoundingClientRect().width),s.StringHelper.truncateOneLine(r,o,120,8)}return r},ue=()=>{switch(X){case"from":return"start";case"to":return"end";case"none":return X}},ce=o.useMemo((()=>{var e;return"none"===X?[]:null!==(e=null==j?void 0:j[X])&&void 0!==e?e:[]}),[X,j]),pe=o.useMemo((()=>{if("none"===X)return[];const e="from"===X?z:Q;return e?[e]:[]}),[X,z,Q]),me=e=>{if(w||b)return;Y("to"!==e||z?e:"from"),ae(!0)},he=e=>{var r;null===(r=re[e].current)||void 0===r||r.focus()},fe=e=>{const r="from"===e?ie:se;return n.concatIds(r,V)},ve=e=>r=>{r.stopPropagation(),r.preventDefault(),me(e)},qe=e=>r=>{if(!w&&!b)switch(r.key){case"Enter":case" ":case"ArrowDown":r.preventDefault(),me(e)}},je=(e,r)=>{if("none"!==X){if("from"===X)return J(e),null==E||E({from:e},r),U(void 0),Y("to"),ae(!0),void he("to");U(e),null==E||E({to:e},r),Y("none"),ae(!1),he("to")}},we=()=>{const e=X;Y("none"),ae(!1),he("to"===e?"to":"from"),z&&Q||(J(void 0),U(void 0))},xe=e=>{e.stopPropagation(),e.preventDefault(),J(void 0),U(void 0),null==E||E({from:void 0,to:void 0},void 0),he("from")},be=e=>{const t="from"===e?z:Q;return t?N?N(t):r.jsx(c.ValueLabel,{truncateType:P,children:de(e,le(e))}):r.jsx(c.PlaceholderLabel,{truncateType:P,children:de(e,(null==q?void 0:q[e])||"")})},ye=e=>r.jsx("button",{type:"button",role:"combobox","aria-labelledby":fe(e),"aria-describedby":Z,"aria-expanded":ee&&X===e,"aria-controls":ne,"aria-disabled":w,"aria-readonly":b,onClick:ve(e),onKeyDown:qe(e),ref:re[e],tabIndex:0,className:h.rangeSelectorButton,children:be(e)});return r.jsx("div",Object.assign({id:S},K,{children:r.jsx(l.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!b&&!w,isOpen:ee,renderElement:()=>r.jsxs(u.InputWrapper,{className:v.default(h.styledInputWrapper,x),"data-testid":g,disabled:w,readOnly:b,error:y,focused:ee,children:[r.jsx(n.VisuallyHidden,{id:ie,children:(null==q?void 0:q.from)||"Select From"}),r.jsx(n.VisuallyHidden,{id:se,children:(null==q?void 0:q.to)||"Select To"}),r.jsxs(m.RangeInputInnerContainer,{currentActive:ue(),error:y,children:[ye("from"),ye("to")]}),!ee&&z&&Q&&!b&&!w&&r.jsx("div",{className:p.clearButtonContainer,children:r.jsx(u.ClearButton,{onClick:xe,type:"button","aria-label":"Clear"})})]}),renderDropdown:()=>r.jsx(a.DropdownList,{ref:te,"data-testid":`${g}-dropdown`,listboxId:ne,ariaLabel:"from"===X?`Selecting for: ${null==q?void 0:q.from}`:"to"===X?`Selecting for: ${null==q?void 0:q.to}`:void 0,listItems:ce,onSelectItem:je,onDismiss:we,valueExtractor:C,listExtractor:A,selectedItems:pe,itemsLoadState:H[X],itemTruncationType:P,onRetry:R,width:G,matchElementWidth:!G,enableSearch:_,searchFunction:T,searchPlaceholder:I,renderListItem:B,renderCustomCallToAction:F}),onOpen:()=>{w||b||"none"===X&&(Y("from"),ae(!0))},onClose:()=>{Y("none"),ae(!1),z&&Q||(J(void 0),U(void 0))},onDismiss:we,clickToToggle:!1,offset:8,alignment:M,fitAvailableHeight:!0,customZIndex:W,rootNode:$})})}))};
 //# sourceMappingURL=input-range-select.js.map

package/cjs/input-range-select/input-range-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-range-select.js","sources":["../../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport * as styles from \"../input/input.styles\";\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 { BasicButton } from \"../shared/input-wrapper\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n ClearIconContainer,\n RangeSelectorButton,\n StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport 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 \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [selectedFromValue, setSelectedFromValue] = useState<T \| undefined>();\n const [selectedToValue, setSelectedToValue] = useState<T \| undefined>();\n const [focusedInput, setFocusedInput] = useState<RangeType \| \"none\">(\n \"none\"\n );\n const isOpen = focusedInput !== \"none\";\n\n const labelButtonRef = {\n from: useRef<HTMLButtonElement>(null),\n to: useRef<HTMLButtonElement>(null),\n };\n const dropdownRef = useRef<DropdownListApi>(null);\n\n const internalId = useId();\n const listboxId = `${internalId}-range-listbox`;\n const fromLabelId = `${internalId}-from-label`;\n const toLabelId = `${internalId}-to-label`;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelectedFromValue(selectedOptions?.from);\n setSelectedToValue(selectedOptions?.to);\n }, [selectedOptions]);\n\n useEffect(() => {\n if (!isOpen) return;\n\n if (focusedInput === \"to\") {\n dropdownRef.current?.refocus({ index: 0 });\n }\n }, [isOpen, focusedInput]);\n\n // =============================================================================\n // HELPERS\n // =============================================================================\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (!show) onHideOptions?.();\n if (show) onShowOptions?.();\n };\n\n const getDisplayValue = (rangeType: RangeType): string => {\n const selected =\n rangeType === \"from\" ? selectedFromValue : selectedToValue;\n if (!selected) return \"\";\n\n if (displayValueExtractor) return displayValueExtractor(selected);\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString?.() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (type: RangeType, value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelButtonRef[type]?.current) {\n widthOfElement =\n labelButtonRef[type].current.getBoundingClientRect().width;\n }\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const getCurrentFocused = (): \"none\" \| \"start\" \| \"end\" => {\n switch (focusedInput) {\n case \"from\":\n return \"start\";\n case \"to\":\n return \"end\";\n case \"none\":\n return focusedInput;\n }\n };\n\n const currentOptions = useMemo(() => {\n if (focusedInput === \"none\") return [];\n return options?.[focusedInput] ?? [];\n }, [focusedInput, options]);\n\n const currentSelectedItems = useMemo(() => {\n if (focusedInput === \"none\") return [];\n const selected =\n focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n return selected ? [selected] : [];\n }, [focusedInput, selectedFromValue, selectedToValue]);\n\n const openDropdownFor = (rangeType: RangeType) => {\n if (disabled \|\| readOnly) return;\n\n const nextFocusedInput =\n rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n setFocusedInput(nextFocusedInput);\n triggerOptionDisplayCallback(true);\n };\n\n const focusButton = (type: RangeType) => {\n labelButtonRef[type].current?.focus();\n };\n\n const getButtonLabelledBy = (rangeType: RangeType) => {\n const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n return concatIds(rangeLabelId, ariaLabelledBy);\n };\n\n const getDropdownAriaLabel = () => {\n if (focusedInput === \"from\") {\n return `Selecting for: ${placeholders?.from}`;\n }\n\n if (focusedInput === \"to\") {\n return `Selecting for: ${placeholders?.to}`;\n }\n\n return undefined;\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleSelectorClick =\n (rangeType: RangeType) => (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n openDropdownFor(rangeType);\n };\n\n const handleSelectorKeyDown =\n (rangeType: RangeType) =>\n (event: React.KeyboardEvent<HTMLButtonElement>) => {\n if (disabled \|\| readOnly) return;\n\n switch (event.key) {\n case \"Enter\":\n case \" \":\n case \"ArrowDown\":\n event.preventDefault();\n openDropdownFor(rangeType);\n break;\n default:\n break;\n }\n };\n\n const handleListItemClick = (item: T, extractedValue: V) => {\n if (focusedInput === \"none\") return;\n\n if (focusedInput === \"from\") {\n setSelectedFromValue(item);\n onSelectOption?.({ from: item }, extractedValue);\n\n setSelectedToValue(undefined);\n setFocusedInput(\"to\");\n triggerOptionDisplayCallback(true);\n focusButton(\"to\");\n return;\n }\n\n setSelectedToValue(item);\n onSelectOption?.({ to: item }, extractedValue);\n\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n focusButton(\"to\");\n };\n\n const handleDismiss = () => {\n const last = focusedInput;\n\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n\n if (last === \"to\") focusButton(\"to\");\n else focusButton(\"from\");\n\n if (!selectedFromValue \|\| !selectedToValue) {\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n }\n };\n\n const handleClose = () => {\n setFocusedInput(\"none\");\n triggerOptionDisplayCallback(false);\n\n if (!selectedFromValue \|\| !selectedToValue) {\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n }\n };\n\n const handleOpen = () => {\n if (disabled \|\| readOnly) return;\n\n if (focusedInput === \"none\") {\n setFocusedInput(\"from\");\n triggerOptionDisplayCallback(true);\n }\n };\n\n const handleClear = (event: React.MouseEvent) => {\n event.stopPropagation();\n event.preventDefault();\n setSelectedFromValue(undefined);\n setSelectedToValue(undefined);\n onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n focusButton(\"from\");\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderLabel = (rangeType: RangeType) => {\n const selected =\n rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n if (!selected) {\n return (\n <PlaceholderLabel truncateType={optionTruncationType}>\n {truncateValue(rangeType, placeholders?.[rangeType] \|\| \"\")}\n </PlaceholderLabel>\n );\n }\n\n if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n }\n\n return (\n <ValueLabel truncateType={optionTruncationType}>\n {truncateValue(rangeType, getDisplayValue(rangeType))}\n </ValueLabel>\n );\n };\n\n const renderSelectorContent = (rangeType: RangeType) => (\n <RangeSelectorButton\n type=\"button\"\n role=\"combobox\"\n aria-labelledby={getButtonLabelledBy(rangeType)}\n aria-describedby={ariaDescribedBy}\n aria-expanded={isOpen && focusedInput === rangeType}\n aria-controls={listboxId}\n aria-disabled={disabled}\n aria-readonly={readOnly}\n onClick={handleSelectorClick(rangeType)}\n onKeyDown={handleSelectorKeyDown(rangeType)}\n ref={labelButtonRef[rangeType]}\n tabIndex={0}\n >\n {renderLabel(rangeType)}\n </RangeSelectorButton>\n );\n\n const renderElement = () => {\n return (\n <StyledInputWrapper\n className={className}\n data-testid={testId}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n focused={isOpen}\n >\n <VisuallyHidden id={fromLabelId}>\n {placeholders?.from \|\| \"Select From\"}\n </VisuallyHidden>\n <VisuallyHidden id={toLabelId}>\n {placeholders?.to \|\| \"Select To\"}\n </VisuallyHidden>\n\n <RangeInputInnerContainer\n currentActive={getCurrentFocused()}\n error={error}\n >\n {renderSelectorContent(\"from\")}\n {renderSelectorContent(\"to\")}\n </RangeInputInnerContainer>\n\n {!isOpen &&\n selectedFromValue &&\n selectedToValue &&\n !readOnly &&\n !disabled && (\n <BasicButton\n onClick={handleClear}\n type=\"button\"\n aria-label=\"Clear\"\n className={ClearIconContainer}\n >\n <CrossIcon\n className={styles.clearIcon}\n aria-hidden\n />\n </BasicButton>\n )}\n </StyledInputWrapper>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n ref={dropdownRef}\n data-testid={`${testId}-dropdown`}\n listboxId={listboxId}\n ariaLabel={getDropdownAriaLabel()}\n listItems={currentOptions}\n onSelectItem={handleListItemClick}\n onDismiss={handleDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n 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":["_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","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","rangeLabelId","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","truncateType","children","PlaceholderLabel","renderSelectorContent","RangeSelectorButton","role","onClick","onKeyDown","ref","tabIndex","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","focused","VisuallyHidden","RangeInputInnerContainer","currentActive","BasicButton","ClearIconContainer","CrossIcon","styles.clearIcon","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"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\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 \"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 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":["_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","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","rangeLabelId","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/cjs/input-range-select/input-range-select.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./input-range-select.styles_adbrbm.css");exports.rangeSelectorButton="ryu6qy6",exports.styledInputWrapper="s7h6auw";
2	+ //# sourceMappingURL=input-range-select.styles.js.map

package/cjs/input-range-select/input-range-select.styles.js.map ADDED Viewed

@@ -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":[],"mappings":"6HAQgC,qCAJD"}

package/cjs/input-range-select/input-range-select.styles_adbrbm.css ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ .s7h6auw{height:3rem;}
2	+ .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/cjs/input-range-slider/input-range-slider.js CHANGED Viewed

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

package/cjs/input-range-slider/input-range-slider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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\";\nimport ReactSlider from \"react-slider\";\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 { Thumb, Track } from \"./slider-components\";\nimport type { InputRangeSliderProps } from \"./types\";\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 }, [value]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChange = (value: number \| readonly number[], index: number) => {\n if (readOnly \|\| disabled) {\n return;\n }\n\n if (typeof value === \"number\") {\n const nextValue = [value];\n setSelection(nextValue);\n onChange?.(nextValue);\n return;\n }\n\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\n const nextValue = [...value];\n setSelection(nextValue);\n onChange?.(nextValue);\n };\n\n const handleChangeEnd = (value: number \| readonly number[]) => {\n if (readOnly \|\| disabled) {\n return;\n }\n\n if (typeof value === \"number\") {\n const val = [value];\n setSelection(val);\n onChangeEnd?.(val);\n return;\n }\n\n const newSelection = [...value];\n setSelection(newSelection);\n onChangeEnd?.(newSelection);\n };\n\n const handleThumbKeyDown = (\n event: React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => {\n if (disabled \|\| readOnly) {\n return;\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 react-slider is presentation-only. */}\n <ReactSlider\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 aria-hidden\n className={styles.slider}\n renderThumb={(thumbProps, state) => {\n return (\n <Thumb\n data-testid={`slider-thumb-${state.index}`}\n {...thumbProps}\n key={thumbProps.key}\n tabIndex={-1}\n aria-hidden\n focused={focusedThumbIndex === state.index}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n }}\n renderTrack={(trackProps, state) => {\n return (\n <Track\n data-testid={`slider-track-${state.index}`}\n {...trackProps}\n key={trackProps.key}\n color={trackColors[state.index]}\n />\n );\n }}\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":["_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","message","key","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","handleNativeRangeChange","nextRawValue","Number","currentTarget","nextSelection","values","minAllowed","getThumbMin","maxAllowed","getThumbMax","Math","clampValueForThumb","label","toLowerCase","replace","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","onKeyDown","ReactSlider","onAfterChange","val","newSelection","minDistance","styles.slider","renderThumb","thumbProps","state","_createElement","Thumb","tabIndex","focused","renderTrack","trackProps","Track","color","styles.labelContainer"],"mappings":"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"}
1	+ {"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\";\nimport ReactSlider from \"react-slider\";\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 { Thumb, Track } from \"./slider-components\";\nimport type { InputRangeSliderProps } from \"./types\";\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 }, [value]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChange = (value: number \| readonly number[], index: number) => {\n if (readOnly \|\| disabled) {\n return;\n }\n\n if (typeof value === \"number\") {\n const nextValue = [value];\n setSelection(nextValue);\n onChange?.(nextValue);\n return;\n }\n\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\n const nextValue = [...value];\n setSelection(nextValue);\n onChange?.(nextValue);\n };\n\n const handleChangeEnd = (value: number \| readonly number[]) => {\n if (readOnly \|\| disabled) {\n return;\n }\n\n if (typeof value === \"number\") {\n const val = [value];\n setSelection(val);\n onChangeEnd?.(val);\n return;\n }\n\n const newSelection = [...value];\n setSelection(newSelection);\n onChangeEnd?.(newSelection);\n };\n\n const handleThumbKeyDown = (\n event: React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => {\n if (disabled \|\| readOnly) {\n return;\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 react-slider is presentation-only. */}\n <ReactSlider\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 aria-hidden\n className={styles.slider}\n renderThumb={(thumbProps, state) => {\n return (\n <Thumb\n data-testid={`slider-thumb-${state.index}`}\n {...thumbProps}\n key={thumbProps.key}\n tabIndex={-1}\n aria-hidden\n focused={focusedThumbIndex === state.index}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n }}\n renderTrack={(trackProps, state) => {\n return (\n <Track\n data-testid={`slider-track-${state.index}`}\n {...trackProps}\n key={trackProps.key}\n color={trackColors[state.index]}\n />\n );\n }}\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":["_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","message","key","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","handleNativeRangeChange","nextRawValue","Number","currentTarget","nextSelection","values","minAllowed","getThumbMin","maxAllowed","getThumbMax","Math","clampValueForThumb","label","toLowerCase","replace","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","onKeyDown","ReactSlider","onAfterChange","val","newSelection","minDistance","styles.slider","renderThumb","thumbProps","state","_createElement","Thumb","tabIndex","focused","renderTrack","trackProps","Track","color","styles.labelContainer"],"mappings":"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"}

package/cjs/input-range-slider/slider-components.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),t=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var a=require("../theme/utils/use-apply-styles.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var l=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./input-range-slider.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=u(s);const o=t.forwardRef(((s,u)=>{var{focused:o,disabled:d,readOnly:c,className:m,style:j}=s,f=e.__rest(s,["focused","disabled","readOnly","className","style"]);const q=t.useRef(null);return a.useApplyStyle(q,j),r.jsx("div",Object.assign({ref:l.mergeRefs(q,u)},f,{className:n.default(i.sliderThumb,m),"data-focused":o?"true":void 0,children:r.jsx("div",{className:n.default(i.knob,d&&i.knobDisabled,!d&&!c&&i.knobInteractive)})}))})),d=t.forwardRef(((s,u)=>{var{color:o,className:d,style:c}=s,m=e.__rest(s,["color","className","style"]);const j=t.useRef(null);return a.useApplyStyle(j,{[i.tokens.track.backgroundColor]:o}),a.useApplyStyle(j,c),r.jsx("div",Object.assign({},m,{className:n.default(i.sliderTrack,d),ref:l.mergeRefs(j,u)}))}));exports.Thumb=o,exports.Track=d;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("clsx"),t=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var a=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var i=require("./input-range-slider.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=l(s);const o=t.forwardRef(((s,l)=>{var{focused:o,disabled:d,readOnly:c,className:m,style:j}=s,f=e.__rest(s,["focused","disabled","readOnly","className","style"]);const q=t.useRef(null);return a.useApplyStyle(q,j),r.jsx("div",Object.assign({ref:u.mergeRefs(q,l)},f,{className:n.default(i.sliderThumb,m),"data-focused":o?"true":void 0,children:r.jsx("div",{className:n.default(i.knob,d&&i.knobDisabled,!d&&!c&&i.knobInteractive)})}))})),d=t.forwardRef(((s,l)=>{var{color:o,className:d,style:c}=s,m=e.__rest(s,["color","className","style"]);const j=t.useRef(null);return a.useApplyStyle(j,{[i.tokens.track.backgroundColor]:o}),a.useApplyStyle(j,c),r.jsx("div",Object.assign({},m,{className:n.default(i.sliderTrack,d),ref:u.mergeRefs(j,l)}))}));exports.Thumb=o,exports.Track=d;
 //# sourceMappingURL=slider-components.js.map

package/cjs/input-range-slider/slider-components.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"slider-components.js","sources":["../../../src/input-range-slider/slider-components.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\n\ninterface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {\n focused: boolean \| undefined;\n disabled: boolean \| undefined;\n readOnly: boolean \| undefined;\n}\n\nconst InnerThumb = (\n {\n focused,\n disabled,\n readOnly,\n className,\n style,\n ...otherProps\n }: ThumbProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const thumbRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(thumbRef, style);\n\n return (\n <div\n ref={mergeRefs(thumbRef, ref)}\n {...otherProps}\n className={clsx(styles.sliderThumb, className)}\n data-focused={focused ? \"true\" : undefined}\n >\n <div\n className={clsx(\n styles.knob,\n disabled && styles.knobDisabled,\n !disabled && !readOnly && styles.knobInteractive\n )}\n />\n </div>\n );\n};\n\nexport const Thumb = forwardRef(InnerThumb);\n\ninterface TrackProps extends React.HTMLAttributes<HTMLDivElement> {\n color?: string;\n}\n\nconst InnerTrack = (\n { color, className, style, ...otherProps }: TrackProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const trackRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(trackRef, {\n [styles.tokens.track.backgroundColor]: color,\n });\n\n useApplyStyle(trackRef, style);\n\n return (\n <div\n {...otherProps}\n className={clsx(styles.sliderTrack, className)}\n ref={mergeRefs(trackRef, ref)}\n />\n );\n};\n\nexport const Track = forwardRef(InnerTrack);\n"],"names":["Thumb","forwardRef","_a","ref","focused","disabled","readOnly","className","style","otherProps","__rest","thumbRef","useRef","useApplyStyle","_jsx","Object","assign","mergeRefs","clsx","styles.sliderThumb","undefined","children","styles.knob","styles.knobDisabled","styles.knobInteractive","Track","color","trackRef","styles.tokens","track","backgroundColor","styles.sliderTrack"],"mappings":"~~2wBAcA~~,MAiCaA,EAAQC,EAAAA,YAjCF,CACfC,EAQAC,KARA,IAAAC,QACIA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,GAAKN,EACFO,EAAUC,EAAAA,OAAAR,EANjB,uDAUA,MAAMS,EAAWC,EAAAA,OAAuB,MAIxC,OAFAC,EAAAA,cAAcF,EAAUH,GAGpBM,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIb,IAAKc,EAAAA,UAAUN,EAAUR,IACrBM,EAAU,CACdF,UAAWW,EAAAA,QAAKC,EAAAA,YAAoBZ,GAAU,eAChCH,EAAU,YAASgB,EAASC,SAE1CP,EAAAA,IAAA,MAAA,CACIP,UAAWW,UACPI,EAAAA,KACAjB,GAAYkB,EAAAA,cACXlB,IAAaC,GAAYkB,uBAGhC,IA+BDC,EAAQxB,EAAAA,YArBF,CACfC,EACAC,SADAuB,MAAEA,EAAKnB,UAAEA,EAASC,MAAEA,KAAUC,EAAUC,EAAAA,OAAAR,EAAxC,CAAA,QAAA,YAAA,UAGA,MAAMyB,EAAWf,EAAAA,OAAuB,MAQxC,OANAC,EAAAA,cAAcc,EAAU,CACpB,CAACC,EAAAA,OAAcC,MAAMC,iBAAkBJ,IAG3Cb,EAAAA,cAAcc,EAAUnB,GAGpBM,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQP,EAAU,CACdF,UAAWW,EAAAA,QAAKa,EAAAA,YAAoBxB,GACpCJ,IAAKc,EAAAA,UAAUU,EAAUxB,KAC3B"}
1	+ {"version":3,"file":"slider-components.js","sources":["../../../src/input-range-slider/slider-components.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\n\ninterface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {\n focused: boolean \| undefined;\n disabled: boolean \| undefined;\n readOnly: boolean \| undefined;\n}\n\nconst InnerThumb = (\n {\n focused,\n disabled,\n readOnly,\n className,\n style,\n ...otherProps\n }: ThumbProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const thumbRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(thumbRef, style);\n\n return (\n <div\n ref={mergeRefs(thumbRef, ref)}\n {...otherProps}\n className={clsx(styles.sliderThumb, className)}\n data-focused={focused ? \"true\" : undefined}\n >\n <div\n className={clsx(\n styles.knob,\n disabled && styles.knobDisabled,\n !disabled && !readOnly && styles.knobInteractive\n )}\n />\n </div>\n );\n};\n\nexport const Thumb = forwardRef(InnerThumb);\n\ninterface TrackProps extends React.HTMLAttributes<HTMLDivElement> {\n color?: string;\n}\n\nconst InnerTrack = (\n { color, className, style, ...otherProps }: TrackProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const trackRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(trackRef, {\n [styles.tokens.track.backgroundColor]: color,\n });\n\n useApplyStyle(trackRef, style);\n\n return (\n <div\n {...otherProps}\n className={clsx(styles.sliderTrack, className)}\n ref={mergeRefs(trackRef, ref)}\n />\n );\n};\n\nexport const Track = forwardRef(InnerTrack);\n"],"names":["Thumb","forwardRef","_a","ref","focused","disabled","readOnly","className","style","otherProps","__rest","thumbRef","useRef","useApplyStyle","_jsx","Object","assign","mergeRefs","clsx","styles.sliderThumb","undefined","children","styles.knob","styles.knobDisabled","styles.knobInteractive","Track","color","trackRef","styles.tokens","track","backgroundColor","styles.sliderTrack"],"mappings":"wzBAcA,MAiCaA,EAAQC,EAAAA,YAjCF,CACfC,EAQAC,KARA,IAAAC,QACIA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,GAAKN,EACFO,EAAUC,EAAAA,OAAAR,EANjB,uDAUA,MAAMS,EAAWC,EAAAA,OAAuB,MAIxC,OAFAC,EAAAA,cAAcF,EAAUH,GAGpBM,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIb,IAAKc,EAAAA,UAAUN,EAAUR,IACrBM,EAAU,CACdF,UAAWW,EAAAA,QAAKC,EAAAA,YAAoBZ,GAAU,eAChCH,EAAU,YAASgB,EAASC,SAE1CP,EAAAA,IAAA,MAAA,CACIP,UAAWW,UACPI,EAAAA,KACAjB,GAAYkB,EAAAA,cACXlB,IAAaC,GAAYkB,uBAGhC,IA+BDC,EAAQxB,EAAAA,YArBF,CACfC,EACAC,SADAuB,MAAEA,EAAKnB,UAAEA,EAASC,MAAEA,KAAUC,EAAUC,EAAAA,OAAAR,EAAxC,CAAA,QAAA,YAAA,UAGA,MAAMyB,EAAWf,EAAAA,OAAuB,MAQxC,OANAC,EAAAA,cAAcc,EAAU,CACpB,CAACC,EAAAA,OAAcC,MAAMC,iBAAkBJ,IAG3Cb,EAAAA,cAAcc,EAAUnB,GAGpBM,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EACQP,EAAU,CACdF,UAAWW,EAAAA,QAAKa,EAAAA,YAAoBxB,GACpCJ,IAAKc,EAAAA,UAAUU,EAAUxB,KAC3B"}

package/cjs/input-select/input-select.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/simple-id-generator.js"),i=require("../util/string-helper.js");require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var s=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js"),a=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../_virtual/_tslib.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var o=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1qveyb9.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var d=require("../shared/dropdown-wrapper/dropdown-wrapper.js");exports.InputSelect=({selectedOption:u,placeholder:c="Select",options:p,disabled:h,error:q,className:m,"data-testid":j,id:x,"aria-labelledby":w,"aria-describedby":b,"aria-invalid":f,enableSearch:v=!1,searchFunction:g,searchPlaceholder:y,valueExtractor:_,valueToStringFunction:S,listExtractor:T,displayValueExtractor:I,onSelectOption:A,onShowOptions:C,onHideOptions:L,onRetry:R,optionsLoadState:k="success",optionTruncationType:E="end",renderCustomSelectedOption:O,renderListItem:D,hideNoResultsDisplay:H,noResultsDescription:P,customLabels:B,renderCustomCallToAction:N,onBlur:G,variant:F="default",readOnly:M,alignment:W,dropdownZIndex:V,dropdownRootNode:Z,dropdownWidth:z})=>{const[J,K]=r.useState(u),[Q,U]=r.useState(!1),[X,Y]=r.useState(!1),$=t.useId(),ee=r.useRef(null),re=r.useRef(null),te=r.useRef(null);r.useEffect((()=>{K(u)}),[u]);const ie=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),K(e),U(!1),de(!1),null==A||A(e,r)},se=()=>{Q&&(U(!1),de(!1))},ne=()=>{X||Q||Y(!0)},ae=e=>{X&&!Q&&ee.current&&!ee.current.contains(e.relatedTarget)&&(Y(!1),null==G||G())},oe=()=>{var e;if(!J)return"";if(I)return I(J);if(_){const r=_(J);return S?S(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return J.toString()},le=e=>{if("middle"===E){let r=0;return te&&te.current&&(r=te.current.getBoundingClientRect().width),i.StringHelper.truncateOneLine(e,r,120,8)}return e},de=e=>{e?null==C||C():null==L||L()};return e.jsx(n.DropdownListState,{children:e.jsx(o.ElementWithDropdown,{enabled:!M&&!h,isOpen:Q,renderElement:()=>e.jsx(l.InputBox,{className:m,"data-testid":j,id:x,ref:ee,tabIndex:-1,onFocus:ne,onBlur:ae,focused:X,disabled:h,readOnly:M,error:q,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:Q,listboxId:$,popupRole:"listbox",readOnly:M,variant:F,"aria-labelledby":w,"aria-describedby":b,"aria-invalid":f,children:e.jsx(d.LabelContainer,{ref:te,disabled:h,children:J?O?O(J):e.jsx(d.ValueLabel,{variant:F,truncateType:E,children:le(oe())}):e.jsx(d.PlaceholderLabel,{variant:F,truncateType:E,children:c})})})}),renderDropdown:()=>e.jsx(s.DropdownList,{listboxId:$,listItems:p,onSelectItem:ie,onDismiss:se,valueExtractor:_,listExtractor:T,enableSearch:v,searchPlaceholder:y,searchFunction:g,selectedItems:J?[J]:[],onRetry:R,itemsLoadState:k,itemTruncationType:E,renderListItem:D,hideNoResultsDisplay:H,noResultsDescription:P,customLabels:B,renderCustomCallToAction:N,variant:F,width:z,matchElementWidth:!0}),onOpen:()=>{U(!0),de(!0),Y(!0)},onClose:e=>{U(!1),de(!1),"click"!==e&&(Y(!1),null==G||G())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),U(!1),de(!1)},clickToToggle:!0,offset:8,alignment:W,fitAvailableHeight:!0,customZIndex:V,rootNode:Z})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var t=require("../util/simple-id-generator.js"),i=require("../util/string-helper.js");require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_mloii0.css");var s=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js"),a=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../_virtual/_tslib.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var o=require("../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");var d=require("../shared/dropdown-wrapper/dropdown-wrapper.js");exports.InputSelect=({selectedOption:u,placeholder:c="Select",options:p,disabled:h,error:m,className:q,"data-testid":j,id:x,"aria-labelledby":w,"aria-describedby":b,"aria-invalid":f,enableSearch:v=!1,searchFunction:g,searchPlaceholder:y,valueExtractor:_,valueToStringFunction:S,listExtractor:T,displayValueExtractor:I,onSelectOption:A,onShowOptions:C,onHideOptions:k,onRetry:L,optionsLoadState:R="success",optionTruncationType:E="end",renderCustomSelectedOption:O,renderListItem:D,hideNoResultsDisplay:H,noResultsDescription:P,customLabels:B,renderCustomCallToAction:N,onBlur:G,variant:F="default",readOnly:M,alignment:W,dropdownZIndex:V,dropdownRootNode:Z,dropdownWidth:z})=>{const[J,K]=r.useState(u),[Q,U]=r.useState(!1),[X,Y]=r.useState(!1),$=t.useId(),ee=r.useRef(null),re=r.useRef(null),te=r.useRef(null);r.useEffect((()=>{K(u)}),[u]);const ie=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),K(e),U(!1),de(!1),null==A||A(e,r)},se=()=>{Q&&(U(!1),de(!1))},ne=()=>{X||Q||Y(!0)},ae=e=>{X&&!Q&&ee.current&&!ee.current.contains(e.relatedTarget)&&(Y(!1),null==G||G())},oe=()=>{var e;if(!J)return"";if(I)return I(J);if(_){const r=_(J);return S?S(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return J.toString()},le=e=>{if("middle"===E){let r=0;return te&&te.current&&(r=te.current.getBoundingClientRect().width),i.StringHelper.truncateOneLine(e,r,120,8)}return e},de=e=>{e?null==C||C():null==k||k()};return e.jsx(n.DropdownListState,{children:e.jsx(o.ElementWithDropdown,{enabled:!M&&!h,isOpen:Q,renderElement:()=>e.jsx(l.InputBox,{className:q,"data-testid":j,id:x,ref:ee,tabIndex:-1,onFocus:ne,onBlur:ae,focused:X,disabled:h,readOnly:M,error:m,children:e.jsx(a.ExpandableElement,{ref:re,disabled:h,expanded:Q,listboxId:$,popupRole:"listbox",readOnly:M,variant:F,"aria-labelledby":w,"aria-describedby":b,"aria-invalid":f,children:e.jsx(d.LabelContainer,{ref:te,disabled:h,children:J?O?O(J):e.jsx(d.ValueLabel,{variant:F,truncateType:E,children:le(oe())}):e.jsx(d.PlaceholderLabel,{variant:F,truncateType:E,children:c})})})}),renderDropdown:()=>e.jsx(s.DropdownList,{listboxId:$,listItems:p,onSelectItem:ie,onDismiss:se,valueExtractor:_,listExtractor:T,enableSearch:v,searchPlaceholder:y,searchFunction:g,selectedItems:J?[J]:[],onRetry:L,itemsLoadState:R,itemTruncationType:E,renderListItem:D,hideNoResultsDisplay:H,noResultsDescription:P,customLabels:B,renderCustomCallToAction:N,variant:F,width:z,matchElementWidth:!0}),onOpen:()=>{U(!0),de(!0),Y(!0)},onClose:e=>{U(!1),de(!1),"click"!==e&&(Y(!1),null==G||G())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),U(!1),de(!1)},clickToToggle:!0,offset:8,alignment:W,fitAvailableHeight:!0,customZIndex:V,rootNode:Z})})};
 //# sourceMappingURL=input-select.js.map

package/cjs/input-select/input-select.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"input-select.js","sources":["../../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n selectedOption,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\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 = \"success\",\n optionTruncationType = \"end\",\n renderCustomSelectedOption,\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [selected, setSelected] = useState<T \| undefined>(selectedOption);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setSelected(item);\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n onSelectOption?.(item, extractedValue);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = (): string => {\n if (!selected) return \"\";\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\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 = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n selectedItems={selected ? [selected] : []}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-select.js","sources":["../../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n selectedOption,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\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 = \"success\",\n optionTruncationType = \"end\",\n renderCustomSelectedOption,\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [selected, setSelected] = useState<T \| undefined>(selectedOption);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setSelected(item);\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n onSelectOption?.(item, extractedValue);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = (): string => {\n if (!selected) return \"\";\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\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 = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n selectedItems={selected ? [selected] : []}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/input-textarea/textarea-counter.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./textarea-counter.styles_adg5h1.css");exports.counterLabel="c1d4l1yp";
+"use strict";require("./textarea-counter.styles_1n3wsnv.css");exports.counterLabel="c1d4l1yp";
 //# sourceMappingURL=textarea-counter.styles.js.map

package/cjs/input-textarea/textarea-counter.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea-counter.styles.js","sources":["../../../src/input-textarea/textarea-counter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\nexport const counterLabel = css`\n text-align: right;\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"~~gHAIyB~~"}
1	+ {"version":3,"file":"textarea-counter.styles.js","sources":["../../../src/input-textarea/textarea-counter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\nexport const counterLabel = css`\n text-align: right;\n ${Font[\"body-sm-semibold\"]}\n color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":[],"mappings":"iHAIyB"}

package/cjs/input-textarea/textarea-counter.styles_1n3wsnv.css ADDED Viewed

	@@ -0,0 +1 @@
1	+ .c1d4l1yp{text-align:right;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-subtler);}

package/cjs/input-textarea/textarea.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./textarea.styles_g0zgyq.css");exports.element="e10c6rk9",exports.elementDisabled="e9uwuyt",exports.elementError="etmlvbn",exports.elementReadOnly="e1kovz0t",exports.wrapper="w1xqauhq";
+"use strict";require("./textarea.styles_22z4n3.css");exports.element="e10c6rk9",exports.elementDisabled="e9uwuyt",exports.elementError="etmlvbn",exports.elementReadOnly="e1kovz0t",exports.wrapper="w1xqauhq";
 //# sourceMappingURL=textarea.styles.js.map

package/cjs/input-textarea/textarea.styles_22z4n3.css ADDED Viewed

@@ -0,0 +1,5 @@
+.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.e10c6rk9{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);outline:none;overflow:auto;display:block;padding:var(--fds-spacing-12) var(--fds-spacing-16);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.e10c6rk9:focus,.e10c6rk9:active{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-webkit-scrollbar{width:14px;}.e10c6rk9::-webkit-scrollbar-track{background:transparent;}.e10c6rk9::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-moz-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::placeholder{color:var(--fds-colour-text-subtler);}
+.e1kovz0t{border-color:transparent;background:transparent!important;padding:var(--fds-spacing-12) 0;}.e1kovz0t:focus,.e1kovz0t:active{outline-color:var(--fds-colour-border-focus);}
+.e9uwuyt{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.e9uwuyt:focus,.e9uwuyt:active{outline-color:var(--fds-colour-border-disabled);}
+.etmlvbn{border-color:var(--fds-colour-border-error);}.etmlvbn:focus,.etmlvbn:active{outline-color:var(--fds-colour-border-error-focus);}

package/cjs/language-switcher/dropdown-panel.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),r=require("@lifesg/react-icons/tick"),t=require("clsx"),s=require("react"),i=require("../shared/dropdown-list/dropdown-list.styles.js"),a=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var d=require("./data.js"),o=require("./dropdown-panel.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t);exports.DropdownPanel=({focusedIndex:t,handleItemSelect:u,handleListKeyDown:m,itemRefs:p,listboxId:j,selectedLanguage:q,testId:h})=>{const{elementWidth:y,styles:f,setFloatingRef:w,getFloatingProps:x}=a.useDropdownRender(),I=s.useRef(null);return l.useApplyStyle(I,{[o.tokens.width]:`${y}px`}),e.jsx("div",Object.assign({ref:n.mergeRefs(w,I),className:o.dropdownPanel,style:f,"data-testid":`${h}--panel`},x(),{children:e.jsx("ul",{className:o.dropdownList,role:"listbox",id:j,"aria-label":d.ARIA_LABEL,onKeyDown:m,children:d.LANGUAGE_CODES.map(((s,a)=>{const l=s===q,n=a===t;return e.jsxs("li",{ref:e=>{p.current[a]=e},role:"option",lang:s,className:c.default(o.dropdownItem,i.listItem,n&&l&&i.listItemActiveSelected,n&&!l&&i.listItemActive,l&&o.dropdownItemSelected),"aria-selected":l,tabIndex:n?0:-1,onClick:()=>u(s),"data-testid":`${h}--item-${s}`,children:[l?e.jsx(r.TickIcon,{className:c.default(i.baseIndicatorStyle,i.selectedIndicator),"aria-hidden":!0}):e.jsx("div",{className:i.baseIndicatorStyle}),d.LANGUAGE_DISPLAY_MAP[s]]},s)}))})}))};
2	+ //# sourceMappingURL=dropdown-panel.js.map

package/cjs/language-switcher/dropdown-panel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-panel.js","sources":["../../../src/language-switcher/dropdown-panel.tsx"],"sourcesContent":["import { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport {\n baseIndicatorStyle,\n listItem,\n listItemActive,\n listItemActiveSelected,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport { useDropdownRender } from \"../shared/dropdown-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport * as styles from \"./dropdown-panel.styles\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\ninterface DropdownPanelProps {\n focusedIndex: number;\n handleItemSelect: (code: LanguageSwitcherCode) => void;\n handleListKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;\n itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;\n listboxId: string;\n selectedLanguage: LanguageSwitcherCode;\n testId: string;\n}\n\nexport const DropdownPanel = ({\n focusedIndex,\n handleItemSelect,\n handleListKeyDown,\n itemRefs,\n listboxId,\n selectedLanguage,\n testId,\n}: DropdownPanelProps) => {\n const {\n elementWidth,\n styles: floatingStyles,\n setFloatingRef,\n getFloatingProps,\n } = useDropdownRender();\n const panelRef = useRef<HTMLDivElement>(null);\n\n useApplyStyle(panelRef, {\n [styles.tokens.width]: `${elementWidth}px`,\n });\n\n return (\n <div\n ref={mergeRefs(setFloatingRef, panelRef)}\n className={styles.dropdownPanel}\n style={floatingStyles}\n data-testid={`${testId}--panel`}\n {...getFloatingProps()}\n >\n <ul\n className={styles.dropdownList}\n role=\"listbox\"\n id={listboxId}\n aria-label={ARIA_LABEL}\n onKeyDown={handleListKeyDown}\n >\n {LANGUAGE_CODES.map((code, index) => {\n const isSelected = code === selectedLanguage;\n const isFocused = index === focusedIndex;\n\n return (\n <li\n key={code}\n ref={(element: HTMLLIElement | null) => {\n itemRefs.current[index] = element;\n }}\n role=\"option\"\n lang={code}\n className={clsx(\n styles.dropdownItem,\n listItem,\n isFocused &&\n isSelected &&\n listItemActiveSelected,\n isFocused && !isSelected && listItemActive,\n isSelected && styles.dropdownItemSelected\n )}\n aria-selected={isSelected}\n tabIndex={isFocused ? 0 : -1}\n onClick={() => handleItemSelect(code)}\n data-testid={`${testId}--item-${code}`}\n >\n {isSelected ? (\n <TickIcon\n className={clsx(\n baseIndicatorStyle,\n styles.selectedIndicator\n )}\n aria-hidden\n />\n ) : (\n <div className={baseIndicatorStyle} />\n )}\n {LANGUAGE_DISPLAY_MAP[code]}\n </li>\n );\n })}\n </ul>\n </div>\n );\n};\n"],"names":["focusedIndex","handleItemSelect","handleListKeyDown","itemRefs","listboxId","selectedLanguage","testId","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","useDropdownRender","panelRef","useRef","useApplyStyle","styles.tokens","width","_jsx","Object","assign","ref","mergeRefs","className","styles.dropdownPanel","style","children","styles.dropdownList","role","id","ARIA_LABEL","onKeyDown","LANGUAGE_CODES","map","code","index","isSelected","isFocused","_jsxs","element","current","lang","clsx","styles.dropdownItem","listItem","listItemActiveSelected","listItemActive","styles.dropdownItemSelected","tabIndex","onClick","TickIcon","baseIndicatorStyle","styles.selectedIndicator","LANGUAGE_DISPLAY_MAP"],"mappings":"k+BA4B6B,EACzBA,eACAC,mBACAC,oBACAC,WACAC,YACAC,mBACAC,aAEA,MAAMC,aACFA,EACAC,OAAQC,EAAcC,eACtBA,EAAcC,iBACdA,GACAC,sBACEC,EAAWC,EAAAA,OAAuB,MAMxC,OAJAC,EAAAA,cAAcF,EAAU,CACpB,CAACG,EAAAA,OAAcC,OAAQ,GAAGV,QAI1BW,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKC,EAAAA,UAAUZ,EAAgBG,GAC/BU,UAAWC,EAAAA,cACXC,MAAOhB,EAAc,cACR,GAAGH,YACZK,IAAkB,CAAAe,SAEtBR,EAAAA,IAAA,KAAA,CACIK,UAAWI,EAAAA,aACXC,KAAK,UACLC,GAAIzB,EAAS,aACD0B,EAAAA,WACZC,UAAW7B,EAAiBwB,SAE3BM,EAAAA,eAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAaF,IAAS7B,EACtBgC,EAAYF,IAAUnC,EAE5B,OACIsC,EAAAA,KAAA,KAAA,CAEIjB,IAAMkB,IACFpC,EAASqC,QAAQL,GAASI,CAAO,EAErCX,KAAK,SACLa,KAAMP,EACNX,UAAWmB,EAAAA,QACPC,eACAC,EAAAA,SACAP,GACID,GACAS,yBACJR,IAAcD,GAAcU,EAAAA,eAC5BV,GAAcW,EAAAA,sCAEHX,EACfY,SAAUX,EAAY,KACtBY,QAAS,IAAMhD,EAAiBiC,iBACnB,GAAG5B,WAAgB4B,IAAMR,SAAA,CAErCU,EACGlB,MAACgC,EAAAA,SAAQ,CACL3B,UAAWmB,EAAAA,QACPS,qBACAC,EAAAA,mBACH,eAAA,IAILlC,EAAAA,IAAA,MAAA,CAAKK,UAAW4B,uBAEnBE,EAAAA,qBAAqBnB,KA/BjBA,EAgCJ,QAIf"}

package/cjs/language-switcher/dropdown-panel.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("./dropdown-panel.styles_1qsjf8d.css");exports.dropdownItem="d4xkcjy",exports.dropdownItemSelected="ddiq5up",exports.dropdownList="dogrnw8",exports.dropdownPanel="dbl9jc4",exports.tokens={width:"--fds-internal-languageSwitcher-dropdown-width"};
2	+ //# sourceMappingURL=dropdown-panel.styles.js.map

package/cjs/language-switcher/dropdown-panel.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"dropdown-panel.styles.js","sources":["../../../src/language-switcher/dropdown-panel.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n width: \"--fds-internal-languageSwitcher-dropdown-width\",\n} as const;\n\nexport const dropdownPanel = css`\n ${tokens.width}: initial;\n\n width: var(${tokens.width});\n border-radius: ${Radius[\"sm\"]};\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n background: ${Colour[\"bg\"]};\n overflow: hidden;\n`;\n\nexport const dropdownList = css`\n list-style: none;\n margin: 0;\n padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport {\n baseIndicatorStyle,\n selectedIndicator,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\n\nexport const dropdownItem = css`\n align-items: center;\n ${Font[\"body-md-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:hover {\n background: ${Colour[\"bg-hover-subtle\"]};\n }\n`;\n\nexport const dropdownItemSelected = css`\n background: transparent;\n color: ${Colour[\"text-selected\"]};\n\n &:hover {\n background: ${Colour[\"bg-hover\"]};\n }\n`;\n"],"names":["width"],"mappings":"kMA6ByB,uCAUQ,+BArBR,gCAVC,yBAJJ,CAClBA,MAAO"}

package/cjs/language-switcher/dropdown-panel.styles_1qsjf8d.css ADDED Viewed

@@ -0,0 +1,4 @@
+.dbl9jc4{--fds-internal-languageSwitcher-dropdown-width:initial;width:var(--fds-internal-languageSwitcher-dropdown-width);border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);overflow:hidden;}
+.dogrnw8{list-style:none;margin:0;padding:var(--fds-spacing-8);}
+.d4xkcjy{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.d4xkcjy:hover{background:var(--fds-colour-bg-hover-subtle);}
+.ddiq5up{background:transparent;color:var(--fds-colour-text-selected);}.ddiq5up:hover{background:var(--fds-colour-bg-hover);}