import{j as e}from"./jsx-runtime-CnH95YSl.js";import{useMDXComponents as s}from"./index-BeeV6X6A.js";import"./index-_dyfSX8u.js";import{M as c,T as a,S as l,D as d,P as p,a as h,C as n}from"./index-DLgQDw3r.js";import{D as t,N as m,J as x,S as j,A as f}from"./DataFilters _labs_.stories-Ca9tvzkv.js";import"./index-NdkWRN8K.js";import"./_commonjsHelpers-gnU0ypJ3.js";import"./preview-D06dtFvI.js";import"./iframe-Cf-Lpz6Y.js";import"./DocsRenderer-CFRXHY34-CCeAz_jE.js";import"./client-ByW5HbEz.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"./OdysseyStorybookThemeDecorator-BuDiOG2V.js";import"./OdysseyThemeProvider-Bh0Bu-2o.js";import"./OdysseyProvider-qIn9QVYS.js";import"./DataFilters-BnT_U3-o.js";import"./Autocomplete-Cpi_kUVA.js";import"./useAutocomplete-BRetTkpF.js";import"./index.esm-CBOWgn41.js";import"./assertThisInitialized-B9jnkVVz.js";import"./inheritsLoose-CJ6Ie9dp.js";import"./Field-DH3L8v09.js";import"./Box-1mvP3NLW.js";import"./Box-BcMTQ_R2.js";import"./createBox-Dxawkfow.js";import"./List-CmjR1pNu.js";import"./ListItem-C0ExFtXb.js";import"./utils-iop7lDec.js";import"./useFormControl-BMISTZuX.js";import"./FormLabel-CiGre9wK.js";import"./useIsFocusVisible-DH0qxT5e.js";import"./isHostComponent-DVu5iVWx.js";import"./ButtonBase-BNqa2TMD.js";import"./TransitionGroupContext-DAL84N7p.js";import"./ScreenReaderText-CebALBsG.js";import"./visuallyHidden-Dan1xhjv.js";import"./FormHelperText-CsNAE1E3.js";import"./FieldHint-B3Jif_Up.js";import"./Typography-Cz6D417Y.js";import"./Typography-ClQ35Rr-.js";import"./useUniqueId-Bsgqe1tm.js";import"./createUniqueId-ByTaVY63.js";import"./inputUtils-Dbi8XkA6.js";import"./InputBase-DeB4_faH.js";import"./ownerWindow-HkKU3E4x.js";import"./ownerDocument-DW-IO8s5.js";import"./debounce-Be36O1Ab.js";import"./Autocomplete-CxtGbb8j.js";import"./ArrowDropDown-DdemyKZU.js";import"./createSvgIcon-ClUWwDzL.js";import"./Close-OXBt1nIe.js";import"./Paper-D-_O-EjU.js";import"./Popper-BARIxJrI.js";import"./popper-BVOCD5jc.js";import"./Portal-C6D59xAE.js";import"./getReactElementRef-DsIevm5t.js";import"./resolveComponentProps-DXQ8X87i.js";import"./useControlled-NQulfz4l.js";import"./Chip-CXnMieIl.js";import"./IconButton-5qShmnSr.js";import"./ListSubheader-CQJAAOsd.js";import"./Button-BEA5U6Tg.js";import"./BaseButton-DYZHKnV3.js";import"./MuiPropsContext-DhRylJZk.js";import"./Tooltip-CsVWtVfL.js";import"./Tooltip-Cq2rQGbD.js";import"./Grow-C8kUeGCY.js";import"./utils-kUZVaD1e.js";import"./Button-BzIwUmSM.js";import"./Checkbox-DPv3Q9UW.js";import"./Hint-DoJneNg9.js";import"./FormControlLabel-0BBemR80.js";import"./Stack-B7OGvu7C.js";import"./createStyled-D6bTcpHC.js";import"./useThemeProps-DwvbKxez.js";import"./Checkbox-vZwuXtzm.js";import"./SwitchBase-CefEM0OA.js";import"./CheckboxGroup-Be66QML5.js";import"./FormGroup-HFkGZ983.js";import"./Radio-BdNnpooK.js";import"./Radio-B4gVvwps.js";import"./createChainedFunction-BO_9K8Jh.js";import"./RadioGroup-BYJZ378_.js";import"./RadioGroup-CtUWSbQc.js";import"./SearchField-BdnOrhVM.js";import"./InputAdornment-CdR3XT6f.js";import"./Search-C5TVrLyE.js";import"./Tag-DwH0t814.js";import"./TagList-BZGEhGXn.js";import"./TextField-BhK0y2Zt.js";import"./Filter-DsDJ7si-.js";import"./Menu-K9lpVvDG.js";import"./Modal-CSDyCVCf.js";import"./getScrollbarSize-Bqq2hMjQ.js";import"./Fade-dUgBN8rJ.js";import"./MenuList-BMOesnfs.js";import"./MenuItem-vhp8G-Nb.js";import"./ChevronRight-C12ToI7Y.js";import"./Bug-CQIUmZ-N.js";import"./Settings-2rTKyez8.js";function o(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(l,{of:t}),`
`,e.jsx(d,{of:t}),`
`,e.jsx(p,{of:t}),`
`,e.jsx(h,{}),`
`,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(n,{of:m}),`
`,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(n,{of:x}),`
`,e.jsx(n,{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(n,{of:f})]})}function xi(r={}){const{wrapper:i}={...s(),...r.components};return i?e.jsx(i,{...r,children:e.jsx(o,{...r})}):o(r)}export{xi as default};
