@react-md/core 6.3.0 → 6.3.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 (212) hide show
  1. package/dist/_base.scss +1 -1
  2. package/dist/app-bar/styles.d.ts +0 -2
  3. package/dist/app-bar/styles.js.map +1 -1
  4. package/dist/autocomplete/types.d.ts +12 -0
  5. package/dist/autocomplete/types.js.map +1 -1
  6. package/dist/avatar/Avatar.d.ts +0 -10
  7. package/dist/avatar/Avatar.js.map +1 -1
  8. package/dist/avatar/styles.d.ts +10 -0
  9. package/dist/avatar/styles.js.map +1 -1
  10. package/dist/badge/Badge.d.ts +11 -0
  11. package/dist/badge/Badge.js.map +1 -1
  12. package/dist/badge/styles.d.ts +0 -8
  13. package/dist/badge/styles.js.map +1 -1
  14. package/dist/box/_box.scss +8 -8
  15. package/dist/box/styles.d.ts +9 -0
  16. package/dist/box/styles.js.map +1 -1
  17. package/dist/button/_button.scss +4 -0
  18. package/dist/button/styles.d.ts +5 -1
  19. package/dist/button/styles.js.map +1 -1
  20. package/dist/card/Card.d.ts +0 -7
  21. package/dist/card/Card.js.map +1 -1
  22. package/dist/card/styles.d.ts +6 -0
  23. package/dist/card/styles.js +8 -8
  24. package/dist/card/styles.js.map +1 -1
  25. package/dist/chip/Chip.d.ts +6 -13
  26. package/dist/chip/Chip.js.map +1 -1
  27. package/dist/chip/styles.d.ts +26 -1
  28. package/dist/chip/styles.js.map +1 -1
  29. package/dist/dialog/Dialog.js +8 -8
  30. package/dist/dialog/Dialog.js.map +1 -1
  31. package/dist/dialog/styles.d.ts +5 -2
  32. package/dist/dialog/styles.js.map +1 -1
  33. package/dist/divider/styles.d.ts +1 -1
  34. package/dist/divider/styles.js.map +1 -1
  35. package/dist/error-boundary/ErrorBoundary.js.map +1 -1
  36. package/dist/files/validation.js.map +1 -1
  37. package/dist/focus/useFocusContainer.d.ts +11 -4
  38. package/dist/focus/useFocusContainer.js +3 -1
  39. package/dist/focus/useFocusContainer.js.map +1 -1
  40. package/dist/form/InputToggle.js.map +1 -1
  41. package/dist/form/Label.d.ts +0 -10
  42. package/dist/form/Label.js.map +1 -1
  43. package/dist/form/Slider.d.ts +4 -0
  44. package/dist/form/Slider.js.map +1 -1
  45. package/dist/form/Switch.js.map +1 -1
  46. package/dist/form/TextArea.js.map +1 -1
  47. package/dist/form/TextFieldContainer.d.ts +0 -13
  48. package/dist/form/TextFieldContainer.js.map +1 -1
  49. package/dist/form/_select.scss +5 -1
  50. package/dist/form/_text-area.scss +2 -1
  51. package/dist/form/_text-field.scss +1 -0
  52. package/dist/form/types.d.ts +20 -0
  53. package/dist/form/types.js.map +1 -1
  54. package/dist/hoverMode/useHoverModeProvider.d.ts +9 -1
  55. package/dist/hoverMode/useHoverModeProvider.js.map +1 -1
  56. package/dist/interaction/types.d.ts +5 -1
  57. package/dist/interaction/types.js.map +1 -1
  58. package/dist/link/Link.d.ts +0 -7
  59. package/dist/link/Link.js.map +1 -1
  60. package/dist/link/styles.d.ts +7 -0
  61. package/dist/link/styles.js.map +1 -1
  62. package/dist/list/List.d.ts +5 -20
  63. package/dist/list/List.js.map +1 -1
  64. package/dist/list/ListItem.d.ts +4 -38
  65. package/dist/list/ListItem.js.map +1 -1
  66. package/dist/list/listItemStyles.d.ts +24 -2
  67. package/dist/list/listItemStyles.js.map +1 -1
  68. package/dist/list/listStyles.d.ts +17 -2
  69. package/dist/list/listStyles.js.map +1 -1
  70. package/dist/menu/Menu.js +8 -6
  71. package/dist/menu/Menu.js.map +1 -1
  72. package/dist/navigation/NavItem.d.ts +4 -1
  73. package/dist/navigation/NavItem.js.map +1 -1
  74. package/dist/navigation/navItemStyles.d.ts +7 -0
  75. package/dist/navigation/navItemStyles.js.map +1 -1
  76. package/dist/overlay/Overlay.d.ts +4 -23
  77. package/dist/overlay/Overlay.js.map +1 -1
  78. package/dist/overlay/styles.d.ts +26 -8
  79. package/dist/overlay/styles.js.map +1 -1
  80. package/dist/progress/LinearProgress.d.ts +4 -9
  81. package/dist/progress/LinearProgress.js.map +1 -1
  82. package/dist/progress/circularProgressStyles.d.ts +6 -0
  83. package/dist/progress/circularProgressStyles.js.map +1 -1
  84. package/dist/progress/linearProgressStyles.d.ts +20 -5
  85. package/dist/progress/linearProgressStyles.js.map +1 -1
  86. package/dist/progress/types.d.ts +0 -9
  87. package/dist/progress/types.js.map +1 -1
  88. package/dist/segmented-button/SegmentedButton.d.ts +7 -12
  89. package/dist/segmented-button/SegmentedButton.js.map +1 -1
  90. package/dist/segmented-button/segmentedButtonStyles.d.ts +26 -3
  91. package/dist/segmented-button/segmentedButtonStyles.js.map +1 -1
  92. package/dist/sheet/Sheet.d.ts +0 -12
  93. package/dist/sheet/Sheet.js.map +1 -1
  94. package/dist/sheet/styles.d.ts +12 -0
  95. package/dist/sheet/styles.js.map +1 -1
  96. package/dist/snackbar/Toast.d.ts +2 -13
  97. package/dist/snackbar/Toast.js.map +1 -1
  98. package/dist/snackbar/ToastManager.js.map +1 -1
  99. package/dist/snackbar/toastStyles.d.ts +17 -2
  100. package/dist/snackbar/toastStyles.js.map +1 -1
  101. package/dist/tabs/Tab.d.ts +2 -41
  102. package/dist/tabs/Tab.js.map +1 -1
  103. package/dist/tabs/tabStyles.d.ts +45 -4
  104. package/dist/tabs/tabStyles.js.map +1 -1
  105. package/dist/test-utils/mocks/IntersectionObserver.js.map +1 -1
  106. package/dist/test-utils/mocks/ResizeObserver.js.map +1 -1
  107. package/dist/test-utils/utils/createFileList.js.map +1 -1
  108. package/dist/theme/_theme.scss +0 -1
  109. package/dist/theme/getDerivedTheme.d.ts +0 -24
  110. package/dist/theme/getDerivedTheme.js.map +1 -1
  111. package/dist/theme/types.d.ts +25 -0
  112. package/dist/theme/types.js.map +1 -1
  113. package/dist/tooltip/Tooltip.d.ts +4 -32
  114. package/dist/tooltip/Tooltip.js.map +1 -1
  115. package/dist/tooltip/styles.d.ts +38 -1
  116. package/dist/tooltip/styles.js +1 -1
  117. package/dist/tooltip/styles.js.map +1 -1
  118. package/dist/transition/SkeletonPlaceholder.d.ts +0 -7
  119. package/dist/transition/SkeletonPlaceholder.js.map +1 -1
  120. package/dist/transition/Slide.js.map +1 -1
  121. package/dist/transition/skeletonPlaceholderUtils.d.ts +7 -0
  122. package/dist/transition/skeletonPlaceholderUtils.js.map +1 -1
  123. package/dist/transition/useMaxWidthTransition.d.ts +14 -2
  124. package/dist/transition/useMaxWidthTransition.js.map +1 -1
  125. package/dist/transition/useSlideTransition.d.ts +5 -0
  126. package/dist/transition/useSlideTransition.js.map +1 -1
  127. package/dist/tree/Tree.d.ts +5 -9
  128. package/dist/tree/Tree.js.map +1 -1
  129. package/dist/tree/styles.d.ts +9 -1
  130. package/dist/tree/styles.js.map +1 -1
  131. package/dist/typography/Mark.d.ts +4 -1
  132. package/dist/typography/Mark.js.map +1 -1
  133. package/dist/typography/TextContainer.d.ts +0 -6
  134. package/dist/typography/TextContainer.js.map +1 -1
  135. package/dist/typography/markStyles.d.ts +5 -0
  136. package/dist/typography/markStyles.js.map +1 -1
  137. package/dist/typography/textContainerStyles.d.ts +6 -0
  138. package/dist/typography/textContainerStyles.js.map +1 -1
  139. package/dist/typography/typographyStyles.d.ts +9 -0
  140. package/dist/typography/typographyStyles.js.map +1 -1
  141. package/dist/useResizeObserver.js.map +1 -1
  142. package/dist/window-splitter/WindowSplitter.d.ts +5 -19
  143. package/dist/window-splitter/WindowSplitter.js.map +1 -1
  144. package/dist/window-splitter/styles.d.ts +27 -3
  145. package/dist/window-splitter/styles.js.map +1 -1
  146. package/package.json +13 -14
  147. package/src/app-bar/styles.ts +0 -2
  148. package/src/autocomplete/types.ts +17 -0
  149. package/src/avatar/Avatar.tsx +0 -11
  150. package/src/avatar/styles.ts +11 -0
  151. package/src/badge/Badge.tsx +12 -0
  152. package/src/badge/styles.ts +0 -9
  153. package/src/box/styles.ts +9 -0
  154. package/src/button/styles.ts +5 -1
  155. package/src/card/Card.tsx +0 -8
  156. package/src/card/styles.ts +15 -8
  157. package/src/chip/Chip.tsx +9 -15
  158. package/src/chip/styles.ts +29 -1
  159. package/src/dialog/Dialog.tsx +8 -8
  160. package/src/dialog/styles.ts +5 -2
  161. package/src/divider/styles.ts +1 -1
  162. package/src/focus/useFocusContainer.ts +19 -11
  163. package/src/form/InputToggle.tsx +2 -0
  164. package/src/form/Label.tsx +0 -11
  165. package/src/form/Slider.tsx +6 -0
  166. package/src/form/Switch.tsx +2 -0
  167. package/src/form/TextArea.tsx +2 -0
  168. package/src/form/TextFieldContainer.tsx +0 -14
  169. package/src/form/types.ts +29 -0
  170. package/src/hoverMode/useHoverModeProvider.ts +9 -1
  171. package/src/interaction/types.ts +5 -1
  172. package/src/link/Link.tsx +0 -8
  173. package/src/link/styles.ts +8 -0
  174. package/src/list/List.tsx +7 -24
  175. package/src/list/ListItem.tsx +7 -43
  176. package/src/list/listItemStyles.ts +26 -2
  177. package/src/list/listStyles.ts +18 -2
  178. package/src/menu/Menu.tsx +9 -5
  179. package/src/navigation/NavItem.tsx +6 -2
  180. package/src/navigation/navItemStyles.ts +8 -0
  181. package/src/overlay/Overlay.tsx +4 -26
  182. package/src/overlay/styles.ts +29 -10
  183. package/src/progress/LinearProgress.tsx +8 -10
  184. package/src/progress/circularProgressStyles.ts +7 -0
  185. package/src/progress/linearProgressStyles.ts +22 -5
  186. package/src/progress/types.ts +0 -10
  187. package/src/segmented-button/SegmentedButton.tsx +14 -15
  188. package/src/segmented-button/segmentedButtonStyles.ts +28 -3
  189. package/src/sheet/Sheet.tsx +0 -13
  190. package/src/sheet/styles.ts +13 -0
  191. package/src/snackbar/Toast.tsx +2 -15
  192. package/src/snackbar/toastStyles.ts +20 -2
  193. package/src/tabs/Tab.tsx +4 -49
  194. package/src/tabs/tabStyles.ts +52 -4
  195. package/src/theme/getDerivedTheme.ts +0 -26
  196. package/src/theme/types.ts +26 -0
  197. package/src/tooltip/Tooltip.tsx +4 -36
  198. package/src/tooltip/styles.ts +43 -2
  199. package/src/transition/SkeletonPlaceholder.tsx +0 -8
  200. package/src/transition/Slide.tsx +2 -0
  201. package/src/transition/skeletonPlaceholderUtils.ts +8 -0
  202. package/src/transition/useMaxWidthTransition.ts +17 -2
  203. package/src/transition/useSlideTransition.ts +8 -0
  204. package/src/tree/Tree.tsx +5 -10
  205. package/src/tree/styles.ts +10 -1
  206. package/src/typography/Mark.tsx +6 -2
  207. package/src/typography/TextContainer.tsx +0 -7
  208. package/src/typography/markStyles.ts +6 -0
  209. package/src/typography/textContainerStyles.ts +7 -0
  210. package/src/typography/typographyStyles.ts +10 -0
  211. package/src/window-splitter/WindowSplitter.tsx +9 -22
  212. package/src/window-splitter/styles.ts +31 -3
@@ -1,9 +1,24 @@
1
+ declare module "react" {
2
+ interface CSSProperties {
3
+ "--rmd-list-padding-h"?: string | number;
4
+ "--rmd-list-padding-v"?: string | number;
5
+ }
6
+ }
1
7
  /** @since 6.0.0 */
2
8
  export interface ListClassNameOptions {
3
9
  className?: string;
4
- /** @defaultValue `false` */
10
+ /**
11
+ * Set to `true` to decrease the amount of padding and font size within the
12
+ * list.
13
+ *
14
+ * @defaultValue `false`
15
+ */
5
16
  dense?: boolean;
6
- /** @defaultValue `false` */
17
+ /**
18
+ * Set this to `true` to render horizontally instead of vertically.
19
+ *
20
+ * @defaultValue `false`
21
+ */
7
22
  horizontal?: boolean;
8
23
  }
