@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/stepper-input/StepperInput.js

@@ -0,0 +1,118 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('classnames');
+var React = require('react');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var Input = require('../input/Input.js');
+require('../input/StaticInputAdornment.js');
+var useStepperInput = require('./useStepperInput.js');
+require('./StepperInput.css.js');
+var useActivationIndicatorPosition = require('./internal/useActivationIndicatorPosition.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltStepperInput");
+const StepperInput = React.forwardRef(
+  function StepperInput2(props, ref) {
+    const {
+      ButtonProps: ButtonPropsProp,
+      InputProps: InputPropsProp,
+      textAlign = "left",
+      className,
+      showRefreshButton = false
+    } = props;
+    const adornmentRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const {
+      decrementButtonDown,
+      getButtonIcon,
+      getButtonProps,
+      getInputProps,
+      incrementButtonDown,
+      isAtMax,
+      isAtMin,
+      refreshCurrentValue,
+      stepperDirection,
+      valuesHaveDiverged
+    } = useStepperInput.useStepperInput(props, inputRef);
+    useActivationIndicatorPosition.useActivationIndicatorPosition(
+      adornmentRef,
+      valuesHaveDiverged() || showRefreshButton
+    );
+    const endAdornment = /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: withBaseName("adornmentContainer"),
+      ref: adornmentRef,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+          "aria-label": "Refresh default value",
+          className: cx__default["default"](withBaseName("secondaryButton"), {
+            [withBaseName("hideSecondaryButton")]: !(showRefreshButton || valuesHaveDiverged())
+          }),
+          onClick: refreshCurrentValue,
+          variant: "secondary",
+          children: /* @__PURE__ */ jsxRuntime.jsx(icons.RefreshIcon, {
+            "aria-label": "refresh"
+          })
+        }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+          className: withBaseName("buttonContainer"),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+              className: cx__default["default"](
+                withBaseName("stepperButton"),
+                withBaseName("increment"),
+                {
+                  active: incrementButtonDown
+                }
+              ),
+              disabled: isAtMax(),
+              ...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp),
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleUpIcon, {
+                className: withBaseName("stepperButtonIcon"),
+                "aria-label": getButtonIcon(stepperDirection.INCREMENT)
+              })
+            }),
+            /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+              className: cx__default["default"](
+                withBaseName("stepperButton"),
+                withBaseName("decrement"),
+                {
+                  active: decrementButtonDown
+                }
+              ),
+              disabled: isAtMin(),
+              ...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp),
+              children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleDownIcon, {
+                className: withBaseName("stepperButtonIcon"),
+                "aria-label": getButtonIcon(stepperDirection.DECREMENT)
+              })
+            })
+          ]
+        })
+      ]
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: cx__default["default"](withBaseName(), className),
+      onBlur: props.onBlur,
+      onFocus: props.onFocus,
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(Input.Input, {
+        className: withBaseName("input"),
+        endAdornment,
+        highlightOnFocus: true,
+        ref: inputRef,
+        textAlign,
+        ...getInputProps(InputPropsProp)
+      })
+    });
+  }
+);
+
+exports.StepperInput = StepperInput;
+//# sourceMappingURL=StepperInput.js.map

package/dist-cjs/packages/lab/src/stepper-input/StepperInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport React, { forwardRef, ReactNode, useRef } from \"react\";\nimport { makePrefixer, Button, ButtonProps } from \"@salt-ds/core\";\nimport { RefreshIcon, TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport { Input, InputProps } from \"../input\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nimport \"./StepperInput.css\";\n\nimport { useActivationIndicatorPosition } from \"./internal/useActivationIndicatorPosition\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps {\n  ButtonProps?: Partial<ButtonProps>;\n  InputProps?: Partial<InputProps>;\n  block?: number;\n  className?: string;\n  decimalPlaces?: number;\n  defaultValue?: number;\n  liveValue?: number;\n  max?: number;\n  min?: number;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onChange?: (changedValue: number | string) => void;\n  showRefreshButton?: boolean;\n  step?: number;\n  textAlign?: \"center\" | \"left\" | \"right\";\n  value?: number | string;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(props, ref) {\n    const {\n      ButtonProps: ButtonPropsProp,\n      InputProps: InputPropsProp,\n      textAlign = \"left\",\n      className,\n      showRefreshButton = false,\n    } = props;\n\n    const adornmentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const {\n      decrementButtonDown,\n      getButtonIcon,\n      getButtonProps,\n      getInputProps,\n      incrementButtonDown,\n      isAtMax,\n      isAtMin,\n      refreshCurrentValue,\n      stepperDirection,\n      valuesHaveDiverged,\n    } = useStepperInput(props, inputRef);\n\n    useActivationIndicatorPosition(\n      adornmentRef,\n      valuesHaveDiverged() || showRefreshButton\n    );\n\n    const endAdornment: ReactNode = (\n      <div className={withBaseName(\"adornmentContainer\")} ref={adornmentRef}>\n        <Button\n          aria-label=\"Refresh default value\"\n          className={classnames(withBaseName(\"secondaryButton\"), {\n            // Refresh button is always rendered and has its visibility toggled to\n            // avoid component width changing.\n            [withBaseName(\"hideSecondaryButton\")]: !(\n              showRefreshButton || valuesHaveDiverged()\n            ),\n          })}\n          onClick={refreshCurrentValue}\n          variant=\"secondary\"\n        >\n          <RefreshIcon aria-label=\"refresh\" />\n        </Button>\n        <div className={withBaseName(\"buttonContainer\")}>\n          <Button\n            className={classnames(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"increment\"),\n              {\n                active: incrementButtonDown,\n              }\n            )}\n            disabled={isAtMax()}\n            {...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp)}\n          >\n            <TriangleUpIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.INCREMENT)}\n            />\n          </Button>\n          <Button\n            className={classnames(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"decrement\"),\n              {\n                active: decrementButtonDown,\n              }\n            )}\n            disabled={isAtMin()}\n            {...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp)}\n          >\n            <TriangleDownIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.DECREMENT)}\n            />\n          </Button>\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={classnames(withBaseName(), className)}\n        onBlur={props.onBlur}\n        onFocus={props.onFocus}\n        ref={ref}\n      >\n        <Input\n          className={withBaseName(\"input\")}\n          endAdornment={endAdornment}\n          highlightOnFocus\n          ref={inputRef}\n          textAlign={textAlign}\n          {...getInputProps(InputPropsProp)}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","StepperInput","useRef","useStepperInput","useActivationIndicatorPosition","jsxs","jsx","Button","classnames","RefreshIcon","TriangleUpIcon","TriangleDownIcon","Input"],"mappings":"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"}

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

