@mendylanda/ui 0.1.1 → 0.1.3
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 +14 -0
- package/dist/class-names.js +1 -1
- package/dist/customization.d.ts +3 -1
- package/dist/customization.js +3 -2
- package/dist/filters/filter-bar.d.ts +4 -1
- package/dist/filters/filter-bar.js +31 -25
- package/dist/filters/filter-definition.d.ts +15 -0
- package/dist/filters/filter-menu-focus.d.ts +3 -0
- package/dist/filters/filter-menu-focus.js +22 -0
- package/dist/filters/filter-menu-panel.d.ts +1 -0
- package/dist/filters/filter-menu-panel.js +40 -77
- package/dist/filters/filter-option-search.d.ts +4 -0
- package/dist/filters/filter-option-search.js +9 -0
- package/dist/filters/filter-select-editor.d.ts +1 -0
- package/dist/filters/filter-select-editor.js +7 -8
- package/dist/filters/filters.d.ts +8 -2
- package/dist/filters/filters.js +29 -3
- package/dist/filters/use-filter-options.js +5 -1
- package/dist/filters/use-menu-placement.d.ts +15 -0
- package/dist/filters/use-menu-placement.js +104 -0
- package/dist/primitives/dropdown-menu.js +2 -2
- package/dist/styles.css +80 -52
- package/package.json +8 -6
package/README.md
CHANGED
|
@@ -47,3 +47,17 @@ Customize with named `classNames`, typed option/editor/summary renderers, `Mendy
|
|
|
47
47
|
- [Source and releases](https://github.com/MendyLanda/mendy-ui)
|
|
48
48
|
|
|
49
49
|
Update the dependency and redeploy a project to receive shared fixes. MIT licensed. Shadcn attribution is included in the package.
|
|
50
|
+
|
|
51
|
+
### Chip and menu presentation
|
|
52
|
+
|
|
53
|
+
Use `chipLabel: false` when the selected values explain themselves. A string such as `chipLabel: "SIM"` shortens the visible label while retaining the field's full accessible name. `renderSummary` supplies custom chip content independently of `renderOption`.
|
|
54
|
+
|
|
55
|
+
`FilterMenuGroup.separatorBefore` separates related categories. Within a group, `menuLayout: "inline"` puts a field's editor beside its label. Custom editors can set `editorPadding: "none"` when they own their spacing. Honor the `autoFocus` value supplied to `renderEditor`: it is false during menu previews, and the menu moves focus on click or keyboard activation.
|
|
56
|
+
|
|
57
|
+
`<MendyUIProvider menuLayout="anchored">` positions desktop editors beside the selected row at their own height. The default remains `connected`. Both use the single-panel mobile layout. A standalone `<FilterMenu anchor={searchRef}>` can align to a custom search field. The menu grows to the available viewport height, capped by `--mendy-filter-menu-max-height`, which defaults to `44rem`; large lists remain virtualized.
|
|
58
|
+
|
|
59
|
+
Chips enter with a short, staggered Motion spring. Reduced-motion preferences disable their movement. Theme radius still controls their corners.
|
|
60
|
+
|
|
61
|
+
Filter lists use the search anchor's width by default and shrink when the viewport cannot fit both columns. Override `--mendy-filter-list-width` or `--mendy-filter-menu-width` for a custom layout. In anchored mode, editors touch the list and move upward for lower rows so short editors stay within the list's height.
|
|
62
|
+
|
|
63
|
+
`FilterList` uses the original SimCall Motion variants: a 60ms stagger on initial list entry and the default item transition from y=10/opacity=0 to y=0/opacity=1. New chips enter immediately, without a delay based on their list position. `FilterChipList` provides the same orchestration for custom compositions of `FilterChip`; standalone chips also animate.
|
package/dist/class-names.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export const originalClassNames = {"mui-33228ff7d583":"pointer-events-none","mui-b75af7ef6c4d":"invisible","mui-d42ef1497900":"visible","mui-32fb090591d9":"sr-only","mui-747355bdc2a2":"absolute","mui-d2d9e1f13413":"relative","mui-ce13093ad8c9":"inset-0","mui-3ba24c062d55":"inset-x-0","mui-cced28c6dc3f":"start","mui-207bd0b3f259":"start-2","mui-cea70f23972e":"start-3","mui-96a350bd3168":"start-4","mui-361e48d0308f":"end","mui-13422ddc8d83":"end-1","mui-585f4729f611":"end-9","mui-98599e4ee250":"top-0","mui-4e45f4841abb":"top-1/2","mui-866c339ea145":"left-4","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-8cc46fa87f41":"-me-1.5","mui-f28fea81a5cd":"mt-2","mui-cc51bda60e7e":"ml-auto","mui-496aca80e4d8":"block","mui-222f930b8752":"flex","mui-0f2a693e93e2":"grid","mui-e564b4081d7a":"hidden","mui-995cf20a9c45":"inline","mui-123306850fe1":"inline-flex","mui-3da89b3ed14b":"field-sizing-content","mui-129d6f9b1e07":"aspect-square","mui-f7d12b41bceb":"size-(--cell-size)","mui-dc797fcc7165":"size-1.5","mui-9e7600197f38":"size-2","mui-61c000c8a98a":"size-3.5","mui-100c22d5776b":"size-4","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-ce1945804664":"h-6","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-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-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-8867d85ed290":"w-8","mui-72b37c1a040d":"w-64","mui-37535002f0f7":"w-72","mui-919182384559":"w-[18.75rem]","mui-8dd3eece40db":"w-[var(--mendy-filter-menu-width,32rem)]","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-7bd5bab6d7f4":"flex-1","mui-66b490dd6005":"shrink","mui-27ead27a81df":"shrink-0","mui-215061302c50":"border-collapse","mui-3a3774477287":"origin-(--radix-dropdown-menu-content-transform-origin)","mui-5dde0fd996f0":"-translate-y-1/2","mui-aa214ea38326":"transform","mui-393df0d154e0":"animate-none!","mui-7b3cd77eb999":"animate-pulse","mui-d343f41ba73e":"cursor-default","mui-acd532d8913e":"resize","mui-ae112c903ef8":"resize-y","mui-da607d0a2538":"grid-cols-[min(var(--mendy-filter-list-width,13rem),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-c62ec162662e":"justify-start","mui-19e97f3f40e6":"gap-1","mui-70007b876865":"gap-1.5","mui-074569488cca":"gap-2","mui-90fc3ec35a37":"gap-4","mui-27e6c432192f":"space-y-1","mui-267171770524":"space-y-2","mui-5a3a4ee420c2":"truncate","mui-d5111d0e9f48":"overflow-hidden","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-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-292affc1f780":"bg-accent","mui-5b272f3c5076":"bg-background","mui-a943bea85d66":"bg-border","mui-0cf6c2e8fe7e":"bg-current","mui-965cf6587342":"bg-destructive","mui-e593c38256e0":"bg-popover","mui-0c2864fba576":"bg-primary","mui-d191cb569aac":"bg-secondary","mui-8fca9236d191":"bg-transparent","mui-717b342c2d01":"fill-current","mui-04760bcd507f":"p-0","mui-1dee6e3ec67d":"p-1","mui-b97db4a9f432":"p-2","mui-094f5333853b":"p-3","mui-56b8f5e0fb12":"px-(--cell-size)","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-078d945937da":"ps-8","mui-b2100041c585":"ps-9","mui-05d4103bd67f":"pe-2","mui-0e14c365f9e8":"pe-9","mui-559069d2c2e5":"pe-16","mui-0a702d97ed7d":"pt-3","mui-1a52da5bc88c":"pr-1","mui-f5d8e661d857":"pl-2","mui-75b27e813dcc":"pl-8","mui-05ab12448317":"text-center","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-7de07d413c13":"shadow-xs","mui-59edd3d33673":"outline-hidden","mui-318678825324":"outline","mui-dfc3376b8266":"filter","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-5662a94d9dba":"[--filter-menu-height:min(30rem,var(--radix-dropdown-menu-content-available-height,30rem))]","mui-cacb19aa9640":"[scrollbar-width:thin]","mui-14bd99410890":"[unicode-bidi:isolate]","mui-9af9a4182597":"group-data-[disabled=true]:pointer-events-none","mui-ad936fcbed63":"group","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-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-4fa4c190281c":"first:border-t-0","mui-37ad15a95595":"hover:bg-accent","mui-bb6a4b3e902d":"hover:bg-destructive/90","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-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-1df9125eebaf":"focus-visible:outline-1","mui-223daa83ed2d":"focus-visible:outline-ring","mui-2e357972fc10":"focus-visible:outline-none","mui-50aafa8694bb":"focus-visible:ring-inset","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-7d900a71e5ba":"aria-selected:text-muted-foreground","mui-397f5ba426a0":"data-[disabled]:pointer-events-none","mui-9beb654fcb0d":"data-[disabled]:opacity-50","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-5e49f8678d00":"motion-safe:animate-in","mui-b225f0361d28":"motion-safe:duration-200","mui-3bc474178684":"motion-safe:fade-in-0","mui-bc94a66158a3":"motion-safe:fill-mode-backwards","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-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-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-33228ff7d583":"pointer-events-none","mui-b75af7ef6c4d":"invisible","mui-d42ef1497900":"visible","mui-32fb090591d9":"sr-only","mui-747355bdc2a2":"absolute","mui-d2d9e1f13413":"relative","mui-ce13093ad8c9":"inset-0","mui-3ba24c062d55":"inset-x-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-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-3da89b3ed14b":"field-sizing-content","mui-129d6f9b1e07":"aspect-square","mui-f7d12b41bceb":"size-(--cell-size)","mui-dc797fcc7165":"size-1.5","mui-61c000c8a98a":"size-3.5","mui-100c22d5776b":"size-4","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-ce1945804664":"h-6","mui-1fb07b38c63b":"h-8","mui-539ae144f076":"h-9","mui-fdd2f85cad6b":"h-10","mui-2bf5d58a824b":"h-12","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-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-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-8867d85ed290":"w-8","mui-72b37c1a040d":"w-64","mui-37535002f0f7":"w-72","mui-0b9c84552e40":"w-[var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,18.75rem))]","mui-bd8a502f98ae":"w-[var(--mendy-filter-menu-width,calc(var(--filter-list-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-7bd5bab6d7f4":"flex-1","mui-66b490dd6005":"shrink","mui-27ead27a81df":"shrink-0","mui-215061302c50":"border-collapse","mui-3a3774477287":"origin-(--radix-dropdown-menu-content-transform-origin)","mui-5dde0fd996f0":"-translate-y-1/2","mui-aa214ea38326":"transform","mui-393df0d154e0":"animate-none!","mui-7b3cd77eb999":"animate-pulse","mui-d343f41ba73e":"cursor-default","mui-acd532d8913e":"resize","mui-ae112c903ef8":"resize-y","mui-a3c6c8c31aed":"grid-cols-[min(var(--filter-list-width),calc(100%_-_min(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-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-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-a22ea0ba562a":"rounded-t-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-292affc1f780":"bg-accent","mui-5b272f3c5076":"bg-background","mui-a943bea85d66":"bg-border","mui-0cf6c2e8fe7e":"bg-current","mui-965cf6587342":"bg-destructive","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-56b8f5e0fb12":"px-(--cell-size)","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-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-be02e79e6a27":"pt-3!","mui-1a52da5bc88c":"pr-1","mui-f5d8e661d857":"pl-2","mui-05ab12448317":"text-center","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-59edd3d33673":"outline-hidden","mui-318678825324":"outline","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-9af9a4182597":"group-data-[disabled=true]:pointer-events-none","mui-ad936fcbed63":"group","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-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-a267680f9f49":"before:absolute","mui-e22234c7b474":"before:inset-x-0","mui-4d24300d447b":"before:top-0","mui-37a30b916086":"before:border-t","mui-37ad15a95595":"hover:bg-accent","mui-bb6a4b3e902d":"hover:bg-destructive/90","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-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-1df9125eebaf":"focus-visible:outline-1","mui-223daa83ed2d":"focus-visible:outline-ring","mui-2e357972fc10":"focus-visible:outline-none","mui-50aafa8694bb":"focus-visible:ring-inset","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-7d900a71e5ba":"aria-selected:text-muted-foreground","mui-397f5ba426a0":"data-[disabled]:pointer-events-none","mui-9beb654fcb0d":"data-[disabled]:opacity-50","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-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-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"};
|
package/dist/customization.d.ts
CHANGED
|
@@ -14,13 +14,15 @@ export interface MendyUIComponents {
|
|
|
14
14
|
export type FilterPart = "root" | "search" | "searchInput" | "menuTrigger" | "menu" | "menuList" | "menuRow" | "menuHeader" | "editor" | "chip" | "chipTrigger" | "chipRemove" | "option" | "clear";
|
|
15
15
|
export type FilterClassNames = Partial<Record<FilterPart, string>>;
|
|
16
16
|
export interface MendyUIOptions {
|
|
17
|
+
/** Desktop editor placement. Phones always use one panel with Back. */
|
|
18
|
+
menuLayout?: "connected" | "anchored";
|
|
17
19
|
components?: Partial<MendyUIComponents>;
|
|
18
20
|
classNames?: FilterClassNames;
|
|
19
21
|
/** Mount dropdowns inside a local theme or dialog instead of document.body. */
|
|
20
22
|
portalContainer?: HTMLElement | null;
|
|
21
23
|
}
|
|
22
24
|
/** Nested providers inherit defaults; local settings override matching keys. */
|
|
23
|
-
export declare function MendyUIProvider({ children, components, classNames, portalContainer, }: MendyUIOptions & {
|
|
25
|
+
export declare function MendyUIProvider({ children, components, classNames, portalContainer, menuLayout, }: MendyUIOptions & {
|
|
24
26
|
children: ReactNode;
|
|
25
27
|
}): import("react/jsx-runtime").JSX.Element;
|
|
26
28
|
export declare function useMendyUI(): MendyUIOptions;
|
package/dist/customization.js
CHANGED
|
@@ -8,13 +8,14 @@ import { Label as DefaultLabel } from "./primitives/label.js";
|
|
|
8
8
|
import { Calendar as DefaultCalendar } from "./primitives/calendar.js";
|
|
9
9
|
const Context = createContext({});
|
|
10
10
|
/** Nested providers inherit defaults; local settings override matching keys. */
|
|
11
|
-
export function MendyUIProvider({ children, components, classNames, portalContainer, }) {
|
|
11
|
+
export function MendyUIProvider({ children, components, classNames, portalContainer, menuLayout, }) {
|
|
12
12
|
const parent = useContext(Context);
|
|
13
13
|
const value = useMemo(() => ({
|
|
14
|
+
menuLayout: menuLayout ?? parent.menuLayout,
|
|
14
15
|
components: { ...parent.components, ...components },
|
|
15
16
|
classNames: { ...parent.classNames, ...classNames },
|
|
16
17
|
portalContainer: portalContainer === undefined ? parent.portalContainer : portalContainer,
|
|
17
|
-
}), [parent, components, classNames, portalContainer]);
|
|
18
|
+
}), [parent, components, classNames, portalContainer, menuLayout]);
|
|
18
19
|
return _jsx(Context.Provider, { value: value, children: children });
|
|
19
20
|
}
|
|
20
21
|
export function useMendyUI() {
|
|
@@ -6,6 +6,7 @@ export interface FilterMenuGroup {
|
|
|
6
6
|
id: string;
|
|
7
7
|
label: string;
|
|
8
8
|
fields: string[];
|
|
9
|
+
separatorBefore?: boolean;
|
|
9
10
|
icon?: ReactNode;
|
|
10
11
|
}
|
|
11
12
|
export interface FilterRootProps {
|
|
@@ -30,9 +31,11 @@ export declare function FilterSearch({ label, placeholder, }: {
|
|
|
30
31
|
placeholder?: string;
|
|
31
32
|
}): import("react/jsx-runtime").JSX.Element;
|
|
32
33
|
/** A standalone menu button for layouts without a search field. */
|
|
33
|
-
export declare function FilterMenu({ children, asChild, }: {
|
|
34
|
+
export declare function FilterMenu({ children, asChild, anchor, }: {
|
|
34
35
|
children?: ReactNode;
|
|
35
36
|
asChild?: boolean;
|
|
37
|
+
/** Align a standalone trigger to an application-owned search field. */
|
|
38
|
+
anchor?: React.RefObject<HTMLDivElement | null>;
|
|
36
39
|
}): import("react/jsx-runtime").JSX.Element;
|
|
37
40
|
export declare function FilterList(): import("react/jsx-runtime").JSX.Element;
|
|
38
41
|
export declare function FilterField({ id }: {
|
|
@@ -6,10 +6,11 @@ import { ListFilter, Search, X, Circle, ListChecks, Type, Hash, CalendarDays, Sl
|
|
|
6
6
|
import { Button } from "../customization.js";
|
|
7
7
|
import { Input } from "../customization.js";
|
|
8
8
|
import { Label } from "../customization.js";
|
|
9
|
+
import { FilterOptionSearch } from "./filter-option-search.js";
|
|
9
10
|
import { FilterDateEditor } from "./filter-date-editor.js";
|
|
10
11
|
import { Textarea } from "../customization.js";
|
|
11
12
|
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuRadioGroup, DropdownMenuRadioItem, } from "../primitives/dropdown-menu.js";
|
|
12
|
-
import { AppliedFilter, FilterCheckboxItem } from "./filters.js";
|
|
13
|
+
import { AppliedFilter, FilterCheckboxItem, FilterChipList } from "./filters.js";
|
|
13
14
|
import { FilterOptionCache, useFilterOptions } from "./use-filter-options.js";
|
|
14
15
|
import { classifyPaste, resolvePasteAmbiguity } from "./filter-state.js";
|
|
15
16
|
import { cn } from "../utils.js";
|
|
@@ -111,10 +112,10 @@ export function FilterSearch({ label = "Search", placeholder = "Search or filter
|
|
|
111
112
|
}, children: _jsx(X, { className: "mui-61c000c8a98a", "aria-hidden": "true" }) })), _jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { variant: "ghost", size: "icon", ref: trigger, type: "button", disabled: disabled, "aria-label": "Open filters", "aria-haspopup": "dialog", className: cn("mui-747355bdc2a2 mui-13422ddc8d83 mui-4e45f4841abb mui-79ede756e761 mui-5dde0fd996f0 mui-2cdd01663c76 mui-8da02faac748 mui-2e357972fc10 mui-39be5a15b766 mui-db549d38ff19 mui-790ed041a953", filters.active.length ? "mui-65694092f002" : "mui-0b5a4d1257ab", classNames?.menuTrigger), children: _jsx(ListFilter, { className: "mui-100c22d5776b", "aria-hidden": "true" }) }) })] }), filters.menuOpen && _jsx(FilterMenuContent, { anchor: anchor })] }));
|
|
112
113
|
}
|
|
113
114
|
/** A standalone menu button for layouts without a search field. */
|
|
114
|
-
export function FilterMenu({ children = "Add filter", asChild = false, }) {
|
|
115
|
+
export function FilterMenu({ children = "Add filter", asChild = false, anchor, }) {
|
|
115
116
|
const { filters, trigger, disabled, direction } = useRoot();
|
|
116
117
|
const { classNames } = useMendyUI();
|
|
117
|
-
return (_jsxs(DropdownMenu, { dir: direction, modal: false, open: filters.menuOpen, onOpenChange: filters.setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { ref: trigger, asChild: asChild, className: classNames?.menuTrigger, variant: "outline", disabled: disabled, "aria-haspopup": "dialog", children: children }) }), filters.menuOpen && _jsx(FilterMenuContent, {})] }));
|
|
118
|
+
return (_jsxs(DropdownMenu, { dir: direction, modal: false, open: filters.menuOpen, onOpenChange: filters.setMenuOpen, children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { ref: trigger, asChild: asChild, className: classNames?.menuTrigger, variant: "outline", disabled: disabled, "aria-haspopup": "dialog", children: children }) }), filters.menuOpen && _jsx(FilterMenuContent, { anchor: anchor })] }));
|
|
118
119
|
}
|
|
119
120
|
const fieldIcons = {
|
|
120
121
|
single: Circle,
|
|
@@ -140,6 +141,7 @@ function FilterMenuContent({ anchor }) {
|
|
|
140
141
|
label: entry.field.label,
|
|
141
142
|
icon: entry.field.icon,
|
|
142
143
|
entries: [entry],
|
|
144
|
+
separatorBefore: false,
|
|
143
145
|
},
|
|
144
146
|
]),
|
|
145
147
|
...groups.flatMap((group) => {
|
|
@@ -155,6 +157,7 @@ function FilterMenuContent({ anchor }) {
|
|
|
155
157
|
entry.field.removable !== false);
|
|
156
158
|
return {
|
|
157
159
|
id: section.id,
|
|
160
|
+
separatorBefore: section.separatorBefore,
|
|
158
161
|
label: section.label,
|
|
159
162
|
icon: section.icon ?? _jsx(Icon, {}),
|
|
160
163
|
editorLabel: single?.editorLabel ??
|
|
@@ -174,14 +177,15 @@ function FilterMenuContent({ anchor }) {
|
|
|
174
177
|
}
|
|
175
178
|
}
|
|
176
179
|
: undefined,
|
|
177
|
-
content: section.entries.map((entry) => (_jsxs("div", { className:
|
|
180
|
+
content: section.entries.map((entry, index) => (_jsxs("div", { className: cn("mui-184ddc11e5f9", entry.field.menuLayout === "inline"
|
|
181
|
+
? "mui-222f930b8752 mui-71556df3b421 mui-32c92bb1fde4 mui-d7db3451d154 mui-0f9e6672913a mui-b5edc3ea7c91" : "mui-f157ee6bae99", index > 0 && "mui-894c3815a57f"), children: [!single && (index > 0 || entry.field.label !== section.label) && (_jsx("p", { className: cn("mui-c74ab393b96d", entry.field.menuLayout !== "inline" && "mui-0f9e6672913a mui-0a702d97ed7d mui-3992de70b033 mui-daaac3fbf55e"), children: entry.field.label })), _jsx(FieldEditor, { entry: entry, active: true, autoFocus: false, showDateLabel: false, disabled: disabled || entry.field.disabled, close: () => filters.setMenuOpen(false), location: "menu" }, `${entry.id}:${clearEpoch}`)] }, entry.id))),
|
|
178
182
|
};
|
|
179
183
|
});
|
|
180
184
|
return (_jsx(FilterDraftCache.Provider, { value: drafts, children: _jsx(FilterMenuPanel, { sections: sections, selectedId: filters.openField, onSelect: filters.setOpenField, onClose: () => filters.setMenuOpen(false), anchor: anchor, trigger: trigger }) }));
|
|
181
185
|
}
|
|
182
186
|
export function FilterList() {
|
|
183
187
|
const { filters, suggestions } = useRoot();
|
|
184
|
-
return (_jsx(
|
|
188
|
+
return (_jsx(FilterChipList, { children: filters.entries.flatMap((entry) => !entry.field.hidden &&
|
|
185
189
|
(entry.field.isActive(entry.value) ||
|
|
186
190
|
showSuggestion(entry, suggestions, filters.active.length))
|
|
187
191
|
? [_jsx(FieldChip, { entry: entry }, entry.id)]
|
|
@@ -266,12 +270,19 @@ function summaryText(field, shownValue, choices, policy) {
|
|
|
266
270
|
}
|
|
267
271
|
return text;
|
|
268
272
|
}
|
|
273
|
+
function ChipLabel({ field, active, hasValue, }) {
|
|
274
|
+
return (_jsxs(_Fragment, { children: [" ", (field.chipLabel !== false || !active) && (_jsxs("span", { className: cn("mui-184ddc11e5f9 mui-66b490dd6005 mui-5a3a4ee420c2 mui-14bd99410890", hasValue && "mui-91f82aa1df0c"), title: field.label, dir: "auto", children: [!active && field.suggestion?.label
|
|
275
|
+
? field.suggestion.label
|
|
276
|
+
: typeof field.chipLabel === "string"
|
|
277
|
+
? field.chipLabel
|
|
278
|
+
: field.label, hasValue ? ":" : ""] }))] }));
|
|
279
|
+
}
|
|
269
280
|
function ChipSummary({ field, value, active, options, summary, }) {
|
|
270
281
|
const policy = field.summary ?? summary;
|
|
271
282
|
const shownValue = active ? value : field.suggestion?.value;
|
|
272
283
|
const full = summarize(field, shownValue, options.selected);
|
|
273
284
|
const text = summaryText(field, shownValue, options.selected, policy);
|
|
274
|
-
return (_jsxs(_Fragment, { children: [
|
|
285
|
+
return (_jsxs(_Fragment, { children: [_jsx(ChipLabel, { field: field, active: active, hasValue: Boolean(full) }), field.renderSummary ? (field.renderSummary(shownValue, options.selected)) : (_jsx("span", { title: full, dir: "auto", className: cn("mui-184ddc11e5f9 mui-957a109f887f mui-393883c1db68 mui-14bd99410890", policy.mode !== "all" && "mui-5a3a4ee420c2", policy.mode === "all" && "mui-726fca123972 mui-37cf9655f30a mui-1fcf28756bb1"), style: policy.mode === "ellipsis" ? { maxWidth: policy.maxWidth ?? 180 } : undefined, children: options.resolving ? _jsx("span", { className: "mui-7b3cd77eb999", children: text || "Loading…" }) : text }))] }));
|
|
275
286
|
}
|
|
276
287
|
export function FilterClear({ children = "Clear all" }) {
|
|
277
288
|
const { classNames } = useMendyUI();
|
|
@@ -342,7 +353,7 @@ function FieldEditor({ entry, active, disabled, close, location, autoFocus = tru
|
|
|
342
353
|
requestAnimationFrame(() => trigger.current?.focus());
|
|
343
354
|
}
|
|
344
355
|
if (field.renderEditor)
|
|
345
|
-
return (_jsxs("div", { "data-mendy-ui": "", ref: customRoot, className: "mui-
|
|
356
|
+
return (_jsxs("div", { "data-mendy-ui": "", ref: customRoot, className: cn("mui-184ddc11e5f9 mui-81b198a2db84", field.editorPadding !== "none" && "mui-094f5333853b"), onKeyDown: (event) => {
|
|
346
357
|
if (event.key === "Escape")
|
|
347
358
|
return;
|
|
348
359
|
if (event.key === "Tab" ||
|
|
@@ -350,6 +361,8 @@ function FieldEditor({ entry, active, disabled, close, location, autoFocus = tru
|
|
|
350
361
|
event.target.matches("input, textarea, select, [contenteditable=true]")))
|
|
351
362
|
event.stopPropagation();
|
|
352
363
|
}, children: [field.renderEditor({
|
|
364
|
+
autoFocus,
|
|
365
|
+
location,
|
|
353
366
|
value,
|
|
354
367
|
draft,
|
|
355
368
|
setDraft,
|
|
@@ -363,15 +376,8 @@ function FieldEditor({ entry, active, disabled, close, location, autoFocus = tru
|
|
|
363
376
|
return (_jsx(FilterDateEditor, { draftKey: `${entry.id}:date`, autoFocus: autoFocus, showLabel: showDateLabel, showClear: location !== "menu", field: field, value: value, disabled: disabled, apply: apply, error: error }));
|
|
364
377
|
return (_jsx(ValueEditor, { location: location, field: field, draft: draft, setDraft: setDraft, text: text, setText: setText, input: input, error: error, id: id, disabled: disabled, apply: apply }));
|
|
365
378
|
}
|
|
366
|
-
function useChoiceSearch(field, count) {
|
|
367
|
-
const large = (field.source?.items.length ?? 0) > 100 || count > 100;
|
|
368
|
-
const [discovered, setDiscovered] = useState(large);
|
|
369
|
-
if (large && !discovered)
|
|
370
|
-
setDiscovered(true);
|
|
371
|
-
return field.searchable || large || discovered;
|
|
372
|
-
}
|
|
373
379
|
function ChoiceEditor({ field, value, input, options, disabled, apply, location, error, }) {
|
|
374
|
-
const searchable =
|
|
380
|
+
const searchable = field.searchable !== false;
|
|
375
381
|
const collection = useRef(null);
|
|
376
382
|
const selected = Array.isArray(value) ? value : value === null ? [] : [value];
|
|
377
383
|
const selectedSet = new Set(selected);
|
|
@@ -379,16 +385,16 @@ function ChoiceEditor({ field, value, input, options, disabled, apply, location,
|
|
|
379
385
|
return (_jsxs("div", { "data-mendy-ui": "", "data-filter-choices": "", className: "mui-72b37c1a040d mui-81b198a2db84", onKeyDown: (event) => {
|
|
380
386
|
if (event.key === "Tab")
|
|
381
387
|
event.stopPropagation();
|
|
382
|
-
}, children: [searchable && (
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
388
|
+
}, children: [searchable && (_jsx(FilterOptionSearch, { ref: (node) => {
|
|
389
|
+
input.current = node;
|
|
390
|
+
}, "aria-label": searchLabel, type: "search", disabled: disabled, placeholder: searchLabel, value: options.query, onChange: (event) => options.setQuery(event.target.value), onKeyDown: (event) => {
|
|
391
|
+
if (event.key === "ArrowDown") {
|
|
392
|
+
event.preventDefault();
|
|
393
|
+
collection.current?.focusFirst();
|
|
394
|
+
}
|
|
395
|
+
if (event.key !== "Escape" && event.key !== "Tab")
|
|
396
|
+
event.stopPropagation();
|
|
397
|
+
} })), _jsx(ChoiceCollection, { field: field, options: options, value: value, selected: selected, selectedSet: selectedSet, disabled: disabled, apply: apply, location: location, collection: collection }), _jsx(OptionFeedback, { options: options, error: error })] }));
|
|
392
398
|
}
|
|
393
399
|
function ChoiceCollection({ field, options, value, selected, selectedSet, disabled, apply, location, collection, }) {
|
|
394
400
|
const { classNames } = useMendyUI();
|
|
@@ -56,6 +56,9 @@ export interface ExternalOptions<T> {
|
|
|
56
56
|
}
|
|
57
57
|
export declare function externalOptions<T>(source: Omit<ExternalOptions<T>, "kind">): ExternalOptions<T>;
|
|
58
58
|
export interface EditorContext<V> {
|
|
59
|
+
/** False while the menu previews an editor. The menu focuses it on click or Enter. */
|
|
60
|
+
autoFocus: boolean;
|
|
61
|
+
location: "menu" | "chip" | "inline";
|
|
59
62
|
value: V;
|
|
60
63
|
setValue(value: V): void;
|
|
61
64
|
close(): void;
|
|
@@ -79,6 +82,11 @@ export interface FieldConfig<V> {
|
|
|
79
82
|
loading?: boolean;
|
|
80
83
|
disabled?: boolean;
|
|
81
84
|
};
|
|
85
|
+
/** Hide a redundant chip label, or use a shorter visible label. Accessible names stay intact. */
|
|
86
|
+
chipLabel?: boolean | string;
|
|
87
|
+
/** Place this editor beside its label inside a grouped menu. */
|
|
88
|
+
menuLayout?: "stack" | "inline";
|
|
89
|
+
editorPadding?: "default" | "none";
|
|
82
90
|
summary?: SummaryPolicy;
|
|
83
91
|
renderSummary?: (value: V, choices: readonly Choice[]) => ReactNode;
|
|
84
92
|
renderEditor?: (context: EditorContext<V>) => ReactNode;
|
|
@@ -133,6 +141,11 @@ export interface RuntimeField {
|
|
|
133
141
|
loading?: boolean;
|
|
134
142
|
disabled?: boolean;
|
|
135
143
|
};
|
|
144
|
+
/** Hide a redundant chip label, or use a shorter visible label. Accessible names stay intact. */
|
|
145
|
+
chipLabel?: boolean | string;
|
|
146
|
+
/** Place this editor beside its label inside a grouped menu. */
|
|
147
|
+
menuLayout?: "stack" | "inline";
|
|
148
|
+
editorPadding?: "default" | "none";
|
|
136
149
|
summary?: SummaryPolicy;
|
|
137
150
|
renderSummary?: (value: unknown, choices: readonly Choice[]) => ReactNode;
|
|
138
151
|
renderEditor?: (context: EditorContext<unknown>) => ReactNode;
|
|
@@ -141,6 +154,7 @@ export interface RuntimeField {
|
|
|
141
154
|
merge(current: unknown, incoming: unknown): unknown;
|
|
142
155
|
urlKey?: string;
|
|
143
156
|
source?: RuntimeSource;
|
|
157
|
+
/** Search is enabled by default. False disables it regardless of list size. */
|
|
144
158
|
searchable?: boolean;
|
|
145
159
|
/** Hide only the menu entry; recognition and chip editing remain available. */
|
|
146
160
|
menu?: boolean;
|
|
@@ -171,6 +185,7 @@ interface SelectConfig<T, V> extends FieldConfig<V> {
|
|
|
171
185
|
options: readonly T[] | ExternalOptions<T> | RemoteOptions<T, unknown>;
|
|
172
186
|
getValue?: (item: T) => string;
|
|
173
187
|
getLabel?: (item: T) => string;
|
|
188
|
+
/** Search is enabled by default. False disables it regardless of list size. */
|
|
174
189
|
searchable?: boolean;
|
|
175
190
|
loading?: boolean;
|
|
176
191
|
error?: string | null;
|
|
@@ -6,3 +6,6 @@ export declare function handleMenuTab(event: KeyboardEvent<HTMLDivElement>, { tr
|
|
|
6
6
|
onClose(): void;
|
|
7
7
|
hasSelection: boolean;
|
|
8
8
|
}): void;
|
|
9
|
+
/** Return from editor controls without consuming text, grid, or tree navigation keys. */
|
|
10
|
+
export declare function handleMenuReturn(event: KeyboardEvent<HTMLDivElement>, back: () => void): void;
|
|
11
|
+
export declare function preserveOutsideFocus(event: Event): void;
|
|
@@ -67,3 +67,25 @@ export function handleMenuTab(event, { trigger, editor, onClose, hasSelection, }
|
|
|
67
67
|
onClose();
|
|
68
68
|
}
|
|
69
69
|
}
|
|
70
|
+
/** Return from editor controls without consuming text, grid, or tree navigation keys. */
|
|
71
|
+
export function handleMenuReturn(event, back) {
|
|
72
|
+
const target = event.target;
|
|
73
|
+
const rtl = getComputedStyle(event.currentTarget).direction === "rtl";
|
|
74
|
+
if (event.key !== (rtl ? "ArrowRight" : "ArrowLeft"))
|
|
75
|
+
return;
|
|
76
|
+
if (!(target instanceof HTMLElement) || target.isContentEditable)
|
|
77
|
+
return;
|
|
78
|
+
if (target.closest('input, textarea, select, [role="grid"], [role="slider"], [role="spinbutton"], [role="combobox"], [role="tablist"], [role="tree"], [role="listbox"]'))
|
|
79
|
+
return;
|
|
80
|
+
event.preventDefault();
|
|
81
|
+
event.stopPropagation();
|
|
82
|
+
back();
|
|
83
|
+
}
|
|
84
|
+
export function preserveOutsideFocus(event) {
|
|
85
|
+
const focused = document.activeElement;
|
|
86
|
+
if (event.target instanceof HTMLElement &&
|
|
87
|
+
focused &&
|
|
88
|
+
focused !== document.body &&
|
|
89
|
+
!event.target.contains(focused))
|
|
90
|
+
event.preventDefault();
|
|
91
|
+
}
|