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

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

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

Files changed (1304) hide show

package/theme/utils/use-media-query.js.map CHANGED Viewed

	@@ -1 +1 @@
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 { normalizeCssLengthValue } from \"./css-variable\";\nimport { isTokenFromSet } from \"./token-resolver\";\nimport { useResolvedTokenValue } from \"./use-design-token\";\n\nexport type BreakpointName = \"xxs\" \| \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"xxl\";\nexport type 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\nexport type MediaQueryClauseValue = string \| number \| boolean;\n\nexport interface MediaQueryClause {\n feature: MediaQueryFeature;\n value: MediaQueryClauseValue \| undefined;\n}\n\nexport interface MediaQueryOptions {\n minWidth?: WidthBreakpointCSSVariableString;\n maxWidth?: WidthBreakpointCSSVariableString;\n clauses?: MediaQueryClause[];\n}\n\nexport const DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT = \"480px\";\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\nexport const useMinWidthMediaQuery = (breakpoint: BreakpointName) =>\n useMediaQuery({\n minWidth: getMinWidthBreakpointToken(breakpoint),\n });\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\nexport const useResolvedBreakpointToken = (\n breakpointToken: WidthBreakpointCSSVariableString \| undefined,\n fallbackLength?: string\n): string \| undefined => {\n const resolvedTokenValue = useResolvedTokenValue<\n WidthBreakpointCSSVariableString,\n string\n >({\n value: breakpointToken,\n fallback: fallbackLength ?? breakpointToken ?? \"\",\n isToken: isBreakpointToken,\n normalizeCustom: (value) => value,\n });\n\n return (\n normalizeCssLengthValue(resolvedTokenValue) ??\n normalizeCssLengthValue(fallbackLength)\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\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":["DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT","WIDTH_BREAKPOINT_TOKEN_SET","Set","Breakpoint","isBreakpointToken","value","isTokenFromSet","getMinWidthBreakpointToken","breakpoint","getMaxWidthBreakpointToken","useMinWidthMediaQuery","useMediaQuery","minWidth","useMaxWidthMediaQuery","maxWidth","getMediaQueryClause","feature","getCustomMediaQueryClause","clause","undefined","trim","useResolvedBreakpointToken","breakpointToken","fallbackLength","resolvedTokenValue","useResolvedTokenValue","fallback","_a","isToken","normalizeCustom","_b","normalizeCssLengthValue","useMatchMediaQuery","queryString","defaultMatch","matches","setMatches","useState","globalThis","window","matchMedia","getCurrentMatch","useEffect","mediaQueryList","handleChange","event","addEventListener","removeEventListener","options","clauses","normalizedMinWidth","normalizedMaxWidth","filter","map","join","hasMinWidth","hasMaxWidth","getDefaultMatch"],"mappings":"oRAkDO,MAAMA,EAAsC,QAC7CC,EAA6B,IAAIC,IAAsC,CACzEC,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,WACXA,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,YAGTC,EACFC,GAEOC,EACHD,EACAJ,GAIFM,EAA8BC,GACzBL,EAAW,GAAGK,SAGnBC,EAA8BD,GACzBL,EAAW,GAAGK,SAGZE,EAAyBF,GAClCG,EAAc,CACVC,SAAUL,EAA2BC,KAGhCK,EAAyBL,GAClCG,EAAc,CACVG,SAAUL,EAA2BD,KAGvCO,EAAsB,CACxBC,EACAX,KAEA,GAAKA,EAIL,MAAO,IAAIW,MAAYX,IAAQ,EAG7BY,EACFC,IAEA,QAAsBC,KAAlBD,aAAM,EAANA,EAAQb,OACR,OAGJ,IAAqB,IAAjBa,EAAOb,MACP,MAAO,IAAIa,EAAOF,WAGtB,IAAqB,IAAjBE,EAAOb,MACP,OAGJ,MAAMA,EAAQ,GAAGa,EAAOb,QAAQe,OAEhC,OAAKf,EAIE,IAAIa,EAAOF,YAAYX,UAJ9B,CAIsC,EA2B7BgB,EAA6B,CACtCC,EACAC,aAEA,MAAMC,EAAqBC,EAGzB,CACEpB,MAAOiB,EACPI,SAA2C,QAAjCC,EAAAJ,QAAAA,EAAkBD,SAAe,IAAAK,EAAAA,EAAI,GAC/CC,QAASxB,EACTyB,gBAAkBxB,GAAUA,IAGhC,OAC+C,QAA3CyB,EAAAC,EAAwBP,UAAmB,IAAAM,EAAAA,EAC3CC,EAAwBR,EAAe,EAIzCS,EAAqB,CACvBC,EACAC,KAEA,MAAOC,EAASC,GAAcC,GAAS,IApCnB,EAACJ,EAAqBC,WAC1C,OAAKD,IAIiB,QAAjBN,EAAAW,WAAWC,cAAM,IAAAZ,OAAA,EAAAA,EAAEa,YAIjBF,WAAWC,OAAOC,WAAWP,GAAaE,QAPtCD,CAO6C,EA4BpDO,CAAgBR,EAAaC,KAsBjC,OAnBAQ,GAAU,WACN,IAAKT,KAAiC,QAAjBN,EAAAW,WAAWC,cAAM,IAAAZ,OAAA,EAAAA,EAAEa,YAEpC,YADAJ,EAAWF,GAIf,MAAMS,EAAiBL,WAAWC,OAAOC,WAAWP,GAC9CW,EAAgBC,IAClBT,EAAWS,EAAMV,QAAQ,EAM7B,OAHAC,EAAWO,EAAeR,SAC1BQ,EAAeG,iBAAiB,SAAUF,GAEnC,KACHD,EAAeI,oBAAoB,SAAUH,EAAa,CAC7D,GACF,CAACV,EAAcD,IAEXE,CAAO,EAGLxB,EAAiBqC,IAC1B,MAAMpC,SAAEA,EAAQE,SAAEA,EAAQmC,QAAEA,EAAU,IAAOD,EACvCE,EAAqB7B,EAA2BT,GAChDuC,EAAqB9B,EAA2BP,GAQhDmB,EAAc,IAPC,CACjBlB,EAAoB,YAAamC,GACjCnC,EAAoB,YAAaoC,IACnCC,QAAQ/C,KAA6BA,OACjB4C,EACjBI,IAAIpC,GACJmC,QAAQ/C,KAA6BA,KACciD,KAAK,SAGvDpB,EAxFc,EAACqB,EAAsBC,KACvCA,KAIAD,EAmFiBE,GAFCP,IACAC,GAGtB,OAAOnB,EAAmBC,EAAaC,EAAa"}
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\nexport type BreakpointName = \"xxs\" \| \"xs\" \| \"sm\" \| \"md\" \| \"lg\" \| \"xl\" \| \"xxl\";\nexport type 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\nexport type MediaQueryClauseValue = string \| number \| boolean;\n\nexport interface MediaQueryClause {\n feature: MediaQueryFeature;\n value: MediaQueryClauseValue \| undefined;\n}\n\nexport interface MediaQueryOptions {\n minWidth?: WidthBreakpointCSSVariableString;\n maxWidth?: WidthBreakpointCSSVariableString;\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\nexport const useMinWidthMediaQuery = (breakpoint: BreakpointName) =>\n useMediaQuery({\n minWidth: getMinWidthBreakpointToken(breakpoint),\n });\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\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\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","useMinWidthMediaQuery","useMediaQuery","minWidth","useMaxWidthMediaQuery","maxWidth","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","options","clauses","normalizedMinWidth","normalizedMaxWidth","filter","map","join","hasMinWidth","hasMaxWidth","getDefaultMatch"],"mappings":"wNAqDA,MAAMA,EAGF,CACA,CAACC,EAAW,YAAa,IACzB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,SACxB,CAACA,EAAW,YAAa,SACzB,CAACA,EAAW,YAAa,QACzB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,QACxB,CAACA,EAAW,WAAY,SACxB,CAACA,EAAW,WAAY,UAGtBC,EAA6B,IAAIC,IAAsC,CACzEF,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,WACXA,EAAW,WACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,UACXA,EAAW,YAGTG,EACFC,GAEOC,EACHD,EACAH,GAIFK,EAA8BC,GACzBP,EAAW,GAAGO,SAGnBC,EAA8BD,GACzBP,EAAW,GAAGO,SAGZE,EAAyBF,GAClCG,EAAc,CACVC,SAAUL,EAA2BC,KAGhCK,EAAyBL,GAClCG,EAAc,CACVG,SAAUL,EAA2BD,KAGvCO,EAAsB,CACxBC,EACAX,KAEA,GAAKA,EAIL,MAAO,IAAIW,MAAYX,IAAQ,EAG7BY,EACFC,IAEA,QAAsBC,KAAlBD,aAAM,EAANA,EAAQb,OACR,OAGJ,IAAqB,IAAjBa,EAAOb,MACP,MAAO,IAAIa,EAAOF,WAGtB,IAAqB,IAAjBE,EAAOb,MACP,OAGJ,MAAMA,EAAQ,GAAGa,EAAOb,QAAQe,OAEhC,OAAKf,EAIE,IAAIa,EAAOF,YAAYX,UAJ9B,CAIsC,EA2B7BgB,EACTC,IAEA,MAAMC,EACFnB,EAAkBkB,IAClBtB,EAA0BsB,GACpBtB,EAA0BsB,GAC1B,GAEV,OAAOE,EAAgE,CACnEnB,MAAOiB,EACPG,SAAUF,EACVG,QAAStB,EACTuB,gBAAkBtB,GAAUA,GAC9B,EAGAuB,EAAqB,CACvBC,EACAC,KAEA,MAAOC,EAASC,GAAcC,GAAS,IAjCnB,EAACJ,EAAqBC,WAC1C,OAAKD,IAIiB,QAAjBK,EAAAC,WAAWC,cAAM,IAAAF,OAAA,EAAAA,EAAEG,YAIjBF,WAAWC,OAAOC,WAAWR,GAAaE,QAPtCD,CAO6C,EAyBpDQ,CAAgBT,EAAaC,KAsBjC,OAnBAS,GAAU,WACN,IAAKV,KAAiC,QAAjBK,EAAAC,WAAWC,cAAM,IAAAF,OAAA,EAAAA,EAAEG,YAEpC,YADAL,EAAWF,GAIf,MAAMU,EAAiBL,WAAWC,OAAOC,WAAWR,GAC9CY,EAAgBC,IAClBV,EAAWU,EAAMX,QAAQ,EAM7B,OAHAC,EAAWQ,EAAeT,SAC1BS,EAAeG,iBAAiB,SAAUF,GAEnC,KACHD,EAAeI,oBAAoB,SAAUH,EAAa,CAC7D,GACF,CAACX,EAAcD,IAEXE,CAAO,EAGLpB,EAAiBkC,IAC1B,MAAMjC,SAAEA,EAAQE,SAAEA,EAAQgC,QAAEA,EAAU,IAAOD,EACvCE,EAAqB1B,EAA2BT,GAChDoC,EAAqB3B,EAA2BP,GAQhDe,EAAc,IAPC,CACjBd,EAAoB,YAAagC,GACjChC,EAAoB,YAAaiC,IACnCC,QAAQ5C,KAA6BA,OACjByC,EACjBI,IAAIjC,GACJgC,QAAQ5C,KAA6BA,KACc8C,KAAK,SAGvDrB,EArFc,EAACsB,EAAsBC,KACvCA,KAIAD,EAgFiBE,GAFCP,IACAC,GAGtB,OAAOpB,EAAmBC,EAAaC,EAAa"}

