@salt-ds/lab 1.0.0-alpha.1 → 1.0.0-alpha.100

package/dist-cjs/input-legacy/useCursorOnFocus.js

@@ -0,0 +1,139 @@
+'use strict';
+
+var core = require('@salt-ds/core');
+var react = require('react');
+
+function getSelectionRange(input, { highlightOnFocus, cursorPositionOnFocus }) {
+  if (highlightOnFocus === true) {
+    return [0, input.value.length];
+  }
+  if (Array.isArray(highlightOnFocus) && highlightOnFocus.length > 1) {
+    return [highlightOnFocus[0], highlightOnFocus[1]];
+  }
+  if (cursorPositionOnFocus === "start") {
+    return [0, 0];
+  }
+  if (cursorPositionOnFocus === "end") {
+    return [input.value.length, input.value.length];
+  }
+  if (cursorPositionOnFocus != null && !Number.isNaN(cursorPositionOnFocus)) {
+    return [cursorPositionOnFocus, cursorPositionOnFocus];
+  }
+  return [null, null];
+}
+function isSafari() {
+  return navigator.userAgent.toLowerCase().includes("safari") && !navigator.userAgent.toLowerCase().includes("chrome");
+}
+function isFirefox() {
+  return navigator.userAgent.toLowerCase().includes("firefox");
+}
+function useCursorOnFocus(inputRef, { cursorPositionOnFocus, highlightOnFocus }) {
+  const wasClick = react.useRef(false);
+  const timeoutRef = react.useRef(-1);
+  const originalCursorPosition = react.useRef(-1);
+  const selectionInProgress = react.useRef(false);
+  const mouseMovement = react.useRef(0);
+  const selection = react.useRef([null, null]);
+  const wasWindowFocus = react.useRef(false);
+  const handleMouseDown = () => {
+    wasClick.current = true;
+  };
+  const handleMouseMove = (event) => {
+    var _a;
+    if (selectionInProgress.current) {
+      mouseMovement.current += Math.abs(event.movementX) + Math.abs(event.movementY);
+      if (mouseMovement.current < 3) {
+        event.preventDefault();
+        return;
+      }
+      if (typeof originalCursorPosition.current === "number") {
+        (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(
+          originalCursorPosition.current,
+          originalCursorPosition.current
+        );
+      }
+      selectionInProgress.current = false;
+    }
+  };
+  const handleMouseUp = () => {
+    const isValidBrowser = isFirefox() || isSafari();
+    if (selectionInProgress.current && mouseMovement.current < 3 && isValidBrowser && Array.isArray(selection.current)) {
+      const [start, end] = selection.current;
+      setTimeout(() => {
+        var _a, _b, _c;
+        if ((((_a = inputRef.current) == null ? void 0 : _a.selectionStart) !== start || ((_b = inputRef.current) == null ? void 0 : _b.selectionEnd) !== end) && typeof start === "number" && typeof end === "number") {
+          (_c = inputRef.current) == null ? void 0 : _c.setSelectionRange(start, end);
+        }
+      }, 0);
+    }
+    wasClick.current = false;
+    selectionInProgress.current = false;
+    mouseMovement.current = 0;
+  };
+  react.useEffect(() => {
+    if (cursorPositionOnFocus != null || highlightOnFocus != null) {
+      const handleFocusBehaviour = () => {
+        var _a;
+        if (!inputRef.current) {
+          return;
+        }
+        const [start, end] = getSelectionRange(inputRef.current, {
+          highlightOnFocus,
+          cursorPositionOnFocus
+        });
+        if (start !== null && end !== null) {
+          window.clearTimeout(timeoutRef.current);
+          const needsTimeout = isSafari() || wasClick.current;
+          if (wasClick.current) {
+            selectionInProgress.current = true;
+            mouseMovement.current = 0;
+          }
+          selection.current = [start, end];
+          if (needsTimeout) {
+            timeoutRef.current = window.setTimeout(() => {
+              var _a2, _b;
+              if (wasClick.current) {
+                originalCursorPosition.current = (_a2 = inputRef.current) == null ? void 0 : _a2.selectionStart;
+              }
+              (_b = inputRef.current) == null ? void 0 : _b.setSelectionRange(start, end);
+            }, 0);
+          } else {
+            (_a = inputRef.current) == null ? void 0 : _a.setSelectionRange(start, end);
+          }
+        }
+      };
+      const handleFocusIn = () => {
+        if (wasWindowFocus.current) {
+          wasWindowFocus.current = false;
+          return;
+        }
+        if (cursorPositionOnFocus != null || highlightOnFocus != null) {
+          handleFocusBehaviour();
+        }
+      };
+      const handleWindowFocus = () => {
+        const doc2 = core.ownerDocument(inputRef.current);
+        if (doc2.visibilityState === "visible" && doc2.activeElement === inputRef.current) {
+          wasClick.current = false;
+          selectionInProgress.current = false;
+          mouseMovement.current = 0;
+          wasWindowFocus.current = true;
+        }
+      };
+      const eventName = isSafari() || isFirefox() ? "focusIn" : "focus";
+      const input = inputRef.current;
+      const doc = core.ownerDocument(inputRef.current);
+      input == null ? void 0 : input.addEventListener(eventName, handleFocusIn);
+      doc.addEventListener("visibilitychange", handleWindowFocus);
+      return () => {
+        input == null ? void 0 : input.removeEventListener(eventName, handleFocusIn);
+        doc == null ? void 0 : doc.removeEventListener("visibilitychange", handleWindowFocus);
+      };
+    }
+    return void 0;
+  }, [cursorPositionOnFocus, highlightOnFocus, inputRef]);
+  return { handleMouseDown, handleMouseMove, handleMouseUp };
+}
+
+exports.useCursorOnFocus = useCursorOnFocus;
+//# sourceMappingURL=useCursorOnFocus.js.map

package/dist-cjs/input-legacy/useCursorOnFocus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCursorOnFocus.js","sources":["../src/input-legacy/useCursorOnFocus.ts"],"sourcesContent":["import { ownerDocument } from \"@salt-ds/core\";\nimport {\n  type MouseEvent,\n  type MutableRefObject,\n  useEffect,\n  useRef,\n} from \"react\";\n\nfunction getSelectionRange(\n  input: HTMLInputElement,\n  { highlightOnFocus, cursorPositionOnFocus }: useCursorOnFocusProps,\n): [number | null, number | null] {\n  // highlightOnFocus highlight first so it takes priority over position on focus\n  if (highlightOnFocus === true) {\n    return [0, input.value.length];\n  }\n  if (Array.isArray(highlightOnFocus) && highlightOnFocus.length > 1) {\n    return [highlightOnFocus[0], highlightOnFocus[1]];\n  }\n\n  if (cursorPositionOnFocus === \"start\") {\n    return [0, 0];\n  }\n\n  if (cursorPositionOnFocus === \"end\") {\n    return [input.value.length, input.value.length];\n  }\n\n  if (cursorPositionOnFocus != null && !Number.isNaN(cursorPositionOnFocus)) {\n    return [cursorPositionOnFocus, cursorPositionOnFocus];\n  }\n  return [null, null];\n}\n\nfunction isSafari() {\n  return (\n    navigator.userAgent.toLowerCase().includes(\"safari\") &&\n    !navigator.userAgent.toLowerCase().includes(\"chrome\")\n  );\n}\n\nfunction isFirefox() {\n  return navigator.userAgent.toLowerCase().includes(\"firefox\");\n}\n\nexport interface useCursorOnFocusProps {\n  /**\n   * Determines the position of the text cursor on focus of the input.\n   *\n   * start = place cursor at the beginning\n   * end = place cursor at the end\n   * \\# = index to place the cursor\n   */\n  cursorPositionOnFocus?: \"start\" | \"end\" | number;\n  /**\n   * Determines what gets highlighted on focus of the input.\n   *\n   * If `true` all text will be highlighted.\n   * If an array text between those indices will be highlighted\n   * e.g. [0,1] will highlight the first character.\n   */\n  highlightOnFocus?: boolean | number[];\n}\n\nexport function useCursorOnFocus(\n  inputRef: MutableRefObject<HTMLInputElement | null>,\n  { cursorPositionOnFocus, highlightOnFocus }: useCursorOnFocusProps,\n) {\n  const wasClick = useRef(false);\n  const timeoutRef = useRef<number>(-1);\n  const originalCursorPosition = useRef<number | null | undefined>(-1);\n  const selectionInProgress = useRef(false);\n  const mouseMovement = useRef(0);\n\n  const selection = useRef<[number | null, number | null]>([null, null]);\n  const wasWindowFocus = useRef(false);\n\n  const handleMouseDown = () => {\n    wasClick.current = true;\n  };\n\n  const handleMouseMove = (event: MouseEvent) => {\n    if (selectionInProgress.current) {\n      mouseMovement.current +=\n        Math.abs(event.movementX) + Math.abs(event.movementY);\n\n      //Prevents the slightest mouse movement triggering the cursor to be repositioned.\n      if (mouseMovement.current < 3) {\n        event.preventDefault();\n\n        return;\n      }\n\n      if (typeof originalCursorPosition.current === \"number\") {\n        // Allows continued highlighted if the mouse down is part of a selection.\n        inputRef.current?.setSelectionRange(\n          originalCursorPosition.current,\n          originalCursorPosition.current,\n        );\n      }\n\n      //Reset so originalCursorPosition is only set once.\n      selectionInProgress.current = false;\n    }\n  };\n\n  const handleMouseUp = () => {\n    const isValidBrowser = isFirefox() || isSafari();\n    if (\n      selectionInProgress.current &&\n      mouseMovement.current < 3 &&\n      isValidBrowser &&\n      Array.isArray(selection.current)\n    ) {\n      const [start, end] = selection.current;\n      setTimeout(() => {\n        if (\n          (inputRef.current?.selectionStart !== start ||\n            inputRef.current?.selectionEnd !== end) &&\n          typeof start === \"number\" &&\n          typeof end === \"number\"\n        ) {\n          inputRef.current?.setSelectionRange(start, end);\n        }\n      }, 0);\n    }\n\n    wasClick.current = false;\n    selectionInProgress.current = false;\n    mouseMovement.current = 0;\n  };\n\n  useEffect(() => {\n    if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n      const handleFocusBehaviour = () => {\n        if (!inputRef.current) {\n          return;\n        }\n\n        const [start, end] = getSelectionRange(inputRef.current, {\n          highlightOnFocus,\n          cursorPositionOnFocus,\n        });\n        if (start !== null && end !== null) {\n          window.clearTimeout(timeoutRef.current);\n          const needsTimeout = isSafari() || wasClick.current;\n\n          if (wasClick.current) {\n            selectionInProgress.current = true;\n            mouseMovement.current = 0;\n          }\n\n          selection.current = [start, end];\n          // Keyboard focus needs to be outside setTimeout otherwise a flash of selected text appears.\n          if (needsTimeout) {\n            // Make's sure setSelectionRange is run after browser has set cursor position.\n            timeoutRef.current = window.setTimeout(() => {\n              if (wasClick.current) {\n                originalCursorPosition.current =\n                  inputRef.current?.selectionStart;\n              }\n              inputRef.current?.setSelectionRange(start, end);\n            }, 0);\n          } else {\n            inputRef.current?.setSelectionRange(start, end);\n          }\n        }\n      };\n\n      const handleFocusIn = () => {\n        // Ignore focus of input on window focus\n        if (wasWindowFocus.current) {\n          wasWindowFocus.current = false;\n          return;\n        }\n\n        if (cursorPositionOnFocus != null || highlightOnFocus != null) {\n          handleFocusBehaviour();\n        }\n      };\n\n      //Reset everything on window re-focus\n      const handleWindowFocus = () => {\n        const doc = ownerDocument(inputRef.current);\n        if (\n          doc.visibilityState === \"visible\" &&\n          doc.activeElement === inputRef.current\n        ) {\n          wasClick.current = false;\n          selectionInProgress.current = false;\n          mouseMovement.current = 0;\n          wasWindowFocus.current = true;\n        }\n      };\n\n      const eventName = isSafari() || isFirefox() ? \"focusIn\" : \"focus\";\n      const input = inputRef.current;\n      const doc = ownerDocument(inputRef.current);\n      input?.addEventListener(eventName, handleFocusIn);\n      doc.addEventListener(\"visibilitychange\", handleWindowFocus);\n\n      return () => {\n        input?.removeEventListener(eventName, handleFocusIn);\n        doc?.removeEventListener(\"visibilitychange\", handleWindowFocus);\n      };\n    }\n\n    return undefined;\n  }, [cursorPositionOnFocus, highlightOnFocus, inputRef]);\n\n  return { handleMouseDown, handleMouseMove, handleMouseUp };\n}\n"],"names":["useRef","useEffect","_a","doc","ownerDocument"],"mappings":"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"}

