@mendylanda/ui 0.1.0 → 0.1.1
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/dist/class-names.js +1 -1
- package/dist/filters/filter-bar.js +114 -52
- package/dist/filters/filter-collection.d.ts +28 -0
- package/dist/filters/filter-collection.js +191 -0
- package/dist/filters/filter-date-editor.d.ts +3 -1
- package/dist/filters/filter-date-editor.js +5 -5
- package/dist/filters/filter-menu-focus.d.ts +8 -0
- package/dist/filters/filter-menu-focus.js +69 -0
- package/dist/filters/filter-menu-panel.d.ts +2 -1
- package/dist/filters/filter-menu-panel.js +149 -66
- package/dist/filters/filters.js +2 -2
- package/dist/filters/use-filter-options.js +7 -5
- package/dist/filters/use-menu-pointer.d.ts +10 -0
- package/dist/filters/use-menu-pointer.js +64 -0
- package/dist/filters/use-value-draft.d.ts +9 -2
- package/dist/filters/use-value-draft.js +20 -5
- package/dist/primitives/calendar.js +2 -2
- package/dist/primitives/dropdown-menu.js +2 -2
- package/dist/styles.css +217 -63
- package/package.json +2 -1
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-361e48d0308f":"end","mui-98599e4ee250":"top-0","mui-4e45f4841abb":"top-1/2","mui-71fb77dd8ea7":"right-1","mui-5a6edca9f43a":"right-8","mui-5b9fdf1819c4":"left-2","mui-ea31f8b3a958":"left-3","mui-866c339ea145":"left-4","mui-3eef1ce97dba":"z-50","mui-a42d519714d6":"container","mui-abba77319850":"-mx-1","mui-d8747231f142":"my-1","mui-f28fea81a5cd":"mt-2","mui-9b2a4c5f630c":"-ml-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-9104ce433bba":"size-[15px]","mui-3c7e3f82f336":"size-[17px]","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-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-a4cce7869436":"w-[300px]","mui-9958eb2b312a":"w-[var(--mendy-filter-menu-width,512px)]","mui-8cfb5a42ef9f":"w-fit","mui-58d0413dd93c":"w-full","mui-a5c6864f064f":"max-w-[calc(100vw-1.5rem)]","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-393df0d154e0":"animate-none!","mui-7b3cd77eb999":"animate-pulse","mui-d343f41ba73e":"cursor-default","mui-acd532d8913e":"resize","mui-50f2bcd37640":"grid-cols-[var(--mendy-filter-list-width,208px)_minmax(0,1fr)]","mui-302c0d124a94":"flex-col","mui-faa8a23c68f6":"flex-wrap","mui-8fd2e2355cbc":"place-content-center","mui-71556df3b421":"items-center","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-894c3815a57f":"border-t","mui-baf794b99c10":"border-r","mui-bbe39cfb5cc6":"border-b","mui-8d940fccb093":"border-l","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-0a702d97ed7d":"pt-3","mui-1a52da5bc88c":"pr-1","mui-98a5b6fff1d2":"pr-2","mui-0359a07b64f9":"pr-9","mui-83ffc494bac4":"pr-16","mui-f5d8e661d857":"pl-2","mui-75b27e813dcc":"pl-8","mui-86486d7e416f":"pl-9","mui-05ab12448317":"text-center","mui-1a5d10977b93":"text-left","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-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-981e5fc95664":"[--filter-menu-height:min(480px,var(--radix-dropdown-menu-content-available-height))]","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-47cbd20a4dc0":"group-data-[focused=true]/day:ring-[3px]","mui-4eb7d653ae35":"group-data-[focused=true]/day:ring-ring/50","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-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-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-8c14b4d2e932":"sm:w-[350px]","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-548a450e8e53":"[&_*]:transition-none!","mui-a1c8c43d9be2":"[&_[role^=menuitem]]:min-h-9","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-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-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,6 +1,7 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import {
|
|
3
|
+
import { FilterCollection } from "./filter-collection.js";
|
|
4
|
+
import { createContext, useContext, useEffect, useLayoutEffect, useMemo, useId, useRef, useState, useSyncExternalStore, } from "react";
|
|
4
5
|
import { ListFilter, Search, X, Circle, ListChecks, Type, Hash, CalendarDays, SlidersHorizontal, Layers, } from "lucide-react";
|
|
5
6
|
import { Button } from "../customization.js";
|
|
6
7
|
import { Input } from "../customization.js";
|
|
@@ -13,10 +14,13 @@ import { FilterOptionCache, useFilterOptions } from "./use-filter-options.js";
|
|
|
13
14
|
import { classifyPaste, resolvePasteAmbiguity } from "./filter-state.js";
|
|
14
15
|
import { cn } from "../utils.js";
|
|
15
16
|
import { FilterMenuPanel } from "./filter-menu-panel.js";
|
|
16
|
-
import { useValueDraft } from "./use-value-draft.js";
|
|
17
|
+
import { FilterDraftCache, useValueDraft } from "./use-value-draft.js";
|
|
17
18
|
import { MendyUIProvider, useMendyUI } from "../customization.js";
|
|
18
19
|
const defaultGroups = [];
|
|
19
20
|
const defaultSummary = { mode: "count", limit: 3 };
|
|
21
|
+
const subscribeHydration = () => () => { };
|
|
22
|
+
const clientHydrated = () => true;
|
|
23
|
+
const serverHydrated = () => false;
|
|
20
24
|
const Context = createContext(null);
|
|
21
25
|
function useRoot() {
|
|
22
26
|
const context = useContext(Context);
|
|
@@ -27,12 +31,22 @@ function useRoot() {
|
|
|
27
31
|
export function FilterRoot({ classNames, ...props }) {
|
|
28
32
|
return (_jsx(MendyUIProvider, { classNames: classNames, children: _jsx(FilterRootContent, { ...props }) }));
|
|
29
33
|
}
|
|
30
|
-
function FilterRootContent({ filters, summary = defaultSummary, suggestions = "always", closeMenuOnApply = false, groups = defaultGroups, disabled = false, className, children, }) {
|
|
34
|
+
function FilterRootContent({ filters, summary = defaultSummary, suggestions = "always", closeMenuOnApply = false, groups = defaultGroups, disabled: disabledProp = false, className, children, }) {
|
|
31
35
|
const { classNames } = useMendyUI();
|
|
36
|
+
// Server HTML must not accept edits that React cannot handle yet. Client-only
|
|
37
|
+
// renders are ready immediately; hydration enables the existing controls.
|
|
38
|
+
const hydrated = useSyncExternalStore(subscribeHydration, clientHydrated, serverHydrated);
|
|
39
|
+
const disabled = disabledProp || !hydrated;
|
|
32
40
|
const [cache] = useState(() => new Map());
|
|
33
41
|
const [ambiguous, setAmbiguous] = useState([]);
|
|
34
42
|
const trigger = useRef(null);
|
|
43
|
+
const [direction, setDirection] = useState("ltr");
|
|
44
|
+
useLayoutEffect(() => {
|
|
45
|
+
if (filters.menuOpen && trigger.current)
|
|
46
|
+
setDirection(getComputedStyle(trigger.current).direction === "rtl" ? "rtl" : "ltr");
|
|
47
|
+
}, [filters.menuOpen]);
|
|
35
48
|
const context = useMemo(() => ({
|
|
49
|
+
direction,
|
|
36
50
|
filters,
|
|
37
51
|
summary,
|
|
38
52
|
suggestions,
|
|
@@ -42,19 +56,19 @@ function FilterRootContent({ filters, summary = defaultSummary, suggestions = "a
|
|
|
42
56
|
trigger,
|
|
43
57
|
ambiguous,
|
|
44
58
|
setAmbiguous,
|
|
45
|
-
}), [filters, summary, suggestions, closeMenuOnApply, groups, disabled, ambiguous]);
|
|
46
|
-
return (_jsx(FilterOptionCache.Provider, { value: cache, children: _jsx(Context.Provider, { value: context, children: _jsx("div", { "data-mendy-ui": "", className: cn("mui-222f930b8752 mui-faa8a23c68f6 mui-71556df3b421 mui-074569488cca", classNames?.root, className), children: children }) }) }));
|
|
59
|
+
}), [filters, summary, suggestions, closeMenuOnApply, groups, disabled, ambiguous, direction]);
|
|
60
|
+
return (_jsx(FilterOptionCache.Provider, { value: cache, children: _jsx(Context.Provider, { value: context, children: _jsx("div", { "data-mendy-ui": "", "aria-busy": !hydrated || undefined, className: cn("mui-222f930b8752 mui-faa8a23c68f6 mui-71556df3b421 mui-074569488cca", classNames?.root, className), children: children }) }) }));
|
|
47
61
|
}
|
|
48
62
|
export function FilterBar(props) {
|
|
49
63
|
return (_jsxs(FilterRoot, { ...props, children: [_jsx(FilterSearch, { label: props.searchLabel, placeholder: props.searchPlaceholder }), _jsx(FilterList, {}), _jsx(FilterClear, {}), _jsx(FilterFeedback, {})] }));
|
|
50
64
|
}
|
|
51
65
|
export function FilterSearch({ label = "Search", placeholder = "Search or filter", }) {
|
|
52
|
-
const { filters, trigger, disabled, setAmbiguous } = useRoot();
|
|
66
|
+
const { filters, trigger, disabled, setAmbiguous, direction } = useRoot();
|
|
53
67
|
const { classNames } = useMendyUI();
|
|
54
68
|
const anchor = useRef(null);
|
|
55
69
|
const input = useRef(null);
|
|
56
70
|
const shift = useRef(false);
|
|
57
|
-
return (_jsxs(DropdownMenu, { modal: false, open: filters.menuOpen, onOpenChange: filters.setMenuOpen, children: [_jsxs("div", { ref: anchor, className: cn("mui-d2d9e1f13413 mui-58d0413dd93c mui-27ead27a81df mui-
|
|
71
|
+
return (_jsxs(DropdownMenu, { dir: direction, modal: false, open: filters.menuOpen, onOpenChange: filters.setMenuOpen, children: [_jsxs("div", { ref: anchor, className: cn("mui-d2d9e1f13413 mui-58d0413dd93c mui-81b198a2db84 mui-27ead27a81df mui-0cc20f4e20c8", classNames?.search), children: [_jsx(Search, { className: "mui-33228ff7d583 mui-747355bdc2a2 mui-cea70f23972e mui-4e45f4841abb mui-100c22d5776b mui-5dde0fd996f0", "aria-hidden": "true" }), _jsx(Input, { ref: input, type: "text", role: "searchbox", disabled: disabled, "aria-label": label, placeholder: placeholder, value: filters.search, autoComplete: "off", autoCapitalize: "none", autoCorrect: "off", spellCheck: false, className: cn("mui-58d0413dd93c mui-b2100041c585 mui-c74ab393b96d mui-4f05a238500e", filters.search ? "mui-559069d2c2e5" : "mui-0e14c365f9e8", classNames?.searchInput), onKeyDown: (event) => {
|
|
58
72
|
shift.current = event.shiftKey;
|
|
59
73
|
if (event.key === "Enter" && !event.nativeEvent.isComposing && !event.shiftKey) {
|
|
60
74
|
const classified = classifyPaste(event.currentTarget.value, filters.entries);
|
|
@@ -90,17 +104,17 @@ export function FilterSearch({ label = "Search", placeholder = "Search or filter
|
|
|
90
104
|
after: element.value.slice(end),
|
|
91
105
|
});
|
|
92
106
|
setAmbiguous(result.ambiguous);
|
|
93
|
-
} }), filters.search && (_jsx(Button, { variant: "ghost", size: "icon", type: "button", disabled: disabled, "aria-label": "Clear search", className: "mui-747355bdc2a2 mui-
|
|
107
|
+
} }), filters.search && (_jsx(Button, { variant: "ghost", size: "icon", type: "button", disabled: disabled, "aria-label": "Clear search", className: "mui-747355bdc2a2 mui-585f4729f611 mui-4e45f4841abb mui-222f930b8752 mui-0712570dcc9f mui-5dde0fd996f0 mui-71556df3b421 mui-a503dd374cca mui-02e603944040 mui-0b5a4d1257ab mui-8da02faac748 mui-2e357972fc10 mui-39be5a15b766 mui-db549d38ff19", onClick: () => {
|
|
94
108
|
setAmbiguous([]);
|
|
95
109
|
filters.setSearch("");
|
|
96
110
|
input.current?.focus();
|
|
97
|
-
}, children: _jsx(X, { className: "mui-
|
|
111
|
+
}, 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 })] }));
|
|
98
112
|
}
|
|
99
113
|
/** A standalone menu button for layouts without a search field. */
|
|
100
114
|
export function FilterMenu({ children = "Add filter", asChild = false, }) {
|
|
101
|
-
const { filters, trigger, disabled } = useRoot();
|
|
115
|
+
const { filters, trigger, disabled, direction } = useRoot();
|
|
102
116
|
const { classNames } = useMendyUI();
|
|
103
|
-
return (_jsxs(DropdownMenu, { 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, {})] }));
|
|
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, {})] }));
|
|
104
118
|
}
|
|
105
119
|
const fieldIcons = {
|
|
106
120
|
single: Circle,
|
|
@@ -114,6 +128,7 @@ const fieldIcons = {
|
|
|
114
128
|
function FilterMenuContent({ anchor }) {
|
|
115
129
|
const { filters, groups, disabled, trigger } = useRoot();
|
|
116
130
|
const [clearEpoch, setClearEpoch] = useState(0);
|
|
131
|
+
const [drafts] = useState(() => new Map());
|
|
117
132
|
const grouped = new Set(groups.flatMap((group) => group.fields));
|
|
118
133
|
const visible = filters.entries.filter((entry) => !entry.field.hidden && entry.field.menu !== false);
|
|
119
134
|
const sections = [
|
|
@@ -151,26 +166,34 @@ function FilterMenuContent({ anchor }) {
|
|
|
151
166
|
clear: !disabled && clearable.length
|
|
152
167
|
? () => {
|
|
153
168
|
const error = filters.batch(Object.fromEntries(clearable.map((entry) => [entry.id, entry.field.clearValue])), undefined, "remove");
|
|
154
|
-
if (!error)
|
|
169
|
+
if (!error) {
|
|
170
|
+
for (const entry of section.entries)
|
|
171
|
+
for (const part of ["value", "text", "error", "date", "query"])
|
|
172
|
+
drafts.delete(`${entry.id}:${part}`);
|
|
155
173
|
setClearEpoch((epoch) => epoch + 1);
|
|
174
|
+
}
|
|
156
175
|
}
|
|
157
176
|
: undefined,
|
|
158
177
|
content: section.entries.map((entry) => (_jsxs("div", { className: "mui-f157ee6bae99", children: [!single && (_jsx("p", { className: "mui-894c3815a57f mui-0f9e6672913a mui-0a702d97ed7d mui-3992de70b033 mui-daaac3fbf55e mui-4fa4c190281c", 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))),
|
|
159
178
|
};
|
|
160
179
|
});
|
|
161
|
-
return (_jsx(FilterMenuPanel, { sections: sections, selectedId: filters.openField, onSelect: filters.setOpenField, anchor: anchor, trigger: trigger }));
|
|
180
|
+
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 }) }));
|
|
162
181
|
}
|
|
163
182
|
export function FilterList() {
|
|
164
|
-
const { filters } = useRoot();
|
|
165
|
-
return (_jsx(_Fragment, { children: filters.entries.
|
|
183
|
+
const { filters, suggestions } = useRoot();
|
|
184
|
+
return (_jsx(_Fragment, { children: filters.entries.flatMap((entry) => !entry.field.hidden &&
|
|
185
|
+
(entry.field.isActive(entry.value) ||
|
|
186
|
+
showSuggestion(entry, suggestions, filters.active.length))
|
|
187
|
+
? [_jsx(FieldChip, { entry: entry }, entry.id)]
|
|
188
|
+
: []) }));
|
|
166
189
|
}
|
|
167
190
|
function summarize(field, value, choices) {
|
|
168
191
|
if (field.kind === "numberRange" && Array.isArray(value))
|
|
169
192
|
return `${value[0] ?? "Any"} – ${value[1] ?? "Any"}`;
|
|
170
|
-
if (Array.isArray(value))
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
193
|
+
if (Array.isArray(value)) {
|
|
194
|
+
const labels = new Map(choices.map((choice) => [choice.value, choice.label]));
|
|
195
|
+
return value.map((item) => labels.get(item) ?? String(item ?? "Any")).join(", ");
|
|
196
|
+
}
|
|
174
197
|
if (value && typeof value === "object" && "from" in value && "to" in value)
|
|
175
198
|
return `${value.from ?? "Any"} – ${value.to ?? "Any"}`;
|
|
176
199
|
return choices.find((choice) => choice.value === value)?.label ?? String(value ?? "");
|
|
@@ -248,7 +271,7 @@ function ChipSummary({ field, value, active, options, summary, }) {
|
|
|
248
271
|
const shownValue = active ? value : field.suggestion?.value;
|
|
249
272
|
const full = summarize(field, shownValue, options.selected);
|
|
250
273
|
const text = summaryText(field, shownValue, options.selected, policy);
|
|
251
|
-
return (_jsxs(_Fragment, { children: [_jsxs("span", { children: [!active && field.suggestion?.label ? field.suggestion.label : field.label, full ? ":" : ""] }), field.renderSummary ? (field.renderSummary(shownValue, options.selected)) : (_jsx("span", { title: full, className: cn("mui-184ddc11e5f9", policy.mode
|
|
274
|
+
return (_jsxs(_Fragment, { children: [_jsxs("span", { className: cn("mui-184ddc11e5f9 mui-66b490dd6005 mui-5a3a4ee420c2 mui-14bd99410890", full && "mui-91f82aa1df0c"), title: field.label, dir: "auto", children: [!active && field.suggestion?.label ? field.suggestion.label : field.label, 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 }))] }));
|
|
252
275
|
}
|
|
253
276
|
export function FilterClear({ children = "Clear all" }) {
|
|
254
277
|
const { classNames } = useMendyUI();
|
|
@@ -276,7 +299,7 @@ function FieldEditor({ entry, active, disabled, close, location, autoFocus = tru
|
|
|
276
299
|
const { field, value } = entry;
|
|
277
300
|
const input = useRef(null);
|
|
278
301
|
const customRoot = useRef(null);
|
|
279
|
-
const [draft, updateDraft] = useValueDraft(value, (current) => current);
|
|
302
|
+
const [draft, updateDraft] = useValueDraft(value, (current) => current, `${entry.id}:value`);
|
|
280
303
|
const draftRef = useRef(value);
|
|
281
304
|
useLayoutEffect(() => {
|
|
282
305
|
draftRef.current = draft;
|
|
@@ -291,8 +314,8 @@ function FieldEditor({ entry, active, disabled, close, location, autoFocus = tru
|
|
|
291
314
|
: ""
|
|
292
315
|
: typeof value === "string"
|
|
293
316
|
? value
|
|
294
|
-
: "");
|
|
295
|
-
const [error, setError] =
|
|
317
|
+
: "", `${entry.id}:text`);
|
|
318
|
+
const [error, setError] = useValueDraft(value, () => undefined, `${entry.id}:error`);
|
|
296
319
|
const id = useId();
|
|
297
320
|
const options = useFilterOptions(entry.id, field, value, active);
|
|
298
321
|
useEffect(() => {
|
|
@@ -337,30 +360,53 @@ function FieldEditor({ entry, active, disabled, close, location, autoFocus = tru
|
|
|
337
360
|
if (field.kind === "single" || field.kind === "multi")
|
|
338
361
|
return (_jsx(ChoiceEditor, { field: field, value: value, input: input, options: options, error: error, disabled: disabled, apply: apply, location: location }));
|
|
339
362
|
if (field.kind === "dateRange")
|
|
340
|
-
return (_jsx(FilterDateEditor, { autoFocus: autoFocus, showLabel: showDateLabel, field: field, value: value, disabled: disabled, apply: apply, error: error }));
|
|
341
|
-
return (_jsx(ValueEditor, { field: field, draft: draft, setDraft: setDraft, text: text, setText: setText, input: input, error: error, id: id, disabled: disabled, apply: apply }));
|
|
363
|
+
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
|
+
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
|
+
}
|
|
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;
|
|
342
372
|
}
|
|
343
373
|
function ChoiceEditor({ field, value, input, options, disabled, apply, location, error, }) {
|
|
344
|
-
const
|
|
374
|
+
const searchable = useChoiceSearch(field, options.items.length);
|
|
375
|
+
const collection = useRef(null);
|
|
345
376
|
const selected = Array.isArray(value) ? value : value === null ? [] : [value];
|
|
346
377
|
const selectedSet = new Set(selected);
|
|
347
378
|
const searchLabel = field.searchLabel ?? `Search ${field.label.toLowerCase()}`;
|
|
348
|
-
return (_jsxs("div", { "data-mendy-ui": "", className: "mui-72b37c1a040d mui-81b198a2db84", onKeyDown: (event) => {
|
|
379
|
+
return (_jsxs("div", { "data-mendy-ui": "", "data-filter-choices": "", className: "mui-72b37c1a040d mui-81b198a2db84", onKeyDown: (event) => {
|
|
349
380
|
if (event.key === "Tab")
|
|
350
381
|
event.stopPropagation();
|
|
351
|
-
}, children: [
|
|
382
|
+
}, children: [searchable && (_jsxs("div", { "data-mendy-ui": "", className: "mui-d2d9e1f13413 mui-bbe39cfb5cc6 mui-b97db4a9f432", children: [_jsx(Search, { className: "mui-33228ff7d583 mui-747355bdc2a2 mui-96a350bd3168 mui-4e45f4841abb mui-5dde0fd996f0 mui-100c22d5776b mui-35f35c41d134", "aria-hidden": "true" }), _jsx(Input, { ref: (node) => {
|
|
352
383
|
input.current = node;
|
|
353
|
-
}, "aria-label": searchLabel, type: "search", disabled: disabled, placeholder: searchLabel, value: options.query, className: "mui-
|
|
384
|
+
}, "aria-label": searchLabel, type: "search", disabled: disabled, placeholder: searchLabel, value: options.query, className: "mui-078d945937da mui-b51243872d85 mui-4f05a238500e", onChange: (event) => options.setQuery(event.target.value), onKeyDown: (event) => {
|
|
354
385
|
if (event.key === "ArrowDown") {
|
|
355
386
|
event.preventDefault();
|
|
356
|
-
|
|
357
|
-
.closest("[data-radix-menu-content]")
|
|
358
|
-
?.querySelector('[role^="menuitem"]:not([data-disabled])')
|
|
359
|
-
?.focus();
|
|
387
|
+
collection.current?.focusFirst();
|
|
360
388
|
}
|
|
361
389
|
if (event.key !== "Escape" && event.key !== "Tab")
|
|
362
390
|
event.stopPropagation();
|
|
363
|
-
} })] })), _jsx(
|
|
391
|
+
} })] })), _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
|
+
}
|
|
393
|
+
function ChoiceCollection({ field, options, value, selected, selectedSet, disabled, apply, location, collection, }) {
|
|
394
|
+
const { classNames } = useMendyUI();
|
|
395
|
+
const choices = (field.kind === "single" && location === "chip" && field.removable !== false
|
|
396
|
+
? [{ value: "", label: `Any ${field.label.toLowerCase()}` }, ...options.items]
|
|
397
|
+
: options.items).map((choice) => ({ ...choice, key: choice.value, disabled: disabled || choice.disabled }));
|
|
398
|
+
const list = (_jsx(FilterCollection, { items: choices, role: location === "inline" ? "group" : "menu", label: field.label, collectionRef: collection, initialKey: typeof selected[0] === "string" ? selected[0] : undefined, className: "mui-fb4a3e97b5bd", children: (choice, index, row) => {
|
|
399
|
+
const content = field.renderOption && choice.value !== ""
|
|
400
|
+
? field.renderOption(choice, { selected: selectedSet.has(choice.value) })
|
|
401
|
+
: choice.label;
|
|
402
|
+
const common = {
|
|
403
|
+
...row,
|
|
404
|
+
"aria-label": choice.label,
|
|
405
|
+
disabled: choice.disabled,
|
|
406
|
+
className: cn("mui-b9677bd1cb66 mui-b5edc3ea7c91 mui-41d1475cf71a mui-726fca123972 mui-393883c1db68 mui-bf95f682e553", classNames?.option),
|
|
407
|
+
};
|
|
408
|
+
if (location === "inline")
|
|
409
|
+
return (_jsx(Button, { ...common, variant: "ghost", type: "button", "aria-pressed": selectedSet.has(choice.value), className: cn("mui-a66e9985b093 mui-9974acedf3f7 mui-58d0413dd93c mui-c62ec162662e mui-726fca123972 mui-393883c1db68 mui-e9347b78185f", selectedSet.has(choice.value) && "mui-292affc1f780", classNames?.option), onClick: () => {
|
|
364
410
|
if (field.kind === "single")
|
|
365
411
|
apply(choice.value, false);
|
|
366
412
|
else {
|
|
@@ -369,23 +415,26 @@ function ChoiceEditor({ field, value, input, options, disabled, apply, location,
|
|
|
369
415
|
: [...selected, choice.value];
|
|
370
416
|
apply(next.length ? next : field.clearValue, false);
|
|
371
417
|
}
|
|
372
|
-
}, children:
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
418
|
+
}, children: content }, choice.key));
|
|
419
|
+
const position = choices.length > 100
|
|
420
|
+
? { "aria-posinset": index + 1, "aria-setsize": choices.length }
|
|
421
|
+
: {};
|
|
422
|
+
if (field.kind === "single")
|
|
423
|
+
return (_jsx(DropdownMenuRadioItem, { ...common, ...position, value: choice.value, onSelect: (event) => event.preventDefault(), children: content }, choice.key));
|
|
424
|
+
return (_jsx(FilterCheckboxItem, { ...common, ...position, checked: selectedSet.has(choice.value), onCheckedChange: (checked) => {
|
|
425
|
+
const next = checked
|
|
426
|
+
? [...new Set([...selected, choice.value])]
|
|
427
|
+
: selected.filter((item) => item !== choice.value);
|
|
428
|
+
apply(next.length ? next : field.clearValue, false);
|
|
429
|
+
}, children: content }, choice.key));
|
|
430
|
+
} }));
|
|
431
|
+
return field.kind === "single" && location !== "inline" ? (_jsx(DropdownMenuRadioGroup, { value: typeof value === "string" ? value : "", onValueChange: (next) => apply(next || field.clearValue), children: list })) : (list);
|
|
384
432
|
}
|
|
385
433
|
function OptionFeedback({ options, error, }) {
|
|
386
434
|
return (_jsxs(_Fragment, { children: [error && (_jsx("p", { role: "alert", className: "mui-0f9e6672913a mui-b5edc3ea7c91 mui-c74ab393b96d mui-887b9502d5c7", children: error })), options.loading && (_jsx("p", { role: "status", className: "mui-0f9e6672913a mui-b5edc3ea7c91 mui-c74ab393b96d mui-35f35c41d134", children: "Loading options\u2026" })), !options.loading && !options.error && options.items.length === 0 && (_jsx("p", { role: "status", className: "mui-094f5333853b mui-c74ab393b96d mui-35f35c41d134", children: "No options found." })), options.error && (_jsxs("div", { "data-mendy-ui": "", className: "mui-267171770524 mui-094f5333853b", children: [_jsx("p", { role: "alert", className: "mui-c74ab393b96d mui-887b9502d5c7", children: options.error }), _jsx(Button, { size: "sm", variant: "outline", onClick: options.retry, children: "Retry" })] })), options.hasMore && (_jsx(Button, { variant: "ghost", className: "mui-58d0413dd93c", disabled: options.loading, onClick: options.loadMore, children: "Load more" }))] }));
|
|
387
435
|
}
|
|
388
|
-
function ValueEditor({ field, draft, setDraft, text, setText, input, error, id, disabled, apply, }) {
|
|
436
|
+
function ValueEditor({ location, field, draft, setDraft, text, setText, input, error, id, disabled, apply, }) {
|
|
437
|
+
const [attempted, setAttempted] = useState(false);
|
|
389
438
|
const candidate = field.kind === "tokens"
|
|
390
439
|
? text.split(/[\r\n\t,]+/).flatMap((item) => (item.trim() ? [item.trim()] : []))
|
|
391
440
|
: field.kind === "text"
|
|
@@ -398,17 +447,19 @@ function ValueEditor({ field, draft, setDraft, text, setText, input, error, id,
|
|
|
398
447
|
catch {
|
|
399
448
|
validation = "Enter a valid value.";
|
|
400
449
|
}
|
|
450
|
+
const message = (text.length > 0 || attempted || field.kind === "numberRange" ? validation : undefined) ??
|
|
451
|
+
error;
|
|
401
452
|
return (_jsxs("div", { "data-mendy-ui": "", className: "mui-37535002f0f7 mui-81b198a2db84 mui-267171770524 mui-094f5333853b", onKeyDown: (event) => {
|
|
402
453
|
if (event.key === "Tab")
|
|
403
454
|
event.stopPropagation();
|
|
404
|
-
}, children: [field.kind === "numberRange" ? (_jsxs("fieldset", { disabled: disabled, className: "mui-267171770524", children: [_jsx("legend", { className: "mui-c74ab393b96d mui-daaac3fbf55e", children: field.label }), [0, 1].map((index) => {
|
|
455
|
+
}, children: [field.kind === "numberRange" ? (_jsxs("fieldset", { disabled: disabled, className: "mui-a2526bc2efa3 mui-184ddc11e5f9 mui-267171770524 mui-dad556abfe15 mui-04760bcd507f", children: [_jsx("legend", { className: cn("mui-04760bcd507f mui-c74ab393b96d mui-daaac3fbf55e", location === "menu" && "mui-32fb090591d9"), children: field.label }), [0, 1].map((index) => {
|
|
405
456
|
const key = index === 0 ? "from" : "to";
|
|
406
457
|
const rangeValue = draft?.[index];
|
|
407
458
|
return (_jsxs(Label, { className: "mui-496aca80e4d8 mui-27e6c432192f mui-3992de70b033", children: [index === 0 ? "Minimum" : "Maximum", _jsx(Input, { ref: index === 0
|
|
408
459
|
? (node) => {
|
|
409
460
|
input.current = node;
|
|
410
461
|
}
|
|
411
|
-
: undefined, "aria-invalid": Boolean(
|
|
462
|
+
: undefined, "aria-invalid": Boolean(message), "aria-describedby": message ? `${id}-error` : `${id}-hint`, type: "number", value: rangeValue ?? "", onKeyDown: (event) => {
|
|
412
463
|
if (event.key !== "Escape" && event.key !== "Tab")
|
|
413
464
|
event.stopPropagation();
|
|
414
465
|
}, onChange: (event) => {
|
|
@@ -421,15 +472,26 @@ function ValueEditor({ field, draft, setDraft, text, setText, input, error, id,
|
|
|
421
472
|
setDraft(range);
|
|
422
473
|
apply(range, false);
|
|
423
474
|
} })] }, key));
|
|
424
|
-
})] })) : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: id, className: "mui-c74ab393b96d mui-daaac3fbf55e", children: field.searchLabel ?? field.label }), _jsx(Textarea, { id: id, ref: (node) => {
|
|
475
|
+
})] })) : (_jsxs(_Fragment, { children: [_jsx(Label, { htmlFor: id, className: cn("mui-c74ab393b96d mui-daaac3fbf55e", location === "menu" && "mui-3992de70b033 mui-52101fc7d8bb mui-35f35c41d134"), children: field.searchLabel ?? field.label }), _jsx(Textarea, { className: "mui-ae112c903ef8", id: id, ref: (node) => {
|
|
425
476
|
input.current = node;
|
|
426
|
-
}, disabled: disabled, placeholder: field.placeholder, value: text, "aria-invalid": Boolean(
|
|
477
|
+
}, disabled: disabled, placeholder: field.placeholder, value: text, "aria-invalid": Boolean(message), "aria-describedby": message ? `${id}-error` : `${id}-hint`, onChange: (event) => {
|
|
478
|
+
setAttempted(false);
|
|
479
|
+
setText(event.target.value);
|
|
480
|
+
}, onKeyDown: (event) => {
|
|
427
481
|
if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) {
|
|
428
482
|
event.preventDefault();
|
|
483
|
+
setAttempted(true);
|
|
429
484
|
if (!validation)
|
|
430
485
|
apply(candidate);
|
|
431
486
|
}
|
|
432
487
|
if (event.key !== "Escape" && event.key !== "Tab")
|
|
433
488
|
event.stopPropagation();
|
|
434
|
-
} })] })),
|
|
489
|
+
} })] })), _jsx(ValueEditorFeedback, { message: message, id: id, hasHint: field.kind !== "numberRange" })] }));
|
|
490
|
+
}
|
|
491
|
+
function ValueEditorFeedback({ message, id, hasHint, }) {
|
|
492
|
+
if (message)
|
|
493
|
+
return (_jsx("p", { role: "alert", id: `${id}-error`, className: "mui-3992de70b033 mui-887b9502d5c7", children: message }));
|
|
494
|
+
if (!hasHint)
|
|
495
|
+
return null;
|
|
496
|
+
return (_jsx("p", { id: `${id}-hint`, className: "mui-3992de70b033 mui-35f35c41d134", children: "Enter to save. Shift+Enter for a new line." }));
|
|
435
497
|
}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import type { CSSProperties, ReactNode, Ref } from "react";
|
|
2
|
+
export interface CollectionHandle {
|
|
3
|
+
focus(key: string): void;
|
|
4
|
+
focusFirst(): void;
|
|
5
|
+
}
|
|
6
|
+
interface RowProps {
|
|
7
|
+
ref(node: HTMLElement | null): void;
|
|
8
|
+
style?: CSSProperties;
|
|
9
|
+
tabIndex: number;
|
|
10
|
+
"data-index": number;
|
|
11
|
+
"data-collection-key": string;
|
|
12
|
+
}
|
|
13
|
+
interface CollectionItem {
|
|
14
|
+
key: string;
|
|
15
|
+
label: string;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
}
|
|
18
|
+
/** A single keyboard model for both ordinary and measured, virtualized collections. */
|
|
19
|
+
export declare function FilterCollection<T extends CollectionItem>({ items, children, className, role, label, collectionRef, initialKey, }: {
|
|
20
|
+
items: T[];
|
|
21
|
+
children(item: T, index: number, props: RowProps): ReactNode;
|
|
22
|
+
className?: string;
|
|
23
|
+
role: "menu" | "group";
|
|
24
|
+
label: string;
|
|
25
|
+
collectionRef?: Ref<CollectionHandle>;
|
|
26
|
+
initialKey?: string;
|
|
27
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
export {};
|