@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/responsive/utils.js

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const COLLAPSIBLE = "data-collapsible";
+const RESPONSIVE_ATTRIBUTE = {
+  [COLLAPSIBLE]: true,
+  "data-pad-start": true,
+  "data-pad-end": true
+};
+const isResponsiveAttribute = (propName) => {
+  var _a;
+  return (_a = RESPONSIVE_ATTRIBUTE[propName]) != null ? _a : false;
+};
+const isCollapsible = (propName) => propName === COLLAPSIBLE;
+const COLLAPSIBLE_VALUE = {
+  dynamic: "dynamic",
+  instant: "instant",
+  true: "instant"
+};
+const collapsibleValue = (value) => {
+  var _a;
+  return (_a = COLLAPSIBLE_VALUE[value]) != null ? _a : "none";
+};
+const liftResponsivePropsToFormField = (props) => {
+  const propNames = Object.keys(props);
+  if (propNames.some(isResponsiveAttribute)) {
+    return propNames.reduce(
+      (tuple, propName) => {
+        const [toolbarProps, rest] = tuple;
+        const propValue = props[propName];
+        if (isResponsiveAttribute(propName)) {
+          const value = isCollapsible(propName) ? collapsibleValue(propValue) : propValue;
+          toolbarProps[propName] = value;
+          rest[propName] = void 0;
+        }
+        return tuple;
+      },
+      [{}, {}]
+    );
+  } else {
+    return [{}, props];
+  }
+};
+
+exports.isResponsiveAttribute = isResponsiveAttribute;
+exports.liftResponsivePropsToFormField = liftResponsivePropsToFormField;
+//# sourceMappingURL=utils.js.map

package/dist-cjs/packages/lab/src/responsive/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../src/responsive/utils.ts"],"sourcesContent":["const COLLAPSIBLE = \"data-collapsible\";\n\nexport type dataPadDirection = \"data-pad-start\" | \"data-pad-end\";\n\nconst RESPONSIVE_ATTRIBUTE: { [key: string]: boolean } = {\n  [COLLAPSIBLE]: true,\n  \"data-pad-start\": true,\n  \"data-pad-end\": true,\n};\n\nexport const isResponsiveAttribute = (propName: string): boolean =>\n  RESPONSIVE_ATTRIBUTE[propName] ?? false;\n\nconst isCollapsible = (propName: string) => propName === COLLAPSIBLE;\n\nconst COLLAPSIBLE_VALUE: { [key: string]: string } = {\n  dynamic: \"dynamic\",\n  instant: \"instant\",\n  true: \"instant\",\n};\n\nconst collapsibleValue = (value: string) => COLLAPSIBLE_VALUE[value] ?? \"none\";\n\ntype AnyProps = Record<string, unknown>;\ntype ResponsivePropsTuple = [AnyProps, AnyProps];\n/**\n * data- attributes can be used to manage item overflow behaviour. Users may\n * speficy these attributes directly on a Toolbar component, which ultimately\n * gets wrapped by a FormField. We need to 'lift' these attributes to the form\n * field and remove them from the props of the nested component.\n * @param props\n * @returns\n */\nexport const liftResponsivePropsToFormField = (\n  props: AnyProps\n): ResponsivePropsTuple => {\n  const propNames = Object.keys(props);\n  if (propNames.some(isResponsiveAttribute)) {\n    return propNames.reduce<ResponsivePropsTuple>(\n      (tuple, propName): ResponsivePropsTuple => {\n        const [toolbarProps, rest] = tuple;\n        const propValue = props[propName];\n        if (isResponsiveAttribute(propName)) {\n          const value = isCollapsible(propName)\n            ? collapsibleValue(propValue as string)\n            : propValue;\n\n          toolbarProps[propName] = value;\n          rest[propName] = undefined;\n        }\n        return tuple;\n      },\n      [{}, {}]\n    );\n  } else {\n    return [{}, props];\n  }\n};\n"],"names":[],"mappings":";;;;AAAA,MAAM,WAAc,GAAA,kBAAA,CAAA;AAIpB,MAAM,oBAAmD,GAAA;AAAA,EACvD,CAAC,WAAc,GAAA,IAAA;AAAA,EACf,gBAAkB,EAAA,IAAA;AAAA,EAClB,cAAgB,EAAA,IAAA;AAClB,CAAA,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,QAA2B,KAAA;AAVjE,EAAA,IAAA,EAAA,CAAA;AAWE,EAAA,OAAA,CAAA,EAAA,GAAA,oBAAA,CAAqB,cAArB,IAAkC,GAAA,EAAA,GAAA,KAAA,CAAA;AAAA,EAAA;AAEpC,MAAM,aAAA,GAAgB,CAAC,QAAA,KAAqB,QAAa,KAAA,WAAA,CAAA;AAEzD,MAAM,iBAA+C,GAAA;AAAA,EACnD,OAAS,EAAA,SAAA;AAAA,EACT,OAAS,EAAA,SAAA;AAAA,EACT,IAAM,EAAA,SAAA;AACR,CAAA,CAAA;AAEA,MAAM,gBAAA,GAAmB,CAAC,KAAe,KAAA;AArBzC,EAAA,IAAA,EAAA,CAAA;AAqB4C,EAAA,OAAA,CAAA,EAAA,GAAA,iBAAA,CAAkB,WAAlB,IAA4B,GAAA,EAAA,GAAA,MAAA,CAAA;AAAA,CAAA,CAAA;AAY3D,MAAA,8BAAA,GAAiC,CAC5C,KACyB,KAAA;AACzB,EAAM,MAAA,SAAA,GAAY,MAAO,CAAA,IAAA,CAAK,KAAK,CAAA,CAAA;AACnC,EAAI,IAAA,SAAA,CAAU,IAAK,CAAA,qBAAqB,CAAG,EAAA;AACzC,IAAA,OAAO,SAAU,CAAA,MAAA;AAAA,MACf,CAAC,OAAO,QAAmC,KAAA;AACzC,QAAM,MAAA,CAAC,YAAc,EAAA,IAAI,CAAI,GAAA,KAAA,CAAA;AAC7B,QAAA,MAAM,YAAY,KAAM,CAAA,QAAA,CAAA,CAAA;AACxB,QAAI,IAAA,qBAAA,CAAsB,QAAQ,CAAG,EAAA;AACnC,UAAA,MAAM,QAAQ,aAAc,CAAA,QAAQ,CAChC,GAAA,gBAAA,CAAiB,SAAmB,CACpC,GAAA,SAAA,CAAA;AAEJ,UAAA,YAAA,CAAa,QAAY,CAAA,GAAA,KAAA,CAAA;AACzB,UAAA,IAAA,CAAK,QAAY,CAAA,GAAA,KAAA,CAAA,CAAA;AAAA,SACnB;AACA,QAAO,OAAA,KAAA,CAAA;AAAA,OACT;AAAA,MACA,CAAC,EAAI,EAAA,EAAE,CAAA;AAAA,KACT,CAAA;AAAA,GACK,MAAA;AACL,IAAO,OAAA,CAAC,EAAC,EAAG,KAAK,CAAA,CAAA;AAAA,GACnB;AACF;;;;;"}