package/dist-cjs/layer-layout/LayerLayout.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltLayerLayout {\n  --layerLayout-boxShadow: var(--saltLayerLayout-boxShadow, var(--salt-overlayable-shadow-modal));\n  --layerLayout-background: var(--saltLayerLayout-background, var(--salt-container-primary-background));\n  --layerLayout-padding: var(--saltLayerLayout-padding, var(--salt-size-container-spacing));\n  --layerLayout-margin: var(--saltLayerLayout-margin, var(--salt-size-container-spacing));\n}\n\n.saltLayerLayout {\n  background: var(--layerLayout-background);\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  max-width: 100%;\n  overflow: auto;\n  padding: var(--layerLayout-padding);\n  box-shadow: var(--saltLayerLayout-boxShadow, var(--layerLayout-boxShadow));\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n  box-sizing: border-box;\n}\n\n.saltLayerLayout-fullScreen {\n  width: 100vw;\n  height: 100vh;\n  margin: 0;\n  position: fixed;\n  top: 0;\n  left: 0;\n}\n\n.saltLayerLayout-center {\n  margin: var(--saltLayerLayout-margin, var(--layerLayout-margin));\n}\n\n.saltLayerLayout-center.saltLayerLayout-enter-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-enter-animation,\n.saltScrim.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-fade-in-center);\n}\n\n.saltLayerLayout-center.saltLayerLayout-exit-animation,\n.saltLayerLayout-fullScreen.saltLayerLayout-exit-animation,\n.saltScrim.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-fade-out-back);\n}\n\n.saltLayerLayout-anchor {\n  position: fixed;\n  max-height: 100%;\n  top: 0;\n}\n\n.saltLayerLayout-top {\n  left: 0;\n  right: 0;\n  bottom: auto;\n}\n\n.saltLayerLayout-top.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-bottom);\n}\n\n.saltLayerLayout-top.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-bottom);\n}\n\n.saltLayerLayout-right {\n  left: auto;\n  right: 0;\n  height: 100%;\n}\n\n.saltLayerLayout-right.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-right);\n}\n\n.saltLayerLayout-right.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-right);\n}\n\n.saltLayerLayout-left {\n  left: 0;\n  right: auto;\n  height: 100%;\n}\n\n.saltLayerLayout-left.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-left);\n}\n\n.saltLayerLayout-left.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-left);\n}\n\n.saltLayerLayout-bottom {\n  left: 0;\n  right: 0;\n  bottom: 0;\n  top: auto;\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-enter-animation {\n  animation: var(--salt-animation-slide-in-top);\n}\n\n.saltLayerLayout-bottom.saltLayerLayout-exit-animation {\n  animation: var(--salt-animation-slide-out-top);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=LayerLayout.css.js.map

package/dist-cjs/layer-layout/LayerLayout.css.js.map

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

package/dist-cjs/layer-layout/LayerLayout.js

@@ -0,0 +1,100 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+var react = require('react');
+var useIsViewportLargerThanBreakpoint = require('../utils/useIsViewportLargerThanBreakpoint.js');
+var LayerLayout$1 = require('./LayerLayout.css.js');
+
+const LAYER_POSITIONS = [
+  "center",
+  "left",
+  "top",
+  "right",
+  "bottom"
+];
+const withBaseName = core.makePrefixer("saltLayerLayout");
+const ariaAttributes = { role: "dialog", "aria-modal": true };
+const LayerLayout = react.forwardRef(
+  function LayerLayout2(props, ref) {
+    const {
+      children,
+      className,
+      disableScrim = false,
+      position = "center",
+      fullScreenAtBreakpoint = "sm",
+      disableAnimations = false,
+      scrimProps,
+      isOpen = true,
+      ...rest
+    } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-layer-layout",
+      css: LayerLayout$1,
+      window: targetWindow
+    });
+    const previousDisableAnimationsProp = core.usePrevious(
+      disableAnimations,
+      [disableAnimations],
+      false
+    );
+    const [showComponent, setShowComponent] = react.useState(false);
+    const [isAnimating, setIsAnimating] = react.useState(false);
+    react.useEffect(() => {
+      if (!isOpen && disableAnimations || !isOpen && !isAnimating) {
+        setShowComponent(false);
+      }
+      if (isOpen && !showComponent) {
+        setShowComponent(true);
+      }
+    }, [isOpen, showComponent, disableAnimations, isAnimating]);
+    const fullScreen = useIsViewportLargerThanBreakpoint.useIsViewportLargerThanBreakpoint(
+      fullScreenAtBreakpoint
+    );
+    const anchored = position !== "center" && !fullScreen;
+    const enterAnimation = !disableAnimations && isOpen && !previousDisableAnimationsProp;
+    const exitAnimation = !disableAnimations && !isOpen;
+    const layerLayout = showComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx.clsx(withBaseName(), className, {
+          [withBaseName("anchor")]: anchored,
+          [withBaseName("fullScreen")]: fullScreen,
+          [withBaseName(position)]: !fullScreen,
+          [withBaseName("enter-animation")]: enterAnimation,
+          [withBaseName("exit-animation")]: exitAnimation
+        }),
+        onAnimationStart: () => setIsAnimating(true),
+        onAnimationEnd: () => {
+          if (!isOpen && showComponent) {
+            setShowComponent(false);
+          }
+        },
+        ...disableScrim && ariaAttributes,
+        ...rest,
+        children
+      }
+    ) : null;
+    return disableScrim ? layerLayout : /* @__PURE__ */ jsxRuntime.jsx(
+      core.Scrim,
+      {
+        open: showComponent,
+        className: clsx.clsx({
+          [withBaseName("enter-animation")]: enterAnimation,
+          [withBaseName("exit-animation")]: exitAnimation
+        }),
+        ...scrimProps,
+        children: layerLayout
+      }
+    );
+  }
+);
+
+exports.LAYER_POSITIONS = LAYER_POSITIONS;
+exports.LayerLayout = LayerLayout;
+//# sourceMappingURL=LayerLayout.js.map

