@salt-ds/lab 1.0.0-alpha.0

package/dist-cjs/packages/lab/src/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/packages/lab/src/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/packages/lab/src/cascading-menu/internal/useMountedRef.js

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function useMountedRef() {
+  const mountedRef = React.useRef(false);
+  React.useEffect(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  return mountedRef;
+}
+
+exports.useMountedRef = useMountedRef;
+//# sourceMappingURL=useMountedRef.js.map

package/dist-cjs/packages/lab/src/cascading-menu/internal/useMountedRef.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMountedRef.js","sources":["../src/cascading-menu/internal/useMountedRef.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n/**\n * Used to know if the component is mounted or not\n */\nexport function useMountedRef() {\n  const mountedRef = useRef(false);\n  useEffect(() => {\n    mountedRef.current = true;\n    return () => {\n      mountedRef.current = false;\n    };\n  }, []);\n\n  return mountedRef;\n}\n"],"names":["useRef","useEffect"],"mappings":";;;;;;AAIO,SAAS,aAAgB,GAAA;AAC9B,EAAM,MAAA,UAAA,GAAaA,aAAO,KAAK,CAAA,CAAA;AAC/B,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,UAAA,CAAW,OAAU,GAAA,IAAA,CAAA;AACrB,IAAA,OAAO,MAAM;AACX,MAAA,UAAA,CAAW,OAAU,GAAA,KAAA,CAAA;AAAA,KACvB,CAAA;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAA,UAAA,CAAA;AACT;;;;"}

package/dist-cjs/packages/lab/src/cascading-menu/internal/useMouseHandlers.js

@@ -0,0 +1,130 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var CascadingMenuAction = require('./CascadingMenuAction.js');
+var stateChangeTypes = require('../stateChangeTypes.js');
+
+function isOrContainsNode(parent, child) {
+  var _a;
+  return parent === child || !!((_a = parent == null ? void 0 : parent.contains) == null ? void 0 : _a.call(parent, child));
+}
+function useMouseHandlers(props, isMenuActiveState, menuRef) {
+  const [isMenuActive, setIsMenuActive] = isMenuActiveState;
+  const {
+    delay,
+    refsManager,
+    dispatch,
+    isNavigatingWithKeyboard,
+    setIsNavigatingWithKeyboard,
+    data,
+    highlightedItemIndex,
+    menuId,
+    parentElement
+  } = props;
+  const scheduledHighlightedIndexChange = React.useRef(null);
+  const mouseEnterTimer = React.useRef();
+  const mouseOutTimer = React.useRef();
+  React.useEffect(
+    () => function cleanUpTimeouts() {
+      clearTimeout(mouseEnterTimer.current);
+      clearTimeout(mouseOutTimer.current);
+    },
+    []
+  );
+  const handleMouseMove = React.useCallback(
+    (highlightedIndex) => {
+      if (isNavigatingWithKeyboard) {
+        setIsNavigatingWithKeyboard(false);
+      }
+      if (!isMenuActive) {
+        setIsMenuActive(true);
+      }
+      if (scheduledHighlightedIndexChange.current !== highlightedIndex) {
+        scheduledHighlightedIndexChange.current = highlightedIndex;
+        clearTimeout(mouseEnterTimer.current);
+        clearTimeout(mouseOutTimer.current);
+        mouseEnterTimer.current = window.setTimeout(() => {
+          dispatch({
+            type: CascadingMenuAction.CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,
+            cause: stateChangeTypes.stateChangeTypes.ITEM_MOUSE_ENTER,
+            targetId: menuId,
+            highlightedItemIndex: highlightedIndex
+          });
+        }, delay);
+      }
+    },
+    [
+      isNavigatingWithKeyboard,
+      isMenuActive,
+      setIsNavigatingWithKeyboard,
+      setIsMenuActive,
+      delay,
+      dispatch,
+      menuId
+    ]
+  );
+  const handleMouseOut = React.useCallback(
+    (event) => {
+      var _a;
+      if (isNavigatingWithKeyboard) {
+        setIsNavigatingWithKeyboard(false);
+      }
+      clearTimeout(mouseOutTimer.current);
+      const { relatedTarget } = event;
+      const subMenuElement = typeof highlightedItemIndex === "number" ? (_a = refsManager.get(data.childMenus[highlightedItemIndex])) != null ? _a : null : null;
+      const mouseMovedToSameMenu = isOrContainsNode(
+        menuRef,
+        relatedTarget
+      );
+      const mouseMovedToParentMenu = isOrContainsNode(
+        parentElement != null ? parentElement : null,
+        relatedTarget
+      );
+      if (mouseMovedToParentMenu) {
+        dispatch({
+          type: CascadingMenuAction.CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,
+          cause: stateChangeTypes.stateChangeTypes.ITEM_MOUSE_MOVE_TO_PARENT,
+          targetId: menuId,
+          highlightedItemIndex: null
+        });
+      }
+      const didMouseMoveOutOfMenu = !(mouseMovedToParentMenu || mouseMovedToSameMenu || isOrContainsNode(subMenuElement, relatedTarget));
+      if (didMouseMoveOutOfMenu) {
+        scheduledHighlightedIndexChange.current = null;
+        if (!isMenuActive) {
+          setIsMenuActive(true);
+          clearInterval(mouseEnterTimer.current);
+          mouseOutTimer.current = window.setTimeout(() => {
+            dispatch({
+              type: CascadingMenuAction.CascadingMenuAction.RESET_MENU,
+              cause: stateChangeTypes.stateChangeTypes.MOUSE_OUT_OF_MENUS,
+              targetId: menuId
+            });
+          }, delay);
+        }
+      } else if (!mouseMovedToSameMenu) {
+        setIsMenuActive(false);
+      }
+    },
+    [
+      isNavigatingWithKeyboard,
+      refsManager,
+      data.childMenus,
+      highlightedItemIndex,
+      menuRef,
+      parentElement,
+      setIsNavigatingWithKeyboard,
+      dispatch,
+      menuId,
+      isMenuActive,
+      delay,
+      setIsMenuActive
+    ]
+  );
+  return [handleMouseMove, handleMouseOut];
+}
+
+exports.useMouseHandlers = useMouseHandlers;
+//# sourceMappingURL=useMouseHandlers.js.map

package/dist-cjs/packages/lab/src/cascading-menu/internal/useMouseHandlers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMouseHandlers.js","sources":["../src/cascading-menu/internal/useMouseHandlers.ts"],"sourcesContent":["import {\n  useCallback,\n  useRef,\n  useEffect,\n  Dispatch,\n  SetStateAction,\n  MouseEvent,\n} from \"react\";\n\nimport { CascadingMenuListProps } from \"../CascadingMenuList\";\nimport { CascadingMenuAction } from \"./CascadingMenuAction\";\nimport { stateChangeTypes } from \"../stateChangeTypes\";\n\nfunction isOrContainsNode(parent: HTMLElement | null, child: HTMLElement) {\n  return parent === child || !!parent?.contains?.(child);\n}\n\nexport function useMouseHandlers(\n  props: CascadingMenuListProps,\n  isMenuActiveState: [boolean, Dispatch<SetStateAction<boolean>>],\n  menuRef: HTMLElement | null\n) {\n  const [isMenuActive, setIsMenuActive] = isMenuActiveState;\n  const {\n    delay,\n    refsManager,\n    dispatch,\n    isNavigatingWithKeyboard,\n    setIsNavigatingWithKeyboard,\n    data,\n    highlightedItemIndex,\n    menuId,\n    parentElement,\n  } = props;\n  const scheduledHighlightedIndexChange = useRef<number | null>(null);\n  const mouseEnterTimer = useRef<number>();\n  const mouseOutTimer = useRef<number>();\n\n  useEffect(\n    () =>\n      function cleanUpTimeouts() {\n        clearTimeout(mouseEnterTimer.current);\n        clearTimeout(mouseOutTimer.current);\n      },\n    []\n  );\n\n  const handleMouseMove = useCallback(\n    (highlightedIndex: number) => {\n      if (isNavigatingWithKeyboard) {\n        setIsNavigatingWithKeyboard(false);\n      }\n\n      if (!isMenuActive) {\n        setIsMenuActive(true);\n      }\n      if (scheduledHighlightedIndexChange.current !== highlightedIndex) {\n        scheduledHighlightedIndexChange.current = highlightedIndex;\n        clearTimeout(mouseEnterTimer.current);\n        clearTimeout(mouseOutTimer.current);\n        mouseEnterTimer.current = window.setTimeout(() => {\n          dispatch({\n            type: CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,\n            cause: stateChangeTypes.ITEM_MOUSE_ENTER,\n            targetId: menuId,\n            highlightedItemIndex: highlightedIndex,\n          });\n        }, delay);\n      }\n    },\n    [\n      isNavigatingWithKeyboard,\n      isMenuActive,\n      setIsNavigatingWithKeyboard,\n      setIsMenuActive,\n      delay,\n      dispatch,\n      menuId,\n    ]\n  );\n  const handleMouseOut = useCallback(\n    (event: MouseEvent<HTMLElement>) => {\n      if (isNavigatingWithKeyboard) {\n        setIsNavigatingWithKeyboard(false);\n      }\n      clearTimeout(mouseOutTimer.current);\n      // If mouse leaves from parent menu into other element other than submenu -> close submenu\n      const { relatedTarget } = event;\n      const subMenuElement =\n        typeof highlightedItemIndex === \"number\"\n          ? refsManager.get(data.childMenus[highlightedItemIndex]) ?? null\n          : null;\n\n      const mouseMovedToSameMenu = isOrContainsNode(\n        menuRef,\n        relatedTarget as HTMLElement\n      );\n      const mouseMovedToParentMenu = isOrContainsNode(\n        parentElement ?? null,\n        relatedTarget as HTMLElement\n      );\n\n      if (mouseMovedToParentMenu) {\n        dispatch({\n          type: CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM,\n          cause: stateChangeTypes.ITEM_MOUSE_MOVE_TO_PARENT,\n          targetId: menuId,\n          highlightedItemIndex: null,\n        });\n      }\n      const didMouseMoveOutOfMenu = !(\n        mouseMovedToParentMenu ||\n        mouseMovedToSameMenu ||\n        isOrContainsNode(subMenuElement, relatedTarget as HTMLElement)\n      );\n\n      if (didMouseMoveOutOfMenu) {\n        scheduledHighlightedIndexChange.current = null;\n        if (!isMenuActive) {\n          setIsMenuActive(true);\n          clearInterval(mouseEnterTimer.current);\n          mouseOutTimer.current = window.setTimeout(() => {\n            dispatch({\n              type: CascadingMenuAction.RESET_MENU,\n              cause: stateChangeTypes.MOUSE_OUT_OF_MENUS,\n              targetId: menuId,\n            });\n          }, delay);\n        }\n      } else if (!mouseMovedToSameMenu) {\n        setIsMenuActive(false);\n      }\n    },\n    [\n      isNavigatingWithKeyboard,\n      refsManager,\n      data.childMenus,\n      highlightedItemIndex,\n      menuRef,\n      parentElement,\n      setIsNavigatingWithKeyboard,\n      dispatch,\n      menuId,\n      isMenuActive,\n      delay,\n      setIsMenuActive,\n    ]\n  );\n  return [handleMouseMove, handleMouseOut] as const;\n}\n"],"names":["useRef","useEffect","useCallback","CascadingMenuAction","stateChangeTypes"],"mappings":";;;;;;;;AAaA,SAAS,gBAAA,CAAiB,QAA4B,KAAoB,EAAA;AAb1E,EAAA,IAAA,EAAA,CAAA;AAcE,EAAA,OAAO,WAAW,KAAS,IAAA,CAAC,EAAC,CAAA,EAAA,GAAA,MAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,MAAA,CAAQ,aAAR,IAAmB,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,MAAA,EAAA,KAAA,CAAA,CAAA,CAAA;AAClD,CAAA;AAEgB,SAAA,gBAAA,CACd,KACA,EAAA,iBAAA,EACA,OACA,EAAA;AACA,EAAM,MAAA,CAAC,YAAc,EAAA,eAAe,CAAI,GAAA,iBAAA,CAAA;AACxC,EAAM,MAAA;AAAA,IACJ,KAAA;AAAA,IACA,WAAA;AAAA,IACA,QAAA;AAAA,IACA,wBAAA;AAAA,IACA,2BAAA;AAAA,IACA,IAAA;AAAA,IACA,oBAAA;AAAA,IACA,MAAA;AAAA,IACA,aAAA;AAAA,GACE,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,+BAAA,GAAkCA,aAAsB,IAAI,CAAA,CAAA;AAClE,EAAA,MAAM,kBAAkBA,YAAe,EAAA,CAAA;AACvC,EAAA,MAAM,gBAAgBA,YAAe,EAAA,CAAA;AAErC,EAAAC,eAAA;AAAA,IACE,MACE,SAAS,eAAkB,GAAA;AACzB,MAAA,YAAA,CAAa,gBAAgB,OAAO,CAAA,CAAA;AACpC,MAAA,YAAA,CAAa,cAAc,OAAO,CAAA,CAAA;AAAA,KACpC;AAAA,IACF,EAAC;AAAA,GACH,CAAA;AAEA,EAAA,MAAM,eAAkB,GAAAC,iBAAA;AAAA,IACtB,CAAC,gBAA6B,KAAA;AAC5B,MAAA,IAAI,wBAA0B,EAAA;AAC5B,QAAA,2BAAA,CAA4B,KAAK,CAAA,CAAA;AAAA,OACnC;AAEA,MAAA,IAAI,CAAC,YAAc,EAAA;AACjB,QAAA,eAAA,CAAgB,IAAI,CAAA,CAAA;AAAA,OACtB;AACA,MAAI,IAAA,+BAAA,CAAgC,YAAY,gBAAkB,EAAA;AAChE,QAAA,+BAAA,CAAgC,OAAU,GAAA,gBAAA,CAAA;AAC1C,QAAA,YAAA,CAAa,gBAAgB,OAAO,CAAA,CAAA;AACpC,QAAA,YAAA,CAAa,cAAc,OAAO,CAAA,CAAA;AAClC,QAAgB,eAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAChD,UAAS,QAAA,CAAA;AAAA,YACP,MAAMC,uCAAoB,CAAA,2BAAA;AAAA,YAC1B,OAAOC,iCAAiB,CAAA,gBAAA;AAAA,YACxB,QAAU,EAAA,MAAA;AAAA,YACV,oBAAsB,EAAA,gBAAA;AAAA,WACvB,CAAA,CAAA;AAAA,WACA,KAAK,CAAA,CAAA;AAAA,OACV;AAAA,KACF;AAAA,IACA;AAAA,MACE,wBAAA;AAAA,MACA,YAAA;AAAA,MACA,2BAAA;AAAA,MACA,eAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,KACF;AAAA,GACF,CAAA;AACA,EAAA,MAAM,cAAiB,GAAAF,iBAAA;AAAA,IACrB,CAAC,KAAmC,KAAA;AAjFxC,MAAA,IAAA,EAAA,CAAA;AAkFM,MAAA,IAAI,wBAA0B,EAAA;AAC5B,QAAA,2BAAA,CAA4B,KAAK,CAAA,CAAA;AAAA,OACnC;AACA,MAAA,YAAA,CAAa,cAAc,OAAO,CAAA,CAAA;AAElC,MAAM,MAAA,EAAE,eAAkB,GAAA,KAAA,CAAA;AAC1B,MAAM,MAAA,cAAA,GACJ,OAAO,oBAAA,KAAyB,QAC5B,GAAA,CAAA,EAAA,GAAA,WAAA,CAAY,GAAI,CAAA,IAAA,CAAK,UAAW,CAAA,oBAAA,CAAqB,CAArD,KAAA,IAAA,GAAA,EAAA,GAA0D,IAC1D,GAAA,IAAA,CAAA;AAEN,MAAA,MAAM,oBAAuB,GAAA,gBAAA;AAAA,QAC3B,OAAA;AAAA,QACA,aAAA;AAAA,OACF,CAAA;AACA,MAAA,MAAM,sBAAyB,GAAA,gBAAA;AAAA,QAC7B,aAAiB,IAAA,IAAA,GAAA,aAAA,GAAA,IAAA;AAAA,QACjB,aAAA;AAAA,OACF,CAAA;AAEA,MAAA,IAAI,sBAAwB,EAAA;AAC1B,QAAS,QAAA,CAAA;AAAA,UACP,MAAMC,uCAAoB,CAAA,2BAAA;AAAA,UAC1B,OAAOC,iCAAiB,CAAA,yBAAA;AAAA,UACxB,QAAU,EAAA,MAAA;AAAA,UACV,oBAAsB,EAAA,IAAA;AAAA,SACvB,CAAA,CAAA;AAAA,OACH;AACA,MAAA,MAAM,wBAAwB,EAC5B,sBAAA,IACA,oBACA,IAAA,gBAAA,CAAiB,gBAAgB,aAA4B,CAAA,CAAA,CAAA;AAG/D,MAAA,IAAI,qBAAuB,EAAA;AACzB,QAAA,+BAAA,CAAgC,OAAU,GAAA,IAAA,CAAA;AAC1C,QAAA,IAAI,CAAC,YAAc,EAAA;AACjB,UAAA,eAAA,CAAgB,IAAI,CAAA,CAAA;AACpB,UAAA,aAAA,CAAc,gBAAgB,OAAO,CAAA,CAAA;AACrC,UAAc,aAAA,CAAA,OAAA,GAAU,MAAO,CAAA,UAAA,CAAW,MAAM;AAC9C,YAAS,QAAA,CAAA;AAAA,cACP,MAAMD,uCAAoB,CAAA,UAAA;AAAA,cAC1B,OAAOC,iCAAiB,CAAA,kBAAA;AAAA,cACxB,QAAU,EAAA,MAAA;AAAA,aACX,CAAA,CAAA;AAAA,aACA,KAAK,CAAA,CAAA;AAAA,SACV;AAAA,OACF,MAAA,IAAW,CAAC,oBAAsB,EAAA;AAChC,QAAA,eAAA,CAAgB,KAAK,CAAA,CAAA;AAAA,OACvB;AAAA,KACF;AAAA,IACA;AAAA,MACE,wBAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAK,CAAA,UAAA;AAAA,MACL,oBAAA;AAAA,MACA,OAAA;AAAA,MACA,aAAA;AAAA,MACA,2BAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,YAAA;AAAA,MACA,KAAA;AAAA,MACA,eAAA;AAAA,KACF;AAAA,GACF,CAAA;AACA,EAAO,OAAA,CAAC,iBAAiB,cAAc,CAAA,CAAA;AACzC;;;;"}

