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

package/cjs/theme/utils/use-apply-styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-apply-styles.js","sources":["../../../../src/theme/utils/use-apply-styles.ts"],"sourcesContent":["import type { RefObject } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../util\";\nimport type { CSSVariableKey } from \"../types\";\n\ntype StyleValue = string | number | null | undefined;\n\nexport type ApplyStyleMap = {\n    [K in keyof React.CSSProperties]?: StyleValue;\n} & {\n    [K in CSSVariableKey]?: StyleValue;\n} & {\n    [K in `--${string}`]?: StyleValue;\n};\n\nexport function useApplyStyle<TElement extends HTMLElement>(\n    ref: RefObject<TElement | null>,\n    styles: ApplyStyleMap\n) {\n    useIsomorphicLayoutEffect(() => {\n        const element = ref?.current;\n        if (!element) return;\n\n        Object.entries(styles).forEach(([key, value]) => {\n            if (value == null) {\n                element.style.setProperty(key, \"\");\n                return;\n            }\n\n            element.style.setProperty(key, String(value));\n        });\n    }, [ref, styles]);\n}\n"],"names":["ref","styles","useIsomorphicLayoutEffect","element","current","Object","entries","forEach","key","value","style","setProperty","String"],"mappings":"6OAeM,SACFA,EACAC,GAEAC,EAAAA,2BAA0B,KACtB,MAAMC,EAAUH,aAAG,EAAHA,EAAKI,QAChBD,GAELE,OAAOC,QAAQL,GAAQM,SAAQ,EAAEC,EAAKC,MACrB,MAATA,EAKJN,EAAQO,MAAMC,YAAYH,EAAKI,OAAOH,IAJlCN,EAAQO,MAAMC,YAAYH,EAAK,GAIU,GAC/C,GACH,CAACR,EAAKC,GACb"}
+{"version":3,"file":"use-apply-styles.js","sources":["../../../../src/theme/utils/use-apply-styles.ts"],"sourcesContent":["import type { CSSProperties, RefObject } from \"react\";\n\nimport { useIsomorphicLayoutEffect } from \"../../util\";\nimport type { CSSVariableString } from \"../types\";\n\ntype StyleValue = string | number | null | undefined;\n\ntype ExtractCleanCSSVariableName<T extends string> =\n    T extends `var(${infer Name})` ? Name : never;\ntype CSSVariableKey = ExtractCleanCSSVariableName<CSSVariableString>;\n\n/**\n * Style map accepted by `useApplyStyle`. Supports camelCase CSS properties,\n * theme CSS variable keys, and arbitrary `--custom-property` names.\n */\nexport type ApplyStyleMap =\n    | ({\n          [K in keyof CSSStyleDeclaration]?: StyleValue;\n      } & {\n          [K in CSSVariableKey]?: StyleValue;\n      } & {\n          [K in `--${string}`]?: StyleValue;\n      })\n    | CSSProperties;\n\n/**\n * List of properties that expect units but can be provided as\n * numbers through React style prop\n */\nconst numericCssStyleProperties: Set<keyof CSSStyleDeclaration> = new Set([\n    \"width\",\n    \"height\",\n    \"top\",\n    \"left\",\n    \"right\",\n    \"bottom\",\n    \"margin\",\n    \"marginTop\",\n    \"marginLeft\",\n    \"marginRight\",\n    \"marginBottom\",\n    \"padding\",\n    \"paddingTop\",\n    \"paddingLeft\",\n    \"paddingRight\",\n    \"paddingBottom\",\n]);\n\n/**\n * Normalises standard CSS property names from camelCase to kebab-case\n * - `backgroundColor` → `background-color`\n * - `WebkitLineClamp` → `-webkit-line-clamp`\n * - `--custom-variable` → `--custom-variable`\n *\n * Ref\n * https://github.com/facebook/react/blob/ad5dfc82b7107728da1430dd142f75b97b684dac/packages/react-dom-bindings/src/shared/hyphenateStyleName.js#L26\n */\nfunction normaliseCssProperty(key: string): string {\n    if (key.startsWith(\"--\")) return key;\n\n    const kebabCased = key.replace(/([A-Z])/g, \"-$1\").toLowerCase();\n\n    if (/^(o|moz|ms|webkit)-/.test(kebabCased)) {\n        return `-${kebabCased}`;\n    }\n\n    return kebabCased;\n}\n\nfunction normaliseCssValue(key: string, value: string | number): string {\n    if (\n        typeof value === \"number\" &&\n        numericCssStyleProperties.has(key as keyof CSSStyleDeclaration)\n    ) {\n        return `${value}px`;\n    }\n\n    return String(value);\n}\n\n// @catalog\n/**\n * Hook to apply styles to a HTML DOM element. Use when you need to apply inline\n * styles but cannot use the inline React `style` prop due to strict CSP rules.\n *\n * @param ref The HTML element to receive the styles\n * @param styles The styles to apply, in the same format as the React `style`\n * prop, or CSS variables. Values will be normalised to strings and numeric\n * values will have \"px\" appended for properties that typically require units.\n * @keywords css variables, hook, inline styles\n */\nexport function useApplyStyle<TElement extends HTMLElement>(\n    ref: RefObject<TElement | null>,\n    styles: ApplyStyleMap | undefined\n) {\n    useIsomorphicLayoutEffect(() => {\n        const element = ref?.current;\n        if (!element || !styles) return;\n\n        Object.entries(styles).forEach(([key, value]: [string, StyleValue]) => {\n            const normalisedKey = normaliseCssProperty(key);\n\n            if (value == null) {\n                element.style.removeProperty(normalisedKey);\n                return;\n            }\n\n            const normalisedValue = normaliseCssValue(key, value);\n            element.style.setProperty(normalisedKey, normalisedValue);\n        });\n    }, [ref, styles]);\n}\n"],"names":["numericCssStyleProperties","Set","ref","styles","useIsomorphicLayoutEffect","element","current","Object","entries","forEach","key","value","normalisedKey","startsWith","kebabCased","replace","toLowerCase","test","normaliseCssProperty","style","removeProperty","normalisedValue","has","String","normaliseCssValue","setProperty"],"mappings":"0SA6BA,MAAMA,EAA4D,IAAIC,IAAI,CACtE,QACA,SACA,MACA,OACA,QACA,SACA,SACA,YACA,aACA,cACA,eACA,UACA,aACA,cACA,eACA,wCA8CE,SACFC,EACAC,GAEAC,EAAAA,2BAA0B,KACtB,MAAMC,EAAUH,aAAG,EAAHA,EAAKI,QAChBD,GAAYF,GAEjBI,OAAOC,QAAQL,GAAQM,SAAQ,EAAEC,EAAKC,MAClC,MAAMC,EA3ClB,SAA8BF,GAC1B,GAAIA,EAAIG,WAAW,MAAO,OAAOH,EAEjC,MAAMI,EAAaJ,EAAIK,QAAQ,WAAY,OAAOC,cAElD,MAAI,sBAAsBC,KAAKH,GACpB,IAAIA,IAGRA,CACX,CAiCkCI,CAAqBR,GAE3C,GAAa,MAATC,EAEA,YADAN,EAAQc,MAAMC,eAAeR,GAIjC,MAAMS,EAtClB,SAA2BX,EAAaC,GACpC,MACqB,iBAAVA,GACPX,EAA0BsB,IAAIZ,GAEvB,GAAGC,MAGPY,OAAOZ,EAClB,CA6BoCa,CAAkBd,EAAKC,GAC/CN,EAAQc,MAAMM,YAAYb,EAAeS,EAAgB,GAC3D,GACH,CAACnB,EAAKC,GACb"}

package/cjs/theme/utils/use-design-token-override.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("../theme-provider/hooks.js"),r=require("./css-variable.js");exports.useDesignTokenOverride=({token:s,mode:a="light"})=>{const{theme:i,themeElement:o}=t.useTheme(),[d,n]=e.useState();return e.useEffect((()=>{if(!o)return;const e=document.createElement("div");e.dataset.fdsTheme=i,e.dataset.fdsThemeMode=a,e.style.display="none",o.appendChild(e);const t=r.parseCSSVariableValue(s,e);n(t||void 0),e.remove()}),[i,o,s,a]),d};
+//# sourceMappingURL=use-design-token-override.js.map

package/cjs/theme/utils/use-design-token-override.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-design-token-override.js","sources":["../../../../src/theme/utils/use-design-token-override.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { useTheme } from \"../theme-provider/hooks\";\nimport type { CSSVariableString, ResolvedThemeMode } from \"../types\";\nimport { parseCSSVariableValue } from \"./css-variable\";\n\ninterface UseDesignTokenOverrideOptions {\n    token: CSSVariableString;\n    mode?: ResolvedThemeMode;\n}\n\n/**\n * Resolves a design token's value in a specific theme mode,\n * regardless of the current active mode.\n *\n * @param options.token The CSS variable token to resolve.\n * @param options.mode The mode to resolve in.\n *\n * @returns The computed CSS value, or `undefined` when the theme element has\n * not yet mounted.\n *\n * @default options.mode \"light\"\n */\nexport const useDesignTokenOverride = ({\n    token,\n    mode = \"light\",\n}: UseDesignTokenOverrideOptions): string | undefined => {\n    const { theme, themeElement } = useTheme();\n    const [value, setValue] = useState<string | undefined>();\n\n    useEffect(() => {\n        if (!themeElement) return;\n\n        const tempEl = document.createElement(\"div\");\n        tempEl.dataset.fdsTheme = theme;\n        tempEl.dataset.fdsThemeMode = mode;\n        tempEl.style.display = \"none\";\n        themeElement.appendChild(tempEl);\n\n        const resolved = parseCSSVariableValue(token, tempEl);\n        setValue(resolved || undefined);\n\n        tempEl.remove();\n    }, [theme, themeElement, token, mode]);\n\n    return value;\n};\n"],"names":["token","mode","theme","themeElement","useTheme","value","setValue","useState","useEffect","tempEl","document","createElement","dataset","fdsTheme","fdsThemeMode","style","display","appendChild","resolved","parseCSSVariableValue","undefined","remove"],"mappings":"0IAuBsC,EAClCA,QACAC,OAAO,YAEP,MAAMC,MAAEA,EAAKC,aAAEA,GAAiBC,cACzBC,EAAOC,GAAYC,aAiB1B,OAfAC,EAAAA,WAAU,KACN,IAAKL,EAAc,OAEnB,MAAMM,EAASC,SAASC,cAAc,OACtCF,EAAOG,QAAQC,SAAWX,EAC1BO,EAAOG,QAAQE,aAAeb,EAC9BQ,EAAOM,MAAMC,QAAU,OACvBb,EAAac,YAAYR,GAEzB,MAAMS,EAAWC,EAAAA,sBAAsBnB,EAAOS,GAC9CH,EAASY,QAAYE,GAErBX,EAAOY,QAAQ,GAChB,CAACnB,EAAOC,EAAcH,EAAOC,IAEzBI,CAAK"}

package/cjs/theme/utils/use-design-token.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react"),r=require("../theme-provider/hooks.js"),s=require("./css-variable.js"),o=require("./token-resolver.js");const t=o=>{const{theme:t,mode:u,themeElement:a}=r.useTheme(),[l,i]=e.useState(void 0);return e.useEffect((()=>{a&&i(s.parseCSSVariableValue(o,a))}),[t,u,a,o]),l};exports.useDesignToken=t,exports.useResolvedTokenValue=e=>{const{value:r,fallback:s,isToken:u,normalizeCustom:a}=e,l=(e=>null==e||""===e)(r)?s:r,i=u(l)?l:void 0,n=t(i);return i?o.getResolvedValue(n,i):a(l)};
+"use strict";var e=require("react"),s=require("../theme-provider/hooks.js"),r=require("./css-variable.js");const o=e=>null==e||""===e,t=o=>{const{theme:t,mode:u,themeElement:a}=s.useTheme(),[i,l]=e.useState(void 0);return e.useEffect((()=>{a&&l(r.parseCSSVariableValue(o,a))}),[t,u,a,o]),i};exports.useDesignToken=t,exports.useResolvedTokenValue=e=>{const{value:s,fallback:r,isToken:u,normalizeCustom:a}=e,i=u(s),l=t(i?s:void 0),n=u(r),c=t(n?r:void 0);return i&&!o(l)?l:i||o(s)?n&&!o(c)?c:a(r):a(s)};
 //# sourceMappingURL=use-design-token.js.map

