@salt-ds/lab 1.0.0-alpha.4 → 1.0.0-alpha.40

package/dist-cjs/cascading-menu/CascadingMenuList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CascadingMenuList.js","sources":["../src/cascading-menu/CascadingMenuList.tsx"],"sourcesContent":["import {\n  useFloatingUI,\n  UseFloatingUIProps,\n  useForkRef,\n  useIsomorphicLayoutEffect,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { forwardRef, useCallback, useEffect, useMemo, useState } from \"react\";\nimport { Portal } from \"../portal\";\nimport { List, ListProps } from \"../list-deprecated\";\n\nimport { DefaultMenuItem, MenuItemProps } from \"./CascadingMenuItem\";\nimport { CascadingMenuAction } from \"./internal/CascadingMenuAction\";\nimport { getKeyDownHandlers } from \"./internal/keydownHandlers\";\nimport {\n  getHeight,\n  getMaxHeight,\n  screenBounds,\n} from \"./internal/menuPositioning\";\nimport { hasIcon, hasSubMenu, menuState } from \"./internal/stateUtils\";\nimport { useMouseHandlers } from \"./internal/useMouseHandlers\";\nimport { refsManager } from \"./internal/useRefsManager\";\nimport { stateChangeTypes } from \"./stateChangeTypes\";\nimport { useWindow as usePortalWindow } from \"../window\";\n\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\n\nimport cascadingMenuListCss from \"./CascadingMenuList.css\";\n\nexport interface CascadingMenuListProps {\n  className?: string;\n  data: menuState;\n  delay?: number;\n  disableMouseOutInteractions?: boolean;\n  // TODO any\n  dispatch: (action: any) => void;\n  getBoundingClientRect?: (element: HTMLElement) => DOMRect;\n  getScreenBounds?: () => screenBounds;\n  height?: number;\n  highlightedItemIndex: number | null;\n  isChildMenuOpen: boolean;\n  itemToString: MenuItemProps[\"itemToString\"];\n  isNavigatingWithKeyboard: boolean;\n  isRoot: boolean;\n  maxWidth?: ListProps[\"maxWidth\"];\n  menuId: string;\n  menuTriggerRef: HTMLElement | null;\n  minWidth?: ListProps[\"minWidth\"];\n  onItemClick?: MenuItemProps[\"onItemClick\"];\n  parentElement?: HTMLElement | null;\n  refsManager: refsManager;\n  rootPlacement?: UseFloatingUIProps[\"placement\"];\n  rootPlacementOffset?: string;\n  rowHeight?: number;\n  setIsNavigatingWithKeyboard: (value: boolean) => void;\n  tooltipEnterDelay: number;\n  tooltipLeaveDelay: number;\n}\n\nexport const CascadingMenuList = forwardRef<\n  HTMLDivElement,\n  CascadingMenuListProps\n>(function CascadingMenuList(props, ref) {\n  const {\n    className,\n    maxWidth,\n    minWidth,\n    itemToString,\n    onItemClick,\n    refsManager,\n    dispatch,\n    rowHeight: rowHeightProp,\n    isNavigatingWithKeyboard,\n    data,\n    tooltipEnterDelay,\n    tooltipLeaveDelay,\n    height: heightProp,\n    isChildMenuOpen,\n    isRoot,\n    highlightedItemIndex,\n    menuId,\n    parentElement = null,\n    getScreenBounds,\n    disableMouseOutInteractions,\n    rootPlacementOffset,\n    rootPlacement = \"bottom-start\",\n  } = props;\n\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-cascading-menu-list\",\n    css: cascadingMenuListCss,\n    window: targetWindow,\n  });\n\n  const baseClass = \"saltCascadingMenuList\";\n\n  const [menuRef, setInternalMenuRef] = useState<HTMLElement | null>(null);\n  const setMenuRef = useCallback(\n    (node: HTMLElement) => {\n      refsManager.set(menuId, node);\n    },\n    [refsManager, menuId]\n  );\n\n  // TODO removed useCharacteristic here\n  const sizeStackable = 36;\n  const defaultRowHeight = sizeStackable;\n\n  // TODO removed useCharacteristic here\n  const spacing = 8;\n\n  const isMenuActiveState = useState(true);\n  const [isMenuActive, setIsMenuActive] = isMenuActiveState;\n  const listRef = useForkRef<HTMLElement>(ref, setInternalMenuRef);\n  const handleRef = useForkRef(setMenuRef, listRef);\n\n  useEffect(() => {\n    if (menuRef && menuRef.focus) {\n      // timeout prevents scrolling issue by waiting a split second\n      // and menu should be correctly positioned by then and\n      // focusing popper content offscreen will not scroll page\n      // it would be better to maybe use popper onUpdate callback\n      // or some kind of polling mechanism to confirm placement is\n      // correct before focus call\n      const id = setTimeout(() => {\n        menuRef.focus();\n      });\n      return () => {\n        clearTimeout(id);\n      };\n    }\n  }, [menuRef, rootPlacementOffset]);\n\n  const handleKeyDown = getKeyDownHandlers(props, setIsMenuActive);\n\n  const onFocusHandler = useCallback(() => {\n    setIsMenuActive(true);\n    // When navigating via keyboard on open highlight first time in the list\n    if (isNavigatingWithKeyboard) {\n      if (!highlightedItemIndex) {\n        dispatch({\n          type: CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,\n          cause: stateChangeTypes.KEYBOARD_NAV_AUTO_FOCUS,\n          targetId: menuId,\n          highlightedItemIndex: 0,\n        });\n      }\n    }\n  }, [\n    setIsMenuActive,\n    isNavigatingWithKeyboard,\n    highlightedItemIndex,\n    dispatch,\n    menuId,\n  ]);\n\n  const [handleMouseMove, handleMouseOut] = useMouseHandlers(\n    props,\n    isMenuActiveState,\n    menuRef\n  );\n\n  const hasEndAdornment = useMemo(\n    () => data.menuItems.some(hasSubMenu),\n    [data]\n  );\n  const hasStartAdornment = useMemo(() => data.menuItems.some(hasIcon), [data]);\n  const rowHeight = rowHeightProp != null ? rowHeightProp : defaultRowHeight;\n  const maxHeight = getMaxHeight(heightProp, spacing, getScreenBounds);\n  const calculatedMenuHeight = rowHeight * data.menuItems.length;\n  const menuHeight = getHeight(heightProp, calculatedMenuHeight, maxHeight);\n  const hasScrollbar = menuHeight >= maxHeight;\n\n  // menu container size is 2px larger than the list to include the border\n  const menuContainerHeight = menuHeight + 2;\n  const Window = usePortalWindow();\n  const { reference, floating, x, y, strategy } = useFloatingUI({\n    placement: isRoot ? rootPlacement : \"right-start\",\n  });\n  useIsomorphicLayoutEffect(() => {\n    if (parentElement) {\n      reference(\n        isRoot\n          ? parentElement\n          : parentElement.querySelector(\n              `#${\n                parentElement.getAttribute(\"aria-activedescendant\") as string\n              }`\n            )\n      );\n    }\n  }, [reference, isRoot, parentElement]);\n\n  if (parentElement === null) {\n    return null;\n  }\n\n  return (\n    <Portal>\n      <Window\n        className={`${baseClass}-popper`}\n        id={menuId}\n        style={{\n          top: y ?? 0,\n          left: x ?? 0,\n          position: strategy,\n        }}\n        ref={floating}\n      >\n        <List\n          className={clsx(baseClass, className)}\n          height={menuContainerHeight}\n          highlightedIndex={\n            highlightedItemIndex === null ? -1 : highlightedItemIndex\n          }\n          id={menuId}\n          itemHeight={rowHeight}\n          itemToString={itemToString}\n          key={menuId}\n          listRef={handleRef}\n          maxWidth={maxWidth}\n          minWidth={minWidth}\n          onFocus={onFocusHandler}\n          onKeyDown={handleKeyDown}\n          onMouseOut={disableMouseOutInteractions ? undefined : handleMouseOut}\n          role=\"menu\"\n          width=\"auto\"\n        >\n          {data.menuItems.map((menuItem, idx) => {\n            const isInteracted = highlightedItemIndex === idx;\n            return (\n              <DefaultMenuItem\n                blurSelected={!isMenuActive && isInteracted}\n                hasEndAdornment={hasEndAdornment}\n                hasScrollbar={hasScrollbar}\n                hasStartAdornment={hasStartAdornment}\n                hasSubMenu={hasSubMenu(menuItem)}\n                isChildMenuOpen={isChildMenuOpen}\n                isInteracted={isInteracted}\n                isNavigatingWithKeyboard={isNavigatingWithKeyboard}\n                itemToString={itemToString}\n                key={idx}\n                onItemClick={onItemClick}\n                onMouseMove={() => handleMouseMove(idx)}\n                sourceItem={menuItem}\n                tooltipEnterDelay={tooltipEnterDelay}\n                tooltipLeaveDelay={tooltipLeaveDelay}\n              />\n            );\n          })}\n        </List>\n      </Window>\n    </Portal>\n  );\n});\n"],"names":["forwardRef","CascadingMenuList","refsManager","useWindow","useComponentCssInjection","cascadingMenuListCss","useState","useCallback","useForkRef","useEffect","getKeyDownHandlers","CascadingMenuAction","stateChangeTypes","useMouseHandlers","useMemo","hasSubMenu","hasIcon","getMaxHeight","getHeight","usePortalWindow","useFloatingUI","useIsomorphicLayoutEffect","jsx","Portal","List","clsx","DefaultMenuItem"],"mappings":"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"}

