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

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

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 (1629) hide show

package/cjs/date-input/date-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-input.js","sources":["../../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\nexport const DateInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialDate, setInitialDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [selectedDate, setSelectedDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [hoveredDate, setHoveredDate] = useState<string \| undefined>(\n undefined\n );\n const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<StandaloneDateInputRef>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const newValue = DateInputHelper.sanitizeInput(value);\n setInitialDate(newValue);\n setSelectedDate(newValue);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClose = () => {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n setFocused(false);\n\n performOnBlurHandler();\n\n // clear hover value for mobile scrolling\n setHoveredDate(undefined);\n };\n\n const handleDismiss = () => {\n inputRef.current?.resetInput();\n nodeRef.current?.focus();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n };\n\n const handleChange = (val: string) => {\n if (\n !allowDisabledSelection &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n ) {\n return;\n }\n\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n setCalendarOpen(false);\n }\n }\n };\n\n const handleSelect = (val: string) => {\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n inputRef.current?.focusYearRef();\n setCalendarOpen(false);\n }\n\n // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n setHoveredDate(undefined);\n }\n };\n\n const handleFocus = () => {\n if (readOnly \|\| disabled) return;\n\n setCalendarOpen(true);\n\n if (focused) return;\n\n setFocused(true);\n\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setFocused(false);\n setCalendarOpen(false);\n performOnBlurHandler();\n }\n };\n\n const handleHoverDayCell = (value: string) => {\n setHoveredDate(value);\n };\n\n const handleCalendarAction = (buttonAction: CalendarAction) => {\n // handle button in day calendar view\n switch (buttonAction) {\n case \"reset\":\n setSelectedDate(initialDate);\n break;\n case \"confirmed\":\n setInitialDate(selectedDate);\n performOnChangeHandler(selectedDate);\n break;\n }\n\n const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n // Focus on year input if the selected date is valid to avoid restarting entire tab order\n if (isValid) {\n inputRef.current?.focusYearRef();\n } else {\n nodeRef.current?.focus();\n }\n setCalendarOpen(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnChangeHandler = (changeValue: string) => {\n if (onChange) {\n onChange(changeValue);\n }\n };\n\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n tabIndex={0}\n ref={nodeRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n disabled={disabled}\n readOnly={readOnly}\n focused={focused}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n className={clsx(styles.container, className)}\n {...otherProps}\n >\n <StandaloneDateInput\n ref={inputRef}\n disabled={disabled}\n onChange={handleChange}\n readOnly={readOnly}\n focused={calendarOpen}\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n value={selectedDate}\n hoverValue={hoveredDate}\n hideInputKeyboard={hideInputKeyboard}\n />\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n ref={calendarRef}\n initialCalendarDate={selectedDate}\n withButton={withButton}\n value={selectedDate}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onHover={handleHoverDayCell}\n onSelect={handleSelect}\n onDismiss={handleCalendarAction}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n onClose={handleClose}\n onDismiss={handleDismiss}\n customZIndex={zIndex}\n offset={16}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"date-input.js","sources":["../../../src/date-input/date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateInputHelper } from \"../util\";\nimport * as styles from \"./date-input.styles\";\nimport type { DateInputProps } from \"./types\";\n\n/*\n A single-date input field with an attached calendar dropdown.\n \n Use this to enter or pick a single date.\n */\nexport const DateInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialDate, setInitialDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [selectedDate, setSelectedDate] = useState<string>(\n DateInputHelper.sanitizeInput(value)\n );\n const [hoveredDate, setHoveredDate] = useState<string \| undefined>(\n undefined\n );\n const [calendarOpen, setCalendarOpen] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const inputRef = useRef<StandaloneDateInputRef>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n const newValue = DateInputHelper.sanitizeInput(value);\n setInitialDate(newValue);\n setSelectedDate(newValue);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClose = () => {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n setFocused(false);\n\n performOnBlurHandler();\n\n // clear hover value for mobile scrolling\n setHoveredDate(undefined);\n };\n\n const handleDismiss = () => {\n inputRef.current?.resetInput();\n nodeRef.current?.focus();\n setSelectedDate(initialDate);\n setCalendarOpen(false);\n };\n\n const handleChange = (val: string) => {\n if (\n !allowDisabledSelection &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n ) {\n return;\n }\n\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n setCalendarOpen(false);\n }\n }\n };\n\n const handleSelect = (val: string) => {\n setSelectedDate(val);\n\n if (!withButton) {\n performOnChangeHandler(val);\n setInitialDate(val);\n if (val) {\n inputRef.current?.focusYearRef();\n setCalendarOpen(false);\n }\n\n // clear hover value for mobile when onMouseLeave={handleMouseLeaveCell} is not triggered due to touch input\n setHoveredDate(undefined);\n }\n };\n\n const handleFocus = () => {\n if (readOnly \|\| disabled) return;\n\n setCalendarOpen(true);\n\n if (focused) return;\n\n setFocused(true);\n\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n inputRef.current?.resetInput();\n setSelectedDate(initialDate);\n setFocused(false);\n setCalendarOpen(false);\n performOnBlurHandler();\n }\n };\n\n const handleHoverDayCell = (value: string) => {\n if (!calendarOpen) return;\n setHoveredDate(value);\n };\n\n const handleCalendarAction = (buttonAction: CalendarAction) => {\n // handle button in day calendar view\n switch (buttonAction) {\n case \"reset\":\n setSelectedDate(initialDate);\n break;\n case \"confirmed\":\n setInitialDate(selectedDate);\n performOnChangeHandler(selectedDate);\n break;\n }\n\n const isValid = dayjs(selectedDate, \"YYYY-MM-DD\", true).isValid();\n\n // Focus on year input if the selected date is valid to avoid restarting entire tab order\n if (isValid) {\n inputRef.current?.focusYearRef();\n } else {\n nodeRef.current?.focus();\n }\n setCalendarOpen(false);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnChangeHandler = (changeValue: string) => {\n if (onChange) {\n onChange(changeValue);\n }\n };\n\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n tabIndex={0}\n ref={nodeRef}\n onBlur={handleBlur}\n onFocus={handleFocus}\n disabled={disabled}\n readOnly={readOnly}\n focused={focused}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n className={clsx(styles.container, className)}\n {...otherProps}\n >\n <StandaloneDateInput\n ref={inputRef}\n disabled={disabled}\n onChange={handleChange}\n readOnly={readOnly}\n focused={calendarOpen}\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n value={selectedDate}\n hoverValue={hoveredDate}\n hideInputKeyboard={hideInputKeyboard}\n />\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n ref={calendarRef}\n initialCalendarDate={selectedDate}\n withButton={withButton}\n value={selectedDate}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onHover={handleHoverDayCell}\n onSelect={handleSelect}\n onDismiss={handleCalendarAction}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n onClose={handleClose}\n onDismiss={handleDismiss}\n customZIndex={zIndex}\n offset={16}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","className","otherProps","__rest","initialDate","setInitialDate","useState","DateInputHelper","sanitizeInput","selectedDate","setSelectedDate","hoveredDate","setHoveredDate","undefined","calendarOpen","setCalendarOpen","focused","setFocused","nodeRef","useRef","inputRef","calendarRef","useEffect","newValue","handleChange","val","isDateDisabled","performOnChangeHandler","handleSelect","current","focusYearRef","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_b","_c","resetInput","performOnBlurHandler","handleHoverDayCell","handleCalendarAction","buttonAction","dayjs","isValid","focus","changeValue","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","InputWrapper","Object","assign","role","tabIndex","ref","clsx","styles.container","children","StandaloneDateInput","names","hoverValue","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onHover","onSelect","onDismiss","width","isFocusable","onClose","customZIndex","offset","rootNode"],"mappings":"ozBAuB0BA,IAAA,IAAAC,QACtBA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,cACRA,EAAaC,MACbA,EAAKC,kBACLA,EAAiBC,MACjBA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,yBACNA,EAAwBC,WACxBA,GAAa,EAAIC,SACjBA,EAAQC,GACRA,EAAEC,uBACFA,EAAsBC,OACtBA,EAAMC,iBACNA,EAAgBC,UAChBA,GAASlB,EACNmB,EAAUC,SAAApB,EAnBS,6OAwBtB,MAAOqB,EAAaC,GAAkBC,EAAAA,SAClCC,kBAAgBC,cAAclB,KAE3BmB,EAAcC,GAAmBJ,EAAAA,SACpCC,kBAAgBC,cAAclB,KAE3BqB,EAAaC,GAAkBN,EAAAA,cAClCO,IAEGC,EAAcC,GAAmBT,EAAAA,UAAkB,IACnDU,EAASC,GAAcX,EAAAA,UAAkB,GAE1CY,EAAUC,EAAAA,OAAuB,MACjCC,EAAWD,EAAAA,OAA+B,MAC1CE,EAAcF,EAAAA,OAA4B,MAKhDG,EAAAA,WAAU,KACN,MAAMC,EAAWhB,EAAAA,gBAAgBC,cAAclB,GAC/Ce,EAAekB,GACfb,EAAgBa,EAAS,GAC1B,CAACjC,IAKJ,MAmBMkC,EAAgBC,KAEb3B,GACDS,EAAAA,gBAAgBmB,eAAeD,EAAK,CAChCtC,gBACAH,UACAC,cAMRyB,EAAgBe,GAEX9B,IACDgC,EAAuBF,GACvBpB,EAAeoB,GACXA,GACAV,GAAgB,IAExB,EAGEa,EAAgBH,UAClBf,EAAgBe,GAEX9B,IACDgC,EAAuBF,GACvBpB,EAAeoB,GACXA,IACgB,QAAhB1C,EAAAqC,EAASS,eAAO,IAAA9C,GAAAA,EAAE+C,eAClBf,GAAgB,IAIpBH,OAAeC,GACnB,EAGEkB,EAAc,KACZnC,GAAYV,IAEhB6B,GAAgB,GAEZC,IAEJC,GAAW,GAEPzB,GACAA,KACJ,EAGEwC,EAAcC,cAChB,MAAMC,EAASD,EAAEE,cAEXC,EACFf,EAAYQ,SAAWR,EAAYQ,QAAQQ,SAASH,GAClDI,EACFpB,EAAQW,SAAWX,EAAQW,QAAQQ,SAASH,GAC1CK,GACa,QAAfxD,EAAAmD,aAAM,EAANA,EAAQM,eAAO,IAAAzD,OAAA,EAAAA,EAAA0D,KAAAP,EAAG,mCACH,QAAfQ,EAAAR,aAAM,EAANA,EAAQM,eAAO,IAAAE,OAAA,EAAAA,EAAAD,KAAAP,EAAG,oCAIlBlB,IAAYF,IAAiBwB,IAAiBC,GAI9CzB,IACCwB,IACAF,IACAG,KAGe,QAAhBI,EAAAvB,EAASS,eAAO,IAAAc,GAAAA,EAAEC,aAClBlC,EAAgBN,GAChBa,GAAW,GACXF,GAAgB,GAChB8B,IACJ,EAGEC,EAAsBxD,IACnBwB,GACLF,EAAetB,EAAM,EAGnByD,EAAwBC,YAE1B,OAAQA,GACJ,IAAK,QACDtC,EAAgBN,GAChB,MACJ,IAAK,YACDC,EAAeI,GACfkB,EAAuBlB,GAIfwC,EAAAA,QAAMxC,EAAc,cAAc,GAAMyC,UAIpC,QAAhBnE,EAAAqC,EAASS,eAAO,IAAA9C,GAAAA,EAAE+C,eAEH,QAAfY,EAAAxB,EAAQW,eAAO,IAAAa,GAAAA,EAAES,QAErBpC,GAAgB,EAAM,EAMpBY,EAA0ByB,IACxB7D,GACAA,EAAS6D,EACb,EAGEP,EAAuB,KACrBpD,GACAA,GACJ,EA6DJ,OACI4D,MAACC,EAAAA,oBAAmB,CAChBC,SAAU3D,IAAaV,EACvBsE,OAAQ1C,EACR2C,cA3DY,IAEZJ,EAAAA,IAACK,EAAAA,aAAYC,OAAAC,OAAA,CACTC,KAAK,QACLC,SAAU,EACVC,IAAK7C,EACLzB,OAAQuC,EACRxC,QAASuC,EACT7C,SAAUA,EACVU,SAAUA,EACVoB,QAASA,EACT5B,MAAOA,EACPS,GAAIA,EAAE,cACOK,EAAW,eAAc,gBACvBhB,EACfe,UAAW+D,EAAAA,QAAKC,EAAAA,UAAkBhE,IAC9BC,EAAU,CAAAgE,SAEdb,EAAAA,IAACc,EAAAA,oBAAmB,CAChBJ,IAAK3C,EACLlC,SAAUA,EACVK,SAAUiC,EACV5B,SAAUA,EACVoB,QAASF,EACTsD,MAAO,CAAC,YAAa,cAAe,cACpC9E,MAAOmB,EACP4D,WAAY1D,EACZtB,kBAAmBA,OAiC3BiF,eA3Be,EAAGC,kBAElBlB,EAAAA,IAACmB,EAAAA,iBAAgB,CACbC,QAAQ,SACRV,IAAK1C,EACLqD,oBAAqBjE,EACrBd,WAAYA,EACZL,MAAOmB,EACPtB,cAAeA,EACfH,QAASA,EACTC,QAASA,EACTa,uBAAwBA,EACxB6E,QAAS7B,EACT8B,SAAUhD,EACViD,UAAW9B,EACXrD,yBAA0BA,EAC1BoF,MAAOP,EACPQ,aAAcnF,IAAaV,IAW/B8F,QAlNY,WACA,QAAhBjG,EAAAqC,EAASS,eAAO,IAAA9C,GAAAA,EAAE6D,aAClBlC,EAAgBN,GAChBW,GAAgB,GAChBE,GAAW,GAEX4B,IAGAjC,OAAeC,EAAU,EA0MrBgE,UAvMc,aACF,QAAhB9F,EAAAqC,EAASS,eAAO,IAAA9C,GAAAA,EAAE6D,aACH,QAAfF,EAAAxB,EAAQW,eAAO,IAAAa,GAAAA,EAAES,QACjBzC,EAAgBN,GAChBW,GAAgB,EAAM,EAoMlBkE,aAAclF,EACdmF,OAAQ,GACRC,SAAUnF,GACZ"}

package/cjs/date-input/date-input.styles_1r5kcc7.css CHANGED Viewed

	@@ -1 +1 @@
1	- .c1udubt6{height:3rem;}
1	+ @layer fds{.c1udubt6{height:3rem;}}

package/cjs/date-navigator/date-navigator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-navigator.js","sources":["../../../src/date-navigator/date-navigator.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport { CalendarHelper, DateHelper } from \"../util\";\nimport * as styles from \"./date-navigator.styles\";\nimport type { DateNavigatorProps } from \"./types\";\n\nexport const DateNavigator = ({\n selectedDate,\n minDate,\n maxDate,\n loading,\n showDateAsShortForm,\n showCurrentDateAsToday,\n view = \"day\",\n onLeftArrowClick,\n onRightArrowClick,\n onCalendarDateSelect,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateNavigatorProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const date = DateHelper.toDayjs(selectedDate);\n const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const isLeftArrowDisabled = () => {\n if (!minDate) {\n return false;\n }\n return (\n CalendarHelper.isDisabledDay(date, undefined, minDate) \|\|\n DateHelper.isSame(date, minDate)\n );\n };\n\n const isRightArrowDisabled = () => {\n if (!maxDate) {\n return false;\n }\n return (\n CalendarHelper.isDisabledDay(date, undefined, undefined, maxDate) \|\|\n DateHelper.isSame(date, maxDate)\n );\n };\n\n const handleSelect = (value: string) => {\n onCalendarDateSelect?.(value);\n setIsCalendarOpen(!isCalendarOpen);\n };\n\n const navigatePrevious = () => {\n setIsCalendarOpen(false);\n onLeftArrowClick(selectedDate);\n };\n\n const navigateNext = () => {\n setIsCalendarOpen(false);\n onRightArrowClick(selectedDate);\n };\n\n // Helper function to get week range\n const getWeekRange = (selectedDate: string) => {\n const currentDate = DateHelper.toDayjs(selectedDate);\n const startOfWeek = currentDate.startOf(\"week\");\n const endOfWeek = currentDate.endOf(\"week\");\n\n return {\n startDisplay: startOfWeek.format(\"D MMM\"),\n endDisplay: endOfWeek.format(\"D MMM\"),\n year: endOfWeek.format(\"YYYY\"),\n };\n };\n\n // Calculate display text based on view\n const getDisplayText = () => {\n if (view === \"week\") {\n const weekRange = getWeekRange(selectedDate);\n return `${weekRange.startDisplay} - ${weekRange.endDisplay}, ${weekRange.year}`;\n }\n const dateText = DateHelper.toDayjs(selectedDate)\n .format(showDateAsShortForm ? \"D MMM YYYY\" : \"D MMMM YYYY\")\n .toString();\n const isToday = DateHelper.isSame(selectedDate, dayjs());\n const dayText =\n isToday && showCurrentDateAsToday\n ? \"Today\"\n : date.format(showDateAsShortForm ? \"ddd\" : \"dddd\");\n return `${dateText}, ${dayText}`;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n initialCalendarDate={selectedDate}\n value={selectedDate}\n minDate={minDate}\n maxDate={maxDate}\n onSelect={handleSelect}\n width={elementWidth}\n />\n );\n };\n\n const renderDateNavElement = () => {\n const ariaLabel =\n view === \"week\"\n ? {\n left: \"Previous week\",\n right: \"Next week\",\n }\n : {\n left: \"Previous day\",\n right: \"Next day\",\n };\n\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <Button\n className={styles.headerArrowButton}\n data-testid=\"date-navigator-left-arrow-btn\"\n disabled={loading \|\| isLeftArrowDisabled()}\n aria-label={ariaLabel.left}\n onClick={navigatePrevious}\n styleType=\"light\"\n sizeType=\"small\"\n icon={\n <ChevronLeftIcon\n className={styles.headerArrowButtonIcon}\n />\n }\n />\n <BasicButton\n onClick={() => setIsCalendarOpen(!isCalendarOpen)}\n className={styles.dateTextButton}\n data-testid=\"date-navigator-date-text\"\n disabled={!onCalendarDateSelect \|\| loading}\n >\n {getDisplayText()}\n </BasicButton>\n <Button\n className={styles.headerArrowButton}\n data-testid=\"date-navigator-right-arrow-btn\"\n disabled={loading \|\| isRightArrowDisabled()}\n aria-label={ariaLabel.right}\n onClick={navigateNext}\n styleType=\"light\"\n sizeType=\"small\"\n icon={\n <ChevronRightIcon\n className={styles.headerArrowButtonIcon}\n />\n }\n />\n </div>\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!loading}\n isOpen={isCalendarOpen}\n renderElement={renderDateNavElement}\n renderDropdown={renderCalendar}\n onDismiss={() => setIsCalendarOpen(false)}\n onClose={() => setIsCalendarOpen(false)}\n offset={8}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["_a","selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","className","otherProps","__rest","date","DateHelper","toDayjs","isCalendarOpen","setIsCalendarOpen","useState","handleSelect","value","navigatePrevious","navigateNext","getDisplayText","weekRange","currentDate","startOfWeek","startOf","endOfWeek","endOf","startDisplay","format","endDisplay","year","getWeekRange","toString","isSame","dayjs","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","ariaLabel","left","right","_jsxs","Object","assign","clsx","styles.container","children","Button","styles.headerArrowButton","disabled","CalendarHelper","isDisabledDay","undefined","onClick","styleType","sizeType","icon","ChevronLeftIcon","styles.headerArrowButtonIcon","BasicButton","styles.dateTextButton","ChevronRightIcon","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onSelect","width","onDismiss","onClose","offset","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"date-navigator.js","sources":["../../../src/date-navigator/date-navigator.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport { CalendarHelper, DateHelper } from \"../util\";\nimport * as styles from \"./date-navigator.styles\";\nimport type { DateNavigatorProps } from \"./types\";\n\n/*\n Displays a date with left/right navigation arrows for stepping through dates or weeks.\n \n Use when users need to browse content organised by day or week — such as schedules,\n * calendars, or time-based feeds.\n */\nexport const DateNavigator = ({\n selectedDate,\n minDate,\n maxDate,\n loading,\n showDateAsShortForm,\n showCurrentDateAsToday,\n view = \"day\",\n onLeftArrowClick,\n onRightArrowClick,\n onCalendarDateSelect,\n dropdownRootNode,\n className,\n ...otherProps\n}: DateNavigatorProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const date = DateHelper.toDayjs(selectedDate);\n const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const isLeftArrowDisabled = () => {\n if (!minDate) {\n return false;\n }\n return (\n CalendarHelper.isDisabledDay(date, undefined, minDate) \|\|\n DateHelper.isSame(date, minDate)\n );\n };\n\n const isRightArrowDisabled = () => {\n if (!maxDate) {\n return false;\n }\n return (\n CalendarHelper.isDisabledDay(date, undefined, undefined, maxDate) \|\|\n DateHelper.isSame(date, maxDate)\n );\n };\n\n const handleSelect = (value: string) => {\n onCalendarDateSelect?.(value);\n setIsCalendarOpen(!isCalendarOpen);\n };\n\n const navigatePrevious = () => {\n setIsCalendarOpen(false);\n onLeftArrowClick(selectedDate);\n };\n\n const navigateNext = () => {\n setIsCalendarOpen(false);\n onRightArrowClick(selectedDate);\n };\n\n // Helper function to get week range\n const getWeekRange = (selectedDate: string) => {\n const currentDate = DateHelper.toDayjs(selectedDate);\n const startOfWeek = currentDate.startOf(\"week\");\n const endOfWeek = currentDate.endOf(\"week\");\n\n return {\n startDisplay: startOfWeek.format(\"D MMM\"),\n endDisplay: endOfWeek.format(\"D MMM\"),\n year: endOfWeek.format(\"YYYY\"),\n };\n };\n\n // Calculate display text based on view\n const getDisplayText = () => {\n if (view === \"week\") {\n const weekRange = getWeekRange(selectedDate);\n return `${weekRange.startDisplay} - ${weekRange.endDisplay}, ${weekRange.year}`;\n }\n const dateText = DateHelper.toDayjs(selectedDate)\n .format(showDateAsShortForm ? \"D MMM YYYY\" : \"D MMMM YYYY\")\n .toString();\n const isToday = DateHelper.isSame(selectedDate, dayjs());\n const dayText =\n isToday && showCurrentDateAsToday\n ? \"Today\"\n : date.format(showDateAsShortForm ? \"ddd\" : \"dddd\");\n return `${dateText}, ${dayText}`;\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n variant=\"single\"\n initialCalendarDate={selectedDate}\n value={selectedDate}\n minDate={minDate}\n maxDate={maxDate}\n onSelect={handleSelect}\n width={elementWidth}\n />\n );\n };\n\n const renderDateNavElement = () => {\n const ariaLabel =\n view === \"week\"\n ? {\n left: \"Previous week\",\n right: \"Next week\",\n }\n : {\n left: \"Previous day\",\n right: \"Next day\",\n };\n\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <Button\n className={styles.headerArrowButton}\n data-testid=\"date-navigator-left-arrow-btn\"\n disabled={loading \|\| isLeftArrowDisabled()}\n aria-label={ariaLabel.left}\n onClick={navigatePrevious}\n styleType=\"light\"\n sizeType=\"small\"\n icon={\n <ChevronLeftIcon\n className={styles.headerArrowButtonIcon}\n />\n }\n />\n <BasicButton\n onClick={() => setIsCalendarOpen(!isCalendarOpen)}\n className={styles.dateTextButton}\n data-testid=\"date-navigator-date-text\"\n disabled={!onCalendarDateSelect \|\| loading}\n >\n {getDisplayText()}\n </BasicButton>\n <Button\n className={styles.headerArrowButton}\n data-testid=\"date-navigator-right-arrow-btn\"\n disabled={loading \|\| isRightArrowDisabled()}\n aria-label={ariaLabel.right}\n onClick={navigateNext}\n styleType=\"light\"\n sizeType=\"small\"\n icon={\n <ChevronRightIcon\n className={styles.headerArrowButtonIcon}\n />\n }\n />\n </div>\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!loading}\n isOpen={isCalendarOpen}\n renderElement={renderDateNavElement}\n renderDropdown={renderCalendar}\n onDismiss={() => setIsCalendarOpen(false)}\n onClose={() => setIsCalendarOpen(false)}\n offset={8}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["_a","selectedDate","minDate","maxDate","loading","showDateAsShortForm","showCurrentDateAsToday","view","onLeftArrowClick","onRightArrowClick","onCalendarDateSelect","dropdownRootNode","className","otherProps","__rest","date","DateHelper","toDayjs","isCalendarOpen","setIsCalendarOpen","useState","handleSelect","value","navigatePrevious","navigateNext","getDisplayText","weekRange","currentDate","startOfWeek","startOf","endOfWeek","endOf","startDisplay","format","endDisplay","year","getWeekRange","toString","isSame","dayjs","_jsx","ElementWithDropdown","enabled","isOpen","renderElement","ariaLabel","left","right","_jsxs","Object","assign","clsx","styles.container","children","Button","styles.headerArrowButton","disabled","CalendarHelper","isDisabledDay","undefined","onClick","styleType","sizeType","icon","ChevronLeftIcon","styles.headerArrowButtonIcon","BasicButton","styles.dateTextButton","ChevronRightIcon","renderDropdown","elementWidth","CalendarDropdown","variant","initialCalendarDate","onSelect","width","onDismiss","onClose","offset","rootNode"],"mappings":"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"}

package/cjs/date-navigator/date-navigator.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./date-navigator.styles_1cotsgz.css");exports.container="c1mdg68z",exports.dateTextButton="d1pl361j",exports.headerArrowButton="h1w7ufcd",exports.headerArrowButtonIcon="h7gg62z";
+"use strict";require("./date-navigator.styles_wokh56.css");exports.container="c1mdg68z",exports.dateTextButton="d1pl361j",exports.headerArrowButton="h1w7ufcd",exports.headerArrowButtonIcon="h7gg62z";
 //# sourceMappingURL=date-navigator.styles.js.map

package/cjs/date-navigator/date-navigator.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-navigator.styles.js","sources":["../../../src/date-navigator/date-navigator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const container = css`\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n background-color: ${Colour[\"bg-strong\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const headerArrowButton = css`\n margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const headerArrowButtonIcon = css`\n color: ${Colour[\"icon\"]};\n`;\n\nexport const dateTextButton = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"text\"]};\n cursor: default;\n\n &:not(:disabled) {\n color: ${Colour[\"text-primary\"]};\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus {\n outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-underline-position: under;\n }\n`;\n"],"names":[],"mappings":"~~4GAIsB~~,kCAiBK,qCARG,yCAII"}
1	+ {"version":3,"file":"date-navigator.styles.js","sources":["../../../src/date-navigator/date-navigator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const container = css`\n display: flex;\n position: relative;\n align-items: center;\n justify-content: space-between;\n background-color: ${Colour[\"bg-strong\"]};\n border-radius: ${Radius[\"sm\"]};\n`;\n\nexport const headerArrowButton = css`\n margin: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const headerArrowButtonIcon = css`\n color: ${Colour[\"icon\"]};\n`;\n\nexport const dateTextButton = css`\n ${Font[\"body-baseline-semibold\"]}\n color: ${Colour[\"text\"]};\n cursor: default;\n\n &:not(:disabled) {\n color: ${Colour[\"text-primary\"]};\n }\n\n &:not(:disabled):hover,\n &:not(:disabled):focus {\n outline: none;\n cursor: pointer;\n text-decoration: underline;\n text-underline-position: under;\n }\n`;\n"],"names":[],"mappings":"2GAIsB,kCAiBK,qCARG,yCAII"}

package/cjs/date-navigator/date-navigator.styles_wokh56.css ADDED Viewed

@@ -0,0 +1,4 @@
+@layer fds{.c1mdg68z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;background-color:var(--fds-colour-bg-strong);border-radius:var(--fds-radius-sm);}
+.h1w7ufcd{margin:var(--fds-spacing-8);}
+.h7gg62z{color:var(--fds-colour-icon);}
+.d1pl361j{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);cursor:default;}.d1pl361j:not(:disabled){color:var(--fds-colour-text-primary);}.d1pl361j:not(:disabled):hover,.d1pl361j:not(:disabled):focus{outline:none;cursor:pointer;-webkit-text-decoration:underline;text-decoration:underline;text-underline-position:under;}}

