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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input-range-slider.js","sources":["../../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport ReactSlider from \"react-slider\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport { Thumb, Track } from \"./slider-components\";\nimport type { InputRangeSliderProps } from \"./types\";\n\n/*\n A draggable track slider for selecting one or more numeric values within a\n * bounded range.\n \n Use `InputRangeSlider` when the selection does not need to be precise;\n * the user picks a value or a range by dragging thumb controls along a track.\n /\nexport const InputRangeSlider = ({\n id,\n value,\n min = 0,\n max = 100,\n step = 1,\n minRange = 0,\n numOfThumbs = 2,\n colors,\n disabled,\n readOnly,\n showSliderLabels,\n sliderLabelPrefix,\n sliderLabelSuffix,\n showIndicatorLabel,\n indicatorLabelPrefix,\n indicatorLabelSuffix,\n ariaLabels,\n ariaDescriptions,\n \"aria-invalid\": ariaInvalid,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n renderSliderLabel,\n onChange,\n onChangeEnd,\n className,\n ...otherProps\n}: InputRangeSliderProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [selection, setSelection] = useState<number[]>(initialiseSelection());\n const [focusedThumbIndex, setFocusedThumbIndex] = useState<number \| null>(\n null\n );\n const internalId = useId();\n const trackColors = getTrackColors();\n const indicatorTextId = `${internalId}-indicator`;\n const instructionTextId = `${internalId}-instruction`;\n const resolvedAriaLabels = getResolvedAriaLabels();\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (value !== selection) {\n setSelection(initialiseSelection());\n }\n }, [value]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChange = (value: number \| readonly number[], index: number) => {\n if (readOnly \|\| disabled) {\n return;\n }\n\n if (typeof value === \"number\") {\n const nextValue = [value];\n setSelection(nextValue);\n onChange?.(nextValue);\n return;\n }\n\n if (index > -1 && selection[index] === value[index]) {\n // skip unnecessary update when dragging the start thumb across the end thumb\n return;\n }\n\n const nextValue = [...value];\n setSelection(nextValue);\n onChange?.(nextValue);\n };\n\n const handleChangeEnd = (value: number \| readonly number[]) => {\n if (readOnly \|\| disabled) {\n return;\n }\n\n if (typeof value === \"number\") {\n const val = [value];\n setSelection(val);\n onChangeEnd?.(val);\n return;\n }\n\n const newSelection = [...value];\n setSelection(newSelection);\n onChangeEnd?.(newSelection);\n };\n\n const handleThumbKeyDown = (\n event: React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n const message = getBlockedMovementMessage(event.key, index);\n\n if (!message) {\n return;\n }\n\n clearAnnouncer(\"assertive\");\n announce(message, \"assertive\");\n };\n\n const handleNativeRangeChange = (\n event: React.ChangeEvent<HTMLInputElement>,\n index: number\n ) => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n const nextRawValue = Number(event.currentTarget.value);\n\n const nextSelection = [...selection];\n nextSelection[index] = clampValueForThumb(\n nextRawValue,\n index,\n selection\n );\n\n setSelection(nextSelection);\n onChange?.(nextSelection);\n onChangeEnd?.(nextSelection);\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n function initialiseSelection() {\n if (value && value.length === numOfThumbs) {\n return value;\n }\n\n const values: number[] = [];\n for (let i = 0; i < numOfThumbs; i++) {\n values.push(min + step i);\n }\n return values;\n }\n\n function getResolvedAriaLabels() {\n return Array.from({ length: numOfThumbs }, (_, index) => {\n return ariaLabels?.[index] \|\| getDefaultAriaLabel(index);\n });\n }\n\n function getDefaultAriaLabel(index: number) {\n if (numOfThumbs === 1) {\n return \"\";\n }\n\n if (index === 0) {\n return \"Minimum value slider\";\n }\n\n if (index === numOfThumbs - 1) {\n return \"Maximum value slider\";\n }\n\n return \"Indeterminate value slider\";\n }\n\n function getThumbDescriptionText(index: number) {\n return ariaDescriptions?.[index];\n }\n\n function getTrackColors() {\n const defaultColors = getDefaultColors();\n return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n return colors?.[i] \|\| defaultColors[i];\n });\n }\n\n function getDefaultColors() {\n const inactiveColor =\n disabled \|\| readOnly\n ? Colour[\"border-disabled\"]\n : Colour[\"border-strong\"];\n const activeColor =\n disabled \|\| readOnly\n ? Colour[\"border-selected-disabled\"]\n : Colour[\"border-selected\"];\n\n if (numOfThumbs === 1) {\n return [activeColor, inactiveColor];\n }\n\n const defaultColors: typeof colors = [inactiveColor];\n\n for (let index = 0; index < numOfThumbs - 1; index++) {\n defaultColors.push(activeColor);\n }\n\n defaultColors.push(inactiveColor);\n return defaultColors;\n }\n\n function getValueText(currentValue: number) {\n return `${sliderLabelPrefix \|\| \"\"}${currentValue}${\n sliderLabelSuffix \|\| \"\"\n }`;\n }\n\n function getThumbDescriptionIds(thumbDescriptionId?: string) {\n return concatIds(\n ariaDescribedBy,\n showIndicatorLabel ? indicatorTextId : undefined,\n disabled \|\| readOnly ? undefined : instructionTextId,\n thumbDescriptionId\n );\n }\n\n function isIncreaseKey(key: string) {\n return [\"ArrowRight\", \"ArrowUp\", \"PageUp\", \"End\"].includes(key);\n }\n\n function isDecreaseKey(key: string) {\n return [\"ArrowLeft\", \"ArrowDown\", \"PageDown\", \"Home\"].includes(key);\n }\n\n function getSliderTypeText(label?: string) {\n if (!label) {\n return \"slider\";\n }\n\n return label.toLowerCase();\n }\n\n function getSliderTargetText(label?: string) {\n if (!label) {\n return \"slider\";\n }\n\n return label.replace(/ slider$/i, \"\").toLowerCase();\n }\n\n function getBlockedMovementMessage(key: string, index: number) {\n if (numOfThumbs < 2) {\n return \"\";\n }\n\n const currentValue = selection[index];\n const previousValue = index > 0 ? selection[index - 1] : undefined;\n const nextValue =\n index < selection.length - 1 ? selection[index + 1] : undefined;\n\n const currentLabel = resolvedAriaLabels[index];\n const previousLabel =\n index > 0 ? resolvedAriaLabels[index - 1] : undefined;\n const nextLabel =\n index < resolvedAriaLabels.length - 1\n ? resolvedAriaLabels[index + 1]\n : undefined;\n\n if (isIncreaseKey(key)) {\n if (\n nextValue !== undefined &&\n currentValue >= nextValue - minRange\n ) {\n return `The ${getSliderTypeText(\n currentLabel\n )} has reached its limit. Increase the ${getSliderTargetText(\n nextLabel\n )} to set a higher ${getSliderTargetText(currentLabel)}.`;\n }\n }\n\n if (isDecreaseKey(key)) {\n if (\n previousValue !== undefined &&\n currentValue <= previousValue + minRange\n ) {\n return `The ${getSliderTypeText(\n currentLabel\n )} has reached its limit. Decrease the ${getSliderTargetText(\n previousLabel\n )} to set a lower ${getSliderTargetText(currentLabel)}.`;\n }\n }\n\n return \"\";\n }\n\n function getThumbMin(index: number, values = selection) {\n if (index === 0) {\n return min;\n }\n\n return values[index - 1] + minRange;\n }\n\n function getThumbMax(index: number, values = selection) {\n if (index === values.length - 1) {\n return max;\n }\n\n return values[index + 1] - minRange;\n }\n\n function clampValueForThumb(\n nextValue: number,\n index: number,\n values: number[]\n ) {\n const minAllowed = getThumbMin(index, values);\n const maxAllowed = getThumbMax(index, values);\n\n return Math.min(maxAllowed, Math.max(minAllowed, nextValue));\n }\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const formatLabel = (value: number) => {\n if (renderSliderLabel) {\n return renderSliderLabel(value);\n }\n\n return (\n <Typography.BodyBL className={styles.labelText}>\n {sliderLabelPrefix}\n {value}\n {sliderLabelSuffix}\n </Typography.BodyBL>\n );\n };\n\n const formatIndicationLabel = () => {\n let formattedSelection = \"\";\n\n if (selection.length === 1) {\n formattedSelection = `${selection[0]}`;\n } else if (selection.length === 2) {\n formattedSelection = `${selection[0]} - ${selection[1]}`;\n } else if (selection.length > 2) {\n const minValue = Math.min(...selection);\n const maxValue = Math.max(...selection);\n formattedSelection = `${minValue} - ${maxValue}`;\n }\n\n return (\n <Typography.BodyBL className={styles.labelText}>\n {indicatorLabelPrefix}\n {formattedSelection}\n {indicatorLabelSuffix}\n </Typography.BodyBL>\n );\n };\n\n return (\n <div\n {...otherProps}\n id={id}\n role=\"group\"\n aria-labelledby={ariaLabelledBy}\n aria-disabled={disabled}\n className={clsx(styles.wrapper, className)}\n >\n {!disabled && !readOnly && (\n <VisuallyHidden id={instructionTextId}>\n Use left and right arrow keys to adjust the slider.\n </VisuallyHidden>\n )}\n\n {showIndicatorLabel && (\n <div\n id={indicatorTextId}\n className={styles.indicatorLabelContainer}\n >\n {formatIndicationLabel()}\n </div>\n )}\n\n {selection.map((thumbValue, index) => {\n const thumbLabelTextId = `${internalId}-thumb-label-${index}`;\n const thumbDescriptionText = getThumbDescriptionText(index);\n const thumbDescriptionTextId = thumbDescriptionText\n ? `${internalId}-thumb-description-${index}`\n : undefined;\n\n return (\n <VisuallyHidden key={`native-slider-${index}`}>\n {thumbDescriptionTextId && (\n <span id={thumbDescriptionTextId}>\n {thumbDescriptionText}\n </span>\n )}\n <span id={thumbLabelTextId}>\n {resolvedAriaLabels[index]}\n </span>\n\n <input\n data-testid={`slider-input-${index}`}\n type=\"range\"\n min={getThumbMin(index)}\n max={getThumbMax(index)}\n step={step}\n value={thumbValue}\n aria-disabled={disabled \|\| undefined}\n readOnly={readOnly}\n aria-labelledby={concatIds(\n ariaLabelledBy,\n thumbLabelTextId\n )}\n aria-describedby={getThumbDescriptionIds(\n thumbDescriptionTextId\n )}\n aria-valuetext={getValueText(thumbValue)}\n aria-invalid={ariaInvalid}\n onFocus={() => setFocusedThumbIndex(index)}\n onBlur={() => setFocusedThumbIndex(null)}\n onChange={(event) =>\n handleNativeRangeChange(event, index)\n }\n onKeyDown={(event) => {\n handleThumbKeyDown(event, index);\n }}\n />\n </VisuallyHidden>\n );\n })}\n\n {/* Native range inputs provide the accessible interaction model.\n The visible react-slider is presentation-only. */}\n <ReactSlider\n step={step}\n min={min}\n max={max}\n value={selection}\n disabled={disabled \|\| readOnly}\n onChange={handleChange}\n onAfterChange={handleChangeEnd}\n minDistance={minRange}\n aria-hidden\n className={styles.slider}\n renderThumb={(thumbProps, state) => {\n return (\n <Thumb\n data-testid={`slider-thumb-${state.index}`}\n {...thumbProps}\n key={thumbProps.key}\n tabIndex={-1}\n aria-hidden\n focused={focusedThumbIndex === state.index}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n }}\n renderTrack={(trackProps, state) => {\n return (\n <Track\n data-testid={`slider-track-${state.index}`}\n {...trackProps}\n key={trackProps.key}\n color={trackColors[state.index]}\n />\n );\n }}\n />\n\n {showSliderLabels && (\n <div className={styles.labelContainer}>\n <div>{formatLabel(min)}</div>\n <div>{formatLabel(max)}</div>\n </div>\n )}\n </div>\n );\n};\n"],"names":["_a","id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","ariaInvalid","ariaLabelledBy","ariaDescribedBy","renderSliderLabel","onChange","onChangeEnd","className","otherProps","__rest","selection","setSelection","useState","initialiseSelection","focusedThumbIndex","setFocusedThumbIndex","internalId","useId","trackColors","defaultColors","inactiveColor","Colour","activeColor","index","push","getDefaultColors","Array","fill","map","_","i","getTrackColors","indicatorTextId","instructionTextId","resolvedAriaLabels","from","length","getDefaultAriaLabel","useEffect","handleThumbKeyDown","event","message","key","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","handleNativeRangeChange","nextRawValue","Number","currentTarget","nextSelection","values","minAllowed","getThumbMin","maxAllowed","getThumbMax","Math","clampValueForThumb","label","toLowerCase","replace","formatLabel","_jsxs","Typography","BodyBL","styles.labelText","children","Object","assign","role","clsx","styles.wrapper","_jsx","VisuallyHidden","styles.indicatorLabelContainer","formattedSelection","formatIndicationLabel","thumbValue","thumbLabelTextId","thumbDescriptionText","getThumbDescriptionText","thumbDescriptionTextId","type","concatIds","thumbDescriptionId","onFocus","onBlur","onKeyDown","ReactSlider","onAfterChange","val","newSelection","minDistance","styles.slider","renderThumb","thumbProps","state","_createElement","Thumb","tabIndex","focused","renderTrack","trackProps","Track","color","styles.labelContainer"],"mappings":"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"}
1	+ {"version":3,"file":"input-range-slider.js","sources":["../../../src/input-range-slider/input-range-slider.tsx"],"sourcesContent":["import { announce, clearAnnouncer } from \"@react-aria/live-announcer\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useState } from \"react\";\nimport ReactSlider from \"react-slider\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { Colour } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./input-range-slider.styles\";\nimport { Thumb, Track } from \"./slider-components\";\nimport type { InputRangeSliderProps } from \"./types\";\n\n// @catalog\n/*\n A draggable track slider for selecting one or more numeric values within a\n * bounded range.\n \n Use `InputRangeSlider` when the selection does not need to be precise;\n * the user picks a value or a range by dragging thumb controls along a track.\n /\nexport const InputRangeSlider = ({\n id,\n value,\n min = 0,\n max = 100,\n step = 1,\n minRange = 0,\n numOfThumbs = 2,\n colors,\n disabled,\n readOnly,\n showSliderLabels,\n sliderLabelPrefix,\n sliderLabelSuffix,\n showIndicatorLabel,\n indicatorLabelPrefix,\n indicatorLabelSuffix,\n ariaLabels,\n ariaDescriptions,\n \"aria-invalid\": ariaInvalid,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n renderSliderLabel,\n onChange,\n onChangeEnd,\n className,\n ...otherProps\n}: InputRangeSliderProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [selection, setSelection] = useState<number[]>(initialiseSelection());\n const [focusedThumbIndex, setFocusedThumbIndex] = useState<number \| null>(\n null\n );\n const internalId = useId();\n const trackColors = getTrackColors();\n const indicatorTextId = `${internalId}-indicator`;\n const instructionTextId = `${internalId}-instruction`;\n const resolvedAriaLabels = getResolvedAriaLabels();\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (value !== selection) {\n setSelection(initialiseSelection());\n }\n }, [value]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChange = (value: number \| readonly number[], index: number) => {\n if (readOnly \|\| disabled) {\n return;\n }\n\n if (typeof value === \"number\") {\n const nextValue = [value];\n setSelection(nextValue);\n onChange?.(nextValue);\n return;\n }\n\n if (index > -1 && selection[index] === value[index]) {\n // skip unnecessary update when dragging the start thumb across the end thumb\n return;\n }\n\n const nextValue = [...value];\n setSelection(nextValue);\n onChange?.(nextValue);\n };\n\n const handleChangeEnd = (value: number \| readonly number[]) => {\n if (readOnly \|\| disabled) {\n return;\n }\n\n if (typeof value === \"number\") {\n const val = [value];\n setSelection(val);\n onChangeEnd?.(val);\n return;\n }\n\n const newSelection = [...value];\n setSelection(newSelection);\n onChangeEnd?.(newSelection);\n };\n\n const handleThumbKeyDown = (\n event: React.KeyboardEvent<HTMLDivElement>,\n index: number\n ) => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n const message = getBlockedMovementMessage(event.key, index);\n\n if (!message) {\n return;\n }\n\n clearAnnouncer(\"assertive\");\n announce(message, \"assertive\");\n };\n\n const handleNativeRangeChange = (\n event: React.ChangeEvent<HTMLInputElement>,\n index: number\n ) => {\n if (disabled \|\| readOnly) {\n return;\n }\n\n const nextRawValue = Number(event.currentTarget.value);\n\n const nextSelection = [...selection];\n nextSelection[index] = clampValueForThumb(\n nextRawValue,\n index,\n selection\n );\n\n setSelection(nextSelection);\n onChange?.(nextSelection);\n onChangeEnd?.(nextSelection);\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n function initialiseSelection() {\n if (value && value.length === numOfThumbs) {\n return value;\n }\n\n const values: number[] = [];\n for (let i = 0; i < numOfThumbs; i++) {\n values.push(min + step i);\n }\n return values;\n }\n\n function getResolvedAriaLabels() {\n return Array.from({ length: numOfThumbs }, (_, index) => {\n return ariaLabels?.[index] \|\| getDefaultAriaLabel(index);\n });\n }\n\n function getDefaultAriaLabel(index: number) {\n if (numOfThumbs === 1) {\n return \"\";\n }\n\n if (index === 0) {\n return \"Minimum value slider\";\n }\n\n if (index === numOfThumbs - 1) {\n return \"Maximum value slider\";\n }\n\n return \"Indeterminate value slider\";\n }\n\n function getThumbDescriptionText(index: number) {\n return ariaDescriptions?.[index];\n }\n\n function getTrackColors() {\n const defaultColors = getDefaultColors();\n return new Array(numOfThumbs + 1).fill(0).map((_, i) => {\n return colors?.[i] \|\| defaultColors[i];\n });\n }\n\n function getDefaultColors() {\n const inactiveColor =\n disabled \|\| readOnly\n ? Colour[\"border-disabled\"]\n : Colour[\"border-strong\"];\n const activeColor =\n disabled \|\| readOnly\n ? Colour[\"border-selected-disabled\"]\n : Colour[\"border-selected\"];\n\n if (numOfThumbs === 1) {\n return [activeColor, inactiveColor];\n }\n\n const defaultColors: typeof colors = [inactiveColor];\n\n for (let index = 0; index < numOfThumbs - 1; index++) {\n defaultColors.push(activeColor);\n }\n\n defaultColors.push(inactiveColor);\n return defaultColors;\n }\n\n function getValueText(currentValue: number) {\n return `${sliderLabelPrefix \|\| \"\"}${currentValue}${\n sliderLabelSuffix \|\| \"\"\n }`;\n }\n\n function getThumbDescriptionIds(thumbDescriptionId?: string) {\n return concatIds(\n ariaDescribedBy,\n showIndicatorLabel ? indicatorTextId : undefined,\n disabled \|\| readOnly ? undefined : instructionTextId,\n thumbDescriptionId\n );\n }\n\n function isIncreaseKey(key: string) {\n return [\"ArrowRight\", \"ArrowUp\", \"PageUp\", \"End\"].includes(key);\n }\n\n function isDecreaseKey(key: string) {\n return [\"ArrowLeft\", \"ArrowDown\", \"PageDown\", \"Home\"].includes(key);\n }\n\n function getSliderTypeText(label?: string) {\n if (!label) {\n return \"slider\";\n }\n\n return label.toLowerCase();\n }\n\n function getSliderTargetText(label?: string) {\n if (!label) {\n return \"slider\";\n }\n\n return label.replace(/ slider$/i, \"\").toLowerCase();\n }\n\n function getBlockedMovementMessage(key: string, index: number) {\n if (numOfThumbs < 2) {\n return \"\";\n }\n\n const currentValue = selection[index];\n const previousValue = index > 0 ? selection[index - 1] : undefined;\n const nextValue =\n index < selection.length - 1 ? selection[index + 1] : undefined;\n\n const currentLabel = resolvedAriaLabels[index];\n const previousLabel =\n index > 0 ? resolvedAriaLabels[index - 1] : undefined;\n const nextLabel =\n index < resolvedAriaLabels.length - 1\n ? resolvedAriaLabels[index + 1]\n : undefined;\n\n if (isIncreaseKey(key)) {\n if (\n nextValue !== undefined &&\n currentValue >= nextValue - minRange\n ) {\n return `The ${getSliderTypeText(\n currentLabel\n )} has reached its limit. Increase the ${getSliderTargetText(\n nextLabel\n )} to set a higher ${getSliderTargetText(currentLabel)}.`;\n }\n }\n\n if (isDecreaseKey(key)) {\n if (\n previousValue !== undefined &&\n currentValue <= previousValue + minRange\n ) {\n return `The ${getSliderTypeText(\n currentLabel\n )} has reached its limit. Decrease the ${getSliderTargetText(\n previousLabel\n )} to set a lower ${getSliderTargetText(currentLabel)}.`;\n }\n }\n\n return \"\";\n }\n\n function getThumbMin(index: number, values = selection) {\n if (index === 0) {\n return min;\n }\n\n return values[index - 1] + minRange;\n }\n\n function getThumbMax(index: number, values = selection) {\n if (index === values.length - 1) {\n return max;\n }\n\n return values[index + 1] - minRange;\n }\n\n function clampValueForThumb(\n nextValue: number,\n index: number,\n values: number[]\n ) {\n const minAllowed = getThumbMin(index, values);\n const maxAllowed = getThumbMax(index, values);\n\n return Math.min(maxAllowed, Math.max(minAllowed, nextValue));\n }\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const formatLabel = (value: number) => {\n if (renderSliderLabel) {\n return renderSliderLabel(value);\n }\n\n return (\n <Typography.BodyBL className={styles.labelText}>\n {sliderLabelPrefix}\n {value}\n {sliderLabelSuffix}\n </Typography.BodyBL>\n );\n };\n\n const formatIndicationLabel = () => {\n let formattedSelection = \"\";\n\n if (selection.length === 1) {\n formattedSelection = `${selection[0]}`;\n } else if (selection.length === 2) {\n formattedSelection = `${selection[0]} - ${selection[1]}`;\n } else if (selection.length > 2) {\n const minValue = Math.min(...selection);\n const maxValue = Math.max(...selection);\n formattedSelection = `${minValue} - ${maxValue}`;\n }\n\n return (\n <Typography.BodyBL className={styles.labelText}>\n {indicatorLabelPrefix}\n {formattedSelection}\n {indicatorLabelSuffix}\n </Typography.BodyBL>\n );\n };\n\n return (\n <div\n {...otherProps}\n id={id}\n role=\"group\"\n aria-labelledby={ariaLabelledBy}\n aria-disabled={disabled}\n className={clsx(styles.wrapper, className)}\n >\n {!disabled && !readOnly && (\n <VisuallyHidden id={instructionTextId}>\n Use left and right arrow keys to adjust the slider.\n </VisuallyHidden>\n )}\n\n {showIndicatorLabel && (\n <div\n id={indicatorTextId}\n className={styles.indicatorLabelContainer}\n >\n {formatIndicationLabel()}\n </div>\n )}\n\n {selection.map((thumbValue, index) => {\n const thumbLabelTextId = `${internalId}-thumb-label-${index}`;\n const thumbDescriptionText = getThumbDescriptionText(index);\n const thumbDescriptionTextId = thumbDescriptionText\n ? `${internalId}-thumb-description-${index}`\n : undefined;\n\n return (\n <VisuallyHidden key={`native-slider-${index}`}>\n {thumbDescriptionTextId && (\n <span id={thumbDescriptionTextId}>\n {thumbDescriptionText}\n </span>\n )}\n <span id={thumbLabelTextId}>\n {resolvedAriaLabels[index]}\n </span>\n\n <input\n data-testid={`slider-input-${index}`}\n type=\"range\"\n min={getThumbMin(index)}\n max={getThumbMax(index)}\n step={step}\n value={thumbValue}\n aria-disabled={disabled \|\| undefined}\n readOnly={readOnly}\n aria-labelledby={concatIds(\n ariaLabelledBy,\n thumbLabelTextId\n )}\n aria-describedby={getThumbDescriptionIds(\n thumbDescriptionTextId\n )}\n aria-valuetext={getValueText(thumbValue)}\n aria-invalid={ariaInvalid}\n onFocus={() => setFocusedThumbIndex(index)}\n onBlur={() => setFocusedThumbIndex(null)}\n onChange={(event) =>\n handleNativeRangeChange(event, index)\n }\n onKeyDown={(event) => {\n handleThumbKeyDown(event, index);\n }}\n />\n </VisuallyHidden>\n );\n })}\n\n {/* Native range inputs provide the accessible interaction model.\n The visible react-slider is presentation-only. */}\n <ReactSlider\n step={step}\n min={min}\n max={max}\n value={selection}\n disabled={disabled \|\| readOnly}\n onChange={handleChange}\n onAfterChange={handleChangeEnd}\n minDistance={minRange}\n aria-hidden\n className={styles.slider}\n renderThumb={(thumbProps, state) => {\n return (\n <Thumb\n data-testid={`slider-thumb-${state.index}`}\n {...thumbProps}\n key={thumbProps.key}\n tabIndex={-1}\n aria-hidden\n focused={focusedThumbIndex === state.index}\n disabled={disabled}\n readOnly={readOnly}\n />\n );\n }}\n renderTrack={(trackProps, state) => {\n return (\n <Track\n data-testid={`slider-track-${state.index}`}\n {...trackProps}\n key={trackProps.key}\n color={trackColors[state.index]}\n />\n );\n }}\n />\n\n {showSliderLabels && (\n <div className={styles.labelContainer}>\n <div>{formatLabel(min)}</div>\n <div>{formatLabel(max)}</div>\n </div>\n )}\n </div>\n );\n};\n"],"names":["_a","id","value","min","max","step","minRange","numOfThumbs","colors","disabled","readOnly","showSliderLabels","sliderLabelPrefix","sliderLabelSuffix","showIndicatorLabel","indicatorLabelPrefix","indicatorLabelSuffix","ariaLabels","ariaDescriptions","ariaInvalid","ariaLabelledBy","ariaDescribedBy","renderSliderLabel","onChange","onChangeEnd","className","otherProps","__rest","selection","setSelection","useState","initialiseSelection","focusedThumbIndex","setFocusedThumbIndex","internalId","useId","trackColors","defaultColors","inactiveColor","Colour","activeColor","index","push","getDefaultColors","Array","fill","map","_","i","getTrackColors","indicatorTextId","instructionTextId","resolvedAriaLabels","from","length","getDefaultAriaLabel","useEffect","handleThumbKeyDown","event","message","key","currentValue","previousValue","undefined","nextValue","currentLabel","previousLabel","nextLabel","includes","isIncreaseKey","getSliderTypeText","getSliderTargetText","isDecreaseKey","getBlockedMovementMessage","clearAnnouncer","announce","handleNativeRangeChange","nextRawValue","Number","currentTarget","nextSelection","values","minAllowed","getThumbMin","maxAllowed","getThumbMax","Math","clampValueForThumb","label","toLowerCase","replace","formatLabel","_jsxs","Typography","BodyBL","styles.labelText","children","Object","assign","role","clsx","styles.wrapper","_jsx","VisuallyHidden","styles.indicatorLabelContainer","formattedSelection","formatIndicationLabel","thumbValue","thumbLabelTextId","thumbDescriptionText","getThumbDescriptionText","thumbDescriptionTextId","type","concatIds","thumbDescriptionId","onFocus","onBlur","onKeyDown","ReactSlider","onAfterChange","val","newSelection","minDistance","styles.slider","renderThumb","thumbProps","state","_createElement","Thumb","tabIndex","focused","renderTrack","trackProps","Track","color","styles.labelContainer"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input-select.js","sources":["../../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\n/*\n A single-selection dropdown input.\n \n Use `InputSelect` when the user must pick exactly one item from a list.\n */\nexport const InputSelect = <T, V>({\n selectedOption,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n valueToStringFunction,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderCustomSelectedOption,\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [selected, setSelected] = useState<T \| undefined>(selectedOption);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setSelected(item);\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n onSelectOption?.(item, extractedValue);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = (): string => {\n if (!selected) return \"\";\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n selectedItems={selected ? [selected] : []}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
1	+ {"version":3,"file":"input-select.js","sources":["../../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport {\n DropdownList,\n DropdownListState,\n ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n LabelContainer,\n PlaceholderLabel,\n ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\n// @catalog\n/*\n A single-selection dropdown input.\n \n Use `InputSelect` when the user must pick exactly one item from a list.\n */\nexport const InputSelect = <T, V>({\n selectedOption,\n placeholder = \"Select\",\n options,\n disabled,\n error,\n className,\n \"data-testid\": testId,\n id,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n enableSearch = false,\n searchFunction,\n searchPlaceholder,\n valueExtractor,\n valueToStringFunction,\n listExtractor,\n displayValueExtractor,\n onSelectOption,\n onShowOptions,\n onHideOptions,\n onRetry,\n optionsLoadState = \"success\",\n optionTruncationType = \"end\",\n renderCustomSelectedOption,\n renderListItem,\n hideNoResultsDisplay,\n noResultsDescription,\n customLabels,\n renderCustomCallToAction,\n onBlur,\n variant = \"default\",\n readOnly,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n // =============================================================================\n // CONST, STATE\n // =============================================================================\n const [selected, setSelected] = useState<T \| undefined>(selectedOption);\n const [showOptions, setShowOptions] = useState<boolean>(false);\n const [focused, setFocused] = useState<boolean>(false);\n const internalId = useId();\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLButtonElement>(null);\n const labelContainerRef = useRef<HTMLDivElement>(null);\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(selectedOption);\n }, [selectedOption]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (item: T, extractedValue: V) => {\n selectorRef.current?.focus();\n setSelected(item);\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n onSelectOption?.(item, extractedValue);\n };\n\n const handleListDismiss = () => {\n if (showOptions) {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n }\n };\n\n const handleNodeFocus = () => {\n if (!focused && !showOptions) {\n setFocused(true);\n }\n };\n\n const handleNodeBlur = (e: React.FocusEvent) => {\n if (\n focused &&\n !showOptions &&\n nodeRef.current &&\n !nodeRef.current.contains(e.relatedTarget as Node)\n ) {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleOpen = () => {\n setShowOptions(true);\n triggerOptionDisplayCallback(true);\n setFocused(true);\n };\n\n const handleClose = (reason: OpenChangeReason \| undefined) => {\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n\n // click to toggle should not blur the input\n if (reason !== \"click\") {\n setFocused(false);\n onBlur?.();\n }\n };\n\n const handleDismiss = () => {\n selectorRef.current?.focus();\n setShowOptions(false);\n triggerOptionDisplayCallback(false);\n };\n\n // =============================================================================\n // HELPER FUNCTION\n // =============================================================================\n const getDisplayValue = (): string => {\n if (!selected) return \"\";\n\n if (displayValueExtractor) {\n return displayValueExtractor(selected);\n }\n\n if (valueExtractor) {\n const value = valueExtractor(selected);\n return valueToStringFunction\n ? valueToStringFunction(value)\n : value?.toString() ?? \"\";\n }\n\n return selected.toString();\n };\n\n const truncateValue = (value: string) => {\n if (optionTruncationType === \"middle\") {\n let widthOfElement = 0;\n if (labelContainerRef && labelContainerRef.current) {\n widthOfElement =\n labelContainerRef.current.getBoundingClientRect().width;\n }\n\n return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n }\n return value;\n };\n\n const triggerOptionDisplayCallback = (show: boolean) => {\n if (show) {\n onShowOptions?.();\n } else {\n onHideOptions?.();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderLabel = () => {\n if (!selected) {\n return (\n <PlaceholderLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {placeholder}\n </PlaceholderLabel>\n );\n } else if (renderCustomSelectedOption) {\n return renderCustomSelectedOption(selected);\n } else {\n return (\n <ValueLabel\n variant={variant}\n truncateType={optionTruncationType}\n >\n {truncateValue(getDisplayValue())}\n </ValueLabel>\n );\n }\n };\n\n const renderSelectorContent = () => (\n <LabelContainer ref={labelContainerRef} disabled={disabled}>\n {renderLabel()}\n </LabelContainer>\n );\n\n const renderElement = () => {\n return (\n <InputBox\n className={className}\n data-testid={testId}\n id={id}\n ref={nodeRef}\n tabIndex={-1}\n onFocus={handleNodeFocus}\n onBlur={handleNodeBlur}\n focused={focused}\n disabled={disabled}\n readOnly={readOnly}\n error={error}\n >\n <ExpandableElement\n ref={selectorRef}\n disabled={disabled}\n expanded={showOptions}\n listboxId={internalId}\n popupRole=\"listbox\"\n readOnly={readOnly}\n variant={variant}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n >\n {renderSelectorContent()}\n </ExpandableElement>\n </InputBox>\n );\n };\n\n const renderDropdown = () => {\n return (\n <DropdownList\n listboxId={internalId}\n listItems={options}\n onSelectItem={handleListItemClick}\n onDismiss={handleListDismiss}\n valueExtractor={valueExtractor}\n listExtractor={listExtractor}\n enableSearch={enableSearch}\n searchPlaceholder={searchPlaceholder}\n searchFunction={searchFunction}\n selectedItems={selected ? [selected] : []}\n onRetry={onRetry}\n itemsLoadState={optionsLoadState}\n itemTruncationType={optionTruncationType}\n renderListItem={renderListItem}\n hideNoResultsDisplay={hideNoResultsDisplay}\n noResultsDescription={noResultsDescription}\n customLabels={customLabels}\n renderCustomCallToAction={renderCustomCallToAction}\n variant={variant}\n width={dropdownWidth}\n matchElementWidth\n />\n );\n };\n\n return (\n <DropdownListState>\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={showOptions}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n clickToToggle\n offset={8}\n alignment={alignment}\n fitAvailableHeight\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n </DropdownListState>\n );\n};\n"],"names":["selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"input-slider.js","sources":["../../../src/input-slider/input-slider.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport type { InputSliderProps } from \"./types\";\n\n/*\n A single-thumb slider for selecting one numeric value within a range.\n \n Use `InputSlider` when a user needs to pick a single point on a continuous\n * scale without a precise value. For selecting a range between two values, use `InputRangeSlider` instead.\n */\nexport const InputSlider = ({\n value,\n ariaLabel,\n onChange,\n onChangeEnd,\n ...otherProps\n}: InputSliderProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [selection, setSelection] = useState<number[]>(initialiseSelection());\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (value !== selection[0]) {\n setSelection(initialiseSelection());\n }\n }, [value]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChange = (value: number[]) => {\n const [newVal] = value;\n setSelection([newVal]);\n onChange?.(newVal);\n };\n\n const handleChangeEnd = (value: number[]) => {\n const [newVal] = value;\n setSelection([newVal]);\n onChangeEnd?.(newVal);\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n function initialiseSelection() {\n return value != undefined ? [value] : [0];\n }\n\n return (\n <InputRangeSlider\n {...otherProps}\n value={selection}\n numOfThumbs={1}\n onChange={handleChange}\n onChangeEnd={handleChangeEnd}\n ariaLabels={ariaLabel ? [ariaLabel] : undefined}\n />\n );\n};\n"],"names":["_a","value","ariaLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","useEffect","undefined","_jsx","InputRangeSlider","Object","assign","numOfThumbs","newVal","ariaLabels"],"mappings":"~~mLAW4BA~~,IAAA,IAAAC,MACxBA,EAAKC,UACLA,EAASC,SACTA,EAAQC,YACRA,GAAWJ,EACRK,EAAUC,EAAAA,OAAAN,EALW,CAAA,QAAA,YAAA,WAAA,gBAUxB,MAAOO,EAAWC,GAAgBC,EAAAA,SAAmBC,KAKrDC,EAAAA,WAAU,KACFV,IAAUM,EAAU,IACpBC,EAAaE,IACjB,GACD,CAACT,IAoBJ,SAASS,IACL,OAAgBE,MAATX,EAAqB,CAACA,GAAS,CAAC,EAC3C,CAEA,OACIY,EAAAA,IAACC,mBAAgBC,OAAAC,OAAA,CAAA,EACTX,GACJJ,MAAOM,EACPU,YAAa,EACbd,SAxBcF,IAClB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdf,SAAAA,EAAWe,EAAO,EAsBdd,YAnBiBH,IACrB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdd,SAAAA,EAAcc,EAAO,EAiBjBC,WAAYjB,EAAY,CAACA,QAAaU,IACxC"}
1	+ {"version":3,"file":"input-slider.js","sources":["../../../src/input-slider/input-slider.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport type { InputSliderProps } from \"./types\";\n\n// @catalog\n/*\n A single-thumb slider for selecting one numeric value within a range.\n \n Use `InputSlider` when a user needs to pick a single point on a continuous\n * scale without a precise value. For selecting a range between two values, use `InputRangeSlider` instead.\n */\nexport const InputSlider = ({\n value,\n ariaLabel,\n onChange,\n onChangeEnd,\n ...otherProps\n}: InputSliderProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [selection, setSelection] = useState<number[]>(initialiseSelection());\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n if (value !== selection[0]) {\n setSelection(initialiseSelection());\n }\n }, [value]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleChange = (value: number[]) => {\n const [newVal] = value;\n setSelection([newVal]);\n onChange?.(newVal);\n };\n\n const handleChangeEnd = (value: number[]) => {\n const [newVal] = value;\n setSelection([newVal]);\n onChangeEnd?.(newVal);\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n function initialiseSelection() {\n return value != undefined ? [value] : [0];\n }\n\n return (\n <InputRangeSlider\n {...otherProps}\n value={selection}\n numOfThumbs={1}\n onChange={handleChange}\n onChangeEnd={handleChangeEnd}\n ariaLabels={ariaLabel ? [ariaLabel] : undefined}\n />\n );\n};\n"],"names":["_a","value","ariaLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","useEffect","undefined","_jsx","InputRangeSlider","Object","assign","numOfThumbs","newVal","ariaLabels"],"mappings":"mLAY4BA,IAAA,IAAAC,MACxBA,EAAKC,UACLA,EAASC,SACTA,EAAQC,YACRA,GAAWJ,EACRK,EAAUC,EAAAA,OAAAN,EALW,CAAA,QAAA,YAAA,WAAA,gBAUxB,MAAOO,EAAWC,GAAgBC,EAAAA,SAAmBC,KAKrDC,EAAAA,WAAU,KACFV,IAAUM,EAAU,IACpBC,EAAaE,IACjB,GACD,CAACT,IAoBJ,SAASS,IACL,OAAgBE,MAATX,EAAqB,CAACA,GAAS,CAAC,EAC3C,CAEA,OACIY,EAAAA,IAACC,mBAAgBC,OAAAC,OAAA,CAAA,EACTX,GACJJ,MAAOM,EACPU,YAAa,EACbd,SAxBcF,IAClB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdf,SAAAA,EAAWe,EAAO,EAsBdd,YAnBiBH,IACrB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdd,SAAAA,EAAcc,EAAO,EAiBjBC,WAAYjB,EAAY,CAACA,QAAaU,IACxC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.js","sources":["../../../src/input-textarea/textarea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea.styles\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n {\n className,\n disabled,\n error,\n maxLength,\n onChange,\n prefix,\n readOnly,\n rows = 5,\n transformValue,\n value,\n ...otherProps\n }: TextareaProps,\n ref: TextareaRef\n) => {\n const [stateValue, setStateValue] = useState(value);\n\n useEffect(() => {\n setStateValue(value);\n }, [value]);\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n let newValue = event.target.value;\n if (prefix) {\n // Ensure prefix is always present\n if (!newValue.startsWith(prefix)) {\n newValue = prefix + newValue.trimStart();\n }\n\n // Prevent deleting the prefix\n if (newValue.length < prefix.length) {\n newValue = prefix;\n }\n\n const cursorPosition = event.target.selectionStart \|\| 0;\n\n // Ensure backspace does not delete the prefix\n if (cursorPosition < prefix.length) {\n event.preventDefault();\n return;\n }\n\n // Extract user input\n const userInput = newValue.slice(prefix.length);\n\n // Transform the input if needed\n const transformedValue = transformValue\n ? transformValue(userInput)\n : userInput;\n\n // Update state and input field\n setStateValue(transformedValue);\n event.target.value = prefix + transformedValue;\n\n // Pass only the user input (without prefix) to `onChange`\n if (onChange) {\n const syntheticEvent = {\n ...event,\n target: { ...event.target, value: transformedValue },\n };\n onChange(\n syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n );\n }\n } else {\n const transformedValue = transformValue\n ? transformValue(newValue ?? \"\")\n : newValue;\n\n setStateValue(transformedValue);\n event.target.value = transformedValue;\n if (onChange) onChange(event);\n }\n };\n\n const getDisplayValue = () => {\n return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (!prefix) return;\n\n const { selectionStart } = event.currentTarget;\n\n // Prevent backspace in prefix\n if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n event.preventDefault();\n }\n\n // Prevent left arrow from moving into prefix\n if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n event.preventDefault();\n }\n\n // Prevent \"Home\" key from moving cursor to beginning\n if (event.key === \"Home\") {\n event.preventDefault();\n requestAnimationFrame(() => {\n event.currentTarget.setSelectionRange(\n prefix.length,\n prefix.length\n );\n });\n }\n };\n\n return (\n <textarea\n ref={ref}\n disabled={disabled}\n value={getDisplayValue()}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n readOnly={readOnly}\n className={clsx(\n styles.element,\n (readOnly && styles.elementReadOnly) \|\|\n (disabled && styles.elementDisabled) \|\|\n (error && styles.elementError),\n className\n )}\n rows={rows}\n maxLength={\n prefix && maxLength ? prefix.length + maxLength : maxLength\n }\n {...otherProps}\n />\n );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n {\n value,\n disabled,\n rows = 5,\n onChange,\n transformValue,\n prefix,\n maxLength,\n renderCustomCounter,\n ...otherProps\n }: TextareaProps,\n ref: TextareaRef\n) => {\n // -------------------------------------------------------------------------\n // CONST, STATE, REF\n // -------------------------------------------------------------------------\n const [stateValue, setStateValue] = useState<\n string \| number \| readonly string[] \| undefined\n >(value);\n\n // -------------------------------------------------------------------------\n // EFFECTS\n // -------------------------------------------------------------------------\n useEffect(() => {\n setStateValue(value);\n }, [value]);\n\n // -------------------------------------------------------------------------\n // EVENT HANDLER\n // -------------------------------------------------------------------------\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = event.target.value;\n setStateValue(newValue);\n if (onChange) onChange(event);\n };\n\n // -------------------------------------------------------------------------\n // RENDER FUNCTIONS\n // -------------------------------------------------------------------------\n return (\n <div className={styles.wrapper}>\n <TextareaBase\n ref={ref}\n disabled={disabled}\n value={stateValue}\n rows={rows \|\| 5}\n onChange={handleChange}\n prefix={prefix}\n transformValue={transformValue}\n maxLength={maxLength}\n {...otherProps}\n />\n {maxLength && (\n <TextareaCounter\n value={stateValue}\n maxLength={maxLength}\n renderCustomCounter={renderCustomCounter}\n />\n )}\n </div>\n );\n};\n\n/*\n A multi-line text input with an optional character counter and prefix.\n */\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","clsx","styles.element","styles.elementReadOnly","styles.elementDisabled","styles.elementError","Textarea","renderCustomCounter","_jsxs","styles.wrapper","children","TextareaCounter"],"mappings":"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"}
1	+ {"version":3,"file":"textarea.js","sources":["../../../src/input-textarea/textarea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea.styles\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n {\n className,\n disabled,\n error,\n maxLength,\n onChange,\n prefix,\n readOnly,\n rows = 5,\n transformValue,\n value,\n ...otherProps\n }: TextareaProps,\n ref: TextareaRef\n) => {\n const [stateValue, setStateValue] = useState(value);\n\n useEffect(() => {\n setStateValue(value);\n }, [value]);\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n let newValue = event.target.value;\n if (prefix) {\n // Ensure prefix is always present\n if (!newValue.startsWith(prefix)) {\n newValue = prefix + newValue.trimStart();\n }\n\n // Prevent deleting the prefix\n if (newValue.length < prefix.length) {\n newValue = prefix;\n }\n\n const cursorPosition = event.target.selectionStart \|\| 0;\n\n // Ensure backspace does not delete the prefix\n if (cursorPosition < prefix.length) {\n event.preventDefault();\n return;\n }\n\n // Extract user input\n const userInput = newValue.slice(prefix.length);\n\n // Transform the input if needed\n const transformedValue = transformValue\n ? transformValue(userInput)\n : userInput;\n\n // Update state and input field\n setStateValue(transformedValue);\n event.target.value = prefix + transformedValue;\n\n // Pass only the user input (without prefix) to `onChange`\n if (onChange) {\n const syntheticEvent = {\n ...event,\n target: { ...event.target, value: transformedValue },\n };\n onChange(\n syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n );\n }\n } else {\n const transformedValue = transformValue\n ? transformValue(newValue ?? \"\")\n : newValue;\n\n setStateValue(transformedValue);\n event.target.value = transformedValue;\n if (onChange) onChange(event);\n }\n };\n\n const getDisplayValue = () => {\n return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n if (!prefix) return;\n\n const { selectionStart } = event.currentTarget;\n\n // Prevent backspace in prefix\n if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n event.preventDefault();\n }\n\n // Prevent left arrow from moving into prefix\n if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n event.preventDefault();\n }\n\n // Prevent \"Home\" key from moving cursor to beginning\n if (event.key === \"Home\") {\n event.preventDefault();\n requestAnimationFrame(() => {\n event.currentTarget.setSelectionRange(\n prefix.length,\n prefix.length\n );\n });\n }\n };\n\n return (\n <textarea\n ref={ref}\n disabled={disabled}\n value={getDisplayValue()}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n readOnly={readOnly}\n className={clsx(\n styles.element,\n (readOnly && styles.elementReadOnly) \|\|\n (disabled && styles.elementDisabled) \|\|\n (error && styles.elementError),\n className\n )}\n rows={rows}\n maxLength={\n prefix && maxLength ? prefix.length + maxLength : maxLength\n }\n {...otherProps}\n />\n );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n {\n value,\n disabled,\n rows = 5,\n onChange,\n transformValue,\n prefix,\n maxLength,\n renderCustomCounter,\n ...otherProps\n }: TextareaProps,\n ref: TextareaRef\n) => {\n // -------------------------------------------------------------------------\n // CONST, STATE, REF\n // -------------------------------------------------------------------------\n const [stateValue, setStateValue] = useState<\n string \| number \| readonly string[] \| undefined\n >(value);\n\n // -------------------------------------------------------------------------\n // EFFECTS\n // -------------------------------------------------------------------------\n useEffect(() => {\n setStateValue(value);\n }, [value]);\n\n // -------------------------------------------------------------------------\n // EVENT HANDLER\n // -------------------------------------------------------------------------\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = event.target.value;\n setStateValue(newValue);\n if (onChange) onChange(event);\n };\n\n // -------------------------------------------------------------------------\n // RENDER FUNCTIONS\n // -------------------------------------------------------------------------\n return (\n <div className={styles.wrapper}>\n <TextareaBase\n ref={ref}\n disabled={disabled}\n value={stateValue}\n rows={rows \|\| 5}\n onChange={handleChange}\n prefix={prefix}\n transformValue={transformValue}\n maxLength={maxLength}\n {...otherProps}\n />\n {maxLength && (\n <TextareaCounter\n value={stateValue}\n maxLength={maxLength}\n renderCustomCounter={renderCustomCounter}\n />\n )}\n </div>\n );\n};\n\n// @catalog\n/*\n A multi-line text input with an optional character counter and prefix.\n */\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","clsx","styles.element","styles.elementReadOnly","styles.elementDisabled","styles.elementError","Textarea","renderCustomCounter","_jsxs","styles.wrapper","children","TextareaCounter"],"mappings":"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"}

package/cjs/input-textarea/textarea.styles.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";require("./textarea.styles_22z4n3.css");exports.element="e10c6rk9",exports.elementDisabled="e9uwuyt",exports.elementError="etmlvbn",exports.elementReadOnly="e1kovz0t",exports.wrapper="w1xqauhq";
+"use strict";require("./textarea.styles_q77m5x.css");exports.element="e10c6rk9",exports.elementDisabled="e9uwuyt",exports.elementError="etmlvbn",exports.elementReadOnly="e1kovz0t",exports.wrapper="w1xqauhq";
 //# sourceMappingURL=textarea.styles.js.map

package/cjs/input-textarea/textarea.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"textarea.styles.js","sources":["../../../src/input-textarea/textarea.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n display: flex;\n flex-direction: column;\n`;\n\nexport const element = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour.bg};\n outline: none;\n overflow: auto;\n\n display: block;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n width: 100%;\n\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:focus,\n &:active {\n outline-offset: -1px;\n outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n ${Colour[\"border-focus\"]};\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n`;\n\nexport const elementReadOnly = css`\n border-color: transparent;\n background: transparent !important;\n padding: ${Spacing[\"spacing-12\"]} 0;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-focus\"]};\n }\n`;\n\nexport const elementDisabled = css`\n background: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-disabled\"]};\n }\n`;\n\nexport const elementError = css`\n border-color: ${Colour[\"border-error\"]};\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-error-focus\"]};\n }\n`;\n"],"names":[],"mappings":"~~mGASoB~~,mCAqDQ,+BAUH,kCArBG,~~2BA/CR~~"}
1	+ {"version":3,"file":"textarea.styles.js","sources":["../../../src/input-textarea/textarea.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n display: flex;\n flex-direction: column;\n gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const element = css`\n border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n border-radius: ${Radius[\"sm\"]};\n background: ${Colour.bg};\n outline: none;\n overflow: auto;\n\n display: block;\n padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n width: 100%;\n\n ${Font[\"body-baseline-regular\"]}\n color: ${Colour[\"text\"]};\n\n &:focus,\n &:active {\n outline-offset: -1px;\n outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n ${Colour[\"border-focus\"]};\n }\n\n &::placeholder,\n &::-webkit-input-placeholder {\n color: ${Colour[\"text-subtler\"]};\n }\n\n &::-webkit-scrollbar {\n width: 14px;\n }\n\n &::-webkit-scrollbar-track {\n background: transparent;\n }\n\n &::-webkit-scrollbar-thumb {\n background: ${Colour[\"bg-inverse-subtlest\"]};\n border: 5px solid transparent;\n border-radius: ${Radius[\"full\"]};\n background-clip: padding-box;\n }\n`;\n\nexport const elementReadOnly = css`\n border-color: transparent;\n background: transparent !important;\n padding: ${Spacing[\"spacing-12\"]} 0;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-focus\"]};\n }\n`;\n\nexport const elementDisabled = css`\n background: ${Colour[\"bg-disabled\"]};\n cursor: not-allowed;\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-disabled\"]};\n }\n`;\n\nexport const elementError = css`\n border-color: ${Colour[\"border-error\"]};\n\n &:focus,\n &:active {\n outline-color: ${Colour[\"border-error-focus\"]};\n }\n`;\n"],"names":[],"mappings":"mGAUoB,mCAqDQ,+BAUH,kCArBG,2BAhDR"}

package/cjs/input-textarea/{textarea.styles_22z4n3.css → textarea.styles_q77m5x.css} RENAMED Viewed

@@ -1,4 +1,4 @@
-@layer fds{.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+@layer fds{.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-8);}
 .e10c6rk9{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);outline:none;overflow:auto;display:block;padding:var(--fds-spacing-12) var(--fds-spacing-16);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.e10c6rk9:focus,.e10c6rk9:active{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-webkit-scrollbar{width:14px;}.e10c6rk9::-webkit-scrollbar-track{background:transparent;}.e10c6rk9::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-moz-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::placeholder{color:var(--fds-colour-text-subtler);}
 .e1kovz0t{border-color:transparent;background:transparent!important;padding:var(--fds-spacing-12) 0;}.e1kovz0t:focus,.e1kovz0t:active{outline-color:var(--fds-colour-border-focus);}
 .e9uwuyt{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.e9uwuyt:focus,.e9uwuyt:active{outline-color:var(--fds-colour-border-disabled);}

package/cjs/language-switcher/language-switcher.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"language-switcher.js","sources":["../../../src/language-switcher/language-switcher.tsx"],"sourcesContent":["import { announce } from \"@react-aria/live-announcer\";\n\nimport { LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownVariant } from \"./dropdown-variant\";\nimport { LinkContainerVariant } from \"./link-container-variant\";\nimport type { LanguageSwitcherCode, LanguageSwitcherProps } from \"./types\";\n\n/*\n A locale-switching control that lets users change the active display language.\n \n Use `LanguageSwitcher` to surface supported languages as either\n * a compact dropdown or a set of inline links.\n */\nexport const LanguageSwitcher = ({\n variant = \"dropdown\",\n selectedLanguage = \"en\",\n onSelectLanguage,\n \"data-testid\": testId = \"language-switcher\",\n ...otherProps\n}: LanguageSwitcherProps): JSX.Element => {\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelectLanguage = (code: LanguageSwitcherCode) => {\n if (code !== selectedLanguage && onSelectLanguage) {\n onSelectLanguage(code);\n announce(`${LANGUAGE_DISPLAY_MAP[code]} selected`, \"polite\");\n }\n };\n\n // =========================================================================\n // RENDER\n // =========================================================================\n switch (variant) {\n case \"dropdown\":\n return (\n <DropdownVariant\n selectedLanguage={selectedLanguage}\n onSelectLanguage={handleSelectLanguage}\n testId={testId}\n {...otherProps}\n />\n );\n case \"link-container\":\n return (\n <LinkContainerVariant\n selectedLanguage={selectedLanguage}\n onSelectLanguage={handleSelectLanguage}\n testId={testId}\n {...otherProps}\n />\n );\n }\n};\n"],"names":["_a","variant","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","handleSelectLanguage","code","announce","LANGUAGE_DISPLAY_MAP","_jsx","DropdownVariant","LinkContainerVariant"],"mappings":"~~uPAaiCA~~,QAAAC,QAC7BA,EAAU,WAAUC,iBACpBA,EAAmB,KAAIC,iBACvBA,EACA,cAAeC,EAAS,qBAAmBJ,EACxCK,EAAUC,EAAAA,OAAAN,EALgB,iEAU7B,MAAMO,EAAwBC,IACtBA,IAASN,GAAoBC,IAC7BA,EAAiBK,GACjBC,EAAAA,SAAS,GAAGC,EAAAA,qBAAqBF,cAAkB,UACvD,EAMJ,OAAQP,GACJ,IAAK,WACD,OACIU,EAAAA,IAACC,EAAAA,+BACGV,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC,IAGhB,IAAK,iBACD,OACIM,EAAAA,IAACE,EAAAA,oCACGX,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC"}
1	+ {"version":3,"file":"language-switcher.js","sources":["../../../src/language-switcher/language-switcher.tsx"],"sourcesContent":["import { announce } from \"@react-aria/live-announcer\";\n\nimport { LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport { DropdownVariant } from \"./dropdown-variant\";\nimport { LinkContainerVariant } from \"./link-container-variant\";\nimport type { LanguageSwitcherCode, LanguageSwitcherProps } from \"./types\";\n\n// @catalog\n/*\n A locale-switching control that lets users change the active display language.\n \n Use `LanguageSwitcher` to surface supported languages as either\n * a compact dropdown or a set of inline links.\n */\nexport const LanguageSwitcher = ({\n variant = \"dropdown\",\n selectedLanguage = \"en\",\n onSelectLanguage,\n \"data-testid\": testId = \"language-switcher\",\n ...otherProps\n}: LanguageSwitcherProps): JSX.Element => {\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleSelectLanguage = (code: LanguageSwitcherCode) => {\n if (code !== selectedLanguage && onSelectLanguage) {\n onSelectLanguage(code);\n announce(`${LANGUAGE_DISPLAY_MAP[code]} selected`, \"polite\");\n }\n };\n\n // =========================================================================\n // RENDER\n // =========================================================================\n switch (variant) {\n case \"dropdown\":\n return (\n <DropdownVariant\n selectedLanguage={selectedLanguage}\n onSelectLanguage={handleSelectLanguage}\n testId={testId}\n {...otherProps}\n />\n );\n case \"link-container\":\n return (\n <LinkContainerVariant\n selectedLanguage={selectedLanguage}\n onSelectLanguage={handleSelectLanguage}\n testId={testId}\n {...otherProps}\n />\n );\n }\n};\n"],"names":["_a","variant","selectedLanguage","onSelectLanguage","testId","otherProps","__rest","handleSelectLanguage","code","announce","LANGUAGE_DISPLAY_MAP","_jsx","DropdownVariant","LinkContainerVariant"],"mappings":"uPAciCA,QAAAC,QAC7BA,EAAU,WAAUC,iBACpBA,EAAmB,KAAIC,iBACvBA,EACA,cAAeC,EAAS,qBAAmBJ,EACxCK,EAAUC,EAAAA,OAAAN,EALgB,iEAU7B,MAAMO,EAAwBC,IACtBA,IAASN,GAAoBC,IAC7BA,EAAiBK,GACjBC,EAAAA,SAAS,GAAGC,EAAAA,qBAAqBF,cAAkB,UACvD,EAMJ,OAAQP,GACJ,IAAK,WACD,OACIU,EAAAA,IAACC,EAAAA,+BACGV,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC,IAGhB,IAAK,iBACD,OACIM,EAAAA,IAACE,EAAAA,oCACGX,iBAAkBA,EAClBC,iBAAkBI,EAClBH,OAAQA,GACJC"}

package/cjs/layout/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/layout/index.ts"],"sourcesContent":["import { ColDiv } from \"./col-div\";\nimport { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\n/*\n A set of structural layout primitives for composing page regions.\n \n Use `Layout` sub-components to establish full-width page sections, centred\n * content areas, and responsive grid columns. Sub-components:\n * - `Layout.ColDiv` — a `<div>` that occupies a responsive column span within a grid `Container`.\n * - `Layout.Container` — a flex or grid layout wrapper constrained to the content width.\n * - `Layout.Content` — the primary content block, composes of `Section` + `Container`. Use `Section` and `Container` directly for more granular control.\n * - `Layout.Section` — a full-width semantic `<section>` page region.\n /\nexport const Layout = {\n /* Renders a `<div>` that occupies a responsive column span within a grid `Container`. /\n ColDiv,\n /* Renders a flex or grid layout wrapper constrained to the content width. /\n Container,\n /* The primary content block — composes a `Section` with an inner `Container`. /\n Content,\n /* Renders a full-width semantic `<section>` page region. /\n Section,\n};\n\nexport from \"./types\";\n"],"names":["Layout","ColDiv","Container","Content","Section"],"mappings":"~~2HAeO~~,MAAMA,EAAS,QAElBC,EAAAA,iBAEAC,EAAAA,kBAEAC,EAAAA,gBAEAC,EAAAA"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/layout/index.ts"],"sourcesContent":["import { ColDiv } from \"./col-div\";\nimport { Container } from \"./container\";\nimport { Content } from \"./content\";\nimport { Section } from \"./section\";\n\n// @catalog\n/*\n A set of structural layout primitives for composing page regions.\n \n Use `Layout` sub-components to establish full-width page sections, centred\n * content areas, and responsive grid columns. Sub-components:\n * - `Layout.ColDiv` — a `<div>` that occupies a responsive column span within a grid `Container`.\n * - `Layout.Container` — a flex or grid layout wrapper constrained to the content width.\n * - `Layout.Content` — the primary content block, composes of `Section` + `Container`. Use `Section` and `Container` directly for more granular control.\n * - `Layout.Section` — a full-width semantic `<section>` page region.\n /\nexport const Layout = {\n /* Renders a `<div>` that occupies a responsive column span within a grid `Container`. /\n ColDiv,\n /* Renders a flex or grid layout wrapper constrained to the content width. /\n Container,\n /* The primary content block — composes a `Section` with an inner `Container`. /\n Content,\n /* Renders a full-width semantic `<section>` page region. /\n Section,\n};\n\nexport from \"./types\";\n"],"names":["Layout","ColDiv","Container","Content","Section"],"mappings":"2HAgBO,MAAMA,EAAS,QAElBC,EAAAA,iBAEAC,EAAAA,kBAEAC,EAAAA,gBAEAC,EAAAA"}

package/cjs/link-list/components/common.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"common.js","sources":["../../../../src/link-list/components/common.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport ~~type~~ { ~~LinkListItemProps,~~ ~~LinkListStyle }~~ from \"../~~internal~~-~~types~~\";\nimport * as ~~styles~~ from \"../~~link-list.styles~~\";\n\ntype LinkListItemsProps<T> = {\n \"data-testid\"?: string \| undefined;\n items: LinkListItemProps<T>[];\n handleItemClick: (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: LinkListItemProps<T>\n ) => void;\n style?: LinkListStyle \| undefined;\n};\nexport const LinkListItems = <T,>({\n \"data-testid\": testId,\n items,\n handleItemClick,\n style,\n}: LinkListItemsProps<T>) => {\n const ItemTitle =\n style === \"small\" ? Typography.HeadingXS : Typography.HeadingSM;\n const itemTitleClassName =\n style === \"small\" ? styles.itemTitleSmall : styles.itemTitleDefault;\n\n return (\n <>\n {items.map((item, index) => {\n const {\n title,\n description,\n secondaryDescription,\n onClick: _onClick, // deconstruct since we are handling it\n className,\n ...otherProps\n } = item;\n\n return (\n <a\n key={`${testId}-${index}`}\n data-testid={`${testId}-${index}`}\n onClick={(event) => handleItemClick(event, item)}\n {...otherProps}\n className={clsx(styles.itemContainer, className)}\n >\n <div className={styles.itemContentContainer}>\n <ItemTitle\n as=\"div\"\n data-testid={`link-title-${index}`}\n weight=\"semibold\"\n className={itemTitleClassName}\n >\n {title}\n </ItemTitle>\n {description && (\n <Typography.BodyMD\n data-testid={`link-description-${index}`}\n className={styles.itemDescription}\n >\n {description}\n </Typography.BodyMD>\n )}\n {secondaryDescription}\n </div>\n <ChevronRightIcon\n aria-hidden\n className={styles.itemIcon}\n />\n </a>\n );\n })}\n </>\n );\n};\n"],"names":["testId","items","handleItemClick","style","ItemTitle","Typography","HeadingXS","HeadingSM","itemTitleClassName","styles.itemTitleSmall","styles.itemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","className","otherProps","_jsxs","event","clsx","styles.itemContainer","styles.itemContentContainer","as","weight","BodyMD","styles.itemDescription","ChevronRightIcon","styles.itemIcon"],"mappings":"2UAiB6B,EACzB,cAAeA,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAAA,WAAWC,UAAYD,EAAAA,WAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAAA,eAAwBC,EAAAA,iBAEhD,OACIC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,WACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,EAAAA,sCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAAA,QAAKC,EAAAA,cAAsBL,GAAUT,SAAA,CAEhDW,EAAAA,KAAA,MAAA,CAAKF,UAAWM,EAAAA,qBAA2Bf,SAAA,CACvCF,EAAAA,IAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAAAA,IAACN,EAAAA,WAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,kBAAsBnB,SAEhCK,IAGRC,KAELR,EAAAA,IAACsB,EAAAA,iBAAgB,CAAA,eAAA,EAEbX,UAAWY,gBA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}
1	+ {"version":3,"file":"common.js","sources":["../../../../src/link-list/components/common.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport * as styles from \"../link-list.styles\";\nimport type { LinkListItemProps, LinkListStyle } from \"../types\";\n\ntype LinkListItemsProps<T> = {\n \"data-testid\"?: string \| undefined;\n items: LinkListItemProps<T>[];\n handleItemClick: (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: LinkListItemProps<T>\n ) => void;\n style?: LinkListStyle \| undefined;\n};\nexport const LinkListItems = <T,>({\n \"data-testid\": testId,\n items,\n handleItemClick,\n style,\n}: LinkListItemsProps<T>) => {\n const ItemTitle =\n style === \"small\" ? Typography.HeadingXS : Typography.HeadingSM;\n const itemTitleClassName =\n style === \"small\" ? styles.itemTitleSmall : styles.itemTitleDefault;\n\n return (\n <>\n {items.map((item, index) => {\n const {\n title,\n description,\n secondaryDescription,\n onClick: _onClick, // deconstruct since we are handling it\n className,\n ...otherProps\n } = item;\n\n return (\n <a\n key={`${testId}-${index}`}\n data-testid={`${testId}-${index}`}\n onClick={(event) => handleItemClick(event, item)}\n {...otherProps}\n className={clsx(styles.itemContainer, className)}\n >\n <div className={styles.itemContentContainer}>\n <ItemTitle\n as=\"div\"\n data-testid={`link-title-${index}`}\n weight=\"semibold\"\n className={itemTitleClassName}\n >\n {title}\n </ItemTitle>\n {description && (\n <Typography.BodyMD\n data-testid={`link-description-${index}`}\n className={styles.itemDescription}\n >\n {description}\n </Typography.BodyMD>\n )}\n {secondaryDescription}\n </div>\n <ChevronRightIcon\n aria-hidden\n className={styles.itemIcon}\n />\n </a>\n );\n })}\n </>\n );\n};\n"],"names":["testId","items","handleItemClick","style","ItemTitle","Typography","HeadingXS","HeadingSM","itemTitleClassName","styles.itemTitleSmall","styles.itemTitleDefault","_jsx","_Fragment","children","map","item","index","title","description","secondaryDescription","onClick","_onClick","className","otherProps","_jsxs","event","clsx","styles.itemContainer","styles.itemContentContainer","as","weight","BodyMD","styles.itemDescription","ChevronRightIcon","styles.itemIcon"],"mappings":"2UAiB6B,EACzB,cAAeA,EACfC,QACAC,kBACAC,YAEA,MAAMC,EACQ,UAAVD,EAAoBE,EAAAA,WAAWC,UAAYD,EAAAA,WAAWE,UACpDC,EACQ,UAAVL,EAAoBM,EAAAA,eAAwBC,EAAAA,iBAEhD,OACIC,EAAAA,IAAAC,EAAAA,SAAA,CAAAC,SACKZ,EAAMa,KAAI,CAACC,EAAMC,KACd,MAAMC,MACFA,EAAKC,YACLA,EAAWC,qBACXA,EACAC,QAASC,EAAQC,UACjBA,GAEAP,EADGQ,WACHR,EAPE,CAAA,QAAA,cAAA,uBAAA,UAAA,cASN,OACIS,EAAAA,sCAEiB,GAAGxB,KAAUgB,IAC1BI,QAAUK,GAAUvB,EAAgBuB,EAAOV,IACvCQ,EAAU,CACdD,UAAWI,EAAAA,QAAKC,EAAAA,cAAsBL,GAAUT,SAAA,CAEhDW,EAAAA,KAAA,MAAA,CAAKF,UAAWM,EAAAA,qBAA2Bf,SAAA,CACvCF,EAAAA,IAACP,EAAS,CACNyB,GAAG,MAAK,cACK,cAAcb,IAC3Bc,OAAO,WACPR,UAAWd,EAAkBK,SAE5BI,IAEJC,GACGP,EAAAA,IAACN,EAAAA,WAAW0B,OAAM,CAAA,cACD,oBAAoBf,IACjCM,UAAWU,kBAAsBnB,SAEhCK,IAGRC,KAELR,EAAAA,IAACsB,EAAAA,iBAAgB,CAAA,eAAA,EAEbX,UAAWY,gBA3BV,GAAGlC,KAAUgB,IA6BlB,KAGb"}

package/cjs/link-list/components/link-list-eager.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link-list-eager.js","sources":["../../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type {\n ~~BaseProps~~,\n LinkListEagerProps,\n LinkListItemProps,\n} from \"../~~internal-~~types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<~~BaseProps~~<T>, \"className\" \| \"data-testid\"> &\n Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n items,\n maxShown,\n style,\n onItemClick,\n customLabels,\n}: Props<T>) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [showMinimised, setShowMinimised] = useState<boolean>(\n maxShown ? maxShown >= items.length : true\n );\n\n const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n\n const id = useId();\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: LinkListItemProps<T>\n ) => {\n /*\n Individual item's onClick will override\n * the onItemClick callback\n */\n if (item.onClick) {\n event.preventDefault();\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item, event);\n }\n\n // Do nothing and let default event happen\n };\n\n const handleToggleButtonClick = () => {\n setShowMinimised(!showMinimised);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderToggle = () => (\n <button\n type=\"button\"\n onClick={handleToggleButtonClick}\n data-testid=\"toggle-button\"\n aria-expanded={showMinimised}\n aria-controls={id}\n className={styles.toggleButton}\n >\n <Typography.BodyMD\n as=\"span\"\n weight=\"semibold\"\n data-testid=\"toggle-button-label\"\n className={styles.toggleButtonLabel}\n >\n {showMinimised\n ? customLabels?.viewLess \|\| \"View less\"\n : customLabels?.viewMore \|\| \"View more\"}\n </Typography.BodyMD>\n {showMinimised ? (\n <MinusIcon aria-hidden className={styles.toggleButtonIcon} />\n ) : (\n <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n )}\n </button>\n );\n\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: showMinimised ? resizeDetector.height : 0,\n });\n\n return (\n <>\n <LinkListItems\n data-testid=\"link-list-items-shown\"\n items={maxShown ? items.slice(0, maxShown) : items}\n handleItemClick={handleListItemClick}\n style={style}\n />\n {itemsMinimised.length > 0 && (\n <animated.div\n id={id}\n style={expandableStyles}\n data-testid=\"minimised-content\"\n inert={inertValue(!showMinimised)}\n className={styles.expandable}\n >\n <div ref={childRef} className={styles.expandableList}>\n <LinkListItems\n data-testid=\"link-list-items-minimised\"\n style={style}\n items={itemsMinimised}\n handleItemClick={handleListItemClick}\n />\n </div>\n </animated.div>\n )}\n {itemsMinimised.length > 0 && renderToggle()}\n </>\n );\n};\n"],"names":["items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_Fragment","children","_jsx","LinkListItems","handleItemClick","animated","div","inert","inertValue","className","styles.expandable","styles.expandableList","type","styles.toggleButton","Typography","BodyMD","as","weight","styles.toggleButtonLabel","viewLess","viewMore","MinusIcon","styles.toggleButtonIcon","PlusIcon"],"mappings":"ynBAoB6B,EACzBA,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,EAAAA,UACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,EAAAA,QAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,cAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAAAA,IAACG,EAAAA,SAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,EAAAA,YAAY9B,GACnB+B,UAAWC,EAAAA,oBAEXR,EAAAA,IAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAAA,eAAqBV,SAChDC,EAAAA,IAACC,gBAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAAA,KAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAAA,aAAmBZ,SAAA,CAE9BC,EAAAA,IAACY,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAAA,kBAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAEnC1C,EACGwB,EAAAA,IAACmB,EAAAA,UAAS,CAAA,eAAA,EAAaZ,UAAWa,EAAAA,mBAElCpB,EAAAA,IAACqB,EAAAA,2BAAqBd,UAAWa,EAAAA,wBAqCtC"}
1	+ {"version":3,"file":"link-list-eager.js","sources":["../../../../src/link-list/components/link-list-eager.tsx"],"sourcesContent":["import { MinusIcon } from \"@lifesg/react-icons/minus\";\nimport { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { inertValue } from \"../../shared/accessibility\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport * as styles from \"../link-list.styles\";\nimport type {\n LinkListBaseProps,\n LinkListEagerProps,\n LinkListItemProps,\n} from \"../types\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<LinkListBaseProps<T>, \"className\" \| \"data-testid\"> &\n Omit<LinkListEagerProps, \"loadMode\">;\nexport const EagerLinkList = <T,>({\n items,\n maxShown,\n style,\n onItemClick,\n customLabels,\n}: Props<T>) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [showMinimised, setShowMinimised] = useState<boolean>(\n maxShown ? maxShown >= items.length : true\n );\n\n const itemsMinimised = maxShown ? items.slice(maxShown) : [];\n\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n\n const id = useId();\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: LinkListItemProps<T>\n ) => {\n /*\n Individual item's onClick will override\n * the onItemClick callback\n */\n if (item.onClick) {\n event.preventDefault();\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item, event);\n }\n\n // Do nothing and let default event happen\n };\n\n const handleToggleButtonClick = () => {\n setShowMinimised(!showMinimised);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderToggle = () => (\n <button\n type=\"button\"\n onClick={handleToggleButtonClick}\n data-testid=\"toggle-button\"\n aria-expanded={showMinimised}\n aria-controls={id}\n className={styles.toggleButton}\n >\n <Typography.BodyMD\n as=\"span\"\n weight=\"semibold\"\n data-testid=\"toggle-button-label\"\n className={styles.toggleButtonLabel}\n >\n {showMinimised\n ? customLabels?.viewLess \|\| \"View less\"\n : customLabels?.viewMore \|\| \"View more\"}\n </Typography.BodyMD>\n {showMinimised ? (\n <MinusIcon aria-hidden className={styles.toggleButtonIcon} />\n ) : (\n <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n )}\n </button>\n );\n\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: showMinimised ? resizeDetector.height : 0,\n });\n\n return (\n <>\n <LinkListItems\n data-testid=\"link-list-items-shown\"\n items={maxShown ? items.slice(0, maxShown) : items}\n handleItemClick={handleListItemClick}\n style={style}\n />\n {itemsMinimised.length > 0 && (\n <animated.div\n id={id}\n style={expandableStyles}\n data-testid=\"minimised-content\"\n inert={inertValue(!showMinimised)}\n className={styles.expandable}\n >\n <div ref={childRef} className={styles.expandableList}>\n <LinkListItems\n data-testid=\"link-list-items-minimised\"\n style={style}\n items={itemsMinimised}\n handleItemClick={handleListItemClick}\n />\n </div>\n </animated.div>\n )}\n {itemsMinimised.length > 0 && renderToggle()}\n </>\n );\n};\n"],"names":["items","maxShown","style","onItemClick","customLabels","showMinimised","setShowMinimised","useState","length","itemsMinimised","slice","resizeDetector","useResizeDetector","childRef","ref","id","useId","handleListItemClick","event","item","onClick","preventDefault","handleToggleButtonClick","expandableStyles","useSpring","height","_jsxs","_Fragment","children","_jsx","LinkListItems","handleItemClick","animated","div","inert","inertValue","className","styles.expandable","styles.expandableList","type","styles.toggleButton","Typography","BodyMD","as","weight","styles.toggleButtonLabel","viewLess","viewMore","MinusIcon","styles.toggleButtonIcon","PlusIcon"],"mappings":"ynBAoB6B,EACzBA,QACAC,WACAC,QACAC,cACAC,mBAKA,MAAOC,EAAeC,GAAoBC,EAAAA,UACtCN,GAAWA,GAAYD,EAAMQ,QAG3BC,EAAiBR,EAAWD,EAAMU,MAAMT,GAAY,GAEpDU,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAE1BC,EAAKC,EAAAA,QAKLC,EAAsB,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACNf,IACPe,EAAMG,iBACNlB,EAAYgB,EAAMD,GACtB,EAKEI,EAA0B,KAC5BhB,GAAkBD,EAAc,EAkC9BkB,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQpB,EAAgBM,EAAec,OAAS,IAGpD,OACIC,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,cAAa,CAAA,cACE,wBACZ9B,MAAOC,EAAWD,EAAMU,MAAM,EAAGT,GAAYD,EAC7C+B,gBAAiBd,EACjBf,MAAOA,IAEVO,EAAeD,OAAS,GACrBqB,EAAAA,IAACG,EAAAA,SAASC,IAAG,CACTlB,GAAIA,EACJb,MAAOqB,EAAgB,cACX,oBACZW,MAAOC,EAAAA,YAAY9B,GACnB+B,UAAWC,EAAAA,oBAEXR,EAAAA,IAAA,MAAA,CAAKf,IAAKD,EAAUuB,UAAWE,EAAAA,eAAqBV,SAChDC,EAAAA,IAACC,gBAAa,CAAA,cACE,4BACZ5B,MAAOA,EACPF,MAAOS,EACPsB,gBAAiBd,QAKhCR,EAAeD,OAAS,GAzD7BkB,EAAAA,KAAA,SAAA,CACIa,KAAK,SACLnB,QAASE,gBACG,gBAAe,gBACZjB,EAAa,gBACbU,EACfqB,UAAWI,EAAAA,aAAmBZ,SAAA,CAE9BC,EAAAA,IAACY,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBACZR,UAAWS,EAAAA,kBAAwBjB,SAElCvB,GACKD,eAAAA,EAAc0C,WAAY,aAC1B1C,aAAY,EAAZA,EAAc2C,WAAY,cAEnC1C,EACGwB,EAAAA,IAACmB,EAAAA,UAAS,CAAA,eAAA,EAAaZ,UAAWa,EAAAA,mBAElCpB,EAAAA,IAACqB,EAAAA,2BAAqBd,UAAWa,EAAAA,wBAqCtC"}

