npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.5 → 1.0.0-alpha.6 - Mend

@salt-ds/lab 1.0.0-alpha.5 → 1.0.0-alpha.6

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

package/dist-cjs/packages/lab/src/index.js CHANGED Viewed

@@ -82,12 +82,18 @@ var FileDropZone = require('./file-drop-zone/FileDropZone.js');
 var validators = require('./file-drop-zone/validators.js');
 var FormField = require('./form-field/FormField.js');
 var FormLabel = require('./form-field/FormLabel.js');
+var FormFieldNext = require('./form-field-next/FormFieldNext.js');
+require('./form-field-next/FormFieldHelperText.js');
+require('./form-field-next/FormFieldLabel.js');
 var FormFieldContext = require('./form-field-context/FormFieldContext.js');
+var FormFieldContextNext = require('./form-field-context/FormFieldContextNext.js');
 var useFormFieldProps = require('./form-field-context/useFormFieldProps.js');
+var useFormFieldPropsNext = require('./form-field-context/useFormFieldPropsNext.js');
 var FormGroup = require('./form-group/FormGroup.js');
 var FormattedInput = require('./formatted-input/FormattedInput.js');
 var Input = require('./input/Input.js');
 var StaticInputAdornment = require('./input/StaticInputAdornment.js');
+var InputNext = require('./input-next/InputNext.js');
 var LayerLayout = require('./layer-layout/LayerLayout.js');
 var Highlighter = require('./list/Highlighter.js');
 var ListItem = require('./list/ListItem.js');
@@ -242,12 +248,16 @@ exports.createTotalSizeValidator = validators.createTotalSizeValidator;
 exports.FormField = FormField.FormField;
 exports.useFormField = FormField.useFormField;
 exports.FormLabel = FormLabel.FormLabel;
+exports.FormFieldNext = FormFieldNext.FormField;
 exports.FormFieldContext = FormFieldContext.FormFieldContext;
+exports.FormFieldContextNext = FormFieldContextNext.FormFieldContextNext;
 exports.useFormFieldProps = useFormFieldProps.useFormFieldProps;
+exports.useFormFieldPropsNext = useFormFieldPropsNext.useFormFieldPropsNext;
 exports.FormGroup = FormGroup.FormGroup;
 exports.FormattedInput = FormattedInput.FormattedInput;
 exports.Input = Input.Input;
 exports.StaticInputAdornment = StaticInputAdornment.StaticInputAdornment;
+exports.InputNext = InputNext.Input;
 exports.LAYER_POSITIONS = LayerLayout.LAYER_POSITIONS;
 exports.LayerLayout = LayerLayout.LayerLayout;
 exports.Highlighter = Highlighter.Highlighter;

package/dist-cjs/packages/lab/src/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1	+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/packages/lab/src/input/Input.js CHANGED Viewed

@@ -7,6 +7,7 @@ var clsx = require('clsx');
 var React = require('react');
 var core = require('@salt-ds/core');
 require('../form-field-context/FormFieldContext.js');
+require('../form-field-context/FormFieldContextNext.js');
 var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 var useCursorOnFocus = require('./useCursorOnFocus.js');
 require('./Input.css.js');

