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

package/cjs/schedule/shared/with-optional-popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport styled from \"styled-components\";\n\nimport type { PopoverV2TriggerProps } from \"../../popover-v2\";\nimport { PopoverTrigger } from \"../../popover-v2\";\nimport type { SchedulePopoverProps } from \"../types\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps | undefined;\n}\n\nconst StyledPopoverTrigger = styled(PopoverTrigger)`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverV2TriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return <StyledPopoverTrigger zIndex={2} {...popoverTriggerProps} />;\n};\n"],"names":["StyledPopoverTrigger","styled","PopoverTrigger","containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","Object","assign","zIndex"],"mappings":"oiCAaA,MAAMA,OAAuBC,QAAOC,EAAAA,eAAe;;;;8BAMhB,EAC/BC,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA6C,CAC/CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OAAOC,EAAAA,IAACf,EAAoBgB,OAAAC,OAAA,CAACC,OAAQ,GAAOZ,GAAuB"}
+{"version":3,"file":"with-optional-popover.js","sources":["../../../../src/schedule/shared/with-optional-popover.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport type { PopoverTriggerProps } from \"../../popover\";\nimport { PopoverTrigger } from \"../../popover\";\nimport type { SchedulePopoverProps } from \"../types\";\nimport * as styles from \"./with-optional-popover.styles\";\n\ninterface ConditionalCellWrapperProps {\n    containerRef: RefObject<HTMLDivElement>;\n    children: JSX.Element;\n    customPopover?: SchedulePopoverProps;\n}\n\nexport const WithOptionalPopover = ({\n    containerRef,\n    children,\n    customPopover,\n}: ConditionalCellWrapperProps) => {\n    if (!customPopover) {\n        return children;\n    }\n\n    const popoverTriggerProps: PopoverTriggerProps = {\n        position: \"bottom-start\",\n        rootNode: containerRef,\n        customOffset: customPopover.offset,\n        children: children,\n        trigger: customPopover.trigger,\n        delay: customPopover.delay,\n        popoverContent: customPopover.content,\n    };\n\n    return (\n        <PopoverTrigger\n            className={styles.popoverTrigger}\n            zIndex={2}\n            {...popoverTriggerProps}\n        />\n    );\n};\n"],"names":["containerRef","children","customPopover","popoverTriggerProps","position","rootNode","customOffset","offset","trigger","delay","popoverContent","content","_jsx","PopoverTrigger","Object","assign","className","styles.popoverTrigger","zIndex"],"mappings":"mjCAamC,EAC/BA,eACAC,WACAC,oBAEA,IAAKA,EACD,OAAOD,EAGX,MAAME,EAA2C,CAC7CC,SAAU,eACVC,SAAUL,EACVM,aAAcJ,EAAcK,OAC5BN,SAAUA,EACVO,QAASN,EAAcM,QACvBC,MAAOP,EAAcO,MACrBC,eAAgBR,EAAcS,SAGlC,OACIC,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CACXC,UAAWC,EAAAA,eACXC,OAAQ,GACJf,GACN"}

package/cjs/schedule/shared/with-optional-popover.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./with-optional-popover.styles_7mv3p2.css");exports.popoverTrigger="p1gm2ee7";
+//# sourceMappingURL=with-optional-popover.styles.js.map

package/cjs/schedule/shared/with-optional-popover.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"with-optional-popover.styles.js","sources":["../../../../src/schedule/shared/with-optional-popover.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const popoverTrigger = css`\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n`;\n"],"names":[],"mappings":"wHAE2B"}

package/cjs/schedule/shared/with-optional-popover.styles_7mv3p2.css

