npm - @lifesg/react-design-system - Versions diffs - 4.0.0-alpha.6 → 4.0.0-alpha.7 - Mend

@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.7

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

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

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

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

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

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

package/cjs/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, 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\n/*\n A field that lets users draw and save a signature.\n \n Use in forms that require a handwritten signature.\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","Promise","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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"}
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\n// @catalog\n/*\n A field that lets users draw and save a signature.\n \n Use in forms that require a handwritten signature.\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","Promise","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":"y7BAsBA,MAAMA,EAAmBC,EAAAA,MAAK,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACtCC,eAAgBC,kDAAO,0BAAsB,KAAGJ,iBAClD,yBAQyBK,IAIvB,MAAMC,YACFA,EAAWC,GACXA,EAAEC,gBACFA,EAAeC,aACfA,EAAe,eAAcC,SAC7BA,EAAQC,MACRA,EAAKC,SACLA,GAEAP,EADGQ,EAAUC,SACbT,EATE,CAAA,cAAA,KAAA,kBAAA,eAAA,WAAA,QAAA,cAUCU,EAAWC,GAAgBC,EAAAA,UAAS,GACrCC,EAAsBC,EAAAA,OAA4B,OACjDC,EAASC,GAAcJ,EAAAA,SAAoCN,GAC5DW,EAAWC,EAAAA,sBAAsB,MACjCC,EAAmBC,EAAAA,2BAA2BC,EAAAA,WAAW,WACzDC,EAAoBC,EAAAA,cAAc,CACpCC,QAAS,CACL,CACIC,QAAS,cACTnB,MAAO,aAEX,CACImB,QAAS,aACTnB,MAAOa,MAQbO,EAAqB,WACI,QAA3BC,EAAAd,EAAoBe,eAAO,IAAAD,GAAAA,EAAEE,OAAO,EAGlCC,EAAkB,KACpB,GAAIjB,EAAoBe,QAAS,CAC7B,MAAMb,EAAUF,EAAoBe,QAAQG,SAC5Cf,EAAWD,GACXJ,GAAa,GACbN,SAAAA,EAAWU,EACf,GAMJiB,EAAAA,WAAU,KACNhB,EAAWV,EAAM,GAClB,CAACA,IAoJJ,OACI2B,EAAAA,KAAA,MAAAC,OAAAC,OAAA,GAAS3B,EAAU,CAAA4B,SAAA,CACfC,EAAAA,IAACC,EAAAA,aAAY,CACTC,UAAWC,EAAAA,cACXC,UAAWC,SAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQtC,EAAWuC,EAAAA,OAAO,mBAAqBA,EAAAA,OAAe,OAC9DC,gBACIxC,EAAWuC,EAAAA,OAAO,eAAiBA,EAAAA,OAAW,GAACV,SAGvB,iBAApBjC,EAnHZ8B,EAAAA,KAAA,MAAA,CAAKM,UAAWS,EAAAA,YAAkBZ,SAAA,CAC7BhC,GACGiC,EAAAA,IAACY,EAAAA,WAAWC,OAAM,CAAAd,SAAEhC,IAExBiC,EAAAA,IAACc,EAAAA,aACGC,SAAUjD,QAAAA,EAAmB,EAAC,cACjB,GAAGD,GAAM,kCA5C7Ba,EAiBDkB,EAAAA,KAAAoB,EAAAA,SAAA,CAAAjB,SAAA,CACIC,MAAA,MAAA,CACIE,UAAWe,EAAAA,sBACXC,IAAKxC,EACLyC,IAAI,sBAERnB,MAACoB,EAAAA,OAAM,CACHlB,UAAWmB,EAAAA,oBACXC,UAAU,QACVC,QAAS,IAAMjD,GAAa,GAC5BT,GAAIA,EACJ2D,KAAMxB,EAAAA,IAACyB,aAAU,CAAA,GAAG,aACT,iBACXvD,SAAUA,OA5Bd8B,EAAAA,IAACoB,SAAM,CACHlB,UAAWwB,EAAAA,mBACXC,KAAK,SACLL,UAAU,YAAW,aACV,gBACXzD,GAAIA,EACJ0D,QAAS,IAAMjD,GAAa,GAC5BJ,SAAUA,EAAQ6B,SAAA,oBA2C1BC,MAAC4B,EAAAA,MAAK,CACF1B,UAAW2B,EAAAA,8BACC,kBACZC,KAAMzD,EAAS0B,SAEfC,EAAAA,IAAA,MAAA,CACIE,UAAW6B,gBAAoB,wBACR9C,WAEvBW,EAAAA,KAACgC,QAAMI,KACH9B,UAAW+B,EAAAA,SAAe,wBACHhD,EACvBiD,QAAS,IAAM5D,GAAa,GAAMyB,SAAA,CAElCC,EAAAA,UACIE,UAAWiC,EAAAA,WAAiB,wBACLlD,EAAiBc,SAAA,cAI5CC,EAAAA,WACIE,UAAWkC,EAAAA,oBAA0B,wBACdnD,EAAiBc,SAExCH,EAAAA,KAAA,MAAA,CACIM,UAAWmC,EAAAA,2CACYpD,EAAiBc,SAAA,CAExCC,EAAAA,IAAA,MAAA,CACIE,UAAWoC,EAAAA,sCACYrD,IAE3Be,EAAAA,IAACuC,EAAAA,SAAQ,CAACC,SAAU,cACfnE,GACG2B,EAAAA,IAAC1C,EAAgB,CACbmF,IAAKjE,EACLkE,iBAAkBhE,WAMtCkB,cACIM,UAAWyC,eAAmB,wBACP1D,EAAiBc,SAAA,CAExCC,EAAAA,IAACoB,EAAAA,OAAM,CACHlB,UAAW0C,oBAAwB,wBACZ3D,EACvB4D,SACI5D,EAAoB,QAAU,UAElC0C,KAAK,SACLL,UACI1C,IAAaK,EACP,QACA,OAEVuC,KAAMxB,EAAAA,IAAC8C,EAAAA,WAAU,CAAA,GACjBvB,QAASlC,EAAkBU,SAAA,UAI/BC,EAAAA,IAACoB,EAAAA,OAAM,CACHlB,UAAW0C,EAAAA,kBAAwB,wBACZ3D,EACvB4D,SACI5D,EAAoB,QAAU,UAElC0C,KAAK,SACLJ,QAAS9B,EAAeM,SAAA,mBAY3CnC,EAEDoC,EAAAA,IAACY,EAAAA,WAAWmC,OAAM,CAAC7C,UAAW8C,eAAmBjD,SAC5CnC,IAHgB,QAyBnB"}

package/cjs/error-display/error-display.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"error-display.js","sources":["../../../src/error-display/error-display.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useContext } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./error-display.styles\";\nimport { getErrorDisplayData } from \"./error-display-data\";\nimport { InactivityTimer } from \"./inactivity-timer\";\nimport type {\n ErrorDisplayProps,\n InactivityAdditionalAttributes,\n MaintenanceAdditionalAttributes,\n} from \"./types\";\n\n/*\n Displays a predefined error or status state with an illustration, title,\n * description, and optional action button.\n \n Use `ErrorDisplay` to communicate HTTP error codes, session lifecycle states,\n * maintenance windows, and other system-level statuses to users.\n */\nexport const ErrorDisplay = ({\n type,\n img,\n title,\n description,\n actionButton,\n additionalProps,\n imageOnly,\n illustrationScheme,\n className,\n ...otherProps\n}: ErrorDisplayProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const theme = useContext(ThemeContext);\n const defaultAssets = getErrorDisplayData(\n type,\n illustrationScheme \|\| theme?.theme \|\| \"lifesg\"\n );\n const inactivityAttrs =\n type === \"inactivity\"\n ? (additionalProps as InactivityAdditionalAttributes \| undefined)\n : undefined;\n\n const secondsLeft = inactivityAttrs?.secondsLeft;\n const reminderInterval = inactivityAttrs?.reminderInterval;\n const testId = otherProps[\"data-testid\"] \|\| \"error-display\";\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getCustomDescription = (): string \| JSX.Element \| undefined => {\n switch (type) {\n case \"maintenance\": {\n const typecastProps =\n additionalProps as MaintenanceAdditionalAttributes;\n return additionalProps && typecastProps.dateString\n ? defaultAssets?.renderDescription?.(typecastProps)\n : description \|\| undefined;\n }\n case \"inactivity\": {\n const typecastProps =\n additionalProps as InactivityAdditionalAttributes;\n return additionalProps && typecastProps.secondsLeft\n ? defaultAssets?.renderDescription?.(typecastProps)\n : description \|\| undefined;\n }\n default:\n return description \|\| undefined;\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n if (!defaultAssets) {\n return null;\n }\n\n const renderActionButton = () => {\n const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n children: \"Proceed\",\n ...actionButton,\n };\n\n return <Button className={styles.actionButton} {...buttonProps} />;\n };\n\n const updatedAssets = {\n ...defaultAssets,\n ...(img && { img }),\n ...(title && { title }),\n ...(getCustomDescription() && { description: getCustomDescription() }),\n };\n\n const renderContentDisplay = () => {\n if (updatedAssets.title \|\| updatedAssets.description) {\n return (\n <div className={styles.textContainer}>\n {updatedAssets.title &&\n (typeof updatedAssets.title === \"string\" ? (\n <Typography.HeadingMD\n className={styles.title}\n data-testid={`${testId}--title`}\n data-id=\"error-display-title\"\n as=\"h2\"\n weight=\"semibold\"\n >\n {updatedAssets.title}\n </Typography.HeadingMD>\n ) : (\n updatedAssets.title\n ))}\n {updatedAssets.description && (\n <Markup\n className={styles.descriptionContainer}\n data-testid={`${testId}--description`}\n data-id=\"error-display-description\"\n baseTextSize=\"body-baseline\"\n >\n {typeof updatedAssets.description === \"string\" ? (\n <p>{updatedAssets.description}</p>\n ) : (\n updatedAssets.description\n )}\n </Markup>\n )}\n </div>\n );\n }\n\n return null;\n };\n\n return (\n <div\n {...otherProps}\n data-testid={testId}\n className={clsx(styles.container, className)}\n >\n {type === \"inactivity\" && (\n <InactivityTimer\n secondsLeft={secondsLeft}\n reminderInterval={reminderInterval}\n imageOnly={imageOnly}\n hasCustomDescription={!!description}\n />\n )}\n <img\n {...updatedAssets.img}\n alt=\"\"\n data-id=\"error-display-image\"\n className={clsx(styles.img, updatedAssets.img?.className)}\n />\n {!imageOnly && renderContentDisplay()}\n {actionButton && renderActionButton()}\n </div>\n );\n};\n"],"names":["_a","type","img","title","description","actionButton","additionalProps","imageOnly","illustrationScheme","className","otherProps","__rest","theme","useContext","ThemeContext","defaultAssets","getErrorDisplayData","inactivityAttrs","undefined","secondsLeft","reminderInterval","testId","getCustomDescription","typecastProps","dateString","renderDescription","call","_b","updatedAssets","Object","assign","_jsxs","clsx","styles.container","children","_jsx","InactivityTimer","hasCustomDescription","alt","styles.img","styles.textContainer","Typography","HeadingMD","styles.title","as","weight","Markup","styles.descriptionContainer","baseTextSize","buttonProps","Button","styles.actionButton","renderActionButton"],"mappings":"~~qeAwB6BA~~,WAAAC,KACzBA,EAAIC,IACJA,EAAGC,MACHA,EAAKC,YACLA,EAAWC,aACXA,EAAYC,gBACZA,EAAeC,UACfA,EAASC,mBACTA,EAAkBC,UAClBA,KACGC,EAAUC,EAAAA,OAAAX,EAVY,CAAA,OAAA,MAAA,QAAA,cAAA,eAAA,kBAAA,YAAA,qBAAA,cAezB,MAAMY,EAAQC,EAAAA,WAAWC,gBACnBC,EAAgBC,EAAAA,oBAClBf,EACAO,IAAsBI,aAAK,EAALA,EAAOA,QAAS,UAEpCK,EACO,eAAThB,EACOK,OACDY,EAEJC,EAAcF,aAAe,EAAfA,EAAiBE,YAC/BC,EAAmBH,aAAe,EAAfA,EAAiBG,iBACpCC,EAASX,EAAW,gBAAkB,gBAKtCY,EAAuB,aACzB,OAAQrB,GACJ,IAAK,cAAe,CAChB,MAAMsB,EACFjB,EACJ,OAAOA,GAAmBiB,EAAcC,WACF,QAAhCxB,EAAAe,aAAa,EAAbA,EAAeU,yBAAiB,IAAAzB,OAAA,EAAAA,EAAA0B,KAAAX,EAAGQ,GACnCnB,QAAec,CACzB,CACA,IAAK,aAAc,CACf,MAAMK,EACFjB,EACJ,OAAOA,GAAmBiB,EAAcJ,YACF,QAAhCQ,EAAAZ,aAAa,EAAbA,EAAeU,yBAAiB,IAAAE,OAAA,EAAAA,EAAAD,KAAAX,EAAGQ,GACnCnB,QAAec,CACzB,CACA,QACI,OAAOd,QAAec,IAOlC,IAAKH,EACD,OAAO,KAGX,MASMa,EAAaC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACZf,GACCb,GAAO,CAAEA,QACTC,GAAS,CAAEA,UACXmB,KAA0B,CAAElB,YAAakB,MA0CjD,OACIS,EAAAA,KAAA,MAAAF,OAAAC,OAAA,CAAA,EACQpB,iBACSW,EACbZ,UAAWuB,EAAAA,QAAKC,EAAAA,UAAkBxB,GAAUyB,SAAA,CAElC,eAATjC,GACGkC,EAAAA,IAACC,EAAAA,gBAAe,CACZjB,YAAaA,EACbC,iBAAkBA,EAClBb,UAAWA,EACX8B,uBAAwBjC,IAGhC+B,EAAAA,IAAA,MAAAN,OAAAC,OAAA,CAAA,EACQF,EAAc1B,IAAG,CACrBoC,IAAI,GAAE,UACE,sBACR7B,UAAWuB,EAAAA,QAAKO,EAAAA,IAA6B,QAAjBZ,EAAAC,EAAc1B,WAAG,IAAAyB,OAAA,EAAAA,EAAElB,eAEjDF,IA1DFqB,EAAczB,OAASyB,EAAcxB,YAEjC2B,EAAAA,KAAA,MAAA,CAAKtB,UAAW+B,EAAAA,cAAoBN,SAAA,CAC/BN,EAAczB,QACqB,iBAAxByB,EAAczB,MAClBgC,EAAAA,IAACM,EAAAA,WAAWC,WACRjC,UAAWkC,EAAAA,MAAY,cACV,GAAGtB,qBACR,sBACRuB,GAAG,KACHC,OAAO,WAAUX,SAEhBN,EAAczB,QAGnByB,EAAmB,OAE1BA,EAAcxB,aACX+B,MAACW,EAAAA,QACGrC,UAAWsC,uBAA2B,cACzB,GAAG1B,2BACR,4BACR2B,aAAa,gBAAed,SAEU,iBAA9BN,EAAcxB,YAClB+B,EAAAA,IAAA,IAAA,CAAAD,SAAIN,EAAcxB,cAElBwB,EAAyB,iBAQ1C,MAwBFvB,GA5EkB,MACvB,MAAM4C,iBACFf,SAAU,WACP7B,GAGP,OAAO8B,EAAAA,IAACe,EAAAA,OAAMrB,OAAAC,OAAA,CAACrB,UAAW0C,EAAAA,cAAyBF,GAAe,EAsE7CG,MACf"}
1	+ {"version":3,"file":"error-display.js","sources":["../../../src/error-display/error-display.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useContext } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./error-display.styles\";\nimport { getErrorDisplayData } from \"./error-display-data\";\nimport { InactivityTimer } from \"./inactivity-timer\";\nimport type {\n ErrorDisplayProps,\n InactivityAdditionalAttributes,\n MaintenanceAdditionalAttributes,\n} from \"./types\";\n\n// @catalog\n/*\n Displays a predefined error or status state with an illustration, title,\n * description, and optional action button.\n \n Use `ErrorDisplay` to communicate HTTP error codes, session lifecycle states,\n * maintenance windows, and other system-level statuses to users.\n */\nexport const ErrorDisplay = ({\n type,\n img,\n title,\n description,\n actionButton,\n additionalProps,\n imageOnly,\n illustrationScheme,\n className,\n ...otherProps\n}: ErrorDisplayProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const theme = useContext(ThemeContext);\n const defaultAssets = getErrorDisplayData(\n type,\n illustrationScheme \|\| theme?.theme \|\| \"lifesg\"\n );\n const inactivityAttrs =\n type === \"inactivity\"\n ? (additionalProps as InactivityAdditionalAttributes \| undefined)\n : undefined;\n\n const secondsLeft = inactivityAttrs?.secondsLeft;\n const reminderInterval = inactivityAttrs?.reminderInterval;\n const testId = otherProps[\"data-testid\"] \|\| \"error-display\";\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getCustomDescription = (): string \| JSX.Element \| undefined => {\n switch (type) {\n case \"maintenance\": {\n const typecastProps =\n additionalProps as MaintenanceAdditionalAttributes;\n return additionalProps && typecastProps.dateString\n ? defaultAssets?.renderDescription?.(typecastProps)\n : description \|\| undefined;\n }\n case \"inactivity\": {\n const typecastProps =\n additionalProps as InactivityAdditionalAttributes;\n return additionalProps && typecastProps.secondsLeft\n ? defaultAssets?.renderDescription?.(typecastProps)\n : description \|\| undefined;\n }\n default:\n return description \|\| undefined;\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n if (!defaultAssets) {\n return null;\n }\n\n const renderActionButton = () => {\n const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n children: \"Proceed\",\n ...actionButton,\n };\n\n return <Button className={styles.actionButton} {...buttonProps} />;\n };\n\n const updatedAssets = {\n ...defaultAssets,\n ...(img && { img }),\n ...(title && { title }),\n ...(getCustomDescription() && { description: getCustomDescription() }),\n };\n\n const renderContentDisplay = () => {\n if (updatedAssets.title \|\| updatedAssets.description) {\n return (\n <div className={styles.textContainer}>\n {updatedAssets.title &&\n (typeof updatedAssets.title === \"string\" ? (\n <Typography.HeadingMD\n className={styles.title}\n data-testid={`${testId}--title`}\n data-id=\"error-display-title\"\n as=\"h2\"\n weight=\"semibold\"\n >\n {updatedAssets.title}\n </Typography.HeadingMD>\n ) : (\n updatedAssets.title\n ))}\n {updatedAssets.description && (\n <Markup\n className={styles.descriptionContainer}\n data-testid={`${testId}--description`}\n data-id=\"error-display-description\"\n baseTextSize=\"body-baseline\"\n >\n {typeof updatedAssets.description === \"string\" ? (\n <p>{updatedAssets.description}</p>\n ) : (\n updatedAssets.description\n )}\n </Markup>\n )}\n </div>\n );\n }\n\n return null;\n };\n\n return (\n <div\n {...otherProps}\n data-testid={testId}\n className={clsx(styles.container, className)}\n >\n {type === \"inactivity\" && (\n <InactivityTimer\n secondsLeft={secondsLeft}\n reminderInterval={reminderInterval}\n imageOnly={imageOnly}\n hasCustomDescription={!!description}\n />\n )}\n <img\n {...updatedAssets.img}\n alt=\"\"\n data-id=\"error-display-image\"\n className={clsx(styles.img, updatedAssets.img?.className)}\n />\n {!imageOnly && renderContentDisplay()}\n {actionButton && renderActionButton()}\n </div>\n );\n};\n"],"names":["_a","type","img","title","description","actionButton","additionalProps","imageOnly","illustrationScheme","className","otherProps","__rest","theme","useContext","ThemeContext","defaultAssets","getErrorDisplayData","inactivityAttrs","undefined","secondsLeft","reminderInterval","testId","getCustomDescription","typecastProps","dateString","renderDescription","call","_b","updatedAssets","Object","assign","_jsxs","clsx","styles.container","children","_jsx","InactivityTimer","hasCustomDescription","alt","styles.img","styles.textContainer","Typography","HeadingMD","styles.title","as","weight","Markup","styles.descriptionContainer","baseTextSize","buttonProps","Button","styles.actionButton","renderActionButton"],"mappings":"qeAyB6BA,WAAAC,KACzBA,EAAIC,IACJA,EAAGC,MACHA,EAAKC,YACLA,EAAWC,aACXA,EAAYC,gBACZA,EAAeC,UACfA,EAASC,mBACTA,EAAkBC,UAClBA,KACGC,EAAUC,EAAAA,OAAAX,EAVY,CAAA,OAAA,MAAA,QAAA,cAAA,eAAA,kBAAA,YAAA,qBAAA,cAezB,MAAMY,EAAQC,EAAAA,WAAWC,gBACnBC,EAAgBC,EAAAA,oBAClBf,EACAO,IAAsBI,aAAK,EAALA,EAAOA,QAAS,UAEpCK,EACO,eAAThB,EACOK,OACDY,EAEJC,EAAcF,aAAe,EAAfA,EAAiBE,YAC/BC,EAAmBH,aAAe,EAAfA,EAAiBG,iBACpCC,EAASX,EAAW,gBAAkB,gBAKtCY,EAAuB,aACzB,OAAQrB,GACJ,IAAK,cAAe,CAChB,MAAMsB,EACFjB,EACJ,OAAOA,GAAmBiB,EAAcC,WACF,QAAhCxB,EAAAe,aAAa,EAAbA,EAAeU,yBAAiB,IAAAzB,OAAA,EAAAA,EAAA0B,KAAAX,EAAGQ,GACnCnB,QAAec,CACzB,CACA,IAAK,aAAc,CACf,MAAMK,EACFjB,EACJ,OAAOA,GAAmBiB,EAAcJ,YACF,QAAhCQ,EAAAZ,aAAa,EAAbA,EAAeU,yBAAiB,IAAAE,OAAA,EAAAA,EAAAD,KAAAX,EAAGQ,GACnCnB,QAAec,CACzB,CACA,QACI,OAAOd,QAAec,IAOlC,IAAKH,EACD,OAAO,KAGX,MASMa,EAAaC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACZf,GACCb,GAAO,CAAEA,QACTC,GAAS,CAAEA,UACXmB,KAA0B,CAAElB,YAAakB,MA0CjD,OACIS,EAAAA,KAAA,MAAAF,OAAAC,OAAA,CAAA,EACQpB,iBACSW,EACbZ,UAAWuB,EAAAA,QAAKC,EAAAA,UAAkBxB,GAAUyB,SAAA,CAElC,eAATjC,GACGkC,EAAAA,IAACC,EAAAA,gBAAe,CACZjB,YAAaA,EACbC,iBAAkBA,EAClBb,UAAWA,EACX8B,uBAAwBjC,IAGhC+B,EAAAA,IAAA,MAAAN,OAAAC,OAAA,CAAA,EACQF,EAAc1B,IAAG,CACrBoC,IAAI,GAAE,UACE,sBACR7B,UAAWuB,EAAAA,QAAKO,EAAAA,IAA6B,QAAjBZ,EAAAC,EAAc1B,WAAG,IAAAyB,OAAA,EAAAA,EAAElB,eAEjDF,IA1DFqB,EAAczB,OAASyB,EAAcxB,YAEjC2B,EAAAA,KAAA,MAAA,CAAKtB,UAAW+B,EAAAA,cAAoBN,SAAA,CAC/BN,EAAczB,QACqB,iBAAxByB,EAAczB,MAClBgC,EAAAA,IAACM,EAAAA,WAAWC,WACRjC,UAAWkC,EAAAA,MAAY,cACV,GAAGtB,qBACR,sBACRuB,GAAG,KACHC,OAAO,WAAUX,SAEhBN,EAAczB,QAGnByB,EAAmB,OAE1BA,EAAcxB,aACX+B,MAACW,EAAAA,QACGrC,UAAWsC,uBAA2B,cACzB,GAAG1B,2BACR,4BACR2B,aAAa,gBAAed,SAEU,iBAA9BN,EAAcxB,YAClB+B,EAAAA,IAAA,IAAA,CAAAD,SAAIN,EAAcxB,cAElBwB,EAAyB,iBAQ1C,MAwBFvB,GA5EkB,MACvB,MAAM4C,iBACFf,SAAU,WACP7B,GAGP,OAAO8B,EAAAA,IAACe,EAAAA,OAAMrB,OAAAC,OAAA,CAACrB,UAAW0C,EAAAA,cAAyBF,GAAe,EAsE7CG,MACf"}