package/cjs/date-range-input/date-range-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-range-input.js","sources":["../../../src/date-range-input/date-range-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n FocusType,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateHelper, DateInputHelper, useContainerQuery } from \"../util\";\nimport { useStateActions } from \"../util/use-state-actions\";\nimport * as styles from \"./date-range-input.styles\";\nimport type { DateRangeInputProps } from \"./types\";\n\ninterface DateRangeInputState {\n initialStart: string;\n initialEnd: string;\n selectedStart: string;\n selectedEnd: string;\n currentFocus: FocusType;\n calendarOpen: boolean;\n isStartDirty: boolean;\n isEndDirty: boolean;\n focused: boolean;\n}\n\nconst INITIAL_STATE: DateRangeInputState = {\n initialStart: \"\",\n initialEnd: \"\",\n selectedStart: \"\",\n selectedEnd: \"\",\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n focused: false,\n};\n\nexport const DateRangeInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n valueEnd,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n variant = \"range\",\n numberOfDays = 7,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode: rootNode,\n ...otherProps\n}: DateRangeInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialCalendarDate, setInitialCalendarDate] = useState<string>();\n const [hoverValue, setHoverValue] = useState<string \| undefined>(undefined);\n const isWeekSelection = variant === \"week\";\n const isFixedRangeSelection = variant === \"fixed-range\";\n\n const [isStartDisabled, setIsStartDisabled] = useState<boolean>(false);\n const [isEndDisabled, setIsEndDisabled] = useState<boolean>(false);\n\n const [\n {\n selectedStart,\n selectedEnd,\n currentFocus,\n calendarOpen,\n isStartDirty,\n isEndDirty,\n focused,\n },\n actions,\n ] = useStateActions({\n name: \"date-range-input\",\n initialState: INITIAL_STATE,\n reducers: {\n blur: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n focused: false,\n }),\n dismiss: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n }),\n changeStart: (state, val: string) => ({\n ...state,\n selectedStart: val,\n isStartDirty: true,\n }),\n changeEnd: (state, val: string) => ({\n ...state,\n selectedEnd: val,\n isEndDirty: true,\n }),\n reselectStart: (state) => ({\n ...state,\n selectedStart: \"\",\n currentFocus: \"start\",\n }),\n reselectEnd: (state) => ({\n ...state,\n selectedEnd: \"\",\n currentFocus: \"end\",\n }),\n focus: (state, currentFocus: FocusType) => ({\n ...state,\n currentFocus: isWeekSelection\n ? \"none\"\n : isFixedRangeSelection\n ? \"start\"\n : currentFocus,\n calendarOpen: !readOnly,\n focused: true,\n }),\n cancel: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n }),\n done: (state, payload: { start: string; end: string }) => ({\n ...state,\n selectedStart: payload.start,\n selectedEnd: payload.end,\n initialStart: payload.start,\n initialEnd: payload.end,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n }),\n resetStart: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n }),\n resetEnd: (state) => ({\n ...state,\n selectedEnd: state.initialEnd,\n }),\n resetRange: (state, payload: { start: string; end: string }) => ({\n ...state,\n initialStart: payload.start,\n selectedStart: payload.start,\n initialEnd: payload.end,\n selectedEnd: payload.end,\n }),\n },\n });\n\n // tracks if current value in focused input is allowed for selection\n const isUnselectable = useRef<boolean>(false);\n const nodeRef = useRef<HTMLDivElement>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n const startInputRef = useRef<StandaloneDateInputRef>(null);\n const endInputRef = useRef<StandaloneDateInputRef>(null);\n const shouldWrap = useContainerQuery({\n maxWidth: styles.MOBILE_WRAP_WIDTH,\n targetRef: nodeRef,\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n actions.resetRange({\n start: DateInputHelper.sanitizeInput(value),\n end: DateInputHelper.sanitizeInput(valueEnd),\n });\n }, [value, valueEnd]);\n\n useEffect(() => {\n if (currentFocus === \"start\") {\n setInitialCalendarDate(selectedStart);\n } else if (currentFocus === \"end\" && selectedEnd) {\n setInitialCalendarDate(selectedEnd);\n }\n }, [currentFocus]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleNodeKeyDown = (event: React.KeyboardEvent) => {\n if (event.code === \"Enter\" && !withButton) {\n if (selectedStart && selectedEnd) {\n actions.done({\n start: selectedStart,\n end: selectedEnd,\n });\n onChange?.(selectedStart, selectedEnd);\n } else {\n actions.dismiss();\n nodeRef.current?.focus();\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n }\n }\n };\n\n const handleClose = () => {\n actions.blur();\n\n setIsStartDisabled(false);\n setIsEndDisabled(false);\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n\n performOnBlurHandler();\n };\n\n const handleDismiss = () => {\n actions.dismiss();\n\n nodeRef.current?.focus();\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n };\n\n const handleStartDateChange = (val: string) => {\n if (isDateUnselectable(val)) {\n // date is invalid, remain on this input\n isUnselectable.current = true;\n return;\n }\n\n actions.changeStart(val);\n if (val) calendarRef.current?.setCalendarDate(val);\n isUnselectable.current = false;\n\n if (!val) {\n // if both start and end were cleared, confirm the selection\n // and remain on this input\n if (!withButton && !selectedEnd && isEndDirty) {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n /\n - if next input is empty, focus it\n - else if date range is invalid, clear and focus the next input\n - else if date range is valid\n - if next input is still pristine, focus it\n - else if !withButton, confirm the selection and \"blur\" the field\n /\n\n if (!selectedEnd) {\n actions.focus(\"end\");\n return;\n }\n\n const isInvalidRange = dayjs(val).isAfter(selectedEnd, \"day\");\n\n if (isInvalidRange) {\n actions.reselectEnd();\n return;\n }\n\n if (!isEndDirty) {\n actions.focus(\"end\");\n return;\n }\n\n if (!withButton) {\n actions.done({ start: val, end: selectedEnd });\n onChange?.(val, selectedEnd);\n return;\n }\n };\n\n const handleEndDateChange = (val: string) => {\n if (isDateUnselectable(val)) {\n // date is invalid, remain on this input\n isUnselectable.current = true;\n return;\n }\n\n const isBeforeStartDate = dayjs(val).isBefore(selectedStart, \"day\");\n\n // if date range is invalid, set selected value as start and reselect end\n if (isBeforeStartDate) {\n actions.changeStart(val);\n calendarRef.current?.setCalendarDate(val);\n actions.reselectEnd();\n return;\n }\n\n actions.changeEnd(val);\n if (val) calendarRef.current?.setCalendarDate(val);\n\n if (!val) {\n // if both start and end were cleared, confirm the selection\n // and remain on this input\n if (!withButton && !selectedStart && isStartDirty) {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n /\n - if next input is empty, focus it\n - else if !withButton, confirm the selection and \"blur\" the field\n /\n\n if (!selectedStart) {\n actions.focus(\"start\");\n return;\n }\n\n if (!withButton) {\n endInputRef.current?.focusYearRef();\n\n actions.done({ start: selectedStart, end: val });\n onChange?.(selectedStart, val);\n return;\n }\n };\n\n const handleWeekSelectionChange = (val: string) => {\n const start = dayjs(val).startOf(\"week\").format(\"YYYY-MM-DD\");\n const end = dayjs(val).endOf(\"week\").format(\"YYYY-MM-DD\");\n\n actions.changeStart(start);\n actions.changeEnd(end);\n isUnselectable.current = false;\n\n if (!withButton) {\n endInputRef.current?.focusYearRef();\n\n actions.done({ start, end });\n onChange?.(start, end);\n return;\n }\n };\n\n const handleFixedRangeSelectionChange = (val: string) => {\n if (isDateUnselectable(val)) {\n isUnselectable.current = true;\n return;\n }\n\n actions.changeStart(val);\n calendarRef.current?.setCalendarDate(val);\n isUnselectable.current = false;\n\n if (!val) {\n if (withButton) {\n actions.changeEnd(\"\");\n } else {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n const start = dayjs(val).format(\"YYYY-MM-DD\");\n const end = dayjs(start)\n .add(numberOfDays - 1, \"day\")\n .format(\"YYYY-MM-DD\");\n actions.changeStart(start);\n actions.changeEnd(end);\n isUnselectable.current = false;\n\n if (!withButton) {\n actions.done({ start, end });\n startInputRef.current?.focusYearRef();\n\n onChange?.(start, end);\n return;\n }\n };\n\n const handleFocus = () => {\n if (isWeekSelection \|\| isFixedRangeSelection) {\n setIsEndDisabled(true);\n }\n\n if (isWeekSelection) {\n setIsStartDisabled(true);\n }\n\n if (readOnly \|\| disabled \|\| focused) return;\n\n actions.focus(\"start\");\n onFocus?.();\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n actions.blur();\n\n setIsEndDisabled(false);\n setIsStartDisabled(false);\n\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n\n performOnBlurHandler();\n }\n };\n\n const handleInputFocus =\n (focusType: FocusType) => (event: React.FocusEvent) => {\n event.stopPropagation();\n\n if (readOnly) return;\n\n actions.focus(focusType);\n\n handleWeekSelectionInputFocus();\n handleFixedRangeSelectionInputFocus();\n\n if (!focused) {\n onFocus?.();\n }\n };\n\n const handleWeekSelectionInputFocus = () => {\n if (isWeekSelection) {\n const firstDayOfWeek = DateHelper.toDayjs(selectedStart)\n .startOf(\"week\")\n .format(\"YYYY-MM-DD\");\n\n setIsStartDisabled(true);\n setIsEndDisabled(true);\n setInitialCalendarDate(firstDayOfWeek);\n }\n };\n\n const handleFixedRangeSelectionInputFocus = () => {\n if (isFixedRangeSelection) {\n setIsEndDisabled(true);\n setInitialCalendarDate(selectedStart);\n }\n };\n\n const handleStartInputBlur = (validFormat: boolean) => {\n if (!validFormat \|\| isUnselectable.current) {\n actions.resetStart();\n startInputRef.current?.resetInput();\n }\n };\n\n const handleEndInputBlur = (validFormat: boolean) => {\n if (!validFormat \|\| isUnselectable.current) {\n actions.resetEnd();\n endInputRef.current?.resetInput();\n }\n };\n\n const handleCalendarSelect = (val: string) => {\n switch (variant) {\n case \"week\":\n handleWeekSelectionChange(val);\n break;\n case \"fixed-range\":\n handleFixedRangeSelectionChange(val);\n break;\n default:\n if (currentFocus === \"start\") {\n handleStartDateChange(val);\n } else if (currentFocus === \"end\") {\n handleEndDateChange(val);\n }\n break;\n }\n };\n\n const handleCalendarDismiss = (action: CalendarAction) => {\n nodeRef.current?.focus();\n\n switch (action) {\n case \"reset\":\n actions.cancel();\n break;\n case \"confirmed\":\n actions.done({ start: selectedStart, end: selectedEnd });\n onChange?.(selectedStart, selectedEnd);\n\n if (isWeekSelection) break;\n\n if (isValidRange(selectedStart, selectedEnd)) {\n if (variant === \"range\") {\n endInputRef.current?.focusYearRef();\n } else {\n startInputRef.current?.focusYearRef();\n }\n }\n break;\n }\n };\n\n const handleCalendarHover = (val: string) => {\n setHoverValue(val);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n const isDateUnselectable = (val: string) => {\n return (\n !allowDisabledSelection &&\n val &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n );\n };\n\n const isValidRange = (startDate: string, endDate: string) => {\n if (!startDate \|\| !endDate) return false;\n return dayjs(startDate).isBefore(endDate, \"day\");\n };\n\n const getHoverValue = (getValue: Exclude<FocusType, \"none\">) => {\n let values: { start: string \| undefined; end: string \| undefined } = {\n start: undefined,\n end: undefined,\n };\n\n switch (variant) {\n case \"range\":\n values = {\n start: currentFocus === \"start\" ? hoverValue : undefined,\n end: currentFocus === \"end\" ? hoverValue : undefined,\n };\n break;\n case \"week\":\n if (!hoverValue) return;\n\n values = {\n start: dayjs(hoverValue)\n .startOf(\"week\")\n .format(\"YYYY-MM-DD\"),\n end: dayjs(hoverValue).endOf(\"week\").format(\"YYYY-MM-DD\"),\n };\n break;\n case \"fixed-range\":\n if (!hoverValue) return;\n\n values = {\n start: dayjs(hoverValue).format(\"YYYY-MM-DD\"),\n end: dayjs(hoverValue)\n .add(numberOfDays - 1, \"day\")\n .format(\"YYYY-MM-DD\"),\n };\n break;\n }\n return values[getValue];\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n ref={nodeRef}\n tabIndex={0}\n onFocus={handleFocus}\n onBlur={handleBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n onKeyDown={handleNodeKeyDown}\n {...otherProps}\n className={clsx(\n shouldWrap && !readOnly && styles.containerWrap,\n shouldWrap && readOnly && styles.containerWrapReadOnly,\n otherProps.className\n )}\n >\n <RangeInputInnerContainer\n currentActive={currentFocus}\n wrap={shouldWrap}\n error={error}\n >\n <div\n className={clsx(\n styles.inputContainer,\n shouldWrap && styles.inputContainerWrap\n )}\n >\n <StandaloneDateInput\n ref={startInputRef}\n placeholder=\"From\"\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n inputLabels={[\n \"Start Date\",\n \"Start Month\",\n \"Start Year\",\n ]}\n value={selectedStart}\n disabled={disabled}\n readOnly={isStartDisabled \|\| readOnly}\n focused={currentFocus === \"start\"}\n hoverValue={getHoverValue(\"start\")}\n onChange={\n isFixedRangeSelection\n ? handleFixedRangeSelectionChange\n : handleStartDateChange\n }\n onFocus={handleInputFocus(\"start\")}\n onBlur={handleStartInputBlur}\n hideInputKeyboard={hideInputKeyboard}\n />\n </div>\n <div\n className={clsx(\n styles.inputContainer,\n shouldWrap && styles.inputContainerWrap\n )}\n >\n <StandaloneDateInput\n ref={endInputRef}\n placeholder=\"To\"\n names={[\"end-day\", \"end-month\", \"end-year\"]}\n inputLabels={[\"End Date\", \"End Month\", \"End Year\"]}\n value={selectedEnd}\n disabled={disabled}\n readOnly={isEndDisabled \|\| readOnly}\n focused={currentFocus === \"end\"}\n hoverValue={getHoverValue(\"end\")}\n onChange={handleEndDateChange}\n onFocus={handleInputFocus(\"end\")}\n onBlur={handleEndInputBlur}\n hideInputKeyboard={hideInputKeyboard}\n />\n </div>\n </RangeInputInnerContainer>\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n ref={calendarRef}\n variant={variant}\n initialCalendarDate={initialCalendarDate}\n withButton={withButton}\n value={selectedStart}\n endValue={selectedEnd}\n selectWithinRange={isStartDirty \|\| isEndDirty}\n currentFocus={currentFocus}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onSelect={handleCalendarSelect}\n onDismiss={handleCalendarDismiss}\n onHover={handleCalendarHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n numberOfDays={numberOfDays}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n customZIndex={zIndex}\n offset={16}\n rootNode={rootNode}\n />\n );\n};\n"],"names":["INITIAL_STATE","initialStart","initialEnd","selectedStart","selectedEnd","currentFocus","calendarOpen","isStartDirty","isEndDirty","focused","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","valueEnd","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","variant","numberOfDays","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","rootNode","otherProps","__rest","initialCalendarDate","setInitialCalendarDate","useState","hoverValue","setHoverValue","undefined","isWeekSelection","isFixedRangeSelection","isStartDisabled","setIsStartDisabled","isEndDisabled","setIsEndDisabled","actions","useStateActions","name","initialState","reducers","blur","state","dismiss","Object","assign","changeStart","val","changeEnd","reselectStart","reselectEnd","focus","cancel","done","payload","start","end","resetStart","resetEnd","resetRange","isUnselectable","useRef","nodeRef","calendarRef","startInputRef","endInputRef","shouldWrap","useContainerQuery","maxWidth","styles.MOBILE_WRAP_WIDTH","targetRef","useEffect","DateInputHelper","sanitizeInput","handleNodeKeyDown","event","code","current","_b","resetPlaceholder","_c","handleStartDateChange","isDateUnselectable","setCalendarDate","dayjs","isAfter","handleEndDateChange","isBefore","focusYearRef","handleFixedRangeSelectionChange","format","add","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_d","performOnBlurHandler","handleInputFocus","focusType","stopPropagation","handleWeekSelectionInputFocus","handleFixedRangeSelectionInputFocus","firstDayOfWeek","DateHelper","toDayjs","startOf","handleStartInputBlur","validFormat","resetInput","handleEndInputBlur","handleCalendarSelect","endOf","handleWeekSelectionChange","handleCalendarDismiss","action","isValidRange","handleCalendarHover","isDateDisabled","startDate","endDate","getHoverValue","getValue","values","_jsx","ElementWithDropdown","enabled","isOpen","onClose","onDismiss","renderElement","InputWrapper","role","ref","tabIndex","onKeyDown","className","clsx","styles.containerWrap","styles.containerWrapReadOnly","_jsxs","RangeInputInnerContainer","currentActive","wrap","children","styles.inputContainer","styles.inputContainerWrap","StandaloneDateInput","placeholder","names","inputLabels","renderDropdown","elementWidth","CalendarDropdown","endValue","selectWithinRange","onSelect","onHover","width","isFocusable","customZIndex","offset"],"mappings":"w/BAiCA,MAAMA,EAAqC,CACvCC,aAAc,GACdC,WAAY,GACZC,cAAe,GACfC,YAAa,GACbC,aAAc,OACdC,cAAc,EACdC,cAAc,EACdC,YAAY,EACZC,SAAS,0BAGkBC,QAAAC,QAC3BA,EAAOC,QACPA,EAAOC,SACPA,EAAQC,cACRA,EAAaC,MACbA,EAAKC,kBACLA,EAAiBC,MACjBA,EAAKC,SACLA,EAAQC,SACRA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,yBACNA,EAAwBC,WACxBA,GAAa,EAAIC,QACjBA,EAAU,QAAOC,aACjBA,EAAe,EAACC,SAChBA,EAAQC,GACRA,EAAEC,uBACFA,EAAsBC,OACtBA,EACAC,iBAAkBC,KACfC,EAAUC,EAAAA,OAAAvB,EArBc,CAAA,UAAA,UAAA,WAAA,gBAAA,QAAA,oBAAA,QAAA,WAAA,WAAA,UAAA,SAAA,2BAAA,aAAA,UAAA,eAAA,WAAA,KAAA,yBAAA,SAAA,qBA0B3B,MAAOwB,EAAqBC,GAA0BC,cAC/CC,EAAYC,GAAiBF,EAAAA,cAA6BG,GAC3DC,EAA8B,SAAZhB,EAClBiB,EAAoC,gBAAZjB,GAEvBkB,EAAiBC,GAAsBP,EAAAA,UAAkB,IACzDQ,EAAeC,GAAoBT,EAAAA,UAAkB,KAGxDjC,cACIA,EAAaC,YACbA,EAAWC,aACXA,EAAYC,aACZA,EAAYC,aACZA,EAAYC,WACZA,EAAUC,QACVA,IAEJqC,IACAC,EAAAA,gBAAgB,CAChBC,KAAM,mBACNC,aAAcjD,EACdkD,SAAU,CACNC,KAAOC,kCACAA,GAAK,CACRjD,cAAeiD,EAAMnD,aACrBG,YAAagD,EAAMlD,WACnBG,aAAc,OACdC,cAAc,EACdC,cAAc,EACdC,YAAY,EACZC,SAAS,IAEb4C,QAAUD,GAAUE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACbH,GAAK,CACRjD,cAAeiD,EAAMnD,aACrBG,YAAagD,EAAMlD,WACnBG,aAAc,OACdC,cAAc,EACdC,cAAc,EACdC,YAAY,IAEhBgD,YAAa,CAACJ,EAAOK,IAAgBH,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAC9BH,GAAK,CACRjD,cAAesD,EACflD,cAAc,IAElBmD,UAAW,CAACN,EAAOK,IAAgBH,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAC5BH,GAAK,CACRhD,YAAaqD,EACbjD,YAAY,IAEhBmD,cAAgBP,GAAUE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACnBH,GAAK,CACRjD,cAAe,GACfE,aAAc,UAElBuD,YAAcR,GAAUE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACjBH,GAAK,CACRhD,YAAa,GACbC,aAAc,QAElBwD,MAAO,CAACT,EAAO/C,IAA4BiD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACpCH,GAAK,CACR/C,aAAcmC,EACR,OACAC,EACA,QACApC,EACNC,cAAeoB,EACfjB,SAAS,IAEbqD,OAASV,GAAUE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACZH,GAAK,CACRjD,cAAeiD,EAAMnD,aACrBG,YAAagD,EAAMlD,WACnBG,aAAc,OACdC,cAAc,IAElByD,KAAM,CAACX,EAAOY,IAA4CV,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACnDH,GAAK,CACRjD,cAAe6D,EAAQC,MACvB7D,YAAa4D,EAAQE,IACrBjE,aAAc+D,EAAQC,MACtB/D,WAAY8D,EAAQE,IACpB7D,aAAc,OACdC,cAAc,EACdC,cAAc,EACdC,YAAY,IAEhB2D,WAAaf,GAAUE,OAAAC,OAAAD,OAAAC,OAAA,GAChBH,GAAK,CACRjD,cAAeiD,EAAMnD,eAEzBmE,SAAWhB,GAAUE,OAAAC,OAAAD,OAAAC,OAAA,GACdH,GAAK,CACRhD,YAAagD,EAAMlD,aAEvBmE,WAAY,CAACjB,EAAOY,IAA4CV,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACzDH,GAAK,CACRnD,aAAc+D,EAAQC,MACtB9D,cAAe6D,EAAQC,MACvB/D,WAAY8D,EAAQE,IACpB9D,YAAa4D,EAAQE,SAM3BI,GAAiBC,EAAAA,QAAgB,GACjCC,GAAUD,EAAAA,OAAuB,MACjCE,GAAcF,EAAAA,OAA4B,MAC1CG,GAAgBH,EAAAA,OAA+B,MAC/CI,GAAcJ,EAAAA,OAA+B,MAC7CK,GAAaC,EAAAA,kBAAkB,CACjCC,SAAUC,EAAAA,kBACVC,UAAWR,KAMfS,EAAAA,WAAU,KACNnC,GAAQuB,WAAW,CACfJ,MAAOiB,EAAAA,gBAAgBC,cAAclE,GACrCiD,IAAKgB,EAAAA,gBAAgBC,cAAcjE,IACrC,GACH,CAACD,EAAOC,IAEX+D,EAAAA,WAAU,KACe,UAAjB5E,EACA8B,EAAuBhC,GACC,QAAjBE,GAA0BD,GACjC+B,EAAuB/B,EAC3B,GACD,CAACC,IAKJ,MAAM+E,GAAqBC,cACJ,UAAfA,EAAMC,MAAqB/D,IACvBpB,GAAiBC,GACjB0C,GAAQiB,KAAK,CACTE,MAAO9D,EACP+D,IAAK9D,IAETe,SAAAA,EAAWhB,EAAeC,KAE1B0C,GAAQO,UACO,QAAf3C,EAAA8D,GAAQe,eAAO,IAAA7E,GAAAA,EAAEmD,QACI,QAArB2B,EAAAd,GAAca,eAAO,IAAAC,GAAAA,EAAEC,mBACJ,QAAnBC,EAAAf,GAAYY,eAAO,IAAAG,GAAAA,EAAED,oBAE7B,EAsBEE,GAAyBlC,UAC3B,GAAImC,GAAmBnC,GAGnB,YADAa,GAAeiB,SAAU,GAQ7B,GAJAzC,GAAQU,YAAYC,GAChBA,IAAwB,QAAnB/C,EAAA+D,GAAYc,eAAO,IAAA7E,GAAAA,EAAEmF,gBAAgBpC,IAC9Ca,GAAeiB,SAAU,GAEpB9B,EAOD,YAJKlC,GAAenB,IAAeI,IAC/BsC,GAAQuB,WAAW,CAAEJ,MAAO,GAAIC,IAAK,KACrC/C,SAAAA,EAAW,GAAI,MAavB,IAAKf,EAED,YADA0C,GAAQe,MAAM,OAMlB,GAFuBiC,EAAAA,QAAMrC,GAAKsC,QAAQ3F,EAAa,OAGnD0C,GAAQc,kBADZ,CAKA,GAAKpD,EAKL,OAAKe,OAAL,GACIuB,GAAQiB,KAAK,CAAEE,MAAOR,EAAKS,IAAK9D,SAChCe,SAAAA,EAAWsC,EAAKrD,KANhB0C,GAAQe,MAAM,MAHlB,CAWA,EAGEmC,GAAuBvC,cACzB,GAAImC,GAAmBnC,GAGnB,YADAa,GAAeiB,SAAU,GAO7B,GAH0BO,EAAAA,QAAMrC,GAAKwC,SAAS9F,EAAe,OAOzD,OAHA2C,GAAQU,YAAYC,GACD,QAAnB/C,EAAA+D,GAAYc,eAAO,IAAA7E,GAAAA,EAAEmF,gBAAgBpC,QACrCX,GAAQc,cAOZ,GAHAd,GAAQY,UAAUD,GACdA,IAAwB,QAAnB+B,EAAAf,GAAYc,eAAO,IAAAC,GAAAA,EAAEK,gBAAgBpC,IAEzCA,EAAL,CAeA,GAAKtD,EAKL,OAAKoB,OAAL,GACuB,QAAnBmE,EAAAf,GAAYY,eAAO,IAAAG,GAAAA,EAAEQ,eAErBpD,GAAQiB,KAAK,CAAEE,MAAO9D,EAAe+D,IAAKT,SAC1CtC,SAAAA,EAAWhB,EAAesD,KAR1BX,GAAQe,MAAM,QARlB,MALStC,GAAepB,IAAiBI,IACjCuC,GAAQuB,WAAW,CAAEJ,MAAO,GAAIC,IAAK,KACrC/C,SAAAA,EAAW,GAAI,IAqBvB,EAoBEgF,GAAmC1C,YACrC,GAAImC,GAAmBnC,GAEnB,YADAa,GAAeiB,SAAU,GAQ7B,GAJAzC,GAAQU,YAAYC,GACD,QAAnB/C,EAAA+D,GAAYc,eAAO,IAAA7E,GAAAA,EAAEmF,gBAAgBpC,GACrCa,GAAeiB,SAAU,GAEpB9B,EAOD,YANIlC,EACAuB,GAAQY,UAAU,KAElBZ,GAAQuB,WAAW,CAAEJ,MAAO,GAAIC,IAAK,KACrC/C,SAAAA,EAAW,GAAI,MAKvB,MAAM8C,EAAQ6B,EAAAA,QAAMrC,GAAK2C,OAAO,cAC1BlC,EAAM4B,EAAAA,QAAM7B,GACboC,IAAI5E,EAAe,EAAG,OACtB2E,OAAO,cAKZ,OAJAtD,GAAQU,YAAYS,GACpBnB,GAAQY,UAAUQ,GAClBI,GAAeiB,SAAU,EAEpBhE,OAAL,GACIuB,GAAQiB,KAAK,CAAEE,QAAOC,QACD,QAArBsB,EAAAd,GAAca,eAAO,IAAAC,GAAAA,EAAEU,oBAEvB/E,SAAAA,EAAW8C,EAAOC,IAEtB,EAGEoC,GAAc,MACZ9D,GAAmBC,IACnBI,GAAiB,GAGjBL,GACAG,GAAmB,GAGnBjB,GAAYb,GAAYJ,KAE5BqC,GAAQe,MAAM,SACdzC,SAAAA,IAAW,EAGTmF,GAAcC,gBAChB,MAAMC,EAASD,EAAEE,cAEXC,EACFlC,GAAYc,SAAWd,GAAYc,QAAQqB,SAASH,GAClDI,EACFrC,GAAQe,SAAWf,GAAQe,QAAQqB,SAASH,GAC1CK,GACa,QAAfpG,EAAA+F,aAAM,EAANA,EAAQM,eAAO,IAAArG,OAAA,EAAAA,EAAAsG,KAAAP,EAAG,mCACH,QAAfjB,EAAAiB,aAAM,EAANA,EAAQM,eAAO,IAAAvB,OAAA,EAAAA,EAAAwB,KAAAP,EAAG,oCAIlBhG,KAAYH,IAAiBuG,IAAiBC,GAI9CxG,IACCuG,IACAF,IACAG,KAGDhE,GAAQK,OAERN,GAAiB,GACjBF,GAAmB,GAEE,QAArB+C,EAAAhB,GAAca,eAAO,IAAAG,GAAAA,EAAED,mBACJ,QAAnBwB,EAAAtC,GAAYY,eAAO,IAAA0B,GAAAA,EAAExB,mBAErByB,KACJ,EAGEC,GACDC,GAA0B/B,IACvBA,EAAMgC,kBAEF3F,IAEJoB,GAAQe,MAAMuD,GAEdE,KACAC,KAEK9G,IACDW,SAAAA,IACJ,EAGFkG,GAAgC,KAClC,GAAI9E,EAAiB,CACjB,MAAMgF,EAAiBC,aAAWC,QAAQvH,GACrCwH,QAAQ,QACRvB,OAAO,cAEZzD,GAAmB,GACnBE,GAAiB,GACjBV,EAAuBqF,EAC3B,GAGED,GAAsC,KACpC9E,IACAI,GAAiB,GACjBV,EAAuBhC,GAC3B,EAGEyH,GAAwBC,UACrBA,IAAevD,GAAeiB,UAC/BzC,GAAQqB,aACa,QAArBzD,EAAAgE,GAAca,eAAO,IAAA7E,GAAAA,EAAEoH,aAC3B,EAGEC,GAAsBF,UACnBA,IAAevD,GAAeiB,UAC/BzC,GAAQsB,WACW,QAAnB1D,EAAAiE,GAAYY,eAAO,IAAA7E,GAAAA,EAAEoH,aACzB,EAGEE,GAAwBvE,IAC1B,OAAQjC,GACJ,IAAK,OA3JqB,CAACiC,UAC/B,MAAMQ,EAAQ6B,EAAAA,QAAMrC,GAAKkE,QAAQ,QAAQvB,OAAO,cAC1ClC,EAAM4B,EAAAA,QAAMrC,GAAKwE,MAAM,QAAQ7B,OAAO,cAM5C,GAJAtD,GAAQU,YAAYS,GACpBnB,GAAQY,UAAUQ,GAClBI,GAAeiB,SAAU,GAEpBhE,EACkB,QAAnBb,EAAAiE,GAAYY,eAAO,IAAA7E,GAAAA,EAAEwF,eAErBpD,GAAQiB,KAAK,CAAEE,QAAOC,QACtB/C,SAAAA,EAAW8C,EAAOC,EAEtB,EA8IQgE,CAA0BzE,GAC1B,MACJ,IAAK,cACD0C,GAAgC1C,GAChC,MACJ,QACyB,UAAjBpD,EACAsF,GAAsBlC,GACE,QAAjBpD,GACP2F,GAAoBvC,KAM9B0E,GAAyBC,cAG3B,OAFe,QAAf1H,EAAA8D,GAAQe,eAAO,IAAA7E,GAAAA,EAAEmD,QAETuE,GACJ,IAAK,QACDtF,GAAQgB,SACR,MACJ,IAAK,YAID,GAHAhB,GAAQiB,KAAK,CAAEE,MAAO9D,EAAe+D,IAAK9D,IAC1Ce,SAAAA,EAAWhB,EAAeC,GAEtBoC,EAAiB,MAEjB6F,GAAalI,EAAeC,KACZ,UAAZoB,EACmB,QAAnBgE,EAAAb,GAAYY,eAAO,IAAAC,GAAAA,EAAEU,eAEA,QAArBR,EAAAhB,GAAca,eAAO,IAAAG,GAAAA,EAAEQ,kBAOrCoC,GAAuB7E,IACzBnB,EAAcmB,EAAI,EAMhByD,GAAuB,KACrB7F,GACAA,GACJ,EAGEuE,GAAsBnC,IAEnB7B,GACD6B,GACAyB,EAAAA,gBAAgBqD,eAAe9E,EAAK,CAChC3C,gBACAH,UACAC,YAKNyH,GAAe,CAACG,EAAmBC,OAChCD,IAAcC,IACZ3C,EAAAA,QAAM0C,GAAWvC,SAASwC,EAAS,OAGxCC,GAAiBC,IACnB,IAAIC,EAAiE,CACjE3E,WAAO1B,EACP2B,SAAK3B,GAGT,OAAQf,GACJ,IAAK,QACDoH,EAAS,CACL3E,MAAwB,UAAjB5D,EAA2BgC,OAAaE,EAC/C2B,IAAsB,QAAjB7D,EAAyBgC,OAAaE,GAE/C,MACJ,IAAK,OACD,IAAKF,EAAY,OAEjBuG,EAAS,CACL3E,MAAO6B,EAAAA,QAAMzD,GACRsF,QAAQ,QACRvB,OAAO,cACZlC,IAAK4B,EAAAA,QAAMzD,GAAY4F,MAAM,QAAQ7B,OAAO,eAEhD,MACJ,IAAK,cACD,IAAK/D,EAAY,OAEjBuG,EAAS,CACL3E,MAAO6B,EAAAA,QAAMzD,GAAY+D,OAAO,cAChClC,IAAK4B,EAAAA,QAAMzD,GACNgE,IAAI5E,EAAe,EAAG,OACtB2E,OAAO,eAIxB,OAAOwC,EAAOD,EAAS,EAqH3B,OACIE,MAACC,EAAAA,oBAAmB,CAChBC,SAAUrH,IAAab,EACvBmI,OAAQ1I,EACR2I,QArfY,aAChBnG,GAAQK,OAERR,GAAmB,GACnBE,GAAiB,GACI,QAArBnC,EAAAgE,GAAca,eAAO,IAAA7E,GAAAA,EAAE+E,mBACJ,QAAnBD,EAAAb,GAAYY,eAAO,IAAAC,GAAAA,EAAEC,mBAErByB,IAAsB,EA8elBgC,UA3ec,eAClBpG,GAAQO,UAEO,QAAf3C,EAAA8D,GAAQe,eAAO,IAAA7E,GAAAA,EAAEmD,QACI,QAArB2B,EAAAd,GAAca,eAAO,IAAAC,GAAAA,EAAEC,mBACJ,QAAnBC,EAAAf,GAAYY,eAAO,IAAAG,GAAAA,EAAED,kBAAkB,EAuenC0D,cArHY,IAEZN,EAAAA,IAACO,EAAAA,aAAY9F,OAAAC,OAAA,CACT8F,KAAK,QACLC,IAAK9E,GACL+E,SAAU,EACVnI,QAASkF,GACTjF,OAAQkF,GACR9F,QAASA,GACTI,SAAUA,EACVa,SAAUA,EACVX,MAAOA,EACPY,GAAIA,EAAE,cACOK,EAAW,eAAc,gBACvBnB,EACf2I,UAAWpE,IACPpD,GACJyH,UAAWC,EAAAA,QACP9E,KAAelD,GAAYiI,EAAAA,cAC3B/E,IAAclD,GAAYkI,wBAC1B5H,EAAWyH,oBAGfI,EAAAA,KAACC,EAAAA,yBAAwB,CACrBC,cAAe1J,EACf2J,KAAMpF,GACN7D,MAAOA,EAAKkJ,SAAA,CAEZpB,EAAAA,IAAA,MAAA,CACIY,UAAWC,EAAAA,QACPQ,EAAAA,eACAtF,IAAcuF,EAAAA,oBACjBF,SAEDpB,EAAAA,IAACuB,EAAAA,oBAAmB,CAChBd,IAAK5E,GACL2F,YAAY,OACZC,MAAO,CAAC,YAAa,cAAe,cACpCC,YAAa,CACT,aACA,cACA,cAEJtJ,MAAOd,EACPU,SAAUA,EACVa,SAAUgB,GAAmBhB,EAC7BjB,QAA0B,UAAjBJ,EACTgC,WAAYqG,GAAc,SAC1BvH,SACIsB,EACM0D,GACAR,GAEVvE,QAAS+F,GAAiB,SAC1B9F,OAAQuG,GACR5G,kBAAmBA,MAG3B6H,EAAAA,IAAA,MAAA,CACIY,UAAWC,EAAAA,QACPQ,EAAAA,eACAtF,IAAcuF,EAAAA,oBACjBF,SAEDpB,EAAAA,IAACuB,EAAAA,oBAAmB,CAChBd,IAAK3E,GACL0F,YAAY,KACZC,MAAO,CAAC,UAAW,YAAa,YAChCC,YAAa,CAAC,WAAY,YAAa,YACvCtJ,MAAOb,EACPS,SAAUA,EACVa,SAAUkB,GAAiBlB,EAC3BjB,QAA0B,QAAjBJ,EACTgC,WAAYqG,GAAc,OAC1BvH,SAAU6E,GACV5E,QAAS+F,GAAiB,OAC1B9F,OAAQ0G,GACR/G,kBAAmBA,YAyCnCwJ,eAjCe,EAAGC,kBAElB5B,EAAAA,IAAC6B,oBACGpB,IAAK7E,GACLjD,QAASA,EACTU,oBAAqBA,EACrBX,WAAYA,EACZN,MAAOd,EACPwK,SAAUvK,EACVwK,kBAAmBrK,GAAgBC,EACnCH,aAAcA,EACdS,cAAeA,EACfH,QAASA,EACTC,QAASA,EACTgB,uBAAwBA,EACxBiJ,SAAU7C,GACVkB,UAAWf,GACX2C,QAASxC,GACThH,yBAA0BA,EAC1BG,aAAcA,EACdsJ,MAAON,EACPO,aAActJ,IAAab,IAa/BoK,aAAcpJ,EACdqJ,OAAQ,GACRnJ,SAAUA,GACZ"}
1	+ {"version":3,"file":"date-range-input.js","sources":["../../../src/date-range-input/date-range-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n FocusType,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateHelper, DateInputHelper, useContainerQuery } from \"../util\";\nimport { useStateActions } from \"../util/use-state-actions\";\nimport * as styles from \"./date-range-input.styles\";\nimport type { DateRangeInputProps } from \"./types\";\n\ninterface DateRangeInputState {\n initialStart: string;\n initialEnd: string;\n selectedStart: string;\n selectedEnd: string;\n currentFocus: FocusType;\n calendarOpen: boolean;\n isStartDirty: boolean;\n isEndDirty: boolean;\n focused: boolean;\n}\n\nconst INITIAL_STATE: DateRangeInputState = {\n initialStart: \"\",\n initialEnd: \"\",\n selectedStart: \"\",\n selectedEnd: \"\",\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n focused: false,\n};\n\n/*\n A paired date input with an attached calendar dropdown that lets users\n * select a contiguous date range.\n /\nexport const DateRangeInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n valueEnd,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n variant = \"range\",\n numberOfDays = 7,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode: rootNode,\n ...otherProps\n}: DateRangeInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialCalendarDate, setInitialCalendarDate] = useState<string>();\n const [hoverValue, setHoverValue] = useState<string \| undefined>(undefined);\n const isWeekSelection = variant === \"week\";\n const isFixedRangeSelection = variant === \"fixed-range\";\n\n const [isStartDisabled, setIsStartDisabled] = useState<boolean>(false);\n const [isEndDisabled, setIsEndDisabled] = useState<boolean>(false);\n\n const [\n {\n selectedStart,\n selectedEnd,\n currentFocus,\n calendarOpen,\n isStartDirty,\n isEndDirty,\n focused,\n },\n actions,\n ] = useStateActions({\n name: \"date-range-input\",\n initialState: INITIAL_STATE,\n reducers: {\n blur: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n focused: false,\n }),\n dismiss: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n }),\n changeStart: (state, val: string) => ({\n ...state,\n selectedStart: val,\n isStartDirty: true,\n }),\n changeEnd: (state, val: string) => ({\n ...state,\n selectedEnd: val,\n isEndDirty: true,\n }),\n reselectStart: (state) => ({\n ...state,\n selectedStart: \"\",\n currentFocus: \"start\",\n }),\n reselectEnd: (state) => ({\n ...state,\n selectedEnd: \"\",\n currentFocus: \"end\",\n }),\n focus: (state, currentFocus: FocusType) => ({\n ...state,\n currentFocus: isWeekSelection\n ? \"none\"\n : isFixedRangeSelection\n ? \"start\"\n : currentFocus,\n calendarOpen: !readOnly,\n focused: true,\n }),\n cancel: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n }),\n done: (state, payload: { start: string; end: string }) => ({\n ...state,\n selectedStart: payload.start,\n selectedEnd: payload.end,\n initialStart: payload.start,\n initialEnd: payload.end,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n }),\n resetStart: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n }),\n resetEnd: (state) => ({\n ...state,\n selectedEnd: state.initialEnd,\n }),\n resetRange: (state, payload: { start: string; end: string }) => ({\n ...state,\n initialStart: payload.start,\n selectedStart: payload.start,\n initialEnd: payload.end,\n selectedEnd: payload.end,\n }),\n },\n });\n\n // tracks if current value in focused input is allowed for selection\n const isUnselectable = useRef<boolean>(false);\n const nodeRef = useRef<HTMLDivElement>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n const startInputRef = useRef<StandaloneDateInputRef>(null);\n const endInputRef = useRef<StandaloneDateInputRef>(null);\n const shouldWrap = useContainerQuery({\n maxWidth: styles.MOBILE_WRAP_WIDTH,\n targetRef: nodeRef,\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n actions.resetRange({\n start: DateInputHelper.sanitizeInput(value),\n end: DateInputHelper.sanitizeInput(valueEnd),\n });\n }, [value, valueEnd]);\n\n useEffect(() => {\n if (currentFocus === \"start\") {\n setInitialCalendarDate(selectedStart);\n } else if (currentFocus === \"end\" && selectedEnd) {\n setInitialCalendarDate(selectedEnd);\n }\n }, [currentFocus]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleNodeKeyDown = (event: React.KeyboardEvent) => {\n if (event.code === \"Enter\" && !withButton) {\n if (selectedStart && selectedEnd) {\n actions.done({\n start: selectedStart,\n end: selectedEnd,\n });\n onChange?.(selectedStart, selectedEnd);\n } else {\n actions.dismiss();\n nodeRef.current?.focus();\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n }\n }\n };\n\n const handleClose = () => {\n actions.blur();\n\n setIsStartDisabled(false);\n setIsEndDisabled(false);\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n\n performOnBlurHandler();\n };\n\n const handleDismiss = () => {\n actions.dismiss();\n\n nodeRef.current?.focus();\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n };\n\n const handleStartDateChange = (val: string) => {\n if (isDateUnselectable(val)) {\n // date is invalid, remain on this input\n isUnselectable.current = true;\n return;\n }\n\n actions.changeStart(val);\n if (val) calendarRef.current?.setCalendarDate(val);\n isUnselectable.current = false;\n\n if (!val) {\n // if both start and end were cleared, confirm the selection\n // and remain on this input\n if (!withButton && !selectedEnd && isEndDirty) {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n /\n - if next input is empty, focus it\n - else if date range is invalid, clear and focus the next input\n - else if date range is valid\n - if next input is still pristine, focus it\n - else if !withButton, confirm the selection and \"blur\" the field\n /\n\n if (!selectedEnd) {\n actions.focus(\"end\");\n return;\n }\n\n const isInvalidRange = dayjs(val).isAfter(selectedEnd, \"day\");\n\n if (isInvalidRange) {\n actions.reselectEnd();\n return;\n }\n\n if (!isEndDirty) {\n actions.focus(\"end\");\n return;\n }\n\n if (!withButton) {\n actions.done({ start: val, end: selectedEnd });\n onChange?.(val, selectedEnd);\n return;\n }\n };\n\n const handleEndDateChange = (val: string) => {\n if (isDateUnselectable(val)) {\n // date is invalid, remain on this input\n isUnselectable.current = true;\n return;\n }\n\n const isBeforeStartDate = dayjs(val).isBefore(selectedStart, \"day\");\n\n // if date range is invalid, set selected value as start and reselect end\n if (isBeforeStartDate) {\n actions.changeStart(val);\n calendarRef.current?.setCalendarDate(val);\n actions.reselectEnd();\n return;\n }\n\n actions.changeEnd(val);\n if (val) calendarRef.current?.setCalendarDate(val);\n\n if (!val) {\n // if both start and end were cleared, confirm the selection\n // and remain on this input\n if (!withButton && !selectedStart && isStartDirty) {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n /\n - if next input is empty, focus it\n - else if !withButton, confirm the selection and \"blur\" the field\n */\n\n if (!selectedStart) {\n actions.focus(\"start\");\n return;\n }\n\n if (!withButton) {\n endInputRef.current?.focusYearRef();\n\n actions.done({ start: selectedStart, end: val });\n onChange?.(selectedStart, val);\n return;\n }\n };\n\n const handleWeekSelectionChange = (val: string) => {\n const start = dayjs(val).startOf(\"week\").format(\"YYYY-MM-DD\");\n const end = dayjs(val).endOf(\"week\").format(\"YYYY-MM-DD\");\n\n actions.changeStart(start);\n actions.changeEnd(end);\n isUnselectable.current = false;\n\n if (!withButton) {\n endInputRef.current?.focusYearRef();\n\n actions.done({ start, end });\n onChange?.(start, end);\n return;\n }\n };\n\n const handleFixedRangeSelectionChange = (val: string) => {\n if (isDateUnselectable(val)) {\n isUnselectable.current = true;\n return;\n }\n\n actions.changeStart(val);\n calendarRef.current?.setCalendarDate(val);\n isUnselectable.current = false;\n\n if (!val) {\n if (withButton) {\n actions.changeEnd(\"\");\n } else {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n const start = dayjs(val).format(\"YYYY-MM-DD\");\n const end = dayjs(start)\n .add(numberOfDays - 1, \"day\")\n .format(\"YYYY-MM-DD\");\n actions.changeStart(start);\n actions.changeEnd(end);\n isUnselectable.current = false;\n\n if (!withButton) {\n actions.done({ start, end });\n startInputRef.current?.focusYearRef();\n\n onChange?.(start, end);\n return;\n }\n };\n\n const handleFocus = () => {\n if (isWeekSelection \|\| isFixedRangeSelection) {\n setIsEndDisabled(true);\n }\n\n if (isWeekSelection) {\n setIsStartDisabled(true);\n }\n\n if (readOnly \|\| disabled \|\| focused) return;\n\n actions.focus(\"start\");\n onFocus?.();\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n actions.blur();\n\n setIsEndDisabled(false);\n setIsStartDisabled(false);\n\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n\n performOnBlurHandler();\n }\n };\n\n const handleInputFocus =\n (focusType: FocusType) => (event: React.FocusEvent) => {\n event.stopPropagation();\n\n if (readOnly) return;\n\n actions.focus(focusType);\n\n handleWeekSelectionInputFocus();\n handleFixedRangeSelectionInputFocus();\n\n if (!focused) {\n onFocus?.();\n }\n };\n\n const handleWeekSelectionInputFocus = () => {\n if (isWeekSelection) {\n const firstDayOfWeek = DateHelper.toDayjs(selectedStart)\n .startOf(\"week\")\n .format(\"YYYY-MM-DD\");\n\n setIsStartDisabled(true);\n setIsEndDisabled(true);\n setInitialCalendarDate(firstDayOfWeek);\n }\n };\n\n const handleFixedRangeSelectionInputFocus = () => {\n if (isFixedRangeSelection) {\n setIsEndDisabled(true);\n setInitialCalendarDate(selectedStart);\n }\n };\n\n const handleStartInputBlur = (validFormat: boolean) => {\n if (!validFormat \|\| isUnselectable.current) {\n actions.resetStart();\n startInputRef.current?.resetInput();\n }\n };\n\n const handleEndInputBlur = (validFormat: boolean) => {\n if (!validFormat \|\| isUnselectable.current) {\n actions.resetEnd();\n endInputRef.current?.resetInput();\n }\n };\n\n const handleCalendarSelect = (val: string) => {\n switch (variant) {\n case \"week\":\n handleWeekSelectionChange(val);\n break;\n case \"fixed-range\":\n handleFixedRangeSelectionChange(val);\n break;\n default:\n if (currentFocus === \"start\") {\n handleStartDateChange(val);\n } else if (currentFocus === \"end\") {\n handleEndDateChange(val);\n }\n break;\n }\n };\n\n const handleCalendarDismiss = (action: CalendarAction) => {\n nodeRef.current?.focus();\n\n switch (action) {\n case \"reset\":\n actions.cancel();\n break;\n case \"confirmed\":\n actions.done({ start: selectedStart, end: selectedEnd });\n onChange?.(selectedStart, selectedEnd);\n\n if (isWeekSelection) break;\n\n if (isValidRange(selectedStart, selectedEnd)) {\n if (variant === \"range\") {\n endInputRef.current?.focusYearRef();\n } else {\n startInputRef.current?.focusYearRef();\n }\n }\n break;\n }\n };\n\n const handleCalendarHover = (val: string) => {\n setHoverValue(val);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n const isDateUnselectable = (val: string) => {\n return (\n !allowDisabledSelection &&\n val &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n );\n };\n\n const isValidRange = (startDate: string, endDate: string) => {\n if (!startDate \|\| !endDate) return false;\n return dayjs(startDate).isBefore(endDate, \"day\");\n };\n\n const getHoverValue = (getValue: Exclude<FocusType, \"none\">) => {\n let values: { start: string \| undefined; end: string \| undefined } = {\n start: undefined,\n end: undefined,\n };\n\n switch (variant) {\n case \"range\":\n values = {\n start: currentFocus === \"start\" ? hoverValue : undefined,\n end: currentFocus === \"end\" ? hoverValue : undefined,\n };\n break;\n case \"week\":\n if (!hoverValue) return;\n\n values = {\n start: dayjs(hoverValue)\n .startOf(\"week\")\n .format(\"YYYY-MM-DD\"),\n end: dayjs(hoverValue).endOf(\"week\").format(\"YYYY-MM-DD\"),\n };\n break;\n case \"fixed-range\":\n if (!hoverValue) return;\n\n values = {\n start: dayjs(hoverValue).format(\"YYYY-MM-DD\"),\n end: dayjs(hoverValue)\n .add(numberOfDays - 1, \"day\")\n .format(\"YYYY-MM-DD\"),\n };\n break;\n }\n return values[getValue];\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n ref={nodeRef}\n tabIndex={0}\n onFocus={handleFocus}\n onBlur={handleBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n onKeyDown={handleNodeKeyDown}\n {...otherProps}\n className={clsx(\n shouldWrap && !readOnly && styles.containerWrap,\n shouldWrap && readOnly && styles.containerWrapReadOnly,\n otherProps.className\n )}\n >\n <RangeInputInnerContainer\n currentActive={currentFocus}\n wrap={shouldWrap}\n error={error}\n >\n <div\n className={clsx(\n styles.inputContainer,\n shouldWrap && styles.inputContainerWrap\n )}\n >\n <StandaloneDateInput\n ref={startInputRef}\n placeholder=\"From\"\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n inputLabels={[\n \"Start Date\",\n \"Start Month\",\n \"Start Year\",\n ]}\n value={selectedStart}\n disabled={disabled}\n readOnly={isStartDisabled \|\| readOnly}\n focused={currentFocus === \"start\"}\n hoverValue={getHoverValue(\"start\")}\n onChange={\n isFixedRangeSelection\n ? handleFixedRangeSelectionChange\n : handleStartDateChange\n }\n onFocus={handleInputFocus(\"start\")}\n onBlur={handleStartInputBlur}\n hideInputKeyboard={hideInputKeyboard}\n />\n </div>\n <div\n className={clsx(\n styles.inputContainer,\n shouldWrap && styles.inputContainerWrap\n )}\n >\n <StandaloneDateInput\n ref={endInputRef}\n placeholder=\"To\"\n names={[\"end-day\", \"end-month\", \"end-year\"]}\n inputLabels={[\"End Date\", \"End Month\", \"End Year\"]}\n value={selectedEnd}\n disabled={disabled}\n readOnly={isEndDisabled \|\| readOnly}\n focused={currentFocus === \"end\"}\n hoverValue={getHoverValue(\"end\")}\n onChange={handleEndDateChange}\n onFocus={handleInputFocus(\"end\")}\n onBlur={handleEndInputBlur}\n hideInputKeyboard={hideInputKeyboard}\n />\n </div>\n </RangeInputInnerContainer>\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n ref={calendarRef}\n variant={variant}\n initialCalendarDate={initialCalendarDate}\n withButton={withButton}\n value={selectedStart}\n endValue={selectedEnd}\n selectWithinRange={isStartDirty \|\| isEndDirty}\n currentFocus={currentFocus}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onSelect={handleCalendarSelect}\n onDismiss={handleCalendarDismiss}\n onHover={handleCalendarHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n numberOfDays={numberOfDays}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n customZIndex={zIndex}\n offset={16}\n rootNode={rootNode}\n />\n );\n};\n"],"names":["INITIAL_STATE","initialStart","initialEnd","selectedStart","selectedEnd","currentFocus","calendarOpen","isStartDirty","isEndDirty","focused","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","valueEnd","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","variant","numberOfDays","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","rootNode","otherProps","__rest","initialCalendarDate","setInitialCalendarDate","useState","hoverValue","setHoverValue","undefined","isWeekSelection","isFixedRangeSelection","isStartDisabled","setIsStartDisabled","isEndDisabled","setIsEndDisabled","actions","useStateActions","name","initialState","reducers","blur","state","dismiss","Object","assign","changeStart","val","changeEnd","reselectStart","reselectEnd","focus","cancel","done","payload","start","end","resetStart","resetEnd","resetRange","isUnselectable","useRef","nodeRef","calendarRef","startInputRef","endInputRef","shouldWrap","useContainerQuery","maxWidth","styles.MOBILE_WRAP_WIDTH","targetRef","useEffect","DateInputHelper","sanitizeInput","handleNodeKeyDown","event","code","current","_b","resetPlaceholder","_c","handleStartDateChange","isDateUnselectable","setCalendarDate","dayjs","isAfter","handleEndDateChange","isBefore","focusYearRef","handleFixedRangeSelectionChange","format","add","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_d","performOnBlurHandler","handleInputFocus","focusType","stopPropagation","handleWeekSelectionInputFocus","handleFixedRangeSelectionInputFocus","firstDayOfWeek","DateHelper","toDayjs","startOf","handleStartInputBlur","validFormat","resetInput","handleEndInputBlur","handleCalendarSelect","endOf","handleWeekSelectionChange","handleCalendarDismiss","action","isValidRange","handleCalendarHover","isDateDisabled","startDate","endDate","getHoverValue","getValue","values","_jsx","ElementWithDropdown","enabled","isOpen","onClose","onDismiss","renderElement","InputWrapper","role","ref","tabIndex","onKeyDown","className","clsx","styles.containerWrap","styles.containerWrapReadOnly","_jsxs","RangeInputInnerContainer","currentActive","wrap","children","styles.inputContainer","styles.inputContainerWrap","StandaloneDateInput","placeholder","names","inputLabels","renderDropdown","elementWidth","CalendarDropdown","endValue","selectWithinRange","onSelect","onHover","width","isFocusable","customZIndex","offset"],"mappings":"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"}

