@okta/odyssey-react-mui 1.43.0 → 1.45.0

package/dist/assets/Custom Theming.stories-BHdYhCs2.js

@@ -0,0 +1,93 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{o as A}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{r as y}from"./index-NdkWRN8K.js";import{M as f}from"./OdysseyProvider-BQyPcEvx.js";import{M as S}from"./TextField-CZ0hstP2.js";import{M as V}from"./RadioGroup-BS6oYUQf.js";import{M as v}from"./Radio-D85jg1Ri.js";import{_ as $,a as m,c as q,i as J,j as K}from"./createTheme-BmPXDA4p.js";import{P as Q}from"./Paper-DbAuDGNI.js";import{M as X}from"./MenuList-BboivbXC.js";import{c as Y,T as Z}from"./OdysseyThemeProvider-aR5shtx6.js";import{L as ee}from"./ListContext-C02XM7tn.js";import{u as re,s as oe,c as te}from"./DefaultPropsProvider-B7tpShA7.js";import{c as se,a as E}from"./menuItemClasses-DFm3-Sf1.js";import{T as d}from"./Typography-D7-qxuiy.js";import{M as ne}from"./Button-BOzIr8Jh.js";import{M as j}from"./MenuItem-CuP47MJ-.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./i18n-DmkmAJlT.js";import"./i18next-DbMy2do-.js";import"./context-D_qJ2zXV.js";import"./ScopedCssBaseline-FivWKbYZ.js";import"./GlobalStyles-BxDN_5FT.js";import"./useTheme-C05bJKih.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./Field-ilPS333M.js";import"./Box-BXOPvc0Q.js";import"./Box-C2ekHaOu.js";import"./List-W5kRT_jR.js";import"./ListItem-CcduKzQu.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLeax9q3.js";import"./formLabelClasses-xMgYguuN.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"./buttonBaseClasses-CSPKg76d.js";import"./ScreenReaderText-vq7_Ob_I.js";import"./visuallyHidden-Dan1xhjv.js";import"./useTranslation-vEf1lqoc.js";import"./FormHelperText-ZkUAjajs.js";import"./FieldHint-Cv7aMlpU.js";import"./Typography-CiNRLenM.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase--xDu7aWm.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./InputAdornment-CFgP75Dd.js";import"./inputAdornmentClasses-DYNxkEwO.js";import"./Radio-Bi1_KmSD.js";import"./SwitchBase-Bja5dn-O.js";import"./useControlled-NQulfz4l.js";import"./createSvgIcon-DiC7XVU3.js";import"./SvgIcon-BQAg6Jm7.js";import"./radioClasses-f3ayyf7y.js";import"./createChainedFunction-BO_9K8Jh.js";import"./useId-cMcvCE23.js";import"./FormGroup-BaCH3e06.js";import"./formGroupClasses-D9ChLj7o.js";import"./FormControlLabel-CxCmH5hv.js";import"./formControlLabelClasses-BtjP4uib.js";import"./Stack-Ba8l39se.js";import"./useThemeProps-Dy5sAWyz.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./useContrastMode-BthoHtLy.js";import"./tooltipClasses-C74HjonW.js";import"./tableRowClasses-inqOIkjd.js";import"./checkboxClasses-Dtdq1kQG.js";import"./typographyClasses-D8vr2n3l.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"./index-CpbQl8EB.js";import"./BaseButton-B5c4cgt8.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-3088PjcT.js";import"./Tooltip-B4GIR2eB.js";import"./Grow-CIie3qhp.js";import"./utils-gq6yExow.js";import"./index-B5xazMy1.js";import"./index-DieBXP3Z.js";import"./Portal-Bvf2g5iG.js";import"./resolveComponentProps-DMpKAZvD.js";import"./Popper-CwLH-7YW.js";import"./popper-CMBiYTiD.js";import"./Button-BqwcAVQ-.js";import"./MenuContext-DKMyPMNY.js";import"./MenuItem-DjSqFwdt.js";const ie=["children","className","disableTypography","inset","primary","primaryTypographyProps","secondary","secondaryTypographyProps"],me=o=>{const{classes:r,inset:t,primary:s,secondary:h,dense:T}=o;return te({root:["root",t&&"inset",T&&"dense",s&&h&&"multiline"],primary:["primary"],secondary:["secondary"]},se,r)},ae=oe("div",{name:"MuiListItemText",slot:"Root",overridesResolver:(o,r)=>{const{ownerState:t}=o;return[{[`& .${E.primary}`]:r.primary},{[`& .${E.secondary}`]:r.secondary},r.root,t.inset&&r.inset,t.primary&&t.secondary&&r.multiline,t.dense&&r.dense]}})(({ownerState:o})=>m({flex:"1 1 auto",minWidth:0,marginTop:4,marginBottom:4},o.primary&&o.secondary&&{marginTop:6,marginBottom:6},o.inset&&{paddingLeft:56})),C=y.forwardRef(function(r,t){const s=re({props:r,name:"MuiListItemText"}),{children:h,className:T,disableTypography:a=!1,inset:z=!1,primary:O,primaryTypographyProps:x,secondary:W,secondaryTypographyProps:_}=s,U=$(s,ie),{dense:M}=y.useContext(ee);let n=O??h,i=W;const b=m({},s,{disableTypography:a,inset:z,primary:!!n,secondary:!!i,dense:M}),g=me(b);return n!=null&&n.type!==d&&!a&&(n=e.jsx(d,m({variant:M?"body2":"body1",className:g.primary,component:x!=null&&x.variant?void 0:"span",display:"block"},x,{children:n}))),i!=null&&i.type!==d&&!a&&(i=e.jsx(d,m({variant:"body2",className:g.secondary,color:"text.secondary",display:"block"},_,{children:i}))),e.jsxs(ae,m({className:q(g.root,T),ownerState:b,ref:t},U,{children:[n,i]}))}),to={},p={decorators:[(o,r)=>{const t={BorderRadiusMain:"12px",HueBlue500:"green",HueBlue900:"rgb(150,0,0,1)",TypographyLineHeightHeading1:1.2,Spacing0:"1rem"},s=r.canvasElement.parentElement??void 0;return e.jsx(f,{designTokensOverride:t,shadowDomElement:s,children:e.jsx(o,{})})}],name:"Button",render:function(){return e.jsx("div",{children:e.jsx(ne,{label:"Primary",variant:"primary"})})}},c={decorators:[(o,r)=>{const t={HueBlue500:"orange"},s=r.canvasElement.parentElement??void 0;return e.jsx(f,{designTokensOverride:t,shadowDomElement:s,children:e.jsx(o,{})})}],name:"TextField",render:function(){return e.jsxs(e.Fragment,{children:[e.jsx(S,{autoCompleteType:"name",label:"Name",type:"text"}),e.jsx(S,{autoCompleteType:"name",label:"Password",type:"text"})]})}},l={decorators:[(o,r)=>{const t={HueBlue500:"rgba(0, 160, 100, 1)"},s=r.canvasElement.parentElement??void 0;return e.jsx(f,{designTokensOverride:t,shadowDomElement:s,children:e.jsx(o,{})})}],name:"RadioGroup",render:function(){return e.jsxs(V,{"aria-describedby":"radio-hint radio-error",defaultValue:"Lightspeed",id:"radio-buttons-group",label:"Speed",children:[e.jsx(v,{label:"Lightspeed",value:"lightspeed"}),e.jsx(v,{label:"Warp Speed",value:"Warp Speed"}),e.jsx(v,{label:"Ludicrous Speed",value:"Ludicrous Speed"})]})}},u={name:"CustomComponent",render:function(){const r=y.useMemo(()=>({components:{MuiListItemText:{styleOverrides:{root:{color:"red"}}}}}),[]),t=Y({odysseyTokens:A}),s=y.useMemo(()=>r&&J(K(t,r)),[t,r]);return e.jsx(e.Fragment,{children:e.jsx(Q,{children:e.jsxs(X,{children:[e.jsx(j,{children:e.jsx(Z,{theme:s,children:e.jsx(C,{children:"Cut"})})}),e.jsx(j,{children:e.jsx(C,{children:"Copy"})})]})})})}};var L,P,R;p.parameters={...p.parameters,docs:{...(L=p.parameters)==null?void 0:L.docs,source:{originalSource:`{
+  decorators: [(Story, context) => {
+    const odysseyDesignTokensOverrides: DesignTokensOverride = {
+      BorderRadiusMain: "12px",
+      HueBlue500: "green",
+      //base background color
+      HueBlue900: "rgb(150,0,0,1)",
+      //used for hover/focus
+      TypographyLineHeightHeading1: 1.2,
+      Spacing0: "1rem"
+    };
+    const shadowRootElement = context.canvasElement.parentElement ?? undefined;
+    return <OdysseyProvider designTokensOverride={odysseyDesignTokensOverrides} shadowDomElement={shadowRootElement}>
+          <Story />
+        </OdysseyProvider>;
+  }],
+  name: "Button",
+  render: function C() {
+    return <div>
+        <Button label="Primary" variant="primary" />
+      </div>;
+  }
+}`,...(R=(P=p.parameters)==null?void 0:P.docs)==null?void 0:R.source}}};var k,D,I;c.parameters={...c.parameters,docs:{...(k=c.parameters)==null?void 0:k.docs,source:{originalSource:`{
+  decorators: [(Story, context) => {
+    const odysseyDesignTokensOverrides: DesignTokensOverride = {
+      HueBlue500: "orange"
+    };
+    const shadowRootElement = context.canvasElement.parentElement ?? undefined;
+    return <OdysseyProvider designTokensOverride={odysseyDesignTokensOverrides} shadowDomElement={shadowRootElement}>
+          <Story />
+        </OdysseyProvider>;
+  }],
+  name: "TextField",
+  render: function C() {
+    return <>
+        <TextField autoCompleteType="name" label="Name" type="text" />
+        <TextField autoCompleteType="name" label="Password" type="text" />
+      </>;
+  }
+}`,...(I=(D=c.parameters)==null?void 0:D.docs)==null?void 0:I.source}}};var w,B,H;l.parameters={...l.parameters,docs:{...(w=l.parameters)==null?void 0:w.docs,source:{originalSource:`{
+  decorators: [(Story, context) => {
+    const odysseyDesignTokensOverrides: DesignTokensOverride = {
+      HueBlue500: "rgba(0, 160, 100, 1)" // THIS IS A SAMPLE. DO NOT USE!
+    };
+    const shadowRootElement = context.canvasElement.parentElement ?? undefined;
+    return <OdysseyProvider designTokensOverride={odysseyDesignTokensOverrides} shadowDomElement={shadowRootElement}>
+          <Story />
+        </OdysseyProvider>;
+  }],
+  name: "RadioGroup",
+  render: function C() {
+    return <RadioGroup aria-describedby="radio-hint radio-error" defaultValue="Lightspeed" id="radio-buttons-group" label="Speed">
+        <Radio label="Lightspeed" value="lightspeed" />
+        <Radio label="Warp Speed" value="Warp Speed" />
+        <Radio label="Ludicrous Speed" value="Ludicrous Speed" />
+      </RadioGroup>;
+  }
+}`,...(H=(B=l.parameters)==null?void 0:B.docs)==null?void 0:H.source}}};var F,N,G;u.parameters={...u.parameters,docs:{...(F=u.parameters)==null?void 0:F.docs,source:{originalSource:`{
+  name: "CustomComponent",
+  render: function C() {
+    const themeOverrides: ThemeOptions = useMemo(() => {
+      return {
+        components: {
+          MuiListItemText: {
+            styleOverrides: {
+              root: {
+                color: "red"
+              }
+            }
+          }
+        }
+      };
+    }, []);
+    const odysseyTheme = createOdysseyMuiTheme({
+      odysseyTokens
+    });
+    const customOdysseyTheme = useMemo(() => themeOverrides && createTheme(deepmerge(odysseyTheme, themeOverrides)), [odysseyTheme, themeOverrides]);
+    return <>
+        <Paper>
+          <MenuList>
+            <MenuItem>
+              <MuiThemeProvider theme={customOdysseyTheme}>
+                <ListItemText>Cut</ListItemText>
+              </MuiThemeProvider>
+            </MenuItem>
+            <MenuItem>
+              <ListItemText>Copy</ListItemText>
+            </MenuItem>
+          </MenuList>
+        </Paper>
+      </>;
+  }
+}`,...(G=(N=u.parameters)==null?void 0:N.docs)==null?void 0:G.source}}};const so=["ButtonStory","TextFieldStory","RadioGroupStory","CustomComponentStory"];export{p as ButtonStory,u as CustomComponentStory,l as RadioGroupStory,c as TextFieldStory,so as __namedExportsOrder,to as default};

