@salt-ds/lab 1.0.0-alpha.7 → 1.0.0-alpha.70

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

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

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

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

package/dist-es/number-input/internal/useInterval.js.map

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

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

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

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

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

package/dist-es/number-input/useNumberInput.js

@@ -0,0 +1,97 @@
+import { useCallback } from 'react';
+import { useActivateWhileMouseDown } from './internal/useActivateWhileMouseDown.js';
+import { toFixedDecimalPlaces, toFloat, isAtMin, isAtMax } from './internal/utils.js';
+
+const useNumberInput = ({
+  decimalPlaces = 0,
+  disabled,
+  inputRef,
+  max = Number.MAX_SAFE_INTEGER,
+  min = Number.MIN_SAFE_INTEGER,
+  onChange,
+  readOnly,
+  setValue,
+  step = 1,
+  stepBlock = 10,
+  value
+}) => {
+  const setValueInRange = useCallback(
+    (event, modifiedValue) => {
+      if (readOnly) return;
+      let nextValue = modifiedValue;
+      if (nextValue < min) nextValue = min;
+      if (nextValue > max) nextValue = max;
+      const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);
+      if (Number.isNaN(toFloat(roundedValue))) return;
+      setValue(roundedValue);
+      onChange == null ? void 0 : onChange(event, roundedValue);
+    },
+    [decimalPlaces, min, max, onChange, readOnly, setValue]
+  );
+  const decrementValue = useCallback(
+    (event, block) => {
+      if (value === void 0 || isAtMin(value, min)) return;
+      const decrementStep = block ? stepBlock : step;
+      const nextValue = value === "" ? -decrementStep : toFloat(value) - decrementStep;
+      setValueInRange(event, nextValue);
+    },
+    [value, min, step, stepBlock, setValueInRange]
+  );
+  const incrementValue = useCallback(
+    (event, block) => {
+      if (value === void 0 || isAtMax(value, max)) return;
+      const incrementStep = block ? stepBlock : step;
+      const nextValue = value === "" ? incrementStep : toFloat(value) + incrementStep;
+      setValueInRange(event, nextValue);
+    },
+    [value, max, step, stepBlock, setValueInRange]
+  );
+  const { activate: decrementSpinner } = useActivateWhileMouseDown(
+    (event) => decrementValue(event),
+    isAtMin(value, min)
+  );
+  const { activate: incrementSpinner } = useActivateWhileMouseDown(
+    (event) => incrementValue(event),
+    isAtMax(value, max)
+  );
+  const handleButtonMouseUp = () => {
+    var _a;
+    return (_a = inputRef.current) == null ? void 0 : _a.focus();
+  };
+  const commonButtonProps = {
+    "aria-hidden": true,
+    tabIndex: -1,
+    onMouseUp: handleButtonMouseUp
+  };
+  const incrementButtonProps = {
+    ...commonButtonProps,
+    "aria-label": "increment value",
+    disabled: disabled || isAtMax(value, max),
+    onMouseDown: (event) => {
+      if (event.nativeEvent.button !== 0) {
+        return;
+      }
+      incrementSpinner(event);
+    }
+  };
+  const decrementButtonProps = {
+    ...commonButtonProps,
+    "aria-label": "decrement value",
+    disabled: disabled || isAtMin(value, min),
+    onMouseDown: (event) => {
+      if (event.nativeEvent.button !== 0) {
+        return;
+      }
+      decrementSpinner(event);
+    }
+  };
+  return {
+    incrementButtonProps,
+    decrementButtonProps,
+    incrementValue,
+    decrementValue
+  };
+};
+
+export { useNumberInput };
+//# sourceMappingURL=useNumberInput.js.map

package/dist-es/number-input/useNumberInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useNumberInput.js","sources":["../src/number-input/useNumberInput.ts"],"sourcesContent":["import {\n  type Dispatch,\n  type MouseEvent,\n  type MutableRefObject,\n  type SetStateAction,\n  type SyntheticEvent,\n  useCallback,\n} from \"react\";\nimport type { NumberInputProps } from \"./NumberInput\";\nimport { useActivateWhileMouseDown } from \"./internal/useActivateWhileMouseDown\";\nimport {\n  isAtMax,\n  isAtMin,\n  toFixedDecimalPlaces,\n  toFloat,\n} from \"./internal/utils\";\n\n/**\n * Manages increment / decrement logic\n */\nexport const useNumberInput = ({\n  decimalPlaces = 0,\n  disabled,\n  inputRef,\n  max = Number.MAX_SAFE_INTEGER,\n  min = Number.MIN_SAFE_INTEGER,\n  onChange,\n  readOnly,\n  setValue,\n  step = 1,\n  stepBlock = 10,\n  value,\n}: Pick<\n  NumberInputProps,\n  | \"decimalPlaces\"\n  | \"disabled\"\n  | \"inputRef\"\n  | \"max\"\n  | \"min\"\n  | \"onChange\"\n  | \"readOnly\"\n  | \"step\"\n  | \"stepBlock\"\n  | \"value\"\n> & {\n  setValue: Dispatch<SetStateAction<string | number | undefined>>;\n  inputRef: MutableRefObject<HTMLInputElement | null>;\n}) => {\n  const setValueInRange = useCallback(\n    (event: SyntheticEvent | undefined, modifiedValue: number) => {\n      if (readOnly) return;\n      let nextValue = modifiedValue;\n      if (nextValue < min) nextValue = min;\n      if (nextValue > max) nextValue = max;\n\n      const roundedValue = toFixedDecimalPlaces(nextValue, decimalPlaces);\n      if (Number.isNaN(toFloat(roundedValue))) return;\n\n      setValue(roundedValue);\n\n      onChange?.(event, roundedValue);\n    },\n    [decimalPlaces, min, max, onChange, readOnly, setValue],\n  );\n\n  const decrementValue = useCallback(\n    (event?: SyntheticEvent, block?: boolean) => {\n      if (value === undefined || isAtMin(value, min)) return;\n      const decrementStep = block ? stepBlock : step;\n      const nextValue =\n        value === \"\" ? -decrementStep : toFloat(value) - decrementStep;\n      setValueInRange(event, nextValue);\n    },\n    [value, min, step, stepBlock, setValueInRange],\n  );\n\n  const incrementValue = useCallback(\n    (event?: SyntheticEvent, block?: boolean) => {\n      if (value === undefined || isAtMax(value, max)) return;\n      const incrementStep = block ? stepBlock : step;\n      const nextValue =\n        value === \"\" ? incrementStep : toFloat(value) + incrementStep;\n      setValueInRange(event, nextValue);\n    },\n    [value, max, step, stepBlock, setValueInRange],\n  );\n\n  const { activate: decrementSpinner } = useActivateWhileMouseDown(\n    (event?: SyntheticEvent) => decrementValue(event),\n    isAtMin(value, min),\n  );\n\n  const { activate: incrementSpinner } = useActivateWhileMouseDown(\n    (event?: SyntheticEvent) => incrementValue(event),\n    isAtMax(value, max),\n  );\n\n  const handleButtonMouseUp = () => inputRef.current?.focus();\n\n  const commonButtonProps = {\n    \"aria-hidden\": true,\n    tabIndex: -1,\n    onMouseUp: handleButtonMouseUp,\n  };\n\n  const incrementButtonProps = {\n    ...commonButtonProps,\n    \"aria-label\": \"increment value\",\n    disabled: disabled || isAtMax(value, max),\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      if (event.nativeEvent.button !== 0) {\n        // To match closely with <input type='input'>\n        return;\n      }\n      incrementSpinner(event);\n    },\n  };\n\n  const decrementButtonProps = {\n    ...commonButtonProps,\n    \"aria-label\": \"decrement value\",\n    disabled: disabled || isAtMin(value, min),\n    onMouseDown: (event: MouseEvent<HTMLButtonElement>) => {\n      if (event.nativeEvent.button !== 0) {\n        // To match closely with <input type='input'>\n        return;\n      }\n      decrementSpinner(event);\n    },\n  };\n\n  return {\n    incrementButtonProps,\n    decrementButtonProps,\n    incrementValue,\n    decrementValue,\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist-es/portal/Portal.js