package/cjs/theme/utils/use-design-token.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-design-token.js","sources":["../../../../src/theme/utils/use-design-token.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { useTheme } from \"../theme-provider/hooks\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue } from \"./css-variable\";\nimport { getResolvedValue } from \"./token-resolver\";\n\nconst isEmptyValue = (value: unknown) => {\n    return value == null || value === \"\";\n};\n\nexport const useDesignToken = (\n    tokenName: CSSVariableString | undefined\n): string | undefined => {\n    const { theme, mode, themeElement } = useTheme();\n    const [value, setValue] = useState<string | undefined>(undefined);\n\n    useEffect(() => {\n        if (!themeElement) return;\n\n        setValue(parseCSSVariableValue(tokenName, themeElement));\n    }, [theme, mode, themeElement, tokenName]);\n\n    return value;\n};\n\nexport interface UseResolvedTokenValueOptions<\n    TToken extends CSSVariableString,\n    TCustom\n> {\n    /** Value used when `value` is empty. */\n    fallback: TToken | TCustom;\n    /** Type guard to identify token values. */\n    isToken: (value: unknown) => value is TToken;\n    /** Normalizer for non-token values. */\n    normalizeCustom: (value: TCustom) => string;\n    /** Candidate token or custom value. */\n    value: TToken | TCustom | null | undefined;\n}\n\n/**\n * Resolves token-aware values with consistent fallback behavior.\n * - Empty values (`null`, `undefined`, `\"\"`) use `fallback`.\n * - Token values are resolved through `useDesignToken`.\n * - Non-token values are returned via `normalizeCustom`.\n * @param options Resolution options for token/custom values.\n * @returns Resolved token value or normalized custom/fallback value.\n */\nexport const useResolvedTokenValue = <\n    TToken extends CSSVariableString,\n    TCustom\n>(\n    options: UseResolvedTokenValueOptions<TToken, TCustom>\n) => {\n    const { value, fallback, isToken, normalizeCustom } = options;\n    const effectiveValue = isEmptyValue(value) ? fallback : value;\n    const tokenString = isToken(effectiveValue) ? effectiveValue : undefined;\n    const resolvedTokenValue = useDesignToken(tokenString);\n\n    if (tokenString) {\n        return getResolvedValue(resolvedTokenValue, tokenString);\n    }\n\n    return normalizeCustom(effectiveValue as TCustom);\n};\n"],"names":["useDesignToken","tokenName","theme","mode","themeElement","useTheme","value","setValue","useState","undefined","useEffect","parseCSSVariableValue","options","fallback","isToken","normalizeCustom","effectiveValue","isEmptyValue","tokenString","resolvedTokenValue","getResolvedValue"],"mappings":"4IAOA,MAIaA,EACTC,IAEA,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,aAAEA,GAAiBC,EAAAA,YAC/BC,EAAOC,GAAYC,EAAAA,cAA6BC,GAQvD,OANAC,EAAAA,WAAU,KACDN,GAELG,EAASI,EAAAA,sBAAsBV,EAAWG,GAAc,GACzD,CAACF,EAAOC,EAAMC,EAAcH,IAExBK,CAAK,yDA6BZM,IAEA,MAAMN,MAAEA,EAAKO,SAAEA,EAAQC,QAAEA,EAAOC,gBAAEA,GAAoBH,EAChDI,EAhDW,CAACV,GACF,MAATA,GAA2B,KAAVA,EA+CDW,CAAaX,GAASO,EAAWP,EAClDY,EAAcJ,EAAQE,GAAkBA,OAAiBP,EACzDU,EAAqBnB,EAAekB,GAE1C,OAAIA,EACOE,EAAAA,iBAAiBD,EAAoBD,GAGzCH,EAAgBC,EAA0B"}
+{"version":3,"file":"use-design-token.js","sources":["../../../../src/theme/utils/use-design-token.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { useTheme } from \"../theme-provider/hooks\";\nimport type { CSSVariableString } from \"../types\";\nimport { parseCSSVariableValue } from \"./css-variable\";\n\nconst isEmptyValue = (value: unknown) => {\n    return value == null || value === \"\";\n};\n\n// @catalog\n/**\n * Resolves a design-token CSS variable to its computed string value within the\n * nearest `ThemeProvider` scope.\n *\n * @param tokenName A `CSSVariableString` token (e.g. `Colour[\"text\"]`), or\n * `undefined` to skip resolution.\n * @returns The computed CSS value, or `undefined` when the provider has not yet\n * mounted or `tokenName` is `undefined`.\n * @keywords design tokens, hook, theme, token\n */\nexport const useDesignToken = (\n    tokenName: CSSVariableString | undefined\n): string | undefined => {\n    const { theme, mode, themeElement } = useTheme();\n    const [value, setValue] = useState<string | undefined>(undefined);\n\n    useEffect(() => {\n        if (!themeElement) return;\n\n        setValue(parseCSSVariableValue(tokenName, themeElement));\n    }, [theme, mode, themeElement, tokenName]);\n\n    return value;\n};\n\nexport interface UseResolvedTokenValueOptions<\n    TToken extends CSSVariableString,\n    TCustom\n> {\n    /** Value used when `value` is empty. */\n    fallback: TToken | TCustom;\n    /** Type guard to identify token values. */\n    isToken: (value: unknown) => value is TToken;\n    /** Normalizer for non-token values. */\n    normalizeCustom: (value: TCustom) => string;\n    /** Candidate token or custom value. */\n    value: TToken | TCustom | null | undefined;\n}\n\n/**\n * Resolves token-aware values with consistent fallback behavior.\n * - Empty values (`null`, `undefined`, `\"\"`) use `fallback`.\n * - Token values are resolved through `useDesignToken`.\n * - Non-token values are returned via `normalizeCustom`.\n * @param options Resolution options for token/custom values.\n * @returns Resolved token value or normalized custom/fallback value.\n */\nexport const useResolvedTokenValue = <\n    TToken extends CSSVariableString,\n    TCustom\n>(\n    options: UseResolvedTokenValueOptions<TToken, TCustom>\n) => {\n    const { value, fallback, isToken: checkToken, normalizeCustom } = options;\n    const isToken = checkToken(value);\n    const tokenName = isToken ? value : undefined;\n    const resolvedToken = useDesignToken(tokenName);\n    const isFallbackToken = checkToken(fallback);\n    const fallbackTokenName = isFallbackToken ? fallback : undefined;\n    const resolvedFallback = useDesignToken(fallbackTokenName);\n\n    if (isToken && !isEmptyValue(resolvedToken)) {\n        return resolvedToken;\n    }\n\n    if (!isToken && !isEmptyValue(value)) {\n        return normalizeCustom(value);\n    }\n\n    if (isFallbackToken && !isEmptyValue(resolvedFallback)) {\n        return resolvedFallback;\n    }\n\n    return normalizeCustom(fallback as TCustom);\n};\n"],"names":["isEmptyValue","value","useDesignToken","tokenName","theme","mode","themeElement","useTheme","setValue","useState","undefined","useEffect","parseCSSVariableValue","options","fallback","isToken","checkToken","normalizeCustom","resolvedToken","isFallbackToken","resolvedFallback"],"mappings":"2GAMA,MAAMA,EAAgBC,GACF,MAATA,GAA2B,KAAVA,EAcfC,EACTC,IAEA,MAAMC,MAAEA,EAAKC,KAAEA,EAAIC,aAAEA,GAAiBC,EAAAA,YAC/BN,EAAOO,GAAYC,EAAAA,cAA6BC,GAQvD,OANAC,EAAAA,WAAU,KACDL,GAELE,EAASI,EAAAA,sBAAsBT,EAAWG,GAAc,GACzD,CAACF,EAAOC,EAAMC,EAAcH,IAExBF,CAAK,yDA6BZY,IAEA,MAAMZ,MAAEA,EAAKa,SAAEA,EAAUC,QAASC,EAAUC,gBAAEA,GAAoBJ,EAC5DE,EAAUC,EAAWf,GAErBiB,EAAgBhB,EADJa,EAAUd,OAAQS,GAE9BS,EAAkBH,EAAWF,GAE7BM,EAAmBlB,EADCiB,EAAkBL,OAAWJ,GAGvD,OAAIK,IAAYf,EAAakB,GAClBA,EAGNH,GAAYf,EAAaC,GAI1BkB,IAAoBnB,EAAaoB,GAC1BA,EAGJH,EAAgBH,GAPZG,EAAgBhB,EAOgB"}

package/cjs/theme/utils/use-media-query.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),i=require("../tokens/breakpoint.js"),n=require("./token-resolver.js"),a=require("./use-design-token.js");const t={[i.Breakpoint["xxs-min"]]:"0",[i.Breakpoint["xs-min"]]:"321px",[i.Breakpoint["sm-min"]]:"376px",[i.Breakpoint["md-min"]]:"481px",[i.Breakpoint["lg-min"]]:"769px",[i.Breakpoint["xl-min"]]:"1201px",[i.Breakpoint["xxl-min"]]:"1441px",[i.Breakpoint["xxs-max"]]:"320px",[i.Breakpoint["xs-max"]]:"375px",[i.Breakpoint["sm-max"]]:"480px",[i.Breakpoint["md-max"]]:"768px",[i.Breakpoint["lg-max"]]:"1200px",[i.Breakpoint["xl-max"]]:"1440px"},r=new Set([i.Breakpoint["xxs-min"],i.Breakpoint["xs-min"],i.Breakpoint["sm-min"],i.Breakpoint["md-min"],i.Breakpoint["lg-min"],i.Breakpoint["xl-min"],i.Breakpoint["xxl-min"],i.Breakpoint["xxs-max"],i.Breakpoint["xs-max"],i.Breakpoint["sm-max"],i.Breakpoint["md-max"],i.Breakpoint["lg-max"],i.Breakpoint["xl-max"]]),o=e=>n.isTokenFromSet(e,r),m=e=>i.Breakpoint[`${e}-min`],s=e=>i.Breakpoint[`${e}-max`],x=(e,i)=>{if(i)return`(${e}: ${i})`},p=e=>{if(void 0===(null==e?void 0:e.value))return;if(!0===e.value)return`(${e.feature})`;if(!1===e.value)return;const i=`${e.value}`.trim();return i?`(${e.feature}: ${i})`:void 0},u=e=>{const i=o(e)&&t[e]?t[e]:"";return a.useResolvedTokenValue({value:e,fallback:i,isToken:o,normalizeCustom:e=>e})},l=(i,n)=>{const[a,t]=e.useState((()=>((e,i)=>{var n;return e&&(null===(n=globalThis.window)||void 0===n?void 0:n.matchMedia)?globalThis.window.matchMedia(e).matches:i})(i,n)));return e.useEffect((()=>{var e;if(!i||!(null===(e=globalThis.window)||void 0===e?void 0:e.matchMedia))return void t(n);const a=globalThis.window.matchMedia(i),r=e=>{t(e.matches)};return t(a.matches),a.addEventListener("change",r),()=>{a.removeEventListener("change",r)}}),[n,i]),a},k=e=>{const{minWidth:i,maxWidth:n,clauses:a=[]}=e,t=u(i),r=u(n),o=[...[x("min-width",t),x("max-width",r)].filter((e=>!!e)),...a.map(p).filter((e=>!!e))].join(" and "),m=((e,i)=>!i&&!!e)(!!t,!!r);return l(o,m)};exports.useMaxWidthMediaQuery=e=>k({maxWidth:s(e)}),exports.useMediaQuery=k,exports.useMinWidthMediaQuery=e=>k({minWidth:m(e)}),exports.useResolvedBreakpointToken=u;
+//# sourceMappingURL=use-media-query.js.map

package/cjs/theme/utils/use-media-query.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-query.js","sources":["../../../../src/theme/utils/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { Breakpoint } from \"../tokens/breakpoint\";\nimport { isTokenFromSet } from \"./token-resolver\";\nimport { useResolvedTokenValue } from \"./use-design-token\";\n\n/** Named width breakpoint identifier used for responsive width comparisons. */\ntype BreakpointName = \"xxs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"xxl\";\ntype MaxWidthBreakpointName = Exclude<BreakpointName, \"xxl\">;\ntype MinWidthBreakpointTokenKey = `${BreakpointName}-min`;\ntype MaxWidthBreakpointTokenKey = `${MaxWidthBreakpointName}-max`;\ntype WidthBreakpointTokenKey =\n    | MinWidthBreakpointTokenKey\n    | MaxWidthBreakpointTokenKey;\ntype WidthBreakpointCSSVariableString =\n    (typeof Breakpoint)[WidthBreakpointTokenKey];\n\ntype MediaQueryFeature =\n    | \"aspect-ratio\"\n    | \"color-index\"\n    | \"color\"\n    | \"device-aspect-ratio\"\n    | \"device-height\"\n    | \"device-width\"\n    | \"grid\"\n    | \"height\"\n    | \"max-height\"\n    | \"min-height\"\n    | \"hover\"\n    | \"monochrome\"\n    | \"orientation\"\n    | \"pointer\"\n    | \"prefers-color-scheme\"\n    | \"resolution\"\n    | \"scan\"\n    | \"width\";\n\ntype MediaQueryClauseValue = string | number | boolean;\n\n/** A single media-query feature condition. */\nexport interface MediaQueryClause {\n    feature: MediaQueryFeature;\n    /**\n     * Value for the media-query feature.\n     *\n     * - A string or number emits `(feature: value)`.\n     * - `true` emits a bare feature clause (e.g. `(hover)`).\n     * - `false` or `undefined` omits the clause entirely.\n     */\n    value: MediaQueryClauseValue | undefined;\n}\n\n/** Options for `useMediaQuery`. */\nexport interface MediaQueryOptions {\n    /** Lower-bound breakpoint token. Viewport must be >= this width. */\n    minWidth?: WidthBreakpointCSSVariableString;\n    /** Upper-bound breakpoint token. Viewport must be <= this width. */\n    maxWidth?: WidthBreakpointCSSVariableString;\n    /** Extra feature conditions (e.g. `hover`, `orientation`) combined with `and`. */\n    clauses?: MediaQueryClause[];\n}\n\n/**\n * Default LifeSG breakpoint values for width-based tokens.\n * Extracted from src/theme/styles/default.css.\n */\nconst WIDTH_BREAKPOINT_DEFAULTS: Record<\n    WidthBreakpointCSSVariableString,\n    string\n> = {\n    [Breakpoint[\"xxs-min\"]]: \"0\",\n    [Breakpoint[\"xs-min\"]]: \"321px\",\n    [Breakpoint[\"sm-min\"]]: \"376px\",\n    [Breakpoint[\"md-min\"]]: \"481px\",\n    [Breakpoint[\"lg-min\"]]: \"769px\",\n    [Breakpoint[\"xl-min\"]]: \"1201px\",\n    [Breakpoint[\"xxl-min\"]]: \"1441px\",\n    [Breakpoint[\"xxs-max\"]]: \"320px\",\n    [Breakpoint[\"xs-max\"]]: \"375px\",\n    [Breakpoint[\"sm-max\"]]: \"480px\",\n    [Breakpoint[\"md-max\"]]: \"768px\",\n    [Breakpoint[\"lg-max\"]]: \"1200px\",\n    [Breakpoint[\"xl-max\"]]: \"1440px\",\n};\n\nconst WIDTH_BREAKPOINT_TOKEN_SET = new Set<WidthBreakpointCSSVariableString>([\n    Breakpoint[\"xxs-min\"],\n    Breakpoint[\"xs-min\"],\n    Breakpoint[\"sm-min\"],\n    Breakpoint[\"md-min\"],\n    Breakpoint[\"lg-min\"],\n    Breakpoint[\"xl-min\"],\n    Breakpoint[\"xxl-min\"],\n    Breakpoint[\"xxs-max\"],\n    Breakpoint[\"xs-max\"],\n    Breakpoint[\"sm-max\"],\n    Breakpoint[\"md-max\"],\n    Breakpoint[\"lg-max\"],\n    Breakpoint[\"xl-max\"],\n]);\n\nconst isBreakpointToken = (\n    value: unknown\n): value is WidthBreakpointCSSVariableString => {\n    return isTokenFromSet<WidthBreakpointCSSVariableString>(\n        value,\n        WIDTH_BREAKPOINT_TOKEN_SET\n    );\n};\n\nconst getMinWidthBreakpointToken = (breakpoint: BreakpointName) => {\n    return Breakpoint[`${breakpoint}-min`];\n};\n\nconst getMaxWidthBreakpointToken = (breakpoint: MaxWidthBreakpointName) => {\n    return Breakpoint[`${breakpoint}-max`];\n};\n\n// @catalog\n/**\n * Returns `true` when the viewport width is at or above the named breakpoint.\n *\n * @param breakpoint Named breakpoint to compare against.\n * @keywords breakpoint, hook, media query, responsive\n */\nexport const useMinWidthMediaQuery = (breakpoint: BreakpointName) =>\n    useMediaQuery({\n        minWidth: getMinWidthBreakpointToken(breakpoint),\n    });\n\n// @catalog\n/**\n * Returns `true` when the viewport width is at or below the named breakpoint.\n *\n * @param breakpoint Named breakpoint to compare against.\n * @keywords breakpoint, hook, media query, responsive\n */\nexport const useMaxWidthMediaQuery = (breakpoint: MaxWidthBreakpointName) =>\n    useMediaQuery({\n        maxWidth: getMaxWidthBreakpointToken(breakpoint),\n    });\n\nconst getMediaQueryClause = (\n    feature: \"min-width\" | \"max-width\",\n    value: string | undefined\n) => {\n    if (!value) {\n        return undefined;\n    }\n\n    return `(${feature}: ${value})`;\n};\n\nconst getCustomMediaQueryClause = (\n    clause: MediaQueryClause | null | undefined\n) => {\n    if (clause?.value === undefined) {\n        return undefined;\n    }\n\n    if (clause.value === true) {\n        return `(${clause.feature})`;\n    }\n\n    if (clause.value === false) {\n        return undefined;\n    }\n\n    const value = `${clause.value}`.trim();\n\n    if (!value) {\n        return undefined;\n    }\n\n    return `(${clause.feature}: ${value})`;\n};\n\nconst getDefaultMatch = (hasMinWidth: boolean, hasMaxWidth: boolean) => {\n    if (hasMaxWidth) {\n        return false;\n    }\n\n    if (hasMinWidth) {\n        return true;\n    }\n\n    return false;\n};\n\nconst getCurrentMatch = (queryString: string, defaultMatch: boolean) => {\n    if (!queryString) {\n        return defaultMatch;\n    }\n\n    if (!globalThis.window?.matchMedia) {\n        return defaultMatch;\n    }\n\n    return globalThis.window.matchMedia(queryString).matches;\n};\n\n// @catalog\n/**\n * Resolves a width breakpoint CSS variable token to its computed pixel string.\n *\n * @returns The resolved pixel value, falling back to default LifeSG breakpoint\n * values when the theme element is not yet mounted, or `\"\"` for unrecognised\n * tokens.\n * @keywords breakpoint, design tokens, hook\n */\nexport const useResolvedBreakpointToken = (\n    breakpointToken: WidthBreakpointCSSVariableString | undefined\n): string => {\n    const effectiveFallback =\n        isBreakpointToken(breakpointToken) &&\n        WIDTH_BREAKPOINT_DEFAULTS[breakpointToken]\n            ? WIDTH_BREAKPOINT_DEFAULTS[breakpointToken]\n            : \"\";\n\n    return useResolvedTokenValue<WidthBreakpointCSSVariableString, string>({\n        value: breakpointToken,\n        fallback: effectiveFallback,\n        isToken: isBreakpointToken,\n        normalizeCustom: (value) => value,\n    });\n};\n\nconst useMatchMediaQuery = (\n    queryString: string,\n    defaultMatch: boolean\n): boolean => {\n    const [matches, setMatches] = useState(() =>\n        getCurrentMatch(queryString, defaultMatch)\n    );\n\n    useEffect(() => {\n        if (!queryString || !globalThis.window?.matchMedia) {\n            setMatches(defaultMatch);\n            return;\n        }\n\n        const mediaQueryList = globalThis.window.matchMedia(queryString);\n        const handleChange = (event: MediaQueryListEvent) => {\n            setMatches(event.matches);\n        };\n\n        setMatches(mediaQueryList.matches);\n        mediaQueryList.addEventListener(\"change\", handleChange);\n\n        return () => {\n            mediaQueryList.removeEventListener(\"change\", handleChange);\n        };\n    }, [defaultMatch, queryString]);\n\n    return matches;\n};\n\n// @catalog\n/**\n * Reactive boolean hook that evaluates a media query built from width\n * breakpoint tokens and optional custom feature clauses.\n *\n * @returns `true` when the query matches. When `window.matchMedia` is\n * unavailable (SSR), defaults to `true` for min-width-only queries and\n * `false` for max-width-only.\n * @keywords breakpoint, hook, media query, responsive\n */\nexport const useMediaQuery = (options: MediaQueryOptions): boolean => {\n    const { minWidth, maxWidth, clauses = [] } = options;\n    const normalizedMinWidth = useResolvedBreakpointToken(minWidth);\n    const normalizedMaxWidth = useResolvedBreakpointToken(maxWidth);\n    const widthClauses = [\n        getMediaQueryClause(\"min-width\", normalizedMinWidth),\n        getMediaQueryClause(\"max-width\", normalizedMaxWidth),\n    ].filter((value): value is string => !!value);\n    const customClauses = clauses\n        .map(getCustomMediaQueryClause)\n        .filter((value): value is string => !!value);\n    const queryString = [...widthClauses, ...customClauses].join(\" and \");\n    const hasMinWidth = !!normalizedMinWidth;\n    const hasMaxWidth = !!normalizedMaxWidth;\n    const defaultMatch = getDefaultMatch(hasMinWidth, hasMaxWidth);\n\n    return useMatchMediaQuery(queryString, defaultMatch);\n};\n"],"names":["WIDTH_BREAKPOINT_DEFAULTS","Breakpoint","WIDTH_BREAKPOINT_TOKEN_SET","Set","isBreakpointToken","value","isTokenFromSet","getMinWidthBreakpointToken","breakpoint","getMaxWidthBreakpointToken","getMediaQueryClause","feature","getCustomMediaQueryClause","clause","undefined","trim","useResolvedBreakpointToken","breakpointToken","effectiveFallback","useResolvedTokenValue","fallback","isToken","normalizeCustom","useMatchMediaQuery","queryString","defaultMatch","matches","setMatches","useState","_a","globalThis","window","matchMedia","getCurrentMatch","useEffect","mediaQueryList","handleChange","event","addEventListener","removeEventListener","useMediaQuery","options","minWidth","maxWidth","clauses","normalizedMinWidth","normalizedMaxWidth","filter","map","join","hasMinWidth","hasMaxWidth","getDefaultMatch"],"mappings":"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"}

