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

package/dist-cjs/metric/MetricHeader.js

@@ -1,18 +1,16 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 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 react = require('react');
 var MetricContext = require('./internal/MetricContext.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var MetricHeader$1 = require('./MetricHeader.css.js');
 
 const withBaseName = core.makePrefixer("saltMetricHeader");
-const MetricHeader = React.forwardRef(
+const MetricHeader = react.forwardRef(
   function MetricHeader2({ SubtitleLinkProps, className, title, subtitle, ...restProps }, ref) {
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
@@ -21,31 +19,28 @@ const MetricHeader = React.forwardRef(
       window: targetWindow
     });
     const { titleId, subtitleId, headingAriaLevel } = MetricContext.useMetricContext();
-    const renderSubtitle = React.useCallback(() => {
-      if (!subtitle)
-        return null;
-      const subtitleComponent = /* @__PURE__ */ jsxRuntime.jsx(core.Text, {
-        id: subtitleId,
-        className: withBaseName("subtitle"),
-        "data-testid": "metric-subtitle",
-        children: subtitle
-      });
+    const renderSubtitle = react.useCallback(() => {
+      if (!subtitle) return null;
+      const subtitleComponent = /* @__PURE__ */ jsxRuntime.jsx(
+        core.Text,
+        {
+          id: subtitleId,
+          className: withBaseName("subtitle"),
+          "data-testid": "metric-subtitle",
+          variant: "secondary",
+          children: subtitle
+        }
+      );
       if (SubtitleLinkProps) {
         const { href = "", ...restLinkProps } = SubtitleLinkProps;
-        return /* @__PURE__ */ jsxRuntime.jsx(core.Link, {
-          href,
-          ...restLinkProps,
-          children: subtitleComponent
-        });
+        return /* @__PURE__ */ jsxRuntime.jsx(core.Link, { href, ...restLinkProps, children: subtitleComponent });
       }
       return subtitleComponent;
     }, [subtitle, subtitleId, SubtitleLinkProps]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      ...restProps,
-      className: clsx.clsx(withBaseName(), className),
-      ref,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Text, {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...restProps, className: clsx.clsx(withBaseName(), className), ref, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        core.Text,
+        {
           styleAs: "h4",
           className: withBaseName("title"),
           "data-testid": "metric-title",
@@ -53,10 +48,10 @@ const MetricHeader = React.forwardRef(
           role: "heading",
           "aria-level": headingAriaLevel,
           children: title
-        }),
-        renderSubtitle()
-      ]
-    });
+        }
+      ),
+      renderSubtitle()
+    ] });
   }
 );
 