package/dist-cjs/cascading-menu/internal/useClickAway.js

@@ -0,0 +1,64 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useEventCallback = require('../../utils/useEventCallback.js');
+require('@salt-ds/core');
+var useMountedRef = require('./useMountedRef.js');
+
+function eventComingFromNodes(nodes, event) {
+  return nodes.some(
+    (node) => node != null && (node === event.target || node.contains(event.target))
+  );
+}
+const useClickAway = (nodes, containingDocument, onClickAway, onClick = () => void 0, mouseEvent = "mouseup") => {
+  const mountedRef = useMountedRef.useMountedRef();
+  const handleClickAway = useEventCallback.useEventCallback((event) => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (!mountedRef.current) {
+      return;
+    }
+    onClick(event);
+    if (!nodes) {
+      return;
+    }
+    const resolvedNodes = typeof nodes === "function" ? nodes() : nodes;
+    const isEventComingFromNodes = eventComingFromNodes(resolvedNodes, event);
+    const ownerDocumentNode = resolvedNodes.find(
+      (node) => node ? node.ownerDocument : false
+    );
+    const doc = containingDocument || ownerDocumentNode && ownerDocumentNode.ownerDocument;
+    if (doc.documentElement && doc.documentElement.contains(event.target) && !isEventComingFromNodes) {
+      onClickAway(event);
+    }
+  });
+  React.useEffect(() => {
+    var _a;
+    if (containingDocument) {
+      containingDocument.addEventListener(
+        mouseEvent,
+        handleClickAway
+      );
+      (_a = containingDocument.defaultView) == null ? void 0 : _a.addEventListener("blur", onClickAway);
+    }
+    return () => {
+      var _a2;
+      if (containingDocument) {
+        containingDocument.removeEventListener(
+          mouseEvent,
+          handleClickAway
+        );
+        (_a2 = containingDocument.defaultView) == null ? void 0 : _a2.removeEventListener(
+          "blur",
+          onClickAway
+        );
+      }
+    };
+  }, [handleClickAway, mouseEvent, containingDocument, onClickAway]);
+};
+
+exports.useClickAway = useClickAway;
+//# sourceMappingURL=useClickAway.js.map