@@ -0,0 +1 @@
+.p1gm2ee7{width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

package/cjs/schedule/time-indicator/time-indicator.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),i=require("../../util/time-helper.js"),r=require("./time-indicator.styles.js");exports.TimeIndicator=({minTime:n,maxTime:m,format:s="24hr",timelineOffset:t=null,isWeekView:l=!1})=>{const u=i.TimeHelper.generateTimings(30,s,n,m).filter((e=>e.includes(":00")));return e.jsxs(r.TimeColumnWrapper,{children:[null!==t&&e.jsx(r.TimelineCircle,{$top:t,$isWeekView:l}),e.jsx(r.TimeColumn,{children:u.map((i=>{const{hour:m,ampm:s}=function(e){const[i]=e.split(":").map(Number);return{hour:i%12==0?12:i%12,ampm:i<12?"am":"pm"}}(i),t=i===n;return e.jsx(r.TimeLabel,{children:!t&&e.jsxs(e.Fragment,{children:[e.jsx(r.HourDisplay,{children:m}),e.jsx("span",{children:s})]})},i)}))})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),i=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 t=require("../../theme/utils/use-apply-styles.js");require("../../theme/utils/use-media-query.js");var s=require("../../typography/index.js"),l=require("../../util/time-helper.js"),n=require("./time-indicator.styles.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=m(r);exports.TimeIndicator=({minTime:r,maxTime:m,format:a="24hr",timelineOffset:o=null,isWeekView:c=!1})=>{const p=l.TimeHelper.generateTimings(30,a,r,m).filter((e=>e.includes(":00"))),d=i.useRef(null);return t.useApplyStyle(d,{[n.tokens.timelineCircle.offset]:null===o?null:`${o}px`}),e.jsxs("div",{className:n.timeColumnWrapper,children:[null!==o&&e.jsx("div",{className:u.default(n.timelineCircle,c&&n.timelineCircleWeekView),ref:d}),e.jsx("div",{className:n.timeColumn,children:p.map((i=>{const{hour:t,ampm:l}=function(e){const[r]=e.split(":").map(Number);return{hour:r%12==0?12:r%12,ampm:r<12?"am":"pm"}}(i),m=i===r;return e.jsx(s.Typography.BodySM,{className:n.timeLabel,children:!m&&e.jsxs(e.Fragment,{children:[e.jsx("span",{className:n.hourDisplay,children:t}),e.jsx("span",{children:l})]})},i)}))})]})};
 //# sourceMappingURL=time-indicator.js.map

package/cjs/schedule/time-indicator/time-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-indicator.js","sources":["../../../../src/schedule/time-indicator/time-indicator.tsx"],"sourcesContent":["import { TimeHelper } from \"../../util/time-helper\";\nimport {\n    HourDisplay,\n    TimeColumn,\n    TimeColumnWrapper,\n    TimeLabel,\n    TimelineCircle,\n} from \"./time-indicator.styles\";\n\ninterface TimeSlotTimeIndicatorProps {\n    minTime: string;\n    maxTime: string;\n    format: \"12hr\" | \"24hr\";\n    timelineOffset?: number | null;\n    isWeekView?: boolean;\n}\nfunction formatHourLabel(time: string) {\n    const [h] = time.split(\":\").map(Number);\n    const ampm = h < 12 ? \"am\" : \"pm\";\n    const hour = h % 12 === 0 ? 12 : h % 12;\n    return { hour, ampm };\n}\n\nexport const TimeIndicator = ({\n    minTime,\n    maxTime,\n    format = \"24hr\",\n    timelineOffset = null,\n    isWeekView = false,\n}: TimeSlotTimeIndicatorProps) => {\n    const timeSlots = TimeHelper.generateTimings(30, format, minTime, maxTime);\n    const hourLabels = timeSlots.filter((t) => t.includes(\":00\"));\n    return (\n        <TimeColumnWrapper>\n            {timelineOffset !== null && (\n                <TimelineCircle\n                    $top={timelineOffset}\n                    $isWeekView={isWeekView}\n                />\n            )}\n            <TimeColumn>\n                {hourLabels.map((time) => {\n                    const { hour, ampm } = formatHourLabel(time);\n                    const isFirstSlot = time === minTime;\n                    return (\n                        <TimeLabel key={time}>\n                            {!isFirstSlot && (\n                                <>\n                                    <HourDisplay>{hour}</HourDisplay>\n                                    <span>{ampm}</span>\n                                </>\n                            )}\n                        </TimeLabel>\n                    );\n                })}\n            </TimeColumn>\n        </TimeColumnWrapper>\n    );\n};\n"],"names":["minTime","maxTime","format","timelineOffset","isWeekView","hourLabels","TimeHelper","generateTimings","filter","t","includes","_jsxs","TimeColumnWrapper","children","_jsx","TimelineCircle","$top","$isWeekView","TimeColumn","map","time","hour","ampm","h","split","Number","formatHourLabel","isFirstSlot","TimeLabel","_Fragment","HourDisplay"],"mappings":"qJAuB6B,EACzBA,UACAC,UACAC,SAAS,OACTC,iBAAiB,KACjBC,cAAa,MAEb,MACMC,EADYC,EAAAA,WAAWC,gBAAgB,GAAIL,EAAQF,EAASC,GACrCO,QAAQC,GAAMA,EAAEC,SAAS,SACtD,OACIC,EAAAA,KAACC,oBAAiB,CAAAC,SAAA,CACM,OAAnBV,GACGW,EAAAA,IAACC,iBAAc,CAAAC,KACLb,EAAcc,YACPb,IAGrBU,MAACI,EAAAA,WAAU,CAAAL,SACNR,EAAWc,KAAKC,IACb,MAAMC,KAAEA,EAAIC,KAAEA,GA1BlC,SAAyBF,GACrB,MAAOG,GAAKH,EAAKI,MAAM,KAAKL,IAAIM,QAGhC,MAAO,CAAEJ,KADIE,EAAI,IAAO,EAAI,GAAKA,EAAI,GACtBD,KAFFC,EAAI,GAAK,KAAO,KAGjC,CAqB2CG,CAAgBN,GACjCO,EAAcP,IAASpB,EAC7B,OACIc,MAACc,EAAAA,UAAS,CAAAf,UACJc,GACEhB,EAAAA,KAAAkB,WAAA,CAAAhB,SAAA,CACIC,EAAAA,IAACgB,EAAAA,YAAW,CAAAjB,SAAEQ,IACdP,EAAAA,IAAA,OAAA,CAAAD,SAAOS,QAJHF,EAOJ,QAIR"}
+{"version":3,"file":"time-indicator.js","sources":["../../../../src/schedule/time-indicator/time-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as styles from \"./time-indicator.styles\";\n\ninterface TimeSlotTimeIndicatorProps {\n    minTime: string;\n    maxTime: string;\n    format: \"12hr\" | \"24hr\";\n    timelineOffset?: number | null;\n    isWeekView?: boolean;\n}\nfunction formatHourLabel(time: string) {\n    const [h] = time.split(\":\").map(Number);\n    const ampm = h < 12 ? \"am\" : \"pm\";\n    const hour = h % 12 === 0 ? 12 : h % 12;\n    return { hour, ampm };\n}\n\nexport const TimeIndicator = ({\n    minTime,\n    maxTime,\n    format = \"24hr\",\n    timelineOffset = null,\n    isWeekView = false,\n}: TimeSlotTimeIndicatorProps) => {\n    const timeSlots = TimeHelper.generateTimings(30, format, minTime, maxTime);\n    const hourLabels = timeSlots.filter((t) => t.includes(\":00\"));\n    const timelineCircleRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(timelineCircleRef, {\n        [styles.tokens.timelineCircle.offset]:\n            timelineOffset === null ? null : `${timelineOffset}px`,\n    });\n\n    return (\n        <div className={styles.timeColumnWrapper}>\n            {timelineOffset !== null && (\n                <div\n                    className={clsx(\n                        styles.timelineCircle,\n                        isWeekView && styles.timelineCircleWeekView\n                    )}\n                    ref={timelineCircleRef}\n                />\n            )}\n            <div className={styles.timeColumn}>\n                {hourLabels.map((time) => {\n                    const { hour, ampm } = formatHourLabel(time);\n                    const isFirstSlot = time === minTime;\n                    return (\n                        <Typography.BodySM\n                            className={styles.timeLabel}\n                            key={time}\n                        >\n                            {!isFirstSlot && (\n                                <>\n                                    <span className={styles.hourDisplay}>\n                                        {hour}\n                                    </span>\n                                    <span>{ampm}</span>\n                                </>\n                            )}\n                        </Typography.BodySM>\n                    );\n                })}\n            </div>\n        </div>\n    );\n};\n"],"names":["minTime","maxTime","format","timelineOffset","isWeekView","hourLabels","TimeHelper","generateTimings","filter","t","includes","timelineCircleRef","useRef","useApplyStyle","styles.tokens","timelineCircle","offset","_jsxs","className","styles.timeColumnWrapper","children","_jsx","clsx","styles.timelineCircle","styles.timelineCircleWeekView","ref","styles.timeColumn","map","time","hour","ampm","h","split","Number","formatHourLabel","isFirstSlot","Typography","BodySM","styles.timeLabel","_Fragment","styles.hourDisplay"],"mappings":"kqBAsB6B,EACzBA,UACAC,UACAC,SAAS,OACTC,iBAAiB,KACjBC,cAAa,MAEb,MACMC,EADYC,EAAAA,WAAWC,gBAAgB,GAAIL,EAAQF,EAASC,GACrCO,QAAQC,GAAMA,EAAEC,SAAS,SAChDC,EAAoBC,EAAAA,OAAuB,MAOjD,OALAC,EAAAA,cAAcF,EAAmB,CAC7B,CAACG,EAAAA,OAAcC,eAAeC,QACP,OAAnBb,EAA0B,KAAO,GAAGA,QAIxCc,EAAAA,YAAKC,UAAWC,EAAAA,kBAAwBC,SAAA,CAChB,OAAnBjB,GACGkB,EAAAA,IAAA,MAAA,CACIH,UAAWI,EAAAA,QACPC,EAAAA,eACAnB,GAAcoB,EAAAA,wBAElBC,IAAKd,IAGbU,EAAAA,IAAA,MAAA,CAAKH,UAAWQ,EAAAA,WAAiBN,SAC5Bf,EAAWsB,KAAKC,IACb,MAAMC,KAAEA,EAAIC,KAAEA,GApClC,SAAyBF,GACrB,MAAOG,GAAKH,EAAKI,MAAM,KAAKL,IAAIM,QAGhC,MAAO,CAAEJ,KADIE,EAAI,IAAO,EAAI,GAAKA,EAAI,GACtBD,KAFFC,EAAI,GAAK,KAAO,KAGjC,CA+B2CG,CAAgBN,GACjCO,EAAcP,IAAS5B,EAC7B,OACIqB,EAAAA,IAACe,EAAAA,WAAWC,QACRnB,UAAWoB,EAAAA,UAAgBlB,UAGzBe,GACElB,EAAAA,KAAAsB,EAAAA,SAAA,CAAAnB,SAAA,CACIC,EAAAA,IAAA,OAAA,CAAMH,UAAWsB,EAAAA,YAAkBpB,SAC9BS,IAELR,EAAAA,IAAA,OAAA,CAAAD,SAAOU,QAPVF,EAUW,QAI9B"}

package/cjs/schedule/time-indicator/time-indicator.styles.js

@@ -1,34 +1,2 @@
-"use strict";var e=require("styled-components"),i=require("../../typography/index.js"),o=require("../../v3_theme/index.js"),t=require("../const.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=r(e);const l=n.default.div`
-    position: sticky;
-    z-index: 3;
-`,p=n.default.div`
-    display: flex;
-    flex-direction: column;
-    min-width: ${t.TIME_INDICATOR_WIDTH}px;
-    background: ${o.V3_Colour.bg};
-    border-right: ${o.V3_Border["width-010"]} ${o.V3_Border.solid}
-        ${o.V3_Colour.border};
-`,d=n.default(i.Typography.BodySM)`
-    min-height: ${2*t.CELL_HEIGHT}px; /* 2 slots */
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    color: ${o.V3_Colour["text-subtler"]};
-    padding-right: ${o.V3_Spacing["spacing-8"]};
-    font-weight: ${o.V3_Font.Spec["weight-bold"]};
-    position: relative;
-`,s=n.default.span`
-    position: absolute;
-    top: -18px;
-`,a=n.default.div`
-    position: absolute;
-    right: -6px;
-    top: ${e=>e.$top-6}px;
-    width: ${o.V3_Spacing["spacing-12"]};
-    height: ${o.V3_Spacing["spacing-12"]};
-    border-radius: ${o.V3_Radius.full};
-    background: ${o.V3_Colour["icon-primary"]};
-    z-index: 4;
-    display: ${e=>e.$isWeekView?"none":"block"};
-`;exports.HourDisplay=s,exports.TimeColumn=p,exports.TimeColumnWrapper=l,exports.TimeLabel=d,exports.TimelineCircle=a;
+"use strict";require("./time-indicator.styles_1eaxyes.css");exports.hourDisplay="h1y5vs3p",exports.timeColumn="twl5iae",exports.timeColumnWrapper="t1by6gzt",exports.timeLabel="t1eau6os",exports.timelineCircle="t1juq8yz",exports.timelineCircleWeekView="t1wl3tbi",exports.tokens={timelineCircle:{offset:"--fds-internal-schedule-timeIndicator-timelineCircle-top"}};
 //# sourceMappingURL=time-indicator.styles.js.map

package/cjs/schedule/time-indicator/time-indicator.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-indicator.styles.js","sources":["../../../../src/schedule/time-indicator/time-indicator.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { Typography } from \"../../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\nimport { CELL_HEIGHT, TIME_INDICATOR_WIDTH } from \"../const\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface TimelineCircleStyleProps {\n    $top: number;\n    $isWeekView: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TimeColumnWrapper = styled.div`\n    position: sticky;\n    z-index: 3;\n`;\n\nexport const TimeColumn = styled.div`\n    display: flex;\n    flex-direction: column;\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${V3_Colour[\"bg\"]};\n    border-right: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour[\"border\"]};\n`;\n\nexport const TimeLabel = styled(Typography.BodySM)`\n    min-height: ${CELL_HEIGHT * 2}px; /* 2 slots */\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    color: ${V3_Colour[\"text-subtler\"]};\n    padding-right: ${V3_Spacing[\"spacing-8\"]};\n    font-weight: ${V3_Font.Spec[\"weight-bold\"]};\n    position: relative;\n`;\nexport const HourDisplay = styled.span`\n    position: absolute;\n    top: -18px;\n`;\n\nexport const TimelineCircle = styled.div<TimelineCircleStyleProps>`\n    position: absolute;\n    right: -6px;\n    top: ${(props) => props.$top - 6}px;\n    width: ${V3_Spacing[\"spacing-12\"]};\n    height: ${V3_Spacing[\"spacing-12\"]};\n    border-radius: ${V3_Radius[\"full\"]};\n    background: ${V3_Colour[\"icon-primary\"]};\n    z-index: 4;\n    display: ${(props) => (props.$isWeekView ? \"none\" : \"block\")};\n`;\n"],"names":["TimeColumnWrapper","styled","div","TimeColumn","TIME_INDICATOR_WIDTH","V3_Colour","V3_Border","solid","TimeLabel","Typography","BodySM","CELL_HEIGHT","V3_Spacing","V3_Font","Spec","HourDisplay","span","TimelineCircle","props","$top","V3_Radius","$isWeekView"],"mappings":"wOAuBO,MAAMA,EAAoBC,EAAAA,QAAOC,GAAG;;;EAK9BC,EAAaF,EAAAA,QAAOC,GAAG;;;iBAGnBE;kBACCC,EAAAA,UAAc;oBACZC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UAC9CF,EAAAA,UAAkB;EAGfG,EAAYP,EAAAA,QAAOQ,aAAWC,OAAO;kBAClB,EAAdC,EAAAA;;;;aAILN,EAAAA,UAAU;qBACFO,EAAAA,WAAW;mBACbC,EAAAA,QAAQC,KAAK;;EAGnBC,EAAcd,EAAAA,QAAOe,IAAI;;;EAKzBC,EAAiBhB,EAAAA,QAAOC,GAA6B;;;WAGtDgB,GAAUA,EAAMC,KAAO;aACtBP,EAAAA,WAAW;cACVA,EAAAA,WAAW;qBACJQ,EAAAA,UAAgB;kBACnBf,EAAAA,UAAU;;eAEZa,GAAWA,EAAMG,YAAc,OAAS;"}
+{"version":3,"file":"time-indicator.styles.js","sources":["../../../../src/schedule/time-indicator/time-indicator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\nimport { CELL_HEIGHT, TIME_INDICATOR_WIDTH } from \"../const\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const tokens = {\n    timelineCircle: {\n        offset: \"--fds-internal-schedule-timeIndicator-timelineCircle-top\",\n    },\n};\n\nexport const timeColumnWrapper = css`\n    position: sticky;\n    z-index: 3;\n`;\n\nexport const timeColumn = css`\n    display: flex;\n    flex-direction: column;\n    min-width: ${TIME_INDICATOR_WIDTH}px;\n    background: ${Colour[\"bg\"]};\n    border-right: ${Border[\"width-010\"]} ${Border.solid} ${Colour[\"border\"]};\n`;\n\nexport const timeLabel = css`\n    min-height: ${CELL_HEIGHT * 2}px; /* 2 slots */\n    display: flex;\n    flex-direction: column;\n    align-items: flex-end;\n    color: ${Colour[\"text-subtler\"]};\n    padding-right: ${Spacing[\"spacing-8\"]};\n    font-weight: ${Font.Spec[\"weight-bold\"]};\n    position: relative;\n`;\nexport const hourDisplay = css`\n    position: absolute;\n    top: -18px;\n`;\n\nexport const timelineCircle = css`\n    ${tokens.timelineCircle.offset}: 0px;\n    position: absolute;\n    right: -6px;\n    top: calc(var(${tokens.timelineCircle.offset}) - 6px);\n    width: ${Spacing[\"spacing-12\"]};\n    height: ${Spacing[\"spacing-12\"]};\n    border-radius: ${Radius[\"full\"]};\n    background: ${Colour[\"icon-primary\"]};\n    z-index: 4;\n`;\n\nexport const timelineCircleWeekView = css`\n    display: none;\n`;\n"],"names":["timelineCircle","offset"],"mappings":"uHAqCwB,8BAlBD,oCALO,6BAaR,kCAeK,0CAYQ,0BA9Cb,CAClBA,eAAgB,CACZC,OAAQ"}

package/cjs/schedule/time-indicator/time-indicator.styles_1eaxyes.css

@@ -0,0 +1,6 @@
+.t1by6gzt{position:-webkit-sticky;position:sticky;z-index:3;}
+.twl5iae{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-width:42px;background:var(--fds-colour-bg);border-right:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
+.t1eau6os{min-height:96px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:flex-end;-webkit-box-align:flex-end;-ms-flex-align:flex-end;align-items:flex-end;color:var(--fds-colour-text-subtler);padding-right:var(--fds-spacing-8);font-weight:var(--fds-font-weight-bold);position:relative;}
+.h1y5vs3p{position:absolute;top:-18px;}
+.t1juq8yz{--fds-internal-schedule-timeIndicator-timelineCircle-top:0px;position:absolute;right:-6px;top:calc(var(--fds-internal-schedule-timeIndicator-timelineCircle-top) - 6px);width:var(--fds-spacing-12);height:var(--fds-spacing-12);border-radius:var(--fds-radius-full);background:var(--fds-colour-icon-primary);z-index:4;}
+.t1wl3tbi{display:none;}

package/cjs/select-histogram/select-histogram.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("react"),i=require("../histogram-slider/histogram-slider.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");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css"),require("../shared/dropdown-list/dropdown-list.js");var n=require("../shared/dropdown-list/dropdown-list-state.js"),l=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 t=require("../shared/dropdown-wrapper/element-with-dropdown.js"),d=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 o=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),u=require("../typography/index.js"),c=require("./select-histogram.styles.js");exports.SelectHistogram=p=>{var{alignment:h="left",className:g,disabled:q,dropdownZIndex:m,error:j,histogramSlider:b,id:x,"aria-labelledby":f,"aria-describedby":w,"aria-invalid":y,onBlur:v,onChange:_,onChangeEnd:T,optionTruncationType:S="end",placeholder:C="Select",rangeLabelPrefix:L,rangeLabelSuffix:A,readOnly:I,renderRangeLabel:k,value:E,dropdownRootNode:R}=p,O=e.__rest(p,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:B,bins:H=[],renderEmptyView:P,ariaLabels:N}=b,D=H.map((e=>e.minValue)),G=Math.min(...D),[M,F]=a.useState(ae()),[V,Z]=a.useState(!1),[W,$]=a.useState(!1),z=s.useId(),J=a.useRef(null),K=a.useRef(null),Q=a.useRef(null),U=O["data-testid"]||"select-histogram";a.useEffect((()=>{E!==M&&F(ae())}),[E]);const X=e=>{F(e),null==_||_(e)},Y=e=>{F(e),null==T||T(e)},ee=()=>{W||V||$(!0)},re=e=>{W&&!V&&J.current&&!J.current.contains(e.relatedTarget)&&($(!1),null==v||v())};function ae(){return null!=E?E:[G,G+B]}const ie=e=>k?k(e):r.jsxs(u.Typography.BodyBL,{children:[L,e,A]});return r.jsx(n.DropdownListState,{children:r.jsx(t.ElementWithDropdown,{enabled:!I&&!q,isOpen:V,renderElement:()=>r.jsx(d.InputBox,{className:g,"data-testid":U,id:x,ref:J,tabIndex:-1,onFocus:ee,onBlur:re,focused:W,disabled:q,readOnly:I,error:j,children:r.jsx(l.ExpandableElement,{ref:K,disabled:q,expanded:V,listboxId:z,popupRole:"dialog",readOnly:I,variant:"default","aria-labelledby":f,"aria-describedby":w,"aria-invalid":y,children:r.jsx("div",{className:o.labelContainer,ref:Q,"data-disabled":q||void 0,children:D&&0!==D.length?r.jsxs(c.Label,{children:[ie(M[0]),r.jsx(c.Separator,{children:"-"}),ie(M[1])]}):r.jsx(c.PlaceholderLabel,{$truncateType:S,$variant:"default",children:C})})})}),renderDropdown:({elementWidth:e,styles:a,setFloatingRef:s,getFloatingProps:n})=>r.jsx(c.HistogramSliderDropdownContainer,Object.assign({style:Object.assign(Object.assign({},a),{width:e}),ref:s},n(),{children:r.jsx(i.HistogramSlider,{interval:B,value:M,bins:H,onChange:X,onChangeEnd:Y,showRangeLabels:!1,renderEmptyView:P,ariaLabels:N})})),onOpen:()=>{Z(!0)},onClose:()=>{Z(!1)},onDismiss:()=>{var e;null===(e=K.current)||void 0===e||e.focus(),Z(!1)},clickToToggle:!0,offset:8,alignment:h,fitAvailableHeight:!0,customZIndex:m,rootNode:R})})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),s=require("react"),i=require("../histogram-slider/histogram-slider.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 n=require("../util/simple-id-generator.js");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"),require("../shared/dropdown-list/dropdown-list.js");var l=require("../shared/dropdown-list/dropdown-list-state.js"),t=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"),o=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 u=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),c=require("../typography/index.js"),p=require("./select-histogram.styles.js");function h(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=h(a);exports.SelectHistogram=a=>{var{alignment:h="left",className:g,disabled:q,dropdownZIndex:j,error:b,histogramSlider:f,id:x,"aria-labelledby":w,"aria-describedby":y,"aria-invalid":v,onBlur:_,onChange:T,onChangeEnd:C,optionTruncationType:S="end",placeholder:L="Select",rangeLabelPrefix:k,rangeLabelSuffix:A,readOnly:E,renderRangeLabel:I,value:N,dropdownRootNode:R}=a,O=e.__rest(a,["alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","aria-labelledby","aria-describedby","aria-invalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode"]);const{interval:B,bins:H=[],renderEmptyView:P,ariaLabels:D}=f,G=H.map((e=>e.minValue)),M=Math.min(...G),[F,V]=s.useState(se()),[Z,W]=s.useState(!1),[$,z]=s.useState(!1),J=n.useId(),K=s.useRef(null),Q=s.useRef(null),U=s.useRef(null),X=O["data-testid"]||"select-histogram";s.useEffect((()=>{N!==F&&V(se())}),[N]);const Y=e=>{V(e),null==T||T(e)},ee=e=>{V(e),null==C||C(e)},re=()=>{$||Z||z(!0)},ae=e=>{$&&!Z&&K.current&&!K.current.contains(e.relatedTarget)&&(z(!1),null==_||_())};function se(){return null!=N?N:[M,M+B]}const ie=e=>I?I(e):r.jsxs(c.Typography.BodyBL,{children:[k,e,A]});return r.jsx(l.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!E&&!q,isOpen:Z,renderElement:()=>r.jsx(o.InputBox,{className:g,"data-testid":X,id:x,ref:K,tabIndex:-1,onFocus:re,onBlur:ae,focused:$,disabled:q,readOnly:E,error:b,children:r.jsx(t.ExpandableElement,{ref:Q,disabled:q,expanded:Z,listboxId:J,popupRole:"dialog",readOnly:E,variant:"default","aria-labelledby":w,"aria-describedby":y,"aria-invalid":v,children:r.jsx("div",{className:u.labelContainer,ref:U,"data-disabled":q||void 0,children:G&&0!==G.length?r.jsxs("div",{className:p.label,children:[ie(F[0]),r.jsx("div",{className:p.separator,children:"-"}),ie(F[1])]}):r.jsx("div",{className:m.default(p.placeholderLabel,"middle"!==S&&p.placeholderLabelTruncateEnd),children:L})})})}),renderDropdown:({elementWidth:e,styles:a,setFloatingRef:s,getFloatingProps:n})=>r.jsx("div",Object.assign({className:p.histogramSliderDropdownContainer,style:Object.assign(Object.assign({},a),{width:e}),ref:s,"data-testid":`${X}-dropdown`},n(),{children:r.jsx(i.HistogramSlider,{interval:B,value:F,bins:H,onChange:Y,onChangeEnd:ee,showRangeLabels:!1,renderEmptyView:P,ariaLabels:D})})),onOpen:()=>{W(!0)},onClose:()=>{W(!1)},onDismiss:()=>{var e;null===(e=Q.current)||void 0===e||e.focus(),W(!1)},clickToToggle:!0,offset:8,alignment:h,fitAvailableHeight:!0,customZIndex:j,rootNode:R})})};
 //# sourceMappingURL=select-histogram.js.map

