@stratakit/structures 0.2.3 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,119 @@
 # Changelog
 
+## 0.3.0
+
+### Breaking changes
+
+- [#847](https://github.com/iTwin/design-system/pull/847): The `id` prop in `Tabs.Tab` and `tabId` prop in `Tabs.TabPanel` have been made required.
+- [#805](https://github.com/iTwin/design-system/pull/805): Changed `actions` prop of the `Tree.Item` component to no longer automatically inline some of the actions. Instead, newly added `inlineActions` prop can be used to display up to two inline actions. All actions specified in a `actions` prop will be rendered in the action menu.
+
+  ```tsx
+  <Tree.Item
+    inlineActions={[
+      <Tree.ItemAction key={…} icon={…} label={…} />,
+      <Tree.ItemAction key={…} icon={…} label={…} />,
+    ]}
+    actions={[
+      <Tree.ItemAction key={…} label={…} />,
+      <Tree.ItemAction key={…} label={…} />,
+    ]}
+  />
+  ```
+
+  A single error-related action should be specified when the tree item has an error.
+
+  ```tsx
+  <Tree.Item
+    error={error}
+    inlineActions={
+  	  error
+  	    ? [
+  	        <Tree.ItemAction key={…} icon={…} label={…} />
+  	      ]
+  	    : [
+  	        <Tree.ItemAction key={…} icon={…} label={…} />,
+  	        <Tree.ItemAction key={…} icon={…} label={…} />,
+  	      ]
+  	}
+  />
+  ```
+
+### Non-breaking changes
+
+- [#821](https://github.com/iTwin/design-system/pull/821): Added compositional `Banner.Root`, `Banner.Icon`, `Banner.Label`, `Banner.Message`, `Banner.Actions`, and `Banner.DismissButton` components. These new components can be used when you need fine grained configuration.
+
+  To use the compositional components, import them from the `/unstable_Banner` subpath:
+
+  ```tsx
+  import * as Banner from "@stratakit/structures/unstable_Banner";
+
+  <Banner.Root>
+  	<Banner.Icon href={placeholderIcon} />
+  	<Banner.Label>Label</Banner.Label>
+  	<Banner.Message>Message</Banner.Message>
+  	<Banner.Actions>
+  		<Button>Action</Button>
+  	</Banner.Actions>
+  	<Banner.DismissButton onClick={onDismiss} />
+  </Banner.Root>;
+  ```
+
+- [#716](https://github.com/iTwin/design-system/pull/716): Added support for placing `<AccordionItem.Marker>` before and `<AccordionItem.Decoration>` after the rest of the content in `<AccordionItem.Header>`.
+
+  The `<AccordionItem.Marker>` is now recommended to be placed _before_ the rest of the header content.
+
+  ```tsx
+  <AccordionItem.Header>
+  	<AccordionItem.Marker />
+  	<AccordionItem.Button>
+  		<AccordionItem.Label>Label</AccordionItem.Label>
+  	</AccordionItem.Button>
+  </AccordionItem.Header>
+  ```
+
+- [#716](https://github.com/iTwin/design-system/pull/716): Added support for multiple decorations for `AccordionItem` when passed as children in `<AccordionItem.Decoration>`.
+
+  ```tsx
+  <AccordionItem.Header>
+  	<AccordionItem.Marker />
+  	<AccordionItem.Decoration>
+  		<Icon href={placeholder} />
+  		<Icon href={placeholder} />
+  	</AccordionItem.Decoration>
+  	<AccordionItem.Button>
+  		<AccordionItem.Label>Label</AccordionItem.Label>
+  	</AccordionItem.Button>
+  </AccordionItem.Header>
+  ```
+
+- [#849](https://github.com/iTwin/design-system/pull/849): Add `background-color` change for the `<AccordionItem.Header>` instead of just the `<AccordionItem.Marker>` for the "hover" and "pressed" states of `<AccordionItem.Header>`.
+
+- [#829](https://github.com/iTwin/design-system/pull/829): Improved the performance of the `Tree.Item` component by deferring the rendering of actions until the tree item becomes visible on the screen.
+
+- [#809](https://github.com/iTwin/design-system/pull/809): Added active and active-hover states to the `Table.Row` component for styling selected rows. To enable selection, render a `Checkbox` component within the row. A row is considered selected when its checkbox is checked.
+
+  ```tsx
+  <Table.Row>
+  	<Table.Cell>
+  		<Checkbox checked />
+  	</Table.Cell>
+  	<Table.Cell>Item 1</Table.Cell>
+  </Table.Row>
+  ```
+
+- [#854](https://github.com/iTwin/design-system/pull/854): Updated the status icons used internally by various components: `unstable_Banner`, and `unstable_ErrorRegion` and `Tree.Item`.
+
+- Updated dependencies:
+  - @stratakit/bricks@0.3.3
+  - @stratakit/foundations@0.2.2
+
+## 0.2.4
+
+- [#835](https://github.com/iTwin/design-system/pull/835): Added active-hover state styles to the `Tree.Item` component.
+- Updated dependencies:
+  - @stratakit/bricks@0.3.2
+  - @stratakit/foundations@0.2.1
+
 ## 0.2.3
 
 - [#788](https://github.com/iTwin/design-system/pull/788): Updated `Tabs.Tab` component to support optional start and end icons.

package/dist/AccordionItem.d.ts

@@ -26,10 +26,10 @@ interface AccordionItemProps extends BaseProps {
  * ```tsx
  * <AccordionItem.Root>
  *   <AccordionItem.Header>
+ *     <AccordionItem.Marker />
  *     <AccordionItem.Button>
  *       <AccordionItem.Label>Label</AccordionItem.Label>
  *     </AccordionItem.Button>
- *     <AccordionItem.Marker />
  *   </AccordionItem.Header>
  *   <AccordionItem.Content>Body</AccordionItem.Content>
  * </AccordionItem.Root>
@@ -43,12 +43,12 @@ interface AccordionItemProps extends BaseProps {
  * ```tsx
  * <AccordionItem.Root>
  *   <AccordionItem.Header>
+ *     <AccordionItem.Marker />
  *     <AccordionItem.Heading render={<h2 />}>
  *       <AccordionItem.Button>
  *         <AccordionItem.Label>Label</AccordionItem.Label>
  *       </AccordionItem.Button>
  *     </AccordionItem.Heading>
- *     <AccordionItem.Marker />
  *   </AccordionItem.Header>
  *   <AccordionItem.Content>Body</AccordionItem.Content>
  * </AccordionItem.Root>
@@ -58,11 +58,11 @@ interface AccordionItemProps extends BaseProps {
  * ```tsx
  * <AccordionItem.Root>
  *   <AccordionItem.Header>
+ *     <AccordionItem.Marker />
  *     <AccordionItem.Decoration render={<Icon href={placeholder} />} />
  *     <AccordionItem.Button>
  *       <AccordionItem.Label>Label</AccordionItem.Label>
  *     </AccordionItem.Button>
- *     <AccordionItem.Marker />
  *   </AccordionItem.Header>
  *   <AccordionItem.Content>Body</AccordionItem.Content>
  * </AccordionItem.Root>
@@ -78,11 +78,11 @@ declare const AccordionItemRoot: import("react").ForwardRefExoticComponent<Accor
  * Example:
  * ```tsx
  * <AccordionItem.Root>
- * 	 <AccordionItem.Header>
+ *   <AccordionItem.Header>
+ *     <AccordionItem.Marker />
  *     <AccordionItem.Button>
  *       <AccordionItem.Label>Label</AccordionItem.Label>
  *     </AccordionItem.Button>
- *     <AccordionItem.Marker />
  *   </AccordionItem.Header>
  *   <AccordionItem.Content>Body</AccordionItem.Content>
  * </AccordionItem.Root>
@@ -97,10 +97,10 @@ declare const AccordionItemHeader: import("react").ForwardRefExoticComponent<Pic
  * Example:
  * ```tsx
  * <AccordionItem.Header>
+ *   <AccordionItem.Marker />
  *   <AccordionItem.Button>
  *     <AccordionItem.Label>Label</AccordionItem.Label>
  *   </AccordionItem.Button>
- *   <AccordionItem.Marker />
  * </AccordionItem.Header>
  * ```
  */
@@ -119,45 +119,94 @@ declare const AccordionItemButton: import("react").ForwardRefExoticComponent<Pic
  */
 declare const AccordionItemLabel: 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>>;
 /**
- * The always-visible, optional decoration of an accordion item’s button.
+ * The always-visible, optional decoration of the `AccordionItem.Header` content.
+ * It can be placed before or after the rest of the content in
+ * `AccordionItem.Header`. However, the `AccordionItem.Marker` must always be
+ * placed at either edge (beginning or end) of the header.
  *
- * Use as a direct descendant of `AccordionItem.Header`. This will be visually
- * presented before the button’s label.
+ * Use as a direct descendant of `AccordionItem.Header`. The decoration
+ * can be placed before the rest of the header content.
  *
  * Example:
  * ```tsx
  * <AccordionItem.Header>
+ *   <AccordionItem.Marker />
  *   <AccordionItem.Decoration render={<Icon href={placeholder} />} />
  *   <AccordionItem.Button>
  *     <AccordionItem.Label>Label</AccordionItem.Label>
  *   </AccordionItem.Button>
+ * </AccordionItem.Header>
+ * ```
+ *
+ * Alternatively, the decoration can also be placed after the rest of the
+ * header content.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Header>
+ *   <AccordionItem.Marker />
+ *   <AccordionItem.Button>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *   </AccordionItem.Button>
+ *   <AccordionItem.Decoration render={<Icon href={placeholder} />} />
+ * </AccordionItem.Header>
+ * ```
+ *
+ * There can also be multiple decorations if passed as children under
+ * `AccordionItem.Decoration`.
+ *
+ * Example:
+ * ```tsx
+ * <AccordionItem.Header>
  *   <AccordionItem.Marker />
+ *   <AccordionItem.Decoration>
+ *     <Icon href={placeholder} />
+ *     <Icon href={placeholder} />
+ *   </AccordionItem.Decoration>
+ *   <AccordionItem.Button>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *   </AccordionItem.Button>
  * </AccordionItem.Header>
  * ```
  */
 declare const AccordionItemDecoration: 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>>;
 /**
- * The visual marker of an accordion item’s button.
+ * The visual marker of the `AccordionItem.Header` content. While it can be
+ * placed before or after the rest of the content in `AccordionItem.Header`,
+ * it is recommended to place the marker before.
  *
  * Example:
  * ```tsx
  * <AccordionItem.Header>
+ *   <AccordionItem.Marker />
  *   <AccordionItem.Button>
  *     <AccordionItem.Label>Label</AccordionItem.Label>
  *   </AccordionItem.Button>
- *   <AccordionItem.Marker />
  * </AccordionItem.Header>
  * ```
  *
- * Pass an icon as a child to override the default chevron icon:
+ * Alternatively, the marker can also be placed after the rest of the header
+ * content.
+ *
+ * Example:
  * ```tsx
  * <AccordionItem.Header>
  *   <AccordionItem.Button>
  *     <AccordionItem.Label>Label</AccordionItem.Label>
  *   </AccordionItem.Button>
+ *   <AccordionItem.Marker />
+ * </AccordionItem.Header>
+ * ```
+ *
+ * Pass an icon as a child to override the default chevron icon:
+ * ```tsx
+ * <AccordionItem.Header>
  *   <AccordionItem.Marker>
  *     <Icon href={placeholder} />
  *   </AccordionItem.Marker>
+ *   <AccordionItem.Button>
+ *     <AccordionItem.Label>Label</AccordionItem.Label>
+ *   </AccordionItem.Button>
  * </AccordionItem.Header>
  * ```
  */
@@ -168,11 +217,11 @@ declare const AccordionItemMarker: import("react").ForwardRefExoticComponent<Pic
  * Example:
  * ```tsx
  * <AccordionItem.Root>
- * 	 <AccordionItem.Header>
+ *   <AccordionItem.Header>
+ *     <AccordionItem.Marker />
  *     <AccordionItem.Button>
  *       <AccordionItem.Label>Label</AccordionItem.Label>
  *     </AccordionItem.Button>
- *     <AccordionItem.Marker />
  *   </AccordionItem.Header>
  *   <AccordionItem.Content>Body</AccordionItem.Content>
  * </AccordionItem.Root>
@@ -190,12 +239,12 @@ interface AccordionItemHeadingProps extends BaseProps {
  * Example:
  * ```tsx
  * <AccordionItem.Header>
+ *   <AccordionItem.Marker />
  *   <AccordionItem.Heading render={<h2 />}>
  *     <AccordionItem.Button>
  *       <AccordionItem.Label>Label</AccordionItem.Label>
  *     </AccordionItem.Button>
  *   </AccordionItem.Heading>
- *   <AccordionItem.Marker />
  * </AccordionItem.Header>
  */
 declare const AccordionItemHeading: import("react").ForwardRefExoticComponent<AccordionItemHeadingProps & import("react").RefAttributes<HTMLDivElement | HTMLElement>>;

package/dist/Banner.d.ts

@@ -1,33 +1,178 @@
 import * as React from "react";
+import { Icon } from "@stratakit/foundations";
 import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface BannerRootProps extends BaseProps<"div"> {
+    /**
+     * The tone of the banner.
+     *
+     * @default "neutral"
+     */
+    tone?: "neutral" | "info" | "positive" | "attention" | "critical";
+    /**
+     * The variant of the banner.
+     *
+     * @default "outline"
+     */
+    variant?: "outline";
+}
 /**
  * A banner to highlight information and also optionally provide actions.
  * The information could be very important (like a call to action) or reasonably import (like a status message).
  *
  * Example:
  * ```tsx
- * <Banner label="Title" message="Message" icon={placeholderIcon} onDismiss={() => {}} />
+ * <Banner.Root tone="info" variant="outline">
+ *   <Banner.Icon />
+ *   <Banner.Label>Label</Banner.Label>
+ *   <Banner.Message>Message</Banner.Message>
+ *   <Banner.DismissButton onClick={onDismiss} />
+ * </Banner.Root>
+ * ```
+ */
+declare const BannerRoot: React.ForwardRefExoticComponent<BannerRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface BannerIconProps extends React.ComponentProps<typeof Icon> {
+}
+/**
+ * A static icon decoration for the banner.
+ *
+ * - If no `href` is passed and the `tone` is `"neutral"`, no icon is shown.
+ * - If no `href` is passed and the `tone` is not` "neutral"`, the status icon is shown.
+ *
+ * Example with default status icon:
+ * ```tsx
+ * <Banner.Root tone="info">
+ *   <Banner.Icon />
+ * </Banner.Root>
+ *
+ * Example with custom icon:
+ * ```tsx
+ * import placeholderIcon from "@stratakit/icons/placeholder.svg";
+ *
+ * <Banner.Root>
+ *   <Banner.Icon href={placeholderIcon} />
+ * </Banner.Root>
+ * ```
+ */
+declare const BannerIcon: React.ForwardRefExoticComponent<Omit<BannerIconProps, "ref"> & React.RefAttributes<HTMLElement | SVGSVGElement>>;
+interface BannerLabelProps extends BaseProps<"span"> {
+}
+/**
+ * The label of the banner.
+ *
+ * Pass `render={<VisuallyHidden />}` if you don't want the label to be visible.
+ *
+ * Example:
+ * ```tsx
+ * <Banner.Root>
+ *   <Banner.Label>Label</Banner.Label>
+ * </Banner.Root>
+ * ```
+ *
+ * Example with a visually hidden label:
+ * ```tsx
+ * <Banner.Root>
+ *   <Banner.Label render={<VisuallyHidden />}>Label</Banner.Label>
+ * </Banner.Root>
+ * ```
+ */
+declare const BannerLabel: React.ForwardRefExoticComponent<BannerLabelProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+interface BannerMessageProps extends BaseProps<"div"> {
+}
+/**
+ * The message content of the banner.
+ *
+ * Example:
+ * ```tsx
+ * <Banner.Root>
+ *   <Banner.Message>Message content goes here.</Banner.Message>
+ * </Banner.Root>
  * ```
  */
-declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "children"> & {
+declare const BannerMessage: React.ForwardRefExoticComponent<BannerMessageProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+interface BannerActionsProps extends BaseProps<"div"> {
+}
+/**
+ * The actions available for the banner.
+ *
+ * Example with one action:
+ * ```tsx
+ * <Banner.Root>
+ *   <Banner.Actions>
+ *     <Button key={…} onClick={…}>Action</Button>
+ *   </Banner.Actions>
+ * </Banner.Root>
+ * ```
+ *
+ * Example with two `Button`s:
+ * ```tsx
+ * <Banner.Root>
+ *   <Banner.Actions>
+ *     <Button key={…} onClick={…}>Action 1</Button>
+ *     <Button key={…} onClick={…}>Action 2</Button>
+ *   </Banner.Actions>
+ * </Banner.Root>
+ * ```
+ *
+ * Example with two `Anchor`s as `Button`:
+ * ```tsx
+ * <Banner.Root>
+ *   <Banner.Actions>
+ *     <Anchor key={…} render={<button />} onClick={…}>Action 1</Anchor>,
+ *     <Anchor key={…} render={<button />} onClick={…}>Action 2</Anchor>,
+ *   </Banner.Actions>
+ * </Banner.Root>
+ * ```
+ */
+declare const BannerActions: React.ForwardRefExoticComponent<BannerActionsProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
+interface BannerDismissButtonProps extends Omit<BaseProps<"button">, "children"> {
     /**
-     * Icon to be displayed inside the banner.
+     * Label for the dismiss button.
      *
-     * Can be a URL of an SVG from the `@stratakit/icons` package,
-     * or a custom JSX icon.
+     * The final accessible name of the dismiss button is a combination of this `label` and the text content of `Banner.Label`.
      *
-     * - If `icon=undefined` and `tone="neutral"`, no icon is shown.
-     * - If `icon=undefined` and `tone!="neutral"`, the status icon will be shown.
+     * @default "Dismiss"
+     */
+    label?: string;
+}
+/**
+ * Dismiss ("❌") button for the banner.
+ * Handle the `onClick` callback to dismiss the banner.
+ *
+ * Example:
+ * ```tsx
+ * <Banner.Root>
+ *   <Banner.DismissButton onClick={() => {}} />
+ * </Banner.Root>
+ * ```
+ */
+declare const BannerDismissButton: React.ForwardRefExoticComponent<BannerDismissButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+/**
+ * A banner to highlight information and also optionally provide actions.
+ * The information could be very important (like a call to action) or reasonably import (like a status message).
+ *
+ * Example:
+ * ```tsx
+ * <Banner label="Label" message="Message" icon={placeholderIcon} onDismiss={() => {}} />
+ * ```
+ */
+declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "children"> & Pick<BannerRootProps, "tone" | "variant"> & {
+    /**
+     * A static icon decoration for the banner.
+     *
+     * Can be a URL of an SVG from the `@stratakit/icons` package, or a custom JSX icon.
+     *
+     * - If no `icon` is passed and the `tone` is `"neutral"`, no icon is shown.
+     * - If no `icon` is passed and the `tone` is not `"neutral"`, the status icon is shown.
      */
     icon?: string | React.JSX.Element;
     /**
-     * The label displayed inside the banner.
+     * The label of the banner.
      *
      * Either pass a string or a `<VisuallyHidden>` component if you don't want the label to be visible.
      */
     label: string | React.JSX.Element;
     /**
-     * The content of the banner.
+     * The message content of the banner.
      */
     message: React.ReactNode;
     /**
@@ -64,19 +209,9 @@ declare const Banner: React.ForwardRefExoticComponent<Omit<BaseProps, "children"
      *     <Anchor key={…} render={<button />} onClick={…}>Action 2</Anchor>,
      *   </>
      * }
+     * ```
      */
     actions?: React.ReactNode;
-    /**
-     * The tone of the banner.
-     *
-     * @default "neutral"
-     */
-    tone?: "neutral" | "info" | "positive" | "attention" | "critical";
-    /**
-     * The variant of the banner.
-     *
-     * @default "outline"
-     */
-    variant?: "outline";
 } & React.RefAttributes<HTMLDivElement | HTMLElement>>;
 export default Banner;
+export { BannerRoot as Root, BannerIcon as Icon, BannerLabel as Label, BannerMessage as Message, BannerActions as Actions, BannerDismissButton as DismissButton, };