npm - @mantine/core - Versions diffs - 9.2.2 → 9.3.0 - Mend

@mantine/core 9.2.2 → 9.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (851) hide show

package/esm/components/Menu/MenuSubDropdown/MenuSubDropdown.mjs CHANGED Viewed

@@ -1,10 +1,12 @@
 "use client";
+import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
 import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
 import { factory } from "../../../core/factory/factory.mjs";
 import { Popover } from "../../Popover/Popover.mjs";
 import { useMenuContext } from "../Menu.context.mjs";
-import Menu_module_default from "../Menu.module.mjs";
 import { SubMenuContext } from "../MenuSub/MenuSub.context.mjs";
+import Menu_module_default from "../Menu.module.mjs";
+import { useMenuTypeAhead } from "../use-menu-type-ahead.mjs";
 import { use, useRef } from "react";
 import { useMergedRef } from "@mantine/hooks";
 import { jsx } from "react/jsx-runtime";
@@ -14,6 +16,15 @@ const MenuSubDropdown = factory((props) => {
 	const wrapperRef = useRef(null);
 	const ctx = useMenuContext();
 	const subCtx = use(SubMenuContext);
+	const typeAhead = useMenuTypeAhead({
+		enabled: !ctx.hasSearch,
+		opened: subCtx?.opened ?? false,
+		getDropdown: () => wrapperRef.current
+	});
+	const handleKeyDown = createEventHandler(onKeyDown, (event) => {
+		typeAhead(event);
+		if (!event.ctrlKey && !event.metaKey && !event.altKey && event.key.length === 1 && event.key !== " ") event.stopPropagation();
+	});
 	const floatingProps = subCtx?.getFloatingProps({
 		onMouseEnter,
 		onMouseLeave,
@@ -35,6 +46,7 @@ const MenuSubDropdown = factory((props) => {
 		}),
 		tabIndex: -1,
 		"data-menu-dropdown": true,
+		onKeyDown: handleKeyDown,
 		children
 	});
 });

package/esm/components/Menu/MenuSubDropdown/MenuSubDropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuSubDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubDropdown/MenuSubDropdown.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubDropdownStylesNames = 'dropdown';\n\nexport interface MenuSubDropdownProps\n extends BoxProps, CompoundStylesApiProps<MenuSubDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuSubDropdownFactory = Factory<{\n props: MenuSubDropdownProps;\n ref: HTMLDivElement;\n stylesNames: MenuSubDropdownStylesNames;\n compound: true;\n}>;\n\nexport const MenuSubDropdown = factory<MenuSubDropdownFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onKeyDown,\n children,\n ref,\n ...others\n } = useProps('MenuSubDropdown', null, props);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const ctx = useMenuContext();\n const subCtx = use(SubMenuContext);\n\n const floatingProps = subCtx?.getFloatingProps({\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n });\n\n return (\n <Popover.Dropdown\n {...others}\n {...floatingProps}\n role=\"menu\"\n aria-orientation=\"vertical\"\n ref={useMergedRef(ref, wrapperRef, subCtx?.setFloating)}\n {...ctx.getStyles('dropdown', {\n className,\n style,\n styles,\n classNames,\n withStaticClass: false,\n })}\n tabIndex={-1}\n data-menu-dropdown\n >\n {children}\n </Popover.Dropdown>\n );\n});\n\nMenuSubDropdown.classes = classes;\nMenuSubDropdown.displayName = '@mantine/core/MenuSubDropdown';\n"],"mappings":"~~;;;;;;;;;;;AA2BA~~,MAAa,kBAAkB,SAAiC,UAAU;CACxE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,gBACA,gBACA,WACA,UACA,KACA,GAAG,WACD,SAAS,mBAAmB,MAAM,KAAK;CAE3C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CAEjC,MAAM,gBAAgB,QAAQ,iBAAiB;EAC7C;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,GAAI;EACJ,MAAK;EACL,oBAAiB;EACjB,KAAK,aAAa,KAAK,YAAY,QAAQ,WAAW;EACtD,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;~~EAEC~~;CACe,CAAA;AAEtB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}
1	+ {"version":3,"file":"MenuSubDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubDropdown/MenuSubDropdown.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n createEventHandler,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport { useMenuTypeAhead } from '../use-menu-type-ahead';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubDropdownStylesNames = 'dropdown';\n\nexport interface MenuSubDropdownProps\n extends BoxProps, CompoundStylesApiProps<MenuSubDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuSubDropdownFactory = Factory<{\n props: MenuSubDropdownProps;\n ref: HTMLDivElement;\n stylesNames: MenuSubDropdownStylesNames;\n compound: true;\n}>;\n\nexport const MenuSubDropdown = factory<MenuSubDropdownFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n onKeyDown,\n children,\n ref,\n ...others\n } = useProps('MenuSubDropdown', null, props);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const ctx = useMenuContext();\n const subCtx = use(SubMenuContext);\n\n const typeAhead = useMenuTypeAhead({\n enabled: !ctx.hasSearch,\n opened: subCtx?.opened ?? false,\n getDropdown: () => wrapperRef.current,\n });\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n typeAhead(event);\n if (\n !event.ctrlKey &&\n !event.metaKey &&\n !event.altKey &&\n event.key.length === 1 &&\n event.key !== ' '\n ) {\n event.stopPropagation();\n }\n });\n\n const floatingProps = subCtx?.getFloatingProps({\n onMouseEnter,\n onMouseLeave,\n onPointerEnter,\n onPointerLeave,\n });\n\n return (\n <Popover.Dropdown\n {...others}\n {...floatingProps}\n role=\"menu\"\n aria-orientation=\"vertical\"\n ref={useMergedRef(ref, wrapperRef, subCtx?.setFloating)}\n {...ctx.getStyles('dropdown', {\n className,\n style,\n styles,\n classNames,\n withStaticClass: false,\n })}\n tabIndex={-1}\n data-menu-dropdown\n onKeyDown={handleKeyDown}\n >\n {children}\n </Popover.Dropdown>\n );\n});\n\nMenuSubDropdown.classes = classes;\nMenuSubDropdown.displayName = '@mantine/core/MenuSubDropdown';\n"],"mappings":";;;;;;;;;;;;;AA6BA,MAAa,kBAAkB,SAAiC,UAAU;CACxE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,gBACA,gBACA,WACA,UACA,KACA,GAAG,WACD,SAAS,mBAAmB,MAAM,KAAK;CAE3C,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CAEjC,MAAM,YAAY,iBAAiB;EACjC,SAAS,CAAC,IAAI;EACd,QAAQ,QAAQ,UAAU;EAC1B,mBAAmB,WAAW;CAChC,CAAC;CAED,MAAM,gBAAgB,mBAAwB,YAAY,UAAU;EAClE,UAAU,KAAK;EACf,IACE,CAAC,MAAM,WACP,CAAC,MAAM,WACP,CAAC,MAAM,UACP,MAAM,IAAI,WAAW,KACrB,MAAM,QAAQ,KAEd,MAAM,gBAAgB;CAE1B,CAAC;CAED,MAAM,gBAAgB,QAAQ,iBAAiB;EAC7C;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,GAAI;EACJ,MAAK;EACL,oBAAiB;EACjB,KAAK,aAAa,KAAK,YAAY,QAAQ,WAAW;EACtD,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;EACA,WAAW;EAEV;CACe,CAAA;AAEtB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}

package/esm/components/Menu/MenuSubItem/MenuSubItem.mjs CHANGED Viewed

@@ -9,8 +9,8 @@ import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.
 import { UnstyledButton } from "../../UnstyledButton/UnstyledButton.mjs";
 import { AccordionChevron } from "../../Accordion/AccordionChevron.mjs";
 import { useMenuContext } from "../Menu.context.mjs";
-import Menu_module_default from "../Menu.module.mjs";
 import { SubMenuContext } from "../MenuSub/MenuSub.context.mjs";
