npm - @salt-ds/lab - Versions diffs - 1.0.0-alpha.17 → 1.0.0-alpha.19 - Mend

@salt-ds/lab 1.0.0-alpha.17 → 1.0.0-alpha.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (182) hide show

package/dist-cjs/color-chooser/Swatch.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderColor-style) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  ) !important;\n}\n";
+var css_248z = "/*TODO: New component; needs complete restyling to use characteristics properly */\n.saltColorChooserSwatch-swatch,\n.saltColorChooserSwatch-graySwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-density-touch,\n.salt-density-low,\n.salt-density-medium,\n.salt-density-high {\n  --colorChooser-swatch-density-high-size: calc(5 * var(--salt-size-unit));\n  --colorChooser-swatch-density-medium-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-low-size: calc(3 * var(--salt-size-unit));\n  --colorChooser-swatch-density-touch-size: calc(2 * var(--salt-size-unit));\n}\n\n.salt-density-touch {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-touch-size);\n}\n.salt-density-low {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-low-size);\n}\n.salt-density-medium {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-medium-size);\n}\n.salt-density-high {\n  --colorChooser-swatch-size-unit: var(--colorChooser-swatch-density-high-size);\n}\n\n.saltColorChooserSwatch-swatch,\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-graySwatch {\n  width: var(--colorChooser-swatch-size-unit);\n  height: var(--colorChooser-swatch-size-unit);\n}\n\n.saltColorChooserSwatch-whiteSwatch {\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.salt-theme[data-mode=\"light\"] .saltColorChooserSwatch-whiteSwatch,\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch,\n.saltColorChooserSwatch-graySwatch {\n  border: 0px;\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-whiteSwatch {\n  width: calc(var(--colorChooser-swatch-size-unit) - 2);\n  height: calc(var(--colorChooser-swatch-size-unit) - 2);\n}\n\n.salt-theme[data-mode=\"dark\"] .saltColorChooserSwatch-graySwatch {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n}\n\n.saltColorChooserSwatch-active {\n  outline: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-container-primary-borderColor);\n  border: var(--salt-focused-outlineWidth) var(--salt-container-borderStyle) var(--salt-actionable-cta-foreground-active) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  cursor: pointer;\n}\n\n.saltColorChooserSwatch-transparent {\n  border: var(--salt-size-border) var(--salt-container-borderStyle) var(--salt-status-negative-foreground) !important;\n  width: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  height: calc(var(--colorChooser-swatch-size-unit) - 2px) !important;\n  margin-bottom: 1px;\n  margin-left: 1px;\n  background: linear-gradient(\n    to top left,\n    rgba(166, 21, 11, 0) 0%,\n    rgba(166, 21, 11, 0) calc(50% - 0.8px),\n    rgba(166, 21, 11, 1) 50%,\n    rgba(166, 21, 11, 0) calc(50% + 0.8px),\n    rgba(166, 21, 11, 0) 100%\n  ) !important;\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=Swatch.css.js.map

package/dist-cjs/color-chooser/Swatch.js CHANGED Viewed

@@ -5,8 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var clsx = require('clsx');
 var core = require('@salt-ds/core');
+var styles = require('@salt-ds/styles');
+var window = require('@salt-ds/window');
 var Color = require('./Color.js');
 var colorUtils = require('./color-utils.js');
+var Swatch$1 = require('./Swatch.css.js');
 const withBaseName = core.makePrefixer("saltColorChooserSwatch");
 const Swatch = ({
@@ -17,6 +20,12 @@ const Swatch = ({
   onDialogClosed,
   transparent = false
 }) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-swatch",
+    css: Swatch$1,
+    window: targetWindow
+  });
   const handleClick = () => {
     const newColor = Color.Color.makeColorFromHex(color);
     colorUtils.isTransparent(color) ? newColor == null ? void 0 : newColor.setAlpha(0) : newColor == null ? void 0 : newColor.setAlpha(alpha);

package/dist-cjs/color-chooser/Swatch.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n active: boolean;\n alpha: number;\n color: string;\n onClick: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n transparent?: boolean;\n}\n\nexport const Swatch = ({\n color,\n onClick,\n active,\n alpha,\n onDialogClosed,\n transparent = false,\n}: SwatchProps): JSX.Element => {\n const handleClick = () => {\n const newColor = Color.makeColorFromHex(color);\n isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n onClick(newColor, true);\n onDialogClosed();\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n e.key === \"ENTER\" && onClick(newColor, true);\n onDialogClosed();\n };\n\n // If it's black/gray/white\n const isBlackOrgray = (color: string): boolean => {\n return (\n color.toLowerCase() === \"black\" \|\|\n color.toUpperCase().startsWith(\"#2F3136\") \|\|\n color.toUpperCase().startsWith(\"#2A2C2F\") \|\|\n color.toUpperCase().startsWith(\"#242526\") \|\|\n color.toUpperCase().startsWith(\"#161616\")\n );\n };\n const isWhite = (color: string): boolean => color === \"white\";\n\n const getBackgroundColor = () => {\n const backgroundColor = Color.makeColorFromHex(color);\n return backgroundColor?.setAlpha(alpha).hex;\n };\n\n return (\n <div\n data-testid={`swatch-${color}`}\n style={{\n background: getBackgroundColor(),\n }}\n className={clsx({\n [withBaseName(\"active\")]: active,\n [withBaseName(\"transparent\")]: transparent,\n [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n [withBaseName(\"whiteSwatch\")]: isWhite(color),\n [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n })}\n onClick={handleClick}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n />\n );\n};\n"],"names":["makePrefixer","Color","isTransparent","color","jsx","clsx"],"mappings":"~~;;;;;;;;;;AAMA~~,MAAM,YAAA,GAAeA,kBAAa,wBAAwB,CAAA,CAAA;AAenD,MAAM,SAAS,CAAC;AAAA,EACrB,KAAA;AAAA,EACA,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,cAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAChB,CAAgC,KAAA;AAC9B,EAAA,MAAM,cAAc,MAAM;AACxB,IAAM,MAAA,QAAA,GAAWC,WAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAC7C,IAAAC,wBAAA,CAAc,KAAK,CAAI,GAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAU,QAAS,CAAA,CAAA,CAAA,GAAK,qCAAU,QAAS,CAAA,KAAA,CAAA,CAAA;AAElE,IAAA,OAAA,CAAQ,UAAU,IAAI,CAAA,CAAA;AACtB,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAEA,EAAM,MAAA,aAAA,GAAgB,CAAC,CAA2C,KAAA;~~AArCpE~~,IAAA,IAAA,EAAA,CAAA;~~AAsCI~~,IAAA,MAAM,YAAW,EAAM,GAAAD,WAAA,CAAA,gBAAA,CAAiB,KAAK,CAAA,KAA5B,mBAA+B,QAAS,CAAA,KAAA,CAAA,CAAA;AACzD,IAAA,CAAA,CAAE,GAAQ,KAAA,OAAA,IAAW,OAAQ,CAAA,QAAA,EAAU,IAAI,CAAA,CAAA;AAC3C,IAAe,cAAA,EAAA,CAAA;AAAA,GACjB,CAAA;AAGA,EAAM,MAAA,aAAA,GAAgB,CAACE,MAA2B,KAAA;AAChD,IACEA,OAAAA,MAAAA,CAAM,WAAY,EAAA,KAAM,OACxBA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,UAAW,CAAA,SAAS,CACxCA,IAAAA,MAAAA,CAAM,WAAY,EAAA,CAAE,WAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,IACxCA,MAAM,CAAA,WAAA,EAAc,CAAA,UAAA,CAAW,SAAS,CAAA,CAAA;AAAA,GAE5C,CAAA;AACA,EAAM,MAAA,OAAA,GAAU,CAACA,MAAAA,KAA2BA,MAAU,KAAA,OAAA,CAAA;AAEtD,EAAA,MAAM,qBAAqB,MAAM;AAC/B,IAAM,MAAA,eAAA,GAAkBF,WAAM,CAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AACpD,IAAO,OAAA,eAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,eAAA,CAAiB,SAAS,KAAO,CAAA,CAAA,GAAA,CAAA;AAAA,GAC1C,CAAA;AAEA,EAAA,uBACGG,cAAA,CAAA,KAAA,EAAA;AAAA,IACC,eAAa,CAAU,OAAA,EAAA,KAAA,CAAA,CAAA;AAAA,IACvB,KAAO,EAAA;AAAA,MACL,YAAY,kBAAmB,EAAA;AAAA,KACjC;AAAA,IACA,WAAWC,SAAK,CAAA;AAAA,MACd,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,MAAA;AAAA,MAC1B,CAAC,YAAa,CAAA,aAAa,CAAI,GAAA,WAAA;AAAA,MAC/B,CAAC,YAAA,CAAa,YAAY,CAAA,GAAI,cAAc,KAAK,CAAA;AAAA,MACjD,CAAC,YAAA,CAAa,aAAa,CAAA,GAAI,QAAQ,KAAK,CAAA;AAAA,MAC5C,CAAC,YAAa,CAAA,QAAQ,CAAI,GAAA,CAAC,QAAQ,KAAK,CAAA,IAAK,CAAC,aAAA,CAAc,KAAK,CAAA;AAAA,KAClE,CAAA;AAAA,IACD,OAAS,EAAA,WAAA;AAAA,IACT,QAAU,EAAA,CAAA;AAAA,IACV,SAAW,EAAA,aAAA;AAAA,GACb,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"Swatch.js","sources":["../src/color-chooser/Swatch.tsx"],"sourcesContent":["import { ChangeEvent, KeyboardEvent } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport swatchCss from \"./Swatch.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooserSwatch\");\n\ninterface SwatchProps {\n active: boolean;\n alpha: number;\n color: string;\n onClick: (\n color: Color \| undefined,\n finalSelection: boolean,\n e?: ChangeEvent\n ) => void;\n onDialogClosed: () => void;\n transparent?: boolean;\n}\n\nexport const Swatch = ({\n color,\n onClick,\n active,\n alpha,\n onDialogClosed,\n transparent = false,\n}: SwatchProps): JSX.Element => {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-swatch\",\n css: swatchCss,\n window: targetWindow,\n });\n\n const handleClick = () => {\n const newColor = Color.makeColorFromHex(color);\n isTransparent(color) ? newColor?.setAlpha(0) : newColor?.setAlpha(alpha);\n\n onClick(newColor, true);\n onDialogClosed();\n };\n\n const handleKeyDown = (e: KeyboardEvent<HTMLDivElement>): void => {\n const newColor = Color.makeColorFromHex(color)?.setAlpha(alpha);\n e.key === \"ENTER\" && onClick(newColor, true);\n onDialogClosed();\n };\n\n // If it's black/gray/white\n const isBlackOrgray = (color: string): boolean => {\n return (\n color.toLowerCase() === \"black\" \|\|\n color.toUpperCase().startsWith(\"#2F3136\") \|\|\n color.toUpperCase().startsWith(\"#2A2C2F\") \|\|\n color.toUpperCase().startsWith(\"#242526\") \|\|\n color.toUpperCase().startsWith(\"#161616\")\n );\n };\n const isWhite = (color: string): boolean => color === \"white\";\n\n const getBackgroundColor = () => {\n const backgroundColor = Color.makeColorFromHex(color);\n return backgroundColor?.setAlpha(alpha).hex;\n };\n\n return (\n <div\n data-testid={`swatch-${color}`}\n style={{\n background: getBackgroundColor(),\n }}\n className={clsx({\n [withBaseName(\"active\")]: active,\n [withBaseName(\"transparent\")]: transparent,\n [withBaseName(\"graySwatch\")]: isBlackOrgray(color),\n [withBaseName(\"whiteSwatch\")]: isWhite(color),\n [withBaseName(\"swatch\")]: !isWhite(color) && !isBlackOrgray(color),\n })}\n onClick={handleClick}\n tabIndex={0}\n onKeyDown={handleKeyDown}\n />\n );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","swatchCss","Color","isTransparent","color","jsx","clsx"],"mappings":"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"}