package/dist-cjs/packages/lab/src/cascading-menu/internal/useRefsManager.js

@@ -0,0 +1,24 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+function useRefsManager() {
+  const refs = React.useRef(/* @__PURE__ */ new Map());
+  const [, forceUpdate] = React.useReducer((x) => !x, false);
+  const get = React.useCallback((key) => refs.current.get(key), []);
+  const set = React.useCallback((key, value) => {
+    refs.current.set(key, value);
+    forceUpdate();
+  }, []);
+  const values = React.useCallback(() => {
+    const vals = [];
+    refs.current.forEach((value) => vals.push(value));
+    return vals;
+  }, []);
+  return React.useMemo(() => ({ get, set, values }), [get, set, values]);
+}
+
+exports.useRefsManager = useRefsManager;
+//# sourceMappingURL=useRefsManager.js.map

package/dist-cjs/packages/lab/src/cascading-menu/internal/useRefsManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useRefsManager.js","sources":["../src/cascading-menu/internal/useRefsManager.ts"],"sourcesContent":["import { useReducer, useRef, useCallback, useMemo } from \"react\";\n\nexport type refsManager = {\n  get: (key: string) => HTMLElement | undefined;\n  set: (key: string, ref: HTMLElement) => void;\n  values: () => HTMLElement[];\n};\n\nexport function useRefsManager(): refsManager {\n  const refs = useRef(new Map<string, HTMLElement>());\n  const [, forceUpdate] = useReducer((x) => !x, false);\n\n  const get = useCallback((key: string) => refs.current.get(key), []);\n\n  const set = useCallback((key: string, value: HTMLElement) => {\n    refs.current.set(key, value);\n    forceUpdate();\n  }, []);\n\n  const values = useCallback(() => {\n    const vals: HTMLElement[] = [];\n    refs.current.forEach((value) => vals.push(value));\n    return vals;\n  }, []);\n\n  return useMemo(() => ({ get, set, values }), [get, set, values]);\n}\n"],"names":["useRef","useReducer","useCallback","useMemo"],"mappings":";;;;;;AAQO,SAAS,cAA8B,GAAA;AAC5C,EAAA,MAAM,IAAO,GAAAA,YAAA,iBAAW,IAAA,GAAA,EAA0B,CAAA,CAAA;AAClD,EAAM,MAAA,GAAG,WAAW,CAAA,GAAIC,iBAAW,CAAC,CAAA,KAAM,CAAC,CAAA,EAAG,KAAK,CAAA,CAAA;AAEnD,EAAM,MAAA,GAAA,GAAMC,iBAAY,CAAA,CAAC,GAAgB,KAAA,IAAA,CAAK,QAAQ,GAAI,CAAA,GAAG,CAAG,EAAA,EAAE,CAAA,CAAA;AAElE,EAAA,MAAM,GAAM,GAAAA,iBAAA,CAAY,CAAC,GAAA,EAAa,KAAuB,KAAA;AAC3D,IAAK,IAAA,CAAA,OAAA,CAAQ,GAAI,CAAA,GAAA,EAAK,KAAK,CAAA,CAAA;AAC3B,IAAY,WAAA,EAAA,CAAA;AAAA,GACd,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,MAAA,GAASA,kBAAY,MAAM;AAC/B,IAAA,MAAM,OAAsB,EAAC,CAAA;AAC7B,IAAA,IAAA,CAAK,QAAQ,OAAQ,CAAA,CAAC,UAAU,IAAK,CAAA,IAAA,CAAK,KAAK,CAAC,CAAA,CAAA;AAChD,IAAO,OAAA,IAAA,CAAA;AAAA,GACT,EAAG,EAAE,CAAA,CAAA;AAEL,EAAO,OAAAC,aAAA,CAAQ,OAAO,EAAE,GAAK,EAAA,GAAA,EAAK,MAAO,EAAA,CAAA,EAAI,CAAC,GAAA,EAAK,GAAK,EAAA,MAAM,CAAC,CAAA,CAAA;AACjE;;;;"}