package/dist-cjs/cascading-menu/internal/useClickAway.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useClickAway.js","sources":["../src/cascading-menu/internal/useClickAway.ts"],"sourcesContent":["import { useEffect } from \"react\";\nimport { useEventCallback } from \"../../utils\";\n\nimport { useMountedRef } from \"./useMountedRef\";\n\nfunction eventComingFromNodes(nodes: HTMLElement[], event: MouseEvent) {\n  return nodes.some(\n    (node) =>\n      node != null &&\n      (node === event.target || node.contains(event.target as HTMLElement))\n  );\n}\n\ntype clickAwayHook = (\n  nodes: HTMLElement[] | (() => HTMLElement[]) | null,\n  containingDocument: Document,\n  onClickAway: (event: FocusEvent) => void,\n  onClick: (event: MouseEvent) => void,\n  mouseEvent?: keyof DocumentEventMap\n) => void;\n\nexport const useClickAway: clickAwayHook = (\n  nodes,\n  containingDocument,\n  onClickAway,\n  onClick = () => undefined,\n  mouseEvent = \"mouseup\"\n) => {\n  //TODO can we get rid of this if it's just for IE11 ?\n  const mountedRef = useMountedRef();\n\n  const handleClickAway = useEventCallback((event: MouseEvent) => {\n    // Ignore events that have been `event.preventDefault()` marked.\n    if (event.defaultPrevented) {\n      return;\n    }\n\n    // IE 11 support, which trigger the handleClickAway even after the unbind\n    if (!mountedRef.current) {\n      return;\n    }\n\n    onClick(event);\n\n    if (!nodes) {\n      return;\n    }\n\n    const resolvedNodes = typeof nodes === \"function\" ? nodes() : nodes;\n    const isEventComingFromNodes = eventComingFromNodes(resolvedNodes, event);\n\n    const ownerDocumentNode = resolvedNodes.find((node) =>\n      // node could be null, e.g. left click on surrounding area of context menu examples\n      node ? node.ownerDocument : false\n    );\n    const doc =\n      containingDocument ||\n      (ownerDocumentNode && ownerDocumentNode.ownerDocument);\n\n    if (\n      doc.documentElement &&\n      doc.documentElement.contains(event.target as HTMLElement) &&\n      !isEventComingFromNodes\n    ) {\n      onClickAway(event);\n    }\n  });\n\n  useEffect(() => {\n    if (containingDocument) {\n      containingDocument.addEventListener(\n        mouseEvent,\n        handleClickAway as EventListener\n      );\n      containingDocument.defaultView?.addEventListener(\"blur\", onClickAway);\n    }\n    return () => {\n      if (containingDocument) {\n        containingDocument.removeEventListener(\n          mouseEvent,\n          handleClickAway as EventListener\n        );\n        containingDocument.defaultView?.removeEventListener(\n          \"blur\",\n          onClickAway\n        );\n      }\n    };\n  }, [handleClickAway, mouseEvent, containingDocument, onClickAway]);\n};\n"],"names":["useMountedRef","useEventCallback","useEffect","_a"],"mappings":";;;;;;;;;AAKA,SAAS,oBAAA,CAAqB,OAAsB,KAAmB,EAAA;AACrE,EAAA,OAAO,KAAM,CAAA,IAAA;AAAA,IACX,CAAC,IACC,KAAA,IAAA,IAAQ,IACP,KAAA,IAAA,KAAS,MAAM,MAAU,IAAA,IAAA,CAAK,QAAS,CAAA,KAAA,CAAM,MAAqB,CAAA,CAAA;AAAA,GACvE,CAAA;AACF,CAAA;AAUa,MAAA,YAAA,GAA8B,CACzC,KACA,EAAA,kBAAA,EACA,aACA,OAAU,GAAA,MAAM,KAChB,CAAA,EAAA,UAAA,GAAa,SACV,KAAA;AAEH,EAAA,MAAM,aAAaA,2BAAc,EAAA,CAAA;AAEjC,EAAM,MAAA,eAAA,GAAkBC,iCAAiB,CAAA,CAAC,KAAsB,KAAA;AAE9D,IAAA,IAAI,MAAM,gBAAkB,EAAA;AAC1B,MAAA,OAAA;AAAA,KACF;AAGA,IAAI,IAAA,CAAC,WAAW,OAAS,EAAA;AACvB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,OAAA,CAAQ,KAAK,CAAA,CAAA;AAEb,IAAA,IAAI,CAAC,KAAO,EAAA;AACV,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,aAAgB,GAAA,OAAO,KAAU,KAAA,UAAA,GAAa,OAAU,GAAA,KAAA,CAAA;AAC9D,IAAM,MAAA,sBAAA,GAAyB,oBAAqB,CAAA,aAAA,EAAe,KAAK,CAAA,CAAA;AAExE,IAAA,MAAM,oBAAoB,aAAc,CAAA,IAAA;AAAA,MAAK,CAAC,IAAA,KAE5C,IAAO,GAAA,IAAA,CAAK,aAAgB,GAAA,KAAA;AAAA,KAC9B,CAAA;AACA,IAAM,MAAA,GAAA,GACJ,kBACC,IAAA,iBAAA,IAAqB,iBAAkB,CAAA,aAAA,CAAA;AAE1C,IACE,IAAA,GAAA,CAAI,mBACJ,GAAI,CAAA,eAAA,CAAgB,SAAS,KAAM,CAAA,MAAqB,CACxD,IAAA,CAAC,sBACD,EAAA;AACA,MAAA,WAAA,CAAY,KAAK,CAAA,CAAA;AAAA,KACnB;AAAA,GACD,CAAA,CAAA;AAED,EAAAC,eAAA,CAAU,MAAM;AApElB,IAAA,IAAA,EAAA,CAAA;AAqEI,IAAA,IAAI,kBAAoB,EAAA;AACtB,MAAmB,kBAAA,CAAA,gBAAA;AAAA,QACjB,UAAA;AAAA,QACA,eAAA;AAAA,OACF,CAAA;AACA,MAAmB,CAAA,EAAA,GAAA,kBAAA,CAAA,WAAA,KAAnB,IAAgC,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,gBAAA,CAAiB,MAAQ,EAAA,WAAA,CAAA,CAAA;AAAA,KAC3D;AACA,IAAA,OAAO,MAAM;AA5EjB,MAAAC,IAAAA,GAAAA,CAAAA;AA6EM,MAAA,IAAI,kBAAoB,EAAA;AACtB,QAAmB,kBAAA,CAAA,mBAAA;AAAA,UACjB,UAAA;AAAA,UACA,eAAA;AAAA,SACF,CAAA;AACA,QAAA,CAAAA,GAAA,GAAA,kBAAA,CAAmB,WAAnB,KAAA,IAAA,GAAA,KAAA,CAAA,GAAAA,GAAgC,CAAA,mBAAA;AAAA,UAC9B,MAAA;AAAA,UACA,WAAA;AAAA,SAAA,CAAA;AAAA,OAEJ;AAAA,KACF,CAAA;AAAA,KACC,CAAC,eAAA,EAAiB,UAAY,EAAA,kBAAA,EAAoB,WAAW,CAAC,CAAA,CAAA;AACnE;;;;"}

