@mantine/core 9.4.0 → 9.4.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 (27) hide show
  1. package/cjs/components/Collapse/Collapse.cjs +4 -0
  2. package/cjs/components/Collapse/Collapse.cjs.map +1 -1
  3. package/cjs/components/Menu/MenuDropdown/MenuDropdown.cjs +1 -0
  4. package/cjs/components/Menu/MenuDropdown/MenuDropdown.cjs.map +1 -1
  5. package/cjs/components/RollingNumber/get-digit-parts.cjs +2 -1
  6. package/cjs/components/RollingNumber/get-digit-parts.cjs.map +1 -1
  7. package/cjs/components/Slider/Slider.module.cjs.map +1 -1
  8. package/cjs/components/Textarea/Autosize.cjs +1 -0
  9. package/cjs/components/Textarea/Autosize.cjs.map +1 -1
  10. package/cjs/utils/Floating/FloatingArrow/FloatingArrow.cjs +1 -0
  11. package/cjs/utils/Floating/FloatingArrow/FloatingArrow.cjs.map +1 -1
  12. package/esm/components/Collapse/Collapse.mjs +4 -0
  13. package/esm/components/Collapse/Collapse.mjs.map +1 -1
  14. package/esm/components/Menu/MenuDropdown/MenuDropdown.mjs +1 -0
  15. package/esm/components/Menu/MenuDropdown/MenuDropdown.mjs.map +1 -1
  16. package/esm/components/RollingNumber/get-digit-parts.mjs +2 -1
  17. package/esm/components/RollingNumber/get-digit-parts.mjs.map +1 -1
  18. package/esm/components/Slider/Slider.module.mjs.map +1 -1
  19. package/esm/components/Textarea/Autosize.mjs +1 -0
  20. package/esm/components/Textarea/Autosize.mjs.map +1 -1
  21. package/esm/utils/Floating/FloatingArrow/FloatingArrow.mjs +1 -0
  22. package/esm/utils/Floating/FloatingArrow/FloatingArrow.mjs.map +1 -1
  23. package/package.json +2 -2
  24. package/styles/Slider.css +4 -0
  25. package/styles/Slider.layer.css +4 -0
  26. package/styles.css +4 -0
  27. package/styles.layer.css +4 -0
@@ -35,11 +35,15 @@ const Collapse = require_factory.factory((props) => {
35
35
  mode: expanded ? "visible" : "hidden",
36
36
  children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
37
37
  ...others,
38
+ style,
39
+ ref,
38
40
  children
39
41
  })
40
42
  });
41
43
  return expanded ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Box.Box, {
42
44
  ...others,
45
+ style,
46
+ ref,
43
47
  children
44
48
  }) : null;
45
49
  }
