@salt-ds/lab 1.0.0-alpha.51 → 1.0.0-alpha.53

package/dist-es/stepped-tracker/TrackerStep/TrackerStep.js.map

@@ -1 +1 @@
-{"version":3,"file":"TrackerStep.js","sources":["../src/stepped-tracker/TrackerStep/TrackerStep.tsx"],"sourcesContent":["import { type ValidationStatus, makePrefixer } from \"@salt-ds/core\";\nimport {\n  ErrorSolidIcon,\n  StepActiveIcon,\n  StepDefaultIcon,\n  StepSuccessIcon,\n  WarningSolidIcon,\n} from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { TrackerConnector } from \"../TrackerConnector\";\n\nimport {\n  useSteppedTrackerContext,\n  useTrackerStepContext,\n} from \"../SteppedTrackerContext\";\n\nimport trackerStepCss from \"./TrackerStep.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerStep\");\n\ntype StageOptions = \"pending\" | \"completed\";\ntype StatusOptions = Extract<ValidationStatus, \"warning\" | \"error\">;\n\nexport interface TrackerStepProps extends ComponentPropsWithoutRef<\"li\"> {\n  /**\n   * The stage of the step: \"pending\" or \"completed\" (note, \"active\" is derived from \"activeStep\" in parent SteppedTracker component)\n   */\n  stage?: StageOptions;\n  /**\n   * The status of the step: warning or error\n   *\n   * If the stage is completed or active, the status prop will be ignored\n   */\n  status?: StatusOptions;\n}\n\nconst iconMap = {\n  pending: StepDefaultIcon,\n  active: StepActiveIcon,\n  completed: StepSuccessIcon,\n  warning: WarningSolidIcon,\n  error: ErrorSolidIcon,\n};\n\nconst useCheckWithinSteppedTracker = (isWithinSteppedTracker: boolean) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!isWithinSteppedTracker) {\n        console.error(\n          \"The TrackerStep component must be placed within a SteppedTracker component\",\n        );\n      }\n    }\n  }, [isWithinSteppedTracker]);\n};\n\nconst parseIconName = ({\n  stage,\n  status,\n  active,\n}: {\n  stage: StageOptions;\n  status?: StatusOptions;\n  active: boolean;\n}) => {\n  if (stage === \"completed\") return \"completed\";\n  if (active) return \"active\";\n  if (status) return status;\n  return stage;\n};\n\nexport const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(\n  function TrackerStep(props, ref) {\n    const {\n      stage = \"pending\",\n      status,\n      style,\n      className,\n      children,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tracker-step\",\n      css: trackerStepCss,\n      window: targetWindow,\n    });\n\n    const { activeStep, totalSteps, isWithinSteppedTracker } =\n      useSteppedTrackerContext();\n    const stepNumber = useTrackerStepContext();\n\n    useCheckWithinSteppedTracker(isWithinSteppedTracker);\n\n    const isActive = activeStep === stepNumber;\n    const iconName = parseIconName({ stage, status, active: isActive });\n\n    const Icon = iconMap[iconName];\n    const connectorState = activeStep > stepNumber ? \"active\" : \"default\";\n    const hasConnector = stepNumber < totalSteps - 1;\n\n    const innerStyle = {\n      ...style,\n      \"--saltTrackerStep-width\": `${100 / totalSteps}%`,\n    };\n\n    return (\n      <li\n        className={clsx(\n          withBaseName(),\n          withBaseName(`stage-${stage}`),\n          withBaseName(`status-${status}`),\n          { [withBaseName(\"active\")]: isActive },\n          className,\n        )}\n        style={innerStyle}\n        aria-current={isActive ? \"step\" : undefined}\n        ref={ref}\n        {...restProps}\n      >\n        <Icon />\n        {hasConnector && <TrackerConnector state={connectorState} />}\n        <div className={withBaseName(\"body\")}>{children}</div>\n      </li>\n    );\n  },\n);\n"],"names":["TrackerStep","trackerStepCss"],"mappings":"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"}
+{"version":3,"file":"TrackerStep.js","sources":["../src/stepped-tracker/TrackerStep/TrackerStep.tsx"],"sourcesContent":["import { type ValidationStatus, makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type ComponentPropsWithoutRef, forwardRef, useEffect } from \"react\";\nimport { TrackerConnector } from \"../TrackerConnector\";\n\nimport {\n  useSteppedTrackerContext,\n  useTrackerStepContext,\n} from \"../SteppedTrackerContext\";\n\nimport trackerStepCss from \"./TrackerStep.css\";\n\nconst withBaseName = makePrefixer(\"saltTrackerStep\");\n\ntype StageOptions = \"pending\" | \"completed\";\ntype StatusOptions = Extract<ValidationStatus, \"warning\" | \"error\">;\n\nexport interface TrackerStepProps extends ComponentPropsWithoutRef<\"li\"> {\n  /**\n   * The stage of the step: \"pending\" or \"completed\" (note, \"active\" is derived from \"activeStep\" in parent SteppedTracker component)\n   */\n  stage?: StageOptions;\n  /**\n   * The status of the step: warning or error\n   *\n   * If the stage is completed or active, the status prop will be ignored\n   */\n  status?: StatusOptions;\n}\n\nconst useCheckWithinSteppedTracker = (isWithinSteppedTracker: boolean) => {\n  useEffect(() => {\n    if (process.env.NODE_ENV !== \"production\") {\n      if (!isWithinSteppedTracker) {\n        console.error(\n          \"The TrackerStep component must be placed within a SteppedTracker component\",\n        );\n      }\n    }\n  }, [isWithinSteppedTracker]);\n};\n\nconst parseIconName = ({\n  stage,\n  status,\n  active,\n}: {\n  stage: StageOptions;\n  status?: StatusOptions;\n  active: boolean;\n}) => {\n  if (stage === \"completed\") return \"completed\";\n  if (active) return \"active\";\n  if (status) return status;\n  return stage;\n};\n\nexport const TrackerStep = forwardRef<HTMLLIElement, TrackerStepProps>(\n  function TrackerStep(props, ref) {\n    const {\n      stage = \"pending\",\n      status,\n      style,\n      className,\n      children,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-tracker-step\",\n      css: trackerStepCss,\n      window: targetWindow,\n    });\n    const { ErrorIcon, WarningIcon, CompletedIcon, ActiveIcon, PendingIcon } =\n      useIcon();\n    const { activeStep, totalSteps, isWithinSteppedTracker } =\n      useSteppedTrackerContext();\n    const stepNumber = useTrackerStepContext();\n\n    useCheckWithinSteppedTracker(isWithinSteppedTracker);\n\n    const isActive = activeStep === stepNumber;\n    const iconName = parseIconName({ stage, status, active: isActive });\n    const iconMap = {\n      pending: PendingIcon,\n      active: ActiveIcon,\n      completed: CompletedIcon,\n      warning: WarningIcon,\n      error: ErrorIcon,\n    };\n\n    const Icon = iconMap[iconName];\n    const connectorState = activeStep > stepNumber ? \"active\" : \"default\";\n    const hasConnector = stepNumber < totalSteps - 1;\n\n    const innerStyle = {\n      ...style,\n      \"--saltTrackerStep-width\": `${100 / totalSteps}%`,\n    };\n\n    return (\n      <li\n        className={clsx(\n          withBaseName(),\n          withBaseName(`stage-${stage}`),\n          withBaseName(`status-${status}`),\n          { [withBaseName(\"active\")]: isActive },\n          className,\n        )}\n        style={innerStyle}\n        aria-current={isActive ? \"step\" : undefined}\n        ref={ref}\n        {...restProps}\n      >\n        <Icon />\n        {hasConnector && <TrackerConnector state={connectorState} />}\n        <div className={withBaseName(\"body\")}>{children}</div>\n      </li>\n    );\n  },\n);\n"],"names":["TrackerStep","trackerStepCss"],"mappings":"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"}