package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useEventCallback = require('../../utils/useEventCallback.js');
+require('@salt-ds/core');
+var stateChangeTypes = require('../stateChangeTypes.js');
+var CascadingMenuAction = require('./CascadingMenuAction.js');
+
+function useMenuTriggerHandlers({
+  dispatch,
+  children,
+  setIsNavigatingWithKeyboard,
+  openCloseMenu,
+  rootMenuState,
+  rootMenuId,
+  menusDataById = {}
+}) {
+  const handleOnClick = useEventCallback.useEventCallback((event) => {
+    var _a;
+    const { type } = event;
+    setIsNavigatingWithKeyboard(false);
+    if (type === "click") {
+      if (React.isValidElement(children)) {
+        const childrenProps = children.props;
+        (_a = childrenProps.onClick) == null ? void 0 : _a.call(childrenProps, event);
+      }
+      openCloseMenu(!rootMenuState);
+    }
+  });
+  const handleOnKeydown = useEventCallback.useEventCallback(
+    (event) => {
+      var _a;
+      const { key } = event;
+      switch (key) {
+        case "Spacebar":
+        case " ":
+        case "Enter":
+          event.stopPropagation();
+          event.preventDefault();
+          setIsNavigatingWithKeyboard(true);
+          dispatch({
+            type: rootMenuState ? CascadingMenuAction.CascadingMenuAction.CLOSE_MENU : CascadingMenuAction.CascadingMenuAction.OPEN_MENU,
+            cause: stateChangeTypes.stateChangeTypes.KEYBOARD_TOGGLE,
+            targetId: rootMenuId
+          });
+          break;
+        case "ArrowDown":
+          event.stopPropagation();
+          event.preventDefault();
+          setIsNavigatingWithKeyboard(true);
+          if (rootMenuState) {
+            break;
+          }
+          dispatch({
+            type: CascadingMenuAction.CascadingMenuAction.OPEN_MENU,
+            cause: stateChangeTypes.stateChangeTypes.KEYBOARD_TOGGLE,
+            targetId: rootMenuId
+          });
+          break;
+        case "ArrowUp":
+          event.stopPropagation();
+          event.preventDefault();
+          setIsNavigatingWithKeyboard(true);
+          if (rootMenuState || !rootMenuId) {
+            break;
+          }
+          dispatch({
+            type: CascadingMenuAction.CascadingMenuAction.OPEN_MENU,
+            cause: stateChangeTypes.stateChangeTypes.KEYBOARD_TOGGLE,
+            targetId: rootMenuId
+          });
+          dispatch({
+            type: CascadingMenuAction.CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,
+            cause: stateChangeTypes.stateChangeTypes.ITEM_KEYDOWN_ARROW_UP,
+            targetId: rootMenuId,
+            highlightedItemIndex: menusDataById[rootMenuId].menuItems.length - 1
+          });
+          break;
+      }
+      if (React.isValidElement(children)) {
+        const childrenProps = children.props;
+        (_a = childrenProps.onKeyDown) == null ? void 0 : _a.call(childrenProps, event);
+      }
+    }
+  );
+  return [handleOnClick, handleOnKeydown];
+}
+
+exports.useMenuTriggerHandlers = useMenuTriggerHandlers;
+//# sourceMappingURL=useMenuTriggerHandlers.js.map

