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

@mantine/core 9.2.2 → 9.3.1

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

Files changed (863) hide show

package/esm/components/Blockquote/Blockquote.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Blockquote.module.mjs","names":[],"sources":["../../../src/components/Blockquote/Blockquote.module.css"],"sourcesContent":[".root {\n --blockquote-border: 3px solid var(--bq-bd);\n\n position: relative;\n margin: 0;\n border-inline-start: var(--blockquote-border);\n border-start-end-radius: var(--bq-radius);\n border-end-end-radius: var(--bq-radius);\n padding: var(--mantine-spacing-xl) rem(38px);\n\n @mixin where-light {\n background-color: var(--bq-bg-light);\n }\n\n @mixin where-dark {\n background-color: var(--bq-bg-dark);\n }\n}\n\n.icon {\n --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);\n\n position: absolute;\n color: var(--bq-bd);\n background-color: var(--mantine-color-body);\n display: flex;\n align-items: center;\n justify-content: center;\n top: var(--blockquote-icon-offset);\n inset-inline-start: var(--blockquote-icon-offset);\n width: var(--bq-icon-size);\n height: var(--bq-icon-size);\n border-radius: var(--bq-icon-size);\n}\n\n.cite {\n display: block;\n margin-top: var(--mantine-spacing-md);\n opacity: 0.6;\n font-size: 85%;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Blockquote.module.mjs","names":[],"sources":["../../../src/components/Blockquote/Blockquote.module.css"],"sourcesContent":[".root {\n --blockquote-border: 3px solid var(--bq-bd);\n\n position: relative;\n margin: 0;\n text-wrap: var(--bq-text-wrap, var(--mantine-text-wrap, wrap));\n border-inline-start: var(--blockquote-border);\n border-start-end-radius: var(--bq-radius);\n border-end-end-radius: var(--bq-radius);\n padding: var(--mantine-spacing-xl) rem(38px);\n\n @mixin where-light {\n background-color: var(--bq-bg-light);\n }\n\n @mixin where-dark {\n background-color: var(--bq-bg-dark);\n }\n}\n\n.icon {\n --blockquote-icon-offset: calc(var(--bq-icon-size) / -2);\n\n position: absolute;\n color: var(--bq-bd);\n background-color: var(--mantine-color-body);\n display: flex;\n align-items: center;\n justify-content: center;\n top: var(--blockquote-icon-offset);\n inset-inline-start: var(--blockquote-icon-offset);\n width: var(--bq-icon-size);\n height: var(--bq-icon-size);\n border-radius: var(--bq-icon-size);\n}\n\n.cite {\n display: block;\n margin-top: var(--mantine-spacing-md);\n opacity: 0.6;\n font-size: 85%;\n}\n"],"mappings":""}

package/esm/components/Checkbox/CheckboxIndicator/CheckboxIndicator.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' \| 'icon';\nexport type CheckboxIndicatorVariant = 'filled' \| 'outline';\nexport type CheckboxIndicatorCssVariables = {\n indicator: '--checkbox-size' \| '--checkbox-radius' \| '--checkbox-color' \| '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` /\n iconColor?: MantineColor;\n\n /* If set, adjusts icon color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* Indeterminate state of the checkbox. If set, `checked` prop is ignored. /\n indeterminate?: boolean;\n\n /* Icon for checked or indeterminate state /\n icon?: CheckboxIconComponent;\n\n /* Determines whether the component should have checked styles /\n checked?: boolean;\n\n /* Indicates disabled state */\n disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n props: CheckboxIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxIndicatorStylesNames;\n vars: CheckboxIndicatorCssVariables;\n variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: CheckboxIcon,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color \|\| theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n indicator: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n const props = useProps('CheckboxIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n indeterminate,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CheckboxIndicatorFactory>({\n name: 'CheckboxIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(CheckboxCardContext);\n const _checked =\n typeof checked === 'boolean' \|\| typeof indeterminate === 'boolean'\n ? checked \|\| indeterminate\n : ctx?.checked \|\| false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACxE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EACrF,yBAAyB,YACrB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;CAEtB,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;YAEJ,oBAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,MAAM;EAAI,CAAA;CACzD,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}
1	+ {"version":3,"file":"CheckboxIndicator.mjs","names":["classes"],"sources":["../../../../src/components/Checkbox/CheckboxIndicator/CheckboxIndicator.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getAutoContrastValue,\n getContrastColor,\n getRadius,\n getSize,\n getThemeColor,\n MantineColor,\n MantineRadius,\n MantineSize,\n parseThemeColor,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../../core';\nimport type { CheckboxIconComponent } from '../Checkbox';\nimport { CheckboxCardContext } from '../CheckboxCard/CheckboxCard';\nimport { CheckboxIcon } from '../CheckIcon';\nimport classes from './CheckboxIndicator.module.css';\n\nexport type CheckboxIndicatorStylesNames = 'indicator' \| 'icon';\nexport type CheckboxIndicatorVariant = 'filled' \| 'outline';\nexport type CheckboxIndicatorCssVariables = {\n indicator: '--checkbox-size' \| '--checkbox-radius' \| '--checkbox-color' \| '--checkbox-icon-color';\n};\n\nexport interface CheckboxIndicatorProps\n extends BoxProps, StylesApiProps<CheckboxIndicatorFactory>, ElementProps<'div'> {\n /** Key of `theme.colors` or any valid CSS color to set input background color in checked state @default theme.primaryColor /\n color?: MantineColor;\n\n /* Controls size of the component @default 'sm' /\n size?: MantineSize \| (string & {}) \| number;\n\n /* Key of `theme.radius` or any valid CSS value to set `border-radius` @default theme.defaultRadius /\n radius?: MantineRadius;\n\n /* Key of `theme.colors` or any valid CSS color to set icon color, by default value depends on `theme.autoContrast` /\n iconColor?: MantineColor;\n\n /* If set, adjusts icon color based on background color for `filled` variant /\n autoContrast?: boolean;\n\n /* Indeterminate state of the checkbox. If set, `checked` prop is ignored. /\n indeterminate?: boolean;\n\n /* Icon for checked or indeterminate state /\n icon?: CheckboxIconComponent;\n\n /* Determines whether the component should have checked styles /\n checked?: boolean;\n\n /* Indicates disabled state */\n disabled?: boolean;\n}\n\nexport type CheckboxIndicatorFactory = Factory<{\n props: CheckboxIndicatorProps;\n ref: HTMLDivElement;\n stylesNames: CheckboxIndicatorStylesNames;\n vars: CheckboxIndicatorCssVariables;\n variant: CheckboxIndicatorVariant;\n}>;\n\nconst defaultProps = {\n icon: CheckboxIcon,\n variant: 'filled',\n radius: 'sm',\n} satisfies Partial<CheckboxIndicatorProps>;\n\nconst varsResolver = createVarsResolver<CheckboxIndicatorFactory>(\n (theme, { radius, color, size, iconColor, variant, autoContrast }) => {\n const parsedColor = parseThemeColor({ color: color \|\| theme.primaryColor, theme });\n const outlineColor =\n parsedColor.isThemeColor && parsedColor.shade === undefined\n ? `var(--mantine-color-${parsedColor.color}-outline)`\n : parsedColor.color;\n\n return {\n indicator: {\n '--checkbox-size': getSize(size, 'checkbox-size'),\n '--checkbox-radius': radius === undefined ? undefined : getRadius(radius),\n '--checkbox-color': variant === 'outline' ? outlineColor : getThemeColor(color, theme),\n '--checkbox-icon-color': iconColor\n ? getThemeColor(iconColor, theme)\n : getAutoContrastValue(autoContrast, theme)\n ? getContrastColor({ color, theme, autoContrast })\n : undefined,\n },\n };\n }\n);\n\nexport const CheckboxIndicator = factory<CheckboxIndicatorFactory>((_props) => {\n const props = useProps('CheckboxIndicator', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n icon: Icon,\n indeterminate,\n radius,\n color,\n iconColor,\n autoContrast,\n checked,\n mod,\n variant,\n disabled,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<CheckboxIndicatorFactory>({\n name: 'CheckboxIndicator',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n rootSelector: 'indicator',\n });\n\n const ctx = use(CheckboxCardContext);\n const _checked =\n typeof checked === 'boolean' \|\| typeof indeterminate === 'boolean'\n ? checked \|\| indeterminate\n : ctx?.checked \|\| false;\n\n return (\n <Box\n {...getStyles('indicator', { variant })}\n variant={variant}\n mod={[{ checked: _checked, disabled }, mod]}\n {...others}\n >\n <Icon indeterminate={indeterminate} {...getStyles('icon')} />\n </Box>\n );\n});\n\nCheckboxIndicator.displayName = '@mantine/core/CheckboxIndicator';\nCheckboxIndicator.classes = classes;\nCheckboxIndicator.varsResolver = varsResolver;\n"],"mappings":";;;;;;;;;;;;;;;;;AAsEA,MAAM,eAAe;CACnB,MAAM;CACN,SAAS;CACT,QAAQ;AACV;AAEA,MAAM,eAAe,oBAClB,OAAO,EAAE,QAAQ,OAAO,MAAM,WAAW,SAAS,mBAAmB;CACpE,MAAM,cAAc,gBAAgB;EAAE,OAAO,SAAS,MAAM;EAAc;CAAM,CAAC;CACjF,MAAM,eACJ,YAAY,gBAAgB,YAAY,UAAU,KAAA,IAC9C,uBAAuB,YAAY,MAAM,aACzC,YAAY;CAElB,OAAO,EACL,WAAW;EACT,mBAAmB,QAAQ,MAAM,eAAe;EAChD,qBAAqB,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM;EACxE,oBAAoB,YAAY,YAAY,eAAe,cAAc,OAAO,KAAK;EACrF,yBAAyB,YACrB,cAAc,WAAW,KAAK,IAC9B,qBAAqB,cAAc,KAAK,IACtC,iBAAiB;GAAE;GAAO;GAAO;EAAa,CAAC,IAC/C,KAAA;CACR,EACF;AACF,CACF;AAEA,MAAa,oBAAoB,SAAmC,WAAW;CAC7E,MAAM,QAAQ,SAAS,qBAAqB,cAAc,MAAM;CAChE,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,MAAM,MACN,eACA,QACA,OACA,WACA,cACA,SACA,KACA,SACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAoC;EACpD,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;CAChB,CAAC;CAED,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,WACJ,OAAO,YAAY,aAAa,OAAO,kBAAkB,YACrD,WAAW,gBACX,KAAK,WAAW;CAEtB,OACE,oBAAC,KAAD;EACE,GAAI,UAAU,aAAa,EAAE,QAAQ,CAAC;EAC7B;EACT,KAAK,CAAC;GAAE,SAAS;GAAU;EAAS,GAAG,GAAG;EAC1C,GAAI;YAEJ,oBAAC,MAAD;GAAqB;GAAe,GAAI,UAAU,MAAM;EAAI,CAAA;CACzD,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc;AAChC,kBAAkB,UAAUA;AAC5B,kBAAkB,eAAe"}

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

@@ -13,7 +13,8 @@ const defaultProps = {
 	transitionDuration: 200,
 	transitionTimingFunction: "ease",
 	animateOpacity: true,
-	orientation: "vertical"
+	orientation: "vertical",
+	keepMounted: true
 };
 const Collapse = factory((props) => {
 	const { children, expanded, transitionDuration, transitionTimingFunction, style, onTransitionEnd, onTransitionStart, animateOpacity, keepMounted, ref, orientation, ...others } = useProps("Collapse", defaultProps, props);

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n Factory,\n factory,\n getStyleObject,\n useMantineEnv,\n useMantineTheme,\n useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n /** Collapse orientation @default 'vertical' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Expanded state /\n expanded: boolean;\n\n /* Called when the transition ends /\n onTransitionEnd?: () => void;\n\n /* Called when transition starts /\n onTransitionStart?: () => void;\n\n /* Transition duration in ms @default 200 /\n transitionDuration?: number;\n\n /* Transition timing function @default ease /\n transitionTimingFunction?: string;\n\n /* Determines whether the opacity is animated @default true /\n animateOpacity?: boolean;\n\n /* If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default ~~false~~ */\n keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n props: CollapseProps;\n ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n transitionDuration: 200,\n transitionTimingFunction: 'ease',\n animateOpacity: true,\n orientation: 'vertical',\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n const {\n children,\n expanded,\n transitionDuration,\n transitionTimingFunction,\n style,\n onTransitionEnd,\n onTransitionStart,\n animateOpacity,\n keepMounted,\n ref,\n orientation,\n ...others\n } = useProps('Collapse', defaultProps, props);\n\n const env = useMantineEnv();\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 0 : transitionDuration;\n const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n const collapse = hook({\n expanded,\n transitionDuration: duration,\n transitionTimingFunction,\n onTransitionEnd,\n onTransitionStart,\n keepMounted: false,\n });\n\n if (duration === 0) {\n if (keepMounted === true && env !== 'test') {\n return (\n <Activity mode={expanded ? 'visible' : 'hidden'}>\n <Box {...others}>{children}</Box>\n </Activity>\n );\n }\n return expanded ? <Box {...others}>{children}</Box> : null;\n }\n\n const isExited = collapse.state === 'exited';\n\n let content: React.ReactNode;\n if (keepMounted === false) {\n content = isExited ? null : children;\n } else if (keepMounted === true) {\n content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n } else {\n content = children;\n }\n\n return (\n <Box\n {...others}\n {...collapse.getCollapseProps({\n style: {\n opacity: expanded \|\| !animateOpacity ? 1 : 0,\n transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n ...getStyleObject(style, theme),\n },\n ref,\n })}\n >\n {content}\n </Box>\n );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n export type Props = CollapseProps;\n export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;AACf;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,QAAQ,QAAQ,QAClC,OACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAS;GAAc,CAAA;EACxB,CAAA;EAGd,OAAO,WAAW,oBAAC,KAAD;GAAK,GAAI;GAAS;EAAc,CAAA,IAAI;CACxD;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAE/E,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;GAChC;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}
1	+ {"version":3,"file":"Collapse.mjs","names":[],"sources":["../../../src/components/Collapse/Collapse.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useCollapse, useHorizontalCollapse, useReducedMotion } from '@mantine/hooks';\nimport {\n Box,\n BoxProps,\n Factory,\n factory,\n getStyleObject,\n useMantineEnv,\n useMantineTheme,\n useProps,\n} from '../../core';\n\nexport interface CollapseProps extends BoxProps, Omit<React.ComponentProps<'div'>, keyof BoxProps> {\n /** Collapse orientation @default 'vertical' /\n orientation?: 'vertical' \| 'horizontal';\n\n /* Expanded state /\n expanded: boolean;\n\n /* Called when the transition ends /\n onTransitionEnd?: () => void;\n\n /* Called when transition starts /\n onTransitionStart?: () => void;\n\n /* Transition duration in ms @default 200 /\n transitionDuration?: number;\n\n /* Transition timing function @default ease /\n transitionTimingFunction?: string;\n\n /* Determines whether the opacity is animated @default true /\n animateOpacity?: boolean;\n\n /* If set, the element is kept in the DOM when collapsed. When `true`, React 19 `Activity` is used to preserve state while collapsed. When `false`, the element is unmounted after the exit animation. @default true */\n keepMounted?: boolean;\n}\n\nexport type CollapseFactory = Factory<{\n props: CollapseProps;\n ref: HTMLDivElement;\n}>;\n\nconst defaultProps = {\n transitionDuration: 200,\n transitionTimingFunction: 'ease',\n animateOpacity: true,\n orientation: 'vertical',\n keepMounted: true,\n} satisfies Partial<CollapseProps>;\n\nexport const Collapse = factory<CollapseFactory>((props) => {\n const {\n children,\n expanded,\n transitionDuration,\n transitionTimingFunction,\n style,\n onTransitionEnd,\n onTransitionStart,\n animateOpacity,\n keepMounted,\n ref,\n orientation,\n ...others\n } = useProps('Collapse', defaultProps, props);\n\n const env = useMantineEnv();\n const theme = useMantineTheme();\n const shouldReduceMotion = useReducedMotion();\n const reduceMotion = theme.respectReducedMotion ? shouldReduceMotion : false;\n const duration = reduceMotion ? 0 : transitionDuration;\n const hook = orientation === 'horizontal' ? useHorizontalCollapse : useCollapse;\n\n const collapse = hook({\n expanded,\n transitionDuration: duration,\n transitionTimingFunction,\n onTransitionEnd,\n onTransitionStart,\n keepMounted: false,\n });\n\n if (duration === 0) {\n if (keepMounted === true && env !== 'test') {\n return (\n <Activity mode={expanded ? 'visible' : 'hidden'}>\n <Box {...others}>{children}</Box>\n </Activity>\n );\n }\n return expanded ? <Box {...others}>{children}</Box> : null;\n }\n\n const isExited = collapse.state === 'exited';\n\n let content: React.ReactNode;\n if (keepMounted === false) {\n content = isExited ? null : children;\n } else if (keepMounted === true) {\n content = <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>;\n } else {\n content = children;\n }\n\n return (\n <Box\n {...others}\n {...collapse.getCollapseProps({\n style: {\n opacity: expanded \|\| !animateOpacity ? 1 : 0,\n transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : 'none',\n ...getStyleObject(style, theme),\n },\n ref,\n })}\n >\n {content}\n </Box>\n );\n});\n\nCollapse.displayName = '@mantine/core/Collapse';\n\nexport namespace Collapse {\n export type Props = CollapseProps;\n export type Factory = CollapseFactory;\n}\n"],"mappings":";;;;;;;;;;;AA4CA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;AACf;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACD,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAM,cAAc;CAC1B,MAAM,QAAQ,gBAAgB;CAC9B,MAAM,qBAAqB,iBAAiB;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAe,wBAAwB,aAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,QAAQ,QAAQ,QAClC,OACE,oBAAC,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,oBAAC,KAAD;IAAK,GAAI;IAAS;GAAc,CAAA;EACxB,CAAA;EAGd,OAAO,WAAW,oBAAC,KAAD;GAAK,GAAI;GAAS;EAAc,CAAA,IAAI;CACxD;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UAAU,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAE/E,UAAU;CAGZ,OACE,oBAAC,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAG,eAAe,OAAO,KAAK;GAChC;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.context.mjs","names":[],"sources":["../../../src/components/Combobox/Combobox.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi, MantineSize } from '../../core';\nimport type { ComboboxFactory } from './Combobox';\nimport type { ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport type { ComboboxStore } from './use-combobox/use-combobox';\n\nexport interface ComboboxContextValue {\n getStyles: GetStylesApi<ComboboxFactory>;\n store: ComboboxStore;\n onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n size: MantineSize \| (string & {});\n resetSelectionOnOptionHover: boolean \| undefined;\n readOnly: boolean \| undefined;\n}\n\nexport const [ComboboxProvider, useComboboxContext] = createSafeContext<ComboboxContextValue>(\n 'Combobox component was not found in tree'\n);\n"],"mappings":";;;~~AAcA~~,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,0CACF"}
1	+ {"version":3,"file":"Combobox.context.mjs","names":[],"sources":["../../../src/components/Combobox/Combobox.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi, MantineSize } from '../../core';\nimport type { ComboboxFactory } from './Combobox';\nimport type { ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport type { ComboboxStore } from './use-combobox/use-combobox';\n\nexport interface ComboboxContextValue {\n getStyles: GetStylesApi<ComboboxFactory>;\n store: ComboboxStore;\n onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n size: MantineSize \| (string & {});\n resetSelectionOnOptionHover: boolean \| undefined;\n readOnly: boolean \| undefined;\n floatingHeight: 'viewport' \| undefined;\n}\n\nexport const [ComboboxProvider, useComboboxContext] = createSafeContext<ComboboxContextValue>(\n 'Combobox component was not found in tree'\n);\n"],"mappings":";;;AAeA,MAAa,CAAC,kBAAkB,sBAAsB,kBACpD,0CACF"}

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

@@ -48,7 +48,29 @@ const varsResolver = createVarsResolver((_, { size, dropdownPadding }) => ({
 }));
 const Combobox = (_props) => {
 	const props = useProps("Combobox", defaultProps, _props);
-	const { classNames, styles, unstyled, children, store: controlledStore, vars, onOptionSubmit, onClose, size, dropdownPadding, resetSelectionOnOptionHover, __staticSelector, readOnly, attributes, ...others } = props;
+	const { classNames, styles, unstyled, children, store: controlledStore, vars, onOptionSubmit, onClose, size, dropdownPadding, resetSelectionOnOptionHover, __staticSelector, readOnly, attributes, floatingHeight, middlewares, ...others } = props;
+	const resolvedMiddlewares = floatingHeight === "viewport" ? {
+		...middlewares,
+		flip: false,
+		size: {
+			...typeof middlewares?.size === "object" ? middlewares.size : {},
+			padding: typeof middlewares?.size === "object" && middlewares.size.padding !== void 0 ? middlewares.size.padding : 10,
+			apply: ({ availableHeight, availableWidth, elements, ...rest }) => {
+				elements.floating.style.setProperty("--combobox-floating-max-height", `${availableHeight}px`);
+				const userSize = middlewares?.size;
+				if (typeof userSize === "object" && userSize.apply) userSize.apply({
+					availableHeight,
+					availableWidth,
+					elements,
+					...rest
+				});
+				else if (userSize) Object.assign(elements.floating.style, {
+					maxWidth: `${availableWidth}px`,
+					maxHeight: `${availableHeight}px`
+				});
+			}
+		}
+	} : middlewares;
 	const uncontrolledStore = useCombobox();
 	const store = controlledStore || uncontrolledStore;
 	const getStyles = useStyles({
@@ -73,12 +95,13 @@ const Combobox = (_props) => {
 			onOptionSubmit,
 			size,
 			resetSelectionOnOptionHover,
-			readOnly
+			readOnly,
+			floatingHeight
 		},
 		children: /* @__PURE__ */ jsx(Popover, {
 			opened: store.dropdownOpened,
-			preventPositionChangeWhenVisible: false,
 			...others,
+			middlewares: resolvedMiddlewares,
 			onChange: (_opened) => !_opened && onDropdownClose(),
 			withRoles: false,
 			unstyled,

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n createVarsResolver,\n ExtendComponent,\n Factory,\n getFontSize,\n getSize,\n MantineSize,\n MantineThemeComponent,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n ComboboxClearButton,\n ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n ComboboxDropdownTarget,\n ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n ComboboxEventsTarget,\n ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n ComboboxHiddenInput,\n ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n \| 'options'\n \| 'dropdown'\n \| 'option'\n \| 'search'\n \| 'empty'\n \| 'footer'\n \| 'header'\n \| 'group'\n \| 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n options: '--combobox-option-fz' \| '--combobox-option-padding';\n dropdown: '--combobox-padding' \| '--combobox-option-fz' \| '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n __staticSelector?: string;\n\n /** Combobox content /\n children?: React.ReactNode;\n\n /* Combobox store, can be used to control combobox state /\n store?: ComboboxStore;\n\n /* Called when item is selected with the `Enter` key or by clicking it /\n onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n /* Controls items `font-size` and `padding` @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Controls `padding` of the dropdown @default 4 /\n dropdownPadding?: React.CSSProperties['padding'];\n\n /* Determines whether selection should be reset when option is hovered @default false /\n resetSelectionOnOptionHover?: boolean;\n\n /* Determines whether the `Combobox` value can be changed */\n readOnly?: boolean;\n}\n\nexport type ComboboxFactory = Factory<{\n props: ComboboxProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxStylesNames;\n vars: ComboboxCSSVariables;\n staticComponents: {\n Target: typeof ComboboxTarget;\n Dropdown: typeof ComboboxDropdown;\n Options: typeof ComboboxOptions;\n Option: typeof ComboboxOption;\n Search: typeof ComboboxSearch;\n Empty: typeof ComboboxEmpty;\n Chevron: typeof ComboboxChevron;\n Footer: typeof ComboboxFooter;\n Header: typeof ComboboxHeader;\n EventsTarget: typeof ComboboxEventsTarget;\n DropdownTarget: typeof ComboboxDropdownTarget;\n Group: typeof ComboboxGroup;\n ClearButton: typeof ComboboxClearButton;\n HiddenInput: typeof ComboboxHiddenInput;\n };\n}>;\n\nconst defaultProps = {\n keepMounted: true,\n withinPortal: true,\n resetSelectionOnOptionHover: false,\n width: 'target',\n transitionProps: { transition: 'fade', duration: 0 },\n size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n options: {\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n\n dropdown: {\n '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n const props = useProps('Combobox', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n children,\n store: controlledStore,\n vars,\n onOptionSubmit,\n onClose,\n size,\n dropdownPadding,\n resetSelectionOnOptionHover,\n __staticSelector,\n readOnly,\n attributes,\n ...others\n } = props;\n\n const uncontrolledStore = useCombobox();\n const store = controlledStore \|\| uncontrolledStore;\n\n const getStyles = useStyles<ComboboxFactory>({\n name: __staticSelector \|\| 'Combobox',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const onDropdownClose = () => {\n onClose?.();\n store.closeDropdown();\n };\n\n return (\n <ComboboxProvider\n value={{\n getStyles,\n store,\n onOptionSubmit,\n size,\n resetSelectionOnOptionHover,\n readOnly,\n }}\n >\n <Popover\n opened={store.dropdownOpened}\n preventPositionChangeWhenVisible={false}\n {...others}\n onChange={(_opened) => !_opened && onDropdownClose()}\n withRoles={false}\n unstyled={unstyled}\n >\n {children}\n </Popover>\n </ComboboxProvider>\n );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n export type Props = ComboboxProps;\n export type StylesNames = ComboboxStylesNames;\n export type Factory = ComboboxFactory;\n\n export namespace Dropdown {\n export type Props = ComboboxDropdownProps;\n }\n\n export namespace Options {\n export type Props = ComboboxOptionsProps;\n }\n\n export namespace Option {\n export type Props = ComboboxOptionProps;\n }\n\n export namespace Target {\n export type Props = ComboboxTargetProps;\n }\n\n export namespace Chevron {\n export type Props = ComboboxChevronProps;\n }\n\n export namespace Empty {\n export type Props = ComboboxEmptyProps;\n }\n\n export namespace Search {\n export type Props = ComboboxSearchProps;\n }\n\n export namespace Footer {\n export type Props = ComboboxFooterProps;\n }\n\n export namespace Header {\n export type Props = ComboboxHeaderProps;\n }\n\n export namespace DropdownTarget {\n export type Props = ComboboxDropdownTargetProps;\n }\n\n export namespace EventsTarget {\n export type Props = ComboboxEventsTargetProps;\n }\n\n export namespace Group {\n export type Props = ComboboxGroupProps;\n }\n\n export namespace ClearButton {\n export type Props = ComboboxClearButtonProps;\n }\n\n export namespace HiddenInput {\n export type Props = ComboboxHiddenInputProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA4GA,MAAM,eAAe;CACnB,aAAa;CACb,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,GAAG,WACD;CAEJ,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,kCAAkC;GAClC,GAAI;GACJ,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}
1	+ {"version":3,"file":"Combobox.mjs","names":["classes"],"sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import {\n createVarsResolver,\n ExtendComponent,\n Factory,\n getFontSize,\n getSize,\n MantineSize,\n MantineThemeComponent,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { __PopoverProps, Popover } from '../Popover';\nimport { PopoverMiddlewares } from '../Popover/Popover.types';\nimport { ComboboxProvider } from './Combobox.context';\nimport { ComboboxChevron, ComboboxChevronProps } from './ComboboxChevron/ComboboxChevron';\nimport {\n ComboboxClearButton,\n ComboboxClearButtonProps,\n} from './ComboboxClearButton/ComboboxClearButton';\nimport { ComboboxDropdown, ComboboxDropdownProps } from './ComboboxDropdown/ComboboxDropdown';\nimport {\n ComboboxDropdownTarget,\n ComboboxDropdownTargetProps,\n} from './ComboboxDropdownTarget/ComboboxDropdownTarget';\nimport { ComboboxEmpty, ComboboxEmptyProps } from './ComboboxEmpty/ComboboxEmpty';\nimport {\n ComboboxEventsTarget,\n ComboboxEventsTargetProps,\n} from './ComboboxEventsTarget/ComboboxEventsTarget';\nimport { ComboboxFooter, ComboboxFooterProps } from './ComboboxFooter/ComboboxFooter';\nimport { ComboboxGroup, ComboboxGroupProps } from './ComboboxGroup/ComboboxGroup';\nimport { ComboboxHeader, ComboboxHeaderProps } from './ComboboxHeader/ComboboxHeader';\nimport {\n ComboboxHiddenInput,\n ComboboxHiddenInputProps,\n} from './ComboboxHiddenInput/ComboboxHiddenInput';\nimport { ComboboxOption, ComboboxOptionProps } from './ComboboxOption/ComboboxOption';\nimport { ComboboxOptions, ComboboxOptionsProps } from './ComboboxOptions/ComboboxOptions';\nimport { ComboboxSearch, ComboboxSearchProps } from './ComboboxSearch/ComboboxSearch';\nimport { ComboboxTarget, ComboboxTargetProps } from './ComboboxTarget/ComboboxTarget';\nimport { ComboboxStore, useCombobox } from './use-combobox/use-combobox';\nimport classes from './Combobox.module.css';\n\nexport type ComboboxStylesNames =\n \| 'options'\n \| 'dropdown'\n \| 'option'\n \| 'search'\n \| 'empty'\n \| 'footer'\n \| 'header'\n \| 'group'\n \| 'groupLabel';\n\nexport type ComboboxCSSVariables = {\n options: '--combobox-option-fz' \| '--combobox-option-padding';\n dropdown: '--combobox-padding' \| '--combobox-option-fz' \| '--combobox-option-padding';\n};\n\nexport interface ComboboxProps extends __PopoverProps, StylesApiProps<ComboboxFactory> {\n __staticSelector?: string;\n\n /** Combobox content /\n children?: React.ReactNode;\n\n /* Combobox store, can be used to control combobox state /\n store?: ComboboxStore;\n\n /* Called when item is selected with the `Enter` key or by clicking it /\n onOptionSubmit?: (value: string, optionProps: ComboboxOptionProps) => void;\n\n /* Controls items `font-size` and `padding` @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Controls `padding` of the dropdown @default 4 /\n dropdownPadding?: React.CSSProperties['padding'];\n\n /* Determines whether selection should be reset when option is hovered @default false /\n resetSelectionOnOptionHover?: boolean;\n\n /* Determines whether the `Combobox` value can be changed /\n readOnly?: boolean;\n\n /* If set to `'viewport'`, the dropdown grows to fill the available vertical space in the viewport. Disables the `flip` middleware. */\n floatingHeight?: 'viewport';\n}\n\nexport type ComboboxFactory = Factory<{\n props: ComboboxProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxStylesNames;\n vars: ComboboxCSSVariables;\n staticComponents: {\n Target: typeof ComboboxTarget;\n Dropdown: typeof ComboboxDropdown;\n Options: typeof ComboboxOptions;\n Option: typeof ComboboxOption;\n Search: typeof ComboboxSearch;\n Empty: typeof ComboboxEmpty;\n Chevron: typeof ComboboxChevron;\n Footer: typeof ComboboxFooter;\n Header: typeof ComboboxHeader;\n EventsTarget: typeof ComboboxEventsTarget;\n DropdownTarget: typeof ComboboxDropdownTarget;\n Group: typeof ComboboxGroup;\n ClearButton: typeof ComboboxClearButton;\n HiddenInput: typeof ComboboxHiddenInput;\n };\n}>;\n\nconst defaultProps = {\n keepMounted: true,\n withinPortal: true,\n resetSelectionOnOptionHover: false,\n width: 'target',\n transitionProps: { transition: 'fade', duration: 0 },\n size: 'sm',\n} satisfies Partial<ComboboxProps>;\n\nconst varsResolver = createVarsResolver<ComboboxFactory>((_, { size, dropdownPadding }) => ({\n options: {\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n\n dropdown: {\n '--combobox-padding': dropdownPadding === undefined ? undefined : rem(dropdownPadding),\n '--combobox-option-fz': getFontSize(size),\n '--combobox-option-padding': getSize(size, 'combobox-option-padding'),\n },\n}));\n\nexport const Combobox = (_props: ComboboxProps) => {\n const props = useProps('Combobox', defaultProps, _props);\n const {\n classNames,\n styles,\n unstyled,\n children,\n store: controlledStore,\n vars,\n onOptionSubmit,\n onClose,\n size,\n dropdownPadding,\n resetSelectionOnOptionHover,\n __staticSelector,\n readOnly,\n attributes,\n floatingHeight,\n middlewares,\n ...others\n } = props;\n\n const resolvedMiddlewares: PopoverMiddlewares \| undefined =\n floatingHeight === 'viewport'\n ? {\n ...middlewares,\n flip: false,\n size: {\n ...(typeof middlewares?.size === 'object' ? middlewares.size : {}),\n padding:\n typeof middlewares?.size === 'object' && middlewares.size.padding !== undefined\n ? middlewares.size.padding\n : 10,\n apply: ({ availableHeight, availableWidth, elements, ...rest }) => {\n elements.floating.style.setProperty(\n '--combobox-floating-max-height',\n `${availableHeight}px`\n );\n const userSize = middlewares?.size;\n if (typeof userSize === 'object' && userSize.apply) {\n userSize.apply({ availableHeight, availableWidth, elements, ...rest });\n } else if (userSize) {\n Object.assign(elements.floating.style, {\n maxWidth: `${availableWidth}px`,\n maxHeight: `${availableHeight}px`,\n });\n }\n },\n },\n }\n : middlewares;\n\n const uncontrolledStore = useCombobox();\n const store = controlledStore \|\| uncontrolledStore;\n\n const getStyles = useStyles<ComboboxFactory>({\n name: __staticSelector \|\| 'Combobox',\n classes,\n props,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const onDropdownClose = () => {\n onClose?.();\n store.closeDropdown();\n };\n\n return (\n <ComboboxProvider\n value={{\n getStyles,\n store,\n onOptionSubmit,\n size,\n resetSelectionOnOptionHover,\n readOnly,\n floatingHeight,\n }}\n >\n <Popover\n opened={store.dropdownOpened}\n {...others}\n middlewares={resolvedMiddlewares}\n onChange={(_opened) => !_opened && onDropdownClose()}\n withRoles={false}\n unstyled={unstyled}\n >\n {children}\n </Popover>\n </ComboboxProvider>\n );\n};\n\nconst extendCombobox = (c: ExtendComponent<ComboboxFactory>): MantineThemeComponent => c;\n\nCombobox.extend = extendCombobox;\nCombobox.classes = classes;\nCombobox.varsResolver = varsResolver;\nCombobox.displayName = '@mantine/core/Combobox';\nCombobox.Target = ComboboxTarget;\nCombobox.Dropdown = ComboboxDropdown;\nCombobox.Options = ComboboxOptions;\nCombobox.Option = ComboboxOption;\nCombobox.Search = ComboboxSearch;\nCombobox.Empty = ComboboxEmpty;\nCombobox.Chevron = ComboboxChevron;\nCombobox.Footer = ComboboxFooter;\nCombobox.Header = ComboboxHeader;\nCombobox.EventsTarget = ComboboxEventsTarget;\nCombobox.DropdownTarget = ComboboxDropdownTarget;\nCombobox.Group = ComboboxGroup;\nCombobox.ClearButton = ComboboxClearButton;\nCombobox.HiddenInput = ComboboxHiddenInput;\n\nexport namespace Combobox {\n export type Props = ComboboxProps;\n export type StylesNames = ComboboxStylesNames;\n export type Factory = ComboboxFactory;\n\n export namespace Dropdown {\n export type Props = ComboboxDropdownProps;\n }\n\n export namespace Options {\n export type Props = ComboboxOptionsProps;\n }\n\n export namespace Option {\n export type Props = ComboboxOptionProps;\n }\n\n export namespace Target {\n export type Props = ComboboxTargetProps;\n }\n\n export namespace Chevron {\n export type Props = ComboboxChevronProps;\n }\n\n export namespace Empty {\n export type Props = ComboboxEmptyProps;\n }\n\n export namespace Search {\n export type Props = ComboboxSearchProps;\n }\n\n export namespace Footer {\n export type Props = ComboboxFooterProps;\n }\n\n export namespace Header {\n export type Props = ComboboxHeaderProps;\n }\n\n export namespace DropdownTarget {\n export type Props = ComboboxDropdownTargetProps;\n }\n\n export namespace EventsTarget {\n export type Props = ComboboxEventsTargetProps;\n }\n\n export namespace Group {\n export type Props = ComboboxGroupProps;\n }\n\n export namespace ClearButton {\n export type Props = ComboboxClearButtonProps;\n }\n\n export namespace HiddenInput {\n export type Props = ComboboxHiddenInputProps;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgHA,MAAM,eAAe;CACnB,aAAa;CACb,cAAc;CACd,6BAA6B;CAC7B,OAAO;CACP,iBAAiB;EAAE,YAAY;EAAQ,UAAU;CAAE;CACnD,MAAM;AACR;AAEA,MAAM,eAAe,oBAAqC,GAAG,EAAE,MAAM,uBAAuB;CAC1F,SAAS;EACP,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;CAEA,UAAU;EACR,sBAAsB,oBAAoB,KAAA,IAAY,KAAA,IAAY,IAAI,eAAe;EACrF,wBAAwB,YAAY,IAAI;EACxC,6BAA6B,QAAQ,MAAM,yBAAyB;CACtE;AACF,EAAE;AAEF,MAAa,YAAY,WAA0B;CACjD,MAAM,QAAQ,SAAS,YAAY,cAAc,MAAM;CACvD,MAAM,EACJ,YACA,QACA,UACA,UACA,OAAO,iBACP,MACA,gBACA,SACA,MACA,iBACA,6BACA,kBACA,UACA,YACA,gBACA,aACA,GAAG,WACD;CAEJ,MAAM,sBACJ,mBAAmB,aACf;EACE,GAAG;EACH,MAAM;EACN,MAAM;GACJ,GAAI,OAAO,aAAa,SAAS,WAAW,YAAY,OAAO,CAAC;GAChE,SACE,OAAO,aAAa,SAAS,YAAY,YAAY,KAAK,YAAY,KAAA,IAClE,YAAY,KAAK,UACjB;GACN,QAAQ,EAAE,iBAAiB,gBAAgB,UAAU,GAAG,WAAW;IACjE,SAAS,SAAS,MAAM,YACtB,kCACA,GAAG,gBAAgB,GACrB;IACA,MAAM,WAAW,aAAa;IAC9B,IAAI,OAAO,aAAa,YAAY,SAAS,OAC3C,SAAS,MAAM;KAAE;KAAiB;KAAgB;KAAU,GAAG;IAAK,CAAC;SAChE,IAAI,UACT,OAAO,OAAO,SAAS,SAAS,OAAO;KACrC,UAAU,GAAG,eAAe;KAC5B,WAAW,GAAG,gBAAgB;IAChC,CAAC;GAEL;EACF;CACF,IACA;CAEN,MAAM,oBAAoB,YAAY;CACtC,MAAM,QAAQ,mBAAmB;CAEjC,MAAM,YAAY,UAA2B;EAC3C,MAAM,oBAAoB;EAC1B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,wBAAwB;EAC5B,UAAU;EACV,MAAM,cAAc;CACtB;CAEA,OACE,oBAAC,kBAAD;EACE,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;EACF;YAEA,oBAAC,SAAD;GACE,QAAQ,MAAM;GACd,GAAI;GACJ,aAAa;GACb,WAAW,YAAY,CAAC,WAAW,gBAAgB;GACnD,WAAW;GACD;GAET;EACM,CAAA;CACO,CAAA;AAEtB;AAEA,MAAM,kBAAkB,MAA+D;AAEvF,SAAS,SAAS;AAClB,SAAS,UAAUA;AACnB,SAAS,eAAe;AACxB,SAAS,cAAc;AACvB,SAAS,SAAS;AAClB,SAAS,WAAW;AACpB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,QAAQ;AACjB,SAAS,UAAU;AACnB,SAAS,SAAS;AAClB,SAAS,SAAS;AAClB,SAAS,eAAe;AACxB,SAAS,iBAAiB;AAC1B,SAAS,QAAQ;AACjB,SAAS,cAAc;AACvB,SAAS,cAAc"}

package/esm/components/Combobox/Combobox.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Combobox.module.mjs","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".dropdown {\n --combobox-padding: 4px;\n padding: var(--combobox-padding);\n\n &:has([data-mantine-scrollbar]) {\n .search {\n max-width: calc(100% + var(--combobox-padding));\n }\n }\n\n &[data-composed] {\n padding-inline-end: 0;\n }\n\n &[data-hidden] {\n display: none;\n }\n}\n\n/* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown /\n.dropdown,\n.options {\n --combobox-option-padding-xs: 4px 8px;\n --combobox-option-padding-sm: 6px 10px;\n --combobox-option-padding-md: 8px 12px;\n --combobox-option-padding-lg: 10px 16px;\n --combobox-option-padding-xl: 14px 20px;\n --combobox-option-padding: var(--combobox-option-padding-sm);\n}\n\n.option {\n padding: var(--combobox-option-padding);\n font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n border-radius: var(--mantine-radius-default);\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n overflow-wrap: break-word;\n\n &:where([data-combobox-selected]) {\n background-color: var(--mantine-primary-color-filled);\n color: var(--mantine-color-white);\n }\n\n &:where([data-combobox-disabled]) {\n cursor: not-allowed;\n opacity: 0.35;\n }\n\n @mixin hover {\n &:where(:not([data-combobox-selected], [data-combobox-disabled])) {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n }\n }\n }\n}\n\n.search {\n margin-inline: calc(var(--combobox-padding) -1);\n margin-top: calc(var(--combobox-padding) * -1);\n width: calc(100% + var(--combobox-padding) * 2);\n border-top-width: 0;\n border-inline-width: 0;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n margin-bottom: var(--combobox-padding);\n position: relative;\n\n &,\n &:focus {\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n }\n}\n\n.empty {\n font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n text-align: center;\n padding: var(--combobox-option-padding);\n color: var(--mantine-color-dimmed);\n}\n\n.header,\n.footer {\n font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n border: 0 solid transparent;\n margin-inline: calc(var(--combobox-padding) * -1);\n padding: var(--combobox-option-padding);\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.footer {\n border-top-width: 1px;\n margin-top: var(--combobox-padding);\n margin-bottom: calc(var(--combobox-padding) * -1);\n}\n\n.header {\n border-bottom-width: 1px;\n margin-bottom: var(--combobox-padding);\n margin-top: calc(var(--combobox-padding) * -1);\n}\n\n.group {\n &:has(.groupLabel:only-child) {\n display: none;\n }\n}\n\n.groupLabel {\n color: var(--mantine-color-dimmed);\n font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85);\n padding: var(--combobox-option-padding);\n font-weight: var(--mantine-font-weight-medium);\n position: relative;\n display: flex;\n align-items: center;\n\n &::after {\n content: '';\n flex: 1;\n inset-inline: 0;\n height: 1px;\n margin-inline-start: var(--mantine-spacing-xs);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n }\n\n &:only-child {\n display: none;\n }\n}\n\n/* ------- Combobox.Chevron ------- /\n.chevron {\n --combobox-chevron-size-xs: 14px;\n --combobox-chevron-size-sm: 18px;\n --combobox-chevron-size-md: 20px;\n --combobox-chevron-size-lg: 24px;\n --combobox-chevron-size-xl: 28px;\n --combobox-chevron-size: var(--combobox-chevron-size-sm);\n\n @mixin where-light {\n --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));\n }\n\n @mixin where-dark {\n --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));\n }\n\n width: var(--combobox-chevron-size);\n height: var(--combobox-chevron-size);\n color: var(--_combobox-chevron-color);\n\n &:where([data-error]) {\n color: var(--combobox-chevron-color, var(--mantine-color-error));\n }\n}\n\n/ ------- OptionsDropdown ------- */\n.optionsDropdownOption {\n display: flex;\n align-items: center;\n gap: 8px;\n\n &:where([data-reverse]) {\n justify-content: space-between;\n }\n}\n\n.optionsDropdownCheckIcon {\n opacity: 0.4;\n width: 0.8em;\n min-width: 0.8em;\n height: 0.8em;\n\n :where([data-combobox-selected]) & {\n opacity: 1;\n }\n}\n\n.optionsDropdownCheckPlaceholder {\n width: 0.8em;\n min-width: 0.8em;\n height: 0.8em;\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Combobox.module.mjs","names":[],"sources":["../../../src/components/Combobox/Combobox.module.css"],"sourcesContent":[".dropdown {\n --combobox-padding: 4px;\n padding: var(--combobox-padding);\n\n &:has([data-mantine-scrollbar]) {\n .search {\n max-width: calc(100% + var(--combobox-padding));\n }\n }\n\n &[data-composed] {\n padding-inline-end: 0;\n }\n\n &[data-hidden] {\n display: none;\n }\n\n &[data-floating-height='viewport']:not([data-hidden]) {\n --combobox-floating-options-max-height: calc(\n var(--combobox-floating-max-height, 100vh) - var(--combobox-padding) * 2\n );\n max-height: var(--combobox-floating-max-height, none);\n overflow: hidden;\n }\n}\n\n/* Variables must be both on dropdown and options to support usage of Combobox.Options without Combobox.Dropdown /\n.dropdown,\n.options {\n --combobox-option-padding-xs: 4px 8px;\n --combobox-option-padding-sm: 6px 10px;\n --combobox-option-padding-md: 8px 12px;\n --combobox-option-padding-lg: 10px 16px;\n --combobox-option-padding-xl: 14px 20px;\n --combobox-option-padding: var(--combobox-option-padding-sm);\n}\n\n.option {\n padding: var(--combobox-option-padding);\n font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n border-radius: var(--mantine-radius-default);\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n overflow-wrap: break-word;\n\n &:where([data-combobox-selected]) {\n background-color: var(--mantine-primary-color-filled);\n color: var(--mantine-color-white);\n }\n\n &:where([data-combobox-disabled]) {\n cursor: not-allowed;\n opacity: 0.35;\n }\n\n @mixin hover {\n &:where(:not([data-combobox-selected], [data-combobox-disabled])) {\n @mixin where-light {\n background-color: var(--mantine-color-gray-0);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n }\n }\n }\n}\n\n.search {\n margin-inline: calc(var(--combobox-padding) -1);\n margin-top: calc(var(--combobox-padding) * -1);\n width: calc(100% + var(--combobox-padding) * 2);\n border-top-width: 0;\n border-inline-width: 0;\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n margin-bottom: var(--combobox-padding);\n position: relative;\n\n &,\n &:focus {\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n }\n\n @mixin where-light {\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-7);\n }\n}\n\n.empty {\n font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n text-align: center;\n padding: var(--combobox-option-padding);\n color: var(--mantine-color-dimmed);\n}\n\n.header,\n.footer {\n font-size: var(--combobox-option-fz, var(--mantine-font-size-sm));\n border: 0 solid transparent;\n margin-inline: calc(var(--combobox-padding) * -1);\n padding: var(--combobox-option-padding);\n\n @mixin where-light {\n border-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n border-color: var(--mantine-color-dark-4);\n }\n}\n\n.footer {\n border-top-width: 1px;\n margin-top: var(--combobox-padding);\n margin-bottom: calc(var(--combobox-padding) * -1);\n}\n\n.header {\n border-bottom-width: 1px;\n margin-bottom: var(--combobox-padding);\n margin-top: calc(var(--combobox-padding) * -1);\n}\n\n.group {\n &:has(.groupLabel:only-child) {\n display: none;\n }\n}\n\n.groupLabel {\n color: var(--mantine-color-dimmed);\n font-size: calc(var(--combobox-option-fz, var(--mantine-font-size-sm)) * 0.85);\n padding: var(--combobox-option-padding);\n font-weight: var(--mantine-font-weight-medium);\n position: relative;\n display: flex;\n align-items: center;\n\n &::after {\n content: '';\n flex: 1;\n inset-inline: 0;\n height: 1px;\n margin-inline-start: var(--mantine-spacing-xs);\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-2);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n }\n\n &:only-child {\n display: none;\n }\n}\n\n/* ------- Combobox.Chevron ------- /\n.chevron {\n --combobox-chevron-size-xs: 14px;\n --combobox-chevron-size-sm: 18px;\n --combobox-chevron-size-md: 20px;\n --combobox-chevron-size-lg: 24px;\n --combobox-chevron-size-xl: 28px;\n --combobox-chevron-size: var(--combobox-chevron-size-sm);\n\n @mixin where-light {\n --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-gray-6));\n }\n\n @mixin where-dark {\n --_combobox-chevron-color: var(--combobox-chevron-color, var(--mantine-color-dark-3));\n }\n\n width: var(--combobox-chevron-size);\n height: var(--combobox-chevron-size);\n color: var(--_combobox-chevron-color);\n\n &:where([data-error]) {\n color: var(--combobox-chevron-color, var(--mantine-color-error));\n }\n}\n\n/ ------- OptionsDropdown ------- */\n.optionsDropdownOption {\n display: flex;\n align-items: center;\n gap: 8px;\n\n &:where([data-reverse]) {\n justify-content: space-between;\n }\n}\n\n.optionsDropdownCheckIcon {\n opacity: 0.4;\n width: 0.8em;\n min-width: 0.8em;\n height: 0.8em;\n\n :where([data-combobox-selected]) & {\n opacity: 1;\n }\n}\n\n.optionsDropdownCheckPlaceholder {\n width: 0.8em;\n min-width: 0.8em;\n height: 0.8em;\n}\n"],"mappings":""}

package/esm/components/Combobox/ComboboxDropdown/ComboboxDropdown.mjs CHANGED Viewed

@@ -13,6 +13,7 @@ const ComboboxDropdown = factory((props) => {
 		...others,
 		role: "presentation",
 		"data-hidden": hidden || void 0,
+		"data-floating-height": ctx.floatingHeight || void 0,
 		...ctx.getStyles("dropdown", {
 			className,
 			style,

package/esm/components/Combobox/ComboboxDropdown/ComboboxDropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboboxDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxDropdown/ComboboxDropdown.tsx"],"sourcesContent":["import { factory, Factory, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxDropdownStylesNames = 'dropdown';\n\nexport interface ComboboxDropdownProps extends PopoverDropdownProps {\n /** Determines whether the dropdown should be hidden, for example, when there are no options to display */\n hidden?: boolean;\n}\n\nexport type ComboboxDropdownFactory = Factory<{\n props: ComboboxDropdownProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxDropdownStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxDropdown = factory<ComboboxDropdownFactory>((props) => {\n const { classNames, styles, className, style, hidden, ...others } = useProps(\n 'ComboboxDropdown',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n\n return (\n <Popover.Dropdown\n {...others}\n role=\"presentation\"\n data-hidden={hidden \|\| undefined}\n {...ctx.getStyles('dropdown', { className, style, classNames, styles })}\n />\n );\n});\n\nComboboxDropdown.classes = classes;\nComboboxDropdown.displayName = '@mantine/core/ComboboxDropdown';\n"],"mappings":";;;;;;;;AAmBA,MAAa,mBAAmB,SAAkC,UAAU;CAC1E,MAAM,EAAE,YAAY,QAAQ,WAAW,OAAO,QAAQ,GAAG,WAAW,SAClE,oBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAE/B,OACE,oBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,MAAK;EACL,eAAa,UAAU,KAAA;EACvB,GAAI,IAAI,UAAU,YAAY;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;CACvE,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,cAAc"}
1	+ {"version":3,"file":"ComboboxDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/ComboboxDropdown/ComboboxDropdown.tsx"],"sourcesContent":["import { factory, Factory, useProps } from '../../../core';\nimport { Popover, PopoverDropdownProps } from '../../Popover';\nimport { useComboboxContext } from '../Combobox.context';\nimport classes from '../Combobox.module.css';\n\nexport type ComboboxDropdownStylesNames = 'dropdown';\n\nexport interface ComboboxDropdownProps extends PopoverDropdownProps {\n /** Determines whether the dropdown should be hidden, for example, when there are no options to display */\n hidden?: boolean;\n}\n\nexport type ComboboxDropdownFactory = Factory<{\n props: ComboboxDropdownProps;\n ref: HTMLDivElement;\n stylesNames: ComboboxDropdownStylesNames;\n compound: true;\n}>;\n\nexport const ComboboxDropdown = factory<ComboboxDropdownFactory>((props) => {\n const { classNames, styles, className, style, hidden, ...others } = useProps(\n 'ComboboxDropdown',\n null,\n props\n );\n\n const ctx = useComboboxContext();\n\n return (\n <Popover.Dropdown\n {...others}\n role=\"presentation\"\n data-hidden={hidden \|\| undefined}\n data-floating-height={ctx.floatingHeight \|\| undefined}\n {...ctx.getStyles('dropdown', { className, style, classNames, styles })}\n />\n );\n});\n\nComboboxDropdown.classes = classes;\nComboboxDropdown.displayName = '@mantine/core/ComboboxDropdown';\n"],"mappings":";;;;;;;;AAmBA,MAAa,mBAAmB,SAAkC,UAAU;CAC1E,MAAM,EAAE,YAAY,QAAQ,WAAW,OAAO,QAAQ,GAAG,WAAW,SAClE,oBACA,MACA,KACF;CAEA,MAAM,MAAM,mBAAmB;CAE/B,OACE,oBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,MAAK;EACL,eAAa,UAAU,KAAA;EACvB,wBAAsB,IAAI,kBAAkB,KAAA;EAC5C,GAAI,IAAI,UAAU,YAAY;GAAE;GAAW;GAAO;GAAY;EAAO,CAAC;CACvE,CAAA;AAEL,CAAC;AAED,iBAAiB,UAAUA;AAC3B,iBAAiB,cAAc"}

package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs CHANGED Viewed

@@ -1,6 +1,7 @@
 "use client";
 import { ScrollArea } from "../../ScrollArea/ScrollArea.mjs";
 import Combobox_module_default from "../Combobox.module.mjs";
+import { useComboboxContext } from "../Combobox.context.mjs";
 import { Combobox } from "../Combobox.mjs";
 import { CheckIcon } from "../../Checkbox/CheckIcon.mjs";
 import { isOptionsGroup } from "./is-options-group.mjs";
@@ -50,7 +51,8 @@ function Option({ data, withCheckIcon, withAlignedLabels, value, checkIconPositi
 		children: options
 	});
 }
-function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, withScrollArea = true, filterOptions = true, withCheckIcon = false, withAlignedLabels = false, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, "aria-label": ariaLabel }) {
+function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit, maxDropdownHeight, floatingHeight, withScrollArea = true, filterOptions = true, withCheckIcon = false, withAlignedLabels = false, value, checkIconPosition, nothingFoundMessage, unstyled, labelId, renderOption, scrollAreaProps, "aria-label": ariaLabel }) {
+	const ctx = useComboboxContext();
 	validateOptions(data);
 	const filteredData = typeof search === "string" ? (filter || defaultOptionsFilter)({
 		options: data,
@@ -74,7 +76,7 @@ function OptionsDropdown({ data, hidden, hiddenWhenEmpty, filter, search, limit,
 			labelledBy: labelId,
 			"aria-label": ariaLabel,
 			children: [withScrollArea ? /* @__PURE__ */ jsx(ScrollArea.Autosize, {
-				mah: maxDropdownHeight ?? 220,
+				mah: (floatingHeight ?? ctx.floatingHeight) === "viewport" ? "var(--combobox-floating-options-max-height)" : maxDropdownHeight ?? 220,
 				type: "scroll",
 				scrollbarSize: "var(--combobox-padding)",
 				offsetScrollbars: "y",

package/esm/components/Combobox/OptionsDropdown/OptionsDropdown.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OptionsDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n group: string;\n items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> \| OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem<Primitive> \| OptionsGroup;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive \| Primitive[] \| null;\n checkIconPosition?: 'left' \| 'right';\n unstyled: boolean \| undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive \| Primitive[] \| undefined \| null, optionValue: Primitive) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n data,\n withCheckIcon,\n withAlignedLabels,\n value,\n checkIconPosition,\n unstyled,\n renderOption,\n}: OptionProps) {\n if (!isOptionsGroup(data)) {\n const checked = isValueChecked(value, data.value);\n const check =\n withCheckIcon &&\n (checked ? (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n ) : withAlignedLabels ? (\n <div className={classes.optionsDropdownCheckPlaceholder} />\n ) : null);\n\n const defaultContent = (\n <>\n {checkIconPosition === 'left' && check}\n <span>{data.label}</span>\n {checkIconPosition === 'right' && check}\n </>\n );\n\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' \|\| undefined}\n data-checked={checked \|\| undefined}\n aria-selected={checked}\n active={checked}\n >\n {typeof renderOption === 'function'\n ? renderOption({ option: data, checked })\n : defaultContent}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={`${item.value}`}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n checkIconPosition={checkIconPosition}\n renderOption={renderOption}\n />\n ));\n\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n data: OptionsData;\n filter: OptionsFilter<Primitive> \| undefined;\n search: string \| undefined;\n limit: number \| undefined;\n withScrollArea: boolean \| undefined;\n maxDropdownHeight: number \| string \| undefined;\n hidden?: boolean;\n hiddenWhenEmpty?: boolean;\n filterOptions?: boolean;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive \| Primitive[] \| null;\n checkIconPosition?: 'left' \| 'right';\n nothingFoundMessage?: React.ReactNode;\n unstyled: boolean \| undefined;\n labelId: string \| undefined;\n 'aria-label': string \| undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n scrollAreaProps: ScrollAreaProps \| undefined;\n}\n\nexport function OptionsDropdown({\n data,\n hidden,\n hiddenWhenEmpty,\n filter,\n search,\n limit,\n maxDropdownHeight,\n withScrollArea = true,\n filterOptions = true,\n withCheckIcon = false,\n withAlignedLabels = false,\n value,\n checkIconPosition,\n nothingFoundMessage,\n unstyled,\n labelId,\n renderOption,\n scrollAreaProps,\n 'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n validateOptions(data);\n\n const shouldFilter = typeof search === 'string';\n const filteredData = shouldFilter\n ? (filter \|\| defaultOptionsFilter)({\n options: data,\n search: filterOptions ? search : '',\n limit: limit ?? Infinity,\n })\n : data;\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item) => (\n <Option\n data={item}\n key={isOptionsGroup(item) ? item.group : `${item.value}`}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n renderOption={renderOption}\n />\n ));\n\n return (\n <Combobox.Dropdown hidden={hidden \|\| (hiddenWhenEmpty && isEmpty)} data-composed>\n <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={maxDropdownHeight ?? 220}\n type=\"scroll\"\n scrollbarSize=\"var(--combobox-padding)\"\n offsetScrollbars=\"y\"\n {...scrollAreaProps}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n"],"mappings":"~~;;;;;;;;;;;;AAiCA~~,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAEA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAI,CAAC,eAAe,IAAI,GAAG;EACzB,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;EAChD,MAAM,QACJ,kBACC,UACC,oBAAC,WAAD,EAAW,WAAWA,wBAAQ,yBAA2B,CAAA,IACvD,oBACF,oBAAC,OAAD,EAAK,WAAWA,wBAAQ,gCAAkC,CAAA,IACxD;EAEN,MAAM,iBACJ,qBAAA,UAAA,EAAA,UAAA;GACG,sBAAsB,UAAU;GACjC,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;GACvB,sBAAsB,WAAW;EAClC,EAAA,CAAA;EAGJ,OACE,oBAAC,SAAS,QAAV;GACE,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,WAAW,GAAG,GAAGA,wBAAQ,wBAAwB,CAAC,SAAS,CAAC;GAC5D,gBAAc,sBAAsB,WAAW,KAAA;GAC/C,gBAAc,WAAW,KAAA;GACzB,iBAAe;GACf,QAAQ;aAEP,OAAO,iBAAiB,aACrB,aAAa;IAAE,QAAQ;IAAM;GAAQ,CAAC,IACtC;EACW,CAAA;CAErB;CAEA,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,oBAAC,QAAD;EACE,MAAM;EACC;EAEG;EACK;EACI;EACA;EACL;CACf,GANM,GAAG,KAAK,OAMd,CACF;CAED,OAAO,oBAAC,SAAS,OAAV;EAAgB,OAAO,KAAK;YAAQ;CAAwB,CAAA;AACrE;~~AAwBA~~,SAAgB,gBAAgB,EAC9B,MACA,QACA,iBACA,QACA,QACA,OACA,mBACA,iBAAiB,MACjB,gBAAgB,MAChB,gBAAgB,OAChB,oBAAoB,OACpB,OACA,mBACA,qBACA,UACA,SACA,cACA,iBACA,cAAc,aACS;CACvB,gBAAgB,IAAI;CAGpB,MAAM,eADe,OAAO,WAAW,YAElC,UAAU,sBAAsB;EAC/B,SAAS;EACT,QAAQ,gBAAgB,SAAS;EACjC,OAAO,SAAS;CAClB,CAAC,IACD;CACJ,MAAM,UAAU,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,SAChC,oBAAC,QAAD;EACE,MAAM;EAES;EACI;EACZ;EACY;EACT;EACI;CACf,GAPM,eAAe,IAAI,IAAI,KAAK,QAAQ,GAAG,KAAK,OAOlD,CACF;CAED,OACE,oBAAC,SAAS,UAAV;EAAmB,QAAQ,UAAW,mBAAmB;EAAU,iBAAA;YACjE,qBAAC,SAAS,SAAV;GAAkB,YAAY;GAAS,cAAY;aAAnD,CACG,iBACC,oBAAC,WAAW,UAAZ;IACE,~~KAAK~~,qBAAqB;~~IAC1B~~,MAAK;IACL,eAAc;IACd,kBAAiB;IACjB,GAAI;cAEH;GACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,oBAAC,SAAS,OAAV,EAAA,UAAiB,oBAAoC,CAAA,CACxE;;CACD,CAAA;AAEvB"}
1	+ {"version":3,"file":"OptionsDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Combobox/OptionsDropdown/OptionsDropdown.tsx"],"sourcesContent":["import cx from 'clsx';\nimport { Primitive } from '../../../core';\nimport { CheckIcon } from '../../Checkbox';\nimport { ScrollArea, ScrollAreaProps } from '../../ScrollArea/ScrollArea';\nimport { Combobox } from '../Combobox';\nimport { useComboboxContext } from '../Combobox.context';\nimport { ComboboxItem, ComboboxLikeRenderOptionInput, ComboboxParsedItem } from '../Combobox.types';\nimport { defaultOptionsFilter, FilterOptionsInput } from './default-options-filter';\nimport { isEmptyComboboxData } from './is-empty-combobox-data';\nimport { isOptionsGroup } from './is-options-group';\nimport { validateOptions } from './validate-options';\nimport classes from '../Combobox.module.css';\n\nexport type OptionsFilter<Value extends Primitive = string> = (\n input: FilterOptionsInput<Value>\n) => ComboboxParsedItem<Value>[];\n\nexport interface OptionsGroup {\n group: string;\n items: ComboboxItem<Primitive>[];\n}\n\nexport type OptionsData = (ComboboxItem<Primitive> \| OptionsGroup)[];\n\ninterface OptionProps {\n data: ComboboxItem<Primitive> \| OptionsGroup;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive \| Primitive[] \| null;\n checkIconPosition?: 'left' \| 'right';\n unstyled: boolean \| undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n}\n\nfunction isValueChecked(value: Primitive \| Primitive[] \| undefined \| null, optionValue: Primitive) {\n return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;\n}\n\nfunction Option({\n data,\n withCheckIcon,\n withAlignedLabels,\n value,\n checkIconPosition,\n unstyled,\n renderOption,\n}: OptionProps) {\n if (!isOptionsGroup(data)) {\n const checked = isValueChecked(value, data.value);\n const check =\n withCheckIcon &&\n (checked ? (\n <CheckIcon className={classes.optionsDropdownCheckIcon} />\n ) : withAlignedLabels ? (\n <div className={classes.optionsDropdownCheckPlaceholder} />\n ) : null);\n\n const defaultContent = (\n <>\n {checkIconPosition === 'left' && check}\n <span>{data.label}</span>\n {checkIconPosition === 'right' && check}\n </>\n );\n\n return (\n <Combobox.Option\n value={data.value}\n disabled={data.disabled}\n className={cx({ [classes.optionsDropdownOption]: !unstyled })}\n data-reverse={checkIconPosition === 'right' \|\| undefined}\n data-checked={checked \|\| undefined}\n aria-selected={checked}\n active={checked}\n >\n {typeof renderOption === 'function'\n ? renderOption({ option: data, checked })\n : defaultContent}\n </Combobox.Option>\n );\n }\n\n const options = data.items.map((item) => (\n <Option\n data={item}\n value={value}\n key={`${item.value}`}\n unstyled={unstyled}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n checkIconPosition={checkIconPosition}\n renderOption={renderOption}\n />\n ));\n\n return <Combobox.Group label={data.group}>{options}</Combobox.Group>;\n}\n\nexport interface OptionsDropdownProps {\n data: OptionsData;\n filter: OptionsFilter<Primitive> \| undefined;\n search: string \| undefined;\n limit: number \| undefined;\n withScrollArea: boolean \| undefined;\n maxDropdownHeight: number \| string \| undefined;\n /** Overrides `floatingHeight` from the `Combobox` context, used by `Combobox`-based components */\n floatingHeight?: 'viewport';\n hidden?: boolean;\n hiddenWhenEmpty?: boolean;\n filterOptions?: boolean;\n withCheckIcon?: boolean;\n withAlignedLabels?: boolean;\n value?: Primitive \| Primitive[] \| null;\n checkIconPosition?: 'left' \| 'right';\n nothingFoundMessage?: React.ReactNode;\n unstyled: boolean \| undefined;\n labelId: string \| undefined;\n 'aria-label': string \| undefined;\n renderOption?: (input: ComboboxLikeRenderOptionInput<any>) => React.ReactNode;\n scrollAreaProps: ScrollAreaProps \| undefined;\n}\n\nexport function OptionsDropdown({\n data,\n hidden,\n hiddenWhenEmpty,\n filter,\n search,\n limit,\n maxDropdownHeight,\n floatingHeight,\n withScrollArea = true,\n filterOptions = true,\n withCheckIcon = false,\n withAlignedLabels = false,\n value,\n checkIconPosition,\n nothingFoundMessage,\n unstyled,\n labelId,\n renderOption,\n scrollAreaProps,\n 'aria-label': ariaLabel,\n}: OptionsDropdownProps) {\n const ctx = useComboboxContext();\n validateOptions(data);\n\n const shouldFilter = typeof search === 'string';\n const filteredData = shouldFilter\n ? (filter \|\| defaultOptionsFilter)({\n options: data,\n search: filterOptions ? search : '',\n limit: limit ?? Infinity,\n })\n : data;\n const isEmpty = isEmptyComboboxData(filteredData);\n\n const options = filteredData.map((item) => (\n <Option\n data={item}\n key={isOptionsGroup(item) ? item.group : `${item.value}`}\n withCheckIcon={withCheckIcon}\n withAlignedLabels={withAlignedLabels}\n value={value}\n checkIconPosition={checkIconPosition}\n unstyled={unstyled}\n renderOption={renderOption}\n />\n ));\n\n return (\n <Combobox.Dropdown hidden={hidden \|\| (hiddenWhenEmpty && isEmpty)} data-composed>\n <Combobox.Options labelledBy={labelId} aria-label={ariaLabel}>\n {withScrollArea ? (\n <ScrollArea.Autosize\n mah={\n (floatingHeight ?? ctx.floatingHeight) === 'viewport'\n ? 'var(--combobox-floating-options-max-height)'\n : (maxDropdownHeight ?? 220)\n }\n type=\"scroll\"\n scrollbarSize=\"var(--combobox-padding)\"\n offsetScrollbars=\"y\"\n {...scrollAreaProps}\n >\n {options}\n </ScrollArea.Autosize>\n ) : (\n options\n )}\n {isEmpty && nothingFoundMessage && <Combobox.Empty>{nothingFoundMessage}</Combobox.Empty>}\n </Combobox.Options>\n </Combobox.Dropdown>\n );\n}\n"],"mappings":";;;;;;;;;;;;;AAkCA,SAAS,eAAe,OAAmD,aAAwB;CACjG,OAAO,MAAM,QAAQ,KAAK,IAAI,MAAM,SAAS,WAAW,IAAI,UAAU;AACxE;AAEA,SAAS,OAAO,EACd,MACA,eACA,mBACA,OACA,mBACA,UACA,gBACc;CACd,IAAI,CAAC,eAAe,IAAI,GAAG;EACzB,MAAM,UAAU,eAAe,OAAO,KAAK,KAAK;EAChD,MAAM,QACJ,kBACC,UACC,oBAAC,WAAD,EAAW,WAAWA,wBAAQ,yBAA2B,CAAA,IACvD,oBACF,oBAAC,OAAD,EAAK,WAAWA,wBAAQ,gCAAkC,CAAA,IACxD;EAEN,MAAM,iBACJ,qBAAA,UAAA,EAAA,UAAA;GACG,sBAAsB,UAAU;GACjC,oBAAC,QAAD,EAAA,UAAO,KAAK,MAAY,CAAA;GACvB,sBAAsB,WAAW;EAClC,EAAA,CAAA;EAGJ,OACE,oBAAC,SAAS,QAAV;GACE,OAAO,KAAK;GACZ,UAAU,KAAK;GACf,WAAW,GAAG,GAAGA,wBAAQ,wBAAwB,CAAC,SAAS,CAAC;GAC5D,gBAAc,sBAAsB,WAAW,KAAA;GAC/C,gBAAc,WAAW,KAAA;GACzB,iBAAe;GACf,QAAQ;aAEP,OAAO,iBAAiB,aACrB,aAAa;IAAE,QAAQ;IAAM;GAAQ,CAAC,IACtC;EACW,CAAA;CAErB;CAEA,MAAM,UAAU,KAAK,MAAM,KAAK,SAC9B,oBAAC,QAAD;EACE,MAAM;EACC;EAEG;EACK;EACI;EACA;EACL;CACf,GANM,GAAG,KAAK,OAMd,CACF;CAED,OAAO,oBAAC,SAAS,OAAV;EAAgB,OAAO,KAAK;YAAQ;CAAwB,CAAA;AACrE;AA0BA,SAAgB,gBAAgB,EAC9B,MACA,QACA,iBACA,QACA,QACA,OACA,mBACA,gBACA,iBAAiB,MACjB,gBAAgB,MAChB,gBAAgB,OAChB,oBAAoB,OACpB,OACA,mBACA,qBACA,UACA,SACA,cACA,iBACA,cAAc,aACS;CACvB,MAAM,MAAM,mBAAmB;CAC/B,gBAAgB,IAAI;CAGpB,MAAM,eADe,OAAO,WAAW,YAElC,UAAU,sBAAsB;EAC/B,SAAS;EACT,QAAQ,gBAAgB,SAAS;EACjC,OAAO,SAAS;CAClB,CAAC,IACD;CACJ,MAAM,UAAU,oBAAoB,YAAY;CAEhD,MAAM,UAAU,aAAa,KAAK,SAChC,oBAAC,QAAD;EACE,MAAM;EAES;EACI;EACZ;EACY;EACT;EACI;CACf,GAPM,eAAe,IAAI,IAAI,KAAK,QAAQ,GAAG,KAAK,OAOlD,CACF;CAED,OACE,oBAAC,SAAS,UAAV;EAAmB,QAAQ,UAAW,mBAAmB;EAAU,iBAAA;YACjE,qBAAC,SAAS,SAAV;GAAkB,YAAY;GAAS,cAAY;aAAnD,CACG,iBACC,oBAAC,WAAW,UAAZ;IACE,MACG,kBAAkB,IAAI,oBAAoB,aACvC,gDACC,qBAAqB;IAE5B,MAAK;IACL,eAAc;IACd,kBAAiB;IACjB,GAAI;cAEH;GACkB,CAAA,IAErB,SAED,WAAW,uBAAuB,oBAAC,SAAS,OAAV,EAAA,UAAiB,oBAAoC,CAAA,CACxE;;CACD,CAAA;AAEvB"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Dialog.mjs","names":["classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' \| 'closeButton';\nexport type DialogCssVariables = {\n root: '--dialog-size';\n};\n\nexport interface DialogProps\n extends\n BoxProps,\n AffixBaseProps,\n PaperBaseProps,\n StylesApiProps<DialogFactory>,\n ElementProps<'div'> {\n /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false /\n keepMounted?: boolean;\n\n /* If set, displays the close button @default ~~true~~ /\n withCloseButton?: boolean;\n\n /* Called on close button click /\n onClose?: () => void;\n\n /* Dialog content /\n children?: React.ReactNode;\n\n /* Opened state /\n opened: boolean;\n\n /* Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } /\n transitionProps?: TransitionOverride;\n\n /* Controls `width` of the dialog @default 'md' */\n size?: MantineSize \| (string & {}) \| number;\n}\n\nexport type DialogFactory = Factory<{\n props: DialogProps;\n ref: HTMLDivElement;\n stylesNames: DialogStylesNames;\n vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n shadow: 'md',\n p: 'md',\n withBorder: true,\n transitionProps: { transition: 'pop-top-right', duration: 200 },\n position: {\n bottom: 30,\n right: 30,\n },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n root: {\n '--dialog-size': getSize(size, 'dialog-size'),\n },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n const props = useProps('Dialog', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n zIndex,\n position,\n keepMounted,\n opened,\n transitionProps,\n withCloseButton,\n withinPortal,\n children,\n onClose,\n portalProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DialogFactory>({\n name: 'Dialog',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Affix\n zIndex={zIndex}\n position={position}\n withinPortal={withinPortal}\n portalProps={portalProps}\n unstyled={unstyled}\n >\n <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n {(transitionStyles) => (\n <Paper\n unstyled={unstyled}\n {...getStyles('root', { style: transitionStyles })}\n {...others}\n >\n {withCloseButton && (\n <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n )}\n {children}\n </Paper>\n )}\n </Transition>\n </Affix>\n );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n\nexport namespace Dialog {\n export type Props = DialogProps;\n export type StylesNames = DialogStylesNames;\n export type CssVariables = DialogCssVariables;\n export type Factory = DialogFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,GAAG;CACH,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;CAAI;CAC9D,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,eAAe,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiB,QAAQ,MAAM,aAAa,EAC9C,EACF,EAAE;AAEF,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;YAEV,oBAAC,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;cACvD,qBACA,qBAAC,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;IACjD,GAAI;cAHN,CAKG,mBACC,oBAAC,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,aAAa;IAAI,CAAA,GAEnF,QACI;;EAEC,CAAA;CACP,CAAA;AAEX,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}
1	+ {"version":3,"file":"Dialog.mjs","names":["classes"],"sources":["../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import {\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSize,\n MantineSize,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Affix, AffixBaseProps } from '../Affix';\nimport { CloseButton } from '../CloseButton';\nimport { Paper, PaperBaseProps } from '../Paper';\nimport { Transition, TransitionOverride } from '../Transition';\nimport classes from './Dialog.module.css';\n\nexport type DialogStylesNames = 'root' \| 'closeButton';\nexport type DialogCssVariables = {\n root: '--dialog-size';\n};\n\nexport interface DialogProps\n extends\n BoxProps,\n AffixBaseProps,\n PaperBaseProps,\n StylesApiProps<DialogFactory>,\n ElementProps<'div'> {\n /** If set, the component uses `display: none` to hide the root element instead of removing the DOM node @default false /\n keepMounted?: boolean;\n\n /* If set, displays the close button @default false /\n withCloseButton?: boolean;\n\n /* Called on close button click /\n onClose?: () => void;\n\n /* Dialog content /\n children?: React.ReactNode;\n\n /* Opened state /\n opened: boolean;\n\n /* Props passed down to the underlying `Transition` component @default { transition: 'pop-top-right', duration: 200 } /\n transitionProps?: TransitionOverride;\n\n /* Controls `width` of the dialog @default 'md' */\n size?: MantineSize \| (string & {}) \| number;\n}\n\nexport type DialogFactory = Factory<{\n props: DialogProps;\n ref: HTMLDivElement;\n stylesNames: DialogStylesNames;\n vars: DialogCssVariables;\n}>;\n\nconst defaultProps = {\n shadow: 'md',\n p: 'md',\n withBorder: true,\n transitionProps: { transition: 'pop-top-right', duration: 200 },\n position: {\n bottom: 30,\n right: 30,\n },\n} satisfies Partial<DialogProps>;\n\nconst varsResolver = createVarsResolver<DialogFactory>((_, { size }) => ({\n root: {\n '--dialog-size': getSize(size, 'dialog-size'),\n },\n}));\n\nexport const Dialog = factory<DialogFactory>((_props) => {\n const props = useProps('Dialog', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n zIndex,\n position,\n keepMounted,\n opened,\n transitionProps,\n withCloseButton,\n withinPortal,\n children,\n onClose,\n portalProps,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<DialogFactory>({\n name: 'Dialog',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n return (\n <Affix\n zIndex={zIndex}\n position={position}\n withinPortal={withinPortal}\n portalProps={portalProps}\n unstyled={unstyled}\n >\n <Transition keepMounted={keepMounted} mounted={opened} {...transitionProps}>\n {(transitionStyles) => (\n <Paper\n unstyled={unstyled}\n {...getStyles('root', { style: transitionStyles })}\n {...others}\n >\n {withCloseButton && (\n <CloseButton onClick={onClose} unstyled={unstyled} {...getStyles('closeButton')} />\n )}\n {children}\n </Paper>\n )}\n </Transition>\n </Affix>\n );\n});\n\nDialog.classes = classes;\nDialog.varsResolver = varsResolver;\nDialog.displayName = '@mantine/core/Dialog';\n\nexport namespace Dialog {\n export type Props = DialogProps;\n export type StylesNames = DialogStylesNames;\n export type CssVariables = DialogCssVariables;\n export type Factory = DialogFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AA2DA,MAAM,eAAe;CACnB,QAAQ;CACR,GAAG;CACH,YAAY;CACZ,iBAAiB;EAAE,YAAY;EAAiB,UAAU;CAAI;CAC9D,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AAEA,MAAM,eAAe,oBAAmC,GAAG,EAAE,YAAY,EACvE,MAAM,EACJ,iBAAiB,QAAQ,MAAM,aAAa,EAC9C,EACF,EAAE;AAEF,MAAa,SAAS,SAAwB,WAAW;CACvD,MAAM,QAAQ,SAAS,UAAU,cAAc,MAAM;CACrD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,QACA,UACA,aACA,QACA,iBACA,iBACA,cACA,UACA,SACA,aACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAY,UAAyB;EACzC,MAAM;EACN,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,OAAD;EACU;EACE;EACI;EACD;EACH;YAEV,oBAAC,YAAD;GAAyB;GAAa,SAAS;GAAQ,GAAI;cACvD,qBACA,qBAAC,OAAD;IACY;IACV,GAAI,UAAU,QAAQ,EAAE,OAAO,iBAAiB,CAAC;IACjD,GAAI;cAHN,CAKG,mBACC,oBAAC,aAAD;KAAa,SAAS;KAAmB;KAAU,GAAI,UAAU,aAAa;IAAI,CAAA,GAEnF,QACI;;EAEC,CAAA;CACP,CAAA;AAEX,CAAC;AAED,OAAO,UAAUA;AACjB,OAAO,eAAe;AACtB,OAAO,cAAc"}

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

@@ -45,7 +45,7 @@ const varsResolver = createVarsResolver((_, props, ctx) => ({ wrapper: {
 } }));
 const Input = polymorphicFactory((_props) => {
 	const props = useProps("Input", defaultProps, _props);
-	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, rootRef, dir, ...others } = props;
+	const { classNames, className, style, styles, unstyled, required, __staticSelector, __stylesApiProps, size, wrapperProps, error, disabled, leftSection, leftSectionProps, leftSectionWidth, rightSection, rightSectionProps, rightSectionWidth, rightSectionPointerEvents, leftSectionPointerEvents, variant, vars, pointer, multiline, radius, id, withAria, withErrorStyles, mod, inputSize, attributes, __clearSection, __clearable, __clearSectionMode, __defaultRightSection, loading, loadingPosition, __bottomSection, __bottomSectionProps, rootRef, dir, ...others } = props;
 	const { styleProps, rest } = extractStyleProps(others);
 	const ctx = use(InputWrapperContext);
 	const stylesCtx = {
@@ -98,7 +98,8 @@ const Input = polymorphicFactory((_props) => {
 				disabled,
 				multiline,
 				"data-with-right-section": !!_rightSection,
-				"data-with-left-section": !!_leftSection
+				"data-with-left-section": !!_leftSection,
+				"data-with-bottom-section": !!__bottomSection
 			}, mod],
 			variant,
 			size,
@@ -125,6 +126,14 @@ const Input = polymorphicFactory((_props) => {
 					__size: inputSize,
 					...getStyles("input")
 				}),
+				__bottomSection && /* @__PURE__ */ jsx("div", {
+					...__bottomSectionProps,
+					...getStyles("bottomSection", {
+						className: __bottomSectionProps?.className,
+						style: __bottomSectionProps?.style
+					}),
+					children: __bottomSection
+				}),
 				_rightSection && /* @__PURE__ */ jsx("div", {
 					...rightSectionProps,
 					"data-position": "right",

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.mjs","names":["classes"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n extractStyleProps,\n getFontSize,\n getRadius,\n getSize,\n MantineRadius,\n MantineSize,\n polymorphicFactory,\n PolymorphicFactory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Loader } from '../Loader/Loader';\nimport { InputContext } from './Input.context';\nimport {\n InputClearButton,\n type InputClearButtonProps,\n type InputClearButtonFactory,\n} from './InputClearButton/InputClearButton';\nimport {\n ClearSectionMode,\n InputClearSection,\n type InputClearSectionProps,\n} from './InputClearSection/InputClearSection';\nimport {\n InputDescription,\n type InputDescriptionProps,\n type InputDescriptionStylesNames,\n type InputDescriptionCssVariables,\n type InputDescriptionFactory,\n} from './InputDescription/InputDescription';\nimport {\n InputError,\n type InputErrorProps,\n type InputErrorStylesNames,\n type InputErrorCssVariables,\n type InputErrorFactory,\n} from './InputError/InputError';\nimport {\n InputLabel,\n type InputLabelProps,\n type InputLabelStylesNames,\n type InputLabelCssVariables,\n type InputLabelFactory,\n} from './InputLabel/InputLabel';\nimport {\n InputPlaceholder,\n type InputPlaceholderProps,\n type InputPlaceholderStylesNames,\n type InputPlaceholderFactory,\n} from './InputPlaceholder/InputPlaceholder';\nimport { InputWrapperContext } from './InputWrapper.context';\nimport {\n __InputWrapperProps,\n InputWrapper,\n InputWrapperStylesNames,\n type InputWrapperProps,\n type InputWrapperFactory,\n} from './InputWrapper/InputWrapper';\nimport classes from './Input.module.css';\n// Required to be a separate type for docgen script\ntype WrapperProps = React.ComponentProps<'div'> & DataAttributes;\n\nexport interface __BaseInputProps extends __InputWrapperProps, __InputProps {\n /** Props passed down to the root element /\n wrapperProps?: WrapperProps;\n}\n\nexport type __InputStylesNames = InputStylesNames \| InputWrapperStylesNames;\n\nexport type InputStylesNames = 'input' \| 'wrapper' \| 'section';\nexport type InputVariant = 'default' \| 'filled' \| 'unstyled';\nexport type InputCssVariables = {\n wrapper:\n \| '--input-height'\n \| '--input-fz'\n \| '--input-radius'\n \| '--input-left-section-width'\n \| '--input-right-section-width'\n \| '--input-left-section-pointer-events'\n \| '--input-right-section-pointer-events'\n \| '--input-padding-y'\n \| '--input-margin-top'\n \| '--input-margin-bottom';\n};\n\nexport interface InputStylesCtx {\n offsetTop: boolean \| undefined;\n offsetBottom: boolean \| undefined;\n}\n\nexport interface __InputProps {\n /* Content section displayed on the left side of the input /\n leftSection?: React.ReactNode;\n\n /* Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height /\n leftSectionWidth?: React.CSSProperties['width'];\n\n /* Props passed down to the `leftSection` element /\n leftSectionProps?: React.ComponentProps<'div'>;\n\n /* Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' /\n leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n /* Content section displayed on the right side of the input /\n rightSection?: React.ReactNode;\n\n /* Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height /\n rightSectionWidth?: React.CSSProperties['width'];\n\n /* Props passed down to the `rightSection` element /\n rightSectionProps?: React.ComponentProps<'div'>;\n\n /* Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' /\n rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n /* Sets `required` attribute on the `input` element /\n required?: boolean;\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 /* Sets `disabled` attribute on the `input` element /\n disabled?: boolean;\n\n /* Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). @default false /\n pointer?: boolean;\n\n /* Determines whether the input should have red border and red text color when the `error` prop is set @default true /\n withErrorStyles?: boolean;\n\n /* HTML `size` attribute for the input element (number of visible characters) /\n inputSize?: string;\n\n /* Section to be displayed when the input is `__clearable` and `rightSection` is not defined /\n __clearSection?: React.ReactNode;\n\n /* Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined /\n __clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n __clearSectionMode?: ClearSectionMode;\n\n /* Right section displayed when both `__clearSection` and `rightSection` are not defined /\n __defaultRightSection?: React.ReactNode;\n\n /* Displays loading indicator in the left or right section @default false /\n loading?: boolean;\n\n /* Position of the loading indicator @default 'right' /\n loadingPosition?: 'left' \| 'right';\n}\n\nexport interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {\n __staticSelector?: string;\n\n /* Props passed to Styles API context, replaces `Input.Wrapper` props /\n __stylesApiProps?: Record<string, any>;\n\n /* Determines whether the input should have error styles and `aria-invalid` attribute /\n error?: React.ReactNode;\n\n /* Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. @default false /\n multiline?: boolean;\n\n /* Input element id /\n id?: string;\n\n /* Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true /\n withAria?: boolean;\n\n /* Props passed down to the root element of the `Input` component /\n wrapperProps?: WrapperProps;\n\n /* Root element ref */\n rootRef?: React.Ref<HTMLDivElement>;\n}\n\nexport type InputFactory = PolymorphicFactory<{\n props: InputProps;\n defaultRef: HTMLInputElement;\n defaultComponent: 'input';\n stylesNames: InputStylesNames;\n variant: InputVariant;\n vars: InputCssVariables;\n ctx: InputStylesCtx;\n staticComponents: {\n Label: typeof InputLabel;\n Error: typeof InputError;\n Description: typeof InputDescription;\n Placeholder: typeof InputPlaceholder;\n Wrapper: typeof InputWrapper;\n ClearButton: typeof InputClearButton;\n };\n}>;\n\nconst defaultProps = {\n variant: 'default',\n leftSectionPointerEvents: 'none',\n rightSectionPointerEvents: 'none',\n withAria: true,\n withErrorStyles: true,\n size: 'sm',\n loading: false,\n loadingPosition: 'right',\n} satisfies Partial<InputProps>;\n\nconst varsResolver = createVarsResolver<InputFactory>((_, props, ctx) => ({\n wrapper: {\n '--input-margin-top': ctx.offsetTop ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n '--input-margin-bottom': ctx.offsetBottom ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n '--input-height': getSize(props.size, 'input-height'),\n '--input-fz': getFontSize(props.size),\n '--input-radius': props.radius === undefined ? undefined : getRadius(props.radius),\n '--input-left-section-width':\n props.leftSectionWidth !== undefined ? rem(props.leftSectionWidth) : undefined,\n '--input-right-section-width':\n props.rightSectionWidth !== undefined ? rem(props.rightSectionWidth) : undefined,\n '--input-padding-y': props.multiline ? getSize(props.size, 'input-padding-y') : undefined,\n '--input-left-section-pointer-events': props.leftSectionPointerEvents,\n '--input-right-section-pointer-events': props.rightSectionPointerEvents,\n },\n}));\n\nexport const Input = polymorphicFactory<InputFactory>((_props) => {\n const props = useProps('Input', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n required,\n __staticSelector,\n __stylesApiProps,\n size,\n wrapperProps,\n error,\n disabled,\n leftSection,\n leftSectionProps,\n leftSectionWidth,\n rightSection,\n rightSectionProps,\n rightSectionWidth,\n rightSectionPointerEvents,\n leftSectionPointerEvents,\n variant,\n vars,\n pointer,\n multiline,\n radius,\n id,\n withAria,\n withErrorStyles,\n mod,\n inputSize,\n attributes,\n __clearSection,\n __clearable,\n __clearSectionMode,\n __defaultRightSection,\n loading,\n loadingPosition,\n rootRef,\n dir,\n ...others\n } = props as typeof props & Pick<React.HTMLAttributes<HTMLDivElement>, 'dir'>;\n\n const { styleProps, rest } = extractStyleProps(others);\n const ctx = use(InputWrapperContext);\n const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };\n\n const getStyles = useStyles<InputFactory>({\n name: ['Input', __staticSelector],\n props: __stylesApiProps \|\| props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n stylesCtx,\n rootSelector: 'wrapper',\n vars,\n varsResolver,\n });\n\n const ariaAttributes = withAria\n ? {\n required,\n disabled,\n 'aria-invalid': error ? true : undefined,\n 'aria-describedby': ctx?.describedBy,\n id: ctx?.inputId \|\| id,\n }\n : {};\n\n const loadingIndicator = loading ? (\n <Loader\n size={\n loadingPosition === 'left'\n ? 'calc(var(--input-left-section-size) / 2)'\n : 'calc(var(--input-right-section-size) / 2)'\n }\n />\n ) : null;\n\n const _leftSection = loading && loadingPosition === 'left' ? loadingIndicator : leftSection;\n const _rightSection: React.ReactNode = InputClearSection({\n __clearable,\n __clearSection,\n rightSection: loading && loadingPosition === 'right' ? loadingIndicator : rightSection,\n __defaultRightSection,\n size,\n __clearSectionMode,\n });\n\n return (\n <InputContext value={{ size: size \|\| 'sm' }}>\n <Box\n ref={rootRef}\n dir={dir}\n {...getStyles('wrapper')}\n {...styleProps}\n {...wrapperProps}\n mod={[\n {\n error: !!error && withErrorStyles,\n pointer,\n disabled,\n multiline,\n 'data-with-right-section': !!_rightSection,\n 'data-with-left-section': !!_leftSection,\n },\n mod,\n ]}\n variant={variant}\n size={size}\n >\n {_leftSection && (\n <div\n {...leftSectionProps}\n data-position=\"left\"\n {...getStyles('section', {\n className: leftSectionProps?.className,\n style: leftSectionProps?.style,\n })}\n >\n {_leftSection}\n </div>\n )}\n\n <Box\n component=\"input\"\n {...rest}\n {...ariaAttributes}\n required={required}\n mod={{ disabled, error: !!error && withErrorStyles }}\n variant={variant}\n __size={inputSize}\n {...getStyles('input')}\n />\n\n {_rightSection && (\n <div\n {...rightSectionProps}\n data-position=\"right\"\n {...getStyles('section', {\n className: rightSectionProps?.className,\n style: rightSectionProps?.style,\n })}\n >\n {_rightSection}\n </div>\n )}\n </Box>\n </InputContext>\n );\n});\n\nInput.classes = classes;\nInput.varsResolver = varsResolver;\nInput.Wrapper = InputWrapper;\nInput.Label = InputLabel;\nInput.Error = InputError;\nInput.Description = InputDescription;\nInput.Placeholder = InputPlaceholder;\nInput.ClearButton = InputClearButton;\nInput.displayName = '@mantine/core/Input';\n\nexport namespace Input {\n export type Props = InputProps;\n export type StylesNames = InputStylesNames;\n export type CssVariables = InputCssVariables;\n export type Factory = InputFactory;\n\n export namespace Wrapper {\n export type Props = InputWrapperProps;\n export type StylesNames = InputWrapperStylesNames;\n export type Factory = InputWrapperFactory;\n }\n\n export namespace Description {\n export type Props = InputDescriptionProps;\n export type StylesNames = InputDescriptionStylesNames;\n export type CssVariables = InputDescriptionCssVariables;\n export type Factory = InputDescriptionFactory;\n }\n\n export namespace Error {\n export type Props = InputErrorProps;\n export type StylesNames = InputErrorStylesNames;\n export type CssVariables = InputErrorCssVariables;\n export type Factory = InputErrorFactory;\n }\n\n export namespace Label {\n export type Props = InputLabelProps;\n export type StylesNames = InputLabelStylesNames;\n export type CssVariables = InputLabelCssVariables;\n export type Factory = InputLabelFactory;\n }\n\n export namespace Placeholder {\n export type Props = InputPlaceholderProps;\n export type StylesNames = InputPlaceholderStylesNames;\n export type Factory = InputPlaceholderFactory;\n }\n\n export namespace ClearButton {\n export type Props = InputClearButtonProps;\n export type Factory = InputClearButtonFactory;\n }\n\n export namespace ClearSection {\n export type Props = InputClearSectionProps;\n export type Mode = ClearSectionMode;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA8MA,MAAM,eAAe;CACnB,SAAS;CACT,0BAA0B;CAC1B,2BAA2B;CAC3B,UAAU;CACV,iBAAiB;CACjB,MAAM;CACN,SAAS;CACT,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAAkC,GAAG,OAAO,SAAS,EACxE,SAAS;CACP,sBAAsB,IAAI,YAAY,wCAAwC,KAAA;CAC9E,yBAAyB,IAAI,eAAe,wCAAwC,KAAA;CACpF,kBAAkB,QAAQ,MAAM,MAAM,cAAc;CACpD,cAAc,YAAY,MAAM,IAAI;CACpC,kBAAkB,MAAM,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM,MAAM;CACjF,8BACE,MAAM,qBAAqB,KAAA,IAAY,IAAI,MAAM,gBAAgB,IAAI,KAAA;CACvE,+BACE,MAAM,sBAAsB,KAAA,IAAY,IAAI,MAAM,iBAAiB,IAAI,KAAA;CACzE,qBAAqB,MAAM,YAAY,QAAQ,MAAM,MAAM,iBAAiB,IAAI,KAAA;CAChF,uCAAuC,MAAM;CAC7C,wCAAwC,MAAM;AAChD,EACF,EAAE;AAEF,MAAa,QAAQ,oBAAkC,WAAW;CAChE,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,UACA,kBACA,kBACA,MACA,cACA,OACA,UACA,aACA,kBACA,kBACA,cACA,mBACA,mBACA,2BACA,0BACA,SACA,MACA,SACA,WACA,QACA,IACA,UACA,iBACA,KACA,WACA,YACA,gBACA,aACA,oBACA,uBACA,SACA,iBACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,YAA4B;EAAE,cAAc,KAAK;EAAc,WAAW,KAAK;CAAU;CAE/F,MAAM,YAAY,UAAwB;EACxC,MAAM,CAAC,SAAS,gBAAgB;EAChC,OAAO,oBAAoB;EAC3B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,WACnB;EACE;EACA;EACA,gBAAgB,QAAQ,OAAO,KAAA;EAC/B,oBAAoB,KAAK;EACzB,IAAI,KAAK,WAAW;CACtB,IACA,CAAC;CAEL,MAAM,mBAAmB,UACvB,oBAAC,QAAD,EACE,MACE,oBAAoB,SAChB,6CACA,4CAEP,CAAA,IACC;CAEJ,MAAM,eAAe,WAAW,oBAAoB,SAAS,mBAAmB;CAChF,MAAM,gBAAiC,kBAAkB;EACvD;EACA;EACA,cAAc,WAAW,oBAAoB,UAAU,mBAAmB;EAC1E;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EAAc,OAAO,EAAE,MAAM,QAAQ,KAAK;YACxC,qBAAC,KAAD;GACE,KAAK;GACA;GACL,GAAI,UAAU,SAAS;GACvB,GAAI;GACJ,GAAI;GACJ,KAAK,CACH;IACE,OAAO,CAAC,CAAC,SAAS;IAClB;IACA;IACA;IACA,2BAA2B,CAAC,CAAC;IAC7B,0BAA0B,CAAC,CAAC;GAC9B,GACA,GACF;GACS;GACH;aAlBR;IAoBG,gBACC,oBAAC,OAAD;KACE,GAAI;KACJ,iBAAc;KACd,GAAI,UAAU,WAAW;MACvB,WAAW,kBAAkB;MAC7B,OAAO,kBAAkB;KAC3B,CAAC;eAEA;IACE,CAAA;IAGP,oBAAC,KAAD;KACE,WAAU;KACV,GAAI;KACJ,GAAI;KACM;KACV,KAAK;MAAE;MAAU,OAAO,CAAC,CAAC,SAAS;KAAgB;KAC1C;KACT,QAAQ;KACR,GAAI,UAAU,OAAO;IACtB,CAAA;IAEA,iBACC,oBAAC,OAAD;KACE,GAAI;KACJ,iBAAc;KACd,GAAI,UAAU,WAAW;MACvB,WAAW,mBAAmB;MAC9B,OAAO,mBAAmB;KAC5B,CAAC;eAEA;IACE,CAAA;GAEJ;;CACO,CAAA;AAElB,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,UAAU;AAChB,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc"}
1	+ {"version":3,"file":"Input.mjs","names":["classes"],"sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import { use } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n DataAttributes,\n extractStyleProps,\n getFontSize,\n getRadius,\n getSize,\n MantineRadius,\n MantineSize,\n polymorphicFactory,\n PolymorphicFactory,\n rem,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport { Loader } from '../Loader/Loader';\nimport { InputContext } from './Input.context';\nimport {\n InputClearButton,\n type InputClearButtonProps,\n type InputClearButtonFactory,\n} from './InputClearButton/InputClearButton';\nimport {\n ClearSectionMode,\n InputClearSection,\n type InputClearSectionProps,\n} from './InputClearSection/InputClearSection';\nimport {\n InputDescription,\n type InputDescriptionProps,\n type InputDescriptionStylesNames,\n type InputDescriptionCssVariables,\n type InputDescriptionFactory,\n} from './InputDescription/InputDescription';\nimport {\n InputError,\n type InputErrorProps,\n type InputErrorStylesNames,\n type InputErrorCssVariables,\n type InputErrorFactory,\n} from './InputError/InputError';\nimport {\n InputLabel,\n type InputLabelProps,\n type InputLabelStylesNames,\n type InputLabelCssVariables,\n type InputLabelFactory,\n} from './InputLabel/InputLabel';\nimport {\n InputPlaceholder,\n type InputPlaceholderProps,\n type InputPlaceholderStylesNames,\n type InputPlaceholderFactory,\n} from './InputPlaceholder/InputPlaceholder';\nimport { InputWrapperContext } from './InputWrapper.context';\nimport {\n __InputWrapperProps,\n InputWrapper,\n InputWrapperStylesNames,\n type InputWrapperProps,\n type InputWrapperFactory,\n} from './InputWrapper/InputWrapper';\nimport classes from './Input.module.css';\n// Required to be a separate type for docgen script\ntype WrapperProps = React.ComponentProps<'div'> & DataAttributes;\n\nexport interface __BaseInputProps extends __InputWrapperProps, __InputProps {\n /** Props passed down to the root element /\n wrapperProps?: WrapperProps;\n}\n\nexport type __InputStylesNames = InputStylesNames \| InputWrapperStylesNames;\n\nexport type InputStylesNames = 'input' \| 'wrapper' \| 'section' \| 'bottomSection';\nexport type InputVariant = 'default' \| 'filled' \| 'unstyled';\nexport type InputCssVariables = {\n wrapper:\n \| '--input-height'\n \| '--input-fz'\n \| '--input-radius'\n \| '--input-left-section-width'\n \| '--input-right-section-width'\n \| '--input-left-section-pointer-events'\n \| '--input-right-section-pointer-events'\n \| '--input-padding-y'\n \| '--input-margin-top'\n \| '--input-margin-bottom';\n};\n\nexport interface InputStylesCtx {\n offsetTop: boolean \| undefined;\n offsetBottom: boolean \| undefined;\n}\n\nexport interface __InputProps {\n /* Content section displayed on the left side of the input /\n leftSection?: React.ReactNode;\n\n /* Left section width, used to set `width` of the section and input `padding-left`, by default equals to the input height /\n leftSectionWidth?: React.CSSProperties['width'];\n\n /* Props passed down to the `leftSection` element /\n leftSectionProps?: React.ComponentProps<'div'>;\n\n /* Sets `pointer-events` styles on the `leftSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' /\n leftSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n /* Content section displayed on the right side of the input /\n rightSection?: React.ReactNode;\n\n /* Right section width, used to set `width` of the section and input `padding-right`, by default equals to the input height /\n rightSectionWidth?: React.CSSProperties['width'];\n\n /* Props passed down to the `rightSection` element /\n rightSectionProps?: React.ComponentProps<'div'>;\n\n /* Sets `pointer-events` styles on the `rightSection` element. Use `'all'` when section contains interactive elements (buttons, links). @default 'none' /\n rightSectionPointerEvents?: React.CSSProperties['pointerEvents'];\n\n /* Sets `required` attribute on the `input` element /\n required?: boolean;\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 /* Sets `disabled` attribute on the `input` element /\n disabled?: boolean;\n\n /* Controls input `height`, horizontal `padding`, and `font-size` @default 'sm' /\n size?: MantineSize \| (string & {});\n\n /* Determines whether the input should have `cursor: pointer` style. Use when input acts as a button-like trigger (e.g., `component=\"button\"` for Select/DatePicker). @default false /\n pointer?: boolean;\n\n /* Determines whether the input should have red border and red text color when the `error` prop is set @default true /\n withErrorStyles?: boolean;\n\n /* HTML `size` attribute for the input element (number of visible characters) /\n inputSize?: string;\n\n /* Section to be displayed when the input is `__clearable` and `rightSection` is not defined /\n __clearSection?: React.ReactNode;\n\n /* Determines whether the `__clearSection` should be displayed if it is passed to the component, has no effect if `rightSection` is defined /\n __clearable?: boolean;\n\n /* Determines how the clear button and rightSection are rendered @default 'both' /\n __clearSectionMode?: ClearSectionMode;\n\n /* Right section displayed when both `__clearSection` and `rightSection` are not defined /\n __defaultRightSection?: React.ReactNode;\n\n /* Displays loading indicator in the left or right section @default false /\n loading?: boolean;\n\n /* Position of the loading indicator @default 'right' /\n loadingPosition?: 'left' \| 'right';\n\n /* Content section displayed at the bottom of the input, inside the border /\n __bottomSection?: React.ReactNode;\n\n /* Props passed down to the `__bottomSection` element /\n __bottomSectionProps?: React.ComponentProps<'div'>;\n}\n\nexport interface InputProps extends BoxProps, __InputProps, StylesApiProps<InputFactory> {\n __staticSelector?: string;\n\n /* Props passed to Styles API context, replaces `Input.Wrapper` props /\n __stylesApiProps?: Record<string, any>;\n\n /* Determines whether the input should have error styles and `aria-invalid` attribute /\n error?: React.ReactNode;\n\n /* Adjusts padding and sizing calculations for multiline inputs (use with `component=\"textarea\"`). Does not make the input multiline by itself. @default false /\n multiline?: boolean;\n\n /* Input element id /\n id?: string;\n\n /* Determines whether `aria-` and other accessibility attributes should be added to the input. Only disable when implementing custom accessibility handling. @default true /\n withAria?: boolean;\n\n /* Props passed down to the root element of the `Input` component /\n wrapperProps?: WrapperProps;\n\n /* Root element ref */\n rootRef?: React.Ref<HTMLDivElement>;\n}\n\nexport type InputFactory = PolymorphicFactory<{\n props: InputProps;\n defaultRef: HTMLInputElement;\n defaultComponent: 'input';\n stylesNames: InputStylesNames;\n variant: InputVariant;\n vars: InputCssVariables;\n ctx: InputStylesCtx;\n staticComponents: {\n Label: typeof InputLabel;\n Error: typeof InputError;\n Description: typeof InputDescription;\n Placeholder: typeof InputPlaceholder;\n Wrapper: typeof InputWrapper;\n ClearButton: typeof InputClearButton;\n };\n}>;\n\nconst defaultProps = {\n variant: 'default',\n leftSectionPointerEvents: 'none',\n rightSectionPointerEvents: 'none',\n withAria: true,\n withErrorStyles: true,\n size: 'sm',\n loading: false,\n loadingPosition: 'right',\n} satisfies Partial<InputProps>;\n\nconst varsResolver = createVarsResolver<InputFactory>((_, props, ctx) => ({\n wrapper: {\n '--input-margin-top': ctx.offsetTop ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n '--input-margin-bottom': ctx.offsetBottom ? 'calc(var(--mantine-spacing-xs) / 2)' : undefined,\n '--input-height': getSize(props.size, 'input-height'),\n '--input-fz': getFontSize(props.size),\n '--input-radius': props.radius === undefined ? undefined : getRadius(props.radius),\n '--input-left-section-width':\n props.leftSectionWidth !== undefined ? rem(props.leftSectionWidth) : undefined,\n '--input-right-section-width':\n props.rightSectionWidth !== undefined ? rem(props.rightSectionWidth) : undefined,\n '--input-padding-y': props.multiline ? getSize(props.size, 'input-padding-y') : undefined,\n '--input-left-section-pointer-events': props.leftSectionPointerEvents,\n '--input-right-section-pointer-events': props.rightSectionPointerEvents,\n },\n}));\n\nexport const Input = polymorphicFactory<InputFactory>((_props) => {\n const props = useProps('Input', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n required,\n __staticSelector,\n __stylesApiProps,\n size,\n wrapperProps,\n error,\n disabled,\n leftSection,\n leftSectionProps,\n leftSectionWidth,\n rightSection,\n rightSectionProps,\n rightSectionWidth,\n rightSectionPointerEvents,\n leftSectionPointerEvents,\n variant,\n vars,\n pointer,\n multiline,\n radius,\n id,\n withAria,\n withErrorStyles,\n mod,\n inputSize,\n attributes,\n __clearSection,\n __clearable,\n __clearSectionMode,\n __defaultRightSection,\n loading,\n loadingPosition,\n __bottomSection,\n __bottomSectionProps,\n rootRef,\n dir,\n ...others\n } = props as typeof props & Pick<React.HTMLAttributes<HTMLDivElement>, 'dir'>;\n\n const { styleProps, rest } = extractStyleProps(others);\n const ctx = use(InputWrapperContext);\n const stylesCtx: InputStylesCtx = { offsetBottom: ctx?.offsetBottom, offsetTop: ctx?.offsetTop };\n\n const getStyles = useStyles<InputFactory>({\n name: ['Input', __staticSelector],\n props: __stylesApiProps \|\| props,\n classes,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n stylesCtx,\n rootSelector: 'wrapper',\n vars,\n varsResolver,\n });\n\n const ariaAttributes = withAria\n ? {\n required,\n disabled,\n 'aria-invalid': error ? true : undefined,\n 'aria-describedby': ctx?.describedBy,\n id: ctx?.inputId \|\| id,\n }\n : {};\n\n const loadingIndicator = loading ? (\n <Loader\n size={\n loadingPosition === 'left'\n ? 'calc(var(--input-left-section-size) / 2)'\n : 'calc(var(--input-right-section-size) / 2)'\n }\n />\n ) : null;\n\n const _leftSection = loading && loadingPosition === 'left' ? loadingIndicator : leftSection;\n const _rightSection: React.ReactNode = InputClearSection({\n __clearable,\n __clearSection,\n rightSection: loading && loadingPosition === 'right' ? loadingIndicator : rightSection,\n __defaultRightSection,\n size,\n __clearSectionMode,\n });\n\n return (\n <InputContext value={{ size: size \|\| 'sm' }}>\n <Box\n ref={rootRef}\n dir={dir}\n {...getStyles('wrapper')}\n {...styleProps}\n {...wrapperProps}\n mod={[\n {\n error: !!error && withErrorStyles,\n pointer,\n disabled,\n multiline,\n 'data-with-right-section': !!_rightSection,\n 'data-with-left-section': !!_leftSection,\n 'data-with-bottom-section': !!__bottomSection,\n },\n mod,\n ]}\n variant={variant}\n size={size}\n >\n {_leftSection && (\n <div\n {...leftSectionProps}\n data-position=\"left\"\n {...getStyles('section', {\n className: leftSectionProps?.className,\n style: leftSectionProps?.style,\n })}\n >\n {_leftSection}\n </div>\n )}\n\n <Box\n component=\"input\"\n {...rest}\n {...ariaAttributes}\n required={required}\n mod={{ disabled, error: !!error && withErrorStyles }}\n variant={variant}\n __size={inputSize}\n {...getStyles('input')}\n />\n\n {__bottomSection && (\n <div\n {...__bottomSectionProps}\n {...getStyles('bottomSection', {\n className: __bottomSectionProps?.className,\n style: __bottomSectionProps?.style,\n })}\n >\n {__bottomSection}\n </div>\n )}\n\n {_rightSection && (\n <div\n {...rightSectionProps}\n data-position=\"right\"\n {...getStyles('section', {\n className: rightSectionProps?.className,\n style: rightSectionProps?.style,\n })}\n >\n {_rightSection}\n </div>\n )}\n </Box>\n </InputContext>\n );\n});\n\nInput.classes = classes;\nInput.varsResolver = varsResolver;\nInput.Wrapper = InputWrapper;\nInput.Label = InputLabel;\nInput.Error = InputError;\nInput.Description = InputDescription;\nInput.Placeholder = InputPlaceholder;\nInput.ClearButton = InputClearButton;\nInput.displayName = '@mantine/core/Input';\n\nexport namespace Input {\n export type Props = InputProps;\n export type StylesNames = InputStylesNames;\n export type CssVariables = InputCssVariables;\n export type Factory = InputFactory;\n\n export namespace Wrapper {\n export type Props = InputWrapperProps;\n export type StylesNames = InputWrapperStylesNames;\n export type Factory = InputWrapperFactory;\n }\n\n export namespace Description {\n export type Props = InputDescriptionProps;\n export type StylesNames = InputDescriptionStylesNames;\n export type CssVariables = InputDescriptionCssVariables;\n export type Factory = InputDescriptionFactory;\n }\n\n export namespace Error {\n export type Props = InputErrorProps;\n export type StylesNames = InputErrorStylesNames;\n export type CssVariables = InputErrorCssVariables;\n export type Factory = InputErrorFactory;\n }\n\n export namespace Label {\n export type Props = InputLabelProps;\n export type StylesNames = InputLabelStylesNames;\n export type CssVariables = InputLabelCssVariables;\n export type Factory = InputLabelFactory;\n }\n\n export namespace Placeholder {\n export type Props = InputPlaceholderProps;\n export type StylesNames = InputPlaceholderStylesNames;\n export type Factory = InputPlaceholderFactory;\n }\n\n export namespace ClearButton {\n export type Props = InputClearButtonProps;\n export type Factory = InputClearButtonFactory;\n }\n\n export namespace ClearSection {\n export type Props = InputClearSectionProps;\n export type Mode = ClearSectionMode;\n }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAoNA,MAAM,eAAe;CACnB,SAAS;CACT,0BAA0B;CAC1B,2BAA2B;CAC3B,UAAU;CACV,iBAAiB;CACjB,MAAM;CACN,SAAS;CACT,iBAAiB;AACnB;AAEA,MAAM,eAAe,oBAAkC,GAAG,OAAO,SAAS,EACxE,SAAS;CACP,sBAAsB,IAAI,YAAY,wCAAwC,KAAA;CAC9E,yBAAyB,IAAI,eAAe,wCAAwC,KAAA;CACpF,kBAAkB,QAAQ,MAAM,MAAM,cAAc;CACpD,cAAc,YAAY,MAAM,IAAI;CACpC,kBAAkB,MAAM,WAAW,KAAA,IAAY,KAAA,IAAY,UAAU,MAAM,MAAM;CACjF,8BACE,MAAM,qBAAqB,KAAA,IAAY,IAAI,MAAM,gBAAgB,IAAI,KAAA;CACvE,+BACE,MAAM,sBAAsB,KAAA,IAAY,IAAI,MAAM,iBAAiB,IAAI,KAAA;CACzE,qBAAqB,MAAM,YAAY,QAAQ,MAAM,MAAM,iBAAiB,IAAI,KAAA;CAChF,uCAAuC,MAAM;CAC7C,wCAAwC,MAAM;AAChD,EACF,EAAE;AAEF,MAAa,QAAQ,oBAAkC,WAAW;CAChE,MAAM,QAAQ,SAAS,SAAS,cAAc,MAAM;CACpD,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,UACA,kBACA,kBACA,MACA,cACA,OACA,UACA,aACA,kBACA,kBACA,cACA,mBACA,mBACA,2BACA,0BACA,SACA,MACA,SACA,WACA,QACA,IACA,UACA,iBACA,KACA,WACA,YACA,gBACA,aACA,oBACA,uBACA,SACA,iBACA,iBACA,sBACA,SACA,KACA,GAAG,WACD;CAEJ,MAAM,EAAE,YAAY,SAAS,kBAAkB,MAAM;CACrD,MAAM,MAAM,IAAI,mBAAmB;CACnC,MAAM,YAA4B;EAAE,cAAc,KAAK;EAAc,WAAW,KAAK;CAAU;CAE/F,MAAM,YAAY,UAAwB;EACxC,MAAM,CAAC,SAAS,gBAAgB;EAChC,OAAO,oBAAoB;EAC3B,SAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA,cAAc;EACd;EACA;CACF,CAAC;CAED,MAAM,iBAAiB,WACnB;EACE;EACA;EACA,gBAAgB,QAAQ,OAAO,KAAA;EAC/B,oBAAoB,KAAK;EACzB,IAAI,KAAK,WAAW;CACtB,IACA,CAAC;CAEL,MAAM,mBAAmB,UACvB,oBAAC,QAAD,EACE,MACE,oBAAoB,SAChB,6CACA,4CAEP,CAAA,IACC;CAEJ,MAAM,eAAe,WAAW,oBAAoB,SAAS,mBAAmB;CAChF,MAAM,gBAAiC,kBAAkB;EACvD;EACA;EACA,cAAc,WAAW,oBAAoB,UAAU,mBAAmB;EAC1E;EACA;EACA;CACF,CAAC;CAED,OACE,oBAAC,cAAD;EAAc,OAAO,EAAE,MAAM,QAAQ,KAAK;YACxC,qBAAC,KAAD;GACE,KAAK;GACA;GACL,GAAI,UAAU,SAAS;GACvB,GAAI;GACJ,GAAI;GACJ,KAAK,CACH;IACE,OAAO,CAAC,CAAC,SAAS;IAClB;IACA;IACA;IACA,2BAA2B,CAAC,CAAC;IAC7B,0BAA0B,CAAC,CAAC;IAC5B,4BAA4B,CAAC,CAAC;GAChC,GACA,GACF;GACS;GACH;aAnBR;IAqBG,gBACC,oBAAC,OAAD;KACE,GAAI;KACJ,iBAAc;KACd,GAAI,UAAU,WAAW;MACvB,WAAW,kBAAkB;MAC7B,OAAO,kBAAkB;KAC3B,CAAC;eAEA;IACE,CAAA;IAGP,oBAAC,KAAD;KACE,WAAU;KACV,GAAI;KACJ,GAAI;KACM;KACV,KAAK;MAAE;MAAU,OAAO,CAAC,CAAC,SAAS;KAAgB;KAC1C;KACT,QAAQ;KACR,GAAI,UAAU,OAAO;IACtB,CAAA;IAEA,mBACC,oBAAC,OAAD;KACE,GAAI;KACJ,GAAI,UAAU,iBAAiB;MAC7B,WAAW,sBAAsB;MACjC,OAAO,sBAAsB;KAC/B,CAAC;eAEA;IACE,CAAA;IAGN,iBACC,oBAAC,OAAD;KACE,GAAI;KACJ,iBAAc;KACd,GAAI,UAAU,WAAW;MACvB,WAAW,mBAAmB;MAC9B,OAAO,mBAAmB;KAC5B,CAAC;eAEA;IACE,CAAA;GAEJ;;CACO,CAAA;AAElB,CAAC;AAED,MAAM,UAAUA;AAChB,MAAM,eAAe;AACrB,MAAM,UAAU;AAChB,MAAM,QAAQ;AACd,MAAM,QAAQ;AACd,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc;AACpB,MAAM,cAAc"}

package/esm/components/Input/Input.module.mjs CHANGED Viewed

@@ -3,6 +3,7 @@
 var Input_module_default = {
 	"wrapper": "m_6c018570",
 	"input": "m_8fb7ebe7",
+	"bottomSection": "m_93f4ed57",
 	"section": "m_82577fc2",
 	"placeholder": "m_88bacfd0",
 	"root": "m_46b77525",

package/esm/components/Input/Input.module.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.module.mjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n margin-top: var(--input-margin-top, 0rem);\n margin-bottom: var(--input-margin-bottom, 0rem);\n\n --input-height-xs: 30px;\n --input-height-sm: 36px;\n --input-height-md: 42px;\n --input-height-lg: 50px;\n --input-height-xl: 60px;\n\n --input-padding-y-xs: 5px;\n --input-padding-y-sm: 6px;\n --input-padding-y-md: 8px;\n --input-padding-y-lg: 10px;\n --input-padding-y-xl: 13px;\n\n --input-height: var(--input-height-sm);\n --input-radius: var(--mantine-radius-default);\n\n --input-cursor: text;\n --input-text-align: left;\n --input-line-height: calc(var(--input-height) - rem(2px));\n --input-padding: calc(var(--input-height) / 3);\n --input-padding-inline-start: var(--input-padding);\n --input-padding-inline-end: var(--input-padding);\n --input-placeholder-color: var(--mantine-color-placeholder);\n --input-color: var(--mantine-color-text);\n --input-disabled-bg: var(--mantine-color-disabled);\n --input-disabled-color: var(--mantine-color-disabled-color);\n\n --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n --input-right-section-size: var(\n --input-right-section-width,\n calc(var(--input-height) - rem(2px))\n );\n\n --input-size: var(--input-height);\n\n --section-y: 1px;\n --left-section-start: 1px;\n --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n --right-section-end: 1px;\n --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n &[data-variant='unstyled'] {\n --input-padding: 0;\n --input-padding-y: 0;\n --input-padding-inline-start: 0;\n --input-padding-inline-end: 0;\n }\n\n &[data-pointer] {\n --input-cursor: pointer;\n }\n\n &[data-multiline] {\n --input-padding-y-xs: 4.5px;\n --input-padding-y-sm: 5.5px;\n --input-padding-y-md: 7px;\n --input-padding-y-lg: 9.5px;\n --input-padding-y-xl: 13px;\n\n --input-size: auto;\n --input-line-height: var(--mantine-line-height);\n }\n\n &[data-with-left-section] {\n --input-padding-inline-start: var(--input-left-section-size);\n }\n\n &[data-with-right-section] {\n --input-padding-inline-end: var(--input-right-section-size);\n\n &:has([data-combined-clear-section]) {\n .wrapper[data-size='xs'] & {\n --input-padding-inline-end: 41px;\n }\n\n .wrapper[data-size='sm'] & {\n --input-padding-inline-end: 50px;\n }\n\n .wrapper[data-size='md'] & {\n --input-padding-inline-end: 60px;\n }\n\n .wrapper[data-size='lg'] & {\n --input-padding-inline-end: 72px;\n }\n\n .wrapper[data-size='xl'] & {\n --input-padding-inline-end: 89px;\n }\n }\n }\n\n @mixin light {\n &[data-variant='default'] {\n --input-bd: var(--mantine-color-gray-4);\n --input-bg: var(--mantine-color-white);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='filled'] {\n --input-bd: transparent;\n --input-bg: var(--mantine-color-gray-1);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='unstyled'] {\n --input-bd: transparent;\n --input-bg: transparent;\n --input-bd-focus: transparent;\n }\n }\n\n @mixin dark {\n &[data-variant='default'] {\n --input-bd: var(--mantine-color-dark-4);\n --input-bg: var(--mantine-color-dark-6);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='filled'] {\n --input-bd: transparent;\n --input-bg: var(--mantine-color-dark-5);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='unstyled'] {\n --input-bd: transparent;\n --input-bg: transparent;\n --input-bd-focus: transparent;\n }\n }\n\n [data-mantine-color-scheme] &[data-error] {\n &:not([data-variant='unstyled']) {\n --input-bd: var(--mantine-color-error);\n }\n\n --input-color: var(--mantine-color-error);\n --input-placeholder-color: var(--mantine-color-error);\n --input-section-color: var(--mantine-color-error);\n }\n\n @mixin where-rtl {\n --input-text-align: right;\n --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n }\n\n &[dir='ltr'] {\n --input-text-align: left;\n --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n }\n}\n\n.input {\n -webkit-tap-highlight-color: transparent;\n appearance: none;\n resize: var(--input-resize, none);\n display: block;\n width: 100%;\n transition: border-color 100ms ease;\n\n text-align: var(--input-text-align);\n color: var(--input-color);\n border: rem(1px) solid var(--input-bd);\n background-color: var(--input-bg);\n font-family: var(--input-font-family, var(--mantine-font-family));\n height: var(--input-size);\n min-height: var(--input-height);\n line-height: var(--input-line-height);\n font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n border-radius: var(--input-radius);\n padding-inline-start: var(--input-padding-inline-start);\n padding-inline-end: var(--input-padding-inline-end);\n padding-top: var(--input-padding-y, 0rem);\n padding-bottom: var(--input-padding-y, 0rem);\n cursor: var(--input-cursor);\n overflow: var(--input-overflow);\n\n /* Used as data attribute in Textarea component, does not have associated prop on the Input component /\n &[data-no-overflow] {\n --input-overflow: hidden;\n }\n\n / Used as data attribute in JsonInput component, does not have associated prop on the Input component /\n &[data-monospace] {\n --input-font-family: var(--mantine-font-family-monospace);\n --_input-fz: calc(var(--input-fz) - rem(2px));\n }\n\n &:focus,\n &:focus-within {\n outline: none;\n --input-bd: var(--input-bd-focus);\n\n [data-error] & {\n --input-bd: var(--mantine-color-error);\n }\n }\n\n &::placeholder {\n color: var(--input-placeholder-color);\n opacity: 1;\n }\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button,\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &[type='number'] {\n -moz-appearance: textfield;\n }\n\n &:disabled,\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--input-disabled-bg);\n color: var(--input-disabled-color);\n }\n\n / Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported /\n &:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--input-disabled-bg);\n color: var(--input-disabled-color);\n }\n\n &[readonly] {\n caret-color: transparent;\n }\n}\n\n.section {\n pointer-events: var(--section-pointer-events);\n position: absolute;\n z-index: 1;\n inset-inline-start: var(--section-start);\n inset-inline-end: var(--section-end);\n bottom: var(--section-y);\n top: var(--section-y);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--section-size);\n border-radius: var(--section-border-radius);\n color: var(--input-section-color, var(--mantine-color-dimmed));\n\n &[data-position='right'] {\n --section-pointer-events: var(--input-right-section-pointer-events);\n --section-end: var(--right-section-end);\n --section-size: var(--input-right-section-size);\n --section-border-radius: var(--right-section-border-radius);\n\n &:has([data-combined-clear-section]) {\n .wrapper[data-size='xs'] & {\n --section-size: 41px;\n }\n\n .wrapper[data-size='sm'] & {\n --section-size: 50px;\n }\n\n .wrapper[data-size='md'] & {\n --section-size: 60px;\n }\n\n .wrapper[data-size='lg'] & {\n --section-size: 72px;\n }\n\n .wrapper[data-size='xl'] & {\n --section-size: 89px;\n }\n }\n }\n\n &[data-position='left'] {\n --section-pointer-events: var(--input-left-section-pointer-events);\n --section-start: var(--left-section-start);\n --section-size: var(--input-left-section-size);\n --section-border-radius: var(--left-section-border-radius);\n }\n}\n\n/ ----- Input.Placeholder ----- /\n.placeholder {\n color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n [data-error] & {\n --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n }\n}\n\n/ ----- Input.Wrapper ----- */\n.root {\n line-height: var(--mantine-line-height);\n}\n\n.label {\n display: inline-block;\n font-weight: var(--mantine-font-weight-medium);\n overflow-wrap: break-word;\n cursor: default;\n -webkit-tap-highlight-color: transparent;\n font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n word-wrap: break-word;\n line-height: 1.2;\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.error {\n color: var(--mantine-color-error);\n font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n color: var(--mantine-color-dimmed);\n font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}
1	+ {"version":3,"file":"Input.module.mjs","names":[],"sources":["../../../src/components/Input/Input.module.css"],"sourcesContent":[".wrapper {\n position: relative;\n margin-top: var(--input-margin-top, 0rem);\n margin-bottom: var(--input-margin-bottom, 0rem);\n\n --input-height-xs: 30px;\n --input-height-sm: 36px;\n --input-height-md: 42px;\n --input-height-lg: 50px;\n --input-height-xl: 60px;\n\n --input-padding-y-xs: 5px;\n --input-padding-y-sm: 6px;\n --input-padding-y-md: 8px;\n --input-padding-y-lg: 10px;\n --input-padding-y-xl: 13px;\n\n --input-height: var(--input-height-sm);\n --input-radius: var(--mantine-radius-default);\n\n --input-cursor: text;\n --input-line-height: calc(var(--input-height) - rem(2px));\n --input-padding: calc(var(--input-height) / 3);\n --input-padding-inline-start: var(--input-padding);\n --input-padding-inline-end: var(--input-padding);\n --input-placeholder-color: var(--mantine-color-placeholder);\n --input-color: var(--mantine-color-text);\n --input-disabled-bg: var(--mantine-color-disabled);\n --input-disabled-color: var(--mantine-color-disabled-color);\n\n --input-left-section-size: var(--input-left-section-width, calc(var(--input-height) - rem(2px)));\n\n --input-right-section-size: var(\n --input-right-section-width,\n calc(var(--input-height) - rem(2px))\n );\n\n --input-size: var(--input-height);\n\n --section-y: 1px;\n --left-section-start: 1px;\n --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n\n --right-section-end: 1px;\n --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n\n &[data-variant='unstyled'] {\n --input-padding: 0;\n --input-padding-y: 0;\n --input-padding-inline-start: 0;\n --input-padding-inline-end: 0;\n }\n\n &[data-pointer] {\n --input-cursor: pointer;\n }\n\n &[data-with-bottom-section] {\n --input-bottom-section-height: 28px;\n }\n\n &[data-multiline] {\n --input-padding-y-xs: 4.5px;\n --input-padding-y-sm: 5.5px;\n --input-padding-y-md: 7px;\n --input-padding-y-lg: 9.5px;\n --input-padding-y-xl: 13px;\n\n --input-size: auto;\n --input-line-height: var(--mantine-line-height);\n }\n\n &[data-with-left-section] {\n --input-padding-inline-start: var(--input-left-section-size);\n }\n\n &[data-with-right-section] {\n --input-padding-inline-end: var(--input-right-section-size);\n\n &:has([data-combined-clear-section]) {\n .wrapper[data-size='xs'] & {\n --input-padding-inline-end: 41px;\n }\n\n .wrapper[data-size='sm'] & {\n --input-padding-inline-end: 50px;\n }\n\n .wrapper[data-size='md'] & {\n --input-padding-inline-end: 60px;\n }\n\n .wrapper[data-size='lg'] & {\n --input-padding-inline-end: 72px;\n }\n\n .wrapper[data-size='xl'] & {\n --input-padding-inline-end: 89px;\n }\n }\n }\n\n @mixin light {\n &[data-variant='default'] {\n --input-bd: var(--mantine-color-gray-4);\n --input-bg: var(--mantine-color-white);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='filled'] {\n --input-bd: transparent;\n --input-bg: var(--mantine-color-gray-1);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='unstyled'] {\n --input-bd: transparent;\n --input-bg: transparent;\n --input-bd-focus: transparent;\n }\n }\n\n @mixin dark {\n &[data-variant='default'] {\n --input-bd: var(--mantine-color-dark-4);\n --input-bg: var(--mantine-color-dark-6);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='filled'] {\n --input-bd: transparent;\n --input-bg: var(--mantine-color-dark-5);\n --input-bd-focus: var(--mantine-primary-color-filled);\n }\n\n &[data-variant='unstyled'] {\n --input-bd: transparent;\n --input-bg: transparent;\n --input-bd-focus: transparent;\n }\n }\n\n [data-mantine-color-scheme] &[data-error] {\n &:not([data-variant='unstyled']) {\n --input-bd: var(--mantine-color-error);\n }\n\n --input-color: var(--mantine-color-error);\n --input-placeholder-color: var(--mantine-color-error);\n --input-section-color: var(--mantine-color-error);\n }\n\n @mixin where-rtl {\n --left-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n --right-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n }\n\n &[dir='ltr'] {\n --left-section-border-radius: var(--input-radius) 0 0 var(--input-radius);\n --right-section-border-radius: 0 var(--input-radius) var(--input-radius) 0;\n }\n}\n\n.input {\n -webkit-tap-highlight-color: transparent;\n appearance: none;\n resize: var(--input-resize, none);\n display: block;\n width: 100%;\n transition: border-color 100ms ease;\n\n text-align: var(--input-text-align, start);\n color: var(--input-color);\n border: rem(1px) solid var(--input-bd);\n background-color: var(--input-bg);\n font-family: var(--input-font-family, var(--mantine-font-family));\n height: var(--input-size);\n min-height: var(--input-height);\n line-height: var(--input-line-height);\n font-size: var(--_input-fz, var(--input-fz, var(--mantine-font-size-md)));\n border-radius: var(--input-radius);\n padding-inline-start: var(--input-padding-inline-start);\n padding-inline-end: var(--input-padding-inline-end);\n padding-top: var(--input-padding-y, 0rem);\n padding-bottom: var(--input-padding-y, 0rem);\n cursor: var(--input-cursor);\n overflow: var(--input-overflow);\n\n /* Used as data attribute in Textarea component, does not have associated prop on the Input component /\n &[data-no-overflow] {\n --input-overflow: hidden;\n }\n\n / Used as data attribute in JsonInput component, does not have associated prop on the Input component /\n &[data-monospace] {\n --input-font-family: var(--mantine-font-family-monospace);\n --_input-fz: calc(var(--input-fz) - rem(2px));\n }\n\n &:focus,\n &:focus-within {\n outline: none;\n --input-bd: var(--input-bd-focus);\n\n [data-error] & {\n --input-bd: var(--mantine-color-error);\n }\n }\n\n &::placeholder {\n color: var(--input-placeholder-color);\n opacity: 1;\n }\n\n &::-webkit-inner-spin-button,\n &::-webkit-outer-spin-button,\n &::-webkit-search-decoration,\n &::-webkit-search-cancel-button,\n &::-webkit-search-results-button,\n &::-webkit-search-results-decoration {\n appearance: none;\n }\n\n &[type='number'] {\n -moz-appearance: textfield;\n }\n\n &:disabled,\n &[data-disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--input-disabled-bg);\n color: var(--input-disabled-color);\n }\n\n / Required to be a separate selector to work in Firefox, can be merged with &:disabled once :has is supported /\n &:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--input-disabled-bg);\n color: var(--input-disabled-color);\n }\n\n &[readonly] {\n caret-color: transparent;\n }\n\n [data-with-bottom-section] & {\n padding-bottom: calc(var(--input-padding-y, 0rem) + var(--input-bottom-section-height));\n }\n}\n\n.bottomSection {\n position: absolute;\n bottom: 1px;\n left: 1px;\n right: 1px;\n height: var(--input-bottom-section-height);\n display: flex;\n align-items: center;\n justify-content: flex-start;\n padding-inline: var(--input-padding);\n border-radius: 0 0 var(--input-radius) var(--input-radius);\n pointer-events: all;\n color: var(--mantine-color-dimmed);\n font-size: var(--input-fz, var(--mantine-font-size-sm));\n}\n\n.section {\n pointer-events: var(--section-pointer-events);\n position: absolute;\n z-index: 1;\n inset-inline-start: var(--section-start);\n inset-inline-end: var(--section-end);\n bottom: var(--section-y);\n top: var(--section-y);\n display: flex;\n align-items: center;\n justify-content: center;\n width: var(--section-size);\n border-radius: var(--section-border-radius);\n color: var(--input-section-color, var(--mantine-color-dimmed));\n\n &[data-position='right'] {\n --section-pointer-events: var(--input-right-section-pointer-events);\n --section-end: var(--right-section-end);\n --section-size: var(--input-right-section-size);\n --section-border-radius: var(--right-section-border-radius);\n\n &:has([data-combined-clear-section]) {\n .wrapper[data-size='xs'] & {\n --section-size: 41px;\n }\n\n .wrapper[data-size='sm'] & {\n --section-size: 50px;\n }\n\n .wrapper[data-size='md'] & {\n --section-size: 60px;\n }\n\n .wrapper[data-size='lg'] & {\n --section-size: 72px;\n }\n\n .wrapper[data-size='xl'] & {\n --section-size: 89px;\n }\n }\n }\n\n &[data-position='left'] {\n --section-pointer-events: var(--input-left-section-pointer-events);\n --section-start: var(--left-section-start);\n --section-size: var(--input-left-section-size);\n --section-border-radius: var(--left-section-border-radius);\n }\n}\n\n/ ----- Input.Placeholder ----- /\n.placeholder {\n color: var(--input-placeholder-color, var(--mantine-color-placeholder));\n\n [data-error] & {\n --input-placeholder-color: var(--input-color, var(--mantine-color-placeholder));\n }\n}\n\n/ ----- Input.Wrapper ----- */\n.root {\n line-height: var(--mantine-line-height);\n}\n\n.label {\n display: inline-block;\n font-weight: var(--mantine-font-weight-medium);\n overflow-wrap: break-word;\n cursor: default;\n -webkit-tap-highlight-color: transparent;\n font-size: var(--input-label-size, var(--mantine-font-size-sm));\n}\n\n.required {\n color: var(--input-asterisk-color, var(--mantine-color-error));\n}\n\n.error,\n.description {\n word-wrap: break-word;\n line-height: 1.2;\n display: block;\n margin: 0;\n padding: 0;\n}\n\n.error {\n color: var(--mantine-color-error);\n font-size: var(--input-error-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n\n.description {\n color: var(--mantine-color-dimmed);\n font-size: var(--input-description-size, calc(var(--mantine-font-size-sm) - rem(2px)));\n}\n"],"mappings":""}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"Menu.context.mjs","names":[],"sources":["../../../src/components/Menu/Menu.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { MenuFactory } from './Menu';\n\nexport interface MenuContextValue {\n toggleDropdown: () => void;\n closeDropdownImmediately: () => void;\n closeDropdown: () => void;\n openDropdown: () => void;\n getItemIndex: (node: HTMLButtonElement) => number \| null;\n closeOnItemClick: boolean \| undefined;\n loop: boolean \| undefined;\n trigger: 'click' \| 'hover' \| 'click-hover' \| undefined;\n opened: boolean;\n unstyled: boolean \| undefined;\n getStyles: GetStylesApi<MenuFactory>;\n menuItemTabIndex: -1 \| 0 \| undefined;\n openedViaClick: boolean;\n setOpenedViaClick: (value: boolean) => void;\n withInitialFocusPlaceholder: boolean \| undefined;\n registerOpenSub: (closeFn: () => void) => () => void;\n}\n\nexport const [MenuContextProvider, useMenuContext] = createSafeContext<MenuContextValue>(\n 'Menu component was not found in the tree'\n);\n"],"mappings":";;;~~AAsBA~~,MAAa,CAAC,qBAAqB,kBAAkB,kBACnD,0CACF"}
1	+ {"version":3,"file":"Menu.context.mjs","names":[],"sources":["../../../src/components/Menu/Menu.context.ts"],"sourcesContent":["import { createSafeContext, GetStylesApi } from '../../core';\nimport type { MenuFactory } from './Menu';\n\nexport interface MenuContextValue {\n toggleDropdown: () => void;\n closeDropdownImmediately: () => void;\n closeDropdown: () => void;\n openDropdown: () => void;\n getItemIndex: (node: HTMLButtonElement) => number \| null;\n closeOnItemClick: boolean \| undefined;\n loop: boolean \| undefined;\n trigger: 'click' \| 'hover' \| 'click-hover' \| undefined;\n opened: boolean;\n unstyled: boolean \| undefined;\n getStyles: GetStylesApi<MenuFactory>;\n menuItemTabIndex: -1 \| 0 \| undefined;\n openedViaClick: boolean;\n setOpenedViaClick: (value: boolean) => void;\n withInitialFocusPlaceholder: boolean \| undefined;\n registerOpenSub: (closeFn: () => void) => () => void;\n hasSearch: boolean;\n registerSearch: () => () => void;\n searchExitClearRef: React.RefObject<(() => void) \| null>;\n alignItemsLabels: 'all' \| 'with-indicators' \| 'none';\n checkIcon: React.ReactNode;\n}\n\nexport const [MenuContextProvider, useMenuContext] = createSafeContext<MenuContextValue>(\n 'Menu component was not found in the tree'\n);\n"],"mappings":";;;AA2BA,MAAa,CAAC,qBAAqB,kBAAkB,kBACnD,0CACF"}