package/dist-cjs/packages/lab/src/scrim/Scrim.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Style applied to the root element */\n.saltScrim {\n  top: 0;\n  left: 0;\n  right: 0;\n  width: 100%;\n  bottom: 0;\n  height: 100%;\n  display: flex;\n  z-index: 1199;\n  position: fixed;\n  align-items: center;\n  justify-content: center;\n  background: var(--saltScrim-background, var(--salt-overlayable-background));\n  -webkit-tap-highlight-color: transparent;\n}\n\n.saltScrim:focus {\n  outline: none;\n}\n\n/* Style applied to the root element when containerFix={true} */\n.saltScrim-containerFix {\n  position: absolute;\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Scrim.css.js.map

package/dist-cjs/packages/lab/src/scrim/Scrim.css.js.map

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

package/dist-cjs/packages/lab/src/scrim/Scrim.js

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var ariaHidden = require('aria-hidden');
+var cx = require('classnames');
+var noScroll = require('no-scroll');
+var React = require('react');
+var core = require('@salt-ds/core');
+var FocusManager = require('../focus-manager/FocusManager.js');
+var PreventFocus = require('./internal/PreventFocus.js');
+var ScrimContext = require('./ScrimContext.js');
+require('./Scrim.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+var noScroll__default = /*#__PURE__*/_interopDefaultLegacy(noScroll);
+
+const scrims = /* @__PURE__ */ new Set();
+const getDefaultParent = () => typeof document !== "undefined" ? document.body : null;
+const noop = () => {
+};
+const withBaseName = core.makePrefixer("saltScrim");
+function preventSelection(parent = getDefaultParent()) {
+  if (parent) {
+    const previous = parent.style.userSelect;
+    parent.style.userSelect = "none";
+    return () => {
+      parent.style.userSelect = previous;
+    };
+  }
+  return noop;
+}
+const defaultSelector = `
+[tabindex="0"],
+a:not([tabindex="-1"]),
+area:not([tabindex="-1"]),
+details:not([tabindex="-1"]),
+iframe:not([tabindex="-1"]),
+select:not([tabindex="-1"]),
+textarea:not([tabindex="-1"]),
+button:not([tabindex="-1"]),
+input:not([tabindex="-1"])
+`;
+const Scrim = React.forwardRef(function Scrim2({
+  autoFocusRef,
+  closeWithEscape = false,
+  className,
+  children,
+  disableAutoFocus,
+  disableFocusTrap,
+  disableReturnFocus,
+  fallbackFocusRef,
+  onBackDropClick,
+  onClose,
+  open,
+  containerRef,
+  enableContainerMode = false,
+  returnFocusOptions,
+  tabEnabledSelectors = defaultSelector,
+  zIndex,
+  ...rest
+}, ref) {
+  const scrimRef = React.useRef(null);
+  const setWrapperRef = core.useForkRef(ref, scrimRef);
+  const undoAria = React.useRef(noop);
+  const undoSelection = React.useRef(noop);
+  const undoTabIndex = React.useRef(noop);
+  const scrimId = core.useId();
+  React.useEffect(() => {
+    if (open && !(containerRef == null ? void 0 : containerRef.current)) {
+      scrims.add(scrimId);
+      noScroll__default["default"].on();
+    }
+    return () => {
+      if (open) {
+        scrims.delete(scrimId);
+        if (scrims.size === 0) {
+          noScroll__default["default"].off();
+        }
+      }
+    };
+  }, [open, containerRef, scrimId]);
+  React.useEffect(() => {
+    if (open) {
+      const parent = (containerRef == null ? void 0 : containerRef.current) || void 0;
+      if (scrimRef.current) {
+        undoAria.current = ariaHidden.hideOthers(scrimRef.current, parent);
+      }
+    }
+    return () => {
+      var _a;
+      (_a = undoAria.current) == null ? void 0 : _a.call(undoAria);
+    };
+  }, [open, containerRef]);
+  React.useEffect(() => {
+    if (open) {
+      const parent = containerRef == null ? void 0 : containerRef.current;
+      if (parent) {
+        undoSelection.current = preventSelection(parent);
+        undoTabIndex.current = PreventFocus.preventFocusOthers(
+          scrimRef.current,
+          tabEnabledSelectors,
+          parent
+        );
+      }
+    }
+    return () => {
+      var _a, _b;
+      (_a = undoSelection.current) == null ? void 0 : _a.call(undoSelection);
+      (_b = undoTabIndex.current) == null ? void 0 : _b.call(undoTabIndex);
+    };
+  }, [open, containerRef, tabEnabledSelectors]);
+  React.useEffect(() => {
+    if (closeWithEscape && open && scrimRef.current) {
+      const escapeHandler = (event) => {
+        if (event.key === "Escape") {
+          onClose == null ? void 0 : onClose();
+        }
+      };
+      const doc = core.ownerDocument(scrimRef.current);
+      doc.addEventListener("keydown", escapeHandler);
+      return () => {
+        doc.removeEventListener("keydown", escapeHandler);
+      };
+    }
+  }, [closeWithEscape, onClose, open]);
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", {
+    "aria-modal": !enableContainerMode,
+    className: cx__default["default"](className, withBaseName(), {
+      [withBaseName("containerFix")]: enableContainerMode
+    }),
+    "data-testid": "scrim",
+    onClick: onBackDropClick,
+    ref: setWrapperRef,
+    role: "dialog",
+    style: {
+      zIndex
+    },
+    ...rest,
+    children: /* @__PURE__ */ jsxRuntime.jsx(FocusManager.FocusManager, {
+      active: open,
+      autoFocusRef,
+      disableAutoFocus,
+      disableFocusTrap: disableFocusTrap || !!enableContainerMode,
+      disableReturnFocus,
+      returnFocusOptions,
+      tabEnabledSelectors,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ScrimContext.ScrimContext.Provider, {
+        value: onClose,
+        children
+      })
+    })
+  });
+});
+
+exports.Scrim = Scrim;
+//# sourceMappingURL=Scrim.js.map