package/dist-cjs/packages/lab/src/cascading-menu/internal/useStateReducer.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var CascadingMenuAction = require('./CascadingMenuAction.js');
+
+function getDefaultMenuState(id) {
+  return {
+    id,
+    highlightedItemIndex: null
+  };
+}
+function deleteAllMenusStartingFromLevel(level, menus) {
+  const newState = [...menus];
+  newState.splice(level);
+  return newState;
+}
+function menuPositionReducer(state, action, level) {
+  const { type } = action;
+  switch (type) {
+    case CascadingMenuAction.CascadingMenuAction.SET_FLIPPED:
+      state[level] = {
+        ...state[level]
+      };
+      return state;
+    default:
+      return state;
+  }
+}
+function useStateReducer(menusDataById = {}, isNavigatingWithKeyboard) {
+  return React.useCallback(
+    (state, action) => {
+      let newState = [...state];
+      const { type, targetId, highlightedItemIndex = null } = action;
+      const { level, childMenus = [] } = Object(
+        menusDataById[targetId]
+      );
+      const childId = typeof highlightedItemIndex === "number" ? childMenus[highlightedItemIndex] : null;
+      const childMenuData = childId ? menusDataById[childId] : void 0;
+      newState = menuPositionReducer(newState, action, level);
+      switch (type) {
+        case CascadingMenuAction.CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM:
+          newState[level] = {
+            ...newState[level],
+            highlightedItemIndex
+          };
+          newState = deleteAllMenusStartingFromLevel(level + 1, newState);
+          if (childId && childMenuData && !isNavigatingWithKeyboard) {
+            newState[childMenuData.level] = getDefaultMenuState(childId);
+          }
+          break;
+        case CascadingMenuAction.CascadingMenuAction.RESET_MENU:
+          newState[level] = {
+            ...newState[level],
+            highlightedItemIndex: null
+          };
+          newState = deleteAllMenusStartingFromLevel(level + 1, newState);
+          break;
+        case CascadingMenuAction.CascadingMenuAction.OPEN_MENU:
+          newState[level] = getDefaultMenuState(targetId);
+          break;
+        case CascadingMenuAction.CascadingMenuAction.CLOSE_MENU:
+          newState = deleteAllMenusStartingFromLevel(level, newState);
+          break;
+        case CascadingMenuAction.CascadingMenuAction.CLOSE_CASCADING_MENU:
+          newState = [];
+          break;
+      }
+      return newState;
+    },
+    [isNavigatingWithKeyboard, menusDataById]
+  );
+}
+
+exports.useStateReducer = useStateReducer;
+//# sourceMappingURL=useStateReducer.js.map