package/time-range-picker/combobox-picker/combobox-picker.js CHANGED Viewed

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

package/time-range-picker/combobox-picker/combobox-picker.js.map CHANGED Viewed

	@@ -1 +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 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}\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={commonStyles.selectorInput}\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}\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={commonStyles.selectorInput}\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":["ComboboxPicker","_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","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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"}
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 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}\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={commonStyles.selectorInput}\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}\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={commonStyles.selectorInput}\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":["ComboboxPicker","_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","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/time-slot-bar-week/consts.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export declare const SLOT_HEIGHT = 12;
+export declare const SLOT_GAP = 4;
+export declare const ROW_HEIGHT: number;

package/time-slot-bar-week/consts.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ const o=12,t=4,c=16;export{c as ROW_HEIGHT,t as SLOT_GAP,o as SLOT_HEIGHT};
2	+ //# sourceMappingURL=consts.js.map

package/time-slot-bar-week/consts.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"consts.js","sources":["../../src/time-slot-bar-week/consts.ts"],"sourcesContent":["export const SLOT_HEIGHT = 12; // px\nexport const SLOT_GAP = 4; // px\nexport const ROW_HEIGHT = SLOT_HEIGHT + SLOT_GAP;\n"],"names":["SLOT_HEIGHT","SLOT_GAP","ROW_HEIGHT"],"mappings":"AAAO,MAAMA,EAAc,GACdC,EAAW,EACXC,EAAaF"}

