@salt-ds/lab 1.0.0-alpha.6 → 1.0.0-alpha.60

package/dist-es/metric/Metric.js

@@ -0,0 +1,82 @@
+import { jsx } from 'react/jsx-runtime';
+import { makePrefixer, useId } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useMemo } from 'react';
+import { MetricContextProvider } from './internal/MetricContext.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './Metric.css.js';
+
+const withBaseName = makePrefixer("saltMetric");
+const Metric = forwardRef(function Metric2({
+  className,
+  children,
+  direction,
+  showIndicator,
+  align = "left",
+  orientation = "vertical",
+  indicatorPosition = "end",
+  headingAriaLevel = 2,
+  id: idProp,
+  size = "medium",
+  ...restProps
+}, ref) {
+  const targetWindow = useWindow();
+  useComponentCssInjection({
+    testId: "salt-metric",
+    css: css_248z,
+    window: targetWindow
+  });
+  const id = useId(idProp);
+  const titleId = `metric-title-${id}`;
+  const subtitleId = `metric-subtitle-${id}`;
+  const valueId = `metric-value-${id}`;
+  const value = useMemo(
+    () => ({
+      align,
+      direction,
+      orientation,
+      showIndicator,
+      indicatorPosition,
+      headingAriaLevel,
+      size,
+      titleId,
+      subtitleId,
+      valueId
+    }),
+    [
+      align,
+      direction,
+      orientation,
+      showIndicator,
+      indicatorPosition,
+      headingAriaLevel,
+      size,
+      titleId,
+      subtitleId,
+      valueId
+    ]
+  );
+  return /* @__PURE__ */ jsx(MetricContextProvider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...restProps,
+      className: clsx(
+        withBaseName(),
+        withBaseName(`size-${size}`),
+        {
+          [withBaseName(`direction-${direction}`)]: direction,
+          [withBaseName(`orientation-${orientation}`)]: orientation,
+          [withBaseName(`align-${align}`)]: align
+        },
+        className
+      ),
+      id,
+      ref,
+      children
+    }
+  ) });
+});
+
+export { Metric };
+//# sourceMappingURL=Metric.js.map

