@salt-ds/lab 1.0.0-alpha.27 → 1.0.0-alpha.29

package/css/salt-lab.css

@@ -299,9 +299,6 @@
   width: var(--salt-size-container-spacing);
   display: contents;
 }
-.saltColorChooser-overlayButtonClose {
-  margin: 5px;
-}
 .saltColorChooser-defaultButton {
   float: right;
   background: transparent;
@@ -1231,43 +1228,6 @@
   outline: none;
 }
 
-/* src/file-drop-zone/FileDropZone.css */
-.saltFileDropZone {
-  color: var(--saltFileDropZone-text-color, var(--salt-text-primary-foreground));
-  display: inline-flex;
-  background: var(--saltFileDropZone-background, var(--salt-container-primary-background));
-  text-align: center;
-  align-items: center;
-  justify-content: center;
-  border: var(--saltFileDropZone-border, var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor));
-  flex-direction: column;
-  padding: var(--salt-spacing-200);
-  gap: var(--salt-spacing-200);
-  width: 100%;
-  font-size: var(--saltFileDropZone-fontSize, var(--salt-text-fontSize));
-  font-family: var(--saltFileDropZone-fontFamily, var(--salt-text-fontFamily));
-  line-height: var(--saltFileDropZone-lineHeight, var(--salt-text-lineHeight));
-}
-.saltFileDropZone-active {
-  background: var(--salt-target-background-hover);
-  border: var(--salt-size-border-strong) var(--salt-target-borderStyle-hover) var(--salt-target-borderColor-hover);
-}
-.saltFileDropZone-error {
-  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-error-borderColor);
-}
-.saltFileDropZone-success {
-  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-status-success-borderColor);
-}
-.saltFileDropZone .input-hidden {
-  display: none;
-}
-.saltFileDropZone-disabled {
-  background: var(--salt-container-primary-background-disabled);
-  border: var(--salt-size-border-strong) var(--salt-target-borderStyle) var(--salt-container-primary-borderColor-disabled);
-  cursor: var(--salt-target-cursor-disabled);
-  color: var(--salt-content-primary-foreground-disabled);
-}
-
 /* src/form-field-legacy/FormActivationIndicator.css */
 .salt-density-touch {
   --formFieldLegacy-activationIndicator-icon-size: 7px;
@@ -2362,86 +2322,6 @@
   align-items: flex-end;
 }
 
-/* src/navigation-item/NavigationItem.css */
-.saltNavigationItem-wrapper {
-  display: flex;
-  gap: var(--salt-spacing-100);
-  align-items: center;
-  position: relative;
-  background: none;
-  border: none;
-  font-size: var(--salt-text-fontSize);
-  text-decoration: none;
-  cursor: var(--salt-selectable-cursor-hover);
-  transition: all var(--salt-duration-instant) ease-in-out;
-}
-.saltNavigationItem-rootItem {
-  font-weight: var(--salt-text-fontWeight-strong);
-}
-.saltNavigationItem-label .saltIcon {
-  top: var(--salt-spacing-25);
-}
-.saltNavigationItem-horizontal {
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-100) * 2);
-  padding: 0 var(--salt-spacing-100);
-  width: fit-content;
-}
-.saltNavigationItem-vertical {
-  min-height: calc(var(--salt-size-base) + var(--salt-spacing-50) * 2);
-  padding-top: 0;
-  padding-bottom: 0;
-  padding-right: var(--salt-spacing-100);
-  padding-left: calc(var(--salt-spacing-300) * (min(var(--saltNavigationItem-level, 0) + 1, 2)));
-  width: 100%;
-}
-.saltNavigationItem-label {
-  color: var(--salt-content-primary-foreground);
-  line-height: var(--salt-text-lineHeight);
-  font-family: var(--salt-text-fontFamily);
-  padding-left: calc(var(--saltNavigationItem-level, 0) * var(--salt-spacing-100));
-  flex: 1;
-  text-align: left;
-  display: flex;
-  align-items: baseline;
-  gap: var(--salt-spacing-100);
-}
-.saltNavigationItem-label .saltBadge {
-  margin-left: auto;
-}
-.saltNavigationItem-wrapper:focus-visible {
-  outline: var(--salt-focused-outline);
-}
-.saltNavigationItem-wrapper:focus:not(:focus-visible) {
-  outline: 0;
-}
-.saltNavigationItem-wrapper::after {
-  content: "";
-  position: absolute;
-  top: var(--salt-spacing-25);
-  left: 0;
-  display: block;
-}
-.saltNavigationItem-horizontal::after {
-  width: 100%;
-  height: var(--salt-size-indicator);
-}
-.saltNavigationItem-vertical::after {
-  width: var(--salt-size-indicator);
-  left: var(--salt-spacing-25);
-  height: calc(100% - var(--salt-spacing-50));
-}
-.saltNavigationItem-wrapper:hover::after,
-.saltNavigationItem-wrapper:focus-visible::after {
-  background: var(--salt-navigable-indicator-hover);
-  transition: all var(--salt-duration-perceptible) ease-in-out;
-}
-.saltNavigationItem-active::after,
-.saltNavigationItem-active:hover::after,
-.saltNavigationItem-active:focus::after {
-  background: var(--salt-navigable-indicator-active);
-  transition: all var(--salt-duration-perceptible) ease-in-out;
-}
-
 /* src/option/Option.css */
 .saltOption {
   color: var(--salt-content-primary-foreground);
@@ -2512,177 +2392,44 @@
 }
 
 /* src/overlay/Overlay.css */
