@eccenca/gui-elements 23.0.0-rc.7 → 23.1.0-rc.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +58 -20
- package/README.md +7 -0
- package/dist/cjs/cmem/ActivityControl/ActivityControlWidget.js.map +1 -1
- package/dist/cjs/cmem/react-flow/ReactFlow/ReactFlow.js +7 -2
- package/dist/cjs/cmem/react-flow/ReactFlow/ReactFlow.js.map +1 -1
- package/dist/cjs/cmem/react-flow/StickyNoteModal/StickyNoteModal.js +3 -7
- package/dist/cjs/cmem/react-flow/StickyNoteModal/StickyNoteModal.js.map +1 -1
- package/dist/cjs/cmem/react-flow/extensions/scrollOnDragHook.js +200 -0
- package/dist/cjs/cmem/react-flow/extensions/scrollOnDragHook.js.map +1 -0
- package/dist/cjs/common/Intent/index.js +7 -3
- package/dist/cjs/common/Intent/index.js.map +1 -1
- package/dist/cjs/common/utils/characters.js +82 -0
- package/dist/cjs/common/utils/characters.js.map +1 -0
- package/dist/cjs/components/Application/ApplicationTitle.js +2 -2
- package/dist/cjs/components/Application/ApplicationTitle.js.map +1 -1
- package/dist/cjs/components/Badge/Badge.js +44 -0
- package/dist/cjs/components/Badge/Badge.js.map +1 -0
- package/dist/cjs/components/Depiction/Depiction.js +111 -0
- package/dist/cjs/components/Depiction/Depiction.js.map +1 -0
- package/dist/cjs/components/Grid/Grid.js +7 -2
- package/dist/cjs/components/Grid/Grid.js.map +1 -1
- package/dist/cjs/components/Grid/GridColumn.js +6 -2
- package/dist/cjs/components/Grid/GridColumn.js.map +1 -1
- package/dist/cjs/components/Grid/GridRow.js +3 -0
- package/dist/cjs/components/Grid/GridRow.js.map +1 -1
- package/dist/cjs/components/Icon/BaseIcon.js +38 -0
- package/dist/cjs/components/Icon/BaseIcon.js.map +1 -0
- package/dist/cjs/components/Icon/Icon.js +9 -24
- package/dist/cjs/components/Icon/Icon.js.map +1 -1
- package/dist/cjs/components/Icon/IconButton.js +8 -1
- package/dist/cjs/components/Icon/IconButton.js.map +1 -1
- package/dist/cjs/components/Icon/TestIcon.js +35 -0
- package/dist/cjs/components/Icon/TestIcon.js.map +1 -0
- package/dist/cjs/components/Icon/canonicalIconNames.js +123 -621
- package/dist/cjs/components/Icon/canonicalIconNames.js.map +1 -1
- package/dist/cjs/components/Icon/index.js +11 -0
- package/dist/cjs/components/Icon/index.js.map +1 -0
- package/dist/cjs/components/Menu/MenuItem.js +1 -1
- package/dist/cjs/components/Menu/MenuItem.js.map +1 -1
- package/dist/cjs/components/MultiSelect/MultiSelect.js +56 -23
- package/dist/cjs/components/MultiSelect/MultiSelect.js.map +1 -1
- package/dist/cjs/components/Notification/Notification.js +10 -2
- package/dist/cjs/components/Notification/Notification.js.map +1 -1
- package/dist/cjs/components/OverviewItem/OverviewItemDepiction.js +24 -0
- package/dist/cjs/components/OverviewItem/OverviewItemDepiction.js.map +1 -1
- package/dist/cjs/components/Tag/Tag.js +6 -2
- package/dist/cjs/components/Tag/Tag.js.map +1 -1
- package/dist/cjs/components/TextField/TextArea.js +4 -2
- package/dist/cjs/components/TextField/TextArea.js.map +1 -1
- package/dist/cjs/components/TextField/TextField.js +4 -2
- package/dist/cjs/components/TextField/TextField.js.map +1 -1
- package/dist/cjs/components/TextField/useTextValidation.js +84 -0
- package/dist/cjs/components/TextField/useTextValidation.js.map +1 -0
- package/dist/cjs/components/Tree/Tree.js.map +1 -1
- package/dist/cjs/components/Typography/Highlighter.js.map +1 -1
- package/dist/cjs/components/Typography/OverflowText.js.map +1 -1
- package/dist/cjs/components/Typography/WhiteSpaceContainer.js +35 -12
- package/dist/cjs/components/Typography/WhiteSpaceContainer.js.map +1 -1
- package/dist/cjs/components/Typography/index.js +21 -0
- package/dist/cjs/components/Typography/index.js.map +1 -0
- package/dist/cjs/components/Workspace/WorkspaceContent.js +1 -1
- package/dist/cjs/components/Workspace/WorkspaceContent.js.map +1 -1
- package/dist/cjs/components/index.js +18 -0
- package/dist/cjs/components/index.js.map +1 -0
- package/dist/cjs/index.js +7 -17
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/cmem/ActivityControl/ActivityControlWidget.js.map +1 -1
- package/dist/esm/cmem/react-flow/ReactFlow/ReactFlow.js +7 -2
- package/dist/esm/cmem/react-flow/ReactFlow/ReactFlow.js.map +1 -1
- package/dist/esm/cmem/react-flow/StickyNoteModal/StickyNoteModal.js +3 -6
- package/dist/esm/cmem/react-flow/StickyNoteModal/StickyNoteModal.js.map +1 -1
- package/dist/esm/cmem/react-flow/extensions/scrollOnDragHook.js +194 -0
- package/dist/esm/cmem/react-flow/extensions/scrollOnDragHook.js.map +1 -0
- package/dist/esm/common/Intent/index.js +5 -13
- package/dist/esm/common/Intent/index.js.map +1 -1
- package/dist/esm/common/utils/characters.js +96 -0
- package/dist/esm/common/utils/characters.js.map +1 -0
- package/dist/esm/components/Application/ApplicationTitle.js +2 -2
- package/dist/esm/components/Application/ApplicationTitle.js.map +1 -1
- package/dist/esm/components/Badge/Badge.js +48 -0
- package/dist/esm/components/Badge/Badge.js.map +1 -0
- package/dist/esm/components/Depiction/Depiction.js +96 -0
- package/dist/esm/components/Depiction/Depiction.js.map +1 -0
- package/dist/esm/components/Grid/Grid.js +7 -2
- package/dist/esm/components/Grid/Grid.js.map +1 -1
- package/dist/esm/components/Grid/GridColumn.js +6 -2
- package/dist/esm/components/Grid/GridColumn.js.map +1 -1
- package/dist/esm/components/Grid/GridRow.js +3 -0
- package/dist/esm/components/Grid/GridRow.js.map +1 -1
- package/dist/esm/components/Icon/BaseIcon.js +44 -0
- package/dist/esm/components/Icon/BaseIcon.js.map +1 -0
- package/dist/esm/components/Icon/Icon.js +9 -24
- package/dist/esm/components/Icon/Icon.js.map +1 -1
- package/dist/esm/components/Icon/IconButton.js +8 -1
- package/dist/esm/components/Icon/IconButton.js.map +1 -1
- package/dist/esm/components/Icon/TestIcon.js +41 -0
- package/dist/esm/components/Icon/TestIcon.js.map +1 -0
- package/dist/esm/components/Icon/canonicalIconNames.js +123 -621
- package/dist/esm/components/Icon/canonicalIconNames.js.map +1 -1
- package/dist/esm/components/Icon/index.js +4 -0
- package/dist/esm/components/Icon/index.js.map +1 -0
- package/dist/esm/components/Menu/MenuItem.js +1 -1
- package/dist/esm/components/Menu/MenuItem.js.map +1 -1
- package/dist/esm/components/MultiSelect/MultiSelect.js +61 -44
- package/dist/esm/components/MultiSelect/MultiSelect.js.map +1 -1
- package/dist/esm/components/Notification/Notification.js +12 -4
- package/dist/esm/components/Notification/Notification.js.map +1 -1
- package/dist/esm/components/OverviewItem/OverviewItemDepiction.js +24 -0
- package/dist/esm/components/OverviewItem/OverviewItemDepiction.js.map +1 -1
- package/dist/esm/components/Tag/Tag.js +6 -2
- package/dist/esm/components/Tag/Tag.js.map +1 -1
- package/dist/esm/components/TextField/TextArea.js +4 -2
- package/dist/esm/components/TextField/TextArea.js.map +1 -1
- package/dist/esm/components/TextField/TextField.js +4 -2
- package/dist/esm/components/TextField/TextField.js.map +1 -1
- package/dist/esm/components/TextField/useTextValidation.js +78 -0
- package/dist/esm/components/TextField/useTextValidation.js.map +1 -0
- package/dist/esm/components/Tree/Tree.js.map +1 -1
- package/dist/esm/components/Typography/Highlighter.js.map +1 -1
- package/dist/esm/components/Typography/OverflowText.js.map +1 -1
- package/dist/esm/components/Typography/WhiteSpaceContainer.js +16 -14
- package/dist/esm/components/Typography/WhiteSpaceContainer.js.map +1 -1
- package/dist/esm/components/Typography/index.js +12 -0
- package/dist/esm/components/Typography/index.js.map +1 -0
- package/dist/esm/components/Workspace/WorkspaceContent.js +1 -1
- package/dist/esm/components/Workspace/WorkspaceContent.js.map +1 -1
- package/dist/esm/components/index.js +6 -0
- package/dist/esm/components/index.js.map +1 -0
- package/dist/esm/index.js +5 -10
- package/dist/esm/index.js.map +1 -1
- package/dist/types/cmem/ActivityControl/ActivityControlWidget.d.ts +2 -1
- package/dist/types/cmem/react-flow/ReactFlow/ReactFlow.d.ts +14 -0
- package/dist/types/cmem/react-flow/extensions/scrollOnDragHook.d.ts +22 -0
- package/dist/types/common/Intent/index.d.ts +4 -3
- package/dist/types/common/utils/characters.d.ts +19 -0
- package/dist/types/components/Badge/Badge.d.ts +42 -0
- package/dist/types/components/Depiction/Depiction.d.ts +71 -0
- package/dist/types/components/Grid/Grid.d.ts +21 -2
- package/dist/types/components/Grid/GridColumn.d.ts +20 -2
- package/dist/types/components/Grid/GridRow.d.ts +17 -1
- package/dist/types/components/Icon/BaseIcon.d.ts +45 -0
- package/dist/types/components/Icon/Icon.d.ts +7 -34
- package/dist/types/components/Icon/IconButton.d.ts +3 -2
- package/dist/types/components/Icon/TestIcon.d.ts +20 -0
- package/dist/types/components/Icon/canonicalIconNames.d.ts +9 -7
- package/dist/types/components/Icon/index.d.ts +4 -0
- package/dist/types/components/Menu/MenuItem.d.ts +2 -1
- package/dist/types/components/MultiSelect/MultiSelect.d.ts +3 -1
- package/dist/types/components/Notification/Notification.d.ts +13 -4
- package/dist/types/components/Tabs/Tab.d.ts +2 -0
- package/dist/types/components/Tag/Tag.d.ts +16 -3
- package/dist/types/components/TextField/TextArea.d.ts +7 -2
- package/dist/types/components/TextField/TextField.d.ts +6 -1
- package/dist/types/components/TextField/useTextValidation.d.ts +28 -0
- package/dist/types/components/Tree/Tree.d.ts +2 -1
- package/dist/types/components/Typography/Highlighter.d.ts +2 -2
- package/dist/types/components/Typography/OverflowText.d.ts +2 -2
- package/dist/types/components/Typography/WhiteSpaceContainer.d.ts +45 -4
- package/dist/types/components/Typography/index.d.ts +12 -0
- package/dist/types/components/index.d.ts +5 -0
- package/dist/types/index.d.ts +6 -11
- package/package.json +13 -16
- package/scripts/compile-sass.ts +9 -1
- package/src/_shame.scss +1 -1
- package/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx +6 -4
- package/src/cmem/ActivityControl/ActivityControlWidget.tsx +3 -2
- package/src/cmem/react-flow/ReactFlow/ReactFlow.tsx +26 -1
- package/src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx +10 -6
- package/src/cmem/react-flow/extensions/scrollOnDragHook.ts +247 -0
- package/src/common/Intent/index.ts +16 -12
- package/src/common/utils/characters.ts +111 -0
- package/src/components/Accordion/accordion.scss +4 -3
- package/src/components/Application/ApplicationTitle.tsx +2 -2
- package/src/components/Application/_config.scss +1 -1
- package/src/components/Application/_content.scss +1 -1
- package/src/components/Application/_header.scss +2 -2
- package/src/components/Application/_sidebar.scss +2 -9
- package/src/components/Application/_toolbar.scss +1 -1
- package/src/components/Application/application.scss +4 -4
- package/src/components/AutocompleteField/autoCompleteFieldUtils.tsx +13 -8
- package/src/components/Badge/Badge.stories.tsx +47 -0
- package/src/components/Badge/Badge.tsx +93 -0
- package/src/components/Badge/badge.scss +44 -0
- package/src/components/Depiction/Depiction.tsx +198 -0
- package/src/components/Depiction/depiction.scss +176 -0
- package/src/components/Depiction/stories/Depiction.stories.tsx +69 -0
- package/src/components/Depiction/stories/test-16to9.png +0 -0
- package/src/components/Depiction/stories/test-16to9.svg +41 -0
- package/src/components/Depiction/stories/test-16to9.tobase64.svg +41 -0
- package/src/components/Depiction/stories/test-16to9.tsx +44 -0
- package/src/components/Depiction/stories/test-9to16.png +0 -0
- package/src/components/Depiction/stories/test-9to16.svg +44 -0
- package/src/components/Depiction/stories/test-9to16.tobase64.svg +44 -0
- package/src/components/Depiction/stories/test-9to16.tsx +48 -0
- package/src/components/Grid/Grid.tsx +22 -4
- package/src/components/Grid/GridColumn.tsx +23 -6
- package/src/components/Grid/GridRow.tsx +17 -2
- package/src/components/Grid/grid.scss +8 -11
- package/src/components/Grid/stories/Grid.stories.tsx +27 -0
- package/src/components/Grid/stories/GridColumn.stories.tsx +66 -0
- package/src/components/Grid/stories/GridRow.stories.tsx +47 -0
- package/src/components/Icon/BaseIcon.tsx +84 -0
- package/src/components/Icon/Icon.tsx +23 -82
- package/src/components/Icon/IconButton.tsx +18 -14
- package/src/components/Icon/TestIcon.tsx +39 -0
- package/src/components/Icon/canonicalIconNames.tsx +132 -633
- package/src/components/Icon/index.ts +5 -0
- package/src/components/Icon/stories/Icon.stories.tsx +13 -0
- package/src/components/Icon/stories/IconButton.stories.tsx +14 -7
- package/src/components/Icon/stories/TestIcon.stories.tsx +28 -0
- package/src/components/Link/link.scss +2 -1
- package/src/components/Menu/MenuItem.tsx +14 -4
- package/src/components/Menu/Stories/MenuItem.stories.tsx +16 -2
- package/src/components/MultiSelect/MultiSelect.tsx +58 -27
- package/src/components/Notification/Notification.stories.tsx +4 -0
- package/src/components/Notification/Notification.tsx +26 -6
- package/src/components/OverviewItem/OverviewItemDepiction.tsx +31 -0
- package/src/components/OverviewItem/overviewitem.scss +2 -1
- package/src/components/OverviewItem/stories/OverviewItem.stories.tsx +22 -1
- package/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx +8 -3
- package/src/components/Pagination/pagination.scss +3 -2
- package/src/components/SimpleTable/simpletable.scss +11 -12
- package/src/components/Tag/Tag.stories.tsx +7 -2
- package/src/components/Tag/Tag.tsx +24 -4
- package/src/components/Tag/tag.scss +84 -3
- package/src/components/TagInput/taginput.scss +6 -0
- package/src/components/TextField/TextArea.tsx +10 -1
- package/src/components/TextField/TextField.tsx +9 -0
- package/src/components/TextField/stories/SearchField.stories.tsx +1 -1
- package/src/components/TextField/textfield.scss +12 -0
- package/src/components/TextField/useTextValidation.ts +103 -0
- package/src/components/Tooltip/tooltip.scss +1 -1
- package/src/components/Tree/Tree.stories.tsx +7 -1
- package/src/components/Tree/Tree.tsx +2 -1
- package/src/components/Typography/Highlighter.tsx +2 -2
- package/src/components/Typography/OverflowText.tsx +2 -2
- package/src/components/Typography/WhiteSpaceContainer.tsx +69 -21
- package/src/components/Typography/index.ts +25 -0
- package/src/components/Typography/stories/WhiteSpaceContainer.stories.tsx +55 -0
- package/src/components/Typography/typography.scss +3 -2
- package/src/components/Workspace/WorkspaceContent.tsx +1 -1
- package/src/components/index.scss +5 -0
- package/src/components/index.ts +5 -0
- package/src/includes/carbon-components/_components.scss +11 -0
- package/src/includes/carbon-components/_requisits.scss +18 -0
- package/src/includes/carbon-components/_variables.scss +50 -53
- package/src/index.scss +4 -105
- package/src/index.ts +6 -16
package/CHANGELOG.md
CHANGED
|
@@ -7,27 +7,65 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
7
7
|
|
|
8
8
|
### Added
|
|
9
9
|
|
|
10
|
+
* use option `--outputCss` for `yarn compile-scss` to get the transpiled CSS echoed out
|
|
11
|
+
* `<Badge />` element to add more context like icons, text or numbers to another element
|
|
12
|
+
* `<Depiction />` element to include different types of images controlling of resizing, ratio, shape
|
|
13
|
+
* `<Tag />`: add support for `intent` property
|
|
14
|
+
* `<ReactFlow />`:
|
|
15
|
+
* `scrollOnDrag`: Support to scroll the pane when going beyond the pane borders on all drag and connection operations.
|
|
16
|
+
* `<MultiSelect />`:
|
|
17
|
+
* `requestDelay`: To delay requests on query changes and only fire the most recent request.
|
|
18
|
+
* `<TestIcon />`: test icons without the need to define them via a canonical name before.
|
|
19
|
+
* `<WhiteSpaceContainer />`: property `linebreakForced` to insert line breaks within an otherwise unbreakable string to prevent text from overflowing the container.
|
|
20
|
+
* `<TextField />` and `<TextArea />`:
|
|
21
|
+
* `invisibleCharacterWarning`: callback to warn of invisible, hard to spot characters in the input text.
|
|
22
|
+
|
|
23
|
+
### Changed
|
|
24
|
+
|
|
25
|
+
* upgrade to Carbon icons v11
|
|
26
|
+
* switch from `carbon-components` to `@carbon/styles`
|
|
27
|
+
* `<GridRow />` property `dontWrapColumns=true` only works for grids on medium sized and larger viewports
|
|
28
|
+
|
|
29
|
+
### Fixed
|
|
30
|
+
|
|
31
|
+
* `<WorkspaceContent />`: do not prevent wrapping the columns of the included grid
|
|
32
|
+
|
|
33
|
+
### Deprecated
|
|
34
|
+
|
|
35
|
+
* `<Grid />` property `fullWidth` is now deprecated as grids are always used for the full viewport width
|
|
36
|
+
|
|
37
|
+
### Fixed
|
|
38
|
+
|
|
39
|
+
* `<MultiSelect />`:
|
|
40
|
+
* Requests e.g. on slow networks could get mixed up, resulting in not showing the most recent results.
|
|
41
|
+
|
|
42
|
+
## [23.0.0] - 2022-11-18
|
|
43
|
+
|
|
44
|
+
### Added
|
|
45
|
+
|
|
10
46
|
* `<CodeEditor />` element based on `CodeMirror` library, supporting Markdown, Python, Sparql, SQL, Turtle and XML syntax
|
|
11
|
-
*
|
|
12
|
-
* `<
|
|
13
|
-
* `<ReactFlowMarkers />` custom markers for ReactFlow edges, currently one new marker `arrowClosed-inverse` available
|
|
14
|
-
* `EdgeDefault.data.markerStart` param allows to add a marker to the edge starting point
|
|
15
|
-
* `EdgeDefault.data.inversePath` param allows to inverse the edge direction
|
|
16
|
-
* `EdgeDefault.data.renderLabel` function allows to render fully custom edge label including any ReactNode
|
|
17
|
-
* new `<HoverToggler />` element that allows to switch elements when hovered over.
|
|
18
|
-
* `StickyNoteNode`, usable by `stickynote` type in react flow editors for workflows and linking rules
|
|
19
|
-
* add option for `footerContent` to react flow node data
|
|
20
|
-
* add `decideContrastColorValue` method to `Utilities`, can be used to get a second color related to the lightness of the testes input color
|
|
21
|
-
* `<AutoSuggestion>`: new properties `autoCompletionRequestDelay` and `validationRequestDelay`, to configure the delay when a request is sent after nothing is typed in anymore.
|
|
22
|
-
* `<FieldItemRow`: new property `justifyItemWidths` to display all children using equal width inside the row
|
|
23
|
-
* `<BreadcrumbList />`: new properties `ignoreOverflow` and `latenOverflow`, that can be used to implement a second overflow strategy beside BlueprintJS overflow list, for example in case the overflow list leads to re-rendering loops
|
|
24
|
-
* new `<InteractionGate />` element that can wrap content that need to be blocked from user interactions, it also has options to display a spinner as overlay
|
|
25
|
-
* `<Spinner />`: new `showLocalBackdrop` property to include backdrop behind spinner making the background less visible
|
|
26
|
-
* `ContextMenu.disabled` parameter that if set to true disables the button to open the menu.
|
|
27
|
-
* `<Tooltip />`: new properties `markdownEnabler` and `markdownProps` to enable better formatted tooltips with options for line breaks, etc.
|
|
47
|
+
* `<HoverToggler />` element that allows to switch elements when hovered over.
|
|
48
|
+
* `<InteractionGate />` element that can wrap content that need to be blocked from user interactions, it also has options to display a spinner as overlay
|
|
28
49
|
* `<Tree />` component
|
|
29
50
|
* `<TabPanel />` component that can be used if `<Tabs />` is used in uncontrolled mode.
|
|
30
|
-
* `<
|
|
51
|
+
* `<ReactFlowMarkers />` custom markers for ReactFlow edges, currently one new marker `arrowClosed-inverse` available
|
|
52
|
+
* `<StickyNoteNode />`, usable by `stickynote` type in react flow editors for workflows and linking rules
|
|
53
|
+
* `CssCustomProperties` and `getColorConfiguration` utilities can be used to exchange color configurations between SCSS and JS
|
|
54
|
+
* `decideContrastColorValue` method to get a second color related to the lightness of the testes input color
|
|
55
|
+
* `<SimpleDialog />`: properties `showFullScreenToggler` and `startInFullScreenMode`
|
|
56
|
+
* `<EdgeDefault />`: new properties for the edge data
|
|
57
|
+
* `markerStart` allows to add a marker to the edge starting point
|
|
58
|
+
* `inversePath` allows to inverse the edge direction
|
|
59
|
+
* `renderLabel` function to render fully custom edge label including any ReactNode
|
|
60
|
+
* `<NodeContent />`: property `footerContent` to add footer content to a react flow node
|
|
61
|
+
* `<AutoSuggestion>`: properties `autoCompletionRequestDelay` and `validationRequestDelay`, to configure the delay when a request is sent after nothing is typed in anymore.
|
|
62
|
+
* `<FieldItemRow`: property `justifyItemWidths` to display all children using equal width inside the row
|
|
63
|
+
* `<BreadcrumbList />`: properties `ignoreOverflow` and `latenOverflow`, that can be used to implement a second overflow strategy beside BlueprintJS overflow list, for example in case the overflow list leads to re-rendering loops
|
|
64
|
+
* `<Spinner />`: `showLocalBackdrop` property to include backdrop behind spinner making the background less visible
|
|
65
|
+
* `<ContextMenu />`: `disabled` property that disables the button to open the menu.
|
|
66
|
+
* `<Tooltip />`: properties `markdownEnabler` and `markdownProps` to enable better formatted tooltips with options for line breaks, etc.
|
|
67
|
+
* `<AutoCompleteField />`: `onlyDropdownWithQuery` property to prevent dropdown as long as the input field is empty
|
|
68
|
+
* large addition to the Storybook, we almost doubled available components and stories
|
|
31
69
|
|
|
32
70
|
### Fixed
|
|
33
71
|
|
|
@@ -40,7 +78,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
40
78
|
* fixed `<MultiSelect />` to correctly update created items that are selected while still maintaining a cache of all newly created items
|
|
41
79
|
* do not change cursor to pointer by default on tooltip targets
|
|
42
80
|
|
|
43
|
-
###
|
|
81
|
+
### Changed
|
|
44
82
|
|
|
45
83
|
* move style imports of CodeMirror layout to `extensions`
|
|
46
84
|
* color configurations for react flow editor are not exported as modules anymore, they need to be fetched by `getColorConfiguration` method in JS directly
|
|
@@ -49,7 +87,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
|
|
|
49
87
|
* this comes also with a necessary switch from `node-sass` to `sass` package, a javascript port from the original dart sass library, see migration notes to update your build process
|
|
50
88
|
* `<TextField />` and `<AutoCompleteField />` now include a `title` attribute on the natively used `input` element to show the value if it is `disabled` or `readOnly`
|
|
51
89
|
* flashing color regarding the intent state of a `<TextField />`
|
|
52
|
-
* AutoCompleteField
|
|
90
|
+
* `<AutoCompleteField />`: Add 'hasBackDrop' parameter to use a backdrop for its popover in order for outside clicks to always close the popover. Default: false
|
|
53
91
|
|
|
54
92
|
### Migration notes
|
|
55
93
|
|
package/README.md
CHANGED
|
@@ -14,6 +14,13 @@ yarn add @eccenca/gui-elements
|
|
|
14
14
|
|
|
15
15
|
It could be also included as Git submodule to your projects and used via yarn link or yarn workspaces.
|
|
16
16
|
|
|
17
|
+
As long as IBM Carbon does not support TypeScript it is necessary to install `@types/carbon-components-react` as development dependency:
|
|
18
|
+
|
|
19
|
+
```
|
|
20
|
+
yarn add --dev @types/carbon-components-react
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
|
|
17
24
|
### Inclusion
|
|
18
25
|
|
|
19
26
|
* To include SCSS styles for all basic components add `@import "~@eccenca/gui-elements/index";` into your main SCSS file.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ActivityControlWidget.js","sourceRoot":"","sources":["../../../../src/cmem/ActivityControl/ActivityControlWidget.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,uCAcqB;AACrB,6DAAsE;
|
|
1
|
+
{"version":3,"file":"ActivityControlWidget.js","sourceRoot":"","sources":["../../../../src/cmem/ActivityControl/ActivityControlWidget.tsx"],"names":[],"mappings":"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"}
|
|
@@ -41,19 +41,24 @@ const unspecifiedConfig = __importStar(require("./../configuration/unspecified")
|
|
|
41
41
|
const graphConfig = __importStar(require("./../configuration/graph"));
|
|
42
42
|
const workflowConfig = __importStar(require("./../configuration/workflow"));
|
|
43
43
|
const linkingConfig = __importStar(require("./../configuration/linking"));
|
|
44
|
+
const scrollOnDragHook_1 = require("../extensions/scrollOnDragHook");
|
|
44
45
|
/**
|
|
45
46
|
* `ReactFlow` container extension that includes pre-configured nodes and edges for
|
|
46
47
|
* Corporate Memory tools.
|
|
47
48
|
*/
|
|
48
49
|
exports.ReactFlow = react_1.default.forwardRef((_a, ref) => {
|
|
49
|
-
var { configuration = "unspecified", children } = _a, originalProps = __rest(_a, ["configuration", "children"]);
|
|
50
|
+
var { configuration = "unspecified", scrollOnDrag, children } = _a, originalProps = __rest(_a, ["configuration", "scrollOnDrag", "children"]);
|
|
51
|
+
const scrollOnDragFunctions = (0, scrollOnDragHook_1.useReactFlowScrollOnDrag)({
|
|
52
|
+
reactFlowProps: originalProps,
|
|
53
|
+
scrollOnDrag
|
|
54
|
+
});
|
|
50
55
|
const configReactFlow = {
|
|
51
56
|
unspecified: unspecifiedConfig,
|
|
52
57
|
graph: graphConfig,
|
|
53
58
|
workflow: workflowConfig,
|
|
54
59
|
linking: linkingConfig,
|
|
55
60
|
};
|
|
56
|
-
return (react_1.default.createElement(react_flow_renderer_1.default, Object.assign({ ref: ref, nodeTypes: configReactFlow[configuration].nodeTypes, edgeTypes: configReactFlow[configuration].edgeTypes }, originalProps),
|
|
61
|
+
return (react_1.default.createElement(react_flow_renderer_1.default, Object.assign({ ref: ref, nodeTypes: configReactFlow[configuration].nodeTypes, edgeTypes: configReactFlow[configuration].edgeTypes }, originalProps, scrollOnDragFunctions),
|
|
57
62
|
children,
|
|
58
63
|
react_1.default.createElement(ReactFlowMarkers_1.ReactFlowMarkers, null)));
|
|
59
64
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ReactFlow.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/ReactFlow/ReactFlow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,8EAA2G;AAC3G,
|
|
1
|
+
{"version":3,"file":"ReactFlow.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/ReactFlow/ReactFlow.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,8EAA2G;AAC3G,8FAAyF;AACzF,kFAAoE;AACpE,sEAAwD;AACxD,4EAA8D;AAC9D,0EAA4D;AAC5D,qEAAwE;AAyBxE;;;GAGG;AACU,QAAA,SAAS,GAAG,eAAK,CAAC,UAAU,CAAiC,CACtE,EAKC,EACD,GAAG,EAAE,EAAE;QANP,EACI,aAAa,GAAG,aAAa,EAC7B,YAAY,EACZ,QAAQ,OAEX,EADM,aAAa,cAJpB,6CAKC,CADmB;IAIpB,MAAM,qBAAqB,GAAG,IAAA,2CAAwB,EAAC;QACnD,cAAc,EAAE,aAAa;QAC7B,YAAY;KACf,CAAC,CAAA;IAEF,MAAM,eAAe,GAAG;QACpB,WAAW,EAAE,iBAAiB;QAC9B,KAAK,EAAE,WAAW;QAClB,QAAQ,EAAE,cAAc;QACxB,OAAO,EAAE,aAAa;KACzB,CAAA;IAED,OAAO,CACH,8BAAC,6BAAiB,kBACd,GAAG,EAAE,GAAG,EACR,SAAS,EAAG,eAAe,CAAC,aAAa,CAAC,CAAC,SAAS,EACpD,SAAS,EAAG,eAAe,CAAC,aAAa,CAAC,CAAC,SAAS,IAChD,aAAa,EACb,qBAAqB;QAEvB,QAAQ;QACV,8BAAC,mCAAgB,OAAG,CACJ,CACvB,CAAC;AACN,CAAC,CAAC,CAAA"}
|
|
@@ -8,14 +8,11 @@ const react_1 = __importDefault(require("react"));
|
|
|
8
8
|
const index_1 = require("./../../../index");
|
|
9
9
|
const getColorConfiguration_1 = __importDefault(require("../../../common/utils/getColorConfiguration"));
|
|
10
10
|
const extensions_1 = require("../../../extensions");
|
|
11
|
-
|
|
11
|
+
exports.StickyNoteModal = react_1.default.memo(({ metaData, onClose, onSubmit, translate }) => {
|
|
12
12
|
var _a, _b;
|
|
13
13
|
const refNote = react_1.default.useRef((_a = metaData === null || metaData === void 0 ? void 0 : metaData.note) !== null && _a !== void 0 ? _a : "");
|
|
14
14
|
const [color, setSelectedColor] = react_1.default.useState((_b = metaData === null || metaData === void 0 ? void 0 : metaData.color) !== null && _b !== void 0 ? _b : "");
|
|
15
|
-
const noteColors = Object.entries((0, getColorConfiguration_1.default)("stickynotes")).map(([key, value]) => [
|
|
16
|
-
key,
|
|
17
|
-
value,
|
|
18
|
-
]);
|
|
15
|
+
const noteColors = Object.entries((0, getColorConfiguration_1.default)("stickynotes")).map(([key, value]) => [key, value]);
|
|
19
16
|
react_1.default.useEffect(() => {
|
|
20
17
|
if (!color && noteColors[0][1]) {
|
|
21
18
|
setSelectedColor(noteColors[0][1]);
|
|
@@ -59,6 +56,5 @@ const StickyNoteModal = ({ metaData, onClose, onSubmit, translate }) => {
|
|
|
59
56
|
htmlFor: "colorinput",
|
|
60
57
|
text: translate("colorLabel"),
|
|
61
58
|
} }, predefinedColorsMenu)));
|
|
62
|
-
};
|
|
63
|
-
exports.StickyNoteModal = StickyNoteModal;
|
|
59
|
+
});
|
|
64
60
|
//# sourceMappingURL=StickyNoteModal.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"StickyNoteModal.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,4CAAuF;AACvF,wGAAgF;AAChF,oDAAiD;
|
|
1
|
+
{"version":3,"file":"StickyNoteModal.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/StickyNoteModal/StickyNoteModal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
+
}) : (function(o, m, k, k2) {
|
|
6
|
+
if (k2 === undefined) k2 = k;
|
|
7
|
+
o[k2] = m[k];
|
|
8
|
+
}));
|
|
9
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
10
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
11
|
+
}) : function(o, v) {
|
|
12
|
+
o["default"] = v;
|
|
13
|
+
});
|
|
14
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
15
|
+
if (mod && mod.__esModule) return mod;
|
|
16
|
+
var result = {};
|
|
17
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
18
|
+
__setModuleDefault(result, mod);
|
|
19
|
+
return result;
|
|
20
|
+
};
|
|
21
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
22
|
+
exports.useReactFlowScrollOnDrag = void 0;
|
|
23
|
+
const react_flow_renderer_1 = require("react-flow-renderer");
|
|
24
|
+
const react_1 = __importStar(require("react"));
|
|
25
|
+
/** Handles the scrolling of the react-flow canvas on all drag operations when the mouse pointer gets near or over the borders.
|
|
26
|
+
* The return value contains the wrapped react-flow callback functions that need to be handed over to the react-flow component. */
|
|
27
|
+
const useReactFlowScrollOnDrag = ({ reactFlowProps, scrollOnDrag }) => {
|
|
28
|
+
/** Tracks the zoom on drag to border functionality. */
|
|
29
|
+
const scrollState = react_1.default.useRef({
|
|
30
|
+
reactFlowInstance: undefined,
|
|
31
|
+
currentX: 0,
|
|
32
|
+
currentY: 0,
|
|
33
|
+
currentZoom: 1,
|
|
34
|
+
loggedWarning: false,
|
|
35
|
+
scrollX: false,
|
|
36
|
+
scrollY: false,
|
|
37
|
+
draggingOperationActive: false
|
|
38
|
+
});
|
|
39
|
+
const useStoreStateInternal = () => {
|
|
40
|
+
try {
|
|
41
|
+
return (0, react_flow_renderer_1.useStoreState)((state) => state.transform);
|
|
42
|
+
}
|
|
43
|
+
catch (ex) {
|
|
44
|
+
if (reactFlowProps.id && scrollOnDrag) {
|
|
45
|
+
console.warn("Scroll on drag is not correctly working. Reason: " + ex);
|
|
46
|
+
}
|
|
47
|
+
return [0, 0, 1];
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
/** The current position and zoom factor of the view port. */
|
|
51
|
+
const [currentX, currentY, currentZoom] = useStoreStateInternal();
|
|
52
|
+
scrollState.current.currentX = currentX;
|
|
53
|
+
scrollState.current.currentY = currentY;
|
|
54
|
+
scrollState.current.currentZoom = currentZoom;
|
|
55
|
+
const originalOnLoad = reactFlowProps.onLoad;
|
|
56
|
+
const originalOnNodeDragStart = reactFlowProps.onNodeDragStart;
|
|
57
|
+
const originalOnNodeDragStop = reactFlowProps.onNodeDragStop;
|
|
58
|
+
const originalOnConnectStart = reactFlowProps.onConnectStart;
|
|
59
|
+
const originalOnConnectStop = reactFlowProps.onConnectStop;
|
|
60
|
+
const originalOnSelectionDragStart = reactFlowProps.onSelectionDragStart;
|
|
61
|
+
const originalOnSelectionDragStop = reactFlowProps.onSelectionDragStop;
|
|
62
|
+
const originalOnEdgeUpdateStart = reactFlowProps.onEdgeUpdateStart;
|
|
63
|
+
const originalOnEdgeUpdateEnd = reactFlowProps.onEdgeUpdateEnd;
|
|
64
|
+
const scrollInterval = scrollOnDrag === null || scrollOnDrag === void 0 ? void 0 : scrollOnDrag.scrollInterval;
|
|
65
|
+
const scrollStepSize = scrollOnDrag === null || scrollOnDrag === void 0 ? void 0 : scrollOnDrag.scrollStepSize;
|
|
66
|
+
const reactFlowInstanceId = reactFlowProps.id;
|
|
67
|
+
const clearIntervalIfExists = react_1.default.useCallback(() => {
|
|
68
|
+
if (scrollState.current.scrollTaskId) {
|
|
69
|
+
clearInterval(scrollState.current.scrollTaskId);
|
|
70
|
+
}
|
|
71
|
+
}, []);
|
|
72
|
+
const setScrolling = react_1.default.useCallback((active) => {
|
|
73
|
+
scrollState.current.draggingOperationActive = active;
|
|
74
|
+
if (!active) {
|
|
75
|
+
clearIntervalIfExists();
|
|
76
|
+
}
|
|
77
|
+
}, [clearIntervalIfExists]);
|
|
78
|
+
// Handle scrolling if any operation is active e.g. connecting or dragging a node
|
|
79
|
+
react_1.default.useEffect(() => {
|
|
80
|
+
if (scrollInterval && scrollStepSize && reactFlowInstanceId) {
|
|
81
|
+
const handleScrolling = (event) => {
|
|
82
|
+
const state = scrollState.current;
|
|
83
|
+
if (!state.draggingOperationActive) {
|
|
84
|
+
clearIntervalIfExists();
|
|
85
|
+
return;
|
|
86
|
+
}
|
|
87
|
+
// Check if mouse pointer is outside of the canvas
|
|
88
|
+
const canvasElement = document.getElementById(reactFlowInstanceId);
|
|
89
|
+
if (!canvasElement) {
|
|
90
|
+
if (!state.loggedWarning) {
|
|
91
|
+
console.warn("No element found with ID " + reactFlowInstanceId);
|
|
92
|
+
state.loggedWarning = true;
|
|
93
|
+
}
|
|
94
|
+
return;
|
|
95
|
+
}
|
|
96
|
+
const boundingRect = canvasElement.getBoundingClientRect();
|
|
97
|
+
const xStepSize = boundingRect.width * scrollStepSize;
|
|
98
|
+
const yStepSize = boundingRect.height * scrollStepSize;
|
|
99
|
+
if (boundingRect.top > event.clientY || boundingRect.bottom < event.clientY ||
|
|
100
|
+
boundingRect.left > event.clientX || boundingRect.right < event.clientX) {
|
|
101
|
+
const scrollX = boundingRect.left > event.clientX ?
|
|
102
|
+
xStepSize :
|
|
103
|
+
boundingRect.right < event.clientX ?
|
|
104
|
+
-xStepSize :
|
|
105
|
+
0;
|
|
106
|
+
const scrollY = boundingRect.top > event.clientY ?
|
|
107
|
+
yStepSize :
|
|
108
|
+
boundingRect.bottom < event.clientY ?
|
|
109
|
+
-yStepSize :
|
|
110
|
+
0;
|
|
111
|
+
if (state.scrollY === (scrollY !== 0) && state.scrollX === (scrollX !== 0)) {
|
|
112
|
+
// Nothing has changed, do not change interval function
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
clearIntervalIfExists();
|
|
116
|
+
state.scrollTaskId = setInterval(() => {
|
|
117
|
+
var _a;
|
|
118
|
+
(_a = state.reactFlowInstance) === null || _a === void 0 ? void 0 : _a.setTransform({
|
|
119
|
+
x: state.currentX + scrollX,
|
|
120
|
+
y: state.currentY + scrollY,
|
|
121
|
+
zoom: state.currentZoom
|
|
122
|
+
});
|
|
123
|
+
}, scrollInterval);
|
|
124
|
+
}
|
|
125
|
+
else {
|
|
126
|
+
clearIntervalIfExists();
|
|
127
|
+
}
|
|
128
|
+
};
|
|
129
|
+
const disableScrollingOnMouseUp = () => {
|
|
130
|
+
scrollState.current.draggingOperationActive = false;
|
|
131
|
+
clearIntervalIfExists();
|
|
132
|
+
};
|
|
133
|
+
document.addEventListener('mousemove', handleScrolling);
|
|
134
|
+
document.addEventListener("mouseup", disableScrollingOnMouseUp);
|
|
135
|
+
return () => {
|
|
136
|
+
document.removeEventListener('mousemove', handleScrolling);
|
|
137
|
+
document.removeEventListener("mouseup", disableScrollingOnMouseUp);
|
|
138
|
+
};
|
|
139
|
+
}
|
|
140
|
+
else {
|
|
141
|
+
return undefined;
|
|
142
|
+
}
|
|
143
|
+
}, [scrollInterval, scrollStepSize, reactFlowInstanceId, clearIntervalIfExists]);
|
|
144
|
+
const onLoad = (0, react_1.useCallback)((rfi) => {
|
|
145
|
+
scrollState.current.reactFlowInstance = rfi;
|
|
146
|
+
originalOnLoad === null || originalOnLoad === void 0 ? void 0 : originalOnLoad(rfi);
|
|
147
|
+
}, [originalOnLoad]);
|
|
148
|
+
/** Wrap original callbacks to turn scrolling on and off. */
|
|
149
|
+
const onConnectStart = react_1.default.useCallback((event, params) => {
|
|
150
|
+
setScrolling(true);
|
|
151
|
+
originalOnConnectStart === null || originalOnConnectStart === void 0 ? void 0 : originalOnConnectStart(event, params);
|
|
152
|
+
}, [originalOnConnectStart, setScrolling]);
|
|
153
|
+
const onConnectStop = react_1.default.useCallback((event) => {
|
|
154
|
+
setScrolling(false);
|
|
155
|
+
originalOnConnectStop === null || originalOnConnectStop === void 0 ? void 0 : originalOnConnectStop(event);
|
|
156
|
+
}, [originalOnConnectStop, setScrolling]);
|
|
157
|
+
const onNodeDragStart = react_1.default.useCallback((event, node) => {
|
|
158
|
+
setScrolling(true);
|
|
159
|
+
originalOnNodeDragStart === null || originalOnNodeDragStart === void 0 ? void 0 : originalOnNodeDragStart(event, node);
|
|
160
|
+
}, [originalOnNodeDragStart, setScrolling]);
|
|
161
|
+
const onNodeDragStop = react_1.default.useCallback((event, node) => {
|
|
162
|
+
setScrolling(false);
|
|
163
|
+
originalOnNodeDragStop === null || originalOnNodeDragStop === void 0 ? void 0 : originalOnNodeDragStop(event, node);
|
|
164
|
+
}, [originalOnNodeDragStop, setScrolling]);
|
|
165
|
+
const onSelectionDragStart = react_1.default.useCallback((event, nodes) => {
|
|
166
|
+
setScrolling(true);
|
|
167
|
+
originalOnSelectionDragStart === null || originalOnSelectionDragStart === void 0 ? void 0 : originalOnSelectionDragStart(event, nodes);
|
|
168
|
+
}, [originalOnSelectionDragStart, setScrolling]);
|
|
169
|
+
const onSelectionDragStop = react_1.default.useCallback((event, nodes) => {
|
|
170
|
+
setScrolling(false);
|
|
171
|
+
originalOnSelectionDragStop === null || originalOnSelectionDragStop === void 0 ? void 0 : originalOnSelectionDragStop(event, nodes);
|
|
172
|
+
}, [originalOnSelectionDragStop, setScrolling]);
|
|
173
|
+
const onEdgeUpdateStart = react_1.default.useCallback((event, edge) => {
|
|
174
|
+
setScrolling(true);
|
|
175
|
+
originalOnEdgeUpdateStart === null || originalOnEdgeUpdateStart === void 0 ? void 0 : originalOnEdgeUpdateStart(event, edge);
|
|
176
|
+
}, [originalOnEdgeUpdateStart, setScrolling]);
|
|
177
|
+
const onEdgeUpdateEnd = react_1.default.useCallback((event, edge) => {
|
|
178
|
+
setScrolling(false);
|
|
179
|
+
originalOnEdgeUpdateEnd === null || originalOnEdgeUpdateEnd === void 0 ? void 0 : originalOnEdgeUpdateEnd(event, edge);
|
|
180
|
+
}, [originalOnEdgeUpdateEnd, setScrolling]);
|
|
181
|
+
if (!reactFlowProps.id || !scrollOnDrag) {
|
|
182
|
+
// No instance ID or config available, return empty object that will not overwrite any react-flow config parameters
|
|
183
|
+
return {};
|
|
184
|
+
}
|
|
185
|
+
else {
|
|
186
|
+
return {
|
|
187
|
+
onLoad,
|
|
188
|
+
onNodeDragStart,
|
|
189
|
+
onNodeDragStop,
|
|
190
|
+
onConnectStart,
|
|
191
|
+
onConnectStop,
|
|
192
|
+
onSelectionDragStart,
|
|
193
|
+
onSelectionDragStop,
|
|
194
|
+
onEdgeUpdateStart,
|
|
195
|
+
onEdgeUpdateEnd
|
|
196
|
+
};
|
|
197
|
+
}
|
|
198
|
+
};
|
|
199
|
+
exports.useReactFlowScrollOnDrag = useReactFlowScrollOnDrag;
|
|
200
|
+
//# sourceMappingURL=scrollOnDragHook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"scrollOnDragHook.js","sourceRoot":"","sources":["../../../../../src/cmem/react-flow/extensions/scrollOnDragHook.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.ClassNames = exports.Definitions = void 0;
|
|
3
|
+
exports.ClassNames = exports.intentClassName = exports.Definitions = void 0;
|
|
4
4
|
const constants_1 = require("../../configuration/constants");
|
|
5
5
|
exports.Definitions = {
|
|
6
6
|
PRIMARY: "primary",
|
|
@@ -11,10 +11,14 @@ exports.Definitions = {
|
|
|
11
11
|
WARNING: "warning",
|
|
12
12
|
DANGER: "danger",
|
|
13
13
|
};
|
|
14
|
+
const intentClassName = (intent) => {
|
|
15
|
+
return `${constants_1.CLASSPREFIX}-intent--${intent}`;
|
|
16
|
+
};
|
|
17
|
+
exports.intentClassName = intentClassName;
|
|
14
18
|
const classNamesCreation = () => {
|
|
15
|
-
const intentClasses =
|
|
19
|
+
const intentClasses = {};
|
|
16
20
|
for (let intentDefinition in exports.Definitions) {
|
|
17
|
-
intentClasses[intentDefinition] =
|
|
21
|
+
intentClasses[intentDefinition] = (0, exports.intentClassName)(exports.Definitions[intentDefinition]);
|
|
18
22
|
}
|
|
19
23
|
return intentClasses;
|
|
20
24
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/Intent/index.ts"],"names":[],"mappings":";;;AAAA,6DAAsE;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/common/Intent/index.ts"],"names":[],"mappings":";;;AAAA,6DAAsE;AAIzD,QAAA,WAAW,GAAoC;IACxD,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,IAAI,EAAE,MAAM;IACZ,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACnB,CAAA;AAEM,MAAM,eAAe,GAAG,CAAC,MAAmB,EAAE,EAAE;IACnD,OAAO,GAAG,uBAAM,YAAY,MAAM,EAAE,CAAA;AACxC,CAAC,CAAA;AAFY,QAAA,eAAe,mBAE3B;AAED,MAAM,kBAAkB,GAAG,GAAG,EAAE;IAC5B,MAAM,aAAa,GAAgC,EAAE,CAAC;IACtD,KAAK,IAAI,gBAAgB,IAAI,mBAAW,EAAE;QACtC,aAAa,CAAC,gBAAgB,CAAC,GAAG,IAAA,uBAAe,EAAC,mBAAW,CAAC,gBAAgB,CAAC,CAAC,CAAC;KACpF;IACD,OAAO,aAAa,CAAC;AACzB,CAAC,CAAA;AAEY,QAAA,UAAU,GAAG,kBAAkB,EAAE,CAAC"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
/** Zero width invisible characters, i.e. they do not change the space between 2 other characters. */
|
|
4
|
+
const internalInvisibleZeroWidthCharacterCodePoints = [
|
|
5
|
+
{ codePoint: 11, label: "Vertical Tabulation" },
|
|
6
|
+
{ codePoint: 173, label: "Soft hyphen" },
|
|
7
|
+
{ codePoint: 847, label: "Combining grapheme joiner" },
|
|
8
|
+
{ codePoint: 1564, label: "Arabic letter mark" },
|
|
9
|
+
{ codePoint: [6068, 6069], label: "Khmer vowel inherent" },
|
|
10
|
+
{ codePoint: [6155, 6158], label: "Mongolian special characters" },
|
|
11
|
+
{ codePoint: 8203, label: "Zero Width Space" },
|
|
12
|
+
{ codePoint: 8204, label: "Zero Width Non-Joiner" },
|
|
13
|
+
{ codePoint: 8205, label: "Zero Width Joiner" },
|
|
14
|
+
{ codePoint: 8206, label: "Left-To-Right Mark" },
|
|
15
|
+
{ codePoint: 8207, label: "Right-To-Left Mark" },
|
|
16
|
+
{ codePoint: [8234, 8238], label: "zero width character" },
|
|
17
|
+
// Word joiner - Nominal Digit Shapes
|
|
18
|
+
{ codePoint: [8288, 8303], label: "zero width character" },
|
|
19
|
+
{ codePoint: [65024, 65039], label: "Variation selectors" },
|
|
20
|
+
{ codePoint: 65279, label: "Zero Width No-Break Space" },
|
|
21
|
+
{ codePoint: [65520, 65528], label: "Specials" },
|
|
22
|
+
{ codePoint: 65532, label: "Object Replacement Character" },
|
|
23
|
+
{ codePoint: [119155, 119162], label: "Invisible Musical Symbol" },
|
|
24
|
+
{ codePoint: [917504, 917631], label: "Tags" },
|
|
25
|
+
{ codePoint: [917760, 917999], label: "Variation Selectors" }
|
|
26
|
+
];
|
|
27
|
+
const toHex = (codepoint) => codepoint.toString(16).toUpperCase();
|
|
28
|
+
const padWithZeroes = (hexString) => {
|
|
29
|
+
if (hexString.length % 2 === 1) {
|
|
30
|
+
return `0${hexString}`;
|
|
31
|
+
}
|
|
32
|
+
return hexString;
|
|
33
|
+
};
|
|
34
|
+
/** All characters that are considered invisible zero-width characters that e.g. need to be handled in input fields. */
|
|
35
|
+
const invisibleZeroWidthCharacterCodePoints = internalInvisibleZeroWidthCharacterCodePoints.map(cp => {
|
|
36
|
+
const create = (codePoint, label) => {
|
|
37
|
+
const hexString = toHex(codePoint);
|
|
38
|
+
const unicodeHexRepresentation = `U+${padWithZeroes(hexString)}`;
|
|
39
|
+
return {
|
|
40
|
+
codePoint: codePoint,
|
|
41
|
+
label: label !== null && label !== void 0 ? label : unicodeHexRepresentation,
|
|
42
|
+
hexString,
|
|
43
|
+
fullLabel: label ? `${label} (${unicodeHexRepresentation})` : unicodeHexRepresentation
|
|
44
|
+
};
|
|
45
|
+
};
|
|
46
|
+
if (Array.isArray(cp.codePoint)) {
|
|
47
|
+
const codePoints = [];
|
|
48
|
+
const [from, to] = cp.codePoint;
|
|
49
|
+
if (from < 0 || to < 0 || from > to) {
|
|
50
|
+
throw new Error(`Invalid code point range specified: [${from}, ${to}]`);
|
|
51
|
+
}
|
|
52
|
+
for (let currentCp = from; currentCp <= to; currentCp++) {
|
|
53
|
+
codePoints.push(create(currentCp, cp.label));
|
|
54
|
+
}
|
|
55
|
+
return codePoints;
|
|
56
|
+
}
|
|
57
|
+
else {
|
|
58
|
+
return create(cp.codePoint, cp.label);
|
|
59
|
+
}
|
|
60
|
+
}).flat();
|
|
61
|
+
const createInvisibleZeroWidthCharacterCodePointsRegex = () => {
|
|
62
|
+
return new RegExp(`([${invisibleZeroWidthCharacterCodePoints
|
|
63
|
+
.map(cp => `\\u{${cp.hexString}}`)
|
|
64
|
+
.join("")}])`, "ug");
|
|
65
|
+
};
|
|
66
|
+
/** Map from codepoint to invisible character. */
|
|
67
|
+
const invisibleZeroWidthCharacterCodePointsMap = new Map(invisibleZeroWidthCharacterCodePoints.map(cp => [cp.codePoint, cp]));
|
|
68
|
+
const clearStringFromInvisibleCharacters = (inputString) => {
|
|
69
|
+
const regex = createInvisibleZeroWidthCharacterCodePointsRegex();
|
|
70
|
+
return inputString.replaceAll(regex, "");
|
|
71
|
+
};
|
|
72
|
+
const invisibleZeroWidthCharacters = {
|
|
73
|
+
codePoints: invisibleZeroWidthCharacterCodePoints,
|
|
74
|
+
codePointMap: invisibleZeroWidthCharacterCodePointsMap,
|
|
75
|
+
createRegex: createInvisibleZeroWidthCharacterCodePointsRegex,
|
|
76
|
+
clearString: clearStringFromInvisibleCharacters
|
|
77
|
+
};
|
|
78
|
+
const moduleObject = {
|
|
79
|
+
invisibleZeroWidthCharacters
|
|
80
|
+
};
|
|
81
|
+
exports.default = moduleObject;
|
|
82
|
+
//# sourceMappingURL=characters.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"characters.js","sourceRoot":"","sources":["../../../../src/common/utils/characters.ts"],"names":[],"mappings":"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"}
|
|
@@ -20,14 +20,14 @@ const constants_1 = require("../../configuration/constants");
|
|
|
20
20
|
function ApplicationTitle(_a) {
|
|
21
21
|
var { children, className = "", prefix = "", href, depiction, isNotDisplayed = false, isAlignedWithSidebar = false, isApplicationSidebarExpanded, htmlAProps } = _a, otherPropsShouldOnlyBeUsedForDataAttributes = __rest(_a, ["children", "className", "prefix", "href", "depiction", "isNotDisplayed", "isAlignedWithSidebar", "isApplicationSidebarExpanded", "htmlAProps"]);
|
|
22
22
|
const classApplication = `${constants_1.CLASSPREFIX}-application__title`;
|
|
23
|
-
const classNotDisplayed = isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined") ? "
|
|
23
|
+
const classNotDisplayed = isNotDisplayed || (!isApplicationSidebarExpanded && typeof isNotDisplayed === "undefined") ? "cds--visually-hidden" : "";
|
|
24
24
|
const classAlignedSidebar = isAlignedWithSidebar || isApplicationSidebarExpanded ? `${constants_1.CLASSPREFIX}-application__title--withsidebar` : "";
|
|
25
25
|
return (react_1.default.createElement(carbon_components_react_1.HeaderName, Object.assign({}, otherPropsShouldOnlyBeUsedForDataAttributes, htmlAProps, { className: `${classApplication} ${classAlignedSidebar} ${classNotDisplayed} ${className}`, href: href, prefix: "" }),
|
|
26
26
|
react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-application__title--content` },
|
|
27
27
|
!!depiction && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
28
28
|
react_1.default.createElement("span", { className: `${constants_1.CLASSPREFIX}-application__title--depiction` }, depiction))),
|
|
29
29
|
!!prefix && (react_1.default.createElement(react_1.default.Fragment, null,
|
|
30
|
-
react_1.default.createElement("span", { className: "
|
|
30
|
+
react_1.default.createElement("span", { className: "cds--header__name--prefix" }, prefix),
|
|
31
31
|
"\u00A0")),
|
|
32
32
|
children)));
|
|
33
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApplicationTitle.js","sourceRoot":"","sources":["../../../../src/components/Application/ApplicationTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,qEAAyE;AACzE,6DAAsE;AA4CtE,SAAS,gBAAgB,CAAC,EAWD;QAXC,EACtB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,EAAE,EACX,IAAI,EACJ,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,oBAAoB,GAAC,KAAK,EAC1B,4BAA4B,EAC5B,UAAU,OAEW,EADlB,2CAA2C,cAVxB,gJAWzB,CADiD;IAG9C,MAAM,gBAAgB,GAAG,GAAG,uBAAM,qBAAqB,CAAC;IACxD,MAAM,iBAAiB,GAAG,cAAc,IAAI,CAAC,CAAC,4BAA4B,IAAI,OAAO,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"ApplicationTitle.js","sourceRoot":"","sources":["../../../../src/components/Application/ApplicationTitle.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,kDAA0B;AAC1B,qEAAyE;AACzE,6DAAsE;AA4CtE,SAAS,gBAAgB,CAAC,EAWD;QAXC,EACtB,QAAQ,EACR,SAAS,GAAG,EAAE,EACd,MAAM,GAAG,EAAE,EACX,IAAI,EACJ,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,oBAAoB,GAAC,KAAK,EAC1B,4BAA4B,EAC5B,UAAU,OAEW,EADlB,2CAA2C,cAVxB,gJAWzB,CADiD;IAG9C,MAAM,gBAAgB,GAAG,GAAG,uBAAM,qBAAqB,CAAC;IACxD,MAAM,iBAAiB,GAAG,cAAc,IAAI,CAAC,CAAC,4BAA4B,IAAI,OAAO,cAAc,KAAK,WAAW,CAAC,CAAC,CAAC,CAAC,sBAAsB,CAAC,CAAC,CAAC,EAAE,CAAC;IACnJ,MAAM,mBAAmB,GAAG,oBAAoB,IAAI,4BAA4B,CAAC,CAAC,CAAC,GAAG,uBAAM,kCAAkC,CAAC,CAAC,CAAC,EAAE,CAAC;IAEpI,OAAO,CACH,8BAAC,oCAAgB,oBACT,2CAA2C,EAC3C,UAAU,IACd,SAAS,EAAE,GAAG,gBAAgB,IAAI,mBAAmB,IAAI,iBAAiB,IAAI,SAAS,EAAE,EACzF,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,EAAE;QAET,wCAAM,SAAS,EAAE,GAAG,uBAAM,8BAA8B;YACnD,CAAC,CAAC,SAAS,IAAI,CACR;gBACI,wCAAM,SAAS,EAAE,GAAG,uBAAM,gCAAgC,IAAG,SAAS,CAAQ,CAC/E,CACV;YACA,CAAC,CAAC,MAAM,IAAI,CACL;gBACI,wCAAM,SAAS,EAAC,2BAA2B,IAAE,MAAM,CAAQ;yBAE5D,CACV;YACC,QAAQ,CACP,CACQ,CACtB,CAAA;AACL,CAAC;AAED,kBAAe,gBAAgB,CAAC"}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
+
var t = {};
|
|
4
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
+
t[p] = s[p];
|
|
6
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
+
t[p[i]] = s[p[i]];
|
|
10
|
+
}
|
|
11
|
+
return t;
|
|
12
|
+
};
|
|
13
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
exports.Badge = void 0;
|
|
18
|
+
const react_1 = __importDefault(require("react"));
|
|
19
|
+
const Tag_1 = __importDefault(require("../Tag/Tag"));
|
|
20
|
+
const constants_1 = require("../../configuration/constants");
|
|
21
|
+
/**
|
|
22
|
+
* Display a badge element to add more context to another element.
|
|
23
|
+
* It can display icons, text and numbers.
|
|
24
|
+
*/
|
|
25
|
+
function Badge(_a) {
|
|
26
|
+
var { children, className = "", position = "inline", size = "medium", maxLength, intent, tagProps } = _a, spanProps = __rest(_a, ["children", "className", "position", "size", "maxLength", "intent", "tagProps"]);
|
|
27
|
+
let badgeContent = children;
|
|
28
|
+
// shorten number values
|
|
29
|
+
// for maxLength=3 display 99+ instead of 1023.
|
|
30
|
+
if (typeof children === "number" &&
|
|
31
|
+
maxLength &&
|
|
32
|
+
maxLength > 1 &&
|
|
33
|
+
children >= Math.pow(10, maxLength - 1)) {
|
|
34
|
+
badgeContent = `${Math.pow(10, maxLength - 1) - 1}+`;
|
|
35
|
+
}
|
|
36
|
+
if (typeof children === "object") {
|
|
37
|
+
badgeContent = "";
|
|
38
|
+
}
|
|
39
|
+
return (react_1.default.createElement("span", Object.assign({ className: `${constants_1.CLASSPREFIX}-badge ${constants_1.CLASSPREFIX}-badge--${position}` +
|
|
40
|
+
(typeof children === "object" ? ` ${constants_1.CLASSPREFIX}-badge--icon` : '') }, spanProps),
|
|
41
|
+
react_1.default.createElement(Tag_1.default, Object.assign({ className: `${constants_1.CLASSPREFIX}-badge__tag`, round: true, small: size === "small", large: size === "large", emphasis: !intent ? "stronger" : undefined, intent: intent, minimal: !!intent ? false : true, icon: typeof children === "object" ? children : undefined, style: (typeof children === "string" && maxLength && maxLength > 1) ? { maxWidth: `calc((${maxLength - 1}em + ${maxLength - 1}ch)/2)` } : {} }, tagProps), badgeContent)));
|
|
42
|
+
}
|
|
43
|
+
exports.Badge = Badge;
|
|
44
|
+
//# sourceMappingURL=Badge.js.map
|