package/cjs/feedback-rating/feedback-rating.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"feedback-rating.js","sources":["../../../src/feedback-rating/feedback-rating.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./feedback-rating.styles\";\nimport { FeedbackRatingData } from \"./feedback-rating-data\";\nimport { FeedbackRatingStarsContainer } from \"./feedback-rating-stars-container\";\nimport type { FeedbackRatingProps } from \"./types\";\n\n/*\n A star-rating widget for collecting user feedback.\n \n Use `FeedbackRating` to prompt users for a 1–5 star rating.\n * The submit button remains disabled until a star is selected.\n */\nexport const FeedbackRating = (props: FeedbackRatingProps): JSX.Element => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const {\n imgSrc,\n buttonLabel,\n description,\n rating,\n onRatingChange,\n onSubmit,\n className,\n id,\n \"data-testid\": testId,\n ...otherProps\n } = props;\n const [hasImageError, setHasImageError] = useState(false);\n const imgRef = useRef<HTMLImageElement>(null);\n const internalId = useId();\n const descriptionId = `${internalId}-description`;\n const bannerSrc = imgSrc ?? FeedbackRatingData.IMG;\n const componentDescription =\n description ?? FeedbackRatingData.DEFAULT_DESCRIPTION;\n const resolvedButtonLabel =\n buttonLabel ?? FeedbackRatingData.DEFAULT_BUTTON_LABEL;\n const isSubmitDisabled = !rating;\n\n useEffect(() => {\n setHasImageError(false);\n\n if (imgRef.current?.complete && imgRef.current.naturalWidth === 0) {\n setHasImageError(true);\n }\n }, [bannerSrc]);\n\n const handleImgError = () => {\n setHasImageError(true);\n };\n\n return (\n <div\n role=\"group\"\n aria-labelledby={internalId}\n className={clsx(styles.mainContainer, className)}\n id={id}\n data-testid={testId}\n {...otherProps}\n >\n {bannerSrc && !hasImageError && (\n <img\n ref={imgRef}\n className={styles.image}\n data-testid=\"feedback-banner-image\"\n src={bannerSrc}\n alt=\"\"\n onError={handleImgError}\n />\n )}\n <div className={styles.childContainer}>\n <Typography.HeadingSM as=\"h2\" id={internalId} weight=\"semibold\">\n {componentDescription}\n </Typography.HeadingSM>\n <FeedbackRatingStarsContainer\n ariaLabelledBy={internalId}\n ariaDescribedBy={descriptionId}\n rating={rating}\n onRatingChange={onRatingChange}\n />\n <VisuallyHidden id={descriptionId}>\n Minimum, 1 star. Maximum, 5 stars.\n </VisuallyHidden>\n <Button\n className={styles.submitButton}\n disabled={isSubmitDisabled}\n focusableWhenDisabled\n onClick={onSubmit}\n type=\"button\"\n >\n {resolvedButtonLabel}\n </Button>\n </div>\n </div>\n );\n};\n"],"names":["props","imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit","className","id","testId","otherProps","__rest","hasImageError","setHasImageError","useState","imgRef","useRef","internalId","useId","descriptionId","bannerSrc","FeedbackRatingData","IMG","componentDescription","DEFAULT_DESCRIPTION","resolvedButtonLabel","DEFAULT_BUTTON_LABEL","isSubmitDisabled","useEffect","_a","current","complete","naturalWidth","_jsxs","Object","assign","role","clsx","styles.mainContainer","children","_jsx","ref","styles.image","src","alt","onError","styles.childContainer","Typography","HeadingSM","as","weight","FeedbackRatingStarsContainer","ariaLabelledBy","ariaDescribedBy","VisuallyHidden","Button","styles.submitButton","disabled","focusableWhenDisabled","onClick","type"],"mappings":"~~qqBAkB~~+BA,IAI3B,MAAMC,OACFA,EAAMC,YACNA,EAAWC,YACXA,EAAWC,OACXA,EAAMC,eACNA,EAAcC,SACdA,EAAQC,UACRA,EAASC,GACTA,EACA,cAAeC,GAEfT,EADGU,EAAUC,EAAAA,OACbX,EAXE,CAAA,SAAA,cAAA,cAAA,SAAA,iBAAA,WAAA,YAAA,KAAA,iBAYCY,EAAeC,GAAoBC,EAAAA,UAAS,GAC7CC,EAASC,EAAAA,OAAyB,MAClCC,EAAaC,EAAAA,QACbC,EAAgB,GAAGF,gBACnBG,EAAYnB,QAAAA,EAAUoB,EAAAA,mBAAmBC,IACzCC,EACFpB,QAAAA,EAAekB,EAAAA,mBAAmBG,oBAChCC,EACFvB,QAAAA,EAAemB,EAAAA,mBAAmBK,qBAChCC,GAAoBvB,EAE1BwB,EAAAA,WAAU,WACNf,GAAiB,YAEbgB,EAAAd,EAAOe,8BAASC,WAA4C,IAAhChB,EAAOe,QAAQE,cAC3CnB,GAAiB,EACrB,GACD,CAACO,IAMJ,OACIa,OAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,kBACKnB,EACjBV,UAAW8B,EAAAA,QAAKC,gBAAsB/B,GACtCC,GAAIA,gBACSC,GACTC,EAAU,CAAA6B,SAAA,CAEbnB,IAAcR,GACX4B,EAAAA,IAAA,MAAA,CACIC,IAAK1B,EACLR,UAAWmC,QAAY,cACX,wBACZC,IAAKvB,EACLwB,IAAI,GACJC,QApBO,KACnBhC,GAAiB,EAAK,IAsBlBoB,OAAA,MAAA,CAAK1B,UAAWuC,EAAAA,eAAqBP,SAAA,CACjCC,EAAAA,IAACO,EAAAA,WAAWC,UAAS,CAACC,GAAG,KAAKzC,GAAIS,EAAYiC,OAAO,WAAUX,SAC1DhB,IAELiB,MAACW,EAAAA,6BAA4B,CACzBC,eAAgBnC,EAChBoC,gBAAiBlC,EACjBf,OAAQA,EACRC,eAAgBA,IAEpBmC,EAAAA,IAACc,EAAAA,eAAc,CAAC9C,GAAIW,EAAaoB,SAAA,uCAGjCC,EAAAA,IAACe,EAAAA,OAAM,CACHhD,UAAWiD,eACXC,SAAU9B,EACV+B,uBAAqB,EACrBC,QAASrD,EACTsD,KAAK,kBAEJnC,UAGP"}
1	+ {"version":3,"file":"feedback-rating.js","sources":["../../../src/feedback-rating/feedback-rating.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./feedback-rating.styles\";\nimport { FeedbackRatingData } from \"./feedback-rating-data\";\nimport { FeedbackRatingStarsContainer } from \"./feedback-rating-stars-container\";\nimport type { FeedbackRatingProps } from \"./types\";\n\n// @catalog\n/*\n A star-rating widget for collecting user feedback.\n \n Use `FeedbackRating` to prompt users for a 1–5 star rating.\n * The submit button remains disabled until a star is selected.\n */\nexport const FeedbackRating = (props: FeedbackRatingProps): JSX.Element => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const {\n imgSrc,\n buttonLabel,\n description,\n rating,\n onRatingChange,\n onSubmit,\n className,\n id,\n \"data-testid\": testId,\n ...otherProps\n } = props;\n const [hasImageError, setHasImageError] = useState(false);\n const imgRef = useRef<HTMLImageElement>(null);\n const internalId = useId();\n const descriptionId = `${internalId}-description`;\n const bannerSrc = imgSrc ?? FeedbackRatingData.IMG;\n const componentDescription =\n description ?? FeedbackRatingData.DEFAULT_DESCRIPTION;\n const resolvedButtonLabel =\n buttonLabel ?? FeedbackRatingData.DEFAULT_BUTTON_LABEL;\n const isSubmitDisabled = !rating;\n\n useEffect(() => {\n setHasImageError(false);\n\n if (imgRef.current?.complete && imgRef.current.naturalWidth === 0) {\n setHasImageError(true);\n }\n }, [bannerSrc]);\n\n const handleImgError = () => {\n setHasImageError(true);\n };\n\n return (\n <div\n role=\"group\"\n aria-labelledby={internalId}\n className={clsx(styles.mainContainer, className)}\n id={id}\n data-testid={testId}\n {...otherProps}\n >\n {bannerSrc && !hasImageError && (\n <img\n ref={imgRef}\n className={styles.image}\n data-testid=\"feedback-banner-image\"\n src={bannerSrc}\n alt=\"\"\n onError={handleImgError}\n />\n )}\n <div className={styles.childContainer}>\n <Typography.HeadingSM as=\"h2\" id={internalId} weight=\"semibold\">\n {componentDescription}\n </Typography.HeadingSM>\n <FeedbackRatingStarsContainer\n ariaLabelledBy={internalId}\n ariaDescribedBy={descriptionId}\n rating={rating}\n onRatingChange={onRatingChange}\n />\n <VisuallyHidden id={descriptionId}>\n Minimum, 1 star. Maximum, 5 stars.\n </VisuallyHidden>\n <Button\n className={styles.submitButton}\n disabled={isSubmitDisabled}\n focusableWhenDisabled\n onClick={onSubmit}\n type=\"button\"\n >\n {resolvedButtonLabel}\n </Button>\n </div>\n </div>\n );\n};\n"],"names":["props","imgSrc","buttonLabel","description","rating","onRatingChange","onSubmit","className","id","testId","otherProps","__rest","hasImageError","setHasImageError","useState","imgRef","useRef","internalId","useId","descriptionId","bannerSrc","FeedbackRatingData","IMG","componentDescription","DEFAULT_DESCRIPTION","resolvedButtonLabel","DEFAULT_BUTTON_LABEL","isSubmitDisabled","useEffect","_a","current","complete","naturalWidth","_jsxs","Object","assign","role","clsx","styles.mainContainer","children","_jsx","ref","styles.image","src","alt","onError","styles.childContainer","Typography","HeadingSM","as","weight","FeedbackRatingStarsContainer","ariaLabelledBy","ariaDescribedBy","VisuallyHidden","Button","styles.submitButton","disabled","focusableWhenDisabled","onClick","type"],"mappings":"qqBAmB+BA,IAI3B,MAAMC,OACFA,EAAMC,YACNA,EAAWC,YACXA,EAAWC,OACXA,EAAMC,eACNA,EAAcC,SACdA,EAAQC,UACRA,EAASC,GACTA,EACA,cAAeC,GAEfT,EADGU,EAAUC,EAAAA,OACbX,EAXE,CAAA,SAAA,cAAA,cAAA,SAAA,iBAAA,WAAA,YAAA,KAAA,iBAYCY,EAAeC,GAAoBC,EAAAA,UAAS,GAC7CC,EAASC,EAAAA,OAAyB,MAClCC,EAAaC,EAAAA,QACbC,EAAgB,GAAGF,gBACnBG,EAAYnB,QAAAA,EAAUoB,EAAAA,mBAAmBC,IACzCC,EACFpB,QAAAA,EAAekB,EAAAA,mBAAmBG,oBAChCC,EACFvB,QAAAA,EAAemB,EAAAA,mBAAmBK,qBAChCC,GAAoBvB,EAE1BwB,EAAAA,WAAU,WACNf,GAAiB,YAEbgB,EAAAd,EAAOe,8BAASC,WAA4C,IAAhChB,EAAOe,QAAQE,cAC3CnB,GAAiB,EACrB,GACD,CAACO,IAMJ,OACIa,OAAA,MAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,kBACKnB,EACjBV,UAAW8B,EAAAA,QAAKC,gBAAsB/B,GACtCC,GAAIA,gBACSC,GACTC,EAAU,CAAA6B,SAAA,CAEbnB,IAAcR,GACX4B,EAAAA,IAAA,MAAA,CACIC,IAAK1B,EACLR,UAAWmC,QAAY,cACX,wBACZC,IAAKvB,EACLwB,IAAI,GACJC,QApBO,KACnBhC,GAAiB,EAAK,IAsBlBoB,OAAA,MAAA,CAAK1B,UAAWuC,EAAAA,eAAqBP,SAAA,CACjCC,EAAAA,IAACO,EAAAA,WAAWC,UAAS,CAACC,GAAG,KAAKzC,GAAIS,EAAYiC,OAAO,WAAUX,SAC1DhB,IAELiB,MAACW,EAAAA,6BAA4B,CACzBC,eAAgBnC,EAChBoC,gBAAiBlC,EACjBf,OAAQA,EACRC,eAAgBA,IAEpBmC,EAAAA,IAACc,EAAAA,eAAc,CAAC9C,GAAIW,EAAaoB,SAAA,uCAGjCC,EAAAA,IAACe,EAAAA,OAAM,CACHhD,UAAWiD,eACXC,SAAU9B,EACV+B,uBAAqB,EACrBC,QAASrD,EACTsD,KAAK,kBAEJnC,UAGP"}

