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

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

@@ -1,20 +1,20 @@
-import ReactSlider from "react-slider";
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-interface TrackStyleProps {
-    $color: string | ((props: V3_ThemeStyleProps) => string) | undefined;
-}
-interface ThumbStyleProps {
-    $disabled: boolean | undefined;
-    $readOnly: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const IndicatorLabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const LabelText: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const Slider: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-slider").ReactSliderProps<number | readonly number[]> & import("react").RefAttributes<ReactSlider<number | readonly number[]>>, never>> & string & Omit<typeof ReactSlider, keyof import("react").Component<any, {}, any>>;
-export declare const Knob: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ThumbStyleProps>> & string;
-export declare const SliderThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SliderTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TrackStyleProps>> & string;
-export {};
+export declare const tokens: {
+    track: {
+        backgroundColor: string;
+        left: string;
+        right: string;
+    };
+    thumb: {
+        left: string;
+    };
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const labelContainer: import("@linaria/core").LinariaClassName;
+export declare const indicatorLabelContainer: import("@linaria/core").LinariaClassName;
+export declare const labelText: import("@linaria/core").LinariaClassName;
+export declare const slider: import("@linaria/core").LinariaClassName;
+export declare const knob: import("@linaria/core").LinariaClassName;
+export declare const knobDisabled: import("@linaria/core").LinariaClassName;
+export declare const knobInteractive: import("@linaria/core").LinariaClassName;
+export declare const sliderThumb: import("@linaria/core").LinariaClassName;
+export declare const sliderTrack: import("@linaria/core").LinariaClassName;

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

@@ -1,66 +1,2 @@
-import o from"react-slider";import r,{css as e}from"styled-components";import{Typography as t}from"../typography/index.js";import{V3_Spacing as i,V3_Colour as s,V3_Shadow as d,V3_Border as a,V3_Radius as l}from"../v3_theme/index.js";const n=r.div`
-    isolation: isolate;
-`,c=r.div`
-    margin-top: ${i["spacing-8"]};
-    display: flex;
-    justify-content: space-between;
-    gap: ${i["spacing-8"]};
-`,m=r.div`
-    margin-bottom: ${i["spacing-8"]};
-`,p=r(t.BodyBL)`
-    overflow-wrap: anywhere;
-`,b=r(o)`
-    height: 0.875rem;
-`,$=r.div`
-    height: 2.5rem;
-    width: 2.5rem;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-
-    ${o=>o.$disabled?e`
-                cursor: not-allowed;
-            `:o.$readOnly?void 0:e`
-                cursor: grab;
-                &:active {
-                    cursor: grabbing;
-                }
-            `}
-
-    &:after {
-        content: "";
-        display: block;
-        height: 0.875rem;
-        width: 0.875rem;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        transform: translate(-50%, -50%);
-
-        background-color: ${s.bg};
-        box-shadow: ${d["sm-subtle"]};
-        border: ${a["width-010"]} ${a.solid}
-            ${o=>o.$disabled?s["border-selected-disabled"]:s["border-strong"]};
-        border-radius: ${l.full};
-    }
-`,f=r.div`
-    height: 0.875rem;
-    width: 0.875rem;
-    position: relative;
-    outline: none;
-
-    &:focus ${$}:after {
-        outline-offset: -1px;
-        outline: ${a["width-040"]} ${a.solid}
-            ${s["border-selected"]};
-    }
-`,g=r.div`
-    height: 0.25rem;
-    top: 50%;
-    transform: translateY(-50%);
-    border-radius: ${l.full};
-
-    background: ${o=>o.$color&&"function"==typeof o.$color?o.$color(o):o.$color||s["border-strong"](o)};
-`;export{m as IndicatorLabelContainer,$ as Knob,c as LabelContainer,p as LabelText,b as Slider,f as SliderThumb,g as SliderTrack,n as Wrapper};
+import"./input-range-slider.styles_1pbel2v.css";const t={track:{backgroundColor:"--fds-internal-inputRangeSlider-track-backgroundColor",left:"--fds-internal-inputRangeSlider-track-left",right:"--fds-internal-inputRangeSlider-track-right"},thumb:{left:"--fds-internal-inputRangeSlider-thumb-left"}},r="ww40rx",e="l12n1bv5",n="i1ewqtcj",i="ldf0qhx",l="s1g5kjqn",a="k19umubw",d="k1wprqev",s="k17p94od",p="s1wkp8d5",u="s3aojwv";export{n as indicatorLabelContainer,a as knob,d as knobDisabled,s as knobInteractive,e as labelContainer,i as labelText,l as slider,p as sliderThumb,u as sliderTrack,t as tokens,r as wrapper};
 //# sourceMappingURL=input-range-slider.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-range-slider.styles.js","sources":["../../src/input-range-slider/input-range-slider.styles.ts"],"sourcesContent":["import ReactSlider from \"react-slider\";\nimport styled, { css } from \"styled-components\";\n\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\nimport type { V3_ThemeStyleProps } from \"../v3_theme/types\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface TrackStyleProps {\n    $color: string | ((props: V3_ThemeStyleProps) => string) | undefined;\n}\n\ninterface ThumbStyleProps {\n    $disabled: boolean | undefined;\n    $readOnly: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    isolation: isolate;\n`;\n\nexport const LabelContainer = styled.div`\n    margin-top: ${V3_Spacing[\"spacing-8\"]};\n    display: flex;\n    justify-content: space-between;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const IndicatorLabelContainer = styled.div`\n    margin-bottom: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const LabelText = styled(Typography.BodyBL)`\n    overflow-wrap: anywhere;\n`;\n\nexport const Slider = styled(ReactSlider)`\n    height: 0.875rem;\n`;\n\nexport const Knob = styled.div<ThumbStyleProps>`\n    height: 2.5rem;\n    width: 2.5rem;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                cursor: not-allowed;\n            `;\n        }\n        if (!props.$readOnly) {\n            return css`\n                cursor: grab;\n                &:active {\n                    cursor: grabbing;\n                }\n            `;\n        }\n    }}\n\n    &:after {\n        content: \"\";\n        display: block;\n        height: 0.875rem;\n        width: 0.875rem;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n\n        background-color: ${V3_Colour[\"bg\"]};\n        box-shadow: ${V3_Shadow[\"sm-subtle\"]};\n        border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n            ${(props) =>\n                props.$disabled\n                    ? V3_Colour[\"border-selected-disabled\"]\n                    : V3_Colour[\"border-strong\"]};\n        border-radius: ${V3_Radius[\"full\"]};\n    }\n`;\n\nexport const SliderThumb = styled.div`\n    height: 0.875rem;\n    width: 0.875rem;\n    position: relative;\n    outline: none;\n\n    &:focus ${Knob}:after {\n        outline-offset: -1px;\n        outline: ${V3_Border[\"width-040\"]} ${V3_Border[\"solid\"]}\n            ${V3_Colour[\"border-selected\"]};\n    }\n`;\n\nexport const SliderTrack = styled.div<TrackStyleProps>`\n    height: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    border-radius: ${V3_Radius[\"full\"]};\n\n    background: ${(props) => {\n        if (props.$color && typeof props.$color === \"function\") {\n            return props.$color(props);\n        } else {\n            return props.$color || V3_Colour[\"border-strong\"](props);\n        }\n    }};\n`;\n"],"names":["Wrapper","styled","div","LabelContainer","V3_Spacing","IndicatorLabelContainer","LabelText","Typography","BodyBL","Slider","ReactSlider","Knob","props","$disabled","css","$readOnly","V3_Colour","V3_Shadow","V3_Border","V3_Radius","SliderThumb","SliderTrack","$color"],"mappings":"yOA4BO,MAAMA,EAAUC,EAAOC,GAAG;;EAIpBC,EAAiBF,EAAOC,GAAG;kBACtBE,EAAW;;;WAGlBA,EAAW;EAGTC,EAA0BJ,EAAOC,GAAG;qBAC5BE,EAAW;EAGnBE,EAAYL,EAAOM,EAAWC,OAAO;;EAIrCC,EAASR,EAAOS,EAAY;;EAI5BC,EAAOV,EAAOC,GAAoB;;;;;;;;MAQxCU,GACKA,EAAMC,UACCC,CAAG;;cAITF,EAAMG,eAAX,EACWD,CAAG;;;;;;;;;;;;;;;;;4BAmBME,EAAc;sBACpBC,EAAU;kBACdC,EAAU,gBAAgBA,EAAiB;cAC9CN,GACCA,EAAMC,UACAG,EAAU,4BACVA,EAAU;yBACPG,EAAgB;;EAI5BC,EAAcnB,EAAOC,GAAG;;;;;;cAMvBS;;mBAEKO,EAAU,gBAAgBA,EAAiB;cAChDF,EAAU;;EAIXK,EAAcpB,EAAOC,GAAoB;;;;qBAIjCiB,EAAgB;;kBAElBP,GACPA,EAAMU,QAAkC,mBAAjBV,EAAMU,OACtBV,EAAMU,OAAOV,GAEbA,EAAMU,QAAUN,EAAU,iBAAiBJ;"}
+{"version":3,"file":"input-range-slider.styles.js","sources":["../../src/input-range-slider/input-range-slider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const tokens = {\n    track: {\n        backgroundColor:\n            \"--fds-internal-inputRangeSlider-track-backgroundColor\",\n        left: \"--fds-internal-inputRangeSlider-track-left\",\n        right: \"--fds-internal-inputRangeSlider-track-right\",\n    },\n    thumb: {\n        left: \"--fds-internal-inputRangeSlider-thumb-left\",\n    },\n};\n\nexport const wrapper = css`\n    isolation: isolate;\n`;\n\nexport const labelContainer = css`\n    margin-top: ${Spacing[\"spacing-8\"]};\n    display: flex;\n    justify-content: space-between;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const indicatorLabelContainer = css`\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const labelText = css`\n    overflow-wrap: anywhere;\n`;\n\nexport const slider = css`\n    height: 0.875rem;\n    position: relative;\n    touch-action: none;\n`;\n\nexport const knob = css`\n    height: 2.5rem;\n    width: 2.5rem;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n\n    &::after {\n        content: \"\";\n        display: block;\n        height: 0.875rem;\n        width: 0.875rem;\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        transform: translate(-50%, -50%);\n\n        background-color: ${Colour[\"bg\"]};\n        box-shadow: ${Shadow[\"sm-subtle\"]};\n        border: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-strong\"]};\n        border-radius: ${Radius[\"full\"]};\n    }\n`;\n\nexport const knobDisabled = css`\n    cursor: not-allowed;\n\n    &::after {\n        border-color: ${Colour[\"border-selected-disabled\"]};\n    }\n`;\n\nexport const knobInteractive = css`\n    cursor: grab;\n\n    &:active {\n        cursor: grabbing;\n    }\n`;\n\nexport const sliderThumb = css`\n    height: 0.875rem;\n    width: 0.875rem;\n    position: absolute;\n    z-index: 1;\n    outline: none;\n\n    ${tokens.thumb.left}: initial;\n    left: var(${tokens.thumb.left}, 0px);\n\n    &:focus .${knob}::after, &[data-focused=\"true\"] .${knob}::after {\n        outline-offset: -1px;\n        outline: ${Border[\"width-040\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-selected\"]};\n    }\n`;\n\nexport const sliderTrack = css`\n    position: absolute;\n    height: 0.25rem;\n    top: 50%;\n    transform: translateY(-50%);\n    border-radius: ${Radius[\"full\"]};\n\n    ${tokens.track.left}: initial;\n    ${tokens.track.right}: initial;\n    left: var(${tokens.track.left}, 0px);\n    right: var(${tokens.track.right}, 0px);\n\n    ${tokens.track.backgroundColor}: initial;\n    background: var(\n        ${tokens.track.backgroundColor},\n        ${Colour[\"border-strong\"]}\n    );\n`;\n"],"names":["tokens","track","backgroundColor","left","right","thumb","wrapper","labelContainer","indicatorLabelContainer","labelText","slider","knob","knobDisabled","knobInteractive","sliderThumb","sliderTrack"],"mappings":"kFAIO,MAAMA,EAAS,CAClBC,MAAO,CACHC,gBACI,wDACJC,KAAM,6CACNC,MAAO,+CAEXC,MAAO,CACHF,KAAM,+CAIDG,EAAO,SAIPC,EAAc,WAOdC,EAAuB,WAIvBC,EAAS,UAITC,EAAM,WAMNC,EAAI,WA0BJC,EAAY,WAQZC,EAAe,WAQfC,EAAW,WAiBXC,EAAW"}

package/input-range-slider/input-range-slider.styles_1pbel2v.css

@@ -0,0 +1,13 @@
+@layer fds{.ww40rx{isolation:isolate;}
+.l12n1bv5{margin-top:var(--fds-spacing-8);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;gap:var(--fds-spacing-8);}
+.i1ewqtcj{margin-bottom:var(--fds-spacing-8);}
+.ldf0qhx{overflow-wrap:anywhere;}
+.s1g5kjqn{height:0.875rem;position:relative;touch-action:none;}
+.k19umubw{height:2.5rem;width:2.5rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);}.k19umubw::after{content:"";display:block;height:0.875rem;width:0.875rem;position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%, -50%);-moz-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-sm-subtle);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-strong);border-radius:var(--fds-radius-full);}
+.k1wprqev{cursor:not-allowed;}.k1wprqev::after{border-color:var(--fds-colour-border-selected-disabled);}
+.k17p94od{cursor:-webkit-grab;cursor:grab;}.k17p94od:active{cursor:-webkit-grabbing;cursor:grabbing;}
+.s1wkp8d5{height:0.875rem;width:0.875rem;position:absolute;z-index:1;outline:none;--fds-internal-inputRangeSlider-thumb-left:initial;left:var(--fds-internal-inputRangeSlider-thumb-left, 0px);}.s1wkp8d5:focus .k19umubw::after,.s1wkp8d5[data-focused="true"] .k19umubw::after{outline-offset:-1px;outline:var(--fds-border-width-040) var(--fds-border-style-solid) var(--fds-colour-border-selected);}
+.s3aojwv{position:absolute;height:0.25rem;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);border-radius:var(--fds-radius-full);--fds-internal-inputRangeSlider-track-left:initial;--fds-internal-inputRangeSlider-track-right:initial;left:var(--fds-internal-inputRangeSlider-track-left, 0px);right:var(--fds-internal-inputRangeSlider-track-right, 0px);--fds-internal-inputRangeSlider-track-backgroundColor:initial;background:var(
+        --fds-internal-inputRangeSlider-track-backgroundColor,
+        var(--fds-colour-border-strong)
+    );}}

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