-.saltOverlay {
-  --overlay-text-color: var(--salt-content-primary-foreground);
-  --overlay-spacing: var(--salt-size-unit);
-  --overlay-fontSize: var(--salt-text-fontSize);
-  --overlay-background: var(--salt-container-primary-background);
-  --overlay-borderColor: var(--salt-container-primary-borderColor);
-  --overlay-zindex: var(--salt-zIndex-flyover);
-}
-.saltOverlay-secondary.saltOverlay {
-  --overlay-background: var(--salt-container-secondary-background);
-  --overlay-borderColor: var(--salt-container-secondary-borderColor);
-}
-.saltOverlay-content {
-  display: flex;
-  padding: calc(var(--overlay-spacing) * 2);
-  font-size: var(--overlay-fontSize);
-  border: 1px solid var(--overlay-borderColor);
-  box-shadow: var(--salt-overlayable-shadow-popout);
-  line-height: var(--salt-text-lineHeight);
-  background: var(--overlay-background);
-  color: var(--overlay-text-color);
-  position: relative;
-  opacity: 1;
-  overflow: visible;
-  z-index: var(--overlay-zindex);
-}
-.saltOverlay-arrow,
-.saltOverlay-arrow::after {
-  border: 8px solid transparent;
-  position: absolute;
-}
-.saltOverlay-arrow::after {
-  content: "";
+.saltOverlayPanel {
+  --overlay-borderColor: var(--saltOverlay-borderColor, var(--salt-container-primary-borderColor));
+  --overlay-background: var(--saltOverlay-background, var(--salt-container-primary-background));
 }
-.saltOverlay[data-placement^=top] .saltOverlay-arrow {
-  border-top-color: var(--overlay-borderColor);
-  bottom: -17px;
-}
-.saltOverlay[data-placement^=bottom] .saltOverlay-arrow {
-  border-bottom-color: var(--overlay-borderColor);
-  top: -17px;
-}
-.saltOverlay[data-placement^=left] .saltOverlay-arrow {
-  border-left-color: var(--overlay-borderColor);
-  right: -17px;
-}
-.saltOverlay[data-placement^=right] .saltOverlay-arrow {
-  border-right-color: var(--overlay-borderColor);
-  left: -17px;
-}
-.saltOverlay[data-placement^=top] .saltOverlay-arrow::after {
-  border-top-color: var(--overlay-background);
-  bottom: -7px;
-  left: calc(100% - 8px);
+.saltOverlayPanel {
+  font-family: var(--salt-text-fontFamily);
+  font-size: var(--saltOverlay-fontSize, var(--salt-text-fontSize));
+  font-weight: var(--saltOverlay-fontWeight, var(--salt-text-fontWeight));
+  line-height: var(--saltOverlay-lineHeight, var(--salt-text-lineHeight));
+  border-color: var(--overlay-borderColor);
+  border-style: var(--saltOverlay-borderStyle, var(--salt-container-borderStyle));
+  border-width: var(--saltOverlay-borderWidth, var(--salt-size-border));
+  background: var(--overlay-background);
+  box-shadow: var(--saltOverlay-boxShadow, var(--salt-overlayable-shadow-popout));
+  color: var(--saltOverlay-text-color, var(--salt-text-primary-foreground));
+  z-index: var(--saltOverlay-zIndex, var(--salt-zIndex-flyover));
+  width: max-content;
 }
-.saltOverlay[data-placement^=bottom] .saltOverlay-arrow::after {
-  border-bottom-color: var(--overlay-background);
-  top: -7px;
-  left: calc(100% - 8px);
+.saltOverlayPanelBase-container {
+  animation: fade-in var(--salt-duration-perceptible) ease-in-out;
+  position: relative;
 }
-.saltOverlay[data-placement^=left] .saltOverlay-arrow::after {
-  border-left-color: var(--overlay-background);
-  right: -7px;
-  top: calc(100% - 8px);
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
 }
-.saltOverlay[data-placement^=right] .saltOverlay-arrow::after {
-  border-right-color: var(--overlay-background);
-  left: -7px;
-  top: calc(100% - 8px);
+.saltOverlayPanelBase-content {
+  overflow: auto;
+  padding: var(--saltOverlay-content-padding, var(--salt-spacing-100) 0 var(--salt-spacing-100) var(--salt-spacing-100));
 }
-.saltOverlay-close {
-  position: absolute;
-  right: 0;
+.saltButton-secondary.saltOverlayPanelBase-closeButton {
+  position: sticky;
   top: 0;
-  z-index: var(--salt-zIndex-default);
-}
-
-/* src/pagination/CompactInput.css */
-.saltCompactInput {
-  --saltInput-paddingLeft: 0;
-  --saltInput-paddingRight: 0;
-}
-.saltCompactInput-defaultSize.saltInput {
-  --saltInput-minWidth: var(--salt-size-base);
-  width: var(--salt-size-base);
-}
-
-/* src/pagination/CompactPaginator.css */
-.saltCompactPaginator {
-  flex-wrap: nowrap;
-  display: flex;
-  gap: var(--salt-spacing-100);
-  align-items: center;
-}
-.saltCompactPaginator-arrowButton {
-  --saltButton-width: var(--salt-size-base);
-  --saltButton-height: var(--salt-size-base);
-  --saltButton-padding: var(--salt-spacing-100);
-}
-
-/* src/pagination/GoToInput.css */
-.saltGoToInput.saltFormField {
-  display: flex;
-  flex-direction: row;
-  gap: var(--salt-spacing-100);
-  align-items: baseline;
-  text-wrap: nowrap;
-}
-.saltGoToInput-input {
-  height: var(--salt-size-base);
-  --saltInput-minWidth: unset;
-}
-.saltGoToInput-inputDefaultSize {
-  --saltInput-minWidth: var(--salt-size-base);
-  max-width: var(--salt-size-base);
-  width: var(--salt-size-base);
-}
-
-/* src/pagination/PageButton.css */
-.saltPageButton {
-  --saltButton-minWidth: var(--salt-size-base);
-  --saltButton-fontWeight: var(--salt-text-fontWeight);
-  --saltButton-height: var(--salt-size-base);
-  --saltButton-text-color: var(--salt-content-primary-foreground);
-  --saltButton-background-active: var(--salt-selectable-background-selected);
-  --saltButton-text-color-active: var(--salt-content-primary-foreground);
-}
-.saltPageButton:hover,
-.saltPageButton:focus-visible {
-  --saltButton-background-hover: var(--salt-selectable-background-hover);
-}
-.saltPageButton:disabled {
-  --saltButton-text-color-disabled: var(--salt-content-secondary-foreground);
-  --saltButton-cursor-disabled: var(--salt-editable-cursor-readonly);
-}
-.saltPageButton-selected {
-  --saltButton-background: var(--salt-selectable-background-selected);
-}
-.saltPageButton-selected:focus-visible {
-  --saltButton-background-hover: var(--salt-selectable-background-selected);
-}
-.saltPageButton-fixed {
-  --saltButton-padding: 0;
-}
-
-/* src/pagination/PageRanges.css */
-.saltPageRanges-ellipsis {
-  display: inline-flex;
-  width: var(--salt-size-base);
-  height: var(--salt-size-base);
-  line-height: var(--salt-size-base);
-  justify-content: center;
-}
-
-/* src/pagination/Pagination.css */
-.saltPagination {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-/* src/pagination/Paginator.css */
-.saltPaginator {
-  display: flex;
-  flex-wrap: nowrap;
-}
-.saltPaginator-arrowButton-previous {
-  --saltButton-margin: 0 var(--salt-spacing-100) 0 0;
-}
-.saltPaginator-arrowButton-next {
-  --saltButton-margin: 0 0 0 var(--salt-spacing-100);
+  float: right;
 }
 
 /* src/parent-child-item/ParentChildItem.css */
@@ -2806,29 +2553,6 @@
 .saltQueryInputSearchList-value {
 }
 
-/* src/scrim/Scrim.css */
-.saltScrim {
-  top: 0;
-  left: 0;
-  right: 0;
-  width: 100%;
-  bottom: 0;
-  height: 100%;
-  display: flex;
-  z-index: calc(var(--salt-zIndex-drawer) - 1);
-  position: absolute;
-  align-items: center;
-  justify-content: center;
-  background: var(--saltScrim-background, var(--salt-overlayable-background));
-  -webkit-tap-highlight-color: transparent;
-}
-.saltScrim:focus {
-  outline: none;
-}
-.saltScrim-fixed {
-  position: fixed;
-}
-
 /* src/search-input/SearchInput.css */
 .saltSearchInput .saltInputLegacy-input::-webkit-search-cancel-button {
   display: none;
@@ -4729,4 +4453,4 @@
   margin: calc(var(--salt-size-unit) / 2) 0;
 }
 
-/* src/41bc2559-7199-41be-8e85-b1f19e44903a.css */
+/* src/27e047fc-7972-45b3-8cb5-dc5a2753214f.css */

package/dist-cjs/color-chooser/ColorChooser.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(var(--salt-size-container-spacing) - 2px) !important;\n  width: calc(var(--salt-size-container-spacing) - 2px) !important;\n  border: 1px solid var(--salt-status-negative-foreground);\n  /* RGBA using red-700 */\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  );\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: var(--salt-size-container-spacing);\n  display: contents;\n}\n\n.saltColorChooser-overlayButtonClose {\n  margin: 5px;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
+var css_248z = ".saltColorChooser-overlayButtonSwatch {\n  margin-right: 10px;\n  height: calc(2 * var(--salt-size-unit));\n  width: calc(2 * var(--salt-size-unit));\n}\n\n.saltColorChooser-overlayButtonSwatchWithBorder {\n  border: 0.2px solid var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayButtonSwatchTransparent {\n  height: calc(var(--salt-size-container-spacing) - 2px) !important;\n  width: calc(var(--salt-size-container-spacing) - 2px) !important;\n  border: 1px solid var(--salt-status-negative-foreground);\n  /* RGBA using red-700 */\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  );\n}\n\n.saltColorChooser-overlayButtonText {\n  font-weight: var(--salt-text-fontWeight);\n  font-family: var(--saltButton-fontFamily, var(--salt-text-fontFamily));\n  font-size: var(--salt-text-fontSize);\n  letter-spacing: normal;\n}\n\n.saltColorChooser-overlayButton {\n  background: transparent;\n  text-transform: none;\n  justify-content: flex-start;\n}\n\n.saltColorChooser-overlayButtonHiddenLabel {\n  width: var(--salt-size-container-spacing);\n  display: contents;\n}\n\n.saltColorChooser-defaultButton {\n  float: right;\n  background: transparent;\n  padding: 6px 2px 6px 2px;\n  height: var(--salt-size-stackable);\n}\n\n.saltColorChooser-defaultButton {\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n\n.saltColorChooser-overlayContent {\n  max-width: 100%;\n}\n\n.saltColorChooser-refreshIcon {\n  padding-right: 5px;\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=ColorChooser.css.js.map

package/dist-cjs/color-chooser/ColorChooser.js

@@ -6,7 +6,8 @@ var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var Overlay = require('../overlay/Overlay.js');
-var useOverlay = require('../overlay/useOverlay.js');
+var OverlayTrigger = require('../overlay/OverlayTrigger.js');
+var OverlayPanel = require('../overlay/OverlayPanel.js');
 var core = require('@salt-ds/core');
 var icons = require('@salt-ds/icons');
 var colorUtils = require('./color-utils.js');
@@ -18,6 +19,7 @@ var createTabsMapping = require('./createTabsMapping.js');
 var window = require('@salt-ds/window');
 var styles = require('@salt-ds/styles');
 var ColorChooser$1 = require('./ColorChooser.css.js');
+var OverlayContext = require('../overlay/OverlayContext.js');
 
 const withBaseName = core.makePrefixer("saltColorChooser");
 function getActiveTab(hexValue, tabs, saltColorOverrides) {
@@ -94,72 +96,67 @@ const ColorChooser = ({
   const onTabClick = (index) => {
     setActiveTab(index);
   };
-  const { getTriggerProps, getOverlayProps } = useOverlay.useOverlay({
+  const OverlayContent = () => {
+    const { id } = OverlayContext.useOverlayContext();
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      id: `${id}-content`,
+      className: clsx.clsx(withBaseName("overlayContent")),
+      "data-testid": "overlay-content",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(core.Button, {
+          "data-testid": "default-button",
+          variant: "secondary",
+          className: clsx.clsx(withBaseName("defaultButton")),
+          onClick: onDefaultSelected,
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(icons.RefreshIcon, {
+              className: clsx.clsx(withBaseName("refreshIcon"))
+            }),
+            "Default"
+          ]
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(DictTabs.DictTabs, {
+          tabs: tabsMapping,
+          hexValue: color == null ? void 0 : color.hex,
+          onTabClick,
+          activeTab
+        })
+      ]
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(Overlay.Overlay, {
     placement: "bottom",
-    open,
-    onOpenChange: handleOpenChange
-  });
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    "data-testid": "color-chooser-overlay",
     children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(core.Button, {
-        ...getTriggerProps({
+      /* @__PURE__ */ jsxRuntime.jsx(OverlayTrigger.OverlayTrigger, {
+        children: /* @__PURE__ */ jsxRuntime.jsxs(core.Button, {
           className: clsx.clsx(withBaseName("overlayButton"), {
             [withBaseName("overlayButtonHiddenLabel")]: hideLabel
           }),
           "data-testid": "color-chooser-overlay-button",
           disabled: readOnly,
-          ...buttonProps
-        }),
-        children: [
-          color && /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: clsx.clsx(withBaseName("overlayButtonSwatch"), {
-              [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
-              [withBaseName("overlayButtonSwatchTransparent")]: colorUtils.isTransparent(
-                color == null ? void 0 : color.hex
-              )
-            }),
-            style: {
-              backgroundColor: color == null ? void 0 : color.hex
-            }
-          }),
-          !hideLabel && /* @__PURE__ */ jsxRuntime.jsx("div", {
-            className: withBaseName("overlayButtonText"),
-            children: (_c = displayColorName != null ? displayColorName : placeholder) != null ? _c : "No color selected"
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxRuntime.jsx(Overlay.Overlay, {
-        ...getOverlayProps({
-          adaExceptions: {
-            showClose: false
-          },
-          "data-testid": "color-chooser-overlay",
-          className: clsx.clsx(withBaseName("overlayButtonClose"))
-        }),
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", {
-          className: clsx.clsx(withBaseName("overlayContent")),
-          "data-testid": "overlay-content",
+          ...buttonProps,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(core.Button, {
-              "data-testid": "default-button",
-              variant: "secondary",
-              className: clsx.clsx(withBaseName("defaultButton")),
-              onClick: onDefaultSelected,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(icons.RefreshIcon, {
-                  className: clsx.clsx(withBaseName("refreshIcon"))
-                }),
-                "Default"
-              ]
+            color && /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: clsx.clsx(withBaseName("overlayButtonSwatch"), {
+                [withBaseName("overlayButtonSwatchWithBorder")]: color == null ? void 0 : color.hex.startsWith("#ffffff"),
+                [withBaseName("overlayButtonSwatchTransparent")]: colorUtils.isTransparent(
+                  color == null ? void 0 : color.hex
+                )
+              }),
+              style: {
+                backgroundColor: color == null ? void 0 : color.hex
+              }
             }),
-            /* @__PURE__ */ jsxRuntime.jsx(DictTabs.DictTabs, {
-              tabs: tabsMapping,
-              hexValue: color == null ? void 0 : color.hex,
-              onTabClick,
-              activeTab
+            !hideLabel && /* @__PURE__ */ jsxRuntime.jsx("div", {
+              className: withBaseName("overlayButtonText"),
+              children: (_c = displayColorName != null ? displayColorName : placeholder) != null ? _c : "No color selected"
             })
           ]
         })
+      }),
+      /* @__PURE__ */ jsxRuntime.jsx(OverlayPanel.OverlayPanel, {
+        children: /* @__PURE__ */ jsxRuntime.jsx(OverlayContent, {})
       })
     ]
   });

package/dist-cjs/color-chooser/ColorChooser.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Overlay, useOverlay } from \"../overlay\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { saltColorMap } from \"./colorMap\";\nimport { ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n  hexValue: string | undefined,\n  tabs: ColorChooserTabs,\n  saltColorOverrides: Record<string, string> | undefined\n): number {\n  if (tabs.Swatches && tabs[\"Color Picker\"]) {\n    const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n    const colors = saltColorOverrides ?? saltColorMap;\n    // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n    if (\n      hexNoAlpha &&\n      !Object.keys(colors).find(\n        (key: string) =>\n          convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n          hexNoAlpha?.toLowerCase()\n      )\n    ) {\n      return 1;\n    }\n  }\n  return 0;\n}\n\nexport interface ColorChooserProps {\n  color: Color | undefined;\n  defaultAlpha?: number;\n  disableAlphaChooser?: boolean;\n  displayHexOnly?: boolean;\n  hideLabel?: boolean;\n  onClear: () => void; // called when user clicks \"default\" button\n  onSelect: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    event?: ChangeEvent\n  ) => void;\n  placeholder?: string;\n  buttonProps?: Partial<ButtonProps>;\n  saltColorOverrides?: Record<string, string>;\n  showSwatches?: boolean;\n  showColorPicker?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n  onClear,\n  onSelect,\n  color,\n  showSwatches = true,\n  showColorPicker = true,\n  defaultAlpha = 1,\n  disableAlphaChooser = false,\n  hideLabel = false,\n  placeholder,\n  buttonProps,\n  saltColorOverrides,\n  readOnly = false,\n  displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-chooser\",\n    css: colorChooserCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n\n  const allColors: string[][] = saltColorOverrides\n    ? getColorPalettes(saltColorOverrides)\n    : getColorPalettes();\n  const displayColorName = displayHexOnly\n    ? getHexValue(color?.hex, disableAlphaChooser)\n    : getColorNameByHexValue(\n        color?.hex,\n        disableAlphaChooser,\n        saltColorOverrides\n      );\n\n  const handleOpenChange = (open: boolean) => setOpen(open);\n\n  const alphaForTabs = isTransparent(color?.hex)\n    ? defaultAlpha\n    : color?.rgba?.a ?? defaultAlpha;\n\n  const tabsMapping = createTabsMapping({\n    swatches: showSwatches,\n    colorPicker: showColorPicker,\n    disableAlphaChooser,\n    allColors,\n    color,\n    alpha: alphaForTabs,\n    handleColorChange: onSelect,\n    displayColorName,\n    placeholder,\n    onDialogClosed: () => {\n      setOpen(false);\n    },\n  });\n\n  const [activeTab, setActiveTab] = useState<number>(\n    getActiveTab(color?.hex, tabsMapping, saltColorOverrides)\n  );\n  const onDefaultSelected = (): void => {\n    if (activeTab === 0 && showSwatches) {\n      onClear();\n      handleOpenChange(false);\n    } else {\n      onClear();\n    }\n  };\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const { getTriggerProps, getOverlayProps } = useOverlay({\n    placement: \"bottom\",\n    open,\n    onOpenChange: handleOpenChange,\n  });\n\n  return (\n    <>\n      <Button\n        {...getTriggerProps<typeof Button>({\n          className: clsx(withBaseName(\"overlayButton\"), {\n            [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n          }),\n          // @ts-ignore\n          \"data-testid\": \"color-chooser-overlay-button\",\n          disabled: readOnly,\n          ...buttonProps,\n        })}\n      >\n        {color && (\n          <div\n            className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n              [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n                color?.hex.startsWith(\"#ffffff\"),\n              [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n                color?.hex\n              ),\n            })}\n            style={{\n              backgroundColor: color?.hex,\n            }}\n          />\n        )}\n        {!hideLabel && (\n          <div className={withBaseName(\"overlayButtonText\")}>\n            {displayColorName ?? placeholder ?? \"No color selected\"}\n          </div>\n        )}\n      </Button>\n      <Overlay\n        {...getOverlayProps({\n          adaExceptions: {\n            showClose: false,\n          },\n          // @ts-ignore\n          \"data-testid\": \"color-chooser-overlay\",\n          className: clsx(withBaseName(\"overlayButtonClose\")),\n        })}\n      >\n        <div\n          className={clsx(withBaseName(\"overlayContent\"))}\n          data-testid=\"overlay-content\"\n        >\n          <Button\n            data-testid=\"default-button\"\n            variant=\"secondary\"\n            className={clsx(withBaseName(\"defaultButton\"))}\n            onClick={onDefaultSelected}\n          >\n            <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n            Default\n          </Button>\n          <DictTabs\n            tabs={tabsMapping}\n            hexValue={color?.hex}\n            onTabClick={onTabClick}\n            activeTab={activeTab}\n          />\n        </div>\n      </Overlay>\n    </>\n  );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","useOverlay","jsxs","Fragment","Button","clsx","jsx","Overlay","RefreshIcon","DictTabs"],"mappings":"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"}
+{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport { Overlay, OverlayPanel, OverlayTrigger } from \"../overlay\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { RefreshIcon } from \"@salt-ds/icons\";\nimport { Color } from \"./Color\";\nimport { isTransparent } from \"./color-utils\";\n\nimport {\n  convertColorMapValueToHex,\n  getColorNameByHexValue,\n  getHexValue,\n  hexValueWithoutAlpha,\n} from \"./ColorHelpers\";\nimport { saltColorMap } from \"./colorMap\";\nimport { ColorChooserTabs, DictTabs } from \"./DictTabs\";\nimport { getColorPalettes } from \"./GetColorPalettes\";\nimport { createTabsMapping } from \"./createTabsMapping\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport colorChooserCss from \"./ColorChooser.css\";\nimport { useOverlayContext } from \"../overlay/OverlayContext\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\nfunction getActiveTab(\n  hexValue: string | undefined,\n  tabs: ColorChooserTabs,\n  saltColorOverrides: Record<string, string> | undefined\n): number {\n  if (tabs.Swatches && tabs[\"Color Picker\"]) {\n    const hexNoAlpha: string | undefined = hexValueWithoutAlpha(hexValue);\n    const colors = saltColorOverrides ?? saltColorMap;\n    // if hexNoAlpha is a Salt color or null/undefined then set the active tab as Swatches\n    if (\n      hexNoAlpha &&\n      !Object.keys(colors).find(\n        (key: string) =>\n          convertColorMapValueToHex(colors[key])?.toLowerCase() ===\n          hexNoAlpha?.toLowerCase()\n      )\n    ) {\n      return 1;\n    }\n  }\n  return 0;\n}\n\nexport interface ColorChooserProps {\n  color: Color | undefined;\n  defaultAlpha?: number;\n  disableAlphaChooser?: boolean;\n  displayHexOnly?: boolean;\n  hideLabel?: boolean;\n  onClear: () => void; // called when user clicks \"default\" button\n  onSelect: (\n    color: Color | undefined,\n    finalSelection: boolean,\n    event?: ChangeEvent\n  ) => void;\n  placeholder?: string;\n  buttonProps?: Partial<ButtonProps>;\n  saltColorOverrides?: Record<string, string>;\n  showSwatches?: boolean;\n  showColorPicker?: boolean;\n  readOnly?: boolean;\n}\n\nexport const ColorChooser = ({\n  onClear,\n  onSelect,\n  color,\n  showSwatches = true,\n  showColorPicker = true,\n  defaultAlpha = 1,\n  disableAlphaChooser = false,\n  hideLabel = false,\n  placeholder,\n  buttonProps,\n  saltColorOverrides,\n  readOnly = false,\n  displayHexOnly = false,\n}: ColorChooserProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-color-chooser\",\n    css: colorChooserCss,\n    window: targetWindow,\n  });\n\n  const [open, setOpen] = useState(false);\n\n  const allColors: string[][] = saltColorOverrides\n    ? getColorPalettes(saltColorOverrides)\n    : getColorPalettes();\n  const displayColorName = displayHexOnly\n    ? getHexValue(color?.hex, disableAlphaChooser)\n    : getColorNameByHexValue(\n        color?.hex,\n        disableAlphaChooser,\n        saltColorOverrides\n      );\n\n  const handleOpenChange = (open: boolean) => setOpen(open);\n\n  const alphaForTabs = isTransparent(color?.hex)\n    ? defaultAlpha\n    : color?.rgba?.a ?? defaultAlpha;\n\n  const tabsMapping = createTabsMapping({\n    swatches: showSwatches,\n    colorPicker: showColorPicker,\n    disableAlphaChooser,\n    allColors,\n    color,\n    alpha: alphaForTabs,\n    handleColorChange: onSelect,\n    displayColorName,\n    placeholder,\n    onDialogClosed: () => {\n      setOpen(false);\n    },\n  });\n\n  const [activeTab, setActiveTab] = useState<number>(\n    getActiveTab(color?.hex, tabsMapping, saltColorOverrides)\n  );\n  const onDefaultSelected = (): void => {\n    if (activeTab === 0 && showSwatches) {\n      onClear();\n      handleOpenChange(false);\n    } else {\n      onClear();\n    }\n  };\n\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const OverlayContent = () => {\n    const { id } = useOverlayContext();\n\n    return (\n      <div\n        id={`${id}-content`}\n        className={clsx(withBaseName(\"overlayContent\"))}\n        data-testid=\"overlay-content\"\n      >\n        <Button\n          data-testid=\"default-button\"\n          variant=\"secondary\"\n          className={clsx(withBaseName(\"defaultButton\"))}\n          onClick={onDefaultSelected}\n        >\n          <RefreshIcon className={clsx(withBaseName(\"refreshIcon\"))} />\n          Default\n        </Button>\n        <DictTabs\n          tabs={tabsMapping}\n          hexValue={color?.hex}\n          onTabClick={onTabClick}\n          activeTab={activeTab}\n        />\n      </div>\n    );\n  };\n\n  return (\n    <Overlay placement=\"bottom\" data-testid=\"color-chooser-overlay\">\n      <OverlayTrigger>\n        <Button\n          className={clsx(withBaseName(\"overlayButton\"), {\n            [withBaseName(\"overlayButtonHiddenLabel\")]: hideLabel,\n          })}\n          // @ts-ignore\n          data-testid=\"color-chooser-overlay-button\"\n          disabled={readOnly}\n          {...buttonProps}\n        >\n          {color && (\n            <div\n              className={clsx(withBaseName(\"overlayButtonSwatch\"), {\n                [withBaseName(\"overlayButtonSwatchWithBorder\")]:\n                  color?.hex.startsWith(\"#ffffff\"),\n                [withBaseName(\"overlayButtonSwatchTransparent\")]: isTransparent(\n                  color?.hex\n                ),\n              })}\n              style={{\n                backgroundColor: color?.hex,\n              }}\n            />\n          )}\n          {!hideLabel && (\n            <div className={withBaseName(\"overlayButtonText\")}>\n              {displayColorName ?? placeholder ?? \"No color selected\"}\n            </div>\n          )}\n        </Button>\n      </OverlayTrigger>\n      <OverlayPanel>\n        <OverlayContent />\n      </OverlayPanel>\n    </Overlay>\n  );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","useOverlayContext","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel"],"mappings":"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"}

package/dist-cjs/index.js

@@ -75,9 +75,6 @@ var Dropdown = require('./dropdown/Dropdown.js');
 var useDropdownBase = require('./dropdown/useDropdownBase.js');
 var DropdownNext = require('./dropdown-next/DropdownNext.js');
 var EditableLabel = require('./editable-label/EditableLabel.js');
-var FileDropZone = require('./file-drop-zone/FileDropZone.js');
-var FileDropZoneIcon = require('./file-drop-zone/FileDropZoneIcon.js');
-var FileDropZoneTrigger = require('./file-drop-zone/FileDropZoneTrigger.js');
 var FormFieldLegacy = require('./form-field-legacy/FormFieldLegacy.js');
 var FormLabel = require('./form-field-legacy/FormLabel.js');
 var FormFieldLegacyContext = require('./form-field-context-legacy/FormFieldLegacyContext.js');
@@ -103,16 +100,11 @@ var MenuButton = require('./menu-button/MenuButton.js');
 var Metric = require('./metric/Metric.js');
 var MetricHeader = require('./metric/MetricHeader.js');
 var MetricContent = require('./metric/MetricContent.js');
-var NavigationItem = require('./navigation-item/NavigationItem.js');
 var Option = require('./option/Option.js');
 var OptionGroup = require('./option/OptionGroup.js');
 var Overlay = require('./overlay/Overlay.js');
-var useOverlay = require('./overlay/useOverlay.js');
-var Pagination = require('./pagination/Pagination.js');
-var Paginator = require('./pagination/Paginator.js');
-var CompactInput = require('./pagination/CompactInput.js');
-var CompactPaginator = require('./pagination/CompactPaginator.js');
-var GoToInput = require('./pagination/GoToInput.js');
+var OverlayTrigger = require('./overlay/OverlayTrigger.js');
+var OverlayPanel = require('./overlay/OverlayPanel.js');
 var ParentChildItem = require('./parent-child-item/ParentChildItem.js');
 var ParentChildLayout = require('./parent-child-layout/ParentChildLayout.js');
 var Portal = require('./portal/Portal.js');
@@ -130,7 +122,6 @@ var useOverflowLayout = require('./responsive/useOverflowLayout.js');
 var useWidth = require('./responsive/useWidth.js');
 var overflowUtils = require('./responsive/overflowUtils.js');
 var utils = require('./responsive/utils.js');
-var Scrim = require('./scrim/Scrim.js');
 var SearchInput = require('./search-input/SearchInput.js');
 var SkipLink = require('./skip-link/SkipLink.js');
 var SkipLinks = require('./skip-link/SkipLinks.js');
@@ -240,9 +231,6 @@ exports.Dropdown = Dropdown.Dropdown;
 exports.useDropdownBase = useDropdownBase.useDropdownBase;
 exports.DropdownNext = DropdownNext.DropdownNext;
 exports.EditableLabel = EditableLabel.EditableLabel;
-exports.FileDropZone = FileDropZone.FileDropZone;
-exports.FileDropZoneIcon = FileDropZoneIcon.FileDropZoneIcon;
-exports.FileDropZoneTrigger = FileDropZoneTrigger.FileDropZoneTrigger;
 exports.FormField = FormFieldLegacy.FormFieldLegacy;
 exports.FormLabel = FormLabel.FormLabel;
 exports.FormFieldLegacyContext = FormFieldLegacyContext.FormFieldLegacyContext;
@@ -270,16 +258,11 @@ exports.MenuButton = MenuButton.MenuButton;
 exports.Metric = Metric.Metric;
 exports.MetricHeader = MetricHeader.MetricHeader;
 exports.MetricContent = MetricContent.MetricContent;
-exports.NavigationItem = NavigationItem.NavigationItem;
 exports.Option = Option.Option;
 exports.OptionGroup = OptionGroup.OptionGroup;
 exports.Overlay = Overlay.Overlay;
-exports.useOverlay = useOverlay.useOverlay;
-exports.Pagination = Pagination.Pagination;
-exports.Paginator = Paginator.Paginator;
-exports.CompactInput = CompactInput.CompactInput;
-exports.CompactPaginator = CompactPaginator.CompactPaginator;
-exports.GoToInput = GoToInput.GoToInput;
+exports.OverlayTrigger = OverlayTrigger.OverlayTrigger;
+exports.OverlayPanel = OverlayPanel.OverlayPanel;
 exports.ParentChildItem = ParentChildItem.ParentChildItem;
 exports.ParentChildLayout = ParentChildLayout.ParentChildLayout;
 exports.Portal = Portal.Portal;
@@ -322,7 +305,6 @@ exports.notOverflowed = overflowUtils.notOverflowed;
 exports.popNextItemByPriority = overflowUtils.popNextItemByPriority;
 exports.isResponsiveAttribute = utils.isResponsiveAttribute;
 exports.liftResponsivePropsToFormField = utils.liftResponsivePropsToFormField;
-exports.Scrim = Scrim.Scrim;
 exports.SearchInput = SearchInput.SearchInput;
 exports.SkipLink = SkipLink.SkipLink;
 exports.SkipLinks = SkipLinks.SkipLinks;