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

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

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

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 dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-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 {\n Container,\n InputContainer,\n MOBILE_WRAP_WIDTH,\n} from \"./date-range-input.style\";\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: 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 <Container\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 $wrap={shouldWrap}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n onKeyDown={handleNodeKeyDown}\n {...otherProps}\n >\n <RangeInputInnerContainer\n currentActive={currentFocus}\n wrap={shouldWrap}\n error={error}\n >\n <InputContainer $wrap={shouldWrap}>\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 </InputContainer>\n <InputContainer $wrap={shouldWrap}>\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 </InputContainer>\n </RangeInputInnerContainer>\n </Container>\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","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","Container","role","ref","tabIndex","$focused","$readOnly","$error","onKeyDown","children","_jsxs","RangeInputInnerContainer","currentActive","wrap","InputContainer","$wrap","StandaloneDateInput","placeholder","names","inputLabels","renderDropdown","elementWidth","CalendarDropdown","endValue","selectWithinRange","onSelect","onHover","width","isFocusable","customZIndex","offset"],"mappings":"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"}
1	+ {"version":3,"file":"date-range-input.js","sources":["../../../src/date-range-input/date-range-input.tsx"],"sourcesContent":["import dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-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 {\n Container,\n InputContainer,\n MOBILE_WRAP_WIDTH,\n} from \"./date-range-input.style\";\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: 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 <Container\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 $readOnly={readOnly}\n error={error}\n $wrap={shouldWrap}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n onKeyDown={handleNodeKeyDown}\n {...otherProps}\n >\n <RangeInputInnerContainer\n currentActive={currentFocus}\n wrap={shouldWrap}\n error={error}\n >\n <InputContainer $wrap={shouldWrap}>\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 </InputContainer>\n <InputContainer $wrap={shouldWrap}>\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 </InputContainer>\n </RangeInputInnerContainer>\n </Container>\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","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","Container","role","ref","tabIndex","$readOnly","$wrap","onKeyDown","children","_jsxs","RangeInputInnerContainer","currentActive","wrap","InputContainer","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.style.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"date-range-input.style.js","sources":["../../../src/date-range-input/date-range-input.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputWrapper } from \"../shared/input-wrapper~~/input-wrapper~~\";\nimport { V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n $wrap: boolean;\n $readOnly?: boolean;\n}\n\nexport const MOBILE_WRAP_WIDTH = 320;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled(InputWrapper)<StyleProps>`\n ${(props) => {\n if (props.$wrap) {\n if (props.$readOnly === true) {\n return css`\n padding: ${V3_Spacing[\"spacing-12\"]} 0;\n `;\n }\n return css`\n padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-16\"]};\n `;\n }\n }}\n`;\n\nexport const InputContainer = styled.div<StyleProps>`\n display: flex;\n align-items: center;\n height: calc(3rem - 2px); // exclude top and bottom borders\n width: 100%;\n\n ${(props) =>\n props.$wrap &&\n css`\n height: fit-content;\n `}\n`;\n"],"names":["Container","styled","InputWrapper","props","$wrap","$readOnly","css","V3_Spacing","InputContainer","div"],"mappings":"2NAaO,MAKMA,EAAYC,EAAAA,QAAOC,EAAAA,aAAyB;MAClDC,IACC,GAAIA,EAAMC,MACN,OAAwB,IAApBD,EAAME,UACCC,KAAG;+BACKC,EAAAA,WAAW;kBAGvBD,KAAG;2BACKC,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;aAE1D;EAIKC,EAAiBP,EAAAA,QAAOQ,GAAe;;;;;;MAM7CN,GACCA,EAAMC,OACNE,KAAG;;;yEA5BsB"}
1	+ {"version":3,"file":"date-range-input.style.js","sources":["../../../src/date-range-input/date-range-input.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { V3_Spacing } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE\n// =============================================================================\ninterface StyleProps {\n $wrap: boolean;\n $readOnly?: boolean;\n}\n\nexport const MOBILE_WRAP_WIDTH = 320;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled(InputWrapper)<StyleProps>`\n ${(props) => {\n if (props.$wrap) {\n if (props.$readOnly === true) {\n return css`\n padding: ${V3_Spacing[\"spacing-12\"]} 0;\n `;\n }\n return css`\n padding: ${V3_Spacing[\"spacing-12\"]} ${V3_Spacing[\"spacing-16\"]};\n `;\n }\n }}\n`;\n\nexport const InputContainer = styled.div<StyleProps>`\n display: flex;\n align-items: center;\n height: calc(3rem - 2px); // exclude top and bottom borders\n width: 100%;\n\n ${(props) =>\n props.$wrap &&\n css`\n height: fit-content;\n `}\n`;\n"],"names":["Container","styled","InputWrapper","props","$wrap","$readOnly","css","V3_Spacing","InputContainer","div"],"mappings":"2NAaO,MAKMA,EAAYC,EAAAA,QAAOC,EAAAA,aAAyB;MAClDC,IACC,GAAIA,EAAMC,MACN,OAAwB,IAApBD,EAAME,UACCC,KAAG;+BACKC,EAAAA,WAAW;kBAGvBD,KAAG;2BACKC,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;aAE1D;EAIKC,EAAiBP,EAAAA,QAAOQ,GAAe;;;;;;MAM7CN,GACCA,EAAMC,OACNE,KAAG;;;yEA5BsB"}

