npm - @mantine/core - Versions diffs - 9.5.1 → 9.6.0 - Mend

@mantine/core 9.5.1 → 9.6.0

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

Files changed (904) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tabs.mjs","names":["useId","classes"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { useForceUpdate, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSafeId,\n getThemeColor,\n MantineColor,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { TabsProvider, type TabsContextValue } from './Tabs.context';\nimport { TabsList, TabsListStylesNames, type TabsListProps } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames, type TabsPanelProps } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames, type TabsTabProps } from './TabsTab/TabsTab';\nimport classes from './Tabs.module.css';\nexport type TabsStylesNames =\n \| 'root'\n \| TabsListStylesNames\n \| TabsPanelStylesNames\n \| TabsTabStylesNames;\n\nexport type TabsVariant = 'default' \| 'outline' \| 'pills';\nexport type TabsCssVariables = {\n root: '--tabs-color' \| '--tabs-radius';\n};\n\nexport interface TabsProps\n extends\n BoxProps,\n StylesApiProps<TabsFactory>,\n ElementProps<'div', 'defaultValue' \| 'value' \| 'onChange'> {\n /** Uncontrolled component default value /\n defaultValue?: string \| null;\n\n /* Controlled component value /\n value?: string \| null;\n\n /* Called when value changes /\n onChange?: (value: string \| null) => void;\n\n /* Tabs orientation @default 'horizontal' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` @default 'left' /\n placement?: 'left' \| 'right';\n\n /* Base id, used to generate ids to connect labels with controls, generated randomly by default /\n id?: string;\n\n /* If set, arrow key presses loop though items (first to last and last to first) @default true /\n loop?: boolean;\n\n /* If set, tab is activated with arrow key press @default true /\n activateTabWithKeyboard?: boolean;\n\n /* If set, tab can be deactivated @default false /\n allowTabDeactivation?: boolean;\n\n /* Tabs content /\n children?: React.ReactNode;\n\n /* Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants /\n color?: MantineColor;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Determines whether tabs should have inverted styles @default false /\n inverted?: boolean;\n\n /* If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true /\n keepMounted?: boolean;\n\n /* Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' /\n keepMountedMode?: 'activity' \| 'display-none';\n\n /* If set, adjusts text color based on background color for `pills` variant */\n autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n props: TabsProps;\n ref: HTMLDivElement;\n variant: TabsVariant;\n stylesNames: TabsStylesNames;\n vars: TabsCssVariables;\n staticComponents: {\n Tab: typeof TabsTab;\n Panel: typeof TabsPanel;\n List: typeof TabsList;\n };\n}>;\n\nconst VALUE_ERROR =\n 'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps = {\n keepMounted: true,\n keepMountedMode: 'activity',\n orientation: 'horizontal',\n loop: true,\n activateTabWithKeyboard: true,\n variant: 'default',\n placement: 'left',\n} satisfies Partial<TabsProps>;\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n root: {\n '--tabs-radius': getRadius(radius),\n '--tabs-color': getThemeColor(color, theme),\n '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props) => {\n const props = useProps('Tabs', defaultProps, _props);\n const {\n defaultValue,\n value,\n onChange,\n orientation,\n children,\n loop,\n id,\n activateTabWithKeyboard,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n placement,\n keepMounted,\n keepMountedMode,\n classNames,\n styles,\n unstyled,\n className,\n style,\n vars,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const uid = useId(id);\n const mountedPanels = useRef(new Set<string>());\n const forceUpdate = useForceUpdate();\n\n const setMountedPanel = useCallback((panelValue: string, mounted: boolean) => {\n const panels = mountedPanels.current;\n if (mounted && !panels.has(panelValue)) {\n panels.add(panelValue);\n forceUpdate();\n } else if (!mounted && panels.has(panelValue)) {\n panels.delete(panelValue);\n forceUpdate();\n }\n }, []);\n\n const [currentTab, setCurrentTab] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const getStyles = useStyles<TabsFactory>({\n name: 'Tabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <TabsProvider\n value={{\n placement,\n value: currentTab,\n orientation,\n id: uid,\n loop,\n activateTabWithKeyboard,\n getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n onChange: setCurrentTab,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n keepMounted,\n keepMountedMode,\n unstyled,\n getStyles,\n mountedPanels,\n setMountedPanel,\n }}\n >\n <Box\n id={uid}\n variant={variant}\n mod={[\n {\n orientation,\n inverted: orientation === 'horizontal' && inverted,\n placement: orientation === 'vertical' && placement,\n },\n mod,\n ]}\n {...getStyles('root')}\n {...others}\n >\n {children}\n </Box>\n </TabsProvider>\n );\n});\n\nTabs.classes = classes;\nTabs.varsResolver = varsResolver;\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nexport namespace Tabs {\n export type Props = TabsProps;\n export type StylesNames = TabsStylesNames;\n export type CssVariables = TabsCssVariables;\n export type Factory = TabsFactory;\n export type Variant = TabsVariant;\n export type ContextValue = TabsContextValue;\n\n export namespace Tab {\n export type Props = TabsTabProps;\n export type StylesNames = TabsTabStylesNames;\n }\n\n export namespace Panel {\n export type Props = TabsPanelProps;\n export type StylesNames = TabsPanelStylesNames;\n }\n\n export namespace List {\n export type Props = TabsListProps;\n export type StylesNames = TabsListStylesNames;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuGA,MAAM,cACJ;AAEF,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,aAAa;CACb,MAAM;CACN,yBAAyB;CACzB,SAAS;CACT,WAAW;AACb;AAEA,MAAM,eAAe,oBAAiC,OAAO,EAAE,QAAQ,OAAO,oBAAoB,EAChG,MAAM;CACJ,iBAAiB,UAAU,MAAM;CACjC,gBAAgB,cAAc,OAAO,KAAK;CAC1C,qBAAqB,qBAAqB,cAAc,KAAK,IACzD,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EAAE;AAEF,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,cACA,OACA,UACA,aACA,UACA,MACA,IACA,yBACA,sBACA,SACA,OACA,QACA,UACA,WACA,aACA,iBACA,YACA,QACA,UACA,WACA,OACA,MACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,gBAAgB,uBAAO,IAAI,IAAY,CAAC;CAC9C,MAAM,cAAc,eAAe;CAEnC,MAAM,kBAAkB,aAAa,YAAoB,YAAqB;EAC5E,MAAM,SAAS,cAAc;EAC7B,IAAI,WAAW,CAAC,OAAO,IAAI,UAAU,GAAG;GACtC,OAAO,IAAI,UAAU;GACrB,YAAY;EACd,OAAO,IAAI,CAAC,WAAW,OAAO,IAAI,UAAU,GAAG;GAC7C,OAAO,OAAO,UAAU;GACxB,YAAY;EACd;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;EAClD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EACE,OAAO;GACL;GACA,OAAO;GACP;GACA,IAAI;GACJ;GACA;GACA,UAAU,UAAU,GAAG,IAAI,OAAO,WAAW;GAC7C,YAAY,UAAU,GAAG,IAAI,SAAS,WAAW;GACjD,UAAU;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;~~YAEA~~,oBAAC,KAAD;GACE,IAAI;GACK;GACT,KAAK,CACH;IACE;IACA,UAAU,gBAAgB,gBAAgB;IAC1C,WAAW,gBAAgB,cAAc;GAC3C,GACA,GACF;GACA,GAAI,UAAU,MAAM;GACpB,GAAI;GAEH;EACE,CAAA;CACO,CAAA;AAElB,CAAC;AAED,KAAK,UAAUC;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,QAAQ;AACb,KAAK,OAAO"}
1	+ {"version":3,"file":"Tabs.mjs","names":["useId","classes"],"sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useCallback, useRef } from 'react';\nimport { useForceUpdate, useId, useUncontrolled } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSafeId,\n getThemeColor,\n MantineColor,\n MantineRadius,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { TabsProvider, type TabsContextValue } from './Tabs.context';\nimport { TabsList, TabsListStylesNames, type TabsListProps } from './TabsList/TabsList';\nimport { TabsPanel, TabsPanelStylesNames, type TabsPanelProps } from './TabsPanel/TabsPanel';\nimport { TabsTab, TabsTabStylesNames, type TabsTabProps } from './TabsTab/TabsTab';\nimport classes from './Tabs.module.css';\nexport type TabsStylesNames =\n \| 'root'\n \| TabsListStylesNames\n \| TabsPanelStylesNames\n \| TabsTabStylesNames;\n\nexport type TabsVariant = 'default' \| 'outline' \| 'pills';\nexport type TabsCssVariables = {\n root: '--tabs-color' \| '--tabs-radius';\n};\n\nexport interface TabsProps\n extends\n BoxProps,\n StylesApiProps<TabsFactory>,\n ElementProps<'div', 'defaultValue' \| 'value' \| 'onChange'> {\n /** Uncontrolled component default value /\n defaultValue?: string \| null;\n\n /* Controlled component value /\n value?: string \| null;\n\n /* Called when value changes /\n onChange?: (value: string \| null) => void;\n\n /* Tabs orientation @default 'horizontal' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* `Tabs.List` placement relative to `Tabs.Panel`, applicable only when `orientation=\"vertical\"` @default 'left' /\n placement?: 'left' \| 'right';\n\n /* Base id, used to generate ids to connect labels with controls, generated randomly by default /\n id?: string;\n\n /* If set, arrow key presses loop though items (first to last and last to first) @default true /\n loop?: boolean;\n\n /* If set, tab is activated with arrow key press @default true /\n activateTabWithKeyboard?: boolean;\n\n /* If set, tab can be deactivated @default false /\n allowTabDeactivation?: boolean;\n\n /* Tabs content /\n children?: React.ReactNode;\n\n /* Changes colors of `Tabs.Tab` components when variant is `pills` or `default`, does nothing for other variants /\n color?: MantineColor;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Determines whether tabs should have inverted styles @default false /\n inverted?: boolean;\n\n /* If set to `false`, `Tabs.Panel` content will be unmounted when the associated tab is not active @default true /\n keepMounted?: boolean;\n\n /* Controls how inactive tabs content is hidden when `keepMounted` is `true`, `'activity'` – hidden with `Activity` component, `'display-none'` – hidden with `display: none` styles @default 'activity' /\n keepMountedMode?: 'activity' \| 'display-none';\n\n /* If set, adjusts text color based on background color for `pills` variant */\n autoContrast?: boolean;\n}\n\nexport type TabsFactory = Factory<{\n props: TabsProps;\n ref: HTMLDivElement;\n variant: TabsVariant;\n stylesNames: TabsStylesNames;\n vars: TabsCssVariables;\n staticComponents: {\n Tab: typeof TabsTab;\n Panel: typeof TabsPanel;\n List: typeof TabsList;\n };\n}>;\n\nconst VALUE_ERROR =\n 'Tabs.Tab or Tabs.Panel component was rendered with invalid value or without value';\n\nconst defaultProps = {\n keepMounted: true,\n keepMountedMode: 'activity',\n orientation: 'horizontal',\n loop: true,\n activateTabWithKeyboard: true,\n variant: 'default',\n placement: 'left',\n} satisfies Partial<TabsProps>;\n\nconst varsResolver = createVarsResolver<TabsFactory>((theme, { radius, color, autoContrast }) => ({\n root: {\n '--tabs-radius': getRadius(radius),\n '--tabs-color': getThemeColor(color, theme),\n '--tabs-text-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n}));\n\nexport const Tabs = factory<TabsFactory>((_props) => {\n const props = useProps('Tabs', defaultProps, _props);\n const {\n defaultValue,\n value,\n onChange,\n orientation,\n children,\n loop,\n id,\n activateTabWithKeyboard,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n placement,\n keepMounted,\n keepMountedMode,\n classNames,\n styles,\n unstyled,\n className,\n style,\n vars,\n autoContrast,\n mod,\n attributes,\n ...others\n } = props;\n\n const uid = useId(id);\n const mountedPanels = useRef(new Set<string>());\n const forceUpdate = useForceUpdate();\n\n const setMountedPanel = useCallback((panelValue: string, mounted: boolean) => {\n const panels = mountedPanels.current;\n if (mounted && !panels.has(panelValue)) {\n panels.add(panelValue);\n forceUpdate();\n } else if (!mounted && panels.has(panelValue)) {\n panels.delete(panelValue);\n forceUpdate();\n }\n }, []);\n\n const [currentTab, setCurrentTab] = useUncontrolled({\n value,\n defaultValue,\n finalValue: null,\n onChange,\n });\n\n const getStyles = useStyles<TabsFactory>({\n name: 'Tabs',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <TabsProvider\n value={{\n placement,\n value: currentTab,\n orientation,\n id: uid,\n loop,\n activateTabWithKeyboard,\n getTabId: getSafeId(`${uid}-tab`, VALUE_ERROR),\n getPanelId: getSafeId(`${uid}-panel`, VALUE_ERROR),\n onChange: setCurrentTab,\n allowTabDeactivation,\n variant,\n color,\n radius,\n inverted,\n keepMounted,\n keepMountedMode,\n unstyled,\n getStyles,\n mountedPanels,\n setMountedPanel,\n }}\n >\n <Box\n id={uid}\n variant={variant}\n mod={[\n {\n orientation,\n inverted: orientation === 'horizontal' && inverted,\n placement: orientation === 'vertical' && placement,\n },\n mod,\n ]}\n {...getStyles('root')}\n {...others}\n >\n {children}\n </Box>\n </TabsProvider>\n );\n});\n\nTabs.classes = classes;\nTabs.varsResolver = varsResolver;\nTabs.displayName = '@mantine/core/Tabs';\nTabs.Tab = TabsTab;\nTabs.Panel = TabsPanel;\nTabs.List = TabsList;\n\nexport namespace Tabs {\n export type Props = TabsProps;\n export type StylesNames = TabsStylesNames;\n export type CssVariables = TabsCssVariables;\n export type Factory = TabsFactory;\n export type Variant = TabsVariant;\n export type ContextValue = TabsContextValue;\n\n export namespace Tab {\n export type Props = TabsTabProps;\n export type StylesNames = TabsTabStylesNames;\n }\n\n export namespace Panel {\n export type Props = TabsPanelProps;\n export type StylesNames = TabsPanelStylesNames;\n }\n\n export namespace List {\n export type Props = TabsListProps;\n export type StylesNames = TabsListStylesNames;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAuGA,MAAM,cACJ;AAEF,MAAM,eAAe;CACnB,aAAa;CACb,iBAAiB;CACjB,aAAa;CACb,MAAM;CACN,yBAAyB;CACzB,SAAS;CACT,WAAW;AACb;AAEA,MAAM,eAAe,oBAAiC,OAAO,EAAE,QAAQ,OAAO,oBAAoB,EAChG,MAAM;CACJ,iBAAiB,UAAU,MAAM;CACjC,gBAAgB,cAAc,OAAO,KAAK;CAC1C,qBAAqB,qBAAqB,cAAc,KAAK,IACzD,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EAAE;AAEF,MAAa,OAAO,SAAsB,WAAW;CACnD,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,cACA,OACA,UACA,aACA,UACA,MACA,IACA,yBACA,sBACA,SACA,OACA,QACA,UACA,WACA,aACA,iBACA,YACA,QACA,UACA,WACA,OACA,MACA,cACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,gBAAgB,uBAAO,IAAI,IAAY,CAAC;CAC9C,MAAM,cAAc,eAAe;CAEnC,MAAM,kBAAkB,aAAa,YAAoB,YAAqB;EAC5E,MAAM,SAAS,cAAc;EAC7B,IAAI,WAAW,CAAC,OAAO,IAAI,UAAU,GAAG;GACtC,OAAO,IAAI,UAAU;GACrB,YAAY;EACd,OAAO,IAAI,CAAC,WAAW,OAAO,IAAI,UAAU,GAAG;GAC7C,OAAO,OAAO,UAAU;GACxB,YAAY;EACd;CACF,GAAG,CAAC,CAAC;CAEL,MAAM,CAAC,YAAY,iBAAiB,gBAAgB;EAClD;EACA;EACA,YAAY;EACZ;CACF,CAAC;CAED,MAAM,YAAY,UAAuB;EACvC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EACE,OAAO;GACL;GACA,OAAO;GACP;GACA,IAAI;GACJ;GACA;GACA,UAAU,UAAU,GAAG,IAAI,OAAO,WAAW;GAC7C,YAAY,UAAU,GAAG,IAAI,SAAS,WAAW;GACjD,UAAU;GACV;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF;EAEA,UAAA,oBAAC,KAAD;GACE,IAAI;GACK;GACT,KAAK,CACH;IACE;IACA,UAAU,gBAAgB,gBAAgB;IAC1C,WAAW,gBAAgB,cAAc;GAC3C,GACA,GACF;GACA,GAAI,UAAU,MAAM;GACpB,GAAI;GAEH;EACE,CAAA;CACO,CAAA;AAElB,CAAC;AAED,KAAK,UAAUC;AACf,KAAK,eAAe;AACpB,KAAK,cAAc;AACnB,KAAK,MAAM;AACX,KAAK,QAAQ;AACb,KAAK,OAAO"}