package/cjs/date-range-input/date-range-input.styles_1s7ojnj.css CHANGED Viewed

@@ -1,4 +1,4 @@
-.c13x59xx{padding:var(--fds-spacing-12) var(--fds-spacing-16);}
+@layer fds{.c13x59xx{padding:var(--fds-spacing-12) var(--fds-spacing-16);}
 .cuva3df{padding:var(--fds-spacing-12) 0;}
 .i1b11tt2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:calc(3rem - 2px);width:100%;}
-.iy4f6wr{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}
+.iy4f6wr{height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}}

package/cjs/divider/divider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"divider.js","sources":["../../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle, useResolvedTokenValue } from \"../theme\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n solid: styles.solidLine,\n dashed: styles.dashedLine,\n};\n\nexport const Divider = ({\n thickness = 1,\n lineStyle = \"solid\",\n layoutType = \"flex\",\n color,\n className,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n ...otherProps\n}: DividerProps) => {\n const ref = useRef<HTMLHRElement>(null);\n\n const effectiveColor = useResolvedTokenValue({\n value: color,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const encodedColor = encodeURIComponent(effectiveColor);\n const strokeWidth = thickness + 1; // best fit\n\n useApplyStyle(ref, {\n [styles.tokens.thickness]: `${thickness}px`,\n [styles.tokens.color]: color,\n [styles.tokens.backgroundImage]: `\n url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n });\n\n const getColumnProps = () => {\n const xxsColsProp = xxsCols \|\| [1, -1];\n const xsColsProp = xsCols \|\| xxsColsProp;\n const smColsProp = smCols \|\| xsColsProp;\n const mdColsProp = mdCols \|\| smColsProp;\n const lgColsProp = lgCols \|\| mdColsProp;\n const xlColsProp = xlCols \|\| lgColsProp;\n const xxlColsProp = xxlCols \|\| xlColsProp;\n\n return {\n xxlCols: xxlColsProp,\n xlCols: xlColsProp,\n lgCols: lgColsProp,\n mdCols: mdColsProp,\n smCols: smColsProp,\n xsCols: xsColsProp,\n xxsCols: xxsColsProp,\n };\n };\n\n const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n switch (layoutType) {\n case \"flex\":\n return (\n <hr\n ref={ref}\n className={clsx(lineClass, className)}\n {...otherProps}\n />\n );\n case \"grid\":\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </ColDiv>\n );\n }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"~~isBASA~~,MAAMA,EAAqD,CACvDC,MAAOC,EAAAA,UACPC,OAAQC,EAAAA,~~4BAGYC~~,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAA,OAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAAA,OAAsB,MAE5BC,EAAiBC,EAAAA,sBAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAAA,OAAe,OACzBC,QAASC,EAAAA,cACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAAA,cAAcd,EAAK,CACf,CAACe,EAAAA,OAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAAA,OAAc1B,OAAQA,EACvB,CAAC0B,EAAAA,OAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAAA,QAAKC,EAAAA,SAAiBvC,EAAaO,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAAA,QAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAAAA,IAACG,EAAAA,OAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAAA,IAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}
1	+ {"version":3,"file":"divider.js","sources":["../../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport { useResolvedTokenValue } from \"../theme/utils\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n solid: styles.solidLine,\n dashed: styles.dashedLine,\n};\n\n/*\n A horizontal line that visually separates sections of content.\n \n Use `Divider` to draw a clear boundary between distinct groups of content on\n * a page or within a layout.\n */\nexport const Divider = ({\n thickness = 1,\n lineStyle = \"solid\",\n layoutType = \"flex\",\n color,\n className,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n ...otherProps\n}: DividerProps) => {\n const ref = useRef<HTMLHRElement>(null);\n\n const effectiveColor = useResolvedTokenValue({\n value: color,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const encodedColor = encodeURIComponent(effectiveColor);\n const strokeWidth = thickness + 1; // best fit\n\n useApplyStyle(ref, {\n [styles.tokens.thickness]: `${thickness}px`,\n [styles.tokens.color]: color,\n [styles.tokens.backgroundImage]: `\n url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n });\n\n const getColumnProps = () => {\n const xxsColsProp = xxsCols \|\| [1, -1];\n const xsColsProp = xsCols \|\| xxsColsProp;\n const smColsProp = smCols \|\| xsColsProp;\n const mdColsProp = mdCols \|\| smColsProp;\n const lgColsProp = lgCols \|\| mdColsProp;\n const xlColsProp = xlCols \|\| lgColsProp;\n const xxlColsProp = xxlCols \|\| xlColsProp;\n\n return {\n xxlCols: xxlColsProp,\n xlCols: xlColsProp,\n lgCols: lgColsProp,\n mdCols: mdColsProp,\n smCols: smColsProp,\n xsCols: xsColsProp,\n xxsCols: xxsColsProp,\n };\n };\n\n const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n switch (layoutType) {\n case \"flex\":\n return (\n <hr\n ref={ref}\n className={clsx(lineClass, className)}\n {...otherProps}\n />\n );\n case \"grid\":\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </ColDiv>\n );\n }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"isBAUA,MAAMA,EAAqD,CACvDC,MAAOC,EAAAA,UACPC,OAAQC,EAAAA,4BASYC,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAA,OAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAAA,OAAsB,MAE5BC,EAAiBC,EAAAA,sBAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAAA,OAAe,OACzBC,QAASC,EAAAA,cACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAAA,cAAcd,EAAK,CACf,CAACe,EAAAA,OAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAAA,OAAc1B,OAAQA,EACvB,CAAC0B,EAAAA,OAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAAA,QAAKC,EAAAA,SAAiBvC,EAAaO,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAAA,QAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAAAA,IAACG,EAAAA,OAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAAA,IAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}

package/cjs/divider/divider.styles_1xpzh8p.css CHANGED Viewed

@@ -1,3 +1,3 @@
-.l1oo3ku9{width:100%;margin:0;border:none;--fds-internal-divider-line-thickness:initial;height:var(--fds-internal-divider-line-thickness, 1px);}
+@layer fds{.l1oo3ku9{width:100%;margin:0;border:none;--fds-internal-divider-line-thickness:initial;height:var(--fds-internal-divider-line-thickness, 1px);}
 .s7a32sz{--fds-internal-divider-line-color:initial;background-color:var(--fds-internal-divider-line-color, var(--fds-colour-border));}
-.d1etlddg{background-color:transparent;background-repeat:repeat-x;background-image:var(--fds-internal-divider-line-backgroundImage);}
+.d1etlddg{background-color:transparent;background-repeat:repeat-x;background-image:var(--fds-internal-divider-line-backgroundImage);}}

package/cjs/drawer/drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.js","sources":["../../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n useDismiss,\n useFloating,\n useInteractions,\n useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Overlay } from \"../overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./drawer.styles\";\nimport type { DrawerProps } from \"./types\";\n\nexport const Drawer = ({\n children,\n heading,\n show,\n onClose,\n onOverlayClick,\n className,\n ...otherProps\n}: DrawerProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showOverlay, setShowOverlay] = useState(show);\n const id = useId();\n const initialFocusRef = useRef<HTMLHeadingElement>(null);\n\n // =========================================================================\n // FLOATING UI CONFIG\n // =========================================================================\n const { context, refs } = useFloating({\n open: show,\n onOpenChange: (open) => {\n if (!open && onClose) {\n onClose();\n }\n },\n });\n\n const dismiss = useDismiss(context, {\n escapeKey: true,\n outsidePress: false, // defer to Overlay click\n });\n\n const { getFloatingProps } = useInteractions([dismiss]);\n\n const { isMounted, status } = useTransitionStatus(context, {\n duration: 800,\n });\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (!show) {\n const timer = setTimeout(() => setShowOverlay(false), 800);\n return () => clearTimeout(timer);\n } else {\n setShowOverlay(true);\n }\n }, [show]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDialogVisibility = (e: React.TransitionEvent) => {\n if (e.propertyName === \"visibility\" && show) {\n // focus the first element so that the screenreader enters the dialog\n initialFocusRef.current?.focus();\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n return (\n <Overlay\n show={showOverlay}\n enableOverlayClick\n onOverlayClick={onOverlayClick}\n >\n {isMounted ? (\n <FloatingFocusManager\n context={context}\n initialFocus={-1}\n returnFocus={true}\n >\n <div\n ref={refs.setFloating}\n data-status={status}\n data-testid=\"drawer\"\n aria-modal\n role=\"dialog\"\n aria-labelledby={id}\n onTransitionEnd={handleDialogVisibility}\n className={clsx(styles.container, className)}\n {...getFloatingProps()}\n {...otherProps}\n >\n <div className={styles.header}>\n <Typography.HeadingMD\n as=\"h2\"\n className={styles.heading}\n id={id}\n ref={initialFocusRef}\n tabIndex={-1}\n weight=\"bold\"\n >\n {heading}\n </Typography.HeadingMD>\n </div>\n <div className={styles.content}>{children}</div>\n <ClickableIcon\n aria-label=\"Close drawer\"\n onClick={onClose}\n focusHighlight={false}\n className={styles.closeButton}\n >\n <CrossIcon aria-hidden />\n </ClickableIcon>\n </div>\n </FloatingFocusManager>\n ) : undefined}\n </Overlay>\n );\n};\n"],"names":["_a","children","heading","show","onClose","onOverlayClick","className","otherProps","__rest","showOverlay","setShowOverlay","useState","id","useId","initialFocusRef","useRef","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","ref","setFloating","role","onTransitionEnd","e","propertyName","current","focus","clsx","styles.container","styles.header","Typography","HeadingMD","as","styles.heading","tabIndex","weight","styles.content","ClickableIcon","onClick","focusHighlight","styles.closeButton","CrossIcon","undefined"],"mappings":"~~8oBAkBuBA~~,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,UACdA,GAASN,EACNO,EAAUC,EAAAA,OAAAR,EAPM,sEAYnB,MAAOS,EAAaC,GAAkBC,EAAAA,SAASR,GACzCS,EAAKC,EAAAA,QACLC,EAAkBC,EAAAA,OAA2B,OAK7CC,QAAEA,EAAOC,KAAEA,GAASC,cAAY,CAClCC,KAAMhB,EACNiB,aAAeD,KACNA,GAAQf,GACTA,GACJ,IAIFiB,EAAUC,EAAAA,WAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,kBAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBb,EAAS,CACvDc,SAAU,MAMdC,EAAAA,WAAU,KACN,IAAK5B,EAAM,CACP,MAAM6B,EAAQC,YAAW,IAAMvB,GAAe,IAAQ,KACtD,MAAO,IAAMwB,aAAaF,EAC9B,CACItB,GAAe,EACnB,GACD,CAACP,IAeJ,OACIgC,MAACC,EAAAA,QAAO,CACJjC,KAAMM,EACN4B,oBAAkB,EAClBhC,eAAgBA,EAAcJ,SAE7B0B,EACGQ,EAAAA,IAACG,uBAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAIvC,SAEjBwC,EAAAA,0BACIC,IAAKzB,EAAK0B,YAAW,cACRf,EAAM,cACP,yBAEZgB,KAAK,SAAQ,kBACIhC,EACjBiC,gBA7BYC,UACL,eAAnBA,EAAEC,cAAiC5C,IAEZ,QAAvBH,EAAAc,EAAgBkC,eAAO,IAAAhD,GAAAA,EAAEiD,QAC7B,EA0BgB3C,UAAW4C,EAAAA,QAAKC,EAAAA,UAAkB7C,IAC9BmB,IACAlB,EAAU,CAAAN,SAAA,CAEdkC,EAAAA,IAAA,MAAA,CAAK7B,UAAW8C,EAAAA,OAAanD,SACzBkC,MAACkB,EAAAA,WAAWC,UAAS,CACjBC,GAAG,KACHjD,UAAWkD,UACX5C,GAAIA,EACJ8B,IAAK5B,EACL2C,UAAU,EACVC,OAAO,gBAENxD,MAGTiC,EAAAA,WAAK7B,UAAWqD,EAAAA,QAAc1D,SAAGA,IACjCkC,EAAAA,IAACyB,EAAAA,cAAa,CAAA,aACC,eACXC,QAASzD,EACT0D,gBAAgB,EAChBxD,UAAWyD,cAAkB9D,SAE7BkC,EAAAA,IAAC6B,YAAS,CAAA,eAAA,iBAItBC,GACE"}
1	+ {"version":3,"file":"drawer.js","sources":["../../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n FloatingFocusManager,\n useDismiss,\n useFloating,\n useInteractions,\n useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Overlay } from \"../overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./drawer.styles\";\nimport type { DrawerProps } from \"./types\";\n\n/*\n A slide-in panel that overlays the page content.\n \n Use `Drawer` to surface supplementary content or navigation options without\n * navigating away from the current page. Focus is trapped inside the dialog\n * while it is open and returns to the triggering element on close.\n */\nexport const Drawer = ({\n children,\n heading,\n show,\n onClose,\n onOverlayClick,\n className,\n ...otherProps\n}: DrawerProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showOverlay, setShowOverlay] = useState(show);\n const id = useId();\n const initialFocusRef = useRef<HTMLHeadingElement>(null);\n\n // =========================================================================\n // FLOATING UI CONFIG\n // =========================================================================\n const { context, refs } = useFloating({\n open: show,\n onOpenChange: (open) => {\n if (!open && onClose) {\n onClose();\n }\n },\n });\n\n const dismiss = useDismiss(context, {\n escapeKey: true,\n outsidePress: false, // defer to Overlay click\n });\n\n const { getFloatingProps } = useInteractions([dismiss]);\n\n const { isMounted, status } = useTransitionStatus(context, {\n duration: 800,\n });\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (!show) {\n const timer = setTimeout(() => setShowOverlay(false), 800);\n return () => clearTimeout(timer);\n } else {\n setShowOverlay(true);\n }\n }, [show]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDialogVisibility = (e: React.TransitionEvent) => {\n if (e.propertyName === \"visibility\" && show) {\n // focus the first element so that the screenreader enters the dialog\n initialFocusRef.current?.focus();\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n return (\n <Overlay\n show={showOverlay}\n enableOverlayClick\n onOverlayClick={onOverlayClick}\n >\n {isMounted ? (\n <FloatingFocusManager\n context={context}\n initialFocus={-1}\n returnFocus={true}\n >\n <div\n ref={refs.setFloating}\n data-status={status}\n data-testid=\"drawer\"\n aria-modal\n role=\"dialog\"\n aria-labelledby={id}\n onTransitionEnd={handleDialogVisibility}\n className={clsx(styles.container, className)}\n {...getFloatingProps()}\n {...otherProps}\n >\n <div className={styles.header}>\n <Typography.HeadingMD\n as=\"h2\"\n className={styles.heading}\n id={id}\n ref={initialFocusRef}\n tabIndex={-1}\n weight=\"bold\"\n >\n {heading}\n </Typography.HeadingMD>\n </div>\n <div className={styles.content}>{children}</div>\n <ClickableIcon\n aria-label=\"Close drawer\"\n onClick={onClose}\n focusHighlight={false}\n className={styles.closeButton}\n >\n <CrossIcon aria-hidden />\n </ClickableIcon>\n </div>\n </FloatingFocusManager>\n ) : undefined}\n </Overlay>\n );\n};\n"],"names":["_a","children","heading","show","onClose","onOverlayClick","className","otherProps","__rest","showOverlay","setShowOverlay","useState","id","useId","initialFocusRef","useRef","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","ref","setFloating","role","onTransitionEnd","e","propertyName","current","focus","clsx","styles.container","styles.header","Typography","HeadingMD","as","styles.heading","tabIndex","weight","styles.content","ClickableIcon","onClick","focusHighlight","styles.closeButton","CrossIcon","undefined"],"mappings":"8oBAyBuBA,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,UACdA,GAASN,EACNO,EAAUC,EAAAA,OAAAR,EAPM,sEAYnB,MAAOS,EAAaC,GAAkBC,EAAAA,SAASR,GACzCS,EAAKC,EAAAA,QACLC,EAAkBC,EAAAA,OAA2B,OAK7CC,QAAEA,EAAOC,KAAEA,GAASC,cAAY,CAClCC,KAAMhB,EACNiB,aAAeD,KACNA,GAAQf,GACTA,GACJ,IAIFiB,EAAUC,EAAAA,WAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,kBAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBb,EAAS,CACvDc,SAAU,MAMdC,EAAAA,WAAU,KACN,IAAK5B,EAAM,CACP,MAAM6B,EAAQC,YAAW,IAAMvB,GAAe,IAAQ,KACtD,MAAO,IAAMwB,aAAaF,EAC9B,CACItB,GAAe,EACnB,GACD,CAACP,IAeJ,OACIgC,MAACC,EAAAA,QAAO,CACJjC,KAAMM,EACN4B,oBAAkB,EAClBhC,eAAgBA,EAAcJ,SAE7B0B,EACGQ,EAAAA,IAACG,uBAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAIvC,SAEjBwC,EAAAA,0BACIC,IAAKzB,EAAK0B,YAAW,cACRf,EAAM,cACP,yBAEZgB,KAAK,SAAQ,kBACIhC,EACjBiC,gBA7BYC,UACL,eAAnBA,EAAEC,cAAiC5C,IAEZ,QAAvBH,EAAAc,EAAgBkC,eAAO,IAAAhD,GAAAA,EAAEiD,QAC7B,EA0BgB3C,UAAW4C,EAAAA,QAAKC,EAAAA,UAAkB7C,IAC9BmB,IACAlB,EAAU,CAAAN,SAAA,CAEdkC,EAAAA,IAAA,MAAA,CAAK7B,UAAW8C,EAAAA,OAAanD,SACzBkC,MAACkB,EAAAA,WAAWC,UAAS,CACjBC,GAAG,KACHjD,UAAWkD,UACX5C,GAAIA,EACJ8B,IAAK5B,EACL2C,UAAU,EACVC,OAAO,gBAENxD,MAGTiC,EAAAA,WAAK7B,UAAWqD,EAAAA,QAAc1D,SAAGA,IACjCkC,EAAAA,IAACyB,EAAAA,cAAa,CAAA,aACC,eACXC,QAASzD,EACT0D,gBAAgB,EAChBxD,UAAWyD,cAAkB9D,SAE7BkC,EAAAA,IAAC6B,YAAS,CAAA,eAAA,iBAItBC,GACE"}