@@ -1 +1 @@
1
- {"version":3,"file":"Collapse.cjs","names":["factory","useProps","useMantineEnv","useMantineTheme","useHorizontalCollapse","useCollapse","Activity","Box","getStyleObject"],"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,WAAWA,gBAAAA,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACDC,kBAAAA,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAMC,wBAAAA,cAAc;CAC1B,MAAM,QAAQC,6BAAAA,gBAAgB;CAC9B,MAAM,sBAAA,GAAA,eAAA,iBAAA,CAAsC;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAeC,eAAAA,wBAAwBC,eAAAA,YAAAA,CAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,QAAQ,QAAQ,QAClC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,MAAAA,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,GAAI;IAAS;GAAc,CAAA;EACxB,CAAA;EAGd,OAAO,WAAW,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,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,iBAAA,GAAA,kBAAA,IAAA,CAACD,MAAAA,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAE/E,UAAU;CAGZ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAGC,yBAAAA,eAAe,OAAO,KAAK;GAChC;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}
1
+ {"version":3,"file":"Collapse.cjs","names":["factory","useProps","useMantineEnv","useMantineTheme","useHorizontalCollapse","useCollapse","Activity","Box","getStyleObject"],"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} style={style} ref={ref}>\n {children}\n </Box>\n </Activity>\n );\n }\n\n return expanded ? (\n <Box {...others} style={style} ref={ref}>\n {children}\n </Box>\n ) : 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,WAAWA,gBAAAA,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,KACA,aACA,GAAG,WACDC,kBAAAA,SAAS,YAAY,cAAc,KAAK;CAE5C,MAAM,MAAMC,wBAAAA,cAAc;CAC1B,MAAM,QAAQC,6BAAAA,gBAAgB;CAC9B,MAAM,sBAAA,GAAA,eAAA,iBAAA,CAAsC;CAE5C,MAAM,YADe,MAAM,uBAAuB,qBAAqB,SACvC,IAAI;CAGpC,MAAM,YAFO,gBAAgB,eAAeC,eAAAA,wBAAwBC,eAAAA,YAAAA,CAE9C;EACpB;EACA,oBAAoB;EACpB;EACA;EACA;EACA,aAAa;CACf,CAAC;CAED,IAAI,aAAa,GAAG;EAClB,IAAI,gBAAgB,QAAQ,QAAQ,QAClC,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,MAAAA,UAAD;GAAU,MAAM,WAAW,YAAY;aACrC,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;IAAK,GAAI;IAAe;IAAY;IACjC;GACE,CAAA;EACG,CAAA;EAId,OAAO,WACL,iBAAA,GAAA,kBAAA,IAAA,CAACA,YAAAA,KAAD;GAAK,GAAI;GAAe;GAAY;GACjC;EACE,CAAA,IACH;CACN;CAEA,MAAM,WAAW,SAAS,UAAU;CAEpC,IAAI;CACJ,IAAI,gBAAgB,OAClB,UAAU,WAAW,OAAO;MACvB,IAAI,gBAAgB,MACzB,UAAU,iBAAA,GAAA,kBAAA,IAAA,CAACD,MAAAA,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAE/E,UAAU;CAGZ,OACE,iBAAA,GAAA,kBAAA,IAAA,CAACC,YAAAA,KAAD;EACE,GAAI;EACJ,GAAI,SAAS,iBAAiB;GAC5B,OAAO;IACL,SAAS,YAAY,CAAC,iBAAiB,IAAI;IAC3C,YAAY,iBAAiB,WAAW,SAAS,KAAK,6BAA6B;IACnF,GAAGC,yBAAAA,eAAe,OAAO,KAAK;GAChC;GACA;EACF,CAAC;YAEA;CACE,CAAA;AAET,CAAC;AAED,SAAS,cAAc"}
@@ -47,6 +47,7 @@ const MenuDropdown = require_factory.factory((props) => {
47
47
  "data-menu-dropdown": true,
48
48
  onKeyDown: handleKeyDown,
49
49
  children: [ctx.withInitialFocusPlaceholder && !ctx.hasSearch && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
50
+ role: "presentation",
50
51
  tabIndex: -1,
51
52
  "data-autofocus": true,
52
53
  "data-mantine-stop-propagation": true,
@@ -1 +1 @@
1
- {"version":3,"file":"MenuDropdown.cjs","names":["factory","useProps","useMenuContext","useMenuTypeAhead","createEventHandler","Popover","classes"],"sources":["../../../../src/components/Menu/MenuDropdown/MenuDropdown.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n createEventHandler,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { useMenuTypeAhead } from '../use-menu-type-ahead';\nimport classes from '../Menu.module.css';\n\nexport type MenuDropdownStylesNames = 'dropdown';\n\nexport interface MenuDropdownProps\n extends BoxProps, CompoundStylesApiProps<MenuDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuDropdownFactory = Factory<{\n props: MenuDropdownProps;\n ref: HTMLDivElement;\n stylesNames: MenuDropdownStylesNames;\n compound: true;\n}>;\n\nexport const MenuDropdown = factory<MenuDropdownFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n children,\n ref,\n ...others\n } = useProps('MenuDropdown', null, props);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const ctx = useMenuContext();\n\n const typeAhead = useMenuTypeAhead({\n enabled: !ctx.hasSearch,\n opened: ctx.opened,\n getDropdown: () => wrapperRef.current,\n });\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n typeAhead(event);\n if (event.defaultPrevented || ctx.hasSearch) {\n return;\n }\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n wrapperRef.current\n ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not(:disabled)')[0]\n ?.focus();\n }\n });\n\n const handleMouseEnter = createEventHandler<any>(\n onMouseEnter,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.openDropdown()\n );\n\n const handleMouseLeave = createEventHandler<any>(\n onMouseLeave,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.closeDropdown()\n );\n\n return (\n <Popover.Dropdown\n {...others}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"menu\"\n aria-orientation=\"vertical\"\n ref={useMergedRef(ref, wrapperRef)}\n {...ctx.getStyles('dropdown', {\n className,\n style,\n styles,\n classNames,\n withStaticClass: false,\n })}\n tabIndex={-1}\n data-menu-dropdown\n onKeyDown={handleKeyDown}\n >\n {ctx.withInitialFocusPlaceholder && !ctx.hasSearch && (\n <div tabIndex={-1} data-autofocus data-mantine-stop-propagation style={{ outline: 0 }} />\n )}\n {children}\n </Popover.Dropdown>\n );\n});\n\nMenuDropdown.classes = classes;\nMenuDropdown.displayName = '@mantine/core/MenuDropdown';\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,eAAeA,gBAAAA,SAA8B,UAAU;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,WACA,UACA,KACA,GAAG,WACDC,kBAAAA,SAAS,gBAAgB,MAAM,KAAK;CAExC,MAAM,cAAA,GAAA,MAAA,OAAA,CAAoC,IAAI;CAC9C,MAAM,MAAMC,qBAAAA,eAAe;CAE3B,MAAM,YAAYC,4BAAAA,iBAAiB;EACjC,SAAS,CAAC,IAAI;EACd,QAAQ,IAAI;EACZ,mBAAmB,WAAW;CAChC,CAAC;CAED,MAAM,gBAAgBC,6BAAAA,mBAAwB,YAAY,UAAU;EAClE,UAAU,KAAK;EACf,IAAI,MAAM,oBAAoB,IAAI,WAChC;EAEF,IAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;GACxD,MAAM,eAAe;GACrB,WAAW,SACP,iBAAoC,iCAAiC,CAAC,CAAC,EAAE,EACzE,MAAM;EACZ;CACF,CAAC;CAED,MAAM,mBAAmBA,6BAAAA,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,aAAa,CACvF;CAEA,MAAM,mBAAmBA,6BAAAA,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,cAAc,CACxF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,QAAQ,UAAT;EACE,GAAI;EACJ,cAAc;EACd,cAAc;EACd,MAAK;EACL,oBAAiB;EACjB,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,UAAU;EACjC,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;EACA,WAAW;YAhBb,CAkBG,IAAI,+BAA+B,CAAC,IAAI,aACvC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GAAK,UAAU;GAAI,kBAAA;GAAe,iCAAA;GAA8B,OAAO,EAAE,SAAS,EAAE;EAAI,CAAA,GAEzF,QACe;;AAEtB,CAAC;AAED,aAAa,UAAUC,oBAAAA;AACvB,aAAa,cAAc"}
1
+ {"version":3,"file":"MenuDropdown.cjs","names":["factory","useProps","useMenuContext","useMenuTypeAhead","createEventHandler","Popover","classes"],"sources":["../../../../src/components/Menu/MenuDropdown/MenuDropdown.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n createEventHandler,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { useMenuTypeAhead } from '../use-menu-type-ahead';\nimport classes from '../Menu.module.css';\n\nexport type MenuDropdownStylesNames = 'dropdown';\n\nexport interface MenuDropdownProps\n extends BoxProps, CompoundStylesApiProps<MenuDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuDropdownFactory = Factory<{\n props: MenuDropdownProps;\n ref: HTMLDivElement;\n stylesNames: MenuDropdownStylesNames;\n compound: true;\n}>;\n\nexport const MenuDropdown = factory<MenuDropdownFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n children,\n ref,\n ...others\n } = useProps('MenuDropdown', null, props);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const ctx = useMenuContext();\n\n const typeAhead = useMenuTypeAhead({\n enabled: !ctx.hasSearch,\n opened: ctx.opened,\n getDropdown: () => wrapperRef.current,\n });\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n typeAhead(event);\n if (event.defaultPrevented || ctx.hasSearch) {\n return;\n }\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n wrapperRef.current\n ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not(:disabled)')[0]\n ?.focus();\n }\n });\n\n const handleMouseEnter = createEventHandler<any>(\n onMouseEnter,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.openDropdown()\n );\n\n const handleMouseLeave = createEventHandler<any>(\n onMouseLeave,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.closeDropdown()\n );\n\n return (\n <Popover.Dropdown\n {...others}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"menu\"\n aria-orientation=\"vertical\"\n ref={useMergedRef(ref, wrapperRef)}\n {...ctx.getStyles('dropdown', {\n className,\n style,\n styles,\n classNames,\n withStaticClass: false,\n })}\n tabIndex={-1}\n data-menu-dropdown\n onKeyDown={handleKeyDown}\n >\n {ctx.withInitialFocusPlaceholder && !ctx.hasSearch && (\n <div\n role=\"presentation\"\n tabIndex={-1}\n data-autofocus\n data-mantine-stop-propagation\n style={{ outline: 0 }}\n />\n )}\n {children}\n </Popover.Dropdown>\n );\n});\n\nMenuDropdown.classes = classes;\nMenuDropdown.displayName = '@mantine/core/MenuDropdown';\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,eAAeA,gBAAAA,SAA8B,UAAU;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,WACA,UACA,KACA,GAAG,WACDC,kBAAAA,SAAS,gBAAgB,MAAM,KAAK;CAExC,MAAM,cAAA,GAAA,MAAA,OAAA,CAAoC,IAAI;CAC9C,MAAM,MAAMC,qBAAAA,eAAe;CAE3B,MAAM,YAAYC,4BAAAA,iBAAiB;EACjC,SAAS,CAAC,IAAI;EACd,QAAQ,IAAI;EACZ,mBAAmB,WAAW;CAChC,CAAC;CAED,MAAM,gBAAgBC,6BAAAA,mBAAwB,YAAY,UAAU;EAClE,UAAU,KAAK;EACf,IAAI,MAAM,oBAAoB,IAAI,WAChC;EAEF,IAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;GACxD,MAAM,eAAe;GACrB,WAAW,SACP,iBAAoC,iCAAiC,CAAC,CAAC,EAAE,EACzE,MAAM;EACZ;CACF,CAAC;CAED,MAAM,mBAAmBA,6BAAAA,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,aAAa,CACvF;CAEA,MAAM,mBAAmBA,6BAAAA,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,cAAc,CACxF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAACC,gBAAAA,QAAQ,UAAT;EACE,GAAI;EACJ,cAAc;EACd,cAAc;EACd,MAAK;EACL,oBAAiB;EACjB,MAAA,GAAA,eAAA,aAAA,CAAkB,KAAK,UAAU;EACjC,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;EACA,WAAW;YAhBb,CAkBG,IAAI,+BAA+B,CAAC,IAAI,aACvC,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;GACE,MAAK;GACL,UAAU;GACV,kBAAA;GACA,iCAAA;GACA,OAAO,EAAE,SAAS,EAAE;EACrB,CAAA,GAEF,QACe;;AAEtB,CAAC;AAED,aAAa,UAAUC,oBAAAA;AACvB,aAAa,cAAc"}
@@ -27,8 +27,9 @@ function getDigitParts({ value, decimalScale, fixedDecimalScale }) {
27
27
  const dotIdx = str.indexOf(".");
28
28
  const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;
29
29
  const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : "";
30
+ const roundedToZero = !/[1-9]/.test(str);
30
31
  return {
31
- negative: value < 0,
32
+ negative: value < 0 && !roundedToZero,
32
33
  intDigits: intStr.split(""),
33
34
  fracDigits: fracStr ? fracStr.split("") : [],
34
35
  hasDecimal: dotIdx >= 0
@@ -1 +1 @@
1
- {"version":3,"file":"get-digit-parts.cjs","names":[],"sources":["../../../src/components/RollingNumber/get-digit-parts.ts"],"sourcesContent":["export interface DigitParts {\n negative: boolean;\n intDigits: string[];\n fracDigits: string[];\n hasDecimal: boolean;\n}\n\nexport interface GetDigitPartsInput {\n value: number;\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n}\n\nconst PLAIN_FORMAT = new Intl.NumberFormat('en-US', {\n useGrouping: false,\n maximumFractionDigits: 20,\n});\n\nfunction toPlainString(num: number, decimalScale?: number): string {\n if (!Number.isFinite(num)) {\n return '0';\n }\n\n if (decimalScale !== undefined) {\n return new Intl.NumberFormat('en-US', {\n useGrouping: false,\n minimumFractionDigits: decimalScale,\n maximumFractionDigits: decimalScale,\n }).format(num);\n }\n\n const str = String(num);\n if (!str.includes('e') && !str.includes('E')) {\n return str;\n }\n\n return PLAIN_FORMAT.format(num);\n}\n\nexport function getDigitParts({\n value,\n decimalScale,\n fixedDecimalScale,\n}: GetDigitPartsInput): DigitParts {\n const abs = Math.abs(value);\n let str = toPlainString(abs, decimalScale);\n\n if (!fixedDecimalScale && decimalScale !== undefined) {\n const parts = str.split('.');\n if (parts[1]) {\n const trimmed = parts[1].replace(/0+$/, '');\n str = trimmed ? `${parts[0]}.${trimmed}` : parts[0];\n }\n }\n\n const dotIdx = str.indexOf('.');\n const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;\n const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : '';\n\n return {\n negative: value < 0,\n intDigits: intStr.split(''),\n fracDigits: fracStr ? fracStr.split('') : [],\n hasDecimal: dotIdx >= 0,\n };\n}\n"],"mappings":";;AAaA,MAAM,eAAe,IAAI,KAAK,aAAa,SAAS;CAClD,aAAa;CACb,uBAAuB;AACzB,CAAC;AAED,SAAS,cAAc,KAAa,cAA+B;CACjE,IAAI,CAAC,OAAO,SAAS,GAAG,GACtB,OAAO;CAGT,IAAI,iBAAiB,KAAA,GACnB,OAAO,IAAI,KAAK,aAAa,SAAS;EACpC,aAAa;EACb,uBAAuB;EACvB,uBAAuB;CACzB,CAAC,CAAC,CAAC,OAAO,GAAG;CAGf,MAAM,MAAM,OAAO,GAAG;CACtB,IAAI,CAAC,IAAI,SAAS,GAAG,KAAK,CAAC,IAAI,SAAS,GAAG,GACzC,OAAO;CAGT,OAAO,aAAa,OAAO,GAAG;AAChC;AAEA,SAAgB,cAAc,EAC5B,OACA,cACA,qBACiC;CAEjC,IAAI,MAAM,cADE,KAAK,IAAI,KACK,GAAG,YAAY;CAEzC,IAAI,CAAC,qBAAqB,iBAAiB,KAAA,GAAW;EACpD,MAAM,QAAQ,IAAI,MAAM,GAAG;EAC3B,IAAI,MAAM,IAAI;GACZ,MAAM,UAAU,MAAM,EAAE,CAAC,QAAQ,OAAO,EAAE;GAC1C,MAAM,UAAU,GAAG,MAAM,GAAG,GAAG,YAAY,MAAM;EACnD;CACF;CAEA,MAAM,SAAS,IAAI,QAAQ,GAAG;CAC9B,MAAM,SAAS,UAAU,IAAI,IAAI,MAAM,GAAG,MAAM,IAAI;CACpD,MAAM,UAAU,UAAU,IAAI,IAAI,MAAM,SAAS,CAAC,IAAI;CAEtD,OAAO;EACL,UAAU,QAAQ;EAClB,WAAW,OAAO,MAAM,EAAE;EAC1B,YAAY,UAAU,QAAQ,MAAM,EAAE,IAAI,CAAC;EAC3C,YAAY,UAAU;CACxB;AACF"}
1
+ {"version":3,"file":"get-digit-parts.cjs","names":[],"sources":["../../../src/components/RollingNumber/get-digit-parts.ts"],"sourcesContent":["export interface DigitParts {\n negative: boolean;\n intDigits: string[];\n fracDigits: string[];\n hasDecimal: boolean;\n}\n\nexport interface GetDigitPartsInput {\n value: number;\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n}\n\nconst PLAIN_FORMAT = new Intl.NumberFormat('en-US', {\n useGrouping: false,\n maximumFractionDigits: 20,\n});\n\nfunction toPlainString(num: number, decimalScale?: number): string {\n if (!Number.isFinite(num)) {\n return '0';\n }\n\n if (decimalScale !== undefined) {\n return new Intl.NumberFormat('en-US', {\n useGrouping: false,\n minimumFractionDigits: decimalScale,\n maximumFractionDigits: decimalScale,\n }).format(num);\n }\n\n const str = String(num);\n if (!str.includes('e') && !str.includes('E')) {\n return str;\n }\n\n return PLAIN_FORMAT.format(num);\n}\n\nexport function getDigitParts({\n value,\n decimalScale,\n fixedDecimalScale,\n}: GetDigitPartsInput): DigitParts {\n const abs = Math.abs(value);\n let str = toPlainString(abs, decimalScale);\n\n if (!fixedDecimalScale && decimalScale !== undefined) {\n const parts = str.split('.');\n if (parts[1]) {\n const trimmed = parts[1].replace(/0+$/, '');\n str = trimmed ? `${parts[0]}.${trimmed}` : parts[0];\n }\n }\n\n const dotIdx = str.indexOf('.');\n const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;\n const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : '';\n\n const roundedToZero = !/[1-9]/.test(str);\n\n return {\n negative: value < 0 && !roundedToZero,\n intDigits: intStr.split(''),\n fracDigits: fracStr ? fracStr.split('') : [],\n hasDecimal: dotIdx >= 0,\n };\n}\n"],"mappings":";;AAaA,MAAM,eAAe,IAAI,KAAK,aAAa,SAAS;CAClD,aAAa;CACb,uBAAuB;AACzB,CAAC;AAED,SAAS,cAAc,KAAa,cAA+B;CACjE,IAAI,CAAC,OAAO,SAAS,GAAG,GACtB,OAAO;CAGT,IAAI,iBAAiB,KAAA,GACnB,OAAO,IAAI,KAAK,aAAa,SAAS;EACpC,aAAa;EACb,uBAAuB;EACvB,uBAAuB;CACzB,CAAC,CAAC,CAAC,OAAO,GAAG;CAGf,MAAM,MAAM,OAAO,GAAG;CACtB,IAAI,CAAC,IAAI,SAAS,GAAG,KAAK,CAAC,IAAI,SAAS,GAAG,GACzC,OAAO;CAGT,OAAO,aAAa,OAAO,GAAG;AAChC;AAEA,SAAgB,cAAc,EAC5B,OACA,cACA,qBACiC;CAEjC,IAAI,MAAM,cADE,KAAK,IAAI,KACK,GAAG,YAAY;CAEzC,IAAI,CAAC,qBAAqB,iBAAiB,KAAA,GAAW;EACpD,MAAM,QAAQ,IAAI,MAAM,GAAG;EAC3B,IAAI,MAAM,IAAI;GACZ,MAAM,UAAU,MAAM,EAAE,CAAC,QAAQ,OAAO,EAAE;GAC1C,MAAM,UAAU,GAAG,MAAM,GAAG,GAAG,YAAY,MAAM;EACnD;CACF;CAEA,MAAM,SAAS,IAAI,QAAQ,GAAG;CAC9B,MAAM,SAAS,UAAU,IAAI,IAAI,MAAM,GAAG,MAAM,IAAI;CACpD,MAAM,UAAU,UAAU,IAAI,IAAI,MAAM,SAAS,CAAC,IAAI;CAEtD,MAAM,gBAAgB,CAAC,QAAQ,KAAK,GAAG;CAEvC,OAAO;EACL,UAAU,QAAQ,KAAK,CAAC;EACxB,WAAW,OAAO,MAAM,EAAE;EAC1B,YAAY,UAAU,QAAQ,MAAM,EAAE,IAAI,CAAC;EAC3C,YAAY,UAAU;CACxB;AACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.module.cjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":[".root {\n --slider-size-xs: 4px;\n --slider-size-sm: 6px;\n --slider-size-md: 8px;\n --slider-size-lg: 10px;\n --slider-size-xl: 12px;\n\n --slider-size: var(--slider-size-md);\n --slider-radius: 1000px;\n --slider-color: var(--mantine-primary-color-filled);\n --slider-track-disabled-bg: var(--mantine-color-disabled);\n\n -webkit-tap-highlight-color: transparent;\n outline: none;\n height: calc(var(--slider-size) * 2);\n padding-inline: var(--slider-size);\n display: flex;\n flex-direction: column;\n align-items: center;\n touch-action: none;\n position: relative;\n\n @mixin light {\n --slider-track-bg: var(--mantine-color-gray-2);\n }\n\n @mixin dark {\n --slider-track-bg: var(--mantine-color-dark-4);\n }\n\n &[data-orientation='vertical'] {\n width: calc(var(--slider-size) * 2);\n height: 200px;\n padding-inline: 0;\n padding-block: var(--slider-size);\n }\n}\n\n.label {\n position: absolute;\n top: -36px;\n font-size: var(--mantine-font-size-xs);\n color: var(--mantine-color-white);\n padding: calc(var(--mantine-spacing-xs) / 2);\n border-radius: var(--mantine-radius-sm);\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n touch-action: none;\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-9);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n inset-inline-start: calc(100% + 8px);\n }\n}\n\n.thumb {\n position: absolute;\n display: flex;\n height: var(--slider-thumb-size);\n width: var(--slider-thumb-size);\n border: 4px solid;\n transform: translate(-50%, -50%);\n top: 50%;\n cursor: pointer;\n border-radius: var(--slider-radius);\n align-items: center;\n justify-content: center;\n transition:\n box-shadow 100ms ease,\n transform 100ms ease;\n z-index: 3;\n user-select: none;\n touch-action: none;\n outline-offset: 2px;\n left: var(--slider-thumb-offset);\n\n @mixin where-rtl {\n left: auto;\n right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n display: none;\n }\n\n &:where([data-dragging]) {\n transform: translate(-50%, -50%) scale(1.05);\n box-shadow: var(--mantine-shadow-sm);\n }\n\n @mixin where-light {\n color: var(--slider-color);\n border-color: var(--slider-color);\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n border-color: var(--mantine-color-white);\n background-color: var(--slider-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n left: 50%;\n top: auto;\n right: auto;\n bottom: var(--slider-thumb-offset);\n transform: translate(-50%, 50%);\n\n &:where([data-dragging]) {\n transform: translate(-50%, 50%) scale(1.05);\n }\n\n @mixin where-rtl {\n left: 50%;\n right: auto;\n }\n }\n}\n\n.trackContainer {\n display: flex;\n align-items: center;\n width: 100%;\n height: calc(var(--slider-size) * 2);\n cursor: pointer;\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n }\n\n :where(.root[data-orientation='vertical']) & {\n flex-direction: column;\n width: calc(var(--slider-size) * 2);\n height: 100%;\n }\n}\n\n.track {\n position: relative;\n width: 100%;\n height: var(--slider-size);\n\n &:where([data-inverted]:not([data-disabled])) {\n --track-bg: var(--slider-color);\n }\n\n fieldset:disabled &:where([data-inverted]),\n &:where([data-inverted][data-disabled]) {\n --track-bg: var(--slider-track-disabled-bg);\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n border-radius: var(--slider-radius);\n inset-inline: calc(var(--slider-size) * -1);\n background-color: var(--track-bg, var(--slider-track-bg));\n z-index: 0;\n }\n\n :where(.root[data-orientation='vertical']) & {\n width: var(--slider-size);\n height: 100%;\n\n &::before {\n inset-inline: 0;\n top: calc(var(--slider-size) * -1);\n bottom: calc(var(--slider-size) * -1);\n }\n }\n}\n\n.bar {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n background-color: var(--slider-color);\n border-radius: var(--slider-radius);\n width: var(--slider-bar-width);\n inset-inline-start: var(--slider-bar-offset);\n\n &:where([data-inverted]) {\n background-color: var(--slider-track-bg);\n }\n\n fieldset:disabled &:where(:not([data-inverted])),\n &:where([data-disabled]:not([data-inverted])) {\n background-color: var(--mantine-color-disabled-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n bottom: var(--slider-bar-offset);\n inset-inline-start: 0;\n width: 100%;\n height: var(--slider-bar-width);\n }\n}\n\n.markWrapper {\n position: absolute;\n inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);\n top: 0;\n z-index: 2;\n height: 0;\n pointer-events: none;\n\n :where(.root[data-orientation='vertical']) & {\n inset-inline-start: 0;\n top: auto;\n bottom: calc(var(--mark-offset) + var(--slider-size) / 2);\n height: 0;\n width: 0;\n }\n}\n\n.mark {\n border: 2px solid;\n height: var(--slider-size);\n width: var(--slider-size);\n border-radius: 1000px;\n background-color: var(--mantine-color-white);\n pointer-events: none;\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 &:where([data-filled]) {\n border-color: var(--slider-color);\n\n &:where([data-disabled]) {\n border-color: var(--mantine-color-disabled-border);\n }\n }\n}\n\n.markLabel {\n transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n font-size: var(--mantine-font-size-sm);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n\n @mixin where-light {\n color: var(--mantine-color-gray-6);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-2);\n }\n\n :where(.root[data-orientation='vertical']) & {\n transform: translate(\n calc(var(--slider-size) + var(--mantine-spacing-xs) / 2),\n calc(-50% - var(--slider-size) / 2)\n );\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Slider.module.cjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":[".root {\n --slider-size-xs: 4px;\n --slider-size-sm: 6px;\n --slider-size-md: 8px;\n --slider-size-lg: 10px;\n --slider-size-xl: 12px;\n\n --slider-size: var(--slider-size-md);\n --slider-radius: 1000px;\n --slider-color: var(--mantine-primary-color-filled);\n --slider-track-disabled-bg: var(--mantine-color-disabled);\n\n -webkit-tap-highlight-color: transparent;\n outline: none;\n height: calc(var(--slider-size) * 2);\n padding-inline: var(--slider-size);\n display: flex;\n flex-direction: column;\n align-items: center;\n touch-action: none;\n position: relative;\n\n @mixin light {\n --slider-track-bg: var(--mantine-color-gray-2);\n }\n\n @mixin dark {\n --slider-track-bg: var(--mantine-color-dark-4);\n }\n\n &[data-orientation='vertical'] {\n width: calc(var(--slider-size) * 2);\n height: 200px;\n padding-inline: 0;\n padding-block: var(--slider-size);\n }\n}\n\n.label {\n position: absolute;\n top: -36px;\n font-size: var(--mantine-font-size-xs);\n color: var(--mantine-color-white);\n padding: calc(var(--mantine-spacing-xs) / 2);\n border-radius: var(--mantine-radius-sm);\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n touch-action: none;\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-9);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n inset-inline-start: calc(100% + 8px);\n }\n}\n\n.thumb {\n position: absolute;\n display: flex;\n height: var(--slider-thumb-size);\n width: var(--slider-thumb-size);\n border: 4px solid;\n transform: translate(-50%, -50%);\n top: 50%;\n cursor: pointer;\n border-radius: var(--slider-radius);\n align-items: center;\n justify-content: center;\n transition:\n box-shadow 100ms ease,\n transform 100ms ease;\n z-index: 3;\n user-select: none;\n touch-action: none;\n outline-offset: 2px;\n left: var(--slider-thumb-offset);\n\n @mixin where-rtl {\n left: auto;\n right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n display: none;\n }\n\n &:where([data-dragging]) {\n transform: translate(-50%, -50%) scale(1.05);\n box-shadow: var(--mantine-shadow-sm);\n }\n\n @mixin where-light {\n color: var(--slider-color);\n border-color: var(--slider-color);\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n border-color: var(--mantine-color-white);\n background-color: var(--slider-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n left: 50%;\n top: auto;\n right: auto;\n bottom: var(--slider-thumb-offset);\n transform: translate(-50%, 50%);\n\n &:where([data-dragging]) {\n transform: translate(-50%, 50%) scale(1.05);\n }\n\n @mixin where-rtl {\n left: 50%;\n right: auto;\n }\n }\n}\n\n.trackContainer {\n display: flex;\n align-items: center;\n width: 100%;\n height: calc(var(--slider-size) * 2);\n cursor: pointer;\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n }\n\n :where(.root[data-orientation='vertical']) & {\n flex-direction: column;\n width: calc(var(--slider-size) * 2);\n height: 100%;\n }\n}\n\n.track {\n position: relative;\n width: 100%;\n height: var(--slider-size);\n\n &:where([data-inverted]:not([data-disabled])) {\n --track-bg: var(--slider-color);\n }\n\n fieldset:disabled &:where([data-inverted]),\n &:where([data-inverted][data-disabled]) {\n --track-bg: var(--slider-track-disabled-bg);\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n border-radius: var(--slider-radius);\n inset-inline: calc(var(--slider-size) * -1);\n background-color: var(--track-bg, var(--slider-track-bg));\n z-index: 0;\n }\n\n :where(.root[data-orientation='vertical']) & {\n width: var(--slider-size);\n height: 100%;\n\n &::before {\n inset-inline: 0;\n top: calc(var(--slider-size) * -1);\n bottom: calc(var(--slider-size) * -1);\n }\n }\n}\n\n.bar {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n background-color: var(--slider-color);\n border-radius: var(--slider-radius);\n width: var(--slider-bar-width);\n inset-inline-start: var(--slider-bar-offset);\n\n &:where([data-inverted]) {\n background-color: var(--slider-track-bg);\n }\n\n fieldset:disabled &:where(:not([data-inverted])),\n &:where([data-disabled]:not([data-inverted])) {\n background-color: var(--mantine-color-disabled-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n bottom: var(--slider-bar-offset);\n inset-inline-start: 0;\n width: 100%;\n height: var(--slider-bar-width);\n }\n}\n\n.markWrapper {\n position: absolute;\n inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);\n top: 0;\n z-index: 2;\n height: 0;\n pointer-events: none;\n\n :where(.root[data-orientation='vertical']) & {\n inset-inline-start: 0;\n top: auto;\n bottom: calc(var(--mark-offset) + var(--slider-size) / 2);\n height: 0;\n width: 0;\n }\n}\n\n.mark {\n border: 2px solid;\n height: var(--slider-size);\n width: var(--slider-size);\n border-radius: 1000px;\n background-color: var(--mantine-color-white);\n pointer-events: none;\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 &:where([data-filled]) {\n border-color: var(--slider-color);\n\n &:where([data-disabled]) {\n border-color: var(--mantine-color-disabled-border);\n }\n }\n}\n\n.markLabel {\n transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n font-size: var(--mantine-font-size-sm);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n\n @mixin where-rtl {\n transform: translate(calc(50% - var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n }\n\n @mixin where-light {\n color: var(--mantine-color-gray-6);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-2);\n }\n\n :where(.root[data-orientation='vertical']) & {\n transform: translate(\n calc(var(--slider-size) + var(--mantine-spacing-xs) / 2),\n calc(-50% - var(--slider-size) / 2)\n );\n }\n}\n"],"mappings":""}
@@ -147,6 +147,7 @@ function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }
147
147
  return () => document.body.removeEventListener("reset", handleReset);
148
148
  }, [isControlled]);
149
149
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
150
+ rows: minRows,
150
151
  ...props,
151
152
  onChange: handleChange,
152
153
  ref
@@ -1 +1 @@
1
- {"version":3,"file":"Autosize.cjs","names":[],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n ref?: React.Ref<HTMLTextAreaElement>;\n maxRows?: number;\n minRows?: number;\n style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {\n height?: number;\n };\n}\n\nconst SIZING_STYLE_KEYS = [\n 'borderBottomWidth',\n 'borderLeftWidth',\n 'borderRightWidth',\n 'borderTopWidth',\n 'boxSizing',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'fontWeight',\n 'letterSpacing',\n 'lineHeight',\n 'paddingBottom',\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'tabSize',\n 'textIndent',\n 'textRendering',\n 'textTransform',\n 'width',\n 'wordBreak',\n 'wordSpacing',\n 'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n paddingSize: number;\n borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n 'min-height': '0',\n 'max-height': 'none',\n height: '0',\n visibility: 'hidden',\n overflow: 'hidden',\n position: 'absolute',\n 'z-index': '-1000',\n top: '0',\n right: '0',\n display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData | null {\n const style = window.getComputedStyle(node);\n\n if (style === null) {\n return null;\n }\n\n const sizingStyle = {} as SizingData['sizingStyle'];\n for (const key of SIZING_STYLE_KEYS) {\n (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n }\n\n if ((sizingStyle as any).boxSizing === '') {\n return null;\n }\n\n const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n const borderSize =\n parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement | null = null;\n\nfunction calculateNodeHeight(\n sizingData: SizingData,\n value: string,\n minRows = 1,\n maxRows = Infinity\n): [number, number] {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea');\n hiddenTextarea.setAttribute('tabindex', '-1');\n hiddenTextarea.setAttribute('aria-hidden', 'true');\n hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n forceHiddenStyles(hiddenTextarea);\n }\n\n if (hiddenTextarea.parentNode === null) {\n document.body.appendChild(hiddenTextarea);\n }\n\n const { paddingSize, borderSize, sizingStyle } = sizingData;\n const { boxSizing } = sizingStyle;\n\n Object.keys(sizingStyle).forEach((key) => {\n (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n });\n\n forceHiddenStyles(hiddenTextarea);\n\n hiddenTextarea.value = value;\n let height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n hiddenTextarea.value = value;\n height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n hiddenTextarea.value = 'x';\n const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n let minHeight = rowHeight * minRows;\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize;\n }\n height = Math.max(minHeight, height);\n\n let maxHeight = rowHeight * maxRows;\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize;\n }\n height = Math.min(maxHeight, height);\n\n return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n maxRows,\n minRows,\n onChange,\n ref: userRef,\n ...props\n}: TextareaAutosizeProps) {\n const isControlled = props.value !== undefined;\n const libRef = useRef<HTMLTextAreaElement | null>(null);\n const ref = useMergedRef(libRef, userRef);\n const heightRef = useRef(0);\n const widthRef = useRef(0);\n\n const resizeTextarea = () => {\n const node = libRef.current;\n\n if (!node) {\n return;\n }\n\n const nodeSizingData = getSizingData(node);\n\n if (!nodeSizingData) {\n return;\n }\n\n const [height] = calculateNodeHeight(\n nodeSizingData,\n node.value || node.placeholder || 'x',\n minRows,\n maxRows\n );\n\n if (heightRef.current !== height) {\n heightRef.current = height;\n node.style.setProperty('height', `${height}px`, 'important');\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n resizeTextarea();\n }\n onChange?.(event);\n };\n\n useLayoutEffect(resizeTextarea);\n\n useEffect(() => {\n const handleResize = () => resizeTextarea();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n useEffect(() => {\n const node = libRef.current;\n\n if (!node || typeof ResizeObserver === 'undefined') {\n return undefined;\n }\n\n widthRef.current = node.offsetWidth;\n\n const observer = new ResizeObserver(() => {\n if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {\n widthRef.current = libRef.current.offsetWidth;\n resizeTextarea();\n }\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const handleFontsLoaded = () => resizeTextarea();\n document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n }, []);\n\n useEffect(() => {\n const handleReset = (event: Event) => {\n if (libRef.current?.form === event.target && !isControlled) {\n const currentValue = libRef.current!.value;\n requestAnimationFrame(() => {\n if (libRef.current && currentValue !== libRef.current.value) {\n resizeTextarea();\n }\n });\n }\n };\n document.body.addEventListener('reset', handleReset);\n return () => document.body.removeEventListener('reset', handleReset);\n }, [isControlled]);\n\n return <textarea {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"Autosize.cjs","names":[],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n ref?: React.Ref<HTMLTextAreaElement>;\n maxRows?: number;\n minRows?: number;\n style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {\n height?: number;\n };\n}\n\nconst SIZING_STYLE_KEYS = [\n 'borderBottomWidth',\n 'borderLeftWidth',\n 'borderRightWidth',\n 'borderTopWidth',\n 'boxSizing',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'fontWeight',\n 'letterSpacing',\n 'lineHeight',\n 'paddingBottom',\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'tabSize',\n 'textIndent',\n 'textRendering',\n 'textTransform',\n 'width',\n 'wordBreak',\n 'wordSpacing',\n 'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n paddingSize: number;\n borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n 'min-height': '0',\n 'max-height': 'none',\n height: '0',\n visibility: 'hidden',\n overflow: 'hidden',\n position: 'absolute',\n 'z-index': '-1000',\n top: '0',\n right: '0',\n display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData | null {\n const style = window.getComputedStyle(node);\n\n if (style === null) {\n return null;\n }\n\n const sizingStyle = {} as SizingData['sizingStyle'];\n for (const key of SIZING_STYLE_KEYS) {\n (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n }\n\n if ((sizingStyle as any).boxSizing === '') {\n return null;\n }\n\n const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n const borderSize =\n parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement | null = null;\n\nfunction calculateNodeHeight(\n sizingData: SizingData,\n value: string,\n minRows = 1,\n maxRows = Infinity\n): [number, number] {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea');\n hiddenTextarea.setAttribute('tabindex', '-1');\n hiddenTextarea.setAttribute('aria-hidden', 'true');\n hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n forceHiddenStyles(hiddenTextarea);\n }\n\n if (hiddenTextarea.parentNode === null) {\n document.body.appendChild(hiddenTextarea);\n }\n\n const { paddingSize, borderSize, sizingStyle } = sizingData;\n const { boxSizing } = sizingStyle;\n\n Object.keys(sizingStyle).forEach((key) => {\n (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n });\n\n forceHiddenStyles(hiddenTextarea);\n\n hiddenTextarea.value = value;\n let height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n hiddenTextarea.value = value;\n height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n hiddenTextarea.value = 'x';\n const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n let minHeight = rowHeight * minRows;\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize;\n }\n height = Math.max(minHeight, height);\n\n let maxHeight = rowHeight * maxRows;\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize;\n }\n height = Math.min(maxHeight, height);\n\n return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n maxRows,\n minRows,\n onChange,\n ref: userRef,\n ...props\n}: TextareaAutosizeProps) {\n const isControlled = props.value !== undefined;\n const libRef = useRef<HTMLTextAreaElement | null>(null);\n const ref = useMergedRef(libRef, userRef);\n const heightRef = useRef(0);\n const widthRef = useRef(0);\n\n const resizeTextarea = () => {\n const node = libRef.current;\n\n if (!node) {\n return;\n }\n\n const nodeSizingData = getSizingData(node);\n\n if (!nodeSizingData) {\n return;\n }\n\n const [height] = calculateNodeHeight(\n nodeSizingData,\n node.value || node.placeholder || 'x',\n minRows,\n maxRows\n );\n\n if (heightRef.current !== height) {\n heightRef.current = height;\n node.style.setProperty('height', `${height}px`, 'important');\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n resizeTextarea();\n }\n onChange?.(event);\n };\n\n useLayoutEffect(resizeTextarea);\n\n useEffect(() => {\n const handleResize = () => resizeTextarea();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n useEffect(() => {\n const node = libRef.current;\n\n if (!node || typeof ResizeObserver === 'undefined') {\n return undefined;\n }\n\n widthRef.current = node.offsetWidth;\n\n const observer = new ResizeObserver(() => {\n if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {\n widthRef.current = libRef.current.offsetWidth;\n resizeTextarea();\n }\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const handleFontsLoaded = () => resizeTextarea();\n document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n }, []);\n\n useEffect(() => {\n const handleReset = (event: Event) => {\n if (libRef.current?.form === event.target && !isControlled) {\n const currentValue = libRef.current!.value;\n requestAnimationFrame(() => {\n if (libRef.current && currentValue !== libRef.current.value) {\n resizeTextarea();\n }\n });\n }\n };\n document.body.addEventListener('reset', handleReset);\n return () => document.body.removeEventListener('reset', handleReset);\n }, [isControlled]);\n\n return <textarea rows={minRows} {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}
@@ -7,6 +7,7 @@ function FloatingArrow({ position, arrowSize, arrowOffset, arrowRadius, arrowPos
7
7
  const { dir } = require_DirectionProvider.useDirection();
8
8
  if (!visible) return null;
9
9
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
10
+ role: "presentation",
10
11
  ...others,
11
12
  style: {
12
13
  ...style,
@@ -1 +1 @@
1
- {"version":3,"file":"FloatingArrow.cjs","names":["useDirection","getArrowPositionStyles"],"sources":["../../../../src/utils/Floating/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import { useDirection } from '../../../core';\nimport { ArrowPosition, FloatingPosition } from '../types';\nimport { getArrowPositionStyles } from './get-arrow-position-styles';\n\ninterface FloatingArrowProps extends React.ComponentProps<'div'> {\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n arrowX: number | undefined;\n arrowY: number | undefined;\n visible: boolean | undefined;\n}\n\nexport function FloatingArrow({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n visible,\n arrowX,\n arrowY,\n style,\n ...others\n}: FloatingArrowProps) {\n const { dir } = useDirection();\n if (!visible) {\n return null;\n }\n\n return (\n <div\n {...others}\n style={{\n ...style,\n ...getArrowPositionStyles({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n dir,\n arrowX,\n arrowY,\n }),\n }}\n />\n );\n}\n\nFloatingArrow.displayName = '@mantine/core/FloatingArrow';\n"],"mappings":";;;;;AAeA,SAAgB,cAAc,EAC5B,UACA,WACA,aACA,aACA,eACA,SACA,QACA,QACA,OACA,GAAG,UACkB;CACrB,MAAM,EAAE,QAAQA,0BAAAA,aAAa;CAC7B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,GAAI;EACJ,OAAO;GACL,GAAG;GACH,GAAGC,kCAAAA,uBAAuB;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAAC;EACH;CACD,CAAA;AAEL;AAEA,cAAc,cAAc"}
1
+ {"version":3,"file":"FloatingArrow.cjs","names":["useDirection","getArrowPositionStyles"],"sources":["../../../../src/utils/Floating/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import { useDirection } from '../../../core';\nimport { ArrowPosition, FloatingPosition } from '../types';\nimport { getArrowPositionStyles } from './get-arrow-position-styles';\n\ninterface FloatingArrowProps extends React.ComponentProps<'div'> {\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n arrowX: number | undefined;\n arrowY: number | undefined;\n visible: boolean | undefined;\n}\n\nexport function FloatingArrow({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n visible,\n arrowX,\n arrowY,\n style,\n ...others\n}: FloatingArrowProps) {\n const { dir } = useDirection();\n if (!visible) {\n return null;\n }\n\n return (\n <div\n role=\"presentation\"\n {...others}\n style={{\n ...style,\n ...getArrowPositionStyles({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n dir,\n arrowX,\n arrowY,\n }),\n }}\n />\n );\n}\n\nFloatingArrow.displayName = '@mantine/core/FloatingArrow';\n"],"mappings":";;;;;AAeA,SAAgB,cAAc,EAC5B,UACA,WACA,aACA,aACA,eACA,SACA,QACA,QACA,OACA,GAAG,UACkB;CACrB,MAAM,EAAE,QAAQA,0BAAAA,aAAa;CAC7B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,MAAK;EACL,GAAI;EACJ,OAAO;GACL,GAAG;GACH,GAAGC,kCAAAA,uBAAuB;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAAC;EACH;CACD,CAAA;AAEL;AAEA,cAAc,cAAc"}
@@ -35,11 +35,15 @@ const Collapse = factory((props) => {
35
35
  mode: expanded ? "visible" : "hidden",
36
36
  children: /* @__PURE__ */ jsx(Box, {
37
37
  ...others,
38
+ style,
39
+ ref,
38
40
  children
39
41
  })
40
42
  });
41
43
  return expanded ? /* @__PURE__ */ jsx(Box, {
42
44
  ...others,
45
+ style,
46
+ ref,
43
47
  children
44
48
  }) : null;
45
49
  }
@@ -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 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,YAAA,CAE9C;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} style={style} ref={ref}>\n {children}\n </Box>\n </Activity>\n );\n }\n\n return expanded ? (\n <Box {...others} style={style} ref={ref}>\n {children}\n </Box>\n ) : 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,YAAA,CAE9C;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;IAAe;IAAY;IACjC;GACE,CAAA;EACG,CAAA;EAId,OAAO,WACL,oBAAC,KAAD;GAAK,GAAI;GAAe;GAAY;GACjC;EACE,CAAA,IACH;CACN;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"}
@@ -47,6 +47,7 @@ const MenuDropdown = factory((props) => {
47
47
  "data-menu-dropdown": true,
48
48
  onKeyDown: handleKeyDown,
49
49
  children: [ctx.withInitialFocusPlaceholder && !ctx.hasSearch && /* @__PURE__ */ jsx("div", {
50
+ role: "presentation",
50
51
  tabIndex: -1,
51
52
  "data-autofocus": true,
52
53
  "data-mantine-stop-propagation": true,
@@ -1 +1 @@
1
- {"version":3,"file":"MenuDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuDropdown/MenuDropdown.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n createEventHandler,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { useMenuTypeAhead } from '../use-menu-type-ahead';\nimport classes from '../Menu.module.css';\n\nexport type MenuDropdownStylesNames = 'dropdown';\n\nexport interface MenuDropdownProps\n extends BoxProps, CompoundStylesApiProps<MenuDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuDropdownFactory = Factory<{\n props: MenuDropdownProps;\n ref: HTMLDivElement;\n stylesNames: MenuDropdownStylesNames;\n compound: true;\n}>;\n\nexport const MenuDropdown = factory<MenuDropdownFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n children,\n ref,\n ...others\n } = useProps('MenuDropdown', null, props);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const ctx = useMenuContext();\n\n const typeAhead = useMenuTypeAhead({\n enabled: !ctx.hasSearch,\n opened: ctx.opened,\n getDropdown: () => wrapperRef.current,\n });\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n typeAhead(event);\n if (event.defaultPrevented || ctx.hasSearch) {\n return;\n }\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n wrapperRef.current\n ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not(:disabled)')[0]\n ?.focus();\n }\n });\n\n const handleMouseEnter = createEventHandler<any>(\n onMouseEnter,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.openDropdown()\n );\n\n const handleMouseLeave = createEventHandler<any>(\n onMouseLeave,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.closeDropdown()\n );\n\n return (\n <Popover.Dropdown\n {...others}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"menu\"\n aria-orientation=\"vertical\"\n ref={useMergedRef(ref, wrapperRef)}\n {...ctx.getStyles('dropdown', {\n className,\n style,\n styles,\n classNames,\n withStaticClass: false,\n })}\n tabIndex={-1}\n data-menu-dropdown\n onKeyDown={handleKeyDown}\n >\n {ctx.withInitialFocusPlaceholder && !ctx.hasSearch && (\n <div tabIndex={-1} data-autofocus data-mantine-stop-propagation style={{ outline: 0 }} />\n )}\n {children}\n </Popover.Dropdown>\n );\n});\n\nMenuDropdown.classes = classes;\nMenuDropdown.displayName = '@mantine/core/MenuDropdown';\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,eAAe,SAA8B,UAAU;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,WACA,UACA,KACA,GAAG,WACD,SAAS,gBAAgB,MAAM,KAAK;CAExC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,MAAM,eAAe;CAE3B,MAAM,YAAY,iBAAiB;EACjC,SAAS,CAAC,IAAI;EACd,QAAQ,IAAI;EACZ,mBAAmB,WAAW;CAChC,CAAC;CAED,MAAM,gBAAgB,mBAAwB,YAAY,UAAU;EAClE,UAAU,KAAK;EACf,IAAI,MAAM,oBAAoB,IAAI,WAChC;EAEF,IAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;GACxD,MAAM,eAAe;GACrB,WAAW,SACP,iBAAoC,iCAAiC,CAAC,CAAC,EAAE,EACzE,MAAM;EACZ;CACF,CAAC;CAED,MAAM,mBAAmB,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,aAAa,CACvF;CAEA,MAAM,mBAAmB,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,cAAc,CACxF;CAEA,OACE,qBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,cAAc;EACd,cAAc;EACd,MAAK;EACL,oBAAiB;EACjB,KAAK,aAAa,KAAK,UAAU;EACjC,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;EACA,WAAW;YAhBb,CAkBG,IAAI,+BAA+B,CAAC,IAAI,aACvC,oBAAC,OAAD;GAAK,UAAU;GAAI,kBAAA;GAAe,iCAAA;GAA8B,OAAO,EAAE,SAAS,EAAE;EAAI,CAAA,GAEzF,QACe;;AAEtB,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}
1
+ {"version":3,"file":"MenuDropdown.mjs","names":["classes"],"sources":["../../../../src/components/Menu/MenuDropdown/MenuDropdown.tsx"],"sourcesContent":["import { useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\nimport {\n BoxProps,\n CompoundStylesApiProps,\n createEventHandler,\n ElementProps,\n factory,\n Factory,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { useMenuContext } from '../Menu.context';\nimport { useMenuTypeAhead } from '../use-menu-type-ahead';\nimport classes from '../Menu.module.css';\n\nexport type MenuDropdownStylesNames = 'dropdown';\n\nexport interface MenuDropdownProps\n extends BoxProps, CompoundStylesApiProps<MenuDropdownFactory>, ElementProps<'div'> {}\n\nexport type MenuDropdownFactory = Factory<{\n props: MenuDropdownProps;\n ref: HTMLDivElement;\n stylesNames: MenuDropdownStylesNames;\n compound: true;\n}>;\n\nexport const MenuDropdown = factory<MenuDropdownFactory>((props) => {\n const {\n classNames,\n className,\n style,\n styles,\n vars,\n onMouseEnter,\n onMouseLeave,\n onKeyDown,\n children,\n ref,\n ...others\n } = useProps('MenuDropdown', null, props);\n\n const wrapperRef = useRef<HTMLDivElement>(null);\n const ctx = useMenuContext();\n\n const typeAhead = useMenuTypeAhead({\n enabled: !ctx.hasSearch,\n opened: ctx.opened,\n getDropdown: () => wrapperRef.current,\n });\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n typeAhead(event);\n if (event.defaultPrevented || ctx.hasSearch) {\n return;\n }\n if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {\n event.preventDefault();\n wrapperRef.current\n ?.querySelectorAll<HTMLButtonElement>('[data-menu-item]:not(:disabled)')[0]\n ?.focus();\n }\n });\n\n const handleMouseEnter = createEventHandler<any>(\n onMouseEnter,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.openDropdown()\n );\n\n const handleMouseLeave = createEventHandler<any>(\n onMouseLeave,\n () => (ctx.trigger === 'hover' || ctx.trigger === 'click-hover') && ctx.closeDropdown()\n );\n\n return (\n <Popover.Dropdown\n {...others}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n role=\"menu\"\n aria-orientation=\"vertical\"\n ref={useMergedRef(ref, wrapperRef)}\n {...ctx.getStyles('dropdown', {\n className,\n style,\n styles,\n classNames,\n withStaticClass: false,\n })}\n tabIndex={-1}\n data-menu-dropdown\n onKeyDown={handleKeyDown}\n >\n {ctx.withInitialFocusPlaceholder && !ctx.hasSearch && (\n <div\n role=\"presentation\"\n tabIndex={-1}\n data-autofocus\n data-mantine-stop-propagation\n style={{ outline: 0 }}\n />\n )}\n {children}\n </Popover.Dropdown>\n );\n});\n\nMenuDropdown.classes = classes;\nMenuDropdown.displayName = '@mantine/core/MenuDropdown';\n"],"mappings":";;;;;;;;;;;;AA4BA,MAAa,eAAe,SAA8B,UAAU;CAClE,MAAM,EACJ,YACA,WACA,OACA,QACA,MACA,cACA,cACA,WACA,UACA,KACA,GAAG,WACD,SAAS,gBAAgB,MAAM,KAAK;CAExC,MAAM,aAAa,OAAuB,IAAI;CAC9C,MAAM,MAAM,eAAe;CAE3B,MAAM,YAAY,iBAAiB;EACjC,SAAS,CAAC,IAAI;EACd,QAAQ,IAAI;EACZ,mBAAmB,WAAW;CAChC,CAAC;CAED,MAAM,gBAAgB,mBAAwB,YAAY,UAAU;EAClE,UAAU,KAAK;EACf,IAAI,MAAM,oBAAoB,IAAI,WAChC;EAEF,IAAI,MAAM,QAAQ,aAAa,MAAM,QAAQ,aAAa;GACxD,MAAM,eAAe;GACrB,WAAW,SACP,iBAAoC,iCAAiC,CAAC,CAAC,EAAE,EACzE,MAAM;EACZ;CACF,CAAC;CAED,MAAM,mBAAmB,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,aAAa,CACvF;CAEA,MAAM,mBAAmB,mBACvB,qBACO,IAAI,YAAY,WAAW,IAAI,YAAY,kBAAkB,IAAI,cAAc,CACxF;CAEA,OACE,qBAAC,QAAQ,UAAT;EACE,GAAI;EACJ,cAAc;EACd,cAAc;EACd,MAAK;EACL,oBAAiB;EACjB,KAAK,aAAa,KAAK,UAAU;EACjC,GAAI,IAAI,UAAU,YAAY;GAC5B;GACA;GACA;GACA;GACA,iBAAiB;EACnB,CAAC;EACD,UAAU;EACV,sBAAA;EACA,WAAW;YAhBb,CAkBG,IAAI,+BAA+B,CAAC,IAAI,aACvC,oBAAC,OAAD;GACE,MAAK;GACL,UAAU;GACV,kBAAA;GACA,iCAAA;GACA,OAAO,EAAE,SAAS,EAAE;EACrB,CAAA,GAEF,QACe;;AAEtB,CAAC;AAED,aAAa,UAAUA;AACvB,aAAa,cAAc"}
@@ -27,8 +27,9 @@ function getDigitParts({ value, decimalScale, fixedDecimalScale }) {
27
27
  const dotIdx = str.indexOf(".");
28
28
  const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;
29
29
  const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : "";
30
+ const roundedToZero = !/[1-9]/.test(str);
30
31
  return {
31
- negative: value < 0,
32
+ negative: value < 0 && !roundedToZero,
32
33
  intDigits: intStr.split(""),
33
34
  fracDigits: fracStr ? fracStr.split("") : [],
34
35
  hasDecimal: dotIdx >= 0
@@ -1 +1 @@
1
- {"version":3,"file":"get-digit-parts.mjs","names":[],"sources":["../../../src/components/RollingNumber/get-digit-parts.ts"],"sourcesContent":["export interface DigitParts {\n negative: boolean;\n intDigits: string[];\n fracDigits: string[];\n hasDecimal: boolean;\n}\n\nexport interface GetDigitPartsInput {\n value: number;\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n}\n\nconst PLAIN_FORMAT = new Intl.NumberFormat('en-US', {\n useGrouping: false,\n maximumFractionDigits: 20,\n});\n\nfunction toPlainString(num: number, decimalScale?: number): string {\n if (!Number.isFinite(num)) {\n return '0';\n }\n\n if (decimalScale !== undefined) {\n return new Intl.NumberFormat('en-US', {\n useGrouping: false,\n minimumFractionDigits: decimalScale,\n maximumFractionDigits: decimalScale,\n }).format(num);\n }\n\n const str = String(num);\n if (!str.includes('e') && !str.includes('E')) {\n return str;\n }\n\n return PLAIN_FORMAT.format(num);\n}\n\nexport function getDigitParts({\n value,\n decimalScale,\n fixedDecimalScale,\n}: GetDigitPartsInput): DigitParts {\n const abs = Math.abs(value);\n let str = toPlainString(abs, decimalScale);\n\n if (!fixedDecimalScale && decimalScale !== undefined) {\n const parts = str.split('.');\n if (parts[1]) {\n const trimmed = parts[1].replace(/0+$/, '');\n str = trimmed ? `${parts[0]}.${trimmed}` : parts[0];\n }\n }\n\n const dotIdx = str.indexOf('.');\n const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;\n const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : '';\n\n return {\n negative: value < 0,\n intDigits: intStr.split(''),\n fracDigits: fracStr ? fracStr.split('') : [],\n hasDecimal: dotIdx >= 0,\n };\n}\n"],"mappings":";;AAaA,MAAM,eAAe,IAAI,KAAK,aAAa,SAAS;CAClD,aAAa;CACb,uBAAuB;AACzB,CAAC;AAED,SAAS,cAAc,KAAa,cAA+B;CACjE,IAAI,CAAC,OAAO,SAAS,GAAG,GACtB,OAAO;CAGT,IAAI,iBAAiB,KAAA,GACnB,OAAO,IAAI,KAAK,aAAa,SAAS;EACpC,aAAa;EACb,uBAAuB;EACvB,uBAAuB;CACzB,CAAC,CAAC,CAAC,OAAO,GAAG;CAGf,MAAM,MAAM,OAAO,GAAG;CACtB,IAAI,CAAC,IAAI,SAAS,GAAG,KAAK,CAAC,IAAI,SAAS,GAAG,GACzC,OAAO;CAGT,OAAO,aAAa,OAAO,GAAG;AAChC;AAEA,SAAgB,cAAc,EAC5B,OACA,cACA,qBACiC;CAEjC,IAAI,MAAM,cADE,KAAK,IAAI,KACK,GAAG,YAAY;CAEzC,IAAI,CAAC,qBAAqB,iBAAiB,KAAA,GAAW;EACpD,MAAM,QAAQ,IAAI,MAAM,GAAG;EAC3B,IAAI,MAAM,IAAI;GACZ,MAAM,UAAU,MAAM,EAAE,CAAC,QAAQ,OAAO,EAAE;GAC1C,MAAM,UAAU,GAAG,MAAM,GAAG,GAAG,YAAY,MAAM;EACnD;CACF;CAEA,MAAM,SAAS,IAAI,QAAQ,GAAG;CAC9B,MAAM,SAAS,UAAU,IAAI,IAAI,MAAM,GAAG,MAAM,IAAI;CACpD,MAAM,UAAU,UAAU,IAAI,IAAI,MAAM,SAAS,CAAC,IAAI;CAEtD,OAAO;EACL,UAAU,QAAQ;EAClB,WAAW,OAAO,MAAM,EAAE;EAC1B,YAAY,UAAU,QAAQ,MAAM,EAAE,IAAI,CAAC;EAC3C,YAAY,UAAU;CACxB;AACF"}
1
+ {"version":3,"file":"get-digit-parts.mjs","names":[],"sources":["../../../src/components/RollingNumber/get-digit-parts.ts"],"sourcesContent":["export interface DigitParts {\n negative: boolean;\n intDigits: string[];\n fracDigits: string[];\n hasDecimal: boolean;\n}\n\nexport interface GetDigitPartsInput {\n value: number;\n decimalScale?: number;\n fixedDecimalScale?: boolean;\n}\n\nconst PLAIN_FORMAT = new Intl.NumberFormat('en-US', {\n useGrouping: false,\n maximumFractionDigits: 20,\n});\n\nfunction toPlainString(num: number, decimalScale?: number): string {\n if (!Number.isFinite(num)) {\n return '0';\n }\n\n if (decimalScale !== undefined) {\n return new Intl.NumberFormat('en-US', {\n useGrouping: false,\n minimumFractionDigits: decimalScale,\n maximumFractionDigits: decimalScale,\n }).format(num);\n }\n\n const str = String(num);\n if (!str.includes('e') && !str.includes('E')) {\n return str;\n }\n\n return PLAIN_FORMAT.format(num);\n}\n\nexport function getDigitParts({\n value,\n decimalScale,\n fixedDecimalScale,\n}: GetDigitPartsInput): DigitParts {\n const abs = Math.abs(value);\n let str = toPlainString(abs, decimalScale);\n\n if (!fixedDecimalScale && decimalScale !== undefined) {\n const parts = str.split('.');\n if (parts[1]) {\n const trimmed = parts[1].replace(/0+$/, '');\n str = trimmed ? `${parts[0]}.${trimmed}` : parts[0];\n }\n }\n\n const dotIdx = str.indexOf('.');\n const intStr = dotIdx >= 0 ? str.slice(0, dotIdx) : str;\n const fracStr = dotIdx >= 0 ? str.slice(dotIdx + 1) : '';\n\n const roundedToZero = !/[1-9]/.test(str);\n\n return {\n negative: value < 0 && !roundedToZero,\n intDigits: intStr.split(''),\n fracDigits: fracStr ? fracStr.split('') : [],\n hasDecimal: dotIdx >= 0,\n };\n}\n"],"mappings":";;AAaA,MAAM,eAAe,IAAI,KAAK,aAAa,SAAS;CAClD,aAAa;CACb,uBAAuB;AACzB,CAAC;AAED,SAAS,cAAc,KAAa,cAA+B;CACjE,IAAI,CAAC,OAAO,SAAS,GAAG,GACtB,OAAO;CAGT,IAAI,iBAAiB,KAAA,GACnB,OAAO,IAAI,KAAK,aAAa,SAAS;EACpC,aAAa;EACb,uBAAuB;EACvB,uBAAuB;CACzB,CAAC,CAAC,CAAC,OAAO,GAAG;CAGf,MAAM,MAAM,OAAO,GAAG;CACtB,IAAI,CAAC,IAAI,SAAS,GAAG,KAAK,CAAC,IAAI,SAAS,GAAG,GACzC,OAAO;CAGT,OAAO,aAAa,OAAO,GAAG;AAChC;AAEA,SAAgB,cAAc,EAC5B,OACA,cACA,qBACiC;CAEjC,IAAI,MAAM,cADE,KAAK,IAAI,KACK,GAAG,YAAY;CAEzC,IAAI,CAAC,qBAAqB,iBAAiB,KAAA,GAAW;EACpD,MAAM,QAAQ,IAAI,MAAM,GAAG;EAC3B,IAAI,MAAM,IAAI;GACZ,MAAM,UAAU,MAAM,EAAE,CAAC,QAAQ,OAAO,EAAE;GAC1C,MAAM,UAAU,GAAG,MAAM,GAAG,GAAG,YAAY,MAAM;EACnD;CACF;CAEA,MAAM,SAAS,IAAI,QAAQ,GAAG;CAC9B,MAAM,SAAS,UAAU,IAAI,IAAI,MAAM,GAAG,MAAM,IAAI;CACpD,MAAM,UAAU,UAAU,IAAI,IAAI,MAAM,SAAS,CAAC,IAAI;CAEtD,MAAM,gBAAgB,CAAC,QAAQ,KAAK,GAAG;CAEvC,OAAO;EACL,UAAU,QAAQ,KAAK,CAAC;EACxB,WAAW,OAAO,MAAM,EAAE;EAC1B,YAAY,UAAU,QAAQ,MAAM,EAAE,IAAI,CAAC;EAC3C,YAAY,UAAU;CACxB;AACF"}
@@ -1 +1 @@
1
- {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":[".root {\n --slider-size-xs: 4px;\n --slider-size-sm: 6px;\n --slider-size-md: 8px;\n --slider-size-lg: 10px;\n --slider-size-xl: 12px;\n\n --slider-size: var(--slider-size-md);\n --slider-radius: 1000px;\n --slider-color: var(--mantine-primary-color-filled);\n --slider-track-disabled-bg: var(--mantine-color-disabled);\n\n -webkit-tap-highlight-color: transparent;\n outline: none;\n height: calc(var(--slider-size) * 2);\n padding-inline: var(--slider-size);\n display: flex;\n flex-direction: column;\n align-items: center;\n touch-action: none;\n position: relative;\n\n @mixin light {\n --slider-track-bg: var(--mantine-color-gray-2);\n }\n\n @mixin dark {\n --slider-track-bg: var(--mantine-color-dark-4);\n }\n\n &[data-orientation='vertical'] {\n width: calc(var(--slider-size) * 2);\n height: 200px;\n padding-inline: 0;\n padding-block: var(--slider-size);\n }\n}\n\n.label {\n position: absolute;\n top: -36px;\n font-size: var(--mantine-font-size-xs);\n color: var(--mantine-color-white);\n padding: calc(var(--mantine-spacing-xs) / 2);\n border-radius: var(--mantine-radius-sm);\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n touch-action: none;\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-9);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n inset-inline-start: calc(100% + 8px);\n }\n}\n\n.thumb {\n position: absolute;\n display: flex;\n height: var(--slider-thumb-size);\n width: var(--slider-thumb-size);\n border: 4px solid;\n transform: translate(-50%, -50%);\n top: 50%;\n cursor: pointer;\n border-radius: var(--slider-radius);\n align-items: center;\n justify-content: center;\n transition:\n box-shadow 100ms ease,\n transform 100ms ease;\n z-index: 3;\n user-select: none;\n touch-action: none;\n outline-offset: 2px;\n left: var(--slider-thumb-offset);\n\n @mixin where-rtl {\n left: auto;\n right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n display: none;\n }\n\n &:where([data-dragging]) {\n transform: translate(-50%, -50%) scale(1.05);\n box-shadow: var(--mantine-shadow-sm);\n }\n\n @mixin where-light {\n color: var(--slider-color);\n border-color: var(--slider-color);\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n border-color: var(--mantine-color-white);\n background-color: var(--slider-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n left: 50%;\n top: auto;\n right: auto;\n bottom: var(--slider-thumb-offset);\n transform: translate(-50%, 50%);\n\n &:where([data-dragging]) {\n transform: translate(-50%, 50%) scale(1.05);\n }\n\n @mixin where-rtl {\n left: 50%;\n right: auto;\n }\n }\n}\n\n.trackContainer {\n display: flex;\n align-items: center;\n width: 100%;\n height: calc(var(--slider-size) * 2);\n cursor: pointer;\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n }\n\n :where(.root[data-orientation='vertical']) & {\n flex-direction: column;\n width: calc(var(--slider-size) * 2);\n height: 100%;\n }\n}\n\n.track {\n position: relative;\n width: 100%;\n height: var(--slider-size);\n\n &:where([data-inverted]:not([data-disabled])) {\n --track-bg: var(--slider-color);\n }\n\n fieldset:disabled &:where([data-inverted]),\n &:where([data-inverted][data-disabled]) {\n --track-bg: var(--slider-track-disabled-bg);\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n border-radius: var(--slider-radius);\n inset-inline: calc(var(--slider-size) * -1);\n background-color: var(--track-bg, var(--slider-track-bg));\n z-index: 0;\n }\n\n :where(.root[data-orientation='vertical']) & {\n width: var(--slider-size);\n height: 100%;\n\n &::before {\n inset-inline: 0;\n top: calc(var(--slider-size) * -1);\n bottom: calc(var(--slider-size) * -1);\n }\n }\n}\n\n.bar {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n background-color: var(--slider-color);\n border-radius: var(--slider-radius);\n width: var(--slider-bar-width);\n inset-inline-start: var(--slider-bar-offset);\n\n &:where([data-inverted]) {\n background-color: var(--slider-track-bg);\n }\n\n fieldset:disabled &:where(:not([data-inverted])),\n &:where([data-disabled]:not([data-inverted])) {\n background-color: var(--mantine-color-disabled-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n bottom: var(--slider-bar-offset);\n inset-inline-start: 0;\n width: 100%;\n height: var(--slider-bar-width);\n }\n}\n\n.markWrapper {\n position: absolute;\n inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);\n top: 0;\n z-index: 2;\n height: 0;\n pointer-events: none;\n\n :where(.root[data-orientation='vertical']) & {\n inset-inline-start: 0;\n top: auto;\n bottom: calc(var(--mark-offset) + var(--slider-size) / 2);\n height: 0;\n width: 0;\n }\n}\n\n.mark {\n border: 2px solid;\n height: var(--slider-size);\n width: var(--slider-size);\n border-radius: 1000px;\n background-color: var(--mantine-color-white);\n pointer-events: none;\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 &:where([data-filled]) {\n border-color: var(--slider-color);\n\n &:where([data-disabled]) {\n border-color: var(--mantine-color-disabled-border);\n }\n }\n}\n\n.markLabel {\n transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n font-size: var(--mantine-font-size-sm);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n\n @mixin where-light {\n color: var(--mantine-color-gray-6);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-2);\n }\n\n :where(.root[data-orientation='vertical']) & {\n transform: translate(\n calc(var(--slider-size) + var(--mantine-spacing-xs) / 2),\n calc(-50% - var(--slider-size) / 2)\n );\n }\n}\n"],"mappings":""}
1
+ {"version":3,"file":"Slider.module.mjs","names":[],"sources":["../../../src/components/Slider/Slider.module.css"],"sourcesContent":[".root {\n --slider-size-xs: 4px;\n --slider-size-sm: 6px;\n --slider-size-md: 8px;\n --slider-size-lg: 10px;\n --slider-size-xl: 12px;\n\n --slider-size: var(--slider-size-md);\n --slider-radius: 1000px;\n --slider-color: var(--mantine-primary-color-filled);\n --slider-track-disabled-bg: var(--mantine-color-disabled);\n\n -webkit-tap-highlight-color: transparent;\n outline: none;\n height: calc(var(--slider-size) * 2);\n padding-inline: var(--slider-size);\n display: flex;\n flex-direction: column;\n align-items: center;\n touch-action: none;\n position: relative;\n\n @mixin light {\n --slider-track-bg: var(--mantine-color-gray-2);\n }\n\n @mixin dark {\n --slider-track-bg: var(--mantine-color-dark-4);\n }\n\n &[data-orientation='vertical'] {\n width: calc(var(--slider-size) * 2);\n height: 200px;\n padding-inline: 0;\n padding-block: var(--slider-size);\n }\n}\n\n.label {\n position: absolute;\n top: -36px;\n font-size: var(--mantine-font-size-xs);\n color: var(--mantine-color-white);\n padding: calc(var(--mantine-spacing-xs) / 2);\n border-radius: var(--mantine-radius-sm);\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n touch-action: none;\n\n @mixin where-light {\n background-color: var(--mantine-color-gray-9);\n }\n\n @mixin where-dark {\n background-color: var(--mantine-color-dark-4);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n inset-inline-start: calc(100% + 8px);\n }\n}\n\n.thumb {\n position: absolute;\n display: flex;\n height: var(--slider-thumb-size);\n width: var(--slider-thumb-size);\n border: 4px solid;\n transform: translate(-50%, -50%);\n top: 50%;\n cursor: pointer;\n border-radius: var(--slider-radius);\n align-items: center;\n justify-content: center;\n transition:\n box-shadow 100ms ease,\n transform 100ms ease;\n z-index: 3;\n user-select: none;\n touch-action: none;\n outline-offset: 2px;\n left: var(--slider-thumb-offset);\n\n @mixin where-rtl {\n left: auto;\n right: calc(var(--slider-thumb-offset) - var(--slider-thumb-size));\n }\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n display: none;\n }\n\n &:where([data-dragging]) {\n transform: translate(-50%, -50%) scale(1.05);\n box-shadow: var(--mantine-shadow-sm);\n }\n\n @mixin where-light {\n color: var(--slider-color);\n border-color: var(--slider-color);\n background-color: var(--mantine-color-white);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-white);\n border-color: var(--mantine-color-white);\n background-color: var(--slider-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n left: 50%;\n top: auto;\n right: auto;\n bottom: var(--slider-thumb-offset);\n transform: translate(-50%, 50%);\n\n &:where([data-dragging]) {\n transform: translate(-50%, 50%) scale(1.05);\n }\n\n @mixin where-rtl {\n left: 50%;\n right: auto;\n }\n }\n}\n\n.trackContainer {\n display: flex;\n align-items: center;\n width: 100%;\n height: calc(var(--slider-size) * 2);\n cursor: pointer;\n\n fieldset:disabled &,\n &:where([data-disabled]) {\n cursor: not-allowed;\n }\n\n :where(.root[data-orientation='vertical']) & {\n flex-direction: column;\n width: calc(var(--slider-size) * 2);\n height: 100%;\n }\n}\n\n.track {\n position: relative;\n width: 100%;\n height: var(--slider-size);\n\n &:where([data-inverted]:not([data-disabled])) {\n --track-bg: var(--slider-color);\n }\n\n fieldset:disabled &:where([data-inverted]),\n &:where([data-inverted][data-disabled]) {\n --track-bg: var(--slider-track-disabled-bg);\n }\n\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n border-radius: var(--slider-radius);\n inset-inline: calc(var(--slider-size) * -1);\n background-color: var(--track-bg, var(--slider-track-bg));\n z-index: 0;\n }\n\n :where(.root[data-orientation='vertical']) & {\n width: var(--slider-size);\n height: 100%;\n\n &::before {\n inset-inline: 0;\n top: calc(var(--slider-size) * -1);\n bottom: calc(var(--slider-size) * -1);\n }\n }\n}\n\n.bar {\n position: absolute;\n z-index: 1;\n top: 0;\n bottom: 0;\n background-color: var(--slider-color);\n border-radius: var(--slider-radius);\n width: var(--slider-bar-width);\n inset-inline-start: var(--slider-bar-offset);\n\n &:where([data-inverted]) {\n background-color: var(--slider-track-bg);\n }\n\n fieldset:disabled &:where(:not([data-inverted])),\n &:where([data-disabled]:not([data-inverted])) {\n background-color: var(--mantine-color-disabled-color);\n }\n\n :where(.root[data-orientation='vertical']) & {\n top: auto;\n bottom: var(--slider-bar-offset);\n inset-inline-start: 0;\n width: 100%;\n height: var(--slider-bar-width);\n }\n}\n\n.markWrapper {\n position: absolute;\n inset-inline-start: calc(var(--mark-offset) - var(--slider-size) / 2);\n top: 0;\n z-index: 2;\n height: 0;\n pointer-events: none;\n\n :where(.root[data-orientation='vertical']) & {\n inset-inline-start: 0;\n top: auto;\n bottom: calc(var(--mark-offset) + var(--slider-size) / 2);\n height: 0;\n width: 0;\n }\n}\n\n.mark {\n border: 2px solid;\n height: var(--slider-size);\n width: var(--slider-size);\n border-radius: 1000px;\n background-color: var(--mantine-color-white);\n pointer-events: none;\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 &:where([data-filled]) {\n border-color: var(--slider-color);\n\n &:where([data-disabled]) {\n border-color: var(--mantine-color-disabled-border);\n }\n }\n}\n\n.markLabel {\n transform: translate(calc(-50% + var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n font-size: var(--mantine-font-size-sm);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n\n @mixin where-rtl {\n transform: translate(calc(50% - var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));\n }\n\n @mixin where-light {\n color: var(--mantine-color-gray-6);\n }\n\n @mixin where-dark {\n color: var(--mantine-color-dark-2);\n }\n\n :where(.root[data-orientation='vertical']) & {\n transform: translate(\n calc(var(--slider-size) + var(--mantine-spacing-xs) / 2),\n calc(-50% - var(--slider-size) / 2)\n );\n }\n}\n"],"mappings":""}
@@ -145,6 +145,7 @@ function TextareaAutosize({ maxRows, minRows, onChange, ref: userRef, ...props }
145
145
  return () => document.body.removeEventListener("reset", handleReset);
146
146
  }, [isControlled]);
147
147
  return /* @__PURE__ */ jsx("textarea", {
148
+ rows: minRows,
148
149
  ...props,
149
150
  onChange: handleChange,
150
151
  ref
@@ -1 +1 @@
1
- {"version":3,"file":"Autosize.mjs","names":[],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n ref?: React.Ref<HTMLTextAreaElement>;\n maxRows?: number;\n minRows?: number;\n style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {\n height?: number;\n };\n}\n\nconst SIZING_STYLE_KEYS = [\n 'borderBottomWidth',\n 'borderLeftWidth',\n 'borderRightWidth',\n 'borderTopWidth',\n 'boxSizing',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'fontWeight',\n 'letterSpacing',\n 'lineHeight',\n 'paddingBottom',\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'tabSize',\n 'textIndent',\n 'textRendering',\n 'textTransform',\n 'width',\n 'wordBreak',\n 'wordSpacing',\n 'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n paddingSize: number;\n borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n 'min-height': '0',\n 'max-height': 'none',\n height: '0',\n visibility: 'hidden',\n overflow: 'hidden',\n position: 'absolute',\n 'z-index': '-1000',\n top: '0',\n right: '0',\n display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData | null {\n const style = window.getComputedStyle(node);\n\n if (style === null) {\n return null;\n }\n\n const sizingStyle = {} as SizingData['sizingStyle'];\n for (const key of SIZING_STYLE_KEYS) {\n (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n }\n\n if ((sizingStyle as any).boxSizing === '') {\n return null;\n }\n\n const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n const borderSize =\n parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement | null = null;\n\nfunction calculateNodeHeight(\n sizingData: SizingData,\n value: string,\n minRows = 1,\n maxRows = Infinity\n): [number, number] {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea');\n hiddenTextarea.setAttribute('tabindex', '-1');\n hiddenTextarea.setAttribute('aria-hidden', 'true');\n hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n forceHiddenStyles(hiddenTextarea);\n }\n\n if (hiddenTextarea.parentNode === null) {\n document.body.appendChild(hiddenTextarea);\n }\n\n const { paddingSize, borderSize, sizingStyle } = sizingData;\n const { boxSizing } = sizingStyle;\n\n Object.keys(sizingStyle).forEach((key) => {\n (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n });\n\n forceHiddenStyles(hiddenTextarea);\n\n hiddenTextarea.value = value;\n let height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n hiddenTextarea.value = value;\n height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n hiddenTextarea.value = 'x';\n const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n let minHeight = rowHeight * minRows;\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize;\n }\n height = Math.max(minHeight, height);\n\n let maxHeight = rowHeight * maxRows;\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize;\n }\n height = Math.min(maxHeight, height);\n\n return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n maxRows,\n minRows,\n onChange,\n ref: userRef,\n ...props\n}: TextareaAutosizeProps) {\n const isControlled = props.value !== undefined;\n const libRef = useRef<HTMLTextAreaElement | null>(null);\n const ref = useMergedRef(libRef, userRef);\n const heightRef = useRef(0);\n const widthRef = useRef(0);\n\n const resizeTextarea = () => {\n const node = libRef.current;\n\n if (!node) {\n return;\n }\n\n const nodeSizingData = getSizingData(node);\n\n if (!nodeSizingData) {\n return;\n }\n\n const [height] = calculateNodeHeight(\n nodeSizingData,\n node.value || node.placeholder || 'x',\n minRows,\n maxRows\n );\n\n if (heightRef.current !== height) {\n heightRef.current = height;\n node.style.setProperty('height', `${height}px`, 'important');\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n resizeTextarea();\n }\n onChange?.(event);\n };\n\n useLayoutEffect(resizeTextarea);\n\n useEffect(() => {\n const handleResize = () => resizeTextarea();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n useEffect(() => {\n const node = libRef.current;\n\n if (!node || typeof ResizeObserver === 'undefined') {\n return undefined;\n }\n\n widthRef.current = node.offsetWidth;\n\n const observer = new ResizeObserver(() => {\n if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {\n widthRef.current = libRef.current.offsetWidth;\n resizeTextarea();\n }\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const handleFontsLoaded = () => resizeTextarea();\n document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n }, []);\n\n useEffect(() => {\n const handleReset = (event: Event) => {\n if (libRef.current?.form === event.target && !isControlled) {\n const currentValue = libRef.current!.value;\n requestAnimationFrame(() => {\n if (libRef.current && currentValue !== libRef.current.value) {\n resizeTextarea();\n }\n });\n }\n };\n document.body.addEventListener('reset', handleReset);\n return () => document.body.removeEventListener('reset', handleReset);\n }, [isControlled]);\n\n return <textarea {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":";;;;;AAcA,MAAM,oBAAoB;CACxB;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAUA,MAAM,wBAAgD;CACpD,cAAc;CACd,cAAc;CACd,QAAQ;CACR,YAAY;CACZ,UAAU;CACV,UAAU;CACV,WAAW;CACX,KAAK;CACL,OAAO;CACP,SAAS;AACX;AAEA,SAAS,kBAAkB,MAAmB;CAC5C,OAAO,KAAK,qBAAqB,CAAC,CAAC,SAAS,QAAQ;EAClD,KAAK,MAAM,YAAY,KAAK,sBAAsB,MAAM,WAAW;CACrE,CAAC;AACH;AAEA,SAAS,cAAc,MAAsC;CAC3D,MAAM,QAAQ,OAAO,iBAAiB,IAAI;CAE1C,IAAI,UAAU,MACZ,OAAO;CAGT,MAAM,cAAc,CAAC;CACrB,KAAK,MAAM,OAAO,mBAChB,YAAqB,OAAO,MAAM;CAGpC,IAAK,YAAoB,cAAc,IACrC,OAAO;CAQT,OAAO;EAAE;EAAa,aALF,WAAW,YAAY,aAAc,IAAI,WAAW,YAAY,UAAW;EAK5D,YAFjC,WAAW,YAAY,iBAAkB,IAAI,WAAW,YAAY,cAAe;CAEvC;AAChD;AAEA,IAAI,iBAA6C;AAEjD,SAAS,oBACP,YACA,OACA,UAAU,GACV,UAAU,UACQ;CAClB,IAAI,CAAC,gBAAgB;EACnB,iBAAiB,SAAS,cAAc,UAAU;EAClD,eAAe,aAAa,YAAY,IAAI;EAC5C,eAAe,aAAa,eAAe,MAAM;EACjD,eAAe,aAAa,cAAc,sBAAsB;EAChE,kBAAkB,cAAc;CAClC;CAEA,IAAI,eAAe,eAAe,MAChC,SAAS,KAAK,YAAY,cAAc;CAG1C,MAAM,EAAE,aAAa,YAAY,gBAAgB;CACjD,MAAM,EAAE,cAAc;CAEtB,OAAO,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;EACxC,eAAiB,MAAc,OAAQ,YAAoB;CAC7D,CAAC;CAED,kBAAkB,cAAc;CAEhC,eAAe,QAAQ;CACvB,IAAI,SACF,cAAc,eACV,eAAe,eAAe,aAC9B,eAAe,eAAe;CAGpC,eAAe,QAAQ;CACvB,SACE,cAAc,eACV,eAAe,eAAe,aAC9B,eAAe,eAAe;CAEpC,eAAe,QAAQ;CACvB,MAAM,YAAY,eAAe,eAAe;CAEhD,IAAI,YAAY,YAAY;CAC5B,IAAI,cAAc,cAChB,YAAY,YAAY,cAAc;CAExC,SAAS,KAAK,IAAI,WAAW,MAAM;CAEnC,IAAI,YAAY,YAAY;CAC5B,IAAI,cAAc,cAChB,YAAY,YAAY,cAAc;CAExC,SAAS,KAAK,IAAI,WAAW,MAAM;CAEnC,OAAO,CAAC,QAAQ,SAAS;AAC3B;AAEA,SAAgB,iBAAiB,EAC/B,SACA,SACA,UACA,KAAK,SACL,GAAG,SACqB;CACxB,MAAM,eAAe,MAAM,UAAU,KAAA;CACrC,MAAM,SAAS,OAAmC,IAAI;CACtD,MAAM,MAAM,aAAa,QAAQ,OAAO;CACxC,MAAM,YAAY,OAAO,CAAC;CAC1B,MAAM,WAAW,OAAO,CAAC;CAEzB,MAAM,uBAAuB;EAC3B,MAAM,OAAO,OAAO;EAEpB,IAAI,CAAC,MACH;EAGF,MAAM,iBAAiB,cAAc,IAAI;EAEzC,IAAI,CAAC,gBACH;EAGF,MAAM,CAAC,UAAU,oBACf,gBACA,KAAK,SAAS,KAAK,eAAe,KAClC,SACA,OACF;EAEA,IAAI,UAAU,YAAY,QAAQ;GAChC,UAAU,UAAU;GACpB,KAAK,MAAM,YAAY,UAAU,GAAG,OAAO,KAAK,WAAW;EAC7D;CACF;CAEA,MAAM,gBAAgB,UAAkD;EACtE,IAAI,CAAC,cACH,eAAe;EAEjB,WAAW,KAAK;CAClB;CAEA,gBAAgB,cAAc;CAE9B,gBAAgB;EACd,MAAM,qBAAqB,eAAe;EAC1C,OAAO,iBAAiB,UAAU,YAAY;EAC9C,aAAa,OAAO,oBAAoB,UAAU,YAAY;CAChE,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,OAAO,OAAO;EAEpB,IAAI,CAAC,QAAQ,OAAO,mBAAmB,aACrC;EAGF,SAAS,UAAU,KAAK;EAExB,MAAM,WAAW,IAAI,qBAAqB;GACxC,IAAI,OAAO,WAAW,OAAO,QAAQ,gBAAgB,SAAS,SAAS;IACrE,SAAS,UAAU,OAAO,QAAQ;IAClC,eAAe;GACjB;EACF,CAAC;EAED,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,0BAA0B,eAAe;EAC/C,SAAS,MAAM,iBAAiB,eAAe,iBAAiB;EAChE,aAAa,SAAS,MAAM,oBAAoB,eAAe,iBAAiB;CAClF,GAAG,CAAC,CAAC;CAEL,gBAAgB;EACd,MAAM,eAAe,UAAiB;GACpC,IAAI,OAAO,SAAS,SAAS,MAAM,UAAU,CAAC,cAAc;IAC1D,MAAM,eAAe,OAAO,QAAS;IACrC,4BAA4B;KAC1B,IAAI,OAAO,WAAW,iBAAiB,OAAO,QAAQ,OACpD,eAAe;IAEnB,CAAC;GACH;EACF;EACA,SAAS,KAAK,iBAAiB,SAAS,WAAW;EACnD,aAAa,SAAS,KAAK,oBAAoB,SAAS,WAAW;CACrE,GAAG,CAAC,YAAY,CAAC;CAEjB,OAAO,oBAAC,YAAD;EAAU,GAAI;EAAO,UAAU;EAAmB;CAAM,CAAA;AACjE"}
1
+ {"version":3,"file":"Autosize.mjs","names":[],"sources":["../../../src/components/Textarea/Autosize.tsx"],"sourcesContent":["import React, { useEffect, useLayoutEffect, useRef } from 'react';\nimport { useMergedRef } from '@mantine/hooks';\n\ntype TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;\n\nexport interface TextareaAutosizeProps extends Omit<TextareaProps, 'style'> {\n ref?: React.Ref<HTMLTextAreaElement>;\n maxRows?: number;\n minRows?: number;\n style?: Omit<NonNullable<TextareaProps['style']>, 'maxHeight' | 'minHeight'> & {\n height?: number;\n };\n}\n\nconst SIZING_STYLE_KEYS = [\n 'borderBottomWidth',\n 'borderLeftWidth',\n 'borderRightWidth',\n 'borderTopWidth',\n 'boxSizing',\n 'fontFamily',\n 'fontSize',\n 'fontStyle',\n 'fontWeight',\n 'letterSpacing',\n 'lineHeight',\n 'paddingBottom',\n 'paddingLeft',\n 'paddingRight',\n 'paddingTop',\n 'tabSize',\n 'textIndent',\n 'textRendering',\n 'textTransform',\n 'width',\n 'wordBreak',\n 'wordSpacing',\n 'scrollbarGutter',\n] as const;\n\ntype SizingStyleKey = (typeof SIZING_STYLE_KEYS)[number];\n\ninterface SizingData {\n sizingStyle: Pick<CSSStyleDeclaration, Extract<SizingStyleKey, keyof CSSStyleDeclaration>>;\n paddingSize: number;\n borderSize: number;\n}\n\nconst HIDDEN_TEXTAREA_STYLE: Record<string, string> = {\n 'min-height': '0',\n 'max-height': 'none',\n height: '0',\n visibility: 'hidden',\n overflow: 'hidden',\n position: 'absolute',\n 'z-index': '-1000',\n top: '0',\n right: '0',\n display: 'block',\n};\n\nfunction forceHiddenStyles(node: HTMLElement) {\n Object.keys(HIDDEN_TEXTAREA_STYLE).forEach((key) => {\n node.style.setProperty(key, HIDDEN_TEXTAREA_STYLE[key], 'important');\n });\n}\n\nfunction getSizingData(node: HTMLElement): SizingData | null {\n const style = window.getComputedStyle(node);\n\n if (style === null) {\n return null;\n }\n\n const sizingStyle = {} as SizingData['sizingStyle'];\n for (const key of SIZING_STYLE_KEYS) {\n (sizingStyle as any)[key] = style[key as keyof CSSStyleDeclaration];\n }\n\n if ((sizingStyle as any).boxSizing === '') {\n return null;\n }\n\n const paddingSize = parseFloat(sizingStyle.paddingBottom!) + parseFloat(sizingStyle.paddingTop!);\n\n const borderSize =\n parseFloat(sizingStyle.borderBottomWidth!) + parseFloat(sizingStyle.borderTopWidth!);\n\n return { sizingStyle, paddingSize, borderSize };\n}\n\nlet hiddenTextarea: HTMLTextAreaElement | null = null;\n\nfunction calculateNodeHeight(\n sizingData: SizingData,\n value: string,\n minRows = 1,\n maxRows = Infinity\n): [number, number] {\n if (!hiddenTextarea) {\n hiddenTextarea = document.createElement('textarea');\n hiddenTextarea.setAttribute('tabindex', '-1');\n hiddenTextarea.setAttribute('aria-hidden', 'true');\n hiddenTextarea.setAttribute('aria-label', 'autosize measurement');\n forceHiddenStyles(hiddenTextarea);\n }\n\n if (hiddenTextarea.parentNode === null) {\n document.body.appendChild(hiddenTextarea);\n }\n\n const { paddingSize, borderSize, sizingStyle } = sizingData;\n const { boxSizing } = sizingStyle;\n\n Object.keys(sizingStyle).forEach((key) => {\n (hiddenTextarea!.style as any)[key] = (sizingStyle as any)[key];\n });\n\n forceHiddenStyles(hiddenTextarea);\n\n hiddenTextarea.value = value;\n let height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n // Double set and calc due to Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1795904\n hiddenTextarea.value = value;\n height =\n boxSizing === 'border-box'\n ? hiddenTextarea.scrollHeight + borderSize\n : hiddenTextarea.scrollHeight - paddingSize;\n\n hiddenTextarea.value = 'x';\n const rowHeight = hiddenTextarea.scrollHeight - paddingSize;\n\n let minHeight = rowHeight * minRows;\n if (boxSizing === 'border-box') {\n minHeight = minHeight + paddingSize + borderSize;\n }\n height = Math.max(minHeight, height);\n\n let maxHeight = rowHeight * maxRows;\n if (boxSizing === 'border-box') {\n maxHeight = maxHeight + paddingSize + borderSize;\n }\n height = Math.min(maxHeight, height);\n\n return [height, rowHeight];\n}\n\nexport function TextareaAutosize({\n maxRows,\n minRows,\n onChange,\n ref: userRef,\n ...props\n}: TextareaAutosizeProps) {\n const isControlled = props.value !== undefined;\n const libRef = useRef<HTMLTextAreaElement | null>(null);\n const ref = useMergedRef(libRef, userRef);\n const heightRef = useRef(0);\n const widthRef = useRef(0);\n\n const resizeTextarea = () => {\n const node = libRef.current;\n\n if (!node) {\n return;\n }\n\n const nodeSizingData = getSizingData(node);\n\n if (!nodeSizingData) {\n return;\n }\n\n const [height] = calculateNodeHeight(\n nodeSizingData,\n node.value || node.placeholder || 'x',\n minRows,\n maxRows\n );\n\n if (heightRef.current !== height) {\n heightRef.current = height;\n node.style.setProperty('height', `${height}px`, 'important');\n }\n };\n\n const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n if (!isControlled) {\n resizeTextarea();\n }\n onChange?.(event);\n };\n\n useLayoutEffect(resizeTextarea);\n\n useEffect(() => {\n const handleResize = () => resizeTextarea();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n useEffect(() => {\n const node = libRef.current;\n\n if (!node || typeof ResizeObserver === 'undefined') {\n return undefined;\n }\n\n widthRef.current = node.offsetWidth;\n\n const observer = new ResizeObserver(() => {\n if (libRef.current && libRef.current.offsetWidth !== widthRef.current) {\n widthRef.current = libRef.current.offsetWidth;\n resizeTextarea();\n }\n });\n\n observer.observe(node);\n return () => observer.disconnect();\n }, []);\n\n useEffect(() => {\n const handleFontsLoaded = () => resizeTextarea();\n document.fonts.addEventListener('loadingdone', handleFontsLoaded);\n return () => document.fonts.removeEventListener('loadingdone', handleFontsLoaded);\n }, []);\n\n useEffect(() => {\n const handleReset = (event: Event) => {\n if (libRef.current?.form === event.target && !isControlled) {\n const currentValue = libRef.current!.value;\n requestAnimationFrame(() => {\n if (libRef.current && currentValue !== libRef.current.value) {\n resizeTextarea();\n }\n });\n }\n };\n document.body.addEventListener('reset', handleReset);\n return () => document.body.removeEventListener('reset', handleReset);\n }, [isControlled]);\n\n return <textarea rows={minRows} {...props} onChange={handleChange} ref={ref} />;\n}\n"],"mappings":"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"}
@@ -7,6 +7,7 @@ function FloatingArrow({ position, arrowSize, arrowOffset, arrowRadius, arrowPos
7
7
  const { dir } = useDirection();
8
8
  if (!visible) return null;
9
9
  return /* @__PURE__ */ jsx("div", {
10
+ role: "presentation",
10
11
  ...others,
11
12
  style: {
12
13
  ...style,
@@ -1 +1 @@
1
- {"version":3,"file":"FloatingArrow.mjs","names":[],"sources":["../../../../src/utils/Floating/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import { useDirection } from '../../../core';\nimport { ArrowPosition, FloatingPosition } from '../types';\nimport { getArrowPositionStyles } from './get-arrow-position-styles';\n\ninterface FloatingArrowProps extends React.ComponentProps<'div'> {\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n arrowX: number | undefined;\n arrowY: number | undefined;\n visible: boolean | undefined;\n}\n\nexport function FloatingArrow({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n visible,\n arrowX,\n arrowY,\n style,\n ...others\n}: FloatingArrowProps) {\n const { dir } = useDirection();\n if (!visible) {\n return null;\n }\n\n return (\n <div\n {...others}\n style={{\n ...style,\n ...getArrowPositionStyles({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n dir,\n arrowX,\n arrowY,\n }),\n }}\n />\n );\n}\n\nFloatingArrow.displayName = '@mantine/core/FloatingArrow';\n"],"mappings":";;;;;AAeA,SAAgB,cAAc,EAC5B,UACA,WACA,aACA,aACA,eACA,SACA,QACA,QACA,OACA,GAAG,UACkB;CACrB,MAAM,EAAE,QAAQ,aAAa;CAC7B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,OAAD;EACE,GAAI;EACJ,OAAO;GACL,GAAG;GACH,GAAG,uBAAuB;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAAC;EACH;CACD,CAAA;AAEL;AAEA,cAAc,cAAc"}
1
+ {"version":3,"file":"FloatingArrow.mjs","names":[],"sources":["../../../../src/utils/Floating/FloatingArrow/FloatingArrow.tsx"],"sourcesContent":["import { useDirection } from '../../../core';\nimport { ArrowPosition, FloatingPosition } from '../types';\nimport { getArrowPositionStyles } from './get-arrow-position-styles';\n\ninterface FloatingArrowProps extends React.ComponentProps<'div'> {\n position: FloatingPosition;\n arrowSize: number;\n arrowOffset: number;\n arrowRadius: number;\n arrowPosition: ArrowPosition;\n arrowX: number | undefined;\n arrowY: number | undefined;\n visible: boolean | undefined;\n}\n\nexport function FloatingArrow({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n visible,\n arrowX,\n arrowY,\n style,\n ...others\n}: FloatingArrowProps) {\n const { dir } = useDirection();\n if (!visible) {\n return null;\n }\n\n return (\n <div\n role=\"presentation\"\n {...others}\n style={{\n ...style,\n ...getArrowPositionStyles({\n position,\n arrowSize,\n arrowOffset,\n arrowRadius,\n arrowPosition,\n dir,\n arrowX,\n arrowY,\n }),\n }}\n />\n );\n}\n\nFloatingArrow.displayName = '@mantine/core/FloatingArrow';\n"],"mappings":";;;;;AAeA,SAAgB,cAAc,EAC5B,UACA,WACA,aACA,aACA,eACA,SACA,QACA,QACA,OACA,GAAG,UACkB;CACrB,MAAM,EAAE,QAAQ,aAAa;CAC7B,IAAI,CAAC,SACH,OAAO;CAGT,OACE,oBAAC,OAAD;EACE,MAAK;EACL,GAAI;EACJ,OAAO;GACL,GAAG;GACH,GAAG,uBAAuB;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF,CAAC;EACH;CACD,CAAA;AAEL;AAEA,cAAc,cAAc"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mantine/core",
3
- "version": "9.4.0",
3
+ "version": "9.4.1",
4
4
  "description": "React components library focused on usability, accessibility and developer experience",
5
5
  "homepage": "https://mantine.dev/",
6
6
  "license": "MIT",
@@ -43,7 +43,7 @@
43
43
  "directory": "packages/@mantine/core"
44
44
  },
45
45
  "peerDependencies": {
46
- "@mantine/hooks": "9.4.0",
46
+ "@mantine/hooks": "9.4.1",
47
47
  "react": "^19.2.0",
48
48
  "react-dom": "^19.2.0"
49
49
  },
package/styles/Slider.css CHANGED
@@ -262,6 +262,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
262
262
  user-select: none;
263
263
  }
264
264
 
265
+ :where([dir="rtl"]) .m_68c77a5b {
266
+ transform: translate(calc(50% - var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
267
+ }
268
+
265
269
  :where([data-mantine-color-scheme='light']) .m_68c77a5b {
266
270
  color: var(--mantine-color-gray-6);
267
271
  }
@@ -262,6 +262,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
262
262
  user-select: none;
263
263
  }
264
264
 
265
+ :where([dir="rtl"]) .m_68c77a5b {
266
+ transform: translate(calc(50% - var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
267
+ }
268
+
265
269
  :where([data-mantine-color-scheme='light']) .m_68c77a5b {
266
270
  color: var(--mantine-color-gray-6);
267
271
  }
package/styles.css CHANGED
@@ -7189,6 +7189,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
7189
7189
  user-select: none;
7190
7190
  }
7191
7191
 
7192
+ :where([dir="rtl"]) .m_68c77a5b {
7193
+ transform: translate(calc(50% - var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
7194
+ }
7195
+
7192
7196
  :where([data-mantine-color-scheme='light']) .m_68c77a5b {
7193
7197
  color: var(--mantine-color-gray-6);
7194
7198
  }
package/styles.layer.css CHANGED
@@ -7189,6 +7189,10 @@ fieldset:disabled .m_38aeed47:where(:not([data-inverted])),
7189
7189
  user-select: none;
7190
7190
  }
7191
7191
 
7192
+ :where([dir="rtl"]) .m_68c77a5b {
7193
+ transform: translate(calc(50% - var(--slider-size) / 2), calc(var(--mantine-spacing-xs) / 2));
7194
+ }
7195
+
7192
7196
  :where([data-mantine-color-scheme='light']) .m_68c77a5b {
7193
7197
  color: var(--mantine-color-gray-6);
7194
7198
  }