package/dist-cjs/packages/lab/src/scrim/Scrim.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Scrim.js","sources":["../src/scrim/Scrim.tsx"],"sourcesContent":["import { hideOthers } from \"aria-hidden\";\nimport classnames from \"classnames\";\nimport noScroll from \"no-scroll\";\nimport {\n  forwardRef,\n  HTMLAttributes,\n  RefObject,\n  SyntheticEvent,\n  useEffect,\n  useRef,\n} from \"react\";\nimport { makePrefixer, ownerDocument, useForkRef, useId } from \"@salt-ds/core\";\nimport { FocusManager, FocusManagerProps } from \"../focus-manager\";\nimport { preventFocusOthers } from \"./internal/PreventFocus\";\nimport { ScrimContext } from \"./ScrimContext\";\n\nimport \"./Scrim.css\";\n\nconst scrims = new Set();\n\nconst getDefaultParent = () =>\n  typeof document !== \"undefined\" ? document.body : null;\n\n// eslint-disable-next-line @typescript-eslint/no-empty-function\nconst noop = () => {};\n\nconst withBaseName = makePrefixer(\"saltScrim\");\n\nfunction preventSelection(parent = getDefaultParent()): () => void {\n  if (parent) {\n    const previous = parent.style.userSelect;\n    parent.style.userSelect = \"none\";\n\n    return () => {\n      parent.style.userSelect = previous;\n    };\n  }\n  return noop;\n}\n\nconst defaultSelector = `\n[tabindex=\"0\"],\na:not([tabindex=\"-1\"]),\narea:not([tabindex=\"-1\"]),\ndetails:not([tabindex=\"-1\"]),\niframe:not([tabindex=\"-1\"]),\nselect:not([tabindex=\"-1\"]),\ntextarea:not([tabindex=\"-1\"]),\nbutton:not([tabindex=\"-1\"]),\ninput:not([tabindex=\"-1\"])\n`;\n\nexport interface ScrimProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Ref of the element that automatically receives focus when the Scrim is opened.\n   */\n  autoFocusRef?: FocusManagerProps[\"autoFocusRef\"];\n  /**\n   * Prop to enable escape key to close scrim.\n   * The default value of this props is false\n   */\n  closeWithEscape?: boolean;\n  /**\n   * If `true`, the trap focus will not automatically shift focus to itself when it opens, and\n   * replace it to the last focused element when it closes.\n   */\n  disableAutoFocus?: boolean;\n  /**\n   * If `true`, the trap focus will not prevent focus from leaving the trap focus while open.\n   */\n  disableFocusTrap?: boolean;\n  /**\n   * If `true`, the trap focus will not restore focus to previously focused element once\n   * trap focus is hidden.\n   */\n  disableReturnFocus?: boolean;\n  /**\n   * By default, an error will be thrown if the focus trap contains no elements in its tab order.\n   * With this option you can specify a fallback element to programmatically receive focus if no other tabbable elements are found.\n   * For example, you may want a popover's `<div>` to receive focus if the popover's content includes no tabbable elements.\n   */\n  fallbackFocusRef?: FocusManagerProps[\"fallbackFocusRef\"];\n  /**\n   * The handler for backdrop click on Scrim.\n   */\n  onBackDropClick?: (e: SyntheticEvent) => void;\n  /**\n   * The handler for onClose of Scrim.\n   */\n  onClose?: () => void;\n  /**\n   * To maintain open and close of the scrim.\n   */\n  open?: boolean;\n  /**\n   * Set to true to enable the container use case. If true the Scrim will be bound to a container ref you pass via the `parentRef` prop.\n   * Default value is false, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  enableContainerMode?: boolean;\n  /**\n   * Prop necessary to enable container use case. Pass the parent element ref that you want Scrim to be bound to.\n   * Default value is undefined, and the default behavior is for Scrim to be bound to the document viewport.\n   */\n  containerRef?: RefObject<HTMLElement>;\n  /**\n   * Options object to pass to the `focus()` method that is called on the previously focused element when Scrim is closed.\n   */\n  returnFocusOptions?: FocusManagerProps[\"returnFocusOptions\"];\n  /**\n   * comma separated string of query selectors which may need to be overridden for edge cases.\n   */\n  tabEnabledSelectors?: string;\n  /**\n   * Prop to pass z-index for Scrim.\n   */\n  zIndex?: number;\n}\n\nexport const Scrim = forwardRef<HTMLDivElement, ScrimProps>(function Scrim(\n  {\n    autoFocusRef,\n    closeWithEscape = false,\n    className,\n    children,\n    disableAutoFocus,\n    disableFocusTrap,\n    disableReturnFocus,\n    fallbackFocusRef,\n    onBackDropClick,\n    onClose,\n    open,\n    containerRef,\n    enableContainerMode = false,\n    returnFocusOptions,\n    tabEnabledSelectors = defaultSelector,\n    zIndex,\n    ...rest\n  },\n  ref\n) {\n  const scrimRef = useRef<HTMLDivElement>(null);\n  const setWrapperRef = useForkRef(ref, scrimRef);\n  const undoAria = useRef(noop);\n  const undoSelection = useRef(noop);\n  const undoTabIndex = useRef(noop);\n  const scrimId = useId();\n\n  useEffect(() => {\n    if (open && !containerRef?.current) {\n      scrims.add(scrimId);\n      noScroll.on();\n    }\n\n    return () => {\n      if (open) {\n        scrims.delete(scrimId);\n        if (scrims.size === 0) {\n          noScroll.off();\n        }\n      }\n    };\n  }, [open, containerRef, scrimId]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current || undefined;\n\n      if (scrimRef.current) {\n        undoAria.current = hideOthers(scrimRef.current, parent);\n      }\n    }\n\n    return () => {\n      undoAria.current?.();\n    };\n  }, [open, containerRef]);\n\n  useEffect(() => {\n    if (open) {\n      const parent = containerRef?.current;\n\n      if (parent) {\n        undoSelection.current = preventSelection(parent);\n        undoTabIndex.current = preventFocusOthers(\n          scrimRef.current,\n          tabEnabledSelectors,\n          parent\n        );\n      }\n    }\n\n    return () => {\n      undoSelection.current?.();\n      undoTabIndex.current?.();\n    };\n  }, [open, containerRef, tabEnabledSelectors]);\n\n  useEffect(() => {\n    if (closeWithEscape && open && scrimRef.current) {\n      const escapeHandler = (event: KeyboardEvent) => {\n        if (event.key === \"Escape\") {\n          onClose?.();\n        }\n      };\n\n      const doc = ownerDocument(scrimRef.current);\n      doc.addEventListener(\"keydown\", escapeHandler);\n\n      return () => {\n        doc.removeEventListener(\"keydown\", escapeHandler);\n      };\n    }\n  }, [closeWithEscape, onClose, open]);\n\n  if (!open) {\n    return null;\n  }\n\n  return (\n    <div\n      aria-modal={!enableContainerMode}\n      className={classnames(className, withBaseName(), {\n        [withBaseName(\"containerFix\")]: enableContainerMode,\n      })}\n      data-testid=\"scrim\"\n      onClick={onBackDropClick}\n      ref={setWrapperRef}\n      role=\"dialog\"\n      style={{\n        zIndex,\n      }}\n      {...rest}\n    >\n      <FocusManager\n        active={open}\n        autoFocusRef={autoFocusRef}\n        disableAutoFocus={disableAutoFocus}\n        disableFocusTrap={disableFocusTrap || !!enableContainerMode}\n        disableReturnFocus={disableReturnFocus}\n        returnFocusOptions={returnFocusOptions}\n        tabEnabledSelectors={tabEnabledSelectors}\n      >\n        <ScrimContext.Provider value={onClose}>\n          {children}\n        </ScrimContext.Provider>\n      </FocusManager>\n    </div>\n  );\n});\n"],"names":["makePrefixer","forwardRef","Scrim","useRef","useForkRef","useId","useEffect","noScroll","hideOthers","preventFocusOthers","ownerDocument","jsx","classnames","FocusManager","ScrimContext"],"mappings":"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"}