+import Menu_module_default from "../Menu.module.mjs";
 import { use, useRef } from "react";
 import { useMergedRef } from "@mantine/hooks";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -45,6 +45,14 @@ const MenuSubItem = polymorphicFactory((props) => {
 	const handleClick = createEventHandler(_others.onClick, () => {
 		if (!dataDisabled && closeMenuOnClick) ctx.closeDropdownImmediately();
 	});
+	const handleMouseMove = createEventHandler(_others.onMouseMove, () => {
+		if (!ctx.hasSearch) return;
+		const dropdown = itemRef.current?.closest("[data-menu-dropdown]");
+		if (!dropdown) return;
+		dropdown.querySelectorAll("[data-menu-active]").forEach((node) => {
+			if (node !== itemRef.current && node.closest("[data-menu-dropdown]") === dropdown) node.removeAttribute("data-menu-active");
+		});
+	});
 	const referenceProps = subCtx?.getReferenceProps({
 		onMouseEnter: _others.onMouseEnter,
 		onMouseLeave: _others.onMouseLeave,
@@ -71,6 +79,7 @@ const MenuSubItem = polymorphicFactory((props) => {
 		"data-disabled": disabled || dataDisabled || void 0,
 		"data-mantine-stop-propagation": true,
 		onClick: handleClick,
+		onMouseMove: handleMouseMove,
 		onKeyDown: createScopedKeydownHandler({
 			siblingSelector: "[data-menu-item]:not([data-disabled])",
 			parentSelector: "[data-menu-dropdown]",
@@ -85,6 +94,13 @@ const MenuSubItem = polymorphicFactory((props) => {
 			"--menu-item-hover": colors?.hover
 		},
 		children: [
+			ctx.alignItemsLabels === "all" && /* @__PURE__ */ jsx("div", {
+				...ctx.getStyles("itemIndicator", {
+					styles,
+					classNames
+				}),
+				"data-placeholder": true
+			}),
 			leftSection && /* @__PURE__ */ jsx("div", {
 				...ctx.getStyles("itemSection", {
 					styles,
@@ -98,6 +114,7 @@ const MenuSubItem = polymorphicFactory((props) => {
 					styles,
 					classNames
 				}),
+				"data-menu-item-label": true,
 				children
 			}),
 			/* @__PURE__ */ jsx("div", {

package/esm/components/Menu/MenuSubItem/MenuSubItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MenuSubItem.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubItem/MenuSubItem.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n createEventHandler,\n createScopedKeydownHandler,\n MantineColor,\n parseThemeColor,\n polymorphicFactory,\n PolymorphicFactory,\n useDirection,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { AccordionChevron } from '../../Accordion';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubItemStylesNames = 'item' \| 'itemLabel' \| 'itemSection';\n\nexport interface MenuSubItemProps extends BoxProps, CompoundStylesApiProps<MenuSubItemFactory> {\n 'data-disabled'?: boolean;\n\n /** Item label /\n children?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color /\n color?: MantineColor;\n\n /* Section displayed at the start of the label /\n leftSection?: React.ReactNode;\n\n /* Section displayed at the end of the label /\n rightSection?: React.ReactNode;\n\n /* Sets disabled attribute, applies disabled styles /\n disabled?: boolean;\n\n /* If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. */\n closeMenuOnClick?: boolean;\n}\n\nexport type MenuSubItemFactory = PolymorphicFactory<{\n props: MenuSubItemProps;\n defaultRef: HTMLButtonElement;\n defaultComponent: 'button';\n stylesNames: MenuSubItemStylesNames;\n compound: true;\n}>;\n\nexport const MenuSubItem = polymorphicFactory<MenuSubItemFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n color,\n leftSection,\n rightSection,\n children,\n disabled,\n 'data-disabled': dataDisabled,\n closeMenuOnClick,\n ref,\n ...others\n } = useProps('MenuSubItem', null, props);\n\n const ctx = useMenuContext();\n const subCtx = use(SubMenuContext);\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const itemRef = useRef<HTMLButtonElement>(null);\n const _others: any = others;\n\n const colors = color ? theme.variantColorResolver({ color, theme, variant: 'light' }) : undefined;\n const parsedThemeColor = color ? parseThemeColor({ color, theme }) : null;\n\n const handleKeydown = createEventHandler<any>(_others.onKeyDown, (event) => {\n if (event.key === 'ArrowRight') {\n subCtx?.open();\n subCtx?.focusFirstItem();\n }\n\n if (event.key === 'ArrowLeft' && subCtx?.parentContext) {\n subCtx.parentContext.close();\n subCtx.parentContext.focusParentItem();\n }\n });\n\n const handleClick = createEventHandler(_others.onClick, () => {\n if (!dataDisabled && closeMenuOnClick) {\n ctx.closeDropdownImmediately();\n }\n });\n\n const referenceProps = subCtx?.getReferenceProps({\n onMouseEnter: _others.onMouseEnter,\n onMouseLeave: _others.onMouseLeave,\n onPointerEnter: _others.onPointerEnter,\n onPointerLeave: _others.onPointerLeave,\n });\n\n return (\n <UnstyledButton\n onMouseDown={(event) => event.preventDefault()}\n {...others}\n {...referenceProps}\n unstyled={ctx.unstyled}\n tabIndex={ctx.menuItemTabIndex}\n {...ctx.getStyles('item', { className, style, styles, classNames })}\n ref={useMergedRef(itemRef, ref, subCtx?.setReference)}\n role=\"menuitem\"\n disabled={disabled}\n data-menu-item\n data-sub-menu-item\n data-disabled={disabled \|\| dataDisabled \|\| undefined}\n data-mantine-stop-propagation\n onClick={handleClick}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[data-menu-item]:not([data-disabled])',\n parentSelector: '[data-menu-dropdown]',\n activateOnFocus: false,\n loop: ctx.loop,\n dir,\n orientation: 'vertical',\n onKeyDown: handleKeydown,\n })}\n __vars={{\n '--menu-item-color':\n parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === undefined\n ? `var(--mantine-color-${parsedThemeColor.color}-6)`\n : colors?.color,\n '--menu-item-hover': colors?.hover,\n }}\n >\n {leftSection && (\n <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"left\">\n {leftSection}\n </div>\n )}\n\n {children && <div {...ctx.getStyles('itemLabel', { styles, classNames })}>{children}</div>}\n\n <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"right\">\n {rightSection \|\| <AccordionChevron {...ctx.getStyles('chevron')} size={14} />}\n </div>\n </UnstyledButton>\n );\n});\n\nMenuSubItem.classes = classes;\nMenuSubItem.displayName = '@mantine/core/MenuSubItem';\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,MAAa,cAAc,oBAAwC,UAAU;CAC3E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,aACA,cACA,UACA,UACA,iBAAiB,cACjB,kBACA,KACA,GAAG,WACD,SAAS,eAAe,MAAM,KAAK;CAEvC,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,UAAe;CAErB,MAAM,SAAS,QAAQ,MAAM,qBAAqB;EAAE;EAAO;EAAO,SAAS;CAAQ,CAAC,IAAI,KAAA;CACxF,MAAM,mBAAmB,QAAQ,gBAAgB;EAAE;EAAO;CAAM,CAAC,IAAI;CAErE,MAAM,gBAAgB,mBAAwB,QAAQ,YAAY,UAAU;EAC1E,IAAI,MAAM,QAAQ,cAAc;GAC9B,QAAQ,KAAK;GACb,QAAQ,eAAe;EACzB;EAEA,IAAI,MAAM,QAAQ,eAAe,QAAQ,eAAe;GACtD,OAAO,cAAc,MAAM;GAC3B,OAAO,cAAc,gBAAgB;EACvC;CACF,CAAC;CAED,MAAM,cAAc,mBAAmB,QAAQ,eAAe;EAC5D,IAAI,CAAC,gBAAgB,kBACnB,IAAI,yBAAyB;CAEjC,CAAC;CAED,MAAM,iBAAiB,QAAQ,kBAAkB;EAC/C,cAAc,QAAQ;EACtB,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;EACxB,gBAAgB,QAAQ;CAC1B,CAAC;CAED,OACE,qBAAC,gBAAD;EACE,cAAc,UAAU,MAAM,eAAe;EAC7C,GAAI;EACJ,GAAI;EACJ,UAAU,IAAI;EACd,UAAU,IAAI;EACd,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO;GAAQ;EAAW,CAAC;EAClE,KAAK,aAAa,SAAS,KAAK,QAAQ,YAAY;EACpD,MAAK;EACK;EACV,kBAAA;EACA,sBAAA;EACA,iBAAe,YAAY,gBAAgB,KAAA;EAC3C,iCAAA;EACA,SAAS;EACT,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB;GACjB,MAAM,IAAI;GACV;GACA,aAAa;GACb,WAAW;EACb,CAAC;EACD,QAAQ;GACN,qBACE,kBAAkB,gBAAgB,kBAAkB,UAAU,KAAA,IAC1D,uBAAuB,iBAAiB,MAAM,OAC9C,QAAQ;GACd,qBAAqB,QAAQ;EAC/B;~~YA9BF~~;~~GAgCG~~,eACC,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;IAAW,CAAC;IAAG,iBAAc;cAC1E;GACE,CAAA;GAGN,~~YAAY~~,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa;KAAE;KAAQ;IAAW,CAAC;~~IAAI~~;~~GAAc~~,CAAA;~~GAEzF~~,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;IAAW,CAAC;IAAG,iBAAc;cAC1E,gBAAgB,oBAAC,kBAAD;KAAkB,GAAI,IAAI,UAAU,SAAS;KAAG,MAAM;IAAK,CAAA;GACzE,CAAA;EACS;;AAEpB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,cAAc"}
1	+ {"version":3,"file":"MenuSubItem.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuSubItem/MenuSubItem.tsx"],"sourcesContent":["import { use, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n createEventHandler,\n createScopedKeydownHandler,\n MantineColor,\n parseThemeColor,\n polymorphicFactory,\n PolymorphicFactory,\n useDirection,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { AccordionChevron } from '../../Accordion';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenuContext } from '../Menu.context';\nimport { SubMenuContext } from '../MenuSub/MenuSub.context';\nimport classes from '../Menu.module.css';\n\nexport type MenuSubItemStylesNames = 'item' \| 'itemLabel' \| 'itemSection' \| 'itemIndicator';\n\nexport interface MenuSubItemProps extends BoxProps, CompoundStylesApiProps<MenuSubItemFactory> {\n 'data-disabled'?: boolean;\n\n /** Item label /\n children?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color /\n color?: MantineColor;\n\n /* Section displayed at the start of the label /\n leftSection?: React.ReactNode;\n\n /* Section displayed at the end of the label /\n rightSection?: React.ReactNode;\n\n /* Sets disabled attribute, applies disabled styles /\n disabled?: boolean;\n\n /* If set, the menu is closed when the item is clicked. Overrides `closeOnItemClick` prop on the `Menu` component. */\n closeMenuOnClick?: boolean;\n}\n\nexport type MenuSubItemFactory = PolymorphicFactory<{\n props: MenuSubItemProps;\n defaultRef: HTMLButtonElement;\n defaultComponent: 'button';\n stylesNames: MenuSubItemStylesNames;\n compound: true;\n}>;\n\nexport const MenuSubItem = polymorphicFactory<MenuSubItemFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n color,\n leftSection,\n rightSection,\n children,\n disabled,\n 'data-disabled': dataDisabled,\n closeMenuOnClick,\n ref,\n ...others\n } = useProps('MenuSubItem', null, props);\n\n const ctx = useMenuContext();\n const subCtx = use(SubMenuContext);\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const itemRef = useRef<HTMLButtonElement>(null);\n const _others: any = others;\n\n const colors = color ? theme.variantColorResolver({ color, theme, variant: 'light' }) : undefined;\n const parsedThemeColor = color ? parseThemeColor({ color, theme }) : null;\n\n const handleKeydown = createEventHandler<any>(_others.onKeyDown, (event) => {\n if (event.key === 'ArrowRight') {\n subCtx?.open();\n subCtx?.focusFirstItem();\n }\n\n if (event.key === 'ArrowLeft' && subCtx?.parentContext) {\n subCtx.parentContext.close();\n subCtx.parentContext.focusParentItem();\n }\n });\n\n const handleClick = createEventHandler(_others.onClick, () => {\n if (!dataDisabled && closeMenuOnClick) {\n ctx.closeDropdownImmediately();\n }\n });\n\n const handleMouseMove = createEventHandler<any>(_others.onMouseMove, () => {\n if (!ctx.hasSearch) {\n return;\n }\n const dropdown = itemRef.current?.closest('[data-menu-dropdown]');\n if (!dropdown) {\n return;\n }\n dropdown.querySelectorAll<HTMLElement>('[data-menu-active]').forEach((node) => {\n if (node !== itemRef.current && node.closest('[data-menu-dropdown]') === dropdown) {\n node.removeAttribute('data-menu-active');\n }\n });\n });\n\n const referenceProps = subCtx?.getReferenceProps({\n onMouseEnter: _others.onMouseEnter,\n onMouseLeave: _others.onMouseLeave,\n onPointerEnter: _others.onPointerEnter,\n onPointerLeave: _others.onPointerLeave,\n });\n\n return (\n <UnstyledButton\n onMouseDown={(event) => event.preventDefault()}\n {...others}\n {...referenceProps}\n unstyled={ctx.unstyled}\n tabIndex={ctx.menuItemTabIndex}\n {...ctx.getStyles('item', { className, style, styles, classNames })}\n ref={useMergedRef(itemRef, ref, subCtx?.setReference)}\n role=\"menuitem\"\n disabled={disabled}\n data-menu-item\n data-sub-menu-item\n data-disabled={disabled \|\| dataDisabled \|\| undefined}\n data-mantine-stop-propagation\n onClick={handleClick}\n onMouseMove={handleMouseMove}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[data-menu-item]:not([data-disabled])',\n parentSelector: '[data-menu-dropdown]',\n activateOnFocus: false,\n loop: ctx.loop,\n dir,\n orientation: 'vertical',\n onKeyDown: handleKeydown,\n })}\n __vars={{\n '--menu-item-color':\n parsedThemeColor?.isThemeColor && parsedThemeColor?.shade === undefined\n ? `var(--mantine-color-${parsedThemeColor.color}-6)`\n : colors?.color,\n '--menu-item-hover': colors?.hover,\n }}\n >\n {ctx.alignItemsLabels === 'all' && (\n <div {...ctx.getStyles('itemIndicator', { styles, classNames })} data-placeholder />\n )}\n {leftSection && (\n <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"left\">\n {leftSection}\n </div>\n )}\n\n {children && (\n <div {...ctx.getStyles('itemLabel', { styles, classNames })} data-menu-item-label>\n {children}\n </div>\n )}\n\n <div {...ctx.getStyles('itemSection', { styles, classNames })} data-position=\"right\">\n {rightSection \|\| <AccordionChevron {...ctx.getStyles('chevron')} size={14} />}\n </div>\n </UnstyledButton>\n );\n});\n\nMenuSubItem.classes = classes;\nMenuSubItem.displayName = '@mantine/core/MenuSubItem';\n"],"mappings":";;;;;;;;;;;;;;;;;AAqDA,MAAa,cAAc,oBAAwC,UAAU;CAC3E,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,OACA,aACA,cACA,UACA,UACA,iBAAiB,cACjB,kBACA,KACA,GAAG,WACD,SAAS,eAAe,MAAM,KAAK;CAEvC,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,IAAI,cAAc;CACjC,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,UAAU,OAA0B,IAAI;CAC9C,MAAM,UAAe;CAErB,MAAM,SAAS,QAAQ,MAAM,qBAAqB;EAAE;EAAO;EAAO,SAAS;CAAQ,CAAC,IAAI,KAAA;CACxF,MAAM,mBAAmB,QAAQ,gBAAgB;EAAE;EAAO;CAAM,CAAC,IAAI;CAErE,MAAM,gBAAgB,mBAAwB,QAAQ,YAAY,UAAU;EAC1E,IAAI,MAAM,QAAQ,cAAc;GAC9B,QAAQ,KAAK;GACb,QAAQ,eAAe;EACzB;EAEA,IAAI,MAAM,QAAQ,eAAe,QAAQ,eAAe;GACtD,OAAO,cAAc,MAAM;GAC3B,OAAO,cAAc,gBAAgB;EACvC;CACF,CAAC;CAED,MAAM,cAAc,mBAAmB,QAAQ,eAAe;EAC5D,IAAI,CAAC,gBAAgB,kBACnB,IAAI,yBAAyB;CAEjC,CAAC;CAED,MAAM,kBAAkB,mBAAwB,QAAQ,mBAAmB;EACzE,IAAI,CAAC,IAAI,WACP;EAEF,MAAM,WAAW,QAAQ,SAAS,QAAQ,sBAAsB;EAChE,IAAI,CAAC,UACH;EAEF,SAAS,iBAA8B,oBAAoB,EAAE,SAAS,SAAS;GAC7E,IAAI,SAAS,QAAQ,WAAW,KAAK,QAAQ,sBAAsB,MAAM,UACvE,KAAK,gBAAgB,kBAAkB;EAE3C,CAAC;CACH,CAAC;CAED,MAAM,iBAAiB,QAAQ,kBAAkB;EAC/C,cAAc,QAAQ;EACtB,cAAc,QAAQ;EACtB,gBAAgB,QAAQ;EACxB,gBAAgB,QAAQ;CAC1B,CAAC;CAED,OACE,qBAAC,gBAAD;EACE,cAAc,UAAU,MAAM,eAAe;EAC7C,GAAI;EACJ,GAAI;EACJ,UAAU,IAAI;EACd,UAAU,IAAI;EACd,GAAI,IAAI,UAAU,QAAQ;GAAE;GAAW;GAAO;GAAQ;EAAW,CAAC;EAClE,KAAK,aAAa,SAAS,KAAK,QAAQ,YAAY;EACpD,MAAK;EACK;EACV,kBAAA;EACA,sBAAA;EACA,iBAAe,YAAY,gBAAgB,KAAA;EAC3C,iCAAA;EACA,SAAS;EACT,aAAa;EACb,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB;GACjB,MAAM,IAAI;GACV;GACA,aAAa;GACb,WAAW;EACb,CAAC;EACD,QAAQ;GACN,qBACE,kBAAkB,gBAAgB,kBAAkB,UAAU,KAAA,IAC1D,uBAAuB,iBAAiB,MAAM,OAC9C,QAAQ;GACd,qBAAqB,QAAQ;EAC/B;YA/BF;GAiCG,IAAI,qBAAqB,SACxB,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,iBAAiB;KAAE;KAAQ;IAAW,CAAC;IAAG,oBAAA;GAAkB,CAAA;GAEpF,eACC,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;IAAW,CAAC;IAAG,iBAAc;cAC1E;GACE,CAAA;GAGN,YACC,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,aAAa;KAAE;KAAQ;IAAW,CAAC;IAAG,wBAAA;IAC1D;GACE,CAAA;GAGP,oBAAC,OAAD;IAAK,GAAI,IAAI,UAAU,eAAe;KAAE;KAAQ;IAAW,CAAC;IAAG,iBAAc;cAC1E,gBAAgB,oBAAC,kBAAD;KAAkB,GAAI,IAAI,UAAU,SAAS;KAAG,MAAM;IAAK,CAAA;GACzE,CAAA;EACS;;AAEpB,CAAC;AAED,YAAY,UAAUA;AACtB,YAAY,cAAc"}

package/esm/components/Menu/use-menu-type-ahead.mjs ADDED Viewed

@@ -0,0 +1,72 @@
+"use client";
+import { useEffect, useRef } from "react";
+//#region packages/@mantine/core/src/components/Menu/use-menu-type-ahead.ts
+const RESET_DELAY = 500;
+function getItemText(item) {
+	return ((item.querySelector("[data-menu-item-label]") ?? item).textContent ?? "").trim().toLowerCase();
+}
+function isRepeatedChar(buffer) {
+	return buffer.length > 1 && buffer.split("").every((char) => char === buffer[0]);
+}
+function useMenuTypeAhead({ enabled, opened, getDropdown }) {
+	const stateRef = useRef({
+		buffer: "",
+		timeoutId: null
+	});
+	useEffect(() => {
+		if (opened && enabled) return;
+		const state = stateRef.current;
+		if (state.timeoutId !== null) {
+			window.clearTimeout(state.timeoutId);
+			state.timeoutId = null;
+		}
+		state.buffer = "";
+	}, [opened, enabled]);
+	useEffect(() => () => {
+		const { timeoutId } = stateRef.current;
+		if (timeoutId !== null) window.clearTimeout(timeoutId);
+	}, []);
+	return (event) => {
+		if (!enabled || event.defaultPrevented) return;
+		if (event.ctrlKey || event.metaKey || event.altKey) return;
+		if (event.key.length !== 1 || event.key === " ") return;
+		const target = event.target;
+		if (target && (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable)) return;
+		const dropdown = getDropdown();
+		if (!dropdown) return;
+		const items = Array.from(dropdown.querySelectorAll("[data-menu-item]:not([data-disabled])")).filter((item) => item.closest("[data-menu-dropdown]") === dropdown);
+		if (items.length === 0) return;
+		const state = stateRef.current;
+		state.buffer = (state.buffer + event.key).toLowerCase();
+		if (state.timeoutId !== null) window.clearTimeout(state.timeoutId);
+		state.timeoutId = window.setTimeout(() => {
+			state.buffer = "";
+			state.timeoutId = null;
+		}, RESET_DELAY);
+		const activeElement = document.activeElement;
+		const currentIndex = activeElement ? items.indexOf(activeElement) : -1;
+		let match = null;
+		if (state.buffer.length === 1 || isRepeatedChar(state.buffer)) {
+			const char = state.buffer[0];
+			const startIndex = currentIndex + 1;
+			for (let i = 0; i < items.length; i += 1) {
+				const idx = (startIndex + i) % items.length;
+				if (getItemText(items[idx]).startsWith(char)) {
+					match = items[idx];
+					break;
+				}
+			}
+		} else for (let i = 0; i < items.length; i += 1) if (getItemText(items[i]).startsWith(state.buffer)) {
+			match = items[i];
+			break;
+		}
+		if (match) {
+			event.preventDefault();
+			match.focus();
+		}
+	};
+}
+//#endregion
+export { useMenuTypeAhead };
+//# sourceMappingURL=use-menu-type-ahead.mjs.map

package/esm/components/Menu/use-menu-type-ahead.mjs.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"use-menu-type-ahead.mjs","names":[],"sources":["../../../src/components/Menu/use-menu-type-ahead.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\nconst RESET_DELAY = 500;\n\ninterface UseMenuTypeAheadOptions {\n enabled: boolean;\n opened: boolean;\n getDropdown: () => HTMLElement | null;\n}\n\ninterface TypeAheadState {\n buffer: string;\n timeoutId: number | null;\n}\n\nfunction getItemText(item: HTMLElement): string {\n const label = item.querySelector<HTMLElement>('[data-menu-item-label]');\n return ((label ?? item).textContent ?? '').trim().toLowerCase();\n}\n\nfunction isRepeatedChar(buffer: string): boolean {\n return buffer.length > 1 && buffer.split('').every((char) => char === buffer[0]);\n}\n\nexport function useMenuTypeAhead({ enabled, opened, getDropdown }: UseMenuTypeAheadOptions) {\n const stateRef = useRef<TypeAheadState>({ buffer: '', timeoutId: null });\n\n useEffect(() => {\n if (opened && enabled) {\n return;\n }\n const state = stateRef.current;\n if (state.timeoutId !== null) {\n window.clearTimeout(state.timeoutId);\n state.timeoutId = null;\n }\n state.buffer = '';\n }, [opened, enabled]);\n\n useEffect(\n () => () => {\n const { timeoutId } = stateRef.current;\n if (timeoutId !== null) {\n window.clearTimeout(timeoutId);\n }\n },\n []\n );\n\n return (event: React.KeyboardEvent<HTMLElement>) => {\n if (!enabled || event.defaultPrevented) {\n return;\n }\n if (event.ctrlKey || event.metaKey || event.altKey) {\n return;\n }\n if (event.key.length !== 1 || event.key === ' ') {\n return;\n }\n\n const target = event.target as HTMLElement | null;\n if (\n target &&\n (target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA' ||\n target.tagName === 'SELECT' ||\n target.isContentEditable)\n ) {\n return;\n }\n\n const dropdown = getDropdown();\n if (!dropdown) {\n return;\n }\n\n const items = Array.from(\n dropdown.querySelectorAll<HTMLElement>('[data-menu-item]:not([data-disabled])')\n ).filter((item) => item.closest('[data-menu-dropdown]') === dropdown);\n\n if (items.length === 0) {\n return;\n }\n\n const state = stateRef.current;\n state.buffer = (state.buffer + event.key).toLowerCase();\n\n if (state.timeoutId !== null) {\n window.clearTimeout(state.timeoutId);\n }\n state.timeoutId = window.setTimeout(() => {\n state.buffer = '';\n state.timeoutId = null;\n }, RESET_DELAY);\n\n const activeElement = document.activeElement as HTMLElement | null;\n const currentIndex = activeElement ? items.indexOf(activeElement) : -1;\n\n let match: HTMLElement | null = null;\n\n if (state.buffer.length === 1 || isRepeatedChar(state.buffer)) {\n const char = state.buffer[0]!;\n const startIndex = currentIndex + 1;\n for (let i = 0; i < items.length; i += 1) {\n const idx = (startIndex + i) % items.length;\n if (getItemText(items[idx]!).startsWith(char)) {\n match = items[idx]!;\n break;\n }\n }\n } else {\n for (let i = 0; i < items.length; i += 1) {\n if (getItemText(items[i]!).startsWith(state.buffer)) {\n match = items[i]!;\n break;\n }\n }\n }\n\n if (match) {\n event.preventDefault();\n match.focus();\n }\n };\n}\n"],"mappings":";;;AAEA,MAAM,cAAc;AAapB,SAAS,YAAY,MAA2B;CAE9C,SADc,KAAK,cAA2B,wBACjC,KAAK,MAAM,eAAe,IAAI,KAAK,EAAE,YAAY;AAChE;AAEA,SAAS,eAAe,QAAyB;CAC/C,OAAO,OAAO,SAAS,KAAK,OAAO,MAAM,EAAE,EAAE,OAAO,SAAS,SAAS,OAAO,EAAE;AACjF;AAEA,SAAgB,iBAAiB,EAAE,SAAS,QAAQ,eAAwC;CAC1F,MAAM,WAAW,OAAuB;EAAE,QAAQ;EAAI,WAAW;CAAK,CAAC;CAEvE,gBAAgB;EACd,IAAI,UAAU,SACZ;EAEF,MAAM,QAAQ,SAAS;EACvB,IAAI,MAAM,cAAc,MAAM;GAC5B,OAAO,aAAa,MAAM,SAAS;GACnC,MAAM,YAAY;EACpB;EACA,MAAM,SAAS;CACjB,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,sBACc;EACV,MAAM,EAAE,cAAc,SAAS;EAC/B,IAAI,cAAc,MAChB,OAAO,aAAa,SAAS;CAEjC,GACA,CAAC,CACH;CAEA,QAAQ,UAA4C;EAClD,IAAI,CAAC,WAAW,MAAM,kBACpB;EAEF,IAAI,MAAM,WAAW,MAAM,WAAW,MAAM,QAC1C;EAEF,IAAI,MAAM,IAAI,WAAW,KAAK,MAAM,QAAQ,KAC1C;EAGF,MAAM,SAAS,MAAM;EACrB,IACE,WACC,OAAO,YAAY,WAClB,OAAO,YAAY,cACnB,OAAO,YAAY,YACnB,OAAO,oBAET;EAGF,MAAM,WAAW,YAAY;EAC7B,IAAI,CAAC,UACH;EAGF,MAAM,QAAQ,MAAM,KAClB,SAAS,iBAA8B,uCAAuC,CAChF,EAAE,QAAQ,SAAS,KAAK,QAAQ,sBAAsB,MAAM,QAAQ;EAEpE,IAAI,MAAM,WAAW,GACnB;EAGF,MAAM,QAAQ,SAAS;EACvB,MAAM,UAAU,MAAM,SAAS,MAAM,KAAK,YAAY;EAEtD,IAAI,MAAM,cAAc,MACtB,OAAO,aAAa,MAAM,SAAS;EAErC,MAAM,YAAY,OAAO,iBAAiB;GACxC,MAAM,SAAS;GACf,MAAM,YAAY;EACpB,GAAG,WAAW;EAEd,MAAM,gBAAgB,SAAS;EAC/B,MAAM,eAAe,gBAAgB,MAAM,QAAQ,aAAa,IAAI;EAEpE,IAAI,QAA4B;EAEhC,IAAI,MAAM,OAAO,WAAW,KAAK,eAAe,MAAM,MAAM,GAAG;GAC7D,MAAM,OAAO,MAAM,OAAO;GAC1B,MAAM,aAAa,eAAe;GAClC,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,GAAG;IACxC,MAAM,OAAO,aAAa,KAAK,MAAM;IACrC,IAAI,YAAY,MAAM,IAAK,EAAE,WAAW,IAAI,GAAG;KAC7C,QAAQ,MAAM;KACd;IACF;GACF;EACF,OACE,KAAK,IAAI,IAAI,GAAG,IAAI,MAAM,QAAQ,KAAK,GACrC,IAAI,YAAY,MAAM,EAAG,EAAE,WAAW,MAAM,MAAM,GAAG;GACnD,QAAQ,MAAM;GACd;EACF;EAIJ,IAAI,OAAO;GACT,MAAM,eAAe;GACrB,MAAM,MAAM;EACd;CACF;AACF"}

package/esm/components/MultiSelect/MultiSelect.mjs CHANGED Viewed

@@ -40,7 +40,7 @@ const MultiSelect = genericFactory((_props) => {
 		"InputWrapper",
 		"MultiSelect"
 	], defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, loading, loadingPosition, withPillsReorder, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, size, value, defaultValue, onChange, onKeyDown, variant, data, dropdownOpened, defaultDropdownOpened, onDropdownOpen, onDropdownClose, selectFirstOptionOnChange, selectFirstOptionOnDropdownOpen, onOptionSubmit, comboboxProps, filter, limit, withScrollArea, maxDropdownHeight, floatingHeight, searchValue, defaultSearchValue, onSearchChange, readOnly, disabled, onFocus, onBlur, radius, rightSection, rightSectionWidth, rightSectionPointerEvents, rightSectionProps, leftSection, leftSectionWidth, leftSectionPointerEvents, leftSectionProps, inputContainer, inputWrapperOrder, withAsterisk, labelProps, descriptionProps, errorProps, wrapperProps, description, label, error, maxValues, searchable, nothingFoundMessage, withCheckIcon, withAlignedLabels, checkIconPosition, hidePickedOptions, withErrorStyles, name, form, id, clearable, clearSectionMode, clearButtonProps, hiddenInputProps, placeholder, hiddenInputValuesDivider, required, mod, renderOption, renderPill, onRemove, onClear, onMaxValues, scrollAreaProps, chevronColor, attributes, clearSearchOnChange, openOnFocus, loading, loadingPosition, withPillsReorder, ...others } = props;
 	const _id = useId$1(id);
 	const parsedData = getParsedComboboxData(data);
 	const optionsLockup = getOptionsLockup(parsedData);
@@ -163,6 +163,7 @@ const MultiSelect = genericFactory((_props) => {
 		readOnly,
 		__staticSelector: "MultiSelect",
 		attributes,
+		floatingHeight,
 		onOptionSubmit: (val) => {
 			onOptionSubmit?.(val);
 			if (clearSearchOnChange) handleSearchChange("");

package/esm/components/MultiSelect/MultiSelect.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"MultiSelect.mjs","names":["useId"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxRenderPillInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n usePillsReorder,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nconst clearSectionOffset: Record<string, number> = {\n xs: 41,\n sm: 50,\n md: 60,\n lg: 72,\n xl: 89,\n};\n\nexport type MultiSelectStylesNames =\n \| __InputStylesNames\n \| ComboboxLikeStylesNames\n \| 'pill'\n \| 'pillsList'\n \| 'inputField';\n\nexport interface MultiSelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<MultiSelectFactory>,\n ElementProps<'input', 'size' \| 'value' \| 'defaultValue' \| 'onChange'> {\n /** Controlled component value /\n value?: Value[];\n\n /* Uncontrolled component default value /\n defaultValue?: Value[];\n\n /* Called when value changes /\n onChange?: (value: Value[]) => void;\n\n /* Called with `value` of the removed item /\n onRemove?: (value: Value) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Called when user attemps to select more values than allowed /\n onMaxValues?: () => void;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Maximum number of values, no limit if not set /\n maxValues?: number;\n\n /* Allows searching through options by user input @default false /\n searchable?: boolean;\n\n /* Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. /\n nothingFoundMessage?: React.ReactNode;\n\n /* If set, the check icon is displayed near the selected option label @default true /\n withCheckIcon?: boolean;\n\n /* If set, unchecked labels are aligned with checked ones @default false /\n withAlignedLabels?: boolean;\n\n /* Position of the checkmark icon shown next to selected options in the dropdown @default 'left' /\n checkIconPosition?: 'left' \| 'right';\n\n /* When enabled, selected options are hidden from the dropdown list @default false /\n hidePickedOptions?: boolean;\n\n /* When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* Divider used to separate values in the hidden input `value` attribute @default ',' /\n hiddenInputValuesDivider?: string;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n /* A function to render content of the pill /\n renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* Controls color of the default chevron /\n chevronColor?: MantineColor;\n\n /* Clear search value when item is selected @default true /\n clearSearchOnChange?: boolean;\n\n /* Controls whether dropdown opens when the input receives focus @default true /\n openOnFocus?: boolean;\n\n /* If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n withPillsReorder?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n props: MultiSelectProps;\n ref: HTMLInputElement;\n stylesNames: MultiSelectStylesNames;\n signature: <Value extends Primitive = string>(\n props: MultiSelectProps<Value>\n ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n maxValues: Infinity,\n withCheckIcon: true,\n checkIconPosition: 'left',\n hiddenInputValuesDivider: ',',\n clearSearchOnChange: true,\n openOnFocus: true,\n size: 'sm',\n} satisfies Partial<MultiSelectProps>;\n\nexport const MultiSelect = genericFactory<MultiSelectFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'MultiSelect'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n variant,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n onFocus,\n onBlur,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n labelProps,\n descriptionProps,\n errorProps,\n wrapperProps,\n description,\n label,\n error,\n maxValues,\n searchable,\n nothingFoundMessage,\n withCheckIcon,\n withAlignedLabels,\n checkIconPosition,\n hidePickedOptions,\n withErrorStyles,\n name,\n form,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n placeholder,\n hiddenInputValuesDivider,\n required,\n mod,\n renderOption,\n renderPill,\n onRemove,\n onClear,\n onMaxValues,\n scrollAreaProps,\n chevronColor,\n attributes,\n clearSearchOnChange,\n openOnFocus,\n loading,\n loadingPosition,\n withPillsReorder,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n value: _value,\n onChange: setValue,\n enabled: withPillsReorder && !disabled && !readOnly,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles<MultiSelectFactory>({\n name: 'MultiSelect',\n classes: {} as any,\n props: props as any,\n classNames,\n styles,\n unstyled,\n attributes,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MultiSelectFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (event.key === ' ' && !searchable) {\n event.preventDefault();\n combobox.toggleDropdown();\n }\n\n if (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n\n handleInputKeyDown(event);\n };\n\n const values = _value.map((item, index) => {\n const optionData = optionsLockup[`${item}`] \|\| retainedSelectedOptions.current[`${item}`];\n const reorderProps = getPillProps(index);\n\n if (renderPill) {\n return (\n <Fragment key={`${item}-${index}`}>\n {renderPill({\n option: optionData,\n value: item,\n onRemove: () => {\n setValue(_value.filter((i) => item !== i));\n onRemove?.(item);\n },\n disabled,\n reorderProps,\n })}\n </Fragment>\n );\n }\n\n return (\n <Pill\n key={`${item}-${index}`}\n withRemoveButton={!readOnly && !optionsLockup[`${item}`]?.disabled}\n onRemove={() => {\n setValue(_value.filter((i) => item !== i));\n onRemove?.(item);\n }}\n unstyled={unstyled}\n disabled={disabled}\n {...getStyles('pill')}\n {...reorderProps}\n >\n {optionData?.label \|\| item}\n </Pill>\n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _searchValue]);\n\n useEffect(() => {\n _value.forEach((val) => {\n if (`${val}` in optionsLockup) {\n retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];\n }\n });\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n onClear?.();\n setValue([]);\n handleSearchChange('');\n }}\n />\n );\n\n const filteredData = filterPickedValues({ data: parsedData, value: _value });\n const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n const pillsListStyle = _clearable\n ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm }\n : undefined;\n\n return (\n <>\n <Combobox\n store={combobox}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n readOnly={readOnly}\n __staticSelector=\"MultiSelect\"\n attributes={attributes}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n if (clearSearchOnChange) {\n handleSearchChange('');\n }\n combobox.updateSelectedOptionIndex('selected');\n\n if (_value.includes(optionsLockup[`${val}`].value as any)) {\n setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));\n onRemove?.(optionsLockup[`${val}`].value as any);\n } else if (_value.length < maxValues) {\n setValue([..._value, optionsLockup[`${val}`].value] as any);\n } else {\n onMaxValues?.();\n }\n }}\n {...comboboxProps}\n >\n <Combobox.DropdownTarget>\n <PillsInput\n {...styleProps}\n __staticSelector=\"MultiSelect\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n className={className}\n style={style}\n variant={variant}\n disabled={disabled}\n radius={radius}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents \|\| 'none'}\n rightSectionWidth={rightSectionWidth}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n loading={loading}\n loadingPosition={loadingPosition}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n withErrorStyles={withErrorStyles}\n __stylesApiProps={{\n ...props,\n rightSectionPointerEvents: rightSectionPointerEvents \|\| 'none',\n multiline: true,\n }}\n pointer={!searchable}\n onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n data-expanded={combobox.dropdownOpened \|\| undefined}\n id={_id}\n required={required}\n mod={mod}\n attributes={attributes}\n >\n <Pill.Group\n attributes={attributes}\n disabled={disabled}\n unstyled={unstyled}\n {...getStyles('pillsList', { style: pillsListStyle })}\n {...getListProps()}\n >\n {values}\n <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n <PillsInput.Field\n {...rest}\n id={_id}\n placeholder={placeholder}\n type={!searchable && !placeholder ? 'hidden' : 'visible'}\n {...getStyles('inputField')}\n unstyled={unstyled}\n onFocus={(event) => {\n onFocus?.(event);\n openOnFocus && searchable && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n combobox.closeDropdown();\n handleSearchChange('');\n }}\n onKeyDown={handleInputKeydown}\n value={_searchValue}\n onChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n searchable && combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n disabled={disabled}\n readOnly={readOnly \|\| !searchable}\n pointer={!searchable}\n />\n </Combobox.EventsTarget>\n </Pill.Group>\n </PillsInput>\n </Combobox.DropdownTarget>\n\n <OptionsDropdown\n data={hidePickedOptions ? filteredData : parsedData}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={_searchValue}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={searchable}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={label ? `${_id}-label` : undefined}\n aria-label={label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n valuesDivider={hiddenInputValuesDivider}\n value={_value}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nMultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nMultiSelect.displayName = '@mantine/core/MultiSelect';\n\nexport namespace MultiSelect {\n export type Props<Value extends Primitive = string> = MultiSelectProps<Value>;\n export type StylesNames = MultiSelectStylesNames;\n export type Factory = MultiSelectFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,MAAM,qBAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AA8GA,MAAM,eAAe;CACnB,WAAW;CACX,eAAe;CACf,mBAAmB;CACnB,0BAA0B;CAC1B,qBAAqB;CACrB,aAAa;CACb,MAAM;AACR;AAEA,MAAa,cAAc,gBAAoC,WAAW;CACxE,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAa,GAAG,cAAc,MAAM;CACrF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,aACA,oBACA,gBACA,UACA,UACA,SACA,QACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,YACA,kBACA,YACA,cACA,aACA,OACA,OACA,WACA,YACA,qBACA,eACA,mBACA,mBACA,mBACA,iBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,aACA,0BACA,UACA,KACA,cACA,YACA,UACA,SACA,aACA,iBACA,cACA,YACA,qBACA,aACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,0BAA0B,OAAgD,CAAC,CAAC;CAElF,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,uBAAuB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"}
1	+ {"version":3,"file":"MultiSelect.mjs","names":["useId"],"sources":["../../../src/components/MultiSelect/MultiSelect.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n Factory,\n genericFactory,\n MantineColor,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxRenderPillInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n usePillsReorder,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedValues } from './filter-picked-values';\n\nconst clearSectionOffset: Record<string, number> = {\n xs: 41,\n sm: 50,\n md: 60,\n lg: 72,\n xl: 89,\n};\n\nexport type MultiSelectStylesNames =\n \| __InputStylesNames\n \| ComboboxLikeStylesNames\n \| 'pill'\n \| 'pillsList'\n \| 'inputField';\n\nexport interface MultiSelectProps<Value extends Primitive = string>\n extends\n BoxProps,\n __BaseInputProps,\n ComboboxLikeProps<Value>,\n StylesApiProps<MultiSelectFactory>,\n ElementProps<'input', 'size' \| 'value' \| 'defaultValue' \| 'onChange'> {\n /** Controlled component value /\n value?: Value[];\n\n /* Uncontrolled component default value /\n defaultValue?: Value[];\n\n /* Called when value changes /\n onChange?: (value: Value[]) => void;\n\n /* Called with `value` of the removed item /\n onRemove?: (value: Value) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Called when user attemps to select more values than allowed /\n onMaxValues?: () => void;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Maximum number of values, no limit if not set /\n maxValues?: number;\n\n /* Allows searching through options by user input @default false /\n searchable?: boolean;\n\n /* Message displayed when no options match the search query (when searchable is enabled) or when the data array is empty. If not set, the dropdown will be hidden instead. /\n nothingFoundMessage?: React.ReactNode;\n\n /* If set, the check icon is displayed near the selected option label @default true /\n withCheckIcon?: boolean;\n\n /* If set, unchecked labels are aligned with checked ones @default false /\n withAlignedLabels?: boolean;\n\n /* Position of the checkmark icon shown next to selected options in the dropdown @default 'left' /\n checkIconPosition?: 'left' \| 'right';\n\n /* When enabled, selected options are hidden from the dropdown list @default false /\n hidePickedOptions?: boolean;\n\n /* When enabled, displays a clear button to remove all selected values (hidden when component is empty, disabled, or read-only) @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* Divider used to separate values in the hidden input `value` attribute @default ',' /\n hiddenInputValuesDivider?: string;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (item: ComboboxLikeRenderOptionInput<ComboboxItem<Value>>) => React.ReactNode;\n\n /* A function to render content of the pill /\n renderPill?: (props: ComboboxRenderPillInput<Value>) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* Controls color of the default chevron /\n chevronColor?: MantineColor;\n\n /* Clear search value when item is selected @default true /\n clearSearchOnChange?: boolean;\n\n /* Controls whether dropdown opens when the input receives focus @default true /\n openOnFocus?: boolean;\n\n /* If set, selected values can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n withPillsReorder?: boolean;\n}\n\nexport type MultiSelectFactory = Factory<{\n props: MultiSelectProps;\n ref: HTMLInputElement;\n stylesNames: MultiSelectStylesNames;\n signature: <Value extends Primitive = string>(\n props: MultiSelectProps<Value>\n ) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n maxValues: Infinity,\n withCheckIcon: true,\n checkIconPosition: 'left',\n hiddenInputValuesDivider: ',',\n clearSearchOnChange: true,\n openOnFocus: true,\n size: 'sm',\n} satisfies Partial<MultiSelectProps>;\n\nexport const MultiSelect = genericFactory<MultiSelectFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'MultiSelect'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n variant,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n floatingHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n onFocus,\n onBlur,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n labelProps,\n descriptionProps,\n errorProps,\n wrapperProps,\n description,\n label,\n error,\n maxValues,\n searchable,\n nothingFoundMessage,\n withCheckIcon,\n withAlignedLabels,\n checkIconPosition,\n hidePickedOptions,\n withErrorStyles,\n name,\n form,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n placeholder,\n hiddenInputValuesDivider,\n required,\n mod,\n renderOption,\n renderPill,\n onRemove,\n onClear,\n onMaxValues,\n scrollAreaProps,\n chevronColor,\n attributes,\n clearSearchOnChange,\n openOnFocus,\n loading,\n loadingPosition,\n withPillsReorder,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const retainedSelectedOptions = useRef<Record<string, ComboboxItem<Primitive>>>({});\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n value: _value,\n onChange: setValue,\n enabled: withPillsReorder && !disabled && !readOnly,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles<MultiSelectFactory>({\n name: 'MultiSelect',\n classes: {} as any,\n props: props as any,\n classNames,\n styles,\n unstyled,\n attributes,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<MultiSelectFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (event.defaultPrevented) {\n return;\n }\n\n if (event.key === ' ' && !searchable) {\n event.preventDefault();\n combobox.toggleDropdown();\n }\n\n if (event.key === 'Backspace' && _searchValue.length === 0 && _value.length > 0) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n\n handleInputKeyDown(event);\n };\n\n const values = _value.map((item, index) => {\n const optionData = optionsLockup[`${item}`] \|\| retainedSelectedOptions.current[`${item}`];\n const reorderProps = getPillProps(index);\n\n if (renderPill) {\n return (\n <Fragment key={`${item}-${index}`}>\n {renderPill({\n option: optionData,\n value: item,\n onRemove: () => {\n setValue(_value.filter((i) => item !== i));\n onRemove?.(item);\n },\n disabled,\n reorderProps,\n })}\n </Fragment>\n );\n }\n\n return (\n <Pill\n key={`${item}-${index}`}\n withRemoveButton={!readOnly && !optionsLockup[`${item}`]?.disabled}\n onRemove={() => {\n setValue(_value.filter((i) => item !== i));\n onRemove?.(item);\n }}\n unstyled={unstyled}\n disabled={disabled}\n {...getStyles('pill')}\n {...reorderProps}\n >\n {optionData?.label \|\| item}\n </Pill>\n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _searchValue]);\n\n useEffect(() => {\n _value.forEach((val) => {\n if (`${val}` in optionsLockup) {\n retainedSelectedOptions.current[`${val}`] = optionsLockup[`${val}`];\n }\n });\n }, [optionsLockup, _value]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n onClear?.();\n setValue([]);\n handleSearchChange('');\n }}\n />\n );\n\n const filteredData = filterPickedValues({ data: parsedData, value: _value });\n const _clearable = clearable && _value.length > 0 && !disabled && !readOnly;\n const pillsListStyle = _clearable\n ? { paddingInlineEnd: clearSectionOffset[size] ?? clearSectionOffset.sm }\n : undefined;\n\n return (\n <>\n <Combobox\n store={combobox}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n readOnly={readOnly}\n __staticSelector=\"MultiSelect\"\n attributes={attributes}\n floatingHeight={floatingHeight}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val as any);\n if (clearSearchOnChange) {\n handleSearchChange('');\n }\n combobox.updateSelectedOptionIndex('selected');\n\n if (_value.includes(optionsLockup[`${val}`].value as any)) {\n setValue(_value.filter((v) => v !== optionsLockup[`${val}`].value));\n onRemove?.(optionsLockup[`${val}`].value as any);\n } else if (_value.length < maxValues) {\n setValue([..._value, optionsLockup[`${val}`].value] as any);\n } else {\n onMaxValues?.();\n }\n }}\n {...comboboxProps}\n >\n <Combobox.DropdownTarget>\n <PillsInput\n {...styleProps}\n __staticSelector=\"MultiSelect\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n className={className}\n style={style}\n variant={variant}\n disabled={disabled}\n radius={radius}\n __defaultRightSection={\n <Combobox.Chevron\n size={size}\n error={error}\n unstyled={unstyled}\n color={chevronColor}\n />\n }\n __clearSection={clearButton}\n __clearable={_clearable}\n __clearSectionMode={clearSectionMode}\n rightSection={rightSection}\n rightSectionPointerEvents={rightSectionPointerEvents \|\| 'none'}\n rightSectionWidth={rightSectionWidth}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n loading={loading}\n loadingPosition={loadingPosition}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n withErrorStyles={withErrorStyles}\n __stylesApiProps={{\n ...props,\n rightSectionPointerEvents: rightSectionPointerEvents \|\| 'none',\n multiline: true,\n }}\n pointer={!searchable}\n onClick={() => (searchable ? combobox.openDropdown() : combobox.toggleDropdown())}\n data-expanded={combobox.dropdownOpened \|\| undefined}\n id={_id}\n required={required}\n mod={mod}\n attributes={attributes}\n >\n <Pill.Group\n attributes={attributes}\n disabled={disabled}\n unstyled={unstyled}\n {...getStyles('pillsList', { style: pillsListStyle })}\n {...getListProps()}\n >\n {values}\n <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n <PillsInput.Field\n {...rest}\n id={_id}\n placeholder={placeholder}\n type={!searchable && !placeholder ? 'hidden' : 'visible'}\n {...getStyles('inputField')}\n unstyled={unstyled}\n onFocus={(event) => {\n onFocus?.(event);\n openOnFocus && searchable && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n combobox.closeDropdown();\n handleSearchChange('');\n }}\n onKeyDown={handleInputKeydown}\n value={_searchValue}\n onChange={(event) => {\n handleSearchChange(event.currentTarget.value);\n searchable && combobox.openDropdown();\n selectFirstOptionOnChange && combobox.selectFirstOption();\n }}\n disabled={disabled}\n readOnly={readOnly \|\| !searchable}\n pointer={!searchable}\n />\n </Combobox.EventsTarget>\n </Pill.Group>\n </PillsInput>\n </Combobox.DropdownTarget>\n\n <OptionsDropdown\n data={hidePickedOptions ? filteredData : parsedData}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={_searchValue}\n limit={limit}\n hiddenWhenEmpty={!nothingFoundMessage}\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n filterOptions={searchable}\n value={_value}\n checkIconPosition={checkIconPosition}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n nothingFoundMessage={nothingFoundMessage}\n unstyled={unstyled}\n labelId={label ? `${_id}-label` : undefined}\n aria-label={label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n valuesDivider={hiddenInputValuesDivider}\n value={_value}\n form={form}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nMultiSelect.classes = { ...InputBase.classes, ...Combobox.classes };\nMultiSelect.displayName = '@mantine/core/MultiSelect';\n\nexport namespace MultiSelect {\n export type Props<Value extends Primitive = string> = MultiSelectProps<Value>;\n export type StylesNames = MultiSelectStylesNames;\n export type Factory = MultiSelectFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAyCA,MAAM,qBAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AA8GA,MAAM,eAAe;CACnB,WAAW;CACX,eAAe;CACf,mBAAmB;CACnB,0BAA0B;CAC1B,qBAAqB;CACrB,aAAa;CACb,MAAM;AACR;AAEA,MAAa,cAAc,gBAAoC,WAAW;CACxE,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAa,GAAG,cAAc,MAAM;CACrF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,gBACA,aACA,oBACA,gBACA,UACA,UACA,SACA,QACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,YACA,kBACA,YACA,cACA,aACA,OACA,OACA,WACA,YACA,qBACA,eACA,mBACA,mBACA,mBACA,iBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,aACA,0BACA,UACA,KACA,cACA,YACA,UACA,SACA,aACA,iBACA,cACA,YACA,qBACA,aACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,0BAA0B,OAAgD,CAAC,CAAC;CAElF,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,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"}

package/esm/components/OverflowList/OverflowList.mjs CHANGED Viewed

@@ -8,7 +8,7 @@ import { Box } from "../../core/Box/Box.mjs";
 import { getRowPositionsData } from "./get-row-position-data.mjs";
 import { useDimensions } from "./use-dimensions.mjs";
 import OverflowList_module_default from "./OverflowList.module.mjs";
-import { cloneElement, useRef, useState } from "react";
+import { cloneElement, useMemo, useRef, useState } from "react";
 import { useIsomorphicEffect, useMergedRef } from "@mantine/hooks";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/OverflowList/OverflowList.tsx
@@ -17,9 +17,15 @@ const defaultProps = {
 	maxVisibleItems: Infinity
 };
 const varsResolver = createVarsResolver((_, { gap }) => ({ root: { "--ol-gap": getSpacing(gap) } }));
+function getDataSignature(data, getItemKey) {
+	return data.map((item, index) => {
+		if (getItemKey) return getItemKey(item, index);
+		return item !== null && (typeof item === "object" || typeof item === "function") ? index : String(item);
+	}).join("\0");
+}
 const OverflowList = genericFactory((_props) => {
 	const props = useProps("OverflowList", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, attributes, data, renderOverflow, renderItem, maxRows, maxVisibleItems, ref, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, attributes, data, renderOverflow, renderItem, maxRows, maxVisibleItems, collapseFrom, getItemKey, ref, ...others } = props;
 	const getStyles = useStyles({
 		name: "OverflowList",
 		classes: OverflowList_module_default,
@@ -39,7 +45,10 @@ const OverflowList = genericFactory((_props) => {
 	const containerRef = useRef(null);
 	const rootRef = useMergedRef(containerRef, ref);
 	const finalVisibleCount = visibleCount - subtractCount;
-	const overflowElement = data.length - finalVisibleCount > 0 && phase !== "measuring" ? renderOverflow?.(data.slice(finalVisibleCount)) : null;
+	const showOverflow = data.length - finalVisibleCount > 0 && phase !== "measuring";
+	const isCollapseStart = collapseFrom === "start";
+	const overflowItems = isCollapseStart ? data.slice(0, data.length - finalVisibleCount) : data.slice(finalVisibleCount);
+	const overflowElement = showOverflow ? renderOverflow?.(overflowItems) : null;
 	const _overflowRef = useRef(null);
 	const overflowRef = useMergedRef(_overflowRef, overflowElement?.ref);
 	const dimensions = useDimensions(containerRef);
@@ -47,7 +56,11 @@ const OverflowList = genericFactory((_props) => {
 		setPhase("measuring");
 		setVisibleCount(data.length);
 		setSubtractCount(0);
-	}, [data.length, maxRows]);
+	}, [
+		useMemo(() => getDataSignature(data, getItemKey), [data, getItemKey]),
+		maxRows,
+		collapseFrom
+	]);
 	useIsomorphicEffect(() => {
 		if (phase === "measuring") {
 			countVisibleItems();
@@ -65,12 +78,41 @@ const OverflowList = genericFactory((_props) => {
 			setSubtractCount(0);
 		}
 	}, [dimensions]);
+	const fitsInRows = (itemWidths, containerWidth, columnGap, startIndex = 0) => {
+		let rows = 1;
+		let rowWidth = 0;
+		for (let i = startIndex; i < itemWidths.length; i += 1) {
+			const width = itemWidths[i];
+			const needed = rowWidth > 0 ? width + columnGap : width;
+			if (rowWidth + needed > containerWidth && rowWidth > 0) {
+				rows++;
+				if (rows > maxRows) return false;
+				rowWidth = width;
+			} else rowWidth += needed;
+		}
+		return true;
+	};
 	const countVisibleItems = () => {
 		const rowData = getRowPositionsData(containerRef, _overflowRef);
 		if (!rowData) return;
+		const container = containerRef.current;
+		if (!container) return;
+		if (isCollapseStart) {
+			const containerWidth = container.getBoundingClientRect().width;
+			const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;
+			const widths = rowData.children.map((child) => child.getBoundingClientRect().width);
+			let count = 0;
+			for (let i = widths.length - 1; i >= 0; i--) {
+				if (!fitsInRows(widths, containerWidth, columnGap, i)) break;
+				count = widths.length - i;
+			}
+			count = Math.min(count, maxVisibleItems);
+			setVisibleCount(count);
+			return;
+		}
 		if (data.length === 1) {
 			const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;
-			const containerWidth = containerRef.current?.getBoundingClientRect().width ?? 0;
+			const containerWidth = container.getBoundingClientRect().width;
 			if ((itemRef?.getBoundingClientRect().width ?? 0) > containerWidth) setVisibleCount(0);
 			else setVisibleCount(1);
 			return;
@@ -86,6 +128,17 @@ const OverflowList = genericFactory((_props) => {
 		const rowData = getRowPositionsData(containerRef, _overflowRef);
 		if (!rowData) return false;
 		const { rowPositions, itemsSizesMap } = rowData;
+		if (isCollapseStart) {
+			const container = containerRef.current;
+			if (!container) return false;
+			const containerWidth = container.getBoundingClientRect().width;
+			const columnGap = parseFloat(getComputedStyle(container).columnGap) || 0;
+			if (!fitsInRows([_overflowRef.current.getBoundingClientRect().width, ...rowData.children.map((child) => child.getBoundingClientRect().width)], containerWidth, columnGap)) {
+				setSubtractCount((c) => c + 1);
+				return true;
+			}
+			return false;
+		}
 		const overflowRect = _overflowRef.current.getBoundingClientRect();
 		if (overflowRect.top + overflowRect.height / 2 > itemsSizesMap[rowPositions[rowPositions.length - 1]].bottom) {
 			setSubtractCount((c) => c + 1);
@@ -95,15 +148,21 @@ const OverflowList = genericFactory((_props) => {
 	};
 	const clonedOverflowElement = overflowElement ? cloneElement(overflowElement, { ref: overflowRef }) : null;
 	let finalItems = data;
-	if (maxVisibleItems) finalItems = finalItems.slice(0, maxVisibleItems);
+	if (maxVisibleItems) finalItems = isCollapseStart ? finalItems.slice(-maxVisibleItems) : finalItems.slice(0, maxVisibleItems);
+	const indexOffset = isCollapseStart ? data.length - finalItems.length : 0;
 	return /* @__PURE__ */ jsxs(Box, {
 		ref: rootRef,
 		...getStyles("root"),
 		...others,
-		children: [finalItems.map((item, index) => {
-			if (!(phase === "measuring" || index < finalVisibleCount)) return null;
-			return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem(item, index) }, index);
-		}), clonedOverflowElement]
+		children: [
+			isCollapseStart && clonedOverflowElement,
+			finalItems.map((item, index) => {
+				if (!(phase === "measuring" || (isCollapseStart ? index >= finalItems.length - finalVisibleCount : index < finalVisibleCount))) return null;
+				const dataIndex = indexOffset + index;
+				return /* @__PURE__ */ jsx(Fragment$1, { children: renderItem(item, dataIndex) }, dataIndex);
+			}),
+			!isCollapseStart && clonedOverflowElement
+		]
 	});
 });
 OverflowList.displayName = "@mantine/core/OverflowList";

package/esm/components/OverflowList/OverflowList.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OverflowList.mjs","names":["Fragment","classes"],"sources":["../../../src/components/OverflowList/OverflowList.tsx"],"sourcesContent":["// Originally based on https://github.com/Eliav2/react-responsive-overflow-list (MIT License)\n// Contains the modified version adapted for Mantine\nimport { cloneElement, Ref, useRef, useState } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n Factory,\n genericFactory,\n getSpacing,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { getRowPositionsData } from './get-row-position-data';\nimport { useDimensions } from './use-dimensions';\nimport classes from './OverflowList.module.css';\n\nexport type OverflowListStylesNames = 'root';\nexport type OverflowListCssVariables = {\n root: '--ol-gap';\n};\n\nexport interface OverflowListProps<T = any>\n extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {\n /** Array of items to display /\n data: T[];\n\n /* Function to render item /\n renderItem: (item: T, index: number) => React.ReactNode;\n\n /* Function to render hidden items /\n renderOverflow: (items: T[]) => React.ReactNode;\n\n /* Number of rows to display @default 1 /\n maxRows?: number;\n\n /* Maximum number of visible items @default Infinity /\n maxVisibleItems?: number;\n\n /* Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' */\n gap?: MantineSpacing;\n\n ref?: Ref<HTMLDivElement>;\n}\n\nexport type OverflowListFactory = Factory<{\n props: OverflowListProps<any>;\n ref: HTMLDivElement;\n stylesNames: OverflowListStylesNames;\n vars: OverflowListCssVariables;\n signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n maxRows: 1,\n maxVisibleItems: Infinity,\n} satisfies Partial<OverflowListProps<any>>;\n\nconst varsResolver = createVarsResolver<OverflowListFactory>((_, { gap }) => ({\n root: {\n '--ol-gap': getSpacing(gap),\n },\n}));\n\nexport const OverflowList = genericFactory<OverflowListFactory>((_props) => {\n const props = useProps('OverflowList', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n data,\n renderOverflow,\n renderItem,\n maxRows,\n maxVisibleItems,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<OverflowListFactory>({\n name: 'OverflowList',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const [visibleCount, setVisibleCount] = useState(data.length);\n const [subtractCount, setSubtractCount] = useState(0);\n const [phase, setPhase] = useState<'normal' \| 'measuring' \| 'measuring-overflow-indicator'>(\n 'normal'\n );\n\n const containerRef = useRef<HTMLElement>(null);\n const rootRef = useMergedRef(containerRef, ref);\n const finalVisibleCount = visibleCount - subtractCount;\n const overflowCount = data.length - finalVisibleCount;\n const showOverflow = overflowCount > 0 && phase !== 'measuring';\n const overflowElement = showOverflow ? renderOverflow?.(data.slice(finalVisibleCount)) : null;\n\n const _overflowRef = useRef<HTMLElement>(null);\n const overflowRef = useMergedRef(_overflowRef, (overflowElement as any)?.ref);\n const dimensions = useDimensions(containerRef);\n\n useIsomorphicEffect(() => {\n setPhase('measuring');\n setVisibleCount(data.length);\n setSubtractCount(0);\n }, [data.length, maxRows]);\n\n useIsomorphicEffect(() => {\n if (phase === 'measuring') {\n countVisibleItems();\n setPhase('measuring-overflow-indicator');\n }\n }, [phase]);\n\n useIsomorphicEffect(() => {\n if (phase === 'measuring-overflow-indicator') {\n const updateWasNeeded = updateOverflowIndicator();\n if (!updateWasNeeded) {\n setPhase('normal');\n }\n }\n }, [phase, subtractCount]);\n\n useIsomorphicEffect(() => {\n if (phase === 'normal') {\n setPhase('measuring');\n setSubtractCount(0);\n }\n }, [dimensions]);\n\n const countVisibleItems = () => {\n const rowData = getRowPositionsData(containerRef, _overflowRef);\n if (!rowData) {\n return;\n }\n\n if (data.length === 1) {\n const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;\n const containerWidth = containerRef.current?.getBoundingClientRect().width ?? 0;\n const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;\n\n if (itemWidth > containerWidth) {\n setVisibleCount(0);\n } else {\n setVisibleCount(1);\n }\n\n return;\n }\n\n const visibleRowPositions = rowData.rowPositions.slice(0, maxRows);\n\n let fittingCount = visibleRowPositions.reduce((acc, position) => {\n return acc + rowData.itemsSizesMap[position].elements.size;\n }, 0);\n\n fittingCount = Math.min(fittingCount, maxVisibleItems);\n setVisibleCount(fittingCount);\n };\n\n const updateOverflowIndicator = () => {\n if (!_overflowRef.current) {\n return false;\n }\n const rowData = getRowPositionsData(containerRef, _overflowRef);\n if (!rowData) {\n return false;\n }\n\n const { rowPositions, itemsSizesMap } = rowData;\n\n const overflowRect = _overflowRef.current.getBoundingClientRect();\n const overflowMiddleY = overflowRect.top + overflowRect.height / 2;\n const lastRowTop = rowPositions[rowPositions.length - 1];\n const lastRow = itemsSizesMap[lastRowTop];\n\n if (overflowMiddleY > lastRow.bottom) {\n setSubtractCount((c) => c + 1);\n return true;\n }\n\n return false;\n };\n\n const clonedOverflowElement = overflowElement\n ? cloneElement(overflowElement as React.ReactElement<any>, { ref: overflowRef })\n : null;\n\n let finalItems = data;\n if (maxVisibleItems) {\n finalItems = finalItems.slice(0, maxVisibleItems);\n }\n\n return (\n <Box ref={rootRef} {...getStyles('root')} {...others}>\n {finalItems.map((item, index) => {\n const isVisible = phase === 'measuring' \|\| index < finalVisibleCount;\n if (!isVisible) {\n return null;\n }\n const itemComponent = renderItem(item, index);\n\n return <Fragment key={index}>{itemComponent}</Fragment>;\n })}\n\n {clonedOverflowElement}\n </Box>\n );\n});\n\nOverflowList.displayName = '@mantine/core/OverflowList';\nOverflowList.classes = classes;\nOverflowList.varsResolver = varsResolver;\n\nexport namespace OverflowList {\n export type Props = OverflowListProps;\n export type Factory = OverflowListFactory;\n export type StylesNames = OverflowListStylesNames;\n export type CssVariables = OverflowListCssVariables;\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"OverflowList.mjs","names":["Fragment","classes"],"sources":["../../../src/components/OverflowList/OverflowList.tsx"],"sourcesContent":["// Originally based on https://github.com/Eliav2/react-responsive-overflow-list (MIT License)\n// Contains the modified version adapted for Mantine\nimport { cloneElement, useMemo, useRef, useState } from 'react';\nimport { Fragment } from 'react/jsx-runtime';\nimport { useIsomorphicEffect, useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n Factory,\n genericFactory,\n getSpacing,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { getRowPositionsData } from './get-row-position-data';\nimport { useDimensions } from './use-dimensions';\nimport classes from './OverflowList.module.css';\n\nexport type OverflowListStylesNames = 'root';\nexport type OverflowListCssVariables = {\n root: '--ol-gap';\n};\n\nexport interface OverflowListProps<T = any>\n extends BoxProps, StylesApiProps<OverflowListFactory>, ElementProps<'div', 'children'> {\n /** Array of items to display /\n data: T[];\n\n /* Function to render item /\n renderItem: (item: T, index: number) => React.ReactNode;\n\n /* Function to render hidden items /\n renderOverflow: (items: T[]) => React.ReactNode;\n\n /* Number of rows to display @default 1 /\n maxRows?: number;\n\n /* Maximum number of visible items @default Infinity /\n maxVisibleItems?: number;\n\n /* Key of `theme.spacing` or any valid CSS value for `gap`, numbers are converted to rem @default 'xs' /\n gap?: MantineSpacing;\n\n /* Direction from which items are collapsed when they overflow, `'end'` collapses last items, `'start'` collapses first items @default 'end' /\n collapseFrom?: 'start' \| 'end';\n\n /* A function to resolve a unique key for each item. Used to detect when the contents of `data`\n * change (for example when items are reordered while the length stays the same) so the\n * visible/overflow split can be recomputed. Required to detect reordering when `data` contains\n * objects; for primitive items (strings, numbers) the item value is used by default. */\n getItemKey?: (item: T, index: number) => React.Key;\n}\n\nexport type OverflowListFactory = Factory<{\n props: OverflowListProps<any>;\n ref: HTMLDivElement;\n stylesNames: OverflowListStylesNames;\n vars: OverflowListCssVariables;\n signature: <T = any>(props: OverflowListProps<T>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n maxRows: 1,\n maxVisibleItems: Infinity,\n} satisfies Partial<OverflowListProps<any>>;\n\nconst varsResolver = createVarsResolver<OverflowListFactory>((_, { gap }) => ({\n root: {\n '--ol-gap': getSpacing(gap),\n },\n}));\n\nfunction getDataSignature<T>(\n data: T[],\n getItemKey: ((item: T, index: number) => React.Key) \| undefined\n): string {\n return data\n .map((item, index) => {\n if (getItemKey) {\n return getItemKey(item, index);\n }\n return item !== null && (typeof item === 'object' \|\| typeof item === 'function')\n ? index\n : String(item);\n })\n .join('\\u0000');\n}\n\nexport const OverflowList = genericFactory<OverflowListFactory>((_props) => {\n const props = useProps('OverflowList', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n attributes,\n data,\n renderOverflow,\n renderItem,\n maxRows,\n maxVisibleItems,\n collapseFrom,\n getItemKey,\n ref,\n ...others\n } = props;\n\n const getStyles = useStyles<OverflowListFactory>({\n name: 'OverflowList',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const [visibleCount, setVisibleCount] = useState(data.length);\n const [subtractCount, setSubtractCount] = useState(0);\n const [phase, setPhase] = useState<'normal' \| 'measuring' \| 'measuring-overflow-indicator'>(\n 'normal'\n );\n\n const containerRef = useRef<HTMLElement>(null);\n const rootRef = useMergedRef(containerRef, ref);\n const finalVisibleCount = visibleCount - subtractCount;\n const overflowCount = data.length - finalVisibleCount;\n const showOverflow = overflowCount > 0 && phase !== 'measuring';\n const isCollapseStart = collapseFrom === 'start';\n const overflowItems = isCollapseStart\n ? data.slice(0, data.length - finalVisibleCount)\n : data.slice(finalVisibleCount);\n const overflowElement = showOverflow ? renderOverflow?.(overflowItems) : null;\n\n const _overflowRef = useRef<HTMLElement>(null);\n const overflowRef = useMergedRef(_overflowRef, (overflowElement as any)?.ref);\n const dimensions = useDimensions(containerRef);\n const dataKey = useMemo(() => getDataSignature(data, getItemKey), [data, getItemKey]);\n\n useIsomorphicEffect(() => {\n setPhase('measuring');\n setVisibleCount(data.length);\n setSubtractCount(0);\n }, [dataKey, maxRows, collapseFrom]);\n\n useIsomorphicEffect(() => {\n if (phase === 'measuring') {\n countVisibleItems();\n setPhase('measuring-overflow-indicator');\n }\n }, [phase]);\n\n useIsomorphicEffect(() => {\n if (phase === 'measuring-overflow-indicator') {\n const updateWasNeeded = updateOverflowIndicator();\n if (!updateWasNeeded) {\n setPhase('normal');\n }\n }\n }, [phase, subtractCount]);\n\n useIsomorphicEffect(() => {\n if (phase === 'normal') {\n setPhase('measuring');\n setSubtractCount(0);\n }\n }, [dimensions]);\n\n const fitsInRows = (\n itemWidths: number[],\n containerWidth: number,\n columnGap: number,\n startIndex = 0\n ) => {\n let rows = 1;\n let rowWidth = 0;\n\n for (let i = startIndex; i < itemWidths.length; i += 1) {\n const width = itemWidths[i];\n const needed = rowWidth > 0 ? width + columnGap : width;\n\n if (rowWidth + needed > containerWidth && rowWidth > 0) {\n rows++;\n if (rows > maxRows!) {\n return false;\n }\n rowWidth = width;\n } else {\n rowWidth += needed;\n }\n }\n\n return true;\n };\n\n const countVisibleItems = () => {\n const rowData = getRowPositionsData(containerRef, _overflowRef);\n if (!rowData) {\n return;\n }\n\n const container = containerRef.current;\n if (!container) {\n return;\n }\n\n if (isCollapseStart) {\n const containerWidth = container.getBoundingClientRect().width;\n const columnGap = parseFloat(getComputedStyle(container).columnGap) \|\| 0;\n const children = rowData.children;\n const widths = children.map((child) => child.getBoundingClientRect().width);\n\n let count = 0;\n for (let i = widths.length - 1; i >= 0; i--) {\n if (!fitsInRows(widths, containerWidth, columnGap, i)) {\n break;\n }\n count = widths.length - i;\n }\n\n count = Math.min(count, maxVisibleItems!);\n setVisibleCount(count);\n return;\n }\n\n if (data.length === 1) {\n const itemRef = rowData.itemsSizesMap[rowData.rowPositions[0]].elements.values().next().value;\n const containerWidth = container.getBoundingClientRect().width;\n const itemWidth = itemRef?.getBoundingClientRect().width ?? 0;\n\n if (itemWidth > containerWidth) {\n setVisibleCount(0);\n } else {\n setVisibleCount(1);\n }\n\n return;\n }\n\n const visibleRowPositions = rowData.rowPositions.slice(0, maxRows);\n\n let fittingCount = visibleRowPositions.reduce((acc, position) => {\n return acc + rowData.itemsSizesMap[position].elements.size;\n }, 0);\n\n fittingCount = Math.min(fittingCount, maxVisibleItems);\n setVisibleCount(fittingCount);\n };\n\n const updateOverflowIndicator = () => {\n if (!_overflowRef.current) {\n return false;\n }\n const rowData = getRowPositionsData(containerRef, _overflowRef);\n if (!rowData) {\n return false;\n }\n\n const { rowPositions, itemsSizesMap } = rowData;\n\n if (isCollapseStart) {\n const container = containerRef.current;\n if (!container) {\n return false;\n }\n const containerWidth = container.getBoundingClientRect().width;\n const columnGap = parseFloat(getComputedStyle(container).columnGap) \|\| 0;\n const overflowWidth = _overflowRef.current.getBoundingClientRect().width;\n const children = rowData.children;\n const itemWidths = [\n overflowWidth,\n ...children.map((child) => child.getBoundingClientRect().width),\n ];\n\n if (!fitsInRows(itemWidths, containerWidth, columnGap)) {\n setSubtractCount((c) => c + 1);\n return true;\n }\n\n return false;\n }\n\n const overflowRect = _overflowRef.current.getBoundingClientRect();\n const overflowMiddleY = overflowRect.top + overflowRect.height / 2;\n const lastRowTop = rowPositions[rowPositions.length - 1];\n const lastRow = itemsSizesMap[lastRowTop];\n\n if (overflowMiddleY > lastRow.bottom) {\n setSubtractCount((c) => c + 1);\n return true;\n }\n\n return false;\n };\n\n const clonedOverflowElement = overflowElement\n ? cloneElement(overflowElement as React.ReactElement<any>, { ref: overflowRef })\n : null;\n\n let finalItems = data;\n if (maxVisibleItems) {\n finalItems = isCollapseStart\n ? finalItems.slice(-maxVisibleItems!)\n : finalItems.slice(0, maxVisibleItems);\n }\n\n const indexOffset = isCollapseStart ? data.length - finalItems.length : 0;\n\n return (\n <Box ref={rootRef} {...getStyles('root')} {...others}>\n {isCollapseStart && clonedOverflowElement}\n\n {finalItems.map((item, index) => {\n const isVisible =\n phase === 'measuring' \|\|\n (isCollapseStart\n ? index >= finalItems.length - finalVisibleCount\n : index < finalVisibleCount);\n if (!isVisible) {\n return null;\n }\n const dataIndex = indexOffset + index;\n const itemComponent = renderItem(item, dataIndex);\n\n return <Fragment key={dataIndex}>{itemComponent}</Fragment>;\n })}\n\n {!isCollapseStart && clonedOverflowElement}\n </Box>\n );\n});\n\nOverflowList.displayName = '@mantine/core/OverflowList';\nOverflowList.classes = classes;\nOverflowList.varsResolver = varsResolver;\n\nexport namespace OverflowList {\n export type Props = OverflowListProps;\n export type Factory = OverflowListFactory;\n export type StylesNames = OverflowListStylesNames;\n export type CssVariables = OverflowListCssVariables;\n}\n"],"mappings":"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"}

package/esm/components/Pagination/Pagination.context.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Pagination.context.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { PaginationRootFactory } from './PaginationRoot/PaginationRoot';\n\nexport interface PaginationContextValue {\n total: number;\n range: (number \| 'dots')[];\n active: number;\n disabled: boolean \| undefined;\n getItemProps?: (page: number) => Record<string, any>;\n onChange: (page: number) => void;\n onNext: () => void;\n onPrevious: () => void;\n onFirst: () => void;\n onLast: () => void;\n getStyles: GetStylesApi<PaginationRootFactory>;\n}\n\nexport const [PaginationProvider, usePaginationContext] = createSafeContext<PaginationContextValue>(\n 'Pagination.Root component was not found in tree'\n);\n"],"mappings":";;;~~AAiBA~~,MAAa,CAAC,oBAAoB,wBAAwB,kBACxD,iDACF"}
1	+ {"version":3,"file":"Pagination.context.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { PaginationRootFactory } from './PaginationRoot/PaginationRoot';\n\nexport interface PaginationContextValue {\n total: number;\n range: (number \| 'dots')[];\n active: number;\n disabled: boolean \| undefined;\n layout?: 'default' \| 'responsive';\n getItemProps?: (page: number) => Record<string, any>;\n onChange: (page: number) => void;\n onNext: () => void;\n onPrevious: () => void;\n onFirst: () => void;\n onLast: () => void;\n getStyles: GetStylesApi<PaginationRootFactory>;\n}\n\nexport const [PaginationProvider, usePaginationContext] = createSafeContext<PaginationContextValue>(\n 'Pagination.Root component was not found in tree'\n);\n"],"mappings":";;;AAkBA,MAAa,CAAC,oBAAoB,wBAAwB,kBACxD,iDACF"}