@mantine/core 9.4.0 → 9.4.2

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 (86) hide show
  1. package/cjs/components/Accordion/Accordion.cjs +5 -3
  2. package/cjs/components/Accordion/Accordion.cjs.map +1 -1
  3. package/cjs/components/Accordion/Accordion.context.cjs.map +1 -1
  4. package/cjs/components/Accordion/AccordionPanel/AccordionPanel.cjs +2 -1
  5. package/cjs/components/Accordion/AccordionPanel/AccordionPanel.cjs.map +1 -1
  6. package/cjs/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.cjs +2 -2
  7. package/cjs/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.cjs.map +1 -1
  8. package/cjs/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.cjs +2 -2
  9. package/cjs/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.cjs.map +1 -1
  10. package/cjs/components/Collapse/Collapse.cjs +26 -9
  11. package/cjs/components/Collapse/Collapse.cjs.map +1 -1
  12. package/cjs/components/Menu/MenuDropdown/MenuDropdown.cjs +1 -0
  13. package/cjs/components/Menu/MenuDropdown/MenuDropdown.cjs.map +1 -1
  14. package/cjs/components/Menubar/MenubarTarget/MenubarTarget.cjs +1 -1
  15. package/cjs/components/Menubar/MenubarTarget/MenubarTarget.cjs.map +1 -1
  16. package/cjs/components/ModalBase/ModalBase.cjs +3 -2
  17. package/cjs/components/ModalBase/ModalBase.cjs.map +1 -1
  18. package/cjs/components/RollingNumber/get-digit-parts.cjs +2 -1
  19. package/cjs/components/RollingNumber/get-digit-parts.cjs.map +1 -1
  20. package/cjs/components/Slider/Slider.module.cjs.map +1 -1
  21. package/cjs/components/Textarea/Autosize.cjs +1 -0
  22. package/cjs/components/Textarea/Autosize.cjs.map +1 -1
  23. package/cjs/components/Transition/Transition.cjs.map +1 -1
  24. package/cjs/components/Tree/FlatTreeNode.cjs +16 -3
  25. package/cjs/components/Tree/FlatTreeNode.cjs.map +1 -1
  26. package/cjs/components/Tree/Tree.module.cjs.map +1 -1
  27. package/cjs/components/Tree/TreeNode.cjs +17 -5
  28. package/cjs/components/Tree/TreeNode.cjs.map +1 -1
  29. package/cjs/components/Tree/flatten-tree-data/flatten-tree-data.cjs +1 -1
  30. package/cjs/components/Tree/flatten-tree-data/flatten-tree-data.cjs.map +1 -1
  31. package/cjs/components/TreeSelect/TreeSelectOption.cjs +5 -3
  32. package/cjs/components/TreeSelect/TreeSelectOption.cjs.map +1 -1
  33. package/cjs/components/TreeSelect/flatten-tree-select-data.cjs +1 -1
  34. package/cjs/components/TreeSelect/flatten-tree-select-data.cjs.map +1 -1
  35. package/cjs/utils/Floating/FloatingArrow/FloatingArrow.cjs +1 -0
  36. package/cjs/utils/Floating/FloatingArrow/FloatingArrow.cjs.map +1 -1
  37. package/esm/components/Accordion/Accordion.context.mjs.map +1 -1
  38. package/esm/components/Accordion/Accordion.mjs +5 -3
  39. package/esm/components/Accordion/Accordion.mjs.map +1 -1
  40. package/esm/components/Accordion/AccordionPanel/AccordionPanel.mjs +2 -1
  41. package/esm/components/Accordion/AccordionPanel/AccordionPanel.mjs.map +1 -1
  42. package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.mjs +2 -2
  43. package/esm/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.mjs.map +1 -1
  44. package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs +2 -2
  45. package/esm/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.mjs.map +1 -1
  46. package/esm/components/Collapse/Collapse.mjs +26 -9
  47. package/esm/components/Collapse/Collapse.mjs.map +1 -1
  48. package/esm/components/Menu/MenuDropdown/MenuDropdown.mjs +1 -0
  49. package/esm/components/Menu/MenuDropdown/MenuDropdown.mjs.map +1 -1
  50. package/esm/components/Menubar/MenubarTarget/MenubarTarget.mjs +1 -1
  51. package/esm/components/Menubar/MenubarTarget/MenubarTarget.mjs.map +1 -1
  52. package/esm/components/ModalBase/ModalBase.mjs +3 -2
  53. package/esm/components/ModalBase/ModalBase.mjs.map +1 -1
  54. package/esm/components/RollingNumber/get-digit-parts.mjs +2 -1
  55. package/esm/components/RollingNumber/get-digit-parts.mjs.map +1 -1
  56. package/esm/components/Slider/Slider.module.mjs.map +1 -1
  57. package/esm/components/Textarea/Autosize.mjs +1 -0
  58. package/esm/components/Textarea/Autosize.mjs.map +1 -1
  59. package/esm/components/Transition/Transition.mjs.map +1 -1
  60. package/esm/components/Tree/FlatTreeNode.mjs +16 -3
  61. package/esm/components/Tree/FlatTreeNode.mjs.map +1 -1
  62. package/esm/components/Tree/Tree.module.mjs.map +1 -1
  63. package/esm/components/Tree/TreeNode.mjs +17 -5
  64. package/esm/components/Tree/TreeNode.mjs.map +1 -1
  65. package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs +1 -1
  66. package/esm/components/Tree/flatten-tree-data/flatten-tree-data.mjs.map +1 -1
  67. package/esm/components/TreeSelect/TreeSelectOption.mjs +5 -3
  68. package/esm/components/TreeSelect/TreeSelectOption.mjs.map +1 -1
  69. package/esm/components/TreeSelect/flatten-tree-select-data.mjs +1 -1
  70. package/esm/components/TreeSelect/flatten-tree-select-data.mjs.map +1 -1
  71. package/esm/utils/Floating/FloatingArrow/FloatingArrow.mjs +1 -0
  72. package/esm/utils/Floating/FloatingArrow/FloatingArrow.mjs.map +1 -1
  73. package/lib/components/Accordion/Accordion.context.d.ts +1 -0
  74. package/lib/components/Accordion/Accordion.d.ts +2 -0
  75. package/lib/components/Accordion/AccordionPanel/AccordionPanel.d.ts +2 -0
  76. package/lib/components/Collapse/Collapse.d.ts +6 -0
  77. package/lib/components/ModalBase/ModalBase.d.ts +7 -1
  78. package/lib/components/Transition/Transition.d.ts +2 -2
  79. package/lib/components/TreeSelect/TreeSelectOption.d.ts +4 -0
  80. package/package.json +2 -2
  81. package/styles/Slider.css +4 -0
  82. package/styles/Slider.layer.css +4 -0
  83. package/styles/Tree.css +1 -1
  84. package/styles/Tree.layer.css +1 -1
  85. package/styles.css +5 -1
  86. package/styles.layer.css +5 -1
@@ -10,7 +10,7 @@ function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, asid
10
10
  const asideWidth = aside?.width;
11
11
  const collapsedAsideTransform = "translateX(var(--app-shell-aside-width))";
12
12
  const collapsedAsideTransformRtl = "translateX(calc(var(--app-shell-aside-width) * -1))";
13
- if (aside?.breakpoint && !aside?.collapsed?.mobile) {
13
+ if (aside?.breakpoint !== void 0 && !aside?.collapsed?.mobile) {
14
14
  maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};
15
15
  if (mode === "fixed") {
16
16
  maxMediaStyles[aside?.breakpoint]["--app-shell-aside-width"] = "100%";
@@ -38,7 +38,7 @@ function assignAsideVariables({ baseStyles, minMediaStyles, maxMediaStyles, asid
38
38
  }
39
39
  });
40
40
  }