package/dist-cjs/packages/lab/src/scrim/ScrimContext.js

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const ScrimContext = React.createContext(void 0);
+if (process.env.NODE_ENV !== "production") {
+  ScrimContext.displayName = "ScrimContext";
+}
+
+exports.ScrimContext = ScrimContext;
+//# sourceMappingURL=ScrimContext.js.map

package/dist-cjs/packages/lab/src/scrim/ScrimContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrimContext.js","sources":["../src/scrim/ScrimContext.ts"],"sourcesContent":["import { createContext } from \"react\";\n\nexport const ScrimContext = createContext<(() => void) | undefined>(undefined);\n\nif (process.env.NODE_ENV !== \"production\") {\n  ScrimContext.displayName = \"ScrimContext\";\n}\n"],"names":["createContext"],"mappings":";;;;;;AAEa,MAAA,YAAA,GAAeA,oBAAwC,KAAS,CAAA,EAAA;AAE7E,IAAI,OAAA,CAAQ,GAAI,CAAA,QAAA,KAAa,YAAc,EAAA;AACzC,EAAA,YAAA,CAAa,WAAc,GAAA,cAAA,CAAA;AAC7B;;;;"}

package/dist-cjs/packages/lab/src/scrim/internal/PreventFocus.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var findAllTabbableElements = require('../../focus-manager/internal/findAllTabbableElements.js');
+
+const tabIndexMap = /* @__PURE__ */ new WeakMap();
+function preventFocusOthers(originalTarget, tabbableSelector, parentNode) {
+  const elementsToHide = findAllTabbableElements.findAllTabbableElements(
+    parentNode,
+    tabbableSelector,
+    [
+      originalTarget,
+      ...findAllTabbableElements.findAllTabbableElements(originalTarget, tabbableSelector)
+    ]
+  );
+  elementsToHide.forEach((elem) => {
+    if (!tabIndexMap.has(elem)) {
+      tabIndexMap.set(elem, elem.getAttribute("tabIndex"));
+      elem.setAttribute("tabIndex", "-1");
+    }
+  });
+  return () => {
+    elementsToHide.forEach((element) => {
+      if (tabIndexMap.has(element)) {
+        const tabIndex = tabIndexMap.get(element);
+        if (tabIndex) {
+          element.setAttribute("tabIndex", tabIndex);
+        } else {
+          element.removeAttribute("tabIndex");
+        }
+        tabIndexMap.delete(element);
+      }
+    });
+  };
+}
+
+exports.preventFocusOthers = preventFocusOthers;
+//# sourceMappingURL=PreventFocus.js.map

package/dist-cjs/packages/lab/src/scrim/internal/PreventFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreventFocus.js","sources":["../src/scrim/internal/PreventFocus.ts"],"sourcesContent":["import { findAllTabbableElements } from \"../../focus-manager/internal/findAllTabbableElements\";\n\nconst tabIndexMap = new WeakMap<HTMLElement, string | null>();\n\nexport function preventFocusOthers(\n  originalTarget: HTMLElement | null,\n  tabbableSelector: string,\n  parentNode: HTMLElement\n): () => void {\n  const elementsToHide: HTMLElement[] = findAllTabbableElements(\n    parentNode,\n    tabbableSelector,\n    [\n      originalTarget,\n      ...findAllTabbableElements(originalTarget, tabbableSelector),\n    ]\n  );\n\n  elementsToHide.forEach((elem) => {\n    if (!tabIndexMap.has(elem)) {\n      tabIndexMap.set(elem, elem.getAttribute(\"tabIndex\"));\n      elem.setAttribute(\"tabIndex\", \"-1\");\n    }\n  });\n\n  return () => {\n    elementsToHide.forEach((element) => {\n      if (tabIndexMap.has(element)) {\n        const tabIndex = tabIndexMap.get(element);\n        if (tabIndex) {\n          element.setAttribute(\"tabIndex\", tabIndex);\n        } else {\n          element.removeAttribute(\"tabIndex\");\n        }\n\n        tabIndexMap.delete(element);\n      }\n    });\n  };\n}\n"],"names":["findAllTabbableElements"],"mappings":";;;;;;AAEA,MAAM,WAAA,uBAAkB,OAAoC,EAAA,CAAA;AAE5C,SAAA,kBAAA,CACd,cACA,EAAA,gBAAA,EACA,UACY,EAAA;AACZ,EAAA,MAAM,cAAgC,GAAAA,+CAAA;AAAA,IACpC,UAAA;AAAA,IACA,gBAAA;AAAA,IACA;AAAA,MACE,cAAA;AAAA,MACA,GAAGA,+CAAwB,CAAA,cAAA,EAAgB,gBAAgB,CAAA;AAAA,KAC7D;AAAA,GACF,CAAA;AAEA,EAAe,cAAA,CAAA,OAAA,CAAQ,CAAC,IAAS,KAAA;AAC/B,IAAA,IAAI,CAAC,WAAA,CAAY,GAAI,CAAA,IAAI,CAAG,EAAA;AAC1B,MAAA,WAAA,CAAY,GAAI,CAAA,IAAA,EAAM,IAAK,CAAA,YAAA,CAAa,UAAU,CAAC,CAAA,CAAA;AACnD,MAAK,IAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA,CAAA;AAAA,KACpC;AAAA,GACD,CAAA,CAAA;AAED,EAAA,OAAO,MAAM;AACX,IAAe,cAAA,CAAA,OAAA,CAAQ,CAAC,OAAY,KAAA;AAClC,MAAI,IAAA,WAAA,CAAY,GAAI,CAAA,OAAO,CAAG,EAAA;AAC5B,QAAM,MAAA,QAAA,GAAW,WAAY,CAAA,GAAA,CAAI,OAAO,CAAA,CAAA;AACxC,QAAA,IAAI,QAAU,EAAA;AACZ,UAAQ,OAAA,CAAA,YAAA,CAAa,YAAY,QAAQ,CAAA,CAAA;AAAA,SACpC,MAAA;AACL,UAAA,OAAA,CAAQ,gBAAgB,UAAU,CAAA,CAAA;AAAA,SACpC;AAEA,QAAA,WAAA,CAAY,OAAO,OAAO,CAAA,CAAA;AAAA,OAC5B;AAAA,KACD,CAAA,CAAA;AAAA,GACH,CAAA;AACF;;;;"}