package/cjs/link-list/components/link-list-lazy.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link-list-lazy.js","sources":["../../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport type {\n ~~BaseProps~~,\n LinkListItemProps,\n LinkListLazyProps,\n} from \"../~~internal-~~types\";\nimport * as styles from \"../link-list.styles\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<~~BaseProps~~<T>, \"className\" \| \"data-testid\"> &\n Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n items,\n style,\n onItemClick,\n loadMore,\n onLoadMore,\n customLabels,\n}: Props<T>) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [isLoading, setIsLoading] = useState(false);\n\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: LinkListItemProps<T>\n ) => {\n /*\n Individual item's onClick will override\n * the onItemClick callback\n */\n if (item.onClick) {\n event.preventDefault();\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item, event);\n }\n\n // Do nothing and let default event happen\n };\n\n const handleClickViewMore = async () => {\n if (isLoading) return;\n\n setIsLoading(true);\n try {\n await onLoadMore();\n } catch {\n // do nothing\n }\n setIsLoading(false);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderToggle = () => {\n const label = isLoading\n ? \"Loading...\"\n : customLabels?.viewMore \|\| \"View more\";\n\n return (\n <button\n type=\"button\"\n onClick={handleClickViewMore}\n data-testid=\"toggle-button\"\n aria-disabled={isLoading}\n className={clsx(\n styles.toggleButton,\n isLoading && styles.toggleButtonLoading\n )}\n >\n <Typography.BodyMD\n as=\"span\"\n weight=\"semibold\"\n data-testid=\"toggle-button-label\"\n aria-busy={isLoading}\n className={styles.toggleButtonLabel}\n >\n {label}\n </Typography.BodyMD>\n\n {isLoading ? (\n <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n ) : (\n <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n )}\n </button>\n );\n };\n\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: resizeDetector.height,\n });\n\n return (\n <>\n <animated.div\n style={expandableStyles}\n data-testid=\"content\"\n className={styles.expandable}\n >\n <div ref={childRef}>\n <LinkListItems\n data-testid=\"link-list-items\"\n items={items}\n handleItemClick={handleListItemClick}\n style={style}\n />\n </div>\n </animated.div>\n {loadMore && renderToggle()}\n </>\n );\n};\n"],"names":["items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","animated","div","className","styles.expandable","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","type","clsx","styles.toggleButton","styles.toggleButtonLoading","Typography","BodyMD","as","weight","styles.toggleButtonLabel","ComponentLoadingSpinner","color","Colour","PlusIcon","styles.toggleButtonIcon","renderToggle"],"mappings":"+iCAoB4B,EACxBA,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAErCC,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAyCMS,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,EAAAA,2BACIC,MAACC,EAAAA,SAASC,IAAG,CACTrB,MAAOe,EAAgB,cACX,UACZO,UAAWC,EAAAA,oBAEXJ,EAAAA,IAAA,MAAA,CAAKR,IAAKD,EAAQc,SACdL,EAAAA,IAACM,gBAAa,CAAA,cACE,kBACZ1B,MAAOA,EACP2B,gBArFQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACN1B,IACP0B,EAAMG,iBACN7B,EAAY2B,EAAMD,GACtB,EAwEgB3B,MAAOA,QAIlBE,GAxDY,MACjB,MAAM6B,EAAQ1B,EACR,cACAD,aAAY,EAAZA,EAAc4B,WAAY,YAEhC,OACId,OAAA,SAAA,CACIe,KAAK,SACLJ,QAASjB,EAAmB,cAChB,gCACGP,EACfiB,UAAWY,UACPC,EAAAA,aACA9B,GAAa+B,iCAGjBjB,EAAAA,IAACkB,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBAAqB,YACtBnC,EACXiB,UAAWmB,EAAAA,2BAEVV,IAGJ1B,EACGc,EAAAA,IAACuB,EAAAA,wBAAuB,CAACC,MAAOC,EAAAA,OAAO,mBAEvCzB,EAAAA,IAAC0B,EAAAA,2BAAqBvB,UAAWwB,EAAAA,qBAEhC,EAyBIC,KACd"}
1	+ {"version":3,"file":"link-list-lazy.js","sources":["../../../../src/link-list/components/link-list-lazy.tsx"],"sourcesContent":["import { PlusIcon } from \"@lifesg/react-icons/plus\";\nimport { animated, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { ComponentLoadingSpinner } from \"../../shared/component-loading-spinner\";\nimport { Colour } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport * as styles from \"../link-list.styles\";\nimport type {\n LinkListBaseProps,\n LinkListItemProps,\n LinkListLazyProps,\n} from \"../types\";\nimport { LinkListItems } from \"./common\";\n\ntype Props<T> = Omit<LinkListBaseProps<T>, \"className\" \| \"data-testid\"> &\n Omit<LinkListLazyProps, \"loadMode\">;\nexport const LazyLinkList = <T,>({\n items,\n style,\n onItemClick,\n loadMore,\n onLoadMore,\n customLabels,\n}: Props<T>) => {\n // =============================================================================\n // CONST, STATE, REFS\n // =============================================================================\n const [isLoading, setIsLoading] = useState(false);\n\n const resizeDetector = useResizeDetector();\n const childRef = resizeDetector.ref;\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleListItemClick = (\n event: React.MouseEvent<HTMLAnchorElement>,\n item: LinkListItemProps<T>\n ) => {\n /*\n Individual item's onClick will override\n * the onItemClick callback\n */\n if (item.onClick) {\n event.preventDefault();\n item.onClick(event);\n } else if (onItemClick) {\n event.preventDefault();\n onItemClick(item, event);\n }\n\n // Do nothing and let default event happen\n };\n\n const handleClickViewMore = async () => {\n if (isLoading) return;\n\n setIsLoading(true);\n try {\n await onLoadMore();\n } catch {\n // do nothing\n }\n setIsLoading(false);\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderToggle = () => {\n const label = isLoading\n ? \"Loading...\"\n : customLabels?.viewMore \|\| \"View more\";\n\n return (\n <button\n type=\"button\"\n onClick={handleClickViewMore}\n data-testid=\"toggle-button\"\n aria-disabled={isLoading}\n className={clsx(\n styles.toggleButton,\n isLoading && styles.toggleButtonLoading\n )}\n >\n <Typography.BodyMD\n as=\"span\"\n weight=\"semibold\"\n data-testid=\"toggle-button-label\"\n aria-busy={isLoading}\n className={styles.toggleButtonLabel}\n >\n {label}\n </Typography.BodyMD>\n\n {isLoading ? (\n <ComponentLoadingSpinner color={Colour[\"text-disabled\"]} />\n ) : (\n <PlusIcon aria-hidden className={styles.toggleButtonIcon} />\n )}\n </button>\n );\n };\n\n // React spring animation configuration\n const expandableStyles = useSpring({\n height: resizeDetector.height,\n });\n\n return (\n <>\n <animated.div\n style={expandableStyles}\n data-testid=\"content\"\n className={styles.expandable}\n >\n <div ref={childRef}>\n <LinkListItems\n data-testid=\"link-list-items\"\n items={items}\n handleItemClick={handleListItemClick}\n style={style}\n />\n </div>\n </animated.div>\n {loadMore && renderToggle()}\n </>\n );\n};\n"],"names":["items","style","onItemClick","loadMore","onLoadMore","customLabels","isLoading","setIsLoading","useState","resizeDetector","useResizeDetector","childRef","ref","handleClickViewMore","__awaiter","_a","expandableStyles","useSpring","height","_jsxs","_jsx","animated","div","className","styles.expandable","children","LinkListItems","handleItemClick","event","item","onClick","preventDefault","label","viewMore","type","clsx","styles.toggleButton","styles.toggleButtonLoading","Typography","BodyMD","as","weight","styles.toggleButtonLabel","ComponentLoadingSpinner","color","Colour","PlusIcon","styles.toggleButtonIcon","renderToggle"],"mappings":"+iCAoB4B,EACxBA,QACAC,QACAC,cACAC,WACAC,aACAC,mBAKA,MAAOC,EAAWC,GAAgBC,EAAAA,UAAS,GAErCC,EAAiBC,EAAAA,oBACjBC,EAAWF,EAAeG,IAwB1BC,EAAsB,IAAWC,EAAAA,eAAA,OAAA,OAAA,GAAA,YACnC,IAAIR,EAAJ,CAEAC,GAAa,GACb,UACUH,GACV,CAAE,MAAAW,GAEF,CACAR,GAAa,EARE,CASnB,IAyCMS,EAAmBC,EAAAA,UAAU,CAC/BC,OAAQT,EAAeS,SAG3B,OACIC,EAAAA,2BACIC,MAACC,EAAAA,SAASC,IAAG,CACTrB,MAAOe,EAAgB,cACX,UACZO,UAAWC,EAAAA,oBAEXJ,EAAAA,IAAA,MAAA,CAAKR,IAAKD,EAAQc,SACdL,EAAAA,IAACM,gBAAa,CAAA,cACE,kBACZ1B,MAAOA,EACP2B,gBArFQ,CACxBC,EACAC,KAMIA,EAAKC,SACLF,EAAMG,iBACNF,EAAKC,QAAQF,IACN1B,IACP0B,EAAMG,iBACN7B,EAAY2B,EAAMD,GACtB,EAwEgB3B,MAAOA,QAIlBE,GAxDY,MACjB,MAAM6B,EAAQ1B,EACR,cACAD,aAAY,EAAZA,EAAc4B,WAAY,YAEhC,OACId,OAAA,SAAA,CACIe,KAAK,SACLJ,QAASjB,EAAmB,cAChB,gCACGP,EACfiB,UAAWY,UACPC,EAAAA,aACA9B,GAAa+B,iCAGjBjB,EAAAA,IAACkB,EAAAA,WAAWC,OAAM,CACdC,GAAG,OACHC,OAAO,WAAU,cACL,sBAAqB,YACtBnC,EACXiB,UAAWmB,EAAAA,2BAEVV,IAGJ1B,EACGc,EAAAA,IAACuB,EAAAA,wBAAuB,CAACC,MAAOC,EAAAA,OAAO,mBAEvCzB,EAAAA,IAAC0B,EAAAA,2BAAqBvB,UAAWwB,EAAAA,qBAEhC,EAyBIC,KACd"}