@@ -0,0 +1,38 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+require('../../form-field-context/FormFieldContext.js');
+var useFormFieldProps = require('../../form-field-context/useFormFieldProps.js');
+
+const refreshButtonWidth = {
+  touch: 36,
+  low: 28,
+  medium: 24,
+  high: 12
+};
+function useActivationIndicatorPosition(adornmentRef, refreshButtonVisible) {
+  const formFieldProps = useFormFieldProps.useFormFieldProps();
+  const { ref: formFieldRef } = formFieldProps;
+  const density = core.useDensity();
+  core.useIsomorphicLayoutEffect(() => {
+    let offset;
+    if (adornmentRef && adornmentRef.current !== null) {
+      const marginAdjustment = density === "high" || density === "medium" ? 2 : 4;
+      const secondaryButtonAdjustment = refreshButtonVisible ? 0 : refreshButtonWidth[density];
+      offset = adornmentRef.current.getBoundingClientRect().width - marginAdjustment - secondaryButtonAdjustment;
+    }
+    if (formFieldRef && formFieldRef.current && offset) {
+      const activationIndicator = formFieldRef.current.getElementsByClassName(
+        "saltFormActivationIndicator-icon"
+      );
+      if (activationIndicator.length > 0) {
+        activationIndicator[0].style.transform = `translateX(-${offset}px)`;
+      }
+    }
+  });
+}
+
+exports.useActivationIndicatorPosition = useActivationIndicatorPosition;
+//# sourceMappingURL=useActivationIndicatorPosition.js.map

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

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

package/dist-cjs/packages/lab/src/stepper-input/internal/useDynamicAriaLabel.js

@@ -0,0 +1,76 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var core = require('@salt-ds/core');
+
+const useDynamicAriaLabel = (appendLabel, hasLiveValue, inputRef, value, valuesHaveDiverged) => {
+  const [hasAnnounced, setHasAnnounced] = React.useState(false);
+  const { announce } = core.useAriaAnnouncer();
+  React.useEffect(() => {
+    var _a;
+    function applyAriaMessage(ariaLabel) {
+      var _a2, _b, _c, _d;
+      if (!ariaLabel.includes(appendLabel)) {
+        (_a2 = inputRef.current) == null ? void 0 : _a2.setAttribute(
+          "aria-label",
+          `${ariaLabel}${appendLabel}`
+        );
+      }
+      const currentId = ((_b = inputRef.current) == null ? void 0 : _b.getAttribute("id")) || "";
+      const labelledBy = ((_c = inputRef.current) == null ? void 0 : _c.getAttribute("aria-labelledby")) || "";
+      if (!labelledBy.includes(currentId)) {
+        (_d = inputRef.current) == null ? void 0 : _d.setAttribute(
+          "aria-labelledby",
+          `${labelledBy} ${currentId}`
+        );
+      }
+    }
+    function removeAriaMessage(ariaLabel) {
+      var _a2, _b, _c, _d, _e;
+      const replacementAria = ariaLabel == null ? void 0 : ariaLabel.replace(appendLabel, "");
+      if (replacementAria !== void 0) {
+        (_a2 = inputRef.current) == null ? void 0 : _a2.setAttribute("aria-label", replacementAria);
+      }
+      const replacementLabelledBy = (_d = (_b = inputRef.current) == null ? void 0 : _b.getAttribute("aria-labelledby")) == null ? void 0 : _d.replace(` ${(_c = inputRef.current) == null ? void 0 : _c.getAttribute("id")}`, "");
+      if (replacementLabelledBy !== void 0) {
+        (_e = inputRef.current) == null ? void 0 : _e.setAttribute(
+          "aria-labelledby",
+          replacementLabelledBy
+        );
+      }
+    }
+    if (hasLiveValue) {
+      const ariaLabel = ((_a = inputRef.current) == null ? void 0 : _a.getAttribute("aria-label")) || "";
+      if (valuesHaveDiverged()) {
+        applyAriaMessage(ariaLabel);
+      } else {
+        removeAriaMessage(ariaLabel);
+      }
+    }
+  }, [appendLabel, inputRef, hasLiveValue, valuesHaveDiverged, value]);
+  React.useEffect(() => {
+    var _a;
+    if (hasLiveValue && valuesHaveDiverged()) {
+      if (inputRef.current !== document.activeElement && !hasAnnounced) {
+        announce("");
+        announce(`${(_a = inputRef.current) == null ? void 0 : _a.getAttribute("aria-label")}`);
+        setHasAnnounced(true);
+      }
+    }
+  }, [
+    announce,
+    appendLabel,
+    hasAnnounced,
+    inputRef,
+    hasLiveValue,
+    setHasAnnounced,
+    valuesHaveDiverged,
+    value
+  ]);
+  return { setHasAnnounced };
+};
+
+exports.useDynamicAriaLabel = useDynamicAriaLabel;
+//# sourceMappingURL=useDynamicAriaLabel.js.map