package/cjs/divider/divider.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var s=require("../_virtual/_tslib.js"),l=require("react/jsx-runtime"),e=require("../layout/col-div.js"),o=require("../v2_layout/col-div.js"),i=require("./divider.style.js");exports.Divider=t=>{var{thickness:r=1,lineStyle:C="solid",layoutType:c="flex",color:x,className:a,xxsCols:n,xsCols:d,smCols:m,mdCols:u,lgCols:j,xlCols:v,xxlCols:y,mobileCols:b,tabletCols:$,desktopCols:h}=t,k=s.__rest(t,["thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","mobileCols","tabletCols","desktopCols"]);const g=void 0!==b||void 0!==$||void 0!==h;switch(c){case"flex":return l.jsx(i.Line,Object.assign({className:a,$thickness:r,$lineStyle:C,$color:x},k));case"grid":return g?l.jsx(o.V2_ColDiv,Object.assign({className:a,mobileCols:b,tabletCols:$,desktopCols:h},k,{children:l.jsx(i.Line,{$thickness:r,$lineStyle:C,$color:x})})):l.jsx(e.ColDiv,Object.assign({className:a},(()=>{const s=n||[1,-1],l=d||s,e=m||l,o=u||e,i=j||o,t=v||i;return{xxlCols:y||t,xlCols:t,lgCols:i,mdCols:o,smCols:e,xsCols:l,xxsCols:s}})(),k,{children:l.jsx(i.Line,{$thickness:r,$lineStyle:C,$color:x})}))}};
+"use strict";var e=require("../_virtual/_tslib.js"),s=require("react/jsx-runtime"),l=require("clsx"),o=require("react"),r=require("../layout/col-div.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js");var t=require("../theme/tokens/colour.js");require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var i=require("../theme/utils/use-apply-styles.js"),a=require("../theme/utils/use-design-token.js"),n=require("../util/styling-helper.js"),u=require("../v2_layout/col-div.js"),d=require("./divider.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var x=c(l);const C={solid:d.solidLine,dashed:d.dashedLine};exports.Divider=l=>{var{thickness:c=1,lineStyle:m="solid",layoutType:h="flex",color:v,className:j,xxsCols:k,xsCols:g,smCols:y,mdCols:p,lgCols:q,xlCols:b,xxlCols:f,mobileCols:w,tabletCols:N,desktopCols:_}=l,T=e.__rest(l,["thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","mobileCols","tabletCols","desktopCols"]);const S=o.useRef(null),$=a.useResolvedTokenValue({value:v,fallback:t.Colour.border,isToken:n.isColourToken,normalizeCustom:String}),D=encodeURIComponent($),O=c+1;i.useApplyStyle(S,{[d.tokens.thickness]:`${c}px`,[d.tokens.color]:v,[d.tokens.backgroundImage]:`\n            url('data:image/svg+xml,<svg width="8" height="${c}" viewBox="0 0 8 1" xmlns="http://www.w3.org/2000/svg"><line x1="2" y1="1" x2="6" y2="1" stroke="${D}" stroke-width="${O}" stroke-dasharray="4 4" /></svg>')`});const R=void 0!==w||void 0!==N||void 0!==_,B=x.default(d.lineBase,C[m]);switch(h){case"flex":return s.jsx("hr",Object.assign({ref:S,className:x.default(B,j)},T));case"grid":return R?s.jsx(u.V2_ColDiv,Object.assign({className:j,mobileCols:w,tabletCols:N,desktopCols:_},T,{children:s.jsx("hr",{ref:S,className:B})})):s.jsx(r.ColDiv,Object.assign({className:j},(()=>{const e=k||[1,-1],s=g||e,l=y||s,o=p||l,r=q||o,t=b||r;return{xxlCols:f||t,xlCols:t,lgCols:r,mdCols:o,smCols:l,xsCols:s,xxsCols:e}})(),T,{children:s.jsx("hr",{ref:S,className:B})}))}};
 //# sourceMappingURL=divider.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"divider.js","sources":["../../../src/divider/divider.tsx"],"sourcesContent":["import { ColDiv } from \"../layout/col-div\";\nimport { V2_ColDiv } from \"../v2_layout/col-div\";\nimport { ~~Line~~ } from \"./divider.~~style~~\";\nimport type { DividerProps } from \"./types\";\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 mobileCols,\n tabletCols,\n desktopCols,\n ...otherProps\n}: DividerProps) => {\n const isV2Layout =\n mobileCols !== undefined \|\|\n tabletCols !== undefined \|\|\n desktopCols !== undefined;\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 switch (layoutType) {\n case \"flex\":\n return (\n <~~Line~~\n ~~className~~={~~className~~}\n ~~$thickness~~={~~thickness~~}\n ~~$lineStyle=~~{~~lineStyle}\n $color={color}\n {~~...otherProps}\n />\n );\n case \"grid\":\n if (isV2Layout) {\n return (\n <V2_ColDiv\n className={className}\n mobileCols={mobileCols}\n tabletCols={tabletCols}\n desktopCols={desktopCols}\n {...otherProps}\n >\n <~~Line\n $thickness~~={~~thickness~~}~~\n $lineStyle~~={~~lineStyle~~}~~\n $color={color}\n~~ />\n </V2_ColDiv>\n );\n } else {\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <~~Line\n $thickness~~={~~thickness~~}~~\n $lineStyle~~={~~lineStyle~~}~~\n $color={color}\n~~ />\n </ColDiv>\n );\n }\n }\n};\n"],"names":["_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","mobileCols","tabletCols","desktopCols","otherProps","__rest","~~isV2Layout~~","~~undefined~~","~~_jsx~~","~~Line~~","~~Object~~","~~assign~~","~~$thickness~~","~~$lineStyle~~","~~$color~~","V2_ColDiv","children","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"~~0MAKwBA~~,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,EAAOC,WACPA,EAAUC,WACVA,EAAUC,YACVA,GAAWf,EACRgB,EAAUC,EAAAA,OAAAjB,EAhBO,qKAkBpB,MAAMkB,OACaC,~~IAAfN~~,~~QACeM~~,~~IAAfL~~,~~QACgBK~~,~~IAAhBJ~~,~~EAsBJ~~,~~OAAQZ~~,GACJ,IAAK,OACD,~~OACIiB~~,EAAAA,~~IAACC~~,~~EAAAA~~,~~KAAIC,~~OAAAC,OAAA,~~CACDlB~~,~~UAAWA~~,~~EAASmB~~,~~WACRvB~~,~~EAASwB~~,~~WACTvB~~,~~EAASwB~~,~~OACbtB~~,~~GACJY,~~IAGhB,IAAK,OACD,~~OAAIE~~,~~EAEIE~~,~~EAAAA~~,~~IAACO,~~EAAAA,~~UAASL~~,OAAAC,OAAA,~~CACNlB~~,UAAWA,EACXQ,WAAYA,EACZC,WAAYA,EACZC,YAAaA,GACTC,EAAU,~~CAAAY~~,~~SAEdR~~,EAAAA,~~IAACC~~,~~EAAAA~~,~~KAAI~~,~~CAAAG~~,~~WACWvB~~,~~EAASwB~~,~~WACTvB~~,~~EAASwB,OACbtB,OAMhBgB,~~EAAAA,~~IAACS~~,~~SAAMP,~~OAAAC,OAAA,~~CACHlB~~,UAAWA,~~GAnDR~~,MACnB,~~MAAMyB~~,~~EAAcxB~~,GAAW,CAAC,GAAG,~~GAC7ByB~~,~~EAAaxB~~,~~GAAUuB~~,EACvBE,~~EAAaxB~~,~~GAAUuB~~,EACvBE,~~EAAaxB~~,~~GAAUuB~~,EACvBE,~~EAAaxB~~,~~GAAUuB~~,EACvBE,~~EAAaxB~~,~~GAAUuB~~,EAG7B,MAAO,~~CACHtB~~,QAHgBA,~~GAAWuB~~,~~EAI3BxB~~,~~OAAQwB~~,~~EACRzB~~,~~OAAQwB~~,~~EACRzB~~,~~OAAQwB~~,~~EACRzB~~,~~OAAQwB~~,~~EACRzB~~,~~OAAQwB~~,~~EACRzB~~,~~QAASwB~~,EACZ,~~EAmCmBM~~,~~GACApB~~,~~YAEJI~~,EAAAA,~~IAACC~~,~~EAAAA~~,~~KAAI~~,~~CAAAG~~,~~WACWvB~~,~~EAASwB,WACTvB,SACJE~~"}
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 { V2_ColDiv } from \"../v2_layout/col-div\";\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 mobileCols,\n tabletCols,\n desktopCols,\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 isV2Layout =\n mobileCols !== undefined \|\|\n tabletCols !== undefined \|\|\n desktopCols !== undefined;\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 if (isV2Layout) {\n return (\n <V2_ColDiv\n className={className}\n mobileCols={mobileCols}\n tabletCols={tabletCols}\n desktopCols={desktopCols}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </V2_ColDiv>\n );\n } else {\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </ColDiv>\n );\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","mobileCols","tabletCols","desktopCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","isV2Layout","undefined","lineClass","clsx","styles.lineBase","_jsx","Object","assign","V2_ColDiv","children","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"qrBAUA,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,EAAOC,WACPA,EAAUC,WACVA,EAAUC,YACVA,GAAWf,EACRgB,EAAUC,EAAAA,OAAAjB,EAhBO,qKAkBpB,MAAMkB,EAAMC,EAAAA,OAAsB,MAE5BC,EAAiBC,EAAAA,sBAAsB,CACzCC,MAAOlB,EACPmB,SAAUC,EAAAA,OAAe,OACzBC,QAASC,EAAAA,cACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc9B,EAAY,EAEhC+B,EAAAA,cAAcd,EAAK,CACf,CAACe,EAAAA,OAAchC,WAAY,GAAGA,MAC9B,CAACgC,EAAAA,OAAc7B,OAAQA,EACvB,CAAC6B,EAAAA,OAAcC,iBAAkB,gEACoBjC,qGAA6G4B,oBAA+BE,yCAGrM,MAAMI,OACaC,IAAfvB,QACeuB,IAAftB,QACgBsB,IAAhBrB,EAsBEsB,EAAYC,EAAAA,QAAKC,EAAAA,SAAiB5C,EAAaO,IAErD,OAAQC,GACJ,IAAK,OACD,OACIqC,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACIxB,IAAKA,EACLb,UAAWiC,EAAAA,QAAKD,EAAWhC,IACvBW,IAGhB,IAAK,OACD,OAAImB,EAEIK,MAACG,EAAAA,UAASF,OAAAC,OAAA,CACNrC,UAAWA,EACXQ,WAAYA,EACZC,WAAYA,EACZC,YAAaA,GACTC,EAAU,CAAA4B,SAEdJ,EAAAA,UAAItB,IAAKA,EAAKb,UAAWgC,OAK7BG,EAAAA,IAACK,EAAAA,OAAMJ,OAAAC,OAAA,CACHrC,UAAWA,GA/CR,MACnB,MAAMyC,EAAcxC,GAAW,CAAC,GAAG,GAC7ByC,EAAaxC,GAAUuC,EACvBE,EAAaxC,GAAUuC,EACvBE,EAAaxC,GAAUuC,EACvBE,EAAaxC,GAAUuC,EACvBE,EAAaxC,GAAUuC,EAG7B,MAAO,CACHtC,QAHgBA,GAAWuC,EAI3BxC,OAAQwC,EACRzC,OAAQwC,EACRzC,OAAQwC,EACRzC,OAAQwC,EACRzC,OAAQwC,EACRzC,QAASwC,EACZ,EA+BmBM,GACApC,YAEJwB,EAAAA,IAAA,KAAA,CAAItB,IAAKA,EAAKb,UAAWgC"}

package/cjs/divider/divider.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";require("./divider.styles_1xpzh8p.css");exports.dashedLine="d1etlddg",exports.lineBase="l1oo3ku9",exports.solidLine="s7a32sz",exports.tokens={thickness:"--fds-internal-divider-line-thickness",color:"--fds-internal-divider-line-color",backgroundImage:"--fds-internal-divider-line-backgroundImage"};
2	+ //# sourceMappingURL=divider.styles.js.map

package/cjs/divider/divider.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"divider.styles.js","sources":["../../../src/divider/divider.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const tokens = {\n thickness: \"--fds-internal-divider-line-thickness\",\n color: \"--fds-internal-divider-line-color\",\n backgroundImage: \"--fds-internal-divider-line-backgroundImage\",\n} as const;\n\nexport const lineBase = css`\n width: 100%;\n margin: 0;\n border: none;\n ${tokens.thickness}: initial;\n height: var(${tokens.thickness}, 1px);\n`;\n\nexport const solidLine = css`\n ${tokens.color}: initial;\n background-color: var(${tokens.color}, ${Colour.border});\n`;\n\nexport const dashedLine = css`\n background-color: transparent;\n background-repeat: repeat-x;\n background-image: var(${tokens.backgroundImage});\n`;\n"],"names":["thickness","color","backgroundImage"],"mappings":"+FA2BuB,4BAbF,6BAQC,yBAdA,CAClBA,UAAW,wCACXC,MAAO,oCACPC,gBAAiB"}

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