package/dist-cjs/packages/lab/src/cascading-menu/internal/useStateReducer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStateReducer.js","sources":["../src/cascading-menu/internal/useStateReducer.ts"],"sourcesContent":["import { useCallback } from \"react\";\n\nimport { flattenedMenuState, menuState } from \"./stateUtils\";\nimport { CascadingMenuAction, menuAction } from \"./CascadingMenuAction\";\n\nexport type stateItem = {\n  id: string;\n  highlightedItemIndex: number | null;\n};\n\ntype state = stateItem[];\n\nfunction getDefaultMenuState(id: string): stateItem {\n  return {\n    id,\n    highlightedItemIndex: null,\n  };\n}\n\nfunction deleteAllMenusStartingFromLevel(level: number, menus: stateItem[]) {\n  const newState = [...menus];\n  newState.splice(level);\n  return newState;\n}\n\nfunction menuPositionReducer(state: state, action: menuAction, level: number) {\n  const { type } = action;\n  switch (type) {\n    case CascadingMenuAction.SET_FLIPPED:\n      state[level] = {\n        ...state[level],\n      };\n      return state;\n    default:\n      return state;\n  }\n}\n\nexport function useStateReducer(\n  menusDataById: flattenedMenuState = {},\n  isNavigatingWithKeyboard: boolean\n) {\n  return useCallback(\n    (state: state, action: menuAction): state => {\n      let newState = [...state];\n      const { type, targetId, highlightedItemIndex = null } = action;\n      const { level, childMenus = [] } = Object(\n        menusDataById[targetId]\n      ) as menuState;\n      const childId =\n        typeof highlightedItemIndex === \"number\"\n          ? childMenus[highlightedItemIndex]\n          : null;\n      const childMenuData = childId ? menusDataById[childId] : undefined;\n\n      newState = menuPositionReducer(newState, action, level);\n      switch (type) {\n        case CascadingMenuAction.SET_CURRENT_INTERACTED_ITEM:\n          newState[level] = {\n            ...newState[level],\n            highlightedItemIndex,\n          };\n          newState = deleteAllMenusStartingFromLevel(level + 1, newState);\n          if (childId && childMenuData && !isNavigatingWithKeyboard) {\n            newState[childMenuData.level] = getDefaultMenuState(childId);\n          }\n          break;\n        case CascadingMenuAction.RESET_MENU:\n          newState[level] = {\n            ...newState[level],\n            highlightedItemIndex: null,\n          };\n          newState = deleteAllMenusStartingFromLevel(level + 1, newState);\n          break;\n        case CascadingMenuAction.OPEN_MENU:\n          newState[level] = getDefaultMenuState(targetId);\n          break;\n        case CascadingMenuAction.CLOSE_MENU:\n          newState = deleteAllMenusStartingFromLevel(level, newState);\n          break;\n        case CascadingMenuAction.CLOSE_CASCADING_MENU:\n          newState = [];\n          break;\n        default:\n          break;\n      }\n      return newState;\n    },\n    [isNavigatingWithKeyboard, menusDataById]\n  );\n}\n"],"names":["CascadingMenuAction","useCallback"],"mappings":";;;;;;;AAYA,SAAS,oBAAoB,EAAuB,EAAA;AAClD,EAAO,OAAA;AAAA,IACL,EAAA;AAAA,IACA,oBAAsB,EAAA,IAAA;AAAA,GACxB,CAAA;AACF,CAAA;AAEA,SAAS,+BAAA,CAAgC,OAAe,KAAoB,EAAA;AAC1E,EAAM,MAAA,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAA;AAC1B,EAAA,QAAA,CAAS,OAAO,KAAK,CAAA,CAAA;AACrB,EAAO,OAAA,QAAA,CAAA;AACT,CAAA;AAEA,SAAS,mBAAA,CAAoB,KAAc,EAAA,MAAA,EAAoB,KAAe,EAAA;AAC5E,EAAM,MAAA,EAAE,MAAS,GAAA,MAAA,CAAA;AACjB,EAAQ,QAAA,IAAA;AAAA,IAAA,KACDA,uCAAoB,CAAA,WAAA;AACvB,MAAA,KAAA,CAAM,KAAS,CAAA,GAAA;AAAA,QACb,GAAG,KAAM,CAAA,KAAA,CAAA;AAAA,OACX,CAAA;AACA,MAAO,OAAA,KAAA,CAAA;AAAA,IAAA;AAEP,MAAO,OAAA,KAAA,CAAA;AAAA,GAAA;AAEb,CAAA;AAEO,SAAS,eACd,CAAA,aAAA,GAAoC,EAAC,EACrC,wBACA,EAAA;AACA,EAAO,OAAAC,iBAAA;AAAA,IACL,CAAC,OAAc,MAA8B,KAAA;AAC3C,MAAI,IAAA,QAAA,GAAW,CAAC,GAAG,KAAK,CAAA,CAAA;AACxB,MAAA,MAAM,EAAE,IAAA,EAAM,QAAU,EAAA,oBAAA,GAAuB,MAAS,GAAA,MAAA,CAAA;AACxD,MAAA,MAAM,EAAE,KAAA,EAAO,UAAa,GAAA,IAAO,GAAA,MAAA;AAAA,QACjC,aAAc,CAAA,QAAA,CAAA;AAAA,OAChB,CAAA;AACA,MAAA,MAAM,OACJ,GAAA,OAAO,oBAAyB,KAAA,QAAA,GAC5B,WAAW,oBACX,CAAA,GAAA,IAAA,CAAA;AACN,MAAM,MAAA,aAAA,GAAgB,OAAU,GAAA,aAAA,CAAc,OAAW,CAAA,GAAA,KAAA,CAAA,CAAA;AAEzD,MAAW,QAAA,GAAA,mBAAA,CAAoB,QAAU,EAAA,MAAA,EAAQ,KAAK,CAAA,CAAA;AACtD,MAAQ,QAAA,IAAA;AAAA,QAAA,KACDD,uCAAoB,CAAA,2BAAA;AACvB,UAAA,QAAA,CAAS,KAAS,CAAA,GAAA;AAAA,YAChB,GAAG,QAAS,CAAA,KAAA,CAAA;AAAA,YACZ,oBAAA;AAAA,WACF,CAAA;AACA,UAAW,QAAA,GAAA,+BAAA,CAAgC,KAAQ,GAAA,CAAA,EAAG,QAAQ,CAAA,CAAA;AAC9D,UAAI,IAAA,OAAA,IAAW,aAAiB,IAAA,CAAC,wBAA0B,EAAA;AACzD,YAAS,QAAA,CAAA,aAAA,CAAc,KAAS,CAAA,GAAA,mBAAA,CAAoB,OAAO,CAAA,CAAA;AAAA,WAC7D;AACA,UAAA,MAAA;AAAA,QAAA,KACGA,uCAAoB,CAAA,UAAA;AACvB,UAAA,QAAA,CAAS,KAAS,CAAA,GAAA;AAAA,YAChB,GAAG,QAAS,CAAA,KAAA,CAAA;AAAA,YACZ,oBAAsB,EAAA,IAAA;AAAA,WACxB,CAAA;AACA,UAAW,QAAA,GAAA,+BAAA,CAAgC,KAAQ,GAAA,CAAA,EAAG,QAAQ,CAAA,CAAA;AAC9D,UAAA,MAAA;AAAA,QAAA,KACGA,uCAAoB,CAAA,SAAA;AACvB,UAAS,QAAA,CAAA,KAAA,CAAA,GAAS,oBAAoB,QAAQ,CAAA,CAAA;AAC9C,UAAA,MAAA;AAAA,QAAA,KACGA,uCAAoB,CAAA,UAAA;AACvB,UAAW,QAAA,GAAA,+BAAA,CAAgC,OAAO,QAAQ,CAAA,CAAA;AAC1D,UAAA,MAAA;AAAA,QAAA,KACGA,uCAAoB,CAAA,oBAAA;AACvB,UAAA,QAAA,GAAW,EAAC,CAAA;AACZ,UAAA,MAAA;AAEA,OAAA;AAEJ,MAAO,OAAA,QAAA,CAAA;AAAA,KACT;AAAA,IACA,CAAC,0BAA0B,aAAa,CAAA;AAAA,GAC1C,CAAA;AACF;;;;"}