package/dist-cjs/packages/lab/src/stepper-input/internal/useDynamicAriaLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDynamicAriaLabel.js","sources":["../src/stepper-input/internal/useDynamicAriaLabel.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { useAriaAnnouncer } from \"@salt-ds/core\";\n\n// Dynamically append a string to aria-label if the component\n// is controlled and the display value can be refreshed\nexport const useDynamicAriaLabel = (\n  appendLabel: string,\n  hasLiveValue: boolean,\n  inputRef: React.MutableRefObject<HTMLInputElement | null>,\n  value: number | string | undefined,\n  valuesHaveDiverged: () => boolean\n) => {\n  const [hasAnnounced, setHasAnnounced] = useState(false);\n  const { announce } = useAriaAnnouncer();\n\n  useEffect(() => {\n    function applyAriaMessage(ariaLabel: string) {\n      // Don't append the message again if it's already part of the string\n      if (!ariaLabel.includes(appendLabel)) {\n        inputRef.current?.setAttribute(\n          \"aria-label\",\n          `${ariaLabel}${appendLabel}`\n        );\n      }\n\n      const currentId = inputRef.current?.getAttribute(\"id\") || \"\";\n      const labelledBy =\n        inputRef.current?.getAttribute(\"aria-labelledby\") || \"\";\n\n      if (!labelledBy.includes(currentId)) {\n        inputRef.current?.setAttribute(\n          \"aria-labelledby\",\n          `${labelledBy} ${currentId}`\n        );\n      }\n    }\n\n    function removeAriaMessage(ariaLabel: string) {\n      const replacementAria = ariaLabel?.replace(appendLabel, \"\");\n      if (replacementAria !== undefined) {\n        inputRef.current?.setAttribute(\"aria-label\", replacementAria);\n      }\n\n      const replacementLabelledBy = inputRef.current\n        ?.getAttribute(\"aria-labelledby\")\n        ?.replace(` ${inputRef.current?.getAttribute(\"id\")}`, \"\");\n\n      if (replacementLabelledBy !== undefined) {\n        inputRef.current?.setAttribute(\n          \"aria-labelledby\",\n          replacementLabelledBy\n        );\n      }\n    }\n\n    if (hasLiveValue) {\n      const ariaLabel = inputRef.current?.getAttribute(\"aria-label\") || \"\";\n      if (valuesHaveDiverged()) {\n        applyAriaMessage(ariaLabel);\n      } else {\n        removeAriaMessage(ariaLabel);\n      }\n    }\n  }, [appendLabel, inputRef, hasLiveValue, valuesHaveDiverged, value]);\n\n  useEffect(() => {\n    if (hasLiveValue && valuesHaveDiverged()) {\n      // Screen readers will automatically announce updates when the dynamic `aria-label`\n      // changes and the component has focus. When the component *does not* have\n      // focus we should announce only once for the first value update\n      if (inputRef.current !== document.activeElement && !hasAnnounced) {\n        // Empty announcement required until a fix is in place for announcer\n        announce(\"\");\n        announce(`${inputRef.current?.getAttribute(\"aria-label\")}`);\n\n        // We only want to announce on the first value change, but this flag\n        // is reset when the input receives focus\n        setHasAnnounced(true);\n      }\n    }\n  }, [\n    announce,\n    appendLabel,\n    hasAnnounced,\n    inputRef,\n    hasLiveValue,\n    setHasAnnounced,\n    valuesHaveDiverged,\n    value,\n  ]);\n\n  return { setHasAnnounced };\n};\n"],"names":["useState","useAriaAnnouncer","useEffect","_a"],"mappings":"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"}

package/dist-cjs/packages/lab/src/stepper-input/internal/useInterval.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function useInterval(callback, delay) {
+  const savedCallback = React.useRef(null);
+  React.useEffect(() => {
+    savedCallback.current = callback;
+  });
+  React.useEffect(() => {
+    function tick() {
+      if (savedCallback.current !== null) {
+        savedCallback.current();
+      }
+    }
+    if (delay !== null) {
+      const id = setInterval(tick, delay);
+      return () => clearInterval(id);
+    }
+    return;
+  }, [delay]);
+}
+
+exports.useInterval = useInterval;
+//# sourceMappingURL=useInterval.js.map

package/dist-cjs/packages/lab/src/stepper-input/internal/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sources":["../src/stepper-input/internal/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\ntype IntervalFunction = () => unknown | void;\n\n// https://gist.github.com/iamBevan/171cce94431b8c95206086252ce0c6c7\nfunction useInterval(callback: IntervalFunction, delay: number | null) {\n  const savedCallback = useRef<IntervalFunction | null>(null);\n\n  useEffect(() => {\n    savedCallback.current = callback;\n  });\n\n  useEffect(() => {\n    function tick() {\n      if (savedCallback.current !== null) {\n        savedCallback.current();\n      }\n    }\n\n    if (delay !== null) {\n      const id = setInterval(tick, delay);\n      return () => clearInterval(id);\n    }\n    return;\n  }, [delay]);\n}\n\nexport { useInterval };\n"],"names":["useRef","useEffect"],"mappings":";;;;;;AAKA,SAAS,WAAA,CAAY,UAA4B,KAAsB,EAAA;AACrE,EAAM,MAAA,aAAA,GAAgBA,aAAgC,IAAI,CAAA,CAAA;AAE1D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,aAAA,CAAc,OAAU,GAAA,QAAA,CAAA;AAAA,GACzB,CAAA,CAAA;AAED,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,SAAS,IAAO,GAAA;AACd,MAAI,IAAA,aAAA,CAAc,YAAY,IAAM,EAAA;AAClC,QAAA,aAAA,CAAc,OAAQ,EAAA,CAAA;AAAA,OACxB;AAAA,KACF;AAEA,IAAA,IAAI,UAAU,IAAM,EAAA;AAClB,MAAM,MAAA,EAAA,GAAK,WAAY,CAAA,IAAA,EAAM,KAAK,CAAA,CAAA;AAClC,MAAO,OAAA,MAAM,cAAc,EAAE,CAAA,CAAA;AAAA,KAC/B;AACA,IAAA,OAAA;AAAA,GACF,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AACZ;;;;"}