@@ -0,0 +1,26 @@
+import type React from "react";
+interface ThumbProps extends React.HTMLAttributes<HTMLDivElement> {
+    focused: boolean | undefined;
+    disabled: boolean | undefined;
+    readOnly: boolean | undefined;
+}
+export declare const Thumb: (props: ThumbProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+interface TrackProps extends React.HTMLAttributes<HTMLDivElement> {
+    color?: string;
+}
+export declare const Track: (props: TrackProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+interface SliderProps {
+    selection: number[];
+    min: number;
+    max: number;
+    step: number;
+    minRange: number;
+    disabled?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    trackColors: (string | undefined)[];
+    focusedThumbIndex: number | null;
+    onChange?: ((value: number[]) => void) | undefined;
+    onChangeEnd?: ((value: number[]) => void) | undefined;
+}
+export declare const Slider: ({ selection, min, max, step, minRange, disabled, readOnly, trackColors, focusedThumbIndex, onChange, onChangeEnd, }: SliderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,2 @@
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import n from"clsx";import{forwardRef as o,useRef as i,useState as s}from"react";import{useResizeDetector as l}from"../external/react-resize-detector/build/index.esm.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as a}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as c}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsomorphicLayoutEffect as m}from"../util/use-isomorphic-layout-effect.js";import{knob as u,knobDisabled as d,knobInteractive as p,sliderThumb as f,tokens as v,sliderTrack as h,slider as b}from"./input-range-slider.styles.js";import{getPercent as j,toOffset as g,getValueFromClientX as y,findNearestThumbIndex as k,clampValue as x,PAGE_STEP_MULTIPLIER as w}from"./slider-utils.js";const E=o(((r,o)=>{var{focused:s,disabled:l,readOnly:m,className:v,style:h}=r,b=e(r,["focused","disabled","readOnly","className","style"]);const j=i(null);return a(j,h),t("div",Object.assign({ref:c(j,o)},b,{className:n(f,v),"data-focused":s?"true":void 0,children:t("div",{className:n(u,l&&d,!l&&!m&&p)})}))})),D=o(((r,o)=>{var{color:s,className:l,style:m}=r,u=e(r,["color","className","style"]);const d=i(null);return a(d,{[v.track.backgroundColor]:s}),a(d,m),t("div",Object.assign({},u,{className:n(h,l),ref:c(d,o)}))})),N=({selection:e,min:n,max:o,step:a,minRange:c,disabled:u,readOnly:d,trackColors:p,focusedThumbIndex:f,onChange:h,onChangeEnd:N})=>{const L=i(null),O=i(null),A=!u&&!d,[C,P]=s(0),R=()=>{var e,t,r,n;P((null!==(t=null===(e=L.current)||void 0===e?void 0:e.clientWidth)&&void 0!==t?t:0)-(null!==(n=null===(r=O.current)||void 0===r?void 0:r.getBoundingClientRect().width)&&void 0!==n?n:0))};return m(R,[]),l({targetRef:L,onResize:R}),r("div",{ref:L,className:b,"aria-hidden":"true",onPointerDown:function(t){if(!A)return;if(0!==t.button)return;t.preventDefault();const r=y({clientX:t.clientX,sliderEl:L.current,min:n,max:o,step:a}),i=k(r,e),s=x(r,i,e,n,o,c),l=[...e];l[i]=s,null==h||h(l),null==N||N(l)},children:[Array.from({length:e.length+1},((r,i)=>{const s=0===i?0:j(e[i-1],n,o),l=i===e.length?0:100-j(e[i],n,o);return t(D,{"data-testid":`slider-track-${i}`,color:p[i],style:{[v.track.left]:g(s,C),[v.track.right]:g(l,C)}},`track-${i}`)})),e.map(((r,i)=>t(E,{ref:0===i?O:void 0,"data-testid":`slider-thumb-${i}`,tabIndex:-1,"aria-hidden":"true",focused:f===i,disabled:u,readOnly:d,style:{[v.thumb.left]:g(j(r,n,o),C)},onPointerDown:t=>function(t,r){if(!A)return;if(0!==t.button)return;t.preventDefault(),t.stopPropagation(),t.currentTarget.focus();const i=[...e],s=e=>{const t=y({clientX:e.clientX,sliderEl:L.current,min:n,max:o,step:a}),s=x(t,r,i,n,o,c);if(s===i[r])return;i[r]=s;const l=[...i];null==h||h(l)},l=()=>{document.removeEventListener("pointermove",s),document.removeEventListener("pointerup",l),document.removeEventListener("pointercancel",l);const e=[...i];null==N||N(e)};document.addEventListener("pointermove",s),document.addEventListener("pointerup",l),document.addEventListener("pointercancel",l)}(t,i),onKeyDown:t=>function(t,r){if(!A)return;const i=e[r];let s;switch(t.key){case"ArrowLeft":case"ArrowDown":s=i-a;break;case"ArrowRight":case"ArrowUp":s=i+a;break;case"Home":s=n;break;case"End":s=o;break;case"PageDown":s=i-a*w;break;case"PageUp":s=i+a*w;break;default:return}t.preventDefault();const l=x(s,r,e,n,o,c);if(l===i)return;const m=[...e];m[r]=l,null==h||h(m),null==N||N(m)}(t,i)},`thumb-${i}`)))]})};export{N as Slider,E as Thumb,D as Track};
+//# sourceMappingURL=slider-components.js.map

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

@@ -0,0 +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, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs, useIsomorphicLayoutEffect } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport {\n    clampValue,\n    findNearestThumbIndex,\n    getPercent,\n    getValueFromClientX,\n    PAGE_STEP_MULTIPLIER,\n    toOffset,\n} from \"./slider-utils\";\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\n// =============================================================================\n// SLIDER\n// =============================================================================\n\ninterface SliderProps {\n    selection: number[];\n    min: number;\n    max: number;\n    step: number;\n    minRange: number;\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    trackColors: (string | undefined)[];\n    focusedThumbIndex: number | null;\n    onChange?: ((value: number[]) => void) | undefined;\n    onChangeEnd?: ((value: number[]) => void) | undefined;\n}\n\nexport const Slider = ({\n    selection,\n    min,\n    max,\n    step,\n    minRange,\n    disabled,\n    readOnly,\n    trackColors,\n    focusedThumbIndex,\n    onChange,\n    onChangeEnd,\n}: SliderProps) => {\n    const sliderRef = useRef<HTMLDivElement>(null);\n    const thumbRef = useRef<HTMLDivElement>(null);\n    const isInteractive = !disabled && !readOnly;\n\n    const [innerSliderWidth, setInnerSliderWidth] = useState(0);\n\n    const measure = () => {\n        setInnerSliderWidth(\n            (sliderRef.current?.clientWidth ?? 0) -\n                (thumbRef.current?.getBoundingClientRect().width ?? 0)\n        );\n    };\n\n    // Measure synchronously on mount so the first paint has correct thumb positions\n    useIsomorphicLayoutEffect(measure, []);\n    useResizeDetector({ targetRef: sliderRef, onResize: measure });\n\n    // the nearest thumb to the pointer will get moved to that position\n    function handleTrackPointerDown(event: React.PointerEvent<HTMLDivElement>) {\n        if (!isInteractive) return;\n        if (event.button !== 0) return;\n\n        event.preventDefault();\n        const clickedValue = getValueFromClientX({\n            clientX: event.clientX,\n            sliderEl: sliderRef.current,\n            min,\n            max,\n            step,\n        });\n        const index = findNearestThumbIndex(clickedValue, selection);\n        const clamped = clampValue(\n            clickedValue,\n            index,\n            selection,\n            min,\n            max,\n            minRange\n        );\n\n        const nextValues = [...selection];\n        nextValues[index] = clamped;\n\n        onChange?.(nextValues);\n        onChangeEnd?.(nextValues);\n    }\n\n    function handleThumbPointerDown(\n        event: React.PointerEvent<HTMLDivElement>,\n        thumbIndex: number\n    ) {\n        if (!isInteractive) return;\n        if (event.button !== 0) return;\n\n        event.preventDefault();\n        event.stopPropagation();\n        (event.currentTarget as HTMLElement).focus();\n\n        const dragValues = [...selection];\n\n        const onMove = (e: PointerEvent) => {\n            const rawValue = getValueFromClientX({\n                clientX: e.clientX,\n                sliderEl: sliderRef.current,\n                min,\n                max,\n                step,\n            });\n            const clamped = clampValue(\n                rawValue,\n                thumbIndex,\n                dragValues,\n                min,\n                max,\n                minRange\n            );\n\n            if (clamped === dragValues[thumbIndex]) return;\n\n            dragValues[thumbIndex] = clamped;\n            const nextValues = [...dragValues];\n\n            onChange?.(nextValues);\n        };\n\n        const onEnd = () => {\n            document.removeEventListener(\"pointermove\", onMove);\n            document.removeEventListener(\"pointerup\", onEnd);\n            document.removeEventListener(\"pointercancel\", onEnd);\n\n            const finalValues = [...dragValues];\n            onChangeEnd?.(finalValues);\n        };\n\n        document.addEventListener(\"pointermove\", onMove);\n        document.addEventListener(\"pointerup\", onEnd);\n        document.addEventListener(\"pointercancel\", onEnd);\n    }\n\n    function handleThumbKeyDown(\n        event: React.KeyboardEvent<HTMLDivElement>,\n        thumbIndex: number\n    ) {\n        if (!isInteractive) return;\n\n        const currentValue = selection[thumbIndex];\n        let newValue: number;\n\n        switch (event.key) {\n            case \"ArrowLeft\":\n            case \"ArrowDown\":\n                newValue = currentValue - step;\n                break;\n            case \"ArrowRight\":\n            case \"ArrowUp\":\n                newValue = currentValue + step;\n                break;\n            case \"Home\":\n                newValue = min;\n                break;\n            case \"End\":\n                newValue = max;\n                break;\n            case \"PageDown\":\n                newValue = currentValue - step * PAGE_STEP_MULTIPLIER;\n                break;\n            case \"PageUp\":\n                newValue = currentValue + step * PAGE_STEP_MULTIPLIER;\n                break;\n            default:\n                return;\n        }\n\n        event.preventDefault();\n        const clamped = clampValue(\n            newValue,\n            thumbIndex,\n            selection,\n            min,\n            max,\n            minRange\n        );\n        if (clamped === currentValue) return;\n\n        const nextValues = [...selection];\n        nextValues[thumbIndex] = clamped;\n\n        onChange?.(nextValues);\n        onChangeEnd?.(nextValues);\n    }\n\n    return (\n        <div\n            ref={sliderRef}\n            className={styles.slider}\n            aria-hidden=\"true\"\n            onPointerDown={handleTrackPointerDown}\n        >\n            {Array.from({ length: selection.length + 1 }, (_, i) => {\n                const leftPercent =\n                    i === 0 ? 0 : getPercent(selection[i - 1], min, max);\n                const rightPercent =\n                    i === selection.length\n                        ? 0\n                        : 100 - getPercent(selection[i], min, max);\n                return (\n                    <Track\n                        key={`track-${i}`}\n                        data-testid={`slider-track-${i}`}\n                        color={trackColors[i]}\n                        style={{\n                            [styles.tokens.track.left]: toOffset(\n                                leftPercent,\n                                innerSliderWidth\n                            ),\n                            [styles.tokens.track.right]: toOffset(\n                                rightPercent,\n                                innerSliderWidth\n                            ),\n                        }}\n                    />\n                );\n            })}\n            {selection.map((thumbValue, index) => (\n                <Thumb\n                    key={`thumb-${index}`}\n                    ref={index === 0 ? thumbRef : undefined}\n                    data-testid={`slider-thumb-${index}`}\n                    tabIndex={-1}\n                    aria-hidden=\"true\"\n                    focused={focusedThumbIndex === index}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    style={{\n                        [styles.tokens.thumb.left]: toOffset(\n                            getPercent(thumbValue, min, max),\n                            innerSliderWidth\n                        ),\n                    }}\n                    onPointerDown={(e) => handleThumbPointerDown(e, index)}\n                    onKeyDown={(e) => handleThumbKeyDown(e, index)}\n                />\n            ))}\n        </div>\n    );\n};\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","Slider","selection","min","max","step","minRange","trackColors","focusedThumbIndex","onChange","onChangeEnd","sliderRef","isInteractive","innerSliderWidth","setInnerSliderWidth","useState","measure","_b","current","clientWidth","_d","_c","getBoundingClientRect","width","useIsomorphicLayoutEffect","useResizeDetector","targetRef","onResize","_jsxs","styles.slider","onPointerDown","event","button","preventDefault","clickedValue","getValueFromClientX","clientX","sliderEl","index","findNearestThumbIndex","clamped","clampValue","nextValues","Array","from","length","_","i","leftPercent","getPercent","rightPercent","left","toOffset","right","map","thumbValue","tabIndex","thumb","e","thumbIndex","stopPropagation","currentTarget","focus","dragValues","onMove","rawValue","onEnd","document","removeEventListener","finalValues","addEventListener","handleThumbPointerDown","onKeyDown","currentValue","newValue","key","PAGE_STEP_MULTIPLIER","handleThumbKeyDown"],"mappings":"osCAuBA,MAiCaA,EAAQC,GAjCF,CACfC,EAQAC,KARA,IAAAC,QACIA,EAAOC,SACPA,EAAQC,SACRA,EAAQC,UACRA,EAASC,MACTA,GAAKN,EACFO,EAAUC,EAAAR,EANjB,uDAUA,MAAMS,EAAWC,EAAuB,MAIxC,OAFAC,EAAcF,EAAUH,GAGpBM,EAAA,MAAAC,OAAAC,OAAA,CACIb,IAAKc,EAAUN,EAAUR,IACrBM,EAAU,CACdF,UAAWW,EAAKC,EAAoBZ,GAAU,eAChCH,EAAU,YAASgB,EAASC,SAE1CP,EAAA,MAAA,CACIP,UAAWW,EACPI,EACAjB,GAAYkB,GACXlB,IAAaC,GAAYkB,OAGhC,IA+BDC,EAAQxB,GArBF,CACfC,EACAC,SADAuB,MAAEA,EAAKnB,UAAEA,EAASC,MAAEA,KAAUC,EAAUC,EAAAR,EAAxC,CAAA,QAAA,YAAA,UAGA,MAAMyB,EAAWf,EAAuB,MAQxC,OANAC,EAAcc,EAAU,CACpB,CAACC,EAAcC,MAAMC,iBAAkBJ,IAG3Cb,EAAcc,EAAUnB,GAGpBM,EAAA,MAAAC,OAAAC,OAAA,CAAA,EACQP,EAAU,CACdF,UAAWW,EAAKa,EAAoBxB,GACpCJ,IAAKc,EAAUU,EAAUxB,KAC3B,IAwBG6B,EAAS,EAClBC,YACAC,MACAC,MACAC,OACAC,WACAhC,WACAC,WACAgC,cACAC,oBACAC,WACAC,kBAEA,MAAMC,EAAY9B,EAAuB,MACnCD,EAAWC,EAAuB,MAClC+B,GAAiBtC,IAAaC,GAE7BsC,EAAkBC,GAAuBC,EAAS,GAEnDC,EAAU,iBACZF,GACmC,QAA9BG,EAAiB,QAAjB9C,EAAAwC,EAAUO,eAAO,IAAA/C,OAAA,EAAAA,EAAEgD,mBAAW,IAAAF,EAAAA,EAAI,IACiB,QAA/CG,EAAgB,QAAhBC,EAAAzC,EAASsC,eAAO,IAAAG,OAAA,EAAAA,EAAEC,wBAAwBC,aAAK,IAAAH,EAAAA,EAAI,GAC3D,EA6IL,OAzIAI,EAA0BR,EAAS,IACnCS,EAAkB,CAAEC,UAAWf,EAAWgB,SAAUX,IAyIhDY,EAAA,MAAA,CACIxD,IAAKuC,EACLnC,UAAWqD,EAAa,cACZ,OACZC,cA1IR,SAAgCC,GAC5B,IAAKnB,EAAe,OACpB,GAAqB,IAAjBmB,EAAMC,OAAc,OAExBD,EAAME,iBACN,MAAMC,EAAeC,EAAoB,CACrCC,QAASL,EAAMK,QACfC,SAAU1B,EAAUO,QACpBf,MACAC,MACAC,SAEEiC,EAAQC,EAAsBL,EAAchC,GAC5CsC,EAAUC,EACZP,EACAI,EACApC,EACAC,EACAC,EACAE,GAGEoC,EAAa,IAAIxC,GACvBwC,EAAWJ,GAASE,EAEpB/B,SAAAA,EAAWiC,GACXhC,SAAAA,EAAcgC,EAClB,EA+G6CpD,SAAA,CAEpCqD,MAAMC,KAAK,CAAEC,OAAQ3C,EAAU2C,OAAS,IAAK,CAACC,EAAGC,KAC9C,MAAMC,EACI,IAAND,EAAU,EAAIE,EAAW/C,EAAU6C,EAAI,GAAI5C,EAAKC,GAC9C8C,EACFH,IAAM7C,EAAU2C,OACV,EACA,IAAMI,EAAW/C,EAAU6C,GAAI5C,EAAKC,GAC9C,OACIrB,EAACW,EAAK,CAAA,cAEW,gBAAgBqD,IAC7BpD,MAAOY,EAAYwC,GACnBtE,MAAO,CACH,CAACoB,EAAcC,MAAMqD,MAAOC,EACxBJ,EACAnC,GAEJ,CAAChB,EAAcC,MAAMuD,OAAQD,EACzBF,EACArC,KAVH,SAASkC,IAahB,IAGT7C,EAAUoD,KAAI,CAACC,EAAYjB,IACxBvD,EAACd,EAAK,CAEFG,IAAe,IAAVkE,EAAc1D,OAAWS,EAAS,cAC1B,gBAAgBiD,IAC7BkB,UAAU,EAAE,cACA,OACZnF,QAASmC,IAAsB8B,EAC/BhE,SAAUA,EACVC,SAAUA,EACVE,MAAO,CACH,CAACoB,EAAc4D,MAAMN,MAAOC,EACxBH,EAAWM,EAAYpD,EAAKC,GAC5BS,IAGRiB,cAAgB4B,GAxJhC,SACI3B,EACA4B,GAEA,IAAK/C,EAAe,OACpB,GAAqB,IAAjBmB,EAAMC,OAAc,OAExBD,EAAME,iBACNF,EAAM6B,kBACL7B,EAAM8B,cAA8BC,QAErC,MAAMC,EAAa,IAAI7D,GAEjB8D,EAAUN,IACZ,MAAMO,EAAW9B,EAAoB,CACjCC,QAASsB,EAAEtB,QACXC,SAAU1B,EAAUO,QACpBf,MACAC,MACAC,SAEEmC,EAAUC,EACZwB,EACAN,EACAI,EACA5D,EACAC,EACAE,GAGJ,GAAIkC,IAAYuB,EAAWJ,GAAa,OAExCI,EAAWJ,GAAcnB,EACzB,MAAME,EAAa,IAAIqB,GAEvBtD,SAAAA,EAAWiC,EAAW,EAGpBwB,EAAQ,KACVC,SAASC,oBAAoB,cAAeJ,GAC5CG,SAASC,oBAAoB,YAAaF,GAC1CC,SAASC,oBAAoB,gBAAiBF,GAE9C,MAAMG,EAAc,IAAIN,GACxBrD,SAAAA,EAAc2D,EAAY,EAG9BF,SAASG,iBAAiB,cAAeN,GACzCG,SAASG,iBAAiB,YAAaJ,GACvCC,SAASG,iBAAiB,gBAAiBJ,EAC/C,CAsGsCK,CAAuBb,EAAGpB,GAChDkC,UAAYd,GArG5B,SACI3B,EACA4B,GAEA,IAAK/C,EAAe,OAEpB,MAAM6D,EAAevE,EAAUyD,GAC/B,IAAIe,EAEJ,OAAQ3C,EAAM4C,KACV,IAAK,YACL,IAAK,YACDD,EAAWD,EAAepE,EAC1B,MACJ,IAAK,aACL,IAAK,UACDqE,EAAWD,EAAepE,EAC1B,MACJ,IAAK,OACDqE,EAAWvE,EACX,MACJ,IAAK,MACDuE,EAAWtE,EACX,MACJ,IAAK,WACDsE,EAAWD,EAAepE,EAAOuE,EACjC,MACJ,IAAK,SACDF,EAAWD,EAAepE,EAAOuE,EACjC,MACJ,QACI,OAGR7C,EAAME,iBACN,MAAMO,EAAUC,EACZiC,EACAf,EACAzD,EACAC,EACAC,EACAE,GAEJ,GAAIkC,IAAYiC,EAAc,OAE9B,MAAM/B,EAAa,IAAIxC,GACvBwC,EAAWiB,GAAcnB,EAEzB/B,SAAAA,EAAWiC,GACXhC,SAAAA,EAAcgC,EAClB,CAmDkCmC,CAAmBnB,EAAGpB,IAfnC,SAASA,SAkBpB"}

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