package/dist-cjs/packages/lab/src/input/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n AriaAttributes,\n ChangeEvent,\n ElementType,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nimport \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" \| \"defaultValue\"> {\n /*\n Determines the position of the text cursor on focus of the input.\n \n start = place cursor at the beginning<br>\n * end = place cursor at the end<br>\n * \\# = index to place the cursor<br>\n /\n cursorPositionOnFocus?: \"start\" \| \"end\" \| number;\n /\n The value of the `input` element, required for an uncontrolled component.\n /\n defaultValue?: HTMLInputElement[\"defaultValue\"];\n /\n If `true`, the component is disabled.\n /\n disabled?: HTMLInputElement[\"disabled\"];\n /\n The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n /\n emptyReadOnlyMarker?: string;\n /\n Determines what gets highlighted on focus of the input.\n \n If `true` all text will be highlighted.\n * If an array text between those indices will be highlighted\n * e.g. [0,1] will highlight the first character.\n /\n highlightOnFocus?: boolean \| number[];\n /\n The HTML element to render the Input, e.g. 'input', a custom React component.\n /\n inputComponent?: ElementType;\n /\n [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n /\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback for change event.\n /\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n onFocus?: FocusEventHandler<HTMLInputElement>;\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n onMouseUp?: MouseEventHandler<HTMLInputElement>;\n onMouseMove?: MouseEventHandler<HTMLInputElement>;\n onMouseDown?: MouseEventHandler<HTMLInputElement>;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n \n * Determines the alignment of the input text.\n /\n textAlign?: \"left\" \| \"right\" \| \"center\";\n type?: HTMLInputElement[\"type\"];\n /\n The value of the `input` element, required for a controlled component.\n /\n value?: HTMLInputElement[\"value\"];\n renderSuffix?: (state: {\n disabled?: boolean;\n error?: boolean;\n focused?: boolean;\n margin?: \"dense\" \| \"none\" \| \"normal\";\n required?: boolean;\n startAdornment?: ReactNode;\n }) => ReactNode;\n endAdornment?: ReactNode;\n startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n a11yProps: Partial<ReturnType<typeof useFormFieldProps>[\"a11yProps\"]> = {},\n inputProps: InputProps[\"inputProps\"] = {},\n misplacedAriaProps: AriaAttributes\n) {\n const ariaLabelledBy = clsx(\n a11yProps[\"aria-labelledby\"],\n inputProps[\"aria-labelledby\"]\n );\n\n return {\n ...misplacedAriaProps,\n ...a11yProps,\n ...inputProps,\n // The weird filtering is due to TokenizedInputBase\n \"aria-labelledby\": ariaLabelledBy\n ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n : null,\n };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n cursorPositionOnFocus,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n highlightOnFocus,\n id,\n inputComponent: InputComponent = \"input\",\n inputProps: inputPropsProp,\n role,\n style,\n value: valueProp,\n // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n // (uncontrolled to controlled warning) from the React input\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onMouseUp,\n onMouseMove,\n onMouseDown,\n readOnly: readOnlyProp,\n renderSuffix,\n startAdornment,\n textAlign = \"left\",\n type = \"text\",\n ...other\n },\n ref\n) {\n const {\n a11yProps: {\n readOnly: a11yReadOnly,\n disabled: a11yDisabled,\n ...restA11y\n } = {},\n setFocused: setFormFieldFocused,\n inFormField,\n } = useFormFieldProps();\n\n const [focused, setFocused] = useState(false);\n const inputRef = useRef(null);\n const handleRef = useForkRef(inputRef, ref);\n const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n cursorPositionOnFocus,\n highlightOnFocus,\n });\n\n const isDisabled = disabled \|\| a11yDisabled;\n const isReadOnly = readOnlyProp \|\| a11yReadOnly;\n const misplacedAriaProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n role,\n };\n const inputProps = mergeA11yProps(\n restA11y,\n inputPropsProp,\n misplacedAriaProps\n );\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event, value);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFormFieldFocused?.(true);\n setFocused(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFormFieldFocused?.(false);\n setFocused(false);\n };\n\n const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseMove(event);\n\n onMouseMove?.(event);\n };\n\n const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseUp();\n\n onMouseUp?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseDown();\n\n onMouseDown?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n [withBaseName(\"formField\")]: inFormField,\n [withBaseName(\"focused\")]: focused && !inFormField,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"inputAdornedStart\")]: startAdornment,\n [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n },\n classNameProp\n )}\n style={style}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"prefixContainer\")}>{startAdornment}</div>\n )}\n <InputComponent\n type={type}\n id={id}\n {...inputProps}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n ref={handleRef}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseMove={handleMouseMove}\n readOnly={isReadOnly}\n />\n {endAdornment && (\n <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n )}\n {/ TODO: Confirm implementation of suffix */}\n {renderSuffix?.({ disabled, focused })}\n </div>\n );\n});\n"],"names":["makePrefixer","clsx","forwardRef","Input","useFormFieldProps","useState","useRef","useForkRef","useCursorOnFocus","useControlled","value","jsxs","jsx"],"mappings":"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"}
1	+ {"version":3,"file":"Input.js","sources":["../src/input/Input.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n AriaAttributes,\n ChangeEvent,\n ElementType,\n FocusEvent,\n FocusEventHandler,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n KeyboardEventHandler,\n MouseEvent,\n MouseEventHandler,\n ReactNode,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { useCursorOnFocus } from \"./useCursorOnFocus\";\n\nimport \"./Input.css\";\n\nconst withBaseName = makePrefixer(\"saltInput\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" \| \"defaultValue\"> {\n /*\n Determines the position of the text cursor on focus of the input.\n \n start = place cursor at the beginning<br>\n * end = place cursor at the end<br>\n * \\# = index to place the cursor<br>\n /\n cursorPositionOnFocus?: \"start\" \| \"end\" \| number;\n /\n The value of the `input` element, required for an uncontrolled component.\n /\n defaultValue?: HTMLInputElement[\"defaultValue\"];\n /\n If `true`, the component is disabled.\n /\n disabled?: HTMLInputElement[\"disabled\"];\n /\n The marker to use in an empty read only Input.\n * Use `''` to disable this feature. Defaults to '—'.\n /\n emptyReadOnlyMarker?: string;\n /\n Determines what gets highlighted on focus of the input.\n \n If `true` all text will be highlighted.\n * If an array text between those indices will be highlighted\n * e.g. [0,1] will highlight the first character.\n /\n highlightOnFocus?: boolean \| number[];\n /\n The HTML element to render the Input, e.g. 'input', a custom React component.\n /\n inputComponent?: ElementType;\n /\n [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n /\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n onBlur?: FocusEventHandler<HTMLInputElement>;\n /\n Callback for change event.\n /\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n onFocus?: FocusEventHandler<HTMLInputElement>;\n onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n onKeyUp?: KeyboardEventHandler<HTMLInputElement>;\n onMouseUp?: MouseEventHandler<HTMLInputElement>;\n onMouseMove?: MouseEventHandler<HTMLInputElement>;\n onMouseDown?: MouseEventHandler<HTMLInputElement>;\n /\n If `true`, the component is read only.\n /\n readOnly?: boolean;\n /\n \n * Determines the alignment of the input text.\n /\n textAlign?: \"left\" \| \"right\" \| \"center\";\n type?: HTMLInputElement[\"type\"];\n /\n The value of the `input` element, required for a controlled component.\n /\n value?: HTMLInputElement[\"value\"];\n renderSuffix?: (state: {\n disabled?: boolean;\n error?: boolean;\n focused?: boolean;\n margin?: \"dense\" \| \"none\" \| \"normal\";\n required?: boolean;\n startAdornment?: ReactNode;\n }) => ReactNode;\n endAdornment?: ReactNode;\n startAdornment?: ReactNode;\n}\n\nfunction mergeA11yProps(\n a11yProps: Partial<ReturnType<typeof useFormFieldProps>[\"a11yProps\"]> = {},\n inputProps: InputProps[\"inputProps\"] = {},\n misplacedAriaProps: AriaAttributes\n) {\n const ariaLabelledBy = clsx(\n a11yProps[\"aria-labelledby\"],\n inputProps[\"aria-labelledby\"]\n );\n\n return {\n ...misplacedAriaProps,\n ...a11yProps,\n ...inputProps,\n // The weird filtering is due to TokenizedInputBase\n \"aria-labelledby\": ariaLabelledBy\n ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n : null,\n };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n cursorPositionOnFocus,\n disabled,\n emptyReadOnlyMarker = \"—\",\n endAdornment,\n highlightOnFocus,\n id,\n inputComponent: InputComponent = \"input\",\n inputProps: inputPropsProp,\n role,\n style,\n value: valueProp,\n // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n // (uncontrolled to controlled warning) from the React input\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n onBlur,\n onChange,\n onFocus,\n onKeyDown,\n onKeyUp,\n onMouseUp,\n onMouseMove,\n onMouseDown,\n readOnly: readOnlyProp,\n renderSuffix,\n startAdornment,\n textAlign = \"left\",\n type = \"text\",\n ...other\n },\n ref\n) {\n const {\n a11yProps: {\n readOnly: a11yReadOnly,\n disabled: a11yDisabled,\n ...restA11y\n } = {},\n setFocused: setFormFieldFocused,\n inFormField,\n } = useFormFieldProps();\n\n const [focused, setFocused] = useState(false);\n const inputRef = useRef(null);\n const handleRef = useForkRef(inputRef, ref);\n const cursorOnFocusHelpers = useCursorOnFocus(inputRef, {\n cursorPositionOnFocus,\n highlightOnFocus,\n });\n\n const isDisabled = disabled \|\| a11yDisabled;\n const isReadOnly = readOnlyProp \|\| a11yReadOnly;\n const misplacedAriaProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n role,\n };\n const inputProps = mergeA11yProps(\n restA11y,\n inputPropsProp,\n misplacedAriaProps\n );\n const isEmptyReadOnly = isReadOnly && !defaultValueProp && !valueProp;\n const defaultValue = isEmptyReadOnly ? emptyReadOnlyMarker : defaultValueProp;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValue,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event, value);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFormFieldFocused?.(true);\n setFocused(true);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFormFieldFocused?.(false);\n setFocused(false);\n };\n\n const handleMouseMove = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseMove(event);\n\n onMouseMove?.(event);\n };\n\n const handleMouseUp = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseUp();\n\n onMouseUp?.(event);\n };\n\n const handleMouseDown = (event: MouseEvent<HTMLInputElement>) => {\n cursorOnFocusHelpers.handleMouseDown();\n\n onMouseDown?.(event);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(`${textAlign}TextAlign`)]: textAlign,\n [withBaseName(\"formField\")]: inFormField,\n [withBaseName(\"focused\")]: focused && !inFormField,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"inputAdornedStart\")]: startAdornment,\n [withBaseName(\"inputAdornedEnd\")]: endAdornment,\n },\n classNameProp\n )}\n style={style}\n {...other}\n >\n {startAdornment && (\n <div className={withBaseName(\"prefixContainer\")}>{startAdornment}</div>\n )}\n <InputComponent\n type={type}\n id={id}\n {...inputProps}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n ref={handleRef}\n value={value}\n onBlur={handleBlur}\n onChange={handleChange}\n onKeyDown={onKeyDown}\n onKeyUp={onKeyUp}\n onFocus={handleFocus}\n onMouseDown={handleMouseDown}\n onMouseUp={handleMouseUp}\n onMouseMove={handleMouseMove}\n readOnly={isReadOnly}\n />\n {endAdornment && (\n <div className={withBaseName(\"suffixContainer\")}>{endAdornment}</div>\n )}\n {/ TODO: Confirm implementation of suffix */}\n {renderSuffix?.({ disabled, focused })}\n </div>\n );\n});\n"],"names":["makePrefixer","clsx","forwardRef","Input","useFormFieldProps","useState","useRef","useForkRef","useCursorOnFocus","useControlled","value","jsxs","jsx"],"mappings":"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"}

package/dist-cjs/packages/lab/src/input-next/InputNext.css.js ADDED Viewed

@@ -0,0 +1,9 @@
+'use strict';
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+var css_248z = "/* Style applied to the root element */\n.saltInputNext {\n  --inputNext-borderColor: var(--salt-editable-borderColor);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle);\n\n  align-items: center;\n  background: var(--saltInputNext-background, var(--inputNext-background));\n  border-color: var(--saltInputNext-borderColor, var(--inputNext-borderColor));\n  border-width: var(--saltInputNext-borderWidth, 0 0 var(--salt-size-border) 0);\n  border-style: var(--saltInputNext-borderStyle, var(--inputNext-borderStyle));\n  border-radius: var(--saltInputNext-borderRadius, 0);\n  color: var(--saltInputNext-color, var(--salt-text-primary-foreground));\n  display: inline-flex;\n  font-family: var(--saltInputNext-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--saltInputNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltInputNext-height, var(--salt-size-base));\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--saltInputNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltInputNext-minWidth, 8em);\n  padding: var(--saltInputNext-padding, 0 var(--salt-size-unit));\n  position: var(--saltInputNext-position, relative);\n  width: 100%;\n}\n\n.saltInputNext:hover {\n  --inputNext-background: var(--inputNext-background-hover);\n  --inputNext-borderColor: var(--salt-editable-borderColor-hover);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-hover);\n}\n\n.saltInputNext:active {\n  --inputNext-background: var(--inputNext-background-active);\n  --inputNext-borderColor: var(--salt-editable-borderColor-active);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltInputNext-primary {\n  --inputNext-background: var(--salt-editable-primary-background);\n  --inputNext-background-active: var(--salt-editable-primary-background-active);\n  --inputNext-background-hover: var(--salt-editable-primary-background-hover);\n  --inputNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --inputNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltInputNext-secondary {\n  --inputNext-background: var(--salt-editable-secondary-background);\n  --inputNext-background-active: var(--salt-editable-secondary-background-active);\n  --inputNext-background-hover: var(--salt-editable-secondary-background-active);\n  --inputNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --inputNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to inner input component */\n.saltInputNext-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: var(--saltInputNext-cursor, default);\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltInputNext-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--saltInputNext-textAlign, left);\n  width: 100%;\n}\n\n/* Style applied if `readOnly={true}` */\n.saltInputNext.saltInputNext-readOnly {\n  --inputNext-background: var(--inputNext-background-readonly);\n  --inputNext-background-hover: var(--inputNext-background-readonly);\n  --inputNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n}\n\n/* Reset in the next class */\n.saltInputNext-input:focus {\n  outline: none;\n}\n\n/* Styling when focused */\n.saltInputNext-focused {\n  outline-style: var(--saltInputNext-focused-outlineStyle, var(--salt-focused-outlineStyle));\n  outline-width: var(--saltInputNext-focused-outlineWidth, var(--salt-focused-outlineWidth));\n  outline-color: var(--saltInputNext-focused-outlineColor, var(--salt-focused-outlineColor));\n  outline-offset: var(--saltInputNext-focused-outlineOffset, var(--salt-focused-outlineOffset));\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` */\n.saltInputNext-focused.saltInputNext-readOnly,\n.saltInputNext-disabled .saltInputNext-focused {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltInputNext-input::selection {\n  background: var(--saltInputNext-highlight-color, var(--salt-text-background-selected));\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltInputNext-disabled .saltInputNext-input,\n.saltInputNext.saltInputNext-disabled,\n.saltInputNext.saltInputNext-disabled:hover,\n.saltInputNext.saltInputNext-disabled:active {\n  --inputNext-background: var(--inputNext-background-disabled);\n  --inputNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltInputNext-text-color-disabled, var(--salt-text-primary-foreground-disabled));\n}\n";
+styleInject_es(css_248z);
+module.exports = css_248z;
+//# sourceMappingURL=InputNext.css.js.map

