npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.0 → 1.0.0-alpha.2 - Mend

@salt-ds/lab 1.0.0-alpha.0 → 1.0.0-alpha.2

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

Files changed (785) hide show

package/dist-es/packages/lab/src/editable-label/EditableLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import ~~classnames~~ from \"~~classnames~~\";\nimport React, {\n ChangeEvent,\n KeyboardEvent,\n useCallback,\n forwardRef,\n ForwardedRef,\n ReactElement,\n useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n className?: string;\n defaultEditing?: boolean;\n defaultValue?: string;\n editing?: boolean;\n onEnterEditMode: () => void;\n onChange?: (value: string) => void;\n onExitEditMode: (\n originalLabel: string \| undefined,\n editedLabel: string \| undefined,\n allowDeactivation?: boolean\n ) => void;\n defaultIsEditing?: boolean;\n value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n {\n className: classNameProp,\n defaultEditing,\n defaultValue,\n editing: editingProp,\n onChange,\n onEnterEditMode,\n onExitEditMode,\n value: valueProp,\n }: EditableLabelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"EditableLabel\",\n state: \"value\",\n });\n\n const [editing, setEditing] = useControlled({\n controlled: editingProp,\n default: defaultEditing ?? false,\n name: \"EditableLabel\",\n state: \"editing\",\n });\n\n const initialValue = useRef(value);\n\n useIsomorphicLayoutEffect(() => {\n if (editing) {\n if (inputRef.current !== null) {\n inputRef.current.select();\n inputRef.current.focus();\n }\n }\n }, [editing, inputRef]);\n\n const enterEditMode = useCallback(() => {\n setEditing(true);\n // ignoreBlur.current = false;\n onEnterEditMode && onEnterEditMode();\n }, [onEnterEditMode, setEditing]);\n\n const exitEditMode = ({\n cancelEdit = false,\n allowDeactivation = false,\n } = {}) => {\n setEditing(false);\n const originalValue = initialValue.current;\n if (originalValue !== value) {\n if (cancelEdit) {\n setValue(originalValue);\n } else {\n initialValue.current = value;\n }\n }\n onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n };\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n const { value } = evt.target;\n setValue(value);\n onChange && onChange(value);\n };\n\n const handleDoubleClick = () => {\n enterEditMode();\n };\n\n const handleBlur = () => {\n exitEditMode({ allowDeactivation: true });\n };\n\n const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n if (editing && evt.key === \"Enter\") {\n evt.stopPropagation();\n // we are likely to lose focus as a consequence of user response\n // to exitEdit transition, don't want it to trigger another\n //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n exitEditMode();\n } else if (evt.key === \"ArrowRight\" \|\| evt.key === \"ArrowLeft\") {\n evt.stopPropagation();\n } else if (evt.key === \"Escape\") {\n exitEditMode({ cancelEdit: true });\n }\n };\n\n const className = ~~classnames~~(classBase, classNameProp, {\n [`${classBase}-editing`]: editing,\n });\n return (\n <div\n className={className}\n onDoubleClick={handleDoubleClick}\n data-text={value}\n ref={forwardedRef}\n >\n {editing ? (\n <Input\n inputProps={{ className: `${classBase}-input` }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={inputRef}\n style={{ padding: 0 }}\n textAlign=\"left\"\n />\n ) : (\n value\n )}\n </div>\n );\n});\n"],"names":["EditableLabel","value"~~,"classnames"~~],"mappings":"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~~GAAYC~~,~~EAAW~~,CAAA,SAAA,EAAW,aAAe,EAAA;AAAA,~~IACrD~~,CAAC,GAAG,SAAsB,CAAA,QAAA,CAAA,GAAA,OAAA;AAAA,GAC3B,CAAA,CAAA;AACD,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAA;AAAA,IACA,aAAe,EAAA,iBAAA;AAAA,IACf,WAAW,EAAA,KAAA;AAAA,IACX,GAAK,EAAA,YAAA;AAAA,IAEJ,oCACE,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,UAAY,EAAA,EAAE,SAAW,EAAA,CAAA,EAAG,SAAkB,CAAA,MAAA,CAAA,EAAA;AAAA,MAC9C,KAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,QAAU,EAAA,YAAA;AAAA,MACV,SAAW,EAAA,aAAA;AAAA,MACX,GAAK,EAAA,QAAA;AAAA,MACL,KAAA,EAAO,EAAE,OAAA,EAAS,CAAE,EAAA;AAAA,MACpB,SAAU,EAAA,MAAA;AAAA,KACZ,CAEA,GAAA,KAAA;AAAA,GAEJ,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"EditableLabel.js","sources":["../src/editable-label/EditableLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, {\n ChangeEvent,\n KeyboardEvent,\n useCallback,\n forwardRef,\n ForwardedRef,\n ReactElement,\n useRef,\n} from \"react\";\nimport { useControlled, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { Input } from \"../input\";\n\nimport \"./EditableLabel.css\";\n\nconst classBase = \"saltEditableLabel\";\n\nexport interface EditableLabelProps {\n className?: string;\n defaultEditing?: boolean;\n defaultValue?: string;\n editing?: boolean;\n onEnterEditMode: () => void;\n onChange?: (value: string) => void;\n onExitEditMode: (\n originalLabel: string \| undefined,\n editedLabel: string \| undefined,\n allowDeactivation?: boolean\n ) => void;\n defaultIsEditing?: boolean;\n value?: string;\n}\n\nexport const EditableLabel = forwardRef(function EditableLabel(\n {\n className: classNameProp,\n defaultEditing,\n defaultValue,\n editing: editingProp,\n onChange,\n onEnterEditMode,\n onExitEditMode,\n value: valueProp,\n }: EditableLabelProps,\n forwardedRef: ForwardedRef<HTMLDivElement>\n): ReactElement<EditableLabelProps> {\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue ?? \"\",\n name: \"EditableLabel\",\n state: \"value\",\n });\n\n const [editing, setEditing] = useControlled({\n controlled: editingProp,\n default: defaultEditing ?? false,\n name: \"EditableLabel\",\n state: \"editing\",\n });\n\n const initialValue = useRef(value);\n\n useIsomorphicLayoutEffect(() => {\n if (editing) {\n if (inputRef.current !== null) {\n inputRef.current.select();\n inputRef.current.focus();\n }\n }\n }, [editing, inputRef]);\n\n const enterEditMode = useCallback(() => {\n setEditing(true);\n // ignoreBlur.current = false;\n onEnterEditMode && onEnterEditMode();\n }, [onEnterEditMode, setEditing]);\n\n const exitEditMode = ({\n cancelEdit = false,\n allowDeactivation = false,\n } = {}) => {\n setEditing(false);\n const originalValue = initialValue.current;\n if (originalValue !== value) {\n if (cancelEdit) {\n setValue(originalValue);\n } else {\n initialValue.current = value;\n }\n }\n onExitEditMode && onExitEditMode(originalValue, value, allowDeactivation);\n };\n\n const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {\n const { value } = evt.target;\n setValue(value);\n onChange && onChange(value);\n };\n\n const handleDoubleClick = () => {\n enterEditMode();\n };\n\n const handleBlur = () => {\n exitEditMode({ allowDeactivation: true });\n };\n\n const handleKeyDown = (evt: KeyboardEvent<HTMLInputElement>) => {\n if (editing && evt.key === \"Enter\") {\n evt.stopPropagation();\n // we are likely to lose focus as a consequence of user response\n // to exitEdit transition, don't want it to trigger another\n //shouldn't we call setEditing here in case we are in uncontrolled mode ?\n exitEditMode();\n } else if (evt.key === \"ArrowRight\" \|\| evt.key === \"ArrowLeft\") {\n evt.stopPropagation();\n } else if (evt.key === \"Escape\") {\n exitEditMode({ cancelEdit: true });\n }\n };\n\n const className = clsx(classBase, classNameProp, {\n [`${classBase}-editing`]: editing,\n });\n return (\n <div\n className={className}\n onDoubleClick={handleDoubleClick}\n data-text={value}\n ref={forwardedRef}\n >\n {editing ? (\n <Input\n inputProps={{ className: `${classBase}-input` }}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={handleKeyDown}\n ref={inputRef}\n style={{ padding: 0 }}\n textAlign=\"left\"\n />\n ) : (\n value\n )}\n </div>\n );\n});\n"],"names":["EditableLabel","value"],"mappings":"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"}

package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { makePrefixer, useId, Button } from '@salt-ds/core';
 import { ErrorIcon, UploadIcon } from '@salt-ds/icons';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import { containsFiles, extractFiles, validateFiles } from './internal/utils.js';
 import './FileDropZone.css.js';