package/esm/components/Tabs/TabsPanel/TabsPanel.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsPanel.mjs","names":["classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity, useEffect } from 'react';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useMantineEnv,\n useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n /** Panel content /\n children: React.ReactNode;\n\n /* If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component /\n keepMounted?: boolean;\n\n /* Value of associated control */\n value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n props: TabsPanelProps;\n ref: HTMLDivElement;\n stylesNames: TabsPanelStylesNames;\n compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n const props = useProps('TabsPanel', null, _props);\n const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n props;\n\n const env = useMantineEnv();\n const ctx = useTabsContext();\n\n useEffect(() => {\n ctx.setMountedPanel(value, true);\n return () => {\n ctx.setMountedPanel(value, false);\n };\n }, [value]);\n\n const active = ctx.value === value;\n const shouldKeepMounted = ctx.keepMounted \|\| keepMounted;\n const useActivity = ctx.keepMountedMode !== 'display-none';\n const content =\n shouldKeepMounted && useActivity && env !== 'test' ? (\n <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n ) : shouldKeepMounted ? (\n children\n ) : active ? (\n children\n ) : null;\n\n return (\n <Box\n {...ctx.getStyles('panel', {\n className,\n classNames,\n styles,\n style: [style, !active ? { display: 'none' } : undefined],\n props,\n })}\n mod={[{ orientation: ctx.orientation }, mod]}\n role=\"tabpanel\"\n id={ctx.getPanelId(value)}\n aria-labelledby={ctx.getTabId(value)}\n {...others}\n >\n {content}\n </Box>\n );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;AAmCA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAM,cAAc;CAC1B,MAAM,MAAM,eAAe;CAE3B,gBAAgB;EACd,IAAI,gBAAgB,OAAO,IAAI;EAC/B,aAAa;GACX,IAAI,gBAAgB,OAAO,KAAK;EAClC;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,cAAc,IAAI,oBAAoB;CAC5C,MAAM,UACJ,qBAAqB,eAAe,QAAQ,SAC1C,oBAAC,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;CAAmB,CAAA,IACjE,oBACF,WACE,SACF,WACE;CAEN,OACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,OAAO,IAAI,KAAA,CAAS;GACxD;EACF,CAAC;EACD,KAAK,CAAC,EAAE,aAAa,IAAI,YAAY,GAAG,GAAG;EAC3C,MAAK;EACL,IAAI,IAAI,WAAW,KAAK;EACxB,mBAAiB,IAAI,SAAS,KAAK;EACnC,GAAI;~~YAEH~~;CACE,CAAA;AAET,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,cAAc"}
1	+ {"version":3,"file":"TabsPanel.mjs","names":["classes"],"sources":["../../../../src/components/Tabs/TabsPanel/TabsPanel.tsx"],"sourcesContent":["import { Activity, useEffect } from 'react';\nimport {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n useMantineEnv,\n useProps,\n} from '../../../core';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsPanelStylesNames = 'panel';\n\nexport interface TabsPanelProps\n extends BoxProps, CompoundStylesApiProps<TabsPanelFactory>, ElementProps<'div'> {\n /** Panel content /\n children: React.ReactNode;\n\n /* If set, the content is kept mounted, even if `keepMounted` is set `false` in the parent `Tabs` component /\n keepMounted?: boolean;\n\n /* Value of associated control */\n value: string;\n}\n\nexport type TabsPanelFactory = Factory<{\n props: TabsPanelProps;\n ref: HTMLDivElement;\n stylesNames: TabsPanelStylesNames;\n compound: true;\n}>;\n\nexport const TabsPanel = factory<TabsPanelFactory>((_props) => {\n const props = useProps('TabsPanel', null, _props);\n const { children, className, value, classNames, styles, style, mod, keepMounted, ...others } =\n props;\n\n const env = useMantineEnv();\n const ctx = useTabsContext();\n\n useEffect(() => {\n ctx.setMountedPanel(value, true);\n return () => {\n ctx.setMountedPanel(value, false);\n };\n }, [value]);\n\n const active = ctx.value === value;\n const shouldKeepMounted = ctx.keepMounted \|\| keepMounted;\n const useActivity = ctx.keepMountedMode !== 'display-none';\n const content =\n shouldKeepMounted && useActivity && env !== 'test' ? (\n <Activity mode={active ? 'visible' : 'hidden'}>{children}</Activity>\n ) : shouldKeepMounted ? (\n children\n ) : active ? (\n children\n ) : null;\n\n return (\n <Box\n {...ctx.getStyles('panel', {\n className,\n classNames,\n styles,\n style: [style, !active ? { display: 'none' } : undefined],\n props,\n })}\n mod={[{ orientation: ctx.orientation }, mod]}\n role=\"tabpanel\"\n id={ctx.getPanelId(value)}\n aria-labelledby={ctx.getTabId(value)}\n {...others}\n >\n {content}\n </Box>\n );\n});\n\nTabsPanel.classes = classes;\nTabsPanel.displayName = '@mantine/core/TabsPanel';\n"],"mappings":";;;;;;;;;;AAmCA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EAAE,UAAU,WAAW,OAAO,YAAY,QAAQ,OAAO,KAAK,aAAa,GAAG,WAClF;CAEF,MAAM,MAAM,cAAc;CAC1B,MAAM,MAAM,eAAe;CAE3B,gBAAgB;EACd,IAAI,gBAAgB,OAAO,IAAI;EAC/B,aAAa;GACX,IAAI,gBAAgB,OAAO,KAAK;EAClC;CACF,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,SAAS,IAAI,UAAU;CAC7B,MAAM,oBAAoB,IAAI,eAAe;CAC7C,MAAM,cAAc,IAAI,oBAAoB;CAC5C,MAAM,UACJ,qBAAqB,eAAe,QAAQ,SAC1C,oBAAC,UAAD;EAAU,MAAM,SAAS,YAAY;EAAW;CAAmB,CAAA,IACjE,oBACF,WACE,SACF,WACE;CAEN,OACE,oBAAC,KAAD;EACE,GAAI,IAAI,UAAU,SAAS;GACzB;GACA;GACA;GACA,OAAO,CAAC,OAAO,CAAC,SAAS,EAAE,SAAS,OAAO,IAAI,KAAA,CAAS;GACxD;EACF,CAAC;EACD,KAAK,CAAC,EAAE,aAAa,IAAI,YAAY,GAAG,GAAG;EAC3C,MAAK;EACL,IAAI,IAAI,WAAW,KAAK;EACxB,mBAAiB,IAAI,SAAS,KAAK;EACnC,GAAI;EAEH,UAAA;CACE,CAAA;AAET,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,cAAc"}