package/dist-es/metric/Metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Metric.js","sources":["../src/metric/Metric.tsx"],"sourcesContent":["import { makePrefixer, useId } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useMemo } from \"react\";\nimport { MetricContextProvider, type MetricContextValue } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricCSS from \"./Metric.css\";\n\nconst withBaseName = makePrefixer(\"saltMetric\");\n\nexport interface MetricProps\n  extends MetricContextValue,\n    HTMLAttributes<HTMLDivElement> {\n  /**\n   * The aria-level attribute to be applied to the heading component. The default is 2.\n   *\n   * As an ADA requirement, the heading component should be the first valid component inside the Metric. It is the title\n   * if <MetricHeader/> is placed before <MerticContent/>. It is the main value if <MerticContent/> is placed before <MetricHeader/>.\n   */\n  headingAriaLevel?: number;\n  /**\n   * This prop is used to help implement the accessibility logic.\n   * If you don't provide this prop. It falls back to a randomly generated id.\n   */\n  id?: string;\n}\n\nexport const Metric = forwardRef<HTMLDivElement, MetricProps>(function Metric(\n  {\n    className,\n    children,\n    direction,\n    showIndicator,\n    align = \"left\",\n    orientation = \"vertical\",\n    indicatorPosition = \"end\",\n    headingAriaLevel = 2,\n    id: idProp,\n    size = \"medium\",\n    ...restProps\n  },\n  ref,\n) {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-metric\",\n    css: metricCSS,\n    window: targetWindow,\n  });\n\n  const id = useId(idProp);\n  const titleId = `metric-title-${id}`;\n  const subtitleId = `metric-subtitle-${id}`;\n  const valueId = `metric-value-${id}`;\n\n  const value = useMemo(\n    () => ({\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    }),\n    [\n      align,\n      direction,\n      orientation,\n      showIndicator,\n      indicatorPosition,\n      headingAriaLevel,\n      size,\n      titleId,\n      subtitleId,\n      valueId,\n    ],\n  );\n\n  return (\n    <MetricContextProvider value={value}>\n      <div\n        {...restProps}\n        className={clsx(\n          withBaseName(),\n          withBaseName(`size-${size}`),\n          {\n            [withBaseName(`direction-${direction}`)]: direction,\n            [withBaseName(`orientation-${orientation}`)]: orientation,\n            [withBaseName(`align-${align}`)]: align,\n          },\n          className,\n        )}\n        id={id}\n        ref={ref}\n      >\n        {children}\n      </div>\n    </MetricContextProvider>\n  );\n});\n"],"names":["Metric","metricCSS"],"mappings":";;;;;;;;;AAUA,MAAM,YAAA,GAAe,aAAa,YAAY,CAAA;AAmBjC,MAAA,MAAA,GAAS,UAAwC,CAAA,SAASA,OACrE,CAAA;AAAA,EACE,SAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAQ,GAAA,MAAA;AAAA,EACR,WAAc,GAAA,UAAA;AAAA,EACd,iBAAoB,GAAA,KAAA;AAAA,EACpB,gBAAmB,GAAA,CAAA;AAAA,EACnB,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,QAAA;AAAA,EACP,GAAG;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,EAAyB,wBAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA;AAAA,GACT,CAAA;AAED,EAAM,MAAA,EAAA,GAAK,MAAM,MAAM,CAAA;AACvB,EAAM,MAAA,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAClC,EAAM,MAAA,UAAA,GAAa,mBAAmB,EAAE,CAAA,CAAA;AACxC,EAAM,MAAA,OAAA,GAAU,gBAAgB,EAAE,CAAA,CAAA;AAElC,EAAA,MAAM,KAAQ,GAAA,OAAA;AAAA,IACZ,OAAO;AAAA,MACL,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KACF,CAAA;AAAA,IACA;AAAA,MACE,KAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,gBAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA;AACF,GACF;AAEA,EACE,uBAAA,GAAA,CAAC,yBAAsB,KACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACJ,SAAW,EAAA,IAAA;AAAA,QACT,YAAa,EAAA;AAAA,QACb,YAAA,CAAa,CAAQ,KAAA,EAAA,IAAI,CAAE,CAAA,CAAA;AAAA,QAC3B;AAAA,UACE,CAAC,YAAa,CAAA,CAAA,UAAA,EAAa,SAAS,CAAA,CAAE,CAAC,GAAG,SAAA;AAAA,UAC1C,CAAC,YAAa,CAAA,CAAA,YAAA,EAAe,WAAW,CAAA,CAAE,CAAC,GAAG,WAAA;AAAA,UAC9C,CAAC,YAAa,CAAA,CAAA,MAAA,EAAS,KAAK,CAAA,CAAE,CAAC,GAAG;AAAA,SACpC;AAAA,QACA;AAAA,OACF;AAAA,MACA,EAAA;AAAA,MACA,GAAA;AAAA,MAEC;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-es/metric/MetricContent.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMetricContent {\n  display: flex;\n  flex-direction: column;\n  margin-top: var(--metric-content-marginTop, 0px);\n}\n\n.saltMetricContent-value-container {\n  align-items: baseline;\n  display: flex;\n  flex-direction: row;\n  gap: calc(var(--salt-size-unit) / 2);\n  margin-top: var(--metric-content-valueContainer-marginTop, 0px);\n}\n\n.saltMetric-direction-up .saltMetricContent-indicator {\n  fill: var(--salt-status-positive-foreground);\n}\n.saltMetric-direction-up .saltMetricContent-subvalue {\n  color: var(--salt-status-positive-foreground);\n}\n\n.saltMetric-direction-down .saltMetricContent-indicator {\n  fill: var(--salt-status-negative-foreground);\n}\n.saltMetric-direction-down .saltMetricContent-subvalue {\n  color: var(--salt-status-negative-foreground);\n}\n\n.saltMetricContent-subvalue {\n  margin-top: var(--metric-content-subvalue-marginTop, 0px);\n}\n\n.saltMetric-align-left .saltMetricContent {\n  text-align: left;\n}\n\n.saltMetric-align-center .saltMetricContent {\n  align-items: center;\n  text-align: center;\n}\n\n.saltMetric-align-right .saltMetricContent {\n  align-items: flex-end;\n  text-align: right;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MetricContent.css.js.map

package/dist-es/metric/MetricContent.css.js.map

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

