@stratakit/structures 0.4.4 → 0.5.0

package/dist/DropdownMenu.js

@@ -1,201 +1,177 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Button as ButtonAk } from "@ariakit/react/button";
-import {
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuItemCheckbox,
-  MenuProvider,
-  useMenuContext,
-  useMenuStore
-} from "@ariakit/react/menu";
+import { Menu, MenuButton, MenuItem, MenuItemCheckbox, MenuProvider, useMenuContext, useMenuStore } from "@ariakit/react/menu";
 import { useStoreState } from "@ariakit/react/store";
 import { Button, Kbd } from "@stratakit/bricks";
-import {
-  DisclosureArrow,
-  Dot,
-  predefinedSymbols
-} from "@stratakit/bricks/secret-internals";
+import { DisclosureArrow, Dot, predefinedSymbols } from "@stratakit/bricks/secret-internals";
 import { Icon } from "@stratakit/foundations";
-import {
-  forwardRef,
-  usePopoverApi,
-  useSafeContext
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, usePopoverApi, useSafeContext } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { Checkmark, ChevronRight } from "./~utils.icons.js";
 import * as ListItem from "./~utils.ListItem.js";
 function DropdownMenuProvider(props) {
-  const { children, placement, open, setOpen, defaultOpen } = props;
-  return /* @__PURE__ */ jsx(
-    MenuProvider,
-    {
-      defaultOpen,
-      open,
-      placement,
-      setOpen,
-      children
-    }
-  );
+  const {
+    children,
+    placement,
+    open,
+    setOpen,
+    defaultOpen
+  } = props;
+  return /* @__PURE__ */ jsx(MenuProvider, {
+    defaultOpen,
+    open,
+    placement,
+    setOpen,
+    children
+  });
 }