41
- if (aside?.breakpoint && mode === "static") {
41
+ if (aside?.breakpoint !== void 0 && mode === "static") {
42
42
  minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};
43
43
  minMediaStyles[aside.breakpoint]["--app-shell-aside-position"] = "sticky";
44
44
  minMediaStyles[aside.breakpoint]["--app-shell-aside-grid-row"] = "2";
@@ -1 +1 @@
1
- {"version":3,"file":"assign-aside-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignAsideVariablesInput {\n baseStyles: CSSVariables;\n minMediaStyles: MediaQueryVariables;\n maxMediaStyles: MediaQueryVariables;\n aside: AppShellProps['aside'] | undefined;\n theme: MantineTheme;\n mode: 'fixed' | 'static';\n}\n\nexport function assignAsideVariables({\n baseStyles,\n minMediaStyles,\n maxMediaStyles,\n aside,\n theme,\n mode,\n}: AssignAsideVariablesInput) {\n const asideWidth = aside?.width;\n const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n if (aside?.breakpoint && !aside?.collapsed?.mobile) {\n maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n if (mode === 'fixed') {\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n } else {\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n }\n }\n\n if (isPrimitiveSize(asideWidth)) {\n const baseSize = rem(getBaseSize(asideWidth));\n baseStyles['--app-shell-aside-width'] = baseSize;\n baseStyles['--app-shell-aside-offset'] = baseSize;\n }\n\n if (isResponsiveSize(asideWidth)) {\n if (typeof asideWidth.base !== 'undefined') {\n baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n }\n\n keys(asideWidth).forEach((key) => {\n if (key !== 'base') {\n minMediaStyles[key] = minMediaStyles[key] || {};\n minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n }\n });\n }\n\n if (aside?.breakpoint && mode === 'static') {\n minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n // Adjust main column end when aside is visible\n minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n }\n\n if (aside?.collapsed?.desktop) {\n const breakpointValue = aside!.breakpoint;\n minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n if (mode === 'fixed') {\n minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n } else {\n minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n }\n minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n }\n\n if (aside?.collapsed?.mobile) {\n const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n if (mode === 'fixed') {\n maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n } else {\n maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n }\n maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,QAC4B;CAC5B,MAAM,aAAa,OAAO;CAC1B,MAAM,0BAA0B;CAChC,MAAM,6BAA6B;CAEnC,IAAI,OAAO,cAAc,CAAC,OAAO,WAAW,QAAQ;EAClD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,IAAI,SAAS,SAAS;GACpB,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE,OAAO;GACL,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE;CACF;CAEA,IAAI,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAW,IAAI,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAI,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6B,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8B,IAAI,WAAW,IAAI;EAC9D;EAEA,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,6BAA6B,IAAI,WAAY,IAAI;IACrE,eAAe,IAAI,CAAC,8BAA8B,IAAI,WAAY,IAAI;GACxE;EACF,CAAC;CACH;CAEA,IAAI,OAAO,cAAc,SAAS,UAAU;EAC1C,eAAe,MAAM,cAAc,eAAe,MAAM,eAAe,CAAC;EACxE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,mCAAmC;EAEpE,eAAe,MAAM,WAAW,CAAC,iCAAiC;CACpE;CAEA,IAAI,OAAO,WAAW,SAAS;EAC7B,MAAM,kBAAkB,MAAO;EAC/B,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,8BAA8B;OACzD;GACL,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,+BAA+B;GAC/D,eAAe,gBAAgB,CAAC,iCAAiC;EACnE;EACA,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkB,mBAAmB,MAAO,YAAY,MAAM,WAAW,IAAI;EACnF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,IAAI,SAAS,SAAS;GACpB,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,8BAA8B;EAChE,OACE,eAAe,gBAAgB,CAAC,6BAA6B;EAE/D,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;AACF"}
1
+ {"version":3,"file":"assign-aside-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-aside-variables/assign-aside-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignAsideVariablesInput {\n baseStyles: CSSVariables;\n minMediaStyles: MediaQueryVariables;\n maxMediaStyles: MediaQueryVariables;\n aside: AppShellProps['aside'] | undefined;\n theme: MantineTheme;\n mode: 'fixed' | 'static';\n}\n\nexport function assignAsideVariables({\n baseStyles,\n minMediaStyles,\n maxMediaStyles,\n aside,\n theme,\n mode,\n}: AssignAsideVariablesInput) {\n const asideWidth = aside?.width;\n const collapsedAsideTransform = 'translateX(var(--app-shell-aside-width))';\n const collapsedAsideTransformRtl = 'translateX(calc(var(--app-shell-aside-width) * -1))';\n\n if (aside?.breakpoint !== undefined && !aside?.collapsed?.mobile) {\n maxMediaStyles[aside?.breakpoint] = maxMediaStyles[aside?.breakpoint] || {};\n if (mode === 'fixed') {\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '100%';\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n } else {\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-width'] = '0px';\n maxMediaStyles[aside?.breakpoint]['--app-shell-aside-offset'] = '0px';\n }\n }\n\n if (isPrimitiveSize(asideWidth)) {\n const baseSize = rem(getBaseSize(asideWidth));\n baseStyles['--app-shell-aside-width'] = baseSize;\n baseStyles['--app-shell-aside-offset'] = baseSize;\n }\n\n if (isResponsiveSize(asideWidth)) {\n if (typeof asideWidth.base !== 'undefined') {\n baseStyles['--app-shell-aside-width'] = rem(asideWidth.base);\n baseStyles['--app-shell-aside-offset'] = rem(asideWidth.base);\n }\n\n keys(asideWidth).forEach((key) => {\n if (key !== 'base') {\n minMediaStyles[key] = minMediaStyles[key] || {};\n minMediaStyles[key]['--app-shell-aside-width'] = rem(asideWidth![key]);\n minMediaStyles[key]['--app-shell-aside-offset'] = rem(asideWidth![key]);\n }\n });\n }\n\n if (aside?.breakpoint !== undefined && mode === 'static') {\n minMediaStyles[aside.breakpoint] = minMediaStyles[aside.breakpoint] || {};\n minMediaStyles[aside.breakpoint]['--app-shell-aside-position'] = 'sticky';\n minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-row'] = '2';\n minMediaStyles[aside.breakpoint]['--app-shell-aside-grid-column'] = '3';\n // Adjust main column end when aside is visible\n minMediaStyles[aside.breakpoint]['--app-shell-main-column-end'] = '3';\n }\n\n if (aside?.collapsed?.desktop) {\n const breakpointValue = aside!.breakpoint;\n minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n minMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n minMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n if (mode === 'fixed') {\n minMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px !important';\n } else {\n minMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n minMediaStyles[breakpointValue]['--app-shell-aside-display'] = 'none';\n minMediaStyles[breakpointValue]['--app-shell-main-column-end'] = '-1';\n }\n minMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n }\n\n if (aside?.collapsed?.mobile) {\n const breakpointValue = getBreakpointValue(aside!.breakpoint, theme.breakpoints) - 0.1;\n maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n if (mode === 'fixed') {\n maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '100%';\n maxMediaStyles[breakpointValue]['--app-shell-aside-offset'] = '0px';\n } else {\n maxMediaStyles[breakpointValue]['--app-shell-aside-width'] = '0px';\n }\n maxMediaStyles[breakpointValue]['--app-shell-aside-transform'] = collapsedAsideTransform;\n maxMediaStyles[breakpointValue]['--app-shell-aside-transform-rtl'] = collapsedAsideTransformRtl;\n maxMediaStyles[breakpointValue]['--app-shell-aside-scroll-locked-visibility'] = 'hidden';\n }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,qBAAqB,EACnC,YACA,gBACA,gBACA,OACA,OACA,QAC4B;CAC5B,MAAM,aAAa,OAAO;CAC1B,MAAM,0BAA0B;CAChC,MAAM,6BAA6B;CAEnC,IAAI,OAAO,eAAe,KAAA,KAAa,CAAC,OAAO,WAAW,QAAQ;EAChE,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,IAAI,SAAS,SAAS;GACpB,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE,OAAO;GACL,eAAe,OAAO,WAAW,CAAC,6BAA6B;GAC/D,eAAe,OAAO,WAAW,CAAC,8BAA8B;EAClE;CACF;CAEA,IAAI,gBAAgB,UAAU,GAAG;EAC/B,MAAM,WAAW,IAAI,YAAY,UAAU,CAAC;EAC5C,WAAW,6BAA6B;EACxC,WAAW,8BAA8B;CAC3C;CAEA,IAAI,iBAAiB,UAAU,GAAG;EAChC,IAAI,OAAO,WAAW,SAAS,aAAa;GAC1C,WAAW,6BAA6B,IAAI,WAAW,IAAI;GAC3D,WAAW,8BAA8B,IAAI,WAAW,IAAI;EAC9D;EAEA,KAAK,UAAU,CAAC,CAAC,SAAS,QAAQ;GAChC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,6BAA6B,IAAI,WAAY,IAAI;IACrE,eAAe,IAAI,CAAC,8BAA8B,IAAI,WAAY,IAAI;GACxE;EACF,CAAC;CACH;CAEA,IAAI,OAAO,eAAe,KAAA,KAAa,SAAS,UAAU;EACxD,eAAe,MAAM,cAAc,eAAe,MAAM,eAAe,CAAC;EACxE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,gCAAgC;EACjE,eAAe,MAAM,WAAW,CAAC,mCAAmC;EAEpE,eAAe,MAAM,WAAW,CAAC,iCAAiC;CACpE;CAEA,IAAI,OAAO,WAAW,SAAS;EAC7B,MAAM,kBAAkB,MAAO;EAC/B,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,8BAA8B;OACzD;GACL,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,+BAA+B;GAC/D,eAAe,gBAAgB,CAAC,iCAAiC;EACnE;EACA,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;CAEA,IAAI,OAAO,WAAW,QAAQ;EAC5B,MAAM,kBAAkB,mBAAmB,MAAO,YAAY,MAAM,WAAW,IAAI;EACnF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,IAAI,SAAS,SAAS;GACpB,eAAe,gBAAgB,CAAC,6BAA6B;GAC7D,eAAe,gBAAgB,CAAC,8BAA8B;EAChE,OACE,eAAe,gBAAgB,CAAC,6BAA6B;EAE/D,eAAe,gBAAgB,CAAC,iCAAiC;EACjE,eAAe,gBAAgB,CAAC,qCAAqC;EACrE,eAAe,gBAAgB,CAAC,gDAAgD;CAClF;AACF"}
@@ -10,7 +10,7 @@ function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, nav
10
10
  const navbarWidth = navbar?.width;
11
11
  const collapsedNavbarTransform = "translateX(calc(var(--app-shell-navbar-width) * -1))";
12
12
  const collapsedNavbarTransformRtl = "translateX(var(--app-shell-navbar-width))";
13
- if (navbar?.breakpoint && !navbar?.collapsed?.mobile) {
13
+ if (navbar?.breakpoint !== void 0 && !navbar?.collapsed?.mobile) {
14
14
  maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};
15
15
  maxMediaStyles[navbar?.breakpoint]["--app-shell-navbar-offset"] = "0px";
16
16
  maxMediaStyles[navbar?.breakpoint]["--app-shell-navbar-width"] = "100%";
@@ -37,7 +37,7 @@ function assignNavbarVariables({ baseStyles, minMediaStyles, maxMediaStyles, nav
37
37
  }
38
38
  });
39
39
  }
