@maxio-com/react-ui-components 9.20.1 → 9.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.esm.js +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/skills/maxio-react/SKILL.md +2 -0
- package/dist/skills/maxio-react/references/components-copy-to-clipboard.md +184 -0
- package/dist/skills/maxio-react/references/components-data-table.md +1 -1
- package/dist/skills/maxio-react/references/components-drawer.md +1 -1
- package/dist/skills/maxio-react/references/components-empty-state.md +173 -0
- package/dist/skills/maxio-react/references/components-toggle.md +1 -1
- package/dist/skills/maxio-react/references/components-tooltip.md +1 -1
- package/package.json +2 -2
- package/typings/index.d.ts +41 -10
|
@@ -0,0 +1,184 @@
|
|
|
1
|
+
# CopyToClipboard
|
|
2
|
+
|
|
3
|
+
## Usage Guidelines
|
|
4
|
+
|
|
5
|
+
### Overview
|
|
6
|
+
|
|
7
|
+
CopyToClipboard writes a value to the clipboard and confirms it, so users can take an identifier, key, or URL out of the interface without selecting text by hand. It swaps to a check mark once copied, confirms in the tooltip, and announces the result to screen readers. Place the button directly beside the value it copies. It is ghost by default, but accepts primary, secondary, and tertiary variants when more emphasis is needed.
|
|
8
|
+
|
|
9
|
+
#### When to Use
|
|
10
|
+
|
|
11
|
+
- Use CopyToClipboard for values users need to move elsewhere but should not have to
|
|
12
|
+
select by hand: API keys, tokens, IDs, commit SHAs, clone URLs, invoice
|
|
13
|
+
numbers.
|
|
14
|
+
- Use the icon-only button inline, directly beside the value it copies. The
|
|
15
|
+
adjacent value says what will be copied and the control stays out of the way.
|
|
16
|
+
|
|
17
|
+
#### When Not to Use
|
|
18
|
+
|
|
19
|
+
- Do not use CopyToClipboard for actions that duplicate a record, such as
|
|
20
|
+
"Duplicate invoice". Use a [Button](components-buttons-button.md)
|
|
21
|
+
with explicit wording.
|
|
22
|
+
- Do not use CopyToClipboard to copy long prose or whole page regions; let users
|
|
23
|
+
select that text themselves.
|
|
24
|
+
- Do not use it as the only way to obtain a value. Keep the value visible or
|
|
25
|
+
otherwise reachable, since clipboard access can fail.
|
|
26
|
+
|
|
27
|
+
### Variants
|
|
28
|
+
|
|
29
|
+
| Variants | Purpose | Usage notes |
|
|
30
|
+
| :----------------- | :----------------------------- | :-------------------------------------------------------------------------- |
|
|
31
|
+
| Icon-only (inline) | Sits beside the value. | `copyLabel` supplies the accessible name; the tooltip is only a hover hint. |
|
|
32
|
+
| `sm` size | Table rows and dense metadata. | Pair with `Body size="sm"` so the icon matches the line height. |
|
|
33
|
+
| `lg` size | Larger copy actions. | Largest target area; use where the button is not crowded by other controls. |
|
|
34
|
+
|
|
35
|
+
The button is ghost by default so it does not compete with the value beside it.
|
|
36
|
+
Use `variant` to increase its emphasis when needed:
|
|
37
|
+
|
|
38
|
+
| `variant` | When to use |
|
|
39
|
+
| :---------- | :------------------------------------------------------------- |
|
|
40
|
+
| `ghost` | Default. Suits inline use beside the value being copied. |
|
|
41
|
+
| `tertiary` | Use when the copy control needs slightly more emphasis. |
|
|
42
|
+
| `secondary` | Copying is one of the main actions on the surface. |
|
|
43
|
+
| `primary` | Rare. Only when copying is _the_ action users came to perform. |
|
|
44
|
+
|
|
45
|
+
### Behavior
|
|
46
|
+
|
|
47
|
+
- **Mouse and touch**: pressing the button writes `value` to the clipboard and
|
|
48
|
+
the icon swaps to a check mark and the tooltip shows `copiedLabel`.
|
|
49
|
+
- **Keyboard**: the button is reachable with Tab and activates with Enter or
|
|
50
|
+
Space. Focus also opens the icon-only button's tooltip.
|
|
51
|
+
- **Callbacks**: a native `onClick` observes activation without replacing the
|
|
52
|
+
copy behavior. Use `onCopy` and `onCopyError` for the asynchronous result.
|
|
53
|
+
- **Copied state**: reverts automatically after `resetAfterMs` (2000 ms by
|
|
54
|
+
default). Pressing again restarts the timer. Changing `value` clears feedback
|
|
55
|
+
immediately so a new value is never presented as already copied.
|
|
56
|
+
- **Failure**: if the clipboard write is rejected — an insecure context, or
|
|
57
|
+
denied permission — the icon and tooltip show the failure,
|
|
58
|
+
`copyErrorLabel` is announced, and `onCopyError` fires. It never claims a copy
|
|
59
|
+
that did not happen.
|
|
60
|
+
- **Async values**: keep the button `disabled` until `value` is populated so
|
|
61
|
+
users cannot copy a placeholder.
|
|
62
|
+
- **Sizing**: `size` uses the shared IconButton sizing. Target areas are 28px,
|
|
63
|
+
32px, and 40px; the glyph remains 16px, consistent with
|
|
64
|
+
other icon buttons in the system.
|
|
65
|
+
|
|
66
|
+
### Accessibility
|
|
67
|
+
|
|
68
|
+
- The button takes its accessible name from `copyLabel`. A tooltip is
|
|
69
|
+
not an accessible name, so the label is always applied to the button itself.
|
|
70
|
+
- Success and failure are announced through a `role="status"`
|
|
71
|
+
`aria-live="polite"` region rather than the tooltip, because a tooltip is not
|
|
72
|
+
announced on press and may not be open when the user activates the button by
|
|
73
|
+
keyboard.
|
|
74
|
+
- The live region is rendered up front and filled after the copy, so the change
|
|
75
|
+
is announced. A region inserted together with its text is unreliable.
|
|
76
|
+
- Each attempt refreshes the live region, so repeated successful copies are
|
|
77
|
+
announced as separate actions.
|
|
78
|
+
- Icon changes are paired with announcement text and tooltip feedback, so
|
|
79
|
+
success and failure are never conveyed by the glyph alone.
|
|
80
|
+
|
|
81
|
+
### Content
|
|
82
|
+
|
|
83
|
+
- Keep `copyLabel` specific about what is copied — "Copy API key" beats "Copy"
|
|
84
|
+
when several copyable values sit near each other.
|
|
85
|
+
- Keep `copiedLabel` short; it is announced verbatim.
|
|
86
|
+
- Keep `copyErrorLabel` actionable and concise; "Copy failed" is the default.
|
|
87
|
+
- When showing a truncated value, keep `value` set to the full string so users
|
|
88
|
+
get the complete text.
|
|
89
|
+
|
|
90
|
+
### Related
|
|
91
|
+
|
|
92
|
+
- **[Button](components-buttons-button.md)**: use for actions
|
|
93
|
+
that are not clipboard copies.
|
|
94
|
+
- **[IconButton](components-buttons-iconbutton.md)**: use for
|
|
95
|
+
other icon-only actions; CopyToClipboard is a purpose-built wrapper around it.
|
|
96
|
+
- **[TooltipTrigger](components-tooltip.md)**: supplies the hover
|
|
97
|
+
and focus hint used here.
|
|
98
|
+
|
|
99
|
+
## React
|
|
100
|
+
|
|
101
|
+
```tsx
|
|
102
|
+
import { CopyToClipboard } from '@maxio-com/react-ui-components';
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
### Handling Failures
|
|
106
|
+
|
|
107
|
+
Clipboard writes reject in insecure contexts and when the user denies
|
|
108
|
+
permission. CopyToClipboard shows and announces `copyErrorLabel` in that case
|
|
109
|
+
and calls `onCopyError`, so consumers can also surface application-level
|
|
110
|
+
feedback when needed.
|
|
111
|
+
|
|
112
|
+
```tsx
|
|
113
|
+
<CopyToClipboard
|
|
114
|
+
value={apiKey}
|
|
115
|
+
copyLabel="Copy API key"
|
|
116
|
+
copyErrorLabel="API key could not be copied"
|
|
117
|
+
onCopyError={() => addToast({ sentiment: 'error', title: 'Could not copy' })}
|
|
118
|
+
/>
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Asynchronous Values
|
|
122
|
+
|
|
123
|
+
Keep the button disabled until the value exists, so users cannot copy a
|
|
124
|
+
placeholder.
|
|
125
|
+
|
|
126
|
+
```tsx
|
|
127
|
+
<CopyToClipboard value={token ?? ''} disabled={!token} copyLabel="Copy token" />
|
|
128
|
+
```
|
|
129
|
+
|
|
130
|
+
## Imports
|
|
131
|
+
|
|
132
|
+
```tsx
|
|
133
|
+
import { Body, CopyToClipboard, Flex } from "@maxio-com/react-ui-components";
|
|
134
|
+
```
|
|
135
|
+
|
|
136
|
+
## Prop Types
|
|
137
|
+
|
|
138
|
+
### CopyToClipboard
|
|
139
|
+
|
|
140
|
+
| Prop | Type | Required | Default | Description | Source |
|
|
141
|
+
| --- | --- | --- | --- | --- | --- |
|
|
142
|
+
| `copiedLabel` | `string` | no | `Copied!` | Success feedback after a copy, shown in the tooltip and announced to screen readers. | TypeLiteral |
|
|
143
|
+
| `copyErrorLabel` | `string` | no | `Copy failed` | Failure feedback after a copy, shown and announced like `copiedLabel`. | TypeLiteral |
|
|
144
|
+
| `copyLabel` | `string` | no | `Copy` | Accessible name for the button, and the idle tooltip text. | TypeLiteral |
|
|
145
|
+
| `disabled` | `boolean` | no | - | Prevents interaction, such as while the value is still loading. | TypeLiteral, ButtonHTMLAttributes |
|
|
146
|
+
| `onCopy` | `((value: string) => void)` | no | - | Called with the copied value once the clipboard write succeeds. | TypeLiteral |
|
|
147
|
+
| `onCopyError` | `((error: unknown) => void)` | no | - | Called when the clipboard write fails, such as in an insecure context or when permission is denied. The copied state is not entered. | TypeLiteral |
|
|
148
|
+
| `resetAfterMs` | `number` | no | `2000` | How long the copied state lasts before reverting, in milliseconds. | TypeLiteral |
|
|
149
|
+
| `size` | `"sm" \| "md" \| "lg"` | no | `md` | Changes the size of the button. | TypeLiteral |
|
|
150
|
+
| `tooltipPlacement` | `"top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"` | no | `top` | Where the tooltip is positioned relative to the button. | TypeLiteral |
|
|
151
|
+
| `value` | `string` | yes | - | Text written to the clipboard when the button is pressed. | TypeLiteral |
|
|
152
|
+
| `variant` | `"primary" \| "secondary" \| "tertiary" \| "ghost"` | no | `ghost` | Button variant. | TypeLiteral |
|
|
153
|
+
|
|
154
|
+
## Stories
|
|
155
|
+
|
|
156
|
+
### Default
|
|
157
|
+
|
|
158
|
+
An icon-only button sitting directly beside the value it copies. `copyLabel` carries the accessible name.
|
|
159
|
+
|
|
160
|
+
```tsx
|
|
161
|
+
const Default = () => <Flex alignItems="center" gap={1}>
|
|
162
|
+
<Body size="sm" as="span">
|
|
163
|
+
{args.value}
|
|
164
|
+
</Body>
|
|
165
|
+
<CopyToClipboard
|
|
166
|
+
value={API_KEY}
|
|
167
|
+
onCopy={action('Copied')}
|
|
168
|
+
onCopyError={action('Copy failed')}
|
|
169
|
+
size="sm"
|
|
170
|
+
copyLabel="Copy API key" />
|
|
171
|
+
</Flex>;
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### Disabled
|
|
175
|
+
|
|
176
|
+
Disable the button while there is nothing to copy yet, such as before a generated secret has loaded.
|
|
177
|
+
|
|
178
|
+
```tsx
|
|
179
|
+
const Disabled = () => <CopyToClipboard
|
|
180
|
+
value={API_KEY}
|
|
181
|
+
onCopy={action('Copied')}
|
|
182
|
+
onCopyError={action('Copy failed')}
|
|
183
|
+
disabled />;
|
|
184
|
+
```
|
|
@@ -243,7 +243,7 @@ import {
|
|
|
243
243
|
| `actions` | `((row: Row<TData>, table: Table<TData>) => ReactNode)` | no | - | render custom actions cell content | TypeLiteral |
|
|
244
244
|
| `actionsColumnSize` | `number` | no | - | width (in px) of the actions column; defaults to 40 | TypeLiteral |
|
|
245
245
|
| `aggregationFns` | `Record<string, AggregationFn<any>>` | no | - | - | TypeLiteral |
|
|
246
|
-
| `align` | `"
|
|
246
|
+
| `align` | `"right" \| "left"` | no | - | - | TypeLiteral |
|
|
247
247
|
| `enableExpanding` | `boolean \| "rowsOnly"` | no | - | Enable nested row expansion. Include `'rowsOnly'` for row-level toggles without group expand/collapse header control. | TypeLiteral |
|
|
248
248
|
| `enableRowReordering` | `boolean` | no | `false` | Enable controlled row reordering for small, non-paginated tables. Intended for approximately 100 total rows or fewer, including nested and collapsed rows. Nested row data must use the `subRows` property; custom `getSubRows` accessors are unsupported. | TypeLiteral |
|
|
249
249
|
| `enableSorting` | `boolean` | no | `false` | - | TypeLiteral |
|
|
@@ -69,7 +69,7 @@ import { Body, Button, DialogTrigger, Drawer } from "@maxio-com/react-ui-compone
|
|
|
69
69
|
| `footer` | `ReactNode` | no | - | - | DrawerProps |
|
|
70
70
|
| `onOpenChange` | `((open: boolean) => void)` | no | - | - | DrawerProps |
|
|
71
71
|
| `open` | `boolean` | no | - | - | DrawerProps |
|
|
72
|
-
| `placement` | `"
|
|
72
|
+
| `placement` | `"top" \| "right" \| "bottom" \| "left"` | no | `right` | - | DrawerProps |
|
|
73
73
|
| `size` | `"sm" \| "md" \| "lg" \| "xl" \| "full"` | no | `md` | - | DrawerProps |
|
|
74
74
|
| `title` | `string` | yes | - | - | DrawerProps |
|
|
75
75
|
|
|
@@ -0,0 +1,173 @@
|
|
|
1
|
+
# EmptyState
|
|
2
|
+
|
|
3
|
+
## Usage Guidelines
|
|
4
|
+
|
|
5
|
+
### Overview
|
|
6
|
+
|
|
7
|
+
EmptyState fills a table, list, search result, or other page section when there is no data to show, whether the surface has never had data or an active search or filter returned zero results.
|
|
8
|
+
|
|
9
|
+
#### When to Use
|
|
10
|
+
|
|
11
|
+
- Use EmptyState inside a DataTable, legacy table, list, or search results
|
|
12
|
+
view when there is nothing to show.
|
|
13
|
+
- Use the full layout with `title` when a surface has never had data and one
|
|
14
|
+
clear action would create the first record.
|
|
15
|
+
- Omit `title` when a surface has no data yet but no action belongs inline,
|
|
16
|
+
such as read-only or permission-restricted views; the same centered layout
|
|
17
|
+
renders without the heading.
|
|
18
|
+
- Omit both `title` and `description` to fall back to the built-in message.
|
|
19
|
+
Providing either one replaces it, so a `description` on its own renders as
|
|
20
|
+
the only copy.
|
|
21
|
+
- Set `hasActiveFilters` when the empty result comes from an active search or
|
|
22
|
+
filter rather than the true absence of data.
|
|
23
|
+
|
|
24
|
+
#### When Not to Use
|
|
25
|
+
|
|
26
|
+
- Do not use EmptyState for page-level errors or failed requests. Use an
|
|
27
|
+
[Alert](components-notifications-alert.md) or dedicated
|
|
28
|
+
error state instead.
|
|
29
|
+
- Do not use EmptyState for loading states. Pair a
|
|
30
|
+
[LoadingSpinner](components-loading-spinner.md) with the
|
|
31
|
+
surface shell instead.
|
|
32
|
+
|
|
33
|
+
### Variants
|
|
34
|
+
|
|
35
|
+
| Variants | Purpose | Usage notes |
|
|
36
|
+
| :----------------- | :------------------------------------------------------------ | :----------------------------------------------------------------------------- |
|
|
37
|
+
| With `title` | Heading, description, and actions in one centered layout | Use when the empty state should guide users toward creating the first record. |
|
|
38
|
+
| Without `title` | The same layout with the heading skipped | Use inside dense tables or lists where a full call to action would not fit. |
|
|
39
|
+
| Built-in message | Fallback copy when neither `title` nor `description` is given | Use when no bespoke copy is needed, such as read-only tables. |
|
|
40
|
+
| `hasActiveFilters` | Swaps in filter-specific fallback messaging | Use whenever the empty result is caused by the current search or filter state. |
|
|
41
|
+
|
|
42
|
+
### Behavior
|
|
43
|
+
|
|
44
|
+
- **Mouse and touch**: `actions` behaves according to what is composed into
|
|
45
|
+
it — a `Button` activates its click handler or navigates when given an
|
|
46
|
+
`href`, a `Link` navigates and opens in a new tab when marked `external`.
|
|
47
|
+
- **Keyboard**: composed actions are reachable with Tab and keep their native
|
|
48
|
+
activation keys.
|
|
49
|
+
- **Focus management**: EmptyState does not move or trap focus.
|
|
50
|
+
|
|
51
|
+
### Accessibility
|
|
52
|
+
|
|
53
|
+
- The decorative grid background is a `:before` pseudo-element on the root
|
|
54
|
+
container; it is generated content and is never exposed to assistive
|
|
55
|
+
technology, so no additional markup or `aria-hidden` is needed.
|
|
56
|
+
- `title` renders as an `h2` by default, since EmptyState sits inside a page
|
|
57
|
+
section rather than acting as the page title. Set `headingLevel` to match the
|
|
58
|
+
surrounding outline so the page never ends up with two `h1`s or a skipped
|
|
59
|
+
level.
|
|
60
|
+
- Keep `title` and `description` as the source of truth for why the surface
|
|
61
|
+
is empty; do not rely on the background alone.
|
|
62
|
+
- Give the primary action a specific, verb-first label such as "Add Customer"
|
|
63
|
+
instead of "Create".
|
|
64
|
+
- Mark an external link action `external` with a trailing `arrow-up-right`
|
|
65
|
+
icon so the new-tab behavior is visible, not just conveyed through
|
|
66
|
+
`target="_blank"`.
|
|
67
|
+
|
|
68
|
+
### Content
|
|
69
|
+
|
|
70
|
+
- Keep `title` short and specific to the empty resource, such as "Create your
|
|
71
|
+
first customer".
|
|
72
|
+
- Use `description` to explain what the resource is for and what appears once
|
|
73
|
+
data exists.
|
|
74
|
+
- Compose `actions` from `Button` and `Link` directly; keep at most one
|
|
75
|
+
primary (`variant="primary"`) action plus an optional secondary link.
|
|
76
|
+
- Keep action labels action-oriented and specific to what gets created.
|
|
77
|
+
|
|
78
|
+
### Related
|
|
79
|
+
|
|
80
|
+
- **[DataTable](components-data-table.md)**: render
|
|
81
|
+
EmptyState in place of table rows when there is no data.
|
|
82
|
+
- **[Card](components-card.md)**: wrap EmptyState in a Card
|
|
83
|
+
when it lives inside a smaller container.
|
|
84
|
+
|
|
85
|
+
## React
|
|
86
|
+
|
|
87
|
+
```tsx
|
|
88
|
+
import { EmptyState } from '@maxio-com/react-ui-components';
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
## Imports
|
|
92
|
+
|
|
93
|
+
```tsx
|
|
94
|
+
import { Button, EmptyState, Link } from "@maxio-com/react-ui-components";
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
## Prop Types
|
|
98
|
+
|
|
99
|
+
### EmptyState
|
|
100
|
+
|
|
101
|
+
| Prop | Type | Required | Default | Description | Source |
|
|
102
|
+
| --- | --- | --- | --- | --- | --- |
|
|
103
|
+
| `actions` | `ReactNode` | no | - | Action elements rendered below the description, such as `Button` and `Link`. | TypeLiteral |
|
|
104
|
+
| `description` | `string` | no | - | Supporting copy shown under the title, with or without a `title`. When neither `title` nor `description` is given, a built-in message is shown instead. | TypeLiteral |
|
|
105
|
+
| `hasActiveFilters` | `boolean` | no | `false` | Set when a search or filter is active but returned zero results. Swaps in filter-specific messaging when `title` is not provided. | TypeLiteral |
|
|
106
|
+
| `headingLevel` | `"h1" \| "h2" \| "h3" \| "h4" \| "h5" \| "h6"` | no | `h2` | Heading element used for `title`, so it fits the surrounding page outline. EmptyState renders inside a page section, so it defaults to `h2` rather than `h1`. | TypeLiteral |
|
|
107
|
+
| `title` | `string` | no | - | Heading text. When omitted, the heading is skipped and the rest of the layout is unchanged. | TypeLiteral |
|
|
108
|
+
|
|
109
|
+
## Stories
|
|
110
|
+
|
|
111
|
+
### Default
|
|
112
|
+
|
|
113
|
+
Use the full layout with a title when a surface has never had data. Pair a clear heading with one primary action that creates the first record.
|
|
114
|
+
|
|
115
|
+
```tsx
|
|
116
|
+
const Default = () => <EmptyState
|
|
117
|
+
title="Create your first customer"
|
|
118
|
+
description="Customers hold billing details and connect to subscriptions. Once created, every customer will show their plans, invoices, and payment history here."
|
|
119
|
+
actions={(<Button variant="primary" onClick={action('Add customer clicked')}>Add Customer
|
|
120
|
+
</Button>)} />;
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### With Primary Action
|
|
124
|
+
|
|
125
|
+
Use a link-styled primary action when creating the first record navigates to another page instead of opening a modal or form inline.
|
|
126
|
+
|
|
127
|
+
```tsx
|
|
128
|
+
const WithPrimaryAction = () => <EmptyState
|
|
129
|
+
title="Create your first subscription"
|
|
130
|
+
description="Subscriptions connect a customer to a plan and start their billing cycle. Once created, every subscription will show its status, billing details, and renewal date here."
|
|
131
|
+
actions={(<Button variant="primary" href="#">Create Subscription
|
|
132
|
+
</Button>)} />;
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
### With Secondary Action
|
|
136
|
+
|
|
137
|
+
Use a secondary link next to the primary action when a related resource, such as documentation, helps users decide what to do next.
|
|
138
|
+
|
|
139
|
+
```tsx
|
|
140
|
+
const WithSecondaryAction = () => <EmptyState
|
|
141
|
+
title="Connect your first integration"
|
|
142
|
+
description="Integrations sync customer and billing data with the tools your team already uses."
|
|
143
|
+
actions={(<>
|
|
144
|
+
<Button variant="primary" onClick={action('Add integration clicked')}>
|
|
145
|
+
Add Integration
|
|
146
|
+
</Button>
|
|
147
|
+
<Link
|
|
148
|
+
href="#"
|
|
149
|
+
external
|
|
150
|
+
icon="arrow-up-right"
|
|
151
|
+
variant="primary"
|
|
152
|
+
size="sm"
|
|
153
|
+
>
|
|
154
|
+
View documentation
|
|
155
|
+
</Link>
|
|
156
|
+
</>)} />;
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
### No Data
|
|
160
|
+
|
|
161
|
+
Use the default no-title message when a surface has no data yet and no primary action belongs inline, such as read-only or permission-restricted views.
|
|
162
|
+
|
|
163
|
+
```tsx
|
|
164
|
+
const NoData = () => <EmptyState />;
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
### No Results
|
|
168
|
+
|
|
169
|
+
Use the filtered message when an active search or filter returns zero results. Set `hasActiveFilters` so users understand adjusting their search or filters may surface results.
|
|
170
|
+
|
|
171
|
+
```tsx
|
|
172
|
+
const NoResults = () => <EmptyState hasActiveFilters />;
|
|
173
|
+
```
|
|
@@ -99,7 +99,7 @@ import { ToggleComponent } from "@maxio-com/react-ui-components";
|
|
|
99
99
|
| `name` | `string` | no | - | Toggle name | TypeLiteral |
|
|
100
100
|
| `onChange` | `((value: boolean, event?: KeyboardEvent<HTMLInputElement> \| ChangeEvent<HTMLInputElement>) => void)` | no | - | The onChange function | TypeLiteral |
|
|
101
101
|
| `valueDescription` | `string` | no | - | Toggle label | TypeLiteral |
|
|
102
|
-
| `valueDescriptionPosition` | `"
|
|
102
|
+
| `valueDescriptionPosition` | `"right" \| "left"` | no | - | Toggle label position | TypeLiteral |
|
|
103
103
|
|
|
104
104
|
## Stories
|
|
105
105
|
|
|
@@ -73,7 +73,7 @@ import { TooltipTrigger } from "@maxio-com/react-ui-components";
|
|
|
73
73
|
| `isVisible` | `boolean` | no | - | Tooltip visibility state - use with useExternalState property | TypeLiteral |
|
|
74
74
|
| `maxWidth` | `number \| "none"` | no | `160` | Maximum tooltip container width in pixels | TypeLiteral |
|
|
75
75
|
| `onVisibilityUpdate` | `((isVisible: boolean) => void)` | no | - | Tooltip visibility state | TypeLiteral |
|
|
76
|
-
| `placement` | `"
|
|
76
|
+
| `placement` | `"top" \| "right" \| "bottom" \| "left" \| "top-start" \| "top-end" \| "right-start" \| "right-end" \| "bottom-start" \| "bottom-end" \| "left-start" \| "left-end"` | no | `right` | Overlay element placement | TypeLiteral |
|
|
77
77
|
| `renderContent` | `() => ReactNode` | yes | - | Tooltip content renderer | TypeLiteral |
|
|
78
78
|
| `size` | `"small" \| "regular"` | no | `regular` | Tooltip component size variant | TypeLiteral |
|
|
79
79
|
| `usePortal` | `boolean` | no | - | Render floating element in portal container | TypeLiteral |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@maxio-com/react-ui-components",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.22.0",
|
|
4
4
|
"description": "React UI components",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"license": "MIT",
|
|
@@ -65,5 +65,5 @@
|
|
|
65
65
|
"publishConfig": {
|
|
66
66
|
"access": "public"
|
|
67
67
|
},
|
|
68
|
-
"gitHead": "
|
|
68
|
+
"gitHead": "14695cb6dcb2e06f7fa85daacbffa1e502b6d7ba"
|
|
69
69
|
}
|
package/typings/index.d.ts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React$1, { ReactNode, HTMLAttributes, LiHTMLAttributes, AnchorHTMLAttributes, RefObject, FC, ElementType, InputHTMLAttributes } from 'react';
|
|
1
|
+
import React$1, { ReactNode, HTMLAttributes, LiHTMLAttributes, ButtonHTMLAttributes, AnchorHTMLAttributes, RefObject, FC, ElementType, InputHTMLAttributes } from 'react';
|
|
2
2
|
import { RowData, Row, Table, ExpandedState, RowSelectionState, SortingState, TableOptions } from '@tanstack/react-table';
|
|
3
3
|
export { createColumnHelper } from '@tanstack/react-table';
|
|
4
4
|
import { PopoverProps as PopoverProps$1, ToggleButtonProps, ToggleButtonGroupProps, ListBoxProps as ListBoxProps$1, ListBoxItemProps as ListBoxItemProps$1, ListBoxSectionProps as ListBoxSectionProps$1, HeaderProps, ComboBoxProps as ComboBoxProps$1, ValidationResult, TextFieldProps as TextFieldProps$1 } from 'react-aria-components';
|
|
@@ -161,6 +161,32 @@ type IconButtonProps = (Omit<InternalButtonProps, 'fullWidth' | 'children'> | Om
|
|
|
161
161
|
declare const IconButton: ({ "aria-label": ariaLabel, className, ...props }: IconButtonProps) => React$1.JSX.Element;
|
|
162
162
|
//# sourceMappingURL=IconButton.d.ts.map
|
|
163
163
|
|
|
164
|
+
type Alignment = 'start' | 'end';
|
|
165
|
+
type Side = 'top' | 'right' | 'bottom' | 'left';
|
|
166
|
+
type AlignedPlacement = `${Side}-${Alignment}`;
|
|
167
|
+
type Placement = Side | AlignedPlacement;
|
|
168
|
+
type Interactions = 'click' | 'hover' | 'focus' | 'dismiss';
|
|
169
|
+
type OverlayAriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
|
|
170
|
+
|
|
171
|
+
type CopyToClipboardSize = 'sm' | 'md' | 'lg';
|
|
172
|
+
type CopyToClipboardVariant = 'primary' | 'secondary' | 'tertiary' | 'ghost';
|
|
173
|
+
type CopyToClipboardProps = {
|
|
174
|
+
value: string;
|
|
175
|
+
copyLabel?: string;
|
|
176
|
+
copiedLabel?: string;
|
|
177
|
+
copyErrorLabel?: string;
|
|
178
|
+
size?: CopyToClipboardSize;
|
|
179
|
+
variant?: CopyToClipboardVariant;
|
|
180
|
+
disabled?: boolean;
|
|
181
|
+
resetAfterMs?: number;
|
|
182
|
+
tooltipPlacement?: Placement;
|
|
183
|
+
onCopy?: (value: string) => void;
|
|
184
|
+
onCopyError?: (error: unknown) => void;
|
|
185
|
+
} & Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onCopy' | 'children' | 'value' | 'type'>;
|
|
186
|
+
|
|
187
|
+
declare const CopyToClipboard: ({ value, copyLabel, copiedLabel, copyErrorLabel, size, variant, disabled, resetAfterMs, tooltipPlacement, onCopy, onCopyError, onClick, className, ...rest }: CopyToClipboardProps) => React$1.JSX.Element;
|
|
188
|
+
//# sourceMappingURL=CopyToClipboard.d.ts.map
|
|
189
|
+
|
|
164
190
|
type TableSize = 'sm' | 'md' | 'lg';
|
|
165
191
|
type ColumnAlign = 'left' | 'right';
|
|
166
192
|
type RowReorderMode = 'siblings' | 'same-level' | 'all';
|
|
@@ -243,6 +269,18 @@ interface DrawerProps {
|
|
|
243
269
|
declare const Drawer: ({ open, onOpenChange, placement, backdrop, size, className, title, description, children, footer, }: DrawerProps) => React$1.JSX.Element;
|
|
244
270
|
//# sourceMappingURL=Drawer.d.ts.map
|
|
245
271
|
|
|
272
|
+
type EmptyStateHeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
273
|
+
type EmptyStateProps = {
|
|
274
|
+
hasActiveFilters?: boolean;
|
|
275
|
+
title?: string;
|
|
276
|
+
headingLevel?: EmptyStateHeadingLevel;
|
|
277
|
+
description?: string;
|
|
278
|
+
actions?: ReactNode;
|
|
279
|
+
} & Omit<HTMLAttributes<HTMLDivElement>, 'title'>;
|
|
280
|
+
|
|
281
|
+
declare const EmptyState: ({ hasActiveFilters, title, headingLevel, description, actions, className, ...rest }: EmptyStateProps) => React$1.JSX.Element;
|
|
282
|
+
//# sourceMappingURL=EmptyState.d.ts.map
|
|
283
|
+
|
|
246
284
|
type Variant = 'primary' | 'secondary' | 'tertiary' | 'high-contrast' | 'inverse';
|
|
247
285
|
type Size = 'xs' | 'sm' | 'md' | 'lg';
|
|
248
286
|
interface LinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
|
|
@@ -269,13 +307,6 @@ type LoadingSpinnerProps = {
|
|
|
269
307
|
declare const LoadingSpinner: ({ size, white, className, }: LoadingSpinnerProps) => React$1.JSX.Element;
|
|
270
308
|
//# sourceMappingURL=LoadingSpinner.d.ts.map
|
|
271
309
|
|
|
272
|
-
type Alignment = 'start' | 'end';
|
|
273
|
-
type Side = 'top' | 'right' | 'bottom' | 'left';
|
|
274
|
-
type AlignedPlacement = `${Side}-${Alignment}`;
|
|
275
|
-
type Placement = Side | AlignedPlacement;
|
|
276
|
-
type Interactions = 'click' | 'hover' | 'focus' | 'dismiss';
|
|
277
|
-
type OverlayAriaRole = 'tooltip' | 'dialog' | 'alertdialog' | 'menu' | 'listbox' | 'grid' | 'tree';
|
|
278
|
-
|
|
279
310
|
type OverlayTriggerSettings = {
|
|
280
311
|
placement?: Placement;
|
|
281
312
|
isInitiallyActive?: boolean;
|
|
@@ -920,5 +951,5 @@ type AuthLayoutProps = {
|
|
|
920
951
|
declare const AuthLayout: ({ children, heading, description, sentiment, leadingElement, alert, topAddon, footer, }: AuthLayoutProps) => React$1.JSX.Element;
|
|
921
952
|
//# sourceMappingURL=AuthLayout.d.ts.map
|
|
922
953
|
|
|
923
|
-
export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, DataTable, Display, Drawer, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
|
|
924
|
-
export type { ComboBoxProps, DrawerProps, Interactions, OverlayAriaRole, Placement, PopoverProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };
|
|
954
|
+
export { ActionList, Alert, AuthLayout, Avatar, Banner, Body, Breadcrumbs, BreadcrumbsItem, Button, Card, Checkbox, CheckboxGroup, Chip, Code, ComboBox, CopyToClipboard, DataTable, Display, Drawer, EmptyState, Flex, FormErrorMessage, FormHelperText, GlobalToastProvider, Grid, Heading, Icon, IconButton, Label, Link, ListBox, LoadingSpinner, Logo, Menu, MenuButton, MenuList, OverlayTrigger, Pagination, Popover, ProgressBar, Radio, RadioGroup, SegmentedControl, Select, SideNavWrapper as SideNav, Tab, TabList, TabPanel, TabPanels, Tabs, Tag, TextArea, TextField, TextInput, Tile, ToastProvider, ToastQueue, Toggle, Tooltip, TooltipTrigger, TopBar, useElementResizeObserver, useHover, useOverlayTrigger, useToast, useWindowSize };
|
|
955
|
+
export type { ComboBoxProps, CopyToClipboardProps, CopyToClipboardSize, CopyToClipboardVariant, DrawerProps, EmptyStateHeadingLevel, EmptyStateProps, Interactions, OverlayAriaRole, Placement, PopoverProps, SegmentedControlItemProps, SegmentedControlProps, SegmentedControlSize, TextAreaProps, TextFieldProps, TextInputProps };
|