@@ -0,0 +1,14 @@
+export declare const PAGE_STEP_MULTIPLIER = 10;
+export declare function getPercent(val: number, min: number, max: number): number;
+export declare function toOffset(percent: number, maxThumbOffset: number): string;
+type GetValueFromClientXParams = {
+    clientX: number;
+    sliderEl: HTMLDivElement | null;
+    min: number;
+    max: number;
+    step: number;
+};
+export declare function getValueFromClientX({ clientX, sliderEl, min, max, step, }: GetValueFromClientXParams): number;
+export declare function clampValue(nextValue: number, index: number, values: number[], min: number, max: number, minRange: number): number;
+export declare function findNearestThumbIndex(val: number, selection: number[]): number;
+export {};

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

@@ -0,0 +1,2 @@
+const t=10;function n(t,n,e){return e===n?0:(t-n)/(e-n)*100}function e(t,n){return 0===t?"0px":t/100*n+"px"}function r({clientX:t,sliderEl:n,min:e,max:r,step:i}){if(!n)return e;const a=n.getBoundingClientRect();if(0===a.width)return e;if(i<=0)return Math.max(e,Math.min(r,e));const h=e+Math.max(0,Math.min(1,(t-a.left)/a.width))*(r-e),u=Math.round((h-e)/i)*i+e;return Math.max(e,Math.min(r,u))}function i(t,n,e,r,i,a){let h=r,u=i;return n>0&&(h=e[n-1]+a),n<e.length-1&&(u=e[n+1]-a),h>u&&(u=h),Math.max(h,Math.min(u,t))}function a(t,n){if(0===n.length)return 0;let e=0,r=Math.abs(n[0]-t);for(let i=1;i<n.length;i++){const a=Math.abs(n[i]-t);a<r&&(r=a,e=i)}return e}export{t as PAGE_STEP_MULTIPLIER,i as clampValue,a as findNearestThumbIndex,n as getPercent,r as getValueFromClientX,e as toOffset};
+//# sourceMappingURL=slider-utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"slider-utils.js","sources":["../../src/input-range-slider/slider-utils.ts"],"sourcesContent":["export const PAGE_STEP_MULTIPLIER = 10;\n\nexport function getPercent(val: number, min: number, max: number) {\n    if (max === min) return 0;\n    return ((val - min) / (max - min)) * 100;\n}\n\nexport function toOffset(percent: number, maxThumbOffset: number) {\n    if (percent === 0) return \"0px\";\n    return `${(percent / 100) * maxThumbOffset}px`;\n}\n\ntype GetValueFromClientXParams = {\n    clientX: number;\n    sliderEl: HTMLDivElement | null;\n    min: number;\n    max: number;\n    step: number;\n};\n\nexport function getValueFromClientX({\n    clientX,\n    sliderEl,\n    min,\n    max,\n    step,\n}: GetValueFromClientXParams) {\n    if (!sliderEl) return min;\n\n    const rect = sliderEl.getBoundingClientRect();\n    if (rect.width === 0) return min;\n    if (step <= 0) return Math.max(min, Math.min(max, min));\n\n    const fraction = Math.max(\n        0,\n        Math.min(1, (clientX - rect.left) / rect.width)\n    );\n    const rawValue = min + fraction * (max - min);\n    const snapped = Math.round((rawValue - min) / step) * step + min;\n    return Math.max(min, Math.min(max, snapped));\n}\n\nexport function clampValue(\n    nextValue: number,\n    index: number,\n    values: number[],\n    min: number,\n    max: number,\n    minRange: number\n) {\n    let low = min;\n    let high = max;\n    if (index > 0) low = values[index - 1] + minRange;\n    if (index < values.length - 1) high = values[index + 1] - minRange;\n    if (low > high) high = low;\n    return Math.max(low, Math.min(high, nextValue));\n}\n\nexport function findNearestThumbIndex(val: number, selection: number[]) {\n    if (selection.length === 0) return 0;\n\n    let nearestIndex = 0;\n    let nearestDist = Math.abs(selection[0] - val);\n    for (let i = 1; i < selection.length; i++) {\n        const dist = Math.abs(selection[i] - val);\n        if (dist < nearestDist) {\n            nearestDist = dist;\n            nearestIndex = i;\n        }\n    }\n    return nearestIndex;\n}\n"],"names":["PAGE_STEP_MULTIPLIER","getPercent","val","min","max","toOffset","percent","maxThumbOffset","getValueFromClientX","clientX","sliderEl","step","rect","getBoundingClientRect","width","Math","rawValue","left","snapped","round","clampValue","nextValue","index","values","minRange","low","high","length","findNearestThumbIndex","selection","nearestIndex","nearestDist","abs","i","dist"],"mappings":"AAAO,MAAMA,EAAuB,YAEpBC,EAAWC,EAAaC,EAAaC,GACjD,OAAIA,IAAQD,EAAY,GACfD,EAAMC,IAAQC,EAAMD,GAAQ,GACzC,CAEM,SAAUE,EAASC,EAAiBC,GACtC,OAAgB,IAAZD,EAAsB,MACfA,EAAU,IAAOC,EAArB,IACX,CAUM,SAAUC,GAAoBC,QAChCA,EAAOC,SACPA,EAAQP,IACRA,EAAGC,IACHA,EAAGO,KACHA,IAEA,IAAKD,EAAU,OAAOP,EAEtB,MAAMS,EAAOF,EAASG,wBACtB,GAAmB,IAAfD,EAAKE,MAAa,OAAOX,EAC7B,GAAIQ,GAAQ,EAAG,OAAOI,KAAKX,IAAID,EAAKY,KAAKZ,IAAIC,EAAKD,IAElD,MAIMa,EAAWb,EAJAY,KAAKX,IAClB,EACAW,KAAKZ,IAAI,GAAIM,EAAUG,EAAKK,MAAQL,EAAKE,SAEVV,EAAMD,GACnCe,EAAUH,KAAKI,OAAOH,EAAWb,GAAOQ,GAAQA,EAAOR,EAC7D,OAAOY,KAAKX,IAAID,EAAKY,KAAKZ,IAAIC,EAAKc,GACvC,CAEM,SAAUE,EACZC,EACAC,EACAC,EACApB,EACAC,EACAoB,GAEA,IAAIC,EAAMtB,EACNuB,EAAOtB,EAIX,OAHIkB,EAAQ,IAAGG,EAAMF,EAAOD,EAAQ,GAAKE,GACrCF,EAAQC,EAAOI,OAAS,IAAGD,EAAOH,EAAOD,EAAQ,GAAKE,GACtDC,EAAMC,IAAMA,EAAOD,GAChBV,KAAKX,IAAIqB,EAAKV,KAAKZ,IAAIuB,EAAML,GACxC,CAEM,SAAUO,EAAsB1B,EAAa2B,GAC/C,GAAyB,IAArBA,EAAUF,OAAc,OAAO,EAEnC,IAAIG,EAAe,EACfC,EAAchB,KAAKiB,IAAIH,EAAU,GAAK3B,GAC1C,IAAK,IAAI+B,EAAI,EAAGA,EAAIJ,EAAUF,OAAQM,IAAK,CACvC,MAAMC,EAAOnB,KAAKiB,IAAIH,EAAUI,GAAK/B,GACjCgC,EAAOH,IACPA,EAAcG,EACdJ,EAAeG,EAEvB,CACA,OAAOH,CACX"}

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