package/dist-cjs/packages/lab/src/cascading-menu/stateChangeTypes.js

@@ -0,0 +1,28 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const stateChangeTypes = {
+  KEYBOARD_TOGGLE: "keyboardToggle",
+  MOUSE_TOGGLE: "mouseToggle",
+  CLICKED_AWAY: "clickedAway",
+  ON_RESIZE: "onResize",
+  ITEM_CLICKED: "itemClicked",
+  ITEM_KEYDOWN_ENTER: "itemKeydownEnter",
+  ITEM_KEYDOWN_ARROW_RIGHT: "itemKeydownArrowRight",
+  ITEM_KEYDOWN_ARROW_LEFT: "itemKeydownArrowLeft",
+  ITEM_KEYDOWN_ARROW_DOWN: "itemKeydownArrowDown",
+  ITEM_KEYDOWN_ARROW_UP: "itemKeydownArrowUp",
+  ITEM_KEYDOWN_SPACEBAR: "itemKeydownSpacebar",
+  ITEM_KEYDOWN_TAB: "itemKeydownTab",
+  ITEM_KEYDOWN_ESCAPE: "itemKeydownEscape",
+  ITEM_KEYDOWN_HOME: "itemKeydownHome",
+  ITEM_KEYDOWN_END: "itemKeydownEnd",
+  ITEM_MOUSE_ENTER: "itemMouseEnter",
+  ITEM_MOUSE_MOVE_TO_PARENT: "itemMouseMoveToParent",
+  MOUSE_OUT_OF_MENUS: "mouseOutOfMenus",
+  KEYBOARD_NAV_AUTO_FOCUS: "keyboardNavAutoFocus"
+};
+
+exports.stateChangeTypes = stateChangeTypes;
+//# sourceMappingURL=stateChangeTypes.js.map

