@stratakit/structures 0.5.0 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,49 @@
 # Changelog
 
+## 0.5.1
+
+- [#1075](https://github.com/iTwin/design-system/pull/1075): Added a new `unstable_NavigationList` component that displays a vertical list of links for secondary navigation.
+
+  Includes the following subcomponents:
+  - `<NavigationList.Root>`
+  - `<NavigationList.Anchor>`
+  - `<NavigationList.Subgroup>`
+
+  Example:
+
+  ```tsx
+  <NavigationList.Root
+  	items={[
+  		<NavigationList.Anchor key={1} href="/page1" label="Page 1" />,
+  		<NavigationList.Anchor key={2} href="/page2" label="Page 2" />,
+  		<NavigationList.Subgroup
+  			key={3}
+  			label="Group of pages"
+  			items={[
+  				<NavigationList.Anchor key={1} href="/page3-1" label="Sub-page 1" active />,
+  				<NavigationList.Anchor key={2} href="/page3-2" label="Sub-page 2" />,
+  			]}
+  		/>,
+  	]}
+  />
+  ```
+
+- [#1079](https://github.com/iTwin/design-system/pull/1079): Increased the click target area of non-selectable `Tree.Item`s.
+  - If `selected` is undefined, the `Tree.Item` will expand/collapse when clicked.
+  - If `selected` is defined, the `Tree.Item` will continue to toggle selection when clicked.
+
+- [#1064](https://github.com/iTwin/design-system/pull/1064): Added new `unstable_Popover` component that displays custom content in a non-modal window overlay that is placed relative to a trigger element.
+
+  ```tsx
+  <Popover content={<>Popover content</>}>
+  	<Button>Open popover</Button>
+  </Popover>
+  ```
+
+- Updated dependencies:
+  - @stratakit/bricks@0.5.1
+  - @stratakit/foundations@0.4.1
+
 ## 0.5.0
 
 ### Breaking changes

package/dist/AccordionItem.js

@@ -6,7 +6,9 @@ import { GhostAligner, IconButtonPresentation } from "@stratakit/bricks/secret-i
 import { forwardRef, useControlledState } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { ChevronDown } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 const AccordionItemRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     defaultOpen,
     open: openProp,

package/dist/Banner.js

@@ -10,6 +10,7 @@ import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
 import { Dismiss, StatusIcon } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 function createBannerStore(initialState) {
   return createStore(combine(initialState, (set, _, store) => ({
     setLabelId: (labelId) => {
@@ -73,6 +74,7 @@ function useBannerState(selectorFn) {
   return useStore(store, selectorFn);
 }
 const BannerRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     tone = "neutral",
     variant = "outline",
@@ -161,6 +163,7 @@ const BannerDismissButton = forwardRef((props, forwardedRef) => {
   });
 });
 const Banner = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     message,
     label,

package/dist/Chip.js

@@ -8,6 +8,7 @@ import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
 import { Dismiss } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 function createChipStore(initialState) {
   return createStore(combine(initialState, (set, _, store) => ({
     setLabelId: (labelId) => {
@@ -51,6 +52,7 @@ function useChipState(selectorFn) {
   return useStore(store, selectorFn);
 }
 const ChipRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     variant = "solid",
     ...rest
@@ -98,6 +100,7 @@ const ChipDismissButton = forwardRef((props, forwardedRef) => {
   });
 });
 const Chip = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     onDismiss,
     label,

package/dist/DEV/AccordionItem.js

@@ -16,8 +16,10 @@ import {
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { ChevronDown } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 const AccordionItemRoot = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     const {
       defaultOpen,
       open: openProp,

package/dist/DEV/Banner.js

@@ -12,6 +12,7 @@ import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
 import { Dismiss, StatusIcon } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 function createBannerStore(initialState) {
   return createStore(
     combine(initialState, (set, _, store) => ({
@@ -38,6 +39,7 @@ function useBannerState(selectorFn) {
   return useStore(store, selectorFn);
 }
 const BannerRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const { tone = "neutral", variant = "outline", ...rest } = props;
   return /* @__PURE__ */ jsx(BannerProvider, { tone, children: /* @__PURE__ */ jsx(
     Role,
@@ -143,6 +145,7 @@ const BannerDismissButton = forwardRef(
 );
 DEV: BannerDismissButton.displayName = "Banner.DismissButton";
 const Banner = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     message,
     label,

package/dist/DEV/Chip.js

@@ -10,6 +10,7 @@ import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
 import { Dismiss } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 function createChipStore(initialState) {
   return createStore(
     combine(initialState, (set, _, store) => ({
@@ -32,6 +33,7 @@ function useChipState(selectorFn) {
   return useStore(store, selectorFn);
 }
 const ChipRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const { variant = "solid", ...rest } = props;
   return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
     Role.div,
@@ -85,6 +87,7 @@ const ChipDismissButton = forwardRef(
 );
 DEV: ChipDismissButton.displayName = "Chip.DismissButton";
 const Chip = forwardRef((props, forwardedRef) => {
+  useInit();
   const { onDismiss, label, ...rest } = props;
   return /* @__PURE__ */ jsxs(ChipRoot, { ...rest, ref: forwardedRef, children: [
     /* @__PURE__ */ jsx(ChipLabel, { children: label }),

package/dist/DEV/Dialog.js

@@ -12,7 +12,9 @@ import {
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { Dismiss } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 const DialogRoot = forwardRef((props, forwardedRef) => {
+  useInit();
   const { backdrop = true, unmountOnHide = true, ...rest } = props;
   const store = AkDialog.useDialogStore();
   const contentElement = useStoreState(store, "contentElement");

package/dist/DEV/DropdownMenu.js

@@ -26,7 +26,9 @@ import {
 import cx from "classnames";
 import { Checkmark, ChevronRight } from "./~utils.icons.js";
 import * as ListItem from "./~utils.ListItem.js";
+import { useInit } from "./~utils.useInit.js";
 function DropdownMenuProvider(props) {
+  useInit();
   const { children, placement, open, setOpen, defaultOpen } = props;
   return /* @__PURE__ */ jsx(
     MenuProvider,

package/dist/DEV/ErrorRegion.js

@@ -20,8 +20,10 @@ import {
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { ChevronDown, StatusIcon } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
 const ErrorRegionRoot = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     const {
       label,
       items = [],

package/dist/DEV/NavigationList.js

@@ -0,0 +1,130 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Button as AriaButton } from "@ariakit/react/button";
+import * as AriaDisclosure from "@ariakit/react/disclosure";
+import { Focusable } from "@ariakit/react/focusable";
+import { Role } from "@ariakit/react/role";
+import { Text } from "@stratakit/bricks";
+import { Icon } from "@stratakit/foundations";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { ChevronDown } from "./~utils.icons.js";
+import { useInit } from "./~utils.useInit.js";
+const NavigationListRoot = forwardRef(
+  (props, forwardedRef) => {
+    useInit();
+    const { items, role = "list", ...rest } = props;
+    const itemRole = role === "list" ? "listitem" : void 0;
+    const { indented } = React.useContext(NavigationListRootContext);
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...rest,
+        role,
+        className: cx("\u{1F95D}NavigationListRoot", props.className),
+        "data-_sk-indented": indented ? "true" : void 0,
+        ref: forwardedRef,
+        children: React.Children.map(items, (item) => /* @__PURE__ */ jsx(
+          Role,
+          {
+            role: itemRole,
+            className: "\u{1F95D}NavigationListItem",
+            "data-_sk-indented": indented ? "true" : void 0,
+            children: item
+          }
+        ))
+      }
+    );
+  }
+);
+DEV: NavigationListRoot.displayName = "NavigationList.Root";
+const NavigationListRootContext = React.createContext({
+  indented: false
+});
+const NavigationListItemAction = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(
+    Focusable,
+    {
+      accessibleWhenDisabled: true,
+      ...props,
+      className: cx("\u{1F95D}NavigationListItemAction", props.className),
+      ref: forwardedRef
+    }
+  );
+});
+DEV: NavigationListItemAction.displayName = "NavigationListItemAction";
+const NavigationListAnchor = forwardRef(
+  (props, forwardedRef) => {
+    const { active, label, icon, ...rest } = props;
+    return /* @__PURE__ */ jsxs(
+      NavigationListItemAction,
+      {
+        ...rest,
+        render: /* @__PURE__ */ jsx(
+          Role.a,
+          {
+            "aria-current": active ? "true" : void 0,
+            render: props.render
+          }
+        ),
+        ref: forwardedRef,
+        children: [
+          typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+          /* @__PURE__ */ jsx(Text, { variant: "body-sm", render: /* @__PURE__ */ jsx("span", {}), children: label })
+        ]
+      }
+    );
+  }
+);
+DEV: NavigationListAnchor.displayName = "NavigationList.Anchor";
+const NavigationListSubgroup = forwardRef(
+  (props, forwardedRef) => {
+    const { label, icon, items, defaultOpen, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...rest,
+        className: cx("\u{1F95D}NavigationListSubgroup", props.className),
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsxs(AriaDisclosure.DisclosureProvider, { defaultOpen, children: [
+          /* @__PURE__ */ jsx(
+            AriaDisclosure.Disclosure,
+            {
+              render: /* @__PURE__ */ jsx(NavigationListSubgroupButton, { label, icon })
+            }
+          ),
+          /* @__PURE__ */ jsx(NavigationListRootContext.Provider, { value: { indented: true }, children: /* @__PURE__ */ jsx(
+            AriaDisclosure.DisclosureContent,
+            {
+              render: /* @__PURE__ */ jsx(NavigationListRoot, { items })
+            }
+          ) })
+        ] })
+      }
+    );
+  }
+);
+DEV: NavigationListSubgroup.displayName = "NavigationList.Subgroup";
+const NavigationListSubgroupButton = forwardRef((props, forwardedRef) => {
+  const { label, icon, ...rest } = props;
+  return /* @__PURE__ */ jsxs(
+    NavigationListItemAction,
+    {
+      render: /* @__PURE__ */ jsx(AriaButton, {}),
+      ...rest,
+      className: cx("\u{1F95D}NavigationListSubgroupButton", props.className),
+      ref: forwardedRef,
+      children: [
+        typeof icon === "string" ? /* @__PURE__ */ jsx(Icon, { href: icon }) : icon,
+        /* @__PURE__ */ jsx(Text, { variant: "body-sm", render: /* @__PURE__ */ jsx("span", {}), children: label }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "\u{1F95D}NavigationListSubgroupChevron" })
+      ]
+    }
+  );
+});
+DEV: NavigationListSubgroupButton.displayName = "NavigationListSubgroupButton";
+export {
+  NavigationListAnchor as Anchor,
+  NavigationListRoot as Root,
+  NavigationListSubgroup as Subgroup
+};

package/dist/DEV/NavigationRail.js

@@ -13,6 +13,7 @@ import {
 import cx from "classnames";
 import { createStore, useStore } from "zustand";
 import { combine } from "zustand/middleware";
+import { useInit } from "./~utils.useInit.js";
 function createNavigationRailStore(initialState) {
   return createStore(
     combine(initialState, (set) => ({
@@ -50,6 +51,7 @@ function useNavigationRailState(selectorFn) {
 }
 const NavigationRailRoot = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     const { defaultExpanded = false, expanded, setExpanded, ...rest } = props;
     return /* @__PURE__ */ jsx(
       NavigationRailProvider,
@@ -77,7 +79,7 @@ const NavigationRailRootInner = forwardRef(
     );
   }
 );
-DEV: NavigationRailRootInner.displayName = "NavigationRail.RootInner";
+DEV: NavigationRailRootInner.displayName = "NavigationRailRootInner";
 const NavigationRailHeader = forwardRef(
   (props, forwardedRef) => {
     const expanded = useNavigationRailState((state) => state.expanded);
@@ -159,7 +161,7 @@ const NavigationRailListItem = forwardRef(
     );
   }
 );
-DEV: NavigationRailListItem.displayName = "NavigationRail.Item";
+DEV: NavigationRailListItem.displayName = "NavigationRail.ListItem";
 const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
   const expanded = useNavigationRailState((state) => state.expanded);
   const { label, icon, ...rest } = props;
@@ -188,7 +190,7 @@ const NavigationRailItemAction = forwardRef((props, forwardedRef) => {
   }
   return action;
 });
-DEV: NavigationRailItemAction.displayName = "NavigationRail.ItemAction";
+DEV: NavigationRailItemAction.displayName = "NavigationRailItemAction";
 const NavigationRailAnchor = forwardRef(
   (props, forwardedRef) => {
     const { label, icon, active, ...rest } = props;
@@ -197,7 +199,7 @@ const NavigationRailAnchor = forwardRef(
       {
         label,
         icon,
-        "aria-current": active ? "page" : void 0,
+        "aria-current": active ? "true" : void 0,
         render: /* @__PURE__ */ jsx(Role.a, { ...rest, ref: forwardedRef })
       }
     );

package/dist/DEV/Popover.js

@@ -0,0 +1,90 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AkPopover from "@ariakit/react/popover";
+import { PortalContext } from "@ariakit/react/portal";
+import { useStoreState } from "@ariakit/react/store";
+import { Button } from "@stratakit/bricks";
+import {
+  forwardRef,
+  usePopoverApi
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
+function PopoverProvider(props) {
+  const { children, open, setOpen, placement = "bottom-start" } = props;
+  return /* @__PURE__ */ jsx(
+    AkPopover.PopoverProvider,
+    {
+      open,
+      setOpen,
+      placement,
+      children
+    }
+  );
+}
+DEV: PopoverProvider.displayName = "PopoverProvider";
+const PopoverDisclosure = forwardRef(
+  (props, forwardedRef) => {
+    const store = AkPopover.usePopoverContext();
+    const open = useStoreState(store, "open");
+    const defaultId = React.useId();
+    return /* @__PURE__ */ jsx(
+      AkPopover.PopoverDisclosure,
+      {
+        id: defaultId,
+        render: /* @__PURE__ */ jsx(Button, {}),
+        ...props,
+        "data-has-popover-open": open || void 0,
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: PopoverDisclosure.displayName = "PopoverDisclosure";
+const PopoverRoot = forwardRef(
+  (props, forwardedRef) => {
+    const { children, unmountOnHide, ...rest } = props;
+    const store = AkPopover.usePopoverContext();
+    const popoverElement = useStoreState(store, "popoverElement");
+    const open = useStoreState(store, "open");
+    const popoverProps = usePopoverApi({
+      element: popoverElement,
+      open
+    });
+    const contentElement = useStoreState(store, "contentElement");
+    const triggerId = useStoreState(
+      store,
+      (state) => state?.disclosureElement?.id
+    );
+    const labelledBy = props["aria-label"] ? void 0 : triggerId;
+    return /* @__PURE__ */ jsx(
+      AkPopover.Popover,
+      {
+        "aria-labelledby": labelledBy,
+        portal: true,
+        unmountOnHide,
+        ...rest,
+        gutter: 8,
+        style: { ...popoverProps.style, ...props.style },
+        wrapperProps: { popover: popoverProps.popover },
+        className: cx("\u{1F95D}Popover", props.className),
+        ref: forwardedRef,
+        children: /* @__PURE__ */ jsx(PortalContext.Provider, { value: contentElement ?? null, children })
+      }
+    );
+  }
+);
+DEV: PopoverRoot.displayName = "PopoverRoot";
+const Popover = forwardRef((props, forwardedRef) => {
+  useInit();
+  const { children, content, open, setOpen, placement, ...rest } = props;
+  return /* @__PURE__ */ jsxs(PopoverProvider, { open, setOpen, placement, children: [
+    /* @__PURE__ */ jsx(PopoverDisclosure, { render: children }),
+    /* @__PURE__ */ jsx(PopoverRoot, { ...rest, ref: forwardedRef, children: content })
+  ] });
+});
+DEV: Popover.displayName = "Popover";
+var Popover_default = Popover;
+export {
+  Popover_default as default
+};

package/dist/DEV/Table.js

@@ -7,9 +7,11 @@ import {
   useSafeContext
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
 const TableContext = React.createContext(void 0);
 const TableHeaderContext = React.createContext(false);
 const HtmlTable = forwardRef((props, forwardedRef) => {
+  useInit();
   const tableContextValue = React.useMemo(
     () => ({ mode: "html" }),
     []
@@ -27,6 +29,7 @@ const HtmlTable = forwardRef((props, forwardedRef) => {
 DEV: HtmlTable.displayName = "Table.HtmlTable";
 const CustomTable = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     const [captionId, setCaptionId] = React.useState();
     const tableContextValue = React.useMemo(
       () => ({ captionId, setCaptionId, mode: "aria" }),

package/dist/DEV/Tabs.js

@@ -7,9 +7,11 @@ import {
   useUnreactiveCallback
 } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
-const supportsAnchorPositioning = isBrowser && CSS?.supports("anchor-name: --foo");
+import { useInit } from "./~utils.useInit.js";
+const supportsAnchorPositioning = isBrowser && CSS?.supports?.("anchor-name: --foo");
 const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
 function TabsProvider(props) {
+  useInit();
   const {
     defaultSelectedId,
     selectedId,

package/dist/DEV/Toolbar.js

@@ -7,8 +7,10 @@ import {
 } from "@stratakit/bricks/secret-internals";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
 const ToolbarGroup = forwardRef(
   (props, forwardedRef) => {
+    useInit();
     return /* @__PURE__ */ jsx(
       IconButtonContext.Provider,
       {

package/dist/DEV/Tree.js

@@ -3,8 +3,10 @@ import { Composite, useCompositeStore } from "@ariakit/react/composite";
 import { Role } from "@ariakit/react/role";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
+import { useInit } from "./~utils.useInit.js";
 import { Action as TreeItemAction, Root as TreeItemRoot } from "./TreeItem.js";
 const Tree = forwardRef((props, forwardedRef) => {
+  useInit();
   const composite = useCompositeStore({ orientation: "vertical" });
   return /* @__PURE__ */ jsx(
     Role.div,

package/dist/DEV/TreeItem.js

@@ -56,9 +56,14 @@ const TreeItem = React.memo(
       onExpandedChange?.(!expanded);
     });
     const handleClick = (event) => {
-      if (selected === void 0) return;
+      if (selected !== void 0) {
+        event.stopPropagation();
+        onSelectedChange?.(!selected);
+        return;
+      }
+      if (expanded === void 0) return;
       event.stopPropagation();
-      onSelectedChange?.(!selected);
+      onExpandedChange?.(!expanded);
     };
     const handleKeyDown = (event) => {
       if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) {

package/dist/DEV/index.js

@@ -5,7 +5,9 @@ import { default as default3 } from "./Chip.js";
 import * as unstable_Dialog from "./Dialog.js";
 import * as DropdownMenu from "./DropdownMenu.js";
 import * as unstable_ErrorRegion from "./ErrorRegion.js";
+import * as unstable_NavigationList from "./NavigationList.js";
 import * as unstable_NavigationRail from "./NavigationRail.js";
+import { default as default4 } from "./Popover.js";
 import * as Table from "./Table.js";
 import * as Tabs from "./Tabs.js";
 import * as unstable_Toolbar from "./Toolbar.js";
@@ -20,6 +22,8 @@ export {
   default2 as unstable_Banner,
   unstable_Dialog,
   unstable_ErrorRegion,
+  unstable_NavigationList,
   unstable_NavigationRail,
+  default4 as unstable_Popover,
   unstable_Toolbar
 };