package/cjs/time-range-picker/combobox-picker/combobox-picker.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("../../form/form-label.style.js"),s=require("../../input/input.style.js"),o=require("../../input-range-select/input-range-select.style.js");require("styled-components"),require("../../util/string-helper.js"),require("../../v3_theme/index.js"),require("../../shared/dropdown-list-v2/dropdown-label.styles.js");var i=require("../../shared/dropdown-list-v2/dropdown-list.js"),l=require("../../shared/dropdown-list-v2/dropdown-list-state.js");require("../../shared/dropdown-list-v2/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../../button/button.style.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var a=require("../../util/simple-id-generator.js");require("../../shared/dropdown-wrapper/dropdown-wrapper.styles.js");var d=require("../../shared/dropdown-wrapper/element-with-dropdown.js");require("../../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../../shared/dropdown-list-v2/dropdown-search.js"),require("../../shared/dropdown-list-v2/nested-dropdown-list.styles.js"),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");var u=require("../../shared/range-input-inner-container/range-input-inner-container.js"),c=require("../../util/time-helper.js"),m=require("../common.styles.js"),p=require("./combobox-picker.styles.js");exports.ComboboxPicker=h=>{var{id:v,disabled:g=!1,error:j,value:x,format:f="12hr",readOnly:b,onChange:q,onFocus:w,onBlur:I,alignment:y="left",dropdownZIndex:C,startLimit:T,endLimit:S,interval:E=15,dropdownRootNode:k}=h,O=e.__rest(h,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","interval","dropdownRootNode"]);const[F]=t.useState((()=>a.SimpleIdGenerator.generate())),[H,_]=t.useState(null),[B,D]=t.useState(!1),[L,$]=t.useState(""),[R,N]=t.useState(""),[A,M]=t.useState(""),[W,Z]=t.useState(""),[G,K]=t.useState(""),P=t.useRef(null),z=t.useRef(null),J=t.useRef(null),Q=t.useMemo((()=>c.TimeHelper.generateTimings(E,f,T,S)),[E,f,T,S]),U=t.useMemo((()=>{if(""===W)return Q;const e=c.TimeHelper.findClosestFlooredTime(W,Q);return e?Q.slice(Q.indexOf(e)):[]}),[Q,W]),V=t.useCallback((e=>c.TimeHelper.parseInput(e,f)),[f]);t.useEffect((()=>{var e,r;if(x){const t=null!==(e=V(x.start))&&void 0!==e?e:"",n=null!==(r=V(x.end))&&void 0!==r?r:"";N(t),M(n),Z(t),K(n)}}),[x,V]),t.useEffect((()=>{if(j)return void D(!1);const e=V(R),r=V(A);if(void 0===e)$("Invalid start time");else if(void 0===r)$("Invalid end time");else{if(!(""!==e&&""!==r&&c.TimeHelper.to24Hour(r)<c.TimeHelper.to24Hour(e)))return $(""),void(document.activeElement!==z.current&&document.activeElement!==J.current||D(!0));$("End time must be after start time")}D(!1)}),[R,A,V,j]);const X=e=>{g||b||(H||B||null==w||w(),_(e),D(!0))},Y=e=>{var r;g||b||(_(e),D(!0),null===(r=("start"===e?z:J).current)||void 0===r||r.select())};function ee(e){var r;switch(e.code){case"Enter":"start"===H?re(R):"end"===H&&(B&&te(A),null===(r=J.current)||void 0===r||r.blur());break;case"Tab":ne(R,A,{})}}const re=e=>{ne(e,A,{goToNextInput:!0})},te=e=>{ne(R,e,{triggerOnBlur:!0})},ne=(e,r,{goToNextInput:t,triggerOnBlur:n})=>{var s,o,i;const l=null!==(s=V(e))&&void 0!==s?s:W,a=null!==(o=V(r))&&void 0!==o?o:G;N(l),M(a);l===W&&a===G||null==q||q({start:l,end:a}),t&&void 0!==V(e)&&(_("end"),null===(i=J.current)||void 0===i||i.select()),n&&(_(null),D(!1),null==I||I()),Z(l),K(a)},se=e=>{e.stopPropagation(),N(""),M(""),Z(""),K("");null==q||q({start:"",end:""}),_(null),D(!1)},oe=e=>{var r,t;const n=e.relatedTarget,s=(null===(r=null==n?void 0:n.matches)||void 0===r?void 0:r.call(n,"[data-floating-ui-focusable]"))||(null===(t=null==n?void 0:n.matches)||void 0===t?void 0:t.call(n,"[data-floating-ui-focus-guard]")),o=P.current&&P.current.contains(n);H&&!B&&!o&&!s&&ne(R,A,{triggerOnBlur:!0})},ie=()=>{if(!b&&!g&&((null==R?void 0:R.length)>0||(null==A?void 0:A.length)>0))return r.jsx(o.ClearIconContainer,{onClick:se,type:"button","aria-label":"Clear",children:r.jsx(s.ClearIcon,{"aria-hidden":!0})})};return r.jsxs(m.Wrapper,Object.assign({id:v},O,{children:[r.jsx(l.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!b&&!g,isOpen:B,renderElement:()=>r.jsxs(p.TimeFieldContainer,{ref:P,$disabled:g,$error:j||!!L,$readOnly:b,onBlur:oe,children:[r.jsxs(u.RangeInputInnerContainer,{error:j||!!L,currentActive:null===H?"none":H,children:[r.jsx(m.SelectorInput,{ref:z,onFocus:()=>X("start"),placeholder:"start"===H?"hh:mm":"From",onChange:e=>N(e.target.value),value:R,disabled:g,readOnly:b,"data-testid":O["data-testid"]?`${O["data-testid"]}-timepicker-selector`:"timepicker-selector",onClick:()=>Y("start"),onKeyDown:ee,autoComplete:"off","aria-label":"Start time input",type:"text",role:"combobox","aria-expanded":B,"aria-controls":F,"aria-autocomplete":"list"}),r.jsx(m.SelectorInput,{ref:J,onFocus:()=>X("end"),placeholder:"end"===H?"hh:mm":"To",onChange:e=>M(e.target.value),value:A,disabled:g,readOnly:b,"data-testid":O["data-testid"]?`${O["data-testid"]}-timepicker-selector`:"timepicker-selector",onClick:()=>Y("end"),onKeyDown:ee,autoComplete:"off","aria-label":"End time input",type:"text",role:"combobox","aria-expanded":B,"aria-controls":F,"aria-autocomplete":"list"})]}),ie()]}),renderDropdown:()=>"start"===H?r.jsx(i.DropdownList,{listItems:Q,onSelectItem:re,selectedItems:[R],topScrollItem:c.TimeHelper.findClosestFlooredTime(V(R),Q),listboxId:F,disableItemFocus:!0,matchElementWidth:!0}):r.jsx(i.DropdownList,{listItems:U,onSelectItem:te,selectedItems:[A],topScrollItem:c.TimeHelper.findClosestFlooredTime(V(A),U),listboxId:F,disableItemFocus:!0,matchElementWidth:!0}),onClose:e=>{"outside-press"===e?(_(null),D(!1),null==I||I()):ne(R,A,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===H?z:J).current)||void 0===e||e.focus(),D(!1)},offset:8,alignment:y,fitAvailableHeight:!0,customZIndex:C,rootNode:k})}),!j&&L&&r.jsxs(n.ErrorMessageContainer,{children:[r.jsx(n.ErrorIcon,{"aria-hidden":!0}),r.jsx(n.ErrorMessage,{id:v?`${v}-error-message`:"error-message",tabIndex:0,"data-testid":v?`${v}-error-message`:"error-message",children:L})]})]}))};
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),i=require("react"),a=require("../../form/form-label/form-label.js"),s=require("../../shared/accessibility/index.js");require("../../theme/theme-provider/index.js"),require("../../theme/theme-provider/context.js"),require("../../theme/tokens/border.js"),require("../../theme/tokens/colour.js"),require("../../theme/tokens/font.js"),require("../../theme/tokens/media-query.js"),require("../../util/calendar-helper.js"),require("../../external/dayjs/dayjs.min.js");var l=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");var n=require("../../shared/dropdown-list/dropdown-list.js"),o=require("../../shared/dropdown-list/dropdown-list-state.js");require("../../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../../markup/markup.js"),require("../../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../../shared/input-wrapper/input-wrapper.js");require("../../shared/dropdown-list/dropdown-list.styles_konwm.css"),require("../../shared/dropdown-list/dropdown-search.js"),require("../../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../../external/lodash/_getTag.js"),require("../../external/lodash/isArguments.js"),require("../../external/lodash/_baseGetTag.js"),require("../../external/lodash/isBuffer.js"),require("../../external/lodash/isTypedArray.js"),require("../../external/lodash/_Stack.js"),require("../../external/lodash/_SetCache.js"),require("../../external/lodash/_equalByTag.js"),require("../../shared/dropdown-list/virtuoso-components.js");var c=require("../../shared/input-wrapper/input-wrapper.styles.js"),m=require("../../shared/range-input-inner-container/range-input-inner-container.js"),p=require("../../util/time-helper.js"),h=require("../common.styles.js"),v=require("./combobox-picker.styles.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var b=f(t);exports.ComboboxPicker=t=>{var{id:f,disabled:q=!1,error:g,value:j,format:x="12hr",readOnly:y,onChange:w,onFocus:I,onBlur:T,alignment:C="left",dropdownZIndex:_,startLimit:S,endLimit:k,initialScrollStartTime:H,initialScrollEndTime:E,interval:B=15,dropdownRootNode:A,"aria-labelledby":F,"aria-describedby":O,"aria-invalid":N}=t,D=e.__rest(t,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const L=l.useId(),[M,$]=i.useState(null),[P,R]=i.useState(!1),[G,W]=i.useState(""),[Z,K]=i.useState(""),[V,z]=i.useState(""),[J,Q]=i.useState(""),[U,X]=i.useState(""),Y=i.useRef(null),ee=i.useRef(null),re=i.useRef(null),te=`${L}-listbox`,ie=`${L}-start-label`,ae=`${L}-end-label`,se=`${L}-error-message`,le=i.useMemo((()=>p.TimeHelper.generateTimings(B,x,S,k)),[B,x,S,k]),ne=i.useMemo((()=>{if(""===J)return le;const e=p.TimeHelper.findClosestFlooredTime(J,le);return e?le.slice(le.indexOf(e)):[]}),[le,J]),oe=i.useCallback((e=>p.TimeHelper.parseInput(e,x)),[x]),de=i.useMemo((()=>{var e;return null!==(e=oe(H))&&void 0!==e?e:""}),[H,oe]),ue=i.useMemo((()=>{var e;return null!==(e=oe(E))&&void 0!==e?e:""}),[E,oe]);i.useEffect((()=>{var e,r;if(j){const t=null!==(e=oe(j.start))&&void 0!==e?e:"",i=null!==(r=oe(j.end))&&void 0!==r?r:"";K(t),z(i),Q(t),X(i)}}),[j,oe]),i.useEffect((()=>{if(g)return void R(!1);const e=oe(Z),r=oe(V);if(void 0===e)W("Invalid start time");else if(void 0===r)W("Invalid end time");else{if(!(""!==e&&""!==r&&p.TimeHelper.to24Hour(r)<p.TimeHelper.to24Hour(e)))return W(""),void(document.activeElement!==ee.current&&document.activeElement!==re.current||R(!0));W("End time must be after start time")}R(!1)}),[Z,V,oe,g]);const ce=()=>"start"===M?"Selecting for: Start time":"end"===M?"Selecting for: End time":void 0,me=e=>s.concatIds(F,"start"===e?ie:ae),pe=()=>s.concatIds(O,!g&&G?se:void 0),he=e=>{q||y||(M||P||null==I||I(),$(e),R(!0))},ve=e=>{var r;q||y||($(e),R(!0),null===(r=("start"===e?ee:re).current)||void 0===r||r.select())};function fe(e){var r;switch(e.code){case"Enter":"start"===M?be(Z):"end"===M&&(P&&qe(V),null===(r=re.current)||void 0===r||r.blur());break;case"Tab":ge(Z,V,{})}}const be=e=>{ge(e,V,{goToNextInput:!0})},qe=e=>{ge(Z,e,{triggerOnBlur:!0})},ge=(e,r,{goToNextInput:t,triggerOnBlur:i})=>{var a,s,l;const n=null!==(a=oe(e))&&void 0!==a?a:J,o=null!==(s=oe(r))&&void 0!==s?s:U;K(n),z(o);n===J&&o===U||null==w||w({start:n,end:o}),t&&void 0!==oe(e)&&($("end"),null===(l=re.current)||void 0===l||l.select()),i&&($(null),R(!1),null==T||T()),Q(n),X(o)},je=e=>{e.stopPropagation(),K(""),z(""),Q(""),X("");null==w||w({start:"",end:""}),$(null),R(!1)},xe=e=>{var r,t;const i=e.relatedTarget,a=(null===(r=null==i?void 0:i.matches)||void 0===r?void 0:r.call(i,"[data-floating-ui-focusable]"))||(null===(t=null==i?void 0:i.matches)||void 0===t?void 0:t.call(i,"[data-floating-ui-focus-guard]")),s=Y.current&&Y.current.contains(i);M&&!P&&!s&&!a&&ge(Z,V,{triggerOnBlur:!0})},ye=()=>{if(!y&&!q&&((null==Z?void 0:Z.length)>0||(null==V?void 0:V.length)>0))return r.jsx("div",{className:c.clearButtonContainer,children:r.jsx(u.ClearButton,{onClick:je,type:"button","aria-label":"Clear"})})};return r.jsxs("div",Object.assign({id:f},D,{className:b.default(h.wrapper,D.className),children:[r.jsx(o.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!y&&!q,isOpen:P,renderElement:()=>r.jsxs(u.InputWrapper,{ref:Y,disabled:q,error:g||!!G,readOnly:y,onBlur:xe,role:"group","data-testid":"timepicker-container",className:v.timeFieldContainer,children:[r.jsx(s.VisuallyHidden,{id:ie,children:"Start time"}),r.jsx(s.VisuallyHidden,{id:ae,children:"End time"}),r.jsxs(m.RangeInputInnerContainer,{error:g||!!G,currentActive:null===M?"none":M,children:[r.jsx(u.BasicInput,{ref:ee,onFocus:()=>he("start"),placeholder:"start"===M?"hh:mm":"From",onChange:e=>K(e.target.value),value:Z,readOnly:y||q,"data-testid":D["data-testid"]?`${D["data-testid"]}-timepicker-selector-start`:"timepicker-selector-start",onClick:()=>ve("start"),onKeyDown:fe,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":me("start"),"aria-describedby":pe(),"aria-expanded":P&&"start"===M,"aria-controls":te,"aria-autocomplete":"list","aria-invalid":g||N||!!G,"aria-disabled":q,"aria-readonly":y,className:b.default(h.selectorInput,q&&h.selectorInputDisabled)}),r.jsx(u.BasicInput,{ref:re,onFocus:()=>he("end"),placeholder:"end"===M?"hh:mm":"To",onChange:e=>z(e.target.value),value:V,readOnly:y||q,"data-testid":D["data-testid"]?`${D["data-testid"]}-timepicker-selector-end`:"timepicker-selector-end",onClick:()=>ve("end"),onKeyDown:fe,autoComplete:"off",type:"text",role:"combobox","aria-labelledby":me("end"),"aria-describedby":pe(),"aria-expanded":P&&"end"===M,"aria-controls":te,"aria-autocomplete":"list","aria-invalid":g||N||!!G||void 0,"aria-disabled":q||void 0,"aria-readonly":y||void 0,className:b.default(h.selectorInput,q&&h.selectorInputDisabled)})]}),ye()]}),renderDropdown:()=>{if("start"===M){const e=oe(Z)||de;return r.jsx(n.DropdownList,{listItems:le,onSelectItem:be,selectedItems:[Z],topScrollItem:p.TimeHelper.findClosestFlooredTime(e,le),listboxId:te,ariaLabel:ce(),disableItemFocus:!0,matchElementWidth:!0})}{const e=oe(V)||ue;return r.jsx(n.DropdownList,{listItems:ne,onSelectItem:qe,selectedItems:[V],topScrollItem:p.TimeHelper.findClosestFlooredTime(e,ne),listboxId:te,ariaLabel:ce(),disableItemFocus:!0,matchElementWidth:!0})}},onClose:e=>{"outside-press"===e?($(null),R(!1),null==T||T()):ge(Z,V,{triggerOnBlur:!0})},onDismiss:()=>{var e;null===(e=("start"===M?ee:re).current)||void 0===e||e.focus(),R(!1)},offset:8,alignment:C,fitAvailableHeight:!0,customZIndex:_,rootNode:A})}),!g&&G&&r.jsx(a.FormErrorMessage,{id:se,tabIndex:0,"data-testid":f?`${f}-error-message`:"error-message",children:G})]}))};
 //# sourceMappingURL=combobox-picker.js.map

package/cjs/time-range-picker/combobox-picker/combobox-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-picker.js","sources":["../../../../src/time-range-picker/combobox-picker/combobox-picker.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport {\n    ErrorIcon,\n    ErrorMessage,\n    ErrorMessageContainer,\n} from \"../../form/form-label.style\";\nimport { ClearIcon } from \"../../input/input.style\";\nimport { ClearIconContainer } from \"../../input-range-select/input-range-select.style\";\nimport { DropdownListState } from \"../../shared/dropdown-list-v2\";\nimport { DropdownList } from \"../../shared/dropdown-list-v2/dropdown-list\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { SimpleIdGenerator } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, Wrapper } from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\nimport { TimeFieldContainer } from \"./combobox-picker.styles\";\n\ntype TimeRangeInputType = \"start\" | \"end\";\ninterface TimeChangeOptions {\n    goToNextInput?: boolean | undefined;\n    triggerOnBlur?: boolean | undefined;\n}\n\nexport const ComboboxPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"12hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    startLimit,\n    endLimit,\n    interval = 15,\n    dropdownRootNode,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const [activeTimeSelector, setActiveTimeSelector] =\n        useState<TimeRangeInputType | null>(null);\n    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);\n    const [validationError, setValidationError] = useState<string>(\"\");\n\n    const [startTimeVal, setStartTimeVal] = useState<string>(\"\");\n    const [endTimeVal, setEndTimeVal] = useState<string>(\"\");\n    const [initialStartTimeVal, setInitialStartTimeVal] = useState<string>(\"\");\n    const [initialEndTimeVal, setInitialEndTimeVal] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const startInputRef = useRef<HTMLInputElement>(null);\n    const endInputRef = useRef<HTMLInputElement>(null);\n\n    const startOptions = useMemo(\n        () =>\n            TimeHelper.generateTimings(interval, format, startLimit, endLimit),\n        [interval, format, startLimit, endLimit]\n    );\n    const endOptions = useMemo(() => {\n        if (initialStartTimeVal === \"\") return startOptions;\n\n        const flooredStartVal = TimeHelper.findClosestFlooredTime(\n            initialStartTimeVal,\n            startOptions\n        );\n        return flooredStartVal\n            ? startOptions.slice(startOptions.indexOf(flooredStartVal))\n            : [];\n    }, [startOptions, initialStartTimeVal]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const parseInput = useCallback(\n        (input: string): string | undefined => {\n            return TimeHelper.parseInput(input, format);\n        },\n        [format]\n    );\n\n    useEffect(() => {\n        if (value) {\n            const start = parseInput(value.start) ?? \"\";\n            const end = parseInput(value.end) ?? \"\";\n\n            setStartTimeVal(start);\n            setEndTimeVal(end);\n            setInitialStartTimeVal(start);\n            setInitialEndTimeVal(end);\n        }\n    }, [value, parseInput]);\n\n    // Validation for keyboard input\n    useEffect(() => {\n        if (error) {\n            setDropdownOpen(false);\n            return;\n        }\n\n        const start = parseInput(startTimeVal);\n        const end = parseInput(endTimeVal);\n\n        if (start === undefined) {\n            setValidationError(\"Invalid start time\");\n        } else if (end === undefined) {\n            setValidationError(\"Invalid end time\");\n        } else if (\n            start !== \"\" &&\n            end !== \"\" &&\n            TimeHelper.to24Hour(end) < TimeHelper.to24Hour(start)\n        ) {\n            setValidationError(\"End time must be after start time\");\n        } else {\n            setValidationError(\"\");\n            // Re-open dropdown if error was corrected\n            if (\n                document.activeElement === startInputRef.current ||\n                document.activeElement === endInputRef.current\n            ) {\n                setDropdownOpen(true);\n            }\n            return;\n        }\n\n        // Hide dropdown so error message is visible\n        setDropdownOpen(false);\n    }, [startTimeVal, endTimeVal, parseInput, error]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFocus = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        // Only run onFocus if not already focused\n        if (!activeTimeSelector && !dropdownOpen) onFocus?.();\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n    };\n\n    const handleInputClick = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n        (selector === \"start\" ? startInputRef : endInputRef).current?.select();\n    };\n\n    function handleKeyDownEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n        switch (event.code) {\n            case \"Enter\":\n                if (activeTimeSelector === \"start\") {\n                    handleStartTime(startTimeVal);\n                } else if (activeTimeSelector === \"end\") {\n                    // Let handleBlur call handleTimeChange instead\n                    if (dropdownOpen) handleEndTime(endTimeVal);\n                    endInputRef.current?.blur();\n                }\n                break;\n            case \"Tab\":\n                handleTimeChange(startTimeVal, endTimeVal, {});\n                break;\n            default:\n                break;\n        }\n    }\n\n    const handleStartTime = (input: string) => {\n        handleTimeChange(input, endTimeVal, { goToNextInput: true });\n    };\n\n    const handleEndTime = (input: string) => {\n        handleTimeChange(startTimeVal, input, { triggerOnBlur: true });\n    };\n\n    const handleTimeChange = (\n        startInput: string,\n        endInput: string,\n        {\n            goToNextInput, // Used by handleStart to move to end input automatically\n            triggerOnBlur, // Used by handleEnd/handleClear to trigger onBlur\n        }: TimeChangeOptions\n    ) => {\n        const start = parseInput(startInput) ?? initialStartTimeVal;\n        const end = parseInput(endInput) ?? initialEndTimeVal;\n\n        setStartTimeVal(start);\n        setEndTimeVal(end);\n\n        const timeValue: TimeRangePickerValue = { start, end };\n\n        // Trigger onChange if values have changed\n        if (start !== initialStartTimeVal || end !== initialEndTimeVal) {\n            onChange?.(timeValue);\n        }\n\n        // Go to end input only if start is a valid time\n        if (goToNextInput && parseInput(startInput) !== undefined) {\n            setActiveTimeSelector(\"end\");\n            endInputRef.current?.select();\n        }\n\n        if (triggerOnBlur) {\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        }\n\n        setInitialStartTimeVal(start);\n        setInitialEndTimeVal(end);\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setStartTimeVal(\"\");\n        setEndTimeVal(\"\");\n        setInitialStartTimeVal(\"\");\n        setInitialEndTimeVal(\"\");\n\n        const timeValue: TimeRangePickerValue = {\n            start: \"\",\n            end: \"\",\n        };\n\n        onChange?.(timeValue);\n        setActiveTimeSelector(null);\n        setDropdownOpen(false);\n    };\n\n    const handleDismiss = () => {\n        (activeTimeSelector === \"start\"\n            ? startInputRef\n            : endInputRef\n        ).current?.focus();\n        setDropdownOpen(false);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLDivElement, Element>) => {\n        const target = event.relatedTarget as HTMLElement;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            activeTimeSelector &&\n            !dropdownOpen &&\n            !isInsideNode &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed) {\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // NOTE: Dropdown dismissal (esc) does not trigger onClose\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        if (reason === \"outside-press\") {\n            // No handleTimeChange to avoid duplicate call from handleBlur\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        } else {\n            // Dropdown closed via exiting component (eg. tab)\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderClearButton = () => {\n        if (\n            !readOnly &&\n            !disabled &&\n            (startTimeVal?.length > 0 || endTimeVal?.length > 0)\n        ) {\n            return (\n                <ClearIconContainer\n                    onClick={handleClear}\n                    type=\"button\"\n                    aria-label=\"Clear\"\n                >\n                    <ClearIcon aria-hidden />\n                </ClearIconContainer>\n            );\n        }\n    };\n\n    const renderDropdown = () => {\n        if (activeTimeSelector === \"start\") {\n            return (\n                <DropdownList\n                    listItems={startOptions}\n                    onSelectItem={handleStartTime}\n                    selectedItems={[startTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        parseInput(startTimeVal),\n                        startOptions\n                    )}\n                    listboxId={internalId}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        } else {\n            return (\n                <DropdownList\n                    listItems={endOptions}\n                    onSelectItem={handleEndTime}\n                    selectedItems={[endTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        parseInput(endTimeVal),\n                        endOptions\n                    )}\n                    listboxId={internalId}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        }\n    };\n\n    const renderElement = () => (\n        <TimeFieldContainer\n            ref={nodeRef}\n            $disabled={disabled}\n            $error={error || !!validationError}\n            $readOnly={readOnly}\n            onBlur={handleBlur}\n        >\n            <RangeInputInnerContainer\n                error={error || !!validationError}\n                currentActive={\n                    activeTimeSelector === null ? \"none\" : activeTimeSelector\n                }\n            >\n                {/* From */}\n                <SelectorInput\n                    ref={startInputRef}\n                    onFocus={() => handleInputFocus(\"start\")}\n                    placeholder={\n                        activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n                    }\n                    onChange={(e) => setStartTimeVal(e.target.value)}\n                    value={startTimeVal}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector`\n                            : \"timepicker-selector\"\n                    }\n                    onClick={() => handleInputClick(\"start\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    aria-label=\"Start time input\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={dropdownOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                />\n                {/* To */}\n                <SelectorInput\n                    ref={endInputRef}\n                    onFocus={() => handleInputFocus(\"end\")}\n                    placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n                    onChange={(e) => setEndTimeVal(e.target.value)}\n                    value={endTimeVal}\n                    disabled={disabled}\n                    readOnly={readOnly}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector`\n                            : \"timepicker-selector\"\n                    }\n                    onClick={() => handleInputClick(\"end\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    aria-label=\"End time input\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-expanded={dropdownOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                />\n            </RangeInputInnerContainer>\n            {renderClearButton()}\n        </TimeFieldContainer>\n    );\n\n    const renderError = () =>\n        // Only display internal error message if user does not provide one\n        !error &&\n        validationError && (\n            <ErrorMessageContainer>\n                <ErrorIcon aria-hidden />\n                <ErrorMessage\n                    id={id ? `${id}-error-message` : \"error-message\"}\n                    tabIndex={0}\n                    data-testid={id ? `${id}-error-message` : \"error-message\"}\n                >\n                    {validationError}\n                </ErrorMessage>\n            </ErrorMessageContainer>\n        );\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={dropdownOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n            {renderError()}\n        </Wrapper>\n    );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","interval","dropdownRootNode","otherProps","__rest","internalId","useState","SimpleIdGenerator","generate","activeTimeSelector","setActiveTimeSelector","dropdownOpen","setDropdownOpen","validationError","setValidationError","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","initialStartTimeVal","setInitialStartTimeVal","initialEndTimeVal","setInitialEndTimeVal","nodeRef","useRef","startInputRef","endInputRef","startOptions","useMemo","TimeHelper","generateTimings","endOptions","flooredStartVal","findClosestFlooredTime","slice","indexOf","parseInput","useCallback","input","useEffect","start","end","_b","undefined","to24Hour","document","activeElement","current","handleInputFocus","selector","handleInputClick","select","handleKeyDownEvent","event","code","handleStartTime","handleEndTime","blur","handleTimeChange","goToNextInput","triggerOnBlur","startInput","endInput","_c","handleClear","stopPropagation","handleBlur","target","relatedTarget","isFloatingElement","matches","call","isInsideNode","contains","renderClearButton","length","_jsx","ClearIconContainer","onClick","type","children","ClearIcon","_jsxs","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","TimeFieldContainer","ref","$error","$readOnly","RangeInputInnerContainer","currentActive","SelectorInput","placeholder","e","onKeyDown","autoComplete","role","renderDropdown","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","listboxId","disableItemFocus","matchElementWidth","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","ErrorMessageContainer","ErrorIcon","ErrorMessage","tabIndex"],"mappings":"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"}
+{"version":3,"file":"combobox-picker.js","sources":["../../../../src/time-range-picker/combobox-picker/combobox-picker.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { FormErrorMessage } from \"../../form/form-label\";\nimport { concatIds, VisuallyHidden } from \"../../shared/accessibility\";\nimport { DropdownListState } from \"../../shared/dropdown-list\";\nimport { DropdownList } from \"../../shared/dropdown-list/dropdown-list\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport {\n    BasicInput,\n    ClearButton,\n    InputWrapper,\n} from \"../../shared/input-wrapper\";\nimport * as inputWrapperStyles from \"../../shared/input-wrapper/input-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as commonStyles from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\nimport * as styles from \"./combobox-picker.styles\";\n\ntype TimeRangeInputType = \"start\" | \"end\";\ninterface TimeChangeOptions {\n    goToNextInput?: boolean | undefined;\n    triggerOnBlur?: boolean | undefined;\n}\n\nexport const ComboboxPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"12hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    startLimit,\n    endLimit,\n    initialScrollStartTime,\n    initialScrollEndTime,\n    interval = 15,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const internalId = useId();\n    const [activeTimeSelector, setActiveTimeSelector] =\n        useState<TimeRangeInputType | null>(null);\n    const [dropdownOpen, setDropdownOpen] = useState<boolean>(false);\n    const [validationError, setValidationError] = useState<string>(\"\");\n\n    const [startTimeVal, setStartTimeVal] = useState<string>(\"\");\n    const [endTimeVal, setEndTimeVal] = useState<string>(\"\");\n    const [initialStartTimeVal, setInitialStartTimeVal] = useState<string>(\"\");\n    const [initialEndTimeVal, setInitialEndTimeVal] = useState<string>(\"\");\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const startInputRef = useRef<HTMLInputElement>(null);\n    const endInputRef = useRef<HTMLInputElement>(null);\n\n    const listboxId = `${internalId}-listbox`;\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n    const errorId = `${internalId}-error-message`;\n\n    const startOptions = useMemo(\n        () =>\n            TimeHelper.generateTimings(interval, format, startLimit, endLimit),\n        [interval, format, startLimit, endLimit]\n    );\n    const endOptions = useMemo(() => {\n        if (initialStartTimeVal === \"\") return startOptions;\n\n        const flooredStartVal = TimeHelper.findClosestFlooredTime(\n            initialStartTimeVal,\n            startOptions\n        );\n        return flooredStartVal\n            ? startOptions.slice(startOptions.indexOf(flooredStartVal))\n            : [];\n    }, [startOptions, initialStartTimeVal]);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const parseInput = useCallback(\n        (input: string | undefined): string | undefined => {\n            return TimeHelper.parseInput(input, format);\n        },\n        [format]\n    );\n\n    const parsedInitialStartScrollTime = useMemo(\n        () => parseInput(initialScrollStartTime) ?? \"\",\n        [initialScrollStartTime, parseInput]\n    );\n\n    const parsedInitialEndScrollTime = useMemo(\n        () => parseInput(initialScrollEndTime) ?? \"\",\n        [initialScrollEndTime, parseInput]\n    );\n\n    useEffect(() => {\n        if (value) {\n            const start = parseInput(value.start) ?? \"\";\n            const end = parseInput(value.end) ?? \"\";\n\n            setStartTimeVal(start);\n            setEndTimeVal(end);\n            setInitialStartTimeVal(start);\n            setInitialEndTimeVal(end);\n        }\n    }, [value, parseInput]);\n\n    // Validation for keyboard input\n    useEffect(() => {\n        if (error) {\n            setDropdownOpen(false);\n            return;\n        }\n\n        const start = parseInput(startTimeVal);\n        const end = parseInput(endTimeVal);\n\n        if (start === undefined) {\n            setValidationError(\"Invalid start time\");\n        } else if (end === undefined) {\n            setValidationError(\"Invalid end time\");\n        } else if (\n            start !== \"\" &&\n            end !== \"\" &&\n            TimeHelper.to24Hour(end) < TimeHelper.to24Hour(start)\n        ) {\n            setValidationError(\"End time must be after start time\");\n        } else {\n            setValidationError(\"\");\n            // Re-open dropdown if error was corrected\n            if (\n                document.activeElement === startInputRef.current ||\n                document.activeElement === endInputRef.current\n            ) {\n                setDropdownOpen(true);\n            }\n            return;\n        }\n\n        // Hide dropdown so error message is visible\n        setDropdownOpen(false);\n    }, [startTimeVal, endTimeVal, parseInput, error]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (activeTimeSelector === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (activeTimeSelector === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: TimeRangeInputType) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(\n            ariaDescribedBy,\n            !error && validationError ? errorId : undefined\n        );\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFocus = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        // Only run onFocus if not already focused\n        if (!activeTimeSelector && !dropdownOpen) onFocus?.();\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n    };\n\n    const handleInputClick = (selector: TimeRangeInputType) => {\n        if (disabled || readOnly) return;\n\n        setActiveTimeSelector(selector);\n        setDropdownOpen(true);\n        (selector === \"start\" ? startInputRef : endInputRef).current?.select();\n    };\n\n    function handleKeyDownEvent(event: React.KeyboardEvent<HTMLInputElement>) {\n        switch (event.code) {\n            case \"Enter\":\n                if (activeTimeSelector === \"start\") {\n                    handleStartTime(startTimeVal);\n                } else if (activeTimeSelector === \"end\") {\n                    // Let handleBlur call handleTimeChange instead\n                    if (dropdownOpen) handleEndTime(endTimeVal);\n                    endInputRef.current?.blur();\n                }\n                break;\n            case \"Tab\":\n                handleTimeChange(startTimeVal, endTimeVal, {});\n                break;\n            default:\n                break;\n        }\n    }\n\n    const handleStartTime = (input: string) => {\n        handleTimeChange(input, endTimeVal, { goToNextInput: true });\n    };\n\n    const handleEndTime = (input: string) => {\n        handleTimeChange(startTimeVal, input, { triggerOnBlur: true });\n    };\n\n    const handleTimeChange = (\n        startInput: string,\n        endInput: string,\n        {\n            goToNextInput, // Used by handleStart to move to end input automatically\n            triggerOnBlur, // Used by handleEnd/handleClear to trigger onBlur\n        }: TimeChangeOptions\n    ) => {\n        const start = parseInput(startInput) ?? initialStartTimeVal;\n        const end = parseInput(endInput) ?? initialEndTimeVal;\n\n        setStartTimeVal(start);\n        setEndTimeVal(end);\n\n        const timeValue: TimeRangePickerValue = { start, end };\n\n        // Trigger onChange if values have changed\n        if (start !== initialStartTimeVal || end !== initialEndTimeVal) {\n            onChange?.(timeValue);\n        }\n\n        // Go to end input only if start is a valid time\n        if (goToNextInput && parseInput(startInput) !== undefined) {\n            setActiveTimeSelector(\"end\");\n            endInputRef.current?.select();\n        }\n\n        if (triggerOnBlur) {\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        }\n\n        setInitialStartTimeVal(start);\n        setInitialEndTimeVal(end);\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        setStartTimeVal(\"\");\n        setEndTimeVal(\"\");\n        setInitialStartTimeVal(\"\");\n        setInitialEndTimeVal(\"\");\n\n        const timeValue: TimeRangePickerValue = {\n            start: \"\",\n            end: \"\",\n        };\n\n        onChange?.(timeValue);\n        setActiveTimeSelector(null);\n        setDropdownOpen(false);\n    };\n\n    const handleDismiss = () => {\n        (activeTimeSelector === \"start\"\n            ? startInputRef\n            : endInputRef\n        ).current?.focus();\n        setDropdownOpen(false);\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLDivElement, Element>) => {\n        const target = event.relatedTarget as HTMLElement;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode =\n            nodeRef.current && nodeRef.current.contains(target);\n\n        // Condition when the calendar is closed and focus moved outside the component\n        const shouldBlurWhenClosed =\n            activeTimeSelector &&\n            !dropdownOpen &&\n            !isInsideNode &&\n            !isFloatingElement;\n\n        if (shouldBlurWhenClosed) {\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // NOTE: Dropdown dismissal (esc) does not trigger onClose\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        if (reason === \"outside-press\") {\n            // No handleTimeChange to avoid duplicate call from handleBlur\n            setActiveTimeSelector(null);\n            setDropdownOpen(false);\n            onBlur?.();\n        } else {\n            // Dropdown closed via exiting component (eg. tab)\n            handleTimeChange(startTimeVal, endTimeVal, { triggerOnBlur: true });\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderClearButton = () => {\n        if (\n            !readOnly &&\n            !disabled &&\n            (startTimeVal?.length > 0 || endTimeVal?.length > 0)\n        ) {\n            return (\n                <div className={inputWrapperStyles.clearButtonContainer}>\n                    <ClearButton\n                        onClick={handleClear}\n                        type=\"button\"\n                        aria-label=\"Clear\"\n                    />\n                </div>\n            );\n        }\n    };\n\n    const renderDropdown = () => {\n        if (activeTimeSelector === \"start\") {\n            // Prioritise start time value. If non existent, use initial scroll time\n            // If both are non existent, DropdownList will default to first option\n            const startScrollTime =\n                parseInput(startTimeVal) || parsedInitialStartScrollTime;\n\n            return (\n                <DropdownList\n                    listItems={startOptions}\n                    onSelectItem={handleStartTime}\n                    selectedItems={[startTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        startScrollTime,\n                        startOptions\n                    )}\n                    listboxId={listboxId}\n                    ariaLabel={getDropdownAriaLabel()}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        } else {\n            const endScrollTime =\n                parseInput(endTimeVal) || parsedInitialEndScrollTime;\n\n            return (\n                <DropdownList\n                    listItems={endOptions}\n                    onSelectItem={handleEndTime}\n                    selectedItems={[endTimeVal]}\n                    topScrollItem={TimeHelper.findClosestFlooredTime(\n                        endScrollTime,\n                        endOptions\n                    )}\n                    listboxId={listboxId}\n                    ariaLabel={getDropdownAriaLabel()}\n                    disableItemFocus\n                    matchElementWidth\n                />\n            );\n        }\n    };\n\n    const renderElement = () => (\n        <InputWrapper\n            ref={nodeRef}\n            disabled={disabled}\n            error={error || !!validationError}\n            readOnly={readOnly}\n            onBlur={handleBlur}\n            role=\"group\"\n            data-testid=\"timepicker-container\"\n            className={styles.timeFieldContainer}\n        >\n            <VisuallyHidden id={startLabelId}>Start time</VisuallyHidden>\n            <VisuallyHidden id={endLabelId}>End time</VisuallyHidden>\n\n            <RangeInputInnerContainer\n                error={error || !!validationError}\n                currentActive={\n                    activeTimeSelector === null ? \"none\" : activeTimeSelector\n                }\n            >\n                {/* From */}\n                <BasicInput\n                    ref={startInputRef}\n                    onFocus={() => handleInputFocus(\"start\")}\n                    placeholder={\n                        activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n                    }\n                    onChange={(e) => setStartTimeVal(e.target.value)}\n                    value={startTimeVal}\n                    readOnly={readOnly || disabled}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-start`\n                            : \"timepicker-selector-start\"\n                    }\n                    onClick={() => handleInputClick(\"start\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    aria-expanded={\n                        dropdownOpen && activeTimeSelector === \"start\"\n                    }\n                    aria-controls={listboxId}\n                    aria-autocomplete=\"list\"\n                    aria-invalid={error || ariaInvalid || !!validationError}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    className={clsx(\n                        commonStyles.selectorInput,\n                        disabled && commonStyles.selectorInputDisabled\n                    )}\n                />\n                {/* To */}\n                <BasicInput\n                    ref={endInputRef}\n                    onFocus={() => handleInputFocus(\"end\")}\n                    placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n                    onChange={(e) => setEndTimeVal(e.target.value)}\n                    value={endTimeVal}\n                    readOnly={readOnly || disabled}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-end`\n                            : \"timepicker-selector-end\"\n                    }\n                    onClick={() => handleInputClick(\"end\")}\n                    onKeyDown={handleKeyDownEvent}\n                    autoComplete=\"off\"\n                    type=\"text\"\n                    role=\"combobox\"\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    aria-expanded={dropdownOpen && activeTimeSelector === \"end\"}\n                    aria-controls={listboxId}\n                    aria-autocomplete=\"list\"\n                    aria-invalid={\n                        error || ariaInvalid || !!validationError || undefined\n                    }\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    className={clsx(\n                        commonStyles.selectorInput,\n                        disabled && commonStyles.selectorInputDisabled\n                    )}\n                />\n            </RangeInputInnerContainer>\n            {renderClearButton()}\n        </InputWrapper>\n    );\n\n    const renderError = () =>\n        // Only display internal error message if user does not provide one\n        !error &&\n        validationError && (\n            <FormErrorMessage\n                id={errorId}\n                tabIndex={0}\n                data-testid={id ? `${id}-error-message` : \"error-message\"}\n            >\n                {validationError}\n            </FormErrorMessage>\n        );\n\n    return (\n        <div\n            id={id}\n            {...otherProps}\n            className={clsx(commonStyles.wrapper, otherProps.className)}\n        >\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={dropdownOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n            {renderError()}\n        </div>\n    );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","initialScrollStartTime","initialScrollEndTime","interval","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","internalId","useId","activeTimeSelector","setActiveTimeSelector","useState","dropdownOpen","setDropdownOpen","validationError","setValidationError","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","initialStartTimeVal","setInitialStartTimeVal","initialEndTimeVal","setInitialEndTimeVal","nodeRef","useRef","startInputRef","endInputRef","listboxId","startLabelId","endLabelId","errorId","startOptions","useMemo","TimeHelper","generateTimings","endOptions","flooredStartVal","findClosestFlooredTime","slice","indexOf","parseInput","useCallback","input","parsedInitialStartScrollTime","parsedInitialEndScrollTime","useEffect","start","end","_b","undefined","to24Hour","document","activeElement","current","getDropdownAriaLabel","getInputLabelledBy","type","concatIds","getInputDescribedBy","handleInputFocus","selector","handleInputClick","select","handleKeyDownEvent","event","code","handleStartTime","handleEndTime","blur","handleTimeChange","goToNextInput","triggerOnBlur","startInput","endInput","_c","handleClear","stopPropagation","handleBlur","target","relatedTarget","isFloatingElement","matches","call","isInsideNode","contains","renderClearButton","length","_jsx","className","inputWrapperStyles.clearButtonContainer","children","ClearButton","onClick","_jsxs","Object","assign","clsx","commonStyles.wrapper","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","ref","role","styles.timeFieldContainer","VisuallyHidden","RangeInputInnerContainer","currentActive","BasicInput","placeholder","e","onKeyDown","autoComplete","commonStyles.selectorInput","commonStyles.selectorInputDisabled","renderDropdown","startScrollTime","DropdownList","listItems","onSelectItem","selectedItems","topScrollItem","ariaLabel","disableItemFocus","matchElementWidth","endScrollTime","onClose","reason","onDismiss","focus","offset","fitAvailableHeight","customZIndex","rootNode","FormErrorMessage","tabIndex"],"mappings":"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"}

package/cjs/time-range-picker/combobox-picker/combobox-picker.styles.js

@@ -1,7 +1,2 @@
-"use strict";var e=require("styled-components"),r=require("../../shared/input-wrapper/input-wrapper.js"),i=require("../../v3_theme/index.js");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=t(e).default(r.InputWrapper)`
-    height: 3rem;
-    gap: ${i.V3_Spacing["spacing-8"]};
-    // space for clear icon
-    padding-right: calc(1.25rem + ${i.V3_Spacing["spacing-20"]});
-`;exports.TimeFieldContainer=n;
+"use strict";require("./combobox-picker.styles_7i9vso.css");exports.timeFieldContainer="t1wpl53s";
 //# sourceMappingURL=combobox-picker.styles.js.map

package/cjs/time-range-picker/combobox-picker/combobox-picker.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"combobox-picker.styles.js","sources":["../../../../src/time-range-picker/combobox-picker/combobox-picker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport { InputWrapper } from \"../../shared/input-wrapper/input-wrapper\";\nimport { V3_Spacing } from \"../../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TimeFieldContainer = styled(InputWrapper)`\n    height: 3rem;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n    // space for clear icon\n    padding-right: calc(1.25rem + ${V3_Spacing[\"spacing-20\"]});\n`;\n"],"names":["TimeFieldContainer","styled","InputWrapper","V3_Spacing"],"mappings":"4NAQaA,OAAqBC,QAAOC,EAAAA,aAAa;;WAE3CC,EAAAA,WAAW;;oCAEcA,EAAAA,WAAW;"}
+{"version":3,"file":"combobox-picker.styles.js","sources":["../../../../src/time-range-picker/combobox-picker/combobox-picker.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const timeFieldContainer = css`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n    /* space for clear icon */\n    padding-right: calc(1.25rem + ${Spacing[\"spacing-20\"]});\n`;\n"],"names":[],"mappings":"wIAO+B"}

package/cjs/time-range-picker/combobox-picker/combobox-picker.styles_7i9vso.css

@@ -0,0 +1 @@
+@layer fds{.t1wpl53s{height:3rem;gap:var(--fds-spacing-8);padding-right:calc(1.25rem + var(--fds-spacing-20));}}

package/cjs/time-range-picker/common.styles.js

@@ -1,11 +1,2 @@
-"use strict";var e=require("styled-components"),t=require("../shared/input-wrapper/input-wrapper.js"),r=require("../v3_theme/index.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=p(e);const a=i.default.div`
-    position: relative;
-`,n=i.default(t.InputWrapper)`
-    height: 3rem;
-    gap: ${r.V3_Spacing["spacing-8"]};
-`,u=i.default(t.BasicInput)`
-    display: block;
-    width: 100%;
-    flex: 1;
-`;exports.SelectorInput=u,exports.TimeContainer=n,exports.Wrapper=a;
+"use strict";require("./common.styles_cnkkax.css");exports.selectorInput="svbkfs2",exports.selectorInputDisabled="s1201xt4",exports.timeContainer="t102z5ub",exports.wrapper="wfddsjt";
 //# sourceMappingURL=common.styles.js.map

package/cjs/time-range-picker/common.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"common.styles.js","sources":["../../../src/time-range-picker/common.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\n\nimport {\n    BasicInput,\n    InputWrapper,\n} from \"../shared/input-wrapper/input-wrapper\";\nimport { V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n    position: relative;\n`;\n\nexport const TimeContainer = styled(InputWrapper)`\n    height: 3rem;\n    gap: ${V3_Spacing[\"spacing-8\"]};\n`;\n\nexport const SelectorInput = styled(BasicInput)`\n    display: block;\n    width: 100%;\n    flex: 1;\n`;\n"],"names":["Wrapper","styled","div","TimeContainer","InputWrapper","V3_Spacing","SelectorInput","BasicInput"],"mappings":"2NAWO,MAAMA,EAAUC,EAAAA,QAAOC,GAAG;;EAIpBC,EAAgBF,EAAAA,QAAOG,EAAAA,aAAa;;WAEtCC,EAAAA,WAAW;EAGTC,EAAgBL,EAAAA,QAAOM,EAAAA,WAAW;;;;"}
+{"version":3,"file":"common.styles.js","sources":["../../../src/time-range-picker/common.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n`;\n\nexport const timeContainer = css`\n    height: 3rem;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const selectorInput = css`\n    display: block;\n    width: 100%;\n    flex: 1;\n`;\n\nexport const selectorInputDisabled = css`\n    color: ${Colour[\"text-subtler\"]};\n    cursor: not-allowed;\n`;\n"],"names":[],"mappings":"0GAgB0B,wCAMQ,iCAXR,2BAJN"}

package/cjs/time-range-picker/common.styles_cnkkax.css

@@ -0,0 +1,4 @@
+@layer fds{.wfddsjt{position:relative;}
+.t102z5ub{height:3rem;gap:var(--fds-spacing-8);}
+.svbkfs2{display:block;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;}
+.s1201xt4{color:var(--fds-colour-text-subtler);cursor:not-allowed;}}

package/cjs/time-range-picker/dial-picker/dial-picker.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react");require("../../shared/dropdown-wrapper/dropdown-wrapper.styles.js");var n=require("../../shared/dropdown-wrapper/element-with-dropdown.js"),o=require("../../shared/range-input-inner-container/range-input-inner-container.js"),a=require("../../shared/timepicker-dropdown/timepicker-dropdown.js"),i=require("../../util/time-helper.js"),l=require("../common.styles.js");exports.DialPicker=s=>{var{id:d,disabled:u=!1,error:c,value:p,format:m="24hr",readOnly:v,onChange:f,onFocus:g,onBlur:h,alignment:j="left",dropdownZIndex:w,dropdownRootNode:k}=s,x=e.__rest(s,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode"]);const[b,F]=t.useState(!1),[y,C]=t.useState("none"),[q,O]=t.useState(""),[T,D]=t.useState(""),[I,S]=t.useState(!1),$=!v&&!u,R=t.useRef(null);t.useEffect((()=>{p&&(O(p.start),D(p.end))}),[p]);const B=e=>{$&&(I||b||null==g||g(),S(!0),C(e),F(!0))},_=e=>{var r,t;const n=!!(null==e?void 0:e.keepFocus),o=null!==(r=null==e?void 0:e.triggerBlur)&&void 0!==r?r:!n;F(!1),C("none"),S(n),o&&(null==h||h()),n&&(null===(t=R.current)||void 0===t||t.focus())},E=e=>{var r,t,n;if(!I||b)return;const o=e.relatedTarget,a=(null===(r=null==o?void 0:o.matches)||void 0===r?void 0:r.call(o,"[data-floating-ui-focusable]"))||(null===(t=null==o?void 0:o.matches)||void 0===t?void 0:t.call(o,"[data-floating-ui-focus-guard]"));!(!o||!(null===(n=R.current)||void 0===n?void 0:n.contains(o)))||a||(S(!1),null==h||h())},N=e=>{O(e),null==f||f({start:e,end:T}),C("end"),F(!0),S(!0)},W=e=>{D(e),null==f||f({start:q,end:e}),""===q?(C("start"),F(!0),S(!0)):_({keepFocus:!0})};return r.jsx(l.Wrapper,Object.assign({id:d},x,{children:r.jsx(n.ElementWithDropdown,{enabled:$,isOpen:b,renderElement:()=>r.jsx(l.Wrapper,Object.assign({ref:R,id:d,tabIndex:-1,onBlur:E,"data-testid":"timepicker-container"},x,{children:r.jsx(l.TimeContainer,{$disabled:u,$error:c,$readOnly:v,$focused:I,children:r.jsxs(o.RangeInputInnerContainer,{error:c,currentActive:y,children:[r.jsx(l.SelectorInput,{onFocus:()=>B("start"),onClick:()=>B("start"),readOnly:!0,placeholder:"From",value:i.TimeHelper.formatDisplayValue(q,m),disabled:u,"data-testid":x["data-testid"]?`${x["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from"}),r.jsx(l.SelectorInput,{onClick:()=>B("end"),readOnly:!0,placeholder:"To",value:i.TimeHelper.formatDisplayValue(T,m),disabled:u,"data-testid":x["data-testid"]?`${x["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to"})]})})})),renderDropdown:({styles:e,setFloatingRef:t,getFloatingProps:n})=>b?r.jsxs("div",Object.assign({ref:t,style:e},n(),{children:["start"===y&&r.jsx(a.TimepickerDropdown,{id:d,show:!0,value:q,format:m,onCancel:()=>_({keepFocus:!0}),onChange:N}),"end"===y&&r.jsx(a.TimepickerDropdown,{id:d,show:!0,value:T,format:m,onCancel:()=>_({keepFocus:!1}),onChange:W})]})):null,onClose:()=>_({keepFocus:!1}),onDismiss:()=>_({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:j,customZIndex:w,rootNode:k})}))};
+"use strict";var e=require("../../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("clsx"),i=require("react"),t=require("../../shared/accessibility/index.js"),n=require("../../shared/dropdown-wrapper/element-with-dropdown.js"),l=require("../../shared/input-wrapper/input-wrapper.js"),o=require("../../shared/range-input-inner-container/range-input-inner-container.js"),d=require("../../shared/timepicker-dropdown/timepicker-dropdown.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");var u=require("../../util/time-helper.js"),c=require("../common.styles.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=p(a);exports.DialPicker=a=>{var{id:p,disabled:v=!1,error:b,value:f,format:g="24hr",readOnly:j,onChange:h,onFocus:y,onBlur:x,alignment:k="left",dropdownZIndex:w,dropdownRootNode:q,"aria-labelledby":I,"aria-describedby":F,"aria-invalid":C}=a,D=e.__rest(a,["id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby","aria-invalid"]);const[N,O]=i.useState(!1),[S,T]=i.useState("none"),[B,$]=i.useState(""),[R,E]=i.useState(""),[_,Z]=i.useState(!1),H=!j&&!v,P=i.useRef(null),V=s.useId(),W=`${V}-start-label`,A=`${V}-end-label`,z=e=>t.concatIds(I,"start"===e?W:A),G=()=>t.concatIds(F);i.useEffect((()=>{f&&($(f.start),E(f.end))}),[f]);const J=e=>{H&&(_||N||null==y||y(),Z(!0),T(e),O(!0))},K=e=>{var r,a;const i=!!(null==e?void 0:e.keepFocus),t=null!==(r=null==e?void 0:e.triggerBlur)&&void 0!==r?r:!i;O(!1),T("none"),Z(i),t&&(null==x||x()),i&&(null===(a=P.current)||void 0===a||a.focus())},L=e=>{var r,a,i;if(!_||N)return;const t=e.relatedTarget,n=(null===(r=null==t?void 0:t.matches)||void 0===r?void 0:r.call(t,"[data-floating-ui-focusable]"))||(null===(a=null==t?void 0:t.matches)||void 0===a?void 0:a.call(t,"[data-floating-ui-focus-guard]"));!(!t||!(null===(i=P.current)||void 0===i?void 0:i.contains(t)))||n||(Z(!1),null==x||x())},M=e=>{$(e),null==h||h({start:e,end:R}),T("end"),O(!0),Z(!0)},Q=e=>{E(e),null==h||h({start:B,end:e}),""===B?(T("start"),O(!0),Z(!0)):K({keepFocus:!0})};return r.jsx("div",Object.assign({id:p},D,{className:m.default(c.wrapper,D.className),children:r.jsx(n.ElementWithDropdown,{enabled:H,isOpen:N,renderElement:()=>r.jsx(l.InputWrapper,{ref:P,tabIndex:-1,onBlur:L,"data-testid":"timepicker-container",role:"group",disabled:v,error:b,readOnly:j,focused:_,className:c.timeContainer,children:r.jsxs(o.RangeInputInnerContainer,{error:b,currentActive:S,children:[r.jsx(l.BasicInput,{onFocus:()=>J("start"),onClick:()=>J("start"),readOnly:!0,placeholder:"From",value:u.TimeHelper.formatDisplayValue(B,g),"data-testid":D["data-testid"]?`${D["data-testid"]}-timepicker-selector-from`:"timepicker-selector-from",role:"combobox","aria-expanded":!v&&!j&&N,"aria-invalid":b||C,"aria-disabled":v,"aria-readonly":j,"aria-labelledby":z("start"),"aria-describedby":G(),className:m.default(c.selectorInput,v&&c.selectorInputDisabled)}),r.jsx(l.BasicInput,{onClick:()=>J("end"),readOnly:!0,placeholder:"To",value:u.TimeHelper.formatDisplayValue(R,g),"data-testid":D["data-testid"]?`${D["data-testid"]}-timepicker-selector-to`:"timepicker-selector-to",role:"combobox","aria-expanded":!v&&!j&&N,"aria-invalid":b||C||void 0,"aria-disabled":v||void 0,"aria-readonly":j||void 0,"aria-labelledby":z("end"),"aria-describedby":G(),className:m.default(c.selectorInput,v&&c.selectorInputDisabled)})]})}),renderDropdown:({styles:e,setFloatingRef:a,getFloatingProps:i})=>N?r.jsxs("div",Object.assign({ref:a,style:e,role:"dialog","aria-label":"start"===S?"Selecting for: Start time":"end"===S?"Selecting for: End time":void 0},i(),{children:["start"===S&&r.jsx(d.TimepickerDropdown,{id:p?`${p}-start`:void 0,show:!0,value:B,format:g,onCancel:()=>K({keepFocus:!0}),onChange:M}),"end"===S&&r.jsx(d.TimepickerDropdown,{id:p?`${p}-end`:void 0,show:!0,value:R,format:g,onCancel:()=>K({keepFocus:!1}),onChange:Q})]}),S):null,onClose:()=>K({keepFocus:!1}),onDismiss:()=>K({keepFocus:!0}),clickToToggle:!1,offset:8,alignment:k,customZIndex:w,rootNode:q})}))};
 //# sourceMappingURL=dial-picker.js.map

package/cjs/time-range-picker/dial-picker/dial-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"dial-picker.js","sources":["../../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, TimeContainer, Wrapper } from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"24hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    dropdownRootNode,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [active, setActive] = useState<Active>(\"none\");\n    const [startTimeVal, setStartTimeVal] = useState(\"\");\n    const [endTimeVal, setEndTimeVal] = useState(\"\");\n    const [focused, setFocused] = useState(false);\n\n    const enabled = !readOnly && !disabled;\n    const nodeRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (value) {\n            setStartTimeVal(value.start);\n            setEndTimeVal(value.end);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = (next: Exclude<Active, \"none\">) => {\n        if (!enabled) return;\n        if (!focused && !isOpen) onFocus?.();\n        setFocused(true);\n        setActive(next);\n        setIsOpen(true);\n    };\n\n    const handleClose = (opts?: {\n        keepFocus?: boolean;\n        triggerBlur?: boolean;\n    }) => {\n        const keepFocus = !!opts?.keepFocus;\n        const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n        setIsOpen(false);\n        setActive(\"none\");\n        setFocused(keepFocus);\n\n        if (triggerBlur) onBlur?.();\n\n        if (keepFocus) nodeRef.current?.focus();\n    };\n\n    const handleContainerBlur = (\n        event: React.FocusEvent<HTMLDivElement, Element>\n    ) => {\n        if (!focused || isOpen) return;\n\n        const target = event.relatedTarget as HTMLElement | null;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n        if (!isInsideNode && !isFloatingElement) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleStartTime = (value: string) => {\n        setStartTimeVal(value);\n        onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n        setActive(\"end\");\n        setIsOpen(true);\n        setFocused(true);\n    };\n\n    const handleEndTime = (value: string) => {\n        setEndTimeVal(value);\n        onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n        if (startTimeVal === \"\") {\n            setActive(\"start\");\n            setIsOpen(true);\n            setFocused(true);\n        } else {\n            handleClose({ keepFocus: true });\n        }\n    };\n\n    const renderElement = () => (\n        <Wrapper\n            ref={nodeRef}\n            id={id}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            {...otherProps}\n        >\n            <TimeContainer\n                $disabled={disabled}\n                $error={error}\n                $readOnly={readOnly}\n                $focused={focused}\n            >\n                <RangeInputInnerContainer error={error} currentActive={active}>\n                    <SelectorInput\n                        onFocus={() => handleOpen(\"start\")}\n                        onClick={() => handleOpen(\"start\")}\n                        readOnly\n                        placeholder=\"From\"\n                        value={TimeHelper.formatDisplayValue(\n                            startTimeVal,\n                            format\n                        )}\n                        disabled={disabled}\n                        data-testid={\n                            otherProps[\"data-testid\"]\n                                ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                                : \"timepicker-selector-from\"\n                        }\n                    />\n                    <SelectorInput\n                        onClick={() => handleOpen(\"end\")}\n                        readOnly\n                        placeholder=\"To\"\n                        value={TimeHelper.formatDisplayValue(\n                            endTimeVal,\n                            format\n                        )}\n                        disabled={disabled}\n                        data-testid={\n                            otherProps[\"data-testid\"]\n                                ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                                : \"timepicker-selector-to\"\n                        }\n                    />\n                </RangeInputInnerContainer>\n            </TimeContainer>\n        </Wrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div ref={setFloatingRef} style={styles} {...getFloatingProps()}>\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id}\n                        show\n                        value={startTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: true })}\n                        onChange={handleStartTime}\n                    />\n                )}\n                {active === \"end\" && (\n                    <TimepickerDropdown\n                        id={id}\n                        show\n                        value={endTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: false })}\n                        onChange={handleEndTime}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <ElementWithDropdown\n                enabled={enabled}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onClose={() => handleClose({ keepFocus: false })}\n                onDismiss={() => handleClose({ keepFocus: true })}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </Wrapper>\n    );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Wrapper","Object","assign","children","ElementWithDropdown","renderElement","ref","tabIndex","TimeContainer","$disabled","$error","$focused","_jsxs","RangeInputInnerContainer","currentActive","SelectorInput","onClick","placeholder","TimeHelper","formatDisplayValue","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"dial-picker.js","sources":["../../../../src/time-range-picker/dial-picker/dial-picker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { concatIds } from \"../../shared/accessibility\";\nimport type { DropdownRenderProps } from \"../../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../../shared/dropdown-wrapper\";\nimport { BasicInput, InputWrapper } from \"../../shared/input-wrapper\";\nimport { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { TimepickerDropdown } from \"../../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport * as styles from \"../common.styles\";\nimport type { TimeRangePickerProps, TimeRangePickerValue } from \"../types\";\n\ntype Active = \"start\" | \"end\" | \"none\";\n\nexport const DialPicker = ({\n    id,\n    disabled = false,\n    error,\n    value,\n    format = \"24hr\",\n    readOnly,\n    onChange,\n    onFocus,\n    onBlur,\n    alignment = \"left\",\n    dropdownZIndex,\n    dropdownRootNode,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: TimeRangePickerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [isOpen, setIsOpen] = useState(false);\n    const [active, setActive] = useState<Active>(\"none\");\n    const [startTimeVal, setStartTimeVal] = useState(\"\");\n    const [endTimeVal, setEndTimeVal] = useState(\"\");\n    const [focused, setFocused] = useState(false);\n\n    const enabled = !readOnly && !disabled;\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const internalId = useId();\n    const startLabelId = `${internalId}-start-label`;\n    const endLabelId = `${internalId}-end-label`;\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDropdownAriaLabel = () => {\n        if (active === \"start\") {\n            return \"Selecting for: Start time\";\n        }\n\n        if (active === \"end\") {\n            return \"Selecting for: End time\";\n        }\n\n        return undefined;\n    };\n\n    const getInputLabelledBy = (type: Exclude<Active, \"none\">) => {\n        return concatIds(\n            ariaLabelledBy,\n            type === \"start\" ? startLabelId : endLabelId\n        );\n    };\n\n    const getInputDescribedBy = () => {\n        return concatIds(ariaDescribedBy);\n    };\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (value) {\n            setStartTimeVal(value.start);\n            setEndTimeVal(value.end);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOpen = (next: Exclude<Active, \"none\">) => {\n        if (!enabled) return;\n        if (!focused && !isOpen) onFocus?.();\n        setFocused(true);\n        setActive(next);\n        setIsOpen(true);\n    };\n\n    const handleClose = (opts?: {\n        keepFocus?: boolean;\n        triggerBlur?: boolean;\n    }) => {\n        const keepFocus = !!opts?.keepFocus;\n        const triggerBlur = opts?.triggerBlur ?? !keepFocus;\n\n        setIsOpen(false);\n        setActive(\"none\");\n        setFocused(keepFocus);\n\n        if (triggerBlur) onBlur?.();\n\n        if (keepFocus) nodeRef.current?.focus();\n    };\n\n    const handleContainerBlur = (\n        event: React.FocusEvent<HTMLDivElement, Element>\n    ) => {\n        if (!focused || isOpen) return;\n\n        const target = event.relatedTarget as HTMLElement | null;\n\n        const isFloatingElement =\n            target?.matches?.(\"[data-floating-ui-focusable]\") ||\n            target?.matches?.(\"[data-floating-ui-focus-guard]\");\n        const isInsideNode = !!(target && nodeRef.current?.contains(target));\n\n        if (!isInsideNode && !isFloatingElement) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleStartTime = (value: string) => {\n        setStartTimeVal(value);\n        onChange?.({ start: value, end: endTimeVal } as TimeRangePickerValue);\n\n        setActive(\"end\");\n        setIsOpen(true);\n        setFocused(true);\n    };\n\n    const handleEndTime = (value: string) => {\n        setEndTimeVal(value);\n        onChange?.({ start: startTimeVal, end: value } as TimeRangePickerValue);\n\n        if (startTimeVal === \"\") {\n            setActive(\"start\");\n            setIsOpen(true);\n            setFocused(true);\n        } else {\n            handleClose({ keepFocus: true });\n        }\n    };\n\n    const renderElement = () => (\n        <InputWrapper\n            ref={nodeRef}\n            tabIndex={-1}\n            onBlur={handleContainerBlur}\n            data-testid=\"timepicker-container\"\n            role=\"group\"\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            focused={focused}\n            className={styles.timeContainer}\n        >\n            <RangeInputInnerContainer error={error} currentActive={active}>\n                <BasicInput\n                    onFocus={() => handleOpen(\"start\")}\n                    onClick={() => handleOpen(\"start\")}\n                    readOnly\n                    placeholder=\"From\"\n                    value={TimeHelper.formatDisplayValue(startTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-from`\n                            : \"timepicker-selector-from\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid}\n                    aria-disabled={disabled}\n                    aria-readonly={readOnly}\n                    aria-labelledby={getInputLabelledBy(\"start\")}\n                    aria-describedby={getInputDescribedBy()}\n                    className={clsx(\n                        styles.selectorInput,\n                        disabled && styles.selectorInputDisabled\n                    )}\n                />\n                <BasicInput\n                    onClick={() => handleOpen(\"end\")}\n                    readOnly\n                    placeholder=\"To\"\n                    value={TimeHelper.formatDisplayValue(endTimeVal, format)}\n                    data-testid={\n                        otherProps[\"data-testid\"]\n                            ? `${otherProps[\"data-testid\"]}-timepicker-selector-to`\n                            : \"timepicker-selector-to\"\n                    }\n                    role=\"combobox\"\n                    aria-expanded={!disabled && !readOnly ? isOpen : false}\n                    aria-invalid={error || ariaInvalid || undefined}\n                    aria-disabled={disabled || undefined}\n                    aria-readonly={readOnly || undefined}\n                    aria-labelledby={getInputLabelledBy(\"end\")}\n                    aria-describedby={getInputDescribedBy()}\n                    className={clsx(\n                        styles.selectorInput,\n                        disabled && styles.selectorInputDisabled\n                    )}\n                />\n            </RangeInputInnerContainer>\n        </InputWrapper>\n    );\n\n    const renderDropdown = ({\n        styles,\n        setFloatingRef,\n        getFloatingProps,\n    }: DropdownRenderProps) => {\n        if (!isOpen) return null;\n\n        return (\n            <div\n                ref={setFloatingRef}\n                style={styles}\n                role=\"dialog\"\n                key={active}\n                aria-label={getDropdownAriaLabel()}\n                {...getFloatingProps()}\n            >\n                {active === \"start\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-start` : undefined}\n                        show\n                        value={startTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: true })}\n                        onChange={handleStartTime}\n                    />\n                )}\n                {active === \"end\" && (\n                    <TimepickerDropdown\n                        id={id ? `${id}-end` : undefined}\n                        show\n                        value={endTimeVal}\n                        format={format}\n                        onCancel={() => handleClose({ keepFocus: false })}\n                        onChange={handleEndTime}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            id={id}\n            {...otherProps}\n            className={clsx(styles.wrapper, otherProps.className)}\n        >\n            <ElementWithDropdown\n                enabled={enabled}\n                isOpen={isOpen}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onClose={() => handleClose({ keepFocus: false })}\n                onDismiss={() => handleClose({ keepFocus: true })}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </div>\n    );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","isOpen","setIsOpen","useState","active","setActive","startTimeVal","setStartTimeVal","endTimeVal","setEndTimeVal","focused","setFocused","enabled","nodeRef","useRef","internalId","useId","startLabelId","endLabelId","getInputLabelledBy","type","concatIds","getInputDescribedBy","useEffect","start","end","handleOpen","next","handleClose","opts","keepFocus","triggerBlur","_b","current","focus","handleContainerBlur","event","target","relatedTarget","isFloatingElement","matches","call","_c","contains","handleStartTime","handleEndTime","_jsx","Object","assign","className","clsx","styles.wrapper","children","ElementWithDropdown","renderElement","InputWrapper","ref","tabIndex","role","styles.timeContainer","_jsxs","RangeInputInnerContainer","currentActive","BasicInput","onClick","placeholder","TimeHelper","formatDisplayValue","styles.selectorInput","styles.selectorInputDisabled","undefined","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onClose","onDismiss","clickToToggle","offset","customZIndex","rootNode"],"mappings":"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"}

package/cjs/time-range-picker/time-range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"time-range-picker.js","sources":["../../../src/time-range-picker/time-range-picker.tsx"],"sourcesContent":["import { ComboboxPicker } from \"./combobox-picker/combobox-picker\";\nimport { DialPicker } from \"./dial-picker/dial-picker\";\nimport type { TimeRangePickerProps } from \"./types\";\n\nexport const TimeRangePicker = ({\n    variant = \"dial\",\n    ...otherProps\n}: TimeRangePickerProps) => {\n    if (variant === \"combobox\") {\n        return <ComboboxPicker {...otherProps} />;\n    } else {\n        return <DialPicker {...otherProps} />;\n    }\n};\n"],"names":["_a","variant","otherProps","__rest","_jsx","ComboboxPicker","Object","assign","DialPicker"],"mappings":"uMAIgCA,QAAAC,QAC5BA,EAAU,QAAMD,EACbE,EAAUC,SAAAH,EAFe,aAI5B,MAAgB,aAAZC,EACOG,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKL,IAEpBE,EAAAA,IAACI,EAAAA,WAAUF,OAAAC,OAAA,CAAA,EAAKL,GAC3B"}
+{"version":3,"file":"time-range-picker.js","sources":["../../../src/time-range-picker/time-range-picker.tsx"],"sourcesContent":["import { ComboboxPicker } from \"./combobox-picker/combobox-picker\";\nimport { DialPicker } from \"./dial-picker/dial-picker\";\nimport type { TimeRangePickerProps } from \"./types\";\n\n// @catalog\n/**\n * A two-field time picker for selecting a start and end time.\n *\n * Use `TimeRangePicker` when users need to define a time range.\n * @keywords duration, end time, field, form, input, interval, start time\n */\nexport const TimeRangePicker = ({\n    variant = \"dial\",\n    ...otherProps\n}: TimeRangePickerProps) => {\n    if (variant === \"combobox\") {\n        return <ComboboxPicker {...otherProps} />;\n    } else {\n        return <DialPicker {...otherProps} />;\n    }\n};\n"],"names":["_a","variant","otherProps","__rest","_jsx","ComboboxPicker","Object","assign","DialPicker"],"mappings":"uMAWgCA,QAAAC,QAC5BA,EAAU,QAAMD,EACbE,EAAUC,SAAAH,EAFe,aAI5B,MAAgB,aAAZC,EACOG,EAAAA,IAACC,EAAAA,eAAcC,OAAAC,OAAA,CAAA,EAAKL,IAEpBE,EAAAA,IAACI,EAAAA,WAAUF,OAAAC,OAAA,CAAA,EAAKL,GAC3B"}

package/cjs/time-slot-bar/helper.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../external/dayjs/dayjs.min.js"),t=require("../external/dayjs/plugin/customParseFormat.js");require("../util/calendar-helper.js");var r=require("../util/date-helper.js");require("react"),require("../util/string-helper.js"),e.default.extend(t.default);exports.TimeSlotBarHelper=class{static formatHourlyDisplay(t){return e.default(t,"HH:mm").format("ha")}static calculateWidth(e,t,u){return r.DateHelper.getTimeDiffInMinutes(e,t)/15*(u/2)}static adjustTimeForMarker(t,r){const u=e.default(t,"HH:mm");switch(r){case"start":if(u.minute()>0&&u.minute()<30)return u.set("minute",0).format("HH:mm");if(u.minute()>30&&u.minute()<60)return u.set("minute",30).format("HH:mm");break;case"end":if(u.minute()>0&&u.minute()<30)return u.set("minute",30).format("HH:mm");if(u.minute()>30&&u.minute()<60){const e=u.add(1,"hour");return 0===e.hour()?"24:00":e.set("minute",0).format("HH:mm")}break;default:return t}return t}};
+"use strict";var e=require("../external/dayjs/dayjs.min.js"),t=require("../external/dayjs/plugin/customParseFormat.js");require("../util/calendar-helper.js");var r=require("../util/date-helper.js");require("react");var i=require("../util/simple-id-generator.js"),a=require("../util/string-helper.js");require("@react-aria/live-announcer");var n,s=require("../util/time-helper.js"),m=require("./time-slot-bar.styles.js");e.default.extend(t.default),function(e){e.avail="Available",e.unavail="Unavailable"}(n||(n={}));const l=(e,t,r)=>({id:r,startTime:e,endTime:t,clickable:!1,label:void 0,styleAttributes:{backgroundColor:"transparent"}});exports.TimeSlotBarHelper=class{static formatHourlyDisplay(t){return e.default(t,"HH:mm").format("ha")}static calculateWidth(e,t,i){return r.DateHelper.getTimeDiffInMinutes(e,t)/15*(i/2)}static adjustTimeForMarker(t,r){const i=e.default(t,"HH:mm");switch(r){case"start":if(i.minute()>0&&i.minute()<30)return i.set("minute",0).format("HH:mm");if(i.minute()>30&&i.minute()<60)return i.set("minute",30).format("HH:mm");break;case"end":if(i.minute()>0&&i.minute()<30)return i.set("minute",30).format("HH:mm");if(i.minute()>30&&i.minute()<60){const e=i.add(1,"hour");return 0===e.hour()?"24:00":e.set("minute",0).format("HH:mm")}break;default:return t}return t}static processSlots(t,r,m){const u=["Time slot bar"],o=[],d=e=>{var t;const r=(i=e.startTime,l=e.endTime,d=null===(t=e.clickable)||void 0===t||t,c=e.label,a.StringHelper.joinNonEmptyStrings([s.TimeHelper.formatTimeRange(i,l),d?n.avail:n.unavail,c]));var i,l,d,c;"minified"===m&&u.push(r),o.push(Object.assign(Object.assign({},e),{ariaLabel:"default"===m?r:void 0}))};if(r.length<1){const e=l(t.start,t.end,i.SimpleIdGenerator.generate());return d(e),{summary:a.StringHelper.joinNonEmptyStrings(u),computedSlots:o}}const c=[...r].sort(((t,r)=>{const i=e.default(t.startTime,"HH:mm"),a=e.default(r.startTime,"HH:mm");return i.isBefore(a)?-1:i.isAfter(a)?1:0}));if(!s.TimeHelper.isSameTime(t.start,c[0].startTime)){const e=l(t.start,c[0].startTime,i.SimpleIdGenerator.generate());d(e)}c.forEach(((e,t,r)=>{var a;d(e);const{endTime:n}=e,{startTime:m}=null!==(a=r[t+1])&&void 0!==a?a:{};if(m&&!s.TimeHelper.isSameTime(n,m)){const e=l(n,m,i.SimpleIdGenerator.generate());d(e)}}));const f=c[c.length-1];if(!s.TimeHelper.isSameTime(t.end,f.endTime)){const e=l(f.endTime,t.end,i.SimpleIdGenerator.generate());d(e)}return{summary:a.StringHelper.joinNonEmptyStrings(u),computedSlots:o}}},exports.getCellWidth=e=>"minified"===e?m.MINIFIED_CELL_SIZE:m.DEFAULT_CELL_SIZE;
 //# sourceMappingURL=helper.js.map

package/cjs/time-slot-bar/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper } from \"../util\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n    /**\n     * Format HH:mm to am/pm display\n     * @param timeString input timeString string\n     */\n    public static formatHourlyDisplay(timeString: string): string {\n        const parsedTime = dayjs(timeString, \"HH:mm\");\n        return parsedTime.format(\"ha\");\n    }\n\n    /**\n     * Calculate width in px base on the time range in respect the cell width\n     * @param start input start string\n     * @param end input end string\n     * @param cellWidth input cellWidth number\n     */\n    public static calculateWidth(\n        start: string,\n        end: string,\n        cellWidth: number\n    ): number {\n        /**\n         * Each CELL_WIDTH is 30min interval\n         * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n         */\n        return (\n            (DateHelper.getTimeDiffInMinutes(start, end) / 15) * (cellWidth / 2)\n        );\n    }\n\n    /**\n     * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n     * this helps to always show time slot marker properly.\n     * @param time - time to be adjusted\n     * @param type - \"start\" or \"end\" indicating which boundary to adjust\n     */\n    public static adjustTimeForMarker(\n        time: string,\n        type: \"start\" | \"end\"\n    ): string {\n        const parsedTime = dayjs(time, \"HH:mm\");\n        switch (type) {\n            case \"start\": {\n                // For xx:01 to xx:29, adjust to xx:00\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to xx:30\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                break;\n            }\n            case \"end\": {\n                // For xx:01 to xx:29, adjust to xx:30\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to next hour xx:00\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    const nextHour = parsedTime.add(1, \"hour\");\n                    // If it's 23:xx and rounds up to 24:00\n                    if (nextHour.hour() === 0) {\n                        return \"24:00\";\n                    }\n                    return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                break;\n            }\n            default:\n                return time;\n        }\n        return time;\n    }\n}\n"],"names":["dayjs","extend","customParseFormat","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour"],"mappings":"2PAKAA,EAAAA,QAAMC,OAAOC,EAAAA,yCAWF,0BAAOC,CAAoBC,GAE9B,OADmBJ,EAAAA,QAAMI,EAAY,SACnBC,OAAO,KAC7B,CAQO,qBAAOC,CACVC,EACAC,EACAC,GAMA,OACKC,EAAAA,WAAWC,qBAAqBJ,EAAOC,GAAO,IAAOC,EAAY,EAE1E,CAQO,0BAAOG,CACVC,EACAC,GAEA,MAAMC,EAAaf,EAAAA,QAAMa,EAAM,SAC/B,OAAQC,GACJ,IAAK,QAED,GAAIC,EAAWC,SAAW,GAAKD,EAAWC,SAAW,GACjD,OAAOD,EAAWE,IAAI,SAAU,GAAGZ,OAAO,SAG9C,GAAIU,EAAWC,SAAW,IAAMD,EAAWC,SAAW,GAClD,OAAOD,EAAWE,IAAI,SAAU,IAAIZ,OAAO,SAE/C,MAEJ,IAAK,MAED,GAAIU,EAAWC,SAAW,GAAKD,EAAWC,SAAW,GACjD,OAAOD,EAAWE,IAAI,SAAU,IAAIZ,OAAO,SAG/C,GAAIU,EAAWC,SAAW,IAAMD,EAAWC,SAAW,GAAI,CACtD,MAAME,EAAWH,EAAWI,IAAI,EAAG,QAEnC,OAAwB,IAApBD,EAASE,OACF,QAEJF,EAASD,IAAI,SAAU,GAAGZ,OAAO,QAC5C,CACA,MAEJ,QACI,OAAOQ,EAEf,OAAOA,CACX"}
+{"version":3,"file":"helper.js","sources":["../../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n    avail = \"Available\",\n    unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n    slotStartTime: string,\n    slotEndTime: string,\n    isAvail?: boolean,\n    label?: string\n) =>\n    StringHelper.joinNonEmptyStrings([\n        TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n        isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n        label,\n    ]);\n\nconst buildUnavailableSlot = (\n    startTime: string,\n    endTime: string,\n    id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n    id,\n    startTime,\n    endTime,\n    clickable: false,\n    label: undefined,\n    styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n    /**\n     * Format HH:mm to am/pm display\n     * @param timeString input timeString string\n     */\n    public static formatHourlyDisplay(timeString: string): string {\n        const parsedTime = dayjs(timeString, \"HH:mm\");\n        return parsedTime.format(\"ha\");\n    }\n\n    /**\n     * Calculate width in px base on the time range in respect the cell width\n     * @param start input start string\n     * @param end input end string\n     * @param cellWidth input cellWidth number\n     */\n    public static calculateWidth(\n        start: string,\n        end: string,\n        cellWidth: number\n    ): number {\n        /**\n         * Each CELL_WIDTH is 30min interval\n         * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n         */\n        return (\n            (DateHelper.getTimeDiffInMinutes(start, end) / 15) * (cellWidth / 2)\n        );\n    }\n\n    /**\n     * Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n     * this helps to always show time slot marker properly.\n     * @param time - time to be adjusted\n     * @param type - \"start\" or \"end\" indicating which boundary to adjust\n     */\n    public static adjustTimeForMarker(\n        time: string,\n        type: \"start\" | \"end\"\n    ): string {\n        const parsedTime = dayjs(time, \"HH:mm\");\n        switch (type) {\n            case \"start\": {\n                // For xx:01 to xx:29, adjust to xx:00\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to xx:30\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                break;\n            }\n            case \"end\": {\n                // For xx:01 to xx:29, adjust to xx:30\n                if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n                    return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n                }\n                // For xx:31 to xx:59, adjust to next hour xx:00\n                if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n                    const nextHour = parsedTime.add(1, \"hour\");\n                    // If it's 23:xx and rounds up to 24:00\n                    if (nextHour.hour() === 0) {\n                        return \"24:00\";\n                    }\n                    return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n                }\n                break;\n            }\n            default:\n                return time;\n        }\n        return time;\n    }\n\n    /**\n     * Process raw slots and any gaps in the given time range.\n     *\n     * Builds a summary string and a list of slots that includes:\n     * - original slots,\n     * - leading/trailing unavailable time gaps,\n     * - gap slots inserted between non-contiguous slots.\n     *\n     * @param range - start/end bounds for the timeslot bar.\n     * @param slots - user-provided slots to render.\n     * @param variant - display variant controlling summary and aria label behavior.\n     * @returns summary for container aria-label and computed slots ready for rendering.\n     */\n    public static processSlots(\n        range: { start: string; end: string },\n        slots: TTimeSlot[],\n        variant: TimeSlotBarVariant\n    ) {\n        const summaryParts: string[] = [\"Time slot bar\"];\n        // Build visible slots plus any unavailable gaps\n        const computedSlots: (TTimeSlot & {\n            ariaLabel?: string;\n        })[] = [];\n\n        const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n            const ariaLabel = getSlotAriaLabel(\n                slot.startTime,\n                slot.endTime,\n                slot.clickable ?? true,\n                slot.label\n            );\n\n            if (variant === \"minified\") summaryParts.push(ariaLabel);\n            computedSlots.push({\n                ...slot,\n                ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n            });\n        };\n\n        if (slots.length < 1) {\n            // No real slots: represent the whole range as unavailable\n            const fullUnavailSlot = buildUnavailableSlot(\n                range.start,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(fullUnavailSlot);\n\n            return {\n                summary: StringHelper.joinNonEmptyStrings(summaryParts),\n                computedSlots,\n            };\n        }\n\n        const sortedSlots = [...slots].sort((a, b) => {\n            const timeA = dayjs(a.startTime, \"HH:mm\");\n            const timeB = dayjs(b.startTime, \"HH:mm\");\n            if (timeA.isBefore(timeB)) return -1;\n            if (timeA.isAfter(timeB)) return 1;\n            return 0;\n        });\n\n        if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n            // Add leading unavailable gap before the first slot\n            const leadingUnavailSlot = buildUnavailableSlot(\n                range.start,\n                sortedSlots[0].startTime,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(leadingUnavailSlot);\n        }\n\n        sortedSlots.forEach((slot, index, self) => {\n            createAriaLabelAndPushSlot(slot);\n\n            const { endTime: slotEndTime } = slot;\n            const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n            const hasGapAfter =\n                nextSlotStartTime &&\n                !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n            if (hasGapAfter) {\n                // Add a gap slot between consecutive slots if non-contiguous\n                const unavailSlot = buildUnavailableSlot(\n                    slotEndTime,\n                    nextSlotStartTime,\n                    SimpleIdGenerator.generate()\n                );\n                createAriaLabelAndPushSlot(unavailSlot);\n            }\n        });\n\n        const lastSlot = sortedSlots[sortedSlots.length - 1];\n        if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n            // Add trailing unavailable gap after the last slot\n            const trailingUnavailSlot = buildUnavailableSlot(\n                lastSlot.endTime,\n                range.end,\n                SimpleIdGenerator.generate()\n            );\n            createAriaLabelAndPushSlot(trailingUnavailSlot);\n        }\n\n        return {\n            summary: StringHelper.joinNonEmptyStrings(summaryParts),\n            computedSlots,\n        };\n    }\n}\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n    return variant === \"minified\"\n        ? styles.MINIFIED_CELL_SIZE\n        : styles.DEFAULT_CELL_SIZE;\n};\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot","styles.MINIFIED_CELL_SIZE","styles.DEFAULT_CELL_SIZE"],"mappings":"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"}