@capra/core 1.8.2 → 1.9.0

package/docs/core-textinput--usage.md

@@ -14,6 +14,8 @@ TextInput component for single-line text entry. Backwards compatible with Ant De
 | `leadingSlot` | `React.ReactNode` | No | `--` | Content before the input (e.g. icon). |
 | `size` | `(typeof sizes)[number]` | No | `--` | Size of the input.<br>@default 'md' |
 | `trailingSlot` | `React.ReactNode` | No | `--` | Content after the input (e.g. icon or clear button). |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 
 Use `layout="vertical"` (default) for label above the field; use `layout="horizontal"` for label on the leading side when space is limited.

package/docs/core-tooltip--usage.md

@@ -45,4 +45,6 @@ function MyComponent() {
 | `placement` | `(typeof placements)[number]` | No | 'bottom' | The position of the tooltip relative to the trigger element.<br>@default 'bottom' |
 | `isDisabled` | `boolean` | No | false | Whether the tooltip is disabled.<br>@default false |
 | `getContainer` | `() => HTMLElement \| null` | No | `--` | The container to mount the tooltip in.<br>@default document.body<br><br>**Warning**: This is an unsafe feature and may cause accessibility, keyboard navigation, and other issues. Only use if you know what you are doing. |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |

package/docs/core-topnav--usage.md

@@ -2,5 +2,7 @@
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `children` | `React.ReactNode` | No | `--` | `--` |

package/docs/core-tree--design.md

@@ -0,0 +1,31 @@
+# Core/Tree - Design
+
+A hierarchical tree with cascading multi-select and Capra ListItem row layout.
+
+## Properties
+
+### Label
+
+All tree items are required to have a clear and concise label.
+
+### Parent
+
+Tree items containing decedents display a chevron to enable the user to show/hide the decedents.
+
+### Open
+
+When open, a parent Tree item's chevron displays pointing down.
+
+### Selectable
+
+A tree item can optionally be selectable. When enabled, a checkbox will appear to the left of the label.
+
+### Suffix
+
+A suffix provides space for information such as item counts.
+
+### Trailing Slot
+
+A trailing slot can optionally be used to add an icon to the tree item.
+
+In Figma the preferred icons for the trailing slot are Git statuses, but other icons can be used if needed.

package/docs/core-tree--usage.md

@@ -0,0 +1,102 @@
+# Core/Tree - Usage
+
+A hierarchical tree with cascading multi-select and Capra ListItem row layout.
+
+## Basic usage
+
+```tsx
+import { Tree, type TreeItemType } from '@capra/core';
+
+const items: TreeItemType[] = [
+  {
+    key: 'logs',
+    label: 'Logs',
+    children: [
+      { key: 'auth', label: 'Auth' },
+      { key: 'system', label: 'System' },
+    ],
+  },
+];
+
+function Example() {
+  return <Tree items={items} aria-label="Log sources" defaultExpandedKeys={['logs']} />;
+}
+```
+
+## Props
+
+| Prop | Type | Required | Default | Description |
+| --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
+| `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
+| `aria-label` | `string` | No | `--` | Defines a string value that labels the current element. |
+| `aria-labelledby` | `string` | No | `--` | Identifies the element (or elements) that labels the current element. |
+| `items` | `TreeItemType[]` | Yes | `--` | Items to render in the tree. |
+| `onAction` | `(key: Key) => void` | No | `--` | Handler that is called when a user performs an action on an item. |
+| `defaultExpandedKeys` | `Iterable<Key>` | No | `--` | The initial expanded keys when in uncontrolled mode. |
+| `defaultSelectedKeys` | `Iterable<Key>` | No | `--` | The initial selected keys when in uncontrolled mode. |
+| `expandedKeys` | `Iterable<Key>` | No | `--` | The currently expanded keys when in controlled mode. |
+| `onExpandedChange` | `(keys: Set<Key>) => void` | No | `--` | Handler that is called when the expanded keys change. |
+| `onSelectionChange` | `(keys: Set<Key>) => void` | No | `--` | Callback that is fired when the selection changes. |
+| `selectedKeys` | `Iterable<Key>` | No | `--` | The currently selected keys when in controlled mode. |
+| `selectionMode` | `'none' \| 'multiple'` | No | 'multiple' | The selection mode of the tree.<br>@default 'multiple' |
+
+## Selection patterns
+
+### Uncontrolled selection
+
+Use `defaultSelectedKeys` for simple uncontrolled multi-select. Selecting a parent cascades to all enabled
+descendants, and deselecting the parent removes the whole enabled branch.
+
+```tsx
+<Tree items={filesystemItems} aria-label="Remote filesystem" defaultSelectedKeys={['logs']} />
+```
+
+### Controlled selection
+
+Use `selectedKeys` with `onSelectionChange` when the selected branch needs to stay in application state. The callback
+receives the normalized key set after cascade rules are applied.
+
+```tsx
+const [selectedKeys, setSelectedKeys] = useState<Set<string>>(new Set(['logs']));
+
+<Tree
+  items={filesystemItems}
+  aria-label="Remote filesystem"
+  selectedKeys={selectedKeys}
+  onSelectionChange={setSelectedKeys}
+/>;
+```
+
+### Disabled items
+
+Set `isDisabled` on an item to disable just that row. Disabled items are skipped during cascade selection and cannot
+be toggled directly.
+
+```tsx
+const items = [
+  {
+    key: 'notebooks',
+    label: 'Notebooks',
+    isDisabled: true,
+  },
+];
+```
+
+## Content options
+
+### Suffix and trailing slot
+
+Use `suffix` for short secondary metadata and `trailingSlot` for decorative affordances.
+
+## Accessibility
+
+| Key                          | Function                                                                                                                                                                                                                                                              |
+| ---------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `Tab`<br />`Shift+Tab`       | Moves focus into the tree.<br />- Focus is given to the last Tree \| Item to have focus.<br />- If no selection and no previous item had focus, focus is given to first item.<br />- If select and no previous item had focus, focus is given to first selected item. |
+| `Right Arrow`                | - When on a closed parent item, open the node; focus does not move.<br />- When on an open item, or item with no children, does nothing.                                                                                                                              |
+| `Left Arrow`                 | - When on an open parent item, closes the item; focus does not move.<br />- When on a closed item, or item with no children, does nothing.                                                                                                                            |
+| `Up Arrow`<br />`Down Arrow` | Moves focus to the next/previous visible item, without opening or closing a node.                                                                                                                                                                                     |
+| `Enter`                      | Triggers the default action.<br />- If selection is available, selects the currently focused item.<br />- If no selection is available, open/close the currently focused item.                                                                                        |
+| `Space`                      | Selects the currently focused item.                                                                                                                                                                                                                                   |

package/docs/core-verticalnavigation--usage.md

@@ -6,6 +6,8 @@ Vertical navigation shell with controlled and uncontrolled collapse support. Pro
 
 | Prop | Type | Required | Default | Description |
 | --- | --- | --- | --- | --- |
+| `className` | `never` | No | `--` | Use `FORCE__className` instead. |
+| `style` | `never` | No | `--` | Inline styles are not supported; use component props or `FORCE__className`. |
 | `FORCE__className` | `string` | No | `--` | 🚨 This prop is meant to be an escape hatch. 🚨<br><br>If the desired style cannot be achieved using component props, use this as a last resort. The inner workings of Capra components are implementation details and this escape hatch gives one access to those implementation details. We cannot make any guarantees that styles will applied correctly across version updates. Please use it responsibly.<br><br>Add a CSS class to the component. |
 | `collapsed` | `boolean` | No | `--` | Controlled collapsed state. |
 | `onCollapseChange` | `(collapsed: boolean) => void` | No | `--` | Callback fired when the collapsed state changes. |

package/docs/history-changelogs-capra-core--docs.md

@@ -1,5 +1,28 @@
 # History/Changelogs/@capra-core
 
+### 1.9.0
+
+#### Minor Changes
+
+* [1cbe432](https://bitbucket.org/cribl/capra-ui/commits/1cbe432): Update intrarepo depedency ranges to use minor version pinning instead of exact versions
+
+  Excerpt from the dependency list in `package.json` for `@capra/domain`:
+
+  | Before                   | After                     |
+  | ------------------------ | ------------------------- |
+  | `"@capra/core": "1.6.0"` | `"@capra/core": "^1.6.0"` |
+
+* [674593e](https://bitbucket.org/cribl/capra-ui/commits/674593e): Add a `Tree` component
+
+* [8ebac6d](https://bitbucket.org/cribl/capra-ui/commits/8ebac6d): Make the `Label` component available.
+
+* [5224ebb](https://bitbucket.org/cribl/capra-ui/commits/5224ebb): Update component types for className and style to align with runtime behavior.
+
+#### Patch Changes
+
+* Updated dependencies [1cbe432](https://bitbucket.org/cribl/capra-ui/commits/1cbe432) — Update intrarepo depedency ranges to use minor version pinning instead of exact versions
+  * @capra/icons\@1.8.0
+
 ### 1.8.2
 
 #### Patch Changes

package/docs/index.md

@@ -103,6 +103,8 @@ Embedded documentation is available on the filesystem for each of these packages
 - [Core/Tooltip - Usage](./core-tooltip--usage.md)
 - [Core/TopNav - Design](./core-topnav--design.md)
 - [Core/TopNav - Usage](./core-topnav--usage.md)
+- [Core/Tree - Design](./core-tree--design.md)
+- [Core/Tree - Usage](./core-tree--usage.md)
 - [Core/VerticalNavigation - Design](./core-verticalnavigation--design.md)
 - [Core/VerticalNavigation - Usage](./core-verticalnavigation--usage.md)
 - [Core/VisuallyHidden - Design](./core-visuallyhidden--design.md)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@capra/core",
-  "version": "1.8.2",
+  "version": "1.9.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "description": "Core React components for the Capra design system",
@@ -35,7 +35,7 @@
   "dependencies": {
     "react-aria": "^3.48.0",
     "react-aria-components": "^1.17.0",
-    "@capra/icons": "1.7.1"
+    "@capra/icons": "^1.8.0"
   },
   "devDependencies": {
     "clsx": "^2.1.1",
@@ -43,11 +43,11 @@
     "antd": "4.24.16",
     "storybook": "^10.4.6",
     "tsdown": "^0.22.7",
-    "@private/building": "0.0.5",
-    "@capra/theme": "1.3.1",
-    "@private/stories": "0.0.0",
-    "@private/linting": "0.0.1",
-    "@private/testing": "0.0.7"
+    "@capra/theme": "^1.4.0",
+    "@private/building": "^0.1.0",
+    "@private/linting": "^0.0.1",
+    "@private/stories": "^0.0.0",
+    "@private/testing": "^0.0.7"
   },
   "scripts": {
     "clean": "rm -rf ./dist",