package/cjs/file-download/file-download.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Markup } from \"../markup\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport * as styles from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\n/*\n Displays a list of downloadable files, optionally grouped under a title and description.\n \n Use `FileDownload` to present one or more files that users can download individually.\n * Each file item renders as a card with file metadata and a download trigger.\n */\nexport const FileDownload = ({\n id,\n fileItems,\n title,\n description,\n onDownload,\n \"data-testid\": testId,\n className,\n styleType = \"bordered\",\n}: FileDownloadProps) => {\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDownloadItem = async (item: FileItemDownloadProps) => {\n if (onDownload) {\n await onDownload(item);\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderTitle = () => {\n if (!title) {\n return null;\n }\n\n if (typeof title === \"string\") {\n return <p className={styles.title}>{title}</p>;\n }\n\n return (\n <Markup className={styles.titleContainer} baseTextSize=\"heading-xs\">\n {title}\n </Markup>\n );\n };\n\n const renderDescription = () => {\n if (!description) {\n return null;\n }\n\n if (typeof description === \"string\") {\n return <p className={styles.description}>{description}</p>;\n }\n\n return (\n <Markup\n className={styles.descriptionContainer}\n baseTextSize=\"body-md\"\n >\n {description}\n </Markup>\n );\n };\n\n const isBordered = styleType === \"bordered\";\n\n return (\n <DashedBorder\n id={id ? `${id}-file-download` : \"file-download\"}\n className={clsx(\n styles.container,\n isBordered && styles.containerBordered,\n className\n )}\n data-testid={testId}\n enabled={isBordered}\n thickness={Border[\"width-040\"]}\n radius={Radius[\"sm\"]}\n colour={Colour[\"border\"]}\n >\n {(title \|\| description) && (\n <div className={styles.textContainer}>\n {renderTitle()}\n {renderDescription()}\n </div>\n )}\n <ul className={styles.listWrapper}>\n {fileItems &&\n fileItems.length > 0 &&\n fileItems.map((item) => (\n <FileListCard\n key={item.id}\n fileItem={item}\n onDownload={handleDownloadItem}\n />\n ))}\n </ul>\n </DashedBorder>\n );\n};\n"],"names":["id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","isBordered","_jsxs","DashedBorder","clsx","styles.container","styles.containerBordered","enabled","thickness","Border","radius","Radius","colour","Colour","children","styles.textContainer","_jsx","styles.title","Markup","styles.titleContainer","baseTextSize","styles.description","styles.descriptionContainer","styles.listWrapper","length","map","FileListCard","fileItem"],"mappings":"~~85BAe4B~~,EACxBA,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IAwCME,EAA2B,aAAdJ,EAEnB,OACIK,OAACC,EAAAA,cACGb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWQ,EAAAA,QACPC,EAAAA,UACAJ,GAAcK,oBACdV,GACH,cACYD,EACbY,QAASN,EACTO,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OAACC,SAAA,EAEtBtB,GAASC,IACPS,EAAAA,YAAKN,UAAWmB,EAAAA,wBAnDnBvB,EAIgB,iBAAVA,EACAwB,EAAAA,IAAA,IAAA,CAAGpB,UAAWqB,EAAAA,MAAYH,SAAGtB,IAIpCwB,EAAAA,IAACE,SAAM,CAACtB,UAAWuB,EAAAA,eAAuBC,aAAa,sBAClD5B,IATE,KAeNC,EAIsB,iBAAhBA,EACAuB,EAAAA,IAAA,IAAA,CAAGpB,UAAWyB,EAAAA,YAAkBP,SAAGrB,IAI1CuB,EAAAA,IAACE,SAAM,CACHtB,UAAW0B,EAAAA,qBACXF,aAAa,mBAEZ3B,IAZE,QAuCPuB,EAAAA,UAAIpB,UAAW2B,EAAAA,qBACVhC,GACGA,EAAUiC,OAAS,GACnBjC,EAAUkC,KAAK1B,GACXiB,EAAAA,IAACU,EAAAA,aAAY,CAETC,SAAU5B,EACVL,WAAYI,GAFPC,EAAKT,UAMf"}
1	+ {"version":3,"file":"file-download.js","sources":["../../../src/file-download/file-download.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { DashedBorder } from \"../dashed-border\";\nimport { Markup } from \"../markup\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport * as styles from \"./file-download.styles\";\nimport { FileListCard } from \"./file-list-card\";\nimport type { FileDownloadProps, FileItemDownloadProps } from \"./types\";\n\n// @catalog\n/*\n Displays a list of downloadable files, optionally grouped under a title and description.\n \n Use `FileDownload` to present one or more files that users can download individually.\n * Each file item renders as a card with file metadata and a download trigger.\n */\nexport const FileDownload = ({\n id,\n fileItems,\n title,\n description,\n onDownload,\n \"data-testid\": testId,\n className,\n styleType = \"bordered\",\n}: FileDownloadProps) => {\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleDownloadItem = async (item: FileItemDownloadProps) => {\n if (onDownload) {\n await onDownload(item);\n }\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderTitle = () => {\n if (!title) {\n return null;\n }\n\n if (typeof title === \"string\") {\n return <p className={styles.title}>{title}</p>;\n }\n\n return (\n <Markup className={styles.titleContainer} baseTextSize=\"heading-xs\">\n {title}\n </Markup>\n );\n };\n\n const renderDescription = () => {\n if (!description) {\n return null;\n }\n\n if (typeof description === \"string\") {\n return <p className={styles.description}>{description}</p>;\n }\n\n return (\n <Markup\n className={styles.descriptionContainer}\n baseTextSize=\"body-md\"\n >\n {description}\n </Markup>\n );\n };\n\n const isBordered = styleType === \"bordered\";\n\n return (\n <DashedBorder\n id={id ? `${id}-file-download` : \"file-download\"}\n className={clsx(\n styles.container,\n isBordered && styles.containerBordered,\n className\n )}\n data-testid={testId}\n enabled={isBordered}\n thickness={Border[\"width-040\"]}\n radius={Radius[\"sm\"]}\n colour={Colour[\"border\"]}\n >\n {(title \|\| description) && (\n <div className={styles.textContainer}>\n {renderTitle()}\n {renderDescription()}\n </div>\n )}\n <ul className={styles.listWrapper}>\n {fileItems &&\n fileItems.length > 0 &&\n fileItems.map((item) => (\n <FileListCard\n key={item.id}\n fileItem={item}\n onDownload={handleDownloadItem}\n />\n ))}\n </ul>\n </DashedBorder>\n );\n};\n"],"names":["id","fileItems","title","description","onDownload","testId","className","styleType","handleDownloadItem","item","__awaiter","isBordered","_jsxs","DashedBorder","clsx","styles.container","styles.containerBordered","enabled","thickness","Border","radius","Radius","colour","Colour","children","styles.textContainer","_jsx","styles.title","Markup","styles.titleContainer","baseTextSize","styles.description","styles.descriptionContainer","styles.listWrapper","length","map","FileListCard","fileItem"],"mappings":"85BAgB4B,EACxBA,KACAC,YACAC,QACAC,cACAC,aACA,cAAeC,EACfC,YACAC,YAAY,eAKZ,MAAMC,EAA4BC,GAA+BC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACzDN,UACMA,EAAWK,GAEzB,IAwCME,EAA2B,aAAdJ,EAEnB,OACIK,OAACC,EAAAA,cACGb,GAAIA,EAAK,GAAGA,kBAAqB,gBACjCM,UAAWQ,EAAAA,QACPC,EAAAA,UACAJ,GAAcK,oBACdV,GACH,cACYD,EACbY,QAASN,EACTO,UAAWC,EAAAA,OAAO,aAClBC,OAAQC,EAAAA,OAAW,GACnBC,OAAQC,EAAAA,OAAe,OAACC,SAAA,EAEtBtB,GAASC,IACPS,EAAAA,YAAKN,UAAWmB,EAAAA,wBAnDnBvB,EAIgB,iBAAVA,EACAwB,EAAAA,IAAA,IAAA,CAAGpB,UAAWqB,EAAAA,MAAYH,SAAGtB,IAIpCwB,EAAAA,IAACE,SAAM,CAACtB,UAAWuB,EAAAA,eAAuBC,aAAa,sBAClD5B,IATE,KAeNC,EAIsB,iBAAhBA,EACAuB,EAAAA,IAAA,IAAA,CAAGpB,UAAWyB,EAAAA,YAAkBP,SAAGrB,IAI1CuB,EAAAA,IAACE,SAAM,CACHtB,UAAW0B,EAAAA,qBACXF,aAAa,mBAEZ3B,IAZE,QAuCPuB,EAAAA,UAAIpB,UAAW2B,EAAAA,qBACVhC,GACGA,EAAUiC,OAAS,GACnBjC,EAAUkC,KAAK1B,GACXiB,EAAAA,IAACU,EAAAA,aAAY,CAETC,SAAU5B,EACVL,WAAYI,GAFPC,EAAKT,UAMf"}