package/dist-cjs/packages/lab/src/cascading-menu/stateChangeTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stateChangeTypes.js","sources":["../src/cascading-menu/stateChangeTypes.ts"],"sourcesContent":["export type stateChangeCause =\n  | \"keyboardToggle\"\n  | \"mouseToggle\"\n  | \"clickedAway\"\n  | \"onResize\"\n  | \"itemClicked\"\n  | \"itemKeydownEnter\"\n  | \"itemKeydownArrowRight\"\n  | \"itemKeydownArrowLeft\"\n  | \"itemKeydownArrowDown\"\n  | \"itemKeydownArrowUp\"\n  | \"itemKeydownSpacebar\"\n  | \"itemKeydownTab\"\n  | \"itemKeydownEscape\"\n  | \"itemKeydownHome\"\n  | \"itemKeydownEnd\"\n  | \"itemMouseEnter\"\n  | \"itemMouseMoveToParent\"\n  | \"mouseOutOfMenus\"\n  | \"keyboardNavAutoFocus\";\n\nexport const stateChangeTypes: { [key: string]: stateChangeCause } = {\n  KEYBOARD_TOGGLE: \"keyboardToggle\",\n  MOUSE_TOGGLE: \"mouseToggle\",\n  CLICKED_AWAY: \"clickedAway\",\n  ON_RESIZE: \"onResize\",\n  ITEM_CLICKED: \"itemClicked\",\n  ITEM_KEYDOWN_ENTER: \"itemKeydownEnter\",\n  ITEM_KEYDOWN_ARROW_RIGHT: \"itemKeydownArrowRight\",\n  ITEM_KEYDOWN_ARROW_LEFT: \"itemKeydownArrowLeft\",\n  ITEM_KEYDOWN_ARROW_DOWN: \"itemKeydownArrowDown\",\n  ITEM_KEYDOWN_ARROW_UP: \"itemKeydownArrowUp\",\n  ITEM_KEYDOWN_SPACEBAR: \"itemKeydownSpacebar\",\n  ITEM_KEYDOWN_TAB: \"itemKeydownTab\",\n  ITEM_KEYDOWN_ESCAPE: \"itemKeydownEscape\",\n  ITEM_KEYDOWN_HOME: \"itemKeydownHome\",\n  ITEM_KEYDOWN_END: \"itemKeydownEnd\",\n  ITEM_MOUSE_ENTER: \"itemMouseEnter\",\n  ITEM_MOUSE_MOVE_TO_PARENT: \"itemMouseMoveToParent\",\n  MOUSE_OUT_OF_MENUS: \"mouseOutOfMenus\",\n  KEYBOARD_NAV_AUTO_FOCUS: \"keyboardNavAutoFocus\",\n};\n"],"names":[],"mappings":";;;;AAqBO,MAAM,gBAAwD,GAAA;AAAA,EACnE,eAAiB,EAAA,gBAAA;AAAA,EACjB,YAAc,EAAA,aAAA;AAAA,EACd,YAAc,EAAA,aAAA;AAAA,EACd,SAAW,EAAA,UAAA;AAAA,EACX,YAAc,EAAA,aAAA;AAAA,EACd,kBAAoB,EAAA,kBAAA;AAAA,EACpB,wBAA0B,EAAA,uBAAA;AAAA,EAC1B,uBAAyB,EAAA,sBAAA;AAAA,EACzB,uBAAyB,EAAA,sBAAA;AAAA,EACzB,qBAAuB,EAAA,oBAAA;AAAA,EACvB,qBAAuB,EAAA,qBAAA;AAAA,EACvB,gBAAkB,EAAA,gBAAA;AAAA,EAClB,mBAAqB,EAAA,mBAAA;AAAA,EACrB,iBAAmB,EAAA,iBAAA;AAAA,EACnB,gBAAkB,EAAA,gBAAA;AAAA,EAClB,gBAAkB,EAAA,gBAAA;AAAA,EAClB,yBAA2B,EAAA,uBAAA;AAAA,EAC3B,kBAAoB,EAAA,iBAAA;AAAA,EACpB,uBAAyB,EAAA,sBAAA;AAC3B;;;;"}