@@ -0,0 +1,3 @@
+.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);}

package/cjs/drawer/drawer.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@floating-ui/react"),s=require("@lifesg/react-icons/cross"),a=require("react"),t=require("../overlay/overlay.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../util/string-helper.js");var o=require("./drawer.styles.js");exports.Drawer=l=>{var{children:u,heading:d,show:c,onClose:h,onOverlayClick:g}=l,j=e.__rest(l,["children","heading","show","onClose","onOverlayClick"]);const[v,x]=a.useState(c),[y]=a.useState((()=>n.SimpleIdGenerator.generate())),C=a.useRef(null),{context:p,refs:f}=i.useFloating({open:c,onOpenChange:e=>{!e&&h&&h()}}),q=i.useDismiss(p,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:w}=i.useInteractions([q]),{isMounted:b,status:m}=i.useTransitionStatus(p,{duration:800});a.useEffect((()=>{if(!c){const e=setTimeout((()=>x(!1)),800);return()=>clearTimeout(e)}x(!0)}),[c]);return r.jsx(t.Overlay,{show:v,enableOverlayClick:!0,onOverlayClick:g,children:b?r.jsx(i.FloatingFocusManager,{context:p,initialFocus:-1,returnFocus:!0,children:r.jsxs(o.Container,Object.assign({ref:f.setFloating,$show:c,"data-status":m,"data-testid":"drawer",onClick:e=>{e.stopPropagation()},"aria-modal":!0,role:"dialog","aria-labelledby":y,onTransitionEnd:e=>{var r;"visibility"===e.propertyName&&c&&(null===(r=C.current)||void 0===r||r.focus())}},w(),j,{children:[r.jsx(o.Header,{children:r.jsx(o.Heading,{id:y,ref:C,tabIndex:-1,weight:"bold",forwardedAs:"h2",children:d})}),r.jsx(o.Content,{children:u}),r.jsx(o.CloseButton,{"aria-label":"Close drawer",onClick:h,focusHighlight:!1,children:r.jsx(s.CrossIcon,{"aria-hidden":!0})})]}))}):void 0})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@floating-ui/react"),i=require("@lifesg/react-icons/cross"),s=require("clsx"),t=require("react"),l=require("../overlay/overlay.js"),n=require("../shared/clickable-icon/clickable-icon.js"),o=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var c=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var u=require("./drawer.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=d(s);exports.Drawer=s=>{var{children:d,heading:g,show:j,onClose:v,onOverlayClick:y,className:f}=s,x=e.__rest(s,["children","heading","show","onClose","onOverlayClick","className"]);const[m,p]=t.useState(j),q=c.useId(),b=t.useRef(null),{context:C,refs:k}=a.useFloating({open:j,onOpenChange:e=>{!e&&v&&v()}}),w=a.useDismiss(C,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:N}=a.useInteractions([w]),{isMounted:F,status:O}=a.useTransitionStatus(C,{duration:800});t.useEffect((()=>{if(!j){const e=setTimeout((()=>p(!1)),800);return()=>clearTimeout(e)}p(!0)}),[j]);return r.jsx(l.Overlay,{show:m,enableOverlayClick:!0,onOverlayClick:y,children:F?r.jsx(a.FloatingFocusManager,{context:C,initialFocus:-1,returnFocus:!0,children:r.jsxs("div",Object.assign({ref:k.setFloating,"data-status":O,"data-testid":"drawer","aria-modal":!0,role:"dialog","aria-labelledby":q,onTransitionEnd:e=>{var r;"visibility"===e.propertyName&&j&&(null===(r=b.current)||void 0===r||r.focus())},className:h.default(u.container,f)},N(),x,{children:[r.jsx("div",{className:u.header,children:r.jsx(o.Typography.HeadingMD,{as:"h2",className:u.heading,id:q,ref:b,tabIndex:-1,weight:"bold",children:g})}),r.jsx("div",{className:u.content,children:d}),r.jsx(n.ClickableIcon,{"aria-label":"Close drawer",onClick:v,focusHighlight:!1,className:u.closeButton,children:r.jsx(i.CrossIcon,{"aria-hidden":!0})})]}))}):void 0})};
 //# sourceMappingURL=drawer.js.map

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 { useEffect, useRef, useState } from \"react\";\n\nimport { Overlay } from \"../overlay\";\nimport { ~~SimpleIdGenerator~~ } from \"../~~util~~\";\nimport {\~~n CloseButton,\n Container,\n Content,\n Header,\n Heading,\n~~} from \"./drawer.styles\";\nimport type { DrawerProps } from \"./types\";\n\nexport const Drawer = ({\n children,\n heading,\n show,\n onClose,\n onOverlayClick,\n ...otherProps\n}: DrawerProps) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const [showOverlay, setShowOverlay] = useState(show);\n const [id] = ~~useState~~(() ~~=> SimpleIdGenerator.generate())~~;\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 ~~const handleClick = (event: React.MouseEvent) => {\n event.stopPropagation();\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 <~~Container~~\n ref={refs.setFloating}\n ~~$show={show}\n~~ data-status={status}\n data-testid=\"drawer\"\n ~~onClick={handleClick}\n~~ aria-modal\n role=\"dialog\"\n aria-labelledby={id}\n onTransitionEnd={handleDialogVisibility}\n {...getFloatingProps()}\n {...otherProps}\n >\n <~~Header~~>\n <~~Heading~~\n id={id}\n ref={initialFocusRef}\n tabIndex={-1}\n weight=\"bold\"\n ~~forwardedAs=\"h2\"\n~~ >\n {heading}\n </~~Heading~~>\n </~~Header~~>\n <~~Content~~>{children}</~~Content~~>\n <~~CloseButton~~\n aria-label=\"Close drawer\"\n onClick={onClose}\n focusHighlight={false}\n >\n <CrossIcon aria-hidden />\n </~~CloseButton~~>\n </~~Container~~>\n </FloatingFocusManager>\n ) : undefined}\n </Overlay>\n );\n};\n"],"names":["_a","children","heading","show","onClose","onOverlayClick","otherProps","__rest","showOverlay","setShowOverlay","useState","id","~~SimpleIdGenerator~~","~~generate","~~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","~~Container~~","~~Object~~","~~assign~~","~~ref~~","~~setFloating~~","~~$show~~","~~onClick~~","~~event~~","~~stopPropagation~~","~~role~~","~~onTransitionEnd~~","e","~~propertyName~~","~~current~~","~~focus~~","~~Header~~","~~Heading~~","~~tabIndex~~","~~weight~~","~~forwardedAs~~","~~Content~~","~~CloseButton~~","~~focusHighlight","~~CrossIcon","undefined"],"mappings":"~~uaAqBuBA~~,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,~~GAAcL~~,~~EACXM~~,EAAUC,EAAAA,~~OAAAP~~,~~EANM~~,~~0DAWnB~~,~~MAAOQ~~,EAAaC,GAAkBC,EAAAA,~~SAASP~~,~~IACxCQ~~,~~GAAMD~~,EAAAA,~~UAAS~~,~~IAAME,EAAAA,kBAAkBC,aACxCC,~~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,~~IAAMxB~~,GAAe,IAAQ,KACtD,MAAO,~~IAAMyB~~,aAAaF,EAC9B,~~CACIvB~~,GAAe,EACnB,GACD,~~CAACN~~,~~IAmBJ~~,OACIgC,MAACC,EAAAA,QAAO,CACJjC,~~KAAMK~~,~~EACN6B~~,oBAAkB,EAClBhC,eAAgBA,EAAcJ,SAE7B0B,EACGQ,~~MAACG,~~EAAAA,~~qBAAoB~~,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAIvC,SAEjBwC,EAAAA,~~KAACC~~,~~YAASC~~,~~OAAAC~~,~~OAAA~~,~~CACNC~~,~~IAAK5B,EAAK6B,YAAWC,MACd5C,EAAI,cACEyB,~~EAAM,cACP,~~SACZoB~~,~~QAxBCC,IACjBA,EAAMC,iBAAiB,EAuBa,cAAA,EAEpBC,~~KAAK,SAAQ,~~kBACIxC~~,~~EACjByC~~,~~gBAnCYC~~,UACL,eAAnBA,EAAEC,~~cAAiCnD~~,IAEZ,QAAvBH,EAAAc,~~EAAgByC~~,eAAO,~~IAAAvD~~,GAAAA,~~EAAEwD~~,QAC7B,~~GAgCoB/B~~,~~IACAnB~~,EAAU,~~CAAAL~~,SAAA,CAEdkC,EAAAA,~~IAACsB~~,~~SAAM~~,~~CAAAxD~~,~~SACHkC~~,EAAAA,~~IAACuB~~,EAAAA,~~QAAO~~,~~CACJ/C~~,GAAIA,~~EACJkC~~,~~IAAK/B~~,~~EACL6C~~,UAAU,EACVC,OAAO,~~OACPC~~,~~YAAY~~,~~KAAI5D~~,~~SAEfC~~,~~MAGTiC~~,EAAAA,~~IAAC2B~~,~~EAAAA~~,~~QAAO~~,~~CAAA7D~~,~~SAAEA~~,~~IACVkC,~~EAAAA,~~IAAC4B~~,~~cAAW,~~CAAA,~~aACG~~,~~eACXf~~,~~QAAS5C~~,~~EACT4D~~,gBAAgB,~~EAAK/D~~,~~SAErBkC~~,~~EAAAA~~,~~IAAC8B~~,EAAAA,~~UAAS~~,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\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"}

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