package/dist-cjs/packages/lab/src/stepper-input/internal/useSpinner.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useInterval = require('./useInterval.js');
+
+const INTERVAL_DELAY = 300;
+function useSpinner(activationFn, isAtLimit) {
+  const [buttonDown, setButtonDown] = React.useState(false);
+  const cancelInterval = () => setButtonDown(false);
+  React.useEffect(() => {
+    if (isAtLimit)
+      setButtonDown(false);
+  }, [isAtLimit]);
+  React.useEffect(() => {
+    window.addEventListener("keyup", cancelInterval);
+    window.addEventListener("mouseup", cancelInterval);
+    return () => {
+      window.removeEventListener("keyup", cancelInterval);
+      window.removeEventListener("mouseup", cancelInterval);
+    };
+  }, []);
+  const activate = () => {
+    activationFn();
+    setButtonDown(true);
+  };
+  useInterval.useInterval(activationFn, buttonDown ? INTERVAL_DELAY : null);
+  return { activate, buttonDown };
+}
+
+exports.useSpinner = useSpinner;
+//# sourceMappingURL=useSpinner.js.map

package/dist-cjs/packages/lab/src/stepper-input/internal/useSpinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSpinner.js","sources":["../src/stepper-input/internal/useSpinner.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { useInterval } from \"./useInterval\";\n\nconst INTERVAL_DELAY = 300;\n\nfunction useSpinner(activationFn: () => void, isAtLimit: boolean) {\n  const [buttonDown, setButtonDown] = useState(false);\n\n  const cancelInterval = () => setButtonDown(false);\n\n  useEffect(() => {\n    if (isAtLimit) setButtonDown(false);\n  }, [isAtLimit]);\n\n  useEffect(() => {\n    window.addEventListener(\"keyup\", cancelInterval);\n    window.addEventListener(\"mouseup\", cancelInterval);\n    return () => {\n      window.removeEventListener(\"keyup\", cancelInterval);\n      window.removeEventListener(\"mouseup\", cancelInterval);\n    };\n  }, []);\n\n  const activate = () => {\n    activationFn();\n    setButtonDown(true);\n  };\n\n  useInterval(activationFn, buttonDown ? INTERVAL_DELAY : null);\n\n  return { activate, buttonDown };\n}\n\nexport { useSpinner };\n"],"names":["useState","useEffect","useInterval"],"mappings":";;;;;;;AAIA,MAAM,cAAiB,GAAA,GAAA,CAAA;AAEvB,SAAS,UAAA,CAAW,cAA0B,SAAoB,EAAA;AAChE,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,KAAK,CAAA,CAAA;AAElD,EAAM,MAAA,cAAA,GAAiB,MAAM,aAAA,CAAc,KAAK,CAAA,CAAA;AAEhD,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,SAAA;AAAW,MAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAAA,GACpC,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAAA,eAAA,CAAU,MAAM;AACd,IAAO,MAAA,CAAA,gBAAA,CAAiB,SAAS,cAAc,CAAA,CAAA;AAC/C,IAAO,MAAA,CAAA,gBAAA,CAAiB,WAAW,cAAc,CAAA,CAAA;AACjD,IAAA,OAAO,MAAM;AACX,MAAO,MAAA,CAAA,mBAAA,CAAoB,SAAS,cAAc,CAAA,CAAA;AAClD,MAAO,MAAA,CAAA,mBAAA,CAAoB,WAAW,cAAc,CAAA,CAAA;AAAA,KACtD,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAA,MAAM,WAAW,MAAM;AACrB,IAAa,YAAA,EAAA,CAAA;AACb,IAAA,aAAA,CAAc,IAAI,CAAA,CAAA;AAAA,GACpB,CAAA;AAEA,EAAYC,uBAAA,CAAA,YAAA,EAAc,UAAa,GAAA,cAAA,GAAiB,IAAI,CAAA,CAAA;AAE5D,EAAO,OAAA,EAAE,UAAU,UAAW,EAAA,CAAA;AAChC;;;;"}

package/dist-cjs/packages/lab/src/stepper-input/useStepperInput.js