package/dist-cjs/packages/lab/src/search-input/SearchInput.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltSearchInput .saltInput-input::-webkit-search-cancel-button {\n  display: none;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=SearchInput.css.js.map

package/dist-cjs/packages/lab/src/search-input/SearchInput.css.js.map

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

package/dist-cjs/packages/lab/src/search-input/SearchInput.js

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('classnames');
+var core = require('@salt-ds/core');
+var Input = require('../input/Input.js');
+var StaticInputAdornment = require('../input/StaticInputAdornment.js');
+var icons = require('@salt-ds/icons');
+require('./SearchInput.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const baseName = "saltSearchInput";
+const SearchInput = React.forwardRef(
+  function SearchInput2({
+    IconComponent = icons.SearchIcon,
+    className,
+    onChange,
+    onClear,
+    onKeyUp,
+    onSubmit,
+    value: valueProp,
+    defaultValue,
+    ...other
+  }, ref) {
+    const inputRef = React.useRef(null);
+    const handleRef = core.useForkRef(inputRef, ref);
+    const [value, setValue, isControlled] = core.useControlled({
+      controlled: valueProp,
+      default: defaultValue,
+      name: "SearchInput",
+      state: "value"
+    });
+    const handleChange = (event, newValue) => {
+      setValue(newValue);
+      onChange == null ? void 0 : onChange(event, newValue);
+    };
+    const handleClear = (event) => {
+      var _a;
+      setValue("");
+      if (!isControlled) {
+        onChange == null ? void 0 : onChange(event, "");
+      }
+      onClear == null ? void 0 : onClear();
+      (_a = inputRef.current) == null ? void 0 : _a.focus();
+    };
+    const handleKeyUp = (event) => {
+      if (event.key === "Enter" && onSubmit && value) {
+        onSubmit == null ? void 0 : onSubmit(value);
+      }
+      onKeyUp == null ? void 0 : onKeyUp(event);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(Input.Input, {
+      className: cx__default["default"](baseName, className),
+      ref: handleRef,
+      endAdornment: !!value && /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+        className: cx__default["default"](`${baseName}-clearButton`),
+        onClick: handleClear,
+        variant: "secondary",
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {
+          "aria-label": "clear input",
+          className: `${baseName}-clearIcon`
+        })
+      }),
+      onChange: handleChange,
+      onKeyUp: handleKeyUp,
+      startAdornment: IconComponent && /* @__PURE__ */ jsxRuntime.jsx(StaticInputAdornment.StaticInputAdornment, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconComponent, {
+          className: `${baseName}-icon`
+        })
+      }),
+      value: value || "",
+      ...other
+    });
+  }
+);
+
+exports.SearchInput = SearchInput;
+//# sourceMappingURL=SearchInput.js.map

package/dist-cjs/packages/lab/src/search-input/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../src/search-input/SearchInput.tsx"],"sourcesContent":["import {\n  ChangeEvent,\n  ComponentType,\n  forwardRef,\n  KeyboardEvent,\n  SyntheticEvent,\n  useRef,\n} from \"react\";\nimport cx from \"classnames\";\nimport { Button, useControlled, useForkRef } from \"@salt-ds/core\";\nimport { Input, InputProps, StaticInputAdornment } from \"../input\";\nimport { CloseIcon, SearchIcon } from \"@salt-ds/icons\";\n\nimport \"./SearchInput.css\";\n\nconst baseName = \"saltSearchInput\";\n\n//TODO formfield integration\n\nexport interface SearchInputProps extends Omit<InputProps, \"onSubmit\"> {\n  /**\n   * Override \"search\" icon.\n   * Set to `null` to hide.\n   */\n  IconComponent?: ComponentType<any> | null;\n  /**\n   * Callback for when clear button is clicked.\n   */\n  onClear?: () => void;\n  /**\n   * Callback for change event.\n   * Event is either an Input change event or a Button click event.\n   */\n  onChange?: (event: SyntheticEvent<unknown>, value: string) => void;\n  /**\n   * Callback to trigger search.\n   */\n  onSubmit?: (value: InputProps[\"value\"]) => void;\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      IconComponent = SearchIcon,\n      className,\n      onChange,\n      onClear,\n      onKeyUp,\n      onSubmit,\n      value: valueProp,\n      defaultValue,\n      ...other\n    },\n    ref\n  ) {\n    const inputRef = useRef<HTMLInputElement>(null);\n    const handleRef = useForkRef(inputRef, ref);\n\n    const [value, setValue, isControlled] = useControlled({\n      controlled: valueProp,\n      default: defaultValue,\n      name: \"SearchInput\",\n      state: \"value\",\n    });\n\n    const handleChange = (\n      event: ChangeEvent<HTMLInputElement>,\n      newValue: string\n    ) => {\n      setValue(newValue);\n      onChange?.(event, newValue);\n    };\n\n    const handleClear = (event: SyntheticEvent<HTMLButtonElement>) => {\n      setValue(\"\");\n      if (!isControlled) {\n        onChange?.(event, \"\");\n      }\n      onClear?.();\n      inputRef.current?.focus();\n    };\n\n    const handleKeyUp = (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Enter\" && onSubmit && value) {\n        onSubmit?.(value);\n      }\n\n      onKeyUp?.(event);\n    };\n\n    return (\n      <Input\n        className={cx(baseName, className)}\n        ref={handleRef}\n        endAdornment={\n          !!value && (\n            <Button\n              className={cx(`${baseName}-clearButton`)}\n              onClick={handleClear}\n              variant=\"secondary\"\n            >\n              <CloseIcon\n                aria-label=\"clear input\"\n                className={`${baseName}-clearIcon`}\n              />\n            </Button>\n          )\n        }\n        onChange={handleChange}\n        onKeyUp={handleKeyUp}\n        startAdornment={\n          IconComponent && (\n            <StaticInputAdornment>\n              <IconComponent className={`${baseName}-icon`} />\n            </StaticInputAdornment>\n          )\n        }\n        value={value || \"\"}\n        {...other}\n      />\n    );\n  }\n);\n"],"names":["forwardRef","SearchInput","SearchIcon","useRef","useForkRef","useControlled","jsx","Input","cx","Button","CloseIcon","StaticInputAdornment"],"mappings":"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"}

package/dist-cjs/packages/lab/src/skip-link/SkipLink.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* CSS Variables for the Skip Link */\n.saltSkipLink {\n  --skipLink-padding: var(--saltSkipLink-padding, var(--salt-size-unit));\n  --skipLink-margin: var(--saltSkipLink-margin, var(--salt-size-unit));\n  --skipLink-background: var(--saltSkipLink-background, var(--salt-actionable-primary-background));\n  --skipLink-color: var(--saltSkipLink-color, var(--salt-text-primary-foreground));\n}\n\n/* Overrides */\n.saltSkipLink {\n  --saltLink-color-focus: var(--skipLink-color);\n}\n\n.saltSkipLink-target {\n  --skipLink-target-focus: var(--salt-focused-outline);\n}\n\n/*Styles applied when the link is focused to hide the Skip Link when not in focus*/\n.saltSkipLink {\n  top: 0;\n  left: 0;\n  width: 1px;\n  height: 1px;\n  display: block;\n  opacity: 0;\n  overflow: hidden;\n  position: absolute;\n}\n\n/* Styles applied when the link is focused to display the Skip Link only when in focus*/\n.saltSkipLink:focus {\n  opacity: 1;\n  width: auto;\n  height: auto;\n  white-space: nowrap;\n  margin: var(--skipLink-margin);\n  padding: calc(var(--skipLink-padding) - 1px) var(--skipLink-padding) var(--skipLink-padding);\n  background: var(--skipLink-background);\n  color: var(--skipLink-color);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n}\n\n.saltSkipLink {\n  font-size: var(--salt-text-fontSize);\n  font-family: var(--saltSkipLink-fontFamily, var(--salt-typography-fontFamily));\n  line-height: var(--saltSkipLink-lineHeight, var(--salt-text-lineHeight));\n}\n\n/*Styles applied to the skip link focus target*/\n.saltSkipLink-target {\n  outline: var(--skipLink-target-focus);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=SkipLink.css.js.map

package/dist-cjs/packages/lab/src/skip-link/SkipLink.css.js.map

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

package/dist-cjs/packages/lab/src/skip-link/SkipLink.js

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+require('./SkipLink.css.js');
+var cx = require('classnames');
+var useManageFocusOnTarget = require('./internal/useManageFocusOnTarget.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("saltSkipLink");
+const SkipLink = React.forwardRef(
+  function SkipLink2({ className, targetRef, ...rest }, ref) {
+    const targetClass = cx__default["default"](withBaseName("target"), className);
+    const eventHandlers = useManageFocusOnTarget.useManageFocusOnTarget({ targetRef, targetClass });
+    return /* @__PURE__ */ jsxRuntime.jsx("li", {
+      children: /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
+        ...eventHandlers,
+        ...rest,
+        className: cx__default["default"](withBaseName(), className),
+        ref
+      })
+    });
+  }
+);
+
+exports.SkipLink = SkipLink;
+//# sourceMappingURL=SkipLink.js.map