package/dist-es/metric/MetricContent.js

@@ -0,0 +1,92 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, Text, Display3, Display2, Display1 } from '@salt-ds/core';
+import { ArrowDownIcon, ArrowUpIcon } from '@salt-ds/icons';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import { useMetricContext } from './internal/MetricContext.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './MetricContent.css.js';
+
+const iconComponentMap = {
+  down: ArrowDownIcon,
+  up: ArrowUpIcon
+};
+const withBaseName = makePrefixer("saltMetricContent");
+const MetricContent = forwardRef(
+  function MetricContent2({
+    IndicatorIconProps,
+    IndicatorIconComponent,
+    className,
+    value,
+    subvalue,
+    ...restProps
+  }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-metric-content",
+      css: css_248z,
+      window: targetWindow
+    });
+    const {
+      direction,
+      showIndicator,
+      indicatorPosition,
+      size = "medium",
+      valueId,
+      titleId,
+      subtitleId
+    } = useMetricContext();
+    const iconSize = size === "large" ? 2 : 1;
+    const valueComponentMap = {
+      small: Display3,
+      medium: Display2,
+      large: Display1
+    };
+    const ValueComponent = valueComponentMap[size];
+    const iconProps = {
+      "aria-label": direction,
+      className: withBaseName("indicator"),
+      name: direction ? `movement-${direction}` : "",
+      size: iconSize,
+      ...IndicatorIconProps
+    };
+    const IconComponent = IndicatorIconComponent ?? (direction ? iconComponentMap[direction] : void 0);
+    const icon = showIndicator && IconComponent ? /* @__PURE__ */ jsx(IconComponent, { ...iconProps }) : null;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ...restProps,
+        className: clsx(withBaseName(), className),
+        "aria-labelledby": `${titleId || ""} ${subtitleId || ""}`,
+        ref,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: withBaseName("value-container"), children: [
+            indicatorPosition === "start" && icon,
+            /* @__PURE__ */ jsx(
+              ValueComponent,
+              {
+                "data-testid": "metric-value",
+                id: valueId,
+                className: withBaseName("value"),
+                children: value
+              }
+            ),
+            indicatorPosition === "end" && icon
+          ] }),
+          subvalue && /* @__PURE__ */ jsx(
+            Text,
+            {
+              className: withBaseName("subvalue"),
+              "data-testid": "metric-subvalue",
+              children: subvalue
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+
+export { MetricContent };
+//# sourceMappingURL=MetricContent.js.map

package/dist-es/metric/MetricContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricContent.js","sources":["../src/metric/MetricContent.tsx"],"sourcesContent":["import {\n  Display1,\n  Display2,\n  Display3,\n  Text,\n  makePrefixer,\n} from \"@salt-ds/core\";\nimport { ArrowDownIcon, ArrowUpIcon, type IconProps } from \"@salt-ds/icons\";\nimport { clsx } from \"clsx\";\nimport { type ComponentType, type HTMLAttributes, forwardRef } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport metricContentCss from \"./MetricContent.css\";\n\nexport interface MetricContentProps extends HTMLAttributes<HTMLDivElement> {\n  /**\n   * These props will be passed to the indicator icon. Use this to render a\n   * custom icon.\n   *\n   * @see `Icon` for a list of valid props.\n   */\n  IndicatorIconProps?: Partial<IconProps>;\n  /**\n   * Replace the default Icon component\n   */\n  IndicatorIconComponent?: ComponentType<IconProps>;\n\n  /**\n   * Other data that may serve as additional information to the main value\n   */\n  subvalue?: string | number;\n  /**\n   * The main value to display in the metric\n   */\n  value: string | number;\n}\n\nconst iconComponentMap = {\n  down: ArrowDownIcon,\n  up: ArrowUpIcon,\n};\n\nconst withBaseName = makePrefixer(\"saltMetricContent\");\n\nexport const MetricContent = forwardRef<HTMLDivElement, MetricContentProps>(\n  function MetricContent(\n    {\n      IndicatorIconProps,\n      IndicatorIconComponent,\n      className,\n      value,\n      subvalue,\n      ...restProps\n    },\n    ref,\n  ) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-metric-content\",\n      css: metricContentCss,\n      window: targetWindow,\n    });\n\n    const {\n      direction,\n      showIndicator,\n      indicatorPosition,\n      size = \"medium\",\n      valueId,\n      titleId,\n      subtitleId,\n    } = useMetricContext();\n\n    const iconSize = size === \"large\" ? 2 : 1;\n\n    const valueComponentMap = {\n      small: Display3,\n      medium: Display2,\n      large: Display1,\n    };\n    const ValueComponent = valueComponentMap[size];\n\n    const iconProps = {\n      \"aria-label\": direction,\n      className: withBaseName(\"indicator\"),\n      name: direction ? `movement-${direction}` : \"\",\n      size: iconSize,\n      ...IndicatorIconProps,\n    };\n\n    const IconComponent =\n      IndicatorIconComponent ??\n      (direction ? iconComponentMap[direction] : undefined);\n\n    const icon =\n      showIndicator && IconComponent ? <IconComponent {...iconProps} /> : null;\n\n    return (\n      <div\n        {...restProps}\n        className={clsx(withBaseName(), className)}\n        aria-labelledby={`${titleId || \"\"} ${subtitleId || \"\"}`}\n        ref={ref}\n      >\n        <div className={withBaseName(\"value-container\")}>\n          {indicatorPosition === \"start\" && icon}\n          <ValueComponent\n            data-testid=\"metric-value\"\n            id={valueId}\n            className={withBaseName(\"value\")}\n          >\n            {value}\n          </ValueComponent>\n          {indicatorPosition === \"end\" && icon}\n        </div>\n        {subvalue && (\n          <Text\n            className={withBaseName(\"subvalue\")}\n            data-testid=\"metric-subvalue\"\n          >\n            {subvalue}\n          </Text>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["MetricContent","metricContentCss"],"mappings":";;;;;;;;;;AAwCA,MAAM,gBAAmB,GAAA;AAAA,EACvB,IAAM,EAAA,aAAA;AAAA,EACN,EAAI,EAAA;AACN,CAAA;AAEA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAE9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cACP,CAAA;AAAA,IACE,kBAAA;AAAA,IACA,sBAAA;AAAA,IACA,SAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAG;AAAA,KAEL,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAA;AAAA,MACA,IAAO,GAAA,QAAA;AAAA,MACP,OAAA;AAAA,MACA,OAAA;AAAA,MACA;AAAA,QACE,gBAAiB,EAAA;AAErB,IAAM,MAAA,QAAA,GAAW,IAAS,KAAA,OAAA,GAAU,CAAI,GAAA,CAAA;AAExC,IAAA,MAAM,iBAAoB,GAAA;AAAA,MACxB,KAAO,EAAA,QAAA;AAAA,MACP,MAAQ,EAAA,QAAA;AAAA,MACR,KAAO,EAAA;AAAA,KACT;AACA,IAAM,MAAA,cAAA,GAAiB,kBAAkB,IAAI,CAAA;AAE7C,IAAA,MAAM,SAAY,GAAA;AAAA,MAChB,YAAc,EAAA,SAAA;AAAA,MACd,SAAA,EAAW,aAAa,WAAW,CAAA;AAAA,MACnC,IAAM,EAAA,SAAA,GAAY,CAAY,SAAA,EAAA,SAAS,CAAK,CAAA,GAAA,EAAA;AAAA,MAC5C,IAAM,EAAA,QAAA;AAAA,MACN,GAAG;AAAA,KACL;AAEA,IAAA,MAAM,aACJ,GAAA,sBAAA,KACC,SAAY,GAAA,gBAAA,CAAiB,SAAS,CAAI,GAAA,KAAA,CAAA,CAAA;AAE7C,IAAA,MAAM,OACJ,aAAiB,IAAA,aAAA,uBAAiB,aAAe,EAAA,EAAA,GAAG,WAAW,CAAK,GAAA,IAAA;AAEtE,IACE,uBAAA,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,SAAA;AAAA,QACJ,SAAW,EAAA,IAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,QACzC,mBAAiB,CAAG,EAAA,OAAA,IAAW,EAAE,CAAA,CAAA,EAAI,cAAc,EAAE,CAAA,CAAA;AAAA,QACrD,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,iBAAiB,CAC3C,EAAA,QAAA,EAAA;AAAA,YAAA,iBAAA,KAAsB,OAAW,IAAA,IAAA;AAAA,4BAClC,GAAA;AAAA,cAAC,cAAA;AAAA,cAAA;AAAA,gBACC,aAAY,EAAA,cAAA;AAAA,gBACZ,EAAI,EAAA,OAAA;AAAA,gBACJ,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,gBAE9B,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,YACC,sBAAsB,KAAS,IAAA;AAAA,WAClC,EAAA,CAAA;AAAA,UACC,QACC,oBAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,cAClC,aAAY,EAAA,iBAAA;AAAA,cAEX,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA;AAGN;;;;"}

package/dist-es/metric/MetricHeader.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltMetricHeader {\n  --metric-title-color: var(--salt-content-primary-foreground);\n  --metric-subtitle-color: var(--salt-content-secondary-foreground);\n}\n\n.saltMetricHeader {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: calc(var(--salt-size-unit) * 0.25);\n}\n\n.saltMetric-orientation-horizontal.saltMetric-size-small .saltMetricHeader {\n  padding-top: 4px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-medium .saltMetricHeader {\n  padding-top: 8px;\n}\n.saltMetric-orientation-horizontal.saltMetric-size-large .saltMetricHeader {\n  padding-top: 14px;\n}\n\n.saltMetricHeader-title {\n  color: var(--metric-title-color);\n}\n\n.saltMetricHeader-subtitle {\n  color: var(--metric-subtitle-color);\n  font-weight: var(--salt-text-fontWeight);\n}\n\n.saltMetric-align-center .saltMetricHeader {\n  align-items: center;\n}\n\n.saltMetric-align-right .saltMetricHeader {\n  align-items: flex-end;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=MetricHeader.css.js.map

package/dist-es/metric/MetricHeader.css.js.map

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

package/dist-es/metric/MetricHeader.js

@@ -0,0 +1,57 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { makePrefixer, Text, Link } from '@salt-ds/core';
+import { clsx } from 'clsx';
+import { forwardRef, useCallback } from 'react';
+import { useMetricContext } from './internal/MetricContext.js';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import css_248z from './MetricHeader.css.js';
+
+const withBaseName = makePrefixer("saltMetricHeader");
+const MetricHeader = forwardRef(
+  function MetricHeader2({ SubtitleLinkProps, className, title, subtitle, ...restProps }, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-metric-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { titleId, subtitleId, headingAriaLevel } = useMetricContext();
+    const renderSubtitle = useCallback(() => {
+      if (!subtitle) return null;
+      const subtitleComponent = /* @__PURE__ */ jsx(
+        Text,
+        {
+          id: subtitleId,
+          className: withBaseName("subtitle"),
+          "data-testid": "metric-subtitle",
+          variant: "secondary",
+          children: subtitle
+        }
+      );
+      if (SubtitleLinkProps) {
+        const { href = "", ...restLinkProps } = SubtitleLinkProps;
+        return /* @__PURE__ */ jsx(Link, { href, ...restLinkProps, children: subtitleComponent });
+      }
+      return subtitleComponent;
+    }, [subtitle, subtitleId, SubtitleLinkProps]);
+    return /* @__PURE__ */ jsxs("div", { ...restProps, className: clsx(withBaseName(), className), ref, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          styleAs: "h4",
+          className: withBaseName("title"),
+          "data-testid": "metric-title",
+          id: titleId,
+          role: "heading",
+          "aria-level": headingAriaLevel,
+          children: title
+        }
+      ),
+      renderSubtitle()
+    ] });
+  }
+);
+
+export { MetricHeader };
+//# sourceMappingURL=MetricHeader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricHeader.js","sources":["../src/metric/MetricHeader.tsx"],"sourcesContent":["import { Link, type LinkProps, Text, makePrefixer } from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { type HTMLAttributes, forwardRef, useCallback } from \"react\";\nimport { useMetricContext } from \"./internal\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\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":["MetricHeader","metricHeaderCss"],"mappings":";;;;;;;;;AA2BA,MAAM,YAAA,GAAe,aAAa,kBAAkB,CAAA;AAE7C,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aACP,CAAA,EAAE,iBAAmB,EAAA,SAAA,EAAW,OAAO,QAAU,EAAA,GAAG,SAAU,EAAA,EAC9D,GACA,EAAA;AACA,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAA,MAAM,EAAE,OAAA,EAAS,UAAY,EAAA,gBAAA,KAAqB,gBAAiB,EAAA;AAEnE,IAAM,MAAA,cAAA,GAAiB,YAAY,MAAM;AACvC,MAAI,IAAA,CAAC,UAAiB,OAAA,IAAA;AAEtB,MAAA,MAAM,iBACJ,mBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA,UAAA;AAAA,UACJ,SAAA,EAAW,aAAa,UAAU,CAAA;AAAA,UAClC,aAAY,EAAA,iBAAA;AAAA,UACZ,OAAQ,EAAA,WAAA;AAAA,UAEP,QAAA,EAAA;AAAA;AAAA,OACH;AAGF,MAAA,IAAI,iBAAmB,EAAA;AACrB,QAAA,MAAM,EAAE,IAAA,GAAO,EAAI,EAAA,GAAG,eAAkB,GAAA,iBAAA;AAExC,QAAA,uBACG,GAAA,CAAA,IAAA,EAAA,EAAK,IAAa,EAAA,GAAG,eACnB,QACH,EAAA,iBAAA,EAAA,CAAA;AAAA;AAIJ,MAAO,OAAA,iBAAA;AAAA,KACN,EAAA,CAAC,QAAU,EAAA,UAAA,EAAY,iBAAiB,CAAC,CAAA;AAE5C,IACE,uBAAA,IAAA,CAAC,KAAK,EAAA,EAAA,GAAG,SAAW,EAAA,SAAA,EAAW,KAAK,YAAa,EAAA,EAAG,SAAS,CAAA,EAAG,GAC9D,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,IAAA;AAAA,QAAA;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;AAAA;AAAA,OACH;AAAA,MACC,cAAe;AAAA,KAClB,EAAA,CAAA;AAAA;AAGN;;;;"}

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

@@ -0,0 +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":[],"mappings":";;AAgDA,MAAM,aAAA,GAAgB,aAEpB,CAAA,EAAE,CAAA;AAES,MAAA,EAAE,QAAU,EAAA,qBAAA,EAA0B,GAAA;AACtC,MAAA,gBAAA,GAAmB,MACD,UAAA,CAAW,aAAa;;;;"}

package/dist-es/overlay/OverlayHeader.css.js

@@ -0,0 +1,4 @@
+var css_248z = ".saltOverlayHeader {\n  padding: var(--salt-spacing-100);\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  justify-content: stretch;\n  gap: var(--salt-spacing-100);\n  box-sizing: border-box;\n}\n\n.saltOverlayHeader-container {\n  flex-grow: 1;\n  margin: 0;\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n}\n\n.saltOverlayHeader-header {\n  margin: 0;\n}\n\n.saltOverlayHeader-actionsContainer {\n  align-self: flex-start;\n}\n\n/* Overrides */\n.saltOverlayHeader ~ .saltOverlayPanelContent {\n  padding-top: 0;\n}\n";
+
+export { css_248z as default };
+//# sourceMappingURL=OverlayHeader.css.js.map

package/dist-es/overlay/OverlayHeader.css.js.map

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

package/dist-es/overlay/OverlayHeader.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makePrefixer, H2, Text } from '@salt-ds/core';
+import { useComponentCssInjection } from '@salt-ds/styles';
+import { useWindow } from '@salt-ds/window';
+import { clsx } from 'clsx';
+import { forwardRef } from 'react';
+import css_248z from './OverlayHeader.css.js';
+
+const withBaseName = makePrefixer("saltOverlayHeader");
+const OverlayHeader = forwardRef(
+  function OverlayHeader2(props, ref) {
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+      testId: "salt-overlay-header",
+      css: css_248z,
+      window: targetWindow
+    });
+    const { className, description, header, actions, preheader, ...rest } = props;
+    return /* @__PURE__ */ jsxs("div", { className: clsx(withBaseName(), className), ...rest, ref, children: [
+      /* @__PURE__ */ jsxs("div", { className: withBaseName("container"), children: [
+        /* @__PURE__ */ jsxs(H2, { styleAs: "h4", className: withBaseName("header"), children: [
+          preheader && /* @__PURE__ */ jsx(Text, { color: "primary", children: preheader }),
+          header
+        ] }),
+        description && /* @__PURE__ */ jsx(Text, { color: "secondary", className: withBaseName("description"), children: description })
+      ] }),
+      actions && /* @__PURE__ */ jsx("div", { className: withBaseName("actionsContainer"), children: actions })
+    ] });
+  }
+);
+
+export { OverlayHeader };
+//# sourceMappingURL=OverlayHeader.js.map