@@ -1,35 +1,121 @@
-import type { V3_ThemeStyleProps } from "../v3_theme/types";
-type CustomColor = string | ((props: V3_ThemeStyleProps) => string);
+/**
+ * Shared configuration for `InputRangeSlider` covering track bounds,
+ * step interval, track colors, and label display.
+ */
 export interface BaseSliderProps {
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * The lower bound of the slider range.
+     *
+     * @default 0
+     */
     min?: number | undefined;
+    /**
+     * The upper bound of the slider range.
+     *
+     * @default 100
+     */
     max?: number | undefined;
-    /** The interval between the prev and next value */
+    /**
+     * The interval between selectable values.
+     *
+     * @default 1
+     */
     step?: number | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
-    /** Customise the color of each track segment. Expected length is (number of values + 1) */
-    colors?: (CustomColor | undefined)[] | undefined;
+    /**
+     * Colours applied to each track segment in order. The array length should
+     * equal to `numOfThumbs + 1`.
+     */
+    colors?: (string | undefined)[] | undefined;
+    /**
+     * Renders label text at the minimum and maximum ends of the track.
+     */
     showSliderLabels?: boolean | undefined;
+    /**
+     * Text prepended to each slider label value. Ignored when
+     * `renderSliderLabel` is provided.
+     */
     sliderLabelPrefix?: string | undefined;
+    /**
+     * Text appended to each slider label value. Ignored when
+     * `renderSliderLabel` is provided.
+     */
     sliderLabelSuffix?: string | undefined;
+    /**
+     * Renders a label above the slider showing the current selection.
+     */
     showIndicatorLabel?: boolean | undefined;
+    /**
+     * Text prepended to the indicator label value.
+     */
     indicatorLabelPrefix?: string | undefined;
+    /**
+     * Text appended to the indicator label value.
+     */
     indicatorLabelSuffix?: string | undefined;
+    /**
+     * Custom renderer for the slider labels shown at the min and max track
+     * ends. Takes precedence over `sliderLabelPrefix` and `sliderLabelSuffix`.
+     */
     renderSliderLabel?: ((value: number) => React.ReactNode) | undefined;
 }