package/esm/components/Tabs/TabsTab/TabsTab.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TabsTab.mjs","names":["classes"],"sources":["../../../../src/components/Tabs/TabsTab/TabsTab.tsx"],"sourcesContent":["import {\n CompoundStylesApiProps,\n createScopedKeydownHandler,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n useDirection,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsTabStylesNames = 'tab' \| 'tabSection' \| 'tabLabel';\n\nexport interface TabsTabProps\n extends\n Omit<UnstyledButtonProps, 'classNames' \| 'styles' \| 'vars'>,\n CompoundStylesApiProps<TabsTabFactory>,\n ElementProps<'button'> {\n /** Value of associated panel /\n value: string;\n\n /* Tab label /\n children?: React.ReactNode;\n\n /* Content displayed on the right side of the label /\n rightSection?: React.ReactNode;\n\n /* Content displayed on the left side of the label /\n leftSection?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` */\n color?: MantineColor;\n}\n\nexport type TabsTabFactory = Factory<{\n props: TabsTabProps;\n ref: HTMLButtonElement;\n stylesNames: TabsTabStylesNames;\n compound: true;\n}>;\n\nexport const TabsTab = factory<TabsTabFactory>((_props) => {\n const props = useProps('TabsTab', null, _props);\n const {\n className,\n children,\n rightSection,\n leftSection,\n value,\n onClick,\n onKeyDown,\n disabled,\n color,\n style,\n classNames,\n styles,\n vars,\n mod,\n tabIndex,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const ctx = useTabsContext();\n const active = value === ctx.value;\n const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n onClick?.(event);\n };\n\n const stylesApiProps = { classNames, styles, props };\n\n return (\n <UnstyledButton\n {...ctx.getStyles('tab', { className, style, variant: ctx.variant, ...stylesApiProps })}\n disabled={disabled}\n unstyled={ctx.unstyled}\n variant={ctx.variant}\n mod={[\n {\n active,\n disabled,\n orientation: ctx.orientation,\n inverted: ctx.inverted,\n placement: ctx.orientation === 'vertical' && ctx.placement,\n },\n mod,\n ]}\n role=\"tab\"\n id={ctx.getTabId(value)}\n aria-selected={active}\n tabIndex={tabIndex !== undefined ? tabIndex : active \|\| ctx.value === null ? 0 : -1}\n aria-controls={ctx.mountedPanels.current.has(value) ? ctx.getPanelId(value) : undefined}\n onClick={activateTab}\n __vars={{ '--tabs-color': color ? getThemeColor(color, theme) : undefined }}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[role=\"tab\"]',\n parentSelector: '[role=\"tablist\"]',\n activateOnFocus: ctx.activateTabWithKeyboard,\n loop: ctx.loop,\n orientation: ctx.orientation \|\| 'horizontal',\n dir,\n onKeyDown,\n })}\n {...others}\n >\n {leftSection && (\n <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"left\">\n {leftSection}\n </span>\n )}\n {children && <span {...ctx.getStyles('tabLabel', stylesApiProps)}>{children}</span>}\n {rightSection && (\n <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"right\">\n {rightSection}\n </span>\n )}\n </UnstyledButton>\n );\n});\n\nTabsTab.classes = classes;\nTabsTab.displayName = '@mantine/core/TabsTab';\n"],"mappings":";;;;;;;;;;;;AA8CA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,MAAM,MAAM;CAC9C,MAAM,EACJ,WACA,UACA,cACA,aACA,OACA,SACA,WACA,UACA,OACA,OACA,YACA,QACA,MACA,KACA,UACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,eAAe,UAA2D;EAC9E,IAAI,SAAS,IAAI,uBAAwB,UAAU,IAAI,QAAQ,OAAO,QAAS,KAAK;EACpF,UAAU,KAAK;CACjB;CAEA,MAAM,iBAAiB;EAAE;EAAY;EAAQ;CAAM;CAEnD,OACE,qBAAC,gBAAD;EACE,GAAI,IAAI,UAAU,OAAO;GAAE;GAAW;GAAO,SAAS,IAAI;GAAS,GAAG;EAAe,CAAC;EAC5E;EACV,UAAU,IAAI;EACd,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA;GACA,aAAa,IAAI;GACjB,UAAU,IAAI;GACd,WAAW,IAAI,gBAAgB,cAAc,IAAI;EACnD,GACA,GACF;EACA,MAAK;EACL,IAAI,IAAI,SAAS,KAAK;EACtB,iBAAe;EACf,UAAU,aAAa,KAAA,IAAY,WAAW,UAAU,IAAI,UAAU,OAAO,IAAI;EACjF,iBAAe,IAAI,cAAc,QAAQ,IAAI,KAAK,IAAI,IAAI,WAAW,KAAK,IAAI,KAAA;EAC9E,SAAS;EACT,QAAQ,EAAE,gBAAgB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;EAC1E,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB,IAAI;GACrB,MAAM,IAAI;GACV,aAAa,IAAI,eAAe;GAChC;GACA;EACF,CAAC;EACD,GAAI;YA/BN;GAiCG,eACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;~~cAClE~~;GACG,CAAA;GAEP,YAAY,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,cAAc;IAAI;GAAe,CAAA;GACjF,gBACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;~~cAClE~~;GACG,CAAA;EAEM;;AAEpB,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,cAAc"}
1	+ {"version":3,"file":"TabsTab.mjs","names":["classes"],"sources":["../../../../src/components/Tabs/TabsTab/TabsTab.tsx"],"sourcesContent":["import {\n CompoundStylesApiProps,\n createScopedKeydownHandler,\n ElementProps,\n factory,\n Factory,\n getThemeColor,\n MantineColor,\n useDirection,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { UnstyledButton, UnstyledButtonProps } from '../../UnstyledButton';\nimport { useTabsContext } from '../Tabs.context';\nimport classes from '../Tabs.module.css';\n\nexport type TabsTabStylesNames = 'tab' \| 'tabSection' \| 'tabLabel';\n\nexport interface TabsTabProps\n extends\n Omit<UnstyledButtonProps, 'classNames' \| 'styles' \| 'vars'>,\n CompoundStylesApiProps<TabsTabFactory>,\n ElementProps<'button'> {\n /** Value of associated panel /\n value: string;\n\n /* Tab label /\n children?: React.ReactNode;\n\n /* Content displayed on the right side of the label /\n rightSection?: React.ReactNode;\n\n /* Content displayed on the left side of the label /\n leftSection?: React.ReactNode;\n\n /* Key of `theme.colors` or any valid CSS color, controls tab color based on `variant` */\n color?: MantineColor;\n}\n\nexport type TabsTabFactory = Factory<{\n props: TabsTabProps;\n ref: HTMLButtonElement;\n stylesNames: TabsTabStylesNames;\n compound: true;\n}>;\n\nexport const TabsTab = factory<TabsTabFactory>((_props) => {\n const props = useProps('TabsTab', null, _props);\n const {\n className,\n children,\n rightSection,\n leftSection,\n value,\n onClick,\n onKeyDown,\n disabled,\n color,\n style,\n classNames,\n styles,\n vars,\n mod,\n tabIndex,\n ...others\n } = props;\n\n const theme = useMantineTheme();\n const { dir } = useDirection();\n const ctx = useTabsContext();\n const active = value === ctx.value;\n const activateTab = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n ctx.onChange(ctx.allowTabDeactivation ? (value === ctx.value ? null : value) : value);\n onClick?.(event);\n };\n\n const stylesApiProps = { classNames, styles, props };\n\n return (\n <UnstyledButton\n {...ctx.getStyles('tab', { className, style, variant: ctx.variant, ...stylesApiProps })}\n disabled={disabled}\n unstyled={ctx.unstyled}\n variant={ctx.variant}\n mod={[\n {\n active,\n disabled,\n orientation: ctx.orientation,\n inverted: ctx.inverted,\n placement: ctx.orientation === 'vertical' && ctx.placement,\n },\n mod,\n ]}\n role=\"tab\"\n id={ctx.getTabId(value)}\n aria-selected={active}\n tabIndex={tabIndex !== undefined ? tabIndex : active \|\| ctx.value === null ? 0 : -1}\n aria-controls={ctx.mountedPanels.current.has(value) ? ctx.getPanelId(value) : undefined}\n onClick={activateTab}\n __vars={{ '--tabs-color': color ? getThemeColor(color, theme) : undefined }}\n onKeyDown={createScopedKeydownHandler({\n siblingSelector: '[role=\"tab\"]',\n parentSelector: '[role=\"tablist\"]',\n activateOnFocus: ctx.activateTabWithKeyboard,\n loop: ctx.loop,\n orientation: ctx.orientation \|\| 'horizontal',\n dir,\n onKeyDown,\n })}\n {...others}\n >\n {leftSection && (\n <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"left\">\n {leftSection}\n </span>\n )}\n {children && <span {...ctx.getStyles('tabLabel', stylesApiProps)}>{children}</span>}\n {rightSection && (\n <span {...ctx.getStyles('tabSection', stylesApiProps)} data-position=\"right\">\n {rightSection}\n </span>\n )}\n </UnstyledButton>\n );\n});\n\nTabsTab.classes = classes;\nTabsTab.displayName = '@mantine/core/TabsTab';\n"],"mappings":";;;;;;;;;;;;AA8CA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,MAAM,MAAM;CAC9C,MAAM,EACJ,WACA,UACA,cACA,aACA,OACA,SACA,WACA,UACA,OACA,OACA,YACA,QACA,MACA,KACA,UACA,GAAG,WACD;CAEJ,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,MAAM,eAAe;CAC3B,MAAM,SAAS,UAAU,IAAI;CAC7B,MAAM,eAAe,UAA2D;EAC9E,IAAI,SAAS,IAAI,uBAAwB,UAAU,IAAI,QAAQ,OAAO,QAAS,KAAK;EACpF,UAAU,KAAK;CACjB;CAEA,MAAM,iBAAiB;EAAE;EAAY;EAAQ;CAAM;CAEnD,OACE,qBAAC,gBAAD;EACE,GAAI,IAAI,UAAU,OAAO;GAAE;GAAW;GAAO,SAAS,IAAI;GAAS,GAAG;EAAe,CAAC;EAC5E;EACV,UAAU,IAAI;EACd,SAAS,IAAI;EACb,KAAK,CACH;GACE;GACA;GACA,aAAa,IAAI;GACjB,UAAU,IAAI;GACd,WAAW,IAAI,gBAAgB,cAAc,IAAI;EACnD,GACA,GACF;EACA,MAAK;EACL,IAAI,IAAI,SAAS,KAAK;EACtB,iBAAe;EACf,UAAU,aAAa,KAAA,IAAY,WAAW,UAAU,IAAI,UAAU,OAAO,IAAI;EACjF,iBAAe,IAAI,cAAc,QAAQ,IAAI,KAAK,IAAI,IAAI,WAAW,KAAK,IAAI,KAAA;EAC9E,SAAS;EACT,QAAQ,EAAE,gBAAgB,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA,EAAU;EAC1E,WAAW,2BAA2B;GACpC,iBAAiB;GACjB,gBAAgB;GAChB,iBAAiB,IAAI;GACrB,MAAM,IAAI;GACV,aAAa,IAAI,eAAe;GAChC;GACA;EACF,CAAC;EACD,GAAI;EA/BN,UAAA;GAiCG,eACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;IAClE,UAAA;GACG,CAAA;GAEP,YAAY,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,YAAY,cAAc;IAAI;GAAe,CAAA;GACjF,gBACC,oBAAC,QAAD;IAAM,GAAI,IAAI,UAAU,cAAc,cAAc;IAAG,iBAAc;IAClE,UAAA;GACG,CAAA;EAEM;;AAEpB,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,cAAc"}

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

@@ -11,6 +11,7 @@ import { useCombobox } from "../Combobox/use-combobox/use-combobox.mjs";
 import { Combobox } from "../Combobox/Combobox.mjs";
 import { OptionsDropdown } from "../Combobox/OptionsDropdown/OptionsDropdown.mjs";
 import { usePillsReorder } from "../Combobox/use-pills-reorder/use-pills-reorder.mjs";
+import { isExternalInputChange } from "../Combobox/is-external-input-change/is-external-input-change.mjs";
 import { Pill } from "../Pill/Pill.mjs";
 import { PillsInput } from "../PillsInput/PillsInput.mjs";
 import { filterPickedTags } from "./filter-picked-tags.mjs";
@@ -285,7 +286,10 @@ const TagsInput = factory((_props) => {
 						},
 						onPaste: handlePaste,
 						value: _searchValue,
-						onChange: (event) => handleSearchChange(event.currentTarget.value),
+						onChange: (event) => {
+							if (isExternalInputChange(event)) return;
+							handleSearchChange(event.currentTarget.value);
+						},
 						required: required && _value.length === 0,
 						disabled,
 						readOnly,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TagsInput.mjs","names":["useId"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxGenericData,\n ComboboxGenericItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxRenderPillInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n usePillsReorder,\n} from '../Combobox';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n \| __InputStylesNames\n \| ComboboxLikeStylesNames\n \| 'pill'\n \| 'pillsList'\n \| 'inputField';\n\nexport interface TagsInputProps\n extends\n BoxProps,\n __BaseInputProps,\n Omit<ComboboxLikeProps, 'data'>,\n StylesApiProps<TagsInputFactory>,\n ElementProps<'input', 'size' \| 'value' \| 'defaultValue' \| 'onChange'> {\n /** Data displayed in the dropdown. Values must be unique. /\n data?: ComboboxGenericData;\n\n /* Controlled component value /\n value?: string[];\n\n /* Uncontrolled component default value /\n defaultValue?: string[];\n\n /* Called when value changes /\n onChange?: (value: string[]) => void;\n\n /* Called when tag is removed /\n onRemove?: (value: string) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Maximum number of tags @default Infinity /\n maxTags?: number;\n\n /* Called when user tries to add more tags than maxTags /\n onMaxTags?: (value: string) => void;\n\n /* If set, duplicate tags are allowed @default false /\n allowDuplicates?: boolean;\n\n /* Called when user tries to submit a duplicated tag /\n onDuplicate?: (value: string) => void;\n\n /* Characters that should trigger tags split, `[',']` by default /\n splitChars?: string[];\n\n /* If set, the clear button is displayed in the right section when the component has value @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* Divider used to separate values in the hidden input `value` attribute @default ',' /\n hiddenInputValuesDivider?: string;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n /* A function to render content of the pill, replaces the default content of the pill /\n renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true /\n acceptValueOnBlur?: boolean;\n\n /* Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. /\n isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n /* If set, the dropdown opens when the input receives focus @default true /\n openOnFocus?: boolean;\n\n /* If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n withPillsReorder?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n props: TagsInputProps;\n ref: HTMLInputElement;\n stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n maxTags: Infinity,\n acceptValueOnBlur: true,\n splitChars: [','],\n hiddenInputValuesDivider: ',',\n openOnFocus: true,\n size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'TagsInput'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n maxTags,\n allowDuplicates,\n onDuplicate,\n variant,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n floatingHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n splitChars,\n onFocus,\n onBlur,\n onPaste,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n required,\n labelProps,\n descriptionProps,\n errorProps,\n successProps,\n wrapperProps,\n description,\n label,\n error,\n success,\n withErrorStyles,\n withSuccessStyles,\n name,\n form,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n hiddenInputValuesDivider,\n mod,\n renderOption,\n renderPill,\n onRemove,\n onClear,\n onMaxTags,\n scrollAreaProps,\n acceptValueOnBlur,\n isDuplicate,\n openOnFocus,\n attributes,\n ref,\n loading,\n loadingPosition,\n withPillsReorder,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const inputRef = useRef<HTMLInputElement>(null);\n const _ref = useMergedRef(inputRef, ref);\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n value: _value,\n onChange: setValue,\n enabled: withPillsReorder && !disabled && !readOnly,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles<TagsInputFactory>({\n name: 'TagsInput',\n classes: {} as any,\n props: props as any,\n classNames,\n styles,\n unstyled,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleValueSelect = (val: string) => {\n const isDuplicated = isDuplicate\n ? isDuplicate(val, _value)\n : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n if (isDuplicated) {\n onDuplicate?.(val);\n if (!allowDuplicates) {\n handleSearchChange('');\n return;\n }\n }\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n return;\n }\n\n onOptionSubmit?.(val);\n handleSearchChange('');\n if (val.length > 0) {\n setValue([..._value, val]);\n }\n };\n\n const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (event.defaultPrevented \|\| event.isPropagationStopped()) {\n return;\n }\n\n const inputValue = _searchValue.trim();\n const { length } = inputValue;\n\n if (splitChars.includes(event.key) && length > 0) {\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: _searchValue,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n event.preventDefault();\n }\n\n if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n event.preventDefault();\n\n const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n );\n\n if (hasActiveSelection) {\n return;\n }\n\n handleValueSelect(inputValue);\n }\n\n if (\n event.key === 'Backspace' &&\n length === 0 &&\n _value.length > 0 &&\n !event.nativeEvent.isComposing &&\n !readOnly\n ) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n\n handleInputKeyDown(event);\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n event.preventDefault();\n\n if (event.clipboardData) {\n const pastedText = event.clipboardData.getData('text/plain');\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: `${_searchValue}${pastedText}`,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n }\n };\n\n const values = _value.map((item, index) => {\n const onRemoveItem = () => {\n const next_value = _value.slice();\n next_value.splice(index, 1);\n setValue(next_value);\n onRemove?.(item);\n };\n\n const reorderProps = getPillProps(index);\n\n if (renderPill) {\n return (\n <Fragment key={`${item}-${index}`}>\n {renderPill({\n option: optionsLockup[item] \|\| { value: item, label: item, disabled: false },\n value: item,\n onRemove: onRemoveItem,\n disabled: disabled \|\| readOnly,\n reorderProps,\n })}\n </Fragment>\n );\n }\n\n return (\n <Pill\n key={`${item}-${index}`}\n withRemoveButton={!readOnly}\n onRemove={onRemoveItem}\n unstyled={unstyled}\n disabled={disabled}\n attributes={attributes}\n {...getStyles('pill')}\n {...reorderProps}\n >\n {item}\n </Pill>\n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue([]);\n handleSearchChange('');\n inputRef.current?.focus();\n combobox.openDropdown();\n onClear?.();\n }}\n />\n );\n\n return (\n <>\n <Combobox\n store={combobox}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n readOnly={readOnly}\n __staticSelector=\"TagsInput\"\n attributes={attributes}\n floatingHeight={floatingHeight}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val);\n handleSearchChange('');\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n } else {\n setValue([..._value, optionsLockup[val].value]);\n }\n\n combobox.resetSelectedOption();\n }}\n {...comboboxProps}\n >\n <Combobox.DropdownTarget>\n <PillsInput\n {...styleProps}\n __staticSelector=\"TagsInput\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n className={className}\n style={style}\n variant={variant}\n disabled={disabled}\n radius={radius}\n rightSection={rightSection}\n __clearSection={clearButton}\n __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n __clearSectionMode={clearSectionMode}\n rightSectionWidth={rightSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n loading={loading}\n loadingPosition={loadingPosition}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n required={required}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n successProps={successProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n success={success}\n withErrorStyles={withErrorStyles}\n withSuccessStyles={withSuccessStyles}\n __stylesApiProps={{ ...props, multiline: true }}\n id={_id}\n mod={mod}\n attributes={attributes}\n >\n <Pill.Group\n disabled={disabled}\n unstyled={unstyled}\n {...getStyles('pillsList')}\n {...getListProps()}\n >\n {values}\n <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n <PillsInput.Field\n {...rest}\n ref={_ref}\n {...getStyles('inputField')}\n unstyled={unstyled}\n onKeyDown={handleInputKeydown}\n onFocus={(event) => {\n onFocus?.(event);\n openOnFocus && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n acceptValueOnBlur && handleValueSelect(_searchValue);\n combobox.closeDropdown();\n }}\n onPaste={handlePaste}\n value={_searchValue}\n onChange={(event) => handleSearchChange(event.currentTarget.value)}\n required={required && _value.length === 0}\n disabled={disabled}\n readOnly={readOnly}\n id={_id}\n />\n </Combobox.EventsTarget>\n </Pill.Group>\n </PillsInput>\n </Combobox.DropdownTarget>\n\n <OptionsDropdown\n data={filterPickedTags({ data: parsedData, value: _value })}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={_searchValue}\n limit={limit}\n hiddenWhenEmpty\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n unstyled={unstyled}\n labelId={label ? `${_id}-label` : undefined}\n aria-label={label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n form={form}\n value={_value}\n valuesDivider={hiddenInputValuesDivider}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n\nexport namespace TagsInput {\n export type Props = TagsInputProps;\n export type StylesNames = TagsInputStylesNames;\n export type Factory = TagsInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AA6IA,MAAM,eAAe;CACnB,SAAS;CACT,mBAAmB;CACnB,YAAY,CAAC,GAAG;CAChB,0BAA0B;CAC1B,aAAa;CACb,MAAM;AACR;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAW,GAAG,cAAc,MAAM;CACnF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,iBACA,aACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,gBACA,aACA,oBACA,gBACA,UACA,UACA,YACA,SACA,QACA,SACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,UACA,YACA,kBACA,YACA,cACA,cACA,aACA,OACA,OACA,SACA,iBACA,mBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,0BACA,KACA,cACA,YACA,UACA,SACA,WACA,iBACA,mBACA,aACA,aACA,YACA,KACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,OAAO,aAAa,UAAU,GAAG;CAEvC,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,uBAAuB,gBAAgB;EACzE,OAAO;EACP,UAAU;EACV,SAAS,oBAA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"}
1	+ {"version":3,"file":"TagsInput.mjs","names":["useId"],"sources":["../../../src/components/TagsInput/TagsInput.tsx"],"sourcesContent":["import { Fragment, useEffect, useRef } from 'react';\nimport { useId, useMergedRef, useUncontrolled } from '@mantine/hooks';\nimport {\n BoxProps,\n ElementProps,\n extractStyleProps,\n factory,\n Factory,\n Primitive,\n StylesApiProps,\n useProps,\n useResolvedStylesApi,\n useStyles,\n} from '../../core';\nimport {\n Combobox,\n ComboboxGenericData,\n ComboboxGenericItem,\n ComboboxLikeProps,\n ComboboxLikeRenderOptionInput,\n ComboboxLikeStylesNames,\n ComboboxRenderPillInput,\n getOptionsLockup,\n getParsedComboboxData,\n OptionsDropdown,\n OptionsFilter,\n useCombobox,\n usePillsReorder,\n} from '../Combobox';\nimport { isExternalInputChange } from '../Combobox/is-external-input-change/is-external-input-change';\nimport {\n __BaseInputProps,\n __InputStylesNames,\n ClearSectionMode,\n InputClearButtonProps,\n} from '../Input';\nimport { InputBase } from '../InputBase';\nimport { Pill } from '../Pill';\nimport { PillsInput } from '../PillsInput';\nimport { ScrollAreaProps } from '../ScrollArea';\nimport { filterPickedTags } from './filter-picked-tags';\nimport { getSplittedTags } from './get-splitted-tags';\n\nexport type TagsInputStylesNames =\n \| __InputStylesNames\n \| ComboboxLikeStylesNames\n \| 'pill'\n \| 'pillsList'\n \| 'inputField';\n\nexport interface TagsInputProps\n extends\n BoxProps,\n __BaseInputProps,\n Omit<ComboboxLikeProps, 'data'>,\n StylesApiProps<TagsInputFactory>,\n ElementProps<'input', 'size' \| 'value' \| 'defaultValue' \| 'onChange'> {\n /** Data displayed in the dropdown. Values must be unique. /\n data?: ComboboxGenericData;\n\n /* Controlled component value /\n value?: string[];\n\n /* Uncontrolled component default value /\n defaultValue?: string[];\n\n /* Called when value changes /\n onChange?: (value: string[]) => void;\n\n /* Called when tag is removed /\n onRemove?: (value: string) => void;\n\n /* Called when the clear button is clicked /\n onClear?: () => void;\n\n /* Controlled search value /\n searchValue?: string;\n\n /* Default search value /\n defaultSearchValue?: string;\n\n /* Called when search changes /\n onSearchChange?: (value: string) => void;\n\n /* Maximum number of tags @default Infinity /\n maxTags?: number;\n\n /* Called when user tries to add more tags than maxTags /\n onMaxTags?: (value: string) => void;\n\n /* If set, duplicate tags are allowed @default false /\n allowDuplicates?: boolean;\n\n /* Called when user tries to submit a duplicated tag /\n onDuplicate?: (value: string) => void;\n\n /* Characters that should trigger tags split, `[',']` by default /\n splitChars?: string[];\n\n /* If set, the clear button is displayed in the right section when the component has value @default false /\n clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n clearSectionMode?: ClearSectionMode;\n\n /* Props passed down to the clear button /\n clearButtonProps?: InputClearButtonProps;\n\n /* Props passed down to the hidden input /\n hiddenInputProps?: Omit<React.ComponentProps<'input'>, 'value'>;\n\n /* Divider used to separate values in the hidden input `value` attribute @default ',' /\n hiddenInputValuesDivider?: string;\n\n /* A function to render content of the option, replaces the default content of the option /\n renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;\n\n /* A function to render content of the pill, replaces the default content of the pill /\n renderPill?: (props: ComboboxRenderPillInput) => React.ReactNode;\n\n /* Props passed down to the underlying `ScrollArea` component in the dropdown /\n scrollAreaProps?: ScrollAreaProps;\n\n /* If set, the value typed in by the user but not submitted is accepted when the input is blurred @default true /\n acceptValueOnBlur?: boolean;\n\n /* Custom function to determine if a tag is duplicate. Accepts tag value and array of current values. By default, checks if the tag exists case-insensitively. /\n isDuplicate?: (value: string, currentValues: string[]) => boolean;\n\n /* If set, the dropdown opens when the input receives focus @default true /\n openOnFocus?: boolean;\n\n /* If set, tags can be reordered by dragging pills. Disabled when `disabled` or `readOnly` is set. @default false */\n withPillsReorder?: boolean;\n}\n\nexport type TagsInputFactory = Factory<{\n props: TagsInputProps;\n ref: HTMLInputElement;\n stylesNames: TagsInputStylesNames;\n}>;\n\nconst defaultProps = {\n maxTags: Infinity,\n acceptValueOnBlur: true,\n splitChars: [','],\n hiddenInputValuesDivider: ',',\n openOnFocus: true,\n size: 'sm',\n} satisfies Partial<TagsInputProps>;\n\nexport const TagsInput = factory<TagsInputFactory>((_props) => {\n const props = useProps(['Input', 'InputWrapper', 'TagsInput'], defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n size,\n value,\n defaultValue,\n onChange,\n onKeyDown,\n maxTags,\n allowDuplicates,\n onDuplicate,\n variant,\n data,\n dropdownOpened,\n defaultDropdownOpened,\n onDropdownOpen,\n onDropdownClose,\n selectFirstOptionOnChange,\n selectFirstOptionOnDropdownOpen,\n onOptionSubmit,\n comboboxProps,\n filter,\n limit,\n withScrollArea,\n maxDropdownHeight,\n floatingHeight,\n searchValue,\n defaultSearchValue,\n onSearchChange,\n readOnly,\n disabled,\n splitChars,\n onFocus,\n onBlur,\n onPaste,\n radius,\n rightSection,\n rightSectionWidth,\n rightSectionPointerEvents,\n rightSectionProps,\n leftSection,\n leftSectionWidth,\n leftSectionPointerEvents,\n leftSectionProps,\n inputContainer,\n inputWrapperOrder,\n withAsterisk,\n required,\n labelProps,\n descriptionProps,\n errorProps,\n successProps,\n wrapperProps,\n description,\n label,\n error,\n success,\n withErrorStyles,\n withSuccessStyles,\n name,\n form,\n id,\n clearable,\n clearSectionMode,\n clearButtonProps,\n hiddenInputProps,\n hiddenInputValuesDivider,\n mod,\n renderOption,\n renderPill,\n onRemove,\n onClear,\n onMaxTags,\n scrollAreaProps,\n acceptValueOnBlur,\n isDuplicate,\n openOnFocus,\n attributes,\n ref,\n loading,\n loadingPosition,\n withPillsReorder,\n ...others\n } = props;\n\n const _id = useId(id);\n const parsedData = getParsedComboboxData(data);\n const optionsLockup = getOptionsLockup(parsedData);\n const inputRef = useRef<HTMLInputElement>(null);\n const _ref = useMergedRef(inputRef, ref);\n\n const combobox = useCombobox({\n opened: dropdownOpened,\n defaultOpened: defaultDropdownOpened,\n onDropdownOpen: () => {\n onDropdownOpen?.();\n if (selectFirstOptionOnDropdownOpen) {\n combobox.selectFirstOption();\n }\n },\n onDropdownClose: () => {\n onDropdownClose?.();\n combobox.resetSelectedOption();\n },\n });\n\n const {\n styleProps,\n rest: { type, autoComplete, ...rest },\n } = extractStyleProps(others);\n\n const [_value, setValue] = useUncontrolled({\n value,\n defaultValue,\n finalValue: [],\n onChange,\n });\n\n const { getPillProps, getListProps, handleInputKeyDown } = usePillsReorder({\n value: _value,\n onChange: setValue,\n enabled: withPillsReorder && !disabled && !readOnly,\n });\n\n const [_searchValue, setSearchValue] = useUncontrolled({\n value: searchValue,\n defaultValue: defaultSearchValue,\n finalValue: '',\n onChange: onSearchChange,\n });\n\n const handleSearchChange = (value: string) => {\n setSearchValue(value);\n combobox.resetSelectedOption();\n };\n\n const getStyles = useStyles<TagsInputFactory>({\n name: 'TagsInput',\n classes: {} as any,\n props: props as any,\n classNames,\n styles,\n unstyled,\n });\n\n const { resolvedClassNames, resolvedStyles } = useResolvedStylesApi<TagsInputFactory>({\n props,\n styles,\n classNames,\n });\n\n const handleValueSelect = (val: string) => {\n const isDuplicated = isDuplicate\n ? isDuplicate(val, _value)\n : _value.some((tag) => tag.toLowerCase() === val.toLowerCase());\n\n if (isDuplicated) {\n onDuplicate?.(val);\n if (!allowDuplicates) {\n handleSearchChange('');\n return;\n }\n }\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n return;\n }\n\n onOptionSubmit?.(val);\n handleSearchChange('');\n if (val.length > 0) {\n setValue([..._value, val]);\n }\n };\n\n const handleInputKeydown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n onKeyDown?.(event);\n\n if (event.defaultPrevented \|\| event.isPropagationStopped()) {\n return;\n }\n\n const inputValue = _searchValue.trim();\n const { length } = inputValue;\n\n if (splitChars.includes(event.key) && length > 0) {\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: _searchValue,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n event.preventDefault();\n }\n\n if (event.key === 'Enter' && length > 0 && !event.nativeEvent.isComposing) {\n event.preventDefault();\n\n const hasActiveSelection = !!document.querySelector<HTMLDivElement>(\n `#${combobox.listId} [data-combobox-option][data-combobox-selected]`\n );\n\n if (hasActiveSelection) {\n return;\n }\n\n handleValueSelect(inputValue);\n }\n\n if (\n event.key === 'Backspace' &&\n length === 0 &&\n _value.length > 0 &&\n !event.nativeEvent.isComposing &&\n !readOnly\n ) {\n onRemove?.(_value[_value.length - 1]);\n setValue(_value.slice(0, _value.length - 1));\n }\n\n handleInputKeyDown(event);\n };\n\n const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n onPaste?.(event);\n event.preventDefault();\n\n if (event.clipboardData) {\n const pastedText = event.clipboardData.getData('text/plain');\n setValue(\n getSplittedTags({\n splitChars,\n allowDuplicates,\n maxTags,\n value: `${_searchValue}${pastedText}`,\n currentTags: _value,\n isDuplicate,\n onDuplicate,\n })\n );\n handleSearchChange('');\n }\n };\n\n const values = _value.map((item, index) => {\n const onRemoveItem = () => {\n const next_value = _value.slice();\n next_value.splice(index, 1);\n setValue(next_value);\n onRemove?.(item);\n };\n\n const reorderProps = getPillProps(index);\n\n if (renderPill) {\n return (\n <Fragment key={`${item}-${index}`}>\n {renderPill({\n option: optionsLockup[item] \|\| { value: item, label: item, disabled: false },\n value: item,\n onRemove: onRemoveItem,\n disabled: disabled \|\| readOnly,\n reorderProps,\n })}\n </Fragment>\n );\n }\n\n return (\n <Pill\n key={`${item}-${index}`}\n withRemoveButton={!readOnly}\n onRemove={onRemoveItem}\n unstyled={unstyled}\n disabled={disabled}\n attributes={attributes}\n {...getStyles('pill')}\n {...reorderProps}\n >\n {item}\n </Pill>\n );\n });\n\n useEffect(() => {\n if (selectFirstOptionOnChange) {\n combobox.selectFirstOption();\n }\n }, [selectFirstOptionOnChange, _value, _searchValue]);\n\n const clearButton = (\n <Combobox.ClearButton\n {...clearButtonProps}\n onClear={() => {\n setValue([]);\n handleSearchChange('');\n inputRef.current?.focus();\n combobox.openDropdown();\n onClear?.();\n }}\n />\n );\n\n return (\n <>\n <Combobox\n store={combobox}\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n readOnly={readOnly}\n __staticSelector=\"TagsInput\"\n attributes={attributes}\n floatingHeight={floatingHeight}\n onOptionSubmit={(val) => {\n onOptionSubmit?.(val);\n handleSearchChange('');\n\n if (_value.length >= maxTags) {\n onMaxTags?.(val);\n } else {\n setValue([..._value, optionsLockup[val].value]);\n }\n\n combobox.resetSelectedOption();\n }}\n {...comboboxProps}\n >\n <Combobox.DropdownTarget>\n <PillsInput\n {...styleProps}\n __staticSelector=\"TagsInput\"\n classNames={resolvedClassNames}\n styles={resolvedStyles}\n unstyled={unstyled}\n size={size}\n className={className}\n style={style}\n variant={variant}\n disabled={disabled}\n radius={radius}\n rightSection={rightSection}\n __clearSection={clearButton}\n __clearable={clearable && _value.length > 0 && !disabled && !readOnly}\n __clearSectionMode={clearSectionMode}\n rightSectionWidth={rightSectionWidth}\n rightSectionPointerEvents={rightSectionPointerEvents}\n rightSectionProps={rightSectionProps}\n leftSection={leftSection}\n leftSectionWidth={leftSectionWidth}\n leftSectionPointerEvents={leftSectionPointerEvents}\n leftSectionProps={leftSectionProps}\n loading={loading}\n loadingPosition={loadingPosition}\n inputContainer={inputContainer}\n inputWrapperOrder={inputWrapperOrder}\n withAsterisk={withAsterisk}\n required={required}\n labelProps={labelProps}\n descriptionProps={descriptionProps}\n errorProps={errorProps}\n successProps={successProps}\n wrapperProps={wrapperProps}\n description={description}\n label={label}\n error={error}\n success={success}\n withErrorStyles={withErrorStyles}\n withSuccessStyles={withSuccessStyles}\n __stylesApiProps={{ ...props, multiline: true }}\n id={_id}\n mod={mod}\n attributes={attributes}\n >\n <Pill.Group\n disabled={disabled}\n unstyled={unstyled}\n {...getStyles('pillsList')}\n {...getListProps()}\n >\n {values}\n <Combobox.EventsTarget autoComplete={autoComplete} withExpandedAttribute>\n <PillsInput.Field\n {...rest}\n ref={_ref}\n {...getStyles('inputField')}\n unstyled={unstyled}\n onKeyDown={handleInputKeydown}\n onFocus={(event) => {\n onFocus?.(event);\n openOnFocus && combobox.openDropdown();\n }}\n onBlur={(event) => {\n onBlur?.(event);\n acceptValueOnBlur && handleValueSelect(_searchValue);\n combobox.closeDropdown();\n }}\n onPaste={handlePaste}\n value={_searchValue}\n onChange={(event) => {\n if (isExternalInputChange(event)) {\n return;\n }\n\n handleSearchChange(event.currentTarget.value);\n }}\n required={required && _value.length === 0}\n disabled={disabled}\n readOnly={readOnly}\n id={_id}\n />\n </Combobox.EventsTarget>\n </Pill.Group>\n </PillsInput>\n </Combobox.DropdownTarget>\n\n <OptionsDropdown\n data={filterPickedTags({ data: parsedData, value: _value })}\n hidden={readOnly \|\| disabled}\n filter={filter as OptionsFilter<Primitive> \| undefined}\n search={_searchValue}\n limit={limit}\n hiddenWhenEmpty\n withScrollArea={withScrollArea}\n maxDropdownHeight={maxDropdownHeight}\n unstyled={unstyled}\n labelId={label ? `${_id}-label` : undefined}\n aria-label={label ? undefined : others['aria-label']}\n renderOption={renderOption}\n scrollAreaProps={scrollAreaProps}\n />\n </Combobox>\n <Combobox.HiddenInput\n name={name}\n form={form}\n value={_value}\n valuesDivider={hiddenInputValuesDivider}\n disabled={disabled}\n {...hiddenInputProps}\n />\n </>\n );\n});\n\nTagsInput.classes = { ...InputBase.classes, ...Combobox.classes };\nTagsInput.displayName = '@mantine/core/TagsInput';\n\nexport namespace TagsInput {\n export type Props = TagsInputProps;\n export type StylesNames = TagsInputStylesNames;\n export type Factory = TagsInputFactory;\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8IA,MAAM,eAAe;CACnB,SAAS;CACT,mBAAmB;CACnB,YAAY,CAAC,GAAG;CAChB,0BAA0B;CAC1B,aAAa;CACb,MAAM;AACR;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS;EAAC;EAAS;EAAgB;CAAW,GAAG,cAAc,MAAM;CACnF,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MACA,OACA,cACA,UACA,WACA,SACA,iBACA,aACA,SACA,MACA,gBACA,uBACA,gBACA,iBACA,2BACA,iCACA,gBACA,eACA,QACA,OACA,gBACA,mBACA,gBACA,aACA,oBACA,gBACA,UACA,UACA,YACA,SACA,QACA,SACA,QACA,cACA,mBACA,2BACA,mBACA,aACA,kBACA,0BACA,kBACA,gBACA,mBACA,cACA,UACA,YACA,kBACA,YACA,cACA,cACA,aACA,OACA,OACA,SACA,iBACA,mBACA,MACA,MACA,IACA,WACA,kBACA,kBACA,kBACA,0BACA,KACA,cACA,YACA,UACA,SACA,WACA,iBACA,mBACA,aACA,aACA,YACA,KACA,SACA,iBACA,kBACA,GAAG,WACD;CAEJ,MAAM,MAAMA,QAAM,EAAE;CACpB,MAAM,aAAa,sBAAsB,IAAI;CAC7C,MAAM,gBAAgB,iBAAiB,UAAU;CACjD,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,OAAO,aAAa,UAAU,GAAG;CAEvC,MAAM,WAAW,YAAY;EAC3B,QAAQ;EACR,eAAe;EACf,sBAAsB;GACpB,iBAAiB;GACjB,IAAI,iCACF,SAAS,kBAAkB;EAE/B;EACA,uBAAuB;GACrB,kBAAkB;GAClB,SAAS,oBAAoB;EAC/B;CACF,CAAC;CAED,MAAM,EACJ,YACA,MAAM,EAAE,MAAM,cAAc,GAAG,WAC7B,kBAAkB,MAAM;CAE5B,MAAM,CAAC,QAAQ,YAAY,gBAAgB;EACzC;EACA;EACA,YAAY,CAAC;EACb;CACF,CAAC;CAED,MAAM,EAAE,cAAc,cAAc,uBAAuB,gBAAgB;EACzE,OAAO;EACP,UAAU;EACV,SAAS,oBA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"}

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

@@ -24,27 +24,28 @@ const varsResolver = createVarsResolver((theme, { variant, lineClamp, gradient,
 const Text = polymorphicFactory((_props) => {
 	const props = useProps("Text", defaultProps, _props);
 	const { lineClamp, truncate, inline, inherit, gradient, span, textWrap, __staticSelector, vars, className, style, classNames, styles, unstyled, variant, mod, size, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: ["Text", __staticSelector],
+		props,
+		classes: Text_module_default,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
 	return /* @__PURE__ */ jsx(Box, {
-		...useStyles({
-			name: ["Text", __staticSelector],
-			props,
-			classes: Text_module_default,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
-			varsResolver
-		})("root", { focusable: true }),
+		...getStyles("root", { focusable: true }),
 		component: span ? "span" : "p",
 		variant,
 		mod: [{
-			"data-truncate": getTextTruncate(truncate),
-			"data-line-clamp": typeof lineClamp === "number",
-			"data-inline": inline,
-			"data-inherit": inherit
+			truncate: getTextTruncate(truncate),
+			lineClamp: typeof lineClamp === "number",
+			inline,
+			inherit
 		}, mod],
 		size,
 		...others

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.mjs","names":["classes"],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n getFontSize,\n getGradient,\n getLineHeight,\n MantineFontSize,\n MantineGradient,\n MantineLineHeight,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Text.module.css';\n\ntype TextTruncate = 'end' \| 'start' \| boolean;\n\nfunction getTextTruncate(truncate: TextTruncate \| undefined) {\n if (truncate === 'start') {\n return 'start';\n }\n\n if (truncate === 'end' \|\| truncate) {\n return 'end';\n }\n\n return undefined;\n}\n\nexport type TextStylesNames = 'root';\nexport type TextVariant = 'text' \| 'gradient';\nexport type TextCssVariables = {\n root: '--text-gradient' \| '--text-line-clamp' \| '--text-fz' \| '--text-lh' \| '--text-text-wrap';\n};\n\nexport interface TextProps extends BoxProps, StylesApiProps<TextFactory> {\n __staticSelector?: string;\n\n /** Controls `font-size` and `line-height` @default 'md' /\n size?: MantineFontSize \| MantineLineHeight;\n\n /* Number of lines after which Text will be truncated /\n lineClamp?: number;\n\n /* Side on which Text must be truncated, if `true`, text is truncated from the start /\n truncate?: TextTruncate;\n\n /* Sets `line-height` to 1 for centering @default false /\n inline?: boolean;\n\n /* Determines whether font properties should be inherited from the parent @default false /\n inherit?: boolean;\n\n /* Gradient configuration, ignored when `variant` is not `gradient` @default theme.defaultGradient /\n gradient?: MantineGradient;\n\n /* Shorthand for `component=\"span\"` /\n span?: boolean;\n\n /* Controls `text-wrap` CSS property */\n textWrap?: 'wrap' \| 'nowrap' \| 'balance' \| 'pretty' \| 'stable';\n}\n\nexport type TextFactory = PolymorphicFactory<{\n props: TextProps;\n defaultComponent: 'p';\n defaultRef: HTMLParagraphElement;\n stylesNames: TextStylesNames;\n vars: TextCssVariables;\n variant: TextVariant;\n}>;\n\nconst defaultProps = {\n inherit: false,\n} satisfies Partial<TextProps>;\n\nconst varsResolver = createVarsResolver<TextFactory>(\n // Will be removed in 9.0\n\n (theme, { variant, lineClamp, gradient, size, textWrap }) => ({\n root: {\n '--text-fz': getFontSize(size),\n '--text-lh': getLineHeight(size),\n '--text-gradient': variant === 'gradient' ? getGradient(gradient, theme) : undefined,\n '--text-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n '--text-text-wrap': textWrap,\n },\n })\n);\n\nexport const Text = polymorphicFactory<TextFactory>((_props) => {\n const props = useProps('Text', defaultProps, _props);\n const {\n lineClamp,\n truncate,\n inline,\n inherit,\n gradient,\n span,\n textWrap,\n __staticSelector,\n vars,\n className,\n style,\n classNames,\n styles,\n unstyled,\n variant,\n mod,\n size,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TextFactory>({\n name: ['Text', __staticSelector],\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box\n {...getStyles('root', { focusable: true })}\n component={span ? 'span' : 'p'}\n variant={variant}\n mod={[\n {\n ~~'data-~~truncate': getTextTruncate(truncate),\n ~~'data-line-clamp'~~: typeof lineClamp === 'number',\n ~~'data-~~inline~~': inline~~,\n ~~'data-~~inherit~~': inherit~~,\n },\n mod,\n ]}\n size={size}\n {...others}\n />\n );\n});\n\nText.classes = classes;\nText.varsResolver = varsResolver;\nText.displayName = '@mantine/core/Text';\n\nexport namespace Text {\n export type Props = TextProps;\n export type StylesNames = TextStylesNames;\n export type CssVariables = TextCssVariables;\n export type Factory = TextFactory;\n export type Variant = TextVariant;\n}\n"],"mappings":";;;;;;;;;;;AAoBA,SAAS,gBAAgB,UAAoC;CAC3D,IAAI,aAAa,SACf,OAAO;CAGT,IAAI,aAAa,SAAS,UACxB,OAAO;AAIX;AA6CA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,MAAM,eAAe,oBAGlB,OAAO,EAAE,SAAS,WAAW,UAAU,MAAM,gBAAgB,EAC5D,MAAM;CACJ,aAAa,YAAY,IAAI;CAC7B,aAAa,cAAc,IAAI;CAC/B,mBAAmB,YAAY,aAAa,YAAY,UAAU,KAAK,IAAI,KAAA;CAC3E,qBAAqB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;CAC5E,oBAAoB;AACtB,EACF,EACF;AAEA,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,WACA,UACA,QACA,SACA,UACA,MACA,UACA,kBACA,MACA,WACA,OACA,YACA,QACA,UACA,SACA,KACA,MACA,YACA,GAAG,WACD;~~CAgBJ~~,~~OACE~~,~~oBAAC~~,~~KAAD;EACE,GAhBc,~~UAAuB;~~GACvC~~,MAAM,CAAC,QAAQ,gBAAgB;~~GAC~~/B;~~GACA~~,SAAA;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~EACF~~,~~CAIgB,~~CAAC,~~CAAC~~,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,WAAW,OAAO,SAAS;EAClB;EACT,KAAK,CACH;GACE,~~iBAAiB~~,gBAAgB,QAAQ;~~GACzC~~,~~mBAAmB~~,OAAO,cAAc;~~GACxC,eAAe~~;~~GACf,gBAAgB~~;~~EAClB~~,GACA,GACF;EACM;EACN,GAAI;CACL,CAAA;AAEL,CAAC;AAED,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}
1	+ {"version":3,"file":"Text.mjs","names":["classes"],"sources":["../../../src/components/Text/Text.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n getFontSize,\n getGradient,\n getLineHeight,\n MantineFontSize,\n MantineGradient,\n MantineLineHeight,\n polymorphicFactory,\n PolymorphicFactory,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Text.module.css';\n\ntype TextTruncate = 'end' \| 'start' \| boolean;\n\nfunction getTextTruncate(truncate: TextTruncate \| undefined) {\n if (truncate === 'start') {\n return 'start';\n }\n\n if (truncate === 'end' \|\| truncate) {\n return 'end';\n }\n\n return undefined;\n}\n\nexport type TextStylesNames = 'root';\nexport type TextVariant = 'text' \| 'gradient';\nexport type TextCssVariables = {\n root: '--text-gradient' \| '--text-line-clamp' \| '--text-fz' \| '--text-lh' \| '--text-text-wrap';\n};\n\nexport interface TextProps extends BoxProps, StylesApiProps<TextFactory> {\n __staticSelector?: string;\n\n /** Controls `font-size` and `line-height` @default 'md' /\n size?: MantineFontSize \| MantineLineHeight;\n\n /* Number of lines after which Text will be truncated /\n lineClamp?: number;\n\n /* Side on which Text must be truncated, if `true`, text is truncated from the start /\n truncate?: TextTruncate;\n\n /* Sets `line-height` to 1 for centering @default false /\n inline?: boolean;\n\n /* Determines whether font properties should be inherited from the parent @default false /\n inherit?: boolean;\n\n /* Gradient configuration, ignored when `variant` is not `gradient` @default theme.defaultGradient /\n gradient?: MantineGradient;\n\n /* Shorthand for `component=\"span\"` /\n span?: boolean;\n\n /* Controls `text-wrap` CSS property */\n textWrap?: 'wrap' \| 'nowrap' \| 'balance' \| 'pretty' \| 'stable';\n}\n\nexport type TextFactory = PolymorphicFactory<{\n props: TextProps;\n defaultComponent: 'p';\n defaultRef: HTMLParagraphElement;\n stylesNames: TextStylesNames;\n vars: TextCssVariables;\n variant: TextVariant;\n}>;\n\nconst defaultProps = {\n inherit: false,\n} satisfies Partial<TextProps>;\n\nconst varsResolver = createVarsResolver<TextFactory>(\n // Will be removed in 9.0\n\n (theme, { variant, lineClamp, gradient, size, textWrap }) => ({\n root: {\n '--text-fz': getFontSize(size),\n '--text-lh': getLineHeight(size),\n '--text-gradient': variant === 'gradient' ? getGradient(gradient, theme) : undefined,\n '--text-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n '--text-text-wrap': textWrap,\n },\n })\n);\n\nexport const Text = polymorphicFactory<TextFactory>((_props) => {\n const props = useProps('Text', defaultProps, _props);\n const {\n lineClamp,\n truncate,\n inline,\n inherit,\n gradient,\n span,\n textWrap,\n __staticSelector,\n vars,\n className,\n style,\n classNames,\n styles,\n unstyled,\n variant,\n mod,\n size,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TextFactory>({\n name: ['Text', __staticSelector],\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Box\n {...getStyles('root', { focusable: true })}\n component={span ? 'span' : 'p'}\n variant={variant}\n mod={[\n {\n truncate: getTextTruncate(truncate),\n lineClamp: typeof lineClamp === 'number',\n inline,\n inherit,\n },\n mod,\n ]}\n size={size}\n {...others}\n />\n );\n});\n\nText.classes = classes;\nText.varsResolver = varsResolver;\nText.displayName = '@mantine/core/Text';\n\nexport namespace Text {\n export type Props = TextProps;\n export type StylesNames = TextStylesNames;\n export type CssVariables = TextCssVariables;\n export type Factory = TextFactory;\n export type Variant = TextVariant;\n}\n"],"mappings":";;;;;;;;;;;AAoBA,SAAS,gBAAgB,UAAoC;CAC3D,IAAI,aAAa,SACf,OAAO;CAGT,IAAI,aAAa,SAAS,UACxB,OAAO;AAIX;AA6CA,MAAM,eAAe,EACnB,SAAS,MACX;AAEA,MAAM,eAAe,oBAGlB,OAAO,EAAE,SAAS,WAAW,UAAU,MAAM,gBAAgB,EAC5D,MAAM;CACJ,aAAa,YAAY,IAAI;CAC7B,aAAa,cAAc,IAAI;CAC/B,mBAAmB,YAAY,aAAa,YAAY,UAAU,KAAK,IAAI,KAAA;CAC3E,qBAAqB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;CAC5E,oBAAoB;AACtB,EACF,EACF;AAEA,MAAa,OAAO,oBAAiC,WAAW;CAC9D,MAAM,QAAQ,SAAS,QAAQ,cAAc,MAAM;CACnD,MAAM,EACJ,WACA,UACA,QACA,SACA,UACA,MACA,UACA,kBACA,MACA,WACA,OACA,YACA,QACA,UACA,SACA,KACA,MACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAuB;EACvC,MAAM,CAAC,QAAQ,gBAAgB;EAC/B;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,QAAQ,EAAE,WAAW,KAAK,CAAC;EACzC,WAAW,OAAO,SAAS;EAClB;EACT,KAAK,CACH;GACE,UAAU,gBAAgB,QAAQ;GAClC,WAAW,OAAO,cAAc;GAChC;GACA;EACF,GACA,GACF;EACM;EACN,GAAI;CACL,CAAA;AAEL,CAAC;AAED,KAAK,UAAUA;AACf,KAAK,eAAe;AACpB,KAAK,cAAc"}

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

@@ -5,13 +5,14 @@ import { InputBase } from "../InputBase/InputBase.mjs";
 import { jsx } from "react/jsx-runtime";
 //#region packages/@mantine/core/src/components/TextInput/TextInput.tsx
 const TextInput = factory((props) => {
+	const _props = useProps([
+		"Input",
+		"InputWrapper",
+		"TextInput"
+	], null, props);
 	return /* @__PURE__ */ jsx(InputBase, {
 		component: "input",
-		...useProps([
-			"Input",
-			"InputWrapper",
-			"TextInput"
-		], null, props),
+		..._props,
 		__staticSelector: "TextInput"
 	});
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"TextInput.mjs","names":[],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\n\nexport interface TextInputProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<TextInputFactory>,\n ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n props: TextInputProps;\n variant: InputVariant;\n ref: HTMLInputElement;\n stylesNames: __InputStylesNames;\n}>;\n\nexport const TextInput = factory<TextInputFactory>((props) => {\n const _props = useProps(['Input', 'InputWrapper', 'TextInput'], null, props);\n return <InputBase component=\"input\" {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.classes = InputBase.classes;\nTextInput.displayName = '@mantine/core/TextInput';\n\nexport namespace TextInput {\n export type Props = TextInputProps;\n export type Factory = TextInputFactory;\n}\n"],"mappings":";;;;;;AAkBA,MAAa,YAAY,SAA2B,UAAU;~~CAE5D~~,OAAO,oBAAC,WAAD;EAAW,WAAU;EAAQ,~~GADrB,SAAS~~;~~GAAC;GAAS;GAAgB;EAAW~~,~~GAAG,MAAM,KACzB;EAAG,~~kBAAiB;CAAa,CAAA;AAChF,CAAC;AAED,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}
1	+ {"version":3,"file":"TextInput.mjs","names":[],"sources":["../../../src/components/TextInput/TextInput.tsx"],"sourcesContent":["import { BoxProps, ElementProps, factory, Factory, StylesApiProps, useProps } from '../../core';\nimport { __BaseInputProps, __InputStylesNames, InputVariant } from '../Input';\nimport { InputBase } from '../InputBase';\n\nexport interface TextInputProps\n extends\n BoxProps,\n __BaseInputProps,\n StylesApiProps<TextInputFactory>,\n ElementProps<'input', 'size'> {}\n\nexport type TextInputFactory = Factory<{\n props: TextInputProps;\n variant: InputVariant;\n ref: HTMLInputElement;\n stylesNames: __InputStylesNames;\n}>;\n\nexport const TextInput = factory<TextInputFactory>((props) => {\n const _props = useProps(['Input', 'InputWrapper', 'TextInput'], null, props);\n return <InputBase component=\"input\" {..._props} __staticSelector=\"TextInput\" />;\n});\n\nTextInput.classes = InputBase.classes;\nTextInput.displayName = '@mantine/core/TextInput';\n\nexport namespace TextInput {\n export type Props = TextInputProps;\n export type Factory = TextInputFactory;\n}\n"],"mappings":";;;;;;AAkBA,MAAa,YAAY,SAA2B,UAAU;CAC5D,MAAM,SAAS,SAAS;EAAC;EAAS;EAAgB;CAAW,GAAG,MAAM,KAAK;CAC3E,OAAO,oBAAC,WAAD;EAAW,WAAU;EAAQ,GAAI;EAAQ,kBAAiB;CAAa,CAAA;AAChF,CAAC;AAED,UAAU,UAAU,UAAU;AAC9B,UAAU,cAAc"}

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

@@ -27,20 +27,21 @@ const varsResolver = createVarsResolver((theme, { size, radius, variant, gradien
 const ThemeIcon = factory((_props) => {
 	const props = useProps("ThemeIcon", null, _props);
 	const { classNames, className, style, styles, unstyled, vars, autoContrast, attributes, ...others } = props;
+	const getStyles = useStyles({
+		name: "ThemeIcon",
+		classes: ThemeIcon_module_default,
+		props,
+		className,
+		style,
+		classNames,
+		styles,
+		unstyled,
+		attributes,
+		vars,
+		varsResolver
+	});
 	return /* @__PURE__ */ jsx(Box, {
-		...useStyles({
-			name: "ThemeIcon",
-			classes: ThemeIcon_module_default,
-			props,
-			className,
-			style,
-			classNames,
-			styles,
-			unstyled,
-			attributes,
-			vars,
-			varsResolver
-		})("root"),
+		...getStyles("root"),
 		...others
 	});
 });

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ThemeIcon.mjs","names":["classes"],"sources":["../../../src/components/ThemeIcon/ThemeIcon.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getSize,\n MantineColor,\n MantineGradient,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './ThemeIcon.module.css';\n\nexport type ThemeIconStylesNames = 'root';\nexport type ThemeIconVariant =\n \| 'filled'\n \| 'light'\n \| 'outline'\n \| 'transparent'\n \| 'white'\n \| 'default'\n \| 'gradient';\n\nexport type ThemeIconCssVariables = {\n root: '--ti-radius' \| '--ti-size' \| '--ti-bg' \| '--ti-color' \| '--ti-bd';\n};\n\nexport interface ThemeIconProps\n extends BoxProps, StylesApiProps<ThemeIconFactory>, ElementProps<'div'> {\n /** Controls width and height of the button. Numbers are converted to rem. @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Key of `theme.colors` or any valid CSS 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 /* Gradient data used when `variant=\"gradient\"` @default theme.defaultGradient /\n gradient?: MantineGradient;\n\n /* Icon displayed inside the component /\n children?: React.ReactNode;\n\n /* If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type ThemeIconFactory = Factory<{\n props: ThemeIconProps;\n ref: HTMLDivElement;\n stylesNames: ThemeIconStylesNames;\n vars: ThemeIconCssVariables;\n variant: ThemeIconVariant;\n}>;\n\nconst varsResolver = createVarsResolver<ThemeIconFactory>(\n (theme, { size, radius, variant, gradient, color, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n gradient,\n variant: variant \|\| 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--ti-size': getSize(size, 'ti-size'),\n '--ti-radius': radius === undefined ? undefined : getRadius(radius),\n '--ti-bg': color \|\| variant ? colors.background : undefined,\n '--ti-color': color \|\| variant ? colors.color : undefined,\n '--ti-bd': color \|\| variant ? colors.border : undefined,\n },\n };\n }\n);\n\nexport const ThemeIcon = factory<ThemeIconFactory>((_props) => {\n const props = useProps('ThemeIcon', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n autoContrast,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ThemeIconFactory>({\n name: 'ThemeIcon',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box {...getStyles('root')} {...others} />;\n});\n\nThemeIcon.classes = classes;\nThemeIcon.varsResolver = varsResolver;\nThemeIcon.displayName = '@mantine/core/ThemeIcon';\n\nexport namespace ThemeIcon {\n export type Props = ThemeIconProps;\n export type StylesNames = ThemeIconStylesNames;\n export type Factory = ThemeIconFactory;\n export type Variant = ThemeIconVariant;\n export type CssVariables = ThemeIconCssVariables;\n}\n"],"mappings":";;;;;;;;;;AA8DA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,OAAO,mBAAmB;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,aAAa,QAAQ,MAAM,SAAS;EACpC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EAClE,WAAW,SAAS,UAAU,OAAO,aAAa,KAAA;EAClD,cAAc,SAAS,UAAU,OAAO,QAAQ,KAAA;EAChD,WAAW,SAAS,UAAU,OAAO,SAAS,KAAA;CAChD,EACF;AACF,CACF;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,YACA,GAAG,WACD;~~CAgBJ~~,~~OAAO~~,~~oBAAC~~,~~KAAD;EAAK,GAdM,~~UAA4B;~~GAC5C~~,MAAM;~~GACN~~,SAAA;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~GACA~~;~~EACF~~,~~CAEwB,~~CAAC,~~CAAC~~,MAAM;EAAG,GAAI;CAAS,CAAA;AAClD,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}
1	+ {"version":3,"file":"ThemeIcon.mjs","names":["classes"],"sources":["../../../src/components/ThemeIcon/ThemeIcon.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getSize,\n MantineColor,\n MantineGradient,\n MantineRadius,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './ThemeIcon.module.css';\n\nexport type ThemeIconStylesNames = 'root';\nexport type ThemeIconVariant =\n \| 'filled'\n \| 'light'\n \| 'outline'\n \| 'transparent'\n \| 'white'\n \| 'default'\n \| 'gradient';\n\nexport type ThemeIconCssVariables = {\n root: '--ti-radius' \| '--ti-size' \| '--ti-bg' \| '--ti-color' \| '--ti-bd';\n};\n\nexport interface ThemeIconProps\n extends BoxProps, StylesApiProps<ThemeIconFactory>, ElementProps<'div'> {\n /** Controls width and height of the button. Numbers are converted to rem. @default 'md' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Key of `theme.colors` or any valid CSS 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 /* Gradient data used when `variant=\"gradient\"` @default theme.defaultGradient /\n gradient?: MantineGradient;\n\n /* Icon displayed inside the component /\n children?: React.ReactNode;\n\n /* If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type ThemeIconFactory = Factory<{\n props: ThemeIconProps;\n ref: HTMLDivElement;\n stylesNames: ThemeIconStylesNames;\n vars: ThemeIconCssVariables;\n variant: ThemeIconVariant;\n}>;\n\nconst varsResolver = createVarsResolver<ThemeIconFactory>(\n (theme, { size, radius, variant, gradient, color, autoContrast }) => {\n const colors = theme.variantColorResolver({\n color: color \|\| theme.primaryColor,\n theme,\n gradient,\n variant: variant \|\| 'filled',\n autoContrast,\n });\n\n return {\n root: {\n '--ti-size': getSize(size, 'ti-size'),\n '--ti-radius': radius === undefined ? undefined : getRadius(radius),\n '--ti-bg': color \|\| variant ? colors.background : undefined,\n '--ti-color': color \|\| variant ? colors.color : undefined,\n '--ti-bd': color \|\| variant ? colors.border : undefined,\n },\n };\n }\n);\n\nexport const ThemeIcon = factory<ThemeIconFactory>((_props) => {\n const props = useProps('ThemeIcon', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n autoContrast,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<ThemeIconFactory>({\n name: 'ThemeIcon',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return <Box {...getStyles('root')} {...others} />;\n});\n\nThemeIcon.classes = classes;\nThemeIcon.varsResolver = varsResolver;\nThemeIcon.displayName = '@mantine/core/ThemeIcon';\n\nexport namespace ThemeIcon {\n export type Props = ThemeIconProps;\n export type StylesNames = ThemeIconStylesNames;\n export type Factory = ThemeIconFactory;\n export type Variant = ThemeIconVariant;\n export type CssVariables = ThemeIconCssVariables;\n}\n"],"mappings":";;;;;;;;;;AA8DA,MAAM,eAAe,oBAClB,OAAO,EAAE,MAAM,QAAQ,SAAS,UAAU,OAAO,mBAAmB;CACnE,MAAM,SAAS,MAAM,qBAAqB;EACxC,OAAO,SAAS,MAAM;EACtB;EACA;EACA,SAAS,WAAW;EACpB;CACF,CAAC;CAED,OAAO,EACL,MAAM;EACJ,aAAa,QAAQ,MAAM,SAAS;EACpC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EAClE,WAAW,SAAS,UAAU,OAAO,aAAa,KAAA;EAClD,cAAc,SAAS,UAAU,OAAO,QAAQ,KAAA;EAChD,WAAW,SAAS,UAAU,OAAO,SAAS,KAAA;CAChD,EACF;AACF,CACF;AAEA,MAAa,YAAY,SAA2B,WAAW;CAC7D,MAAM,QAAQ,SAAS,aAAa,MAAM,MAAM;CAChD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA4B;EAC5C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OAAO,oBAAC,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;CAAS,CAAA;AAClD,CAAC;AAED,UAAU,UAAUA;AACpB,UAAU,eAAe;AACzB,UAAU,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Timeline.mjs","names":["classes"],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { TimelineProvider } from './Timeline.context';\nimport {\n TimelineItem,\n TimelineItemStylesNames,\n type TimelineItemProps,\n type TimelineItemFactory,\n} from './TimelineItem/TimelineItem';\nimport classes from './Timeline.module.css';\nexport type TimelineStylesNames = 'root' \| TimelineItemStylesNames;\nexport type TimelineCssVariables = {\n root: '--tl-line-width' \| '--tl-bullet-size' \| '--tl-color' \| '--tl-icon-color' \| '--tl-radius';\n};\n\nexport interface TimelineProps\n extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {\n /** `Timeline.Item` components /\n children?: React.ReactNode;\n\n /* Index of the active element /\n active?: number;\n\n /* Key of `theme.colors` or any valid CSS color to control active item colors @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 'xl' /\n radius?: MantineRadius;\n\n /* Size of the bullet @default 20 /\n bulletSize?: number \| string;\n\n /* Position of content relative to the bullet @default 'left' /\n align?: 'right' \| 'left';\n\n /* Control width of the line /\n lineWidth?: number \| string;\n\n /* If set, the active items direction is reversed without reversing items order @default false /\n reverseActive?: boolean;\n\n /* If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type TimelineFactory = Factory<{\n props: TimelineProps;\n ref: HTMLDivElement;\n stylesNames: TimelineStylesNames;\n vars: TimelineCssVariables;\n staticComponents: {\n Item: typeof TimelineItem;\n };\n}>;\n\nconst defaultProps = {\n active: -1,\n align: 'left',\n} satisfies Partial<TimelineProps>;\n\nconst varsResolver = createVarsResolver<TimelineFactory>(\n (theme, { bulletSize, lineWidth, radius, color, autoContrast }) => ({\n root: {\n '--tl-bullet-size': rem(bulletSize),\n '--tl-line-width': rem(lineWidth),\n '--tl-radius': radius === undefined ? undefined : getRadius(radius),\n '--tl-color': color ? getThemeColor(color, theme) : undefined,\n '--tl-icon-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n })\n);\n\nexport const Timeline = factory<TimelineFactory>((_props) => {\n const props = useProps('Timeline', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n active,\n color,\n radius,\n bulletSize,\n align,\n lineWidth,\n reverseActive,\n mod,\n autoContrast,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TimelineFactory>({\n name: 'Timeline',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _children = Children.toArray(children);\n const hasOpposite = _children.some((item: any) => item.props?.opposite != null);\n const items = _children.map((item: any, index) =>\n cloneElement(item, {\n unstyled,\n __align: align,\n __active:\n item.props?.active \|\|\n (reverseActive ? active >= _children.length - index - 1 : active >= index),\n __lineActive:\n item.props?.lineActive \|\|\n (reverseActive ? active >= _children.length - index - 1 : active - 1 >= index),\n })\n );\n\n return (\n <TimelineProvider value={{ getStyles }}>\n <Box {...getStyles('root')} mod={[{ align, opposite: hasOpposite }, mod]} {...others}>\n {items}\n </Box>\n </TimelineProvider>\n );\n});\n\nTimeline.classes = classes;\nTimeline.varsResolver = varsResolver;\nTimeline.displayName = '@mantine/core/Timeline';\nTimeline.Item = TimelineItem;\n\nexport namespace Timeline {\n export type Props = TimelineProps;\n export type StylesNames = TimelineStylesNames;\n export type CssVariables = TimelineCssVariables;\n export type Factory = TimelineFactory;\n\n export namespace Item {\n export type Props = TimelineItemProps;\n export type StylesNames = TimelineItemStylesNames;\n export type Factory = TimelineItemFactory;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwEA,MAAM,eAAe;CACnB,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoB,IAAI,UAAU;CAClC,mBAAmB,IAAI,SAAS;CAChC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClE,cAAc,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CACpD,mBAAmB,qBAAqB,cAAc,KAAK,IACvD,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,QACA,OACA,QACA,YACA,OACA,WACA,eACA,KACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,SAAS,QAAQ,QAAQ;CAC3C,MAAM,cAAc,UAAU,MAAM,SAAc,KAAK,OAAO,YAAY,IAAI;CAC9E,MAAM,QAAQ,UAAU,KAAK,MAAW,UACtC,aAAa,MAAM;EACjB;EACA,SAAS;EACT,UACE,KAAK,OAAO,WACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,UAAU;EACtE,cACE,KAAK,OAAO,eACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,SAAS,KAAK;CAC5E,CAAC,CACH;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,UAAU;~~YACnC~~,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC;IAAE;IAAO,UAAU;GAAY,GAAG,GAAG;GAAG,GAAI;~~aAC3E~~;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO"}
1	+ {"version":3,"file":"Timeline.mjs","names":["classes"],"sources":["../../../src/components/Timeline/Timeline.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { TimelineProvider } from './Timeline.context';\nimport {\n TimelineItem,\n TimelineItemStylesNames,\n type TimelineItemProps,\n type TimelineItemFactory,\n} from './TimelineItem/TimelineItem';\nimport classes from './Timeline.module.css';\nexport type TimelineStylesNames = 'root' \| TimelineItemStylesNames;\nexport type TimelineCssVariables = {\n root: '--tl-line-width' \| '--tl-bullet-size' \| '--tl-color' \| '--tl-icon-color' \| '--tl-radius';\n};\n\nexport interface TimelineProps\n extends BoxProps, StylesApiProps<TimelineFactory>, ElementProps<'div'> {\n /** `Timeline.Item` components /\n children?: React.ReactNode;\n\n /* Index of the active element /\n active?: number;\n\n /* Key of `theme.colors` or any valid CSS color to control active item colors @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 'xl' /\n radius?: MantineRadius;\n\n /* Size of the bullet @default 20 /\n bulletSize?: number \| string;\n\n /* Position of content relative to the bullet @default 'left' /\n align?: 'right' \| 'left';\n\n /* Control width of the line /\n lineWidth?: number \| string;\n\n /* If set, the active items direction is reversed without reversing items order @default false /\n reverseActive?: boolean;\n\n /* If set, adjusts text color based on background color for `filled` variant */\n autoContrast?: boolean;\n}\n\nexport type TimelineFactory = Factory<{\n props: TimelineProps;\n ref: HTMLDivElement;\n stylesNames: TimelineStylesNames;\n vars: TimelineCssVariables;\n staticComponents: {\n Item: typeof TimelineItem;\n };\n}>;\n\nconst defaultProps = {\n active: -1,\n align: 'left',\n} satisfies Partial<TimelineProps>;\n\nconst varsResolver = createVarsResolver<TimelineFactory>(\n (theme, { bulletSize, lineWidth, radius, color, autoContrast }) => ({\n root: {\n '--tl-bullet-size': rem(bulletSize),\n '--tl-line-width': rem(lineWidth),\n '--tl-radius': radius === undefined ? undefined : getRadius(radius),\n '--tl-color': color ? getThemeColor(color, theme) : undefined,\n '--tl-icon-color': getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n })\n);\n\nexport const Timeline = factory<TimelineFactory>((_props) => {\n const props = useProps('Timeline', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n active,\n color,\n radius,\n bulletSize,\n align,\n lineWidth,\n reverseActive,\n mod,\n autoContrast,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TimelineFactory>({\n name: 'Timeline',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const _children = Children.toArray(children);\n const hasOpposite = _children.some((item: any) => item.props?.opposite != null);\n const items = _children.map((item: any, index) =>\n cloneElement(item, {\n unstyled,\n __align: align,\n __active:\n item.props?.active \|\|\n (reverseActive ? active >= _children.length - index - 1 : active >= index),\n __lineActive:\n item.props?.lineActive \|\|\n (reverseActive ? active >= _children.length - index - 1 : active - 1 >= index),\n })\n );\n\n return (\n <TimelineProvider value={{ getStyles }}>\n <Box {...getStyles('root')} mod={[{ align, opposite: hasOpposite }, mod]} {...others}>\n {items}\n </Box>\n </TimelineProvider>\n );\n});\n\nTimeline.classes = classes;\nTimeline.varsResolver = varsResolver;\nTimeline.displayName = '@mantine/core/Timeline';\nTimeline.Item = TimelineItem;\n\nexport namespace Timeline {\n export type Props = TimelineProps;\n export type StylesNames = TimelineStylesNames;\n export type CssVariables = TimelineCssVariables;\n export type Factory = TimelineFactory;\n\n export namespace Item {\n export type Props = TimelineItemProps;\n export type StylesNames = TimelineItemStylesNames;\n export type Factory = TimelineItemFactory;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;AAwEA,MAAM,eAAe;CACnB,QAAQ;CACR,OAAO;AACT;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,YAAY,WAAW,QAAQ,OAAO,oBAAoB,EAClE,MAAM;CACJ,oBAAoB,IAAI,UAAU;CAClC,mBAAmB,IAAI,SAAS;CAChC,eAAe,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;CAClE,cAAc,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;CACpD,mBAAmB,qBAAqB,cAAc,KAAK,IACvD,iBAAiB;EAAE;EAAO;EAAO;CAAa,CAAC,IAC/C,KAAA;AACN,EACF,EACF;AAEA,MAAa,WAAW,SAA0B,WAAW;CAC3D,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,QACA,OACA,QACA,YACA,OACA,WACA,eACA,KACA,cACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAA2B;EAC3C,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,YAAY,SAAS,QAAQ,QAAQ;CAC3C,MAAM,cAAc,UAAU,MAAM,SAAc,KAAK,OAAO,YAAY,IAAI;CAC9E,MAAM,QAAQ,UAAU,KAAK,MAAW,UACtC,aAAa,MAAM;EACjB;EACA,SAAS;EACT,UACE,KAAK,OAAO,WACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,UAAU;EACtE,cACE,KAAK,OAAO,eACX,gBAAgB,UAAU,UAAU,SAAS,QAAQ,IAAI,SAAS,KAAK;CAC5E,CAAC,CACH;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO,EAAE,UAAU;EACnC,UAAA,oBAAC,KAAD;GAAK,GAAI,UAAU,MAAM;GAAG,KAAK,CAAC;IAAE;IAAO,UAAU;GAAY,GAAG,GAAG;GAAG,GAAI;GAC3E,UAAA;EACE,CAAA;CACW,CAAA;AAEtB,CAAC;AAED,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,OAAO"}

package/esm/components/Timeline/TimelineItem/TimelineItem.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TimelineItem.mjs","names":["classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n \| 'itemBody'\n \| 'itemContent'\n \| 'itemBullet'\n \| 'item'\n \| 'itemTitle'\n \| 'itemOpposite';\n\nexport interface TimelineItemProps\n extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n __active?: boolean;\n __lineActive?: boolean;\n __align?: 'right' \| 'left';\n\n /** Item title, displayed next to the bullet /\n title?: React.ReactNode;\n\n /* Content displayed below the title /\n children?: React.ReactNode;\n\n /* React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. /\n bullet?: React.ReactNode;\n\n /* Content displayed on the opposite side of the timeline item /\n opposite?: React.ReactNode;\n\n /* If set, switches the position of content and opposite @default false /\n alternate?: boolean;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' /\n radius?: MantineRadius;\n\n /* Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls line border style @default 'solid' */\n lineVariant?: 'solid' \| 'dashed' \| 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n props: TimelineItemProps;\n ref: HTMLDivElement;\n stylesNames: TimelineItemStylesNames;\n compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n const props = useProps('TimelineItem', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n __active,\n __align,\n __lineActive,\n __vars,\n bullet,\n opposite,\n alternate,\n radius,\n color,\n lineVariant,\n children,\n title,\n mod,\n ...others\n } = props;\n\n const ctx = useTimelineContext();\n const theme = useMantineTheme();\n\n const stylesApiProps = { classNames, styles };\n const bodyFirst = (__align === 'left' && !!alternate) \|\| (__align === 'right' && !alternate);\n\n const oppositeNode = opposite != null && (\n <div {...ctx.getStyles('itemOpposite', stylesApiProps)}>{opposite}</div>\n );\n\n const bodyNode = (\n <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n </div>\n );\n\n return (\n <Box\n {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n mod={[{ 'line-active': __lineActive, active: __active, alternate }, mod]}\n __vars={{\n '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n '--tli-color': color ? getThemeColor(color, theme) : undefined,\n '--tli-border-style': lineVariant \|\| undefined,\n }}\n {...others}\n >\n {bodyFirst ? bodyNode : oppositeNode}\n\n <Box\n {...ctx.getStyles('itemBullet', stylesApiProps)}\n mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n >\n {bullet}\n </Box>\n\n {bodyFirst ? oppositeNode : bodyNode}\n </Box>\n );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;AA+DA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,UACA,WACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WApBS,SAAS,gBAAgB,MAAM,MAqBrC;CAER,MAAM,MAAM,mBAAmB;CAC/B,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAC5C,MAAM,YAAa,YAAY,UAAU,CAAC,CAAC,aAAe,YAAY,WAAW,CAAC;CAElF,MAAM,eAAe,YAAY,QAC/B,oBAAC,OAAD;EAAK,GAAI,IAAI,UAAU,gBAAgB,cAAc;~~YAAI~~;CAAc,CAAA;CAGzE,MAAM,WACJ,qBAAC,OAAD;EAAK,GAAI,IAAI,UAAU,YAAY,cAAc;~~YAAjD~~,CACG,SAAS,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,aAAa,cAAc;~~aAAI~~;EAAW,CAAA,GAC3E,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,eAAe,cAAc;GAAI;EAAc,CAAA,CACnE;;CAGP,OACE,qBAAC,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU;EAAU,GAAG,GAAG;EACvE,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;~~YARN~~;GAUG,YAAY,WAAW;GAExB,oBAAC,KAAD;IACE,GAAI,IAAI,UAAU,cAAc,cAAc;IAC9C,KAAK;KAAE,cAAc,CAAC,CAAC;KAAQ,OAAO;KAAS,QAAQ;IAAS;~~cAE~~/D;GACE,CAAA;GAEJ,YAAY,eAAe;EACzB;;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}
1	+ {"version":3,"file":"TimelineItem.mjs","names":["classes"],"sources":["../../../../src/components/Timeline/TimelineItem/TimelineItem.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n CompoundStylesApiProps,\n ElementProps,\n factory,\n Factory,\n getRadius,\n getThemeColor,\n MantineColor,\n MantineRadius,\n useMantineTheme,\n useProps,\n} from '../../../core';\nimport { useTimelineContext } from '../Timeline.context';\nimport classes from '../Timeline.module.css';\n\nexport type TimelineItemStylesNames =\n \| 'itemBody'\n \| 'itemContent'\n \| 'itemBullet'\n \| 'item'\n \| 'itemTitle'\n \| 'itemOpposite';\n\nexport interface TimelineItemProps\n extends BoxProps, CompoundStylesApiProps<TimelineItemFactory>, ElementProps<'div', 'title'> {\n __active?: boolean;\n __lineActive?: boolean;\n __align?: 'right' \| 'left';\n\n /** Item title, displayed next to the bullet /\n title?: React.ReactNode;\n\n /* Content displayed below the title /\n children?: React.ReactNode;\n\n /* React node that should be rendered inside the bullet – icon, image, avatar, etc. By default, large white dot is displayed. /\n bullet?: React.ReactNode;\n\n /* Content displayed on the opposite side of the timeline item /\n opposite?: React.ReactNode;\n\n /* If set, switches the position of content and opposite @default false /\n alternate?: boolean;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem @default 'xl' /\n radius?: MantineRadius;\n\n /* Key of `theme.colors` or any valid CSS color to control active item colors @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls line border style @default 'solid' */\n lineVariant?: 'solid' \| 'dashed' \| 'dotted';\n}\n\nexport type TimelineItemFactory = Factory<{\n props: TimelineItemProps;\n ref: HTMLDivElement;\n stylesNames: TimelineItemStylesNames;\n compound: true;\n}>;\n\nexport const TimelineItem = factory<TimelineItemFactory>((_props) => {\n const props = useProps('TimelineItem', null, _props);\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n __active,\n __align,\n __lineActive,\n __vars,\n bullet,\n opposite,\n alternate,\n radius,\n color,\n lineVariant,\n children,\n title,\n mod,\n ...others\n } = props;\n\n const ctx = useTimelineContext();\n const theme = useMantineTheme();\n\n const stylesApiProps = { classNames, styles };\n const bodyFirst = (__align === 'left' && !!alternate) \|\| (__align === 'right' && !alternate);\n\n const oppositeNode = opposite != null && (\n <div {...ctx.getStyles('itemOpposite', stylesApiProps)}>{opposite}</div>\n );\n\n const bodyNode = (\n <div {...ctx.getStyles('itemBody', stylesApiProps)}>\n {title && <div {...ctx.getStyles('itemTitle', stylesApiProps)}>{title}</div>}\n <div {...ctx.getStyles('itemContent', stylesApiProps)}>{children}</div>\n </div>\n );\n\n return (\n <Box\n {...ctx.getStyles('item', { ...stylesApiProps, className, style })}\n mod={[{ 'line-active': __lineActive, active: __active, alternate }, mod]}\n __vars={{\n '--tli-radius': radius !== undefined ? getRadius(radius) : undefined,\n '--tli-color': color ? getThemeColor(color, theme) : undefined,\n '--tli-border-style': lineVariant \|\| undefined,\n }}\n {...others}\n >\n {bodyFirst ? bodyNode : oppositeNode}\n\n <Box\n {...ctx.getStyles('itemBullet', stylesApiProps)}\n mod={{ 'with-child': !!bullet, align: __align, active: __active }}\n >\n {bullet}\n </Box>\n\n {bodyFirst ? oppositeNode : bodyNode}\n </Box>\n );\n});\n\nTimelineItem.classes = classes;\nTimelineItem.displayName = '@mantine/core/TimelineItem';\n"],"mappings":";;;;;;;;;;;AA+DA,MAAa,eAAe,SAA8B,WAAW;CAEnE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,UACA,SACA,cACA,QACA,QACA,UACA,WACA,QACA,OACA,aACA,UACA,OACA,KACA,GAAG,WApBS,SAAS,gBAAgB,MAAM,MAqBrC;CAER,MAAM,MAAM,mBAAmB;CAC/B,MAAM,QAAQ,gBAAgB;CAE9B,MAAM,iBAAiB;EAAE;EAAY;CAAO;CAC5C,MAAM,YAAa,YAAY,UAAU,CAAC,CAAC,aAAe,YAAY,WAAW,CAAC;CAElF,MAAM,eAAe,YAAY,QAC/B,oBAAC,OAAD;EAAK,GAAI,IAAI,UAAU,gBAAgB,cAAc;EAAI,UAAA;CAAc,CAAA;CAGzE,MAAM,WACJ,qBAAC,OAAD;EAAK,GAAI,IAAI,UAAU,YAAY,cAAc;EAAjD,UAAA,CACG,SAAS,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,aAAa,cAAc;GAAI,UAAA;EAAW,CAAA,GAC3E,oBAAC,OAAD;GAAK,GAAI,IAAI,UAAU,eAAe,cAAc;GAAI;EAAc,CAAA,CACnE;;CAGP,OACE,qBAAC,KAAD;EACE,GAAI,IAAI,UAAU,QAAQ;GAAE,GAAG;GAAgB;GAAW;EAAM,CAAC;EACjE,KAAK,CAAC;GAAE,eAAe;GAAc,QAAQ;GAAU;EAAU,GAAG,GAAG;EACvE,QAAQ;GACN,gBAAgB,WAAW,KAAA,IAAY,UAAU,MAAM,IAAI,KAAA;GAC3D,eAAe,QAAQ,cAAc,OAAO,KAAK,IAAI,KAAA;GACrD,sBAAsB,eAAe,KAAA;EACvC;EACA,GAAI;EARN,UAAA;GAUG,YAAY,WAAW;GAExB,oBAAC,KAAD;IACE,GAAI,IAAI,UAAU,cAAc,cAAc;IAC9C,KAAK;KAAE,cAAc,CAAC,CAAC;KAAQ,OAAO;KAAS,QAAQ;IAAS;IAE/D,UAAA;GACE,CAAA;GAEJ,YAAY,eAAe;EACzB;;AAET,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}

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

@@ -49,7 +49,7 @@ const Title = factory((_props) => {
 		variant,
 		mod: [{
 			order,
-			"data-line-clamp": typeof lineClamp === "number"
+			lineClamp: typeof lineClamp === "number"
 		}, mod],
 		size,
 		...others

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Title.mjs","names":["classes"],"sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n MantineFontSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { getTitleSize } from './get-title-size';\nimport classes from './Title.module.css';\n\nexport type TitleOrder = 1 \| 2 \| 3 \| 4 \| 5 \| 6;\nexport type TitleSize = `h${TitleOrder}` \| React.CSSProperties['fontSize'] \| MantineFontSize;\n\nexport type TitleStylesNames = 'root';\nexport type TitleCssVariables = {\n root: '--title-fw' \| '--title-lh' \| '--title-fz' \| '--title-line-clamp' \| '--title-text-wrap';\n};\n\nexport interface TitleProps\n extends BoxProps, StylesApiProps<TitleFactory>, ElementProps<'h1', 'color'> {\n /** Heading order (1-6), controls `font-size` style if `size` prop is not set @default 1 /\n order?: TitleOrder;\n\n /* Changes title size, if not set, then size is controlled by `order` prop /\n size?: TitleSize;\n\n /* Number of lines after which heading will be truncated /\n lineClamp?: number;\n\n /* Heading `text-wrap` CSS property @default 'wrap' */\n textWrap?: 'wrap' \| 'nowrap' \| 'balance' \| 'pretty' \| 'stable';\n}\n\nexport type TitleFactory = Factory<{\n props: TitleProps;\n ref: HTMLHeadingElement;\n stylesNames: TitleStylesNames;\n vars: TitleCssVariables;\n}>;\n\nconst defaultProps = {\n order: 1,\n} satisfies Partial<TitleProps>;\n\nconst varsResolver = createVarsResolver<TitleFactory>((_, { order, size, lineClamp, textWrap }) => {\n const sizeVariables = getTitleSize(order \|\| 1, size);\n return {\n root: {\n '--title-fw': sizeVariables.fontWeight,\n '--title-lh': sizeVariables.lineHeight,\n '--title-fz': sizeVariables.fontSize,\n '--title-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n '--title-text-wrap': textWrap,\n },\n };\n});\n\nexport const Title = factory<TitleFactory>((_props) => {\n const props = useProps('Title', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n order,\n vars,\n size,\n variant,\n lineClamp,\n textWrap,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TitleFactory>({\n name: 'Title',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n if (![1, 2, 3, 4, 5, 6].includes(order)) {\n return null;\n }\n\n return (\n <Box\n {...getStyles('root')}\n component={`h${order}`}\n variant={variant}\n mod={[{ order, ~~'data-line-clamp'~~: typeof lineClamp === 'number' }, mod]}\n size={size}\n {...others}\n />\n );\n});\n\nTitle.classes = classes;\nTitle.varsResolver = varsResolver;\nTitle.displayName = '@mantine/core/Title';\n\nexport namespace Title {\n export type Props = TitleProps;\n export type Order = TitleOrder;\n export type Size = TitleSize;\n export type StylesNames = TitleStylesNames;\n export type CssVariables = TitleCssVariables;\n export type Factory = TitleFactory;\n}\n"],"mappings":";;;;;;;;;;AA6CA,MAAM,eAAe,EACnB,OAAO,EACT;AAEA,MAAM,eAAe,oBAAkC,GAAG,EAAE,OAAO,MAAM,WAAW,eAAe;CACjG,MAAM,gBAAgB,aAAa,SAAS,GAAG,IAAI;CACnD,OAAO,EACL,MAAM;EACJ,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,sBAAsB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;EAC7E,qBAAqB;CACvB,EACF;AACF,CAAC;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,OACA,MACA,MACA,SACA,WACA,UACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC;EAAC;EAAG;EAAG;EAAG;EAAG;EAAG;CAAC,CAAC,CAAC,SAAS,KAAK,GACpC,OAAO;CAGT,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,WAAW,IAAI;EACN;EACT,KAAK,CAAC;GAAE;GAAO,~~mBAAmB~~,OAAO,cAAc;EAAS,GAAG,GAAG;~~EAChE~~;EACN,GAAI;CACL,CAAA;AAEL,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}
1	+ {"version":3,"file":"Title.mjs","names":["classes"],"sources":["../../../src/components/Title/Title.tsx"],"sourcesContent":["import {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n MantineFontSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { getTitleSize } from './get-title-size';\nimport classes from './Title.module.css';\n\nexport type TitleOrder = 1 \| 2 \| 3 \| 4 \| 5 \| 6;\nexport type TitleSize = `h${TitleOrder}` \| React.CSSProperties['fontSize'] \| MantineFontSize;\n\nexport type TitleStylesNames = 'root';\nexport type TitleCssVariables = {\n root: '--title-fw' \| '--title-lh' \| '--title-fz' \| '--title-line-clamp' \| '--title-text-wrap';\n};\n\nexport interface TitleProps\n extends BoxProps, StylesApiProps<TitleFactory>, ElementProps<'h1', 'color'> {\n /** Heading order (1-6), controls `font-size` style if `size` prop is not set @default 1 /\n order?: TitleOrder;\n\n /* Changes title size, if not set, then size is controlled by `order` prop /\n size?: TitleSize;\n\n /* Number of lines after which heading will be truncated /\n lineClamp?: number;\n\n /* Heading `text-wrap` CSS property @default 'wrap' */\n textWrap?: 'wrap' \| 'nowrap' \| 'balance' \| 'pretty' \| 'stable';\n}\n\nexport type TitleFactory = Factory<{\n props: TitleProps;\n ref: HTMLHeadingElement;\n stylesNames: TitleStylesNames;\n vars: TitleCssVariables;\n}>;\n\nconst defaultProps = {\n order: 1,\n} satisfies Partial<TitleProps>;\n\nconst varsResolver = createVarsResolver<TitleFactory>((_, { order, size, lineClamp, textWrap }) => {\n const sizeVariables = getTitleSize(order \|\| 1, size);\n return {\n root: {\n '--title-fw': sizeVariables.fontWeight,\n '--title-lh': sizeVariables.lineHeight,\n '--title-fz': sizeVariables.fontSize,\n '--title-line-clamp': typeof lineClamp === 'number' ? lineClamp.toString() : undefined,\n '--title-text-wrap': textWrap,\n },\n };\n});\n\nexport const Title = factory<TitleFactory>((_props) => {\n const props = useProps('Title', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n order,\n vars,\n size,\n variant,\n lineClamp,\n textWrap,\n mod,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<TitleFactory>({\n name: 'Title',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n if (![1, 2, 3, 4, 5, 6].includes(order)) {\n return null;\n }\n\n return (\n <Box\n {...getStyles('root')}\n component={`h${order}`}\n variant={variant}\n mod={[{ order, lineClamp: typeof lineClamp === 'number' }, mod]}\n size={size}\n {...others}\n />\n );\n});\n\nTitle.classes = classes;\nTitle.varsResolver = varsResolver;\nTitle.displayName = '@mantine/core/Title';\n\nexport namespace Title {\n export type Props = TitleProps;\n export type Order = TitleOrder;\n export type Size = TitleSize;\n export type StylesNames = TitleStylesNames;\n export type CssVariables = TitleCssVariables;\n export type Factory = TitleFactory;\n}\n"],"mappings":";;;;;;;;;;AA6CA,MAAM,eAAe,EACnB,OAAO,EACT;AAEA,MAAM,eAAe,oBAAkC,GAAG,EAAE,OAAO,MAAM,WAAW,eAAe;CACjG,MAAM,gBAAgB,aAAa,SAAS,GAAG,IAAI;CACnD,OAAO,EACL,MAAM;EACJ,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,cAAc,cAAc;EAC5B,sBAAsB,OAAO,cAAc,WAAW,UAAU,SAAS,IAAI,KAAA;EAC7E,qBAAqB;CACvB,EACF;AACF,CAAC;AAED,MAAa,QAAQ,SAAuB,WAAW;CACrD,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,OACA,MACA,MACA,SACA,WACA,UACA,KACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAwB;EACxC,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,CAAC;EAAC;EAAG;EAAG;EAAG;EAAG;EAAG;CAAC,CAAC,CAAC,SAAS,KAAK,GACpC,OAAO;CAGT,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,MAAM;EACpB,WAAW,IAAI;EACN;EACT,KAAK,CAAC;GAAE;GAAO,WAAW,OAAO,cAAc;EAAS,GAAG,GAAG;EACxD;EACN,GAAI;CACL,CAAA;AAEL,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Tooltip.mjs","names":["classes"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingArrow,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getArrowMergeDropdownStyles,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n TooltipGroup,\n type TooltipGroupProps,\n type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n /** Called when tooltip position changes /\n onPositionChange?: (position: FloatingPosition) => void;\n\n /* Open delay in ms /\n openDelay?: number;\n\n /* Close delay in ms @default 0 /\n closeDelay?: number;\n\n /* Controlled opened state /\n opened?: boolean;\n\n /* Uncontrolled tooltip initial opened state /\n defaultOpened?: boolean;\n\n /* Space between target element and tooltip in px @default 5 /\n offset?: number \| FloatingAxesOffsets;\n\n /* If set, the tooltip has an arrow @default false /\n withArrow?: boolean;\n\n /* Arrow size in px @default 4 /\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 relative to the tooltip @default side /\n arrowPosition?: ArrowPosition;\n\n /* Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } /\n transitionProps?: TransitionOverride;\n\n /* Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } /\n events?: { hover: boolean; focus: boolean; touch: boolean };\n\n /* If set, the tooltip stays open while the pointer moves from the target to the tooltip and remains over it. Required by [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) if the tooltip contains interactive content. Note that an interactive tooltip intercepts pointer events of the content it overlaps @default false /\n interactive?: boolean;\n\n /* Must be set if the tooltip target is an inline element /\n inline?: boolean;\n\n /* If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead /\n keepMounted?: boolean;\n\n /* Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' /\n floatingStrategy?: FloatingStrategy;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* Selector, ref of an element or element itself that should be used for positioning */\n target?: React.RefObject<HTMLElement \| null> \| HTMLElement \| null \| string;\n}\n\nexport type TooltipFactory = Factory<{\n props: TooltipProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n staticComponents: {\n Floating: typeof TooltipFloating;\n Group: typeof TooltipGroup;\n };\n}>;\n\nconst defaultProps = {\n position: 'top',\n refProp: 'ref',\n withinPortal: true,\n arrowSize: 4,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n offset: 5,\n transitionProps: { duration: 100, transition: 'fade' },\n events: { hover: true, focus: false, touch: false },\n zIndex: getDefaultZIndex('popover'),\n middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n (theme, { radius, color, variant, autoContrast }) => {\n const colors = theme.variantColorResolver({\n theme,\n color: color \|\| theme.primaryColor,\n autoContrast,\n variant: variant \|\| 'filled',\n });\n\n return {\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? colors.background : undefined,\n '--tooltip-color': color ? colors.color : undefined,\n },\n };\n }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n const props = useProps('Tooltip', defaultProps, _props);\n const {\n children,\n position,\n refProp,\n label,\n openDelay,\n closeDelay,\n onPositionChange,\n opened,\n defaultOpened,\n withinPortal,\n radius,\n color,\n classNames,\n styles,\n unstyled,\n style,\n className,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n offset,\n transitionProps,\n multiline,\n events,\n interactive,\n zIndex,\n disabled,\n onClick,\n onMouseEnter,\n onMouseLeave,\n inline,\n variant,\n keepMounted,\n vars,\n portalProps,\n mod,\n floatingStrategy,\n middlewares,\n autoContrast,\n attributes,\n target,\n ref,\n ...others\n } = props;\n\n const { dir } = useDirection();\n const arrowRef = useRef<HTMLDivElement>(null);\n\n const tooltip = useTooltip({\n position: getFloatingPosition(dir, position),\n closeDelay,\n openDelay,\n onPositionChange,\n opened,\n defaultOpened,\n events,\n interactive,\n arrowRef,\n arrowOffset,\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n inline,\n strategy: floatingStrategy,\n middlewares,\n });\n\n useEffect(() => {\n const targetNode =\n target instanceof HTMLElement\n ? target\n : typeof target === 'string'\n ? document.querySelector(target)\n : target?.current \|\| null;\n\n if (targetNode) {\n tooltip.reference(targetNode);\n }\n }, [target, tooltip]);\n\n const getStyles = useStyles<TooltipFactory>({\n name: 'Tooltip',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'tooltip',\n vars,\n varsResolver,\n });\n\n const child = getSingleElementChild(children);\n if (!target && !child) {\n throw new Error(\n '[@mantine/core] Tooltip 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 tooltipStyles = getStyles('tooltip');\n const interactiveMod = interactive && !disabled && !!tooltip.opened;\n const mergeStyles =\n arrowPosition === 'merge' && withArrow\n ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n : undefined;\n\n if (target) {\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' \|\| undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltipStyles}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: tooltipStyles.className,\n style: {\n ...tooltipStyles.style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize!}\n arrowOffset={arrowOffset!}\n arrowRadius={arrowRadius!}\n arrowPosition={arrowPosition!}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n </>\n );\n }\n\n // fallback to children-based approach\n const childProps = child!.props as any;\n const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' \|\| undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: getStyles('tooltip').className,\n style: {\n ...getStyles('tooltip').style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize}\n arrowOffset={arrowOffset}\n arrowRadius={arrowRadius}\n arrowPosition={arrowPosition}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n\n {cloneElement(\n child!,\n tooltip.getReferenceProps({\n onClick,\n onMouseEnter,\n onMouseLeave,\n onMouseMove: props.onMouseMove,\n onPointerDown: props.onPointerDown,\n onPointerEnter: props.onPointerEnter,\n ...childProps,\n className: cx(className, childProps.className),\n [refProp]: targetRef,\n })\n )}\n </>\n );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n export type Props = TooltipProps;\n export type Factory = TooltipFactory;\n export type CssVariables = TooltipCssVariables;\n export type StylesNames = TooltipStylesNames;\n\n export namespace Group {\n export type Props = TooltipGroupProps;\n export type ContextValue = TooltipGroupContextValue;\n }\n\n export namespace Floating {\n export type Props = TooltipFloatingProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0GA,MAAM,eAAe;CACnB,UAAU;CACV,SAAS;CACT,cAAc;CACd,WAAW;CACX,aAAa;CACb,aAAa;CACb,eAAe;CACf,QAAQ;CACR,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAO;CACrD,QAAQ;EAAE,OAAO;EAAM,OAAO;EAAO,OAAO;CAAM;CAClD,QAAQ,iBAAiB,SAAS;CAClC,aAAa;EAAE,MAAM;EAAM,OAAO;EAAM,QAAQ;CAAM;AACxD;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,SAAS,mBAAmB;CACnD,MAAM,SAAS,MAAM,qBAAqB;EACxC;EACA,OAAO,SAAS,MAAM;EACtB;EACA,SAAS,WAAW;CACtB,CAAC;CAED,OAAO,EACL,SAAS;EACP,oBAAoB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACvE,gBAAgB,QAAQ,OAAO,aAAa,KAAA;EAC5C,mBAAmB,QAAQ,OAAO,QAAQ,KAAA;CAC5C,EACF;AACF,CACF;AAEA,MAAa,UAAU,SAAyB,WAAW;CACzD,MAAM,QAAQ,SAAS,WAAW,cAAc,MAAM;CACtD,MAAM,EACJ,UACA,UACA,SACA,OACA,WACA,YACA,kBACA,QACA,eACA,cACA,QACA,OACA,YACA,QACA,UACA,OACA,WACA,WACA,WACA,aACA,aACA,eACA,QACA,iBACA,WACA,QACA,aACA,QACA,UACA,SACA,cACA,cACA,QACA,SACA,aACA,MACA,aACA,KACA,kBACA,aACA,cACA,YACA,QACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,QAAQ,aAAa;CAC7B,MAAM,WAAW,OAAuB,IAAI;CAE5C,MAAM,UAAU,WAAW;EACzB,UAAU,oBAAoB,KAAK,QAAQ;EAC3C;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,QAAQ,OAAO,WAAW,WAAW,UAAU,YAAY,YAAY,IAAI,KAAK;EAChF;EACA,UAAU;EACV;CACF,CAAC;CAED,gBAAgB;EACd,MAAM,aACJ,kBAAkB,cACd,SACA,OAAO,WAAW,WAChB,SAAS,cAAc,MAAM,IAC7B,QAAQ,WAAW;EAE3B,IAAI,YACF,QAAQ,UAAU,UAAU;CAEhC,GAAG,CAAC,QAAQ,OAAO,CAAC;CAEpB,MAAM,YAAY,UAA0B;EAC1C,MAAM;EACN;EACA,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,QAAQ,sBAAsB,QAAQ;CAC5C,IAAI,CAAC,UAAU,CAAC,OACd,MAAM,IAAI,MACR,2KACF;CAGF,MAAM,gBAAgB,UAAU,SAAS;CACzC,MAAM,iBAAiB,eAAe,CAAC,YAAY,CAAC,CAAC,QAAQ;CAC7D,MAAM,cACJ,kBAAkB,WAAW,YACzB,4BAA4B;EAAE,UAAU,QAAQ;EAAW;CAAI,CAAC,IAChE,KAAA;CAEN,IAAI,QAAQ;EACV,MAAM,aAAa,mBAAmB,iBAAiB;GAAE,UAAU;GAAK,YAAY;EAAO,CAAC;EAC5F,OACE,oBAAA,YAAA,EAAA,UACE,oBAAC,gBAAD;GAAgB,GAAI;GAA2B;aAC7C,oBAAC,YAAD;IACE,GAAI;IACS;IACb,SAAS,CAAC,YAAY,CAAC,CAAC,QAAQ;IAChC,UAAU,QAAQ,eAAe,KAAK,WAAW;eAE/C,qBACA,qBAAC,KAAD;KACE,GAAI;KACJ,cAAY,qBAAqB,WAAW,KAAA;KACnC;KACT,KAAK,CAAC;MAAE;MAAW,aAAa;KAAe,GAAG,GAAG;KACrD,GAAI;KACJ,GAAI,QAAQ,iBAAiB;MAC3B,KAAK,QAAQ;MACb,WAAW,cAAc;MACzB,OAAO;OACL,GAAG,cAAc;OACjB,GAAG;OACH,GAAG;OACK;OACR,KAAK,QAAQ,KAAK;OAClB,MAAM,QAAQ,KAAK;MACrB;KACF,CAAC;eAjBH,CAmBG,OACD,oBAAC,eAAD;MACE,KAAK;MACL,QAAQ,QAAQ;MAChB,QAAQ,QAAQ;MAChB,SAAS;MACT,UAAU,QAAQ;MACP;MACE;MACA;MACE;MACf,GAAI,UAAU,OAAO;KACtB,CAAA,CACE;;GAEG,CAAA;EACE,CAAA,EAChB,CAAA;CAEN;CAGA,MAAM,aAAa,MAAO;CAC1B,MAAM,YAAY,aAAa,QAAQ,WAAW,WAAW,KAAK,GAAG,GAAG;CACxE,MAAM,aAAa,mBAAmB,iBAAiB;EAAE,UAAU;EAAK,YAAY;CAAO,CAAC;CAE5F,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,oBAAC,YAAD;GACE,GAAI;GACS;GACb,SAAS,CAAC,YAAY,CAAC,CAAC,QAAQ;GAChC,UAAU,QAAQ,eAAe,KAAK,WAAW;cAE/C,qBACA,qBAAC,KAAD;IACE,GAAI;IACJ,cAAY,qBAAqB,WAAW,KAAA;IACnC;IACT,KAAK,CAAC;KAAE;KAAW,aAAa;IAAe,GAAG,GAAG;IACrD,GAAI,QAAQ,iBAAiB;KAC3B,KAAK,QAAQ;KACb,WAAW,UAAU,SAAS,CAAC,CAAC;KAChC,OAAO;MACL,GAAG,UAAU,SAAS,CAAC,CAAC;MACxB,GAAG;MACH,GAAG;MACK;MACR,KAAK,QAAQ,KAAK;MAClB,MAAM,QAAQ,KAAK;KACrB;IACF,CAAC;cAhBH,CAkBG,OACD,oBAAC,eAAD;KACE,KAAK;KACL,QAAQ,QAAQ;KAChB,QAAQ,QAAQ;KAChB,SAAS;KACT,UAAU,QAAQ;KACP;KACE;KACA;KACE;KACf,GAAI,UAAU,OAAO;IACtB,CAAA,CACE;;EAEG,CAAA;CACE,CAAA,GAEf,aACC,OACA,QAAQ,kBAAkB;EACxB;EACA;EACA;EACA,aAAa,MAAM;EACnB,eAAe,MAAM;EACrB,gBAAgB,MAAM;EACtB,GAAG;EACH,WAAW,GAAG,WAAW,WAAW,SAAS;GAC5C,UAAU;CACb,CAAC,CACH,CACA,EAAA,CAAA;AAEN,CAAC;AAED,QAAQ,UAAUA;AAClB,QAAQ,eAAe;AACvB,QAAQ,cAAc;AACtB,QAAQ,WAAW;AACnB,QAAQ,QAAQ"}
1	+ {"version":3,"file":"Tooltip.mjs","names":["classes"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import { cloneElement, useEffect, useRef } from 'react';\nimport cx from 'clsx';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n Box,\n createVarsResolver,\n factory,\n Factory,\n getDefaultZIndex,\n getRadius,\n getRefProp,\n getSingleElementChild,\n useDirection,\n useProps,\n useStyles,\n} from '../../core';\nimport {\n ArrowPosition,\n FloatingArrow,\n FloatingAxesOffsets,\n FloatingPosition,\n FloatingStrategy,\n getArrowMergeDropdownStyles,\n getFloatingPosition,\n} from '../../utils/Floating';\nimport { OptionalPortal } from '../Portal';\nimport { getTransitionProps, Transition, TransitionOverride } from '../Transition';\nimport { TooltipBaseProps, TooltipCssVariables, TooltipStylesNames } from './Tooltip.types';\nimport { TooltipFloating, type TooltipFloatingProps } from './TooltipFloating/TooltipFloating';\nimport {\n TooltipGroup,\n type TooltipGroupProps,\n type TooltipGroupContextValue,\n} from './TooltipGroup/TooltipGroup';\nimport { useTooltip } from './use-tooltip';\nimport classes from './Tooltip.module.css';\nexport interface TooltipProps extends TooltipBaseProps {\n /** Called when tooltip position changes /\n onPositionChange?: (position: FloatingPosition) => void;\n\n /* Open delay in ms /\n openDelay?: number;\n\n /* Close delay in ms @default 0 /\n closeDelay?: number;\n\n /* Controlled opened state /\n opened?: boolean;\n\n /* Uncontrolled tooltip initial opened state /\n defaultOpened?: boolean;\n\n /* Space between target element and tooltip in px @default 5 /\n offset?: number \| FloatingAxesOffsets;\n\n /* If set, the tooltip has an arrow @default false /\n withArrow?: boolean;\n\n /* Arrow size in px @default 4 /\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 relative to the tooltip @default side /\n arrowPosition?: ArrowPosition;\n\n /* Props passed down to the `Transition` component that used to animate tooltip presence, use to configure duration and animation type @default { duration: 100, transition: 'fade' } /\n transitionProps?: TransitionOverride;\n\n /* Determines which events will be used to show tooltip @default { hover: true, focus: false, touch: false } /\n events?: { hover: boolean; focus: boolean; touch: boolean };\n\n /* If set, the tooltip stays open while the pointer moves from the target to the tooltip and remains over it. Required by [WCAG 1.4.13](https://www.w3.org/WAI/WCAG21/Understanding/content-on-hover-or-focus.html) if the tooltip contains interactive content. Note that an interactive tooltip intercepts pointer events of the content it overlaps @default false /\n interactive?: boolean;\n\n /* Must be set if the tooltip target is an inline element /\n inline?: boolean;\n\n /* If set, the tooltip is not unmounted from the DOM when hidden, `display: none` styles are applied instead /\n keepMounted?: boolean;\n\n /* Changes floating ui [position strategy](https://floating-ui.com/docs/usefloating#strategy) @default 'absolute' /\n floatingStrategy?: FloatingStrategy;\n\n /* If set, adjusts text color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* Selector, ref of an element or element itself that should be used for positioning */\n target?: React.RefObject<HTMLElement \| null> \| HTMLElement \| null \| string;\n}\n\nexport type TooltipFactory = Factory<{\n props: TooltipProps;\n ref: HTMLDivElement;\n stylesNames: TooltipStylesNames;\n vars: TooltipCssVariables;\n staticComponents: {\n Floating: typeof TooltipFloating;\n Group: typeof TooltipGroup;\n };\n}>;\n\nconst defaultProps = {\n position: 'top',\n refProp: 'ref',\n withinPortal: true,\n arrowSize: 4,\n arrowOffset: 5,\n arrowRadius: 0,\n arrowPosition: 'side',\n offset: 5,\n transitionProps: { duration: 100, transition: 'fade' },\n events: { hover: true, focus: false, touch: false },\n zIndex: getDefaultZIndex('popover'),\n middlewares: { flip: true, shift: true, inline: false },\n} satisfies Partial<TooltipProps>;\n\nconst varsResolver = createVarsResolver<TooltipFactory>(\n (theme, { radius, color, variant, autoContrast }) => {\n const colors = theme.variantColorResolver({\n theme,\n color: color \|\| theme.primaryColor,\n autoContrast,\n variant: variant \|\| 'filled',\n });\n\n return {\n tooltip: {\n '--tooltip-radius': radius === undefined ? undefined : getRadius(radius),\n '--tooltip-bg': color ? colors.background : undefined,\n '--tooltip-color': color ? colors.color : undefined,\n },\n };\n }\n);\n\nexport const Tooltip = factory<TooltipFactory>((_props) => {\n const props = useProps('Tooltip', defaultProps, _props);\n const {\n children,\n position,\n refProp,\n label,\n openDelay,\n closeDelay,\n onPositionChange,\n opened,\n defaultOpened,\n withinPortal,\n radius,\n color,\n classNames,\n styles,\n unstyled,\n style,\n className,\n withArrow,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n offset,\n transitionProps,\n multiline,\n events,\n interactive,\n zIndex,\n disabled,\n onClick,\n onMouseEnter,\n onMouseLeave,\n inline,\n variant,\n keepMounted,\n vars,\n portalProps,\n mod,\n floatingStrategy,\n middlewares,\n autoContrast,\n attributes,\n target,\n ref,\n ...others\n } = props;\n\n const { dir } = useDirection();\n const arrowRef = useRef<HTMLDivElement>(null);\n\n const tooltip = useTooltip({\n position: getFloatingPosition(dir, position),\n closeDelay,\n openDelay,\n onPositionChange,\n opened,\n defaultOpened,\n events,\n interactive,\n arrowRef,\n arrowOffset,\n offset: typeof offset === 'number' ? offset + (withArrow ? arrowSize / 2 : 0) : offset,\n inline,\n strategy: floatingStrategy,\n middlewares,\n });\n\n useEffect(() => {\n const targetNode =\n target instanceof HTMLElement\n ? target\n : typeof target === 'string'\n ? document.querySelector(target)\n : target?.current \|\| null;\n\n if (targetNode) {\n tooltip.reference(targetNode);\n }\n }, [target, tooltip]);\n\n const getStyles = useStyles<TooltipFactory>({\n name: 'Tooltip',\n props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n rootSelector: 'tooltip',\n vars,\n varsResolver,\n });\n\n const child = getSingleElementChild(children);\n if (!target && !child) {\n throw new Error(\n '[@mantine/core] Tooltip 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 tooltipStyles = getStyles('tooltip');\n const interactiveMod = interactive && !disabled && !!tooltip.opened;\n const mergeStyles =\n arrowPosition === 'merge' && withArrow\n ? getArrowMergeDropdownStyles({ position: tooltip.placement, dir })\n : undefined;\n\n if (target) {\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' \|\| undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltipStyles}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: tooltipStyles.className,\n style: {\n ...tooltipStyles.style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize!}\n arrowOffset={arrowOffset!}\n arrowRadius={arrowRadius!}\n arrowPosition={arrowPosition!}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n </>\n );\n }\n\n // fallback to children-based approach\n const childProps = child!.props as any;\n const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);\n const transition = getTransitionProps(transitionProps, { duration: 100, transition: 'fade' });\n\n return (\n <>\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <Transition\n {...transition}\n keepMounted={keepMounted}\n mounted={!disabled && !!tooltip.opened}\n duration={tooltip.isGroupPhase ? 10 : transition.duration}\n >\n {(transitionStyles) => (\n <Box\n {...others}\n data-fixed={floatingStrategy === 'fixed' \|\| undefined}\n variant={variant}\n mod={[{ multiline, interactive: interactiveMod }, mod]}\n {...tooltip.getFloatingProps({\n ref: tooltip.floating,\n className: getStyles('tooltip').className,\n style: {\n ...getStyles('tooltip').style,\n ...transitionStyles,\n ...mergeStyles,\n zIndex: zIndex as React.CSSProperties['zIndex'],\n top: tooltip.y ?? 0,\n left: tooltip.x ?? 0,\n },\n })}\n >\n {label}\n <FloatingArrow\n ref={arrowRef}\n arrowX={tooltip.arrowX}\n arrowY={tooltip.arrowY}\n visible={withArrow}\n position={tooltip.placement}\n arrowSize={arrowSize}\n arrowOffset={arrowOffset}\n arrowRadius={arrowRadius}\n arrowPosition={arrowPosition}\n {...getStyles('arrow')}\n />\n </Box>\n )}\n </Transition>\n </OptionalPortal>\n\n {cloneElement(\n child!,\n tooltip.getReferenceProps({\n onClick,\n onMouseEnter,\n onMouseLeave,\n onMouseMove: props.onMouseMove,\n onPointerDown: props.onPointerDown,\n onPointerEnter: props.onPointerEnter,\n ...childProps,\n className: cx(className, childProps.className),\n [refProp]: targetRef,\n })\n )}\n </>\n );\n});\n\nTooltip.classes = classes;\nTooltip.varsResolver = varsResolver;\nTooltip.displayName = '@mantine/core/Tooltip';\nTooltip.Floating = TooltipFloating;\nTooltip.Group = TooltipGroup;\n\nexport namespace Tooltip {\n export type Props = TooltipProps;\n export type Factory = TooltipFactory;\n export type CssVariables = TooltipCssVariables;\n export type StylesNames = TooltipStylesNames;\n\n export namespace Group {\n export type Props = TooltipGroupProps;\n export type ContextValue = TooltipGroupContextValue;\n }\n\n export namespace Floating {\n export type Props = TooltipFloatingProps;\n }\n}\n"],"mappings":"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"}

package/esm/components/Tooltip/TooltipFloating/TooltipFloating.mjs CHANGED Viewed

@@ -75,8 +75,8 @@ const TooltipFloating = factory((_props) => {
 				...getStyleObject(style, theme),
 				zIndex,
 				display: !disabled && opened ? "block" : "none",
-				top: (y && Math.round(y)) ?? "",
-				left: (x && Math.round(x)) ?? ""
+				top: Number.isFinite(y) ? Math.round(y) : "",
+				left: Number.isFinite(x) ? Math.round(x) : ""
 			} }),
 			variant,
 			ref: floating,