@@ -0,0 +1,52 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useForkRef, getRefFromChildren, useIsomorphicLayoutEffect, ownerDocument, SaltProvider } from '@salt-ds/core';
+import { forwardRef, useState, useRef, isValidElement, cloneElement } from 'react';
+import { createPortal } from 'react-dom';
+
+function getContainer(container) {
+  return typeof container === "function" ? container() : container;
+}
+const DEFAULT_ID = "portal-root";
+const Portal = forwardRef(function Portal2({
+  children,
+  container: containerProp = document.body,
+  disablePortal = false,
+  id = DEFAULT_ID
+}, ref) {
+  const [mounted, setMounted] = useState(false);
+  const portalRef = useRef(null);
+  const handleRef = useForkRef(getRefFromChildren(children), ref);
+  const container = getContainer(containerProp) ?? document.body;
+  useIsomorphicLayoutEffect(() => {
+    const root = ownerDocument(container).getElementById(id);
+    if (root) {
+      portalRef.current = root;
+    } else {
+      portalRef.current = ownerDocument(container).createElement("div");
+      portalRef.current.id = id;
+    }
+    const el = portalRef.current;
+    if (!container.contains(el)) {
+      container.appendChild(el);
+    }
+    setMounted(true);
+  }, [id, container]);
+  if (disablePortal) {
+    if (isValidElement(children)) {
+      return cloneElement(children, {
+        ref: handleRef
+      });
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children });
+  }
+  if (mounted && portalRef.current && children) {
+    return createPortal(
+      /* @__PURE__ */ jsx(SaltProvider, { children }),
+      portalRef.current
+    );
+  }
+  return null;
+});
+
+export { Portal };
+//# sourceMappingURL=Portal.js.map