package/dist-cjs/combo-box-next/ComboBoxNext.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltComboBoxNext-highlight {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltComboBoxNext-input:hover {\n  --saltInput-borderColor: var(--salt-focused-outlineColor);\n}\n\n.saltComboBoxNext-list.saltListNext {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * var(--comboBoxNext-itemCount, 5));\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n";
+var css_248z = ".saltComboBoxNext-highlight {\n  font-weight: var(--salt-text-fontWeight-strong);\n}\n\n.saltComboBoxNext-input:hover {\n  --saltInput-borderColor: var(--salt-focused-outlineColor);\n}\n\n.saltComboBoxNext-list.saltListNext {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * var(--comboBoxNext-itemCount, 5));\n  z-index: calc(var(--salt-zIndex-modal) + 1);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=ComboBoxNext.css.js.map

package/dist-cjs/combo-box-next/ComboBoxNext.js CHANGED Viewed

@@ -7,7 +7,6 @@ var React = require('react');
 var core = require('@salt-ds/core');
 var ListNext = require('../list-next/ListNext.js');
 require('../list-next/ListItemNext.js');
-var react = require('@floating-ui/react');
 var useComboBox = require('./useComboBox.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
@@ -89,10 +88,12 @@ const ComboBoxNext = React.forwardRef(function ComboBoxNext2({
     floating,
     reference,
     getTriggerProps,
-    getPortalProps
+    getPortalProps,
+    getPosition
   } = portalProps;
   const triggerRef = core.useForkRef(ref, reference);
   const inputRef = core.useForkRef(triggerRef, focusVisibleRef);
+  const { Component: FloatingComponent } = core.useFloatingComponent();
   const getFilteredSource = () => {
     if (!source)
       return null;
@@ -147,32 +148,30 @@ const ComboBoxNext = React.forwardRef(function ComboBoxNext2({
         ...getTriggerProps(),
         ...restInputProps
       }),
-      open && filteredSource && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, {
-        children: /* @__PURE__ */ jsxRuntime.jsx(core.SaltProvider, {
-          children: /* @__PURE__ */ jsxRuntime.jsx("div", {
-            ref: floating,
-            ...getPortalProps(),
-            children: /* @__PURE__ */ jsxRuntime.jsx(ListNext.ListNext, {
-              className: clsx.clsx(withBaseName("list"), listClassName),
-              disableFocus: true,
-              highlightedItem,
-              onMouseOver: mouseOverHandler,
-              selected: selectedItem,
-              ...restListProps,
-              ref: setListRef,
-              children: filteredSource.map((value, index) => {
-                const onMouseDown = (event) => {
-                  var _a, _b;
-                  setSelectedItem((_a = event.currentTarget) == null ? void 0 : _a.dataset.value);
-                  setInputValue((_b = event.currentTarget) == null ? void 0 : _b.dataset.value);
-                };
-                return ListItem && /* @__PURE__ */ jsxRuntime.jsx(ListItem, {
-                  value,
-                  matchPattern: inputValue,
-                  onMouseDown
-                }, index);
-              })
-            })
+      /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
+        open: Boolean(open && !disabled && filteredSource),
+        ref: floating,
+        ...getPortalProps(),
+        ...getPosition(),
+        children: /* @__PURE__ */ jsxRuntime.jsx(ListNext.ListNext, {
+          className: clsx.clsx(withBaseName("list"), listClassName),
+          disableFocus: true,
+          highlightedItem,
+          onMouseOver: mouseOverHandler,
+          selected: selectedItem,
+          ...restListProps,
+          ref: setListRef,
+          children: filteredSource == null ? void 0 : filteredSource.map((value, index) => {
+            const onMouseDown = (event) => {
+              var _a, _b;
+              setSelectedItem((_a = event.currentTarget) == null ? void 0 : _a.dataset.value);
+              setInputValue((_b = event.currentTarget) == null ? void 0 : _b.dataset.value);
+            };
+            return ListItem && /* @__PURE__ */ jsxRuntime.jsx(ListItem, {
+              value,
+              matchPattern: inputValue,
+              onMouseDown
+            }, index);
           })
         })
       })

package/dist-cjs/combo-box-next/ComboBoxNext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n ChangeEvent,\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactElement,\n Ref,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n Input,\n makePrefixer,\n SaltProvider,\n useForkRef,\n useId,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { FloatingPortal } from \"@floating-ui/react\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" \| \"onSelect\"> {\n /*\n Additional props for the list component.\n /\n ListProps?: ListNextProps;\n /\n Additional props for the portal.\n /\n PortalProps?: UseComboBoxPortalProps;\n /\n Controlled prop. Controls the Input value in the Combo Box Input.\n /\n inputValue?: string;\n /\n Controlled prop. Controls the Highlighted item in the Combo Box list.\n /\n highlightedItem?: string;\n /\n Controlled prop. Controls the Selected value in the Combo Box list.\n /\n selected?: string;\n /\n Initial input value for when the list is uncontrolled.\n /\n defaultInputValue?: string;\n /\n Initial selected value for when the list is uncontrolled.\n /\n defaultSelected?: string;\n /\n If `true`, the component will be disabled.\n /\n disabled?: boolean;\n /\n Styling variant. Defaults to \"primary\".\n /\n variant?: \"primary\" \| \"secondary\";\n /\n /\n The source of combobox items.\n /\n source: T[];\n /\n Optional ref for the list component\n /\n listRef?: Ref<HTMLUListElement>;\n /\n The component used for item instead of the default.\n /\n ListItem?: (\n props: ComboBoxItemProps<T>\n ) => ReactElement<ComboBoxItemProps<T>>;\n /\n Function to be used as filter.\n /\n itemFilter?: (source: T[], filterValue?: string) => T[];\n /\n Callback for mouse over event\n /\n onMouseOver?: (event: SyntheticEvent) => void;\n /\n Callback for list selection event\n /\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /\n /\n Callback for list change event\n /\n onListChange?: (\n event: SyntheticEvent,\n data: { value: string \| undefined }\n ) => void;\n /\n Callback for input change event\n /\n onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n {\n ListProps = {},\n PortalProps = {},\n inputValue: inputValueProp,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultInputValue,\n defaultSelected,\n disabled,\n variant = \"primary\",\n source,\n listRef: listRefProp,\n ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n onMouseOver,\n onBlur,\n onFocus,\n onKeyDown,\n onSelect,\n onListChange,\n onChange: onInputChange,\n ...rest\n }: ComboBoxNextProps<T>,\n ref?: ForwardedRef<HTMLInputElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-next\",\n css: comboBoxNextCss,\n window: targetWindow,\n });\n const listId = useId(ListProps?.id);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n disabled,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultSelected,\n onChange: onListChange,\n onSelect: onSelect,\n id: listId,\n ref: listRef,\n };\n\n const {\n inputValue,\n setInputValue,\n portalProps,\n selectedItem,\n highlightedItem,\n activeDescendant,\n focusVisibleRef,\n keyDownHandler,\n focusHandler,\n blurHandler,\n setSelectedItem,\n setHighlightedItem,\n mouseOverHandler,\n } = useComboBox({\n defaultInputValue,\n inputValue: inputValueProp,\n onBlur,\n onFocus,\n onMouseOver,\n onKeyDown,\n listProps,\n PortalProps,\n });\n\n const {\n open,\n setOpen,\n floating,\n reference,\n getTriggerProps,\n getPortalProps,\n } = portalProps;\n\n // floating references\n const triggerRef = useForkRef(ref, reference);\n const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n const getFilteredSource = () => {\n if (!source) return null;\n if (selectedItem && inputValue === selectedItem) return source;\n return itemFilter && itemFilter(source, inputValue);\n };\n const filteredSource = getFilteredSource();\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setInputValue(value);\n if (value === \"\") {\n setHighlightedItem(undefined);\n setSelectedItem(value);\n } else {\n if (!open) {\n setOpen(true);\n }\n if (filteredSource) {\n setHighlightedItem(filteredSource[0] as unknown as string);\n }\n }\n onInputChange?.(event, { value: inputValue \|\| \"\" });\n };\n\n const adornment = open ? (\n <ChevronUpIcon className={withBaseName(\"chevron\")} />\n ) : (\n <ChevronDownIcon className={withBaseName(\"chevron\")} />\n );\n\n const { className: listClassName, ...restListProps } = ListProps;\n const { className: inputClassName, ...restInputProps } = rest;\n\n return (\n <>\n <Input\n aria-controls={listId}\n aria-activedescendant={disabled ? undefined : activeDescendant}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n disabled={disabled}\n endAdornment={adornment}\n onChange={onChange}\n onBlur={blurHandler}\n inputRef={inputRef as Ref<HTMLInputElement>}\n inputProps={{\n \"aria-expanded\": open,\n tabIndex: disabled ? -1 : 0,\n onFocus: focusHandler,\n onKeyDown: keyDownHandler,\n }}\n role=\"combobox\"\n variant={variant}\n value={inputValue}\n {...getTriggerProps()}\n {...restInputProps}\n />\n {open && filteredSource && (\n <FloatingPortal>\n {/ The provider is needed to support the use case where an app has nested modes. The portal element needs to have the same style as the current scope */}\n <SaltProvider>\n <div ref={floating} {...getPortalProps()}>\n <ListNext\n className={clsx(withBaseName(\"list\"), listClassName)}\n disableFocus\n highlightedItem={highlightedItem}\n onMouseOver={mouseOverHandler}\n selected={selectedItem}\n {...restListProps}\n ref={setListRef}\n >\n {filteredSource.map((value, index) => {\n const onMouseDown = (\n event: SyntheticEvent<HTMLLIElement>\n ) => {\n setSelectedItem(event.currentTarget?.dataset.value);\n setInputValue(event.currentTarget?.dataset.value);\n };\n return (\n ListItem && (\n <ListItem\n key={index}\n value={value}\n matchPattern={inputValue}\n onMouseDown={onMouseDown}\n />\n )\n );\n })}\n </ListNext>\n </div>\n </SaltProvider>\n </FloatingPortal>\n )}\n </>\n );\n});\n"],"names":["makePrefixer","forwardRef","ComboBoxNext","DefaultListItem","defaultFilter","useWindow","useComponentCssInjection","comboBoxNextCss","useId","useRef","useForkRef","useComboBox","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","Fragment","Input","clsx","FloatingPortal","SaltProvider","ListNext"],"mappings":"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"}
1	+ {"version":3,"file":"ComboBoxNext.js","sources":["../src/combo-box-next/ComboBoxNext.tsx"],"sourcesContent":["import {\n ChangeEvent,\n ComponentPropsWithoutRef,\n ForwardedRef,\n forwardRef,\n ReactElement,\n Ref,\n SyntheticEvent,\n useRef,\n} from \"react\";\nimport {\n Input,\n makePrefixer,\n useForkRef,\n useId,\n useFloatingComponent,\n} from \"@salt-ds/core\";\nimport { ListNext, ListNextProps } from \"../list-next\";\nimport { useComboBox } from \"./useComboBox\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport comboBoxNextCss from \"./ComboBoxNext.css\";\nimport { ChevronDownIcon, ChevronUpIcon } from \"@salt-ds/icons\";\nimport { DefaultListItem, defaultFilter, ComboBoxItemProps } from \"./utils\";\nimport { clsx } from \"clsx\";\nimport { UseComboBoxPortalProps } from \"./useComboboxPortal\";\n\nconst withBaseName = makePrefixer(\"saltComboBoxNext\");\n\nexport interface ComboBoxNextProps<T>\n extends Omit<ComponentPropsWithoutRef<\"input\">, \"onChange\" \| \"onSelect\"> {\n /*\n Additional props for the list component.\n /\n ListProps?: ListNextProps;\n /\n Additional props for the portal.\n /\n PortalProps?: UseComboBoxPortalProps;\n /\n Controlled prop. Controls the Input value in the Combo Box Input.\n /\n inputValue?: string;\n /\n Controlled prop. Controls the Highlighted item in the Combo Box list.\n /\n highlightedItem?: string;\n /\n Controlled prop. Controls the Selected value in the Combo Box list.\n /\n selected?: string;\n /\n Initial input value for when the list is uncontrolled.\n /\n defaultInputValue?: string;\n /\n Initial selected value for when the list is uncontrolled.\n /\n defaultSelected?: string;\n /\n If `true`, the component will be disabled.\n /\n disabled?: boolean;\n /\n Styling variant. Defaults to \"primary\".\n /\n variant?: \"primary\" \| \"secondary\";\n /\n /\n The source of combobox items.\n /\n source: T[];\n /\n Optional ref for the list component\n /\n listRef?: Ref<HTMLUListElement>;\n /\n The component used for item instead of the default.\n /\n ListItem?: (\n props: ComboBoxItemProps<T>\n ) => ReactElement<ComboBoxItemProps<T>>;\n /\n Function to be used as filter.\n /\n itemFilter?: (source: T[], filterValue?: string) => T[];\n /\n Callback for mouse over event\n /\n onMouseOver?: (event: SyntheticEvent) => void;\n /\n Callback for list selection event\n /\n onSelect?: (event: SyntheticEvent, data: { value: string }) => void;\n /\n /\n Callback for list change event\n /\n onListChange?: (\n event: SyntheticEvent,\n data: { value: string \| undefined }\n ) => void;\n /\n Callback for input change event\n */\n onChange?: (event: SyntheticEvent, data: { value: string }) => void;\n}\n\nexport const ComboBoxNext = forwardRef(function ComboBoxNext<T>(\n {\n ListProps = {},\n PortalProps = {},\n inputValue: inputValueProp,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultInputValue,\n defaultSelected,\n disabled,\n variant = \"primary\",\n source,\n listRef: listRefProp,\n ListItem = DefaultListItem as unknown as ComboBoxNextProps<T>[\"ListItem\"],\n itemFilter = defaultFilter as unknown as ComboBoxNextProps<T>[\"itemFilter\"],\n onMouseOver,\n onBlur,\n onFocus,\n onKeyDown,\n onSelect,\n onListChange,\n onChange: onInputChange,\n ...rest\n }: ComboBoxNextProps<T>,\n ref?: ForwardedRef<HTMLInputElement>\n) {\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-combo-box-next\",\n css: comboBoxNextCss,\n window: targetWindow,\n });\n const listId = useId(ListProps?.id);\n const listRef = useRef<HTMLUListElement>(null);\n\n const setListRef = useForkRef(listRefProp, listRef);\n const listProps = {\n disabled,\n highlightedItem: highlightedItemProp,\n selected: selectedProp,\n defaultSelected,\n onChange: onListChange,\n onSelect: onSelect,\n id: listId,\n ref: listRef,\n };\n\n const {\n inputValue,\n setInputValue,\n portalProps,\n selectedItem,\n highlightedItem,\n activeDescendant,\n focusVisibleRef,\n keyDownHandler,\n focusHandler,\n blurHandler,\n setSelectedItem,\n setHighlightedItem,\n mouseOverHandler,\n } = useComboBox({\n defaultInputValue,\n inputValue: inputValueProp,\n onBlur,\n onFocus,\n onMouseOver,\n onKeyDown,\n listProps,\n PortalProps,\n });\n\n const {\n open,\n setOpen,\n floating,\n reference,\n getTriggerProps,\n getPortalProps,\n getPosition,\n } = portalProps;\n\n // floating references\n const triggerRef = useForkRef(ref, reference);\n const inputRef = useForkRef(triggerRef, focusVisibleRef);\n\n const { Component: FloatingComponent } = useFloatingComponent();\n\n const getFilteredSource = () => {\n if (!source) return null;\n if (selectedItem && inputValue === selectedItem) return source;\n return itemFilter && itemFilter(source, inputValue);\n };\n const filteredSource = getFilteredSource();\n\n const onChange = (event: ChangeEvent<HTMLInputElement>) => {\n const value = event.target.value;\n setInputValue(value);\n if (value === \"\") {\n setHighlightedItem(undefined);\n setSelectedItem(value);\n } else {\n if (!open) {\n setOpen(true);\n }\n if (filteredSource) {\n setHighlightedItem(filteredSource[0] as unknown as string);\n }\n }\n onInputChange?.(event, { value: inputValue \|\| \"\" });\n };\n\n const adornment = open ? (\n <ChevronUpIcon className={withBaseName(\"chevron\")} />\n ) : (\n <ChevronDownIcon className={withBaseName(\"chevron\")} />\n );\n\n const { className: listClassName, ...restListProps } = ListProps;\n const { className: inputClassName, ...restInputProps } = rest;\n\n return (\n <>\n <Input\n aria-controls={listId}\n aria-activedescendant={disabled ? undefined : activeDescendant}\n className={clsx(withBaseName(\"input\"), inputClassName)}\n disabled={disabled}\n endAdornment={adornment}\n onChange={onChange}\n onBlur={blurHandler}\n inputRef={inputRef as Ref<HTMLInputElement>}\n inputProps={{\n \"aria-expanded\": open,\n tabIndex: disabled ? -1 : 0,\n onFocus: focusHandler,\n onKeyDown: keyDownHandler,\n }}\n role=\"combobox\"\n variant={variant}\n value={inputValue}\n {...getTriggerProps()}\n {...restInputProps}\n />\n\n <FloatingComponent\n open={Boolean(open && !disabled && filteredSource)}\n ref={floating}\n {...getPortalProps()}\n {...getPosition()}\n >\n <ListNext\n className={clsx(withBaseName(\"list\"), listClassName)}\n disableFocus\n highlightedItem={highlightedItem}\n onMouseOver={mouseOverHandler}\n selected={selectedItem}\n {...restListProps}\n ref={setListRef}\n >\n {filteredSource?.map((value, index) => {\n const onMouseDown = (event: SyntheticEvent<HTMLLIElement>) => {\n setSelectedItem(event.currentTarget?.dataset.value);\n setInputValue(event.currentTarget?.dataset.value);\n };\n return (\n ListItem && (\n <ListItem\n key={index}\n value={value}\n matchPattern={inputValue}\n onMouseDown={onMouseDown}\n />\n )\n );\n })}\n </ListNext>\n </FloatingComponent>\n </>\n );\n});\n"],"names":["makePrefixer","forwardRef","ComboBoxNext","DefaultListItem","defaultFilter","useWindow","useComponentCssInjection","comboBoxNextCss","useId","useRef","useForkRef","useComboBox","useFloatingComponent","jsx","ChevronUpIcon","ChevronDownIcon","jsxs","Fragment","Input","clsx","ListNext"],"mappings":"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"}

package/dist-cjs/combo-box-next/useComboBox.js CHANGED Viewed

@@ -29,7 +29,8 @@ const useComboBox = ({
     floating,
     reference,
     getPortalProps,
-    getTriggerProps
+    getTriggerProps,
+    getPosition
   } = useComboboxPortal.useComboboxPortal(PortalProps);
   const {
     keyDownHandler: listKeyDownHandler,
@@ -126,7 +127,8 @@ const useComboBox = ({
       floating,
       reference,
       getTriggerProps,
-      getPortalProps
+      getPortalProps,
+      getPosition
     },
     selectedItem,
     setSelectedItem,

package/dist-cjs/combo-box-next/useComboBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useComboBox.js","sources":["../src/combo-box-next/useComboBox.tsx"],"sourcesContent":["import { FocusEvent, KeyboardEvent, SyntheticEvent, useEffect } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\nimport { useComboboxPortal, UseComboBoxPortalProps } from \"./useComboboxPortal\";\nimport { useControlled } from \"@salt-ds/core\";\n\ninterface UseComboBoxProps {\n inputValue?: string;\n defaultInputValue?: string;\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n onMouseOver?: (event: SyntheticEvent) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n PortalProps?: UseComboBoxPortalProps;\n listProps: UseListProps;\n}\n\nexport const useComboBox = ({\n defaultInputValue,\n onFocus,\n onBlur,\n onMouseOver,\n onKeyDown,\n inputValue: inputValueProp,\n PortalProps,\n listProps,\n}: UseComboBoxProps) => {\n const [inputValue, setInputValue] = useControlled({\n controlled: inputValueProp,\n default: defaultInputValue,\n name: \"Combo Box\",\n state: \"inputValue\",\n });\n\n const {\n open,\n setOpen,\n floating,\n reference,\n getPortalProps,\n getTriggerProps,\n } = useComboboxPortal(PortalProps);\n\n const {\n keyDownHandler: listKeyDownHandler,\n focusHandler: listFocusHandler,\n activeDescendant,\n focusVisibleRef,\n selectedItem,\n setSelectedItem,\n setHighlightedItem,\n highlightedItem,\n } = useList({\n ...listProps,\n });\n\n const setSelected = (value: string \| undefined) => {\n setSelectedItem(value);\n setInputValue(value);\n };\n\n useEffect(() => {\n setInputValue(selectedItem);\n }, [selectedItem]);\n\n const focusHandler = (event: FocusEvent<HTMLInputElement>) => {\n setOpen(true);\n listFocusHandler(event);\n onFocus?.(event);\n };\n\n const blurHandler = (event: FocusEvent<HTMLInputElement>) => {\n setOpen(false);\n if (!selectedItem) {\n setSelected(undefined);\n setHighlightedItem(undefined);\n }\n onBlur?.(event);\n };\n\n const mouseOverHandler = (event: SyntheticEvent<HTMLElement>) => {\n setHighlightedItem(event.currentTarget.dataset.value);\n onMouseOver?.(event);\n };\n\n const keyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n const { key, altKey } = event;\n switch (key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n if (altKey) {\n event.preventDefault();\n if (open && !selectedItem) {\n setSelected(undefined);\n }\n setOpen(!open);\n break;\n }\n if (!open) {\n setOpen(true);\n }\n listKeyDownHandler(event);\n break;\n case \"PageDown\":\n case \"PageUp\":\n case \"Home\":\n case \"End\":\n if (open) {\n listKeyDownHandler(event);\n }\n break;\n case \"Enter\":\n if (!open) {\n setOpen(true);\n } else {\n setSelected(highlightedItem);\n setOpen(false);\n }\n break;\n case \"Escape\":\n if (open) {\n setOpen(false);\n if (!selectedItem) {\n setSelected(undefined);\n }\n }\n break;\n case \"Backspace\":\n if (!open) {\n setOpen(true);\n }\n break;\n default:\n break;\n }\n onKeyDown?.(event);\n };\n\n return {\n inputValue,\n setInputValue,\n // portal\n portalProps: {\n open,\n setOpen,\n floating,\n reference,\n getTriggerProps,\n getPortalProps,\n },\n // list\n selectedItem,\n setSelectedItem,\n highlightedItem,\n setHighlightedItem,\n activeDescendant,\n focusVisibleRef,\n keyDownHandler,\n focusHandler,\n blurHandler,\n mouseOverHandler,\n };\n};\n"],"names":["useControlled","useComboboxPortal","useList","useEffect"],"mappings":"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"}
1	+ {"version":3,"file":"useComboBox.js","sources":["../src/combo-box-next/useComboBox.tsx"],"sourcesContent":["import { FocusEvent, KeyboardEvent, SyntheticEvent, useEffect } from \"react\";\nimport { useList, UseListProps } from \"../list-next/useList\";\nimport { useComboboxPortal, UseComboBoxPortalProps } from \"./useComboboxPortal\";\nimport { useControlled } from \"@salt-ds/core\";\n\ninterface UseComboBoxProps {\n inputValue?: string;\n defaultInputValue?: string;\n onBlur?: (event: FocusEvent<HTMLInputElement>) => void;\n onFocus?: (event: FocusEvent<HTMLInputElement>) => void;\n onMouseOver?: (event: SyntheticEvent) => void;\n onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;\n PortalProps?: UseComboBoxPortalProps;\n listProps: UseListProps;\n}\n\nexport const useComboBox = ({\n defaultInputValue,\n onFocus,\n onBlur,\n onMouseOver,\n onKeyDown,\n inputValue: inputValueProp,\n PortalProps,\n listProps,\n}: UseComboBoxProps) => {\n const [inputValue, setInputValue] = useControlled({\n controlled: inputValueProp,\n default: defaultInputValue,\n name: \"Combo Box\",\n state: \"inputValue\",\n });\n\n const {\n open,\n setOpen,\n floating,\n reference,\n getPortalProps,\n getTriggerProps,\n getPosition,\n } = useComboboxPortal(PortalProps);\n\n const {\n keyDownHandler: listKeyDownHandler,\n focusHandler: listFocusHandler,\n activeDescendant,\n focusVisibleRef,\n selectedItem,\n setSelectedItem,\n setHighlightedItem,\n highlightedItem,\n } = useList({\n ...listProps,\n });\n\n const setSelected = (value: string \| undefined) => {\n setSelectedItem(value);\n setInputValue(value);\n };\n\n useEffect(() => {\n setInputValue(selectedItem);\n }, [selectedItem]);\n\n const focusHandler = (event: FocusEvent<HTMLInputElement>) => {\n setOpen(true);\n listFocusHandler(event);\n onFocus?.(event);\n };\n\n const blurHandler = (event: FocusEvent<HTMLInputElement>) => {\n setOpen(false);\n if (!selectedItem) {\n setSelected(undefined);\n setHighlightedItem(undefined);\n }\n onBlur?.(event);\n };\n\n const mouseOverHandler = (event: SyntheticEvent<HTMLElement>) => {\n setHighlightedItem(event.currentTarget.dataset.value);\n onMouseOver?.(event);\n };\n\n const keyDownHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n const { key, altKey } = event;\n switch (key) {\n case \"ArrowDown\":\n case \"ArrowUp\":\n if (altKey) {\n event.preventDefault();\n if (open && !selectedItem) {\n setSelected(undefined);\n }\n setOpen(!open);\n break;\n }\n if (!open) {\n setOpen(true);\n }\n listKeyDownHandler(event);\n break;\n case \"PageDown\":\n case \"PageUp\":\n case \"Home\":\n case \"End\":\n if (open) {\n listKeyDownHandler(event);\n }\n break;\n case \"Enter\":\n if (!open) {\n setOpen(true);\n } else {\n setSelected(highlightedItem);\n setOpen(false);\n }\n break;\n case \"Escape\":\n if (open) {\n setOpen(false);\n if (!selectedItem) {\n setSelected(undefined);\n }\n }\n break;\n case \"Backspace\":\n if (!open) {\n setOpen(true);\n }\n break;\n default:\n break;\n }\n onKeyDown?.(event);\n };\n\n return {\n inputValue,\n setInputValue,\n // portal\n portalProps: {\n open,\n setOpen,\n floating,\n reference,\n getTriggerProps,\n getPortalProps,\n getPosition,\n },\n // list\n selectedItem,\n setSelectedItem,\n highlightedItem,\n setHighlightedItem,\n activeDescendant,\n focusVisibleRef,\n keyDownHandler,\n focusHandler,\n blurHandler,\n mouseOverHandler,\n };\n};\n"],"names":["useControlled","useComboboxPortal","useList","useEffect"],"mappings":"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"}

package/dist-cjs/combo-box-next/useComboboxPortal.js CHANGED Viewed

@@ -21,15 +21,15 @@ function useComboboxPortal(props) {
     setOpen(open2);
     onOpenChangeProp == null ? void 0 : onOpenChangeProp(open2);
   };
-  const { floating, reference, x, y, strategy, context } = core.useFloatingUI({
+  const { floating, reference, x, y, strategy, context, elements } = core.useFloatingUI({
     open,
     onOpenChange,
     placement: placementProp,
     middleware: [
       react.offset(0),
       react.size({
-        apply({ rects, elements }) {
-          Object.assign(elements.floating.style, {
+        apply({ rects, elements: elements2 }) {
+          Object.assign(elements2.floating.style, {
             width: `${rects.reference.width}px`
           });
         }
@@ -44,24 +44,30 @@ function useComboboxPortal(props) {
   ]);
   const getPortalProps = () => {
     return getFloatingProps({
-      ref: floating,
-      style: {
-        top: y != null ? y : 0,
-        left: x != null ? x : 0,
-        position: strategy
-      }
+      ref: floating
     });
   };
   const getTriggerProps = () => getReferenceProps({
     ref: reference
   });
+  const getPosition = () => {
+    var _a, _b;
+    return {
+      top: y != null ? y : 0,
+      left: x != null ? x : 0,
+      position: strategy,
+      width: (_a = elements.floating) == null ? void 0 : _a.clientWidth,
+      height: (_b = elements.floating) == null ? void 0 : _b.clientHeight
+    };
+  };
   return {
     open,
     setOpen,
     floating,
     reference,
     getPortalProps,
-    getTriggerProps
+    getTriggerProps,
+    getPosition
   };
 }

package/dist-cjs/combo-box-next/useComboboxPortal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useComboboxPortal.js","sources":["../src/combo-box-next/useComboboxPortal.ts"],"sourcesContent":["import {\n flip,\n limitShift,\n offset,\n Placement,\n shift,\n size,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { HTMLProps } from \"react\";\nimport { useControlled, useFloatingUI } from \"@salt-ds/core\";\n\nexport interface UseComboBoxPortalProps {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n placement?: Placement;\n}\n\nexport function useComboboxPortal(props?: UseComboBoxPortalProps) {\n const {\n open: openProp,\n onOpenChange: onOpenChangeProp,\n placement: placementProp = \"bottom\",\n } = props \|\| {};\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Combo Box\",\n state: \"open\",\n });\n\n const onOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChangeProp?.(open);\n };\n\n const { floating, reference, x, y, strategy, context } = useFloatingUI({\n open,\n onOpenChange: onOpenChange,\n placement: placementProp,\n middleware: [\n offset(0),\n size({\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n });\n },\n }),\n flip(),\n shift({ limiter: limitShift() }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useRole(context, { role: \"listbox\" }),\n useDismiss(context),\n ]);\n\n const getPortalProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n ref: floating,\n ~~style~~: {\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n ~~},\n~~ ~~});\n };\n\n const~~ ~~getTriggerProps = () =>\~~n ~~getReferenceProps({\n ref~~: ~~reference~~,\n });\n\n return {\n open,\n setOpen,\n floating,\n reference,\n getPortalProps,\n getTriggerProps,\n };\n}\n"],"names":["useControlled","open","useFloatingUI","offset","size","flip","shift","limitShift","useInteractions","useRole","useDismiss"],"mappings":";;;;;;;AAoBO,SAAS,kBAAkB,KAAgC,EAAA;AAChE,EAAM,MAAA;AAAA,IACJ,IAAM,EAAA,QAAA;AAAA,IACN,YAAc,EAAA,gBAAA;AAAA,IACd,WAAW,aAAgB,GAAA,QAAA;AAAA,GAC7B,GAAI,SAAS,EAAC,CAAA;AACd,EAAA,MAAM,CAAC,IAAA,EAAM,OAAO,CAAA,GAAIA,kBAAc,CAAA;AAAA,IACpC,UAAY,EAAA,QAAA;AAAA,IACZ,OAAS,EAAA,KAAA;AAAA,IACT,IAAM,EAAA,WAAA;AAAA,IACN,KAAO,EAAA,MAAA;AAAA,GACR,CAAA,CAAA;AAED,EAAM,MAAA,YAAA,GAAe,CAACC,KAAkB,KAAA;AACtC,IAAA,OAAA,CAAQA,KAAI,CAAA,CAAA;AACZ,IAAmBA,gBAAAA,IAAAA,IAAAA,GAAAA,KAAAA,CAAAA,GAAAA,gBAAAA,CAAAA,KAAAA,CAAAA,CAAAA;AAAA,GACrB,CAAA;AAEA,EAAM,MAAA,EAAE,UAAU,SAAW,EAAA,CAAA,EAAG,GAAG,QAAU,EAAA,OAAA,~~KAAYC~~,kBAAc,CAAA;AAAA,~~IACrE~~,IAAA;AAAA,IACA,YAAA;AAAA,IACA,SAAW,EAAA,aAAA;AAAA,IACX,UAAY,EAAA;AAAA,MACVC,aAAO,CAAC,CAAA;AAAA,MACRC,UAAK,CAAA;AAAA,QACH,KAAM,CAAA,EAAE,KAAO,EAAA,QAAA,~~EAAY~~,EAAA;AACzB,UAAO,MAAA,CAAA,MAAA,~~CAAO~~,~~QAAS~~,CAAA,QAAA,CAAS,KAAO,EAAA;AAAA,YACrC,KAAA,EAAO,CAAG,EAAA,KAAA,CAAM,SAAU,CAAA,KAAA,CAAA,EAAA,CAAA;AAAA,WAC3B,CAAA,CAAA;AAAA,SACH;AAAA,OACD,CAAA;AAAA,MACDC,UAAK,EAAA;AAAA,MACLC,WAAM,CAAA,EAAE,OAAS,EAAAC,gBAAA,IAAc,CAAA;AAAA,KACjC;AAAA,GACD,CAAA,CAAA;~~AAED~~,EAAA,MAAM,EAAE,iBAAA,EAAmB,gBAAiB,EAAA,GAAIC,qBAAgB,CAAA;AAAA,IAC9DC,aAAQ,CAAA,OAAA,EAAS,EAAE,IAAA,EAAM,WAAW,CAAA;AAAA,IACpCC,iBAAW,OAAO,CAAA;AAAA,GACnB,CAAA,CAAA;AAED,EAAA,MAAM,iBAAiB,MAAiC;AACtD,IAAA,OAAO,gBAAiB,CAAA;AAAA,MACtB,GAAK,EAAA,QAAA;AAAA,~~MACL~~,~~KAAO~~,EAAA;AAAA,~~QACL~~,KAAK,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,~~QACV~~,MAAM,CAAK,IAAA,IAAA,GAAA,CAAA,GAAA,CAAA;AAAA,~~QACX~~,QAAU,EAAA,QAAA;AAAA,~~OACZ;AAAA~~,~~KACD~~,CAAA,CAAA~~;AAAA~~,~~GACH~~,CAAA;~~AAEA~~,~~EAAM~~,MAAA,~~eAAA~~,~~GAAkB~~,~~MACtB~~,~~iBAAkB~~,CAAA~~;AAAA~~,~~IAChB~~,~~GAAK~~,EAAA,~~SAAA~~;AAAA,~~GACN~~,CAAA,CAAA;~~AAEH~~,EAAO,OAAA;AAAA,IACL,IAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,SAAA;AAAA,IACA,cAAA;AAAA,IACA,eAAA;AAAA,GACF,CAAA;AACF;;;;"}
1	+ {"version":3,"file":"useComboboxPortal.js","sources":["../src/combo-box-next/useComboboxPortal.ts"],"sourcesContent":["import {\n flip,\n limitShift,\n offset,\n Placement,\n shift,\n size,\n useDismiss,\n useInteractions,\n useRole,\n} from \"@floating-ui/react\";\nimport { HTMLProps } from \"react\";\nimport { useControlled, useFloatingUI } from \"@salt-ds/core\";\n\nexport interface UseComboBoxPortalProps {\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n placement?: Placement;\n}\n\nexport function useComboboxPortal(props?: UseComboBoxPortalProps) {\n const {\n open: openProp,\n onOpenChange: onOpenChangeProp,\n placement: placementProp = \"bottom\",\n } = props \|\| {};\n const [open, setOpen] = useControlled({\n controlled: openProp,\n default: false,\n name: \"Combo Box\",\n state: \"open\",\n });\n\n const onOpenChange = (open: boolean) => {\n setOpen(open);\n onOpenChangeProp?.(open);\n };\n\n const { floating, reference, x, y, strategy, context, elements } =\n useFloatingUI({\n open,\n onOpenChange: onOpenChange,\n placement: placementProp,\n middleware: [\n offset(0),\n size({\n apply({ rects, elements }) {\n Object.assign(elements.floating.style, {\n width: `${rects.reference.width}px`,\n });\n },\n }),\n flip(),\n shift({ limiter: limitShift() }),\n ],\n });\n\n const { getReferenceProps, getFloatingProps } = useInteractions([\n useRole(context, { role: \"listbox\" }),\n useDismiss(context),\n ]);\n\n const getPortalProps = (): HTMLProps<HTMLDivElement> => {\n return getFloatingProps({\n ref: floating,\n });\n };\n\n const getTriggerProps = () =>\n getReferenceProps({\n ref: reference,\n });\n\n const getPosition = () => ({\n top: y ?? 0,\n left: x ?? 0,\n position: strategy,\n width: elements.floating?.clientWidth,\n height: elements.floating?.clientHeight,\n });\n\n return {\n open,\n setOpen,\n floating,\n reference,\n getPortalProps,\n getTriggerProps,\n getPosition,\n };\n}\n"],"names":["useControlled","open","useFloatingUI","offset","size","elements","flip","shift","limitShift","useInteractions","useRole","useDismiss"],"mappings":"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"}

package/dist-cjs/contact-details/ContactMetadataItem.js CHANGED Viewed

@@ -18,6 +18,7 @@ const ContactMetadataItem = React.forwardRef(function ContactMetadataItem2(props
       !Icon ? /* @__PURE__ */ jsxRuntime.jsx(core.Text, {
         maxRows: 1,
         className: withBaseName("label"),
+        variant: "secondary",
         children: label
       }) : null,
       Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, {

package/dist-cjs/contact-details/ContactMetadataItem.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactMetadataItem.js","sources":["../src/contact-details/ContactMetadataItem.tsx"],"sourcesContent":["import { makePrefixer, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { ComponentType, forwardRef, HTMLAttributes } from \"react\";\nimport { MailLinkComponent } from \"./MailLinkComponent\";\nimport { ValueComponentProps } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltContactMetadataItem\");\n\nexport interface ContactMetadataItemProps\n extends HTMLAttributes<HTMLDivElement> {\n label?: string;\n value: string;\n icon?: ComponentType<IconProps>;\n ValueComponent?: ComponentType<ValueComponentProps>;\n}\n\nexport const ContactMetadataItem = forwardRef<\n HTMLDivElement,\n ContactMetadataItemProps\n>(function ContactMetadataItem(props, ref) {\n const { label, value, icon: Icon, ValueComponent, ...restProps } = props;\n return (\n <div {...restProps} ref={ref} className={withBaseName()}>\n {!Icon ? (\n <Text maxRows={1} className={withBaseName(\"label\")}>\n {label}\n </Text>\n ) : null}\n {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n\n {ValueComponent ? (\n <ValueComponent value={value} />\n ) : (\n <MailLinkComponent value={value} />\n )}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ContactMetadataItem","jsxs","jsx","Text","MailLinkComponent"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA,CAAA;AAUpD,MAAM,mBAAsB,GAAAC,gBAAA,CAGjC,SAASC,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,EAAO,MAAM,IAAM,EAAA,cAAA,EAAA,GAAmB,WAAc,GAAA,KAAA,CAAA;AACnE,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IAAK,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAAU,WAAW,YAAa,EAAA;AAAA,IACnD,QAAA,EAAA;AAAA,MAAA,CAAC,uBACCC,cAAA,CAAAC,SAAA,EAAA;AAAA,QAAK,OAAS,EAAA,CAAA;AAAA,QAAG,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,~~QAC9C~~,QAAA,EAAA,KAAA;AAAA,OACH,CACE,GAAA,IAAA;AAAA,MACH,uBAAQD,cAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MAEnD,iCACEA,cAAA,CAAA,cAAA,EAAA;AAAA,QAAe,KAAA;AAAA,OAAc,oBAE7BA,cAAA,CAAAE,mCAAA,EAAA;AAAA,QAAkB,KAAA;AAAA,OAAc,CAAA;AAAA,KAAA;AAAA,GAErC,CAAA,CAAA;AAEJ,CAAC;;;;"}
1	+ {"version":3,"file":"ContactMetadataItem.js","sources":["../src/contact-details/ContactMetadataItem.tsx"],"sourcesContent":["import { makePrefixer, Text } from \"@salt-ds/core\";\nimport { IconProps } from \"@salt-ds/icons\";\nimport { ComponentType, forwardRef, HTMLAttributes } from \"react\";\nimport { MailLinkComponent } from \"./MailLinkComponent\";\nimport { ValueComponentProps } from \"./types\";\n\nconst withBaseName = makePrefixer(\"saltContactMetadataItem\");\n\nexport interface ContactMetadataItemProps\n extends HTMLAttributes<HTMLDivElement> {\n label?: string;\n value: string;\n icon?: ComponentType<IconProps>;\n ValueComponent?: ComponentType<ValueComponentProps>;\n}\n\nexport const ContactMetadataItem = forwardRef<\n HTMLDivElement,\n ContactMetadataItemProps\n>(function ContactMetadataItem(props, ref) {\n const { label, value, icon: Icon, ValueComponent, ...restProps } = props;\n return (\n <div {...restProps} ref={ref} className={withBaseName()}>\n {!Icon ? (\n <Text maxRows={1} className={withBaseName(\"label\")} variant=\"secondary\">\n {label}\n </Text>\n ) : null}\n {Icon ? <Icon className={withBaseName(\"icon\")} /> : null}\n\n {ValueComponent ? (\n <ValueComponent value={value} />\n ) : (\n <MailLinkComponent value={value} />\n )}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","ContactMetadataItem","jsxs","jsx","Text","MailLinkComponent"],"mappings":";;;;;;;;;AAMA,MAAM,YAAA,GAAeA,kBAAa,yBAAyB,CAAA,CAAA;AAUpD,MAAM,mBAAsB,GAAAC,gBAAA,CAGjC,SAASC,oBAAAA,CAAoB,OAAO,GAAK,EAAA;AACzC,EAAA,MAAM,EAAE,KAAO,EAAA,KAAA,EAAO,MAAM,IAAM,EAAA,cAAA,EAAA,GAAmB,WAAc,GAAA,KAAA,CAAA;AACnE,EAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,IAAK,GAAG,SAAA;AAAA,IAAW,GAAA;AAAA,IAAU,WAAW,YAAa,EAAA;AAAA,IACnD,QAAA,EAAA;AAAA,MAAA,CAAC,uBACCC,cAAA,CAAAC,SAAA,EAAA;AAAA,QAAK,OAAS,EAAA,CAAA;AAAA,QAAG,SAAA,EAAW,aAAa,OAAO,CAAA;AAAA,QAAG,OAAQ,EAAA,WAAA;AAAA,QACzD,QAAA,EAAA,KAAA;AAAA,OACH,CACE,GAAA,IAAA;AAAA,MACH,uBAAQD,cAAA,CAAA,IAAA,EAAA;AAAA,QAAK,SAAA,EAAW,aAAa,MAAM,CAAA;AAAA,OAAG,CAAK,GAAA,IAAA;AAAA,MAEnD,iCACEA,cAAA,CAAA,cAAA,EAAA;AAAA,QAAe,KAAA;AAAA,OAAc,oBAE7BA,cAAA,CAAAE,mCAAA,EAAA;AAAA,QAAkB,KAAA;AAAA,OAAc,CAAA;AAAA,KAAA;AAAA,GAErC,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist-cjs/dialog/DialogActions.js CHANGED Viewed

@@ -11,21 +11,23 @@ var styles = require('@salt-ds/styles');
 var DialogActions$1 = require('./DialogActions.css.js');
 const withBaseName = core.makePrefixer("saltDialogActions");
-const DialogActions = React.forwardRef(function DialogActions2(props, ref) {
-  const { children, className, ...rest } = props;
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-dialog-actions",
-    css: DialogActions$1,
-    window: targetWindow
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    className: clsx.clsx(withBaseName(), className),
-    ...rest,
-    ref,
-    children
-  });
-});
+const DialogActions = React.forwardRef(
+  function DialogActions2(props, ref) {
+    const { children, className, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-dialog-actions",
+      css: DialogActions$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      className: clsx.clsx(withBaseName(), className),
+      ...rest,
+      ref,
+      children
+    });
+  }
+);
 exports.DialogActions = DialogActions;
 //# sourceMappingURL=DialogActions.js.map

package/dist-cjs/dialog/DialogActions.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport const DialogActions = forwardRef~~<\n HTMLDivElement,\n HTMLAttributes~~<HTMLDivElement~~>\n~~>(function DialogActions(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-actions\",\n css: dialogActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","DialogActions","useWindow","useComponentCssInjection","dialogActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;~~AAE9C~~,MAAM,aAAgB,GAAAC,gBAAA,~~CAG3B~~,SAASC,~~cAAAA~~,~~CAAc~~,~~OAAO~~,GAAK,EAAA;~~AACnC~~,~~EAAA~~,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,~~EAAA~~,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,~~EAAyBC~~,+BAAA,CAAA;AAAA,~~IACvB~~,MAAQ,EAAA,qBAAA;AAAA,~~IACR~~,GAAK,EAAAC,eAAA;AAAA,~~IACL~~,MAAQ,EAAA,YAAA;AAAA,~~GACT~~,CAAA,CAAA;AAED,~~EAAA~~,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,~~IAAI~~,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,~~IAAI~~,GAAG,IAAA;AAAA,~~IAAM~~,GAAA;AAAA,~~IACxD~~,QAAA;AAAA,~~GACH~~,CAAA,CAAA;~~AAEJ~~,~~CAAC~~;;;;"}
1	+ {"version":3,"file":"DialogActions.js","sources":["../src/dialog/DialogActions.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogActionsCss from \"./DialogActions.css\";\n\nconst withBaseName = makePrefixer(\"saltDialogActions\");\n\nexport interface DialogActionsProps extends HTMLAttributes<HTMLDivElement> {\n /*\n The content of Dialog Actions\n */\n children?: ReactNode;\n}\n\nexport const DialogActions = forwardRef<HTMLDivElement, DialogActionsProps>(\n function DialogActions(props, ref) {\n const { children, className, ...rest } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-actions\",\n css: dialogActionsCss,\n window: targetWindow,\n });\n\n return (\n <div className={clsx(withBaseName(), className)} {...rest} ref={ref}>\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogActions","useWindow","useComponentCssInjection","dialogActionsCss","jsx","clsx"],"mappings":";;;;;;;;;;;;AAQA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AAEzC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAI,GAAG,IAAA;AAAA,MAAM,GAAA;AAAA,MACxD,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/dialog/DialogContent.js CHANGED Viewed

@@ -12,23 +12,25 @@ var DialogContent$1 = require('./DialogContent.css.js');
 var DialogContext = require('./DialogContext.js');
 const withBaseName = core.makePrefixer("saltDialogContent");
-const DialogContent = React.forwardRef(function DialogContent2(props, ref) {
-  const { children, className, ...rest } = props;
-  const { dialogId } = DialogContext.useDialogContext();
-  const targetWindow = window.useWindow();
-  styles.useComponentCssInjection({
-    testId: "salt-dialog-content",
-    css: DialogContent$1,
-    window: targetWindow
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx("div", {
-    id: `${dialogId}-description`,
-    className: clsx.clsx(withBaseName(), className),
-    ...rest,
-    ref,
-    children
-  });
-});
+const DialogContent = React.forwardRef(
+  function DialogContent2(props, ref) {
+    const { children, className, ...rest } = props;
+    const { dialogId } = DialogContext.useDialogContext();
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-dialog-content",
+      css: DialogContent$1,
+      window: targetWindow
+    });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      id: `${dialogId}-description`,
+      className: clsx.clsx(withBaseName(), className),
+      ...rest,
+      ref,
+      children
+    });
+  }
+);
 exports.DialogContent = DialogContent;
 //# sourceMappingURL=DialogContent.js.map

package/dist-cjs/dialog/DialogContent.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\nimport { useDialogContext } from \"./DialogContext\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport const DialogContent = forwardRef~~<\n HTMLDivElement,\n HTMLAttributes~~<HTMLDivElement~~>\n~~>(function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const { dialogId } = useDialogContext();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n return (\n <div\n id={`${dialogId!}-description`}\n className={clsx(withBaseName(), className)}\n {...rest}\n ref={ref}\n >\n {children}\n </div>\n );\n});\n"],"names":["makePrefixer","forwardRef","DialogContent","useDialogContext","useWindow","useComponentCssInjection","dialogContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;~~AAE9C~~,MAAM,aAAgB,GAAAC,gBAAA,~~CAG3B~~,SAASC,~~cAAAA~~,~~CAAc~~,~~OAAO~~,GAAK,EAAA;~~AACnC~~,~~EAAA~~,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,~~EAAM~~,MAAA,EAAE,QAAS,EAAA,GAAIC,8BAAiB,EAAA,CAAA;AAEtC,~~EAAA~~,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,~~EAAyBC~~,+BAAA,CAAA;AAAA,~~IACvB~~,MAAQ,EAAA,qBAAA;AAAA,~~IACR~~,GAAK,EAAAC,eAAA;AAAA,~~IACL~~,MAAQ,EAAA,YAAA;AAAA,~~GACT~~,CAAA,CAAA;AAED,~~EAAA~~,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,~~IACC~~,IAAI,CAAG,EAAA,QAAA,CAAA,YAAA,CAAA;AAAA,~~IACP~~,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,~~IACxC~~,GAAG,IAAA;AAAA,~~IACJ~~,GAAA;AAAA,~~IAEC~~,QAAA;AAAA,~~GACH~~,CAAA,CAAA;~~AAEJ~~,~~CAAC~~;;;;"}
1	+ {"version":3,"file":"DialogContent.js","sources":["../src/dialog/DialogContent.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, ReactNode } from \"react\";\nimport { clsx } from \"clsx\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport dialogContentCss from \"./DialogContent.css\";\nimport { useDialogContext } from \"./DialogContext\";\n\nconst withBaseName = makePrefixer(\"saltDialogContent\");\n\nexport interface DialogContentProps extends HTMLAttributes<HTMLDivElement> {\n /*\n The content of Dialog Content\n */\n children?: ReactNode;\n}\n\nexport const DialogContent = forwardRef<HTMLDivElement, DialogContentProps>(\n function DialogContent(props, ref) {\n const { children, className, ...rest } = props;\n const { dialogId } = useDialogContext();\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-dialog-content\",\n css: dialogContentCss,\n window: targetWindow,\n });\n\n return (\n <div\n id={`${dialogId!}-description`}\n className={clsx(withBaseName(), className)}\n {...rest}\n ref={ref}\n >\n {children}\n </div>\n );\n }\n);\n"],"names":["makePrefixer","forwardRef","DialogContent","useDialogContext","useWindow","useComponentCssInjection","dialogContentCss","jsx","clsx"],"mappings":";;;;;;;;;;;;;AASA,MAAM,YAAA,GAAeA,kBAAa,mBAAmB,CAAA,CAAA;AAS9C,MAAM,aAAgB,GAAAC,gBAAA;AAAA,EAC3B,SAASC,cAAc,CAAA,KAAA,EAAO,GAAK,EAAA;AACjC,IAAA,MAAM,EAAE,QAAA,EAAU,SAAc,EAAA,GAAA,IAAA,EAAS,GAAA,KAAA,CAAA;AACzC,IAAM,MAAA,EAAE,QAAS,EAAA,GAAIC,8BAAiB,EAAA,CAAA;AAEtC,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,qBAAA;AAAA,MACR,GAAK,EAAAC,eAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACC,IAAI,CAAG,EAAA,QAAA,CAAA,YAAA,CAAA;AAAA,MACP,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MACxC,GAAG,IAAA;AAAA,MACJ,GAAA;AAAA,MAEC,QAAA;AAAA,KACH,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/drawer/Drawer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n} from \"@floating-ui/react\";\nimport { makePrefixer, SaltProvider, useForkRef } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDrawer } from \"./useDrawer\";\n\nimport drawerCss from \"./Drawer.css\";\n\nexport const DRAWER_POSITIONS = [\"left\", \"top\", \"right\", \"bottom\"] as const;\n\nexport type DrawerPositions = typeof DRAWER_POSITIONS[number];\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Defines the drawer position within the screen.\n /\n position?: DrawerPositions;\n /\n Display or hide the component.\n /\n open?: boolean;\n /\n Callback function triggered when open state changes.\n /\n onOpenChange?: (open: boolean) => void;\n /\n Change background color palette\n /\n variant?: \"primary\" \| \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n props,\n ref\n) {\n const {\n children,\n className,\n position = \"left\",\n open = true,\n onOpenChange,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { floating, context } = useDrawer({\n open,\n onOpenChange,\n });\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n }, [open, showComponent]);\n\n return (\n <FloatingPortal>\n {/ The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n {showComponent && (\n <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n <FloatingFocusManager context={context}>\n <div\n ref={floatingRef}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...rest}\n >\n {children}\n </div>\n </FloatingFocusManager>\n </FloatingOverlay>\n )}\n </SaltProvider>\n </FloatingPortal>\n );\n});\n"],"names":["makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useDrawer","useForkRef","useEffect","jsx","FloatingPortal","SaltProvider","FloatingOverlay","FloatingFocusManager","clsx"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,gBAAmB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,SAAS,QAAQ,EAAA;AAuBjE,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,IAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAExD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAQ,EAAA,GAAIC,mBAAU,CAAA;AAAA,IACtC,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAa,CAAC,CAAA,CAAA;AAExB,EAAA,uBACGC,cAAA,CAAAC,oBAAA,EAAA;AAAA,IAEC,QAAC,kBAAAD,cAAA,CAAAE,iBAAA,EAAA;AAAA,MACE,2CACEF,cAAA,CAAAG,qBAAA,EAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAG,UAAU,EAAA,IAAA;AAAA,QAC7D,QAAC,kBAAAH,cAAA,CAAAI,0BAAA,EAAA;AAAA,UAAqB,OAAA;AAAA,UACpB,QAAC,kBAAAJ,cAAA,CAAA,KAAA,EAAA;AAAA,YACC,GAAK,EAAA,WAAA;AAAA,YACL,SAAW,EAAAK,SAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb,aAAa,QAAQ,CAAA;AAAA,cACrB;AAAA,gBACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,gBAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,gBAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,eAC3B;AAAA,cACA,SAAA;AAAA,aACF;AAAA,YACA,gBAAgB,MAAM;AACpB,cAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,gBAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,eACxB;AAAA,aACF;AAAA,YACC,GAAG,IAAA;AAAA,YAEH,QAAA;AAAA,WACH,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;;"}
1	+ {"version":3,"file":"Drawer.js","sources":["../src/drawer/Drawer.tsx"],"sourcesContent":["import { forwardRef, HTMLAttributes, useEffect, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n FloatingFocusManager,\n FloatingOverlay,\n FloatingPortal,\n} from \"@floating-ui/react\";\nimport { makePrefixer, SaltProvider, useForkRef } from \"@salt-ds/core\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useDrawer } from \"./useDrawer\";\n\nimport drawerCss from \"./Drawer.css\";\n\nexport const DRAWER_POSITIONS = [\"left\", \"top\", \"right\", \"bottom\"] as const;\n\nexport type DrawerPositions = (typeof DRAWER_POSITIONS)[number];\n\nexport interface DrawerProps extends HTMLAttributes<HTMLDivElement> {\n /*\n Defines the drawer position within the screen.\n /\n position?: DrawerPositions;\n /\n Display or hide the component.\n /\n open?: boolean;\n /\n Callback function triggered when open state changes.\n /\n onOpenChange?: (open: boolean) => void;\n /\n Change background color palette\n /\n variant?: \"primary\" \| \"secondary\";\n}\n\nconst withBaseName = makePrefixer(\"saltDrawer\");\n\nexport const Drawer = forwardRef<HTMLDivElement, DrawerProps>(function Drawer(\n props,\n ref\n) {\n const {\n children,\n className,\n position = \"left\",\n open = true,\n onOpenChange,\n variant = \"primary\",\n ...rest\n } = props;\n\n const targetWindow = useWindow();\n useComponentCssInjection({\n testId: \"salt-drawer\",\n css: drawerCss,\n window: targetWindow,\n });\n\n const [showComponent, setShowComponent] = useState(false);\n\n const { floating, context } = useDrawer({\n open,\n onOpenChange,\n });\n\n const floatingRef = useForkRef<HTMLDivElement>(floating, ref);\n\n useEffect(() => {\n if (open && !showComponent) {\n setShowComponent(true);\n }\n }, [open, showComponent]);\n\n return (\n <FloatingPortal>\n {/ The provider is needed to support the use case where an app has nested modes. The element that is portalled needs to have the same style as the current scope */}\n <SaltProvider>\n {showComponent && (\n <FloatingOverlay className={withBaseName(\"overlay\")} lockScroll>\n <FloatingFocusManager context={context}>\n <div\n ref={floatingRef}\n className={clsx(\n withBaseName(),\n withBaseName(position),\n {\n [withBaseName(\"enterAnimation\")]: open,\n [withBaseName(\"exitAnimation\")]: !open,\n [withBaseName(variant)]: variant,\n },\n className\n )}\n onAnimationEnd={() => {\n if (!open && showComponent) {\n setShowComponent(false);\n }\n }}\n {...rest}\n >\n {children}\n </div>\n </FloatingFocusManager>\n </FloatingOverlay>\n )}\n </SaltProvider>\n </FloatingPortal>\n );\n});\n"],"names":["makePrefixer","forwardRef","Drawer","useWindow","useComponentCssInjection","drawerCss","useState","useDrawer","useForkRef","useEffect","jsx","FloatingPortal","SaltProvider","FloatingOverlay","FloatingFocusManager","clsx"],"mappings":";;;;;;;;;;;;;;AAcO,MAAM,gBAAmB,GAAA,CAAC,MAAQ,EAAA,KAAA,EAAO,SAAS,QAAQ,EAAA;AAuBjE,MAAM,YAAA,GAAeA,kBAAa,YAAY,CAAA,CAAA;AAEvC,MAAM,MAAS,GAAAC,gBAAA,CAAwC,SAASC,OAAAA,CACrE,OACA,GACA,EAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,SAAA;AAAA,IACA,QAAW,GAAA,MAAA;AAAA,IACX,IAAO,GAAA,IAAA;AAAA,IACP,YAAA;AAAA,IACA,OAAU,GAAA,SAAA;AAAA,IACP,GAAA,IAAA;AAAA,GACD,GAAA,KAAA,CAAA;AAEJ,EAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,EAAyBC,+BAAA,CAAA;AAAA,IACvB,MAAQ,EAAA,aAAA;AAAA,IACR,GAAK,EAAAC,QAAA;AAAA,IACL,MAAQ,EAAA,YAAA;AAAA,GACT,CAAA,CAAA;AAED,EAAA,MAAM,CAAC,aAAA,EAAe,gBAAgB,CAAA,GAAIC,eAAS,KAAK,CAAA,CAAA;AAExD,EAAA,MAAM,EAAE,QAAA,EAAU,OAAQ,EAAA,GAAIC,mBAAU,CAAA;AAAA,IACtC,IAAA;AAAA,IACA,YAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAM,MAAA,WAAA,GAAcC,eAA2B,CAAA,QAAA,EAAU,GAAG,CAAA,CAAA;AAE5D,EAAAC,eAAA,CAAU,MAAM;AACd,IAAI,IAAA,IAAA,IAAQ,CAAC,aAAe,EAAA;AAC1B,MAAA,gBAAA,CAAiB,IAAI,CAAA,CAAA;AAAA,KACvB;AAAA,GACC,EAAA,CAAC,IAAM,EAAA,aAAa,CAAC,CAAA,CAAA;AAExB,EAAA,uBACGC,cAAA,CAAAC,oBAAA,EAAA;AAAA,IAEC,QAAC,kBAAAD,cAAA,CAAAE,iBAAA,EAAA;AAAA,MACE,2CACEF,cAAA,CAAAG,qBAAA,EAAA;AAAA,QAAgB,SAAA,EAAW,aAAa,SAAS,CAAA;AAAA,QAAG,UAAU,EAAA,IAAA;AAAA,QAC7D,QAAC,kBAAAH,cAAA,CAAAI,0BAAA,EAAA;AAAA,UAAqB,OAAA;AAAA,UACpB,QAAC,kBAAAJ,cAAA,CAAA,KAAA,EAAA;AAAA,YACC,GAAK,EAAA,WAAA;AAAA,YACL,SAAW,EAAAK,SAAA;AAAA,cACT,YAAa,EAAA;AAAA,cACb,aAAa,QAAQ,CAAA;AAAA,cACrB;AAAA,gBACE,CAAC,YAAa,CAAA,gBAAgB,CAAI,GAAA,IAAA;AAAA,gBAClC,CAAC,YAAA,CAAa,eAAe,CAAA,GAAI,CAAC,IAAA;AAAA,gBAClC,CAAC,YAAa,CAAA,OAAO,CAAI,GAAA,OAAA;AAAA,eAC3B;AAAA,cACA,SAAA;AAAA,aACF;AAAA,YACA,gBAAgB,MAAM;AACpB,cAAI,IAAA,CAAC,QAAQ,aAAe,EAAA;AAC1B,gBAAA,gBAAA,CAAiB,KAAK,CAAA,CAAA;AAAA,eACxB;AAAA,aACF;AAAA,YACC,GAAG,IAAA;AAAA,YAEH,QAAA;AAAA,WACH,CAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA,CAAA;AAEJ,CAAC;;;;;"}

package/dist-cjs/dropdown-next/DropdownNext.css.js CHANGED Viewed

@@ -1,6 +1,6 @@
 'use strict';
-var css_248z = ".saltDropdownNext-button {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n  color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground));\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDropdownNext-height, var(--salt-size-base));\n  line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltDropdownNext-minWidth, 160px);\n  padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  border: none;\n  border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n  justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n  --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: var(--salt-spacing-100);\n  user-select: text;\n}\n\n.saltDropdownNext-list.saltListNext {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n  z-index: calc(var(--salt-zIndex-appHeader) - 1);\n}\n\n/* Styling applied to dropdown button if `disabled={true}` */\n.saltDropdownNext-disabled,\n.saltDropdownNext-disabled:hover,\n.saltDropdownNext-disabled:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-selectable-cursor-disabled);\n  background: var(--dropdownNext-background-disabled);\n  color: var(--saltDropdownNext-color-disabled, var(--salt-text-primary-foreground-disabled));\n  outline: 0;\n}\n\n/* Style applied to dropdown button if `readOnly={true}` */\n.saltDropdownNext-button.saltDropdownNext-readOnly,\n.saltDropdownNext-button.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-button.saltDropdownNext-readOnly:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-editable-cursor-readonly);\n  background: var(--dropdownNext-background-readonly);\n  /* no padding-right when there's no dropdown button icon */\n  padding-right: 0;\n}\n\n/* Styling applied to dropdown button icon if `disabled={true}` or `readOnly={true}` */\n.saltDropdownNext-icon.saltDropdownNext-disabled,\n.saltDropdownNext-icon.saltDropdownNext-disabled:hover,\n.saltDropdownNext-icon.saltDropdownNext-disabled:active,\n.saltDropdownNext-icon.saltDropdownNext-readOnly,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:active {\n  color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDropdownNext-primary {\n  --dropdownNext-background: var(--salt-editable-primary-background);\n  --dropdownNext-background-active: var(--salt-editable-primary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDropdownNext-secondary {\n  --dropdownNext-background: var(--salt-editable-secondary-background);\n  --dropdownNext-background-active: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n";
+var css_248z = ".saltDropdownNext-button {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  align-items: center;\n  background: var(--saltDropdownNext-background, var(--dropdownNext-background));\n  color: var(--saltDropdownNext-color, var(--salt-text-primary-foreground));\n  display: flex;\n  font-family: var(--salt-text-fontFamily);\n  font-size: var(--saltDropdownNext-fontSize, var(--salt-text-fontSize));\n  height: var(--saltDropdownNext-height, var(--salt-size-base));\n  line-height: var(--saltDropdownNext-lineHeight, var(--salt-text-lineHeight));\n  min-height: var(--saltDropdownNext-minHeight, var(--salt-size-base));\n  min-width: var(--saltDropdownNext-minWidth, 160px);\n  padding-left: var(--saltDropdownNext-paddingLeft, var(--salt-spacing-100));\n  padding-right: var(--saltDropdownNext-paddingRight, var(--salt-spacing-100));\n  position: relative;\n  border: none;\n  border-bottom: var(--dropdownNext-borderWidth) var(--dropdownNext-borderStyle) var(--dropdownNext-borderColor);\n  justify-content: space-between;\n}\n\n.saltDropdownNext-button:hover {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-hover);\n\n  cursor: var(--salt-selectable-cursor-hover);\n}\n\n.saltDropdownNext-button:focus,\n.saltDropdownNext-button:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-active);\n  --dropdownNext-borderWidth: var(--salt-editable-borderWidth-active);\n\n  outline: var(--saltDropdownNext-outline, var(--salt-focused-outlineWidth) var(--salt-focused-outlineStyle) var(--salt-focused-outlineColor));\n}\n\n.saltDropdownNext-buttonText {\n  text-align: left;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  padding-right: var(--salt-spacing-100);\n  user-select: text;\n}\n\n.saltDropdownNext-list.saltListNext {\n  border-color: var(--salt-selectable-borderColor-selected);\n  box-shadow: var(--salt-overlayable-shadow-popout);\n  max-height: calc((var(--salt-size-base) + var(--salt-spacing-100)) * 5);\n  z-index: calc(var(--salt-zIndex-modal) + 1);\n}\n\n/* Styling applied to dropdown button if `disabled={true}` */\n.saltDropdownNext-disabled,\n.saltDropdownNext-disabled:hover,\n.saltDropdownNext-disabled:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-disabled);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-disabled);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-selectable-cursor-disabled);\n  background: var(--dropdownNext-background-disabled);\n  color: var(--saltDropdownNext-color-disabled, var(--salt-text-primary-foreground-disabled));\n  outline: 0;\n}\n\n/* Style applied to dropdown button if `readOnly={true}` */\n.saltDropdownNext-button.saltDropdownNext-readOnly,\n.saltDropdownNext-button.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-button.saltDropdownNext-readOnly:active {\n  --dropdownNext-borderColor: var(--salt-editable-borderColor-readonly);\n  --dropdownNext-borderStyle: var(--salt-editable-borderStyle-readonly);\n  --dropdownNext-borderWidth: var(--salt-size-border);\n\n  cursor: var(--salt-editable-cursor-readonly);\n  background: var(--dropdownNext-background-readonly);\n  /* no padding-right when there's no dropdown button icon */\n  padding-right: 0;\n}\n\n/* Styling applied to dropdown button icon if `disabled={true}` or `readOnly={true}` */\n.saltDropdownNext-icon.saltDropdownNext-disabled,\n.saltDropdownNext-icon.saltDropdownNext-disabled:hover,\n.saltDropdownNext-icon.saltDropdownNext-disabled:active,\n.saltDropdownNext-icon.saltDropdownNext-readOnly,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:hover,\n.saltDropdownNext-icon.saltDropdownNext-readOnly:active {\n  color: var(--salt-text-primary-foreground-disabled);\n}\n\n/* Class applied if `variant=\"primary\"` */\n.saltDropdownNext-primary {\n  --dropdownNext-background: var(--salt-editable-primary-background);\n  --dropdownNext-background-active: var(--salt-editable-primary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-primary-background-hover);\n  --dropdownNext-background-disabled: var(--salt-editable-primary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-primary-background-readonly);\n}\n\n/* Class applied if `variant=\"secondary\"` */\n.saltDropdownNext-secondary {\n  --dropdownNext-background: var(--salt-editable-secondary-background);\n  --dropdownNext-background-active: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-hover: var(--salt-editable-secondary-background-active);\n  --dropdownNext-background-disabled: var(--salt-editable-secondary-background-disabled);\n  --dropdownNext-background-readonly: var(--salt-editable-secondary-background-readonly);\n}\n";
 module.exports = css_248z;
 //# sourceMappingURL=DropdownNext.css.js.map