package/dist-cjs/metric/MetricHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-header\",\n      css: metricHeaderCss,\n      window: targetWindow,\n    });\n\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","MetricHeader","useWindow","useComponentCssInjection","metricHeaderCss","useMetricContext","useCallback","jsx","Text","Link","jsxs","clsx"],"mappings":";;;;;;;;;;;;;AA2BA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAE7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,cACP,EAAE,iBAAA,EAAmB,WAAW,KAAO,EAAA,QAAA,EAAA,GAAa,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqBC,8BAAiB,EAAA,CAAA;AAEnE,IAAM,MAAA,cAAA,GAAiBC,kBAAY,MAAM;AACvC,MAAA,IAAI,CAAC,QAAA;AAAU,QAAO,OAAA,IAAA,CAAA;AAEtB,MAAA,MAAM,oCACHC,cAAA,CAAAC,SAAA,EAAA;AAAA,QACC,EAAI,EAAA,UAAA;AAAA,QACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,QAClC,aAAY,EAAA,iBAAA;AAAA,QAEX,QAAA,EAAA,QAAA;AAAA,OACH,CAAA,CAAA;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAO,EAAA,GAAA,aAAA,EAAkB,GAAA,iBAAA,CAAA;AAExC,QAAA,uBACGD,cAAA,CAAAE,SAAA,EAAA;AAAA,UAAK,IAAA;AAAA,UAAa,GAAG,aAAA;AAAA,UACnB,QAAA,EAAA,iBAAA;AAAA,SACH,CAAA,CAAA;AAAA,OAEJ;AAEA,MAAO,OAAA,iBAAA,CAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA,CAAA;AAE5C,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAK,GAAG,SAAA;AAAA,MAAW,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC9D,QAAA,EAAA;AAAA,wBAACJ,cAAA,CAAAC,SAAA,EAAA;AAAA,UACC,OAAQ,EAAA,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAY,EAAA,cAAA;AAAA,UACZ,EAAI,EAAA,OAAA;AAAA,UACJ,IAAK,EAAA,SAAA;AAAA,UACL,YAAY,EAAA,gBAAA;AAAA,UAEX,QAAA,EAAA,KAAA;AAAA,SACH,CAAA;AAAA,QACC,cAAe,EAAA;AAAA,OAAA;AAAA,KAClB,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, type LinkProps, makePrefixer, Text } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport metricHeaderCss from \"./MetricHeader.css\";\n\nexport interface MetricHeaderProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * If provided, subtitle will be rendered as a `Link` element with these props.\n   *\n   * @see `Link` for a list of valid props.\n   */\n  SubtitleLinkProps?: Omit<Partial<LinkProps>, \"children\">;\n  /**\n   * Subtitle of the Metric Header\n   */\n  subtitle?: string;\n  /**\n   * Title of the Metric Header\n   */\n  title: string;\n}\n\nconst withBaseName = makePrefixer(\"saltMetricHeader\");\n\nexport const MetricHeader = forwardRef<HTMLDivElement, MetricHeaderProps>(\n  function MetricHeader(\n    { SubtitleLinkProps, className, title, subtitle, ...restProps },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-header\",\n      css: metricHeaderCss,\n      window: targetWindow,\n    });\n\n    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();\n\n    const renderSubtitle = useCallback(() => {\n      if (!subtitle) return null;\n\n      const subtitleComponent = (\n        <Text\n          id={subtitleId}\n          className={withBaseName(\"subtitle\")}\n          data-testid=\"metric-subtitle\"\n          variant=\"secondary\"\n        >\n          {subtitle}\n        </Text>\n      );\n\n      if (SubtitleLinkProps) {\n        const { href = \"\", ...restLinkProps } = SubtitleLinkProps;\n\n        return (\n          <Link href={href} {...restLinkProps}>\n            {subtitleComponent}\n          </Link>\n        );\n      }\n\n      return subtitleComponent;\n    }, [subtitle, subtitleId, SubtitleLinkProps]);\n\n    return (\n      <div {...restProps} className={clsx(withBaseName(), className)} ref={ref}>\n        <Text\n          styleAs=\"h4\"\n          className={withBaseName(\"title\")}\n          data-testid=\"metric-title\"\n          id={titleId}\n          role=\"heading\"\n          aria-level={headingAriaLevel}\n        >\n          {title}\n        </Text>\n        {renderSubtitle()}\n      </div>\n    );\n  },\n);\n"],"names":["makePrefixer","forwardRef","MetricHeader","useWindow","useComponentCssInjection","metricHeaderCss","useMetricContext","useCallback","jsx","Text","Link","jsxs","clsx"],"mappings":";;;;;;;;;;;AA0BA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAA,GAAeC,gBAAA;AAAA,EAC1B,SAASC,aAAAA,CACP,EAAE,iBAAA,EAAmB,SAAA,EAAW,OAAO,QAAA,EAAU,GAAG,SAAA,EAAU,EAC9D,GAAA,EACA;AACA,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,oBAAA;AAAA,MACR,GAAA,EAAKC,cAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAA,EAAY,gBAAA,KAAqBC,8BAAA,EAAiB;AAEnE,IAAA,MAAM,cAAA,GAAiBC,kBAAY,MAAM;AACvC,MAAA,IAAI,CAAC,UAAU,OAAO,IAAA;AAEtB,MAAA,MAAM,iBAAA,mBACJC,cAAA;AAAA,QAACC,SAAA;AAAA,QAAA;AAAA,UACC,EAAA,EAAI,UAAA;AAAA,UACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAClC,aAAA,EAAY,iBAAA;AAAA,UACZ,OAAA,EAAQ,WAAA;AAAA,UAEP,QAAA,EAAA;AAAA;AAAA,OACH;AAGF,MAAA,IAAI,iBAAA,EAAmB;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAA,EAAI,GAAG,eAAc,GAAI,iBAAA;AAExC,QAAA,uBACED,cAAA,CAACE,SAAA,EAAA,EAAK,IAAA,EAAa,GAAG,eACnB,QAAA,EAAA,iBAAA,EACH,CAAA;AAAA,MAEJ;AAEA,MAAA,OAAO,iBAAA;AAAA,IACT,CAAA,EAAG,CAAC,QAAA,EAAU,UAAA,EAAY,iBAAiB,CAAC,CAAA;AAE5C,IAAA,uBACEC,eAAA,CAAC,KAAA,EAAA,EAAK,GAAG,SAAA,EAAW,SAAA,EAAWC,UAAK,YAAA,EAAa,EAAG,SAAS,CAAA,EAAG,GAAA,EAC9D,QAAA,EAAA;AAAA,sBAAAJ,cAAA;AAAA,QAACC,SAAA;AAAA,QAAA;AAAA,UACC,OAAA,EAAQ,IAAA;AAAA,UACR,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,UAC/B,aAAA,EAAY,cAAA;AAAA,UACZ,EAAA,EAAI,OAAA;AAAA,UACJ,IAAA,EAAK,SAAA;AAAA,UACL,YAAA,EAAY,gBAAA;AAAA,UAEX,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,MACC,cAAA;AAAe,KAAA,EAClB,CAAA;AAAA,EAEJ;AACF;;;;"}

package/dist-cjs/metric/internal/MetricContext.js

@@ -1,12 +1,10 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var react = require('react');
 
-var React = require('react');
-
-const MetricContext = React.createContext({});
+const MetricContext = react.createContext({});
 const { Provider: MetricContextProvider } = MetricContext;
-const useMetricContext = () => React.useContext(MetricContext);
+const useMetricContext = () => react.useContext(MetricContext);
 
 exports.MetricContextProvider = MetricContextProvider;
 exports.useMetricContext = useMetricContext;