package/time-slot-bar-week/time-slot-bar-week-days.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useSpring as r}from"@react-spring/web";import i from"../external/dayjs/dayjs.min.js";import l from"../external/lodash/isEmpty.js";import o from"../external/lodash/maxBy.js";import n from"../external/lodash/minBy.js";import{useState as a,useRef as d,useMemo as s}from"react";import{useResizeDetector as c}from"../external/react-resize-detector/build/index.esm.js";import{VisuallyHidden as m,inertValue as u}from"../shared/accessibility/index.js";import{DayCell as h}from"../shared/internal-calendar/day-cell/day-cell.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as f}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{CalendarHelper as p}from"../util/calendar-helper.js";import{DateHelper as v}from"../util/date-helper.js";import"../util/simple-id-generator.js";import{StringHelper as b}from"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{TimeHelper as g}from"../util/time-helper.js";import{Wrapper as y,GridWrapper as x,HeaderCellWeekColumn as k,HeaderCellWeek as T,CellWeekText as j,TimeColumn as w,TimeColumnWrapper as M,TimeColumnText as D,Expandable as $,ColumnWeekCell as I,TimeSlotWrapper as A,CollapseExpandAllWrapper as S,CollapseExpandAllButton as C,ChevronIcon as L,TimeSlotComponent as O}from"./time-slot-bar-week-days.style.js";const Y=({calendarDate:Y,disabledDates:E,selectedDate:H,onSelect:R,minDate:F,maxDate:B,startTime:P,endTime:U,maxVisibleCellHeight:q,slots:W,interval:z=30,variant:K="flexible",enableSelection:N=!0,onSlotClick:V})=>{var G,J,Q,X;const Z="YYYY-MM-DD",[_,ee]=a(!1),[te,re]=a(),ie=d({}),le=s((()=>p.generateDaysForCurrentWeek(Y)),[Y]),oe=Object.values(null!=W?W:{}).flat(),ne=null!==(J=null!=P?P:null===(G=n(oe,"startTime"))||void 0===G?void 0:G.startTime)&&void 0!==J?J:"00:00",ae=null!==(X=null!=U?U:null===(Q=o(oe,"endTime"))||void 0===Q?void 0:Q.endTime)&&void 0!==X?X:"24:00",de=Math.ceil(v.getTimeDiffInMinutes(ne,ae)/z),{height:se=0,ref:ce}=c(),me=!!q&&se>q,ue=void 0!==q?Math.max(1,Math.floor((q+4)/16)):0,he=q?!me||_?se:ue>0?16*ue-4:q:se,fe=r({height:he}),pe=s((()=>{if(W){const e={};return Object.entries(W).forEach((([t,r])=>{const i=function(e){const t=Array(de).fill({});return e.forEach((e=>{const r=Math.max(0,v.getTimeDiffInMinutes(ne,e.startTime)/z),i=Math.min(de,v.getTimeDiffInMinutes(ne,e.endTime)/z),o=Math.ceil(i)-Math.floor(r);switch(K){case"fixed":t[Math.floor(r)]=Object.assign(Object.assign({},e),{isActualSlot:!0,rowIndex:Math.floor(r),cellLength:i-r});break;case"flexible":for(let n=0;n<o;n++){const a=v.addMinutesToTime(ne,Math.floor(r+n)*z),d=v.addMinutesToTime(a,z);let s;l(t[Math.floor(r+n)])?0===n&&r%1!=0?s="top":n===o-1&&i%1!=0&&(s="bottom"):s=void 0,t[Math.floor(r+n)]=Object.assign(Object.assign({},e),{id:`${e.id}-${n}`,startTime:a,endTime:d,isActualSlot:!0,rowIndex:Math.floor(r+n),cellLength:1,halfFill:s})}}})),t}(r);e[t]=function(e){var t,r,i,o;let n=0;switch(K){case"fixed":for(e=e.reduce(((e,t)=>{const r=e.length>0?e[e.length-1]:e[0];return l(t)&&l(r)?e:[...e,t]}),[{}]);n<e.length;){if(l(e[n])){const l=null!==(r=null===(t=e[n-1])||void 0===t?void 0:t.endTime)&&void 0!==r?r:ne,a=null!==(o=null===(i=e[n+1])||void 0===i?void 0:i.startTime)&&void 0!==o?o:ae;if(l!==a){const t=v.getTimeDiffInMinutes(l,a)/z;e[n]=Object.assign(Object.assign({},je(n)),{startTime:l,endTime:a,cellLength:t})}}n++}break;case"flexible":for(;n<e.length;)l(e[n])?(e[n]=je(n),n++):n+=e[n].cellLength}return e.filter((e=>!l(e)&&e.cellLength>0))}(i)})),e}return{}}),[W]),ve=s((()=>le.reduce(((e,t)=>{const r=t.format(Z);return e[r]=Me(r).filter((e=>!!e.isActualSlot&&void 0!==e.rowIndex)).map((e=>({key:`${r}-${e.id}`,date:r,rowIndex:e.rowIndex}))).sort(((e,t)=>e.rowIndex-t.rowIndex)),e}),{})),[le,pe]),be=e=>{re(e)},ge=()=>{re(void 0)},ye=(e,t)=>{null==V||V(e,t)},xe=(e,t)=>r=>{r.stopPropagation(),ye(e,t)},ke=e=>{e.preventDefault(),ee((e=>!e))},Te=e=>{var t;const r=p.isWithinRange(e,F?i(F):void 0,B?i(B):void 0),l=null!==(t=E&&E.includes(e.format(Z)))&&void 0!==t&&t;return!r||l};function je(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,isActualSlot:!1,styleAttributes:{backgroundColor:f["bg-stronger"]},cellLength:t}}function we(e,t){var r;const{startTime:l,endTime:o}=t;return b.joinNonEmptyStrings([i(e).format("D MMMM YYYY dddd"),l&&o?g.formatTimeRange(l,o):void 0,t.label,null===(r=t.clickable)||void 0===r||r?"Available":"Unavailable"])}function Me(e){var t;return null!==(t=pe[e])&&void 0!==t?t:Array("flexible"===K?de:1).fill(void 0).map(((e,t)=>je(t,"fixed"===K?de:void 0)))}const De=(e,r)=>{var i;const{id:l,clickable:o=!0,isActualSlot:n,styleAttributes:a,cellLength:d,halfFill:s}=r,{styleType:c="default",backgroundColor:h,backgroundColor2:f}=a,p=`${e}-${l}`,v=me&&!_&&(null!==(i=r.rowIndex)&&void 0!==i?i:0)>=ue;return t(O,{styleType:c,bgColor:h,bgColor2:f,clickable:o,$halfFill:s,$height:"fixed"===K?12*d+4*(d-1):12,onClick:()=>o&&ye(e,r),children:n&&t(m,{inert:u(v),children:t("button",{type:"button",ref:e=>{ie.current[p]=e},"aria-disabled":!o,"aria-label":we(e,r),onKeyDown:t=>{var i;return((e,t)=>{var r;const i=null!==(r=ve[t.date])&&void 0!==r?r:[],l=e=>{var t;e&&(null===(t=ie.current[e.key])||void 0===t||t.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const r=i.findIndex((e=>e.key===t.key));l(i[r+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const r=i.findIndex((e=>e.key===t.key));l(i[r-1]);break}case"Home":case"PageUp":e.preventDefault(),l(i[0]);break;case"End":e.preventDefault(),l(i[i.length-1]);break;case"PageDown":if(e.preventDefault(),me&&!_){ee(!0);const e=[...i].reverse().find((e=>e.rowIndex<ue));l(null!=e?e:i[0]);break}l(i[i.length-1])}})(t,{key:p,date:e,rowIndex:null!==(i=r.rowIndex)&&void 0!==i?i:0})},onClick:o?xe(e,r):void 0})})},l)};return e(y,{children:[e(x,{role:"grid",children:[t(k,{role:"row",onBlur:ge,children:le.map(((e,r)=>{const l=(e=>{const t=e.format(Z),r=Te(e),i={},l=N&&!r;r&&(i.disabled=!0),i.interactive=!!N&&l;const o=l&&te&&e.isSame(te,"day"),n=[H].includes(t);return n&&o?(i.labelType="selected-hover",i.circleLeft="selected-hover-outline",i.circleRight="selected-hover-outline"):n?(i.labelType="selected",i.circleLeft="selected-outline",i.circleRight="selected-outline"):o&&(i.labelType="hover",i.circleLeft="hover-subtle",i.circleRight="hover-subtle"),i})(e);return t(h,Object.assign({date:e,calendarDate:i(H),role:"columnheader",tabIndex:l.interactive?0:-1,onSelect:()=>{((e,t)=>{!t&&N&&R(e)})(e,!l.interactive)},onHover:be,onHoverEnd:ge,onFocus:be},l),`day-${r}`)}))}),t(k,{role:"row",children:le.map(((e,r)=>t(T,{role:"gridcell",children:t(j,{weight:"semibold",$disabled:Te(e),children:i(e).format("ddd")})},`week-day-${r}`)))}),(()=>{let e=!1;const r=t=>{const r=i(ne,"HH:mm").add(4*t*z,"minutes"),l=r.format("h"),o=r.format("mm"),n=r.format("a");let a=`${l}${"00"!==o?` ${o}`:""}`;return e||"pm"!==n||"00"!==o||(a+=` ${n}`,e=!0),a};return t(w,{$height:he,"aria-hidden":!0,children:Array(Math.ceil(de/4)).fill(void 0).map(((e,i)=>t(M,{children:t(D,{children:r(i)})},`time-${i}`)))})})(),t($,{style:fe,role:"row",children:t(I,{ref:ce,children:le.map(((e,r)=>{const i=e.format(Z),l=Me(i);return t(A,{role:"gridcell",children:l.map((e=>De(i,e)))},`wrapper-${r}`)}))},`week-cell-${Y.format(Z)}`)})]}),(()=>{if(q&&ce.current)return t(S,{children:e(C,{"data-testid":"time-bar-expand-collapse-button",styleType:"light","aria-expanded":_,onClick:ke,children:[t(L,{$isExpanded:_}),(_?"Hide":"Show")+" later times"]})})})()]})};export{Y as TimeSlotBarWeekDays};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{ChevronUpIcon as r}from"@lifesg/react-icons";import{useSpring as i,animated as l}from"@react-spring/web";import o from"clsx";import a from"../external/dayjs/dayjs.min.js";import n from"../external/lodash/isEmpty.js";import s from"../external/lodash/maxBy.js";import c from"../external/lodash/minBy.js";import{useState as d,useRef as m,useMemo as u}from"react";import{useResizeDetector as f}from"../external/react-resize-detector/build/index.esm.js";import{Button as h}from"../button/button.js";import{DayCell as p}from"../shared/internal-calendar/day-cell/day-cell.js";import"../theme/theme-provider/index.js";import{formatUnitValue as v}from"../theme/utils/css-variable.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as g}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as b}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as y}from"../typography/index.js";import{CalendarHelper as j}from"../util/calendar-helper.js";import{DateHelper as x}from"../util/date-helper.js";import"../util/simple-id-generator.js";import{StringHelper as T}from"../util/string-helper.js";import"@react-aria/live-announcer";import{useIsMounted as w}from"../util/use-mount.js";import{TimeHelper as k}from"../util/time-helper.js";import{ROW_HEIGHT as M,SLOT_GAP as D}from"./consts.js";import{tokens as N,wrapper as S,gridWrapper as A,headerCellWeekColumn as I,headerCellWeek as $,cellWeekTextDisabled as C,timeColumn as L,timeColumnWrapper as O,timeColumnText as R,expandable as Y,columnWeekCell as H,timeSlotWrapper as B,collapseExpandAllWrapper as E,collapseExpandAllButton as F,collapseExpandAllButtonContent as P,chevronIcon as U,chevronIconExpanded as q}from"./time-slot-bar-week-days.styles.js";import{WeekTimeSlotCell as z}from"./time-slot-cell.js";const W=({calendarDate:W,disabledDates:K,selectedDate:V,onSelect:X,minDate:G,maxDate:J,startTime:Q,endTime:Z,maxVisibleCellHeight:_,slots:ee,interval:te=30,variant:re="flexible",enableSelection:ie=!0,onSlotClick:le})=>{var oe,ae,ne,se;const ce="YYYY-MM-DD",[de,me]=d(!1),[ue,fe]=d(),he=w(),pe=m({}),ve=m(null),ge=u((()=>j.generateDaysForCurrentWeek(W)),[W]),be=Object.values(null!=ee?ee:{}).flat(),ye=null!==(ae=null!=Q?Q:null===(oe=c(be,"startTime"))||void 0===oe?void 0:oe.startTime)&&void 0!==ae?ae:"00:00",je=null!==(se=null!=Z?Z:null===(ne=s(be,"endTime"))||void 0===ne?void 0:ne.endTime)&&void 0!==se?se:"24:00",xe=Math.ceil(x.getTimeDiffInMinutes(ye,je)/te),{height:Te=0,ref:we}=f(),ke=!!_&&Te>_,Me=void 0!==_?Math.max(1,Math.floor((_+D)/M)):0,De=_?!ke||de?Te:Me>0?Me*M-D:_:Te,Ne=i({height:De}),Se=u((()=>{if(ee){const e={};return Object.entries(ee).forEach((([t,r])=>{const i=function(e){const t=Array(xe).fill({});return e.forEach((e=>{const r=Math.max(0,x.getTimeDiffInMinutes(ye,e.startTime)/te),i=Math.min(xe,x.getTimeDiffInMinutes(ye,e.endTime)/te),l=Math.ceil(i)-Math.floor(r);switch(re){case"fixed":t[Math.floor(r)]=Object.assign(Object.assign({},e),{isActualSlot:!0,rowIndex:Math.floor(r),cellLength:i-r});break;case"flexible":for(let o=0;o<l;o++){const a=x.addMinutesToTime(ye,Math.floor(r+o)*te),s=x.addMinutesToTime(a,te);let c;c=n(t[Math.floor(r+o)])?0===o&&r%1!=0?"top":o===l-1&&i%1!=0?"bottom":"default":"default",t[Math.floor(r+o)]=Object.assign(Object.assign({},e),{id:`${e.id}-${o}`,startTime:a,endTime:s,isActualSlot:!0,rowIndex:Math.floor(r+o),cellLength:1,halfFill:c})}}})),t}(r);e[t]=function(e){var t,r,i,l;let o=0;switch(re){case"fixed":for(e=e.reduce(((e,t)=>{const r=e.length>0?e[e.length-1]:e[0];return n(t)&&n(r)?e:[...e,t]}),[{}]);o<e.length;){if(n(e[o])){const a=null!==(r=null===(t=e[o-1])||void 0===t?void 0:t.endTime)&&void 0!==r?r:ye,n=null!==(l=null===(i=e[o+1])||void 0===i?void 0:i.startTime)&&void 0!==l?l:je;if(a!==n){const t=x.getTimeDiffInMinutes(a,n)/te;e[o]=Object.assign(Object.assign({},He(o)),{startTime:a,endTime:n,cellLength:t})}}o++}break;case"flexible":for(;o<e.length;)n(e[o])?(e[o]=He(o),o++):o+=e[o].cellLength}return e.filter((e=>!n(e)&&e.cellLength>0))}(i)})),e}return{}}),[ee]),Ae=u((()=>ge.reduce(((e,t)=>{const r=t.format(ce);return e[r]=Ee(r).filter((e=>!!e.isActualSlot&&void 0!==e.rowIndex)).map((e=>({key:`${r}-${e.id}`,date:r,rowIndex:e.rowIndex}))).sort(((e,t)=>e.rowIndex-t.rowIndex)),e}),{})),[ge,Se]);b(ve,{[N.timeColumn.height]:v(De,"px")});const Ie=e=>{fe(e)},$e=()=>{fe(void 0)},Ce=(e,t)=>{null==le||le(e,t)},Le=(e,t)=>r=>{r.stopPropagation(),Ce(e,t)},Oe=e=>{e.preventDefault(),me((e=>!e))},Re=(e,t)=>{var r;const i=null!==(r=Ae[t.date])&&void 0!==r?r:[],l=e=>{var t;e&&(null===(t=pe.current[e.key])||void 0===t||t.focus())};switch(e.key){case"ArrowRight":case"ArrowDown":{e.preventDefault();const r=i.findIndex((e=>e.key===t.key));l(i[r+1]);break}case"ArrowLeft":case"ArrowUp":{e.preventDefault();const r=i.findIndex((e=>e.key===t.key));l(i[r-1]);break}case"Home":case"PageUp":e.preventDefault(),l(i[0]);break;case"End":e.preventDefault(),l(i[i.length-1]);break;case"PageDown":if(e.preventDefault(),ke&&!de){me(!0);const e=[...i].reverse().find((e=>e.rowIndex<Me));l(null!=e?e:i[0]);break}l(i[i.length-1])}},Ye=e=>{var t;const r=j.isWithinRange(e,G?a(G):void 0,J?a(J):void 0),i=null!==(t=K&&K.includes(e.format(ce)))&&void 0!==t&&t;return!r||i};function He(e,t=1){return{id:`${e.toString()}-${(new Date).getTime()}`,startTime:"",endTime:"",clickable:!1,isActualSlot:!1,styleAttributes:{backgroundColor:g["bg-stronger"]},cellLength:t}}function Be(e,t){var r;const{startTime:i,endTime:l}=t;return T.joinNonEmptyStrings([a(e).format("D MMMM YYYY dddd"),i&&l?k.formatTimeRange(i,l):void 0,t.label,null===(r=t.clickable)||void 0===r||r?"Available":"Unavailable"])}function Ee(e){var t;return null!==(t=Se[e])&&void 0!==t?t:Array("flexible"===re?xe:1).fill(void 0).map(((e,t)=>He(t,"fixed"===re?xe:void 0)))}return e("div",{className:S,children:[e("div",{className:A,role:"grid",children:[t("div",{className:I,role:"row",onBlur:$e,children:ge.map(((e,r)=>{const i=(e=>{const t=e.format(ce),r=Ye(e),i={},l=ie&&!r;r&&(i.disabled=!0),i.interactive=!!ie&&l;const o=l&&ue&&e.isSame(ue,"day"),a=[V].includes(t);return a&&o?(i.labelType="selected-hover",i.circleLeft="selected-hover-outline",i.circleRight="selected-hover-outline"):a?(i.labelType="selected",i.circleLeft="selected-outline",i.circleRight="selected-outline"):o&&(i.labelType="hover",i.circleLeft="hover-subtle",i.circleRight="hover-subtle"),i})(e);return t(p,Object.assign({date:e,calendarDate:a(V),role:"columnheader",tabIndex:i.interactive?0:-1,onSelect:()=>{((e,t)=>{!t&&ie&&X(e)})(e,!i.interactive)},onHover:Ie,onHoverEnd:$e,onFocus:Ie},i),`day-${r}`)}))}),t("div",{className:I,role:"row",children:ge.map(((e,r)=>t("div",{className:$,role:"gridcell",children:t(y.BodyXS,{weight:"semibold",className:o(Ye(e)&&C),children:a(e).format("ddd")})},`week-day-${r}`)))}),(()=>{let e=!1;const r=t=>{const r=a(ye,"HH:mm").add(4*t*te,"minutes"),i=r.format("h"),l=r.format("mm"),o=r.format("a");let n=`${i}${"00"!==l?` ${l}`:""}`;return e||"pm"!==o||"00"!==l||(n+=` ${o}`,e=!0),n};return t("div",{className:L,ref:ve,"aria-hidden":!0,children:Array(Math.ceil(xe/4)).fill(void 0).map(((e,i)=>t("div",{className:O,children:t("div",{className:R,children:r(i)})},`time-${i}`)))})})(),t(l.div,{className:Y,style:he?Ne:void 0,role:"row",children:t("div",{className:H,ref:we,children:ge.map(((e,r)=>{const i=e.format(ce),l=Ee(i);return t("div",{className:B,role:"gridcell",children:l.map((e=>((e,r)=>t(z,{formattedDate:e,slot:r,variant:re,hasCollapsedContent:ke,expandAll:de,visibleRowCount:Me,onSlotClick:Ce,getSlotAriaLabel:Be,onSlotKeyDown:Re,onSlotButtonClick:Le,slotButtonRefs:pe},r.id))(i,e)))},`wrapper-${r}`)}))},`week-cell-${W.format(ce)}`)})]}),(()=>{if(_&&we.current)return t("div",{className:E,children:t(h,{"data-testid":"time-bar-expand-collapse-button",styleType:"light",sizeType:"small","aria-expanded":de,onClick:Oe,className:F,children:e("span",{className:P,children:[t(r,{className:o(U,de&&q)}),(de?"Hide":"Show")+" later times"]})})})})()]})};export{W as TimeSlotBarWeekDays};
 //# sourceMappingURL=time-slot-bar-week-days.js.map

package/time-slot-bar-week/time-slot-bar-week-days.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"time-slot-bar-week-days.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.tsx"],"sourcesContent":["import { useSpring } from \"@react-spring/web\";\nimport type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isEmpty from \"lodash/isEmpty\";\nimport maxBy from \"lodash/maxBy\";\nimport minBy from \"lodash/minBy\";\nimport type React from \"react\";\nimport { useMemo, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport { Colour } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { DateHelper } from \"../util\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { StringHelper } from \"../util/string-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport {\n CellWeekText,\n ChevronIcon,\n CollapseExpandAllButton,\n CollapseExpandAllWrapper,\n ColumnWeekCell,\n Expandable,\n GridWrapper,\n HeaderCellWeek,\n HeaderCellWeekColumn,\n TimeColumn,\n TimeColumnText,\n TimeColumnWrapper,\n TimeSlotComponent,\n TimeSlotWrapper,\n Wrapper,\n} from \"./time-slot-bar-week-days.style\";\nimport type { TimeSlotCellsVariant } from \"./types\";\n\ninterface TimeSlotWeekDaysProps\n extends Pick<\n InternalCalendarProps,\n \"disabledDates\" \| \"minDate\" \| \"maxDate\"\n > {\n selectedDate: string \| undefined;\n calendarDate: Dayjs;\n onSelect: (value: Dayjs) => void;\n slots: { [date: string]: TimeSlot[] };\n startTime?: string \| undefined;\n endTime?: string \| undefined;\n maxVisibleCellHeight?: number \| undefined;\n interval?: number \| undefined;\n variant?: TimeSlotCellsVariant \| undefined;\n enableSelection?: boolean \| undefined;\n onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) \| undefined;\n}\n\ninterface TimeSlotCell extends TimeSlot {\n cellLength: number;\n halfFill?: \"top\" \| \"bottom\" \| undefined;\n isActualSlot?: boolean \| undefined;\n rowIndex?: number \| undefined;\n}\n\ninterface FocusableSlotMeta {\n key: string;\n date: string;\n rowIndex: number;\n}\n\nconst SLOT_HEIGHT = 12; // px\nconst SLOT_GAP = 4; // px\nconst ROW_HEIGHT = SLOT_HEIGHT + SLOT_GAP;\n\nexport const TimeSlotBarWeekDays = ({\n calendarDate,\n disabledDates,\n selectedDate,\n onSelect,\n minDate,\n maxDate,\n startTime,\n endTime,\n maxVisibleCellHeight,\n slots: daySlots,\n interval = 30,\n variant = \"flexible\",\n enableSelection = true,\n onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const dateFormat = \"YYYY-MM-DD\";\n const [expandAll, setExpandAll] = useState<boolean>(false);\n const [hoverDay, setHoverDay] = useState<Dayjs>();\n const slotButtonRefs = useRef<Record<string, HTMLButtonElement \| null>>({});\n const currentCalendarWeek = useMemo((): Dayjs[] => {\n return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n }, [calendarDate]);\n\n const flattenedSlots = Object.values(daySlots ?? {}).flat();\n const minStartTime =\n startTime ?? minBy(flattenedSlots, \"startTime\")?.startTime ?? \"00:00\";\n const maxEndTime =\n endTime ?? maxBy(flattenedSlots, \"endTime\")?.endTime ?? \"24:00\";\n const numberOfCells = Math.ceil(\n DateHelper.getTimeDiffInMinutes(minStartTime, maxEndTime) / interval\n );\n\n // React spring animation configuration\n const { height: actualHeight = 0, ref: cellsRef } = useResizeDetector();\n const hasCollapsedContent =\n !!maxVisibleCellHeight && actualHeight > maxVisibleCellHeight;\n const visibleRowCount =\n maxVisibleCellHeight !== undefined\n ? Math.max(\n 1,\n Math.floor((maxVisibleCellHeight + SLOT_GAP) / ROW_HEIGHT)\n )\n : 0;\n const collapsedHeight =\n visibleRowCount > 0\n ? visibleRowCount * ROW_HEIGHT - SLOT_GAP\n : maxVisibleCellHeight;\n const height = maxVisibleCellHeight\n ? !hasCollapsedContent \|\| expandAll\n ? actualHeight\n : collapsedHeight\n : actualHeight;\n const expandableStyles = useSpring({ height });\n\n const generatedDaySlots = useMemo((): {\n [date: string]: TimeSlotCell[];\n } => {\n if (daySlots) {\n const transformedDaySlots: Record<string, TimeSlotCell[]> = {};\n Object.entries(daySlots).forEach(([key, slots]) => {\n const cellsArray = initializeAndFillSlots(slots);\n transformedDaySlots[key] = populateEmptyCells(cellsArray);\n });\n return transformedDaySlots;\n }\n return {};\n }, [daySlots]);\n\n const focusableSlotsByDate = useMemo(() => {\n return currentCalendarWeek.reduce<Record<string, FocusableSlotMeta[]>>(\n (result, day) => {\n const formattedDate = day.format(dateFormat);\n\n result[formattedDate] = getCellsForDate(formattedDate)\n .filter(\n (\n slot\n ): slot is TimeSlotCell & {\n isActualSlot: true;\n rowIndex: number;\n } => !!slot.isActualSlot && slot.rowIndex !== undefined\n )\n .map((slot) => ({\n key: `${formattedDate}-${slot.id}`,\n date: formattedDate,\n rowIndex: slot.rowIndex,\n }))\n .sort((a, b) => a.rowIndex - b.rowIndex);\n\n return result;\n },\n {}\n );\n }, [currentCalendarWeek, generatedDaySlots]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n if (isDisabled \|\| !enableSelection) return;\n\n onSelect(value);\n };\n\n const handleDayHover = (value: Dayjs) => {\n setHoverDay(value);\n };\n\n const handleDayHoverClear = () => {\n setHoverDay(undefined);\n };\n\n const handleSlotClick = (date: string, slot: TimeSlot) => {\n onSlotClick?.(date, slot);\n };\n\n const handleSlotButtonClick =\n (date: string, slot: TimeSlot) =>\n (event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n handleSlotClick(date, slot);\n };\n\n const handleExpandCollapseClick = (event: React.MouseEvent) => {\n event.preventDefault();\n setExpandAll((prevExpandValue) => !prevExpandValue);\n };\n\n const handleSlotKeyDown = (\n event: React.KeyboardEvent<HTMLButtonElement>,\n currentSlot: FocusableSlotMeta\n ) => {\n const sameColumnSlots = focusableSlotsByDate[currentSlot.date] ?? [];\n\n const focusSlot = (slot?: FocusableSlotMeta) => {\n if (!slot) return;\n slotButtonRefs.current[slot.key]?.focus();\n };\n\n switch (event.key) {\n case \"ArrowRight\":\n case \"ArrowDown\": {\n event.preventDefault();\n const currentIndex = sameColumnSlots.findIndex(\n (slot) => slot.key === currentSlot.key\n );\n focusSlot(sameColumnSlots[currentIndex + 1]);\n break;\n }\n case \"ArrowLeft\":\n case \"ArrowUp\": {\n event.preventDefault();\n const currentIndex = sameColumnSlots.findIndex(\n (slot) => slot.key === currentSlot.key\n );\n focusSlot(sameColumnSlots[currentIndex - 1]);\n break;\n }\n case \"Home\":\n event.preventDefault();\n focusSlot(sameColumnSlots[0]);\n break;\n case \"End\":\n event.preventDefault();\n focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n break;\n case \"PageUp\":\n event.preventDefault();\n focusSlot(sameColumnSlots[0]);\n break;\n case \"PageDown\": {\n event.preventDefault();\n if (hasCollapsedContent && !expandAll) {\n setExpandAll(true);\n const lastVisibleSlot = [...sameColumnSlots]\n .reverse()\n .find((slot) => slot.rowIndex < visibleRowCount);\n focusSlot(lastVisibleSlot ?? sameColumnSlots[0]);\n break;\n }\n\n focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n break;\n }\n default:\n break;\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const isDisabled = (day: Dayjs): boolean => {\n const isWithinRange = CalendarHelper.isWithinRange(\n day,\n minDate ? dayjs(minDate) : undefined,\n maxDate ? dayjs(maxDate) : undefined\n );\n\n const isDisabledDate =\n (disabledDates && disabledDates.includes(day.format(dateFormat))) ??\n false;\n\n return !isWithinRange \|\| isDisabledDate;\n };\n\n const generateStyleProps = (day: Dayjs) => {\n const dateStartWithYear = day.format(dateFormat);\n const disabled = isDisabled(day);\n const dayCellStyleProps: CellStyleProps = {};\n const isHoverEnabled = enableSelection && !disabled;\n\n if (disabled) {\n dayCellStyleProps.disabled = true;\n }\n\n dayCellStyleProps.interactive = enableSelection\n ? isHoverEnabled\n : false;\n\n const isHover =\n isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n const isSelected = [selectedDate].includes(dateStartWithYear);\n\n if (isSelected && isHover) {\n dayCellStyleProps.labelType = \"selected-hover\";\n dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n dayCellStyleProps.circleRight = \"selected-hover-outline\";\n } else if (isSelected) {\n dayCellStyleProps.labelType = \"selected\";\n dayCellStyleProps.circleLeft = \"selected-outline\";\n dayCellStyleProps.circleRight = \"selected-outline\";\n } else if (isHover) {\n dayCellStyleProps.labelType = \"hover\";\n dayCellStyleProps.circleLeft = \"hover-subtle\";\n dayCellStyleProps.circleRight = \"hover-subtle\";\n }\n\n return dayCellStyleProps;\n };\n\n function generateFallbackCell(\n prefix: string \| number,\n cellLength = 1\n ): TimeSlotCell {\n return {\n id: `${prefix.toString()}-${new Date().getTime()}`,\n startTime: \"\",\n endTime: \"\",\n clickable: false,\n isActualSlot: false,\n styleAttributes: {\n backgroundColor: Colour[\"bg-stronger\"],\n },\n cellLength,\n };\n }\n\n function getSlotAriaLabel(date: string, slot: TimeSlot) {\n const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n return StringHelper.joinNonEmptyStrings([\n dayjs(date).format(\"D MMMM YYYY dddd\"),\n slotStartTime && slotEndTime\n ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)\n : undefined,\n slot.label,\n slot.clickable ?? true ? \"Available\" : \"Unavailable\",\n ]);\n }\n\n function initializeAndFillSlots(slots: TimeSlot[]): TimeSlotCell[] {\n const cellsArray = Array(numberOfCells).fill({});\n\n slots.forEach((slot) => {\n const startIndex = Math.max(\n 0,\n DateHelper.getTimeDiffInMinutes(minStartTime, slot.startTime) /\n interval\n );\n const endIndex = Math.min(\n numberOfCells,\n DateHelper.getTimeDiffInMinutes(minStartTime, slot.endTime) /\n interval\n );\n const cellLength = Math.ceil(endIndex) - Math.floor(startIndex);\n\n switch (variant) {\n case \"fixed\":\n // Keep fixed slots as 1 long cell\n cellsArray[Math.floor(startIndex)] = {\n ...slot,\n isActualSlot: true,\n rowIndex: Math.floor(startIndex),\n cellLength: endIndex - startIndex,\n };\n break;\n case \"flexible\":\n // Split long slot into multiple cells of length 1\n for (let i = 0; i < cellLength; i++) {\n const startTime = DateHelper.addMinutesToTime(\n minStartTime,\n Math.floor(startIndex + i) * interval\n );\n const endTime = DateHelper.addMinutesToTime(\n startTime,\n interval\n );\n\n let halfFill: string \| undefined;\n\n if (!isEmpty(cellsArray[Math.floor(startIndex + i)])) {\n // Previous cell extends into current cell, fill entire cell\n halfFill = undefined;\n } else if (i === 0 && startIndex % 1 !== 0) {\n halfFill = \"top\";\n } else if (i === cellLength - 1 && endIndex % 1 !== 0) {\n halfFill = \"bottom\";\n }\n\n cellsArray[Math.floor(startIndex + i)] = {\n ...slot,\n id: `${slot.id}-${i}`,\n startTime,\n endTime,\n isActualSlot: true,\n rowIndex: Math.floor(startIndex + i),\n cellLength: 1,\n halfFill,\n };\n }\n break;\n }\n });\n return cellsArray;\n }\n\n function populateEmptyCells(cellsArray: any[]): TimeSlotCell[] {\n let i = 0;\n switch (variant) {\n case \"fixed\":\n // Truncate consecutive empty cells into 1 [{},{},{...},{},{}] -> [{},{...},{}]\n cellsArray = cellsArray.reduce(\n (result, obj) => {\n const lastObj =\n result.length > 0\n ? result[result.length - 1]\n : result[0];\n if (isEmpty(obj) && isEmpty(lastObj)) {\n return result;\n }\n return [...result, obj];\n },\n [{}]\n );\n\n // Fill in empty cells with timings & corresponding cell lengths\n while (i < cellsArray.length) {\n if (isEmpty(cellsArray[i])) {\n const startTime =\n cellsArray[i - 1]?.endTime ?? minStartTime;\n const endTime =\n cellsArray[i + 1]?.startTime ?? maxEndTime;\n if (startTime !== endTime) {\n const cellLength =\n DateHelper.getTimeDiffInMinutes(\n startTime,\n endTime\n ) / interval;\n cellsArray[i] = {\n ...generateFallbackCell(i),\n startTime,\n endTime,\n cellLength,\n };\n }\n }\n i++;\n }\n break;\n case \"flexible\":\n // Fill in individual empty cell with interval timings\n while (i < cellsArray.length) {\n if (isEmpty(cellsArray[i])) {\n cellsArray[i] = generateFallbackCell(i);\n i++;\n } else {\n i += cellsArray[i].cellLength;\n }\n }\n break;\n }\n return cellsArray.filter(\n (slot) => !isEmpty(slot) && slot.cellLength > 0\n );\n }\n\n function getCellsForDate(formattedDate: string) {\n return (\n generatedDaySlots[formattedDate] ??\n Array(variant === \"flexible\" ? numberOfCells : 1)\n .fill(undefined)\n .map((_, index) =>\n generateFallbackCell(\n index,\n variant === \"fixed\" ? numberOfCells : undefined\n )\n )\n );\n }\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderWeek = () => {\n return (\n <HeaderCellWeekColumn role=\"row\">\n {currentCalendarWeek.map((day, index) => (\n <HeaderCellWeek key={`week-day-${index}`} role=\"gridcell\">\n <CellWeekText\n weight={\"semibold\"}\n $disabled={isDisabled(day)}\n >\n {dayjs(day).format(\"ddd\")}\n </CellWeekText>\n </HeaderCellWeek>\n ))}\n </HeaderCellWeekColumn>\n );\n };\n\n const renderHeader = () => {\n return (\n <HeaderCellWeekColumn role=\"row\" onBlur={handleDayHoverClear}>\n {currentCalendarWeek.map((day, dayIndex) => {\n const dayCellStyleProps = generateStyleProps(day);\n\n return (\n <DayCell\n key={`day-${dayIndex}`}\n date={day}\n calendarDate={dayjs(selectedDate)}\n role=\"columnheader\"\n tabIndex={dayCellStyleProps.interactive ? 0 : -1}\n onSelect={() => {\n handleDayClick(\n day,\n !dayCellStyleProps.interactive\n );\n }}\n onHover={handleDayHover}\n onHoverEnd={handleDayHoverClear}\n onFocus={handleDayHover}\n {...dayCellStyleProps}\n ></DayCell>\n );\n })}\n </HeaderCellWeekColumn>\n );\n };\n\n const renderTimeColumn = () => {\n let hasSetFirstAfternoonHour = false;\n\n const formatTime = (index: number) => {\n const parsedTime = dayjs(minStartTime, \"HH:mm\").add(\n index * 4 * interval,\n \"minutes\"\n );\n const hour = parsedTime.format(\"h\");\n const minutes = parsedTime.format(\"mm\");\n const amPm = parsedTime.format(\"a\");\n\n let formattedTime = `${hour}${\n minutes !== \"00\" ? ` ${minutes}` : \"\"\n }`;\n\n if (\n !hasSetFirstAfternoonHour &&\n amPm === \"pm\" &&\n minutes === \"00\"\n ) {\n formattedTime += ` ${amPm}`;\n hasSetFirstAfternoonHour = true;\n }\n\n return formattedTime;\n };\n\n return (\n <TimeColumn $height={height} aria-hidden>\n {Array(Math.ceil(numberOfCells / 4))\n .fill(undefined)\n .map((_, index) => (\n <TimeColumnWrapper key={`time-${index}`}>\n <TimeColumnText>{formatTime(index)}</TimeColumnText>\n </TimeColumnWrapper>\n ))}\n </TimeColumn>\n );\n };\n const renderSlotCell = (formattedDate: string, slot: TimeSlotCell) => {\n const {\n id,\n clickable = true,\n isActualSlot,\n styleAttributes,\n cellLength,\n halfFill,\n } = slot;\n const {\n styleType = \"default\",\n backgroundColor,\n backgroundColor2,\n } = styleAttributes;\n const slotId = `${formattedDate}-${id}`;\n const isCollapsedSlot =\n hasCollapsedContent &&\n !expandAll &&\n (slot.rowIndex ?? 0) >= visibleRowCount;\n\n return (\n <TimeSlotComponent\n key={id}\n styleType={styleType}\n bgColor={backgroundColor}\n bgColor2={backgroundColor2}\n clickable={clickable}\n $halfFill={halfFill}\n $height={\n variant === \"fixed\"\n ? cellLength * SLOT_HEIGHT + (cellLength - 1) * SLOT_GAP\n : SLOT_HEIGHT\n }\n onClick={() =>\n clickable && handleSlotClick(formattedDate, slot)\n }\n >\n {isActualSlot && (\n <VisuallyHidden inert={inertValue(isCollapsedSlot)}>\n <button\n type=\"button\"\n ref={(element) => {\n slotButtonRefs.current[slotId] = element;\n }}\n aria-disabled={!clickable}\n aria-label={getSlotAriaLabel(formattedDate, slot)}\n onKeyDown={(event) =>\n handleSlotKeyDown(event, {\n key: slotId,\n date: formattedDate,\n rowIndex: slot.rowIndex ?? 0,\n })\n }\n onClick={\n clickable\n ? handleSlotButtonClick(formattedDate, slot)\n : undefined\n }\n />\n </VisuallyHidden>\n )}\n </TimeSlotComponent>\n );\n };\n\n const renderTimeSlotBarCells = () => {\n return (\n <Expandable style={expandableStyles} role=\"row\">\n <ColumnWeekCell\n ref={cellsRef}\n key={`week-cell-${calendarDate.format(dateFormat)}`}\n >\n {currentCalendarWeek.map((day, dayIndex) => {\n const formattedDate = day.format(dateFormat);\n const cellsArray = getCellsForDate(formattedDate);\n return (\n <TimeSlotWrapper\n key={`wrapper-${dayIndex}`}\n role=\"gridcell\"\n >\n {cellsArray.map((slot) =>\n renderSlotCell(formattedDate, slot)\n )}\n </TimeSlotWrapper>\n );\n })}\n </ColumnWeekCell>\n </Expandable>\n );\n };\n\n const renderCollapseExpandAll = () => {\n if (!maxVisibleCellHeight \|\| !cellsRef.current) return;\n return (\n <CollapseExpandAllWrapper>\n <CollapseExpandAllButton\n data-testid=\"time-bar-expand-collapse-button\"\n styleType=\"light\"\n aria-expanded={expandAll}\n onClick={handleExpandCollapseClick}\n >\n <ChevronIcon $isExpanded={expandAll} />\n {`${expandAll ? \"Hide\" : \"Show\"} later times`}\n </CollapseExpandAllButton>\n </CollapseExpandAllWrapper>\n );\n };\n\n return (\n <Wrapper>\n <GridWrapper role=\"grid\">\n {renderHeader()}\n {renderWeek()}\n {renderTimeColumn()}\n {renderTimeSlotBarCells()}\n </GridWrapper>\n {renderCollapseExpandAll()}\n </Wrapper>\n );\n};\n"],"names":["TimeSlotBarWeekDays","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","startTime","endTime","maxVisibleCellHeight","slots","daySlots","interval","variant","enableSelection","onSlotClick","dateFormat","expandAll","setExpandAll","useState","hoverDay","setHoverDay","slotButtonRefs","useRef","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","flattenedSlots","Object","values","flat","minStartTime","_b","_a","minBy","maxEndTime","_d","_c","maxBy","numberOfCells","Math","ceil","DateHelper","getTimeDiffInMinutes","height","actualHeight","ref","cellsRef","useResizeDetector","hasCollapsedContent","visibleRowCount","undefined","max","floor","SLOT_HEIGHT","expandableStyles","useSpring","generatedDaySlots","transformedDaySlots","entries","forEach","key","cellsArray","Array","fill","slot","startIndex","endIndex","min","cellLength","assign","isActualSlot","rowIndex","i","addMinutesToTime","halfFill","isEmpty","id","initializeAndFillSlots","reduce","result","obj","lastObj","length","generateFallbackCell","filter","populateEmptyCells","focusableSlotsByDate","day","formattedDate","format","getCellsForDate","map","date","sort","a","b","handleDayHover","value","handleDayHoverClear","handleSlotClick","handleSlotButtonClick","event","stopPropagation","handleExpandCollapseClick","preventDefault","prevExpandValue","isDisabled","isWithinRange","dayjs","isDisabledDate","includes","prefix","toString","Date","getTime","clickable","styleAttributes","backgroundColor","Colour","getSlotAriaLabel","slotStartTime","slotEndTime","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","label","_","index","renderSlotCell","styleType","backgroundColor2","slotId","isCollapsedSlot","_jsx","TimeSlotComponent","bgColor","bgColor2","$height","onClick","children","VisuallyHidden","inert","inertValue","type","element","current","onKeyDown","currentSlot","sameColumnSlots","focusSlot","focus","currentIndex","findIndex","lastVisibleSlot","reverse","find","handleSlotKeyDown","_jsxs","Wrapper","GridWrapper","role","HeaderCellWeekColumn","onBlur","dayIndex","dayCellStyleProps","dateStartWithYear","disabled","isHoverEnabled","interactive","isHover","isSame","isSelected","labelType","circleLeft","circleRight","generateStyleProps","DayCell","tabIndex","handleDayClick","onHover","onHoverEnd","onFocus","HeaderCellWeek","CellWeekText","weight","$disabled","hasSetFirstAfternoonHour","formatTime","parsedTime","add","hour","minutes","amPm","formattedTime","TimeColumn","TimeColumnWrapper","TimeColumnText","renderTimeColumn","Expandable","style","ColumnWeekCell","TimeSlotWrapper","CollapseExpandAllWrapper","CollapseExpandAllButton","ChevronIcon","renderCollapseExpandAll"],"mappings":"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"}
1	+ {"version":3,"file":"time-slot-bar-week-days.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type { Dayjs } from \"dayjs\";\nimport dayjs from \"dayjs\";\nimport isEmpty from \"lodash/isEmpty\";\nimport maxBy from \"lodash/maxBy\";\nimport minBy from \"lodash/minBy\";\nimport { useMemo, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Button } from \"../button\";\nimport type { InternalCalendarProps } from \"../shared/internal-calendar\";\nimport type { CellStyleProps } from \"../shared/internal-calendar/day-cell\";\nimport { DayCell } from \"../shared/internal-calendar/day-cell\";\nimport { Colour, formatUnitValue, useApplyStyle } from \"../theme\";\nimport type { TimeSlot } from \"../time-slot-bar/types\";\nimport { Typography } from \"../typography\";\nimport { DateHelper, useIsMounted } from \"../util\";\nimport { CalendarHelper } from \"../util/calendar-helper\";\nimport { StringHelper } from \"../util/string-helper\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { ROW_HEIGHT, SLOT_GAP } from \"./consts\";\nimport * as styles from \"./time-slot-bar-week-days.styles\";\nimport type { FocusableSlotMeta, TimeSlotCell } from \"./time-slot-cell\";\nimport { WeekTimeSlotCell } from \"./time-slot-cell\";\nimport type { TimeSlotCellsVariant } from \"./types\";\n\ninterface TimeSlotWeekDaysProps\n extends Pick<\n InternalCalendarProps,\n \"disabledDates\" \| \"minDate\" \| \"maxDate\"\n > {\n selectedDate: string \| undefined;\n calendarDate: Dayjs;\n onSelect: (value: Dayjs) => void;\n slots: { [date: string]: TimeSlot[] };\n startTime?: string \| undefined;\n endTime?: string \| undefined;\n maxVisibleCellHeight?: number \| undefined;\n interval?: number \| undefined;\n variant?: TimeSlotCellsVariant \| undefined;\n enableSelection?: boolean \| undefined;\n onSlotClick?: ((date: string, timeSlot: TimeSlot) => void) \| undefined;\n}\n\nexport const TimeSlotBarWeekDays = ({\n calendarDate,\n disabledDates,\n selectedDate,\n onSelect,\n minDate,\n maxDate,\n startTime,\n endTime,\n maxVisibleCellHeight,\n slots: daySlots,\n interval = 30,\n variant = \"flexible\",\n enableSelection = true,\n onSlotClick,\n}: TimeSlotWeekDaysProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const dateFormat = \"YYYY-MM-DD\";\n const [expandAll, setExpandAll] = useState<boolean>(false);\n const [hoverDay, setHoverDay] = useState<Dayjs>();\n const isMounted = useIsMounted();\n const slotButtonRefs = useRef<Record<string, HTMLButtonElement \| null>>({});\n const timeColumnRef = useRef<HTMLDivElement>(null);\n const currentCalendarWeek = useMemo((): Dayjs[] => {\n return CalendarHelper.generateDaysForCurrentWeek(calendarDate);\n }, [calendarDate]);\n\n const flattenedSlots = Object.values(daySlots ?? {}).flat();\n const minStartTime =\n startTime ?? minBy(flattenedSlots, \"startTime\")?.startTime ?? \"00:00\";\n const maxEndTime =\n endTime ?? maxBy(flattenedSlots, \"endTime\")?.endTime ?? \"24:00\";\n const numberOfCells = Math.ceil(\n DateHelper.getTimeDiffInMinutes(minStartTime, maxEndTime) / interval\n );\n\n // React spring animation configuration\n const { height: actualHeight = 0, ref: cellsRef } = useResizeDetector();\n const hasCollapsedContent =\n !!maxVisibleCellHeight && actualHeight > maxVisibleCellHeight;\n const visibleRowCount =\n maxVisibleCellHeight !== undefined\n ? Math.max(\n 1,\n Math.floor((maxVisibleCellHeight + SLOT_GAP) / ROW_HEIGHT)\n )\n : 0;\n const collapsedHeight =\n visibleRowCount > 0\n ? visibleRowCount * ROW_HEIGHT - SLOT_GAP\n : maxVisibleCellHeight;\n const height = maxVisibleCellHeight\n ? !hasCollapsedContent \|\| expandAll\n ? actualHeight\n : collapsedHeight\n : actualHeight;\n const expandableStyles = useSpring({ height });\n\n const generatedDaySlots = useMemo((): {\n [date: string]: TimeSlotCell[];\n } => {\n if (daySlots) {\n const transformedDaySlots: Record<string, TimeSlotCell[]> = {};\n Object.entries(daySlots).forEach(([key, slots]) => {\n const cellsArray = initializeAndFillSlots(slots);\n transformedDaySlots[key] = populateEmptyCells(cellsArray);\n });\n return transformedDaySlots;\n }\n return {};\n }, [daySlots]);\n\n const focusableSlotsByDate = useMemo(() => {\n return currentCalendarWeek.reduce<Record<string, FocusableSlotMeta[]>>(\n (result, day) => {\n const formattedDate = day.format(dateFormat);\n\n result[formattedDate] = getCellsForDate(formattedDate)\n .filter(\n (\n slot\n ): slot is TimeSlotCell & {\n isActualSlot: true;\n rowIndex: number;\n } => !!slot.isActualSlot && slot.rowIndex !== undefined\n )\n .map((slot) => ({\n key: `${formattedDate}-${slot.id}`,\n date: formattedDate,\n rowIndex: slot.rowIndex,\n }))\n .sort((a, b) => a.rowIndex - b.rowIndex);\n\n return result;\n },\n {}\n );\n }, [currentCalendarWeek, generatedDaySlots]);\n\n useApplyStyle(timeColumnRef, {\n [styles.tokens.timeColumn.height]: formatUnitValue(height, \"px\"),\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleDayClick = (value: Dayjs, isDisabled: boolean) => {\n if (isDisabled \|\| !enableSelection) return;\n\n onSelect(value);\n };\n\n const handleDayHover = (value: Dayjs) => {\n setHoverDay(value);\n };\n\n const handleDayHoverClear = () => {\n setHoverDay(undefined);\n };\n\n const handleSlotClick = (date: string, slot: TimeSlot) => {\n onSlotClick?.(date, slot);\n };\n\n const handleSlotButtonClick =\n (date: string, slot: TimeSlot) =>\n (event: React.MouseEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n\n handleSlotClick(date, slot);\n };\n\n const handleExpandCollapseClick = (event: React.MouseEvent) => {\n event.preventDefault();\n setExpandAll((prevExpandValue) => !prevExpandValue);\n };\n\n const handleSlotKeyDown = (\n event: React.KeyboardEvent<HTMLButtonElement>,\n currentSlot: FocusableSlotMeta\n ) => {\n const sameColumnSlots = focusableSlotsByDate[currentSlot.date] ?? [];\n\n const focusSlot = (slot?: FocusableSlotMeta) => {\n if (!slot) return;\n slotButtonRefs.current[slot.key]?.focus();\n };\n\n switch (event.key) {\n case \"ArrowRight\":\n case \"ArrowDown\": {\n event.preventDefault();\n const currentIndex = sameColumnSlots.findIndex(\n (slot) => slot.key === currentSlot.key\n );\n focusSlot(sameColumnSlots[currentIndex + 1]);\n break;\n }\n case \"ArrowLeft\":\n case \"ArrowUp\": {\n event.preventDefault();\n const currentIndex = sameColumnSlots.findIndex(\n (slot) => slot.key === currentSlot.key\n );\n focusSlot(sameColumnSlots[currentIndex - 1]);\n break;\n }\n case \"Home\":\n event.preventDefault();\n focusSlot(sameColumnSlots[0]);\n break;\n case \"End\":\n event.preventDefault();\n focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n break;\n case \"PageUp\":\n event.preventDefault();\n focusSlot(sameColumnSlots[0]);\n break;\n case \"PageDown\": {\n event.preventDefault();\n if (hasCollapsedContent && !expandAll) {\n setExpandAll(true);\n const lastVisibleSlot = [...sameColumnSlots]\n .reverse()\n .find((slot) => slot.rowIndex < visibleRowCount);\n focusSlot(lastVisibleSlot ?? sameColumnSlots[0]);\n break;\n }\n\n focusSlot(sameColumnSlots[sameColumnSlots.length - 1]);\n break;\n }\n default:\n break;\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const isDisabled = (day: Dayjs): boolean => {\n const isWithinRange = CalendarHelper.isWithinRange(\n day,\n minDate ? dayjs(minDate) : undefined,\n maxDate ? dayjs(maxDate) : undefined\n );\n\n const isDisabledDate =\n (disabledDates && disabledDates.includes(day.format(dateFormat))) ??\n false;\n\n return !isWithinRange \|\| isDisabledDate;\n };\n\n const generateStyleProps = (day: Dayjs) => {\n const dateStartWithYear = day.format(dateFormat);\n const disabled = isDisabled(day);\n const dayCellStyleProps: CellStyleProps = {};\n const isHoverEnabled = enableSelection && !disabled;\n\n if (disabled) {\n dayCellStyleProps.disabled = true;\n }\n\n dayCellStyleProps.interactive = enableSelection\n ? isHoverEnabled\n : false;\n\n const isHover =\n isHoverEnabled && hoverDay && day.isSame(hoverDay, \"day\");\n const isSelected = [selectedDate].includes(dateStartWithYear);\n\n if (isSelected && isHover) {\n dayCellStyleProps.labelType = \"selected-hover\";\n dayCellStyleProps.circleLeft = \"selected-hover-outline\";\n dayCellStyleProps.circleRight = \"selected-hover-outline\";\n } else if (isSelected) {\n dayCellStyleProps.labelType = \"selected\";\n dayCellStyleProps.circleLeft = \"selected-outline\";\n dayCellStyleProps.circleRight = \"selected-outline\";\n } else if (isHover) {\n dayCellStyleProps.labelType = \"hover\";\n dayCellStyleProps.circleLeft = \"hover-subtle\";\n dayCellStyleProps.circleRight = \"hover-subtle\";\n }\n\n return dayCellStyleProps;\n };\n\n function generateFallbackCell(\n prefix: string \| number,\n cellLength = 1\n ): TimeSlotCell {\n return {\n id: `${prefix.toString()}-${new Date().getTime()}`,\n startTime: \"\",\n endTime: \"\",\n clickable: false,\n isActualSlot: false,\n styleAttributes: {\n backgroundColor: Colour[\"bg-stronger\"],\n },\n cellLength,\n };\n }\n\n function getSlotAriaLabel(date: string, slot: TimeSlot) {\n const { startTime: slotStartTime, endTime: slotEndTime } = slot;\n\n return StringHelper.joinNonEmptyStrings([\n dayjs(date).format(\"D MMMM YYYY dddd\"),\n slotStartTime && slotEndTime\n ? TimeHelper.formatTimeRange(slotStartTime, slotEndTime)\n : undefined,\n slot.label,\n slot.clickable ?? true ? \"Available\" : \"Unavailable\",\n ]);\n }\n\n function initializeAndFillSlots(slots: TimeSlot[]): TimeSlotCell[] {\n const cellsArray = Array(numberOfCells).fill({});\n\n slots.forEach((slot) => {\n const startIndex = Math.max(\n 0,\n DateHelper.getTimeDiffInMinutes(minStartTime, slot.startTime) /\n interval\n );\n const endIndex = Math.min(\n numberOfCells,\n DateHelper.getTimeDiffInMinutes(minStartTime, slot.endTime) /\n interval\n );\n const cellLength = Math.ceil(endIndex) - Math.floor(startIndex);\n\n switch (variant) {\n case \"fixed\":\n // Keep fixed slots as 1 long cell\n cellsArray[Math.floor(startIndex)] = {\n ...slot,\n isActualSlot: true,\n rowIndex: Math.floor(startIndex),\n cellLength: endIndex - startIndex,\n };\n break;\n case \"flexible\":\n // Split long slot into multiple cells of length 1\n for (let i = 0; i < cellLength; i++) {\n const startTime = DateHelper.addMinutesToTime(\n minStartTime,\n Math.floor(startIndex + i) * interval\n );\n const endTime = DateHelper.addMinutesToTime(\n startTime,\n interval\n );\n\n let halfFill: \"default\" \| \"top\" \| \"bottom\";\n\n if (!isEmpty(cellsArray[Math.floor(startIndex + i)])) {\n // Previous cell extends into current cell, fill entire cell\n halfFill = \"default\";\n } else if (i === 0 && startIndex % 1 !== 0) {\n halfFill = \"top\";\n } else if (i === cellLength - 1 && endIndex % 1 !== 0) {\n halfFill = \"bottom\";\n } else {\n halfFill = \"default\";\n }\n\n cellsArray[Math.floor(startIndex + i)] = {\n ...slot,\n id: `${slot.id}-${i}`,\n startTime,\n endTime,\n isActualSlot: true,\n rowIndex: Math.floor(startIndex + i),\n cellLength: 1,\n halfFill,\n };\n }\n break;\n }\n });\n return cellsArray;\n }\n\n function populateEmptyCells(cellsArray: any[]): TimeSlotCell[] {\n let i = 0;\n switch (variant) {\n case \"fixed\":\n // Truncate consecutive empty cells into 1 [{},{},{...},{},{}] -> [{},{...},{}]\n cellsArray = cellsArray.reduce(\n (result, obj) => {\n const lastObj =\n result.length > 0\n ? result[result.length - 1]\n : result[0];\n if (isEmpty(obj) && isEmpty(lastObj)) {\n return result;\n }\n return [...result, obj];\n },\n [{}]\n );\n\n // Fill in empty cells with timings & corresponding cell lengths\n while (i < cellsArray.length) {\n if (isEmpty(cellsArray[i])) {\n const startTime =\n cellsArray[i - 1]?.endTime ?? minStartTime;\n const endTime =\n cellsArray[i + 1]?.startTime ?? maxEndTime;\n if (startTime !== endTime) {\n const cellLength =\n DateHelper.getTimeDiffInMinutes(\n startTime,\n endTime\n ) / interval;\n cellsArray[i] = {\n ...generateFallbackCell(i),\n startTime,\n endTime,\n cellLength,\n };\n }\n }\n i++;\n }\n break;\n case \"flexible\":\n // Fill in individual empty cell with interval timings\n while (i < cellsArray.length) {\n if (isEmpty(cellsArray[i])) {\n cellsArray[i] = generateFallbackCell(i);\n i++;\n } else {\n i += cellsArray[i].cellLength;\n }\n }\n break;\n }\n return cellsArray.filter(\n (slot) => !isEmpty(slot) && slot.cellLength > 0\n );\n }\n\n function getCellsForDate(formattedDate: string) {\n return (\n generatedDaySlots[formattedDate] ??\n Array(variant === \"flexible\" ? numberOfCells : 1)\n .fill(undefined)\n .map((_, index) =>\n generateFallbackCell(\n index,\n variant === \"fixed\" ? numberOfCells : undefined\n )\n )\n );\n }\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderWeek = () => {\n return (\n <div className={styles.headerCellWeekColumn} role=\"row\">\n {currentCalendarWeek.map((day, index) => (\n <div\n key={`week-day-${index}`}\n className={styles.headerCellWeek}\n role=\"gridcell\"\n >\n <Typography.BodyXS\n weight={\"semibold\"}\n className={clsx(\n isDisabled(day) && styles.cellWeekTextDisabled\n )}\n >\n {dayjs(day).format(\"ddd\")}\n </Typography.BodyXS>\n </div>\n ))}\n </div>\n );\n };\n\n const renderHeader = () => {\n return (\n <div\n className={styles.headerCellWeekColumn}\n role=\"row\"\n onBlur={handleDayHoverClear}\n >\n {currentCalendarWeek.map((day, dayIndex) => {\n const dayCellStyleProps = generateStyleProps(day);\n\n return (\n <DayCell\n key={`day-${dayIndex}`}\n date={day}\n calendarDate={dayjs(selectedDate)}\n role=\"columnheader\"\n tabIndex={dayCellStyleProps.interactive ? 0 : -1}\n onSelect={() => {\n handleDayClick(\n day,\n !dayCellStyleProps.interactive\n );\n }}\n onHover={handleDayHover}\n onHoverEnd={handleDayHoverClear}\n onFocus={handleDayHover}\n {...dayCellStyleProps}\n ></DayCell>\n );\n })}\n </div>\n );\n };\n\n const renderTimeColumn = () => {\n let hasSetFirstAfternoonHour = false;\n\n const formatTime = (index: number) => {\n const parsedTime = dayjs(minStartTime, \"HH:mm\").add(\n index * 4 * interval,\n \"minutes\"\n );\n const hour = parsedTime.format(\"h\");\n const minutes = parsedTime.format(\"mm\");\n const amPm = parsedTime.format(\"a\");\n\n let formattedTime = `${hour}${\n minutes !== \"00\" ? ` ${minutes}` : \"\"\n }`;\n\n if (\n !hasSetFirstAfternoonHour &&\n amPm === \"pm\" &&\n minutes === \"00\"\n ) {\n formattedTime += ` ${amPm}`;\n hasSetFirstAfternoonHour = true;\n }\n\n return formattedTime;\n };\n\n return (\n <div className={styles.timeColumn} ref={timeColumnRef} aria-hidden>\n {Array(Math.ceil(numberOfCells / 4))\n .fill(undefined)\n .map((_, index) => (\n <div\n key={`time-${index}`}\n className={styles.timeColumnWrapper}\n >\n <div className={styles.timeColumnText}>\n {formatTime(index)}\n </div>\n </div>\n ))}\n </div>\n );\n };\n\n const renderSlotCell = (formattedDate: string, slot: TimeSlotCell) => {\n return (\n <WeekTimeSlotCell\n key={slot.id}\n formattedDate={formattedDate}\n slot={slot}\n variant={variant}\n hasCollapsedContent={hasCollapsedContent}\n expandAll={expandAll}\n visibleRowCount={visibleRowCount}\n onSlotClick={handleSlotClick}\n getSlotAriaLabel={getSlotAriaLabel}\n onSlotKeyDown={handleSlotKeyDown}\n onSlotButtonClick={handleSlotButtonClick}\n slotButtonRefs={slotButtonRefs}\n />\n );\n };\n\n const renderTimeSlotBarCells = () => {\n return (\n <animated.div\n className={styles.expandable}\n style={isMounted ? expandableStyles : undefined}\n role=\"row\"\n >\n <div\n className={styles.columnWeekCell}\n ref={cellsRef}\n key={`week-cell-${calendarDate.format(dateFormat)}`}\n >\n {currentCalendarWeek.map((day, dayIndex) => {\n const formattedDate = day.format(dateFormat);\n const cellsArray = getCellsForDate(formattedDate);\n return (\n <div\n key={`wrapper-${dayIndex}`}\n className={styles.timeSlotWrapper}\n role=\"gridcell\"\n >\n {cellsArray.map((slot) =>\n renderSlotCell(formattedDate, slot)\n )}\n </div>\n );\n })}\n </div>\n </animated.div>\n );\n };\n\n const renderCollapseExpandAll = () => {\n if (!maxVisibleCellHeight \|\| !cellsRef.current) return;\n return (\n <div className={styles.collapseExpandAllWrapper}>\n <Button\n data-testid=\"time-bar-expand-collapse-button\"\n styleType=\"light\"\n sizeType=\"small\"\n aria-expanded={expandAll}\n onClick={handleExpandCollapseClick}\n className={styles.collapseExpandAllButton}\n >\n <span className={styles.collapseExpandAllButtonContent}>\n <ChevronUpIcon\n className={clsx(\n styles.chevronIcon,\n expandAll && styles.chevronIconExpanded\n )}\n />\n {`${expandAll ? \"Hide\" : \"Show\"} later times`}\n </span>\n </Button>\n </div>\n );\n };\n\n return (\n <div className={styles.wrapper}>\n <div className={styles.gridWrapper} role=\"grid\">\n {renderHeader()}\n {renderWeek()}\n {renderTimeColumn()}\n {renderTimeSlotBarCells()}\n </div>\n {renderCollapseExpandAll()}\n </div>\n );\n};\n"],"names":["TimeSlotBarWeekDays","calendarDate","disabledDates","selectedDate","onSelect","minDate","maxDate","startTime","endTime","maxVisibleCellHeight","slots","daySlots","interval","variant","enableSelection","onSlotClick","dateFormat","expandAll","setExpandAll","useState","hoverDay","setHoverDay","isMounted","useIsMounted","slotButtonRefs","useRef","timeColumnRef","currentCalendarWeek","useMemo","CalendarHelper","generateDaysForCurrentWeek","flattenedSlots","Object","values","flat","minStartTime","_b","_a","minBy","maxEndTime","_d","_c","maxBy","numberOfCells","Math","ceil","DateHelper","getTimeDiffInMinutes","height","actualHeight","ref","cellsRef","useResizeDetector","hasCollapsedContent","visibleRowCount","undefined","max","floor","SLOT_GAP","ROW_HEIGHT","expandableStyles","useSpring","generatedDaySlots","transformedDaySlots","entries","forEach","key","cellsArray","Array","fill","slot","startIndex","endIndex","min","cellLength","assign","isActualSlot","rowIndex","i","addMinutesToTime","halfFill","isEmpty","id","initializeAndFillSlots","reduce","result","obj","lastObj","length","generateFallbackCell","filter","populateEmptyCells","focusableSlotsByDate","day","formattedDate","format","getCellsForDate","map","date","sort","a","b","useApplyStyle","styles.tokens","timeColumn","formatUnitValue","handleDayHover","value","handleDayHoverClear","handleSlotClick","handleSlotButtonClick","event","stopPropagation","handleExpandCollapseClick","preventDefault","prevExpandValue","handleSlotKeyDown","currentSlot","sameColumnSlots","focusSlot","current","focus","currentIndex","findIndex","lastVisibleSlot","reverse","find","isDisabled","isWithinRange","dayjs","isDisabledDate","includes","prefix","toString","Date","getTime","clickable","styleAttributes","backgroundColor","Colour","getSlotAriaLabel","slotStartTime","slotEndTime","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","label","_","index","_jsxs","className","styles.wrapper","children","styles.gridWrapper","role","_jsx","styles.headerCellWeekColumn","onBlur","dayIndex","dayCellStyleProps","dateStartWithYear","disabled","isHoverEnabled","interactive","isHover","isSame","isSelected","labelType","circleLeft","circleRight","generateStyleProps","DayCell","tabIndex","handleDayClick","onHover","onHoverEnd","onFocus","styles.headerCellWeek","Typography","BodyXS","weight","clsx","styles.cellWeekTextDisabled","hasSetFirstAfternoonHour","formatTime","parsedTime","add","hour","minutes","amPm","formattedTime","styles.timeColumn","styles.timeColumnWrapper","styles.timeColumnText","renderTimeColumn","animated","div","styles.expandable","style","styles.columnWeekCell","styles.timeSlotWrapper","WeekTimeSlotCell","onSlotKeyDown","onSlotButtonClick","renderSlotCell","styles.collapseExpandAllWrapper","Button","styleType","sizeType","onClick","styles.collapseExpandAllButton","styles.collapseExpandAllButtonContent","ChevronUpIcon","styles.chevronIcon","styles.chevronIconExpanded","renderCollapseExpandAll"],"mappings":"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"}