@@ -1,92 +1,2 @@
-"use strict";var i=require("styled-components"),t=require("../shared/clickable-icon/clickable-icon.js"),o=require("../typography/index.js"),e=require("../v3_theme/index.js");function a(i){return i&&"object"==typeof i&&"default"in i?i:{default:i}}var n=a(i);const d=i.css`
-    transition-property: right, visibility;
-    &[data-status="initial"] {
-        right: -100%;
-        visibility: hidden;
-    }
-    &[data-status="open"] {
-        transition-duration: ${e.V3_Motion["duration-800"]};
-        transition-timing-function: ${e.V3_Motion["ease-entrance"]};
-        right: 0;
-        visibility: visible;
-    }
-    &[data-status="close"] {
-        transition-duration: ${e.V3_Motion["duration-800"]};
-        transition-timing-function: ${e.V3_Motion["ease-exit"]};
-        right: -100%;
-        visibility: hidden;
-    }
-`,r=n.default.div`
-    position: fixed;
-    top: 0;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background-color: ${e.V3_Colour.bg};
-    box-shadow: ${e.V3_Shadow["lg-subtle"]};
-    ${d}
-    width: 40%;
-    border-top-left-radius: ${e.V3_Radius.md};
-    border-bottom-left-radius: ${e.V3_Radius.md};
-    overflow: hidden;
-    ${e.V3_MediaQuery.MaxWidth.xl} {
-        width: 50%;
-        min-width: 700px;
-    }
-    ${e.V3_MediaQuery.MaxWidth.lg} {
-        width: 100%;
-        min-width: unset;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-`,s=n.default.div`
-    top: 0;
-    display: flex;
-    align-items: center;
-    gap: ${e.V3_Spacing["spacing-16"]};
-    padding: ${e.V3_Spacing["spacing-32"]} ${e.V3_Spacing["spacing-16"]}
-        ${e.V3_Spacing["spacing-16"]}
-        calc(${e.V3_Font.Spec["heading-lh-md"]} + ${e.V3_Spacing["spacing-32"]});
-    background-color: ${e.V3_Colour.bg};
-    border-bottom: ${e.V3_Border["width-010"]} ${e.V3_Border.solid}
-        ${e.V3_Colour.border};
-    ${e.V3_MediaQuery.MaxWidth.lg} {
-        gap: ${e.V3_Spacing["spacing-8"]};
-        padding: ${e.V3_Spacing["spacing-32"]} ${e.V3_Spacing["spacing-20"]}
-            ${e.V3_Spacing["spacing-16"]}
-            calc(${e.V3_Font.Spec["heading-lh-md"]} + ${e.V3_Spacing["spacing-24"]});
-    }
-`,c=n.default(t.ClickableIcon)`
-    color: ${e.V3_Colour.icon};
-    padding: 0;
-    position: absolute;
-    top: ${e.V3_Spacing["spacing-32"]};
-    left: ${e.V3_Spacing["spacing-16"]};
-    &:active,
-    &:focus {
-        color: ${e.V3_Colour["icon-hover"]};
-    }
-    svg {
-        height: ${e.V3_Font.Spec["heading-lh-md"]};
-        width: ${e.V3_Font.Spec["heading-lh-md"]};
-    }
-`,l=n.default(o.Typography.HeadingMD)`
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-`,p=n.default.div`
-    flex: 1;
-    overflow-y: auto;
-`;exports.CloseButton=c,exports.Container=r,exports.Content=p,exports.Header=s,exports.Heading=l;
+"use strict";require("./drawer.styles_94hx3y.css");exports.closeButton="c1njxz6r",exports.container="c1agands",exports.content="c2k10hw",exports.header="h1kc1wos",exports.heading="hcrz6mg";
 //# sourceMappingURL=drawer.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"drawer.styles.js","sources":["../../../src/drawer/drawer.styles.~~tsx~~"],"sourcesContent":["import ~~styled,~~ { css } from \"~~styled-components~~\";\n\nimport { ~~ClickableIcon } from~~ \~~"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\~~n ~~V3_Border~~,\n ~~V3_Colour~~,\n ~~V3_Font~~,\n ~~V3_MediaQuery~~,\n ~~V3_Motion~~,\n ~~V3_Radius~~,\n ~~V3_Shadow~~,\n ~~V3_Spacing~~,\n} from \"../~~v3_theme~~\";\n\~~n//~~ ~~=============================================================================\n//~~ ~~STYLE~~ ~~INTERFACE,~~ ~~transient~~ ~~props~~ ~~are denoted with $\~~n~~// See more https://styled-components.com/docs/api#transient-props~~\n// ~~=============================================================================\ninterface~~ ~~StyleProps {~~\n ~~$show?:~~ ~~boolean~~ \| ~~undefined~~;\n}\n\n// ~~=============================================================================\~~n// ~~STYLING HELPERS~~\n// ~~=============================================================================\~~n~~// FloatingUI transition styles~~\~~nconst FLOATING_TRANSITION_STYLES = css`\~~n transition-property: right, visibility;\n\n &[data-status=\"initial\"] {\n right: -100%;\n visibility: hidden;\n }\n\n &[data-status=\"open\"] {\n transition-duration: ${~~V3_Motion~~[\"duration-800\"]};\n transition-timing-function: ${~~V3_Motion~~[\"ease-entrance\"]};\n right: 0;\n visibility: visible;\n }\n\n &[data-status=\"close\"] {\n transition-duration: ${~~V3_Motion~~[\"duration-800\"]};\n transition-timing-function: ${~~V3_Motion~~[\"ease-exit\"]};\n right: -100%;\n visibility: hidden;\n }\n~~`;\n~~\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div<StyleProps>`\n ~~position: fixed;\n top: 0;\n\n display: flex;\n flex-direction: column;\n height: 100%;\n\n background-color:~~ ${~~V3_Colour~~.bg};\n box-shadow: ${V3_Shadow[\"lg-subtle\"]};\n\n ${FLOATING_TRANSITION_STYLES}\n\n width: 40%;\n border-top-left-radius: ${V3_Radius[\"md\"]};\n border-bottom-left-radius: ${V3_Radius[\"md\"]};\n overflow: hidden;\n\n ${V3_MediaQuery.MaxWidth.xl} {\n width: 50%;\n min-width: 700px;\n }\n\n ${~~V3_MediaQuery~~.MaxWidth.lg} {\n width: 100%;\n min-width: unset;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nexport const ~~Header~~ = ~~styled.div~~`\n top: 0;\n display: flex;\n align-items: center;\n gap: ${~~V3_Spacing~~[\"spacing-16\"]};\n padding: ${~~V3_Spacing~~[\"spacing-32\"]} ${~~V3_Spacing~~[\"spacing-16\"]}\n ${~~V3_Spacing~~[\"spacing-16\"]}\n calc(${~~V3_Font~~.Spec[\"heading-lh-md\"]} + ${~~V3_Spacing~~[\"spacing-32\"]});\n background-color: ${~~V3_Colour.~~bg};\n border-bottom: ${~~V3_Border~~[\"width-010\"]} ${~~V3_Border.~~solid}\n ${~~V3_Colour.~~border};\n\n ${~~V3_MediaQuery~~.MaxWidth.lg} {\n gap: ${~~V3_Spacing~~[\"spacing-8\"]};\n padding: ${~~V3_Spacing~~[\"spacing-32\"]} ${~~V3_Spacing~~[\"spacing-20\"]}\n ${~~V3_Spacing~~[\"spacing-16\"]}\n calc(${~~V3_Font~~.Spec[\"heading-lh-md\"]} + ${~~V3_Spacing~~[\"spacing-24\"]});\n }\n`;\n\nexport const ~~CloseButton~~ = ~~styled(ClickableIcon)~~`\n color: ${~~V3_Colour.~~icon};\n padding: 0;\n position: absolute;\n top: ${~~V3_Spacing~~[\"spacing-32\"]};\n left: ${~~V3_Spacing~~[\"spacing-16\"]};\n &:active,\n &:focus {\n color: ${~~V3_Colour~~[\"icon-hover\"]};\n }\n\n svg {\n height: ${~~V3_Font~~.Spec[\"heading-lh-md\"]};\n width: ${~~V3_Font~~.Spec[\"heading-lh-md\"]};\n }\n`;\n\nexport const ~~Heading~~ = ~~styled(Typography.HeadingMD)~~`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\n\nexport const ~~Content~~ = ~~styled.div~~`\n flex: 1;\n overflow-y: auto;\n`;\n"],"names":["FLOATING_TRANSITION_STYLES","css","V3_Motion","Container","styled","div","V3_Colour","bg","V3_Shadow","V3_Radius","V3_MediaQuery","MaxWidth","xl","lg","Header","V3_Spacing","V3_Font","Spec","V3_Border","solid","border","CloseButton","ClickableIcon","icon","Heading","Typography","HeadingMD","Content"],"mappings":"~~iQA2BA~~,~~MAAMA~~,~~EAA6BC~~,~~EAAAA~~,GAAG;;;;;;;;;+BASPC,EAAAA,UAAU;sCACHA,EAAAA,UAAU;;;;;;+BAMjBA,EAAAA,UAAU;sCACHA,EAAAA,UAAU;;;;EASnCC,EAAYC,EAAAA,QAAOC,GAAe;;;;;;;;wBAQvBC,EAAAA,UAAUC;kBAChBC,EAAAA,UAAU;;MAEtBR;;;8BAGwBS,EAAAA,UAAc;iCACXA,EAAAA,UAAc;;;MAGzCC,EAAAA,cAAcC,SAASC;;;;;MAKvBF,EAAAA,cAAcC,SAASE;;;;;;EAQhBC,EAASV,EAAAA,QAAOC,GAAG;;;;WAIrBU,EAAAA,WAAW;eACPA,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;UAC5CA,EAAAA,WAAW;eACNC,EAAAA,QAAQC,KAAK,sBAAsBF,EAAAA,WAAW;wBACrCT,EAAAA,UAAUC;qBACbW,EAAAA,UAAU,gBAAgBA,EAAAA,UAAUC;UAC/Cb,EAAAA,UAAUc;;MAEdV,EAAAA,cAAcC,SAASE;eACdE,EAAAA,WAAW;mBACPA,EAAAA,WAAW,iBAAiBA,EAAAA,WAAW;cAC5CA,EAAAA,WAAW;mBACNC,EAAAA,QAAQC,KAAK,sBAAsBF,EAAAA,WAAW;;EAIpDM,EAAcjB,EAAAA,QAAOkB,EAAAA,cAAc;aACnChB,EAAAA,UAAUiB;;;WAGZR,EAAAA,WAAW;YACVA,EAAAA,WAAW;;;iBAGNT,EAAAA,UAAU;;;;kBAITU,EAAAA,QAAQC,KAAK;iBACdD,EAAAA,QAAQC,KAAK;;EAIjBO,EAAUpB,EAAAA,QAAOqB,aAAWC,UAAU;;;;EAMtCC,EAAUvB,EAAAA,QAAOC,GAAG;;;"}