package/cjs/select-histogram/select-histogram.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.js","sources":["../../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport {\n    HistogramSliderDropdownContainer,\n    Label,\n    PlaceholderLabel,\n    Separator,\n} from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\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    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\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    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <PlaceholderLabel\n                $truncateType={optionTruncationType}\n                $variant=\"default\"\n            >\n                {placeholder}\n            </PlaceholderLabel>\n        ) : (\n            <Label>\n                {renderSelector(selection[0])}\n                <Separator>-</Separator>\n                {renderSelector(selection[1])}\n            </Label>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\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=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\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        elementWidth,\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <HistogramSliderDropdownContainer\n            style={{ ...styles, width: elementWidth }}\n            ref={setFloatingRef}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </HistogramSliderDropdownContainer>\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":["_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","Label","Separator","PlaceholderLabel","$truncateType","$variant","renderDropdown","elementWidth","styles","setFloatingRef","getFloatingProps","HistogramSliderDropdownContainer","Object","assign","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"ssEAkBgCA,QAAAC,UAC5BA,EAAY,OAAMC,UAClBA,EAASC,SACTA,EAAQC,eACRA,EAAcC,MACdA,EAAKC,gBACLA,EAAeC,GACfA,EACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAAWC,OAC3BA,EAAMC,SACNA,EAAQC,YACRA,EAAWC,qBACXA,EAAuB,MAAKC,YAC5BA,EAAc,SAAQC,iBACtBA,EAAgBC,iBAChBA,EAAgBC,SAChBA,EAAQC,iBACRA,EAAgBC,MAChBA,EAAKC,iBACLA,GAAgBrB,EACbsB,EAAUC,SAAAvB,EAtBe,CAAA,YAAA,YAAA,WAAA,iBAAA,QAAA,kBAAA,KAAA,kBAAA,mBAAA,eAAA,SAAA,WAAA,cAAA,uBAAA,cAAA,mBAAA,mBAAA,WAAA,mBAAA,QAAA,qBAwB5B,MAAMwB,SACFA,EAAQC,KACRA,EAAO,GAAEC,gBACTA,EAAeC,WACfA,GACArB,EAIEsB,EAASH,EAAKI,KAAKC,GAASA,EAAKC,WACjCA,EAAWC,KAAKC,OAAOL,IACtBM,EAAWC,GAAgBC,EAAAA,SAC9BC,OAEGC,EAAaC,GAAkBH,EAAAA,UAAkB,IACjDI,EAASC,GAAcL,EAAAA,UAAkB,GAC1CM,EAAaC,EAAAA,QAEbC,EAAUC,EAAAA,OAAuB,MACjCC,EAAcD,EAAAA,OAA0B,MACxCE,EAAoBF,EAAAA,OAAuB,MAE3CG,EAAS1B,EAAW,gBAAkB,mBAI5C2B,EAAAA,WAAU,KACF7B,IAAUc,GACVC,EAAaE,KACjB,GAED,CAACjB,IAKJ,MAaM8B,EAAkBtB,IACpBO,EAAaP,GACbhB,SAAAA,EAAWgB,EAAO,EAGhBuB,EAAqBvB,IACvBO,EAAaP,GACbf,SAAAA,EAAce,EAAO,EAGnBwB,GAAkB,KACfZ,GAAYF,GACbG,GAAW,EACf,EAGEY,GAAkBC,IAEhBd,IACCF,GACDM,EAAQW,UACPX,EAAQW,QAAQC,SAASF,EAAEG,iBAE5BhB,GAAW,GACX9B,SAAAA,IACJ,EAKJ,SAAS0B,KACL,OAAOjB,QAAAA,EAAS,CAACW,EAAUA,EAAWP,EAC1C,CAKA,MAAMkC,GAAkBtC,GAChBD,EACOA,EAAiBC,GAIxBuC,EAAAA,KAACC,aAAWC,OAAM,CAAAC,SAAA,CACb9C,EACAI,EACAH,KAyFb,OACI8C,EAAAA,IAACC,EAAAA,kBAAiB,CAAAF,SACdC,EAAAA,IAACE,EAAAA,oBAAmB,CAChBC,SAAUhD,IAAaf,EACvBgE,OAAQ7B,EACR8B,cA9DU,IAEdL,MAACM,EAAAA,UACGnE,UAAWA,EAAS,cACP8C,EACbzC,GAAIA,EACJ+D,IAAK1B,EACL2B,UAAU,EACVC,QAASpB,GACTzC,OAAQ0C,GACRb,QAASA,EACTrC,SAAUA,EACVe,SAAUA,EACVb,MAAOA,WAEP0D,MAACU,EAAAA,mBACGH,IAAKxB,EACL3C,SAAUA,EACVuE,SAAUpC,EACVqC,UAAWjC,EACXkC,UAAU,SACV1D,SAAUA,EACV2D,QAAQ,UAAS,kBACArE,qBACCC,EAAe,eACnBC,EAAWoD,SAlCrCC,EAAAA,IAAA,MAAA,CACI7D,UAAW4E,EAAAA,eACXR,IAAKvB,EAAiB,gBACP5C,QAAY4E,EAASjB,SApBhClC,GAA4B,IAAlBA,EAAOoD,OAQrBrB,EAAAA,KAACsB,EAAAA,iBACIvB,GAAexB,EAAU,IAC1B6B,EAAAA,IAACmB,YAAS,CAAApB,SAAA,MACTJ,GAAexB,EAAU,OAV9B6B,EAAAA,IAACoB,mBAAgB,CAAAC,cACEtE,EAAoBuE,SAC1B,mBAERtE,UAoFDuE,eA9BW,EACnBC,eACAC,SACAC,iBACAC,sBAEA3B,EAAAA,IAAC4B,mCAAgCC,OAAAC,OAAA,CAC7BC,MAAKF,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAOL,IAAQO,MAAOR,IAC3BjB,IAAKmB,GACDC,IAAkB,CAAA5B,SAEtBC,EAAAA,IAACiC,EAAAA,gBAAe,CACZxE,SAAUA,EACVJ,MAAOc,EACPT,KAAMA,EACNb,SAAUsC,EACVrC,YAAasC,EACb8C,iBAAiB,EACjBvE,gBAAiBA,EACjBC,WAAYA,OAYZuE,OA3JO,KACf3D,GAAe,EAAK,EA2JZ4D,QAxJQ,KAChB5D,GAAe,EAAM,EAwJb6D,UArJU,WACC,QAAnBpG,EAAA8C,EAAYS,eAAO,IAAAvD,GAAAA,EAAEqG,QACrB9D,GAAe,EAAM,EAoJb+D,eAAa,EACbC,OAAQ,EACRtG,UAAWA,EACXuG,oBAAkB,EAClBC,aAAcrG,EACdsG,SAAUrF,KAEE"}
+{"version":3,"file":"select-histogram.js","sources":["../../../src/select-histogram/select-histogram.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { HistogramSlider } from \"../histogram-slider\";\nimport { DropdownListState, ExpandableElement } from \"../shared/dropdown-list\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport * as dropdownWrapperStyles from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./select-histogram.styles\";\nimport type { SelectHistogramProps } from \"./types\";\n\nexport const SelectHistogram = ({\n    alignment = \"left\",\n    className,\n    disabled,\n    dropdownZIndex,\n    error,\n    histogramSlider,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    onBlur,\n    onChange,\n    onChangeEnd,\n    optionTruncationType = \"end\",\n    placeholder = \"Select\",\n    rangeLabelPrefix,\n    rangeLabelSuffix,\n    readOnly,\n    renderRangeLabel,\n    value,\n    dropdownRootNode,\n    ...otherProps\n}: SelectHistogramProps): JSX.Element => {\n    const {\n        interval,\n        bins = [],\n        renderEmptyView,\n        ariaLabels,\n    } = histogramSlider;\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const values = bins.map((item) => item.minValue);\n    const minValue = Math.min(...values);\n    const [selection, setSelection] = useState<[number, number]>(\n        initSelection()\n    );\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    const testId = otherProps[\"data-testid\"] || \"select-histogram\";\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection) {\n            setSelection(initSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = () => {\n        setShowOptions(true);\n    };\n\n    const handleClose = () => {\n        setShowOptions(false);\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n    };\n\n    const onSliderChange = (values: [number, number]) => {\n        setSelection(values);\n        onChange?.(values);\n    };\n\n    const onSliderChangeEnd = (values: [number, number]) => {\n        setSelection(values);\n        onChangeEnd?.(values);\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    // HELPER FUNCTIONS\n    // =============================================================================\n    function initSelection(): [number, number] {\n        return value ?? [minValue, minValue + interval];\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSelector = (value: number) => {\n        if (renderRangeLabel) {\n            return renderRangeLabel(value);\n        }\n\n        return (\n            <Typography.BodyBL>\n                {rangeLabelPrefix}\n                {value}\n                {rangeLabelSuffix}\n            </Typography.BodyBL>\n        );\n    };\n\n    const getDisplayValue = () => {\n        return !values || values.length === 0 ? (\n            <div\n                className={clsx(\n                    styles.placeholderLabel,\n                    optionTruncationType !== \"middle\" &&\n                        styles.placeholderLabelTruncateEnd\n                )}\n            >\n                {placeholder}\n            </div>\n        ) : (\n            <div className={styles.label}>\n                {renderSelector(selection[0])}\n                <div className={styles.separator}>-</div>\n                {renderSelector(selection[1])}\n            </div>\n        );\n    };\n\n    const renderSelectorContent = () => (\n        <div\n            className={dropdownWrapperStyles.labelContainer}\n            ref={labelContainerRef}\n            data-disabled={disabled || undefined}\n        >\n            {getDisplayValue()}\n        </div>\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=\"dialog\"\n                    readOnly={readOnly}\n                    variant=\"default\"\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        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => (\n        <div\n            className={styles.histogramSliderDropdownContainer}\n            style={{ ...floatingStyles, width: elementWidth }}\n            ref={setFloatingRef}\n            data-testid={`${testId}-dropdown`}\n            {...getFloatingProps()}\n        >\n            <HistogramSlider\n                interval={interval}\n                value={selection}\n                bins={bins}\n                onChange={onSliderChange}\n                onChangeEnd={onSliderChangeEnd}\n                showRangeLabels={false}\n                renderEmptyView={renderEmptyView}\n                ariaLabels={ariaLabels}\n            />\n        </div>\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":["_a","alignment","className","disabled","dropdownZIndex","error","histogramSlider","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","onBlur","onChange","onChangeEnd","optionTruncationType","placeholder","rangeLabelPrefix","rangeLabelSuffix","readOnly","renderRangeLabel","value","dropdownRootNode","otherProps","__rest","interval","bins","renderEmptyView","ariaLabels","values","map","item","minValue","Math","min","selection","setSelection","useState","initSelection","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","testId","useEffect","onSliderChange","onSliderChangeEnd","handleNodeFocus","handleNodeBlur","e","current","contains","relatedTarget","renderSelector","_jsxs","Typography","BodyBL","children","_jsx","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","variant","dropdownWrapperStyles.labelContainer","undefined","length","styles.label","styles.separator","clsx","styles.placeholderLabel","styles.placeholderLabelTruncateEnd","renderDropdown","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","Object","assign","styles.histogramSliderDropdownContainer","style","width","HistogramSlider","showRangeLabels","onOpen","onClose","onDismiss","focus","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"q0EAcgCA,QAAAC,UAC5BA,EAAY,OAAMC,UAClBA,EAASC,SACTA,EAAQC,eACRA,EAAcC,MACdA,EAAKC,gBACLA,EAAeC,GACfA,EACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAAWC,OAC3BA,EAAMC,SACNA,EAAQC,YACRA,EAAWC,qBACXA,EAAuB,MAAKC,YAC5BA,EAAc,SAAQC,iBACtBA,EAAgBC,iBAChBA,EAAgBC,SAChBA,EAAQC,iBACRA,EAAgBC,MAChBA,EAAKC,iBACLA,GAAgBrB,EACbsB,EAAUC,SAAAvB,EAtBe,CAAA,YAAA,YAAA,WAAA,iBAAA,QAAA,kBAAA,KAAA,kBAAA,mBAAA,eAAA,SAAA,WAAA,cAAA,uBAAA,cAAA,mBAAA,mBAAA,WAAA,mBAAA,QAAA,qBAwB5B,MAAMwB,SACFA,EAAQC,KACRA,EAAO,GAAEC,gBACTA,EAAeC,WACfA,GACArB,EAIEsB,EAASH,EAAKI,KAAKC,GAASA,EAAKC,WACjCA,EAAWC,KAAKC,OAAOL,IACtBM,EAAWC,GAAgBC,EAAAA,SAC9BC,OAEGC,EAAaC,GAAkBH,EAAAA,UAAkB,IACjDI,EAASC,GAAcL,EAAAA,UAAkB,GAC1CM,EAAaC,EAAAA,QAEbC,EAAUC,EAAAA,OAAuB,MACjCC,EAAcD,EAAAA,OAA0B,MACxCE,EAAoBF,EAAAA,OAAuB,MAE3CG,EAAS1B,EAAW,gBAAkB,mBAI5C2B,EAAAA,WAAU,KACF7B,IAAUc,GACVC,EAAaE,KACjB,GAED,CAACjB,IAKJ,MAaM8B,EAAkBtB,IACpBO,EAAaP,GACbhB,SAAAA,EAAWgB,EAAO,EAGhBuB,GAAqBvB,IACvBO,EAAaP,GACbf,SAAAA,EAAce,EAAO,EAGnBwB,GAAkB,KACfZ,GAAYF,GACbG,GAAW,EACf,EAGEY,GAAkBC,IAEhBd,IACCF,GACDM,EAAQW,UACPX,EAAQW,QAAQC,SAASF,EAAEG,iBAE5BhB,GAAW,GACX9B,SAAAA,IACJ,EAKJ,SAAS0B,KACL,OAAOjB,QAAAA,EAAS,CAACW,EAAUA,EAAWP,EAC1C,CAKA,MAAMkC,GAAkBtC,GAChBD,EACOA,EAAiBC,GAIxBuC,EAAAA,KAACC,aAAWC,OAAM,CAAAC,SAAA,CACb9C,EACAI,EACAH,KA8Fb,OACI8C,EAAAA,IAACC,EAAAA,kBAAiB,CAAAF,SACdC,EAAAA,IAACE,EAAAA,oBAAmB,CAChBC,SAAUhD,IAAaf,EACvBgE,OAAQ7B,EACR8B,cAhEU,IAEdL,MAACM,EAAAA,UACGnE,UAAWA,EAAS,cACP8C,EACbzC,GAAIA,EACJ+D,IAAK1B,EACL2B,UAAU,EACVC,QAASpB,GACTzC,OAAQ0C,GACRb,QAASA,EACTrC,SAAUA,EACVe,SAAUA,EACVb,MAAOA,WAEP0D,MAACU,EAAAA,mBACGH,IAAKxB,EACL3C,SAAUA,EACVuE,SAAUpC,EACVqC,UAAWjC,EACXkC,UAAU,SACV1D,SAAUA,EACV2D,QAAQ,UAAS,kBACArE,qBACCC,EAAe,eACnBC,EAAWoD,SAlCrCC,EAAAA,IAAA,MAAA,CACI7D,UAAW4E,EAAAA,eACXR,IAAKvB,EAAiB,gBACP5C,QAAY4E,EAASjB,SAvBhClC,GAA4B,IAAlBA,EAAOoD,OAWrBrB,EAAAA,KAAA,MAAA,CAAKzD,UAAW+E,EAAAA,MAAYnB,SAAA,CACvBJ,GAAexB,EAAU,IAC1B6B,EAAAA,IAAA,MAAA,CAAK7D,UAAWgF,EAAAA,UAAgBpB,SAAA,MAC/BJ,GAAexB,EAAU,OAb9B6B,EAAAA,IAAA,MAAA,CACI7D,UAAWiF,EAAAA,QACPC,EAAAA,iBACyB,WAAzBtE,GACIuE,EAAAA,sCAGPtE,UAsFDuE,eAhCW,EACnBC,eACAC,OAAQC,EACRC,iBACAC,sBAEA5B,EAAAA,IAAA,MAAA6B,OAAAC,OAAA,CACI3F,UAAW4F,mCACXC,qCAAYN,GAAc,CAAEO,MAAOT,IACnCjB,IAAKoB,EAAc,cACN,GAAG1C,cACZ2C,IAAkB,CAAA7B,SAEtBC,EAAAA,IAACkC,EAAAA,gBAAe,CACZzE,SAAUA,EACVJ,MAAOc,EACPT,KAAMA,EACNb,SAAUsC,EACVrC,YAAasC,GACb+C,iBAAiB,EACjBxE,gBAAiBA,EACjBC,WAAYA,OAYZwE,OAhKO,KACf5D,GAAe,EAAK,EAgKZ6D,QA7JQ,KAChB7D,GAAe,EAAM,EA6Jb8D,UA1JU,WACC,QAAnBrG,EAAA8C,EAAYS,eAAO,IAAAvD,GAAAA,EAAEsG,QACrB/D,GAAe,EAAM,EAyJbgE,eAAa,EACbC,OAAQ,EACRvG,UAAWA,EACXwG,oBAAkB,EAClBC,aAActG,EACduG,SAAUtF,KAEE"}

package/cjs/select-histogram/select-histogram.styles.js

@@ -1,38 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../shared/styles/index.js"),i=require("../v3_theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=t(e);const d=a.default.div`
-    overflow: hidden;
-    border: ${i.V3_Border["width-010"]} ${i.V3_Border.solid}
-        ${i.V3_Colour.border};
-    border-radius: ${i.V3_Radius.sm};
-    background: ${i.V3_Colour.bg};
-    padding: ${i.V3_Spacing["spacing-16"]};
-    min-width: 23rem;
-
-    ${i.V3_MediaQuery.MaxWidth.sm} {
-        min-width: unset;
-        width: calc(100vw - ${i.V3_Breakpoint["sm-margin"]}px * 2);
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.xs} {
-        width: calc(100vw - ${i.V3_Breakpoint["xs-margin"]}px * 2);
-    }
-
-    ${i.V3_MediaQuery.MaxWidth.xxs} {
-        width: calc(100vw - ${i.V3_Breakpoint["xxs-margin"]}px * 2);
-    }
-`,o=a.default.div`
-    display: flex;
-    align-items: baseline;
-`,l=a.default.div`
-    margin: 0 0.5rem;
-    color: ${i.V3_Colour.text};
-`,n=a.default.div`
-    ${e=>"small"===e.$variant?i.V3_Font["body-md-regular"]:i.V3_Font["body-baseline-regular"]}
-    text-align: left;
-    ${i=>{if("middle"!==i.$truncateType)return e.css`
-                    ${r.lineClampCss(1)}
-                `}}
-    overflow: hidden;
-`,s=a.default(n)`
-    color: ${i.V3_Colour["text-subtler"]};
-`;exports.HistogramSliderDropdownContainer=d,exports.Label=o,exports.PlaceholderLabel=s,exports.Separator=l,exports.ValueLabel=n;
+"use strict";require("./select-histogram.styles_n260dy.css");exports.histogramSliderDropdownContainer="h1snxaxy",exports.label="l1e4uw6e",exports.placeholderLabel="p11079xa",exports.placeholderLabelTruncateEnd="p1bydnw6",exports.separator="s134rtp9";
 //# sourceMappingURL=select-histogram.styles.js.map

package/cjs/select-histogram/select-histogram.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"select-histogram.styles.js","sources":["../../../src/select-histogram/select-histogram.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport type {\n    DropdownVariantType,\n    TruncateType,\n} from \"../shared/dropdown-list/types\";\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\ninterface ValueLabelStyleProps {\n    $truncateType?: TruncateType;\n    $variant?: DropdownVariantType;\n}\n\nexport const HistogramSliderDropdownContainer = styled.div`\n    overflow: hidden;\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${V3_Breakpoint[\"sm-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xs-margin\"]}px * 2);\n    }\n\n    ${V3_MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${V3_Breakpoint[\"xxs-margin\"]}px * 2);\n    }\n`;\n\nexport const Label = styled.div`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const Separator = styled.div`\n    margin: 0 0.5rem;\n    color: ${V3_Colour[\"text\"]};\n`;\n\nexport const ValueLabel = styled.div<ValueLabelStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    text-align: left;\n    ${(props) => {\n        switch (props.$truncateType) {\n            case \"middle\":\n                break;\n            case \"end\":\n            default:\n                return css`\n                    ${lineClampCss(1)}\n                `;\n        }\n    }}\n    overflow: hidden;\n`;\n\nexport const PlaceholderLabel = styled(ValueLabel)`\n    color: ${V3_Colour[\"text-subtler\"]};\n`;\n"],"names":["HistogramSliderDropdownContainer","styled","div","V3_Border","V3_Colour","V3_Radius","V3_Spacing","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","xs","xxs","Label","Separator","ValueLabel","props","$variant","V3_Font","$truncateType","css","lineClampCss","PlaceholderLabel"],"mappings":"4MAsBO,MAAMA,EAAmCC,EAAAA,QAAOC,GAAG;;cAE5CC,EAAAA,UAAU,gBAAgBA,EAAAA,UAAiB;UAC/CC,EAAAA,UAAkB;qBACPC,EAAAA,UAAc;kBACjBD,EAAAA,UAAc;eACjBE,EAAAA,WAAW;;;MAGpBC,EAAAA,cAAcC,SAASC;;8BAECC,EAAAA,cAAc;;;MAGtCH,EAAAA,cAAcC,SAASG;8BACCD,EAAAA,cAAc;;;MAGtCH,EAAAA,cAAcC,SAASI;8BACCF,EAAAA,cAAc;;EAI/BG,EAAQZ,EAAAA,QAAOC,GAAG;;;EAKlBY,EAAYb,EAAAA,QAAOC,GAAG;;aAEtBE,EAAAA,UAAgB;EAGhBW,EAAad,EAAAA,QAAOC,GAAyB;MACnDc,GACoB,UAAnBA,EAAMC,SACAC,EAAAA,QAAQ,mBACRA,EAAAA,QAAQ;;MAEfF,IACC,GACS,WADDA,EAAMG,cAKN,OAAOC,KAAG;sBACJC,EAAAA,aAAa;;;EAOtBC,EAAmBrB,EAAAA,QAAOc,EAAW;aACrCX,EAAAA,UAAU;"}
+{"version":3,"file":"select-histogram.styles.js","sources":["../../../src/select-histogram/select-histogram.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampCss } from \"../shared/styles\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Font,\n    MediaQuery,\n    Radius,\n    Spacing,\n} from \"../theme\";\n\nexport const histogramSliderDropdownContainer = css`\n    overflow: hidden;\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    min-width: 23rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        min-width: unset;\n        width: calc(100vw - ${Breakpoint[\"sm-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        width: calc(100vw - ${Breakpoint[\"xs-margin\"]} * 2);\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        width: calc(100vw - ${Breakpoint[\"xxs-margin\"]} * 2);\n    }\n`;\n\nexport const label = css`\n    display: flex;\n    align-items: baseline;\n`;\n\nexport const separator = css`\n    margin: 0 0.5rem;\n    color: ${Colour[\"text\"]};\n`;\n\nexport const placeholderLabel = css`\n    ${Font[\"body-baseline-regular\"]}\n    text-align: left;\n    overflow: hidden;\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const placeholderLabelTruncateEnd = css`\n    ${lineClampCss(1)}\n`;\n"],"names":[],"mappings":"sIAa6C,yBAsB3B,oCAUW,+CAOW,6BAZlB"}

package/cjs/select-histogram/select-histogram.styles_n260dy.css

@@ -0,0 +1,5 @@
+.h1snxaxy{overflow:hidden;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);padding:var(--fds-spacing-16);min-width:23rem;}:where(body.fds-breakpoint-sm-max) .h1snxaxy{min-width:unset;width:calc(100vw - var(--fds-breakpoint-margin-sm) * 2);}:where(body.fds-breakpoint-xs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xs) * 2);}:where(body.fds-breakpoint-xxs-max) .h1snxaxy{width:calc(100vw - var(--fds-breakpoint-margin-xxs) * 2);}
+.l1e4uw6e{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;align-items:baseline;}
+.s134rtp9{margin:0 0.5rem;color:var(--fds-colour-text);}
+.p11079xa{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);text-align:left;overflow:hidden;color:var(--fds-colour-text-subtler);}
+.p1bydnw6{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;}