package/cjs/drawer/drawer.styles_94hx3y.css CHANGED Viewed

@@ -1,5 +1,5 @@
-.c1agands{position:fixed;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;width:40%;overflow:hidden;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-subtle);border-top-left-radius:var(--fds-radius-md);border-bottom-left-radius:var(--fds-radius-md);transition-property:right,visibility;}.c1agands[data-status="initial"]{right:-100%;visibility:hidden;}.c1agands[data-status="open"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-entrance);right:0;visibility:visible;}.c1agands[data-status="close"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-exit);right:-100%;visibility:hidden;}:where(body.fds-breakpoint-xl-max) .c1agands{width:50%;min-width:700px;}:where(body.fds-breakpoint-lg-max) .c1agands{width:100%;min-width:unset;border-top-left-radius:0;border-bottom-left-radius:0;}
+@layer fds{.c1agands{position:fixed;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;width:40%;overflow:hidden;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-subtle);border-top-left-radius:var(--fds-radius-md);border-bottom-left-radius:var(--fds-radius-md);transition-property:right,visibility;}.c1agands[data-status="initial"]{right:-100%;visibility:hidden;}.c1agands[data-status="open"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-entrance);right:0;visibility:visible;}.c1agands[data-status="close"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-exit);right:-100%;visibility:hidden;}:where(body.fds-breakpoint-xl-max) .c1agands{width:50%;min-width:700px;}:where(body.fds-breakpoint-lg-max) .c1agands{width:100%;min-width:unset;border-top-left-radius:0;border-bottom-left-radius:0;}
 .h1kc1wos{top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-16);padding:var(--fds-spacing-32) var(--fds-spacing-16) var(--fds-spacing-16) calc(var(--fds-font-heading-lh-md) + var(--fds-spacing-32));background-color:var(--fds-colour-bg);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}:where(body.fds-breakpoint-lg-max) .h1kc1wos{gap:var(--fds-spacing-8);padding:var(--fds-spacing-32) var(--fds-spacing-20) var(--fds-spacing-16) calc(var(--fds-font-heading-lh-md) + var(--fds-spacing-24));}
 .c1njxz6r{color:var(--fds-colour-icon);padding:0;position:absolute;top:var(--fds-spacing-32);left:var(--fds-spacing-16);}.c1njxz6r:active,.c1njxz6r:focus{color:var(--fds-colour-icon-hover);}.c1njxz6r svg{height:var(--fds-font-heading-lh-md);width:var(--fds-font-heading-lh-md);}
 .hcrz6mg{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
-.c2k10hw{-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;}
+.c2k10hw{-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;}}