package/dist-cjs/metric/internal/MetricContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"MetricContext.js","sources":["../src/metric/internal/MetricContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface MetricContextValue {\n  /**\n   * Text and value alignment.\n   */\n  align?: \"left\" | \"center\" | \"right\";\n  /**\n   * The direction of the main value\n   */\n  direction?: \"up\" | \"down\";\n  /**\n   * The position of the indicator with regards to the main value.\n   */\n  indicatorPosition?: \"start\" | \"end\";\n  /**\n   * The metric orientation (layout flow direction).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * If 'true', an indicator will be displayed which shows the direction of the main value\n   */\n  showIndicator?: boolean;\n  /**\n   * Set title's heading level. Defaults to 2\n   */\n  headingAriaLevel?: number;\n  /**\n   * Size of the metric value. Defaults to 'medium'\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface MetricContextComponentIds {\n  /**\n   * id of the subtitle\n   */\n  subtitleId?: string;\n  /**\n   * id of the title\n   */\n  titleId?: string;\n  /**\n   * id of the value\n   */\n  valueId?: string;\n}\n\nconst MetricContext = createContext<\n  MetricContextValue & MetricContextComponentIds\n>({});\n\nexport const { Provider: MetricContextProvider } = MetricContext;\nexport const useMetricContext = (): MetricContextValue &\n  MetricContextComponentIds => useContext(MetricContext);\n"],"names":["createContext","useContext"],"mappings":";;;;;;AAgDA,MAAM,aAAA,GAAgBA,mBAEpB,CAAA,EAAE,CAAA,CAAA;AAES,MAAA,EAAE,QAAU,EAAA,qBAAA,EAA0B,GAAA,cAAA;AACtC,MAAA,gBAAA,GAAmB,MACDC,gBAAA,CAAW,aAAa;;;;;"}
+{"version":3,"file":"MetricContext.js","sources":["../src/metric/internal/MetricContext.ts"],"sourcesContent":["import { createContext, useContext } from \"react\";\n\nexport interface MetricContextValue {\n  /**\n   * Text and value alignment.\n   */\n  align?: \"left\" | \"center\" | \"right\";\n  /**\n   * The direction of the main value\n   */\n  direction?: \"up\" | \"down\";\n  /**\n   * The position of the indicator with regards to the main value.\n   */\n  indicatorPosition?: \"start\" | \"end\";\n  /**\n   * The metric orientation (layout flow direction).\n   */\n  orientation?: \"horizontal\" | \"vertical\";\n  /**\n   * If 'true', an indicator will be displayed which shows the direction of the main value\n   */\n  showIndicator?: boolean;\n  /**\n   * Set title's heading level. Defaults to 2\n   */\n  headingAriaLevel?: number;\n  /**\n   * Size of the metric value. Defaults to 'medium'\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface MetricContextComponentIds {\n  /**\n   * id of the subtitle\n   */\n  subtitleId?: string;\n  /**\n   * id of the title\n   */\n  titleId?: string;\n  /**\n   * id of the value\n   */\n  valueId?: string;\n}\n\nconst MetricContext = createContext<\n  MetricContextValue & MetricContextComponentIds\n>({});\n\nexport const { Provider: MetricContextProvider } = MetricContext;\nexport const useMetricContext = (): MetricContextValue &\n  MetricContextComponentIds => useContext(MetricContext);\n"],"names":["createContext","useContext"],"mappings":";;;;AAgDA,MAAM,aAAA,GAAgBA,mBAAA,CAEpB,EAAE,CAAA;AAEG,MAAM,EAAE,QAAA,EAAU,qBAAA,EAAsB,GAAI;AAC5C,MAAM,gBAAA,GAAmB,MACDC,gBAAA,CAAW,aAAa;;;;;"}

package/dist-cjs/portal/Portal.js

@@ -1,30 +1,24 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
-var ReactDOM = require('react-dom');
 var core = require('@salt-ds/core');
+var react = require('react');
+var ReactDOM = require('react-dom');
 
 function getContainer(container) {
   return typeof container === "function" ? container() : container;
 }
 const DEFAULT_ID = "portal-root";