+/**
+ * Props for the `InputRangeSlider` component.
+ */
 export interface InputRangeSliderProps extends BaseSliderProps {
+    /**
+     * Controlled values for each thumb, indexed by position. Must have the
+     * same length as `numOfThumbs`; when the lengths differ or `value` is
+     * omitted, each thumb defaults to `min + step * index`.
+     */
     value?: number[] | undefined;
-    /** The number of thumb controls */
+    /**
+     * The number of thumb controls rendered on the track.
+     *
+     * @default 2
+     */
     numOfThumbs?: number | undefined;
-    /** The minimum difference between values */
+    /**
+     * The minimum allowed difference between adjacent thumb values.
+     *
+     * @default 0
+     */
     minRange?: number | undefined;
+    /**
+     * Accessible labels for each thumb.
+     */
     ariaLabels?: string[] | undefined;
-    /** Called on every selection change */
+    /**
+     * Accessible description text for each thumb.
+     */
+    ariaDescriptions?: string[] | undefined;
+    /**
+     * Marks each thumb's native range input as invalid for assistive
+     * technologies.
+     */
+    "aria-invalid"?: boolean | undefined;
+    /**
+     * ID(s) of an element(s) that labels the slider group.
+     */
+    "aria-labelledby"?: string | undefined;
+    /**
+     * ID(s) of an element(s) that provides additional information of the slider group.
+     */
+    "aria-describedby"?: string | undefined;
+    /**
+     * Called on every selection change.
+     *
+     * @param value The updated array of thumb values, in thumb order.
+     */
     onChange?: ((value: number[]) => void) | undefined;
-    /** Called when a thumb is released after selection is complete */
+    /**
+     * Called when a thumb is released after selection is complete.
+     *
+     * @param value The final array of thumb values, in thumb order.
+     */
     onChangeEnd?: ((value: number[]) => void) | undefined;
 }