package/cjs/e-signature/e-signature-canvas.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("fabric"),n=require("react"),i=require("styled-components"),u=require("../v3_theme/index.js"),c=require("./e-signature.styles.js");const a=n.forwardRef(((a,s)=>{const{baseImageDataURL:o}=a,l=n.useRef(null),d=n.useRef(null),v=n.useRef(),f=n.useRef(),h=n.useContext(i.ThemeContext);n.useImperativeHandle(s,(()=>({clear:()=>{var e;return null===(e=v.current)||void 0===e?void 0:e.clear()},export:()=>w()})));const w=()=>{if(!v.current)return null;if(!v.current.getObjects().length)return null;return v.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},g=n.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(yield new Promise((e=>setTimeout(e))),l.current&&d.current&&v.current){const e=l.current.clientWidth,r=l.current.clientHeight;d.current.width=e,d.current.height=r,v.current.setDimensions({width:e,height:r}),v.current.forEachObject((e=>{v.current&&v.current.centerObject(e)}))}}))),[]);return n.useEffect((()=>{if(l.current&&d.current)return v.current=new t.Canvas("eSignatureCanvas"),v.current.selection=!1,v.current.isDrawingMode=!0,f.current=new t.PencilBrush(v.current),f.current.color=u.V3_Colour.text({theme:h}),f.current.width=3,v.current.freeDrawingBrush=f.current,()=>{var e;null===(e=v.current)||void 0===e||e.dispose()}}),[]),n.useEffect((()=>{var e;if(window)return window.addEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.addEventListener("change",g),g(),()=>{var e;window.removeEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.removeEventListener("change",g)}}),[g]),n.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){if(o){const e=yield t.FabricImage.fromURL(o);v.current&&(v.current.clear(),e.selectable=!1,e.hoverCursor="default",v.current.width&&e.width&&e.scale(v.current.width/e.width),v.current.add(e),v.current.centerObject(e))}}))}),[o]),r.jsx(c.SignatureCanvasContainer,{ref:l,children:r.jsx(c.SignatureCanvas,{id:"eSignatureCanvas",ref:d})})}));exports.ESignatureCanvas=a;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("fabric"),n=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var i=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"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var u=require("../theme/utils/use-design-token-override.js"),s=require("./e-signature.styles.js");const a=n.forwardRef(((a,c)=>{const{baseImageDataURL:o}=a,l=n.useRef(null),d=n.useRef(null),v=n.useRef(),h=n.useRef(),f=u.useDesignTokenOverride({token:i.Colour.text});n.useImperativeHandle(c,(()=>({clear:()=>{var e;return null===(e=v.current)||void 0===e?void 0:e.clear()},export:()=>m()})));const m=()=>{if(!v.current)return null;if(!v.current.getObjects().length)return null;return v.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},g=n.useCallback((()=>e.__awaiter(void 0,void 0,void 0,(function*(){if(yield new Promise((e=>setTimeout(e))),l.current&&d.current&&v.current){const e=l.current.clientWidth,r=l.current.clientHeight;d.current.width=e,d.current.height=r,v.current.setDimensions({width:e,height:r}),v.current.forEachObject((e=>{v.current&&v.current.centerObject(e)}))}}))),[]);return n.useEffect((()=>{if(l.current&&d.current)return v.current=new t.Canvas("eSignatureCanvas"),v.current.selection=!1,v.current.isDrawingMode=!0,h.current=new t.PencilBrush(v.current),h.current.color=f||"#000000",h.current.width=3,v.current.freeDrawingBrush=h.current,()=>{var e;null===(e=v.current)||void 0===e||e.dispose()}}),[]),n.useEffect((()=>{h.current&&f&&(h.current.color=f)}),[f]),n.useEffect((()=>{var e;if(window)return window.addEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.addEventListener("change",g),g(),()=>{var e;window.removeEventListener("resize",g),null===(e=screen.orientation)||void 0===e||e.removeEventListener("change",g)}}),[g]),n.useEffect((()=>{e.__awaiter(void 0,void 0,void 0,(function*(){if(o){const e=yield t.FabricImage.fromURL(o);v.current&&(v.current.clear(),e.selectable=!1,e.hoverCursor="default",v.current.width&&e.width&&e.scale(v.current.width/e.width),v.current.add(e),v.current.centerObject(e))}}))}),[o]),r.jsx("div",{className:s.signatureCanvasContainer,ref:l,children:r.jsx("canvas",{className:s.signatureCanvas,id:"eSignatureCanvas",ref:d})})}));exports.ESignatureCanvas=a;
 //# sourceMappingURL=e-signature-canvas.js.map