-const DropdownMenuContent = forwardRef(
-  (props, forwardedRef) => {
-    const context = useMenuContext();
-    const open = useStoreState(context, "open");
-    const popoverElement = useStoreState(context, "popoverElement");
-    const popoverProps = usePopoverApi({ element: popoverElement, open });
-    return /* @__PURE__ */ jsx(
-      Menu,
-      {
-        portal: true,
-        unmountOnHide: true,
-        ...props,
-        gutter: 4,
-        style: { ...popoverProps.style, ...props.style },
-        wrapperProps: { popover: popoverProps.popover },
-        className: cx("\u{1F95D}DropdownMenu", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const DropdownMenuButton = forwardRef(
-  (props, forwardedRef) => {
-    const { accessibleWhenDisabled = true, children, ...rest } = props;
-    const open = useStoreState(useMenuContext(), "open");
-    return /* @__PURE__ */ jsx(
-      MenuButton,
-      {
-        accessibleWhenDisabled: true,
-        ...rest,
-        render: props.render ?? /* @__PURE__ */ jsxs(Button, { accessibleWhenDisabled, children: [
-          children,
-          /* @__PURE__ */ jsx(DisclosureArrow, {})
-        ] }),
-        className: cx("\u{1F95D}DropdownMenuButton", props.className),
-        "data-has-popover-open": open || void 0,
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const DropdownMenuItem = forwardRef(
-  (props, forwardedRef) => {
-    const { label, shortcuts, icon, unstable_dot, submenu, ...rest } = props;
-    const dotId = React.useId();
-    const defaultSubmenuStore = useMenuStore();
-    const [submenuStore, setSubmenuStore] = React.useState();
-    const store = submenuStore ?? defaultSubmenuStore;
-    const open = useStoreState(store, "open");
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        MenuItem,
-        {
+const DropdownMenuContent = forwardRef((props, forwardedRef) => {
+  const context = useMenuContext();
+  const open = useStoreState(context, "open");
+  const popoverElement = useStoreState(context, "popoverElement");
+  const popoverProps = usePopoverApi({
+    element: popoverElement,
+    open
+  });
+  return /* @__PURE__ */ jsx(Menu, {
+    portal: true,
+    unmountOnHide: true,
+    ...props,
+    gutter: 4,
+    style: {
+      ...popoverProps.style,
+      ...props.style
+    },
+    wrapperProps: {
+      popover: popoverProps.popover
+    },
+    className: cx("\u{1F95D}DropdownMenu", props.className),
+    ref: forwardedRef
+  });
+});
+const DropdownMenuButton = forwardRef((props, forwardedRef) => {
+  const {
+    accessibleWhenDisabled = true,
+    children,
+    ...rest
+  } = props;
+  const open = useStoreState(useMenuContext(), "open");
+  return /* @__PURE__ */ jsx(MenuButton, {
+    accessibleWhenDisabled: true,
+    ...rest,
+    render: props.render ?? /* @__PURE__ */ jsxs(Button, {
+      accessibleWhenDisabled,
+      children: [children, /* @__PURE__ */ jsx(DisclosureArrow, {})]
+    }),
+    className: cx("\u{1F95D}DropdownMenuButton", props.className),
+    "data-has-popover-open": open || void 0,
+    ref: forwardedRef
+  });
+});
+const DropdownMenuItem = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    shortcuts,
+    icon,
+    unstable_dot,
+    submenu,
+    ...rest
+  } = props;
+  const dotId = React.useId();
+  const defaultSubmenuStore = useMenuStore();
+  const [submenuStore, setSubmenuStore] = React.useState();
+  const store = submenuStore ?? defaultSubmenuStore;
+  const open = useStoreState(store, "open");
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(MenuItem, {
+      accessibleWhenDisabled: true,
+      render: /* @__PURE__ */ jsx(ListItem.Root, {
+        render: /* @__PURE__ */ jsx(ButtonAk, {
           accessibleWhenDisabled: true,
-          render: /* @__PURE__ */ jsx(
-            ListItem.Root,
-            {
-              render: /* @__PURE__ */ jsx(
-                ButtonAk,
-                {
-                  accessibleWhenDisabled: true,
-                  "aria-describedby": dotId,
-                  ...rest,
-                  render: submenu ? /* @__PURE__ */ jsx(
-                    MenuButton,
-                    {
-                      render: props.render ?? /* @__PURE__ */ jsx("button", {}),
-                      store
-                    }
-                  ) : props.render,
-                  className: cx("\u{1F95D}DropdownMenuItem", props.className),
-                  "data-has-popover-open": open || void 0,
-                  ref: forwardedRef
-                }
-              )
-            }
-          ),
-          children: [
-            icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
-            /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
-            shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, { shortcuts }) : null,
-            unstable_dot ? /* @__PURE__ */ jsx(
-              ListItem.Decoration,
-              {
-                render: /* @__PURE__ */ jsx(Dot, { id: dotId, className: "\u{1F95D}DropdownMenuItemDot", children: unstable_dot })
-              }
-            ) : null,
-            submenu ? /* @__PURE__ */ jsx(
-              ListItem.Decoration,
-              {
-                className: "\u{1F95D}DropdownMenuItemChevron",
-                render: /* @__PURE__ */ jsx(ChevronRight, {})
-              }
-            ) : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(
-        DropdownMenuSubmenuContext.Provider,
-        {
-          value: React.useMemo(() => ({ setStore: setSubmenuStore }), []),
-          children: submenu
-        }
-      )
-    ] });
-  }
-);
+          "aria-describedby": dotId,
+          ...rest,
+          render: submenu ? /* @__PURE__ */ jsx(MenuButton, {
+            render: props.render ?? /* @__PURE__ */ jsx("button", {}),
+            store
+          }) : props.render,
+          className: cx("\u{1F95D}DropdownMenuItem", props.className),
+          "data-has-popover-open": open || void 0,
+          ref: forwardedRef
+        })
+      }),
+      children: [icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, {
+        icon
+      }) : null, /* @__PURE__ */ jsx(ListItem.Content, {
+        render: /* @__PURE__ */ jsx("span", {}),
+        children: label
+      }), shortcuts ? /* @__PURE__ */ jsx(DropdownMenuItemShortcuts, {
+        shortcuts
+      }) : null, unstable_dot ? /* @__PURE__ */ jsx(ListItem.Decoration, {
+        render: /* @__PURE__ */ jsx(Dot, {
+          id: dotId,
+          className: "\u{1F95D}DropdownMenuItemDot",
+          children: unstable_dot
+        })
+      }) : null, submenu ? /* @__PURE__ */ jsx(ListItem.Decoration, {
+        className: "\u{1F95D}DropdownMenuItemChevron",
+        render: /* @__PURE__ */ jsx(ChevronRight, {})
+      }) : null]
+    }), /* @__PURE__ */ jsx(DropdownMenuSubmenuContext.Provider, {
+      value: React.useMemo(() => ({
+        setStore: setSubmenuStore
+      }), []),
+      children: submenu
+    })]
+  });
+});
 const DropdownMenuItemShortcuts = forwardRef((props, forwardedRef) => {
-  const { shortcuts, ...rest } = props;
+  const {
+    shortcuts,
+    ...rest
+  } = props;
   const shortcutKeys = React.useMemo(() => {
     return shortcuts.split("+").map((key) => ({
       key: key.trim(),
       isSymbol: key in predefinedSymbols
     }));
   }, [shortcuts]);
-  return /* @__PURE__ */ jsx(
-    ListItem.Decoration,
-    {
-      render: /* @__PURE__ */ jsx("span", {}),
+  return /* @__PURE__ */ jsx(ListItem.Decoration, {
+    render: /* @__PURE__ */ jsx("span", {}),
+    ...rest,
+    className: cx("\u{1F95D}DropdownMenuItemShortcuts", props.className),
+    ref: forwardedRef,
+    children: shortcutKeys.map(({
+      key: key_0,
+      isSymbol
+    }, index) => {
+      if (isSymbol) {
+        return /* @__PURE__ */ jsx(Kbd, {
+          variant: "ghost",
+          symbol: key_0
+        }, `${key_0 + index}`);
+      }
+      return /* @__PURE__ */ jsx(Kbd, {
+        variant: "ghost",
+        children: key_0
+      }, `${key_0 + index}`);
+    })
+  });
+});
+const DropdownMenuIcon = forwardRef((props, forwardedRef) => {
+  const {
+    icon,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(ListItem.Decoration, {
+    render: /* @__PURE__ */ jsx(Icon, {
+      href: typeof icon === "string" ? icon : void 0,
+      render: React.isValidElement(icon) ? icon : void 0,
       ...rest,
-      className: cx("\u{1F95D}DropdownMenuItemShortcuts", props.className),
-      ref: forwardedRef,
-      children: shortcutKeys.map(({ key, isSymbol }, index) => {
-        if (isSymbol) {
-          return /* @__PURE__ */ jsx(
-            Kbd,
-            {
-              variant: "ghost",
-              symbol: key
-            },
-            `${key + index}`
-          );
-        }
-        return /* @__PURE__ */ jsx(Kbd, { variant: "ghost", children: key }, `${key + index}`);
-      })
-    }
-  );
+      ref: forwardedRef
+    })
+  });
 });
-const DropdownMenuIcon = forwardRef(
-  (props, forwardedRef) => {
-    const { icon, ...rest } = props;
-    return /* @__PURE__ */ jsx(
-      ListItem.Decoration,
-      {
-        render: /* @__PURE__ */ jsx(
-          Icon,
-          {
-            href: typeof icon === "string" ? icon : void 0,
-            render: React.isValidElement(icon) ? icon : void 0,
-            ...rest,
-            ref: forwardedRef
-          }
-        )
-      }
-    );
-  }
-);
 const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
   const {
     label,
@@ -208,70 +184,61 @@ const DropdownMenuCheckboxItem = forwardRef((props, forwardedRef) => {
     // For defaultChecked to work
     ...rest
   } = props;
-  return /* @__PURE__ */ jsxs(
-    MenuItemCheckbox,
-    {
-      accessibleWhenDisabled: true,
-      defaultChecked,
-      checked,
-      name,
-      value,
-      onChange,
-      render: /* @__PURE__ */ jsx(
-        ListItem.Root,
-        {
-          render: /* @__PURE__ */ jsx(
-            ButtonAk,
-            {
-              accessibleWhenDisabled: true,
-              ...rest,
-              className: cx("\u{1F95D}DropdownMenuItem", props.className),
-              ref: forwardedRef
-            }
-          )
-        }
-      ),
-      children: [
-        icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, { icon }) : null,
-        /* @__PURE__ */ jsx(ListItem.Content, { render: /* @__PURE__ */ jsx("span", {}), children: label }),
-        /* @__PURE__ */ jsx(
-          ListItem.Decoration,
-          {
-            render: /* @__PURE__ */ jsx(Checkmark, { className: "\u{1F95D}DropdownMenuCheckmark" })
-          }
-        )
-      ]
-    }
-  );
+  return /* @__PURE__ */ jsxs(MenuItemCheckbox, {
+    accessibleWhenDisabled: true,
+    defaultChecked,
+    checked,
+    name,
+    value,
+    onChange,
+    render: /* @__PURE__ */ jsx(ListItem.Root, {
+      render: /* @__PURE__ */ jsx(ButtonAk, {
+        accessibleWhenDisabled: true,
+        ...rest,
+        className: cx("\u{1F95D}DropdownMenuItem", props.className),
+        ref: forwardedRef
+      })
+    }),
+    children: [icon ? /* @__PURE__ */ jsx(DropdownMenuIcon, {
+      icon
+    }) : null, /* @__PURE__ */ jsx(ListItem.Content, {
+      render: /* @__PURE__ */ jsx("span", {}),
+      children: label
+    }), /* @__PURE__ */ jsx(ListItem.Decoration, {
+      render: /* @__PURE__ */ jsx(Checkmark, {
+        className: "\u{1F95D}DropdownMenuCheckmark"
+      })
+    })]
+  });
 });
 const DropdownMenuSubmenuContext = React.createContext(void 0);