9
24
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/list/listStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-list\");\n\n/** @since 6.0.0 */\nexport interface ListClassNameOptions {\n className?: string;\n\n /** @defaultValue `false` */\n dense?: boolean;\n\n /** @defaultValue `false` */\n horizontal?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function list(options: ListClassNameOptions = {}): string {\n const { dense = false, horizontal = false, className } = options;\n\n return cnb(styles({ dense, horizontal }), className);\n}\n"],"names":["cnb","bem","styles","list","options","dense","horizontal","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,aAAa,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEzD,OAAOJ,IAAIE,OAAO;QAAEG;QAAOC;IAAW,IAAIC;AAC5C"}
1
+ {"version":3,"sources":["../../src/list/listStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-list\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-list-padding-h\"?: string | number;\n \"--rmd-list-padding-v\"?: string | number;\n }\n}\n\n/** @since 6.0.0 */\nexport interface ListClassNameOptions {\n className?: string;\n\n /**\n * Set to `true` to decrease the amount of padding and font size within the\n * list.\n *\n * @defaultValue `false`\n */\n dense?: boolean;\n\n /**\n * Set this to `true` to render horizontally instead of vertically.\n *\n * @defaultValue `false`\n */\n horizontal?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function list(options: ListClassNameOptions = {}): string {\n const { dense = false, horizontal = false, className } = options;\n\n return cnb(styles({ dense, horizontal }), className);\n}\n"],"names":["cnb","bem","styles","list","options","dense","horizontal","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA6BnB;;CAEC,GACD,OAAO,SAASE,KAAKC,UAAgC,CAAC,CAAC;IACrD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,aAAa,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAEzD,OAAOJ,IAAIE,OAAO;QAAEG;QAAOC;IAAW,IAAIC;AAC5C"}
package/dist/menu/Menu.js CHANGED
@@ -96,6 +96,7 @@ const noop = ()=>{
96
96
  break;
97
97
  }
98
98
  },