package/dist-cjs/packages/lab/src/checkbox/Checkbox.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = "/* Styles applied to root component */\n.salt-density-medium {\n  --checkbox-fontSize: 12px;\n}\n.salt-density-touch {\n  --checkbox-fontSize: 16px;\n}\n.salt-density-low {\n  --checkbox-fontSize: 14px;\n}\n.salt-density-high {\n  --checkbox-fontSize: 11px;\n}\n\n.saltCheckbox {\n  --checkbox-label-marginTop: calc(var(--salt-size-unit) * var(--checkbox-top-multiplier));\n  --checkbox-space-multiplier: var(--saltCheckbox-space-multiplier, 3);\n  --checkbox-top-multiplier: var(--saltCheckbox-top-multiplier, 0.75);\n}\n\n.saltCheckbox {\n  line-height: var(--saltCheckbox-lineHeight, 1);\n}\n\n/* Styles applied to root component if `disabled={true}` */\n.saltCheckbox-disabled {\n  pointer-events: visible;\n}\n\n/* Styles applied to label element */\n.saltCheckbox-label {\n  align-items: flex-start;\n  margin-top: var(--checkbox-label-marginTop);\n}\n\n.saltCheckbox .saltControlLabel-label {\n  vertical-align: baseline;\n  min-height: var(--saltCheckbox-label-minHeight, var(--salt-text-minHeight));\n}\n\n.saltCheckbox-disabled {\n  --saltControlLabel-color: var(--salt-text-primary-foreground-disabled);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=Checkbox.css.js.map

package/dist-cjs/packages/lab/src/checkbox/Checkbox.css.js.map

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

package/dist-cjs/packages/lab/src/checkbox/Checkbox.js

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('classnames');
+var React = require('react');
+var core = require('@salt-ds/core');
+var ControlLabel = require('../control-label/ControlLabel.js');
+var CheckboxBase = require('./CheckboxBase.js');
+var CheckboxGroupContext = require('./internal/CheckboxGroupContext.js');
+require('./Checkbox.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const classBase = "saltCheckbox";
+const Checkbox = React.forwardRef(
+  function Checkbox2(props, ref) {
+    var _a;
+    const {
+      checked: checkedProp,
+      className,
+      defaultChecked: defaultCheckedProp,
+      disabled,
+      indeterminate,
+      inputProps,
+      label,
+      LabelProps,
+      onChange,
+      value,
+      ...rest
+    } = props;
+    const groupContext = React.useContext(CheckboxGroupContext.CheckboxGroupContext);
+    const handleChange = core.createChainedFunction(
+      onChange,
+      groupContext == null ? void 0 : groupContext.onChange
+    );
+    let checked = checkedProp;
+    let defaultChecked = defaultCheckedProp;
+    if (groupContext) {
+      if (typeof checked === "undefined" && typeof value === "string") {
+        checked = (_a = groupContext == null ? void 0 : groupContext.checkedValues) == null ? void 0 : _a.includes(value);
+      }
+      defaultChecked = void 0;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", {
+      ...rest,
+      className: cx__default["default"](classBase, className, {
+        [`${classBase}-disabled`]: disabled
+      }),
+      "data-testid": "checkbox",
+      ref,
+      children: /* @__PURE__ */ jsxRuntime.jsx(ControlLabel.ControlLabel, {
+        ...LabelProps,
+        className: `${classBase}-label`,
+        disabled,
+        label,
+        labelPlacement: "right",
+        children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxBase.CheckboxBase, {
+          checked,
+          disabled,
+          defaultChecked,
+          indeterminate,
+          onChange: handleChange,
+          value
+        })
+      })
+    });
+  }
+);
+
+exports.Checkbox = Checkbox;
+//# sourceMappingURL=Checkbox.js.map