package/dist-es/portal/Portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Portal.js","sources":["../src/portal/Portal.tsx"],"sourcesContent":["import {\n  SaltProvider,\n  getRefFromChildren,\n  ownerDocument,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport {\n  type ReactNode,\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport interface PortalProps {\n  /**\n   * The children to render into the `container`.\n   */\n  children?: ReactNode;\n  /**\n   * An HTML element, component instance, or function that returns either.\n   * The `container` will have the portal children appended to it.\n   *\n   * By default, it uses the body of the top-level document object,\n   * so it's simply `document.body` most of the time.\n   */\n  container?: Element | (() => Element | null) | null;\n  /**\n   * Disable the portal behavior.\n   * The children stay within it's parent DOM hierarchy.\n   */\n  disablePortal?: boolean;\n  /**\n   * If this node does not exist on the document, it will be created for you.\n   */\n  id?: string;\n}\n\nfunction getContainer(container: PortalProps[\"container\"]) {\n  return typeof container === \"function\" ? container() : container;\n}\n\nconst DEFAULT_ID = \"portal-root\";\n\n/**\n * Portals provide a first-class way to render children into a DOM node\n * that exists outside the DOM hierarchy of the parent component.\n */\nexport const Portal = forwardRef<HTMLElement, PortalProps>(function Portal(\n  {\n    children,\n    container: containerProp = document.body,\n    disablePortal = false,\n    id = DEFAULT_ID,\n  },\n  ref,\n) {\n  const [mounted, setMounted] = useState(false);\n  const portalRef = useRef<HTMLElement | null>(null);\n  const handleRef = useForkRef(getRefFromChildren(children), ref);\n\n  const container = getContainer(containerProp) ?? document.body;\n\n  useIsomorphicLayoutEffect(() => {\n    const root = ownerDocument(container).getElementById(id);\n\n    if (root) {\n      portalRef.current = root;\n    } else {\n      portalRef.current = ownerDocument(container).createElement(\"div\");\n      portalRef.current.id = id;\n    }\n\n    const el = portalRef.current;\n\n    if (!container.contains(el)) {\n      container.appendChild(el);\n    }\n\n    setMounted(true);\n  }, [id, container]);\n\n  if (disablePortal) {\n    if (isValidElement(children)) {\n      return cloneElement(children, {\n        ref: handleRef,\n      });\n    }\n    return <>{children}</>;\n  }\n\n  if (mounted && portalRef.current && children) {\n    return createPortal(\n      <SaltProvider>{children}</SaltProvider>,\n      portalRef.current,\n    );\n  }\n\n  return null;\n});\n"],"names":["Portal"],"mappings":";;;;;AAyCA,SAAS,aAAa,SAAqC,EAAA;AACzD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAa,GAAA,SAAA,EAAc,GAAA,SAAA;AACzD;AAEA,MAAM,UAAa,GAAA,aAAA;AAMN,MAAA,MAAA,GAAS,UAAqC,CAAA,SAASA,OAClE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA,EAAW,gBAAgB,QAAS,CAAA,IAAA;AAAA,EACpC,aAAgB,GAAA,KAAA;AAAA,EAChB,EAAK,GAAA;AACP,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,KAAK,CAAA;AAC5C,EAAM,MAAA,SAAA,GAAY,OAA2B,IAAI,CAAA;AACjD,EAAA,MAAM,SAAY,GAAA,UAAA,CAAW,kBAAmB,CAAA,QAAQ,GAAG,GAAG,CAAA;AAE9D,EAAA,MAAM,SAAY,GAAA,YAAA,CAAa,aAAa,CAAA,IAAK,QAAS,CAAA,IAAA;AAE1D,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,IAAO,GAAA,aAAA,CAAc,SAAS,CAAA,CAAE,eAAe,EAAE,CAAA;AAEvD,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA;AAAA,KACf,MAAA;AACL,MAAA,SAAA,CAAU,OAAU,GAAA,aAAA,CAAc,SAAS,CAAA,CAAE,cAAc,KAAK,CAAA;AAChE,MAAA,SAAA,CAAU,QAAQ,EAAK,GAAA,EAAA;AAAA;AAGzB,IAAA,MAAM,KAAK,SAAU,CAAA,OAAA;AAErB,IAAA,IAAI,CAAC,SAAA,CAAU,QAAS,CAAA,EAAE,CAAG,EAAA;AAC3B,MAAA,SAAA,CAAU,YAAY,EAAE,CAAA;AAAA;AAG1B,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,GACd,EAAA,CAAC,EAAI,EAAA,SAAS,CAAC,CAAA;AAElB,EAAA,IAAI,aAAe,EAAA;AACjB,IAAI,IAAA,cAAA,CAAe,QAAQ,CAAG,EAAA;AAC5B,MAAA,OAAO,aAAa,QAAU,EAAA;AAAA,QAC5B,GAAK,EAAA;AAAA,OACN,CAAA;AAAA;AAEH,IAAA,uCAAU,QAAS,EAAA,CAAA;AAAA;AAGrB,EAAI,IAAA,OAAA,IAAW,SAAU,CAAA,OAAA,IAAW,QAAU,EAAA;AAC5C,IAAO,OAAA,YAAA;AAAA,sBACL,GAAA,CAAC,gBAAc,QAAS,EAAA,CAAA;AAAA,MACxB,SAAU,CAAA;AAAA,KACZ;AAAA;AAGF,EAAO,OAAA,IAAA;AACT,CAAC;;;;"}

package/dist-es/query-input/QueryInput.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltQueryInputBody {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n}\n\n.saltQueryInputBody > .saltIcon {\n  padding: var(--salt-size-unit);\n  align-self: start;\n}\n\n.saltQueryInputBody-separator {\n  width: 1px;\n  background: var(--salt-separable-secondary-borderColor);\n  margin: 0 var(--salt-size-unit);\n  align-self: stretch;\n}\n\n.saltQueryInputBody-buttonGroup {\n  flex-shrink: 0;\n  align-self: start;\n  margin-bottom: var(--salt-size-unit);\n}\n\n.saltQueryInputBody-input {\n  flex-grow: 1;\n}\n\n.saltQueryInputValueSelector-content {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltCategoryList-categoryWidthMeasure {\n  position: fixed;\n  left: -1000px;\n  top: 0;\n  border: solid 1px black;\n}\n\n.saltCategoryList-category {\n  font-size: var(--salt-text-fontSize);\n}\n\n.saltCategoryListItem-text {\n  flex-shrink: 0;\n  margin-right: calc(var(--salt-size-unit) * 1.5);\n}\n\n.saltCategoryListItem-valuesContainer {\n  font-style: italic;\n  color: var(--salt-content-secondary-foreground);\n  flex-grow: 1;\n  display: flex;\n  flex-direction: row;\n  overflow: hidden;\n}\n\n.saltCategoryListItem-values {\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.saltCategoryListItem-chevron {\n  flex-shrink: 0;\n  margin-left: var(--salt-size-unit);\n}\n\n.saltListItem-selected .saltIcon {\n  fill: var(--list-item-text-color-active);\n}\n\n.saltQueryInputValueList {\n  border: solid 1px var(--salt-container-primary-borderColor);\n}\n\n.saltQueryInputValueList-back {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  border-bottom: solid 1px var(--salt-separable-secondary-borderColor);\n  cursor: pointer;\n}\n\n.saltQueryInputValueList-back .saltIcon {\n  margin-right: var(--salt-size-unit);\n}\n\n.saltQueryInputValueList-category {\n  font-size: var(--salt-text-fontSize);\n  flex-grow: 1;\n}\n\n.saltQueryInputSearchList-addKeyword {\n  border-top: solid 1px var(--salt-separable-secondary-borderColor);\n}\n\n.saltQueryInputSearchList-categoryTitle {\n  color: var(--salt-content-primary-foreground);\n  background: var(--salt-container-primary-background);\n  font-size: var(--salt-text-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  display: flex;\n  align-items: center;\n  padding: 0 var(--salt-size-unit);\n  position: sticky;\n  top: 0;\n  z-index: var(--salt-zIndex-default);\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=QueryInput.css.js.map

package/dist-es/query-input/QueryInput.css.js.map

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

package/dist-es/query-input/QueryInput.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import './internal/CategoryList.js';
+import './internal/CategoryListContext.js';
+import './internal/CategoryListItem.js';
+import { QueryInputBody } from './internal/QueryInputBody.js';
+import './internal/SearchList.js';
+import './internal/ValueList.js';
+import { ValueSelector } from './internal/ValueSelector.js';
+import { useQueryInput } from './useQueryInput.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './QueryInput.css.js';
+
+const withBaseName = makePrefixer("saltQueryInput");
+const QueryInput = forwardRef(
+  function QueryInput2(props, externalRef) {
+    const {
+      disabled,
+      categories,
+      selectedItems,
+      onChange,
+      defaultSelectedItems,
+      showCategory,
+      autoClose,
+      displayedItemCount,
+      booleanOperator,
+      onBooleanOperatorChange,
+      defaultBooleanOperator,
+      className,
+      ...restProps
+    } = props;
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-query-input",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      queryInputProps,
+      queryInputBodyRef,
+      queryInputBodyProps,
+      valueSelectorProps
+    } = useQueryInput(props, externalRef);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: clsx(withBaseName(), className),
+        onBlur: queryInputProps.onBlur,
+        onFocus: queryInputProps.onFocus,
+        "data-testid": "query-input",
+        ...restProps,
+        children: [
+          /* @__PURE__ */ jsx(
+            QueryInputBody,
+            {
+              ref: queryInputBodyRef,
+              ...queryInputBodyProps,
+              showCategory
+            }
+          ),
+          /* @__PURE__ */ jsx(ValueSelector, { ...valueSelectorProps })
+        ]
+      }
+    );
+  }
+);
+
+export { QueryInput };
+//# sourceMappingURL=QueryInput.js.map

package/dist-es/query-input/QueryInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryInput.js","sources":["../src/query-input/QueryInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef } from \"react\";\nimport { QueryInputBody, ValueSelector } from \"./internal\";\nimport type { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { type BooleanOperator, useQueryInput } from \"./useQueryInput\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport queryInputCss from \"./QueryInput.css\";\n\nconst withBaseName = makePrefixer(\"saltQueryInput\");\n\nexport interface QueryInputProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> {\n  disabled?: boolean;\n  categories: QueryInputCategory[];\n  selectedItems?: QueryInputItem[];\n  onChange?: (items: QueryInputItem[]) => void;\n  defaultSelectedItems?: QueryInputItem[];\n  showCategory?: boolean;\n  autoClose?: boolean;\n  displayedItemCount?: number;\n  booleanOperator?: BooleanOperator;\n  onBooleanOperatorChange?: (newOperator: BooleanOperator) => void;\n  defaultBooleanOperator?: BooleanOperator;\n}\n\nexport const QueryInput = forwardRef<HTMLDivElement, QueryInputProps>(\n  function QueryInput(props, externalRef) {\n    const {\n      disabled,\n      categories,\n      selectedItems,\n      onChange,\n      defaultSelectedItems,\n      showCategory,\n      autoClose,\n      displayedItemCount,\n      booleanOperator,\n      onBooleanOperatorChange,\n      defaultBooleanOperator,\n      className,\n      ...restProps\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-query-input\",\n      css: queryInputCss,\n      window: targetWindow,\n    });\n\n    const {\n      queryInputProps,\n      queryInputBodyRef,\n      queryInputBodyProps,\n      valueSelectorProps,\n    } = useQueryInput(props, externalRef);\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        onBlur={queryInputProps.onBlur}\n        onFocus={queryInputProps.onFocus}\n        data-testid=\"query-input\"\n        {...restProps}\n      >\n        <QueryInputBody\n          ref={queryInputBodyRef}\n          {...queryInputBodyProps}\n          showCategory={showCategory}\n        />\n        <ValueSelector {...valueSelectorProps} />\n      </div>\n    );\n  },\n);\n"],"names":["QueryInput","queryInputCss"],"mappings":";;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAe,aAAa,gBAAgB,CAAA;AAiB3C,MAAM,UAAa,GAAA,UAAA;AAAA,EACxB,SAASA,WAAW,CAAA,KAAA,EAAO,WAAa,EAAA;AACtC,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,QAAA;AAAA,MACA,oBAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,kBAAA;AAAA,MACA,eAAA;AAAA,MACA,uBAAA;AAAA,MACA,sBAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACD,GAAA,KAAA;AAEJ,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA,KACF,GAAI,aAAc,CAAA,KAAA,EAAO,WAAW,CAAA;AAEpC,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,QAAQ,eAAgB,CAAA,MAAA;AAAA,QACxB,SAAS,eAAgB,CAAA,OAAA;AAAA,QACzB,aAAY,EAAA,aAAA;AAAA,QACX,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,cAAA;AAAA,YAAA;AAAA,cACC,GAAK,EAAA,iBAAA;AAAA,cACJ,GAAG,mBAAA;AAAA,cACJ;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,aAAe,EAAA,EAAA,GAAG,kBAAoB,EAAA;AAAA;AAAA;AAAA,KACzC;AAAA;AAGN;;;;"}