99
+ onEnter,
99
100
  onEntering (appearing) {
100
101
  onEntering(appearing);
101
102
  entered.current = true;
@@ -106,11 +107,12 @@ const noop = ()=>{
106
107
  cancelUnmountFocus.current = false;
107
108
  animatedOnceRef.current = true;
108
109
  },
110
+ onExit,
111
+ onExiting,
109
112
  onExited () {
110
113
  onExited();
111
114
  entered.current = false;
112
115
  },
113
- onExiting,
114
116
  disableTransition,
115
117
  isFocusTypeDisabled (type) {
116
118
  if (role === "listbox") {
@@ -129,7 +131,6 @@ const noop = ()=>{
129
131
  const { ref, style, callbacks, updateStyle } = useFixedPositioning({
130
132
  ...transitionOptions,
131
133
  disabled: disableFixedPositioning,
132
- onEnter,
133
134
  style: isSheet ? propStyle : menuStyle,
134
135
  fixedTo,
135
136
  anchor: getDefaultAnchor({
@@ -159,7 +160,6 @@ const noop = ()=>{
159
160
  }
160
161
  });
161
162
  const { rendered, disablePortal, elementProps } = useScaleTransition({
162
- nodeRef: ref,
163
163
  className: cnb(!isSheet && menuClassName, className),
164
164
  transitionIn: visible,
165
165
  vertical: !horizontal,
@@ -169,10 +169,12 @@ const noop = ()=>{
169
169
  appear,
170
170
  enter,
171
171
  exit,
172
- onExit,
173
- onExiting: transitionOptions.onExiting,
174
172
  exitedHidden: true,
175
- ...callbacks
173
+ // merge the transition callbacks
174
+ ...transitionOptions,
175
+ ...callbacks,
176
+ // but prefer the latest defined ref
177
+ nodeRef: ref
176
178
  });
177
179
  useScrollLock(visible && preventScroll);
178
180
  // need to make sure that the useEffect does not refire for hiding on click
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\n\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n type FixedPositioningOptions,\n useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n type ScaleTransitionHookOptions,\n useScaleTransition,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n type MenuConfiguration,\n MenuConfigurationProvider,\n type MenuOrientationProps,\n useMenuConfiguration,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-menu-background-color\"?: string;\n \"--rmd-menu-color\"?: string;\n \"--rmd-menu-min-width\"?: string | number;\n \"--rmd-menu-spacing\"?: string | number;\n }\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n ScaleTransitionHookOptions<HTMLDivElement>,\n \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n /**\n * @see {@link ScaleTransitionHookOptions.temporary}\n * @defaultValue `true`\n */\n temporary?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * Boolean if the menu should not gain the elevation styles and should only be\n * set to `true` when rendering within a `Sheet`.\n *\n * @defaultValue `false`\n */\n disableElevation?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n\n /**\n * @see {@link FixedPositioningOptions.transformOrigin}\n * @defaultValue `true`\n */\n transformOrigin?: boolean;\n\n /**\n * Boolean if the menu should close if the page is scrolled. The default\n * behavior is to just update the position of the menu relative to the menu\n * button until it can no longer be visible within the viewport.\n *\n * @defaultValue `false`\n */\n closeOnScroll?: boolean;\n\n /**\n * Boolean if the page should no longer be scrollable while the menu is\n * visible.\n *\n * @defaultValue `false`\n */\n preventScroll?: boolean;\n\n /**\n * Boolean if the menu should close instead of repositioning itself if the\n * browser window is resized.\n *\n * @defaultValue `false`\n */\n closeOnResize?: boolean;\n\n /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n /**\n * @defaultValue `false`\n * @see {@link FixedPositioningOptions.disabled}\n */\n disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 5.1.0\n * @since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n /**\n * An optional style to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n */\n listStyle?: CSSProperties;\n\n /**\n * An optional className to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n */\n listClassName?: string;\n\n /**\n * Any additional props to pass to the `List` component that surrounds the\n * `Menu`'s `MenuItem`s.\n */\n listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n /**\n * This can be used to apply additional props to the `Menu` component.\n *\n * Note: You can override the `style` and `className` using\n * {@link menuStyle} and {@link menuClassName} instead for convenience.\n *\n * @example\n * ```tsx\n * <DropdownMenu\n * {...props}\n * menuProps={{\n * style: {\n * // custom inline style\n * },\n * className: \"come-class-name\",\n * getFixedPositionOptions: () => ({\n * preventOverlap: true,\n * }),\n * }}\n * />\n * ```\n */\n menuProps?: PropsWithRef<\n Omit<\n MenuProps,\n | \"children\"\n | \"fixedTo\"\n | \"visible\"\n | \"onRequestClose\"\n | \"getDefaultFocusedIndex\"\n >\n >;\n\n /**\n * Convenience prop to apply custom style to the `Menu` component.\n */\n menuStyle?: CSSProperties;\n\n /**\n * Convenience prop to apply custom class name to the `Menu` component.\n */\n menuClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n \"onScroll\" | \"onResize\" | \"nodeRef\" | \"disabled\"\n>;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n extends HTMLAttributes<HTMLDivElement>,\n MenuConfiguration,\n MenuConfigurationProps,\n MenuFixedPositioningOptions,\n MenuOrientationProps,\n MenuTransitionProps,\n MenuListConvenienceProps,\n MenuSheetConvenienceProps {\n visible: boolean;\n onRequestClose: () => void;\n\n /**\n * @defaultValue `\"menu-\" + useId()`\n */\n id?: string;\n\n /**\n * This is used to set the default focus index when the menu is visible.\n *\n * @internal\n */\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n /**\n * Custom style that should be applied to the menu only while not rendered\n * within a sheet since the {@link style} would be applied to both versions.\n */\n menuStyle?: CSSProperties;\n\n /**\n * Custom class name that should be applied only while not rendered within a\n * sheet.\n */\n menuClassName?: string;\n\n /**\n * @internal\n *\n * This is only used to update the default anchor when the DropdownMenu's\n * toggle is a floating action button.\n */\n floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n function Menu(props, propRef) {\n const {\n id: propId,\n style: propStyle,\n role = \"menu\",\n children,\n horizontal: _horizontal,\n sheetHeader: _sheetHeader,\n sheetFooter: _sheetFooter,\n renderAsSheet: _renderAsSheet,\n sheetPosition: _sheetPosition,\n sheetVerticalSize: _sheetVerticalSize,\n sheetProps,\n sheetStyle,\n sheetClassName,\n menuStyle,\n menuClassName,\n disableElevation = false,\n temporary = true,\n tabIndex = -1,\n fixedTo,\n className,\n classNames,\n timeout,\n appear,\n enter,\n exit,\n onEnter,\n onEntering = noop,\n onEntered = noop,\n onExit,\n onExiting,\n onExited = noop,\n onKeyDown = noop,\n listProps,\n listStyle,\n listClassName,\n visible,\n onRequestClose,\n floating,\n anchor,\n closeOnResize = false,\n closeOnScroll = false,\n preventScroll = false,\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin = true,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n disableFixedPositioning,\n getFixedPositionOptions,\n disablePortal: propDisablePortal,\n disableTransition,\n ...remaining\n } = props;\n const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n props;\n\n const id = useEnsuredId(propId, \"menu\");\n const {\n root,\n menubar,\n menuitem,\n activeId,\n animatedOnceRef,\n hoverTimeoutRef,\n disableHoverMode,\n } = useMenuBarContext();\n const {\n horizontal,\n sheetHeader,\n sheetFooter,\n renderAsSheet,\n sheetPosition,\n sheetVerticalSize,\n } = useMenuConfiguration(props);\n const { isPhone } = useAppSize();\n const isSheet =\n renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n const entered = useRef(false);\n const cancelUnmountFocus = useRef(false);\n const hideWithoutRefocus = (): void => {\n cancelUnmountFocus.current = true;\n onRequestClose();\n };\n const mode = useUserInteractionMode();\n const mouse = mode === \"mouse\";\n\n const { eventHandlers, transitionOptions } = useFocusContainer({\n nodeRef: propRef,\n activate: visible,\n onKeyDown(event) {\n onKeyDown(event);\n\n // when a menu is within a sheet, it should not trigger the custom\n // keyboard behavior\n if (isSheet) {\n return;\n }\n\n switch (event.key) {\n case \"Escape\":\n // prevent parent components that have an \"Escape\" keypress event\n // from being triggered as well\n event.stopPropagation();\n disableHoverMode();\n onRequestClose();\n break;\n case \"Tab\":\n // since menus are portalled, tab index is kinda broke so just close\n // the menu instead of doing default tab behavior\n event.preventDefault();\n\n if (!menuitem) {\n // pressing the tab key should still cascade close all menus\n event.stopPropagation();\n }\n disableHoverMode();\n onRequestClose();\n break;\n case \"ArrowUp\":\n if (!root && menuitem && horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n case \"ArrowLeft\":\n if (!root && menuitem && !horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n }\n },\n onEntering(appearing) {\n onEntering(appearing);\n entered.current = true;\n },\n onEntered(appearing) {\n onEntered(appearing);\n entered.current = true;\n cancelUnmountFocus.current = false;\n animatedOnceRef.current = true;\n },\n onExited() {\n onExited();\n entered.current = false;\n },\n onExiting,\n disableTransition,\n isFocusTypeDisabled(type) {\n if (role === \"listbox\") {\n return !isSheet;\n }\n\n if (type === \"keyboard\") {\n return isSheet;\n }\n\n const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n if (type === \"mount\") {\n return isHoverDisabled;\n }\n\n return (\n isHoverDisabled ||\n cancelUnmountFocus.current ||\n (root && !!activeId && id !== activeId)\n );\n },\n });\n\n const { ref, style, callbacks, updateStyle } = useFixedPositioning({\n ...transitionOptions,\n disabled: disableFixedPositioning,\n onEnter,\n style: isSheet ? propStyle : menuStyle,\n fixedTo,\n anchor: getDefaultAnchor({\n anchor,\n menubar,\n floating,\n menuitem: !root && menuitem,\n horizontal,\n }),\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n getFixedPositionOptions,\n onResize: closeOnResize ? hideWithoutRefocus : undefined,\n onScroll(_event, data) {\n if (!data.visible || closeOnScroll) {\n hideWithoutRefocus();\n }\n },\n });\n const { rendered, disablePortal, elementProps } = useScaleTransition({\n nodeRef: ref,\n className: cnb(!isSheet && menuClassName, className),\n transitionIn: visible,\n vertical: !horizontal,\n temporary,\n timeout: isSheet || disableTransition ? 0 : timeout,\n classNames,\n appear,\n enter,\n exit,\n onExit,\n onExiting: transitionOptions.onExiting,\n exitedHidden: true,\n ...callbacks,\n });\n useScrollLock(visible && preventScroll);\n\n // need to make sure that the useEffect does not refire for hiding on click\n // events because of the `window.requestAnimationFrame`. It'll make it so\n // that menu items that update state are unable to close when clicked\n const hide = useRef(onRequestClose);\n useEffect(() => {\n hide.current = onRequestClose;\n });\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const callback = (event: globalThis.MouseEvent): void => {\n // this is required for when the transition is disabled\n if (!entered.current) {\n return;\n }\n\n // if the user clicks outside of the menu to close it, the toggle button\n // should not be focused. instead the nearest focusable element from the\n // click event should be focused when Tab or Shift + tab is pressed\n cancelUnmountFocus.current =\n !(event.target instanceof HTMLElement) ||\n !event.target.closest(`[role=\"${role}\"]`);\n\n // this won't be called if `event.stopPropagation()` is called\n hide.current();\n disableHoverMode();\n };\n\n // wait an animation frame so the initial click event that caused the menu\n // to become visible does not immediately close the menu\n const frame = window.requestAnimationFrame(() => {\n window.addEventListener(\"click\", callback);\n });\n\n return () => {\n window.cancelAnimationFrame(frame);\n window.removeEventListener(\"click\", callback);\n };\n }, [disableHoverMode, role, visible]);\n useIsomorphicLayoutEffect(() => {\n if (!visible) {\n return;\n }\n\n updateStyle();\n }, [updateStyle, children, visible]);\n\n return (\n <MenuConfigurationProvider\n horizontal={horizontal}\n renderAsSheet={renderAsSheet}\n sheetFooter={sheetFooter}\n sheetHeader={sheetHeader}\n sheetPosition={sheetPosition}\n sheetVerticalSize={sheetVerticalSize}\n >\n <MenuSheet\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy as string}\n header={sheetHeader}\n footer={sheetFooter}\n position={sheetPosition}\n verticalSize={sheetVerticalSize}\n visible={visible}\n enabled={isSheet}\n onRequestClose={onRequestClose}\n style={sheetStyle}\n className={sheetClassName}\n disablePortal={propDisablePortal}\n temporary={temporary}\n disableTransition={disableTransition}\n {...sheetProps}\n >\n <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n {(rendered || isSheet) && (\n <MenuWidget\n {...remaining}\n {...elementProps}\n {...eventHandlers}\n id={id}\n role={role}\n style={isSheet ? propStyle : style}\n isSheet={isSheet}\n tabIndex={tabIndex}\n horizontal={horizontal}\n listProps={listProps}\n listStyle={listStyle}\n listClassName={listClassName}\n disableElevation={disableElevation}\n cancelUnmountFocus={cancelUnmountFocus}\n >\n {children}\n </MenuWidget>\n )}\n </Portal>\n </MenuSheet>\n </MenuConfigurationProvider>\n );\n }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","useIsomorphicLayoutEffect","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","disableFixedPositioning","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","updateStyle","disabled","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled"],"mappings":"AAAA;;AAEA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAGEC,UAAU,EACVC,SAAS,EACTC,MAAM,QACD,QAAQ;AAGf,SAASC,iBAAiB,QAAQ,gCAAgC;AAClE,SAASC,sBAAsB,QAAQ,gDAAgD;AAEvF,SAASC,UAAU,QAAQ,sCAAsC;AAEjE,SAASC,MAAM,QAAQ,sBAAsB;AAE7C,SAEEC,mBAAmB,QACd,wCAAwC;AAC/C,SAASC,aAAa,QAAQ,6BAA6B;AAC3D,SAEEC,kBAAkB,QACb,sCAAsC;AAE7C,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,yBAAyB,QAAQ,kCAAkC;AAC5E,SAEEC,yBAAyB,EAEzBC,oBAAoB,QACf,iCAAiC;AACxC,SAASC,SAAS,QAAwC,iBAAiB;AAC3E,SAASC,UAAU,QAAQ,kBAAkB;AAC7C,SAASC,iBAAiB,QAAQ,0BAA0B;AAC5D,SAASC,gBAAgB,QAAQ,aAAa;AAW9C,MAAMC,OAAO;AACX,aAAa;AACf;AA8MA;;;;;;;;;;;;;;;;CAgBC,GACD,OAAO,MAAMC,qBAAOnB,WAClB,SAASmB,KAAKC,KAAK,EAAEC,OAAO;IAC1B,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,OAAO,MAAM,EACbC,QAAQ,EACRC,YAAYC,WAAW,EACvBC,aAAaC,YAAY,EACzBC,aAAaC,YAAY,EACzBC,eAAeC,cAAc,EAC7BC,eAAeC,cAAc,EAC7BC,mBAAmBC,kBAAkB,EACrCC,UAAU,EACVC,UAAU,EACVC,cAAc,EACdC,SAAS,EACTC,aAAa,EACbC,mBAAmB,KAAK,EACxBC,YAAY,IAAI,EAChBC,WAAW,CAAC,CAAC,EACbC,OAAO,EACPC,SAAS,EACTC,UAAU,EACVC,OAAO,EACPC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,aAAatC,IAAI,EACjBuC,YAAYvC,IAAI,EAChBwC,MAAM,EACNC,SAAS,EACTC,WAAW1C,IAAI,EACf2C,YAAY3C,IAAI,EAChB4C,SAAS,EACTC,SAAS,EACTC,aAAa,EACbC,OAAO,EACPC,cAAc,EACdC,QAAQ,EACRC,MAAM,EACNC,gBAAgB,KAAK,EACrBC,gBAAgB,KAAK,EACrBC,gBAAgB,KAAK,EACrBC,QAAQ,EACRC,QAAQ,EACRC,OAAO,EACPC,OAAO,EACPC,KAAK,EACLC,kBAAkB,IAAI,EACtBC,cAAc,EACdC,eAAe,EACfC,eAAe,EACfC,QAAQ,EACRC,QAAQ,EACRC,uBAAuB,EACvBC,uBAAuB,EACvBC,eAAeC,iBAAiB,EAChCC,iBAAiB,EACjB,GAAGC,WACJ,GAAGpE;IACJ,MAAM,EAAE,cAAcqE,SAAS,EAAE,mBAAmBC,cAAc,EAAE,GAClEtE;IAEF,MAAME,KAAKZ,aAAaa,QAAQ;IAChC,MAAM,EACJoE,IAAI,EACJC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,eAAe,EACfC,gBAAgB,EACjB,GAAGjF;IACJ,MAAM,EACJY,UAAU,EACVE,WAAW,EACXE,WAAW,EACXE,aAAa,EACbE,aAAa,EACbE,iBAAiB,EAClB,GAAGzB,qBAAqBO;IACzB,MAAM,EAAE8E,OAAO,EAAE,GAAG7F;IACpB,MAAM8F,UACJjE,kBAAkB,QAASA,kBAAkB,WAAWgE;IAE1D,MAAME,UAAUlG,OAAO;IACvB,MAAMmG,qBAAqBnG,OAAO;IAClC,MAAMoG,qBAAqB;QACzBD,mBAAmBE,OAAO,GAAG;QAC7BrC;IACF;IACA,MAAMsC,OAAOpG;IACb,MAAMqG,QAAQD,SAAS;IAEvB,MAAM,EAAEE,aAAa,EAAEC,iBAAiB,EAAE,GAAGxG,kBAAkB;QAC7DyG,SAASvF;QACTwF,UAAU5C;QACVJ,WAAUiD,KAAK;YACbjD,UAAUiD;YAEV,kEAAkE;YAClE,oBAAoB;YACpB,IAAIX,SAAS;gBACX;YACF;YAEA,OAAQW,MAAMC,GAAG;gBACf,KAAK;oBACH,iEAAiE;oBACjE,+BAA+B;oBAC/BD,MAAME,eAAe;oBACrBf;oBACA/B;oBACA;gBACF,KAAK;oBACH,oEAAoE;oBACpE,iDAAiD;oBACjD4C,MAAMG,cAAc;oBAEpB,IAAI,CAACpB,UAAU;wBACb,4DAA4D;wBAC5DiB,MAAME,eAAe;oBACvB;oBACAf;oBACA/B;oBACA;gBACF,KAAK;oBACH,IAAI,CAACyB,QAAQE,YAAYjE,YAAY;wBACnCkF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB/C;oBACF;oBACA;gBACF,KAAK;oBACH,IAAI,CAACyB,QAAQE,YAAY,CAACjE,YAAY;wBACpCkF,MAAME,eAAe;wBACrBF,MAAMG,cAAc;wBACpB/C;oBACF;oBACA;YACJ;QACF;QACAV,YAAW0D,SAAS;YAClB1D,WAAW0D;YACXd,QAAQG,OAAO,GAAG;QACpB;QACA9C,WAAUyD,SAAS;YACjBzD,UAAUyD;YACVd,QAAQG,OAAO,GAAG;YAClBF,mBAAmBE,OAAO,GAAG;YAC7BR,gBAAgBQ,OAAO,GAAG;QAC5B;QACA3C;YACEA;YACAwC,QAAQG,OAAO,GAAG;QACpB;QACA5C;QACA4B;QACA4B,qBAAoBC,IAAI;YACtB,IAAI1F,SAAS,WAAW;gBACtB,OAAO,CAACyE;YACV;YAEA,IAAIiB,SAAS,YAAY;gBACvB,OAAOjB;YACT;YAEA,MAAMkB,kBAAkBZ,SAAST,gBAAgBO,OAAO,KAAK;YAC7D,IAAIa,SAAS,SAAS;gBACpB,OAAOC;YACT;YAEA,OACEA,mBACAhB,mBAAmBE,OAAO,IACzBZ,QAAQ,CAAC,CAACG,YAAYxE,OAAOwE;QAElC;IACF;IAEA,MAAM,EAAEwB,GAAG,EAAE9F,KAAK,EAAE+F,SAAS,EAAEC,WAAW,EAAE,GAAGjH,oBAAoB;QACjE,GAAGoG,iBAAiB;QACpBc,UAAUtC;QACV5B;QACA/B,OAAO2E,UAAU1E,YAAYkB;QAC7BK;QACAoB,QAAQnD,iBAAiB;YACvBmD;YACAwB;YACAzB;YACA0B,UAAU,CAACF,QAAQE;YACnBjE;QACF;QACA4C;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;QACAsC,UAAUrD,gBAAgBiC,qBAAqBqB;QAC/CC,UAASC,MAAM,EAAEC,IAAI;YACnB,IAAI,CAACA,KAAK7D,OAAO,IAAIK,eAAe;gBAClCgC;YACF;QACF;IACF;IACA,MAAM,EAAEyB,QAAQ,EAAE1C,aAAa,EAAE2C,YAAY,EAAE,GAAGvH,mBAAmB;QACnEmG,SAASU;QACTrE,WAAWlD,IAAI,CAACoG,WAAWvD,eAAeK;QAC1CgF,cAAchE;QACdiE,UAAU,CAACtG;QACXkB;QACAK,SAASgD,WAAWZ,oBAAoB,IAAIpC;QAC5CD;QACAE;QACAC;QACAC;QACAI;QACAC,WAAWgD,kBAAkBhD,SAAS;QACtCwE,cAAc;QACd,GAAGZ,SAAS;IACd;IACA/G,cAAcyD,WAAWM;IAEzB,2EAA2E;IAC3E,yEAAyE;IACzE,qEAAqE;IACrE,MAAM6D,OAAOlI,OAAOgE;IACpBjE,UAAU;QACRmI,KAAK7B,OAAO,GAAGrC;IACjB;IACAjE,UAAU;QACR,IAAI,CAACgE,SAAS;YACZ;QACF;QAEA,MAAMoE,WAAW,CAACvB;YAChB,uDAAuD;YACvD,IAAI,CAACV,QAAQG,OAAO,EAAE;gBACpB;YACF;YAEA,wEAAwE;YACxE,wEAAwE;YACxE,mEAAmE;YACnEF,mBAAmBE,OAAO,GACxB,CAAEO,CAAAA,MAAMwB,MAAM,YAAYC,WAAU,KACpC,CAACzB,MAAMwB,MAAM,CAACE,OAAO,CAAC,CAAC,OAAO,EAAE9G,KAAK,EAAE,CAAC;YAE1C,8DAA8D;YAC9D0G,KAAK7B,OAAO;YACZN;QACF;QAEA,0EAA0E;QAC1E,wDAAwD;QACxD,MAAMwC,QAAQC,OAAOC,qBAAqB,CAAC;YACzCD,OAAOE,gBAAgB,CAAC,SAASP;QACnC;QAEA,OAAO;YACLK,OAAOG,oBAAoB,CAACJ;YAC5BC,OAAOI,mBAAmB,CAAC,SAAST;QACtC;IACF,GAAG;QAACpC;QAAkBvE;QAAMuC;KAAQ;IACpCtD,0BAA0B;QACxB,IAAI,CAACsD,SAAS;YACZ;QACF;QAEAuD;IACF,GAAG;QAACA;QAAa7F;QAAUsC;KAAQ;IAEnC,qBACE,KAACrD;QACCgB,YAAYA;QACZM,eAAeA;QACfF,aAAaA;QACbF,aAAaA;QACbM,eAAeA;QACfE,mBAAmBA;kBAEnB,cAAA,KAACxB;YACCiI,cAAYtD;YACZuD,mBAAiBtD;YACjBuD,QAAQnH;YACRoH,QAAQlH;YACRmH,UAAU/G;YACVgH,cAAc9G;YACd2B,SAASA;YACToF,SAASlD;YACTjC,gBAAgBA;YAChB1C,OAAOiB;YACPQ,WAAWP;YACX2C,eAAeC;YACfxC,WAAWA;YACXyC,mBAAmBA;YAClB,GAAG/C,UAAU;sBAEd,cAAA,KAAClC;gBAAOmH,UAAUtB,WAAYb,CAAAA,qBAAqBD,aAAY;0BAC5D,AAAC0C,CAAAA,YAAY5B,OAAM,mBAClB,KAACpF;oBACE,GAAGyE,SAAS;oBACZ,GAAGwC,YAAY;oBACf,GAAGtB,aAAa;oBACjBpF,IAAIA;oBACJI,MAAMA;oBACNF,OAAO2E,UAAU1E,YAAYD;oBAC7B2E,SAASA;oBACTpD,UAAUA;oBACVnB,YAAYA;oBACZkC,WAAWA;oBACXC,WAAWA;oBACXC,eAAeA;oBACfnB,kBAAkBA;oBAClBwD,oBAAoBA;8BAEnB1E;;;;;AAOf,GACA"}
1
+ {"version":3,"sources":["../../src/menu/Menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cnb } from \"cnbuilder\";\nimport {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useEffect,\n useRef,\n} from \"react\";\n\nimport { type FloatingActionButtonPosition } from \"../button/FloatingActionButton.js\";\nimport { useFocusContainer } from \"../focus/useFocusContainer.js\";\nimport { useUserInteractionMode } from \"../interaction/UserInteractionModeProvider.js\";\nimport { type ListProps } from \"../list/List.js\";\nimport { useAppSize } from \"../media-queries/AppSizeProvider.js\";\nimport { type GetDefaultFocusedIndex } from \"../movement/types.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport { type CalculateFixedPositionOptions } from \"../positioning/types.js\";\nimport {\n type FixedPositioningOptions,\n useFixedPositioning,\n} from \"../positioning/useFixedPositioning.js\";\nimport { useScrollLock } from \"../scroll/useScrollLock.js\";\nimport {\n type ScaleTransitionHookOptions,\n useScaleTransition,\n} from \"../transition/useScaleTransition.js\";\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useIsomorphicLayoutEffect } from \"../useIsomorphicLayoutEffect.js\";\nimport {\n type MenuConfiguration,\n MenuConfigurationProvider,\n type MenuOrientationProps,\n useMenuConfiguration,\n} from \"./MenuConfigurationProvider.js\";\nimport { MenuSheet, type MenuSheetConvenienceProps } from \"./MenuSheet.js\";\nimport { MenuWidget } from \"./MenuWidget.js\";\nimport { useMenuBarContext } from \"./useMenuBarProvider.js\";\nimport { getDefaultAnchor } from \"./utils.js\";\n\n// NOTE: The augmentation is in this file since no types are imported from the\n// `styles` file at this time\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-menu-background-color\"?: string;\n \"--rmd-menu-color\"?: string;\n \"--rmd-menu-min-width\"?: string | number;\n \"--rmd-menu-spacing\"?: string | number;\n }\n}\n\nconst noop = (): void => {\n // do nothing\n};\n\n/** @since 5.0.0 */\nexport type MenuTransitionProps = Omit<\n ScaleTransitionHookOptions<HTMLDivElement>,\n \"transitionIn\" | \"vertical\" | \"nodeRef\"\n>;\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConfigurationProps extends CalculateFixedPositionOptions {\n /**\n * @see {@link ScaleTransitionHookOptions.temporary}\n * @defaultValue `true`\n */\n temporary?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * Boolean if the menu should not gain the elevation styles and should only be\n * set to `true` when rendering within a `Sheet`.\n *\n * @defaultValue `false`\n */\n disableElevation?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n\n /**\n * @see {@link FixedPositioningOptions.transformOrigin}\n * @defaultValue `true`\n */\n transformOrigin?: boolean;\n\n /**\n * Boolean if the menu should close if the page is scrolled. The default\n * behavior is to just update the position of the menu relative to the menu\n * button until it can no longer be visible within the viewport.\n *\n * @defaultValue `false`\n */\n closeOnScroll?: boolean;\n\n /**\n * Boolean if the page should no longer be scrollable while the menu is\n * visible.\n *\n * @defaultValue `false`\n */\n preventScroll?: boolean;\n\n /**\n * Boolean if the menu should close instead of repositioning itself if the\n * browser window is resized.\n *\n * @defaultValue `false`\n */\n closeOnResize?: boolean;\n\n /** @see {@link FixedPositioningOptions.getFixedPositionOptions} */\n getFixedPositionOptions?: () => CalculateFixedPositionOptions;\n\n /**\n * @defaultValue `false`\n * @see {@link FixedPositioningOptions.disabled}\n */\n disableFixedPositioning?: boolean;\n}\n\n/**\n * @since 5.1.0\n * @since 6.0.0 Renamed from `MenuListProps` to `MenuListConvenienceProps`\n */\nexport interface MenuListConvenienceProps {\n /**\n * An optional style to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n */\n listStyle?: CSSProperties;\n\n /**\n * An optional className to provide to the `List` component that surrounds the\n * `MenuItem` within a `Menu`.\n */\n listClassName?: string;\n\n /**\n * Any additional props to pass to the `List` component that surrounds the\n * `Menu`'s `MenuItem`s.\n */\n listProps?: PropsWithRef<Omit<ListProps, \"horizontal\">>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface MenuConvenienceProps extends MenuConfigurationProps {\n /**\n * This can be used to apply additional props to the `Menu` component.\n *\n * Note: You can override the `style` and `className` using\n * {@link menuStyle} and {@link menuClassName} instead for convenience.\n *\n * @example\n * ```tsx\n * <DropdownMenu\n * {...props}\n * menuProps={{\n * style: {\n * // custom inline style\n * },\n * className: \"come-class-name\",\n * getFixedPositionOptions: () => ({\n * preventOverlap: true,\n * }),\n * }}\n * />\n * ```\n */\n menuProps?: PropsWithRef<\n Omit<\n MenuProps,\n | \"children\"\n | \"fixedTo\"\n | \"visible\"\n | \"onRequestClose\"\n | \"getDefaultFocusedIndex\"\n >\n >;\n\n /**\n * Convenience prop to apply custom style to the `Menu` component.\n */\n menuStyle?: CSSProperties;\n\n /**\n * Convenience prop to apply custom class name to the `Menu` component.\n */\n menuClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport type MenuFixedPositioningOptions = Omit<\n FixedPositioningOptions<HTMLElement, HTMLDivElement>,\n \"onScroll\" | \"onResize\" | \"nodeRef\" | \"disabled\"\n>;\n\n/**\n * @since 5.0.0\n * @since 6.0.0 Updated to use the latest Menu, Transition, and Portal API.\n */\nexport interface MenuProps\n extends HTMLAttributes<HTMLDivElement>,\n MenuConfiguration,\n MenuConfigurationProps,\n MenuFixedPositioningOptions,\n MenuOrientationProps,\n MenuTransitionProps,\n MenuListConvenienceProps,\n MenuSheetConvenienceProps {\n visible: boolean;\n onRequestClose: () => void;\n\n /**\n * @defaultValue `\"menu-\" + useId()`\n */\n id?: string;\n\n /**\n * This is used to set the default focus index when the menu is visible.\n *\n * @internal\n */\n getDefaultFocusedIndex?: GetDefaultFocusedIndex;\n\n /**\n * Custom style that should be applied to the menu only while not rendered\n * within a sheet since the {@link style} would be applied to both versions.\n */\n menuStyle?: CSSProperties;\n\n /**\n * Custom class name that should be applied only while not rendered within a\n * sheet.\n */\n menuClassName?: string;\n\n /**\n * @internal\n *\n * This is only used to update the default anchor when the DropdownMenu's\n * toggle is a floating action button.\n */\n floating?: FloatingActionButtonPosition;\n}\n\n/**\n * **Client Component**\n *\n * This component should generally only be used to implement context menus with\n * the `useContextMenu` hook. Otherwise, the `DropdownMenu` component should be\n * used.\n *\n * @see The `useContextMenu` hook for an example.\n *\n * @see {@link https://react-md.dev/components/menu | Menu Demos}\n * @since 5.0.0\n * @since 6.0.0 Updated this component to implement all the `Menu`\n * functionality instead of requiring the `useMenu` hook and `MenuWidget`\n * component. In addition, the `renderAsSheet` behavior has been moved into this\n * implementation so that the `MenuRenderer` is no longer required and context\n * menus can appear as a `Sheet`.\n */\nexport const Menu = forwardRef<HTMLDivElement, LabelRequiredForA11y<MenuProps>>(\n function Menu(props, propRef) {\n const {\n id: propId,\n style: propStyle,\n role = \"menu\",\n children,\n horizontal: _horizontal,\n sheetHeader: _sheetHeader,\n sheetFooter: _sheetFooter,\n renderAsSheet: _renderAsSheet,\n sheetPosition: _sheetPosition,\n sheetVerticalSize: _sheetVerticalSize,\n sheetProps,\n sheetStyle,\n sheetClassName,\n menuStyle,\n menuClassName,\n disableElevation = false,\n temporary = true,\n tabIndex = -1,\n fixedTo,\n className,\n classNames,\n timeout,\n appear,\n enter,\n exit,\n onEnter,\n onEntering = noop,\n onEntered = noop,\n onExit,\n onExiting,\n onExited = noop,\n onKeyDown = noop,\n listProps,\n listStyle,\n listClassName,\n visible,\n onRequestClose,\n floating,\n anchor,\n closeOnResize = false,\n closeOnScroll = false,\n preventScroll = false,\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin = true,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n disableFixedPositioning,\n getFixedPositionOptions,\n disablePortal: propDisablePortal,\n disableTransition,\n ...remaining\n } = props;\n const { \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy } =\n props;\n\n const id = useEnsuredId(propId, \"menu\");\n const {\n root,\n menubar,\n menuitem,\n activeId,\n animatedOnceRef,\n hoverTimeoutRef,\n disableHoverMode,\n } = useMenuBarContext();\n const {\n horizontal,\n sheetHeader,\n sheetFooter,\n renderAsSheet,\n sheetPosition,\n sheetVerticalSize,\n } = useMenuConfiguration(props);\n const { isPhone } = useAppSize();\n const isSheet =\n renderAsSheet === true || (renderAsSheet === \"phone\" && isPhone);\n\n const entered = useRef(false);\n const cancelUnmountFocus = useRef(false);\n const hideWithoutRefocus = (): void => {\n cancelUnmountFocus.current = true;\n onRequestClose();\n };\n const mode = useUserInteractionMode();\n const mouse = mode === \"mouse\";\n\n const { eventHandlers, transitionOptions } = useFocusContainer({\n nodeRef: propRef,\n activate: visible,\n onKeyDown(event) {\n onKeyDown(event);\n\n // when a menu is within a sheet, it should not trigger the custom\n // keyboard behavior\n if (isSheet) {\n return;\n }\n\n switch (event.key) {\n case \"Escape\":\n // prevent parent components that have an \"Escape\" keypress event\n // from being triggered as well\n event.stopPropagation();\n disableHoverMode();\n onRequestClose();\n break;\n case \"Tab\":\n // since menus are portalled, tab index is kinda broke so just close\n // the menu instead of doing default tab behavior\n event.preventDefault();\n\n if (!menuitem) {\n // pressing the tab key should still cascade close all menus\n event.stopPropagation();\n }\n disableHoverMode();\n onRequestClose();\n break;\n case \"ArrowUp\":\n if (!root && menuitem && horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n case \"ArrowLeft\":\n if (!root && menuitem && !horizontal) {\n event.stopPropagation();\n event.preventDefault();\n onRequestClose();\n }\n break;\n }\n },\n onEnter,\n onEntering(appearing) {\n onEntering(appearing);\n entered.current = true;\n },\n onEntered(appearing) {\n onEntered(appearing);\n entered.current = true;\n cancelUnmountFocus.current = false;\n animatedOnceRef.current = true;\n },\n onExit,\n onExiting,\n onExited() {\n onExited();\n entered.current = false;\n },\n disableTransition,\n isFocusTypeDisabled(type) {\n if (role === \"listbox\") {\n return !isSheet;\n }\n\n if (type === \"keyboard\") {\n return isSheet;\n }\n\n const isHoverDisabled = mouse && hoverTimeoutRef.current === 0;\n if (type === \"mount\") {\n return isHoverDisabled;\n }\n\n return (\n isHoverDisabled ||\n cancelUnmountFocus.current ||\n (root && !!activeId && id !== activeId)\n );\n },\n });\n\n const { ref, style, callbacks, updateStyle } = useFixedPositioning({\n ...transitionOptions,\n disabled: disableFixedPositioning,\n style: isSheet ? propStyle : menuStyle,\n fixedTo,\n anchor: getDefaultAnchor({\n anchor,\n menubar,\n floating,\n menuitem: !root && menuitem,\n horizontal,\n }),\n vwMargin,\n vhMargin,\n xMargin,\n yMargin,\n width,\n transformOrigin,\n preventOverlap,\n disableSwapping,\n disableVHBounds,\n initialX,\n initialY,\n getFixedPositionOptions,\n onResize: closeOnResize ? hideWithoutRefocus : undefined,\n onScroll(_event, data) {\n if (!data.visible || closeOnScroll) {\n hideWithoutRefocus();\n }\n },\n });\n const { rendered, disablePortal, elementProps } = useScaleTransition({\n className: cnb(!isSheet && menuClassName, className),\n transitionIn: visible,\n vertical: !horizontal,\n temporary,\n timeout: isSheet || disableTransition ? 0 : timeout,\n classNames,\n appear,\n enter,\n exit,\n exitedHidden: true,\n // merge the transition callbacks\n ...transitionOptions,\n ...callbacks,\n // but prefer the latest defined ref\n nodeRef: ref,\n });\n useScrollLock(visible && preventScroll);\n\n // need to make sure that the useEffect does not refire for hiding on click\n // events because of the `window.requestAnimationFrame`. It'll make it so\n // that menu items that update state are unable to close when clicked\n const hide = useRef(onRequestClose);\n useEffect(() => {\n hide.current = onRequestClose;\n });\n useEffect(() => {\n if (!visible) {\n return;\n }\n\n const callback = (event: globalThis.MouseEvent): void => {\n // this is required for when the transition is disabled\n if (!entered.current) {\n return;\n }\n\n // if the user clicks outside of the menu to close it, the toggle button\n // should not be focused. instead the nearest focusable element from the\n // click event should be focused when Tab or Shift + tab is pressed\n cancelUnmountFocus.current =\n !(event.target instanceof HTMLElement) ||\n !event.target.closest(`[role=\"${role}\"]`);\n\n // this won't be called if `event.stopPropagation()` is called\n hide.current();\n disableHoverMode();\n };\n\n // wait an animation frame so the initial click event that caused the menu\n // to become visible does not immediately close the menu\n const frame = window.requestAnimationFrame(() => {\n window.addEventListener(\"click\", callback);\n });\n\n return () => {\n window.cancelAnimationFrame(frame);\n window.removeEventListener(\"click\", callback);\n };\n }, [disableHoverMode, role, visible]);\n useIsomorphicLayoutEffect(() => {\n if (!visible) {\n return;\n }\n\n updateStyle();\n }, [updateStyle, children, visible]);\n\n return (\n <MenuConfigurationProvider\n horizontal={horizontal}\n renderAsSheet={renderAsSheet}\n sheetFooter={sheetFooter}\n sheetHeader={sheetHeader}\n sheetPosition={sheetPosition}\n sheetVerticalSize={sheetVerticalSize}\n >\n <MenuSheet\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy as string}\n header={sheetHeader}\n footer={sheetFooter}\n position={sheetPosition}\n verticalSize={sheetVerticalSize}\n visible={visible}\n enabled={isSheet}\n onRequestClose={onRequestClose}\n style={sheetStyle}\n className={sheetClassName}\n disablePortal={propDisablePortal}\n temporary={temporary}\n disableTransition={disableTransition}\n {...sheetProps}\n >\n <Portal disabled={isSheet || (propDisablePortal ?? disablePortal)}>\n {(rendered || isSheet) && (\n <MenuWidget\n {...remaining}\n {...elementProps}\n {...eventHandlers}\n id={id}\n role={role}\n style={isSheet ? propStyle : style}\n isSheet={isSheet}\n tabIndex={tabIndex}\n horizontal={horizontal}\n listProps={listProps}\n listStyle={listStyle}\n listClassName={listClassName}\n disableElevation={disableElevation}\n cancelUnmountFocus={cancelUnmountFocus}\n >\n {children}\n </MenuWidget>\n )}\n </Portal>\n </MenuSheet>\n </MenuConfigurationProvider>\n );\n }\n);\n"],"names":["cnb","forwardRef","useEffect","useRef","useFocusContainer","useUserInteractionMode","useAppSize","Portal","useFixedPositioning","useScrollLock","useScaleTransition","useEnsuredId","useIsomorphicLayoutEffect","MenuConfigurationProvider","useMenuConfiguration","MenuSheet","MenuWidget","useMenuBarContext","getDefaultAnchor","noop","Menu","props","propRef","id","propId","style","propStyle","role","children","horizontal","_horizontal","sheetHeader","_sheetHeader","sheetFooter","_sheetFooter","renderAsSheet","_renderAsSheet","sheetPosition","_sheetPosition","sheetVerticalSize","_sheetVerticalSize","sheetProps","sheetStyle","sheetClassName","menuStyle","menuClassName","disableElevation","temporary","tabIndex","fixedTo","className","classNames","timeout","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","onKeyDown","listProps","listStyle","listClassName","visible","onRequestClose","floating","anchor","closeOnResize","closeOnScroll","preventScroll","vwMargin","vhMargin","xMargin","yMargin","width","transformOrigin","preventOverlap","disableSwapping","disableVHBounds","initialX","initialY","disableFixedPositioning","getFixedPositionOptions","disablePortal","propDisablePortal","disableTransition","remaining","ariaLabel","ariaLabelledBy","root","menubar","menuitem","activeId","animatedOnceRef","hoverTimeoutRef","disableHoverMode","isPhone","isSheet","entered","cancelUnmountFocus","hideWithoutRefocus","current","mode","mouse","eventHandlers","transitionOptions","nodeRef","activate","event","key","stopPropagation","preventDefault","appearing","isFocusTypeDisabled","type","isHoverDisabled","ref","callbacks","updateStyle","disabled","onResize","undefined","onScroll","_event","data","rendered","elementProps","transitionIn","vertical","exitedHidden","hide","callback","target","HTMLElement","closest","frame","window","requestAnimationFrame","addEventListener","cancelAnimationFrame","removeEventListener","aria-label","aria-labelledby","header","footer","position","verticalSize","enabled"],"mappings":"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"}
@@ -1,8 +1,11 @@
1
1
  import { type LiHTMLAttributes, type ReactNode } from "react";
2
+ import { type NavItemClassNameOptions } from "./navItemStyles.js";
2
3
  /**
3
4
  * @since 6.0.0
5
+ * @since 6.3.1 Extends NavItemClassNameOptions to allow for CSS properties
6
+ * augmentation.
4
7
  */
5
- export interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {
8
+ export interface NavItemProps extends LiHTMLAttributes<HTMLLIElement>, NavItemClassNameOptions {
6
9
  children: ReactNode;
7
10
  }
8
11
  /**
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/navigation/NavItem.tsx"],"sourcesContent":["import { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemProps extends LiHTMLAttributes<HTMLLIElement> {\n children: ReactNode;\n}\n\n/**\n * This component is just used to add padding based on the depth of the nav item\n * and should not be used on its own. See the `CollapsibleNavGroup` and\n * `NavItemLink` instead.\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItem = forwardRef<HTMLLIElement, NavItemProps>(\n function NavItem(props, ref) {\n const { className, children, ...remaining } = props;\n return (\n <li {...remaining} ref={ref} className={navItem({ className })}>\n {children}\n </li>\n );\n }\n);\n"],"names":["forwardRef","navItem","NavItem","props","ref","className","children","remaining","li"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAASC,OAAO,QAAQ,qBAAqB;AAS7C;;;;;;;CAOC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QAAI,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,QAAQ;YAAEI;QAAU;kBACzDC;;AAGP,GACA"}
1
+ {"version":3,"sources":["../../src/navigation/NavItem.tsx"],"sourcesContent":["import { type LiHTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type NavItemClassNameOptions, navItem } from \"./navItemStyles.js\";\n\n/**\n * @since 6.0.0\n * @since 6.3.1 Extends NavItemClassNameOptions to allow for CSS properties\n * augmentation.\n */\nexport interface NavItemProps\n extends LiHTMLAttributes<HTMLLIElement>,\n NavItemClassNameOptions {\n children: ReactNode;\n}\n\n/**\n * This component is just used to add padding based on the depth of the nav item\n * and should not be used on its own. See the `CollapsibleNavGroup` and\n * `NavItemLink` instead.\n *\n * @see {@link https://react-md.dev/components/navigation | Navigation Demos}\n * @since 6.0.0\n */\nexport const NavItem = forwardRef<HTMLLIElement, NavItemProps>(\n function NavItem(props, ref) {\n const { className, children, ...remaining } = props;\n return (\n <li {...remaining} ref={ref} className={navItem({ className })}>\n {children}\n </li>\n );\n }\n);\n"],"names":["forwardRef","navItem","NavItem","props","ref","className","children","remaining","li"],"mappings":";AAAA,SAAgDA,UAAU,QAAQ,QAAQ;AAE1E,SAAuCC,OAAO,QAAQ,qBAAqB;AAa3E;;;;;;;CAOC,GACD,OAAO,MAAMC,wBAAUF,WACrB,SAASE,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,WAAW,GAAGJ;IAC9C,qBACE,KAACK;QAAI,GAAGD,SAAS;QAAEH,KAAKA;QAAKC,WAAWJ,QAAQ;YAAEI;QAAU;kBACzDC;;AAGP,GACA"}
@@ -1,3 +1,10 @@
1
+ declare module "react" {
2
+ interface CSSProperties {
3
+ "--rmd-navigation-border-radius"?: string | number;
4
+ "--rmd-navigation-horizontal-padding"?: string | number;
5
+ "--rmd-navigation-padding-incrementor"?: string | number;
6
+ }
7
+ }
1
8
  /**
2
9
  * @since 6.0.0
3
10
  */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/navigation/navItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { button } from \"../button/styles.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-nav-item\");\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemClassNameOptions {\n className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItem(options: NavItemClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(styles(), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentClassNameOptions {\n className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemContent(\n options: NavItemContentClassNameOptions = {}\n): string {\n const { className } = options;\n\n return cnb(styles(\"content\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkClassNameOptions {\n className?: string;\n active?: boolean;\n\n /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n activeClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemLink(options: NavItemLinkClassNameOptions = {}): string {\n const {\n active,\n activeClassName = cssUtils({ fontWeight: \"bold\" }),\n className,\n } = options;\n\n return cnb(\n navItemContent(),\n styles(\"link\", { active }),\n button(),\n cssUtils({ textDecoration: \"none\" }),\n active && activeClassName,\n className\n );\n}\n"],"names":["cnb","button","cssUtils","bem","styles","navItem","options","className","navItemContent","navItemLink","active","activeClassName","fontWeight","textDecoration"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AASnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,UAAUG;AACvB;AASA;;CAEC,GACD,OAAO,SAASC,eACdF,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,OAAO,YAAYG;AAChC;AAaA;;CAEC,GACD,OAAO,SAASE,YAAYH,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJI,MAAM,EACNC,kBAAkBT,SAAS;QAAEU,YAAY;IAAO,EAAE,EAClDL,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLQ,kBACAJ,OAAO,QAAQ;QAAEM;IAAO,IACxBT,UACAC,SAAS;QAAEW,gBAAgB;IAAO,IAClCH,UAAUC,iBACVJ;AAEJ"}
1
+ {"version":3,"sources":["../../src/navigation/navItemStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { button } from \"../button/styles.js\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-nav-item\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-navigation-border-radius\"?: string | number;\n \"--rmd-navigation-horizontal-padding\"?: string | number;\n \"--rmd-navigation-padding-incrementor\"?: string | number;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemClassNameOptions {\n className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItem(options: NavItemClassNameOptions = {}): string {\n const { className } = options;\n\n return cnb(styles(), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemContentClassNameOptions {\n className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemContent(\n options: NavItemContentClassNameOptions = {}\n): string {\n const { className } = options;\n\n return cnb(styles(\"content\"), className);\n}\n\n/**\n * @since 6.0.0\n */\nexport interface NavItemLinkClassNameOptions {\n className?: string;\n active?: boolean;\n\n /** @defaultValue `cssUtils({ fontWeight: \"bold\" })` */\n activeClassName?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function navItemLink(options: NavItemLinkClassNameOptions = {}): string {\n const {\n active,\n activeClassName = cssUtils({ fontWeight: \"bold\" }),\n className,\n } = options;\n\n return cnb(\n navItemContent(),\n styles(\"link\", { active }),\n button(),\n cssUtils({ textDecoration: \"none\" }),\n active && activeClassName,\n className\n );\n}\n"],"names":["cnb","button","cssUtils","bem","styles","navItem","options","className","navItemContent","navItemLink","active","activeClassName","fontWeight","textDecoration"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,MAAM,QAAQ,sBAAsB;AAC7C,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAiBnB;;CAEC,GACD,OAAO,SAASE,QAAQC,UAAmC,CAAC,CAAC;IAC3D,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,UAAUG;AACvB;AASA;;CAEC,GACD,OAAO,SAASC,eACdF,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAON,IAAII,OAAO,YAAYG;AAChC;AAaA;;CAEC,GACD,OAAO,SAASE,YAAYH,UAAuC,CAAC,CAAC;IACnE,MAAM,EACJI,MAAM,EACNC,kBAAkBT,SAAS;QAAEU,YAAY;IAAO,EAAE,EAClDL,SAAS,EACV,GAAGD;IAEJ,OAAON,IACLQ,kBACAJ,OAAO,QAAQ;QAAEM;IAAO,IACxBT,UACAC,SAAS;QAAEW,gBAAgB;IAAO,IAClCH,UAAUC,iBACVJ;AAEJ"}
@@ -1,32 +1,13 @@
1
1
  import { type HTMLAttributes } from "react";
2
- import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
3
2
  import { type CSSTransitionComponentProps, type TransitionActions } from "../transition/types.js";
4
- declare module "react" {
5
- interface CSSProperties {
6
- "--rmd-overlay-background-color"?: string;
7
- "--rmd-overlay-z-index"?: number;
8
- }
9
- }
3
+ import { type BaseOverlayClassNameOptions } from "./styles.js";
10
4
  /**
11
5
  * @since 6.0.0 Added `align` and `justify` props.
12
6
  * @since 6.0.0 Renamed `hidden` to `noOpacity`.
7
+ * @since 6.3.1 Extends BaseOverlayClassNameOptions for CSSProperties module
8
+ * augmentation.
13
9
  */
14
- export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, CSSTransitionComponentProps, TransitionActions {
15
- /**
16
- * @defaultValue `"center"`
17
- * @since 6.0.0
18
- */
19
- align?: BoxAlignItems;
20
- /**
21
- * @defaultValue `"center"`
22
- * @since 6.0.0
23
- */
24
- justify?: BoxJustifyContent;
25
- /**
26
- * Set this to `true` for when the overlay should be visible. Toggling this
27
- * value will trigger the enter/exit animation.
28
- */
29
- visible: boolean;
10
+ export interface OverlayProps extends HTMLAttributes<HTMLSpanElement>, BaseOverlayClassNameOptions, CSSTransitionComponentProps, TransitionActions {
30
11
  /**
31
12
  * Set this to `true` if the overlay should be rendered with an `opacity: 0`
32
13
  * and disabling the animation. This is useful if you'd like a "close on
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { type BoxAlignItems, type BoxJustifyContent } from \"../box/styles.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n type CSSTransitionComponentProps,\n type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n DEFAULT_OVERLAY_CLASSNAMES,\n DEFAULT_OVERLAY_TIMEOUT,\n overlay,\n} from \"./styles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-overlay-background-color\"?: string;\n \"--rmd-overlay-z-index\"?: number;\n }\n}\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n */\nexport interface OverlayProps\n extends HTMLAttributes<HTMLSpanElement>,\n CSSTransitionComponentProps,\n TransitionActions {\n /**\n * @defaultValue `\"center\"`\n * @since 6.0.0\n */\n align?: BoxAlignItems;\n\n /**\n * @defaultValue `\"center\"`\n * @since 6.0.0\n */\n justify?: BoxJustifyContent;\n\n /**\n * Set this to `true` for when the overlay should be visible. Toggling this\n * value will trigger the enter/exit animation.\n */\n visible: boolean;\n\n /**\n * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n * and disabling the animation. This is useful if you'd like a \"close on\n * outside click\" behavior.\n *\n * @defaultValue `false`\n */\n noOpacity?: boolean;\n\n /**\n * @see {@link OverlayClassNameOptions.clickable}\n * @defaultValue `!noOpacity`\n */\n clickable?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { toggle, disable, toggled: visible } = useToggle(false);\n *\n * return (\n * <>\n * <Button onClick={toggle}>Toggle</Button>\n * <Overlay visible={visible} onClick={disable} />\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/overlay | Overlay Demos}\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n function Overlay(props, nodeRef) {\n const {\n children,\n className,\n visible,\n noOpacity = false,\n clickable = !noOpacity,\n temporary = true,\n timeout = DEFAULT_OVERLAY_TIMEOUT,\n classNames = DEFAULT_OVERLAY_CLASSNAMES,\n disableTransition = false,\n align = \"center\",\n justify = \"center\",\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n exitedHidden = true,\n disablePortal: propDisablePortal = false,\n ...remaining\n } = props;\n\n const ssr = useSsr();\n const { elementProps, rendered, disablePortal } = useCSSTransition({\n nodeRef,\n transitionIn: visible,\n timeout: noOpacity ? 0 : timeout,\n classNames: noOpacity ? \"\" : classNames,\n className: overlay({\n visible,\n clickable,\n align,\n justify,\n className,\n }),\n appear: appear && !disableTransition && !ssr,\n enter: enter && !disableTransition,\n exit: exit && !disableTransition,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary,\n exitedHidden,\n disablePortal: propDisablePortal,\n });\n\n return (\n <Portal disabled={disablePortal}>\n {rendered && (\n <span {...remaining} {...elementProps}>\n {children}\n </span>\n )}\n </Portal>\n );\n }\n);\n"],"names":["forwardRef","useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAE3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SACEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AA6DrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMjC;IACZ,MAAM,EAAEkC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}
1
+ {"version":3,"sources":["../../src/overlay/Overlay.tsx"],"sourcesContent":["\"use client\";\n\nimport { type HTMLAttributes, forwardRef } from \"react\";\n\nimport { useSsr } from \"../SsrProvider.js\";\nimport { Portal } from \"../portal/Portal.js\";\nimport {\n type CSSTransitionComponentProps,\n type TransitionActions,\n} from \"../transition/types.js\";\nimport { useCSSTransition } from \"../transition/useCSSTransition.js\";\nimport {\n type BaseOverlayClassNameOptions,\n DEFAULT_OVERLAY_CLASSNAMES,\n DEFAULT_OVERLAY_TIMEOUT,\n overlay,\n} from \"./styles.js\";\n\n/**\n * @since 6.0.0 Added `align` and `justify` props.\n * @since 6.0.0 Renamed `hidden` to `noOpacity`.\n * @since 6.3.1 Extends BaseOverlayClassNameOptions for CSSProperties module\n * augmentation.\n */\nexport interface OverlayProps\n extends HTMLAttributes<HTMLSpanElement>,\n BaseOverlayClassNameOptions,\n CSSTransitionComponentProps,\n TransitionActions {\n /**\n * Set this to `true` if the overlay should be rendered with an `opacity: 0`\n * and disabling the animation. This is useful if you'd like a \"close on\n * outside click\" behavior.\n *\n * @defaultValue `false`\n */\n noOpacity?: boolean;\n\n /**\n * @see {@link OverlayClassNameOptions.clickable}\n * @defaultValue `!noOpacity`\n */\n clickable?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disablePortal?: boolean;\n\n /**\n * @defaultValue `false`\n */\n disableTransition?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @example Simple Example\n * ```tsx\n * import { Button } from \"@react-md/core/button/Button\";\n * import { Overlay } from \"@react-md/core/overlay/Overlay\";\n * import { useToggle } from \"@react-md/core/useToggle\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const { toggle, disable, toggled: visible } = useToggle(false);\n *\n * return (\n * <>\n * <Button onClick={toggle}>Toggle</Button>\n * <Overlay visible={visible} onClick={disable} />\n * </>\n * );\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/overlay | Overlay Demos}\n * @since 6.0.0 Removed the `onRequestClose` prop in favor of using\n * the `onClick` prop instead.\n */\nexport const Overlay = forwardRef<HTMLSpanElement, OverlayProps>(\n function Overlay(props, nodeRef) {\n const {\n children,\n className,\n visible,\n noOpacity = false,\n clickable = !noOpacity,\n temporary = true,\n timeout = DEFAULT_OVERLAY_TIMEOUT,\n classNames = DEFAULT_OVERLAY_CLASSNAMES,\n disableTransition = false,\n align = \"center\",\n justify = \"center\",\n appear,\n enter,\n exit,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n exitedHidden = true,\n disablePortal: propDisablePortal = false,\n ...remaining\n } = props;\n\n const ssr = useSsr();\n const { elementProps, rendered, disablePortal } = useCSSTransition({\n nodeRef,\n transitionIn: visible,\n timeout: noOpacity ? 0 : timeout,\n classNames: noOpacity ? \"\" : classNames,\n className: overlay({\n visible,\n clickable,\n align,\n justify,\n className,\n }),\n appear: appear && !disableTransition && !ssr,\n enter: enter && !disableTransition,\n exit: exit && !disableTransition,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary,\n exitedHidden,\n disablePortal: propDisablePortal,\n });\n\n return (\n <Portal disabled={disablePortal}>\n {rendered && (\n <span {...remaining} {...elementProps}>\n {children}\n </span>\n )}\n </Portal>\n );\n }\n);\n"],"names":["forwardRef","useSsr","Portal","useCSSTransition","DEFAULT_OVERLAY_CLASSNAMES","DEFAULT_OVERLAY_TIMEOUT","overlay","Overlay","props","nodeRef","children","className","visible","noOpacity","clickable","temporary","timeout","classNames","disableTransition","align","justify","appear","enter","exit","onEnter","onEntering","onEntered","onExit","onExiting","onExited","exitedHidden","disablePortal","propDisablePortal","remaining","ssr","elementProps","rendered","transitionIn","disabled","span"],"mappings":"AAAA;;AAEA,SAA8BA,UAAU,QAAQ,QAAQ;AAExD,SAASC,MAAM,QAAQ,oBAAoB;AAC3C,SAASC,MAAM,QAAQ,sBAAsB;AAK7C,SAASC,gBAAgB,QAAQ,oCAAoC;AACrE,SAEEC,0BAA0B,EAC1BC,uBAAuB,EACvBC,OAAO,QACF,cAAc;AAuCrB;;;;;;;;;;;;;;;;;;;;;;;;;CAyBC,GACD,OAAO,MAAMC,wBAAUP,WACrB,SAASO,QAAQC,KAAK,EAAEC,OAAO;IAC7B,MAAM,EACJC,QAAQ,EACRC,SAAS,EACTC,OAAO,EACPC,YAAY,KAAK,EACjBC,YAAY,CAACD,SAAS,EACtBE,YAAY,IAAI,EAChBC,UAAUX,uBAAuB,EACjCY,aAAab,0BAA0B,EACvCc,oBAAoB,KAAK,EACzBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,MAAM,EACNC,KAAK,EACLC,IAAI,EACJC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,eAAe,IAAI,EACnBC,eAAeC,oBAAoB,KAAK,EACxC,GAAGC,WACJ,GAAGzB;IAEJ,MAAM0B,MAAMjC;IACZ,MAAM,EAAEkC,YAAY,EAAEC,QAAQ,EAAEL,aAAa,EAAE,GAAG5B,iBAAiB;QACjEM;QACA4B,cAAczB;QACdI,SAASH,YAAY,IAAIG;QACzBC,YAAYJ,YAAY,KAAKI;QAC7BN,WAAWL,QAAQ;YACjBM;YACAE;YACAK;YACAC;YACAT;QACF;QACAU,QAAQA,UAAU,CAACH,qBAAqB,CAACgB;QACzCZ,OAAOA,SAAS,CAACJ;QACjBK,MAAMA,QAAQ,CAACL;QACfM;QACAC;QACAC;QACAC;QACAC;QACAC;QACAd;QACAe;QACAC,eAAeC;IACjB;IAEA,qBACE,KAAC9B;QAAOoC,UAAUP;kBACfK,0BACC,KAACG;YAAM,GAAGN,SAAS;YAAG,GAAGE,YAAY;sBAClCzB;;;AAKX,GACA"}
@@ -1,18 +1,36 @@
1
1
  import { type BoxAlignItems, type BoxJustifyContent } from "../box/styles.js";
2
- /** @since 6.0.0 */
3
- export interface OverlayClassNameOptions {
2
+ declare module "react" {
3
+ interface CSSProperties {
4
+ "--rmd-overlay-background-color"?: string;
5
+ "--rmd-overlay-z-index"?: number;
6
+ }
7
+ }
8
+ export interface BaseOverlayClassNameOptions {
4
9
  className?: string;
10
+ /**
11
+ * Set this to `true` for when the overlay should be visible. Toggling this
12
+ * value will trigger the enter/exit animation.
13
+ */
5
14
  visible: boolean;
6
- /** @defaultValue `false` */
7
- active?: boolean;
15
+ /**
16
+ * @defaultValue `"center"`
17
+ * @since 6.0.0
18
+ */
19
+ align?: BoxAlignItems;
20
+ /**
21
+ * @defaultValue `"center"`
22
+ * @since 6.0.0
23
+ */
24
+ justify?: BoxJustifyContent;
8
25
  /** @defaultValue `false` */
9
26
  clickable?: boolean;
27
+ }
28
+ /** @since 6.0.0 */
29
+ export interface OverlayClassNameOptions extends BaseOverlayClassNameOptions {
30
+ /** @defaultValue `false` */
31
+ active?: boolean;
10
32
  /** @defaultValue `false` */
11
33
  absolute?: boolean;
12
- /** @defaultValue `"center"` */
13
- align?: BoxAlignItems;
14
- /** @defaultValue `"center"` */
15
- justify?: BoxJustifyContent;
16
34
  }
17
35
  /**
18
36
  * @since 6.0.0
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/overlay/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n type BoxAlignItems,\n type BoxJustifyContent,\n box,\n} from \"../box/styles.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-overlay\");\n\n/** @since 6.0.0 */\nexport interface OverlayClassNameOptions {\n className?: string;\n\n visible: boolean;\n\n /** @defaultValue `false` */\n active?: boolean;\n\n /** @defaultValue `false` */\n clickable?: boolean;\n\n /** @defaultValue `false` */\n absolute?: boolean;\n\n /** @defaultValue `\"center\"` */\n align?: BoxAlignItems;\n\n /** @defaultValue `\"center\"` */\n justify?: BoxJustifyContent;\n}\n\n/**\n * @since 6.0.0\n */\nexport function overlay(\n options: OverlayClassNameOptions & { active?: boolean }\n): string {\n const {\n visible,\n active,\n absolute = false,\n clickable = false,\n align = \"center\",\n justify = \"center\",\n className,\n } = options;\n\n return cnb(\n styles({\n active,\n visible,\n clickable,\n absolute,\n }),\n box({\n align,\n justify,\n disablePadding: true,\n }),\n className\n );\n}\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT = 150 as const satisfies TransitionTimeout;\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES = {\n appearActive: \"rmd-overlay--active\",\n appearDone: \"rmd-overlay--active\",\n enterActive: \"rmd-overlay--active\",\n enterDone: \"rmd-overlay--active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAGEC,GAAG,QACE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAwBnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAME,0BAA0B,IAAyC;AAEhF,iBAAiB,GACjB,OAAO,MAAMC,6BAA6B;IACxCC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAA6C"}
1
+ {"version":3,"sources":["../../src/overlay/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport {\n type BoxAlignItems,\n type BoxJustifyContent,\n box,\n} from \"../box/styles.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-overlay\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-overlay-background-color\"?: string;\n \"--rmd-overlay-z-index\"?: number;\n }\n}\n\nexport interface BaseOverlayClassNameOptions {\n className?: string;\n\n /**\n * Set this to `true` for when the overlay should be visible. Toggling this\n * value will trigger the enter/exit animation.\n */\n visible: boolean;\n\n /**\n * @defaultValue `\"center\"`\n * @since 6.0.0\n */\n align?: BoxAlignItems;\n\n /**\n * @defaultValue `\"center\"`\n * @since 6.0.0\n */\n justify?: BoxJustifyContent;\n\n /** @defaultValue `false` */\n clickable?: boolean;\n}\n\n/** @since 6.0.0 */\nexport interface OverlayClassNameOptions extends BaseOverlayClassNameOptions {\n /** @defaultValue `false` */\n active?: boolean;\n\n /** @defaultValue `false` */\n absolute?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function overlay(\n options: OverlayClassNameOptions & { active?: boolean }\n): string {\n const {\n visible,\n active,\n absolute = false,\n clickable = false,\n align = \"center\",\n justify = \"center\",\n className,\n } = options;\n\n return cnb(\n styles({\n active,\n visible,\n clickable,\n absolute,\n }),\n box({\n align,\n justify,\n disablePadding: true,\n }),\n className\n );\n}\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_TIMEOUT = 150 as const satisfies TransitionTimeout;\n\n/** @since 2.4.0 */\nexport const DEFAULT_OVERLAY_CLASSNAMES = {\n appearActive: \"rmd-overlay--active\",\n appearDone: \"rmd-overlay--active\",\n enterActive: \"rmd-overlay--active\",\n enterDone: \"rmd-overlay--active\",\n} as const satisfies CSSTransitionClassNames;\n"],"names":["cnb","box","bem","styles","overlay","options","visible","active","absolute","clickable","align","justify","className","disablePadding","DEFAULT_OVERLAY_TIMEOUT","DEFAULT_OVERLAY_CLASSNAMES","appearActive","appearDone","enterActive","enterDone"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAGEC,GAAG,QACE,mBAAmB;AAK1B,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AA2CnB;;CAEC,GACD,OAAO,SAASE,QACdC,OAAuD;IAEvD,MAAM,EACJC,OAAO,EACPC,MAAM,EACNC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,QAAQ,QAAQ,EAChBC,UAAU,QAAQ,EAClBC,SAAS,EACV,GAAGP;IAEJ,OAAOL,IACLG,OAAO;QACLI;QACAD;QACAG;QACAD;IACF,IACAP,IAAI;QACFS;QACAC;QACAE,gBAAgB;IAClB,IACAD;AAEJ;AAEA,iBAAiB,GACjB,OAAO,MAAME,0BAA0B,IAAyC;AAEhF,iBAAiB,GACjB,OAAO,MAAMC,6BAA6B;IACxCC,cAAc;IACdC,YAAY;IACZC,aAAa;IACbC,WAAW;AACb,EAA6C"}
@@ -1,10 +1,13 @@
1
1
  import { type CSSProperties, type HTMLAttributes } from "react";
2
2
  import { type LabelRequiredForA11y, type PropsWithRef } from "../types.js";
3
+ import { type BaseLinearProgressClassNameOptions } from "./linearProgressStyles.js";
3
4
  import { type ProgressProps } from "./types.js";
4
5
  /**
5
6
  * @since 6.0.0 Added the `theme` prop
7
+ * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties
8
+ * module augmentation.
6
9
  */
7
- export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">, ProgressProps {
10
+ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement>, "id" | "children">, BaseLinearProgressClassNameOptions, ProgressProps {
8
11
  /**
9
12
  * An optional style to apply to the progress bar. This will be merged with
10
13
  * the current width or height tracking the progress when a `value` is also
@@ -28,14 +31,6 @@ export interface LinearProgressProps extends Omit<HTMLAttributes<HTMLSpanElement
28
31
  * @defaultValue `false`
29
32
  */
30
33
  reverse?: boolean;
31
- /**
32
- * Boolean if the progress should be vertical instead of horizontal. When
33
- * this prop is set, you should also set the `verticalHeight` prop to a height
34
- * value you want for your progress bar.
35
- *
36
- * @defaultValue `false`
37
- */
38
- vertical?: boolean;
39
34
  /**
40
35
  * Since there isn't really a good way to have "auto height", you'll need to
41
36
  * manually set the progress bar's height with this prop to some pixel value.
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport { linearProgress, linearProgressBar } from \"./linearProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n */\nexport interface LinearProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n ProgressProps {\n /**\n * An optional style to apply to the progress bar. This will be merged with\n * the current width or height tracking the progress when a `value` is also\n * provided.\n */\n barStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the progress bar.\n */\n barClassName?: string;\n\n /**\n * @since 6.1.0\n */\n barProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n /**\n * Boolean if the progress should be reversed. This will change the progress\n * direction from `left-to-right` to be `right-to-left`. If the current\n * language is a rtl language and this prop is enabled, the direction will\n * still be `left-to-right`.\n *\n * @defaultValue `false`\n */\n reverse?: boolean;\n\n /**\n * Boolean if the progress should be vertical instead of horizontal. When\n * this prop is set, you should also set the `verticalHeight` prop to a height\n * value you want for your progress bar.\n *\n * @defaultValue `false`\n */\n vertical?: boolean;\n\n /**\n * Since there isn't really a good way to have \"auto height\", you'll need to\n * manually set the progress bar's height with this prop to some pixel value.\n * If you'd prefer to set the height in Sass/css, set this value to `null`\n * instead since this value would be passed down as a `height` inline style.\n *\n * @defaultValue `240`\n */\n verticalHeight?: number | null;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}\n * @since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n const {\n id: propId,\n style: propStyle,\n className,\n barStyle: propBarStyle,\n barClassName,\n barProps,\n min = 0,\n max = 100,\n value,\n reverse,\n theme,\n disableTransition,\n vertical,\n verticalHeight = 240,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"linear-progress\");\n const style = useMemo(() => {\n if (!vertical || verticalHeight === null) {\n return propStyle;\n }\n\n return {\n ...propStyle,\n height: verticalHeight,\n };\n }, [propStyle, vertical, verticalHeight]);\n\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n const barStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propBarStyle;\n }\n\n const key = vertical ? \"height\" : \"width\";\n return {\n ...propBarStyle,\n [key]: `${progress * 100}%`,\n };\n }, [progress, propBarStyle, vertical]);\n\n const indeterminate = typeof progress !== \"number\";\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n style={style}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={linearProgress({\n className,\n theme,\n vertical,\n indeterminate,\n })}\n >\n <span\n {...barProps}\n style={barStyle}\n className={linearProgressBar({\n className: barClassName,\n reverse,\n vertical,\n indeterminate,\n disableTransition,\n })}\n />\n </span>\n );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","linearProgress","linearProgressBar","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","barProps","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAASC,cAAc,EAAEC,iBAAiB,QAAQ,4BAA4B;AAwD9E;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,+BAAiBN,WAG5B,SAASM,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,QAAQ,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,OAAO,EACPC,KAAK,EACLC,iBAAiB,EACjBC,QAAQ,EACRC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQV,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOb;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZe,QAAQF;QACV;IACF,GAAG;QAACb;QAAWY;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWzB,cAAc;YAAEe;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMf,WAAWb,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOb;QACT;QAEA,MAAMe,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGT,YAAY;YACf,CAACe,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUb;QAAcS;KAAS;IAErC,MAAMO,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,iBAAehB;QACfP,WAAWT,eAAe;YACxBS;YACAS;YACAE;YACAO;QACF;kBAEA,cAAA,KAACC;YACE,GAAGf,QAAQ;YACZN,OAAOG;YACPD,WAAWR,kBAAkB;gBAC3BQ,WAAWG;gBACXK;gBACAG;gBACAO;gBACAR;YACF;;;AAIR,GAAG"}
1
+ {"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {\n type CSSProperties,\n type HTMLAttributes,\n forwardRef,\n useMemo,\n} from \"react\";\n\nimport { type LabelRequiredForA11y, type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { getPercentage } from \"../utils/getPercentage.js\";\nimport {\n type BaseLinearProgressClassNameOptions,\n linearProgress,\n linearProgressBar,\n} from \"./linearProgressStyles.js\";\nimport { type ProgressProps } from \"./types.js\";\n\n/**\n * @since 6.0.0 Added the `theme` prop\n * @since 6.3.1 extends BaseLinearProgressClassNameOptions for CSSProperties\n * module augmentation.\n */\nexport interface LinearProgressProps\n extends Omit<HTMLAttributes<HTMLSpanElement>, \"id\" | \"children\">,\n BaseLinearProgressClassNameOptions,\n ProgressProps {\n /**\n * An optional style to apply to the progress bar. This will be merged with\n * the current width or height tracking the progress when a `value` is also\n * provided.\n */\n barStyle?: CSSProperties;\n\n /**\n * An optional className to apply to the progress bar.\n */\n barClassName?: string;\n\n /**\n * @since 6.1.0\n */\n barProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;\n\n /**\n * Boolean if the progress should be reversed. This will change the progress\n * direction from `left-to-right` to be `right-to-left`. If the current\n * language is a rtl language and this prop is enabled, the direction will\n * still be `left-to-right`.\n *\n * @defaultValue `false`\n */\n reverse?: boolean;\n\n /**\n * Since there isn't really a good way to have \"auto height\", you'll need to\n * manually set the progress bar's height with this prop to some pixel value.\n * If you'd prefer to set the height in Sass/css, set this value to `null`\n * instead since this value would be passed down as a `height` inline style.\n *\n * @defaultValue `240`\n */\n verticalHeight?: number | null;\n}\n\n/**\n * @example Indeterminate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * return <LinearProgress aria-label=\"Loading\" />;\n * }\n * ```\n *\n * @example Determinate Example\n * ```tsx\n * import { LinearProgress } from \"@react-md/core/progress/LinearProgress\";\n * import { useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * // a number from 0 - 100\n * const [progress, setProgress] = useState(0);\n *\n * return <LinearProgress aria-label=\"File upload\" value={progress} />;\n * }\n * ```\n *\n * @see {@link https://react-md.dev/components/progress#linear-progress | Progress Demos}\n * @since 6.0.0 Supports rendering as any of the theme colors and\n * requires a label for accessibility.\n */\nexport const LinearProgress = forwardRef<\n HTMLSpanElement,\n LabelRequiredForA11y<LinearProgressProps>\n>(function LinearProgress(props, ref) {\n const {\n id: propId,\n style: propStyle,\n className,\n barStyle: propBarStyle,\n barClassName,\n barProps,\n min = 0,\n max = 100,\n value,\n reverse,\n theme,\n disableTransition,\n vertical,\n verticalHeight = 240,\n ...remaining\n } = props;\n\n const id = useEnsuredId(propId, \"linear-progress\");\n const style = useMemo(() => {\n if (!vertical || verticalHeight === null) {\n return propStyle;\n }\n\n return {\n ...propStyle,\n height: verticalHeight,\n };\n }, [propStyle, vertical, verticalHeight]);\n\n let progress: number | undefined;\n if (typeof value === \"number\") {\n progress = getPercentage({ min, max, value, validate: true });\n }\n const barStyle = useMemo(() => {\n if (typeof progress !== \"number\") {\n return propBarStyle;\n }\n\n const key = vertical ? \"height\" : \"width\";\n return {\n ...propBarStyle,\n [key]: `${progress * 100}%`,\n };\n }, [progress, propBarStyle, vertical]);\n\n const indeterminate = typeof progress !== \"number\";\n return (\n <span\n {...remaining}\n id={id}\n ref={ref}\n style={style}\n role=\"progressbar\"\n aria-valuemin={min}\n aria-valuemax={max}\n aria-valuenow={value}\n className={linearProgress({\n className,\n theme,\n vertical,\n indeterminate,\n })}\n >\n <span\n {...barProps}\n style={barStyle}\n className={linearProgressBar({\n className: barClassName,\n reverse,\n vertical,\n indeterminate,\n disableTransition,\n })}\n />\n </span>\n );\n});\n"],"names":["forwardRef","useMemo","useEnsuredId","getPercentage","linearProgress","linearProgressBar","LinearProgress","props","ref","id","propId","style","propStyle","className","barStyle","propBarStyle","barClassName","barProps","min","max","value","reverse","theme","disableTransition","vertical","verticalHeight","remaining","height","progress","validate","key","indeterminate","span","role","aria-valuemin","aria-valuemax","aria-valuenow"],"mappings":";AAAA,SAGEA,UAAU,EACVC,OAAO,QACF,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,aAAa,QAAQ,4BAA4B;AAC1D,SAEEC,cAAc,EACdC,iBAAiB,QACZ,4BAA4B;AAkDnC;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2BC,GACD,OAAO,MAAMC,+BAAiBN,WAG5B,SAASM,eAAeC,KAAK,EAAEC,GAAG;IAClC,MAAM,EACJC,IAAIC,MAAM,EACVC,OAAOC,SAAS,EAChBC,SAAS,EACTC,UAAUC,YAAY,EACtBC,YAAY,EACZC,QAAQ,EACRC,MAAM,CAAC,EACPC,MAAM,GAAG,EACTC,KAAK,EACLC,OAAO,EACPC,KAAK,EACLC,iBAAiB,EACjBC,QAAQ,EACRC,iBAAiB,GAAG,EACpB,GAAGC,WACJ,GAAGnB;IAEJ,MAAME,KAAKP,aAAaQ,QAAQ;IAChC,MAAMC,QAAQV,QAAQ;QACpB,IAAI,CAACuB,YAAYC,mBAAmB,MAAM;YACxC,OAAOb;QACT;QAEA,OAAO;YACL,GAAGA,SAAS;YACZe,QAAQF;QACV;IACF,GAAG;QAACb;QAAWY;QAAUC;KAAe;IAExC,IAAIG;IACJ,IAAI,OAAOR,UAAU,UAAU;QAC7BQ,WAAWzB,cAAc;YAAEe;YAAKC;YAAKC;YAAOS,UAAU;QAAK;IAC7D;IACA,MAAMf,WAAWb,QAAQ;QACvB,IAAI,OAAO2B,aAAa,UAAU;YAChC,OAAOb;QACT;QAEA,MAAMe,MAAMN,WAAW,WAAW;QAClC,OAAO;YACL,GAAGT,YAAY;YACf,CAACe,IAAI,EAAE,GAAGF,WAAW,IAAI,CAAC,CAAC;QAC7B;IACF,GAAG;QAACA;QAAUb;QAAcS;KAAS;IAErC,MAAMO,gBAAgB,OAAOH,aAAa;IAC1C,qBACE,KAACI;QACE,GAAGN,SAAS;QACbjB,IAAIA;QACJD,KAAKA;QACLG,OAAOA;QACPsB,MAAK;QACLC,iBAAehB;QACfiB,iBAAehB;QACfiB,iBAAehB;QACfP,WAAWT,eAAe;YACxBS;YACAS;YACAE;YACAO;QACF;kBAEA,cAAA,KAACC;YACE,GAAGf,QAAQ;YACZN,OAAOG;YACPD,WAAWR,kBAAkB;gBAC3BQ,WAAWG;gBACXK;gBACAG;gBACAO;gBACAR;YACF;;;AAIR,GAAG"}
@@ -1,4 +1,10 @@
1
1
  import { type ProgressTheme } from "./types.js";
2
+ declare module "react" {
3
+ interface CSSProperties {
4
+ "--rmd-progress-circular-size"?: string | number;
5
+ "--rmd-progress-circular-stroke-width"?: string | number;
6
+ }
7
+ }
2
8
  /**
3
9
  * @since 6.2.0
4
10
  */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/progress/circularProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-circular-progress\");\n\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n\n /**\n * Set to `true` to render as a smaller size.\n *\n * @defaultValue `false`\n * @since 2.3.0\n * @since 6.0.0 Renamed from `small`\n */\n dense?: boolean;\n\n /**\n * Boolean if the circular progress should be centered using left and right\n * margins.\n *\n * @defaultValue `false`\n * @since 6.0.0 Renamed from `centered`\n */\n disableCentered?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgress(\n options: CircularProgressClassNameOptions = {}\n): string {\n const { className, theme = \"primary\", dense, disableCentered } = options;\n\n return cnb(\n styles({ dense, centered: !disableCentered }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressSvgClassNameOptions {\n className?: string;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableShrink?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgressSvg(\n options: CircularProgressSvgClassNameOptions = {}\n): string {\n const { className, indeterminate, disableShrink } = options;\n\n return cnb(\n styles(\"svg\", {\n determinate: !indeterminate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n className\n );\n}\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressCircleClassNameOptions {\n className?: string;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableShrink?: boolean;\n /** @defaultValue `false` */\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgressCircle(\n options: CircularProgressCircleClassNameOptions = {}\n): string {\n const { className, indeterminate, disableShrink, disableTransition } =\n options;\n\n return cnb(\n styles(\"circle\", {\n animate: !disableTransition && !indeterminate,\n determinate: !indeterminate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","circularProgress","options","className","theme","dense","disableCentered","centered","textColor","circularProgressSvg","indeterminate","disableShrink","determinate","circularProgressCircle","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAiCnB;;CAEC,GACD,OAAO,SAASE,iBACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGJ;IAEjE,OAAOL,IACLG,OAAO;QAAEK;QAAOE,UAAU,CAACD;IAAgB,IAC3CF,UAAU,mBAAmBN,SAAS;QAAEU,WAAWJ;IAAM,IACzDD;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASM,oBACdP,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEC,SAAS,EAAEO,aAAa,EAAEC,aAAa,EAAE,GAAGT;IAEpD,OAAOL,IACLG,OAAO,OAAO;QACZY,aAAa,CAACF;QACdA,eAAeA,iBAAiB,CAACC;QACjC,eAAeD,iBAAiBC;IAClC,IACAR;AAEJ;AAcA;;CAEC,GACD,OAAO,SAASU,uBACdX,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAEO,aAAa,EAAEC,aAAa,EAAEG,iBAAiB,EAAE,GAClEZ;IAEF,OAAOL,IACLG,OAAO,UAAU;QACfe,SAAS,CAACD,qBAAqB,CAACJ;QAChCE,aAAa,CAACF;QACdA,eAAeA,iBAAiB,CAACC;QACjC,eAAeD,iBAAiBC;IAClC,IACAR;AAEJ"}
1
+ {"version":3,"sources":["../../src/progress/circularProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-circular-progress\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-progress-circular-size\"?: string | number;\n \"--rmd-progress-circular-stroke-width\"?: string | number;\n }\n}\n\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n\n /**\n * Set to `true` to render as a smaller size.\n *\n * @defaultValue `false`\n * @since 2.3.0\n * @since 6.0.0 Renamed from `small`\n */\n dense?: boolean;\n\n /**\n * Boolean if the circular progress should be centered using left and right\n * margins.\n *\n * @defaultValue `false`\n * @since 6.0.0 Renamed from `centered`\n */\n disableCentered?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgress(\n options: CircularProgressClassNameOptions = {}\n): string {\n const { className, theme = \"primary\", dense, disableCentered } = options;\n\n return cnb(\n styles({ dense, centered: !disableCentered }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressSvgClassNameOptions {\n className?: string;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableShrink?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgressSvg(\n options: CircularProgressSvgClassNameOptions = {}\n): string {\n const { className, indeterminate, disableShrink } = options;\n\n return cnb(\n styles(\"svg\", {\n determinate: !indeterminate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n className\n );\n}\n/**\n * @since 6.2.0\n */\nexport interface CircularProgressCircleClassNameOptions {\n className?: string;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableShrink?: boolean;\n /** @defaultValue `false` */\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function circularProgressCircle(\n options: CircularProgressCircleClassNameOptions = {}\n): string {\n const { className, indeterminate, disableShrink, disableTransition } =\n options;\n\n return cnb(\n styles(\"circle\", {\n animate: !disableTransition && !indeterminate,\n determinate: !indeterminate,\n indeterminate: indeterminate && !disableShrink,\n \"rotate-only\": indeterminate && disableShrink,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","circularProgress","options","className","theme","dense","disableCentered","centered","textColor","circularProgressSvg","indeterminate","disableShrink","determinate","circularProgressCircle","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAwCnB;;CAEC,GACD,OAAO,SAASE,iBACdC,UAA4C,CAAC,CAAC;IAE9C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,KAAK,EAAEC,eAAe,EAAE,GAAGJ;IAEjE,OAAOL,IACLG,OAAO;QAAEK;QAAOE,UAAU,CAACD;IAAgB,IAC3CF,UAAU,mBAAmBN,SAAS;QAAEU,WAAWJ;IAAM,IACzDD;AAEJ;AAaA;;CAEC,GACD,OAAO,SAASM,oBACdP,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEC,SAAS,EAAEO,aAAa,EAAEC,aAAa,EAAE,GAAGT;IAEpD,OAAOL,IACLG,OAAO,OAAO;QACZY,aAAa,CAACF;QACdA,eAAeA,iBAAiB,CAACC;QACjC,eAAeD,iBAAiBC;IAClC,IACAR;AAEJ;AAcA;;CAEC,GACD,OAAO,SAASU,uBACdX,UAAkD,CAAC,CAAC;IAEpD,MAAM,EAAEC,SAAS,EAAEO,aAAa,EAAEC,aAAa,EAAEG,iBAAiB,EAAE,GAClEZ;IAEF,OAAOL,IACLG,OAAO,UAAU;QACfe,SAAS,CAACD,qBAAqB,CAACJ;QAChCE,aAAa,CAACF;QACdA,eAAeA,iBAAiB,CAACC;QACjC,eAAeD,iBAAiBC;IAClC,IACAR;AAEJ"}
@@ -1,16 +1,31 @@
1
1
  import { type ProgressTheme } from "./types.js";
2
- /**
3
- * @since 6.2.0
4
- */
5
- export interface LinearProgressClassNameOptions {
2
+ declare module "react" {
3
+ interface CSSProperties {
4
+ "--rmd-progress-background-color"?: string;
5
+ "--rmd-progress-color"?: string;
6
+ "--rmd-progress-linear-size"?: string | number;
7
+ }
8
+ }
9
+ export interface BaseLinearProgressClassNameOptions {
6
10
  className?: string;
7
11
  /**
8
12
  * @defaultValue `"primary"`
9
13
  * @since 6.0.0
10
14
  */
11
15
  theme?: ProgressTheme;
12
- /** @defaultValue `false` */
16
+ /**
17
+ * Boolean if the progress should be vertical instead of horizontal. When
18
+ * this prop is set, you should also set the `verticalHeight` prop to a height
19
+ * value you want for your progress bar.
20
+ *
21
+ * @defaultValue `false`
22
+ */
13
23
  vertical?: boolean;
24
+ }
25
+ /**
26
+ * @since 6.2.0
27
+ */
28
+ export interface LinearProgressClassNameOptions extends BaseLinearProgressClassNameOptions {
14
29
  /** @defaultValue `false` */
15
30
  indeterminate?: boolean;
16
31
  }
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/progress/linearProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-linear-progress\");\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n\n /** @defaultValue `false` */\n vertical?: boolean;\n\n /** @defaultValue `false` */\n indeterminate?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgress(\n options: LinearProgressClassNameOptions = {}\n): string {\n const { className, theme = \"primary\", vertical, indeterminate } = options;\n\n return cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate: !indeterminate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressBarClassNameOptions {\n className?: string;\n\n /** @defaultValue `false` */\n reverse?: boolean;\n /** @defaultValue `false` */\n vertical?: boolean;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgressBar(\n options: LinearProgressBarClassNameOptions = {}\n): string {\n const { className, reverse, vertical, indeterminate, disableTransition } =\n options;\n\n return cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && !indeterminate,\n determinate: !indeterminate,\n indeterminate,\n \"determinate-reverse\": !indeterminate && reverse && !vertical,\n \"determinate-vertical-reverse\": !indeterminate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\": indeterminate && reverse && vertical,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","linearProgress","options","className","theme","vertical","indeterminate","horizontal","determinate","textColor","linearProgressBar","reverse","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAqBnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGJ;IAElE,OAAOL,IACLG,OAAO;QACLK;QACAE,YAAY,CAACF;QACbG,aAAa,CAACF;QACdA;IACF,IACAF,UAAU,mBAAmBN,SAAS;QAAEW,WAAWL;IAAM,IACzDD;AAEJ;AAkBA;;CAEC,GACD,OAAO,SAASO,kBACdR,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAEQ,OAAO,EAAEN,QAAQ,EAAEC,aAAa,EAAEM,iBAAiB,EAAE,GACtEV;IAEF,OAAOL,IACLG,OAAO,OAAO;QACZK;QACA,oBAAoBA,YAAYM;QAChCJ,YAAY,CAACF;QACb,sBAAsB,CAACA,YAAYM;QACnCE,SAAS,CAACD,qBAAqB,CAACN;QAChCE,aAAa,CAACF;QACdA;QACA,uBAAuB,CAACA,iBAAiBK,WAAW,CAACN;QACrD,gCAAgC,CAACC,iBAAiBK,WAAWN;QAC7D,yBAAyBC,iBAAiBK,WAAW,CAACN;QACtD,0BAA0BC,iBAAiBD;QAC3C,kCAAkCC,iBAAiBK,WAAWN;IAChE,IACAF;AAEJ"}
1
+ {"version":3,"sources":["../../src/progress/linearProgressStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type ProgressTheme } from \"./types.js\";\n\nconst styles = bem(\"rmd-linear-progress\");\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-progress-background-color\"?: string;\n \"--rmd-progress-color\"?: string;\n \"--rmd-progress-linear-size\"?: string | number;\n }\n}\n\nexport interface BaseLinearProgressClassNameOptions {\n className?: string;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n\n /**\n * Boolean if the progress should be vertical instead of horizontal. When\n * this prop is set, you should also set the `verticalHeight` prop to a height\n * value you want for your progress bar.\n *\n * @defaultValue `false`\n */\n vertical?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressClassNameOptions\n extends BaseLinearProgressClassNameOptions {\n /** @defaultValue `false` */\n indeterminate?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgress(\n options: LinearProgressClassNameOptions = {}\n): string {\n const { className, theme = \"primary\", vertical, indeterminate } = options;\n\n return cnb(\n styles({\n vertical,\n horizontal: !vertical,\n determinate: !indeterminate,\n indeterminate,\n }),\n theme !== \"current-color\" && cssUtils({ textColor: theme }),\n className\n );\n}\n\n/**\n * @since 6.2.0\n */\nexport interface LinearProgressBarClassNameOptions {\n className?: string;\n\n /** @defaultValue `false` */\n reverse?: boolean;\n /** @defaultValue `false` */\n vertical?: boolean;\n /** @defaultValue `false` */\n indeterminate?: boolean;\n /** @defaultValue `false` */\n disableTransition?: boolean;\n}\n\n/**\n * @since 6.2.0\n */\nexport function linearProgressBar(\n options: LinearProgressBarClassNameOptions = {}\n): string {\n const { className, reverse, vertical, indeterminate, disableTransition } =\n options;\n\n return cnb(\n styles(\"bar\", {\n vertical,\n \"vertical-reverse\": vertical && reverse,\n horizontal: !vertical,\n \"horizontal-reverse\": !vertical && reverse,\n animate: !disableTransition && !indeterminate,\n determinate: !indeterminate,\n indeterminate,\n \"determinate-reverse\": !indeterminate && reverse && !vertical,\n \"determinate-vertical-reverse\": !indeterminate && reverse && vertical,\n \"indeterminate-reverse\": indeterminate && reverse && !vertical,\n \"indeterminate-vertical\": indeterminate && vertical,\n \"indeterminate-vertical-reverse\": indeterminate && reverse && vertical,\n }),\n className\n );\n}\n"],"names":["cnb","cssUtils","bem","styles","linearProgress","options","className","theme","vertical","indeterminate","horizontal","determinate","textColor","linearProgressBar","reverse","disableTransition","animate"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAGtC,MAAMC,SAASD,IAAI;AAsCnB;;CAEC,GACD,OAAO,SAASE,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,SAAS,EAAEC,QAAQ,EAAEC,aAAa,EAAE,GAAGJ;IAElE,OAAOL,IACLG,OAAO;QACLK;QACAE,YAAY,CAACF;QACbG,aAAa,CAACF;QACdA;IACF,IACAF,UAAU,mBAAmBN,SAAS;QAAEW,WAAWL;IAAM,IACzDD;AAEJ;AAkBA;;CAEC,GACD,OAAO,SAASO,kBACdR,UAA6C,CAAC,CAAC;IAE/C,MAAM,EAAEC,SAAS,EAAEQ,OAAO,EAAEN,QAAQ,EAAEC,aAAa,EAAEM,iBAAiB,EAAE,GACtEV;IAEF,OAAOL,IACLG,OAAO,OAAO;QACZK;QACA,oBAAoBA,YAAYM;QAChCJ,YAAY,CAACF;QACb,sBAAsB,CAACA,YAAYM;QACnCE,SAAS,CAACD,qBAAqB,CAACN;QAChCE,aAAa,CAACF;QACdA;QACA,uBAAuB,CAACA,iBAAiBK,WAAW,CAACN;QACrD,gCAAgC,CAACC,iBAAiBK,WAAWN;QAC7D,yBAAyBC,iBAAiBK,WAAW,CAACN;QACtD,0BAA0BC,iBAAiBD;QAC3C,kCAAkCC,iBAAiBK,WAAWN;IAChE,IACAF;AAEJ"}
@@ -1,13 +1,4 @@
1
1
  import { type ThemeColor } from "../cssUtils.js";
2
- declare module "react" {
3
- interface CSSProperties {
4
- "--rmd-progress-background-color"?: string;
5
- "--rmd-progress-color"?: string;
6
- "--rmd-progress-circular-size"?: string | number;
7
- "--rmd-progress-circular-stroke-width"?: number;
8
- "--rmd-progress-linear-size"?: string | number;
9
- }
10
- }
11
2
  /**
12
3
  * @since 6.0.0
13
4
  */
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/progress/types.ts"],"sourcesContent":["import { type ThemeColor } from \"../cssUtils.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-progress-background-color\"?: string;\n \"--rmd-progress-color\"?: string;\n \"--rmd-progress-circular-size\"?: string | number;\n \"--rmd-progress-circular-stroke-width\"?: number;\n \"--rmd-progress-linear-size\"?: string | number;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport type ProgressTheme = ThemeColor | \"current-color\";\n\n/**\n * The base progress props for both the linear and circular progress components.\n *\n * @since 6.0.0 Added the `theme` prop.\n */\nexport interface ProgressProps {\n /**\n * The id for the progress component. This is required for accessibility since\n * the progress will 99% of the time be describing the progress of something\n * else within the page. The element that is loading or tracking progress\n * should also be updated to have `aria-busy=\"true\"` and\n * `aria-describedby=\"THIS_ID\"`.\n *\n * @defaultValue `\"circular-progress-\" + useId() || \"linear-progress-\" + useId()`\n * @since 6.0.0 This prop is now optional.\n */\n id?: string;\n\n /**\n * The min value for the progress component. This is used to determine the\n * current progress percentage for screen readers and styles.\n *\n * @defaultValue `0`\n */\n min?: number;\n\n /**\n * The max value for the progress component. This is used to determine the\n * current progress percentage for screen readers and styles.\n *\n * @defaultValue `100`\n */\n max?: number;\n\n /**\n * The current value for the progress component. If this prop is omitted, the\n * progress component will be put in an \"indeterminate\" state which will just\n * infinitely loop an animation until it is unmounted.\n *\n * This value will be passed down as a percentage based on the `min` and `max`\n * props so that screen readers can be notified of changes.\n */\n value?: number;\n\n /**\n * Boolean if the determinate progress versions should animate when the value\n * changes. This should really only be enabled if you aren't getting quick\n * progress updates or the updates happen in chunks.\n *\n * @defaultValue `false`\n * @since 6.0.0 This was renamed from `animate` to\n * `disableTransition`.\n */\n disableTransition?: boolean;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n}\n"],"names":[],"mappings":"AAiBA;;;;CAIC,GACD,WAuDC"}
1
+ {"version":3,"sources":["../../src/progress/types.ts"],"sourcesContent":["import { type ThemeColor } from \"../cssUtils.js\";\n\n/**\n * @since 6.0.0\n */\nexport type ProgressTheme = ThemeColor | \"current-color\";\n\n/**\n * The base progress props for both the linear and circular progress components.\n *\n * @since 6.0.0 Added the `theme` prop.\n */\nexport interface ProgressProps {\n /**\n * The id for the progress component. This is required for accessibility since\n * the progress will 99% of the time be describing the progress of something\n * else within the page. The element that is loading or tracking progress\n * should also be updated to have `aria-busy=\"true\"` and\n * `aria-describedby=\"THIS_ID\"`.\n *\n * @defaultValue `\"circular-progress-\" + useId() || \"linear-progress-\" + useId()`\n * @since 6.0.0 This prop is now optional.\n */\n id?: string;\n\n /**\n * The min value for the progress component. This is used to determine the\n * current progress percentage for screen readers and styles.\n *\n * @defaultValue `0`\n */\n min?: number;\n\n /**\n * The max value for the progress component. This is used to determine the\n * current progress percentage for screen readers and styles.\n *\n * @defaultValue `100`\n */\n max?: number;\n\n /**\n * The current value for the progress component. If this prop is omitted, the\n * progress component will be put in an \"indeterminate\" state which will just\n * infinitely loop an animation until it is unmounted.\n *\n * This value will be passed down as a percentage based on the `min` and `max`\n * props so that screen readers can be notified of changes.\n */\n value?: number;\n\n /**\n * Boolean if the determinate progress versions should animate when the value\n * changes. This should really only be enabled if you aren't getting quick\n * progress updates or the updates happen in chunks.\n *\n * @defaultValue `false`\n * @since 6.0.0 This was renamed from `animate` to\n * `disableTransition`.\n */\n disableTransition?: boolean;\n\n /**\n * @defaultValue `\"primary\"`\n * @since 6.0.0\n */\n theme?: ProgressTheme;\n}\n"],"names":[],"mappings":"AAOA;;;;CAIC,GACD,WAuDC"}