1	+ {"version":3,"file":"drawer.styles.js","sources":["../../../src/drawer/drawer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n Border,\n Colour,\n Font,\n MediaQuery,\n Motion,\n Radius,\n Shadow,\n Spacing,\n} from \"../theme\";\n\nexport const container = css`\n position: fixed;\n top: 0;\n\n display: flex;\n flex-direction: column;\n\n height: 100%;\n width: 40%;\n overflow: hidden;\n\n background-color: ${Colour[\"bg\"]};\n box-shadow: ${Shadow[\"lg-subtle\"]};\n border-top-left-radius: ${Radius[\"md\"]};\n border-bottom-left-radius: ${Radius[\"md\"]};\n\n transition-property: right, visibility;\n\n &[data-status=\"initial\"] {\n right: -100%;\n visibility: hidden;\n }\n\n &[data-status=\"open\"] {\n transition-duration: ${Motion[\"duration-800\"]};\n transition-timing-function: ${Motion[\"ease-entrance\"]};\n right: 0;\n visibility: visible;\n }\n\n &[data-status=\"close\"] {\n transition-duration: ${Motion[\"duration-800\"]};\n transition-timing-function: ${Motion[\"ease-exit\"]};\n right: -100%;\n visibility: hidden;\n }\n\n ${MediaQuery.MaxWidth.xl} {\n width: 50%;\n min-width: 700px;\n }\n\n ${MediaQuery.MaxWidth.lg} {\n width: 100%;\n min-width: unset;\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n }\n`;\n\nexport const header = css`\n top: 0;\n display: flex;\n align-items: center;\n gap: ${Spacing[\"spacing-16\"]};\n padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]}\n ${Spacing[\"spacing-16\"]}\n calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-32\"]});\n background-color: ${Colour[\"bg\"]};\n border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n ${MediaQuery.MaxWidth.lg} {\n gap: ${Spacing[\"spacing-8\"]};\n padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]}\n ${Spacing[\"spacing-16\"]}\n calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-24\"]});\n }\n`;\n\nexport const closeButton = css`\n color: ${Colour[\"icon\"]};\n padding: 0;\n position: absolute;\n top: ${Spacing[\"spacing-32\"]};\n left: ${Spacing[\"spacing-16\"]};\n &:active,\n &:focus {\n color: ${Colour[\"icon-hover\"]};\n }\n\n svg {\n height: ${Font.Spec[\"heading-lh-md\"]};\n width: ${Font.Spec[\"heading-lh-md\"]};\n }\n`;\n\nexport const heading = css`\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n`;\n\nexport const content = css`\n flex: 1;\n overflow-y: auto;\n`;\n"],"names":[],"mappings":"6FAkFwB,6BArEF,2BA4FF,yBA1CD,2BAoCC"}

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