package/dist-cjs/packages/lab/src/input-next/InputNext.css.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"InputNext.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}

package/dist-cjs/packages/lab/src/input-next/InputNext.js ADDED Viewed

@@ -0,0 +1,126 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', { value: true });
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var core = require('@salt-ds/core');
+require('../form-field-context/FormFieldContext.js');
+require('../form-field-context/FormFieldContextNext.js');
+var useFormFieldPropsNext = require('../form-field-context/useFormFieldPropsNext.js');
+require('./InputNext.css.js');
+const withBaseName = core.makePrefixer("saltInputNext");
+function mergeA11yProps(a11yProps = {}, inputProps = {}, misplacedAriaProps) {
+  const ariaLabelledBy = clsx.clsx(
+    a11yProps["aria-labelledby"],
+    inputProps["aria-labelledby"]
+  );
+  return {
+    ...misplacedAriaProps,
+    ...a11yProps,
+    ...inputProps,
+    "aria-label": ariaLabelledBy ? Array.from(new Set(ariaLabelledBy.split(" "))).join(" ") : void 0
+  };
+}
+const Input = React.forwardRef(function Input2({
+  "aria-activedescendant": ariaActiveDescendant,
+  "aria-expanded": ariaExpanded,
+  "aria-owns": ariaOwns,
+  className: classNameProp,
+  disabled,
+  id,
+  inputProps: inputPropsProp,
+  onChange,
+  readOnly: readOnlyProp,
+  role,
+  style,
+  type = "text",
+  value: valueProp,
+  defaultValue: defaultValueProp = valueProp === void 0 ? "" : void 0,
+  variant = "primary",
+  ...other
+}, ref) {
+  const {
+    a11yProps: {
+      disabled: a11yDisabled,
+      readOnly: a11yReadOnly,
+      ...restA11y
+    } = {}
+  } = useFormFieldPropsNext.useFormFieldPropsNext();
+  const isDisabled = disabled || a11yDisabled;
+  const isReadOnly = readOnlyProp || a11yReadOnly;
+  const [focused, setFocused] = React.useState(false);
+  const misplacedAriaProps = {
+    "aria-activedescendant": ariaActiveDescendant,
+    "aria-expanded": ariaExpanded,
+    "aria-owns": ariaOwns,
+    role
+  };
+  const inputProps = mergeA11yProps(
+    restA11y,
+    inputPropsProp,
+    misplacedAriaProps
+  );
+  const {
+    onBlur,
+    onFocus,
+    onKeyDown,
+    onKeyUp,
+    onMouseUp,
+    onMouseMove,
+    onMouseDown,
+    ...restInputProps
+  } = inputProps;
+  const [value, setValue] = core.useControlled({
+    controlled: valueProp,
+    default: defaultValueProp,
+    name: "Input",
+    state: "value"
+  });
+  const handleChange = (event) => {
+    const value2 = event.target.value;
+    setValue(value2);
+    onChange == null ? void 0 : onChange(event, value2);
+  };
+  const handleBlur = (event) => {
+    onBlur == null ? void 0 : onBlur(event);
+    setFocused(false);
+  };
+  const handleFocus = (event) => {
+    onFocus == null ? void 0 : onFocus(event);
+    setFocused(true);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    className: clsx.clsx(
+      withBaseName(),
+      {
+        [withBaseName("focused")]: !isDisabled && focused,
+        [withBaseName("disabled")]: isDisabled,
+        [withBaseName("readOnly")]: isReadOnly,
+        [withBaseName(variant)]: variant
+      },
+      classNameProp
+    ),
+    style,
+    ...other,
+    children: /* @__PURE__ */ jsxRuntime.jsx("input", {
+      type,
+      id,
+      className: clsx.clsx(withBaseName("input"), inputProps == null ? void 0 : inputProps.className),
+      disabled: isDisabled,
+      readOnly: isReadOnly,
+      ref,
+      value,
+      tabIndex: isReadOnly || isDisabled ? -1 : 0,
+      onBlur: handleBlur,
+      onChange: handleChange,
+      onFocus: !isDisabled ? handleFocus : void 0,
+      ...restInputProps
+    })
+  });
+});
+exports.Input = Input;
+//# sourceMappingURL=InputNext.js.map

package/dist-cjs/packages/lab/src/input-next/InputNext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"InputNext.js","sources":["../src/input-next/InputNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n AriaAttributes,\n ChangeEvent,\n ElementType,\n FocusEvent,\n forwardRef,\n HTMLAttributes,\n InputHTMLAttributes,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./InputNext.css\";\n\nconst withBaseName = makePrefixer(\"saltInputNext\");\n\n// TODO: Double confirm whether this should be extending DivElement given root is `<div>`.\n// And forwarded ref is not assigned to the root like other components.\nexport interface InputProps\n extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\" | \"defaultValue\"> {\n /**\n * The value of the `input` element, required for an uncontrolled component.\n */\n defaultValue?: HTMLInputElement[\"defaultValue\"];\n /**\n * If `true`, the component is disabled.\n */\n disabled?: HTMLInputElement[\"disabled\"];\n /**\n * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n */\n inputProps?: InputHTMLAttributes<HTMLInputElement>;\n /**\n * Callback for change event.\n */\n onChange?: (event: ChangeEvent<HTMLInputElement>, value: string) => void;\n /**\n * If `true`, the component is read only.\n */\n readOnly?: boolean;\n type?: HTMLInputElement[\"type\"];\n /**\n * The value of the `input` element, required for a controlled component.\n */\n value?: HTMLInputElement[\"value\"];\n /**\n * Styling variant. Defaults to \"primary\".\n */\n variant?: \"primary\" | \"secondary\";\n}\n\nfunction mergeA11yProps(\n a11yProps: Partial<\n ReturnType<typeof useFormFieldPropsNext>[\"a11yProps\"]\n > = {},\n inputProps: InputProps[\"inputProps\"] = {},\n misplacedAriaProps: AriaAttributes\n) {\n const ariaLabelledBy = clsx(\n a11yProps[\"aria-labelledby\"],\n inputProps[\"aria-labelledby\"]\n );\n\n return {\n ...misplacedAriaProps,\n ...a11yProps,\n ...inputProps,\n // TODO: look at this - The weird filtering is due to TokenizedInputBase\n \"aria-label\": ariaLabelledBy\n ? Array.from(new Set(ariaLabelledBy.split(\" \"))).join(\" \")\n : undefined,\n };\n}\n\nexport const Input = forwardRef<HTMLInputElement, InputProps>(function Input(\n {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n className: classNameProp,\n disabled,\n id,\n inputProps: inputPropsProp,\n onChange,\n readOnly: readOnlyProp,\n role,\n style,\n type = \"text\",\n value: valueProp,\n // If we leave both value and defaultValue undefined, we will get a React warning on first edit\n // (uncontrolled to controlled warning) from the React input\n defaultValue: defaultValueProp = valueProp === undefined ? \"\" : undefined,\n variant = \"primary\",\n ...other\n },\n ref\n) {\n const {\n a11yProps: {\n disabled: a11yDisabled,\n readOnly: a11yReadOnly,\n ...restA11y\n } = {},\n } = useFormFieldPropsNext();\n\n const isDisabled = disabled || a11yDisabled;\n const isReadOnly = readOnlyProp || a11yReadOnly;\n\n const [focused, setFocused] = useState(false);\n\n const misplacedAriaProps = {\n \"aria-activedescendant\": ariaActiveDescendant,\n \"aria-expanded\": ariaExpanded,\n \"aria-owns\": ariaOwns,\n role,\n };\n const inputProps = mergeA11yProps(\n restA11y,\n inputPropsProp,\n misplacedAriaProps\n );\n\n const {\n onBlur,\n onFocus,\n onKeyDown,\n onKeyUp,\n onMouseUp,\n onMouseMove,\n onMouseDown,\n ...restInputProps\n } = inputProps;\n\n const [value, setValue] = useControlled({\n controlled: valueProp,\n default: defaultValueProp,\n name: \"Input\",\n state: \"value\",\n });\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setValue(value);\n onChange?.(event, value);\n };\n\n const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n onBlur?.(event);\n setFocused(false);\n };\n\n const handleFocus = (event: FocusEvent<HTMLInputElement>) => {\n onFocus?.(event);\n setFocused(true);\n };\n\n return (\n <div\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"focused\")]: !isDisabled && focused,\n [withBaseName(\"disabled\")]: isDisabled,\n [withBaseName(\"readOnly\")]: isReadOnly,\n [withBaseName(variant)]: variant,\n },\n classNameProp\n )}\n style={style}\n {...other}\n >\n <input\n type={type}\n id={id}\n className={clsx(withBaseName(\"input\"), inputProps?.className)}\n disabled={isDisabled}\n readOnly={isReadOnly}\n ref={ref}\n value={value}\n tabIndex={isReadOnly || isDisabled ? -1 : 0}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={!isDisabled ? handleFocus : undefined}\n {...restInputProps}\n />\n </div>\n );\n});\n"],"names":["makePrefixer","clsx","forwardRef","Input","useFormFieldPropsNext","useState","useControlled","value","jsx"],"mappings":"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"}