package/time-slot-bar-week/time-slot-bar-week-days.styles.d.ts ADDED Viewed

@@ -0,0 +1,25 @@
+export declare const tokens: {
+    timeColumn: {
+        height: string;
+    };
+    timeSlot: {
+        height: string;
+    };
+};
+export declare const headerCellWeek: import("@linaria/core").LinariaClassName;
+export declare const cellWeekTextDisabled: import("@linaria/core").LinariaClassName;
+export declare const headerCellWeekColumn: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const gridWrapper: import("@linaria/core").LinariaClassName;
+export declare const expandable: import("@linaria/core").LinariaClassName;
+export declare const columnWeekCell: import("@linaria/core").LinariaClassName;
+export declare const timeColumn: import("@linaria/core").LinariaClassName;
+export declare const timeColumnWrapper: import("@linaria/core").LinariaClassName;
+export declare const timeColumnText: import("@linaria/core").LinariaClassName;
+export declare const timeSlotWrapper: import("@linaria/core").LinariaClassName;
+export declare const collapseExpandAllWrapper: import("@linaria/core").LinariaClassName;
+export declare const collapseExpandAllButton: import("@linaria/core").LinariaClassName;
+export declare const collapseExpandAllButtonContent: import("@linaria/core").LinariaClassName;
+export declare const chevronIcon: import("@linaria/core").LinariaClassName;
+export declare const chevronIconExpanded: import("@linaria/core").LinariaClassName;
+export declare const timeSlotComponent: import("@linaria/core").LinariaClassName;

