@jobber/components 4.1.0 → 4.1.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/Autocomplete/Autocomplete.d.ts +1 -1
- package/dist/Autocomplete/Option.d.ts +2 -2
- package/dist/Autocomplete/index.js +51 -67
- package/dist/Avatar/Avatar.d.ts +2 -2
- package/dist/Avatar/index.js +2 -2
- package/dist/{Avatar-cfd04e86.js → Avatar-89cfd0a6.js} +14 -18
- package/dist/Banner/Banner.d.ts +1 -1
- package/dist/Banner/index.js +15 -19
- package/dist/Button/Button.d.ts +1 -1
- package/dist/Button/index.js +3 -4
- package/dist/{Button-cd30df0f.js → Button-16e043ec.js} +21 -24
- package/dist/ButtonDismiss/index.js +4 -5
- package/dist/{ButtonDismiss-a9590195.js → ButtonDismiss-3fb1eaf9.js} +2 -3
- package/dist/Card/Card.d.ts +1 -1
- package/dist/Card/index.js +6 -7
- package/dist/Card/types.d.ts +1 -1
- package/dist/{Card-b9f8d6f3.js → Card-edab9c3c.js} +18 -22
- package/dist/Checkbox/Checkbox.d.ts +1 -1
- package/dist/Checkbox/index.js +4 -5
- package/dist/{Checkbox-5103d2b9.js → Checkbox-c1efc2f6.js} +10 -12
- package/dist/Chips/ChipsTypes.d.ts +1 -1
- package/dist/Chips/InternalChipDismissible/InternalChipDismissibleTypes.d.ts +1 -1
- package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissible.d.ts +1 -1
- package/dist/Chips/InternalChipDismissible/hooks/useInternalChipDismissibleInput.d.ts +3 -3
- package/dist/Chips/InternalChipMultiSelect.d.ts +1 -1
- package/dist/Chips/InternalChipSingleSelect.d.ts +1 -1
- package/dist/Chips/index.js +165 -185
- package/dist/ConfirmationModal/ConfirmationModal.d.ts +1 -1
- package/dist/ConfirmationModal/index.js +11 -12
- package/dist/{ConfirmationModal-e95f46d7.js → ConfirmationModal-6a7beee2.js} +28 -31
- package/dist/Content/index.js +1 -1
- package/dist/{Content-18de5fbb.js → Content-05df8f7f.js} +2 -3
- package/dist/Countdown/Countdown.d.ts +1 -1
- package/dist/Countdown/computeTimeUnit.d.ts +1 -1
- package/dist/Countdown/index.js +15 -18
- package/dist/DataDump/index.js +9 -11
- package/dist/DataTable/Footer.d.ts +1 -1
- package/dist/DataTable/createTableSettings.d.ts +2 -2
- package/dist/DataTable/index.js +74 -106
- package/dist/DataTable/test-utilities/helpers.d.ts +1 -1
- package/dist/DataTable/types.d.ts +2 -2
- package/dist/DatePicker/DatePicker.d.ts +1 -1
- package/dist/DatePicker/index.js +4 -5
- package/dist/{DatePicker-cf813028.js → DatePicker-0696b0f0.js} +31 -36
- package/dist/DescriptionList/index.js +5 -10
- package/dist/Disclosure/index.js +8 -10
- package/dist/Divider/index.js +8 -10
- package/dist/Drawer/index.js +10 -14
- package/dist/Emphasis/index.js +2 -3
- package/dist/{Emphasis-75a3f411.js → Emphasis-23dc2a0a.js} +4 -6
- package/dist/FeatureSwitch/index.js +15 -17
- package/dist/Form/index.js +23 -33
- package/dist/FormField/FormFieldTypes.d.ts +2 -2
- package/dist/FormField/index.js +8 -8
- package/dist/{FormField-ac310b6f.js → FormField-79a0a375.js} +68 -76
- package/dist/FormatDate/index.js +2 -3
- package/dist/FormatEmail/index.js +2 -3
- package/dist/FormatFile/index.js +13 -14
- package/dist/{FormatFile-18e8a54a.js → FormatFile-3512f838.js} +33 -40
- package/dist/FormatRelativeDateTime/index.js +5 -6
- package/dist/FormatTime/index.js +6 -7
- package/dist/Gallery/GalleryTypes.d.ts +2 -2
- package/dist/Gallery/index.js +31 -33
- package/dist/Heading/index.js +2 -3
- package/dist/{Heading-a9a66964.js → Heading-7b203f7f.js} +4 -6
- package/dist/Icon/index.js +1 -1
- package/dist/{Icon-d5ad1a6d.js → Icon-405a216c.js} +7 -8
- package/dist/InlineLabel/InlineLabel.d.ts +1 -1
- package/dist/InlineLabel/index.js +4 -6
- package/dist/InputAvatar/index.js +15 -20
- package/dist/InputDate/index.js +15 -15
- package/dist/InputEmail/InputEmail.d.ts +1 -1
- package/dist/InputEmail/index.js +12 -12
- package/dist/InputFile/index.js +6 -6
- package/dist/{InputFile-e108a7f8.js → InputFile-5e0ed2b5.js} +48 -62
- package/dist/InputGroup/index.js +4 -5
- package/dist/InputNumber/index.js +22 -22
- package/dist/InputPassword/index.js +12 -12
- package/dist/InputText/InputText.d.ts +1 -1
- package/dist/InputText/index.js +9 -9
- package/dist/{InputText-70f7d947.js → InputText-95ea24f9.js} +23 -24
- package/dist/InputTime/index.js +27 -27
- package/dist/InputValidation/index.js +4 -5
- package/dist/{InputValidation-06a8a7ba.js → InputValidation-97dd0dcf.js} +7 -8
- package/dist/LightBox/index.js +5 -6
- package/dist/{LightBox-1ad62669.js → LightBox-dd1afa97.js} +22 -26
- package/dist/List/index.js +26 -32
- package/dist/Markdown/index.js +6 -7
- package/dist/{Markdown-b53e0308.js → Markdown-be2dcd0c.js} +12 -18
- package/dist/Menu/index.js +4 -5
- package/dist/{Menu-826cfb89.js → Menu-d6a7d17b.js} +31 -36
- package/dist/Modal/index.js +6 -7
- package/dist/{Modal-cc3bd7bf.js → Modal-757e83fd.js} +13 -17
- package/dist/MultiSelect/index.js +53 -60
- package/dist/MultiSelect/types.d.ts +1 -1
- package/dist/{Option-7d5de76b.js → Option-4b665afd.js} +3 -5
- package/dist/Page/Page.d.ts +1 -1
- package/dist/Page/index.js +21 -24
- package/dist/Popover/index.js +11 -13
- package/dist/ProgressBar/index.js +1 -1
- package/dist/{ProgressBar-e9a49129.js → ProgressBar-f028b159.js} +3 -4
- package/dist/RadioGroup/RadioOption.d.ts +2 -2
- package/dist/RadioGroup/index.js +9 -13
- package/dist/RecurringSelect/types.d.ts +2 -2
- package/dist/Select/Select.d.ts +1 -1
- package/dist/Select/index.js +9 -9
- package/dist/Spinner/index.js +1 -1
- package/dist/{Spinner-e4e9c8eb.js → Spinner-ae4c8a85.js} +5 -7
- package/dist/StatusLabel/StatusLabel.d.ts +1 -1
- package/dist/StatusLabel/index.js +6 -9
- package/dist/Switch/index.js +2 -3
- package/dist/{Switch-f03b70fc.js → Switch-7ac32f7b.js} +12 -16
- package/dist/Table/index.js +9 -17
- package/dist/Tabs/index.js +28 -34
- package/dist/Text/index.js +2 -3
- package/dist/{Text-e012fb46.js → Text-7ce00adb.js} +4 -5
- package/dist/Toast/Toast.d.ts +2 -2
- package/dist/Toast/index.js +31 -32
- package/dist/Tooltip/index.js +3 -4
- package/dist/Tooltip/useTooltipPositioning.d.ts +1 -1
- package/dist/{Tooltip-041feb00.js → Tooltip-1090a43d.js} +25 -28
- package/dist/Typography/Typography.d.ts +1 -1
- package/dist/Typography/index.js +1 -2
- package/dist/{Typography-fbe0ed6e.js → Typography-9262511f.js} +5 -7
- package/dist/tslib.es6-efe27175.js +38 -0
- package/package.json +3 -3
- package/dist/tslib.es6-5b50eb8e.js +0 -103
|
@@ -13,13 +13,11 @@ var css = "._2Vxgrs4a5osOKmp9b0i7ud {\n width: var(--space-larger);\n height:
|
|
|
13
13
|
var styles = {"spinner":"_2Vxgrs4a5osOKmp9b0i7ud","animationSpin":"_3bn_eCsItKh7HS1dEQIERv","small":"_3uMtJrFH9VsqhWvHLkG1SQ","inline-left":"_20N4X28gVsanpe8jhUzYxj","inline-right":"_20N4X28gVsanpe8jhUzYxj","inline":"_20N4X28gVsanpe8jhUzYxj"};
|
|
14
14
|
styleInject_es.styleInject(css);
|
|
15
15
|
|
|
16
|
-
function Spinner(
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
_b[styles.inline] = inline,
|
|
22
|
-
_b));
|
|
16
|
+
function Spinner({ size = "base", inline }) {
|
|
17
|
+
const spinnerStyles = classnames__default["default"](styles.spinner, {
|
|
18
|
+
[styles.small]: size === "small",
|
|
19
|
+
[styles.inline]: inline,
|
|
20
|
+
});
|
|
23
21
|
return (React__default["default"].createElement("div", { className: spinnerStyles, role: "alert", "aria-busy": true, "aria-label": "loading" }));
|
|
24
22
|
}
|
|
25
23
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
export
|
|
2
|
+
export type StatusType = "success" | "warning" | "critical" | "inactive" | "informative";
|
|
3
3
|
export interface StatusLabelType {
|
|
4
4
|
readonly statusLabel: string;
|
|
5
5
|
readonly statusType?: StatusType;
|
|
@@ -5,9 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
var React = require('react');
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var styleInject_es = require('../style-inject.es-dcee06b6.js');
|
|
8
|
-
var Text = require('../Text-
|
|
9
|
-
require('../Typography-
|
|
10
|
-
require('../tslib.es6-5b50eb8e.js');
|
|
8
|
+
var Text = require('../Text-7ce00adb.js');
|
|
9
|
+
require('../Typography-9262511f.js');
|
|
11
10
|
|
|
12
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
13
12
|
|
|
@@ -18,16 +17,14 @@ var css = ":root {\n --statusLabel-icon-diameter: calc(var(--space-base) - var(
|
|
|
18
17
|
var styles = {"statusLabelRow":"NUUO4mR41Qn5Pf0pzjhZe","statusIndicator":"_2XU8xQD0q92o9P2Ej5EdwP","labelTextEndAligned":"_3eQHL9hZlneMfEoGaF0dDv"};
|
|
19
18
|
styleInject_es.styleInject(css);
|
|
20
19
|
|
|
21
|
-
function StatusLabel(
|
|
22
|
-
|
|
23
|
-
var containerClassNames = classnames__default["default"](styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
|
|
20
|
+
function StatusLabel({ label, alignment = "start", status = "inactive", }) {
|
|
21
|
+
const containerClassNames = classnames__default["default"](styles.statusLabelRow, alignment === "end" && styles.labelTextEndAligned);
|
|
24
22
|
return (React__default["default"].createElement("div", { role: "status", className: containerClassNames },
|
|
25
23
|
React__default["default"].createElement(StatusLabelIcon, { status: status }),
|
|
26
24
|
React__default["default"].createElement(Text.Text, { size: "small", align: alignment }, label)));
|
|
27
25
|
}
|
|
28
|
-
function StatusLabelIcon(
|
|
29
|
-
var
|
|
30
|
-
return (React__default["default"].createElement("div", { style: { backgroundColor: "var(--color-" + status }, className: styles.statusIndicator }));
|
|
26
|
+
function StatusLabelIcon({ status }) {
|
|
27
|
+
return (React__default["default"].createElement("div", { style: { backgroundColor: `var(--color-${status}` }, className: styles.statusIndicator }));
|
|
31
28
|
}
|
|
32
29
|
|
|
33
30
|
exports.StatusLabel = StatusLabel;
|
package/dist/Switch/index.js
CHANGED
|
@@ -2,12 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Switch = require('../Switch-
|
|
6
|
-
require('../tslib.es6-5b50eb8e.js');
|
|
5
|
+
var Switch = require('../Switch-7ac32f7b.js');
|
|
7
6
|
require('react');
|
|
8
7
|
require('classnames');
|
|
9
8
|
require('../style-inject.es-dcee06b6.js');
|
|
10
|
-
require('../Typography-
|
|
9
|
+
require('../Typography-9262511f.js');
|
|
11
10
|
|
|
12
11
|
|
|
13
12
|
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var tslib_es6 = require('./tslib.es6-5b50eb8e.js');
|
|
4
3
|
var React = require('react');
|
|
5
4
|
var classnames = require('classnames');
|
|
6
5
|
var styleInject_es = require('./style-inject.es-dcee06b6.js');
|
|
7
|
-
var Typography = require('./Typography-
|
|
6
|
+
var Typography = require('./Typography-9262511f.js');
|
|
8
7
|
|
|
9
8
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
9
|
|
|
@@ -15,25 +14,23 @@ var css = ":root {\n --switch--pipSize: calc(var(--space-base) * 1.875);\n --s
|
|
|
15
14
|
var styles = {"track":"_1TYiN0KipS0HguS_tKWfjN","isChecked":"_2FTUgoy1jHHC6Zp3jZiFem","toggle":"_17OASjesGo_G7ojFH6iMvI","label":"_2QoMYBKIeOc4fkTMpeJ-0Y","pip":"JsY6cDqLe8d_25vumz97W","disabled":"_3uDSBuknYCWotuDOq6jYUD"};
|
|
16
15
|
styleInject_es.styleInject(css);
|
|
17
16
|
|
|
18
|
-
function Switch(
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
var value = providedValue != undefined ? providedValue : statefulValue;
|
|
23
|
-
var toggleSwitch = function () {
|
|
17
|
+
function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
|
|
18
|
+
const [statefulValue, setValue] = React.useState(false);
|
|
19
|
+
const value = providedValue != undefined ? providedValue : statefulValue;
|
|
20
|
+
const toggleSwitch = () => {
|
|
24
21
|
if (disabled) {
|
|
25
22
|
return;
|
|
26
23
|
}
|
|
27
|
-
|
|
24
|
+
const newValue = !value;
|
|
28
25
|
onChange && onChange(newValue);
|
|
29
26
|
if (providedValue == undefined) {
|
|
30
27
|
setValue(newValue);
|
|
31
28
|
}
|
|
32
29
|
};
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
const className = classnames__default["default"](styles.track, {
|
|
31
|
+
[styles.isChecked]: value,
|
|
32
|
+
[styles.disabled]: disabled,
|
|
33
|
+
});
|
|
37
34
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
38
35
|
React__default["default"].createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
|
|
39
36
|
React__default["default"].createElement("span", { className: styles.toggle },
|
|
@@ -42,9 +39,8 @@ function Switch(_a) {
|
|
|
42
39
|
React__default["default"].createElement(Label, { as: "Off", disabled: disabled }))),
|
|
43
40
|
React__default["default"].createElement("input", { name: name, type: "hidden", value: String(value) })));
|
|
44
41
|
}
|
|
45
|
-
function Label(
|
|
46
|
-
|
|
47
|
-
var getTextColor = function () {
|
|
42
|
+
function Label({ as, disabled }) {
|
|
43
|
+
const getTextColor = () => {
|
|
48
44
|
if (disabled) {
|
|
49
45
|
return "grey";
|
|
50
46
|
}
|
package/dist/Table/index.js
CHANGED
|
@@ -16,13 +16,11 @@ var css$1 = ".gByR7gRALLoMeErFwXopX {\n --border-color: var(--color-border);\n
|
|
|
16
16
|
var styles$1 = {"table":"gByR7gRALLoMeErFwXopX","row":"_2NFX_QOYJa4MyVRCz6JquI","header":"_3KP2hgsyvrNv4nEo3uCeR1","footer":"_1gl1OQ5klhRSWkmB-Q01kt"};
|
|
17
17
|
styleInject_es.styleInject(css$1);
|
|
18
18
|
|
|
19
|
-
function Table(
|
|
20
|
-
var children = _a.children;
|
|
19
|
+
function Table({ children }) {
|
|
21
20
|
return React__default["default"].createElement("table", { className: styles$1.table }, children);
|
|
22
21
|
}
|
|
23
22
|
|
|
24
|
-
function Row(
|
|
25
|
-
var children = _a.children;
|
|
23
|
+
function Row({ children }) {
|
|
26
24
|
return React__default["default"].createElement("tr", { className: styles$1.row }, children);
|
|
27
25
|
}
|
|
28
26
|
|
|
@@ -30,37 +28,31 @@ var css = ".Dq-OQpN9kItKfJsIaTjL6 {\n padding: var(--horizontal-inset) calc(var
|
|
|
30
28
|
var styles = {"cell":"Dq-OQpN9kItKfJsIaTjL6","left":"_3bBRzvtoTBozmykVE7XqOe","center":"_1f1IguDUp2Dy3ZhU_LCrgu","right":"_3cxjTRdABFJmE_6huhyU4R","numeric":"_3kcv5Lj_4g1u4sK_yR4QOu"};
|
|
31
29
|
styleInject_es.styleInject(css);
|
|
32
30
|
|
|
33
|
-
function Cell(
|
|
34
|
-
|
|
35
|
-
var className = classnames__default["default"](styles.cell, styles[align]);
|
|
31
|
+
function Cell({ children, align = "left" }) {
|
|
32
|
+
const className = classnames__default["default"](styles.cell, styles[align]);
|
|
36
33
|
return React__default["default"].createElement("td", { className: className }, children);
|
|
37
34
|
}
|
|
38
35
|
|
|
39
|
-
function CellNumeric(
|
|
40
|
-
var value = _a.value;
|
|
36
|
+
function CellNumeric({ value }) {
|
|
41
37
|
return (React__default["default"].createElement(Cell, { align: "right" },
|
|
42
38
|
React__default["default"].createElement("span", { className: styles.numeric }, value.toString())));
|
|
43
39
|
}
|
|
44
40
|
|
|
45
|
-
function CellCurrency(
|
|
46
|
-
var value = _a.value, _b = _a.currency, currency = _b === void 0 ? undefined : _b;
|
|
41
|
+
function CellCurrency({ value, currency = undefined, }) {
|
|
47
42
|
return React__default["default"].createElement(CellNumeric, { value: formatters.formatCurrency(value, currency) });
|
|
48
43
|
}
|
|
49
44
|
|
|
50
|
-
function Header(
|
|
51
|
-
var children = _a.children;
|
|
45
|
+
function Header({ children }) {
|
|
52
46
|
return (React__default["default"].createElement("thead", { className: styles$1.header },
|
|
53
47
|
React__default["default"].createElement(Row, null, children)));
|
|
54
48
|
}
|
|
55
49
|
|
|
56
|
-
function Footer(
|
|
57
|
-
var children = _a.children;
|
|
50
|
+
function Footer({ children }) {
|
|
58
51
|
return (React__default["default"].createElement("tfoot", { className: styles$1.footer },
|
|
59
52
|
React__default["default"].createElement(Row, null, children)));
|
|
60
53
|
}
|
|
61
54
|
|
|
62
|
-
function Body(
|
|
63
|
-
var children = _a.children;
|
|
55
|
+
function Body({ children }) {
|
|
64
56
|
return React__default["default"].createElement("tbody", null, children);
|
|
65
57
|
}
|
|
66
58
|
|
package/dist/Tabs/index.js
CHANGED
|
@@ -2,11 +2,10 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var classnames = require('classnames');
|
|
8
7
|
var styleInject_es = require('../style-inject.es-dcee06b6.js');
|
|
9
|
-
var Typography = require('../Typography-
|
|
8
|
+
var Typography = require('../Typography-9262511f.js');
|
|
10
9
|
|
|
11
10
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
12
11
|
|
|
@@ -17,61 +16,56 @@ var css = ":root {\n --tab--height: calc(var(--space-larger) + var(--space-smal
|
|
|
17
16
|
var styles = {"tabs":"_1XPiwZ-6hOSsu7HDy5yHmS","overflow":"RnC8r3uAcGujRbYT-p6nj","overflowRight":"_2gWu8IF5c8dDlBnYmABbrH","overflowLeft":"_3PQJmJy2Ol38mhvrp-VAjw","tabRow":"_2SHAj2nQK9vISS7i_Zfxuw","tab":"NClJjJvATDpU-FSQJ6ywe","selected":"_2ijhlnd8EAKFyri-YTtRjw","tabContent":"_3Y4JRV5DrYYp-_haxplE4P"};
|
|
18
17
|
styleInject_es.styleInject(css);
|
|
19
18
|
|
|
20
|
-
function Tabs(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
var activateTab = function (index) {
|
|
32
|
-
return function () {
|
|
19
|
+
function Tabs({ children }) {
|
|
20
|
+
const [activeTab, setActiveTab] = React.useState(0);
|
|
21
|
+
const [overflowRight, setOverflowRight] = React.useState(false);
|
|
22
|
+
const [overflowLeft, setOverflowLeft] = React.useState(false);
|
|
23
|
+
const tabRow = React.useRef();
|
|
24
|
+
const overflowClassNames = classnames__default["default"](styles.overflow, {
|
|
25
|
+
[styles.overflowRight]: overflowRight,
|
|
26
|
+
[styles.overflowLeft]: overflowLeft,
|
|
27
|
+
});
|
|
28
|
+
const activateTab = (index) => {
|
|
29
|
+
return () => {
|
|
33
30
|
setActiveTab(index);
|
|
34
31
|
};
|
|
35
32
|
};
|
|
36
|
-
|
|
37
|
-
|
|
33
|
+
const activeTabProps = React__default["default"].Children.toArray(children)[activeTab].props;
|
|
34
|
+
const handleOverflowing = () => {
|
|
38
35
|
if (tabRow.current) {
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
36
|
+
const scrollWidth = tabRow.current.scrollWidth;
|
|
37
|
+
const clientWidth = tabRow.current.clientWidth;
|
|
38
|
+
const maxScroll = scrollWidth - clientWidth;
|
|
39
|
+
const scrollPos = tabRow.current.scrollLeft;
|
|
43
40
|
if (scrollWidth > clientWidth) {
|
|
44
41
|
setOverflowRight(scrollPos >= 0 && scrollPos != maxScroll);
|
|
45
42
|
setOverflowLeft(scrollPos > 0 && scrollPos < scrollWidth);
|
|
46
43
|
}
|
|
47
44
|
}
|
|
48
45
|
};
|
|
49
|
-
React.useEffect(
|
|
46
|
+
React.useEffect(() => {
|
|
50
47
|
handleOverflowing();
|
|
51
48
|
tabRow.current &&
|
|
52
49
|
tabRow.current.addEventListener("scroll", handleOverflowing);
|
|
53
|
-
return
|
|
50
|
+
return () => {
|
|
54
51
|
window.removeEventListener("scroll", handleOverflowing);
|
|
55
52
|
};
|
|
56
53
|
});
|
|
57
54
|
return (React__default["default"].createElement("div", { className: styles.tabs },
|
|
58
55
|
React__default["default"].createElement("div", { className: overflowClassNames },
|
|
59
56
|
React__default["default"].createElement("ul", { role: "tablist", className: styles.tabRow, ref: tabRow },
|
|
60
|
-
React__default["default"].createElement("li", { role: "presentation" }, React__default["default"].Children.map(children,
|
|
57
|
+
React__default["default"].createElement("li", { role: "presentation" }, React__default["default"].Children.map(children, (tab, index) => (React__default["default"].createElement(InternalTab, { label: tab.props.label, selected: activeTab === index, activateTab: activateTab(index), onClick: tab.props.onClick })))))),
|
|
61
58
|
React__default["default"].createElement("section", { role: "tabpanel", className: styles.tabContent, "aria-label": activeTabProps.label }, activeTabProps.children)));
|
|
62
59
|
}
|
|
63
|
-
function Tab(
|
|
64
|
-
var label = _a.label;
|
|
60
|
+
function Tab({ label }) {
|
|
65
61
|
return React__default["default"].createElement(React__default["default"].Fragment, null, label);
|
|
66
62
|
}
|
|
67
|
-
function InternalTab(
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
var color = selected ? "green" : "heading";
|
|
74
|
-
return (React__default["default"].createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: function (event) {
|
|
63
|
+
function InternalTab({ label, selected, activateTab, onClick = () => {
|
|
64
|
+
return;
|
|
65
|
+
}, }) {
|
|
66
|
+
const className = classnames__default["default"](styles.tab, { [styles.selected]: selected });
|
|
67
|
+
const color = selected ? "green" : "heading";
|
|
68
|
+
return (React__default["default"].createElement("button", { type: "button", role: "tab", id: label, className: className, onClick: event => {
|
|
75
69
|
activateTab();
|
|
76
70
|
onClick(event);
|
|
77
71
|
} },
|
package/dist/Text/index.js
CHANGED
|
@@ -2,10 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Text = require('../Text-
|
|
5
|
+
var Text = require('../Text-7ce00adb.js');
|
|
6
6
|
require('react');
|
|
7
|
-
require('../Typography-
|
|
8
|
-
require('../tslib.es6-5b50eb8e.js');
|
|
7
|
+
require('../Typography-9262511f.js');
|
|
9
8
|
require('classnames');
|
|
10
9
|
require('../style-inject.es-dcee06b6.js');
|
|
11
10
|
|
|
@@ -1,15 +1,14 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
var React = require('react');
|
|
4
|
-
var Typography = require('./Typography-
|
|
4
|
+
var Typography = require('./Typography-9262511f.js');
|
|
5
5
|
|
|
6
6
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
7
7
|
|
|
8
8
|
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
9
9
|
|
|
10
|
-
function Text(
|
|
11
|
-
|
|
12
|
-
var textColors = {
|
|
10
|
+
function Text({ variation = "default", size = "base", align = "start", children, maxLines = "unlimited", }) {
|
|
11
|
+
const textColors = {
|
|
13
12
|
default: "text",
|
|
14
13
|
subdued: "textSecondary",
|
|
15
14
|
success: "success",
|
|
@@ -18,7 +17,7 @@ function Text(_a) {
|
|
|
18
17
|
info: "informative",
|
|
19
18
|
disabled: "disabled",
|
|
20
19
|
};
|
|
21
|
-
|
|
20
|
+
const maxLineToNumber = {
|
|
22
21
|
single: 1,
|
|
23
22
|
small: 2,
|
|
24
23
|
base: 4,
|
package/dist/Toast/Toast.d.ts
CHANGED
|
@@ -9,8 +9,8 @@ interface ActionToastProps extends BaseToastProps {
|
|
|
9
9
|
action(): void;
|
|
10
10
|
actionLabel: string;
|
|
11
11
|
}
|
|
12
|
-
export
|
|
13
|
-
|
|
12
|
+
export type ToastProps = XOR<BaseToastProps, ActionToastProps>;
|
|
13
|
+
type ToastPropsInternal = Omit<ToastProps, "id">;
|
|
14
14
|
export interface ToastRef {
|
|
15
15
|
add(props: ToastProps): void;
|
|
16
16
|
}
|
package/dist/Toast/index.js
CHANGED
|
@@ -2,14 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var tslib_es6 = require('../tslib.es6-5b50eb8e.js');
|
|
6
5
|
var React = require('react');
|
|
7
6
|
var client = require('react-dom/client');
|
|
8
7
|
var framerMotion = require('framer-motion');
|
|
9
8
|
var styleInject_es = require('../style-inject.es-dcee06b6.js');
|
|
10
|
-
var Icon = require('../Icon-
|
|
11
|
-
var Button = require('../Button-
|
|
12
|
-
var Typography = require('../Typography-
|
|
9
|
+
var Icon = require('../Icon-405a216c.js');
|
|
10
|
+
var Button = require('../Button-16e043ec.js');
|
|
11
|
+
var Typography = require('../Typography-9262511f.js');
|
|
13
12
|
require('@jobber/design');
|
|
14
13
|
require('classnames');
|
|
15
14
|
require('react-router-dom');
|
|
@@ -22,13 +21,12 @@ var css = "._1jL4uuxcwlNL5YnUj_ua2g {\n position: relative;\n z-index: var(--e
|
|
|
22
21
|
var styles = {"wrapper":"_1jL4uuxcwlNL5YnUj_ua2g","container":"_1OJBJo55SADOx1bC1JQBfB","toast":"_3M3dXN6cHdqE_9yCnTwXuA","slice":"_2JTk_JuoYf4H1PIiFTxwK","icon":"_3kimXYOdDlyI9bxgiFJMgZ","button":"_1izxhu6XCPAQla9emS_Wn_","action":"FMxl_EoRhLki7i_UOLCT4"};
|
|
23
22
|
styleInject_es.styleInject(css);
|
|
24
23
|
|
|
25
|
-
function Toast(
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
return (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(framerMotion.motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: function () { return stopTimer(); }, onMouseLeave: function () { return startTimer(); }, exit: {
|
|
24
|
+
function Toast({ message, variation = "success", action, actionLabel, }) {
|
|
25
|
+
const [visible, setVisible] = React.useState(true);
|
|
26
|
+
const icon = getIcon();
|
|
27
|
+
let timer;
|
|
28
|
+
React.useEffect(() => startTimer(), []);
|
|
29
|
+
return (React__default["default"].createElement(framerMotion.AnimatePresence, null, visible && (React__default["default"].createElement(framerMotion.motion.div, { className: styles.toast, initial: { opacity: 0, scale: 0.8 }, animate: { opacity: 1, scale: 1 }, onMouseEnter: () => stopTimer(), onMouseLeave: () => startTimer(), exit: {
|
|
32
30
|
opacity: 0,
|
|
33
31
|
scale: 0.8,
|
|
34
32
|
height: 0,
|
|
@@ -38,11 +36,11 @@ function Toast(_a) {
|
|
|
38
36
|
React__default["default"].createElement("div", { className: styles.icon },
|
|
39
37
|
React__default["default"].createElement(Icon.Icon, { color: icon.color, name: icon.name })),
|
|
40
38
|
React__default["default"].createElement(Typography.Typography, { element: "span", size: "large" }, message),
|
|
41
|
-
action && (React__default["default"].createElement(Button.Button, { label:
|
|
39
|
+
action && (React__default["default"].createElement(Button.Button, { label: `${actionLabel}`, onClick: action, type: "tertiary" })),
|
|
42
40
|
React__default["default"].createElement("div", { className: styles.button },
|
|
43
41
|
React__default["default"].createElement(Button.Button, { icon: "remove", ariaLabel: "Hide Notification", onClick: handleToastClose, type: "tertiary", variation: "subtle" })))))));
|
|
44
42
|
function startTimer() {
|
|
45
|
-
timer = setTimeout(
|
|
43
|
+
timer = setTimeout(() => handleToastClose(), getTimeout());
|
|
46
44
|
}
|
|
47
45
|
function stopTimer() {
|
|
48
46
|
clearTimeout(timer);
|
|
@@ -51,9 +49,9 @@ function Toast(_a) {
|
|
|
51
49
|
setVisible(false);
|
|
52
50
|
}
|
|
53
51
|
function getTimeout() {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
52
|
+
const min = 5000;
|
|
53
|
+
const max = 10000;
|
|
54
|
+
const time = message.length * 200;
|
|
57
55
|
if (time < min)
|
|
58
56
|
return min;
|
|
59
57
|
if (time > max)
|
|
@@ -72,41 +70,42 @@ function Toast(_a) {
|
|
|
72
70
|
}
|
|
73
71
|
}
|
|
74
72
|
|
|
75
|
-
|
|
76
|
-
|
|
73
|
+
const targetId = "atlantis-toast-element";
|
|
74
|
+
let target = document.querySelector(`#${targetId}`);
|
|
77
75
|
if (!target) {
|
|
78
76
|
target = document.createElement("div");
|
|
79
77
|
target.id = targetId;
|
|
80
78
|
target.classList.add(styles.wrapper);
|
|
81
79
|
document.body.appendChild(target);
|
|
82
80
|
}
|
|
83
|
-
|
|
81
|
+
const root = client.createRoot(target);
|
|
84
82
|
function showToast(props) {
|
|
85
83
|
// Ensure target and body is still there when rendering the toast. This is due
|
|
86
84
|
// to an issue with ReactDOM createRoot assuming document is always there and
|
|
87
85
|
// Jest taking the document down.
|
|
88
86
|
if (document.body.contains(target)) {
|
|
89
|
-
root.render(React__default["default"].createElement(ToasterOven,
|
|
87
|
+
root.render(React__default["default"].createElement(ToasterOven, Object.assign({}, props)));
|
|
90
88
|
}
|
|
91
89
|
}
|
|
92
|
-
|
|
90
|
+
const ToastContainer = React.forwardRef(ToastInternal);
|
|
93
91
|
function ToasterOven(props) {
|
|
94
|
-
|
|
95
|
-
React.useEffect(
|
|
92
|
+
const toastRef = React.useRef();
|
|
93
|
+
React.useEffect(() => toastRef.current.add(props));
|
|
96
94
|
return React__default["default"].createElement(ToastContainer, { ref: toastRef });
|
|
97
95
|
}
|
|
98
96
|
function ToastInternal(_, ref) {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
React.useImperativeHandle(ref,
|
|
102
|
-
add:
|
|
97
|
+
const [toastKey, setToastKey] = React.useState(0);
|
|
98
|
+
const [toasts, setToasts] = React.useState([]);
|
|
99
|
+
React.useImperativeHandle(ref, () => ({
|
|
100
|
+
add: props => {
|
|
103
101
|
setToastKey(toastKey + 1);
|
|
104
|
-
setToasts(
|
|
105
|
-
|
|
106
|
-
|
|
102
|
+
setToasts([
|
|
103
|
+
Object.assign(Object.assign({}, props), { id: toastKey }),
|
|
104
|
+
...toasts,
|
|
105
|
+
]);
|
|
107
106
|
},
|
|
108
|
-
})
|
|
109
|
-
return (React__default["default"].createElement("div", { className: styles.container }, toasts.map(
|
|
107
|
+
}));
|
|
108
|
+
return (React__default["default"].createElement("div", { className: styles.container }, toasts.map(toast => (React__default["default"].createElement(Toast, Object.assign({}, toast, { key: toast.id }))))));
|
|
110
109
|
}
|
|
111
110
|
|
|
112
111
|
exports.showToast = showToast;
|
package/dist/Tooltip/index.js
CHANGED
|
@@ -2,16 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var Tooltip = require('../Tooltip-
|
|
6
|
-
require('../tslib.es6-5b50eb8e.js');
|
|
5
|
+
var Tooltip = require('../Tooltip-1090a43d.js');
|
|
7
6
|
require('react');
|
|
8
7
|
require('classnames');
|
|
9
8
|
require('react-dom');
|
|
10
9
|
require('framer-motion');
|
|
11
10
|
require('../style-inject.es-dcee06b6.js');
|
|
12
11
|
require('react-popper');
|
|
13
|
-
require('../Text-
|
|
14
|
-
require('../Typography-
|
|
12
|
+
require('../Text-7ce00adb.js');
|
|
13
|
+
require('../Typography-9262511f.js');
|
|
15
14
|
|
|
16
15
|
|
|
17
16
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare function useTooltipPositioning(): {
|
|
3
|
-
placement: "
|
|
3
|
+
placement: import("@popperjs/core").Placement | undefined;
|
|
4
4
|
shadowRef: import("react").RefObject<HTMLSpanElement>;
|
|
5
5
|
setArrowRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
|
|
6
6
|
setTooltipRef: import("react").Dispatch<import("react").SetStateAction<HTMLDivElement | null | undefined>>;
|