package/dist/assets/DataFilters _labs_-D3S2uNi-.js

@@ -0,0 +1,55 @@
+import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import"./index-CtY5BB1N.js";import{M as c,T as a,S as p,D as l,P as d,a as m,C as o}from"./index-BpVuOoKb.js";import{D as t,N as h,J as x,S as j,A as f}from"./DataFilters _labs_.stories-RwWZVkCe.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-BzLY45Eo.js";import"./iframe-C-RQ_TKY.js";import"./DocsRenderer-CFRXHY34-DEwq8OPY.js";import"./client-akVMpN0m.js";import"./index-DieBXP3Z.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./index-BJMTVygn.js";import"./DataFilters-DVey1xPT.js";import"./createTheme-BmPXDA4p.js";import"./Autocomplete-UE4wqxn0.js";import"./useAutocomplete-C7VK9p4p.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CWawPfk8.js";import"./Field-ilPS333M.js";import"./Box-BXOPvc0Q.js";import"./Box-C2ekHaOu.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./useTheme-C05bJKih.js";import"./OdysseyDesignTokensContext-BWQIA5ie.js";import"./List-W5kRT_jR.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./ListContext-C02XM7tn.js";import"./ListItem-CcduKzQu.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-BLeax9q3.js";import"./formLabelClasses-xMgYguuN.js";import"./TransitionGroupContext-twgBS-Q3.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-BqXVk-1q.js";import"./buttonBaseClasses-CSPKg76d.js";import"./ScreenReaderText-vq7_Ob_I.js";import"./visuallyHidden-Dan1xhjv.js";import"./useTranslation-vEf1lqoc.js";import"./context-D_qJ2zXV.js";import"./FormHelperText-ZkUAjajs.js";import"./FieldHint-Cv7aMlpU.js";import"./Typography-CiNRLenM.js";import"./Typography-D7-qxuiy.js";import"./typographyClasses-D8vr2n3l.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase--xDu7aWm.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./GlobalStyles-BxDN_5FT.js";import"./Autocomplete-MfScEzbR.js";import"./ArrowDropDown-bSngWMh1.js";import"./createSvgIcon-DiC7XVU3.js";import"./SvgIcon-BQAg6Jm7.js";import"./Close-DA_Sph0R.js";import"./autocompleteClasses-Bi4FgC8v.js";import"./Paper-DbAuDGNI.js";import"./Popper-CwLH-7YW.js";import"./Portal-Bvf2g5iG.js";import"./resolveComponentProps-DMpKAZvD.js";import"./popper-CMBiYTiD.js";import"./useId-cMcvCE23.js";import"./useControlled-NQulfz4l.js";import"./Chip-BOK8DR8m.js";import"./chipClasses-BMWKl3Eu.js";import"./IconButton-CK9Do7vj.js";import"./ListSubheader-DXKE8lW0.js";import"./Checkbox-BTj1hXUa.js";import"./FormControlLabel-CxCmH5hv.js";import"./formControlLabelClasses-BtjP4uib.js";import"./Stack-Ba8l39se.js";import"./useThemeProps-Dy5sAWyz.js";import"./Checkbox-luq82K1t.js";import"./SwitchBase-Bja5dn-O.js";import"./checkboxClasses-Dtdq1kQG.js";import"./CheckboxGroup-Cgc2chES.js";import"./FormGroup-BaCH3e06.js";import"./formGroupClasses-D9ChLj7o.js";import"./Radio-D85jg1Ri.js";import"./Radio-Bi1_KmSD.js";import"./radioClasses-f3ayyf7y.js";import"./createChainedFunction-BO_9K8Jh.js";import"./RadioGroup-BS6oYUQf.js";import"./SearchField-jc9ws93I.js";import"./OdysseyThemeProvider-aR5shtx6.js";import"./useContrastMode-BthoHtLy.js";import"./tooltipClasses-C74HjonW.js";import"./tableRowClasses-inqOIkjd.js";import"./menuItemClasses-DFm3-Sf1.js";import"./inputAdornmentClasses-DYNxkEwO.js";import"./buttonClasses-DtIJBSf4.js";import"./CloseCircleFilled-D2aBlgBe.js";import"./WarningFilled-Y3Vw7n_w.js";import"./Check-BmyOKfcL.js";import"./Close-DA7fBExu.js";import"./alertTitleClasses-CSPeaunQ.js";import"./ChevronDown-BnAWuc8V.js";import"./index-CpbQl8EB.js";import"./InputAdornment-CFgP75Dd.js";import"./Search-BvCmvJcV.js";import"./Tag-CjPSrGAL.js";import"./MuiPropsContext-DhRylJZk.js";import"./TagList-BQKiA1TW.js";import"./TextField-CZ0hstP2.js";import"./Button-BOzIr8Jh.js";import"./BaseButton-B5c4cgt8.js";import"./Tooltip-3088PjcT.js";import"./Tooltip-B4GIR2eB.js";import"./Grow-CIie3qhp.js";import"./utils-gq6yExow.js";import"./Button-BqwcAVQ-.js";import"./Filter-BAXcmMyf.js";import"./Menu-CGJO1mMf.js";import"./Modal-CW5mOzJG.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./MenuList-BboivbXC.js";import"./MenuItem-DjSqFwdt.js";import"./Trans-DZ9nii1x.js";import"./ChevronRight-BB0bQIRj.js";import"./Bug-m6zinguF.js";import"./Settings-DjrryuBd.js";function n(r){const i={code:"code",h2:"h2",li:"li",p:"p",pre:"pre",ul:"ul",...s(),...r.components};return e.jsxs(e.Fragment,{children:[e.jsx(c,{of:t}),`
+`,e.jsx(a,{of:t}),`
+`,e.jsx(p,{of:t}),`
+`,e.jsx(l,{of:t}),`
+`,e.jsx(d,{of:t}),`
+`,e.jsx(m,{}),`
+`,e.jsxs(i.p,{children:[e.jsx(i.code,{children:"DataFilters"})," were created as part of ",e.jsx(i.code,{children:"DataTable"}),` but have been decoupled so we can use this pattern
+anywhere that filters are necessary.`]}),`
+`,e.jsx(i.p,{children:`It features a unified UI for filters and search, and provides callbacks so consumers can bring their own
+logic.`}),`
+`,e.jsx(i.p,{children:`When filters are set, they are displayed as chips underneath the filter/search row, and can be cleared via
+a "Clear all" button.`}),`
+`,e.jsx(i.h2,{id:"filters",children:"Filters"}),`
+`,e.jsxs(i.p,{children:["Exposing the Filters UI requires two props to be set: ",e.jsx(i.code,{children:"filters"})," and ",e.jsx(i.code,{children:"onChangeFilters"}),"."]}),`
+`,e.jsxs(i.p,{children:[e.jsx(i.code,{children:"filters"})," should be an array of ",e.jsx(i.code,{children:"DataFilter"})," objects, defined as such:"]}),`
+`,e.jsx(i.pre,{children:e.jsx(i.code,{className:"language-tsx",children:`type DataFilter = {
+  id: string;
+  label: string;
+  variant?: (typeof dataFilterVariantValues)[number];
+  value?: string | string[] | undefined;
+  options?: Array<{ label: string; value: string }>;
+};
+`})}),`
+`,e.jsxs(i.p,{children:["A ",e.jsx(i.code,{children:"DataFilter"})," is of type ",e.jsx(i.code,{children:"text"})," by default, but can be set to any of the following:"]}),`
+`,e.jsxs(i.ul,{children:[`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"autocomplete"})}),`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"checkbox"})}),`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"date"})}),`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"date-range"})}),`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"multi-select"})}),`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"range"})}),`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"range-slider"})}),`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"select"})}),`
+`,e.jsx(i.li,{children:e.jsx(i.code,{children:"text"})}),`
+`]}),`
+`,e.jsxs(i.p,{children:[`The filtering UI for each of these adapts to the variant, though currently only a few variants have
+their own UI: `,e.jsx(i.code,{children:"text"}),", ",e.jsx(i.code,{children:"checkbox"}),", ",e.jsx(i.code,{children:"multi-select"}),", and ",e.jsx(i.code,{children:"select"}),`. Any other variant will have a missing input
+for now.`]}),`
+`,e.jsxs(i.p,{children:["A typical usage of ",e.jsx(i.code,{children:"onChangeFilters"}),` would be to set the parent component's state to the return value,
+or perform an effect whenever the return value changes. In the case of `,e.jsx(i.code,{children:"DataTable"}),", it fires the ",e.jsx(i.code,{children:"fetchDataFn"}),` whenever
+the filters change.`]}),`
+`,e.jsx(o,{of:h}),`
+`,e.jsx(i.h2,{id:"search",children:"Search"}),`
+`,e.jsxs(i.p,{children:["The filtering UI is only visible if ",e.jsx(i.code,{children:"filters"})," is defined. If ",e.jsx(i.code,{children:"filters"})," is undefined and ",e.jsx(i.code,{children:"onChangeSearch"}),` is defined,
+the search UI will be displayed without accompanying filters.`]}),`
+`,e.jsxs(i.p,{children:["By default, ",e.jsx(i.code,{children:"onChangeSearch"}),` fires whenever the user changes the input value, debounced by 200ms. You can change the debounce
+by setting a different number of milliseconds in `,e.jsx(i.code,{children:"searchDelay"}),". Or, you can force ",e.jsx(i.code,{children:"onChangeSearch"}),` to only fire on submit by setting
+`,e.jsx(i.code,{children:"searchOnSubmit"})," to ",e.jsx(i.code,{children:"true"}),"."]}),`
+`,e.jsx(o,{of:x}),`
+`,e.jsx(o,{of:j}),`
+`,e.jsx(i.h2,{id:"additional-actions",children:"Additional actions"}),`
+`,e.jsxs(i.p,{children:[e.jsx(i.code,{children:"DataFilters"})," provides a slot for additional actions by passing a ",e.jsx(i.code,{children:"ReactNode"})," into ",e.jsx(i.code,{children:"additionalActions"}),`. This is intended exclusively for
+`,e.jsx(i.code,{children:"<Button>"})," and ",e.jsx(i.code,{children:"<MenuButton>"})," components, which will be displayed in the same row as the filters and serach, but aligned right."]}),`
+`,e.jsxs(i.p,{children:[e.jsx(i.code,{children:"DataTable"})," uses this to expose density and column visibility controls."]}),`
+`,e.jsx(o,{of:f})]})}function Ri(r={}){const{wrapper:i}={...s(),...r.components};return i?e.jsx(i,{...r,children:e.jsx(n,{...r})}):n(r)}export{Ri as default};