package/dist-cjs/packages/lab/src/overlay/useOverlay.js CHANGED Viewed

@@ -65,8 +65,9 @@ function useOverlay(props) {
     const arrowProps = {
       ref: handleArrowRef,
       style: {
-        left: (_b = (_a = middlewareData.arrow) == null ? void 0 : _a.x) != null ? _b : "",
-        top: (_d = (_c = middlewareData.arrow) == null ? void 0 : _c.y) != null ? _d : ""
+        position: strategy,
+        left: (_b = (_a = middlewareData.arrow) == null ? void 0 : _a.x) != null ? _b : 0,
+        top: (_d = (_c = middlewareData.arrow) == null ? void 0 : _c.y) != null ? _d : 0
       }
     };
     return {
@@ -77,8 +78,8 @@ function useOverlay(props) {
         "data-placement": placement,
         ...userProps,
         style: {
-          top: y != null ? y : "",
-          left: x != null ? x : "",
+          top: y != null ? y : 0,
+          left: x != null ? x : 0,
           position: strategy,
           ...(userProps == null ? void 0 : userProps.style) || {}
         },

package/dist-cjs/packages/lab/src/overlay/useOverlay.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useOverlay.js","sources":["../src/overlay/useOverlay.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n margin,\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n JSXElementConstructor,\n useCallback,\n useRef,\n} from \"react\";\nimport { OverlayProps } from \"./Overlay\";\nimport { isDesktop } from \"../window\";\n\nexport type UseOverlayProps = Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" \| \"open\" \| \"placement\">\n>;\n\nexport function useOverlay(props: UseOverlayProps) {\n const { open: openProp, placement = \"right\", onOpenChange } = props;\n\n const arrowRef = useRef<HTMLDivElement \| null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n const handleOpenChange = (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n };\n const middleware = isDesktop\n ? [margin(24), arrow({ element: arrowRef })]\n : [\n offset(24),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ];\n const {\n reference,\n floating,\n x,\n y,\n strategy,\n context,\n middlewareData,\n update,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement,\n middleware,\n });\n\n const handleArrowRef = useCallback(\n (node: HTMLDivElement) => {\n arrowRef.current = node;\n update();\n },\n [update]\n );\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n useDismiss(context),\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n ]);\n\n const getTriggerProps = <\n Element extends\n \| keyof JSX.IntrinsicElements\n \| JSXElementConstructor<any> = \"div\"\n >(\n userProps?: ComponentPropsWithoutRef<Element>\n ) => {\n return getReferenceProps({\n ...userProps,\n ref: reference,\n }) as ComponentPropsWithRef<Element>;\n };\n\n const getOverlayProps = (userProps?: OverlayProps) => {\n const arrowProps = {\n ref: handleArrowRef,\n style: {\n left: middlewareData.arrow?.x ?? ~~\"\"~~,\n top: middlewareData.arrow?.y ?? ~~\"\"~~,\n },\n };\n\n return {\n arrowProps,\n open,\n onOpenChange: handleOpenChange,\n ...getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ...userProps,\n style: {\n top: y ?? ~~\"\"~~,\n left: x ?? ~~\"\"~~,\n position: strategy,\n ...(userProps?.style \|\| {}),\n },\n ref: floating,\n }),\n } as OverlayProps;\n };\n\n return {\n getTriggerProps,\n getOverlayProps,\n };\n}\n"],"names":["useRef","useControlled","isDesktop","margin","arrow","offset","flip","shift","limitShift","useFloatingUI","useCallback","useInteractions","useDismiss","useRole","useClick"],"mappings":";;;;;;;;;;AA+BO,SAAS,WAAW,KAAwB,EAAA;AACjD,EAAA,MAAM,EAAE,IAAM,EAAA,QAAA,EAAU,SAAY,GAAA,OAAA,EAAS,cAAiB,GAAA,KAAA,CAAA;AAE9D,EAAM,MAAA,QAAA,GAAWA,aAA8B,IAAI,CAAA,CAAA;AAEnD,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIC,kBAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,SAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AACD,EAAM,MAAA,gBAAA,GAAmB,CAAC,OAAqB,KAAA;AAC7C,IAAA,OAAA,CAAQ,OAAO,CAAA,CAAA;AACf,IAAe,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,OAAA,CAAA,CAAA;AAAA,GACjB,CAAA;AACA,EAAA,MAAM,UAAa,GAAAC,uBAAA,GACf,CAACC,WAAA,CAAO,EAAE,CAAA,EAAGC,WAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAC,CACzC,GAAA;AAAA,IACEC,aAAO,EAAE,CAAA;AAAA,IACTC,UAAK,EAAA;AAAA,IACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AAAA,IAC/BJ,WAAM,CAAA,EAAE,OAAS,EAAA,QAAA,EAAU,CAAA;AAAA,GAC7B,CAAA;AACJ,EAAM,MAAA;AAAA,IACJ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,CAAA;AAAA,IACA,CAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,cAAA;AAAA,IACA,MAAA;AAAA,MACEK,kBAAc,CAAA;AAAA,IAChB,IAAA;AAAA,IACA,YAAc,EAAA,gBAAA;AAAA,IACd,SAAA;AAAA,IACA,UAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,MAAM,cAAiB,GAAAC,iBAAA;AAAA,IACrB,CAAC,IAAyB,KAAA;AACxB,MAAA,QAAA,CAAS,OAAU,GAAA,IAAA,CAAA;AACnB,MAAO,MAAA,EAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,MAAM,CAAA;AAAA,GACT,CAAA;AAEA,EAAA,MAAM,EAAE,gBAAA,EAAkB,iBAAkB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9DC,iBAAW,OAAO,CAAA;AAAA,IAClBC,aAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,UAAU,CAAA;AAAA,IACnCC,eAAS,OAAO,CAAA;AAAA,GACjB,CAAA,CAAA;AAED,EAAM,MAAA,eAAA,GAAkB,CAKtB,SACG,KAAA;AACH,IAAA,OAAO,iBAAkB,CAAA;AAAA,MACvB,GAAG,SAAA;AAAA,MACH,GAAK,EAAA,SAAA;AAAA,KACN,CAAA,CAAA;AAAA,GACH,CAAA;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,SAA6B,KAAA;AAjGxD,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAkGI,IAAA,MAAM,UAAa,GAAA;AAAA,MACjB,GAAK,EAAA,cAAA;AAAA,MACL,KAAO,EAAA;AAAA,QACL,IAAM,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,cAAA,CAAe,KAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsB,MAAtB,IAA2B,GAAA,EAAA,GAAA,~~EAAA~~;AAAA,QACjC,GAAK,EAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,cAAA,CAAe,KAAf,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAsB,MAAtB,IAA2B,GAAA,EAAA,GAAA,~~EAAA~~;AAAA,OAClC;AAAA,KACF,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,UAAA;AAAA,MACA,IAAA;AAAA,MACA,YAAc,EAAA,gBAAA;AAAA,MACd,GAAG,gBAAiB,CAAA;AAAA,QAElB,gBAAkB,EAAA,SAAA;AAAA,QAClB,GAAG,SAAA;AAAA,QACH,KAAO,EAAA;AAAA,UACL,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,~~EAAA~~;AAAA,UACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,~~EAAA~~;AAAA,UACX,QAAU,EAAA,QAAA;AAAA,UACV,GAAA,CAAI,SAAW,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,SAAA,CAAA,KAAA,KAAS,EAAC;AAAA,SAC3B;AAAA,QACA,GAAK,EAAA,QAAA;AAAA,OACN,CAAA;AAAA,KACH,CAAA;AAAA,GACF,CAAA;AAEA,EAAO,OAAA;AAAA,IACL,eAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
1	+ {"version":3,"file":"useOverlay.js","sources":["../src/overlay/useOverlay.ts"],"sourcesContent":["import {\n arrow,\n flip,\n limitShift,\n offset,\n shift,\n useClick,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport {\n margin,\n useControlled,\n useFloatingUI,\n UseFloatingUIProps,\n} from \"@salt-ds/core\";\nimport {\n ComponentPropsWithoutRef,\n ComponentPropsWithRef,\n JSXElementConstructor,\n useCallback,\n useRef,\n} from \"react\";\nimport { OverlayProps } from \"./Overlay\";\nimport { isDesktop } from \"../window\";\n\nexport type UseOverlayProps = Partial<\n Pick<UseFloatingUIProps, \"onOpenChange\" \| \"open\" \| \"placement\">\n>;\n\nexport function useOverlay(props: UseOverlayProps) {\n const { open: openProp, placement = \"right\", onOpenChange } = props;\n\n const arrowRef = useRef<HTMLDivElement \| null>(null);\n\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Overlay\",\n state: \"open\",\n });\n const handleOpenChange = (newOpen: boolean) => {\n setOpen(newOpen);\n onOpenChange?.(newOpen);\n };\n const middleware = isDesktop\n ? [margin(24), arrow({ element: arrowRef })]\n : [\n offset(24),\n flip(),\n shift({ limiter: limitShift() }),\n arrow({ element: arrowRef }),\n ];\n const {\n reference,\n floating,\n x,\n y,\n strategy,\n context,\n middlewareData,\n update,\n } = useFloatingUI({\n open,\n onOpenChange: handleOpenChange,\n placement,\n middleware,\n });\n\n const handleArrowRef = useCallback(\n (node: HTMLDivElement) => {\n arrowRef.current = node;\n update();\n },\n [update]\n );\n\n const { getFloatingProps, getReferenceProps } = useInteractions([\n useDismiss(context),\n useRole(context, { role: \"dialog\" }),\n useClick(context),\n ]);\n\n const getTriggerProps = <\n Element extends\n \| keyof JSX.IntrinsicElements\n \| JSXElementConstructor<any> = \"div\"\n >(\n userProps?: ComponentPropsWithoutRef<Element>\n ) => {\n return getReferenceProps({\n ...userProps,\n ref: reference,\n }) as ComponentPropsWithRef<Element>;\n };\n\n const getOverlayProps = (userProps?: OverlayProps) => {\n const arrowProps = {\n ref: handleArrowRef,\n style: {\n position: strategy,\n left: middlewareData.arrow?.x ?? 0,\n top: middlewareData.arrow?.y ?? 0,\n },\n };\n\n return {\n arrowProps,\n open,\n onOpenChange: handleOpenChange,\n ...getFloatingProps({\n // @ts-ignore\n \"data-placement\": placement,\n ...userProps,\n style: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n ...(userProps?.style \|\| {}),\n },\n ref: floating,\n }),\n } as OverlayProps;\n };\n\n return {\n getTriggerProps,\n getOverlayProps,\n };\n}\n"],"names":["useRef","useControlled","isDesktop","margin","arrow","offset","flip","shift","limitShift","useFloatingUI","useCallback","useInteractions","useDismiss","useRole","useClick"],"mappings":"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"}

package/dist-cjs/packages/lab/src/query-input/internal/QueryInputBody.js CHANGED Viewed

@@ -13,6 +13,7 @@ require('../../tokenized-input/TokenizedInputBase.js');
 require('clipboard-copy');
 require('../../utils/useFloatingUI.js');
 require('../../form-field-context/FormFieldContext.js');
+require('../../form-field-context/FormFieldContextNext.js');
 const withBaseName = core.makePrefixer("saltQueryInputBody");
 const QueryInputBody = React.forwardRef(

package/dist-cjs/packages/lab/src/query-input/internal/QueryInputBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"QueryInputBody.js","sources":["../src/query-input/internal/QueryInputBody.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n Ref,\n SyntheticEvent,\n useMemo,\n} from \"react\";\n\nimport {\n ToggleButton,\n ToggleButtonGroup,\n ToggleButtonGroupChangeEventHandler,\n} from \"../../toggle-button\";\nimport {\n ChangeHandler,\n StringToItem,\n TokenizedInput,\n} from \"../../tokenized-input\";\nimport { QueryInputItem } from \"../queryInputTypes\";\nimport { BooleanOperator } from \"../useQueryInput\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputBody\");\n\nexport interface QueryInputBodyProps {\n inputRef: Ref<HTMLInputElement>;\n disabled?: boolean;\n showCategory?: boolean;\n selectedItems: QueryInputItem[];\n onBlur: FocusEventHandler<HTMLInputElement>;\n onFocus: FocusEventHandler<HTMLInputElement>;\n onInputFocus: FocusEventHandler<HTMLInputElement>;\n onInputBlur: FocusEventHandler<HTMLInputElement>;\n onInputClick: (event: SyntheticEvent) => void;\n onInputClear: () => void;\n inputValue?: string;\n onInputChange: ChangeEventHandler<HTMLInputElement>;\n isFocused?: boolean;\n onSelectedItemsChange: ChangeHandler<QueryInputItem>;\n onKeyDown: KeyboardEventHandler<HTMLInputElement \| HTMLButtonElement>;\n booleanOperator: BooleanOperator;\n onBooleanOperatorChange: (newBooleanOperator: BooleanOperator) => void;\n}\n\nexport const QueryInputBody = forwardRef<HTMLDivElement, QueryInputBodyProps>(\n function QueryInputBody(props, ref) {\n const {\n inputRef,\n disabled,\n selectedItems,\n onInputFocus,\n onInputBlur,\n showCategory,\n inputValue,\n onInputChange,\n isFocused,\n onInputClear,\n onSelectedItemsChange,\n onKeyDown,\n onInputClick,\n booleanOperator,\n onBooleanOperatorChange,\n } = props;\n\n const itemToString = useMemo(() => {\n if (showCategory) {\n return (item: QueryInputItem) => [item.category, item.value].join(\": \");\n }\n return (item: QueryInputItem) => item.value;\n }, [showCategory]);\n\n const stringToItem: StringToItem<QueryInputItem> = (\n selectedItems,\n value\n ) => {\n return {\n category: null,\n value,\n };\n };\n\n const onChange: ToggleButtonGroupChangeEventHandler = (event, index) => {\n const newBooleanOperator = index === 0 ? \"and\" : \"or\";\n onBooleanOperatorChange(newBooleanOperator);\n };\n\n return (\n <div ref={ref} className={withBaseName()}>\n <FilterIcon />\n <TokenizedInput\n inputRef={inputRef}\n disabled={disabled}\n className={withBaseName(\"input\")}\n selectedItems={selectedItems}\n itemToString={itemToString as any}\n stringToItem={stringToItem as any}\n onInputFocus={onInputFocus}\n onInputBlur={onInputBlur}\n value={inputValue}\n onClick={onInputClick}\n onInputChange={onInputChange}\n expanded={isFocused}\n onClear={onInputClear}\n onChange={onSelectedItemsChange as any}\n onKeyDown={onKeyDown}\n />\n <div className={withBaseName(\"separator\")} />\n <ToggleButtonGroup\n variant=\"secondary\"\n className={withBaseName(\"buttonGroup\")}\n data-testid=\"boolean-selector\"\n selectedIndex={booleanOperator === \"and\" ? 0 : 1}\n onChange={onChange}\n >\n <ToggleButton value=\"and\">And</ToggleButton>\n <ToggleButton value=\"or\">Or</ToggleButton>\n </ToggleButtonGroup>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","QueryInputBody","useMemo","selectedItems","jsxs","jsx","FilterIcon","TokenizedInput","ToggleButtonGroup","ToggleButton"],"mappings":"~~;;;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"QueryInputBody.js","sources":["../src/query-input/internal/QueryInputBody.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n ChangeEventHandler,\n FocusEventHandler,\n forwardRef,\n KeyboardEventHandler,\n Ref,\n SyntheticEvent,\n useMemo,\n} from \"react\";\n\nimport {\n ToggleButton,\n ToggleButtonGroup,\n ToggleButtonGroupChangeEventHandler,\n} from \"../../toggle-button\";\nimport {\n ChangeHandler,\n StringToItem,\n TokenizedInput,\n} from \"../../tokenized-input\";\nimport { QueryInputItem } from \"../queryInputTypes\";\nimport { BooleanOperator } from \"../useQueryInput\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputBody\");\n\nexport interface QueryInputBodyProps {\n inputRef: Ref<HTMLInputElement>;\n disabled?: boolean;\n showCategory?: boolean;\n selectedItems: QueryInputItem[];\n onBlur: FocusEventHandler<HTMLInputElement>;\n onFocus: FocusEventHandler<HTMLInputElement>;\n onInputFocus: FocusEventHandler<HTMLInputElement>;\n onInputBlur: FocusEventHandler<HTMLInputElement>;\n onInputClick: (event: SyntheticEvent) => void;\n onInputClear: () => void;\n inputValue?: string;\n onInputChange: ChangeEventHandler<HTMLInputElement>;\n isFocused?: boolean;\n onSelectedItemsChange: ChangeHandler<QueryInputItem>;\n onKeyDown: KeyboardEventHandler<HTMLInputElement \| HTMLButtonElement>;\n booleanOperator: BooleanOperator;\n onBooleanOperatorChange: (newBooleanOperator: BooleanOperator) => void;\n}\n\nexport const QueryInputBody = forwardRef<HTMLDivElement, QueryInputBodyProps>(\n function QueryInputBody(props, ref) {\n const {\n inputRef,\n disabled,\n selectedItems,\n onInputFocus,\n onInputBlur,\n showCategory,\n inputValue,\n onInputChange,\n isFocused,\n onInputClear,\n onSelectedItemsChange,\n onKeyDown,\n onInputClick,\n booleanOperator,\n onBooleanOperatorChange,\n } = props;\n\n const itemToString = useMemo(() => {\n if (showCategory) {\n return (item: QueryInputItem) => [item.category, item.value].join(\": \");\n }\n return (item: QueryInputItem) => item.value;\n }, [showCategory]);\n\n const stringToItem: StringToItem<QueryInputItem> = (\n selectedItems,\n value\n ) => {\n return {\n category: null,\n value,\n };\n };\n\n const onChange: ToggleButtonGroupChangeEventHandler = (event, index) => {\n const newBooleanOperator = index === 0 ? \"and\" : \"or\";\n onBooleanOperatorChange(newBooleanOperator);\n };\n\n return (\n <div ref={ref} className={withBaseName()}>\n <FilterIcon />\n <TokenizedInput\n inputRef={inputRef}\n disabled={disabled}\n className={withBaseName(\"input\")}\n selectedItems={selectedItems}\n itemToString={itemToString as any}\n stringToItem={stringToItem as any}\n onInputFocus={onInputFocus}\n onInputBlur={onInputBlur}\n value={inputValue}\n onClick={onInputClick}\n onInputChange={onInputChange}\n expanded={isFocused}\n onClear={onInputClear}\n onChange={onSelectedItemsChange as any}\n onKeyDown={onKeyDown}\n />\n <div className={withBaseName(\"separator\")} />\n <ToggleButtonGroup\n variant=\"secondary\"\n className={withBaseName(\"buttonGroup\")}\n data-testid=\"boolean-selector\"\n selectedIndex={booleanOperator === \"and\" ? 0 : 1}\n onChange={onChange}\n >\n <ToggleButton value=\"and\">And</ToggleButton>\n <ToggleButton value=\"or\">Or</ToggleButton>\n </ToggleButtonGroup>\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","QueryInputBody","useMemo","selectedItems","jsxs","jsx","FilterIcon","TokenizedInput","ToggleButtonGroup","ToggleButton"],"mappings":"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"}

