@mantine/core 9.2.2 → 9.3.0

package/esm/components/Pagination/Pagination.mjs

@@ -1,14 +1,17 @@
 "use client";
 import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
 import { factory } from "../../core/factory/factory.mjs";
+import { Box } from "../../core/Box/Box.mjs";
 import { Group } from "../Group/Group.mjs";
+import { usePaginationContext } from "./Pagination.context.mjs";
 import Pagination_module_default from "./Pagination.module.mjs";
 import { PaginationControl } from "./PaginationControl/PaginationControl.mjs";
 import { PaginationDots } from "./PaginationDots/PaginationDots.mjs";
 import { PaginationFirst, PaginationLast, PaginationNext, PaginationPrevious } from "./PaginationEdges/PaginationEdges.mjs";
 import { PaginationItems } from "./PaginationItems/PaginationItems.mjs";
+import { PaginationLabel } from "./PaginationLabel/PaginationLabel.mjs";
 import { PaginationRoot } from "./PaginationRoot/PaginationRoot.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/Pagination/Pagination.tsx
 const defaultProps = {
 	withControls: true,
@@ -17,11 +20,19 @@ const defaultProps = {
 	boundaries: 1,
 	gap: 8
 };
+function PaginationItemsGroup({ children }) {
+	return /* @__PURE__ */ jsx(Box, {
+		...usePaginationContext().getStyles("items"),
+		children
+	});
+}
 const Pagination = factory((_props) => {
-	const { withEdges, withControls, getControlProps, nextIcon, previousIcon, lastIcon, firstIcon, dotsIcon, total, gap, hideWithOnePage, withPages, ...others } = useProps("Pagination", defaultProps, _props);
+	const { withEdges, withControls, getControlProps, nextIcon, previousIcon, lastIcon, firstIcon, dotsIcon, total, gap, hideWithOnePage, withPages, layout, formatLabel, ...others } = useProps("Pagination", defaultProps, _props);
 	if (total <= 0 || hideWithOnePage && total === 1) return null;
+	const pagesContent = withPages ? layout === "responsive" ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(PaginationItemsGroup, { children: /* @__PURE__ */ jsx(PaginationItems, { dotsIcon }) }), /* @__PURE__ */ jsx(PaginationLabel, { formatLabel })] }) : /* @__PURE__ */ jsx(PaginationItems, { dotsIcon }) : null;
 	return /* @__PURE__ */ jsx(PaginationRoot, {
 		total,
+		layout,
 		...others,
 		children: /* @__PURE__ */ jsxs(Group, {
 			gap,
@@ -34,7 +45,7 @@ const Pagination = factory((_props) => {
 					icon: previousIcon,
 					...getControlProps?.("previous")
 				}),
-				withPages && /* @__PURE__ */ jsx(PaginationItems, { dotsIcon }),
+				pagesContent,
 				withControls && /* @__PURE__ */ jsx(PaginationNext, {
 					icon: nextIcon,
 					...getControlProps?.("next")
@@ -57,6 +68,7 @@ Pagination.Last = PaginationLast;
 Pagination.Next = PaginationNext;
 Pagination.Previous = PaginationPrevious;
 Pagination.Items = PaginationItems;
+Pagination.Label = PaginationLabel;
 //#endregion
 export { Pagination };
 

package/esm/components/Pagination/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.mjs","names":["classes"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { factory, Factory, MantineSpacing, useProps } from '../../core';\nimport { Group } from '../Group/Group';\nimport { PaginationIcon } from './Pagination.icons';\nimport {\n  PaginationControl,\n  type PaginationControlProps,\n} from './PaginationControl/PaginationControl';\nimport { PaginationDots, type PaginationDotsProps } from './PaginationDots/PaginationDots';\nimport {\n  PaginationFirst,\n  PaginationLast,\n  PaginationNext,\n  PaginationPrevious,\n  type PaginationEdgeProps,\n} from './PaginationEdges/PaginationEdges';\nimport { PaginationItems, type PaginationItemsProps } from './PaginationItems/PaginationItems';\nimport {\n  PaginationRoot,\n  PaginationRootCssVariables,\n  PaginationRootProps,\n  PaginationRootStylesNames,\n} from './PaginationRoot/PaginationRoot';\nimport classes from './Pagination.module.css';\nexport type PaginationStylesNames = PaginationRootStylesNames;\nexport type PaginationCssVariables = PaginationRootCssVariables;\n\nexport interface PaginationProps extends PaginationRootProps {\n  /** If set, first/last controls are displayed @default false */\n  withEdges?: boolean;\n\n  /** If set, next/previous controls are displayed @default true */\n  withControls?: boolean;\n\n  /** Props passed down to next/previous/first/last controls */\n  getControlProps?: (control: 'first' | 'previous' | 'last' | 'next') => Record<string, any>;\n\n  /** Next control icon component */\n  nextIcon?: PaginationIcon;\n\n  /** Previous control icon component */\n  previousIcon?: PaginationIcon;\n\n  /** Last control icon component */\n  lastIcon?: PaginationIcon;\n\n  /** First control icon component */\n  firstIcon?: PaginationIcon;\n\n  /** Dots icon component */\n  dotsIcon?: PaginationIcon;\n\n  /** Key of `theme.spacing`, gap between controls @default 8 */\n  gap?: MantineSpacing;\n\n  /** If set, the pagination is hidden when only one page is available (`total={1}`) @default false */\n  hideWithOnePage?: boolean;\n\n  /** If set to `false`, page number buttons are hidden, only next/previous controls remain @default `true` */\n  withPages?: boolean;\n}\n\nexport type PaginationFactory = Factory<{\n  props: PaginationProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationStylesNames;\n  vars: PaginationCssVariables;\n  staticComponents: {\n    Root: typeof PaginationRoot;\n    Control: typeof PaginationControl;\n    Dots: typeof PaginationDots;\n    First: typeof PaginationFirst;\n    Last: typeof PaginationLast;\n    Next: typeof PaginationNext;\n    Previous: typeof PaginationPrevious;\n    Items: typeof PaginationItems;\n  };\n}>;\n\nconst defaultProps = {\n  withControls: true,\n  withPages: true,\n  siblings: 1,\n  boundaries: 1,\n  gap: 8,\n} satisfies Partial<PaginationProps>;\n\nexport const Pagination = factory<PaginationFactory>((_props) => {\n  const props = useProps('Pagination', defaultProps, _props);\n  const {\n    withEdges,\n    withControls,\n    getControlProps,\n    nextIcon,\n    previousIcon,\n    lastIcon,\n    firstIcon,\n    dotsIcon,\n    total,\n    gap,\n    hideWithOnePage,\n    withPages,\n    ...others\n  } = props;\n\n  if (total <= 0 || (hideWithOnePage && total === 1)) {\n    return null;\n  }\n\n  return (\n    <PaginationRoot total={total} {...others}>\n      <Group gap={gap}>\n        {withEdges && <PaginationFirst icon={firstIcon} {...getControlProps?.('first')} />}\n        {withControls && (\n          <PaginationPrevious icon={previousIcon} {...getControlProps?.('previous')} />\n        )}\n        {withPages && <PaginationItems dotsIcon={dotsIcon} />}\n        {withControls && <PaginationNext icon={nextIcon} {...getControlProps?.('next')} />}\n        {withEdges && <PaginationLast icon={lastIcon} {...getControlProps?.('last')} />}\n      </Group>\n    </PaginationRoot>\n  );\n});\n\nPagination.classes = classes;\nPagination.displayName = '@mantine/core/Pagination';\nPagination.Root = PaginationRoot;\nPagination.Control = PaginationControl;\nPagination.Dots = PaginationDots;\nPagination.First = PaginationFirst;\nPagination.Last = PaginationLast;\nPagination.Next = PaginationNext;\nPagination.Previous = PaginationPrevious;\nPagination.Items = PaginationItems;\n\nexport namespace Pagination {\n  export type Props = PaginationProps;\n  export type StylesNames = PaginationStylesNames;\n  export type CssVariables = PaginationCssVariables;\n  export type Factory = PaginationFactory;\n\n  export namespace Root {\n    export type Props = PaginationRootProps;\n  }\n\n  export namespace Control {\n    export type Props = PaginationControlProps;\n  }\n\n  export namespace Dots {\n    export type Props = PaginationDotsProps;\n  }\n\n  export namespace Edge {\n    export type Props = PaginationEdgeProps;\n  }\n\n  export namespace Items {\n    export type Props = PaginationItemsProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;AA8EA,MAAM,eAAe;CACnB,cAAc;CACd,WAAW;CACX,UAAU;CACV,YAAY;CACZ,KAAK;AACP;AAEA,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EACJ,WACA,cACA,iBACA,UACA,cACA,UACA,WACA,UACA,OACA,KACA,iBACA,WACA,GAAG,WAdS,SAAS,cAAc,cAAc,MAe3C;CAER,IAAI,SAAS,KAAM,mBAAmB,UAAU,GAC9C,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAuB;EAAO,GAAI;YAChC,qBAAC,OAAD;GAAY;aAAZ;IACG,aAAa,oBAAC,iBAAD;KAAiB,MAAM;KAAW,GAAI,kBAAkB,OAAO;IAAI,CAAA;IAChF,gBACC,oBAAC,oBAAD;KAAoB,MAAM;KAAc,GAAI,kBAAkB,UAAU;IAAI,CAAA;IAE7E,aAAa,oBAAC,iBAAD,EAA2B,SAAW,CAAA;IACnD,gBAAgB,oBAAC,gBAAD;KAAgB,MAAM;KAAU,GAAI,kBAAkB,MAAM;IAAI,CAAA;IAChF,aAAa,oBAAC,gBAAD;KAAgB,MAAM;KAAU,GAAI,kBAAkB,MAAM;IAAI,CAAA;GACzE;;CACO,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,cAAc;AACzB,WAAW,OAAO;AAClB,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,QAAQ;AACnB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,QAAQ"}
+{"version":3,"file":"Pagination.mjs","names":["classes"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { Box, factory, Factory, MantineSpacing, useProps } from '../../core';\nimport { Group } from '../Group/Group';\nimport { usePaginationContext } from './Pagination.context';\nimport { PaginationIcon } from './Pagination.icons';\nimport {\n  PaginationControl,\n  type PaginationControlProps,\n} from './PaginationControl/PaginationControl';\nimport { PaginationDots, type PaginationDotsProps } from './PaginationDots/PaginationDots';\nimport {\n  PaginationFirst,\n  PaginationLast,\n  PaginationNext,\n  PaginationPrevious,\n  type PaginationEdgeProps,\n} from './PaginationEdges/PaginationEdges';\nimport { PaginationItems, type PaginationItemsProps } from './PaginationItems/PaginationItems';\nimport {\n  PaginationFormatLabel,\n  PaginationLabel,\n  type PaginationLabelProps,\n} from './PaginationLabel/PaginationLabel';\nimport {\n  PaginationRoot,\n  PaginationRootCssVariables,\n  PaginationRootProps,\n  PaginationRootStylesNames,\n} from './PaginationRoot/PaginationRoot';\nimport classes from './Pagination.module.css';\nexport type PaginationStylesNames = PaginationRootStylesNames;\nexport type PaginationCssVariables = PaginationRootCssVariables;\n\nexport interface PaginationProps extends PaginationRootProps {\n  /** If set, first/last controls are displayed @default false */\n  withEdges?: boolean;\n\n  /** If set, next/previous controls are displayed @default true */\n  withControls?: boolean;\n\n  /** Props passed down to next/previous/first/last controls */\n  getControlProps?: (control: 'first' | 'previous' | 'last' | 'next') => Record<string, any>;\n\n  /** Next control icon component */\n  nextIcon?: PaginationIcon;\n\n  /** Previous control icon component */\n  previousIcon?: PaginationIcon;\n\n  /** Last control icon component */\n  lastIcon?: PaginationIcon;\n\n  /** First control icon component */\n  firstIcon?: PaginationIcon;\n\n  /** Dots icon component */\n  dotsIcon?: PaginationIcon;\n\n  /** Key of `theme.spacing`, gap between controls @default 8 */\n  gap?: MantineSpacing;\n\n  /** If set, the pagination is hidden when only one page is available (`total={1}`) @default false */\n  hideWithOnePage?: boolean;\n\n  /** If set to `false`, page number buttons are hidden, only next/previous controls remain @default `true` */\n  withPages?: boolean;\n\n  /** Function to format the label text displayed in responsive mode */\n  formatLabel?: PaginationFormatLabel;\n}\n\nexport type PaginationFactory = Factory<{\n  props: PaginationProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationStylesNames;\n  vars: PaginationCssVariables;\n  staticComponents: {\n    Root: typeof PaginationRoot;\n    Control: typeof PaginationControl;\n    Dots: typeof PaginationDots;\n    First: typeof PaginationFirst;\n    Last: typeof PaginationLast;\n    Next: typeof PaginationNext;\n    Previous: typeof PaginationPrevious;\n    Items: typeof PaginationItems;\n    Label: typeof PaginationLabel;\n  };\n}>;\n\nconst defaultProps = {\n  withControls: true,\n  withPages: true,\n  siblings: 1,\n  boundaries: 1,\n  gap: 8,\n} satisfies Partial<PaginationProps>;\n\ninterface PaginationItemsGroupProps {\n  children: React.ReactNode;\n}\n\nfunction PaginationItemsGroup({ children }: PaginationItemsGroupProps) {\n  const ctx = usePaginationContext();\n  return <Box {...ctx.getStyles('items')}>{children}</Box>;\n}\n\nexport const Pagination = factory<PaginationFactory>((_props) => {\n  const props = useProps('Pagination', defaultProps, _props);\n  const {\n    withEdges,\n    withControls,\n    getControlProps,\n    nextIcon,\n    previousIcon,\n    lastIcon,\n    firstIcon,\n    dotsIcon,\n    total,\n    gap,\n    hideWithOnePage,\n    withPages,\n    layout,\n    formatLabel,\n    ...others\n  } = props;\n\n  if (total <= 0 || (hideWithOnePage && total === 1)) {\n    return null;\n  }\n\n  const isResponsive = layout === 'responsive';\n\n  const pagesContent = withPages ? (\n    isResponsive ? (\n      <>\n        <PaginationItemsGroup>\n          <PaginationItems dotsIcon={dotsIcon} />\n        </PaginationItemsGroup>\n        <PaginationLabel formatLabel={formatLabel} />\n      </>\n    ) : (\n      <PaginationItems dotsIcon={dotsIcon} />\n    )\n  ) : null;\n\n  return (\n    <PaginationRoot total={total} layout={layout} {...others}>\n      <Group gap={gap}>\n        {withEdges && <PaginationFirst icon={firstIcon} {...getControlProps?.('first')} />}\n        {withControls && (\n          <PaginationPrevious icon={previousIcon} {...getControlProps?.('previous')} />\n        )}\n        {pagesContent}\n        {withControls && <PaginationNext icon={nextIcon} {...getControlProps?.('next')} />}\n        {withEdges && <PaginationLast icon={lastIcon} {...getControlProps?.('last')} />}\n      </Group>\n    </PaginationRoot>\n  );\n});\n\nPagination.classes = classes;\nPagination.displayName = '@mantine/core/Pagination';\nPagination.Root = PaginationRoot;\nPagination.Control = PaginationControl;\nPagination.Dots = PaginationDots;\nPagination.First = PaginationFirst;\nPagination.Last = PaginationLast;\nPagination.Next = PaginationNext;\nPagination.Previous = PaginationPrevious;\nPagination.Items = PaginationItems;\nPagination.Label = PaginationLabel;\n\nexport namespace Pagination {\n  export type Props = PaginationProps;\n  export type StylesNames = PaginationStylesNames;\n  export type CssVariables = PaginationCssVariables;\n  export type Factory = PaginationFactory;\n\n  export namespace Root {\n    export type Props = PaginationRootProps;\n  }\n\n  export namespace Control {\n    export type Props = PaginationControlProps;\n  }\n\n  export namespace Dots {\n    export type Props = PaginationDotsProps;\n  }\n\n  export namespace Edge {\n    export type Props = PaginationEdgeProps;\n  }\n\n  export namespace Items {\n    export type Props = PaginationItemsProps;\n  }\n\n  export namespace Label {\n    export type Props = PaginationLabelProps;\n  }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAwFA,MAAM,eAAe;CACnB,cAAc;CACd,WAAW;CACX,UAAU;CACV,YAAY;CACZ,KAAK;AACP;AAMA,SAAS,qBAAqB,EAAE,YAAuC;CAErE,OAAO,oBAAC,KAAD;EAAK,GADA,qBACM,EAAE,UAAU,OAAO;EAAI;CAAc,CAAA;AACzD;AAEA,MAAa,aAAa,SAA4B,WAAW;CAE/D,MAAM,EACJ,WACA,cACA,iBACA,UACA,cACA,UACA,WACA,UACA,OACA,KACA,iBACA,WACA,QACA,aACA,GAAG,WAhBS,SAAS,cAAc,cAAc,MAiB3C;CAER,IAAI,SAAS,KAAM,mBAAmB,UAAU,GAC9C,OAAO;CAKT,MAAM,eAAe,YAFA,WAAW,eAI5B,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,sBAAD,EAAA,UACE,oBAAC,iBAAD,EAA2B,SAAW,CAAA,EAClB,CAAA,GACtB,oBAAC,iBAAD,EAA8B,YAAc,CAAA,CAC5C,EAAA,CAAA,IAEF,oBAAC,iBAAD,EAA2B,SAAW,CAAA,IAEtC;CAEJ,OACE,oBAAC,gBAAD;EAAuB;EAAe;EAAQ,GAAI;YAChD,qBAAC,OAAD;GAAY;aAAZ;IACG,aAAa,oBAAC,iBAAD;KAAiB,MAAM;KAAW,GAAI,kBAAkB,OAAO;IAAI,CAAA;IAChF,gBACC,oBAAC,oBAAD;KAAoB,MAAM;KAAc,GAAI,kBAAkB,UAAU;IAAI,CAAA;IAE7E;IACA,gBAAgB,oBAAC,gBAAD;KAAgB,MAAM;KAAU,GAAI,kBAAkB,MAAM;IAAI,CAAA;IAChF,aAAa,oBAAC,gBAAD;KAAgB,MAAM;KAAU,GAAI,kBAAkB,MAAM;IAAI,CAAA;GACzE;;CACO,CAAA;AAEpB,CAAC;AAED,WAAW,UAAUA;AACrB,WAAW,cAAc;AACzB,WAAW,OAAO;AAClB,WAAW,UAAU;AACrB,WAAW,OAAO;AAClB,WAAW,QAAQ;AACnB,WAAW,OAAO;AAClB,WAAW,OAAO;AAClB,WAAW,WAAW;AACtB,WAAW,QAAQ;AACnB,WAAW,QAAQ"}

package/esm/components/Pagination/Pagination.module.mjs

@@ -3,7 +3,9 @@
 var Pagination_module_default = {
 	"root": "m_4addd315",
 	"control": "m_326d024a",
-	"dots": "m_4ad7767d"
+	"dots": "m_4ad7767d",
+	"items": "m_105fdbed",
+	"label": "m_10817321"
 };
 //#endregion
 export { Pagination_module_default as default };

package/esm/components/Pagination/Pagination.module.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.module.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".root {\n  --pagination-control-size-xs: 22px;\n  --pagination-control-size-sm: 26px;\n  --pagination-control-size-md: 32px;\n  --pagination-control-size-lg: 38px;\n  --pagination-control-size-xl: 44px;\n\n  --pagination-control-size-input-xs: 30px;\n  --pagination-control-size-input-sm: 36px;\n  --pagination-control-size-input-md: 42px;\n  --pagination-control-size-input-lg: 50px;\n  --pagination-control-size-input-xl: 60px;\n\n  --pagination-control-size: var(--pagination-control-size-md);\n  --pagination-control-fz: var(--mantine-font-size-md);\n  --pagination-active-bg: var(--mantine-primary-color-filled);\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid;\n  cursor: pointer;\n  color: var(--mantine-color-text);\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  font-size: var(--pagination-control-fz);\n  line-height: 1;\n  border-radius: var(--pagination-control-radius, var(--mantine-radius-default));\n\n  &:where([data-with-padding]) {\n    padding: calc(var(--pagination-control-size) / 4);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-4);\n    background-color: var(--mantine-color-white);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-gray-0);\n      }\n    }\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n    background-color: var(--mantine-color-dark-6);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--pagination-active-bg);\n    border-color: var(--pagination-active-bg);\n    color: var(--pagination-active-color, var(--mantine-color-white));\n\n    @mixin hover {\n      background-color: var(--pagination-active-bg);\n    }\n  }\n}\n\n.dots {\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n"],"mappings":""}
+{"version":3,"file":"Pagination.module.mjs","names":[],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".root {\n  --pagination-control-size-xs: 22px;\n  --pagination-control-size-sm: 26px;\n  --pagination-control-size-md: 32px;\n  --pagination-control-size-lg: 38px;\n  --pagination-control-size-xl: 44px;\n\n  --pagination-control-size-input-xs: 30px;\n  --pagination-control-size-input-sm: 36px;\n  --pagination-control-size-input-md: 42px;\n  --pagination-control-size-input-lg: 50px;\n  --pagination-control-size-input-xl: 60px;\n\n  --pagination-control-size: var(--pagination-control-size-md);\n  --pagination-control-fz: var(--mantine-font-size-md);\n  --pagination-active-bg: var(--mantine-primary-color-filled);\n\n  &:where([data-layout='responsive']) {\n    container-type: inline-size;\n  }\n}\n\n.control {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid;\n  cursor: pointer;\n  color: var(--mantine-color-text);\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  font-size: var(--pagination-control-fz);\n  line-height: 1;\n  border-radius: var(--pagination-control-radius, var(--mantine-radius-default));\n\n  &:where([data-with-padding]) {\n    padding: calc(var(--pagination-control-size) / 4);\n  }\n\n  &:where(:disabled, [data-disabled]) {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  @mixin where-light {\n    border-color: var(--mantine-color-gray-4);\n    background-color: var(--mantine-color-white);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-gray-0);\n      }\n    }\n  }\n\n  @mixin where-dark {\n    border-color: var(--mantine-color-dark-4);\n    background-color: var(--mantine-color-dark-6);\n\n    @mixin hover {\n      &:where(:not(:disabled, [data-disabled])) {\n        background-color: var(--mantine-color-dark-5);\n      }\n    }\n  }\n\n  &:where([data-active]) {\n    background-color: var(--pagination-active-bg);\n    border-color: var(--pagination-active-bg);\n    color: var(--pagination-active-color, var(--mantine-color-white));\n\n    @mixin hover {\n      background-color: var(--pagination-active-bg);\n    }\n  }\n}\n\n.dots {\n  height: var(--pagination-control-size);\n  min-width: var(--pagination-control-size);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  pointer-events: none;\n}\n\n.items {\n  display: flex;\n  gap: inherit;\n  align-items: center;\n\n  @container (width <= 400px) {\n    display: none;\n  }\n}\n\n.label {\n  display: none;\n  align-items: center;\n  justify-content: center;\n  height: var(--pagination-control-size);\n  font-size: var(--pagination-control-fz);\n  white-space: nowrap;\n\n  @container (width <= 400px) {\n    display: flex;\n  }\n}\n"],"mappings":""}

package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs

@@ -0,0 +1,32 @@
+"use client";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { factory } from "../../../core/factory/factory.mjs";
+import { Box } from "../../../core/Box/Box.mjs";
+import { usePaginationContext } from "../Pagination.context.mjs";
+import Pagination_module_default from "../Pagination.module.mjs";
+import { jsx } from "react/jsx-runtime";
+//#region packages/@mantine/core/src/components/Pagination/PaginationLabel/PaginationLabel.tsx
+const defaultProps = { formatLabel: ({ page, totalPages }) => `Page ${page} of ${totalPages}` };
+const PaginationLabel = factory((_props) => {
+	const { classNames, className, style, styles, vars, formatLabel, ...others } = useProps("PaginationLabel", defaultProps, _props);
+	const ctx = usePaginationContext();
+	return /* @__PURE__ */ jsx(Box, {
+		...ctx.getStyles("label", {
+			className,
+			style,
+			styles,
+			classNames
+		}),
+		...others,
+		children: formatLabel({
+			page: ctx.active,
+			totalPages: ctx.total
+		})
+	});
+});
+PaginationLabel.classes = Pagination_module_default;
+PaginationLabel.displayName = "@mantine/core/PaginationLabel";
+//#endregion
+export { PaginationLabel };
+
+//# sourceMappingURL=PaginationLabel.mjs.map

package/esm/components/Pagination/PaginationLabel/PaginationLabel.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationLabel.mjs","names":["classes"],"sources":["../../../../src/components/Pagination/PaginationLabel/PaginationLabel.tsx"],"sourcesContent":["import {\n  Box,\n  BoxProps,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  useProps,\n} from '../../../core';\nimport { usePaginationContext } from '../Pagination.context';\nimport classes from '../Pagination.module.css';\n\nexport type PaginationFormatLabel = (input: { page: number; totalPages: number }) => string;\nexport type PaginationLabelStylesNames = 'label';\n\nexport interface PaginationLabelProps\n  extends BoxProps, CompoundStylesApiProps<PaginationLabelFactory>, ElementProps<'div'> {\n  /** Function to format the label text */\n  formatLabel?: PaginationFormatLabel;\n}\n\nexport type PaginationLabelFactory = Factory<{\n  props: PaginationLabelProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationLabelStylesNames;\n  compound: true;\n}>;\n\nconst defaultProps = {\n  formatLabel: ({ page, totalPages }) => `Page ${page} of ${totalPages}`,\n} satisfies Partial<PaginationLabelProps>;\n\nexport const PaginationLabel = factory<PaginationLabelFactory>((_props) => {\n  const props = useProps('PaginationLabel', defaultProps, _props);\n  const { classNames, className, style, styles, vars, formatLabel, ...others } = props;\n  const ctx = usePaginationContext();\n\n  return (\n    <Box {...ctx.getStyles('label', { className, style, styles, classNames })} {...others}>\n      {formatLabel({ page: ctx.active, totalPages: ctx.total })}\n    </Box>\n  );\n});\n\nPaginationLabel.classes = classes;\nPaginationLabel.displayName = '@mantine/core/PaginationLabel';\n"],"mappings":";;;;;;;;AA4BA,MAAM,eAAe,EACnB,cAAc,EAAE,MAAM,iBAAiB,QAAQ,KAAK,MAAM,aAC5D;AAEA,MAAa,kBAAkB,SAAiC,WAAW;CAEzE,MAAM,EAAE,YAAY,WAAW,OAAO,QAAQ,MAAM,aAAa,GAAG,WADtD,SAAS,mBAAmB,cAAc,MAC2B;CACnF,MAAM,MAAM,qBAAqB;CAEjC,OACE,oBAAC,KAAD;EAAK,GAAI,IAAI,UAAU,SAAS;GAAE;GAAW;GAAO;GAAQ;EAAW,CAAC;EAAG,GAAI;YAC5E,YAAY;GAAE,MAAM,IAAI;GAAQ,YAAY,IAAI;EAAM,CAAC;CACrD,CAAA;AAET,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}

package/esm/components/Pagination/PaginationRoot/PaginationRoot.mjs

@@ -31,7 +31,7 @@ const varsResolver = createVarsResolver((theme, { size, radius, color, autoContr
 } }));
 const PaginationRoot = factory((_props) => {
 	const props = useProps("PaginationRoot", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, vars, total, value, defaultValue, onChange, disabled, siblings, boundaries, color, radius, onNextPage, onPreviousPage, onFirstPage, onLastPage, getItemProps, autoContrast, startValue, attributes, ...others } = props;
+	const { classNames, className, style, styles, unstyled, vars, total, value, defaultValue, onChange, disabled, siblings, boundaries, color, radius, onNextPage, onPreviousPage, onFirstPage, onLastPage, getItemProps, autoContrast, startValue, layout, mod, attributes, ...others } = props;
 	const getStyles = useStyles({
 		name: "Pagination",
 		classes: Pagination_module_default,
@@ -60,6 +60,7 @@ const PaginationRoot = factory((_props) => {
 			range,
 			active,
 			disabled,
+			layout,
 			getItemProps,
 			onChange: setPage,
 			onNext: createEventHandler(onNextPage, next),
@@ -70,6 +71,7 @@ const PaginationRoot = factory((_props) => {
 		},
 		children: /* @__PURE__ */ jsx(Box, {
 			...getStyles("root"),
+			mod: [{ layout }, mod],
 			...others
 		})
 	});

package/esm/components/Pagination/PaginationRoot/PaginationRoot.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationRoot.mjs","names":["classes"],"sources":["../../../../src/components/Pagination/PaginationRoot/PaginationRoot.tsx"],"sourcesContent":["import { usePagination } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createEventHandler,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { PaginationProvider } from '../Pagination.context';\nimport classes from '../Pagination.module.css';\n\nexport type PaginationRootStylesNames = 'root' | 'control' | 'dots';\nexport type PaginationRootCssVariables = {\n  root:\n    | '--pagination-control-size'\n    | '--pagination-control-radius'\n    | '--pagination-control-fz'\n    | '--pagination-active-bg'\n    | '--pagination-active-color';\n};\n\nexport interface PaginationRootProps\n  extends\n    BoxProps,\n    StylesApiProps<PaginationRootFactory>,\n    ElementProps<'div', 'value' | 'onChange'> {\n  /** `height` and `min-width` of controls @default 'md' */\n  size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;\n\n  /** Total number of pages, must be an integer */\n  total: number;\n\n  /** Active page for controlled component, must be an integer in [1, total] interval */\n  value?: number;\n\n  /** Active page for uncontrolled component, must be an integer in [1, total] interval */\n  defaultValue?: number;\n\n  /** Called when page changes */\n  onChange?: (value: number) => void;\n\n  /** Disables all controls, applies disabled styles */\n  disabled?: boolean;\n\n  /** Number of siblings displayed on the left/right side of the selected page @default 1 */\n  siblings?: number;\n\n  /** Number of elements visible on the left/right edges @default 1 */\n  boundaries?: number;\n\n  /** Key of `theme.colors`, active item color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Called when next page control is clicked */\n  onNextPage?: () => void;\n\n  /** Called when previous page control is clicked */\n  onPreviousPage?: () => void;\n\n  /** Called when first page control is clicked */\n  onFirstPage?: () => void;\n\n  /** Called when last page control is clicked */\n  onLastPage?: () => void;\n\n  /** Additional props passed down to controls */\n  getItemProps?: (page: number) => Record<string, any>;\n\n  /** If set, adjusts text color based on the active page background color to ensure sufficient contrast */\n  autoContrast?: boolean;\n\n  /** Starting page number, defaults to 1 */\n  startValue?: number;\n}\n\nexport type PaginationRootFactory = Factory<{\n  props: PaginationRootProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationRootStylesNames;\n  vars: PaginationRootCssVariables;\n}>;\n\nconst defaultProps = {\n  siblings: 1,\n  boundaries: 1,\n} satisfies Partial<PaginationRootProps>;\n\nconst varsResolver = createVarsResolver<PaginationRootFactory>(\n  (theme, { size, radius, color, autoContrast }) => ({\n    root: {\n      '--pagination-control-radius': radius === undefined ? undefined : getRadius(radius),\n      '--pagination-control-size': getSize(size, 'pagination-control-size'),\n      '--pagination-control-fz': getFontSize(size),\n      '--pagination-active-bg': color ? getThemeColor(color, theme) : undefined,\n      '--pagination-active-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const PaginationRoot = factory<PaginationRootFactory>((_props) => {\n  const props = useProps('PaginationRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    total,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    siblings,\n    boundaries,\n    color,\n    radius,\n    onNextPage,\n    onPreviousPage,\n    onFirstPage,\n    onLastPage,\n    getItemProps,\n    autoContrast,\n    startValue,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PaginationRootFactory>({\n    name: 'Pagination',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { range, setPage, next, previous, active, first, last } = usePagination({\n    page: value,\n    initialPage: defaultValue,\n    onChange,\n    total,\n    siblings,\n    boundaries,\n    startValue,\n  });\n\n  return (\n    <PaginationProvider\n      value={{\n        total,\n        range,\n        active,\n        disabled,\n        getItemProps,\n        onChange: setPage,\n        onNext: createEventHandler(onNextPage, next),\n        onPrevious: createEventHandler(onPreviousPage, previous),\n        onFirst: createEventHandler(onFirstPage, first),\n        onLast: createEventHandler(onLastPage, last),\n        getStyles,\n      }}\n    >\n      <Box {...getStyles('root')} {...others} />\n    </PaginationProvider>\n  );\n});\n\nPaginationRoot.classes = classes;\nPaginationRoot.varsResolver = varsResolver;\nPaginationRoot.displayName = '@mantine/core/PaginationRoot';\n"],"mappings":";;;;;;;;;;;;;;;;AAmGA,MAAM,eAAe;CACnB,UAAU;CACV,YAAY;AACd;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAoB,EACjD,MAAM;CACJ,+BAA+B,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClF,6BAA6B,QAAQ,MAAM,yBAAyB;CACpE,2BAA2B,YAAY,IAAI;CAC3C,0BAA0B,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CAChE,6BAA6B,qBAAqB,cAAc,KAAK,IACjE,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,cACA,UACA,UACA,UACA,YACA,OACA,QACA,YACA,gBACA,aACA,YACA,cACA,cACA,YACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,SAAS,MAAM,UAAU,QAAQ,OAAO,SAAS,cAAc;EAC5E,MAAM;EACN,aAAa;EACb;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,oBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA,UAAU;GACV,QAAQ,mBAAmB,YAAY,IAAI;GAC3C,YAAY,mBAAmB,gBAAgB,QAAQ;GACvD,SAAS,mBAAmB,aAAa,KAAK;GAC9C,QAAQ,mBAAmB,YAAY,IAAI;GAC3C;EACF;YAEA,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,GAAI;EAAS,CAAA;CACvB,CAAA;AAExB,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,eAAe;AAC9B,eAAe,cAAc"}
+{"version":3,"file":"PaginationRoot.mjs","names":["classes"],"sources":["../../../../src/components/Pagination/PaginationRoot/PaginationRoot.tsx"],"sourcesContent":["import { usePagination } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  createEventHandler,\n  createVarsResolver,\n  ElementProps,\n  factory,\n  Factory,\n  getAutoContrastValue,\n  getContrastColor,\n  getFontSize,\n  getRadius,\n  getSize,\n  getThemeColor,\n  MantineColor,\n  MantineRadius,\n  MantineSize,\n  StylesApiProps,\n  useProps,\n  useStyles,\n} from '../../../core';\nimport { PaginationProvider } from '../Pagination.context';\nimport classes from '../Pagination.module.css';\n\nexport type PaginationRootStylesNames = 'root' | 'control' | 'dots' | 'items' | 'label';\nexport type PaginationRootCssVariables = {\n  root:\n    | '--pagination-control-size'\n    | '--pagination-control-radius'\n    | '--pagination-control-fz'\n    | '--pagination-active-bg'\n    | '--pagination-active-color';\n};\n\nexport interface PaginationRootProps\n  extends\n    BoxProps,\n    StylesApiProps<PaginationRootFactory>,\n    ElementProps<'div', 'value' | 'onChange'> {\n  /** `height` and `min-width` of controls @default 'md' */\n  size?: MantineSize | `input-${MantineSize}` | (string & {}) | number;\n\n  /** Total number of pages, must be an integer */\n  total: number;\n\n  /** Active page for controlled component, must be an integer in [1, total] interval */\n  value?: number;\n\n  /** Active page for uncontrolled component, must be an integer in [1, total] interval */\n  defaultValue?: number;\n\n  /** Called when page changes */\n  onChange?: (value: number) => void;\n\n  /** Disables all controls, applies disabled styles */\n  disabled?: boolean;\n\n  /** Number of siblings displayed on the left/right side of the selected page @default 1 */\n  siblings?: number;\n\n  /** Number of elements visible on the left/right edges @default 1 */\n  boundaries?: number;\n\n  /** Key of `theme.colors`, active item color @default theme.primaryColor */\n  color?: MantineColor;\n\n  /** Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Called when next page control is clicked */\n  onNextPage?: () => void;\n\n  /** Called when previous page control is clicked */\n  onPreviousPage?: () => void;\n\n  /** Called when first page control is clicked */\n  onFirstPage?: () => void;\n\n  /** Called when last page control is clicked */\n  onLastPage?: () => void;\n\n  /** Additional props passed down to controls */\n  getItemProps?: (page: number) => Record<string, any>;\n\n  /** If set, adjusts text color based on the active page background color to ensure sufficient contrast */\n  autoContrast?: boolean;\n\n  /** Starting page number, defaults to 1 */\n  startValue?: number;\n\n  /** Determines how the pagination is displayed, `'responsive'` uses CSS container queries to switch between pages and a compact label @default 'default' */\n  layout?: 'default' | 'responsive';\n}\n\nexport type PaginationRootFactory = Factory<{\n  props: PaginationRootProps;\n  ref: HTMLDivElement;\n  stylesNames: PaginationRootStylesNames;\n  vars: PaginationRootCssVariables;\n}>;\n\nconst defaultProps = {\n  siblings: 1,\n  boundaries: 1,\n} satisfies Partial<PaginationRootProps>;\n\nconst varsResolver = createVarsResolver<PaginationRootFactory>(\n  (theme, { size, radius, color, autoContrast }) => ({\n    root: {\n      '--pagination-control-radius': radius === undefined ? undefined : getRadius(radius),\n      '--pagination-control-size': getSize(size, 'pagination-control-size'),\n      '--pagination-control-fz': getFontSize(size),\n      '--pagination-active-bg': color ? getThemeColor(color, theme) : undefined,\n      '--pagination-active-color': getAutoContrastValue(autoContrast, theme)\n        ? getContrastColor({ color, theme, autoContrast })\n        : undefined,\n    },\n  })\n);\n\nexport const PaginationRoot = factory<PaginationRootFactory>((_props) => {\n  const props = useProps('PaginationRoot', defaultProps, _props);\n  const {\n    classNames,\n    className,\n    style,\n    styles,\n    unstyled,\n    vars,\n    total,\n    value,\n    defaultValue,\n    onChange,\n    disabled,\n    siblings,\n    boundaries,\n    color,\n    radius,\n    onNextPage,\n    onPreviousPage,\n    onFirstPage,\n    onLastPage,\n    getItemProps,\n    autoContrast,\n    startValue,\n    layout,\n    mod,\n    attributes,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PaginationRootFactory>({\n    name: 'Pagination',\n    classes,\n    props,\n    className,\n    style,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    vars,\n    varsResolver,\n  });\n\n  const { range, setPage, next, previous, active, first, last } = usePagination({\n    page: value,\n    initialPage: defaultValue,\n    onChange,\n    total,\n    siblings,\n    boundaries,\n    startValue,\n  });\n\n  return (\n    <PaginationProvider\n      value={{\n        total,\n        range,\n        active,\n        disabled,\n        layout,\n        getItemProps,\n        onChange: setPage,\n        onNext: createEventHandler(onNextPage, next),\n        onPrevious: createEventHandler(onPreviousPage, previous),\n        onFirst: createEventHandler(onFirstPage, first),\n        onLast: createEventHandler(onLastPage, last),\n        getStyles,\n      }}\n    >\n      <Box {...getStyles('root')} mod={[{ layout }, mod]} {...others} />\n    </PaginationProvider>\n  );\n});\n\nPaginationRoot.classes = classes;\nPaginationRoot.varsResolver = varsResolver;\nPaginationRoot.displayName = '@mantine/core/PaginationRoot';\n"],"mappings":";;;;;;;;;;;;;;;;AAsGA,MAAM,eAAe;CACnB,UAAU;CACV,YAAY;AACd;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,OAAO,oBAAoB,EACjD,MAAM;CACJ,+BAA+B,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClF,6BAA6B,QAAQ,MAAM,yBAAyB;CACpE,2BAA2B,YAAY,IAAI;CAC3C,0BAA0B,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CAChE,6BAA6B,qBAAqB,cAAc,KAAK,IACjE,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,iBAAiB,SAAgC,WAAW;CACvE,MAAM,QAAQ,SAAS,kBAAkB,cAAc,MAAM;CAC7D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,OACA,OACA,cACA,UACA,UACA,UACA,YACA,OACA,QACA,YACA,gBACA,aACA,YACA,cACA,cACA,YACA,QACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAiC;EACjD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,EAAE,OAAO,SAAS,MAAM,UAAU,QAAQ,OAAO,SAAS,cAAc;EAC5E,MAAM;EACN,aAAa;EACb;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,oBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA,UAAU;GACV,QAAQ,mBAAmB,YAAY,IAAI;GAC3C,YAAY,mBAAmB,gBAAgB,QAAQ;GACvD,SAAS,mBAAmB,aAAa,KAAK;GAC9C,QAAQ,mBAAmB,YAAY,IAAI;GAC3C;EACF;YAEA,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC,EAAE,OAAO,GAAG,GAAG;GAAG,GAAI;EAAS,CAAA;CAC/C,CAAA;AAExB,CAAC;AAED,eAAe,UAAUA;AACzB,eAAe,eAAe;AAC9B,eAAe,cAAc"}

package/esm/components/Popover/Popover.mjs

@@ -12,6 +12,7 @@ import { Overlay } from "../Overlay/Overlay.mjs";
 import { OptionalPortal } from "../Portal/OptionalPortal.mjs";
 import { Transition } from "../Transition/Transition.mjs";
 import { PopoverContextProvider } from "./Popover.context.mjs";
+import { PopoverContextMenu } from "./PopoverContextMenu/PopoverContextMenu.mjs";
 import Popover_module_default from "./Popover.module.mjs";
 import { PopoverDropdown } from "./PopoverDropdown/PopoverDropdown.mjs";
 import { PopoverTarget } from "./PopoverTarget/PopoverTarget.mjs";
@@ -44,6 +45,7 @@ const defaultProps = {
 	returnFocus: false,
 	withOverlay: false,
 	hideDetached: true,
+	preventPositionChangeWhenVisible: true,
 	clickOutsideEvents: ["mousedown", "touchstart"],
 	zIndex: getDefaultZIndex("popover"),
 	__staticSelector: "Popover",
@@ -73,8 +75,6 @@ function Popover(_props) {
 		styles,
 		props
 	});
-	const [dropdownVisible, setDropdownVisible] = useState(opened ?? defaultOpened ?? false);
-	const positionRef = useRef(position);
 	const arrowRef = useRef(null);
 	const [targetNode, setTargetNode] = useState(null);
 	const [dropdownNode, setDropdownNode] = useState(null);
@@ -96,9 +96,6 @@ function Popover(_props) {
 		onClose,
 		onDismiss,
 		strategy: floatingStrategy,
-		dropdownVisible,
-		setDropdownVisible,
-		positionRef,
 		disabled,
 		preventPositionChangeWhenVisible,
 		keepMounted
@@ -120,13 +117,11 @@ function Popover(_props) {
 	const onExited = useCallback(() => {
 		transitionProps?.onExited?.();
 		onExitTransitionEnd?.();
-		setDropdownVisible(false);
-		if (!preventPositionChangeWhenVisible) positionRef.current = position;
+		popover.resetLockedPlacement();
 	}, [
 		transitionProps?.onExited,
 		onExitTransitionEnd,
-		preventPositionChangeWhenVisible,
-		position
+		popover.resetLockedPlacement
 	]);
 	const onEntered = useCallback(() => {
 		transitionProps?.onEntered?.();
@@ -202,6 +197,7 @@ function Popover(_props) {
 }
 Popover.Target = PopoverTarget;
 Popover.Dropdown = PopoverDropdown;
+Popover.ContextMenu = PopoverContextMenu;
 Popover.varsResolver = varsResolver;
 Popover.displayName = "@mantine/core/Popover";
 Popover.extend = (input) => input;

package/esm/components/Popover/Popover.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.mjs","names":["useId"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n  createVarsResolver,\n  ElementProps,\n  ExtendComponent,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getShadow,\n  MantineRadius,\n  MantineShadow,\n  StylesApiProps,\n  useDirection,\n  useMantineEnv,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n  dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n  /** Dropdown position relative to the target element @default 'bottom' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 8 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Called when dropdown position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Called when dropdown closes */\n  onClose?: () => void;\n\n  /** Called when the popover is dismissed by clicking outside or by pressing escape */\n  onDismiss?: () => void;\n\n  /** Called when dropdown opens */\n  onOpen?: () => void;\n\n  /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n  keepMounted?: boolean;\n\n  /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Called when exit transition ends */\n  onExitTransitionEnd?: () => void;\n\n  /** Called when enter transition ends */\n  onEnterTransitionEnd?: () => void;\n\n  /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n  width?: PopoverWidth;\n\n  /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n  middlewares?: PopoverMiddlewares;\n\n  /** Determines whether component should have an arrow @default false */\n  withArrow?: boolean;\n\n  /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n  withOverlay?: boolean;\n\n  /** Props passed down to `Overlay` component */\n  overlayProps?: OverlayProps & ElementProps<'div'>;\n\n  /** Arrow size in px @default 7 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position */\n  arrowPosition?: ArrowPosition;\n\n  /** Determines whether dropdown should be rendered within the `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the `Portal` when `withinPortal` is true */\n  portalProps?: BasePortalProps;\n\n  /** Dropdown `z-index` @default 300 */\n  zIndex?: string | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n  shadow?: MantineShadow;\n\n  /** If set, popover dropdown will not be rendered */\n  disabled?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n  returnFocus?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n  hideDetached?: boolean;\n\n  /** Prevents popover from flipping/shifting when it the dropdown is visible */\n  preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n  __staticSelector?: string;\n\n  /** `Popover.Target` and `Popover.Dropdown` components */\n  children?: React.ReactNode;\n\n  /** Initial opened state for uncontrolled component */\n  defaultOpened?: boolean;\n\n  /** Controlled dropdown opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Determines whether dropdown should be closed on outside clicks @default true */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside clicks */\n  clickOutsideEvents?: string[];\n\n  /** Determines whether focus should be trapped within dropdown @default false */\n  trapFocus?: boolean;\n\n  /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Determines whether dropdown and target elements should have accessible roles @default true */\n  withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n  props: PopoverProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n  position: 'bottom',\n  offset: 8,\n  transitionProps: { transition: 'fade', duration: 150 },\n  middlewares: { flip: true, shift: true, inline: false },\n  arrowSize: 7,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  closeOnEscape: true,\n  trapFocus: false,\n  withRoles: true,\n  returnFocus: false,\n  withOverlay: false,\n  hideDetached: true,\n  clickOutsideEvents: ['mousedown', 'touchstart'],\n  zIndex: getDefaultZIndex('popover'),\n  __staticSelector: 'Popover',\n  width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n  dropdown: {\n    '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n    '--popover-shadow': getShadow(shadow),\n  },\n}));\n\nexport function Popover(_props: PopoverProps) {\n  const props = useProps('Popover', defaultProps, _props);\n  const {\n    children,\n    position,\n    offset,\n    onPositionChange,\n    opened,\n    transitionProps,\n    onExitTransitionEnd,\n    onEnterTransitionEnd,\n    width,\n    middlewares,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    unstyled,\n    classNames,\n    styles,\n    closeOnClickOutside,\n    withinPortal,\n    portalProps,\n    closeOnEscape,\n    clickOutsideEvents,\n    trapFocus,\n    onClose,\n    onDismiss,\n    onOpen,\n    onChange,\n    zIndex,\n    radius,\n    shadow,\n    id,\n    defaultOpened,\n    __staticSelector,\n    withRoles,\n    disabled,\n    returnFocus,\n    variant,\n    keepMounted,\n    vars,\n    floatingStrategy,\n    withOverlay,\n    overlayProps,\n    hideDetached,\n    attributes,\n    preventPositionChangeWhenVisible,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PopoverFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'dropdown',\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n  const [dropdownVisible, setDropdownVisible] = useState(opened ?? defaultOpened ?? false);\n  const positionRef = useRef<FloatingPosition>(position);\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n  const { dir } = useDirection();\n  const env = useMantineEnv();\n\n  const uid = useId(id);\n  const popover = usePopover({\n    middlewares,\n    width,\n    position: getFloatingPosition(dir, position),\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    arrowRef,\n    arrowOffset,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    onChange,\n    onOpen,\n    onClose,\n    onDismiss,\n    strategy: floatingStrategy,\n    dropdownVisible,\n    setDropdownVisible,\n    positionRef,\n    disabled,\n    preventPositionChangeWhenVisible,\n    keepMounted,\n  });\n\n  useClickOutside(\n    () => {\n      if (closeOnClickOutside) {\n        popover.onClose();\n        onDismiss?.();\n      }\n    },\n    clickOutsideEvents,\n    [targetNode, dropdownNode]\n  );\n\n  const reference = useCallback(\n    (node: HTMLElement) => {\n      setTargetNode(node);\n      popover.floating.refs.setReference(node);\n    },\n    [popover.floating.refs.setReference]\n  );\n\n  const floating = useCallback(\n    (node: HTMLElement) => {\n      setDropdownNode(node);\n      popover.floating.refs.setFloating(node);\n    },\n    [popover.floating.refs.setFloating]\n  );\n\n  const onExited = useCallback(() => {\n    transitionProps?.onExited?.();\n    onExitTransitionEnd?.();\n    setDropdownVisible(false);\n    // Only reset position if preventPositionChangeWhenVisible is false\n    // to maintain the flipped position on subsequent opens\n    if (!preventPositionChangeWhenVisible) {\n      positionRef.current = position;\n    }\n  }, [transitionProps?.onExited, onExitTransitionEnd, preventPositionChangeWhenVisible, position]);\n\n  const onEntered = useCallback(() => {\n    transitionProps?.onEntered?.();\n    onEnterTransitionEnd?.();\n  }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n  return (\n    <PopoverContextProvider\n      value={{\n        returnFocus,\n        disabled,\n        controlled: popover.controlled,\n        reference,\n        floating,\n        x: popover.floating.x,\n        y: popover.floating.y,\n        arrowX: popover.floating?.middlewareData?.arrow?.x,\n        arrowY: popover.floating?.middlewareData?.arrow?.y,\n        opened: popover.opened,\n        arrowRef,\n        transitionProps: { ...transitionProps, onExited, onEntered },\n        width,\n        withArrow,\n        arrowSize,\n        arrowOffset,\n        arrowRadius,\n        arrowPosition,\n        placement: popover.floating.placement,\n        trapFocus,\n        withinPortal,\n        portalProps,\n        zIndex,\n        radius,\n        shadow,\n        closeOnEscape,\n        onDismiss,\n        onClose: popover.onClose,\n        onToggle: popover.onToggle,\n        getTargetId: () => uid,\n        getDropdownId: () => `${uid}-dropdown`,\n        withRoles,\n        targetProps: others,\n        __staticSelector,\n        classNames,\n        styles,\n        unstyled,\n        variant,\n        keepMounted,\n        getStyles,\n        resolvedStyles,\n        floatingStrategy,\n        referenceHidden:\n          hideDetached && env !== 'test'\n            ? popover.floating.middlewareData.hide?.referenceHidden\n            : false,\n      }}\n    >\n      {children}\n      {withOverlay && (\n        <Transition\n          transition=\"fade\"\n          mounted={popover.opened}\n          duration={transitionProps?.duration || 250}\n          exitDuration={transitionProps?.exitDuration || 250}\n        >\n          {(transitionStyles) => (\n            <OptionalPortal withinPortal={withinPortal}>\n              <Overlay\n                {...overlayProps}\n                {...getStyles('overlay', {\n                  className: overlayProps?.className,\n                  style: [transitionStyles, overlayProps?.style],\n                })}\n              />\n            </OptionalPortal>\n          )}\n        </Transition>\n      )}\n    </PopoverContextProvider>\n  );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n  const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n  Extended.extend = Popover.extend;\n  Extended.displayName = `WithProps(${Popover.displayName})`;\n  return Extended;\n};\n\nexport namespace Popover {\n  export type Props = PopoverProps;\n  export type __Props = __PopoverProps;\n  export type Factory = PopoverFactory;\n  export type StylesNames = PopoverStylesNames;\n  export type TargetProps = PopoverTargetProps;\n  export type DropdownProps = PopoverDropdownProps;\n  export type Width = PopoverWidth;\n  export type ContextValue = PopoverContextValue;\n\n  export namespace Target {\n    export type Props = PopoverTargetProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = PopoverDropdownProps;\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"Popover.mjs","names":["useId"],"sources":["../../../src/components/Popover/Popover.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from 'react';\nimport { useClickOutside, useId } from '@mantine/hooks';\nimport {\n  createVarsResolver,\n  ElementProps,\n  ExtendComponent,\n  Factory,\n  getDefaultZIndex,\n  getRadius,\n  getShadow,\n  MantineRadius,\n  MantineShadow,\n  StylesApiProps,\n  useDirection,\n  useMantineEnv,\n  useProps,\n  useResolvedStylesApi,\n  useStyles,\n} from '../../core';\nimport {\n  ArrowPosition,\n  FloatingAxesOffsets,\n  FloatingPosition,\n  FloatingStrategy,\n  getFloatingPosition,\n} from '../../utils/Floating';\nimport { Overlay, OverlayProps } from '../Overlay';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { Transition, TransitionOverride } from '../Transition';\nimport { PopoverContextProvider, PopoverContextValue } from './Popover.context';\nimport { PopoverMiddlewares, PopoverWidth } from './Popover.types';\nimport {\n  PopoverContextMenu,\n  PopoverContextMenuProps,\n} from './PopoverContextMenu/PopoverContextMenu';\nimport { PopoverDropdown, PopoverDropdownProps } from './PopoverDropdown/PopoverDropdown';\nimport { PopoverTarget, PopoverTargetProps } from './PopoverTarget/PopoverTarget';\nimport { usePopover } from './use-popover';\nimport classes from './Popover.module.css';\n\nexport type PopoverStylesNames = 'dropdown' | 'arrow' | 'overlay';\nexport type PopoverCssVariables = {\n  dropdown: '--popover-radius' | '--popover-shadow';\n};\n\nexport interface __PopoverProps {\n  /** Dropdown position relative to the target element @default 'bottom' */\n  position?: FloatingPosition;\n\n  /** Offset of the dropdown element @default 8 */\n  offset?: number | FloatingAxesOffsets;\n\n  /** Called when dropdown position changes */\n  onPositionChange?: (position: FloatingPosition) => void;\n\n  /** Called when dropdown closes */\n  onClose?: () => void;\n\n  /** Called when the popover is dismissed by clicking outside or by pressing escape */\n  onDismiss?: () => void;\n\n  /** Called when dropdown opens */\n  onOpen?: () => void;\n\n  /** If set, the dropdown is not unmounted from the DOM when hidden. `display: none` styles are added instead. */\n  keepMounted?: boolean;\n\n  /** Props passed down to the `Transition` component. Use to configure duration and animation type. @default { duration: 150, transition: 'fade' } */\n  transitionProps?: TransitionOverride;\n\n  /** Called when exit transition ends */\n  onExitTransitionEnd?: () => void;\n\n  /** Called when enter transition ends */\n  onEnterTransitionEnd?: () => void;\n\n  /** Dropdown width, or `'target'` to make dropdown width the same as target element @default 'max-content' */\n  width?: PopoverWidth;\n\n  /** Floating ui middlewares to configure position handling @default { flip: true, shift: true, inline: false } */\n  middlewares?: PopoverMiddlewares;\n\n  /** Determines whether component should have an arrow @default false */\n  withArrow?: boolean;\n\n  /** Determines whether the overlay should be displayed when the dropdown is opened @default false */\n  withOverlay?: boolean;\n\n  /** Props passed down to `Overlay` component */\n  overlayProps?: OverlayProps & ElementProps<'div'>;\n\n  /** Arrow size in px @default 7 */\n  arrowSize?: number;\n\n  /** Arrow offset in px @default 5 */\n  arrowOffset?: number;\n\n  /** Arrow `border-radius` in px @default 0 */\n  arrowRadius?: number;\n\n  /** Arrow position */\n  arrowPosition?: ArrowPosition;\n\n  /** Determines whether dropdown should be rendered within the `Portal` @default true */\n  withinPortal?: boolean;\n\n  /** Props to pass down to the `Portal` when `withinPortal` is true */\n  portalProps?: BasePortalProps;\n\n  /** Dropdown `z-index` @default 300 */\n  zIndex?: string | number;\n\n  /** Key of `theme.radius` or any valid CSS value to set border-radius @default theme.defaultRadius */\n  radius?: MantineRadius;\n\n  /** Key of `theme.shadows` or any other valid CSS `box-shadow` value */\n  shadow?: MantineShadow;\n\n  /** If set, popover dropdown will not be rendered */\n  disabled?: boolean;\n\n  /** Determines whether focus should be automatically returned to control when dropdown closes @default false */\n  returnFocus?: boolean;\n\n  /** Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' */\n  floatingStrategy?: FloatingStrategy;\n\n  /** If set, the dropdown is hidden when the element is hidden with styles or not visible on the screen @default true */\n  hideDetached?: boolean;\n\n  /** If `true`, the dropdown picks its side on open (flip runs once, preferring the `position` prop) and then never changes side — scrolling, resizing, and content size changes will not flip the dropdown. The side is recalculated fresh on the next open. Does not affect the `shift` middleware. Set to `false` to keep flip active and allow the dropdown to re-flip on every change. @default true */\n  preventPositionChangeWhenVisible?: boolean;\n}\n\nexport interface PopoverProps extends __PopoverProps, StylesApiProps<PopoverFactory> {\n  __staticSelector?: string;\n\n  /** `Popover.Target` and `Popover.Dropdown` components */\n  children?: React.ReactNode;\n\n  /** Initial opened state for uncontrolled component */\n  defaultOpened?: boolean;\n\n  /** Controlled dropdown opened state */\n  opened?: boolean;\n\n  /** Called with current state when dropdown opens or closes */\n  onChange?: (opened: boolean) => void;\n\n  /** Determines whether dropdown should be closed on outside clicks @default true */\n  closeOnClickOutside?: boolean;\n\n  /** Events that trigger outside clicks */\n  clickOutsideEvents?: string[];\n\n  /** Determines whether focus should be trapped within dropdown @default false */\n  trapFocus?: boolean;\n\n  /** Determines whether dropdown should be closed when `Escape` key is pressed @default true */\n  closeOnEscape?: boolean;\n\n  /** Id base to create accessibility connections */\n  id?: string;\n\n  /** Determines whether dropdown and target elements should have accessible roles @default true */\n  withRoles?: boolean;\n}\n\nexport type PopoverFactory = Factory<{\n  props: PopoverProps;\n  stylesNames: PopoverStylesNames;\n  vars: PopoverCssVariables;\n}>;\n\nconst defaultProps = {\n  position: 'bottom',\n  offset: 8,\n  transitionProps: { transition: 'fade', duration: 150 },\n  middlewares: { flip: true, shift: true, inline: false },\n  arrowSize: 7,\n  arrowOffset: 5,\n  arrowRadius: 0,\n  arrowPosition: 'side',\n  closeOnClickOutside: true,\n  withinPortal: true,\n  closeOnEscape: true,\n  trapFocus: false,\n  withRoles: true,\n  returnFocus: false,\n  withOverlay: false,\n  hideDetached: true,\n  preventPositionChangeWhenVisible: true,\n  clickOutsideEvents: ['mousedown', 'touchstart'],\n  zIndex: getDefaultZIndex('popover'),\n  __staticSelector: 'Popover',\n  width: 'max-content',\n} satisfies Partial<PopoverProps>;\n\nconst varsResolver = createVarsResolver<PopoverFactory>((_, { radius, shadow }) => ({\n  dropdown: {\n    '--popover-radius': radius === undefined ? undefined : getRadius(radius),\n    '--popover-shadow': getShadow(shadow),\n  },\n}));\n\nexport function Popover(_props: PopoverProps) {\n  const props = useProps('Popover', defaultProps, _props);\n  const {\n    children,\n    position,\n    offset,\n    onPositionChange,\n    opened,\n    transitionProps,\n    onExitTransitionEnd,\n    onEnterTransitionEnd,\n    width,\n    middlewares,\n    withArrow,\n    arrowSize,\n    arrowOffset,\n    arrowRadius,\n    arrowPosition,\n    unstyled,\n    classNames,\n    styles,\n    closeOnClickOutside,\n    withinPortal,\n    portalProps,\n    closeOnEscape,\n    clickOutsideEvents,\n    trapFocus,\n    onClose,\n    onDismiss,\n    onOpen,\n    onChange,\n    zIndex,\n    radius,\n    shadow,\n    id,\n    defaultOpened,\n    __staticSelector,\n    withRoles,\n    disabled,\n    returnFocus,\n    variant,\n    keepMounted,\n    vars,\n    floatingStrategy,\n    withOverlay,\n    overlayProps,\n    hideDetached,\n    attributes,\n    preventPositionChangeWhenVisible,\n    ...others\n  } = props;\n\n  const getStyles = useStyles<PopoverFactory>({\n    name: __staticSelector,\n    props,\n    classes,\n    classNames,\n    styles,\n    unstyled,\n    attributes,\n    rootSelector: 'dropdown',\n    vars,\n    varsResolver,\n  });\n\n  const { resolvedStyles } = useResolvedStylesApi<PopoverFactory>({ classNames, styles, props });\n\n  const arrowRef = useRef<HTMLDivElement | null>(null);\n  const [targetNode, setTargetNode] = useState<HTMLElement | null>(null);\n  const [dropdownNode, setDropdownNode] = useState<HTMLElement | null>(null);\n  const { dir } = useDirection();\n  const env = useMantineEnv();\n\n  const uid = useId(id);\n  const popover = usePopover({\n    middlewares,\n    width,\n    position: getFloatingPosition(dir, position),\n    offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n    arrowRef,\n    arrowOffset,\n    onPositionChange,\n    opened,\n    defaultOpened,\n    onChange,\n    onOpen,\n    onClose,\n    onDismiss,\n    strategy: floatingStrategy,\n    disabled,\n    preventPositionChangeWhenVisible,\n    keepMounted,\n  });\n\n  useClickOutside(\n    () => {\n      if (closeOnClickOutside) {\n        popover.onClose();\n        onDismiss?.();\n      }\n    },\n    clickOutsideEvents,\n    [targetNode, dropdownNode]\n  );\n\n  const reference = useCallback(\n    (node: HTMLElement) => {\n      setTargetNode(node);\n      popover.floating.refs.setReference(node);\n    },\n    [popover.floating.refs.setReference]\n  );\n\n  const floating = useCallback(\n    (node: HTMLElement) => {\n      setDropdownNode(node);\n      popover.floating.refs.setFloating(node);\n    },\n    [popover.floating.refs.setFloating]\n  );\n\n  const onExited = useCallback(() => {\n    transitionProps?.onExited?.();\n    onExitTransitionEnd?.();\n    popover.resetLockedPlacement();\n  }, [transitionProps?.onExited, onExitTransitionEnd, popover.resetLockedPlacement]);\n\n  const onEntered = useCallback(() => {\n    transitionProps?.onEntered?.();\n    onEnterTransitionEnd?.();\n  }, [transitionProps?.onEntered, onEnterTransitionEnd]);\n\n  return (\n    <PopoverContextProvider\n      value={{\n        returnFocus,\n        disabled,\n        controlled: popover.controlled,\n        reference,\n        floating,\n        x: popover.floating.x,\n        y: popover.floating.y,\n        arrowX: popover.floating?.middlewareData?.arrow?.x,\n        arrowY: popover.floating?.middlewareData?.arrow?.y,\n        opened: popover.opened,\n        arrowRef,\n        transitionProps: { ...transitionProps, onExited, onEntered },\n        width,\n        withArrow,\n        arrowSize,\n        arrowOffset,\n        arrowRadius,\n        arrowPosition,\n        placement: popover.floating.placement,\n        trapFocus,\n        withinPortal,\n        portalProps,\n        zIndex,\n        radius,\n        shadow,\n        closeOnEscape,\n        onDismiss,\n        onClose: popover.onClose,\n        onToggle: popover.onToggle,\n        getTargetId: () => uid,\n        getDropdownId: () => `${uid}-dropdown`,\n        withRoles,\n        targetProps: others,\n        __staticSelector,\n        classNames,\n        styles,\n        unstyled,\n        variant,\n        keepMounted,\n        getStyles,\n        resolvedStyles,\n        floatingStrategy,\n        referenceHidden:\n          hideDetached && env !== 'test'\n            ? popover.floating.middlewareData.hide?.referenceHidden\n            : false,\n      }}\n    >\n      {children}\n      {withOverlay && (\n        <Transition\n          transition=\"fade\"\n          mounted={popover.opened}\n          duration={transitionProps?.duration || 250}\n          exitDuration={transitionProps?.exitDuration || 250}\n        >\n          {(transitionStyles) => (\n            <OptionalPortal withinPortal={withinPortal}>\n              <Overlay\n                {...overlayProps}\n                {...getStyles('overlay', {\n                  className: overlayProps?.className,\n                  style: [transitionStyles, overlayProps?.style],\n                })}\n              />\n            </OptionalPortal>\n          )}\n        </Transition>\n      )}\n    </PopoverContextProvider>\n  );\n}\n\nPopover.Target = PopoverTarget;\nPopover.Dropdown = PopoverDropdown;\nPopover.ContextMenu = PopoverContextMenu;\nPopover.varsResolver = varsResolver;\nPopover.displayName = '@mantine/core/Popover';\nPopover.extend = (input: ExtendComponent<PopoverFactory>) => input;\nPopover.withProps = (fixedProps: Partial<PopoverProps>) => {\n  const Extended = (props: PopoverProps) => <Popover {...fixedProps} {...props} />;\n  Extended.extend = Popover.extend;\n  Extended.displayName = `WithProps(${Popover.displayName})`;\n  return Extended;\n};\n\nexport namespace Popover {\n  export type Props = PopoverProps;\n  export type __Props = __PopoverProps;\n  export type Factory = PopoverFactory;\n  export type StylesNames = PopoverStylesNames;\n  export type TargetProps = PopoverTargetProps;\n  export type DropdownProps = PopoverDropdownProps;\n  export type Width = PopoverWidth;\n  export type ContextValue = PopoverContextValue;\n\n  export namespace Target {\n    export type Props = PopoverTargetProps;\n  }\n\n  export namespace Dropdown {\n    export type Props = PopoverDropdownProps;\n  }\n\n  export namespace ContextMenu {\n    export type Props = PopoverContextMenuProps;\n  }\n}\n"],"mappings":"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"}

package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs

@@ -0,0 +1,27 @@
+"use client";
+import { getSingleElementChild } from "../../../core/utils/get-single-element-child/get-single-element-child.mjs";
+import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
+import { usePopoverContext } from "../Popover.context.mjs";
+import { createContextMenuHandlers } from "../../../utils/Floating/create-context-menu-handlers.mjs";
+import { cloneElement } from "react";
+//#region packages/@mantine/core/src/components/Popover/PopoverContextMenu/PopoverContextMenu.tsx
+function PopoverContextMenu(props) {
+	const { children, disabled } = useProps("PopoverContextMenu", null, props);
+	const child = getSingleElementChild(children);
+	if (!child) throw new Error("Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
+	const ctx = usePopoverContext();
+	return cloneElement(child, createContextMenuHandlers({
+		childProps: child.props,
+		disabled: disabled || ctx.disabled,
+		opened: ctx.opened,
+		setReference: ctx.reference,
+		open: () => {
+			if (!ctx.opened) ctx.onToggle();
+		}
+	}));
+}
+PopoverContextMenu.displayName = "@mantine/core/PopoverContextMenu";
+//#endregion
+export { PopoverContextMenu };
+
+//# sourceMappingURL=PopoverContextMenu.mjs.map

package/esm/components/Popover/PopoverContextMenu/PopoverContextMenu.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopoverContextMenu.mjs","names":[],"sources":["../../../../src/components/Popover/PopoverContextMenu/PopoverContextMenu.tsx"],"sourcesContent":["import { cloneElement } from 'react';\nimport { getSingleElementChild, useProps } from '../../../core';\nimport { createContextMenuHandlers } from '../../../utils/Floating/create-context-menu-handlers';\nimport { usePopoverContext } from '../Popover.context';\n\nexport interface PopoverContextMenuProps {\n  /** Element that opens the popover when right-clicked. Dropdown is positioned at the cursor. The trigger element must not call `event.preventDefault()` in its own `onContextMenu` handler, otherwise the native context menu is not suppressed. */\n  children: React.ReactNode;\n\n  /** If set, the right-click trigger is disabled and the browser's default context menu is shown */\n  disabled?: boolean;\n}\n\nexport function PopoverContextMenu(props: PopoverContextMenuProps) {\n  const { children, disabled } = useProps('PopoverContextMenu', null, props);\n\n  const child = getSingleElementChild(children);\n  if (!child) {\n    throw new Error(\n      'Popover.ContextMenu component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported'\n    );\n  }\n\n  const ctx = usePopoverContext();\n\n  const handlers = createContextMenuHandlers({\n    childProps: child.props as any,\n    disabled: disabled || ctx.disabled,\n    opened: ctx.opened,\n    setReference: ctx.reference as unknown as (node: object) => void,\n    open: () => {\n      if (!ctx.opened) {\n        ctx.onToggle();\n      }\n    },\n  });\n\n  return cloneElement(child, handlers as any);\n}\n\nPopoverContextMenu.displayName = '@mantine/core/PopoverContextMenu';\n"],"mappings":";;;;;;;AAaA,SAAgB,mBAAmB,OAAgC;CACjE,MAAM,EAAE,UAAU,aAAa,SAAS,sBAAsB,MAAM,KAAK;CAEzE,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,OACH,MAAM,IAAI,MACR,uKACF;CAGF,MAAM,MAAM,kBAAkB;CAc9B,OAAO,aAAa,OAZH,0BAA0B;EACzC,YAAY,MAAM;EAClB,UAAU,YAAY,IAAI;EAC1B,QAAQ,IAAI;EACZ,cAAc,IAAI;EAClB,YAAY;GACV,IAAI,CAAC,IAAI,QACP,IAAI,SAAS;EAEjB;CACF,CAEkC,CAAQ;AAC5C;AAEA,mBAAmB,cAAc"}

package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs

@@ -4,6 +4,8 @@ import { closeOnEscape } from "../../../core/utils/close-on-escape/close-on-esca
 import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
 import { factory } from "../../../core/factory/factory.mjs";
 import { Box } from "../../../core/Box/Box.mjs";
+import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
+import { getArrowMergeDropdownStyles } from "../../../utils/Floating/FloatingArrow/get-arrow-position-styles.mjs";
 import { FloatingArrow } from "../../../utils/Floating/FloatingArrow/FloatingArrow.mjs";
 import { OptionalPortal } from "../../Portal/OptionalPortal.mjs";
 import { Transition } from "../../Transition/Transition.mjs";
@@ -17,6 +19,11 @@ const PopoverDropdown = factory((_props) => {
 	const props = useProps("PopoverDropdown", null, _props);
 	const { className, style, vars, children, onKeyDownCapture, variant, classNames, styles, ref, ...others } = props;
 	const ctx = usePopoverContext();
+	const { dir } = useDirection();
+	const mergeStyles = ctx.arrowPosition === "merge" && ctx.withArrow ? getArrowMergeDropdownStyles({
+		position: ctx.placement,
+		dir
+	}) : void 0;
 	const returnFocus = useFocusReturn({
 		opened: ctx.opened,
 		shouldReturnFocus: ctx.returnFocus
@@ -64,6 +71,7 @@ const PopoverDropdown = factory((_props) => {
 						style: [
 							{
 								...transitionStyles,
+								...mergeStyles,
 								zIndex: ctx.zIndex,
 								top: ctx.y ?? 0,
 								left: ctx.x ?? 0,

package/esm/components/Popover/PopoverDropdown/PopoverDropdown.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  closeOnEscape,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  useProps,\n} from '../../../core';\nimport { FloatingArrow } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n  extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n  props: PopoverDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: PopoverStylesNames;\n  compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n  const props = useProps('PopoverDropdown', null, _props);\n  const {\n    className,\n    style,\n    vars,\n    children,\n    onKeyDownCapture,\n    variant,\n    classNames,\n    styles,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = usePopoverContext();\n\n  const returnFocus = useFocusReturn({\n    opened: ctx.opened,\n    shouldReturnFocus: ctx.returnFocus,\n  });\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-labelledby': ctx.getTargetId(),\n        id: ctx.getDropdownId(),\n        role: 'dialog',\n        tabIndex: -1,\n      }\n    : {};\n\n  const mergedRef = useMergedRef(ref, ctx.floating);\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n      <Transition\n        mounted={ctx.opened}\n        {...ctx.transitionProps}\n        transition={ctx.transitionProps?.transition || 'fade'}\n        duration={ctx.transitionProps?.duration ?? 150}\n        keepMounted={ctx.keepMounted}\n        exitDuration={\n          typeof ctx.transitionProps?.exitDuration === 'number'\n            ? ctx.transitionProps.exitDuration\n            : ctx.transitionProps?.duration\n        }\n      >\n        {(transitionStyles) => (\n          <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n            <Box\n              {...accessibleProps}\n              {...others}\n              variant={variant}\n              onKeyDownCapture={closeOnEscape(\n                () => {\n                  ctx.onClose?.();\n                  ctx.onDismiss?.();\n                },\n                {\n                  active: ctx.closeOnEscape,\n                  onTrigger: returnFocus,\n                  onKeyDown: onKeyDownCapture,\n                }\n              )}\n              data-position={ctx.placement}\n              data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n              {...ctx.getStyles('dropdown', {\n                className,\n                props,\n                classNames,\n                styles,\n                style: [\n                  {\n                    ...transitionStyles,\n                    zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n                    top: ctx.y ?? 0,\n                    left: ctx.x ?? 0,\n                    width: ctx.width === 'target' ? undefined : rem(ctx.width),\n                    ...(ctx.referenceHidden ? { display: 'none' } : null),\n                  },\n                  ctx.resolvedStyles?.dropdown,\n                  styles?.dropdown,\n                  style,\n                ],\n              })}\n            >\n              {children}\n\n              <FloatingArrow\n                ref={ctx.arrowRef}\n                arrowX={ctx.arrowX}\n                arrowY={ctx.arrowY}\n                visible={ctx.withArrow}\n                position={ctx.placement}\n                arrowSize={ctx.arrowSize}\n                arrowRadius={ctx.arrowRadius}\n                arrowOffset={ctx.arrowOffset}\n                arrowPosition={ctx.arrowPosition}\n                {...ctx.getStyles('arrow', {\n                  props,\n                  classNames,\n                  styles,\n                })}\n              />\n            </Box>\n          </FocusTrap>\n        )}\n      </Transition>\n    </OptionalPortal>\n  );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;AA8BA,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,MAAM,MAAM;CACtD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,kBAAkB;CAE9B,MAAM,cAAc,eAAe;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;CACzB,CAAC;CAED,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,YAAY;EACnC,IAAI,IAAI,cAAc;EACtB,MAAM;EACN,UAAU;CACZ,IACA,CAAC;CAEL,MAAM,YAAY,aAAa,KAAK,IAAI,QAAQ;CAEhD,IAAI,IAAI,UACN,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,oBAAC,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,oBAAC,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,qBAAC,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkB,oBACV;MACJ,IAAI,UAAU;MACd,IAAI,YAAY;KAClB,GACA;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;KACb,CACF;KACA,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAY,IAAI,IAAI,KAAK;QACzD,GAAI,IAAI,kBAAkB,EAAE,SAAS,OAAO,IAAI;OAClD;OACA,IAAI,gBAAgB;OACpB,QAAQ;OACR;MACF;KACF,CAAC;eAnCH,CAqCG,UAED,oBAAC,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;MACF,CAAC;KACF,CAAA,CACE;;GACI,CAAA;EAEH,CAAA;CACE,CAAA;AAEpB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}
+{"version":3,"file":"PopoverDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Popover/PopoverDropdown/PopoverDropdown.tsx"],"sourcesContent":["import { useFocusReturn, useMergedRef } from '@mantine/hooks';\nimport {\n  Box,\n  BoxProps,\n  closeOnEscape,\n  CompoundStylesApiProps,\n  ElementProps,\n  factory,\n  Factory,\n  rem,\n  useDirection,\n  useProps,\n} from '../../../core';\nimport { FloatingArrow, getArrowMergeDropdownStyles } from '../../../utils/Floating';\nimport { FocusTrap } from '../../FocusTrap';\nimport { OptionalPortal } from '../../Portal';\nimport { Transition } from '../../Transition';\nimport type { PopoverStylesNames } from '../Popover';\nimport { usePopoverContext } from '../Popover.context';\nimport classes from '../Popover.module.css';\n\nexport interface PopoverDropdownProps\n  extends BoxProps, CompoundStylesApiProps<PopoverDropdownFactory>, ElementProps<'div'> {}\n\nexport type PopoverDropdownFactory = Factory<{\n  props: PopoverDropdownProps;\n  ref: HTMLDivElement;\n  stylesNames: PopoverStylesNames;\n  compound: true;\n}>;\n\nexport const PopoverDropdown = factory<PopoverDropdownFactory>((_props) => {\n  const props = useProps('PopoverDropdown', null, _props);\n  const {\n    className,\n    style,\n    vars,\n    children,\n    onKeyDownCapture,\n    variant,\n    classNames,\n    styles,\n    ref,\n    ...others\n  } = props;\n\n  const ctx = usePopoverContext();\n  const { dir } = useDirection();\n\n  const mergeStyles =\n    ctx.arrowPosition === 'merge' && ctx.withArrow\n      ? getArrowMergeDropdownStyles({ position: ctx.placement, dir })\n      : undefined;\n\n  const returnFocus = useFocusReturn({\n    opened: ctx.opened,\n    shouldReturnFocus: ctx.returnFocus,\n  });\n\n  const accessibleProps = ctx.withRoles\n    ? {\n        'aria-labelledby': ctx.getTargetId(),\n        id: ctx.getDropdownId(),\n        role: 'dialog',\n        tabIndex: -1,\n      }\n    : {};\n\n  const mergedRef = useMergedRef(ref, ctx.floating);\n\n  if (ctx.disabled) {\n    return null;\n  }\n\n  return (\n    <OptionalPortal {...ctx.portalProps} withinPortal={ctx.withinPortal}>\n      <Transition\n        mounted={ctx.opened}\n        {...ctx.transitionProps}\n        transition={ctx.transitionProps?.transition || 'fade'}\n        duration={ctx.transitionProps?.duration ?? 150}\n        keepMounted={ctx.keepMounted}\n        exitDuration={\n          typeof ctx.transitionProps?.exitDuration === 'number'\n            ? ctx.transitionProps.exitDuration\n            : ctx.transitionProps?.duration\n        }\n      >\n        {(transitionStyles) => (\n          <FocusTrap active={ctx.trapFocus && ctx.opened} innerRef={mergedRef}>\n            <Box\n              {...accessibleProps}\n              {...others}\n              variant={variant}\n              onKeyDownCapture={closeOnEscape(\n                () => {\n                  ctx.onClose?.();\n                  ctx.onDismiss?.();\n                },\n                {\n                  active: ctx.closeOnEscape,\n                  onTrigger: returnFocus,\n                  onKeyDown: onKeyDownCapture,\n                }\n              )}\n              data-position={ctx.placement}\n              data-fixed={ctx.floatingStrategy === 'fixed' || undefined}\n              {...ctx.getStyles('dropdown', {\n                className,\n                props,\n                classNames,\n                styles,\n                style: [\n                  {\n                    ...transitionStyles,\n                    ...mergeStyles,\n                    zIndex: ctx.zIndex as React.CSSProperties['zIndex'],\n                    top: ctx.y ?? 0,\n                    left: ctx.x ?? 0,\n                    width: ctx.width === 'target' ? undefined : rem(ctx.width),\n                    ...(ctx.referenceHidden ? { display: 'none' } : null),\n                  },\n                  ctx.resolvedStyles?.dropdown,\n                  styles?.dropdown,\n                  style,\n                ],\n              })}\n            >\n              {children}\n\n              <FloatingArrow\n                ref={ctx.arrowRef}\n                arrowX={ctx.arrowX}\n                arrowY={ctx.arrowY}\n                visible={ctx.withArrow}\n                position={ctx.placement}\n                arrowSize={ctx.arrowSize}\n                arrowRadius={ctx.arrowRadius}\n                arrowOffset={ctx.arrowOffset}\n                arrowPosition={ctx.arrowPosition}\n                {...ctx.getStyles('arrow', {\n                  props,\n                  classNames,\n                  styles,\n                })}\n              />\n            </Box>\n          </FocusTrap>\n        )}\n      </Transition>\n    </OptionalPortal>\n  );\n});\n\nPopoverDropdown.classes = classes;\nPopoverDropdown.displayName = '@mantine/core/PopoverDropdown';\n"],"mappings":";;;;;;;;;;;;;;;;;AA+BA,MAAa,kBAAkB,SAAiC,WAAW;CACzE,MAAM,QAAQ,SAAS,mBAAmB,MAAM,MAAM;CACtD,MAAM,EACJ,WACA,OACA,MACA,UACA,kBACA,SACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,MAAM,kBAAkB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAE7B,MAAM,cACJ,IAAI,kBAAkB,WAAW,IAAI,YACjC,4BAA4B;EAAE,UAAU,IAAI;EAAW;CAAI,CAAC,IAC5D,KAAA;CAEN,MAAM,cAAc,eAAe;EACjC,QAAQ,IAAI;EACZ,mBAAmB,IAAI;CACzB,CAAC;CAED,MAAM,kBAAkB,IAAI,YACxB;EACE,mBAAmB,IAAI,YAAY;EACnC,IAAI,IAAI,cAAc;EACtB,MAAM;EACN,UAAU;CACZ,IACA,CAAC;CAEL,MAAM,YAAY,aAAa,KAAK,IAAI,QAAQ;CAEhD,IAAI,IAAI,UACN,OAAO;CAGT,OACE,oBAAC,gBAAD;EAAgB,GAAI,IAAI;EAAa,cAAc,IAAI;YACrD,oBAAC,YAAD;GACE,SAAS,IAAI;GACb,GAAI,IAAI;GACR,YAAY,IAAI,iBAAiB,cAAc;GAC/C,UAAU,IAAI,iBAAiB,YAAY;GAC3C,aAAa,IAAI;GACjB,cACE,OAAO,IAAI,iBAAiB,iBAAiB,WACzC,IAAI,gBAAgB,eACpB,IAAI,iBAAiB;cAGzB,qBACA,oBAAC,WAAD;IAAW,QAAQ,IAAI,aAAa,IAAI;IAAQ,UAAU;cACxD,qBAAC,KAAD;KACE,GAAI;KACJ,GAAI;KACK;KACT,kBAAkB,oBACV;MACJ,IAAI,UAAU;MACd,IAAI,YAAY;KAClB,GACA;MACE,QAAQ,IAAI;MACZ,WAAW;MACX,WAAW;KACb,CACF;KACA,iBAAe,IAAI;KACnB,cAAY,IAAI,qBAAqB,WAAW,KAAA;KAChD,GAAI,IAAI,UAAU,YAAY;MAC5B;MACA;MACA;MACA;MACA,OAAO;OACL;QACE,GAAG;QACH,GAAG;QACH,QAAQ,IAAI;QACZ,KAAK,IAAI,KAAK;QACd,MAAM,IAAI,KAAK;QACf,OAAO,IAAI,UAAU,WAAW,KAAA,IAAY,IAAI,IAAI,KAAK;QACzD,GAAI,IAAI,kBAAkB,EAAE,SAAS,OAAO,IAAI;OAClD;OACA,IAAI,gBAAgB;OACpB,QAAQ;OACR;MACF;KACF,CAAC;eApCH,CAsCG,UAED,oBAAC,eAAD;MACE,KAAK,IAAI;MACT,QAAQ,IAAI;MACZ,QAAQ,IAAI;MACZ,SAAS,IAAI;MACb,UAAU,IAAI;MACd,WAAW,IAAI;MACf,aAAa,IAAI;MACjB,aAAa,IAAI;MACjB,eAAe,IAAI;MACnB,GAAI,IAAI,UAAU,SAAS;OACzB;OACA;OACA;MACF,CAAC;KACF,CAAA,CACE;;GACI,CAAA;EAEH,CAAA;CACE,CAAA;AAEpB,CAAC;AAED,gBAAgB,UAAUA;AAC1B,gBAAgB,cAAc"}

package/esm/components/Popover/use-popover.mjs

@@ -1,6 +1,5 @@
 "use client";
-import { useMantineEnv } from "../../core/MantineProvider/Mantine.context.mjs";
-import { useEffect, useRef } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useDidUpdate, useIsomorphicEffect, useUncontrolled } from "@mantine/hooks";
 import { arrow, autoUpdate, flip, hide, inline, limitShift, offset, shift, size, useFloating } from "@floating-ui/react";
 //#region packages/@mantine/core/src/components/Popover/use-popover.ts
@@ -14,11 +13,17 @@ function getDefaultMiddlewares(middlewares) {
 	if (middlewares.flip === void 0) result.flip = true;
 	return result;
 }
-function getPopoverMiddlewares(options, getFloating, env) {
+function getPopoverMiddlewares(options, getFloating, disableFlip, lockEnabled) {
 	const middlewaresOptions = getDefaultMiddlewares(options.middlewares);
 	const middlewares = [offset(options.offset), hide()];
-	if (options.dropdownVisible && env !== "test" && options.preventPositionChangeWhenVisible) middlewaresOptions.flip = false;
-	if (middlewaresOptions.flip) middlewares.push(typeof middlewaresOptions.flip === "boolean" ? flip() : flip(middlewaresOptions.flip));
+	if (middlewaresOptions.flip && !disableFlip) {
+		const userFlip = typeof middlewaresOptions.flip === "boolean" ? {} : middlewaresOptions.flip;
+		const flipOptions = lockEnabled ? {
+			fallbackStrategy: "initialPlacement",
+			...userFlip
+		} : userFlip;
+		middlewares.push(flip(flipOptions));
+	}
 	if (middlewaresOptions.shift) middlewares.push(shift(typeof middlewaresOptions.shift === "boolean" ? {
 		limiter: limitShift(),
 		padding: 5
@@ -52,7 +57,6 @@ function getPopoverMiddlewares(options, getFloating, env) {
 	return middlewares;
 }
 function usePopover(options) {
-	const env = useMantineEnv();
 	const [_opened, setOpened] = useUncontrolled({
 		value: options.opened,
 		defaultValue: options.defaultOpened,
@@ -60,6 +64,14 @@ function usePopover(options) {
 		onChange: options.onChange
 	});
 	const previouslyOpened = useRef(_opened);
+	const [lockedPlacement, setLockedPlacement] = useState(null);
+	const lockEnabled = options.preventPositionChangeWhenVisible !== false;
+	const wasOpenedRef = useRef(_opened);
+	if (_opened !== wasOpenedRef.current) {
+		wasOpenedRef.current = _opened;
+		if (_opened && lockedPlacement !== null) setLockedPlacement(null);
+	}
+	const resetLockedPlacement = useCallback(() => setLockedPlacement(null), []);
 	const onClose = () => {
 		if (_opened && !options.disabled) setOpened(false);
 	};
@@ -67,19 +79,46 @@ function usePopover(options) {
 		if (!options.disabled) setOpened(!_opened);
 	};
 	const floating = useFloating({
+		open: _opened,
 		strategy: options.strategy,
-		placement: options.preventPositionChangeWhenVisible ? options.positionRef.current : options.position,
-		middleware: getPopoverMiddlewares(options, () => floating, env),
+		placement: lockEnabled ? lockedPlacement ?? options.position : options.position,
+		middleware: getPopoverMiddlewares(options, () => floating, lockEnabled && lockedPlacement !== null, lockEnabled),
 		whileElementsMounted: !options.keepMounted ? autoUpdate : void 0
 	});
 	useEffect(() => {
 		if (!floating.refs.reference.current || !floating.refs.floating.current) return;
 		if (_opened) return autoUpdate(floating.refs.reference.current, floating.refs.floating.current, floating.update);
 	}, [_opened, floating.update]);
-	useDidUpdate(() => {
-		options.onPositionChange?.(floating.placement);
-		options.positionRef.current = floating.placement;
-	}, [floating.placement, options.preventPositionChangeWhenVisible]);
+	const measuredAfterShowRef = useRef(false);
+	useIsomorphicEffect(() => {
+		if (!_opened) {
+			measuredAfterShowRef.current = false;
+			return;
+		}
+		if (!lockEnabled || lockedPlacement !== null) return;
+		const flEl = floating.refs.floating.current;
+		if (!flEl || flEl.offsetHeight === 0 || flEl.offsetWidth === 0) return;
+		if (!measuredAfterShowRef.current) {
+			measuredAfterShowRef.current = true;
+			floating.update();
+			return;
+		}
+		if (floating.isPositioned) setLockedPlacement(floating.placement);
+	}, [
+		lockEnabled,
+		_opened,
+		floating.isPositioned,
+		floating.placement,
+		lockedPlacement,
+		floating.update
+	]);
+	const previousPlacementRef = useRef(floating.placement);
+	useIsomorphicEffect(() => {
+		if (previousPlacementRef.current !== floating.placement) {
+			previousPlacementRef.current = floating.placement;
+			options.onPositionChange?.(floating.placement);
+		}
+	}, [floating.placement]);
 	useDidUpdate(() => {
 		if (_opened !== previouslyOpened.current) if (!_opened) options.onClose?.();
 		else options.onOpen?.();
@@ -89,19 +128,13 @@ function usePopover(options) {
 		options.onClose,
 		options.onOpen
 	]);
-	useIsomorphicEffect(() => {
-		let timeout = -1;
-		if (_opened) timeout = window.setTimeout(() => options.setDropdownVisible(true), 4);
-		return () => {
-			window.clearTimeout(timeout);
-		};
-	}, [_opened, options.position]);
 	return {
 		floating,
 		controlled: typeof options.opened === "boolean",
 		opened: _opened,
 		onClose,
-		onToggle
+		onToggle,
+		resetLockedPlacement
 	};
 }
 //#endregion