package/dist-cjs/packages/lab/src/skip-link/SkipLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.js","sources":["../src/skip-link/SkipLink.tsx"],"sourcesContent":["import { forwardRef, RefObject } from \"react\";\nimport { LinkProps, Link, makePrefixer } from \"@salt-ds/core\";\nimport \"./SkipLink.css\";\nimport cx from \"classnames\";\nimport { useManageFocusOnTarget } from \"./internal/useManageFocusOnTarget\";\n\ninterface SkipLinkProps extends LinkProps {\n  /**\n   * This is a ref that has access to the target element.\n   *\n   * This will be used to apply focus to that element\n   *\n   * Refs are referentially stable so if this changes it won't be picked up\n   * will need to find a better way of passing in the target element to apply the attributes\n   */\n  targetRef?: RefObject<HTMLElement>;\n}\n\nconst withBaseName = makePrefixer(\"saltSkipLink\");\n\nexport const SkipLink = forwardRef<HTMLAnchorElement, SkipLinkProps>(\n  function SkipLink({ className, targetRef, ...rest }, ref) {\n    const targetClass = cx(withBaseName(\"target\"), className);\n\n    const eventHandlers = useManageFocusOnTarget({ targetRef, targetClass });\n\n    return (\n      <li>\n        <Link\n          {...eventHandlers}\n          {...rest}\n          className={cx(withBaseName(), className)}\n          ref={ref}\n        />\n      </li>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","SkipLink","cx","useManageFocusOnTarget","jsx","Link"],"mappings":";;;;;;;;;;;;;;;AAkBA,MAAM,YAAA,GAAeA,kBAAa,cAAc,CAAA,CAAA;AAEzC,MAAM,QAAW,GAAAC,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,EAAE,WAAW,SAAc,EAAA,GAAA,IAAA,IAAQ,GAAK,EAAA;AACxD,IAAA,MAAM,WAAc,GAAAC,sBAAA,CAAG,YAAa,CAAA,QAAQ,GAAG,SAAS,CAAA,CAAA;AAExD,IAAA,MAAM,aAAgB,GAAAC,6CAAA,CAAuB,EAAE,SAAA,EAAW,aAAa,CAAA,CAAA;AAEvE,IAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,MACC,QAAC,kBAAAA,cAAA,CAAAC,SAAA,EAAA;AAAA,QACE,GAAG,aAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,SAAW,EAAAH,sBAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACvC,GAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/skip-link/SkipLinks.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltSkipLinks {\n  position: relative;\n  float: left;\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=SkipLinks.css.js.map

package/dist-cjs/packages/lab/src/skip-link/SkipLinks.css.js.map

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

package/dist-cjs/packages/lab/src/skip-link/SkipLinks.js

@@ -0,0 +1,27 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cx = require('classnames');
+var core = require('@salt-ds/core');
+require('./SkipLinks.css.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("saltSkipLinks");
+const SkipLinks = React.forwardRef(function SkipLinks2(props, ref) {
+  const { className, children, ...restProps } = props;
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", {
+    ...restProps,
+    className: cx__default["default"](withBaseName(), className),
+    ref,
+    children
+  });
+});
+
+exports.SkipLinks = SkipLinks;
+//# sourceMappingURL=SkipLinks.js.map

package/dist-cjs/packages/lab/src/skip-link/SkipLinks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLinks.js","sources":["../src/skip-link/SkipLinks.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport cx from \"classnames\";\nimport { makePrefixer } from \"@salt-ds/core\";\n\nimport \"./SkipLinks.css\";\n\nconst withBaseName = makePrefixer(\"saltSkipLinks\");\n\nexport const SkipLinks = forwardRef<\n  HTMLUListElement,\n  HTMLAttributes<HTMLUListElement>\n>(function SkipLinks(props, ref) {\n  const { className, children, ...restProps } = props;\n\n  return (\n    <ul {...restProps} className={cx(withBaseName(), className)} ref={ref}>\n      {children}\n    </ul>\n  );\n});\n"],"names":["makePrefixer","forwardRef","SkipLinks","jsx","cx"],"mappings":";;;;;;;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,eAAe,CAAA,CAAA;AAE1C,MAAM,SAAY,GAAAC,gBAAA,CAGvB,SAASC,UAAAA,CAAU,OAAO,GAAK,EAAA;AAC/B,EAAA,MAAM,EAAE,SAAA,EAAW,QAAa,EAAA,GAAA,SAAA,EAAc,GAAA,KAAA,CAAA;AAE9C,EAAA,uBACGC,cAAA,CAAA,IAAA,EAAA;AAAA,IAAI,GAAG,SAAA;AAAA,IAAW,SAAW,EAAAC,sBAAA,CAAG,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,IAAG,GAAA;AAAA,IAC1D,QAAA;AAAA,GACH,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/packages/lab/src/skip-link/internal/useManageFocusOnTarget.js

@@ -0,0 +1,61 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const FOCUS_TIMEOUT = 50;
+const useManageFocusOnTarget = ({
+  targetRef,
+  targetClass
+}) => {
+  const [target, setTarget] = React.useState();
+  const hasTabIndex = React.useRef();
+  const shouldRemoveTabIndex = React.useRef();
+  React.useEffect(() => {
+    if (targetRef == null ? void 0 : targetRef.current) {
+      setTarget(targetRef.current);
+    }
+  }, [targetRef]);
+  return React.useMemo(() => {
+    if (!target) {
+      return {};
+    }
+    const addTabIndex = () => {
+      const tabIndex = target.getAttribute("tabIndex");
+      hasTabIndex.current = tabIndex || tabIndex === "0";
+      if (!hasTabIndex.current) {
+        shouldRemoveTabIndex.current = true;
+        target.setAttribute("tabIndex", "-1");
+      }
+    };
+    const removeTabIndex = () => {
+      if (!hasTabIndex.current && shouldRemoveTabIndex.current) {
+        target.removeAttribute("tabIndex");
+      }
+    };
+    const handleFocusOnTarget = () => {
+      shouldRemoveTabIndex.current = false;
+      target.classList.add(targetClass);
+    };
+    const handleBlurFromTarget = () => {
+      shouldRemoveTabIndex.current = true;
+      removeTabIndex();
+      target.classList.remove(targetClass);
+    };
+    return {
+      onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),
+      onClick: () => {
+        addTabIndex();
+        setTimeout(() => {
+          target.focus();
+        }, FOCUS_TIMEOUT);
+        target.addEventListener("focus", handleFocusOnTarget, { once: true });
+        target.addEventListener("blur", handleBlurFromTarget, { once: true });
+      }
+    };
+  }, [target, targetClass]);
+};
+
+exports.useManageFocusOnTarget = useManageFocusOnTarget;
+//# sourceMappingURL=useManageFocusOnTarget.js.map