40
- if (navbar?.breakpoint && mode === "static") {
40
+ if (navbar?.breakpoint !== void 0 && mode === "static") {
41
41
  minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};
42
42
  minMediaStyles[navbar.breakpoint]["--app-shell-navbar-position"] = "sticky";
43
43
  minMediaStyles[navbar.breakpoint]["--app-shell-navbar-grid-row"] = "2";
@@ -1 +1 @@
1
- {"version":3,"file":"assign-navbar-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n baseStyles: CSSVariables;\n minMediaStyles: MediaQueryVariables;\n maxMediaStyles: MediaQueryVariables;\n navbar: AppShellProps['navbar'] | undefined;\n theme: MantineTheme;\n mode: 'fixed' | 'static';\n}\n\nexport function assignNavbarVariables({\n baseStyles,\n minMediaStyles,\n maxMediaStyles,\n navbar,\n theme,\n mode,\n}: AssignNavbarVariablesInput) {\n const navbarWidth = navbar?.width;\n const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n if (navbar?.breakpoint && !navbar?.collapsed?.mobile) {\n maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n if (mode === 'static') {\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n }\n }\n\n if (isPrimitiveSize(navbarWidth)) {\n const baseSize = rem(getBaseSize(navbarWidth));\n baseStyles['--app-shell-navbar-width'] = baseSize;\n baseStyles['--app-shell-navbar-offset'] = baseSize;\n if (mode === 'static') {\n baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n }\n }\n\n if (isResponsiveSize(navbarWidth)) {\n if (typeof navbarWidth.base !== 'undefined') {\n baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n if (mode === 'static') {\n baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n }\n }\n\n keys(navbarWidth).forEach((key) => {\n if (key !== 'base') {\n minMediaStyles[key] = minMediaStyles[key] || {};\n minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n if (mode === 'static') {\n minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n }\n }\n });\n }\n\n if (navbar?.breakpoint && mode === 'static') {\n minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n }\n\n if (navbar?.collapsed?.desktop) {\n const breakpointValue = navbar!.breakpoint;\n minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n collapsedNavbarTransformRtl;\n if (mode === 'fixed') {\n minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n } else {\n // In static mode, hide the element completely so grid column collapses\n minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n }\n }\n\n if (navbar?.collapsed?.mobile) {\n const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n if (mode === 'static') {\n maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n }\n maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n collapsedNavbarTransformRtl;\n }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,QAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,cAAc,CAAC,QAAQ,WAAW,QAAQ;EACpD,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,WAAW,CAAC,+BAA+B;EAClE,eAAe,QAAQ,WAAW,CAAC,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,WAAW,CAAC,mCAAmC;CAE1E;CAEA,IAAI,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAW,IAAI,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAI,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8B,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+B,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmC,IAAI,YAAY,IAAI;EAEtE;EAEA,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,8BAA8B,IAAI,YAAa,IAAI;IACvE,eAAe,IAAI,CAAC,+BAA+B,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,IAAI,CAAC,mCAAmC,IAAI,YAAa,IAAI;GAEhF;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,cAAc,SAAS,UAAU;EAC3C,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,oCAAoC;EACtE,eAAe,OAAO,WAAW,CAAC,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,+BAA+B;OAC1D;GAEL,eAAe,gBAAgB,CAAC,8BAA8B;GAC9D,eAAe,gBAAgB,CAAC,gCAAgC;GAChE,eAAe,gBAAgB,CAAC,mCAAmC;EACrE;CACF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkB,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,8BAA8B;EAC9D,eAAe,gBAAgB,CAAC,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,gBAAgB,CAAC,mCAAmC;EAErE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;CACJ;AACF"}
1
+ {"version":3,"file":"assign-navbar-variables.mjs","names":[],"sources":["../../../../../src/components/AppShell/AppShellMediaStyles/assign-navbar-variables/assign-navbar-variables.ts"],"sourcesContent":["import { getBreakpointValue, keys, MantineTheme, rem } from '../../../../core';\nimport type { AppShellProps } from '../../AppShell';\nimport { getBaseSize } from '../get-base-size/get-base-size';\nimport type { CSSVariables, MediaQueryVariables } from '../get-variables/get-variables';\nimport { isPrimitiveSize } from '../is-primitive-size/is-primitive-size';\nimport { isResponsiveSize } from '../is-responsive-size/is-responsive-size';\n\ninterface AssignNavbarVariablesInput {\n baseStyles: CSSVariables;\n minMediaStyles: MediaQueryVariables;\n maxMediaStyles: MediaQueryVariables;\n navbar: AppShellProps['navbar'] | undefined;\n theme: MantineTheme;\n mode: 'fixed' | 'static';\n}\n\nexport function assignNavbarVariables({\n baseStyles,\n minMediaStyles,\n maxMediaStyles,\n navbar,\n theme,\n mode,\n}: AssignNavbarVariablesInput) {\n const navbarWidth = navbar?.width;\n const collapsedNavbarTransform = 'translateX(calc(var(--app-shell-navbar-width) * -1))';\n const collapsedNavbarTransformRtl = 'translateX(var(--app-shell-navbar-width))';\n\n if (navbar?.breakpoint !== undefined && !navbar?.collapsed?.mobile) {\n maxMediaStyles[navbar?.breakpoint] = maxMediaStyles[navbar?.breakpoint] || {};\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-offset'] = '0px';\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-width'] = '100%';\n if (mode === 'static') {\n maxMediaStyles[navbar?.breakpoint]['--app-shell-navbar-grid-width'] = '0px';\n }\n }\n\n if (isPrimitiveSize(navbarWidth)) {\n const baseSize = rem(getBaseSize(navbarWidth));\n baseStyles['--app-shell-navbar-width'] = baseSize;\n baseStyles['--app-shell-navbar-offset'] = baseSize;\n if (mode === 'static') {\n baseStyles['--app-shell-navbar-grid-width'] = baseSize;\n }\n }\n\n if (isResponsiveSize(navbarWidth)) {\n if (typeof navbarWidth.base !== 'undefined') {\n baseStyles['--app-shell-navbar-width'] = rem(navbarWidth.base);\n baseStyles['--app-shell-navbar-offset'] = rem(navbarWidth.base);\n if (mode === 'static') {\n baseStyles['--app-shell-navbar-grid-width'] = rem(navbarWidth.base);\n }\n }\n\n keys(navbarWidth).forEach((key) => {\n if (key !== 'base') {\n minMediaStyles[key] = minMediaStyles[key] || {};\n minMediaStyles[key]['--app-shell-navbar-width'] = rem(navbarWidth![key]);\n minMediaStyles[key]['--app-shell-navbar-offset'] = rem(navbarWidth![key]);\n if (mode === 'static') {\n minMediaStyles[key]['--app-shell-navbar-grid-width'] = rem(navbarWidth![key]);\n }\n }\n });\n }\n\n if (navbar?.breakpoint !== undefined && mode === 'static') {\n minMediaStyles[navbar.breakpoint] = minMediaStyles[navbar.breakpoint] || {};\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-position'] = 'sticky';\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-row'] = '2';\n minMediaStyles[navbar.breakpoint]['--app-shell-navbar-grid-column'] = '1';\n minMediaStyles[navbar.breakpoint]['--app-shell-main-column-start'] = '2';\n }\n\n if (navbar?.collapsed?.desktop) {\n const breakpointValue = navbar!.breakpoint;\n minMediaStyles[breakpointValue] = minMediaStyles[breakpointValue] || {};\n minMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n minMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n collapsedNavbarTransformRtl;\n if (mode === 'fixed') {\n minMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px !important';\n } else {\n // In static mode, hide the element completely so grid column collapses\n minMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '0px';\n minMediaStyles[breakpointValue]['--app-shell-navbar-display'] = 'none';\n minMediaStyles[breakpointValue]['--app-shell-main-column-start'] = '1';\n }\n }\n\n if (navbar?.collapsed?.mobile) {\n const breakpointValue = getBreakpointValue(navbar!.breakpoint, theme.breakpoints) - 0.1;\n maxMediaStyles[breakpointValue] = maxMediaStyles[breakpointValue] || {};\n maxMediaStyles[breakpointValue]['--app-shell-navbar-width'] = '100%';\n maxMediaStyles[breakpointValue]['--app-shell-navbar-offset'] = '0px';\n if (mode === 'static') {\n maxMediaStyles[breakpointValue]['--app-shell-navbar-grid-width'] = '0px';\n }\n maxMediaStyles[breakpointValue]['--app-shell-navbar-transform'] = collapsedNavbarTransform;\n maxMediaStyles[breakpointValue]['--app-shell-navbar-transform-rtl'] =\n collapsedNavbarTransformRtl;\n }\n}\n"],"mappings":";;;;;;;;AAgBA,SAAgB,sBAAsB,EACpC,YACA,gBACA,gBACA,QACA,OACA,QAC6B;CAC7B,MAAM,cAAc,QAAQ;CAC5B,MAAM,2BAA2B;CACjC,MAAM,8BAA8B;CAEpC,IAAI,QAAQ,eAAe,KAAA,KAAa,CAAC,QAAQ,WAAW,QAAQ;EAClE,eAAe,QAAQ,cAAc,eAAe,QAAQ,eAAe,CAAC;EAC5E,eAAe,QAAQ,WAAW,CAAC,+BAA+B;EAClE,eAAe,QAAQ,WAAW,CAAC,8BAA8B;EACjE,IAAI,SAAS,UACX,eAAe,QAAQ,WAAW,CAAC,mCAAmC;CAE1E;CAEA,IAAI,gBAAgB,WAAW,GAAG;EAChC,MAAM,WAAW,IAAI,YAAY,WAAW,CAAC;EAC7C,WAAW,8BAA8B;EACzC,WAAW,+BAA+B;EAC1C,IAAI,SAAS,UACX,WAAW,mCAAmC;CAElD;CAEA,IAAI,iBAAiB,WAAW,GAAG;EACjC,IAAI,OAAO,YAAY,SAAS,aAAa;GAC3C,WAAW,8BAA8B,IAAI,YAAY,IAAI;GAC7D,WAAW,+BAA+B,IAAI,YAAY,IAAI;GAC9D,IAAI,SAAS,UACX,WAAW,mCAAmC,IAAI,YAAY,IAAI;EAEtE;EAEA,KAAK,WAAW,CAAC,CAAC,SAAS,QAAQ;GACjC,IAAI,QAAQ,QAAQ;IAClB,eAAe,OAAO,eAAe,QAAQ,CAAC;IAC9C,eAAe,IAAI,CAAC,8BAA8B,IAAI,YAAa,IAAI;IACvE,eAAe,IAAI,CAAC,+BAA+B,IAAI,YAAa,IAAI;IACxE,IAAI,SAAS,UACX,eAAe,IAAI,CAAC,mCAAmC,IAAI,YAAa,IAAI;GAEhF;EACF,CAAC;CACH;CAEA,IAAI,QAAQ,eAAe,KAAA,KAAa,SAAS,UAAU;EACzD,eAAe,OAAO,cAAc,eAAe,OAAO,eAAe,CAAC;EAC1E,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,iCAAiC;EACnE,eAAe,OAAO,WAAW,CAAC,oCAAoC;EACtE,eAAe,OAAO,WAAW,CAAC,mCAAmC;CACvE;CAEA,IAAI,QAAQ,WAAW,SAAS;EAC9B,MAAM,kBAAkB,OAAQ;EAChC,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;EACF,IAAI,SAAS,SACX,eAAe,gBAAgB,CAAC,+BAA+B;OAC1D;GAEL,eAAe,gBAAgB,CAAC,8BAA8B;GAC9D,eAAe,gBAAgB,CAAC,gCAAgC;GAChE,eAAe,gBAAgB,CAAC,mCAAmC;EACrE;CACF;CAEA,IAAI,QAAQ,WAAW,QAAQ;EAC7B,MAAM,kBAAkB,mBAAmB,OAAQ,YAAY,MAAM,WAAW,IAAI;EACpF,eAAe,mBAAmB,eAAe,oBAAoB,CAAC;EACtE,eAAe,gBAAgB,CAAC,8BAA8B;EAC9D,eAAe,gBAAgB,CAAC,+BAA+B;EAC/D,IAAI,SAAS,UACX,eAAe,gBAAgB,CAAC,mCAAmC;EAErE,eAAe,gBAAgB,CAAC,kCAAkC;EAClE,eAAe,gBAAgB,CAAC,sCAC9B;CACJ;AACF"}
@@ -14,10 +14,11 @@ const defaultProps = {
14
14
  transitionTimingFunction: "ease",
15
15
  animateOpacity: true,
16
16
  orientation: "vertical",
17
- keepMounted: true
17
+ keepMounted: true,
18
+ keepMountedMode: "activity"
18
19
  };
19
20
  const Collapse = factory((props) => {
20
- const { children, expanded, transitionDuration, transitionTimingFunction, style, onTransitionEnd, onTransitionStart, animateOpacity, keepMounted, ref, orientation, ...others } = useProps("Collapse", defaultProps, props);
21
+ const { children, expanded, transitionDuration, transitionTimingFunction, style, onTransitionEnd, onTransitionStart, animateOpacity, keepMounted, keepMountedMode, ref, orientation, ...others } = useProps("Collapse", defaultProps, props);
21
22
  const env = useMantineEnv();
22
23
  const theme = useMantineTheme();
23
24
  const shouldReduceMotion = useReducedMotion();
@@ -31,22 +32,37 @@ const Collapse = factory((props) => {
31
32
  keepMounted: false
32
33
  });
33
34
  if (duration === 0) {
34
- if (keepMounted === true && env !== "test") return /* @__PURE__ */ jsx(Activity, {
35
- mode: expanded ? "visible" : "hidden",
36
- children: /* @__PURE__ */ jsx(Box, {
35
+ if (keepMounted === true && (keepMountedMode === "display-none" || env !== "test")) {
36
+ if (keepMountedMode === "display-none") return /* @__PURE__ */ jsx(Box, {
37
37
  ...others,
38
+ style: {
39
+ ...getStyleObject(style, theme),
40
+ ...!expanded ? { display: "none" } : {}
41
+ },
42
+ ref,
38
43
  children
39
- })
40
- });
44
+ });
45
+ return /* @__PURE__ */ jsx(Activity, {
46
+ mode: expanded ? "visible" : "hidden",
47
+ children: /* @__PURE__ */ jsx(Box, {
48
+ ...others,
49
+ style,
50
+ ref,
51
+ children
52
+ })
53
+ });
54
+ }
41
55
  return expanded ? /* @__PURE__ */ jsx(Box, {
42
56
  ...others,
57
+ style,
58
+ ref,
43
59
  children
44
60
  }) : null;
45
61
  }
46
62
  const isExited = collapse.state === "exited";
47
63
  let content;
48
64
  if (keepMounted === false) content = isExited ? null : children;
49
- else if (keepMounted === true) content = /* @__PURE__ */ jsx(Activity, {
65
+ else if (keepMounted === true) content = keepMountedMode === "display-none" ? children : /* @__PURE__ */ jsx(Activity, {
50
66
  mode: isExited ? "hidden" : "visible",
51
67
  children
52
68
  });
@@ -57,7 +73,8 @@ const Collapse = factory((props) => {
57
73
  style: {
58
74
  opacity: expanded || !animateOpacity ? 1 : 0,
59
75
  transition: animateOpacity ? `opacity ${duration}ms ${transitionTimingFunction}` : "none",
60
- ...getStyleObject(style, theme)
76
+ ...getStyleObject(style, theme),
77
+ ...keepMounted && keepMountedMode === "display-none" && isExited ? { display: "none" } : {}
61
78
  },
62
79
  ref
63
80
  }),
@@ -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 /** Controls how the element is hidden when `keepMounted` is set:\n * `'activity'` – hidden with React 19 `Activity` component,\n * `'display-none'` – hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\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 keepMountedMode: 'activity',\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 keepMountedMode,\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 && (keepMountedMode === 'display-none' || env !== 'test')) {\n if (keepMountedMode === 'display-none') {\n return (\n <Box\n {...others}\n style={{\n ...getStyleObject(style, theme),\n ...(!expanded ? { display: 'none' } : {}),\n }}\n ref={ref}\n >\n {children}\n </Box>\n );\n }\n\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 =\n keepMountedMode === 'display-none' ? (\n children\n ) : (\n <Activity mode={isExited ? 'hidden' : 'visible'}>{children}</Activity>\n );\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 ...(keepMounted && keepMountedMode === 'display-none' && isExited\n ? { display: 'none' }\n : {}),\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":";;;;;;;;;;;AAmDA,MAAM,eAAe;CACnB,oBAAoB;CACpB,0BAA0B;CAC1B,gBAAgB;CAChB,aAAa;CACb,aAAa;CACb,iBAAiB;AACnB;AAEA,MAAa,WAAW,SAA0B,UAAU;CAC1D,MAAM,EACJ,UACA,UACA,oBACA,0BACA,OACA,iBACA,mBACA,gBACA,aACA,iBACA,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,SAAS,oBAAoB,kBAAkB,QAAQ,SAAS;GAClF,IAAI,oBAAoB,gBACtB,OACE,oBAAC,KAAD;IACE,GAAI;IACJ,OAAO;KACL,GAAG,eAAe,OAAO,KAAK;KAC9B,GAAI,CAAC,WAAW,EAAE,SAAS,OAAO,IAAI,CAAC;IACzC;IACK;IAEJ;GACE,CAAA;GAIT,OACE,oBAAC,UAAD;IAAU,MAAM,WAAW,YAAY;cACrC,oBAAC,KAAD;KAAK,GAAI;KAAe;KAAY;KACjC;IACE,CAAA;GACG,CAAA;EAEd;EAEA,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,UACE,oBAAoB,iBAClB,WAEA,oBAAC,UAAD;EAAU,MAAM,WAAW,WAAW;EAAY;CAAmB,CAAA;MAGzE,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;IAC9B,GAAI,eAAe,oBAAoB,kBAAkB,WACrD,EAAE,SAAS,OAAO,IAClB,CAAC;GACP;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"}
@@ -64,7 +64,7 @@ function MenubarTarget(props) {
64
64
  ctx.openMenu(menuCtx.index, "hover");
65
65
  ctx.setActiveIndex(menuCtx.index);
66
66
  } else if (ctx.openIndex !== null && ctx.openIndex !== menuCtx.index) {
67
- ctx.openMenu(menuCtx.index, "hover");
67
+ ctx.openMenu(menuCtx.index, "click");
68
68
  ctx.setActiveIndex(menuCtx.index);
69
69
  }
70
70
  });
@@ -1 +1 @@
1
- {"version":3,"file":"MenubarTarget.mjs","names":[],"sources":["../../../../src/components/Menubar/MenubarTarget/MenubarTarget.tsx"],"sourcesContent":["import {\n createEventHandler,\n ElementProps,\n MantineStyleProp,\n useDirection,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenubarContext, useMenubarMenuContext } from '../Menubar.context';\n\nexport interface MenubarTargetProps extends ElementProps<'button'> {\n 'data-disabled'?: boolean;\n\n /** Target label */\n children: React.ReactNode;\n\n /** Inline styles applied to the target button */\n style?: MantineStyleProp;\n\n /** Key of the prop used to get element ref, useful for forwarding refs to custom components @default 'ref' */\n refProp?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<MenubarTargetProps>;\n\nfunction isPrintableKey(event: React.KeyboardEvent) {\n return (\n event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.metaKey && !event.altKey\n );\n}\n\nfunction getTargetLabel(node: HTMLElement) {\n return (node.textContent ?? '').trim().toLowerCase();\n}\n\nexport function MenubarTarget(props: MenubarTargetProps) {\n const {\n children,\n refProp,\n className,\n style,\n disabled,\n 'data-disabled': dataDisabled,\n onClick,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onKeyDown,\n ...others\n } = useProps('MenubarTarget', defaultProps, props);\n\n const ctx = useMenubarContext();\n const menuCtx = useMenubarMenuContext();\n const { dir } = useDirection();\n\n const isDisabled = disabled || dataDisabled;\n const isActive = ctx.activeIndex === menuCtx.index;\n\n // Before the menu indexes resolve from the DOM (first render / SSR HTML), every target\n // would otherwise compute `tabIndex={-1}`, leaving the menubar with no tab stop until\n // effects run. Keep unresolved targets focusable so keyboard users can enter the menubar.\n const isUnresolvedTabStop = menuCtx.index === -1 && !isDisabled;\n\n const moveToAdjacent = (direction: 1 | -1) => {\n const nextIndex = ctx.getAdjacentIndex(menuCtx.index, direction);\n ctx.setActiveIndex(nextIndex);\n ctx.focusTarget(nextIndex);\n if (ctx.openIndex !== null) {\n ctx.openMenu(nextIndex, 'click');\n }\n };\n\n const openAndFocusItem = (itemPosition: 'first' | 'last') => {\n ctx.openMenu(menuCtx.index, 'click');\n ctx.setActiveIndex(menuCtx.index);\n ctx.focusMenuItem(menuCtx.index, itemPosition);\n };\n\n const typeAhead = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n const targets = ctx.getTargets();\n if (targets.length === 0) {\n return;\n }\n\n const char = event.key.toLowerCase();\n for (let offset = 1; offset <= targets.length; offset += 1) {\n const index = (menuCtx.index + offset) % targets.length;\n const node = targets[index];\n if (\n node &&\n !node.disabled &&\n !node.hasAttribute('data-disabled') &&\n getTargetLabel(node).startsWith(char)\n ) {\n event.preventDefault();\n ctx.setActiveIndex(index);\n node.focus();\n if (ctx.openIndex !== null) {\n ctx.openMenu(index, 'click');\n }\n break;\n }\n }\n };\n\n const handleClick = createEventHandler<any>(onClick, () => {\n if (isDisabled) {\n return;\n }\n if (ctx.openIndex === menuCtx.index && ctx.getOpenSource() !== 'hover') {\n ctx.closeMenu();\n } else {\n ctx.openMenu(menuCtx.index, 'click');\n ctx.setActiveIndex(menuCtx.index);\n }\n });\n\n const handleMouseEnter = createEventHandler<any>(onMouseEnter, () => {\n if (isDisabled) {\n return;\n }\n ctx.cancelClose();\n if (ctx.trigger === 'hover') {\n ctx.openMenu(menuCtx.index, 'hover');\n ctx.setActiveIndex(menuCtx.index);\n } else if (ctx.openIndex !== null && ctx.openIndex !== menuCtx.index) {\n ctx.openMenu(menuCtx.index, 'hover');\n ctx.setActiveIndex(menuCtx.index);\n }\n });\n\n const handleMouseLeave = createEventHandler<any>(onMouseLeave, () => {\n if (ctx.trigger === 'hover') {\n ctx.scheduleClose();\n }\n });\n\n const handleFocus = createEventHandler<any>(onFocus, () => ctx.setActiveIndex(menuCtx.index));\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n if (isDisabled) {\n return;\n }\n const forwardKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n const backKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n\n if (event.key === forwardKey) {\n event.preventDefault();\n moveToAdjacent(1);\n } else if (event.key === backKey) {\n event.preventDefault();\n moveToAdjacent(-1);\n } else if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n openAndFocusItem('first');\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n openAndFocusItem('last');\n } else if (event.key === 'Home') {\n event.preventDefault();\n const enabled = ctx.getEnabledIndexes();\n if (enabled.length > 0) {\n ctx.setActiveIndex(enabled[0]);\n ctx.focusTarget(enabled[0]);\n }\n } else if (event.key === 'End') {\n event.preventDefault();\n const enabled = ctx.getEnabledIndexes();\n if (enabled.length > 0) {\n const last = enabled[enabled.length - 1];\n ctx.setActiveIndex(last);\n ctx.focusTarget(last);\n }\n } else if (event.key === 'Escape') {\n if (menuCtx.opened) {\n ctx.closeMenu();\n }\n } else if (event.key === 'Tab') {\n if (menuCtx.opened) {\n ctx.closeMenu();\n }\n } else if (isPrintableKey(event)) {\n typeAhead(event);\n }\n });\n\n return (\n <Popover.Target refProp={refProp} popupType=\"menu\">\n <UnstyledButton\n {...others}\n unstyled={ctx.unstyled}\n role=\"menuitem\"\n tabIndex={isActive || isUnresolvedTabStop ? 0 : -1}\n disabled={disabled}\n data-menubar-target\n data-menubar-id={menuCtx.id}\n data-disabled={dataDisabled || undefined}\n data-expanded={menuCtx.opened || undefined}\n data-mantine-stop-propagation={menuCtx.opened || undefined}\n {...ctx.getStyles('target', { className, style })}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n >\n {children}\n </UnstyledButton>\n </Popover.Target>\n );\n}\n\nMenubarTarget.displayName = '@mantine/core/MenubarTarget';\n"],"mappings":"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"}
1
+ {"version":3,"file":"MenubarTarget.mjs","names":[],"sources":["../../../../src/components/Menubar/MenubarTarget/MenubarTarget.tsx"],"sourcesContent":["import {\n createEventHandler,\n ElementProps,\n MantineStyleProp,\n useDirection,\n useProps,\n} from '../../../core';\nimport { Popover } from '../../Popover';\nimport { UnstyledButton } from '../../UnstyledButton';\nimport { useMenubarContext, useMenubarMenuContext } from '../Menubar.context';\n\nexport interface MenubarTargetProps extends ElementProps<'button'> {\n 'data-disabled'?: boolean;\n\n /** Target label */\n children: React.ReactNode;\n\n /** Inline styles applied to the target button */\n style?: MantineStyleProp;\n\n /** Key of the prop used to get element ref, useful for forwarding refs to custom components @default 'ref' */\n refProp?: string;\n}\n\nconst defaultProps = {\n refProp: 'ref',\n} satisfies Partial<MenubarTargetProps>;\n\nfunction isPrintableKey(event: React.KeyboardEvent) {\n return (\n event.key.length === 1 && event.key !== ' ' && !event.ctrlKey && !event.metaKey && !event.altKey\n );\n}\n\nfunction getTargetLabel(node: HTMLElement) {\n return (node.textContent ?? '').trim().toLowerCase();\n}\n\nexport function MenubarTarget(props: MenubarTargetProps) {\n const {\n children,\n refProp,\n className,\n style,\n disabled,\n 'data-disabled': dataDisabled,\n onClick,\n onMouseEnter,\n onMouseLeave,\n onFocus,\n onKeyDown,\n ...others\n } = useProps('MenubarTarget', defaultProps, props);\n\n const ctx = useMenubarContext();\n const menuCtx = useMenubarMenuContext();\n const { dir } = useDirection();\n\n const isDisabled = disabled || dataDisabled;\n const isActive = ctx.activeIndex === menuCtx.index;\n\n // Before the menu indexes resolve from the DOM (first render / SSR HTML), every target\n // would otherwise compute `tabIndex={-1}`, leaving the menubar with no tab stop until\n // effects run. Keep unresolved targets focusable so keyboard users can enter the menubar.\n const isUnresolvedTabStop = menuCtx.index === -1 && !isDisabled;\n\n const moveToAdjacent = (direction: 1 | -1) => {\n const nextIndex = ctx.getAdjacentIndex(menuCtx.index, direction);\n ctx.setActiveIndex(nextIndex);\n ctx.focusTarget(nextIndex);\n if (ctx.openIndex !== null) {\n ctx.openMenu(nextIndex, 'click');\n }\n };\n\n const openAndFocusItem = (itemPosition: 'first' | 'last') => {\n ctx.openMenu(menuCtx.index, 'click');\n ctx.setActiveIndex(menuCtx.index);\n ctx.focusMenuItem(menuCtx.index, itemPosition);\n };\n\n const typeAhead = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n const targets = ctx.getTargets();\n if (targets.length === 0) {\n return;\n }\n\n const char = event.key.toLowerCase();\n for (let offset = 1; offset <= targets.length; offset += 1) {\n const index = (menuCtx.index + offset) % targets.length;\n const node = targets[index];\n if (\n node &&\n !node.disabled &&\n !node.hasAttribute('data-disabled') &&\n getTargetLabel(node).startsWith(char)\n ) {\n event.preventDefault();\n ctx.setActiveIndex(index);\n node.focus();\n if (ctx.openIndex !== null) {\n ctx.openMenu(index, 'click');\n }\n break;\n }\n }\n };\n\n const handleClick = createEventHandler<any>(onClick, () => {\n if (isDisabled) {\n return;\n }\n if (ctx.openIndex === menuCtx.index && ctx.getOpenSource() !== 'hover') {\n ctx.closeMenu();\n } else {\n ctx.openMenu(menuCtx.index, 'click');\n ctx.setActiveIndex(menuCtx.index);\n }\n });\n\n const handleMouseEnter = createEventHandler<any>(onMouseEnter, () => {\n if (isDisabled) {\n return;\n }\n ctx.cancelClose();\n if (ctx.trigger === 'hover') {\n ctx.openMenu(menuCtx.index, 'hover');\n ctx.setActiveIndex(menuCtx.index);\n } else if (ctx.openIndex !== null && ctx.openIndex !== menuCtx.index) {\n // Hover-switching with trigger=\"click\" continues a click-driven interaction:\n // keep 'click' as the open source so that the next click on the target\n // closes the menu, same as a click-opened menu (desktop application pattern)\n ctx.openMenu(menuCtx.index, 'click');\n ctx.setActiveIndex(menuCtx.index);\n }\n });\n\n const handleMouseLeave = createEventHandler<any>(onMouseLeave, () => {\n if (ctx.trigger === 'hover') {\n ctx.scheduleClose();\n }\n });\n\n const handleFocus = createEventHandler<any>(onFocus, () => ctx.setActiveIndex(menuCtx.index));\n\n const handleKeyDown = createEventHandler<any>(onKeyDown, (event) => {\n if (isDisabled) {\n return;\n }\n const forwardKey = dir === 'rtl' ? 'ArrowLeft' : 'ArrowRight';\n const backKey = dir === 'rtl' ? 'ArrowRight' : 'ArrowLeft';\n\n if (event.key === forwardKey) {\n event.preventDefault();\n moveToAdjacent(1);\n } else if (event.key === backKey) {\n event.preventDefault();\n moveToAdjacent(-1);\n } else if (event.key === 'ArrowDown' || event.key === 'Enter' || event.key === ' ') {\n event.preventDefault();\n openAndFocusItem('first');\n } else if (event.key === 'ArrowUp') {\n event.preventDefault();\n openAndFocusItem('last');\n } else if (event.key === 'Home') {\n event.preventDefault();\n const enabled = ctx.getEnabledIndexes();\n if (enabled.length > 0) {\n ctx.setActiveIndex(enabled[0]);\n ctx.focusTarget(enabled[0]);\n }\n } else if (event.key === 'End') {\n event.preventDefault();\n const enabled = ctx.getEnabledIndexes();\n if (enabled.length > 0) {\n const last = enabled[enabled.length - 1];\n ctx.setActiveIndex(last);\n ctx.focusTarget(last);\n }\n } else if (event.key === 'Escape') {\n if (menuCtx.opened) {\n ctx.closeMenu();\n }\n } else if (event.key === 'Tab') {\n if (menuCtx.opened) {\n ctx.closeMenu();\n }\n } else if (isPrintableKey(event)) {\n typeAhead(event);\n }\n });\n\n return (\n <Popover.Target refProp={refProp} popupType=\"menu\">\n <UnstyledButton\n {...others}\n unstyled={ctx.unstyled}\n role=\"menuitem\"\n tabIndex={isActive || isUnresolvedTabStop ? 0 : -1}\n disabled={disabled}\n data-menubar-target\n data-menubar-id={menuCtx.id}\n data-disabled={dataDisabled || undefined}\n data-expanded={menuCtx.opened || undefined}\n data-mantine-stop-propagation={menuCtx.opened || undefined}\n {...ctx.getStyles('target', { className, style })}\n onClick={handleClick}\n onMouseEnter={handleMouseEnter}\n onMouseLeave={handleMouseLeave}\n onFocus={handleFocus}\n onKeyDown={handleKeyDown}\n >\n {children}\n </UnstyledButton>\n </Popover.Target>\n );\n}\n\nMenubarTarget.displayName = '@mantine/core/MenubarTarget';\n"],"mappings":"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"}
@@ -8,7 +8,7 @@ import { useModal } from "./use-modal.mjs";
8
8
  import { RemoveScroll } from "react-remove-scroll";
9
9
  import { jsx } from "react/jsx-runtime";
10
10
  //#region packages/@mantine/core/src/components/ModalBase/ModalBase.tsx
11
- function ModalBase({ keepMounted, opened, onClose, id, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, trapFocus, closeOnEscape, returnFocus, closeOnClickOutside, withinPortal, portalProps, lockScroll, children, zIndex, shadow, padding, __vars, unstyled, removeScrollProps, ...others }) {
11
+ function ModalBase({ keepMounted, keepMountedMode = "activity", opened, onClose, id, transitionProps, onExitTransitionEnd, onEnterTransitionEnd, trapFocus, closeOnEscape, returnFocus, closeOnClickOutside, withinPortal, portalProps, lockScroll, children, zIndex, shadow, padding, __vars, unstyled, removeScrollProps, ...others }) {
12
12
  const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } = useModal({
13
13
  id,
14
14
  transitionProps,
@@ -31,7 +31,8 @@ function ModalBase({ keepMounted, opened, onClose, id, transitionProps, onExitTr
31
31
  onEnterTransitionEnd,
32
32
  transitionProps: {
33
33
  ...transitionProps,
34
- keepMounted
34
+ keepMounted,
35
+ keepMountedMode
35
36
  },
36
37
  getTitleId: () => `${_id}-title`,
37
38
  getBodyId: () => `${_id}-body`,
@@ -1 +1 @@
1
- {"version":3,"file":"ModalBase.mjs","names":[],"sources":["../../../src/components/ModalBase/ModalBase.tsx"],"sourcesContent":["import { RemoveScroll } from 'react-remove-scroll';\nimport {\n Box,\n BoxProps,\n ElementProps,\n getDefaultZIndex,\n getShadow,\n getSpacing,\n MantineShadow,\n MantineSize,\n MantineSpacing,\n} from '../../core';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport { useModal } from './use-modal';\n\ntype RemoveScrollProps = Omit<React.ComponentProps<typeof RemoveScroll>, 'children'>;\n\nexport interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {\n unstyled?: boolean;\n\n /** If set modal/drawer is not unmounted from the DOM when hidden. `display: none` styles are applied instead. @default false */\n keepMounted?: boolean;\n\n /** Controls opened state */\n opened: boolean;\n\n /** Called when modal/drawer is closed */\n onClose: () => void;\n\n /** Id used to connect modal/drawer with body and title */\n id?: string;\n\n /** If set, scroll is locked when `opened={true}` @default true */\n lockScroll?: boolean;\n\n /** If set, focus is trapped within the modal/drawer @default true */\n trapFocus?: boolean;\n\n /** If set, the component is rendered inside `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props passed down to the Portal component when `withinPortal` is set */\n portalProps?: BasePortalProps;\n\n /** Modal/drawer content */\n children?: React.ReactNode;\n\n /** If set, the modal/drawer is closed when user clicks on the overlay @default true */\n closeOnClickOutside?: boolean;\n\n /** Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'fade-down' }` by default */\n transitionProps?: TransitionOverride;\n\n /** Called when exit transition ends */\n onExitTransitionEnd?: () => void;\n\n /** Called when enter transition ends */\n onEnterTransitionEnd?: () => void;\n\n /** If set, `onClose` is called when user presses the escape key @default true */\n closeOnEscape?: boolean;\n\n /** If set, focus is returned to the last active element when `onClose` is called @default true */\n returnFocus?: boolean;\n\n /** `z-index` CSS property of the root element @default 200 */\n zIndex?: string | number;\n\n /** Key of `theme.shadows` or any valid CSS box-shadow value @default 'xl' */\n shadow?: MantineShadow;\n\n /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default 'md' */\n padding?: MantineSpacing;\n\n /** Controls width of the content area @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Props passed down to react-remove-scroll, can be used to customize scroll lock behavior */\n removeScrollProps?: RemoveScrollProps;\n}\n\nexport function ModalBase({\n keepMounted,\n opened,\n onClose,\n id,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n trapFocus,\n closeOnEscape,\n returnFocus,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n lockScroll,\n children,\n zIndex,\n shadow,\n padding,\n __vars,\n unstyled,\n removeScrollProps,\n ...others\n}: ModalBaseProps) {\n const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } =\n useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClose, returnFocus });\n\n const { key: removeScrollKey, ...otherRemoveScrollProps } = removeScrollProps || {};\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <ModalBaseProvider\n value={{\n opened,\n onClose,\n closeOnClickOutside,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n transitionProps: { ...transitionProps, keepMounted },\n getTitleId: () => `${_id}-title`,\n getBodyId: () => `${_id}-body`,\n titleMounted,\n bodyMounted,\n setTitleMounted,\n setBodyMounted,\n trapFocus,\n closeOnEscape,\n zIndex,\n unstyled,\n }}\n >\n <RemoveScroll\n enabled={shouldLockScroll && lockScroll}\n key={removeScrollKey}\n {...otherRemoveScrollProps}\n >\n <Box\n {...others}\n id={_id}\n __vars={{\n ...__vars,\n '--mb-z-index': (zIndex || getDefaultZIndex('modal')).toString(),\n '--mb-shadow': getShadow(shadow),\n '--mb-padding': getSpacing(padding),\n }}\n >\n {children}\n </Box>\n </RemoveScroll>\n </ModalBaseProvider>\n </OptionalPortal>\n );\n}\n\nModalBase.displayName = '@mantine/core/ModalBase';\n"],"mappings":";;;;;;;;;;AAmFA,SAAgB,UAAU,EACxB,aACA,QACA,SACA,IACA,iBACA,qBACA,sBACA,WACA,eACA,aACA,qBACA,cACA,aACA,YACA,UACA,QACA,QACA,SACA,QACA,UACA,mBACA,GAAG,UACc;CACjB,MAAM,EAAE,KAAK,cAAc,aAAa,kBAAkB,iBAAiB,mBACzE,SAAS;EAAE;EAAI;EAAiB;EAAQ;EAAW;EAAe;EAAS;CAAY,CAAC;CAE1F,MAAM,EAAE,KAAK,iBAAiB,GAAG,2BAA2B,qBAAqB,CAAC;CAElF,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,oBAAC,mBAAD;GACE,OAAO;IACL;IACA;IACA;IACA;IACA;IACA,iBAAiB;KAAE,GAAG;KAAiB;IAAY;IACnD,kBAAkB,GAAG,IAAI;IACzB,iBAAiB,GAAG,IAAI;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;aAEA,oBAAC,cAAD;IACE,SAAS,oBAAoB;IAE7B,GAAI;cAEJ,oBAAC,KAAD;KACE,GAAI;KACJ,IAAI;KACJ,QAAQ;MACN,GAAG;MACH,iBAAiB,UAAU,iBAAiB,OAAO,EAAA,CAAG,SAAS;MAC/D,eAAe,UAAU,MAAM;MAC/B,gBAAgB,WAAW,OAAO;KACpC;KAEC;IACE,CAAA;GACO,GAfP,eAeO;EACG,CAAA;CACL,CAAA;AAEpB;AAEA,UAAU,cAAc"}
1
+ {"version":3,"file":"ModalBase.mjs","names":[],"sources":["../../../src/components/ModalBase/ModalBase.tsx"],"sourcesContent":["import { RemoveScroll } from 'react-remove-scroll';\nimport {\n Box,\n BoxProps,\n ElementProps,\n getDefaultZIndex,\n getShadow,\n getSpacing,\n MantineShadow,\n MantineSize,\n MantineSpacing,\n} from '../../core';\nimport { BasePortalProps, OptionalPortal } from '../Portal';\nimport { TransitionOverride } from '../Transition';\nimport { ModalBaseProvider } from './ModalBase.context';\nimport { useModal } from './use-modal';\n\ntype RemoveScrollProps = Omit<React.ComponentProps<typeof RemoveScroll>, 'children'>;\n\nexport interface ModalBaseProps extends BoxProps, ElementProps<'div', 'title'> {\n unstyled?: boolean;\n\n /** If set modal/drawer is not unmounted from the DOM when hidden. `display: none` styles are applied instead. @default false */\n keepMounted?: boolean;\n\n /** Controls how the modal/drawer is hidden when `keepMounted` is set:\n * `'activity'` - hidden with React 19 `Activity` component,\n * `'display-none'` - hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\n\n /** Controls opened state */\n opened: boolean;\n\n /** Called when modal/drawer is closed */\n onClose: () => void;\n\n /** Id used to connect modal/drawer with body and title */\n id?: string;\n\n /** If set, scroll is locked when `opened={true}` @default true */\n lockScroll?: boolean;\n\n /** If set, focus is trapped within the modal/drawer @default true */\n trapFocus?: boolean;\n\n /** If set, the component is rendered inside `Portal` @default true */\n withinPortal?: boolean;\n\n /** Props passed down to the Portal component when `withinPortal` is set */\n portalProps?: BasePortalProps;\n\n /** Modal/drawer content */\n children?: React.ReactNode;\n\n /** If set, the modal/drawer is closed when user clicks on the overlay @default true */\n closeOnClickOutside?: boolean;\n\n /** Props added to the `Transition` component that used to animate overlay and body, use to configure duration and animation type, `{ duration: 200, transition: 'fade-down' }` by default */\n transitionProps?: TransitionOverride;\n\n /** Called when exit transition ends */\n onExitTransitionEnd?: () => void;\n\n /** Called when enter transition ends */\n onEnterTransitionEnd?: () => void;\n\n /** If set, `onClose` is called when user presses the escape key @default true */\n closeOnEscape?: boolean;\n\n /** If set, focus is returned to the last active element when `onClose` is called @default true */\n returnFocus?: boolean;\n\n /** `z-index` CSS property of the root element @default 200 */\n zIndex?: string | number;\n\n /** Key of `theme.shadows` or any valid CSS box-shadow value @default 'xl' */\n shadow?: MantineShadow;\n\n /** Key of `theme.spacing` or any valid CSS value to set content, header and footer padding @default 'md' */\n padding?: MantineSpacing;\n\n /** Controls width of the content area @default 'md' */\n size?: MantineSize | (string & {}) | number;\n\n /** Props passed down to react-remove-scroll, can be used to customize scroll lock behavior */\n removeScrollProps?: RemoveScrollProps;\n}\n\nexport function ModalBase({\n keepMounted,\n keepMountedMode = 'activity',\n opened,\n onClose,\n id,\n transitionProps,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n trapFocus,\n closeOnEscape,\n returnFocus,\n closeOnClickOutside,\n withinPortal,\n portalProps,\n lockScroll,\n children,\n zIndex,\n shadow,\n padding,\n __vars,\n unstyled,\n removeScrollProps,\n ...others\n}: ModalBaseProps) {\n const { _id, titleMounted, bodyMounted, shouldLockScroll, setTitleMounted, setBodyMounted } =\n useModal({ id, transitionProps, opened, trapFocus, closeOnEscape, onClose, returnFocus });\n\n const { key: removeScrollKey, ...otherRemoveScrollProps } = removeScrollProps || {};\n\n return (\n <OptionalPortal {...portalProps} withinPortal={withinPortal}>\n <ModalBaseProvider\n value={{\n opened,\n onClose,\n closeOnClickOutside,\n onExitTransitionEnd,\n onEnterTransitionEnd,\n transitionProps: { ...transitionProps, keepMounted, keepMountedMode },\n getTitleId: () => `${_id}-title`,\n getBodyId: () => `${_id}-body`,\n titleMounted,\n bodyMounted,\n setTitleMounted,\n setBodyMounted,\n trapFocus,\n closeOnEscape,\n zIndex,\n unstyled,\n }}\n >\n <RemoveScroll\n enabled={shouldLockScroll && lockScroll}\n key={removeScrollKey}\n {...otherRemoveScrollProps}\n >\n <Box\n {...others}\n id={_id}\n __vars={{\n ...__vars,\n '--mb-z-index': (zIndex || getDefaultZIndex('modal')).toString(),\n '--mb-shadow': getShadow(shadow),\n '--mb-padding': getSpacing(padding),\n }}\n >\n {children}\n </Box>\n </RemoveScroll>\n </ModalBaseProvider>\n </OptionalPortal>\n );\n}\n\nModalBase.displayName = '@mantine/core/ModalBase';\n"],"mappings":";;;;;;;;;;AA0FA,SAAgB,UAAU,EACxB,aACA,kBAAkB,YAClB,QACA,SACA,IACA,iBACA,qBACA,sBACA,WACA,eACA,aACA,qBACA,cACA,aACA,YACA,UACA,QACA,QACA,SACA,QACA,UACA,mBACA,GAAG,UACc;CACjB,MAAM,EAAE,KAAK,cAAc,aAAa,kBAAkB,iBAAiB,mBACzE,SAAS;EAAE;EAAI;EAAiB;EAAQ;EAAW;EAAe;EAAS;CAAY,CAAC;CAE1F,MAAM,EAAE,KAAK,iBAAiB,GAAG,2BAA2B,qBAAqB,CAAC;CAElF,OACE,oBAAC,gBAAD;EAAgB,GAAI;EAA2B;YAC7C,oBAAC,mBAAD;GACE,OAAO;IACL;IACA;IACA;IACA;IACA;IACA,iBAAiB;KAAE,GAAG;KAAiB;KAAa;IAAgB;IACpE,kBAAkB,GAAG,IAAI;IACzB,iBAAiB,GAAG,IAAI;IACxB;IACA;IACA;IACA;IACA;IACA;IACA;IACA;GACF;aAEA,oBAAC,cAAD;IACE,SAAS,oBAAoB;IAE7B,GAAI;cAEJ,oBAAC,KAAD;KACE,GAAI;KACJ,IAAI;KACJ,QAAQ;MACN,GAAG;MACH,iBAAiB,UAAU,iBAAiB,OAAO,EAAA,CAAG,SAAS;MAC/D,eAAe,UAAU,MAAM;MAC/B,gBAAgB,WAAW,OAAO;KACpC;KAEC;IACE,CAAA;GACO,GAfP,eAeO;EACG,CAAA;CACL,CAAA;AAEpB;AAEA,UAAU,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":"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"}
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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"}
@@ -1 +1 @@
1
- {"version":3,"file":"Transition.mjs","names":[],"sources":["../../../src/components/Transition/Transition.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useMantineEnv } from '../../core';\nimport { getTransitionStyles } from './get-transition-styles/get-transition-styles';\nimport { MantineTransition } from './transitions';\nimport { useTransition } from './use-transition';\n\nexport interface TransitionProps {\n /** If set, the element is kept in the DOM when hidden. React 19 `Activity` is used to preserve state while the element is not visible. */\n keepMounted?: boolean;\n\n /**\n * Controls how the element is hidden when `keepMounted` is set:\n * `'activity'` – hidden with React 19 `Activity` component,\n * `'display-none'` – hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\n\n /** Transition name or object */\n transition?: MantineTransition;\n\n /** Transition duration in ms @default 250 */\n duration?: number;\n\n /** Exit transition duration in ms @default 250 */\n exitDuration?: number;\n\n /** Transition timing function @default theme.transitionTimingFunction */\n timingFunction?: string;\n\n /** Determines whether component should be mounted to the DOM */\n mounted: boolean;\n\n /** Render function with transition styles argument */\n children: (styles: React.CSSProperties) => React.JSX.Element;\n\n /** Called when exit transition ends */\n onExited?: () => void;\n\n /** Called when exit transition starts */\n onExit?: () => void;\n\n /** Called when enter transition starts */\n onEnter?: () => void;\n\n /** Called when enter transition ends */\n onEntered?: () => void;\n\n /** Delay in ms before enter transition starts */\n enterDelay?: number;\n\n /** Delay in ms before exit transition starts */\n exitDelay?: number;\n}\n\nexport type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;\n\nexport function Transition({\n keepMounted,\n keepMountedMode = 'activity',\n transition = 'fade',\n duration = 250,\n exitDuration = duration,\n mounted,\n children,\n timingFunction = 'ease',\n onExit,\n onEntered,\n onEnter,\n onExited,\n enterDelay,\n exitDelay,\n}: TransitionProps) {\n const env = useMantineEnv();\n const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({\n mounted,\n exitDuration,\n duration,\n timingFunction,\n onExit,\n onEntered,\n onEnter,\n onExited,\n enterDelay,\n exitDelay,\n });\n\n if (env === 'test') {\n return mounted ? <>{children({})}</> : keepMounted ? children({ display: 'none' }) : null;\n }\n\n if (transitionDuration === 0) {\n if (keepMounted) {\n if (keepMountedMode === 'display-none') {\n return mounted ? <>{children({})}</> : children({ display: 'none' });\n }\n\n return <Activity mode={mounted ? 'visible' : 'hidden'}>{children({})}</Activity>;\n }\n return mounted ? <>{children({})}</> : null;\n }\n\n const isExited = transitionStatus === 'exited';\n\n if (keepMounted) {\n const keepMountedChildren = children(\n isExited\n ? keepMountedMode === 'display-none'\n ? { display: 'none' }\n : {}\n : getTransitionStyles({\n transition,\n duration: transitionDuration,\n state: transitionStatus,\n timingFunction: transitionTimingFunction,\n })\n );\n\n if (keepMountedMode === 'display-none') {\n return keepMountedChildren;\n }\n\n return <Activity mode={isExited ? 'hidden' : 'visible'}>{keepMountedChildren}</Activity>;\n }\n\n return isExited ? null : (\n <>\n {children(\n getTransitionStyles({\n transition,\n duration: transitionDuration,\n state: transitionStatus,\n timingFunction: transitionTimingFunction,\n })\n )}\n </>\n );\n}\n\nTransition.displayName = '@mantine/core/Transition';\n\nexport namespace Transition {\n export type Props = TransitionProps;\n export type Override = TransitionOverride;\n}\n"],"mappings":";;;;;;;AAyDA,SAAgB,WAAW,EACzB,aACA,kBAAkB,YAClB,aAAa,QACb,WAAW,KACX,eAAe,UACf,SACA,UACA,iBAAiB,QACjB,QACA,WACA,SACA,UACA,YACA,aACkB;CAClB,MAAM,MAAM,cAAc;CAC1B,MAAM,EAAE,oBAAoB,kBAAkB,6BAA6B,cAAc;EACvF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,QAAQ,QACV,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,cAAc,SAAS,EAAE,SAAS,OAAO,CAAC,IAAI;CAGvF,IAAI,uBAAuB,GAAG;EAC5B,IAAI,aAAa;GACf,IAAI,oBAAoB,gBACtB,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,SAAS,EAAE,SAAS,OAAO,CAAC;GAGrE,OAAO,oBAAC,UAAD;IAAU,MAAM,UAAU,YAAY;cAAW,SAAS,CAAC,CAAC;GAAY,CAAA;EACjF;EACA,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI;CACzC;CAEA,MAAM,WAAW,qBAAqB;CAEtC,IAAI,aAAa;EACf,MAAM,sBAAsB,SAC1B,WACI,oBAAoB,iBAClB,EAAE,SAAS,OAAO,IAClB,CAAC,IACH,oBAAoB;GAClB;GACA,UAAU;GACV,OAAO;GACP,gBAAgB;EAClB,CAAC,CACP;EAEA,IAAI,oBAAoB,gBACtB,OAAO;EAGT,OAAO,oBAAC,UAAD;GAAU,MAAM,WAAW,WAAW;aAAY;EAA8B,CAAA;CACzF;CAEA,OAAO,WAAW,OAChB,oBAAA,YAAA,EAAA,UACG,SACC,oBAAoB;EAClB;EACA,UAAU;EACV,OAAO;EACP,gBAAgB;CAClB,CAAC,CACH,EACA,CAAA;AAEN;AAEA,WAAW,cAAc"}
1
+ {"version":3,"file":"Transition.mjs","names":[],"sources":["../../../src/components/Transition/Transition.tsx"],"sourcesContent":["import { Activity } from 'react';\nimport { useMantineEnv } from '../../core';\nimport { getTransitionStyles } from './get-transition-styles/get-transition-styles';\nimport { MantineTransition } from './transitions';\nimport { useTransition } from './use-transition';\n\nexport interface TransitionProps {\n /** If set, the element is kept in the DOM when hidden. React 19 `Activity` is used to preserve state while the element is not visible. */\n keepMounted?: boolean;\n\n /**\n * Controls how the element is hidden when `keepMounted` is set:\n * `'activity'` - hidden with React 19 `Activity` component,\n * `'display-none'` - hidden with `display: none` styles\n * @default 'activity'\n */\n keepMountedMode?: 'activity' | 'display-none';\n\n /** Transition name or object */\n transition?: MantineTransition;\n\n /** Transition duration in ms @default 250 */\n duration?: number;\n\n /** Exit transition duration in ms @default 250 */\n exitDuration?: number;\n\n /** Transition timing function @default theme.transitionTimingFunction */\n timingFunction?: string;\n\n /** Determines whether component should be mounted to the DOM */\n mounted: boolean;\n\n /** Render function with transition styles argument */\n children: (styles: React.CSSProperties) => React.JSX.Element;\n\n /** Called when exit transition ends */\n onExited?: () => void;\n\n /** Called when exit transition starts */\n onExit?: () => void;\n\n /** Called when enter transition starts */\n onEnter?: () => void;\n\n /** Called when enter transition ends */\n onEntered?: () => void;\n\n /** Delay in ms before enter transition starts */\n enterDelay?: number;\n\n /** Delay in ms before exit transition starts */\n exitDelay?: number;\n}\n\nexport type TransitionOverride = Partial<Omit<TransitionProps, 'mounted'>>;\n\nexport function Transition({\n keepMounted,\n keepMountedMode = 'activity',\n transition = 'fade',\n duration = 250,\n exitDuration = duration,\n mounted,\n children,\n timingFunction = 'ease',\n onExit,\n onEntered,\n onEnter,\n onExited,\n enterDelay,\n exitDelay,\n}: TransitionProps) {\n const env = useMantineEnv();\n const { transitionDuration, transitionStatus, transitionTimingFunction } = useTransition({\n mounted,\n exitDuration,\n duration,\n timingFunction,\n onExit,\n onEntered,\n onEnter,\n onExited,\n enterDelay,\n exitDelay,\n });\n\n if (env === 'test') {\n return mounted ? <>{children({})}</> : keepMounted ? children({ display: 'none' }) : null;\n }\n\n if (transitionDuration === 0) {\n if (keepMounted) {\n if (keepMountedMode === 'display-none') {\n return mounted ? <>{children({})}</> : children({ display: 'none' });\n }\n\n return <Activity mode={mounted ? 'visible' : 'hidden'}>{children({})}</Activity>;\n }\n return mounted ? <>{children({})}</> : null;\n }\n\n const isExited = transitionStatus === 'exited';\n\n if (keepMounted) {\n const keepMountedChildren = children(\n isExited\n ? keepMountedMode === 'display-none'\n ? { display: 'none' }\n : {}\n : getTransitionStyles({\n transition,\n duration: transitionDuration,\n state: transitionStatus,\n timingFunction: transitionTimingFunction,\n })\n );\n\n if (keepMountedMode === 'display-none') {\n return keepMountedChildren;\n }\n\n return <Activity mode={isExited ? 'hidden' : 'visible'}>{keepMountedChildren}</Activity>;\n }\n\n return isExited ? null : (\n <>\n {children(\n getTransitionStyles({\n transition,\n duration: transitionDuration,\n state: transitionStatus,\n timingFunction: transitionTimingFunction,\n })\n )}\n </>\n );\n}\n\nTransition.displayName = '@mantine/core/Transition';\n\nexport namespace Transition {\n export type Props = TransitionProps;\n export type Override = TransitionOverride;\n}\n"],"mappings":";;;;;;;AAyDA,SAAgB,WAAW,EACzB,aACA,kBAAkB,YAClB,aAAa,QACb,WAAW,KACX,eAAe,UACf,SACA,UACA,iBAAiB,QACjB,QACA,WACA,SACA,UACA,YACA,aACkB;CAClB,MAAM,MAAM,cAAc;CAC1B,MAAM,EAAE,oBAAoB,kBAAkB,6BAA6B,cAAc;EACvF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,IAAI,QAAQ,QACV,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,cAAc,SAAS,EAAE,SAAS,OAAO,CAAC,IAAI;CAGvF,IAAI,uBAAuB,GAAG;EAC5B,IAAI,aAAa;GACf,IAAI,oBAAoB,gBACtB,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI,SAAS,EAAE,SAAS,OAAO,CAAC;GAGrE,OAAO,oBAAC,UAAD;IAAU,MAAM,UAAU,YAAY;cAAW,SAAS,CAAC,CAAC;GAAY,CAAA;EACjF;EACA,OAAO,UAAU,oBAAA,YAAA,EAAA,UAAG,SAAS,CAAC,CAAC,EAAI,CAAA,IAAI;CACzC;CAEA,MAAM,WAAW,qBAAqB;CAEtC,IAAI,aAAa;EACf,MAAM,sBAAsB,SAC1B,WACI,oBAAoB,iBAClB,EAAE,SAAS,OAAO,IAClB,CAAC,IACH,oBAAoB;GAClB;GACA,UAAU;GACV,OAAO;GACP,gBAAgB;EAClB,CAAC,CACP;EAEA,IAAI,oBAAoB,gBACtB,OAAO;EAGT,OAAO,oBAAC,UAAD;GAAU,MAAM,WAAW,WAAW;aAAY;EAA8B,CAAA;CACzF;CAEA,OAAO,WAAW,OAChB,oBAAA,YAAA,EAAA,UACG,SACC,oBAAoB;EAClB;EACA,UAAU;EACV,OAAO;EACP,gBAAgB;CAClB,CAAC,CACH,EACA,CAAA;AAEN;AAEA,WAAW,cAAc"}
@@ -23,14 +23,22 @@ const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildr
23
23
  const root = findElementAncestor(event.currentTarget, "[data-tree-root]");
24
24
  const nodes = root ? Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none") : [];
25
25
  const index = nodes.indexOf(event.currentTarget);
26
- if (index !== -1) nodes[index + 1]?.focus();
26
+ if (index !== -1) {
27
+ const nextNode = nodes[index + 1];
28
+ nextNode?.setAttribute("data-focus-ring", "true");
29
+ nextNode?.focus();
30
+ }
27
31
  } else if (hasChildren) tree.expand(node.value);
28
32
  }
29
33
  if (event.nativeEvent.code === "ArrowLeft") {
30
34
  event.stopPropagation();
31
35
  event.preventDefault();
32
36
  if (expanded && hasChildren) tree.collapse(node.value);
33
- else if (parent) (findElementAncestor(event.currentTarget, "[data-tree-root]")?.querySelector(`[role=treeitem][data-value="${CSS.escape(parent)}"]`))?.focus();
37
+ else if (parent) {
38
+ const parentElement = findElementAncestor(event.currentTarget, "[data-tree-root]")?.querySelector(`[role=treeitem][data-value="${CSS.escape(parent)}"]`);
39
+ parentElement?.setAttribute("data-focus-ring", "true");
40
+ parentElement?.focus();
41
+ }
34
42
  }
35
43
  if (event.nativeEvent.code === "ArrowDown" || event.nativeEvent.code === "ArrowUp") {
36
44
  const root = findElementAncestor(event.currentTarget, "[data-tree-root]");
@@ -40,7 +48,9 @@ const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildr
40
48
  const nodes = Array.from(root.querySelectorAll("[role=treeitem]")).filter((treeNode) => treeNode.style.display !== "none");
41
49
  const index = nodes.indexOf(event.currentTarget);
42
50
  if (index === -1) return;
43
- nodes[event.nativeEvent.code === "ArrowDown" ? index + 1 : index - 1]?.focus();
51
+ const nextNode = nodes[event.nativeEvent.code === "ArrowDown" ? index + 1 : index - 1];
52
+ nextNode?.setAttribute("data-focus-ring", "true");
53
+ nextNode?.focus();
44
54
  }
45
55
  if (event.nativeEvent.code === "Space") {
46
56
  if (expandOnSpace) {
@@ -78,6 +88,9 @@ const FlatTreeNode = memo(function FlatTreeNode({ node, level, parent, hasChildr
78
88
  "data-level": level,
79
89
  tabIndex,
80
90
  onKeyDown: handleKeyDown,
91
+ onBlur: (event) => {
92
+ if (!event.currentTarget.contains(event.relatedTarget)) event.currentTarget.removeAttribute("data-focus-ring");
93
+ },
81
94
  children: [linesPath?.map((state, idx) => {
82
95
  if (state === "none") return null;
83
96
  const column = idx + 2;