-const DropdownMenuSubmenu = forwardRef(
-  (props, forwardedRef) => {
-    const { setStore } = useSafeContext(DropdownMenuSubmenuContext);
-    const store = useMenuStore();
-    React.useEffect(() => {
-      setStore(store);
-      return () => setStore(void 0);
-    }, [store, setStore]);
-    const parent = useMenuContext();
-    const popoverElement = useStoreState(parent, "popoverElement");
-    return /* @__PURE__ */ jsx(MenuProvider, { store, children: /* @__PURE__ */ jsx(
-      Menu,
-      {
-        store,
-        portal: true,
-        portalElement: popoverElement,
-        preserveTabOrder: false,
-        unmountOnHide: true,
-        ...props,
-        gutter: 2,
-        shift: -4,
-        className: cx("\u{1F95D}DropdownMenu", props.className),
-        ref: forwardedRef
-      }
-    ) });
-  }
-);
+const DropdownMenuSubmenu = forwardRef((props, forwardedRef) => {
+  const {
+    setStore
+  } = useSafeContext(DropdownMenuSubmenuContext);
+  const store = useMenuStore();
+  React.useEffect(() => {
+    setStore(store);
+    return () => setStore(void 0);
+  }, [store, setStore]);
+  const parent = useMenuContext();
+  const popoverElement = useStoreState(parent, "popoverElement");
+  return /* @__PURE__ */ jsx(MenuProvider, {
+    store,
+    children: /* @__PURE__ */ jsx(Menu, {
+      store,
+      portal: true,
+      portalElement: popoverElement,
+      preserveTabOrder: false,
+      unmountOnHide: true,
+      ...props,
+      gutter: 2,
+      shift: -4,
+      className: cx("\u{1F95D}DropdownMenu", props.className),
+      ref: forwardedRef
+    })
+  });
+});
 export {
   DropdownMenuButton as Button,
   DropdownMenuCheckboxItem as CheckboxItem,

package/dist/ErrorRegion.d.ts

@@ -1,17 +1,19 @@
 import * as React from "react";
 import type { BaseProps } from "@stratakit/foundations/secret-internals";
-interface ErrorRegionRootProps extends Omit<BaseProps, "children"> {
+interface ErrorRegionRootBaseProps extends Omit<BaseProps, "children"> {
     /**
      * Label for the error header, usually indicating the number of errors displayed.
-     * By default this is used as a name of the region navigational landmark, however an explicit `aria-label` or `aria-labelledby` is strongly suggested.
      *
-     * Use `undefined` if you don't want to display errors rather than conditionally rendering the component.
+     * Changes to the `label` prop will be communicated
+     * using a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions).
      */
     label?: React.ReactNode;
     /**
      * A list of error items where each item describes an individual error. Must be a list of `ErrorRegion.Item` components.
+     *
+     * Set to `undefined` or empty array if you don't want to display errors rather than conditionally rendering the component.
      */
-    items?: React.ReactNode;
+    items?: React.ReactNode[];
     /**
      * The controlled open state of the region.
      */
@@ -23,25 +25,41 @@ interface ErrorRegionRootProps extends Omit<BaseProps, "children"> {
      */
     setOpen?: (open: boolean) => void;
 }
+type ErrorRegionRootExtraProps = {
+    /**
+     * Name of the region navigational landmark.
+     *
+     * This label should remain stable throughout the lifetime of the region.
+     */
+    "aria-label": string | undefined;
+} | {
+    /**
+     * Identifies the element that labels the region navigational landmark.
+     *
+     * This label should remain stable throughout the lifetime of the region.
+     */
+    "aria-labelledby": string | undefined;
+};
+type ErrorRegionRootProps = ErrorRegionRootBaseProps & ErrorRegionRootExtraProps;
 /**
  * A collapsible region that displays a list of error messages, which might originate from another
  * component, such as `Tree`.
  *
  * This component is rendered as a [region landmark](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/region.html)
- * and should be labelled either using `label` or `aria-label`/`aria-labelledby`. Changes to the `label` prop will be
- * announced communicated using a [live region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Guides/Live_regions).
+ * and should be labelled using `aria-label` or `aria-labelledby`.
+ *
+ * This component should not be rendered conditionally, instead use the `items` prop to control the visibility.
  *
  * Example:
  * ```tsx
  * <ErrorRegion.Root
+ *   aria-label="Issues"
  *   label="3 issues found"
- *   items={
- *     <>
- *       <ErrorRegion.Item message="…" />
- *       <ErrorRegion.Item message="…" />
- *       <ErrorRegion.Item message="…" />
- *     </>
- *   }
+ *   items={[
+ *     <ErrorRegion.Item key={…} message="…" />
+ *     <ErrorRegion.Item key={…} message="…" />
+ *     <ErrorRegion.Item key={…} message="…" />
+ *   ]}
  * />
  */
 declare const ErrorRegionRoot: React.ForwardRefExoticComponent<ErrorRegionRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;