@@ -0,0 +1,234 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var core = require('@salt-ds/core');
+var useDynamicAriaLabel = require('./internal/useDynamicAriaLabel.js');
+var useSpinner = require('./internal/useSpinner.js');
+
+const stepperDirection = {
+  INCREMENT: "increment",
+  DECREMENT: "decrement"
+};
+const ACCEPT_INPUT = /^[-+]?[0-9]*\.?([0-9]+)?/g;
+const callAll = (...fns) => (...args) => fns.forEach((fn) => fn && fn(...args));
+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 parseFloat(inputValue.toString());
+};
+const santizedInput = (numberString) => (numberString.match(ACCEPT_INPUT) || []).join("");
+const getButtonIcon = (type) => type === stepperDirection.INCREMENT ? "triangle-up" : "triangle-down";
+const useStepperInput = (props, inputRef) => {
+  const {
+    block = 10,
+    decimalPlaces = 0,
+    defaultValue = 0,
+    liveValue,
+    max = Number.MAX_SAFE_INTEGER,
+    min = Number.MIN_SAFE_INTEGER,
+    onChange,
+    step = 1,
+    value,
+    InputProps: inputPropsProp = {}
+  } = props;
+  const [currentValue, setCurrentValue, isControlled] = core.useControlled({
+    controlled: value,
+    default: toFixedDecimalPlaces(defaultValue, decimalPlaces),
+    name: "stepper-input"
+  });
+  const inputId = core.useId(inputPropsProp.id);
+  const isOutOfRange = () => {
+    if (currentValue === void 0)
+      return true;
+    return toFloat(currentValue) > max || toFloat(currentValue) < min;
+  };
+  const isAtMax = () => {
+    if (currentValue === void 0)
+      return true;
+    return toFloat(currentValue) >= max || max === 0 && currentValue === "";
+  };
+  const isAtMin = () => {
+    if (currentValue === void 0)
+      return true;
+    return toFloat(currentValue) <= min || min === 0 && currentValue === "";
+  };
+  const valuesHaveDiverged = () => {
+    if (liveValue === void 0 || currentValue === void 0)
+      return false;
+    return toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !== toFloat(currentValue);
+  };
+  const { setHasAnnounced } = useDynamicAriaLabel.useDynamicAriaLabel(
+    ", value out of date",
+    liveValue !== void 0,
+    inputRef,
+    currentValue,
+    valuesHaveDiverged
+  );
+  const decrement = () => {
+    if (currentValue === void 0 || isAtMin())
+      return;
+    let nextValue = currentValue === "" ? -step : toFloat(currentValue) - step;
+    if (max !== void 0 && isOutOfRange())
+      nextValue = max;
+    setNextValue(nextValue);
+  };
+  const decrementBlock = () => {
+    if (currentValue === void 0 || isAtMin())
+      return;
+    let nextValue = currentValue === "" ? block * -step : toFloat(currentValue) - step * block;
+    if (max !== void 0 && isOutOfRange())
+      nextValue = max;
+    setNextValue(nextValue);
+  };
+  const increment = () => {
+    if (currentValue === void 0 || isAtMax())
+      return;
+    let nextValue = currentValue === "" ? step : toFloat(currentValue) + step;
+    if (min !== void 0 && isOutOfRange())
+      nextValue = min;
+    setNextValue(nextValue);
+  };
+  const incrementBlock = () => {
+    if (currentValue === void 0 || isAtMax())
+      return;
+    let nextValue = currentValue === "" ? block * step : toFloat(currentValue) + step * block;
+    if (min !== void 0 && isOutOfRange())
+      nextValue = min;
+    setNextValue(nextValue);
+  };
+  const setNextValue = (modifiedValue) => {
+    let nextValue = modifiedValue;
+    if (nextValue < min)
+      nextValue = min;
+    if (nextValue > max)
+      nextValue = max;
+    const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);
+    if (isNaN(toFloat(roundedValue)))
+      return;
+    if (!isControlled) {
+      setCurrentValue(roundedValue);
+    }
+    if (onChange) {
+      onChange(roundedValue);
+    }
+  };
+  const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } = useSpinner.useSpinner(decrementBlock, isAtMin());
+  const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } = useSpinner.useSpinner(decrement, isAtMin());
+  const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } = useSpinner.useSpinner(incrementBlock, isAtMax());
+  const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } = useSpinner.useSpinner(increment, isAtMax());
+  const handleInputBlur = () => {
+    if (currentValue === void 0)
+      return;
+    const roundedValue = toFixedDecimalPlaces(
+      toFloat(currentValue),
+      decimalPlaces
+    );
+    if (currentValue !== "" && !isAllowedNonNumeric(currentValue) && !isControlled) {
+      setCurrentValue(roundedValue);
+    }
+    if (onChange) {
+      onChange(roundedValue);
+    }
+  };
+  const handleInputFocus = () => {
+    setHasAnnounced(false);
+  };
+  const handleInputChange = (event) => {
+    const changedValue = event.currentTarget.value;
+    if (!isControlled) {
+      setCurrentValue(santizedInput(changedValue));
+    }
+    if (onChange) {
+      onChange(santizedInput(changedValue));
+    }
+  };
+  const handleInputKeyDown = (event) => {
+    if (["ArrowUp", "ArrowDown"].includes(event.key)) {
+      event.preventDefault();
+      event.key === "ArrowUp" ? incrementSpinner() : decrementSpinner();
+    }
+    if (["PageUp", "PageDown"].includes(event.key)) {
+      event.preventDefault();
+      event.key === "PageUp" ? incrementSpinnerBlock() : decrementSpinnerBlock();
+    }
+  };
+  const handleButtonMouseDown = (event, type = stepperDirection.INCREMENT) => {
+    if (event.nativeEvent.button !== 0)
+      return;
+    type === stepperDirection.INCREMENT ? incrementSpinner() : decrementSpinner();
+  };
+  const handleButtonMouseUp = () => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const refreshCurrentValue = () => {
+    var _a;
+    const refreshedcurrentValue = liveValue !== void 0 ? liveValue : defaultValue;
+    if (refreshedcurrentValue === void 0)
+      return;
+    setCurrentValue(
+      toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)
+    );
+    (_a = inputRef.current) == null ? void 0 : _a.focus();
+    if (onChange) {
+      onChange(
+        toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)
+      );
+    }
+  };
+  const getButtonProps = (type = stepperDirection.INCREMENT, buttonPropsProp = {}) => ({
+    "aria-hidden": true,
+    tabIndex: -1,
+    ...buttonPropsProp,
+    onMouseDown: callAll(
+      (event) => handleButtonMouseDown(event, type),
+      buttonPropsProp.onMouseDown
+    ),
+    onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp)
+  });
+  const getInputProps = (inputProps = {}) => {
+    if (currentValue === void 0)
+      return void 0;
+    return {
+      ...inputProps,
+      inputProps: {
+        role: "spinbutton",
+        "aria-invalid": isOutOfRange(),
+        "aria-valuemax": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),
+        "aria-valuemin": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),
+        "aria-valuenow": toFloat(
+          toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)
+        ),
+        id: inputId,
+        ...inputProps.inputProps
+      },
+      onBlur: callAll(inputProps.onBlur, handleInputBlur),
+      onChange: callAll(inputProps.onChange, handleInputChange),
+      onFocus: callAll(inputProps.onFocus, handleInputFocus),
+      onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),
+      value: String(currentValue)
+    };
+  };
+  return {
+    decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,
+    getButtonIcon,
+    getButtonProps,
+    getInputProps,
+    incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,
+    isAtMax,
+    isAtMin,
+    refreshCurrentValue,
+    stepperDirection,
+    valuesHaveDiverged
+  };
+};
+
+exports.useStepperInput = useStepperInput;
+//# sourceMappingURL=useStepperInput.js.map

