@mendylanda/ui 0.1.6 → 0.1.8
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/customization.d.ts +3 -1
- package/dist/customization.js +3 -2
- package/dist/filters/filter-bar.js +55 -28
- package/dist/filters/filter-menu-panel.js +7 -6
- package/dist/filters/filters.d.ts +5 -2
- package/dist/filters/filters.js +4 -3
- package/dist/filters/use-filter-options.js +21 -4
- package/dist/filters/use-menu-placement.d.ts +2 -0
- package/dist/filters/use-menu-placement.js +20 -1
- package/dist/styles.css +19 -4
- package/dist/styles.tailwind3.css +19 -4
- package/package.json +1 -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-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-c7d5500b77ab":"h-0","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-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-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-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-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-e771a8b4d87d":"sm:pointer-fine:h-9","mui-aa0e3c036805":"sm:pointer-fine:min-h-8","mui-0288c4ea71ea":"sm:pointer-fine:py-0.5","mui-41d1475cf71a":"sm:pointer-fine:py-1.5","mui-548a450e8e53":"[&_*]:transition-none!","mui-a1c8c43d9be2":"[&_[role^=menuitem]]:min-h-9","mui-b43343fe71c0":"sm:pointer-fine:[&_[role^=menuitem]]:min-h-8","mui-cc310a330231":"[&_button]:font-semibold","mui-b7ff49878425":"[&_button]:underline","mui-d9bdd2c94504":"[&_button]:underline-offset-4","mui-bcae9d37090c":"[&_svg]:pointer-events-none","mui-c77732bd3ab4":"[&_svg]:size-3.5","mui-040e748a3fa0":"[&_svg]:shrink-0","mui-be87a4a64d81":"[&_svg:not([class*='size-'])]:size-3","mui-eb5ef2dbc2d4":"[&_svg:not([class*='size-'])]:size-4","mui-8637dfd54fbb":"[&_svg:not([class*='text-'])]:text-muted-foreground","mui-4f05a238500e":"[&::-webkit-search-cancel-button]:appearance-none","mui-74ab31abd804":"[&:first-child[data-selected=true]_button]:rounded-l-md","mui-13858191ca50":"rtl:**:[.rdp-button\\_next>svg]:rotate-180","mui-a324a7f99932":"rtl:**:[.rdp-button\\_previous>svg]:rotate-180","mui-82b114bbff3d":"data-[variant=destructive]:*:[svg]:text-destructive!","mui-6ee0c74de40c":"[&:last-child[data-selected=true]_button]:rounded-r-md","mui-6162ab70efb5":"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md","mui-f157ee6bae99":"[&>div]:w-full","mui-ba417cf466b0":"[&>span]:text-xs","mui-829c8ef4f9c5":"[&>span]:opacity-70","mui-bf95f682e553":"[&>span:first-child]:mt-[calc(0.5lh-0.4375rem)]","mui-eb740dd32318":"[&>svg]:size-3.5","mui-019fd73c95db":"[&>svg]:text-muted-foreground","mui-b8293c91796c":"[[data-slot=card-content]_&]:bg-transparent","mui-8dd7e6b42262":"[[data-slot=popover-content]_&]:bg-transparent"};
|
|
1
|
+
export const originalClassNames = {"mui-cb20bd519346":"pointer-events-auto","mui-33228ff7d583":"pointer-events-none","mui-b75af7ef6c4d":"invisible","mui-d42ef1497900":"visible","mui-32fb090591d9":"sr-only","mui-747355bdc2a2":"absolute","mui-d2d9e1f13413":"relative","mui-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-c7d5500b77ab":"h-0","mui-099be97e1fa4":"h-4","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-fc6a57ff7553":"w-[var(--mendy-filter-editor-width,19rem)]","mui-0b9c84552e40":"w-[var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,18.75rem))]","mui-4415137b0467":"w-[var(--mendy-filter-menu-width,calc(var(--filter-list-width)_+_var(--mendy-filter-editor-width,19rem)))]","mui-8cfb5a42ef9f":"w-fit","mui-58d0413dd93c":"w-full","mui-91f82aa1df0c":"max-w-[60%]","mui-34055e6f8c1b":"max-w-[calc(100vw-2rem)]","mui-81b198a2db84":"max-w-full","mui-1458e495e3ae":"min-w-(--cell-size)","mui-184ddc11e5f9":"min-w-0","mui-e9ab1547c94d":"min-w-[8rem]","mui-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-eeb3a8b33f69":"grid-cols-[min(var(--filter-list-width),calc(100%_-_min(var(--mendy-filter-editor-width,19rem),50%)))_minmax(0,1fr)]","mui-b5985369ee35":"grid-rows-[minmax(0,1fr)]","mui-302c0d124a94":"flex-col","mui-faa8a23c68f6":"flex-wrap","mui-8fd2e2355cbc":"place-content-center","mui-71556df3b421":"items-center","mui-b9677bd1cb66":"items-start","mui-32c92bb1fde4":"justify-between","mui-a503dd374cca":"justify-center","mui-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-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-810ae775809b":"bg-muted-foreground/20","mui-e593c38256e0":"bg-popover","mui-0c2864fba576":"bg-primary","mui-d191cb569aac":"bg-secondary","mui-8fca9236d191":"bg-transparent","mui-04760bcd507f":"p-0","mui-1dee6e3ec67d":"p-1","mui-b97db4a9f432":"p-2","mui-094f5333853b":"p-3","mui-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-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-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-e771a8b4d87d":"sm:pointer-fine:h-9","mui-aa0e3c036805":"sm:pointer-fine:min-h-8","mui-0288c4ea71ea":"sm:pointer-fine:py-0.5","mui-41d1475cf71a":"sm:pointer-fine:py-1.5","mui-548a450e8e53":"[&_*]:transition-none!","mui-a1c8c43d9be2":"[&_[role^=menuitem]]:min-h-9","mui-b43343fe71c0":"sm:pointer-fine:[&_[role^=menuitem]]:min-h-8","mui-cc310a330231":"[&_button]:font-semibold","mui-b7ff49878425":"[&_button]:underline","mui-d9bdd2c94504":"[&_button]:underline-offset-4","mui-bcae9d37090c":"[&_svg]:pointer-events-none","mui-c77732bd3ab4":"[&_svg]:size-3.5","mui-040e748a3fa0":"[&_svg]:shrink-0","mui-be87a4a64d81":"[&_svg:not([class*='size-'])]:size-3","mui-eb5ef2dbc2d4":"[&_svg:not([class*='size-'])]:size-4","mui-8637dfd54fbb":"[&_svg:not([class*='text-'])]:text-muted-foreground","mui-4f05a238500e":"[&::-webkit-search-cancel-button]:appearance-none","mui-74ab31abd804":"[&:first-child[data-selected=true]_button]:rounded-l-md","mui-13858191ca50":"rtl:**:[.rdp-button\\_next>svg]:rotate-180","mui-a324a7f99932":"rtl:**:[.rdp-button\\_previous>svg]:rotate-180","mui-82b114bbff3d":"data-[variant=destructive]:*:[svg]:text-destructive!","mui-6ee0c74de40c":"[&:last-child[data-selected=true]_button]:rounded-r-md","mui-6162ab70efb5":"[&:nth-child(2)[data-selected=true]_button]:rounded-l-md","mui-f157ee6bae99":"[&>div]:w-full","mui-ba417cf466b0":"[&>span]:text-xs","mui-829c8ef4f9c5":"[&>span]:opacity-70","mui-bf95f682e553":"[&>span:first-child]:mt-[calc(0.5lh-0.4375rem)]","mui-eb740dd32318":"[&>svg]:size-3.5","mui-019fd73c95db":"[&>svg]:text-muted-foreground","mui-b8293c91796c":"[[data-slot=card-content]_&]:bg-transparent","mui-8dd7e6b42262":"[[data-slot=popover-content]_&]:bg-transparent"};
|
package/dist/customization.d.ts
CHANGED
|
@@ -16,13 +16,15 @@ export type FilterClassNames = Partial<Record<FilterPart, string>>;
|
|
|
16
16
|
export interface MendyUIOptions {
|
|
17
17
|
/** Desktop editor placement. Phones always use one panel with Back. */
|
|
18
18
|
menuLayout?: "connected" | "anchored";
|
|
19
|
+
/** Animate chip editor popups. Off by default; chip entrance motion is independent. */
|
|
20
|
+
editorAnimation?: boolean;
|
|
19
21
|
components?: Partial<MendyUIComponents>;
|
|
20
22
|
classNames?: FilterClassNames;
|
|
21
23
|
/** Mount dropdowns inside a local theme or dialog instead of document.body. */
|
|
22
24
|
portalContainer?: HTMLElement | null;
|
|
23
25
|
}
|
|
24
26
|
/** Nested providers inherit defaults; local settings override matching keys. */
|
|
25
|
-
export declare function MendyUIProvider({ children, components, classNames, portalContainer, menuLayout, }: MendyUIOptions & {
|
|
27
|
+
export declare function MendyUIProvider({ children, components, classNames, portalContainer, menuLayout, editorAnimation, }: MendyUIOptions & {
|
|
26
28
|
children: ReactNode;
|
|
27
29
|
}): import("react/jsx-runtime").JSX.Element;
|
|
28
30
|
export declare function useMendyUI(): MendyUIOptions;
|
package/dist/customization.js
CHANGED
|
@@ -8,14 +8,15 @@ 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, menuLayout, }) {
|
|
11
|
+
export function MendyUIProvider({ children, components, classNames, portalContainer, menuLayout, editorAnimation, }) {
|
|
12
12
|
const parent = useContext(Context);
|
|
13
13
|
const value = useMemo(() => ({
|
|
14
14
|
menuLayout: menuLayout ?? parent.menuLayout,
|
|
15
|
+
editorAnimation: editorAnimation ?? parent.editorAnimation,
|
|
15
16
|
components: { ...parent.components, ...components },
|
|
16
17
|
classNames: { ...parent.classNames, ...classNames },
|
|
17
18
|
portalContainer: portalContainer === undefined ? parent.portalContainer : portalContainer,
|
|
18
|
-
}), [parent, components, classNames, portalContainer, menuLayout]);
|
|
19
|
+
}), [parent, components, classNames, portalContainer, menuLayout, editorAnimation]);
|
|
19
20
|
return _jsx(Context.Provider, { value: value, children: children });
|
|
20
21
|
}
|
|
21
22
|
export function useMendyUI() {
|
|
@@ -219,34 +219,54 @@ function FieldChip({ entry }) {
|
|
|
219
219
|
const { id, field, value } = entry;
|
|
220
220
|
const descriptionId = useId();
|
|
221
221
|
const active = field.isActive(value);
|
|
222
|
-
const
|
|
223
|
-
useLayoutEffect(() => {
|
|
224
|
-
currentlyActive.current = active;
|
|
225
|
-
}, [active]);
|
|
222
|
+
const chipEditor = useChipEditor(entry);
|
|
226
223
|
const suggestion = showSuggestion(entry, suggestions, filters.active.length);
|
|
227
224
|
const options = useFilterOptions(id, field, active ? value : field.suggestion?.value, false);
|
|
228
225
|
if (field.hidden || (!active && !suggestion))
|
|
229
226
|
return null;
|
|
230
|
-
return (
|
|
227
|
+
return (_jsx(AppliedFilter, { label: field.label, "data-mendy-ui": "", "data-slot": active ? "filter-chip" : "filter-suggestion", "data-state": active ? "applied" : "suggested", className: cn(!active && "mui-4f1a55de40bc mui-8450eb0f1857 mui-9b76f456b8c9 mui-8fca9236d191", (field.summary ?? summary).mode === "all" && "mui-a66e9985b093 mui-9974acedf3f7", classNames?.chip), disabled: chipDisabled(field, active, disabled), removeProps: { className: classNames?.chipRemove }, contentProps: {
|
|
231
228
|
className: classNames?.editor,
|
|
232
|
-
onCloseAutoFocus:
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
}, triggerProps: { "aria-describedby": descriptionId, className: classNames?.chipTrigger }, editLabel: `${active ? "Edit" : "Apply"} ${field.label} filter`, open: filters.editField === id, onOpenChange: (open) => {
|
|
239
|
-
if (open && !active && field.suggestion && "value" in field.suggestion) {
|
|
240
|
-
filters.commit(id, field.suggestion.value, "suggestion");
|
|
241
|
-
return;
|
|
242
|
-
}
|
|
243
|
-
filters.edit(open ? id : null);
|
|
244
|
-
}, onRemove: active && field.removable !== false
|
|
229
|
+
onCloseAutoFocus: chipEditor.onCloseAutoFocus,
|
|
230
|
+
}, triggerProps: {
|
|
231
|
+
"aria-describedby": descriptionId,
|
|
232
|
+
"aria-busy": options.resolving || undefined,
|
|
233
|
+
className: classNames?.chipTrigger,
|
|
234
|
+
}, editLabel: `${active ? "Edit" : "Apply"} ${field.label} filter`, open: filters.editField === id, onOpenChange: chipEditor.onOpenChange, onRemove: active && field.removable !== false
|
|
245
235
|
? () => {
|
|
246
236
|
filters.remove(id);
|
|
247
237
|
requestAnimationFrame(() => trigger.current?.focus());
|
|
248
238
|
}
|
|
249
|
-
: undefined, editor: _jsx(FieldEditor, { entry: entry, active: filters.editField === id, disabled: disabled || field.disabled, close: () => filters.edit(null), location: "chip" }), children:
|
|
239
|
+
: undefined, editor: _jsx(FieldEditor, { entry: entry, active: filters.editField === id, disabled: disabled || field.disabled, close: () => filters.edit(null), location: "chip" }), children: _jsx(ChipSummary, { descriptionId: descriptionId, field: field, value: value, active: active, options: options, summary: summary }) }));
|
|
240
|
+
}
|
|
241
|
+
function useChipEditor({ id, field, value }) {
|
|
242
|
+
const { filters, trigger } = useRoot();
|
|
243
|
+
const active = field.isActive(value);
|
|
244
|
+
const currentlyActive = useRef(active);
|
|
245
|
+
const editingField = useRef(filters.editField);
|
|
246
|
+
useLayoutEffect(() => {
|
|
247
|
+
currentlyActive.current = active;
|
|
248
|
+
editingField.current = filters.editField;
|
|
249
|
+
}, [active, filters.editField]);
|
|
250
|
+
return {
|
|
251
|
+
onCloseAutoFocus(event) {
|
|
252
|
+
// The outgoing popup must not steal focus back from its replacement.
|
|
253
|
+
if (editingField.current && editingField.current !== id) {
|
|
254
|
+
event.preventDefault();
|
|
255
|
+
}
|
|
256
|
+
else if (!currentlyActive.current) {
|
|
257
|
+
event.preventDefault();
|
|
258
|
+
trigger.current?.focus();
|
|
259
|
+
}
|
|
260
|
+
},
|
|
261
|
+
onOpenChange(open) {
|
|
262
|
+
if (open && !active && field.suggestion && "value" in field.suggestion) {
|
|
263
|
+
filters.commit(id, field.suggestion.value, "suggestion");
|
|
264
|
+
return;
|
|
265
|
+
}
|
|
266
|
+
if (open || editingField.current === id)
|
|
267
|
+
filters.edit(open ? id : null);
|
|
268
|
+
},
|
|
269
|
+
};
|
|
250
270
|
}
|
|
251
271
|
function showSuggestion(entry, mode, activeCount) {
|
|
252
272
|
return (!entry.field.isActive(entry.value) &&
|
|
@@ -277,12 +297,12 @@ function ChipLabel({ field, active, hasValue, }) {
|
|
|
277
297
|
? field.chipLabel
|
|
278
298
|
: field.label, hasValue ? ":" : ""] }))] }));
|
|
279
299
|
}
|
|
280
|
-
function ChipSummary({ field, value, active, options, summary, }) {
|
|
300
|
+
function ChipSummary({ descriptionId, field, value, active, options, summary, }) {
|
|
281
301
|
const policy = field.summary ?? summary;
|
|
282
302
|
const shownValue = active ? value : field.suggestion?.value;
|
|
283
303
|
const full = summarize(field, shownValue, options.selected);
|
|
284
304
|
const text = summaryText(field, shownValue, options.selected, policy);
|
|
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:
|
|
305
|
+
return (_jsxs(_Fragment, { children: [_jsx("span", { id: descriptionId, className: "mui-32fb090591d9", children: options.resolving ? "Loading selected values" : full }), _jsx(ChipLabel, { field: field, active: active, hasValue: Boolean(full) }), options.resolving ? (_jsx("span", { "data-slot": "filter-summary-skeleton", "aria-hidden": "true", className: "mui-099be97e1fa4 mui-81b198a2db84 mui-27ead27a81df mui-7b3cd77eb999 mui-02e603944040 mui-810ae775809b mui-237747164b60", style: { width: Math.min(180, 100 + Math.max(0, options.selected.length - 1) * 40) } })) : 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: text }))] }));
|
|
286
306
|
}
|
|
287
307
|
export function FilterClear({ children = "Clear all" }) {
|
|
288
308
|
const { classNames } = useMendyUI();
|
|
@@ -382,7 +402,7 @@ function ChoiceEditor({ field, value, input, options, disabled, apply, location,
|
|
|
382
402
|
const selected = Array.isArray(value) ? value : value === null ? [] : [value];
|
|
383
403
|
const selectedSet = new Set(selected);
|
|
384
404
|
const searchLabel = field.searchLabel ?? `Search ${field.label.toLowerCase()}`;
|
|
385
|
-
return (_jsxs("div", { "data-mendy-ui": "", "data-filter-choices": "", className: "mui-
|
|
405
|
+
return (_jsxs("div", { "data-mendy-ui": "", "data-filter-choices": "", className: "mui-58d0413dd93c", onKeyDown: (event) => {
|
|
386
406
|
if (event.key === "Tab")
|
|
387
407
|
event.stopPropagation();
|
|
388
408
|
}, children: [searchable && (_jsx(FilterOptionSearch, { ref: (node) => {
|
|
@@ -398,9 +418,11 @@ function ChoiceEditor({ field, value, input, options, disabled, apply, location,
|
|
|
398
418
|
}
|
|
399
419
|
function ChoiceCollection({ field, options, value, selected, selectedSet, disabled, apply, location, collection, }) {
|
|
400
420
|
const { classNames } = useMendyUI();
|
|
401
|
-
const choices =
|
|
402
|
-
|
|
403
|
-
|
|
421
|
+
const choices = options.items.map((choice) => ({
|
|
422
|
+
...choice,
|
|
423
|
+
key: choice.value,
|
|
424
|
+
disabled: disabled || choice.disabled,
|
|
425
|
+
}));
|
|
404
426
|
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) => {
|
|
405
427
|
const content = field.renderOption && choice.value !== ""
|
|
406
428
|
? field.renderOption(choice, { selected: selectedSet.has(choice.value) })
|
|
@@ -414,7 +436,7 @@ function ChoiceCollection({ field, options, value, selected, selectedSet, disabl
|
|
|
414
436
|
if (location === "inline")
|
|
415
437
|
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: () => {
|
|
416
438
|
if (field.kind === "single")
|
|
417
|
-
apply(choice.value, false);
|
|
439
|
+
apply(singleChoiceValue(field, value, choice.value), false);
|
|
418
440
|
else {
|
|
419
441
|
const next = selectedSet.has(choice.value)
|
|
420
442
|
? selected.filter((item) => item !== choice.value)
|
|
@@ -434,7 +456,12 @@ function ChoiceCollection({ field, options, value, selected, selectedSet, disabl
|
|
|
434
456
|
apply(next.length ? next : field.clearValue, false);
|
|
435
457
|
}, children: content }, choice.key));
|
|
436
458
|
} }));
|
|
437
|
-
return field.kind === "single" && location !== "inline" ? (_jsx(DropdownMenuRadioGroup, { value: typeof value === "string" ? value : "", onValueChange: (next) => apply(
|
|
459
|
+
return field.kind === "single" && location !== "inline" ? (_jsx(DropdownMenuRadioGroup, { value: typeof value === "string" ? value : "", onValueChange: (next) => apply(singleChoiceValue(field, value, next)), children: list })) : (list);
|
|
460
|
+
}
|
|
461
|
+
function singleChoiceValue(field, current, next) {
|
|
462
|
+
return next === current && field.removable !== false
|
|
463
|
+
? field.clearValue
|
|
464
|
+
: next || field.clearValue;
|
|
438
465
|
}
|
|
439
466
|
function OptionFeedback({ options, error, }) {
|
|
440
467
|
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" }))] }));
|
|
@@ -455,7 +482,7 @@ function ValueEditor({ location, field, draft, setDraft, text, setText, input, e
|
|
|
455
482
|
}
|
|
456
483
|
const message = (text.length > 0 || attempted || field.kind === "numberRange" ? validation : undefined) ??
|
|
457
484
|
error;
|
|
458
|
-
return (_jsxs("div", { "data-mendy-ui": "", className: "mui-
|
|
485
|
+
return (_jsxs("div", { "data-mendy-ui": "", className: "mui-58d0413dd93c mui-267171770524 mui-094f5333853b", onKeyDown: (event) => {
|
|
459
486
|
if (event.key === "Tab")
|
|
460
487
|
event.stopPropagation();
|
|
461
488
|
}, 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) => {
|
|
@@ -8,7 +8,7 @@ import { useValueDraft } from "./use-value-draft.js";
|
|
|
8
8
|
import { DropdownMenuContent } from "../primitives/dropdown-menu.js";
|
|
9
9
|
import { useMendyUI } from "../customization.js";
|
|
10
10
|
import { focusMenuEditor, handleMenuTab, handleMenuReturn, preserveOutsideFocus, } from "./filter-menu-focus.js";
|
|
11
|
-
import { useMenuPlacement, useEditorOffset } from "./use-menu-placement.js";
|
|
11
|
+
import { useMenuPlacement, useEditorOffset, useAnchoredPointerEvents, } from "./use-menu-placement.js";
|
|
12
12
|
import { useMenuPointer } from "./use-menu-pointer.js";
|
|
13
13
|
import { cn } from "../utils.js";
|
|
14
14
|
const desktopQuery = "(min-width: 640px)";
|
|
@@ -41,6 +41,7 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
|
|
|
41
41
|
const { alignOffset, side, anchorStyle } = useMenuPlacement(anchor, trigger, desktop);
|
|
42
42
|
const panelId = useId();
|
|
43
43
|
const detached = desktop && menuLayout === "anchored";
|
|
44
|
+
const setContent = useAnchoredPointerEvents(content, detached);
|
|
44
45
|
const editorPanel = useRef(null);
|
|
45
46
|
const editorOffset = useEditorOffset({
|
|
46
47
|
detached,
|
|
@@ -92,7 +93,7 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
|
|
|
92
93
|
}
|
|
93
94
|
const showList = desktop || !selected;
|
|
94
95
|
const sideBySide = desktop && Boolean(selected);
|
|
95
|
-
return (_jsx(DropdownMenuContent, { ref:
|
|
96
|
+
return (_jsx(DropdownMenuContent, { ref: setContent, "data-mendy-ui": "", "data-slot": "filter-menu-panel", role: "dialog", "aria-label": "Filters", "aria-labelledby": undefined, "aria-orientation": undefined, align: desktop ? "start" : "end", alignOffset: alignOffset, side: side, style: anchorStyle, sideOffset: 7, collisionPadding: 16, onEscapeKeyDown: (event) => {
|
|
96
97
|
if (selected && !desktop) {
|
|
97
98
|
event.preventDefault();
|
|
98
99
|
back();
|
|
@@ -118,8 +119,8 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
|
|
|
118
119
|
else
|
|
119
120
|
back();
|
|
120
121
|
}), className: cn("mui-971625533e56 mui-571ea69568d3 mui-34055e6f8c1b mui-d5111d0e9f48 mui-04760bcd507f mui-94ea94fde25f mui-393df0d154e0 mui-548a450e8e53", "mui-d7d803c609c5", sideBySide
|
|
121
|
-
? "mui-
|
|
122
|
-
? "mui-0f2a693e93e2 mui-b5985369ee35 mui-
|
|
122
|
+
? "mui-4415137b0467" : "mui-0b9c84552e40", detached && "mui-33228ff7d583 mui-0fc84a692dad mui-dad556abfe15 mui-8fca9236d191 mui-89c3006b2722", classNames?.menu), children: _jsxs("div", { className: cn("mui-80baa5d03af7", sideBySide
|
|
123
|
+
? "mui-0f2a693e93e2 mui-b5985369ee35 mui-eeb3a8b33f69" : "mui-222f930b8752 mui-302c0d124a94", detached && cn("mui-e0122edc668b", selected && "mui-b9677bd1cb66")), children: [showList && (_jsx(FilterMenuList, { sections: sections, selectedId: selected?.id, initialKey: selected?.id ?? lastSelection.current, panelId: panelId, desktop: desktop, detached: detached, rows: rows, choose: choose, keyboardNavigation: keyboardNavigation, onPointerMove: (id, event) => {
|
|
123
124
|
if (desktop && event.pointerType === "mouse") {
|
|
124
125
|
setKeyboardNavigation(false);
|
|
125
126
|
const focused = document.activeElement;
|
|
@@ -131,7 +132,7 @@ export function FilterMenuPanel({ sections, selectedId, onSelect, onClose, ancho
|
|
|
131
132
|
}
|
|
132
133
|
pointer.move(id, event);
|
|
133
134
|
}
|
|
134
|
-
} })), selected && (_jsxs("div", { ref: editorPanel, "data-slot": "filter-menu-editor", onPointerEnter: pointer.cancel, style: detached ? { marginTop: editorOffset } : undefined, className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-184ddc11e5f9 mui-80baa5d03af7 mui-302c0d124a94", detached && "mui-291952c2525a mui-d5111d0e9f48 mui-3fa8c572949b mui-b31810dbd8a9 mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b"), children: [_jsx(EditorHeading, { section: selected, desktop: desktop, back: back, onCleared: focusEditor }), _jsx("div", { ref: editor, id: `${panelId}-${selected.id}`, role: "group", "aria-label": selected.editorLabel, tabIndex: -1, className: cn("mui-410da8dfa8ac mui-184ddc11e5f9 mui-3b82279f859f mui-2368e909f3a5 mui-998780cdef87 mui-b30fc56058b6 mui-f157ee6bae99 mui-a1c8c43d9be2 mui-b43343fe71c0", classNames?.editor), children: selected.content }, selected.id)] }))] }) }));
|
|
135
|
+
} })), selected && (_jsxs("div", { ref: editorPanel, "data-slot": "filter-menu-editor", onPointerEnter: pointer.cancel, style: detached ? { marginTop: editorOffset } : undefined, className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-184ddc11e5f9 mui-80baa5d03af7 mui-302c0d124a94", detached && "mui-cb20bd519346 mui-291952c2525a mui-d5111d0e9f48 mui-3fa8c572949b mui-b31810dbd8a9 mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b"), children: [_jsx(EditorHeading, { section: selected, desktop: desktop, back: back, onCleared: focusEditor }), _jsx("div", { ref: editor, id: `${panelId}-${selected.id}`, role: "group", "aria-label": selected.editorLabel, tabIndex: -1, className: cn("mui-410da8dfa8ac mui-184ddc11e5f9 mui-3b82279f859f mui-2368e909f3a5 mui-998780cdef87 mui-b30fc56058b6 mui-f157ee6bae99 mui-a1c8c43d9be2 mui-b43343fe71c0", classNames?.editor), children: selected.content }, selected.id)] }))] }) }));
|
|
135
136
|
}
|
|
136
137
|
function EditorHeading({ section, desktop, back, onCleared, }) {
|
|
137
138
|
const { classNames } = useMendyUI();
|
|
@@ -173,7 +174,7 @@ function FilterMenuList({ sections, selectedId, initialKey, panelId, desktop, de
|
|
|
173
174
|
if (section.label.toLocaleLowerCase().includes(term))
|
|
174
175
|
matches.push({ ...section, key: section.id });
|
|
175
176
|
}
|
|
176
|
-
return (_jsxs("div", { "data-slot": "filter-menu-list", className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94", desktop && selectedId && !detached && "mui-3b6d5fc7b061", detached && "mui-d5111d0e9f48 mui-3fa8c572949b mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b"), children: [sections.length > 20 && (_jsx("div", { className: "mui-27ead27a81df mui-bbe39cfb5cc6 mui-b97db4a9f432", children: _jsx(Input, { type: "search", "aria-label": "Find a filter", placeholder: "Find a filter\u2026", value: query, className: "mui-b51243872d85", onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
|
|
177
|
+
return (_jsxs("div", { "data-slot": "filter-menu-list", className: cn("mui-222f930b8752 mui-410da8dfa8ac mui-302c0d124a94", desktop && selectedId && !detached && "mui-3b6d5fc7b061", detached && "mui-cb20bd519346 mui-d5111d0e9f48 mui-3fa8c572949b mui-4f1a55de40bc mui-e593c38256e0 mui-5bd2afe89f0b"), children: [sections.length > 20 && (_jsx("div", { className: "mui-27ead27a81df mui-bbe39cfb5cc6 mui-b97db4a9f432", children: _jsx(Input, { type: "search", "aria-label": "Find a filter", placeholder: "Find a filter\u2026", value: query, className: "mui-b51243872d85", onChange: (event) => setQuery(event.target.value), onKeyDown: (event) => {
|
|
177
178
|
if (event.key === "ArrowDown") {
|
|
178
179
|
event.preventDefault();
|
|
179
180
|
collection.current?.focusFirst();
|
|
@@ -12,8 +12,11 @@ export type FilterChipProps = ComponentProps<"div"> & {
|
|
|
12
12
|
export declare function FilterChip({ className, entranceDelay, ...props }: FilterChipProps): import("react/jsx-runtime").JSX.Element;
|
|
13
13
|
export type FilterEditorTriggerProps = ComponentProps<typeof DropdownMenuTrigger>;
|
|
14
14
|
export declare function FilterEditorTrigger({ className, asChild, ...props }: FilterEditorTriggerProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
-
export type FilterEditorContentProps = ComponentProps<typeof DropdownMenuContent
|
|
16
|
-
|
|
15
|
+
export type FilterEditorContentProps = ComponentProps<typeof DropdownMenuContent> & {
|
|
16
|
+
/** Override the provider default for this popup. */
|
|
17
|
+
animate?: boolean;
|
|
18
|
+
};
|
|
19
|
+
export declare function FilterEditorContent({ className, onClick, animate, ...props }: FilterEditorContentProps): import("react/jsx-runtime").JSX.Element;
|
|
17
20
|
export type FilterRemoveProps = ComponentProps<"button"> & {
|
|
18
21
|
"aria-label": string;
|
|
19
22
|
};
|
package/dist/filters/filters.js
CHANGED
|
@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
3
3
|
import { createContext, useContext, useEffect, useRef, useState } from "react";
|
|
4
4
|
import { m, LazyMotion, domAnimation, useReducedMotion } from "motion/react";
|
|
5
5
|
import { XIcon } from "lucide-react";
|
|
6
|
-
import { Button } from "../customization.js";
|
|
6
|
+
import { Button, useMendyUI } from "../customization.js";
|
|
7
7
|
import { cn } from "../utils.js";
|
|
8
8
|
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuPortal, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "../primitives/dropdown-menu.js";
|
|
9
9
|
export function FilterEditor(props) {
|
|
@@ -40,11 +40,12 @@ export function FilterChip({ className, entranceDelay, ...props }) {
|
|
|
40
40
|
export function FilterEditorTrigger({ className, asChild, ...props }) {
|
|
41
41
|
return (_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx(Button, { asChild: asChild, variant: "ghost", "data-mendy-ui": "", "data-slot": "filter-editor-trigger", "aria-haspopup": "dialog", className: cn("mui-222f930b8752 mui-57c930dc1c31 mui-66b490dd6005 mui-52417259a4f5 mui-52101fc7d8bb mui-184ddc11e5f9 mui-71556df3b421 mui-70007b876865 mui-e7e01cc7f4df mui-e9347b78185f mui-37ad15a95595 mui-4d6720d47806 mui-2e357972fc10 mui-355efe22aedb mui-50aafa8694bb mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6 mui-4027d9c589b6 mui-6f73a280432e", className), ...props }) }));
|
|
42
42
|
}
|
|
43
|
-
export function FilterEditorContent({ className, onClick, ...props }) {
|
|
43
|
+
export function FilterEditorContent({ className, onClick, animate, ...props }) {
|
|
44
|
+
const { editorAnimation } = useMendyUI();
|
|
44
45
|
return (_jsx(DropdownMenuContent, { "data-mendy-ui": "", "data-slot": "filter-editor-content", role: "dialog", "aria-orientation": undefined, align: "start", sideOffset: 6, loop: true, onClick: (event) => {
|
|
45
46
|
event.stopPropagation();
|
|
46
47
|
onClick?.(event);
|
|
47
|
-
}, className: cn("mui-dcd942c18ddc mui-34055e6f8c1b mui-2368e909f3a5 mui-04760bcd507f mui-37d8a3f448ff", className), ...props }));
|
|
48
|
+
}, className: cn("mui-fc6a57ff7553 mui-dcd942c18ddc mui-34055e6f8c1b mui-2368e909f3a5 mui-04760bcd507f mui-37d8a3f448ff", !(animate ?? editorAnimation) && "mui-393df0d154e0", className), ...props }));
|
|
48
49
|
}
|
|
49
50
|
export function FilterRemove({ className, children, ...props }) {
|
|
50
51
|
return (_jsx(Button, { variant: "ghost", type: "button", "data-mendy-ui": "", "data-slot": "filter-remove", className: cn("mui-222f930b8752 mui-57c930dc1c31 mui-52417259a4f5 mui-04760bcd507f mui-8867d85ed290 mui-27ead27a81df mui-71556df3b421 mui-a503dd374cca mui-55860251be20 mui-163a623b3716 mui-37ad15a95595 mui-4d6720d47806 mui-2e357972fc10 mui-355efe22aedb mui-50aafa8694bb mui-db549d38ff19 mui-8d3c1014b967 mui-4600b77303d6", className), ...props, children: children ?? _jsx(XIcon, { className: "mui-61c000c8a98a", "aria-hidden": "true" }) }));
|
|
@@ -83,6 +83,10 @@ export function useFilterOptions(id, field, value, enabled) {
|
|
|
83
83
|
const [retryKey, retry] = useState(0);
|
|
84
84
|
const requestKey = JSON.stringify([scopeKey, query, retryKey]);
|
|
85
85
|
const identity = JSON.stringify([id, source?.kind, source?.scope]);
|
|
86
|
+
const retainedSelection = useRef({
|
|
87
|
+
identity: "",
|
|
88
|
+
choices: [],
|
|
89
|
+
});
|
|
86
90
|
const ids = selectedIds(value);
|
|
87
91
|
const idsKey = JSON.stringify(ids);
|
|
88
92
|
const [page, setPage] = useState({ key: "", items: [], loading: false });
|
|
@@ -156,7 +160,11 @@ export function useFilterOptions(id, field, value, enabled) {
|
|
|
156
160
|
: { items: [], loading: enabled, cursor: null, error: undefined };
|
|
157
161
|
const matchingResolved = resolved.key === resolveKey;
|
|
158
162
|
const items = remote ? currentPage.items : (source?.items ?? []);
|
|
159
|
-
const { selected, shown } = optionPresentation(source, items, ids, resolved, matchingResolved, resolved.identity === identity, remote, query);
|
|
163
|
+
const { selected, shown, knownSelected, missingLabels } = optionPresentation(source, items, ids, resolved, matchingResolved, resolved.identity === identity, remote, query, retainedSelection.current.identity === identity ? retainedSelection.current.choices : []);
|
|
164
|
+
useLayoutEffect(() => {
|
|
165
|
+
// Keep only actual labels for the current selection, never synthesized ID fallbacks.
|
|
166
|
+
retainedSelection.current = { identity, choices: knownSelected };
|
|
167
|
+
});
|
|
160
168
|
return {
|
|
161
169
|
query,
|
|
162
170
|
setQuery(next) {
|
|
@@ -168,7 +176,7 @@ export function useFilterOptions(id, field, value, enabled) {
|
|
|
168
176
|
items: shown,
|
|
169
177
|
selected,
|
|
170
178
|
loading: remote ? currentPage.loading : (source?.loading ?? false),
|
|
171
|
-
resolving:
|
|
179
|
+
resolving: missingLabels && (remote ? !matchingResolved : Boolean(source?.loading)),
|
|
172
180
|
error: currentPage.error ?? (matchingResolved ? resolved.error : undefined) ?? source?.error,
|
|
173
181
|
retry() {
|
|
174
182
|
source?.retry?.();
|
|
@@ -206,9 +214,10 @@ export function useFilterOptions(id, field, value, enabled) {
|
|
|
206
214
|
},
|
|
207
215
|
};
|
|
208
216
|
}
|
|
209
|
-
function optionPresentation(source, items, ids, resolved, matchingResolved, retainedLabels, remote, query) {
|
|
217
|
+
function optionPresentation(source, items, ids, resolved, matchingResolved, retainedLabels, remote, query, previousSelection) {
|
|
210
218
|
const known = new Map();
|
|
211
219
|
for (const item of [
|
|
220
|
+
...previousSelection,
|
|
212
221
|
...(source?.selectedItems ?? []),
|
|
213
222
|
...(retainedLabels ? resolved.choices : []),
|
|
214
223
|
...items,
|
|
@@ -223,5 +232,13 @@ function optionPresentation(source, items, ids, resolved, matchingResolved, reta
|
|
|
223
232
|
const shown = remote || source?.onQueryChange
|
|
224
233
|
? items
|
|
225
234
|
: items.filter((item) => item.label.toLocaleLowerCase().includes(query.toLocaleLowerCase()));
|
|
226
|
-
return {
|
|
235
|
+
return {
|
|
236
|
+
selected,
|
|
237
|
+
shown,
|
|
238
|
+
knownSelected: ids.flatMap((id) => {
|
|
239
|
+
const choice = known.get(id);
|
|
240
|
+
return choice ? [choice] : [];
|
|
241
|
+
}),
|
|
242
|
+
missingLabels: ids.some((id) => !known.has(id)),
|
|
243
|
+
};
|
|
227
244
|
}
|
|
@@ -13,3 +13,5 @@ export declare function useEditorOffset({ detached, editorPanel, content, rows,
|
|
|
13
13
|
rows: RefObject<Map<string, HTMLButtonElement>>;
|
|
14
14
|
selectedId?: string;
|
|
15
15
|
}): number;
|
|
16
|
+
/** Only the visible panels receive pointer events; the positioner's empty area does not. */
|
|
17
|
+
export declare function useAnchoredPointerEvents(content: RefObject<HTMLDivElement | null>, detached: boolean): (node: HTMLDivElement | null) => void;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { useLayoutEffect, useRef, useState } from "react";
|
|
2
|
+
import { useCallback, useLayoutEffect, useRef, useState } from "react";
|
|
3
3
|
/** Position the menu against the search field and the available viewport. */
|
|
4
4
|
export function useMenuPlacement(anchor, trigger, desktop) {
|
|
5
5
|
const [alignOffset, setAlignOffset] = useState(0);
|
|
@@ -102,3 +102,22 @@ export function useEditorOffset({ detached, editorPanel, content, rows, selected
|
|
|
102
102
|
}, [detached, selectedId, editorPanel, content, rows]);
|
|
103
103
|
return editorOffset;
|
|
104
104
|
}
|
|
105
|
+
/** Only the visible panels receive pointer events; the positioner's empty area does not. */
|
|
106
|
+
export function useAnchoredPointerEvents(content, detached) {
|
|
107
|
+
const restore = useRef(undefined);
|
|
108
|
+
return useCallback((node) => {
|
|
109
|
+
restore.current?.();
|
|
110
|
+
restore.current = undefined;
|
|
111
|
+
content.current = node;
|
|
112
|
+
if (!detached)
|
|
113
|
+
return;
|
|
114
|
+
const positioner = node?.parentElement;
|
|
115
|
+
if (!positioner?.hasAttribute("data-radix-popper-content-wrapper"))
|
|
116
|
+
return;
|
|
117
|
+
const previous = positioner.style.pointerEvents;
|
|
118
|
+
positioner.style.pointerEvents = "none";
|
|
119
|
+
restore.current = () => {
|
|
120
|
+
positioner.style.pointerEvents = previous;
|
|
121
|
+
};
|
|
122
|
+
}, [content, detached]);
|
|
123
|
+
}
|
package/dist/styles.css
CHANGED
|
@@ -20,6 +20,9 @@
|
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
22
|
@layer components {
|
|
23
|
+
.mui-cb20bd519346:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
24
|
+
pointer-events: auto;
|
|
25
|
+
}
|
|
23
26
|
.mui-33228ff7d583:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
24
27
|
pointer-events: none;
|
|
25
28
|
}
|
|
@@ -197,6 +200,9 @@
|
|
|
197
200
|
.mui-c7d5500b77ab:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
198
201
|
height: calc(var(--spacing) * 0);
|
|
199
202
|
}
|
|
203
|
+
.mui-099be97e1fa4:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
204
|
+
height: calc(var(--spacing) * 4);
|
|
205
|
+
}
|
|
200
206
|
.mui-ce1945804664:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
201
207
|
height: calc(var(--spacing) * 6);
|
|
202
208
|
}
|
|
@@ -260,11 +266,14 @@
|
|
|
260
266
|
.mui-37535002f0f7:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
261
267
|
width: calc(var(--spacing) * 72);
|
|
262
268
|
}
|
|
269
|
+
.mui-fc6a57ff7553:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
270
|
+
width: var(--mendy-filter-editor-width,19rem);
|
|
271
|
+
}
|
|
263
272
|
.mui-0b9c84552e40:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
264
273
|
width: var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,18.75rem));
|
|
265
274
|
}
|
|
266
|
-
.mui-
|
|
267
|
-
width: var(--mendy-filter-menu-width,calc(var(--filter-list-width) + 19rem));
|
|
275
|
+
.mui-4415137b0467:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
276
|
+
width: var(--mendy-filter-menu-width,calc(var(--filter-list-width) + var(--mendy-filter-editor-width,19rem)));
|
|
268
277
|
}
|
|
269
278
|
.mui-8cfb5a42ef9f:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
270
279
|
width: fit-content;
|
|
@@ -327,8 +336,8 @@
|
|
|
327
336
|
.mui-ae112c903ef8:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
328
337
|
resize: vertical;
|
|
329
338
|
}
|
|
330
|
-
.mui-
|
|
331
|
-
grid-template-columns: min(var(--filter-list-width), calc(100% - min(19rem, 50%))) minmax(0,1fr);
|
|
339
|
+
.mui-eeb3a8b33f69:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
340
|
+
grid-template-columns: min(var(--filter-list-width), calc(100% - min(var(--mendy-filter-editor-width,19rem), 50%))) minmax(0,1fr);
|
|
332
341
|
}
|
|
333
342
|
.mui-b5985369ee35:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
334
343
|
grid-template-rows: minmax(0,1fr);
|
|
@@ -488,6 +497,12 @@
|
|
|
488
497
|
.mui-965cf6587342:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
489
498
|
background-color: var(--destructive, #dc2626);
|
|
490
499
|
}
|
|
500
|
+
.mui-810ae775809b:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
501
|
+
background-color: var(--muted-foreground, #737373);
|
|
502
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
503
|
+
background-color: color-mix(in oklab, var(--muted-foreground, #737373) 20%, transparent);
|
|
504
|
+
}
|
|
505
|
+
}
|
|
491
506
|
.mui-e593c38256e0:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
492
507
|
background-color: var(--popover, #fff);
|
|
493
508
|
}
|
|
@@ -19,6 +19,9 @@
|
|
|
19
19
|
--default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
20
20
|
}
|
|
21
21
|
}
|
|
22
|
+
.mui-cb20bd519346:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
23
|
+
pointer-events: auto;
|
|
24
|
+
}
|
|
22
25
|
.mui-33228ff7d583:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
23
26
|
pointer-events: none;
|
|
24
27
|
}
|
|
@@ -196,6 +199,9 @@
|
|
|
196
199
|
.mui-c7d5500b77ab:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
197
200
|
height: calc(var(--spacing) * 0);
|
|
198
201
|
}
|
|
202
|
+
.mui-099be97e1fa4:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
203
|
+
height: calc(var(--spacing) * 4);
|
|
204
|
+
}
|
|
199
205
|
.mui-ce1945804664:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
200
206
|
height: calc(var(--spacing) * 6);
|
|
201
207
|
}
|
|
@@ -259,11 +265,14 @@
|
|
|
259
265
|
.mui-37535002f0f7:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
260
266
|
width: calc(var(--spacing) * 72);
|
|
261
267
|
}
|
|
268
|
+
.mui-fc6a57ff7553:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
269
|
+
width: var(--mendy-filter-editor-width,19rem);
|
|
270
|
+
}
|
|
262
271
|
.mui-0b9c84552e40:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
263
272
|
width: var(--mendy-filter-list-width,var(--mendy-filter-anchor-width,18.75rem));
|
|
264
273
|
}
|
|
265
|
-
.mui-
|
|
266
|
-
width: var(--mendy-filter-menu-width,calc(var(--filter-list-width) + 19rem));
|
|
274
|
+
.mui-4415137b0467:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
275
|
+
width: var(--mendy-filter-menu-width,calc(var(--filter-list-width) + var(--mendy-filter-editor-width,19rem)));
|
|
267
276
|
}
|
|
268
277
|
.mui-8cfb5a42ef9f:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
269
278
|
width: fit-content;
|
|
@@ -326,8 +335,8 @@
|
|
|
326
335
|
.mui-ae112c903ef8:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
327
336
|
resize: vertical;
|
|
328
337
|
}
|
|
329
|
-
.mui-
|
|
330
|
-
grid-template-columns: min(var(--filter-list-width), calc(100% - min(19rem, 50%))) minmax(0,1fr);
|
|
338
|
+
.mui-eeb3a8b33f69:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
339
|
+
grid-template-columns: min(var(--filter-list-width), calc(100% - min(var(--mendy-filter-editor-width,19rem), 50%))) minmax(0,1fr);
|
|
331
340
|
}
|
|
332
341
|
.mui-b5985369ee35:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
333
342
|
grid-template-rows: minmax(0,1fr);
|
|
@@ -487,6 +496,12 @@
|
|
|
487
496
|
.mui-965cf6587342:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
488
497
|
background-color: var(--destructive, #dc2626);
|
|
489
498
|
}
|
|
499
|
+
.mui-810ae775809b:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
500
|
+
background-color: var(--muted-foreground, #737373);
|
|
501
|
+
@supports (color: color-mix(in lab, red, red)) {
|
|
502
|
+
background-color: color-mix(in oklab, var(--muted-foreground, #737373) 20%, transparent);
|
|
503
|
+
}
|
|
504
|
+
}
|
|
490
505
|
.mui-e593c38256e0:where([data-mendy-ui], [data-mendy-ui] *) {
|
|
491
506
|
background-color: var(--popover, #fff);
|
|
492
507
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mendylanda/ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.8",
|
|
4
4
|
"description": "Mendy Landa\u2019s reusable React components. Typed filters with dynamic options, URL persistence, and customizable UI.",
|
|
5
5
|
"homepage": "https://ui.mendylanda.com",
|
|
6
6
|
"license": "MIT",
|