package/dist-es/stepper-input/StepperInput.css.js

@@ -1,4 +1,4 @@
-var css_248z = "/* Styles applied to stepper container */\n.saltStepperInput {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: calc((var(--salt-size-base) - var(--salt-spacing-50)) * 0.5);\n  --saltButton-width: var(--salt-size-base);\n}\n";
+var css_248z = "/* Styles applied to stepper container */\n.saltStepperInput {\n  --stepperInput-border: none;\n  --stepperInput-borderColor: var(--salt-editable-borderColor);\n  --stepperInput-borderStyle: var(--salt-editable-borderStyle);\n  --stepperInput-outlineColor: var(--salt-focused-outlineColor);\n  --stepperInput-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  color: var(--salt-content-primary-foreground);\n  display: inline-flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  height: var(--salt-size-base);\n  line-height: var(--salt-text-lineHeight);\n  min-height: var(--salt-size-base);\n  min-width: 4em;\n  width: 100%;\n  box-sizing: border-box;\n\n  gap: var(--salt-spacing-50);\n}\n\n.saltStepperInput:hover {\n  --stepperInput-borderStyle: var(--salt-editable-borderStyle-hover);\n  --stepperInput-borderColor: var(--salt-editable-borderColor-hover);\n\n  background: var(--stepperInput-background-hover);\n  cursor: var(--salt-editable-cursor-hover);\n}\n\n.saltStepperInput:active {\n  --stepperInput-borderColor: var(--salt-editable-borderColor-active);\n  --stepperInput-borderStyle: var(--salt-editable-borderStyle-active);\n  --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n  background: var(--stepperInput-background-active);\n  cursor: var(--salt-editable-cursor-active);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltStepperInput-primary {\n  --stepperInput-background: var(--salt-editable-primary-background);\n  --stepperInput-background-active: var(--salt-editable-primary-background-active);\n  --stepperInput-background-hover: var(--salt-editable-primary-background-hover);\n  --stepperInput-background-disabled: var(--salt-editable-primary-background-disabled);\n  --stepperInput-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltStepperInput-secondary {\n  --stepperInput-background: var(--salt-editable-secondary-background);\n  --stepperInput-background-active: var(--salt-editable-secondary-background-active);\n  --stepperInput-background-hover: var(--salt-editable-secondary-background-active);\n  --stepperInput-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --stepperInput-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n\n/* Style applied to input if `validationState=\"error\"` */\n.saltStepperInput-error,\n.saltStepperInput-error:hover {\n  --stepperInput-background: var(--salt-status-error-background);\n  --stepperInput-background-active: var(--salt-status-error-background);\n  --stepperInput-background-hover: var(--salt-status-error-background);\n  --stepperInput-borderColor: var(--salt-status-error-borderColor);\n  --stepperInput-outlineColor: var(--salt-status-error-borderColor);\n  --stepperInput-background-readonly: var(--salt-status-error-background);\n}\n\n/* Style applied to input if `validationState=\"warning\"` */\n.saltStepperInput-warning,\n.saltStepperInput-warning:hover {\n  --stepperInput-background: var(--salt-status-warning-background);\n  --stepperInput-background-active: var(--salt-status-warning-background);\n  --stepperInput-background-hover: var(--salt-status-warning-background);\n  --stepperInput-borderColor: var(--salt-status-warning-borderColor);\n  --stepperInput-outlineColor: var(--salt-status-warning-borderColor);\n  --stepperInput-background-readonly: var(--salt-status-warning-background);\n}\n\n/* Style applied to input if `validationState=\"success\"` */\n.saltStepperInput-success,\n.saltStepperInput-success:hover {\n  --stepperInput-background: var(--salt-status-success-background);\n  --stepperInput-background-active: var(--salt-status-success-background);\n  --stepperInput-background-hover: var(--salt-status-success-background);\n  --stepperInput-borderColor: var(--salt-status-success-borderColor);\n  --stepperInput-outlineColor: var(--salt-status-success-borderColor);\n  --stepperInput-background-readonly: var(--salt-status-success-background);\n}\n\n.saltStepperInput-inputContainer {\n  display: flex;\n  background: var(--stepperInput-background);\n  border-radius: var(--salt-palette-corner-weak, 0);\n  border: var(--stepperInput-border);\n  box-sizing: border-box;\n  height: var(--salt-size-base);\n  min-height: var(--salt-size-base);\n  overflow: hidden;\n  padding-left: var(--salt-spacing-100);\n  padding-right: var(--salt-spacing-100);\n  position: relative;\n  flex-grow: 1;\n}\n\n/* Style applied to inner input component */\n.saltStepperInput-input {\n  background: none;\n  border: none;\n  box-sizing: content-box;\n  color: inherit;\n  cursor: inherit;\n  display: block;\n  flex: 1;\n  font: inherit;\n  height: 100%;\n  letter-spacing: var(--saltStepperInput-letterSpacing, 0);\n  margin: 0;\n  min-width: 0;\n  overflow: hidden;\n  padding: 0;\n  text-align: var(--stepperInput-textAlign);\n  width: 100%;\n}\n\n.saltStepperInput-input:focus {\n  outline: none;\n}\n\n/* Style applied to selected input */\n.saltStepperInput-input::selection {\n  background: var(--salt-content-foreground-highlight);\n}\n\n/* Style applied to placeholder text */\n.saltStepperInput-input::placeholder {\n  color: var(--salt-content-secondary-foreground);\n  font-weight: var(--salt-text-fontWeight-small);\n}\n\n/* Styling when focused */\n.saltStepperInput-focused {\n  --stepperInput-borderColor: var(--stepperInput-outlineColor);\n  --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltStepperInput-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--stepperInput-outlineColor));\n}\n\n/* Style applied if `readOnly={true}` */\n.saltStepperInput-readOnly {\n  --stepperInput-borderColor: var(--salt-editable-borderColor-readonly);\n  --stepperInput-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --stepperInput-borderWidth: var(--salt-size-border);\n\n  background: var(--stepperInput-background-readonly);\n  cursor: var(--salt-editable-cursor-readonly);\n}\n\n/* Styling when focused if `disabled={true}` */\n.saltStepperInput-focused.saltStepperInput-disabled {\n  --stepperInput-borderWidth: var(--salt-size-border);\n  outline: none;\n}\n\n/* Styling when focused if `readOnly={true}` */\n.saltStepperInput-focused.saltStepperInput-readOnly {\n  --stepperInput-borderWidth: var(--salt-size-border);\n}\n\n/* Style applied to selected input if `disabled={true}` */\n.saltStepperInput-disabled .saltStepperInput-input::selection {\n  background: none;\n}\n\n/* Style applied to input if `disabled={true}` */\n.saltStepperInput-disabled,\n.saltStepperInput-disabled:hover,\n.saltStepperInput-disabled:active {\n  --stepperInput-borderColor: var(--salt-editable-borderColor-disabled);\n  --stepperInput-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --stepperInput-borderWidth: var(--salt-size-border);\n\n  background: var(--stepperInput-background-disabled);\n  cursor: var(--salt-editable-cursor-disabled);\n  color: var(--saltStepperInput-color-disabled, var(--salt-content-primary-foreground-disabled));\n}\n\n.saltStepperInput-activationIndicator {\n  left: 0;\n  bottom: 0;\n  width: 100%;\n  position: absolute;\n  border-bottom: var(--stepperInput-borderWidth) var(--stepperInput-borderStyle) var(--stepperInput-borderColor);\n}\n\n/* Style applied if `bordered={true}` */\n.saltStepperInput-bordered {\n  --stepperInput-border: var(--salt-size-border) var(--salt-container-borderStyle) var(--stepperInput-borderColor);\n  --stepperInput-borderWidth: 0;\n}\n\n/* Style applied if focused or active when `bordered={true}` */\n.saltStepperInput-bordered.saltStepperInput-focused,\n.saltStepperInput-bordered:active {\n  --stepperInput-borderWidth: var(--salt-editable-borderWidth-active);\n}\n\n/* Styling when focused if `disabled={true}` or `readOnly={true}` when `bordered={true}` */\n.saltStepperInput-bordered.saltStepperInput-readOnly,\n.saltStepperInput-bordered.saltStepperInput-disabled:hover {\n  --stepperInput-borderWidth: 0;\n}\n\n/* Style applied to start adornments */\n.saltStepperInput-startAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-right: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n/* Style applied to end adornments */\n.saltStepperInput-endAdornmentContainer {\n  align-items: center;\n  display: inline-flex;\n  padding-left: var(--salt-spacing-100);\n  column-gap: var(--salt-spacing-100);\n}\n\n.saltStepperInput-readOnly .saltStepperInput-startAdornmentContainer {\n  margin-left: var(--salt-spacing-50);\n}\n\n.saltStepperInput-startAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltStepperInput-endAdornmentContainer .saltButton ~ .saltButton {\n  margin-left: calc(-1 * var(--salt-spacing-50));\n}\n\n.saltStepperInput-startAdornmentContainer .saltButton:first-child {\n  margin-left: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltStepperInput-endAdornmentContainer .saltButton:last-child {\n  margin-right: calc(var(--salt-spacing-50) * -1);\n}\n\n.saltStepperInput-startAdornmentContainer > .saltButton,\n.saltStepperInput-endAdornmentContainer > .saltButton {\n  --saltButton-padding: calc(var(--salt-spacing-50) - var(--salt-size-border));\n  --saltButton-height: calc(var(--salt-size-base) - var(--salt-spacing-100));\n  --saltButton-borderRadius: var(--salt-palette-corner-weaker);\n}\n\n.saltStepperInput-inputTextAlignLeft {\n  text-align: left;\n}\n\n.saltStepperInput-inputTextAlignCenter {\n  text-align: center;\n}\n\n.saltStepperInput-inputTextAlignRight {\n  text-align: right;\n}\n\n/* --- Buttons --- */\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  --stepperInput-buttonGap: var(--salt-size-border-strong);\n  display: flex;\n  flex-direction: column;\n  gap: var(--stepperInput-buttonGap);\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: calc((var(--salt-size-base) - var(--stepperInput-buttonGap)) * 0.5);\n  --saltButton-width: var(--salt-size-base);\n}\n\n.saltStepperInput-stepperButtonIncrement {\n  --saltButton-borderRadius: var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0) 0 0;\n}\n.saltStepperInput-stepperButtonDecrement {\n  --saltButton-borderRadius: 0 0 var(--salt-palette-corner-weak, 0) var(--salt-palette-corner-weak, 0);\n}\n";
 
 export { css_248z as default };
 //# sourceMappingURL=StepperInput.css.js.map