@@ -0,0 +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;}
+.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;}

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"),t=require("@lifesg/react-icons"),n=require("react"),i=require("../external/react-responsive/dist/react-responsive.js"),s=require("styled-components"),a=require("../button/button.js"),o=require("../button-with-icon/button-with-icon.js"),l=require("../shared/progress-bar/progress-bar.js"),u=require("../typography/index.js"),d=require("../v3_theme/index.js"),c=require("./e-signature.styles.js");const g=n.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=x=>{const{description:h,id:j,loadingProgress:p,loadingLabel:b="Uploading...",onChange:y,value:v,disabled:S}=x,m=e.__rest(x,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[B,f]=n.useState(!1),q=n.useRef(null),[C,E]=n.useState(v),M=n.useContext(s.ThemeContext),w=d.V3_Breakpoint["sm-max"]({theme:M}),_=i.reactResponsiveExports.useMediaQuery({maxWidth:w}),k=i.reactResponsiveExports.useMediaQuery({maxHeight:w,orientation:"landscape"}),I=()=>{var e;null===(e=q.current)||void 0===e||e.clear()},P=()=>{if(q.current){const e=q.current.export();E(e),f(!1),null==y||y(e)}};n.useEffect((()=>{E(v)}),[v]);return r.jsxs("div",Object.assign({},m,{children:[r.jsx(c.SignatureArea,{$disabled:S,children:"number"==typeof p?r.jsxs(c.ProgressBox,{children:[b&&r.jsx(u.Typography.BodyMD,{children:b}),r.jsx(l.ProgressBar,{progress:null!=p?p:0,"data-testid":`${j||"e-signature"}-progress-bar`})]}):C?r.jsxs(r.Fragment,{children:[r.jsx(c.SignaturePreviewImage,{src:C,alt:"Signature preview"}),r.jsx(c.EditSignatureButton,{styleType:"light",onClick:()=>f(!0),id:j,"aria-label":"Edit signature",disabled:S,children:r.jsx(t.PencilIcon,{})})]}):r.jsx(c.AddSignatureButton,{type:"button",styleType:"secondary","aria-label":"Add signature",id:j,onClick:()=>f(!0),disabled:S,children:"Add signature"})}),r.jsx(c.ScrollableModal,{"data-testid":"signature-modal",show:B,children:r.jsx(c.GrowContainer,{children:r.jsxs(c.ModalBox,{onClose:()=>f(!1),children:[r.jsx(c.ModalTitle,{children:"Signature"}),r.jsx(c.ESignatureContainer,{children:r.jsxs(c.ESignatureDrawable,{children:[r.jsx(c.SignatureLine,{}),r.jsx(n.Suspense,{fallback:null,children:B&&r.jsx(g,{ref:q,baseImageDataURL:C})})]})}),r.jsxs(c.ModalButtons,{children:[r.jsx(c.ModalActionButton,{as:k?o.ButtonWithIcon.Small:o.ButtonWithIcon.Default,type:"button",styleType:_&&!k?"light":"link",icon:r.jsx(t.EraserIcon,{}),onClick:I,children:"Clear"}),r.jsx(c.ModalActionButton,{as:k?a.Button.Small:a.Button.Default,type:"button",onClick:P,children:"Save"})]})]})})}),h?r.jsx(c.Instructions,{children:h}):null]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),s=require("@lifesg/react-icons"),i=require("react"),n=require("../external/react-responsive/dist/react-responsive.js"),t=require("styled-components"),a=require("../shared/progress-bar/progress-bar.js"),l=require("../typography/index.js"),o=require("../v3_theme/index.js"),d=require("./e-signature.styles.js");const u=i.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:c,EditSignatureButton:g,ESignatureContainer:x,ESignatureDrawable:j,GrowContainer:p,Instructions:h,ModalActionButton:y,ModalBox:b,ModalButtons:v,ModalTitle:m,ProgressBox:S,ScrollableModal:f,SignatureArea:C,SignatureLine:q,SignaturePreviewImage:E}=d;exports.ESignature=d=>{const{description:B,id:M,loadingProgress:T,loadingLabel:_="Uploading...",onChange:k,value:P,disabled:w}=d,A=e.__rest(d,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[I,L]=i.useState(!1),R=i.useRef(null),[z,D]=i.useState(P),Q=i.useContext(t.ThemeContext),U=o.V3_Breakpoint["sm-max"]({theme:Q}),$=n.reactResponsiveExports.useMediaQuery({maxWidth:U}),F=n.reactResponsiveExports.useMediaQuery({maxHeight:U,orientation:"landscape"}),G=()=>{var e;null===(e=R.current)||void 0===e||e.clear()},H=()=>{if(R.current){const e=R.current.export();D(e),L(!1),null==k||k(e)}};i.useEffect((()=>{D(P)}),[P]);return r.jsxs("div",Object.assign({},A,{children:[r.jsx(C,{$disabled:w,children:"number"==typeof T?r.jsxs(S,{children:[_&&r.jsx(l.Typography.BodyMD,{children:_}),r.jsx(a.ProgressBar,{progress:null!=T?T:0,"data-testid":`${M||"e-signature"}-progress-bar`})]}):z?r.jsxs(r.Fragment,{children:[r.jsx(E,{src:z,alt:"Signature preview"}),r.jsx(g,{styleType:"light",onClick:()=>L(!0),id:M,icon:r.jsx(s.PencilIcon,{}),"aria-label":"Edit signature",disabled:w})]}):r.jsx(c,{type:"button",styleType:"secondary","aria-label":"Add signature",id:M,onClick:()=>L(!0),disabled:w,children:"Add signature"})}),r.jsx(f,{"data-testid":"signature-modal",show:I,children:r.jsx(p,{children:r.jsxs(b,{onClose:()=>L(!1),children:[r.jsx(m,{children:"Signature"}),r.jsx(x,{children:r.jsxs(j,{children:[r.jsx(q,{}),r.jsx(i.Suspense,{fallback:null,children:I&&r.jsx(u,{ref:R,baseImageDataURL:z})})]})}),r.jsxs(v,{children:[r.jsx(y,{sizeType:F?"small":"default",type:"button",styleType:$&&!F?"light":"link",icon:r.jsx(s.EraserIcon,{}),onClick:G,children:"Clear"}),r.jsx(y,{sizeType:F?"small":"default",type:"button",onClick:H,children:"Save"})]})]})})}),B?r.jsx(h,{children:B}):null]}))};
 //# sourceMappingURL=e-signature.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"e-signature.js","sources":["../../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n AddSignatureButton,\n EditSignatureButton,\n ESignatureContainer,\n ESignatureDrawable,\n GrowContainer,\n Instructions,\n ModalActionButton,\n ModalBox,\n ModalButtons,\n ModalTitle,\n ProgressBox,\n ScrollableModal,\n SignatureArea,\n SignatureLine,\n SignaturePreviewImage,\n} from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\nexport const ESignature = (props: EsignatureProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n description,\n id,\n loadingProgress,\n loadingLabel = \"Uploading...\",\n onChange,\n value,\n disabled,\n ...otherProps\n } = props;\n const [showModal, setShowModal] = useState(false);\n const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n const [dataURL, setDataURL] = useState<string \| null \| undefined>(value);\n const theme = useContext(ThemeContext);\n const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n const isMobileLandscape = useMediaQuery({\n maxHeight: mobileBreakpoint,\n orientation: \"landscape\",\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClearDrawing = () => {\n eSignatureCanvasRef.current?.clear();\n };\n\n const handleClickSave = () => {\n if (eSignatureCanvasRef.current) {\n const dataURL = eSignatureCanvasRef.current.export();\n setDataURL(dataURL);\n setShowModal(false);\n onChange?.(dataURL);\n }\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setDataURL(value);\n }, [value]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderSignatureArea = () => {\n if (!dataURL) {\n return (\n <AddSignatureButton\n type=\"button\"\n styleType=\"secondary\"\n aria-label=\"Add signature\"\n id={id}\n onClick={() => setShowModal(true)}\n disabled={disabled}\n >\n Add signature\n </AddSignatureButton>\n );\n }\n\n return (\n <>\n <SignaturePreviewImage src={dataURL} alt=\"Signature preview\" />\n <EditSignatureButton\n styleType=\"light\"\n onClick={() => setShowModal(true)}\n id={id}\n aria-label=\"Edit signature\"\n disabled={disabled}\n >\n <PencilIcon />\n </EditSignatureButton>\n </>\n );\n };\n\n const renderLoadingIndicator = () => {\n return (\n <ProgressBox>\n {loadingLabel && (\n <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n )}\n <ProgressBar\n progress={loadingProgress ?? 0}\n data-testid={`${id \|\| \"e-signature\"}-progress-bar`}\n />\n </ProgressBox>\n );\n };\n\n const renderModal = () => {\n return (\n <ScrollableModal data-testid=\"signature-modal\" show={showModal}>\n <GrowContainer>\n <ModalBox onClose={() => setShowModal(false)}>\n <ModalTitle>Signature</ModalTitle>\n <ESignatureContainer>\n <ESignatureDrawable>\n <SignatureLine />\n <Suspense fallback={null}>\n {showModal && (\n <ESignatureCanvas\n ref={eSignatureCanvasRef}\n baseImageDataURL={dataURL}\n />\n )}\n </Suspense>\n </ESignatureDrawable>\n </ESignatureContainer>\n <ModalButtons>\n <ModalActionButton\n as={\n isMobileLandscape\n ? ButtonWithIcon.Small\n : ButtonWithIcon.Default\n }\n type=\"button\"\n styleType={\n isMobile && !isMobileLandscape\n ? \"light\"\n : \"link\"\n }\n icon={<EraserIcon />}\n onClick={handleClearDrawing}\n >\n Clear\n </ModalActionButton>\n <ModalActionButton\n as={\n isMobileLandscape\n ? Button.Small\n : Button.Default\n }\n type=\"button\"\n onClick={handleClickSave}\n >\n Save\n </ModalActionButton>\n </ModalButtons>\n </ModalBox>\n </GrowContainer>\n </ScrollableModal>\n );\n };\n\n const renderDescription = () => {\n if (!description) return null;\n return <Instructions>{description}</Instructions>;\n };\n\n return (\n <div {...otherProps}>\n <SignatureArea $disabled={disabled}>\n {typeof loadingProgress === \"number\"\n ? renderLoadingIndicator()\n : renderSignatureArea()}\n </SignatureArea>\n {renderModal()}\n {renderDescription()}\n </div>\n );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","Promise","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","isMobileLandscape","maxHeight","orientation","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","SignatureArea","$disabled","ProgressBox","Typography","BodyMD","ProgressBar","progress","SignaturePreviewImage","src","alt","EditSignatureButton","styleType","onClick","PencilIcon","AddSignatureButton","type","ScrollableModal","show","GrowContainer","ModalBox","onClose","ModalTitle","ESignatureContainer","ESignatureDrawable","SignatureLine","Suspense","fallback","ref","baseImageDataURL","ModalButtons","ModalActionButton","as","ButtonWithIcon","Small","Default","icon","EraserIcon","Button","Instructions"],"mappings":"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"}