package/cjs/shared/component-loading-spinner/component-loading-spinner.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("clsx"),r=require("react"),s=require("../../theme/utils/use-apply-styles.js");require("../../theme/theme-provider/context.js");var t=require("./component-loading-spinner.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(i);exports.ComponentLoadingSpinner=i=>{var{color:a,className:o,size:u}=i,d=e.__rest(i,["color","className","size"]);const c=r.useRef(null);return s.useApplyStyle(c,{[t.tokens.rootSize]:u?`${u}px`:void 0,[t.tokens.rootColour]:a}),n.jsxs("div",Object.assign({ref:c,className:l.default(t.outerRing,o)},d,{"data-testid":"component-loading-spinner",children:[n.jsx("div",{id:"inner1",className:t.innerRing}),n.jsx("div",{id:"inner2",className:l.default(t.innerRing,t.innerRing2)}),n.jsx("div",{id:"inner3",className:l.default(t.innerRing,t.innerRing3)}),n.jsx("div",{id:"inner4",className:l.default(t.innerRing,t.innerRing4)})]}))};
+"use strict";var e=require("../../_virtual/_tslib.js"),i=require("react/jsx-runtime"),n=require("clsx"),r=require("react"),s=require("../../theme/utils/use-apply-styles.js");require("../../theme/theme-provider/context.js"),require("../../theme/utils/use-media-query.js");var t=require("./component-loading-spinner.styles.js");function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=a(n);exports.ComponentLoadingSpinner=n=>{var{color:a,className:o,size:u}=n,d=e.__rest(n,["color","className","size"]);const c=r.useRef(null);return s.useApplyStyle(c,{[t.tokens.rootSize]:u?`${u}px`:void 0,[t.tokens.rootColour]:a}),i.jsxs("div",Object.assign({ref:c,className:l.default(t.outerRing,o)},d,{"data-testid":"component-loading-spinner",children:[i.jsx("div",{id:"inner1",className:t.innerRing}),i.jsx("div",{id:"inner2",className:l.default(t.innerRing,t.innerRing2)}),i.jsx("div",{id:"inner3",className:l.default(t.innerRing,t.innerRing3)}),i.jsx("div",{id:"inner4",className:l.default(t.innerRing,t.innerRing4)})]}))};
 //# sourceMappingURL=component-loading-spinner.js.map

package/cjs/shared/component-loading-spinner/component-loading-spinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-loading-spinner.js","sources":["../../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme/utils\";\nimport * as styles from \"./component-loading-spinner.styles\";\n\ntype BaseProps = Omit<HTMLAttributes<HTMLDivElement>, \"color\">;\n\nexport interface ComponentLoadingSpinnerProps extends BaseProps {\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | undefined;\n}\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The font size and color can be customised via the prop or through css.\n *\n * Example:\n * ```\n * const spinner = css`\n *   color: red;\n *   font-size: 1lh;\n * `\n *\n * <ComponentLoadingSpinner className={styles.spinner} />\n * ```\n */\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n    ...otherProps\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    const spinnerRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(spinnerRef, {\n        [styles.tokens.rootSize]: size ? `${size}px` : undefined,\n        [styles.tokens.rootColour]: color,\n    });\n\n    return (\n        <div\n            ref={spinnerRef}\n            className={clsx(styles.outerRing, className)}\n            {...otherProps}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <div id=\"inner1\" className={styles.innerRing} />\n            <div\n                id=\"inner2\"\n                className={clsx(styles.innerRing, styles.innerRing2)}\n            />\n            <div\n                id=\"inner3\"\n                className={clsx(styles.innerRing, styles.innerRing3)}\n            />\n            <div\n                id=\"inner4\"\n                className={clsx(styles.innerRing, styles.innerRing4)}\n            />\n        </div>\n    );\n};\n"],"names":["_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"yYAkCwCA,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAA,OAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAAA,OAAuB,MAM1C,OALAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,EAAAA,OAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAAA,OAAcG,YAAaX,IAI5BY,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAAA,QAAKC,EAAAA,UAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,EAAAA,WAAKC,GAAG,SAASnB,UAAWoB,EAAAA,YAC5BF,EAAAA,WACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,YAAkBC,EAAAA,cAEtCH,MAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBE,gBAEtCJ,EAAAA,IAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBG,EAAAA,iBAEpC"}
+{"version":3,"file":"component-loading-spinner.js","sources":["../../../../src/shared/component-loading-spinner/component-loading-spinner.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { HTMLAttributes } from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme/utils\";\nimport * as styles from \"./component-loading-spinner.styles\";\n\ntype BaseProps = Omit<HTMLAttributes<HTMLDivElement>, \"color\">;\n\nexport interface ComponentLoadingSpinnerProps extends BaseProps {\n    /** Measurement in px */\n    size?: number | undefined;\n    /** rgb/hex value or Color token */\n    color?: string | undefined;\n}\n\n/**\n * This component is mainly used within components and is not to be confused\n * with the main loading spinner in animations/loading-spinner\n *\n * By default it inherits the font size and color of the parent container.\n *\n * The font size and color can be customised via the prop or through css.\n *\n * Example:\n * ```\n * const spinner = css`\n *   color: red;\n *   font-size: 1lh;\n * `\n *\n * <ComponentLoadingSpinner className={styles.spinner} />\n * ```\n */\nexport const ComponentLoadingSpinner = ({\n    color,\n    className,\n    size,\n    ...otherProps\n}: ComponentLoadingSpinnerProps): JSX.Element => {\n    const spinnerRef = useRef<HTMLDivElement>(null);\n    useApplyStyle(spinnerRef, {\n        [styles.tokens.rootSize]: size ? `${size}px` : undefined,\n        [styles.tokens.rootColour]: color,\n    });\n\n    return (\n        <div\n            ref={spinnerRef}\n            className={clsx(styles.outerRing, className)}\n            {...otherProps}\n            data-testid={\"component-loading-spinner\"}\n        >\n            <div id=\"inner1\" className={styles.innerRing} />\n            <div\n                id=\"inner2\"\n                className={clsx(styles.innerRing, styles.innerRing2)}\n            />\n            <div\n                id=\"inner3\"\n                className={clsx(styles.innerRing, styles.innerRing3)}\n            />\n            <div\n                id=\"inner4\"\n                className={clsx(styles.innerRing, styles.innerRing4)}\n            />\n        </div>\n    );\n};\n"],"names":["_a","color","className","size","otherProps","__rest","spinnerRef","useRef","useApplyStyle","styles.tokens","rootSize","undefined","rootColour","_jsxs","Object","assign","ref","clsx","styles.outerRing","children","_jsx","id","styles.innerRing","styles.innerRing2","styles.innerRing3","styles.innerRing4"],"mappings":"ybAkCwCA,QAAAC,MACpCA,EAAKC,UACLA,EAASC,KACTA,KACGC,EAAUC,EAAAA,OAAAL,EAJuB,CAAA,QAAA,YAAA,SAMpC,MAAMM,EAAaC,EAAAA,OAAuB,MAM1C,OALAC,EAAAA,cAAcF,EAAY,CACtB,CAACG,EAAAA,OAAcC,UAAWP,EAAO,GAAGA,WAAWQ,EAC/C,CAACF,EAAAA,OAAcG,YAAaX,IAI5BY,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKV,EACLJ,UAAWe,EAAAA,QAAKC,EAAAA,UAAkBhB,IAC9BE,iBACS,4BAA2Be,SAAA,CAExCC,EAAAA,WAAKC,GAAG,SAASnB,UAAWoB,EAAAA,YAC5BF,EAAAA,WACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,YAAkBC,EAAAA,cAEtCH,MAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBE,gBAEtCJ,EAAAA,IAAA,MAAA,CACIC,GAAG,SACHnB,UAAWe,EAAAA,QAAKK,EAAAA,UAAkBG,EAAAA,iBAEpC"}

package/cjs/shared/dropdown-list/dropdown-label.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js");var n=require("../../theme/tokens/font.js");require("../../theme/tokens/media-query.js");var l=require("../../theme/utils/use-apply-styles.js"),a=require("../../util/string-helper.js"),s=require("./dropdown-label.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r);exports.DropdownLabel=({bold:r,displayType:d="inline",label:c,searchTerm:o,maxLines:m=2,selected:x,disabled:y,sublabel:p,truncationType:h="middle",variant:b="default"})=>{const f="small"===b?n.Font.Spec["body-size-md"]:n.Font.Spec["body-size-baseline"],T=n.Font.Spec["font-family"],{ref:j,width:S}=i.useResizeDetector(),q=t.useRef(null),L=t.useRef(null);l.useApplyStyle(q,{[s.tokens.primaryText.maxLines]:String(m)}),l.useApplyStyle(L,{[s.tokens.secondaryText.maxLines]:String(m)});const v=t.useCallback((e=>{if("inline"!==d||!S)return!1;return a.StringHelper.getTextWidth(e,`${f} '${T}'`)>S-50}),[S,d,f,T]),g=t.useMemo((()=>v(c)),[v,c]),N=t.useMemo((()=>p&&v(p)),[v,p]),k="middle"===h&&(g||N)?"next-line":d,F=r=>{if(!o)return r;const t=o.toLowerCase().trim(),i=r.toLowerCase().indexOf(t),n=i+o.length;return-1===i?r:e.jsxs(e.Fragment,{children:[c.slice(0,i),e.jsx("span",{className:s.matchedText,children:c.slice(i,n)}),c.slice(n)]})},w=r=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:u.default(s.baseTruncateStyle,s.truncateFirstLine,1===m&&s.truncateLineSingle),"aria-hidden":!0,children:F(r)}),e.jsx("div",{className:u.default(s.baseTruncateStyle,s.truncateSecondLine,1===m&&s.truncateLineSingle),"aria-hidden":!0,children:F(r)})]});return e.jsxs("div",{ref:j,className:u.default(s.label,"small"===b&&s.labelVariantSmall,"next-line"===k&&s.labelNextLine),children:[e.jsx("div",{ref:q,"aria-label":c,className:u.default(s.primaryText,r&&s.primaryTextBold,y&&s.primaryTextDisabled,!y&&x&&s.primaryTextSelected,"inline"===k&&s.primaryTextLabelInline,"end"===h&&s.primaryTextTruncateEnd),children:"middle"===h&&g?w(c):F(c)}),p&&e.jsx("div",{ref:L,"aria-label":p,className:u.default(s.secondaryText,"inline"===k&&s.secondaryTextLabelInline,"end"===h&&s.secondaryTextTruncateEnd,"next-line"===d?s.secondaryTextNextLine:s.secondaryTextInline),children:"middle"===h&&N?w(p):p})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("clsx"),t=require("react"),i=require("../../external/react-resize-detector/build/index.esm.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js");var n=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");var a=require("../../util/string-helper.js"),s=require("./dropdown-label.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=d(r);exports.DropdownLabel=({bold:r,displayType:d="inline",label:c,searchTerm:o,maxLines:m=2,selected:x,disabled:y,sublabel:p,truncationType:h="middle",variant:b="default"})=>{const f="small"===b?n.Font.Spec["body-size-md"]:n.Font.Spec["body-size-baseline"],T=n.Font.Spec["font-family-body"],{ref:j,width:q}=i.useResizeDetector(),S=t.useRef(null),L=t.useRef(null);l.useApplyStyle(S,{[s.tokens.primaryText.maxLines]:String(m)}),l.useApplyStyle(L,{[s.tokens.secondaryText.maxLines]:String(m)});const v=t.useCallback((e=>{if("inline"!==d||!q)return!1;return a.StringHelper.getTextWidth(e,`${f} '${T}'`)>q-50}),[q,d,f,T]),g=t.useMemo((()=>v(c)),[v,c]),N=t.useMemo((()=>p&&v(p)),[v,p]),k="middle"===h&&(g||N)?"next-line":d,F=r=>{if(!o)return r;const t=o.toLowerCase().trim(),i=r.toLowerCase().indexOf(t),n=i+o.length;return-1===i?r:e.jsxs(e.Fragment,{children:[c.slice(0,i),e.jsx("span",{className:s.matchedText,children:c.slice(i,n)}),c.slice(n)]})},w=r=>e.jsxs(e.Fragment,{children:[e.jsx("div",{className:u.default(s.baseTruncateStyle,s.truncateFirstLine,1===m&&s.truncateLineSingle),"aria-hidden":!0,children:F(r)}),e.jsx("div",{className:u.default(s.baseTruncateStyle,s.truncateSecondLine,1===m&&s.truncateLineSingle),"aria-hidden":!0,children:F(r)})]});return e.jsxs("div",{ref:j,className:u.default(s.label,"small"===b&&s.labelVariantSmall,"next-line"===k&&s.labelNextLine),children:[e.jsx("div",{ref:S,"aria-label":c,className:u.default(s.primaryText,r&&s.primaryTextBold,y&&s.primaryTextDisabled,!y&&x&&s.primaryTextSelected,"inline"===k&&s.primaryTextLabelInline,"end"===h&&s.primaryTextTruncateEnd),children:"middle"===h&&g?w(c):F(c)}),p&&e.jsx("div",{ref:L,"aria-label":p,className:u.default(s.secondaryText,"inline"===k&&s.secondaryTextLabelInline,"end"===h&&s.secondaryTextTruncateEnd,"next-line"===d?s.secondaryTextNextLine:s.secondaryTextInline),children:"middle"===h&&N?w(p):p})]})};
 //# sourceMappingURL=dropdown-label.js.map

package/cjs/shared/dropdown-list/dropdown-label.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.js","sources":["../../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"opBAuB6B,EACzBA,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAAA,KAAKC,KAAK,gBACVD,EAAAA,KAAKC,KAAK,sBACdC,EAAaF,EAAAA,KAAKC,KAAK,gBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,sBAEjBC,EAAiBC,EAAAA,OAAuB,MACxCC,EAAmBD,EAAAA,OAAuB,MAEhDE,EAAAA,cAAcH,EAAgB,CAC1B,CAACI,EAAAA,OAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAAA,cAAcD,EAAkB,CAC5B,CAACE,EAAAA,OAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,eACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,eAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,EAAAA,SACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,WACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAAA,IAAA,OAAA,CAAMC,UAAWC,EAAAA,YAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIE,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAC,oBACa,IAAbhD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAG,EAAAA,mBACa,IAAblD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAAA,KAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EAAAA,QACPK,EAAAA,MACY,UAAZ9C,GAAuB+C,EAAAA,kBACH,cAApBvB,GAAmCwB,EAAAA,eACtCb,SAAA,CAEDE,EAAAA,WACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EAAAA,QACPQ,cACA1D,GAAQ2D,EAAAA,gBACRrD,GAAYsD,EAAAA,qBACXtD,GAAYD,GAAYwD,EAAAA,oBACL,WAApB5B,GACI6B,EAAAA,uBACe,QAAnBtD,GAA4BuD,EAAAA,wBAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAAA,IAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EAAAA,QACPc,EAAAA,cACoB,WAApB/B,GACIgC,EAAAA,yBACe,QAAnBzD,GACI0D,EAAAA,yBACY,cAAhBjE,EACMkE,EAAAA,sBACAC,EAAAA,8BAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}
+{"version":3,"file":"dropdown-label.js","sources":["../../../../src/shared/dropdown-list/dropdown-label.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useMemo, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Font } from \"../../theme\";\nimport { useApplyStyle } from \"../../theme/utils/use-apply-styles\";\nimport { StringHelper } from \"../../util/string-helper\";\nimport * as styles from \"./dropdown-label.styles\";\nimport type { DropdownVariantType, LabelDisplayType } from \"./types\";\n\ninterface DropdownLabelProps {\n    bold?: boolean | undefined;\n    displayType?: LabelDisplayType | undefined;\n    label: string;\n    maxLines?: number | undefined;\n    searchTerm?: string | undefined;\n    selected?: boolean | undefined;\n    disabled?: boolean | undefined;\n    sublabel?: string | undefined;\n    truncationType?: \"middle\" | \"end\" | undefined;\n    variant?: DropdownVariantType | undefined;\n}\n\nexport const DropdownLabel = ({\n    bold,\n    displayType = \"inline\",\n    label,\n    searchTerm,\n    maxLines = 2,\n    selected,\n    disabled,\n    sublabel,\n    truncationType = \"middle\",\n    variant = \"default\",\n}: DropdownLabelProps): JSX.Element => {\n    const fontSize =\n        variant === \"small\"\n            ? Font.Spec[\"body-size-md\"]\n            : Font.Spec[\"body-size-baseline\"];\n    const fontFamily = Font.Spec[\"font-family-body\"];\n    const { ref, width } = useResizeDetector();\n\n    const primaryTextRef = useRef<HTMLDivElement>(null);\n    const secondaryTextRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(primaryTextRef, {\n        [styles.tokens.primaryText.maxLines]: String(maxLines),\n    });\n\n    useApplyStyle(secondaryTextRef, {\n        [styles.tokens.secondaryText.maxLines]: String(maxLines),\n    });\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const hasExceededContainer = useCallback(\n        (displayText: string) => {\n            if (displayType !== \"inline\" || !width) {\n                return false;\n            }\n\n            // best-effort attempt to check if multi-line text will overflow,\n            // rendering an actual element in the DOM might be more accurate\n            // but might not be performant for large lists\n            const textWidth = StringHelper.getTextWidth(\n                displayText,\n                `${fontSize} '${fontFamily}'`\n            );\n\n            // there's less space than expected due to word breaks, so an\n            // arbitary offset is applied\n            return textWidth > width - 50;\n        },\n        [width, displayType, fontSize, fontFamily]\n    );\n\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const shouldTruncateTitle = useMemo(\n        () => hasExceededContainer(label),\n        [hasExceededContainer, label]\n    );\n    const shouldTruncateLabel = useMemo(\n        () => sublabel && hasExceededContainer(sublabel),\n        [hasExceededContainer, sublabel]\n    );\n\n    // css cannot truncate inline elements so force the display to render\n    // them separately\n    const itemDisplayType =\n        truncationType === \"middle\" &&\n        (shouldTruncateTitle || shouldTruncateLabel)\n            ? \"next-line\"\n            : displayType;\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMatchInBold = (displayText: string) => {\n        if (!searchTerm) {\n            return displayText;\n        }\n\n        const match = searchTerm.toLowerCase().trim();\n        const startIndex = displayText.toLowerCase().indexOf(match);\n        const endIndex = startIndex + searchTerm.length;\n\n        if (startIndex === -1) {\n            return displayText;\n        }\n\n        return (\n            <>\n                {label.slice(0, startIndex)}\n                <span className={styles.matchedText}>\n                    {label.slice(startIndex, endIndex)}\n                </span>\n                {label.slice(endIndex)}\n            </>\n        );\n    };\n\n    const renderTruncatedText = (displayText: string): JSX.Element => {\n        return (\n            <>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateFirstLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n                <div\n                    className={clsx(\n                        styles.baseTruncateStyle,\n                        styles.truncateSecondLine,\n                        maxLines === 1 && styles.truncateLineSingle\n                    )}\n                    aria-hidden\n                >\n                    {renderMatchInBold(displayText)}\n                </div>\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            className={clsx(\n                styles.label,\n                variant === \"small\" && styles.labelVariantSmall,\n                itemDisplayType === \"next-line\" && styles.labelNextLine\n            )}\n        >\n            <div\n                ref={primaryTextRef}\n                aria-label={label}\n                className={clsx(\n                    styles.primaryText,\n                    bold && styles.primaryTextBold,\n                    disabled && styles.primaryTextDisabled,\n                    !disabled && selected && styles.primaryTextSelected,\n                    itemDisplayType === \"inline\" &&\n                        styles.primaryTextLabelInline,\n                    truncationType === \"end\" && styles.primaryTextTruncateEnd\n                )}\n            >\n                {truncationType === \"middle\" && shouldTruncateTitle\n                    ? renderTruncatedText(label)\n                    : renderMatchInBold(label)}\n            </div>\n            {sublabel && (\n                <div\n                    ref={secondaryTextRef}\n                    aria-label={sublabel}\n                    className={clsx(\n                        styles.secondaryText,\n                        itemDisplayType === \"inline\" &&\n                            styles.secondaryTextLabelInline,\n                        truncationType === \"end\" &&\n                            styles.secondaryTextTruncateEnd,\n                        displayType === \"next-line\"\n                            ? styles.secondaryTextNextLine\n                            : styles.secondaryTextInline\n                    )}\n                >\n                    {truncationType === \"middle\" && shouldTruncateLabel\n                        ? renderTruncatedText(sublabel)\n                        : sublabel}\n                </div>\n            )}\n        </div>\n    );\n};\n"],"names":["bold","displayType","label","searchTerm","maxLines","selected","disabled","sublabel","truncationType","variant","fontSize","Font","Spec","fontFamily","ref","width","useResizeDetector","primaryTextRef","useRef","secondaryTextRef","useApplyStyle","styles.tokens","primaryText","String","secondaryText","hasExceededContainer","useCallback","displayText","StringHelper","getTextWidth","shouldTruncateTitle","useMemo","shouldTruncateLabel","itemDisplayType","renderMatchInBold","match","toLowerCase","trim","startIndex","indexOf","endIndex","length","_jsxs","_Fragment","children","slice","_jsx","className","styles.matchedText","renderTruncatedText","clsx","styles.baseTruncateStyle","styles.truncateFirstLine","styles.truncateLineSingle","styles.truncateSecondLine","styles.label","styles.labelVariantSmall","styles.labelNextLine","styles.primaryText","styles.primaryTextBold","styles.primaryTextDisabled","styles.primaryTextSelected","styles.primaryTextLabelInline","styles.primaryTextTruncateEnd","styles.secondaryText","styles.secondaryTextLabelInline","styles.secondaryTextTruncateEnd","styles.secondaryTextNextLine","styles.secondaryTextInline"],"mappings":"wsBAuB6B,EACzBA,OACAC,cAAc,SACdC,QACAC,aACAC,WAAW,EACXC,WACAC,WACAC,WACAC,iBAAiB,SACjBC,UAAU,cAEV,MAAMC,EACU,UAAZD,EACME,EAAAA,KAAKC,KAAK,gBACVD,EAAAA,KAAKC,KAAK,sBACdC,EAAaF,EAAAA,KAAKC,KAAK,qBACvBE,IAAEA,EAAGC,MAAEA,GAAUC,sBAEjBC,EAAiBC,EAAAA,OAAuB,MACxCC,EAAmBD,EAAAA,OAAuB,MAEhDE,EAAAA,cAAcH,EAAgB,CAC1B,CAACI,EAAAA,OAAcC,YAAYlB,UAAWmB,OAAOnB,KAGjDgB,EAAAA,cAAcD,EAAkB,CAC5B,CAACE,EAAAA,OAAcG,cAAcpB,UAAWmB,OAAOnB,KAMnD,MAAMqB,EAAuBC,eACxBC,IACG,GAAoB,WAAhB1B,IAA6Bc,EAC7B,OAAO,EAaX,OAPkBa,eAAaC,aAC3BF,EACA,GAAGjB,MAAaG,MAKDE,EAAQ,EAAE,GAEjC,CAACA,EAAOd,EAAaS,EAAUG,IAM7BiB,EAAsBC,EAAAA,SACxB,IAAMN,EAAqBvB,IAC3B,CAACuB,EAAsBvB,IAErB8B,EAAsBD,WACxB,IAAMxB,GAAYkB,EAAqBlB,IACvC,CAACkB,EAAsBlB,IAKrB0B,EACiB,WAAnBzB,IACCsB,GAAuBE,GAClB,YACA/B,EAKJiC,EAAqBP,IACvB,IAAKxB,EACD,OAAOwB,EAGX,MAAMQ,EAAQhC,EAAWiC,cAAcC,OACjCC,EAAaX,EAAYS,cAAcG,QAAQJ,GAC/CK,EAAWF,EAAanC,EAAWsC,OAEzC,OAAmB,IAAfH,EACOX,EAIPe,OAAAC,EAAAA,SAAA,CAAAC,SAAA,CACK1C,EAAM2C,MAAM,EAAGP,GAChBQ,EAAAA,IAAA,OAAA,CAAMC,UAAWC,EAAAA,YAAkBJ,SAC9B1C,EAAM2C,MAAMP,EAAYE,KAE5BtC,EAAM2C,MAAML,KACd,EAILS,EAAuBtB,GAErBe,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIE,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAC,oBACa,IAAbhD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,KAEvBmB,EAAAA,IAAA,MAAA,CACIC,UAAWG,EAAAA,QACPC,EAAAA,kBACAG,EAAAA,mBACa,IAAblD,GAAkBiD,EAAAA,oBACrB,eAAA,EAAAT,SAGAV,EAAkBP,QAMnC,OACIe,EAAAA,KAAA,MAAA,CACI5B,IAAKA,EACLiC,UAAWG,EAAAA,QACPK,EAAAA,MACY,UAAZ9C,GAAuB+C,EAAAA,kBACH,cAApBvB,GAAmCwB,EAAAA,eACtCb,SAAA,CAEDE,EAAAA,WACIhC,IAAKG,EAAc,aACPf,EACZ6C,UAAWG,EAAAA,QACPQ,cACA1D,GAAQ2D,EAAAA,gBACRrD,GAAYsD,EAAAA,qBACXtD,GAAYD,GAAYwD,EAAAA,oBACL,WAApB5B,GACI6B,EAAAA,uBACe,QAAnBtD,GAA4BuD,EAAAA,wBAC/BnB,SAEmB,WAAnBpC,GAA+BsB,EAC1BmB,EAAoB/C,GACpBgC,EAAkBhC,KAE3BK,GACGuC,EAAAA,IAAA,MAAA,CACIhC,IAAKK,EAAgB,aACTZ,EACZwC,UAAWG,EAAAA,QACPc,EAAAA,cACoB,WAApB/B,GACIgC,EAAAA,yBACe,QAAnBzD,GACI0D,EAAAA,yBACY,cAAhBjE,EACMkE,EAAAA,sBACAC,EAAAA,8BAGU,WAAnB5D,GAA+BwB,EAC1BiB,EAAoB1C,GACpBA,MAGZ"}

package/cjs/shared/dropdown-list/dropdown-label.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./dropdown-label.styles_1dwmd8f.css");exports.baseTruncateStyle="b1tiox0q",exports.label="lkpcujm",exports.labelNextLine="l5tt4mi",exports.labelVariantSmall="l4129ag",exports.matchedText="m7dzxku",exports.primaryText="pi58ntt",exports.primaryTextBold="p1wtg030",exports.primaryTextDisabled="pp0vhoy",exports.primaryTextLabelInline="p1nofioz",exports.primaryTextSelected="p4cirxp",exports.primaryTextTruncateEnd="przdrhy",exports.secondaryText="s3fwc7p",exports.secondaryTextInline="swx1e24",exports.secondaryTextLabelInline="s1kq4iiq",exports.secondaryTextNextLine="s132gi2y",exports.secondaryTextTruncateEnd="s1jjyg61",exports.tokens={primaryText:{maxLines:"--fds-internal-dropdownLabel-primaryText-maxLines"},secondaryText:{maxLines:"--fds-internal-dropdownLabel-secondaryText-maxLines"}},exports.truncateFirstLine="t1y8fzo0",exports.truncateLineSingle="tgn5sfi",exports.truncateSecondLine="t18n9ljk";
+"use strict";require("./dropdown-label.styles_mloii0.css");exports.baseTruncateStyle="b1tiox0q",exports.label="lkpcujm",exports.labelNextLine="l5tt4mi",exports.labelVariantSmall="l4129ag",exports.matchedText="m7dzxku",exports.primaryText="pi58ntt",exports.primaryTextBold="p1wtg030",exports.primaryTextDisabled="pp0vhoy",exports.primaryTextLabelInline="p1nofioz",exports.primaryTextSelected="p4cirxp",exports.primaryTextTruncateEnd="przdrhy",exports.secondaryText="s3fwc7p",exports.secondaryTextInline="swx1e24",exports.secondaryTextLabelInline="s1kq4iiq",exports.secondaryTextNextLine="s132gi2y",exports.secondaryTextTruncateEnd="s1jjyg61",exports.tokens={primaryText:{maxLines:"--fds-internal-dropdownLabel-primaryText-maxLines"},secondaryText:{maxLines:"--fds-internal-dropdownLabel-secondaryText-maxLines"}},exports.truncateFirstLine="t1y8fzo0",exports.truncateLineSingle="tgn5sfi",exports.truncateSecondLine="t18n9ljk";
 //# sourceMappingURL=dropdown-label.styles.js.map

package/cjs/shared/dropdown-list/dropdown-label.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-label.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampDynamicCss } from \"../styles\";\n\nexport const tokens = {\n    primaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-primaryText-maxLines\",\n    },\n    secondaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-secondaryText-maxLines\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// PRIMARY TEXT\n// -----------------------------------------------------------------------------\nexport const primaryText = css`\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour[\"text\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const primaryTextBold = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const primaryTextSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const primaryTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const primaryTextLabelInline = css`\n    display: inline;\n`;\n\nexport const primaryTextTruncateEnd = css`\n    ${tokens.primaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.primaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// SECONDARY TEXT\n// -----------------------------------------------------------------------------\nexport const secondaryText = css`\n    color: ${Colour[\"text-subtlest\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const secondaryTextNextLine = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const secondaryTextInline = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const secondaryTextLabelInline = css`\n    display: inline;\n    margin-left: 0.5rem;\n`;\n\nexport const secondaryTextTruncateEnd = css`\n    ${tokens.secondaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.secondaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// MATCHED TEXT\n// -----------------------------------------------------------------------------\nexport const matchedText = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LABEL\n// -----------------------------------------------------------------------------\nexport const label = css`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const labelVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const labelNextLine = css`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// TRUNCATION\n// -----------------------------------------------------------------------------\nexport const baseTruncateStyle = css`\n    display: inline-block;\n    width: 100%;\n    height: 1lh;\n    overflow: hidden;\n`;\n\nexport const truncateFirstLine = css`\n    word-break: break-all;\n`;\n\nexport const truncateSecondLine = css`\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    direction: rtl;\n    text-align: right;\n`;\n\nexport const truncateLineSingle = css`\n    width: 50%;\n`;\n"],"names":["primaryText","maxLines","secondaryText"],"mappings":"0HA0G8B,yBApBZ,gCAYQ,oCAJI,8BAfN,8BA1DA,kCAOI,uCAQI,yCAIG,uCARH,yCAYG,gCAQT,sCAUM,2CAIK,yCARH,4CAaG,0BAlEf,CAClBA,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,kFAuGY,sCAWC,qCAPA"}
+{"version":3,"file":"dropdown-label.styles.js","sources":["../../../../src/shared/dropdown-list/dropdown-label.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../../theme\";\nimport { lineClampDynamicCss } from \"../styles\";\n\nexport const tokens = {\n    primaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-primaryText-maxLines\",\n    },\n    secondaryText: {\n        maxLines: \"--fds-internal-dropdownLabel-secondaryText-maxLines\",\n    },\n};\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// PRIMARY TEXT\n// -----------------------------------------------------------------------------\nexport const primaryText = css`\n    font-weight: ${Font.Spec[\"weight-regular\"]};\n    color: ${Colour[\"text\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const primaryTextBold = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const primaryTextSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const primaryTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const primaryTextLabelInline = css`\n    display: inline;\n`;\n\nexport const primaryTextTruncateEnd = css`\n    ${tokens.primaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.primaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// SECONDARY TEXT\n// -----------------------------------------------------------------------------\nexport const secondaryText = css`\n    color: ${Colour[\"text-subtlest\"]};\n    width: 100%;\n    overflow-wrap: break-word;\n`;\n\nexport const secondaryTextNextLine = css`\n    ${Font[\"body-md-semibold\"]}\n`;\n\nexport const secondaryTextInline = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const secondaryTextLabelInline = css`\n    display: inline;\n    margin-left: 0.5rem;\n`;\n\nexport const secondaryTextTruncateEnd = css`\n    ${tokens.secondaryText.maxLines}: 2;\n    ${lineClampDynamicCss(tokens.secondaryText.maxLines)}\n`;\n\n// -----------------------------------------------------------------------------\n// MATCHED TEXT\n// -----------------------------------------------------------------------------\nexport const matchedText = css`\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// LABEL\n// -----------------------------------------------------------------------------\nexport const label = css`\n    text-align: left;\n    width: 100%;\n    overflow: hidden;\n    overflow-wrap: break-word;\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const labelVariantSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const labelNextLine = css`\n    display: flex;\n    flex-direction: column;\n`;\n\n// -----------------------------------------------------------------------------\n// TRUNCATION\n// -----------------------------------------------------------------------------\nexport const baseTruncateStyle = css`\n    display: inline-block;\n    width: 100%;\n    height: 1lh;\n    overflow: hidden;\n`;\n\nexport const truncateFirstLine = css`\n    word-break: break-all;\n`;\n\nexport const truncateSecondLine = css`\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    direction: rtl;\n    text-align: right;\n`;\n\nexport const truncateLineSingle = css`\n    width: 50%;\n`;\n"],"names":["primaryText","maxLines","secondaryText"],"mappings":"yHA0G8B,yBApBZ,gCAYQ,oCAJI,8BAfN,8BA1DA,kCAOI,uCAQI,yCAIG,uCARH,yCAYG,gCAQT,sCAUM,2CAIK,yCARH,4CAaG,0BAlEf,CAClBA,YAAa,CACTC,SAAU,qDAEdC,cAAe,CACXD,SAAU,kFAuGY,sCAWC,qCAPA"}