package/time-slot-bar-week/time-slot-bar-week-days.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./time-slot-bar-week-days.styles_evdvs9.css";const t={timeColumn:{height:"--fds-internal-timeSlotBarWeek-timeColumn-height"},timeSlot:{height:"--fds-internal-timeSlotBarWeek-timeSlotComponent-height"}},e="h1pfybo4",i="cm1jktd",l="hfnrvvn",m="w10itm92",o="g1ijsvx5",n="eljtyj8",s="crbcp6c",c="t13lf4s5",h="t4v35lv",r="t1v9il5y",d="t1xo1xfl",v="cyddonb",f="c5f9kvb",a="c1hid59d",b="cfi87m2",g="ctpwme7",k="t1wrn5bg";export{i as cellWeekTextDisabled,b as chevronIcon,g as chevronIconExpanded,f as collapseExpandAllButton,a as collapseExpandAllButtonContent,v as collapseExpandAllWrapper,s as columnWeekCell,n as expandable,o as gridWrapper,e as headerCellWeek,l as headerCellWeekColumn,c as timeColumn,r as timeColumnText,h as timeColumnWrapper,k as timeSlotComponent,d as timeSlotWrapper,t as tokens,m as wrapper};
2	+ //# sourceMappingURL=time-slot-bar-week-days.styles.js.map

