@mendylanda/ui 0.3.0-alpha.8 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -86,9 +86,9 @@ Opening the menu shows the category list without choosing a filter. Focusing a c
86
86
 
87
87
  See [defaults and app configuration](https://ui.mendylanda.com/docs/defaults) for the full behavior and [system reference](https://ui.mendylanda.com/docs/system) for query adapters, selected-label loading, grouped fields, and custom editors.
88
88
 
89
- ## Table (alpha)
89
+ ## Table
90
90
 
91
- Install `@mendylanda/ui@alpha` to try the table. This API may change during the alpha.
91
+ The table is exported from `@mendylanda/ui/table`.
92
92
 
93
93
  ```tsx
94
94
  import { DataTable, defineColumns, format } from "@mendylanda/ui/table";
@@ -119,7 +119,7 @@ Pass a filter controller once to place the shared filter bar and connect table r
119
119
 
120
120
  Create the controller with `useFilters`, `useUrlFilters`, or `useControlledFilters`. Its values remain application query state. The table does not derive a predicate or fetch rows from filter definitions. Set `filterBar={false}` when controls live elsewhere, or use `TableFilters` and `TableView` with the same controller in a composed layout.
121
121
 
122
- Tables fit their rows, headers, and empty content by default, capped at 65dvh. Short tables do not reserve a vertical scrollbar. Full-page layouts can set an explicit `height`. Rows remain 44px unless `rowHeight="auto"` opts into measurement for wrapped or editable content. Selected rows receive the standard highlight; `isRowHighlighted` adds application state. `onRowClick`, `rowClassName`, and `renderRowDetail` cover row actions and expandable content.
122
+ Tables use `layout="content"` by default, fitting their rows, headers, and empty content up to 65dvh. Short tables do not reserve a vertical scrollbar. An explicit `height` sets the table viewport in content layout. `layout="fill"` measures the space from the component's top to the bottom of the viewport and remeasures when the viewport resizes or content above the table changes size. `DataTable` reserves its toolbar, pagination, and footer automatically. Composed layouts can pass controls below the grid through `TableView`'s `footer` prop. Rows remain 44px unless `rowHeight="auto"` opts into measurement for wrapped or editable content. Selected rows receive the standard highlight; `isRowHighlighted` adds application state. `onRowClick`, `rowClassName`, and `renderRowDetail` cover row actions and expandable content.
123
123
 
124
124
  Changes to table query state or the shared controller reset scroll and cell selection. Appending rows keeps the current position and selection. Empty states distinguish an empty dataset, an empty filtered result with one controller clear, and an empty later page that can return to the first page. Locked filters never get a clear action.
125
125
 
@@ -1 +1 @@
1
- export const originalClassNames = {"mui-cb20bd519346":"pointer-events-auto","mui-33228ff7d583":"pointer-events-none","mui-b75af7ef6c4d":"invisible","mui-d42ef1497900":"visible","mui-32fb090591d9":"sr-only","mui-747355bdc2a2":"absolute","mui-d2d9e1f13413":"relative","mui-964a9431ff49":"sticky","mui-ce13093ad8c9":"inset-0","mui-3ba24c062d55":"inset-x-0","mui-eb9e48c5dda9":"inset-y-0","mui-cced28c6dc3f":"start","mui-207bd0b3f259":"start-2","mui-cea70f23972e":"start-3","mui-361e48d0308f":"end","mui-13422ddc8d83":"end-1","mui-585f4729f611":"end-9","mui-98599e4ee250":"top-0","mui-4e45f4841abb":"top-1/2","mui-a74c4477017c":"right-0","mui-30150dd033ab":"bottom-0","mui-a5c36273c0f0":"bottom-2","mui-635702706586":"left-0","mui-014aadadffad":"isolate","mui-d7efd1b0b0f9":"z-1","mui-418e44ad4f9e":"z-10","mui-4e8f0a87a0dc":"z-20","mui-fbb62f5cb6fe":"z-30","mui-3eef1ce97dba":"z-50","mui-a42d519714d6":"container","mui-a2526bc2efa3":"m-0","mui-abba77319850":"-mx-1","mui-1752f11474a6":"mx-auto","mui-d8747231f142":"my-1","mui-958e2cfcf5b6":"-ms-2","mui-291952c2525a":"-ms-px","mui-8cc46fa87f41":"-me-1.5","mui-f28fea81a5cd":"mt-2","mui-cc51bda60e7e":"ml-auto","mui-496aca80e4d8":"block","mui-d1b2a59fbea7":"contents","mui-222f930b8752":"flex","mui-0f2a693e93e2":"grid","mui-e564b4081d7a":"hidden","mui-995cf20a9c45":"inline","mui-123306850fe1":"inline-flex","mui-0d4fc4a78d37":"table","mui-3da89b3ed14b":"field-sizing-content","mui-129d6f9b1e07":"aspect-square","mui-f7d12b41bceb":"size-(--cell-size)","mui-dc797fcc7165":"size-1.5","mui-5e34f5313859":"size-3","mui-61c000c8a98a":"size-3.5","mui-100c22d5776b":"size-4","mui-2bd43fb57913":"size-5","mui-0712570dcc9f":"size-6","mui-79ede756e761":"size-7","mui-ebd37e04d422":"size-8","mui-3ee10ef4c057":"size-9","mui-d0a383a9c24f":"size-10","mui-4dad94bd15e3":"size-auto","mui-a5960ac1d283":"h-(--cell-size)","mui-c7d5500b77ab":"h-0","mui-2edce89ef182":"h-3","mui-099be97e1fa4":"h-4","mui-ce1945804664":"h-6","mui-c8e50836f8a1":"h-7","mui-1fb07b38c63b":"h-8","mui-539ae144f076":"h-9","mui-fdd2f85cad6b":"h-10","mui-a66e9985b093":"h-auto","mui-57c930dc1c31":"h-full","mui-ae2c4b060bb9":"h-px","mui-571ea69568d3":"max-h-(--filter-menu-height)","mui-1f061e70178e":"max-h-(--radix-dropdown-menu-content-available-height)","mui-4d3f1304ebb2":"max-h-(--radix-popover-content-available-height)","mui-da0beef015c9":"max-h-[400px]","mui-80baa5d03af7":"max-h-[calc(var(--filter-menu-height)-2px)]","mui-1326520533f0":"max-h-[min(6rem,calc(var(--filter-menu-height)*0.25))]","mui-fb4a3e97b5bd":"max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height,20rem))]","mui-dcd942c18ddc":"max-h-[var(--radix-dropdown-menu-content-available-height)]","mui-7bd696ca6be3":"max-h-full","mui-410da8dfa8ac":"min-h-0","mui-9974acedf3f7":"min-h-9","mui-8423dc94ee06":"min-h-10","mui-50312c3ce4a3":"min-h-[60px]","mui-d48fe95d4da8":"w-(--cell-size)","mui-d4ea834145ae":"w-2","mui-56bb14cbd1fe":"w-2/3","mui-8867d85ed290":"w-8","mui-4ac4ec8dfbce":"w-40","mui-37535002f0f7":"w-72","mui-a4cce7869436":"w-[300px]","mui-fc6a57ff7553":"w-[var(--mendy-filter-editor-width,19rem)]","mui-0b9c84552e40":"w-[var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,18.75rem))]","mui-4415137b0467":"w-[var(--mendy-filter-menu-width,calc(var(--filter-list-width)_+_var(--mendy-filter-editor-width,19rem)))]","mui-8cfb5a42ef9f":"w-fit","mui-58d0413dd93c":"w-full","mui-91f82aa1df0c":"max-w-[60%]","mui-34055e6f8c1b":"max-w-[calc(100vw-2rem)]","mui-81b198a2db84":"max-w-full","mui-1458e495e3ae":"min-w-(--cell-size)","mui-184ddc11e5f9":"min-w-0","mui-e9ab1547c94d":"min-w-[8rem]","mui-2bf6510f1330":"min-w-full","mui-7bd5bab6d7f4":"flex-1","mui-66b490dd6005":"shrink","mui-27ead27a81df":"shrink-0","mui-adca5146416e":"grow","mui-215061302c50":"border-collapse","mui-3a3774477287":"origin-(--radix-dropdown-menu-content-transform-origin)","mui-5dde0fd996f0":"-translate-y-1/2","mui-4e3f08588318":"-rotate-45","mui-c80411b7591f":"rotate-45","mui-aa214ea38326":"transform","mui-393df0d154e0":"animate-none!","mui-7b3cd77eb999":"animate-pulse","mui-2c14b55d77e6":"animate-spin","mui-2194d094b585":"cursor-col-resize","mui-d343f41ba73e":"cursor-default","mui-f2e47d9c52ad":"cursor-grab","mui-d2fa8848968d":"cursor-pointer","mui-739a9a000791":"touch-none","mui-acd532d8913e":"resize","mui-ae112c903ef8":"resize-y","mui-eeb3a8b33f69":"grid-cols-[min(var(--filter-list-width),calc(100%_-_min(var(--mendy-filter-editor-width,19rem),50%)))_minmax(0,1fr)]","mui-b5985369ee35":"grid-rows-[minmax(0,1fr)]","mui-302c0d124a94":"flex-col","mui-faa8a23c68f6":"flex-wrap","mui-8fd2e2355cbc":"place-content-center","mui-71556df3b421":"items-center","mui-b9677bd1cb66":"items-start","mui-32c92bb1fde4":"justify-between","mui-a503dd374cca":"justify-center","mui-307644c34db6":"justify-end","mui-c62ec162662e":"justify-start","mui-19e97f3f40e6":"gap-1","mui-70007b876865":"gap-1.5","mui-074569488cca":"gap-2","mui-d7db3451d154":"gap-3","mui-90fc3ec35a37":"gap-4","mui-27e6c432192f":"space-y-1","mui-267171770524":"space-y-2","mui-5a3a4ee420c2":"truncate","mui-1a26a0d28420":"overflow-auto","mui-d5111d0e9f48":"overflow-hidden","mui-0fc84a692dad":"overflow-visible","mui-3b82279f859f":"overflow-x-hidden","mui-2368e909f3a5":"overflow-y-auto","mui-998780cdef87":"overscroll-contain","mui-b005d61d0953":"rounded-full","mui-3fa8c572949b":"rounded-md","mui-52417259a4f5":"rounded-none","mui-02e603944040":"rounded-sm","mui-b31810dbd8a9":"rounded-s-none","mui-10c0bae8cba9":"rounded-l-md","mui-34bbd346e74c":"rounded-r-md","mui-4f1a55de40bc":"border","mui-dad556abfe15":"border-0","mui-55860251be20":"border-s","mui-3b6d5fc7b061":"border-e","mui-894c3815a57f":"border-t","mui-bbe39cfb5cc6":"border-b","mui-8450eb0f1857":"border-dashed","mui-163a623b3716":"border-border/50","mui-1267095cdeb7":"border-input","mui-9b76f456b8c9":"border-muted-foreground/50","mui-515f9fdc6db7":"border-primary","mui-292affc1f780":"bg-accent","mui-5b272f3c5076":"bg-background","mui-a943bea85d66":"bg-border","mui-0cf6c2e8fe7e":"bg-current","mui-965cf6587342":"bg-destructive","mui-047624ec0c39":"bg-green-100","mui-6ba846e1630e":"bg-inherit","mui-87ecb59f2d2d":"bg-muted","mui-810ae775809b":"bg-muted-foreground/20","mui-e593c38256e0":"bg-popover","mui-0c2864fba576":"bg-primary","mui-d191cb569aac":"bg-secondary","mui-8fca9236d191":"bg-transparent","mui-04760bcd507f":"p-0","mui-1dee6e3ec67d":"p-1","mui-b97db4a9f432":"p-2","mui-094f5333853b":"p-3","mui-c432836760e3":"p-6","mui-c7902d77ad80":"p-8","mui-56b8f5e0fb12":"px-(--cell-size)","mui-16e909e6f01d":"px-0","mui-1da2e8f173c5":"px-1.5","mui-e7e01cc7f4df":"px-2","mui-0f9e6672913a":"px-3","mui-9513b3968002":"px-4","mui-0194c6e46323":"px-8","mui-1fcf28756bb1":"py-1","mui-a8c1dfb1d4ef":"py-1.5","mui-b5edc3ea7c91":"py-2","mui-d3cea061f2f3":"py-3","mui-96b92a971c95":"py-5","mui-078d945937da":"ps-8","mui-b2100041c585":"ps-9","mui-05d4103bd67f":"pe-2","mui-a202804a1738":"pe-3","mui-0e14c365f9e8":"pe-9","mui-559069d2c2e5":"pe-16","mui-0a702d97ed7d":"pt-3","mui-1a52da5bc88c":"pr-1","mui-f5d8e661d857":"pl-2","mui-05ab12448317":"text-center","mui-10558dbb3a24":"text-end","mui-e9347b78185f":"text-start","mui-757071a1d1c4":"text-base","mui-c74ab393b96d":"text-sm","mui-3992de70b033":"text-xs","mui-5f120ad4b50b":"text-[0.8rem]","mui-761cdb81bddb":"leading-none","mui-daaac3fbf55e":"font-medium","mui-52101fc7d8bb":"font-normal","mui-e1683b3c030a":"tracking-widest","mui-393883c1db68":"[overflow-wrap:anywhere]","mui-37cf9655f30a":"break-words","mui-726fca123972":"whitespace-normal","mui-963f6168b7d6":"whitespace-nowrap","mui-cc209238d847":"text-accent-foreground","mui-5eafab9bbefc":"text-current","mui-887b9502d5c7":"text-destructive","mui-8d4bf2704c8d":"text-destructive-foreground","mui-957a109f887f":"text-foreground","mui-35f35c41d134":"text-muted-foreground","mui-5bd2afe89f0b":"text-popover-foreground","mui-249f14ee5b6b":"text-primary","mui-abd1aaa1f5b2":"text-primary-foreground","mui-80df79ec9bb5":"text-secondary-foreground","mui-944969efb294":"underline","mui-d52f902a57e8":"underline-offset-4","mui-94f91922a10e":"opacity-0","mui-0b5a4d1257ab":"opacity-50","mui-65694092f002":"opacity-100","mui-0d4ca75de41c":"shadow-lg","mui-94ea94fde25f":"shadow-md","mui-89c3006b2722":"shadow-none","mui-7de07d413c13":"shadow-xs","mui-853be6c11609":"ring-2","mui-fd9d0b696aac":"ring-primary","mui-59edd3d33673":"outline-hidden","mui-318678825324":"outline","mui-e42932b7a79c":"blur","mui-e0122edc668b":"drop-shadow-md","mui-dfc3376b8266":"filter","mui-70dd37c11434":"transition","mui-eae178841c68":"transition-colors","mui-2cdd01663c76":"transition-opacity","mui-2b48746f4314":"transition-shadow","mui-b4b2fd95f324":"transition-none","mui-b30fc56058b6":"outline-none","mui-78905c9e865c":"select-none","mui-d80b6593dae5":"[--cell-size:--spacing(8)]","mui-82c2977beb8e":"[--cell-size:min(2rem,calc((100vw-3.5rem)/7))]","mui-d7d803c609c5":"[--filter-list-width:var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,13rem))]","mui-971625533e56":"[--filter-menu-height:min(var(--mendy-filter-menu-max-height,44rem),var(--radix-dropdown-menu-content-available-height,44rem))]","mui-cacb19aa9640":"[scrollbar-width:thin]","mui-14bd99410890":"[unicode-bidi:isolate]","mui-97b1c00ff005":"group-hover:bg-accent","mui-ad936fcbed63":"group","mui-9af9a4182597":"group-data-[disabled=true]:pointer-events-none","mui-272ef88d6a0c":"group-data-[disabled=true]:opacity-50","mui-60052b901494":"group-data-[focused=true]/day:relative","mui-d9c5891363f9":"group/day","mui-3f96bf138f7b":"group-data-[focused=true]/day:z-10","mui-d39eb62b8363":"group-data-[focused=true]/day:border-ring","mui-5892a880410a":"group-data-[focused=true]/day:ring-1","mui-31b75c623c06":"group-data-[focused=true]/day:ring-ring","mui-e6020023567a":"group-data-[highlighted=true]:bg-accent","mui-f0ee83167878":"peer-disabled:cursor-not-allowed","mui-2ffc1d06387e":"peer","mui-25d26df52a1d":"peer-disabled:opacity-50","mui-32713fefe32f":"file:border-0","mui-25a74d576c42":"file:bg-transparent","mui-844abccf1fd0":"file:text-sm","mui-dc43de54f42a":"file:font-medium","mui-20315da78444":"placeholder:text-muted-foreground","mui-3deb00079b4c":"first:border-s-0","mui-37ad15a95595":"hover:bg-accent","mui-bb6a4b3e902d":"hover:bg-destructive/90","mui-5cbdd1b32f1a":"hover:bg-muted/50","mui-4273133a876a":"hover:bg-primary/20","mui-af9ea085901b":"hover:bg-primary/90","mui-099700a5a311":"hover:bg-secondary/80","mui-71863717995b":"hover:bg-transparent","mui-9f1f77b92dcb":"hover:text-accent-foreground","mui-4d6720d47806":"hover:text-foreground","mui-b56720602554":"hover:underline","mui-8da02faac748":"hover:opacity-100","mui-a8c1861c5d03":"focus:bg-accent","mui-a85c4c5d7465":"focus:text-accent-foreground","mui-b906a32b31ee":"focus-visible:border-ring","mui-2f669cfad5aa":"focus-visible:bg-primary/20","mui-39be5a15b766":"focus-visible:ring-1","mui-355efe22aedb":"focus-visible:ring-2","mui-365a4654f7b1":"focus-visible:ring-[3px]","mui-db549d38ff19":"focus-visible:ring-ring","mui-392a26f4c1b0":"focus-visible:ring-ring/50","mui-a47d391255f3":"focus-visible:outline","mui-1df9125eebaf":"focus-visible:outline-1","mui-a8719ed8b095":"focus-visible:-outline-offset-2","mui-2b1c7d88acff":"focus-visible:outline-primary","mui-223daa83ed2d":"focus-visible:outline-ring","mui-2e357972fc10":"focus-visible:outline-none","mui-50aafa8694bb":"focus-visible:ring-inset","mui-71998ea7a2d0":"active:cursor-grabbing","mui-8d3c1014b967":"disabled:pointer-events-none","mui-db567af109b7":"disabled:cursor-not-allowed","mui-4600b77303d6":"disabled:opacity-50","mui-7eb7501a2ef0":"has-focus:border-ring","mui-d0449753ba7b":"has-focus:ring-[3px]","mui-fc19c8471f34":"has-focus:ring-ring/50","mui-e288cffc2ef4":"has-[>svg]:px-1.5","mui-3b01ee05b16d":"has-[>svg]:px-2.5","mui-9e08353b774f":"has-[>svg]:px-3","mui-2c0115d1c32a":"aria-disabled:opacity-50","mui-1fac1d7d1df3":"aria-invalid:border-destructive","mui-2d91b4cbc3cb":"aria-invalid:ring-destructive","mui-5491fd0b4dc5":"aria-invalid:ring-destructive/20","mui-2d6703b5473b":"aria-pressed:bg-accent","mui-ff2dcda51a27":"aria-pressed:text-accent-foreground","mui-7d900a71e5ba":"aria-selected:text-muted-foreground","mui-397f5ba426a0":"data-[disabled]:pointer-events-none","mui-9beb654fcb0d":"data-[disabled]:opacity-50","mui-9d7d1760cd8e":"data-[highlighted=true]:bg-accent","mui-6fa6a8ade7c4":"data-[inset]:pl-8","mui-bbaaa5969856":"data-[more-below=true]:[mask-image:linear-gradient(#000_calc(100%_-_1rem),transparent)]","mui-dfc89afd7885":"data-[navigation=pointer]:focus-visible:ring-0","mui-96308b55e0d6":"data-[range-end=true]:rounded-md","mui-a55dbe6f3eec":"data-[range-end=true]:rounded-r-md","mui-714051e55e8e":"data-[range-end=true]:bg-primary","mui-c764cebcd540":"data-[range-end=true]:text-primary-foreground","mui-05ec0700cd48":"data-[range-middle=true]:rounded-none","mui-5fb598fb06f4":"data-[range-middle=true]:bg-accent","mui-0813905aa141":"data-[range-middle=true]:text-accent-foreground","mui-8020e31bff67":"data-[range-start=true]:rounded-md","mui-ab65911baf1d":"data-[range-start=true]:rounded-l-md","mui-f5460d79341c":"data-[range-start=true]:bg-primary","mui-421a7d3e6631":"data-[range-start=true]:text-primary-foreground","mui-a39af81d518c":"data-[selected-single=true]:bg-primary","mui-b6991ab170de":"data-[selected-single=true]:text-primary-foreground","mui-3cc0d07ef843":"data-[selected=true]:rounded-none","mui-89f6aab7a3f8":"data-[side=bottom]:slide-in-from-top-2","mui-3550f48d66b9":"data-[side=left]:slide-in-from-right-2","mui-7720fe004f5c":"data-[side=right]:slide-in-from-left-2","mui-66b560f839de":"data-[side=top]:slide-in-from-bottom-2","mui-20553d55d224":"data-[state=checked]:border-primary","mui-57d6d6401a2f":"data-[state=checked]:bg-primary","mui-7ca12016214f":"data-[state=checked]:text-primary-foreground","mui-37d8a3f448ff":"data-[state=closed]:animate-none!","mui-0cb4489c3645":"data-[state=closed]:animate-out","mui-bb5869ef903b":"data-[state=closed]:fade-out-0","mui-f4cf4be63707":"data-[state=closed]:zoom-out-95","mui-bae1e782f277":"data-[state=open]:animate-in","mui-4027d9c589b6":"data-[state=open]:bg-accent","mui-1952cd5b00aa":"data-[state=open]:text-accent-foreground","mui-6f73a280432e":"data-[state=open]:text-foreground","mui-790ed041a953":"data-[state=open]:opacity-100","mui-45464a92c1f6":"data-[state=open]:fade-in-0","mui-9ca352480f25":"data-[state=open]:zoom-in-95","mui-f3f7a9c5e1b3":"data-[variant=destructive]:text-destructive","mui-e2bb4ac97190":"data-[variant=destructive]:focus:bg-destructive/10","mui-353a727facfd":"data-[variant=destructive]:focus:text-destructive","mui-237747164b60":"motion-reduce:animate-none","mui-0cc20f4e20c8":"sm:w-[21.875rem]","mui-56760b222da0":"md:flex-row","mui-c05c9b99939d":"md:text-sm","mui-36b12e8339c7":"rtl:rotate-180","mui-d254c96aea74":"dark:bg-green-950","mui-9daa2369a41b":"dark:bg-input/30","mui-b2786f463a62":"dark:hover:text-accent-foreground","mui-c88f65aa011e":"dark:aria-invalid:ring-destructive/40","mui-bd73d819941e":"dark:data-[state=checked]:bg-primary","mui-98a28c2293f7":"dark:data-[variant=destructive]:focus:bg-destructive/20","mui-d78a8526410d":"pointer-coarse:[--cell-size:min(2.5rem,calc((100vw-3.5rem)/7))]","mui-b51243872d85":"sm:pointer-fine:h-8","mui-e771a8b4d87d":"sm:pointer-fine:h-9","mui-aa0e3c036805":"sm:pointer-fine:min-h-8","mui-0288c4ea71ea":"sm:pointer-fine:py-0.5","mui-41d1475cf71a":"sm:pointer-fine:py-1.5","mui-548a450e8e53":"[&_*]:transition-none!","mui-a1c8c43d9be2":"[&_[role^=menuitem]]:min-h-9","mui-b43343fe71c0":"sm:pointer-fine:[&_[role^=menuitem]]:min-h-8","mui-cc310a330231":"[&_button]:font-semibold","mui-b7ff49878425":"[&_button]:underline","mui-d9bdd2c94504":"[&_button]:underline-offset-4","mui-bcae9d37090c":"[&_svg]:pointer-events-none","mui-c77732bd3ab4":"[&_svg]:size-3.5","mui-040e748a3fa0":"[&_svg]:shrink-0","mui-be87a4a64d81":"[&_svg:not([class*='size-'])]:size-3","mui-eb5ef2dbc2d4":"[&_svg:not([class*='size-'])]:size-4","mui-8637dfd54fbb":"[&_svg:not([class*='text-'])]:text-muted-foreground","mui-4f05a238500e":"[&::-webkit-search-cancel-button]:appearance-none","mui-74ab31abd804":"[&:first-child[data-selected=true]_button]:rounded-l-md","mui-13858191ca50":"rtl:**:[.rdp-button\\_next>svg]:rotate-180","mui-a324a7f99932":"rtl:**:[.rdp-button\\_previous>svg]:rotate-180","mui-82b114bbff3d":"data-[variant=destructive]:*:[svg]:text-destructive!","mui-6ee0c74de40c":"[&:last-child[data-selected=true]_button]:rounded-r-md","mui-6162ab70efb5":"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md","mui-f157ee6bae99":"[&>div]:w-full","mui-ba417cf466b0":"[&>span]:text-xs","mui-829c8ef4f9c5":"[&>span]:opacity-70","mui-bf95f682e553":"[&>span:first-child]:mt-[calc(0.5lh-0.4375rem)]","mui-eb740dd32318":"[&>svg]:size-3.5","mui-019fd73c95db":"[&>svg]:text-muted-foreground","mui-b8293c91796c":"[[data-slot=card-content]_&]:bg-transparent","mui-8dd7e6b42262":"[[data-slot=popover-content]_&]:bg-transparent"};
1
+ export const originalClassNames = {"mui-cb20bd519346":"pointer-events-auto","mui-33228ff7d583":"pointer-events-none","mui-b75af7ef6c4d":"invisible","mui-d42ef1497900":"visible","mui-32fb090591d9":"sr-only","mui-747355bdc2a2":"absolute","mui-d2d9e1f13413":"relative","mui-964a9431ff49":"sticky","mui-ce13093ad8c9":"inset-0","mui-3ba24c062d55":"inset-x-0","mui-eb9e48c5dda9":"inset-y-0","mui-cced28c6dc3f":"start","mui-207bd0b3f259":"start-2","mui-cea70f23972e":"start-3","mui-361e48d0308f":"end","mui-13422ddc8d83":"end-1","mui-585f4729f611":"end-9","mui-98599e4ee250":"top-0","mui-4e45f4841abb":"top-1/2","mui-a74c4477017c":"right-0","mui-30150dd033ab":"bottom-0","mui-a5c36273c0f0":"bottom-2","mui-635702706586":"left-0","mui-014aadadffad":"isolate","mui-d7efd1b0b0f9":"z-1","mui-418e44ad4f9e":"z-10","mui-4e8f0a87a0dc":"z-20","mui-fbb62f5cb6fe":"z-30","mui-3eef1ce97dba":"z-50","mui-a42d519714d6":"container","mui-a2526bc2efa3":"m-0","mui-abba77319850":"-mx-1","mui-1752f11474a6":"mx-auto","mui-d8747231f142":"my-1","mui-958e2cfcf5b6":"-ms-2","mui-291952c2525a":"-ms-px","mui-8cc46fa87f41":"-me-1.5","mui-477d8f4dfce9":"me-1","mui-68d781378b03":"me-2","mui-f28fea81a5cd":"mt-2","mui-cc51bda60e7e":"ml-auto","mui-496aca80e4d8":"block","mui-d1b2a59fbea7":"contents","mui-222f930b8752":"flex","mui-0f2a693e93e2":"grid","mui-e564b4081d7a":"hidden","mui-995cf20a9c45":"inline","mui-123306850fe1":"inline-flex","mui-0d4fc4a78d37":"table","mui-3da89b3ed14b":"field-sizing-content","mui-129d6f9b1e07":"aspect-square","mui-f7d12b41bceb":"size-(--cell-size)","mui-dc797fcc7165":"size-1.5","mui-5e34f5313859":"size-3","mui-61c000c8a98a":"size-3.5","mui-100c22d5776b":"size-4","mui-2bd43fb57913":"size-5","mui-0712570dcc9f":"size-6","mui-79ede756e761":"size-7","mui-ebd37e04d422":"size-8","mui-3ee10ef4c057":"size-9","mui-d0a383a9c24f":"size-10","mui-4dad94bd15e3":"size-auto","mui-a5960ac1d283":"h-(--cell-size)","mui-c7d5500b77ab":"h-0","mui-2edce89ef182":"h-3","mui-099be97e1fa4":"h-4","mui-ce1945804664":"h-6","mui-c8e50836f8a1":"h-7","mui-1fb07b38c63b":"h-8","mui-539ae144f076":"h-9","mui-fdd2f85cad6b":"h-10","mui-a66e9985b093":"h-auto","mui-57c930dc1c31":"h-full","mui-ae2c4b060bb9":"h-px","mui-571ea69568d3":"max-h-(--filter-menu-height)","mui-1f061e70178e":"max-h-(--radix-dropdown-menu-content-available-height)","mui-4d3f1304ebb2":"max-h-(--radix-popover-content-available-height)","mui-da0beef015c9":"max-h-[400px]","mui-80baa5d03af7":"max-h-[calc(var(--filter-menu-height)-2px)]","mui-1326520533f0":"max-h-[min(6rem,calc(var(--filter-menu-height)*0.25))]","mui-fb4a3e97b5bd":"max-h-[min(20rem,var(--radix-dropdown-menu-content-available-height,20rem))]","mui-dcd942c18ddc":"max-h-[var(--radix-dropdown-menu-content-available-height)]","mui-7bd696ca6be3":"max-h-full","mui-410da8dfa8ac":"min-h-0","mui-9974acedf3f7":"min-h-9","mui-8423dc94ee06":"min-h-10","mui-50312c3ce4a3":"min-h-[60px]","mui-d48fe95d4da8":"w-(--cell-size)","mui-d4ea834145ae":"w-2","mui-56bb14cbd1fe":"w-2/3","mui-8867d85ed290":"w-8","mui-4ac4ec8dfbce":"w-40","mui-37535002f0f7":"w-72","mui-a4cce7869436":"w-[300px]","mui-fc6a57ff7553":"w-[var(--mendy-filter-editor-width,19rem)]","mui-0b9c84552e40":"w-[var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,18.75rem))]","mui-4415137b0467":"w-[var(--mendy-filter-menu-width,calc(var(--filter-list-width)_+_var(--mendy-filter-editor-width,19rem)))]","mui-8cfb5a42ef9f":"w-fit","mui-58d0413dd93c":"w-full","mui-91f82aa1df0c":"max-w-[60%]","mui-34055e6f8c1b":"max-w-[calc(100vw-2rem)]","mui-81b198a2db84":"max-w-full","mui-1458e495e3ae":"min-w-(--cell-size)","mui-184ddc11e5f9":"min-w-0","mui-e9ab1547c94d":"min-w-[8rem]","mui-2bf6510f1330":"min-w-full","mui-7bd5bab6d7f4":"flex-1","mui-66b490dd6005":"shrink","mui-27ead27a81df":"shrink-0","mui-adca5146416e":"grow","mui-215061302c50":"border-collapse","mui-3a3774477287":"origin-(--radix-dropdown-menu-content-transform-origin)","mui-5dde0fd996f0":"-translate-y-1/2","mui-4e3f08588318":"-rotate-45","mui-c80411b7591f":"rotate-45","mui-aa214ea38326":"transform","mui-393df0d154e0":"animate-none!","mui-7b3cd77eb999":"animate-pulse","mui-2c14b55d77e6":"animate-spin","mui-2194d094b585":"cursor-col-resize","mui-d343f41ba73e":"cursor-default","mui-f2e47d9c52ad":"cursor-grab","mui-d2fa8848968d":"cursor-pointer","mui-739a9a000791":"touch-none","mui-acd532d8913e":"resize","mui-ae112c903ef8":"resize-y","mui-eeb3a8b33f69":"grid-cols-[min(var(--filter-list-width),calc(100%_-_min(var(--mendy-filter-editor-width,19rem),50%)))_minmax(0,1fr)]","mui-b5985369ee35":"grid-rows-[minmax(0,1fr)]","mui-302c0d124a94":"flex-col","mui-faa8a23c68f6":"flex-wrap","mui-8fd2e2355cbc":"place-content-center","mui-71556df3b421":"items-center","mui-b9677bd1cb66":"items-start","mui-32c92bb1fde4":"justify-between","mui-a503dd374cca":"justify-center","mui-307644c34db6":"justify-end","mui-c62ec162662e":"justify-start","mui-19e97f3f40e6":"gap-1","mui-70007b876865":"gap-1.5","mui-074569488cca":"gap-2","mui-d7db3451d154":"gap-3","mui-90fc3ec35a37":"gap-4","mui-27e6c432192f":"space-y-1","mui-267171770524":"space-y-2","mui-5a3a4ee420c2":"truncate","mui-1a26a0d28420":"overflow-auto","mui-d5111d0e9f48":"overflow-hidden","mui-0fc84a692dad":"overflow-visible","mui-3b82279f859f":"overflow-x-hidden","mui-2368e909f3a5":"overflow-y-auto","mui-998780cdef87":"overscroll-contain","mui-b005d61d0953":"rounded-full","mui-3fa8c572949b":"rounded-md","mui-52417259a4f5":"rounded-none","mui-02e603944040":"rounded-sm","mui-b31810dbd8a9":"rounded-s-none","mui-10c0bae8cba9":"rounded-l-md","mui-34bbd346e74c":"rounded-r-md","mui-4f1a55de40bc":"border","mui-dad556abfe15":"border-0","mui-55860251be20":"border-s","mui-3b6d5fc7b061":"border-e","mui-894c3815a57f":"border-t","mui-bbe39cfb5cc6":"border-b","mui-8450eb0f1857":"border-dashed","mui-163a623b3716":"border-border/50","mui-1267095cdeb7":"border-input","mui-9b76f456b8c9":"border-muted-foreground/50","mui-515f9fdc6db7":"border-primary","mui-292affc1f780":"bg-accent","mui-5b272f3c5076":"bg-background","mui-a943bea85d66":"bg-border","mui-0cf6c2e8fe7e":"bg-current","mui-965cf6587342":"bg-destructive","mui-047624ec0c39":"bg-green-100","mui-6ba846e1630e":"bg-inherit","mui-87ecb59f2d2d":"bg-muted","mui-810ae775809b":"bg-muted-foreground/20","mui-e593c38256e0":"bg-popover","mui-0c2864fba576":"bg-primary","mui-d191cb569aac":"bg-secondary","mui-8fca9236d191":"bg-transparent","mui-04760bcd507f":"p-0","mui-1dee6e3ec67d":"p-1","mui-b97db4a9f432":"p-2","mui-094f5333853b":"p-3","mui-c432836760e3":"p-6","mui-c7902d77ad80":"p-8","mui-56b8f5e0fb12":"px-(--cell-size)","mui-16e909e6f01d":"px-0","mui-1da2e8f173c5":"px-1.5","mui-e7e01cc7f4df":"px-2","mui-0f9e6672913a":"px-3","mui-9513b3968002":"px-4","mui-0194c6e46323":"px-8","mui-1fcf28756bb1":"py-1","mui-a8c1dfb1d4ef":"py-1.5","mui-b5edc3ea7c91":"py-2","mui-d3cea061f2f3":"py-3","mui-96b92a971c95":"py-5","mui-078d945937da":"ps-8","mui-b2100041c585":"ps-9","mui-05d4103bd67f":"pe-2","mui-a202804a1738":"pe-3","mui-0e14c365f9e8":"pe-9","mui-559069d2c2e5":"pe-16","mui-0a702d97ed7d":"pt-3","mui-1a52da5bc88c":"pr-1","mui-f5d8e661d857":"pl-2","mui-05ab12448317":"text-center","mui-10558dbb3a24":"text-end","mui-e9347b78185f":"text-start","mui-757071a1d1c4":"text-base","mui-c74ab393b96d":"text-sm","mui-3992de70b033":"text-xs","mui-5f120ad4b50b":"text-[0.8rem]","mui-761cdb81bddb":"leading-none","mui-daaac3fbf55e":"font-medium","mui-52101fc7d8bb":"font-normal","mui-e1683b3c030a":"tracking-widest","mui-393883c1db68":"[overflow-wrap:anywhere]","mui-37cf9655f30a":"break-words","mui-726fca123972":"whitespace-normal","mui-963f6168b7d6":"whitespace-nowrap","mui-cc209238d847":"text-accent-foreground","mui-5eafab9bbefc":"text-current","mui-887b9502d5c7":"text-destructive","mui-8d4bf2704c8d":"text-destructive-foreground","mui-957a109f887f":"text-foreground","mui-35f35c41d134":"text-muted-foreground","mui-5bd2afe89f0b":"text-popover-foreground","mui-249f14ee5b6b":"text-primary","mui-abd1aaa1f5b2":"text-primary-foreground","mui-80df79ec9bb5":"text-secondary-foreground","mui-944969efb294":"underline","mui-d52f902a57e8":"underline-offset-4","mui-94f91922a10e":"opacity-0","mui-0b5a4d1257ab":"opacity-50","mui-65694092f002":"opacity-100","mui-0d4ca75de41c":"shadow-lg","mui-94ea94fde25f":"shadow-md","mui-89c3006b2722":"shadow-none","mui-7de07d413c13":"shadow-xs","mui-853be6c11609":"ring-2","mui-fd9d0b696aac":"ring-primary","mui-59edd3d33673":"outline-hidden","mui-318678825324":"outline","mui-e42932b7a79c":"blur","mui-e0122edc668b":"drop-shadow-md","mui-dfc3376b8266":"filter","mui-70dd37c11434":"transition","mui-eae178841c68":"transition-colors","mui-2cdd01663c76":"transition-opacity","mui-2b48746f4314":"transition-shadow","mui-b4b2fd95f324":"transition-none","mui-b30fc56058b6":"outline-none","mui-78905c9e865c":"select-none","mui-d80b6593dae5":"[--cell-size:--spacing(8)]","mui-82c2977beb8e":"[--cell-size:min(2rem,calc((100vw-3.5rem)/7))]","mui-d7d803c609c5":"[--filter-list-width:var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,13rem))]","mui-971625533e56":"[--filter-menu-height:min(var(--mendy-filter-menu-max-height,44rem),var(--radix-dropdown-menu-content-available-height,44rem))]","mui-cacb19aa9640":"[scrollbar-width:thin]","mui-14bd99410890":"[unicode-bidi:isolate]","mui-97b1c00ff005":"group-hover:bg-accent","mui-ad936fcbed63":"group","mui-34a57d4b4103":"group-hover:opacity-50","mui-9af9a4182597":"group-data-[disabled=true]:pointer-events-none","mui-272ef88d6a0c":"group-data-[disabled=true]:opacity-50","mui-60052b901494":"group-data-[focused=true]/day:relative","mui-d9c5891363f9":"group/day","mui-3f96bf138f7b":"group-data-[focused=true]/day:z-10","mui-d39eb62b8363":"group-data-[focused=true]/day:border-ring","mui-5892a880410a":"group-data-[focused=true]/day:ring-1","mui-31b75c623c06":"group-data-[focused=true]/day:ring-ring","mui-e6020023567a":"group-data-[highlighted=true]:bg-accent","mui-f0ee83167878":"peer-disabled:cursor-not-allowed","mui-2ffc1d06387e":"peer","mui-25d26df52a1d":"peer-disabled:opacity-50","mui-32713fefe32f":"file:border-0","mui-25a74d576c42":"file:bg-transparent","mui-844abccf1fd0":"file:text-sm","mui-dc43de54f42a":"file:font-medium","mui-20315da78444":"placeholder:text-muted-foreground","mui-3deb00079b4c":"first:border-s-0","mui-37ad15a95595":"hover:bg-accent","mui-bb6a4b3e902d":"hover:bg-destructive/90","mui-5cbdd1b32f1a":"hover:bg-muted/50","mui-4273133a876a":"hover:bg-primary/20","mui-af9ea085901b":"hover:bg-primary/90","mui-099700a5a311":"hover:bg-secondary/80","mui-71863717995b":"hover:bg-transparent","mui-9f1f77b92dcb":"hover:text-accent-foreground","mui-4d6720d47806":"hover:text-foreground","mui-b56720602554":"hover:underline","mui-8da02faac748":"hover:opacity-100","mui-a8c1861c5d03":"focus:bg-accent","mui-a85c4c5d7465":"focus:text-accent-foreground","mui-b906a32b31ee":"focus-visible:border-ring","mui-2f669cfad5aa":"focus-visible:bg-primary/20","mui-b8b1747fa763":"focus-visible:opacity-100","mui-39be5a15b766":"focus-visible:ring-1","mui-355efe22aedb":"focus-visible:ring-2","mui-365a4654f7b1":"focus-visible:ring-[3px]","mui-db549d38ff19":"focus-visible:ring-ring","mui-392a26f4c1b0":"focus-visible:ring-ring/50","mui-a47d391255f3":"focus-visible:outline","mui-1df9125eebaf":"focus-visible:outline-1","mui-a8719ed8b095":"focus-visible:-outline-offset-2","mui-2b1c7d88acff":"focus-visible:outline-primary","mui-223daa83ed2d":"focus-visible:outline-ring","mui-2e357972fc10":"focus-visible:outline-none","mui-50aafa8694bb":"focus-visible:ring-inset","mui-71998ea7a2d0":"active:cursor-grabbing","mui-8d3c1014b967":"disabled:pointer-events-none","mui-db567af109b7":"disabled:cursor-not-allowed","mui-d2e4a66bb430":"disabled:opacity-0!","mui-4600b77303d6":"disabled:opacity-50","mui-978f422895e5":"group-hover:disabled:opacity-50!","mui-7eb7501a2ef0":"has-focus:border-ring","mui-d0449753ba7b":"has-focus:ring-[3px]","mui-fc19c8471f34":"has-focus:ring-ring/50","mui-e288cffc2ef4":"has-[>svg]:px-1.5","mui-3b01ee05b16d":"has-[>svg]:px-2.5","mui-9e08353b774f":"has-[>svg]:px-3","mui-2c0115d1c32a":"aria-disabled:opacity-50","mui-1fac1d7d1df3":"aria-invalid:border-destructive","mui-2d91b4cbc3cb":"aria-invalid:ring-destructive","mui-5491fd0b4dc5":"aria-invalid:ring-destructive/20","mui-2d6703b5473b":"aria-pressed:bg-accent","mui-ff2dcda51a27":"aria-pressed:text-accent-foreground","mui-7d900a71e5ba":"aria-selected:text-muted-foreground","mui-397f5ba426a0":"data-[disabled]:pointer-events-none","mui-9beb654fcb0d":"data-[disabled]:opacity-50","mui-9d7d1760cd8e":"data-[highlighted=true]:bg-accent","mui-6fa6a8ade7c4":"data-[inset]:pl-8","mui-bbaaa5969856":"data-[more-below=true]:[mask-image:linear-gradient(#000_calc(100%_-_1rem),transparent)]","mui-dfc89afd7885":"data-[navigation=pointer]:focus-visible:ring-0","mui-96308b55e0d6":"data-[range-end=true]:rounded-md","mui-a55dbe6f3eec":"data-[range-end=true]:rounded-r-md","mui-714051e55e8e":"data-[range-end=true]:bg-primary","mui-c764cebcd540":"data-[range-end=true]:text-primary-foreground","mui-05ec0700cd48":"data-[range-middle=true]:rounded-none","mui-5fb598fb06f4":"data-[range-middle=true]:bg-accent","mui-0813905aa141":"data-[range-middle=true]:text-accent-foreground","mui-8020e31bff67":"data-[range-start=true]:rounded-md","mui-ab65911baf1d":"data-[range-start=true]:rounded-l-md","mui-f5460d79341c":"data-[range-start=true]:bg-primary","mui-421a7d3e6631":"data-[range-start=true]:text-primary-foreground","mui-a39af81d518c":"data-[selected-single=true]:bg-primary","mui-b6991ab170de":"data-[selected-single=true]:text-primary-foreground","mui-3cc0d07ef843":"data-[selected=true]:rounded-none","mui-89f6aab7a3f8":"data-[side=bottom]:slide-in-from-top-2","mui-3550f48d66b9":"data-[side=left]:slide-in-from-right-2","mui-7720fe004f5c":"data-[side=right]:slide-in-from-left-2","mui-66b560f839de":"data-[side=top]:slide-in-from-bottom-2","mui-20553d55d224":"data-[state=checked]:border-primary","mui-57d6d6401a2f":"data-[state=checked]:bg-primary","mui-7ca12016214f":"data-[state=checked]:text-primary-foreground","mui-d0c2ae8419e1":"data-[state=checked]:opacity-100","mui-9c02852bfc55":"data-[state=checked]:disabled:opacity-100!","mui-37d8a3f448ff":"data-[state=closed]:animate-none!","mui-0cb4489c3645":"data-[state=closed]:animate-out","mui-bb5869ef903b":"data-[state=closed]:fade-out-0","mui-f4cf4be63707":"data-[state=closed]:zoom-out-95","mui-e2ed522ed9b7":"data-[state=indeterminate]:opacity-100","mui-cbd3aed703f7":"data-[state=indeterminate]:disabled:opacity-100!","mui-bae1e782f277":"data-[state=open]:animate-in","mui-4027d9c589b6":"data-[state=open]:bg-accent","mui-1952cd5b00aa":"data-[state=open]:text-accent-foreground","mui-6f73a280432e":"data-[state=open]:text-foreground","mui-790ed041a953":"data-[state=open]:opacity-100","mui-45464a92c1f6":"data-[state=open]:fade-in-0","mui-9ca352480f25":"data-[state=open]:zoom-in-95","mui-f3f7a9c5e1b3":"data-[variant=destructive]:text-destructive","mui-e2bb4ac97190":"data-[variant=destructive]:focus:bg-destructive/10","mui-353a727facfd":"data-[variant=destructive]:focus:text-destructive","mui-237747164b60":"motion-reduce:animate-none","mui-0cc20f4e20c8":"sm:w-[21.875rem]","mui-56760b222da0":"md:flex-row","mui-c05c9b99939d":"md:text-sm","mui-36b12e8339c7":"rtl:rotate-180","mui-d254c96aea74":"dark:bg-green-950","mui-9daa2369a41b":"dark:bg-input/30","mui-b2786f463a62":"dark:hover:text-accent-foreground","mui-c88f65aa011e":"dark:aria-invalid:ring-destructive/40","mui-bd73d819941e":"dark:data-[state=checked]:bg-primary","mui-98a28c2293f7":"dark:data-[variant=destructive]:focus:bg-destructive/20","mui-d78a8526410d":"pointer-coarse:[--cell-size:min(2.5rem,calc((100vw-3.5rem)/7))]","mui-b51243872d85":"sm:pointer-fine:h-8","mui-e771a8b4d87d":"sm:pointer-fine:h-9","mui-aa0e3c036805":"sm:pointer-fine:min-h-8","mui-0288c4ea71ea":"sm:pointer-fine:py-0.5","mui-41d1475cf71a":"sm:pointer-fine:py-1.5","mui-548a450e8e53":"[&_*]:transition-none!","mui-a1c8c43d9be2":"[&_[role^=menuitem]]:min-h-9","mui-b43343fe71c0":"sm:pointer-fine:[&_[role^=menuitem]]:min-h-8","mui-cc310a330231":"[&_button]:font-semibold","mui-b7ff49878425":"[&_button]:underline","mui-d9bdd2c94504":"[&_button]:underline-offset-4","mui-bcae9d37090c":"[&_svg]:pointer-events-none","mui-c77732bd3ab4":"[&_svg]:size-3.5","mui-040e748a3fa0":"[&_svg]:shrink-0","mui-be87a4a64d81":"[&_svg:not([class*='size-'])]:size-3","mui-eb5ef2dbc2d4":"[&_svg:not([class*='size-'])]:size-4","mui-8637dfd54fbb":"[&_svg:not([class*='text-'])]:text-muted-foreground","mui-4f05a238500e":"[&::-webkit-search-cancel-button]:appearance-none","mui-74ab31abd804":"[&:first-child[data-selected=true]_button]:rounded-l-md","mui-13858191ca50":"rtl:**:[.rdp-button\\_next>svg]:rotate-180","mui-a324a7f99932":"rtl:**:[.rdp-button\\_previous>svg]:rotate-180","mui-82b114bbff3d":"data-[variant=destructive]:*:[svg]:text-destructive!","mui-6ee0c74de40c":"[&:last-child[data-selected=true]_button]:rounded-r-md","mui-6162ab70efb5":"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md","mui-f157ee6bae99":"[&>div]:w-full","mui-ba417cf466b0":"[&>span]:text-xs","mui-829c8ef4f9c5":"[&>span]:opacity-70","mui-bf95f682e553":"[&>span:first-child]:mt-[calc(0.5lh-0.4375rem)]","mui-eb740dd32318":"[&>svg]:size-3.5","mui-019fd73c95db":"[&>svg]:text-muted-foreground","mui-fa8e1efead3c":"[@media(hover:none)]:opacity-100","mui-eaedb91f8774":"[@media(hover:none)]:disabled:opacity-100!","mui-b8293c91796c":"[[data-slot=card-content]_&]:bg-transparent","mui-8dd7e6b42262":"[[data-slot=popover-content]_&]:bg-transparent"};
@@ -47,7 +47,11 @@ function FilterRootContent({ filters, summary = defaultSummary, suggestions = "a
47
47
  const [cache] = useState(() => new Map());
48
48
  const [ambiguous, setAmbiguous] = useState([]);
49
49
  const trigger = useRef(null);
50
+ const editingField = useRef(filters.editField);
50
51
  const [direction, setDirection] = useState("ltr");
52
+ useLayoutEffect(() => {
53
+ editingField.current = filters.editField;
54
+ }, [filters.editField]);
51
55
  useLayoutEffect(() => {
52
56
  if (filters.menuOpen && trigger.current)
53
57
  setDirection(getComputedStyle(trigger.current).direction === "rtl" ? "rtl" : "ltr");
@@ -61,6 +65,7 @@ function FilterRootContent({ filters, summary = defaultSummary, suggestions = "a
61
65
  groups,
62
66
  disabled,
63
67
  trigger,
68
+ editingField,
64
69
  ambiguous,
65
70
  setAmbiguous,
66
71
  }), [filters, summary, suggestions, closeMenuOnApply, groups, disabled, ambiguous, direction]);
@@ -272,14 +277,12 @@ function FieldChip({ entry }) {
272
277
  : undefined, editor: _jsx(FieldEditor, { entry: entry, active: filters.editField === id, disabled: disabled || field.disabled, close: () => filters.edit(null), location: "chip" }), children: _jsx(ChipSummary, { descriptionId: descriptionId, field: field, value: value, active: active, options: options, summary: summary }) }));
273
278
  }
274
279
  function useChipEditor({ id, field, value }) {
275
- const { filters, trigger } = useRoot();
280
+ const { filters, trigger, editingField } = useRoot();
276
281
  const active = field.isActive(value);
277
282
  const currentlyActive = useRef(active);
278
- const editingField = useRef(filters.editField);
279
283
  useLayoutEffect(() => {
280
284
  currentlyActive.current = active;
281
- editingField.current = filters.editField;
282
- }, [active, filters.editField]);
285
+ }, [active]);
283
286
  return {
284
287
  onCloseAutoFocus(event) {
285
288
  // The outgoing popup must not steal focus back from its replacement.
@@ -296,8 +299,14 @@ function useChipEditor({ id, field, value }) {
296
299
  filters.commit(id, field.suggestion.value, "suggestion");
297
300
  return;
298
301
  }
299
- if (open || editingField.current === id)
300
- filters.edit(open ? id : null);
302
+ if (open) {
303
+ editingField.current = id;
304
+ filters.edit(id);
305
+ }
306
+ else if (editingField.current === id) {
307
+ editingField.current = null;
308
+ filters.edit(null);
309
+ }
301
310
  },
302
311
  };
303
312
  }
package/dist/styles.css CHANGED
@@ -157,6 +157,12 @@
157
157
  .mui-8cc46fa87f41:where([data-mendy-ui], [data-mendy-ui] *) {
158
158
  margin-inline-end: calc(var(--spacing) * -1.5);
159
159
  }
160
+ .mui-477d8f4dfce9:where([data-mendy-ui], [data-mendy-ui] *) {
161
+ margin-inline-end: calc(var(--spacing) * 1);
162
+ }
163
+ .mui-68d781378b03:where([data-mendy-ui], [data-mendy-ui] *) {
164
+ margin-inline-end: calc(var(--spacing) * 2);
165
+ }
160
166
  .mui-f28fea81a5cd:where([data-mendy-ui], [data-mendy-ui] *) {
161
167
  margin-top: calc(var(--spacing) * 2);
162
168
  }
@@ -912,6 +918,13 @@
912
918
  }
913
919
  }
914
920
  }
921
+ .mui-34a57d4b4103:where([data-mendy-ui], [data-mendy-ui] *) {
922
+ &:is(:where(.mui-ad936fcbed63):hover *) {
923
+ @media (hover: hover) {
924
+ opacity: 50%;
925
+ }
926
+ }
927
+ }
915
928
  .mui-9af9a4182597:where([data-mendy-ui], [data-mendy-ui] *) {
916
929
  &:is(:where(.mui-ad936fcbed63)[data-disabled="true"] *) {
917
930
  pointer-events: none;
@@ -1112,6 +1125,11 @@
1112
1125
  }
1113
1126
  }
1114
1127
  }
1128
+ .mui-b8b1747fa763:where([data-mendy-ui], [data-mendy-ui] *) {
1129
+ &:focus-visible {
1130
+ opacity: 100%;
1131
+ }
1132
+ }
1115
1133
  .mui-39be5a15b766:where([data-mendy-ui], [data-mendy-ui] *) {
1116
1134
  &:focus-visible {
1117
1135
  --mendy-tw-ring-shadow: var(--mendy-tw-ring-inset,) 0 0 0 calc(1px + var(--mendy-tw-ring-offset-width)) var(--mendy-tw-ring-color, currentcolor);
@@ -1196,11 +1214,25 @@
1196
1214
  cursor: not-allowed;
1197
1215
  }
1198
1216
  }
1217
+ .mui-d2e4a66bb430:where([data-mendy-ui], [data-mendy-ui] *) {
1218
+ &:disabled {
1219
+ opacity: 0% !important;
1220
+ }
1221
+ }
1199
1222
  .mui-4600b77303d6:where([data-mendy-ui], [data-mendy-ui] *) {
1200
1223
  &:disabled {
1201
1224
  opacity: 50%;
1202
1225
  }
1203
1226
  }
1227
+ .mui-978f422895e5:where([data-mendy-ui], [data-mendy-ui] *) {
1228
+ &:is(:where(.mui-ad936fcbed63):hover *) {
1229
+ @media (hover: hover) {
1230
+ &:disabled {
1231
+ opacity: 50% !important;
1232
+ }
1233
+ }
1234
+ }
1235
+ }
1204
1236
  .mui-7eb7501a2ef0:where([data-mendy-ui], [data-mendy-ui] *) {
1205
1237
  &:has(*:focus) {
1206
1238
  border-color: var(--ring, #737373);
@@ -1413,6 +1445,18 @@
1413
1445
  color: var(--primary-foreground, #fafafa);
1414
1446
  }
1415
1447
  }
1448
+ .mui-d0c2ae8419e1:where([data-mendy-ui], [data-mendy-ui] *) {
1449
+ &[data-state="checked"] {
1450
+ opacity: 100%;
1451
+ }
1452
+ }
1453
+ .mui-9c02852bfc55:where([data-mendy-ui], [data-mendy-ui] *) {
1454
+ &[data-state="checked"] {
1455
+ &:disabled {
1456
+ opacity: 100% !important;
1457
+ }
1458
+ }
1459
+ }
1416
1460
  .mui-37d8a3f448ff:where([data-mendy-ui], [data-mendy-ui] *) {
1417
1461
  &[data-state="closed"] {
1418
1462
  animation: none !important;
@@ -1435,6 +1479,18 @@
1435
1479
  --mendy-tw-exit-scale: .95;
1436
1480
  }
1437
1481
  }
1482
+ .mui-e2ed522ed9b7:where([data-mendy-ui], [data-mendy-ui] *) {
1483
+ &[data-state="indeterminate"] {
1484
+ opacity: 100%;
1485
+ }
1486
+ }
1487
+ .mui-cbd3aed703f7:where([data-mendy-ui], [data-mendy-ui] *) {
1488
+ &[data-state="indeterminate"] {
1489
+ &:disabled {
1490
+ opacity: 100% !important;
1491
+ }
1492
+ }
1493
+ }
1438
1494
  .mui-bae1e782f277:where([data-mendy-ui], [data-mendy-ui] *) {
1439
1495
  &[data-state="open"] {
1440
1496
  animation: mendy-enter var(--mendy-tw-animation-duration,var(--mendy-tw-duration,.15s))var(--mendy-tw-ease,ease)var(--mendy-tw-animation-delay,0s)var(--mendy-tw-animation-iteration-count,1)var(--mendy-tw-animation-direction,normal)var(--mendy-tw-animation-fill-mode,none);
@@ -1761,6 +1817,18 @@
1761
1817
  color: var(--muted-foreground, #737373);
1762
1818
  }
1763
1819
  }
1820
+ .mui-fa8e1efead3c:where([data-mendy-ui], [data-mendy-ui] *) {
1821
+ @media (hover:none) {
1822
+ opacity: 100%;
1823
+ }
1824
+ }
1825
+ .mui-eaedb91f8774:where([data-mendy-ui], [data-mendy-ui] *) {
1826
+ @media (hover:none) {
1827
+ &:disabled {
1828
+ opacity: 100% !important;
1829
+ }
1830
+ }
1831
+ }
1764
1832
  .mui-b8293c91796c:where([data-mendy-ui], [data-mendy-ui] *) {
1765
1833
  [data-slot=card-content] & {
1766
1834
  background-color: transparent;
@@ -156,6 +156,12 @@
156
156
  .mui-8cc46fa87f41:where([data-mendy-ui], [data-mendy-ui] *) {
157
157
  margin-inline-end: calc(var(--spacing) * -1.5);
158
158
  }
159
+ .mui-477d8f4dfce9:where([data-mendy-ui], [data-mendy-ui] *) {
160
+ margin-inline-end: calc(var(--spacing) * 1);
161
+ }
162
+ .mui-68d781378b03:where([data-mendy-ui], [data-mendy-ui] *) {
163
+ margin-inline-end: calc(var(--spacing) * 2);
164
+ }
159
165
  .mui-f28fea81a5cd:where([data-mendy-ui], [data-mendy-ui] *) {
160
166
  margin-top: calc(var(--spacing) * 2);
161
167
  }
@@ -911,6 +917,13 @@
911
917
  }
912
918
  }
913
919
  }
920
+ .mui-34a57d4b4103:where([data-mendy-ui], [data-mendy-ui] *) {
921
+ &:is(:where(.mui-ad936fcbed63):hover *) {
922
+ @media (hover: hover) {
923
+ opacity: 50%;
924
+ }
925
+ }
926
+ }
914
927
  .mui-9af9a4182597:where([data-mendy-ui], [data-mendy-ui] *) {
915
928
  &:is(:where(.mui-ad936fcbed63)[data-disabled="true"] *) {
916
929
  pointer-events: none;
@@ -1111,6 +1124,11 @@
1111
1124
  }
1112
1125
  }
1113
1126
  }
1127
+ .mui-b8b1747fa763:where([data-mendy-ui], [data-mendy-ui] *) {
1128
+ &:focus-visible {
1129
+ opacity: 100%;
1130
+ }
1131
+ }
1114
1132
  .mui-39be5a15b766:where([data-mendy-ui], [data-mendy-ui] *) {
1115
1133
  &:focus-visible {
1116
1134
  --mendy-tw-ring-shadow: var(--mendy-tw-ring-inset,) 0 0 0 calc(1px + var(--mendy-tw-ring-offset-width)) var(--mendy-tw-ring-color, currentcolor);
@@ -1195,11 +1213,25 @@
1195
1213
  cursor: not-allowed;
1196
1214
  }
1197
1215
  }
1216
+ .mui-d2e4a66bb430:where([data-mendy-ui], [data-mendy-ui] *) {
1217
+ &:disabled {
1218
+ opacity: 0% !important;
1219
+ }
1220
+ }
1198
1221
  .mui-4600b77303d6:where([data-mendy-ui], [data-mendy-ui] *) {
1199
1222
  &:disabled {
1200
1223
  opacity: 50%;
1201
1224
  }
1202
1225
  }
1226
+ .mui-978f422895e5:where([data-mendy-ui], [data-mendy-ui] *) {
1227
+ &:is(:where(.mui-ad936fcbed63):hover *) {
1228
+ @media (hover: hover) {
1229
+ &:disabled {
1230
+ opacity: 50% !important;
1231
+ }
1232
+ }
1233
+ }
1234
+ }
1203
1235
  .mui-7eb7501a2ef0:where([data-mendy-ui], [data-mendy-ui] *) {
1204
1236
  &:has(*:focus) {
1205
1237
  border-color: var(--ring, #737373);
@@ -1412,6 +1444,18 @@
1412
1444
  color: var(--primary-foreground, #fafafa);
1413
1445
  }
1414
1446
  }
1447
+ .mui-d0c2ae8419e1:where([data-mendy-ui], [data-mendy-ui] *) {
1448
+ &[data-state="checked"] {
1449
+ opacity: 100%;
1450
+ }
1451
+ }
1452
+ .mui-9c02852bfc55:where([data-mendy-ui], [data-mendy-ui] *) {
1453
+ &[data-state="checked"] {
1454
+ &:disabled {
1455
+ opacity: 100% !important;
1456
+ }
1457
+ }
1458
+ }
1415
1459
  .mui-37d8a3f448ff:where([data-mendy-ui], [data-mendy-ui] *) {
1416
1460
  &[data-state="closed"] {
1417
1461
  animation: none !important;
@@ -1434,6 +1478,18 @@
1434
1478
  --mendy-tw-exit-scale: .95;
1435
1479
  }
1436
1480
  }
1481
+ .mui-e2ed522ed9b7:where([data-mendy-ui], [data-mendy-ui] *) {
1482
+ &[data-state="indeterminate"] {
1483
+ opacity: 100%;
1484
+ }
1485
+ }
1486
+ .mui-cbd3aed703f7:where([data-mendy-ui], [data-mendy-ui] *) {
1487
+ &[data-state="indeterminate"] {
1488
+ &:disabled {
1489
+ opacity: 100% !important;
1490
+ }
1491
+ }
1492
+ }
1437
1493
  .mui-bae1e782f277:where([data-mendy-ui], [data-mendy-ui] *) {
1438
1494
  &[data-state="open"] {
1439
1495
  animation: mendy-enter var(--mendy-tw-animation-duration,var(--mendy-tw-duration,.15s))var(--mendy-tw-ease,ease)var(--mendy-tw-animation-delay,0s)var(--mendy-tw-animation-iteration-count,1)var(--mendy-tw-animation-direction,normal)var(--mendy-tw-animation-fill-mode,none);
@@ -1760,6 +1816,18 @@
1760
1816
  color: var(--muted-foreground, #737373);
1761
1817
  }
1762
1818
  }
1819
+ .mui-fa8e1efead3c:where([data-mendy-ui], [data-mendy-ui] *) {
1820
+ @media (hover:none) {
1821
+ opacity: 100%;
1822
+ }
1823
+ }
1824
+ .mui-eaedb91f8774:where([data-mendy-ui], [data-mendy-ui] *) {
1825
+ @media (hover:none) {
1826
+ &:disabled {
1827
+ opacity: 100% !important;
1828
+ }
1829
+ }
1830
+ }
1763
1831
  .mui-b8293c91796c:where([data-mendy-ui], [data-mendy-ui] *) {
1764
1832
  [data-slot=card-content] & {
1765
1833
  background-color: transparent;
@@ -1,11 +1,13 @@
1
1
  "use client";
2
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import { useDataTable } from "./use-data-table.js";
4
4
  import { TableView } from "./table-view.js";
5
5
  import { TableColumnSettings, TablePagination } from "./table-controls.js";
6
6
  import { TableFilters } from "./table-filters.js";
7
- function ControlledTable({ table, toolbar, footer, showColumnSettings = true, showPagination = false, filters, filterBar, ...view }) {
8
- return (_jsxs("div", { "data-mendy-ui": "", className: "mui-184ddc11e5f9 mui-267171770524", children: [(toolbar || showColumnSettings || (filters && filterBar !== false)) && (_jsxs("div", { className: "mui-222f930b8752 mui-faa8a23c68f6 mui-b9677bd1cb66 mui-32c92bb1fde4 mui-074569488cca", children: [_jsxs("div", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-267171770524", children: [filters && filterBar !== false && _jsx(TableFilters, { ...filterBar, filters: filters }), !filters && toolbar] }), filters && toolbar, showColumnSettings && _jsx(TableColumnSettings, { table: table })] })), _jsx(TableView, { table: table, filters: filters, ...view }), showPagination && (_jsx(TablePagination, { table: table, loading: view.status === "loading" || view.refreshing })), footer] }));
7
+ import { TableFrame } from "./table-frame.js";
8
+ function ControlledTable({ table, toolbar, footer, showColumnSettings = true, showPagination = false, filters, filterBar, layout = "content", ...view }) {
9
+ const fill = layout === "fill";
10
+ return (_jsx(TableFrame, { layout: layout, slot: "data-table", header: (toolbar || showColumnSettings || (filters && filterBar !== false)) && (_jsxs("div", { className: "mui-222f930b8752 mui-27ead27a81df mui-faa8a23c68f6 mui-b9677bd1cb66 mui-32c92bb1fde4 mui-074569488cca", children: [_jsxs("div", { className: "mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-267171770524", children: [filters && filterBar !== false && _jsx(TableFilters, { ...filterBar, filters: filters }), !filters && toolbar] }), filters && toolbar, showColumnSettings && _jsx(TableColumnSettings, { table: table })] })), footer: showPagination || footer ? (_jsxs(_Fragment, { children: [showPagination && (_jsx("div", { className: "mui-27ead27a81df", children: _jsx(TablePagination, { table: table, loading: view.status === "loading" || view.refreshing }) })), footer] })) : undefined, children: _jsx(TableView, { table: table, filters: filters, ...view, height: fill ? "100%" : view.height }) }));
9
11
  }
10
12
  function ConfiguredTable(props) {
11
13
  const table = useDataTable(props);
@@ -0,0 +1,10 @@
1
+ import type { ReactNode } from "react";
2
+ /** Shared sizing for the composed view and the table with built-in controls. */
3
+ export declare function TableFrame({ layout, stretch, slot, header, footer, children, }: {
4
+ layout: "content" | "fill";
5
+ stretch?: boolean;
6
+ slot?: string;
7
+ header?: ReactNode;
8
+ footer?: ReactNode;
9
+ children: ReactNode;
10
+ }): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,10 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { cn } from "../utils.js";
4
+ import { useFillLayout } from "./use-fill-layout.js";
5
+ /** Shared sizing for the composed view and the table with built-in controls. */
6
+ export function TableFrame({ layout, stretch = false, slot = "table-view", header, footer, children, }) {
7
+ const fill = layout === "fill";
8
+ const ref = useFillLayout(fill);
9
+ return (_jsxs("div", { ref: ref, "data-mendy-ui": "", "data-slot": slot, "data-layout": layout, className: cn("mui-184ddc11e5f9", fill ? "mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94 mui-074569488cca" : "mui-267171770524"), style: !fill && stretch ? { height: "100%" } : undefined, children: [header && _jsx("div", { className: "mui-27ead27a81df", children: header }), _jsx("div", { className: fill ? "mui-0f2a693e93e2 mui-410da8dfa8ac mui-7bd5bab6d7f4 mui-b5985369ee35" : undefined, style: !fill && stretch ? { height: "100%" } : undefined, children: children }), footer && _jsx("div", { className: "mui-27ead27a81df mui-267171770524", children: footer })] }));
10
+ }
@@ -2,15 +2,19 @@ import type { CSSProperties, ReactNode } from "react";
2
2
  import type { Column, Header, Row } from "@tanstack/react-table";
3
3
  import type { DataTableFeatures } from "./features.js";
4
4
  import type { DataTableInstance } from "./use-data-table.js";
5
- export declare function TableHeaderCell<T extends object>({ table, header, index, style, renderHeader, contentClassName, }: {
5
+ export declare function TableHeaderCell<T extends object>({ table, header, index, style, renderHeader, contentClassName, selectLoaded, }: {
6
6
  table: DataTableInstance<T>;
7
7
  header: Header<DataTableFeatures, T, unknown>;
8
8
  index: number;
9
9
  style: CSSProperties;
10
10
  renderHeader?: (header: Header<DataTableFeatures, T, unknown>) => ReactNode;
11
11
  contentClassName?: string;
12
+ selectLoaded?: {
13
+ checked: boolean | "indeterminate";
14
+ disabled: boolean;
15
+ };
12
16
  }): import("react/jsx-runtime").JSX.Element;
13
- declare function TableBodyRowImpl<T extends object>({ row, rowIndex, start, rowHeight, autoRowHeight, measureElement, rowClassName, renderRowDetail, detailWidth, cellStyle, columns, columnGaps, columnIndexes, contentVersion, contentState, focusedId, copied, contentClassName, onRowClick, onRowActivate, isRowHighlighted, }: {
17
+ declare function TableBodyRowImpl<T extends object>({ row, rowIndex, start, rowHeight, autoRowHeight, measureElement, rowClassName, renderRowDetail, detailWidth, cellStyle, columns, columnGaps, columnIndexes, contentVersion, contentState, focusedId, copied, contentClassName, onRowClick, onRowActivate, isRowHighlighted, inlineSelection, }: {
14
18
  row: Row<DataTableFeatures, T>;
15
19
  rowIndex: number;
16
20
  start: number;
@@ -32,6 +36,7 @@ declare function TableBodyRowImpl<T extends object>({ row, rowIndex, start, rowH
32
36
  onRowClick?: (row: T) => void;
33
37
  onRowActivate?: (row: T) => void;
34
38
  isRowHighlighted?: (row: T) => boolean;
39
+ inlineSelection: boolean;
35
40
  }): import("react/jsx-runtime").JSX.Element;
36
41
  export declare const TableBodyRow: typeof TableBodyRowImpl;
37
42
  export {};
@@ -4,16 +4,17 @@ import { Fragment, memo, useMemo } from "react";
4
4
  import { constructCell, flexRender } from "@tanstack/react-table";
5
5
  import { ArrowDown, ArrowUp } from "lucide-react";
6
6
  import { Button } from "../primitives/button.js";
7
+ import { Checkbox } from "../primitives/checkbox.js";
7
8
  import { cn } from "../utils.js";
8
9
  import { interactiveSelector } from "./clipboard.js";
9
- export function TableHeaderCell({ table, header, index, style, renderHeader, contentClassName, }) {
10
+ export function TableHeaderCell({ table, header, index, style, renderHeader, contentClassName, selectLoaded, }) {
10
11
  const column = header.column;
11
12
  const definition = column.columnDef;
12
13
  const title = definition.label ?? (typeof definition.header === "string" ? definition.header : column.id);
13
14
  const sorted = column.getIsSorted();
14
- return (_jsxs("div", { role: "columnheader", "data-column-id": column.id, "aria-colindex": index + 1, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, style: style, className: "mui-d2d9e1f13413 mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-19e97f3f40e6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-daaac3fbf55e mui-35f35c41d134", children: [_jsx("div", { className: cn("mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d5111d0e9f48", (renderHeader || typeof definition.header === "function") && contentClassName), children: _jsx(TableHeaderContent, { header: header, renderHeader: renderHeader, title: title }) }), column.getCanResize() && (_jsx(TableResizeHandle, { table: table, header: header, title: title, width: Number(style.width) }))] }, column.id));
15
+ return (_jsxs("div", { role: "columnheader", "data-column-id": column.id, "aria-colindex": index + 1, "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined, style: style, className: "mui-ad936fcbed63 mui-d2d9e1f13413 mui-222f930b8752 mui-27ead27a81df mui-71556df3b421 mui-19e97f3f40e6 mui-3b6d5fc7b061 mui-5b272f3c5076 mui-0f9e6672913a mui-daaac3fbf55e mui-35f35c41d134", children: [selectLoaded && index === 0 && (_jsx(Checkbox, { "aria-label": "Select loaded rows", disabled: selectLoaded.disabled, checked: selectLoaded.checked, onCheckedChange: (value) => table.toggleAllPageRowsSelected(value === true), className: "mui-477d8f4dfce9 mui-94f91922a10e mui-34a57d4b4103 mui-8da02faac748 mui-b8b1747fa763 mui-d2e4a66bb430 mui-978f422895e5 mui-d0c2ae8419e1 mui-e2ed522ed9b7 mui-fa8e1efead3c mui-eaedb91f8774" })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-7bd5bab6d7f4 mui-d5111d0e9f48", (renderHeader || typeof definition.header === "function") && contentClassName), children: _jsx(TableHeaderContent, { header: header, renderHeader: renderHeader, title: title }) }), column.getCanResize() && (_jsx(TableResizeHandle, { table: table, header: header, title: title, width: Number(style.width) }))] }, column.id));
15
16
  }
16
- function TableBodyRowImpl({ row, rowIndex, start, rowHeight, autoRowHeight, measureElement, rowClassName, renderRowDetail, detailWidth, cellStyle, columns, columnGaps, columnIndexes, contentVersion, contentState, focusedId, copied, contentClassName, onRowClick, onRowActivate, isRowHighlighted, }) {
17
+ function TableBodyRowImpl({ row, rowIndex, start, rowHeight, autoRowHeight, measureElement, rowClassName, renderRowDetail, detailWidth, cellStyle, columns, columnGaps, columnIndexes, contentVersion, contentState, focusedId, copied, contentClassName, onRowClick, onRowActivate, isRowHighlighted, inlineSelection, }) {
17
18
  // The engine's getAllCells API eagerly allocates every column. Build only the
18
19
  // viewport cells with its public constructor, and release them with this row.
19
20
  const cache = useMemo(() => new WeakMap(), [row]);
@@ -69,7 +70,7 @@ function TableBodyRowImpl({ row, rowIndex, start, rowHeight, autoRowHeight, meas
69
70
  borderBottomWidth: edge?.bottom ? 2 : 0,
70
71
  borderLeftWidth: edge?.left ? 2 : 0,
71
72
  borderRightWidth: edge?.right ? 2 : 0,
72
- } })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-81b198a2db84", autoRowHeight ? "mui-726fca123972 mui-37cf9655f30a mui-b5edc3ea7c91" : "mui-7bd696ca6be3 mui-5a3a4ee420c2", contentClassName), children: _jsx(TableCellContent, { cell: cell, renderer: cell.column.columnDef.cell, version: contentVersion, state: contentState }) })] }, cell.id)] }, cell.id));
73
+ } })), inlineSelection && index === 0 && (_jsx(Checkbox, { "aria-label": `Select row ${rowIndex + 1}`, checked: row.getIsSelected(), disabled: !row.getCanSelect(), onCheckedChange: (value) => row.toggleSelected(value === true), onMouseDown: (event) => event.stopPropagation(), onClick: (event) => event.stopPropagation(), className: "mui-68d781378b03 mui-94f91922a10e mui-34a57d4b4103 mui-8da02faac748 mui-b8b1747fa763 mui-d2e4a66bb430 mui-978f422895e5 mui-d0c2ae8419e1 mui-9c02852bfc55 mui-e2ed522ed9b7 mui-cbd3aed703f7 mui-fa8e1efead3c mui-eaedb91f8774" })), _jsx("div", { className: cn("mui-184ddc11e5f9 mui-81b198a2db84", autoRowHeight ? "mui-726fca123972 mui-37cf9655f30a mui-b5edc3ea7c91" : "mui-7bd696ca6be3 mui-5a3a4ee420c2", contentClassName), children: _jsx(TableCellContent, { cell: cell, renderer: cell.column.columnDef.cell, version: contentVersion, state: contentState }) })] }, cell.id)] }, cell.id));
73
74
  }) }, row.id));
74
75
  if (!renderRowDetail)
75
76
  return rowElement;
@@ -20,6 +20,10 @@ export interface TableViewProps<T extends object> extends TableDataState {
20
20
  label?: string;
21
21
  /** Defaults to "auto": fit the rows, capped at 65% of the viewport height. */
22
22
  height?: number | string;
23
+ /** Fill the remaining page height, or fit content by default. Fill overrides height. */
24
+ layout?: "content" | "fill";
25
+ /** Controls below the grid, included in the available height when layout is fill. */
26
+ footer?: ReactNode;
23
27
  /** Auto measures multiline rows and retains all columns to keep their height stable. */
24
28
  rowHeight?: number | "auto";
25
29
  rowClassName?: (row: T) => string | undefined;
@@ -41,6 +45,8 @@ export interface TableViewProps<T extends object> extends TableDataState {
41
45
  /** Optional double-click and Enter action. Interactive controls keep their own behavior. */
42
46
  onRowActivate?: (row: T) => void;
43
47
  isRowHighlighted?: (row: T) => boolean;
48
+ /** Inline checkboxes for enabled row selection. Set false for custom selection controls. */
49
+ rowSelectionControls?: boolean;
44
50
  onCopyError?: (error: unknown) => void;
45
51
  }
46
- export declare function TableView<T extends object>({ table, label, height, rowHeight: rowHeightOption, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status, refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, onCopyError, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;
52
+ export declare function TableView<T extends object>({ table, label, height, layout: layoutMode, footer, rowHeight: rowHeightOption, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status, refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls, onCopyError, }: TableViewProps<T>): import("react/jsx-runtime").JSX.Element;
@@ -12,7 +12,10 @@ import { TableLoadingRows } from "./table-loading.js";
12
12
  import { TableInitialState } from "./table-feedback.js";
13
13
  import { useTableInteraction } from "./use-table-interaction.js";
14
14
  import { useTableResults } from "./use-table-results.js";
15
- export function TableView({ table, label = "Data table", height = "auto", rowHeight: rowHeightOption = 44, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status = "ready", refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, onCopyError, }) {
15
+ import { useInlineRowSelection } from "./use-inline-row-selection.js";
16
+ import { TableFrame } from "./table-frame.js";
17
+ export function TableView({ table, label = "Data table", height = "auto", layout: layoutMode = "content", footer, rowHeight: rowHeightOption = 44, rowClassName, renderRowDetail, className, contentClassName, emptyState, loadingState, scrollRef, status = "ready", refreshing, error, retry, loadMore, queryKey, filters, renderHeader, onRowClick, onRowActivate, isRowHighlighted, rowSelectionControls = true, onCopyError, }) {
18
+ const fill = layoutMode === "fill";
16
19
  const { resultKey, hasFilters, clearFilters } = useTableResults(table, queryKey, filters);
17
20
  const autoRowHeight = rowHeightOption === "auto" || Boolean(renderRowDetail);
18
21
  const rowHeight = rowHeightOption === "auto" ? 44 : rowHeightOption;
@@ -42,6 +45,7 @@ export function TableView({ table, label = "Data table", height = "auto", rowHei
42
45
  const sizing = table.state.columnSizing;
43
46
  const layout = useMemo(() => tableLayout(table, viewportWidth, rowHeight), [table, startColumns, centerColumns, endColumns, sizing, viewportWidth, rowHeight]);
44
47
  const { totalWidth, pinningActive } = layout;
48
+ const { inlineSelection, selectLoaded } = useInlineRowSelection(table, layout.columns, rowSelectionControls);
45
49
  const focused = table.getFocusedCell();
46
50
  const { columns, columnGaps, cellStyle } = useColumnWindow(layout, container, viewportWidth, focused?.column.id, !autoRowHeight);
47
51
  const columnIndexes = useMemo(() => new Map(layout.columns.map((column, index) => [column.id, index])), [layout.columns]);
@@ -97,12 +101,12 @@ export function TableView({ table, label = "Data table", height = "auto", rowHei
97
101
  virtual,
98
102
  ]);
99
103
  const headersById = new Map(table.getFlatHeaders().map((header) => [header.column.id, header]));
100
- return (_jsxs("div", { "data-mendy-ui": "", className: "mui-184ddc11e5f9", children: [_jsx("div", { "aria-live": "polite", className: "mui-32fb090591d9", children: announcement }), _jsxs("div", { ref: setContainer, role: "grid", tabIndex: -1, "aria-label": label, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1, "aria-colcount": layout.columns.length, "aria-busy": status === "loading" || refreshing, style: {
101
- height: height === "auto" ? undefined : height,
102
- maxHeight: height === "auto" ? "65dvh" : undefined,
103
- }, className: cn("mui-d2d9e1f13413 mui-014aadadffad mui-1a26a0d28420 mui-3fa8c572949b mui-4f1a55de40bc mui-5b272f3c5076 mui-c74ab393b96d mui-b30fc56058b6", className), onKeyDown: onKeyDown, children: [_jsx("div", { role: "row", "aria-rowindex": 1, className: "mui-964a9431ff49 mui-98599e4ee250 mui-4e8f0a87a0dc mui-222f930b8752 mui-2bf6510f1330 mui-bbe39cfb5cc6 mui-5b272f3c5076", style: { width: totalWidth }, children: columns.map((column) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx(TableHeaderCell, { table: table, header: headersById.get(column.id), index: columnIndexes.get(column.id), style: cellStyle(column), renderHeader: renderHeader, contentClassName: contentClassName }, column.id)] }, column.id))) }), _jsx(TableInitialState, { status: status, hasRows: rows.length > 0, loadingState: loadingState ?? (_jsx(TableLoadingRows, { columns: columns, columnGaps: columnGaps, width: totalWidth, rowHeight: rowHeight, cellStyle: cellStyle, count: height === "auto"
104
+ return (_jsxs(TableFrame, { layout: layoutMode, stretch: height === "100%", footer: footer, children: [_jsx("div", { "aria-live": "polite", className: "mui-32fb090591d9", children: announcement }), _jsxs("div", { ref: setContainer, role: "grid", tabIndex: -1, "aria-label": label, "aria-rowcount": renderRowDetail ? -1 : rows.length + 1, "aria-colcount": layout.columns.length, "aria-busy": status === "loading" || refreshing, style: {
105
+ height: fill || height === "auto" ? undefined : height,
106
+ maxHeight: !fill && height === "auto" ? "65dvh" : undefined,
107
+ }, className: cn("mui-d2d9e1f13413 mui-014aadadffad mui-1a26a0d28420 mui-3fa8c572949b mui-4f1a55de40bc mui-5b272f3c5076 mui-c74ab393b96d mui-b30fc56058b6", fill && "mui-410da8dfa8ac mui-7bd5bab6d7f4", className), onKeyDown: onKeyDown, children: [_jsx("div", { role: "row", "aria-rowindex": 1, className: "mui-964a9431ff49 mui-98599e4ee250 mui-4e8f0a87a0dc mui-222f930b8752 mui-2bf6510f1330 mui-bbe39cfb5cc6 mui-5b272f3c5076", style: { width: totalWidth }, children: columns.map((column) => (_jsxs(Fragment, { children: [columnGaps.has(column.id) && (_jsx("div", { "aria-hidden": "true", className: "mui-27ead27a81df", style: { width: columnGaps.get(column.id) } })), _jsx(TableHeaderCell, { table: table, header: headersById.get(column.id), index: columnIndexes.get(column.id), style: cellStyle(column), renderHeader: renderHeader, contentClassName: contentClassName, selectLoaded: selectLoaded }, column.id)] }, column.id))) }), _jsx(TableInitialState, { status: status, hasRows: rows.length > 0, loadingState: loadingState ?? (_jsx(TableLoadingRows, { columns: columns, columnGaps: columnGaps, width: totalWidth, rowHeight: rowHeight, cellStyle: cellStyle, count: !fill && height === "auto"
104
108
  ? 8
105
- : Math.max(1, Math.ceil(((virtual.scrollRect?.height ?? 400) - rowHeight) / rowHeight)) })), emptyState: emptyState, hasFilters: hasFilters, pageIndex: table.state.pagination.pageIndex, clearFilters: clearFilters, firstPage: () => table.setPageIndex(0), error: error, retry: retry }), _jsx("div", { role: "rowgroup", className: "mui-d2d9e1f13413 mui-2bf6510f1330", style: { height: virtual.getTotalSize(), width: totalWidth }, children: items.map((item) => (_jsx(TableBodyRow, { row: rows[item.index], rowIndex: item.index, start: item.start, rowHeight: rowHeight, autoRowHeight: autoRowHeight, measureElement: autoRowHeight ? virtual.measureElement : undefined, rowClassName: rowClassName, renderRowDetail: renderRowDetail, detailWidth: viewportWidth ?? totalWidth, cellStyle: cellStyle, columns: columns, columnGaps: columnGaps, columnIndexes: columnIndexes, contentVersion: table.options, contentState: table.state, focusedId: focused?.id, copied: copied, contentClassName: contentClassName, onRowClick: onRowClick, onRowActivate: onRowActivate, isRowHighlighted: isRowHighlighted }, item.key))) }), rows.length > 0 && status === "error" && (_jsxs("div", { role: "alert", className: "mui-964a9431ff49 mui-30150dd033ab mui-5b272f3c5076 mui-094f5333853b", children: [error ?? "Could not refresh rows.", retry && (_jsx(Button, { onClick: retry, variant: "outline", size: "sm", children: "Retry" }))] })), loadMore?.available && (_jsxs("div", { className: "mui-964a9431ff49 mui-635702706586 mui-222f930b8752 mui-71556df3b421 mui-a503dd374cca mui-074569488cca mui-96b92a971c95 mui-c74ab393b96d mui-35f35c41d134", children: [loadMore.loading ? (_jsxs("div", { role: "status", className: "mui-222f930b8752 mui-71556df3b421 mui-074569488cca", children: [_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "mui-2bd43fb57913 mui-27ead27a81df mui-2c14b55d77e6 mui-237747164b60", children: _jsx("path", { d: "M12 3v3m6.366-.366-2.12 2.12M21 12h-3m.366 6.366-2.12-2.12M12 21v-3m-6.366.366 2.12-2.12M3 12h3m-.366-6.366 2.12 2.12" }) }), _jsx("span", { children: "Loading more\u2026" })] })) : (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
109
+ : Math.max(1, Math.ceil(((virtual.scrollRect?.height ?? 400) - rowHeight) / rowHeight)) })), emptyState: emptyState, hasFilters: hasFilters, pageIndex: table.state.pagination.pageIndex, clearFilters: clearFilters, firstPage: () => table.setPageIndex(0), error: error, retry: retry }), _jsx("div", { role: "rowgroup", className: "mui-d2d9e1f13413 mui-2bf6510f1330", style: { height: virtual.getTotalSize(), width: totalWidth }, children: items.map((item) => (_jsx(TableBodyRow, { row: rows[item.index], rowIndex: item.index, start: item.start, rowHeight: rowHeight, autoRowHeight: autoRowHeight, measureElement: autoRowHeight ? virtual.measureElement : undefined, rowClassName: rowClassName, renderRowDetail: renderRowDetail, detailWidth: viewportWidth ?? totalWidth, cellStyle: cellStyle, columns: columns, columnGaps: columnGaps, columnIndexes: columnIndexes, contentVersion: table.options, contentState: table.state, focusedId: focused?.id, copied: copied, contentClassName: contentClassName, onRowClick: onRowClick, onRowActivate: onRowActivate, isRowHighlighted: isRowHighlighted, inlineSelection: inlineSelection }, item.key))) }), rows.length > 0 && status === "error" && (_jsxs("div", { role: "alert", className: "mui-964a9431ff49 mui-30150dd033ab mui-5b272f3c5076 mui-094f5333853b", children: [error ?? "Could not refresh rows.", retry && (_jsx(Button, { onClick: retry, variant: "outline", size: "sm", children: "Retry" }))] })), loadMore?.available && (_jsxs("div", { className: "mui-964a9431ff49 mui-635702706586 mui-222f930b8752 mui-71556df3b421 mui-a503dd374cca mui-074569488cca mui-96b92a971c95 mui-c74ab393b96d mui-35f35c41d134", children: [loadMore.loading ? (_jsxs("div", { role: "status", className: "mui-222f930b8752 mui-71556df3b421 mui-074569488cca", children: [_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", className: "mui-2bd43fb57913 mui-27ead27a81df mui-2c14b55d77e6 mui-237747164b60", children: _jsx("path", { d: "M12 3v3m6.366-.366-2.12 2.12M21 12h-3m.366 6.366-2.12-2.12M12 21v-3m-6.366.366 2.12-2.12M3 12h3m-.366-6.366 2.12 2.12" }) }), _jsx("span", { children: "Loading more\u2026" })] })) : (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => {
106
110
  requested.current = null;
107
111
  void Promise.resolve()
108
112
  .then(() => loadMore.load())
@@ -39,6 +39,9 @@ export function useDataTable({ rows: inputRows, columns: inputColumns, processin
39
39
  defaultColumn: { size: 180, minSize: 48, maxSize: 1200, ...options.defaultColumn },
40
40
  columnResizeMode: options.columnResizeMode ?? "onChange",
41
41
  enableCellSelection: options.enableCellSelection ?? true,
42
+ enableRowSelection: options.enableRowSelection ??
43
+ (Boolean(options.onRowSelectionChange) ||
44
+ columns.some((column) => column.id === "_selection")),
42
45
  enableColumnPinning: options.enableColumnPinning ?? true,
43
46
  autoResetCellSelection: options.autoResetCellSelection ?? false,
44
47
  manualFiltering: processing?.filtering === "external",
@@ -0,0 +1,2 @@
1
+ /** Size the containing frame, not the grid, so controls share its available height. */
2
+ export declare function useFillLayout(enabled: boolean): (node: HTMLDivElement | null) => void;
@@ -0,0 +1,67 @@
1
+ "use client";
2
+ import { useCallback, useRef } from "react";
3
+ /** Size the containing frame, not the grid, so controls share its available height. */
4
+ export function useFillLayout(enabled) {
5
+ const dispose = useRef(undefined);
6
+ return useCallback((node) => {
7
+ dispose.current?.();
8
+ dispose.current = undefined;
9
+ if (!node || !enabled)
10
+ return;
11
+ let frame = 0;
12
+ let previous = -1;
13
+ const measure = () => {
14
+ frame = 0;
15
+ let inset = 0;
16
+ let ancestor = node.parentElement;
17
+ while (ancestor) {
18
+ const style = getComputedStyle(ancestor);
19
+ inset += parseFloat(style.paddingBottom) || 0;
20
+ inset += parseFloat(style.borderBottomWidth) || 0;
21
+ ancestor = ancestor.parentElement;
22
+ }
23
+ const height = Math.max(0, window.innerHeight - node.getBoundingClientRect().top - inset);
24
+ if (Math.abs(height - previous) < 0.5)
25
+ return;
26
+ previous = height;
27
+ node.style.height = `${height}px`;
28
+ };
29
+ const schedule = () => {
30
+ if (!frame)
31
+ frame = requestAnimationFrame(measure);
32
+ };
33
+ const observer = new ResizeObserver(schedule);
34
+ const observe = () => {
35
+ observer.disconnect();
36
+ let current = node;
37
+ while (current?.parentElement) {
38
+ observer.observe(current.parentElement);
39
+ let sibling = current.previousElementSibling;
40
+ while (sibling) {
41
+ observer.observe(sibling);
42
+ sibling = sibling.previousElementSibling;
43
+ }
44
+ current = current.parentElement;
45
+ }
46
+ schedule();
47
+ };
48
+ // Newly inserted preceding siblings can move a table inside a fixed-height parent.
49
+ const mutations = new MutationObserver(observe);
50
+ let parent = node.parentElement;
51
+ while (parent) {
52
+ mutations.observe(parent, { childList: true });
53
+ parent = parent.parentElement;
54
+ }
55
+ measure();
56
+ observe();
57
+ window.addEventListener("resize", schedule);
58
+ dispose.current = () => {
59
+ observer.disconnect();
60
+ mutations.disconnect();
61
+ window.removeEventListener("resize", schedule);
62
+ cancelAnimationFrame(frame);
63
+ if (node.style.height === `${previous}px`)
64
+ node.style.removeProperty("height");
65
+ };
66
+ }, [enabled]);
67
+ }
@@ -0,0 +1,10 @@
1
+ import type { Column } from "@tanstack/react-table";
2
+ import type { DataTableFeatures } from "./features.js";
3
+ import type { DataTableInstance } from "./use-data-table.js";
4
+ export declare function useInlineRowSelection<T extends object>(table: DataTableInstance<T>, columns: Column<DataTableFeatures, T>[], controls: boolean): {
5
+ inlineSelection: boolean;
6
+ selectLoaded: {
7
+ checked: boolean | "indeterminate";
8
+ disabled: boolean;
9
+ } | undefined;
10
+ };
@@ -0,0 +1,33 @@
1
+ import { useMemo } from "react";
2
+ export function useInlineRowSelection(table, columns, controls) {
3
+ const rows = table.getRowModel().rows;
4
+ const inlineSelection = Boolean(controls &&
5
+ table.options.enableRowSelection &&
6
+ !columns.some((column) => column.id === "_selection"));
7
+ const rowSelection = table.state.rowSelection;
8
+ const enableRowSelection = table.options.enableRowSelection;
9
+ const enableMultiRowSelection = table.options.enableMultiRowSelection;
10
+ const selectLoadedAvailability = useMemo(() => {
11
+ if (!inlineSelection || enableMultiRowSelection === false)
12
+ return undefined;
13
+ let hasSelectableRow = false;
14
+ for (const row of rows) {
15
+ if (!row.getCanSelect())
16
+ continue;
17
+ hasSelectableRow = true;
18
+ if (!row.getCanMultiSelect())
19
+ return undefined;
20
+ }
21
+ return { disabled: !hasSelectableRow };
22
+ }, [rows, inlineSelection, enableRowSelection, enableMultiRowSelection]);
23
+ const selectLoaded = useMemo(() => {
24
+ if (!selectLoadedAvailability)
25
+ return undefined;
26
+ return {
27
+ checked: table.getIsAllPageRowsSelected() ||
28
+ (table.getIsSomePageRowsSelected() ? "indeterminate" : false),
29
+ disabled: selectLoadedAvailability.disabled,
30
+ };
31
+ }, [table, rowSelection, selectLoadedAvailability]);
32
+ return { inlineSelection, selectLoaded };
33
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mendylanda/ui",
3
- "version": "0.3.0-alpha.8",
3
+ "version": "0.3.0",
4
4
  "description": "Mendy Landa’s reusable React components. Typed filters and tables with shared interaction behavior and customizable UI.",
5
5
  "homepage": "https://ui.mendylanda.com",
6
6
  "license": "MIT",
@@ -71,11 +71,6 @@
71
71
  "publishConfig": {
72
72
  "access": "public"
73
73
  },
74
- "scripts": {
75
- "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
76
- "typecheck": "tsc -p tsconfig.build.json --noEmit",
77
- "prepack": "pnpm build"
78
- },
79
74
  "dependencies": {
80
75
  "@hello-pangea/dnd": "18.0.1",
81
76
  "@radix-ui/react-checkbox": "^1.3.3",
@@ -112,5 +107,9 @@
112
107
  "nuqs": {
113
108
  "optional": true
114
109
  }
110
+ },
111
+ "scripts": {
112
+ "build": "tsc -p tsconfig.build.json && node scripts/build-css.mjs",
113
+ "typecheck": "tsc -p tsconfig.build.json --noEmit"
115
114
  }
116
- }
115
+ }