@telus-uds/components-base 0.0.2-prerelease.7 → 0.0.2-prerelease.8
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/.ultra.cache.json +1 -1
- package/CHANGELOG.md +27 -0
- package/__fixtures__/Accessible.js +33 -0
- package/__fixtures__/Accessible.native.js +32 -0
- package/__fixtures__/testTheme.js +429 -29
- package/__tests__/ActivityIndicator/ActivityIndicator.test.jsx +1 -1
- package/__tests__/Button/ButtonGroup.test.jsx +2 -2
- package/__tests__/Checkbox/CheckboxGroup.test.jsx +247 -0
- package/__tests__/Icon/Icon.test.jsx +3 -3
- package/__tests__/Modal/Modal.test.jsx +47 -0
- package/__tests__/Notification/Notification.test.jsx +20 -0
- package/__tests__/Pagination/Pagination.test.jsx +2 -2
- package/__tests__/Progress/Progress.test.jsx +79 -0
- package/__tests__/Radio/RadioGroup.test.jsx +221 -0
- package/__tests__/RadioCard/RadioCard.test.jsx +87 -0
- package/__tests__/RadioCard/RadioCardGroup.test.jsx +247 -0
- package/__tests__/Search/Search.test.jsx +72 -0
- package/__tests__/Skeleton/Skeleton.test.jsx +1 -1
- package/__tests__/StepTracker/StepTracker.test.jsx +94 -0
- package/__tests__/Tabs/Tabs.test.jsx +200 -0
- package/__tests__/Tags/Tags.test.jsx +1 -1
- package/__tests__/utils/input.test.js +58 -0
- package/__tests__/utils/useCopy.test.js +14 -3
- package/babel.config.js +20 -0
- package/jest.config.js +1 -1
- package/lib/A11yInfoProvider/index.js +54 -26
- package/lib/A11yText/index.js +37 -14
- package/lib/ActivityIndicator/Spinner.js +78 -0
- package/lib/ActivityIndicator/Spinner.native.js +121 -87
- package/lib/ActivityIndicator/index.js +28 -12
- package/lib/ActivityIndicator/shared.js +27 -12
- package/lib/BaseProvider/index.js +34 -11
- package/lib/Box/Box.js +54 -31
- package/lib/Box/index.js +13 -2
- package/lib/Button/Button.js +32 -11
- package/lib/Button/ButtonBase.js +85 -78
- package/lib/Button/ButtonGroup.js +94 -70
- package/lib/Button/ButtonLink.js +38 -15
- package/lib/Button/index.js +31 -4
- package/lib/Button/propTypes.js +32 -9
- package/lib/Card/Card.js +36 -41
- package/lib/Card/CardBase.js +78 -0
- package/lib/Card/PressableCardBase.js +137 -0
- package/lib/Card/index.js +40 -2
- package/lib/Checkbox/Checkbox.js +139 -103
- package/lib/Checkbox/CheckboxGroup.js +231 -0
- package/lib/Checkbox/CheckboxInput.js +74 -0
- package/lib/Checkbox/CheckboxInput.native.js +9 -1
- package/lib/Checkbox/index.js +21 -2
- package/lib/Divider/Divider.js +50 -24
- package/lib/Divider/index.js +13 -2
- package/lib/ExpandCollapse/Accordion.js +20 -7
- package/lib/ExpandCollapse/Control.js +50 -27
- package/lib/ExpandCollapse/ExpandCollapse.js +41 -24
- package/lib/ExpandCollapse/Panel.js +75 -37
- package/lib/ExpandCollapse/index.js +25 -7
- package/lib/Feedback/Feedback.js +69 -40
- package/lib/Feedback/index.js +13 -2
- package/lib/Fieldset/Fieldset.js +160 -0
- package/lib/Fieldset/FieldsetContainer.js +41 -0
- package/lib/Fieldset/FieldsetContainer.native.js +33 -0
- package/lib/Fieldset/Legend.js +33 -0
- package/lib/Fieldset/Legend.native.js +43 -0
- package/lib/Fieldset/cssReset.js +21 -0
- package/lib/Fieldset/index.js +13 -0
- package/lib/FlexGrid/Col/Col.js +67 -38
- package/lib/FlexGrid/Col/index.js +13 -2
- package/lib/FlexGrid/FlexGrid.js +70 -45
- package/lib/FlexGrid/Row/Row.js +48 -27
- package/lib/FlexGrid/Row/index.js +13 -2
- package/lib/FlexGrid/helpers/index.js +9 -1
- package/lib/FlexGrid/index.js +13 -2
- package/lib/FlexGrid/providers/GutterContext.js +15 -3
- package/lib/Icon/Icon.js +46 -44
- package/lib/Icon/IconText.js +49 -21
- package/lib/Icon/index.js +31 -4
- package/lib/InputLabel/InputLabel.js +70 -36
- package/lib/InputLabel/LabelContent.js +31 -0
- package/lib/InputLabel/LabelContent.native.js +9 -1
- package/lib/InputLabel/index.js +13 -2
- package/lib/InputSupports/InputSupports.js +62 -48
- package/lib/InputSupports/index.js +13 -2
- package/lib/InputSupports/propTypes.js +19 -8
- package/lib/InputSupports/useInputSupports.js +41 -0
- package/lib/Link/ChevronLink.js +33 -16
- package/lib/Link/InlinePressable.js +50 -0
- package/lib/Link/InlinePressable.native.js +34 -11
- package/lib/Link/Link.js +25 -9
- package/lib/Link/LinkBase.js +87 -57
- package/lib/Link/TextButton.js +32 -13
- package/lib/Link/index.js +39 -5
- package/lib/List/List.js +51 -23
- package/lib/List/ListItem.js +70 -40
- package/lib/List/index.js +13 -2
- package/lib/Modal/Modal.js +226 -0
- package/lib/Modal/dictionary.js +16 -0
- package/lib/Modal/index.js +13 -0
- package/lib/Notification/Notification.js +200 -0
- package/lib/Notification/dictionary.js +15 -0
- package/lib/Notification/index.js +13 -0
- package/lib/Pagination/PageButton.js +47 -25
- package/lib/Pagination/Pagination.js +70 -40
- package/lib/Pagination/SideButton.js +63 -37
- package/lib/Pagination/dictionary.js +9 -2
- package/lib/Pagination/index.js +13 -2
- package/lib/Pagination/usePagination.js +12 -2
- package/lib/Progress/Progress.js +99 -0
- package/lib/Progress/ProgressBar.js +146 -0
- package/lib/Progress/ProgressBarBackground.js +57 -0
- package/lib/Progress/index.js +16 -0
- package/lib/Radio/Radio.js +110 -109
- package/lib/Radio/RadioButton.js +141 -0
- package/lib/Radio/RadioGroup.js +233 -0
- package/lib/Radio/RadioInput.js +76 -0
- package/lib/Radio/RadioInput.native.js +9 -1
- package/lib/Radio/index.js +21 -2
- package/lib/RadioCard/RadioCard.js +240 -0
- package/lib/RadioCard/RadioCardGroup.js +251 -0
- package/lib/RadioCard/index.js +21 -0
- package/lib/Search/Search.js +243 -0
- package/lib/Search/dictionary.js +19 -0
- package/lib/Search/index.js +13 -0
- package/lib/Select/Group.js +33 -0
- package/lib/Select/Group.native.js +16 -5
- package/lib/Select/Item.js +29 -0
- package/lib/Select/Item.native.js +14 -4
- package/lib/Select/Picker.js +79 -0
- package/lib/Select/Picker.native.js +52 -24
- package/lib/Select/Select.js +110 -82
- package/lib/Select/index.js +19 -6
- package/lib/SideNav/Item.js +54 -33
- package/lib/SideNav/ItemContent.js +41 -15
- package/lib/SideNav/ItemsGroup.js +46 -27
- package/lib/SideNav/SideNav.js +92 -69
- package/lib/SideNav/index.js +15 -1
- package/lib/Skeleton/Skeleton.js +55 -37
- package/lib/Skeleton/index.js +13 -2
- package/lib/Skeleton/skeleton.constant.js +12 -0
- package/lib/Skeleton/skeletonWebAnimation.js +27 -0
- package/lib/Skeleton/useSkeletonNativeAnimation.js +37 -0
- package/lib/Spacer/Spacer.js +31 -12
- package/lib/Spacer/index.js +13 -2
- package/lib/StackView/StackView.js +49 -27
- package/lib/StackView/StackWrap.js +33 -10
- package/lib/StackView/StackWrap.native.js +13 -2
- package/lib/StackView/StackWrapBox.js +46 -24
- package/lib/StackView/StackWrapGap.js +43 -22
- package/lib/StackView/common.js +19 -4
- package/lib/StackView/getStackedContent.js +49 -19
- package/lib/StackView/index.js +29 -5
- package/lib/StepTracker/Step.js +245 -0
- package/lib/StepTracker/StepTracker.js +197 -0
- package/lib/StepTracker/dictionary.js +17 -0
- package/lib/StepTracker/index.js +13 -0
- package/lib/Tabs/HorizontalScroll.js +199 -0
- package/lib/Tabs/ScrollViewEnd.js +66 -0
- package/lib/Tabs/ScrollViewEnd.native.js +41 -0
- package/lib/Tabs/Tabs.js +117 -0
- package/lib/Tabs/TabsItem.js +234 -0
- package/lib/Tabs/TabsScrollButton.js +121 -0
- package/lib/Tabs/dictionary.js +18 -0
- package/lib/Tabs/index.js +13 -0
- package/lib/Tabs/itemPositions.js +128 -0
- package/lib/Tags/Tags.js +130 -97
- package/lib/Tags/index.js +13 -2
- package/lib/TextInput/TextArea.js +51 -24
- package/lib/TextInput/TextInput.js +40 -19
- package/lib/TextInput/TextInputBase.js +78 -55
- package/lib/TextInput/index.js +23 -3
- package/lib/TextInput/propTypes.js +18 -7
- package/lib/ThemeProvider/ThemeProvider.js +38 -14
- package/lib/ThemeProvider/index.js +61 -6
- package/lib/ThemeProvider/useSetTheme.js +14 -5
- package/lib/ThemeProvider/useTheme.js +13 -4
- package/lib/ThemeProvider/useThemeTokens.js +32 -16
- package/lib/ThemeProvider/utils/index.js +31 -2
- package/lib/ThemeProvider/utils/styles.js +52 -16
- package/lib/ThemeProvider/utils/theme-tokens.js +94 -16
- package/lib/ToggleSwitch/ToggleSwitch.js +75 -51
- package/lib/ToggleSwitch/index.js +13 -2
- package/lib/Tooltip/{Backdrop.web.js → Backdrop.js} +22 -18
- package/lib/Tooltip/Backdrop.native.js +39 -15
- package/lib/Tooltip/Tooltip.js +112 -70
- package/lib/Tooltip/dictionary.js +9 -2
- package/lib/Tooltip/getTooltipPosition.js +9 -1
- package/lib/Tooltip/index.js +13 -2
- package/lib/TooltipButton/TooltipButton.js +57 -38
- package/lib/TooltipButton/index.js +13 -2
- package/lib/Typography/Typography.js +57 -27
- package/lib/Typography/index.js +13 -2
- package/lib/ViewportProvider/ViewportProvider.js +34 -13
- package/lib/ViewportProvider/index.js +28 -3
- package/lib/ViewportProvider/useViewport.js +15 -3
- package/lib/ViewportProvider/useViewportListener.js +24 -10
- package/lib/index.js +509 -33
- package/lib/utils/a11y/index.js +18 -1
- package/lib/utils/a11y/textSize.js +23 -7
- package/lib/utils/animation/index.js +15 -2
- package/lib/utils/animation/useVerticalExpandAnimation.js +28 -11
- package/lib/utils/children.js +87 -0
- package/lib/utils/index.js +163 -10
- package/lib/utils/info/index.js +18 -6
- package/lib/utils/info/platform/index.js +19 -7
- package/lib/utils/info/platform/platform.android.js +8 -1
- package/lib/utils/info/platform/platform.ios.js +8 -1
- package/lib/utils/info/platform/platform.js +8 -0
- package/lib/utils/info/platform/platform.native.js +8 -1
- package/lib/utils/info/versions.js +15 -4
- package/lib/utils/input.js +51 -33
- package/lib/utils/pressability.js +38 -10
- package/lib/utils/propTypes.js +217 -125
- package/lib/utils/useCopy.js +40 -5
- package/lib/utils/useHash.js +48 -0
- package/lib/utils/useHash.native.js +15 -0
- package/lib/utils/useResponsiveProp.js +21 -9
- package/lib/utils/useSpacingScale.js +21 -9
- package/lib/utils/useUniqueId.js +13 -4
- package/package.json +7 -6
- package/release-context.json +4 -4
- package/src/ActivityIndicator/{Spinner.web.jsx → Spinner.jsx} +0 -0
- package/src/Box/Box.jsx +11 -4
- package/src/Button/Button.jsx +3 -2
- package/src/Button/ButtonBase.jsx +27 -36
- package/src/Button/ButtonGroup.jsx +2 -2
- package/src/Button/ButtonLink.jsx +3 -2
- package/src/Button/propTypes.js +12 -2
- package/src/Card/Card.jsx +4 -30
- package/src/Card/CardBase.jsx +57 -0
- package/src/Card/PressableCardBase.jsx +112 -0
- package/src/Card/index.js +3 -0
- package/src/Checkbox/Checkbox.jsx +10 -11
- package/src/Checkbox/CheckboxGroup.jsx +196 -0
- package/src/Checkbox/{CheckboxInput.web.jsx → CheckboxInput.jsx} +0 -0
- package/src/Checkbox/index.js +2 -0
- package/src/ExpandCollapse/Control.jsx +1 -1
- package/src/Feedback/Feedback.jsx +1 -1
- package/src/Fieldset/Fieldset.jsx +129 -0
- package/src/Fieldset/FieldsetContainer.jsx +22 -0
- package/src/Fieldset/FieldsetContainer.native.jsx +16 -0
- package/src/Fieldset/Legend.jsx +16 -0
- package/src/Fieldset/Legend.native.jsx +22 -0
- package/src/Fieldset/cssReset.js +14 -0
- package/src/Fieldset/index.js +3 -0
- package/src/Icon/Icon.jsx +14 -23
- package/src/Icon/IconText.jsx +2 -2
- package/src/Icon/index.js +2 -2
- package/src/InputLabel/InputLabel.jsx +9 -2
- package/src/InputLabel/{LabelContent.web.jsx → LabelContent.jsx} +0 -0
- package/src/InputSupports/InputSupports.jsx +7 -18
- package/src/InputSupports/useInputSupports.js +30 -0
- package/src/Link/{InlinePressable.web.jsx → InlinePressable.jsx} +0 -0
- package/src/Link/LinkBase.jsx +14 -12
- package/src/Modal/Modal.jsx +185 -0
- package/src/Modal/dictionary.js +9 -0
- package/src/Modal/index.js +3 -0
- package/src/Notification/Notification.jsx +149 -0
- package/src/Notification/dictionary.js +8 -0
- package/src/Notification/index.js +3 -0
- package/src/Progress/Progress.jsx +77 -0
- package/src/Progress/ProgressBar.jsx +110 -0
- package/src/Progress/ProgressBarBackground.jsx +34 -0
- package/src/Progress/index.js +6 -0
- package/src/Radio/Radio.jsx +19 -56
- package/src/Radio/RadioButton.jsx +131 -0
- package/src/Radio/RadioGroup.jsx +198 -0
- package/src/Radio/{RadioInput.web.jsx → RadioInput.jsx} +0 -0
- package/src/Radio/index.js +2 -0
- package/src/RadioCard/RadioCard.jsx +191 -0
- package/src/RadioCard/RadioCardGroup.jsx +211 -0
- package/src/RadioCard/index.js +5 -0
- package/src/Search/Search.jsx +204 -0
- package/src/Search/dictionary.js +12 -0
- package/src/Search/index.js +3 -0
- package/src/Select/{Group.web.jsx → Group.jsx} +0 -0
- package/src/Select/{Item.web.jsx → Item.jsx} +0 -0
- package/src/Select/{Picker.web.jsx → Picker.jsx} +0 -0
- package/src/Select/Select.jsx +12 -22
- package/src/SideNav/Item.jsx +2 -2
- package/src/Skeleton/Skeleton.jsx +17 -20
- package/src/Skeleton/skeleton.constant.js +3 -0
- package/src/Skeleton/skeletonWebAnimation.js +13 -0
- package/src/Skeleton/useSkeletonNativeAnimation.js +27 -0
- package/src/StackView/StackView.jsx +10 -3
- package/src/StackView/StackWrap.jsx +9 -1
- package/src/StackView/StackWrapBox.jsx +4 -3
- package/src/StackView/StackWrapGap.jsx +3 -3
- package/src/StackView/getStackedContent.jsx +8 -2
- package/src/StepTracker/Step.jsx +202 -0
- package/src/StepTracker/StepTracker.jsx +163 -0
- package/src/StepTracker/dictionary.js +10 -0
- package/src/StepTracker/index.js +3 -0
- package/src/Tabs/HorizontalScroll.jsx +165 -0
- package/src/Tabs/ScrollViewEnd.jsx +53 -0
- package/src/Tabs/ScrollViewEnd.native.jsx +24 -0
- package/src/Tabs/Tabs.jsx +89 -0
- package/src/Tabs/TabsItem.jsx +204 -0
- package/src/Tabs/TabsScrollButton.jsx +100 -0
- package/src/Tabs/dictionary.js +11 -0
- package/src/Tabs/index.js +3 -0
- package/src/Tabs/itemPositions.js +101 -0
- package/src/Tags/Tags.jsx +2 -1
- package/src/TextInput/TextInputBase.jsx +12 -22
- package/src/ThemeProvider/useThemeTokens.js +2 -2
- package/src/ThemeProvider/utils/styles.js +18 -5
- package/src/ThemeProvider/utils/theme-tokens.js +46 -5
- package/src/ToggleSwitch/ToggleSwitch.jsx +2 -3
- package/src/Tooltip/{Backdrop.web.jsx → Backdrop.jsx} +0 -0
- package/src/Tooltip/Tooltip.jsx +1 -1
- package/src/TooltipButton/TooltipButton.jsx +23 -27
- package/src/Typography/Typography.jsx +6 -5
- package/src/index.js +20 -2
- package/src/utils/children.jsx +66 -0
- package/src/utils/index.js +3 -0
- package/src/utils/info/platform/platform.js +1 -0
- package/src/utils/info/versions.js +2 -2
- package/src/utils/input.js +20 -12
- package/src/utils/pressability.js +4 -0
- package/src/utils/propTypes.js +98 -34
- package/src/utils/useCopy.js +30 -4
- package/src/utils/useHash.js +34 -0
- package/src/utils/useHash.native.js +6 -0
- package/stories/A11yText/A11yText.stories.jsx +4 -8
- package/stories/Checkbox/Checkbox.stories.jsx +24 -1
- package/stories/Icon/Icon.stories.jsx +6 -5
- package/stories/Modal/Modal.stories.jsx +29 -0
- package/stories/Notification/Notification.stories.jsx +82 -0
- package/stories/Progress/Progress.stories.jsx +93 -0
- package/stories/Radio/Radio.stories.jsx +23 -36
- package/stories/RadioCard/RadioCard.stories.jsx +98 -0
- package/stories/Search/Search.stories.jsx +16 -0
- package/stories/StepTracker/StepTracker.stories.jsx +71 -0
- package/stories/Tabs/Tabs.stories.jsx +97 -0
- package/stories/{platform-supports.web.jsx → platform-supports.jsx} +0 -0
- package/__fixtures__/accessible.icon.svg +0 -6
- package/babel.config.json +0 -8
- package/lib/ActivityIndicator/Spinner.web.js +0 -55
- package/lib/Checkbox/CheckboxInput.web.js +0 -57
- package/lib/InputLabel/LabelContent.web.js +0 -17
- package/lib/Link/InlinePressable.web.js +0 -32
- package/lib/Radio/RadioInput.web.js +0 -59
- package/lib/Select/Group.web.js +0 -18
- package/lib/Select/Item.web.js +0 -15
- package/lib/Select/Picker.web.js +0 -63
- package/lib/config/svgr-icons-web.js +0 -9
- package/lib/config/svgr-icons.js +0 -52
- package/lib/utils/info/platform/platform.web.js +0 -1
- package/src/config/svgr-icons-web.js +0 -11
- package/src/config/svgr-icons.js +0 -46
- package/src/utils/info/platform/platform.web.js +0 -1
|
@@ -1,6 +1,17 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = require("react");
|
|
9
|
+
|
|
10
|
+
var _reactDom = _interopRequireDefault(require("react-dom"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
4
15
|
|
|
5
16
|
function createPortalNode(nodeId) {
|
|
6
17
|
const node = document.createElement('div');
|
|
@@ -8,15 +19,7 @@ function createPortalNode(nodeId) {
|
|
|
8
19
|
// this way the backdrop stays in place when scrolling the window - that's why we need to
|
|
9
20
|
// position it at the scroll position when rendering
|
|
10
21
|
|
|
11
|
-
node.style.cssText =
|
|
12
|
-
position: absolute;
|
|
13
|
-
top: ${window.scrollY}px;
|
|
14
|
-
left: ${window.scrollX}px;
|
|
15
|
-
right: 0;
|
|
16
|
-
bottom: 0;
|
|
17
|
-
z-index: 9999;
|
|
18
|
-
pointer-events: none;
|
|
19
|
-
`;
|
|
22
|
+
node.style.cssText = "\n position: absolute; \n top: ".concat(window.scrollY, "px;\n left: ").concat(window.scrollX, "px; \n right: 0; \n bottom: 0; \n z-index: 9999; \n pointer-events: none;\n ");
|
|
20
23
|
document.body.appendChild(node);
|
|
21
24
|
return node;
|
|
22
25
|
}
|
|
@@ -34,19 +37,20 @@ function removePortalNode(nodeId) {
|
|
|
34
37
|
function Backdrop({
|
|
35
38
|
children
|
|
36
39
|
}) {
|
|
37
|
-
const [portalNode, setPortalNode] = useState();
|
|
38
|
-
useEffect(() => {
|
|
39
|
-
const nodeId =
|
|
40
|
+
const [portalNode, setPortalNode] = (0, _react.useState)();
|
|
41
|
+
(0, _react.useEffect)(() => {
|
|
42
|
+
const nodeId = "tooltip-backdrop-".concat(Date.now());
|
|
40
43
|
const node = createPortalNode(nodeId);
|
|
41
44
|
setPortalNode(node);
|
|
42
45
|
return () => {
|
|
43
46
|
removePortalNode(nodeId);
|
|
44
47
|
};
|
|
45
48
|
}, []);
|
|
46
|
-
return portalNode ? /*#__PURE__*/
|
|
49
|
+
return portalNode ? /*#__PURE__*/_reactDom.default.createPortal(children, portalNode) : null;
|
|
47
50
|
}
|
|
48
51
|
|
|
49
52
|
Backdrop.propTypes = {
|
|
50
|
-
children:
|
|
53
|
+
children: _propTypes.default.node
|
|
51
54
|
};
|
|
52
|
-
|
|
55
|
+
var _default = Backdrop;
|
|
56
|
+
exports.default = _default;
|
|
@@ -1,32 +1,56 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
|
|
11
|
+
|
|
12
|
+
var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
|
|
13
|
+
|
|
14
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
15
|
+
|
|
16
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
17
|
+
|
|
18
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
19
|
+
|
|
20
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
4
24
|
/**
|
|
5
25
|
* The Native version of Backdrop utilizes React Native's Modal component for overlaying
|
|
6
26
|
* the app's content, since this is the only reliable to do it. The only drawback of this
|
|
7
27
|
* approach is that a press on the Backdrop will actually stop the press event from propagating,
|
|
8
28
|
* i.e. anything rendered beneath the Backdrop can't be pressed until the Backdrop is closed.
|
|
9
29
|
*/
|
|
10
|
-
|
|
11
30
|
function Backdrop({
|
|
12
31
|
onPress,
|
|
13
32
|
children
|
|
14
33
|
}) {
|
|
15
|
-
return /*#__PURE__*/
|
|
16
|
-
transparent: true
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
34
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Modal.default, {
|
|
35
|
+
transparent: true,
|
|
36
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
|
|
37
|
+
onPress: onPress,
|
|
38
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
39
|
+
style: staticStyles.backdrop,
|
|
40
|
+
children: children
|
|
41
|
+
})
|
|
42
|
+
})
|
|
43
|
+
});
|
|
22
44
|
}
|
|
23
45
|
|
|
24
|
-
|
|
46
|
+
var _default = Backdrop;
|
|
47
|
+
exports.default = _default;
|
|
25
48
|
Backdrop.propTypes = {
|
|
26
|
-
onPress:
|
|
27
|
-
children:
|
|
49
|
+
onPress: _propTypes.default.func,
|
|
50
|
+
children: _propTypes.default.node
|
|
28
51
|
};
|
|
29
|
-
|
|
52
|
+
|
|
53
|
+
const staticStyles = _StyleSheet.default.create({
|
|
30
54
|
backdrop: {
|
|
31
55
|
flexBasis: '100%',
|
|
32
56
|
backgroundColor: 'rgba(255, 255, 255, 0.5)' // to visually mark that the content beneath is not pressable
|
package/lib/Tooltip/Tooltip.js
CHANGED
|
@@ -1,13 +1,47 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
|
|
11
|
+
|
|
12
|
+
var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
13
|
+
|
|
14
|
+
var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
|
|
15
|
+
|
|
16
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
17
|
+
|
|
18
|
+
var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
|
|
19
|
+
|
|
20
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
21
|
+
|
|
22
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
23
|
+
|
|
24
|
+
var _ThemeProvider = require("../ThemeProvider");
|
|
25
|
+
|
|
26
|
+
var _utils = require("../utils");
|
|
27
|
+
|
|
28
|
+
var _Backdrop = _interopRequireDefault(require("./Backdrop"));
|
|
29
|
+
|
|
30
|
+
var _getTooltipPosition = _interopRequireDefault(require("./getTooltipPosition"));
|
|
31
|
+
|
|
32
|
+
var _TooltipButton = _interopRequireDefault(require("../TooltipButton"));
|
|
33
|
+
|
|
34
|
+
var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
|
|
35
|
+
|
|
36
|
+
var _dictionary = _interopRequireDefault(require("./dictionary"));
|
|
37
|
+
|
|
38
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
39
|
+
|
|
40
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
41
|
+
|
|
42
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
43
|
+
|
|
44
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
11
45
|
|
|
12
46
|
const selectTooltipStyles = ({
|
|
13
47
|
backgroundColor,
|
|
@@ -30,7 +64,7 @@ const selectTooltipShadowStyles = ({
|
|
|
30
64
|
borderRadius
|
|
31
65
|
}) => ({
|
|
32
66
|
borderRadius,
|
|
33
|
-
...applyShadowToken(shadow)
|
|
67
|
+
...(0, _ThemeProvider.applyShadowToken)(shadow)
|
|
34
68
|
});
|
|
35
69
|
|
|
36
70
|
const selectTooltipPositionStyles = ({
|
|
@@ -99,17 +133,16 @@ const selectArrowStyles = ({
|
|
|
99
133
|
height: rectangleSide,
|
|
100
134
|
borderBottomRightRadius: arrowBorderRadius,
|
|
101
135
|
// this corner will be the arrow tip after rotation
|
|
102
|
-
...applyShadowToken(shadow),
|
|
136
|
+
...(0, _ThemeProvider.applyShadowToken)(shadow),
|
|
103
137
|
...directionalStyles[position]
|
|
104
138
|
};
|
|
105
139
|
};
|
|
106
140
|
|
|
107
|
-
const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
|
|
141
|
+
const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
|
|
108
142
|
|
|
109
|
-
const defaultControl = (pressableState, variant) => /*#__PURE__*/
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
}
|
|
143
|
+
const defaultControl = (pressableState, variant) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TooltipButton.default, {
|
|
144
|
+
pressableState: pressableState,
|
|
145
|
+
variant: variant
|
|
113
146
|
});
|
|
114
147
|
/**
|
|
115
148
|
* Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label
|
|
@@ -136,28 +169,29 @@ const Tooltip = ({
|
|
|
136
169
|
tokens,
|
|
137
170
|
variant
|
|
138
171
|
}) => {
|
|
139
|
-
const [isOpen, setIsOpen] = useState(false);
|
|
140
|
-
const controlRef = useRef();
|
|
141
|
-
const [controlLayout, setControlLayout] = useState(null);
|
|
142
|
-
const [tooltipDimensions, setTooltipDimensions] = useState(null);
|
|
143
|
-
const [windowDimensions, setWindowDimensions] = useState(
|
|
144
|
-
const [tooltipPosition, setTooltipPosition] = useState(null);
|
|
145
|
-
const getCopy =
|
|
146
|
-
dictionary,
|
|
172
|
+
const [isOpen, setIsOpen] = (0, _react.useState)(false);
|
|
173
|
+
const controlRef = (0, _react.useRef)();
|
|
174
|
+
const [controlLayout, setControlLayout] = (0, _react.useState)(null);
|
|
175
|
+
const [tooltipDimensions, setTooltipDimensions] = (0, _react.useState)(null);
|
|
176
|
+
const [windowDimensions, setWindowDimensions] = (0, _react.useState)(_Dimensions.default.get('window'));
|
|
177
|
+
const [tooltipPosition, setTooltipPosition] = (0, _react.useState)(null);
|
|
178
|
+
const getCopy = (0, _useCopy.default)({
|
|
179
|
+
dictionary: _dictionary.default,
|
|
147
180
|
copy
|
|
148
181
|
});
|
|
149
|
-
const themeTokens = useThemeTokens('Tooltip', tokens, variant);
|
|
182
|
+
const themeTokens = (0, _ThemeProvider.useThemeTokens)('Tooltip', tokens, variant);
|
|
150
183
|
const {
|
|
151
184
|
arrowWidth,
|
|
152
185
|
arrowOffset
|
|
153
186
|
} = themeTokens;
|
|
154
|
-
useEffect(() => {
|
|
155
|
-
const subscription =
|
|
187
|
+
(0, _react.useEffect)(() => {
|
|
188
|
+
const subscription = _Dimensions.default.addEventListener('change', ({
|
|
156
189
|
window
|
|
157
190
|
}) => {
|
|
158
191
|
setWindowDimensions(window);
|
|
159
192
|
});
|
|
160
|
-
|
|
193
|
+
|
|
194
|
+
return () => subscription === null || subscription === void 0 ? void 0 : subscription.remove();
|
|
161
195
|
});
|
|
162
196
|
|
|
163
197
|
const toggleIsOpen = () => setIsOpen(!isOpen);
|
|
@@ -184,7 +218,7 @@ const Tooltip = ({
|
|
|
184
218
|
}) => {
|
|
185
219
|
if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
|
|
186
220
|
setTooltipDimensions({
|
|
187
|
-
width:
|
|
221
|
+
width: _Platform.default.select({
|
|
188
222
|
web: width + 0.3,
|
|
189
223
|
// avoids often unnecessary line breaks due to subpixel rendering of fonts
|
|
190
224
|
native: width
|
|
@@ -194,7 +228,7 @@ const Tooltip = ({
|
|
|
194
228
|
}
|
|
195
229
|
};
|
|
196
230
|
|
|
197
|
-
useEffect(() => {
|
|
231
|
+
(0, _react.useEffect)(() => {
|
|
198
232
|
if (isOpen) {
|
|
199
233
|
controlRef.current.measureInWindow((x, y, width, height) => {
|
|
200
234
|
setControlLayout({
|
|
@@ -210,15 +244,15 @@ const Tooltip = ({
|
|
|
210
244
|
setTooltipPosition(null);
|
|
211
245
|
}
|
|
212
246
|
}, [isOpen]);
|
|
213
|
-
useEffect(() => {
|
|
247
|
+
(0, _react.useEffect)(() => {
|
|
214
248
|
setIsOpen(false);
|
|
215
249
|
}, [windowDimensions]);
|
|
216
|
-
useEffect(() => {
|
|
217
|
-
if (tooltipPosition !== null && !tooltipPosition
|
|
250
|
+
(0, _react.useEffect)(() => {
|
|
251
|
+
if (tooltipPosition !== null && !(tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized) || !isOpen || controlLayout === null || tooltipDimensions == null) {
|
|
218
252
|
return;
|
|
219
253
|
}
|
|
220
254
|
|
|
221
|
-
const updatedPosition =
|
|
255
|
+
const updatedPosition = (0, _getTooltipPosition.default)(position, {
|
|
222
256
|
controlLayout,
|
|
223
257
|
tooltipDimensions,
|
|
224
258
|
windowDimensions,
|
|
@@ -226,14 +260,14 @@ const Tooltip = ({
|
|
|
226
260
|
arrowOffset
|
|
227
261
|
}); // avoid ending up in an infinite normalization loop
|
|
228
262
|
|
|
229
|
-
if (tooltipPosition
|
|
263
|
+
if (tooltipPosition !== null && tooltipPosition !== void 0 && tooltipPosition.isNormalized && updatedPosition.isNormalized) {
|
|
230
264
|
return;
|
|
231
265
|
}
|
|
232
266
|
|
|
233
267
|
setTooltipPosition(updatedPosition);
|
|
234
268
|
}, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
|
|
235
269
|
const control = children !== undefined ? children : defaultControl;
|
|
236
|
-
const pressableStyles = control === defaultControl ?
|
|
270
|
+
const pressableStyles = control === defaultControl ? _Platform.default.select({
|
|
237
271
|
web: {
|
|
238
272
|
outline: 'none'
|
|
239
273
|
}
|
|
@@ -244,31 +278,37 @@ const Tooltip = ({
|
|
|
244
278
|
left: 10,
|
|
245
279
|
right: 10
|
|
246
280
|
} : undefined;
|
|
247
|
-
return /*#__PURE__*/
|
|
248
|
-
style: staticStyles.container
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
281
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
|
|
282
|
+
style: staticStyles.container,
|
|
283
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
|
|
284
|
+
onPress: toggleIsOpen,
|
|
285
|
+
ref: controlRef,
|
|
286
|
+
onBlur: close,
|
|
287
|
+
style: pressableStyles,
|
|
288
|
+
hitSlop: pressableHitSlop,
|
|
289
|
+
accessibilityLabel: getCopy('a11yText'),
|
|
290
|
+
accessibilityRole: "button",
|
|
291
|
+
children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant) : control
|
|
292
|
+
}), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Backdrop.default, {
|
|
293
|
+
onPress: close,
|
|
294
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
|
|
295
|
+
style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens), // applied separately so that it doesn't cover the arrow
|
|
296
|
+
tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || (tooltipPosition === null || tooltipPosition === void 0 ? void 0 : tooltipPosition.isNormalized)) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
|
|
297
|
+
],
|
|
298
|
+
onLayout: onTooltipLayout,
|
|
299
|
+
accessibilityRole: "alert",
|
|
300
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
301
|
+
style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
|
|
302
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
303
|
+
style: selectTooltipStyles(themeTokens),
|
|
304
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
|
|
305
|
+
style: selectTextStyles(themeTokens),
|
|
306
|
+
children: content
|
|
307
|
+
})
|
|
308
|
+
})]
|
|
309
|
+
})
|
|
310
|
+
})]
|
|
311
|
+
});
|
|
272
312
|
};
|
|
273
313
|
|
|
274
314
|
Tooltip.propTypes = {
|
|
@@ -276,27 +316,29 @@ Tooltip.propTypes = {
|
|
|
276
316
|
* Used to render the control (i.e. tooltip trigger). If a render function is used it will receive the
|
|
277
317
|
* pressable state and tooltip variant as an argument.
|
|
278
318
|
*/
|
|
279
|
-
children:
|
|
319
|
+
children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
|
|
280
320
|
|
|
281
321
|
/**
|
|
282
322
|
* The message. Can be raw text or text components.
|
|
283
323
|
*/
|
|
284
|
-
content:
|
|
324
|
+
content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
|
|
285
325
|
|
|
286
326
|
/**
|
|
287
327
|
* Select english or french copy for the accessible label.
|
|
288
328
|
*/
|
|
289
|
-
copy:
|
|
329
|
+
copy: _propTypes.default.oneOf(['en', 'fr']),
|
|
290
330
|
|
|
291
331
|
/**
|
|
292
332
|
* Use to place the tooltip in a specific location (only if it fits within viewport).
|
|
293
333
|
*/
|
|
294
|
-
position:
|
|
295
|
-
tokens: getTokensPropType('Tooltip'),
|
|
296
|
-
variant: variantProp.propType
|
|
334
|
+
position: _propTypes.default.oneOf(['auto', 'above', 'right', 'below', 'left']),
|
|
335
|
+
tokens: (0, _utils.getTokensPropType)('Tooltip'),
|
|
336
|
+
variant: _utils.variantProp.propType
|
|
297
337
|
};
|
|
298
|
-
|
|
299
|
-
|
|
338
|
+
var _default = Tooltip;
|
|
339
|
+
exports.default = _default;
|
|
340
|
+
|
|
341
|
+
const staticStyles = _StyleSheet.default.create({
|
|
300
342
|
container: {
|
|
301
343
|
alignItems: 'flex-start'
|
|
302
344
|
},
|
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _default = {
|
|
2
8
|
en: {
|
|
3
9
|
a11yText: 'Reveal additional information.'
|
|
4
10
|
},
|
|
5
11
|
fr: {
|
|
6
12
|
a11yText: 'Afficher des renseignements supplémentaires.'
|
|
7
13
|
}
|
|
8
|
-
};
|
|
14
|
+
};
|
|
15
|
+
exports.default = _default;
|
|
@@ -1,3 +1,10 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
1
8
|
function normalizePosition(position) {
|
|
2
9
|
const {
|
|
3
10
|
left,
|
|
@@ -161,4 +168,5 @@ function getTooltipPosition(position, {
|
|
|
161
168
|
return normalizePosition(leastOverflowing.position === 'above' ? findRectByPosition('below', boundingRects) : leastOverflowing);
|
|
162
169
|
}
|
|
163
170
|
|
|
164
|
-
|
|
171
|
+
var _default = getTooltipPosition;
|
|
172
|
+
exports.default = _default;
|
package/lib/Tooltip/index.js
CHANGED
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _Tooltip = _interopRequireDefault(require("./Tooltip"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = _Tooltip.default;
|
|
13
|
+
exports.default = _default;
|
|
@@ -1,26 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
};
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireDefault(require("react"));
|
|
9
|
+
|
|
10
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
11
|
+
|
|
12
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
+
|
|
14
|
+
var _ThemeProvider = require("../ThemeProvider");
|
|
15
|
+
|
|
16
|
+
var _utils = require("../utils");
|
|
17
|
+
|
|
18
|
+
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
19
|
+
|
|
20
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
24
23
|
|
|
25
24
|
const selectInnerContainerStyles = ({
|
|
26
25
|
borderRadius,
|
|
@@ -32,33 +31,53 @@ const selectInnerContainerStyles = ({
|
|
|
32
31
|
|
|
33
32
|
const selectIconTokens = ({
|
|
34
33
|
iconSize,
|
|
35
|
-
iconColor
|
|
36
|
-
iconScale = 1
|
|
34
|
+
iconColor
|
|
35
|
+
/* iconScale = 1 */
|
|
36
|
+
|
|
37
37
|
}) => ({
|
|
38
38
|
size: iconSize,
|
|
39
|
-
color: iconColor
|
|
40
|
-
|
|
39
|
+
color: iconColor // scale: iconScale TODO re-enable with icon component
|
|
40
|
+
|
|
41
41
|
});
|
|
42
|
+
/**
|
|
43
|
+
* `TooltipButton` is a helper component used as a default control for the `Tooltip` component.
|
|
44
|
+
* In fact though, it isn't actually a pressable - it's meant to be used as pressable's content.
|
|
45
|
+
* Due to this any interaction states (e.g. pressed, hover, etc.) has to be passed down to it as a prop.
|
|
46
|
+
*/
|
|
47
|
+
|
|
42
48
|
|
|
43
49
|
const TooltipButton = ({
|
|
50
|
+
pressableState,
|
|
44
51
|
tokens,
|
|
45
52
|
variant
|
|
46
53
|
}) => {
|
|
47
|
-
const themeTokens = useThemeTokens('TooltipButton', tokens, variant);
|
|
54
|
+
const themeTokens = (0, _ThemeProvider.useThemeTokens)('TooltipButton', tokens, variant, pressableState);
|
|
48
55
|
const {
|
|
49
56
|
icon: IconComponent
|
|
50
57
|
} = themeTokens;
|
|
51
|
-
return /*#__PURE__*/
|
|
52
|
-
style:
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
59
|
+
style: (0, _ThemeProvider.applyOuterBorder)(themeTokens),
|
|
60
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
61
|
+
style: selectInnerContainerStyles(themeTokens),
|
|
62
|
+
children: IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
|
|
63
|
+
icon: IconComponent,
|
|
64
|
+
tokens: selectIconTokens(themeTokens)
|
|
65
|
+
})
|
|
66
|
+
})
|
|
67
|
+
});
|
|
58
68
|
};
|
|
59
69
|
|
|
60
70
|
TooltipButton.propTypes = {
|
|
61
|
-
|
|
62
|
-
|
|
71
|
+
/**
|
|
72
|
+
* Used as appearances when resolving theme tokens.
|
|
73
|
+
*/
|
|
74
|
+
pressableState: _propTypes.default.shape({
|
|
75
|
+
pressed: _propTypes.default.bool,
|
|
76
|
+
hover: _propTypes.default.bool,
|
|
77
|
+
focus: _propTypes.default.bool
|
|
78
|
+
}),
|
|
79
|
+
tokens: (0, _utils.getTokensPropType)('TooltipButton'),
|
|
80
|
+
variant: _utils.variantProp.propType
|
|
63
81
|
};
|
|
64
|
-
|
|
82
|
+
var _default = TooltipButton;
|
|
83
|
+
exports.default = _default;
|
|
@@ -1,2 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _TooltipButton = _interopRequireDefault(require("./TooltipButton"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
12
|
+
var _default = _TooltipButton.default;
|
|
13
|
+
exports.default = _default;
|