package/time-slot-bar-week/time-slot-bar-week-days.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"time-slot-bar-week-days.styles.js","sources":["../../src/time-slot-bar-week/time-slot-bar-week-days.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Motion, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n timeColumn: {\n height: \"--fds-internal-timeSlotBarWeek-timeColumn-height\",\n },\n timeSlot: {\n height: \"--fds-internal-timeSlotBarWeek-timeSlotComponent-height\",\n },\n};\n\nexport const headerCellWeek = css`\n display: flex;\n align-items: center;\n justify-content: center;\n pointer-events: none;\n user-select: none;\n margin-bottom: ${Spacing[\"spacing-8\"]};\n flex: 1;\n`;\n\nexport const cellWeekTextDisabled = css`\n color: ${Colour[\"text-disabled-subtlest\"]};\n`;\n\nexport const headerCellWeekColumn = css`\n grid-column: 2 / -1;\n display: flex;\n`;\n\nexport const wrapper = css`\n width: 100%;\n`;\n\nexport const gridWrapper = css`\n width: 100%;\n display: grid;\n grid-template-columns: auto repeat(7, 1fr);\n column-gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const expandable = css`\n grid-column: 2 / -1;\n overflow: hidden;\n`;\n\nexport const columnWeekCell = css`\n display: flex;\n gap: ${Spacing[\"spacing-4\"]};\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n overflow: hidden;\n`;\n\nexport const timeColumn = css`\n ${tokens.timeColumn.height}: initial;\n display: flex;\n flex-direction: column;\n grid-row: 3 / auto;\n gap: ${Spacing[\"spacing-4\"]};\n width: 1.375rem;\n transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n overflow: hidden;\n height: var(${tokens.timeColumn.height});\n`;\n\nexport const timeColumnWrapper = css`\n min-height: 60px;\n\n &:last-child {\n min-height: 0;\n }\n`;\n\nexport const timeColumnText = css`\n ${Font[\"body-xs-bold\"]}\n color: ${Colour[\"text-subtler\"]};\n text-align: center;\n line-height: 12px; // align with cell on the same row\n\n &:first-line {\n font-size: ${Font.Spec[\"body-size-sm\"]};\n }\n`;\n\nexport const timeSlotWrapper = css`\n display: flex;\n flex-direction: column;\n flex: 1;\n gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const collapseExpandAllWrapper = css`\n display: flex;\n margin-top: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const collapseExpandAllButton = css`\n width: 100%;\n height: 2.5rem;\n`;\n\nexport const collapseExpandAllButtonContent = css`\n display: flex;\n align-items: center;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const chevronIcon = css`\n transform: rotate(180deg);\n transition: transform ${Motion[\"duration-250\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const chevronIconExpanded = css`\n transform: rotate(0deg);\n`;\n\nexport const timeSlotComponent = css`\n ${tokens.timeSlot.height}: initial;\n flex-grow: 1;\n max-width: 200px;\n height: var(${tokens.timeSlot.height});\n min-height: var(${tokens.timeSlot.height});\n border-radius: ${Radius.xs};\n\n &:focus-within {\n outline: 2px solid ${Colour[\"focus-ring\"]};\n outline-offset: 1px;\n }\n`;\n"],"names":["tokens","timeColumn","height","timeSlot","headerCellWeek","cellWeekTextDisabled","headerCellWeekColumn","wrapper","gridWrapper","expandable","columnWeekCell","timeColumnWrapper","timeColumnText","timeSlotWrapper","collapseExpandAllWrapper","collapseExpandAllButton","collapseExpandAllButtonContent","chevronIcon","chevronIconExpanded","timeSlotComponent"],"mappings":"sFAIO,MAAMA,EAAS,CAClBC,WAAY,CACRC,OAAQ,oDAEZC,SAAU,CACND,OAAQ,4DAIHE,EAAc,WAUdC,EAAoB,UAIpBC,EAAoB,UAKpBC,EAAO,WAIPC,EAAW,WAOXC,EAAU,UAKVC,EAAc,UAOdT,EAAU,WAYVU,EAAiB,UAQjBC,EAAc,WAWdC,EAAe,WAOfC,EAAwB,UAKxBC,EAAuB,UAKvBC,EAA8B,WAM9BC,EAAW,UAKXC,EAAmB,UAInBC,EAAiB"}