npm - @stratakit/structures - Versions diffs - 0.4.5 → 0.5.0 - Mend

@stratakit/structures 0.4.5 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (21) hide show

package/CHANGELOG.md +30 -0
package/dist/AccordionItem.d.ts +1 -1
package/dist/AccordionItem.js +67 -124
package/dist/Banner.js +146 -120
package/dist/Chip.js +83 -58
package/dist/DEV/ErrorRegion.js +3 -11
package/dist/DEV/styles.css.js +1 -1
package/dist/Dialog.js +140 -132
package/dist/DropdownMenu.js +206 -239
package/dist/ErrorRegion.d.ts +18 -8
package/dist/ErrorRegion.js +127 -154
package/dist/NavigationRail.js +209 -188
package/dist/Table.js +116 -108
package/dist/Tabs.js +97 -62
package/dist/Toolbar.js +23 -43
package/dist/Tree.js +13 -12
package/dist/TreeItem.js +394 -315
package/dist/styles.css.js +1 -1
package/dist/~utils.ListItem.js +21 -34
package/dist/~utils.icons.js +26 -46
package/package.json +13 -18

package/dist/ErrorRegion.js CHANGED Viewed

@@ -1,168 +1,141 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import {
-  Collection,
-  CollectionItem,
-  useCollectionStore
-} from "@ariakit/react/collection";
-import {
-  Dialog,
-  DialogDisclosure,
-  DialogProvider
-} from "@ariakit/react/dialog";
+import { Collection, CollectionItem, useCollectionStore } from "@ariakit/react/collection";
+import { Dialog, DialogDisclosure, DialogProvider } from "@ariakit/react/dialog";
 import { Role } from "@ariakit/react/role";
 import { useStoreState } from "@ariakit/react/store";
 import { Button, Text, VisuallyHidden } from "@stratakit/bricks";
 import { IconButtonPresentation } from "@stratakit/bricks/secret-internals";
