@superdispatch/ui 0.41.0 → 0.42.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 +77 -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 +38 -1
- package/dist-web/index.js +439 -344
- package/dist-web/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
import { Drawer as MuiDrawer, IconButton } from '@material-ui/core';
|
|
2
|
+
import { ArrowBack as BackIcon, Close as CloseIcon } from '@material-ui/icons';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
import { Button } from "../button/Button.js";
|
|
5
|
+
import { DrawerActions } from "../drawer/DrawerActions.js";
|
|
6
|
+
import { DrawerContent } from "../drawer/DrawerContent.js";
|
|
7
|
+
import { DrawerTitle } from "../drawer/DrawerTitle.js";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
var StyledActionsLayout = /*#__PURE__*/styled.div.withConfig({
|
|
10
|
+
displayName: "AppDrawer__StyledActionsLayout",
|
|
11
|
+
componentId: "SD__sc-1ivw8lf-0"
|
|
12
|
+
})(["display:flex;gap:16px;"]);
|
|
13
|
+
var sizeToMaxWidthMap = {
|
|
14
|
+
md: '432px',
|
|
15
|
+
lg: '600px',
|
|
16
|
+
xl: '746px',
|
|
17
|
+
xxl: '900px'
|
|
18
|
+
};
|
|
19
|
+
export function AppDrawer(_ref) {
|
|
20
|
+
var {
|
|
21
|
+
title,
|
|
22
|
+
subtitle,
|
|
23
|
+
children,
|
|
24
|
+
open,
|
|
25
|
+
onClose,
|
|
26
|
+
onBack,
|
|
27
|
+
primaryAction,
|
|
28
|
+
secondaryAction,
|
|
29
|
+
disableContentPadding = false,
|
|
30
|
+
disableCloseButton = false,
|
|
31
|
+
size = 'md'
|
|
32
|
+
} = _ref;
|
|
33
|
+
return /*#__PURE__*/_jsxs(MuiDrawer, {
|
|
34
|
+
open: open,
|
|
35
|
+
onClose: onClose,
|
|
36
|
+
anchor: "right",
|
|
37
|
+
PaperProps: {
|
|
38
|
+
style: {
|
|
39
|
+
width: '100%',
|
|
40
|
+
maxWidth: sizeToMaxWidthMap[size]
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
children: [/*#__PURE__*/_jsx(DrawerTitle, {
|
|
44
|
+
title: title,
|
|
45
|
+
subtitle: subtitle,
|
|
46
|
+
startAction: onBack && /*#__PURE__*/_jsx(IconButton, {
|
|
47
|
+
onClick: onBack,
|
|
48
|
+
edge: "start",
|
|
49
|
+
children: /*#__PURE__*/_jsx(BackIcon, {
|
|
50
|
+
color: "action"
|
|
51
|
+
})
|
|
52
|
+
}),
|
|
53
|
+
endAction: !disableCloseButton && /*#__PURE__*/_jsx(IconButton, {
|
|
54
|
+
onClick: onClose,
|
|
55
|
+
children: /*#__PURE__*/_jsx(CloseIcon, {
|
|
56
|
+
color: "action"
|
|
57
|
+
})
|
|
58
|
+
})
|
|
59
|
+
}), disableContentPadding ? children : /*#__PURE__*/_jsx(DrawerContent, {
|
|
60
|
+
children: children
|
|
61
|
+
}), (primaryAction || secondaryAction) && /*#__PURE__*/_jsx(DrawerActions, {
|
|
62
|
+
children: /*#__PURE__*/_jsxs(StyledActionsLayout, {
|
|
63
|
+
children: [primaryAction && /*#__PURE__*/_jsx(Button, {
|
|
64
|
+
type: "button",
|
|
65
|
+
onClick: primaryAction.onClick,
|
|
66
|
+
variant: "contained",
|
|
67
|
+
children: primaryAction.label
|
|
68
|
+
}), secondaryAction && /*#__PURE__*/_jsx(Button, {
|
|
69
|
+
type: "button",
|
|
70
|
+
onClick: secondaryAction.onClick,
|
|
71
|
+
variant: "outlined",
|
|
72
|
+
children: secondaryAction.label
|
|
73
|
+
})]
|
|
74
|
+
})
|
|
75
|
+
})]
|
|
76
|
+
});
|
|
77
|
+
}
|
|
@@ -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,40 @@ 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 {
|
|
60
|
+
label: string;
|
|
61
|
+
form?: string;
|
|
62
|
+
onClick: () => void;
|
|
63
|
+
}
|
|
64
|
+
interface AppDrawerProps {
|
|
65
|
+
title: string;
|
|
66
|
+
subtitle?: string;
|
|
67
|
+
children: React.ReactNode;
|
|
68
|
+
primaryAction?: DrawerActionDef;
|
|
69
|
+
secondaryAction?: DrawerActionDef;
|
|
70
|
+
size?: AppDrawerSize;
|
|
71
|
+
/**
|
|
72
|
+
* By default renders the children with content
|
|
73
|
+
* padding wrapper as it's the most common use case.
|
|
74
|
+
*/
|
|
75
|
+
disableContentPadding?: boolean;
|
|
76
|
+
/**
|
|
77
|
+
* By default renders the close button in the header.
|
|
78
|
+
* Set to true to hide it.
|
|
79
|
+
*/
|
|
80
|
+
disableCloseButton?: boolean;
|
|
81
|
+
/**
|
|
82
|
+
* Renders a back button in the header
|
|
83
|
+
*/
|
|
84
|
+
onBack?: () => void;
|
|
85
|
+
open: boolean;
|
|
86
|
+
onClose: () => void;
|
|
87
|
+
}
|
|
88
|
+
declare function AppDrawer({ title, subtitle, children, open, onClose, onBack, primaryAction, secondaryAction, disableContentPadding, disableCloseButton, size, }: AppDrawerProps): JSX.Element;
|
|
89
|
+
|
|
56
90
|
declare type AvatarButtonClassKey = 'button' | 'overlay' | 'progress' | 'withIcon' | 'sizeLarge' | Exclude<AvatarClassKey, 'circle'>;
|
|
57
91
|
interface AvatarButtonProps extends RefAttributes<HTMLButtonElement>, ButtonHTMLAttributes<HTMLButtonElement> {
|
|
58
92
|
size?: 'small' | 'large';
|
|
@@ -178,9 +212,11 @@ interface DescriptionListItemProps {
|
|
|
178
212
|
declare const DescriptionListItem: ForwardRefExoticComponent<DescriptionListItemProps & RefAttributes<HTMLDivElement>>;
|
|
179
213
|
|
|
180
214
|
declare type DrawerActionsProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
|
|
215
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
181
216
|
declare const DrawerActions: ForwardRefExoticComponent<DrawerActionsProps & RefAttributes<HTMLDivElement>>;
|
|
182
217
|
|
|
183
218
|
declare type DrawerContentProps = HTMLAttributes<HTMLDivElement>;
|
|
219
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
184
220
|
declare const DrawerContent: ForwardRefExoticComponent<DrawerContentProps & RefAttributes<HTMLDivElement>>;
|
|
185
221
|
|
|
186
222
|
declare type DrawerListProps = Omit<ListProps<'div'>, 'component'>;
|
|
@@ -195,6 +231,7 @@ interface DrawerTitleProps extends Omit<HTMLAttributes<HTMLDivElement>, 'color'
|
|
|
195
231
|
startAction?: ReactNode;
|
|
196
232
|
endAction?: ReactNode;
|
|
197
233
|
}
|
|
234
|
+
/** @deprecated Use `<AppDrawer>` instead. */
|
|
198
235
|
declare const DrawerTitle: ForwardRefExoticComponent<DrawerTitleProps & RefAttributes<HTMLDivElement>>;
|
|
199
236
|
|
|
200
237
|
interface DropdownButtonProps extends Omit<ButtonProps, 'children'> {
|
|
@@ -795,4 +832,4 @@ interface VisibilityObserverProps extends VisibilityObserverOptions {
|
|
|
795
832
|
}
|
|
796
833
|
declare function VisibilityObserver({ render, onChange, ...options }: VisibilityObserverProps): null | ReactElement;
|
|
797
834
|
|
|
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 };
|
|
835
|
+
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 };
|