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

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

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

Files changed (2426) hide show

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

@@ -0,0 +1 @@

+ {"version":3,"file":"use-media-query.js","sources":["../../../../src/theme/utils/use-media-query.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { Breakpoint } from \"../tokens/breakpoint\";\nimport { isTokenFromSet } from \"./token-resolver\";\nimport { useResolvedTokenValue } from \"./use-design-token\";\n\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","getMediaQueryClause","feature","getCustomMediaQueryClause","clause","undefined","trim","useResolvedBreakpointToken","breakpointToken","effectiveFallback","useResolvedTokenValue","fallback","isToken","normalizeCustom","useMatchMediaQuery","queryString","defaultMatch","matches","setMatches","useState","_a","globalThis","window","matchMedia","getCurrentMatch","useEffect","mediaQueryList","handleChange","event","addEventListener","removeEventListener","useMediaQuery","options","minWidth","maxWidth","clauses","normalizedMinWidth","normalizedMaxWidth","filter","map","join","hasMinWidth","hasMaxWidth","getDefaultMatch"],"mappings":"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"}

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

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

package/cjs/time-range-picker/combobox-picker/combobox-picker.js.map 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 { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { FormErrorMessage } from \"../../form/form-label\";\nimport { clearIcon } from \"../../input/input.styles\";\nimport { ClearIconContainer } from \"../../input-range-select/input-range-select.style\";\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 { RangeInputInnerContainer } from \"../../shared/range-input-inner-container\";\nimport { useId } from \"../../util\";\nimport { TimeHelper } from \"../../util/time-helper\";\nimport { SelectorInput, Wrapper } 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 <ClearIconContainer\n onClick={handleClear}\n type=\"button\"\n aria-label=\"Clear\"\n >\n <CrossIcon className={clearIcon} aria-hidden />\n </ClearIconContainer>\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 <styles.TimeFieldContainer\n ref={nodeRef}\n disabled={disabled}\n error={error \|\| !!validationError}\n readOnly={readOnly}\n onBlur={handleBlur}\n role=\"group\"\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 <SelectorInput\n ref={startInputRef}\n onFocus={() => handleInputFocus(\"start\")}\n placeholder={\n activeTimeSelector === \"start\" ? \"hh:mm\" : \"From\"\n }\n onChange={(e) => setStartTimeVal(e.target.value)}\n value={startTimeVal}\n 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 />\n {/ To */}\n <SelectorInput\n ref={endInputRef}\n onFocus={() => handleInputFocus(\"end\")}\n placeholder={activeTimeSelector === \"end\" ? \"hh:mm\" : \"To\"}\n onChange={(e) => setEndTimeVal(e.target.value)}\n value={endTimeVal}\n 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 />\n </RangeInputInnerContainer>\n {renderClearButton()}\n </styles.TimeFieldContainer>\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 <Wrapper id={id} {...otherProps}>\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={dropdownOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n {renderError()}\n </Wrapper>\n );\n};\n"],"names":["_a","id","disabled","error","value","format","readOnly","onChange","onFocus","onBlur","alignment","dropdownZIndex","startLimit","endLimit","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","ClearIconContainer","onClick","children","CrossIcon","className","clearIcon","_jsxs","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","isOpen","renderElement","styles.TimeFieldContainer","ref","role","VisuallyHidden","RangeInputInnerContainer","currentActive","SelectorInput","placeholder","e","onKeyDown","autoComplete","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":["_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/cjs/time-range-picker/combobox-picker/combobox-picker.styles.js CHANGED Viewed

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

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

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

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

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

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

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

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

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

package/cjs/time-range-picker/common.styles_1qwp4xa.css ADDED Viewed

@@ -0,0 +1,3 @@
+.wfddsjt{position:relative;}
+.t102z5ub{height:3rem;gap:var(--fds-spacing-8);}
+.svbkfs2{display:block;width:100%;-webkit-flex:1;-ms-flex:1;flex:1;}

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"helper.js","sources":["../../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n avail = \"Available\",\n unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n slotStartTime: string,\n slotEndTime: string,\n isAvail?: boolean,\n label?: string\n) =>\n StringHelper.joinNonEmptyStrings([\n TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n label,\n ]);\n\nconst buildUnavailableSlot = (\n startTime: string,\n endTime: string,\n id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n id,\n startTime,\n endTime,\n clickable: false,\n label: undefined,\n styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n /*\n Format HH:mm to am/pm display\n * @param timeString input timeString string\n /\n public static formatHourlyDisplay(timeString: string): string {\n const parsedTime = dayjs(timeString, \"HH:mm\");\n return parsedTime.format(\"ha\");\n }\n\n /\n Calculate width in px base on the time range in respect the cell width\n * @param start input start string\n * @param end input end string\n * @param cellWidth input cellWidth number\n /\n public static calculateWidth(\n start: string,\n end: string,\n cellWidth: number\n ): number {\n /\n Each CELL_WIDTH is 30min interval\n * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n /\n return (\n (DateHelper.getTimeDiffInMinutes(start, end) / 15) (cellWidth / 2)\n );\n }\n\n /*\n Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n * this helps to always show time slot marker properly.\n * @param time - time to be adjusted\n * @param type - \"start\" or \"end\" indicating which boundary to adjust\n /\n public static adjustTimeForMarker(\n time: string,\n type: \"start\" \| \"end\"\n ): string {\n const parsedTime = dayjs(time, \"HH:mm\");\n switch (type) {\n case \"start\": {\n // For xx:01 to xx:29, adjust to xx:00\n if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n }\n // For xx:31 to xx:59, adjust to xx:30\n if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n }\n break;\n }\n case \"end\": {\n // For xx:01 to xx:29, adjust to xx:30\n if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n }\n // For xx:31 to xx:59, adjust to next hour xx:00\n if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n const nextHour = parsedTime.add(1, \"hour\");\n // If it's 23:xx and rounds up to 24:00\n if (nextHour.hour() === 0) {\n return \"24:00\";\n }\n return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n }\n break;\n }\n default:\n return time;\n }\n return time;\n }\n\n /\n Process raw slots and any gaps in the given time range.\n \n Builds a summary string and a list of slots that includes:\n * - original slots,\n * - leading/trailing unavailable time gaps,\n * - gap slots inserted between non-contiguous slots.\n \n @param range - start/end bounds for the timeslot bar.\n * @param slots - user-provided slots to render.\n * @param variant - display variant controlling summary and aria label behavior.\n * @returns summary for container aria-label and computed slots ready for rendering.\n */\n public static processSlots(\n range: { start: string; end: string },\n slots: TTimeSlot[],\n variant: TimeSlotBarVariant\n ) {\n const summaryParts: string[] = [\"Time slot bar\"];\n // Build visible slots plus any unavailable gaps\n const computedSlots: (TTimeSlot & {\n ariaLabel?: string;\n })[] = [];\n\n const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n const ariaLabel = getSlotAriaLabel(\n slot.startTime,\n slot.endTime,\n slot.clickable ?? true,\n slot.label\n );\n\n if (variant === \"minified\") summaryParts.push(ariaLabel);\n computedSlots.push({\n ...slot,\n ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n });\n };\n\n if (slots.length < 1) {\n // No real slots: represent the whole range as unavailable\n const fullUnavailSlot = buildUnavailableSlot(\n range.start,\n range.end,\n SimpleIdGenerator.generate()\n );\n createAriaLabelAndPushSlot(fullUnavailSlot);\n\n return {\n summary: StringHelper.joinNonEmptyStrings(summaryParts),\n computedSlots,\n };\n }\n\n const sortedSlots = [...slots].sort((a, b) => {\n const timeA = dayjs(a.startTime, \"HH:mm\");\n const timeB = dayjs(b.startTime, \"HH:mm\");\n if (timeA.isBefore(timeB)) return -1;\n if (timeA.isAfter(timeB)) return 1;\n return 0;\n });\n\n if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n // Add leading unavailable gap before the first slot\n const leadingUnavailSlot = buildUnavailableSlot(\n range.start,\n sortedSlots[0].startTime,\n SimpleIdGenerator.generate()\n );\n createAriaLabelAndPushSlot(leadingUnavailSlot);\n }\n\n sortedSlots.forEach((slot, index, self) => {\n createAriaLabelAndPushSlot(slot);\n\n const { endTime: slotEndTime } = slot;\n const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n const hasGapAfter =\n nextSlotStartTime &&\n !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n if (hasGapAfter) {\n // Add a gap slot between consecutive slots if non-contiguous\n const unavailSlot = buildUnavailableSlot(\n slotEndTime,\n nextSlotStartTime,\n SimpleIdGenerator.generate()\n );\n createAriaLabelAndPushSlot(unavailSlot);\n }\n });\n\n const lastSlot = sortedSlots[sortedSlots.length - 1];\n if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n // Add trailing unavailable gap after the last slot\n const trailingUnavailSlot = buildUnavailableSlot(\n lastSlot.endTime,\n range.end,\n SimpleIdGenerator.generate()\n );\n createAriaLabelAndPushSlot(trailingUnavailSlot);\n }\n\n return {\n summary: StringHelper.joinNonEmptyStrings(summaryParts),\n computedSlots,\n };\n }\n}\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot"],"mappings":"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"}
1	+ {"version":3,"file":"helper.js","sources":["../../../src/time-slot-bar/helper.ts"],"sourcesContent":["import dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\n\nimport { DateHelper, SimpleIdGenerator, StringHelper } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./time-slot-bar.styles\";\nimport type { TimeSlot as TTimeSlot, TimeSlotBarVariant } from \"./types\";\n// Load plugins\ndayjs.extend(customParseFormat);\n\n// ===========================================================================\n// INTERNAL TYPES\n// ===========================================================================\n\nenum ESlotStateLabel {\n avail = \"Available\",\n unavail = \"Unavailable\",\n}\n\n// ===========================================================================\n// INTERNAL HELPERS\n// ===========================================================================\n\nconst getSlotAriaLabel = (\n slotStartTime: string,\n slotEndTime: string,\n isAvail?: boolean,\n label?: string\n) =>\n StringHelper.joinNonEmptyStrings([\n TimeHelper.formatTimeRange(slotStartTime, slotEndTime),\n isAvail ? ESlotStateLabel.avail : ESlotStateLabel.unavail,\n label,\n ]);\n\nconst buildUnavailableSlot = (\n startTime: string,\n endTime: string,\n id: string\n): TTimeSlot & { ariaLabel?: string } => ({\n id,\n startTime,\n endTime,\n clickable: false,\n label: undefined,\n styleAttributes: { backgroundColor: \"transparent\" },\n});\n\n// ===========================================================================\n// HELPER FUNCTIONS\n// ===========================================================================\n\nexport class TimeSlotBarHelper {\n /*\n Format HH:mm to am/pm display\n * @param timeString input timeString string\n /\n public static formatHourlyDisplay(timeString: string): string {\n const parsedTime = dayjs(timeString, \"HH:mm\");\n return parsedTime.format(\"ha\");\n }\n\n /\n Calculate width in px base on the time range in respect the cell width\n * @param start input start string\n * @param end input end string\n * @param cellWidth input cellWidth number\n /\n public static calculateWidth(\n start: string,\n end: string,\n cellWidth: number\n ): number {\n /\n Each CELL_WIDTH is 30min interval\n * Assuming 15 minutes corresponds to a fixed width of x cellWidth pixels (1/2 of CELL_WIDTH)\n /\n return (\n (DateHelper.getTimeDiffInMinutes(start, end) / 15) (cellWidth / 2)\n );\n }\n\n /*\n Based on the time type, adjust the time to the nearest hour or 30 minuites marker.\n * this helps to always show time slot marker properly.\n * @param time - time to be adjusted\n * @param type - \"start\" or \"end\" indicating which boundary to adjust\n /\n public static adjustTimeForMarker(\n time: string,\n type: \"start\" \| \"end\"\n ): string {\n const parsedTime = dayjs(time, \"HH:mm\");\n switch (type) {\n case \"start\": {\n // For xx:01 to xx:29, adjust to xx:00\n if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n return parsedTime.set(\"minute\", 0).format(\"HH:mm\");\n }\n // For xx:31 to xx:59, adjust to xx:30\n if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n }\n break;\n }\n case \"end\": {\n // For xx:01 to xx:29, adjust to xx:30\n if (parsedTime.minute() > 0 && parsedTime.minute() < 30) {\n return parsedTime.set(\"minute\", 30).format(\"HH:mm\");\n }\n // For xx:31 to xx:59, adjust to next hour xx:00\n if (parsedTime.minute() > 30 && parsedTime.minute() < 60) {\n const nextHour = parsedTime.add(1, \"hour\");\n // If it's 23:xx and rounds up to 24:00\n if (nextHour.hour() === 0) {\n return \"24:00\";\n }\n return nextHour.set(\"minute\", 0).format(\"HH:mm\");\n }\n break;\n }\n default:\n return time;\n }\n return time;\n }\n\n /\n Process raw slots and any gaps in the given time range.\n \n Builds a summary string and a list of slots that includes:\n * - original slots,\n * - leading/trailing unavailable time gaps,\n * - gap slots inserted between non-contiguous slots.\n \n @param range - start/end bounds for the timeslot bar.\n * @param slots - user-provided slots to render.\n * @param variant - display variant controlling summary and aria label behavior.\n * @returns summary for container aria-label and computed slots ready for rendering.\n */\n public static processSlots(\n range: { start: string; end: string },\n slots: TTimeSlot[],\n variant: TimeSlotBarVariant\n ) {\n const summaryParts: string[] = [\"Time slot bar\"];\n // Build visible slots plus any unavailable gaps\n const computedSlots: (TTimeSlot & {\n ariaLabel?: string;\n })[] = [];\n\n const createAriaLabelAndPushSlot = (slot: TTimeSlot) => {\n const ariaLabel = getSlotAriaLabel(\n slot.startTime,\n slot.endTime,\n slot.clickable ?? true,\n slot.label\n );\n\n if (variant === \"minified\") summaryParts.push(ariaLabel);\n computedSlots.push({\n ...slot,\n ariaLabel: variant === \"default\" ? ariaLabel : undefined,\n });\n };\n\n if (slots.length < 1) {\n // No real slots: represent the whole range as unavailable\n const fullUnavailSlot = buildUnavailableSlot(\n range.start,\n range.end,\n SimpleIdGenerator.generate()\n );\n createAriaLabelAndPushSlot(fullUnavailSlot);\n\n return {\n summary: StringHelper.joinNonEmptyStrings(summaryParts),\n computedSlots,\n };\n }\n\n const sortedSlots = [...slots].sort((a, b) => {\n const timeA = dayjs(a.startTime, \"HH:mm\");\n const timeB = dayjs(b.startTime, \"HH:mm\");\n if (timeA.isBefore(timeB)) return -1;\n if (timeA.isAfter(timeB)) return 1;\n return 0;\n });\n\n if (!TimeHelper.isSameTime(range.start, sortedSlots[0].startTime)) {\n // Add leading unavailable gap before the first slot\n const leadingUnavailSlot = buildUnavailableSlot(\n range.start,\n sortedSlots[0].startTime,\n SimpleIdGenerator.generate()\n );\n createAriaLabelAndPushSlot(leadingUnavailSlot);\n }\n\n sortedSlots.forEach((slot, index, self) => {\n createAriaLabelAndPushSlot(slot);\n\n const { endTime: slotEndTime } = slot;\n const { startTime: nextSlotStartTime } = self[index + 1] ?? {};\n const hasGapAfter =\n nextSlotStartTime &&\n !TimeHelper.isSameTime(slotEndTime, nextSlotStartTime);\n\n if (hasGapAfter) {\n // Add a gap slot between consecutive slots if non-contiguous\n const unavailSlot = buildUnavailableSlot(\n slotEndTime,\n nextSlotStartTime,\n SimpleIdGenerator.generate()\n );\n createAriaLabelAndPushSlot(unavailSlot);\n }\n });\n\n const lastSlot = sortedSlots[sortedSlots.length - 1];\n if (!TimeHelper.isSameTime(range.end, lastSlot.endTime)) {\n // Add trailing unavailable gap after the last slot\n const trailingUnavailSlot = buildUnavailableSlot(\n lastSlot.endTime,\n range.end,\n SimpleIdGenerator.generate()\n );\n createAriaLabelAndPushSlot(trailingUnavailSlot);\n }\n\n return {\n summary: StringHelper.joinNonEmptyStrings(summaryParts),\n computedSlots,\n };\n }\n}\n\n// Function to get the width of a cell in px\nexport const getCellWidth = (variant: TimeSlotBarVariant) => {\n return variant === \"minified\"\n ? styles.MINIFIED_CELL_SIZE\n : styles.DEFAULT_CELL_SIZE;\n};\n"],"names":["ESlotStateLabel","dayjs","extend","customParseFormat","buildUnavailableSlot","startTime","endTime","id","clickable","label","undefined","styleAttributes","backgroundColor","formatHourlyDisplay","timeString","format","calculateWidth","start","end","cellWidth","DateHelper","getTimeDiffInMinutes","adjustTimeForMarker","time","type","parsedTime","minute","set","nextHour","add","hour","processSlots","range","slots","variant","summaryParts","computedSlots","createAriaLabelAndPushSlot","slot","ariaLabel","slotStartTime","slotEndTime","isAvail","_a","StringHelper","joinNonEmptyStrings","TimeHelper","formatTimeRange","avail","unavail","push","Object","assign","length","fullUnavailSlot","SimpleIdGenerator","generate","summary","sortedSlots","sort","a","b","timeA","timeB","isBefore","isAfter","isSameTime","leadingUnavailSlot","forEach","index","self","nextSlotStartTime","unavailSlot","lastSlot","trailingUnavailSlot","styles.MINIFIED_CELL_SIZE","styles.DEFAULT_CELL_SIZE"],"mappings":"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"}

package/cjs/time-slot-bar/time-slot-bar.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/dayjs/dayjs.min.js"),l=require("react"),i=require("../external/react-resize-detector/build/index.esm.js"),a=require("../shared/accessibility/index.js"),o=require("../util/time-helper.js"),s=require("./helper.js"),n=require("./time-slot-bar.styles.js");const d=l.forwardRef(((d,c)=>{const{"data-testid":u,className:m,variant:h="default",startTime:f,endTime:p,slots:T,onSlotClick:b,onClick:x,styleAttributes:$,initialScrollTime:g,roundInitialScrollTime:j=!0}=d,v=l.useRef(null),[C,k]=l.useState(0),[B,S]=l.useState(0),H=n.getCellWidth(h),y=s.TimeSlotBarHelper.adjustTimeForMarker(f,"start"),w=s.TimeSlotBarHelper.adjustTimeForMarker(p,"end"),W=2.5*H;l.useImperativeHandle(c,(()=>({resetScroll:E})));const{summary:L,computedSlots:q}=l.useMemo((()=>s.TimeSlotBarHelper.processSlots({start:y,end:w},T,h)),[y,w,T,h]);l.useEffect((()=>{const e=v.current;return e&&(e.addEventListener("scroll",I),S(e.clientWidth)),()=>{e&&e.removeEventListener("scroll",I)}}),[]),l.useEffect((()=>{E()}),[g,H,f,p]);const I=()=>{v.current&&k(v.current.scrollLeft)},M=e=>{v.current&&v.current.scrollBy({left:"left"===e?-W:W,behavior:"smooth"})};i.useResizeDetector({onResize:()=>{v.current&&S(v.current.clientWidth)},targetRef:v,refreshMode:"debounce",refreshRate:50});const R=e=>e<=H/2,A=e=>{if(u)return`${u}-${e}`},F=(e,r,t)=>{const l=0===e.minute();if("default"===t)return l;return l&&(r?e.hour()%2==0:e.hour()%2==1)},E=()=>{if(g&&v.current&&H>0){const e=o.TimeHelper.calculateScrollPosition({scrollTime:g,minTime:y,maxTime:w,interval:30,intervalWidth:H,options:{roundToInterval:j}});null!==e&&(v.current.scrollLeft=e)}},_=e=>h===e;return r.jsxs(n.Container,{className:m,children:[r.jsxs(n.TimeSlotBarContainer,{"data-testid":u,ref:v,$variant:h,children:[r.jsx(n.TimeMarkerWrapper,{"data-testid":A("time-marker-wrapper"),"data-id":"marker-wrapper",children:(()=>{const e=[],l=t.default(y,"HH:mm"),i=t.default(w,"HH:mm"),a=l.hour()%2==0;for(let t=l;t.isBefore(i);t=t.add(30,"minute")){const l=F(t,a,h);e.push(r.jsx(n.TimeMarker,{"data-testid":`${t.format("HH:mm")}-marker`,$isLongMarker:l,$variant:h,children:l&&r.jsx(n.TimeLabel,{weight:"semibold",children:s.TimeSlotBarHelper.formatHourlyDisplay(t.format("HH:mm"))})},t.format("HH:mm")))}return e})()}),r.jsx("div",{role:"grid","aria-label":L,tabIndex:0,children:r.jsxs(n.TimeSlotWrapper,{"data-testid":A("time-slot-wrapper"),"data-id":"slot-wrapper",role:"row",children:[(()=>{if(!$)return;const{backgroundColor:e,backgroundColor2:t,hoverBackgroundColor:l,hoverBackgroundColor2:i,styleType:a="default"}=$,o=s.TimeSlotBarHelper.calculateWidth(y,w,H),d=!!x&&_("default");return r.jsxs(r.Fragment,{children:[r.jsx(n.TimeSlotBorder,{$variant:h}),r.jsx(n.TimeSlot,{"data-testid":A("default-timeslot"),$width:o,$variant:h,$left:0,$styleType:a,$bgColor:e,$bgColor2:t,$hoverBgColor:l,$hoverBgColor2:i,$clickable:d,onClick:d?x:void 0},"default-timeslot")]})})(),q.map((t=>{const{id:l,startTime:i,endTime:o,label:d,clickable:c=!0,styleAttributes:u,ariaLabel:m}=t,{color:f,styleType:T="default",backgroundColor:x,backgroundColor2:$,hoverBackgroundColor:g,hoverBackgroundColor2:j}=u,v=s.TimeSlotBarHelper.calculateWidth(i,o,H),C=s.TimeSlotBarHelper.calculateWidth(y,i,H),k=c&&"default"===h,B=_("default")&&d,S=r=>t=>{t.stopPropagation();const{ariaLabel:l}=r,i=e.__rest(r,["ariaLabel"]);k&&b(i)};return r.jsxs("div",{role:"gridcell",children:[r.jsx(n.TimeSlotBorder,{"data-testid":"start-border",$variant:h,style:{left:`${C}px`}}),r.jsxs(n.TimeSlot,{"data-testid":A(`${l}-timeslot`),$width:v,$left:C,$styleType:T,$variant:h,$bgColor:x,$bgColor2:$,$hoverBgColor:g,$hoverBgColor2:j,$clickable:k,onClick:S(t),children:[!!m&&r.jsx(a.VisuallyHidden,{children:r.jsx("button",{type:"button","aria-disabled":!k,"aria-label":m,onClick:S(t)})}),B&&r.jsx(n.CellText,{$slotWidth:v,$color:f,weight:"semibold","aria-hidden":!m,children:R(v)?"...":d})]}),p!==o&&r.jsx(n.TimeSlotBorder,{"data-testid":"end-border",$variant:h,style:{left:`${C+v}px`}})]},l)}))]})})]}),r.jsx(r.Fragment,{children:C>0&&r.jsx(n.ArrowButton,{"data-testid":A("arrow-left"),"aria-hidden":!0,tabIndex:-1,$direction:"left",$variant:h,focusHighlight:!1,focusOutline:"none",onClick:()=>{M("left")},children:r.jsx(n.ArrowIconLeft,{})})}),C+B<s.TimeSlotBarHelper.calculateWidth(y,w,H)?r.jsx(n.ArrowButton,{"data-testid":A("arrow-right"),"aria-hidden":!0,tabIndex:-1,$direction:"right",$variant:h,focusHighlight:!1,focusOutline:"none",onClick:()=>{M("right")},children:r.jsx(n.ArrowIconRight,{})}):r.jsx(r.Fragment,{})]})}));exports.TimeSlotBar=d;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-left"),l=require("@lifesg/react-icons/chevron-right"),a=require("clsx"),i=require("../external/dayjs/dayjs.min.js"),o=require("react"),s=require("../external/react-resize-detector/build/index.esm.js"),n=require("../shared/accessibility/index.js"),d=require("../shared/clickable-icon/clickable-icon.js"),c=require("../shared/time-slot/time-slot.js"),u=require("../typography/index.js"),m=require("../util/time-helper.js"),f=require("./helper.js"),h=require("./time-slot-bar.styles.js"),p=require("./time-slot-divider.js"),j=require("./time-slot-item.js");function b(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=b(a);const g=o.forwardRef(((a,b)=>{const{"data-testid":g,className:T,variant:x="default",startTime:k,endTime:y,slots:C,onSlotClick:B,onClick:S,styleAttributes:H,initialScrollTime:q,roundInitialScrollTime:w=!0}=a,I=o.useRef(null),[N,M]=o.useState(0),[W,L]=o.useState(0),R=f.getCellWidth(x),D=f.TimeSlotBarHelper.adjustTimeForMarker(k,"start"),$=f.TimeSlotBarHelper.adjustTimeForMarker(y,"end"),E=2.5*R;o.useImperativeHandle(b,(()=>({resetScroll:X})));const{summary:_,computedSlots:z}=o.useMemo((()=>f.TimeSlotBarHelper.processSlots({start:D,end:$},C,x)),[D,$,C,x]);o.useEffect((()=>{const e=I.current;return e&&(e.addEventListener("scroll",F),L(e.clientWidth)),()=>{e&&e.removeEventListener("scroll",F)}}),[]),o.useEffect((()=>{X()}),[q,R,k,y]);const F=()=>{I.current&&M(I.current.scrollLeft)};s.useResizeDetector({onResize:()=>{I.current&&L(I.current.clientWidth)},targetRef:I,refreshMode:"debounce",refreshRate:50});const O=e=>e<=R/2,A=e=>{if(g)return`${g}-${e}`},P=(e,r,t)=>{const l=0===e.minute();if("default"===t)return l;return l&&(r?e.hour()%2==0:e.hour()%2==1)},X=()=>{if(q&&I.current&&R>0){const e=m.TimeHelper.calculateScrollPosition({scrollTime:q,minTime:D,maxTime:$,interval:30,intervalWidth:R,options:{roundToInterval:w}});null!==e&&(I.current.scrollLeft=e)}},V=e=>x===e,G=e=>{const a="left"===e,i=f.TimeSlotBarHelper.calculateWidth(D,$,R);if(!(a?N>0:N+W<i))return null;const o=a?h.arrowButtonLeft:h.arrowButtonRight,s="default"===x?h.arrowButtonDefault:h.arrowButtonMinified,n=a?r.jsx(t.ChevronLeftIcon,{className:h.arrowIcon}):r.jsx(l.ChevronRightIcon,{className:h.arrowIcon});return r.jsx(d.ClickableIcon,{"data-testid":A(`arrow-${e}`),"aria-hidden":!0,tabIndex:-1,className:v.default(h.arrowButton,o,s),focusHighlight:!1,focusOutline:"none",onClick:()=>{(e=>{I.current&&I.current.scrollBy({left:"left"===e?-E:E,behavior:"smooth"})})(e)},children:n})};return r.jsxs("div",{className:v.default(h.container,T),children:[r.jsxs("div",{"data-testid":g,ref:I,className:v.default(h.timeSlotBarContainer,"default"===x?h.containerDefault:h.containerMinified),children:[r.jsx("div",{className:h.timeMarkerWrapper,"data-testid":A("time-marker-wrapper"),"data-id":"marker-wrapper",children:(()=>{const e=[],t=i.default(D,"HH:mm"),l=i.default($,"HH:mm"),a=t.hour()%2==0;for(let i=t;i.isBefore(l);i=i.add(30,"minute")){const t=P(i,a,x);e.push(r.jsx("div",{"data-testid":`${i.format("HH:mm")}-marker`,className:v.default(h.timeMarker,"default"===x?h.timeMarkerDefault:h.timeMarkerMinified,t&&h.timeMarkerLong),children:t&&r.jsx(u.Typography.BodyXS,{className:h.timeLabel,weight:"semibold",children:f.TimeSlotBarHelper.formatHourlyDisplay(i.format("HH:mm"))})},i.format("HH:mm")))}return e})()}),r.jsx("div",{role:"grid","aria-label":_,tabIndex:0,children:r.jsxs("div",{className:h.timeSlotWrapper,"data-testid":A("time-slot-wrapper"),"data-id":"slot-wrapper",role:"row",children:[(()=>{if(!H)return;const{backgroundColor:e,backgroundColor2:t,hoverBackgroundColor:l,hoverBackgroundColor2:a,styleType:i="default"}=H,o=f.TimeSlotBarHelper.calculateWidth(D,$,R),s=!!S&&V("default");return r.jsxs(r.Fragment,{children:[r.jsx(p.default,{variant:x}),r.jsx(j.default,{variant:x,dataTestId:A("default-timeslot"),slotWidth:o,slotOffset:0,onClick:s?S:void 0,children:r.jsx(c.TimeSlot,{className:h.timeSlotItemContent,styleType:i,bgColor:e,bgColor2:t,hoverBgColor:l,hoverBgColor2:a,clickable:s})},"default-timeslot")]})})(),z.map((t=>{const{id:l,startTime:a,endTime:i,label:o,clickable:s=!0,styleAttributes:d,ariaLabel:m}=t,{color:b,styleType:v="default",backgroundColor:g,backgroundColor2:T,hoverBackgroundColor:k,hoverBackgroundColor2:C}=d,S=f.TimeSlotBarHelper.calculateWidth(a,i,R),H=f.TimeSlotBarHelper.calculateWidth(D,a,R),q=s&&"default"===x,w=V("default")&&o,I=r=>t=>{t.stopPropagation();const{ariaLabel:l}=r,a=e.__rest(r,["ariaLabel"]);q&&B(a)};return r.jsxs("div",{role:"gridcell",children:[r.jsx(p.default,{variant:x,left:H,dataTestId:"start-border"}),r.jsx(j.default,{variant:x,dataTestId:A(`${l}-timeslot`),slotWidth:S,slotOffset:H,color:b,onClick:I(t),children:r.jsxs(c.TimeSlot,{className:h.timeSlotItemContent,styleType:v,bgColor:g,bgColor2:T,hoverBgColor:k,hoverBgColor2:C,clickable:q,children:[!!m&&r.jsx(n.VisuallyHidden,{children:r.jsx("button",{type:"button","aria-disabled":!q,"aria-label":m,onClick:I(t)})}),w&&r.jsx(u.Typography.BodyXS,{className:h.cellText,weight:"semibold","aria-hidden":!m,children:O(S)?"...":o})]})}),y!==i&&r.jsx(p.default,{variant:x,dataTestId:"end-border",left:H+S})]},l)}))]})})]}),G("left"),G("right")]})}));exports.TimeSlotBar=g;
 //# sourceMappingURL=time-slot-bar.js.map