@superdispatch/ui-lab 0.25.3 → 0.26.1
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 +118 -201
- package/dist-node/index.js.map +1 -1
- package/dist-src/alert/Alert.js +0 -4
- package/dist-src/banner/Banner.js +11 -14
- package/dist-src/box/Box.js +18 -19
- package/dist-src/button/Button.js +22 -37
- package/dist-src/button-area/ButtonArea.js +9 -11
- package/dist-src/chat/Chat.js +0 -2
- package/dist-src/chat/ChatMessage.js +1 -2
- package/dist-src/container/Container.js +3 -7
- package/dist-src/description-item/DescriptionItem.js +1 -4
- package/dist-src/description-line-item/DescriptionLineItem.js +1 -2
- package/dist-src/file-drop-zone/FileDropZone.js +26 -31
- package/dist-src/file-list-item/FileListItem.js +1 -4
- package/dist-src/linked-text/LinkedText.js +10 -13
- package/dist-src/navbar/Navbar.js +1 -2
- package/dist-src/navbar/NavbarAccordion.js +4 -8
- package/dist-src/navbar/NavbarAvatar.js +6 -10
- package/dist-src/navbar/NavbarBottomBar.js +6 -9
- package/dist-src/navbar/NavbarItem.js +1 -2
- package/dist-src/navbar/NavbarList.js +2 -8
- package/dist-src/navbar/NavbarMenu.js +1 -6
- package/dist-src/sidebar/Sidebar.js +1 -2
- package/dist-src/sidebar/SidebarBackButton.js +6 -10
- package/dist-src/sidebar/SidebarContainer.js +1 -4
- package/dist-src/sidebar/SidebarContent.js +1 -2
- package/dist-src/sidebar/SidebarMenuItem.js +1 -4
- package/dist-src/sidebar/SidebarMenuItemAvatar.js +0 -4
- package/dist-src/sidebar/SidebarSubheader.js +1 -2
- package/dist-src/text-box/TextBox.js +9 -23
- package/dist-src/utils/RuleNormalizer.js +0 -3
- package/dist-src/utils/mergeStyles.js +0 -3
- package/dist-web/index.js +118 -201
- package/dist-web/index.js.map +1 -1
- package/package.json +3 -3
package/dist-src/alert/Alert.js
CHANGED
|
@@ -4,20 +4,16 @@ import { Color } from '@superdispatch/ui';
|
|
|
4
4
|
import { forwardRef } from 'react';
|
|
5
5
|
import styled, { css } from 'styled-components';
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
|
|
8
7
|
function colorMixin(textColor, iconColor, backgroundColor, buttonHoverColor) {
|
|
9
8
|
return css(["color:", ";border-color:", ";background-color:", ";& .MuiAlert-icon{color:", ";}& .MuiAlert-action{color:", ";& .MuiIconButton-root{&:hover,&:active{color:", ";}}}"], textColor, textColor, backgroundColor, iconColor, iconColor, buttonHoverColor);
|
|
10
9
|
}
|
|
11
|
-
|
|
12
10
|
var StyledAlert = /*#__PURE__*/styled(MaterialAlert).withConfig({
|
|
13
11
|
displayName: "Alert__StyledAlert",
|
|
14
12
|
componentId: "SD__sc-1j6qebb-0"
|
|
15
13
|
})(["&.MuiAlert-outlinedSuccess{", ";}&.MuiAlert-outlinedInfo{", ";}&.MuiAlert-outlinedWarning{", ";}&.MuiAlert-outlinedError{", ";}& .MuiAlert-icon{opacity:1;padding:8px 0;font-size:24px;}& .MuiAlert-action{display:block;padding-top:5px;margin-right:-3px;& .MuiIconButton-root{& .MuiSvgIcon-root{font-size:24px;}}}"], /*#__PURE__*/colorMixin(Color.Green500, Color.Green300, Color.Green50, Color.Green400), /*#__PURE__*/colorMixin(Color.Blue500, Color.Blue300, Color.Blue50, Color.Blue400), /*#__PURE__*/colorMixin(Color.Yellow500, Color.Yellow300, Color.Yellow50, Color.Yellow400), /*#__PURE__*/colorMixin(Color.Red500, Color.Red300, Color.Red50, Color.Red400));
|
|
16
|
-
|
|
17
14
|
function toMaterialSeverity(severity) {
|
|
18
15
|
return severity === 'info' ? 'info' : severity === 'caution' ? 'warning' : severity === 'critical' ? 'error' : 'success';
|
|
19
16
|
}
|
|
20
|
-
|
|
21
17
|
var iconMapping = {
|
|
22
18
|
success: /*#__PURE__*/_jsx(CheckCircle, {}),
|
|
23
19
|
info: /*#__PURE__*/_jsx(Info, {}),
|
|
@@ -1,28 +1,25 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["children"],
|
|
4
|
-
|
|
4
|
+
_excluded2 = ["in"];
|
|
5
5
|
import { Color } from '@superdispatch/ui';
|
|
6
6
|
import { forwardRef, useEffect, useState } from 'react';
|
|
7
|
-
import { CSSTransition } from 'react-transition-group';
|
|
7
|
+
import { CSSTransition } from 'react-transition-group';
|
|
8
|
+
// eslint-disable-next-line import/no-internal-modules
|
|
8
9
|
|
|
9
10
|
import styled, { css, keyframes } from 'styled-components';
|
|
10
11
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
-
|
|
12
12
|
function enterMixin(border) {
|
|
13
13
|
return css(["min-height:56px;color:", ";background-color:", ";border-", ":1px #dfe3e8 solid;"], Color.Dark500, Color.White, border);
|
|
14
14
|
}
|
|
15
|
-
|
|
16
15
|
function enterAnimation(border) {
|
|
17
16
|
return keyframes(["0%{min-height:0;color:", ";background-color:", ";}50%{min-height:56px;color:", ";background-color:", ";}70%{min-height:56px;color:", ";background-color:", ";}100%{", "}"], Color.White, Color.Dark500, Color.White, Color.Dark500, Color.White, Color.Dark500, enterMixin(border));
|
|
18
17
|
}
|
|
19
|
-
|
|
20
18
|
var CustomTransition = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
21
19
|
var {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
20
|
+
children
|
|
21
|
+
} = _ref,
|
|
22
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
23
|
return /*#__PURE__*/_jsx(CSSTransition, _objectSpread(_objectSpread({}, props), {}, {
|
|
27
24
|
ref: ref,
|
|
28
25
|
timeout: 3000,
|
|
@@ -44,12 +41,12 @@ var BannerContent = /*#__PURE__*/styled(CustomTransition).withConfig({
|
|
|
44
41
|
});
|
|
45
42
|
export var Banner = /*#__PURE__*/forwardRef((_ref3, ref) => {
|
|
46
43
|
var {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
var [isIn, setIn] = useState(false); // transition is not triggered on initial render with `in: true`
|
|
44
|
+
in: inProp
|
|
45
|
+
} = _ref3,
|
|
46
|
+
props = _objectWithoutProperties(_ref3, _excluded2);
|
|
47
|
+
var [isIn, setIn] = useState(false);
|
|
52
48
|
|
|
49
|
+
// transition is not triggered on initial render with `in: true`
|
|
53
50
|
useEffect(() => {
|
|
54
51
|
setIn(!!inProp);
|
|
55
52
|
}, [inProp]);
|
package/dist-src/box/Box.js
CHANGED
|
@@ -1,38 +1,41 @@
|
|
|
1
1
|
import { Color, isColorProp, parseResponsiveProp, parseSpaceProp } from '@superdispatch/ui';
|
|
2
2
|
import styled from 'styled-components';
|
|
3
|
-
import { createRuleNormalizer } from "../utils/RuleNormalizer.js";
|
|
3
|
+
import { createRuleNormalizer } from "../utils/RuleNormalizer.js";
|
|
4
|
+
|
|
5
|
+
//
|
|
4
6
|
// Colors
|
|
5
7
|
//
|
|
6
8
|
|
|
7
9
|
function normalizeColor(input) {
|
|
8
10
|
return isColorProp(input) ? Color[input] : undefined;
|
|
9
|
-
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
//
|
|
10
14
|
// Space
|
|
11
15
|
//
|
|
12
16
|
|
|
13
|
-
|
|
14
17
|
function parseSpace(space) {
|
|
15
18
|
return "".concat(parseSpaceProp(space), "px");
|
|
16
|
-
}
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
//
|
|
17
22
|
// Margins
|
|
18
23
|
//
|
|
19
24
|
|
|
20
|
-
|
|
21
25
|
function parseMargin(input) {
|
|
22
26
|
if (input === 'auto') return input;
|
|
23
27
|
var prefix = '';
|
|
24
|
-
|
|
25
28
|
if (typeof input == 'string' && input.startsWith('-')) {
|
|
26
29
|
prefix = '-';
|
|
27
30
|
input = input.slice(1);
|
|
28
31
|
}
|
|
29
|
-
|
|
30
32
|
return prefix + parseSpace(input);
|
|
31
|
-
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
//
|
|
32
36
|
// Borders
|
|
33
37
|
//
|
|
34
38
|
|
|
35
|
-
|
|
36
39
|
var normalizeBorderRadius = /*#__PURE__*/createRuleNormalizer({
|
|
37
40
|
none: 0,
|
|
38
41
|
small: 4,
|
|
@@ -43,7 +46,9 @@ var normalizeBorderWidth = /*#__PURE__*/createRuleNormalizer({
|
|
|
43
46
|
small: 1,
|
|
44
47
|
medium: 2,
|
|
45
48
|
large: 4
|
|
46
|
-
});
|
|
49
|
+
});
|
|
50
|
+
|
|
51
|
+
//
|
|
47
52
|
// Rules
|
|
48
53
|
//
|
|
49
54
|
|
|
@@ -92,25 +97,22 @@ var normalizers = {
|
|
|
92
97
|
bottom: undefined,
|
|
93
98
|
position: undefined
|
|
94
99
|
};
|
|
95
|
-
|
|
96
100
|
function injectRule(styles, key, breakpoint, value, normalizer) {
|
|
97
101
|
if (normalizer != null) value = normalizer(value);
|
|
98
|
-
|
|
99
102
|
if (value != null) {
|
|
100
103
|
var rules = styles[breakpoint];
|
|
101
|
-
|
|
102
104
|
if (typeof rules != 'object') {
|
|
103
105
|
rules = {};
|
|
104
106
|
styles[breakpoint] = rules;
|
|
105
107
|
}
|
|
106
|
-
|
|
107
108
|
rules[key] = String(value);
|
|
108
109
|
}
|
|
109
|
-
}
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
//
|
|
110
113
|
// Box
|
|
111
114
|
//
|
|
112
115
|
|
|
113
|
-
|
|
114
116
|
export var Box = /*#__PURE__*/styled.div.withConfig({
|
|
115
117
|
displayName: "Box",
|
|
116
118
|
componentId: "SD__sc-1bc600y-0"
|
|
@@ -127,12 +129,10 @@ export var Box = /*#__PURE__*/styled.div.withConfig({
|
|
|
127
129
|
borderWidth: 0,
|
|
128
130
|
borderStyle: 'solid'
|
|
129
131
|
};
|
|
130
|
-
|
|
131
132
|
for (var k in props) {
|
|
132
133
|
if (Object.prototype.hasOwnProperty.call(props, k) && k in normalizers) {
|
|
133
134
|
var key = k;
|
|
134
135
|
var prop = props[key];
|
|
135
|
-
|
|
136
136
|
if (prop != null) {
|
|
137
137
|
var [mobile, tablet, desktop] = parseResponsiveProp(prop);
|
|
138
138
|
var normalizer = normalizers[key];
|
|
@@ -142,6 +142,5 @@ export var Box = /*#__PURE__*/styled.div.withConfig({
|
|
|
142
142
|
}
|
|
143
143
|
}
|
|
144
144
|
}
|
|
145
|
-
|
|
146
145
|
return styles;
|
|
147
146
|
});
|
|
@@ -1,15 +1,13 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["children", "endIcon", "startIcon", "tabIndex", "active", "pending", "disabled", "size", "fullWidth", "variant"],
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
_excluded2 = ["type"],
|
|
5
|
+
_excluded3 = ["href", "target"];
|
|
6
6
|
import { CircularProgress } from '@material-ui/core';
|
|
7
7
|
import { Color } from '@superdispatch/ui';
|
|
8
8
|
import { forwardRef } from 'react';
|
|
9
9
|
import styled, { css } from 'styled-components';
|
|
10
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
|
-
|
|
10
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
11
|
function createButtonVariables(size, _ref) {
|
|
14
12
|
var {
|
|
15
13
|
fontSize = size === 'large' ? 16 : 14,
|
|
@@ -56,7 +54,6 @@ function createButtonVariables(size, _ref) {
|
|
|
56
54
|
iconColor
|
|
57
55
|
};
|
|
58
56
|
}
|
|
59
|
-
|
|
60
57
|
function getDefaultVariables(size) {
|
|
61
58
|
return createButtonVariables(size, {
|
|
62
59
|
textColor: Color.White,
|
|
@@ -68,11 +65,9 @@ function getDefaultVariables(size) {
|
|
|
68
65
|
backgroundColorDisabled: Color.Blue30
|
|
69
66
|
});
|
|
70
67
|
}
|
|
71
|
-
|
|
72
68
|
function getPrimaryVariables(size) {
|
|
73
69
|
return getDefaultVariables(size);
|
|
74
70
|
}
|
|
75
|
-
|
|
76
71
|
function getNeutralVariables(size) {
|
|
77
72
|
return createButtonVariables(size, {
|
|
78
73
|
textColor: Color.Dark500,
|
|
@@ -87,7 +82,6 @@ function getNeutralVariables(size) {
|
|
|
87
82
|
iconColor: Color.Dark100
|
|
88
83
|
});
|
|
89
84
|
}
|
|
90
|
-
|
|
91
85
|
function getCriticalVariables(size) {
|
|
92
86
|
return createButtonVariables(size, {
|
|
93
87
|
textColor: Color.Red500,
|
|
@@ -101,7 +95,6 @@ function getCriticalVariables(size) {
|
|
|
101
95
|
backgroundColorDisabled: Color.Red50
|
|
102
96
|
});
|
|
103
97
|
}
|
|
104
|
-
|
|
105
98
|
function getTextVariables(size) {
|
|
106
99
|
return createButtonVariables(size, {
|
|
107
100
|
textColor: Color.Blue500,
|
|
@@ -112,7 +105,6 @@ function getTextVariables(size) {
|
|
|
112
105
|
textColorDisabled: Color.Blue30
|
|
113
106
|
});
|
|
114
107
|
}
|
|
115
|
-
|
|
116
108
|
function getInvertedVariables(size) {
|
|
117
109
|
return createButtonVariables(size, {
|
|
118
110
|
textColor: Color.White,
|
|
@@ -125,7 +117,6 @@ function getInvertedVariables(size) {
|
|
|
125
117
|
backgroundColorDisabled: Color.White08
|
|
126
118
|
});
|
|
127
119
|
}
|
|
128
|
-
|
|
129
120
|
function getSuccessVariables(size) {
|
|
130
121
|
return createButtonVariables(size, {
|
|
131
122
|
textColor: Color.White,
|
|
@@ -137,7 +128,6 @@ function getSuccessVariables(size) {
|
|
|
137
128
|
backgroundColorDisabled: Color.Green30
|
|
138
129
|
});
|
|
139
130
|
}
|
|
140
|
-
|
|
141
131
|
var ButtonRoot = /*#__PURE__*/styled.button.withConfig({
|
|
142
132
|
displayName: "Button__ButtonRoot",
|
|
143
133
|
componentId: "SD__sc-1pwdpe3-0"
|
|
@@ -167,22 +157,20 @@ var ButtonPendingIndicator = /*#__PURE__*/styled.span.withConfig({
|
|
|
167
157
|
displayName: "Button__ButtonPendingIndicator",
|
|
168
158
|
componentId: "SD__sc-1pwdpe3-4"
|
|
169
159
|
})(["left:50%;display:flex;position:absolute;visibility:visible;transform:translate(-50%);"]);
|
|
170
|
-
|
|
171
160
|
function useButtonProps(_ref3) {
|
|
172
161
|
var {
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
162
|
+
children,
|
|
163
|
+
endIcon,
|
|
164
|
+
startIcon,
|
|
165
|
+
tabIndex: tabIndexProp = 0,
|
|
166
|
+
active = false,
|
|
167
|
+
pending = false,
|
|
168
|
+
disabled: disabledProp = false,
|
|
169
|
+
size = 'medium',
|
|
170
|
+
fullWidth = false,
|
|
171
|
+
variant = 'default'
|
|
172
|
+
} = _ref3,
|
|
173
|
+
props = _objectWithoutProperties(_ref3, _excluded);
|
|
186
174
|
var disabled = pending || disabledProp;
|
|
187
175
|
var tabIndex = disabled ? -1 : tabIndexProp;
|
|
188
176
|
return _objectSpread(_objectSpread({}, props), {}, {
|
|
@@ -208,13 +196,11 @@ function useButtonProps(_ref3) {
|
|
|
208
196
|
})
|
|
209
197
|
});
|
|
210
198
|
}
|
|
211
|
-
|
|
212
199
|
export var Button = /*#__PURE__*/forwardRef((_ref4, ref) => {
|
|
213
200
|
var {
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
201
|
+
type = 'button'
|
|
202
|
+
} = _ref4,
|
|
203
|
+
props = _objectWithoutProperties(_ref4, _excluded2);
|
|
218
204
|
var buttonProps = useButtonProps(props);
|
|
219
205
|
return /*#__PURE__*/_jsx(ButtonRoot, _objectSpread(_objectSpread({}, buttonProps), {}, {
|
|
220
206
|
ref: ref,
|
|
@@ -224,11 +210,10 @@ export var Button = /*#__PURE__*/forwardRef((_ref4, ref) => {
|
|
|
224
210
|
if (process.env.NODE_ENV !== "production") Button.displayName = "Button";
|
|
225
211
|
export var AnchorButton = /*#__PURE__*/forwardRef((_ref5, ref) => {
|
|
226
212
|
var {
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
213
|
+
href,
|
|
214
|
+
target
|
|
215
|
+
} = _ref5,
|
|
216
|
+
props = _objectWithoutProperties(_ref5, _excluded3);
|
|
232
217
|
var buttonProps = useButtonProps(props);
|
|
233
218
|
var rel = target === '_blank' ? 'noopener noreferrer' : undefined;
|
|
234
219
|
return /*#__PURE__*/_jsx(ButtonRoot, _objectSpread(_objectSpread({}, buttonProps), {}, {
|
|
@@ -5,23 +5,21 @@ import { ButtonBase, Typography } from '@material-ui/core';
|
|
|
5
5
|
import { Color, Stack } from '@superdispatch/ui';
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
9
|
var ButtonRoot = /*#__PURE__*/styled(ButtonBase).withConfig({
|
|
11
10
|
displayName: "ButtonArea__ButtonRoot",
|
|
12
11
|
componentId: "SD__sc-1czum63-0"
|
|
13
12
|
})(["padding:12px 32px;border-width:1px;border-radius:4px;border-style:solid;border-color:", ";color:", ";background-color:", ";& svg{color:inherit;font-size:24px;}&[data-full-width='true']{width:100%;}&[data-disabled='true']{color:", ";border-color:", ";}&[data-variant='success']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}&[data-variant='danger']{&:hover{color:", ";box-shadow:0 0 0 2px ", ";border-color:", ";}&[data-active='true']{color:", ";border-color:", ";background-color:", ";}}"], Color.Silver500, Color.Dark100, Color.White, Color.Silver500, Color.Silver400, Color.Green300, Color.Green100, Color.Green300, Color.Green300, Color.Green300, Color.Green50, Color.Red300, Color.Red100, Color.Red300, Color.Red300, Color.Red300, Color.Red50);
|
|
14
13
|
export var ButtonArea = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
15
14
|
var {
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
15
|
+
icon,
|
|
16
|
+
children,
|
|
17
|
+
variant,
|
|
18
|
+
active,
|
|
19
|
+
disabled,
|
|
20
|
+
fullWidth
|
|
21
|
+
} = _ref,
|
|
22
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
25
23
|
return /*#__PURE__*/_jsx(ButtonRoot, _objectSpread(_objectSpread({
|
|
26
24
|
ref: ref,
|
|
27
25
|
disabled: disabled,
|
package/dist-src/chat/Chat.js
CHANGED
|
@@ -12,7 +12,6 @@ var ChatContainer = /*#__PURE__*/styled('div').withConfig({
|
|
|
12
12
|
} = _ref;
|
|
13
13
|
return "\n display: flex;\n flex-direction: column-reverse;\n overflow: auto;\n justify-content: ".concat(isEmpty ? 'center' : 'end', ";\n width: 100%;\n height: 100%;\n min-width: 300px;\n max-width: 560px;\n min-height: 368px;\n max-height: 696px;\n padding: 16px;\n box-sizing: border-box;\n");
|
|
14
14
|
});
|
|
15
|
-
|
|
16
15
|
function emptyPlaceholder(text) {
|
|
17
16
|
return /*#__PURE__*/_jsx(Typography, {
|
|
18
17
|
color: "textSecondary",
|
|
@@ -20,7 +19,6 @@ function emptyPlaceholder(text) {
|
|
|
20
19
|
children: text
|
|
21
20
|
});
|
|
22
21
|
}
|
|
23
|
-
|
|
24
22
|
export var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
25
23
|
var {
|
|
26
24
|
children,
|
|
@@ -3,8 +3,7 @@ import { formatDate } from '@superdispatch/dates';
|
|
|
3
3
|
import { Inline, Stack } from '@superdispatch/ui';
|
|
4
4
|
import { Box } from '@superdispatch/ui-lab';
|
|
5
5
|
import { forwardRef } from 'react';
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
7
|
export var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
9
8
|
var {
|
|
10
9
|
author,
|
|
@@ -6,10 +6,9 @@ import { forwardRef, useLayoutEffect, useRef } from 'react';
|
|
|
6
6
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
7
|
export var Container = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
8
8
|
var {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
9
|
+
fullViewportHeight
|
|
10
|
+
} = _ref,
|
|
11
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
13
12
|
var nodeRef = useRef(null);
|
|
14
13
|
useLayoutEffect(() => {
|
|
15
14
|
if (!fullViewportHeight) {
|
|
@@ -17,10 +16,8 @@ export var Container = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
17
16
|
nodeRef.current.style.removeProperty('height');
|
|
18
17
|
nodeRef.current.style.removeProperty('--vh');
|
|
19
18
|
}
|
|
20
|
-
|
|
21
19
|
return;
|
|
22
20
|
}
|
|
23
|
-
|
|
24
21
|
function updateHeight() {
|
|
25
22
|
if (nodeRef.current) {
|
|
26
23
|
// https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
|
|
@@ -28,7 +25,6 @@ export var Container = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
|
28
25
|
nodeRef.current.style.setProperty('--vh', "".concat(window.innerHeight * 0.01, "px"));
|
|
29
26
|
}
|
|
30
27
|
}
|
|
31
|
-
|
|
32
28
|
updateHeight();
|
|
33
29
|
window.addEventListener('resize', updateHeight);
|
|
34
30
|
return () => {
|
|
@@ -2,13 +2,10 @@ import { Color, Column, Columns, Inline, isEmptyReactNode, useUID } from '@super
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { TextBox } from "../text-box/TextBox.js";
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
7
|
-
|
|
5
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
6
|
function descriptionItemIconMixin(size) {
|
|
9
7
|
return css(["width:", "px;height:", "px;& > .MuiSvgIcon-root{font-size:", "px;}"], size, size + 4, size);
|
|
10
8
|
}
|
|
11
|
-
|
|
12
9
|
var DescriptionItemIcon = /*#__PURE__*/styled.div.withConfig({
|
|
13
10
|
displayName: "DescriptionItem__DescriptionItemIcon",
|
|
14
11
|
componentId: "SD__sc-1906hic-0"
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { Color, Column, Columns } from '@superdispatch/ui';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled from 'styled-components';
|
|
4
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
4
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
5
|
export var DottedLine = /*#__PURE__*/styled.div.withConfig({
|
|
7
6
|
displayName: "DescriptionLineItem__DottedLine",
|
|
8
7
|
componentId: "SD__sc-1ixx5h8-0"
|
|
@@ -8,9 +8,7 @@ import { CardButton, Color, Column, Columns } from '@superdispatch/ui';
|
|
|
8
8
|
import { forwardRef, Suspense } from 'react';
|
|
9
9
|
import Dropzone from 'react-dropzone';
|
|
10
10
|
import styled from 'styled-components';
|
|
11
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
12
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
11
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
12
|
export function toBytes(input, unit) {
|
|
15
13
|
if (unit === 'gb') return input * (1 << 30);
|
|
16
14
|
if (unit === 'mb') return input * (1 << 20);
|
|
@@ -35,7 +33,6 @@ var StyledCardButton = /*#__PURE__*/styled(CardButton).withConfig({
|
|
|
35
33
|
backgroundColor: status === 'active' ? Color.Blue50 : undefined
|
|
36
34
|
};
|
|
37
35
|
});
|
|
38
|
-
|
|
39
36
|
function UploadRejection(_ref2) {
|
|
40
37
|
var {
|
|
41
38
|
maxSize,
|
|
@@ -53,36 +50,34 @@ function UploadRejection(_ref2) {
|
|
|
53
50
|
})]
|
|
54
51
|
});
|
|
55
52
|
}
|
|
56
|
-
|
|
57
53
|
export var FileDropZone = /*#__PURE__*/forwardRef((props, ref) => {
|
|
58
54
|
var {
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
}),
|
|
68
|
-
fallback = /*#__PURE__*/_jsx(CardButton, {
|
|
69
|
-
ref: ref,
|
|
70
|
-
disabled: true,
|
|
71
|
-
startIcon: /*#__PURE__*/_jsx(CircularProgress, {
|
|
72
|
-
size: "1em",
|
|
73
|
-
color: "inherit"
|
|
55
|
+
// CardButton
|
|
56
|
+
disabled = false,
|
|
57
|
+
children: _children = 'Upload Attachments',
|
|
58
|
+
hintText = 'or Drag & Drop files',
|
|
59
|
+
startIcon = /*#__PURE__*/_jsx(SvgIcon, {
|
|
60
|
+
children: /*#__PURE__*/_jsx("path", {
|
|
61
|
+
d: mdiUpload
|
|
62
|
+
})
|
|
74
63
|
}),
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
64
|
+
fallback = /*#__PURE__*/_jsx(CardButton, {
|
|
65
|
+
ref: ref,
|
|
66
|
+
disabled: true,
|
|
67
|
+
startIcon: /*#__PURE__*/_jsx(CircularProgress, {
|
|
68
|
+
size: "1em",
|
|
69
|
+
color: "inherit"
|
|
70
|
+
}),
|
|
71
|
+
children: "Loading dependencies\u2026"
|
|
72
|
+
}),
|
|
73
|
+
// Dropzone
|
|
74
|
+
accept,
|
|
75
|
+
maxSize = Infinity,
|
|
76
|
+
maxFiles = Infinity,
|
|
77
|
+
onDropRejected: _onDropRejected,
|
|
78
|
+
onDropAccepted: _onDropAccepted
|
|
79
|
+
} = props,
|
|
80
|
+
dropzoneProps = _objectWithoutProperties(props, _excluded);
|
|
86
81
|
return /*#__PURE__*/_jsx(Suspense, {
|
|
87
82
|
fallback: fallback,
|
|
88
83
|
children: /*#__PURE__*/_jsx(Dropzone, _objectSpread(_objectSpread({}, dropzoneProps), {}, {
|
|
@@ -5,8 +5,7 @@ import { mdiFilePdfBox, mdiTextBox } from '@mdi/js';
|
|
|
5
5
|
import { Color, Column, Columns, useResponsiveValue, useUID } from '@superdispatch/ui';
|
|
6
6
|
import { forwardRef, memo, useState } from 'react';
|
|
7
7
|
import styled from 'styled-components';
|
|
8
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
10
9
|
var FileListItemName = /*#__PURE__*/styled.div.withConfig({
|
|
11
10
|
displayName: "FileListItem__FileListItemName",
|
|
12
11
|
componentId: "SD__sc-hxbsiy-0"
|
|
@@ -32,13 +31,11 @@ var TextBoxIcon = /*#__PURE__*/memo(props => /*#__PURE__*/_jsx(SvgIcon, _objectS
|
|
|
32
31
|
})));
|
|
33
32
|
var PDF_FILE_PATTERN = /\.pdf$/;
|
|
34
33
|
var IMAGE_FILE_PATTERN = /\.(gif|png|jpg|jpeg)$/;
|
|
35
|
-
|
|
36
34
|
function getFileType(name) {
|
|
37
35
|
if (PDF_FILE_PATTERN.exec(name)) return 'pdf';
|
|
38
36
|
if (IMAGE_FILE_PATTERN.exec(name)) return 'image';
|
|
39
37
|
return 'unknown';
|
|
40
38
|
}
|
|
41
|
-
|
|
42
39
|
export var FileListItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
|
|
43
40
|
var {
|
|
44
41
|
url,
|
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["color", "target", "rel"],
|
|
4
|
-
|
|
4
|
+
_excluded2 = ["children", "linkComponent"];
|
|
5
5
|
import { Link } from '@material-ui/core';
|
|
6
6
|
import { forwardRef } from 'react';
|
|
7
7
|
import { Anchorme } from 'react-anchorme';
|
|
8
8
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
9
9
|
var DefaultLinkComponent = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
10
10
|
var {
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
color,
|
|
12
|
+
target = '_blank',
|
|
13
|
+
rel = 'noreferrer noopener'
|
|
14
|
+
} = _ref,
|
|
15
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
17
16
|
return /*#__PURE__*/_jsx(Link, _objectSpread(_objectSpread({}, props), {}, {
|
|
18
17
|
ref: ref,
|
|
19
18
|
rel: rel,
|
|
@@ -24,15 +23,13 @@ if (process.env.NODE_ENV !== "production") DefaultLinkComponent.displayName = "D
|
|
|
24
23
|
DefaultLinkComponent.displayName = 'DefaultLinkComponent';
|
|
25
24
|
export function LinkedText(_ref2) {
|
|
26
25
|
var {
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
26
|
+
children,
|
|
27
|
+
linkComponent = DefaultLinkComponent
|
|
28
|
+
} = _ref2,
|
|
29
|
+
props = _objectWithoutProperties(_ref2, _excluded2);
|
|
32
30
|
if (!children) {
|
|
33
31
|
return null;
|
|
34
32
|
}
|
|
35
|
-
|
|
36
33
|
return /*#__PURE__*/_jsx(Anchorme, _objectSpread(_objectSpread({}, props), {}, {
|
|
37
34
|
linkComponent: linkComponent,
|
|
38
35
|
children: children
|
|
@@ -6,8 +6,7 @@ import styled from 'styled-components';
|
|
|
6
6
|
import { NavbarBottomBar } from "./NavbarBottomBar.js";
|
|
7
7
|
import { NavbarContext } from "./NavbarContext.js";
|
|
8
8
|
import { NavbarList } from "./NavbarList.js";
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
10
|
var Aside = /*#__PURE__*/styled.aside.withConfig({
|
|
12
11
|
displayName: "Navbar__Aside",
|
|
13
12
|
componentId: "SD__sc-1oiqig8-0"
|
|
@@ -2,13 +2,11 @@ import _objectSpread from "@babel/runtime/helpers/objectSpread2";
|
|
|
2
2
|
import { Accordion, AccordionSummary } from '@material-ui/core';
|
|
3
3
|
import { ExpandMore } from '@material-ui/icons';
|
|
4
4
|
import { Color, useUID } from '@superdispatch/ui';
|
|
5
|
-
import { useEffect, useMemo, useState } from 'react';
|
|
5
|
+
import { useEffect, useMemo, useState, createElement as _createElement } from 'react';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
import { useNavbarContext } from "./NavbarContext.js";
|
|
8
8
|
import { NavbarItem } from "./NavbarItem.js";
|
|
9
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
10
|
-
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
|
-
import { createElement as _createElement } from "react";
|
|
9
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
12
10
|
export var NavbarAccordionLabel = /*#__PURE__*/styled.span.withConfig({
|
|
13
11
|
displayName: "NavbarAccordion__NavbarAccordionLabel",
|
|
14
12
|
componentId: "SD__sc-1s7g3kw-0"
|
|
@@ -38,8 +36,9 @@ export function NavbarAccordion(_ref) {
|
|
|
38
36
|
setDrawerOpen,
|
|
39
37
|
isNavbarExpanded
|
|
40
38
|
} = useNavbarContext();
|
|
41
|
-
var [isExpanded, setExpanded] = useState(true);
|
|
39
|
+
var [isExpanded, setExpanded] = useState(true);
|
|
42
40
|
|
|
41
|
+
// sync accordion state with Desktop menu state
|
|
43
42
|
useEffect(() => {
|
|
44
43
|
setExpanded(isNavbarExpanded);
|
|
45
44
|
}, [isNavbarExpanded]);
|
|
@@ -51,7 +50,6 @@ export function NavbarAccordion(_ref) {
|
|
|
51
50
|
expanded: isExpanded,
|
|
52
51
|
onClick: event => {
|
|
53
52
|
_onClick === null || _onClick === void 0 ? void 0 : _onClick(event);
|
|
54
|
-
|
|
55
53
|
if (isNavbarExpanded) {
|
|
56
54
|
setExpanded(!isExpanded);
|
|
57
55
|
}
|
|
@@ -80,10 +78,8 @@ export function NavbarAccordion(_ref) {
|
|
|
80
78
|
gutter: prev && prev.groupKey !== item.groupKey,
|
|
81
79
|
onClick: event => {
|
|
82
80
|
var _item$onClick;
|
|
83
|
-
|
|
84
81
|
event.stopPropagation();
|
|
85
82
|
(_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item, event);
|
|
86
|
-
|
|
87
83
|
if (!event.isDefaultPrevented()) {
|
|
88
84
|
setDrawerOpen(false);
|
|
89
85
|
}
|