package/cjs/e-signature/e-signature-canvas.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"e-signature-canvas.js","sources":["../../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport type { Ref } from \"react\";\nimport {\n forwardRef,\n useCallback,\n ~~useContext,\n~~ useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\nimport { ~~ThemeContext~~ } from \"~~styled-components~~\";\n\nimport { ~~V3_Colour~~ } from \"../~~v3_theme~~\";\nimport ~~{\n SignatureCanvas,\n SignatureCanvasContainer,\n}~~ from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n baseImageDataURL?: string \| null \| undefined;\n forwardedRef?: Ref<ESignatureCanvasRef> \| undefined;\n}\n\nexport interface ESignatureCanvasRef {\n clear: VoidFunction;\n export: () => string \| null;\n}\n\nconst Component = (\n props: ESignatureCanvasProps,\n ref: Ref<ESignatureCanvasRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { baseImageDataURL } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const fabricCanvas = useRef<FabricCanvas>();\n const pencilBrush = useRef<PencilBrush>();\n const ~~theme~~ = ~~useContext~~(~~ThemeContext~~);\n\n // =============================================================================\n // HOOKS\n // =============================================================================\n useImperativeHandle(ref, () => ({\n clear: () => fabricCanvas.current?.clear(),\n export: () => exportAsImage(),\n }));\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const exportAsImage = () => {\n if (!fabricCanvas.current) return null;\n if (!fabricCanvas.current.getObjects().length) return null;\n const dataURL = fabricCanvas.current.toDataURL({\n multiplier: 1,\n format: \"png\",\n quality: 1,\n enableRetinaScaling: true,\n });\n return dataURL;\n };\n\n const handleResize = useCallback(async () => {\n // slight delay for fabricjs to update on orientation change\n await new Promise((resolve) => setTimeout(resolve));\n if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n const canvasWidth = containerRef.current.clientWidth;\n const canvasHeight = containerRef.current.clientHeight;\n canvasRef.current.width = canvasWidth;\n canvasRef.current.height = canvasHeight;\n fabricCanvas.current.setDimensions({\n width: canvasWidth,\n height: canvasHeight,\n });\n\n fabricCanvas.current.forEachObject((obj) => {\n if (fabricCanvas.current) {\n fabricCanvas.current.centerObject(obj);\n }\n });\n }\n }, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n // initialise fabric and brushes\n useEffect(() => {\n if (containerRef.current && canvasRef.current) {\n fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n fabricCanvas.current.selection = false;\n fabricCanvas.current.isDrawingMode = true;\n\n pencilBrush.current = new PencilBrush(fabricCanvas.current);\n pencilBrush.current.color = ~~V3_Colour[~~\"~~text~~\"~~]({ theme })~~;\n pencilBrush.current.width = 3;\n\n fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n return () => {\n fabricCanvas.current?.dispose();\n };\n }\n }, []);\n\n // resize\n useEffect(() => {\n if (window) {\n window.addEventListener(\"resize\", handleResize);\n screen.orientation?.addEventListener(\"change\", handleResize);\n handleResize();\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n screen.orientation?.removeEventListener(\"change\", handleResize);\n };\n }\n }, [handleResize]);\n\n // update base image\n useEffect(() => {\n const updateImage = async () => {\n if (baseImageDataURL) {\n const img = await FabricImage.fromURL(baseImageDataURL);\n if (fabricCanvas.current) {\n fabricCanvas.current.clear();\n img.selectable = false;\n img.hoverCursor = \"default\";\n\n if (fabricCanvas.current.width && img.width) {\n img.scale(fabricCanvas.current.width / img.width);\n }\n fabricCanvas.current.add(img);\n fabricCanvas.current.centerObject(img);\n }\n }\n };\n\n updateImage();\n }, [baseImageDataURL]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <~~SignatureCanvasContainer~~ ref={containerRef}>\n <~~SignatureCanvas~~ id=\"eSignatureCanvas\" ref={canvasRef} />\n </~~SignatureCanvasContainer~~>\n );\n};\n\nexport const ESignatureCanvas = forwardRef<\n ESignatureCanvasRef,\n ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","~~theme~~","~~useContext~~","~~ThemeContext~~","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","~~V3_Colour","~~freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","~~SignatureCanvasContainer~~","~~SignatureCanvas~~","id"],"mappings":"~~gOA4BA~~,~~MA6HaA~~,EAAmBC,EAAAA,~~YA7Hd~~,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAAA,OAAuB,MACtCC,EAAYD,EAAAA,OAA0B,MACtCE,EAAeF,EAAAA,SACfG,EAAcH,EAAAA,SACdI,~~EAAQC~~,EAAAA,~~WAAWC~~,~~gBAKzBC~~,EAAAA,~~oBAAoBV~~,GAAK,KAAA,~~CACrBW~~,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,~~EAAAP~~,~~EAAaQ~~,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,~~IAAKV~~,~~EAAaQ~~,QAAS,OAAO,KAClC,~~IAAKR~~,~~EAAaQ~~,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,~~OANgBZ~~,~~EAAaQ~~,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,EAAAA,aAAY,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,~~KACtCzB~~,~~EAAaW~~,~~SAAWT~~,~~EAAUS~~,~~SAAWR~~,~~EAAaQ~~,QAAS,CACnE,MAAMgB,~~EAAc3B~~,~~EAAaW~~,QAAQiB,YACnCC,~~EAAe7B~~,~~EAAaW~~,QAAQmB,~~aAC1C5B~~,~~EAAUS~~,QAAQoB,MAAQJ,~~EAC1BzB~~,~~EAAUS~~,QAAQqB,OAASH,~~EAC3B1B~~,~~EAAaQ~~,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,~~IAGZ1B~~,~~EAAaQ~~,QAAQuB,eAAeC,~~IAC5BhC~~,~~EAAaQ~~,~~SACbR~~,~~EAAaQ~~,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,~~IA8DH~~,~~OAxDAE~~,EAAAA,WAAU,KACN,~~GAAIrC~~,~~EAAaW~~,~~SAAWT~~,~~EAAUS~~,QAWlC,~~OAVAR~~,~~EAAaQ~~,QAAU,IAAI2B,EAAAA,OAAa,~~oBACxCnC~~,~~EAAaQ~~,QAAQ4B,WAAY,~~EACjCpC~~,~~EAAaQ~~,QAAQ6B,eAAgB,~~EAErCpC~~,~~EAAYO~~,QAAU,IAAI8B,~~cAAYtC~~,~~EAAaQ~~,~~SACnDP~~,~~EAAYO~~,QAAQ+B,~~MAAQC~~,~~EAAAA~~,~~UAAgB~~,~~KAAE~~,~~CAAEtC,UAChDD,EAAYO,~~QAAQoB,MAAQ,~~EAE5B5B~~,~~EAAaQ~~,~~QAAQiC~~,iBAAmBxC,~~EAAYO~~,QAE7C,WACiB,QAApBD,~~EAAAP~~,~~EAAaQ~~,eAAO,IAAAD,GAAAA,~~EAAEmC~~,SAAS,CAEvC,GACD,~~IAGHR~~,EAAAA,WAAU,WACN,~~GAAIS~~,OAIA,OAHAA,OAAOC,iBAAiB,~~SAAU1B~~,GAChB,QAAlBX,~~EAAAsC~~,OAAOC,mBAAW,~~IAAAvC~~,GAAAA,~~EAAEqC~~,iBAAiB,~~SAAU1B~~,GAC/CA,IACO,~~WACHyB~~,OAAOI,oBAAoB,~~SAAU7B~~,GACnB,QAAlBX,~~EAAAsC~~,OAAOC,mBAAW,~~IAAAvC~~,GAAAA,~~EAAEwC~~,oBAAoB,~~SAAU7B~~,EAAa,CAEvE,GACD,CAACA,IAGJgB,EAAAA,WAAU,KACyBd,EAAAA,eAAA,OAAA,OAAA,GAAA,YAC3B,~~GAAIxB~~,EAAkB,CAClB,MAAMoD,QAAYC,cAAYC,QAAQtD,GAClCI,~~EAAaQ~~,~~UACbR~~,~~EAAaQ~~,QAAQF,~~QACrB0C~~,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdpD,~~EAAaQ~~,QAAQoB,~~OAASoB~~,~~EAAIpB~~,~~OAClCoB~~,EAAIK,MAAMrD,~~EAAaQ~~,QAAQoB,~~MAAQoB~~,~~EAAIpB~~,OAE/~~C5B~~,~~EAAaQ~~,~~QAAQ8C~~,IAAIN,GACzBhD,~~EAAaQ~~,QAAQyB,~~aAAae~~,GAE1C,CACJ,GAEa,GACd,CAACpD,IAMA2D,EAAAA,~~IAACC~~,EAAAA,~~yBAAwB~~,~~CAAC7D,~~IAAKE,~~WAC3B0D~~,EAAAA,~~IAACE~~,EAAAA,~~iBAAgBC~~,GAAG,~~mBAAmB/D~~,IAAKI,~~KACrB~~"}
1	+ {"version":3,"file":"e-signature-canvas.js","sources":["../../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport type { Ref } from \"react\";\nimport {\n forwardRef,\n useCallback,\n useEffect,\n useImperativeHandle,\n useRef,\n} from \"react\";\n\nimport { Colour } from \"../theme\";\nimport { useDesignTokenOverride } from \"../theme/utils\";\nimport * as styles from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n baseImageDataURL?: string \| null \| undefined;\n forwardedRef?: Ref<ESignatureCanvasRef> \| undefined;\n}\n\nexport interface ESignatureCanvasRef {\n clear: VoidFunction;\n export: () => string \| null;\n}\n\nconst Component = (\n props: ESignatureCanvasProps,\n ref: Ref<ESignatureCanvasRef>\n) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const { baseImageDataURL } = props;\n const containerRef = useRef<HTMLDivElement>(null);\n const canvasRef = useRef<HTMLCanvasElement>(null);\n const fabricCanvas = useRef<FabricCanvas>();\n const pencilBrush = useRef<PencilBrush>();\n const resolvedColor = useDesignTokenOverride({ token: Colour[\"text\"] });\n\n // =============================================================================\n // HOOKS\n // =============================================================================\n useImperativeHandle(ref, () => ({\n clear: () => fabricCanvas.current?.clear(),\n export: () => exportAsImage(),\n }));\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const exportAsImage = () => {\n if (!fabricCanvas.current) return null;\n if (!fabricCanvas.current.getObjects().length) return null;\n const dataURL = fabricCanvas.current.toDataURL({\n multiplier: 1,\n format: \"png\",\n quality: 1,\n enableRetinaScaling: true,\n });\n return dataURL;\n };\n\n const handleResize = useCallback(async () => {\n // slight delay for fabricjs to update on orientation change\n await new Promise((resolve) => setTimeout(resolve));\n if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n const canvasWidth = containerRef.current.clientWidth;\n const canvasHeight = containerRef.current.clientHeight;\n canvasRef.current.width = canvasWidth;\n canvasRef.current.height = canvasHeight;\n fabricCanvas.current.setDimensions({\n width: canvasWidth,\n height: canvasHeight,\n });\n\n fabricCanvas.current.forEachObject((obj) => {\n if (fabricCanvas.current) {\n fabricCanvas.current.centerObject(obj);\n }\n });\n }\n }, []);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n // initialise fabric and brushes\n useEffect(() => {\n if (containerRef.current && canvasRef.current) {\n fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n fabricCanvas.current.selection = false;\n fabricCanvas.current.isDrawingMode = true;\n\n pencilBrush.current = new PencilBrush(fabricCanvas.current);\n pencilBrush.current.color = resolvedColor \|\| \"#000000\";\n pencilBrush.current.width = 3;\n\n fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n return () => {\n fabricCanvas.current?.dispose();\n };\n }\n }, []);\n\n useEffect(() => {\n if (pencilBrush.current && resolvedColor) {\n pencilBrush.current.color = resolvedColor;\n }\n }, [resolvedColor]);\n\n // resize\n useEffect(() => {\n if (window) {\n window.addEventListener(\"resize\", handleResize);\n screen.orientation?.addEventListener(\"change\", handleResize);\n handleResize();\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n screen.orientation?.removeEventListener(\"change\", handleResize);\n };\n }\n }, [handleResize]);\n\n // update base image\n useEffect(() => {\n const updateImage = async () => {\n if (baseImageDataURL) {\n const img = await FabricImage.fromURL(baseImageDataURL);\n if (fabricCanvas.current) {\n fabricCanvas.current.clear();\n img.selectable = false;\n img.hoverCursor = \"default\";\n\n if (fabricCanvas.current.width && img.width) {\n img.scale(fabricCanvas.current.width / img.width);\n }\n fabricCanvas.current.add(img);\n fabricCanvas.current.centerObject(img);\n }\n }\n };\n\n updateImage();\n }, [baseImageDataURL]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n return (\n <div className={styles.signatureCanvasContainer} ref={containerRef}>\n <canvas\n className={styles.signatureCanvas}\n id=\"eSignatureCanvas\"\n ref={canvasRef}\n />\n </div>\n );\n};\n\nexport const ESignatureCanvas = forwardRef<\n ESignatureCanvasRef,\n ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","resolvedColor","useDesignTokenOverride","token","Colour","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","className","styles.signatureCanvasContainer","children","styles.signatureCanvas","id"],"mappings":"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"}

