@react-md/core 6.0.2 → 6.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/RootHtml.d.ts +1 -1
- package/dist/RootHtml.js.map +1 -1
- package/dist/_base.scss +6 -2
- package/dist/_border-radius.scss +92 -0
- package/dist/_core.scss +2 -0
- package/dist/_spacing.scss +86 -0
- package/dist/app-bar/_app-bar.scss +9 -7
- package/dist/app-bar/styles.js +1 -1
- package/dist/app-bar/styles.js.map +1 -1
- package/dist/autocomplete/defaults.d.ts +1 -0
- package/dist/autocomplete/defaults.js +2 -6
- package/dist/autocomplete/defaults.js.map +1 -1
- package/dist/autocomplete/types.d.ts +9 -9
- package/dist/autocomplete/types.js.map +1 -1
- package/dist/avatar/Avatar.d.ts +1 -1
- package/dist/avatar/Avatar.js +1 -1
- package/dist/avatar/Avatar.js.map +1 -1
- package/dist/avatar/_avatar.scss +3 -3
- package/dist/avatar/styles.d.ts +29 -1
- package/dist/avatar/styles.js.map +1 -1
- package/dist/badge/_badge.scss +10 -2
- package/dist/box/_box.scss +78 -11
- package/dist/box/styles.d.ts +26 -3
- package/dist/box/styles.js.map +1 -1
- package/dist/button/AsyncButton.d.ts +2 -2
- package/dist/button/AsyncButton.js.map +1 -1
- package/dist/button/Button.d.ts +1 -1
- package/dist/button/Button.js.map +1 -1
- package/dist/button/_button.scss +21 -11
- package/dist/card/CardHeader.d.ts +1 -1
- package/dist/card/CardHeader.js.map +1 -1
- package/dist/card/_card.scss +9 -7
- package/dist/chip/Chip.d.ts +1 -1
- package/dist/chip/Chip.js.map +1 -1
- package/dist/chip/_chip.scss +9 -7
- package/dist/dialog/Dialog.d.ts +1 -1
- package/dist/dialog/Dialog.js.map +1 -1
- package/dist/dialog/_dialog.scss +7 -6
- package/dist/divider/_divider.scss +3 -2
- package/dist/expansion-panel/ExpansionPanel.d.ts +1 -1
- package/dist/expansion-panel/ExpansionPanel.js.map +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.d.ts +1 -1
- package/dist/expansion-panel/ExpansionPanelHeader.js.map +1 -1
- package/dist/expansion-panel/_expansion-panel.scss +4 -3
- package/dist/files/FileInput.d.ts +1 -1
- package/dist/files/FileInput.js.map +1 -1
- package/dist/form/FormMessageContainer.d.ts +1 -1
- package/dist/form/FormMessageContainer.js.map +1 -1
- package/dist/form/InputToggle.d.ts +2 -2
- package/dist/form/InputToggle.js.map +1 -1
- package/dist/form/NativeSelect.d.ts +1 -1
- package/dist/form/NativeSelect.js.map +1 -1
- package/dist/form/OptGroup.d.ts +1 -1
- package/dist/form/OptGroup.js.map +1 -1
- package/dist/form/Password.d.ts +1 -1
- package/dist/form/Password.js.map +1 -1
- package/dist/form/Select.d.ts +2 -2
- package/dist/form/Select.js.map +1 -1
- package/dist/form/Slider.d.ts +1 -1
- package/dist/form/Slider.js.map +1 -1
- package/dist/form/Switch.d.ts +3 -3
- package/dist/form/Switch.js.map +1 -1
- package/dist/form/SwitchTrack.d.ts +1 -1
- package/dist/form/SwitchTrack.js.map +1 -1
- package/dist/form/TextArea.d.ts +2 -2
- package/dist/form/TextArea.js +1 -1
- package/dist/form/TextArea.js.map +1 -1
- package/dist/form/TextField.d.ts +1 -1
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/_form-message.scss +4 -3
- package/dist/form/_input-toggle.scss +2 -1
- package/dist/form/_label.scss +3 -2
- package/dist/form/_password.scss +2 -1
- package/dist/form/_select.scss +4 -4
- package/dist/form/_slider.scss +4 -3
- package/dist/form/_switch.scss +2 -1
- package/dist/form/_text-area.scss +3 -2
- package/dist/form/_text-field.scss +20 -16
- package/dist/form/types.d.ts +5 -5
- package/dist/form/types.js.map +1 -1
- package/dist/form/utils.js +1 -0
- package/dist/form/utils.js.map +1 -1
- package/dist/icon/_icon.scss +2 -1
- package/dist/interaction/useElementInteraction.js +1 -1
- package/dist/interaction/useElementInteraction.js.map +1 -1
- package/dist/layout/LayoutAppBar.d.ts +1 -1
- package/dist/layout/LayoutAppBar.js.map +1 -1
- package/dist/layout/LayoutNav.js +1 -1
- package/dist/layout/LayoutNav.js.map +1 -1
- package/dist/layout/useMainTabIndex.js +1 -0
- package/dist/layout/useMainTabIndex.js.map +1 -1
- package/dist/link/_link.scss +3 -2
- package/dist/list/ListItemLink.d.ts +1 -1
- package/dist/list/ListItemLink.js.map +1 -1
- package/dist/list/ListItemText.d.ts +1 -1
- package/dist/list/ListItemText.js.map +1 -1
- package/dist/list/ListSubheader.d.ts +1 -1
- package/dist/list/ListSubheader.js.map +1 -1
- package/dist/list/_list.scss +7 -6
- package/dist/list/types.d.ts +2 -2
- package/dist/list/types.js.map +1 -1
- package/dist/menu/Menu.d.ts +3 -3
- package/dist/menu/Menu.js.map +1 -1
- package/dist/menu/MenuItemInputToggle.d.ts +2 -2
- package/dist/menu/MenuItemInputToggle.js.map +1 -1
- package/dist/menu/MenuItemTextField.d.ts +1 -1
- package/dist/menu/MenuItemTextField.js.map +1 -1
- package/dist/menu/MenuSheet.d.ts +1 -1
- package/dist/menu/MenuSheet.js.map +1 -1
- package/dist/menu/_menu.scss +2 -1
- package/dist/navigation/CollapsibleNavGroup.d.ts +2 -2
- package/dist/navigation/CollapsibleNavGroup.js.map +1 -1
- package/dist/navigation/NavItemLink.d.ts +1 -1
- package/dist/navigation/NavItemLink.js.map +1 -1
- package/dist/navigation/_navigation.scss +5 -3
- package/dist/progress/CircularProgress.d.ts +2 -17
- package/dist/progress/CircularProgress.js +19 -23
- package/dist/progress/CircularProgress.js.map +1 -1
- package/dist/progress/LinearProgress.d.ts +5 -1
- package/dist/progress/LinearProgress.js +13 -25
- package/dist/progress/LinearProgress.js.map +1 -1
- package/dist/progress/circularProgressStyles.d.ts +62 -0
- package/dist/progress/circularProgressStyles.js +38 -0
- package/dist/progress/circularProgressStyles.js.map +1 -0
- package/dist/progress/linearProgressStyles.d.ts +38 -0
- package/dist/progress/linearProgressStyles.js +38 -0
- package/dist/progress/linearProgressStyles.js.map +1 -0
- package/dist/responsive-item/_responsive-item.scss +2 -1
- package/dist/searching/caseInsensitive.d.ts +20 -4
- package/dist/searching/caseInsensitive.js +5 -1
- package/dist/searching/caseInsensitive.js.map +1 -1
- package/dist/searching/fuzzy.d.ts +3 -3
- package/dist/searching/fuzzy.js +5 -1
- package/dist/searching/fuzzy.js.map +1 -1
- package/dist/searching/utils.d.ts +2 -1
- package/dist/searching/utils.js +11 -2
- package/dist/searching/utils.js.map +1 -1
- package/dist/segmented-button/_segmented-button.scss +20 -13
- package/dist/sheet/_sheet.scss +2 -1
- package/dist/snackbar/Toast.d.ts +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- package/dist/snackbar/_snackbar.scss +12 -10
- package/dist/table/TableCell.d.ts +1 -1
- package/dist/table/TableCell.js.map +1 -1
- package/dist/table/TableCheckbox.d.ts +1 -1
- package/dist/table/TableCheckbox.js.map +1 -1
- package/dist/table/TableRadio.d.ts +1 -1
- package/dist/table/TableRadio.js.map +1 -1
- package/dist/table/_table.scss +5 -4
- package/dist/tabs/TabListScrollButton.d.ts +1 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tabs/_tabs.scss +7 -4
- package/dist/theme/utils.js +2 -2
- package/dist/theme/utils.js.map +1 -1
- package/dist/tooltip/_tooltip.scss +52 -25
- package/dist/transition/_transition.scss +2 -1
- package/dist/tree/TreeItem.d.ts +2 -2
- package/dist/tree/TreeItem.js.map +1 -1
- package/dist/tree/_tree.scss +1 -1
- package/dist/types.d.ts +29 -2
- package/dist/types.js +1 -1
- package/dist/types.js.map +1 -1
- package/dist/utils/alphaNumericSort.d.ts +9 -9
- package/dist/utils/alphaNumericSort.js +5 -1
- package/dist/utils/alphaNumericSort.js.map +1 -1
- package/dist/utils/bem.js +1 -1
- package/dist/utils/bem.js.map +1 -1
- package/dist/utils/parseCssLengthUnit.js +3 -0
- package/dist/utils/parseCssLengthUnit.js.map +1 -1
- package/package.json +13 -13
- package/src/RootHtml.tsx +1 -1
- package/src/app-bar/styles.ts +1 -1
- package/src/autocomplete/defaults.ts +5 -12
- package/src/autocomplete/types.ts +9 -12
- package/src/avatar/Avatar.tsx +2 -2
- package/src/avatar/styles.ts +53 -1
- package/src/box/styles.ts +34 -13
- package/src/button/AsyncButton.tsx +2 -2
- package/src/button/Button.tsx +1 -1
- package/src/card/CardHeader.tsx +1 -1
- package/src/chip/Chip.tsx +1 -1
- package/src/dialog/Dialog.tsx +1 -4
- package/src/expansion-panel/ExpansionPanel.tsx +1 -1
- package/src/expansion-panel/ExpansionPanelHeader.tsx +1 -1
- package/src/files/FileInput.tsx +1 -4
- package/src/form/FormMessageContainer.tsx +1 -1
- package/src/form/InputToggle.tsx +2 -5
- package/src/form/NativeSelect.tsx +1 -1
- package/src/form/OptGroup.tsx +1 -4
- package/src/form/Password.tsx +1 -1
- package/src/form/Select.tsx +2 -3
- package/src/form/Slider.tsx +1 -1
- package/src/form/Switch.tsx +3 -3
- package/src/form/SwitchTrack.tsx +1 -1
- package/src/form/TextArea.tsx +3 -6
- package/src/form/TextField.tsx +1 -1
- package/src/form/types.ts +5 -15
- package/src/form/utils.ts +1 -0
- package/src/interaction/useElementInteraction.tsx +1 -1
- package/src/layout/LayoutAppBar.tsx +1 -1
- package/src/layout/LayoutNav.tsx +1 -1
- package/src/layout/useMainTabIndex.ts +1 -0
- package/src/list/ListItemLink.tsx +1 -1
- package/src/list/ListItemText.tsx +1 -4
- package/src/list/ListSubheader.tsx +1 -1
- package/src/list/types.ts +2 -5
- package/src/menu/Menu.tsx +3 -4
- package/src/menu/MenuItemInputToggle.tsx +2 -2
- package/src/menu/MenuItemTextField.tsx +1 -1
- package/src/menu/MenuSheet.tsx +1 -1
- package/src/navigation/CollapsibleNavGroup.tsx +2 -2
- package/src/navigation/NavItemLink.tsx +1 -1
- package/src/progress/CircularProgress.tsx +31 -53
- package/src/progress/LinearProgress.tsx +27 -40
- package/src/progress/circularProgressStyles.ts +114 -0
- package/src/progress/linearProgressStyles.ts +90 -0
- package/src/searching/caseInsensitive.ts +29 -7
- package/src/searching/fuzzy.ts +12 -6
- package/src/searching/utils.ts +13 -2
- package/src/snackbar/Toast.tsx +1 -1
- package/src/table/TableCell.tsx +1 -4
- package/src/table/TableCheckbox.tsx +1 -1
- package/src/table/TableRadio.tsx +1 -1
- package/src/tabs/TabListScrollButton.tsx +1 -1
- package/src/theme/utils.ts +2 -1
- package/src/tree/TreeItem.tsx +2 -2
- package/src/types.ts +44 -2
- package/src/utils/alphaNumericSort.ts +17 -11
- package/src/utils/bem.ts +1 -1
- package/src/utils/parseCssLengthUnit.ts +4 -0
package/src/app-bar/styles.ts
CHANGED
|
@@ -199,7 +199,7 @@ export function appBarTitle(options: AppBarTitleClassNameOptions = {}): string {
|
|
|
199
199
|
const { className, keyline = "small" } = options;
|
|
200
200
|
return cnb(
|
|
201
201
|
titleStyles({
|
|
202
|
-
keyline: keyline
|
|
202
|
+
keyline: keyline === "list",
|
|
203
203
|
"nav-keyline": keyline === "nav",
|
|
204
204
|
}),
|
|
205
205
|
className
|
|
@@ -9,20 +9,13 @@ import {
|
|
|
9
9
|
|
|
10
10
|
/**
|
|
11
11
|
* @since 6.0.0
|
|
12
|
+
* @since 6.2.0 Added support for `item.name` and provide better error messaging.
|
|
12
13
|
* @internal
|
|
13
14
|
*/
|
|
14
|
-
export const defaultAutocompleteExtractor = (
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
"label" in item &&
|
|
19
|
-
typeof item.label === "string"
|
|
20
|
-
) {
|
|
21
|
-
return item.label;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
return defaultExtractor("Autocomplete")(item);
|
|
25
|
-
};
|
|
15
|
+
export const defaultAutocompleteExtractor = defaultExtractor(
|
|
16
|
+
"Autocomplete",
|
|
17
|
+
"getOptionLabel"
|
|
18
|
+
);
|
|
26
19
|
|
|
27
20
|
/**
|
|
28
21
|
* @since 6.0.0
|
|
@@ -31,6 +31,7 @@ import { type CircularProgressProps } from "../progress/CircularProgress.js";
|
|
|
31
31
|
import { type ProgressTheme } from "../progress/types.js";
|
|
32
32
|
import { type BaseSearchOptions } from "../searching/types.js";
|
|
33
33
|
import {
|
|
34
|
+
type AutomaticTextExtraction,
|
|
34
35
|
type PropsWithRef,
|
|
35
36
|
type TextExtractor,
|
|
36
37
|
type UseStateInitializer,
|
|
@@ -43,15 +44,17 @@ import {
|
|
|
43
44
|
*
|
|
44
45
|
* - `"some value"` -> `"some value"`
|
|
45
46
|
* - `{ label: "Hello, world", value: 300 }` -> `"Hello, world!"`
|
|
47
|
+
* - `{ name: "Hello, world", value: 300 }` -> `"Hello, world!"`
|
|
46
48
|
*
|
|
47
49
|
* @since 6.0.0
|
|
50
|
+
* @deprecated @since 6.2.0 Use `AutomaticTextExtraction` instead.
|
|
48
51
|
*/
|
|
49
|
-
export type AutocompleteLabeledOption =
|
|
52
|
+
export type AutocompleteLabeledOption = AutomaticTextExtraction;
|
|
50
53
|
|
|
51
54
|
/**
|
|
52
55
|
* @since 6.0.0
|
|
53
56
|
*/
|
|
54
|
-
export type AutocompleteOption =
|
|
57
|
+
export type AutocompleteOption = AutomaticTextExtraction | object;
|
|
55
58
|
|
|
56
59
|
/**
|
|
57
60
|
* @since 6.0.0
|
|
@@ -268,13 +271,13 @@ export interface AutocompleteUnknownQueryAndValueOptions<
|
|
|
268
271
|
|
|
269
272
|
/**
|
|
270
273
|
* A utility type that makes the `getOptionLabel` required when an option is not
|
|
271
|
-
* a {@link
|
|
274
|
+
* a {@link AutomaticTextExtraction}.
|
|
272
275
|
*
|
|
273
276
|
* @since 6.0.0
|
|
274
277
|
*/
|
|
275
278
|
export type AutocompleteOptionLabelExtractor<
|
|
276
279
|
Option extends AutocompleteOption,
|
|
277
|
-
> = Option extends
|
|
280
|
+
> = Option extends AutomaticTextExtraction
|
|
278
281
|
? AutocompleteGetOptionLabel<Option>
|
|
279
282
|
: Required<AutocompleteGetOptionLabel<Option>>;
|
|
280
283
|
|
|
@@ -702,10 +705,7 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption>
|
|
|
702
705
|
/**
|
|
703
706
|
* Any additional props that should be passed to the `Listbox` component.
|
|
704
707
|
*/
|
|
705
|
-
listboxProps?: PropsWithRef<
|
|
706
|
-
ConfigurableAutocompleteListboxProps,
|
|
707
|
-
HTMLDivElement
|
|
708
|
-
>;
|
|
708
|
+
listboxProps?: PropsWithRef<ConfigurableAutocompleteListboxProps>;
|
|
709
709
|
|
|
710
710
|
/**
|
|
711
711
|
* This can be used to add any custom styling, change the icon, change the
|
|
@@ -746,10 +746,7 @@ export interface AutocompleteBaseProps<Option extends AutocompleteOption>
|
|
|
746
746
|
/**
|
|
747
747
|
* This will do nothing if {@link disableClearButton} is `true`.
|
|
748
748
|
*/
|
|
749
|
-
clearButtonProps?: PropsWithRef<
|
|
750
|
-
ConfigurableAutocompleteClearButtonProps,
|
|
751
|
-
HTMLButtonElement
|
|
752
|
-
>;
|
|
749
|
+
clearButtonProps?: PropsWithRef<ConfigurableAutocompleteClearButtonProps>;
|
|
753
750
|
|
|
754
751
|
/**
|
|
755
752
|
* Set to `true` to hide the clear button that appears when hovering an
|
package/src/avatar/Avatar.tsx
CHANGED
|
@@ -77,7 +77,7 @@ export interface AvatarProps
|
|
|
77
77
|
*
|
|
78
78
|
* @since 2.2.0
|
|
79
79
|
*/
|
|
80
|
-
imgProps?: PropsWithRef<AvatarImgAttributes
|
|
80
|
+
imgProps?: PropsWithRef<AvatarImgAttributes>;
|
|
81
81
|
}
|
|
82
82
|
|
|
83
83
|
/**
|
|
@@ -108,7 +108,7 @@ export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(
|
|
|
108
108
|
src,
|
|
109
109
|
alt = "",
|
|
110
110
|
size = "avatar",
|
|
111
|
-
color
|
|
111
|
+
color,
|
|
112
112
|
theme,
|
|
113
113
|
imgProps,
|
|
114
114
|
referrerPolicy,
|
package/src/avatar/styles.ts
CHANGED
|
@@ -1,10 +1,62 @@
|
|
|
1
1
|
import { cnb } from "cnbuilder";
|
|
2
2
|
|
|
3
3
|
import { type ThemeColor, cssUtils } from "../cssUtils.js";
|
|
4
|
+
import { type OverridableStringUnion } from "../types.js";
|
|
4
5
|
import { bem } from "../utils/bem.js";
|
|
5
6
|
|
|
6
7
|
const styles = bem("rmd-avatar");
|
|
7
8
|
|
|
9
|
+
/**
|
|
10
|
+
* @since 6.2.0
|
|
11
|
+
*/
|
|
12
|
+
export interface AvatarColorOverrides {}
|
|
13
|
+
|
|
14
|
+
/**
|
|
15
|
+
* @since 6.2.0
|
|
16
|
+
*/
|
|
17
|
+
export type DefaultAvatarColors =
|
|
18
|
+
| "red"
|
|
19
|
+
| "pink"
|
|
20
|
+
| "purple"
|
|
21
|
+
| "deep-purple"
|
|
22
|
+
| "indigo"
|
|
23
|
+
| "blue"
|
|
24
|
+
| "light-blue"
|
|
25
|
+
| "cyan"
|
|
26
|
+
| "teal"
|
|
27
|
+
| "green"
|
|
28
|
+
| "light-green"
|
|
29
|
+
| "lime"
|
|
30
|
+
| "yellow"
|
|
31
|
+
| "amber"
|
|
32
|
+
| "orange"
|
|
33
|
+
| "deep-orange"
|
|
34
|
+
| "brown"
|
|
35
|
+
| "grey"
|
|
36
|
+
| "blue-grey";
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* The avatar available colors can be configured using module augmentation:
|
|
40
|
+
*
|
|
41
|
+
* ```ts
|
|
42
|
+
* declare module "@react-md/core/avatar/styles" {
|
|
43
|
+
* interface AvatarColorOverrides {
|
|
44
|
+
* "light-blue": false;
|
|
45
|
+
* brandColor: true;
|
|
46
|
+
* }
|
|
47
|
+
* }
|
|
48
|
+
* ```
|
|
49
|
+
*
|
|
50
|
+
* This would remove the support for the `light-blue` color and enable
|
|
51
|
+
* `brandColor`.
|
|
52
|
+
*
|
|
53
|
+
* @since 6.2.0
|
|
54
|
+
*/
|
|
55
|
+
export type AvatarColor = OverridableStringUnion<
|
|
56
|
+
DefaultAvatarColors,
|
|
57
|
+
AvatarColorOverrides
|
|
58
|
+
>;
|
|
59
|
+
|
|
8
60
|
/** @since 6.0.0 */
|
|
9
61
|
export interface AvatarClassNameOptions {
|
|
10
62
|
className?: string;
|
|
@@ -19,7 +71,7 @@ export interface AvatarClassNameOptions {
|
|
|
19
71
|
* @see {@link theme}
|
|
20
72
|
* @defaultValue `""`
|
|
21
73
|
*/
|
|
22
|
-
color?:
|
|
74
|
+
color?: AvatarColor;
|
|
23
75
|
|
|
24
76
|
/**
|
|
25
77
|
* @defaultValue `"avatar"`
|
package/src/box/styles.ts
CHANGED
|
@@ -2,6 +2,7 @@ import { cnb } from "cnbuilder";
|
|
|
2
2
|
import { type CSSProperties } from "react";
|
|
3
3
|
|
|
4
4
|
import { type DefinedCSSVariableName } from "../theme/types.js";
|
|
5
|
+
import { type IsEmptyObject, type OverridableStringUnion } from "../types.js";
|
|
5
6
|
import { bem } from "../utils/bem.js";
|
|
6
7
|
|
|
7
8
|
const styles = bem("rmd-box");
|
|
@@ -23,25 +24,28 @@ declare module "react" {
|
|
|
23
24
|
}
|
|
24
25
|
}
|
|
25
26
|
|
|
27
|
+
/** @since 6.2.0 */
|
|
28
|
+
export interface BoxAlignItemsOverrides {}
|
|
29
|
+
/** @since 6.2.0 */
|
|
30
|
+
export interface BoxJustifyContentOverrides {}
|
|
31
|
+
/** @since 6.2.0 */
|
|
32
|
+
export interface BoxGridNameOverrides {}
|
|
33
|
+
|
|
26
34
|
/**
|
|
27
35
|
* @since 6.0.0
|
|
28
36
|
*/
|
|
29
|
-
export type BoxAlignItems =
|
|
30
|
-
| "start"
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
| "end"
|
|
34
|
-
| "flex-end"
|
|
35
|
-
| "stretch";
|
|
37
|
+
export type BoxAlignItems = OverridableStringUnion<
|
|
38
|
+
"start" | "flex-start" | "center" | "end" | "flex-end" | "stretch",
|
|
39
|
+
BoxAlignItemsOverrides
|
|
40
|
+
>;
|
|
36
41
|
|
|
37
42
|
/**
|
|
38
43
|
* @since 6.0.0
|
|
39
44
|
*/
|
|
40
|
-
export type BoxJustifyContent =
|
|
41
|
-
|
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
| "space-evenly";
|
|
45
|
+
export type BoxJustifyContent = OverridableStringUnion<
|
|
46
|
+
BoxAlignItems | "space-around" | "space-between" | "space-evenly",
|
|
47
|
+
BoxJustifyContentOverrides
|
|
48
|
+
>;
|
|
45
49
|
|
|
46
50
|
/**
|
|
47
51
|
* @since 6.0.0
|
|
@@ -53,6 +57,14 @@ export type BoxFlexDirection = "row" | "column";
|
|
|
53
57
|
*/
|
|
54
58
|
export type BoxGridColumns = "fit" | "fill" | number;
|
|
55
59
|
|
|
60
|
+
/**
|
|
61
|
+
* @since 6.2.0
|
|
62
|
+
*/
|
|
63
|
+
export type BoxGridName =
|
|
64
|
+
IsEmptyObject<BoxGridNameOverrides> extends true
|
|
65
|
+
? string
|
|
66
|
+
: OverridableStringUnion<never, BoxGridNameOverrides>;
|
|
67
|
+
|
|
56
68
|
/**
|
|
57
69
|
* @since 6.0.0
|
|
58
70
|
*/
|
|
@@ -132,11 +144,20 @@ export interface BoxOptions {
|
|
|
132
144
|
* );
|
|
133
145
|
* ```
|
|
134
146
|
*
|
|
147
|
+
* ```ts
|
|
148
|
+
* declare module "@react-md/core/box/styles" {
|
|
149
|
+
* interface BoxGridNameOverrides {
|
|
150
|
+
* small: true;
|
|
151
|
+
* medium: true;
|
|
152
|
+
* }
|
|
153
|
+
* }
|
|
154
|
+
* ```
|
|
155
|
+
*
|
|
135
156
|
* The `gridName` should be `"small" | "medium"`.
|
|
136
157
|
*
|
|
137
158
|
* @defaultValue `""`
|
|
138
159
|
*/
|
|
139
|
-
gridName?:
|
|
160
|
+
gridName?: BoxGridName;
|
|
140
161
|
|
|
141
162
|
/**
|
|
142
163
|
* The default behavior for a grid is to automatically determine the number
|
|
@@ -122,13 +122,13 @@ export interface AsyncButtonProps extends ButtonProps {
|
|
|
122
122
|
* Any additional props to pass to the `CircularProgress` bar when the
|
|
123
123
|
* {@link loadingType} is one of the circular types.
|
|
124
124
|
*/
|
|
125
|
-
linearProgressProps?: PropsWithRef<LinearProgressProps
|
|
125
|
+
linearProgressProps?: PropsWithRef<LinearProgressProps>;
|
|
126
126
|
|
|
127
127
|
/**
|
|
128
128
|
* Any additional props to pass to the `LinearProgress` bar when the
|
|
129
129
|
* {@link loadingType} is one of the linear types.
|
|
130
130
|
*/
|
|
131
|
-
circularProgressProps?: PropsWithRef<CircularProgressProps
|
|
131
|
+
circularProgressProps?: PropsWithRef<CircularProgressProps>;
|
|
132
132
|
}
|
|
133
133
|
|
|
134
134
|
/**
|
package/src/button/Button.tsx
CHANGED
|
@@ -30,7 +30,7 @@ export interface ButtonProps
|
|
|
30
30
|
* Any additional props to provide the to `FAB` container element when the
|
|
31
31
|
* `floating` prop is provided
|
|
32
32
|
*/
|
|
33
|
-
floatingProps?: PropsWithRef<FloatingActionButtonProps
|
|
33
|
+
floatingProps?: PropsWithRef<FloatingActionButtonProps>;
|
|
34
34
|
}
|
|
35
35
|
|
|
36
36
|
/**
|
package/src/card/CardHeader.tsx
CHANGED
|
@@ -27,7 +27,7 @@ export interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
27
27
|
* Any props to pass to the `<div>` that surrounds the `children`. This is
|
|
28
28
|
* generally used to apply custom `style` or `className`.
|
|
29
29
|
*/
|
|
30
|
-
contentProps?: PropsWithRef<HTMLAttributes<HTMLDivElement
|
|
30
|
+
contentProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
|
|
31
31
|
}
|
|
32
32
|
|
|
33
33
|
/**
|
package/src/chip/Chip.tsx
CHANGED
|
@@ -147,7 +147,7 @@ export interface ChipProps
|
|
|
147
147
|
*
|
|
148
148
|
* @since 6.0.0
|
|
149
149
|
*/
|
|
150
|
-
contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement
|
|
150
|
+
contentProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
|
|
151
151
|
|
|
152
152
|
/**
|
|
153
153
|
* This will be ignored if {@link disableContentWrap} is `true`.
|
package/src/dialog/Dialog.tsx
CHANGED
|
@@ -156,10 +156,7 @@ export interface BaseDialogProps
|
|
|
156
156
|
* Any additional props that should be passed to the container element when
|
|
157
157
|
* the `type !== "custom"`.
|
|
158
158
|
*/
|
|
159
|
-
containerProps?: PropsWithRef<
|
|
160
|
-
ConfigurableDialogContainerProps,
|
|
161
|
-
HTMLDivElement
|
|
162
|
-
>;
|
|
159
|
+
containerProps?: PropsWithRef<ConfigurableDialogContainerProps>;
|
|
163
160
|
|
|
164
161
|
/**
|
|
165
162
|
* @see {@link DEFAULT_DIALOG_TIMEOUT}
|
|
@@ -128,7 +128,7 @@ export interface ExpansionPanelProps extends CardProps {
|
|
|
128
128
|
* @see {@link contentClassName}
|
|
129
129
|
* @see {@link disableContentPadding}
|
|
130
130
|
*/
|
|
131
|
-
contentProps?: PropsWithRef<Omit<CardContentProps, "role"
|
|
131
|
+
contentProps?: PropsWithRef<Omit<CardContentProps, "role">>;
|
|
132
132
|
|
|
133
133
|
/**
|
|
134
134
|
* Convenience prop to apply custom style to the `CardContent` component.
|
|
@@ -47,7 +47,7 @@ export interface ExpansionPanelHeaderProps
|
|
|
47
47
|
* Any additional props to provide to the heading element that wraps the
|
|
48
48
|
* expansion panel button.
|
|
49
49
|
*/
|
|
50
|
-
headingProps?: PropsWithRef<TypographyProps
|
|
50
|
+
headingProps?: PropsWithRef<TypographyProps>;
|
|
51
51
|
iconRotatorProps?: Omit<IconRotatorProps, "rotated" | "disableTransition">;
|
|
52
52
|
|
|
53
53
|
/**
|
package/src/files/FileInput.tsx
CHANGED
|
@@ -42,10 +42,7 @@ export interface FileInputProps
|
|
|
42
42
|
* most props get passed to the `<input type="file">`. So this would be useful
|
|
43
43
|
* for inline style or click handlers.
|
|
44
44
|
*/
|
|
45
|
-
labelProps?: PropsWithRef<
|
|
46
|
-
LabelHTMLAttributes<HTMLLabelElement>,
|
|
47
|
-
HTMLLabelElement
|
|
48
|
-
>;
|
|
45
|
+
labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>>;
|
|
49
46
|
|
|
50
47
|
/**
|
|
51
48
|
* An optional icon to display for the file input.
|
|
@@ -15,7 +15,7 @@ export interface FormMessageContainerProps
|
|
|
15
15
|
* component, these props are optional. It kind of eliminates the whole
|
|
16
16
|
* purpose of this component though.
|
|
17
17
|
*/
|
|
18
|
-
messageProps?: PropsWithRef<FormMessageProps
|
|
18
|
+
messageProps?: PropsWithRef<FormMessageProps>;
|
|
19
19
|
}
|
|
20
20
|
|
|
21
21
|
/**
|
package/src/form/InputToggle.tsx
CHANGED
|
@@ -53,7 +53,7 @@ export interface ConfigurableInputToggleIconProps {
|
|
|
53
53
|
* Any props that should be passed to the `<span>` that surrounds the current
|
|
54
54
|
* icon element.
|
|
55
55
|
*/
|
|
56
|
-
iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement
|
|
56
|
+
iconProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
|
|
57
57
|
|
|
58
58
|
/**
|
|
59
59
|
* Optional style to set on the `<span>` that surrounds the current icon
|
|
@@ -101,10 +101,7 @@ export interface InputToggleLabelProps {
|
|
|
101
101
|
* }}
|
|
102
102
|
* ```
|
|
103
103
|
*/
|
|
104
|
-
labelProps?: PropsWithRef<
|
|
105
|
-
LabelHTMLAttributes<HTMLLabelElement>,
|
|
106
|
-
HTMLLabelElement
|
|
107
|
-
>;
|
|
104
|
+
labelProps?: PropsWithRef<LabelHTMLAttributes<HTMLLabelElement>>;
|
|
108
105
|
|
|
109
106
|
/**
|
|
110
107
|
* @see {@link LabelClassNameOptions.gap}
|
|
@@ -62,7 +62,7 @@ export interface NativeSelectProps
|
|
|
62
62
|
* There probably isn't any real use for this prop other than if you need to
|
|
63
63
|
* add a `ref` for some DOM behavior.
|
|
64
64
|
*/
|
|
65
|
-
containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement
|
|
65
|
+
containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
/**
|
package/src/form/OptGroup.tsx
CHANGED
|
@@ -26,10 +26,7 @@ export interface OptGroupProps extends Omit<ListProps, "role"> {
|
|
|
26
26
|
* This can be used to apply any additional props to the `ListSubheader` that
|
|
27
27
|
* describes the group of options.
|
|
28
28
|
*/
|
|
29
|
-
labelProps?: PropsWithRef<
|
|
30
|
-
Omit<ListSubheaderProps, "role" | "children">,
|
|
31
|
-
HTMLLIElement
|
|
32
|
-
>;
|
|
29
|
+
labelProps?: PropsWithRef<Omit<ListSubheaderProps, "role" | "children">>;
|
|
33
30
|
|
|
34
31
|
/**
|
|
35
32
|
* This should be any `Option`s to display within the group.
|
package/src/form/Password.tsx
CHANGED
|
@@ -126,7 +126,7 @@ export interface PasswordProps
|
|
|
126
126
|
* `id`, `buttonType`, `aria-label`, `aria-pressed`, or `children` are
|
|
127
127
|
* provided here, they will override the default implementation.
|
|
128
128
|
*/
|
|
129
|
-
visibilityProps?: PropsWithRef<ButtonProps
|
|
129
|
+
visibilityProps?: PropsWithRef<ButtonProps>;
|
|
130
130
|
}
|
|
131
131
|
|
|
132
132
|
/**
|
package/src/form/Select.tsx
CHANGED
|
@@ -141,7 +141,7 @@ export interface SelectProps<Value extends string>
|
|
|
141
141
|
/**
|
|
142
142
|
* Optional props to pass to the `<span>` that surrounds the {@link label}
|
|
143
143
|
*/
|
|
144
|
-
labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement
|
|
144
|
+
labelProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
|
|
145
145
|
|
|
146
146
|
/**
|
|
147
147
|
* An optional ref to pass to the hidden `<input type="text" />` element that
|
|
@@ -170,8 +170,7 @@ export interface SelectProps<Value extends string>
|
|
|
170
170
|
* - `width="min"`
|
|
171
171
|
*/
|
|
172
172
|
menuProps?: PropsWithRef<
|
|
173
|
-
Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo"
|
|
174
|
-
HTMLDivElement
|
|
173
|
+
Omit<MenuProps, "visible" | "onRequestClose" | "fixedTo">
|
|
175
174
|
>;
|
|
176
175
|
|
|
177
176
|
/**
|
package/src/form/Slider.tsx
CHANGED
|
@@ -90,7 +90,7 @@ export interface BaseSliderProps
|
|
|
90
90
|
* This can be used to apply custom styles or a `ref` to the track element if
|
|
91
91
|
* needed.
|
|
92
92
|
*/
|
|
93
|
-
trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement
|
|
93
|
+
trackProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
|
|
94
94
|
|
|
95
95
|
/**
|
|
96
96
|
* This can be used to configure any additional tooltip props like the
|
package/src/form/Switch.tsx
CHANGED
|
@@ -35,12 +35,12 @@ export interface SwitchProps
|
|
|
35
35
|
InputToggleLabelProps,
|
|
36
36
|
FormMessageContainerExtension,
|
|
37
37
|
FormComponentStates {
|
|
38
|
-
containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement
|
|
39
|
-
trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement
|
|
38
|
+
containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
|
|
39
|
+
trackProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
|
|
40
40
|
trackStyle?: CSSProperties;
|
|
41
41
|
trackClassName?: string;
|
|
42
42
|
ballAddon?: ReactNode;
|
|
43
|
-
ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement
|
|
43
|
+
ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
|
|
44
44
|
ballStyle?: CSSProperties;
|
|
45
45
|
ballClassName?: string;
|
|
46
46
|
}
|
package/src/form/SwitchTrack.tsx
CHANGED
|
@@ -12,7 +12,7 @@ export interface SwitchTrackProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
12
12
|
active?: boolean;
|
|
13
13
|
disabled?: boolean;
|
|
14
14
|
ballAddon?: ReactNode;
|
|
15
|
-
ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement
|
|
15
|
+
ballProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
|
|
16
16
|
ballStyle?: CSSProperties;
|
|
17
17
|
ballClassName?: string;
|
|
18
18
|
}
|
package/src/form/TextArea.tsx
CHANGED
|
@@ -92,17 +92,14 @@ export interface TextAreaProps
|
|
|
92
92
|
*
|
|
93
93
|
* This will only be applied when {@link resize} is set to `"auto"`.
|
|
94
94
|
*/
|
|
95
|
-
resizeContainerProps?: PropsWithRef<
|
|
96
|
-
HTMLAttributes<HTMLDivElement>,
|
|
97
|
-
HTMLDivElement
|
|
98
|
-
>;
|
|
95
|
+
resizeContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
|
|
99
96
|
|
|
100
97
|
/**
|
|
101
98
|
* Optional props to provide to the {@link TextFieldContainer} component.
|
|
102
99
|
* There probably isn't any real use for this prop other than if you need to
|
|
103
100
|
* add a `ref` for some DOM behavior.
|
|
104
101
|
*/
|
|
105
|
-
containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement
|
|
102
|
+
containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
|
|
106
103
|
}
|
|
107
104
|
|
|
108
105
|
/**
|
|
@@ -264,7 +261,7 @@ export const TextArea = forwardRef<HTMLTextAreaElement, TextAreaProps>(
|
|
|
264
261
|
"--rmd-text-area-height": height,
|
|
265
262
|
}}
|
|
266
263
|
className={textAreaContainer({
|
|
267
|
-
animate: !disableTransition && resize
|
|
264
|
+
animate: !disableTransition && resize === "auto",
|
|
268
265
|
disabled,
|
|
269
266
|
height: !!height,
|
|
270
267
|
underlineLabelled:
|
package/src/form/TextField.tsx
CHANGED
|
@@ -88,7 +88,7 @@ export interface TextFieldProps
|
|
|
88
88
|
* There probably isn't any real use for this prop other than if you need to
|
|
89
89
|
* add a `ref` for some DOM behavior.
|
|
90
90
|
*/
|
|
91
|
-
containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement
|
|
91
|
+
containerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
|
|
92
92
|
}
|
|
93
93
|
|
|
94
94
|
/**
|
package/src/form/types.ts
CHANGED
|
@@ -335,8 +335,7 @@ export interface FormMessageContainerExtension {
|
|
|
335
335
|
* purpose of this component though.
|
|
336
336
|
*/
|
|
337
337
|
messageProps?: PropsWithRef<
|
|
338
|
-
FormMessageProps & Partial<FormMessageInputLengthCounterProps
|
|
339
|
-
HTMLDivElement
|
|
338
|
+
FormMessageProps & Partial<FormMessageInputLengthCounterProps>
|
|
340
339
|
>;
|
|
341
340
|
|
|
342
341
|
/**
|
|
@@ -346,10 +345,7 @@ export interface FormMessageContainerExtension {
|
|
|
346
345
|
* Note: This will not be used if the `messageProps` are not provided since
|
|
347
346
|
* only the `children` will be returned without the container.
|
|
348
347
|
*/
|
|
349
|
-
messageContainerProps?: PropsWithRef<
|
|
350
|
-
HTMLAttributes<HTMLDivElement>,
|
|
351
|
-
HTMLDivElement
|
|
352
|
-
>;
|
|
348
|
+
messageContainerProps?: PropsWithRef<HTMLAttributes<HTMLDivElement>>;
|
|
353
349
|
}
|
|
354
350
|
|
|
355
351
|
/** @since 6.0.0 */
|
|
@@ -507,10 +503,7 @@ export interface TextFieldContainerOptions
|
|
|
507
503
|
*
|
|
508
504
|
* @since 6.0.0
|
|
509
505
|
*/
|
|
510
|
-
leftAddonProps?: PropsWithRef<
|
|
511
|
-
ConfigurableTextFieldAddonProps,
|
|
512
|
-
HTMLSpanElement
|
|
513
|
-
>;
|
|
506
|
+
leftAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;
|
|
514
507
|
|
|
515
508
|
/**
|
|
516
509
|
* @see {@link TextFieldAddonProps.disabled}
|
|
@@ -530,10 +523,7 @@ export interface TextFieldContainerOptions
|
|
|
530
523
|
*
|
|
531
524
|
* @since 6.0.0
|
|
532
525
|
*/
|
|
533
|
-
rightAddonProps?: PropsWithRef<
|
|
534
|
-
ConfigurableTextFieldAddonProps,
|
|
535
|
-
HTMLSpanElement
|
|
536
|
-
>;
|
|
526
|
+
rightAddonProps?: PropsWithRef<ConfigurableTextFieldAddonProps>;
|
|
537
527
|
|
|
538
528
|
/**
|
|
539
529
|
* @see {@link TextFieldAddonProps.disabled}
|
|
@@ -569,7 +559,7 @@ export interface FormFieldOptions
|
|
|
569
559
|
* }}
|
|
570
560
|
* ```
|
|
571
561
|
*/
|
|
572
|
-
labelProps?: PropsWithRef<LabelProps
|
|
562
|
+
labelProps?: PropsWithRef<LabelProps>;
|
|
573
563
|
|
|
574
564
|
/**
|
|
575
565
|
* A convenience prop to apply a custom style to a label. This is equivalent
|
package/src/form/utils.ts
CHANGED
|
@@ -38,6 +38,7 @@ export function tryToSubmitRelatedForm<E extends HTMLElement>(
|
|
|
38
38
|
return;
|
|
39
39
|
}
|
|
40
40
|
|
|
41
|
+
// eslint-disable-next-line no-param-reassign
|
|
41
42
|
formId = formId || form.id;
|
|
42
43
|
let submit = form.querySelector<HTMLButtonElement>('[type="submit"]');
|
|
43
44
|
if (!submit && formId) {
|
|
@@ -249,7 +249,7 @@ export function useElementInteraction<E extends HTMLElement>(
|
|
|
249
249
|
const { pressed } = state;
|
|
250
250
|
|
|
251
251
|
let ripples: ReactElement | undefined;
|
|
252
|
-
if (mode
|
|
252
|
+
if (mode === "ripple") {
|
|
253
253
|
ripples = (
|
|
254
254
|
<RippleContainer
|
|
255
255
|
ripples={state.ripples}
|
|
@@ -29,7 +29,7 @@ export interface LayoutAppBarProps extends AppBarProps {
|
|
|
29
29
|
/**
|
|
30
30
|
* Any additional props to pass to the {@link SkipToMainContent} component.
|
|
31
31
|
*/
|
|
32
|
-
skipProps?: PropsWithRef<SkipToMainContentProps
|
|
32
|
+
skipProps?: PropsWithRef<SkipToMainContentProps>;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
/**
|
package/src/layout/LayoutNav.tsx
CHANGED
|
@@ -140,7 +140,7 @@ export const LayoutNav = forwardRef<HTMLDivElement, LayoutNavProps>(
|
|
|
140
140
|
const {
|
|
141
141
|
as: Component = "nav",
|
|
142
142
|
"aria-labelledby": ariaLabelledBy,
|
|
143
|
-
"aria-label": ariaLabel = Component
|
|
143
|
+
"aria-label": ariaLabel = Component === "nav" && !ariaLabelledBy
|
|
144
144
|
? "Navigation"
|
|
145
145
|
: undefined,
|
|
146
146
|
expanded,
|
|
@@ -11,6 +11,7 @@ import { useUserInteractionMode } from "../interaction/UserInteractionModeProvid
|
|
|
11
11
|
export function useMainTabIndex(tabIndex?: number): number | undefined {
|
|
12
12
|
const keyboard = useUserInteractionMode() === "keyboard";
|
|
13
13
|
if (keyboard && typeof tabIndex === "undefined") {
|
|
14
|
+
// eslint-disable-next-line no-param-reassign
|
|
14
15
|
tabIndex = -1;
|
|
15
16
|
}
|
|
16
17
|
|
|
@@ -39,7 +39,7 @@ export interface ListItemLinkProps
|
|
|
39
39
|
* Any additional props to provide the wrapping `<li>` element such as
|
|
40
40
|
* `style`, `className`, and `ref`.
|
|
41
41
|
*/
|
|
42
|
-
liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement
|
|
42
|
+
liProps?: PropsWithRef<HTMLAttributes<HTMLLIElement>>;
|
|
43
43
|
|
|
44
44
|
/**
|
|
45
45
|
* @defaultValue `disabled ? -1 : undefined`
|
|
@@ -8,10 +8,7 @@ import { listItemText } from "./listItemStyles.js";
|
|
|
8
8
|
*/
|
|
9
9
|
export interface ListItemTextProps extends HTMLAttributes<HTMLSpanElement> {
|
|
10
10
|
secondaryText?: ReactNode;
|
|
11
|
-
secondaryTextProps?: PropsWithRef<
|
|
12
|
-
HTMLAttributes<HTMLSpanElement>,
|
|
13
|
-
HTMLSpanElement
|
|
14
|
-
>;
|
|
11
|
+
secondaryTextProps?: PropsWithRef<HTMLAttributes<HTMLSpanElement>>;
|
|
15
12
|
|
|
16
13
|
/** @defaultValue `false` */
|
|
17
14
|
secondaryTextClamped?: boolean;
|