package/cjs/file-upload/file-item-edit.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Form } from \"../form\";\nimport type { FormLabelProps } from \"../form/types\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util\";\nimport * as styles from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n fileItem: FileItemProps;\n wrapperWidth: number;\n fileDescriptionMaxLength?: number \| undefined;\n descriptionRequired?: boolean \| undefined;\n descriptionLabel?: FormLabelProps \| undefined;\n onSave: (description: string) => void;\n onCancel: () => void;\n onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n fileItem,\n fileDescriptionMaxLength,\n descriptionRequired = true,\n descriptionLabel,\n wrapperWidth,\n onSave,\n onCancel,\n onBlur,\n}: Props) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const {\n id,\n name,\n size,\n type,\n truncateText = true,\n thumbnailImageDataUrl,\n } = fileItem;\n\n const [formattedName, setFormattedName] = useState<string>();\n const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const nameSectionRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getTruncatedText = useCallback(\n (value: string) => {\n if (!truncateText) return value;\n\n const widthOfElement =\n nameSectionRef && nameSectionRef.current\n ? nameSectionRef.current.getBoundingClientRect().width\n : 0;\n\n return StringHelper.truncateOneLine(\n value,\n widthOfElement,\n widthOfElement / 2,\n widthOfElement / 2 / 8, // Arbitrary\n 16 // Font size\n );\n },\n [truncateText]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setFormattedName(getTruncatedText(name));\n }, [wrapperWidth, getTruncatedText, name]);\n\n useEffect(() => {\n setCurrentDescription(fileItem.description \|\| \"\");\n }, [fileItem]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSave = () => {\n if (textareaRef.current) {\n onSave(textareaRef.current.value.trim());\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCurrentDescription(event.target.value);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n onBlur(event.target.value);\n };\n\n const shouldDisableSave = () => {\n if (!descriptionRequired) return false;\n const trimmedDescription = currentDescription.trim();\n return trimmedDescription.length === 0;\n };\n\n const shouldShowThumbnail =\n !!thumbnailImageDataUrl \|\| type === FileUploadHelper.PDF_MIME_TYPE;\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderFileNameAndSize = () => (\n <div ref={nameSectionRef} className={styles.nameSection}>\n <Typography.BodyMD\n className={styles.fileNameText}\n weight=\"semibold\"\n >\n {formattedName}\n </Typography.BodyMD>\n <Typography.BodyMD className={styles.fileSizeText}>\n {FileUploadHelper.formatFileSizeDisplay(size)}\n </Typography.BodyMD>\n </div>\n );\n\n return (\n <li data-testid={`${id}-edit-display`} className={styles.item}>\n <div className={styles.contentSection}>\n {shouldShowThumbnail && (\n <FileListItemThumbnail\n thumbnailImageDataUrl={thumbnailImageDataUrl}\n fileType={type}\n />\n )}\n <div className={styles.detailsSection}>\n {renderFileNameAndSize()}\n <Form.Textarea\n ref={textareaRef}\n id={`${id}-description-textarea`}\n data-testid={`${id}-textarea`}\n value={currentDescription}\n maxLength={fileDescriptionMaxLength}\n onChange={handleChange}\n onBlur={handleBlur}\n rows={3}\n label={\n descriptionLabel ?? {\n children: \"Photo description\",\n subtitle:\n \"Describe this photo to users who may not be able to see the image.\",\n }\n }\n />\n </div>\n </div>\n <div\n className={clsx(\n styles.actionButtonsSection,\n shouldShowThumbnail &&\n styles.actionButtonsSectionWithThumbnail\n )}\n >\n <Button\n data-testid={`${id}-save-button`}\n type=\"button\"\n sizeType=\"small\"\n disabled={shouldDisableSave()}\n onClick={handleSave}\n className={styles.actionButton}\n >\n Save\n </Button>\n <Button\n type=\"button\"\n sizeType=\"small\"\n styleType=\"secondary\"\n data-testid={`${id}-cancel-button`}\n onClick={onCancel}\n className={styles.actionButton}\n >\n Cancel\n </Button>\n </div>\n </li>\n );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","className","styles.item","children","styles.contentSection","_jsx","FileListItemThumbnail","fileType","styles.detailsSection","ref","styles.nameSection","Typography","BodyMD","styles.fileNameText","weight","styles.fileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","shouldDisableSave","onClick","styles.actionButton","styleType"],"mappings":"ymBAwB4B,EACxBA,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAmBzD,OACIC,EAAAA,KAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAAA,KAAWC,SAAA,CACzDH,EAAAA,YAAKC,UAAWG,EAAAA,yBACXP,GACGQ,EAAAA,IAACC,EAAAA,uBACG7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,EAAAA,KAAA,MAAA,CAAKC,UAAWO,EAAAA,eAAqBL,SAAA,CAtB7CH,EAAAA,KAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAAA,YAAkBP,SAAA,CACnDE,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CACdX,UAAWY,eACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CAACX,UAAWc,EAAAA,aAAmBZ,SAC5CL,EAAAA,iBAAiBkB,sBAAsB1C,QAgBpC+B,EAAAA,IAACY,EAAAA,KAAKC,SAAQ,CACVT,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPsC,UAAWtD,EACXuD,SAnDEC,IAClBvC,EAAsBuC,EAAMC,OAAOlC,MAAM,EAmDzBjB,OAhDAkD,IAChBlD,EAAOkD,EAAMC,OAAOlC,MAAM,EAgDVmC,KAAM,EACNC,MACIzD,QAAAA,EAAoB,CAChBoC,SAAU,oBACVsB,SACI,8EAMxBzB,EAAAA,KAAA,MAAA,CACIC,UAAWyB,UACPC,EAAAA,qBACA9B,GACI+B,qCACPzB,SAAA,CAEDE,MAACwB,EAAAA,OAAM,CAAA,cACU,GAAGzD,gBAChBG,KAAK,SACLuD,SAAS,QACTC,SAnEU,MACtB,IAAKjE,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmBmD,OACpBC,MAAY,EAgEhBC,GACVC,QAlFG,KACXpD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM4C,OACrC,EAgFY/B,UAAWmC,eAAmBjC,SAAA,SAIlCE,EAAAA,IAACwB,EAAAA,OAAM,CACHtD,KAAK,SACLuD,SAAS,QACTO,UAAU,YAAW,cACR,GAAGjE,kBAChB+D,QAASjE,EACT+B,UAAWmC,EAAAA,aAAmBjC,SAAA,gBAKrC"}
1	+ {"version":3,"file":"file-item-edit.js","sources":["../../../src/file-upload/file-item-edit.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Form } from \"../form\";\nimport type { FormLabelProps } from \"../form/form-label/types\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util\";\nimport * as styles from \"./file-item-edit.styles\";\nimport { FileListItemThumbnail } from \"./file-list-item/file-list-item-thumbnail\";\nimport { FileUploadHelper } from \"./helper\";\nimport type { FileItemProps } from \"./types\";\n\ninterface Props {\n fileItem: FileItemProps;\n wrapperWidth: number;\n fileDescriptionMaxLength?: number \| undefined;\n descriptionRequired?: boolean \| undefined;\n descriptionLabel?: FormLabelProps \| undefined;\n onSave: (description: string) => void;\n onCancel: () => void;\n onBlur: (value: string) => void;\n}\n\nexport const FileItemEdit = ({\n fileItem,\n fileDescriptionMaxLength,\n descriptionRequired = true,\n descriptionLabel,\n wrapperWidth,\n onSave,\n onCancel,\n onBlur,\n}: Props) => {\n // =========================================================================\n // CONST, STATE, REFS\n // =========================================================================\n const {\n id,\n name,\n size,\n type,\n truncateText = true,\n thumbnailImageDataUrl,\n } = fileItem;\n\n const [formattedName, setFormattedName] = useState<string>();\n const [currentDescription, setCurrentDescription] = useState<string>(\"\");\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n const nameSectionRef = useRef<HTMLDivElement>(null);\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getTruncatedText = useCallback(\n (value: string) => {\n if (!truncateText) return value;\n\n const widthOfElement =\n nameSectionRef && nameSectionRef.current\n ? nameSectionRef.current.getBoundingClientRect().width\n : 0;\n\n return StringHelper.truncateOneLine(\n value,\n widthOfElement,\n widthOfElement / 2,\n widthOfElement / 2 / 8, // Arbitrary\n 16 // Font size\n );\n },\n [truncateText]\n );\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setFormattedName(getTruncatedText(name));\n }, [wrapperWidth, getTruncatedText, name]);\n\n useEffect(() => {\n setCurrentDescription(fileItem.description \|\| \"\");\n }, [fileItem]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSave = () => {\n if (textareaRef.current) {\n onSave(textareaRef.current.value.trim());\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n setCurrentDescription(event.target.value);\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLTextAreaElement>) => {\n onBlur(event.target.value);\n };\n\n const shouldDisableSave = () => {\n if (!descriptionRequired) return false;\n const trimmedDescription = currentDescription.trim();\n return trimmedDescription.length === 0;\n };\n\n const shouldShowThumbnail =\n !!thumbnailImageDataUrl \|\| type === FileUploadHelper.PDF_MIME_TYPE;\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderFileNameAndSize = () => (\n <div ref={nameSectionRef} className={styles.nameSection}>\n <Typography.BodyMD\n className={styles.fileNameText}\n weight=\"semibold\"\n >\n {formattedName}\n </Typography.BodyMD>\n <Typography.BodyMD className={styles.fileSizeText}>\n {FileUploadHelper.formatFileSizeDisplay(size)}\n </Typography.BodyMD>\n </div>\n );\n\n return (\n <li data-testid={`${id}-edit-display`} className={styles.item}>\n <div className={styles.contentSection}>\n {shouldShowThumbnail && (\n <FileListItemThumbnail\n thumbnailImageDataUrl={thumbnailImageDataUrl}\n fileType={type}\n />\n )}\n <div className={styles.detailsSection}>\n {renderFileNameAndSize()}\n <Form.Textarea\n ref={textareaRef}\n id={`${id}-description-textarea`}\n data-testid={`${id}-textarea`}\n value={currentDescription}\n maxLength={fileDescriptionMaxLength}\n onChange={handleChange}\n onBlur={handleBlur}\n rows={3}\n label={\n descriptionLabel ?? {\n children: \"Photo description\",\n subtitle:\n \"Describe this photo to users who may not be able to see the image.\",\n }\n }\n />\n </div>\n </div>\n <div\n className={clsx(\n styles.actionButtonsSection,\n shouldShowThumbnail &&\n styles.actionButtonsSectionWithThumbnail\n )}\n >\n <Button\n data-testid={`${id}-save-button`}\n type=\"button\"\n sizeType=\"small\"\n disabled={shouldDisableSave()}\n onClick={handleSave}\n className={styles.actionButton}\n >\n Save\n </Button>\n <Button\n type=\"button\"\n sizeType=\"small\"\n styleType=\"secondary\"\n data-testid={`${id}-cancel-button`}\n onClick={onCancel}\n className={styles.actionButton}\n >\n Cancel\n </Button>\n </div>\n </li>\n );\n};\n"],"names":["fileItem","fileDescriptionMaxLength","descriptionRequired","descriptionLabel","wrapperWidth","onSave","onCancel","onBlur","id","name","size","type","truncateText","thumbnailImageDataUrl","formattedName","setFormattedName","useState","currentDescription","setCurrentDescription","textareaRef","useRef","nameSectionRef","getTruncatedText","useCallback","value","widthOfElement","current","getBoundingClientRect","width","StringHelper","truncateOneLine","useEffect","description","shouldShowThumbnail","FileUploadHelper","PDF_MIME_TYPE","_jsxs","className","styles.item","children","styles.contentSection","_jsx","FileListItemThumbnail","fileType","styles.detailsSection","ref","styles.nameSection","Typography","BodyMD","styles.fileNameText","weight","styles.fileSizeText","formatFileSizeDisplay","Form","Textarea","maxLength","onChange","event","target","rows","label","subtitle","clsx","styles.actionButtonsSection","styles.actionButtonsSectionWithThumbnail","Button","sizeType","disabled","trim","length","shouldDisableSave","onClick","styles.actionButton","styleType"],"mappings":"ymBAwB4B,EACxBA,WACAC,2BACAC,uBAAsB,EACtBC,mBACAC,eACAC,SACAC,WACAC,aAKA,MAAMC,GACFA,EAAEC,KACFA,EAAIC,KACJA,EAAIC,KACJA,EAAIC,aACJA,GAAe,EAAIC,sBACnBA,GACAb,GAEGc,EAAeC,GAAoBC,cACnCC,EAAoBC,GAAyBF,EAAAA,SAAiB,IAE/DG,EAAcC,EAAAA,OAA4B,MAC1CC,EAAiBD,EAAAA,OAAuB,MAKxCE,EAAmBC,eACpBC,IACG,IAAKZ,EAAc,OAAOY,EAE1B,MAAMC,EACFJ,GAAkBA,EAAeK,QAC3BL,EAAeK,QAAQC,wBAAwBC,MAC/C,EAEV,OAAOC,EAAAA,aAAaC,gBAChBN,EACAC,EACAA,EAAiB,EACjBA,EAAiB,EAAI,EACrB,GACH,GAEL,CAACb,IAMLmB,EAAAA,WAAU,KACNhB,EAAiBO,EAAiBb,GAAM,GACzC,CAACL,EAAckB,EAAkBb,IAEpCsB,EAAAA,WAAU,KACNb,EAAsBlB,EAASgC,aAAe,GAAG,GAClD,CAAChC,IAKJ,MAoBMiC,IACApB,GAAyBF,IAASuB,EAAAA,iBAAiBC,cAmBzD,OACIC,EAAAA,KAAA,KAAA,CAAA,cAAiB,GAAG5B,iBAAmB6B,UAAWC,EAAAA,KAAWC,SAAA,CACzDH,EAAAA,YAAKC,UAAWG,EAAAA,yBACXP,GACGQ,EAAAA,IAACC,EAAAA,uBACG7B,sBAAuBA,EACvB8B,SAAUhC,IAGlByB,EAAAA,KAAA,MAAA,CAAKC,UAAWO,EAAAA,eAAqBL,SAAA,CAtB7CH,EAAAA,KAAA,MAAA,CAAKS,IAAKxB,EAAgBgB,UAAWS,EAAAA,YAAkBP,SAAA,CACnDE,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CACdX,UAAWY,eACXC,OAAO,WAAUX,SAEhBzB,IAEL2B,EAAAA,IAACM,EAAAA,WAAWC,OAAM,CAACX,UAAWc,EAAAA,aAAmBZ,SAC5CL,EAAAA,iBAAiBkB,sBAAsB1C,QAgBpC+B,EAAAA,IAACY,EAAAA,KAAKC,SAAQ,CACVT,IAAK1B,EACLX,GAAI,GAAGA,yBAAyB,cACnB,GAAGA,aAChBgB,MAAOP,EACPsC,UAAWtD,EACXuD,SAnDEC,IAClBvC,EAAsBuC,EAAMC,OAAOlC,MAAM,EAmDzBjB,OAhDAkD,IAChBlD,EAAOkD,EAAMC,OAAOlC,MAAM,EAgDVmC,KAAM,EACNC,MACIzD,QAAAA,EAAoB,CAChBoC,SAAU,oBACVsB,SACI,8EAMxBzB,EAAAA,KAAA,MAAA,CACIC,UAAWyB,UACPC,EAAAA,qBACA9B,GACI+B,qCACPzB,SAAA,CAEDE,MAACwB,EAAAA,OAAM,CAAA,cACU,GAAGzD,gBAChBG,KAAK,SACLuD,SAAS,QACTC,SAnEU,MACtB,IAAKjE,EAAqB,OAAO,EAEjC,OAAqC,IADVe,EAAmBmD,OACpBC,MAAY,EAgEhBC,GACVC,QAlFG,KACXpD,EAAYO,SACZrB,EAAOc,EAAYO,QAAQF,MAAM4C,OACrC,EAgFY/B,UAAWmC,eAAmBjC,SAAA,SAIlCE,EAAAA,IAACwB,EAAAA,OAAM,CACHtD,KAAK,SACLuD,SAAS,QACTO,UAAU,YAAW,cACR,GAAGjE,kBAChB+D,QAASjE,EACT+B,UAAWmC,EAAAA,aAAmBjC,SAAA,gBAKrC"}