@scattered-light/loomiere-mojave 0.5.3 → 0.7.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/exports/AGENTS.md +24 -8
- package/dist/exports/catalog.json +21 -0
- package/dist/exports/chakra.js +333 -0
- package/dist/exports/design-system/README.md +23 -7
- package/dist/exports/design-system/components/Accordion/README.md +20 -20
- package/dist/exports/design-system/components/Accordion/preview.html +1 -1
- package/dist/exports/design-system/components/AlertDialog/README.md +8 -8
- package/dist/exports/design-system/components/AlertDialog/preview.html +1 -1
- package/dist/exports/design-system/components/Autocomplete/README.md +9 -9
- package/dist/exports/design-system/components/Autocomplete/preview.html +1 -1
- package/dist/exports/design-system/components/Avatar/README.md +3 -4
- package/dist/exports/design-system/components/Avatar/preview.html +1 -1
- package/dist/exports/design-system/components/Badge/README.md +35 -0
- package/dist/exports/design-system/components/Badge/preview.html +19 -0
- package/dist/exports/design-system/components/Checkbox/README.md +5 -5
- package/dist/exports/design-system/components/Checkbox/preview.html +1 -1
- package/dist/exports/design-system/components/CheckboxGroup/README.md +14 -14
- package/dist/exports/design-system/components/CheckboxGroup/preview.html +1 -1
- package/dist/exports/design-system/components/Collapsible/README.md +6 -6
- package/dist/exports/design-system/components/Collapsible/preview.html +1 -1
- package/dist/exports/design-system/components/Collection/README.md +14 -0
- package/dist/exports/design-system/components/CollectionPagination/README.md +15 -0
- package/dist/exports/design-system/components/CollectionToolbar/README.md +24 -0
- package/dist/exports/design-system/components/Combobox/README.md +11 -11
- package/dist/exports/design-system/components/Combobox/preview.html +1 -1
- package/dist/exports/design-system/components/ContextMenu/README.md +9 -9
- package/dist/exports/design-system/components/ContextMenu/preview.html +1 -1
- package/dist/exports/design-system/components/DataList/README.md +39 -0
- package/dist/exports/design-system/components/DataList/preview.html +475 -0
- package/dist/exports/design-system/components/DataTable/README.md +41 -0
- package/dist/exports/design-system/components/DataTable/preview.html +475 -0
- package/dist/exports/design-system/components/DatePicker/README.md +55 -0
- package/dist/exports/design-system/components/DatePicker/preview.html +475 -0
- package/dist/exports/design-system/components/Dialog/README.md +6 -6
- package/dist/exports/design-system/components/Dialog/preview.html +1 -1
- package/dist/exports/design-system/components/Drawer/README.md +1 -1
- package/dist/exports/design-system/components/Drawer/preview.html +1 -1
- package/dist/exports/design-system/components/EditableList/README.md +33 -0
- package/dist/exports/design-system/components/EditableList/preview.html +475 -0
- package/dist/exports/design-system/components/EmptyState/README.md +60 -0
- package/dist/exports/design-system/components/EmptyState/preview.html +475 -0
- package/dist/exports/design-system/components/ListDetail/README.md +43 -0
- package/dist/exports/design-system/components/ListDetail/preview.html +475 -0
- package/dist/exports/design-system/components/Menu/README.md +11 -11
- package/dist/exports/design-system/components/Menu/preview.html +1 -1
- package/dist/exports/design-system/components/Menubar/README.md +32 -32
- package/dist/exports/design-system/components/Menubar/preview.html +1 -1
- package/dist/exports/design-system/components/Meter/README.md +9 -8
- package/dist/exports/design-system/components/Meter/preview.html +1 -1
- package/dist/exports/design-system/components/MoneyField/README.md +52 -0
- package/dist/exports/design-system/components/MoneyField/preview.html +475 -0
- package/dist/exports/design-system/components/NumberField/README.md +10 -10
- package/dist/exports/design-system/components/NumberField/preview.html +1 -1
- package/dist/exports/design-system/components/OTPField/README.md +5 -5
- package/dist/exports/design-system/components/OTPField/preview.html +1 -1
- package/dist/exports/design-system/components/Popover/README.md +7 -7
- package/dist/exports/design-system/components/Popover/preview.html +1 -1
- package/dist/exports/design-system/components/PreviewCard/README.md +9 -11
- package/dist/exports/design-system/components/PreviewCard/preview.html +1 -1
- package/dist/exports/design-system/components/Progress/README.md +8 -8
- package/dist/exports/design-system/components/Progress/preview.html +1 -1
- package/dist/exports/design-system/components/Radio/README.md +16 -23
- package/dist/exports/design-system/components/Radio/preview.html +1 -1
- package/dist/exports/design-system/components/ScrollArea/README.md +6 -6
- package/dist/exports/design-system/components/ScrollArea/preview.html +2 -2
- package/dist/exports/design-system/components/Select/README.md +13 -12
- package/dist/exports/design-system/components/Select/preview.html +1 -1
- package/dist/exports/design-system/components/Separator/README.md +2 -2
- package/dist/exports/design-system/components/Separator/preview.html +1 -1
- package/dist/exports/design-system/components/Slider/README.md +6 -6
- package/dist/exports/design-system/components/Slider/preview.html +1 -1
- package/dist/exports/design-system/components/Splitter/README.md +42 -0
- package/dist/exports/design-system/components/Splitter/preview.html +475 -0
- package/dist/exports/design-system/components/Switch/README.md +3 -3
- package/dist/exports/design-system/components/Switch/preview.html +1 -1
- package/dist/exports/design-system/components/Table/README.md +2 -1
- package/dist/exports/design-system/components/Table/preview.html +1 -1
- package/dist/exports/design-system/components/Tabs/README.md +9 -9
- package/dist/exports/design-system/components/Tabs/preview.html +1 -1
- package/dist/exports/design-system/components/Toast/README.md +7 -7
- package/dist/exports/design-system/components/Toast/preview.html +1 -1
- package/dist/exports/design-system/components/Toggle/README.md +2 -2
- package/dist/exports/design-system/components/Toggle/preview.html +1 -1
- package/dist/exports/design-system/components/ToggleGroup/README.md +5 -5
- package/dist/exports/design-system/components/ToggleGroup/preview.html +1 -1
- package/dist/exports/design-system/components/Toolbar/README.md +11 -11
- package/dist/exports/design-system/components/Toolbar/preview.html +1 -1
- package/dist/exports/design-system/components/Tooltip/README.md +4 -4
- package/dist/exports/design-system/components/Tooltip/preview.html +1 -1
- package/dist/exports/design-system/components/bundle.css +2394 -193
- package/dist/exports/design-system/components/bundle.js +7 -5
- package/dist/exports/design-system/components/index.d.ts +627 -29
- package/dist/exports/design-system/tokens.json +15 -0
- package/dist/exports/figma.json +1 -1
- package/dist/exports/mui.js +727 -0
- package/dist/exports/tailwind.css +36 -0
- package/dist/exports/tokens.dtcg.json +316 -2
- package/dist/tokens.css +111 -4
- package/dist/tokens.d.ts +93 -0
- package/dist/tokens.js +94 -1
- package/dist/tokens.json +572 -2
- package/package.json +2 -2
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Collapsible styled by the theme. No component tokens. Hover, press, chevron and motion are the disclosure concept (tokens/semantic/disclosure.json). The trigger is base-subtitle text with a base-size chevron; the panel lines up under the trigger's text and sits on the overlay surface.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Collapsible
|
|
5
|
+
Use `Loomiere.Collapsible`, this package's wrapper: it puts the class names on for you (`import { Collapsible } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Collapsible`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/collapsible
|
|
8
8
|
|
|
@@ -25,20 +25,20 @@ From the Collapsible stories (`Default`):
|
|
|
25
25
|
```tsx
|
|
26
26
|
export const Default: Story = {
|
|
27
27
|
render: () => (
|
|
28
|
-
<Collapsible.Root
|
|
29
|
-
<Collapsible.Trigger
|
|
28
|
+
<Collapsible.Root>
|
|
29
|
+
<Collapsible.Trigger>
|
|
30
30
|
<span className="material-symbols-outlined CollapsibleIcon">
|
|
31
31
|
chevron_right
|
|
32
32
|
</span>
|
|
33
33
|
Show more information
|
|
34
34
|
</Collapsible.Trigger>
|
|
35
|
-
<Collapsible.Panel
|
|
36
|
-
<
|
|
35
|
+
<Collapsible.Panel>
|
|
36
|
+
<Collapsible.Content>
|
|
37
37
|
<p>
|
|
38
38
|
This is additional content that can be collapsed and expanded.
|
|
39
39
|
It contains important information that users can choose to view.
|
|
40
40
|
</p>
|
|
41
|
-
</
|
|
41
|
+
</Collapsible.Content>
|
|
42
42
|
</Collapsible.Panel>
|
|
43
43
|
</Collapsible.Root>
|
|
44
44
|
),
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var g=Object.create;var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var
|
|
15
|
+
(()=>{var g=Object.create;var p=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var R=(o,l)=>()=>(l||o((l={exports:{}}).exports,l),l.exports),v=(o,l)=>{for(var a in l)p(o,a,{get:l[a],enumerable:!0})},w=(o,l,a,s)=>{if(l&&typeof l=="object"||typeof l=="function")for(let n of u(l))!f.call(o,n)&&n!==a&&p(o,n,{get:()=>l[n],enumerable:!(s=y(l,n))||s.enumerable});return o};var x=(o,l,a)=>(a=o!=null?g(h(o)):{},w(l||!o||!o.__esModule?p(a,"default",{value:o,enumerable:!0}):a,o));var b=R((O,m)=>{m.exports=window.Loomiere});var d={};v(d,{Default:()=>T,DefaultOpen:()=>S,FAQ:()=>P,RecoveryKeys:()=>E,default:()=>c});var t=x(b(),1);var i=window.React;function e(o,l,a){let{children:s,...n}=l||{};return a!==void 0&&(n.key=a),s===void 0?i.createElement(o,n):Array.isArray(s)?i.createElement(o,n,...s):i.createElement(o,n,s)}var _=i.Fragment;var I={title:"Components/Lib/Collapsible",component:t.Collapsible.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},c=I,T={render:()=>e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Show more information"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:e("p",{children:"This is additional content that can be collapsed and expanded. It contains important information that users can choose to view."})})})]})},S={render:()=>e(t.Collapsible.Root,{defaultOpen:!0,children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Hide details"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:e("p",{children:"This collapsible starts in an open state by default. Click the trigger to collapse it."})})})]})},P={render:()=>e("div",{style:{display:"flex",flexDirection:"column",gap:"12px"},children:[e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"What is Base UI?"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:e("p",{children:`Base UI is a library of headless ("unstyled") React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.`})})})]}),e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"How do I install it?"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:[e("p",{children:"You can install Base UI using npm, yarn, or pnpm:"}),e("code",{children:"npm install @base-ui/react"})]})})]}),e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Is it accessible?"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:e("p",{children:"Yes! Base UI components follow WAI-ARIA authoring practices and are fully accessible out of the box with proper keyboard navigation and screen reader support."})})})]})]})},E={render:()=>e(t.Collapsible.Root,{children:[e(t.Collapsible.Trigger,{children:[e("span",{className:"material-symbols-outlined CollapsibleIcon",children:"chevron_right"}),"Recovery keys"]}),e(t.Collapsible.Panel,{children:e(t.Collapsible.Content,{children:[e("div",{children:"alien-bean-pasta"}),e("div",{children:"wild-irish-burrito"}),e("div",{children:"horse-battery-staple"})]})})]})};var r=window.React,C=c||{},N=["Default","DefaultOpen","FAQ","RecoveryKeys"];function A({id:o}){let l=d[o],a={...C.args||{},...l.args||{}};return(l.render||(n=>r.createElement(C.component,n)))(a,{args:a,id:o,name:o})}var D=N.map(o=>r.createElement("section",{key:o,className:"ds-story"},r.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),r.createElement("div",{className:"ds-story-body"},r.createElement(A,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(r.createElement(r.Fragment,null,D));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
# Collection
|
|
2
|
+
|
|
3
|
+
The Base UI Collection styled by the theme. DataTable, DataList, the toolbar and the pagination, in one place so the two views share the table concept. Sections: toolbar, table additions, groups, list, pagination, sizes. Each section is its own file so the design system can name the part. This file brings them in. The selection bar replaces the trailing controls (filters, sort, clear, actions) and leaves the tabs and the search where they are, so selecting rows does not grow the toolbar.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.Collection` (`import { Collection } from '@base-ui/react/collection'` in an app) and give each part the class below; the styles target those classes, not Base UI's own markup.
|
|
6
|
+
|
|
7
|
+
Base UI docs: https://base-ui.com/react/components/collection
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
|
|
14
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
# CollectionPagination
|
|
2
|
+
|
|
3
|
+
Loomiere component, not part of Base UI. Not tied to a collection. Anything with a page, a page count and a total can use it. Previous and Next are quiet buttons. The count reads "1–25 of 312".
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.CollectionPagination` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
|
|
6
|
+
|
|
7
|
+
Not a Base UI part, so there is no base-ui.com page for it.
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `CollectionPagination` | |
|
|
14
|
+
|
|
15
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
# CollectionToolbar
|
|
2
|
+
|
|
3
|
+
Loomiere component, not part of Base UI. The wrap follows the toolbar's own width, not the window: a table in a narrow pane wraps even when the page is wide. Search takes the full width first. Filters wrap under it. A container query cannot read the width token, so the component also sets data-narrow.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.CollectionToolbar` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
|
|
6
|
+
|
|
7
|
+
Not a Base UI part, so there is no base-ui.com page for it.
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `CollectionToolbar` | `data-narrow` |
|
|
14
|
+
| `CollectionToolbarMain` | |
|
|
15
|
+
| `CollectionToolbarTrailing` | |
|
|
16
|
+
| `CollectionSelectionBar` | |
|
|
17
|
+
| `CollectionSort` | |
|
|
18
|
+
| `CollectionSearch` | |
|
|
19
|
+
| `Input` | |
|
|
20
|
+
| `CollectionToolbarActions` | |
|
|
21
|
+
| `CollectionView` | `data-narrow` |
|
|
22
|
+
| `CollectionCount` | |
|
|
23
|
+
|
|
24
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI Combobox styled by the theme. No component tokens. The input is Input (Input.css); the chips box is a field; the clear and open buttons are icon buttons; the list is a popup of item rows with the shared group label, separator and empty message. Rules that adjust Input are scoped under a Combobox parent so they win over Input.css, which loads later.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.Combobox
|
|
5
|
+
Use `Loomiere.Combobox`, this package's wrapper: it puts the class names on for you (`import { Combobox } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.Combobox`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/combobox
|
|
8
8
|
|
|
@@ -55,19 +55,19 @@ export const Default: Story = {
|
|
|
55
55
|
render: () => {
|
|
56
56
|
const id = React.useId();
|
|
57
57
|
return (
|
|
58
|
-
<div
|
|
58
|
+
<div style={{ width: '400px' }}>
|
|
59
59
|
<Combobox.Root items={fruits}>
|
|
60
60
|
<label htmlFor={id} className="ComboboxLabel">
|
|
61
61
|
Choose a fruit
|
|
62
62
|
<div className="ComboboxInputWrapper">
|
|
63
|
-
<Combobox.Input placeholder="e.g. Apple" id={id}
|
|
63
|
+
<Combobox.Input placeholder="e.g. Apple" id={id} />
|
|
64
64
|
<div className="ComboboxActionButtons">
|
|
65
|
-
<Combobox.Clear
|
|
65
|
+
<Combobox.Clear aria-label="Clear selection">
|
|
66
66
|
<span className="material-symbols-outlined ComboboxClearIcon">
|
|
67
67
|
close
|
|
68
68
|
</span>
|
|
69
69
|
</Combobox.Clear>
|
|
70
|
-
<Combobox.Trigger
|
|
70
|
+
<Combobox.Trigger aria-label="Open popup">
|
|
71
71
|
<span className="material-symbols-outlined ComboboxTriggerIcon">
|
|
72
72
|
expand_more
|
|
73
73
|
</span>
|
|
@@ -77,13 +77,13 @@ export const Default: Story = {
|
|
|
77
77
|
</label>
|
|
78
78
|
|
|
79
79
|
<Combobox.Portal>
|
|
80
|
-
<Combobox.Positioner
|
|
81
|
-
<Combobox.Popup
|
|
82
|
-
<Combobox.Empty
|
|
83
|
-
<Combobox.List
|
|
80
|
+
<Combobox.Positioner sideOffset={4}>
|
|
81
|
+
<Combobox.Popup>
|
|
82
|
+
<Combobox.Empty>No fruits found.</Combobox.Empty>
|
|
83
|
+
<Combobox.List>
|
|
84
84
|
{(item: string) => (
|
|
85
|
-
<Combobox.Item key={item} value={item}
|
|
86
|
-
<Combobox.ItemIndicator
|
|
85
|
+
<Combobox.Item key={item} value={item}>
|
|
86
|
+
<Combobox.ItemIndicator>
|
|
87
87
|
<span className="material-symbols-outlined ComboboxItemIndicatorIcon">
|
|
88
88
|
check
|
|
89
89
|
</span>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var q=Object.create;var V=Object.defineProperty;var ee=Object.getOwnPropertyDescriptor;var oe=Object.getOwnPropertyNames;var ae=Object.getPrototypeOf,te=Object.prototype.hasOwnProperty;var O=(a,t)=>()=>(t||a((t={exports:{}}).exports,t),t.exports),se=(a,t)=>{for(var l in t)V(a,l,{get:t[l],enumerable:!0})},ne=(a,t,l,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let m of oe(t))!te.call(a,m)&&m!==l&&V(a,m,{get:()=>t[m],enumerable:!(r=ee(t,m))||r.enumerable});return a};var U=(a,t,l)=>(l=a!=null?q(ae(a)):{},ne(t||!a||!a.__esModule?V(l,"default",{value:a,enumerable:!0}):l,a));var $=O((he,G)=>{G.exports=window.React});var K=O((Ne,H)=>{H.exports=window.Loomiere.Base});var _=O((fe,W)=>{W.exports=window.Loomiere.Base});var j={};se(j,{AsyncSearchMultiple:()=>Ce,AsyncSearchSingle:()=>pe,Creatable:()=>be,Default:()=>re,Grouped:()=>ie,InputInsidePopup:()=>ue,MultipleSelect:()=>me,default:()=>B});var n=U($(),1),o=U(K(),1),v=U(_(),1);var k=window.React;function e(a,t,l){let{children:r,...m}=t||{};return l!==void 0&&(m.key=l),r===void 0?k.createElement(a,m):Array.isArray(r)?k.createElement(a,m,...r):k.createElement(a,m,r)}var ve=k.Fragment;var Q=["Apple","Banana","Cherry","Date","Elderberry","Fig","Grape","Honeydew","Kiwi","Lemon","Mango","Orange"],le={title:"Components/Combobox",parameters:{layout:"centered"},tags:["autodocs"]},B=le,re={render:()=>{let a=n.useId();return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:Q,children:[e("label",{htmlFor:a,className:"ComboboxLabel",children:["Choose a fruit",e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{placeholder:"e.g. Apple",id:a,className:"ComboboxInput"}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{className:"ComboboxClear","aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{className:"ComboboxTrigger","aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup",children:[e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No fruits found."}),e(o.Combobox.List,{className:"ComboboxList",children:t=>e(o.Combobox.Item,{value:t,className:"ComboboxItem",children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:t})]},t)})]})})})]})})}},me={render:()=>{let a=n.useRef(null),t=n.useId();return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:Q,multiple:!0,children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:t,children:"Choose fruits"}),e(o.Combobox.Chips,{className:"ComboboxChips",ref:a,children:e(o.Combobox.Value,{children:l=>e(n.Fragment,{children:[l.map(r=>e(o.Combobox.Chip,{className:"ComboboxChip","aria-label":r,children:[r,e(o.Combobox.ChipRemove,{className:"ComboboxChipRemove","aria-label":`Remove ${r}`,children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},r)),e(o.Combobox.Input,{id:t,placeholder:l.length>0?"":"e.g. Apple",className:"ComboboxInput"})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,anchor:a,children:e(o.Combobox.Popup,{className:"ComboboxPopup",children:[e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No fruits found."}),e(o.Combobox.List,{className:"ComboboxList",children:l=>e(o.Combobox.Item,{value:l,className:"ComboboxItem",children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:l})]},l)})]})})})]})})}},z=[{category:"Citrus",items:["Lemon","Lime","Orange","Grapefruit"]},{category:"Berries",items:["Strawberry","Blueberry","Raspberry","Blackberry"]},{category:"Tropical",items:["Mango","Pineapple","Papaya","Coconut"]}],ie={render:()=>{let a=n.useId(),t=z.flatMap(l=>l.items);return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:t,children:[e("label",{htmlFor:a,className:"ComboboxLabel",children:["Choose a fruit",e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{placeholder:"Search fruits...",id:a,className:"ComboboxInput"}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{className:"ComboboxClear","aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{className:"ComboboxTrigger","aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup",children:[e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No fruits found."}),z.map((l,r)=>e(n.Fragment,{children:[r>0&&e(o.Combobox.Separator,{className:"ComboboxSeparator"}),e(o.Combobox.Group,{className:"ComboboxGroup",children:[e(o.Combobox.GroupLabel,{className:"ComboboxGroupLabel",children:l.category}),l.items.map(m=>e(o.Combobox.Item,{value:m,className:"ComboboxItem",children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:m})]},m))]})]},l.category))]})})})]})})}},ce=[{id:"bug",value:"bug"},{id:"docs",value:"documentation"},{id:"enhancement",value:"enhancement"},{id:"help-wanted",value:"help wanted"},{id:"good-first-issue",value:"good first issue"}],be={render:()=>{let a=n.useId(),[t,l]=n.useState(ce),[r,m]=n.useState([]),[R,g]=n.useState(""),[f,d]=n.useState(!1),p=n.useRef(null),y=n.useRef(null),h=n.useRef(null),I=n.useRef(""),N=n.useRef(void 0);function D(s){if(s.key!=="Enter"||N.current)return;let c=R.trim();if(c==="")return;let C=c.toLocaleLowerCase(),u=t.find(x=>x.value.trim().toLocaleLowerCase()===C);if(u){m(x=>x.some(F=>F.id===u.id)?x:[...x,u]),g("");return}I.current=c,d(!0)}function L(){let s=y.current||h.current,c=s?s.value.trim():"";if(!c)return;let C=c.toLocaleLowerCase(),u=C.replace(/\s+/g,"-"),x=t.find(b=>b.value.trim().toLocaleLowerCase()===C);if(x){m(b=>b.some(Y=>Y.id===x.id)?b:[...b,x]),d(!1),g("");return}let F=new Set(t.map(b=>b.id)),A=u;if(F.has(A)){let b=2;for(;F.has(`${u}-${b}`);)b+=1;A=`${u}-${b}`}let M={id:A,value:c};r.find(b=>b.id===M.id)||(l(b=>[...b,M]),m(b=>[...b,M])),d(!1),g("")}function P(s){s.preventDefault(),L()}let i=R.trim(),E=i.toLocaleLowerCase(),w=t.some(s=>s.value.trim().toLocaleLowerCase()===E),T=i!==""&&!w?[...t,{creatable:i,id:`create:${E}`,value:`Create "${i}"`}]:t;return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(n.Fragment,{children:[e(o.Combobox.Root,{items:T,multiple:!0,onValueChange:s=>{let c=s.find(u=>u.creatable&&!r.some(x=>x.id===u.id));if(c&&c.creatable){I.current=c.creatable,d(!0);return}let C=s.filter(u=>!u.creatable);m(C),g("")},value:r,inputValue:R,onInputValueChange:g,onItemHighlighted:s=>{N.current=s},children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:a,children:"Labels"}),e(o.Combobox.Chips,{className:"ComboboxChips",ref:p,children:e(o.Combobox.Value,{children:s=>e(n.Fragment,{children:[s.map(c=>e(o.Combobox.Chip,{className:"ComboboxChip","aria-label":c.value,children:[c.value,e(o.Combobox.ChipRemove,{className:"ComboboxChipRemove","aria-label":"Remove",children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},c.id)),e(o.Combobox.Input,{ref:h,id:a,placeholder:s.length>0?"":"e.g. bug",className:"ComboboxInput",onKeyDown:D})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,anchor:p,children:e(o.Combobox.Popup,{className:"ComboboxPopup",children:[e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No labels found."}),e(o.Combobox.List,{className:"ComboboxList",children:s=>s.creatable?e(o.Combobox.Item,{className:"ComboboxItem",value:s,children:[e("span",{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"add"})}),e("div",{className:"ComboboxItemText",children:['Create "',s.creatable,'"']})]},s.id):e(o.Combobox.Item,{className:"ComboboxItem",value:s,children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:s.value})]},s.id)})]})})})]}),e(v.Dialog.Root,{open:f,onOpenChange:d,children:e(v.Dialog.Portal,{children:[e(v.Dialog.Backdrop,{className:"DialogBackdrop"}),e(v.Dialog.Popup,{className:"DialogPopup",initialFocus:y,children:[e(v.Dialog.Title,{className:"DialogTitle",children:"Create new label"}),e(v.Dialog.Description,{className:"DialogDescription",children:"Add a new label to select."}),e("form",{onSubmit:P,children:[e("input",{ref:y,className:"Input",placeholder:"Label name",defaultValue:I.current}),e("div",{className:"DialogActions",children:[e(v.Dialog.Close,{className:"Button","data-variant":"ghost",children:"Cancel"}),e("button",{type:"submit",className:"Button",children:"Create"})]})]})]})]})})]})})}},J=[{code:"",value:null,continent:"",label:"Select country"},{code:"af",value:"afghanistan",label:"Afghanistan",continent:"Asia"},{code:"au",value:"australia",label:"Australia",continent:"Oceania"},{code:"ca",value:"canada",label:"Canada",continent:"North America"},{code:"cn",value:"china",label:"China",continent:"Asia"},{code:"fr",value:"france",label:"France",continent:"Europe"},{code:"de",value:"germany",label:"Germany",continent:"Europe"},{code:"in",value:"india",label:"India",continent:"Asia"},{code:"jp",value:"japan",label:"Japan",continent:"Asia"},{code:"mx",value:"mexico",label:"Mexico",continent:"North America"},{code:"gb",value:"united-kingdom",label:"United Kingdom",continent:"Europe"},{code:"us",value:"united-states",label:"United States",continent:"North America"}],ue={render:()=>e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:J,defaultValue:J[0],children:[e(o.Combobox.Trigger,{className:"ComboboxSelectTrigger",children:[e(o.Combobox.Value,{}),e(o.Combobox.Icon,{className:"ComboboxIcon",children:e("span",{className:"material-symbols-outlined",children:"unfold_more"})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",align:"start",sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup","aria-label":"Select country",children:[e("div",{className:"ComboboxInputContainer",children:e(o.Combobox.Input,{placeholder:"e.g. United Kingdom",className:"ComboboxInput"})}),e(o.Combobox.Empty,{className:"ComboboxEmpty",children:"No countries found."}),e(o.Combobox.List,{className:"ComboboxList",children:a=>e(o.Combobox.Item,{value:a,className:"ComboboxItem",children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:a.label??a.value})]},a.code)})]})})})]})})},de=[{id:"leslie-alexander",name:"Leslie Alexander",username:"leslie",email:"leslie.alexander@example.com",title:"Product Manager"},{id:"kathryn-murphy",name:"Kathryn Murphy",username:"kathryn",email:"kathryn.murphy@example.com",title:"Marketing Lead"},{id:"courtney-henry",name:"Courtney Henry",username:"courtney",email:"courtney.henry@example.com",title:"Design Systems"},{id:"michael-foster",name:"Michael Foster",username:"michael",email:"michael.foster@example.com",title:"Engineering Manager"},{id:"lindsay-walton",name:"Lindsay Walton",username:"lindsay",email:"lindsay.walton@example.com",title:"Product Designer"},{id:"tom-cook",name:"Tom Cook",username:"tom",email:"tom.cook@example.com",title:"Frontend Engineer"},{id:"whitney-francis",name:"Whitney Francis",username:"whitney",email:"whitney.francis@example.com",title:"Customer Success"},{id:"jacob-jones",name:"Jacob Jones",username:"jacob",email:"jacob.jones@example.com",title:"Security Engineer"}];async function Z(a,t){return await new Promise(r=>{setTimeout(r,Math.random()*500+100)}),Math.random()<.01||a==="will_error"?{users:[],error:"Failed to fetch people. Please try again."}:{users:de.filter(r=>t(r.name,a)||t(r.username,a)||t(r.email,a)||t(r.title,a)),error:null}}var pe={render:()=>{let a=n.useId(),[t,l]=n.useState([]),[r,m]=n.useState(null),[R,g]=n.useState(""),[f,d]=n.useState(null),[p,y]=n.useTransition(),{contains:h}=o.Combobox.useFilter(),I=n.useRef(null),N=R.trim(),D=n.useMemo(()=>!r||t.some(i=>i.id===r.id)?t:[...t,r],[t,r]);function L(){return p?e(n.Fragment,{children:[e("span",{className:"ComboboxSpinner","aria-hidden":!0}),"Searching..."]}):f||(N===""?r?null:"Start typing to search people...":t.length===0?`No matches for "${N}".`:null)}function P(){return N===""||p||t.length>0||f?null:"Try a different search term."}return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:D,itemToStringLabel:i=>i.name,filter:null,onOpenChangeComplete:i=>{!i&&r&&l([r])},onValueChange:i=>{m(i),g(""),d(null)},onInputValueChange:(i,{reason:E})=>{g(i);let w=new AbortController;if(I.current?.abort(),I.current=w,i===""){l([]),d(null);return}E!=="item-press"&&y(()=>{(async()=>{d(null);let T=await Z(i,h);w.signal.aborted||y(()=>{l(T.users),d(T.error)})})()})},children:[e("div",{className:"ComboboxLabel",children:[e("label",{htmlFor:a,children:"Assign reviewer"}),e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{id:a,placeholder:"e.g. Michael",className:"ComboboxInput"}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{className:"ComboboxClear","aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{className:"ComboboxTrigger","aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup","aria-busy":p||void 0,children:[e(o.Combobox.Status,{className:"ComboboxStatus visually-hidden",children:L()}),e(o.Combobox.Empty,{className:"ComboboxEmpty",children:P()}),e(o.Combobox.List,{className:"ComboboxList",children:i=>e(o.Combobox.Item,{className:"ComboboxItem",value:i,children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:[e("div",{className:"ComboboxItemTitle",children:i.name}),e("div",{className:"ComboboxItemSubtitle",children:[e("span",{className:"ComboboxItemUsername",children:["@",i.username]}),e("span",{children:i.title})]}),e("div",{className:"ComboboxItemEmail",children:i.email})]})]},i.id)})]})})})]})})}},Ce={render:()=>{let a=n.useId(),t=n.useRef(null),[l,r]=n.useState([]),[m,R]=n.useState([]),[g,f]=n.useState(""),[d,p]=n.useState(null),[y,h]=n.useState(!1),[I,N]=n.useTransition(),{contains:D}=o.Combobox.useFilter(),L=n.useRef(null),P=n.useRef([]),i=g.trim(),E=n.useMemo(()=>{if(m.length===0)return l;let s=[...l];return m.forEach(c=>{l.some(C=>C.id===c.id)||s.push(c)}),s},[l,m]);function w(){return I?e(n.Fragment,{children:[e("span",{className:"ComboboxSpinner","aria-hidden":!0}),"Searching..."]}):d||(i===""&&!y?m.length>0?null:"Start typing to search people...":l.length===0&&!y?`No matches for "${i}".`:null)}function T(){return i===""||I||l.length>0||d?null:"Try a different search term."}return e("div",{className:"ComboboxRoot",style:{width:"400px"},children:e(o.Combobox.Root,{items:E,itemToStringLabel:s=>s.name,multiple:!0,filter:null,onOpenChangeComplete:s=>{s||(r(P.current),h(!1))},onValueChange:s=>{P.current=s,R(s),f(""),p(null),s.length===0?(r([]),h(!1)):h(!0)},onInputValueChange:(s,{reason:c})=>{f(s);let C=new AbortController;if(L.current?.abort(),L.current=C,s===""){r(P.current),p(null),h(!1);return}c!=="item-press"&&N(()=>{(async()=>{p(null);let u=await Z(s,D);C.signal.aborted||N(()=>{r(u.users),p(u.error)})})()})},children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:a,children:"Assign reviewers"}),e(o.Combobox.Chips,{className:"ComboboxChips",ref:t,children:e(o.Combobox.Value,{children:s=>e(n.Fragment,{children:[s.map(c=>e(o.Combobox.Chip,{className:"ComboboxChip","aria-label":c.name,children:[c.name,e(o.Combobox.ChipRemove,{className:"ComboboxChipRemove","aria-label":"Remove",children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},c.id)),e(o.Combobox.Input,{id:a,placeholder:s.length>0?"":"e.g. Michael",className:"ComboboxInput"})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{className:"ComboboxPositioner",anchor:t,sideOffset:4,children:e(o.Combobox.Popup,{className:"ComboboxPopup","aria-busy":I||void 0,children:[e(o.Combobox.Status,{className:"ComboboxStatus visually-hidden",children:w()}),e(o.Combobox.Empty,{className:"ComboboxEmpty",children:T()}),e(o.Combobox.List,{className:"ComboboxList",children:s=>e(o.Combobox.Item,{className:"ComboboxItem",value:s,children:[e(o.Combobox.ItemIndicator,{className:"ComboboxItemIndicator",children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:[e("div",{className:"ComboboxItemTitle",children:s.name}),e("div",{className:"ComboboxItemSubtitle",children:[e("span",{className:"ComboboxItemUsername",children:["@",s.username]}),e("span",{children:s.title})]}),e("div",{className:"ComboboxItemEmail",children:s.email})]})]},s.id)})]})})})]})})}};var S=window.React,X=B||{},xe=["Default","MultipleSelect","Grouped","Creatable"];function ge({id:a}){let t=j[a],l={...X.args||{},...t.args||{}};return(t.render||(m=>S.createElement(X.component,m)))(l,{args:l,id:a,name:a})}var Ie=xe.map(a=>S.createElement("section",{key:a,className:"ds-story"},S.createElement("p",{className:"ds-story-name"},a.replace(/([a-z])([A-Z])/g,"$1 $2")),S.createElement("div",{className:"ds-story-body"},S.createElement(ge,{id:a}))));window.ReactDOM.createRoot(document.getElementById("root")).render(S.createElement(S.Fragment,null,Ie));})();
|
|
15
|
+
(()=>{var Z=Object.create;var M=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var X=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,ee=Object.prototype.hasOwnProperty;var U=(t,a)=>()=>(a||t((a={exports:{}}).exports,a),a.exports),oe=(t,a)=>{for(var s in a)M(t,s,{get:a[s],enumerable:!0})},te=(t,a,s,l)=>{if(a&&typeof a=="object"||typeof a=="function")for(let i of X(a))!ee.call(t,i)&&i!==s&&M(t,i,{get:()=>a[i],enumerable:!(l=q(a,i))||l.enumerable});return t};var B=(t,a,s)=>(s=t!=null?Z(Y(t)):{},te(a||!t||!t.__esModule?M(s,"default",{value:t,enumerable:!0}):s,t));var $=U((ge,j)=>{j.exports=window.React});var G=U((ye,H)=>{H.exports=window.Loomiere});var O={};oe(O,{AsyncSearchMultiple:()=>ue,AsyncSearchSingle:()=>be,Creatable:()=>ie,Default:()=>ne,Grouped:()=>se,InputInsidePopup:()=>me,MultipleSelect:()=>re,default:()=>V});var r=B($(),1),o=B(G(),1);var F=window.React;function e(t,a,s){let{children:l,...i}=a||{};return s!==void 0&&(i.key=s),l===void 0?F.createElement(t,i):Array.isArray(l)?F.createElement(t,i,...l):F.createElement(t,i,l)}var fe=F.Fragment;var _=["Apple","Banana","Cherry","Date","Elderberry","Fig","Grape","Honeydew","Kiwi","Lemon","Mango","Orange"],ae={title:"Components/Lib/Combobox",parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},V=ae,ne={render:()=>{let t=r.useId();return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:_,children:[e("label",{htmlFor:t,className:"ComboboxLabel",children:["Choose a fruit",e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{placeholder:"e.g. Apple",id:t}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{"aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{"aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,children:e(o.Combobox.Popup,{children:[e(o.Combobox.Empty,{children:"No fruits found."}),e(o.Combobox.List,{children:a=>e(o.Combobox.Item,{value:a,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:a})]},a)})]})})})]})})}},re={render:()=>{let t=r.useRef(null),a=r.useId();return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:_,multiple:!0,children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:a,children:"Choose fruits"}),e(o.Combobox.Chips,{ref:t,children:e(o.Combobox.Value,{children:s=>e(r.Fragment,{children:[s.map(l=>e(o.Combobox.Chip,{"aria-label":l,children:[l,e(o.Combobox.ChipRemove,{"aria-label":`Remove ${l}`,children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},l)),e(o.Combobox.Input,{id:a,placeholder:s.length>0?"":"e.g. Apple"})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,anchor:t,children:e(o.Combobox.Popup,{children:[e(o.Combobox.Empty,{children:"No fruits found."}),e(o.Combobox.List,{children:s=>e(o.Combobox.Item,{value:s,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:s})]},s)})]})})})]})})}},K=[{category:"Citrus",items:["Lemon","Lime","Orange","Grapefruit"]},{category:"Berries",items:["Strawberry","Blueberry","Raspberry","Blackberry"]},{category:"Tropical",items:["Mango","Pineapple","Papaya","Coconut"]}],se={render:()=>{let t=r.useId(),a=K.flatMap(s=>s.items);return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:a,children:[e("label",{htmlFor:t,className:"ComboboxLabel",children:["Choose a fruit",e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{placeholder:"Search fruits...",id:t}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{"aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{"aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,children:e(o.Combobox.Popup,{children:[e(o.Combobox.Empty,{children:"No fruits found."}),K.map((s,l)=>e(r.Fragment,{children:[l>0&&e(o.Combobox.Separator,{}),e(o.Combobox.Group,{children:[e(o.Combobox.GroupLabel,{children:s.category}),s.items.map(i=>e(o.Combobox.Item,{value:i,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:i})]},i))]})]},s.category))]})})})]})})}},le=[{id:"bug",value:"bug"},{id:"docs",value:"documentation"},{id:"enhancement",value:"enhancement"},{id:"help-wanted",value:"help wanted"},{id:"good-first-issue",value:"good first issue"}],ie={render:()=>{let t=r.useId(),[a,s]=r.useState(le),[l,i]=r.useState([]),[R,g]=r.useState(""),[v,d]=r.useState(!1),p=r.useRef(null),f=r.useRef(null),h=r.useRef(null),y=r.useRef(""),I=r.useRef(void 0);function T(n){if(n.key!=="Enter"||I.current)return;let c=R.trim();if(c==="")return;let C=c.toLocaleLowerCase(),u=a.find(x=>x.value.trim().toLocaleLowerCase()===C);if(u){i(x=>x.some(D=>D.id===u.id)?x:[...x,u]),g("");return}y.current=c,d(!0)}function L(){let n=f.current||h.current,c=n?n.value.trim():"";if(!c)return;let C=c.toLocaleLowerCase(),u=C.replace(/\s+/g,"-"),x=a.find(b=>b.value.trim().toLocaleLowerCase()===C);if(x){i(b=>b.some(Q=>Q.id===x.id)?b:[...b,x]),d(!1),g("");return}let D=new Set(a.map(b=>b.id)),k=u;if(D.has(k)){let b=2;for(;D.has(`${u}-${b}`);)b+=1;k=`${u}-${b}`}let A={id:k,value:c};l.find(b=>b.id===A.id)||(s(b=>[...b,A]),i(b=>[...b,A])),d(!1),g("")}function N(n){n.preventDefault(),L()}let m=R.trim(),P=m.toLocaleLowerCase(),w=a.some(n=>n.value.trim().toLocaleLowerCase()===P),E=m!==""&&!w?[...a,{creatable:m,id:`create:${P}`,value:`Create "${m}"`}]:a;return e("div",{style:{width:"400px"},children:e(r.Fragment,{children:[e(o.Combobox.Root,{items:E,multiple:!0,onValueChange:n=>{let c=n.find(u=>u.creatable&&!l.some(x=>x.id===u.id));if(c&&c.creatable){y.current=c.creatable,d(!0);return}let C=n.filter(u=>!u.creatable);i(C),g("")},value:l,inputValue:R,onInputValueChange:g,onItemHighlighted:n=>{I.current=n},children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:t,children:"Labels"}),e(o.Combobox.Chips,{ref:p,children:e(o.Combobox.Value,{children:n=>e(r.Fragment,{children:[n.map(c=>e(o.Combobox.Chip,{"aria-label":c.value,children:[c.value,e(o.Combobox.ChipRemove,{"aria-label":"Remove",children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},c.id)),e(o.Combobox.Input,{ref:h,id:t,placeholder:n.length>0?"":"e.g. bug",onKeyDown:T})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,anchor:p,children:e(o.Combobox.Popup,{children:[e(o.Combobox.Empty,{children:"No labels found."}),e(o.Combobox.List,{children:n=>n.creatable?e(o.Combobox.Item,{value:n,children:[e("span",{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"add"})}),e("div",{className:"ComboboxItemText",children:['Create "',n.creatable,'"']})]},n.id):e(o.Combobox.Item,{value:n,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:n.value})]},n.id)})]})})})]}),e(o.Dialog.Root,{open:v,onOpenChange:d,children:e(o.Dialog.Portal,{children:[e(o.Dialog.Backdrop,{}),e(o.Dialog.Popup,{initialFocus:f,children:[e(o.Dialog.Title,{children:"Create new label"}),e(o.Dialog.Description,{children:"Add a new label to select."}),e("form",{onSubmit:N,children:[e(o.Input,{ref:f,placeholder:"Label name",defaultValue:y.current}),e(o.Dialog.Actions,{children:[e(o.Dialog.Close,{emphasis:"quiet",children:"Cancel"}),e(o.Button,{type:"submit",children:"Create"})]})]})]})]})})]})})}},W=[{code:"",value:null,continent:"",label:"Select country"},{code:"af",value:"afghanistan",label:"Afghanistan",continent:"Asia"},{code:"au",value:"australia",label:"Australia",continent:"Oceania"},{code:"ca",value:"canada",label:"Canada",continent:"North America"},{code:"cn",value:"china",label:"China",continent:"Asia"},{code:"fr",value:"france",label:"France",continent:"Europe"},{code:"de",value:"germany",label:"Germany",continent:"Europe"},{code:"in",value:"india",label:"India",continent:"Asia"},{code:"jp",value:"japan",label:"Japan",continent:"Asia"},{code:"mx",value:"mexico",label:"Mexico",continent:"North America"},{code:"gb",value:"united-kingdom",label:"United Kingdom",continent:"Europe"},{code:"us",value:"united-states",label:"United States",continent:"North America"}],me={render:()=>e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:W,defaultValue:W[0],children:[e(o.Combobox.Trigger,{className:"ComboboxSelectTrigger",children:[e(o.Combobox.Value,{}),e(o.Combobox.Icon,{children:e("span",{className:"material-symbols-outlined",children:"unfold_more"})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{align:"start",sideOffset:4,children:e(o.Combobox.Popup,{"aria-label":"Select country",children:[e("div",{className:"ComboboxInputContainer",children:e(o.Combobox.Input,{placeholder:"e.g. United Kingdom"})}),e(o.Combobox.Empty,{children:"No countries found."}),e(o.Combobox.List,{children:t=>e(o.Combobox.Item,{value:t,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:t.label??t.value})]},t.code)})]})})})]})})},ce=[{id:"leslie-alexander",name:"Leslie Alexander",username:"leslie",email:"leslie.alexander@example.com",title:"Product Manager"},{id:"kathryn-murphy",name:"Kathryn Murphy",username:"kathryn",email:"kathryn.murphy@example.com",title:"Marketing Lead"},{id:"courtney-henry",name:"Courtney Henry",username:"courtney",email:"courtney.henry@example.com",title:"Design Systems"},{id:"michael-foster",name:"Michael Foster",username:"michael",email:"michael.foster@example.com",title:"Engineering Manager"},{id:"lindsay-walton",name:"Lindsay Walton",username:"lindsay",email:"lindsay.walton@example.com",title:"Product Designer"},{id:"tom-cook",name:"Tom Cook",username:"tom",email:"tom.cook@example.com",title:"Frontend Engineer"},{id:"whitney-francis",name:"Whitney Francis",username:"whitney",email:"whitney.francis@example.com",title:"Customer Success"},{id:"jacob-jones",name:"Jacob Jones",username:"jacob",email:"jacob.jones@example.com",title:"Security Engineer"}];async function z(t,a){return await new Promise(l=>{setTimeout(l,Math.random()*500+100)}),Math.random()<.01||t==="will_error"?{users:[],error:"Failed to fetch people. Please try again."}:{users:ce.filter(l=>a(l.name,t)||a(l.username,t)||a(l.email,t)||a(l.title,t)),error:null}}var be={render:()=>{let t=r.useId(),[a,s]=r.useState([]),[l,i]=r.useState(null),[R,g]=r.useState(""),[v,d]=r.useState(null),[p,f]=r.useTransition(),{contains:h}=o.Combobox.useFilter(),y=r.useRef(null),I=R.trim(),T=r.useMemo(()=>!l||a.some(m=>m.id===l.id)?a:[...a,l],[a,l]);function L(){return p?e(r.Fragment,{children:[e("span",{className:"ComboboxSpinner","aria-hidden":!0}),"Searching..."]}):v||(I===""?l?null:"Start typing to search people...":a.length===0?`No matches for "${I}".`:null)}function N(){return I===""||p||a.length>0||v?null:"Try a different search term."}return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:T,itemToStringLabel:m=>m.name,filter:null,onOpenChangeComplete:m=>{!m&&l&&s([l])},onValueChange:m=>{i(m),g(""),d(null)},onInputValueChange:(m,{reason:P})=>{g(m);let w=new AbortController;if(y.current?.abort(),y.current=w,m===""){s([]),d(null);return}P!=="item-press"&&f(()=>{(async()=>{d(null);let E=await z(m,h);w.signal.aborted||f(()=>{s(E.users),d(E.error)})})()})},children:[e("div",{className:"ComboboxLabel",children:[e("label",{htmlFor:t,children:"Assign reviewer"}),e("div",{className:"ComboboxInputWrapper",children:[e(o.Combobox.Input,{id:t,placeholder:"e.g. Michael"}),e("div",{className:"ComboboxActionButtons",children:[e(o.Combobox.Clear,{"aria-label":"Clear selection",children:e("span",{className:"material-symbols-outlined ComboboxClearIcon",children:"close"})}),e(o.Combobox.Trigger,{"aria-label":"Open popup",children:e("span",{className:"material-symbols-outlined ComboboxTriggerIcon",children:"expand_more"})})]})]})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{sideOffset:4,children:e(o.Combobox.Popup,{"aria-busy":p||void 0,children:[e(o.Combobox.Status,{className:"visually-hidden",children:L()}),e(o.Combobox.Empty,{children:N()}),e(o.Combobox.List,{children:m=>e(o.Combobox.Item,{value:m,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:[e("div",{className:"ComboboxItemTitle",children:m.name}),e("div",{className:"ComboboxItemSubtitle",children:[e("span",{className:"ComboboxItemUsername",children:["@",m.username]}),e("span",{children:m.title})]}),e("div",{className:"ComboboxItemEmail",children:m.email})]})]},m.id)})]})})})]})})}},ue={render:()=>{let t=r.useId(),a=r.useRef(null),[s,l]=r.useState([]),[i,R]=r.useState([]),[g,v]=r.useState(""),[d,p]=r.useState(null),[f,h]=r.useState(!1),[y,I]=r.useTransition(),{contains:T}=o.Combobox.useFilter(),L=r.useRef(null),N=r.useRef([]),m=g.trim(),P=r.useMemo(()=>{if(i.length===0)return s;let n=[...s];return i.forEach(c=>{s.some(C=>C.id===c.id)||n.push(c)}),n},[s,i]);function w(){return y?e(r.Fragment,{children:[e("span",{className:"ComboboxSpinner","aria-hidden":!0}),"Searching..."]}):d||(m===""&&!f?i.length>0?null:"Start typing to search people...":s.length===0&&!f?`No matches for "${m}".`:null)}function E(){return m===""||y||s.length>0||d?null:"Try a different search term."}return e("div",{style:{width:"400px"},children:e(o.Combobox.Root,{items:P,itemToStringLabel:n=>n.name,multiple:!0,filter:null,onOpenChangeComplete:n=>{n||(l(N.current),h(!1))},onValueChange:n=>{N.current=n,R(n),v(""),p(null),n.length===0?(l([]),h(!1)):h(!0)},onInputValueChange:(n,{reason:c})=>{v(n);let C=new AbortController;if(L.current?.abort(),L.current=C,n===""){l(N.current),p(null),h(!1);return}c!=="item-press"&&I(()=>{(async()=>{p(null);let u=await z(n,T);C.signal.aborted||I(()=>{l(u.users),p(u.error)})})()})},children:[e("div",{className:"ComboboxContainer",children:[e("label",{className:"ComboboxLabel",htmlFor:t,children:"Assign reviewers"}),e(o.Combobox.Chips,{ref:a,children:e(o.Combobox.Value,{children:n=>e(r.Fragment,{children:[n.map(c=>e(o.Combobox.Chip,{"aria-label":c.name,children:[c.name,e(o.Combobox.ChipRemove,{"aria-label":"Remove",children:e("span",{className:"material-symbols-outlined ComboboxChipRemoveIcon",children:"close"})})]},c.id)),e(o.Combobox.Input,{id:t,placeholder:n.length>0?"":"e.g. Michael"})]})})})]}),e(o.Combobox.Portal,{children:e(o.Combobox.Positioner,{anchor:a,sideOffset:4,children:e(o.Combobox.Popup,{"aria-busy":y||void 0,children:[e(o.Combobox.Status,{className:"visually-hidden",children:w()}),e(o.Combobox.Empty,{children:E()}),e(o.Combobox.List,{children:n=>e(o.Combobox.Item,{value:n,children:[e(o.Combobox.ItemIndicator,{children:e("span",{className:"material-symbols-outlined ComboboxItemIndicatorIcon",children:"check"})}),e("div",{className:"ComboboxItemText",children:[e("div",{className:"ComboboxItemTitle",children:n.name}),e("div",{className:"ComboboxItemSubtitle",children:[e("span",{className:"ComboboxItemUsername",children:["@",n.username]}),e("span",{children:n.title})]}),e("div",{className:"ComboboxItemEmail",children:n.email})]})]},n.id)})]})})})]})})}};var S=window.React,J=V||{},de=["Default","MultipleSelect","Grouped","Creatable"];function pe({id:t}){let a=O[t],s={...J.args||{},...a.args||{}};return(a.render||(i=>S.createElement(J.component,i)))(s,{args:s,id:t,name:t})}var Ce=de.map(t=>S.createElement("section",{key:t,className:"ds-story"},S.createElement("p",{className:"ds-story-name"},t.replace(/([a-z])([A-Z])/g,"$1 $2")),S.createElement("div",{className:"ds-story-body"},S.createElement(pe,{id:t}))));window.ReactDOM.createRoot(document.getElementById("root")).render(S.createElement(S.Fragment,null,Ce));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
The Base UI ContextMenu styled by the theme. No component tokens. Opens on right-click; the trigger area only sets the cursor. The popup is the popup concept, rows are item rows at the dense menu height, and group labels, separators and check slots are the shared list parts, so menus and listboxes read as one family.
|
|
4
4
|
|
|
5
|
-
Use `Loomiere.ContextMenu
|
|
5
|
+
Use `Loomiere.ContextMenu`, this package's wrapper: it puts the class names on for you (`import { ContextMenu } from '@scattered-light/loomiere-base-ui'` in an app). The bare Base UI part is `Loomiere.Base.ContextMenu`.
|
|
6
6
|
|
|
7
7
|
Base UI docs: https://base-ui.com/react/components/context-menu
|
|
8
8
|
|
|
@@ -36,7 +36,7 @@ From the ContextMenu stories (`Default`):
|
|
|
36
36
|
export const Default: Story = {
|
|
37
37
|
render: () => (
|
|
38
38
|
<ContextMenu.Root>
|
|
39
|
-
<ContextMenu.Trigger
|
|
39
|
+
<ContextMenu.Trigger>
|
|
40
40
|
<div style={{
|
|
41
41
|
width: '300px',
|
|
42
42
|
height: '200px',
|
|
@@ -52,13 +52,13 @@ export const Default: Story = {
|
|
|
52
52
|
</div>
|
|
53
53
|
</ContextMenu.Trigger>
|
|
54
54
|
<ContextMenu.Portal>
|
|
55
|
-
<ContextMenu.Positioner
|
|
56
|
-
<ContextMenu.Popup
|
|
57
|
-
<ContextMenu.Item
|
|
58
|
-
<ContextMenu.Item
|
|
59
|
-
<ContextMenu.Item
|
|
60
|
-
<ContextMenu.Separator
|
|
61
|
-
<ContextMenu.Item
|
|
55
|
+
<ContextMenu.Positioner>
|
|
56
|
+
<ContextMenu.Popup>
|
|
57
|
+
<ContextMenu.Item>Copy</ContextMenu.Item>
|
|
58
|
+
<ContextMenu.Item>Cut</ContextMenu.Item>
|
|
59
|
+
<ContextMenu.Item>Paste</ContextMenu.Item>
|
|
60
|
+
<ContextMenu.Separator />
|
|
61
|
+
<ContextMenu.Item>Delete</ContextMenu.Item>
|
|
62
62
|
</ContextMenu.Popup>
|
|
63
63
|
</ContextMenu.Positioner>
|
|
64
64
|
</ContextMenu.Portal>
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var R=Object.create;var
|
|
15
|
+
(()=>{var R=Object.create;var d=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,P=Object.prototype.hasOwnProperty;var x=(o,n)=>()=>(n||o((n={exports:{}}).exports,n),n.exports),S=(o,n)=>{for(var a in n)d(o,a,{get:n[a],enumerable:!0})},v=(o,n,a,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let r of k(n))!P.call(o,r)&&r!==a&&d(o,r,{get:()=>n[r],enumerable:!(s=y(n,r))||s.enumerable});return o};var p=(o,n,a)=>(a=o!=null?R(f(o)):{},v(n||!o||!o.__esModule?d(a,"default",{value:o,enumerable:!0}):a,o));var I=x((W,C)=>{C.exports=window.React});var b=x((V,h)=>{h.exports=window.Loomiere});var l={};S(l,{Default:()=>N,WithCheckboxes:()=>T,WithDisabledItems:()=>_,WithRadioGroup:()=>E,WithSubmenu:()=>L,default:()=>m});var c=p(I(),1),t=p(b(),1);var u=window.React;function e(o,n,a){let{children:s,...r}=n||{};return a!==void 0&&(r.key=a),s===void 0?u.createElement(o,r):Array.isArray(s)?u.createElement(o,r,...s):u.createElement(o,r,s)}var A=u.Fragment;var w={title:"Components/Lib/ContextMenu",component:t.ContextMenu.Root,parameters:{layout:"centered"},tags:["autodocs","ds:lib"]},m=w,N={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{children:"Cut"}),e(t.ContextMenu.Item,{children:"Paste"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})},T={render:()=>{let[o,n]=c.useState(!1),[a,s]=c.useState(!0),[r,g]=c.useState(!1);return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for view options"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.CheckboxItem,{checked:o,onCheckedChange:n,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show toolbar"]}),e(t.ContextMenu.CheckboxItem,{checked:a,onCheckedChange:s,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show sidebar"]}),e(t.ContextMenu.CheckboxItem,{checked:r,onCheckedChange:g,children:[e(t.ContextMenu.CheckboxItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuCheckboxItemIndicatorIcon",children:"check"})}),"Show footer"]})]})})})]})}},E={render:()=>{let[o,n]=c.useState("light");return e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click to change theme"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:e(t.ContextMenu.Group,{children:[e(t.ContextMenu.GroupLabel,{children:"Theme"}),e(t.ContextMenu.RadioGroup,{value:o,onValueChange:n,children:[e(t.ContextMenu.RadioItem,{value:"light",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Light"]}),e(t.ContextMenu.RadioItem,{value:"dark",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"Dark"]}),e(t.ContextMenu.RadioItem,{value:"system",children:[e(t.ContextMenu.RadioItemIndicator,{children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",style:{fontVariationSettings:'"FILL" 1'},children:"radio_button_checked"})}),e("span",{className:"ContextMenuRadioItemIndicator","data-unchecked":!0,children:e("span",{className:"material-symbols-outlined ContextMenuRadioItemIndicatorIcon",children:"radio_button_unchecked"})}),"System"]})]})]})})})})]})}},L={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click for nested menu"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"New File"}),e(t.ContextMenu.Item,{children:"New Folder"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.SubmenuRoot,{children:[e(t.ContextMenu.SubmenuTrigger,{children:"Share"}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Email"}),e(t.ContextMenu.Item,{children:"Copy Link"}),e(t.ContextMenu.Item,{children:"Social Media"})]})})})]})]})})})]})},_={render:()=>e(t.ContextMenu.Root,{children:[e(t.ContextMenu.Trigger,{children:e("div",{style:{width:"300px",height:"200px",display:"flex",alignItems:"center",justifyContent:"center",border:"2px dashed var(--sl-border-strong)",borderRadius:"8px",background:"var(--sl-surface-overlay)",cursor:"context-menu"},children:"Right-click here"})}),e(t.ContextMenu.Portal,{children:e(t.ContextMenu.Positioner,{children:e(t.ContextMenu.Popup,{children:[e(t.ContextMenu.Item,{children:"Copy"}),e(t.ContextMenu.Item,{disabled:!0,children:"Cut (disabled)"}),e(t.ContextMenu.Item,{disabled:!0,children:"Paste (disabled)"}),e(t.ContextMenu.Separator,{}),e(t.ContextMenu.Item,{children:"Delete"})]})})})]})};var i=window.React,M=m||{},F=["Default","WithCheckboxes","WithRadioGroup","WithSubmenu"];function j({id:o}){let n=l[o],a={...M.args||{},...n.args||{}};return(n.render||(r=>i.createElement(M.component,r)))(a,{args:a,id:o,name:o})}var D=F.map(o=>i.createElement("section",{key:o,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},o.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(j,{id:o}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,D));})();
|
|
16
16
|
|
|
17
17
|
</script>
|
|
18
18
|
</body>
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
# DataList
|
|
2
|
+
|
|
3
|
+
Loomiere component, not part of Base UI. The same rows as the table, in one container with the table's borders, hover, selected and current states. Not a stack of floating cards: the two views should read as one family. variant=cards adds the surface radius and a gap when a queue should read as separate items.
|
|
4
|
+
|
|
5
|
+
Use `Loomiere.DataList` from `@scattered-light/loomiere-base-ui/custom/collection`. Install `@tanstack/react-table` (peer, optional). It is not on the main entry, so an app that only imports Badge does not need it.
|
|
6
|
+
|
|
7
|
+
Not a Base UI part, so there is no base-ui.com page for it.
|
|
8
|
+
|
|
9
|
+
## Classes
|
|
10
|
+
|
|
11
|
+
| Class | Data attributes it answers to |
|
|
12
|
+
|---|---|
|
|
13
|
+
| `DataList` | `data-size`: `md`; `data-variant`: `cards`; `data-loading` |
|
|
14
|
+
| `DataListPrimary` | |
|
|
15
|
+
| `DataListSecondary` | |
|
|
16
|
+
| `DataListMeta` | |
|
|
17
|
+
| `DataListSummary` | |
|
|
18
|
+
| `DataListBody` | |
|
|
19
|
+
| `DataListAmount` | |
|
|
20
|
+
| `DataListGroup` | |
|
|
21
|
+
|
|
22
|
+
Base UI sets the state attributes (`data-checked`, `data-open`, `data-disabled`...) itself. Set `data-size`, `data-emphasis`, `data-variant` and `data-color` yourself; `data-color` takes any palette name (`primary`, `secondary`, `error`...) and repaints the part in it.
|
|
23
|
+
|
|
24
|
+
## Example
|
|
25
|
+
|
|
26
|
+
From the DataList stories (`BesideTheTable`):
|
|
27
|
+
|
|
28
|
+
```tsx
|
|
29
|
+
export const BesideTheTable: Story = {
|
|
30
|
+
render: () => (
|
|
31
|
+
<div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
|
|
32
|
+
<FeeTable pageSize={5} />
|
|
33
|
+
<FeeList rows={fees.slice(0, 8)} />
|
|
34
|
+
</div>
|
|
35
|
+
),
|
|
36
|
+
};
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
The preview also shows `ReviewQueue`, `ExtraDoesNotActivate`, `Sort`.
|