package/cjs/shared/dropdown-list/dropdown-label.styles_mloii0.css

@@ -0,0 +1,19 @@
+.pi58ntt{font-weight:var(--fds-font-weight-regular);color:var(--fds-colour-text);width:100%;overflow-wrap:break-word;}
+.p1wtg030{font-weight:var(--fds-font-weight-semibold);}
+.p4cirxp{color:var(--fds-colour-text-selected);}
+.pp0vhoy{color:var(--fds-colour-text-disabled);}
+.p1nofioz{display:inline;}
+.przdrhy{--fds-internal-dropdownLabel-primaryText-maxLines:2;--fds-internal-dropdownLabel-primaryText-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-dropdownLabel-primaryText-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.s3fwc7p{color:var(--fds-colour-text-subtlest);width:100%;overflow-wrap:break-word;}
+.s132gi2y{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-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.swx1e24{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);}
+.s1kq4iiq{display:inline;margin-left:0.5rem;}
+.s1jjyg61{--fds-internal-dropdownLabel-secondaryText-maxLines:2;--fds-internal-dropdownLabel-secondaryText-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-dropdownLabel-secondaryText-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.m7dzxku{font-weight:var(--fds-font-weight-semibold);}
+.lkpcujm{text-align:left;width:100%;overflow:hidden;overflow-wrap:break-word;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);}
+.l4129ag{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);}
+.l5tt4mi{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.b1tiox0q{display:inline-block;width:100%;height:1lh;overflow:hidden;}
+.t1y8fzo0{word-break:break-all;}
+.t18n9ljk{text-overflow:ellipsis;white-space:nowrap;direction:rtl;text-align:right;}
+.tgn5sfi{width:50%;}

package/cjs/shared/dropdown-list/dropdown-list.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("@lifesg/react-icons/square"),n=require("@lifesg/react-icons/square-fill"),s=require("@lifesg/react-icons/square-tick-fill"),l=require("@lifesg/react-icons/tick"),i=require("clsx"),a=require("../../external/lodash/find.js"),o=require("../../external/lodash/isEqual.js"),u=require("react"),c=require("react-virtuoso"),d=require("../../markup/markup.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 m=require("../../theme/utils/use-apply-styles.js");require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var v=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var f=require("../../util/use-event.js"),p=require("../../util/use-event-listener.js"),x=require("../../util/use-mount.js"),h=require("../../util/use-previous.js"),j=require("../accessibility/index.js"),b=require("../component-loading-spinner/component-loading-spinner.js"),q=require("../dropdown-wrapper/element-with-dropdown.js"),g=require("../input-wrapper/input-wrapper.js"),I=require("./dropdown-label.js"),y=require("./dropdown-list.styles.js"),S=require("./dropdown-list-state.js"),k=require("./dropdown-search.js"),C=require("./virtuoso-components.js");function w(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var T=w(i);const L=u.forwardRef((({listItems:i,multiSelect:w,maxSelectable:L,selectedItems:N,disableItemFocus:E,itemsLoadState:D="success",itemTruncationType:R="end",itemMaxLines:A=2,labelDisplayType:F="inline",variant:B="default",listboxId:M,ariaLabel:P,matchElementWidth:V=!1,width:W,topScrollItem:O,onSelectItem:$,onSelectAll:_,onDismiss:H,onRetry:U,valueExtractor:z,listExtractor:G,renderListItem:J,renderCustomCallToAction:K,enableSearch:Q,hideNoResultsDisplay:X,noResultsDescription:Y,customLabels:Z,searchPlaceholder:ee,searchFunction:te,onSearch:re},ne)=>{const{noResultsLabel:se="No results found.",selectAllButtonLabel:le="Select all",clearAllButtonLabel:ie="Clear all"}=Z||{},ae=(null==Z?void 0:Z.searchPlaceholder)||ee||"Search",oe=(null==Z?void 0:Z.noResultsDescription)||Y,{focusedIndex:ue,setFocusedIndex:ce}=u.useContext(S.DropdownListStateContext),{elementWidth:de,setFloatingRef:me,getFloatingProps:ve,styles:fe}=q.useDropdownRender(),[pe,xe]=u.useState(""),[he,je]=u.useState(null!=i?i:[]),be=h.useCompare(D),qe=x.useIsMounted(),ge=u.useRef(null),Ie=u.useRef([]),ye=u.useRef(null),Se=u.useRef(null),ke=!!L&&!!N&&(null==N?void 0:N.length)===L;let Ce={};W?Ce={[y.tokens.containerWidth]:`${W}px`,[y.tokens.containerMinWidth]:"0px"}:V&&de&&(Ce={[y.tokens.containerWidth]:`${de}px`,[y.tokens.containerMinWidth]:`${de}px`});const we=e=>{const t=G?G(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},Te=u.useCallback((e=>!!a.default(N,(t=>o.default(t,e)))),[N]),Le=f.useEvent((()=>null==te?void 0:te(pe))),Ne=f.useEvent((()=>null==i?void 0:i.filter((e=>{const{title:t,secondaryLabel:r}=we(e),n=pe.trim().toLowerCase();return t.toLowerCase().includes(n)||r&&r.toLowerCase().includes(n)})))),Ee=u.useCallback((e=>{var t,r;if(E)return;if(ye.current)return ce(-1),void setTimeout((()=>{var e;return null===(e=ye.current)||void 0===e?void 0:e.focus()}),0);const n=null!=he?he:[];if(0===n.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,n.length-1));return null===(t=Se.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),ce(r),void setTimeout((()=>{var e;return null===(e=Ie.current[r])||void 0===e?void 0:e.focus()}),0)}const s=(null==e?void 0:e.preferSelected)?n.findIndex((e=>Te(e))):-1,l=-1!==s?s:ue>=0&&ue<n.length?ue:0;null===(r=Se.current)||void 0===r||r.scrollToIndex({index:l,align:"center"}),ce(l),setTimeout((()=>{var e;return null===(e=Ie.current[l])||void 0===e?void 0:e.focus()}),0)}),[Te,E,he,ue,ce]),De=(e,t)=>{ke&&!Te(e)||(ce(t),null==$||$(e,(e=>z?z(e):e)(e)))},Re=e=>{const t=e.target.value;xe(t),null==re||re()},Ae=()=>{var e;xe(""),null===(e=ye.current)||void 0===e||e.focus(),null==re||re()},Fe=()=>null==U?void 0:U();p.useEventListener("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),ue<he.length-1){const e=ue+1;null===(t=Ie.current[e])||void 0===t||t.focus(),ce(e)}break;case"ArrowUp":if(e.preventDefault(),ue>0){const e=ue-1;null===(r=Ie.current[e])||void 0===r||r.focus(),ce(e)}else 0===ue&&ye.current&&(ye.current.focus(),ce(-1));break;case"Space":case"Enter":document.activeElement===Ie.current[ue]&&(e.preventDefault(),he[ue]&&De(he[ue],ue))}})),u.useImperativeHandle(ne,(()=>({refocus:Ee})),[Ee]),u.useEffect((()=>{var e;if(!O)return void(null===(e=Se.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!i)return;const e=i.indexOf(O);Se.current&&-1!==e&&(Se.current.scrollToIndex({index:e}),ce(e))}),0);return()=>clearTimeout(t)}),[Ie,i,ce,O]),u.useEffect((()=>{E||qe&&be&&"success"===D&&ye.current&&(ce(-1),ye.current.focus())}),[qe,be,D,ce,E]),u.useEffect((()=>{var e;je(null!==(e=""===pe?i:te?Le():Ne())&&void 0!==e?e:[])}),[Le,Ne,i,te,pe]),u.useEffect((()=>{var e,t,r;if(qe)return;if(E||!i)return;const n=i.findIndex((e=>Te(e)));ye.current?(ce(-1),setTimeout((()=>{var e;return null===(e=ye.current)||void 0===e?void 0:e.focus()}),200)):ue>0?(null===(e=Se.current)||void 0===e||e.scrollToIndex({index:ue,align:"center"}),setTimeout((()=>{var e;return null===(e=Ie.current[ue])||void 0===e?void 0:e.focus()}),200)):-1!==n?(null===(t=Se.current)||void 0===t||t.scrollToIndex({index:n,align:"center"}),ce(n),setTimeout((()=>{var e;return null===(e=Ie.current[n])||void 0===e?void 0:e.focus()}),200)):(null===(r=Se.current)||void 0===r||r.scrollToIndex({index:0}),ce(0),setTimeout((()=>{var e;return null===(e=Ie.current[0])||void 0===e?void 0:e.focus()}),200))}),[Te,E,ue,i,qe,ce]),m.useApplyStyle(ge,Object.assign({},Ce));const Be=t=>w?ke&&!t?e.jsx(n.SquareFillIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxDisabledIndicator)}):t?e.jsx(s.SquareTickFillIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxSelectedIndicator)}):e.jsx(r.SquareIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxUnselectedIndicator)}):t?e.jsx(l.TickIcon,{"aria-hidden":!0,className:T.default(y.baseIndicatorStyle,y.selectedIndicator)}):e.jsx("div",{className:y.baseIndicatorStyle}),Me=(t,r)=>{const{title:n,secondaryLabel:s}=we(t);return e.jsx(I.DropdownLabel,{displayType:F,label:n,maxLines:A,selected:r,disabled:!r&&ke,sublabel:s,truncationType:R,variant:B})},Pe=(t,r)=>{if(!U||"success"===D){const n=Te(t),s=r===ue,l=!n&&ke;return e.jsx("li",{"aria-selected":n,"aria-multiselectable":w,"aria-disabled":l,"aria-posinset":r+1,"aria-setsize":null==he?void 0:he.length,"data-testid":"list-item",onClick:()=>De(t,r),onMouseEnter:()=>(e=>ce(e))(r),ref:e=>{Ie.current[r]=e},role:"option",tabIndex:s?0:-1,className:T.default(y.listItem,l&&y.listItemDisabled||s&&n&&y.listItemActiveSelected||s&&y.listItemActive),children:J?J(t,{selected:n}):e.jsxs(e.Fragment,{children:[Be(n),Me(t,n)]})},((e,t)=>`item_${t}__${z?z(e):e}`)(t,r))}},Ve=()=>{if((Q||te)&&"success"===D)return e.jsx(k.DropdownSearch,{ref:ye,onChange:Re,value:pe,placeholder:ae,"data-testid":"search-input","aria-label":"Enter text to search",onClear:Ae,variant:B})},We=()=>{if(N&&w&&he.length>0&&!pe&&"success"===D)return e.jsx("div",{className:y.selectAllContainer,children:e.jsx(g.BasicButton,{onClick:_,type:"button",className:T.default(y.baseButton,y.selectAllButton),children:L||0!==N.length?ie:le})})},Oe=()=>{if(!X&&(pe||!Q)&&0===he.length&&"success"===D)return e.jsxs(e.Fragment,{children:[e.jsxs("div",{"data-testid":"list-no-results",className:y.resultStateContainer,children:[e.jsx(t.ExclamationCircleFillIcon,{"data-testid":"no-result-icon",className:y.labelIcon}),se]}),oe&&e.jsx(d.Markup,{"data-testid":"no-result-desc",className:y.noResultDescContainer,children:oe})]})},$e=()=>{if(U&&"loading"===D)return e.jsxs("div",{"data-testid":"list-loading",className:y.resultStateContainer,children:[e.jsx(b.ComponentLoadingSpinner,{className:y.spinner}),"Loading..."]})},_e=()=>{if(U&&"fail"===D)return e.jsxs("div",{"data-testid":"list-fail",className:y.resultStateContainer,children:[e.jsx(t.ExclamationCircleFillIcon,{"data-testid":"load-error-icon",className:y.labelIcon}),"Failed to load. ",e.jsx(g.BasicButton,{onClick:Fe,type:"button",className:T.default(y.baseButton,y.tryAgainButton),children:"Try again."})]})},He=()=>{var t;const r="test"===process.env.NODE_ENV;return e.jsx(c.Virtuoso,Object.assign({ref:Se,style:{height:"100%"},data:he,customScrollParent:null!==(t=ge.current)&&void 0!==t?t:void 0,itemContent:(e,t)=>Pe(t,e),components:{List:C.VirtuosoList,Item:C.VirtuosoItem},context:{listProps:{id:M,role:"listbox","aria-multiselectable":w},listItemProps:{role:"none"}}},r?{initialItemCount:he.length}:{}),r?he.length:void 0)};return e.jsxs("div",Object.assign({"data-testid":"dropdown-container",ref:v.mergeRefs(ge,me)},ve(),{className:T.default(y.container,"small"===B&&y.containerVariantSmall),style:fe,children:[e.jsx(j.VisuallyHidden,{role:"status",children:P}),e.jsxs("div",{"data-testid":"dropdown-list",role:"group","aria-label":P,className:y.list,children:[Ve(),We(),Oe(),$e(),_e(),He()]}),(()=>{if(K)return e.jsx("div",{"data-testid":"custom-cta",children:K(H,he)})})()]}))}));exports.DropdownList=L;
+"use strict";var e=require("react/jsx-runtime"),t=require("@lifesg/react-icons/exclamation-circle-fill"),r=require("@lifesg/react-icons/square"),s=require("@lifesg/react-icons/square-fill"),l=require("@lifesg/react-icons/square-tick-fill"),n=require("@lifesg/react-icons/tick"),i=require("clsx"),a=require("../../external/lodash/find.js"),o=require("../../external/lodash/isEqual.js"),u=require("react"),c=require("react-virtuoso"),d=require("../../markup/markup.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 m=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 v=require("../../util/merge-refs.js");require("../../util/simple-id-generator.js"),require("../../util/string-helper.js"),require("@react-aria/live-announcer");var f=require("../../util/use-event.js"),p=require("../../util/use-event-listener.js"),h=require("../../util/use-mount.js"),x=require("../../util/use-previous.js"),j=require("../accessibility/index.js"),b=require("../component-loading-spinner/component-loading-spinner.js"),q=require("../dropdown-wrapper/element-with-dropdown.js"),I=require("../input-wrapper/input-wrapper.js"),g=require("./dropdown-label.js"),y=require("./dropdown-list.styles.js"),S=require("./dropdown-list-state.js"),C=require("./dropdown-search.js"),w=require("./virtuoso-components.js");function k(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var T=k(i);const L=u.forwardRef((({listItems:i,multiSelect:k,maxSelectable:L,selectedItems:N,disableItemFocus:E,itemsLoadState:D="success",itemTruncationType:R="end",itemMaxLines:A=2,labelDisplayType:F="inline",variant:B="default",listboxId:M,ariaLabel:P,matchElementWidth:V=!1,width:O,topScrollItem:_,onSelectItem:W,onSelectAll:$,onDismiss:H,onRetry:U,valueExtractor:z,listExtractor:G,renderListItem:J,renderCustomCallToAction:K,enableSearch:Q,hideNoResultsDisplay:X,noResultsDescription:Y,customLabels:Z,searchPlaceholder:ee,searchFunction:te,onSearch:re},se)=>{const{noResultsLabel:le="No results found.",selectAllButtonLabel:ne="Select all",clearAllButtonLabel:ie="Clear all"}=Z||{},ae=(null==Z?void 0:Z.searchPlaceholder)||ee||"Search",oe=(null==Z?void 0:Z.noResultsDescription)||Y,{focusedIndex:ue,setFocusedIndex:ce}=u.useContext(S.DropdownListStateContext),{elementWidth:de,setFloatingRef:me,getFloatingProps:ve,styles:fe}=q.useDropdownRender(),[pe,he]=u.useState(""),[xe,je]=u.useState(null!=i?i:[]),be=x.useCompare(D),qe=h.useIsMounted(),Ie=u.useRef(null),ge=u.useRef([]),ye=u.useRef(null),Se=u.useRef(null),Ce=!!L&&!!N&&(null==N?void 0:N.length)===L;let we,ke="default";O?(we=O,ke="custom"):V&&de&&(we=`${de}px`,ke="match"),m.useApplyStyle(Ie,{[y.tokens.containerWidth]:we});const Te=e=>{const t=G?G(e):null==e?void 0:e.toString();return"object"==typeof t?{title:t.title,secondaryLabel:t.secondaryLabel}:{title:null!=t?t:""}},Le=u.useCallback((e=>!!a.default(N,(t=>o.default(t,e)))),[N]),Ne=f.useEvent((()=>null==te?void 0:te(pe))),Ee=f.useEvent((()=>null==i?void 0:i.filter((e=>{const{title:t,secondaryLabel:r}=Te(e),s=pe.trim().toLowerCase();return t.toLowerCase().includes(s)||r&&r.toLowerCase().includes(s)})))),De=u.useCallback((e=>{var t,r;if(E)return;if(ye.current)return ce(-1),void setTimeout((()=>{var e;return null===(e=ye.current)||void 0===e?void 0:e.focus()}),0);const s=null!=xe?xe:[];if(0===s.length)return;if(void 0!==(null==e?void 0:e.index)){const r=Math.max(0,Math.min(e.index,s.length-1));return null===(t=Se.current)||void 0===t||t.scrollToIndex({index:r,align:"center"}),ce(r),void setTimeout((()=>{var e;return null===(e=ge.current[r])||void 0===e?void 0:e.focus()}),0)}const l=(null==e?void 0:e.preferSelected)?s.findIndex((e=>Le(e))):-1,n=-1!==l?l:ue>=0&&ue<s.length?ue:0;null===(r=Se.current)||void 0===r||r.scrollToIndex({index:n,align:"center"}),ce(n),setTimeout((()=>{var e;return null===(e=ge.current[n])||void 0===e?void 0:e.focus()}),0)}),[Le,E,xe,ue,ce]),Re=(e,t)=>{Ce&&!Le(e)||(ce(t),null==W||W(e,(e=>z?z(e):e)(e)))},Ae=e=>{const t=e.target.value;he(t),null==re||re()},Fe=()=>{var e;he(""),null===(e=ye.current)||void 0===e||e.focus(),null==re||re()},Be=()=>null==U?void 0:U();p.useEventListener("keydown",(e=>{var t,r;switch(e.code){case"ArrowDown":if(e.preventDefault(),ue<xe.length-1){const e=ue+1;null===(t=ge.current[e])||void 0===t||t.focus(),ce(e)}break;case"ArrowUp":if(e.preventDefault(),ue>0){const e=ue-1;null===(r=ge.current[e])||void 0===r||r.focus(),ce(e)}else 0===ue&&ye.current&&(ye.current.focus(),ce(-1));break;case"Space":case"Enter":document.activeElement===ge.current[ue]&&(e.preventDefault(),xe[ue]&&Re(xe[ue],ue))}})),u.useImperativeHandle(se,(()=>({refocus:De})),[De]),u.useEffect((()=>{var e;if(!_)return void(null===(e=Se.current)||void 0===e||e.scrollTo({top:0}));const t=setTimeout((()=>{if(!i)return;const e=i.indexOf(_);Se.current&&-1!==e&&(Se.current.scrollToIndex({index:e}),ce(e))}),0);return()=>clearTimeout(t)}),[ge,i,ce,_]),u.useEffect((()=>{E||qe&&be&&"success"===D&&ye.current&&(ce(-1),ye.current.focus())}),[qe,be,D,ce,E]),u.useEffect((()=>{var e;je(null!==(e=""===pe?i:te?Ne():Ee())&&void 0!==e?e:[])}),[Ne,Ee,i,te,pe]),u.useEffect((()=>{var e,t,r;if(qe)return;if(E||!i)return;const s=i.findIndex((e=>Le(e)));ye.current?(ce(-1),setTimeout((()=>{var e;return null===(e=ye.current)||void 0===e?void 0:e.focus()}),200)):ue>0?(null===(e=Se.current)||void 0===e||e.scrollToIndex({index:ue,align:"center"}),setTimeout((()=>{var e;return null===(e=ge.current[ue])||void 0===e?void 0:e.focus()}),200)):-1!==s?(null===(t=Se.current)||void 0===t||t.scrollToIndex({index:s,align:"center"}),ce(s),setTimeout((()=>{var e;return null===(e=ge.current[s])||void 0===e?void 0:e.focus()}),200)):(null===(r=Se.current)||void 0===r||r.scrollToIndex({index:0}),ce(0),setTimeout((()=>{var e;return null===(e=ge.current[0])||void 0===e?void 0:e.focus()}),200))}),[Le,E,ue,i,qe,ce]);const Me=t=>k?Ce&&!t?e.jsx(s.SquareFillIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxDisabledIndicator)}):t?e.jsx(l.SquareTickFillIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxSelectedIndicator)}):e.jsx(r.SquareIcon,{"aria-hidden":!0,className:T.default(y.baseCheckboxIndicatorStyle,y.checkboxUnselectedIndicator)}):t?e.jsx(n.TickIcon,{"aria-hidden":!0,className:T.default(y.baseIndicatorStyle,y.selectedIndicator)}):e.jsx("div",{className:y.baseIndicatorStyle}),Pe=(t,r)=>{const{title:s,secondaryLabel:l}=Te(t);return e.jsx(g.DropdownLabel,{displayType:F,label:s,maxLines:A,selected:r,disabled:!r&&Ce,sublabel:l,truncationType:R,variant:B})},Ve=(t,r)=>{if(!U||"success"===D){const s=Le(t),l=r===ue,n=!s&&Ce;return e.jsx("li",{"aria-selected":s,"aria-multiselectable":k,"aria-disabled":n,"aria-posinset":r+1,"aria-setsize":null==xe?void 0:xe.length,"data-testid":"list-item",onClick:()=>Re(t,r),onMouseEnter:()=>(e=>ce(e))(r),ref:e=>{ge.current[r]=e},role:"option",tabIndex:l?0:-1,className:T.default(y.listItem,n&&y.listItemDisabled||l&&s&&y.listItemActiveSelected||l&&y.listItemActive),children:J?J(t,{selected:s}):e.jsxs(e.Fragment,{children:[Me(s),Pe(t,s)]})},((e,t)=>`item_${t}__${z?z(e):e}`)(t,r))}},Oe=()=>{if((Q||te)&&"success"===D)return e.jsx(C.DropdownSearch,{ref:ye,onChange:Ae,value:pe,placeholder:ae,"data-testid":"search-input","aria-label":"Enter text to search",onClear:Fe,variant:B})},_e=()=>{if(N&&k&&xe.length>0&&!pe&&"success"===D)return e.jsx("div",{className:y.selectAllContainer,children:e.jsx(I.BasicButton,{onClick:$,type:"button",className:T.default(y.baseButton,y.selectAllButton),children:L||0!==N.length?ie:ne})})},We=()=>{if(!X&&(pe||!Q)&&0===xe.length&&"success"===D)return e.jsxs(e.Fragment,{children:[e.jsxs("div",{"data-testid":"list-no-results",className:y.resultStateContainer,children:[e.jsx(t.ExclamationCircleFillIcon,{"data-testid":"no-result-icon",className:y.labelIcon}),le]}),oe&&e.jsx(d.Markup,{"data-testid":"no-result-desc",className:y.noResultDescContainer,children:oe})]})},$e=()=>{if(U&&"loading"===D)return e.jsxs("div",{"data-testid":"list-loading",className:y.resultStateContainer,children:[e.jsx(b.ComponentLoadingSpinner,{className:y.spinner}),"Loading..."]})},He=()=>{if(U&&"fail"===D)return e.jsxs("div",{"data-testid":"list-fail",className:y.resultStateContainer,children:[e.jsx(t.ExclamationCircleFillIcon,{"data-testid":"load-error-icon",className:y.labelIcon}),"Failed to load. ",e.jsx(I.BasicButton,{onClick:Be,type:"button",className:T.default(y.baseButton,y.tryAgainButton),children:"Try again."})]})},Ue=()=>{var t;const r="test"===process.env.NODE_ENV;return e.jsx(c.Virtuoso,Object.assign({ref:Se,style:{height:"100%"},data:xe,customScrollParent:null!==(t=Ie.current)&&void 0!==t?t:void 0,itemContent:(e,t)=>Ve(t,e),components:{List:w.VirtuosoList,Item:w.VirtuosoItem},context:{listProps:{id:M,role:"listbox","aria-multiselectable":k},listItemProps:{role:"none"}}},r?{initialItemCount:xe.length}:{}),r?xe.length:void 0)};return e.jsxs("div",Object.assign({"data-testid":"dropdown-container",ref:v.mergeRefs(Ie,me)},ve(),{"data-width-type":ke,className:T.default(y.container,"small"===B&&y.containerVariantSmall),style:fe,children:[e.jsx(j.VisuallyHidden,{role:"status",children:P}),e.jsxs("div",{"data-testid":"dropdown-list",role:"group","aria-label":P,className:y.list,children:[Oe(),_e(),We(),$e(),He(),Ue()]}),(()=>{if(K)return e.jsx("div",{"data-testid":"custom-cta",children:K(H,xe)})})()]}))}));exports.DropdownList=L;
 //# sourceMappingURL=dropdown-list.js.map