@stratakit/structures 0.4.5 → 0.5.1

package/CHANGELOG.md

@@ -1,5 +1,79 @@
 # 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
+
+- [#1036](https://github.com/iTwin/design-system/pull/1036): Changed `items` prop type of `ErrorRegion.Root` component from `ReactNode` to `ReactNode[]`.
+
+  `items` prop is used to determine error region visibility.
+
+- [#1038](https://github.com/iTwin/design-system/pull/1038): Removed unintentionally exposed `TreeItem` [subpath export](https://nodejs.org/api/packages.html#subpath-exports). Tree item components are available under the `Tree` subpath or the main entry point of the package.
+
+  ```diff
+  - import * as TreeItem from "@stratakit/structures/TreeItem";
+  + import * as Tree from "@stratakit/structures/Tree";
+
+  - <TreeItem.Root />
+  + <Tree.Item />
+
+  - <TreeItem.Action />
+  + <Tree.ItemAction />
+  ```
+
+- [#1037](https://github.com/iTwin/design-system/pull/1037): Require `aria-label` or `aria-labelledby` prop in `ErrorRegion.Root` component.
+
+### Non-breaking changes
+
+- [#1003](https://github.com/iTwin/design-system/pull/1003): Enabled React Compiler for production build. In React 18 apps, `react-compiler-runtime` dependency will be used.
+- Updated dependencies:
+  - @stratakit/bricks@0.5.0
+  - @stratakit/foundations@0.4.0
+
 ## 0.4.5
 
 - `unstable_NavigationRail` changes:

package/dist/AccordionItem.d.ts

@@ -228,7 +228,7 @@ declare const AccordionItemMarker: import("react").ForwardRefExoticComponent<Pic
  * ```
  */
 declare const AccordionItemContent: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;
-interface AccordionItemHeadingProps extends BaseProps {
+interface AccordionItemHeadingProps extends Omit<BaseProps, "render"> {
     render: NonNullable<BaseProps["render"]>;
 }
 /**

package/dist/AccordionItem.js

@@ -1,133 +1,78 @@
 import { jsx } from "react/jsx-runtime";
-import {
-  Disclosure,
-  DisclosureContent,
-  DisclosureProvider
-} from "@ariakit/react/disclosure";
+import { Disclosure, DisclosureContent, DisclosureProvider } from "@ariakit/react/disclosure";
 import { Role } from "@ariakit/react/role";
 import { Text } from "@stratakit/bricks";
-import {
-  GhostAligner,
-  IconButtonPresentation
-} from "@stratakit/bricks/secret-internals";
-import {
-  forwardRef,
-  useControlledState
-} from "@stratakit/foundations/secret-internals";
+import { GhostAligner, IconButtonPresentation } from "@stratakit/bricks/secret-internals";
+import { forwardRef, useControlledState } from "@stratakit/foundations/secret-internals";
 import cx from "classnames";
 import { ChevronDown } from "./~utils.icons.js";
-const AccordionItemRoot = forwardRef(
-  (props, forwardedRef) => {
-    const {
-      defaultOpen,
-      open: openProp,
-      setOpen: setOpenProp,
-      ...rest
-    } = props;
-    const [open, setOpen] = useControlledState(
-      defaultOpen ?? false,
-      openProp,
-      setOpenProp
-    );
-    return /* @__PURE__ */ jsx(
-      DisclosureProvider,
-      {
-        defaultOpen,
-        open,
-        setOpen,
-        children: /* @__PURE__ */ jsx(
-          Role,
-          {
-            ...rest,
-            className: cx("\u{1F95D}AccordionItem", props.className),
-            "data-_sk-open": open,
-            ref: forwardedRef
-          }
-        )
-      }
-    );
-  }
-);
-const AccordionItemHeader = forwardRef(
-  (props, forwardedRef) => /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
-    Role,
-    {
-      ...props,
-      className: cx("\u{1F95D}AccordionItemHeader", props.className),
+import { useInit } from "./~utils.useInit.js";
+const AccordionItemRoot = forwardRef((props, forwardedRef) => {
+  useInit();
+  const {
+    defaultOpen,
+    open: openProp,
+    setOpen: setOpenProp,
+    ...rest
+  } = props;
+  const [open, setOpen] = useControlledState(defaultOpen ?? false, openProp, setOpenProp);
+  return /* @__PURE__ */ jsx(DisclosureProvider, {
+    defaultOpen,
+    open,
+    setOpen,
+    children: /* @__PURE__ */ jsx(Role, {
+      ...rest,
+      className: cx("\u{1F95D}AccordionItem", props.className),
+      "data-_sk-open": open,
       ref: forwardedRef
-    }
-  ) })
-);
-const AccordionItemButton = forwardRef(
-  (props, forwardedRef) => /* @__PURE__ */ jsx(
-    Disclosure,
-    {
-      ...props,
-      className: cx("\u{1F95D}AccordionItemButton", props.className),
-      ref: forwardedRef
-    }
-  )
-);
-const AccordionItemLabel = forwardRef(
-  (props, forwardedRef) => /* @__PURE__ */ jsx(
-    Text,
-    {
-      ...props,
-      variant: "body-sm",
-      className: cx("\u{1F95D}AccordionItemLabel", props.className),
-      ref: forwardedRef
-    }
-  )
-);
-const AccordionItemDecoration = forwardRef(
-  (props, forwardedRef) => /* @__PURE__ */ jsx(
-    Role,
-    {
-      ...props,
-      className: cx("\u{1F95D}AccordionItemDecoration", props.className),
-      ref: forwardedRef
-    }
-  )
-);
-const AccordionItemMarker = forwardRef(
-  (props, forwardedRef) => /* @__PURE__ */ jsx(
-    IconButtonPresentation,
-    {
-      ...props,
-      variant: "ghost",
-      className: cx("\u{1F95D}AccordionItemMarker", props.className),
-      ref: forwardedRef,
-      children: props.children ?? /* @__PURE__ */ jsx(
-        ChevronDown,
-        {
-          "aria-hidden": "true",
-          className: "\u{1F95D}AccordionItemMarkerChevron"
-        }
-      )
-    }
-  )
-);
-const AccordionItemContent = forwardRef(
-  (props, forwardedRef) => /* @__PURE__ */ jsx(
-    DisclosureContent,
-    {
-      ...props,
-      className: cx("\u{1F95D}AccordionItemContent", props.className),
-      ref: forwardedRef
-    }
-  )
-);
-const AccordionItemHeading = forwardRef(
-  (props, forwardedRef) => /* @__PURE__ */ jsx(
-    Text,
-    {
-      ...props,
-      variant: "body-sm",
-      className: cx("\u{1F95D}AccordionItemHeading", props.className),
-      ref: forwardedRef
-    }
-  )
-);
+    })
+  });
+});
+const AccordionItemHeader = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(GhostAligner, {
+  align: "block",
+  children: /* @__PURE__ */ jsx(Role, {
+    ...props,
+    className: cx("\u{1F95D}AccordionItemHeader", props.className),
+    ref: forwardedRef
+  })
+}));
+const AccordionItemButton = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Disclosure, {
+  ...props,
+  className: cx("\u{1F95D}AccordionItemButton", props.className),
+  ref: forwardedRef
+}));
+const AccordionItemLabel = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Text, {
+  ...props,
+  variant: "body-sm",
+  className: cx("\u{1F95D}AccordionItemLabel", props.className),
+  ref: forwardedRef
+}));
+const AccordionItemDecoration = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Role, {
+  ...props,
+  className: cx("\u{1F95D}AccordionItemDecoration", props.className),
+  ref: forwardedRef
+}));
+const AccordionItemMarker = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(IconButtonPresentation, {
+  ...props,
+  variant: "ghost",
+  className: cx("\u{1F95D}AccordionItemMarker", props.className),
+  ref: forwardedRef,
+  children: props.children ?? /* @__PURE__ */ jsx(ChevronDown, {
+    "aria-hidden": "true",
+    className: "\u{1F95D}AccordionItemMarkerChevron"
+  })
+}));
+const AccordionItemContent = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(DisclosureContent, {
+  ...props,
+  className: cx("\u{1F95D}AccordionItemContent", props.className),
+  ref: forwardedRef
+}));
+const AccordionItemHeading = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Text, {
+  ...props,
+  variant: "body-sm",
+  className: cx("\u{1F95D}AccordionItemHeading", props.className),
+  ref: forwardedRef
+}));
 export {
   AccordionItemButton as Button,
   AccordionItemContent as Content,

package/dist/Banner.js

@@ -1,142 +1,169 @@
+import { c as _c } from "react-compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Role } from "@ariakit/react/role";
 import { IconButton, Text } from "@stratakit/bricks";
 import { GhostAligner } from "@stratakit/bricks/secret-internals";
 import { Icon } from "@stratakit/foundations";
-import {
-  forwardRef,
-  useSafeContext
-} from "@stratakit/foundations/secret-internals";
+import { forwardRef, useSafeContext } from "@stratakit/foundations/secret-internals";
 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) => {
-        set({ labelId: labelId || store.getInitialState().labelId });
-      }
-    }))
-  );
+  return createStore(combine(initialState, (set, _, store) => ({
+    setLabelId: (labelId) => {
+      set({
+        labelId: labelId || store.getInitialState().labelId
+      });
+    }
+  })));
 }
 const BannerContext = React.createContext(void 0);
 function BannerProvider(props) {
-  const { tone } = props;
-  const [store] = React.useState(() => createBannerStore({ tone }));
-  React.useEffect(
-    function synchronizeWithProps() {
-      store.setState({ tone });
-    },
-    [store, tone]
-  );
-  return /* @__PURE__ */ jsx(BannerContext.Provider, { value: store, children: props.children });
+  const $ = _c(9);
+  const {
+    tone
+  } = props;
+  let t0;
+  if ($[0] !== tone) {
+    t0 = () => createBannerStore({
+      tone
+    });
+    $[0] = tone;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  const [store] = React.useState(t0);
+  let t1;
+  let t2;
+  if ($[2] !== store || $[3] !== tone) {
+    t1 = function synchronizeWithProps() {
+      store.setState({
+        tone
+      });
+    };
+    t2 = [store, tone];
+    $[2] = store;
+    $[3] = tone;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t1 = $[4];
+    t2 = $[5];
+  }
+  React.useEffect(t1, t2);
+  let t3;
+  if ($[6] !== props.children || $[7] !== store) {
+    t3 = jsx(BannerContext.Provider, {
+      value: store,
+      children: props.children
+    });
+    $[6] = props.children;
+    $[7] = store;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  return t3;
 }
 function useBannerState(selectorFn) {
   const store = useSafeContext(BannerContext);
   return useStore(store, selectorFn);
 }
 const BannerRoot = forwardRef((props, forwardedRef) => {
-  const { tone = "neutral", variant = "outline", ...rest } = props;
-  return /* @__PURE__ */ jsx(BannerProvider, { tone, children: /* @__PURE__ */ jsx(
-    Role,
-    {
+  useInit();
+  const {
+    tone = "neutral",
+    variant = "outline",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(BannerProvider, {
+    tone,
+    children: /* @__PURE__ */ jsx(Role, {
       ...rest,
       "data-_sk-tone": tone,
       "data-_sk-variant": variant,
       className: cx("\u{1F95D}Banner", props.className),
       ref: forwardedRef
-    }
-  ) });
+    })
+  });
 });
 const BannerIcon = forwardRef((props, forwardedRef) => {
   const tone = useBannerState((state) => state.tone);
   const hasDefaultIcon = props.href === void 0 && tone !== "neutral";
   const {
-    render = hasDefaultIcon ? /* @__PURE__ */ jsx(StatusIcon, { tone }) : void 0,
+    render = hasDefaultIcon ? /* @__PURE__ */ jsx(StatusIcon, {
+      tone
+    }) : void 0,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx(
-    Icon,
-    {
+  return /* @__PURE__ */ jsx(Icon, {
+    ...rest,
+    render,
+    className: cx("\u{1F95D}BannerIcon", props.className),
+    ref: forwardedRef
+  });
+});
+const BannerLabel = forwardRef((props, forwardedRef) => {
+  const defaultLabelId = React.useId();
+  const labelId = useBannerState((state) => state.labelId);
+  const setLabelId = useBannerState((state_0) => state_0.setLabelId);
+  const id = props.id ?? defaultLabelId;
+  React.useEffect(() => {
+    setLabelId(id);
+    return () => setLabelId(void 0);
+  }, [setLabelId, id]);
+  return /* @__PURE__ */ jsx(Text, {
+    id: labelId,
+    render: /* @__PURE__ */ jsx("span", {}),
+    ...props,
+    className: cx("\u{1F95D}BannerLabel", props.className),
+    variant: "body-sm",
+    ref: forwardedRef
+  });
+});
+const BannerMessage = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Text, {
+    ...props,
+    variant: "body-sm",
+    className: cx("\u{1F95D}BannerMessage", props.className),
+    ref: forwardedRef
+  });
+});
+const BannerActions = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role.div, {
+    ...props,
+    className: cx("\u{1F95D}BannerActions", props.className),
+    ref: forwardedRef
+  });
+});
+const BannerDismissButton = forwardRef((props, forwardedRef) => {
+  const {
+    label = "Dismiss",
+    ...rest
+  } = props;
+  const labelId = useBannerState((state) => state.labelId);
+  const defaultId = React.useId();
+  const id = props.id ?? defaultId;
+  return /* @__PURE__ */ jsx(GhostAligner, {
+    align: "block",
+    children: /* @__PURE__ */ jsx(IconButton, {
       ...rest,
-      render,
-      className: cx("\u{1F95D}BannerIcon", props.className),
+      id,
+      className: cx("\u{1F95D}BannerDismissButton", props.className),
+      variant: "ghost",
+      label,
+      "aria-labelledby": `${id} ${labelId || ""}`,
+      icon: /* @__PURE__ */ jsx(Dismiss, {}),
       ref: forwardedRef
-    }
-  );
+    })
+  });
 });
-const BannerLabel = forwardRef(
-  (props, forwardedRef) => {
-    const defaultLabelId = React.useId();
-    const labelId = useBannerState((state) => state.labelId);
-    const setLabelId = useBannerState((state) => state.setLabelId);
-    const id = props.id ?? defaultLabelId;
-    React.useEffect(() => {
-      setLabelId(id);
-      return () => setLabelId(void 0);
-    }, [setLabelId, id]);
-    return /* @__PURE__ */ jsx(
-      Text,
-      {
-        id: labelId,
-        render: /* @__PURE__ */ jsx("span", {}),
-        ...props,
-        className: cx("\u{1F95D}BannerLabel", props.className),
-        variant: "body-sm",
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const BannerMessage = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Text,
-      {
-        ...props,
-        variant: "body-sm",
-        className: cx("\u{1F95D}BannerMessage", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const BannerActions = forwardRef(
-  (props, forwardedRef) => {
-    return /* @__PURE__ */ jsx(
-      Role.div,
-      {
-        ...props,
-        className: cx("\u{1F95D}BannerActions", props.className),
-        ref: forwardedRef
-      }
-    );
-  }
-);
-const BannerDismissButton = forwardRef(
-  (props, forwardedRef) => {
-    const { label = "Dismiss", ...rest } = props;
-    const labelId = useBannerState((state) => state.labelId);
-    const defaultId = React.useId();
-    const id = props.id ?? defaultId;
-    return /* @__PURE__ */ jsx(GhostAligner, { align: "block", children: /* @__PURE__ */ jsx(
-      IconButton,
-      {
-        ...rest,
-        id,
-        className: cx("\u{1F95D}BannerDismissButton", props.className),
-        variant: "ghost",
-        label,
-        "aria-labelledby": `${id} ${labelId || ""}`,
-        icon: /* @__PURE__ */ jsx(Dismiss, {}),
-        ref: forwardedRef
-      }
-    ) });
-  }
-);
 const Banner = forwardRef((props, forwardedRef) => {
+  useInit();
   const {
     message,
     label,
@@ -146,23 +173,25 @@ const Banner = forwardRef((props, forwardedRef) => {
     tone = "neutral",
     ...rest
   } = props;
-  const shouldRenderIcon = React.useMemo(
-    () => icon !== void 0 || tone !== "neutral",
-    [icon, tone]
-  );
-  return /* @__PURE__ */ jsxs(BannerRoot, { tone, ...rest, ref: forwardedRef, children: [
-    shouldRenderIcon ? /* @__PURE__ */ jsx(
-      BannerIcon,
-      {
-        href: typeof icon === "string" ? icon : void 0,
-        render: React.isValidElement(icon) ? icon : void 0
-      }
-    ) : null,
-    /* @__PURE__ */ jsx(BannerLabel, { render: React.isValidElement(label) ? label : void 0, children: label }),
-    /* @__PURE__ */ jsx(BannerMessage, { children: message }),
-    actions != null ? /* @__PURE__ */ jsx(BannerActions, { children: actions }) : null,
-    onDismiss ? /* @__PURE__ */ jsx(BannerDismissButton, { onClick: onDismiss }) : null
-  ] });
+  const shouldRenderIcon = React.useMemo(() => icon !== void 0 || tone !== "neutral", [icon, tone]);
+  return /* @__PURE__ */ jsxs(BannerRoot, {
+    tone,
+    ...rest,
+    ref: forwardedRef,
+    children: [shouldRenderIcon ? /* @__PURE__ */ jsx(BannerIcon, {
+      href: typeof icon === "string" ? icon : void 0,
+      render: React.isValidElement(icon) ? icon : void 0
+    }) : null, /* @__PURE__ */ jsx(BannerLabel, {
+      render: React.isValidElement(label) ? label : void 0,
+      children: label
+    }), /* @__PURE__ */ jsx(BannerMessage, {
+      children: message
+    }), actions != null ? /* @__PURE__ */ jsx(BannerActions, {
+      children: actions
+    }) : null, onDismiss ? /* @__PURE__ */ jsx(BannerDismissButton, {
+      onClick: onDismiss
+    }) : null]
+  });
 });
 var Banner_default = Banner;
 export {