package/dist-cjs/layer-layout/LayerLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerLayout.js","sources":["../src/layer-layout/LayerLayout.tsx"],"sourcesContent":["import {\n  type Breakpoints,\n  makePrefixer,\n  Scrim,\n  type ScrimProps,\n  usePrevious,\n} from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useEffect, useState } from \"react\";\nimport { useIsViewportLargerThanBreakpoint } from \"../utils\";\n\nimport layerLayoutCss from \"./LayerLayout.css\";\n\nexport const LAYER_POSITIONS = [\n  \"center\",\n  \"left\",\n  \"top\",\n  \"right\",\n  \"bottom\",\n] as const;\n\nexport type LayerPositions = (typeof LAYER_POSITIONS)[number];\n\nexport interface LayerLayoutProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * Disable the scrim.\n   */\n  disableScrim?: boolean;\n  /**\n   * Defines the layer position within the screen.\n   */\n  position?: LayerPositions;\n  /**\n   * Breakpoint at which the layer will become fullscreen.\n   */\n  fullScreenAtBreakpoint?: keyof Breakpoints;\n  /**\n   * Disable all animations.\n   */\n  disableAnimations?: boolean;\n  /**\n   * Display or hide the component.\n   */\n  isOpen?: boolean;\n  /**\n   * Props to be passed to the Scrim component.\n   */\n  scrimProps?: Partial<ScrimProps>;\n}\n\nconst withBaseName = makePrefixer(\"saltLayerLayout\");\n\nconst ariaAttributes = { role: \"dialog\", \"aria-modal\": true };\n\nexport const LayerLayout = forwardRef<HTMLDivElement, LayerLayoutProps>(\n  function LayerLayout(props, ref) {\n    const {\n      children,\n      className,\n      disableScrim = false,\n      position = \"center\",\n      fullScreenAtBreakpoint = \"sm\",\n      disableAnimations = false,\n      scrimProps,\n      isOpen = true,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-layer-layout\",\n      css: layerLayoutCss,\n      window: targetWindow,\n    });\n\n    const previousDisableAnimationsProp = usePrevious(\n      disableAnimations,\n      [disableAnimations],\n      false,\n    ); // we check the previous value for this prop to prevent the animations from triggering again when it changes\n\n    const [showComponent, setShowComponent] = useState(false);\n\n    const [isAnimating, setIsAnimating] = useState(false);\n\n    useEffect(() => {\n      if ((!isOpen && disableAnimations) || (!isOpen && !isAnimating)) {\n        setShowComponent(false);\n      }\n\n      if (isOpen && !showComponent) {\n        setShowComponent(true);\n      }\n    }, [isOpen, showComponent, disableAnimations, isAnimating]);\n\n    const fullScreen = useIsViewportLargerThanBreakpoint(\n      fullScreenAtBreakpoint,\n    );\n\n    const anchored = position !== \"center\" && !fullScreen;\n\n    const enterAnimation =\n      !disableAnimations && isOpen && !previousDisableAnimationsProp;\n\n    const exitAnimation = !disableAnimations && !isOpen;\n\n    const layerLayout = showComponent ? (\n      <div\n        ref={ref}\n        className={clsx(withBaseName(), className, {\n          [withBaseName(\"anchor\")]: anchored,\n          [withBaseName(\"fullScreen\")]: fullScreen,\n          [withBaseName(position)]: !fullScreen,\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        onAnimationStart={() => setIsAnimating(true)}\n        onAnimationEnd={() => {\n          if (!isOpen && showComponent) {\n            setShowComponent(false);\n          }\n        }}\n        {...(disableScrim && ariaAttributes)}\n        {...rest}\n      >\n        {children}\n      </div>\n    ) : null;\n\n    return disableScrim ? (\n      layerLayout\n    ) : (\n      <Scrim\n        open={showComponent}\n        className={clsx({\n          [withBaseName(\"enter-animation\")]: enterAnimation,\n          [withBaseName(\"exit-animation\")]: exitAnimation,\n        })}\n        {...scrimProps}\n      >\n        {layerLayout}\n      </Scrim>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","LayerLayout","useWindow","useComponentCssInjection","layerLayoutCss","usePrevious","useState","useEffect","useIsViewportLargerThanBreakpoint","jsx","clsx","Scrim"],"mappings":"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"}

