@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,11 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
11
|
+
|
|
12
|
+
var _utils = require("../utils");
|
|
13
|
+
|
|
14
|
+
var _InputSupports = _interopRequireDefault(require("../InputSupports"));
|
|
15
|
+
|
|
16
|
+
var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
|
|
17
|
+
|
|
18
|
+
var _ThemeProvider = require("../ThemeProvider");
|
|
19
|
+
|
|
20
|
+
var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
|
|
21
|
+
|
|
22
|
+
var _propTypes2 = _interopRequireDefault(require("./propTypes"));
|
|
23
|
+
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
|
|
26
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
+
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
31
|
+
|
|
9
32
|
/**
|
|
10
33
|
* Use to collect long-form information such as product feedback or support queries.
|
|
11
34
|
* Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
|
|
@@ -30,14 +53,13 @@ import textInputPropTypes from './propTypes';
|
|
|
30
53
|
* or an indicator that the field is optional.
|
|
31
54
|
* It is a more usable and accessible option than the HTML `placeholder` attribute.
|
|
32
55
|
*/
|
|
33
|
-
|
|
34
56
|
function TextArea({
|
|
35
57
|
tokens,
|
|
36
58
|
variant = {},
|
|
37
59
|
...remainingProps
|
|
38
60
|
}) {
|
|
39
|
-
const themeTokens = useThemeTokens('TextArea', tokens, variant);
|
|
40
|
-
const [inputHeight, setInputHeight] = useState(); // adjust the text area's height as new lines are added to the content
|
|
61
|
+
const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextArea', tokens, variant);
|
|
62
|
+
const [inputHeight, setInputHeight] = (0, _react.useState)(); // adjust the text area's height as new lines are added to the content
|
|
41
63
|
|
|
42
64
|
const onHeightChange = ({
|
|
43
65
|
nativeEvent: {
|
|
@@ -47,7 +69,7 @@ function TextArea({
|
|
|
47
69
|
}
|
|
48
70
|
}) => {
|
|
49
71
|
// on native this is happens out of the box
|
|
50
|
-
if (
|
|
72
|
+
if (_Platform.default.OS === 'web') {
|
|
51
73
|
setInputHeight(height);
|
|
52
74
|
}
|
|
53
75
|
};
|
|
@@ -55,7 +77,8 @@ function TextArea({
|
|
|
55
77
|
const {
|
|
56
78
|
props: supportsProps,
|
|
57
79
|
rest
|
|
58
|
-
} =
|
|
80
|
+
} = _propTypes.default.select(remainingProps);
|
|
81
|
+
|
|
59
82
|
const inputProps = { ...rest,
|
|
60
83
|
variant: { ...variant,
|
|
61
84
|
validation: supportsProps.validation
|
|
@@ -65,18 +88,22 @@ function TextArea({
|
|
|
65
88
|
height: inputHeight,
|
|
66
89
|
tokens: themeTokens
|
|
67
90
|
};
|
|
68
|
-
return /*#__PURE__*/
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
91
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
|
|
92
|
+
children: ({
|
|
93
|
+
a11yProps,
|
|
94
|
+
inputId
|
|
95
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, { ...inputProps,
|
|
96
|
+
...a11yProps,
|
|
97
|
+
nativeID: inputId
|
|
98
|
+
})
|
|
99
|
+
});
|
|
74
100
|
}
|
|
75
101
|
|
|
76
|
-
TextArea.propTypes = { ...
|
|
77
|
-
...
|
|
78
|
-
tokens: getTokensPropType('TextArea', 'TextInput'),
|
|
102
|
+
TextArea.propTypes = { ..._propTypes.default.types,
|
|
103
|
+
..._propTypes2.default,
|
|
104
|
+
tokens: (0, _utils.getTokensPropType)('TextArea', 'TextInput'),
|
|
79
105
|
// TODO: support both TextArea and TextInput tokens
|
|
80
|
-
variant: variantProp.propType
|
|
106
|
+
variant: _utils.variantProp.propType
|
|
81
107
|
};
|
|
82
|
-
|
|
108
|
+
var _default = TextArea;
|
|
109
|
+
exports.default = _default;
|
|
@@ -1,9 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
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 _utils = require("../utils");
|
|
11
|
+
|
|
12
|
+
var _InputSupports = _interopRequireDefault(require("../InputSupports"));
|
|
13
|
+
|
|
14
|
+
var _TextInputBase = _interopRequireDefault(require("./TextInputBase"));
|
|
15
|
+
|
|
16
|
+
var _propTypes = _interopRequireDefault(require("../InputSupports/propTypes"));
|
|
17
|
+
|
|
18
|
+
var _propTypes2 = _interopRequireDefault(require("./propTypes"));
|
|
19
|
+
|
|
20
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
7
24
|
/**
|
|
8
25
|
* A basic text input component. Use in forms or individually to receive user's input.
|
|
9
26
|
* Due to React Native's implementation of `TextInput` it's not possible to access the current value by passing a ref.
|
|
@@ -22,7 +39,6 @@ import textInputPropTypes from './propTypes';
|
|
|
22
39
|
* supported props and <a href="https://reactnative.dev/docs/textinput" target="_blank">React Native Web documentation</a> for
|
|
23
40
|
* their implementation on the web.
|
|
24
41
|
*/
|
|
25
|
-
|
|
26
42
|
function TextInput({
|
|
27
43
|
tokens,
|
|
28
44
|
variant = {},
|
|
@@ -31,24 +47,29 @@ function TextInput({
|
|
|
31
47
|
const {
|
|
32
48
|
props: supportsProps,
|
|
33
49
|
rest
|
|
34
|
-
} =
|
|
50
|
+
} = _propTypes.default.select(remainingProps);
|
|
51
|
+
|
|
35
52
|
const inputProps = { ...rest,
|
|
36
53
|
tokens,
|
|
37
54
|
variant: { ...variant,
|
|
38
55
|
validation: supportsProps.validation
|
|
39
56
|
}
|
|
40
57
|
};
|
|
41
|
-
return /*#__PURE__*/
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputSupports.default, { ...supportsProps,
|
|
59
|
+
children: ({
|
|
60
|
+
a11yProps,
|
|
61
|
+
inputId
|
|
62
|
+
}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInputBase.default, { ...inputProps,
|
|
63
|
+
...a11yProps,
|
|
64
|
+
nativeID: inputId
|
|
65
|
+
})
|
|
66
|
+
});
|
|
47
67
|
}
|
|
48
68
|
|
|
49
|
-
TextInput.propTypes = { ...
|
|
50
|
-
...
|
|
51
|
-
tokens: getTokensPropType('TextInput'),
|
|
52
|
-
variant: variantProp.propType
|
|
69
|
+
TextInput.propTypes = { ..._propTypes.default.types,
|
|
70
|
+
..._propTypes2.default,
|
|
71
|
+
tokens: (0, _utils.getTokensPropType)('TextInput'),
|
|
72
|
+
variant: _utils.variantProp.propType
|
|
53
73
|
};
|
|
54
|
-
|
|
74
|
+
var _default = TextInput;
|
|
75
|
+
exports.default = _default;
|
|
@@ -1,8 +1,33 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
|
|
11
|
+
|
|
12
|
+
var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
|
|
13
|
+
|
|
14
|
+
var _TextInput = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TextInput"));
|
|
15
|
+
|
|
16
|
+
var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
|
|
17
|
+
|
|
18
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
19
|
+
|
|
20
|
+
var _ThemeProvider = require("../ThemeProvider");
|
|
21
|
+
|
|
22
|
+
var _utils = require("../utils");
|
|
23
|
+
|
|
24
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
25
|
+
|
|
26
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
27
|
+
|
|
28
|
+
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); }
|
|
29
|
+
|
|
30
|
+
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; }
|
|
6
31
|
|
|
7
32
|
const selectInputStyles = ({
|
|
8
33
|
backgroundColor,
|
|
@@ -29,7 +54,7 @@ const selectInputStyles = ({
|
|
|
29
54
|
// jump around if the border width changes (avoiding NaN and negative padding)
|
|
30
55
|
const offsetBorder = value => typeof value === 'number' ? Math.max(0, value - borderWidth) : value;
|
|
31
56
|
|
|
32
|
-
const textStyles = applyTextStyles({
|
|
57
|
+
const textStyles = (0, _ThemeProvider.applyTextStyles)({
|
|
33
58
|
fontName,
|
|
34
59
|
fontSize,
|
|
35
60
|
lineHeight,
|
|
@@ -45,7 +70,8 @@ const selectInputStyles = ({
|
|
|
45
70
|
|
|
46
71
|
const minHeight = linesToHeight(minLines);
|
|
47
72
|
const maxHeight = linesToHeight(maxLines);
|
|
48
|
-
|
|
73
|
+
|
|
74
|
+
const webStyles = _Platform.default.select({
|
|
49
75
|
web: {
|
|
50
76
|
outline: 'none',
|
|
51
77
|
cursor: inactive ? 'not-allowed' : undefined,
|
|
@@ -53,6 +79,7 @@ const selectInputStyles = ({
|
|
|
53
79
|
|
|
54
80
|
}
|
|
55
81
|
});
|
|
82
|
+
|
|
56
83
|
const paddingWithIcon = iconSize + paddingRight;
|
|
57
84
|
return {
|
|
58
85
|
backgroundColor,
|
|
@@ -75,25 +102,17 @@ const selectInputStyles = ({
|
|
|
75
102
|
|
|
76
103
|
const selectOuterBorderStyles = ({
|
|
77
104
|
outerBackgroundColor,
|
|
78
|
-
outerBorderWidth
|
|
105
|
+
outerBorderWidth,
|
|
79
106
|
outerBorderColor,
|
|
80
|
-
|
|
81
|
-
}) => {
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
borderColor: outerBorderColor,
|
|
90
|
-
borderRadius,
|
|
91
|
-
marginTop: margin,
|
|
92
|
-
marginBottom: margin,
|
|
93
|
-
marginLeft: margin,
|
|
94
|
-
marginRight: margin
|
|
95
|
-
};
|
|
96
|
-
};
|
|
107
|
+
borderRadius
|
|
108
|
+
}) => ({
|
|
109
|
+
background: outerBackgroundColor,
|
|
110
|
+
...(0, _ThemeProvider.applyOuterBorder)({
|
|
111
|
+
outerBorderColor,
|
|
112
|
+
outerBorderWidth,
|
|
113
|
+
borderRadius
|
|
114
|
+
})
|
|
115
|
+
});
|
|
97
116
|
|
|
98
117
|
const selectIconTokens = ({
|
|
99
118
|
iconSize,
|
|
@@ -127,7 +146,7 @@ function TextInputBase({
|
|
|
127
146
|
variant = {},
|
|
128
147
|
...remainingProps
|
|
129
148
|
}) {
|
|
130
|
-
const [isFocused, setIsFocused] = useState(false);
|
|
149
|
+
const [isFocused, setIsFocused] = (0, _react.useState)(false);
|
|
131
150
|
|
|
132
151
|
const handleFocus = event => {
|
|
133
152
|
setIsFocused(true);
|
|
@@ -139,7 +158,7 @@ function TextInputBase({
|
|
|
139
158
|
if (typeof onBlur === 'function') onBlur(event);
|
|
140
159
|
};
|
|
141
160
|
|
|
142
|
-
const [isHovered, setIsHovered] = useState(false);
|
|
161
|
+
const [isHovered, setIsHovered] = (0, _react.useState)(false);
|
|
143
162
|
|
|
144
163
|
const handleMouseOver = event => {
|
|
145
164
|
setIsHovered(true);
|
|
@@ -155,7 +174,7 @@ function TextInputBase({
|
|
|
155
174
|
currentValue,
|
|
156
175
|
setValue,
|
|
157
176
|
isControlled
|
|
158
|
-
} = useInputValue({
|
|
177
|
+
} = (0, _utils.useInputValue)({
|
|
159
178
|
value,
|
|
160
179
|
initialValue,
|
|
161
180
|
onChange,
|
|
@@ -172,7 +191,7 @@ function TextInputBase({
|
|
|
172
191
|
hover: isHovered,
|
|
173
192
|
inactive
|
|
174
193
|
};
|
|
175
|
-
const themeTokens = useThemeTokens('TextInput', tokens, variant, states);
|
|
194
|
+
const themeTokens = (0, _ThemeProvider.useThemeTokens)('TextInput', tokens, variant, states);
|
|
176
195
|
const {
|
|
177
196
|
icon: IconComponent
|
|
178
197
|
} = themeTokens;
|
|
@@ -191,36 +210,40 @@ function TextInputBase({
|
|
|
191
210
|
const nativeInputStyle = selectInputStyles({ ...themeTokens,
|
|
192
211
|
height
|
|
193
212
|
}, inactive);
|
|
194
|
-
return /*#__PURE__*/
|
|
195
|
-
style: selectOuterBorderStyles(themeTokens)
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
213
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
|
|
214
|
+
style: selectOuterBorderStyles(themeTokens),
|
|
215
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.default, {
|
|
216
|
+
style: nativeInputStyle,
|
|
217
|
+
...inputProps
|
|
218
|
+
}), IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
|
|
219
|
+
pointerEvents: "none" // avoid hijacking input press events
|
|
220
|
+
,
|
|
221
|
+
style: [staticStyles.iconContainer, selectIconContainerStyles(themeTokens)],
|
|
222
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
|
|
223
|
+
})
|
|
224
|
+
})]
|
|
225
|
+
});
|
|
205
226
|
}
|
|
206
227
|
|
|
207
228
|
TextInputBase.propTypes = {
|
|
208
|
-
value:
|
|
209
|
-
height:
|
|
210
|
-
initialValue:
|
|
211
|
-
inactive:
|
|
212
|
-
readOnly:
|
|
213
|
-
onChange:
|
|
214
|
-
onChangeText:
|
|
215
|
-
onFocus:
|
|
216
|
-
onBlur:
|
|
217
|
-
onMouseOver:
|
|
218
|
-
onMouseOut:
|
|
219
|
-
tokens: getTokensPropType('TextInput', 'TextArea'),
|
|
220
|
-
variant: variantProp.propType
|
|
229
|
+
value: _propTypes.default.string,
|
|
230
|
+
height: _propTypes.default.number,
|
|
231
|
+
initialValue: _propTypes.default.string,
|
|
232
|
+
inactive: _propTypes.default.bool,
|
|
233
|
+
readOnly: _propTypes.default.bool,
|
|
234
|
+
onChange: _propTypes.default.func,
|
|
235
|
+
onChangeText: _propTypes.default.func,
|
|
236
|
+
onFocus: _propTypes.default.func,
|
|
237
|
+
onBlur: _propTypes.default.func,
|
|
238
|
+
onMouseOver: _propTypes.default.func,
|
|
239
|
+
onMouseOut: _propTypes.default.func,
|
|
240
|
+
tokens: (0, _utils.getTokensPropType)('TextInput', 'TextArea'),
|
|
241
|
+
variant: _utils.variantProp.propType
|
|
221
242
|
};
|
|
222
|
-
|
|
223
|
-
|
|
243
|
+
var _default = TextInputBase;
|
|
244
|
+
exports.default = _default;
|
|
245
|
+
|
|
246
|
+
const staticStyles = _StyleSheet.default.create({
|
|
224
247
|
iconContainer: {
|
|
225
248
|
position: 'absolute',
|
|
226
249
|
right: 0,
|
package/lib/TextInput/index.js
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "TextInput", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function () {
|
|
9
|
+
return _TextInput.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "TextArea", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _TextArea.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
|
|
19
|
+
var _TextInput = _interopRequireDefault(require("./TextInput"));
|
|
20
|
+
|
|
21
|
+
var _TextArea = _interopRequireDefault(require("./TextArea"));
|
|
22
|
+
|
|
23
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -1,31 +1,42 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
|
|
8
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
9
|
+
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
11
|
+
|
|
2
12
|
const textInputPropTypes = {
|
|
3
13
|
/**
|
|
4
14
|
* If the input's state is to be controlled by a parent component, use this prop
|
|
5
15
|
* together with the `onChange` to pass down and update the lifted state.
|
|
6
16
|
*/
|
|
7
|
-
value:
|
|
17
|
+
value: _propTypes.default.string,
|
|
8
18
|
|
|
9
19
|
/**
|
|
10
20
|
* Use this to set the initial value of an uncontrolled input.
|
|
11
21
|
* Updating `initialValue` will **not** update the actual value.
|
|
12
22
|
*/
|
|
13
|
-
initialValue:
|
|
23
|
+
initialValue: _propTypes.default.string,
|
|
14
24
|
|
|
15
25
|
/**
|
|
16
26
|
* Disables all user interactions with the input.
|
|
17
27
|
*/
|
|
18
|
-
inactive:
|
|
28
|
+
inactive: _propTypes.default.bool,
|
|
19
29
|
|
|
20
30
|
/**
|
|
21
31
|
* Makes it impossible to change the input's value.
|
|
22
32
|
*/
|
|
23
|
-
readOnly:
|
|
33
|
+
readOnly: _propTypes.default.bool,
|
|
24
34
|
|
|
25
35
|
/**
|
|
26
36
|
* Use to react upon input's value changes. Required when the `value` prop is set.
|
|
27
37
|
* Will receive the input's value as an argument.
|
|
28
38
|
*/
|
|
29
|
-
onChange:
|
|
39
|
+
onChange: _propTypes.default.func
|
|
30
40
|
};
|
|
31
|
-
|
|
41
|
+
var _default = textInputPropTypes;
|
|
42
|
+
exports.default = _default;
|
|
@@ -1,28 +1,52 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.themeType = exports.ThemeSetterContext = exports.ThemeContext = exports.uninitialisedError = void 0;
|
|
7
|
+
|
|
8
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
|
|
10
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
|
|
14
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
|
+
|
|
16
|
+
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); }
|
|
17
|
+
|
|
18
|
+
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; }
|
|
19
|
+
|
|
20
|
+
const uninitialisedError = new Error('Theme context used outside of ThemeProvider');
|
|
21
|
+
exports.uninitialisedError = uninitialisedError;
|
|
22
|
+
const ThemeContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError);
|
|
23
|
+
exports.ThemeContext = ThemeContext;
|
|
24
|
+
const ThemeSetterContext = /*#__PURE__*/(0, _react.createContext)(uninitialisedError); // TODO: develop this as theme metadata is added
|
|
6
25
|
// https://github.com/telus/universal-design-system/issues/92
|
|
7
26
|
|
|
8
|
-
|
|
27
|
+
exports.ThemeSetterContext = ThemeSetterContext;
|
|
28
|
+
const themeType = _propTypes.default.object;
|
|
29
|
+
exports.themeType = themeType;
|
|
9
30
|
|
|
10
31
|
const ThemeProvider = ({
|
|
11
32
|
children,
|
|
12
33
|
defaultTheme
|
|
13
34
|
}) => {
|
|
14
|
-
const [theme, setTheme] = useState(defaultTheme);
|
|
15
|
-
return /*#__PURE__*/
|
|
16
|
-
value: setTheme
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
35
|
+
const [theme, setTheme] = (0, _react.useState)(defaultTheme);
|
|
36
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeSetterContext.Provider, {
|
|
37
|
+
value: setTheme,
|
|
38
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ThemeContext.Provider, {
|
|
39
|
+
value: theme,
|
|
40
|
+
children: children
|
|
41
|
+
})
|
|
42
|
+
});
|
|
20
43
|
};
|
|
21
44
|
|
|
22
45
|
ThemeProvider.propTypes = {
|
|
23
46
|
// TODO: implement a custom propType that validates schema version
|
|
24
47
|
// https://github.com/telus/universal-design-system/issues/92
|
|
25
|
-
children:
|
|
48
|
+
children: _propTypes.default.node.isRequired,
|
|
26
49
|
defaultTheme: themeType.isRequired
|
|
27
50
|
};
|
|
28
|
-
|
|
51
|
+
var _default = ThemeProvider;
|
|
52
|
+
exports.default = _default;
|
|
@@ -1,6 +1,61 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _exportNames = {
|
|
7
|
+
useTheme: true,
|
|
8
|
+
useSetTheme: true
|
|
9
|
+
};
|
|
10
|
+
Object.defineProperty(exports, "useTheme", {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function () {
|
|
13
|
+
return _useTheme.default;
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
Object.defineProperty(exports, "useSetTheme", {
|
|
17
|
+
enumerable: true,
|
|
18
|
+
get: function () {
|
|
19
|
+
return _useSetTheme.default;
|
|
20
|
+
}
|
|
21
|
+
});
|
|
22
|
+
exports.default = void 0;
|
|
23
|
+
|
|
24
|
+
var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
|
|
25
|
+
|
|
26
|
+
var _useTheme = _interopRequireDefault(require("./useTheme"));
|
|
27
|
+
|
|
28
|
+
var _useSetTheme = _interopRequireDefault(require("./useSetTheme"));
|
|
29
|
+
|
|
30
|
+
var _useThemeTokens = require("./useThemeTokens");
|
|
31
|
+
|
|
32
|
+
Object.keys(_useThemeTokens).forEach(function (key) {
|
|
33
|
+
if (key === "default" || key === "__esModule") return;
|
|
34
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
35
|
+
if (key in exports && exports[key] === _useThemeTokens[key]) return;
|
|
36
|
+
Object.defineProperty(exports, key, {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function () {
|
|
39
|
+
return _useThemeTokens[key];
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
});
|
|
43
|
+
|
|
44
|
+
var _utils = require("./utils");
|
|
45
|
+
|
|
46
|
+
Object.keys(_utils).forEach(function (key) {
|
|
47
|
+
if (key === "default" || key === "__esModule") return;
|
|
48
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
49
|
+
if (key in exports && exports[key] === _utils[key]) return;
|
|
50
|
+
Object.defineProperty(exports, key, {
|
|
51
|
+
enumerable: true,
|
|
52
|
+
get: function () {
|
|
53
|
+
return _utils[key];
|
|
54
|
+
}
|
|
55
|
+
});
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
59
|
+
|
|
60
|
+
var _default = _ThemeProvider.default;
|
|
61
|
+
exports.default = _default;
|
|
@@ -1,11 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
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 _ThemeProvider = require("./ThemeProvider");
|
|
3
11
|
|
|
4
12
|
const useSetTheme = () => {
|
|
5
13
|
// Replace current theme with provided object
|
|
6
|
-
const setTheme = useContext(ThemeSetterContext); // Merge provided object into current theme
|
|
14
|
+
const setTheme = (0, _react.useContext)(_ThemeProvider.ThemeSetterContext); // Merge provided object into current theme
|
|
7
15
|
|
|
8
|
-
const editTheme = useCallback(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
|
|
16
|
+
const editTheme = (0, _react.useCallback)(newTheme => setTheme((oldTheme = {}) => ({ ...oldTheme,
|
|
9
17
|
...newTheme
|
|
10
18
|
})), [setTheme]);
|
|
11
19
|
return {
|
|
@@ -14,4 +22,5 @@ const useSetTheme = () => {
|
|
|
14
22
|
};
|
|
15
23
|
};
|
|
16
24
|
|
|
17
|
-
|
|
25
|
+
var _default = useSetTheme;
|
|
26
|
+
exports.default = _default;
|