package/dist-cjs/packages/lab/src/skip-link/internal/useManageFocusOnTarget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useManageFocusOnTarget.js","sources":["../src/skip-link/internal/useManageFocusOnTarget.ts"],"sourcesContent":["import { RefObject, useEffect, useMemo, useRef, useState } from \"react\";\n\nconst FOCUS_TIMEOUT = 50;\n\nexport const useManageFocusOnTarget = ({\n  targetRef,\n  targetClass,\n}: {\n  targetRef: RefObject<HTMLElement> | undefined;\n  targetClass: string;\n}):\n  | { onBlur: () => NodeJS.Timeout; onClick: () => void }\n  | Record<string, undefined> => {\n  const [target, setTarget] = useState<HTMLElement>();\n\n  const hasTabIndex = useRef<boolean | string>();\n  const shouldRemoveTabIndex = useRef<boolean>();\n\n  useEffect(() => {\n    if (targetRef?.current) {\n      setTarget(targetRef.current);\n    }\n  }, [targetRef]);\n\n  return useMemo(() => {\n    if (!target) {\n      return {};\n    }\n\n    const addTabIndex = () => {\n      const tabIndex = target.getAttribute(\"tabIndex\");\n      hasTabIndex.current = tabIndex || tabIndex === \"0\";\n\n      if (!hasTabIndex.current) {\n        shouldRemoveTabIndex.current = true;\n        target.setAttribute(\"tabIndex\", \"-1\");\n      }\n    };\n\n    const removeTabIndex = () => {\n      if (!hasTabIndex.current && shouldRemoveTabIndex.current) {\n        target.removeAttribute(\"tabIndex\");\n      }\n    };\n\n    const handleFocusOnTarget = () => {\n      shouldRemoveTabIndex.current = false;\n      target.classList.add(targetClass);\n    };\n\n    const handleBlurFromTarget = () => {\n      shouldRemoveTabIndex.current = true;\n      removeTabIndex();\n      target.classList.remove(targetClass);\n    };\n\n    return {\n      onBlur: () => setTimeout(removeTabIndex, FOCUS_TIMEOUT),\n      onClick: () => {\n        addTabIndex();\n        setTimeout(() => {\n          target.focus();\n        }, FOCUS_TIMEOUT);\n\n        target.addEventListener(\"focus\", handleFocusOnTarget, { once: true });\n        target.addEventListener(\"blur\", handleBlurFromTarget, { once: true });\n      },\n    };\n  }, [target, targetClass]);\n};\n"],"names":["useState","useRef","useEffect","useMemo"],"mappings":";;;;;;AAEA,MAAM,aAAgB,GAAA,EAAA,CAAA;AAEf,MAAM,yBAAyB,CAAC;AAAA,EACrC,SAAA;AAAA,EACA,WAAA;AACF,CAKiC,KAAA;AAC/B,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAIA,cAAsB,EAAA,CAAA;AAElD,EAAA,MAAM,cAAcC,YAAyB,EAAA,CAAA;AAC7C,EAAA,MAAM,uBAAuBA,YAAgB,EAAA,CAAA;AAE7C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,uCAAW,OAAS,EAAA;AACtB,MAAA,SAAA,CAAU,UAAU,OAAO,CAAA,CAAA;AAAA,KAC7B;AAAA,GACF,EAAG,CAAC,SAAS,CAAC,CAAA,CAAA;AAEd,EAAA,OAAOC,cAAQ,MAAM;AACnB,IAAA,IAAI,CAAC,MAAQ,EAAA;AACX,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAEA,IAAA,MAAM,cAAc,MAAM;AACxB,MAAM,MAAA,QAAA,GAAW,MAAO,CAAA,YAAA,CAAa,UAAU,CAAA,CAAA;AAC/C,MAAY,WAAA,CAAA,OAAA,GAAU,YAAY,QAAa,KAAA,GAAA,CAAA;AAE/C,MAAI,IAAA,CAAC,YAAY,OAAS,EAAA;AACxB,QAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA,CAAA;AAC/B,QAAO,MAAA,CAAA,YAAA,CAAa,YAAY,IAAI,CAAA,CAAA;AAAA,OACtC;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,iBAAiB,MAAM;AAC3B,MAAA,IAAI,CAAC,WAAA,CAAY,OAAW,IAAA,oBAAA,CAAqB,OAAS,EAAA;AACxD,QAAA,MAAA,CAAO,gBAAgB,UAAU,CAAA,CAAA;AAAA,OACnC;AAAA,KACF,CAAA;AAEA,IAAA,MAAM,sBAAsB,MAAM;AAChC,MAAA,oBAAA,CAAqB,OAAU,GAAA,KAAA,CAAA;AAC/B,MAAO,MAAA,CAAA,SAAA,CAAU,IAAI,WAAW,CAAA,CAAA;AAAA,KAClC,CAAA;AAEA,IAAA,MAAM,uBAAuB,MAAM;AACjC,MAAA,oBAAA,CAAqB,OAAU,GAAA,IAAA,CAAA;AAC/B,MAAe,cAAA,EAAA,CAAA;AACf,MAAO,MAAA,CAAA,SAAA,CAAU,OAAO,WAAW,CAAA,CAAA;AAAA,KACrC,CAAA;AAEA,IAAO,OAAA;AAAA,MACL,MAAQ,EAAA,MAAM,UAAW,CAAA,cAAA,EAAgB,aAAa,CAAA;AAAA,MACtD,SAAS,MAAM;AACb,QAAY,WAAA,EAAA,CAAA;AACZ,QAAA,UAAA,CAAW,MAAM;AACf,UAAA,MAAA,CAAO,KAAM,EAAA,CAAA;AAAA,WACZ,aAAa,CAAA,CAAA;AAEhB,QAAA,MAAA,CAAO,iBAAiB,OAAS,EAAA,mBAAA,EAAqB,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AACpE,QAAA,MAAA,CAAO,iBAAiB,MAAQ,EAAA,oBAAA,EAAsB,EAAE,IAAA,EAAM,MAAM,CAAA,CAAA;AAAA,OACtE;AAAA,KACF,CAAA;AAAA,GACC,EAAA,CAAC,MAAQ,EAAA,WAAW,CAAC,CAAA,CAAA;AAC1B;;;;"}

