cetec-design-system 1.3.0 → 1.3.1

package/dist/index.js

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import * as React from "react";
 import { createContext, useContext, useMemo, forwardRef, createElement, useState, useSyncExternalStore, useLayoutEffect, useRef, useCallback, useEffect, useId as useId$1, isValidElement, Children, cloneElement, useReducer } from "react";
-import { b as breakpoints, c as containerSizes } from "./cetec-preset-DoOSSOUC.js";
-import { a } from "./cetec-preset-DoOSSOUC.js";
+import { b as breakpoints, c as containerSizes } from "./cetec-preset-DA6_Lz-z.js";
+import { a } from "./cetec-preset-DA6_Lz-z.js";
 import * as ReactDOM from "react-dom";
 function isObject(value) {
   return typeof value === "object" && value != null && !Array.isArray(value);
@@ -1681,7 +1681,8 @@ const toggle = /* @__PURE__ */ Object.assign(toggleFn, {
   getVariantProps: getVariantProps$o
 });
 const autocompleteDefaultVariants = {
-  "size": "md"
+  "size": "md",
+  "layer": "elevated"
 };
 const autocompleteCompoundVariants = [];
 const autocompleteSlotNames = [
@@ -1731,6 +1732,7 @@ const autocompleteFn = memo((props = {}) => {
   return Object.fromEntries(autocompleteSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const autocompleteVariantKeys = [
+  "layer",
   "size"
 ];
 const getVariantProps$n = (variants) => ({ ...autocompleteDefaultVariants, ...compact(variants) });
@@ -1741,6 +1743,10 @@ const autocomplete = /* @__PURE__ */ Object.assign(autocompleteFn, {
   classNameMap: {},
   variantKeys: autocompleteVariantKeys,
   variantMap: {
+    "layer": [
+      "elevated",
+      "modalFloating"
+    ],
     "size": [
       "sm",
       "md",
@@ -2487,7 +2493,8 @@ const listItem = /* @__PURE__ */ Object.assign(listItemFn, {
   getVariantProps: getVariantProps$9
 });
 const menuDefaultVariants = {
-  "density": "compact"
+  "density": "compact",
+  "layer": "elevated"
 };
 const menuCompoundVariants = [];
 const menuSlotNames = [
@@ -2525,6 +2532,7 @@ const menuFn = memo((props = {}) => {
   return Object.fromEntries(menuSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const menuVariantKeys = [
+  "layer",
   "density",
   "panel"
 ];
@@ -2536,6 +2544,10 @@ const menu = /* @__PURE__ */ Object.assign(menuFn, {
   classNameMap: {},
   variantKeys: menuVariantKeys,
   variantMap: {
+    "layer": [
+      "elevated",
+      "modalFloating"
+    ],
     "density": [
       "compact",
       "comfortable",
@@ -12481,6 +12493,10 @@ const tokens = {
     "value": 1101,
     "variable": "var(--cetec-z-index-1101)"
   },
+  "zIndex.1102": {
+    "value": 1102,
+    "variable": "var(--cetec-z-index-1102)"
+  },
   "zIndex.1200": {
     "value": 1200,
     "variable": "var(--cetec-z-index-1200)"
@@ -13785,6 +13801,10 @@ const tokens = {
     "value": "var(--cetec-z-index-1101)",
     "variable": "var(--cetec-z-index-modal)"
   },
+  "zIndex.modalFloating": {
+    "value": "var(--cetec-z-index-1102)",
+    "variable": "var(--cetec-z-index-modal-floating)"
+  },
   "zIndex.tooltip": {
     "value": "var(--cetec-z-index-1200)",
     "variable": "var(--cetec-z-index-tooltip)"
@@ -17601,6 +17621,8 @@ const DateTimeInput = (props) => {
     }
   );
 };
+const FloatingLayerContext = createContext("elevated");
+const useFloatingLayer = () => useContext(FloatingLayerContext);
 const MENU_COMPONENT_TYPES = {
   group: "MenuGroup",
   item: "MenuItem",
@@ -17844,6 +17866,7 @@ const withLevelScopedKeys = (nodes, levelKey) => {
 const Menu = (props) => {
   var _a;
   const nodeId = useFloatingNodeId();
+  const floatingLayer = useFloatingLayer();
   const {
     trigger,
     children,
@@ -17870,7 +17893,7 @@ const Menu = (props) => {
   } = props;
   const [className, otherProps] = splitProps(rest);
   const userStyle = otherProps.style;
-  const classes = menu({ density, panel });
+  const classes = menu({ density, panel, layer: floatingLayer });
   const listClassName = list({ density });
   const hasReference = Boolean(trigger) && !inline;
   const [uncontrolledOpen, setUncontrolledOpen] = useState(
@@ -18645,6 +18668,7 @@ const SubMenu = (props) => {
   const nodeId = useFloatingNodeId();
   const parentId = useFloatingParentNodeId();
   const tree = useFloatingTree();
+  const floatingLayer = useFloatingLayer();
   const {
     label: label2,
     description,
@@ -18667,7 +18691,10 @@ const SubMenu = (props) => {
   const parentListContext = useMenuListContext();
   const resolvedInteraction = interaction ?? rootContext.subMenuInteraction;
   const resolvedDensity = typeof density === "string" ? density : rootContext.density;
-  const classes = menu({ density: resolvedDensity });
+  const classes = menu({
+    density: resolvedDensity,
+    layer: floatingLayer
+  });
   const listClassName = list({ density: resolvedDensity });
   const itemClassName = listItem({
     density: resolvedDensity,
@@ -20822,7 +20849,7 @@ const Modal = (props) => {
     return null;
   }
   const dataState = phase === "closing" ? "closing" : "open";
-  return /* @__PURE__ */ jsx(ModalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsxs(Box, { className: classes.positionWrapper, children: [
+  return /* @__PURE__ */ jsx(FloatingLayerContext.Provider, { value: "modalFloating", children: /* @__PURE__ */ jsx(ModalContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsxs(Box, { className: classes.positionWrapper, children: [
     /* @__PURE__ */ jsx(
       FloatingOverlay,
       {
@@ -20848,7 +20875,7 @@ const Modal = (props) => {
         children
       }
     ) })
-  ] }) }) }) });
+  ] }) }) }) }) });
 };
 const ModalHeader = (props) => {
   const { title, showCloseButton = true, children, ...rest } = props;
@@ -21071,6 +21098,7 @@ const dsPart = (part) => ({
   [DS_PART_ATTRIBUTE]: part
 });
 const AutocompleteListbox = (props) => {
+  const floatingLayer = useFloatingLayer();
   const {
     activeIndex,
     baseId,
@@ -21095,7 +21123,7 @@ const AutocompleteListbox = (props) => {
     statusClassName,
     value
   } = props;
-  const menuClasses = menu({ density });
+  const menuClasses = menu({ density, layer: floatingLayer });
   const showInitialLoading = loading && items.length === 0;
   const showNoOptions = !loading && items.length === 0;
   const selectedValueSet = new Set(selectedValues);
@@ -21436,6 +21464,7 @@ const getDismissReason = (reason) => {
   return reason === "escape-key" ? "escape" : "outside-press";
 };
 const useAutocompleteController = (props) => {
+  const floatingLayer = useFloatingLayer();
   const fieldContext = useFieldContext();
   const {
     value: controlledValue,
@@ -21647,7 +21676,7 @@ const useAutocompleteController = (props) => {
   const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
     [dismiss, role, listNavigation]
   );
-  const classes = autocomplete({ size: size$12 });
+  const classes = autocomplete({ size: size$12, layer: floatingLayer });
   const chipSize = resolveChipSize$1(size$12);
   const shouldLimitTags = Boolean(multiple) && typeof limitTags === "number" && limitTags >= 0 && !focusedWithin;
   const visibleTagCount = shouldLimitTags ? limitTags : selectedValues.length;
@@ -22171,6 +22200,7 @@ const getSelectedOptions = (options, value, multiple) => {
   return options.filter((option) => selectedValueSet.has(option.props.value));
 };
 const Select = (props) => {
+  const floatingLayer = useFloatingLayer();
   const {
     value: controlledValue,
     defaultValue = null,
@@ -22305,7 +22335,7 @@ const Select = (props) => {
   );
   const selectedOptions = getSelectedOptions(options, value, multiple);
   const classes = select({ size: size$12, multiple, autoSize });
-  const menuClasses = menu({ density });
+  const menuClasses = menu({ density, layer: floatingLayer });
   const hasValue = value !== null && value !== void 0 && value !== "";
   const chipSize = resolveChipSize(size$12);
   const accessibleName = typeof displayValue === "string" && displayValue.length > 0 ? displayValue : placeholder;