@sproutsocial/racine 22.5.1 → 23.1.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/CHANGELOG.md +18 -0
- package/README.md +3 -3
- package/__flow__/Toast/Toast.flow.js +4 -0
- package/commonjs/Avatar/Avatar.js +24 -16
- package/commonjs/Badge/Badge.js +20 -13
- package/commonjs/Banner/Banner.js +35 -25
- package/commonjs/Box/Box.js +7 -2
- package/commonjs/Breadcrumb/Breadcrumb.js +36 -23
- package/commonjs/Button/Button.js +11 -3
- package/commonjs/Card/Card.js +25 -18
- package/commonjs/Card/subComponents.js +32 -15
- package/commonjs/CharacterCounter/CharacterCounter.js +7 -3
- package/commonjs/ChartLegend/ChartLegend.js +10 -3
- package/commonjs/ChartLegend/useChartLabels.js +12 -10
- package/commonjs/Checkbox/Checkbox.js +55 -45
- package/commonjs/Checkbox/styles.js +20 -17
- package/commonjs/Collapsible/Collapsible.js +22 -16
- package/commonjs/DatePicker/DateRangePicker/DateRangePicker.js +26 -16
- package/commonjs/DatePicker/DateRangePicker/StatefulDateRangePicker.js +7 -2
- package/commonjs/DatePicker/SingleDatePicker/SingleDatePicker.js +24 -14
- package/commonjs/DatePicker/SingleDatePicker/StatefulSingleDatePicker.js +7 -2
- package/commonjs/DatePicker/common.js +8 -6
- package/commonjs/Drawer/Drawer.js +160 -113
- package/commonjs/EmptyState/EmptyState.js +44 -31
- package/commonjs/Fieldset/Fieldset.js +31 -14
- package/commonjs/FormField/FormField.js +37 -31
- package/commonjs/Icon/Icon.js +35 -30
- package/commonjs/Image/Image.js +5 -3
- package/commonjs/Indicator/Indicator.js +12 -6
- package/commonjs/Input/Input.js +57 -51
- package/commonjs/KeyboardKey/KeyboardKey.js +12 -3
- package/commonjs/Label/Label.js +15 -9
- package/commonjs/Link/Link.js +10 -3
- package/commonjs/Listbox/Listbox.js +16 -13
- package/commonjs/Loader/Loader.js +9 -3
- package/commonjs/LoaderButton/LoaderButton.js +28 -18
- package/commonjs/Menu/Menu.js +128 -107
- package/commonjs/Menu/utils/descendants.js +6 -6
- package/commonjs/Message/Message.js +79 -59
- package/commonjs/Modal/Modal.js +54 -31
- package/commonjs/Modal/styles.js +8 -4
- package/commonjs/Numeral/Numeral.js +46 -13
- package/commonjs/Numeral/index.js +12 -3
- package/commonjs/PartnerLogo/PartnerLogo.js +22 -12
- package/commonjs/Radio/Radio.js +28 -22
- package/commonjs/SegmentedControl/SegmentedControl.js +38 -24
- package/commonjs/Select/Select.js +32 -25
- package/commonjs/SpotIllustration/SpotIllustration.js +13 -5
- package/commonjs/Stack/Stack.js +15 -8
- package/commonjs/Switch/Switch.js +14 -7
- package/commonjs/Table/Table.js +65 -45
- package/commonjs/TableCell/TableCell.js +6 -3
- package/commonjs/TableHeaderCell/TableHeaderCell.js +20 -12
- package/commonjs/TableRowAccordion/TableRowAccordion.js +35 -29
- package/commonjs/Tabs/Tabs.js +37 -30
- package/commonjs/Text/Text.js +10 -3
- package/commonjs/Textarea/Textarea.js +37 -32
- package/commonjs/ThemeProvider/index.js +8 -5
- package/commonjs/Toast/Toast.js +127 -91
- package/commonjs/Toast/index.js +15 -15
- package/commonjs/Toast/styles.js +56 -30
- package/commonjs/ToggleHint/ToggleHint.js +11 -5
- package/commonjs/Token/Token.js +39 -25
- package/commonjs/TokenInput/TokenInput.js +55 -47
- package/commonjs/TokenInput/TokenScreenReaderStatus.js +5 -3
- package/commonjs/Tooltip/Tooltip.js +34 -27
- package/dist/types/Avatar/Avatar.d.ts.map +1 -1
- package/dist/types/Badge/BadgeTypes.d.ts +0 -1
- package/dist/types/Badge/BadgeTypes.d.ts.map +1 -1
- package/dist/types/Badge/styles.d.ts +1 -1
- package/dist/types/Badge/styles.d.ts.map +1 -1
- package/dist/types/Box/BoxTypes.d.ts +0 -1
- package/dist/types/Box/BoxTypes.d.ts.map +1 -1
- package/dist/types/Box/styles.d.ts +1 -1
- package/dist/types/Box/styles.d.ts.map +1 -1
- package/dist/types/Button/Button.d.ts +1 -1
- package/dist/types/Button/Button.d.ts.map +1 -1
- package/dist/types/Card/subComponents.d.ts.map +1 -1
- package/dist/types/Card/utils.d.ts +0 -2
- package/dist/types/Card/utils.d.ts.map +1 -1
- package/dist/types/Checkbox/Checkbox.d.ts.map +1 -1
- package/dist/types/Collapsible/styles.d.ts +2 -3
- package/dist/types/Collapsible/styles.d.ts.map +1 -1
- package/dist/types/DatePicker/DateRangePicker/DateRangePickerTypes.d.ts +0 -1
- package/dist/types/DatePicker/DateRangePicker/DateRangePickerTypes.d.ts.map +1 -1
- package/dist/types/DatePicker/SingleDatePicker/SingleDatePickerTypes.d.ts +0 -1
- package/dist/types/DatePicker/SingleDatePicker/SingleDatePickerTypes.d.ts.map +1 -1
- package/dist/types/DatePicker/common.d.ts.map +1 -1
- package/dist/types/DatePicker/styles.d.ts +0 -1
- package/dist/types/DatePicker/styles.d.ts.map +1 -1
- package/dist/types/Drawer/Drawer.d.ts.map +1 -1
- package/dist/types/Drawer/DrawerTypes.d.ts +6 -3
- package/dist/types/Drawer/DrawerTypes.d.ts.map +1 -1
- package/dist/types/Drawer/styles.d.ts +0 -1
- package/dist/types/Drawer/styles.d.ts.map +1 -1
- package/dist/types/Fieldset/styles.d.ts +0 -1
- package/dist/types/Fieldset/styles.d.ts.map +1 -1
- package/dist/types/Icon/styles.d.ts +1 -1
- package/dist/types/Icon/styles.d.ts.map +1 -1
- package/dist/types/Image/Image.d.ts.map +1 -1
- package/dist/types/Input/Input.d.ts.map +1 -1
- package/dist/types/Input/styles.d.ts +3 -3
- package/dist/types/Input/styles.d.ts.map +1 -1
- package/dist/types/Listbox/ListboxTypes.d.ts +1 -1
- package/dist/types/Listbox/ListboxTypes.d.ts.map +1 -1
- package/dist/types/Loader/LoaderTypes.d.ts +0 -1
- package/dist/types/Loader/LoaderTypes.d.ts.map +1 -1
- package/dist/types/Menu/MenuTypes.d.ts +4 -4
- package/dist/types/Menu/MenuTypes.d.ts.map +1 -1
- package/dist/types/Menu/styles.d.ts +0 -1
- package/dist/types/Menu/styles.d.ts.map +1 -1
- package/dist/types/Menu/utils/descendants.d.ts.map +1 -1
- package/dist/types/Menu/utils/hooks.d.ts +0 -2
- package/dist/types/Menu/utils/hooks.d.ts.map +1 -1
- package/dist/types/Message/Message.d.ts +1 -1
- package/dist/types/Message/Message.d.ts.map +1 -1
- package/dist/types/Message/styles.d.ts +0 -2
- package/dist/types/Message/styles.d.ts.map +1 -1
- package/dist/types/Modal/styles.d.ts +3 -3
- package/dist/types/Modal/styles.d.ts.map +1 -1
- package/dist/types/Numeral/Numeral.d.ts +3 -1
- package/dist/types/Numeral/Numeral.d.ts.map +1 -1
- package/dist/types/Numeral/__tests__/features/testNumeral.d.ts.map +1 -1
- package/dist/types/Numeral/index.d.ts +2 -1
- package/dist/types/Numeral/index.d.ts.map +1 -1
- package/dist/types/Radio/Radio.d.ts.map +1 -1
- package/dist/types/Radio/styles.d.ts +3 -3
- package/dist/types/Radio/styles.d.ts.map +1 -1
- package/dist/types/SegmentedControl/styles.d.ts +0 -1
- package/dist/types/SegmentedControl/styles.d.ts.map +1 -1
- package/dist/types/Select/Select.d.ts.map +1 -1
- package/dist/types/Skeleton/Skeleton.d.ts +0 -1
- package/dist/types/Skeleton/Skeleton.d.ts.map +1 -1
- package/dist/types/StatefulStory.d.ts +0 -1
- package/dist/types/StatefulStory.d.ts.map +1 -1
- package/dist/types/TableHeaderCell/TableHeaderCell.d.ts.map +1 -1
- package/dist/types/TableHeaderCell/styles.d.ts +1 -1
- package/dist/types/TableHeaderCell/styles.d.ts.map +1 -1
- package/dist/types/Tabs/Tabs.d.ts.map +1 -1
- package/dist/types/Textarea/Textarea.d.ts.map +1 -1
- package/dist/types/ThemeProvider/index.d.ts +1 -1
- package/dist/types/ThemeProvider/index.d.ts.map +1 -1
- package/dist/types/Toast/Toast.d.ts +22 -2
- package/dist/types/Toast/Toast.d.ts.map +1 -1
- package/dist/types/Toast/ToastTypes.d.ts +27 -13
- package/dist/types/Toast/ToastTypes.d.ts.map +1 -1
- package/dist/types/Toast/index.d.ts +2 -4
- package/dist/types/Toast/index.d.ts.map +1 -1
- package/dist/types/Toast/styles.d.ts +10 -16
- package/dist/types/Toast/styles.d.ts.map +1 -1
- package/dist/types/TokenInput/TokenInput.d.ts +1 -1
- package/dist/types/TokenInput/TokenInput.d.ts.map +1 -1
- package/dist/types/Tooltip/TooltipTypes.d.ts +2 -2
- package/dist/types/Tooltip/TooltipTypes.d.ts.map +1 -1
- package/dist/types/Tooltip/styles.d.ts +0 -1
- package/dist/types/Tooltip/styles.d.ts.map +1 -1
- package/dist/types/themes/dark/theme.d.ts +2 -2
- package/dist/types/themes/dark/theme.d.ts.map +1 -1
- package/dist/types/utils/hooks.d.ts.map +1 -1
- package/dist/types/utils/react-testing-library.d.ts +109 -169
- package/dist/types/utils/react-testing-library.d.ts.map +1 -1
- package/dist/types/utils/responsiveProps/index.d.ts.map +1 -1
- package/lib/Avatar/Avatar.js +25 -16
- package/lib/Badge/Badge.js +22 -13
- package/lib/Banner/Banner.js +37 -25
- package/lib/Box/Box.js +8 -2
- package/lib/Breadcrumb/Breadcrumb.js +37 -23
- package/lib/Button/Button.js +11 -3
- package/lib/Card/Card.js +17 -8
- package/lib/Card/subComponents.js +35 -15
- package/lib/CharacterCounter/CharacterCounter.js +7 -3
- package/lib/ChartLegend/ChartLegend.js +11 -3
- package/lib/ChartLegend/useChartLabels.js +13 -10
- package/lib/Checkbox/Checkbox.js +56 -45
- package/lib/Checkbox/styles.js +20 -17
- package/lib/Collapsible/Collapsible.js +22 -16
- package/lib/DatePicker/DateRangePicker/DateRangePicker.js +29 -16
- package/lib/DatePicker/DateRangePicker/StatefulDateRangePicker.js +8 -2
- package/lib/DatePicker/SingleDatePicker/SingleDatePicker.js +27 -14
- package/lib/DatePicker/SingleDatePicker/StatefulSingleDatePicker.js +8 -2
- package/lib/DatePicker/common.js +8 -6
- package/lib/Drawer/Drawer.js +159 -111
- package/lib/EmptyState/EmptyState.js +46 -31
- package/lib/Fieldset/Fieldset.js +33 -14
- package/lib/FormField/FormField.js +38 -31
- package/lib/Icon/Icon.js +36 -30
- package/lib/Image/Image.js +5 -3
- package/lib/Indicator/Indicator.js +13 -6
- package/lib/Input/Input.js +57 -49
- package/lib/KeyboardKey/KeyboardKey.js +12 -3
- package/lib/Label/Label.js +16 -9
- package/lib/Link/Link.js +11 -3
- package/lib/Listbox/Listbox.js +17 -13
- package/lib/Loader/Loader.js +9 -3
- package/lib/LoaderButton/LoaderButton.js +30 -18
- package/lib/Menu/Menu.js +128 -104
- package/lib/Menu/utils/descendants.js +5 -4
- package/lib/Message/Message.js +80 -59
- package/lib/Modal/Modal.js +56 -31
- package/lib/Modal/styles.js +8 -2
- package/lib/Numeral/Numeral.js +48 -12
- package/lib/Numeral/index.js +2 -1
- package/lib/PartnerLogo/PartnerLogo.js +22 -12
- package/lib/Radio/Radio.js +29 -22
- package/lib/SegmentedControl/SegmentedControl.js +40 -24
- package/lib/Select/Select.js +33 -25
- package/lib/SpotIllustration/SpotIllustration.js +13 -5
- package/lib/Stack/Stack.js +17 -8
- package/lib/Switch/Switch.js +15 -7
- package/lib/Table/Table.js +65 -43
- package/lib/TableCell/TableCell.js +5 -2
- package/lib/TableHeaderCell/TableHeaderCell.js +20 -11
- package/lib/TableRowAccordion/TableRowAccordion.js +35 -28
- package/lib/Tabs/Tabs.js +37 -30
- package/lib/Text/Text.js +11 -3
- package/lib/Textarea/Textarea.js +37 -30
- package/lib/ThemeProvider/index.js +8 -3
- package/lib/Toast/Toast.js +130 -90
- package/lib/Toast/index.js +3 -5
- package/lib/Toast/styles.js +55 -26
- package/lib/ToggleHint/ToggleHint.js +12 -5
- package/lib/Token/Token.js +42 -25
- package/lib/TokenInput/TokenInput.js +56 -47
- package/lib/TokenInput/TokenScreenReaderStatus.js +5 -3
- package/lib/Tooltip/Tooltip.js +34 -27
- package/package.json +40 -36
- package/commonjs/Drawer/SlideTransition.js +0 -47
- package/commonjs/Popout/Popout.js +0 -313
- package/commonjs/Popout/PopoutTypes.js +0 -5
- package/commonjs/Popout/index.js +0 -30
- package/commonjs/Popout/styles.js +0 -13
- package/dist/types/Drawer/SlideTransition.d.ts +0 -15
- package/dist/types/Drawer/SlideTransition.d.ts.map +0 -1
- package/dist/types/Popout/Popout.d.ts +0 -14
- package/dist/types/Popout/Popout.d.ts.map +0 -1
- package/dist/types/Popout/PopoutTypes.d.ts +0 -90
- package/dist/types/Popout/PopoutTypes.d.ts.map +0 -1
- package/dist/types/Popout/index.d.ts +0 -5
- package/dist/types/Popout/index.d.ts.map +0 -1
- package/dist/types/Popout/styles.d.ts +0 -2
- package/dist/types/Popout/styles.d.ts.map +0 -1
- package/lib/Drawer/SlideTransition.js +0 -38
- package/lib/Popout/Popout.js +0 -303
- package/lib/Popout/PopoutTypes.js +0 -1
- package/lib/Popout/index.js +0 -4
- package/lib/Popout/styles.js +0 -6
package/lib/Toast/styles.js
CHANGED
|
@@ -1,34 +1,63 @@
|
|
|
1
|
-
import styled
|
|
1
|
+
import styled from "styled-components";
|
|
2
2
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
3
3
|
// @ts-ignore
|
|
4
4
|
import "react-toastify/dist/ReactToastify.css";
|
|
5
5
|
import Box from "../Box";
|
|
6
|
-
import
|
|
7
|
-
var
|
|
6
|
+
import { ToastContainer } from "react-toastify";
|
|
7
|
+
export var TOAST_Z_INDEX = 9999;
|
|
8
|
+
export var Container = styled(Box).withConfig({
|
|
8
9
|
displayName: "styles__Container",
|
|
9
10
|
componentId: "sc-oqrk23-0"
|
|
10
|
-
})(["display:flex;align-items:center;font-family:", ";", " position:relative;
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
return
|
|
16
|
-
}, function (
|
|
17
|
-
|
|
11
|
+
})(["display:flex;align-items:center;gap:", ";font-family:", ";", " position:relative;padding:", ";"], function (_ref) {
|
|
12
|
+
var theme = _ref.theme;
|
|
13
|
+
return theme.space[350];
|
|
14
|
+
}, function (_ref2) {
|
|
15
|
+
var theme = _ref2.theme;
|
|
16
|
+
return theme.fontFamily;
|
|
17
|
+
}, function (_ref3) {
|
|
18
|
+
var theme = _ref3.theme;
|
|
19
|
+
return theme.typography[200];
|
|
20
|
+
}, function (_ref4) {
|
|
21
|
+
var theme = _ref4.theme;
|
|
22
|
+
return theme.space[350];
|
|
18
23
|
});
|
|
19
|
-
export var
|
|
20
|
-
|
|
24
|
+
export var ToastRoot = styled(ToastContainer).attrs({
|
|
25
|
+
toastClassName: "Toastify-toast-overrides",
|
|
26
|
+
hideProgressBar: true,
|
|
27
|
+
closeButton: false,
|
|
28
|
+
icon: false,
|
|
29
|
+
position: "bottom-right"
|
|
30
|
+
}).withConfig({
|
|
31
|
+
displayName: "styles__ToastRoot",
|
|
21
32
|
componentId: "sc-oqrk23-1"
|
|
22
|
-
})(["
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
return
|
|
31
|
-
}, function (
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
33
|
+
})(["--toastify-z-index:", ";--toastify-toast-offset:", ";--toastify-toast-width:360px;--toastify-toast-min-height:48px;--toastify-toast-max-height:70vh;--toastify-toast-bd-radius:", ";--toastify-toast-background:", ";--toastify-toast-bottom:0;padding:0;.Toastify-toast-overrides{background:", ";color:", ";box-shadow:", ";padding:0;margin-bottom:var(--toastify-toast-offset);}.Toastify__toast-body{padding:0;margin:0;}@media only screen and (max-width:480px){.Toastify-container-overrides{min-width:initial !important;}}@keyframes SproutToast__zoom-in{from{opacity:0;transform:scale3d(0.3,0.3,0.3);}50%{opacity:1;}}@keyframes SproutToast__zoom-out{from{opacity:1;}50%{opacity:0;transform:scale3d(0.3,0.3,0.3) translate3d(0,var(--y),0);}to{opacity:0;}}.SproutToast__zoom-in{animation:SproutToast__zoom-in ", " ", " both;}.SproutToast__zoom-out{animation:SproutToast__zoom-out ", " ", " both;}@keyframes SproutToast__none-in{from{opacity:0;}to{opacity:1;}}@keyframes SproutToast__none-out{from{opacity:1;}to{opacity:0;}}.SproutToast__none-in{animation:SproutToast__none-in 0s both;}.SproutToast__none-out{animation:SproutToast__none-out 0s both;}"], TOAST_Z_INDEX, function (_ref5) {
|
|
34
|
+
var theme = _ref5.theme;
|
|
35
|
+
return theme.space[400];
|
|
36
|
+
}, function (_ref6) {
|
|
37
|
+
var theme = _ref6.theme;
|
|
38
|
+
return theme.radii[400];
|
|
39
|
+
}, function (_ref7) {
|
|
40
|
+
var theme = _ref7.theme;
|
|
41
|
+
return theme.colors.container.background.base;
|
|
42
|
+
}, function (_ref8) {
|
|
43
|
+
var theme = _ref8.theme;
|
|
44
|
+
return theme.colors.container.background.base;
|
|
45
|
+
}, function (_ref9) {
|
|
46
|
+
var theme = _ref9.theme;
|
|
47
|
+
return theme.colors.text.body;
|
|
48
|
+
}, function (_ref10) {
|
|
49
|
+
var theme = _ref10.theme;
|
|
50
|
+
return theme.shadows.low;
|
|
51
|
+
}, function (_ref11) {
|
|
52
|
+
var theme = _ref11.theme;
|
|
53
|
+
return theme.duration.medium;
|
|
54
|
+
}, function (_ref12) {
|
|
55
|
+
var theme = _ref12.theme;
|
|
56
|
+
return theme.easing.ease_out;
|
|
57
|
+
}, function (_ref13) {
|
|
58
|
+
var theme = _ref13.theme;
|
|
59
|
+
return theme.duration.slow;
|
|
60
|
+
}, function (_ref14) {
|
|
61
|
+
var theme = _ref14.theme;
|
|
62
|
+
return theme.easing.ease_in;
|
|
63
|
+
});
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
var _excluded = ["icon", "isOpen", "openString", "closeString", "qa", "className", "color"];
|
|
2
2
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
|
-
function
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
5
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
5
6
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
6
7
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
@@ -19,6 +20,8 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
|
|
|
19
20
|
import * as React from "react";
|
|
20
21
|
import Icon from "../Icon";
|
|
21
22
|
import Container, { IconText } from "./styles";
|
|
23
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
24
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
22
25
|
/**
|
|
23
26
|
* Icon (either chevron or plus/minus) indicating whether an element is open or closed.
|
|
24
27
|
*/
|
|
@@ -33,12 +36,12 @@ var ToggleHint = /*#__PURE__*/function (_React$Component) {
|
|
|
33
36
|
_this = _callSuper(this, ToggleHint, [].concat(args));
|
|
34
37
|
_defineProperty(_assertThisInitialized(_this), "getIcon", function () {
|
|
35
38
|
if (_this.props.icon === "chevron") {
|
|
36
|
-
return /*#__PURE__*/
|
|
39
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
37
40
|
name: "chevron-down-outline",
|
|
38
41
|
"aria-hidden": true
|
|
39
42
|
});
|
|
40
43
|
}
|
|
41
|
-
return /*#__PURE__*/
|
|
44
|
+
return /*#__PURE__*/_jsx(Icon, {
|
|
42
45
|
name: _this.props.isOpen ? "minus-outline" : "plus-outline",
|
|
43
46
|
"aria-hidden": true
|
|
44
47
|
});
|
|
@@ -57,7 +60,7 @@ var ToggleHint = /*#__PURE__*/function (_React$Component) {
|
|
|
57
60
|
className = _this$props.className,
|
|
58
61
|
color = _this$props.color,
|
|
59
62
|
rest = _objectWithoutProperties(_this$props, _excluded);
|
|
60
|
-
return /*#__PURE__*/
|
|
63
|
+
return /*#__PURE__*/_jsxs(Container, _objectSpread(_objectSpread(_objectSpread({
|
|
61
64
|
icon: icon,
|
|
62
65
|
isOpen: isOpen,
|
|
63
66
|
className: "ToggleHint ".concat(className),
|
|
@@ -67,7 +70,11 @@ var ToggleHint = /*#__PURE__*/function (_React$Component) {
|
|
|
67
70
|
// @ts-ignore
|
|
68
71
|
,
|
|
69
72
|
color: color
|
|
70
|
-
}, qa, rest),
|
|
73
|
+
}, qa), rest), {}, {
|
|
74
|
+
children: [this.getIcon(), /*#__PURE__*/_jsx(IconText, {
|
|
75
|
+
children: isOpen ? closeString : openString
|
|
76
|
+
})]
|
|
77
|
+
}));
|
|
71
78
|
}
|
|
72
79
|
}]);
|
|
73
80
|
return ToggleHint;
|
package/lib/Token/Token.js
CHANGED
|
@@ -1,5 +1,10 @@
|
|
|
1
|
+
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
1
2
|
var _excluded = ["children", "closeable", "onClick", "qa", "valid", "disabled", "palette"];
|
|
2
|
-
function
|
|
3
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
3
8
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
9
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
10
|
import * as React from "react";
|
|
@@ -8,6 +13,9 @@ import Box from "../Box";
|
|
|
8
13
|
import Icon from "../Icon";
|
|
9
14
|
import { VisuallyHidden } from "../VisuallyHidden";
|
|
10
15
|
import Container from "./styles";
|
|
16
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
17
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
18
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
11
19
|
var Token = function Token(_ref) {
|
|
12
20
|
var children = _ref.children,
|
|
13
21
|
_ref$closeable = _ref.closeable,
|
|
@@ -22,10 +30,10 @@ var Token = function Token(_ref) {
|
|
|
22
30
|
palette = _ref$palette === void 0 ? "neutral" : _ref$palette,
|
|
23
31
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
24
32
|
var textContainer = useTextContent("");
|
|
25
|
-
return /*#__PURE__*/
|
|
33
|
+
return /*#__PURE__*/_jsxs(Container
|
|
26
34
|
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
27
35
|
//@ts-ignore some legacy ref type mismatch between divs
|
|
28
|
-
,
|
|
36
|
+
, _objectSpread(_objectSpread(_objectSpread({
|
|
29
37
|
ref: textContainer,
|
|
30
38
|
valid: valid,
|
|
31
39
|
palette: palette,
|
|
@@ -38,27 +46,36 @@ var Token = function Token(_ref) {
|
|
|
38
46
|
"data-qa-token-iscloseable": closeable === true,
|
|
39
47
|
"data-qa-token-isvalid": valid === true,
|
|
40
48
|
"data-qa-token-isdisabled": disabled === true
|
|
41
|
-
}, qa, rest),
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
49
|
+
}, qa), rest), {}, {
|
|
50
|
+
children: [!valid && /*#__PURE__*/_jsxs(_Fragment, {
|
|
51
|
+
children: [/*#__PURE__*/_jsx(VisuallyHidden, {
|
|
52
|
+
as: "div",
|
|
53
|
+
role: "status",
|
|
54
|
+
children: "This is an invalid token"
|
|
55
|
+
}), /*#__PURE__*/_jsx(Icon, {
|
|
56
|
+
"aria-hidden": true,
|
|
57
|
+
pr: 300,
|
|
58
|
+
name: "circle-exclamation-solid",
|
|
59
|
+
size: "mini"
|
|
60
|
+
}), /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
61
|
+
children: "Invalid"
|
|
62
|
+
})]
|
|
63
|
+
}), closeable ? /*#__PURE__*/_jsxs(Box, {
|
|
64
|
+
display: "flex",
|
|
65
|
+
alignItems: "center",
|
|
66
|
+
justifyContent: "space-between",
|
|
67
|
+
children: [/*#__PURE__*/_jsx(Box, {
|
|
68
|
+
as: "span",
|
|
69
|
+
display: "flex",
|
|
70
|
+
alignItems: "center",
|
|
71
|
+
children: children
|
|
72
|
+
}), /*#__PURE__*/_jsx(Icon, {
|
|
73
|
+
"aria-hidden": true,
|
|
74
|
+
pl: 300,
|
|
75
|
+
name: "x-solid",
|
|
76
|
+
size: "mini"
|
|
77
|
+
})]
|
|
78
|
+
}) : children]
|
|
79
|
+
}));
|
|
63
80
|
};
|
|
64
81
|
export default Token;
|
|
@@ -2,7 +2,8 @@ var _excluded = ["autoFocus", "autocomplete", "disabled", "isInvalid", "hasWarni
|
|
|
2
2
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
5
|
-
function
|
|
5
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
6
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
6
7
|
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
|
|
7
8
|
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
|
|
8
9
|
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
|
|
@@ -24,6 +25,8 @@ import Token from "../Token";
|
|
|
24
25
|
import Container from "./styles";
|
|
25
26
|
import { asTokenSpec, delimitersAsRegExp } from "./util";
|
|
26
27
|
import { TokenScreenReaderStatus } from "./TokenScreenReaderStatus";
|
|
28
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
29
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
27
30
|
var DefaultDelimiters = [",", "Enter"];
|
|
28
31
|
var ControlledPropNames = ["value", "hasFocus", "activeToken"];
|
|
29
32
|
var TokenInput = /*#__PURE__*/function (_React$Component) {
|
|
@@ -182,7 +185,7 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
|
|
|
182
185
|
valid = token.valid;
|
|
183
186
|
var iconName = tokenIconName || defaultIconName;
|
|
184
187
|
var isActive = activeId === id;
|
|
185
|
-
return /*#__PURE__*/
|
|
188
|
+
return /*#__PURE__*/_jsx(Token, {
|
|
186
189
|
id: id,
|
|
187
190
|
onClick: function onClick(e) {
|
|
188
191
|
return _this2.handleClickToken(e, token);
|
|
@@ -192,25 +195,27 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
|
|
|
192
195
|
// @ts-ignore
|
|
193
196
|
,
|
|
194
197
|
active: isActive,
|
|
195
|
-
disabled: disabled
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
198
|
+
disabled: disabled,
|
|
199
|
+
children: /*#__PURE__*/_jsxs(Box, {
|
|
200
|
+
display: "flex",
|
|
201
|
+
alignItems: "center",
|
|
202
|
+
children: [iconName && /*#__PURE__*/_jsx(Icon, _objectSpread({
|
|
203
|
+
name: iconName,
|
|
204
|
+
size: "mini",
|
|
205
|
+
pr: 300
|
|
206
|
+
}, iconProps)), value]
|
|
207
|
+
})
|
|
208
|
+
});
|
|
204
209
|
}
|
|
205
210
|
}, {
|
|
206
211
|
key: "renderTokens",
|
|
207
212
|
value: function renderTokens(tokens) {
|
|
208
213
|
var _this3 = this;
|
|
209
214
|
return tokens.map(function (token) {
|
|
210
|
-
return /*#__PURE__*/
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
},
|
|
215
|
+
return /*#__PURE__*/_jsx("div", {
|
|
216
|
+
className: "TokenInput-token",
|
|
217
|
+
children: _this3.renderToken(token)
|
|
218
|
+
}, token.id);
|
|
214
219
|
});
|
|
215
220
|
}
|
|
216
221
|
}, {
|
|
@@ -250,44 +255,48 @@ var TokenInput = /*#__PURE__*/function (_React$Component) {
|
|
|
250
255
|
tokens = _this$props6.tokens,
|
|
251
256
|
rest = _objectWithoutProperties(_this$props6, _excluded);
|
|
252
257
|
var state = this.state;
|
|
253
|
-
return /*#__PURE__*/
|
|
258
|
+
return /*#__PURE__*/_jsxs(Container, _objectSpread(_objectSpread({
|
|
254
259
|
hasBeforeElement: !!elemBefore,
|
|
255
260
|
hasAfterElement: !!elemAfter,
|
|
256
261
|
disabled: disabled,
|
|
257
262
|
invalid: !!isInvalid,
|
|
258
263
|
warning: hasWarning,
|
|
259
264
|
focused: state.hasFocus
|
|
260
|
-
}, rest),
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
"
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
265
|
+
}, rest), {}, {
|
|
266
|
+
children: [elemBefore && /*#__PURE__*/_jsx(Accessory, {
|
|
267
|
+
before: true,
|
|
268
|
+
children: elemBefore
|
|
269
|
+
}), tokens && this.renderTokens(tokens), /*#__PURE__*/_jsx(TokenScreenReaderStatus, {
|
|
270
|
+
tokens: tokens
|
|
271
|
+
}), /*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
|
|
272
|
+
"aria-describedby": ariaDescribedby,
|
|
273
|
+
"aria-invalid": !!isInvalid,
|
|
274
|
+
"aria-label": ariaLabel,
|
|
275
|
+
autoFocus: autoFocus,
|
|
276
|
+
autoComplete: autocomplete,
|
|
277
|
+
disabled: disabled,
|
|
278
|
+
id: id,
|
|
279
|
+
name: name,
|
|
280
|
+
placeholder: placeholder,
|
|
281
|
+
type: "text",
|
|
282
|
+
required: required,
|
|
283
|
+
value: state.value,
|
|
284
|
+
maxLength: maxLength,
|
|
285
|
+
onBlur: this.handleBlur,
|
|
286
|
+
onChange: this.handleChangeText,
|
|
287
|
+
onFocus: this.handleFocus,
|
|
288
|
+
onKeyDown: this.handleKeyDown,
|
|
289
|
+
onKeyUp: this.handleKeyUp,
|
|
290
|
+
onPaste: this.handlePaste,
|
|
291
|
+
ref: innerRef,
|
|
292
|
+
"data-qa-input": name || "",
|
|
293
|
+
"data-qa-input-isdisabled": !!disabled,
|
|
294
|
+
"data-qa-input-isrequired": !!required
|
|
295
|
+
}, qa), inputProps)), elemAfter && /*#__PURE__*/_jsx(Accessory, {
|
|
296
|
+
after: true,
|
|
297
|
+
children: elemAfter
|
|
298
|
+
})]
|
|
299
|
+
}));
|
|
291
300
|
}
|
|
292
301
|
}], [{
|
|
293
302
|
key: "getDerivedStateFromProps",
|
|
@@ -8,6 +8,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
8
8
|
import React from "react";
|
|
9
9
|
import { useEffect, useRef, useState } from "react";
|
|
10
10
|
import { VisuallyHidden } from "../VisuallyHidden";
|
|
11
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
11
12
|
function usePrevious(value) {
|
|
12
13
|
var ref = useRef();
|
|
13
14
|
useEffect(function () {
|
|
@@ -36,8 +37,9 @@ export var TokenScreenReaderStatus = function TokenScreenReaderStatus(_ref) {
|
|
|
36
37
|
}
|
|
37
38
|
}
|
|
38
39
|
}, [prevTokens, tokens, tokenStatus]);
|
|
39
|
-
return /*#__PURE__*/
|
|
40
|
+
return /*#__PURE__*/_jsx(VisuallyHidden, {
|
|
40
41
|
as: "div",
|
|
41
|
-
role: "status"
|
|
42
|
-
|
|
42
|
+
role: "status",
|
|
43
|
+
children: tokenStatus
|
|
44
|
+
});
|
|
43
45
|
};
|
package/lib/Tooltip/Tooltip.js
CHANGED
|
@@ -1,10 +1,5 @@
|
|
|
1
1
|
var _excluded = ["appearance", "children", "onFocus", "onBlur"],
|
|
2
2
|
_excluded2 = ["content", "children", "enterDelay", "placement", "appearance", "zIndex", "qa", "popoutProps", "truncated", "onFocus", "onBlur"];
|
|
3
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
4
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
5
|
-
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
6
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
7
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
8
3
|
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
9
4
|
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
10
5
|
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
@@ -12,14 +7,19 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
|
|
|
12
7
|
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
13
8
|
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
14
9
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
15
|
-
function
|
|
10
|
+
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
11
|
+
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
12
|
+
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
13
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
|
|
14
|
+
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
16
15
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
17
16
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
18
17
|
import * as React from "react";
|
|
19
18
|
import { useState, useEffect } from "react";
|
|
20
19
|
import MOTION from "@sproutsocial/seeds-motion/dist/seeds-motion-unitless";
|
|
21
|
-
import Popout from "
|
|
20
|
+
import Popout from "@sproutsocial/seeds-react-popout";
|
|
22
21
|
import { StyledTooltipContent } from "./styles";
|
|
22
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
23
23
|
var idCounter = 0;
|
|
24
24
|
var hasAttribute = function hasAttribute(child, attribute) {
|
|
25
25
|
return /*#__PURE__*/React.isValidElement(child) && child.props[attribute] !== undefined;
|
|
@@ -39,7 +39,7 @@ var TooltipBubble = function TooltipBubble(_ref) {
|
|
|
39
39
|
var handleBlur = function handleBlur(e) {
|
|
40
40
|
onBlur(e);
|
|
41
41
|
};
|
|
42
|
-
return /*#__PURE__*/
|
|
42
|
+
return /*#__PURE__*/_jsx(StyledTooltipContent, _objectSpread(_objectSpread({
|
|
43
43
|
role: "tooltip",
|
|
44
44
|
appearance: appearance,
|
|
45
45
|
borderRadius: appearance === "box" ? 500 : "5000em",
|
|
@@ -56,7 +56,9 @@ var TooltipBubble = function TooltipBubble(_ref) {
|
|
|
56
56
|
onMouseEnter: handleFocus,
|
|
57
57
|
onMouseLeave: handleBlur,
|
|
58
58
|
tabIndex: 0
|
|
59
|
-
}, rest),
|
|
59
|
+
}, rest), {}, {
|
|
60
|
+
children: children
|
|
61
|
+
}));
|
|
60
62
|
};
|
|
61
63
|
|
|
62
64
|
/** Core component */
|
|
@@ -137,15 +139,17 @@ var Tooltip = function Tooltip(_ref2) {
|
|
|
137
139
|
|
|
138
140
|
/** The wrapped content of whats inside the Tooltip */
|
|
139
141
|
var TooltipContent = function TooltipContent() {
|
|
140
|
-
return /*#__PURE__*/
|
|
142
|
+
return /*#__PURE__*/_jsx(TooltipBubble, _objectSpread(_objectSpread({
|
|
141
143
|
appearance: defaultAppearance,
|
|
142
144
|
onFocus: show,
|
|
143
145
|
onBlur: hide,
|
|
144
146
|
"aria-expanded": isOpen,
|
|
145
147
|
id: id
|
|
146
|
-
}, rest),
|
|
148
|
+
}, rest), {}, {
|
|
149
|
+
children: content
|
|
150
|
+
}));
|
|
147
151
|
};
|
|
148
|
-
return /*#__PURE__*/
|
|
152
|
+
return /*#__PURE__*/_jsx(Popout, _objectSpread(_objectSpread({
|
|
149
153
|
content: !isInvalidContent ? TooltipContent : undefined,
|
|
150
154
|
isOpen: isOpen,
|
|
151
155
|
placement: placement,
|
|
@@ -158,20 +162,23 @@ var Tooltip = function Tooltip(_ref2) {
|
|
|
158
162
|
"aria-haspopup": "false",
|
|
159
163
|
display: truncated ? "flex" : undefined,
|
|
160
164
|
disableWrapperAria: true // required so that the child span doesnt take in redundant aria props
|
|
161
|
-
}, popoutProps),
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
165
|
+
}, popoutProps), {}, {
|
|
166
|
+
children: /*#__PURE__*/_jsx("span", {
|
|
167
|
+
onBlur: hide,
|
|
168
|
+
onFocus: show,
|
|
169
|
+
onMouseEnter: show,
|
|
170
|
+
onMouseLeave: hide,
|
|
171
|
+
style: truncated ? {
|
|
172
|
+
overflow: "hidden",
|
|
173
|
+
textOverflow: "ellipsis",
|
|
174
|
+
whiteSpace: "nowrap"
|
|
175
|
+
} : {},
|
|
176
|
+
children: /*#__PURE__*/React.isValidElement(children) ? /*#__PURE__*/React.cloneElement(children, {
|
|
177
|
+
//** There may be cases where the Tooltip's child needs to properly describe its role as expanding a drawer, in which case that propery takes priority */
|
|
178
|
+
"aria-expanded": hasAttribute(children, "aria-expanded") ? children.props["aria-expanded"] : isOpen,
|
|
179
|
+
"aria-describedby": id
|
|
180
|
+
}) : children
|
|
181
|
+
})
|
|
182
|
+
}));
|
|
176
183
|
};
|
|
177
184
|
export default Tooltip;
|