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

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

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

Files changed (2426) hide show

package/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 $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","DateRangeInput","_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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"}
1	+ {"version":3,"file":"date-range-input.js","sources":["../../src/date-range-input/date-range-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport type { DropdownRenderProps } from \"../shared/dropdown-wrapper\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport type {\n CalendarAction,\n FocusType,\n InternalCalendarRef,\n} from \"../shared/internal-calendar\";\nimport { CalendarDropdown } from \"../shared/internal-calendar\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport type { StandaloneDateInputRef } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { StandaloneDateInput } from \"../shared/standalone-date-input/standalone-date-input\";\nimport { DateHelper, DateInputHelper, useContainerQuery } from \"../util\";\nimport { useStateActions } from \"../util/use-state-actions\";\nimport * as styles from \"./date-range-input.styles\";\nimport type { DateRangeInputProps } from \"./types\";\n\ninterface DateRangeInputState {\n initialStart: string;\n initialEnd: string;\n selectedStart: string;\n selectedEnd: string;\n currentFocus: FocusType;\n calendarOpen: boolean;\n isStartDirty: boolean;\n isEndDirty: boolean;\n focused: boolean;\n}\n\nconst INITIAL_STATE: DateRangeInputState = {\n initialStart: \"\",\n initialEnd: \"\",\n selectedStart: \"\",\n selectedEnd: \"\",\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n focused: false,\n};\n\nexport const DateRangeInput = ({\n minDate,\n maxDate,\n disabled,\n disabledDates,\n error,\n hideInputKeyboard,\n value,\n valueEnd,\n onChange,\n onFocus,\n onBlur,\n onYearMonthDisplayChange,\n withButton = true,\n variant = \"range\",\n numberOfDays = 7,\n readOnly,\n id,\n allowDisabledSelection,\n zIndex,\n dropdownRootNode: rootNode,\n ...otherProps\n}: DateRangeInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [initialCalendarDate, setInitialCalendarDate] = useState<string>();\n const [hoverValue, setHoverValue] = useState<string \| undefined>(undefined);\n const isWeekSelection = variant === \"week\";\n const isFixedRangeSelection = variant === \"fixed-range\";\n\n const [isStartDisabled, setIsStartDisabled] = useState<boolean>(false);\n const [isEndDisabled, setIsEndDisabled] = useState<boolean>(false);\n\n const [\n {\n selectedStart,\n selectedEnd,\n currentFocus,\n calendarOpen,\n isStartDirty,\n isEndDirty,\n focused,\n },\n actions,\n ] = useStateActions({\n name: \"date-range-input\",\n initialState: INITIAL_STATE,\n reducers: {\n blur: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n focused: false,\n }),\n dismiss: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n }),\n changeStart: (state, val: string) => ({\n ...state,\n selectedStart: val,\n isStartDirty: true,\n }),\n changeEnd: (state, val: string) => ({\n ...state,\n selectedEnd: val,\n isEndDirty: true,\n }),\n reselectStart: (state) => ({\n ...state,\n selectedStart: \"\",\n currentFocus: \"start\",\n }),\n reselectEnd: (state) => ({\n ...state,\n selectedEnd: \"\",\n currentFocus: \"end\",\n }),\n focus: (state, currentFocus: FocusType) => ({\n ...state,\n currentFocus: isWeekSelection\n ? \"none\"\n : isFixedRangeSelection\n ? \"start\"\n : currentFocus,\n calendarOpen: !readOnly,\n focused: true,\n }),\n cancel: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n selectedEnd: state.initialEnd,\n currentFocus: \"none\",\n calendarOpen: false,\n }),\n done: (state, payload: { start: string; end: string }) => ({\n ...state,\n selectedStart: payload.start,\n selectedEnd: payload.end,\n initialStart: payload.start,\n initialEnd: payload.end,\n currentFocus: \"none\",\n calendarOpen: false,\n isStartDirty: false,\n isEndDirty: false,\n }),\n resetStart: (state) => ({\n ...state,\n selectedStart: state.initialStart,\n }),\n resetEnd: (state) => ({\n ...state,\n selectedEnd: state.initialEnd,\n }),\n resetRange: (state, payload: { start: string; end: string }) => ({\n ...state,\n initialStart: payload.start,\n selectedStart: payload.start,\n initialEnd: payload.end,\n selectedEnd: payload.end,\n }),\n },\n });\n\n // tracks if current value in focused input is allowed for selection\n const isUnselectable = useRef<boolean>(false);\n const nodeRef = useRef<HTMLDivElement>(null);\n const calendarRef = useRef<InternalCalendarRef>(null);\n const startInputRef = useRef<StandaloneDateInputRef>(null);\n const endInputRef = useRef<StandaloneDateInputRef>(null);\n const shouldWrap = useContainerQuery({\n maxWidth: styles.MOBILE_WRAP_WIDTH,\n targetRef: nodeRef,\n });\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n actions.resetRange({\n start: DateInputHelper.sanitizeInput(value),\n end: DateInputHelper.sanitizeInput(valueEnd),\n });\n }, [value, valueEnd]);\n\n useEffect(() => {\n if (currentFocus === \"start\") {\n setInitialCalendarDate(selectedStart);\n } else if (currentFocus === \"end\" && selectedEnd) {\n setInitialCalendarDate(selectedEnd);\n }\n }, [currentFocus]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleNodeKeyDown = (event: React.KeyboardEvent) => {\n if (event.code === \"Enter\" && !withButton) {\n if (selectedStart && selectedEnd) {\n actions.done({\n start: selectedStart,\n end: selectedEnd,\n });\n onChange?.(selectedStart, selectedEnd);\n } else {\n actions.dismiss();\n nodeRef.current?.focus();\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n }\n }\n };\n\n const handleClose = () => {\n actions.blur();\n\n setIsStartDisabled(false);\n setIsEndDisabled(false);\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n\n performOnBlurHandler();\n };\n\n const handleDismiss = () => {\n actions.dismiss();\n\n nodeRef.current?.focus();\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n };\n\n const handleStartDateChange = (val: string) => {\n if (isDateUnselectable(val)) {\n // date is invalid, remain on this input\n isUnselectable.current = true;\n return;\n }\n\n actions.changeStart(val);\n if (val) calendarRef.current?.setCalendarDate(val);\n isUnselectable.current = false;\n\n if (!val) {\n // if both start and end were cleared, confirm the selection\n // and remain on this input\n if (!withButton && !selectedEnd && isEndDirty) {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n /\n - if next input is empty, focus it\n - else if date range is invalid, clear and focus the next input\n - else if date range is valid\n - if next input is still pristine, focus it\n - else if !withButton, confirm the selection and \"blur\" the field\n /\n\n if (!selectedEnd) {\n actions.focus(\"end\");\n return;\n }\n\n const isInvalidRange = dayjs(val).isAfter(selectedEnd, \"day\");\n\n if (isInvalidRange) {\n actions.reselectEnd();\n return;\n }\n\n if (!isEndDirty) {\n actions.focus(\"end\");\n return;\n }\n\n if (!withButton) {\n actions.done({ start: val, end: selectedEnd });\n onChange?.(val, selectedEnd);\n return;\n }\n };\n\n const handleEndDateChange = (val: string) => {\n if (isDateUnselectable(val)) {\n // date is invalid, remain on this input\n isUnselectable.current = true;\n return;\n }\n\n const isBeforeStartDate = dayjs(val).isBefore(selectedStart, \"day\");\n\n // if date range is invalid, set selected value as start and reselect end\n if (isBeforeStartDate) {\n actions.changeStart(val);\n calendarRef.current?.setCalendarDate(val);\n actions.reselectEnd();\n return;\n }\n\n actions.changeEnd(val);\n if (val) calendarRef.current?.setCalendarDate(val);\n\n if (!val) {\n // if both start and end were cleared, confirm the selection\n // and remain on this input\n if (!withButton && !selectedStart && isStartDirty) {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n /\n - if next input is empty, focus it\n - else if !withButton, confirm the selection and \"blur\" the field\n /\n\n if (!selectedStart) {\n actions.focus(\"start\");\n return;\n }\n\n if (!withButton) {\n endInputRef.current?.focusYearRef();\n\n actions.done({ start: selectedStart, end: val });\n onChange?.(selectedStart, val);\n return;\n }\n };\n\n const handleWeekSelectionChange = (val: string) => {\n const start = dayjs(val).startOf(\"week\").format(\"YYYY-MM-DD\");\n const end = dayjs(val).endOf(\"week\").format(\"YYYY-MM-DD\");\n\n actions.changeStart(start);\n actions.changeEnd(end);\n isUnselectable.current = false;\n\n if (!withButton) {\n endInputRef.current?.focusYearRef();\n\n actions.done({ start, end });\n onChange?.(start, end);\n return;\n }\n };\n\n const handleFixedRangeSelectionChange = (val: string) => {\n if (isDateUnselectable(val)) {\n isUnselectable.current = true;\n return;\n }\n\n actions.changeStart(val);\n calendarRef.current?.setCalendarDate(val);\n isUnselectable.current = false;\n\n if (!val) {\n if (withButton) {\n actions.changeEnd(\"\");\n } else {\n actions.resetRange({ start: \"\", end: \"\" });\n onChange?.(\"\", \"\");\n }\n return;\n }\n\n const start = dayjs(val).format(\"YYYY-MM-DD\");\n const end = dayjs(start)\n .add(numberOfDays - 1, \"day\")\n .format(\"YYYY-MM-DD\");\n actions.changeStart(start);\n actions.changeEnd(end);\n isUnselectable.current = false;\n\n if (!withButton) {\n actions.done({ start, end });\n startInputRef.current?.focusYearRef();\n\n onChange?.(start, end);\n return;\n }\n };\n\n const handleFocus = () => {\n if (isWeekSelection \|\| isFixedRangeSelection) {\n setIsEndDisabled(true);\n }\n\n if (isWeekSelection) {\n setIsStartDisabled(true);\n }\n\n if (readOnly \|\| disabled \|\| focused) return;\n\n actions.focus(\"start\");\n onFocus?.();\n };\n\n const handleBlur = (e: React.FocusEvent) => {\n const target = e.relatedTarget as HTMLElement;\n\n const isInsideCalendar =\n calendarRef.current && calendarRef.current.contains(target);\n const isInsideNode =\n nodeRef.current && nodeRef.current.contains(target);\n const isFloatingElement =\n target?.matches?.(\"[data-floating-ui-focusable]\") \|\|\n target?.matches?.(\"[data-floating-ui-focus-guard]\");\n\n // Condition when the calendar is closed and focus moved outside the component\n const shouldBlurWhenClosed =\n focused && !calendarOpen && !isInsideNode && !isFloatingElement;\n\n // Condition when the calendar is open, and focus went outside both input and calendar\n const shouldBlurWhenOpenOutside =\n calendarOpen &&\n !isInsideNode &&\n !isInsideCalendar &&\n !isFloatingElement;\n\n if (shouldBlurWhenClosed \|\| shouldBlurWhenOpenOutside) {\n actions.blur();\n\n setIsEndDisabled(false);\n setIsStartDisabled(false);\n\n startInputRef.current?.resetPlaceholder();\n endInputRef.current?.resetPlaceholder();\n\n performOnBlurHandler();\n }\n };\n\n const handleInputFocus =\n (focusType: FocusType) => (event: React.FocusEvent) => {\n event.stopPropagation();\n\n if (readOnly) return;\n\n actions.focus(focusType);\n\n handleWeekSelectionInputFocus();\n handleFixedRangeSelectionInputFocus();\n\n if (!focused) {\n onFocus?.();\n }\n };\n\n const handleWeekSelectionInputFocus = () => {\n if (isWeekSelection) {\n const firstDayOfWeek = DateHelper.toDayjs(selectedStart)\n .startOf(\"week\")\n .format(\"YYYY-MM-DD\");\n\n setIsStartDisabled(true);\n setIsEndDisabled(true);\n setInitialCalendarDate(firstDayOfWeek);\n }\n };\n\n const handleFixedRangeSelectionInputFocus = () => {\n if (isFixedRangeSelection) {\n setIsEndDisabled(true);\n setInitialCalendarDate(selectedStart);\n }\n };\n\n const handleStartInputBlur = (validFormat: boolean) => {\n if (!validFormat \|\| isUnselectable.current) {\n actions.resetStart();\n startInputRef.current?.resetInput();\n }\n };\n\n const handleEndInputBlur = (validFormat: boolean) => {\n if (!validFormat \|\| isUnselectable.current) {\n actions.resetEnd();\n endInputRef.current?.resetInput();\n }\n };\n\n const handleCalendarSelect = (val: string) => {\n switch (variant) {\n case \"week\":\n handleWeekSelectionChange(val);\n break;\n case \"fixed-range\":\n handleFixedRangeSelectionChange(val);\n break;\n default:\n if (currentFocus === \"start\") {\n handleStartDateChange(val);\n } else if (currentFocus === \"end\") {\n handleEndDateChange(val);\n }\n break;\n }\n };\n\n const handleCalendarDismiss = (action: CalendarAction) => {\n nodeRef.current?.focus();\n\n switch (action) {\n case \"reset\":\n actions.cancel();\n break;\n case \"confirmed\":\n actions.done({ start: selectedStart, end: selectedEnd });\n onChange?.(selectedStart, selectedEnd);\n\n if (isWeekSelection) break;\n\n if (isValidRange(selectedStart, selectedEnd)) {\n if (variant === \"range\") {\n endInputRef.current?.focusYearRef();\n } else {\n startInputRef.current?.focusYearRef();\n }\n }\n break;\n }\n };\n\n const handleCalendarHover = (val: string) => {\n setHoverValue(val);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const performOnBlurHandler = () => {\n if (onBlur) {\n onBlur();\n }\n };\n\n const isDateUnselectable = (val: string) => {\n return (\n !allowDisabledSelection &&\n val &&\n DateInputHelper.isDateDisabled(val, {\n disabledDates,\n minDate,\n maxDate,\n })\n );\n };\n\n const isValidRange = (startDate: string, endDate: string) => {\n if (!startDate \|\| !endDate) return false;\n return dayjs(startDate).isBefore(endDate, \"day\");\n };\n\n const getHoverValue = (getValue: Exclude<FocusType, \"none\">) => {\n let values: { start: string \| undefined; end: string \| undefined } = {\n start: undefined,\n end: undefined,\n };\n\n switch (variant) {\n case \"range\":\n values = {\n start: currentFocus === \"start\" ? hoverValue : undefined,\n end: currentFocus === \"end\" ? hoverValue : undefined,\n };\n break;\n case \"week\":\n if (!hoverValue) return;\n\n values = {\n start: dayjs(hoverValue)\n .startOf(\"week\")\n .format(\"YYYY-MM-DD\"),\n end: dayjs(hoverValue).endOf(\"week\").format(\"YYYY-MM-DD\"),\n };\n break;\n case \"fixed-range\":\n if (!hoverValue) return;\n\n values = {\n start: dayjs(hoverValue).format(\"YYYY-MM-DD\"),\n end: dayjs(hoverValue)\n .add(numberOfDays - 1, \"day\")\n .format(\"YYYY-MM-DD\"),\n };\n break;\n }\n return values[getValue];\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderInput = () => {\n return (\n <InputWrapper\n role=\"group\"\n ref={nodeRef}\n tabIndex={0}\n onFocus={handleFocus}\n onBlur={handleBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n id={id}\n data-testid={otherProps[\"data-testid\"]}\n aria-disabled={disabled}\n onKeyDown={handleNodeKeyDown}\n {...otherProps}\n className={clsx(\n shouldWrap && !readOnly && styles.containerWrap,\n shouldWrap && readOnly && styles.containerWrapReadOnly,\n otherProps.className\n )}\n >\n <RangeInputInnerContainer\n currentActive={currentFocus}\n wrap={shouldWrap}\n error={error}\n >\n <div\n className={clsx(\n styles.inputContainer,\n shouldWrap && styles.inputContainerWrap\n )}\n >\n <StandaloneDateInput\n ref={startInputRef}\n placeholder=\"From\"\n names={[\"start-day\", \"start-month\", \"start-year\"]}\n inputLabels={[\n \"Start Date\",\n \"Start Month\",\n \"Start Year\",\n ]}\n value={selectedStart}\n disabled={disabled}\n readOnly={isStartDisabled \|\| readOnly}\n focused={currentFocus === \"start\"}\n hoverValue={getHoverValue(\"start\")}\n onChange={\n isFixedRangeSelection\n ? handleFixedRangeSelectionChange\n : handleStartDateChange\n }\n onFocus={handleInputFocus(\"start\")}\n onBlur={handleStartInputBlur}\n hideInputKeyboard={hideInputKeyboard}\n />\n </div>\n <div\n className={clsx(\n styles.inputContainer,\n shouldWrap && styles.inputContainerWrap\n )}\n >\n <StandaloneDateInput\n ref={endInputRef}\n placeholder=\"To\"\n names={[\"end-day\", \"end-month\", \"end-year\"]}\n inputLabels={[\"End Date\", \"End Month\", \"End Year\"]}\n value={selectedEnd}\n disabled={disabled}\n readOnly={isEndDisabled \|\| readOnly}\n focused={currentFocus === \"end\"}\n hoverValue={getHoverValue(\"end\")}\n onChange={handleEndDateChange}\n onFocus={handleInputFocus(\"end\")}\n onBlur={handleEndInputBlur}\n hideInputKeyboard={hideInputKeyboard}\n />\n </div>\n </RangeInputInnerContainer>\n </InputWrapper>\n );\n };\n\n const renderCalendar = ({ elementWidth }: DropdownRenderProps) => {\n return (\n <CalendarDropdown\n ref={calendarRef}\n variant={variant}\n initialCalendarDate={initialCalendarDate}\n withButton={withButton}\n value={selectedStart}\n endValue={selectedEnd}\n selectWithinRange={isStartDirty \|\| isEndDirty}\n currentFocus={currentFocus}\n disabledDates={disabledDates}\n minDate={minDate}\n maxDate={maxDate}\n allowDisabledSelection={allowDisabledSelection}\n onSelect={handleCalendarSelect}\n onDismiss={handleCalendarDismiss}\n onHover={handleCalendarHover}\n onYearMonthDisplayChange={onYearMonthDisplayChange}\n numberOfDays={numberOfDays}\n width={elementWidth}\n isFocusable={!readOnly && !disabled}\n />\n );\n };\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={calendarOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n renderElement={renderInput}\n renderDropdown={renderCalendar}\n customZIndex={zIndex}\n offset={16}\n rootNode={rootNode}\n />\n );\n};\n"],"names":["INITIAL_STATE","initialStart","initialEnd","selectedStart","selectedEnd","currentFocus","calendarOpen","isStartDirty","isEndDirty","focused","DateRangeInput","_a","minDate","maxDate","disabled","disabledDates","error","hideInputKeyboard","value","valueEnd","onChange","onFocus","onBlur","onYearMonthDisplayChange","withButton","variant","numberOfDays","readOnly","id","allowDisabledSelection","zIndex","dropdownRootNode","rootNode","otherProps","__rest","initialCalendarDate","setInitialCalendarDate","useState","hoverValue","setHoverValue","undefined","isWeekSelection","isFixedRangeSelection","isStartDisabled","setIsStartDisabled","isEndDisabled","setIsEndDisabled","actions","useStateActions","name","initialState","reducers","blur","state","dismiss","Object","assign","changeStart","val","changeEnd","reselectStart","reselectEnd","focus","cancel","done","payload","start","end","resetStart","resetEnd","resetRange","isUnselectable","useRef","nodeRef","calendarRef","startInputRef","endInputRef","shouldWrap","useContainerQuery","maxWidth","styles.MOBILE_WRAP_WIDTH","targetRef","useEffect","DateInputHelper","sanitizeInput","handleNodeKeyDown","event","code","current","_b","resetPlaceholder","_c","handleStartDateChange","isDateUnselectable","setCalendarDate","dayjs","isAfter","handleEndDateChange","isBefore","focusYearRef","handleFixedRangeSelectionChange","format","add","handleFocus","handleBlur","e","target","relatedTarget","isInsideCalendar","contains","isInsideNode","isFloatingElement","matches","call","_d","performOnBlurHandler","handleInputFocus","focusType","stopPropagation","handleWeekSelectionInputFocus","handleFixedRangeSelectionInputFocus","firstDayOfWeek","DateHelper","toDayjs","startOf","handleStartInputBlur","validFormat","resetInput","handleEndInputBlur","handleCalendarSelect","endOf","handleWeekSelectionChange","handleCalendarDismiss","action","isValidRange","handleCalendarHover","isDateDisabled","startDate","endDate","getHoverValue","getValue","values","_jsx","ElementWithDropdown","enabled","isOpen","onClose","onDismiss","renderElement","InputWrapper","role","ref","tabIndex","onKeyDown","className","clsx","styles.containerWrap","styles.containerWrapReadOnly","_jsxs","RangeInputInnerContainer","currentActive","wrap","children","styles.inputContainer","styles.inputContainerWrap","StandaloneDateInput","placeholder","names","inputLabels","renderDropdown","elementWidth","CalendarDropdown","endValue","selectWithinRange","onSelect","onHover","width","isFocusable","customZIndex","offset"],"mappings":"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"}