package/dist-cjs/list/Highlighter.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltHighlighter-highlight {\n  font-weight: var(--salt-text-fontWeight-strong); /* TODO: Check with design */\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=Highlighter.css.js.map

package/dist-cjs/list/Highlighter.css.js.map

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

package/dist-cjs/list/Highlighter.js

@@ -0,0 +1,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var escapeRegExp = require('../utils/escapeRegExp.js');
+require('react');
+var Highlighter$1 = require('./Highlighter.css.js');
+
+const withBaseName = core.makePrefixer("saltHighlighter");
+const Highlighter = (props) => {
+  const { matchPattern, text = "" } = props;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-hightligher",
+    css: Highlighter$1,
+    window: targetWindow
+  });
+  const matchRegex = typeof matchPattern === "string" ? new RegExp(`(${escapeRegExp.escapeRegExp(matchPattern)})`, "gi") : matchPattern;
+  if (matchRegex === void 0 || matchPattern === "") {
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: text });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { children: text.split(matchRegex).map(
+    (part, index) => part.match(matchRegex) ? /* @__PURE__ */ jsxRuntime.jsx(
+      "strong",
+      {
+        className: withBaseName("highlight"),
+        children: part
+      },
+      `${index}-${part}`
+    ) : part
+  ) });
+};
+
+exports.Highlighter = Highlighter;
+//# sourceMappingURL=Highlighter.js.map

