@salt-ds/lab 1.0.0-alpha.44 → 1.0.0-alpha.45

package/dist-types/tabs/TabActivationIndicator.d.ts

@@ -4,5 +4,5 @@ interface TabActivationIndicatorProps {
     disableAnimation?: boolean;
     tabId?: string | null;
 }
-export declare const TabActivationIndicator: ({ hideThumb, orientation, tabId, }: TabActivationIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TabActivationIndicator: ({ hideThumb, orientation, tabId, }: TabActivationIndicatorProps) => JSX.Element;
 export {};

package/dist-types/toolbar/Tooltray.d.ts

@@ -1,2 +1,2 @@
 import { TooltrayProps } from "./TooltrayProps";
-export declare const Tooltray: (props: TooltrayProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Tooltray: (props: TooltrayProps) => JSX.Element;

package/dist-types/tree/TreeNode.d.ts

@@ -9,4 +9,4 @@ export interface TreeNodeProps extends Omit<HTMLAttributes<HTMLLIElement>, "onMo
     onMouseEnter?: MouseEventHandler;
     selected?: boolean;
 }
-export declare const TreeNode: ({ "aria-level": ariaLevel, children, className: classNameProp, description, highlighted, idx, isLeaf, label, onMouseEnter, selected, ...props }: TreeNodeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TreeNode: ({ "aria-level": ariaLevel, children, className: classNameProp, description, highlighted, idx, isLeaf, label, onMouseEnter, selected, ...props }: TreeNodeProps) => JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salt-ds/lab",
-  "version": "1.0.0-alpha.44",
+  "version": "1.0.0-alpha.45",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react-window": "^1.8.6",
     "rifm": "^0.12.0",
     "tinycolor2": "^1.4.2",
-    "@salt-ds/core": "^1.27.1",
+    "@salt-ds/core": "^1.28.0",
     "@salt-ds/window": "^0.1.1",
     "@salt-ds/styles": "^0.2.1",
     "@salt-ds/icons": "^1.11.2"

package/dist-cjs/stepper-input/internal/useActivationIndicatorPosition.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var core = require('@salt-ds/core');
-require('../../form-field-context-legacy/FormFieldLegacyContext.js');
-var useFormFieldLegacyProps = require('../../form-field-context-legacy/useFormFieldLegacyProps.js');
-
-const refreshButtonWidth = {
-  touch: 36,
-  low: 28,
-  medium: 24,
-  high: 12
-};
-function useActivationIndicatorPosition(adornmentRef, refreshButtonVisible) {
-  const formFieldProps = useFormFieldLegacyProps.useFormFieldLegacyProps();
-  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/stepper-input/internal/useActivationIndicatorPosition.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useActivationIndicatorPosition.js","sources":["../src/stepper-input/internal/useActivationIndicatorPosition.ts"],"sourcesContent":["import { useDensity, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useFormFieldLegacyProps } from \"../../form-field-context-legacy\";\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 = useFormFieldLegacyProps();\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":["useFormFieldLegacyProps","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,+CAAwB,EAAA,CAAA;AAC/C,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/stepper-input/internal/useDynamicAriaLabel.js

@@ -1,76 +0,0 @@
-'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/stepper-input/internal/useDynamicAriaLabel.js.map

@@ -1 +0,0 @@
-{"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-es/stepper-input/internal/useActivationIndicatorPosition.js

@@ -1,34 +0,0 @@
-import { useDensity, useIsomorphicLayoutEffect } from '@salt-ds/core';
-import '../../form-field-context-legacy/FormFieldLegacyContext.js';
-import { useFormFieldLegacyProps } from '../../form-field-context-legacy/useFormFieldLegacyProps.js';
-
-const refreshButtonWidth = {
-  touch: 36,
-  low: 28,
-  medium: 24,
-  high: 12
-};
-function useActivationIndicatorPosition(adornmentRef, refreshButtonVisible) {
-  const formFieldProps = useFormFieldLegacyProps();
-  const { ref: formFieldRef } = formFieldProps;
-  const density = useDensity();
-  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)`;
-      }
-    }
-  });
-}
-
-export { useActivationIndicatorPosition };
-//# sourceMappingURL=useActivationIndicatorPosition.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"useActivationIndicatorPosition.js","sources":["../src/stepper-input/internal/useActivationIndicatorPosition.ts"],"sourcesContent":["import { useDensity, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { useFormFieldLegacyProps } from \"../../form-field-context-legacy\";\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 = useFormFieldLegacyProps();\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":[],"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,iBAAiB,uBAAwB,EAAA,CAAA;AAC/C,EAAM,MAAA,EAAE,GAAK,EAAA,YAAA,EAAiB,GAAA,cAAA,CAAA;AAC9B,EAAA,MAAM,UAAU,UAAW,EAAA,CAAA;AAE3B,EAAA,yBAAA,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-es/stepper-input/internal/useDynamicAriaLabel.js

@@ -1,72 +0,0 @@
-import { useState, useEffect } from 'react';
-import { useAriaAnnouncer } from '@salt-ds/core';
-
-const useDynamicAriaLabel = (appendLabel, hasLiveValue, inputRef, value, valuesHaveDiverged) => {
-  const [hasAnnounced, setHasAnnounced] = useState(false);
-  const { announce } = useAriaAnnouncer();
-  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]);
-  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 };
-};
-
-export { useDynamicAriaLabel };
-//# sourceMappingURL=useDynamicAriaLabel.js.map

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

@@ -1 +0,0 @@
-{"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":["_a"],"mappings":"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"}

package/dist-types/stepper-input/internal/useActivationIndicatorPosition.d.ts

@@ -1,2 +0,0 @@
-import { MutableRefObject } from "react";
-export declare function useActivationIndicatorPosition(adornmentRef: MutableRefObject<HTMLDivElement | null>, refreshButtonVisible: boolean): void;

package/dist-types/stepper-input/internal/useDynamicAriaLabel.d.ts

@@ -1,3 +0,0 @@
-export declare const useDynamicAriaLabel: (appendLabel: string, hasLiveValue: boolean, inputRef: React.MutableRefObject<HTMLInputElement | null>, value: number | string | undefined, valuesHaveDiverged: () => boolean) => {
-    setHasAnnounced: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-};