package/dist-es/query-input/internal/CategoryList.js

@@ -0,0 +1,68 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIsomorphicLayoutEffect } from '@salt-ds/core';
+import { useRef, useState, useCallback } from 'react';
+import '../../list/Highlighter.js';
+import '../../list/ListItem.js';
+import { List } from '../../list/List.js';
+import '../../common-hooks/collectionProvider.js';
+import '../../common-hooks/keyUtils.js';
+import '../../responsive/useResizeObserver.js';
+import '../../list/VirtualizedList.js';
+import { CategoryListContext } from './CategoryListContext.js';
+import { CategoryListItem } from './CategoryListItem.js';
+
+const withBaseName = makePrefixer("saltCategoryList");
+const getCategoryLabel = (category) => category.name;
+function CategoryList(props) {
+  const {
+    categories,
+    rootWidth,
+    onCategorySelect,
+    highlightedCategoryIndex,
+    setHighlightedCategoryIndex
+  } = props;
+  const measureRef = useRef(null);
+  const [measuredCategories, setMeasuredCategories] = useState([]);
+  const [contextValue, setContextValue] = useState({
+    width: 0
+  });
+  useIsomorphicLayoutEffect(() => {
+    setTimeout(() => {
+      if (measureRef.current) {
+        const width = measureRef.current.offsetWidth;
+        setMeasuredCategories(categories);
+        setContextValue({
+          width
+        });
+      }
+    }, 0);
+  }, [categories]);
+  const onSelect = useCallback(
+    (_, item) => {
+      onCategorySelect(item);
+    },
+    [onCategorySelect]
+  );
+  const isMeasuring = measuredCategories !== categories;
+  if (isMeasuring) {
+    return /* @__PURE__ */ jsx("div", { ref: measureRef, className: withBaseName("categoryWidthMeasure"), children: categories.map((c) => {
+      return /* @__PURE__ */ jsx("div", { className: withBaseName("category"), children: c.name }, c.name);
+    }) });
+  }
+  return /* @__PURE__ */ jsx(CategoryListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    List,
+    {
+      ListItem: CategoryListItem,
+      "data-testid": "category-list",
+      highlightedIndex: highlightedCategoryIndex,
+      itemToString: getCategoryLabel,
+      onHighlight: setHighlightedCategoryIndex,
+      onSelect,
+      source: categories,
+      width: rootWidth
+    }
+  ) });
+}
+
+export { CategoryList };
+//# sourceMappingURL=CategoryList.js.map