package/dist-cjs/list/Highlighter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Highlighter.js","sources":["../src/list/Highlighter.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport type { ReactElement } from \"react\";\nimport { escapeRegExp } from \"../utils\";\n\nimport highligherCss from \"./Highlighter.css\";\n\nconst withBaseName = makePrefixer(\"saltHighlighter\");\n\nexport interface HighlighterProps {\n  matchPattern?: RegExp | string;\n  text?: string;\n}\n\nexport const Highlighter = (\n  props: HighlighterProps,\n): ReactElement<HighlighterProps> => {\n  const { matchPattern, text = \"\" } = props;\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-hightligher\",\n    css: highligherCss,\n    window: targetWindow,\n  });\n  const matchRegex =\n    typeof matchPattern === \"string\"\n      ? new RegExp(`(${escapeRegExp(matchPattern)})`, \"gi\")\n      : matchPattern;\n\n  if (matchRegex === undefined || matchPattern === \"\") {\n    return <>{text}</>;\n  }\n  return (\n    <span>\n      {text.split(matchRegex).map((part, index) =>\n        part.match(matchRegex) ? (\n          <strong\n            className={withBaseName(\"highlight\")}\n            key={`${index}-${part}`}\n          >\n            {part}\n          </strong>\n        ) : (\n          part\n        ),\n      )}\n    </span>\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","highligherCss","escapeRegExp","jsx"],"mappings":";;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,iBAAiB,CAAA;AAO5C,MAAM,WAAA,GAAc,CACzB,KAAA,KACmC;AACnC,EAAA,MAAM,EAAE,YAAA,EAAc,IAAA,GAAO,EAAA,EAAG,GAAI,KAAA;AACpC,EAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,EAAAC,+BAAA,CAAyB;AAAA,IACvB,MAAA,EAAQ,kBAAA;AAAA,IACR,GAAA,EAAKC,aAAA;AAAA,IACL,MAAA,EAAQ;AAAA,GACT,CAAA;AACD,EAAA,MAAM,UAAA,GACJ,OAAO,YAAA,KAAiB,QAAA,GACpB,IAAI,MAAA,CAAO,CAAA,CAAA,EAAIC,yBAAA,CAAa,YAAY,CAAC,CAAA,CAAA,CAAA,EAAK,IAAI,CAAA,GAClD,YAAA;AAEN,EAAA,IAAI,UAAA,KAAe,MAAA,IAAa,YAAA,KAAiB,EAAA,EAAI;AACnD,IAAA,6DAAU,QAAA,EAAA,IAAA,EAAK,CAAA;AAAA,EACjB;AACA,EAAA,uBACEC,cAAA,CAAC,MAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,KAAA,CAAM,UAAU,CAAA,CAAE,GAAA;AAAA,IAAI,CAAC,IAAA,EAAM,KAAA,KACjC,IAAA,CAAK,KAAA,CAAM,UAAU,CAAA,mBACnBA,cAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,QAGlC,QAAA,EAAA;AAAA,OAAA;AAAA,MAFI,CAAA,EAAG,KAAK,CAAA,CAAA,EAAI,IAAI,CAAA;AAAA,KAGvB,GAEA;AAAA,GAEJ,EACF,CAAA;AAEJ;;;;"}