package/dist-cjs/packages/lab/src/stepper-input/useStepperInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStepperInput.js","sources":["../src/stepper-input/useStepperInput.ts"],"sourcesContent":["import { KeyboardEvent, MouseEvent, MutableRefObject } from \"react\";\nimport { ButtonProps, useControlled, useId } from \"@salt-ds/core\";\nimport { InputProps } from \"../input\";\nimport { useDynamicAriaLabel } from \"./internal/useDynamicAriaLabel\";\nimport { useSpinner } from \"./internal/useSpinner\";\nimport { StepperInputProps } from \"./StepperInput\";\n\ntype Direction = \"decrement\" | \"increment\";\n\nconst stepperDirection = {\n  INCREMENT: \"increment\" as Direction,\n  DECREMENT: \"decrement\" as Direction,\n};\n\n// The input should only accept numbers, decimal points, and plus/minus symbols\nconst ACCEPT_INPUT = /^[-+]?[0-9]*\\.?([0-9]+)?/g;\n\nconst callAll =\n  (...fns: any[]) =>\n  (...args: any[]) =>\n    fns.forEach((fn) => fn && fn(...args));\n\nconst toFixedDecimalPlaces = (inputNumber: number, decimalPlaces: number) =>\n  inputNumber.toFixed(decimalPlaces);\n\nconst isAllowedNonNumeric = (inputCharacter: number | string) => {\n  if (typeof inputCharacter === \"number\") return;\n  return (\n    (\"-+\".includes(inputCharacter) && inputCharacter.length === 1) ||\n    inputCharacter === \"\"\n  );\n};\n\nconst toFloat = (inputValue: number | string) => {\n  // Plus, minus, and empty characters are treated as 0\n  if (isAllowedNonNumeric(inputValue)) return 0;\n  return parseFloat(inputValue.toString());\n};\n\nconst santizedInput = (numberString: string) =>\n  (numberString.match(ACCEPT_INPUT) || []).join(\"\");\n\nconst getButtonIcon = (type: Direction) =>\n  type === stepperDirection.INCREMENT ? \"triangle-up\" : \"triangle-down\";\n\nexport const useStepperInput = (\n  props: StepperInputProps,\n  inputRef: MutableRefObject<HTMLInputElement | null>\n) => {\n  const {\n    block = 10,\n    decimalPlaces = 0,\n    defaultValue = 0,\n    liveValue,\n    max = Number.MAX_SAFE_INTEGER,\n    min = Number.MIN_SAFE_INTEGER,\n    onChange,\n    step = 1,\n    value,\n    InputProps: inputPropsProp = {},\n  } = props;\n\n  const [currentValue, setCurrentValue, isControlled] = useControlled({\n    controlled: value,\n    default: toFixedDecimalPlaces(defaultValue, decimalPlaces),\n    name: \"stepper-input\",\n  });\n  const inputId = useId(inputPropsProp.id);\n\n  const isOutOfRange = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) > max || toFloat(currentValue) < min;\n  };\n\n  const isAtMax = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) >= max || (max === 0 && currentValue === \"\");\n  };\n\n  const isAtMin = () => {\n    if (currentValue === undefined) return true;\n    return toFloat(currentValue) <= min || (min === 0 && currentValue === \"\");\n  };\n\n  const valuesHaveDiverged = () => {\n    if (liveValue === undefined || currentValue === undefined) return false;\n    return (\n      toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !==\n      toFloat(currentValue)\n    );\n  };\n\n  const { setHasAnnounced } = useDynamicAriaLabel(\n    \", value out of date\",\n    liveValue !== undefined,\n    inputRef,\n    currentValue,\n    valuesHaveDiverged\n  );\n\n  const decrement = () => {\n    if (currentValue === undefined || isAtMin()) return;\n    let nextValue = currentValue === \"\" ? -step : toFloat(currentValue) - step;\n\n    // Set value to `max` if it's currently out of range\n    if (max !== undefined && isOutOfRange()) nextValue = max;\n\n    setNextValue(nextValue);\n  };\n\n  const decrementBlock = () => {\n    if (currentValue === undefined || isAtMin()) return;\n    let nextValue =\n      currentValue === \"\"\n        ? block * -step\n        : toFloat(currentValue) - step * block;\n\n    // Set value to `max` if it's currently out of range\n    if (max !== undefined && isOutOfRange()) nextValue = max;\n\n    setNextValue(nextValue);\n  };\n\n  const increment = () => {\n    if (currentValue === undefined || isAtMax()) return;\n    let nextValue = currentValue === \"\" ? step : toFloat(currentValue) + step;\n\n    // Set value to `min` if it's currently out of range\n    if (min !== undefined && isOutOfRange()) nextValue = min;\n\n    setNextValue(nextValue);\n  };\n\n  const incrementBlock = () => {\n    if (currentValue === undefined || isAtMax()) return;\n    let nextValue =\n      currentValue === \"\" ? block * step : toFloat(currentValue) + step * block;\n\n    // Set value to `min` if it's currently out of range\n    if (min !== undefined && isOutOfRange()) nextValue = min;\n\n    setNextValue(nextValue);\n  };\n\n  const setNextValue = (modifiedValue: number) => {\n    let nextValue = modifiedValue;\n    if (nextValue < min) nextValue = min;\n    if (nextValue > max) nextValue = max;\n\n    const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n    if (isNaN(toFloat(roundedValue))) return;\n\n    if (!isControlled) {\n      setCurrentValue(roundedValue);\n    }\n\n    if (onChange) {\n      onChange(roundedValue);\n    }\n  };\n\n  const { activate: decrementSpinnerBlock, buttonDown: pgDnButtonDown } =\n    useSpinner(decrementBlock, isAtMin());\n\n  const { activate: decrementSpinner, buttonDown: arrowDownButtonDown } =\n    useSpinner(decrement, isAtMin());\n\n  const { activate: incrementSpinnerBlock, buttonDown: pgUpButtonDown } =\n    useSpinner(incrementBlock, isAtMax());\n\n  const { activate: incrementSpinner, buttonDown: arrowUpButtonDown } =\n    useSpinner(increment, isAtMax());\n\n  const handleInputBlur = () => {\n    if (currentValue === undefined) return;\n\n    const roundedValue = toFixedDecimalPlaces(\n      toFloat(currentValue),\n      decimalPlaces\n    );\n\n    if (\n      currentValue !== \"\" &&\n      !isAllowedNonNumeric(currentValue) &&\n      !isControlled\n    ) {\n      setCurrentValue(roundedValue);\n    }\n\n    if (onChange) {\n      onChange(roundedValue);\n    }\n  };\n\n  const handleInputFocus = () => {\n    setHasAnnounced(false);\n  };\n\n  const handleInputChange = (event: KeyboardEvent) => {\n    const changedValue = (event.currentTarget as HTMLInputElement).value;\n\n    if (!isControlled) {\n      setCurrentValue(santizedInput(changedValue));\n    }\n\n    if (onChange) {\n      onChange(santizedInput(changedValue));\n    }\n  };\n\n  const handleInputKeyDown = (event: KeyboardEvent) => {\n    if ([\"ArrowUp\", \"ArrowDown\"].includes(event.key)) {\n      event.preventDefault();\n      event.key === \"ArrowUp\" ? incrementSpinner() : decrementSpinner();\n    }\n    if ([\"PageUp\", \"PageDown\"].includes(event.key)) {\n      event.preventDefault();\n      event.key === \"PageUp\"\n        ? incrementSpinnerBlock()\n        : decrementSpinnerBlock();\n    }\n  };\n\n  const handleButtonMouseDown = (\n    event: MouseEvent<HTMLButtonElement>,\n    type: Direction = stepperDirection.INCREMENT\n  ) => {\n    if (event.nativeEvent.button !== 0) return;\n    type === stepperDirection.INCREMENT\n      ? incrementSpinner()\n      : decrementSpinner();\n  };\n\n  const handleButtonMouseUp = () => inputRef.current?.focus();\n\n  const refreshCurrentValue = () => {\n    const refreshedcurrentValue =\n      liveValue !== undefined ? liveValue : defaultValue;\n    if (refreshedcurrentValue === undefined) return;\n\n    setCurrentValue(\n      toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n    );\n\n    inputRef.current?.focus();\n\n    if (onChange) {\n      onChange(\n        toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)\n      );\n    }\n  };\n\n  const getButtonProps = (\n    type: Direction = stepperDirection.INCREMENT,\n    buttonPropsProp: ButtonProps = {}\n  ) => ({\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    ...buttonPropsProp,\n    onMouseDown: callAll(\n      (event: MouseEvent<HTMLButtonElement>) =>\n        handleButtonMouseDown(event, type),\n      buttonPropsProp.onMouseDown\n    ),\n    onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp),\n  });\n\n  const getInputProps = (\n    inputProps: InputProps = {}\n  ): InputProps | undefined => {\n    if (currentValue === undefined) return undefined;\n    return {\n      ...inputProps,\n      inputProps: {\n        role: \"spinbutton\",\n        \"aria-invalid\": isOutOfRange(),\n        \"aria-valuemax\": toFloat(toFixedDecimalPlaces(max, decimalPlaces)),\n        \"aria-valuemin\": toFloat(toFixedDecimalPlaces(min, decimalPlaces)),\n        \"aria-valuenow\": toFloat(\n          toFixedDecimalPlaces(toFloat(currentValue), decimalPlaces)\n        ),\n        id: inputId,\n        ...inputProps.inputProps,\n      },\n      onBlur: callAll(inputProps.onBlur, handleInputBlur),\n      onChange: callAll(inputProps.onChange, handleInputChange),\n      onFocus: callAll(inputProps.onFocus, handleInputFocus),\n      onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),\n      value: String(currentValue),\n    };\n  };\n\n  return {\n    decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,\n    getButtonIcon,\n    getButtonProps,\n    getInputProps,\n    incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,\n    isAtMax,\n    isAtMin,\n    refreshCurrentValue,\n    stepperDirection,\n    valuesHaveDiverged,\n  };\n};\n"],"names":["useControlled","useId","useDynamicAriaLabel","useSpinner"],"mappings":"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"}

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

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Styles applied to root element */\n.salt-density-touch {\n  --switch-width: 44px;\n  --switch-thumb-margin: 3px 0 0 3px;\n  --switch-thumb-size: 18px;\n  --switch-thumb-translate: 20px;\n  --switch-height: 24px;\n}\n\n.salt-density-low {\n  --switch-width: 38px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 16px;\n  --switch-thumb-translate: 18px;\n  --switch-height: 20px;\n}\n\n.salt-density-medium {\n  --switch-width: 34px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 14px;\n  --switch-thumb-translate: 16px;\n  --switch-height: 18px;\n}\n\n.salt-density-high {\n  --switch-width: 30px;\n  --switch-thumb-margin: 2px 0 0 2px;\n  --switch-thumb-size: 12px;\n  --switch-thumb-translate: 14px;\n  --switch-height: 16px;\n}\n\n.saltSwitch {\n  --switch-label-color: var(--salt-text-secondary-foreground);\n  --switch-thumb-background: var(--salt-selectable-primary-foreground-selected);\n  --switch-track-color: var(--salt-selectable-borderColor);\n  --switch-track-color-hover: var(--salt-selectable-borderColor-hover);\n  --switch-track-color-disabled: var(--salt-selectable-borderColor-disabled);\n  --switch-track-color-checked: var(--salt-selectable-borderColor-selected);\n  --switch-track-color-checked-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n  --switch-tick-color: var(--salt-selectable-borderColor-selected);\n  --switch-tick-color-disabled: var(--salt-selectable-borderColor-selectedDisabled);\n}\n\n.saltSwitch {\n  box-sizing: content-box;\n  display: inline-flex;\n  flex-shrink: 0;\n  height: var(--saltSwitch-height, var(--switch-height));\n  margin-left: 0;\n  overflow: visible;\n  padding: 0;\n  position: relative;\n  vertical-align: middle;\n  width: var(--saltSwitch-width, var(--switch-width));\n  z-index: 0;\n}\n\n/* Styles applied to outer ControlLabel component */\n.saltSwitch-label {\n  position: relative;\n  margin-left: 0;\n  margin-right: 0;\n  vertical-align: middle;\n}\n\n/* Styles applied to outer ControlLabel component's text */\n.saltSwitch-label .saltControlLabel-text {\n  color: var(--saltSwitch-label-color, var(--switch-label-color));\n  line-height: var(--saltSwitch-label-lineHeight, var(--salt-text-lineHeight));\n  text-align: right;\n}\n\n/* Styles applied to track on hover  */\n.saltSwitch-label:hover .saltSwitch-track {\n  background: var(--saltSwitch-track-color-hover, var(--switch-track-color-hover));\n}\n\n/* Styles applied to track on hover if `disabled={true}` */\n.saltSwitch-label.saltSwitch-disabled:hover .saltSwitch-track {\n  background: var(--saltSwitch-track-color-disabled, var(--switch-track-color-disabled));\n}\n\n/* Styles applied to track on hover when checked  */\n.saltSwitch-label:hover .saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked-hover, var(--switch-track-color-checked));\n}\n\n/* Styles applied to base */\n.saltSwitch-base {\n  background: transparent;\n  display: inline-flex;\n  flex: 0 0 auto;\n  height: var(--saltSwitch-base-height, var(--switch-thumb-size));\n  justify-content: flex-start;\n  margin: var(--saltSwitch-base-margin, var(--switch-thumb-margin));\n  overflow: visible;\n  padding: 0;\n  position: absolute;\n  text-align: center;\n  transition: left 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  width: var(--saltSwitch-base-width, var(--switch-thumb-size));\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to track */\n.saltSwitch-track {\n  background: var(--saltSwitch-track-color, var(--switch-track-color));\n  border-radius: var(--saltSwitch-track-borderRadius, 0);\n  height: var(--saltSwitch-track-height, var(--switch-height));\n  min-height: var(--saltSwitch-track-minHeight, 16px);\n  margin-top: 0;\n  margin-left: 0;\n  opacity: 1;\n  position: absolute;\n  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;\n  transform: var(--saltSwitch-track-transform, none);\n  width: var(--saltSwitch-track-width, var(--switch-width));\n  z-index: -1;\n}\n\n/* Styles applied to input element and icon container */\n.saltSwitch-inputContainer {\n  align-items: inherit;\n  display: flex;\n  justify-content: inherit;\n  transform: translateX(var(--saltSwitch-inputContainer-translate-x, 0px));\n  transition: transform 0.15s;\n  width: 100%;\n}\n\n/* Styles applied to input element */\n.saltSwitch-input {\n  cursor: inherit;\n  height: 100%;\n  left: -100%;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 100%;\n  z-index: var(--salt-zIndex-default);\n}\n\n/* Styles applied to thumb, and icon if `checked={true}` */\n.saltSwitch-thumb,\n.saltSwitch-checked .saltSwitch-icon {\n  background: var(--saltSwitch-thumb-background, var(--switch-thumb-background));\n  border-radius: var(--saltSwitch-thumb-borderRadius, 0);\n  border: var(--saltSwitch-thumb-border, none);\n  box-shadow: none;\n  width: var(--saltSwitch-thumb-width, var(--switch-thumb-size));\n  height: var(--saltSwitch-thumb-height, var(--switch-thumb-size));\n  fill: var(--saltSwitch-thumb-background, var(--switch-thumb-background));\n  outline: 1px solid transparent;\n}\n\n/* Styles applied to base if `checked={true}` */\n.saltSwitch-base.saltSwitch-checked {\n  transform: none;\n}\n\n/* Styles applied to input container if `checked={true}` */\n.saltSwitch-base.saltSwitch-checked .saltSwitch-inputContainer {\n  transform: translateX(var(--saltSwitch-thumb-translate, var(--switch-thumb-translate)));\n}\n\n/* Styles applied to tracks where `checked={true}` */\n.saltSwitch-base.saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked, var(--switch-track-color-checked));\n  border: var(--saltSwitch-track-border-checked, 1px solid var(--switch-track-color-checked));\n}\n\n/* Styles applied to icon tick shown when `checked={true}` */\n.saltSwitch-iconTick {\n  fill: var(--saltSwitch-icon-color-checked, var(--switch-tick-color));\n}\n\n/* Styles applied to icon tick shown when `checked={true}` and `disabled={true}` */\n.saltSwitch-disabled .saltSwitch-iconTick {\n  fill: var(--saltSwitch-icon-color-checked-disabled, var(--switch-tick-color-disabled));\n}\n\n/* Styles applied when `focusVisible={true}` */\n.saltSwitch-focusVisible:before {\n  background: transparent;\n  content: \"\";\n  display: block;\n  height: var(--saltSwitch-focused-height, var(--switch-height));\n  left: var(--saltSwitch-focused-left, -2px);\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n  position: absolute;\n  top: var(--saltSwitch-focused-top, -2px);\n  width: var(--saltSwitch-focused-width, var(--switch-width));\n}\n\n/* Styles applied to tracks when `focusVisible={true}` */\n.saltSwitch-focusVisible + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-hover, var(--switch-track-color-hover));\n}\n\n/* Styles applied to track if `disabled={true}` */\n.saltSwitch-disabled .saltSwitch-base + .saltSwitch-track {\n  background: var(--switch-track-color-disabled);\n  border: transparent;\n}\n\n/* Styles applied to track if `disabled={true}` and `checked={true}` */\n.saltSwitch-disabled .saltSwitch-base.saltSwitch-checked + .saltSwitch-track,\n.saltSwitch-label.saltSwitch-disabled:hover .saltSwitch-checked + .saltSwitch-track {\n  background: var(--saltSwitch-track-color-checked-disabled, var(--switch-track-color-checked-disabled));\n  border: transparent;\n}\n\n/* Styles applied to thumb and icon if `disabled={true}`  */\n.saltSwitch-disabled .saltSwitch-thumb,\n.saltSwitch-disabled:hover .saltSwitch-thumb,\n.saltSwitch-disabled .saltSwitch-checked .saltSwitch-icon,\n.saltSwitch-disabled:hover .saltSwitch-checked .saltSwitch-icon,\n.saltSwitch-disabled,\n.saltSwitch-disabled:hover {\n  --switch-thumb-background: var(--salt-selectable-primary-foreground-selectedDisabled);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Switch.css.js.map