@@ -114,7 +114,7 @@ const FileDropZone = forwardRef(
     const buttonLabelledBy = (isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]).join(" ");
     return /* @__PURE__ */ jsxs("div", {
       ...restProps,
-      className: cx(
+      className: clsx(
         withBaseName(),
         {
           [withBaseName("error")]: isRejected,

package/dist-es/packages/lab/src/file-drop-zone/FileDropZone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport cx from \"classnames\";\nimport {\n ChangeEventHandler,\n DragEvent,\n DragEventHandler,\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n ReactNode,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n files: ReadonlyArray<File>,\n event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n errors: ReadonlyArray<ErrorType>,\n event: SyntheticEvent\n) => void;\n\n/*\n Removed deprecated props\n \n - onDrop\n * - onFileTypeError\n * - showUploadButton\n /\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\n /\n `accept` attribute for HTML <input>.\n \n A comma separated list of file types the user can pick from the file input dialog box.\n /\n accept?: string;\n\n /\n The text content of the drop area component.\n /\n children?: ReactNode;\n\n /\n Additional usage information.\n /\n description?: string;\n\n /\n If `true`, the file drop zone will be disabled.\n /\n disabled?: boolean;\n\n /\n This prop is used to help implement the accessibility logic.\n * If you don't provide this prop. It falls back to a randomly generated id.\n /\n id?: string;\n\n /\n Callback on successful file drop or selection.\n /\n onFilesAccepted?: FilesAcceptedEventHandler;\n\n /\n @see `validate` prop\n * Callback on drop or input in case of an error. A list of errors will be provided as input.\n /\n onFilesRejected?: FilesRejectedEventHandler;\n\n /\n A list of custom validation functions. Every function is provided with the entire file list as input\n * thus can perform validations on all files. Each function needs to return one or more errors in case of\n * a failed validation, or `undefined` in case of a successful one.\n \n All errors are collected in the end and returned as an array to `onFilesRejected`.\n /\n validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n accept,\n className,\n children,\n description,\n disabled,\n id: idProp,\n validate,\n onFilesAccepted,\n onFilesRejected,\n ...restProps\n },\n ref\n ) {\n const id = useId(idProp);\n\n const iconId = `${id}-icon`;\n const buttonId = `${id}-button`;\n const descriptionId = `${id}-description`;\n\n const [dropResult, setDropResult] = useState<null \| {\n event: SyntheticEvent;\n files?: ReadonlyArray<File>;\n errors: string[];\n }>(null);\n const [isActive, setActive] = useState(false);\n const [isRejected, setRejected] = useState(false);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!disabled && dropResult) {\n const { event, files, errors } = dropResult;\n\n if (errors && errors.length !== 0) {\n setRejected(true);\n if (!!onFilesRejected) {\n return onFilesRejected(errors, event);\n }\n }\n\n setRejected(false);\n return onFilesAccepted?.(files!, event);\n }\n }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n return;\n } else {\n // Not using 'move', otherwise apps like Outlook will delete the item\n event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n }\n\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n };\n\n const handleDragLeave = () => setActive(false);\n\n const handleFilesDrop = (event: SyntheticEvent) => {\n if (!containsFiles(event as DragEvent)) {\n return setDropResult({\n event,\n errors: [INVALID_DROP_TARGET],\n });\n }\n\n const files = extractFiles(event as DragEvent);\n\n if (files.length > 0) {\n return setDropResult({\n event,\n files,\n errors: validate ? validateFiles({ files, validate }) : [],\n });\n }\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleFilesDrop(event);\n setActive(false);\n };\n\n const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n event.stopPropagation();\n\n handleFilesDrop(event);\n };\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleInputFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current && buttonRef.current.focus();\n },\n []\n );\n\n const handleInputClick = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current && fileInputRef.current.click();\n },\n []\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n fileInputRef.current && fileInputRef.current.click();\n }\n },\n []\n );\n\n const fileDropZoneDescription = description ? (\n <div className=\"saltFileDropZone-description\" id={descriptionId}>\n {description}\n </div>\n ) : null;\n\n const buttonLabelledBy = (\n isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n ).join(\" \");\n\n return (\n <div\n {...restProps}\n className={cx(\n withBaseName(),\n {\n [withBaseName(\"error\")]: isRejected,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={ref}\n >\n {/ TODO: Check whether we want to replace this with aria announce /}\n <div aria-live=\"polite\">\n {/\n * It is an ADA requirement to always display an input button.-\n /}\n {isRejected ? (\n <ErrorIcon\n aria-label=\"error!\"\n className={withBaseName(\"icon\")}\n size={2}\n />\n ) : (\n <UploadIcon className={withBaseName(\"icon\")} size={2} />\n )}\n {isRejected && fileDropZoneDescription}\n </div>\n <div className={withBaseName(\"title\")}>\n {children \|\| \"Drop files here or\"}\n </div>\n <label className={withBaseName(\"inputRoot\")}>\n <Button\n aria-labelledby={buttonLabelledBy}\n ref={buttonRef}\n className={withBaseName(\"inputButton\")}\n data-testid=\"file-input-button\"\n disabled={disabled}\n onKeyDown={handleKeyDown}\n onClick={handleInputClick}\n >\n {/ TODO: expose this in props */}\n {buttonLabel.toUpperCase()}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n data-testid=\"file-input\"\n disabled={disabled}\n multiple\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </label>\n {!isRejected && fileDropZoneDescription}\n </div>\n );\n }\n);\n"],"names":["FileDropZone"],"mappings":"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"}
1	+ {"version":3,"file":"FileDropZone.js","sources":["../src/file-drop-zone/FileDropZone.tsx"],"sourcesContent":["import { Button, makePrefixer, useId } from \"@salt-ds/core\";\nimport { ErrorIcon, UploadIcon } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport {\n ChangeEventHandler,\n DragEvent,\n DragEventHandler,\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n KeyboardEvent,\n ReactNode,\n SyntheticEvent,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { containsFiles, extractFiles, validateFiles } from \"./internal/utils\";\nimport { FilesValidator } from \"./validators\";\n\nimport \"./FileDropZone.css\";\n\n// Recommended button label by ADA review\nconst buttonLabel = \"Browse files\";\nconst INVALID_DROP_TARGET = \"Drop target doesn't contain any file.\";\n\nexport type FilesAcceptedEventHandler = (\n files: ReadonlyArray<File>,\n event: SyntheticEvent\n) => void;\n\nexport type FilesRejectedEventHandler<ErrorType = string> = (\n errors: ReadonlyArray<ErrorType>,\n event: SyntheticEvent\n) => void;\n\n/*\n Removed deprecated props\n \n - onDrop\n * - onFileTypeError\n * - showUploadButton\n /\n\nexport interface FileDropZoneProps extends HTMLAttributes<HTMLDivElement> {\n /\n `accept` attribute for HTML <input>.\n \n A comma separated list of file types the user can pick from the file input dialog box.\n /\n accept?: string;\n\n /\n The text content of the drop area component.\n /\n children?: ReactNode;\n\n /\n Additional usage information.\n /\n description?: string;\n\n /\n If `true`, the file drop zone will be disabled.\n /\n disabled?: boolean;\n\n /\n This prop is used to help implement the accessibility logic.\n * If you don't provide this prop. It falls back to a randomly generated id.\n /\n id?: string;\n\n /\n Callback on successful file drop or selection.\n /\n onFilesAccepted?: FilesAcceptedEventHandler;\n\n /\n @see `validate` prop\n * Callback on drop or input in case of an error. A list of errors will be provided as input.\n /\n onFilesRejected?: FilesRejectedEventHandler;\n\n /\n A list of custom validation functions. Every function is provided with the entire file list as input\n * thus can perform validations on all files. Each function needs to return one or more errors in case of\n * a failed validation, or `undefined` in case of a successful one.\n \n All errors are collected in the end and returned as an array to `onFilesRejected`.\n /\n validate?: ReadonlyArray<FilesValidator<any>>;\n}\n\nconst withBaseName = makePrefixer(\"saltFileDropZone\");\n\nexport const FileDropZone = forwardRef<HTMLDivElement, FileDropZoneProps>(\n function FileDropZone(\n {\n accept,\n className,\n children,\n description,\n disabled,\n id: idProp,\n validate,\n onFilesAccepted,\n onFilesRejected,\n ...restProps\n },\n ref\n ) {\n const id = useId(idProp);\n\n const iconId = `${id}-icon`;\n const buttonId = `${id}-button`;\n const descriptionId = `${id}-description`;\n\n const [dropResult, setDropResult] = useState<null \| {\n event: SyntheticEvent;\n files?: ReadonlyArray<File>;\n errors: string[];\n }>(null);\n const [isActive, setActive] = useState(false);\n const [isRejected, setRejected] = useState(false);\n\n const buttonRef = useRef<HTMLButtonElement>(null);\n const fileInputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (!disabled && dropResult) {\n const { event, files, errors } = dropResult;\n\n if (errors && errors.length !== 0) {\n setRejected(true);\n if (!!onFilesRejected) {\n return onFilesRejected(errors, event);\n }\n }\n\n setRejected(false);\n return onFilesAccepted?.(files!, event);\n }\n }, [disabled, dropResult, onFilesAccepted, onFilesRejected]);\n\n const handleDragOver: DragEventHandler<HTMLDivElement> = (event) => {\n // Need to cancel the default events to allow drop\n // https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/Drag_operations#droptargets\n event.preventDefault();\n event.stopPropagation();\n\n if (disabled) {\n event.dataTransfer && (event.dataTransfer.dropEffect = \"none\");\n return;\n } else {\n // Not using 'move', otherwise apps like Outlook will delete the item\n event.dataTransfer && (event.dataTransfer.dropEffect = \"copy\");\n }\n\n if (!isActive && containsFiles(event)) {\n setActive(true);\n }\n };\n\n const handleDragLeave = () => setActive(false);\n\n const handleFilesDrop = (event: SyntheticEvent) => {\n if (!containsFiles(event as DragEvent)) {\n return setDropResult({\n event,\n errors: [INVALID_DROP_TARGET],\n });\n }\n\n const files = extractFiles(event as DragEvent);\n\n if (files.length > 0) {\n return setDropResult({\n event,\n files,\n errors: validate ? validateFiles({ files, validate }) : [],\n });\n }\n };\n\n const handleDrop: DragEventHandler<HTMLDivElement> = (event) => {\n event.preventDefault();\n event.stopPropagation();\n\n handleFilesDrop(event);\n setActive(false);\n };\n\n const handleInputChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n event.stopPropagation();\n\n handleFilesDrop(event);\n };\n\n // As an ADA requirement when dialog is closed and the focus is returned to the input, we need to\n // move focus back on the button element so that all labels can be announced correctly\n const handleInputFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n event.stopPropagation();\n buttonRef.current && buttonRef.current.focus();\n },\n []\n );\n\n const handleInputClick = useCallback(\n (event: SyntheticEvent<HTMLButtonElement>) => {\n event.stopPropagation();\n fileInputRef.current && fileInputRef.current.click();\n },\n []\n );\n\n const handleKeyDown = useCallback(\n (event: KeyboardEvent<HTMLButtonElement>) => {\n if ([\"Enter\", \"Space\"].indexOf(event.key) !== -1) {\n fileInputRef.current && fileInputRef.current.click();\n }\n },\n []\n );\n\n const fileDropZoneDescription = description ? (\n <div className=\"saltFileDropZone-description\" id={descriptionId}>\n {description}\n </div>\n ) : null;\n\n const buttonLabelledBy = (\n isRejected ? [buttonId, iconId, descriptionId] : [buttonId, descriptionId]\n ).join(\" \");\n\n return (\n <div\n {...restProps}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"error\")]: isRejected,\n [withBaseName(\"active\")]: isActive,\n [withBaseName(\"disabled\")]: disabled,\n },\n className\n )}\n onDragLeave={handleDragLeave}\n onDragOver={handleDragOver}\n onDrop={handleDrop}\n ref={ref}\n >\n {/ TODO: Check whether we want to replace this with aria announce /}\n <div aria-live=\"polite\">\n {/\n * It is an ADA requirement to always display an input button.-\n /}\n {isRejected ? (\n <ErrorIcon\n aria-label=\"error!\"\n className={withBaseName(\"icon\")}\n size={2}\n />\n ) : (\n <UploadIcon className={withBaseName(\"icon\")} size={2} />\n )}\n {isRejected && fileDropZoneDescription}\n </div>\n <div className={withBaseName(\"title\")}>\n {children \|\| \"Drop files here or\"}\n </div>\n <label className={withBaseName(\"inputRoot\")}>\n <Button\n aria-labelledby={buttonLabelledBy}\n ref={buttonRef}\n className={withBaseName(\"inputButton\")}\n data-testid=\"file-input-button\"\n disabled={disabled}\n onKeyDown={handleKeyDown}\n onClick={handleInputClick}\n >\n {/ TODO: expose this in props */}\n {buttonLabel.toUpperCase()}\n </Button>\n <input\n accept={accept}\n className=\"input-hidden\"\n data-testid=\"file-input\"\n disabled={disabled}\n multiple\n onChange={handleInputChange}\n onFocus={handleInputFocus}\n ref={fileInputRef}\n type=\"file\"\n />\n </label>\n {!isRejected && fileDropZoneDescription}\n </div>\n );\n }\n);\n"],"names":["FileDropZone"],"mappings":";;;;;;;;AAwBA,MAAM,WAAc,GAAA,cAAA,CAAA;AACpB,MAAM,mBAAsB,GAAA,uCAAA,CAAA;AAsE5B,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA;AAAA,IACE,MAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,eAAA;AAAA,IACA,eAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,MAAM,SAAS,CAAG,EAAA,EAAA,CAAA,KAAA,CAAA,CAAA;AAClB,IAAA,MAAM,WAAW,CAAG,EAAA,EAAA,CAAA,OAAA,CAAA,CAAA;AACpB,IAAA,MAAM,gBAAgB,CAAG,EAAA,EAAA,CAAA,YAAA,CAAA,CAAA;AAEzB,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAIjC,IAAI,CAAA,CAAA;AACP,IAAA,MAAM,CAAC,QAAA,EAAU,SAAS,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAC5C,IAAA,MAAM,CAAC,UAAA,EAAY,WAAW,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAEhD,IAAM,MAAA,SAAA,GAAY,OAA0B,IAAI,CAAA,CAAA;AAChD,IAAM,MAAA,YAAA,GAAe,OAAyB,IAAI,CAAA,CAAA;AAElD,IAAA,SAAA,CAAU,MAAM;AACd,MAAI,IAAA,CAAC,YAAY,UAAY,EAAA;AAC3B,QAAA,MAAM,EAAE,KAAA,EAAO,KAAO,EAAA,MAAA,EAAW,GAAA,UAAA,CAAA;AAEjC,QAAI,IAAA,MAAA,IAAU,MAAO,CAAA,MAAA,KAAW,CAAG,EAAA;AACjC,UAAA,WAAA,CAAY,IAAI,CAAA,CAAA;AAChB,UAAI,IAAA,CAAC,CAAC,eAAiB,EAAA;AACrB,YAAO,OAAA,eAAA,CAAgB,QAAQ,KAAK,CAAA,CAAA;AAAA,WACtC;AAAA,SACF;AAEA,QAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AACjB,QAAA,OAAO,mDAAkB,KAAQ,EAAA,KAAA,CAAA,CAAA;AAAA,OACnC;AAAA,OACC,CAAC,QAAA,EAAU,UAAY,EAAA,eAAA,EAAiB,eAAe,CAAC,CAAA,CAAA;AAE3D,IAAM,MAAA,cAAA,GAAmD,CAAC,KAAU,KAAA;AAGlE,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,IAAI,QAAU,EAAA;AACZ,QAAM,KAAA,CAAA,YAAA,KAAiB,KAAM,CAAA,YAAA,CAAa,UAAa,GAAA,MAAA,CAAA,CAAA;AACvD,QAAA,OAAA;AAAA,OACK,MAAA;AAEL,QAAM,KAAA,CAAA,YAAA,KAAiB,KAAM,CAAA,YAAA,CAAa,UAAa,GAAA,MAAA,CAAA,CAAA;AAAA,OACzD;AAEA,MAAA,IAAI,CAAC,QAAA,IAAY,aAAc,CAAA,KAAK,CAAG,EAAA;AACrC,QAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,OAChB;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,eAAA,GAAkB,MAAM,SAAA,CAAU,KAAK,CAAA,CAAA;AAE7C,IAAM,MAAA,eAAA,GAAkB,CAAC,KAA0B,KAAA;AACjD,MAAI,IAAA,CAAC,aAAc,CAAA,KAAkB,CAAG,EAAA;AACtC,QAAA,OAAO,aAAc,CAAA;AAAA,UACnB,KAAA;AAAA,UACA,MAAA,EAAQ,CAAC,mBAAmB,CAAA;AAAA,SAC7B,CAAA,CAAA;AAAA,OACH;AAEA,MAAM,MAAA,KAAA,GAAQ,aAAa,KAAkB,CAAA,CAAA;AAE7C,MAAI,IAAA,KAAA,CAAM,SAAS,CAAG,EAAA;AACpB,QAAA,OAAO,aAAc,CAAA;AAAA,UACnB,KAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA,EAAQ,WAAW,aAAc,CAAA,EAAE,OAAO,QAAS,EAAC,IAAI,EAAC;AAAA,SAC1D,CAAA,CAAA;AAAA,OACH;AAAA,KACF,CAAA;AAEA,IAAM,MAAA,UAAA,GAA+C,CAAC,KAAU,KAAA;AAC9D,MAAA,KAAA,CAAM,cAAe,EAAA,CAAA;AACrB,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AACrB,MAAA,SAAA,CAAU,KAAK,CAAA,CAAA;AAAA,KACjB,CAAA;AAEA,IAAM,MAAA,iBAAA,GAA0D,CAAC,KAAU,KAAA;AACzE,MAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AAEtB,MAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAAA,KACvB,CAAA;AAIA,IAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,MACvB,CAAC,KAAwC,KAAA;AACvC,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,QAAU,SAAA,CAAA,OAAA,IAAW,SAAU,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AAAA,OAC/C;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAEA,IAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,MACvB,CAAC,KAA6C,KAAA;AAC5C,QAAA,KAAA,CAAM,eAAgB,EAAA,CAAA;AACtB,QAAa,YAAA,CAAA,OAAA,IAAW,YAAa,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AAAA,OACrD;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAEA,IAAA,MAAM,aAAgB,GAAA,WAAA;AAAA,MACpB,CAAC,KAA4C,KAAA;AAC3C,QAAI,IAAA,CAAC,SAAS,OAAO,CAAA,CAAE,QAAQ,KAAM,CAAA,GAAG,MAAM,CAAI,CAAA,EAAA;AAChD,UAAa,YAAA,CAAA,OAAA,IAAW,YAAa,CAAA,OAAA,CAAQ,KAAM,EAAA,CAAA;AAAA,SACrD;AAAA,OACF;AAAA,MACA,EAAC;AAAA,KACH,CAAA;AAEA,IAAM,MAAA,uBAAA,GAA0B,8BAC7B,GAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAU,EAAA,8BAAA;AAAA,MAA+B,EAAI,EAAA,aAAA;AAAA,MAC/C,QAAA,EAAA,WAAA;AAAA,KACH,CACE,GAAA,IAAA,CAAA;AAEJ,IAAA,MAAM,gBACJ,GAAA,CAAA,UAAA,GAAa,CAAC,QAAA,EAAU,MAAQ,EAAA,aAAa,CAAI,GAAA,CAAC,QAAU,EAAA,aAAa,CACzE,EAAA,IAAA,CAAK,GAAG,CAAA,CAAA;AAEV,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,UAAA;AAAA,UACzB,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,QAAA;AAAA,UAC1B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,SAC9B;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACA,WAAa,EAAA,eAAA;AAAA,MACb,UAAY,EAAA,cAAA;AAAA,MACZ,MAAQ,EAAA,UAAA;AAAA,MACR,GAAA;AAAA,MAGA,QAAA,EAAA;AAAA,wBAAC,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,WAAU,EAAA,QAAA;AAAA,UAIZ,QAAA,EAAA;AAAA,YAAA,UAAA,mBACE,GAAA,CAAA,SAAA,EAAA;AAAA,cACC,YAAW,EAAA,QAAA;AAAA,cACX,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,cAC9B,IAAM,EAAA,CAAA;AAAA,aACR,oBAEC,GAAA,CAAA,UAAA,EAAA;AAAA,cAAW,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,cAAG,IAAM,EAAA,CAAA;AAAA,aAAG,CAAA;AAAA,YAEvD,UAAc,IAAA,uBAAA;AAAA,WAAA;AAAA,SACjB,CAAA;AAAA,wBACC,GAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UACjC,QAAY,EAAA,QAAA,IAAA,oBAAA;AAAA,SACf,CAAA;AAAA,wBACC,IAAA,CAAA,OAAA,EAAA;AAAA,UAAM,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,UACxC,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,iBAAiB,EAAA,gBAAA;AAAA,cACjB,GAAK,EAAA,SAAA;AAAA,cACL,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,cACrC,aAAY,EAAA,mBAAA;AAAA,cACZ,QAAA;AAAA,cACA,SAAW,EAAA,aAAA;AAAA,cACX,OAAS,EAAA,gBAAA;AAAA,cAGR,sBAAY,WAAY,EAAA;AAAA,aAC3B,CAAA;AAAA,4BACC,GAAA,CAAA,OAAA,EAAA;AAAA,cACC,MAAA;AAAA,cACA,SAAU,EAAA,cAAA;AAAA,cACV,aAAY,EAAA,YAAA;AAAA,cACZ,QAAA;AAAA,cACA,QAAQ,EAAA,IAAA;AAAA,cACR,QAAU,EAAA,iBAAA;AAAA,cACV,OAAS,EAAA,gBAAA;AAAA,cACT,GAAK,EAAA,YAAA;AAAA,cACL,IAAK,EAAA,MAAA;AAAA,aACP,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,QACC,CAAC,UAAc,IAAA,uBAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/form-field/FormField.js CHANGED Viewed

@@ -1,11 +1,8 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
 import { forwardRef, useRef, useMemo, useState } from 'react';
-import { makePrefixer, useId, useForkRef } from '@salt-ds/core';
+import { makePrefixer, useId, useForkRef, Tooltip } from '@salt-ds/core';
 import { FormFieldContext } from '../form-field-context/FormFieldContext.js';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
 import { classBase } from './constant.js';
 import { FormActivationIndicator } from './FormActivationIndicator.js';
 import { FormHelperText } from './FormHelperText.js';
@@ -108,77 +105,67 @@ const FormField = forwardRef(
     const focusClass = disableFocusRing ? "lowFocused" : "focused";
     const inlineHelperText = renderHelperText && helperTextPlacement === "bottom";
     const tooltipHelperText = renderHelperText && helperTextPlacement === "tooltip" && !hasStatusIndicator;
-    const { getTooltipProps, getTriggerProps } = useTooltip({
-      disabled: !tooltipHelperText
-    });
-    const { ref: triggerRef, ...triggerProps } = getTriggerProps({
-      className: cx(
-        withBaseName(),
-        {
-          [withBaseName("disabled")]: disabled,
-          [withBaseName("readOnly")]: readOnly,
-          [withBaseName("warning")]: isWarning,
-          [withBaseName("error")]: isError,
-          [withBaseName("fullWidth")]: fullWidth,
-          [withBaseName(focusClass)]: states.focused,
-          [withBaseName("labelTop")]: labelTop,
-          [withBaseName("labelLeft")]: labelLeft,
-          [withBaseName(`withHelperText`)]: inlineHelperText,
-          [withBaseName(variant)]: variant
-        },
-        className
-      ),
-      ...eventHandlers,
-      ...restProps
-    });
-    const handleTriggerRef = useForkRef(triggerRef, rootRef);
-    const handleRef = useForkRef(handleTriggerRef, ref);
-    return /* @__PURE__ */ jsxs(Fragment, {
-      children: [
-        /* @__PURE__ */ jsx("div", {
-          ref: handleRef,
-          ...triggerProps,
-          children: /* @__PURE__ */ jsxs(FormFieldContext.Provider, {
-            value: {
-              ...states,
-              ...dispatchers,
-              ...eventHandlers,
-              a11yProps: a11yValue,
-              inFormField: true,
-              ref: rootRef
-            },
-            children: [
-              hasLabel && /* @__PURE__ */ jsx(LabelComponent, {
-                ...LabelProps,
-                validationStatus,
-                hasStatusIndicator,
-                StatusIndicatorProps: StatusIndicatorProps2,
-                className: LabelProps.className,
-                label,
-                disabled,
-                readOnly,
-                required,
-                tooltipText: helperText,
-                id: labelId
-              }),
-              children,
-              /* @__PURE__ */ jsx(ActivationIndicatorComponent, {
-                hasIcon: !hasStatusIndicator,
-                validationStatus
-              }),
-              renderHelperText && /* @__PURE__ */ jsx(HelperTextComponent, {
-                helperText,
-                helperTextPlacement,
-                ...HelperTextProps,
-                id: helperTextId
-              })
-            ]
-          })
-        }),
-        /* @__PURE__ */ jsx(Tooltip, {
-          ...getTooltipProps({ title: helperText })
+    const handleTriggerRef = useForkRef(rootRef, ref);
+    return /* @__PURE__ */ jsx(Tooltip, {
+      disabled: !tooltipHelperText,
+      content: helperText,
+      children: /* @__PURE__ */ jsx("div", {
+        ref: handleTriggerRef,
+        className: clsx(
+          withBaseName(),
+          {
+            [withBaseName("disabled")]: disabled,
+            [withBaseName("readOnly")]: readOnly,
+            [withBaseName("warning")]: isWarning,
+            [withBaseName("error")]: isError,
+            [withBaseName("fullWidth")]: fullWidth,
+            [withBaseName(focusClass)]: states.focused,
+            [withBaseName("labelTop")]: labelTop,
+            [withBaseName("labelLeft")]: labelLeft,
+            [withBaseName(`withHelperText`)]: inlineHelperText,
+            [withBaseName(variant)]: variant
+          },
+          className
+        ),
+        ...eventHandlers,
+        ...restProps,
+        children: /* @__PURE__ */ jsxs(FormFieldContext.Provider, {
+          value: {
+            ...states,
+            ...dispatchers,
+            ...eventHandlers,
+            a11yProps: a11yValue,
+            inFormField: true,
+            ref: rootRef
+          },
+          children: [
+            hasLabel && /* @__PURE__ */ jsx(LabelComponent, {
+              ...LabelProps,
+              validationStatus,
+              hasStatusIndicator,
+              StatusIndicatorProps: StatusIndicatorProps2,
+              className: LabelProps.className,
+              label,
+              disabled,
+              readOnly,
+              required,
+              tooltipText: helperText,
+              id: labelId
+            }),
+            children,
+            /* @__PURE__ */ jsx(ActivationIndicatorComponent, {
+              hasIcon: !hasStatusIndicator,
+              validationStatus
+            }),
+            renderHelperText && /* @__PURE__ */ jsx(HelperTextComponent, {
+              helperText,
+              helperTextPlacement,
+              ...HelperTextProps,
+              id: helperTextId
+            })
+          ]
         })
-      ]
+      })
     });
   }
 );

package/dist-es/packages/lab/src/form-field/FormField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import cx from \"classnames\";\nimport {\n Dispatch,\n ElementType,\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n SetStateAction,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { Tooltip, useTooltip } from \"../tooltip\";\nimport { classBase } from \"./constant\";\nimport {\n FormActivationIndicator,\n FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" \| \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" \| \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" \| \"warning\";\n\nexport interface A11yValueProps\n extends Pick<NecessityIndicatorOptions, \"required\"> {\n /*\n If `true`, the FormField will be disabled.\n /\n disabled?: boolean;\n /* id of the helper text node /\n helperTextId?: string;\n /* id of the label node /\n labelId?: string;\n /\n The FormField value is Readonly\n /\n readOnly?: boolean;\n\n /\n Whether the form field needs to render helper text\n /\n renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /\n The component used for activation indicator. Default to `FormActivationIndicator`.\n /\n ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n /\n Outer focus ring focus will not be applied. Defaults to false.\n /\n disableFocusRing?: boolean;\n // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n // we should also support 'auto' or explicit numeric values\n /\n Whether the form field is occupying full width.\n /\n fullWidth?: boolean;\n /\n Whether to show the StatusIndicator component for validation states.\n /\n hasStatusIndicator?: boolean;\n /\n The helper text content\n /\n helperText?: string;\n /\n The component used for the helper text. Default to `FormHelperText`.\n /\n HelperTextComponent?: ElementType<FormHelperTextProps>;\n /\n Location the helperText, values: 'bottom' (default) or 'tooltip'.\n /\n helperTextPlacement?: FormFieldHelperTextPlacement;\n /\n Props to be applied to the `HelperTextComponent`.\n \n Generic on `FormHelperTextProps` is omitted.\n /\n HelperTextProps?: Partial<FormHelperTextProps>;\n /\n The label value for the FormField\n /\n label?: string;\n /\n The component used for the label. Default to `FormLabel`.\n /\n LabelComponent?: ElementType;\n /\n Location the label, values: 'top' (default) or 'left'\n /\n labelPlacement?: FormFieldLabelPlacement;\n /\n Props to be applied to the `LabelComponent`\n /\n LabelProps?: Partial<FormLabelProps>;\n /\n Override props to be used with the StatusIndicator component\n /\n StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n /\n The state for the FormField: Must be one of: 'error'\|'warning'\|undefined\n /\n validationStatus?: FormFieldValidationStatus;\n /\n FormField variants; defaults to primary.\n /\n variant?: \"primary\" \| \"secondary\" \| \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-required\": A11yValueProps[\"required\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] \| undefined;\n disabled: A11yValueProps[\"disabled\"];\n readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n}: A11yValueProps) => {\n return useMemo(\n () => ({\n \"aria-labelledby\": labelId,\n \"aria-required\": required,\n \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n disabled,\n readOnly,\n }),\n [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n onBlur,\n onFocus,\n}: {\n onBlur?: FocusEventHandler<HTMLDivElement>;\n onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n { focused: boolean },\n { setFocused: Dispatch<SetStateAction<boolean>> },\n {\n onBlur: FocusEventHandler<HTMLDivElement>;\n onFocus: FocusEventHandler<HTMLDivElement>;\n }\n] => {\n const [focused, setFocused] = useState(false);\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(false);\n onBlur?.(event);\n };\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(true);\n onFocus?.(event);\n };\n return [\n {\n focused,\n },\n {\n setFocused,\n },\n {\n onBlur: handleBlur,\n onFocus: handleFocus,\n },\n ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n (\n {\n ActivationIndicatorComponent = FormActivationIndicator,\n children,\n className,\n disabled,\n disableFocusRing = false,\n fullWidth = true,\n hasStatusIndicator,\n HelperTextComponent = FormHelperText,\n HelperTextProps,\n helperText,\n helperTextPlacement = \"bottom\",\n label,\n LabelComponent = FormLabel,\n labelPlacement = \"top\",\n LabelProps = { displayedNecessity: \"required\" },\n onBlur,\n onFocus,\n readOnly,\n required,\n StatusIndicatorProps,\n validationStatus,\n variant = \"primary\",\n ...restProps\n }: FormFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const labelId = useId(LabelProps?.id);\n const helperTextId = useId(HelperTextProps?.id);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const renderHelperText = !!helperText;\n\n const a11yValue = useA11yValue({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n });\n\n const [states, dispatchers, eventHandlers] = useFormField({\n onBlur,\n onFocus,\n });\n\n const hasLabel = label !== undefined;\n const labelTop = hasLabel && labelPlacement === \"top\";\n const labelLeft = hasLabel && labelPlacement === \"left\";\n const isWarning = validationStatus === \"warning\";\n const isError = validationStatus === \"error\";\n const focusClass = disableFocusRing\n ? \"lowFocused\"\n : \"focused\"; / NOTE: need to look at */\n const inlineHelperText =\n renderHelperText && helperTextPlacement === \"bottom\";\n const tooltipHelperText =\n renderHelperText &&\n helperTextPlacement === \"tooltip\" &&\n !hasStatusIndicator;\n\n const { getTooltipProps, getTriggerProps } = useTooltip({\n disabled: !tooltipHelperText,\n });\n\n const { ref: triggerRef, ...triggerProps } = getTriggerProps({\n className: cx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"warning\")]: isWarning,\n [withBaseName(\"error\")]: isError,\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(focusClass)]: states.focused,\n [withBaseName(\"labelTop\")]: labelTop,\n [withBaseName(\"labelLeft\")]: labelLeft,\n [withBaseName(`withHelperText`)]: inlineHelperText,\n [withBaseName(variant)]: variant,\n },\n className\n ),\n ...eventHandlers,\n ...restProps,\n });\n\n const handleTriggerRef = useForkRef(triggerRef, rootRef);\n const handleRef = useForkRef(handleTriggerRef, ref);\n\n return (\n <>\n <div ref={handleRef} {...triggerProps}>\n <FormFieldContext.Provider\n value={{\n ...states,\n ...dispatchers,\n ...eventHandlers,\n a11yProps: a11yValue,\n inFormField: true,\n ref: rootRef,\n }}\n >\n {hasLabel && (\n <LabelComponent\n {...LabelProps}\n validationStatus={validationStatus}\n hasStatusIndicator={hasStatusIndicator}\n StatusIndicatorProps={StatusIndicatorProps}\n className={LabelProps.className}\n label={label}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n tooltipText={helperText}\n id={labelId}\n />\n )}\n {children}\n <ActivationIndicatorComponent\n hasIcon={!hasStatusIndicator}\n validationStatus={validationStatus}\n />\n {renderHelperText && (\n <HelperTextComponent\n helperText={helperText}\n helperTextPlacement={helperTextPlacement}\n {...HelperTextProps}\n id={helperTextId}\n />\n )}\n </FormFieldContext.Provider>\n </div>\n <Tooltip {...getTooltipProps({ title: helperText })} />\n </>\n );\n }\n);\n"],"names":["StatusIndicatorProps"],"mappings":"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"}
1	+ {"version":3,"file":"FormField.js","sources":["../src/form-field/FormField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n Dispatch,\n ElementType,\n FocusEventHandler,\n ForwardedRef,\n forwardRef,\n HTMLAttributes,\n SetStateAction,\n useMemo,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, Tooltip, useForkRef, useId } from \"@salt-ds/core\";\nimport { FormFieldContext } from \"../form-field-context\";\nimport { classBase } from \"./constant\";\nimport {\n FormActivationIndicator,\n FormActivationIndicatorProps,\n} from \"./FormActivationIndicator\";\nimport { FormHelperText, FormHelperTextProps } from \"./FormHelperText\";\nimport { FormLabel, FormLabelProps } from \"./FormLabel\";\nimport { NecessityIndicatorOptions } from \"./NecessityIndicator\";\nimport { StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormField.css\";\n\nexport type FormFieldLabelPlacement = \"top\" \| \"left\";\nexport type FormFieldHelperTextPlacement = \"bottom\" \| \"tooltip\";\nexport type FormFieldValidationStatus = \"error\" \| \"warning\";\n\nexport interface A11yValueProps\n extends Pick<NecessityIndicatorOptions, \"required\"> {\n /*\n If `true`, the FormField will be disabled.\n /\n disabled?: boolean;\n /* id of the helper text node /\n helperTextId?: string;\n /* id of the label node /\n labelId?: string;\n /\n The FormField value is Readonly\n /\n readOnly?: boolean;\n\n /\n Whether the form field needs to render helper text\n /\n renderHelperText?: boolean;\n}\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /\n The component used for activation indicator. Default to `FormActivationIndicator`.\n /\n ActivationIndicatorComponent?: ElementType<FormActivationIndicatorProps>;\n /\n Outer focus ring focus will not be applied. Defaults to false.\n /\n disableFocusRing?: boolean;\n // I hate this fullWidth business. We should support a width prop. The default should be 100% (standard block behaviour)\n // we should also support 'auto' or explicit numeric values\n /\n Whether the form field is occupying full width.\n /\n fullWidth?: boolean;\n /\n Whether to show the StatusIndicator component for validation states.\n /\n hasStatusIndicator?: boolean;\n /\n The helper text content\n /\n helperText?: string;\n /\n The component used for the helper text. Default to `FormHelperText`.\n /\n HelperTextComponent?: ElementType<FormHelperTextProps>;\n /\n Location the helperText, values: 'bottom' (default) or 'tooltip'.\n /\n helperTextPlacement?: FormFieldHelperTextPlacement;\n /\n Props to be applied to the `HelperTextComponent`.\n \n Generic on `FormHelperTextProps` is omitted.\n /\n HelperTextProps?: Partial<FormHelperTextProps>;\n /\n The label value for the FormField\n /\n label?: string;\n /\n The component used for the label. Default to `FormLabel`.\n /\n LabelComponent?: ElementType;\n /\n Location the label, values: 'top' (default) or 'left'\n /\n labelPlacement?: FormFieldLabelPlacement;\n /\n Props to be applied to the `LabelComponent`\n /\n LabelProps?: Partial<FormLabelProps>;\n /\n Override props to be used with the StatusIndicator component\n /\n StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n /\n The state for the FormField: Must be one of: 'error'\|'warning'\|undefined\n /\n validationStatus?: FormFieldValidationStatus;\n /\n FormField variants; defaults to primary.\n /\n variant?: \"primary\" \| \"secondary\" \| \"tertiary\";\n}\n\nexport interface useA11yValueValue {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-required\": A11yValueProps[\"required\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] \| undefined;\n disabled: A11yValueProps[\"disabled\"];\n readOnly: A11yValueProps[\"readOnly\"];\n}\n\nconst useA11yValue = ({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n}: A11yValueProps) => {\n return useMemo(\n () => ({\n \"aria-labelledby\": labelId,\n \"aria-required\": required,\n \"aria-describedby\": renderHelperText ? helperTextId : undefined,\n disabled,\n readOnly,\n }),\n [labelId, disabled, readOnly, required, renderHelperText, helperTextId]\n );\n};\n\n// TODO: Add TS props for this\nexport const useFormField = ({\n onBlur,\n onFocus,\n}: {\n onBlur?: FocusEventHandler<HTMLDivElement>;\n onFocus?: FocusEventHandler<HTMLDivElement>;\n}): [\n { focused: boolean },\n { setFocused: Dispatch<SetStateAction<boolean>> },\n {\n onBlur: FocusEventHandler<HTMLDivElement>;\n onFocus: FocusEventHandler<HTMLDivElement>;\n }\n] => {\n const [focused, setFocused] = useState(false);\n const handleBlur: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(false);\n onBlur?.(event);\n };\n const handleFocus: FocusEventHandler<HTMLDivElement> = (event) => {\n setFocused(true);\n onFocus?.(event);\n };\n return [\n {\n focused,\n },\n {\n setFocused,\n },\n {\n onBlur: handleBlur,\n onFocus: handleFocus,\n },\n ];\n};\n\nconst withBaseName = makePrefixer(classBase);\n\nexport const FormField = forwardRef(\n (\n {\n ActivationIndicatorComponent = FormActivationIndicator,\n children,\n className,\n disabled,\n disableFocusRing = false,\n fullWidth = true,\n hasStatusIndicator,\n HelperTextComponent = FormHelperText,\n HelperTextProps,\n helperText,\n helperTextPlacement = \"bottom\",\n label,\n LabelComponent = FormLabel,\n labelPlacement = \"top\",\n LabelProps = { displayedNecessity: \"required\" },\n onBlur,\n onFocus,\n readOnly,\n required,\n StatusIndicatorProps,\n validationStatus,\n variant = \"primary\",\n ...restProps\n }: FormFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const labelId = useId(LabelProps?.id);\n const helperTextId = useId(HelperTextProps?.id);\n const rootRef = useRef<HTMLDivElement>(null);\n\n const renderHelperText = !!helperText;\n\n const a11yValue = useA11yValue({\n required,\n disabled,\n readOnly,\n labelId,\n helperTextId,\n renderHelperText,\n });\n\n const [states, dispatchers, eventHandlers] = useFormField({\n onBlur,\n onFocus,\n });\n\n const hasLabel = label !== undefined;\n const labelTop = hasLabel && labelPlacement === \"top\";\n const labelLeft = hasLabel && labelPlacement === \"left\";\n const isWarning = validationStatus === \"warning\";\n const isError = validationStatus === \"error\";\n const focusClass = disableFocusRing\n ? \"lowFocused\"\n : \"focused\"; / NOTE: need to look at */\n const inlineHelperText =\n renderHelperText && helperTextPlacement === \"bottom\";\n const tooltipHelperText =\n renderHelperText &&\n helperTextPlacement === \"tooltip\" &&\n !hasStatusIndicator;\n\n const handleTriggerRef = useForkRef(rootRef, ref);\n\n return (\n <Tooltip disabled={!tooltipHelperText} content={helperText}>\n <div\n ref={handleTriggerRef}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(\"warning\")]: isWarning,\n [withBaseName(\"error\")]: isError,\n [withBaseName(\"fullWidth\")]: fullWidth,\n [withBaseName(focusClass)]: states.focused,\n [withBaseName(\"labelTop\")]: labelTop,\n [withBaseName(\"labelLeft\")]: labelLeft,\n [withBaseName(`withHelperText`)]: inlineHelperText,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n {...eventHandlers}\n {...restProps}\n >\n <FormFieldContext.Provider\n value={{\n ...states,\n ...dispatchers,\n ...eventHandlers,\n a11yProps: a11yValue,\n inFormField: true,\n ref: rootRef,\n }}\n >\n {hasLabel && (\n <LabelComponent\n {...LabelProps}\n validationStatus={validationStatus}\n hasStatusIndicator={hasStatusIndicator}\n StatusIndicatorProps={StatusIndicatorProps}\n className={LabelProps.className}\n label={label}\n disabled={disabled}\n readOnly={readOnly}\n required={required}\n tooltipText={helperText}\n id={labelId}\n />\n )}\n {children}\n <ActivationIndicatorComponent\n hasIcon={!hasStatusIndicator}\n validationStatus={validationStatus}\n />\n {renderHelperText && (\n <HelperTextComponent\n helperText={helperText}\n helperTextPlacement={helperTextPlacement}\n {...HelperTextProps}\n id={helperTextId}\n />\n )}\n </FormFieldContext.Provider>\n </div>\n </Tooltip>\n );\n }\n);\n"],"names":["StatusIndicatorProps"],"mappings":"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"}

package/dist-es/packages/lab/src/form-field/FormLabel.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { makePrefixer } from '@salt-ds/core';
 import { NecessityIndicator } from './NecessityIndicator.js';
 import { StatusIndicator } from './StatusIndicator.js';
@@ -21,7 +21,7 @@ const FormLabel = ({
   tooltipText,
   ...restProps
 }) => /* @__PURE__ */ jsxs("label", {
-  className: cx(withBaseName(), className, {
+  className: clsx(withBaseName(), className, {
     [withBaseName("disabled")]: disabled
   }),
   ...restProps,

package/dist-es/packages/lab/src/form-field/FormLabel.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormLabel.js","sources":["../src/form-field/FormLabel.tsx"],"sourcesContent":["import cx from \"~~classnames~~\";\nimport { ElementType, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { FormFieldValidationStatus } from \"./FormField\";\nimport {\n NecessityIndicator as DefaultNecessityIndicator,\n NecessityIndicatorOptions,\n} from \"./NecessityIndicator\";\nimport { StatusIndicator, StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormLabel\");\nexport interface FormLabelProps\n extends HTMLAttributes<HTMLLabelElement>,\n NecessityIndicatorOptions {\n /*\n Whether the form field is disabled.\n /\n disabled?: boolean;\n /\n Adjusts whether the StatusIndicator component is shown\n /\n hasStatusIndicator?: boolean;\n /\n The label value for the FormLabel\n /\n label?: string;\n /\n An optional renderer function used to customize the necessity adornment\n /\n NecessityIndicator?: ElementType<NecessityIndicatorOptions>;\n /\n Whether the form field is readOnly.\n /\n readOnly?: boolean;\n /\n Props used to configure the StatusIndicator component if hasStatusIndicator is true\n /\n StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n /\n The status for the FormField: Must be one of: 'error'\|'warning'\|undefined\n /\n validationStatus?: FormFieldValidationStatus;\n /\n Text to be shown in the Tooltip.\n */\n tooltipText?: string;\n}\n\nexport const FormLabel = ({\n label,\n NecessityIndicator = DefaultNecessityIndicator,\n required,\n displayedNecessity,\n hasStatusIndicator = false,\n StatusIndicatorProps,\n validationStatus,\n necessityText,\n className,\n disabled,\n readOnly,\n tooltipText,\n ...restProps\n}: FormLabelProps) => (\n <label\n className={cx(withBaseName(), className, {\n [withBaseName(\"disabled\")]: disabled,\n })}\n {...restProps}\n >\n {label}\n\n <NecessityIndicator\n required={required}\n displayedNecessity={displayedNecessity}\n necessityText={necessityText}\n className={withBaseName(\"necessityIndicator\")}\n />\n {hasStatusIndicator && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={validationStatus}\n tooltipText={tooltipText}\n hasTooltip\n {...StatusIndicatorProps}\n />\n )}\n </label>\n);\n"],"names":["NecessityIndicator","DefaultNecessityIndicator","StatusIndicatorProps"],"mappings":";;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAsC1C,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,sBACAA,oBAAqB,GAAAC,kBAAA;AAAA,EACrB,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAqB,GAAA,KAAA;AAAA,EACrB,oBAAAC,EAAAA,qBAAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAA,qBACG,IAAA,CAAA,OAAA,EAAA;AAAA,EACC,SAAW,EAAA,~~EAAA~~,~~CAAG~~,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,~~IACvC~~,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,GAC7B,CAAA;AAAA,EACA,GAAG,SAAA;AAAA,EAEH,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,oBAEA,GAAA,CAAAF,oBAAA,EAAA;AAAA,MACC,QAAA;AAAA,MACA,kBAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA,EAAW,aAAa,oBAAoB,CAAA;AAAA,KAC9C,CAAA;AAAA,IACC,sCACE,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,MACzC,MAAQ,EAAA,gBAAA;AAAA,MACR,WAAA;AAAA,MACA,UAAU,EAAA,IAAA;AAAA,MACT,GAAGE,qBAAAA;AAAA,KACN,CAAA;AAAA,GAAA;AAAA,CAEJ;;;;"}
1	+ {"version":3,"file":"FormLabel.js","sources":["../src/form-field/FormLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ElementType, HTMLAttributes } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { FormFieldValidationStatus } from \"./FormField\";\nimport {\n NecessityIndicator as DefaultNecessityIndicator,\n NecessityIndicatorOptions,\n} from \"./NecessityIndicator\";\nimport { StatusIndicator, StatusIndicatorProps } from \"./StatusIndicator\";\n\nimport \"./FormLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormLabel\");\nexport interface FormLabelProps\n extends HTMLAttributes<HTMLLabelElement>,\n NecessityIndicatorOptions {\n /*\n Whether the form field is disabled.\n /\n disabled?: boolean;\n /\n Adjusts whether the StatusIndicator component is shown\n /\n hasStatusIndicator?: boolean;\n /\n The label value for the FormLabel\n /\n label?: string;\n /\n An optional renderer function used to customize the necessity adornment\n /\n NecessityIndicator?: ElementType<NecessityIndicatorOptions>;\n /\n Whether the form field is readOnly.\n /\n readOnly?: boolean;\n /\n Props used to configure the StatusIndicator component if hasStatusIndicator is true\n /\n StatusIndicatorProps?: Partial<StatusIndicatorProps>;\n /\n The status for the FormField: Must be one of: 'error'\|'warning'\|undefined\n /\n validationStatus?: FormFieldValidationStatus;\n /\n Text to be shown in the Tooltip.\n */\n tooltipText?: string;\n}\n\nexport const FormLabel = ({\n label,\n NecessityIndicator = DefaultNecessityIndicator,\n required,\n displayedNecessity,\n hasStatusIndicator = false,\n StatusIndicatorProps,\n validationStatus,\n necessityText,\n className,\n disabled,\n readOnly,\n tooltipText,\n ...restProps\n}: FormLabelProps) => (\n <label\n className={clsx(withBaseName(), className, {\n [withBaseName(\"disabled\")]: disabled,\n })}\n {...restProps}\n >\n {label}\n\n <NecessityIndicator\n required={required}\n displayedNecessity={displayedNecessity}\n necessityText={necessityText}\n className={withBaseName(\"necessityIndicator\")}\n />\n {hasStatusIndicator && (\n <StatusIndicator\n className={withBaseName(\"statusIndicator\")}\n status={validationStatus}\n tooltipText={tooltipText}\n hasTooltip\n {...StatusIndicatorProps}\n />\n )}\n </label>\n);\n"],"names":["NecessityIndicator","DefaultNecessityIndicator","StatusIndicatorProps"],"mappings":";;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAsC1C,MAAM,YAAY,CAAC;AAAA,EACxB,KAAA;AAAA,sBACAA,oBAAqB,GAAAC,kBAAA;AAAA,EACrB,QAAA;AAAA,EACA,kBAAA;AAAA,EACA,kBAAqB,GAAA,KAAA;AAAA,EACrB,oBAAAC,EAAAA,qBAAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAA,qBACG,IAAA,CAAA,OAAA,EAAA;AAAA,EACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAW,EAAA;AAAA,IACzC,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,GAC7B,CAAA;AAAA,EACA,GAAG,SAAA;AAAA,EAEH,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,oBAEA,GAAA,CAAAF,oBAAA,EAAA;AAAA,MACC,QAAA;AAAA,MACA,kBAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA,EAAW,aAAa,oBAAoB,CAAA;AAAA,KAC9C,CAAA;AAAA,IACC,sCACE,GAAA,CAAA,eAAA,EAAA;AAAA,MACC,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,MACzC,MAAQ,EAAA,gBAAA;AAAA,MACR,WAAA;AAAA,MACA,UAAU,EAAA,IAAA;AAAA,MACT,GAAGE,qBAAAA;AAAA,KACN,CAAA;AAAA,GAAA;AAAA,CAEJ;;;;"}

package/dist-es/packages/lab/src/form-field/StatusIndicator.js CHANGED Viewed

@@ -1,9 +1,6 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
-import { makePrefixer, StatusIndicator as StatusIndicator$1 } from '@salt-ds/core';
-import { Tooltip } from '../tooltip/Tooltip.js';
-import '../tooltip/TooltipContext.js';
-import { useTooltip } from '../tooltip/useTooltip.js';
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { makePrefixer, StatusIndicator as StatusIndicator$1, Tooltip } from '@salt-ds/core';
 const withBaseName = makePrefixer("saltFormField");
 const StatusIndicator = (props) => {
@@ -17,33 +14,23 @@ const StatusIndicator = (props) => {
     status = "info",
     ...restProps
   } = props;
-  const { getTriggerProps, getTooltipProps } = useTooltip({
+  return /* @__PURE__ */ jsx(TooltipComponent, {
+    hideIcon: true,
+    status,
+    content: tooltipText,
     placement: "top",
-    disabled: !hasTooltip
-  });
-  return /* @__PURE__ */ jsxs(Fragment, {
-    children: [
-      /* @__PURE__ */ jsx(TooltipComponent, {
-        ...getTooltipProps({
-          hideIcon: true,
-          status,
-          title: tooltipText,
-          ...TooltipProps2
-        })
-      }),
-      /* @__PURE__ */ jsx(StatusIndicator$1, {
-        ...getTriggerProps({
-          status,
-          ...restProps,
-          ...IconProps2,
-          className: cx(
-            withBaseName("statusIndicator"),
-            className,
-            IconProps2 == null ? void 0 : IconProps2.className
-          )
-        })
-      })
-    ]
+    disabled: !hasTooltip,
+    ...TooltipProps2,
+    children: /* @__PURE__ */ jsx(StatusIndicator$1, {
+      status,
+      ...restProps,
+      ...IconProps2,
+      className: clsx(
+        withBaseName("statusIndicator"),
+        className,
+        IconProps2 == null ? void 0 : IconProps2.className
+      )
+    })
   });
 };

package/dist-es/packages/lab/src/form-field/StatusIndicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"StatusIndicator.js","sources":["../src/form-field/StatusIndicator.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport cx from \"~~classnames~~\";\nimport { ElementType } from \"react\";\nimport {\n StatusIndicator as BaseStatusIndicator,\n ~~makePrefixer~~,\n} from \"@salt-ds/core\";\~~nimport { Tooltip, TooltipProps, useTooltip } from \"../tooltip\";\~~n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" \| \"info\" \| \"warning\" \| \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n hasTooltip?: boolean;\n IconProps?: Partial<IconProps>;\n status?: StatusIndicatorStatus;\n TooltipComponent?: ElementType<TooltipProps>;\n TooltipProps?: Partial<TooltipProps>;\n tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n const {\n TooltipComponent = Tooltip,\n hasTooltip = false,\n TooltipProps,\n tooltipText,\n IconProps,\n className,\n status = \"info\",\n ...restProps\n } = props;\n\n ~~const~~ { ~~getTriggerProps, getTooltipProps~~ } = ~~useTooltip(~~{\n placement~~: \~~"top\",\n disabled: !hasTooltip~~,\n~~ }~~);\n~~\n ~~return (\n <>\n~~ ~~<TooltipComponent\n~~ {...~~getTooltipProps({\n hideIcon: true,\n status,\n title: tooltipText,\n ...~~TooltipProps~~,\n~~ })}\n ~~/>\~~n <BaseStatusIndicator\n {~~...getTriggerProps<typeof BaseStatusIndicator>({~~\n ~~status,\n~~ ...restProps,\n ...IconProps,\n className~~: cx~~(\n withBaseName(\"statusIndicator\"),\n className,\n IconProps?.className\n ~~),\n~~ })}\n />\n ~~</>\~~n );\n};\n"],"names":["TooltipProps","IconProps","BaseStatusIndicator"],"mappings":"~~;;;;;;;AASA~~,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAA,OAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAAA,EAAAA,aAAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAAC,EAAAA,UAAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACN,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,~~MAAM~~,~~EAAE~~,~~eAAA~~,~~EAAiB~~,~~eAAgB,~~EAAA~~,GAAI,UAAW,CAAA~~;AAAA,~~IACtD~~,~~SAAW~~,EAAA,~~KAAA;AAAA,IACX,UAAU,CAAC,UAAA;AAAA,GACZ,CAAA,CAAA;AAED,EACE,uBAAA,~~IAAA~~,CAAA,QAAA,EAAA~~;AAAA,~~IACE~~,~~QAAA,EAAA~~;AAAA,~~sBAAC~~,~~GAAA~~,~~CAAA,gBAAA,~~EAAA~~;AAAA~~,~~QACE,GAAG,eAAgB,CAAA~~;AAAA,~~UAClB~~,~~QAAU~~,EAAA,~~IAAA~~;AAAA,~~UACV~~,~~MAAA;AAAA~~,~~UACA~~,~~KAAO,EAAA,WAAA~~;AAAA,~~UACP~~,GAAGD,aAAAA;AAAA,~~SACJ~~,~~CAAA;AAAA~~,~~OACH~~,~~CAAA;AAAA,sBACC,~~GAAA,CAAAE,iBAAA,EAAA;AAAA,~~QACE~~,~~GAAG,eAA4C,CAAA;AAAA,UAC9C,~~MAAA;AAAA,~~UACA~~,GAAG,SAAA;AAAA,~~UACH~~,GAAGD,UAAAA;AAAA,~~UACH~~,SAAW,EAAA,~~EAAA~~;AAAA,~~YACT~~,aAAa,iBAAiB,CAAA;AAAA,~~YAC9B~~,SAAA;AAAA,~~YACAA~~,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,~~WACb~~;AAAA,~~SACD~~,CAAA;AAAA,~~OACH,CAAA;AAAA,KAAA;AAAA,~~GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"StatusIndicator.js","sources":["../src/form-field/StatusIndicator.tsx"],"sourcesContent":["import { IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { ElementType } from \"react\";\nimport {\n makePrefixer,\n StatusIndicator as BaseStatusIndicator,\n Tooltip,\n TooltipProps,\n} from \"@salt-ds/core\";\n\nconst withBaseName = makePrefixer(\"saltFormField\");\n\nexport type StatusIndicatorStatus = \"error\" \| \"info\" \| \"warning\" \| \"success\";\n\nexport interface StatusIndicatorProps extends IconProps {\n hasTooltip?: boolean;\n IconProps?: Partial<IconProps>;\n status?: StatusIndicatorStatus;\n TooltipComponent?: ElementType<TooltipProps>;\n TooltipProps?: Partial<TooltipProps>;\n tooltipText?: string;\n}\n\nexport const StatusIndicator = (props: StatusIndicatorProps) => {\n const {\n TooltipComponent = Tooltip,\n hasTooltip = false,\n TooltipProps,\n tooltipText,\n IconProps,\n className,\n status = \"info\",\n ...restProps\n } = props;\n\n return (\n <TooltipComponent\n hideIcon\n status={status}\n content={tooltipText}\n placement=\"top\"\n disabled={!hasTooltip}\n {...TooltipProps}\n >\n <BaseStatusIndicator\n status={status}\n {...restProps}\n {...IconProps}\n className={clsx(\n withBaseName(\"statusIndicator\"),\n className,\n IconProps?.className\n )}\n />\n </TooltipComponent>\n );\n};\n"],"names":["TooltipProps","IconProps","BaseStatusIndicator"],"mappings":";;;;AAUA,MAAM,YAAA,GAAe,aAAa,eAAe,CAAA,CAAA;AAapC,MAAA,eAAA,GAAkB,CAAC,KAAgC,KAAA;AAC9D,EAAM,MAAA;AAAA,IACJ,gBAAmB,GAAA,OAAA;AAAA,IACnB,UAAa,GAAA,KAAA;AAAA,IACb,YAAAA,EAAAA,aAAAA;AAAA,IACA,WAAA;AAAA,IACA,SAAAC,EAAAA,UAAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAS,GAAA,MAAA;AAAA,IACN,GAAA,SAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,uBACG,GAAA,CAAA,gBAAA,EAAA;AAAA,IACC,QAAQ,EAAA,IAAA;AAAA,IACR,MAAA;AAAA,IACA,OAAS,EAAA,WAAA;AAAA,IACT,SAAU,EAAA,KAAA;AAAA,IACV,UAAU,CAAC,UAAA;AAAA,IACV,GAAGD,aAAAA;AAAA,IAEJ,QAAC,kBAAA,GAAA,CAAAE,iBAAA,EAAA;AAAA,MACC,MAAA;AAAA,MACC,GAAG,SAAA;AAAA,MACH,GAAGD,UAAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,aAAa,iBAAiB,CAAA;AAAA,QAC9B,SAAA;AAAA,QACAA,UAAAA,IAAA,gBAAAA,UAAW,CAAA,SAAA;AAAA,OACb;AAAA,KACF,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/form-group/FormGroup.js CHANGED Viewed

@@ -1,13 +1,13 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import './FormGroup.css.js';
 const baseName = "saltFormGroup";
 const FormGroup = forwardRef(
   function FormGroup2({ className, row, ...other }, ref) {
     return /* @__PURE__ */ jsx("div", {
-      className: cx(baseName, { [`${baseName}-row`]: row }, className),
+      className: clsx(baseName, { [`${baseName}-row`]: row }, className),
       ref,
       ...other
     });

package/dist-es/packages/lab/src/form-group/FormGroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormGroup.js","sources":["../src/form-group/FormGroup.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"~~classnames~~\";\n\nimport \"./FormGroup.css\";\n\nexport interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Display group of elements in a compact row.\n */\n row?: boolean;\n}\n\nconst baseName = \"saltFormGroup\";\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(\n function FormGroup({ className, row, ...other }, ref) {\n return (\n <div\n className={cx(baseName, { [`${baseName}-row`]: row }, className)}\n ref={ref}\n {...other}\n />\n );\n }\n);\n"],"names":["FormGroup"],"mappings":";;;;;AAYA,MAAM,QAAW,GAAA,eAAA,CAAA;AAEV,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,WAAW,GAAQ,EAAA,GAAA,KAAA,IAAS,GAAK,EAAA;AACpD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,~~GAAG~~,QAAU,EAAA,EAAE,CAAC,CAAG,EAAA,QAAA,CAAA,IAAA,CAAA,GAAiB,GAAI,EAAA,EAAG,SAAS,CAAA;AAAA,~~MAC/D~~,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"FormGroup.js","sources":["../src/form-group/FormGroup.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\n\nimport \"./FormGroup.css\";\n\nexport interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Display group of elements in a compact row.\n */\n row?: boolean;\n}\n\nconst baseName = \"saltFormGroup\";\n\nexport const FormGroup = forwardRef<HTMLDivElement, FormGroupProps>(\n function FormGroup({ className, row, ...other }, ref) {\n return (\n <div\n className={clsx(baseName, { [`${baseName}-row`]: row }, className)}\n ref={ref}\n {...other}\n />\n );\n }\n);\n"],"names":["FormGroup"],"mappings":";;;;;AAYA,MAAM,QAAW,GAAA,eAAA,CAAA;AAEV,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UAAU,CAAA,EAAE,WAAW,GAAQ,EAAA,GAAA,KAAA,IAAS,GAAK,EAAA;AACpD,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,KAAK,QAAU,EAAA,EAAE,CAAC,CAAG,EAAA,QAAA,CAAA,IAAA,CAAA,GAAiB,GAAI,EAAA,EAAG,SAAS,CAAA;AAAA,MACjE,GAAA;AAAA,MACC,GAAG,KAAA;AAAA,KACN,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/formatted-input/FormattedInput.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 import { useRifm } from 'rifm';
 import { useControlled } from '@salt-ds/core';
@@ -45,7 +45,7 @@ const FormattedInput = forwardRef(
       onChange: handleChange
     });
     return /* @__PURE__ */ jsx(Input, {
-      className: cx(baseName, className),
+      className: clsx(baseName, className),
       inputComponent: InputWithMask,
       inputProps: { mask, textAlign, ...inputProps },
       onChange: rifm.onChange,

package/dist-es/packages/lab/src/formatted-input/FormattedInput.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FormattedInput.js","sources":["../src/formatted-input/FormattedInput.tsx"],"sourcesContent":["import cx from \"~~classnames~~\";\nimport { forwardRef } from \"react\";\nimport { useRifm } from \"rifm\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { Input, InputProps } from \"../input\";\nimport {\n baseName,\n InputWithMask,\n InputWithMaskProps,\n} from \"./internal/InputWithMask\";\n\nimport \"./FormattedInput.css\";\n\nexport type MaskFunction = (value: string \| undefined) => boolean;\n\nexport interface RifmOptions {\n format?: (str: string) => string;\n replace?: (str: string) => string;\n append?: (str: string) => string;\n mask?: boolean \| MaskFunction;\n accept?: RegExp;\n}\n\nexport interface FormattedInputProps extends Omit<InputProps, \"onChange\"> {\n mask?: string;\n onChange?: (value: string) => void;\n rifmOptions?: RifmOptions;\n value?: string;\n defaultValue?: string;\n}\n\nconst defaultFormatter = (string: string): string => string;\nconst defaultRifmOptions: RifmOptions = {};\n\nexport const FormattedInput = forwardRef<HTMLInputElement, FormattedInputProps>(\n function FormattedInput(\n {\n defaultValue = \"\",\n className,\n inputProps,\n mask,\n onChange,\n rifmOptions = defaultRifmOptions,\n value: valueProp,\n textAlign,\n ...other\n },\n ref\n ) {\n const [valueState, setValueState] = useControlled<string \| undefined>({\n default: defaultValue,\n controlled: valueProp,\n name: \"FormattedInput\",\n state: \"value\",\n });\n\n const handleChange = (value: string) => {\n setValueState(value);\n onChange?.(value);\n };\n\n let rifmMask = false;\n\n if (rifmOptions.mask) {\n rifmMask =\n typeof rifmOptions.mask === \"function\"\n ? rifmOptions.mask(valueState)\n : rifmOptions.mask;\n }\n\n const rifm = useRifm({\n format: defaultFormatter,\n accept: /.*/,\n ...rifmOptions,\n mask: rifmMask,\n value: valueState \|\| \"\",\n onChange: handleChange,\n });\n\n return (\n <Input\n className={cx(baseName, className)}\n inputComponent={InputWithMask}\n inputProps={{ mask, textAlign, ...inputProps } as InputWithMaskProps}\n onChange={rifm.onChange}\n textAlign={textAlign}\n value={rifm.value}\n {...other}\n ref={ref}\n />\n );\n }\n);\n"],"names":["FormattedInput"],"mappings":";;;;;;;;;;AA+BA,MAAM,gBAAA,GAAmB,CAAC,MAA2B,KAAA,MAAA,CAAA;AACrD,MAAM,qBAAkC,EAAC,CAAA;AAElC,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eACP,CAAA;AAAA,IACE,YAAe,GAAA,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,kBAAA;AAAA,IACd,KAAO,EAAA,SAAA;AAAA,IACP,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAkC,CAAA;AAAA,MACpE,OAAS,EAAA,YAAA;AAAA,MACT,UAAY,EAAA,SAAA;AAAA,MACZ,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAAkB,KAAA;AACtC,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,IAAI,QAAW,GAAA,KAAA,CAAA;AAEf,IAAA,IAAI,YAAY,IAAM,EAAA;AACpB,MACE,QAAA,GAAA,OAAO,YAAY,IAAS,KAAA,UAAA,GACxB,YAAY,IAAK,CAAA,UAAU,IAC3B,WAAY,CAAA,IAAA,CAAA;AAAA,KACpB;AAEA,IAAA,MAAM,OAAO,OAAQ,CAAA;AAAA,MACnB,MAAQ,EAAA,gBAAA;AAAA,MACR,MAAQ,EAAA,IAAA;AAAA,MACR,GAAG,WAAA;AAAA,MACH,IAAM,EAAA,QAAA;AAAA,MACN,OAAO,UAAc,IAAA,EAAA;AAAA,MACrB,QAAU,EAAA,YAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,~~EAAG~~,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,~~MACjC~~,cAAgB,EAAA,aAAA;AAAA,MAChB,UAAY,EAAA,EAAE,IAAM,EAAA,SAAA,EAAW,GAAG,UAAW,EAAA;AAAA,MAC7C,UAAU,IAAK,CAAA,QAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAO,IAAK,CAAA,KAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"FormattedInput.js","sources":["../src/formatted-input/FormattedInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { forwardRef } from \"react\";\nimport { useRifm } from \"rifm\";\nimport { useControlled } from \"@salt-ds/core\";\nimport { Input, InputProps } from \"../input\";\nimport {\n baseName,\n InputWithMask,\n InputWithMaskProps,\n} from \"./internal/InputWithMask\";\n\nimport \"./FormattedInput.css\";\n\nexport type MaskFunction = (value: string \| undefined) => boolean;\n\nexport interface RifmOptions {\n format?: (str: string) => string;\n replace?: (str: string) => string;\n append?: (str: string) => string;\n mask?: boolean \| MaskFunction;\n accept?: RegExp;\n}\n\nexport interface FormattedInputProps extends Omit<InputProps, \"onChange\"> {\n mask?: string;\n onChange?: (value: string) => void;\n rifmOptions?: RifmOptions;\n value?: string;\n defaultValue?: string;\n}\n\nconst defaultFormatter = (string: string): string => string;\nconst defaultRifmOptions: RifmOptions = {};\n\nexport const FormattedInput = forwardRef<HTMLInputElement, FormattedInputProps>(\n function FormattedInput(\n {\n defaultValue = \"\",\n className,\n inputProps,\n mask,\n onChange,\n rifmOptions = defaultRifmOptions,\n value: valueProp,\n textAlign,\n ...other\n },\n ref\n ) {\n const [valueState, setValueState] = useControlled<string \| undefined>({\n default: defaultValue,\n controlled: valueProp,\n name: \"FormattedInput\",\n state: \"value\",\n });\n\n const handleChange = (value: string) => {\n setValueState(value);\n onChange?.(value);\n };\n\n let rifmMask = false;\n\n if (rifmOptions.mask) {\n rifmMask =\n typeof rifmOptions.mask === \"function\"\n ? rifmOptions.mask(valueState)\n : rifmOptions.mask;\n }\n\n const rifm = useRifm({\n format: defaultFormatter,\n accept: /.*/,\n ...rifmOptions,\n mask: rifmMask,\n value: valueState \|\| \"\",\n onChange: handleChange,\n });\n\n return (\n <Input\n className={clsx(baseName, className)}\n inputComponent={InputWithMask}\n inputProps={{ mask, textAlign, ...inputProps } as InputWithMaskProps}\n onChange={rifm.onChange}\n textAlign={textAlign}\n value={rifm.value}\n {...other}\n ref={ref}\n />\n );\n }\n);\n"],"names":["FormattedInput"],"mappings":";;;;;;;;;;AA+BA,MAAM,gBAAA,GAAmB,CAAC,MAA2B,KAAA,MAAA,CAAA;AACrD,MAAM,qBAAkC,EAAC,CAAA;AAElC,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eACP,CAAA;AAAA,IACE,YAAe,GAAA,EAAA;AAAA,IACf,SAAA;AAAA,IACA,UAAA;AAAA,IACA,IAAA;AAAA,IACA,QAAA;AAAA,IACA,WAAc,GAAA,kBAAA;AAAA,IACd,KAAO,EAAA,SAAA;AAAA,IACP,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,aAAkC,CAAA;AAAA,MACpE,OAAS,EAAA,YAAA;AAAA,MACT,UAAY,EAAA,SAAA;AAAA,MACZ,IAAM,EAAA,gBAAA;AAAA,MACN,KAAO,EAAA,OAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAM,MAAA,YAAA,GAAe,CAAC,KAAkB,KAAA;AACtC,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,MAAW,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAA,KAAA,CAAA,CAAA;AAAA,KACb,CAAA;AAEA,IAAA,IAAI,QAAW,GAAA,KAAA,CAAA;AAEf,IAAA,IAAI,YAAY,IAAM,EAAA;AACpB,MACE,QAAA,GAAA,OAAO,YAAY,IAAS,KAAA,UAAA,GACxB,YAAY,IAAK,CAAA,UAAU,IAC3B,WAAY,CAAA,IAAA,CAAA;AAAA,KACpB;AAEA,IAAA,MAAM,OAAO,OAAQ,CAAA;AAAA,MACnB,MAAQ,EAAA,gBAAA;AAAA,MACR,MAAQ,EAAA,IAAA;AAAA,MACR,GAAG,WAAA;AAAA,MACH,IAAM,EAAA,QAAA;AAAA,MACN,OAAO,UAAc,IAAA,EAAA;AAAA,MACrB,QAAU,EAAA,YAAA;AAAA,KACX,CAAA,CAAA;AAED,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAA,EAAW,IAAK,CAAA,QAAA,EAAU,SAAS,CAAA;AAAA,MACnC,cAAgB,EAAA,aAAA;AAAA,MAChB,UAAY,EAAA,EAAE,IAAM,EAAA,SAAA,EAAW,GAAG,UAAW,EAAA;AAAA,MAC7C,UAAU,IAAK,CAAA,QAAA;AAAA,MACf,SAAA;AAAA,MACA,OAAO,IAAK,CAAA,KAAA;AAAA,MACX,GAAG,KAAA;AAAA,MACJ,GAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-es/packages/lab/src/formatted-input/internal/InputWithMask.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from '@salt-ds/core';
-import cx from 'classnames';
+import { clsx } from 'clsx';
 import { forwardRef } from 'react';
 const baseName = "saltFormattedInput";
@@ -49,7 +49,7 @@ const InputWithMask = forwardRef(
         }),
         /* @__PURE__ */ jsx("span", {
           "aria-hidden": "true",
-          className: cx(`${baseName}-mask`, className),
+          className: clsx(`${baseName}-mask`, className),
           style,
           children: textAlign !== "right" ? spacerAndMask : spacerAndMask.reverse()
         })

package/dist-es/packages/lab/src/formatted-input/internal/InputWithMask.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"InputWithMask.js","sources":["../src/formatted-input/internal/InputWithMask.tsx"],"sourcesContent":["import { useId } from \"@salt-ds/core\";\nimport cx from \"~~classnames~~\";\nimport { forwardRef, InputHTMLAttributes } from \"react\";\nimport { FormattedInputProps } from \"../FormattedInput\";\n\nexport const baseName = \"saltFormattedInput\";\n\nfunction getClippedMask(\n mask: FormattedInputProps[\"mask\"],\n value: FormattedInputProps[\"value\"],\n textAlign: FormattedInputProps[\"textAlign\"]\n) {\n if (mask) {\n if (textAlign === \"right\") {\n return mask.substring(\n 0,\n value ? mask.length - value.length : mask.length\n );\n }\n\n return mask.substring(value ? value.length : 0);\n }\n return \"\";\n}\n\nexport interface InputWithMaskProps\n extends InputHTMLAttributes<HTMLInputElement> {\n mask?: FormattedInputProps[\"mask\"];\n textAlign?: FormattedInputProps[\"textAlign\"];\n value?: FormattedInputProps[\"value\"];\n}\n\nexport const InputWithMask = forwardRef<HTMLInputElement, InputWithMaskProps>(\n function InputWithMask(\n {\n \"aria-labelledby\": ariaLabelledBy,\n className,\n mask = \"\",\n value,\n id: idProp,\n style,\n textAlign,\n ...other\n },\n ref\n ) {\n const id = useId(idProp);\n\n const spacerAndMask = [\n <i key={value}>{value}</i>,\n getClippedMask(mask, value, textAlign),\n ];\n\n return (\n <div className={`${baseName}-inputWrapper`}>\n <input\n className={className}\n {...other}\n aria-label={mask}\n aria-labelledby={[ariaLabelledBy, id]\n .filter((label) => label != null)\n .join(\" \")}\n id={id}\n ref={ref}\n style={style}\n value={value}\n />\n <span\n aria-hidden=\"true\"\n className={cx(`${baseName}-mask`, className)}\n style={style}\n >\n {textAlign !== \"right\" ? spacerAndMask : spacerAndMask.reverse()}\n </span>\n </div>\n );\n }\n);\n"],"names":["InputWithMask"],"mappings":";;;;;AAKO,MAAM,QAAW,GAAA,qBAAA;AAExB,SAAS,cAAA,CACP,IACA,EAAA,KAAA,EACA,SACA,EAAA;AACA,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,OAAO,IAAK,CAAA,SAAA;AAAA,QACV,CAAA;AAAA,QACA,KAAQ,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAM,SAAS,IAAK,CAAA,MAAA;AAAA,OAC5C,CAAA;AAAA,KACF;AAEA,IAAA,OAAO,IAAK,CAAA,SAAA,CAAU,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAAA,GAChD;AACA,EAAO,OAAA,EAAA,CAAA;AACT,CAAA;AASO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,iBAAmB,EAAA,cAAA;AAAA,IACnB,SAAA;AAAA,IACA,IAAO,GAAA,EAAA;AAAA,IACP,KAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA;AAAA,sBACnB,GAAA,CAAA,GAAA,EAAA;AAAA,QAAe,QAAA,EAAA,KAAA;AAAA,OAAA,EAAR,KAAc,CAAA;AAAA,MACtB,cAAA,CAAe,IAAM,EAAA,KAAA,EAAO,SAAS,CAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,WAAW,CAAG,EAAA,QAAA,CAAA,aAAA,CAAA;AAAA,MACjB,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA;AAAA,UACC,GAAG,KAAA;AAAA,UACJ,YAAY,EAAA,IAAA;AAAA,UACZ,iBAAiB,EAAA,CAAC,cAAgB,EAAA,EAAE,CACjC,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,KAAS,IAAA,IAAI,CAC/B,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,UACX,EAAA;AAAA,UACA,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,SAAW,EAAA,~~EAAA~~,~~CAAG~~,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA,EAAiB,SAAS,CAAA;AAAA,~~UAC3C~~,KAAA;AAAA,UAEC,QAAc,EAAA,SAAA,KAAA,OAAA,GAAU,aAAgB,GAAA,aAAA,CAAc,OAAQ,EAAA;AAAA,SACjE,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
1	+ {"version":3,"file":"InputWithMask.js","sources":["../src/formatted-input/internal/InputWithMask.tsx"],"sourcesContent":["import { useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, InputHTMLAttributes } from \"react\";\nimport { FormattedInputProps } from \"../FormattedInput\";\n\nexport const baseName = \"saltFormattedInput\";\n\nfunction getClippedMask(\n mask: FormattedInputProps[\"mask\"],\n value: FormattedInputProps[\"value\"],\n textAlign: FormattedInputProps[\"textAlign\"]\n) {\n if (mask) {\n if (textAlign === \"right\") {\n return mask.substring(\n 0,\n value ? mask.length - value.length : mask.length\n );\n }\n\n return mask.substring(value ? value.length : 0);\n }\n return \"\";\n}\n\nexport interface InputWithMaskProps\n extends InputHTMLAttributes<HTMLInputElement> {\n mask?: FormattedInputProps[\"mask\"];\n textAlign?: FormattedInputProps[\"textAlign\"];\n value?: FormattedInputProps[\"value\"];\n}\n\nexport const InputWithMask = forwardRef<HTMLInputElement, InputWithMaskProps>(\n function InputWithMask(\n {\n \"aria-labelledby\": ariaLabelledBy,\n className,\n mask = \"\",\n value,\n id: idProp,\n style,\n textAlign,\n ...other\n },\n ref\n ) {\n const id = useId(idProp);\n\n const spacerAndMask = [\n <i key={value}>{value}</i>,\n getClippedMask(mask, value, textAlign),\n ];\n\n return (\n <div className={`${baseName}-inputWrapper`}>\n <input\n className={className}\n {...other}\n aria-label={mask}\n aria-labelledby={[ariaLabelledBy, id]\n .filter((label) => label != null)\n .join(\" \")}\n id={id}\n ref={ref}\n style={style}\n value={value}\n />\n <span\n aria-hidden=\"true\"\n className={clsx(`${baseName}-mask`, className)}\n style={style}\n >\n {textAlign !== \"right\" ? spacerAndMask : spacerAndMask.reverse()}\n </span>\n </div>\n );\n }\n);\n"],"names":["InputWithMask"],"mappings":";;;;;AAKO,MAAM,QAAW,GAAA,qBAAA;AAExB,SAAS,cAAA,CACP,IACA,EAAA,KAAA,EACA,SACA,EAAA;AACA,EAAA,IAAI,IAAM,EAAA;AACR,IAAA,IAAI,cAAc,OAAS,EAAA;AACzB,MAAA,OAAO,IAAK,CAAA,SAAA;AAAA,QACV,CAAA;AAAA,QACA,KAAQ,GAAA,IAAA,CAAK,MAAS,GAAA,KAAA,CAAM,SAAS,IAAK,CAAA,MAAA;AAAA,OAC5C,CAAA;AAAA,KACF;AAEA,IAAA,OAAO,IAAK,CAAA,SAAA,CAAU,KAAQ,GAAA,KAAA,CAAM,SAAS,CAAC,CAAA,CAAA;AAAA,GAChD;AACA,EAAO,OAAA,EAAA,CAAA;AACT,CAAA;AASO,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,iBAAmB,EAAA,cAAA;AAAA,IACnB,SAAA;AAAA,IACA,IAAO,GAAA,EAAA;AAAA,IACP,KAAA;AAAA,IACA,EAAI,EAAA,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,SAAA;AAAA,IACG,GAAA,KAAA;AAAA,KAEL,GACA,EAAA;AACA,IAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA,CAAA;AAEvB,IAAA,MAAM,aAAgB,GAAA;AAAA,sBACnB,GAAA,CAAA,GAAA,EAAA;AAAA,QAAe,QAAA,EAAA,KAAA;AAAA,OAAA,EAAR,KAAc,CAAA;AAAA,MACtB,cAAA,CAAe,IAAM,EAAA,KAAA,EAAO,SAAS,CAAA;AAAA,KACvC,CAAA;AAEA,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,WAAW,CAAG,EAAA,QAAA,CAAA,aAAA,CAAA;AAAA,MACjB,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,OAAA,EAAA;AAAA,UACC,SAAA;AAAA,UACC,GAAG,KAAA;AAAA,UACJ,YAAY,EAAA,IAAA;AAAA,UACZ,iBAAiB,EAAA,CAAC,cAAgB,EAAA,EAAE,CACjC,CAAA,MAAA,CAAO,CAAC,KAAA,KAAU,KAAS,IAAA,IAAI,CAC/B,CAAA,IAAA,CAAK,GAAG,CAAA;AAAA,UACX,EAAA;AAAA,UACA,GAAA;AAAA,UACA,KAAA;AAAA,UACA,KAAA;AAAA,SACF,CAAA;AAAA,wBACC,GAAA,CAAA,MAAA,EAAA;AAAA,UACC,aAAY,EAAA,MAAA;AAAA,UACZ,SAAW,EAAA,IAAA,CAAK,CAAG,EAAA,QAAA,CAAA,KAAA,CAAA,EAAiB,SAAS,CAAA;AAAA,UAC7C,KAAA;AAAA,UAEC,QAAc,EAAA,SAAA,KAAA,OAAA,GAAU,aAAgB,GAAA,aAAA,CAAc,OAAQ,EAAA;AAAA,SACjE,CAAA;AAAA,OAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}