@okta/odyssey-react-mui 1.45.0 → 1.47.1

package/dist/assets/DataView _labs_.stories-CusuCHkc.js

@@ -1,438 +0,0 @@
-import{j as a}from"./jsx-runtime-CnH95YSl.js";import{a as ta}from"./index-B885ELRa.js";import{f as na}from"./index-BJMTVygn.js";import{r as t}from"./index-NdkWRN8K.js";import{d as m,c as p,f as oa,r as sa}from"./personData-Ci-ru1S9.js";import{d as ra,a as _,M as c}from"./DataView-BQBP0FCs.js";import{p as ia}from"./constants-CyailK6t.js";import{M as la,a as ua}from"./Refresh-CPgGX1hz.js";import{M as b}from"./Box-BXOPvc0Q.js";import{M as H}from"./EmptyState-DQoihCwU.js";import{M as u}from"./Button-BOzIr8Jh.js";import{M as R}from"./MenuItem-CuP47MJ-.js";import{M as ca}from"./Status-BYBMXN_H.js";const da={component:c,argTypes:{getData:{table:{type:{summary:""}}},getRowId:{table:{type:{summary:""}}},hasRowReordering:{control:"boolean",table:{type:{summary:""}}},isRowReorderingDisabled:{control:"boolean"},onReorderRows:{table:{type:{summary:""}}},hasRowSelection:{control:"boolean"},onChangeRowSelection:{},bulkActionMenuItems:{},hasPagination:{control:"boolean"},currentPage:{control:"number"},metaText:{control:"text"},paginationType:{control:"select",options:ia},resultsPerPage:{control:"number"},totalRows:{control:"number"},hasFilters:{control:"boolean"},hasSearch:{control:"boolean"},hasSearchSubmitButton:{control:"boolean"},filters:{},searchDelayTime:{control:"number"},enableVirtualization:{control:"boolean"},errorMessage:{control:"text"},emptyPlaceholder:{},noResultsPlaceholder:{},initialLayout:{control:"select",options:_},availableLayouts:{control:"check",options:_},columns:{name:"tableLayoutOptions.columns"},initialDensity:{control:"select",options:ra,name:"tableLayoutOptions.columns"},hasChangeableDensity:{control:"boolean",name:"tableLayoutOptions.hasChangeableDensity"},hasColumnResizing:{control:"boolean",name:"tableLayoutOptions.hasColumnResizing"},hasColumnVisibility:{control:"boolean",name:"tableLayoutOptions.hasColumnVisibility"},renderDetailPanel:{name:"tableLayoutOptions.renderDetailPanel"},rowActionButtons:{name:"tableLayoutOptions.rowActionButtons"},tableRowActionMenuItems:{name:"tableLayoutOptions.rowActionMenuItems"},hasSorting:{control:"boolean",name:"tableLayoutOptions.hasSorting"},itemProps:{name:"cardLayoutOptions.itemProps"},maxGridColumns:{control:"number",name:"cardLayoutOptions.maxGridColumns"},cardRowActionMenuItems:{name:"cardLayoutOptions.rowActionMenuItems"},isLoading:{control:"boolean"},isEmpty:{control:"boolean"},isNoResults:{control:"boolean"},isPaginationMoreDisabled:{control:"boolean",description:"If true, the pagination next or show more button will be disabled.",table:{type:{summary:"boolean"}}},hasCustomEmptyPlaceholder:{control:"boolean",name:"[STORY ONLY] Has custom empty placeholder?"},hasCustomNoResultsPlaceholder:{control:"boolean",name:"[STORY ONLY] Has custom 'no results' placeholder?"},hasActionMenuItems:{control:"boolean",name:"[STORY ONLY] Has action menu items?"},hasActionButtons:{control:"boolean",name:"[STORY ONLY] Has action buttons in table view?"},hasAdditionalActionButton:{control:"boolean",name:"[STORY ONLY] Has additional action button?"},hasAdditionalActionMenuItems:{control:"boolean",name:"[STORY ONLY] Has additional action menu items?"}},args:{availableLayouts:["table","list","grid"],currentPage:1,hasActionButtons:!1,hasActionMenuItems:!1,hasCustomEmptyPlaceholder:!1,hasCustomNoResultsPlaceholder:!1,maxGridColumns:3,onChangeRowSelection:na(),paginationType:"paged",resultsPerPage:20},render:function(e){const[o,s]=t.useState(m),{getData:r,onReorderRows:i,onChangeRowSelection:l}=h(o,s);return a.jsx(c,{additionalActionButton:e.hasAdditionalActionButton?pa:void 0,additionalActionMenuItems:e.hasAdditionalActionMenuItems?ga:void 0,availableLayouts:e.availableLayouts,bulkActionMenuItems:e.hasActionMenuItems?G:void 0,cardLayoutOptions:{itemProps:aa,rowActionMenuItems:e.hasActionMenuItems?G:void 0,maxGridColumns:e.maxGridColumns},currentPage:e.currentPage,emptyPlaceholder:e.hasCustomEmptyPlaceholder?ba:void 0,enableVirtualization:e.enableVirtualization,errorMessage:e.errorMessage,getData:r,hasFilters:e.hasFilters,hasPagination:e.hasPagination,hasRowReordering:e.hasRowReordering,hasRowSelection:e.hasRowSelection,hasSearch:e.hasSearch,hasSearchSubmitButton:e.hasSearchSubmitButton,initialLayout:e.initialLayout,isEmpty:e.isEmpty,isLoading:e.isLoading,isNoResults:e.isNoResults,isPaginationMoreDisabled:e.isPaginationMoreDisabled,isRowReorderingDisabled:e.isRowReorderingDisabled,metaText:e.metaText,noResultsPlaceholder:e.hasCustomNoResultsPlaceholder?Ca:void 0,onChangeRowSelection:l,onReorderRows:i,paginationType:e.paginationType,resultsPerPage:e.resultsPerPage,searchDelayTime:e.searchDelayTime,tableLayoutOptions:{columns:p,hasSorting:e.hasSorting,rowActionMenuItems:e.hasActionMenuItems?G:void 0,rowActionButtons:e.hasActionButtons?ya:void 0,renderDetailPanel:void 0,hasColumnVisibility:e.hasColumnVisibility,hasColumnResizing:e.hasColumnResizing,hasChangeableDensity:e.hasChangeableDensity,initialDensity:e.initialDensity},totalRows:e.totalRows})}},D=ta("onClick"),Y=["table"],q=["list"],ma=["grid"],ha=["table","grid"],h=(n,e)=>{const o=t.useCallback(({...i})=>oa({data:n,...i}),[n]),s=t.useCallback(({...i})=>{const l=sa({data:n,...i});e(l)},[n,e]),r=t.useCallback(i=>{Object.keys(i).length>0&&console.log(`${Object.keys(i).length} selected`)},[]);return{getData:o,onReorderRows:s,onChangeRowSelection:r}},pa=a.jsx(u,{label:"Add widget",variant:"primary"}),ga=a.jsxs(a.Fragment,{children:[a.jsx(R,{onClick:D,children:"Additional action 1"}),a.jsx(R,{onClick:D,children:"Additional action 2"})]}),G=()=>a.jsxs(a.Fragment,{children:[a.jsx(R,{onClick:D,children:"Action 1"}),a.jsx(R,{onClick:D,children:"Action 2"})]}),ya=()=>a.jsxs(b,{sx:{display:"flex",alignItems:"center",marginInlineEnd:2},children:[a.jsx(u,{ariaLabel:"Pause",endIcon:a.jsx(la,{}),onClick:D,size:"small",variant:"floating"}),a.jsx(u,{ariaLabel:"Refresh",endIcon:a.jsx(ua,{}),onClick:D,size:"small",variant:"floating"})]}),ba=a.jsx(H,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:a.jsx(u,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:a.jsx(u,{label:"Secondary",variant:"secondary"})}),Ca=a.jsx(H,{description:"You should try searching or filtering for something else.",heading:"Whoops, there's nothing here!"}),aa=n=>({overline:`${n.city}, ${n.state}`,title:n.name,description:`${n.name} is ${n.age} years old.`,children:a.jsx(ca,{label:n.risk.charAt(0).toUpperCase()+n.risk.slice(1),severity:n.risk==="low"?"success":n.risk==="medium"?"warning":"error"})}),S={args:{}},P={args:{availableLayouts:Y}},x={args:{availableLayouts:["list","grid"]}},A={args:{availableLayouts:q}},v={args:{availableLayouts:ma}},O={args:{hasRowReordering:!0,hasPagination:!0,hasFilters:!0,hasSearch:!0,hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!0,hasSorting:!0,hasActionButtons:!0,hasActionMenuItems:!0,hasRowSelection:!0,hasAdditionalActionButton:!0,hasAdditionalActionMenuItems:!0,metaText:"Last updated 12 hours ago"}},M={render:function(e){const[o,s]=t.useState(m),{getData:r,onReorderRows:i,onChangeRowSelection:l}=h(o,s),d=t.useCallback(({row:y})=>a.jsxs(b,{children:["This is additional content for row ",y.id]}),[]),g=t.useMemo(()=>({columns:p,renderDetailPanel:d}),[d]);return a.jsx(c,{availableLayouts:ha,cardLayoutOptions:{itemProps:aa,renderDetailPanel:d},getData:r,hasRowSelection:e.hasRowSelection,onChangeRowSelection:l,onReorderRows:i,tableLayoutOptions:g})}},I={render:function(){const e=t.useCallback(()=>{const s=[];return Array(10).fill(null).forEach(()=>{s.push({truncated:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum.",wrapped:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum."})}),s},[]),o=t.useMemo(()=>({columns:[{accessorKey:"truncated",header:"Truncated"},{accessorKey:"wrapped",header:"Wrapped",hasTextWrapping:!0}],hasColumnResizing:!0}),[]);return a.jsx(c,{getData:e,tableLayoutOptions:o})}},k={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r,...i}){const[l,d]=t.useState(m),{onReorderRows:g,onChangeRowSelection:y}=h(l,d),C=t.useMemo(()=>a.jsx(H,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:a.jsx(u,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:a.jsx(u,{label:"Secondary",variant:"secondary"})}),[]),f=t.useMemo(()=>({columns:p,hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r}),[e,o,s,r]);return a.jsx(c,{...i,emptyPlaceholder:C,getData:()=>[],onChangeRowSelection:y,onReorderRows:g,tableLayoutOptions:f})}},j={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!1,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r,...i}){const[l,d]=t.useState(m),{getData:g,onReorderRows:y}=h(l,d),C=t.useMemo(()=>[...p,{id:"startLetter",label:"Name starting with...",render:L=>a.jsxs(b,{sx:{display:"flex",flexDirection:"column",alignContent:"stretch",gap:2},children:[a.jsx(b,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(u,{isFullWidth:!0,label:"Vowel",onClick:()=>L({filterId:"startLetter",value:"vowel"}),variant:"secondary"})}),a.jsx(b,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(u,{isFullWidth:!0,label:"Consonant",onClick:()=>L({filterId:"startLetter",value:"consonant"}),variant:"secondary"})}),a.jsx(b,{sx:{display:"flex",alignItems:"stretch",flexDirection:"column"},children:a.jsx(u,{isFullWidth:!0,label:"Any",onClick:()=>L({filterId:"startLetter",value:"any"}),variant:"secondary"})})]})}],[]),f=t.useMemo(()=>({columns:p,hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r}),[e,o,s,r]);return a.jsx(c,{...i,filters:C,getData:g,onReorderRows:y,tableLayoutOptions:f})}},V={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!0,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r,...i}){const[l,d]=t.useState(m),{getData:g,onReorderRows:y,onChangeRowSelection:C}=h(l,d),f=t.useMemo(()=>[...p.filter(w=>w.id!=="visit"),{id:"startLetter",label:"Starting letter ",render:w=>a.jsxs(b,{children:[a.jsx(u,{label:"🛰️ Vowel",onClick:()=>w({filterId:"startLetter",value:"vowel"}),variant:"secondary"}),a.jsx(u,{label:"🛸 Consonant",onClick:()=>w({filterId:"startLetter",value:"consonant"}),variant:"secondary"}),a.jsx(u,{label:"🤷‍♂️ Any",onClick:()=>w({filterId:"startLetter",value:""}),variant:"secondary"})]})}],[]),L=t.useMemo(()=>({columns:p,hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r}),[e,o,s,r]);return a.jsx(c,{...i,filters:f,getData:g,onChangeRowSelection:C,onReorderRows:y,tableLayoutOptions:L})}},T={args:{hasChangeableDensity:!0,hasColumnResizing:!0,hasColumnVisibility:!1,hasFilters:!0,hasPagination:!1,hasRowSelection:!1,hasSearch:!0,hasSorting:!0,hasRowReordering:!1},render:function({hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r,...i}){const[l,d]=t.useState(m),{getData:g}=h(l,d),y=t.useMemo(()=>[...p,{id:"startLetter",label:"Starting letter",variant:"select",options:[{label:"Vowel",value:"vowel"},{label:"Consonant",value:"consonant"}]}],[]),C=t.useMemo(()=>({columns:p,hasChangeableDensity:e,hasColumnResizing:o,hasColumnVisibility:s,hasSorting:r}),[e,o,s,r]);return a.jsx(c,{...i,filters:y,getData:g,tableLayoutOptions:C})}},z={args:{hasAdditionalActionButton:!0,hasAdditionalActionMenuItems:!0}},B={render:function(){const e=t.useCallback(()=>[{name:"Core engineering access",apps:5,users:10},{name:"Core sales access",apps:8,users:28},{name:"Super user access",apps:3,users:1}],[]),o=t.useMemo(()=>({hasColumnResizing:!0,hasSorting:!0,columns:[{accessorKey:"name",header:"Name",grow:!0},{accessorKey:"apps",header:"Apps"},{accessorKey:"users",header:"Users assigned"}],rowActionMenuItems:G}),[]);return a.jsx(c,{getData:e,hasSearch:!0,tableLayoutOptions:o})}},F={args:{availableLayouts:Y,hasPagination:!0,paginationType:"loadMore",hasFilters:!0}},K={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useCallback(l=>{console.log(l)},[]),i=t.useMemo(()=>({columns:p}),[]);return a.jsx(c,{getData:s,hasPagination:!0,onPaginationChange:r,tableLayoutOptions:i})}},Da=n=>({overline:"Overline",title:n.name,description:`${n.name} is ${n.age} years old.`,variant:"stack",image:a.jsx("img",{alt:"Logo",src:"https://placehold.co/400"})}),E={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useMemo(()=>({itemProps:Da,renderDetailPanel:()=>a.jsx(b,{children:"Details"}),rowActionMenuItems:()=>a.jsx(R,{children:"Test"})}),[]);return a.jsx(c,{availableLayouts:q,cardLayoutOptions:r,getData:s})}},Ra=n=>({title:n.name,variant:"compact",image:a.jsx("img",{alt:"Logo",src:"https://placehold.co/400"})}),N={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useCallback(({row:d})=>d.age%2?a.jsx(b,{children:"Detail content"}):!1,[]),i=t.useCallback(()=>a.jsx(R,{children:"Test"}),[]),l=t.useMemo(()=>({itemProps:Ra,renderDetailPanel:r,rowActionMenuItems:i}),[r,i]);return a.jsx(c,{availableLayouts:q,cardLayoutOptions:l,getData:s})}},W={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useMemo(()=>({columns:[{accessorKey:"order",header:"ID",enableColumnFilter:!1,grow:!0},{accessorKey:"name",header:"Name"},{accessorKey:"city",header:"City"}],hasColumnResizing:!0}),[]);return a.jsx(c,{availableLayouts:Y,getData:s,tableLayoutOptions:r})}},$={render:function(){const[e,o]=t.useState(m),{getData:s}=h(e,o),r=t.useCallback(()=>a.jsx(u,{label:"Action",onClick:D,size:"small",variant:"secondary"}),[]),i=t.useMemo(()=>({columns:[{accessorKey:"order",header:"ID",enableColumnFilter:!1,grow:!0},{accessorKey:"name",header:"Name"},{accessorKey:"city",header:"City"}],hasColumnResizing:!0,rowActionButtons:r}),[r]);return a.jsx(c,{availableLayouts:Y,getData:s,tableLayoutOptions:i})}};var U,J,Q;S.parameters={...S.parameters,docs:{...(U=S.parameters)==null?void 0:U.docs,source:{originalSource:`{
-  args: {}
-}`,...(Q=(J=S.parameters)==null?void 0:J.docs)==null?void 0:Q.source}}};var X,Z,ee;P.parameters={...P.parameters,docs:{...(X=P.parameters)==null?void 0:X.docs,source:{originalSource:`{
-  args: {
-    availableLayouts: tableLayoutOnly
-  }
-}`,...(ee=(Z=P.parameters)==null?void 0:Z.docs)==null?void 0:ee.source}}};var ae,te,ne;x.parameters={...x.parameters,docs:{...(ae=x.parameters)==null?void 0:ae.docs,source:{originalSource:`{
-  args: {
-    availableLayouts: ["list", "grid"]
-  }
-}`,...(ne=(te=x.parameters)==null?void 0:te.docs)==null?void 0:ne.source}}};var oe,se,re;A.parameters={...A.parameters,docs:{...(oe=A.parameters)==null?void 0:oe.docs,source:{originalSource:`{
-  args: {
-    availableLayouts: listLayoutOnly
-  }
-}`,...(re=(se=A.parameters)==null?void 0:se.docs)==null?void 0:re.source}}};var ie,le,ue;v.parameters={...v.parameters,docs:{...(ie=v.parameters)==null?void 0:ie.docs,source:{originalSource:`{
-  args: {
-    availableLayouts: gridLayoutOnly
-  }
-}`,...(ue=(le=v.parameters)==null?void 0:le.docs)==null?void 0:ue.source}}};var ce,de,me;O.parameters={...O.parameters,docs:{...(ce=O.parameters)==null?void 0:ce.docs,source:{originalSource:`{
-  args: {
-    hasRowReordering: true,
-    hasPagination: true,
-    hasFilters: true,
-    hasSearch: true,
-    hasChangeableDensity: true,
-    hasColumnResizing: true,
-    hasColumnVisibility: true,
-    hasSorting: true,
-    hasActionButtons: true,
-    hasActionMenuItems: true,
-    hasRowSelection: true,
-    hasAdditionalActionButton: true,
-    hasAdditionalActionMenuItems: true,
-    metaText: "Last updated 12 hours ago"
-  }
-}`,...(me=(de=O.parameters)==null?void 0:de.docs)==null?void 0:me.source}}};var he,pe,ge;M.parameters={...M.parameters,docs:{...(he=M.parameters)==null?void 0:he.docs,source:{originalSource:`{
-  render: function C(args) {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData,
-      onReorderRows,
-      onChangeRowSelection
-    } = useDataCallbacks(data, setData);
-    const renderAdditionalContent = useCallback(({
-      row
-    }: {
-      row: DataTableRowData;
-    }) => {
-      return <Box>This is additional content for row {row.id}</Box>;
-    }, []);
-    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
-      columns: personColumns,
-      renderDetailPanel: renderAdditionalContent
-    }), [renderAdditionalContent]);
-    return <DataView availableLayouts={tableAndGridLayouts} cardLayoutOptions={{
-      itemProps: itemProps,
-      renderDetailPanel: renderAdditionalContent
-    }} getData={getData} hasRowSelection={args.hasRowSelection} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(ge=(pe=M.parameters)==null?void 0:pe.docs)==null?void 0:ge.source}}};var ye,be,Ce;I.parameters={...I.parameters,docs:{...(ye=I.parameters)==null?void 0:ye.docs,source:{originalSource:`{
-  render: function C() {
-    const getData = useCallback(() => {
-      const data: Array<{
-        truncated: string;
-        wrapped: string;
-      }> = [];
-      Array(10).fill(null).forEach(() => {
-        data.push({
-          truncated: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum.",
-          wrapped: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla a quam et vulputate. Phasellus elementum turpis a lacus feugiat bibendum."
-        });
-      }); // Corrected the missing parenthesis here
-      return data;
-    }, []);
-    const tableLayoutOptions = useMemo(() => ({
-      columns: [{
-        accessorKey: "truncated",
-        header: "Truncated"
-      }, {
-        accessorKey: "wrapped",
-        header: "Wrapped",
-        hasTextWrapping: true
-      }],
-      hasColumnResizing: true
-    }), []);
-    return <DataView getData={getData} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(Ce=(be=I.parameters)==null?void 0:be.docs)==null?void 0:Ce.source}}};var De,Re,fe;k.parameters={...k.parameters,docs:{...(De=k.parameters)==null?void 0:De.docs,source:{originalSource:`{
-  args: {
-    hasChangeableDensity: true,
-    hasColumnResizing: true,
-    hasColumnVisibility: false,
-    hasFilters: true,
-    hasPagination: false,
-    hasRowSelection: true,
-    hasSearch: true,
-    hasSorting: true,
-    hasRowReordering: false
-  },
-  render: function C({
-    hasChangeableDensity,
-    hasColumnResizing,
-    hasColumnVisibility,
-    hasSorting,
-    ...props
-  }) {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      onReorderRows,
-      onChangeRowSelection
-    } = useDataCallbacks(data, setData);
-    const emptyPlaceholder = useMemo(() => <EmptyState description="All relevant data will be displayed and can be searched and filtered" heading="Start by adding data assets" PrimaryCallToActionComponent={<Button label="Primary" variant="primary" />} SecondaryCallToActionComponent={<Button label="Secondary" variant="secondary" />} />, []);
-    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
-      columns: personColumns,
-      hasChangeableDensity: hasChangeableDensity,
-      hasColumnResizing: hasColumnResizing,
-      hasColumnVisibility: hasColumnVisibility,
-      hasSorting: hasSorting
-    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
-    return <DataView {...props} emptyPlaceholder={emptyPlaceholder} getData={() => []} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(fe=(Re=k.parameters)==null?void 0:Re.docs)==null?void 0:fe.source}}};var Le,we,Se;j.parameters={...j.parameters,docs:{...(Le=j.parameters)==null?void 0:Le.docs,source:{originalSource:`{
-  args: {
-    hasChangeableDensity: true,
-    hasColumnResizing: true,
-    hasColumnVisibility: false,
-    hasFilters: true,
-    hasPagination: false,
-    hasRowSelection: false,
-    hasSearch: true,
-    hasSorting: true,
-    hasRowReordering: false
-  },
-  render: function C({
-    hasChangeableDensity,
-    hasColumnResizing,
-    hasColumnVisibility,
-    hasSorting,
-    ...props
-  }) {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData,
-      onReorderRows
-    } = useDataCallbacks(data, setData);
-    const filters = useMemo(() => [...personColumns, {
-      id: "startLetter",
-      label: "Name starting with...",
-      render: (updateFilters: UpdateFiltersOrValues) => <Box sx={{
-        display: "flex",
-        flexDirection: "column",
-        alignContent: "stretch",
-        gap: 2
-      }}>
-              <Box sx={{
-          display: "flex",
-          alignItems: "stretch",
-          flexDirection: "column"
-        }}>
-                <Button isFullWidth label="Vowel" onClick={() => updateFilters({
-            filterId: "startLetter",
-            value: "vowel"
-          })} variant="secondary" />
-              </Box>
-              <Box sx={{
-          display: "flex",
-          alignItems: "stretch",
-          flexDirection: "column"
-        }}>
-                <Button isFullWidth label="Consonant" onClick={() => updateFilters({
-            filterId: "startLetter",
-            value: "consonant"
-          })} variant="secondary" />
-              </Box>
-              <Box sx={{
-          display: "flex",
-          alignItems: "stretch",
-          flexDirection: "column"
-        }}>
-                <Button isFullWidth label="Any" onClick={() => updateFilters({
-            filterId: "startLetter",
-            value: "any"
-          })} variant="secondary" />
-              </Box>
-            </Box>
-    }], []);
-    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
-      columns: personColumns,
-      hasChangeableDensity: hasChangeableDensity,
-      hasColumnResizing: hasColumnResizing,
-      hasColumnVisibility: hasColumnVisibility,
-      hasSorting: hasSorting
-    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
-    return <DataView {...props} filters={filters} getData={getData} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(Se=(we=j.parameters)==null?void 0:we.docs)==null?void 0:Se.source}}};var Pe,xe,Ae;V.parameters={...V.parameters,docs:{...(Pe=V.parameters)==null?void 0:Pe.docs,source:{originalSource:`{
-  args: {
-    hasChangeableDensity: true,
-    hasColumnResizing: true,
-    hasColumnVisibility: false,
-    hasFilters: true,
-    hasPagination: false,
-    hasRowSelection: true,
-    hasSearch: true,
-    hasSorting: true,
-    hasRowReordering: false
-  },
-  render: function C({
-    hasChangeableDensity,
-    hasColumnResizing,
-    hasColumnVisibility,
-    hasSorting,
-    ...props
-  }) {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData,
-      onReorderRows,
-      onChangeRowSelection
-    } = useDataCallbacks(data, setData);
-    const filters = useMemo(() => {
-      // Filter out the column with the id of "type"
-      const filteredPersonColumns = personColumns.filter(column => column.id !== "visit");
-      return [...filteredPersonColumns, {
-        id: "startLetter",
-        label: "Starting letter ",
-        render: (updateFilters: UpdateFiltersOrValues) => <Box>
-              <Button label="🛰️ Vowel" onClick={() => updateFilters({
-            filterId: "startLetter",
-            value: "vowel"
-          })} variant="secondary" />
-              <Button label="🛸 Consonant" onClick={() => updateFilters({
-            filterId: "startLetter",
-            value: "consonant"
-          })} variant="secondary" />
-              <Button label="🤷‍♂️ Any" onClick={() => updateFilters({
-            filterId: "startLetter",
-            value: ""
-          })} variant="secondary" />
-            </Box>
-      }];
-    }, []);
-    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
-      columns: personColumns,
-      hasChangeableDensity: hasChangeableDensity,
-      hasColumnResizing: hasColumnResizing,
-      hasColumnVisibility: hasColumnVisibility,
-      hasSorting: hasSorting
-    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
-    return <DataView {...props} filters={filters} getData={getData} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(Ae=(xe=V.parameters)==null?void 0:xe.docs)==null?void 0:Ae.source}}};var ve,Oe,Me;T.parameters={...T.parameters,docs:{...(ve=T.parameters)==null?void 0:ve.docs,source:{originalSource:`{
-  args: {
-    hasChangeableDensity: true,
-    hasColumnResizing: true,
-    hasColumnVisibility: false,
-    hasFilters: true,
-    hasPagination: false,
-    hasRowSelection: false,
-    hasSearch: true,
-    hasSorting: true,
-    hasRowReordering: false
-  },
-  render: function C({
-    hasChangeableDensity,
-    hasColumnResizing,
-    hasColumnVisibility,
-    hasSorting,
-    ...props
-  }) {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData
-    } = useDataCallbacks(data, setData);
-    const filters = useMemo<DataViewMetaProps["filters"]>(() => {
-      return [...personColumns, {
-        id: "startLetter",
-        label: "Starting letter",
-        variant: "select",
-        options: [{
-          label: "Vowel",
-          value: "vowel"
-        }, {
-          label: "Consonant",
-          value: "consonant"
-        }]
-      }];
-    }, []);
-    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
-      columns: personColumns,
-      hasChangeableDensity: hasChangeableDensity,
-      hasColumnResizing: hasColumnResizing,
-      hasColumnVisibility: hasColumnVisibility,
-      hasSorting: hasSorting
-    }), [hasChangeableDensity, hasColumnResizing, hasColumnVisibility, hasSorting]);
-    return <DataView {...props} filters={filters} getData={getData} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(Me=(Oe=T.parameters)==null?void 0:Oe.docs)==null?void 0:Me.source}}};var Ie,ke,je;z.parameters={...z.parameters,docs:{...(Ie=z.parameters)==null?void 0:Ie.docs,source:{originalSource:`{
-  args: {
-    hasAdditionalActionButton: true,
-    hasAdditionalActionMenuItems: true
-  }
-}`,...(je=(ke=z.parameters)==null?void 0:ke.docs)==null?void 0:je.source}}};var Ve,Te,ze;B.parameters={...B.parameters,docs:{...(Ve=B.parameters)==null?void 0:Ve.docs,source:{originalSource:`{
-  render: function C() {
-    const getData = useCallback<() => Privilege[]>(() => [{
-      name: "Core engineering access",
-      apps: 5,
-      users: 10
-    }, {
-      name: "Core sales access",
-      apps: 8,
-      users: 28
-    }, {
-      name: "Super user access",
-      apps: 3,
-      users: 1
-    }], []);
-    const tableLayoutOptions = useMemo<TableLayoutProps<Privilege>>(() => ({
-      hasColumnResizing: true,
-      hasSorting: true,
-      columns: [{
-        accessorKey: "name",
-        header: "Name",
-        grow: true
-      }, {
-        accessorKey: "apps",
-        header: "Apps"
-      }, {
-        accessorKey: "users",
-        header: "Users assigned"
-      }],
-      rowActionMenuItems: actionMenuItems
-    }), []);
-    return <DataView getData={getData} hasSearch tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(ze=(Te=B.parameters)==null?void 0:Te.docs)==null?void 0:ze.source}}};var Be,Fe,Ke;F.parameters={...F.parameters,docs:{...(Be=F.parameters)==null?void 0:Be.docs,source:{originalSource:`{
-  args: {
-    availableLayouts: tableLayoutOnly,
-    hasPagination: true,
-    paginationType: "loadMore",
-    hasFilters: true
-  }
-}`,...(Ke=(Fe=F.parameters)==null?void 0:Fe.docs)==null?void 0:Ke.source}}};var Ee,Ne,We;K.parameters={...K.parameters,docs:{...(Ee=K.parameters)==null?void 0:Ee.docs,source:{originalSource:`{
-  render: function C() {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData
-    } = useDataCallbacks(data, setData);
-    const onPaginationChange = useCallback<Required<DataViewProps<Person>>["onPaginationChange"]>((pagination: {
-      pageIndex: number;
-      pageSize: number;
-    }) => {
-      console.log(pagination);
-    }, []);
-    const tableLayoutOptions = useMemo(() => ({
-      columns: personColumns
-    }), []);
-    return <DataView getData={getData} hasPagination onPaginationChange={onPaginationChange} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(We=(Ne=K.parameters)==null?void 0:Ne.docs)==null?void 0:We.source}}};var $e,Ge,Ye;E.parameters={...E.parameters,docs:{...($e=E.parameters)==null?void 0:$e.docs,source:{originalSource:`{
-  render: function C() {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData
-    } = useDataCallbacks(data, setData);
-    const cardLayoutOptions = useMemo(() => ({
-      itemProps: stackItemProps,
-      renderDetailPanel: () => <Box>Details</Box>,
-      rowActionMenuItems: () => <MenuItem>Test</MenuItem>
-    }), []);
-    return <DataView availableLayouts={listLayoutOnly} cardLayoutOptions={cardLayoutOptions} getData={getData} />;
-  }
-}`,...(Ye=(Ge=E.parameters)==null?void 0:Ge.docs)==null?void 0:Ye.source}}};var He,qe,_e;N.parameters={...N.parameters,docs:{...(He=N.parameters)==null?void 0:He.docs,source:{originalSource:`{
-  render: function C() {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData
-    } = useDataCallbacks(data, setData);
-    const renderDetailPanel = useCallback<Required<CardLayoutProps<Person>>["renderDetailPanel"]>(({
-      row
-    }) => row.age % 2 ? <Box>Detail content</Box> : false, []);
-    const rowActionMenuItems = useCallback(() => <MenuItem>Test</MenuItem>, []);
-    const cardLayoutOptions = useMemo(() => ({
-      itemProps: compactItemProps,
-      renderDetailPanel,
-      rowActionMenuItems
-    }), [renderDetailPanel, rowActionMenuItems]);
-    return <DataView availableLayouts={listLayoutOnly} cardLayoutOptions={cardLayoutOptions} getData={getData} />;
-  }
-}`,...(_e=(qe=N.parameters)==null?void 0:qe.docs)==null?void 0:_e.source}}};var Ue,Je,Qe;W.parameters={...W.parameters,docs:{...(Ue=W.parameters)==null?void 0:Ue.docs,source:{originalSource:`{
-  render: function C() {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData
-    } = useDataCallbacks(data, setData);
-    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
-      columns: [{
-        accessorKey: "order",
-        header: "ID",
-        enableColumnFilter: false,
-        grow: true
-      }, {
-        accessorKey: "name",
-        header: "Name"
-      }, {
-        accessorKey: "city",
-        header: "City"
-      }],
-      hasColumnResizing: true
-    }), []);
-    return <DataView availableLayouts={tableLayoutOnly} getData={getData} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(Qe=(Je=W.parameters)==null?void 0:Je.docs)==null?void 0:Qe.source}}};var Xe,Ze,ea;$.parameters={...$.parameters,docs:{...(Xe=$.parameters)==null?void 0:Xe.docs,source:{originalSource:`{
-  render: function C() {
-    const [data, setData] = useState<Person[]>(personData);
-    const {
-      getData
-    } = useDataCallbacks(data, setData);
-    const rowActions = useCallback(() => <Button label="Action" onClick={onClick} size="small" variant="secondary" />, []);
-    const tableLayoutOptions = useMemo<TableLayoutProps<Person>>(() => ({
-      columns: [{
-        accessorKey: "order",
-        header: "ID",
-        enableColumnFilter: false,
-        grow: true
-      }, {
-        accessorKey: "name",
-        header: "Name"
-      }, {
-        accessorKey: "city",
-        header: "City"
-      }],
-      hasColumnResizing: true,
-      rowActionButtons: rowActions
-    }), [rowActions]);
-    return <DataView availableLayouts={tableLayoutOnly} getData={getData} tableLayoutOptions={tableLayoutOptions} />;
-  }
-}`,...(ea=(Ze=$.parameters)==null?void 0:Ze.docs)==null?void 0:ea.source}}};const fa=["Default","TableOnly","ListAndGrid","ListOnly","GridOnly","Everything","ExpandableRowsAndCards","Truncation","Empty","CustomFilters","FilterWithCustomRender","CustomFilterWithDefaultVariant","AdditionalActions","ColumnGrowDemo","LoadMore","PaginationHook","StackCards","CompactCards","GrowColumnWithoutActions","GrowColumnWithActions"],za=Object.freeze(Object.defineProperty({__proto__:null,AdditionalActions:z,ColumnGrowDemo:B,CompactCards:N,CustomFilterWithDefaultVariant:T,CustomFilters:j,Default:S,Empty:k,Everything:O,ExpandableRowsAndCards:M,FilterWithCustomRender:V,GridOnly:v,GrowColumnWithActions:$,GrowColumnWithoutActions:W,ListAndGrid:x,ListOnly:A,LoadMore:F,PaginationHook:K,StackCards:E,TableOnly:P,Truncation:I,__namedExportsOrder:fa,default:da},Symbol.toStringTag,{value:"Module"}));export{za as D,S as a};

package/dist/assets/DatePicker-DIRg7n4d.js

@@ -1 +0,0 @@
-import{_ as k,a,c as E}from"./createTheme-BmPXDA4p.js";import{r as m}from"./index-NdkWRN8K.js";import{g as L,a as z,u as T,b as x,r as O,c as U,P as W,d as Y,e as Q,f as M,h as q,s as $,i as H,v as w,j as B,k as v,l as K,T as G,m as J,n as X,o as Z,p as D,q as F,t as R,C as ee,w as oe,x as e,y as j,z as te,D as ae,A as se}from"./useMobilePicker-CfUl5sFz.js";import{j as P}from"./jsx-runtime-CnH95YSl.js";import{u as h}from"./useThemeProps-BG38P4ul.js";import{s as C}from"./DefaultPropsProvider-B7tpShA7.js";import{T as re}from"./Typography-D7-qxuiy.js";function ne(l){return L("MuiDatePickerToolbar",l)}z("MuiDatePickerToolbar",["root","title"]);const le=["value","isLandscape","onChange","toolbarFormat","toolbarPlaceholder","views","className","onViewChange","view"],ie=l=>{const{classes:s}=l;return U({root:["root"],title:["title"]},ne,s)},ce=C(W,{name:"MuiDatePickerToolbar",slot:"Root",overridesResolver:(l,s)=>s.root})({}),ue=C(re,{name:"MuiDatePickerToolbar",slot:"Title",overridesResolver:(l,s)=>s.title})({variants:[{props:{isLandscape:!0},style:{margin:"auto 16px auto auto"}}]}),de=m.forwardRef(function(s,n){const r=h({props:s,name:"MuiDatePickerToolbar"}),{value:t,isLandscape:o,toolbarFormat:c,toolbarPlaceholder:u="––",views:b,className:p}=r,d=k(r,le),i=T(),f=x(),y=ie(r),g=m.useMemo(()=>{if(!t)return u;const N=O(i,{format:c,views:b},!0);return i.formatByString(t,N)},[t,c,u,i,b]),I=r;return P.jsx(ce,a({ref:n,toolbarTitle:f.datePickerToolbarTitle,isLandscape:o,className:E(y.root,p)},d,{children:P.jsx(ue,{variant:"h4",align:o?"left":"center",ownerState:I,className:y.title,children:g})}))});function S(l,s){const n=T(),r=Y(),t=h({props:l,name:s}),o=m.useMemo(()=>{var c;return((c=t.localeText)==null?void 0:c.toolbarTitle)==null?t.localeText:a({},t.localeText,{datePickerToolbarTitle:t.localeText.toolbarTitle})},[t.localeText]);return a({},t,{localeText:o},Q({views:t.views,openTo:t.openTo,defaultViews:["year","day"],defaultOpenTo:"day"}),{disableFuture:t.disableFuture??!1,disablePast:t.disablePast??!1,minDate:M(n,t.minDate,r.minDate),maxDate:M(n,t.maxDate,r.maxDate),slots:a({toolbar:de},t.slots)})}const pe=l=>{const s=q(l),{forwardedProps:n,internalProps:r}=$(s,"date");return H({forwardedProps:n,internalProps:r,valueManager:v,fieldValueManager:B,validator:w,valueType:"date"})},fe=["slots","slotProps","InputProps","inputProps"],A=m.forwardRef(function(s,n){const r=h({props:s,name:"MuiDateField"}),{slots:t,slotProps:o,InputProps:c,inputProps:u}=r,b=k(r,fe),p=r,d=(t==null?void 0:t.textField)??(s.enableAccessibleFieldDOMStructure?K:G),i=J({elementType:d,externalSlotProps:o==null?void 0:o.textField,externalForwardedProps:b,additionalProps:{ref:n},ownerState:p});i.inputProps=a({},u,i.inputProps),i.InputProps=a({},c,i.InputProps);const f=pe(i),y=X(f),g=Z(a({},y,{slots:t,slotProps:o}));return P.jsx(d,a({},g))}),V=m.forwardRef(function(s,n){var p,d;const r=x(),t=T(),o=S(s,"MuiDesktopDatePicker"),c=a({day:D,month:D,year:D},o.viewRenderers),u=a({},o,{viewRenderers:c,format:O(t,o,!1),yearsPerRow:o.yearsPerRow??4,slots:a({openPickerIcon:ee,field:A},o.slots),slotProps:a({},o.slotProps,{field:i=>{var f;return a({},F((f=o.slotProps)==null?void 0:f.field,i),R(o),{ref:n})},toolbar:a({hidden:!0},(p=o.slotProps)==null?void 0:p.toolbar)})}),{renderPicker:b}=oe({props:u,valueManager:v,valueType:"date",getOpenDialogAriaText:((d=u.localeText)==null?void 0:d.openDatePickerDialogue)??r.openDatePickerDialogue,validator:w});return b()});V.propTypes={autoFocus:e.bool,className:e.string,closeOnSelect:e.bool,dayOfWeekFormatter:e.func,defaultValue:e.object,disabled:e.bool,disableFuture:e.bool,disableHighlightToday:e.bool,disableOpenPicker:e.bool,disablePast:e.bool,displayWeekNumber:e.bool,enableAccessibleFieldDOMStructure:e.any,fixedWeekNumber:e.number,format:e.string,formatDensity:e.oneOf(["dense","spacious"]),inputRef:j,label:e.node,loading:e.bool,localeText:e.object,maxDate:e.object,minDate:e.object,monthsPerRow:e.oneOf([3,4]),name:e.string,onAccept:e.func,onChange:e.func,onClose:e.func,onError:e.func,onMonthChange:e.func,onOpen:e.func,onSelectedSectionsChange:e.func,onViewChange:e.func,onYearChange:e.func,open:e.bool,openTo:e.oneOf(["day","month","year"]),orientation:e.oneOf(["landscape","portrait"]),readOnly:e.bool,reduceAnimations:e.bool,referenceDate:e.object,renderLoading:e.func,selectedSections:e.oneOfType([e.oneOf(["all","day","empty","hours","meridiem","minutes","month","seconds","weekDay","year"]),e.number]),shouldDisableDate:e.func,shouldDisableMonth:e.func,shouldDisableYear:e.func,showDaysOutsideCurrentMonth:e.bool,slotProps:e.object,slots:e.object,sx:e.oneOfType([e.arrayOf(e.oneOfType([e.func,e.object,e.bool])),e.func,e.object]),timezone:e.string,value:e.object,view:e.oneOf(["day","month","year"]),viewRenderers:e.shape({day:e.func,month:e.func,year:e.func}),views:e.arrayOf(e.oneOf(["day","month","year"]).isRequired),yearsPerRow:e.oneOf([3,4])};const _=m.forwardRef(function(s,n){var p,d;const r=x(),t=T(),o=S(s,"MuiMobileDatePicker"),c=a({day:D,month:D,year:D},o.viewRenderers),u=a({},o,{viewRenderers:c,format:O(t,o,!1),slots:a({field:A},o.slots),slotProps:a({},o.slotProps,{field:i=>{var f;return a({},F((f=o.slotProps)==null?void 0:f.field,i),R(o),{ref:n})},toolbar:a({hidden:!1},(p=o.slotProps)==null?void 0:p.toolbar)})}),{renderPicker:b}=te({props:u,valueManager:v,valueType:"date",getOpenDialogAriaText:((d=u.localeText)==null?void 0:d.openDatePickerDialogue)??r.openDatePickerDialogue,validator:w});return b()});_.propTypes={autoFocus:e.bool,className:e.string,closeOnSelect:e.bool,dayOfWeekFormatter:e.func,defaultValue:e.object,disabled:e.bool,disableFuture:e.bool,disableHighlightToday:e.bool,disableOpenPicker:e.bool,disablePast:e.bool,displayWeekNumber:e.bool,enableAccessibleFieldDOMStructure:e.any,fixedWeekNumber:e.number,format:e.string,formatDensity:e.oneOf(["dense","spacious"]),inputRef:j,label:e.node,loading:e.bool,localeText:e.object,maxDate:e.object,minDate:e.object,monthsPerRow:e.oneOf([3,4]),name:e.string,onAccept:e.func,onChange:e.func,onClose:e.func,onError:e.func,onMonthChange:e.func,onOpen:e.func,onSelectedSectionsChange:e.func,onViewChange:e.func,onYearChange:e.func,open:e.bool,openTo:e.oneOf(["day","month","year"]),orientation:e.oneOf(["landscape","portrait"]),readOnly:e.bool,reduceAnimations:e.bool,referenceDate:e.object,renderLoading:e.func,selectedSections:e.oneOfType([e.oneOf(["all","day","empty","hours","meridiem","minutes","month","seconds","weekDay","year"]),e.number]),shouldDisableDate:e.func,shouldDisableMonth:e.func,shouldDisableYear:e.func,showDaysOutsideCurrentMonth:e.bool,slotProps:e.object,slots:e.object,sx:e.oneOfType([e.arrayOf(e.oneOfType([e.func,e.object,e.bool])),e.func,e.object]),timezone:e.string,value:e.object,view:e.oneOf(["day","month","year"]),viewRenderers:e.shape({day:e.func,month:e.func,year:e.func}),views:e.arrayOf(e.oneOf(["day","month","year"]).isRequired),yearsPerRow:e.oneOf([3,4])};const be=["desktopModeMediaQuery"],ke=m.forwardRef(function(s,n){const r=h({props:s,name:"MuiDatePicker"}),{desktopModeMediaQuery:t=ae}=r,o=k(r,be);return se(t,{defaultMatches:!0})?P.jsx(V,a({ref:n},o)):P.jsx(_,a({ref:n},o))});export{A as D,ke as a};

package/dist/assets/DatePicker.stories-BPWj6DxY.js

@@ -1,143 +0,0 @@
-import{j as r}from"./jsx-runtime-CnH95YSl.js";import{w as $,a as q,e as te,u as pe,s as Qe}from"./index-BJMTVygn.js";import{r as a}from"./index-NdkWRN8K.js";import{a as Xe}from"./axeRun-BfHtukUP.js";import{f as C}from"./fieldComponentPropsMetaData-BqbNLw6V.js";import{n as ae}from"./createTheme-BmPXDA4p.js";import{u as et}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{M as tt}from"./OdysseyThemeProvider-aR5shtx6.js";import{u as at}from"./useUniqueId-Bsgqe1tm.js";import{M as rt}from"./Field-ilPS333M.js";import{D as nt,a as ot}from"./DatePicker-DIRg7n4d.js";import{I as it}from"./InputAdornment-CFgP75Dd.js";import{u as _e}from"./useTranslation-vEf1lqoc.js";import{u as st,M as ct,d as lt,a as mt,b as pt}from"./useOdysseyDateFields-DQkQFY7w.js";import{M as dt}from"./Button-BOzIr8Jh.js";import{o as re}from"./i18n-DmkmAJlT.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./useContrastMode-BthoHtLy.js";import"./tooltipClasses-C74HjonW.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./tableRowClasses-inqOIkjd.js";import"./buttonBaseClasses-CSPKg76d.js";import"./SvgIcon-BQAg6Jm7.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./menuItemClasses-DFm3-Sf1.js";import"./checkboxClasses-Dtdq1kQG.js";import"./formControlLabelClasses-BtjP4uib.js";import"./typographyClasses-D8vr2n3l.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./inputAdornmentClasses-DYNxkEwO.js";import"./formLabelClasses-xMgYguuN.js";import"./radioClasses-f3ayyf7y.js";import"./formGroupClasses-D9ChLj7o.js";import"./buttonClasses-DtIJBSf4.js";import"./chipClasses-BMWKl3Eu.js";import"./CloseCircleFilled-D2aBlgBe.js";import"./WarningFilled-Y3Vw7n_w.js";import"./Check-BmyOKfcL.js";import"./autocompleteClasses-Bi4FgC8v.js";import"./Close-DA7fBExu.js";import"./alertTitleClasses-CSPeaunQ.js";import"./ChevronDown-BnAWuc8V.js";import"./useTheme-C05bJKih.js";import"./index-CpbQl8EB.js";import"./createUniqueId-ByTaVY63.js";import"./Box-BXOPvc0Q.js";import"./Box-C2ekHaOu.js";import"./List-W5kRT_jR.js";import"./ListContext-C02XM7tn.js";import"./ListItem-CcduKzQu.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLeax9q3.js";import"./TransitionGroupContext-twgBS-Q3.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-BqXVk-1q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CWawPfk8.js";import"./ScreenReaderText-vq7_Ob_I.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-ZkUAjajs.js";import"./FieldHint-Cv7aMlpU.js";import"./Typography-CiNRLenM.js";import"./Typography-D7-qxuiy.js";import"./useMobilePicker-CfUl5sFz.js";import"./useId-cMcvCE23.js";import"./Select-DVJCNQIV.js";import"./Menu-CGJO1mMf.js";import"./Portal-Bvf2g5iG.js";import"./resolveComponentProps-DMpKAZvD.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./Grow-CIie3qhp.js";import"./utils-gq6yExow.js";import"./ownerDocument-DW-IO8s5.js";import"./ownerWindow-HkKU3E4x.js";import"./debounce-Be36O1Ab.js";import"./Modal-CW5mOzJG.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./createChainedFunction-BO_9K8Jh.js";import"./Paper-DbAuDGNI.js";import"./MenuList-BboivbXC.js";import"./useControlled-NQulfz4l.js";import"./ArrowDropDown-bSngWMh1.js";import"./createSvgIcon-DiC7XVU3.js";import"./InputBase--xDu7aWm.js";import"./GlobalStyles-BxDN_5FT.js";import"./useThemeProps-BG38P4ul.js";import"./useThemeProps-Dy5sAWyz.js";import"./Popper-CwLH-7YW.js";import"./popper-CMBiYTiD.js";import"./IconButton-CK9Do7vj.js";import"./colorManipulator-O7SU8zMv.js";import"./DialogContent-C_FnZ5ZS.js";import"./Button-BqwcAVQ-.js";import"./Chip-BOK8DR8m.js";import"./context-D_qJ2zXV.js";import"./Autocomplete-UE4wqxn0.js";import"./useAutocomplete-C7VK9p4p.js";import"./inputUtils-Dbi8XkA6.js";import"./Autocomplete-MfScEzbR.js";import"./Close-DA_Sph0R.js";import"./ListSubheader-DXKE8lW0.js";import"./Calendar-CuqjwSb0.js";import"./ArrowRight-DCIAiEpA.js";import"./BaseButton-B5c4cgt8.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-3088PjcT.js";import"./Tooltip-B4GIR2eB.js";import"./i18next-DbMy2do-.js";const ut=()=>{const{t:e}=_e();return new Map([["invalidDate",e("picker.error.invalid")],["maxDate",e("picker.error.maxdate")],["minDate",e("picker.error.mindate")]])},gt=e=>e.toUTC().toISO(),yt=({defaultValue:e,endAdornment:i,errorMessage:n,hasInitialFocus:m,hint:T,HintLinkComponent:c,id:M,inputRef:P,isDisabled:p=!1,isOptional:G=!1,isReadOnly:A,label:Z,minDate:g,maxDate:y,onBlur:v,onChange:d,onFocus:B,timezone:F,value:f})=>{const h=ut(),[w,b]=a.useState(n),l=a.useRef(),E=a.useRef(null);a.useImperativeHandle(P,()=>({focus:()=>{var t;(t=E.current)==null||t.focus()}}),[]);const k=a.useCallback(t=>{const s=g&&t.toUTC()<g.toUTC(),o=y&&t.toUTC()>y.toUTC();return s||o?(s&&b(h.get("minDate")),o&&b(h.get("maxDate")),!1):!0},[h,g,y]);a.useEffect(()=>{f&&k(f),e&&k(e)},[k,e,g,y,f]);const I=a.useCallback(()=>{b(void 0),l.current=void 0},[l,b]),L=a.useCallback((t,s)=>{I();const{validationError:o}=s,O=(t==null?void 0:t.year.toString().length)===4;if(o){const D=h.get(o);D&&(l.current=D,t!=null&&t.isValid&&O&&b(D))}if(t!=null&&t.isValid&&!o){const D=gt(t);D&&k(t)&&(d==null||d(D))}},[k,I,h,d]),u=a.useCallback(t=>{l!=null&&l.current&&!w&&b(l.current),v==null||v(t)},[w,l,v]),j=!A&&!p,R=a.useCallback(({ariaDescribedBy:t,errorMessageElementId:s,id:o,labelElementId:O})=>r.jsx(nt,{autoFocus:m,defaultValue:e,disabled:p,id:o,inputProps:{"aria-describedby":t,"aria-errormessage":s,"aria-labelledby":O},InputProps:{error:!!(w||n),endAdornment:r.jsx(r.Fragment,{children:j&&r.jsx(it,{position:"end",children:i})})},inputRef:E,maxDate:y,minDate:g,name:o,onBlur:u,onChange:L,onFocus:B,readOnly:A,timezone:F,value:f,variant:"standard"}),[u,e,w,i,n,m,j,p,E,g,y,B,A,F,L,f]);return r.jsx(rt,{errorMessage:w||n,fieldType:"single",hasVisibleLabel:!0,hint:T,HintLinkComponent:c,id:M,isDisabled:p,isOptional:G,label:Z,renderFieldComponent:R})},He=a.memo(yt);He.displayName="DateField";/*!
- * Copyright (c) 2023-present, Okta, Inc. and/or its affiliates. All rights reserved.
- * The Okta software accompanied by this notice is provided pursuant to the Apache License, Version 2.0 (the "License.")
- *
- * You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0.
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *
- * See the License for the specific language governing permissions and limitations under the License.
- */const ft=ae.div({".MuiFormControl-root":{marginBlockEnd:0}}),ht=ae.div(({odysseyDesignTokens:e})=>({".MuiInput-root":{width:"100%",maxWidth:e.TypographyLineLengthMax}})),bt=ae("div",{shouldForwardProp:e=>e!=="odysseyDesignTokens"})(({odysseyDesignTokens:e})=>({marginBlockStart:e.Spacing3})),kt=({defaultValue:e,errorMessage:i,hint:n,HintLinkComponent:m,id:T,isDateEnabled:c=()=>!0,isDisabled:M,isOptional:P,isReadOnly:p,isMonthEnabled:G=()=>!0,isYearEnabled:A=()=>!0,label:Z,minDate:g,maxDate:y,onBlur:v,onCalendarDateChange:d,onInputChange:B,timeZone:F,timeZonePickerLabel:f,timeZoneOptions:h,value:w})=>{const{i18n:b,t:l}=_e(),E=a.useRef(null),k=et(),I=at(T),{closeCalendar:L,commonIcons:u,defaultedLanguageCode:j,formatDateTimeToUtcIsoDateString:R,formatDayOfWeek:t,inputValues:s,internalTimeZone:o,isOpen:O,localeText:D,minDate:Q,maxDate:X,onInputChange:oe,onTimeZoneChange:Ve,popperElement:ie,setPopperElement:se,shouldDisableDate:Ye,shouldDisableMonth:We,shouldDisableYear:Ke,toggleCalendarVisibility:ce}=st({defaultValue:e,isDateEnabled:c,isMonthEnabled:G,isYearEnabled:A,minDate:g,maxDate:y,onInputChange:B,timeZone:F,value:w}),{language:Ue}=b,le=a.useRef(null);a.useEffect(()=>{se(le.current)},[se]);const $e=a.useCallback(x=>{if(x){const S=R(x);S&&(d==null||d({value:S,timeZone:o}))}},[R,o,d]),me=a.useCallback(({defaultValue:x,inputRef:S,value:ee})=>r.jsx(He,{defaultValue:x,endAdornment:r.jsx(dt,{ariaLabel:l("picker.labels.date.choose"),label:"",onClick:ce,size:"small",startIcon:r.jsx(u.CalendarIcon,{}),variant:"floating"}),errorMessage:i,hint:n,HintLinkComponent:m,id:I,inputRef:S,isDisabled:M,isOptional:P,isReadOnly:p,label:Z,maxDate:X,minDate:Q,onBlur:v,onChange:oe,timezone:o,value:ee}),[u,I,i,n,m,o,M,P,p,Z,v,oe,Q,X,l,ce]),qe=a.useMemo(()=>({actionBar:ct,field:x=>me(x),leftArrowIcon:()=>r.jsx(u.ArrowLeftIcon,{}),rightArrowIcon:()=>r.jsx(u.ArrowRightIcon,{}),switchViewIcon:()=>r.jsx(u.ChevronDownIcon,{})}),[u,me]),Ge=a.useMemo(()=>({actionBar:({wrapperVariant:x,onAccept:S,onCancel:ee})=>({actions:x==="desktop"?[]:["accept","cancel"],onAccept:S,onCancel:ee}),popper:{anchorEl:ie},toolbar:{toolbarPlaceholder:""}}),[ie]);return r.jsx(tt,{themeOverride:lt,children:r.jsxs(mt,{defaultedLanguageCode:j,localeText:D,children:[r.jsx(ft,{children:r.jsx(ht,{odysseyDesignTokens:k,ref:le,children:r.jsx(ot,{dayOfWeekFormatter:t,defaultValue:s==null?void 0:s.defaultValue,disabled:M,fixedWeekNumber:6,inputRef:E,label:Z,maxDate:X,minDate:Q,onChange:$e,onClose:L,open:O,readOnly:p,shouldDisableDate:Ye,shouldDisableMonth:We,shouldDisableYear:Ke,slotProps:Ge,slots:qe,timezone:o,value:s==null?void 0:s.value},Ue)})}),h&&f&&r.jsx(bt,{odysseyDesignTokens:k,children:r.jsx(pt,{isReadOnly:p,label:f,onTimeZoneChange:Ve,timeZoneOptions:h,value:o})})]})})},ne=a.memo(kt);ne.displayName="DatePicker";const vr={component:ne,argTypes:{label:{control:"text",defaultValue:"DatePicker label"},onCalendarDateChange:{},defaultValue:{description:"A date object passed into the component to pre-fill the input",table:{type:{summary:"string"}}},errorMessage:C.errorMessage,hint:C.hint,HintLinkComponent:C.HintLinkComponent,id:C.id,isDisabled:C.isDisabled,isOptional:C.isOptional,isReadOnly:C.isReadOnly,minDate:{description:"the minimum selectable date enabled in the calendar",table:{type:{summary:"Date"}}},maxDate:{description:"the maximum selectable date enabled in the calendar",table:{type:{summary:"Date"}}},timeZone:{description:"an IANA time zone applied to the DatePicker",table:{type:{summary:"string"}}},timeZonePickerLabel:{description:"label applied to the `TimeZonePicker` field if `TimeZonePicker` field is rendered",table:{type:{summary:"string"}}},timeZoneOptions:{description:"an array of options for the TimeZonePicker",table:{type:{summary:"[{label: string, value: string(valid IANA time zone)}]"}}}},args:{label:"Date picker label",hint:"Select a date."},tags:["autodocs"]},z={},J={args:{isDisabled:!0}},N={args:{isReadOnly:!0}},_={args:{errorMessage:"Select a date"}},H={args:{hint:"Select a date after July 16, 2024",minDate:"2024-07-16"}},V={args:{hint:"Select a date after July 16, 2024",minDate:"2024-07-16T03:00:00.000Z",value:"2024-07-11T03:00:00.000Z"},play:async({canvasElement:e,step:i})=>{await i("expect min date error when value is less than minDate",async()=>{const n=$(e);await q(()=>{te(n.getByText(re("picker.error.mindate"))).toBeInTheDocument()})})}},Y={args:{hint:"Select a date before July 19, 2024",maxDate:"2024-07-18"}},W={args:{hint:"Select a date before July 18, 2024",maxDate:"2024-07-18T03:00:00.000Z",value:"2024-07-21T03:00:00.000Z"},play:async({canvasElement:e,step:i})=>{await i("expect max date error when value is less than minDate",async()=>{const n=$(e);await q(()=>{te(n.getByText(re("picker.error.maxdate"))).toBeInTheDocument()})})}},K={args:{value:"2024-07-21T03:00:00.000Z",timeZonePickerLabel:"Time zone picker label",timeZoneOptions:[{label:"New York",value:"America/New_York"},{label:"Johannesburg",value:"Africa/Johannesburg"},{label:"Hong Kong",value:"Asia/Hong_Kong"}]}},U={args:{timeZonePickerLabel:"Time zone picker label",timeZone:"America/New_York",timeZoneOptions:[{label:"LA",value:"America/Los_Angeles"},{label:"New York",value:"America/New_York"},{label:"Johannesburg",value:"Africa/Johannesburg"},{label:"Hong Kong",value:"Asia/Hong_Kong"}]},render:function({...i}){const[n,m]=a.useState("2024-07-11T03:00:00.000Z"),T=a.useMemo(()=>({...i,onCalendarDateChange:({value:c})=>{c&&m(c)},onInputChange:c=>{c&&m(c)},value:n}),[i,n]);return r.jsx(ne,{...T})},play:async({canvasElement:e,step:i})=>{await i("select date",async()=>{const n=$(e);await q(async()=>{const T=n.getByLabelText(re("picker.labels.date.choose"));await pe.click(T);const c=Qe.getByRole("dialog"),P=$(c).getByText("26");await pe.click(P)});const m=n.getByRole("textbox");te(m.value).toBe("07/26/2024"),await i("Check for a11y errors",async()=>{await q(()=>Xe("Selecting a date"))})})}};var de,ue,ge;z.parameters={...z.parameters,docs:{...(de=z.parameters)==null?void 0:de.docs,source:{originalSource:"{}",...(ge=(ue=z.parameters)==null?void 0:ue.docs)==null?void 0:ge.source}}};var ye,fe,he;J.parameters={...J.parameters,docs:{...(ye=J.parameters)==null?void 0:ye.docs,source:{originalSource:`{
-  args: {
-    isDisabled: true
-  }
-}`,...(he=(fe=J.parameters)==null?void 0:fe.docs)==null?void 0:he.source}}};var be,ke,De;N.parameters={...N.parameters,docs:{...(be=N.parameters)==null?void 0:be.docs,source:{originalSource:`{
-  args: {
-    isReadOnly: true
-  }
-}`,...(De=(ke=N.parameters)==null?void 0:ke.docs)==null?void 0:De.source}}};var xe,Te,ve;_.parameters={..._.parameters,docs:{...(xe=_.parameters)==null?void 0:xe.docs,source:{originalSource:`{
-  args: {
-    errorMessage: "Select a date"
-  }
-}`,...(ve=(Te=_.parameters)==null?void 0:Te.docs)==null?void 0:ve.source}}};var we,Ce,Me;H.parameters={...H.parameters,docs:{...(we=H.parameters)==null?void 0:we.docs,source:{originalSource:`{
-  args: {
-    hint: "Select a date after July 16, 2024",
-    minDate: "2024-07-16"
-  }
-}`,...(Me=(Ce=H.parameters)==null?void 0:Ce.docs)==null?void 0:Me.source}}};var Pe,Se,Ae;V.parameters={...V.parameters,docs:{...(Pe=V.parameters)==null?void 0:Pe.docs,source:{originalSource:`{
-  args: {
-    hint: "Select a date after July 16, 2024",
-    minDate: "2024-07-16T03:00:00.000Z",
-    value: "2024-07-11T03:00:00.000Z"
-  },
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    await step("expect min date error when value is less than minDate", async () => {
-      const canvas = within(canvasElement);
-      await waitFor(() => {
-        expect(canvas.getByText(odysseyTranslate("picker.error.mindate"))).toBeInTheDocument();
-      });
-    });
-  }
-}`,...(Ae=(Se=V.parameters)==null?void 0:Se.docs)==null?void 0:Ae.source}}};var Ze,Ee,Ie;Y.parameters={...Y.parameters,docs:{...(Ze=Y.parameters)==null?void 0:Ze.docs,source:{originalSource:`{
-  args: {
-    hint: "Select a date before July 19, 2024",
-    maxDate: "2024-07-18"
-  }
-}`,...(Ie=(Ee=Y.parameters)==null?void 0:Ee.docs)==null?void 0:Ie.source}}};var Oe,Be,Fe;W.parameters={...W.parameters,docs:{...(Oe=W.parameters)==null?void 0:Oe.docs,source:{originalSource:`{
-  args: {
-    hint: "Select a date before July 18, 2024",
-    maxDate: "2024-07-18T03:00:00.000Z",
-    value: "2024-07-21T03:00:00.000Z"
-  },
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    await step("expect max date error when value is less than minDate", async () => {
-      const canvas = within(canvasElement);
-      await waitFor(() => {
-        expect(canvas.getByText(odysseyTranslate("picker.error.maxdate"))).toBeInTheDocument();
-      });
-    });
-  }
-}`,...(Fe=(Be=W.parameters)==null?void 0:Be.docs)==null?void 0:Fe.source}}};var Le,je,Re;K.parameters={...K.parameters,docs:{...(Le=K.parameters)==null?void 0:Le.docs,source:{originalSource:`{
-  args: {
-    value: "2024-07-21T03:00:00.000Z",
-    timeZonePickerLabel: "Time zone picker label",
-    timeZoneOptions: [{
-      label: "New York",
-      value: "America/New_York"
-    }, {
-      label: "Johannesburg",
-      value: "Africa/Johannesburg"
-    }, {
-      label: "Hong Kong",
-      value: "Asia/Hong_Kong"
-    }]
-  }
-}`,...(Re=(je=K.parameters)==null?void 0:je.docs)==null?void 0:Re.source}}};var ze,Je,Ne;U.parameters={...U.parameters,docs:{...(ze=U.parameters)==null?void 0:ze.docs,source:{originalSource:`{
-  args: {
-    timeZonePickerLabel: "Time zone picker label",
-    timeZone: "America/New_York",
-    timeZoneOptions: [{
-      label: "LA",
-      value: "America/Los_Angeles"
-    }, {
-      label: "New York",
-      value: "America/New_York"
-    }, {
-      label: "Johannesburg",
-      value: "Africa/Johannesburg"
-    }, {
-      label: "Hong Kong",
-      value: "Asia/Hong_Kong"
-    }]
-  },
-  render: function C({
-    ...props
-  }) {
-    const [value, setValue] = useState<string>("2024-07-11T03:00:00.000Z");
-    const datePickerProps: DatePickerProps = useMemo(() => ({
-      ...props,
-      onCalendarDateChange: ({
-        value
-      }) => {
-        if (value) {
-          setValue(value);
-        }
-      },
-      onInputChange: value => {
-        if (value) {
-          setValue(value);
-        }
-      },
-      value
-    }), [props, value]);
-    return <DatePicker {...datePickerProps} />;
-  },
-  play: async ({
-    canvasElement,
-    step
-  }) => {
-    await step("select date", async () => {
-      const canvas = within(canvasElement);
-      await waitFor(async () => {
-        const datepickerCalendarOpenButton = canvas.getByLabelText(odysseyTranslate("picker.labels.date.choose"));
-        await userEvent.click(datepickerCalendarOpenButton);
-        const dialog = screen.getByRole("dialog");
-        const dialogCanvas = within(dialog);
-        const dateButton = dialogCanvas.getByText("26");
-        await userEvent.click(dateButton);
-      });
-      const input = canvas.getByRole<HTMLInputElement>("textbox");
-      expect(input.value).toBe("07/26/2024");
-      await step("Check for a11y errors", async () => {
-        await waitFor(() => axeRun("Selecting a date"));
-      });
-    });
-  }
-}`,...(Ne=(Je=U.parameters)==null?void 0:Je.docs)==null?void 0:Ne.source}}};const wr=["Default","Disabled","ReadOnly","Error","MinDate","MinDateWithError","MaxDate","MaxDateWithError","WithTimeZonePicker","Controlled"];export{U as Controlled,z as Default,J as Disabled,_ as Error,Y as MaxDate,W as MaxDateWithError,H as MinDate,V as MinDateWithError,N as ReadOnly,K as WithTimeZonePicker,wr as __namedExportsOrder,vr as default};