package/date-range-input/date-range-input.styles.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+export declare const MOBILE_WRAP_WIDTH = 320;
+export declare const containerWrap: import("@linaria/core").LinariaClassName;
+export declare const containerWrapReadOnly: import("@linaria/core").LinariaClassName;
+export declare const inputContainer: import("@linaria/core").LinariaClassName;
+export declare const inputContainerWrap: import("@linaria/core").LinariaClassName;

package/date-range-input/date-range-input.styles.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import"./date-range-input.styles_1s7ojnj.css";const t=320,e="c13x59xx",n="cuva3df",s="i1b11tt2",a="iy4f6wr";export{t as MOBILE_WRAP_WIDTH,e as containerWrap,n as containerWrapReadOnly,s as inputContainer,a as inputContainerWrap};
2	+ //# sourceMappingURL=date-range-input.styles.js.map

package/date-range-input/date-range-input.styles.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"date-range-input.styles.js","sources":["../../src/date-range-input/date-range-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Spacing } from \"../theme\";\n\nexport const MOBILE_WRAP_WIDTH = 320;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const containerWrap = css`\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n`;\n\nexport const containerWrapReadOnly = css`\n padding: ${Spacing[\"spacing-12\"]} 0;\n`;\n\nexport const inputContainer = css`\n display: flex;\n align-items: center;\n height: calc(3rem - 2px); /* exclude top and bottom borders */\n width: 100%;\n`;\n\nexport const inputContainerWrap = css`\n height: fit-content;\n`;\n"],"names":["MOBILE_WRAP_WIDTH","containerWrap","containerWrapReadOnly","inputContainer","inputContainerWrap"],"mappings":"8EAIO,MAAMA,EAAoB,IAKpBC,EAAa,WAIbC,EAAqB,UAIrBC,EAAc,WAOdC,EAAkB"}