package/dist-es/stepper-input/StepperInput.js

@@ -1,60 +1,245 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { makePrefixer, Input, Button } from '@salt-ds/core';
-import { TriangleUpIcon, TriangleDownIcon } from '@salt-ds/icons';
+import { makePrefixer, useIcon, useFormFieldProps, useControlled, useForkRef, capitalize, StatusAdornment, Button } from '@salt-ds/core';
 import { useComponentCssInjection } from '@salt-ds/styles';
 import { useWindow } from '@salt-ds/window';
 import { clsx } from 'clsx';
-import { forwardRef, useRef } from 'react';
-import { useStepperInput } from './useStepperInput.js';
+import { forwardRef, useState, useRef } from 'react';
+import { toFixedDecimalPlaces, isOutOfRange, toFloat, isAllowedNonNumeric, sanitizedInput } from './internal/utils.js';
 import css_248z from './StepperInput.css.js';
+import { useStepperInput } from './useStepperInput.js';
 
 const withBaseName = makePrefixer("saltStepperInput");
 const StepperInput = forwardRef(
-  function StepperInput2(props, ref) {
-    const {
-      className,
-      hideButtons,
-      onBlur,
-      onChange,
-      onFocus,
-      readOnly,
-      ...rest
-    } = props;
+  function StepperInput2({
+    bordered,
+    className: classNameProp,
+    decimalPlaces = 0,
+    defaultValue: defaultValueProp,
+    disabled,
+    emptyReadOnlyMarker = "\u2014",
+    endAdornment,
+    hideButtons,
+    inputProps: inputPropsProp = {},
+    inputRef: inputRefProp,
+    max = Number.MAX_SAFE_INTEGER,
+    min = Number.MIN_SAFE_INTEGER,
+    onChange: onChangeProp,
+    placeholder,
+    readOnly: readOnlyProp,
+    startAdornment,
+    step = 1,
+    stepBlock = 10,
+    textAlign = "left",
+    validationStatus: validationStatusProp,
+    value: valueProp,
+    variant = "primary",
+    ...restProps
+  }, ref) {
     const targetWindow = useWindow();
     useComponentCssInjection({
       testId: "salt-stepper-input",
       css: css_248z,
       window: targetWindow
     });
+    const { IncreaseIcon, DecreaseIcon } = useIcon();
+    const {
+      a11yProps: {
+        "aria-describedby": formFieldDescribedBy,
+        "aria-labelledby": formFieldLabelledBy
+      } = {},
+      disabled: formFieldDisabled,
+      readOnly: formFieldReadOnly,
+      necessity: formFieldRequired,
+      validationStatus: formFieldValidationStatus
+    } = useFormFieldProps();
+    const isDisabled = disabled || formFieldDisabled;
+    const isReadOnly = readOnlyProp || formFieldReadOnly;
+    const validationStatus = formFieldValidationStatus != null ? formFieldValidationStatus : validationStatusProp;
+    const {
+      "aria-describedby": inputDescribedBy,
+      "aria-labelledby": inputLabelledBy,
+      className: inputClassName,
+      onBlur: inputOnBlur,
+      onChange: inputOnChange,
+      onFocus: inputOnFocus,
+      required: inputRequired,
+      onKeyDown: inputOnKeyDown,
+      ...restInputProps
+    } = inputPropsProp;
+    const isRequired = formFieldRequired ? ["required", "asterisk"].includes(formFieldRequired) : inputRequired;
+    const [value, setValue] = useControlled({
+      controlled: valueProp,
+      default: typeof defaultValueProp === "number" ? toFixedDecimalPlaces(defaultValueProp, decimalPlaces) : defaultValueProp,
+      name: "StepperInput",
+      state: "value"
+    });
+    const [focused, setFocused] = useState(false);
     const inputRef = useRef(null);
-    const { getButtonProps, getInputProps } = useStepperInput(props, inputRef);
+    const forkedInputRef = useForkRef(inputRef, inputRefProp);
+    const {
+      decrementButtonProps,
+      decrementValue,
+      incrementButtonProps,
+      incrementValue
+    } = useStepperInput({
+      inputRef,
+      setValue,
+      decimalPlaces,
+      disabled,
+      max,
+      min,
+      onChange: onChangeProp,
+      readOnly: isReadOnly,
+      step,
+      stepBlock,
+      value
+    });
+    const handleInputFocus = (event) => {
+      setFocused(true);
+      inputOnFocus == null ? void 0 : inputOnFocus(event);
+    };
+    const handleInputBlur = (event) => {
+      setFocused(false);
+      if (value === void 0)
+        return;
+      const floatValue = toFloat(value);
+      if (Number.isNaN(floatValue)) {
+        setValue(value);
+        onChangeProp == null ? void 0 : onChangeProp(event, value);
+      } else {
+        const roundedValue = toFixedDecimalPlaces(floatValue, decimalPlaces);
+        if (value !== "" && !isAllowedNonNumeric(value)) {
+          setValue(roundedValue);
+        }
+        onChangeProp == null ? void 0 : onChangeProp(event, roundedValue);
+      }
+      inputOnBlur == null ? void 0 : inputOnBlur(event);
+    };
+    const handleInputChange = (event) => {
+      const changedValue = event.target.value;
+      setValue(sanitizedInput(changedValue));
+      onChangeProp == null ? void 0 : onChangeProp(event, sanitizedInput(changedValue));
+      inputOnChange == null ? void 0 : inputOnChange(event);
+    };
+    const handleInputKeyDown = (event) => {
+      switch (event.key) {
+        case "ArrowUp": {
+          event.preventDefault();
+          const block = event.shiftKey;
+          incrementValue(event, block);
+          break;
+        }
+        case "ArrowDown": {
+          event.preventDefault();
+          const block = event.shiftKey;
+          decrementValue(event, block);
+          break;
+        }
+        case "Home": {
+          event.preventDefault();
+          setValue(min);
+          onChangeProp == null ? void 0 : onChangeProp(event, min);
+          break;
+        }
+        case "End": {
+          event.preventDefault();
+          setValue(max);
+          onChangeProp == null ? void 0 : onChangeProp(event, max);
+          break;
+        }
+        case "PageUp": {
+          event.preventDefault();
+          incrementValue(event, true);
+          break;
+        }
+        case "PageDown": {
+          event.preventDefault();
+          decrementValue(event, true);
+          break;
+        }
+      }
+      inputOnKeyDown == null ? void 0 : inputOnKeyDown(event);
+    };
     return /* @__PURE__ */ jsxs("div", {
-      className: clsx(withBaseName(), className),
+      className: clsx(withBaseName(), classNameProp),
+      ...restProps,
       ref,
       children: [
-        /* @__PURE__ */ jsx(Input, {
-          onBlur,
-          onFocus,
-          ref: inputRef,
-          readOnly,
-          ...getInputProps(rest)
+        /* @__PURE__ */ jsxs("div", {
+          className: clsx(
+            withBaseName("inputContainer"),
+            withBaseName(variant),
+            {
+              [withBaseName("focused")]: !isDisabled && focused,
+              [withBaseName("disabled")]: isDisabled,
+              [withBaseName("readOnly")]: isReadOnly,
+              [withBaseName(validationStatus || "")]: validationStatus,
+              [withBaseName("bordered")]: bordered
+            }
+          ),
+          children: [
+            startAdornment && /* @__PURE__ */ jsx("div", {
+              className: withBaseName("startAdornmentContainer"),
+              children: startAdornment
+            }),
+            /* @__PURE__ */ jsx("input", {
+              "aria-describedby": clsx(formFieldDescribedBy, inputDescribedBy),
+              "aria-invalid": isOutOfRange(value, min, max),
+              "aria-labelledby": clsx(formFieldLabelledBy, inputLabelledBy),
+              "aria-valuemax": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),
+              "aria-valuemin": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),
+              "aria-valuenow": value && !Number.isNaN(toFloat(value)) ? toFloat(toFixedDecimalPlaces(toFloat(value), decimalPlaces)) : void 0,
+              className: clsx(
+                withBaseName("input"),
+                withBaseName(`inputTextAlign${capitalize(textAlign)}`),
+                inputClassName
+              ),
+              disabled: isDisabled,
+              onBlur: handleInputBlur,
+              onChange: handleInputChange,
+              onFocus: !isDisabled ? handleInputFocus : void 0,
+              onKeyDown: handleInputKeyDown,
+              placeholder,
+              readOnly: isReadOnly,
+              ref: forkedInputRef,
+              required: isRequired,
+              role: "spinbutton",
+              tabIndex: isDisabled ? -1 : 0,
+              value,
+              ...restInputProps
+            }),
+            !isDisabled && validationStatus && /* @__PURE__ */ jsx(StatusAdornment, {
+              status: validationStatus
+            }),
+            endAdornment && /* @__PURE__ */ jsx("div", {
+              className: withBaseName("endAdornmentContainer"),
+              children: endAdornment
+            }),
+            /* @__PURE__ */ jsx("div", {
+              className: withBaseName("activationIndicator")
+            })
+          ]
         }),
-        !hideButtons && !readOnly && /* @__PURE__ */ jsxs("div", {
+        !hideButtons && !isReadOnly && /* @__PURE__ */ jsxs("div", {
           className: withBaseName("buttonContainer"),
           children: [
             /* @__PURE__ */ jsx(Button, {
-              "aria-label": "increment value",
-              className: withBaseName("stepperButton"),
-              ...getButtonProps("increment"),
-              children: /* @__PURE__ */ jsx(TriangleUpIcon, {
+              className: clsx(
+                withBaseName("stepperButton"),
+                withBaseName("stepperButtonIncrement")
+              ),
+              ...incrementButtonProps,
+              children: /* @__PURE__ */ jsx(IncreaseIcon, {
                 "aria-hidden": true
               })
             }),
             /* @__PURE__ */ jsx(Button, {
-              "aria-label": "decrement value",
-              className: withBaseName("stepperButton"),
-              ...getButtonProps("decrement"),
-              children: /* @__PURE__ */ jsx(TriangleDownIcon, {
+              className: clsx(
+                withBaseName("stepperButton"),
+                withBaseName("stepperButtonDecrement")
+              ),
+              ...decrementButtonProps,
+              children: /* @__PURE__ */ jsx(DecreaseIcon, {
                 "aria-hidden": true
               })
             })

package/dist-es/stepper-input/StepperInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import { Button, Input, type InputProps, makePrefixer } from \"@salt-ds/core\";\nimport { TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { type FocusEventHandler, forwardRef, useRef } from \"react\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nimport stepperInputCss from \"./StepperInput.css\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps\n  extends Omit<InputProps, \"onChange\" | \"emptyReadOnlyMarker\"> {\n  /**\n   * A multiplier applied to the `step` when the value is incremented or decremented using the PageDown/PageUp keys.\n   */\n  block?: number;\n  /**\n   * The number of decimal places to display.\n   */\n  decimalPlaces?: number;\n  /**\n   * Sets the initial default value of the component.\n   */\n  defaultValue?: number;\n  /**\n   * The maximum value that can be selected.\n   */\n  max?: number;\n  /**\n   * The minimum value that can be selected.\n   */\n  min?: number;\n  /**\n   * Whether to hide the stepper buttons. Defaults to `false`.\n   */\n  hideButtons?: boolean;\n  /**\n   * Callback when stepper input loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when stepper input value is changed.\n   */\n  onChange?: (changedValue: number | string) => void;\n  /**\n   * Callback when stepper input gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The amount to increment or decrement the value by when using the stepper buttons or Up Arrow and Down Arrow keys.\n   */\n  step?: number;\n  /**\n   * Determines the text alignment of the display value.\n   */\n  textAlign?: \"center\" | \"left\" | \"right\";\n  /**\n   * The value of the stepper input. The component will be controlled if this prop is provided.\n   */\n  value?: number | string;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(props, ref) {\n    const {\n      className,\n      hideButtons,\n      onBlur,\n      onChange,\n      onFocus,\n      readOnly,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepper-input\",\n      css: stepperInputCss,\n      window: targetWindow,\n    });\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const { getButtonProps, getInputProps } = useStepperInput(props, inputRef);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref}>\n        <Input\n          onBlur={onBlur}\n          onFocus={onFocus}\n          ref={inputRef}\n          readOnly={readOnly}\n          {...getInputProps(rest)}\n        />\n        {!hideButtons && !readOnly && (\n          <div className={withBaseName(\"buttonContainer\")}>\n            <Button\n              aria-label=\"increment value\"\n              className={withBaseName(\"stepperButton\")}\n              {...getButtonProps(\"increment\")}\n            >\n              <TriangleUpIcon aria-hidden />\n            </Button>\n            <Button\n              aria-label=\"decrement value\"\n              className={withBaseName(\"stepperButton\")}\n              {...getButtonProps(\"decrement\")}\n            >\n              <TriangleDownIcon aria-hidden />\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["StepperInput","stepperInputCss"],"mappings":";;;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA,CAAA;AAsD7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,QAAA,GAAW,OAAgC,IAAI,CAAA,CAAA;AAErD,IAAA,MAAM,EAAE,cAAgB,EAAA,aAAA,EAAkB,GAAA,eAAA,CAAgB,OAAO,QAAQ,CAAA,CAAA;AAEzE,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC/C,QAAA,EAAA;AAAA,wBAAC,GAAA,CAAA,KAAA,EAAA;AAAA,UACC,MAAA;AAAA,UACA,OAAA;AAAA,UACA,GAAK,EAAA,QAAA;AAAA,UACL,QAAA;AAAA,UACC,GAAG,cAAc,IAAI,CAAA;AAAA,SACxB,CAAA;AAAA,QACC,CAAC,WAAA,IAAe,CAAC,QAAA,oBACf,IAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UAC5C,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,YAAW,EAAA,iBAAA;AAAA,cACX,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,cACtC,GAAG,eAAe,WAAW,CAAA;AAAA,cAE9B,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA;AAAA,gBAAe,aAAW,EAAA,IAAA;AAAA,eAAC,CAAA;AAAA,aAC9B,CAAA;AAAA,4BACC,GAAA,CAAA,MAAA,EAAA;AAAA,cACC,YAAW,EAAA,iBAAA;AAAA,cACX,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,cACtC,GAAG,eAAe,WAAW,CAAA;AAAA,cAE9B,QAAC,kBAAA,GAAA,CAAA,gBAAA,EAAA;AAAA,gBAAiB,aAAW,EAAA,IAAA;AAAA,eAAC,CAAA;AAAA,aAChC,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import {\n  Button,\n  StatusAdornment,\n  type ValidationStatus,\n  capitalize,\n  makePrefixer,\n  useControlled,\n  useForkRef,\n  useFormFieldProps,\n  useIcon,\n} from \"@salt-ds/core\";\nimport { TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ChangeEvent,\n  type ComponentPropsWithoutRef,\n  type FocusEvent,\n  type InputHTMLAttributes,\n  type KeyboardEvent,\n  type ReactNode,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useRef,\n  useState,\n} from \"react\";\nimport {\n  isAllowedNonNumeric,\n  isOutOfRange,\n  sanitizedInput,\n  toFixedDecimalPlaces,\n  toFloat,\n} from \"./internal/utils\";\n\nimport stepperInputCss from \"./StepperInput.css\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /**\n   * A boolean. When `true`, the input will receive a full border.\n   */\n  bordered?: boolean;\n  /**\n   * The number of decimal places to display.\n   */\n  decimalPlaces?: number;\n  /**\n   * Sets the initial default value of the component.\n   */\n  defaultValue?: number | string;\n  /**\n   * If `true`, the stepper input will be disabled.\n   */\n  disabled?: boolean;\n  /**\n   * The marker to use in an empty read only Input.\n   * Use `''` to disable this feature. Defaults to '—'.\n   * @default '—'\n   */\n  emptyReadOnlyMarker?: string;\n  /**\n   * End adornment component\n   */\n  endAdornment?: ReactNode;\n  /**\n   * Whether to hide the stepper buttons. Defaults to `false`.\n   * @default false\n   */\n  hideButtons?: boolean;\n  /**\n   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element.\n   */\n  inputProps?: InputHTMLAttributes<HTMLInputElement>;\n  /**\n   * Optional ref for the input component\n   */\n  inputRef?: Ref<HTMLInputElement>;\n  /**\n   * The maximum value that can be selected. Defaults to Number.MAX_SAFE_INTEGER.\n   * @default Number.MAX_SAFE_INTEGER\n   */\n  max?: number;\n  /**\n   * The minimum value that can be selected. Defaults to Number.MIN_SAFE_INTEGER.\n   * @default Number.MIN_SAFE_INTEGER\n   */\n  min?: number;\n  /**\n   * Callback when stepper input value is changed.\n   * @param event - the event triggers value change, could be undefined during increment / decrement button long press\n   */\n  onChange?: (\n    event: SyntheticEvent | undefined,\n    value: number | string,\n  ) => void;\n  /**\n   * A string. Displayed in a dimmed color when the input value is empty.\n   */\n  placeholder?: string | undefined;\n  /**\n   * A boolean. If `true`, the component is not editable by the user.\n   */\n  readOnly?: boolean;\n  /**\n   * Start adornment component\n   */\n  startAdornment?: ReactNode;\n  /**\n   * The amount to increment or decrement the value by when using the stepper buttons or Up Arrow and Down Arrow keys. Default to 1.\n   * @default 1\n   */\n  step?: number;\n  /**\n   * The amount to change the value when the value is incremented or decremented by holding Shift and pressing Up arrow or Down arrow keys.\n   * Defaults to 10.\n   * @default 10\n   */\n  stepBlock?: number;\n  /**\n   * Alignment of text within container. Defaults to \"left\".\n   * @default \"left\"\n   */\n  textAlign?: \"left\" | \"center\" | \"right\";\n  /**\n   * Validation status.\n   */\n  validationStatus?: Extract<ValidationStatus, \"error\" | \"warning\" | \"success\">;\n  /**\n   * Styling variant. Defaults to \"primary\".\n   * @default \"primary\"\n   */\n  variant?: \"primary\" | \"secondary\";\n  /**\n   * The value of the stepper input. The component will be controlled if this prop is provided.\n   */\n  value?: number | string | undefined;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(\n    {\n      bordered,\n      className: classNameProp,\n      decimalPlaces = 0,\n      defaultValue: defaultValueProp,\n      disabled,\n      emptyReadOnlyMarker = \"—\",\n      endAdornment,\n      hideButtons,\n      inputProps: inputPropsProp = {},\n      inputRef: inputRefProp,\n      max = Number.MAX_SAFE_INTEGER,\n      min = Number.MIN_SAFE_INTEGER,\n      onChange: onChangeProp,\n      placeholder,\n      readOnly: readOnlyProp,\n      startAdornment,\n      step = 1,\n      stepBlock = 10,\n      textAlign = \"left\",\n      validationStatus: validationStatusProp,\n      value: valueProp,\n      variant = \"primary\",\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepper-input\",\n      css: stepperInputCss,\n      window: targetWindow,\n    });\n\n    const { IncreaseIcon, DecreaseIcon } = useIcon();\n\n    const {\n      a11yProps: {\n        \"aria-describedby\": formFieldDescribedBy,\n        \"aria-labelledby\": formFieldLabelledBy,\n      } = {},\n      disabled: formFieldDisabled,\n      readOnly: formFieldReadOnly,\n      necessity: formFieldRequired,\n      validationStatus: formFieldValidationStatus,\n    } = useFormFieldProps();\n\n    const isDisabled = disabled || formFieldDisabled;\n    const isReadOnly = readOnlyProp || formFieldReadOnly;\n    const validationStatus = formFieldValidationStatus ?? validationStatusProp;\n\n    const {\n      \"aria-describedby\": inputDescribedBy,\n      \"aria-labelledby\": inputLabelledBy,\n      className: inputClassName,\n      onBlur: inputOnBlur,\n      onChange: inputOnChange,\n      onFocus: inputOnFocus,\n      required: inputRequired,\n      onKeyDown: inputOnKeyDown,\n      ...restInputProps\n    } = inputPropsProp;\n\n    const isRequired = formFieldRequired\n      ? [\"required\", \"asterisk\"].includes(formFieldRequired)\n      : inputRequired;\n\n    const [value, setValue] = useControlled({\n      controlled: valueProp,\n      default:\n        typeof defaultValueProp === \"number\"\n          ? toFixedDecimalPlaces(defaultValueProp, decimalPlaces)\n          : defaultValueProp,\n      name: \"StepperInput\",\n      state: \"value\",\n    });\n\n    // Won't be needed when `:has` css can be used\n    const [focused, setFocused] = useState(false);\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n    const forkedInputRef = useForkRef(inputRef, inputRefProp);\n\n    const {\n      decrementButtonProps,\n      decrementValue,\n      incrementButtonProps,\n      incrementValue,\n    } = useStepperInput({\n      inputRef,\n      setValue,\n      decimalPlaces,\n      disabled,\n      max,\n      min,\n      onChange: onChangeProp,\n      readOnly: isReadOnly,\n      step,\n      stepBlock,\n      value,\n    });\n\n    const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(true);\n\n      inputOnFocus?.(event);\n    };\n\n    const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {\n      setFocused(false);\n\n      if (value === undefined) return;\n\n      const floatValue = toFloat(value);\n      if (Number.isNaN(floatValue)) {\n        // Keep original value if NaN\n        setValue(value);\n        onChangeProp?.(event, value);\n      } else {\n        const roundedValue = toFixedDecimalPlaces(floatValue, decimalPlaces);\n\n        if (value !== \"\" && !isAllowedNonNumeric(value)) {\n          setValue(roundedValue);\n        }\n\n        onChangeProp?.(event, roundedValue);\n      }\n\n      inputOnBlur?.(event);\n    };\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n      const changedValue = event.target.value;\n\n      setValue(sanitizedInput(changedValue));\n\n      onChangeProp?.(event, sanitizedInput(changedValue));\n      inputOnChange?.(event);\n    };\n\n    const handleInputKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n      switch (event.key) {\n        case \"ArrowUp\": {\n          event.preventDefault();\n          const block = event.shiftKey;\n          incrementValue(event, block);\n          break;\n        }\n        case \"ArrowDown\": {\n          event.preventDefault();\n          const block = event.shiftKey;\n          decrementValue(event, block);\n          break;\n        }\n        case \"Home\": {\n          event.preventDefault();\n          setValue(min);\n          onChangeProp?.(event, min);\n          break;\n        }\n        case \"End\": {\n          event.preventDefault();\n          setValue(max);\n          onChangeProp?.(event, max);\n          break;\n        }\n        case \"PageUp\": {\n          event.preventDefault();\n          incrementValue(event, true);\n          break;\n        }\n        case \"PageDown\": {\n          event.preventDefault();\n          decrementValue(event, true);\n          break;\n        }\n      }\n\n      inputOnKeyDown?.(event);\n    };\n\n    return (\n      <div\n        className={clsx(withBaseName(), classNameProp)}\n        {...restProps}\n        ref={ref}\n      >\n        <div\n          className={clsx(\n            withBaseName(\"inputContainer\"),\n            withBaseName(variant),\n            {\n              [withBaseName(\"focused\")]: !isDisabled && focused,\n              [withBaseName(\"disabled\")]: isDisabled,\n              [withBaseName(\"readOnly\")]: isReadOnly,\n              [withBaseName(validationStatus || \"\")]: validationStatus,\n              [withBaseName(\"bordered\")]: bordered,\n            },\n          )}\n        >\n          {startAdornment && (\n            <div className={withBaseName(\"startAdornmentContainer\")}>\n              {startAdornment}\n            </div>\n          )}\n          <input\n            aria-describedby={clsx(formFieldDescribedBy, inputDescribedBy)}\n            aria-invalid={isOutOfRange(value, min, max)}\n            aria-labelledby={clsx(formFieldLabelledBy, inputLabelledBy)}\n            aria-valuemax={toFloat(toFixedDecimalPlaces(max, decimalPlaces))}\n            aria-valuemin={toFloat(toFixedDecimalPlaces(min, decimalPlaces))}\n            aria-valuenow={\n              value && !Number.isNaN(toFloat(value))\n                ? toFloat(toFixedDecimalPlaces(toFloat(value), decimalPlaces))\n                : undefined\n            }\n            className={clsx(\n              withBaseName(\"input\"),\n              withBaseName(`inputTextAlign${capitalize(textAlign)}`),\n              inputClassName,\n            )}\n            disabled={isDisabled}\n            onBlur={handleInputBlur}\n            onChange={handleInputChange}\n            onFocus={!isDisabled ? handleInputFocus : undefined}\n            onKeyDown={handleInputKeyDown}\n            placeholder={placeholder}\n            readOnly={isReadOnly}\n            ref={forkedInputRef}\n            required={isRequired}\n            role=\"spinbutton\"\n            tabIndex={isDisabled ? -1 : 0}\n            value={value}\n            {...restInputProps}\n          />\n          {!isDisabled && validationStatus && (\n            <StatusAdornment status={validationStatus} />\n          )}\n          {endAdornment && (\n            <div className={withBaseName(\"endAdornmentContainer\")}>\n              {endAdornment}\n            </div>\n          )}\n          <div className={withBaseName(\"activationIndicator\")} />\n        </div>\n\n        {!hideButtons && !isReadOnly && (\n          <div className={withBaseName(\"buttonContainer\")}>\n            <Button\n              className={clsx(\n                withBaseName(\"stepperButton\"),\n                withBaseName(\"stepperButtonIncrement\"),\n              )}\n              {...incrementButtonProps}\n            >\n              <IncreaseIcon aria-hidden />\n            </Button>\n            <Button\n              className={clsx(\n                withBaseName(\"stepperButton\"),\n                withBaseName(\"stepperButtonDecrement\"),\n              )}\n              {...decrementButtonProps}\n            >\n              <DecreaseIcon aria-hidden />\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["StepperInput","stepperInputCss"],"mappings":"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"}

package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js

@@ -0,0 +1,50 @@
+import { useWindow } from '@salt-ds/window';
+import { useState, useCallback, useEffect } from 'react';
+import { useInterval } from './useInterval.js';
+
+const INITIAL_DELAY = 500;
+const INTERVAL_DELAY = 100;
+function useActivateWhileMouseDown(activationFn, isAtLimit) {
+  const [buttonDown, setButtonDown] = useState(false);
+  const [delay, setDelay] = useState(INITIAL_DELAY);
+  const cancelInterval = useCallback(() => {
+    setButtonDown(false);
+    setDelay(INITIAL_DELAY);
+  }, []);
+  useEffect(() => {
+    if (isAtLimit)
+      cancelInterval();
+  }, [isAtLimit, cancelInterval]);
+  const targetWindow = useWindow();
+  useEffect(() => {
+    if (targetWindow) {
+      targetWindow.addEventListener("mouseup", cancelInterval);
+    }
+    return () => {
+      if (targetWindow) {
+        targetWindow.removeEventListener("mouseup", cancelInterval);
+      }
+    };
+  }, [cancelInterval, targetWindow]);
+  const activate = (event) => {
+    activationFn(event);
+    if (event.type === "mousedown") {
+      setButtonDown(true);
+    }
+  };
+  useInterval(
+    () => {
+      if (!buttonDown)
+        return;
+      activationFn();
+      if (delay === INITIAL_DELAY) {
+        setDelay(INTERVAL_DELAY);
+      }
+    },
+    buttonDown ? delay : null
+  );
+  return { activate, buttonDown };
+}
+
+export { useActivateWhileMouseDown };
+//# sourceMappingURL=useActivateWhileMouseDown.js.map

package/dist-es/stepper-input/internal/useActivateWhileMouseDown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useActivateWhileMouseDown.js","sources":["../src/stepper-input/internal/useActivateWhileMouseDown.ts"],"sourcesContent":["import { useWindow } from \"@salt-ds/window\";\nimport { type SyntheticEvent, useCallback, useEffect, useState } from \"react\";\nimport { useInterval } from \"./useInterval\";\n\nconst INITIAL_DELAY = 500;\nconst INTERVAL_DELAY = 100;\n\nexport function useActivateWhileMouseDown(\n  activationFn: (event?: SyntheticEvent) => void,\n  isAtLimit: boolean,\n) {\n  const [buttonDown, setButtonDown] = useState(false);\n  const [delay, setDelay] = useState(INITIAL_DELAY);\n\n  const cancelInterval = useCallback(() => {\n    setButtonDown(false);\n    setDelay(INITIAL_DELAY);\n  }, []);\n\n  useEffect(() => {\n    if (isAtLimit) cancelInterval();\n  }, [isAtLimit, cancelInterval]);\n\n  const targetWindow = useWindow();\n\n  useEffect(() => {\n    if (targetWindow) {\n      targetWindow.addEventListener(\"mouseup\", cancelInterval);\n    }\n    return () => {\n      if (targetWindow) {\n        targetWindow.removeEventListener(\"mouseup\", cancelInterval);\n      }\n    };\n  }, [cancelInterval, targetWindow]);\n\n  const activate = (event: SyntheticEvent) => {\n    activationFn(event);\n    if (event.type === \"mousedown\") {\n      setButtonDown(true);\n    }\n  };\n\n  useInterval(\n    () => {\n      if (!buttonDown) return;\n      activationFn();\n      if (delay === INITIAL_DELAY) {\n        setDelay(INTERVAL_DELAY);\n      }\n    },\n    buttonDown ? delay : null,\n  );\n\n  return { activate, buttonDown };\n}\n"],"names":[],"mappings":";;;;AAIA,MAAM,aAAgB,GAAA,GAAA,CAAA;AACtB,MAAM,cAAiB,GAAA,GAAA,CAAA;AAEP,SAAA,yBAAA,CACd,cACA,SACA,EAAA;AACA,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA,CAAA;AAClD,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,aAAa,CAAA,CAAA;AAEhD,EAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,IAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AACnB,IAAA,QAAA,CAAS,aAAa,CAAA,CAAA;AAAA,GACxB,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA;AAAW,MAAe,cAAA,EAAA,CAAA;AAAA,GAC7B,EAAA,CAAC,SAAW,EAAA,cAAc,CAAC,CAAA,CAAA;AAE9B,EAAA,MAAM,eAAe,SAAU,EAAA,CAAA;AAE/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,YAAc,EAAA;AAChB,MAAa,YAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA,CAAA;AAAA,KACzD;AACA,IAAA,OAAO,MAAM;AACX,MAAA,IAAI,YAAc,EAAA;AAChB,QAAa,YAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA,CAAA;AAAA,OAC5D;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,cAAgB,EAAA,YAAY,CAAC,CAAA,CAAA;AAEjC,EAAM,MAAA,QAAA,GAAW,CAAC,KAA0B,KAAA;AAC1C,IAAA,YAAA,CAAa,KAAK,CAAA,CAAA;AAClB,IAAI,IAAA,KAAA,CAAM,SAAS,WAAa,EAAA;AAC9B,MAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,KACpB;AAAA,GACF,CAAA;AAEA,EAAA,WAAA;AAAA,IACE,MAAM;AACJ,MAAA,IAAI,CAAC,UAAA;AAAY,QAAA,OAAA;AACjB,MAAa,YAAA,EAAA,CAAA;AACb,MAAA,IAAI,UAAU,aAAe,EAAA;AAC3B,QAAA,QAAA,CAAS,cAAc,CAAA,CAAA;AAAA,OACzB;AAAA,KACF;AAAA,IACA,aAAa,KAAQ,GAAA,IAAA;AAAA,GACvB,CAAA;AAEA,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA,CAAA;AAChC;;;;"}

package/dist-es/stepper-input/internal/utils.js

@@ -0,0 +1,32 @@
+const ACCEPT_INPUT = /^[-+]?[0-9]*\.?([0-9]+)?/g;
+const toFixedDecimalPlaces = (inputNumber, decimalPlaces) => inputNumber.toFixed(decimalPlaces);
+const isAllowedNonNumeric = (inputCharacter) => {
+  if (typeof inputCharacter === "number")
+    return;
+  return "-+".includes(inputCharacter) && inputCharacter.length === 1 || inputCharacter === "";
+};
+const toFloat = (inputValue) => {
+  if (isAllowedNonNumeric(inputValue))
+    return 0;
+  return Number.parseFloat(inputValue.toString());
+};
+const sanitizedInput = (numberString) => (numberString.match(ACCEPT_INPUT) || []).join("");
+const isAtMax = (value, max) => {
+  if (value === void 0)
+    return true;
+  return toFloat(value) >= max;
+};
+const isAtMin = (value, min) => {
+  if (value === void 0)
+    return true;
+  return toFloat(value) <= min;
+};
+const isOutOfRange = (value, min, max) => {
+  if (value === void 0)
+    return true;
+  const floatValue = toFloat(value);
+  return floatValue > max || floatValue < min;
+};
+
+export { ACCEPT_INPUT, isAllowedNonNumeric, isAtMax, isAtMin, isOutOfRange, sanitizedInput, toFixedDecimalPlaces, toFloat };
+//# sourceMappingURL=utils.js.map

package/dist-es/stepper-input/internal/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/stepper-input/internal/utils.ts"],"sourcesContent":["// The input should only accept numbers, decimal points, and plus/minus symbols\nexport const ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nexport const toFixedDecimalPlaces = (\n  inputNumber: number,\n  decimalPlaces: number,\n) => inputNumber.toFixed(decimalPlaces);\n\nexport const isAllowedNonNumeric = (inputCharacter: number | string) => {\n  if (typeof inputCharacter === \"number\") return;\n  return (\n    (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n    inputCharacter === \"\"\n  );\n};\n\nexport const toFloat = (inputValue: number | string) => {\n  // Plus, minus, and empty characters are treated as 0\n  if (isAllowedNonNumeric(inputValue)) return 0;\n  return Number.parseFloat(inputValue.toString());\n};\n\nexport const sanitizedInput = (numberString: string) =>\n  (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nexport const isAtMax = (value: number | string | undefined, max: number) => {\n  if (value === undefined) return true;\n  return toFloat(value) >= max;\n};\n\nexport const isAtMin = (value: number | string | undefined, min: number) => {\n  if (value === undefined) return true;\n  return toFloat(value) <= min;\n};\n\nexport const isOutOfRange = (\n  value: number | string | undefined,\n  min: number,\n  max: number,\n) => {\n  if (value === undefined) return true;\n  const floatValue = toFloat(value);\n  return floatValue > max || floatValue < min;\n};\n"],"names":[],"mappings":"AACO,MAAM,YAAe,GAAA,4BAAA;AAErB,MAAM,uBAAuB,CAClC,WAAA,EACA,aACG,KAAA,WAAA,CAAY,QAAQ,aAAa,EAAA;AAEzB,MAAA,mBAAA,GAAsB,CAAC,cAAoC,KAAA;AACtE,EAAA,IAAI,OAAO,cAAmB,KAAA,QAAA;AAAU,IAAA,OAAA;AACxC,EAAA,OACG,KAAK,QAAS,CAAA,cAAc,KAAK,cAAe,CAAA,MAAA,KAAW,KAC5D,cAAmB,KAAA,EAAA,CAAA;AAEvB,EAAA;AAEa,MAAA,OAAA,GAAU,CAAC,UAAgC,KAAA;AAEtD,EAAA,IAAI,oBAAoB,UAAU,CAAA;AAAG,IAAO,OAAA,CAAA,CAAA;AAC5C,EAAA,OAAO,MAAO,CAAA,UAAA,CAAW,UAAW,CAAA,QAAA,EAAU,CAAA,CAAA;AAChD,EAAA;AAEa,MAAA,cAAA,GAAiB,CAAC,YAAA,KAAA,CAC5B,YAAa,CAAA,KAAA,CAAM,YAAY,CAAK,IAAA,EAAI,EAAA,IAAA,CAAK,EAAE,EAAA;AAErC,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA;AAAW,IAAO,OAAA,IAAA,CAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA,CAAA;AAC3B,EAAA;AAEa,MAAA,OAAA,GAAU,CAAC,KAAA,EAAoC,GAAgB,KAAA;AAC1E,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA;AAAW,IAAO,OAAA,IAAA,CAAA;AAChC,EAAO,OAAA,OAAA,CAAQ,KAAK,CAAK,IAAA,GAAA,CAAA;AAC3B,EAAA;AAEO,MAAM,YAAe,GAAA,CAC1B,KACA,EAAA,GAAA,EACA,GACG,KAAA;AACH,EAAA,IAAI,KAAU,KAAA,KAAA,CAAA;AAAW,IAAO,OAAA,IAAA,CAAA;AAChC,EAAM,MAAA,UAAA,GAAa,QAAQ,KAAK,CAAA,CAAA;AAChC,EAAO,OAAA,UAAA,GAAa,OAAO,UAAa,GAAA,GAAA,CAAA;AAC1C;;;;"}