-const Portal = React.forwardRef(function Portal2({
+const Portal = react.forwardRef(function Portal2({
   children,
   container: containerProp = document.body,
   disablePortal = false,
   id = DEFAULT_ID
 }, ref) {
-  var _a;
-  const [mounted, setMounted] = React.useState(false);
-  const portalRef = React.useRef(null);
-  const handleRef = core.useForkRef(
-    React.isValidElement(children) ? children.ref : null,
-    ref
-  );
-  const container = (_a = getContainer(containerProp)) != null ? _a : document.body;
+  const [mounted, setMounted] = react.useState(false);
+  const portalRef = react.useRef(null);
+  const handleRef = core.useForkRef(core.getRefFromChildren(children), ref);
+  const container = getContainer(containerProp) ?? document.body;
   core.useIsomorphicLayoutEffect(() => {
     const root = core.ownerDocument(container).getElementById(id);
     if (root) {
@@ -40,20 +34,16 @@ const Portal = React.forwardRef(function Portal2({
     setMounted(true);
   }, [id, container]);
   if (disablePortal) {
-    if (React.isValidElement(children)) {
-      return React.cloneElement(children, {
+    if (react.isValidElement(children)) {
+      return react.cloneElement(children, {
         ref: handleRef
       });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
   }
   if (mounted && portalRef.current && children) {
     return ReactDOM.createPortal(
-      /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, {
-        children
-      }),
+      /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, { children }),
       portalRef.current
     );
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Portal.js","sources":["../src/portal/Portal.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  ReactNode,\n  useRef,\n  useState,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  SaltProvider,\n  ownerDocument,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\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(\n    // @ts-ignore\n    isValidElement(children) ? children.ref : null,\n    ref\n  );\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":["forwardRef","Portal","useState","useRef","useForkRef","isValidElement","useIsomorphicLayoutEffect","ownerDocument","cloneElement","jsx","Fragment","createPortal","SaltProvider"],"mappings":";;;;;;;;;AAwCA,SAAS,aAAa,SAAqC,EAAA;AACzD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAa,GAAA,SAAA,EAAc,GAAA,SAAA,CAAA;AACzD,CAAA;AAEA,MAAM,UAAa,GAAA,aAAA,CAAA;AAMN,MAAA,MAAA,GAASA,gBAAqC,CAAA,SAASC,OAClE,CAAA;AAAA,EACE,QAAA;AAAA,EACA,SAAA,EAAW,gBAAgB,QAAS,CAAA,IAAA;AAAA,EACpC,aAAgB,GAAA,KAAA;AAAA,EAChB,EAAK,GAAA,UAAA;AACP,CAAA,EACA,GACA,EAAA;AA1DF,EAAA,IAAA,EAAA,CAAA;AA2DE,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAC5C,EAAM,MAAA,SAAA,GAAYC,aAA2B,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,SAAY,GAAAC,eAAA;AAAA,IAEhBC,oBAAe,CAAA,QAAQ,CAAI,GAAA,QAAA,CAAS,GAAM,GAAA,IAAA;AAAA,IAC1C,GAAA;AAAA,GACF,CAAA;AAEA,EAAA,MAAM,SAAY,GAAA,CAAA,EAAA,GAAA,YAAA,CAAa,aAAa,CAAA,KAA1B,YAA+B,QAAS,CAAA,IAAA,CAAA;AAE1D,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,IAAO,GAAAC,kBAAA,CAAc,SAAS,CAAA,CAAE,eAAe,EAAE,CAAA,CAAA;AAEvD,IAAA,IAAI,IAAM,EAAA;AACR,MAAA,SAAA,CAAU,OAAU,GAAA,IAAA,CAAA;AAAA,KACf,MAAA;AACL,MAAA,SAAA,CAAU,OAAU,GAAAA,kBAAA,CAAc,SAAS,CAAA,CAAE,cAAc,KAAK,CAAA,CAAA;AAChE,MAAA,SAAA,CAAU,QAAQ,EAAK,GAAA,EAAA,CAAA;AAAA,KACzB;AAEA,IAAA,MAAM,KAAK,SAAU,CAAA,OAAA,CAAA;AAErB,IAAA,IAAI,CAAC,SAAA,CAAU,QAAS,CAAA,EAAE,CAAG,EAAA;AAC3B,MAAA,SAAA,CAAU,YAAY,EAAE,CAAA,CAAA;AAAA,KAC1B;AAEA,IAAA,UAAA,CAAW,IAAI,CAAA,CAAA;AAAA,GACd,EAAA,CAAC,EAAI,EAAA,SAAS,CAAC,CAAA,CAAA;AAElB,EAAA,IAAI,aAAe,EAAA;AACjB,IAAI,IAAAF,oBAAA,CAAe,QAAQ,CAAG,EAAA;AAC5B,MAAA,OAAOG,mBAAa,QAAU,EAAA;AAAA,QAC5B,GAAK,EAAA,SAAA;AAAA,OACN,CAAA,CAAA;AAAA,KACH;AACA,IAAO,uBAAAC,cAAA,CAAAC,mBAAA,EAAA;AAAA,MAAG,QAAA;AAAA,KAAS,CAAA,CAAA;AAAA,GACrB;AAEA,EAAI,IAAA,OAAA,IAAW,SAAU,CAAA,OAAA,IAAW,QAAU,EAAA;AAC5C,IAAO,OAAAC,qBAAA;AAAA,sBACJF,cAAA,CAAAG,iBAAA,EAAA;AAAA,QAAc,QAAA;AAAA,OAAS,CAAA;AAAA,MACxB,SAAU,CAAA,OAAA;AAAA,KACZ,CAAA;AAAA,GACF;AAEA,EAAO,OAAA,IAAA,CAAA;AACT,CAAC;;;;"}
+{"version":3,"file":"Portal.js","sources":["../src/portal/Portal.tsx"],"sourcesContent":["import {\n  getRefFromChildren,\n  ownerDocument,\n  SaltProvider,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type ReactNode,\n  type Ref,\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<{ ref?: Ref<unknown> }>(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":["forwardRef","Portal","useState","useRef","useForkRef","getRefFromChildren","useIsomorphicLayoutEffect","ownerDocument","isValidElement","cloneElement","createPortal","jsx","SaltProvider"],"mappings":";;;;;;;AA0CA,SAAS,aAAa,SAAA,EAAqC;AACzD,EAAA,OAAO,OAAO,SAAA,KAAc,UAAA,GAAa,SAAA,EAAU,GAAI,SAAA;AACzD;AAEA,MAAM,UAAA,GAAa,aAAA;AAMZ,MAAM,MAAA,GAASA,gBAAA,CAAqC,SAASC,OAAAA,CAClE;AAAA,EACE,QAAA;AAAA,EACA,SAAA,EAAW,gBAAgB,QAAA,CAAS,IAAA;AAAA,EACpC,aAAA,GAAgB,KAAA;AAAA,EAChB,EAAA,GAAK;AACP,CAAA,EACA,GAAA,EACA;AACA,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAC5C,EAAA,MAAM,SAAA,GAAYC,aAA2B,IAAI,CAAA;AACjD,EAAA,MAAM,SAAA,GAAYC,eAAA,CAAWC,uBAAA,CAAmB,QAAQ,GAAG,GAAG,CAAA;AAE9D,EAAA,MAAM,SAAA,GAAY,YAAA,CAAa,aAAa,CAAA,IAAK,QAAA,CAAS,IAAA;AAE1D,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,MAAM,IAAA,GAAOC,kBAAA,CAAc,SAAS,CAAA,CAAE,eAAe,EAAE,CAAA;AAEvD,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,IACtB,CAAA,MAAO;AACL,MAAA,SAAA,CAAU,OAAA,GAAUA,kBAAA,CAAc,SAAS,CAAA,CAAE,cAAc,KAAK,CAAA;AAChE,MAAA,SAAA,CAAU,QAAQ,EAAA,GAAK,EAAA;AAAA,IACzB;AAEA,IAAA,MAAM,KAAK,SAAA,CAAU,OAAA;AAErB,IAAA,IAAI,CAAC,SAAA,CAAU,QAAA,CAAS,EAAE,CAAA,EAAG;AAC3B,MAAA,SAAA,CAAU,YAAY,EAAE,CAAA;AAAA,IAC1B;AAEA,IAAA,UAAA,CAAW,IAAI,CAAA;AAAA,EACjB,CAAA,EAAG,CAAC,EAAA,EAAI,SAAS,CAAC,CAAA;AAElB,EAAA,IAAI,aAAA,EAAe;AACjB,IAAA,IAAIC,oBAAA,CAAuC,QAAQ,CAAA,EAAG;AACpD,MAAA,OAAOC,mBAAa,QAAA,EAAU;AAAA,QAC5B,GAAA,EAAK;AAAA,OACN,CAAA;AAAA,IACH;AACA,IAAA,6DAAU,QAAA,EAAS,CAAA;AAAA,EACrB;AAEA,EAAA,IAAI,OAAA,IAAW,SAAA,CAAU,OAAA,IAAW,QAAA,EAAU;AAC5C,IAAA,OAAOC,qBAAA;AAAA,sBACLC,cAAA,CAACC,qBAAc,QAAA,EAAS,CAAA;AAAA,MACxB,SAAA,CAAU;AAAA,KACZ;AAAA,EACF;AAEA,EAAA,OAAO,IAAA;AACT,CAAC;;;;"}

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltQueryInput {\n}\n\n.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 {\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-text-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 {\n}\n\n.saltQueryInputSearchList-group {\n}\n\n.saltQueryInputSearchList-addKeyword {\n  border-top: solid 1px var(--salt-separable-secondary-borderColor);\n}\n\n.saltQueryInputSearchList-categoryTitle {\n  color: var(--salt-text-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\n.saltQueryInputSearchList-value {\n}\n";
+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: var(--salt-cursor-hover);\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";
 
 module.exports = css_248z;
 //# sourceMappingURL=QueryInput.css.js.map

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

@@ -1,11 +1,11 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 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 react = require('react');
 require('./internal/CategoryList.js');
 require('./internal/CategoryListContext.js');
 require('./internal/CategoryListItem.js');
@@ -13,26 +13,24 @@ var QueryInputBody = require('./internal/QueryInputBody.js');
 require('./internal/SearchList.js');
 require('./internal/ValueList.js');
 var ValueSelector = require('./internal/ValueSelector.js');
-var useQueryInput = require('./useQueryInput.js');
-var window = require('@salt-ds/window');
-var styles = require('@salt-ds/styles');
 var QueryInput$1 = require('./QueryInput.css.js');
+var useQueryInput = require('./useQueryInput.js');
 
 const withBaseName = core.makePrefixer("saltQueryInput");
-const QueryInput = React.forwardRef(
+const QueryInput = react.forwardRef(
   function QueryInput2(props, externalRef) {
     const {
-      disabled,
-      categories,
-      selectedItems,
-      onChange,
-      defaultSelectedItems,
+      disabled: _disabled,
+      categories: _categories,
+      selectedItems: _selectedItems,
+      onChange: _onChange,
+      defaultSelectedItems: _defaultSelectedItems,
       showCategory,
-      autoClose,
-      displayedItemCount,
-      booleanOperator,
-      onBooleanOperatorChange,
-      defaultBooleanOperator,
+      autoClose: _autoClose,
+      displayedItemCount: _displayedItemCount,
+      booleanOperator: _booleanOperator,
+      onBooleanOperatorChange: _onBooleanOperatorChange,
+      defaultBooleanOperator: _defaultBooleanOperator,
       className,
       ...restProps
     } = props;
@@ -48,23 +46,27 @@ const QueryInput = React.forwardRef(
       queryInputBodyProps,
       valueSelectorProps
     } = useQueryInput.useQueryInput(props, externalRef);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: clsx.clsx(withBaseName(), className),
-      onBlur: queryInputProps.onBlur,
-      onFocus: queryInputProps.onFocus,
-      "data-testid": "query-input",
-      ...restProps,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(QueryInputBody.QueryInputBody, {
-          ref: queryInputBodyRef,
-          ...queryInputBodyProps,
-          showCategory
-        }),
-        /* @__PURE__ */ jsxRuntime.jsx(ValueSelector.ValueSelector, {
-          ...valueSelectorProps
-        })
-      ]
-    });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: clsx.clsx(withBaseName(), className),
+        onBlur: queryInputProps.onBlur,
+        onFocus: queryInputProps.onFocus,
+        "data-testid": "query-input",
+        ...restProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            QueryInputBody.QueryInputBody,
+            {
+              ref: queryInputBodyRef,
+              ...queryInputBodyProps,
+              showCategory
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(ValueSelector.ValueSelector, { ...valueSelectorProps })
+        ]
+      }
+    );
   }
 );
 

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

@@ -1 +1 @@
-{"version":3,"file":"QueryInput.js","sources":["../src/query-input/QueryInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, HTMLAttributes } from \"react\";\nimport { QueryInputBody, ValueSelector } from \"./internal\";\nimport { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { BooleanOperator, useQueryInput } from \"./useQueryInput\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\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":["makePrefixer","forwardRef","QueryInput","useWindow","useComponentCssInjection","queryInputCss","useQueryInput","jsxs","clsx","jsx","QueryInputBody","ValueSelector"],"mappings":";;;;;;;;;;;;;;;;;;;;AAYA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA,CAAA;AAiB3C,MAAM,UAAa,GAAAC,gBAAA;AAAA,EACxB,SAASC,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,MACG,GAAA,SAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,kBAAA;AAAA,MACR,GAAK,EAAAC,YAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,mBAAA;AAAA,MACA,kBAAA;AAAA,KACF,GAAIC,2BAAc,CAAA,KAAA,EAAO,WAAW,CAAA,CAAA;AAEpC,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MACC,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACzC,QAAQ,eAAgB,CAAA,MAAA;AAAA,MACxB,SAAS,eAAgB,CAAA,OAAA;AAAA,MACzB,aAAY,EAAA,aAAA;AAAA,MACX,GAAG,SAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,6BAAA,EAAA;AAAA,UACC,GAAK,EAAA,iBAAA;AAAA,UACJ,GAAG,mBAAA;AAAA,UACJ,YAAA;AAAA,SACF,CAAA;AAAA,wBACCD,cAAA,CAAAE,2BAAA,EAAA;AAAA,UAAe,GAAG,kBAAA;AAAA,SAAoB,CAAA;AAAA,OAAA;AAAA,KACzC,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}
+{"version":3,"file":"QueryInput.js","sources":["../src/query-input/QueryInput.tsx"],"sourcesContent":["import { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { QueryInputBody, ValueSelector } from \"./internal\";\nimport queryInputCss from \"./QueryInput.css\";\nimport type { QueryInputCategory, QueryInputItem } from \"./queryInputTypes\";\nimport { type BooleanOperator, useQueryInput } from \"./useQueryInput\";\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: _disabled,\n      categories: _categories,\n      selectedItems: _selectedItems,\n      onChange: _onChange,\n      defaultSelectedItems: _defaultSelectedItems,\n      showCategory,\n      autoClose: _autoClose,\n      displayedItemCount: _displayedItemCount,\n      booleanOperator: _booleanOperator,\n      onBooleanOperatorChange: _onBooleanOperatorChange,\n      defaultBooleanOperator: _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":["makePrefixer","forwardRef","QueryInput","useWindow","useComponentCssInjection","queryInputCss","useQueryInput","jsxs","clsx","jsx","QueryInputBody","ValueSelector"],"mappings":";;;;;;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,gBAAgB,CAAA;AAiB3C,MAAM,UAAA,GAAaC,gBAAA;AAAA,EACxB,SAASC,WAAAA,CAAW,KAAA,EAAO,WAAA,EAAa;AACtC,IAAA,MAAM;AAAA,MACJ,QAAA,EAAU,SAAA;AAAA,MACV,UAAA,EAAY,WAAA;AAAA,MACZ,aAAA,EAAe,cAAA;AAAA,MACf,QAAA,EAAU,SAAA;AAAA,MACV,oBAAA,EAAsB,qBAAA;AAAA,MACtB,YAAA;AAAA,MACA,SAAA,EAAW,UAAA;AAAA,MACX,kBAAA,EAAoB,mBAAA;AAAA,MACpB,eAAA,EAAiB,gBAAA;AAAA,MACjB,uBAAA,EAAyB,wBAAA;AAAA,MACzB,sBAAA,EAAwB,uBAAA;AAAA,MACxB,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAA,EAAU;AAC/B,IAAAC,+BAAA,CAAyB;AAAA,MACvB,MAAA,EAAQ,kBAAA;AAAA,MACR,GAAA,EAAKC,YAAA;AAAA,MACL,MAAA,EAAQ;AAAA,KACT,CAAA;AAED,IAAA,MAAM;AAAA,MACJ,eAAA;AAAA,MACA,iBAAA;AAAA,MACA,mBAAA;AAAA,MACA;AAAA,KACF,GAAIC,2BAAA,CAAc,KAAA,EAAO,WAAW,CAAA;AAEpC,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,SAAA,CAAK,YAAA,EAAa,EAAG,SAAS,CAAA;AAAA,QACzC,QAAQ,eAAA,CAAgB,MAAA;AAAA,QACxB,SAAS,eAAA,CAAgB,OAAA;AAAA,QACzB,aAAA,EAAY,aAAA;AAAA,QACX,GAAG,SAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA;AAAA,YAACC,6BAAA;AAAA,YAAA;AAAA,cACC,GAAA,EAAK,iBAAA;AAAA,cACJ,GAAG,mBAAA;AAAA,cACJ;AAAA;AAAA,WACF;AAAA,0BACAD,cAAA,CAACE,2BAAA,EAAA,EAAe,GAAG,kBAAA,EAAoB;AAAA;AAAA;AAAA,KACzC;AAAA,EAEJ;AACF;;;;"}

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

@@ -1,20 +1,17 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
-var React = require('react');
 var core = require('@salt-ds/core');
+var react = require('react');
 require('../../list/Highlighter.js');
-require('../../list/ListItem.js');
 var List = require('../../list/List.js');
+require('../../list/ListItem.js');
 require('../../common-hooks/collectionProvider.js');
 require('../../common-hooks/keyUtils.js');
-require('../../utils/useFloatingUI.js');
 require('../../responsive/useResizeObserver.js');
 require('../../list/VirtualizedList.js');
-var CategoryListItem = require('./CategoryListItem.js');
 var CategoryListContext = require('./CategoryListContext.js');
+var CategoryListItem = require('./CategoryListItem.js');
 
 const withBaseName = core.makePrefixer("saltCategoryList");
 const getCategoryLabel = (category) => category.name;
@@ -26,9 +23,9 @@ function CategoryList(props) {
     highlightedCategoryIndex,
     setHighlightedCategoryIndex
   } = props;
-  const measureRef = React.useRef(null);
-  const [measuredCategories, setMeasuredCategories] = React.useState([]);
-  const [contextValue, setContextValue] = React.useState({
+  const measureRef = react.useRef(null);
+  const [measuredCategories, setMeasuredCategories] = react.useState([]);
+  const [contextValue, setContextValue] = react.useState({
     width: 0
   });
   core.useIsomorphicLayoutEffect(() => {
@@ -41,8 +38,8 @@ function CategoryList(props) {
         });
       }
     }, 0);
-  }, [categories, setMeasuredCategories, setContextValue]);
-  const onSelect = React.useCallback(
+  }, [categories]);
+  const onSelect = react.useCallback(
     (_, item) => {
       onCategorySelect(item);
     },
@@ -50,20 +47,13 @@ function CategoryList(props) {
   );
   const isMeasuring = measuredCategories !== categories;
   if (isMeasuring) {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      ref: measureRef,
-      className: withBaseName("categoryWidthMeasure"),
-      children: categories.map((c, i) => {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", {
-          className: withBaseName("category"),
-          children: c.name
-        }, i);
-      })
-    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: measureRef, className: withBaseName("categoryWidthMeasure"), children: categories.map((c) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: withBaseName("category"), children: c.name }, c.name);
+    }) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(CategoryListContext.CategoryListContext.Provider, {
-    value: contextValue,
-    children: /* @__PURE__ */ jsxRuntime.jsx(List.List, {
+  return /* @__PURE__ */ jsxRuntime.jsx(CategoryListContext.CategoryListContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    List.List,
+    {
       ListItem: CategoryListItem.CategoryListItem,
       "data-testid": "category-list",
       highlightedIndex: highlightedCategoryIndex,
@@ -72,8 +62,8 @@ function CategoryList(props) {
       onSelect,
       source: categories,
       width: rootWidth
-    })
-  });
+    }
+  ) });
 }
 
 exports.CategoryList = CategoryList;

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

@@ -1 +1 @@
-{"version":3,"file":"CategoryList.js","sources":["../src/query-input/internal/CategoryList.tsx"],"sourcesContent":["import { Dispatch, SetStateAction, useCallback, useRef, useState } from \"react\";\nimport { makePrefixer, useIsomorphicLayoutEffect } from \"@salt-ds/core\";\nimport { QueryInputCategory } from \"../queryInputTypes\";\nimport { SelectHandler } from \"../../common-hooks\";\nimport { List } from \"../../list\";\nimport { CategoryListItem } from \"./CategoryListItem\";\nimport { CategoryListContext } from \"./CategoryListContext\";\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, setMeasuredCategories, setContextValue]);\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, i) => {\n          return (\n            <div key={i} 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":["makePrefixer","useRef","useState","useIsomorphicLayoutEffect","useCallback","jsx","CategoryListContext","List","CategoryListItem"],"mappings":";;;;;;;;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAUpD,MAAM,gBAAA,GAAmB,CAAC,QAAA,KAAiC,QAAS,CAAA,IAAA,CAAA;AAE7D,SAAS,aAAa,KAA0B,EAAA;AACrD,EAAM,MAAA;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,GACE,GAAA,KAAA,CAAA;AAEJ,EAAM,MAAA,UAAA,GAAaC,aAAuB,IAAI,CAAA,CAAA;AAC9C,EAAA,MAAM,CAAC,kBAAoB,EAAA,qBAAqB,CAAI,GAAAC,cAAA,CAElD,EAAE,CAAA,CAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,cAA8B,CAAA;AAAA,IACpE,KAAO,EAAA,CAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAS,EAAA;AACtB,QAAM,MAAA,KAAA,GAAQ,WAAW,OAAQ,CAAA,WAAA,CAAA;AACjC,QAAA,qBAAA,CAAsB,UAAU,CAAA,CAAA;AAChC,QAAgB,eAAA,CAAA;AAAA,UACd,KAAA;AAAA,SACD,CAAA,CAAA;AAAA,OACH;AAAA,OACC,CAAC,CAAA,CAAA;AAAA,GACH,EAAA,CAAC,UAAY,EAAA,qBAAA,EAAuB,eAAe,CAAC,CAAA,CAAA;AAEvD,EAAA,MAAM,QAA8C,GAAAC,iBAAA;AAAA,IAClD,CAAC,GAAG,IAAS,KAAA;AACX,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,IACA,CAAC,gBAAgB,CAAA;AAAA,GACnB,CAAA;AAEA,EAAA,MAAM,cAAc,kBAAuB,KAAA,UAAA,CAAA;AAE3C,EAAA,IAAI,WAAa,EAAA;AACf,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,GAAK,EAAA,UAAA;AAAA,MAAY,SAAA,EAAW,aAAa,sBAAsB,CAAA;AAAA,MACjE,QAAW,EAAA,UAAA,CAAA,GAAA,CAAI,CAAC,CAAA,EAAG,CAAM,KAAA;AACxB,QAAA,uBACGA,cAAA,CAAA,KAAA,EAAA;AAAA,UAAY,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAC5C,QAAE,EAAA,CAAA,CAAA,IAAA;AAAA,SAAA,EADK,CAEV,CAAA,CAAA;AAAA,OAEH,CAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AAEA,EACE,uBAAAA,cAAA,CAACC,wCAAoB,QAApB,EAAA;AAAA,IAA6B,KAAO,EAAA,YAAA;AAAA,IACnC,QAAC,kBAAAD,cAAA,CAAAE,SAAA,EAAA;AAAA,MACC,QAAU,EAAAC,iCAAA;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,SAAA;AAAA,KACT,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ;;;;"}
+{"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":["makePrefixer","useRef","useState","useIsomorphicLayoutEffect","useCallback","jsx","CategoryListContext","List","CategoryListItem"],"mappings":";;;;;;;;;;;;;;;AAcA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA;AAUpD,MAAM,gBAAA,GAAmB,CAAC,QAAA,KAAiC,QAAA,CAAS,IAAA;AAE7D,SAAS,aAAa,KAAA,EAA0B;AACrD,EAAA,MAAM;AAAA,IACJ,UAAA;AAAA,IACA,SAAA;AAAA,IACA,gBAAA;AAAA,IACA,wBAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,UAAA,GAAaC,aAAuB,IAAI,CAAA;AAC9C,EAAA,MAAM,CAAC,kBAAA,EAAoB,qBAAqB,CAAA,GAAIC,cAAA,CAElD,EAAE,CAAA;AACJ,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAIA,cAAA,CAA8B;AAAA,IACpE,KAAA,EAAO;AAAA,GACR,CAAA;AAED,EAAAC,8BAAA,CAA0B,MAAM;AAC9B,IAAA,UAAA,CAAW,MAAM;AACf,MAAA,IAAI,WAAW,OAAA,EAAS;AACtB,QAAA,MAAM,KAAA,GAAQ,WAAW,OAAA,CAAQ,WAAA;AACjC,QAAA,qBAAA,CAAsB,UAAU,CAAA;AAChC,QAAA,eAAA,CAAgB;AAAA,UACd;AAAA,SACD,CAAA;AAAA,MACH;AAAA,IACF,GAAG,CAAC,CAAA;AAAA,EACN,CAAA,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAA,MAAM,QAAA,GAA8CC,iBAAA;AAAA,IAClD,CAAC,GAAG,IAAA,KAAS;AACX,MAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA,IACvB,CAAA;AAAA,IACA,CAAC,gBAAgB;AAAA,GACnB;AAEA,EAAA,MAAM,cAAc,kBAAA,KAAuB,UAAA;AAE3C,EAAA,IAAI,WAAA,EAAa;AACf,IAAA,uBACEC,cAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EAAY,SAAA,EAAW,YAAA,CAAa,sBAAsB,CAAA,EACjE,QAAA,EAAA,UAAA,CAAW,GAAA,CAAI,CAAC,CAAA,KAAM;AACrB,MAAA,uBACEA,cAAA,CAAC,SAAiB,SAAA,EAAW,YAAA,CAAa,UAAU,CAAA,EACjD,QAAA,EAAA,CAAA,CAAE,IAAA,EAAA,EADK,CAAA,CAAE,IAEZ,CAAA;AAAA,IAEJ,CAAC,CAAA,EACH,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACEA,cAAA,CAACC,uCAAA,CAAoB,QAAA,EAApB,EAA6B,OAAO,YAAA,EACnC,QAAA,kBAAAD,cAAA;AAAA,IAACE,SAAA;AAAA,IAAA;AAAA,MACC,QAAA,EAAUC,iCAAA;AAAA,MACV,aAAA,EAAY,eAAA;AAAA,MACZ,gBAAA,EAAkB,wBAAA;AAAA,MAClB,YAAA,EAAc,gBAAA;AAAA,MACd,WAAA,EAAa,2BAAA;AAAA,MACb,QAAA;AAAA,MACA,MAAA,EAAQ,UAAA;AAAA,MACR,KAAA,EAAO;AAAA;AAAA,GACT,EACF,CAAA;AAEJ;;;;"}

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

@@ -1,15 +1,13 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
+var react = require('react');
 
-var React = require('react');
-
-const CategoryListContext = React.createContext(void 0);
+const CategoryListContext = react.createContext(void 0);
 function useCategoryListContext() {
-  const context = React.useContext(CategoryListContext);
+  const context = react.useContext(CategoryListContext);
   if (!context) {
     throw new Error(
-      `useCategoryListContext should be used inside CategoryList`
+      "useCategoryListContext should be used inside CategoryList"
     );
   }
   return context;

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

@@ -1 +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":["createContext","useContext"],"mappings":";;;;;;AAMa,MAAA,mBAAA,GAAsBA,oBAEjC,KAAS,CAAA,EAAA;AAEJ,SAAS,sBAA8C,GAAA;AAC5D,EAAM,MAAA,OAAA,GAAUC,iBAAW,mBAAmB,CAAA,CAAA;AAC9C,EAAA,IAAI,CAAC,OAAS,EAAA;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR,CAAA,yDAAA,CAAA;AAAA,KACF,CAAA;AAAA,GACF;AACA,EAAO,OAAA,OAAA,CAAA;AACT;;;;;"}
+{"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":["createContext","useContext"],"mappings":";;;;AAMO,MAAM,mBAAA,GAAsBA,oBAEjC,MAAS;AAEJ,SAAS,sBAAA,GAA8C;AAC5D,EAAA,MAAM,OAAA,GAAUC,iBAAW,mBAAmB,CAAA;AAC9C,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,MAAM,IAAI,KAAA;AAAA,MACR;AAAA,KACF;AAAA,EACF;AACA,EAAA,OAAO,OAAA;AACT;;;;;"}

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

@@ -1,61 +1,37 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var jsxRuntime = require('react/jsx-runtime');
 var core = require('@salt-ds/core');
-var icons = require('@salt-ds/icons');
-var React = require('react');
+var react = require('react');
 require('../../list/Highlighter.js');
-var ListItem = require('../../list/ListItem.js');
 require('../../list/List.js');
+var ListItem = require('../../list/ListItem.js');
 require('../../common-hooks/collectionProvider.js');
 require('../../common-hooks/keyUtils.js');
-require('../../utils/useFloatingUI.js');
 require('../../responsive/useResizeObserver.js');
 require('../../list/VirtualizedList.js');
 var CategoryListContext = require('./CategoryListContext.js');
 
 const withBaseName = core.makePrefixer("saltCategoryListItem");
 const CategoryListItem = function CategoryListItem2({ item: category, ...props }) {
-  const textRef = React.useRef(null);
+  const textRef = react.useRef(null);
   const context = CategoryListContext.useCategoryListContext();
-  const textStyle = React.useMemo(
+  const { ExpandGroupIcon } = core.useIcon();
+  const textStyle = react.useMemo(
     () => ({
       minWidth: context.width
     }),
     [context.width]
   );
-  return /* @__PURE__ */ jsxRuntime.jsxs(ListItem.ListItem, {
-    ...props,
-    label: category == null ? void 0 : category.name,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", {
-        ref: textRef,
-        className: withBaseName("text"),
-        style: textStyle,
-        children: category == null ? void 0 : category.name
-      }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", {
-        className: withBaseName("valuesContainer"),
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", {
-            children: "("
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", {
-            className: withBaseName("values"),
-            children: category == null ? void 0 : category.values.join(", ")
-          }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", {
-            children: ")"
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {
-        className: withBaseName("chevron")
-      })
-    ]
-  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(ListItem.ListItem, { ...props, label: category == null ? void 0 : category.name, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { ref: textRef, className: withBaseName("text"), style: textStyle, children: category == null ? void 0 : category.name }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: withBaseName("valuesContainer"), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: "(" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: withBaseName("values"), children: category == null ? void 0 : category.values.join(", ") }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: ")" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(ExpandGroupIcon, { className: withBaseName("chevron") })
+  ] });
 };
 
 exports.CategoryListItem = CategoryListItem;