package/dist-es/query-input/internal/CategoryList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryList.js","sources":["../src/query-input/internal/CategoryList.tsx"],"sourcesContent":["import { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport {\n  type Dispatch,\n  type SetStateAction,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\nimport type { SelectHandler } from \"../../common-hooks\";\nimport { List } from \"../../list\";\nimport type { QueryInputCategory } from \"../queryInputTypes\";\nimport { CategoryListContext } from \"./CategoryListContext\";\nimport { CategoryListItem } from \"./CategoryListItem\";\n\nconst withBaseName = makePrefixer(\"saltCategoryList\");\n\nexport interface CategoryListProps {\n  categories: QueryInputCategory[];\n  rootWidth: number;\n  onCategorySelect: (category: QueryInputCategory | null) => void;\n  highlightedCategoryIndex?: number;\n  setHighlightedCategoryIndex: Dispatch<SetStateAction<number>>;\n}\n\nconst getCategoryLabel = (category: QueryInputCategory) => category.name;\n\nexport function CategoryList(props: CategoryListProps) {\n  const {\n    categories,\n    rootWidth,\n    onCategorySelect,\n    highlightedCategoryIndex,\n    setHighlightedCategoryIndex,\n  } = props;\n\n  const measureRef = useRef<HTMLDivElement>(null);\n  const [measuredCategories, setMeasuredCategories] = useState<\n    QueryInputCategory[]\n  >([]);\n  const [contextValue, setContextValue] = useState<CategoryListContext>({\n    width: 0,\n  });\n\n  useIsomorphicLayoutEffect(() => {\n    setTimeout(() => {\n      if (measureRef.current) {\n        const width = measureRef.current.offsetWidth;\n        setMeasuredCategories(categories);\n        setContextValue({\n          width,\n        });\n      }\n    }, 0);\n  }, [categories]);\n\n  const onSelect: SelectHandler<QueryInputCategory> = useCallback(\n    (_, item) => {\n      onCategorySelect(item);\n    },\n    [onCategorySelect],\n  );\n\n  const isMeasuring = measuredCategories !== categories;\n\n  if (isMeasuring) {\n    return (\n      <div ref={measureRef} className={withBaseName(\"categoryWidthMeasure\")}>\n        {categories.map((c) => {\n          return (\n            <div key={c.name} className={withBaseName(\"category\")}>\n              {c.name}\n            </div>\n          );\n        })}\n      </div>\n    );\n  }\n\n  return (\n    <CategoryListContext.Provider value={contextValue}>\n      <List<QueryInputCategory>\n        ListItem={CategoryListItem}\n        data-testid=\"category-list\"\n        highlightedIndex={highlightedCategoryIndex}\n        itemToString={getCategoryLabel}\n        onHighlight={setHighlightedCategoryIndex}\n        onSelect={onSelect}\n        source={categories}\n        width={rootWidth}\n      />\n    </CategoryListContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAUpD,MAAM,gBAAA,GAAmB,CAAC,QAAA,KAAiC,QAAS,CAAA,IAAA;AAE7D,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAM,MAAA,UAAA,GAAa,OAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAA,QAAA,CAElD,EAAE,CAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,QAA8B,CAAA;AAAA,IACpE,KAAO,EAAA;AAAA,GACR,CAAA;AAED,EAAA,yBAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,KAAA,GAAQ,WAAW,OAAQ,CAAA,WAAA;AACjC,QAAA,qBAAA,CAAsB,UAAU,CAAA;AAChC,QAAgB,eAAA,CAAA;AAAA,UACd;AAAA,SACD,CAAA;AAAA;AACH,OACC,CAAC,CAAA;AAAA,GACN,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,QAA8C,GAAA,WAAA;AAAA,IAClD,CAAC,GAAG,IAAS,KAAA;AACX,MAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,cAAc,kBAAuB,KAAA,UAAA;AAE3C,EAAA,IAAI,WAAa,EAAA;AACf,IACE,uBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,GAAA,EAAK,UAAY,EAAA,SAAA,EAAW,YAAa,CAAA,sBAAsB,CACjE,EAAA,QAAA,EAAA,UAAA,CAAW,GAAI,CAAA,CAAC,CAAM,KAAA;AACrB,MACE,uBAAA,GAAA,CAAC,SAAiB,SAAW,EAAA,YAAA,CAAa,UAAU,CACjD,EAAA,QAAA,EAAA,CAAA,CAAE,IADK,EAAA,EAAA,CAAA,CAAE,IAEZ,CAAA;AAAA,KAEH,CACH,EAAA,CAAA;AAAA;AAIJ,EAAA,uBACG,GAAA,CAAA,mBAAA,CAAoB,QAApB,EAAA,EAA6B,OAAO,YACnC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,gBAAA;AAAA,MACV,aAAY,EAAA,eAAA;AAAA,MACZ,gBAAkB,EAAA,wBAAA;AAAA,MAClB,YAAc,EAAA,gBAAA;AAAA,MACd,WAAa,EAAA,2BAAA;AAAA,MACb,QAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,KAAO,EAAA;AAAA;AAAA,GAEX,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/query-input/internal/CategoryListContext.js

@@ -0,0 +1,15 @@
+import { createContext, useContext } from 'react';
+
+const CategoryListContext = createContext(void 0);
+function useCategoryListContext() {
+  const context = useContext(CategoryListContext);
+  if (!context) {
+    throw new Error(
+      "useCategoryListContext should be used inside CategoryList"
+    );
+  }
+  return context;
+}
+
+export { CategoryListContext, useCategoryListContext };
+//# sourceMappingURL=CategoryListContext.js.map

package/dist-es/query-input/internal/CategoryListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryListContext.js","sources":["../src/query-input/internal/CategoryListContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface CategoryListContext {\n  width: number;\n}\n\nexport const CategoryListContext = createContext<\n  CategoryListContext | undefined\n>(undefined);\n\nexport function useCategoryListContext(): CategoryListContext {\n  const context = useContext(CategoryListContext);\n  if (!context) {\n    throw new Error(\n      \"useCategoryListContext should be used inside CategoryList\",\n    );\n  }\n  return context;\n}\n"],"names":[],"mappings":";;AAMa,MAAA,mBAAA,GAAsB,cAEjC,MAAS;AAEJ,SAAS,sBAA8C,GAAA;AAC5D,EAAM,MAAA,OAAA,GAAU,WAAW,mBAAmB,CAAA;AAC9C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA;AAEF,EAAO,OAAA,OAAA;AACT;;;;"}

package/dist-es/query-input/internal/CategoryListItem.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, useIcon } from '@salt-ds/core';
+import { useRef, useMemo } from 'react';
+import '../../list/Highlighter.js';
+import { ListItem } from '../../list/ListItem.js';
+import '../../list/List.js';
+import '../../common-hooks/collectionProvider.js';
+import '../../common-hooks/keyUtils.js';
+import '../../responsive/useResizeObserver.js';
+import '../../list/VirtualizedList.js';
+import { useCategoryListContext } from './CategoryListContext.js';
+
+const withBaseName = makePrefixer("saltCategoryListItem");
+const CategoryListItem = function CategoryListItem2({ item: category, ...props }) {
+  const textRef = useRef(null);
+  const context = useCategoryListContext();
+  const { ExpandGroupIcon } = useIcon();
+  const textStyle = useMemo(
+    () => ({
+      minWidth: context.width
+    }),
+    [context.width]
+  );
+  return /* @__PURE__ */ jsxs(ListItem, { ...props, label: category == null ? void 0 : category.name, children: [
+    /* @__PURE__ */ jsx("div", { ref: textRef, className: withBaseName("text"), style: textStyle, children: category == null ? void 0 : category.name }),
+    /* @__PURE__ */ jsxs("div", { className: withBaseName("valuesContainer"), children: [
+      /* @__PURE__ */ jsx("span", { children: "(" }),
+      /* @__PURE__ */ jsx("span", { className: withBaseName("values"), children: category == null ? void 0 : category.values.join(", ") }),
+      /* @__PURE__ */ jsx("span", { children: ")" })
+    ] }),
+    /* @__PURE__ */ jsx(ExpandGroupIcon, { className: withBaseName("chevron") })
+  ] });
+};
+
+export { CategoryListItem };
+//# sourceMappingURL=CategoryListItem.js.map

package/dist-es/query-input/internal/CategoryListItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryListItem.js","sources":["../src/query-input/internal/CategoryListItem.tsx"],"sourcesContent":["import { makePrefixer, useIcon } from \"@salt-ds/core\";\nimport { type CSSProperties, useMemo, useRef } from \"react\";\nimport { ListItem, type ListItemProps, type ListItemType } from \"../../list\";\nimport type { QueryInputCategory } from \"../queryInputTypes\";\nimport { useCategoryListContext } from \"./CategoryListContext\";\n\nconst withBaseName = makePrefixer(\"saltCategoryListItem\");\n\nexport interface CategoryListItemProps\n  extends ListItemProps<QueryInputCategory> {\n  category: QueryInputCategory;\n}\n\nexport const CategoryListItem: ListItemType<QueryInputCategory> =\n  function CategoryListItem({ item: category, ...props }) {\n    const textRef = useRef<HTMLDivElement>(null);\n    const context = useCategoryListContext();\n    const { ExpandGroupIcon } = useIcon();\n    const textStyle: CSSProperties = useMemo(\n      () => ({\n        minWidth: context.width,\n      }),\n      [context.width],\n    );\n\n    return (\n      <ListItem {...props} label={category?.name}>\n        <div ref={textRef} className={withBaseName(\"text\")} style={textStyle}>\n          {category?.name}\n        </div>\n        <div className={withBaseName(\"valuesContainer\")}>\n          <span>(</span>\n          <span className={withBaseName(\"values\")}>\n            {category?.values.join(\", \")}\n          </span>\n          <span>)</span>\n        </div>\n        <ExpandGroupIcon className={withBaseName(\"chevron\")} />\n      </ListItem>\n    );\n  };\n"],"names":["CategoryListItem"],"mappings":";;;;;;;;;;;;AAMA,MAAM,YAAA,GAAe,aAAa,sBAAsB,CAAA;AAO3C,MAAA,gBAAA,GACX,SAASA,iBAAiB,CAAA,EAAE,MAAM,QAAU,EAAA,GAAG,OAAS,EAAA;AACtD,EAAM,MAAA,OAAA,GAAU,OAAuB,IAAI,CAAA;AAC3C,EAAA,MAAM,UAAU,sBAAuB,EAAA;AACvC,EAAM,MAAA,EAAE,eAAgB,EAAA,GAAI,OAAQ,EAAA;AACpC,EAAA,MAAM,SAA2B,GAAA,OAAA;AAAA,IAC/B,OAAO;AAAA,MACL,UAAU,OAAQ,CAAA;AAAA,KACpB,CAAA;AAAA,IACA,CAAC,QAAQ,KAAK;AAAA,GAChB;AAEA,EAAA,4BACG,QAAU,EAAA,EAAA,GAAG,KAAO,EAAA,KAAA,EAAO,qCAAU,IACpC,EAAA,QAAA,EAAA;AAAA,oBAAC,GAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,OAAA,EAAS,SAAW,EAAA,YAAA,CAAa,MAAM,CAAG,EAAA,KAAA,EAAO,SACxD,EAAA,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,IACb,EAAA,CAAA;AAAA,oBACC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,iBAAiB,CAC5C,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA,CAAA;AAAA,sBACP,GAAA,CAAC,UAAK,SAAW,EAAA,YAAA,CAAa,QAAQ,CACnC,EAAA,QAAA,EAAA,QAAA,IAAA,IAAA,GAAA,MAAA,GAAA,QAAA,CAAU,MAAO,CAAA,IAAA,CAAK,IACzB,CAAA,EAAA,CAAA;AAAA,sBACA,GAAA,CAAC,UAAK,QAAC,EAAA,GAAA,EAAA;AAAA,KACT,EAAA,CAAA;AAAA,oBACC,GAAA,CAAA,eAAA,EAAA,EAAgB,SAAW,EAAA,YAAA,CAAa,SAAS,CAAG,EAAA;AAAA,GACvD,EAAA,CAAA;AAEJ;;;;"}

