@stratakit/structures 0.4.4 → 0.5.0

package/dist/Tabs.js

@@ -1,94 +1,129 @@
+import { c as _c } from "react-compiler-runtime";
 import { jsx } from "react/jsx-runtime";
 import { useStoreState } from "@ariakit/react/store";
 import * as AkTab from "@ariakit/react/tab";
-import {
-  forwardRef,
-  isBrowser,
-  useUnreactiveCallback
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, isBrowser, useUnreactiveCallback } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 const supportsAnchorPositioning = isBrowser && CSS?.supports("anchor-name: --foo");
 const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
 function TabsProvider(props) {
+  const $ = _c(14);
   const {
     defaultSelectedId,
     selectedId,
     setSelectedId,
-    selectOnMove,
+    selectOnMove: t0,
     children
   } = props;
-  const store = AkTab.useTabStore({ defaultSelectedId });
+  const selectOnMove = t0 === void 0 ? false : t0;
+  let t1;
+  if ($[0] !== defaultSelectedId) {
+    t1 = {
+      defaultSelectedId
+    };
+    $[0] = defaultSelectedId;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const store = AkTab.useTabStore(t1);
   const tablist = useStoreState(store, "baseElement");
   const selectedIdFromStore = useStoreState(store, "selectedId");
-  const flipAnimateStripe = (newSelectedId) => {
-    if (!supportsAnchorPositioning) return;
-    const rootNode = tablist?.getRootNode();
-    if (!rootNode || !selectedIdFromStore || !newSelectedId) return;
-    const previousTabRect = rootNode.getElementById?.(selectedIdFromStore)?.getBoundingClientRect();
-    const nextTabRect = rootNode.getElementById?.(newSelectedId)?.getBoundingClientRect();
-    if (!previousTabRect || !nextTabRect) return;
-    const deltaX = previousTabRect.left - nextTabRect.left;
-    const deltaWidth = previousTabRect.width / nextTabRect.width;
-    tablist?.animate(
-      [
-        { transform: `translateX(${deltaX}px) scaleX(${deltaWidth})` },
-        { transform: "none" }
-      ],
-      {
+  let t2;
+  if ($[2] !== selectedIdFromStore || $[3] !== tablist) {
+    t2 = (newSelectedId) => {
+      if (!supportsAnchorPositioning) {
+        return;
+      }
+      const rootNode = tablist?.getRootNode();
+      if (!rootNode || !selectedIdFromStore || !newSelectedId) {
+        return;
+      }
+      const previousTabRect = rootNode.getElementById?.(selectedIdFromStore)?.getBoundingClientRect();
+      const nextTabRect = rootNode.getElementById?.(newSelectedId)?.getBoundingClientRect();
+      if (!previousTabRect || !nextTabRect) {
+        return;
+      }
+      const deltaX = previousTabRect.left - nextTabRect.left;
+      const deltaWidth = previousTabRect.width / nextTabRect.width;
+      tablist?.animate([{
+        transform: `translateX(${deltaX}px) scaleX(${deltaWidth})`
+      }, {
+        transform: "none"
+      }], {
         pseudoElement: "::after",
         duration: 150,
         easing: "ease-in-out"
+      });
+    };
+    $[2] = selectedIdFromStore;
+    $[3] = tablist;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const flipAnimateStripe = t2;
+  let t3;
+  if ($[5] !== flipAnimateStripe || $[6] !== setSelectedId) {
+    t3 = (newSelectedId_0) => {
+      if (!prefersReducedMotion()) {
+        flipAnimateStripe(newSelectedId_0);
       }
-    );
-  };
-  return /* @__PURE__ */ jsx(
-    AkTab.TabProvider,
-    {
+      setSelectedId?.(newSelectedId_0);
+    };
+    $[5] = flipAnimateStripe;
+    $[6] = setSelectedId;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const t4 = useUnreactiveCallback(t3);
+  let t5;
+  if ($[8] !== children || $[9] !== selectOnMove || $[10] !== selectedId || $[11] !== store || $[12] !== t4) {
+    t5 = jsx(AkTab.TabProvider, {
       store,
       selectedId,
-      setSelectedId: useUnreactiveCallback(
-        (newSelectedId) => {
-          if (!prefersReducedMotion()) flipAnimateStripe(newSelectedId);
-          setSelectedId?.(newSelectedId);
-        }
-      ),
+      setSelectedId: t4,
       selectOnMove,
       children
-    }
-  );
+    });
+    $[8] = children;
+    $[9] = selectOnMove;
+    $[10] = selectedId;
+    $[11] = store;
+    $[12] = t4;
+    $[13] = t5;
+  } else {
+    t5 = $[13];
+  }
+  return t5;
 }
 const TabList = forwardRef((props, forwardedRef) => {
-  const { tone = "neutral", ...rest } = props;
-  return /* @__PURE__ */ jsx(
-    AkTab.TabList,
-    {
-      ...rest,
-      "data-_sk-tone": tone,
-      className: cx("\u{1F95D}TabList", props.className),
-      ref: forwardedRef
-    }
-  );
+  const {
+    tone = "neutral",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(AkTab.TabList, {
+    ...rest,
+    "data-_sk-tone": tone,
+    className: cx("\u{1F95D}TabList", props.className),
+    ref: forwardedRef
+  });
 });
 const Tab = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    AkTab.Tab,
-    {
-      accessibleWhenDisabled: true,
-      ...props,
-      className: cx("\u{1F95D}Tab", props.className),
-      ref: forwardedRef
-    }
-  );
+  return /* @__PURE__ */ jsx(AkTab.Tab, {
+    accessibleWhenDisabled: true,
+    ...props,
+    className: cx("\u{1F95D}Tab", props.className),
+    ref: forwardedRef
+  });
 });
 const TabPanel = forwardRef((props, forwardedRef) => {
-  return /* @__PURE__ */ jsx(
-    AkTab.TabPanel,
-    {
-      ...props,
-      className: cx("\u{1F95D}TabPanel", props.className),
-      ref: forwardedRef
-    }
-  );
+  return /* @__PURE__ */ jsx(AkTab.TabPanel, {
+    ...props,
+    className: cx("\u{1F95D}TabPanel", props.className),
+    ref: forwardedRef
+  });
 });
 export {
   TabsProvider as Provider,

package/dist/Toolbar.js

@@ -1,53 +1,33 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as Toolbar from "@ariakit/react/toolbar";
-import {
-  IconButtonContext,
-  TooltipContext
-} from "@stratakit/bricks/secret-internals";
+import { IconButtonContext, TooltipContext } from "@stratakit/bricks/secret-internals";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
-const ToolbarGroup = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      IconButtonContext.Provider,
-      {
-        value: React.useMemo(() => ({ iconSize: "large" }), []),
-        children: /* @__PURE__ */ jsx(
-          TooltipContext.Provider,
-          {
-            value: React.useMemo(
-              () => ({
-                placement: props.orientation === "vertical" ? "right" : "top"
-              }),
-              [props.orientation]
-            ),
-            children: /* @__PURE__ */ jsx(
-              Toolbar.Toolbar,
-              {
-                ...props,
-                className: cx("\u{1F95D}Toolbar", props.className),
-                ref: forwardedRef
-              }
-            )
-          }
-        )
-      }
-    );
-  }
-);
-const ToolbarItem = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Toolbar.ToolbarItem,
-      {
+const ToolbarGroup = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(IconButtonContext.Provider, {
+    value: React.useMemo(() => ({
+      iconSize: "large"
+    }), []),
+    children: /* @__PURE__ */ jsx(TooltipContext.Provider, {
+      value: React.useMemo(() => ({
+        placement: props.orientation === "vertical" ? "right" : "top"
+      }), [props.orientation]),
+      children: /* @__PURE__ */ jsx(Toolbar.Toolbar, {
         ...props,
-        className: cx("\u{1F95D}ToolbarItem", props.className),
+        className: cx("\u{1F95D}Toolbar", props.className),
         ref: forwardedRef
-      }
-    );
-  }
-);
+      })
+    })
+  });
+});
+const ToolbarItem = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Toolbar.ToolbarItem, {
+    ...props,
+    className: cx("\u{1F95D}ToolbarItem", props.className),
+    ref: forwardedRef
+  });
+});
 export {
   ToolbarGroup as Group,
   ToolbarItem as Item

package/dist/Tree.js

@@ -5,18 +5,19 @@ import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
-  const composite = useCompositeStore({ orientation: "vertical" });
-  return /* @__PURE__ */ jsx(
-    Role.div,
-    {
-      role: "tree",
-      ...props,
-      render: /* @__PURE__ */ jsx(Composite, { store: composite }),
-      className: cx("\u{1F95D}Tree", props.className),
-      ref: forwardedRef,
-      children: props.children
-    }
-  );
+  const composite = useCompositeStore({
+    orientation: "vertical"
+  });
+  return /* @__PURE__ */ jsx(Role.div, {
+    role: "tree",
+    ...props,
+    render: /* @__PURE__ */ jsx(Composite, {
+      store: composite
+    }),
+    className: cx("\u{1F95D}Tree", props.className),
+    ref: forwardedRef,
+    children: props.children
+  });
 });
 export {
   TreeItemRoot as Item,