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/toggle/toggle.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\n/*\n A selectable control for checkbox and radio interaction patterns.\n \n Use `Toggle` to present a labeled option that the user can select or\n * deselect.\n */\nexport const Toggle = ({\n type = \"checkbox\",\n indicator,\n checked,\n styleType = \"default\",\n children,\n childrenMaxLines,\n subLabel,\n disabled,\n error,\n name,\n id,\n className,\n compositeSection,\n removable,\n focusableWhenDisabled,\n useContentWidth,\n onRemove,\n onChange,\n \"data-testid\": testId,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: ToggleProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n collapsible = true,\n errors,\n children: compositeSectionChildren,\n initialExpanded,\n } = compositeSection \|\| {};\n const [selected, setSelected] = useState<boolean \| undefined>(checked);\n const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n const hasCompositeSectionError = useMemo(() => {\n const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n const hasErrorElement = !Array.isArray(errors) && !!errors;\n return hasErrorList \|\| hasErrorElement;\n }, [errors]);\n const uniqueId = useId();\n const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const labelRef = useRef<HTMLLabelElement>(null);\n\n useApplyStyle(labelRef, {\n [styles.tokens.label.desktopLineClamp]:\n childrenMaxLines?.desktop == null\n ? null\n : `${childrenMaxLines.desktop}`,\n [styles.tokens.label.tabletLineClamp]:\n childrenMaxLines?.tablet == null\n ? null\n : `${childrenMaxLines.tablet}`,\n [styles.tokens.label.mobileLineClamp]:\n childrenMaxLines?.mobile == null\n ? null\n : `${childrenMaxLines.mobile}`,\n });\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n const isInteractionBlocked = !!disabled;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(checked);\n }, [checked]);\n\n useEffect(() => {\n if (selected) {\n setExpanded(initialExpanded ?? true);\n }\n }, [selected]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isInteractionBlocked) {\n event.preventDefault();\n return;\n }\n\n if (onChange) {\n onChange(event);\n return;\n }\n\n switch (type) {\n case \"checkbox\":\n setSelected((prevSelected) => {\n return !prevSelected;\n });\n break;\n case \"radio\":\n case \"yes\":\n case \"no\":\n if (!selected) {\n setSelected(true);\n }\n break;\n }\n };\n\n const handleExpandCollapseClick = () => {\n if (!disabled) {\n setExpanded(!expanded);\n }\n };\n\n const handleOnRemove = () => {\n if (!disabled) {\n if (onRemove) {\n onRemove();\n return;\n }\n }\n };\n\n const handleContainerClick = () => {\n inputRef?.current?.click();\n };\n\n const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n e.stopPropagation();\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const getContainerStateClass = () => {\n if (styleType === \"no-border\") {\n if (error) {\n return clsx(\n styles.colorBorderError,\n !disabled && styles.toggleContainerError\n );\n }\n\n if (disabled) {\n return selected\n ? styles.toggleContainerNoBorderDisabledSelected\n : styles.toggleContainerNoBorderDisabled;\n }\n\n if (selected) {\n return styles.toggleContainerNoBorderSelected;\n }\n\n return styles.toggleContainerNoBorder;\n }\n\n if (error) {\n return disabled\n ? styles.colorBorderError\n : styles.toggleContainerError;\n }\n\n if (disabled) {\n return selected\n ? styles.toggleContainerDisabledSelected\n : styles.toggleContainerDisabled;\n }\n\n if (selected) {\n return styles.toggleContainerSelected;\n }\n\n return styles.toggleContainer;\n };\n\n const getContainerHoverClass = () => {\n if (disabled) {\n return undefined;\n }\n\n if (!error && selected) {\n return styles.toggleContainerHoverSelected;\n }\n\n return styles.toggleContainerHoverDefault;\n };\n\n const getTextContainerStateClass = () => {\n if (disabled) {\n return selected\n ? styles.toggleTextContainerDisabledSelected\n : styles.colorTextDisabled;\n }\n\n if (selected) {\n return styles.toggleTextContainerSelected;\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIndicator = () => {\n let toggleIconType: ToggleIconType;\n\n switch (type) {\n case \"yes\":\n toggleIconType = \"tick\";\n break;\n case \"no\":\n toggleIconType = \"cross\";\n break;\n case \"checkbox\":\n case \"radio\":\n toggleIconType = type;\n break;\n }\n\n return (\n <ToggleIcon\n type={toggleIconType}\n active={selected}\n disabled={disabled}\n />\n );\n };\n\n const renderSubLabel = () => {\n if (!subLabel) {\n return null;\n }\n\n let component: string \| JSX.Element;\n\n if (typeof subLabel === \"function\") {\n component = subLabel();\n } else {\n component = subLabel;\n }\n\n // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n return (\n <div\n data-id=\"toggle-sublabel\"\n id={`${generatedId}-sublabel`}\n aria-hidden\n className={styles.subLabel}\n >\n {component}\n </div>\n );\n };\n\n const renderCompositeChildren = () => {\n return (\n (!collapsible \|\| expanded) && (\n <div\n data-id=\"toggle-composite-children\"\n className={clsx(\n styles.children,\n !collapsible && styles.childrenIsFinalItem,\n disabled && styles.colorTextDisabled\n )}\n >\n <Markup baseTextSize=\"body-md\">\n {compositeSectionChildren}\n </Markup>\n </div>\n )\n );\n };\n\n const renderExpandButton = () => {\n const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n return (\n collapsible && (\n <button\n className={clsx(\n styles.expandButton,\n disabled && styles.disabledColorCursor,\n collapsedWithoutErrors &&\n styles.expandButtonPaddingTopRequired\n )}\n disabled={disabled}\n onClick={handleExpandCollapseClick}\n data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n >\n {expanded ? \"Show less\" : \"Show more\"}\n {expanded ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </button>\n )\n );\n };\n\n const renderToggleWithRemoveButton = () => {\n const ariaDescriptions =\n [\n typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(\" \") \|\| undefined;\n\n return (\n <div\n id={`${generatedId}-header-container`}\n className={styles.headerContainer}\n >\n <div\n className={clsx(\n styles.indicatorLabelContainer,\n removable && styles.indicatorLabelContainerAddPadding\n )}\n >\n <div\n id={`${generatedId}-input-container`}\n onClick={handleContainerClick}\n className={styles.inputContainer}\n >\n <input\n ref={inputRef}\n name={name}\n id={`${generatedId}-input`}\n type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n data-testid=\"toggle-input\"\n className={clsx(\n styles.input,\n disabled && styles.toggleInputDisabled\n )}\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n onChange={handleOnChange}\n onClick={handleInputClick}\n checked={selected}\n tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n aria-describedby={ariaDescriptions}\n {...otherProps}\n />\n {indicator && renderIndicator()}\n <div\n className={clsx(\n styles.textContainer,\n getTextContainerStateClass()\n )}\n >\n <label\n ref={labelRef}\n htmlFor={`${generatedId}-input`}\n data-testid={`toggle-label`}\n id={`${generatedId}-label`}\n className={clsx(\n styles.label,\n selected\n ? styles.toggleLabelSelected\n : styles.toggleLabelDefault\n )}\n >\n {children}\n </label>\n {subLabel && renderSubLabel()}\n </div>\n </div>\n </div>\n {removable && (\n <button\n type=\"button\"\n className={clsx(\n styles.removeButton,\n disabled && styles.disabledColorCursor\n )}\n onClick={handleOnRemove}\n id={`${generatedId}-remove-button`}\n >\n Remove\n </button>\n )}\n </div>\n );\n };\n\n const renderErrorList = (errors: string[]) => {\n return (\n <>\n <Typography.BodyMD\n weight=\"semibold\"\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n Error\n </Typography.BodyMD>\n <TextList.Ul\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n {errors?.map((item, index) => {\n return (\n <li\n key={index}\n id={`${generatedId}-error-list-item-${index}`}\n >\n <Typography.BodyMD\n weight=\"semibold\"\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n {item}\n </Typography.BodyMD>\n </li>\n );\n })}\n </TextList.Ul>\n </>\n );\n };\n\n const renderError = () => {\n return (\n collapsible &&\n !expanded &&\n hasCompositeSectionError && (\n <div\n className={clsx(\n styles.errorContainer,\n disabled && styles.disabledColorCursor\n )}\n onClick={handleExpandCollapseClick}\n id={`${generatedId}-error-alert`}\n >\n <Alert\n type={disabled ? \"description\" : \"error\"}\n className={styles.alertContainer}\n showIcon\n >\n {Array.isArray(errors)\n ? renderErrorList(errors)\n : errors}\n </Alert>\n </div>\n )\n );\n };\n\n const renderCompositeSection = () => {\n return (\n compositeSectionChildren && (\n <div>\n {renderCompositeChildren()}\n {renderError()}\n {renderExpandButton()}\n </div>\n )\n );\n };\n\n return (\n <div\n className={clsx(\n styles.container,\n getContainerStateClass(),\n getContainerHoverClass(),\n !indicator && styles.noIndicatorContainer,\n useContentWidth && styles.useContentWidthContainer,\n className\n )}\n id={id}\n data-testid={testId}\n >\n {renderToggleWithRemoveButton()}\n {renderCompositeSection()}\n </div>\n );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","clsx","styles.expandButton","styles.disabledColorCursor","styles.expandButtonPaddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","Typography","BodyMD","weight","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"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"}
1	+ {"version":3,"file":"toggle.js","sources":["../../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\n// @catalog\n/*\n A selectable control for checkbox and radio interaction patterns.\n \n Use `Toggle` to present a labeled option that the user can select or\n * deselect.\n */\nexport const Toggle = ({\n type = \"checkbox\",\n indicator,\n checked,\n styleType = \"default\",\n children,\n childrenMaxLines,\n subLabel,\n disabled,\n error,\n name,\n id,\n className,\n compositeSection,\n removable,\n focusableWhenDisabled,\n useContentWidth,\n onRemove,\n onChange,\n \"data-testid\": testId,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: ToggleProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const {\n collapsible = true,\n errors,\n children: compositeSectionChildren,\n initialExpanded,\n } = compositeSection \|\| {};\n const [selected, setSelected] = useState<boolean \| undefined>(checked);\n const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n const hasCompositeSectionError = useMemo(() => {\n const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n const hasErrorElement = !Array.isArray(errors) && !!errors;\n return hasErrorList \|\| hasErrorElement;\n }, [errors]);\n const uniqueId = useId();\n const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n const inputRef = useRef<HTMLInputElement>(null);\n const labelRef = useRef<HTMLLabelElement>(null);\n\n useApplyStyle(labelRef, {\n [styles.tokens.label.desktopLineClamp]:\n childrenMaxLines?.desktop == null\n ? null\n : `${childrenMaxLines.desktop}`,\n [styles.tokens.label.tabletLineClamp]:\n childrenMaxLines?.tablet == null\n ? null\n : `${childrenMaxLines.tablet}`,\n [styles.tokens.label.mobileLineClamp]:\n childrenMaxLines?.mobile == null\n ? null\n : `${childrenMaxLines.mobile}`,\n });\n\n const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n const isInteractionBlocked = !!disabled;\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n setSelected(checked);\n }, [checked]);\n\n useEffect(() => {\n if (selected) {\n setExpanded(initialExpanded ?? true);\n }\n }, [selected]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n if (isInteractionBlocked) {\n event.preventDefault();\n return;\n }\n\n if (onChange) {\n onChange(event);\n return;\n }\n\n switch (type) {\n case \"checkbox\":\n setSelected((prevSelected) => {\n return !prevSelected;\n });\n break;\n case \"radio\":\n case \"yes\":\n case \"no\":\n if (!selected) {\n setSelected(true);\n }\n break;\n }\n };\n\n const handleExpandCollapseClick = () => {\n if (!disabled) {\n setExpanded(!expanded);\n }\n };\n\n const handleOnRemove = () => {\n if (!disabled) {\n if (onRemove) {\n onRemove();\n return;\n }\n }\n };\n\n const handleContainerClick = () => {\n inputRef?.current?.click();\n };\n\n const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n e.stopPropagation();\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const getContainerStateClass = () => {\n if (styleType === \"no-border\") {\n if (error) {\n return clsx(\n styles.colorBorderError,\n !disabled && styles.toggleContainerError\n );\n }\n\n if (disabled) {\n return selected\n ? styles.toggleContainerNoBorderDisabledSelected\n : styles.toggleContainerNoBorderDisabled;\n }\n\n if (selected) {\n return styles.toggleContainerNoBorderSelected;\n }\n\n return styles.toggleContainerNoBorder;\n }\n\n if (error) {\n return disabled\n ? styles.colorBorderError\n : styles.toggleContainerError;\n }\n\n if (disabled) {\n return selected\n ? styles.toggleContainerDisabledSelected\n : styles.toggleContainerDisabled;\n }\n\n if (selected) {\n return styles.toggleContainerSelected;\n }\n\n return styles.toggleContainer;\n };\n\n const getContainerHoverClass = () => {\n if (disabled) {\n return undefined;\n }\n\n if (!error && selected) {\n return styles.toggleContainerHoverSelected;\n }\n\n return styles.toggleContainerHoverDefault;\n };\n\n const getTextContainerStateClass = () => {\n if (disabled) {\n return selected\n ? styles.toggleTextContainerDisabledSelected\n : styles.colorTextDisabled;\n }\n\n if (selected) {\n return styles.toggleTextContainerSelected;\n }\n };\n\n // =============================================================================\n // RENDER FUNCTIONS\n // =============================================================================\n const renderIndicator = () => {\n let toggleIconType: ToggleIconType;\n\n switch (type) {\n case \"yes\":\n toggleIconType = \"tick\";\n break;\n case \"no\":\n toggleIconType = \"cross\";\n break;\n case \"checkbox\":\n case \"radio\":\n toggleIconType = type;\n break;\n }\n\n return (\n <ToggleIcon\n type={toggleIconType}\n active={selected}\n disabled={disabled}\n />\n );\n };\n\n const renderSubLabel = () => {\n if (!subLabel) {\n return null;\n }\n\n let component: string \| JSX.Element;\n\n if (typeof subLabel === \"function\") {\n component = subLabel();\n } else {\n component = subLabel;\n }\n\n // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n return (\n <div\n data-id=\"toggle-sublabel\"\n id={`${generatedId}-sublabel`}\n aria-hidden\n className={styles.subLabel}\n >\n {component}\n </div>\n );\n };\n\n const renderCompositeChildren = () => {\n return (\n (!collapsible \|\| expanded) && (\n <div\n data-id=\"toggle-composite-children\"\n className={clsx(\n styles.children,\n !collapsible && styles.childrenIsFinalItem,\n disabled && styles.colorTextDisabled\n )}\n >\n <Markup baseTextSize=\"body-md\">\n {compositeSectionChildren}\n </Markup>\n </div>\n )\n );\n };\n\n const renderExpandButton = () => {\n const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n return (\n collapsible && (\n <button\n className={clsx(\n styles.expandButton,\n disabled && styles.disabledColorCursor,\n collapsedWithoutErrors &&\n styles.expandButtonPaddingTopRequired\n )}\n disabled={disabled}\n onClick={handleExpandCollapseClick}\n data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n >\n {expanded ? \"Show less\" : \"Show more\"}\n {expanded ? (\n <ChevronUpIcon aria-hidden />\n ) : (\n <ChevronDownIcon aria-hidden />\n )}\n </button>\n )\n );\n };\n\n const renderToggleWithRemoveButton = () => {\n const ariaDescriptions =\n [\n typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n ariaDescribedBy,\n ]\n .filter(Boolean)\n .join(\" \") \|\| undefined;\n\n return (\n <div\n id={`${generatedId}-header-container`}\n className={styles.headerContainer}\n >\n <div\n className={clsx(\n styles.indicatorLabelContainer,\n removable && styles.indicatorLabelContainerAddPadding\n )}\n >\n <div\n id={`${generatedId}-input-container`}\n onClick={handleContainerClick}\n className={styles.inputContainer}\n >\n <input\n ref={inputRef}\n name={name}\n id={`${generatedId}-input`}\n type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n data-testid=\"toggle-input\"\n className={clsx(\n styles.input,\n disabled && styles.toggleInputDisabled\n )}\n disabled={isNativeDisabled}\n aria-disabled={isFocusableWhenDisabled}\n onChange={handleOnChange}\n onClick={handleInputClick}\n checked={selected}\n tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n aria-describedby={ariaDescriptions}\n {...otherProps}\n />\n {indicator && renderIndicator()}\n <div\n className={clsx(\n styles.textContainer,\n getTextContainerStateClass()\n )}\n >\n <label\n ref={labelRef}\n htmlFor={`${generatedId}-input`}\n data-testid={`toggle-label`}\n id={`${generatedId}-label`}\n className={clsx(\n styles.label,\n selected\n ? styles.toggleLabelSelected\n : styles.toggleLabelDefault\n )}\n >\n {children}\n </label>\n {subLabel && renderSubLabel()}\n </div>\n </div>\n </div>\n {removable && (\n <button\n type=\"button\"\n className={clsx(\n styles.removeButton,\n disabled && styles.disabledColorCursor\n )}\n onClick={handleOnRemove}\n id={`${generatedId}-remove-button`}\n >\n Remove\n </button>\n )}\n </div>\n );\n };\n\n const renderErrorList = (errors: string[]) => {\n return (\n <>\n <Typography.BodyMD\n weight=\"semibold\"\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n Error\n </Typography.BodyMD>\n <TextList.Ul\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n {errors?.map((item, index) => {\n return (\n <li\n key={index}\n id={`${generatedId}-error-list-item-${index}`}\n >\n <Typography.BodyMD\n weight=\"semibold\"\n className={clsx(\n styles.colorTextError,\n disabled && styles.colorTextDisabled\n )}\n >\n {item}\n </Typography.BodyMD>\n </li>\n );\n })}\n </TextList.Ul>\n </>\n );\n };\n\n const renderError = () => {\n return (\n collapsible &&\n !expanded &&\n hasCompositeSectionError && (\n <div\n className={clsx(\n styles.errorContainer,\n disabled && styles.disabledColorCursor\n )}\n onClick={handleExpandCollapseClick}\n id={`${generatedId}-error-alert`}\n >\n <Alert\n type={disabled ? \"description\" : \"error\"}\n className={styles.alertContainer}\n showIcon\n >\n {Array.isArray(errors)\n ? renderErrorList(errors)\n : errors}\n </Alert>\n </div>\n )\n );\n };\n\n const renderCompositeSection = () => {\n return (\n compositeSectionChildren && (\n <div>\n {renderCompositeChildren()}\n {renderError()}\n {renderExpandButton()}\n </div>\n )\n );\n };\n\n return (\n <div\n className={clsx(\n styles.container,\n getContainerStateClass(),\n getContainerHoverClass(),\n !indicator && styles.noIndicatorContainer,\n useContentWidth && styles.useContentWidthContainer,\n className\n )}\n id={id}\n data-testid={testId}\n >\n {renderToggleWithRemoveButton()}\n {renderCompositeSection()}\n </div>\n );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderExpandButton","collapsedWithoutErrors","_jsxs","clsx","styles.expandButton","styles.disabledColorCursor","styles.expandButtonPaddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","Typography","BodyMD","weight","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"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"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/typography/index.ts"],"sourcesContent":["import {\n BodyBL,\n BodyMD,\n BodySM,\n BodyXS,\n HeadingLG,\n HeadingMD,\n HeadingSM,\n HeadingXL,\n HeadingXS,\n HeadingXXL,\n LinkBL,\n LinkMD,\n LinkSM,\n LinkXS,\n} from \"./typography\";\n\n/*\n A collection of pre-styled text components covering headings, body copy, and\n * hyperlinks.\n \n Use `Typography` sub-components to render consistently sized and weighted\n * text.\n \n Sub-components:\n * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.\n * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.\n * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .\n \n @remarks All text variants accept an `as` prop to\n * override the rendered element for semantic flexibility.\n /\nexport const Typography = {\n /* Renders the largest heading (`h1`). /\n HeadingXXL,\n /* Renders an extra-large heading (`h2`). /\n HeadingXL,\n /* Renders a large heading (`h3`). /\n HeadingLG,\n /* Renders a medium heading (`h4`). /\n HeadingMD,\n /* Renders a small heading (`h5`). /\n HeadingSM,\n /* Renders the smallest heading (`h6`). /\n HeadingXS,\n /* Renders baseline body text (`p`). /\n BodyBL,\n /* Renders medium body text (`p`). /\n BodyMD,\n /* Renders small body text (`p`). /\n BodySM,\n /* Renders extra-small body text (`p`). /\n BodyXS,\n /* Renders a baseline-size hyperlink (`a`). /\n LinkBL,\n /* Renders a medium-size hyperlink (`a`). /\n LinkMD,\n /* Renders a small-size hyperlink (`a`). /\n LinkSM,\n /* Renders an extra-small hyperlink (`a`). /\n LinkXS,\n};\n\nexport from \"./types\";\n"],"names":["Typography","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","BodyBL","BodyMD","BodySM","BodyXS","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"~~8CAgCO~~,MAAMA,EAAa,YAEtBC,EAAAA,qBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,iBAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/typography/index.ts"],"sourcesContent":["import {\n BodyBL,\n BodyMD,\n BodySM,\n BodyXS,\n HeadingLG,\n HeadingMD,\n HeadingSM,\n HeadingXL,\n HeadingXS,\n HeadingXXL,\n LinkBL,\n LinkMD,\n LinkSM,\n LinkXS,\n} from \"./typography\";\n\n// @catalog\n/*\n A collection of pre-styled text components covering headings, body copy, and\n * hyperlinks.\n \n Use `Typography` sub-components to render consistently sized and weighted\n * text.\n \n Sub-components:\n * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.\n * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.\n * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .\n \n @remarks All text variants accept an `as` prop to\n * override the rendered element for semantic flexibility.\n /\nexport const Typography = {\n /* Renders the largest heading (`h1`). /\n HeadingXXL,\n /* Renders an extra-large heading (`h2`). /\n HeadingXL,\n /* Renders a large heading (`h3`). /\n HeadingLG,\n /* Renders a medium heading (`h4`). /\n HeadingMD,\n /* Renders a small heading (`h5`). /\n HeadingSM,\n /* Renders the smallest heading (`h6`). /\n HeadingXS,\n /* Renders baseline body text (`p`). /\n BodyBL,\n /* Renders medium body text (`p`). /\n BodyMD,\n /* Renders small body text (`p`). /\n BodySM,\n /* Renders extra-small body text (`p`). /\n BodyXS,\n /* Renders a baseline-size hyperlink (`a`). /\n LinkBL,\n /* Renders a medium-size hyperlink (`a`). /\n LinkMD,\n /* Renders a small-size hyperlink (`a`). /\n LinkSM,\n /* Renders an extra-small hyperlink (`a`). /\n LinkXS,\n};\n\nexport from \"./types\";\n"],"names":["Typography","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","BodyBL","BodyMD","BodySM","BodyXS","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"8CAiCO,MAAMA,EAAa,YAEtBC,EAAAA,qBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,iBAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA"}

package/cjs/uneditable-section/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":["../../../src/uneditable-section/index.ts"],"sourcesContent":["import { UneditableItemSection } from \"./item-section\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionBase } from \"./uneditable-section\";\n\nexport * from \"./types\";\n\n/*\n A read-only summary section for displaying labeled field values.\n \n Use `UneditableSection` to present a group of non-editable field–value pairs\n * in a responsive grid layout\n \n Sub-components:\n * - `UneditableSection.Item` — a standalone labeled read-only field with optional masking.\n * - `UneditableSection.ItemSection` — a standalone grid list for composing items.\n /\nexport const UneditableSection = Object.assign(UneditableSectionBase, {\n /\n A standalone grid list for rendering `UneditableSection.Item` elements\n * outside the full section wrapper.\n /\n ItemSection: UneditableItemSection,\n /* A standalone labeled read-only field with optional masking support. */\n Item: UneditableSectionItem,\n});\n"],"names":["UneditableSection","Object","assign","UneditableSectionBase","ItemSection","UneditableItemSection","Item","UneditableSectionItem"],"mappings":"~~0HAgBaA~~,EAAoBC,OAAOC,OAAOC,wBAAuB,CAKlEC,YAAaC,EAAAA,sBAEbC,KAAMC,EAAAA"}
1	+ {"version":3,"file":"index.js","sources":["../../../src/uneditable-section/index.ts"],"sourcesContent":["import { UneditableItemSection } from \"./item-section\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionBase } from \"./uneditable-section\";\n\nexport * from \"./types\";\n\n// @catalog\n/*\n A read-only summary section for displaying labeled field values.\n \n Use `UneditableSection` to present a group of non-editable field–value pairs\n * in a responsive grid layout\n \n Sub-components:\n * - `UneditableSection.Item` — a standalone labeled read-only field with optional masking.\n * - `UneditableSection.ItemSection` — a standalone grid list for composing items.\n /\nexport const UneditableSection = Object.assign(UneditableSectionBase, {\n /\n A standalone grid list for rendering `UneditableSection.Item` elements\n * outside the full section wrapper.\n /\n ItemSection: UneditableItemSection,\n /* A standalone labeled read-only field with optional masking support. */\n Item: UneditableSectionItem,\n});\n"],"names":["UneditableSection","Object","assign","UneditableSectionBase","ItemSection","UneditableItemSection","Item","UneditableSectionItem"],"mappings":"0HAiBaA,EAAoBC,OAAOC,OAAOC,wBAAuB,CAKlEC,YAAaC,EAAAA,sBAEbC,KAAMC,EAAAA"}

package/cjs/uneditable-section/section-item.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/exclamation-triangle"),s=require("@lifesg/react-icons/eye"),r=require("@lifesg/react-icons/eye-slash"),i=require("react"),n=require("../alert/alert.js"),l=require("../form/form-label.js"),t=require("../shared/accessibility/index.js"),c=require("../shared/component-loading-spinner/component-loading-spinner.js"),d=require("../typography/index.js"),o=require("../util/string-helper.js"),m=require("./section-item.styles.js");exports.UneditableSectionItem=({label:u,value:g,displayWidth:k="full",maskState:h,maskLoadingState:p,maskChar:j="•",maskRange:x,unmaskRange:y,maskRegex:b,disableMaskUnmask:f,alert:q,maskTransformer:N,onMask:L,onUnmask:S,onTryAgain:T,fullWidth:R})=>{const[v,C]=i.useState(h);i.useEffect((()=>{C(h)}),[h]);const E=()=>{switch("fail"===p&&T&&T(),v){case"masked":S&&S(),C("unmasked");break;case"unmasked":L&&L(),C("masked")}},I=()=>"string"!=typeof g?g:"masked"===v?o.StringHelper.maskValue(g,{maskChar:j,maskRange:x,unmaskRange:y,maskRegex:b,maskTransformer:N}):g,w=()=>{switch(p){case"fail":return e.jsxs(e.Fragment,{children:[e.jsx(a.ExclamationTriangleIcon,{className:m.errorIcon}),e.jsx("span",{className:m.errorLabel,children:"Error"}),e.jsxs("span",{className:m.tryAgainLabel,children:["Try again?",e.jsx(t.VisuallyHidden,{children:u})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(c.ComponentLoadingSpinner,{className:m.spinner}),e.jsx("span",{className:m.loadingLabel,children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[I(),e.jsx("div",{className:m.iconContainer,"aria-label":"masked"===v?`Display ${u}`:`Hide ${u}`,children:"masked"===v?e.jsx(s.EyeIcon,{"data-testid":"masked-icon"}):e.jsx(r.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})}};return e.jsxs("li",{"data-width":k,"data-full-width":R,className:m.container,children:[e.jsx(l.FormLabel,{children:u}),"string"!=typeof g?g:v?f?e.jsx(d.Typography.BodyBL,{children:I()}):e.jsx("button",{className:m.clickable,"data-testid":"clickable-label",onClick:E,"aria-busy":"loading"===p,"aria-live":"polite",type:"button","aria-label":o.StringHelper.getMaskedDescription(g,v,x),children:w()}):e.jsx(d.Typography.BodyBL,{children:g}),q&&e.jsx(n.Alert,Object.assign({className:m.alert,sizeType:"small"},q))]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/exclamation-triangle"),s=require("@lifesg/react-icons/eye"),r=require("@lifesg/react-icons/eye-slash"),i=require("react"),n=require("../alert/alert.js"),l=require("../form/form-label/form-label.js"),t=require("../shared/accessibility/index.js"),c=require("../shared/component-loading-spinner/component-loading-spinner.js"),d=require("../typography/index.js"),o=require("../util/string-helper.js"),m=require("./section-item.styles.js");exports.UneditableSectionItem=({label:u,value:g,displayWidth:k="full",maskState:h,maskLoadingState:p,maskChar:j="•",maskRange:x,unmaskRange:y,maskRegex:b,disableMaskUnmask:f,alert:q,maskTransformer:N,onMask:L,onUnmask:S,onTryAgain:T,fullWidth:R})=>{const[v,C]=i.useState(h);i.useEffect((()=>{C(h)}),[h]);const E=()=>{switch("fail"===p&&T&&T(),v){case"masked":S&&S(),C("unmasked");break;case"unmasked":L&&L(),C("masked")}},I=()=>"string"!=typeof g?g:"masked"===v?o.StringHelper.maskValue(g,{maskChar:j,maskRange:x,unmaskRange:y,maskRegex:b,maskTransformer:N}):g,w=()=>{switch(p){case"fail":return e.jsxs(e.Fragment,{children:[e.jsx(a.ExclamationTriangleIcon,{className:m.errorIcon}),e.jsx("span",{className:m.errorLabel,children:"Error"}),e.jsxs("span",{className:m.tryAgainLabel,children:["Try again?",e.jsx(t.VisuallyHidden,{children:u})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(c.ComponentLoadingSpinner,{className:m.spinner}),e.jsx("span",{className:m.loadingLabel,children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[I(),e.jsx("div",{className:m.iconContainer,"aria-label":"masked"===v?`Display ${u}`:`Hide ${u}`,children:"masked"===v?e.jsx(s.EyeIcon,{"data-testid":"masked-icon"}):e.jsx(r.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})}};return e.jsxs("li",{"data-width":k,"data-full-width":R,className:m.container,children:[e.jsx(l.FormLabel,{children:u}),"string"!=typeof g?g:v?f?e.jsx(d.Typography.BodyBL,{children:I()}):e.jsx("button",{className:m.clickable,"data-testid":"clickable-label",onClick:E,"aria-busy":"loading"===p,"aria-live":"polite",type:"button","aria-label":o.StringHelper.getMaskedDescription(g,v,x),children:w()}):e.jsx(d.Typography.BodyBL,{children:g}),q&&e.jsx(n.Alert,Object.assign({className:m.alert,sizeType:"small"},q))]})};
 //# sourceMappingURL=section-item.js.map

package/cjs/uneditable-section/section-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"section-item.js","sources":["../../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n UneditableSectionItemMaskState,\n UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n extends UneditableSectionItemProps {\n onMask?: (() => void) \| undefined;\n onUnmask?: (() => void) \| undefined;\n onTryAgain?: (() => void) \| undefined;\n fullWidth?: boolean \| undefined;\n}\n\nexport const UneditableSectionItem = ({\n label,\n value,\n displayWidth = \"full\",\n maskState,\n maskLoadingState,\n maskChar = \"•\",\n maskRange,\n unmaskRange,\n maskRegex,\n disableMaskUnmask,\n alert,\n maskTransformer,\n onMask,\n onUnmask,\n onTryAgain,\n fullWidth,\n}: UneditableSectionItemComponentProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [displayMaskState, setMaskState] = useState<\n UneditableSectionItemMaskState \| undefined\n >(maskState);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setMaskState(maskState);\n }, [maskState]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleClickableClick = () => {\n if (maskLoadingState === \"fail\") {\n if (onTryAgain) onTryAgain();\n }\n\n switch (displayMaskState) {\n case \"masked\": {\n if (onUnmask) {\n onUnmask();\n }\n setMaskState(\"unmasked\");\n break;\n }\n case \"unmasked\": {\n if (onMask) {\n onMask();\n }\n setMaskState(\"masked\");\n break;\n }\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getValue = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n return displayMaskState === \"masked\"\n ? StringHelper.maskValue(value, {\n maskChar,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n })\n : value;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderMaskingState = () => {\n switch (maskLoadingState) {\n case \"fail\":\n return (\n <>\n <ExclamationTriangleIcon className={styles.errorIcon} />\n <span className={styles.errorLabel}>Error</span>\n <span className={styles.tryAgainLabel}>\n Try again?\n <VisuallyHidden>{label}</VisuallyHidden>\n </span>\n </>\n );\n case \"loading\":\n return (\n <>\n <ComponentLoadingSpinner className={styles.spinner} />\n <span className={styles.loadingLabel}>\n Retrieving...\n </span>\n </>\n );\n default:\n return (\n <>\n {getValue()}\n <div\n className={styles.iconContainer}\n aria-label={\n displayMaskState === \"masked\"\n ? `Display ${label}`\n : `Hide ${label}`\n }\n >\n {displayMaskState === \"masked\" ? (\n <EyeIcon data-testid=\"masked-icon\" />\n ) : (\n <EyeSlashIcon data-testid=\"unmasked-icon\" />\n )}\n </div>\n </>\n );\n }\n };\n\n const renderContent = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n if (!displayMaskState) {\n return <Typography.BodyBL>{value}</Typography.BodyBL>;\n }\n\n if (disableMaskUnmask) {\n return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n }\n\n return (\n <button\n className={styles.clickable}\n data-testid=\"clickable-label\"\n onClick={handleClickableClick}\n aria-busy={maskLoadingState === \"loading\"}\n aria-live=\"polite\"\n type=\"button\"\n aria-label={StringHelper.getMaskedDescription(\n value,\n displayMaskState,\n maskRange\n )}\n >\n {renderMaskingState()}\n </button>\n );\n };\n\n return (\n <li\n data-width={displayWidth}\n data-full-width={fullWidth}\n className={styles.container}\n >\n <FormLabel>{label}</FormLabel>\n {renderContent()}\n {alert && (\n <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n )}\n </li>\n );\n};\n"],"names":["label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"~~qhBAyBqC~~,EACjCA,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAAAA,SAEvCf,GAKFgB,EAAAA,WAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAAA,aAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,yBAAwBC,UAAWC,EAAAA,YACpCH,EAAAA,IAAA,OAAA,CAAME,UAAWE,EAAAA,WAAiBL,SAAA,UAClCF,EAAAA,KAAA,OAAA,CAAMK,UAAWG,EAAAA,cAAoBN,SAAA,CAAA,aAEjCC,EAAAA,IAACM,EAAAA,yBAAgBlC,UAIjC,IAAK,UACD,OACIyB,EAAAA,2BACIG,EAAAA,IAACO,EAAAA,yBAAwBL,UAAWM,EAAAA,UACpCR,MAAA,OAAA,CAAME,UAAWO,EAAAA,aAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACKN,IACDO,MAAA,MAAA,CACIE,UAAWQ,gBAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,MAACW,EAAAA,QAAO,CAAA,cAAa,gBAErBX,MAACY,EAAAA,aAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAAA,KAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAAA,UAAgBd,SAAA,CAE3BC,EAAAA,IAACc,EAAAA,UAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAAAA,IAACe,EAAAA,WAAWC,iBAAQvB,MAI3BO,MAAA,SAAA,CACIE,UAAWe,EAAAA,UAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAAA,aAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAAAA,IAACe,EAAAA,WAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAAAA,IAACqB,EAAAA,qBAAMnB,UAAWoB,EAAAA,MAAcC,SAAS,SAAYzC,MAExD"}
1	+ {"version":3,"file":"section-item.js","sources":["../../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n UneditableSectionItemMaskState,\n UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n extends UneditableSectionItemProps {\n onMask?: (() => void) \| undefined;\n onUnmask?: (() => void) \| undefined;\n onTryAgain?: (() => void) \| undefined;\n fullWidth?: boolean \| undefined;\n}\n\nexport const UneditableSectionItem = ({\n label,\n value,\n displayWidth = \"full\",\n maskState,\n maskLoadingState,\n maskChar = \"•\",\n maskRange,\n unmaskRange,\n maskRegex,\n disableMaskUnmask,\n alert,\n maskTransformer,\n onMask,\n onUnmask,\n onTryAgain,\n fullWidth,\n}: UneditableSectionItemComponentProps) => {\n // =========================================================================\n // CONST, STATE, REF\n // =========================================================================\n const [displayMaskState, setMaskState] = useState<\n UneditableSectionItemMaskState \| undefined\n >(maskState);\n\n // =========================================================================\n // EFFECTS\n // =========================================================================\n useEffect(() => {\n setMaskState(maskState);\n }, [maskState]);\n\n // =========================================================================\n // EVENT HANDLERS\n // =========================================================================\n const handleClickableClick = () => {\n if (maskLoadingState === \"fail\") {\n if (onTryAgain) onTryAgain();\n }\n\n switch (displayMaskState) {\n case \"masked\": {\n if (onUnmask) {\n onUnmask();\n }\n setMaskState(\"unmasked\");\n break;\n }\n case \"unmasked\": {\n if (onMask) {\n onMask();\n }\n setMaskState(\"masked\");\n break;\n }\n }\n };\n\n // =========================================================================\n // HELPER FUNCTIONS\n // =========================================================================\n const getValue = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n return displayMaskState === \"masked\"\n ? StringHelper.maskValue(value, {\n maskChar,\n maskRange,\n unmaskRange,\n maskRegex,\n maskTransformer,\n })\n : value;\n };\n\n // =========================================================================\n // RENDER FUNCTIONS\n // =========================================================================\n const renderMaskingState = () => {\n switch (maskLoadingState) {\n case \"fail\":\n return (\n <>\n <ExclamationTriangleIcon className={styles.errorIcon} />\n <span className={styles.errorLabel}>Error</span>\n <span className={styles.tryAgainLabel}>\n Try again?\n <VisuallyHidden>{label}</VisuallyHidden>\n </span>\n </>\n );\n case \"loading\":\n return (\n <>\n <ComponentLoadingSpinner className={styles.spinner} />\n <span className={styles.loadingLabel}>\n Retrieving...\n </span>\n </>\n );\n default:\n return (\n <>\n {getValue()}\n <div\n className={styles.iconContainer}\n aria-label={\n displayMaskState === \"masked\"\n ? `Display ${label}`\n : `Hide ${label}`\n }\n >\n {displayMaskState === \"masked\" ? (\n <EyeIcon data-testid=\"masked-icon\" />\n ) : (\n <EyeSlashIcon data-testid=\"unmasked-icon\" />\n )}\n </div>\n </>\n );\n }\n };\n\n const renderContent = () => {\n if (typeof value !== \"string\") {\n return value;\n }\n\n if (!displayMaskState) {\n return <Typography.BodyBL>{value}</Typography.BodyBL>;\n }\n\n if (disableMaskUnmask) {\n return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n }\n\n return (\n <button\n className={styles.clickable}\n data-testid=\"clickable-label\"\n onClick={handleClickableClick}\n aria-busy={maskLoadingState === \"loading\"}\n aria-live=\"polite\"\n type=\"button\"\n aria-label={StringHelper.getMaskedDescription(\n value,\n displayMaskState,\n maskRange\n )}\n >\n {renderMaskingState()}\n </button>\n );\n };\n\n return (\n <li\n data-width={displayWidth}\n data-full-width={fullWidth}\n className={styles.container}\n >\n <FormLabel>{label}</FormLabel>\n {renderContent()}\n {alert && (\n <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n )}\n </li>\n );\n};\n"],"names":["label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"giBAyBqC,EACjCA,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAAAA,SAEvCf,GAKFgB,EAAAA,WAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAAA,aAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,yBAAwBC,UAAWC,EAAAA,YACpCH,EAAAA,IAAA,OAAA,CAAME,UAAWE,EAAAA,WAAiBL,SAAA,UAClCF,EAAAA,KAAA,OAAA,CAAMK,UAAWG,EAAAA,cAAoBN,SAAA,CAAA,aAEjCC,EAAAA,IAACM,EAAAA,yBAAgBlC,UAIjC,IAAK,UACD,OACIyB,EAAAA,2BACIG,EAAAA,IAACO,EAAAA,yBAAwBL,UAAWM,EAAAA,UACpCR,MAAA,OAAA,CAAME,UAAWO,EAAAA,aAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACKN,IACDO,MAAA,MAAA,CACIE,UAAWQ,gBAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,MAACW,EAAAA,QAAO,CAAA,cAAa,gBAErBX,MAACY,EAAAA,aAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAAA,KAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAAA,UAAgBd,SAAA,CAE3BC,EAAAA,IAACc,EAAAA,UAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAAAA,IAACe,EAAAA,WAAWC,iBAAQvB,MAI3BO,MAAA,SAAA,CACIE,UAAWe,EAAAA,UAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAAA,aAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAAAA,IAACe,EAAAA,WAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAAAA,IAACqB,EAAAA,qBAAMnB,UAAWoB,EAAAA,MAAcC,SAAS,SAAYzC,MAExD"}

package/cjs/unit-number/unit-number-input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"unit-number-input.js","sources":["../../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport * as inputGroupStyles from \"../input-group/input-group.styles\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport * as styles from \"./unit-number-input.styles\";\n\ntype FieldType = \"floor\" \| \"unit\" \| \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\n/*\n A two-field input for entering Singapore-style unit numbers in `floor-unit` format.\n \n Use `UnitNumberInput` when you need a structured unit number entry that splits\n * floor and unit into separate fields.\n /\nexport const UnitNumberInput = ({\n disabled,\n error,\n value,\n onChange,\n onBlur,\n onChangeRaw,\n onBlurRaw,\n readOnly,\n placeholder = \"00-8888\",\n autoComplete,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n className,\n ...otherProps\n}: UnitNumberInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [floorValue, _setFloorValue] = useState<string>(\"\");\n const [unitValue, _setUnitValue] = useState<string>(\"\");\n const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n const internalId = useId();\n const floorLabelId = `${internalId}-floor-label`;\n const unitLabelId = `${internalId}-unit-label`;\n const liveMessageId = `${internalId}-live-message`;\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const floorInputRef = useRef<HTMLInputElement>(null);\n const unitInputRef = useRef<HTMLInputElement>(null);\n\n /\n Have to use refs to allow the state values to be accessible\n * by the event listener callback functions\n * Reference:\n * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n /\n\n const floorValueStateRef = useRef<string>(floorValue);\n const unitValueStateRef = useRef<string>(unitValue);\n const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n const formatter = (value: string) =>\n value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n const getNextFloorInputState = useNextInputState({\n ref: floorInputRef,\n formatter,\n });\n const getNextUnitInputState = useNextInputState({\n ref: unitInputRef,\n formatter,\n });\n\n const liveMessage = useMemo(() => {\n let msg = \"\";\n const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n switch (currentFocus) {\n case \"floor\":\n msg = floorMsg;\n break;\n case \"unit\":\n msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n break;\n default:\n msg = \"\";\n }\n return msg;\n }, [currentFocus, floorValue, unitValue]);\n\n // =============================================================================\n // REF FUNCTIONS\n // =============================================================================\n const setFloorValue = (data: string) => {\n floorValueStateRef.current = data;\n _setFloorValue(data);\n };\n\n const setUnitValue = (data: string) => {\n unitValueStateRef.current = data;\n _setUnitValue(data);\n };\n\n const setCurrentFocus = (data: FieldType) => {\n currentFocusStateRef.current = data;\n _setCurrentFocus(data);\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n // Auto focus feature\n if (\n currentFocus === \"floor\" &&\n floorValue.length === 3 &&\n unitInputRef.current\n ) {\n unitInputRef.current.focus();\n }\n }, [floorValue]);\n\n useEffect(() => {\n updateValues(value);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n setCurrentFocus(event.target.name as FieldType);\n event.target.select();\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const targetName = event.target.name as FieldType;\n const targetValue = event.target.value;\n const formattedInput = formatInput(targetValue);\n\n if (targetName === \"floor\") {\n setFloorValue(formattedInput);\n if (formattedInput !== floorValue) {\n performOnChangeHandler(formattedInput, targetName);\n }\n } else if (targetName === \"unit\") {\n setUnitValue(formattedInput);\n if (formattedInput !== unitValue) {\n performOnChangeHandler(formattedInput, targetName);\n }\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const targetName = event.target.name as FieldType;\n\n if (targetName === \"floor\") {\n const nextInputState = getNextFloorInputState();\n if (!nextInputState) return;\n\n const { nextValue, updateCaretPosition } = nextInputState;\n updateCaretPosition();\n setFloorValue(nextValue);\n performOnChangeHandler(nextValue, targetName);\n } else if (targetName === \"unit\") {\n const nextInputState = getNextUnitInputState();\n if (!nextInputState) return;\n\n const { nextValue, updateCaretPosition } = nextInputState;\n updateCaretPosition();\n setUnitValue(nextValue);\n performOnChangeHandler(nextValue, targetName);\n }\n };\n\n const handleNodeClick = () => {\n if (currentFocus === \"none\" && floorInputRef.current) {\n floorInputRef.current.focus();\n }\n };\n\n const handleNodeBlur = (event: React.FocusEvent) => {\n if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n // internal element received focus\n return;\n }\n if (currentFocusStateRef.current !== \"none\") {\n setCurrentFocus(\"none\");\n performOnBlurHandler();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n /\n Allow going to the field before if user presses Backspace\n * on an empty field\n /\n if (event.code === \"Backspace\" \|\| event.key === \"Backspace\") {\n if (currentFocus === \"unit\" && unitValue.length === 0) {\n floorInputRef.current?.focus();\n }\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const formatInput = (value: string) => {\n return /^[0-9]$/.test(value)\n ? StringHelper.padValue(value, true)\n : value.toLocaleUpperCase();\n };\n\n const updateValues = (value: string \| undefined) => {\n if (value === INVALID_VALUE) {\n return;\n } else if (value === undefined \|\| value.length === 0) {\n setFloorValue(\"\");\n setUnitValue(\"\");\n } else {\n const valueArr = value.split(\"-\");\n if (valueArr.length === 2) {\n // Valid value\n const floor = valueArr[0];\n const unit = valueArr[1];\n setFloorValue(\n currentFocus === \"floor\" ? floor : formatInput(floor)\n );\n setUnitValue(\n currentFocus === \"unit\" ? unit : formatInput(unit)\n );\n }\n }\n };\n\n const performOnChangeHandler = (\n changeValue: string,\n field: ValueFieldTypes\n ) => {\n if (!onChange && !onChangeRaw) {\n return;\n }\n\n const values: Record<ValueFieldTypes, string> = {\n floor: floorValueStateRef.current,\n unit: unitValueStateRef.current,\n };\n\n // Update the specific field value\n values[field] = changeValue;\n\n if (onChange) {\n const returnValue = getFormattedValue(values);\n onChange(returnValue);\n }\n\n if (onChangeRaw) {\n onChangeRaw([values.floor, values.unit]);\n }\n };\n\n const performOnBlurHandler = () => {\n if (!onBlur && !onBlurRaw) {\n return;\n }\n\n const values: Record<ValueFieldTypes, string> = {\n floor: formatInput(floorValueStateRef.current),\n unit: formatInput(unitValueStateRef.current),\n };\n\n if (onBlur) {\n const returnValue = getFormattedValue(values);\n onBlur(returnValue);\n }\n\n if (onBlurRaw) {\n onBlurRaw([values.floor, values.unit]);\n }\n };\n\n const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n const valueArr = [values.floor, values.unit];\n\n if (values.floor.length > 0 && values.unit.length > 0) {\n return valueArr.join(\"-\");\n } else if (valueArr.every((value) => value === \"\")) {\n return \"\";\n } else {\n return INVALID_VALUE;\n }\n };\n\n const getPlaceholder = (value: string) => {\n return value.split(\"-\");\n };\n\n function formatPhraseWithPrefix(prefix: string, v: string) {\n return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n }\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderInputs = () => (\n <>\n <Input\n name=\"floor\"\n maxLength={3}\n value={floorValue}\n ref={floorInputRef}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n type=\"text\"\n pattern=\"[0-9A-Z]{2,3}\"\n data-testid=\"floor-input\"\n aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n aria-invalid={ariaInvalid}\n placeholder={\n currentFocus === \"floor\" && !readOnly && !disabled\n ? \"\"\n : getPlaceholder(placeholder)[0]\n }\n autoComplete={autoComplete}\n styleType=\"no-border\"\n className={clsx(styles.input, styles.floorInput)}\n />\n <VisuallyHidden aria-hidden id={floorLabelId}>\n Enter floor number\n </VisuallyHidden>\n <Typography.BodyBL\n className={clsx(\n styles.unitNumberDivider,\n floorValue.length === 0 && styles.unitNumberDividerInactive\n )}\n >\n -\n </Typography.BodyBL>\n <Input\n name=\"unit\"\n maxLength={5}\n value={unitValue}\n ref={unitInputRef}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n readOnly={readOnly}\n type=\"text\"\n pattern=\"[0-9A-Z]{2,5}\"\n data-testid=\"unit-input\"\n aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n aria-invalid={ariaInvalid}\n placeholder={\n currentFocus === \"unit\" && !readOnly && !disabled\n ? \"\"\n : getPlaceholder(placeholder)[1]\n }\n autoComplete={autoComplete}\n styleType=\"no-border\"\n className={clsx(\n styles.input,\n styles.floorInput,\n styles.unitInput\n )}\n />\n <VisuallyHidden aria-hidden id={unitLabelId}>\n Enter unit number\n </VisuallyHidden>\n {/* Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n {liveMessage}\n </VisuallyHidden>\n </>\n );\n\n const renderReadOnly = (displayValue: string) => {\n const displayValueArr = displayValue.split(\"-\");\n const liveMessageForReadOnly = [\n formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n ].join(\" \");\n\n return (\n <div\n data-testid=\"readonly-display\"\n tabIndex={0}\n role=\"textbox\"\n aria-readonly\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n className={styles.readOnlyContainer}\n >\n <Typography.BodyBL>{displayValueArr[0]}</Typography.BodyBL>\n <Typography.BodyBL className={styles.unitNumberDivider}>\n -\n </Typography.BodyBL>\n <Typography.BodyBL>{displayValueArr[1]}</Typography.BodyBL>\n <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n </div>\n );\n };\n\n return (\n <InputWrapper\n {...otherProps}\n ref={nodeRef}\n onClick={handleNodeClick}\n disabled={disabled}\n error={error}\n readOnly={readOnly}\n tabIndex={-1}\n onBlur={handleNodeBlur}\n className={className}\n >\n <div\n data-testid=\"addon\"\n className={clsx(\n styles.hashContainer,\n inputGroupStyles.labelAddonContainer\n )}\n data-disabled={disabled}\n data-read-only={readOnly}\n >\n #\n </div>\n {readOnly && value ? renderReadOnly(value) : renderInputs()}\n </InputWrapper>\n );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["INVALID_VALUE","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","className","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","useId","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","tabIndex","contains","relatedTarget","children","_jsx","clsx","styles.hashContainer","inputGroupStyles.labelAddonContainer","displayValue","displayValueArr","liveMessageForReadOnly","role","styles.readOnlyContainer","Typography","BodyBL","styles.unitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","Input","maxLength","onFocus","type","pattern","concatIds","styleType","styles.input","styles.floorInput","id","styles.unitNumberDividerInactive","onKeyDown","styles.unitInput"],"mappings":"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"}
1	+ {"version":3,"file":"unit-number-input.js","sources":["../../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport * as inputGroupStyles from \"../input-group/input-group.styles\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport * as styles from \"./unit-number-input.styles\";\n\ntype FieldType = \"floor\" \| \"unit\" \| \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\n// @catalog\n/*\n A two-field input for entering Singapore-style unit numbers in `floor-unit` format.\n \n Use `UnitNumberInput` when you need a structured unit number entry that splits\n * floor and unit into separate fields.\n /\nexport const UnitNumberInput = ({\n disabled,\n error,\n value,\n onChange,\n onBlur,\n onChangeRaw,\n onBlurRaw,\n readOnly,\n placeholder = \"00-8888\",\n autoComplete,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n \"aria-invalid\": ariaInvalid,\n className,\n ...otherProps\n}: UnitNumberInputProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [floorValue, _setFloorValue] = useState<string>(\"\");\n const [unitValue, _setUnitValue] = useState<string>(\"\");\n const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n const internalId = useId();\n const floorLabelId = `${internalId}-floor-label`;\n const unitLabelId = `${internalId}-unit-label`;\n const liveMessageId = `${internalId}-live-message`;\n\n const nodeRef = useRef<HTMLDivElement>(null);\n const floorInputRef = useRef<HTMLInputElement>(null);\n const unitInputRef = useRef<HTMLInputElement>(null);\n\n /\n Have to use refs to allow the state values to be accessible\n * by the event listener callback functions\n * Reference:\n * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n /\n\n const floorValueStateRef = useRef<string>(floorValue);\n const unitValueStateRef = useRef<string>(unitValue);\n const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n const formatter = (value: string) =>\n value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n const getNextFloorInputState = useNextInputState({\n ref: floorInputRef,\n formatter,\n });\n const getNextUnitInputState = useNextInputState({\n ref: unitInputRef,\n formatter,\n });\n\n const liveMessage = useMemo(() => {\n let msg = \"\";\n const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n switch (currentFocus) {\n case \"floor\":\n msg = floorMsg;\n break;\n case \"unit\":\n msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n break;\n default:\n msg = \"\";\n }\n return msg;\n }, [currentFocus, floorValue, unitValue]);\n\n // =============================================================================\n // REF FUNCTIONS\n // =============================================================================\n const setFloorValue = (data: string) => {\n floorValueStateRef.current = data;\n _setFloorValue(data);\n };\n\n const setUnitValue = (data: string) => {\n unitValueStateRef.current = data;\n _setUnitValue(data);\n };\n\n const setCurrentFocus = (data: FieldType) => {\n currentFocusStateRef.current = data;\n _setCurrentFocus(data);\n };\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n useEffect(() => {\n // Auto focus feature\n if (\n currentFocus === \"floor\" &&\n floorValue.length === 3 &&\n unitInputRef.current\n ) {\n unitInputRef.current.focus();\n }\n }, [floorValue]);\n\n useEffect(() => {\n updateValues(value);\n }, [value]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n setCurrentFocus(event.target.name as FieldType);\n event.target.select();\n };\n\n const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n const targetName = event.target.name as FieldType;\n const targetValue = event.target.value;\n const formattedInput = formatInput(targetValue);\n\n if (targetName === \"floor\") {\n setFloorValue(formattedInput);\n if (formattedInput !== floorValue) {\n performOnChangeHandler(formattedInput, targetName);\n }\n } else if (targetName === \"unit\") {\n setUnitValue(formattedInput);\n if (formattedInput !== unitValue) {\n performOnChangeHandler(formattedInput, targetName);\n }\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n const targetName = event.target.name as FieldType;\n\n if (targetName === \"floor\") {\n const nextInputState = getNextFloorInputState();\n if (!nextInputState) return;\n\n const { nextValue, updateCaretPosition } = nextInputState;\n updateCaretPosition();\n setFloorValue(nextValue);\n performOnChangeHandler(nextValue, targetName);\n } else if (targetName === \"unit\") {\n const nextInputState = getNextUnitInputState();\n if (!nextInputState) return;\n\n const { nextValue, updateCaretPosition } = nextInputState;\n updateCaretPosition();\n setUnitValue(nextValue);\n performOnChangeHandler(nextValue, targetName);\n }\n };\n\n const handleNodeClick = () => {\n if (currentFocus === \"none\" && floorInputRef.current) {\n floorInputRef.current.focus();\n }\n };\n\n const handleNodeBlur = (event: React.FocusEvent) => {\n if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n // internal element received focus\n return;\n }\n if (currentFocusStateRef.current !== \"none\") {\n setCurrentFocus(\"none\");\n performOnBlurHandler();\n }\n };\n\n const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n /\n Allow going to the field before if user presses Backspace\n * on an empty field\n /\n if (event.code === \"Backspace\" \|\| event.key === \"Backspace\") {\n if (currentFocus === \"unit\" && unitValue.length === 0) {\n floorInputRef.current?.focus();\n }\n }\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const formatInput = (value: string) => {\n return /^[0-9]$/.test(value)\n ? StringHelper.padValue(value, true)\n : value.toLocaleUpperCase();\n };\n\n const updateValues = (value: string \| undefined) => {\n if (value === INVALID_VALUE) {\n return;\n } else if (value === undefined \|\| value.length === 0) {\n setFloorValue(\"\");\n setUnitValue(\"\");\n } else {\n const valueArr = value.split(\"-\");\n if (valueArr.length === 2) {\n // Valid value\n const floor = valueArr[0];\n const unit = valueArr[1];\n setFloorValue(\n currentFocus === \"floor\" ? floor : formatInput(floor)\n );\n setUnitValue(\n currentFocus === \"unit\" ? unit : formatInput(unit)\n );\n }\n }\n };\n\n const performOnChangeHandler = (\n changeValue: string,\n field: ValueFieldTypes\n ) => {\n if (!onChange && !onChangeRaw) {\n return;\n }\n\n const values: Record<ValueFieldTypes, string> = {\n floor: floorValueStateRef.current,\n unit: unitValueStateRef.current,\n };\n\n // Update the specific field value\n values[field] = changeValue;\n\n if (onChange) {\n const returnValue = getFormattedValue(values);\n onChange(returnValue);\n }\n\n if (onChangeRaw) {\n onChangeRaw([values.floor, values.unit]);\n }\n };\n\n const performOnBlurHandler = () => {\n if (!onBlur && !onBlurRaw) {\n return;\n }\n\n const values: Record<ValueFieldTypes, string> = {\n floor: formatInput(floorValueStateRef.current),\n unit: formatInput(unitValueStateRef.current),\n };\n\n if (onBlur) {\n const returnValue = getFormattedValue(values);\n onBlur(returnValue);\n }\n\n if (onBlurRaw) {\n onBlurRaw([values.floor, values.unit]);\n }\n };\n\n const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n const valueArr = [values.floor, values.unit];\n\n if (values.floor.length > 0 && values.unit.length > 0) {\n return valueArr.join(\"-\");\n } else if (valueArr.every((value) => value === \"\")) {\n return \"\";\n } else {\n return INVALID_VALUE;\n }\n };\n\n const getPlaceholder = (value: string) => {\n return value.split(\"-\");\n };\n\n function formatPhraseWithPrefix(prefix: string, v: string) {\n return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n }\n\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n const renderInputs = () => (\n <>\n <Input\n name=\"floor\"\n maxLength={3}\n value={floorValue}\n ref={floorInputRef}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n disabled={disabled}\n readOnly={readOnly}\n type=\"text\"\n pattern=\"[0-9A-Z]{2,3}\"\n data-testid=\"floor-input\"\n aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n aria-invalid={ariaInvalid}\n placeholder={\n currentFocus === \"floor\" && !readOnly && !disabled\n ? \"\"\n : getPlaceholder(placeholder)[0]\n }\n autoComplete={autoComplete}\n styleType=\"no-border\"\n className={clsx(styles.input, styles.floorInput)}\n />\n <VisuallyHidden aria-hidden id={floorLabelId}>\n Enter floor number\n </VisuallyHidden>\n <Typography.BodyBL\n className={clsx(\n styles.unitNumberDivider,\n floorValue.length === 0 && styles.unitNumberDividerInactive\n )}\n >\n -\n </Typography.BodyBL>\n <Input\n name=\"unit\"\n maxLength={5}\n value={unitValue}\n ref={unitInputRef}\n onFocus={handleFocus}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n disabled={disabled}\n readOnly={readOnly}\n type=\"text\"\n pattern=\"[0-9A-Z]{2,5}\"\n data-testid=\"unit-input\"\n aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n aria-invalid={ariaInvalid}\n placeholder={\n currentFocus === \"unit\" && !readOnly && !disabled\n ? \"\"\n : getPlaceholder(placeholder)[1]\n }\n autoComplete={autoComplete}\n styleType=\"no-border\"\n className={clsx(\n styles.input,\n styles.floorInput,\n styles.unitInput\n )}\n />\n <VisuallyHidden aria-hidden id={unitLabelId}>\n Enter unit number\n </VisuallyHidden>\n {/* Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n {liveMessage}\n </VisuallyHidden>\n </>\n );\n\n const renderReadOnly = (displayValue: string) => {\n const displayValueArr = displayValue.split(\"-\");\n const liveMessageForReadOnly = [\n formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n ].join(\" \");\n\n return (\n <div\n data-testid=\"readonly-display\"\n tabIndex={0}\n role=\"textbox\"\n aria-readonly\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-invalid={ariaInvalid}\n className={styles.readOnlyContainer}\n >\n <Typography.BodyBL>{displayValueArr[0]}</Typography.BodyBL>\n <Typography.BodyBL className={styles.unitNumberDivider}>\n -\n </Typography.BodyBL>\n <Typography.BodyBL>{displayValueArr[1]}</Typography.BodyBL>\n <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n </div>\n );\n };\n\n return (\n <InputWrapper\n {...otherProps}\n ref={nodeRef}\n onClick={handleNodeClick}\n disabled={disabled}\n error={error}\n readOnly={readOnly}\n tabIndex={-1}\n onBlur={handleNodeBlur}\n className={className}\n >\n <div\n data-testid=\"addon\"\n className={clsx(\n styles.hashContainer,\n inputGroupStyles.labelAddonContainer\n )}\n data-disabled={disabled}\n data-read-only={readOnly}\n >\n #\n </div>\n {readOnly && value ? renderReadOnly(value) : renderInputs()}\n </InputWrapper>\n );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["INVALID_VALUE","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","className","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","useId","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","tabIndex","contains","relatedTarget","children","_jsx","clsx","styles.hashContainer","inputGroupStyles.labelAddonContainer","displayValue","displayValueArr","liveMessageForReadOnly","role","styles.readOnlyContainer","Typography","BodyBL","styles.unitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","Input","maxLength","onFocus","type","pattern","concatIds","styleType","styles.input","styles.floorInput","id","styles.unitNumberDividerInactive","onKeyDown","styles.unitInput"],"mappings":"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"}

package/countdown-timer/countdown-timer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"countdown-timer.js","sources":["../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n formatUnitValue,\n useApplyStyle,\n useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n/*\n Displays a live countdown of time remaining until a deadline.\n \n Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n /\nexport const CountdownTimer = ({\n className,\n align = \"right\",\n timer,\n timestamp,\n notifyTimer,\n offset,\n mobileOffset,\n show,\n fixed = true,\n reminderInterval = 120,\n \"data-testid\": testId,\n onFinish,\n onNotify,\n onTick,\n ...otherProps\n}: CountdownTimerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n const isNotified = useRef<boolean>(false);\n const [offsetY, setOffsetY] = useState<number>(0);\n const [clientRectRight, setClientRectRight] = useState<number>(0);\n const [clientRectX, setClientRectX] = useState<number>(0);\n const [isPlaying, setIsPlaying] = useState(false);\n const [announcement, setAnnouncement] = useState<string>(\"\");\n\n const isMounted = useIsMounted();\n const [remainingSeconds, initialSeconds] = useTimer(\n timer,\n timestamp,\n isPlaying\n );\n const { ref: stickyRef, inView } = useInView({\n threshold: 1,\n rootMargin: `${offsetY -1}px 0px 0px 0px`,\n initialInView: true,\n });\n const isVisible = !fixed \|\| inView;\n const warn =\n typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useApplyStyle(fixedCountdownRef, {\n [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n [styles.tokens.fixedCountdown.left]: formatUnitValue(\n getOffsetLeft(),\n \"px\"\n ),\n [styles.tokens.fixedCountdown.right]: formatUnitValue(\n getOffsetRight(),\n \"px\"\n ),\n });\n\n useEffect(() => {\n setIsPlaying(show);\n }, [show]);\n\n useEffect(() => {\n if (remainingSeconds === 0) {\n performOnFinishHandler();\n } else if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ) {\n performOnTickHandler();\n performOnNotifyHandler();\n }\n }, [remainingSeconds]);\n\n useEffect(() => {\n const y = getOffsetY();\n setOffsetY(y);\n }, [isMobile, offset?.top, mobileOffset?.top]);\n\n useEffect(() => {\n if (wrapperRef.current) {\n const handleResize = throttle(handleWindowResize, 300);\n handleWindowResize();\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }\n }, [wrapperRef.current]);\n\n // Announcements\n useEffect(() => {\n const timeElapsed = initialSeconds - remainingSeconds;\n if (timeElapsed === 0) return;\n // Polite notification\n if (timeElapsed % reminderInterval === 0) {\n if (\n typeof notifyTimer !== \"number\" \|\|\n remainingSeconds > notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }\n\n // Assertive notification\n if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds === notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n useEffect(() => {\n // reset\n isNotified.current = false;\n }, [initialSeconds, show]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleWindowResize = () => {\n if (!wrapperRef.current) return;\n\n const clientRect = wrapperRef.current.getBoundingClientRect();\n\n setClientRectX(clientRect.x);\n setClientRectRight(clientRect.right);\n };\n\n const handleOnFocus = () => {\n const focusMessage = getAccessibleTimeText(remainingSeconds);\n setAnnouncement(focusMessage);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const performOnTickHandler = () => {\n if (onTick) {\n onTick(remainingSeconds);\n }\n };\n\n const performOnNotifyHandler = () => {\n if (onNotify && !isNotified.current) {\n isNotified.current = true;\n onNotify();\n }\n };\n\n const performOnFinishHandler = () => {\n setIsPlaying(false);\n\n if (onFinish) onFinish();\n };\n\n function getOffsetY() {\n const desktopTop = offset?.top ?? 168;\n const mobileTop = mobileOffset?.top ?? 80;\n const offsetY = isMobile ? mobileTop : desktopTop;\n\n return offsetY;\n }\n\n function getOffsetLeft() {\n if (!isMounted \|\| align !== \"left\") return undefined;\n return offset?.left ?? clientRectX;\n }\n\n function getOffsetRight() {\n if (!isMounted \|\| align !== \"right\") return undefined;\n return (\n offset?.right ??\n Math.floor(document.body.clientWidth - clientRectRight)\n );\n }\n\n const getAccessibleTimeText = (seconds: number): string => {\n const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n if (minutes > 0 && secs > 0) {\n return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n } else if (minutes > 0) {\n return `Time left: ${minutes} ${minuteText}`;\n } else {\n return `Time left: ${secs} ${secondText}`;\n }\n };\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const renderPeriodicAndWarningAnnouncement = () => (\n <VisuallyHidden\n aria-live={\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ? \"assertive\"\n : \"polite\"\n }\n aria-atomic=\"true\"\n >\n {announcement}\n </VisuallyHidden>\n );\n\n const renderTimer = () => {\n const { minutes, seconds } =\n TimeHelper.toMinutesSeconds(remainingSeconds);\n const m = minutes !== 1 ? \"mins\" : \"min\";\n const s = seconds !== 1 ? \"secs\" : \"sec\";\n return (\n <>\n <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n <div className={styles.timeLeft}>Time left:</div>\n <div\n className={styles.timer}\n aria-label={getAccessibleTimeText(remainingSeconds)}\n >\n {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n </div>\n {renderPeriodicAndWarningAnnouncement()}\n </>\n );\n };\n\n const renderInlineCountdown = () => {\n return (\n <div\n data-testid={testId}\n data-id=\"countdown-wrapper\"\n data-warn={!!warn}\n ref={wrapperRef}\n inert={inertValue(!isVisible)}\n className={clsx(\n styles.countdown,\n styles.countdownInline,\n !isVisible && styles.countdownHidden\n )}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n const renderFixedCountdown = () => {\n return (\n <div\n ref={fixedCountdownRef}\n data-testid={testId}\n data-id=\"fixed-countdown-wrapper\"\n data-warn={!!warn}\n className={clsx(styles.countdown, styles.countdownFixed)}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n return (\n <div className={clsx(styles.wrapper, className)} {...otherProps}>\n <div ref={stickyRef}></div>\n {renderInlineCountdown()}\n {wrapperRef.current && !isVisible && renderFixedCountdown()}\n </div>\n );\n};\n"],"names":["CountdownTimer","_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}
1	+ {"version":3,"file":"countdown-timer.js","sources":["../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n formatUnitValue,\n useApplyStyle,\n useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n// @catalog\n/*\n Displays a live countdown of time remaining until a deadline.\n \n Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n /\nexport const CountdownTimer = ({\n className,\n align = \"right\",\n timer,\n timestamp,\n notifyTimer,\n offset,\n mobileOffset,\n show,\n fixed = true,\n reminderInterval = 120,\n \"data-testid\": testId,\n onFinish,\n onNotify,\n onTick,\n ...otherProps\n}: CountdownTimerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n const isNotified = useRef<boolean>(false);\n const [offsetY, setOffsetY] = useState<number>(0);\n const [clientRectRight, setClientRectRight] = useState<number>(0);\n const [clientRectX, setClientRectX] = useState<number>(0);\n const [isPlaying, setIsPlaying] = useState(false);\n const [announcement, setAnnouncement] = useState<string>(\"\");\n\n const isMounted = useIsMounted();\n const [remainingSeconds, initialSeconds] = useTimer(\n timer,\n timestamp,\n isPlaying\n );\n const { ref: stickyRef, inView } = useInView({\n threshold: 1,\n rootMargin: `${offsetY -1}px 0px 0px 0px`,\n initialInView: true,\n });\n const isVisible = !fixed \|\| inView;\n const warn =\n typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n // =============================================================================\n // EFFECTS\n // =============================================================================\n\n useApplyStyle(fixedCountdownRef, {\n [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n [styles.tokens.fixedCountdown.left]: formatUnitValue(\n getOffsetLeft(),\n \"px\"\n ),\n [styles.tokens.fixedCountdown.right]: formatUnitValue(\n getOffsetRight(),\n \"px\"\n ),\n });\n\n useEffect(() => {\n setIsPlaying(show);\n }, [show]);\n\n useEffect(() => {\n if (remainingSeconds === 0) {\n performOnFinishHandler();\n } else if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ) {\n performOnTickHandler();\n performOnNotifyHandler();\n }\n }, [remainingSeconds]);\n\n useEffect(() => {\n const y = getOffsetY();\n setOffsetY(y);\n }, [isMobile, offset?.top, mobileOffset?.top]);\n\n useEffect(() => {\n if (wrapperRef.current) {\n const handleResize = throttle(handleWindowResize, 300);\n handleWindowResize();\n\n window.addEventListener(\"resize\", handleResize);\n\n return () => {\n window.removeEventListener(\"resize\", handleResize);\n };\n }\n }, [wrapperRef.current]);\n\n // Announcements\n useEffect(() => {\n const timeElapsed = initialSeconds - remainingSeconds;\n if (timeElapsed === 0) return;\n // Polite notification\n if (timeElapsed % reminderInterval === 0) {\n if (\n typeof notifyTimer !== \"number\" \|\|\n remainingSeconds > notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }\n\n // Assertive notification\n if (\n typeof notifyTimer === \"number\" &&\n remainingSeconds === notifyTimer\n ) {\n setAnnouncement(getAccessibleTimeText(remainingSeconds));\n }\n }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n useEffect(() => {\n // reset\n isNotified.current = false;\n }, [initialSeconds, show]);\n\n // =============================================================================\n // EVENT HANDLERS\n // =============================================================================\n const handleWindowResize = () => {\n if (!wrapperRef.current) return;\n\n const clientRect = wrapperRef.current.getBoundingClientRect();\n\n setClientRectX(clientRect.x);\n setClientRectRight(clientRect.right);\n };\n\n const handleOnFocus = () => {\n const focusMessage = getAccessibleTimeText(remainingSeconds);\n setAnnouncement(focusMessage);\n };\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n\n const performOnTickHandler = () => {\n if (onTick) {\n onTick(remainingSeconds);\n }\n };\n\n const performOnNotifyHandler = () => {\n if (onNotify && !isNotified.current) {\n isNotified.current = true;\n onNotify();\n }\n };\n\n const performOnFinishHandler = () => {\n setIsPlaying(false);\n\n if (onFinish) onFinish();\n };\n\n function getOffsetY() {\n const desktopTop = offset?.top ?? 168;\n const mobileTop = mobileOffset?.top ?? 80;\n const offsetY = isMobile ? mobileTop : desktopTop;\n\n return offsetY;\n }\n\n function getOffsetLeft() {\n if (!isMounted \|\| align !== \"left\") return undefined;\n return offset?.left ?? clientRectX;\n }\n\n function getOffsetRight() {\n if (!isMounted \|\| align !== \"right\") return undefined;\n return (\n offset?.right ??\n Math.floor(document.body.clientWidth - clientRectRight)\n );\n }\n\n const getAccessibleTimeText = (seconds: number): string => {\n const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n if (minutes > 0 && secs > 0) {\n return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n } else if (minutes > 0) {\n return `Time left: ${minutes} ${minuteText}`;\n } else {\n return `Time left: ${secs} ${secondText}`;\n }\n };\n // =============================================================================\n // RENDER FUNCTION\n // =============================================================================\n\n const renderPeriodicAndWarningAnnouncement = () => (\n <VisuallyHidden\n aria-live={\n typeof notifyTimer === \"number\" &&\n remainingSeconds <= notifyTimer\n ? \"assertive\"\n : \"polite\"\n }\n aria-atomic=\"true\"\n >\n {announcement}\n </VisuallyHidden>\n );\n\n const renderTimer = () => {\n const { minutes, seconds } =\n TimeHelper.toMinutesSeconds(remainingSeconds);\n const m = minutes !== 1 ? \"mins\" : \"min\";\n const s = seconds !== 1 ? \"secs\" : \"sec\";\n return (\n <>\n <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n <div className={styles.timeLeft}>Time left:</div>\n <div\n className={styles.timer}\n aria-label={getAccessibleTimeText(remainingSeconds)}\n >\n {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n </div>\n {renderPeriodicAndWarningAnnouncement()}\n </>\n );\n };\n\n const renderInlineCountdown = () => {\n return (\n <div\n data-testid={testId}\n data-id=\"countdown-wrapper\"\n data-warn={!!warn}\n ref={wrapperRef}\n inert={inertValue(!isVisible)}\n className={clsx(\n styles.countdown,\n styles.countdownInline,\n !isVisible && styles.countdownHidden\n )}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n const renderFixedCountdown = () => {\n return (\n <div\n ref={fixedCountdownRef}\n data-testid={testId}\n data-id=\"fixed-countdown-wrapper\"\n data-warn={!!warn}\n className={clsx(styles.countdown, styles.countdownFixed)}\n tabIndex={0}\n role=\"timer\"\n aria-label=\"Countdown timer\"\n onFocus={handleOnFocus}\n >\n {renderTimer()}\n </div>\n );\n };\n\n if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n return (\n <div className={clsx(styles.wrapper, className)} {...otherProps}>\n <div ref={stickyRef}></div>\n {renderInlineCountdown()}\n {wrapperRef.current && !isVisible && renderFixedCountdown()}\n </div>\n );\n};\n"],"names":["CountdownTimer","_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}

package/countdown-timer/types.d.ts CHANGED Viewed

@@ -72,17 +72,17 @@ interface CountdownTimerBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     reminderInterval?: number | undefined;
 }
 /** Props for the duration-based variant. */
-interface TimerProps extends CountdownTimerBaseProps {
+interface TimerProps {
     /** Duration of the countdown in seconds. */
     timer: number;
     timestamp?: number | undefined;
 }
 /** Props for the deadline-based variant. */
-interface TimestampProps extends CountdownTimerBaseProps {
+interface TimestampProps {
     /** Unix timestamp (milliseconds since Jan 1, 1970) at which the countdown ends. */
     timestamp: number;
     timer?: number | undefined;
 }
 /** Props for `CountdownTimer` component. */
-export type CountdownTimerProps = TimerProps | TimestampProps;
+export type CountdownTimerProps = CountdownTimerBaseProps & (TimerProps | TimestampProps);
 export {};

package/dashed-border/dashed-border.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n isColourToken,\n isRadiusToken,\n isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n props: DashedBorderProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const {\n enabled = true,\n thickness = BorderThickness[\"width-010\"],\n radius = Radius[\"none\"],\n colour = Colour[\"border\"],\n backgroundColor,\n className,\n children,\n ...otherProps\n } = props;\n\n const effectiveThickness = useResolvedTokenValue({\n value: thickness,\n fallback: BorderThickness[\"width-010\"],\n isToken: isThicknessToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveRadius = useResolvedTokenValue({\n value: radius,\n fallback: Radius[\"none\"],\n isToken: isRadiusToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveColour = useResolvedTokenValue({\n value: colour,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const effectiveBackgroundColor = useResolvedTokenValue({\n value: backgroundColor,\n fallback: \"none\",\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const showSvg = enabled \|\| !!backgroundColor;\n const overlayBackgroundImage = createSvgBackgroundImage({\n radius: effectiveRadius,\n colour: effectiveColour,\n thickness: effectiveThickness,\n enabled,\n });\n const rootRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n useApplyStyle(rootRef, {\n [styles.tokens.rootRadius]: effectiveRadius,\n [styles.tokens.rootBackgroundColor]: backgroundColor\n ? effectiveBackgroundColor\n : null,\n });\n\n useApplyStyle(overlayRef, {\n [styles.tokens.overlayBackgroundImage]: showSvg\n ? overlayBackgroundImage\n : null,\n });\n\n return (\n <div\n ref={mergedRootRef}\n className={clsx(styles.root, className)}\n {...otherProps}\n >\n {showSvg && (\n <div\n aria-hidden=\"true\"\n className={styles.overlay}\n ref={overlayRef}\n />\n )}\n {children}\n </div>\n );\n};\n\n/*\n A container that renders a dashed border using an SVG overlay.\n \n Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+qCAeA,~~MA2FaA~~,EAAeC,~~GA3FV~~,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}
1	+ {"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n isColourToken,\n isRadiusToken,\n isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n props: DashedBorderProps,\n ref: React.Ref<HTMLDivElement>\n) => {\n const {\n enabled = true,\n thickness = BorderThickness[\"width-010\"],\n radius = Radius[\"none\"],\n colour = Colour[\"border\"],\n backgroundColor,\n className,\n children,\n ...otherProps\n } = props;\n\n const effectiveThickness = useResolvedTokenValue({\n value: thickness,\n fallback: BorderThickness[\"width-010\"],\n isToken: isThicknessToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveRadius = useResolvedTokenValue({\n value: radius,\n fallback: Radius[\"none\"],\n isToken: isRadiusToken,\n normalizeCustom: toCssValue,\n });\n\n const effectiveColour = useResolvedTokenValue({\n value: colour,\n fallback: Colour[\"border\"],\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const effectiveBackgroundColor = useResolvedTokenValue({\n value: backgroundColor,\n fallback: \"none\",\n isToken: isColourToken,\n normalizeCustom: String,\n });\n\n const showSvg = enabled \|\| !!backgroundColor;\n const overlayBackgroundImage = createSvgBackgroundImage({\n radius: effectiveRadius,\n colour: effectiveColour,\n thickness: effectiveThickness,\n enabled,\n });\n const rootRef = useRef<HTMLDivElement>(null);\n const overlayRef = useRef<HTMLDivElement>(null);\n const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n useApplyStyle(rootRef, {\n [styles.tokens.rootRadius]: effectiveRadius,\n [styles.tokens.rootBackgroundColor]: backgroundColor\n ? effectiveBackgroundColor\n : null,\n });\n\n useApplyStyle(overlayRef, {\n [styles.tokens.overlayBackgroundImage]: showSvg\n ? overlayBackgroundImage\n : null,\n });\n\n return (\n <div\n ref={mergedRootRef}\n className={clsx(styles.root, className)}\n {...otherProps}\n >\n {showSvg && (\n <div\n aria-hidden=\"true\"\n className={styles.overlay}\n ref={overlayRef}\n />\n )}\n {children}\n </div>\n );\n};\n\n// @catalog\n/*\n A container that renders a dashed border using an SVG overlay.\n \n Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+qCAeA,MA4FaA,EAAeC,GA5FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}

package/data-table/data-table.d.ts CHANGED Viewed

@@ -7,4 +7,4 @@ import type { DataTableProps } from "./types";
  * content are all externally controlled; the component manages scroll detection, sticky-header
  * positioning, and floating action bar behaviour internally.
  */
-export declare const DataTable: ({ id, headers, rows, className, sortIndicators, alternatingRows, loadState, enableMultiSelect, selectedIds, disabledIds, enableActionBar, enableSelectAll, enableStickyHeader, emptyView, actionBarContent, renderCustomEmptyView, onHeaderClick, onSelect, onSelectAll, onClearSelectionClick, ...otherProps }: DataTableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const DataTable: ({ id, headers, rows, className, sortIndicators, alternatingRows, loadState, enableMultiSelect, selectedIds, disabledIds, enableActionBar, enableActionBarWithoutSelection, enableSelectAll, enableStickyHeader, emptyView, actionBarContent, renderCustomEmptyView, onHeaderClick, onSelect, onSelectAll, onClearSelectionClick, ...otherProps }: DataTableProps) => import("react/jsx-runtime").JSX.Element;

package/data-table/data-table.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as r}from"react/jsx-runtime";import{ArrowUpIcon as n,ArrowDownIcon as l}from"@lifesg/react-icons";import o from"clsx";import{useRef as a,useState as s,useEffect as d}from"react";import{useResizeDetector as c}from"../external/react-resize-detector/build/index.esm.js";import"../animations/loading-dots/loading-dots.js";import{LoadingDotsSpinner as m}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"../theme/theme-provider/context.js";import{Checkbox as h}from"../checkbox/checkbox.js";import{ErrorDisplay as p}from"../error-display/error-display.js";import{VisuallyHidden as u,concatIds as g}from"../shared/accessibility/index.js";import{BasicButton as b}from"../shared/input-wrapper/input-wrapper.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as f}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as y}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as w}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as v}from"../util/use-event.js";import{useEventListener as j}from"../util/use-event-listener.js";import{useThrottle as N}from"../util/use-throttle.js";import{tokens as S,tableContainer as k,table as $,tableWrapper as C,tableWrapperScrollable as x,stickyHeader as H,headerRow as B,bodyRow as R,emptyStateCell as I,bodyRowWithBottomBorder as A,bodyRowAlternating as M,bodyRowSelectable as W,bodyRowSelected as K,loadingStateWrapper as L,actionBarWrapper as V,actionBarButton as q,actionBar as z,actionBarFloating as D,actionBarSpacer as E,selectionCheckboxWrapper as _,headerCell as O,headerCellCheckbox as P,headerCellContent as T,headerCellClickable as F,emptyStateTitle as G,bodyCell as J,bodyCellCheckbox as Q,bodyCellText as U}from"./data-table.styles.js";const X=X=>{var{id:Y,headers:Z,rows:ee,className:te,sortIndicators:ie,alternatingRows:re,loadState:ne="success",enableMultiSelect:le,selectedIds:oe,disabledIds:ae,enableActionBar:se,enableSelectAll:de,enableStickyHeader:ce,emptyView:me,actionBarContent:he,renderCustomEmptyView:pe,onHeaderClick:ue,onSelect:ge,onSelectAll:be,onClearSelectionClick:fe}=X,ye=e(X,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const we=a(null),ve=a(null),je=a(null),Ne=a(null),Se=w(),ke=Z.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[$e,Ce]=s("inline"),[xe,He]=s(!1),[Be,Re]=s(!1);f(je,{[S.actionBarWrapperLeft]:Be&&we.current?`${we.current.getBoundingClientRect().left}px`:void 0,[S.actionBarWrapperWidth]:we.current?`${we.current.clientWidth}px`:void 0});const Ie=v((()=>{Pe()}));d((()=>{Ie()}),[Ie]);const Ae=N((()=>Pe()),100);c({targetRef:Ne,onResize:()=>Ae()}),j("scroll",Ae),j("scroll",Ae,Ne.current);const Me=()=>!!(ee&&ee.length&&oe)&&oe.length===ee.length,We=e=>!!(null==oe?void 0:oe.includes(e)),Ke=e=>!!re&&e%2==1,Le=e=>!!(null==ae?void 0:ae.includes(e)),Ve=e=>{if(ye["data-testid"])return`${ye["data-testid"]}-${e}`},qe=()=>Z.length+(le?1:0),ze=e=>null==ie?void 0:ie[e],De=e=>{const t=ze(e);if(t)return"asc"===t?"ascending":"descending"},Ee=e=>` by ${"asc"===ze(e)?"descending":"ascending"} order`,_e=(e,t)=>`${Se}-row-${e}-${t}-key-column`,Oe=e=>{const t=ke.map((t=>_e(e,t.fieldKey)));return g(...t)},Pe=()=>{if(!Ne.current||!ve.current||!je.current)return;const e=Ne.current.getBoundingClientRect(),t=ve.current.getBoundingClientRect();let i="inline";const r=Ne.current.scrollHeight>Ne.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?i="inline":r?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?i="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(i="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(i="fixed"),He(r),Ce(i),"fixed"===i)Re(!0);else if("sticky"===i){const e=Ne.current.scrollTop+Ne.current.clientHeight<Ne.current.scrollHeight;Re(e)}else Re(!1)},Te=e=>{const{fieldKey:r,label:n,clickable:l=!1,style:a}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!ze(r),d=(e=>`${Se}-header-${e}`)(r);return t("th",{"data-testid":Ve(`header-${r}`),className:o(O,l&&F),scope:"col","aria-sort":De(r),style:a,onClick:()=>(e=>{null==ue||ue(e)})(r),children:[t("div",{className:T,id:d,children:["string"==typeof n?i(y.BodyBL,{weight:"bold",children:n}):n,Fe(r)]}),(l||s)&&i(u,{children:t("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==ue||ue(t)})(e,r),children:[s&&"Sort ",i("span",{"aria-labelledby":d}),s&&Ee(r)]})})]},r)},Fe=e=>{const t=null==ie?void 0:ie[e];return t?"asc"===t?i(n,{"aria-hidden":!0,"data-testid":Ve(`header-${e}-arrowup`)}):i(l,{"aria-hidden":!0,"data-testid":Ve(`header-${e}-arrowdown`)}):i(r,{})},Ge=()=>i("th",{"data-testid":Ve("header-selection"),className:o(O,P),scope:"col",children:t("div",{className:_,children:[i(u,{children:"Row selection"}),de&&i(h,{checked:Me(),indeterminate:!!oe&&0!==oe.length&&!Me(),disabled:!ee||!ee.length||!oe,"aria-label":"Select all rows",onClick:()=>{be&&be(Me())}})]})}),Je=(e,t)=>{const r="string"==typeof e?void 0:e.style,n="string"==typeof e?e:e.fieldKey,l=t.id.toString(),o=t[n],a=`${l}-${n}`;let s;return s="string"==typeof o||"number"==typeof o?i(y.BodyBL,{className:U,children:o}):"function"==typeof o?o(t,{isSelected:We(l)}):o,i("td",{"data-testid":Ve(`row-${a}`),id:_e(l,n),className:J,style:r,children:s},a)},Qe=e=>{const t=e.id.toString();return i("td",{"data-testid":Ve(`row-${t}-selection`),className:o(J,Q),children:i("div",{className:_,children:i(h,{checked:We(t),"aria-labelledby":Oe(t),onClick:()=>{ge&&ge(t,!We(t))},disabled:Le(t),focusableWhenDisabled:Le(t)})})})},Ue=()=>{let e;return e=(null==me?void 0:me.title)?"string"==typeof me.title?i(y.HeadingSM,{className:G,weight:"bold",children:me.title}):me.title:i(y.HeadingSM,{className:G,weight:"bold",children:"No <items> found"}),i(p,Object.assign({type:"no-item-found"},me,{title:e,description:(null==me?void 0:me.description)?me.description:"No matching rows"}))};return t("div",{id:Y||"table-wrapper","data-testid":ye["data-testid"]||"table",className:o(C,xe&&x,te),ref:Ne,tabIndex:0,children:[i("div",{className:k,children:t("table",{ref:we,className:$,children:[i("thead",{ref:ve,className:ce?H:void 0,children:t("tr",{className:B,children:[le&&Ge(),Z.map(Te)]})}),i("tbody",{children:"success"===ne?!ee||ee.length<1?i("tr",{className:R,children:i("td",{className:I,colSpan:qe(),children:pe?pe():Ue()})}):i(r,{children:null==ee?void 0:ee.map(((e,i)=>t("tr",{"data-testid":Ve(`row-${e.id.toString()}`),className:o(R,Be&&A,Ke(i)&&M,le&&W,We(e.id.toString())&&K),children:[le&&Qe(e),Z.map((t=>Je(t,e)))]},e.id.toString())))}):i("tr",{className:R,children:i("td",{colSpan:qe(),children:i("div",{className:L,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===ne&&i(m,{})})})})})]})}),se&&oe&&oe.length>0&&(()=>{var e;const n=null!==(e=null==oe?void 0:oe.length)&&void 0!==e?e:0,l="item"+(n>1?"s":"");return t(r,{children:[i("div",{ref:je,className:V,"data-strategy":$e,children:t("div",{"data-testid":"data-table-action-bar",className:o(z,Be&&D),children:[i(y.BodyMD,{weight:"semibold",children:`${n} ${l} selected`}),i(b,{className:q,type:"button","aria-label":`Clear selection of ${n} ${l}`,onClick:fe,children:"Clear selection"}),he]})}),"sticky"!==$e&&i("div",{className:E})]})})()]})};export{X as DataTable};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as n}from"react/jsx-runtime";import{ArrowUpIcon as r,ArrowDownIcon as l}from"@lifesg/react-icons";import o from"clsx";import{useRef as a,useState as s,useEffect as d}from"react";import{useResizeDetector as c}from"../external/react-resize-detector/build/index.esm.js";import"../animations/loading-dots/loading-dots.js";import{LoadingDotsSpinner as m}from"../animations/loading-dots-spinner/loading-dots-spinner.js";import"../animations/loading-spinner/loading-spinner.js";import"../theme/theme-provider/context.js";import{Checkbox as h}from"../checkbox/checkbox.js";import{ErrorDisplay as p}from"../error-display/error-display.js";import{VisuallyHidden as u,concatIds as g}from"../shared/accessibility/index.js";import{BasicButton as b}from"../shared/input-wrapper/input-wrapper.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as f}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import{Typography as y}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as w}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useEvent as v}from"../util/use-event.js";import{useEventListener as j}from"../util/use-event-listener.js";import{useThrottle as N}from"../util/use-throttle.js";import{tokens as S,tableContainer as k,table as $,tableWrapper as C,tableWrapperScrollable as x,stickyHeader as H,headerRow as B,bodyRow as A,emptyStateCell as R,bodyRowWithBottomBorder as I,bodyRowAlternating as W,bodyRowSelectable as M,bodyRowSelected as K,loadingStateWrapper as L,actionBarWrapper as V,actionBarButton as q,actionBarGap as z,actionBar as D,actionBarFloating as E,actionBarSpacer as _,selectionCheckboxWrapper as O,headerCell as P,headerCellCheckbox as T,headerCellContent as F,headerCellClickable as G,emptyStateTitle as J,bodyCell as Q,bodyCellCheckbox as U,bodyCellText as X}from"./data-table.styles.js";const Y=Y=>{var{id:Z,headers:ee,rows:te,className:ie,sortIndicators:ne,alternatingRows:re,loadState:le="success",enableMultiSelect:oe,selectedIds:ae,disabledIds:se,enableActionBar:de,enableActionBarWithoutSelection:ce,enableSelectAll:me,enableStickyHeader:he,emptyView:pe,actionBarContent:ue,renderCustomEmptyView:ge,onHeaderClick:be,onSelect:fe,onSelectAll:ye,onClearSelectionClick:we}=Y,ve=e(Y,["id","headers","rows","className","sortIndicators","alternatingRows","loadState","enableMultiSelect","selectedIds","disabledIds","enableActionBar","enableActionBarWithoutSelection","enableSelectAll","enableStickyHeader","emptyView","actionBarContent","renderCustomEmptyView","onHeaderClick","onSelect","onSelectAll","onClearSelectionClick"]);const je=a(null),Ne=a(null),Se=a(null),ke=a(null),$e=w(),Ce=ee.filter((e=>"string"!=typeof e&&!!e.keyColumn)),[xe,He]=s("inline"),[Be,Ae]=s(!1),[Re,Ie]=s(!1);f(Se,{[S.actionBarWrapperLeft]:Re&&je.current?`${je.current.getBoundingClientRect().left}px`:void 0,[S.actionBarWrapperWidth]:je.current?`${je.current.clientWidth}px`:void 0});const We=v((()=>{Fe()}));d((()=>{We()}),[We]);const Me=N((()=>Fe()),100);c({targetRef:ke,onResize:()=>Me()}),j("scroll",Me),j("scroll",Me,ke.current);const Ke=()=>!!(te&&te.length&&ae)&&ae.length===te.length,Le=e=>!!(null==ae?void 0:ae.includes(e)),Ve=e=>!!re&&e%2==1,qe=e=>!!(null==se?void 0:se.includes(e)),ze=e=>{if(ve["data-testid"])return`${ve["data-testid"]}-${e}`},De=()=>ee.length+(oe?1:0),Ee=e=>null==ne?void 0:ne[e],_e=e=>{const t=Ee(e);if(t)return"asc"===t?"ascending":"descending"},Oe=e=>` by ${"asc"===Ee(e)?"descending":"ascending"} order`,Pe=(e,t)=>`${$e}-row-${e}-${t}-key-column`,Te=e=>{const t=Ce.map((t=>Pe(e,t.fieldKey)));return g(...t)},Fe=()=>{if(!ke.current||!Ne.current||!Se.current)return;const e=ke.current.getBoundingClientRect(),t=Ne.current.getBoundingClientRect();let i="inline";const n=ke.current.scrollHeight>ke.current.clientHeight;if(e.top>window.innerHeight||e.bottom<0?i="inline":n?e.top>0&&e.top<window.innerHeight&&e.bottom>0&&e.bottom<window.innerHeight||e.top<0&&e.bottom>0&&e.bottom<window.innerHeight?i="sticky":e.bottom>window.innerHeight&&Math.max(e.top,t.bottom)+t.height<window.innerHeight&&(i="fixed"):e.bottom>window.innerHeight&&t.bottom+t.height<window.innerHeight&&(i="fixed"),Ae(n),He(i),"fixed"===i)Ie(!0);else if("sticky"===i){const e=ke.current.scrollTop+ke.current.clientHeight<ke.current.scrollHeight;Ie(e)}else Ie(!1)},Ge=e=>{const{fieldKey:n,label:r,clickable:l=!1,style:a}="string"==typeof e?{fieldKey:e,label:e,style:void 0}:e,s=!!Ee(n),d=(e=>`${$e}-header-${e}`)(n);return t("th",{"data-testid":ze(`header-${n}`),className:o(P,l&&G),scope:"col","aria-sort":_e(n),style:a,onClick:()=>(e=>{null==be||be(e)})(n),children:[t("div",{className:F,id:d,children:["string"==typeof r?i(y.BodyBL,{weight:"bold",children:r}):r,Je(n)]}),(l||s)&&i(u,{children:t("button",{onClick:e=>((e,t)=>{e.stopPropagation(),null==be||be(t)})(e,n),children:[s&&"Sort ",i("span",{"aria-labelledby":d}),s&&Oe(n)]})})]},n)},Je=e=>{const t=null==ne?void 0:ne[e];return t?"asc"===t?i(r,{"aria-hidden":!0,"data-testid":ze(`header-${e}-arrowup`)}):i(l,{"aria-hidden":!0,"data-testid":ze(`header-${e}-arrowdown`)}):i(n,{})},Qe=()=>i("th",{"data-testid":ze("header-selection"),className:o(P,T),scope:"col",children:t("div",{className:O,children:[i(u,{children:"Row selection"}),me&&i(h,{checked:Ke(),indeterminate:!!ae&&0!==ae.length&&!Ke(),disabled:!te||!te.length||!ae,"aria-label":"Select all rows",onClick:()=>{ye&&ye(Ke())}})]})}),Ue=(e,t)=>{const n="string"==typeof e?void 0:e.style,r="string"==typeof e?e:e.fieldKey,l=t.id.toString(),o=t[r],a=`${l}-${r}`;let s;return s="string"==typeof o||"number"==typeof o?i(y.BodyBL,{className:X,children:o}):"function"==typeof o?o(t,{isSelected:Le(l)}):o,i("td",{"data-testid":ze(`row-${a}`),id:Pe(l,r),className:Q,style:n,children:s},a)},Xe=e=>{const t=e.id.toString();return i("td",{"data-testid":ze(`row-${t}-selection`),className:o(Q,U),children:i("div",{className:O,children:i(h,{checked:Le(t),"aria-labelledby":Te(t),onClick:()=>{fe&&fe(t,!Le(t))},disabled:qe(t),focusableWhenDisabled:qe(t)})})})},Ye=()=>{let e;return e=(null==pe?void 0:pe.title)?"string"==typeof pe.title?i(y.HeadingSM,{className:J,weight:"bold",children:pe.title}):pe.title:i(y.HeadingSM,{className:J,weight:"bold",children:"No <items> found"}),i(p,Object.assign({type:"no-item-found"},pe,{title:e,description:(null==pe?void 0:pe.description)?pe.description:"No matching rows"}))};return t("div",{id:Z||"table-wrapper","data-testid":ve["data-testid"]||"table",className:o(C,Be&&x,ie),ref:ke,tabIndex:0,children:[i("div",{className:k,children:t("table",{ref:je,className:$,children:[i("thead",{ref:Ne,className:he?H:void 0,children:t("tr",{className:B,children:[oe&&Qe(),ee.map(Ge)]})}),i("tbody",{children:"success"===le?!te||te.length<1?i("tr",{className:A,children:i("td",{className:R,colSpan:De(),children:ge?ge():Ye()})}):i(n,{children:null==te?void 0:te.map(((e,i)=>t("tr",{"data-testid":ze(`row-${e.id.toString()}`),className:o(A,Re&&I,Ve(i)&&W,oe&&M,Le(e.id.toString())&&K),children:[oe&&Xe(e),ee.map((t=>Ue(t,e)))]},e.id.toString())))}):i("tr",{className:A,children:i("td",{colSpan:De(),children:i("div",{className:L,role:"status","aria-live":"polite","aria-label":"Loading table",children:"loading"===le&&i(m,{})})})})})]})}),de&&(ae&&ae.length>0||ce)&&(()=>{var e;const r=null!==(e=null==ae?void 0:ae.length)&&void 0!==e?e:0,l="item"+(1===r?"":"s");return t(n,{children:[i("div",{ref:Se,className:V,"data-strategy":xe,children:t("div",{"data-testid":"data-table-action-bar",className:o(D,Re&&E),children:[i(y.BodyMD,{weight:"semibold",children:`${r} ${l} selected`}),r>0?i(b,{className:q,type:"button","aria-label":`Clear selection of ${r} ${l}`,onClick:we,children:"Clear selection"}):i("div",{className:z}),ue]})}),"sticky"!==xe&&i("div",{className:_})]})})()]})};export{Y as DataTable};
 //# sourceMappingURL=data-table.js.map