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

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

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

Files changed (182) hide show

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

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = ".salt-density-high {\n  --formField-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n  --formField-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n  --formField-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n  --formField-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormField {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle);\n  --formField-background: var(--salt-editable-primary-background);\n  --formField-focused-outlineColor: var(--salt-focused-outlineColor);\n  /* Set to 0 until helper text class provided */\n  --formField-helperText-height: 0px;\n}\n\n.saltFormField-tertiary.saltFormField {\n  --formField-background: var(--salt-editable-tertiary-background);\n}\n\n.saltFormField-secondary.saltFormField {\n  --formField-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormField {\n  border: 0;\n  display: inline-grid;\n  font-size: var(--saltFormField-fontSize, var(--salt-text-fontSize));\n  margin: var(--saltFormField-margin, 0);\n  padding: 0;\n  position: relative;\n  min-width: 0;\n  vertical-align: top;\n  width: var(--saltFormField-width, auto);\n}\n\n/* Class applied to the root element on hover */\n.saltFormField:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-hover);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-hover);\n\n  --saltInput-cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormField-focused,\n.saltFormField-lowFocused,\n.saltFormField.saltFormField-focused:hover,\n.saltFormField.saltFormField-lowFocused:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-active);\n  --formField-activationIndicator-size: var(--salt-editable-borderWidth-active);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-active);\n\n  --saltInput-cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormField-withHelperText {\n  --formField-helperText-marginTop: var(--formField-helperText-marginTop-default);\n  --formField-activationIndicator-offsetBottom: calc(var(--formField-helperText-marginTop) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormField-fullWidth.saltFormField-withHelperText {\n  --formField-helperText-marginTop: var(--formField-helperText-marginTop-fullWidth);\n  --formField-activationIndicator-offsetBottom: calc(var(--formField-helperText-marginTop-fullWidth) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n}\n\n/* Class applied when helper text is provided */\n.saltFormField-withHelperText {\n  --formField-helperText-fontSize: var(--saltFormField-helperText-fontSize, var(--salt-text-fontSize));\n  --formField-helperText-baseHeight: calc(1.3 * var(--formField-helperText-fontSize));\n  --formField-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formField-helperText-baseHeight));\n  --formField-helperText-height: calc(var(--formField-helperText-calculatedHeight) + var(--formField-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormField-fullWidth {\n  width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormField-disabled {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formField-activationIndicator-opacity: var(--salt-palette-opacity-foreground);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n  --formField-helperText-opacity: var(--salt-palette-opacity-foreground);\n\n  --saltControlLabel-color: var(--salt-text-primary-foreground-disabled);\n\n  --saltInput-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormField.saltFormField-disabled:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n\n  --saltInput-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormField.saltFormField-warning {\n  --formField-focused-outlineColor: var(--salt-status-warning-borderColor);\n  --formField-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormField.saltFormField-warning:hover {\n  --formField-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormField.saltFormField-error {\n  --formField-focused-outlineColor: var(--salt-status-error-borderColor);\n  --formField-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormField.saltFormField-error:hover {\n  --formField-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormField-secondary.saltFormField-error {\n  --formField-background: var(--salt-status-error-background-emphasize);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormField-secondary.saltFormField-warning {\n  --formField-background: var(--salt-status-warning-background-emphasize);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormField-labelLeft {\n  --formField-label-marginTop: var(--salt-size-unit);\n  --formField-label-paddingLeft: 0px;\n  --formField-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n  align-self: start;\n  grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormField-labelTop {\n  --formField-label-marginBottom: var(--formField-label-top-marginBottom);\n  --formField-label-marginTop: 0;\n  --formField-label-paddingLeft: var(--salt-size-unit);\n  --formField-label-paddingRight: var(--salt-size-unit);\n  /* Uses density invariant value unless helper text provided */\n  --formField-background-offset-height: calc(var(--formField-helperText-marginTop, 0px) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n\n  background: linear-gradient(to top, transparent var(--formField-background-offset-height), var(--saltFormField-background, var(--formField-background)) var(--formField-background-offset-height));\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormField-labelTop.saltFormField-withHelperText {\n  /* Uses density aware value from FormHelperText */\n  --formField-background-offset-height: var(--formField-helperText-background-offset-height);\n}\n\n.saltFormField > * {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormField-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormField > .saltFormLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormField > .saltFormActivationIndicator {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormField > .saltFormFieldHelperText {\n  grid-row-start: 4;\n  grid-row-end: 5;\n}\n\n.saltFormField-labelLeft > .saltFormLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormField-readOnly {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n  --saltInput-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormField.saltFormField-readOnly:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-readonly);\n\n  --saltInput-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormField:not(.saltFormField-withHelperText):not(.saltFormField-labelLeft).saltFormField-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height, 0px));\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormField-withHelperText:not(.saltFormField-labelLeft).saltFormField-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--formField-helperText-height, 0px);\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormField-labelLeft.saltFormField-focused:before {\n  content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormField-labelLeft.saltFormField-focused > *:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  z-index: -1;\n}\n\n.saltFormField-labelLeft.saltFormField-focused > :is(.saltFormActivationIndicator, .saltFormFieldHelperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused {\n  outline: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused > :is(.saltFormField-activationIndicator, .saltFormField-helperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused .saltFormLabel + * {\n  outline: none;\n}\n\n.saltFormField-tertiary.saltFormField.saltFormField-labelLeft > .saltFormLabel ~ * {\n  background: var(--saltFormField-background, var(--formField-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormField-primary.saltFormField > :not(.saltFormLabel):first-child {\n  background: var(--saltFormField-background, var(--formField-background));\n} */\n\n.saltFormField-labelLeft > .saltFormLabel ~ :not(.saltFormFieldHelperText) {\n  background: var(--saltFormField-background, var(--formField-background));\n}\n";
+var css_248z = ".salt-density-high {\n  --formField-label-top-marginBottom: 2px;\n}\n.salt-density-medium {\n  --formField-label-top-marginBottom: 2px;\n}\n.salt-density-low {\n  --formField-label-top-marginBottom: 4px;\n}\n.salt-density-touch {\n  --formField-label-top-marginBottom: 8px;\n}\n\n/* Style applied to the root element */\n.saltFormField {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle);\n  --formField-background: var(--salt-editable-primary-background);\n  --formField-focused-outlineColor: var(--salt-focused-outlineColor);\n  /* Set to 0 until helper text class provided */\n  --formField-helperText-height: 0px;\n}\n\n.saltFormField-secondary.saltFormField {\n  --formField-background: var(--salt-editable-secondary-background);\n}\n\n.saltFormField {\n  border: 0;\n  display: inline-grid;\n  font-size: var(--saltFormField-fontSize, var(--salt-text-fontSize));\n  margin: var(--saltFormField-margin, 0);\n  padding: 0;\n  position: relative;\n  min-width: 0;\n  vertical-align: top;\n  width: var(--saltFormField-width, auto);\n}\n\n/* Class applied to the root element on hover */\n.saltFormField:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-hover);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-hover);\n\n  --saltInput-cursor: var(--salt-editable-cursor-hover);\n}\n\n/* Class applied to the root element when focused */\n.saltFormField-focused,\n.saltFormField-lowFocused,\n.saltFormField.saltFormField-focused:hover,\n.saltFormField.saltFormField-lowFocused:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-active);\n  --formField-activationIndicator-size: var(--salt-editable-borderWidth-active);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-active);\n\n  --saltInput-cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied when helper text is provided */\n.saltFormField-withHelperText {\n  --formField-helperText-marginTop: var(--formField-helperText-marginTop-default);\n  --formField-activationIndicator-offsetBottom: calc(var(--formField-helperText-marginTop) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n}\n\n/* Class applied if `fullWidth={true}` and helper text is provided */\n.saltFormField-fullWidth.saltFormField-withHelperText {\n  --formField-helperText-marginTop: var(--formField-helperText-marginTop-fullWidth);\n  --formField-activationIndicator-offsetBottom: calc(var(--formField-helperText-marginTop-fullWidth) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n}\n\n/* Class applied when helper text is provided */\n.saltFormField-withHelperText {\n  --formField-helperText-fontSize: var(--saltFormField-helperText-fontSize, var(--salt-text-fontSize));\n  --formField-helperText-baseHeight: calc(1.3 * var(--formField-helperText-fontSize));\n  --formField-helperText-calculatedHeight: max(var(--salt-text-label-minHeight), var(--formField-helperText-baseHeight));\n  --formField-helperText-height: calc(var(--formField-helperText-calculatedHeight) + var(--formField-helperText-marginTop));\n}\n\n/* Class applied to the root element if `fillWidth={true}` */\n.saltFormField-fullWidth {\n  width: 100%;\n}\n\n/* Class applied to the root element if `disabled={true}` */\n.saltFormField-disabled {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formField-activationIndicator-opacity: var(--salt-palette-opacity-foreground);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n  --formField-helperText-opacity: var(--salt-palette-opacity-foreground);\n\n  --saltControlLabel-color: var(--salt-text-primary-foreground-disabled);\n\n  --saltInput-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on hover if `disabled={true}` */\n.saltFormField.saltFormField-disabled:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-disabled);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-disabled);\n\n  --saltInput-cursor: var(--salt-editable-cursor-disabled);\n}\n\n/* Class applied to the root element on warning state */\n.saltFormField.saltFormField-warning {\n  --formField-focused-outlineColor: var(--salt-status-warning-borderColor);\n  --formField-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on warning state on hover */\n.saltFormField.saltFormField-warning:hover {\n  --formField-activationIndicator-color: var(--salt-status-warning-borderColor);\n}\n\n/* Class applied to the root element on error state */\n.saltFormField.saltFormField-error {\n  --formField-focused-outlineColor: var(--salt-status-error-borderColor);\n  --formField-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Class applied to the root element on error state on hover */\n.saltFormField.saltFormField-error:hover {\n  --formField-activationIndicator-color: var(--salt-status-error-borderColor);\n}\n\n/* Error state styling when `variant=\"secondary\"` */\n.saltFormField-secondary.saltFormField-error {\n  --formField-background: var(--salt-status-error-background);\n}\n\n/* Warning state styling when `variant=\"secondary\"` */\n.saltFormField-secondary.saltFormField-warning {\n  --formField-background: var(--salt-status-warning-background);\n}\n\n/* Class applied to the root element if `labelPlacement=\"left\"` */\n.saltFormField-labelLeft {\n  --formField-label-marginTop: var(--salt-size-unit);\n  --formField-label-paddingLeft: 0px;\n  --formField-label-paddingRight: calc(0.75 * var(--salt-size-unit));\n\n  align-self: start;\n  grid-template-columns: auto 1fr;\n}\n\n/* Class applied to the root element if `labelPlacement=\"top\"` or labelPlacement omitted (default is 'top') */\n.saltFormField-labelTop {\n  --formField-label-marginBottom: var(--formField-label-top-marginBottom);\n  --formField-label-marginTop: 0;\n  --formField-label-paddingLeft: var(--salt-size-unit);\n  --formField-label-paddingRight: var(--salt-size-unit);\n  /* Uses density invariant value unless helper text provided */\n  --formField-background-offset-height: calc(var(--formField-helperText-marginTop, 0px) + var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height)));\n\n  background: linear-gradient(to top, transparent var(--formField-background-offset-height), var(--saltFormField-background, var(--formField-background)) var(--formField-background-offset-height));\n}\n\n/* Class applied if `labelPlacement=\"top\"` and helper text is provided */\n.saltFormField-labelTop.saltFormField-withHelperText {\n  /* Uses density aware value from FormHelperText */\n  --formField-background-offset-height: var(--formField-helperText-background-offset-height);\n}\n\n.saltFormField > * {\n  grid-column-start: 1;\n  grid-column-end: 2;\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormField-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormField > .saltFormLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormField > .saltFormActivationIndicator {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormField > .saltFormHelperText {\n  grid-row-start: 4;\n  grid-row-end: 5;\n}\n\n.saltFormField-labelLeft > .saltFormLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n/* Class applied if `readOnly={true}\"` */\n.saltFormField-readOnly {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n\n  --saltInput-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied to the root element if `readOnly={true}\"` on hover */\n.saltFormField.saltFormField-readOnly:hover {\n  --formField-activationIndicator-color: var(--salt-editable-borderColor-readonly);\n  --formField-activationIndicator-size: var(--salt-size-border);\n  --formField-activationIndicator-style: var(--salt-editable-borderStyle-readonly);\n\n  --saltInput-cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Class applied on focus with `labelTop={true}` and no helper text provided */\n.saltFormField:not(.saltFormField-withHelperText):not(.saltFormField-labelLeft).saltFormField-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--saltFormField-helperText-lineHeight, var(--formField-helperText-height, 0px));\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n/* Class applied on focus with `labelTop={true}` and helper text provided */\n.saltFormField-withHelperText:not(.saltFormField-labelLeft).saltFormField-focused:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: var(--formField-helperText-height, 0px);\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n}\n\n.saltFormField-labelLeft.saltFormField-focused:before {\n  content: none;\n}\n\n/* Class applied on focus with `labelLeft={true}` */\n.saltFormField-labelLeft.saltFormField-focused > *:before {\n  content: \" \";\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0px;\n  outline-color: var(--formField-focused-outlineColor);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  z-index: -1;\n}\n\n.saltFormField-labelLeft.saltFormField-focused > :is(.saltFormActivationIndicator, .saltFormHelperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused {\n  outline: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused > :is(.saltFormField-activationIndicator, .saltFormField-helperText, .saltFormLabel):before {\n  content: none;\n}\n\n.saltFormField-labelLeft.saltFormField-focused .saltFormLabel + * {\n  outline: none;\n}\n\n.saltFormField-tertiary.saltFormField.saltFormField-labelLeft > .saltFormLabel ~ * {\n  background: var(--saltFormField-background, var(--formField-background));\n}\n\n/* TODO: I don't think this is needed, but commenting until work on FF done\n.saltFormField-primary.saltFormField > :not(.saltFormLabel):first-child {\n  background: var(--saltFormField-background, var(--formField-background));\n} */\n\n.saltFormField-labelLeft > .saltFormLabel ~ :not(.saltFormHelperText) {\n  background: var(--saltFormField-background, var(--formField-background));\n}\n\n/* **Deprecated:** Tertiary variant no longer supported */\n.saltFormField-tertiary.saltFormField {\n  --formField-background: var(--salt-editable-tertiary-background);\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

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

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 import { forwardRef, useRef, useMemo, useState } from 'react';
 import { makePrefixer, useId, useForkRef, Tooltip } from '@salt-ds/core';
 import { FormFieldContext } from '../form-field-context/FormFieldContext.js';
