cetec-design-system 1.3.1 → 1.4.0

package/dist/index.js

@@ -3017,6 +3017,7 @@ const tooltip = /* @__PURE__ */ Object.assign(tooltipFn, {
 });
 const DS_CHAIN_SEPARATOR = ">";
 const DS_CHAIN_MAX_DEPTH = 5;
+const DS_OBJECT_ATTRIBUTE = "data-track-object";
 const EMPTY_CHAIN = Object.freeze([]);
 const DsChainContext = createContext(EMPTY_CHAIN);
 const useDsChain = () => useContext(DsChainContext);
@@ -3026,6 +3027,10 @@ const extendDsChain = (chain, testId) => {
   return next.length > DS_CHAIN_MAX_DEPTH ? next.slice(-DS_CHAIN_MAX_DEPTH) : next;
 };
 const dsChainValue = (chain) => chain.length > 0 ? chain.join(DS_CHAIN_SEPARATOR) : void 0;
+const dsObjectValue = (element) => {
+  var _a;
+  return ((_a = element == null ? void 0 : element.closest(`[${DS_OBJECT_ATTRIBUTE}]`)) == null ? void 0 : _a.getAttribute(DS_OBJECT_ATTRIBUTE)) || void 0;
+};
 const DsChainScope = ({ testId, children }) => {
   const parentChain = useDsChain();
   const chain = useMemo(
@@ -15317,16 +15322,28 @@ const useOverlayFloating = (options) => {
     middleware: middleware ?? createOverlayMiddleware({ offset: offset2, shiftPadding })
   });
 };
-const DsChainPortalRoot = ({ children }) => {
+const DsChainPortalRoot = ({
+  children,
+  reference
+}) => {
   const chain = useDsChain();
   return (
-    // The marker is unconditional; the chain value is not. An empty chain emits
-    // no `data-ds-chain`, so without the marker an untagged portal is
+    // The marker is unconditional; neither value is. An empty chain emits no
+    // `data-ds-chain`, so without the marker an untagged portal is
     // indistinguishable from an ordinary element and a consumer walking up the
     // DOM continues past it into `document.body` — producing a chain from
     // whatever it finds there, with no error. The marker makes "portal
-    // boundary, chain resolved to nothing" a state a reader can detect.
-    /* @__PURE__ */ jsx("div", { "data-ds-portal-root": "", "data-ds-chain": dsChainValue(chain), children })
+    // boundary, resolved to nothing" a state a reader can detect, and it is
+    // what tells that reader to stop and take both values from here.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-ds-portal-root": "",
+        "data-ds-chain": dsChainValue(chain),
+        "data-track-object": dsObjectValue(reference),
+        children
+      }
+    )
   );
 };
 const Tooltip = (props) => {
@@ -15344,7 +15361,7 @@ const Tooltip = (props) => {
   const [className, otherProps] = splitProps(rest);
   const [isOpen, setIsOpen] = useState(false);
   const arrowRef = useRef(null);
-  const { refs, floatingStyles, context: context2 } = useOverlayFloating({
+  const { refs, elements, floatingStyles, context: context2 } = useOverlayFloating({
     open: isOpen,
     onOpenChange: setIsOpen,
     placement,
@@ -15377,7 +15394,7 @@ const Tooltip = (props) => {
         children
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsxs(
+    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: elements.domReference, children: /* @__PURE__ */ jsxs(
       Box,
       {
         ...dsComponent("Tooltip"),
@@ -18281,7 +18298,7 @@ const Menu = (props) => {
         onKeyDown: composedTriggerOnKeyDown
       }
     ),
-    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsx(
+    isOpen && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: floating.elements.domReference, children: /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
         context: floating.context,
@@ -19095,7 +19112,7 @@ const SubMenu = (props) => {
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsx(
+    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: floating.elements.domReference, children: /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
         context: floating.context,
@@ -22104,7 +22121,7 @@ const Autocomplete = (props) => {
             children: announcement
           }
         ),
-        isOpen && !disabled && !readOnly && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsx(
+        isOpen && !disabled && !readOnly && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: floating.elements.domReference, children: /* @__PURE__ */ jsx(
           FloatingFocusManager,
           {
             context: floating.context,
@@ -22457,7 +22474,7 @@ const Select = (props) => {
         children: /* @__PURE__ */ jsx(Icon, { name: "caret-down" })
       }
     ),
-    isOpen && !disabled && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { children: /* @__PURE__ */ jsx(
+    isOpen && !disabled && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(DsChainPortalRoot, { reference: floating.elements.domReference, children: /* @__PURE__ */ jsx(
       FloatingFocusManager,
       {
         context: floating.context,