package/dist/assets/DataFilters _labs_.stories-RwWZVkCe.js

@@ -0,0 +1,31 @@
+import{j as a}from"./jsx-runtime-CnH95YSl.js";import{f as A}from"./index-BJMTVygn.js";import{M as B}from"./DataFilters-DVey1xPT.js";import{M}from"./Bug-m6zinguF.js";import{M as F}from"./Box-BXOPvc0Q.js";import{M as l}from"./Button-BOzIr8Jh.js";import{M as j}from"./Settings-DjrryuBd.js";const D={component:B,argTypes:{onChangeSearch:{description:"",table:{type:{summary:"(value: string) => void"}}},onChangeFilters:{description:"",table:{type:{summary:"(filters: Array<DataFilter>) => void"}}},hasSearchSubmitButton:{control:"boolean",description:"",table:{type:{summary:"boolean"}}},searchDelayTime:{control:"number",description:"",table:{type:{summary:"number"}}},defaultSearchTerm:{control:"text",description:"",table:{type:{summary:"string"}}},additionalActions:{description:"",table:{type:{summary:"ReactNode"}}},filters:{description:"",table:{type:{summary:"Array<DataFilter>"}}}},args:{onChangeFilters:A()}},i=[{id:"text-filter",label:"Text filter",variant:"text"},{id:"autocomplete-filter",label:"Autocomplete filter",variant:"autocomplete",options:[{label:"Option 1",value:"option1"},{label:"Option 2",value:"option2"},{label:"Option 3",value:"option3"}]},{id:"number-filter",label:"Number filter",variant:"range"},{id:"checkbox-filter",label:"Checkbox filter",variant:"multi-select",options:[{label:"Option 1",value:"option1"},{label:"Option 2",value:"option2"},{label:"Option 3",value:"option3"}]},{id:"radio-filter",label:"Radio filter",variant:"select",options:[{label:"Option 1",value:"option1"},{label:"Option 2",value:"option2"},{label:"Option 3",value:"option3"}]}],o={args:{filters:i,onChangeSearch:e=>console.log(e)}},t={args:{filters:i,onChangeSearch:void 0}},r={args:{filters:[],onChangeSearch:e=>console.log(e)}},n={args:{filters:[],hasSearchSubmitButton:!0,onChangeSearch:e=>console.log(e)}},s={args:{filters:i,onChangeSearch:e=>console.log(e),additionalActions:a.jsxs(F,{children:[a.jsx(l,{endIcon:a.jsx(M,{}),label:"Another button",variant:"secondary"}),a.jsx(l,{ariaLabel:"Settings",endIcon:a.jsx(j,{}),variant:"secondary"})]})}};var c,m,u;o.parameters={...o.parameters,docs:{...(c=o.parameters)==null?void 0:c.docs,source:{originalSource:`{
+  args: {
+    filters: demoFilters,
+    onChangeSearch: value => console.log(value)
+  }
+}`,...(u=(m=o.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};var p,d,g;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`{
+  args: {
+    filters: demoFilters,
+    onChangeSearch: undefined
+  }
+}`,...(g=(d=t.parameters)==null?void 0:d.docs)==null?void 0:g.source}}};var b,h,S;r.parameters={...r.parameters,docs:{...(b=r.parameters)==null?void 0:b.docs,source:{originalSource:`{
+  args: {
+    filters: [],
+    onChangeSearch: value => console.log(value)
+  }
+}`,...(S=(h=r.parameters)==null?void 0:h.docs)==null?void 0:S.source}}};var f,v,y;n.parameters={...n.parameters,docs:{...(f=n.parameters)==null?void 0:f.docs,source:{originalSource:`{
+  args: {
+    filters: [],
+    hasSearchSubmitButton: true,
+    onChangeSearch: value => console.log(value)
+  }
+}`,...(y=(v=n.parameters)==null?void 0:v.docs)==null?void 0:y.source}}};var x,C,O;s.parameters={...s.parameters,docs:{...(x=s.parameters)==null?void 0:x.docs,source:{originalSource:`{
+  args: {
+    filters: demoFilters,
+    onChangeSearch: value => console.log(value),
+    additionalActions: <Box>
+        <Button endIcon={<BugIcon />} label="Another button" variant="secondary" />
+        <Button ariaLabel="Settings" endIcon={<SettingsIcon />} variant="secondary" />
+      </Box>
+  }
+}`,...(O=(C=s.parameters)==null?void 0:C.docs)==null?void 0:O.source}}};const I=["Default","NoSearch","JustSearch","SearchOnSubmit","AdditionalActions"],E=Object.freeze(Object.defineProperty({__proto__:null,AdditionalActions:s,Default:o,JustSearch:r,NoSearch:t,SearchOnSubmit:n,__namedExportsOrder:I,default:D},Symbol.toStringTag,{value:"Module"}));export{s as A,E as D,r as J,t as N,n as S};

package/dist/assets/DataFilters-DVey1xPT.js

@@ -0,0 +1 @@
+import{n as G}from"./createTheme-BmPXDA4p.js";import{r as t}from"./index-NdkWRN8K.js";import{M as ne}from"./Autocomplete-UE4wqxn0.js";import{M as r}from"./Box-BXOPvc0Q.js";import{M as le}from"./Checkbox-BTj1hXUa.js";import{M as te}from"./CheckboxGroup-Cgc2chES.js";import{u as ie}from"./OdysseyDesignTokensContext-BWQIA5ie.js";import{M as B}from"./Radio-D85jg1Ri.js";import{M as de}from"./RadioGroup-BS6oYUQf.js";import{M as oe}from"./SearchField-jc9ws93I.js";import{M as ue}from"./Tag-CjPSrGAL.js";import{M as ce}from"./TagList-BQKiA1TW.js";import{M as re}from"./TextField-CZ0hstP2.js";import{c as me}from"./Typography-CiNRLenM.js";import{j as a}from"./jsx-runtime-CnH95YSl.js";import{u as pe}from"./useTranslation-vEf1lqoc.js";import{M as v}from"./Button-BOzIr8Jh.js";import{M as xe}from"./Filter-BAXcmMyf.js";import{M as he,P as fe}from"./Menu-CGJO1mMf.js";import{M as be}from"./MenuItem-DjSqFwdt.js";import{T as je}from"./Typography-D7-qxuiy.js";import{T as N}from"./Trans-DZ9nii1x.js";import{M as ge}from"./ChevronRight-BB0bQIRj.js";import{I as ye}from"./IconButton-CK9Do7vj.js";import{M as _}from"./Check-BmyOKfcL.js";import{M as Me}from"./CloseCircleFilled-D2aBlgBe.js";const ve=G("div",{shouldForwardProp:o=>o!=="odysseyDesignTokens"})(({odysseyDesignTokens:o})=>({display:"flex",alignItems:"flex-end",gap:o.Spacing2})),Ie=G("div")({width:"100%"}),ke=({activeFilters:o,updateFilterAndInputValues:h})=>{const f=o.filter(l=>l.value),b=[];f.forEach(l=>{Array.isArray(l.value)&&l.value.forEach(p=>{const u=typeof p=="string"?p:p.value;b.push({id:l.id,label:l.label,value:u})}),typeof l.value=="string"&&b.push({id:l.id,label:l.label,value:l.value})});const z=l=>f.find(p=>p.id===l),E=(l,p)=>{const u=z(l);if(u){const{value:x}=u;if(Array.isArray(x)){const m=x.filter(F=>F.value!==p);h({filterId:l,value:m.length>0?m:void 0})}typeof x=="string"&&h({filterId:l,value:void 0})}};return a.jsx(ce,{children:b.map(l=>a.jsx(ue,{label:`${l.label}: ${l.value}`,onRemove:()=>E(l.id,l.value)},`${l.label}: ${l.value}`))})},K=t.memo(ke);K.displayName="FilterTags";const Ae=({onChangeSearch:o,onChangeFilters:h,hasSearchSubmitButton:f=!1,searchDelayTime:b=200,defaultSearchTerm:z="",additionalActions:E,filters:l=[],isDisabled:p})=>{const[u,x]=t.useState(l),{t:m}=pe(),F=ie(),X=t.useMemo(()=>l.reduce((s,n)=>(s[n.id]=n.value,s),{}),[l]),[i,j]=t.useState(X),[g,C]=t.useState(z),w=t.useMemo(()=>u.filter(s=>s.value),[u]),[I,k]=t.useState(!1),[L,Y]=t.useState(),[y,R]=t.useState(!1),[q,H]=t.useState(),[e,U]=t.useState(),O=t.useRef();t.useEffect(()=>{h==null||h(u)},[u,h]);const D=t.useRef(void 0);t.useEffect(()=>{f||(D.current&&clearTimeout(D.current),D.current=setTimeout(()=>{o==null||o(g??"")},b))},[o,g,b,f]);const J=t.useMemo(()=>(e==null?void 0:e.options)||[],[e]),A=t.useCallback(({filterId:s,value:n})=>{j({...i,[s]:n})},[i]),T=t.useCallback(({filterId:s,value:n})=>{j(d=>({...d,[s]:n}));const c=l.map(d=>({...d,value:d.id===s?n:i[d.id]}));x(c)},[i,l]),S=t.useCallback(({filterId:s,value:n})=>{A({filterId:s,value:n}),T({filterId:s,value:n})},[T,A]),Q=t.useCallback((s,n,c)=>{const d=i[s]||[],V=c?[...d,n]:d.filter(M=>M.value!==n.value),$=V.length>0?V:void 0;j({...i,[s]:$});const ae=u.map(M=>({...M,value:M.id===s?$:i[M.id]}));x(ae)},[u,i]),Z=t.useCallback((s,n)=>{j({...i,[s]:n})},[i]),P=t.useCallback(()=>{const s=l.reduce((c,d)=>(c[d.id]=void 0,c),{});j(s);const n=l.map(c=>({...c,value:void 0}));x(n)},[l]),W=t.useCallback(()=>{const s=l.map(n=>({...n,value:i[n.id]}));x(s)},[i,l]),ee=t.useMemo(()=>a.jsxs(a.Fragment,{children:[a.jsx(r,{children:a.jsx(v,{ariaControls:I?"filters-menu":void 0,ariaExpanded:I?"true":void 0,ariaHasPopup:"true",ariaLabel:m("filters.filters.arialabel"),endIcon:a.jsx(xe,{}),isDisabled:p,onClick:s=>{Y(s.currentTarget),k(!0)},variant:"secondary"})}),a.jsx(he,{anchorEl:L,anchorOrigin:{horizontal:"left",vertical:"bottom"},id:"filters-menu",onClose:()=>k(!1),open:I,PaperProps:{ref:O},transformOrigin:{horizontal:"left",vertical:"top"},children:l.map(s=>{var c;const n=(c=u.find(d=>d.id===s.id))==null?void 0:c.value;return a.jsx(be,{"aria-controls":y?"filter-form":void 0,className:e===s&&y===!0?"isVisiblySelected":void 0,onClick:d=>{R(!0),H(d.currentTarget),U(s)},selected:e===s&&y===!0,children:a.jsxs(r,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",width:"100%",minWidth:180,paddingBlock:1,paddingInlineStart:2},children:[a.jsxs(r,{sx:{marginRight:2},children:[a.jsx(je,{fontWeight:"500",sx:{marginBlockEnd:2},children:s.label}),a.jsx(me,{component:"div",children:!n||Array.isArray(n)&&n.length===0?a.jsx(N,{i18nKey:"filters.menuitem.any",values:{label:s.label.toLowerCase()}}):Array.isArray(n)?a.jsx(N,{count:n.length,i18nKey:"filters.menuitem.selected",values:{selected:n.length}}):n})]}),a.jsx(ge,{})]})},s.id)})})]}),[I,p,e,y,L,l,u,m]),se=t.useMemo(()=>e!=null&&e.id?i[e.id]:void 0,[e,i]);return a.jsxs(r,{children:[a.jsxs(r,{sx:{display:"flex",justifyContent:"space-between"},children:[a.jsxs(r,{sx:{display:"flex",gap:2,width:"50%",maxWidth:480},children:[u.length>0&&a.jsxs(a.Fragment,{children:[ee,a.jsx(fe,{anchorEl:q,anchorOrigin:{vertical:"top",horizontal:"right"},elevation:2,id:"filter-form",onClose:s=>{if(O.current){const n=O.current.getBoundingClientRect();s.clientX>=n.left&&s.clientX<=n.right&&s.clientY>=n.top&&s.clientY<=n.bottom||k(!1)}W(),R(!1)},open:y,sx:{marginLeft:2,marginTop:-1},children:a.jsx(r,{sx:{padding:4,minWidth:320},children:a.jsx("form",{noValidate:!0,onSubmit:s=>{s.preventDefault(),W(),R(!1),k(!1)},children:e!=null&&e.render?e.render(T):a.jsxs(a.Fragment,{children:[(e==null?void 0:e.variant)==="autocomplete"&&(e==null?void 0:e.options)&&a.jsxs(ve,{odysseyDesignTokens:F,children:[a.jsx(Ie,{children:a.jsx(ne,{hasMultipleChoices:!0,isCustomValueAllowed:e==null?void 0:e.isCustomValueAllowed,label:e.label,onChange:(s,n)=>{Z(e.id,n)},options:J,value:se})}),a.jsx(v,{ariaLabel:m("filters.submit.label"),endIcon:a.jsx(_,{}),type:"submit",variant:"primary"})]}),((e==null?void 0:e.variant)==="text"||(e==null?void 0:e.variant)==="range"||e&&(e==null?void 0:e.variant)==null)&&a.jsxs(r,{sx:{display:"flex",gap:2,alignItems:"flex-end"},children:[a.jsx(r,{sx:{width:"100%"},children:a.jsx(re,{endAdornment:i[e.id]&&a.jsx(ye,{"aria-label":m("filters.filter.clear"),onClick:()=>{A({filterId:e.id,value:void 0}),T({filterId:e.id,value:void 0})},size:"small",children:a.jsx(Me,{})}),hasInitialFocus:!0,label:e.label,onChange:s=>A({filterId:e.id,value:s.currentTarget.value}),type:e.variant==="range"?"number":"text",value:i[e.id]??""})}),a.jsx(v,{ariaLabel:m("filters.submit.label"),endIcon:a.jsx(_,{}),type:"submit",variant:"primary"})]}),(e==null?void 0:e.variant)==="multi-select"&&(e==null?void 0:e.options)&&a.jsx(te,{isRequired:!0,label:e.label,children:e.options.map(s=>{const c=(i[e.id]||[]).some(d=>d.value===s.value);return a.jsx(le,{isChecked:c,label:s.label,onChange:(d,V)=>{Q(e.id,s,V)},value:s.value},s.value)})}),(e==null?void 0:e.variant)==="select"&&(e==null?void 0:e.options)&&a.jsxs(de,{label:e.label,onChange:(s,n)=>{S({filterId:e.id,value:n})},children:[a.jsx(B,{isChecked:!i[e.id],label:m("filters.filter.any"),value:""}),a.jsx(a.Fragment,{children:e.options.map(s=>a.jsx(B,{isChecked:i[e.id]===s.value,label:s.label,value:s.value},s.value))})]})]})})})})]}),o&&a.jsx("form",{onSubmit:s=>{s.preventDefault(),f&&o(g)},style:{width:"100%"},children:a.jsxs(r,{sx:{display:"flex",gap:2,width:"100%"},children:[a.jsx(oe,{isDisabled:p,label:m("filters.search.label"),onChange:s=>C(s.target.value),onClear:()=>{C(""),o("")},placeholder:m("filters.search.label"),value:g}),f&&a.jsx(r,{children:a.jsx(v,{isDisabled:p,label:m("filters.search.label"),onClick:()=>o(g),variant:"primary"})})]})})]}),a.jsxs(r,{sx:{display:"flex",gap:2},children:[w.length>0&&a.jsx(r,{children:a.jsx(v,{label:m("filters.clear.label"),onClick:P,variant:"secondary"})}),E]})]}),w.length>0&&a.jsx(r,{sx:{borderTopWidth:1,borderTopColor:"#eeeeee",borderTopStyle:"solid",paddingTop:4,marginTop:4},children:a.jsx(K,{activeFilters:w,updateFilterAndInputValues:S})})]})},Te=t.memo(Ae);Te.displayName="DataFilters";export{Te as M};

package/dist/assets/DataTable _labs_-CtXARbkP.js

@@ -0,0 +1,41 @@
+import{j as o}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as m}from"./index-BeeV6X6A.js";import"./index-CtY5BB1N.js";import{M as n,T as e,S as s,D as a}from"./index-BpVuOoKb.js";import{D as r}from"./DataTable _labs_.stories-U7XFYtR6.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-BzLY45Eo.js";import"./iframe-C-RQ_TKY.js";import"./DocsRenderer-CFRXHY34-DEwq8OPY.js";import"./client-akVMpN0m.js";import"./index-DieBXP3Z.js";import"./index-BJTM6NaI.js";import"./index-B5xazMy1.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./index-BJMTVygn.js";import"./personData-Ci-ru1S9.js";import"./Status-BYBMXN_H.js";import"./MuiPropsContext-DhRylJZk.js";import"./Chip-BOK8DR8m.js";import"./createTheme-BmPXDA4p.js";import"./createSvgIcon-DiC7XVU3.js";import"./SvgIcon-BQAg6Jm7.js";import"./DefaultPropsProvider-B7tpShA7.js";import"./generateUtilityClasses-DYvjsuMV.js";import"./chipClasses-BMWKl3Eu.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./ButtonBase-BqXVk-1q.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CWawPfk8.js";import"./TransitionGroupContext-twgBS-Q3.js";import"./buttonBaseClasses-CSPKg76d.js";import"./DataView-BQBP0FCs.js";import"./Box-BXOPvc0Q.js";import"./Box-C2ekHaOu.js";import"./useTheme-C05bJKih.js";import"./Callout-CaNoXhaj.js";import"./Link-ClKgpBXG.js";import"./Typography-D7-qxuiy.js";import"./typographyClasses-D8vr2n3l.js";import"./ExternalLink-DTdulgUc.js";import"./OdysseyDesignTokensContext-BWQIA5ie.js";import"./Typography-CiNRLenM.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./useTranslation-vEf1lqoc.js";import"./context-D_qJ2zXV.js";import"./AlertTitle-DlG4YQWR.js";import"./useSlot-F4Qz2Wzp.js";import"./resolveComponentProps-DMpKAZvD.js";import"./isHostComponent-DVu5iVWx.js";import"./Close-DA_Sph0R.js";import"./IconButton-CK9Do7vj.js";import"./Paper-DbAuDGNI.js";import"./alertTitleClasses-CSPeaunQ.js";import"./useScrollIndication-BJW9jXaC.js";import"./EmptyState-DQoihCwU.js";import"./DataFilters-DVey1xPT.js";import"./Autocomplete-UE4wqxn0.js";import"./useAutocomplete-C7VK9p4p.js";import"./Field-ilPS333M.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"./formLabelClasses-xMgYguuN.js";import"./ScreenReaderText-vq7_Ob_I.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-ZkUAjajs.js";import"./FieldHint-Cv7aMlpU.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase--xDu7aWm.js";import"./inputBaseClasses-PAjj3ZBN.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./GlobalStyles-BxDN_5FT.js";import"./Autocomplete-MfScEzbR.js";import"./ArrowDropDown-bSngWMh1.js";import"./autocompleteClasses-Bi4FgC8v.js";import"./Popper-CwLH-7YW.js";import"./Portal-Bvf2g5iG.js";import"./popper-CMBiYTiD.js";import"./useId-cMcvCE23.js";import"./useControlled-NQulfz4l.js";import"./ListSubheader-DXKE8lW0.js";import"./Checkbox-BTj1hXUa.js";import"./FormControlLabel-CxCmH5hv.js";import"./formControlLabelClasses-BtjP4uib.js";import"./Stack-Ba8l39se.js";import"./useThemeProps-Dy5sAWyz.js";import"./Checkbox-luq82K1t.js";import"./SwitchBase-Bja5dn-O.js";import"./checkboxClasses-Dtdq1kQG.js";import"./CheckboxGroup-Cgc2chES.js";import"./FormGroup-BaCH3e06.js";import"./formGroupClasses-D9ChLj7o.js";import"./Radio-D85jg1Ri.js";import"./Radio-Bi1_KmSD.js";import"./radioClasses-f3ayyf7y.js";import"./createChainedFunction-BO_9K8Jh.js";import"./RadioGroup-BS6oYUQf.js";import"./SearchField-jc9ws93I.js";import"./OdysseyThemeProvider-aR5shtx6.js";import"./useContrastMode-BthoHtLy.js";import"./tooltipClasses-C74HjonW.js";import"./tableRowClasses-inqOIkjd.js";import"./menuItemClasses-DFm3-Sf1.js";import"./inputAdornmentClasses-DYNxkEwO.js";import"./buttonClasses-DtIJBSf4.js";import"./CloseCircleFilled-D2aBlgBe.js";import"./WarningFilled-Y3Vw7n_w.js";import"./Check-BmyOKfcL.js";import"./Close-DA7fBExu.js";import"./ChevronDown-BnAWuc8V.js";import"./index-CpbQl8EB.js";import"./InputAdornment-CFgP75Dd.js";import"./Search-BvCmvJcV.js";import"./Tag-CjPSrGAL.js";import"./TagList-BQKiA1TW.js";import"./TextField-CZ0hstP2.js";import"./Button-BOzIr8Jh.js";import"./BaseButton-B5c4cgt8.js";import"./Tooltip-3088PjcT.js";import"./Tooltip-B4GIR2eB.js";import"./Grow-CIie3qhp.js";import"./utils-gq6yExow.js";import"./Button-BqwcAVQ-.js";import"./Filter-BAXcmMyf.js";import"./Menu-CGJO1mMf.js";import"./Modal-CW5mOzJG.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./MenuList-BboivbXC.js";import"./MenuItem-DjSqFwdt.js";import"./Trans-DZ9nii1x.js";import"./ChevronRight-BB0bQIRj.js";import"./MenuButton-OjJFnmOD.js";import"./BaseMenuButton-DbGGXXbP.js";import"./MenuContext-DKMyPMNY.js";import"./More-axx2rGKU.js";import"./CircularProgress-Ur28_31H.js";import"./CircularProgress-DNk4kmx6.js";import"./Card-B5eIV1vH.js";import"./Skeleton-BJLiCr2o.js";import"./colorManipulator-O7SU8zMv.js";import"./CardActionArea-yvoWcAsF.js";import"./ChevronUp-B9JV-jmd.js";import"./MenuItem-CuP47MJ-.js";import"./List-0o0OI1E9.js";import"./i18next-DbMy2do-.js";import"./index.esm-D7MwfoQM.js";import"./DialogContent-C_FnZ5ZS.js";import"./DialogTitle-CLDQZ0bg.js";import"./useMobilePicker-CfUl5sFz.js";import"./Select-DVJCNQIV.js";import"./useThemeProps-BG38P4ul.js";import"./Collapse-P1H1b4lO.js";import"./Divider-CsWa3KCo.js";import"./DateTimePicker-CnXcHc5u.js";import"./Tabs-ChAj4m0g.js";import"./DatePicker-DIRg7n4d.js";import"./Show-qQzUH4Sq.js";import"./Pagination-CgxBDBwQ.js";import"./ArrowRight-DCIAiEpA.js";import"./constants-CyailK6t.js";import"./Refresh-CPgGX1hz.js";function p(i){const t={code:"code",p:"p",pre:"pre",...m(),...i.components};return o.jsxs(o.Fragment,{children:[o.jsx(n,{of:r}),`
+`,o.jsx(e,{of:r}),`
+`,o.jsx(s,{of:r}),`
+`,o.jsx(a,{of:r}),`
+`,o.jsxs(t.p,{children:[o.jsx(t.code,{children:"DataTable"})," is a convenience wrapper on top of ",o.jsx(t.code,{children:"DataView"})," that allows consumers to use the existing ",o.jsx(t.code,{children:"DataTable"}),` API, so you can have all the benefits
+of `,o.jsx(t.code,{children:"DataView"})," without needing to change any code."]}),`
+`,o.jsxs(t.p,{children:["To use this, just change your existing ",o.jsx(t.code,{children:"DataTable"})," import to use the ",o.jsx(t.code,{children:"@odyssey-react-mui/labs"})," version."]}),`
+`,o.jsx(t.p,{children:"For example, this:"}),`
+`,o.jsx(t.pre,{children:o.jsx(t.code,{children:`<DataTable
+  getData={getData}
+  columns={props.columns}
+  hasChangeableDensity={props.hasChangeableDensity}
+  hasColumnResizing={props.hasColumnResizing}
+  hasColumnVisibility={props.hasColumnVisibility}
+  hasSorting={props.hasSorting}
+  initialDensity={props.initialDensity}
+  renderDetailPanel={props.renderDetailPanel}
+  rowActionButtons={props.rowActionButtons}
+  rowActionMenuItems={props.rowActionMenuItems}
+  {...props}
+/>
+`})}),`
+`,o.jsx(t.p,{children:"is the same as:"}),`
+`,o.jsx(t.pre,{children:o.jsx(t.code,{children:`<DataView
+  availableLayouts={["table"]}
+  getData={getData}
+  tableLayoutOptions={{
+    columns: props.columns,
+    hasChangeableDensity: props.hasChangeableDensity,
+    hasColumnResizing: props.hasColumnResizing,
+    hasColumnVisibility: props.hasColumnVisibility,
+    hasSorting: props.hasSorting,
+    initialDensity: props.initialDensity,
+    renderDetailPanel: props.renderDetailPanel,
+    rowActionButtons: props.rowActionButtons,
+    rowActionMenuItems: props.rowActionMenuItems,
+  }}
+  {...props}
+/>
+`})}),`
+`,o.jsx(t.p,{children:"For more information, consult the DataView documentation."})]})}function gi(i={}){const{wrapper:t}={...m(),...i.components};return t?o.jsx(t,{...i,children:o.jsx(p,{...i})}):p(i)}export{gi as default};

package/dist/assets/DataTable _labs_.stories-U7XFYtR6.js

@@ -0,0 +1,21 @@
+import{j as o}from"./jsx-runtime-CnH95YSl.js";import{f as K}from"./index-BJMTVygn.js";import{r as s}from"./index-NdkWRN8K.js";import{d as Q,c as U,f as X,r as Z}from"./personData-Ci-ru1S9.js";import{M as D,d as ee}from"./DataView-BQBP0FCs.js";import{p as oe}from"./constants-CyailK6t.js";import{M as u}from"./MenuItem-CuP47MJ-.js";import{M as te}from"./Box-BXOPvc0Q.js";import{M as d}from"./Button-BOzIr8Jh.js";import{M as ae,a as ne}from"./Refresh-CPgGX1hz.js";import{M as C}from"./EmptyState-DQoihCwU.js";/*!
+ * Copyright (c) 2024-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 se=({additionalActionButton:t,additionalActionMenuItems:e,bulkActionMenuItems:i,columns:n,currentPage:l,emptyPlaceholder:a,errorMessage:r,filters:I,getData:x,hasChangeableDensity:m,hasColumnResizing:h,hasColumnVisibility:g,initialDensity:b,hasFilters:T,hasPagination:j,hasRowReordering:B,hasRowSelection:O,hasSearch:N,hasSearchSubmitButton:L,hasSorting:R,isLoading:k,isEmpty:v,isNoResults:E,isPaginationMoreDisabled:z,isRowReorderingDisabled:Y,maxResultsPerPage:F,maxPages:V,noResultsPlaceholder:H,onChangeRowSelection:_,paginationType:$,renderDetailPanel:p,resultsPerPage:W,rowActionButtons:y,rowActionMenuItems:P,searchDelayTime:q,totalRows:G})=>{const J=s.useMemo(()=>({columns:n,hasChangeableDensity:m,hasColumnResizing:h,hasColumnVisibility:g,hasSorting:R,initialDensity:b,renderDetailPanel:p,rowActionButtons:y,rowActionMenuItems:P}),[n,m,h,g,R,b,p,y,P]);return o.jsx(D,{additionalActionButton:t,additionalActionMenuItems:e,availableLayouts:["table"],bulkActionMenuItems:i,currentPage:l,emptyPlaceholder:a,errorMessage:r,filters:I,getData:x,hasFilters:T,hasPagination:j,hasRowReordering:B,hasRowSelection:O,hasSearch:N,hasSearchSubmitButton:L,isEmpty:v,isLoading:k,isNoResults:E,isPaginationMoreDisabled:z,isRowReorderingDisabled:Y,maxPages:V,maxResultsPerPage:F,noResultsPlaceholder:H,onChangeRowSelection:_,paginationType:$,resultsPerPage:W,searchDelayTime:q,tableLayoutOptions:J,totalRows:G})},f=s.memo(se);f.displayName="DataTable";const ie={component:D,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"},paginationType:{control:"select",options:oe},resultsPerPage:{control:"number"},totalRows:{control:"number"},hasFilters:{control:"boolean"},hasSearch:{control:"boolean"},hasSearchSubmitButton:{control:"boolean"},filters:{},searchDelayTime:{control:"number"},errorMessage:{control:"text"},emptyPlaceholder:{},noResultsPlaceholder:{},columns:{},initialDensity:{control:"select",options:ee},hasChangeableDensity:{control:"boolean"},hasColumnResizing:{control:"boolean"},hasColumnVisibility:{control:"boolean"},renderDetailPanel:{},rowActionButtons:{},tableRowActionMenuItems:{},hasSorting:{control:"boolean"},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:{onChangeRowSelection:K()}},le=(t,e)=>{const i=s.useCallback(({...a})=>X({data:t,...a}),[t]),n=s.useCallback(({...a})=>{const r=Z({data:t,...a});e(r)},[t,e]),l=s.useCallback(a=>{Object.keys(a).length>0&&console.log(`${Object.keys(a).length} selected`)},[]);return{getData:i,onReorderRows:n,onChangeRowSelection:l}},S=t=>o.jsxs(o.Fragment,{children:[o.jsx(u,{onClick:()=>console.log(t),children:"Action 1"}),o.jsx(u,{onClick:()=>console.log(t),children:"Action 2"})]}),re=()=>o.jsxs(te,{sx:{display:"flex",alignItems:"center",marginInlineEnd:2},children:[o.jsx(d,{ariaLabel:"Pause",endIcon:o.jsx(ae,{}),size:"small",variant:"floating"}),o.jsx(d,{ariaLabel:"Refresh",endIcon:o.jsx(ne,{}),size:"small",variant:"floating"})]}),ce=o.jsx(d,{label:"Add widget",variant:"primary"}),de=o.jsxs(o.Fragment,{children:[o.jsx(u,{onClick:()=>console.log("Action 1"),children:"Action 1"}),o.jsx(u,{onClick:()=>console.log("Action 2"),children:"Action 2"})]}),ue=o.jsx(C,{description:"All relevant data will be displayed and can be searched and filtered",heading:"Start by adding data assets",PrimaryCallToActionComponent:o.jsx(d,{label:"Primary",variant:"primary"}),SecondaryCallToActionComponent:o.jsx(d,{label:"Secondary",variant:"secondary"})}),me=o.jsx(C,{description:"You should try searching or filtering for something else.",heading:"Whoops, there's nothing here!"}),c={render:function(e){const[i,n]=s.useState(Q),{getData:l,onReorderRows:a,onChangeRowSelection:r}=le(i,n);return o.jsx(f,{additionalActionButton:e.hasAdditionalActionButton?ce:void 0,additionalActionMenuItems:e.hasAdditionalActionMenuItems?de:void 0,bulkActionMenuItems:e.hasActionMenuItems?S:void 0,columns:U,currentPage:e.currentPage,emptyPlaceholder:e.hasCustomEmptyPlaceholder?ue:void 0,errorMessage:e.errorMessage,getData:l,hasChangeableDensity:e.hasChangeableDensity,hasColumnResizing:e.hasColumnResizing,hasColumnVisibility:e.hasColumnVisibility,hasFilters:e.hasFilters,hasPagination:e.hasPagination,hasRowReordering:e.hasRowReordering,hasRowSelection:e.hasRowSelection,hasSearch:e.hasSearch,hasSearchSubmitButton:e.hasSearchSubmitButton,hasSorting:e.hasSorting,initialDensity:e.initialDensity,isEmpty:e.isEmpty,isLoading:e.isLoading,isNoResults:e.isNoResults,isRowReorderingDisabled:e.isRowReorderingDisabled,noResultsPlaceholder:e.hasCustomNoResultsPlaceholder?me:void 0,onChangeRowSelection:r,onReorderRows:a,paginationType:e.paginationType,resultsPerPage:e.resultsPerPage,rowActionButtons:e.hasActionButtons?re:void 0,rowActionMenuItems:e.hasActionMenuItems?S:void 0,searchDelayTime:e.searchDelayTime,totalRows:e.totalRows})}};var A,M,w;c.parameters={...c.parameters,docs:{...(A=c.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  render: function C(args) {
+    const [data, setData] = useState<Person[]>(personData);
+    const {
+      getData,
+      onReorderRows,
+      onChangeRowSelection
+    } = useDataCallbacks(data, setData);
+    return <DataTable additionalActionButton={args.hasAdditionalActionButton ? additionalActionButton : undefined} additionalActionMenuItems={args.hasAdditionalActionMenuItems ? additionalActionMenuItems : undefined} bulkActionMenuItems={args.hasActionMenuItems ? actionMenuItems : undefined} columns={personColumns} currentPage={args.currentPage} emptyPlaceholder={args.hasCustomEmptyPlaceholder ? customEmptyPlaceholder : undefined} errorMessage={args.errorMessage} getData={getData} hasChangeableDensity={args.hasChangeableDensity} hasColumnResizing={args.hasColumnResizing} hasColumnVisibility={args.hasColumnVisibility} hasFilters={args.hasFilters} hasPagination={args.hasPagination} hasRowReordering={args.hasRowReordering} hasRowSelection={args.hasRowSelection} hasSearch={args.hasSearch} hasSearchSubmitButton={args.hasSearchSubmitButton} hasSorting={args.hasSorting} initialDensity={args.initialDensity} isEmpty={args.isEmpty} isLoading={args.isLoading} isNoResults={args.isNoResults} isRowReorderingDisabled={args.isRowReorderingDisabled} noResultsPlaceholder={args.hasCustomNoResultsPlaceholder ? customNoResultsPlaceholder : undefined} onChangeRowSelection={onChangeRowSelection} onReorderRows={onReorderRows} paginationType={args.paginationType} resultsPerPage={args.resultsPerPage} rowActionButtons={args.hasActionButtons ? actionButtons : undefined} rowActionMenuItems={args.hasActionMenuItems ? actionMenuItems : undefined} searchDelayTime={args.searchDelayTime} totalRows={args.totalRows} />;
+  }
+}`,...(w=(M=c.parameters)==null?void 0:M.docs)==null?void 0:w.source}}};const he=["Default"],Ce=Object.freeze(Object.defineProperty({__proto__:null,Default:c,__namedExportsOrder:he,default:ie},Symbol.toStringTag,{value:"Module"}));export{Ce as D};