package/cjs/link-list/link-list.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"link-list.js","sources":["../../../src/link-list/link-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { EagerLinkList } from \"./components/link-list-eager\";\nimport { LazyLinkList } from \"./components/link-list-lazy\";\nimport * as styles from \"./link-list.styles\";\nimport type { LinkListProps } from \"./types\";\n\n/*\n A list of anchor links with optional truncation or lazy loading.\n \n Use `LinkList` to display a set of navigable links with titles and optional\n * descriptions.\n */\nexport const LinkList = <T,>(props: LinkListProps<T>): JSX.Element => {\n if (!props.loadMode \|\| props.loadMode === \"eager\") {\n const {\n loadMode: _loadMode,\n items,\n style = \"default\",\n onItemClick,\n maxShown,\n customLabels,\n className,\n ...otherProps\n } = props;\n\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <EagerLinkList\n items={items}\n maxShown={maxShown}\n style={style}\n onItemClick={onItemClick}\n customLabels={customLabels}\n />\n </div>\n );\n }\n if (props.loadMode === \"lazy\") {\n {\n const {\n loadMode: _loadMode,\n items,\n style = \"default\",\n onItemClick,\n loadMore,\n onLoadMore,\n customLabels,\n className,\n ...otherProps\n } = props;\n\n return (\n <div\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <LazyLinkList\n items={items}\n style={style}\n onItemClick={onItemClick}\n loadMore={loadMore}\n onLoadMore={onLoadMore}\n customLabels={customLabels}\n />\n </div>\n );\n }\n }\n\n return <></>;\n};\n"],"names":["props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","EagerLinkList","loadMore","onLoadMore","children","LazyLinkList"],"mappings":"~~qUAa6BA~~,IACzB,IAAKA,EAAMC,UAA+B,UAAnBD,EAAMC,SAAsB,CAC/C,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWC,SACXA,EAAQC,aACRA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,SACbV,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,eAAA,cAWN,OACIW,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,GAAYD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,YACnDG,EAAAA,IAACK,EAAAA,eACGb,MAAOA,EACPG,SAAUA,EACVF,MAAOA,EACPC,YAAaA,EACbE,aAAcA,MAI9B,CACA,GAAuB,SAAnBP,EAAMC,SACN,CACI,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWY,SACXA,EAAQC,WACRA,EAAUX,aACVA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,SACbV,EAVE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,eAAA,cAYN,OACIW,EAAAA,2BACQF,EAAU,CACdD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,GAAUW,SAE5CR,EAAAA,IAACS,EAAAA,aAAY,CACTjB,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbY,SAAUA,EACVC,WAAYA,EACZX,aAAcA,MAI9B,CAGJ,OAAOI,EAAAA,kBAAK"}
1	+ {"version":3,"file":"link-list.js","sources":["../../../src/link-list/link-list.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { EagerLinkList } from \"./components/link-list-eager\";\nimport { LazyLinkList } from \"./components/link-list-lazy\";\nimport * as styles from \"./link-list.styles\";\nimport type { LinkListProps } from \"./types\";\n\n// @catalog\n/*\n A list of anchor links with optional truncation or lazy loading.\n \n Use `LinkList` to display a set of navigable links with titles and optional\n * descriptions.\n */\nexport const LinkList = <T,>(props: LinkListProps<T>): JSX.Element => {\n if (!props.loadMode \|\| props.loadMode === \"eager\") {\n const {\n loadMode: _loadMode,\n items,\n style = \"default\",\n onItemClick,\n maxShown,\n customLabels,\n className,\n ...otherProps\n } = props;\n\n return (\n <div {...otherProps} className={clsx(styles.container, className)}>\n <EagerLinkList\n items={items}\n maxShown={maxShown}\n style={style}\n onItemClick={onItemClick}\n customLabels={customLabels}\n />\n </div>\n );\n }\n if (props.loadMode === \"lazy\") {\n {\n const {\n loadMode: _loadMode,\n items,\n style = \"default\",\n onItemClick,\n loadMore,\n onLoadMore,\n customLabels,\n className,\n ...otherProps\n } = props;\n\n return (\n <div\n {...otherProps}\n className={clsx(styles.container, className)}\n >\n <LazyLinkList\n items={items}\n style={style}\n onItemClick={onItemClick}\n loadMore={loadMore}\n onLoadMore={onLoadMore}\n customLabels={customLabels}\n />\n </div>\n );\n }\n }\n\n return <></>;\n};\n"],"names":["props","loadMode","_loadMode","items","style","onItemClick","maxShown","customLabels","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.container","EagerLinkList","loadMore","onLoadMore","children","LazyLinkList"],"mappings":"qUAc6BA,IACzB,IAAKA,EAAMC,UAA+B,UAAnBD,EAAMC,SAAsB,CAC/C,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWC,SACXA,EAAQC,aACRA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,SACbV,EATE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,eAAA,cAWN,OACIW,EAAAA,IAAA,MAAAC,OAAAC,OAAA,CAAA,EAASJ,GAAYD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,YACnDG,EAAAA,IAACK,EAAAA,eACGb,MAAOA,EACPG,SAAUA,EACVF,MAAOA,EACPC,YAAaA,EACbE,aAAcA,MAI9B,CACA,GAAuB,SAAnBP,EAAMC,SACN,CACI,MACIA,SAAUC,EAASC,MACnBA,EAAKC,MACLA,EAAQ,UAASC,YACjBA,EAAWY,SACXA,EAAQC,WACRA,EAAUX,aACVA,EAAYC,UACZA,GAEAR,EADGS,EAAUC,SACbV,EAVE,CAAA,WAAA,QAAA,QAAA,cAAA,WAAA,aAAA,eAAA,cAYN,OACIW,EAAAA,2BACQF,EAAU,CACdD,UAAWM,EAAAA,QAAKC,EAAAA,UAAkBP,GAAUW,SAE5CR,EAAAA,IAACS,EAAAA,aAAY,CACTjB,MAAOA,EACPC,MAAOA,EACPC,YAAaA,EACbY,SAAUA,EACVC,WAAYA,EACZX,aAAcA,MAI9B,CAGJ,OAAOI,EAAAA,kBAAK"}