package/dist-es/query-input/internal/QueryInputBody.js

@@ -0,0 +1,87 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, ToggleButtonGroup, ToggleButton } from '@salt-ds/core';
+import { FilterIcon } from '@salt-ds/icons';
+import { forwardRef, useMemo } from 'react';
+import { TokenizedInput } from '../../tokenized-input/TokenizedInput.js';
+import '../../tokenized-input/TokenizedInputBase.js';
+import 'clipboard-copy';
+import '../../form-field-context-legacy/FormFieldLegacyContext.js';
+
+const withBaseName = makePrefixer("saltQueryInputBody");
+const QueryInputBody = forwardRef(
+  function QueryInputBody2(props, ref) {
+    const {
+      inputRef,
+      disabled,
+      selectedItems,
+      onInputFocus,
+      onInputBlur,
+      showCategory,
+      inputValue,
+      onInputChange,
+      isFocused,
+      onInputClear,
+      onSelectedItemsChange,
+      onKeyDown,
+      onInputClick,
+      booleanOperator,
+      onBooleanOperatorChange
+    } = props;
+    const itemToString = useMemo(() => {
+      if (showCategory) {
+        return (item) => [item.category, item.value].join(": ");
+      }
+      return (item) => item.value;
+    }, [showCategory]);
+    const stringToItem = (selectedItems2, value) => {
+      return {
+        category: null,
+        value
+      };
+    };
+    const onChange = (event) => {
+      const newBooleanOperator = event.currentTarget.value;
+      onBooleanOperatorChange(newBooleanOperator);
+    };
+    return /* @__PURE__ */ jsxs("div", { ref, className: withBaseName(), children: [
+      /* @__PURE__ */ jsx(FilterIcon, {}),
+      /* @__PURE__ */ jsx(
+        TokenizedInput,
+        {
+          inputRef,
+          disabled,
+          className: withBaseName("input"),
+          selectedItems,
+          itemToString,
+          stringToItem,
+          onInputFocus,
+          onInputBlur,
+          value: inputValue,
+          onClick: onInputClick,
+          onInputChange,
+          expanded: isFocused,
+          onClear: onInputClear,
+          onChange: onSelectedItemsChange,
+          onKeyDown
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: withBaseName("separator") }),
+      /* @__PURE__ */ jsxs(
+        ToggleButtonGroup,
+        {
+          className: withBaseName("buttonGroup"),
+          "data-testid": "boolean-selector",
+          value: booleanOperator,
+          onChange,
+          children: [
+            /* @__PURE__ */ jsx(ToggleButton, { value: "and", children: "And" }),
+            /* @__PURE__ */ jsx(ToggleButton, { value: "or", children: "Or" })
+          ]
+        }
+      )
+    ] });
+  }
+);
+
+export { QueryInputBody };
+//# sourceMappingURL=QueryInputBody.js.map

