@react-md/core 6.1.0 → 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/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/styles.d.ts +29 -1
- package/dist/avatar/styles.js.map +1 -1
- 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/card/CardHeader.d.ts +1 -1
- package/dist/card/CardHeader.js.map +1 -1
- package/dist/chip/Chip.d.ts +1 -1
- package/dist/chip/Chip.js.map +1 -1
- package/dist/dialog/Dialog.d.ts +1 -1
- package/dist/dialog/Dialog.js.map +1 -1
- 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/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.map +1 -1
- package/dist/form/TextField.d.ts +1 -1
- package/dist/form/TextField.js.map +1 -1
- package/dist/form/types.d.ts +5 -5
- package/dist/form/types.js.map +1 -1
- package/dist/layout/LayoutAppBar.d.ts +1 -1
- package/dist/layout/LayoutAppBar.js.map +1 -1
- 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/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/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/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/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/snackbar/Toast.d.ts +1 -1
- package/dist/snackbar/Toast.js.map +1 -1
- 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/tabs/TabListScrollButton.d.ts +1 -1
- package/dist/tabs/TabListScrollButton.js.map +1 -1
- package/dist/tree/TreeItem.d.ts +2 -2
- package/dist/tree/TreeItem.js.map +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/package.json +6 -6
- package/src/RootHtml.tsx +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 +2 -5
- package/src/form/TextField.tsx +1 -1
- package/src/form/types.ts +5 -15
- package/src/layout/LayoutAppBar.tsx +1 -1
- 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/tree/TreeItem.tsx +2 -2
- package/src/types.ts +44 -2
- package/src/utils/alphaNumericSort.ts +17 -11
|
@@ -1,11 +1,8 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { cnb } from "cnbuilder";
|
|
3
2
|
import { forwardRef, useMemo } from "react";
|
|
4
|
-
import { cssUtils } from "../cssUtils.js";
|
|
5
3
|
import { useEnsuredId } from "../useEnsuredId.js";
|
|
6
|
-
import { bem } from "../utils/bem.js";
|
|
7
4
|
import { getPercentage } from "../utils/getPercentage.js";
|
|
8
|
-
|
|
5
|
+
import { linearProgress, linearProgressBar } from "./linearProgressStyles.js";
|
|
9
6
|
/**
|
|
10
7
|
* @example Indeterminate Example
|
|
11
8
|
* ```tsx
|
|
@@ -34,7 +31,7 @@ const styles = bem("rmd-linear-progress");
|
|
|
34
31
|
* @since 6.0.0 Supports rendering as any of the theme colors and
|
|
35
32
|
* requires a label for accessibility.
|
|
36
33
|
*/ export const LinearProgress = /*#__PURE__*/ forwardRef(function LinearProgress(props, ref) {
|
|
37
|
-
const { id: propId, style: propStyle, className, barStyle: propBarStyle, barClassName, min = 0, max = 100, value, reverse
|
|
34
|
+
const { id: propId, style: propStyle, className, barStyle: propBarStyle, barClassName, barProps, min = 0, max = 100, value, reverse, theme, disableTransition, vertical, verticalHeight = 240, ...remaining } = props;
|
|
38
35
|
const id = useEnsuredId(propId, "linear-progress");
|
|
39
36
|
const style = useMemo(()=>{
|
|
40
37
|
if (!vertical || verticalHeight === null) {
|
|
@@ -72,8 +69,7 @@ const styles = bem("rmd-linear-progress");
|
|
|
72
69
|
propBarStyle,
|
|
73
70
|
vertical
|
|
74
71
|
]);
|
|
75
|
-
const
|
|
76
|
-
const indeterminate = !determinate;
|
|
72
|
+
const indeterminate = typeof progress !== "number";
|
|
77
73
|
return /*#__PURE__*/ _jsx("span", {
|
|
78
74
|
...remaining,
|
|
79
75
|
id: id,
|
|
@@ -83,30 +79,22 @@ const styles = bem("rmd-linear-progress");
|
|
|
83
79
|
"aria-valuemin": min,
|
|
84
80
|
"aria-valuemax": max,
|
|
85
81
|
"aria-valuenow": value,
|
|
86
|
-
className:
|
|
82
|
+
className: linearProgress({
|
|
83
|
+
className,
|
|
84
|
+
theme,
|
|
87
85
|
vertical,
|
|
88
|
-
horizontal: !vertical,
|
|
89
|
-
determinate,
|
|
90
86
|
indeterminate
|
|
91
|
-
}),
|
|
92
|
-
textColor: theme
|
|
93
|
-
}), className),
|
|
87
|
+
}),
|
|
94
88
|
children: /*#__PURE__*/ _jsx("span", {
|
|
89
|
+
...barProps,
|
|
95
90
|
style: barStyle,
|
|
96
|
-
className:
|
|
91
|
+
className: linearProgressBar({
|
|
92
|
+
className: barClassName,
|
|
93
|
+
reverse,
|
|
97
94
|
vertical,
|
|
98
|
-
"vertical-reverse": vertical && reverse,
|
|
99
|
-
horizontal: !vertical,
|
|
100
|
-
"horizontal-reverse": !vertical && reverse,
|
|
101
|
-
animate: !disableTransition && determinate,
|
|
102
|
-
determinate,
|
|
103
95
|
indeterminate,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
"indeterminate-reverse": indeterminate && reverse && !vertical,
|
|
107
|
-
"indeterminate-vertical": indeterminate && vertical,
|
|
108
|
-
"indeterminate-vertical-reverse": indeterminate && reverse && vertical
|
|
109
|
-
}), barClassName)
|
|
96
|
+
disableTransition
|
|
97
|
+
})
|
|
110
98
|
})
|
|
111
99
|
});
|
|
112
100
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/progress/LinearProgress.tsx"],"sourcesContent":["import {
|
|
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"}
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { type ProgressTheme } from "./types.js";
|
|
2
|
+
/**
|
|
3
|
+
* @since 6.2.0
|
|
4
|
+
*/
|
|
5
|
+
export interface CircularProgressClassNameOptions {
|
|
6
|
+
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* @defaultValue `"primary"`
|
|
9
|
+
* @since 6.0.0
|
|
10
|
+
*/
|
|
11
|
+
theme?: ProgressTheme;
|
|
12
|
+
/**
|
|
13
|
+
* Set to `true` to render as a smaller size.
|
|
14
|
+
*
|
|
15
|
+
* @defaultValue `false`
|
|
16
|
+
* @since 2.3.0
|
|
17
|
+
* @since 6.0.0 Renamed from `small`
|
|
18
|
+
*/
|
|
19
|
+
dense?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Boolean if the circular progress should be centered using left and right
|
|
22
|
+
* margins.
|
|
23
|
+
*
|
|
24
|
+
* @defaultValue `false`
|
|
25
|
+
* @since 6.0.0 Renamed from `centered`
|
|
26
|
+
*/
|
|
27
|
+
disableCentered?: boolean;
|
|
28
|
+
}
|
|
29
|
+
/**
|
|
30
|
+
* @since 6.2.0
|
|
31
|
+
*/
|
|
32
|
+
export declare function circularProgress(options?: CircularProgressClassNameOptions): string;
|
|
33
|
+
/**
|
|
34
|
+
* @since 6.2.0
|
|
35
|
+
*/
|
|
36
|
+
export interface CircularProgressSvgClassNameOptions {
|
|
37
|
+
className?: string;
|
|
38
|
+
/** @defaultValue `false` */
|
|
39
|
+
indeterminate?: boolean;
|
|
40
|
+
/** @defaultValue `false` */
|
|
41
|
+
disableShrink?: boolean;
|
|
42
|
+
}
|
|
43
|
+
/**
|
|
44
|
+
* @since 6.2.0
|
|
45
|
+
*/
|
|
46
|
+
export declare function circularProgressSvg(options?: CircularProgressSvgClassNameOptions): string;
|
|
47
|
+
/**
|
|
48
|
+
* @since 6.2.0
|
|
49
|
+
*/
|
|
50
|
+
export interface CircularProgressCircleClassNameOptions {
|
|
51
|
+
className?: string;
|
|
52
|
+
/** @defaultValue `false` */
|
|
53
|
+
indeterminate?: boolean;
|
|
54
|
+
/** @defaultValue `false` */
|
|
55
|
+
disableShrink?: boolean;
|
|
56
|
+
/** @defaultValue `false` */
|
|
57
|
+
disableTransition?: boolean;
|
|
58
|
+
}
|
|
59
|
+
/**
|
|
60
|
+
* @since 6.2.0
|
|
61
|
+
*/
|
|
62
|
+
export declare function circularProgressCircle(options?: CircularProgressCircleClassNameOptions): string;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { cnb } from "cnbuilder";
|
|
2
|
+
import { cssUtils } from "../cssUtils.js";
|
|
3
|
+
import { bem } from "../utils/bem.js";
|
|
4
|
+
const styles = bem("rmd-circular-progress");
|
|
5
|
+
/**
|
|
6
|
+
* @since 6.2.0
|
|
7
|
+
*/ export function circularProgress(options = {}) {
|
|
8
|
+
const { className, theme = "primary", dense, disableCentered } = options;
|
|
9
|
+
return cnb(styles({
|
|
10
|
+
dense,
|
|
11
|
+
centered: !disableCentered
|
|
12
|
+
}), theme !== "current-color" && cssUtils({
|
|
13
|
+
textColor: theme
|
|
14
|
+
}), className);
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* @since 6.2.0
|
|
18
|
+
*/ export function circularProgressSvg(options = {}) {
|
|
19
|
+
const { className, indeterminate, disableShrink } = options;
|
|
20
|
+
return cnb(styles("svg", {
|
|
21
|
+
determinate: !indeterminate,
|
|
22
|
+
indeterminate: indeterminate && !disableShrink,
|
|
23
|
+
"rotate-only": indeterminate && disableShrink
|
|
24
|
+
}), className);
|
|
25
|
+
}
|
|
26
|
+
/**
|
|
27
|
+
* @since 6.2.0
|
|
28
|
+
*/ export function circularProgressCircle(options = {}) {
|
|
29
|
+
const { className, indeterminate, disableShrink, disableTransition } = options;
|
|
30
|
+
return cnb(styles("circle", {
|
|
31
|
+
animate: !disableTransition && !indeterminate,
|
|
32
|
+
determinate: !indeterminate,
|
|
33
|
+
indeterminate: indeterminate && !disableShrink,
|
|
34
|
+
"rotate-only": indeterminate && disableShrink
|
|
35
|
+
}), className);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=circularProgressStyles.js.map
|
|
@@ -0,0 +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"}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { type ProgressTheme } from "./types.js";
|
|
2
|
+
/**
|
|
3
|
+
* @since 6.2.0
|
|
4
|
+
*/
|
|
5
|
+
export interface LinearProgressClassNameOptions {
|
|
6
|
+
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* @defaultValue `"primary"`
|
|
9
|
+
* @since 6.0.0
|
|
10
|
+
*/
|
|
11
|
+
theme?: ProgressTheme;
|
|
12
|
+
/** @defaultValue `false` */
|
|
13
|
+
vertical?: boolean;
|
|
14
|
+
/** @defaultValue `false` */
|
|
15
|
+
indeterminate?: boolean;
|
|
16
|
+
}
|
|
17
|
+
/**
|
|
18
|
+
* @since 6.2.0
|
|
19
|
+
*/
|
|
20
|
+
export declare function linearProgress(options?: LinearProgressClassNameOptions): string;
|
|
21
|
+
/**
|
|
22
|
+
* @since 6.2.0
|
|
23
|
+
*/
|
|
24
|
+
export interface LinearProgressBarClassNameOptions {
|
|
25
|
+
className?: string;
|
|
26
|
+
/** @defaultValue `false` */
|
|
27
|
+
reverse?: boolean;
|
|
28
|
+
/** @defaultValue `false` */
|
|
29
|
+
vertical?: boolean;
|
|
30
|
+
/** @defaultValue `false` */
|
|
31
|
+
indeterminate?: boolean;
|
|
32
|
+
/** @defaultValue `false` */
|
|
33
|
+
disableTransition?: boolean;
|
|
34
|
+
}
|
|
35
|
+
/**
|
|
36
|
+
* @since 6.2.0
|
|
37
|
+
*/
|
|
38
|
+
export declare function linearProgressBar(options?: LinearProgressBarClassNameOptions): string;
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { cnb } from "cnbuilder";
|
|
2
|
+
import { cssUtils } from "../cssUtils.js";
|
|
3
|
+
import { bem } from "../utils/bem.js";
|
|
4
|
+
const styles = bem("rmd-linear-progress");
|
|
5
|
+
/**
|
|
6
|
+
* @since 6.2.0
|
|
7
|
+
*/ export function linearProgress(options = {}) {
|
|
8
|
+
const { className, theme = "primary", vertical, indeterminate } = options;
|
|
9
|
+
return cnb(styles({
|
|
10
|
+
vertical,
|
|
11
|
+
horizontal: !vertical,
|
|
12
|
+
determinate: !indeterminate,
|
|
13
|
+
indeterminate
|
|
14
|
+
}), theme !== "current-color" && cssUtils({
|
|
15
|
+
textColor: theme
|
|
16
|
+
}), className);
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* @since 6.2.0
|
|
20
|
+
*/ export function linearProgressBar(options = {}) {
|
|
21
|
+
const { className, reverse, vertical, indeterminate, disableTransition } = options;
|
|
22
|
+
return cnb(styles("bar", {
|
|
23
|
+
vertical,
|
|
24
|
+
"vertical-reverse": vertical && reverse,
|
|
25
|
+
horizontal: !vertical,
|
|
26
|
+
"horizontal-reverse": !vertical && reverse,
|
|
27
|
+
animate: !disableTransition && !indeterminate,
|
|
28
|
+
determinate: !indeterminate,
|
|
29
|
+
indeterminate,
|
|
30
|
+
"determinate-reverse": !indeterminate && reverse && !vertical,
|
|
31
|
+
"determinate-vertical-reverse": !indeterminate && reverse && vertical,
|
|
32
|
+
"indeterminate-reverse": indeterminate && reverse && !vertical,
|
|
33
|
+
"indeterminate-vertical": indeterminate && vertical,
|
|
34
|
+
"indeterminate-vertical-reverse": indeterminate && reverse && vertical
|
|
35
|
+
}), className);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
//# sourceMappingURL=linearProgressStyles.js.map
|
|
@@ -0,0 +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,4 +1,4 @@
|
|
|
1
|
-
import { type TextExtractor } from "../types.js";
|
|
1
|
+
import { type AutomaticTextExtraction, type TextExtractor } from "../types.js";
|
|
2
2
|
import { type BaseSearchOptions } from "./types.js";
|
|
3
3
|
/**
|
|
4
4
|
* @since 6.0.0
|
|
@@ -123,17 +123,33 @@ export interface CaseInsensitiveOptions<T> extends BaseSearchOptions<T>, CaseIns
|
|
|
123
123
|
* caseInsensitiveSearch({
|
|
124
124
|
* list: fruits,
|
|
125
125
|
* query: "ap",
|
|
126
|
-
* extractor: (item) => item.name,
|
|
127
126
|
* });
|
|
128
127
|
* // [{ name: "Apple", value: 0 }, { name: "Grape", value: 2 }]
|
|
129
128
|
* ```
|
|
130
129
|
*
|
|
130
|
+
* @example Objects With Custom Names
|
|
131
|
+
* ```ts
|
|
132
|
+
* const fruits = [
|
|
133
|
+
* { nameField: "Apple", value: 0 },
|
|
134
|
+
* { nameField: "Banana", value: 1 },
|
|
135
|
+
* { nameField: "Grape", value: 2 },
|
|
136
|
+
* { nameField: "Orange", value: 3 },
|
|
137
|
+
* ];
|
|
138
|
+
*
|
|
139
|
+
* caseInsensitiveSearch({
|
|
140
|
+
* list: fruits,
|
|
141
|
+
* query: "ap",
|
|
142
|
+
* extractor: (item) => item.nameField,
|
|
143
|
+
* });
|
|
144
|
+
* // [{ nameField: "Apple", value: 0 }, { nameField: "Grape", value: 2 }]
|
|
145
|
+
* ```
|
|
146
|
+
*
|
|
131
147
|
* @since 6.0.0
|
|
132
148
|
*/
|
|
133
|
-
export declare function caseInsensitiveSearch<T extends
|
|
149
|
+
export declare function caseInsensitiveSearch<T extends AutomaticTextExtraction>(options: CaseInsensitiveOptions<T> & {
|
|
134
150
|
type?: "filter";
|
|
135
151
|
}): readonly T[];
|
|
136
|
-
export declare function caseInsensitiveSearch<T extends
|
|
152
|
+
export declare function caseInsensitiveSearch<T extends AutomaticTextExtraction>(options: CaseInsensitiveOptions<T> & {
|
|
137
153
|
type: "search";
|
|
138
154
|
}): T | undefined;
|
|
139
155
|
export declare function caseInsensitiveSearch<T>(options: CaseInsensitiveOptions<T> & {
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { defaultExtractor, search } from "./utils.js";
|
|
2
|
+
/**
|
|
3
|
+
* @since 6.2.0
|
|
4
|
+
* @internal
|
|
5
|
+
*/ const DEFAULT_EXTRACTOR = defaultExtractor("caseInsensitiveSearch");
|
|
2
6
|
/**
|
|
3
7
|
* @since 6.0.0
|
|
4
8
|
*/ export function isCaseInsensitiveMatch(options) {
|
|
@@ -10,7 +14,7 @@ import { defaultExtractor, search } from "./utils.js";
|
|
|
10
14
|
return matchIndex !== -1;
|
|
11
15
|
}
|
|
12
16
|
export function caseInsensitiveSearch(options) {
|
|
13
|
-
const { list, type = "filter", query, extractor =
|
|
17
|
+
const { list, type = "filter", query, extractor = DEFAULT_EXTRACTOR, startsWith, whitespace } = options;
|
|
14
18
|
return search({
|
|
15
19
|
type,
|
|
16
20
|
list,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/searching/caseInsensitive.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\nimport { defaultExtractor, search } from \"./utils.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface CaseInsensitiveStartsWithOptions {\n /**\n * Set this to `true` if the item in the list must start with the query\n * instead of only including it.\n *\n * @example Search Example\n * ```ts\n * const fruits = [\"Banana\", \"Grape\", \"Apple\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * type: \"search\",\n * });\n * // \"Grape\"\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * type: \"search\",\n * startsWith: true,\n * });\n * // \"Apple\"\n * ```\n *\n * @example Filter Example\n * ```ts\n * const fruits = [\"Apple\", \"Banana\", \"Grape\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * startsWith: true,\n * });\n * // [\"Apple\"]\n * ```\n *\n * @defaultValue `false`\n */\n startsWith?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface IsCaseInsensitiveMatchOptions\n extends CaseInsensitiveStartsWithOptions {\n /**\n * The current search query.\n */\n query: string;\n\n /**\n * The current value to compare against.\n */\n value: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function isCaseInsensitiveMatch(\n options: IsCaseInsensitiveMatchOptions\n): boolean {\n const { query, value, startsWith } = options;\n const matchIndex = value.indexOf(query);\n if (startsWith) {\n return matchIndex === 0;\n }\n\n return matchIndex !== -1;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CaseInsensitiveOptions<T>\n extends BaseSearchOptions<T>,\n CaseInsensitiveStartsWithOptions {}\n\n/**\n * @example String list\n * ```ts\n * const fruits = [\"Apple\", \"Banana\", \"Grape\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * startsWith: true,\n * });\n * // [\"Apple\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" a p\",\n * });\n * // []\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" a p\",\n * whitespace: \"ignore\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" ap \",\n * whitespace: \"trim\",\n * });\n * // [\"Apple\", \"Grape\"]\n * ```\n *\n * @example Objects\n * ```ts\n * const fruits = [\n * { name: \"Apple\", value: 0 },\n * { name: \"Banana\", value: 1 },\n * { name: \"Grape\", value: 2 },\n * { name: \"Orange\", value: 3 },\n * ];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * extractor: (item) => item.
|
|
1
|
+
{"version":3,"sources":["../../src/searching/caseInsensitive.ts"],"sourcesContent":["import { type AutomaticTextExtraction, type TextExtractor } from \"../types.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\nimport { defaultExtractor, search } from \"./utils.js\";\n\n/**\n * @since 6.2.0\n * @internal\n */\nconst DEFAULT_EXTRACTOR = defaultExtractor(\"caseInsensitiveSearch\");\n\n/**\n * @since 6.0.0\n */\nexport interface CaseInsensitiveStartsWithOptions {\n /**\n * Set this to `true` if the item in the list must start with the query\n * instead of only including it.\n *\n * @example Search Example\n * ```ts\n * const fruits = [\"Banana\", \"Grape\", \"Apple\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * type: \"search\",\n * });\n * // \"Grape\"\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * type: \"search\",\n * startsWith: true,\n * });\n * // \"Apple\"\n * ```\n *\n * @example Filter Example\n * ```ts\n * const fruits = [\"Apple\", \"Banana\", \"Grape\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * startsWith: true,\n * });\n * // [\"Apple\"]\n * ```\n *\n * @defaultValue `false`\n */\n startsWith?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface IsCaseInsensitiveMatchOptions\n extends CaseInsensitiveStartsWithOptions {\n /**\n * The current search query.\n */\n query: string;\n\n /**\n * The current value to compare against.\n */\n value: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function isCaseInsensitiveMatch(\n options: IsCaseInsensitiveMatchOptions\n): boolean {\n const { query, value, startsWith } = options;\n const matchIndex = value.indexOf(query);\n if (startsWith) {\n return matchIndex === 0;\n }\n\n return matchIndex !== -1;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface CaseInsensitiveOptions<T>\n extends BaseSearchOptions<T>,\n CaseInsensitiveStartsWithOptions {}\n\n/**\n * @example String list\n * ```ts\n * const fruits = [\"Apple\", \"Banana\", \"Grape\", \"Orange\"];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * startsWith: true,\n * });\n * // [\"Apple\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" a p\",\n * });\n * // []\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" a p\",\n * whitespace: \"ignore\",\n * });\n * // [\"Apple\", \"Grape\"]\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \" ap \",\n * whitespace: \"trim\",\n * });\n * // [\"Apple\", \"Grape\"]\n * ```\n *\n * @example Objects\n * ```ts\n * const fruits = [\n * { name: \"Apple\", value: 0 },\n * { name: \"Banana\", value: 1 },\n * { name: \"Grape\", value: 2 },\n * { name: \"Orange\", value: 3 },\n * ];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * });\n * // [{ name: \"Apple\", value: 0 }, { name: \"Grape\", value: 2 }]\n * ```\n *\n * @example Objects With Custom Names\n * ```ts\n * const fruits = [\n * { nameField: \"Apple\", value: 0 },\n * { nameField: \"Banana\", value: 1 },\n * { nameField: \"Grape\", value: 2 },\n * { nameField: \"Orange\", value: 3 },\n * ];\n *\n * caseInsensitiveSearch({\n * list: fruits,\n * query: \"ap\",\n * extractor: (item) => item.nameField,\n * });\n * // [{ nameField: \"Apple\", value: 0 }, { nameField: \"Grape\", value: 2 }]\n * ```\n *\n * @since 6.0.0\n */\nexport function caseInsensitiveSearch<T extends AutomaticTextExtraction>(\n options: CaseInsensitiveOptions<T> & { type?: \"filter\" }\n): readonly T[];\nexport function caseInsensitiveSearch<T extends AutomaticTextExtraction>(\n options: CaseInsensitiveOptions<T> & { type: \"search\" }\n): T | undefined;\nexport function caseInsensitiveSearch<T>(\n options: CaseInsensitiveOptions<T> & {\n extractor: TextExtractor<T>;\n type?: \"filter\";\n }\n): readonly T[];\nexport function caseInsensitiveSearch<T>(\n options: CaseInsensitiveOptions<T> & {\n extractor: TextExtractor<T>;\n type: \"search\";\n }\n): T | undefined;\nexport function caseInsensitiveSearch<T>(\n options: CaseInsensitiveOptions<T>\n): readonly T[] | T | undefined {\n const {\n list,\n type = \"filter\",\n query,\n extractor = DEFAULT_EXTRACTOR,\n startsWith,\n whitespace,\n } = options;\n\n return search({\n type,\n list,\n query,\n extractor,\n whitespace,\n filter(q, value) {\n return isCaseInsensitiveMatch({\n query: q,\n value,\n startsWith,\n });\n },\n });\n}\n"],"names":["defaultExtractor","search","DEFAULT_EXTRACTOR","isCaseInsensitiveMatch","options","query","value","startsWith","matchIndex","indexOf","caseInsensitiveSearch","list","type","extractor","whitespace","filter","q"],"mappings":"AAEA,SAASA,gBAAgB,EAAEC,MAAM,QAAQ,aAAa;AAEtD;;;CAGC,GACD,MAAMC,oBAAoBF,iBAAiB;AAqE3C;;CAEC,GACD,OAAO,SAASG,uBACdC,OAAsC;IAEtC,MAAM,EAAEC,KAAK,EAAEC,KAAK,EAAEC,UAAU,EAAE,GAAGH;IACrC,MAAMI,aAAaF,MAAMG,OAAO,CAACJ;IACjC,IAAIE,YAAY;QACd,OAAOC,eAAe;IACxB;IAEA,OAAOA,eAAe,CAAC;AACzB;AAqGA,OAAO,SAASE,sBACdN,OAAkC;IAElC,MAAM,EACJO,IAAI,EACJC,OAAO,QAAQ,EACfP,KAAK,EACLQ,YAAYX,iBAAiB,EAC7BK,UAAU,EACVO,UAAU,EACX,GAAGV;IAEJ,OAAOH,OAAO;QACZW;QACAD;QACAN;QACAQ;QACAC;QACAC,QAAOC,CAAC,EAAEV,KAAK;YACb,OAAOH,uBAAuB;gBAC5BE,OAAOW;gBACPV;gBACAC;YACF;QACF;IACF;AACF"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { type TextExtractor } from "../types.js";
|
|
1
|
+
import { type AutomaticTextExtraction, type TextExtractor } from "../types.js";
|
|
2
2
|
import { type BaseSearchOptions } from "./types.js";
|
|
3
3
|
/**
|
|
4
4
|
* @example
|
|
@@ -112,10 +112,10 @@ export type FuzzySearchOptions<T> = BaseSearchOptions<T>;
|
|
|
112
112
|
*
|
|
113
113
|
* @since 6.0.0
|
|
114
114
|
*/
|
|
115
|
-
export declare function fuzzySearch<T extends
|
|
115
|
+
export declare function fuzzySearch<T extends AutomaticTextExtraction>(options: FuzzySearchOptions<T> & {
|
|
116
116
|
type?: "filter";
|
|
117
117
|
}): readonly T[];
|
|
118
|
-
export declare function fuzzySearch<T extends
|
|
118
|
+
export declare function fuzzySearch<T extends AutomaticTextExtraction>(options: FuzzySearchOptions<T> & {
|
|
119
119
|
type?: "search";
|
|
120
120
|
}): T | undefined;
|
|
121
121
|
export declare function fuzzySearch<T>(option: FuzzySearchOptions<T> & {
|
package/dist/searching/fuzzy.js
CHANGED
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import { defaultExtractor, search } from "./utils.js";
|
|
2
|
+
/**
|
|
3
|
+
* @since 6.2.0
|
|
4
|
+
* @internal
|
|
5
|
+
*/ const DEFAULT_EXTRACTOR = defaultExtractor("fuzzySearch");
|
|
2
6
|
/**
|
|
3
7
|
* @example
|
|
4
8
|
* ```tsx
|
|
@@ -34,7 +38,7 @@ import { defaultExtractor, search } from "./utils.js";
|
|
|
34
38
|
.replace(/\*\*/g, "*\\*"), "i");
|
|
35
39
|
}
|
|
36
40
|
export function fuzzySearch(options) {
|
|
37
|
-
const { list, type = "filter", query, extractor =
|
|
41
|
+
const { list, type = "filter", query, extractor = DEFAULT_EXTRACTOR, whitespace } = options;
|
|
38
42
|
// lazy initialize the RegExp since the base `filter` function will modify the
|
|
39
43
|
// query and never call the filter function if:
|
|
40
44
|
// - there is no query
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/searching/fuzzy.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\nimport { defaultExtractor, search } from \"./utils.js\";\n\n/**\n * @example\n * ```tsx\n * import { createFuzzyRegExp } from \"@react-md/core/searching/fuzzy\":\n * import { toSearchQuery } from \"@react-md/core/searching/toSearchQuery\":\n * import { useDeferredValue, useMemo, useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const [value, setValue] = useState(\"\");\n * const deferredValue = useDeferredValue(value)\n *\n * const match = useMemo(() => {\n * const query = toSearchQuery(deferredValue);\n * if (!query) {\n * return;\n * }\n *\n * const fuzzyRegExp = createFuzzyRegExp(query);\n * return options.find(option => fuzzyRegExp.test(option.label)):\n * }, [options])\n *\n * if (match) {\n * // do something\n * }\n * }\n *\n * ```\n *\n * @since 6.0.0\n * @see {@link fuzzySearch}\n */\nexport function createFuzzyRegExp(query: string): RegExp {\n return new RegExp(\n query\n .split(\"\")\n .join(\"\\\\w*\")\n .replace(/(\\(|\\||\\)|\\\\(?!w\\*)|\\[|\\|-|\\.|\\^|\\+|\\$|\\?|^(?!w)\\*)/g, \"\\\\$1\")\n // Couldn't get the matching of two '*' working, so replace them here..\n .replace(/\\*\\*/g, \"*\\\\*\"),\n \"i\"\n );\n}\n\n/**\n * @since 6.0.0\n */\nexport type FuzzySearchOptions<T> = BaseSearchOptions<T>;\n\n/**\n * Filters a list by making sure that all the letters appear in order ignoring\n * case, punctuation, whitespace, and special characters. This is kind of the\n * same filtering that appears in text editors.\n *\n * @example Simple Example\n * ```ts\n * const list = [\n * \"at\",\n * \"charAt\",\n * \"charCodeAt\",\n * \"codePointAt\",\n * \"concat\",\n * \"constructor\",\n * \"endsWith\",\n * \"includes\",\n * \"indexOf\",\n * \"lastIndexOf\",\n * \"length\",\n * \"localeCompare\",\n * \"match\",\n * \"matchAll\",\n * \"normalize\",\n * \"padEnd\",\n * \"padStart\",\n * \"repeat\",\n * \"replace\",\n * \"replaceAll\",\n * \"search\",\n * \"slice\",\n * \"split\",\n * \"startsWith\",\n * \"substring\",\n * \"toLocaleLowerCase\",\n * \"toLocaleUpperCase\",\n * \"toLowerCase\",\n * \"toString\",\n * \"toUpperCase\",\n * \"trim\",\n * \"trimEnd\",\n * \"trimStart\",\n * \"valueOf\",\n * ];\n *\n * fuzzySearch({\n * list,\n * query: \"la\",\n * });\n * // [\n * // \"lastIndexOf\",\n * // ^^\n * // \"localeCompare\",\n * // ^ ^\n * // \"replace\",\n * // ^^\n * // \"replaceAll\",\n * // ^^\n * // \"toLocaleLowerCase\",\n * // ^ ^\n * // \"toLocaleUpperCase\",\n * // ^ ^\n * // \"toLowerCase\",\n * // ^ ^\n * // ]\n *\n * fuzzySearch({\n * list,\n * query: \"ad\",\n * type: \"search\",\n * });\n * // \"charCodeAt\"\n * // ^ ^\n * ```\n *\n * @since 6.0.0\n */\nexport function fuzzySearch<T extends
|
|
1
|
+
{"version":3,"sources":["../../src/searching/fuzzy.ts"],"sourcesContent":["import { type AutomaticTextExtraction, type TextExtractor } from \"../types.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\nimport { defaultExtractor, search } from \"./utils.js\";\n\n/**\n * @since 6.2.0\n * @internal\n */\nconst DEFAULT_EXTRACTOR = defaultExtractor(\"fuzzySearch\");\n\n/**\n * @example\n * ```tsx\n * import { createFuzzyRegExp } from \"@react-md/core/searching/fuzzy\":\n * import { toSearchQuery } from \"@react-md/core/searching/toSearchQuery\":\n * import { useDeferredValue, useMemo, useState, type ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n * const [value, setValue] = useState(\"\");\n * const deferredValue = useDeferredValue(value)\n *\n * const match = useMemo(() => {\n * const query = toSearchQuery(deferredValue);\n * if (!query) {\n * return;\n * }\n *\n * const fuzzyRegExp = createFuzzyRegExp(query);\n * return options.find(option => fuzzyRegExp.test(option.label)):\n * }, [options])\n *\n * if (match) {\n * // do something\n * }\n * }\n *\n * ```\n *\n * @since 6.0.0\n * @see {@link fuzzySearch}\n */\nexport function createFuzzyRegExp(query: string): RegExp {\n return new RegExp(\n query\n .split(\"\")\n .join(\"\\\\w*\")\n .replace(/(\\(|\\||\\)|\\\\(?!w\\*)|\\[|\\|-|\\.|\\^|\\+|\\$|\\?|^(?!w)\\*)/g, \"\\\\$1\")\n // Couldn't get the matching of two '*' working, so replace them here..\n .replace(/\\*\\*/g, \"*\\\\*\"),\n \"i\"\n );\n}\n\n/**\n * @since 6.0.0\n */\nexport type FuzzySearchOptions<T> = BaseSearchOptions<T>;\n\n/**\n * Filters a list by making sure that all the letters appear in order ignoring\n * case, punctuation, whitespace, and special characters. This is kind of the\n * same filtering that appears in text editors.\n *\n * @example Simple Example\n * ```ts\n * const list = [\n * \"at\",\n * \"charAt\",\n * \"charCodeAt\",\n * \"codePointAt\",\n * \"concat\",\n * \"constructor\",\n * \"endsWith\",\n * \"includes\",\n * \"indexOf\",\n * \"lastIndexOf\",\n * \"length\",\n * \"localeCompare\",\n * \"match\",\n * \"matchAll\",\n * \"normalize\",\n * \"padEnd\",\n * \"padStart\",\n * \"repeat\",\n * \"replace\",\n * \"replaceAll\",\n * \"search\",\n * \"slice\",\n * \"split\",\n * \"startsWith\",\n * \"substring\",\n * \"toLocaleLowerCase\",\n * \"toLocaleUpperCase\",\n * \"toLowerCase\",\n * \"toString\",\n * \"toUpperCase\",\n * \"trim\",\n * \"trimEnd\",\n * \"trimStart\",\n * \"valueOf\",\n * ];\n *\n * fuzzySearch({\n * list,\n * query: \"la\",\n * });\n * // [\n * // \"lastIndexOf\",\n * // ^^\n * // \"localeCompare\",\n * // ^ ^\n * // \"replace\",\n * // ^^\n * // \"replaceAll\",\n * // ^^\n * // \"toLocaleLowerCase\",\n * // ^ ^\n * // \"toLocaleUpperCase\",\n * // ^ ^\n * // \"toLowerCase\",\n * // ^ ^\n * // ]\n *\n * fuzzySearch({\n * list,\n * query: \"ad\",\n * type: \"search\",\n * });\n * // \"charCodeAt\"\n * // ^ ^\n * ```\n *\n * @since 6.0.0\n */\nexport function fuzzySearch<T extends AutomaticTextExtraction>(\n options: FuzzySearchOptions<T> & { type?: \"filter\" }\n): readonly T[];\nexport function fuzzySearch<T extends AutomaticTextExtraction>(\n options: FuzzySearchOptions<T> & { type?: \"search\" }\n): T | undefined;\nexport function fuzzySearch<T>(\n option: FuzzySearchOptions<T> & {\n extractor: TextExtractor<T>;\n type?: \"filter\";\n }\n): readonly T[];\nexport function fuzzySearch<T>(\n option: FuzzySearchOptions<T> & {\n extractor: TextExtractor<T>;\n type?: \"search\";\n }\n): T | undefined;\nexport function fuzzySearch<T>(\n options: FuzzySearchOptions<T>\n): readonly T[] | T | undefined {\n const {\n list,\n type = \"filter\",\n query,\n extractor = DEFAULT_EXTRACTOR,\n whitespace,\n } = options;\n\n // lazy initialize the RegExp since the base `filter` function will modify the\n // query and never call the filter function if:\n // - there is no query\n // - the list is empty\n let regexp: RegExp;\n return search({\n type,\n list,\n query,\n extractor,\n whitespace,\n filter(query, value) {\n return (\n value.length > 0 && (regexp ??= createFuzzyRegExp(query)).test(value)\n );\n },\n });\n}\n"],"names":["defaultExtractor","search","DEFAULT_EXTRACTOR","createFuzzyRegExp","query","RegExp","split","join","replace","fuzzySearch","options","list","type","extractor","whitespace","regexp","filter","value","length","test"],"mappings":"AAEA,SAASA,gBAAgB,EAAEC,MAAM,QAAQ,aAAa;AAEtD;;;CAGC,GACD,MAAMC,oBAAoBF,iBAAiB;AAE3C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASG,kBAAkBC,KAAa;IAC7C,OAAO,IAAIC,OACTD,MACGE,KAAK,CAAC,IACNC,IAAI,CAAC,QACLC,OAAO,CAAC,wDAAwD,OACjE,uEAAuE;KACtEA,OAAO,CAAC,SAAS,SACpB;AAEJ;AAqGA,OAAO,SAASC,YACdC,OAA8B;IAE9B,MAAM,EACJC,IAAI,EACJC,OAAO,QAAQ,EACfR,KAAK,EACLS,YAAYX,iBAAiB,EAC7BY,UAAU,EACX,GAAGJ;IAEJ,8EAA8E;IAC9E,+CAA+C;IAC/C,sBAAsB;IACtB,sBAAsB;IACtB,IAAIK;IACJ,OAAOd,OAAO;QACZW;QACAD;QACAP;QACAS;QACAC;QACAE,QAAOZ,KAAK,EAAEa,KAAK;YACjB,OACEA,MAAMC,MAAM,GAAG,KAAK,AAACH,CAAAA,WAAWZ,kBAAkBC,MAAK,EAAGe,IAAI,CAACF;QAEnE;IACF;AACF"}
|
|
@@ -2,9 +2,10 @@ import { type TextExtractor } from "../types.js";
|
|
|
2
2
|
import { type BaseSearchOptions } from "./types.js";
|
|
3
3
|
/**
|
|
4
4
|
* @since 6.0.0
|
|
5
|
+
* @since 6.2.0 Added support for `item.name` and `item.label`.
|
|
5
6
|
* @internal
|
|
6
7
|
*/
|
|
7
|
-
export declare const defaultExtractor: (
|
|
8
|
+
export declare const defaultExtractor: (usageName: string, propName?: string) => (item: unknown) => string;
|
|
8
9
|
/**
|
|
9
10
|
* @internal
|
|
10
11
|
* @since 6.0.0
|
package/dist/searching/utils.js
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
import { toSearchQuery } from "./toSearchQuery.js";
|
|
2
2
|
/**
|
|
3
3
|
* @since 6.0.0
|
|
4
|
+
* @since 6.2.0 Added support for `item.name` and `item.label`.
|
|
4
5
|
* @internal
|
|
5
|
-
*/ export const defaultExtractor = (
|
|
6
|
+
*/ export const defaultExtractor = (usageName, propName = "extractor")=>(item)=>{
|
|
6
7
|
if (typeof item === "string") {
|
|
7
8
|
return item;
|
|
8
9
|
}
|
|
9
|
-
|
|
10
|
+
if (item && typeof item === "object") {
|
|
11
|
+
if ("label" in item && typeof item.label === "string") {
|
|
12
|
+
return item.label;
|
|
13
|
+
}
|
|
14
|
+
if ("name" in item && typeof item.name === "string") {
|
|
15
|
+
return item.name;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
throw new Error(`\`${usageName}\` requires the \`${propName}\` prop for lists that do not contain strings or known object types.`);
|
|
10
19
|
};
|
|
11
20
|
/**
|
|
12
21
|
* @internal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/searching/utils.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { toSearchQuery } from \"./toSearchQuery.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @internal\n */\nexport const defaultExtractor =\n (
|
|
1
|
+
{"version":3,"sources":["../../src/searching/utils.ts"],"sourcesContent":["import { type TextExtractor } from \"../types.js\";\nimport { toSearchQuery } from \"./toSearchQuery.js\";\nimport { type BaseSearchOptions } from \"./types.js\";\n\n/**\n * @since 6.0.0\n * @since 6.2.0 Added support for `item.name` and `item.label`.\n * @internal\n */\nexport const defaultExtractor =\n (usageName: string, propName = \"extractor\") =>\n (item: unknown): string => {\n if (typeof item === \"string\") {\n return item;\n }\n\n if (item && typeof item === \"object\") {\n if (\"label\" in item && typeof item.label === \"string\") {\n return item.label;\n }\n\n if (\"name\" in item && typeof item.name === \"string\") {\n return item.name;\n }\n }\n\n throw new Error(\n `\\`${usageName}\\` requires the \\`${propName}\\` prop for lists that do not contain strings or known object types.`\n );\n };\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface SearchOptions<T> extends BaseSearchOptions<T> {\n type: \"search\" | \"filter\";\n filter: (query: string, value: string) => boolean;\n extractor: TextExtractor<T>;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport function search<T>(\n options: SearchOptions<T>\n): readonly T[] | T | undefined {\n const { list, type, query, filter, extractor, whitespace = \"keep\" } = options;\n const fallback = type === \"search\" ? undefined : list;\n if (!list.length) {\n return fallback;\n }\n\n const q = toSearchQuery(query, whitespace);\n if (!q) {\n return fallback;\n }\n\n const fn = type === \"search\" ? \"find\" : \"filter\";\n return list[fn]((item) =>\n filter(q, toSearchQuery(extractor(item), whitespace))\n );\n}\n"],"names":["toSearchQuery","defaultExtractor","usageName","propName","item","label","name","Error","search","options","list","type","query","filter","extractor","whitespace","fallback","undefined","length","q","fn"],"mappings":"AACA,SAASA,aAAa,QAAQ,qBAAqB;AAGnD;;;;CAIC,GACD,OAAO,MAAMC,mBACX,CAACC,WAAmBC,WAAW,WAAW,GAC1C,CAACC;QACC,IAAI,OAAOA,SAAS,UAAU;YAC5B,OAAOA;QACT;QAEA,IAAIA,QAAQ,OAAOA,SAAS,UAAU;YACpC,IAAI,WAAWA,QAAQ,OAAOA,KAAKC,KAAK,KAAK,UAAU;gBACrD,OAAOD,KAAKC,KAAK;YACnB;YAEA,IAAI,UAAUD,QAAQ,OAAOA,KAAKE,IAAI,KAAK,UAAU;gBACnD,OAAOF,KAAKE,IAAI;YAClB;QACF;QAEA,MAAM,IAAIC,MACR,CAAC,EAAE,EAAEL,UAAU,kBAAkB,EAAEC,SAAS,oEAAoE,CAAC;IAErH,EAAE;AAYJ;;;CAGC,GACD,OAAO,SAASK,OACdC,OAAyB;IAEzB,MAAM,EAAEC,IAAI,EAAEC,IAAI,EAAEC,KAAK,EAAEC,MAAM,EAAEC,SAAS,EAAEC,aAAa,MAAM,EAAE,GAAGN;IACtE,MAAMO,WAAWL,SAAS,WAAWM,YAAYP;IACjD,IAAI,CAACA,KAAKQ,MAAM,EAAE;QAChB,OAAOF;IACT;IAEA,MAAMG,IAAInB,cAAcY,OAAOG;IAC/B,IAAI,CAACI,GAAG;QACN,OAAOH;IACT;IAEA,MAAMI,KAAKT,SAAS,WAAW,SAAS;IACxC,OAAOD,IAAI,CAACU,GAAG,CAAC,CAAChB,OACfS,OAAOM,GAAGnB,cAAcc,UAAUV,OAAOW;AAE7C"}
|
package/dist/snackbar/Toast.d.ts
CHANGED
|
@@ -71,7 +71,7 @@ export interface ConfigurableToastProps extends HTMLAttributes<HTMLDivElement>,
|
|
|
71
71
|
* Any additional props that should be provided to the `<div>` that surrounds
|
|
72
72
|
* the toast `children`.
|
|
73
73
|
*/
|
|
74
|
-
contentProps?: PropsWithRef<ToastContentProps
|
|
74
|
+
contentProps?: PropsWithRef<ToastContentProps>;
|
|
75
75
|
/**
|
|
76
76
|
* Set this to `true` if the `children` for the toast should no longer be
|
|
77
77
|
* wrapped in an additional `<div>` that applies some toast layout styles.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AriaRole,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n forwardRef,\n isValidElement,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionCallbacks,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { toast } from \"./toastStyles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-toast-color\"?: string;\n \"--rmd-toast-background-color\"?: string;\n \"--rmd-toast-offset\"?: string | number;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableToastProps\n extends HTMLAttributes<HTMLDivElement>,\n TransitionCallbacks {\n /**\n * Note: this default value will only be generated in the `Toast` component.\n *\n * @defaultValue `\"toast-\" + useId()`\n */\n id?: string;\n\n /**\n * Note: This is set while creating the toast.\n *\n * @defaultValue `visibleTime === null ? \"alert\" : \"status\"`\n */\n role?: AriaRole;\n\n /**\n * @defaultValue `\"surface\"`\n */\n theme?: BackgroundColor;\n\n /**\n * Set this to `true` to stack the content above the {@link action}. It is not\n * recommended to enable this prop if the {@link closeButton} is enabled.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * If this is not provided, a `ResizeObserver` will be used to determine if\n * there are multiple lines of content.\n */\n multiline?: boolean;\n\n /**\n * When this is a string or React element, it will be rendered as the\n * `children` within a `Button`\n */\n action?: ButtonProps | ReactElement | string;\n\n /**\n * This can be used to replace the custom action button behavior.\n */\n actionButton?: ReactNode;\n\n /**\n * @defaultValue `getIcon(\"close\")`\n */\n closeIcon?: ReactNode;\n\n /**\n * Set this to `true` if a close button should be rendered to the right of the\n * `children`.\n *\n * @defaultValue `!!closeButtonProps`\n */\n closeButton?: boolean;\n\n /**\n * Use this prop to override most of the close button behavior. The\n */\n closeButtonProps?: ButtonProps;\n\n /**\n * Any additional props that should be provided to the `<div>` that surrounds\n * the toast `children`.\n */\n contentProps?: PropsWithRef<ToastContentProps
|
|
1
|
+
{"version":3,"sources":["../../src/snackbar/Toast.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n type AriaRole,\n type HTMLAttributes,\n type ReactElement,\n type ReactNode,\n forwardRef,\n isValidElement,\n} from \"react\";\n\nimport { type ButtonProps } from \"../button/Button.js\";\nimport { type BackgroundColor } from \"../cssUtils.js\";\nimport {\n type CSSTransitionClassNames,\n type TransitionCallbacks,\n type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { useScaleTransition } from \"../transition/useScaleTransition.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { ToastActionButton } from \"./ToastActionButton.js\";\nimport { ToastCloseButton } from \"./ToastCloseButton.js\";\nimport { ToastContent, type ToastContentProps } from \"./ToastContent.js\";\nimport { toast } from \"./toastStyles.js\";\n\ndeclare module \"react\" {\n interface CSSProperties {\n \"--rmd-toast-color\"?: string;\n \"--rmd-toast-background-color\"?: string;\n \"--rmd-toast-offset\"?: string | number;\n }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ConfigurableToastProps\n extends HTMLAttributes<HTMLDivElement>,\n TransitionCallbacks {\n /**\n * Note: this default value will only be generated in the `Toast` component.\n *\n * @defaultValue `\"toast-\" + useId()`\n */\n id?: string;\n\n /**\n * Note: This is set while creating the toast.\n *\n * @defaultValue `visibleTime === null ? \"alert\" : \"status\"`\n */\n role?: AriaRole;\n\n /**\n * @defaultValue `\"surface\"`\n */\n theme?: BackgroundColor;\n\n /**\n * Set this to `true` to stack the content above the {@link action}. It is not\n * recommended to enable this prop if the {@link closeButton} is enabled.\n *\n * @defaultValue `false`\n */\n stacked?: boolean;\n\n /**\n * If this is not provided, a `ResizeObserver` will be used to determine if\n * there are multiple lines of content.\n */\n multiline?: boolean;\n\n /**\n * When this is a string or React element, it will be rendered as the\n * `children` within a `Button`\n */\n action?: ButtonProps | ReactElement | string;\n\n /**\n * This can be used to replace the custom action button behavior.\n */\n actionButton?: ReactNode;\n\n /**\n * @defaultValue `getIcon(\"close\")`\n */\n closeIcon?: ReactNode;\n\n /**\n * Set this to `true` if a close button should be rendered to the right of the\n * `children`.\n *\n * @defaultValue `!!closeButtonProps`\n */\n closeButton?: boolean;\n\n /**\n * Use this prop to override most of the close button behavior. The\n */\n closeButtonProps?: ButtonProps;\n\n /**\n * Any additional props that should be provided to the `<div>` that surrounds\n * the toast `children`.\n */\n contentProps?: PropsWithRef<ToastContentProps>;\n\n /**\n * Set this to `true` if the `children` for the toast should no longer be\n * wrapped in an additional `<div>` that applies some toast layout styles.\n * This should normally only be used for custom `Toast` implementations.\n *\n * @see the `Snackbar`'s `renderToast` prop for an example.\n */\n disableToastContent?: boolean;\n\n /**\n * The toast's transition timeout for entering and exiting. This is **not**\n * how long the toast should remain visible.\n *\n * @defaultValue `SCALE_TIMEOUT`\n */\n timeout?: TransitionTimeout;\n\n /**\n * The toast's transition class names for entering and exiting.\n *\n * @defaultValue `SCALE_CLASSNAMES`\n */\n classNames?: CSSTransitionClassNames;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ToastProps extends ConfigurableToastProps {\n paused?: boolean;\n visible: boolean;\n}\n\n/**\n * **Client Component**\n *\n * This component is just used for toast styling and does not implement any of\n * the visibility behavior.\n *\n * @see {@link https://react-md.dev/components/snackbar | Snackbar Demos}\n * @since 6.0.0\n */\nexport const Toast = forwardRef<HTMLDivElement, ToastProps>(\n function Toast(props, ref) {\n const {\n id: propId,\n className,\n timeout,\n classNames,\n theme = \"surface\",\n action: propAction,\n actionButton: propActionButton,\n paused,\n visible,\n closeIcon: propCloseIcon,\n closeButtonProps,\n closeButton = !!closeButtonProps,\n contentProps,\n disableToastContent,\n stacked,\n multiline,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n children,\n ...remaining\n } = props;\n const id = useEnsuredId(propId, \"toast\");\n\n let actionButton = propActionButton;\n if (propAction) {\n let overrides: ButtonProps = {};\n let buttonChildren: ReactNode;\n // have to use `any` to correctly filter out all react elements\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (isValidElement<any>(propAction) || typeof propAction !== \"object\") {\n buttonChildren = propAction;\n } else {\n ({ children: buttonChildren, ...overrides } = propAction);\n }\n\n actionButton = (\n <ToastActionButton\n theme={theme === \"surface\" ? \"secondary\" : \"clear\"}\n reordered={stacked && closeButton}\n {...overrides}\n >\n {buttonChildren}\n </ToastActionButton>\n );\n }\n\n let closeIcon = propCloseIcon;\n if (typeof closeButtonProps?.children !== \"undefined\") {\n closeIcon = closeButtonProps.children;\n }\n\n const action = !!actionButton;\n const reordered = stacked && action && closeButton;\n const { elementProps, rendered } = useScaleTransition({\n appear: true,\n nodeRef: ref,\n className: toast({\n className,\n theme,\n action,\n paused,\n stacked,\n reordered,\n closeButton,\n }),\n timeout,\n classNames,\n onEnter,\n onEntering,\n onEntered,\n onExit,\n onExiting,\n onExited,\n temporary: true,\n transitionIn: visible,\n exitedHidden: true,\n });\n\n // this might get rid of the weird popping-back-in for a split second\n // that sometimes happens on mobile firefox\n if (!rendered) {\n return null;\n }\n\n return (\n <div {...remaining} {...elementProps} id={id}>\n <ToastContent\n action={action}\n stacked={stacked}\n multiline={multiline}\n closeButton={closeButton}\n disableWrapper={disableToastContent}\n {...contentProps}\n >\n {children}\n </ToastContent>\n {actionButton}\n {closeButton && (\n <ToastCloseButton reordered={reordered} {...closeButtonProps}>\n {closeIcon}\n </ToastCloseButton>\n )}\n </div>\n );\n }\n);\n"],"names":["forwardRef","isValidElement","useScaleTransition","useEnsuredId","ToastActionButton","ToastCloseButton","ToastContent","toast","Toast","props","ref","id","propId","className","timeout","classNames","theme","action","propAction","actionButton","propActionButton","paused","visible","closeIcon","propCloseIcon","closeButtonProps","closeButton","contentProps","disableToastContent","stacked","multiline","onEnter","onEntering","onEntered","onExit","onExiting","onExited","children","remaining","overrides","buttonChildren","reordered","elementProps","rendered","appear","nodeRef","temporary","transitionIn","exitedHidden","div","disableWrapper"],"mappings":"AAAA;;AAEA,SAKEA,UAAU,EACVC,cAAc,QACT,QAAQ;AASf,SAASC,kBAAkB,QAAQ,sCAAsC;AAEzE,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,YAAY,QAAgC,oBAAoB;AACzE,SAASC,KAAK,QAAQ,mBAAmB;AAqHzC;;;;;;;;CAQC,GACD,OAAO,MAAMC,sBAAQR,WACnB,SAASQ,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,IAAIC,MAAM,EACVC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,QAAQ,SAAS,EACjBC,QAAQC,UAAU,EAClBC,cAAcC,gBAAgB,EAC9BC,MAAM,EACNC,OAAO,EACPC,WAAWC,aAAa,EACxBC,gBAAgB,EAChBC,cAAc,CAAC,CAACD,gBAAgB,EAChCE,YAAY,EACZC,mBAAmB,EACnBC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,SAAS,EACTC,QAAQ,EACRC,QAAQ,EACR,GAAGC,WACJ,GAAG7B;IACJ,MAAME,KAAKR,aAAaS,QAAQ;IAEhC,IAAIO,eAAeC;IACnB,IAAIF,YAAY;QACd,IAAIqB,YAAyB,CAAC;QAC9B,IAAIC;QACJ,+DAA+D;QAC/D,8DAA8D;QAC9D,kBAAIvC,eAAoBiB,eAAe,OAAOA,eAAe,UAAU;YACrEsB,iBAAiBtB;QACnB,OAAO;YACJ,CAAA,EAAEmB,UAAUG,cAAc,EAAE,GAAGD,WAAW,GAAGrB,UAAS;QACzD;QAEAC,6BACE,KAACf;YACCY,OAAOA,UAAU,YAAY,cAAc;YAC3CyB,WAAWZ,WAAWH;YACrB,GAAGa,SAAS;sBAEZC;;IAGP;IAEA,IAAIjB,YAAYC;IAChB,IAAI,OAAOC,kBAAkBY,aAAa,aAAa;QACrDd,YAAYE,iBAAiBY,QAAQ;IACvC;IAEA,MAAMpB,SAAS,CAAC,CAACE;IACjB,MAAMsB,YAAYZ,WAAWZ,UAAUS;IACvC,MAAM,EAAEgB,YAAY,EAAEC,QAAQ,EAAE,GAAGzC,mBAAmB;QACpD0C,QAAQ;QACRC,SAASnC;QACTG,WAAWN,MAAM;YACfM;YACAG;YACAC;YACAI;YACAQ;YACAY;YACAf;QACF;QACAZ;QACAC;QACAgB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAU,WAAW;QACXC,cAAczB;QACd0B,cAAc;IAChB;IAEA,qEAAqE;IACrE,2CAA2C;IAC3C,IAAI,CAACL,UAAU;QACb,OAAO;IACT;IAEA,qBACE,MAACM;QAAK,GAAGX,SAAS;QAAG,GAAGI,YAAY;QAAE/B,IAAIA;;0BACxC,KAACL;gBACCW,QAAQA;gBACRY,SAASA;gBACTC,WAAWA;gBACXJ,aAAaA;gBACbwB,gBAAgBtB;gBACf,GAAGD,YAAY;0BAEfU;;YAEFlB;YACAO,6BACC,KAACrB;gBAAiBoC,WAAWA;gBAAY,GAAGhB,gBAAgB;0BACzDF;;;;AAKX,GACA"}
|
|
@@ -89,7 +89,7 @@ export interface TableCellProps extends TableCellAttributes, TableCellOptions {
|
|
|
89
89
|
*
|
|
90
90
|
* @since 6.0.0
|
|
91
91
|
*/
|
|
92
|
-
contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement
|
|
92
|
+
contentProps?: PropsWithRef<ButtonHTMLAttributes<HTMLButtonElement>>;
|
|
93
93
|
/**
|
|
94
94
|
* Any additional props to pass to the `IconRotator` when the `aria-sort` prop
|
|
95
95
|
* has been provided.
|