package/dist-cjs/cascading-menu/internal/useMenuTriggerHandlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMenuTriggerHandlers.js","sources":["../src/cascading-menu/internal/useMenuTriggerHandlers.ts"],"sourcesContent":["import { useEventCallback } from \"../../utils\";\nimport { stateChangeTypes } from \"../stateChangeTypes\";\nimport { CascadingMenuAction } from \"./CascadingMenuAction\";\nimport { CascadingMenuProps } from \"../CascadingMenuProps\";\nimport { menuState } from \"./stateUtils\";\nimport { stateItem } from \"./useStateReducer\";\nimport {\n  HTMLAttributes,\n  isValidElement,\n  MouseEvent,\n  KeyboardEvent,\n} from \"react\";\n\ninterface useMenuTriggerHandlersProps {\n  dispatch: (action: any) => void;\n  children: CascadingMenuProps[\"children\"];\n  setIsNavigatingWithKeyboard: (value: boolean) => void;\n  openCloseMenu: (open: boolean) => void;\n  rootMenuState: stateItem;\n  rootMenuId: string | undefined;\n  menusDataById: Record<string, menuState>;\n}\n\nexport function useMenuTriggerHandlers({\n  dispatch,\n  children,\n  setIsNavigatingWithKeyboard,\n  openCloseMenu,\n  rootMenuState,\n  rootMenuId,\n  menusDataById = {},\n}: useMenuTriggerHandlersProps) {\n  const handleOnClick = useEventCallback((event: MouseEvent<HTMLElement>) => {\n    const { type } = event;\n\n    setIsNavigatingWithKeyboard(false);\n    if (type === \"click\") {\n      if (isValidElement(children)) {\n        const childrenProps = children.props as HTMLAttributes<HTMLElement>;\n        childrenProps.onClick?.(event);\n      }\n      openCloseMenu(!rootMenuState);\n    }\n  });\n\n  const handleOnKeydown = useEventCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      const { key } = event;\n\n      switch (key) {\n        case \"Spacebar\":\n        case \" \":\n        case \"Enter\":\n          event.stopPropagation();\n          event.preventDefault();\n          setIsNavigatingWithKeyboard(true);\n          dispatch({\n            type: rootMenuState\n              ? CascadingMenuAction.CLOSE_MENU\n              : CascadingMenuAction.OPEN_MENU,\n            cause: stateChangeTypes.KEYBOARD_TOGGLE,\n            targetId: rootMenuId,\n          });\n          break;\n        case \"ArrowDown\":\n          event.stopPropagation();\n          event.preventDefault();\n          setIsNavigatingWithKeyboard(true);\n          if (rootMenuState) {\n            break;\n          }\n          dispatch({\n            type: CascadingMenuAction.OPEN_MENU,\n            cause: stateChangeTypes.KEYBOARD_TOGGLE,\n            targetId: rootMenuId,\n          });\n          break;\n        case \"ArrowUp\":\n          event.stopPropagation();\n          event.preventDefault();\n          setIsNavigatingWithKeyboard(true);\n          if (rootMenuState || !rootMenuId) {\n            break;\n          }\n          dispatch({\n            type: CascadingMenuAction.OPEN_MENU,\n            cause: stateChangeTypes.KEYBOARD_TOGGLE,\n            targetId: rootMenuId,\n          });\n          dispatch({\n            type: CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,\n            cause: stateChangeTypes.ITEM_KEYDOWN_ARROW_UP,\n            targetId: rootMenuId,\n            highlightedItemIndex:\n              menusDataById[rootMenuId].menuItems.length - 1,\n          });\n          break;\n        default:\n          break;\n      }\n\n      if (isValidElement(children)) {\n        const childrenProps = children.props as HTMLAttributes<HTMLElement>;\n        childrenProps.onKeyDown?.(event);\n      }\n    }\n  );\n\n  return [handleOnClick, handleOnKeydown] as const;\n}\n"],"names":["useEventCallback","isValidElement","CascadingMenuAction","stateChangeTypes"],"mappings":"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"}

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

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var clsx = require('clsx');
+var React = require('react');
+var core = require('@salt-ds/core');
+var InputLegacy = require('../input-legacy/InputLegacy.js');
+require('../input-legacy/StaticInputAdornment.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var RGBAInput = require('./RGBAInput.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooser");
+const AlphaInput = ({
+  alphaValue,
+  onSubmit,
+  showAsOpacity = false
+}) => {
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-rgba-input",
+    css: RGBAInput,
+    window: targetWindow
+  });
+  const [alphaInputValue, setAlphaInputValue] = React.useState(
+    !isNaN(alphaValue) ? alphaValue.toString() : ""
+  );
+  React.useEffect(() => {
+    setAlphaInputValue(!isNaN(alphaValue) ? alphaValue.toString() : "");
+  }, [alphaValue]);
+  const handleAlphaInputChange = (event, value) => {
+    value = value.replace("%", "");
+    let alpha = value;
+    if (value.trim() === "" || Number.isNaN(value)) {
+      alpha = "";
+    }
+    if (showAsOpacity && Number.parseFloat(value)) {
+      alpha = (parseFloat(value) / 100).toString();
+    }
+    if (value.charAt(1) === "." || value.charAt(0) === ".") {
+      alpha = value;
+    }
+    setAlphaInputValue(alpha);
+  };
+  const handleKeyDownAlpha = (e) => {
+    if (e.key === "Enter") {
+      const alpha = alphaInputValue.trim().replace("%", "") !== "" ? parseFloat(alphaInputValue) : 0;
+      const validatedAlpha = Math.max(0, Math.min(alpha, 1));
+      setAlphaInputValue(validatedAlpha.toString());
+      onSubmit(validatedAlpha);
+    }
+  };
+  const handleOnBlurAlpha = (e) => {
+    const alpha = alphaInputValue.trim() !== "" ? parseFloat(alphaInputValue) : 0;
+    const validatedAlpha = Math.max(0, Math.min(alpha, 1));
+    setAlphaInputValue(validatedAlpha.toString());
+    onSubmit(validatedAlpha, e);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
+    inputProps: {
+      "data-testid": "a-input"
+    },
+    className: clsx.clsx({
+      [withBaseName("rgbaInput")]: !showAsOpacity,
+      [withBaseName("opacityInput")]: showAsOpacity
+    }),
+    value: showAsOpacity ? alphaInputValue ? (parseFloat(alphaInputValue) * 100).toString() + "%" : "%" : alphaInputValue,
+    onChange: handleAlphaInputChange,
+    onBlur: handleOnBlurAlpha,
+    onKeyDown: handleKeyDownAlpha
+  });
+};
+
+exports.AlphaInput = AlphaInput;
+//# sourceMappingURL=AlphaInputField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AlphaInputField.js","sources":["../src/color-chooser/AlphaInputField.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { useEffect, useState } from \"react\";\nimport { makePrefixer } from \"@salt-ds/core\";\nimport { InputLegacy as Input } from \"../input-legacy\";\n\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\n\nimport rgbaInputCss from \"./RGBAInput.css\";\n\nconst withBaseName = makePrefixer(\"saltColorChooser\");\n\ninterface AlphaInputProps {\n  alphaValue: number;\n  showAsOpacity?: boolean;\n  onSubmit: (alpha: number, e?: React.ChangeEvent) => void;\n}\n\nexport const AlphaInput = ({\n  alphaValue,\n  onSubmit,\n  showAsOpacity = false,\n}: AlphaInputProps): JSX.Element => {\n  const targetWindow = useWindow();\n  useComponentCssInjection({\n    testId: \"salt-rgba-input\",\n    css: rgbaInputCss,\n    window: targetWindow,\n  });\n\n  const [alphaInputValue, setAlphaInputValue] = useState<string>(\n    !isNaN(alphaValue) ? alphaValue.toString() : \"\"\n  );\n\n  useEffect(() => {\n    setAlphaInputValue(!isNaN(alphaValue) ? alphaValue.toString() : \"\");\n  }, [alphaValue]);\n\n  const handleAlphaInputChange = (\n    event: React.ChangeEvent<HTMLInputElement>,\n    value: string\n  ): void => {\n    value = value.replace(\"%\", \"\");\n    let alpha: string = value;\n\n    if (value.trim() === \"\" || Number.isNaN(value)) {\n      alpha = \"\";\n    }\n\n    if (showAsOpacity && Number.parseFloat(value)) {\n      alpha = (parseFloat(value) / 100).toString();\n    }\n\n    if (value.charAt(1) === \".\" || value.charAt(0) === \".\") {\n      alpha = value;\n    }\n\n    setAlphaInputValue(alpha);\n  };\n\n  const handleKeyDownAlpha = (\n    e: React.KeyboardEvent<HTMLInputElement>\n  ): void => {\n    if (e.key === \"Enter\") {\n      const alpha =\n        alphaInputValue.trim().replace(\"%\", \"\") !== \"\"\n          ? parseFloat(alphaInputValue)\n          : 0;\n      const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n      setAlphaInputValue(validatedAlpha.toString());\n      onSubmit(validatedAlpha);\n    }\n  };\n\n  const handleOnBlurAlpha = (e: React.FocusEvent<HTMLInputElement>): void => {\n    // Guard against parseFloat('') becoming NaN\n    const alpha =\n      alphaInputValue.trim() !== \"\" ? parseFloat(alphaInputValue) : 0;\n\n    const validatedAlpha = Math.max(0, Math.min(alpha, 1));\n    setAlphaInputValue(validatedAlpha.toString());\n    onSubmit(validatedAlpha, e);\n  };\n\n  return (\n    <Input\n      inputProps={{\n        // @ts-ignore\n        \"data-testid\": \"a-input\",\n      }}\n      className={clsx({\n        [withBaseName(\"rgbaInput\")]: !showAsOpacity,\n        [withBaseName(\"opacityInput\")]: showAsOpacity,\n      })}\n      value={\n        showAsOpacity\n          ? alphaInputValue\n            ? (parseFloat(alphaInputValue) * 100).toString() + \"%\"\n            : \"%\"\n          : alphaInputValue\n      }\n      onChange={handleAlphaInputChange}\n      onBlur={handleOnBlurAlpha}\n      onKeyDown={handleKeyDownAlpha}\n    />\n  );\n};\n"],"names":["makePrefixer","useWindow","useComponentCssInjection","rgbaInputCss","useState","useEffect","jsx","Input","clsx"],"mappings":"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"}

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