package/dist-es/query-input/internal/QueryInputBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"QueryInputBody.js","sources":["../src/query-input/internal/QueryInputBody.tsx"],"sourcesContent":["import { ToggleButton, ToggleButtonGroup, makePrefixer } from \"@salt-ds/core\";\nimport { FilterIcon } from \"@salt-ds/icons\";\nimport {\n  type ChangeEventHandler,\n  type FocusEventHandler,\n  type KeyboardEventHandler,\n  type Ref,\n  type SyntheticEvent,\n  forwardRef,\n  useMemo,\n} from \"react\";\n\nimport {\n  type ChangeHandler,\n  type StringToItem,\n  TokenizedInput,\n} from \"../../tokenized-input\";\nimport type { QueryInputItem } from \"../queryInputTypes\";\nimport type { BooleanOperator } from \"../useQueryInput\";\n\nconst withBaseName = makePrefixer(\"saltQueryInputBody\");\n\nexport interface QueryInputBodyProps {\n  inputRef: Ref<HTMLInputElement>;\n  disabled?: boolean;\n  showCategory?: boolean;\n  selectedItems: QueryInputItem[];\n  onBlur: FocusEventHandler<HTMLInputElement>;\n  onFocus: FocusEventHandler<HTMLInputElement>;\n  onInputFocus: FocusEventHandler<HTMLInputElement>;\n  onInputBlur: FocusEventHandler<HTMLInputElement>;\n  onInputClick: (event: SyntheticEvent) => void;\n  onInputClear: () => void;\n  inputValue?: string;\n  onInputChange: ChangeEventHandler<HTMLInputElement>;\n  isFocused?: boolean;\n  onSelectedItemsChange: ChangeHandler<QueryInputItem>;\n  onKeyDown: KeyboardEventHandler<HTMLInputElement | HTMLButtonElement>;\n  booleanOperator: BooleanOperator;\n  onBooleanOperatorChange: (newBooleanOperator: BooleanOperator) => void;\n}\n\nexport const QueryInputBody = forwardRef<HTMLDivElement, QueryInputBodyProps>(\n  function QueryInputBody(props, ref) {\n    const {\n      inputRef,\n      disabled,\n      selectedItems,\n      onInputFocus,\n      onInputBlur,\n      showCategory,\n      inputValue,\n      onInputChange,\n      isFocused,\n      onInputClear,\n      onSelectedItemsChange,\n      onKeyDown,\n      onInputClick,\n      booleanOperator,\n      onBooleanOperatorChange,\n    } = props;\n\n    const itemToString = useMemo(() => {\n      if (showCategory) {\n        return (item: QueryInputItem) => [item.category, item.value].join(\": \");\n      }\n      return (item: QueryInputItem) => item.value;\n    }, [showCategory]);\n\n    const stringToItem: StringToItem<QueryInputItem> = (\n      selectedItems,\n      value,\n    ) => {\n      return {\n        category: null,\n        value,\n      };\n    };\n\n    const onChange = (event: SyntheticEvent<HTMLButtonElement>) => {\n      const newBooleanOperator = event.currentTarget.value as BooleanOperator;\n      onBooleanOperatorChange(newBooleanOperator);\n    };\n\n    return (\n      <div ref={ref} className={withBaseName()}>\n        <FilterIcon />\n        <TokenizedInput\n          inputRef={inputRef}\n          disabled={disabled}\n          className={withBaseName(\"input\")}\n          selectedItems={selectedItems}\n          // @ts-ignore\n          itemToString={itemToString}\n          // @ts-ignore\n          stringToItem={stringToItem}\n          onInputFocus={onInputFocus}\n          onInputBlur={onInputBlur}\n          value={inputValue}\n          onClick={onInputClick}\n          onInputChange={onInputChange}\n          expanded={isFocused}\n          onClear={onInputClear}\n          // @ts-ignore\n          onChange={onSelectedItemsChange}\n          onKeyDown={onKeyDown}\n        />\n        <div className={withBaseName(\"separator\")} />\n        <ToggleButtonGroup\n          className={withBaseName(\"buttonGroup\")}\n          data-testid=\"boolean-selector\"\n          value={booleanOperator}\n          onChange={onChange}\n        >\n          <ToggleButton value=\"and\">And</ToggleButton>\n          <ToggleButton value=\"or\">Or</ToggleButton>\n        </ToggleButtonGroup>\n      </div>\n    );\n  },\n);\n"],"names":["QueryInputBody","selectedItems"],"mappings":";;;;;;;;;AAoBA,MAAM,YAAA,GAAe,aAAa,oBAAoB,CAAA;AAsB/C,MAAM,cAAiB,GAAA,UAAA;AAAA,EAC5B,SAASA,eAAe,CAAA,KAAA,EAAO,GAAK,EAAA;AAClC,IAAM,MAAA;AAAA,MACJ,QAAA;AAAA,MACA,QAAA;AAAA,MACA,aAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAA;AAAA,MACA,aAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,qBAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,eAAA;AAAA,MACA;AAAA,KACE,GAAA,KAAA;AAEJ,IAAM,MAAA,YAAA,GAAe,QAAQ,MAAM;AACjC,MAAA,IAAI,YAAc,EAAA;AAChB,QAAO,OAAA,CAAC,SAAyB,CAAC,IAAA,CAAK,UAAU,IAAK,CAAA,KAAK,CAAE,CAAA,IAAA,CAAK,IAAI,CAAA;AAAA;AAExE,MAAO,OAAA,CAAC,SAAyB,IAAK,CAAA,KAAA;AAAA,KACxC,EAAG,CAAC,YAAY,CAAC,CAAA;AAEjB,IAAM,MAAA,YAAA,GAA6C,CACjDC,cAAAA,EACA,KACG,KAAA;AACH,MAAO,OAAA;AAAA,QACL,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AAAA,KACF;AAEA,IAAM,MAAA,QAAA,GAAW,CAAC,KAA6C,KAAA;AAC7D,MAAM,MAAA,kBAAA,GAAqB,MAAM,aAAc,CAAA,KAAA;AAC/C,MAAA,uBAAA,CAAwB,kBAAkB,CAAA;AAAA,KAC5C;AAEA,IAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,GAAU,EAAA,SAAA,EAAW,cACxB,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,UAAW,EAAA,EAAA,CAAA;AAAA,sBACZ,GAAA;AAAA,QAAC,cAAA;AAAA,QAAA;AAAA,UACC,QAAA;AAAA,UACA,QAAA;AAAA,UACA,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAA;AAAA,UAEA,YAAA;AAAA,UAEA,YAAA;AAAA,UACA,YAAA;AAAA,UACA,WAAA;AAAA,UACA,KAAO,EAAA,UAAA;AAAA,UACP,OAAS,EAAA,YAAA;AAAA,UACT,aAAA;AAAA,UACA,QAAU,EAAA,SAAA;AAAA,UACV,OAAS,EAAA,YAAA;AAAA,UAET,QAAU,EAAA,qBAAA;AAAA,UACV;AAAA;AAAA,OACF;AAAA,sBACC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,YAAA,CAAa,WAAW,CAAG,EAAA,CAAA;AAAA,sBAC3C,IAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,aAAa,aAAa,CAAA;AAAA,UACrC,aAAY,EAAA,kBAAA;AAAA,UACZ,KAAO,EAAA,eAAA;AAAA,UACP,QAAA;AAAA,UAEA,QAAA,EAAA;AAAA,4BAAC,GAAA,CAAA,YAAA,EAAA,EAAa,KAAM,EAAA,KAAA,EAAM,QAAG,EAAA,KAAA,EAAA,CAAA;AAAA,4BAC5B,GAAA,CAAA,YAAA,EAAA,EAAa,KAAM,EAAA,IAAA,EAAK,QAAE,EAAA,IAAA,EAAA;AAAA;AAAA;AAAA;AAC7B,KACF,EAAA,CAAA;AAAA;AAGN;;;;"}