1	+ {"version":3,"file":"e-signature.js","sources":["../../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport * as styles from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\nconst {\n AddSignatureButton,\n EditSignatureButton,\n ESignatureContainer,\n ESignatureDrawable,\n GrowContainer,\n Instructions,\n ModalActionButton,\n ModalBox,\n ModalButtons,\n ModalTitle,\n ProgressBox,\n ScrollableModal,\n SignatureArea,\n SignatureLine,\n SignaturePreviewImage,\n} = styles;\n\nexport const ESignature = (props: EsignatureProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n description,\n id,\n loadingProgress,\n loadingLabel = \"Uploading...\",\n onChange,\n value,\n disabled,\n ...otherProps\n } = props;\n const [showModal, setShowModal] = useState(false);\n const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n const [dataURL, setDataURL] = useState<string \| null \| undefined>(value);\n const theme = useContext(ThemeContext);\n const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n const isMobileLandscape = useMediaQuery({\n maxHeight: mobileBreakpoint,\n orientation: \"landscape\",\n });\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleClearDrawing = () => {\n eSignatureCanvasRef.current?.clear();\n };\n\n const handleClickSave = () => {\n if (eSignatureCanvasRef.current) {\n const dataURL = eSignatureCanvasRef.current.export();\n setDataURL(dataURL);\n setShowModal(false);\n onChange?.(dataURL);\n }\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setDataURL(value);\n }, [value]);\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderSignatureArea = () => {\n if (!dataURL) {\n return (\n <AddSignatureButton\n type=\"button\"\n styleType=\"secondary\"\n aria-label=\"Add signature\"\n id={id}\n onClick={() => setShowModal(true)}\n disabled={disabled}\n >\n Add signature\n </AddSignatureButton>\n );\n }\n\n return (\n <>\n <SignaturePreviewImage src={dataURL} alt=\"Signature preview\" />\n <EditSignatureButton\n styleType=\"light\"\n onClick={() => setShowModal(true)}\n id={id}\n icon={<PencilIcon />}\n aria-label=\"Edit signature\"\n disabled={disabled}\n />\n </>\n );\n };\n\n const renderLoadingIndicator = () => {\n return (\n <ProgressBox>\n {loadingLabel && (\n <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n )}\n <ProgressBar\n progress={loadingProgress ?? 0}\n data-testid={`${id \|\| \"e-signature\"}-progress-bar`}\n />\n </ProgressBox>\n );\n };\n\n const renderModal = () => {\n return (\n <ScrollableModal data-testid=\"signature-modal\" show={showModal}>\n <GrowContainer>\n <ModalBox onClose={() => setShowModal(false)}>\n <ModalTitle>Signature</ModalTitle>\n <ESignatureContainer>\n <ESignatureDrawable>\n <SignatureLine />\n <Suspense fallback={null}>\n {showModal && (\n <ESignatureCanvas\n ref={eSignatureCanvasRef}\n baseImageDataURL={dataURL}\n />\n )}\n </Suspense>\n </ESignatureDrawable>\n </ESignatureContainer>\n <ModalButtons>\n <ModalActionButton\n sizeType={\n isMobileLandscape ? \"small\" : \"default\"\n }\n type=\"button\"\n styleType={\n isMobile && !isMobileLandscape\n ? \"light\"\n : \"link\"\n }\n icon={<EraserIcon />}\n onClick={handleClearDrawing}\n >\n Clear\n </ModalActionButton>\n <ModalActionButton\n sizeType={\n isMobileLandscape ? \"small\" : \"default\"\n }\n type=\"button\"\n onClick={handleClickSave}\n >\n Save\n </ModalActionButton>\n </ModalButtons>\n </ModalBox>\n </GrowContainer>\n </ScrollableModal>\n );\n };\n\n const renderDescription = () => {\n if (!description) return null;\n return <Instructions>{description}</Instructions>;\n };\n\n return (\n <div {...otherProps}>\n <SignatureArea $disabled={disabled}>\n {typeof loadingProgress === \"number\"\n ? renderLoadingIndicator()\n : renderSignatureArea()}\n </SignatureArea>\n {renderModal()}\n {renderDescription()}\n </div>\n );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","Promise","AddSignatureButton","EditSignatureButton","ESignatureContainer","ESignatureDrawable","GrowContainer","Instructions","ModalActionButton","ModalBox","ModalButtons","ModalTitle","ProgressBox","ScrollableModal","SignatureArea","SignatureLine","SignaturePreviewImage","styles","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","isMobileLandscape","maxHeight","orientation","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","$disabled","Typography","BodyMD","ProgressBar","progress","src","alt","styleType","onClick","icon","PencilIcon","type","show","onClose","Suspense","fallback","ref","baseImageDataURL","sizeType","EraserIcon"],"mappings":"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"}