@stratakit/structures 0.3.2 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,133 @@
 # Changelog
 
+## 0.4.1
+
+- [#851](https://github.com/iTwin/design-system/pull/851): Added `Dialog` component that displays custom content in a window overlay over the primary window or another dialog window. Currently only modal dialog type is supported.
+
+  ```tsx
+  const [open, setOpen] = useState(false);
+
+  <Button onClick={() => setOpen(true)}>Open dialog</Button>
+  <Dialog.Root modal={true} open={open} onClose={() => setOpen(false)}>
+    <Dialog.Header>
+      <Dialog.Heading>Dialog title</Dialog.Heading>
+      <Dialog.CloseButton />
+    </Dialog.Header>
+    <Dialog.Content>
+      <Text variant="body-sm">Content that describes the primary purpose of the dialog.</Text>
+    </Dialog.Content>
+    <Dialog.Footer>
+      <Dialog.ActionList
+        actions={[
+          <Button key="cancel" onClick={() => setOpen(false)}>Cancel</Button>,
+          <Button key="ok" tone="accent" onClick={() => setOpen(false)}>Ok</Button>,
+        ]}
+      />
+    </Dialog.Footer>
+  </Dialog.Root>
+  ```
+
+- [#884](https://github.com/iTwin/design-system/pull/884): Added new `unstable_NavigationRail` component intended to serve as the application's top-level navigation (e.g. for switching between pages).
+
+  ```jsx
+  <NavigationRail.Root>
+    <NavigationRail.Header>
+      <IconButton label="…" icon={…} href="/" />
+      <NavigationRail.ToggleButton />
+    </NavigationRail.Header>
+
+    <NavigationRail.Content>
+      <NavigationRail.List>
+        <NavigationRail.ListItem>
+          <NavigationRail.Anchor label="…" icon={…} href="/…" />
+        </NavigationRail.ListItem>
+        <NavigationRail.ListItem>
+          <NavigationRail.Anchor label="…" icon={…} href="/…" />
+        </NavigationRail.ListItem>
+        <NavigationRail.ListItem>
+          <NavigationRail.Anchor label="…" icon={…} href="/…" />
+        </NavigationRail.ListItem>
+      </NavigationRail.List>
+
+      <NavigationRail.Footer>
+        <NavigationRail.List>
+          <NavigationRail.ListItem>
+            <NavigationRail.Button label="…" icon={…} onClick={…} />
+          </NavigationRail.ListItem>
+          <NavigationRail.ListItem>
+            <NavigationRail.Button label="…" icon={…} onClick={…} />
+          </NavigationRail.ListItem>
+        </NavigationRail.List>
+     </NavigationRail.Footer>
+    </NavigationRail.Content>
+  </NavigationRail.Root>
+  ```
+
+- Updated dependencies:
+  - @stratakit/foundations@0.3.1
+  - @stratakit/bricks@0.4.1
+
+## 0.4.0
+
+### Breaking changes
+
+- [#888](https://github.com/iTwin/design-system/pull/888): `Toolbar.Item` component no longer automatically uses the large version of the icon.
+
+  `#icon-large` must now be explicitly added to the URL to select the large icons from `@stratakit/icons`. For example:
+
+  ```diff
+    <Toolbar.Item
+  -   render={<IconButton icon={placeholderIcon} />}
+  +   render={<IconButton icon={`${placeholderIcon}#icon-large`} />}
+    />
+  ```
+
+- [#900](https://github.com/iTwin/design-system/pull/900): Renamed `Tabs.Root` component to `Tabs.Provider`.
+
+  ```diff
+  - <Tabs.Root>
+  + <Tabs.Provider>
+      <Tabs.TabList>…</Tabs.TabList>
+      <Tabs.TabPanel>…</Tabs.TabPanel>
+  - </Tabs.Root>
+  + </Tabs.Provider>
+  ```
+
+  This change makes StrataKit's naming convention more consistent. `Root` components always render a DOM element whereas `Provider` components have no underlying DOM element.
+
+- [#900](https://github.com/iTwin/design-system/pull/900): Renamed `DropdownMenu.Root` component to `DropdownMenu.Provider`.
+
+  ```diff
+  - <DropdownMenu.Root>
+  + <DropdownMenu.Provider>
+      <DropdownMenu.Button>…</DropdownMenu.Button>
+      <DropdownMenu.Content>…</DropdownMenu.Content>
+  - </DropdownMenu.Root>
+  + </DropdownMenu.Provider>
+  ```
+
+  This change makes StrataKit's naming convention more consistent. `Root` components always render a DOM element whereas `Provider` components have no underlying DOM element.
+
+### Non-breaking changes
+
+- [#903](https://github.com/iTwin/design-system/pull/903): Added proper styling for `Divider` rendered inside a `Toolbar.Group`.
+
+  ```tsx
+  <Toolbar.Group variant="solid">
+    <Toolbar.Item render={…} />
+    <Divider orientation="vertical" />
+    <Toolbar.Item render={…} />
+    <Toolbar.Item render={…} />
+  </Toolbar.Group>
+  ```
+
+- [#913](https://github.com/iTwin/design-system/pull/913): Updated internal CSS selectors in every component.
+- [#901](https://github.com/iTwin/design-system/pull/901): Added `orientation` prop to `Toolbar.Group` component. Set the `orientation` prop to `"vertical"` to display the toolbar vertically.
+- [#902](https://github.com/iTwin/design-system/pull/902): Updated active style of a ghost `IconButton` when used in a `Toolbar` component.
+- Updated dependencies:
+  - @stratakit/foundations@0.3.0
+  - @stratakit/bricks@0.4.0
+
 ## 0.3.2
 
 - [#881](https://github.com/iTwin/design-system/pull/881): Updated CSS to use `--stratakit-space-` variables instead of hardcoded values in all components.

package/dist/AccordionItem.js

@@ -39,8 +39,8 @@ const AccordionItemRoot = forwardRef(
           Role,
           {
             ...rest,
-            className: cx("\u{1F95D}-accordion-item", props.className),
-            "data-kiwi-open": open,
+            className: cx("\u{1F95D}AccordionItem", props.className),
+            "data-_sk-open": open,
             ref: forwardedRef
           }
         )
@@ -53,7 +53,7 @@ const AccordionItemHeader = forwardRef(
     Role,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-header", props.className),
+      className: cx("\u{1F95D}AccordionItemHeader", props.className),
       ref: forwardedRef
     }
   ) })
@@ -63,7 +63,7 @@ const AccordionItemButton = forwardRef(
     Disclosure,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-button", props.className),
+      className: cx("\u{1F95D}AccordionItemButton", props.className),
       ref: forwardedRef
     }
   )
@@ -74,7 +74,7 @@ const AccordionItemLabel = forwardRef(
     {
       ...props,
       variant: "body-sm",
-      className: cx("\u{1F95D}-accordion-item-label", props.className),
+      className: cx("\u{1F95D}AccordionItemLabel", props.className),
       ref: forwardedRef
     }
   )
@@ -84,7 +84,7 @@ const AccordionItemDecoration = forwardRef(
     Role,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-decoration", props.className),
+      className: cx("\u{1F95D}AccordionItemDecoration", props.className),
       ref: forwardedRef
     }
   )
@@ -95,13 +95,13 @@ const AccordionItemMarker = forwardRef(
     {
       ...props,
       variant: "ghost",
-      className: cx("\u{1F95D}-accordion-item-marker", props.className),
+      className: cx("\u{1F95D}AccordionItemMarker", props.className),
       ref: forwardedRef,
       children: props.children ?? /* @__PURE__ */ jsx(
         ChevronDown,
         {
           "aria-hidden": "true",
-          className: "\u{1F95D}-accordion-item-marker-chevron"
+          className: "\u{1F95D}AccordionItemMarkerChevron"
         }
       )
     }
@@ -112,7 +112,7 @@ const AccordionItemContent = forwardRef(
     DisclosureContent,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-content", props.className),
+      className: cx("\u{1F95D}AccordionItemContent", props.className),
       ref: forwardedRef
     }
   )
@@ -123,7 +123,7 @@ const AccordionItemHeading = forwardRef(
     {
       ...props,
       variant: "body-sm",
-      className: cx("\u{1F95D}-accordion-item-heading", props.className),
+      className: cx("\u{1F95D}AccordionItemHeading", props.className),
       ref: forwardedRef
     }
   )

package/dist/Banner.js

@@ -40,9 +40,9 @@ const BannerRoot = forwardRef((props, forwardedRef) => {
     Role,
     {
       ...rest,
-      "data-kiwi-tone": tone,
-      "data-kiwi-variant": variant,
-      className: cx("\u{1F95D}-banner", props.className),
+      "data-_sk-tone": tone,
+      "data-_sk-variant": variant,
+      className: cx("\u{1F95D}Banner", props.className),
       ref: forwardedRef
     }
   ) });
@@ -59,7 +59,7 @@ const BannerIcon = forwardRef((props, forwardedRef) => {
     {
       ...rest,
       render,
-      className: cx("\u{1F95D}-banner-icon", props.className),
+      className: cx("\u{1F95D}BannerIcon", props.className),
       ref: forwardedRef
     }
   );
@@ -80,7 +80,7 @@ const BannerLabel = forwardRef(
         id: labelId,
         render: /* @__PURE__ */ jsx("span", {}),
         ...props,
-        className: cx("\u{1F95D}-banner-label", props.className),
+        className: cx("\u{1F95D}BannerLabel", props.className),
         variant: "body-sm",
         ref: forwardedRef
       }
@@ -94,7 +94,7 @@ const BannerMessage = forwardRef(
       {
         ...props,
         variant: "body-sm",
-        className: cx("\u{1F95D}-banner-message", props.className),
+        className: cx("\u{1F95D}BannerMessage", props.className),
         ref: forwardedRef
       }
     );
@@ -106,7 +106,7 @@ const BannerActions = forwardRef(
       Role.div,
       {
         ...props,
-        className: cx("\u{1F95D}-banner-actions", props.className),
+        className: cx("\u{1F95D}BannerActions", props.className),
         ref: forwardedRef
       }
     );
@@ -123,7 +123,7 @@ const BannerDismissButton = forwardRef(
       {
         ...rest,
         id,
-        className: cx("\u{1F95D}-banner-dismiss-button", props.className),
+        className: cx("\u{1F95D}BannerDismissButton", props.className),
         variant: "ghost",
         label,
         "aria-labelledby": `${id} ${labelId || ""}`,

package/dist/Chip.js

@@ -36,9 +36,9 @@ const ChipRoot = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
     Role.div,
     {
-      "data-kiwi-variant": variant,
+      "data-_sk-variant": variant,
       ...rest,
-      className: cx("\u{1F95D}-chip", props.className),
+      className: cx("\u{1F95D}Chip", props.className),
       ref: forwardedRef
     }
   ) });
@@ -54,7 +54,7 @@ const ChipLabel = forwardRef((props, forwardedRef) => {
     {
       id: labelId,
       ...props,
-      className: cx("\u{1F95D}-chip-label", props.className),
+      className: cx("\u{1F95D}ChipLabel", props.className),
       ref: forwardedRef
     }
   );
@@ -72,7 +72,7 @@ const ChipDismissButton = forwardRef(
         "aria-labelledby": `${id} ${labelId}`,
         ...rest,
         label,
-        className: cx("\u{1F95D}-chip-dismiss-button", props.className),
+        className: cx("\u{1F95D}ChipDismissButton", props.className),
         variant: "ghost",
         labelVariant: "visually-hidden",
         icon: /* @__PURE__ */ jsx(Dismiss, {}),

package/dist/DEV/AccordionItem.js

@@ -39,8 +39,8 @@ const AccordionItemRoot = forwardRef(
           Role,
           {
             ...rest,
-            className: cx("\u{1F95D}-accordion-item", props.className),
-            "data-kiwi-open": open,
+            className: cx("\u{1F95D}AccordionItem", props.className),
+            "data-_sk-open": open,
             ref: forwardedRef
           }
         )
@@ -54,7 +54,7 @@ const AccordionItemHeader = forwardRef(
     Role,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-header", props.className),
+      className: cx("\u{1F95D}AccordionItemHeader", props.className),
       ref: forwardedRef
     }
   ) })
@@ -65,7 +65,7 @@ const AccordionItemButton = forwardRef(
     Disclosure,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-button", props.className),
+      className: cx("\u{1F95D}AccordionItemButton", props.className),
       ref: forwardedRef
     }
   )
@@ -77,7 +77,7 @@ const AccordionItemLabel = forwardRef(
     {
       ...props,
       variant: "body-sm",
-      className: cx("\u{1F95D}-accordion-item-label", props.className),
+      className: cx("\u{1F95D}AccordionItemLabel", props.className),
       ref: forwardedRef
     }
   )
@@ -88,7 +88,7 @@ const AccordionItemDecoration = forwardRef(
     Role,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-decoration", props.className),
+      className: cx("\u{1F95D}AccordionItemDecoration", props.className),
       ref: forwardedRef
     }
   )
@@ -100,13 +100,13 @@ const AccordionItemMarker = forwardRef(
     {
       ...props,
       variant: "ghost",
-      className: cx("\u{1F95D}-accordion-item-marker", props.className),
+      className: cx("\u{1F95D}AccordionItemMarker", props.className),
       ref: forwardedRef,
       children: props.children ?? /* @__PURE__ */ jsx(
         ChevronDown,
         {
           "aria-hidden": "true",
-          className: "\u{1F95D}-accordion-item-marker-chevron"
+          className: "\u{1F95D}AccordionItemMarkerChevron"
         }
       )
     }
@@ -118,7 +118,7 @@ const AccordionItemContent = forwardRef(
     DisclosureContent,
     {
       ...props,
-      className: cx("\u{1F95D}-accordion-item-content", props.className),
+      className: cx("\u{1F95D}AccordionItemContent", props.className),
       ref: forwardedRef
     }
   )
@@ -130,7 +130,7 @@ const AccordionItemHeading = forwardRef(
     {
       ...props,
       variant: "body-sm",
-      className: cx("\u{1F95D}-accordion-item-heading", props.className),
+      className: cx("\u{1F95D}AccordionItemHeading", props.className),
       ref: forwardedRef
     }
   )

package/dist/DEV/Banner.js

@@ -40,9 +40,9 @@ const BannerRoot = forwardRef((props, forwardedRef) => {
     Role,
     {
       ...rest,
-      "data-kiwi-tone": tone,
-      "data-kiwi-variant": variant,
-      className: cx("\u{1F95D}-banner", props.className),
+      "data-_sk-tone": tone,
+      "data-_sk-variant": variant,
+      className: cx("\u{1F95D}Banner", props.className),
       ref: forwardedRef
     }
   ) });
@@ -60,7 +60,7 @@ const BannerIcon = forwardRef((props, forwardedRef) => {
     {
       ...rest,
       render,
-      className: cx("\u{1F95D}-banner-icon", props.className),
+      className: cx("\u{1F95D}BannerIcon", props.className),
       ref: forwardedRef
     }
   );
@@ -82,7 +82,7 @@ const BannerLabel = forwardRef(
         id: labelId,
         render: /* @__PURE__ */ jsx("span", {}),
         ...props,
-        className: cx("\u{1F95D}-banner-label", props.className),
+        className: cx("\u{1F95D}BannerLabel", props.className),
         variant: "body-sm",
         ref: forwardedRef
       }
@@ -97,7 +97,7 @@ const BannerMessage = forwardRef(
       {
         ...props,
         variant: "body-sm",
-        className: cx("\u{1F95D}-banner-message", props.className),
+        className: cx("\u{1F95D}BannerMessage", props.className),
         ref: forwardedRef
       }
     );
@@ -110,7 +110,7 @@ const BannerActions = forwardRef(
       Role.div,
       {
         ...props,
-        className: cx("\u{1F95D}-banner-actions", props.className),
+        className: cx("\u{1F95D}BannerActions", props.className),
         ref: forwardedRef
       }
     );
@@ -128,7 +128,7 @@ const BannerDismissButton = forwardRef(
       {
         ...rest,
         id,
-        className: cx("\u{1F95D}-banner-dismiss-button", props.className),
+        className: cx("\u{1F95D}BannerDismissButton", props.className),
         variant: "ghost",
         label,
         "aria-labelledby": `${id} ${labelId || ""}`,

package/dist/DEV/Chip.js

@@ -36,9 +36,9 @@ const ChipRoot = forwardRef((props, forwardedRef) => {
   return /* @__PURE__ */ jsx(ChipProvider, { children: /* @__PURE__ */ jsx(
     Role.div,
     {
-      "data-kiwi-variant": variant,
+      "data-_sk-variant": variant,
       ...rest,
-      className: cx("\u{1F95D}-chip", props.className),
+      className: cx("\u{1F95D}Chip", props.className),
       ref: forwardedRef
     }
   ) });
@@ -55,7 +55,7 @@ const ChipLabel = forwardRef((props, forwardedRef) => {
     {
       id: labelId,
       ...props,
-      className: cx("\u{1F95D}-chip-label", props.className),
+      className: cx("\u{1F95D}ChipLabel", props.className),
       ref: forwardedRef
     }
   );
@@ -74,7 +74,7 @@ const ChipDismissButton = forwardRef(
         "aria-labelledby": `${id} ${labelId}`,
         ...rest,
         label,
-        className: cx("\u{1F95D}-chip-dismiss-button", props.className),
+        className: cx("\u{1F95D}ChipDismissButton", props.className),
         variant: "ghost",
         labelVariant: "visually-hidden",
         icon: /* @__PURE__ */ jsx(Dismiss, {}),

package/dist/DEV/Dialog.js

@@ -0,0 +1,179 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import * as AkDialog from "@ariakit/react/dialog";
+import { Portal, PortalContext } from "@ariakit/react/portal";
+import { Role } from "@ariakit/react/role";
+import { useStoreState } from "@ariakit/react/store";
+import { IconButton, Text } from "@stratakit/bricks";
+import { GhostAligner } from "@stratakit/bricks/secret-internals";
+import {
+  forwardRef,
+  usePopoverApi
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { Dismiss } from "./~utils.icons.js";
+const DialogRoot = forwardRef((props, forwardedRef) => {
+  const { backdrop = true, unmountOnHide = true, ...rest } = props;
+  const store = AkDialog.useDialogStore();
+  const contentElement = useStoreState(store, "contentElement");
+  const mounted = useStoreState(store, (state) => {
+    if (!unmountOnHide) return true;
+    return props.open ?? state?.mounted;
+  });
+  if (!mounted) return null;
+  return /* @__PURE__ */ jsx(AkDialog.DialogProvider, { store, children: /* @__PURE__ */ jsx(DialogWrapper, { open: props.open, children: /* @__PURE__ */ jsxs(
+    AkDialog.Dialog,
+    {
+      unmountOnHide,
+      portal: false,
+      ...rest,
+      backdrop: backdrop === true ? /* @__PURE__ */ jsx(DialogBackdrop, {}) : backdrop,
+      className: cx("\u{1F95D}Dialog", props.className),
+      ref: forwardedRef,
+      children: [
+        /* @__PURE__ */ jsx(AkDialog.DialogDismiss, { hidden: true }),
+        /* @__PURE__ */ jsx(PortalContext.Provider, { value: contentElement, children: props.children })
+      ]
+    }
+  ) }) });
+});
+DEV: DialogRoot.displayName = "Dialog.Root";
+function DialogWrapper(props) {
+  const [wrapper, setWrapper] = React.useState(null);
+  const store = AkDialog.useDialogContext();
+  const open = useStoreState(store, (state) => {
+    return props.open ?? state?.open;
+  });
+  const popoverProps = usePopoverApi({
+    element: wrapper,
+    open
+  });
+  const mounted = useStoreState(store, "mounted");
+  return /* @__PURE__ */ jsx(
+    Portal,
+    {
+      className: "\u{1F95D}DialogWrapper",
+      ref: setWrapper,
+      ...popoverProps,
+      hidden: mounted ? void 0 : true,
+      children: props.children
+    }
+  );
+}
+DEV: DialogWrapper.displayName = "DialogWrapper";
+const DialogHeader = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogHeader", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DialogHeader.displayName = "Dialog.Header";
+const DialogHeading = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      AkDialog.DialogHeading,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogHeading", props.className),
+        render: /* @__PURE__ */ jsx(Text, { variant: "body-lg", render: props.render ?? /* @__PURE__ */ jsx("h1", {}) }),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DialogHeading.displayName = "Dialog.Heading";
+const DialogCloseButton = forwardRef(
+  (props, forwardedRef) => {
+    const { label = "Dismiss", ...rest } = props;
+    return /* @__PURE__ */ jsx(GhostAligner, { align: "inline-end", children: /* @__PURE__ */ jsx(
+      AkDialog.DialogDismiss,
+      {
+        ...rest,
+        render: /* @__PURE__ */ jsx(
+          IconButton,
+          {
+            render: props.render,
+            variant: "ghost",
+            label,
+            icon: /* @__PURE__ */ jsx(Dismiss, {})
+          }
+        ),
+        ref: forwardedRef
+      }
+    ) });
+  }
+);
+DEV: DialogCloseButton.displayName = "Dialog.CloseButton";
+const DialogContent = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogContent", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DialogContent.displayName = "Dialog.Content";
+const DialogFooter = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogFooter", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DialogFooter.displayName = "Dialog.Footer";
+const DialogActionList = forwardRef(
+  (props, forwardedRef) => {
+    const { actions, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        role: "list",
+        ...rest,
+        className: cx("\u{1F95D}DialogActionList", props.className),
+        ref: forwardedRef,
+        children: React.Children.map(actions, (action) => {
+          return /* @__PURE__ */ jsx("div", { role: "listitem", children: action });
+        })
+      }
+    );
+  }
+);
+DEV: DialogActionList.displayName = "Dialog.ActionList";
+const DialogBackdrop = forwardRef(
+  (props, forwardedRef) => {
+    return /* @__PURE__ */ jsx(
+      Role,
+      {
+        ...props,
+        className: cx("\u{1F95D}DialogBackdrop", props.className),
+        ref: forwardedRef
+      }
+    );
+  }
+);
+DEV: DialogBackdrop.displayName = "Dialog.Backdrop";
+export {
+  DialogActionList as ActionList,
+  DialogBackdrop as Backdrop,
+  DialogCloseButton as CloseButton,
+  DialogContent as Content,
+  DialogFooter as Footer,
+  DialogHeader as Header,
+  DialogHeading as Heading,
+  DialogRoot as Root
+};