-import {
-  forwardRef,
-  useControlledState
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, useControlledState } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { ChevronDown, StatusIcon } from "./~utils.icons.js";
-const ErrorRegionRoot = forwardRef(
-  (props, forwardedRef) => {
-    const {
-      label,
-      items: itemsProp = [],
-      open: openProp,
-      setOpen: setOpenProp,
-      ...rest
-    } = props;
-    const labelId = React.useId();
-    const sectionLabelledBy = props["aria-label"] ? void 0 : label ? labelId : void 0;
-    const visible = Array.isArray(itemsProp) ? itemsProp.length > 0 : !!label;
-    const [open, setOpen] = useControlledState(
-      false,
-      openProp,
-      setOpenProp
-    );
-    const containerRef = React.useRef(null);
-    const pulse = () => {
-      const el = containerRef.current;
-      if (!el) return;
-      const id = "--\u{1F95D}ErrorRegion-pulse";
-      const animations = el.getAnimations({ subtree: true });
-      if (animations.find((animation) => animation.id === id)) return;
-      el.animate(
-        [
-          {
-            boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
-            opacity: 1
-          },
-          {
-            boxShadow: "0 0 15px 2px var(--stratakit-color-border-attention-base)",
-            opacity: 0.7,
-            offset: 0.5
-          },
-          {
-            boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
-            opacity: 1
-          }
-        ],
-        {
-          id,
-          duration: 600,
-          easing: "cubic-bezier(0.4, 0, 0.2, 1)",
-          pseudoElement: "::before"
-        }
-      );
-    };
-    const store = useCollectionStore({
-      setItems: (newItems) => {
-        const prevItemsSet = new Set(prevItems.map((item) => item.id));
-        const addedItems = newItems.filter(
-          (item) => !prevItemsSet.has(item.id)
-        );
-        if (addedItems.length === 0) return;
-        pulse();
-        setLiveLabel(label);
-      }
+const ErrorRegionRoot = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    items = [],
+    open: openProp,
+    setOpen: setOpenProp,
+    ...rest
+  } = props;
+  const labelId = React.useId();
+  const sectionLabelledBy = props["aria-label"] ? void 0 : label ? labelId : void 0;
+  const visible = items.length > 0;
+  const [open, setOpen] = useControlledState(false, openProp, setOpenProp);
+  const containerRef = React.useRef(null);
+  const pulse = () => {
+    const el = containerRef.current;
+    if (!el) return;
+    const id = "--\u{1F95D}ErrorRegion-pulse";
+    const animations = el.getAnimations({
+      subtree: true
     });
-    const prevItems = useStoreState(store, "items");
-    const [liveLabel, setLiveLabel] = React.useState(label);
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx(VisuallyHidden, { "aria-live": "polite", "aria-atomic": true, children: liveLabel === label ? liveLabel : void 0 }),
-      /* @__PURE__ */ jsx(DialogProvider, { open, setOpen, children: /* @__PURE__ */ jsx(
-        Role.section,
-        {
-          "aria-labelledby": sectionLabelledBy,
-          ...rest,
-          className: cx("\u{1F95D}ErrorRegion", props.className),
-          "data-_sk-visible": visible,
-          "data-_sk-expanded": open,
-          ref: forwardedRef,
-          children: /* @__PURE__ */ jsxs("div", { className: "\u{1F95D}ErrorRegionContainer", ref: containerRef, children: [
-            /* @__PURE__ */ jsxs(
-              DialogDisclosure,
-              {
-                className: "\u{1F95D}ErrorRegionHeader",
-                render: /* @__PURE__ */ jsx(Button, { variant: "ghost" }),
-                children: [
-                  /* @__PURE__ */ jsx(StatusIcon, { tone: "attention", className: "\u{1F95D}ErrorRegionIcon" }),
-                  /* @__PURE__ */ jsx(
-                    Text,
-                    {
-                      render: /* @__PURE__ */ jsx("span", {}),
-                      id: labelId,
-                      className: "\u{1F95D}ErrorRegionLabel",
-                      variant: "body-sm",
-                      children: label
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(IconButtonPresentation, { inert: true, variant: "ghost", children: /* @__PURE__ */ jsx(ChevronDown, {}) })
-                ]
-              }
-            ),
-            /* @__PURE__ */ jsx(
-              Dialog,
-              {
-                className: "\u{1F95D}ErrorRegionDialog",
-                portal: false,
-                modal: false,
-                autoFocusOnShow: false,
-                "aria-labelledby": labelId,
-                children: /* @__PURE__ */ jsx(
-                  Collection,
-                  {
-                    store,
-                    className: "\u{1F95D}ErrorRegionItems",
-                    role: "list",
-                    children: itemsProp
-                  }
-                )
-              }
-            )
-          ] })
-        }
-      ) })
-    ] });
-  }
-);
-const ErrorRegionItem = forwardRef(
-  (props, forwardedRef) => {
-    const generatedId = React.useId();
-    const {
-      message,
-      messageId = `${generatedId}-message`,
-      actions,
-      ...rest
-    } = props;
-    return /* @__PURE__ */ jsxs(
-      CollectionItem,
-      {
+    if (animations.find((animation) => animation.id === id)) return;
+    el.animate([{
+      boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
+      opacity: 1
+    }, {
+      boxShadow: "0 0 15px 2px var(--stratakit-color-border-attention-base)",
+      opacity: 0.7,
+      offset: 0.5
+    }, {
+      boxShadow: "0 0 0 0 var(--stratakit-color-border-attention-base)",
+      opacity: 1
+    }], {
+      id,
+      duration: 600,
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+      pseudoElement: "::before"
+    });
+  };
+  const store = useCollectionStore({
+    setItems: (newItems) => {
+      const prevItemsSet = new Set(prevItems.map((item) => item.id));
+      const addedItems = newItems.filter((item_0) => !prevItemsSet.has(item_0.id));
+      if (addedItems.length === 0) return;
+      pulse();
+      setLiveLabel(label);
+    }
+  });
+  const prevItems = useStoreState(store, "items");
+  const [liveLabel, setLiveLabel] = React.useState(label);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(VisuallyHidden, {
+      "aria-live": "polite",
+      "aria-atomic": true,
+      children: liveLabel === label ? liveLabel : void 0
+    }), /* @__PURE__ */ jsx(DialogProvider, {
+      open,
+      setOpen,
+      children: /* @__PURE__ */ jsx(Role.section, {
+        "aria-labelledby": sectionLabelledBy,
         ...rest,
-        role: "listitem",
-        className: cx("\u{1F95D}ErrorRegionItem", props.className),
+        className: cx("\u{1F95D}ErrorRegion", props.className),
+        "data-_sk-visible": visible,
+        "data-_sk-expanded": open,
         ref: forwardedRef,
-        children: [
-          /* @__PURE__ */ jsx(Text, { id: messageId, variant: "body-sm", children: message }),
-          /* @__PURE__ */ jsx("div", { className: "\u{1F95D}ErrorRegionItemActions", children: actions })
-        ]
-      }
-    );
-  }
-);
+        children: /* @__PURE__ */ jsxs("div", {
+          className: "\u{1F95D}ErrorRegionContainer",
+          ref: containerRef,
+          children: [/* @__PURE__ */ jsxs(DialogDisclosure, {
+            className: "\u{1F95D}ErrorRegionHeader",
+            render: /* @__PURE__ */ jsx(Button, {
+              variant: "ghost"
+            }),
+            children: [/* @__PURE__ */ jsx(StatusIcon, {
+              tone: "attention",
+              className: "\u{1F95D}ErrorRegionIcon"
+            }), /* @__PURE__ */ jsx(Text, {
+              render: /* @__PURE__ */ jsx("span", {}),
+              id: labelId,
+              className: "\u{1F95D}ErrorRegionLabel",
+              variant: "body-sm",
+              children: label
+            }), /* @__PURE__ */ jsx(IconButtonPresentation, {
+              inert: true,
+              variant: "ghost",
+              children: /* @__PURE__ */ jsx(ChevronDown, {})
+            })]
+          }), /* @__PURE__ */ jsx(Dialog, {
+            className: "\u{1F95D}ErrorRegionDialog",
+            portal: false,
+            modal: false,
+            autoFocusOnShow: false,
+            "aria-labelledby": labelId,
+            children: /* @__PURE__ */ jsx(Collection, {
+              store,
+              className: "\u{1F95D}ErrorRegionItems",
+              role: "list",
+              children: items
+            })
+          })]
+        })
+      })
+    })]
+  });
+});
+const ErrorRegionItem = forwardRef((props, forwardedRef) => {
+  const generatedId = React.useId();
+  const {
+    message,
+    messageId = `${generatedId}-message`,
+    actions,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(CollectionItem, {
+    ...rest,
+    role: "listitem",
+    className: cx("\u{1F95D}ErrorRegionItem", props.className),
+    ref: forwardedRef,
+    children: [/* @__PURE__ */ jsx(Text, {
+      id: messageId,
+      variant: "body-sm",
+      children: message
+    }), /* @__PURE__ */ jsx("div", {
+      className: "\u{1F95D}ErrorRegionItemActions",
+      children: actions
+    })]
+  });
+});
 export {
   ErrorRegionItem as Item,
   ErrorRegionRoot as Root