package/dist-cjs/list/List.css.js

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltList {\n  --list-background: var(--salt-container-primary-background);\n  --list-borderStyle: var(--salt-borderStyle-solid);\n  --list-borderWidth: var(--salt-size-fixed-100);\n  --list-height: auto;\n  --list-item-height: var(--salt-size-stackable);\n  --list-item-gap: 0px;\n  --list-maxHeight: 100%;\n\n  background: var(--list-background);\n  border-color: var(--salt-container-primary-borderColor);\n  border-style: var(--list-borderStyle);\n  border-width: var(--list-borderWidth);\n  height: var(--saltList-height, var(--list-height));\n  max-height: var(--list-maxHeight);\n  outline: none;\n  overflow-y: auto;\n  position: relative;\n  user-select: none;\n  width: var(--saltList-width, auto);\n\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight);\n  line-height: var(--salt-text-lineHeight);\n\n  box-sizing: border-box;\n}\n\n.saltList-borderless {\n  --list-borderStyle: none;\n}\n\n/* virtualised list */\n.saltList-viewport {\n  --list-item-height: 30px;\n  max-height: calc(var(--list-maxHeight) - 2 * var(--list-borderWidth));\n  overflow: auto;\n}\n\n.saltListItemHeader {\n  --saltList-item-background: var(--list-item-header-background);\n  color: var(--list-item-header-color);\n}\n\n.saltListItemHeader[data-sticky=\"true\"] {\n  --saltList-item-background: var(--list-background);\n  position: sticky;\n  top: 0;\n  z-index: 1;\n}\n\n.saltList-collapsible .saltListItemHeader:after {\n  border-width: var(--checkbox-borderWidth);\n  border-color: var(--checkbox-borderColor);\n  content: var(--list-item-header-twisty-content);\n  -webkit-mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  mask: var(--list-svg-chevron-down) center center / 12px 12px no-repeat;\n  background: var(--list-item-header-twisty-color);\n  height: 12px;\n  left: var(--list-item-header-twisty-left);\n  right: var(--list-item-header-twisty-right);\n  margin-top: -8px;\n  position: absolute;\n  top: var(--list-item-header-twisty-top);\n  transition: transform 0.3s;\n  width: 12px;\n}\n.saltListItemHeader[aria-expanded=\"false\"]:after {\n  transform: rotate(-90deg);\n}\n\n/* Selection */\n\n.saltList-scrollingContentContainer {\n  box-sizing: inherit;\n  position: relative;\n}\n\n.saltList-virtualized .saltListItem {\n  line-height: 30px;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  will-change: transform;\n}\n.saltList.saltFocusVisible:after {\n  inset: 2px;\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=List.css.js.map

package/dist-cjs/list/List.css.js.map

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

package/dist-cjs/list/List.js

@@ -0,0 +1,272 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
+var clsx = require('clsx');
+require('../common-hooks/collectionProvider.js');
+var itemToString = require('../common-hooks/itemToString.js');
+require('../common-hooks/keyUtils.js');
+var useCollectionItems = require('../common-hooks/useCollectionItems.js');
+var useImperativeScrollingAPI = require('../common-hooks/useImperativeScrollingAPI.js');
+var useKeyboardNavigation = require('../common-hooks/useKeyboardNavigation.js');
+require('../responsive/useResizeObserver.js');
+var isSelected = require('../common-hooks/utils/isSelected.js');
+var List$1 = require('./List.css.js');
+var ListItem = require('./ListItem.js');
+var useList = require('./useList.js');
+var useListHeight = require('./useListHeight.js');
+
+const defaultEmptyMessage = "No data to display";
+const withBaseName = core.makePrefixer("saltList");
+const List = react.forwardRef(function List2({
+  ListItem: ListItem$1 = ListItem.ListItem,
+  ListPlaceholder,
+  borderless,
+  children,
+  className,
+  collapsibleHeaders = false,
+  defaultHighlightedIndex,
+  defaultSelected,
+  disabled: listDisabled = false,
+  disableFocus = false,
+  disableTypeToSelect,
+  displayedItemCount = 10,
+  emptyMessage,
+  focusVisible: focusVisibleProp,
+  getItemHeight: getItemHeightProp,
+  getItemId,
+  height,
+  highlightedIndex: highlightedIndexProp,
+  id: idProp,
+  itemGapSize = 0,
+  itemHeight: itemHeightProp,
+  itemTextHighlightPattern,
+  itemToString: itemToString$1 = itemToString.itemToString,
+  listHandlers: listHandlersProp,
+  maxHeight,
+  maxWidth,
+  minHeight,
+  minWidth,
+  onSelect,
+  onSelectionChange,
+  onHighlight,
+  restoreLastFocus,
+  selected: selectedProp,
+  selectionStrategy,
+  checkable = selectionStrategy === "multiple",
+  scrollingApiRef,
+  // TODO do we still need these ?
+  selectionKeys,
+  showEmptyMessage = false,
+  source,
+  style: styleProp,
+  stickyHeaders,
+  tabToSelect,
+  width,
+  ...htmlAttributes
+}, forwardedRef) {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-list",
+    css: List$1,
+    window: targetWindow
+  });
+  const id = core.useIdMemo(idProp);
+  const rootRef = react.useRef(null);
+  const contentRef = react.useRef(null);
+  const rowHeightProxyRef = react.useRef(null);
+  const collectionHook = useCollectionItems.useCollectionItems({
+    id,
+    label: "List",
+    source,
+    children,
+    options: {
+      collapsibleHeaders,
+      // Add Group ChildTypes to options
+      getItemId,
+      itemToString: itemToString$1
+    }
+  });
+  const { preferredHeight } = useListHeight.useListHeight({
+    borderless,
+    displayedItemCount,
+    getItemHeight: getItemHeightProp,
+    height,
+    itemCount: collectionHook.data.length,
+    itemGapSize,
+    itemHeight: itemHeightProp,
+    rowHeightRef: rowHeightProxyRef
+  });
+  const {
+    focusVisible,
+    highlightedIndex,
+    listControlProps,
+    listHandlers,
+    listItemHeaderHandlers,
+    scrollIntoView,
+    selected
+  } = useList.useList({
+    collapsibleHeaders,
+    collectionHook,
+    containerRef: rootRef,
+    contentRef,
+    defaultHighlightedIndex,
+    defaultSelected: collectionHook.itemToCollectionItem(defaultSelected),
+    disabled: listDisabled,
+    disableTypeToSelect,
+    highlightedIndex: highlightedIndexProp,
+    label: id,
+    listHandlers: listHandlersProp,
+    // should this be in context ?
+    onSelect,
+    onSelectionChange,
+    onHighlight,
+    restoreLastFocus,
+    selected: collectionHook.itemToCollectionItem(selectedProp),
+    selectionStrategy,
+    selectionKeys,
+    stickyHeaders,
+    tabToSelect
+  });
+  useImperativeScrollingAPI.useImperativeScrollingAPI({
+    collectionHook,
+    forwardedRef: scrollingApiRef,
+    scrollableRef: rootRef,
+    scrollIntoView
+  });
+  const appliedFocusVisible = focusVisibleProp ?? focusVisible;
+  const createHeader = function createHeader2(idx, headerId, title, expanded) {
+    const header = /* @__PURE__ */ react.createElement(
+      ListItem$1,
+      {
+        ...listItemHeaderHandlers,
+        className: clsx.clsx("saltListItemHeader", {
+          focusVisible: collapsibleHeaders && appliedFocusVisible === idx.value
+        }),
+        "aria-expanded": expanded,
+        "data-idx": collapsibleHeaders ? idx.value : void 0,
+        "data-highlighted": idx.value === highlightedIndex || void 0,
+        "data-sticky": stickyHeaders,
+        "data-selectable": false,
+        id: headerId,
+        key: `header-${idx.value}`,
+        label: title
+      }
+    );
+    idx.value += 1;
+    return header;
+  };
+  const getItemHeight = getItemHeightProp === void 0 ? () => itemHeightProp : getItemHeightProp;
+  function renderCollectionItem(list, item, idx) {
+    const { disabled, value, id: itemId, label } = item;
+    const isChildItem = react.isValidElement(value);
+    const listItemProps = {
+      className: clsx.clsx({
+        saltHighlighted: idx.value === highlightedIndex,
+        saltFocusVisible: appliedFocusVisible === idx.value
+      }),
+      disabled: disabled || listDisabled,
+      id: itemId,
+      item: isChildItem ? void 0 : (item == null ? void 0 : item.value) ?? void 0,
+      itemHeight: getItemHeight(idx.value),
+      itemTextHighlightPattern,
+      key: itemId,
+      "data-idx": idx.value,
+      label,
+      role: "option",
+      selected: isSelected.isSelected(selected, item),
+      showCheckbox: checkable
+    };
+    list.push(
+      isChildItem ? react.cloneElement(value, listItemProps) : /* @__PURE__ */ jsxRuntime.jsx(ListItem$1, { ...listItemProps })
+    );
+    idx.value += 1;
+  }
+  const addGroup = function addGroup2(list, items, idx) {
+    const { count = 0, id: id2, expanded, label = "" } = items[idx.value];
+    const header = createHeader(idx, id2, label, expanded);
+    const childItems = expanded !== false ? [header].concat(
+      renderCollectionItems(items, idx, idx.value + count) || []
+    ) : header;
+    list.push(
+      /* @__PURE__ */ jsxRuntime.jsx("div", { role: "group", children: childItems }, id2)
+    );
+  };
+  const renderCollectionItems = (items, idx = { value: 0 }, end = items.length) => {
+    const listItems = [];
+    while (idx.value < end) {
+      const item = items[idx.value];
+      if (item.header && item.label != null) {
+        listItems.push(
+          createHeader(idx, item.id, item.label, item.expanded === false)
+        );
+      } else if (item.childNodes) {
+        addGroup(listItems, items, idx);
+      } else {
+        renderCollectionItem(listItems, item, idx);
+      }
+    }
+    return listItems;
+  };
+  function renderEmpty() {
+    if (emptyMessage || showEmptyMessage) {
+      return /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("empty-message"), children: emptyMessage ?? defaultEmptyMessage });
+    }
+    return null;
+  }
+  const renderContent = () => {
+    if (collectionHook.data.length) {
+      return renderCollectionItems(collectionHook.data);
+    }
+    renderEmpty();
+  };
+  const contentHeight = "auto";
+  const sizeStyles = {
+    "--list-item-gap": itemGapSize ? `${itemGapSize}px` : void 0,
+    minWidth,
+    minHeight,
+    width: width ?? "100%",
+    height: height ?? "100%",
+    maxWidth: maxWidth ?? width,
+    maxHeight: maxHeight ?? preferredHeight
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      "aria-multiselectable": selectionStrategy === "multiple" || selectionStrategy === "extended" || selectionStrategy === "extended-multi-range" || void 0,
+      ...htmlAttributes,
+      ...listHandlers,
+      ...listControlProps,
+      className: clsx.clsx(withBaseName(), className, {
+        // TODO low-emphasis
+        [withBaseName("borderless")]: borderless,
+        saltDisabled: listDisabled,
+        [withBaseName("collapsible")]: collapsibleHeaders,
+        saltFocusVisible: highlightedIndex === useKeyboardNavigation.LIST_FOCUS_VISIBLE
+      }),
+      id: `${id}`,
+      ref: core.useForkRef(rootRef, forwardedRef),
+      role: "listbox",
+      style: { ...styleProp, ...sizeStyles },
+      tabIndex: listDisabled || disableFocus ? void 0 : 0,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ListItem.ListItemProxy, { ref: rowHeightProxyRef }),
+        collectionHook.data.length === 0 && ListPlaceholder !== void 0 ? /* @__PURE__ */ jsxRuntime.jsx(ListPlaceholder, {}) : /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: withBaseName("scrollingContentContainer"),
+            ref: contentRef,
+            style: { height: contentHeight },
+            children: renderContent()
+          }
+        )
+      ]
+    }
+  );
+});
+
+exports.List = List;
+//# sourceMappingURL=List.js.map