@@ -0,0 +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-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.css.js.map

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

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

@@ -0,0 +1,165 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var icons = require('@salt-ds/icons');
+var colorUtils = require('./color-utils.js');
+var ColorHelpers = require('./ColorHelpers.js');
+var colorMap = require('./colorMap.js');
+var DictTabs = require('./DictTabs.js');
+var GetColorPalettes = require('./GetColorPalettes.js');
+var createTabsMapping = require('./createTabsMapping.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var ColorChooser$1 = require('./ColorChooser.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooser");
+function getActiveTab(hexValue, tabs, saltColorOverrides) {
+  if (tabs.Swatches && tabs["Color Picker"]) {
+    const hexNoAlpha = ColorHelpers.hexValueWithoutAlpha(hexValue);
+    const colors = saltColorOverrides != null ? saltColorOverrides : colorMap.saltColorMap;
+    if (hexNoAlpha && !Object.keys(colors).find(
+      (key) => {
+        var _a;
+        return ((_a = ColorHelpers.convertColorMapValueToHex(colors[key])) == null ? void 0 : _a.toLowerCase()) === (hexNoAlpha == null ? void 0 : hexNoAlpha.toLowerCase());
+      }
+    )) {
+      return 1;
+    }
+  }
+  return 0;
+}
+const ColorChooser = ({
+  onClear,
+  onSelect,
+  color,
+  showSwatches = true,
+  showColorPicker = true,
+  defaultAlpha = 1,
+  disableAlphaChooser = false,
+  hideLabel = false,
+  placeholder,
+  buttonProps,
+  saltColorOverrides,
+  readOnly = false,
+  displayHexOnly = false
+}) => {
+  var _a, _b, _c;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-color-chooser",
+    css: ColorChooser$1,
+    window: targetWindow
+  });
+  const [open, setOpen] = React.useState(false);
+  const allColors = saltColorOverrides ? GetColorPalettes.getColorPalettes(saltColorOverrides) : GetColorPalettes.getColorPalettes();
+  const displayColorName = displayHexOnly ? ColorHelpers.getHexValue(color == null ? void 0 : color.hex, disableAlphaChooser) : ColorHelpers.getColorNameByHexValue(
+    color == null ? void 0 : color.hex,
+    disableAlphaChooser,
+    saltColorOverrides
+  );
+  const handleOpenChange = (open2) => setOpen(open2);
+  const alphaForTabs = colorUtils.isTransparent(color == null ? void 0 : color.hex) ? defaultAlpha : (_b = (_a = color == null ? void 0 : color.rgba) == null ? void 0 : _a.a) != null ? _b : defaultAlpha;
+  const tabsMapping = createTabsMapping.createTabsMapping({
+    swatches: showSwatches,
+    colorPicker: showColorPicker,
+    disableAlphaChooser,
+    allColors,
+    color,
+    alpha: alphaForTabs,
+    handleColorChange: onSelect,
+    displayColorName,
+    placeholder,
+    onDialogClosed: () => {
+      setOpen(false);
+    }
+  });
+  const [activeTab, setActiveTab] = React.useState(
+    getActiveTab(color == null ? void 0 : color.hex, tabsMapping, saltColorOverrides)
+  );
+  const onDefaultSelected = () => {
+    if (activeTab === 0 && showSwatches) {
+      onClear();
+      handleOpenChange(false);
+    } else {
+      onClear();
+    }
+  };
+  const onTabClick = (index) => {
+    setActiveTab(index);
+  };
+  const OverlayContent = () => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      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(core.Overlay, {
+    placement: "bottom",
+    "data-testid": "color-chooser-overlay",
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(core.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.jsxs(core.OverlayPanel, {
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelCloseButton, {}),
+          /* @__PURE__ */ jsxRuntime.jsx(core.OverlayPanelContent, {
+            children: /* @__PURE__ */ jsxRuntime.jsx(OverlayContent, {})
+          })
+        ]
+      })
+    ]
+  });
+};
+
+exports.ColorChooser = ColorChooser;
+//# sourceMappingURL=ColorChooser.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ColorChooser.js","sources":["../src/color-chooser/ColorChooser.tsx"],"sourcesContent":["import { ChangeEvent, useState } from \"react\";\nimport { clsx } from \"clsx\";\nimport {\n  Button,\n  ButtonProps,\n  makePrefixer,\n  Overlay,\n  OverlayPanel,\n  OverlayTrigger,\n  OverlayPanelContent,\n  OverlayPanelCloseButton,\n} 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\n  const onTabClick = (index: number): void => {\n    setActiveTab(index);\n  };\n\n  const OverlayContent = () => {\n    return (\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    );\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        <OverlayPanelCloseButton />\n        <OverlayPanelContent>\n          <OverlayContent />\n        </OverlayPanelContent>\n      </OverlayPanel>\n    </Overlay>\n  );\n};\n"],"names":["makePrefixer","hexValueWithoutAlpha","saltColorMap","convertColorMapValueToHex","useWindow","useComponentCssInjection","colorChooserCss","useState","getColorPalettes","getHexValue","getColorNameByHexValue","open","isTransparent","createTabsMapping","jsxs","clsx","Button","jsx","RefreshIcon","DictTabs","Overlay","OverlayTrigger","OverlayPanel","OverlayPanelCloseButton","OverlayPanelContent"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+'use strict';
+
+var css_248z = ".saltColorChooserPicker {\n  display: flex;\n  flex-direction: row;\n}\n\n.saltColorChooserPicker-inputContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-around;\n  border-left: 1px solid var(--salt-separable-secondary-borderColor);\n}\n\n.saltColorChooserPicker-applyButtonDiv {\n  padding: var(--salt-size-unit) calc(2 * var(--salt-size-unit)) 0px calc(1.5 * var(--salt-size-unit));\n  align-self: center;\n}\n\n.saltColorChooserPicker-textDivOverrides {\n  font-size: var(--salt-text-label-fontSize);\n  font-weight: var(--salt-text-fontWeight-strong);\n  color: var(--salt-content-primary-foreground);\n  padding: 0px !important;\n}\n\n.saltColorChooserPicker-inputDivs {\n  display: flex;\n  flex-direction: column;\n  align-content: stretch;\n  padding: var(--salt-size-unit) 0px 0px var(--salt-size-unit);\n}\n\n/**\n Warning: Below are a lot of overridden styles from react-color\n **/\n\n/* Entire container for react-color component */\n.saltColorChooserPicker-root,\n.saltColorChooserPicker-rootDisabledAlpha {\n  box-shadow: none !important;\n  padding: 8px 8px 0px 0px !important;\n  background: transparent !important;\n  width: calc(9 * var(--salt-size-stackable)) !important;\n}\n/* Color sliders container */\n.saltColorChooserPicker-root .flexbox-fix,\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix {\n  padding-top: 8px !important;\n}\n/* RGB Inputs provided by react-color */\n.saltColorChooserPicker-rootDisabledAlpha .flexbox-fix ~ .flexbox-fix,\n.saltColorChooserPicker-root .flexbox-fix ~ .flexbox-fix {\n  display: none !important;\n}\n/* Height of hue and saturation boxes */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div {\n  height: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of saturation slider container */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of saturation slider */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div > div:nth-child(2) > div > div:nth-last-child(1) > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Width of color preview box */\n.saltColorChooserPicker-swatchPickerStyles .flexbox-fix > div {\n  width: calc(var(--salt-size-stackable) / 2) !important;\n}\n/* Height of hue slider container */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n/* Height of hue slider */\n.saltColorChooserPicker-swatchPickerStyles .hue-horizontal > div > div {\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n}\n\n.saltColorChooserPicker-swatchPickerStyles .saturation-white > div > div {\n  width: calc(var(--salt-size-base) / 4) !important;\n  height: calc(var(--salt-size-base) / 4) !important;\n}\n/* Cursor on hue slider */\n.saltColorChooserPicker-rootDisabledAlpha .hue-horizontal > div > div {\n  position: relative;\n  margin-top: 0px !important;\n  width: 4px !important;\n  height: calc(var(--salt-size-stackable) / 2 - 2px) !important;\n  background: var(--salt-container-primary-background) !important;\n  border-bottom: var(--salt-size-border) var(--salt-editable-borderStyle) var(--salt-editable-borderColor);\n}\n";
+
+module.exports = css_248z;
+//# sourceMappingURL=ColorPicker.css.js.map