package/dist-cjs/packages/lab/src/checkbox/Checkbox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../src/checkbox/Checkbox.tsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { forwardRef, useContext } from \"react\";\nimport { createChainedFunction } from \"@salt-ds/core\";\nimport { ControlLabel, ControlLabelProps } from \"../control-label\";\nimport { CheckboxBase, CheckboxBaseProps } from \"./CheckboxBase\";\nimport { CheckboxGroupContext } from \"./internal/CheckboxGroupContext\";\n\nimport \"./Checkbox.css\";\n\nexport interface CheckboxProps extends CheckboxBaseProps {\n  label?: ControlLabelProps[\"label\"];\n  LabelProps?: Partial<ControlLabelProps>;\n}\n\nconst classBase = \"saltCheckbox\";\n\nexport const Checkbox = forwardRef<HTMLDivElement, CheckboxProps>(\n  function Checkbox(props, ref) {\n    const {\n      checked: checkedProp,\n      className,\n      defaultChecked: defaultCheckedProp,\n      disabled,\n      indeterminate,\n      inputProps,\n      label,\n      LabelProps,\n      onChange,\n      value,\n      ...rest\n    } = props;\n\n    const groupContext = useContext(CheckboxGroupContext);\n\n    const handleChange = createChainedFunction(\n      onChange,\n      groupContext?.onChange\n    );\n\n    let checked = checkedProp;\n    let defaultChecked = defaultCheckedProp;\n\n    if (groupContext) {\n      if (typeof checked === \"undefined\" && typeof value === \"string\") {\n        checked = groupContext?.checkedValues?.includes(value);\n      }\n\n      defaultChecked = undefined;\n    }\n\n    return (\n      <div\n        {...rest}\n        className={classnames(classBase, className, {\n          [`${classBase}-disabled`]: disabled,\n        })}\n        data-testid=\"checkbox\"\n        ref={ref}\n      >\n        <ControlLabel\n          {...LabelProps}\n          className={`${classBase}-label`}\n          disabled={disabled}\n          label={label}\n          labelPlacement={\"right\"}\n        >\n          <CheckboxBase\n            checked={checked}\n            disabled={disabled}\n            defaultChecked={defaultChecked}\n            indeterminate={indeterminate}\n            onChange={handleChange}\n            value={value}\n          />\n        </ControlLabel>\n      </div>\n    );\n  }\n);\n"],"names":["forwardRef","Checkbox","useContext","CheckboxGroupContext","createChainedFunction","jsx","classnames","ControlLabel","CheckboxBase"],"mappings":";;;;;;;;;;;;;;;;;AAcA,MAAM,SAAY,GAAA,cAAA,CAAA;AAEX,MAAM,QAAW,GAAAA,gBAAA;AAAA,EACtB,SAASC,SAAS,CAAA,KAAA,EAAO,GAAK,EAAA;AAjBhC,IAAA,IAAA,EAAA,CAAA;AAkBI,IAAM,MAAA;AAAA,MACJ,OAAS,EAAA,WAAA;AAAA,MACT,SAAA;AAAA,MACA,cAAgB,EAAA,kBAAA;AAAA,MAChB,QAAA;AAAA,MACA,aAAA;AAAA,MACA,UAAA;AAAA,MACA,KAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,KAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAM,MAAA,YAAA,GAAeC,iBAAWC,yCAAoB,CAAA,CAAA;AAEpD,IAAA,MAAM,YAAe,GAAAC,0BAAA;AAAA,MACnB,QAAA;AAAA,MACA,YAAc,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAA,QAAA;AAAA,KAChB,CAAA;AAEA,IAAA,IAAI,OAAU,GAAA,WAAA,CAAA;AACd,IAAA,IAAI,cAAiB,GAAA,kBAAA,CAAA;AAErB,IAAA,IAAI,YAAc,EAAA;AAChB,MAAA,IAAI,OAAO,OAAA,KAAY,WAAe,IAAA,OAAO,UAAU,QAAU,EAAA;AAC/D,QAAU,OAAA,GAAA,CAAA,EAAA,GAAA,YAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,YAAA,CAAc,aAAd,KAAA,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAA6B,QAAS,CAAA,KAAA,CAAA,CAAA;AAAA,OAClD;AAEA,MAAiB,cAAA,GAAA,KAAA,CAAA,CAAA;AAAA,KACnB;AAEA,IAAA,uBACGC,cAAA,CAAA,KAAA,EAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,SAAA,EAAWC,sBAAW,CAAA,SAAA,EAAW,SAAW,EAAA;AAAA,QAC1C,CAAC,GAAG,SAAuB,CAAA,SAAA,CAAA,GAAA,QAAA;AAAA,OAC5B,CAAA;AAAA,MACD,aAAY,EAAA,UAAA;AAAA,MACZ,GAAA;AAAA,MAEA,QAAC,kBAAAD,cAAA,CAAAE,yBAAA,EAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,WAAW,CAAG,EAAA,SAAA,CAAA,MAAA,CAAA;AAAA,QACd,QAAA;AAAA,QACA,KAAA;AAAA,QACA,cAAgB,EAAA,OAAA;AAAA,QAEhB,QAAC,kBAAAF,cAAA,CAAAG,yBAAA,EAAA;AAAA,UACC,OAAA;AAAA,UACA,QAAA;AAAA,UACA,cAAA;AAAA,UACA,aAAA;AAAA,UACA,QAAU,EAAA,YAAA;AAAA,UACV,KAAA;AAAA,SACF,CAAA;AAAA,OACF,CAAA;AAAA,KACF,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/packages/lab/src/checkbox/CheckboxBase.css.js

@@ -0,0 +1,9 @@
+'use strict';
+
+var styleInject_es = require('../../../../node_modules/style-inject/dist/style-inject.es.js');
+
+var css_248z = ".saltCheckboxBase {\n  background: var(--saltCheckbox-background, none);\n  line-height: 0;\n  padding-top: 1px;\n  padding-bottom: 1px;\n  position: relative;\n}\n\n/* Styles applied to input element */\n.saltCheckboxBase-input {\n  cursor: inherit;\n  height: 10px;\n  left: 0;\n  margin: 0;\n  opacity: 0;\n  padding: 0;\n  position: absolute;\n  top: 0;\n  width: 10px;\n  z-index: var(--salt-zIndex-default);\n}\n";
+styleInject_es(css_248z);
+
+module.exports = css_248z;
+//# sourceMappingURL=CheckboxBase.css.js.map

package/dist-cjs/packages/lab/src/checkbox/CheckboxBase.css.js.map

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

package/dist-cjs/packages/lab/src/checkbox/CheckboxBase.js

@@ -0,0 +1,103 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var cx = require('classnames');
+var React = require('react');
+var core = require('@salt-ds/core');
+var CheckboxIcon = require('./CheckboxIcon.js');
+require('./CheckboxBase.css.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const withBaseName = core.makePrefixer("saltCheckboxBase");
+const CheckboxBase = React.forwardRef(
+  function CheckboxBase2({
+    checked: checkedProp,
+    className: classNameProp,
+    defaultChecked,
+    disabled,
+    indeterminate,
+    inputProps,
+    name,
+    onBlur,
+    onChange,
+    onFocus,
+    value,
+    ...rest
+  }, ref) {
+    const inputRef = React.useRef(null);
+    const [checked, setChecked] = core.useControlled({
+      controlled: checkedProp,
+      default: Boolean(defaultChecked),
+      name: "Checkbox",
+      state: "checked"
+    });
+    const [focusVisible, setFocusVisible] = React.useState(false);
+    const handleChange = (event) => {
+      if (event.nativeEvent.defaultPrevented) {
+        return;
+      }
+      const value2 = event.target.checked;
+      setChecked(value2);
+      onChange == null ? void 0 : onChange(event, value2);
+    };
+    const handleFocus = React.useCallback(
+      (event) => {
+        var _a;
+        if (!inputRef.current) {
+          inputRef.current = event.currentTarget;
+        }
+        if ((_a = inputRef.current) == null ? void 0 : _a.matches(":focus-visible")) {
+          setFocusVisible(true);
+        }
+        onFocus && onFocus(event);
+      },
+      [onFocus]
+    );
+    const handleBlur = React.useCallback(
+      (event) => {
+        setFocusVisible(false);
+        onBlur && onBlur(event);
+      },
+      [onBlur]
+    );
+    const className = cx__default["default"](withBaseName(), classNameProp, {
+      saltFocusVisible: focusVisible
+    });
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", {
+      ...rest,
+      className,
+      ref,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("input", {
+          "aria-checked": indeterminate ? "mixed" : checked,
+          name,
+          value,
+          ...inputProps,
+          checked: checkedProp,
+          className: withBaseName("input"),
+          "data-indeterminate": indeterminate,
+          defaultChecked,
+          disabled,
+          onBlur: handleBlur,
+          onChange: handleChange,
+          onFocus: handleFocus,
+          ref: inputRef,
+          type: "checkbox"
+        }),
+        /* @__PURE__ */ jsxRuntime.jsx(CheckboxIcon.CheckboxIcon, {
+          checked,
+          disabled,
+          indeterminate
+        })
+      ]
+    });
+  }
+);
+
+exports.CheckboxBase = CheckboxBase;
+//# sourceMappingURL=CheckboxBase.js.map