@graphty/compact-mantine 0.9.2 → 0.9.4
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/README.md +32 -25
- package/dist/index.cjs +274 -149
- package/dist/index.d.cts +164 -6
- package/dist/index.d.ts +164 -6
- package/dist/index.js +4488 -4142
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -227,7 +227,14 @@ A few defaults are worth knowing: `Badge` defaults to the outlined look
|
|
|
227
227
|
(`variant="filled"` and `"light"` are the brand looks); `Kbd` is Figma's dark key
|
|
228
228
|
cap in both schemes (`size="md"` for the large cap, `variant="inline"` for a
|
|
229
229
|
light cap in running text, `mod={{ active: true }}` to light it); `Select`
|
|
230
|
-
defaults to the outlined trigger; `Tabs` defaults to pills.
|
|
230
|
+
defaults to the outlined trigger; `Tabs` defaults to pills. A removable `Pill`'s
|
|
231
|
+
remove button is in the Tab order and named "Remove" (Mantine hides it from the
|
|
232
|
+
keyboard and from screen readers); name it after the value with
|
|
233
|
+
`removeButtonProps={{ "aria-label": `Remove ${tag}` }}`. The name is always the
|
|
234
|
+
English "Remove" -- the theme cannot reach `LabelsProvider` -- and the pills of
|
|
235
|
+
`MultiSelect` and `TagsInput` cannot be renamed, since Mantine gives them no
|
|
236
|
+
`removeButtonProps`: each pill's button there reads "Remove", after the value it
|
|
237
|
+
follows.
|
|
231
238
|
|
|
232
239
|
### Making it your own
|
|
233
240
|
|
|
@@ -297,15 +304,15 @@ your editor. The groups below match the Storybook sidebar, and each group has an
|
|
|
297
304
|
The containers a property panel is built from, and the row layout every other component agrees
|
|
298
305
|
with. [Overview](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-overview--docs)
|
|
299
306
|
|
|
300
|
-
| Component | Reach for it when
|
|
301
|
-
| ------------------------------------------------------------------------------------------------------------------------------- |
|
|
302
|
-
| [`ControlSection`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlsection--docs) | a run of controls needs a name, a rule and a chevron that folds it away. The workhorse container for a property panel. It can show a dot when something inside it is non-default, an empty state with a single "+", an explanation bubble,
|
|
303
|
-
| [`ControlGroup`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlgroup--docs) | the same, but it must never fold, or it sits in a padded container such as a pop-out.
|
|
304
|
-
| [`ControlSubGroup`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlsubgroup--docs) | a handful of rarely-opened settings belong under a section you already have. Quieter than a section.
|
|
305
|
-
| [`FieldRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-fieldrow--docs) | one or two fields share a line. It owns the widths and the gaps, so a column of rows lines up.
|
|
306
|
-
| [`CompoundRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-compoundrow--docs) | two or three values are one thing seen several ways -- a color and its opacity, a width and its unit -- and must read as one control.
|
|
307
|
-
| [`TrailingSlot`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-trailingslot--docs) | you are laying out a row by hand and need the fixed 24px slot every row ends with.
|
|
308
|
-
| [`ResizeHandle`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-resizehandle--docs) | a panel's edge can be dragged: pointer, arrow keys, or a double-click back to the default size.
|
|
307
|
+
| Component | Reach for it when |
|
|
308
|
+
| ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
309
|
+
| [`ControlSection`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlsection--docs) | a run of controls needs a name, a rule and a chevron that folds it away. The workhorse container for a property panel. It can show a dot when something inside it is non-default, an empty state with a single "+", an explanation bubble, buttons of its own in the header, and a one-line `summary` of what it holds while it is closed. |
|
|
310
|
+
| [`ControlGroup`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlgroup--docs) | the same, but it must never fold, or it sits in a padded container such as a pop-out. |
|
|
311
|
+
| [`ControlSubGroup`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-controlsubgroup--docs) | a handful of rarely-opened settings belong under a section you already have. Quieter than a section. |
|
|
312
|
+
| [`FieldRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-fieldrow--docs) | one or two fields share a line. It owns the widths and the gaps, so a column of rows lines up. |
|
|
313
|
+
| [`CompoundRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-compoundrow--docs) | two or three values are one thing seen several ways -- a color and its opacity, a width and its unit -- and must read as one control. |
|
|
314
|
+
| [`TrailingSlot`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-trailingslot--docs) | you are laying out a row by hand and need the fixed 24px slot every row ends with. |
|
|
315
|
+
| [`ResizeHandle`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-panels-and-rows-resizehandle--docs) | a panel's edge can be dragged: pointer, arrow keys, or a double-click back to the default size. |
|
|
309
316
|
|
|
310
317
|
### Inputs
|
|
311
318
|
|
|
@@ -418,12 +425,12 @@ props on `Popout.Panel`: `anchorX` decides which edge it lines up with (`"panel"
|
|
|
418
425
|
|
|
419
426
|
Objects the reader selects, renames or moves. [Overview](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-overview--docs)
|
|
420
427
|
|
|
421
|
-
| Component | Reach for it when
|
|
422
|
-
| ---------------------------------------------------------------------------------------------------------------------------- |
|
|
423
|
-
| [`Tree`, `TreeItem`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-tree--docs) | a list of objects, nested or flat: a real ARIA tree with arrow keys, multiple selection, F2 to rename, drag to reorder, and Alt+ArrowUp / Alt+ArrowDown to move an item when you pass `onMove`. With no `children` on any item it is a flat reorderable list. The tree never edits your data: `moveTreeItem(items, move)` and `renameTreeItem(items, id, name)` apply what `onMove` and `onRename` report and return a new list. |
|
|
424
|
-
| [`PageList`, `PageRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-pagelist--docs) | flat pages with dividers, above a layer tree.
|
|
425
|
-
| [`InlineRename`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-inlinerename--docs) | the in-place rename field a tree or page row turns into, for a row of your own.
|
|
426
|
-
| [`ResultRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-resultrow--docs) | one row of find results.
|
|
428
|
+
| Component | Reach for it when |
|
|
429
|
+
| ---------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
430
|
+
| [`Tree`, `TreeItem`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-tree--docs) | a list of objects, nested or flat: a real ARIA tree with arrow keys, multiple selection, F2 to rename, drag to reorder, and Alt+ArrowUp / Alt+ArrowDown to move an item when you pass `onMove`. With no `children` on any item it is a flat reorderable list. The tree never edits your data: `moveTreeItem(items, move)` and `renameTreeItem(items, id, name)` apply what `onMove` and `onRename` report and return a new list. A row can also carry a `swatch`, an always-visible `count`, a `progress` line and a spoken `description`, and `onRowKeyDown` gives rows keys of their own (Space, Delete). |
|
|
431
|
+
| [`PageList`, `PageRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-pagelist--docs) | flat pages with dividers, above a layer tree. A row can add a trailing `value`, a second-line `description` (in the danger ink for an error) and a `menu` of its own. |
|
|
432
|
+
| [`InlineRename`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-inlinerename--docs) | the in-place rename field a tree or page row turns into, for a row of your own. |
|
|
433
|
+
| [`ResultRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-lists-and-trees-resultrow--docs) | one row of find results. |
|
|
427
434
|
|
|
428
435
|
### Data display
|
|
429
436
|
|
|
@@ -439,7 +446,7 @@ Readings: things the reader looks at rather than changes. [Overview](https://gra
|
|
|
439
446
|
| [`SparklineRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-data-display-sparklinerow--docs) | a series is going somewhere and you want to see which way. 32px tall. |
|
|
440
447
|
| [`ProseBlock`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-data-display-proseblock--docs) | the panel has to say something in words: a reading, a caveat, a record of the last run. |
|
|
441
448
|
| [`ActionRow`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-data-display-actionrow--docs) | a row reports a state and offers verbs beside it. |
|
|
442
|
-
| [`DataTable`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-data-display-datatable--docs) | you have columns rather than rows: thousands of them, sortable, searchable, selectable, virtualized.
|
|
449
|
+
| [`DataTable`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-data-display-datatable--docs) | you have columns rather than rows: thousands of them, sortable, searchable, selectable, virtualized. A column can be pinned at the start, and its header can carry a glyph, a tooltip and a menu. |
|
|
443
450
|
|
|
444
451
|
### The editor shell
|
|
445
452
|
|
|
@@ -447,14 +454,14 @@ The chrome around an editor's canvas, as Figma draws it. Each one is a real tool
|
|
|
447
454
|
tab list: one Tab stop, arrow keys inside, names for screen readers.
|
|
448
455
|
[Overview](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-overview--docs)
|
|
449
456
|
|
|
450
|
-
| Component | What it is
|
|
451
|
-
| ------------------------------------------------------------------------------------------------------------------------------------ |
|
|
452
|
-
| [`Toolbar`, `ToolButton`, `ToolGroup`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-toolbar--docs) | The floating bottom toolbar (48 tall, 13px corners, `floating` pins it bottom center), its 32 x 32 tools (`label`, `icon`, `shortcut`, `selected`), and a tool with a flyout of related tools whose face shows the last one picked.
|
|
453
|
-
| [`SecondaryToolbar`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-secondarytoolbar--docs) | The contextual 40-tall bar above the toolbar while a mode is active.
|
|
454
|
-
| [`NavRail`, `RailButton`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-navrail--docs) | The 56-wide navigation rail at the window's edge, and its destinations: a 32 x 32 pill over a 9px caption.
|
|
455
|
-
| [`HelpButton`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-helpbutton--docs) | The round floating help button; its children are the items of the menu it opens.
|
|
456
|
-
| [`ShortcutSheet`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-shortcutsheet--docs) | The keyboard shortcuts sheet docked at the window's foot: tabs of shortcut columns with dark key caps.
|
|
457
|
-
| [`QuickActions`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-quickactions--docs) | The quick actions palette: a search field over sectioned rows. Typing filters, arrows move, Enter runs, Escape closes.
|
|
457
|
+
| Component | What it is |
|
|
458
|
+
| ------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
459
|
+
| [`Toolbar`, `ToolButton`, `ToolGroup`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-toolbar--docs) | The floating bottom toolbar (48 tall, 13px corners, `floating` pins it bottom center), its 32 x 32 tools (`label`, `icon`, `shortcut`, `selected`), and a tool with a flyout of related tools whose face shows the last one picked. |
|
|
460
|
+
| [`SecondaryToolbar`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-secondarytoolbar--docs) | The contextual 40-tall bar above the toolbar while a mode is active. |
|
|
461
|
+
| [`NavRail`, `RailButton`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-navrail--docs) | The 56-wide navigation rail at the window's edge, and its destinations: a 32 x 32 pill over a 9px caption. |
|
|
462
|
+
| [`HelpButton`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-helpbutton--docs) | The round floating help button; its children are the items of the menu it opens. |
|
|
463
|
+
| [`ShortcutSheet`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-shortcutsheet--docs) | The keyboard shortcuts sheet docked at the window's foot: tabs of shortcut columns with dark key caps. |
|
|
464
|
+
| [`QuickActions`](https://graphty.app/storybook/compact-mantine/?path=/docs/components-app-shell-quickactions--docs) | The quick actions palette: a search field over sectioned rows. Typing filters, arrows move, Enter runs, Escape closes. For a short pick-list: a second line per action (`description`) and `truncate="middle"`; the search field always shows and holds focus. |
|
|
458
465
|
|
|
459
466
|
```tsx
|
|
460
467
|
import { SegmentedControl } from "@mantine/core";
|