package/dist-cjs/packages/lab/src/query-input/internal/ValueSelector.js CHANGED Viewed

@@ -90,8 +90,8 @@ function ValueSelector(props) {
   return /* @__PURE__ */ jsxRuntime.jsx(Portal.Portal, {
     children: /* @__PURE__ */ jsxRuntime.jsx(Window, {
       style: {
-        top: y != null ? y : "",
-        left: x != null ? x : "",
+        top: y != null ? y : 0,
+        left: x != null ? x : 0,
         position: strategy
       },
       ref: handleRef,

package/dist-cjs/packages/lab/src/query-input/internal/ValueSelector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ValueSelector.js","sources":["../src/query-input/internal/ValueSelector.tsx"],"sourcesContent":["import {\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { Dispatch, Ref, SetStateAction, useMemo } from \"react\";\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport { CategoryList } from \"./CategoryList\";\nimport { SearchList } from \"./SearchList\";\nimport { ValueList } from \"./ValueList\";\nimport { Portal } from \"../../portal\";\nimport { useWindow } from \"../../window\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueSelector\");\n\nexport interface ValueSelectorProps {\n isOpen: boolean;\n anchorElement: HTMLElement \| null;\n popperRef: Ref<HTMLDivElement>;\n\n inputValue?: string;\n categories: QueryInputCategory[];\n selectedCategory: QueryInputCategory \| null;\n onSelectedCategoryChange: (category: QueryInputCategory \| null) => void;\n\n width: number;\n selectedItems: QueryInputItem[];\n onValueToggle: (category: QueryInputCategory, value: string) => void;\n onSearchListChange: (items: QueryInputItem[]) => void;\n\n highlightedIndex?: number;\n visibleCategories: QueryInputCategory[];\n\n highlightedCategoryIndex?: number;\n highlightedValueIndex?: number;\n setHighlightedIndex: Dispatch<SetStateAction<number>>;\n setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueSelector(props: ValueSelectorProps) {\n const {\n isOpen,\n inputValue,\n anchorElement,\n popperRef,\n categories,\n selectedCategory,\n onSelectedCategoryChange,\n width,\n selectedItems,\n onValueToggle,\n highlightedIndex,\n visibleCategories,\n highlightedCategoryIndex,\n highlightedValueIndex,\n onSearchListChange,\n setHighlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedIndex,\n } = props;\n\n const selectedCategoryValues = useMemo(() => {\n if (!selectedCategory) {\n return [];\n }\n return selectedItems\n .filter((item) => item.category === selectedCategory.name)\n .map(({ value }) => value);\n }, [selectedCategory, selectedItems]);\n\n const onBackToCategories = () => {\n onSelectedCategoryChange(null);\n };\n\n const renderContent = () => {\n if (inputValue) {\n return (\n <SearchList\n inputValue={inputValue}\n selectedItems={selectedItems}\n onChange={onSearchListChange}\n rootWidth={width}\n highlightedIndex={highlightedIndex}\n visibleCategories={visibleCategories}\n setHighlightedIndex={setHighlightedIndex}\n />\n );\n }\n\n if (!selectedCategory) {\n return (\n <CategoryList\n categories={categories}\n rootWidth={width}\n onCategorySelect={onSelectedCategoryChange}\n highlightedCategoryIndex={highlightedCategoryIndex}\n setHighlightedCategoryIndex={setHighlightedCategoryIndex}\n />\n );\n }\n\n return (\n <ValueList\n category={selectedCategory}\n rootWidth={width}\n onBack={onBackToCategories}\n selectedValues={selectedCategoryValues}\n onValueToggle={onValueToggle}\n highlightedValueIndex={highlightedValueIndex}\n setHighlightedValueIndex={setHighlightedValueIndex}\n />\n );\n };\n\n const Window = useWindow();\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement: \"bottom\",\n });\n const handleRef = useForkRef<HTMLDivElement>(floating, popperRef);\n useIsomorphicLayoutEffect(() => {\n if (anchorElement) {\n reference(anchorElement);\n }\n }, [reference, anchorElement]);\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <Portal>\n <Window\n style={{\n top: y ?? ~~\"\"~~,\n left: x ?? ~~\"\"~~,\n position: strategy,\n }}\n ref={handleRef}\n >\n <div className={withBaseName(\"content\")}>{renderContent()}</div>\n </Window>\n </Portal>\n );\n}\n"],"names":["makePrefixer","useMemo","jsx","SearchList","CategoryList","ValueList","useWindow","useFloatingUI","useForkRef","useIsomorphicLayoutEffect","Portal"],"mappings":"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~~EAAA~~;AAAA,QACV,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,~~EAAA~~;AAAA,QACX,QAAU,EAAA,QAAA;AAAA,OACZ;AAAA,MACA,GAAK,EAAA,SAAA;AAAA,MAEL,QAAC,kBAAAA,cAAA,CAAA,KAAA,EAAA;AAAA,QAAI,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAI,QAAc,EAAA,aAAA,EAAA;AAAA,OAAE,CAAA;AAAA,KAC5D,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"ValueSelector.js","sources":["../src/query-input/internal/ValueSelector.tsx"],"sourcesContent":["import {\n makePrefixer,\n useFloatingUI,\n useForkRef,\n useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { Dispatch, Ref, SetStateAction, useMemo } from \"react\";\nimport { QueryInputCategory, QueryInputItem } from \"../queryInputTypes\";\nimport { CategoryList } from \"./CategoryList\";\nimport { SearchList } from \"./SearchList\";\nimport { ValueList } from \"./ValueList\";\nimport { Portal } from \"../../portal\";\nimport { useWindow } from \"../../window\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputValueSelector\");\n\nexport interface ValueSelectorProps {\n isOpen: boolean;\n anchorElement: HTMLElement \| null;\n popperRef: Ref<HTMLDivElement>;\n\n inputValue?: string;\n categories: QueryInputCategory[];\n selectedCategory: QueryInputCategory \| null;\n onSelectedCategoryChange: (category: QueryInputCategory \| null) => void;\n\n width: number;\n selectedItems: QueryInputItem[];\n onValueToggle: (category: QueryInputCategory, value: string) => void;\n onSearchListChange: (items: QueryInputItem[]) => void;\n\n highlightedIndex?: number;\n visibleCategories: QueryInputCategory[];\n\n highlightedCategoryIndex?: number;\n highlightedValueIndex?: number;\n setHighlightedIndex: Dispatch<SetStateAction<number>>;\n setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n setHighlightedValueIndex: Dispatch<SetStateAction<number>>;\n}\n\nexport function ValueSelector(props: ValueSelectorProps) {\n const {\n isOpen,\n inputValue,\n anchorElement,\n popperRef,\n categories,\n selectedCategory,\n onSelectedCategoryChange,\n width,\n selectedItems,\n onValueToggle,\n highlightedIndex,\n visibleCategories,\n highlightedCategoryIndex,\n highlightedValueIndex,\n onSearchListChange,\n setHighlightedValueIndex,\n setHighlightedCategoryIndex,\n setHighlightedIndex,\n } = props;\n\n const selectedCategoryValues = useMemo(() => {\n if (!selectedCategory) {\n return [];\n }\n return selectedItems\n .filter((item) => item.category === selectedCategory.name)\n .map(({ value }) => value);\n }, [selectedCategory, selectedItems]);\n\n const onBackToCategories = () => {\n onSelectedCategoryChange(null);\n };\n\n const renderContent = () => {\n if (inputValue) {\n return (\n <SearchList\n inputValue={inputValue}\n selectedItems={selectedItems}\n onChange={onSearchListChange}\n rootWidth={width}\n highlightedIndex={highlightedIndex}\n visibleCategories={visibleCategories}\n setHighlightedIndex={setHighlightedIndex}\n />\n );\n }\n\n if (!selectedCategory) {\n return (\n <CategoryList\n categories={categories}\n rootWidth={width}\n onCategorySelect={onSelectedCategoryChange}\n highlightedCategoryIndex={highlightedCategoryIndex}\n setHighlightedCategoryIndex={setHighlightedCategoryIndex}\n />\n );\n }\n\n return (\n <ValueList\n category={selectedCategory}\n rootWidth={width}\n onBack={onBackToCategories}\n selectedValues={selectedCategoryValues}\n onValueToggle={onValueToggle}\n highlightedValueIndex={highlightedValueIndex}\n setHighlightedValueIndex={setHighlightedValueIndex}\n />\n );\n };\n\n const Window = useWindow();\n const { reference, floating, x, y, strategy } = useFloatingUI({\n placement: \"bottom\",\n });\n const handleRef = useForkRef<HTMLDivElement>(floating, popperRef);\n useIsomorphicLayoutEffect(() => {\n if (anchorElement) {\n reference(anchorElement);\n }\n }, [reference, anchorElement]);\n\n if (!isOpen) {\n return null;\n }\n\n return (\n <Portal>\n <Window\n style={{\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n }}\n ref={handleRef}\n >\n <div className={withBaseName(\"content\")}>{renderContent()}</div>\n </Window>\n </Portal>\n );\n}\n"],"names":["makePrefixer","useMemo","jsx","SearchList","CategoryList","ValueList","useWindow","useFloatingUI","useForkRef","useIsomorphicLayoutEffect","Portal"],"mappings":"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"}

package/dist-cjs/packages/lab/src/stepper-input/internal/useActivationIndicatorPosition.js CHANGED Viewed

@@ -4,7 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var core = require('@salt-ds/core');
 require('../../form-field-context/FormFieldContext.js');
+require('../../form-field-context/FormFieldContextNext.js');
 var useFormFieldProps = require('../../form-field-context/useFormFieldProps.js');
+require('react');
 const refreshButtonWidth = {
   touch: 36,

package/dist-cjs/packages/lab/src/stepper-input/internal/useActivationIndicatorPosition.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useActivationIndicatorPosition.js","sources":["../src/stepper-input/internal/useActivationIndicatorPosition.ts"],"sourcesContent":["import { useDensity, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../../form-field-context\";\nimport { MutableRefObject } from \"react\";\n\nconst refreshButtonWidth = {\n touch: 36,\n low: 28,\n medium: 24,\n high: 12,\n};\n\n// The activation indicator icon is absolutely positioned by FormField,\n// and must be offset to accommodate the end adornment added by Stepper Input.\n// Ideally, we should be able to provide an 'activationIndicator' class to FormField to\n// override its default positioning instead of directly repositioning it via its ref.\nexport function useActivationIndicatorPosition(\n adornmentRef: MutableRefObject<HTMLDivElement \| null>,\n refreshButtonVisible: boolean\n) {\n const formFieldProps = useFormFieldProps();\n const { ref: formFieldRef } = formFieldProps;\n const density = useDensity();\n\n useIsomorphicLayoutEffect(() => {\n let offset;\n if (adornmentRef && adornmentRef.current !== null) {\n const marginAdjustment =\n density === \"high\" \|\| density === \"medium\" ? 2 : 4;\n\n const secondaryButtonAdjustment = refreshButtonVisible\n ? 0\n : refreshButtonWidth[density];\n\n offset =\n adornmentRef.current.getBoundingClientRect().width -\n marginAdjustment -\n secondaryButtonAdjustment;\n }\n if (formFieldRef && formFieldRef.current && offset) {\n const activationIndicator = formFieldRef.current.getElementsByClassName(\n \"saltFormActivationIndicator-icon\"\n ) as HTMLCollectionOf<HTMLElement>;\n if (activationIndicator.length > 0) {\n activationIndicator[0].style.transform = `translateX(-${offset}px)`;\n }\n }\n });\n}\n"],"names":["useFormFieldProps","useDensity","useIsomorphicLayoutEffect"],"mappings":"~~;;;;;;;;~~AAIA,MAAM,kBAAqB,GAAA;AAAA,EACzB,KAAO,EAAA,EAAA;AAAA,EACP,GAAK,EAAA,EAAA;AAAA,EACL,MAAQ,EAAA,EAAA;AAAA,EACR,IAAM,EAAA,EAAA;AACR,CAAA,CAAA;AAMgB,SAAA,8BAAA,CACd,cACA,oBACA,EAAA;AACA,EAAA,MAAM,iBAAiBA,mCAAkB,EAAA,CAAA;AACzC,EAAM,MAAA,EAAE,GAAK,EAAA,YAAA,EAAiB,GAAA,cAAA,CAAA;AAC9B,EAAA,MAAM,UAAUC,eAAW,EAAA,CAAA;AAE3B,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,MAAA,CAAA;AACJ,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,KAAY,IAAM,EAAA;AACjD,MAAA,MAAM,gBACJ,GAAA,OAAA,KAAY,MAAU,IAAA,OAAA,KAAY,WAAW,CAAI,GAAA,CAAA,CAAA;AAEnD,MAAM,MAAA,yBAAA,GAA4B,oBAC9B,GAAA,CAAA,GACA,kBAAmB,CAAA,OAAA,CAAA,CAAA;AAEvB,MAAA,MAAA,GACE,YAAa,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAE,QAC7C,gBACA,GAAA,yBAAA,CAAA;AAAA,KACJ;AACA,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,IAAW,MAAQ,EAAA;AAClD,MAAM,MAAA,mBAAA,GAAsB,aAAa,OAAQ,CAAA,sBAAA;AAAA,QAC/C,kCAAA;AAAA,OACF,CAAA;AACA,MAAI,IAAA,mBAAA,CAAoB,SAAS,CAAG,EAAA;AAClC,QAAoB,mBAAA,CAAA,CAAA,CAAA,CAAG,KAAM,CAAA,SAAA,GAAY,CAAe,YAAA,EAAA,MAAA,CAAA,GAAA,CAAA,CAAA;AAAA,OAC1D;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AACH;;;;"}
1	+ {"version":3,"file":"useActivationIndicatorPosition.js","sources":["../src/stepper-input/internal/useActivationIndicatorPosition.ts"],"sourcesContent":["import { useDensity, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useFormFieldProps } from \"../../form-field-context\";\nimport { MutableRefObject } from \"react\";\n\nconst refreshButtonWidth = {\n touch: 36,\n low: 28,\n medium: 24,\n high: 12,\n};\n\n// The activation indicator icon is absolutely positioned by FormField,\n// and must be offset to accommodate the end adornment added by Stepper Input.\n// Ideally, we should be able to provide an 'activationIndicator' class to FormField to\n// override its default positioning instead of directly repositioning it via its ref.\nexport function useActivationIndicatorPosition(\n adornmentRef: MutableRefObject<HTMLDivElement \| null>,\n refreshButtonVisible: boolean\n) {\n const formFieldProps = useFormFieldProps();\n const { ref: formFieldRef } = formFieldProps;\n const density = useDensity();\n\n useIsomorphicLayoutEffect(() => {\n let offset;\n if (adornmentRef && adornmentRef.current !== null) {\n const marginAdjustment =\n density === \"high\" \|\| density === \"medium\" ? 2 : 4;\n\n const secondaryButtonAdjustment = refreshButtonVisible\n ? 0\n : refreshButtonWidth[density];\n\n offset =\n adornmentRef.current.getBoundingClientRect().width -\n marginAdjustment -\n secondaryButtonAdjustment;\n }\n if (formFieldRef && formFieldRef.current && offset) {\n const activationIndicator = formFieldRef.current.getElementsByClassName(\n \"saltFormActivationIndicator-icon\"\n ) as HTMLCollectionOf<HTMLElement>;\n if (activationIndicator.length > 0) {\n activationIndicator[0].style.transform = `translateX(-${offset}px)`;\n }\n }\n });\n}\n"],"names":["useFormFieldProps","useDensity","useIsomorphicLayoutEffect"],"mappings":";;;;;;;;;;AAIA,MAAM,kBAAqB,GAAA;AAAA,EACzB,KAAO,EAAA,EAAA;AAAA,EACP,GAAK,EAAA,EAAA;AAAA,EACL,MAAQ,EAAA,EAAA;AAAA,EACR,IAAM,EAAA,EAAA;AACR,CAAA,CAAA;AAMgB,SAAA,8BAAA,CACd,cACA,oBACA,EAAA;AACA,EAAA,MAAM,iBAAiBA,mCAAkB,EAAA,CAAA;AACzC,EAAM,MAAA,EAAE,GAAK,EAAA,YAAA,EAAiB,GAAA,cAAA,CAAA;AAC9B,EAAA,MAAM,UAAUC,eAAW,EAAA,CAAA;AAE3B,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAI,IAAA,MAAA,CAAA;AACJ,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,KAAY,IAAM,EAAA;AACjD,MAAA,MAAM,gBACJ,GAAA,OAAA,KAAY,MAAU,IAAA,OAAA,KAAY,WAAW,CAAI,GAAA,CAAA,CAAA;AAEnD,MAAM,MAAA,yBAAA,GAA4B,oBAC9B,GAAA,CAAA,GACA,kBAAmB,CAAA,OAAA,CAAA,CAAA;AAEvB,MAAA,MAAA,GACE,YAAa,CAAA,OAAA,CAAQ,qBAAsB,EAAA,CAAE,QAC7C,gBACA,GAAA,yBAAA,CAAA;AAAA,KACJ;AACA,IAAI,IAAA,YAAA,IAAgB,YAAa,CAAA,OAAA,IAAW,MAAQ,EAAA;AAClD,MAAM,MAAA,mBAAA,GAAsB,aAAa,OAAQ,CAAA,sBAAA;AAAA,QAC/C,kCAAA;AAAA,OACF,CAAA;AACA,MAAI,IAAA,mBAAA,CAAoB,SAAS,CAAG,EAAA;AAClC,QAAoB,mBAAA,CAAA,CAAA,CAAA,CAAG,KAAM,CAAA,SAAA,GAAY,CAAe,YAAA,EAAA,MAAA,CAAA,GAAA,CAAA,CAAA;AAAA,OAC1D;AAAA,KACF;AAAA,GACD,CAAA,CAAA;AACH;;;;"}

package/dist-cjs/packages/lab/src/switch/Switch.js CHANGED Viewed

@@ -8,6 +8,7 @@ var React = require('react');
 var core = require('@salt-ds/core');
 var ControlLabel = require('../control-label/ControlLabel.js');
 require('../form-field-context/FormFieldContext.js');
+require('../form-field-context/FormFieldContextNext.js');
 var useFormFieldProps = require('../form-field-context/useFormFieldProps.js');
 var CheckedIcon = require('./assets/CheckedIcon.js');
 require('./Switch.css.js');

package/dist-cjs/packages/lab/src/switch/Switch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { ControlLabel, ControlLabelProps } from \"../control-label\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { CheckedIcon } from \"./assets/CheckedIcon\";\n\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n label?: ControlLabelProps[\"label\"];\n LabelProps?: Partial<ControlLabelProps>;\n onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n props,\n ref\n) {\n const { a11yProps } = useFormFieldProps();\n\n const {\n checked: checkedProp,\n className,\n color,\n defaultChecked,\n disabled,\n label,\n LabelProps,\n onBlur,\n onChange,\n onFocus,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event, value);\n };\n\n const handleFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!inputRef.current) {\n inputRef.current = event.currentTarget;\n }\n\n // TODO :focus-visible not yet supported on Safari, so we'll need to use the\n // useIsFocusVisible polyfill\n if (inputRef.current?.matches(\":focus-visible\")) {\n setFocusVisible(true);\n }\n\n onFocus?.(event);\n },\n [onFocus]\n );\n\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n onBlur?.(event);\n },\n [onBlur]\n );\n\n return (\n <ControlLabel\n {...LabelProps}\n className={clsx(\n withBaseName(\"label\"),\n { [withBaseName(\"disabled\")]: disabled },\n className\n )}\n disabled={disabled}\n label={label}\n ref={ref}\n >\n <span className={clsx(withBaseName(), className)}>\n <span\n className={clsx(withBaseName(\"base\"), {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"focusVisible\")]: focusVisible,\n })}\n >\n <span className={withBaseName(\"inputContainer\")}>\n <input\n className={withBaseName(\"input\")}\n checked={checked}\n disabled={disabled}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={inputRef}\n type=\"checkbox\"\n {...a11yProps}\n {...rest}\n />\n {checked ? (\n <CheckedIcon className={withBaseName(\"icon\")} />\n ) : (\n <span className={withBaseName(\"thumb\")} />\n )}\n </span>\n </span>\n <span className={withBaseName(\"track\")} />\n </span>\n </ControlLabel>\n );\n});\n"],"names":["makePrefixer","forwardRef","Switch","useFormFieldProps","useRef","useControlled","useState","useCallback","jsx","ControlLabel","clsx","jsxs","CheckedIcon"],"mappings":"~~;;;;;;;;;;;;;;~~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"}
1	+ {"version":3,"file":"Switch.js","sources":["../src/switch/Switch.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport {\n ChangeEvent,\n FocusEvent,\n forwardRef,\n InputHTMLAttributes,\n useCallback,\n useRef,\n useState,\n} from \"react\";\nimport { makePrefixer, useControlled } from \"@salt-ds/core\";\nimport { ControlLabel, ControlLabelProps } from \"../control-label\";\nimport { useFormFieldProps } from \"../form-field-context\";\nimport { CheckedIcon } from \"./assets/CheckedIcon\";\n\nimport \"./Switch.css\";\n\nexport interface SwitchProps\n extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n label?: ControlLabelProps[\"label\"];\n LabelProps?: Partial<ControlLabelProps>;\n onChange?: (event: ChangeEvent<HTMLInputElement>, checked: boolean) => void;\n}\n\nconst withBaseName = makePrefixer(\"saltSwitch\");\n\nexport const Switch = forwardRef<HTMLLabelElement, SwitchProps>(function Switch(\n props,\n ref\n) {\n const { a11yProps } = useFormFieldProps();\n\n const {\n checked: checkedProp,\n className,\n color,\n defaultChecked,\n disabled,\n label,\n LabelProps,\n onBlur,\n onChange,\n onFocus,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement \| null>(null);\n\n const [checked, setChecked] = useControlled({\n controlled: checkedProp,\n default: Boolean(defaultChecked),\n name: \"Switch\",\n state: \"checked\",\n });\n\n const [focusVisible, setFocusVisible] = useState(false);\n\n const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.checked;\n setChecked(value);\n onChange?.(event, value);\n };\n\n const handleFocus = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n // Fix for https://github.com/facebook/react/issues/7769\n if (!inputRef.current) {\n inputRef.current = event.currentTarget;\n }\n\n // TODO :focus-visible not yet supported on Safari, so we'll need to use the\n // useIsFocusVisible polyfill\n if (inputRef.current?.matches(\":focus-visible\")) {\n setFocusVisible(true);\n }\n\n onFocus?.(event);\n },\n [onFocus]\n );\n\n const handleBlur = useCallback(\n (event: FocusEvent<HTMLInputElement>) => {\n setFocusVisible(false);\n onBlur?.(event);\n },\n [onBlur]\n );\n\n return (\n <ControlLabel\n {...LabelProps}\n className={clsx(\n withBaseName(\"label\"),\n { [withBaseName(\"disabled\")]: disabled },\n className\n )}\n disabled={disabled}\n label={label}\n ref={ref}\n >\n <span className={clsx(withBaseName(), className)}>\n <span\n className={clsx(withBaseName(\"base\"), {\n [withBaseName(\"checked\")]: checked,\n [withBaseName(\"focusVisible\")]: focusVisible,\n })}\n >\n <span className={withBaseName(\"inputContainer\")}>\n <input\n className={withBaseName(\"input\")}\n checked={checked}\n disabled={disabled}\n onBlur={handleBlur}\n onChange={handleChange}\n onFocus={handleFocus}\n ref={inputRef}\n type=\"checkbox\"\n {...a11yProps}\n {...rest}\n />\n {checked ? (\n <CheckedIcon className={withBaseName(\"icon\")} />\n ) : (\n <span className={withBaseName(\"thumb\")} />\n )}\n </span>\n </span>\n <span className={withBaseName(\"track\")} />\n </span>\n </ControlLabel>\n );\n});\n"],"names":["makePrefixer","forwardRef","Switch","useFormFieldProps","useRef","useControlled","useState","useCallback","jsx","ControlLabel","clsx","jsxs","CheckedIcon"],"mappings":"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"}

package/dist-cjs/packages/lab/src/tabs/Tabstrip.js CHANGED Viewed

@@ -15,6 +15,7 @@ require('../utils/useFloatingUI.js');
 var useOverflowCollectionItems = require('../responsive/useOverflowCollectionItems.js');
 var useOverflowLayout = require('../responsive/useOverflowLayout.js');
 require('../form-field-context/FormFieldContext.js');
+require('../form-field-context/FormFieldContextNext.js');
 var Tab = require('./Tab.js');
 var TabActivationIndicator = require('./TabActivationIndicator.js');
 var useTabstrip = require('./useTabstrip.js');