package/cjs/local-nav/local-nav-dropdown/local-nav-dropdown.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n {\n defaultLabel,\n stickyOffset = 0,\n onNavItemSelect,\n items,\n selectedItemIndex,\n id,\n \"data-testid\": testId,\n className,\n renderItem,\n }: LocalNavDropdownProps,\n ref: React.Ref<HTMLElement>\n): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const detectStickyRef = useRef<HTMLSpanElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const navWrapperRef = useRef<HTMLElement>(null);\n const navItemListRef = useRef<HTMLUListElement>(null);\n const listItemRefs = useRef<(HTMLLIElement \| null)[]>([]);\n const [isStickied, setIsStickied] = useState<boolean>(false);\n const [isDropdownExpanded, setIsDropdownExpanded] =\n useState<boolean>(false);\n const [viewportHeight, setViewportHeight] = useState(0);\n const [dropdowntHeight, setDropdownHeight] = useState(0);\n const [dynamicMargin, setDynamicMargin] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const navTestId = testId \|\| \"local-nav-dropdown\";\n const dropdownListId = useId();\n\n useImperativeHandle(ref, () => navWrapperRef.current!);\n\n useApplyStyle(navWrapperRef, {\n [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n });\n\n useApplyStyle(navItemListRef, {\n [styles.tokens.navItemList.viewportHeight]: `${\n viewportHeight - dropdowntHeight - stickyOffset\n }px`,\n });\n\n const labelText =\n typeof selectedItemIndex === \"number\" &&\n selectedItemIndex >= 0 &&\n isStickied\n ? items[selectedItemIndex].title\n : defaultLabel;\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n\n useEffect(() => {\n if (dropdownRef.current) {\n const dropdownHeight =\n dropdownRef.current.getBoundingClientRect().height;\n setDropdownHeight(dropdownHeight);\n }\n }, []);\n\n useEffect(() => {\n addStylesheetForDocumentBody();\n return () => {\n applyBodyStyleClass(\"remove\");\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded && isStickied) {\n applyBodyStyleClass(\"add\");\n } else {\n applyBodyStyleClass(\"remove\");\n }\n }, [isDropdownExpanded, isStickied]);\n\n useEffect(() => {\n setViewportHeight(window.innerHeight);\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n const callback = (entries: IntersectionObserverEntry[]) => {\n const [entry] = entries;\n setIsStickied(!entry.isIntersecting);\n };\n\n const observer = new IntersectionObserver(callback, {\n threshold: 1,\n rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n });\n\n if (detectStickyRef.current) {\n observer.observe(detectStickyRef.current);\n }\n\n return () => observer.disconnect();\n }, [stickyOffset]);\n\n useEffect(() => {\n const adjustPadding = () => {\n const dropdown = navWrapperRef?.current;\n if (dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const spaceToRight =\n document.body.clientWidth - dropdownRect.right;\n const spaceToLeft = dropdownRect.left;\n // Calculate the padding needed to balance the dropdown in the viewport\n const sidePadding = Math.max(spaceToRight, spaceToLeft);\n setDynamicMargin(sidePadding);\n }\n };\n adjustPadding();\n\n window.addEventListener(\"resize\", adjustPadding);\n\n return () => {\n window.removeEventListener(\"resize\", adjustPadding);\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded) {\n listItemRefs.current[focusedIndex]?.focus();\n }\n }, [isDropdownExpanded, focusedIndex]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const addStylesheetForDocumentBody = () => {\n /*\n This stylesheet is to manipulate the <body>. We only add once\n /\n if (!document.getElementById(STYLESHEET_ID)) {\n const overlayStyleSheet = document.createElement(\"style\");\n overlayStyleSheet.id = STYLESHEET_ID;\n\n const documentWidth = document.documentElement.clientWidth;\n const windowWidth = window.innerWidth;\n const scrollBarWidth = windowWidth - documentWidth;\n\n overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n document.body.appendChild(overlayStyleSheet);\n }\n };\n\n const applyBodyStyleClass = (action: \"add\" \| \"remove\") => {\n const isOverlayStyleClassApplied = document.body.classList.contains(\n DROPDOWN_OPEN_CLASSNAME\n );\n\n if (action === \"add\" && !isOverlayStyleClassApplied) {\n document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const handleToggleDropdown = () => {\n setIsDropdownExpanded((prev) => !prev);\n };\n\n const handleDismissBackdrop = () => {\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemClick = (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n item: LocalNavItemProps,\n index: number\n ) => {\n if (onNavItemSelect) {\n onNavItemSelect(e, item, index);\n }\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemKeyDown = (\n e: React.KeyboardEvent<HTMLElement>,\n handleClick: (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>\n ) => void\n ) => {\n const { key } = e;\n\n if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n handleClick(e);\n }\n };\n\n const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(0);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(items.length - 1);\n } else if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n setIsDropdownExpanded(true);\n setFocusedIndex(0);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n }\n };\n\n const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n const nextIndex = (focusedIndex + 1) % items.length;\n setFocusedIndex(nextIndex);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n const prevIndex =\n focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n setFocusedIndex(prevIndex);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n dropdownRef.current?.focus();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDropdownNavItem = ({\n handleClick,\n isSelected,\n item,\n renderItem,\n index,\n }: LocalNavDropdownItemComponentProps) => {\n const { id, title } = item;\n\n if (renderItem) {\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el;\n }}\n >\n {renderItem(item, {\n selected: isSelected,\n stickied: isStickied,\n })}\n </li>\n );\n }\n\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n className={clsx(\n styles.navItem,\n isSelected && isStickied && styles.navItemSelected\n )}\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el as HTMLLIElement;\n }}\n >\n {isSelected && <TickIcon className={styles.tickIcon} />}\n <div\n className={clsx(\n styles.navItemLabel,\n isSelected && styles.navItemLabelSelected\n )}\n >\n {title}\n </div>\n </li>\n );\n };\n\n return (\n <>\n <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n <nav\n ref={navWrapperRef}\n id={id}\n data-testid={navTestId}\n className={clsx(\n styles.navWrapper,\n isStickied && styles.navWrapperStickied,\n className\n )}\n >\n <div\n ref={dropdownRef}\n role=\"button\"\n onClick={handleToggleDropdown}\n onKeyDown={handleNavSelectKeyDown}\n data-testid={`${navTestId}-label`}\n className={clsx(\n styles.navSelect,\n isDropdownExpanded && styles.navSelectExpanded\n )}\n aria-haspopup=\"true\"\n aria-expanded={isDropdownExpanded}\n aria-controls={dropdownListId}\n tabIndex={0}\n >\n <Typography.BodyBL weight=\"semibold\">\n {labelText}\n </Typography.BodyBL>\n <ChevronDownIcon\n className={clsx(\n styles.navSelectIcon,\n isDropdownExpanded && styles.navSelectIconExpanded\n )}\n />\n </div>\n {isDropdownExpanded && (\n <ul\n ref={navItemListRef}\n id={dropdownListId}\n role=\"menu\"\n onKeyDown={handleNavItemListKeyDown}\n data-testid={`${navTestId}-dropdown-list`}\n className={styles.navItemList}\n >\n {items.map((item, i) =>\n renderDropdownNavItem({\n handleClick: (e) =>\n handleNavItemClick(e, item, i),\n isSelected: i === selectedItemIndex,\n item,\n renderItem,\n index: i,\n })\n )}\n </ul>\n )}\n {isDropdownExpanded && isStickied && (\n <div\n className={styles.backdrop}\n onClick={handleDismissBackdrop}\n />\n )}\n </nav>\n </>\n );\n};\n\n/\n A collapsible dropdown used for in-page navigation on mobile viewports.\n \n Use `LocalNavDropdown` when the page has multiple named sections and screen\n * width is insufficient for a persistent sidebar.\n \n @remarks\n * This component adopts a fundamentally different interaction model from\n * `LocalNavMenu`: it collapses into a single trigger button and uses a menu\n * overlay, making it suited for mobile while `LocalNavMenu` suits desktop.\n */\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","TickIcon","styles.tickIcon","styles.navItemLabel","styles.navItemLabelSelected","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}
1	+ {"version":3,"file":"local-nav-dropdown.js","sources":["../../../../src/local-nav/local-nav-dropdown/local-nav-dropdown.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { Typography } from \"../../typography\";\nimport { useId } from \"../../util\";\nimport type { LocalNavDropdownItemComponentProps } from \"../internal-types\";\nimport type { LocalNavDropdownProps, LocalNavItemProps } from \"../types\";\nimport * as styles from \"./local-nav-dropdown.styles\";\n\nconst Component = (\n {\n defaultLabel,\n stickyOffset = 0,\n onNavItemSelect,\n items,\n selectedItemIndex,\n id,\n \"data-testid\": testId,\n className,\n renderItem,\n }: LocalNavDropdownProps,\n ref: React.Ref<HTMLElement>\n): JSX.Element => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const detectStickyRef = useRef<HTMLSpanElement>(null);\n const dropdownRef = useRef<HTMLDivElement>(null);\n const navWrapperRef = useRef<HTMLElement>(null);\n const navItemListRef = useRef<HTMLUListElement>(null);\n const listItemRefs = useRef<(HTMLLIElement \| null)[]>([]);\n const [isStickied, setIsStickied] = useState<boolean>(false);\n const [isDropdownExpanded, setIsDropdownExpanded] =\n useState<boolean>(false);\n const [viewportHeight, setViewportHeight] = useState(0);\n const [dropdowntHeight, setDropdownHeight] = useState(0);\n const [dynamicMargin, setDynamicMargin] = useState(0);\n const [focusedIndex, setFocusedIndex] = useState(0);\n const navTestId = testId \|\| \"local-nav-dropdown\";\n const dropdownListId = useId();\n\n useImperativeHandle(ref, () => navWrapperRef.current!);\n\n useApplyStyle(navWrapperRef, {\n [styles.tokens.navWrapper.stickyOffset]: `${stickyOffset}px`,\n [styles.tokens.navWrapper.sideMargin]: `${dynamicMargin}px`,\n });\n\n useApplyStyle(navItemListRef, {\n [styles.tokens.navItemList.viewportHeight]: `${\n viewportHeight - dropdowntHeight - stickyOffset\n }px`,\n });\n\n const labelText =\n typeof selectedItemIndex === \"number\" &&\n selectedItemIndex >= 0 &&\n isStickied\n ? items[selectedItemIndex].title\n : defaultLabel;\n\n // =============================================================================\n // EFFECTS, EVENT LISTENERS\n // ============================================================================\n\n useEffect(() => {\n if (dropdownRef.current) {\n const dropdownHeight =\n dropdownRef.current.getBoundingClientRect().height;\n setDropdownHeight(dropdownHeight);\n }\n }, []);\n\n useEffect(() => {\n addStylesheetForDocumentBody();\n return () => {\n applyBodyStyleClass(\"remove\");\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded && isStickied) {\n applyBodyStyleClass(\"add\");\n } else {\n applyBodyStyleClass(\"remove\");\n }\n }, [isDropdownExpanded, isStickied]);\n\n useEffect(() => {\n setViewportHeight(window.innerHeight);\n const handleResize = () => {\n setViewportHeight(window.innerHeight);\n };\n window.addEventListener(\"resize\", handleResize);\n return () => window.removeEventListener(\"resize\", handleResize);\n }, []);\n\n useEffect(() => {\n const callback = (entries: IntersectionObserverEntry[]) => {\n const [entry] = entries;\n setIsStickied(!entry.isIntersecting);\n };\n\n const observer = new IntersectionObserver(callback, {\n threshold: 1,\n rootMargin: `-${stickyOffset}px 0px 0px 0px`,\n });\n\n if (detectStickyRef.current) {\n observer.observe(detectStickyRef.current);\n }\n\n return () => observer.disconnect();\n }, [stickyOffset]);\n\n useEffect(() => {\n const adjustPadding = () => {\n const dropdown = navWrapperRef?.current;\n if (dropdown) {\n const dropdownRect = dropdown.getBoundingClientRect();\n const spaceToRight =\n document.body.clientWidth - dropdownRect.right;\n const spaceToLeft = dropdownRect.left;\n // Calculate the padding needed to balance the dropdown in the viewport\n const sidePadding = Math.max(spaceToRight, spaceToLeft);\n setDynamicMargin(sidePadding);\n }\n };\n adjustPadding();\n\n window.addEventListener(\"resize\", adjustPadding);\n\n return () => {\n window.removeEventListener(\"resize\", adjustPadding);\n };\n }, []);\n\n useEffect(() => {\n if (isDropdownExpanded) {\n listItemRefs.current[focusedIndex]?.focus();\n }\n }, [isDropdownExpanded, focusedIndex]);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const addStylesheetForDocumentBody = () => {\n /*\n This stylesheet is to manipulate the <body>. We only add once\n /\n if (!document.getElementById(STYLESHEET_ID)) {\n const overlayStyleSheet = document.createElement(\"style\");\n overlayStyleSheet.id = STYLESHEET_ID;\n\n const documentWidth = document.documentElement.clientWidth;\n const windowWidth = window.innerWidth;\n const scrollBarWidth = windowWidth - documentWidth;\n\n overlayStyleSheet.innerHTML = `\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${DROPDOWN_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n document.body.appendChild(overlayStyleSheet);\n }\n };\n\n const applyBodyStyleClass = (action: \"add\" \| \"remove\") => {\n const isOverlayStyleClassApplied = document.body.classList.contains(\n DROPDOWN_OPEN_CLASSNAME\n );\n\n if (action === \"add\" && !isOverlayStyleClassApplied) {\n document.body.classList.add(DROPDOWN_OPEN_CLASSNAME);\n } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n document.body.classList.remove(DROPDOWN_OPEN_CLASSNAME);\n }\n };\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n\n const handleToggleDropdown = () => {\n setIsDropdownExpanded((prev) => !prev);\n };\n\n const handleDismissBackdrop = () => {\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemClick = (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>,\n item: LocalNavItemProps,\n index: number\n ) => {\n if (onNavItemSelect) {\n onNavItemSelect(e, item, index);\n }\n setIsDropdownExpanded(false);\n };\n\n const handleNavItemKeyDown = (\n e: React.KeyboardEvent<HTMLElement>,\n handleClick: (\n e: React.MouseEvent<HTMLElement> \| React.KeyboardEvent<HTMLElement>\n ) => void\n ) => {\n const { key } = e;\n\n if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n handleClick(e);\n }\n };\n\n const handleNavSelectKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(0);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n if (!isDropdownExpanded) {\n setIsDropdownExpanded(true);\n }\n setFocusedIndex(items.length - 1);\n } else if (key === \"Enter\" \|\| key === \" \") {\n e.preventDefault();\n setIsDropdownExpanded(true);\n setFocusedIndex(0);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n }\n };\n\n const handleNavItemListKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n const { key } = e;\n\n if (key === \"ArrowDown\") {\n e.preventDefault();\n const nextIndex = (focusedIndex + 1) % items.length;\n setFocusedIndex(nextIndex);\n } else if (key === \"ArrowUp\") {\n e.preventDefault();\n const prevIndex =\n focusedIndex > 0 ? focusedIndex - 1 : items.length - 1;\n setFocusedIndex(prevIndex);\n } else if (key === \"Tab\") {\n setIsDropdownExpanded(false);\n } else if (key === \"Escape\") {\n setIsDropdownExpanded(false);\n dropdownRef.current?.focus();\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n\n const renderDropdownNavItem = ({\n handleClick,\n isSelected,\n item,\n renderItem,\n index,\n }: LocalNavDropdownItemComponentProps) => {\n const { id, title } = item;\n\n if (renderItem) {\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el;\n }}\n >\n {renderItem(item, {\n selected: isSelected,\n stickied: isStickied,\n })}\n </li>\n );\n }\n\n return (\n <li\n id={id}\n key={index}\n role=\"menuitem\"\n className={clsx(\n styles.navItem,\n isSelected && isStickied && styles.navItemSelected\n )}\n onClick={handleClick}\n onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n aria-current={isSelected ? true : undefined}\n tabIndex={-1}\n ref={(el) => {\n listItemRefs.current[index] = el as HTMLLIElement;\n }}\n >\n {isSelected && <TickIcon className={styles.tickIcon} />}\n <div\n className={clsx(\n styles.navItemLabel,\n isSelected && styles.navItemLabelSelected\n )}\n >\n {title}\n </div>\n </li>\n );\n };\n\n return (\n <>\n <span ref={detectStickyRef} data-testid={\"sticky-ref\"} />\n <nav\n ref={navWrapperRef}\n id={id}\n data-testid={navTestId}\n className={clsx(\n styles.navWrapper,\n isStickied && styles.navWrapperStickied,\n className\n )}\n >\n <div\n ref={dropdownRef}\n role=\"button\"\n onClick={handleToggleDropdown}\n onKeyDown={handleNavSelectKeyDown}\n data-testid={`${navTestId}-label`}\n className={clsx(\n styles.navSelect,\n isDropdownExpanded && styles.navSelectExpanded\n )}\n aria-haspopup=\"true\"\n aria-expanded={isDropdownExpanded}\n aria-controls={dropdownListId}\n tabIndex={0}\n >\n <Typography.BodyBL weight=\"semibold\">\n {labelText}\n </Typography.BodyBL>\n <ChevronDownIcon\n className={clsx(\n styles.navSelectIcon,\n isDropdownExpanded && styles.navSelectIconExpanded\n )}\n />\n </div>\n {isDropdownExpanded && (\n <ul\n ref={navItemListRef}\n id={dropdownListId}\n role=\"menu\"\n onKeyDown={handleNavItemListKeyDown}\n data-testid={`${navTestId}-dropdown-list`}\n className={styles.navItemList}\n >\n {items.map((item, i) =>\n renderDropdownNavItem({\n handleClick: (e) =>\n handleNavItemClick(e, item, i),\n isSelected: i === selectedItemIndex,\n item,\n renderItem,\n index: i,\n })\n )}\n </ul>\n )}\n {isDropdownExpanded && isStickied && (\n <div\n className={styles.backdrop}\n onClick={handleDismissBackdrop}\n />\n )}\n </nav>\n </>\n );\n};\n// @catalog\n/\n A collapsible dropdown used for in-page navigation on mobile viewports.\n \n Use `LocalNavDropdown` when the page has multiple named sections and screen\n * width is insufficient for a persistent sidebar.\n \n @remarks\n * This component adopts a fundamentally different interaction model from\n * `LocalNavMenu`: it collapses into a single trigger button and uses a menu\n * overlay, making it suited for mobile while `LocalNavMenu` suits desktop.\n */\nexport const LocalNavDropdown = React.forwardRef(Component);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-local-nav-dropdown-stylesheet\";\nconst DROPDOWN_OPEN_CLASSNAME = \"lifesg-ds-local-nav-dropdown-open\";\n"],"names":["LocalNavDropdown","React","forwardRef","defaultLabel","stickyOffset","onNavItemSelect","items","selectedItemIndex","id","testId","className","renderItem","ref","detectStickyRef","useRef","dropdownRef","navWrapperRef","navItemListRef","listItemRefs","isStickied","setIsStickied","useState","isDropdownExpanded","setIsDropdownExpanded","viewportHeight","setViewportHeight","dropdowntHeight","setDropdownHeight","dynamicMargin","setDynamicMargin","focusedIndex","setFocusedIndex","navTestId","dropdownListId","useId","useImperativeHandle","current","useApplyStyle","styles.tokens","navWrapper","sideMargin","navItemList","labelText","title","useEffect","dropdownHeight","getBoundingClientRect","height","addStylesheetForDocumentBody","applyBodyStyleClass","window","innerHeight","handleResize","addEventListener","removeEventListener","observer","IntersectionObserver","entries","entry","isIntersecting","threshold","rootMargin","observe","disconnect","adjustPadding","dropdown","dropdownRect","spaceToRight","document","body","clientWidth","right","spaceToLeft","left","sidePadding","Math","max","_a","focus","getElementById","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","scrollBarWidth","innerWidth","innerHTML","DROPDOWN_OPEN_CLASSNAME","appendChild","action","isOverlayStyleClassApplied","classList","contains","remove","add","handleNavItemKeyDown","e","handleClick","key","preventDefault","_jsxs","_Fragment","children","_jsx","clsx","styles.navWrapper","styles.navWrapperStickied","role","onClick","prev","onKeyDown","length","styles.navSelect","styles.navSelectExpanded","tabIndex","Typography","BodyBL","weight","ChevronDownIcon","styles.navSelectIcon","styles.navSelectIconExpanded","nextIndex","prevIndex","styles.navItemList","map","item","i","isSelected","index","undefined","el","selected","stickied","styles.navItem","styles.navItemSelected","TickIcon","styles.tickIcon","styles.navItemLabel","styles.navItemLabelSelected","renderDropdownNavItem","handleNavItemClick","styles.backdrop"],"mappings":"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"}