package/dist-cjs/packages/lab/src/slider/Slider.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".salt-density-high {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 2px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 2px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 3px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-medium {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 4px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 4px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 6px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-low {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 8px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 8px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 9px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.salt-density-touch {\n  --slider-clickable-paddingTop: var(--saltSlider-clickable-paddingTop, 12px);\n  --slider-clickable-paddingBottom: var(--saltSlider-clickable-paddingBottom, 12px);\n  --slider-paddingTop: var(--saltSlider-paddingTop, 12px);\n  --slider-paddingBottom: var(--saltSlider-paddingBottom, 0);\n}\n\n.saltSlider {\n  --slider-rail-height: var(--saltSlider-rail-height, 8px);\n  --slider-rail-color: var(--saltSlider-rail-color, var(--salt-measured-borderColor));\n\n  --slider-rail-mark-height: var(--saltSlider-rail-mark-height, 7px);\n  --slider-rail-mark-color: var(--saltSlider-rail-mark-color, var(--slider-rail-color));\n\n  --slider-selection-color: var(--saltSlider-selection-color, var(--salt-measured-fill));\n  --slider-selection-height: var(--saltSlider-selection-height, 2px);\n\n  --slider-handle-size: var(--saltSlider-handle-size, calc(var(--salt-size-base) * 0.5));\n  --slider-handle-outlineStyle: var(--saltSlider-handle-outlineStyle, var(--salt-focused-outlineStyle));\n  --slider-handle-outlineWidth: var(--saltSlider-handle-outlineWidth, var(--salt-focused-outlineWidth));\n  --slider-handle-outlineColor: var(--saltSlider-handle-outlineColor, var(--salt-focused-outlineColor));\n  --slider-handle-outlineOffset: var(--saltSlider-handle-outlineOffset, var(--salt-focused-outlineOffset));\n\n  --slider-arrow-height: var(--saltSlider-arrow-height, 6px);\n  --slider-arrow-width: var(--saltSlider-arrow-width, 8px);\n  --slider-arrow-color: var(--saltSlider-arrow-color, var(--slider-selection-color));\n\n  --slider-borderStyle: var(--saltSlider-borderStyle, none);\n  --slider-borderWidth: var(--saltSlider-borderWidth, 0);\n  --slider-borderColor: var(--saltSlider-borderColor, transparent);\n  --slider-width: var(--saltSlider-width, 300px);\n\n  --slider-clickable-paddingLeft: var(--saltSlider-clickable-paddingLeft, calc(var(--salt-size-base) * 0.5));\n  --slider-clickable-paddingRight: var(--saltSlider-clickable-paddingRight, calc(var(--salt-size-base) * 0.5));\n\n  --slider-label-fontSize: var(--saltSlider-label-fontSize, var(--salt-text-label-fontSize));\n  --slider-label-paddingLeft: var(--saltSlider-label-paddingLeft, 0);\n  --slider-label-paddingRight: var(--saltSlider-label-paddingRight, 0);\n}\n\n.saltSlider {\n  width: var(--slider-width);\n  border-style: var(--slider-borderStyle);\n  border-width: var(--slider-borderWidth);\n  border-color: var(--slider-borderColor);\n\n  display: flex;\n  flex-direction: column;\n  align-items: stretch;\n\n  padding-top: var(--slider-paddingTop);\n  padding-bottom: var(--slider-paddingBottom);\n}\n\n.saltSlider-disabled {\n}\n\n.saltSlider-clickable {\n  padding: var(--slider-clickable-paddingTop) var(--slider-clickable-paddingRight) var(--slider-clickable-paddingBottom) var(--slider-clickable-paddingLeft);\n  margin-right: calc(-1 * var(--slider-clickable-paddingRight));\n  margin-left: calc(-1 * var(--slider-clickable-paddingLeft));\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n}\n\n.saltSlider-track {\n  display: grid;\n  grid-template-rows: auto auto auto;\n  align-items: end;\n  grid-template-columns: auto auto auto;\n  row-gap: 0;\n  transition: grid-template-columns 100ms ease;\n}\n\n.saltSliderRail {\n  grid-row: 1;\n  grid-column-start: 1;\n  grid-column-end: -1;\n  height: var(--slider-rail-height);\n  border-style: solid;\n  border-width: 0 1px 1px 1px;\n  border-color: var(--slider-rail-color);\n}\n\n.saltSliderRailMarks {\n  grid-row: 2;\n  grid-column-start: 1;\n  grid-column-end: -1;\n  /*height: var(--markedRail-height);*/\n  display: grid;\n  grid-template-rows: auto;\n}\n\n.saltSliderRailMarks-mark {\n  grid-row: 1;\n  width: 0;\n  height: var(--slider-rail-mark-height);\n  border-left: 1px solid var(--slider-rail-mark-color);\n}\n\n.saltSliderRailMarks-max {\n  margin-left: -1px;\n}\n\n.saltSliderMarkLabels {\n  grid-row: 3;\n  grid-column-start: 1;\n  grid-column-end: -1;\n\n  display: grid;\n  grid-template-rows: auto;\n  justify-items: center;\n}\n\n.saltSliderMarkLabels-label {\n  color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground));\n  font-size: var(--slider-label-fontSize);\n  margin-top: var(--saltSlider-label-marginTop);\n  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));\n\n  white-space: nowrap;\n}\n\n.saltSliderSelection {\n  grid-row: 1;\n  grid-column-start: 1;\n  grid-column-end: -2;\n  height: var(--slider-selection-height);\n  background: var(--slider-selection-color);\n}\n\n.saltSliderSelection-range {\n  grid-row: 1;\n  grid-column-start: 2;\n  grid-column-end: -2;\n  height: var(--slider-selection-height);\n  background: var(--slider-selection-color);\n}\n\n.saltSliderHandle-box:focus-visible {\n  outline-style: var(--slider-handle-outlineStyle);\n  outline-width: var(--slider-handle-outlineWidth);\n  outline-color: var(--slider-handle-outlineColor);\n  outline-offset: var(--slider-handle-outlineOffset);\n}\n\n.saltSliderHandle {\n  margin-left: calc(var(--slider-arrow-width) * -0.5);\n  grid-row: 1;\n  width: 0;\n  height: 0;\n  border-left: calc(var(--slider-arrow-width) * 0.5) solid transparent;\n  border-right: calc(var(--slider-arrow-width) * 0.5) solid transparent;\n  border-bottom: calc(var(--slider-arrow-height)) solid var(--slider-arrow-color);\n  position: relative;\n}\n\n.saltSliderHandle-min {\n  border-left: none;\n  margin-left: 0;\n}\n\n.saltSliderHandle-max {\n  border-right: none;\n}\n\n.saltSlider-label {\n  color: var(--saltSlider-label-text-color, var(--salt-text-secondary-foreground));\n  font-size: var(--slider-label-fontSize);\n  margin-top: var(--saltSlider-label-marginTop);\n  line-height: var(--saltSlider-label-lineHeight, var(--salt-text-lineHeight));\n\n  padding-left: var(--slider-label-paddingLeft);\n  padding-right: var(--slider-label-paddingRight);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Slider.css.js.map