@scattered-light/loomiere-mojave 0.23.0 → 0.24.1
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 +1 -1
- package/dist/exports/catalog.json +4 -0
- package/dist/exports/design-system/README.md +1 -1
- package/dist/exports/design-system/components/Button/README.md +1 -1
- package/dist/exports/design-system/components/Button/preview.html +2 -2
- package/dist/exports/design-system/components/DataList/preview.html +1 -1
- package/dist/exports/design-system/components/DataTable/preview.html +65 -65
- package/dist/exports/design-system/components/Notice/README.md +30 -0
- package/dist/exports/design-system/components/Notice/preview.html +19 -0
- package/dist/exports/design-system/components/Spinner/README.md +29 -0
- package/dist/exports/design-system/components/Spinner/preview.html +19 -0
- package/dist/exports/design-system/components/bundle.css +183 -66
- package/dist/exports/design-system/components/bundle.js +7 -7
- package/dist/exports/design-system/components/index.d.ts +7 -3
- package/package.json +2 -2
package/dist/exports/AGENTS.md
CHANGED
|
@@ -152,7 +152,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
|
|
|
152
152
|
|
|
153
153
|
### Components
|
|
154
154
|
|
|
155
|
-
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
|
|
155
|
+
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `Notice`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Spinner`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
|
|
156
156
|
|
|
157
157
|
Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
|
|
158
158
|
|
|
@@ -164,6 +164,8 @@
|
|
|
164
164
|
"design-system/components/MultiSelect/preview.html",
|
|
165
165
|
"design-system/components/NavigationMenu/README.md",
|
|
166
166
|
"design-system/components/NavigationMenu/preview.html",
|
|
167
|
+
"design-system/components/Notice/README.md",
|
|
168
|
+
"design-system/components/Notice/preview.html",
|
|
167
169
|
"design-system/components/NumberField/README.md",
|
|
168
170
|
"design-system/components/NumberField/preview.html",
|
|
169
171
|
"design-system/components/OTPField/README.md",
|
|
@@ -191,6 +193,8 @@
|
|
|
191
193
|
"design-system/components/SideNav/preview.html",
|
|
192
194
|
"design-system/components/Slider/README.md",
|
|
193
195
|
"design-system/components/Slider/preview.html",
|
|
196
|
+
"design-system/components/Spinner/README.md",
|
|
197
|
+
"design-system/components/Spinner/preview.html",
|
|
194
198
|
"design-system/components/SplitButton/README.md",
|
|
195
199
|
"design-system/components/SplitButton/preview.html",
|
|
196
200
|
"design-system/components/Splitter/README.md",
|
|
@@ -144,7 +144,7 @@ Looks: this brand can look 2 ways. With no `data-look` it is Mojave; `data-look=
|
|
|
144
144
|
|
|
145
145
|
## Components
|
|
146
146
|
|
|
147
|
-
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
|
|
147
|
+
The components are [Base UI](https://base-ui.com) parts styled by class name: `Accordion`, `AlertDialog`, `AppBar`, `Autocomplete`, `Avatar`, `Badge`, `Button`, `Checkbox`, `CheckboxGroup`, `Collapsible`, `Collection`, `CollectionCards`, `CollectionPagination`, `CollectionToolbar`, `Combobox`, `ContextMenu`, `DataList`, `DataTable`, `DatePicker`, `DescriptionList`, `Dialog`, `Drawer`, `EditableList`, `EmptyState`, `Field`, `Fieldset`, `Form`, `FormGrid`, `Input`, `ListDetail`, `Menu`, `Menubar`, `Meter`, `MoneyField`, `MultiSelect`, `NavigationMenu`, `Notice`, `NumberField`, `OTPField`, `PickerButton`, `PickerSplit`, `Popover`, `PreviewCard`, `Progress`, `Radio`, `ScrollArea`, `Select`, `Separator`, `Sheet`, `SideNav`, `Slider`, `Spinner`, `SplitButton`, `Splitter`, `StatCard`, `StatFigure`, `Switch`, `Table`, `Tabs`, `Toast`, `Toggle`, `ToggleGroup`, `Toolbar`, `Tooltip`. Each component's README lists the classes its parts take and the data attributes they answer to (`data-size="sm|lg"`, `data-emphasis`, `data-color`).
|
|
148
148
|
|
|
149
149
|
Icons are Material Symbols Outlined by ligature name (`<span class="material-symbols-outlined">search</span>`, or `Loomiere.MaterialSymbol name="search"`), sized by the `.icon-<tier>` utilities to match the text beside them.
|
|
150
150
|
|
|
@@ -10,7 +10,7 @@ Base UI docs: https://base-ui.com/react/components/button
|
|
|
10
10
|
|
|
11
11
|
| Class | Data attributes it answers to |
|
|
12
12
|
|---|---|
|
|
13
|
-
| `Button` | `data-icon-only`; `data-size`: `xs`, `sm`, `lg` |
|
|
13
|
+
| `Button` | `data-icon-only`; `data-emphasis`: `link`; `data-size`: `xs`, `sm`, `lg` |
|
|
14
14
|
|
|
15
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.
|
|
16
16
|
|
|
@@ -12,11 +12,11 @@
|
|
|
12
12
|
<body>
|
|
13
13
|
<div id="root"></div>
|
|
14
14
|
<script>
|
|
15
|
-
(()=>{var
|
|
15
|
+
(()=>{var g=Object.create;var p=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var h=Object.getPrototypeOf,w=Object.prototype.hasOwnProperty;var B=(e,a)=>()=>(a||e((a={exports:{}}).exports,a),a.exports),S=(e,a)=>{for(var n in a)p(e,n,{get:a[n],enumerable:!0})},E=(e,a,n,s)=>{if(a&&typeof a=="object"||typeof a=="function")for(let r of f(a))!w.call(e,r)&&r!==n&&p(e,r,{get:()=>a[r],enumerable:!(s=v(a,r))||s.enumerable});return e};var I=(e,a,n)=>(n=e!=null?g(h(e)):{},E(a||!e||!e.__esModule?p(n,"default",{value:e,enumerable:!0}):n,e));var m=B((q,c)=>{c.exports=window.Loomiere});var y={};S(y,{Default:()=>k,Disabled:()=>L,Emphasis:()=>j,IconOnly:()=>C,Link:()=>M,Loading:()=>O,QuietIconOnly:()=>W,Sizes:()=>D,Variants:()=>A,WithIcon:()=>R,default:()=>u});var o=I(m(),1);var d=window.React;function t(e,a,n){let{children:s,...r}=a||{};return n!==void 0&&(r.key=n),s===void 0?d.createElement(e,r):Array.isArray(s)?d.createElement(e,r,...s):d.createElement(e,r,s)}var V=d.Fragment;var z={title:"Components/Lib/Button",component:o.Button,parameters:{layout:"centered"},tags:["autodocs","ds:lib"],argTypes:{children:{control:"text",description:"Button content"}}},u=z,l=e=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",...e,children:t("path",{d:"M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z"})}),k={render:()=>t(o.Button,{type:"button",children:"Button"})},A={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:"Default"}),t(o.Button,{type:"button","data-variant":"outline",children:"Outline"}),t(o.Button,{type:"button","data-variant":"ghost",children:"Ghost"})]})},D={render:()=>t("div",{style:{display:"flex",gap:"12px",alignItems:"center",flexWrap:"wrap"},children:[t(o.Button,{type:"button","data-size":"xs",children:"Extra Small"}),t(o.Button,{type:"button","data-size":"sm",children:"Small"}),t(o.Button,{type:"button","data-size":"md",children:"Medium"}),t(o.Button,{type:"button","data-size":"lg",children:"Large"})]})},R={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"outline",children:[t(l,{}),"Add Item"]}),t(o.Button,{type:"button","data-variant":"ghost",children:[t(l,{}),"Add Item"]})]})},C={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"outline","aria-label":"Add item",children:t(l,{})}),t(o.Button,{type:"button","data-variant":"ghost","aria-label":"Add item",children:t(l,{})})]})},x=({flip:e,...a})=>t("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor",width:"20",height:"20",style:e?{transform:"scaleX(-1)"}:void 0,...a,children:t("path",{d:"M7.2 14.8a.75.75 0 010-1.06L10.94 10 7.2 6.26a.75.75 0 011.06-1.06l4.27 4.27a.75.75 0 010 1.06L8.26 14.8a.75.75 0 01-1.06 0z"})}),W={render:()=>t("div",{style:{display:"flex",alignItems:"center",gap:"var(--sl-space-2)",width:"280px"},children:[t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Previous month",children:t(x,{flip:!0})}),t("span",{className:"text-style-subtitle-base",style:{flexGrow:1,textAlign:"center"},children:"October 2026"}),t(o.Button,{type:"button",emphasis:"quiet",palette:"neutral","data-size":"xs","aria-label":"Next month",children:t(x,{})})]})},L={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"outline",disabled:!0,children:"Disabled"}),t(o.Button,{type:"button","data-variant":"ghost",disabled:!0,children:"Disabled"})]})},O={render:()=>t("div",{style:{display:"flex",gap:"12px",flexWrap:"wrap"},children:[t(o.Button,{type:"button",disabled:!0,children:[t("span",{style:{width:"16px",height:"16px",border:"2px solid currentColor",borderTopColor:"transparent",borderRadius:"50%",animation:"spin 0.6s linear infinite"}}),"Loading..."]}),t("style",{children:`
|
|
16
16
|
@keyframes spin {
|
|
17
17
|
to { transform: rotate(360deg); }
|
|
18
18
|
}
|
|
19
|
-
`})]})},
|
|
19
|
+
`})]})},j={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)"},children:[void 0,"secondary","error"].map(e=>t("div",{style:{display:"flex",gap:"var(--sl-space-2)"},children:["bold","standard","subtle","quiet"].map(a=>t(o.Button,{type:"button",emphasis:a,palette:e,children:e?`${a} ${e}`:a},a))},e??"default"))})},M={render:()=>t("div",{style:{display:"grid",gap:"var(--sl-space-3)",maxWidth:360},children:[t(o.Button,{type:"button",emphasis:"link",style:{justifySelf:"start"},children:"Forgot your password?"}),t("p",{style:{margin:0},children:["Nothing matched."," ",t(o.Button,{type:"button",emphasis:"link",children:"Clear the filters"})," ","to see every row."]}),t(o.Button,{type:"button",emphasis:"link",disabled:!0,style:{justifySelf:"start"},children:"Disabled link"})]})};var i=window.React,b=u||{},N=["Default","Variants","Sizes","WithIcon"];function F({id:e}){let a=y[e],n={...b.args||{},...a.args||{}};return(a.render||(r=>i.createElement(b.component,r)))(n,{args:n,id:e,name:e})}var P=N.map(e=>i.createElement("section",{key:e,className:"ds-story"},i.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),i.createElement("div",{className:"ds-story-body"},i.createElement(F,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(i.createElement(i.Fragment,null,P));})();
|
|
20
20
|
|
|
21
21
|
</script>
|
|
22
22
|
</body>
|
|
@@ -468,7 +468,7 @@ Unable to find an `+(n===!1?"accessible ":"")+'element with the role "'+t+'"'+l+
|
|
|
468
468
|
`)),i+=d+n[l+1]}),i}var H9=U9,_c=xa({...zE},{intercept:(e,t)=>t[0]==="fireEvent"||e.startsWith("find")||e.startsWith("waitFor")});_c.screen=new Proxy(_c.screen,{get(e,t,r){return we.warn(H9`
|
|
469
469
|
You are using Testing Library's \`screen\` object. Use \`within(canvasElement)\` instead.
|
|
470
470
|
More info: https://storybook.js.org/docs/essentials/interactions
|
|
471
|
-
`),Reflect.get(e,t,r)}});var{buildQueries:lV,configure:uV,createEvent:cV,fireEvent:dV,findAllByAltText:pV,findAllByDisplayValue:fV,findAllByLabelText:mV,findAllByPlaceholderText:hV,findAllByRole:yV,findAllByTestId:bV,findAllByText:gV,findAllByTitle:vV,findByAltText:EV,findByDisplayValue:_V,findByLabelText:RV,findByPlaceholderText:wV,findByRole:CV,findByTestId:SV,findByText:AV,findByTitle:TV,getAllByAltText:PV,getAllByDisplayValue:OV,getAllByLabelText:qV,getAllByPlaceholderText:xV,getAllByRole:MV,getAllByTestId:NV,getAllByText:jV,getAllByTitle:IV,getByAltText:DV,getByDisplayValue:FV,getByLabelText:LV,getByPlaceholderText:BV,getByRole:kV,getByTestId:$V,getByText:UV,getByTitle:HV,getConfig:VV,getDefaultNormalizer:zV,getElementError:GV,getNodeText:YV,getQueriesForElement:WV,getRoles:KV,getSuggestedQuery:XV,isInaccessible:JV,logDOM:QV,logRoles:ZV,prettyDOM:e8,queries:t8,queryAllByAltText:r8,queryAllByAttribute:n8,queryAllByDisplayValue:o8,queryAllByLabelText:a8,queryAllByPlaceholderText:i8,queryAllByRole:s8,queryAllByTestId:l8,queryAllByText:u8,queryAllByTitle:c8,queryByAltText:d8,queryByAttribute:p8,queryByDisplayValue:f8,queryByLabelText:m8,queryByPlaceholderText:h8,queryByRole:y8,queryByTestId:b8,queryByText:g8,queryByTitle:v8,queryHelpers:E8,screen:_8,waitFor:R8,waitForElementToBeRemoved:w8,within:tn,prettyFormat:C8}=_c,{userEvent:or}=xa({userEvent:$9},{intercept:!0}),{expect:Et}=xa({expect:VE},{getKeys:(e,t)=>{let r=["assert","__methods","__flags","_obj"];if(e.constructor===x){let n=Object.keys(Object.getPrototypeOf(e)).filter(o=>!r.includes(o));return t>2?n:[...n,"not"]}return Object.keys(e)},intercept:e=>e!=="expect"}),V9=({parameters:e})=>{e?.test?.mockReset===!0?y5():e?.test?.clearMocks===!0?h5():e?.test?.restoreMocks!==!1&&b5()},Rc=(e,t=0,r)=>{if(t>5||e==null)return e;if(jE(e))return r&&e.mockName(r),e;if(typeof e=="function"&&"isAction"in e&&e.isAction&&!("implicit"in e&&e.implicit)){let n=f5(e);return r&&n.mockName(r),n}if(Array.isArray(e)){t++;for(let n=0;n<e.length;n++)e[n]=Rc(e[n],t)}if(typeof e=="object"&&e.constructor===Object){t++;for(let[n,o]of Object.entries(e))Object.getOwnPropertyDescriptor(e,n)?.writable&&(e[n]=Rc(o,t,n));return e}return e},z9=({initialArgs:e})=>{Rc(e)},G9=e=>{globalThis.HTMLElement&&e.canvasElement instanceof globalThis.HTMLElement&&(e.canvas=tn(e.canvasElement))};Ie.__STORYBOOK_TEST_LOADERS__=[V9,z9,G9];Ie.__STORYBOOK_TEST_ON_MOCK_CALL__=p5;var Bt=on(Gd(),1);var Wd=on(gs(),1),Jo=on(Gd(),1),st=on(Yd(),1);var Ui=window.React;function re(e,t,r){let{children:n,...o}=t||{};return r!==void 0&&(o.key=r),n===void 0?Ui.createElement(e,o):Array.isArray(n)?Ui.createElement(e,o,...n):Ui.createElement(e,o,n)}var Tz=Ui.Fragment;var Q1=["Joshua Tree","Mojave Preserve","Death Valley","Joshua Tree"],Z1=["Chase","Visitor fee","Camp store","Unassigned"],qt=Array.from({length:40},(e,t)=>({id:`fee-${t+1}`,date:`2026-10-${String(t%27+1).padStart(2,"0")}`,party:Z1[t%Z1.length]??"Chase",memo:t%5===0?"entrance fee":"reservation",park:Q1[t%Q1.length]??"Joshua Tree",amount:t%7===0?"-12.00":(8+t%9+t/100).toFixed(2),status:t%3===0?"posted":"for_review"})),eR=(0,st.defineColumns)([{id:"date",header:"Date",value:e=>e.date,kind:"date",sortable:!0,width:"min"},{id:"party",header:"Party / description",value:e=>e.party,searchable:e=>[e.memo,e.id],rowHeader:!0,sortable:!0},{id:"park",header:"Park",value:e=>e.park,searchable:!0,filter:{kind:"multi-select",label:"Park"}},{id:"amount",header:"Amount",value:e=>e.amount,kind:"money",currency:"USD",negative:"parens",sortable:!0,total:"sum",width:"min"},{id:"status",header:"Status",value:e=>e.status,filter:{kind:"tabs",options:[{value:"",label:"All",all:!0},{value:"for_review",label:"For Review"},{value:"posted",label:"Posted"}]},cell:e=>re(Jo.Badge,{status:e.status==="posted"?"success":"warning",children:e.status==="posted"?"Posted":"For Review"})}]);function tR({rows:e=qt,pageSize:t=10,canSelect:r,groupBy:n,showSort:o,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,activeRowId:d,onRowActivate:m,rowActions:p,getSubRows:h,initialFilters:g,getRowHref:y,totalStyle:b}){let
|
|
471
|
+
`),Reflect.get(e,t,r)}});var{buildQueries:lV,configure:uV,createEvent:cV,fireEvent:dV,findAllByAltText:pV,findAllByDisplayValue:fV,findAllByLabelText:mV,findAllByPlaceholderText:hV,findAllByRole:yV,findAllByTestId:bV,findAllByText:gV,findAllByTitle:vV,findByAltText:EV,findByDisplayValue:_V,findByLabelText:RV,findByPlaceholderText:wV,findByRole:CV,findByTestId:SV,findByText:AV,findByTitle:TV,getAllByAltText:PV,getAllByDisplayValue:OV,getAllByLabelText:qV,getAllByPlaceholderText:xV,getAllByRole:MV,getAllByTestId:NV,getAllByText:jV,getAllByTitle:IV,getByAltText:DV,getByDisplayValue:FV,getByLabelText:LV,getByPlaceholderText:BV,getByRole:kV,getByTestId:$V,getByText:UV,getByTitle:HV,getConfig:VV,getDefaultNormalizer:zV,getElementError:GV,getNodeText:YV,getQueriesForElement:WV,getRoles:KV,getSuggestedQuery:XV,isInaccessible:JV,logDOM:QV,logRoles:ZV,prettyDOM:e8,queries:t8,queryAllByAltText:r8,queryAllByAttribute:n8,queryAllByDisplayValue:o8,queryAllByLabelText:a8,queryAllByPlaceholderText:i8,queryAllByRole:s8,queryAllByTestId:l8,queryAllByText:u8,queryAllByTitle:c8,queryByAltText:d8,queryByAttribute:p8,queryByDisplayValue:f8,queryByLabelText:m8,queryByPlaceholderText:h8,queryByRole:y8,queryByTestId:b8,queryByText:g8,queryByTitle:v8,queryHelpers:E8,screen:_8,waitFor:R8,waitForElementToBeRemoved:w8,within:tn,prettyFormat:C8}=_c,{userEvent:or}=xa({userEvent:$9},{intercept:!0}),{expect:Et}=xa({expect:VE},{getKeys:(e,t)=>{let r=["assert","__methods","__flags","_obj"];if(e.constructor===x){let n=Object.keys(Object.getPrototypeOf(e)).filter(o=>!r.includes(o));return t>2?n:[...n,"not"]}return Object.keys(e)},intercept:e=>e!=="expect"}),V9=({parameters:e})=>{e?.test?.mockReset===!0?y5():e?.test?.clearMocks===!0?h5():e?.test?.restoreMocks!==!1&&b5()},Rc=(e,t=0,r)=>{if(t>5||e==null)return e;if(jE(e))return r&&e.mockName(r),e;if(typeof e=="function"&&"isAction"in e&&e.isAction&&!("implicit"in e&&e.implicit)){let n=f5(e);return r&&n.mockName(r),n}if(Array.isArray(e)){t++;for(let n=0;n<e.length;n++)e[n]=Rc(e[n],t)}if(typeof e=="object"&&e.constructor===Object){t++;for(let[n,o]of Object.entries(e))Object.getOwnPropertyDescriptor(e,n)?.writable&&(e[n]=Rc(o,t,n));return e}return e},z9=({initialArgs:e})=>{Rc(e)},G9=e=>{globalThis.HTMLElement&&e.canvasElement instanceof globalThis.HTMLElement&&(e.canvas=tn(e.canvasElement))};Ie.__STORYBOOK_TEST_LOADERS__=[V9,z9,G9];Ie.__STORYBOOK_TEST_ON_MOCK_CALL__=p5;var Bt=on(Gd(),1);var Wd=on(gs(),1),Jo=on(Gd(),1),st=on(Yd(),1);var Ui=window.React;function re(e,t,r){let{children:n,...o}=t||{};return r!==void 0&&(o.key=r),n===void 0?Ui.createElement(e,o):Array.isArray(n)?Ui.createElement(e,o,...n):Ui.createElement(e,o,n)}var Tz=Ui.Fragment;var Q1=["Joshua Tree","Mojave Preserve","Death Valley","Joshua Tree"],Z1=["Chase","Visitor fee","Camp store","Unassigned"],qt=Array.from({length:40},(e,t)=>({id:`fee-${t+1}`,date:`2026-10-${String(t%27+1).padStart(2,"0")}`,party:Z1[t%Z1.length]??"Chase",memo:t%5===0?"entrance fee":"reservation",park:Q1[t%Q1.length]??"Joshua Tree",amount:t%7===0?"-12.00":(8+t%9+t/100).toFixed(2),status:t%3===0?"posted":"for_review"})),eR=(0,st.defineColumns)([{id:"date",header:"Date",value:e=>e.date,kind:"date",sortable:!0,width:"min"},{id:"party",header:"Party / description",value:e=>e.party,searchable:e=>[e.memo,e.id],rowHeader:!0,sortable:!0},{id:"park",header:"Park",value:e=>e.park,searchable:!0,filter:{kind:"multi-select",label:"Park"}},{id:"amount",header:"Amount",value:e=>e.amount,kind:"money",currency:"USD",negative:"parens",sortable:!0,total:"sum",width:"min"},{id:"status",header:"Status",value:e=>e.status,filter:{kind:"tabs",options:[{value:"",label:"All",all:!0},{value:"for_review",label:"For Review"},{value:"posted",label:"Posted"}]},cell:e=>re(Jo.Badge,{status:e.status==="posted"?"success":"warning",children:e.status==="posted"?"Posted":"For Review"})}]);function tR({rows:e=qt,pageSize:t=10,canSelect:r,groupBy:n,showSort:o,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,activeRowId:d,onRowActivate:m,rowActions:p,getSubRows:h,initialFilters:g,getRowHref:y,totalStyle:b,headerStyle:v}){let C=(0,Wd.useMemo)(()=>eR,[]),S=(0,st.useCollection)({rows:e,columns:C,getRowId:A=>A.id,pageSize:t,initialSort:{id:"date",desc:!0},initialFilters:g??{status:"for_review"},canSelect:r,groupBy:n,getSubRows:h});return re("div",{children:[re(st.CollectionToolbar,{collection:S,searchLabel:"Find fee",showSort:o,actions:re(Jo.Button,{emphasis:"standard",children:"Add fee"}),bulkActions:re(Jo.Button,{emphasis:"standard",children:"Post selected"})}),re(st.DataTable,{collection:S,label:"Park fees",onRowActivate:m,getRowHref:y,activeRowId:d,rowActions:p,empty:a,loading:i,stickyHeader:s,stickyRowHeader:l,narrow:c,size:u,totalStyle:b,headerStyle:v}),t?re(st.CollectionPagination,{page:S.page,pageCount:S.pageCount,pageSize:S.pageSize,total:S.filteredCount,filtered:S.isFiltered,label:"Park fees",onPageChange:S.setPage}):null]})}function Pr({rows:e=qt,extra:t,groupBy:r}){let n=(0,Wd.useMemo)(()=>eR,[]),o=(0,st.useCollection)({rows:e,columns:n,getRowId:a=>a.id,initialSort:{id:"date",desc:!0},initialFilters:{status:"for_review"},canSelect:a=>a.status==="for_review",groupBy:r});return re("div",{children:[re(st.CollectionToolbar,{collection:o,searchLabel:"Find fee",showSort:!0}),re(st.DataList,{collection:o,label:"For Review",onRowActivate:()=>{},renderItemExtra:t?()=>re("span",{"data-subtle":"",children:"Inline review"}):void 0})]})}async function Kd({canvasElement:e}){let t=tn(e),r=t.getByRole("searchbox",{name:"Find fee"});await Et(t.queryByRole("button",{name:"Clear search"})).toBeNull(),r.focus(),await or.keyboard("zzz"),await Et(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters");let n=await t.findByRole("button",{name:"Clear search"});await or.tab(),await Et(n).toHaveFocus(),await or.keyboard("{Enter}"),await Et(r).toHaveValue(""),await Et(r).toHaveFocus(),await Et(t.queryByRole("button",{name:"Clear search"})).toBeNull(),await or.keyboard("chase"),await or.keyboard("{Escape}"),await Et(r).toHaveValue("")}async function rR({canvasElement:e}){let t=tn(e);await Et(await t.findByRole("button",{name:"Clear filters"})).toBeTruthy(),await Et(e.querySelector(".CollectionToolbar")?.textContent).not.toContain("Clear filters")}var ar=on(Yd(),1);var Y9={title:"Components/Lib/DataList",parameters:{layout:"padded"},tags:["autodocs"]},Xd=Y9,W9={render:()=>re("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[re(tR,{pageSize:5}),re(Pr,{rows:qt.slice(0,8)})]})},K9={render:()=>re(e6,{})};function X9(){let[e,t]=(0,nR.useState)(0);return re("div",{children:[re("output",{"data-testid":"activated",children:e}),re(J9,{onActivate:()=>t(r=>r+1)})]})}function J9({onActivate:e}){let t=(0,ar.defineColumns)([{id:"party",header:"Party",value:n=>n.party,rowHeader:!0}]),r=(0,ar.useCollection)({rows:qt.slice(0,3),columns:t,getRowId:n=>n.id});return re(ar.DataList,{collection:r,label:"For Review",onRowActivate:e,renderItemExtra:()=>re("span",{children:"Plain note"})})}var Q9={render:()=>re(X9,{}),play:async({canvasElement:e})=>{let t=tn(e);await or.click(t.getByText("Plain note")),await Et(t.getByTestId("activated").textContent).toBe("0")}},Z9={render:()=>re(Pr,{rows:qt.slice(0,6)}),play:async({canvasElement:e})=>{let t=tn(e);await or.click(t.getByRole("button",{name:/Sort direction/}))}};function e6(){let e=(0,ar.defineColumns)([{id:"party",header:"Party",value:r=>r.party,rowHeader:!0,searchable:!0},{id:"amount",header:"Amount",value:r=>r.amount,kind:"money",currency:"USD"},{id:"status",header:"Status",value:r=>r.status,filter:{kind:"tabs",options:[{value:"for_review",label:"For Review"}]}}]),t=(0,ar.useCollection)({rows:qt.slice(0,6),columns:e,getRowId:r=>r.id,initialFilters:{status:"for_review"}});return re(ar.DataList,{collection:t,label:"For Review",onRowActivate:()=>{},renderItemExtra:()=>re(Bt.Select.Root,{items:[{value:"fees",label:"Fees"}],defaultValue:"fees",children:[re(Bt.Select.Trigger,{"aria-label":"Account",children:[re(Bt.Select.Value,{}),re(Bt.Select.Icon,{children:re("span",{className:"material-symbols-outlined",children:"expand_more"})})]}),re(Bt.Select.Portal,{children:re(Bt.Select.Positioner,{children:re(Bt.Select.Popup,{children:re(Bt.Select.List,{children:re(Bt.Select.Item,{value:"fees",children:"Fees"})})})})})]})})}var t6={render:()=>re(Pr,{rows:qt.slice(0,8),groupBy:"park"})},r6={render:()=>re(Pr,{rows:[]})},n6={render:()=>re(Pr,{rows:qt.slice(0,1).map(e=>({...e,party:"Posted only",status:"posted"}))}),play:rR},o6={render:()=>re(Pr,{rows:qt.slice(0,8)}),play:Kd},a6={render:()=>re("div",{style:{width:280},children:re(Pr,{rows:qt.slice(0,4)})}),play:Kd};var rn=window.React,oR=Xd||{},i6=["BesideTheTable","ReviewQueue","ExtraDoesNotActivate","Sort"];function s6({id:e}){let t=Jd[e],r={...oR.args||{},...t.args||{}};return(t.render||(o=>rn.createElement(oR.component,o)))(r,{args:r,id:e,name:e})}var l6=i6.map(e=>rn.createElement("section",{key:e,className:"ds-story"},rn.createElement("p",{className:"ds-story-name"},e.replace(/([a-z])([A-Z])/g,"$1 $2")),rn.createElement("div",{className:"ds-story-body"},rn.createElement(s6,{id:e}))));window.ReactDOM.createRoot(document.getElementById("root")).render(rn.createElement(rn.Fragment,null,l6));})();
|
|
472
472
|
|
|
473
473
|
</script>
|
|
474
474
|
</body>
|