@superdispatch/ui 0.41.0 → 0.43.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-node/index.js +445 -349
- package/dist-node/index.js.map +1 -1
- package/dist-src/app-drawer/AppDrawer.js +78 -0
- package/dist-src/app-drawer/constants.js +1 -0
- package/dist-src/avatar-button/AvatarButton.js +5 -2
- package/dist-src/card-button/CardButton.js +8 -5
- package/dist-src/description-list/DescriptionList.js +4 -4
- package/dist-src/drawer/DrawerActions.js +5 -2
- package/dist-src/drawer/DrawerContent.js +2 -1
- package/dist-src/drawer/DrawerList.js +1 -1
- package/dist-src/drawer/DrawerOverrides.js +1 -0
- package/dist-src/drawer/DrawerTitle.js +5 -2
- package/dist-src/index.js +1 -0
- package/dist-src/info-card/InfoCard.js +5 -2
- package/dist-src/overflow-text/OverflowText.js +4 -2
- package/dist-src/snackbar/SnackbarContent.js +4 -4
- package/dist-src/tag/Tag.js +2 -14
- package/dist-src/tiles/Tiles.js +21 -3
- package/dist-types/index.d.ts +36 -1
- package/dist-web/index.js +439 -344
- package/dist-web/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
|
+
import { Drawer as MuiDrawer, IconButton } from '@material-ui/core';
|
|
3
|
+
import { ArrowBack as BackIcon, Close as CloseIcon } from '@material-ui/icons';
|
|
4
|
+
import styled from 'styled-components';
|
|
5
|
+
import { Button } from "../button/Button.js";
|
|
6
|
+
import { DrawerActions } from "../drawer/DrawerActions.js";
|
|
7
|
+
import { DrawerContent } from "../drawer/DrawerContent.js";
|
|
8
|
+
import { DrawerTitle } from "../drawer/DrawerTitle.js";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
|
+
var StyledActionsLayout = /*#__PURE__*/styled.div.withConfig({
|
|
11
|
+
displayName: "AppDrawer__StyledActionsLayout",
|
|
12
|
+
componentId: "SD__sc-1ivw8lf-0"
|
|
13
|
+
})(["display:flex;gap:16px;"]);
|
|
14
|
+
var sizeToMaxWidthMap = {
|
|
15
|
+
md: '432px',
|
|
16
|
+
lg: '600px',
|
|
17
|
+
xl: '746px',
|
|
18
|
+
xxl: '900px'
|
|
19
|
+
};
|
|
20
|
+
export function AppDrawer(_ref) {
|
|
21
|
+
var {
|
|
22
|
+
title,
|
|
23
|
+
subtitle,
|
|
24
|
+
children,
|
|
25
|
+
open,
|
|
26
|
+
onClose,
|
|
27
|
+
onBack,
|
|
28
|
+
primaryAction,
|
|
29
|
+
secondaryAction,
|
|
30
|
+
disableContentPadding = false,
|
|
31
|
+
disableCloseButton = false,
|
|
32
|
+
size = 'md'
|
|
33
|
+
} = _ref;
|
|
34
|
+
return /*#__PURE__*/_jsxs(MuiDrawer, {
|
|
35
|
+
open: open,
|
|
36
|
+
onClose: onClose,
|
|
37
|
+
anchor: "right",
|
|
38
|
+
PaperProps: {
|
|
39
|
+
style: {
|
|
40
|
+
width: '100%',
|
|
41
|
+
maxWidth: sizeToMaxWidthMap[size]
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
children: [/*#__PURE__*/_jsx(DrawerTitle, {
|
|
45
|
+
title: title,
|
|
46
|
+
subtitle: subtitle,
|
|
47
|
+
startAction: onBack && /*#__PURE__*/_jsx(IconButton, {
|
|
48
|
+
onClick: onBack,
|
|
49
|
+
edge: "start",
|
|
50
|
+
children: /*#__PURE__*/_jsx(BackIcon, {
|
|
51
|
+
color: "action"
|
|
52
|
+
})
|
|
53
|
+
}),
|
|
54
|
+
endAction: !disableCloseButton && /*#__PURE__*/_jsx(IconButton, {
|
|
55
|
+
onClick: onClose,
|
|
56
|
+
children: /*#__PURE__*/_jsx(CloseIcon, {
|
|
57
|
+
color: "action"
|
|
58
|
+
})
|
|
59
|
+
})
|
|
60
|
+
}), disableContentPadding ? children : /*#__PURE__*/_jsx(DrawerContent, {
|
|
61
|
+
children: children
|
|
62
|
+
}), (primaryAction || secondaryAction) && /*#__PURE__*/_jsx(DrawerActions, {
|
|
63
|
+
children: /*#__PURE__*/_jsxs(StyledActionsLayout, {
|
|
64
|
+
children: [primaryAction && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
|
|
65
|
+
type: "button",
|
|
66
|
+
variant: "contained"
|
|
67
|
+
}, primaryAction), {}, {
|
|
68
|
+
children: primaryAction.label
|
|
69
|
+
})), secondaryAction && /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
|
|
70
|
+
type: "button",
|
|
71
|
+
variant: "outlined"
|
|
72
|
+
}, secondaryAction), {}, {
|
|
73
|
+
children: secondaryAction.label
|
|
74
|
+
}))]
|
|
75
|
+
})
|
|
76
|
+
})]
|
|
77
|
+
});
|
|
78
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export var DRAWER_SIZE_VALUES = ['md', 'lg', 'xl', 'xxl'];
|
|
@@ -4,7 +4,7 @@ var _excluded = ["size", "icon", "isLoading", "classes", "disabled", "avatarRef"
|
|
|
4
4
|
_excluded2 = ["button", "overlay", "progress", "withIcon", "sizeLarge"];
|
|
5
5
|
import { Avatar, ButtonBase, CircularProgress } from '@material-ui/core';
|
|
6
6
|
import { makeStyles } from '@material-ui/styles';
|
|
7
|
-
import clsx from 'clsx';
|
|
7
|
+
import { clsx } from 'clsx';
|
|
8
8
|
import { forwardRef } from 'react';
|
|
9
9
|
import { ColorDynamic } from "../theme/Color.js";
|
|
10
10
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
@@ -134,7 +134,10 @@ export var AvatarButton = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
134
134
|
"aria-busy": isLoading,
|
|
135
135
|
"aria-disabled": disabled,
|
|
136
136
|
disabled: disabled || isLoading,
|
|
137
|
-
className: clsx(className, buttonClassName,
|
|
137
|
+
className: clsx(className, buttonClassName, {
|
|
138
|
+
[withIconClassName]: !!icon,
|
|
139
|
+
[sizeLargeClassName]: size === 'large'
|
|
140
|
+
}),
|
|
138
141
|
children: [/*#__PURE__*/_jsx(Avatar, {
|
|
139
142
|
ref: avatarRef,
|
|
140
143
|
classes: avatarClasses,
|
|
@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["hint", "size", "error", "classes", "className", "children", "endIcon", "startIcon", "disabled"];
|
|
4
4
|
import { ButtonBase, Typography } from '@material-ui/core';
|
|
5
5
|
import { makeStyles } from '@material-ui/styles';
|
|
6
|
-
import clsx from 'clsx';
|
|
6
|
+
import { clsx } from 'clsx';
|
|
7
7
|
import { forwardRef } from 'react';
|
|
8
8
|
import { ColorDynamic } from "../theme/Color.js";
|
|
9
9
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
@@ -100,10 +100,13 @@ export var CardButton = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
100
100
|
return /*#__PURE__*/_jsx(ButtonBase, _objectSpread(_objectSpread({}, props), {}, {
|
|
101
101
|
ref: ref,
|
|
102
102
|
disabled: disabled,
|
|
103
|
-
className: clsx(styles.root,
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
103
|
+
className: clsx(styles.root, {
|
|
104
|
+
[styles.disabled]: disabled,
|
|
105
|
+
[styles.error]: !disabled && error,
|
|
106
|
+
[styles.primary]: !disabled && !error,
|
|
107
|
+
[styles.sizeSmall]: size === 'small',
|
|
108
|
+
[styles.sizeLarge]: size === 'large'
|
|
109
|
+
}, className),
|
|
107
110
|
children: error ? /*#__PURE__*/_jsxs(Typography, {
|
|
108
111
|
variant: "h4",
|
|
109
112
|
color: "inherit",
|
|
@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["size"];
|
|
4
4
|
import { SvgIcon, Typography } from '@material-ui/core';
|
|
5
5
|
import { makeStyles } from '@material-ui/styles';
|
|
6
|
-
import clsx from 'clsx';
|
|
6
|
+
import { clsx } from 'clsx';
|
|
7
7
|
import { forwardRef } from 'react';
|
|
8
8
|
import { OverflowText } from "../overflow-text/OverflowText.js";
|
|
9
9
|
import { ColorDynamic } from "../theme/Color.js";
|
|
@@ -59,9 +59,9 @@ export var DescriptionList = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
59
59
|
ref: ref,
|
|
60
60
|
"data-size": size,
|
|
61
61
|
className: clsx(styles.list, {
|
|
62
|
-
'small'
|
|
63
|
-
'large'
|
|
64
|
-
}
|
|
62
|
+
[styles.listSmall]: size === 'small',
|
|
63
|
+
[styles.listLarge]: size === 'large'
|
|
64
|
+
})
|
|
65
65
|
}));
|
|
66
66
|
});
|
|
67
67
|
|
|
@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["children", "className"];
|
|
4
4
|
import { AppBar, Toolbar } from '@material-ui/core';
|
|
5
5
|
import { makeStyles } from '@material-ui/styles';
|
|
6
|
-
import clsx from 'clsx';
|
|
6
|
+
import { clsx } from 'clsx';
|
|
7
7
|
import { forwardRef } from 'react';
|
|
8
8
|
import { ColorDynamic } from "../theme/Color.js";
|
|
9
9
|
import { VisibilityObserver } from "../utils/VisibilityObserver.js";
|
|
@@ -36,6 +36,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
|
|
|
36
36
|
}), {
|
|
37
37
|
name: 'SD-DrawerActions'
|
|
38
38
|
});
|
|
39
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
39
40
|
export var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
|
|
40
41
|
var {
|
|
41
42
|
children,
|
|
@@ -53,7 +54,9 @@ export var DrawerActions = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
|
|
|
53
54
|
children: [/*#__PURE__*/_jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
|
|
54
55
|
ref: appBarRef,
|
|
55
56
|
position: "sticky",
|
|
56
|
-
className: clsx(className, styles.appBar,
|
|
57
|
+
className: clsx(className, styles.appBar, {
|
|
58
|
+
[styles.appBarSticky]: visibility === 'invisible'
|
|
59
|
+
}),
|
|
57
60
|
children: /*#__PURE__*/_jsx(Toolbar, {
|
|
58
61
|
className: styles.toolbar,
|
|
59
62
|
children: children
|
|
@@ -2,7 +2,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["className"];
|
|
4
4
|
import { makeStyles } from '@material-ui/styles';
|
|
5
|
-
import clsx from 'clsx';
|
|
5
|
+
import { clsx } from 'clsx';
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
7
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
8
8
|
var useStyles = /*#__PURE__*/makeStyles(theme => ({
|
|
@@ -16,6 +16,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
|
|
|
16
16
|
}), {
|
|
17
17
|
name: 'SD-DrawerContent'
|
|
18
18
|
});
|
|
19
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
19
20
|
export var DrawerContent = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
20
21
|
var {
|
|
21
22
|
className
|
|
@@ -3,7 +3,7 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
|
3
3
|
var _excluded = ["className"];
|
|
4
4
|
import { List } from '@material-ui/core';
|
|
5
5
|
import { makeStyles } from '@material-ui/styles';
|
|
6
|
-
import clsx from 'clsx';
|
|
6
|
+
import { clsx } from 'clsx';
|
|
7
7
|
import { forwardRef } from 'react';
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
9
|
function listItemMixins(theme, space) {
|
|
@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["title", "titleTypographyProps", "subtitle", "subtitleTypographyProps", "startAction", "endAction", "className"];
|
|
4
4
|
import { AppBar, Grid, Toolbar, Typography } from '@material-ui/core';
|
|
5
5
|
import { makeStyles } from '@material-ui/styles';
|
|
6
|
-
import clsx from 'clsx';
|
|
6
|
+
import { clsx } from 'clsx';
|
|
7
7
|
import { forwardRef } from 'react';
|
|
8
8
|
import { ColorDynamic } from "../theme/Color.js";
|
|
9
9
|
import { VisibilityObserver } from "../utils/VisibilityObserver.js";
|
|
@@ -46,6 +46,7 @@ var useStyles = /*#__PURE__*/makeStyles(theme => ({
|
|
|
46
46
|
}), {
|
|
47
47
|
name: 'SD-DrawerTitle'
|
|
48
48
|
});
|
|
49
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
49
50
|
export var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
|
|
50
51
|
var {
|
|
51
52
|
title,
|
|
@@ -70,7 +71,9 @@ export var DrawerTitle = /*#__PURE__*/forwardRef((_ref, appBarRef) => {
|
|
|
70
71
|
}), /*#__PURE__*/_jsx(AppBar, _objectSpread(_objectSpread({}, props), {}, {
|
|
71
72
|
ref: appBarRef,
|
|
72
73
|
position: "sticky",
|
|
73
|
-
className: clsx(styles.appBar, className,
|
|
74
|
+
className: clsx(styles.appBar, className, {
|
|
75
|
+
[styles.appBarSticky]: visibility === 'invisible'
|
|
76
|
+
}),
|
|
74
77
|
children: /*#__PURE__*/_jsx(Toolbar, {
|
|
75
78
|
className: styles.toolbar,
|
|
76
79
|
children: /*#__PURE__*/_jsxs(Grid, {
|
package/dist-src/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export * from "./adaptive-toolbar/AdaptiveToolbar.js";
|
|
2
2
|
export * from "./adaptive-vertical-toolbar/AdaptiveVerticalToolbar.js";
|
|
3
|
+
export * from "./app-drawer/AppDrawer.js";
|
|
3
4
|
export * from "./avatar-button/AvatarButton.js";
|
|
4
5
|
export * from "./button/Button.js";
|
|
5
6
|
export * from "./card-button/CardButton.js";
|
|
@@ -4,7 +4,7 @@ var _excluded = ["size", "square", "classes", "children", "className", "CardCont
|
|
|
4
4
|
_excluded2 = ["content", "sizeLarge", "fullWidth"];
|
|
5
5
|
import { Card, CardContent } from '@material-ui/core';
|
|
6
6
|
import { makeStyles } from '@material-ui/styles';
|
|
7
|
-
import clsx from 'clsx';
|
|
7
|
+
import { clsx } from 'clsx';
|
|
8
8
|
import { forwardRef, useState } from 'react';
|
|
9
9
|
import { assignRef } from "../utils/mergeRefs.js";
|
|
10
10
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -57,7 +57,10 @@ export var InfoCard = /*#__PURE__*/forwardRef((_ref, _ref2) => {
|
|
|
57
57
|
setRootNode(node);
|
|
58
58
|
},
|
|
59
59
|
classes: styles,
|
|
60
|
-
className: clsx(className,
|
|
60
|
+
className: clsx(className, {
|
|
61
|
+
[sizeLargeClassName]: size === 'large',
|
|
62
|
+
[fullWidthClassName]: isFullWidth
|
|
63
|
+
}),
|
|
61
64
|
children: /*#__PURE__*/_jsx(CardContent, _objectSpread(_objectSpread({}, cardContentProps), {}, {
|
|
62
65
|
className: clsx(cardContentProps.className, contentClassName),
|
|
63
66
|
children: children
|
|
@@ -4,7 +4,7 @@ var _excluded = ["title", "enterDelay"],
|
|
|
4
4
|
_excluded2 = ["onClick", "children", "className", "disableUnderline", "TooltipProps"];
|
|
5
5
|
import { Tooltip, Typography } from '@material-ui/core';
|
|
6
6
|
import { makeStyles } from '@material-ui/styles';
|
|
7
|
-
import clsx from 'clsx';
|
|
7
|
+
import { clsx } from 'clsx';
|
|
8
8
|
import { forwardRef, useState } from 'react';
|
|
9
9
|
import { ColorDynamic } from "../theme/Color.js";
|
|
10
10
|
import { VisibilityObserver } from "../utils/VisibilityObserver.js";
|
|
@@ -68,7 +68,9 @@ export var OverflowText = /*#__PURE__*/forwardRef((_ref, rootRef) => {
|
|
|
68
68
|
setIsOpen(true);
|
|
69
69
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
|
|
70
70
|
},
|
|
71
|
-
className: clsx(styles.root,
|
|
71
|
+
className: clsx(styles.root, {
|
|
72
|
+
[styles.truncated]: !disableUnderline && visibility === 'invisible'
|
|
73
|
+
}, className),
|
|
72
74
|
children: [children, !!children && /*#__PURE__*/_jsx("span", {
|
|
73
75
|
ref: ref,
|
|
74
76
|
className: styles.sentinel
|
|
@@ -5,7 +5,7 @@ var _excluded = ["action", "children", "onClose", "className", "classes", "varia
|
|
|
5
5
|
import { Grid, IconButton, SnackbarContent as MuiSnackbarContent } from '@material-ui/core';
|
|
6
6
|
import { CheckCircle, Close, Error } from '@material-ui/icons';
|
|
7
7
|
import { makeStyles } from '@material-ui/styles';
|
|
8
|
-
import clsx from 'clsx';
|
|
8
|
+
import { clsx } from 'clsx';
|
|
9
9
|
import { forwardRef } from 'react';
|
|
10
10
|
import styled from 'styled-components';
|
|
11
11
|
import { ColorDynamic } from "../theme/Color.js";
|
|
@@ -82,9 +82,9 @@ export var SnackbarContent = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
82
82
|
ref: ref,
|
|
83
83
|
classes: styles,
|
|
84
84
|
className: clsx(className, {
|
|
85
|
-
'error'
|
|
86
|
-
'success'
|
|
87
|
-
}
|
|
85
|
+
[variantError]: variant === 'error',
|
|
86
|
+
[variantSuccess]: variant === 'success'
|
|
87
|
+
}),
|
|
88
88
|
message: /*#__PURE__*/_jsxs(_Fragment, {
|
|
89
89
|
children: [Icon && /*#__PURE__*/_jsx(Icon, {
|
|
90
90
|
className: icon
|
package/dist-src/tag/Tag.js
CHANGED
|
@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
|
|
|
3
3
|
var _excluded = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
|
|
4
4
|
import { Typography } from '@material-ui/core';
|
|
5
5
|
import { makeStyles } from '@material-ui/styles';
|
|
6
|
-
import
|
|
6
|
+
import { clsx } from 'clsx';
|
|
7
7
|
import { forwardRef } from 'react';
|
|
8
8
|
import { Color, ColorDynamic } from "../theme/Color.js";
|
|
9
9
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
@@ -109,19 +109,7 @@ export var Tag = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
109
109
|
noWrap: noWrap,
|
|
110
110
|
component: component,
|
|
111
111
|
variant: fontWeight === 'bold' ? 'body1' : 'body2',
|
|
112
|
-
className:
|
|
113
|
-
'grey': styles.colorGrey,
|
|
114
|
-
'dark': styles.colorDark,
|
|
115
|
-
'blue': styles.colorBlue,
|
|
116
|
-
'green': styles.colorGreen,
|
|
117
|
-
'purple': styles.colorPurple,
|
|
118
|
-
'red': styles.colorRed,
|
|
119
|
-
'teal': styles.colorTeal,
|
|
120
|
-
'yellow': styles.colorYellow
|
|
121
|
-
}[color], {
|
|
122
|
-
'subtle': styles.variantSubtle,
|
|
123
|
-
'bold': styles.variantBold
|
|
124
|
-
}[variant]),
|
|
112
|
+
className: clsx(styles.root, color === 'grey' && styles.colorGrey, color === 'dark' && styles.colorDark, color === 'blue' && styles.colorBlue, color === 'green' && styles.colorGreen, color === 'purple' && styles.colorPurple, color === 'red' && styles.colorRed, color === 'teal' && styles.colorTeal, color === 'yellow' && styles.colorYellow, variant === 'subtle' && styles.variantSubtle, variant === 'bold' && styles.variantBold, className),
|
|
125
113
|
children: children
|
|
126
114
|
}));
|
|
127
115
|
});
|
package/dist-src/tiles/Tiles.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { makeStyles } from '@material-ui/styles';
|
|
2
|
-
import clsx from 'clsx';
|
|
2
|
+
import { clsx } from 'clsx';
|
|
3
3
|
import { forwardRef } from 'react';
|
|
4
4
|
import flattenChildren from 'react-keyed-flatten-children';
|
|
5
5
|
import { useResponsivePropRecord } from "../props/ResponsiveProp.js";
|
|
@@ -74,11 +74,29 @@ export var Tiles = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
74
74
|
var columns = useResponsivePropRecord(columnsProp);
|
|
75
75
|
return /*#__PURE__*/_jsx("div", {
|
|
76
76
|
ref: ref,
|
|
77
|
-
className: clsx(styles.root,
|
|
77
|
+
className: clsx(styles.root, {
|
|
78
|
+
[styles.space1]: space === 1,
|
|
79
|
+
[styles.space2]: space === 2,
|
|
80
|
+
[styles.space3]: space === 3,
|
|
81
|
+
[styles.space4]: space === 4,
|
|
82
|
+
[styles.space5]: space === 5,
|
|
83
|
+
[styles.space6]: space === 6,
|
|
84
|
+
[styles.space7]: space === 7,
|
|
85
|
+
[styles.space8]: space === 8,
|
|
86
|
+
[styles.space9]: space === 9,
|
|
87
|
+
[styles.space10]: space === 10
|
|
88
|
+
}),
|
|
78
89
|
children: /*#__PURE__*/_jsx("div", {
|
|
79
90
|
className: styles.container,
|
|
80
91
|
children: flattenChildren(children).map((child, idx) => /*#__PURE__*/_jsx("div", {
|
|
81
|
-
className: clsx(styles.child,
|
|
92
|
+
className: clsx(styles.child, {
|
|
93
|
+
[styles.columns1]: columns === 1,
|
|
94
|
+
[styles.columns2]: columns === 2,
|
|
95
|
+
[styles.columns3]: columns === 3,
|
|
96
|
+
[styles.columns4]: columns === 4,
|
|
97
|
+
[styles.columns5]: columns === 5,
|
|
98
|
+
[styles.columns6]: columns === 6
|
|
99
|
+
}),
|
|
82
100
|
children: /*#__PURE__*/_jsx("div", {
|
|
83
101
|
className: styles.childContainer,
|
|
84
102
|
children: child
|
package/dist-types/index.d.ts
CHANGED
|
@@ -53,6 +53,38 @@ interface AdaptiveVerticalToolbarProps extends RefAttributes<HTMLDivElement> {
|
|
|
53
53
|
}
|
|
54
54
|
declare const AdaptiveVerticalToolbar: ForwardRefExoticComponent<AdaptiveVerticalToolbarProps>;
|
|
55
55
|
|
|
56
|
+
declare const DRAWER_SIZE_VALUES: readonly ["md", "lg", "xl", "xxl"];
|
|
57
|
+
|
|
58
|
+
declare type AppDrawerSize = typeof DRAWER_SIZE_VALUES[number];
|
|
59
|
+
interface DrawerActionDef extends Omit<ButtonProps, 'variant'> {
|
|
60
|
+
label: string;
|
|
61
|
+
}
|
|
62
|
+
interface AppDrawerProps {
|
|
63
|
+
title: string;
|
|
64
|
+
subtitle?: string;
|
|
65
|
+
children: React.ReactNode;
|
|
66
|
+
primaryAction?: DrawerActionDef;
|
|
67
|
+
secondaryAction?: DrawerActionDef;
|
|
68
|
+
size?: AppDrawerSize;
|
|
69
|
+
/**
|
|
70
|
+
* By default renders the children with content
|
|
71
|
+
* padding wrapper as it's the most common use case.
|
|
72
|
+
*/
|
|
73
|
+
disableContentPadding?: boolean;
|
|
74
|
+
/**
|
|
75
|
+
* By default renders the close button in the header.
|
|
76
|
+
* Set to true to hide it.
|
|
77
|
+
*/
|
|
78
|
+
disableCloseButton?: boolean;
|
|
79
|
+
/**
|
|
80
|
+
* Renders a back button in the header
|
|
81
|
+
*/
|
|
82
|
+
onBack?: () => void;
|
|
83
|
+
open: boolean;
|
|
84
|
+
onClose: () => void;
|
|
85
|
+
}
|
|
86
|
+
declare function AppDrawer({ title, subtitle, children, open, onClose, onBack, primaryAction, secondaryAction, disableContentPadding, disableCloseButton, size, }: AppDrawerProps): JSX.Element;
|
|
87
|
+
|
|
56
88
|
declare type AvatarButtonClassKey = 'button' | 'overlay' | 'progress' | 'withIcon' | 'sizeLarge' | Exclude<AvatarClassKey, 'circle'>;
|
|
57
89
|
interface AvatarButtonProps extends RefAttributes<HTMLButtonElement>, ButtonHTMLAttributes<HTMLButtonElement> {
|
|
58
90
|
size?: 'small' | 'large';
|
|
@@ -178,9 +210,11 @@ interface DescriptionListItemProps {
|
|
|
178
210
|
declare const DescriptionListItem: ForwardRefExoticComponent<DescriptionListItemProps & RefAttributes<HTMLDivElement>>;
|
|
179
211
|
|
|
180
212
|
declare type DrawerActionsProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
|
|
213
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
181
214
|
declare const DrawerActions: ForwardRefExoticComponent<DrawerActionsProps & RefAttributes<HTMLDivElement>>;
|
|
182
215
|
|
|
183
216
|
declare type DrawerContentProps = HTMLAttributes<HTMLDivElement>;
|
|
217
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
184
218
|
declare const DrawerContent: ForwardRefExoticComponent<DrawerContentProps & RefAttributes<HTMLDivElement>>;
|
|
185
219
|
|
|
186
220
|
declare type DrawerListProps = Omit<ListProps<'div'>, 'component'>;
|
|
@@ -195,6 +229,7 @@ interface DrawerTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'
|
|
|
195
229
|
startAction?: ReactNode;
|
|
196
230
|
endAction?: ReactNode;
|
|
197
231
|
}
|
|
232
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
198
233
|
declare const DrawerTitle: ForwardRefExoticComponent<DrawerTitleProps & RefAttributes<HTMLDivElement>>;
|
|
199
234
|
|
|
200
235
|
interface DropdownButtonProps extends Omit<ButtonProps, 'children'> {
|
|
@@ -795,4 +830,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
|
|
|
795
830
|
}
|
|
796
831
|
declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
|
|
797
832
|
|
|
798
|
-
export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorDark, ColorDarkProp, ColorDynamic, ColorDynamicProp, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DefaultTheme, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, ExitTransitionPlaceholder, GridStack, GridStackProps, HorizontalAlign, Image, InfoCard, InfoCardClassKey, InfoCardProps, InfoTooltip, Inline, InlineGrid, InlineGridProps, InlineProps, LightDark, MinBreakpoint, NegativeSpaceProp, NumberField, NumberFieldProps, OverflowText, OverflowTextProps, PartialResponsivePropRecord, PatternField, PatternFieldProps, RadioCardItemProps, RadioField, RadioFieldCard, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorDynamicProp, isColorProp, isColorPropDark, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
|
|
833
|
+
export { AdaptiveToolbar, AdaptiveToolbarDropdownItem, AdaptiveToolbarItem, AdaptiveToolbarProps, AdaptiveVerticalToolbar, AdaptiveVerticalToolbarItem, AdaptiveVerticalToolbarProps, AppDrawer, AppDrawerProps, AppDrawerSize, AvatarButton, AvatarButtonClassKey, AvatarButtonProps, Button, ButtonProps, CardButton, CardButtonClassKey, CardButtonProps, CheckboxField, CheckboxFieldProps, CheckboxGroupField, CheckboxGroupFieldProps, CollapseBreakpoint, CollapseProp, Color, ColorDark, ColorDarkProp, ColorDynamic, ColorDynamicProp, ColorProp, ColorVariant, Column, ColumnProps, ColumnWidth, Columns, ColumnsProps, DefaultTheme, DescriptionList, DescriptionListItem, DescriptionListItemProps, DescriptionListProps, DrawerActionDef, DrawerActions, DrawerActionsProps, DrawerContent, DrawerContentProps, DrawerList, DrawerListProps, DrawerTitle, DrawerTitleProps, DropdownButton, ElementVisibility, ExitTransitionPlaceholder, GridStack, GridStackProps, HorizontalAlign, Image, InfoCard, InfoCardClassKey, InfoCardProps, InfoTooltip, Inline, InlineGrid, InlineGridProps, InlineProps, LightDark, MinBreakpoint, NegativeSpaceProp, NumberField, NumberFieldProps, OverflowText, OverflowTextProps, PartialResponsivePropRecord, PatternField, PatternFieldProps, RadioCardItemProps, RadioField, RadioFieldCard, RadioFieldProps, RadioGroupField, RadioGroupFieldProps, ResponsiveContext, ResponsiveContextProvider, ResponsiveContextProviderProps, ResponsiveProp, ResponsivePropPrimitive, ResponsivePropRecord, ResponsivePropTuple, ResponsivePropTupleInit, Snackbar, SnackbarCloseReason, SnackbarContent, SnackbarContentProps, SnackbarProps, SnackbarStack, SnackbarStackConsumer, SnackbarStackOptions, SnackbarStackProvider, SnackbarStackProviderProps, SnackbarVariant, SpaceProp, Stack, StackProps, SuperDispatchTheme, Tag, TagClassKey, TagProps, ThemeProvider, ThemeProviderProps, Tiles, TilesColumns, TilesProps, TilesSpace, VerticalAlign, VisibilityObserver, VisibilityObserverOptions, VisibilityObserverProps, VisibilityObserverRenderProps, assignRef, isColorDynamicProp, isColorProp, isColorPropDark, isEmptyReactNode, mergeRefs, parseAlignProp, parseCollapsedBelow, parseResponsiveProp, parseSpaceProp, renderChildren, useCollapseBreakpoint, useMinBreakpoint, useResizeObserver, useResponsiveContext, useResponsiveProp, useResponsivePropRecord, useResponsiveValue, useSnackbarStack, useUID, useVisibilityObserver };
|