+import '../form-field-context/FormFieldContextNext.js';
 import { classBase } from './constant.js';
 import { FormActivationIndicator } from './FormActivationIndicator.js';
 import { FormHelperText } from './FormHelperText.js';

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 { 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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"}
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 Deprecated: The 'tertiary' variant has been deprecated\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/FormHelperText.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
-var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n\n  --formField-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n  --formField-helperText-transform: translate(0, 2px);\n\n  --formField-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formField-helperText-marginTop-default: 8px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, -3px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formField-helperText-marginTop-default: 4px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, 1px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormField-fullWidth {\n  --formField-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormFieldHelperText {\n  --formField-helperText-opacity: 1;\n\n  color: var(--saltFormField-helperText-color, var(--salt-text-secondary-foreground));\n  font-size: var(--formField-helperText-fontSize);\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormField-helperText-letterSpacing, 0);\n  line-height: var(--saltFormField-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormField-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormField-helperText-marginBottom, 0);\n  margin-top: var(--saltFormField-helperText-marginTop, var(--formField-helperText-marginTop));\n  opacity: var(--saltFormField-helperText-opacity, var(--formField-helperText-opacity));\n  padding-left: var(--saltFormField-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormField-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormField-helperText-transform, var(--formField-helperText-transform, none));\n}\n";
+var css_248z = "/* Styles applied to the root element dependent on density */\n.salt-density-high {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n\n  --formField-helperText-background-offset-height: 17px;\n}\n.salt-density-medium {\n  --formField-helperText-marginTop-default: 2px;\n  --formField-helperText-marginTop-fullWidth: 3px;\n  --formField-helperText-transform: translate(0, 2px);\n\n  --formField-helperText-background-offset-height: 19px;\n}\n.salt-density-touch {\n  --formField-helperText-marginTop-default: 8px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, -3px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n.salt-density-low {\n  --formField-helperText-marginTop-default: 4px;\n  --formField-helperText-marginTop-fullWidth: 5px;\n  --formField-helperText-transform: translate(0, 1px);\n\n  --formField-helperText-background-offset-height: 21px;\n}\n\n/* Class applied if `fullWidth={true}` */\n.saltFormField-fullWidth {\n  --formField-helperText-transform: none;\n}\n\n/* Class applied to the helper text container */\n.saltFormHelperText {\n  --formField-helperText-opacity: 1;\n\n  color: var(--saltFormField-helperText-color, var(--salt-text-secondary-foreground));\n  font-size: var(--formField-helperText-fontSize);\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n  letter-spacing: var(--saltFormField-helperText-letterSpacing, 0);\n  line-height: var(--saltFormField-helperText-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltFormField-helperText-minHeight, var(--salt-text-label-minHeight));\n  margin-bottom: var(--saltFormField-helperText-marginBottom, 0);\n  margin-top: var(--saltFormField-helperText-marginTop, var(--formField-helperText-marginTop));\n  opacity: var(--saltFormField-helperText-opacity, var(--formField-helperText-opacity));\n  padding-left: var(--saltFormField-helperText-paddingLeft, var(--salt-size-unit));\n  padding-right: var(--saltFormField-helperText-paddingRight, var(--salt-size-unit));\n  transform: var(--saltFormField-helperText-transform, var(--formField-helperText-transform, none));\n}\n";
 styleInject(css_248z);
 export { css_248z as default };

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

@@ -9,7 +9,7 @@ const FormHelperText = ({
   if (helperText) {
     if (helperTextPlacement === "bottom") {
       return /* @__PURE__ */ jsx("p", {
-        className: `saltFormFieldHelperText`,
+        className: "saltFormHelperText",
         ...restProps,
         children: helperText
       });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FormHelperText.js","sources":["../src/form-field/FormHelperText.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport { FormFieldProps } from \"./FormField\";\n\nimport \"./FormHelperText.css\";\n\nexport type FormHelperTextProps<E extends React.ElementType = \"p\"> =\n ComponentPropsWithoutRef<E> & {\n helperText: FormFieldProps[\"helperText\"];\n helperTextPlacement: FormFieldProps[\"helperTextPlacement\"];\n };\n\nexport const FormHelperText = <E extends React.ElementType = \"p\">({\n helperText,\n helperTextPlacement,\n ...restProps\n}: FormHelperTextProps<E>) => {\n if (helperText) {\n if (helperTextPlacement === \"bottom\") {\n return (\n <p className~~={`saltFormFieldHelperText`}~~ {...restProps}>\n {helperText}\n </p>\n );\n } else if (helperTextPlacement === \"tooltip\") {\n console.warn(\"helperTextPlacement tooltip has not yet implemented\");\n return null;\n } else {\n return null;\n }\n } else {\n return null;\n }\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,iBAAiB,CAAoC;AAAA,EAChE,UAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,SAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,IAAI,wBAAwB,QAAU,EAAA;AACpC,MAAA,uBACG,GAAA,CAAA,GAAA,EAAA;AAAA,QAAE,~~SAAW~~,EAAA,~~CAAA,uBAAA,CAAA~~;AAAA,~~QAA4B~~,GAAG,SAAA;AAAA,~~QAC1C~~,QAAA,EAAA,UAAA;AAAA,OACH,CAAA,CAAA;AAAA,KAEJ,MAAA,IAAW,wBAAwB,SAAW,EAAA;AAC5C,MAAA,OAAA,CAAQ,KAAK,qDAAqD,CAAA,CAAA;AAClE,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}
1	+ {"version":3,"file":"FormHelperText.js","sources":["../src/form-field/FormHelperText.tsx"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\nimport { FormFieldProps } from \"./FormField\";\n\nimport \"./FormHelperText.css\";\n\nexport type FormHelperTextProps<E extends React.ElementType = \"p\"> =\n ComponentPropsWithoutRef<E> & {\n helperText: FormFieldProps[\"helperText\"];\n helperTextPlacement: FormFieldProps[\"helperTextPlacement\"];\n };\n\nexport const FormHelperText = <E extends React.ElementType = \"p\">({\n helperText,\n helperTextPlacement,\n ...restProps\n}: FormHelperTextProps<E>) => {\n if (helperText) {\n if (helperTextPlacement === \"bottom\") {\n return (\n <p className=\"saltFormHelperText\" {...restProps}>\n {helperText}\n </p>\n );\n } else if (helperTextPlacement === \"tooltip\") {\n console.warn(\"helperTextPlacement tooltip has not yet implemented\");\n return null;\n } else {\n return null;\n }\n } else {\n return null;\n }\n};\n"],"names":[],"mappings":";;;AAWO,MAAM,iBAAiB,CAAoC;AAAA,EAChE,UAAA;AAAA,EACA,mBAAA;AAAA,EACG,GAAA,SAAA;AACL,CAA8B,KAAA;AAC5B,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,IAAI,wBAAwB,QAAU,EAAA;AACpC,MAAA,uBACG,GAAA,CAAA,GAAA,EAAA;AAAA,QAAE,SAAU,EAAA,oBAAA;AAAA,QAAsB,GAAG,SAAA;AAAA,QACnC,QAAA,EAAA,UAAA;AAAA,OACH,CAAA,CAAA;AAAA,KAEJ,MAAA,IAAW,wBAAwB,SAAW,EAAA;AAC5C,MAAA,OAAA,CAAQ,KAAK,qDAAqD,CAAA,CAAA;AAClE,MAAO,OAAA,IAAA,CAAA;AAAA,KACF,MAAA;AACL,MAAO,OAAA,IAAA,CAAA;AAAA,KACT;AAAA,GACK,MAAA;AACL,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AACF;;;;"}

package/dist-es/packages/lab/src/form-field-context/FormFieldContextNext.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { createContext } from '@salt-ds/core';
+const FormFieldContextNext = createContext(
+  "FormFieldContext",
+  {}
+);
+export { FormFieldContextNext };
+//# sourceMappingURL=FormFieldContextNext.js.map

package/dist-es/packages/lab/src/form-field-context/FormFieldContextNext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormFieldContextNext.js","sources":["../src/form-field-context/FormFieldContextNext.ts"],"sourcesContent":["import { createContext } from \"@salt-ds/core\";\nimport { a11yValueAriaProps } from \"../form-field-next\";\n\nexport interface FormFieldContextNextValue {\n a11yProps: a11yValueAriaProps;\n disabled: boolean;\n readOnly: boolean;\n validationStatus: \"error\" | \"warning\" | \"success\" | undefined;\n}\n\nexport const FormFieldContextNext = createContext(\n \"FormFieldContext\",\n {} as FormFieldContextNextValue\n);\n"],"names":[],"mappings":";;AAUO,MAAM,oBAAuB,GAAA,aAAA;AAAA,EAClC,kBAAA;AAAA,EACA,EAAC;AACH;;;;"}

package/dist-es/packages/lab/src/form-field-context/useFormFieldPropsNext.js ADDED Viewed

@@ -0,0 +1,9 @@
+import { useContext } from 'react';
+import { FormFieldContextNext } from './FormFieldContextNext.js';
+function useFormFieldPropsNext() {
+  return useContext(FormFieldContextNext) || {};
+}
+export { useFormFieldPropsNext };
+//# sourceMappingURL=useFormFieldPropsNext.js.map

package/dist-es/packages/lab/src/form-field-context/useFormFieldPropsNext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useFormFieldPropsNext.js","sources":["../src/form-field-context/useFormFieldPropsNext.ts"],"sourcesContent":["import { useContext } from \"react\";\nimport {\n FormFieldContextNext,\n FormFieldContextNextValue,\n} from \"./FormFieldContextNext\";\n\nexport function useFormFieldPropsNext(): Partial<FormFieldContextNextValue> {\n return useContext(FormFieldContextNext) || {};\n}\n"],"names":[],"mappings":";;;AAMO,SAAS,qBAA4D,GAAA;AAC1E,EAAO,OAAA,UAAA,CAAW,oBAAoB,CAAA,IAAK,EAAC,CAAA;AAC9C;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.css.js ADDED Viewed

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+var css_248z = ".saltFormFieldControlWrapper {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(min-content, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-size-unit);\n}\n";
+styleInject(css_248z);
+export { css_248z as default };
+//# sourceMappingURL=FormFieldControlWrapper.css.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.css.js.map ADDED Viewed

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

package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.js ADDED Viewed

@@ -0,0 +1,12 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import './FormFieldControlWrapper.css.js';
+const withBaseName = makePrefixer("saltFormFieldControlWrapper");
+const FormFieldControlWrapper = ({ children }) => /* @__PURE__ */ jsx("div", {
+  className: withBaseName(),
+  children
+});
+export { FormFieldControlWrapper };
+//# sourceMappingURL=FormFieldControlWrapper.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldControlWrapper.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormFieldControlWrapper.js","sources":["../src/form-field-next/FormFieldControlWrapper.tsx"],"sourcesContent":["import { PropsWithChildren } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./FormFieldControlWrapper.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldControlWrapper\");\n\nexport const FormFieldControlWrapper = ({ children }: PropsWithChildren) => (\n <div className={withBaseName()}>{children}</div>\n);\n"],"names":[],"mappings":";;;;AAKA,MAAM,YAAA,GAAe,aAAa,6BAA6B,CAAA,CAAA;AAExD,MAAM,uBAA0B,GAAA,CAAC,EAAE,QAAA,uBACvC,GAAA,CAAA,KAAA,EAAA;AAAA,EAAI,WAAW,YAAa,EAAA;AAAA,EAAI,QAAA;AAAA,CAAS;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.css.js ADDED Viewed

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+var css_248z = ".saltFormFieldHelperText {\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n}\n\n.saltFormFieldHelperText .saltText {\n  font-style: var(--saltFormField-helperText-fontStyle, var(--salt-editable-help-fontStyle));\n}\n\n.saltFormFieldHelperText-withValidation {\n  column-gap: var(--salt-size-adornmentGap);\n}\n";
+styleInject(css_248z);
+export { css_248z as default };
+//# sourceMappingURL=FormFieldHelperText.css.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.css.js.map ADDED Viewed

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

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.js ADDED Viewed

@@ -0,0 +1,39 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { makePrefixer, StatusIndicator, Text } from '@salt-ds/core';
+import '../form-field-context/FormFieldContext.js';
+import '../form-field-context/FormFieldContextNext.js';
+import 'react';
+import { useFormFieldPropsNext } from '../form-field-context/useFormFieldPropsNext.js';
+import './FormFieldHelperText.css.js';
+const withBaseName = makePrefixer("saltFormFieldHelperText");
+const FormFieldHelperText = ({
+  className,
+  children,
+  ...restProps
+}) => {
+  const { disabled, readOnly, validationStatus } = useFormFieldPropsNext();
+  return /* @__PURE__ */ jsxs("div", {
+    className: clsx(
+      withBaseName(),
+      { [withBaseName("withValidation")]: validationStatus },
+      className
+    ),
+    children: [
+      !disabled && !readOnly && validationStatus && /* @__PURE__ */ jsx(StatusIndicator, {
+        status: validationStatus
+      }),
+      /* @__PURE__ */ jsx(Text, {
+        disabled,
+        variant: "secondary",
+        styleAs: "label",
+        ...restProps,
+        children
+      })
+    ]
+  });
+};
+export { FormFieldHelperText };
+//# sourceMappingURL=FormFieldHelperText.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldHelperText.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormFieldHelperText.js","sources":["../src/form-field-next/FormFieldHelperText.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { makePrefixer, StatusIndicator, Text, TextProps } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./FormFieldHelperText.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldHelperText\");\n\nexport const FormFieldHelperText = ({\n className,\n children,\n ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n const { disabled, readOnly, validationStatus } = useFormFieldPropsNext();\n\n return (\n <div\n className={clsx(\n withBaseName(),\n { [withBaseName(\"withValidation\")]: validationStatus },\n className\n )}\n >\n {!disabled && !readOnly && validationStatus && (\n <StatusIndicator status={validationStatus} />\n )}\n <Text\n disabled={disabled}\n variant=\"secondary\"\n styleAs=\"label\"\n {...restProps}\n >\n {children}\n </Text>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,yBAAyB,CAAA,CAAA;AAEpD,MAAM,sBAAsB,CAAC;AAAA,EAClC,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAA,MAAM,EAAE,QAAA,EAAU,QAAU,EAAA,gBAAA,KAAqB,qBAAsB,EAAA,CAAA;AAEvE,EAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,IACC,SAAW,EAAA,IAAA;AAAA,MACT,YAAa,EAAA;AAAA,MACb,EAAE,CAAC,YAAa,CAAA,gBAAgB,IAAI,gBAAiB,EAAA;AAAA,MACrD,SAAA;AAAA,KACF;AAAA,IAEC,QAAA,EAAA;AAAA,MAAA,CAAC,QAAY,IAAA,CAAC,QAAY,IAAA,gBAAA,oBACxB,GAAA,CAAA,eAAA,EAAA;AAAA,QAAgB,MAAQ,EAAA,gBAAA;AAAA,OAAkB,CAAA;AAAA,sBAE5C,GAAA,CAAA,IAAA,EAAA;AAAA,QACC,QAAA;AAAA,QACA,OAAQ,EAAA,WAAA;AAAA,QACR,OAAQ,EAAA,OAAA;AAAA,QACP,GAAG,SAAA;AAAA,QAEH,QAAA;AAAA,OACH,CAAA;AAAA,KAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.css.js ADDED Viewed

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+var css_248z = ".saltFormFieldLabel.saltText {\n  align-self: center;\n  font-weight: var(--saltFormField-label-fontWeight, var(--salt-text-fontWeight-strong));\n  width: 100%;\n}\n\n.saltFormFieldLabel:hover + .saltFormFieldNext-controls * {\n  --inputNext-borderColor: var(--inputNext-borderColor-hover);\n}\n";
+styleInject(css_248z);
+export { css_248z as default };
+//# sourceMappingURL=FormFieldLabel.css.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.css.js.map ADDED Viewed

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

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.js ADDED Viewed

@@ -0,0 +1,28 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { makePrefixer, Label } from '@salt-ds/core';
+import '../form-field-context/FormFieldContext.js';
+import '../form-field-context/FormFieldContextNext.js';
+import 'react';
+import { useFormFieldPropsNext } from '../form-field-context/useFormFieldPropsNext.js';
+import './FormFieldLabel.css.js';
+const withBaseName = makePrefixer("saltFormFieldLabel");
+const FormFieldLabel = ({
+  className,
+  children,
+  ...restProps
+}) => {
+  const { disabled } = useFormFieldPropsNext();
+  return /* @__PURE__ */ jsx(Label, {
+    as: "label",
+    className: clsx(withBaseName(), className),
+    disabled,
+    variant: "secondary",
+    ...restProps,
+    children
+  });
+};
+export { FormFieldLabel };
+//# sourceMappingURL=FormFieldLabel.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldLabel.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormFieldLabel.js","sources":["../src/form-field-next/FormFieldLabel.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { Label, makePrefixer, TextProps } from \"@salt-ds/core\";\nimport { useFormFieldPropsNext } from \"../form-field-context\";\n\nimport \"./FormFieldLabel.css\";\n\nconst withBaseName = makePrefixer(\"saltFormFieldLabel\");\n\nexport const FormFieldLabel = ({\n className,\n children,\n ...restProps\n}: Omit<TextProps<\"label\">, \"variant\" | \"styleAs\">) => {\n const { disabled } = useFormFieldPropsNext();\n\n return (\n <Label\n as=\"label\"\n className={clsx(withBaseName(), className)}\n disabled={disabled}\n variant=\"secondary\"\n {...restProps}\n >\n {children}\n </Label>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA,CAAA;AAE/C,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA;AAAA,EACA,QAAA;AAAA,EACG,GAAA,SAAA;AACL,CAAuD,KAAA;AACrD,EAAM,MAAA,EAAE,QAAS,EAAA,GAAI,qBAAsB,EAAA,CAAA;AAE3C,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,IACC,EAAG,EAAA,OAAA;AAAA,IACH,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IACzC,QAAA;AAAA,IACA,OAAQ,EAAA,WAAA;AAAA,IACP,GAAG,SAAA;AAAA,IAEH,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ;;;;"}

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.css.js ADDED Viewed

@@ -0,0 +1,7 @@
+import styleInject from '../../../../node_modules/style-inject/dist/style-inject.es.js';
+var css_248z = ".saltFormFieldNext {\n  display: inline-grid;\n  position: relative;\n  column-gap: var(--salt-size-adornmentGap);\n  row-gap: var(--salt-size-adornmentGap);\n  vertical-align: top;\n  width: var(--saltFormFieldNext-width, 100%);\n}\n\n.saltFormFieldNext-labelLeft {\n  align-self: center;\n  grid-template-columns: 40% 1fr;\n}\n\n.saltFormFieldNext-labelTop {\n}\n\n.saltFormFieldNext-controls {\n  align-items: center;\n  display: grid;\n  grid-auto-columns: minmax(0, 1fr);\n  grid-auto-flow: column;\n  grid-column-gap: var(--salt-size-adornmentGap);\n}\n\n.saltFormFieldNext > * {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldNext > .saltFormFieldLabel {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldNext-labelLeft > * {\n  grid-row-start: 1;\n  grid-row-end: 2;\n}\n\n.saltFormFieldNext > .saltFormFieldHelperText {\n  grid-row-start: 3;\n  grid-row-end: 4;\n}\n\n.saltFormFieldNext.saltFormFieldNext-labelLeft > .saltFormFieldHelperText {\n  grid-row-start: 2;\n  grid-row-end: 3;\n}\n\n.saltFormFieldNext-labelLeft > .saltFormFieldLabel ~ * {\n  grid-column-start: 2;\n  grid-column-end: 2;\n}\n\n.saltFormFieldNext-disabled .saltInputNext-focused {\n  outline: none;\n}\n";
+styleInject(css_248z);
+export { css_248z as default };
+//# sourceMappingURL=FormFieldNext.css.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.css.js.map ADDED Viewed

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

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.js ADDED Viewed

@@ -0,0 +1,53 @@
+import { jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { makePrefixer, useId, capitalize } from '@salt-ds/core';
+import '../form-field-context/FormFieldContext.js';
+import { FormFieldContextNext } from '../form-field-context/FormFieldContextNext.js';
+import './FormFieldNext.css.js';
+const withBaseName = makePrefixer("saltFormFieldNext");
+const FormField = forwardRef(
+  ({
+    children,
+    className,
+    disabled = false,
+    labelPlacement = "top",
+    onBlur,
+    onFocus,
+    readOnly = false,
+    id: idProp,
+    validationStatus,
+    ...restProps
+  }, ref) => {
+    const labelId = useId();
+    const helperTextId = useId();
+    const a11yProps = useMemo(
+      () => ({
+        "aria-labelledby": labelId,
+        "aria-describedby": helperTextId
+      }),
+      [labelId, helperTextId]
+    );
+    return /* @__PURE__ */ jsx("div", {
+      ref,
+      className: clsx(
+        withBaseName(),
+        {
+          [withBaseName("disabled")]: disabled,
+          [withBaseName("readOnly")]: readOnly,
+          [withBaseName(`label${capitalize(labelPlacement)}`)]: labelPlacement
+        },
+        className
+      ),
+      ...restProps,
+      children: /* @__PURE__ */ jsx(FormFieldContextNext.Provider, {
+        value: { a11yProps, disabled, readOnly, validationStatus },
+        children
+      })
+    });
+  }
+);
+export { FormField };
+//# sourceMappingURL=FormFieldNext.js.map

package/dist-es/packages/lab/src/form-field-next/FormFieldNext.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"FormFieldNext.js","sources":["../src/form-field-next/FormFieldNext.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { ForwardedRef, forwardRef, HTMLAttributes, useMemo } from \"react\";\nimport { makePrefixer, useId, capitalize } from \"@salt-ds/core\";\nimport { FormFieldContextNext } from \"../form-field-context\";\n\nimport \"./FormFieldNext.css\";\n\nexport type FormFieldLabelPlacement = \"top\" | \"left\";\n\nexport interface FormFieldProps\n extends HTMLAttributes<HTMLDivElement>,\n A11yValueProps {\n /**\n * Disabled prop\n */\n disabled?: boolean;\n /**\n * Location of the label, values: 'top' (default) or 'left'\n */\n labelPlacement?: FormFieldLabelPlacement;\n /**\n * Readonly prop\n */\n readOnly?: boolean;\n /**\n * Optional id prop\n */\n id?: string;\n /**\n * Validation status\n */\n validationStatus?: \"error\" | \"warning\" | \"success\";\n}\n\nexport interface A11yValueProps {\n /**\n * id for FormFieldHelperText\n */\n helperTextId?: string;\n /**\n * id for FormFieldLabel\n */\n labelId?: string;\n}\nexport interface a11yValueAriaProps {\n \"aria-labelledby\": A11yValueProps[\"labelId\"];\n \"aria-describedby\": A11yValueProps[\"helperTextId\"] | undefined;\n}\n\nconst withBaseName = makePrefixer(\"saltFormFieldNext\");\n\nexport const FormField = forwardRef(\n (\n {\n children,\n className,\n disabled = false,\n labelPlacement = \"top\",\n onBlur,\n onFocus,\n readOnly = false,\n id: idProp,\n validationStatus,\n ...restProps\n }: FormFieldProps,\n ref: ForwardedRef<HTMLDivElement>\n ) => {\n const labelId = useId();\n const helperTextId = useId();\n\n const a11yProps = useMemo(\n () => ({\n \"aria-labelledby\": labelId,\n \"aria-describedby\": helperTextId,\n }),\n [labelId, helperTextId]\n );\n\n return (\n <div\n ref={ref}\n className={clsx(\n withBaseName(),\n {\n [withBaseName(\"disabled\")]: disabled,\n [withBaseName(\"readOnly\")]: readOnly,\n [withBaseName(`label${capitalize(labelPlacement)}`)]:\n labelPlacement,\n },\n className\n )}\n {...restProps}\n >\n <FormFieldContextNext.Provider\n value={{ a11yProps, disabled, readOnly, validationStatus }}\n >\n {children}\n </FormFieldContextNext.Provider>\n </div>\n );\n }\n);\n"],"names":[],"mappings":";;;;;;;;AAiDA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA,CAAA;AAE9C,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,CACE;AAAA,IACE,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,cAAiB,GAAA,KAAA;AAAA,IACjB,MAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAW,GAAA,KAAA;AAAA,IACX,EAAI,EAAA,MAAA;AAAA,IACJ,gBAAA;AAAA,IACG,GAAA,SAAA;AAAA,KAEL,GACG,KAAA;AACH,IAAA,MAAM,UAAU,KAAM,EAAA,CAAA;AACtB,IAAA,MAAM,eAAe,KAAM,EAAA,CAAA;AAE3B,IAAA,MAAM,SAAY,GAAA,OAAA;AAAA,MAChB,OAAO;AAAA,QACL,iBAAmB,EAAA,OAAA;AAAA,QACnB,kBAAoB,EAAA,YAAA;AAAA,OACtB,CAAA;AAAA,MACA,CAAC,SAAS,YAAY,CAAA;AAAA,KACxB,CAAA;AAEA,IAAA,uBACG,GAAA,CAAA,KAAA,EAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb;AAAA,UACE,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,UAAU,CAAI,GAAA,QAAA;AAAA,UAC5B,CAAC,YAAa,CAAA,CAAA,KAAA,EAAQ,UAAW,CAAA,cAAc,GAAG,CAChD,GAAA,cAAA;AAAA,SACJ;AAAA,QACA,SAAA;AAAA,OACF;AAAA,MACC,GAAG,SAAA;AAAA,MAEJ,QAAA,kBAAA,GAAA,CAAC,qBAAqB,QAArB,EAAA;AAAA,QACC,KAAO,EAAA,EAAE,SAAW,EAAA,QAAA,EAAU,UAAU,gBAAiB,EAAA;AAAA,QAExD,QAAA;AAAA,OACH,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

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

@@ -78,12 +78,19 @@ export { FileDropZone } from './file-drop-zone/FileDropZone.js';
 export { createFileTypeValidator, createTotalSizeValidator } from './file-drop-zone/validators.js';
 export { FormField, useFormField } from './form-field/FormField.js';
 export { FormLabel } from './form-field/FormLabel.js';
+export { FormFieldControlWrapper } from './form-field-next/FormFieldControlWrapper.js';
+export { FormField as FormFieldNext } from './form-field-next/FormFieldNext.js';
+export { FormFieldHelperText } from './form-field-next/FormFieldHelperText.js';
+export { FormFieldLabel } from './form-field-next/FormFieldLabel.js';
 export { FormFieldContext } from './form-field-context/FormFieldContext.js';
+export { FormFieldContextNext } from './form-field-context/FormFieldContextNext.js';
 export { useFormFieldProps } from './form-field-context/useFormFieldProps.js';
+export { useFormFieldPropsNext } from './form-field-context/useFormFieldPropsNext.js';
 export { FormGroup } from './form-group/FormGroup.js';
 export { FormattedInput } from './formatted-input/FormattedInput.js';
 export { Input } from './input/Input.js';
 export { StaticInputAdornment } from './input/StaticInputAdornment.js';
+export { Input as InputNext } from './input-next/InputNext.js';
 export { LAYER_POSITIONS, LayerLayout } from './layer-layout/LayerLayout.js';
 export { Highlighter } from './list/Highlighter.js';
 export { ListItem, ListItemProxy } from './list/ListItem.js';

package/dist-es/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-es/packages/lab/src/input/Input.js CHANGED Viewed

@@ -3,6 +3,7 @@ import { clsx } from 'clsx';
 import { forwardRef, useState, useRef } from 'react';
 import { makePrefixer, useForkRef, useControlled } from '@salt-ds/core';
 import '../form-field-context/FormFieldContext.js';
+import '../form-field-context/FormFieldContextNext.js';
 import { useFormFieldProps } from '../form-field-context/useFormFieldProps.js';
 import { useCursorOnFocus } from './useCursorOnFocus.js';
 import './Input.css.js';

package/dist-es/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":["Input","value"],"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":["Input","value"],"mappings":"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"}

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

@@ -0,0 +1,7 @@
+import styleInject from '../../../../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-borderColor-hover: var(--salt-editable-borderColor-hover);\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(--inputNext-borderColor-hover);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-hover);\n  --inputNext-cursor: var(--salt-editable-cursor-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  --inputNext-cursor: var(--salt-editable-cursor-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 input if `validationState=\"error\"` */\n.saltInputNext-error,\n.saltInputNext-error:hover {\n  --inputNext-background: var(--salt-status-error-background);\n  --inputNext-outlineColor: var(--salt-status-error-borderColor);\n  --inputNext-borderColor: var(--salt-status-error-borderColor);\n  --inputNext-borderColor-hover: var(--salt-status-error-borderColor);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltInputNext-warning,\n.saltInputNext-warning:hover {\n  --inputNext-background: var(--salt-status-warning-background);\n  --inputNext-outlineColor: var(--salt-status-warning-borderColor);\n  --inputNext-borderColor: var(--salt-status-warning-borderColor);\n  --inputNext-borderColor-hover: var(--salt-status-warning-borderColor);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltInputNext-success,\n.saltInputNext-success:hover {\n  --inputNext-background: var(--salt-status-success-background);\n  --inputNext-outlineColor: var(--salt-status-success-borderColor);\n  --inputNext-borderColor: var(--salt-status-success-borderColor);\n  --inputNext-borderColor-hover: var(--salt-status-success-borderColor);\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, var(--inputNext-cursor));\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/* Reset in the next class */\n.saltInputNext-input:focus {\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/* Styling when focused */\n.saltInputNext-focused {\n  --inputNext-outlineColor: var(--salt-focused-outlineColor);\n\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(--inputNext-outlineColor));\n  outline-offset: var(--saltInputNext-focused-outlineOffset, var(--salt-focused-outlineOffset));\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-borderColor-hover: var(--salt-editable-borderColor-readonly);\n  --inputNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --inputNext-cursor: var(--salt-editable-cursor-readonly);\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 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-borderColor-hover: 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\n/* Style applied to input if adornment provided */\n.saltInputNext-withAdornment {\n  padding-right: var(--salt-size-adornmentGap);\n}\n\n/* Style applied to start adornments */\n.saltInputNext-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-size-adornmentGap);\n  column-gap: var(--salt-size-adornmentGap);\n}\n\n/* Style applied to end adornments */\n.saltInputNext-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-size-adornmentGap);\n  column-gap: var(--salt-size-adornmentGap);\n}\n";
+styleInject(css_248z);
+export { css_248z as default };
+//# sourceMappingURL=InputNext.css.js.map

package/dist-es/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":";;;;;;;"}