package/dist-cjs/color-chooser/ColorPicker.css.js.map

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

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

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var reactColor = require('react-color');
+var clsx = require('clsx');
+var core = require('@salt-ds/core');
+var Color = require('./Color.js');
+var ColorHelpers = require('./ColorHelpers.js');
+var HexInput = require('./HexInput.js');
+var RGBAInput = require('./RGBAInput.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var ColorPicker$1 = require('./ColorPicker.css.js');
+
+const withBaseName = core.makePrefixer("saltColorChooserPicker");
+const ColorPicker = ({
+  alpha = 1,
+  disableAlphaChooser,
+  color,
+  onChange,
+  onDialogClosed
+}) => {
+  var _a;
+  const targetWindow = window.useWindow();
+  styles.useComponentCssInjection({
+    testId: "salt-color-picker",
+    css: ColorPicker$1,
+    window: targetWindow
+  });
+  const rgbaValue = (_a = color == null ? void 0 : color.rgba) != null ? _a : Color.Color.makeColorFromRGB(0, 0, 0, alpha).rgba;
+  const rgbaText = disableAlphaChooser ? "RGB" : "RGBA";
+  const onSubmitHex = (hexValue, e) => {
+    const newColor = Color.Color.makeColorFromHex(hexValue);
+    onChange(newColor, false, e);
+  };
+  const onSubmitRgb = (rgba, e) => {
+    const newColor = Color.Color.makeColorFromRGB(rgba.r, rgba.g, rgba.b, rgba.a);
+    onChange(newColor, false, e);
+  };
+  const onSubmitAlpha = (alpha2, e) => {
+    const newColor = Color.Color.makeColorFromRGB(
+      rgbaValue.r,
+      rgbaValue.g,
+      rgbaValue.b,
+      Math.max(0, Math.min(alpha2, 1))
+    );
+    onChange(newColor, false, e);
+  };
+  const onSketchPickerChange = (colorResult, e) => {
+    var _a2;
+    const newColor = Color.Color.makeColorFromRGB(
+      colorResult.rgb.r,
+      colorResult.rgb.g,
+      colorResult.rgb.b,
+      (_a2 = colorResult.rgb.a) != null ? _a2 : alpha
+    );
+    onChange(newColor, false, e);
+  };
+  const onApply = () => {
+    onChange(color, true);
+    onDialogClosed();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+    "data-testid": "color-picker",
+    className: clsx.clsx(withBaseName()),
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(reactColor.SketchPicker, {
+        className: clsx.clsx(withBaseName("swatchPickerStyles"), {
+          [withBaseName("rootDisabledAlpha")]: disableAlphaChooser,
+          [withBaseName("root")]: !disableAlphaChooser
+        }),
+        color: rgbaValue,
+        onChange: onSketchPickerChange,
+        presetColors: [],
+        disableAlpha: disableAlphaChooser
+      }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        className: clsx.clsx(withBaseName("inputContainer")),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", {
+            className: clsx.clsx(withBaseName("inputDivs")),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", {
+                className: clsx.clsx(withBaseName("textDivOverrides")),
+                children: "HEX"
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(HexInput.HexInput, {
+                hexValue: disableAlphaChooser ? ColorHelpers.hexValueWithoutAlpha(color == null ? void 0 : color.hex) : color == null ? void 0 : color.hex,
+                disableAlphaChooser,
+                onSubmit: onSubmitHex
+              }),
+              /* @__PURE__ */ jsxRuntime.jsx(RGBAInput.RGBAInput, {
+                disableAlphaChooser,
+                rgbaText,
+                rgbaValue,
+                onSubmitAlpha,
+                onSubmitRgb
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", {
+            className: clsx.clsx(withBaseName("applyButtonDiv")),
+            children: /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
+              "data-testid": "apply-button",
+              variant: "cta",
+              onClick: onApply,
+              children: "Apply"
+            })
+          })
+        ]
+      })
+    ]
+  });
+};
+
+exports.ColorPicker = ColorPicker;
+//# sourceMappingURL=ColorPicker.js.map