@pareto-engineering/design-system 2.0.0-alpha.5 → 2.0.0-alpha.52
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/.env.scripts.example +4 -0
- package/.eslintrc.js +25 -1
- package/babel.config.js +1 -0
- package/dist/cjs/a/BackgroundGradient/BackgroundGradient.js +77 -0
- package/dist/cjs/a/BackgroundGradient/index.js +15 -0
- package/dist/cjs/a/BackgroundGradient/styles.scss +16 -0
- package/dist/cjs/a/ContentTree/ContentTree.js +83 -0
- package/dist/cjs/a/ContentTree/common/Tree/Tree.js +116 -0
- package/dist/cjs/a/ContentTree/common/Tree/index.js +15 -0
- package/dist/cjs/a/ContentTree/common/index.js +31 -0
- package/dist/cjs/a/ContentTree/common/useContentTree.js +82 -0
- package/dist/cjs/a/ContentTree/common/useFirstVisibleNode.js +65 -0
- package/dist/cjs/a/ContentTree/index.js +15 -0
- package/dist/cjs/a/ContentTree/styles.scss +33 -0
- package/dist/cjs/a/Conversation/Conversation.js +14 -8
- package/dist/cjs/a/Conversation/common/Message/Message.js +32 -6
- package/dist/cjs/a/Conversation/styles.scss +132 -33
- package/dist/cjs/a/OvalIllustration/OvalIllustration.js +133 -0
- package/dist/cjs/a/OvalIllustration/index.js +15 -0
- package/dist/cjs/a/OvalIllustration/styles.scss +102 -0
- package/dist/cjs/a/Popover/Popover.js +134 -0
- package/dist/cjs/a/Popover/common/Divider/Divider.js +67 -0
- package/dist/cjs/a/Popover/common/Divider/index.js +15 -0
- package/dist/cjs/a/Popover/common/Item/Item.js +67 -0
- package/dist/cjs/a/Popover/common/Item/index.js +15 -0
- package/dist/cjs/a/Popover/common/index.js +21 -0
- package/dist/cjs/a/Popover/index.js +15 -0
- package/dist/cjs/a/Popover/styles.scss +33 -0
- package/dist/cjs/a/Shapes/Shapes.js +39 -9
- package/dist/cjs/a/Shapes/styles.scss +79 -23
- package/dist/cjs/a/SnapScroller/SnapScroller.js +77 -0
- package/dist/cjs/a/SnapScroller/index.js +15 -0
- package/dist/cjs/a/SnapScroller/styles.scss +38 -0
- package/dist/cjs/a/index.js +41 -1
- package/dist/cjs/b/Button/Button.js +10 -4
- package/dist/cjs/b/Button/styles.scss +55 -10
- package/dist/cjs/b/Logo/Logo.js +41 -41
- package/dist/cjs/b/Logo/styles.scss +0 -138
- package/dist/cjs/b/Page/common/Section/Section.js +35 -7
- package/dist/cjs/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +16 -9
- package/dist/cjs/c/ContentSlides/common/Navigator/Navigator.js +4 -3
- package/dist/cjs/c/ContentSlides/styles.scss +10 -4
- package/dist/cjs/c/SocialMediaShareButton/SocialMediaShareButton.js +111 -0
- package/dist/cjs/c/SocialMediaShareButton/index.js +15 -0
- package/dist/cjs/c/SocialMediaShareButton/styles.scss +39 -0
- package/dist/cjs/c/index.js +9 -1
- package/dist/cjs/f/FormInput/FormInput.js +20 -3
- package/dist/cjs/f/FormInput/styles.scss +11 -0
- package/dist/cjs/f/common/Debugger/Debugger.js +1 -1
- package/dist/cjs/f/common/Label/Label.js +1 -1
- package/dist/cjs/f/common/Label/styles.scss +1 -1
- package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +1 -1
- package/dist/cjs/f/fields/ChoicesInput/styles.scss +17 -2
- package/dist/cjs/f/fields/QueryCombobox/QueryCombobox.js +236 -0
- package/dist/cjs/f/fields/QueryCombobox/common/Combobox/Combobox.js +205 -0
- package/dist/cjs/f/fields/QueryCombobox/common/Combobox/index.js +15 -0
- package/dist/cjs/f/fields/QueryCombobox/common/Menu/Menu.js +103 -0
- package/dist/cjs/f/fields/QueryCombobox/common/Menu/index.js +15 -0
- package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +304 -0
- package/dist/cjs/f/fields/QueryCombobox/common/MultipleCombobox/index.js +15 -0
- package/dist/cjs/f/fields/QueryCombobox/common/index.js +29 -0
- package/dist/cjs/f/fields/QueryCombobox/index.js +15 -0
- package/dist/cjs/f/fields/QueryCombobox/styles.scss +90 -0
- package/dist/cjs/f/fields/QuerySelect/QuerySelect.js +201 -0
- package/dist/cjs/f/fields/QuerySelect/index.js +15 -0
- package/dist/cjs/f/fields/QuerySelect/styles.scss +21 -0
- package/dist/cjs/f/fields/RatingsInput/RatingsInput.js +39 -6
- package/dist/cjs/f/fields/RatingsInput/styles.scss +29 -20
- package/dist/cjs/f/fields/SelectInput/SelectInput.js +50 -13
- package/dist/cjs/f/fields/SelectInput/styles.scss +33 -13
- package/dist/cjs/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +1 -1
- package/dist/cjs/f/fields/TextInput/TextInput.js +35 -7
- package/dist/cjs/f/fields/TextInput/styles.scss +16 -7
- package/dist/cjs/f/fields/TextareaInput/TextareaInput.js +15 -8
- package/dist/cjs/f/fields/TextareaInput/styles.scss +19 -6
- package/dist/cjs/f/fields/index.js +15 -23
- package/dist/cjs/form-reset.scss +1 -1
- package/dist/cjs/index.js +26 -0
- package/dist/cjs/test/QueryLoader/QueryLoader.js +41 -0
- package/dist/cjs/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +71 -0
- package/dist/cjs/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js +49 -0
- package/dist/cjs/test/QueryLoader/common/PreloadedTestData/index.js +15 -0
- package/dist/cjs/test/QueryLoader/common/index.js +13 -0
- package/dist/cjs/test/QueryLoader/index.js +15 -0
- package/dist/cjs/test/QueryLoader/styles.scss +9 -0
- package/dist/cjs/test/index.js +13 -0
- package/dist/cjs/utils/hooks/index.js +23 -0
- package/dist/cjs/utils/hooks/useDynamicPosition.js +107 -0
- package/dist/cjs/utils/hooks/useWindowSize.js +39 -0
- package/dist/cjs/utils/index.js +19 -0
- package/dist/es/a/BackgroundGradient/BackgroundGradient.js +55 -0
- package/dist/es/a/BackgroundGradient/index.js +2 -0
- package/dist/es/a/BackgroundGradient/styles.scss +16 -0
- package/dist/es/a/ContentTree/ContentTree.js +67 -0
- package/dist/es/a/ContentTree/common/Tree/Tree.js +98 -0
- package/dist/es/a/ContentTree/common/Tree/index.js +2 -0
- package/dist/es/a/ContentTree/common/index.js +3 -0
- package/dist/es/a/ContentTree/common/useContentTree.js +74 -0
- package/dist/es/a/ContentTree/common/useFirstVisibleNode.js +54 -0
- package/dist/es/a/ContentTree/index.js +2 -0
- package/dist/es/a/ContentTree/styles.scss +33 -0
- package/dist/es/a/Conversation/Conversation.js +14 -8
- package/dist/es/a/Conversation/common/Message/Message.js +32 -6
- package/dist/es/a/Conversation/styles.scss +132 -33
- package/dist/es/a/OvalIllustration/OvalIllustration.js +111 -0
- package/dist/es/a/OvalIllustration/index.js +2 -0
- package/dist/es/a/OvalIllustration/styles.scss +102 -0
- package/dist/es/a/Popover/Popover.js +118 -0
- package/dist/es/a/Popover/common/Divider/Divider.js +47 -0
- package/dist/es/a/Popover/common/Divider/index.js +2 -0
- package/dist/es/a/Popover/common/Item/Item.js +47 -0
- package/dist/es/a/Popover/common/Item/index.js +2 -0
- package/dist/es/a/Popover/common/index.js +2 -0
- package/dist/es/a/Popover/index.js +2 -0
- package/dist/es/a/Popover/styles.scss +33 -0
- package/dist/es/a/Shapes/Shapes.js +39 -9
- package/dist/es/a/Shapes/styles.scss +79 -23
- package/dist/es/a/SnapScroller/SnapScroller.js +61 -0
- package/dist/es/a/SnapScroller/index.js +2 -0
- package/dist/es/a/SnapScroller/styles.scss +38 -0
- package/dist/es/a/index.js +6 -1
- package/dist/es/b/Button/Button.js +8 -2
- package/dist/es/b/Button/styles.scss +55 -10
- package/dist/es/b/Logo/Logo.js +41 -41
- package/dist/es/b/Logo/styles.scss +0 -138
- package/dist/es/b/Page/common/Section/Section.js +34 -6
- package/dist/es/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.js +16 -9
- package/dist/es/c/ContentSlides/common/Navigator/Navigator.js +4 -3
- package/dist/es/c/ContentSlides/styles.scss +10 -4
- package/dist/es/c/SocialMediaShareButton/SocialMediaShareButton.js +95 -0
- package/dist/es/c/SocialMediaShareButton/index.js +2 -0
- package/dist/es/c/SocialMediaShareButton/styles.scss +39 -0
- package/dist/es/c/index.js +2 -1
- package/dist/es/f/FormInput/FormInput.js +20 -3
- package/dist/es/f/FormInput/styles.scss +11 -0
- package/dist/es/f/common/Debugger/Debugger.js +1 -1
- package/dist/es/f/common/Label/Label.js +1 -1
- package/dist/es/f/common/Label/styles.scss +1 -1
- package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +1 -1
- package/dist/es/f/fields/ChoicesInput/styles.scss +17 -2
- package/dist/es/f/fields/QueryCombobox/QueryCombobox.js +213 -0
- package/dist/es/f/fields/QueryCombobox/common/Combobox/Combobox.js +185 -0
- package/dist/es/f/fields/QueryCombobox/common/Combobox/index.js +2 -0
- package/dist/es/f/fields/QueryCombobox/common/Menu/Menu.js +77 -0
- package/dist/es/f/fields/QueryCombobox/common/Menu/index.js +2 -0
- package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.js +276 -0
- package/dist/es/f/fields/QueryCombobox/common/MultipleCombobox/index.js +2 -0
- package/dist/es/f/fields/QueryCombobox/common/index.js +3 -0
- package/dist/es/f/fields/QueryCombobox/index.js +2 -0
- package/dist/es/f/fields/QueryCombobox/styles.scss +90 -0
- package/dist/es/f/fields/QuerySelect/QuerySelect.js +179 -0
- package/dist/es/f/fields/QuerySelect/index.js +2 -0
- package/dist/es/f/fields/QuerySelect/styles.scss +21 -0
- package/dist/es/f/fields/RatingsInput/RatingsInput.js +38 -6
- package/dist/es/f/fields/RatingsInput/styles.scss +29 -20
- package/dist/es/f/fields/SelectInput/SelectInput.js +49 -13
- package/dist/es/f/fields/SelectInput/styles.scss +33 -13
- package/dist/es/f/fields/TaskRecommendationInput/TaskRecommendationInput.js +1 -1
- package/dist/es/f/fields/TextInput/TextInput.js +35 -7
- package/dist/es/f/fields/TextInput/styles.scss +16 -7
- package/dist/es/f/fields/TextareaInput/TextareaInput.js +15 -8
- package/dist/es/f/fields/TextareaInput/styles.scss +19 -6
- package/dist/es/f/fields/index.js +3 -4
- package/dist/es/form-reset.scss +1 -1
- package/dist/es/index.js +3 -1
- package/dist/es/test/QueryLoader/QueryLoader.js +29 -0
- package/dist/es/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +71 -0
- package/dist/es/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.js +31 -0
- package/dist/es/test/QueryLoader/common/PreloadedTestData/index.js +2 -0
- package/dist/es/test/QueryLoader/common/index.js +1 -0
- package/dist/es/test/QueryLoader/index.js +2 -0
- package/dist/es/test/QueryLoader/styles.scss +9 -0
- package/dist/es/test/index.js +1 -0
- package/dist/es/utils/hooks/index.js +2 -0
- package/dist/es/utils/hooks/useDynamicPosition.js +93 -0
- package/dist/es/utils/hooks/useWindowSize.js +27 -0
- package/dist/es/utils/index.js +1 -0
- package/package.json +18 -4
- package/relay.config.js +12 -0
- package/schema.graphql +4075 -0
- package/scripts/fetchSchema.js +74 -0
- package/src/__snapshots__/Storyshots.test.js.snap +7018 -3507
- package/src/local.scss +4 -2
- package/src/stories/StyleGuide/Sprites.stories.mdx +25 -0
- package/src/stories/StyleGuide/helpers.js +16 -0
- package/src/stories/a/BackgroundGradient.stories.jsx +38 -0
- package/src/stories/a/ContentTree.stories.jsx +662 -0
- package/src/stories/a/Conversation.stories.jsx +78 -1
- package/src/stories/a/OvalIllustration.stories.jsx +59 -0
- package/src/stories/a/Popover.stories.jsx +106 -0
- package/src/stories/a/Shapes.stories.jsx +74 -43
- package/src/stories/a/SnapScroller.stories.jsx +98 -0
- package/src/stories/b/Button.stories.jsx +27 -4
- package/src/stories/b/Logo.stories.jsx +17 -9
- package/src/stories/b/Page.stories.jsx +27 -2
- package/src/stories/c/ContentSlides.stories.jsx +154 -2
- package/src/stories/c/SocialMediaShareButton.stories.jsx +25 -0
- package/src/stories/f/FormInput.stories.jsx +233 -0
- package/src/stories/f/QueryCombobox.stories.jsx +269 -0
- package/src/stories/f/QuerySelect.stories.jsx +134 -0
- package/src/stories/f/RatingsInput.stories.jsx +3 -2
- package/src/stories/f/SelectInput.stories.jsx +36 -5
- package/src/stories/f/TextInput.stories.jsx +15 -4
- package/src/stories/f/TextareaInput.stories.jsx +42 -6
- package/src/stories/f/__generated__/FormInputAllTaskStatusesQuery.graphql.js +122 -0
- package/src/stories/f/__generated__/FormInputAllTeamsQuery.graphql.js +139 -0
- package/src/stories/f/__generated__/QueryComboboxAllTeamsQuery.graphql.js +139 -0
- package/src/stories/f/__generated__/QuerySelectAllTaskStatusesQuery.graphql.js +122 -0
- package/src/stories/test/QueryLoader.stories.jsx +36 -0
- package/src/stories/utils/generateNodeId.js +12 -0
- package/src/stories/utils/lorem.js +15 -0
- package/src/stories/utils/relay/EnvironmentProvider.jsx +14 -0
- package/src/stories/utils/relay/environment.js +5 -0
- package/src/stories/utils/relay/index.js +4 -0
- package/src/stories/utils/relay/mockRelayOperation.js +14 -0
- package/src/stories/utils/relay/mockResolvers.js +299 -0
- package/src/stories/utils/testData.js +63 -0
- package/src/ui/a/BackgroundGradient/BackgroundGradient.jsx +76 -0
- package/src/ui/a/BackgroundGradient/index.js +2 -0
- package/src/ui/a/BackgroundGradient/styles.scss +16 -0
- package/src/ui/a/ContentTree/ContentTree.jsx +88 -0
- package/src/ui/a/ContentTree/common/Tree/Tree.jsx +138 -0
- package/src/ui/a/ContentTree/common/Tree/index.js +2 -0
- package/src/ui/a/ContentTree/common/index.js +3 -0
- package/src/ui/a/ContentTree/common/useContentTree.js +83 -0
- package/src/ui/a/ContentTree/common/useFirstVisibleNode.js +59 -0
- package/src/ui/a/ContentTree/index.js +2 -0
- package/src/ui/a/ContentTree/styles.scss +33 -0
- package/src/ui/a/Conversation/Conversation.jsx +15 -7
- package/src/ui/a/Conversation/common/Message/Message.jsx +38 -6
- package/src/ui/a/Conversation/styles.scss +132 -33
- package/src/ui/a/OvalIllustration/OvalIllustration.jsx +134 -0
- package/src/ui/a/OvalIllustration/index.js +2 -0
- package/src/ui/a/OvalIllustration/styles.scss +102 -0
- package/src/ui/a/Popover/Popover.jsx +157 -0
- package/src/ui/a/Popover/index.js +2 -0
- package/src/ui/a/Popover/styles.scss +33 -0
- package/src/ui/a/Shapes/Shapes.jsx +44 -7
- package/src/ui/a/Shapes/styles.scss +79 -23
- package/src/ui/a/SnapScroller/SnapScroller.jsx +83 -0
- package/src/ui/a/SnapScroller/index.js +2 -0
- package/src/ui/a/SnapScroller/styles.scss +38 -0
- package/src/ui/a/index.js +5 -0
- package/src/ui/b/Button/Button.jsx +9 -1
- package/src/ui/b/Button/styles.scss +55 -10
- package/src/ui/b/Logo/Logo.jsx +41 -41
- package/src/ui/b/Logo/styles.scss +0 -138
- package/src/ui/b/Page/common/Section/Section.jsx +39 -5
- package/src/ui/c/ContentSlides/common/HorizontalMenu/HorizontalMenu.jsx +12 -5
- package/src/ui/c/ContentSlides/common/Navigator/Navigator.jsx +3 -2
- package/src/ui/c/ContentSlides/styles.scss +10 -4
- package/src/ui/c/SocialMediaShareButton/SocialMediaShareButton.jsx +121 -0
- package/src/ui/c/SocialMediaShareButton/index.js +2 -0
- package/src/ui/c/SocialMediaShareButton/styles.scss +39 -0
- package/src/ui/c/index.js +1 -0
- package/src/ui/f/FormInput/FormInput.jsx +26 -1
- package/src/ui/f/FormInput/styles.scss +11 -0
- package/src/ui/f/common/Debugger/Debugger.jsx +1 -1
- package/src/ui/f/common/Label/Label.jsx +1 -1
- package/src/ui/f/common/Label/styles.scss +1 -1
- package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +1 -1
- package/src/ui/f/fields/ChoicesInput/styles.scss +17 -2
- package/src/ui/f/fields/QueryCombobox/QueryCombobox.jsx +227 -0
- package/src/ui/f/fields/QueryCombobox/common/Combobox/Combobox.jsx +222 -0
- package/src/ui/f/fields/QueryCombobox/common/Combobox/index.js +2 -0
- package/src/ui/f/fields/QueryCombobox/common/Menu/Menu.jsx +103 -0
- package/src/ui/f/fields/QueryCombobox/common/Menu/index.js +2 -0
- package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/MultipleCombobox.jsx +318 -0
- package/src/ui/f/fields/QueryCombobox/common/MultipleCombobox/index.js +2 -0
- package/src/ui/f/fields/QueryCombobox/common/index.js +3 -0
- package/src/ui/f/fields/QueryCombobox/index.js +2 -0
- package/src/ui/f/fields/QueryCombobox/styles.scss +90 -0
- package/src/ui/f/fields/QuerySelect/QuerySelect.jsx +200 -0
- package/src/ui/f/fields/QuerySelect/index.js +2 -0
- package/src/ui/f/fields/RatingsInput/RatingsInput.jsx +54 -19
- package/src/ui/f/fields/RatingsInput/styles.scss +29 -20
- package/src/ui/f/fields/SelectInput/SelectInput.jsx +59 -8
- package/src/ui/f/fields/SelectInput/styles.scss +33 -13
- package/src/ui/f/fields/TextInput/TextInput.jsx +31 -3
- package/src/ui/f/fields/TextInput/styles.scss +16 -7
- package/src/ui/f/fields/TextareaInput/TextareaInput.jsx +24 -13
- package/src/ui/f/fields/TextareaInput/styles.scss +19 -6
- package/src/ui/f/fields/index.js +2 -3
- package/src/ui/form-reset.scss +1 -1
- package/src/ui/index.js +2 -0
- package/src/ui/test/QueryLoader/QueryLoader.jsx +41 -0
- package/src/ui/test/QueryLoader/__generated__/QueryLoaderHelloQuery.graphql.js +68 -0
- package/src/ui/test/QueryLoader/common/PreloadedTestData/PreloadedTestData.jsx +51 -0
- package/src/ui/test/QueryLoader/common/PreloadedTestData/index.js +2 -0
- package/src/ui/test/QueryLoader/common/index.js +1 -0
- package/src/ui/test/QueryLoader/index.js +2 -0
- package/src/ui/test/index.js +1 -0
- package/src/ui/utils/hooks/index.js +2 -0
- package/src/ui/utils/hooks/useDynamicPosition.js +104 -0
- package/src/ui/utils/hooks/useWindowSize.js +32 -0
- package/src/ui/utils/index.js +1 -0
- package/stylelint.config.js +13 -13
- package/src/stories/f/CheckboxInput.stories.jsx +0 -37
- package/src/stories/f/RadioInput.stories.jsx +0 -37
- package/src/stories/f/TaskRecommendationInput.stories.jsx +0 -38
- package/src/ui/f/fields/CheckboxInput/CheckboxInput.jsx +0 -107
- package/src/ui/f/fields/CheckboxInput/index.js +0 -2
- package/src/ui/f/fields/CheckboxInput/styles.scss +0 -28
- package/src/ui/f/fields/RadioInput/RadioInput.jsx +0 -112
- package/src/ui/f/fields/RadioInput/index.js +0 -2
- package/src/ui/f/fields/RadioInput/styles.scss +0 -26
- package/src/ui/f/fields/TaskRecommendationInput/TaskRecommendationInput.jsx +0 -130
- package/src/ui/f/fields/TaskRecommendationInput/index.js +0 -2
- package/src/ui/f/fields/TaskRecommendationInput/styles.scss +0 -41
|
@@ -0,0 +1,205 @@
|
|
|
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 _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _downshift = require("downshift");
|
|
13
|
+
|
|
14
|
+
var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
|
|
15
|
+
|
|
16
|
+
var _ = require("../../../..");
|
|
17
|
+
|
|
18
|
+
var _a = require("../../../../../a");
|
|
19
|
+
|
|
20
|
+
var _Menu = require("../Menu");
|
|
21
|
+
|
|
22
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
|
+
|
|
24
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
25
|
+
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
29
|
+
|
|
30
|
+
var baseClassName = _bem.default.base;
|
|
31
|
+
var componentClassName = 'combobox';
|
|
32
|
+
/**
|
|
33
|
+
* This is the component description.
|
|
34
|
+
*/
|
|
35
|
+
|
|
36
|
+
var Combobox = _ref => {
|
|
37
|
+
var {
|
|
38
|
+
id,
|
|
39
|
+
className: userClassName,
|
|
40
|
+
style,
|
|
41
|
+
label,
|
|
42
|
+
name,
|
|
43
|
+
options: items,
|
|
44
|
+
getOptions,
|
|
45
|
+
setValue,
|
|
46
|
+
error,
|
|
47
|
+
description,
|
|
48
|
+
value,
|
|
49
|
+
color,
|
|
50
|
+
minLength,
|
|
51
|
+
isFetching,
|
|
52
|
+
transformSearch // ...otherProps
|
|
53
|
+
|
|
54
|
+
} = _ref;
|
|
55
|
+
var {
|
|
56
|
+
isOpen,
|
|
57
|
+
selectItem,
|
|
58
|
+
selectedItem,
|
|
59
|
+
getLabelProps,
|
|
60
|
+
getMenuProps,
|
|
61
|
+
getInputProps,
|
|
62
|
+
highlightedIndex,
|
|
63
|
+
getComboboxProps,
|
|
64
|
+
getItemProps
|
|
65
|
+
} = (0, _downshift.useCombobox)({
|
|
66
|
+
items,
|
|
67
|
+
initialSelectedItem: value,
|
|
68
|
+
itemToString: item => item ? item.label : '',
|
|
69
|
+
onInputValueChange: _ref2 => {
|
|
70
|
+
var {
|
|
71
|
+
inputValue
|
|
72
|
+
} = _ref2;
|
|
73
|
+
var transformedInput = transformSearch(inputValue);
|
|
74
|
+
|
|
75
|
+
if (transformedInput.length > minLength) {
|
|
76
|
+
getOptions(transformedInput);
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
}); // If the user has selected an item, we'll set the value of the field
|
|
80
|
+
// or if the combobox state has a selected item, we'll set the value to the formik state
|
|
81
|
+
|
|
82
|
+
(0, React.useEffect)(() => {
|
|
83
|
+
if (selectedItem) {
|
|
84
|
+
setValue(selectedItem);
|
|
85
|
+
}
|
|
86
|
+
}, [selectedItem]); // If the formik state has a value, we'll set the selected item to the combobox state
|
|
87
|
+
|
|
88
|
+
(0, React.useEffect)(() => {
|
|
89
|
+
if ((value === null || value === void 0 ? void 0 : value.value) !== (selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.value)) {
|
|
90
|
+
selectItem(value);
|
|
91
|
+
}
|
|
92
|
+
}, [value]);
|
|
93
|
+
var parentRef = (0, React.useRef)(null);
|
|
94
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
95
|
+
id: id,
|
|
96
|
+
className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
|
|
97
|
+
style: style,
|
|
98
|
+
ref: parentRef
|
|
99
|
+
}, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
|
|
100
|
+
name: name
|
|
101
|
+
}), label), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
|
|
102
|
+
className: "input-wrapper"
|
|
103
|
+
}), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
|
|
104
|
+
className: "input"
|
|
105
|
+
})), isFetching && /*#__PURE__*/React.createElement(_a.LoadingCircle, {
|
|
106
|
+
className: "x-main2"
|
|
107
|
+
})), /*#__PURE__*/React.createElement(_a.Popover, {
|
|
108
|
+
isOpen: isOpen,
|
|
109
|
+
parentRef: parentRef
|
|
110
|
+
}, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
|
|
111
|
+
isOpen: isOpen,
|
|
112
|
+
getItemProps: getItemProps,
|
|
113
|
+
highlightedIndex: highlightedIndex,
|
|
114
|
+
items: items
|
|
115
|
+
}, getMenuProps()))), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
|
|
116
|
+
isError: !!error
|
|
117
|
+
}, error || description));
|
|
118
|
+
};
|
|
119
|
+
|
|
120
|
+
Combobox.propTypes = {
|
|
121
|
+
/**
|
|
122
|
+
* The HTML id for this element
|
|
123
|
+
*/
|
|
124
|
+
id: _propTypes.default.string,
|
|
125
|
+
|
|
126
|
+
/**
|
|
127
|
+
* The HTML class names for this element
|
|
128
|
+
*/
|
|
129
|
+
className: _propTypes.default.string,
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* The React-written, css properties for this element.
|
|
133
|
+
*/
|
|
134
|
+
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
135
|
+
|
|
136
|
+
/**
|
|
137
|
+
* The label of the custom select input
|
|
138
|
+
*/
|
|
139
|
+
label: _propTypes.default.string,
|
|
140
|
+
|
|
141
|
+
/**
|
|
142
|
+
* The custom select input options from the backend
|
|
143
|
+
*/
|
|
144
|
+
options: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
145
|
+
value: _propTypes.default.string,
|
|
146
|
+
label: _propTypes.default.string
|
|
147
|
+
})),
|
|
148
|
+
|
|
149
|
+
/**
|
|
150
|
+
* The name of the custom select input
|
|
151
|
+
*/
|
|
152
|
+
name: _propTypes.default.string,
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* The function to fetch the options from the backend
|
|
156
|
+
*/
|
|
157
|
+
getOptions: _propTypes.default.func,
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* The function to set the value of the custom select input
|
|
161
|
+
*/
|
|
162
|
+
setValue: _propTypes.default.func.isRequired,
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* The custom select input description
|
|
166
|
+
*/
|
|
167
|
+
description: _propTypes.default.string,
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* The error object
|
|
171
|
+
*/
|
|
172
|
+
error: _propTypes.default.objectOf(_propTypes.default.string),
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* The value of the custom select input
|
|
176
|
+
*/
|
|
177
|
+
value: _propTypes.default.shape({
|
|
178
|
+
value: _propTypes.default.string,
|
|
179
|
+
label: _propTypes.default.string
|
|
180
|
+
}),
|
|
181
|
+
|
|
182
|
+
/**
|
|
183
|
+
* The base color of the combobox custom select input
|
|
184
|
+
*/
|
|
185
|
+
color: _propTypes.default.string,
|
|
186
|
+
|
|
187
|
+
/**
|
|
188
|
+
* Whether the query getting the combobox options is inFlight
|
|
189
|
+
*/
|
|
190
|
+
isFetching: _propTypes.default.bool.isRequired,
|
|
191
|
+
|
|
192
|
+
/**
|
|
193
|
+
* The minimum length of the search input to start fetching the options
|
|
194
|
+
*/
|
|
195
|
+
minLength: _propTypes.default.number,
|
|
196
|
+
|
|
197
|
+
/**
|
|
198
|
+
* The function to transform the search input
|
|
199
|
+
*/
|
|
200
|
+
transformSearch: _propTypes.default.func
|
|
201
|
+
};
|
|
202
|
+
Combobox.defaultProps = {// someProp: false
|
|
203
|
+
};
|
|
204
|
+
var _default = Combobox;
|
|
205
|
+
exports.default = _default;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "Combobox", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _Combobox.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _Combobox = _interopRequireDefault(require("./Combobox"));
|
|
14
|
+
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,103 @@
|
|
|
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 _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
|
|
13
|
+
|
|
14
|
+
var _excluded = ["id", "className", "style", "items", "isOpen", "highlightedIndex", "getItemProps"];
|
|
15
|
+
|
|
16
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
|
+
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
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; }
|
|
21
|
+
|
|
22
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
|
+
|
|
24
|
+
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; }
|
|
25
|
+
|
|
26
|
+
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; }
|
|
27
|
+
|
|
28
|
+
// Local Definitions
|
|
29
|
+
var baseClassName = _bem.default.base;
|
|
30
|
+
var componentClassName = 'menu';
|
|
31
|
+
/**
|
|
32
|
+
* This is the component description.
|
|
33
|
+
*/
|
|
34
|
+
|
|
35
|
+
var Menu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
36
|
+
var {
|
|
37
|
+
id,
|
|
38
|
+
className: userClassName,
|
|
39
|
+
style,
|
|
40
|
+
items,
|
|
41
|
+
isOpen,
|
|
42
|
+
highlightedIndex,
|
|
43
|
+
getItemProps
|
|
44
|
+
} = _ref,
|
|
45
|
+
otherProps = _objectWithoutProperties(_ref, _excluded);
|
|
46
|
+
|
|
47
|
+
return /*#__PURE__*/React.createElement("ul", _extends({
|
|
48
|
+
id: id,
|
|
49
|
+
className: [baseClassName, componentClassName, userClassName].filter(e => e).join(' '),
|
|
50
|
+
style: style,
|
|
51
|
+
ref: ref
|
|
52
|
+
}, otherProps), isOpen && items.map((item, index) => /*#__PURE__*/React.createElement("li", _extends({
|
|
53
|
+
key: item.label
|
|
54
|
+
}, getItemProps({
|
|
55
|
+
item,
|
|
56
|
+
index
|
|
57
|
+
}), {
|
|
58
|
+
className: ['item', highlightedIndex === index && _bem.default.modifierActive].filter(Boolean).join(' ')
|
|
59
|
+
}), /*#__PURE__*/React.createElement("p", null, item.label))));
|
|
60
|
+
});
|
|
61
|
+
Menu.propTypes = {
|
|
62
|
+
/**
|
|
63
|
+
* The HTML id for this element
|
|
64
|
+
*/
|
|
65
|
+
id: _propTypes.default.string,
|
|
66
|
+
|
|
67
|
+
/**
|
|
68
|
+
* The HTML class names for this element
|
|
69
|
+
*/
|
|
70
|
+
className: _propTypes.default.string,
|
|
71
|
+
|
|
72
|
+
/**
|
|
73
|
+
* The React-written, css properties for this element.
|
|
74
|
+
*/
|
|
75
|
+
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
76
|
+
|
|
77
|
+
/**
|
|
78
|
+
* The items to be displayed in the menu
|
|
79
|
+
*/
|
|
80
|
+
items: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
81
|
+
value: _propTypes.default.string,
|
|
82
|
+
label: _propTypes.default.string
|
|
83
|
+
})),
|
|
84
|
+
|
|
85
|
+
/**
|
|
86
|
+
* Whether or not the menu is open
|
|
87
|
+
*/
|
|
88
|
+
isOpen: _propTypes.default.bool,
|
|
89
|
+
|
|
90
|
+
/**
|
|
91
|
+
* The index of the highlighted item
|
|
92
|
+
*/
|
|
93
|
+
highlightedIndex: _propTypes.default.number,
|
|
94
|
+
|
|
95
|
+
/**
|
|
96
|
+
* The function to get the item props
|
|
97
|
+
*/
|
|
98
|
+
getItemProps: _propTypes.default.func
|
|
99
|
+
};
|
|
100
|
+
Menu.defaultProps = {// someProp:false
|
|
101
|
+
};
|
|
102
|
+
var _default = Menu;
|
|
103
|
+
exports.default = _default;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "Menu", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _Menu.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _Menu = _interopRequireDefault(require("./Menu"));
|
|
14
|
+
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,304 @@
|
|
|
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 _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
+
|
|
12
|
+
var _bem = _interopRequireDefault(require("@pareto-engineering/bem"));
|
|
13
|
+
|
|
14
|
+
var _downshift = require("downshift");
|
|
15
|
+
|
|
16
|
+
var _b = require("../../../../../b");
|
|
17
|
+
|
|
18
|
+
var _a = require("../../../../../a");
|
|
19
|
+
|
|
20
|
+
var _ = require("../../../..");
|
|
21
|
+
|
|
22
|
+
var _Menu = require("../Menu");
|
|
23
|
+
|
|
24
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
|
+
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
27
|
+
|
|
28
|
+
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; }
|
|
29
|
+
|
|
30
|
+
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
31
|
+
|
|
32
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
|
|
33
|
+
|
|
34
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
35
|
+
|
|
36
|
+
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
37
|
+
|
|
38
|
+
var baseClassName = _bem.default.base;
|
|
39
|
+
var componentClassName = 'multiple-combobox';
|
|
40
|
+
/**
|
|
41
|
+
* @param {Array[Object]} first - first array to check if it has an item not in the second array.
|
|
42
|
+
* @param {Array[Object]} second - second array to check against the first array.
|
|
43
|
+
*
|
|
44
|
+
* @returns {Boolean} - true if the first array has an item not in the second array.
|
|
45
|
+
*/
|
|
46
|
+
|
|
47
|
+
var testIfArraysAreUnique = (first, second) => first.filter(objInFirstArray => !second.some(objInSecondArray => objInFirstArray.value === objInSecondArray.value)).length > 0;
|
|
48
|
+
/**
|
|
49
|
+
* This is the component description.
|
|
50
|
+
*/
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
var MultipleCombobox = _ref => {
|
|
54
|
+
var {
|
|
55
|
+
id,
|
|
56
|
+
className: userClassName,
|
|
57
|
+
style,
|
|
58
|
+
label,
|
|
59
|
+
name,
|
|
60
|
+
options: items,
|
|
61
|
+
getOptions,
|
|
62
|
+
setValue,
|
|
63
|
+
error,
|
|
64
|
+
description,
|
|
65
|
+
value,
|
|
66
|
+
color,
|
|
67
|
+
isFetching,
|
|
68
|
+
minLength,
|
|
69
|
+
transformSearch // ...otherProps
|
|
70
|
+
|
|
71
|
+
} = _ref;
|
|
72
|
+
var [searchInputValue, setSearchInputValue] = (0, React.useState)('');
|
|
73
|
+
var {
|
|
74
|
+
getSelectedItemProps,
|
|
75
|
+
getDropdownProps,
|
|
76
|
+
addSelectedItem,
|
|
77
|
+
removeSelectedItem,
|
|
78
|
+
setSelectedItems,
|
|
79
|
+
selectedItems
|
|
80
|
+
} = (0, _downshift.useMultipleSelection)({
|
|
81
|
+
initialSelectedItems: value || []
|
|
82
|
+
});
|
|
83
|
+
/**
|
|
84
|
+
* @returns {Boolean} - Unique items from the options array so that the combobox
|
|
85
|
+
* shows only the options that are not yet selected.
|
|
86
|
+
*/
|
|
87
|
+
|
|
88
|
+
var getFilteredItems = () => items.filter(item => selectedItems.findIndex(e => e.label === item.label) < 0);
|
|
89
|
+
|
|
90
|
+
var {
|
|
91
|
+
isOpen,
|
|
92
|
+
getLabelProps,
|
|
93
|
+
getMenuProps,
|
|
94
|
+
getInputProps,
|
|
95
|
+
getComboboxProps,
|
|
96
|
+
highlightedIndex,
|
|
97
|
+
getItemProps
|
|
98
|
+
} = (0, _downshift.useCombobox)({
|
|
99
|
+
searchInputValue,
|
|
100
|
+
defaultHighlightedIndex: 0,
|
|
101
|
+
// after selection, highlight the first item.
|
|
102
|
+
selectedItem: null,
|
|
103
|
+
items: getFilteredItems(),
|
|
104
|
+
circularNavigation: true,
|
|
105
|
+
stateReducer: (state, actionAndChanges) => {
|
|
106
|
+
var {
|
|
107
|
+
changes,
|
|
108
|
+
type
|
|
109
|
+
} = actionAndChanges;
|
|
110
|
+
|
|
111
|
+
switch (type) {
|
|
112
|
+
case _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
|
|
113
|
+
case _downshift.useCombobox.stateChangeTypes.ItemClick:
|
|
114
|
+
return _objectSpread(_objectSpread({}, changes), {}, {
|
|
115
|
+
isOpen: true // keep the menu open after selection.
|
|
116
|
+
|
|
117
|
+
});
|
|
118
|
+
|
|
119
|
+
default:
|
|
120
|
+
break;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
return changes;
|
|
124
|
+
},
|
|
125
|
+
onStateChange: _ref2 => {
|
|
126
|
+
var {
|
|
127
|
+
inputValue: newSearchInputValue,
|
|
128
|
+
type,
|
|
129
|
+
selectedItem
|
|
130
|
+
} = _ref2;
|
|
131
|
+
|
|
132
|
+
switch (type) {
|
|
133
|
+
case _downshift.useCombobox.stateChangeTypes.InputChange:
|
|
134
|
+
{
|
|
135
|
+
var transformedInput = transformSearch(newSearchInputValue);
|
|
136
|
+
|
|
137
|
+
if (transformedInput.length > minLength) {
|
|
138
|
+
getOptions(transformedInput);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
setSearchInputValue(newSearchInputValue);
|
|
142
|
+
break;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
case _downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
|
|
146
|
+
case _downshift.useCombobox.stateChangeTypes.ItemClick:
|
|
147
|
+
case _downshift.useCombobox.stateChangeTypes.InputBlur:
|
|
148
|
+
if (selectedItem) {
|
|
149
|
+
setSearchInputValue('');
|
|
150
|
+
addSelectedItem(selectedItem);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
break;
|
|
154
|
+
|
|
155
|
+
default:
|
|
156
|
+
break;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
});
|
|
160
|
+
(0, React.useEffect)(() => {
|
|
161
|
+
if ((selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0) {
|
|
162
|
+
setValue(selectedItems);
|
|
163
|
+
}
|
|
164
|
+
}, [selectedItems]);
|
|
165
|
+
(0, React.useEffect)(() => {
|
|
166
|
+
if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (testIfArraysAreUnique(value, selectedItems) || testIfArraysAreUnique(selectedItems, value))) {
|
|
167
|
+
setSelectedItems(value);
|
|
168
|
+
}
|
|
169
|
+
}, [value]);
|
|
170
|
+
var parentRef = (0, React.useRef)(null);
|
|
171
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
172
|
+
id: id,
|
|
173
|
+
className: [baseClassName, componentClassName, userClassName, "y-".concat(color)].filter(e => e).join(' '),
|
|
174
|
+
style: style
|
|
175
|
+
}, /*#__PURE__*/React.createElement(_.FormLabel, _extends({}, getLabelProps(), {
|
|
176
|
+
name: name
|
|
177
|
+
}), label), (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) > 0 && /*#__PURE__*/React.createElement("div", {
|
|
178
|
+
className: "selected-items"
|
|
179
|
+
}, selectedItems.map((selectedItem, index) => /*#__PURE__*/React.createElement("div", _extends({
|
|
180
|
+
key: selectedItem.label
|
|
181
|
+
}, getSelectedItemProps({
|
|
182
|
+
selectedItem,
|
|
183
|
+
index
|
|
184
|
+
}), {
|
|
185
|
+
className: "item"
|
|
186
|
+
}), /*#__PURE__*/React.createElement(_b.Button, {
|
|
187
|
+
onClick: e => {
|
|
188
|
+
e.stopPropagation();
|
|
189
|
+
removeSelectedItem(selectedItem);
|
|
190
|
+
},
|
|
191
|
+
isCompact: true,
|
|
192
|
+
isSimple: true,
|
|
193
|
+
color: color
|
|
194
|
+
}, /*#__PURE__*/React.createElement("span", {
|
|
195
|
+
className: "v25 mr-v"
|
|
196
|
+
}, selectedItem.label), /*#__PURE__*/React.createElement("span", {
|
|
197
|
+
className: "f-icons close"
|
|
198
|
+
}, "Y"))))), /*#__PURE__*/React.createElement("div", _extends({}, getComboboxProps(), {
|
|
199
|
+
className: "input-wrapper"
|
|
200
|
+
}), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(getDropdownProps({
|
|
201
|
+
preventKeyAction: isOpen
|
|
202
|
+
})), {
|
|
203
|
+
className: "input"
|
|
204
|
+
})), isFetching && /*#__PURE__*/React.createElement(_a.LoadingCircle, {
|
|
205
|
+
className: "x-main2"
|
|
206
|
+
})), /*#__PURE__*/React.createElement(_a.Popover, {
|
|
207
|
+
isOpen: isOpen,
|
|
208
|
+
parentRef: parentRef
|
|
209
|
+
}, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({
|
|
210
|
+
isOpen: isOpen,
|
|
211
|
+
getItemProps: getItemProps,
|
|
212
|
+
highlightedIndex: highlightedIndex,
|
|
213
|
+
items: getFilteredItems()
|
|
214
|
+
}, getMenuProps()))), (description || error) && /*#__PURE__*/React.createElement(_.FormDescription, {
|
|
215
|
+
isError: !!error
|
|
216
|
+
}, error || description));
|
|
217
|
+
};
|
|
218
|
+
|
|
219
|
+
MultipleCombobox.propTypes = {
|
|
220
|
+
/**
|
|
221
|
+
* The HTML id for this element
|
|
222
|
+
*/
|
|
223
|
+
id: _propTypes.default.string,
|
|
224
|
+
|
|
225
|
+
/**
|
|
226
|
+
* The HTML class names for this element
|
|
227
|
+
*/
|
|
228
|
+
className: _propTypes.default.string,
|
|
229
|
+
|
|
230
|
+
/**
|
|
231
|
+
* The React-written, css properties for this element.
|
|
232
|
+
*/
|
|
233
|
+
style: _propTypes.default.objectOf(_propTypes.default.string),
|
|
234
|
+
|
|
235
|
+
/**
|
|
236
|
+
* The label of the custom select input
|
|
237
|
+
*/
|
|
238
|
+
label: _propTypes.default.string,
|
|
239
|
+
|
|
240
|
+
/**
|
|
241
|
+
* The custom select input options from the backend
|
|
242
|
+
*/
|
|
243
|
+
options: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
244
|
+
value: _propTypes.default.string,
|
|
245
|
+
label: _propTypes.default.string
|
|
246
|
+
})),
|
|
247
|
+
|
|
248
|
+
/**
|
|
249
|
+
* The name of the custom select input
|
|
250
|
+
*/
|
|
251
|
+
name: _propTypes.default.string,
|
|
252
|
+
|
|
253
|
+
/**
|
|
254
|
+
* The function to fetch the options from the backend
|
|
255
|
+
*/
|
|
256
|
+
getOptions: _propTypes.default.func,
|
|
257
|
+
|
|
258
|
+
/**
|
|
259
|
+
* The function to set the value of the custom select input
|
|
260
|
+
*/
|
|
261
|
+
setValue: _propTypes.default.func.isRequired,
|
|
262
|
+
|
|
263
|
+
/**
|
|
264
|
+
* The custom select input description
|
|
265
|
+
*/
|
|
266
|
+
description: _propTypes.default.string,
|
|
267
|
+
|
|
268
|
+
/**
|
|
269
|
+
* The error object
|
|
270
|
+
*/
|
|
271
|
+
error: _propTypes.default.objectOf(_propTypes.default.string),
|
|
272
|
+
|
|
273
|
+
/**
|
|
274
|
+
* The value of the custom select input
|
|
275
|
+
*/
|
|
276
|
+
value: _propTypes.default.arrayOf(_propTypes.default.shape({
|
|
277
|
+
value: _propTypes.default.string,
|
|
278
|
+
label: _propTypes.default.string
|
|
279
|
+
})),
|
|
280
|
+
|
|
281
|
+
/**
|
|
282
|
+
* The base color of the custom select input
|
|
283
|
+
*/
|
|
284
|
+
color: _propTypes.default.string,
|
|
285
|
+
|
|
286
|
+
/**
|
|
287
|
+
* Whether the query getting the combobox options is inFlight
|
|
288
|
+
*/
|
|
289
|
+
isFetching: _propTypes.default.bool.isRequired,
|
|
290
|
+
|
|
291
|
+
/**
|
|
292
|
+
* The minimum length of the search input to start fetching the options
|
|
293
|
+
*/
|
|
294
|
+
minLength: _propTypes.default.number,
|
|
295
|
+
|
|
296
|
+
/**
|
|
297
|
+
* The function to transform the search input
|
|
298
|
+
*/
|
|
299
|
+
transformSearch: _propTypes.default.func
|
|
300
|
+
};
|
|
301
|
+
MultipleCombobox.defaultProps = {// someProp: false
|
|
302
|
+
};
|
|
303
|
+
var _default = MultipleCombobox;
|
|
304
|
+
exports.default = _default;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "MultipleCombobox", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _MultipleCombobox.default;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
var _MultipleCombobox = _interopRequireDefault(require("./MultipleCombobox"));
|
|
14
|
+
|
|
15
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "Menu", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _Menu.Menu;
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
Object.defineProperty(exports, "Combobox", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function get() {
|
|
15
|
+
return _Combobox.Combobox;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "MultipleCombobox", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function get() {
|
|
21
|
+
return _MultipleCombobox.MultipleCombobox;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
var _Menu = require("./Menu");
|
|
26
|
+
|
|
27
|
+
var _Combobox = require("./Combobox");
|
|
28
|
+
|
|
29
|
+
var _MultipleCombobox = require("./MultipleCombobox");
|