package/date-range-input/date-range-input.styles_1s7ojnj.css ADDED Viewed

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

package/divider/divider.d.ts CHANGED Viewed

@@ -1,2 +1,2 @@
 import type { DividerProps } from "./types";
-export declare const Divider: ({ thickness, lineStyle, layoutType, color, className, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, mobileCols, tabletCols, desktopCols, ...otherProps }: DividerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Divider: ({ thickness, lineStyle, layoutType, color, className, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/divider/divider.js CHANGED Viewed

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

package/divider/divider.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"divider.js","sources":["../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle, ~~useResolvedTokenValue~~ } from \"../theme\";\nimport { ~~isColourToken~~ } from \"../~~util~~/~~styling-helper~~\";\nimport { ~~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","Divider","_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":"~~8vBAUA~~,MAAMA,EAAqD,CACvDC,MAAOC,EACPC,OAAQC,GAGCC,EAAWC,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,EAAAjB,EAhBO,qKAkBpB,MAAMkB,~~EAAMC,EAAsB,MAE5BC,EAAiBC,EAAsB,CACzCC,~~MAAOlB~~,~~EACPmB~~,SAAUC,EAAe,OACzBC,QAASC,EACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,~~EAAc9B~~,EAAY,~~EAEhC+B~~,EAAcd,EAAK,CACf,CAACe,~~EAAchC~~,WAAY,GAAGA,MAC9B,~~CAACgC~~,~~EAAc7B~~,OAAQA,EACvB,~~CAAC6B~~,EAAcC,iBAAkB,~~gEACoBjC~~,~~qGAA6G4B~~,oBAA+BE,yCAGrM,~~MAAMI~~,~~OACaC,IAAfvB,QACeuB,IAAftB,QACgBsB,IAAhBrB,EAsBEsB,~~EAAYC,EAAKC,~~EAAiB7C~~,EAAaQ,IAErD,OAAQC,GACJ,IAAK,OACD,~~OACIqC~~,EAAA,KAAAC,OAAAC,OAAA,~~CACIxB~~,IAAKA,~~EACLb~~,~~UAAWiC~~,EAAKD,~~EAAWhC~~,~~IACvBW~~,IAGhB,IAAK,OACD,~~OAAImB~~,~~EAEIK,~~EAACG,~~EAASF~~,OAAAC,OAAA,~~CACNrC~~,UAAWA,~~EACXQ~~,~~WAAYA,EACZC,WAAYA,EACZC,YAAaA,GACTC,EAAU,CAAA4B,SAEdJ,QAAItB,IAAKA,EAAKb,UAAWgC,OAK7BG,EAACK,EAAMJ,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~~,EAAA,KAAA,~~CAAItB~~,IAAKA,~~EAAKb~~,~~UAAWgC~~"}
1	+ {"version":3,"file":"divider.js","sources":["../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport { useResolvedTokenValue } from \"../theme/utils\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n solid: styles.solidLine,\n dashed: styles.dashedLine,\n};\n\nexport const Divider = ({\n thickness = 1,\n lineStyle = \"solid\",\n layoutType = \"flex\",\n color,\n className,\n xxsCols,\n xsCols,\n smCols,\n mdCols,\n lgCols,\n xlCols,\n xxlCols,\n ...otherProps\n}: DividerProps) => {\n const ref = useRef<HTMLHRElement>(null);\n\n const effectiveColor = useResolvedTokenValue({\n value: color,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const encodedColor = encodeURIComponent(effectiveColor);\n const strokeWidth = thickness + 1; // best fit\n\n useApplyStyle(ref, {\n [styles.tokens.thickness]: `${thickness}px`,\n [styles.tokens.color]: color,\n [styles.tokens.backgroundImage]: `\n url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n });\n\n const getColumnProps = () => {\n const xxsColsProp = xxsCols \|\| [1, -1];\n const xsColsProp = xsCols \|\| xxsColsProp;\n const smColsProp = smCols \|\| xsColsProp;\n const mdColsProp = mdCols \|\| smColsProp;\n const lgColsProp = lgCols \|\| mdColsProp;\n const xlColsProp = xlCols \|\| lgColsProp;\n const xxlColsProp = xxlCols \|\| xlColsProp;\n\n return {\n xxlCols: xxlColsProp,\n xlCols: xlColsProp,\n lgCols: lgColsProp,\n mdCols: mdColsProp,\n smCols: smColsProp,\n xsCols: xsColsProp,\n xxsCols: xxsColsProp,\n };\n };\n\n const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n switch (layoutType) {\n case \"flex\":\n return (\n <hr\n ref={ref}\n className={clsx(lineClass, className)}\n {...otherProps}\n />\n );\n case \"grid\":\n return (\n <ColDiv\n className={className}\n {...getColumnProps()}\n {...otherProps}\n >\n <hr ref={ref} className={lineClass} />\n </ColDiv>\n );\n }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","Divider","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"ovBAUA,MAAMA,EAAqD,CACvDC,MAAOC,EACPC,OAAQC,GAGCC,EAAWC,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAsB,MAE5BC,EAAiBC,EAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAe,OACzBC,QAASC,EACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAcd,EAAK,CACf,CAACe,EAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAc1B,OAAQA,EACvB,CAAC0B,EAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAKC,EAAiBxC,EAAaQ,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAACG,EAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}

package/divider/types.d.ts CHANGED Viewed

@@ -1,8 +1,7 @@
 import type { ColProps } from "../layout";
-import type { V2_ColProps } from "../v2_layout/types";
 export type DividerLineStyleType = "solid" | "dashed";
 type DividerLayoutType = "flex" | "grid";
-export interface DividerProps extends ColProps, V2_ColProps, Omit<React.HTMLAttributes<HTMLElement>, "color"> {
+export interface DividerProps extends ColProps, Omit<React.HTMLAttributes<HTMLElement>, "color"> {
     /** The thickness of the Divider in px */
     thickness?: number | undefined;
     /** The line display style type. Values: "solid" | "dashed" */

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

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

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

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

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

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

package/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 { 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","import","AddSignatureButton","EditSignatureButton","ESignatureContainer","ESignatureDrawable","GrowContainer","Instructions","ModalActionButton","ModalBox","ModalButtons","ModalTitle","ProgressBox","ScrollableModal","SignatureArea","SignatureLine","SignaturePreviewImage","styles","ESignature","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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"}
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, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { DashedBorder } from \"../dashed-border\";\nimport { Modal } from \"../modal\";\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport {\n Border,\n Breakpoint,\n Colour,\n Radius,\n useMaxWidthMediaQuery,\n useMediaQuery,\n useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\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\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 isMobile = useMaxWidthMediaQuery(\"sm\");\n const mobileBreakpoint = useResolvedBreakpointToken(Breakpoint[\"sm-max\"]);\n const isMobileLandscape = useMediaQuery({\n clauses: [\n {\n feature: \"orientation\",\n value: \"landscape\",\n },\n {\n feature: \"max-height\",\n value: mobileBreakpoint,\n },\n ],\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 <Button\n className={styles.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 </Button>\n );\n }\n\n return (\n <>\n <img\n className={styles.signaturePreviewImage}\n src={dataURL}\n alt=\"Signature preview\"\n />\n <Button\n className={styles.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 <div className={styles.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 </div>\n );\n };\n\n const renderModal = () => {\n return (\n <Modal\n className={styles.scrollableModal}\n data-testid=\"signature-modal\"\n show={showModal}\n >\n <div\n className={styles.growContainer}\n data-mobile-landscape={isMobileLandscape}\n >\n <Modal.Box\n className={styles.modalBox}\n data-mobile-landscape={isMobileLandscape}\n onClose={() => setShowModal(false)}\n >\n <h2\n className={styles.modalTitle}\n data-mobile-landscape={isMobileLandscape}\n >\n Signature\n </h2>\n <div\n className={styles.eSignatureContainer}\n data-mobile-landscape={isMobileLandscape}\n >\n <div\n className={styles.eSignatureDrawable}\n data-mobile-landscape={isMobileLandscape}\n >\n <div\n className={styles.signatureLine}\n data-mobile-landscape={isMobileLandscape}\n />\n <Suspense fallback={null}>\n {showModal && (\n <ESignatureCanvas\n ref={eSignatureCanvasRef}\n baseImageDataURL={dataURL}\n />\n )}\n </Suspense>\n </div>\n </div>\n <div\n className={styles.modalButtons}\n data-mobile-landscape={isMobileLandscape}\n >\n <Button\n className={styles.modalActionButton}\n data-mobile-landscape={isMobileLandscape}\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 </Button>\n <Button\n className={styles.modalActionButton}\n data-mobile-landscape={isMobileLandscape}\n sizeType={\n isMobileLandscape ? \"small\" : \"default\"\n }\n type=\"button\"\n onClick={handleClickSave}\n >\n Save\n </Button>\n </div>\n </Modal.Box>\n </div>\n </Modal>\n );\n };\n\n const renderDescription = () => {\n if (!description) return null;\n return (\n <Typography.BodySM className={styles.instructions}>\n {description}\n </Typography.BodySM>\n );\n };\n\n return (\n <div {...otherProps}>\n <DashedBorder\n className={styles.signatureArea}\n thickness={Border[\"width-040\"]}\n radius={Radius[\"sm\"]}\n colour={disabled ? Colour[\"border-disabled\"] : Colour[\"border\"]}\n backgroundColor={\n disabled ? Colour[\"bg-disabled\"] : Colour[\"bg\"]\n }\n >\n {typeof loadingProgress === \"number\"\n ? renderLoadingIndicator()\n : renderSignatureArea()}\n </DashedBorder>\n {renderModal()}\n {renderDescription()}\n </div>\n );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","import","ESignature","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","isMobile","useMaxWidthMediaQuery","mobileBreakpoint","useResolvedBreakpointToken","Breakpoint","isMobileLandscape","useMediaQuery","clauses","feature","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","DashedBorder","className","styles.signatureArea","thickness","Border","radius","Radius","colour","Colour","backgroundColor","styles.progressBox","Typography","BodyMD","ProgressBar","progress","_Fragment","styles.signaturePreviewImage","src","alt","Button","styles.editSignatureButton","styleType","onClick","icon","PencilIcon","styles.addSignatureButton","type","Modal","styles.scrollableModal","show","styles.growContainer","Box","styles.modalBox","onClose","styles.modalTitle","styles.eSignatureContainer","styles.eSignatureDrawable","styles.signatureLine","Suspense","fallback","ref","baseImageDataURL","styles.modalButtons","styles.modalActionButton","sizeType","EraserIcon","BodySM","styles.instructions"],"mappings":"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"}

package/e-signature/e-signature.styles.d.ts CHANGED Viewed

@@ -1,45 +1,17 @@
-interface SignatureAreaProps {
-    $disabled: boolean | undefined;
-}
-export declare const SignatureArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, keyof import("..").DashedBorderProps | keyof import("react").RefAttributes<HTMLDivElement>> & import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, "$disabled"> & SignatureAreaProps, "$disabled"> & SignatureAreaProps, "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "backgroundColor" | "colour" | "enabled" | "radius" | "thickness" | "key" | "$disabled"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, keyof import("..").DashedBorderProps | keyof import("react").RefAttributes<HTMLDivElement>> & import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, "$disabled"> & SignatureAreaProps, "$disabled"> & SignatureAreaProps, "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "backgroundColor" | "colour" | "enabled" | "radius" | "thickness" | "key" | "$disabled">>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const AddSignatureButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const EditSignatureButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<((props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
-    Default: (props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Small: (props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-    Large: (props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const SignaturePreviewImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
-export declare const ProgressBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const Instructions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
-    weight?: import("..").TypographyWeight | undefined;
-    inline?: boolean | undefined;
-    paragraph?: boolean | undefined;
-    maxLines?: number | undefined;
-    as?: import("react").ElementType<any> | undefined;
-} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ScrollableModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalProps, never> & Partial<Pick<import("..").ModalProps, never>>> & string & Omit<(({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, className, ...otherProps }: import("..").ModalProps) => JSX.Element) & {
-    Box: (props: import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const GrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ModalBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const ModalTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
-export declare const ESignatureContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ESignatureDrawable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const SignatureLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ModalButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const ModalActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const SignatureCanvasContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
-export declare const SignatureCanvas: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never>>> & string;
-export {};
+export declare const signatureArea: import("@linaria/core").LinariaClassName;
+export declare const addSignatureButton: import("@linaria/core").LinariaClassName;
+export declare const editSignatureButton: import("@linaria/core").LinariaClassName;
+export declare const signaturePreviewImage: import("@linaria/core").LinariaClassName;
+export declare const progressBox: import("@linaria/core").LinariaClassName;
+export declare const instructions: import("@linaria/core").LinariaClassName;
+export declare const scrollableModal: import("@linaria/core").LinariaClassName;
+export declare const growContainer: import("@linaria/core").LinariaClassName;
+export declare const modalBox: import("@linaria/core").LinariaClassName;
+export declare const modalTitle: import("@linaria/core").LinariaClassName;
+export declare const eSignatureContainer: import("@linaria/core").LinariaClassName;
+export declare const eSignatureDrawable: import("@linaria/core").LinariaClassName;
+export declare const signatureLine: import("@linaria/core").LinariaClassName;
+export declare const modalButtons: import("@linaria/core").LinariaClassName;
+export declare const modalActionButton: import("@linaria/core").LinariaClassName;
+export declare const signatureCanvasContainer: import("@linaria/core").LinariaClassName;
+export declare const signatureCanvas: import("@linaria/core").LinariaClassName;