-export {};

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

@@ -1,2 +1,8 @@
 import type { InputSelectProps } from "./types";
-export declare const InputSelect: <T, V>({ selectedOption, placeholder, options, disabled, error, className, "data-testid": testId, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": 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, }: InputSelectProps<T, V>) => JSX.Element;
+/**
+ * A single-selection dropdown input.
+ *
+ * Use `InputSelect` when the user must pick exactly one item from a list.
+ * @keywords combobox, dropdown, field, form, input, picker
+ */
+export declare const InputSelect: <T, V>({ selectedOption, placeholder, options, disabled, error, className, "data-testid": testId, id, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, enableSearch, searchFunction, searchPlaceholder, valueExtractor, valueToStringFunction, listExtractor, isOptionDisabled, displayValueExtractor, onSelectOption, onShowOptions, onHideOptions, onRetry, optionsLoadState, optionTruncationType, renderCustomSelectedOption, renderListItem, hideNoResultsDisplay, noResultsDescription, customLabels, renderCustomCallToAction, onBlur, variant, readOnly, alignment, dropdownZIndex, dropdownRootNode, dropdownWidth, }: InputSelectProps<T, V>) => JSX.Element;

package/input-select/input-select.js

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

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

@@ -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-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } 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] = useState<string>(() => SimpleIdGenerator.generate());\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                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        } else {\n            return (\n                <ValueLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\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":["InputSelect","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","SimpleIdGenerator","generate","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","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$truncateType","$variant","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"whDAoBaA,EAAc,EACvBC,iBACAC,cAAc,SACdC,UACAC,WACAC,QACAC,YACA,cAAeC,EACfC,KACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChBC,gBAAe,EACfC,iBACAC,oBACAC,iBACAC,wBACAC,gBACAC,wBACAC,iBACAC,gBACAC,gBACAC,UACAC,mBAAmB,UACnBC,uBAAuB,MACvBC,6BACAC,iBACAC,uBACAC,uBACAC,eACAC,2BACAC,SACAC,UAAU,UACVC,WACAC,YACAC,iBACAC,mBACAC,oBAKA,MAAOC,EAAUC,GAAeC,EAAwBvC,IACjDwC,EAAaC,IAAkBF,GAAkB,IACjDG,GAASC,IAAcJ,GAAkB,IACzCK,IAAcL,GAAiB,IAAMM,EAAkBC,aAExDC,GAAUC,EAAuB,MACjCC,GAAcD,EAA0B,MACxCE,GAAoBF,EAAuB,MAKjDG,GAAU,KACNb,EAAYtC,EAAe,GAC5B,CAACA,IAKJ,MAAMoD,GAAsB,CAACC,EAASC,WACf,QAAnBC,EAAAN,GAAYO,eAAO,IAAAD,GAAAA,EAAEE,QACrBnB,EAAYe,GACZZ,IAAe,GACfiB,IAA6B,GAE7BxC,SAAAA,EAAiBmC,EAAMC,EAAe,EAGpCK,GAAoB,KAClBnB,IACAC,IAAe,GACfiB,IAA6B,GACjC,EAGEE,GAAkB,KACflB,IAAYF,GACbG,IAAW,EACf,EAGEkB,GAAkBC,IAEhBpB,KACCF,GACDO,GAAQS,UACPT,GAAQS,QAAQO,SAASD,EAAEE,iBAE5BrB,IAAW,GACXb,SAAAA,IACJ,EA6BEmC,GAAkB,WACpB,IAAK5B,EAAU,MAAO,GAEtB,GAAIpB,EACA,OAAOA,EAAsBoB,GAGjC,GAAIvB,EAAgB,CAChB,MAAMoD,EAAQpD,EAAeuB,GAC7B,OAAOtB,EACDA,EAAsBmD,GACL,QAAjBX,EAAAW,aAAK,EAALA,EAAOC,kBAAU,IAAAZ,EAAAA,EAAI,EAC/B,CAEA,OAAOlB,EAAS8B,UAAU,EAGxBC,GAAiBF,IACnB,GAA6B,WAAzB3C,EAAmC,CACnC,IAAI8C,EAAiB,EAMrB,OALInB,IAAqBA,GAAkBM,UACvCa,EACInB,GAAkBM,QAAQc,wBAAwBC,OAGnDC,EAAaC,gBAAgBP,EAAOG,EAAgB,IAAK,EACpE,CACA,OAAOH,CAAK,EAGVR,GAAgCgB,IAC9BA,EACAvD,SAAAA,IAEAC,SAAAA,GACJ,EAiGJ,OACIuD,EAACC,EAAiB,CAAAC,SACdF,EAACG,EAAmB,CAChBC,SAAU/C,IAAa7B,EACvB6E,OAAQxC,EACRyC,cAlEU,IAEdN,EAACO,EAAQ,CACL7E,UAAWA,EAAS,cACPC,EACbC,GAAIA,EACJ4E,IAAKpC,GACLqC,UAAU,EACVC,QAASzB,GACT9B,OAAQ+B,GAAcyB,SACZ5C,GAAO6C,UACNpF,YACA6B,EAAQwD,OACXpF,EAAKyE,SAEbF,EAACc,EAAiB,CACdN,IAAKlC,GACL9C,SAAUA,EACVuF,SAAUlD,EACVmD,UAAW/C,GACXgD,UAAU,UACV5D,SAAUA,EACVD,QAASA,oBACQvB,EAAc,mBACbC,EAAe,eACnBC,EAAWmE,SA9BrCF,EAACkB,EAAc,CAACV,IAAKjC,aAA8B/C,EAAQ0E,SAxBtDxC,EASMb,EACAA,EAA2Ba,GAG9BsC,EAACmB,EAAU,CAAAC,cACQxE,EAAoByE,SACzBjE,EAAO8C,SAEhBT,GAAcH,QAfnBU,EAACsB,EAAgB,CAAAF,cACExE,EAAoByE,SACzBjE,EAAO8C,SAEhB5E,UA0FLiG,eAlCW,IAEfvB,EAACwB,EAAY,CACTR,UAAW/C,GACXwD,UAAWlG,EACXmG,aAAcjD,GACdkD,UAAW3C,GACX7C,eAAgBA,EAChBE,cAAeA,EACfL,aAAcA,EACdE,kBAAmBA,EACnBD,eAAgBA,EAChB2F,cAAelE,EAAW,CAACA,GAAY,GACvChB,QAASA,EACTmF,eAAgBlF,EAChBmF,mBAAoBlF,EACpBE,eAAgBA,EAChBC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,aAAcA,EACdC,yBAA0BA,EAC1BE,QAASA,EACTwC,MAAOnC,EACPsE,mBAAiB,IAYjBC,OArKO,KACflE,IAAe,GACfiB,IAA6B,GAC7Bf,IAAW,EAAK,EAmKRiE,QAhKSC,IACjBpE,IAAe,GACfiB,IAA6B,GAGd,UAAXmD,IACAlE,IAAW,GACXb,SAAAA,IACJ,EAyJQwE,UAtJU,WACC,QAAnB/C,EAAAN,GAAYO,eAAO,IAAAD,GAAAA,EAAEE,QACrBhB,IAAe,GACfiB,IAA6B,EAAM,EAoJ3BoD,eAAa,EACbC,OAAQ,EACR9E,UAAWA,EACX+E,oBAAkB,EAClBC,aAAc/E,EACdgF,SAAU/E,KAEE"}
+{"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\n// @catalog\n/**\n * A single-selection dropdown input.\n *\n * Use `InputSelect` when the user must pick exactly one item from a list.\n * @keywords combobox, dropdown, field, form, input, picker\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    isOptionDisabled,\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                isOptionDisabled={isOptionDisabled}\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":["InputSelect","selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","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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"}