package/dist-es/overlay/OverlayHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OverlayHeader.js","sources":["../src/overlay/OverlayHeader.tsx"],"sourcesContent":["import { H2, Text, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { clsx } from \"clsx\";\nimport {\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n  forwardRef,\n} from \"react\";\nimport overlayHeaderCss from \"./OverlayHeader.css\";\n\nconst withBaseName = makePrefixer(\"saltOverlayHeader\");\n\nexport interface OverlayHeaderProps extends ComponentPropsWithoutRef<\"div\"> {\n  /**\n   * Description text is displayed just below the header\n   **/\n  description?: ReactNode;\n  /**\n   * Actions to be displayed in header\n   */\n  actions?: ReactNode;\n  /**\n   * Header text\n   */\n  header?: ReactNode;\n  /**\n   * Preheader text is displayed just above the header\n   **/\n  preheader?: ReactNode;\n}\n\nexport const OverlayHeader = forwardRef<HTMLDivElement, OverlayHeaderProps>(\n  function OverlayHeader(props, ref) {\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-overlay-header\",\n      css: overlayHeaderCss,\n      window: targetWindow,\n    });\n\n    const { className, description, header, actions, preheader, ...rest } =\n      props;\n\n    return (\n      <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n        <div className={withBaseName(\"container\")}>\n          <H2 styleAs=\"h4\" className={withBaseName(\"header\")}>\n            {preheader && <Text color=\"primary\">{preheader}</Text>}\n            {header}\n          </H2>\n          {description && (\n            <Text color=\"secondary\" className={withBaseName(\"description\")}>\n              {description}\n            </Text>\n          )}\n        </div>\n        {actions && (\n          <div className={withBaseName(\"actionsContainer\")}>{actions}</div>\n        )}\n      </div>\n    );\n  },\n);\n"],"names":["OverlayHeader","overlayHeaderCss"],"mappings":";;;;;;;;AAWA,MAAM,YAAA,GAAe,aAAa,mBAAmB,CAAA;AAqB9C,MAAM,aAAgB,GAAA,UAAA;AAAA,EAC3B,SAASA,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,eAAe,SAAU,EAAA;AAC/B,IAAyB,wBAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,QAAA;AAAA,MACL,MAAQ,EAAA;AAAA,KACT,CAAA;AAED,IAAM,MAAA,EAAE,WAAW,WAAa,EAAA,MAAA,EAAQ,SAAS,SAAW,EAAA,GAAG,MAC7D,GAAA,KAAA;AAEF,IACE,uBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,IAAK,CAAA,YAAA,IAAgB,SAAS,CAAA,EAAI,GAAG,IAAA,EAAM,GACzD,EAAA,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,YAAa,CAAA,WAAW,CACtC,EAAA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,MAAG,OAAQ,EAAA,IAAA,EAAK,SAAW,EAAA,YAAA,CAAa,QAAQ,CAC9C,EAAA,QAAA,EAAA;AAAA,UAAA,SAAA,oBAAc,GAAA,CAAA,IAAA,EAAA,EAAK,KAAM,EAAA,SAAA,EAAW,QAAU,EAAA,SAAA,EAAA,CAAA;AAAA,UAC9C;AAAA,SACH,EAAA,CAAA;AAAA,QACC,WAAA,wBACE,IAAK,EAAA,EAAA,KAAA,EAAM,aAAY,SAAW,EAAA,YAAA,CAAa,aAAa,CAAA,EAC1D,QACH,EAAA,WAAA,EAAA;AAAA,OAEJ,EAAA,CAAA;AAAA,MACC,2BACE,GAAA,CAAA,KAAA,EAAA,EAAI,WAAW,YAAa,CAAA,kBAAkB,GAAI,QAAQ,EAAA,OAAA,EAAA;AAAA,KAE/D,EAAA,CAAA;AAAA;AAGN;;;;"}

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,KAAS,CAAA;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;;;;"}