package/cjs/e-signature/e-signature.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons"),s=require("react"),t=require("../shared/progress-bar/progress-bar.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var a=require("../theme/tokens/breakpoint.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"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("../theme/utils/use-media-query.js"),l=require("../typography/index.js"),u=require("./e-signature.styles.js");const o=s.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./e-signature-canvas.js")}))).ESignatureCanvas}})))),{AddSignatureButton:d,EditSignatureButton:c,ESignatureContainer:g,ESignatureDrawable:j,GrowContainer:h,Instructions:x,ModalActionButton:p,ModalBox:m,ModalButtons:y,ModalTitle:b,ProgressBox:v,ScrollableModal:q,SignatureArea:f,SignatureLine:S,SignaturePreviewImage:k}=u;exports.ESignature=u=>{const{description:B,id:C,loadingProgress:E,loadingLabel:M="Uploading...",onChange:T,value:_,disabled:A}=u,I=e.__rest(u,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[P,w]=s.useState(!1),L=s.useRef(null),[D,R]=s.useState(_),z=n.useMaxWidthMediaQuery("sm"),O=n.useResolvedBreakpointToken(a.Breakpoint["sm-max"],n.DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT),U=n.useMediaQuery({clauses:[{feature:"orientation",value:"landscape"},{feature:"max-height",value:O}]}),F=()=>{var e;null===(e=L.current)||void 0===e||e.clear()},Q=()=>{if(L.current){const e=L.current.export();R(e),w(!1),null==T||T(e)}};s.useEffect((()=>{R(_)}),[_]);return r.jsxs("div",Object.assign({},I,{children:[r.jsx(f,{$disabled:A,children:"number"==typeof E?r.jsxs(v,{children:[M&&r.jsx(l.Typography.BodyMD,{children:M}),r.jsx(t.ProgressBar,{progress:null!=E?E:0,"data-testid":`${C||"e-signature"}-progress-bar`})]}):D?r.jsxs(r.Fragment,{children:[r.jsx(k,{src:D,alt:"Signature preview"}),r.jsx(c,{styleType:"light",onClick:()=>w(!0),id:C,icon:r.jsx(i.PencilIcon,{}),"aria-label":"Edit signature",disabled:A})]}):r.jsx(d,{type:"button",styleType:"secondary","aria-label":"Add signature",id:C,onClick:()=>w(!0),disabled:A,children:"Add signature"})}),r.jsx(q,{"data-testid":"signature-modal",show:P,children:r.jsx(h,{children:r.jsxs(m,{onClose:()=>w(!1),children:[r.jsx(b,{children:"Signature"}),r.jsx(g,{children:r.jsxs(j,{children:[r.jsx(S,{}),r.jsx(s.Suspense,{fallback:null,children:P&&r.jsx(o,{ref:L,baseImageDataURL:D})})]})}),r.jsxs(y,{children:[r.jsx(p,{sizeType:U?"small":"default",type:"button",styleType:z&&!U?"light":"link",icon:r.jsx(i.EraserIcon,{}),onClick:F,children:"Clear"}),r.jsx(p,{sizeType:U?"small":"default",type:"button",onClick:Q,children:"Save"})]})]})})}),B?r.jsx(x,{children:B}):null]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),r=require("@lifesg/react-icons"),s=require("react"),i=require("../button/button.js"),t=require("../dashed-border/dashed-border.js"),l=require("../modal/index.js"),n=require("../shared/progress-bar/progress-bar.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js");var o=require("../theme/tokens/border.js"),d=require("../theme/tokens/breakpoint.js"),u=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var c=require("../theme/tokens/radius.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var m=require("../theme/utils/use-media-query.js"),g=require("../typography/index.js"),h=require("./e-signature.styles.js");const j=s.lazy((()=>e.__awaiter(void 0,void 0,void 0,(function*(){return{default:(yield Promise.resolve().then((function(){return require("./e-signature-canvas.js")}))).ESignatureCanvas}}))));exports.ESignature=p=>{const{description:b,id:x,loadingProgress:v,loadingLabel:y="Uploading...",onChange:q,value:B,disabled:k}=p,f=e.__rest(p,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[C,N]=s.useState(!1),S=s.useRef(null),[T,M]=s.useState(B),w=m.useMaxWidthMediaQuery("sm"),P=m.useResolvedBreakpointToken(d.Breakpoint["sm-max"]),_=m.useMediaQuery({clauses:[{feature:"orientation",value:"landscape"},{feature:"max-height",value:P}]}),A=()=>{var e;null===(e=S.current)||void 0===e||e.clear()},E=()=>{if(S.current){const e=S.current.export();M(e),N(!1),null==q||q(e)}};s.useEffect((()=>{M(B)}),[B]);return a.jsxs("div",Object.assign({},f,{children:[a.jsx(t.DashedBorder,{className:h.signatureArea,thickness:o.Border["width-040"],radius:c.Radius.sm,colour:k?u.Colour["border-disabled"]:u.Colour.border,backgroundColor:k?u.Colour["bg-disabled"]:u.Colour.bg,children:"number"==typeof v?a.jsxs("div",{className:h.progressBox,children:[y&&a.jsx(g.Typography.BodyMD,{children:y}),a.jsx(n.ProgressBar,{progress:null!=v?v:0,"data-testid":`${x||"e-signature"}-progress-bar`})]}):T?a.jsxs(a.Fragment,{children:[a.jsx("img",{className:h.signaturePreviewImage,src:T,alt:"Signature preview"}),a.jsx(i.Button,{className:h.editSignatureButton,styleType:"light",onClick:()=>N(!0),id:x,icon:a.jsx(r.PencilIcon,{}),"aria-label":"Edit signature",disabled:k})]}):a.jsx(i.Button,{className:h.addSignatureButton,type:"button",styleType:"secondary","aria-label":"Add signature",id:x,onClick:()=>N(!0),disabled:k,children:"Add signature"})}),a.jsx(l.Modal,{className:h.scrollableModal,"data-testid":"signature-modal",show:C,children:a.jsx("div",{className:h.growContainer,"data-mobile-landscape":_,children:a.jsxs(l.Modal.Box,{className:h.modalBox,"data-mobile-landscape":_,onClose:()=>N(!1),children:[a.jsx("h2",{className:h.modalTitle,"data-mobile-landscape":_,children:"Signature"}),a.jsx("div",{className:h.eSignatureContainer,"data-mobile-landscape":_,children:a.jsxs("div",{className:h.eSignatureDrawable,"data-mobile-landscape":_,children:[a.jsx("div",{className:h.signatureLine,"data-mobile-landscape":_}),a.jsx(s.Suspense,{fallback:null,children:C&&a.jsx(j,{ref:S,baseImageDataURL:T})})]})}),a.jsxs("div",{className:h.modalButtons,"data-mobile-landscape":_,children:[a.jsx(i.Button,{className:h.modalActionButton,"data-mobile-landscape":_,sizeType:_?"small":"default",type:"button",styleType:w&&!_?"light":"link",icon:a.jsx(r.EraserIcon,{}),onClick:A,children:"Clear"}),a.jsx(i.Button,{className:h.modalActionButton,"data-mobile-landscape":_,sizeType:_?"small":"default",type:"button",onClick:E,children:"Save"})]})]})})}),b?a.jsx(g.Typography.BodySM,{className:h.instructions,children:b}):null]}))};
 //# sourceMappingURL=e-signature.js.map