diff --git a/.github/workflows/create-release-branch.yml b/.github/workflows/create-release-branch.yml
index 6ec7909d9..3f6ed9b4d 100644
--- a/.github/workflows/create-release-branch.yml
+++ b/.github/workflows/create-release-branch.yml
@@ -22,7 +22,7 @@ jobs:
- uses: actions/checkout@main
- uses: actions/setup-node@main
with:
- node-version: "18"
+ node-version: "lts/krypton"
- name: Check and save dispatched branch
id: dispatched-branch
run: |
diff --git a/.github/workflows/deployment-storybook.yml b/.github/workflows/deployment-storybook.yml
index c94a35109..023edf66b 100644
--- a/.github/workflows/deployment-storybook.yml
+++ b/.github/workflows/deployment-storybook.yml
@@ -5,7 +5,9 @@ on:
paths:
- "src/**"
- ".storybook/**"
+ - ".github/workflows/deployment-storybook.yml"
- "index.ts"
+ - package.json
- yarn.lock
push:
branches:
@@ -13,7 +15,9 @@ on:
paths:
- "src/**"
- ".storybook/**"
+ - ".github/workflows/deployment-storybook.yml"
- "index.ts"
+ - package.json
- yarn.lock
jobs:
@@ -24,15 +28,22 @@ jobs:
- uses: actions/checkout@main
with:
fetch-depth: 0
+ - name: Workflow git state
+ run: |
+ echo github.ref: ${{ github.ref }}
+ echo github.event_name: ${{ github.event_name }}
+ echo github.actor: ${{ github.actor }}
+ git status
+ git log --oneline -1
- uses: actions/setup-node@main
with:
- node-version: "18"
+ node-version: "lts/krypton"
- name: Install dependencies
run: yarn install
- name: Create jest results
run: yarn test:generate-output
- name: Publish to Chromatic
- uses: chromaui/action@v11
+ uses: chromaui/action@main
with:
token: ${{ secrets.GITHUB_TOKEN }}
projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
diff --git a/.github/workflows/publish-featurefix-prerelease.yml b/.github/workflows/publish-featurefix-prerelease.yml
index f5cbc4e75..5a4ef21a9 100644
--- a/.github/workflows/publish-featurefix-prerelease.yml
+++ b/.github/workflows/publish-featurefix-prerelease.yml
@@ -42,7 +42,7 @@ jobs:
git config user.email "${{ github.actor }}@users.noreply.github.com"
- uses: actions/setup-node@main
with:
- node-version: "18"
+ node-version: "lts/krypton"
- name: Create pre-release version number
run: |
preid=$(echo ${{ steps.branch-name.outputs.current_branch }} | tr '[:upper:]' '[:lower:]' | sed 's=[^[:alnum:][:space:]"]==g')
diff --git a/.github/workflows/publish-final-release.yml b/.github/workflows/publish-final-release.yml
index 979a78f71..3b4e7e4f6 100644
--- a/.github/workflows/publish-final-release.yml
+++ b/.github/workflows/publish-final-release.yml
@@ -43,7 +43,7 @@ jobs:
git config user.email "${{ github.actor }}@users.noreply.github.com"
- uses: actions/setup-node@main
with:
- node-version: "18"
+ node-version: "lts/krypton"
- name: Get version
id: package-version
run: echo "version=$(node -p -e "require('./package.json').version.split('-').shift()")" >> $GITHUB_OUTPUT
diff --git a/.github/workflows/publish-release-candidate.yml b/.github/workflows/publish-release-candidate.yml
index 0b6c45061..fc0886093 100644
--- a/.github/workflows/publish-release-candidate.yml
+++ b/.github/workflows/publish-release-candidate.yml
@@ -39,7 +39,7 @@ jobs:
git config user.email "${{ github.actor }}@users.noreply.github.com"
- uses: actions/setup-node@main
with:
- node-version: "18"
+ node-version: "lts/krypton"
- name: Create release candidate version number
run: |
preid="rc"
diff --git a/.github/workflows/push-tagged-release.yml b/.github/workflows/push-tagged-release.yml
index 81902bc97..dace7bba3 100644
--- a/.github/workflows/push-tagged-release.yml
+++ b/.github/workflows/push-tagged-release.yml
@@ -36,7 +36,7 @@ jobs:
ref: ${{ inputs.ref }}
- uses: actions/setup-node@main
with:
- node-version: "18"
+ node-version: "lts/krypton"
registry-url: "https://registry.npmjs.org"
- name: Set name vars
id: info-vars
diff --git a/.github/workflows/test-code.yml b/.github/workflows/test-code.yml
index 54096dd4a..330040345 100644
--- a/.github/workflows/test-code.yml
+++ b/.github/workflows/test-code.yml
@@ -3,6 +3,7 @@ name: "🧪 Test: code"
on:
pull_request:
paths:
+ - ".github/workflows/test-code.yml"
- "src/**.js"
- "src/**.ts"
- "src/**.tsx"
@@ -19,7 +20,7 @@ jobs:
- name: Test using Node.js
uses: actions/setup-node@main
with:
- node-version: "18"
+ node-version: "lts/krypton"
- run: yarn install
- run: yarn compile
- run: yarn compile-scss
diff --git a/.storybook/main.js b/.storybook/main.js
index 48794d304..fb5986c91 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -64,7 +64,12 @@ module.exports = {
},
webpackFinal: async (config, { configType }) => {
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
-
+ if (configType === "PRODUCTION") {
+ // remove source maps from production storybook
+ // this may lead to errors when it is created via github workers
+ // reason is currently not known
+ config.devtool = false;
+ }
config.module.rules = [
{
test: /\.(png|jpg|gif|svg)(\\?.*)?$/,
diff --git a/.storybook/preview.js b/.storybook/preview.js
index fc432f30d..fd350e4b1 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -19,7 +19,14 @@ export const decorators = [
];
export const parameters = {
- actions: { argTypesRegex: "^on[A-Z].*" },
+ options: {
+ storySort: {
+ order: ["Configuration", "Components", "Forms", "Extensions", "CMEM", "*"],
+ },
+ },
+ actions: {
+ argTypesRegex: "^on[A-Z].*",
+ },
controls: {
matchers: {
color: /(background|color)$/i,
diff --git a/.typescript/tsbuild-esm.json b/.typescript/tsbuild-esm.json
index aa4118fed..fe99631ff 100644
--- a/.typescript/tsbuild-esm.json
+++ b/.typescript/tsbuild-esm.json
@@ -1,7 +1,7 @@
{
"extends": "./../tsconfig.json",
"compilerOptions": {
- "lib": ["dom", "dom.iterable", "es2015", "es2020", "es2021", "es2015.collection", "es2015.iterable"],
+ "lib": ["dom", "dom.iterable", "es2015", "es2020", "es2021", "es2022.intl", "es2015.collection", "es2015.iterable"],
"module": "es2015",
"target": "es5",
"noEmit": false,
diff --git a/CHANGELOG.md b/CHANGELOG.md
index d2d0c5c43..669ae0eca 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,239 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
## [Unreleased]
+### Added
+
+- ``
+ - Add parameter `active` to activity control action to set the `active` state of its button.
+ - action now can have a `active` and `notification` property
+- ``
+ - component for hiding elements in specific media
+- ``
+ - force children to get displayed as inline content
+- ``
+ - similar to `ContextOverlay` component but not directly linked to a React element, it specifies the target in the DOM to get connected lazy
+- ``
+ - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+- ``
+ - `paddingSize` property to add easily some white space
+- ``
+ - toolbar in `markdown` mode provides a user config menu for the editor appearance
+- ``
+ - `hideIndicator` property: hide the radio inout indicator but click on children can be processed via `onChange` event
+- ``
+ - input component for colors
+ - uses a subset from the configured color palette by default, but it also allows to enter custom colors
+- ``
+ - `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item
+- ``
+ - inline `code` uses same gray background highlighting like code blocks
+- CSS custom properties
+ - beside the color palette we now mirror the most important layout configuration variables as CSS custom properties
+- new icons:
+ - `state-confirmed-all`
+ - `state-declined-all`
+ - `data-sourceschema`
+ - `data-targetschema`
+ - `operation-ai-generate`
+ - `operation-filterreset`
+ - `toggler-pin-empty`
+ - `toggler-pin-filled`
+
+### Fixed
+
+- ``
+ - create more whitespace inside `small` tag
+ - reduce visual impact of border
+- ``
+ - take Markdown rendering into account before testing the maximum preview length
+- ``
+ - fix `disabled` property update
+- ``
+ - fix color of buttons to move to previous/next step
+ - take Markdown rendering into account before testing the maximum preview length
+- ``
+ - header-menu items are vertically centered now
+- ``
+ - stabilize font size for on hover state
+ - use correct font sizes when `size` property is set
+- `Typography`
+ - adjust displaying fallback symbols in different browsers
+- ``
+ - use the latest provided `onChange` function
+- ``, ``
+ - fix emoji false-positives in invisible character detection
+- ``
+ - `onSelection` now sets `newlySelected` only for add actions and no longer sets it to the last element
+ - border of the BlueprintJS `Tag` elements were fixed
+- ``
+ - fix specificity for pointer-events rules on SVG
+- ``
+ - badge is correctly displayed when `badge={0}`
+- Focus outlines
+ - we use again bold focus outlines for input elements
+ - they are also used for clickable elements that are focused via keyboard (tab navigation)
+
+### Changed
+
+- ``:
+ - Change default filter predicate to match multi-word queries.
+- ``
+ - reduce stroke width to only 1px
+- ``
+ - `wrapLines` and `preventLineNumber` do not use `false` default value but if not set then it will be interpreted as `false`
+ - in this way it can be overwritten by new user config for the markdown mode
+- automatically hide user interaction elements in print view
+ - all application header components except ``
+ - `` and ``
+ - `actionOptions` of ``
+ - `actions` of ``
+ - ``
+- automatically serialize display of layout elements in print view
+ - ``
+ - ``
+ - `` and ``
+
+### Deprecated
+
+- ``
+ - `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
+
+## [25.0.0] - 2025-12-01
+
+This is a major release, and it might be not compatible with your current usage of our library. Please read about the necessary changes in the section about how to migrate.
+
+### Migration from v24 to v25
+
+- remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the past changelogs
+- in case you set your own colors before importing GUI elements you need to update your configuration to the new color palette structure, see `README.md`
+- change `intent="primary"` to `intent="accent"` for ``, `` and ``, if supported you may check if it is better to use `affirmative={true}` or `elevated={true}` instead of `intent`
+
+### Added
+
+- ``
+ - displays single chat contents in a bubble, including options to add status line and avatar
+- ``
+ - can collapse (and expand) `` automatically for convenience
+- ``
+ - let the user input texts, calls `onSubmit` handler on enter key and submit button
+- ``
+ - combine a list of chat contents and user input box
+- ``
+ - reduces HTML to simple text and can display it as one ellipsed line
+- ``
+ - prove useage of `usePlaceholder` by jest test coverage
+- ``
+ - it's basically `` without any special configs
+- ``
+ - only supported for v12, in v9 as straight edge is used
+ - use `curvature` property in the edge `data` object to define the bezier layout (0..1, default: 0.25)
+- ``
+ - the `data` object provides `markerAppearance` to set and remove the edge arrows
+- ``
+ - introduced the new `arrowDirection` property, including support for bidirectional edges - supported only for ``
+- ``
+ - component for React Flow v12, displaying new connection lines
+- ``
+ - component to display a visual tour multi-step tour of the current view
+- ``
+ - `accent` value for `intent` was added to align property with other components
+- ``
+ - `accent` value for `intent` was added to align property with other components
+ - `elevated` property can be used to highlight the spinner, currently the `intent="accent"` display is used
+- ``:
+ - Add `ModalContext` to track open/close state of all used application modals.
+ - Add `modalId` property to give a modal a unique ID for tracking purposes.
+ - `preventReactFlowEvents`: adds 'nopan', 'nowheel' and 'nodrag' classes to overlay classes in order to prevent react-flow to react to drag and pan actions in modals.
+ - new `utils` methods
+ - `colorCalculateDistance()`: calculates the difference between 2 colors using the simple CIE76 formula
+ - `textToColorHash()`: calculates a color from a text string
+ - `reduceToText`: shrinks HTML content and React elements to plain text, used for ``
+ - `decodeHtmlEntities`: decode a string of HTML text, map HTML entities back to UTF-8 chars
+- SCSS color functions
+ - `eccgui-color-var`: returns a var of a custom property used for palette color
+ - `eccgui-color-mix`: mix 2 colors in `srgb`, works with all types of color values and CSS custom properties
+ - `eccgui-color-rgba`: like `rgba()` but it works also for CSS custom properties
+- Color palette: includes 4 sections with 20+ color tints in 5 weights each
+ - indentity, semantic, layout, extra
+ - managed via CSS custom properties
+ - see `README.md` for more information about usage
+- New icons
+ - `artefact-task-sqlupdatequeryoperator`
+ - `artefact-task-customsqlexecution`
+ - `item-legend`
+ - `operation-tour`
+ - `toggler-carettop`
+ - `toggler-caretleft`
+ - `toggler-micon`
+ - `toggler-micoff`
+ - `toggler-radio`
+ - `toggler-radio-checked`
+ - `state-flagged`
+ - `state-progress`
+ - `state-progress-error`
+ - `state-progress-warning`
+ - more icons for build tasks
+
+### Removed
+
+- support for React Flow v10 was completely removed
+- removed direct replacements for legacy components (imported via `@eccenca/gui-elements/src/legacy-replacements` or `LegacyReplacements`)
+ - ``, ``, ``, ``, ``, ``, ``, ``
+- ``, ``, ``, ``
+ - removed support for old state properties `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger`
+- ``
+ - removed support for old state properties `neutral`, `success`, `warning` and `danger`
+- ``
+ - removed `description` and `iconTitle` properties
+- ``
+ - `densityHigh` property was removed
+- ``
+ - static fallback for test id `codemirror-wrapper` was removed, add `data-test-id` (or your test id data attribute) always directly to `CodeEditor`.
+- ``
+ - removed `inversePath` property, can be replaced with `arrowDirection: "inversed"` property
+- ``
+ - `description` property was removed because it was defined but not implemented for a very long time, but we plan to add that type of caption later
+- `nodeTypes` and `edgeTypes` exports were removed
+ - use `` with `configuration`, or define it yourself
+- SCSS variables `$eccgui-color-application-text` and `$eccgui-color-application-background` were removed
+ - use `$eccgui-color-workspace-text` and `$eccgui-color-workspace-background`
+- Removed `remark-typograf` plugin from `` rendering to maintain display expectation
+
+### Fixed
+
+- ``:
+ - In multiline mode, validation errors might be highlighted incorrectly (relative line offset added).
+
+### Changed
+
+- `` and ``
+ - support now v9 and v12 of react flow
+- ``
+ - use `` by default for new connection lines, you can overwrite it by setting `connectionLineComponent` to `undefined`
+- ``
+ - `color` property does not accept `intent` values anymore
+- ``
+ - beside explicitly specified properties it allows only basic HTML element properties and testing IDs
+- overrite the native SCSS `rgba()` function, so it now works for SCSS color values and CSS custom properties
+- ``
+ - Always add class 'nodrag' to popover content element to always prevent dragging of react-flow and dnd-kit elements when interacting with the component.
+- `utils.getColorConfiguration()` works with CSS custom properties
+- property names returned by `getColorConfiguration` were changed to kebab case because they are originally defined via CSS custom properties
+ - e.g. `graphNode` is now `eccgui-graph-node` and `graphNodeBright` is `eccgui-graph-node-bright`
+- `` and ``
+ - `intent` display was aligned with other components, `intent="primary"` is now `intent="accent"`, in most cases it may be better to use `affirmative={true}` or `elevated={true}` instead of primary/accent intent
+- ``
+ - `intent` display was aligned with other components, `intent="primary"` is now `intent="accent"`, in most cases it may be better to use `elevated={true}` instead of using intent
+- icons: arrow directions for `list-sortasc` and `list-sortdesc` were switched, up arrow is now used for ascending sort
+
+### Deprecated
+
+- support for React Flow v9 will be removed in v26
+- ``
+ - use `` or build it on single ``
+
+## [24.4.1] - 2025-08-25
+
### Fixed
- React flow v12:
@@ -13,7 +246,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
- ``
- re-check hover state after swapping the placeholder before triggering the event bubbling
-## Changed
+### Changed
- ``
- increase the default delay before swapping the tooltip placeholder of the icon, reducing unwanted swaps because of mouseovers that were not intended
@@ -112,6 +345,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
### Changed
+- `eslint` libraries were upgraded to v9, so `node` v18.18 or higher is required
+- react flow integration by renaming their resources from `legacy` and `next` to more precise `v9` and `v10`:
+ - `HandleProps`: renamed to `HandleV9Props`
+ - `HandleNextProps`: renamed to `HandleV10Props`
+ - if provided then the `flowVersion` property do not accept `legacy` and `next` as values anymore, use `v9` and `v10`
- some more interfaces are exposed:
- `IntentBlueprint`: BlueprintJS intent types, also available by `DefinitionsBlueprint`
- `TableDataContainerProps`, `TableSimpleContainerProps`, `TableHeadProps`, `TableBodyProps`, `TableExpandedRowProps`, `TableHeaderProps` and `DataTableRenderProps` as interfaces for diverse table components
@@ -134,6 +372,18 @@ Old bundlers like webpack4 do not support the `exports` field from `package.json
If you use Jest then you can use the same aliases for the `moduleNameMapper` config, if necessary.
+### Deprecated
+
+- `HandleV9Props` and `HandleV10Props` export will be removed, use only `HandleDefaultProps`
+- ``
+ - `businessDate`: will be removed because it is already not used
+- ``: use ``
+
+### Migration from v24 to v25
+
+- remove deprecated components, properties and imports from your project, if the info cannot be found here then it was already mentioned in **Deprecated** sections of the v24.\* changelogs.
+ - we changed the integration of the supported react flow versions, formerly names `legacy` and `next` resources were renamed to more precise `v9` and `v10`, please see all info in the section about changes
+
## [24.1.0] - 2025-04-16
### Added
@@ -206,6 +456,8 @@ If you use Jest then you can use the same aliases for the `moduleNameMapper` con
- use always `` component for `label` value
- ``
- Refactored data structure position and dimension (breaking change)
+- ``
+ - component supports now React Flow v9 and v12
### Deprecated
@@ -405,8 +657,6 @@ This is a major release, and it might be not compatible with your current usage
- ``
- Updated the interface with the ability to use either `selectedItems` or `prePopulateWithItems` properties, which is more logical.
- Fixed deferred `selectedItems` setting.
-- ``
- - static test id `data-test-id="sticky-note-modal"` will be removed with next major version
- ``
- `onItemClick` handler is only executed if breadcrumb has `href` set because this is one callback parameter and the handler would not have any information otherwise
- ``
@@ -433,6 +683,8 @@ This is a major release, and it might be not compatible with your current usage
- ``
- `hasStatePrimary`, `hasStateSuccess`, `hasStateWarning` and `hasStateDanger` properties: use the `intent` property instead.
+- ``
+ - static test id `data-test-id="sticky-note-modal"` will be removed with next major version
## [23.6.0] - 2024-04-17
diff --git a/README.md b/README.md
index 67e791760..c7f87a6ba 100644
--- a/README.md
+++ b/README.md
@@ -28,22 +28,69 @@ yarn add --dev @types/carbon-components-react
### Configuration
-All [configuration variables](https://github.com/eccenca/gui-elements/blob/develop/src/configuration/_variables.scss) can be set before importing the full library or the default configuration but for the main changes you should need to change only a few parameters:
-
-- Basic colors
- - `$eccgui-color-primary`: color for very important buttons and switches
- - `$eccgui-color-primary-contrast`: readable text color used on primary color areas
- - `$eccgui-color-accent`: color for most conformation buttons, links, etc
- - `$eccgui-color-accent-contrast`: readable text color used on accent color areas
- - `$eccgui-color-applicationheader-text`
- - `$eccgui-color-applicationheader-background`
- - `$eccgui-color-workspace-text`
- - `$eccgui-color-workspace-background`
-- Basic sizes
- - `$eccgui-size-typo-base`: size including absolute unit, currently only `px` is supported
- - `$eccgui-size-typo-base-lineheight`: only ratio to font size, no unit!
- - `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
- - `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
+All [configuration variables](https://github.com/eccenca/gui-elements/blob/develop/src/configuration/_variables.scss) can be set before importing the full library or the default configuration but for the main properties you should need to change only a few parameters
+
+#### Colors
+
+Since v25 we use a color palette as basic foundation for color configurations. The palette is defined in 4 sections containing various color tints, each tint includes 5 different weights from 100 (light color) to 900 (dark color).
+
+The default palette can be overwritten if it is defined before the configuration or full library is imported to your Sass styles. The palette need to be defined entirely, we currently don't support overwriting it partly.
+
+```
+$eccgui-color-palette-light: (
+ "identity": (
+ "brand": #fae1cc #f8cd99 #f6b966 #f4a533 #f29100,
+ "accent": #e5f4fb #aecfe3 #77abca #4186b2 #0a6199,
+ "text": #f8f8f8 #bcbcbc #818181 #434343 #090909,
+ "background": #fff #e8e8e8 #d6d6d6 #d4d4d4 #d3d3d3,
+ ),
+ "semantic": (
+ "info": #e5f4fb #aecfe3 #77aaca #4086b2 #096199,
+ "success": #e8f5e9 #b2c6b4 #7c967e #466749 #103713,
+ "warning": #fff3e0 #fad2b3 #f5b287 #f0915a #eb702d,
+ "danger": #fff5f6 #edbfc0 #db8989 #c95253 #b71c1c,
+ ),
+ "layout": (
+ "yellow": #fff6d5 #f1ecb5 #e3db79 #d4c93c #c1a500,
+ "purple": #f4ddf3 #c8a2d1 #9d6eb8 #71378f #480e75,
+ "magenta": #ffd8e8 #f5a6c3 #e276a4 #be4c80 #59122d,
+ "pink": #fde4f1 #e6b4ce #d08aae #bb5f8e #711c4d,
+ "violet": #f4e3f4 #d8b0d8 #b377b3 #904490 #570057,
+ "indigo": #efe4fb #b89ee0 #8f72c5 #6547aa #3b1e8f,
+ "cyan": #dff9fc #86d6e5 #5abfd4 #2da9c4 #0092b3,
+ "teal": #d4f2ec #a3ddd3 #6dc0b2 #479d8d #104c42,
+ "lime": #cde0d6 #bce3c2 #9dcd99 #7ba66c #87b347,
+ "amber": #ffe7b8 #ffe9c4 #f9cd8d #eeb757 #ef8f00,
+ "vermilion": #ffd8cc #e4c4ba #b27a6b #8c4b3a #651c09,
+ "grey": #f5f6f7 #b7b7b7 #808080 #484848 #1c2329,
+ ),
+ "extra": (
+ "gold": #fff7d5 #ebd893 #dfc670 #d3b44e #c7a22b,
+ "silver": #f0f0f0 #dedede #ccc #bababa #a8a8a8,
+ "bronze": #fbe9db #f2d6bc #eac29d #e1af7e #d89b5f,
+ ),
+);
+```
+
+All palette colors will be transformed into CSS custom properties automatically and can be referenced by name scheme `--eccgui-color-palette-{groupname}-{colortint}-{colorweight}`, e.g. `--eccgui-color-palette-identity-brand-100`.
+
+All other colors are based on the palette but it is still possible to set them before the default values are used by importing the configuration or the full library.
+
+- `$eccgui-color-primary`: color for very important buttons and switches
+- `$eccgui-color-primary-contrast`: readable text color used on primary color areas
+- `$eccgui-color-accent`: color for most conformation buttons, links, etc
+- `$eccgui-color-accent-contrast`: readable text color used on accent color areas
+- `$eccgui-color-applicationheader-text`
+- `$eccgui-color-applicationheader-background`
+- `$eccgui-color-workspace-text`
+- `$eccgui-color-workspace-background`
+
+#### Sizes
+
+- `$eccgui-size-typo-base`: size including absolute unit, currently only `px` is supported
+- `$eccgui-size-typo-base-lineheight`: only ratio to font size, no unit!
+- `$eccgui-size-type-levelratio`: ratio without unit! used to calculate different text sizes based on `$eccgui-size-typo-base`
+- `$eccgui-size-block-whitespace`: white space between block level elements, currently only `px` is supported
## Development
diff --git a/eslint.config.mjs b/eslint.config.mjs
index 65d555e6f..4dc59ed7e 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -1,13 +1,13 @@
+import { fixupPluginRules } from "@eslint/compat";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
import react from "eslint-plugin-react";
import reactHooks from "eslint-plugin-react-hooks";
import simpleImportSort from "eslint-plugin-simple-import-sort";
-import { fixupPluginRules } from "@eslint/compat";
-import tsParser from "@typescript-eslint/parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
-import js from "@eslint/js";
-import { FlatCompat } from "@eslint/eslintrc";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
diff --git a/package.json b/package.json
index afaac9666..be2468159 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "@eccenca/gui-elements",
"description": "GUI elements based on other libraries, usable in React application, written in Typescript.",
- "version": "24.4.1",
+ "version": "25.1.0",
"license": "Apache-2.0",
"homepage": "https://github.com/eccenca/gui-elements",
"bugs": "https://github.com/eccenca/gui-elements/issues",
@@ -68,36 +68,37 @@
"autolint:all": "yarn autolint:scripts && yarn autolint:styles && yarn autolint:prettier"
},
"dependencies": {
- "@blueprintjs/colors": "^5.1.8",
- "@blueprintjs/core": "^5.18.0",
- "@blueprintjs/select": "^5.3.19",
- "@carbon/icons": "^11.58.0",
- "@carbon/react": "^1.80.1",
- "@codemirror/lang-javascript": "^6.2.3",
- "@codemirror/lang-json": "^6.0.1",
- "@codemirror/lang-markdown": "^6.3.2",
- "@codemirror/lang-sql": "^6.8.0",
+ "@blueprintjs/colors": "^5.1.11",
+ "@blueprintjs/core": "^5.19.1",
+ "@blueprintjs/select": "^5.3.21",
+ "@carbon/icons": "^11.70.0",
+ "@carbon/react": "^1.96.0",
+ "@codemirror/lang-html": "^6.4.11",
+ "@codemirror/lang-javascript": "^6.2.4",
+ "@codemirror/lang-json": "^6.0.2",
+ "@codemirror/lang-markdown": "^6.5.0",
+ "@codemirror/lang-sql": "^6.10.0",
"@codemirror/lang-xml": "^6.1.0",
"@codemirror/lang-yaml": "^6.1.2",
- "@codemirror/legacy-modes": "^6.5.0",
+ "@codemirror/legacy-modes": "^6.5.2",
"@mavrin/remark-typograf": "^2.2.0",
- "@xyflow/react": "^12.6.0",
+ "@xyflow/react": "^12.9.3",
"classnames": "^2.5.1",
- "codemirror": "^6.0.1",
+ "codemirror": "^6.0.2",
"color": "^4.2.3",
"compute-scroll-into-view": "^3.1.1",
+ "he": "^1.2.0",
"jshint": "^2.13.6",
- "lodash": "^4.17.21",
- "n3": "^1.25.1",
+ "lodash": "^4.18.1",
+ "n3": "^1.26.0",
"re-resizable": "^6.10.3",
"react": "^16.13.1",
- "react-dom": "^16.13.1",
+ "react-dom": "^16.14.0",
"react-flow-renderer": "9.7.4",
- "react-flow-renderer-lts": "npm:react-flow-renderer@^10.3.17",
"react-inlinesvg": "^3.0.3",
+ "react-is": "^16.13.1",
"react-markdown": "^10.1.0",
- "react-markdown-deprecated": "npm:react-markdown@^8.0.7",
- "react-syntax-highlighter": "^15.6.1",
+ "react-syntax-highlighter": "^15.6.6",
"rehype-external-links": "^3.0.0",
"rehype-raw": "^7.0.0",
"remark-definition-list": "^2.0.0",
@@ -106,66 +107,68 @@
"reset-css": "^5.0.2",
"unified": "^11.0.5",
"wicg-inert": "^3.1.3",
- "xml-formatter": "^3.6.5"
+ "xml-formatter": "^3.6.7"
},
"devDependencies": {
- "@babel/core": "^7.26.10",
- "@babel/plugin-transform-class-properties": "^7.25.9",
- "@babel/plugin-transform-private-methods": "^7.25.9",
- "@babel/plugin-transform-private-property-in-object": "^7.25.9",
- "@babel/preset-env": "^7.26.9",
- "@babel/preset-flow": "^7.25.9",
- "@babel/preset-react": "^7.26.3",
- "@babel/preset-typescript": "^7.27.0",
- "@eslint/compat": "^1.2.8",
+ "@babel/core": "^7.28.5",
+ "@babel/plugin-transform-class-properties": "^7.27.1",
+ "@babel/plugin-transform-private-methods": "^7.27.1",
+ "@babel/plugin-transform-private-property-in-object": "^7.27.1",
+ "@babel/preset-env": "^7.28.5",
+ "@babel/preset-flow": "^7.27.1",
+ "@babel/preset-react": "^7.28.5",
+ "@babel/preset-typescript": "^7.28.5",
+ "@eslint/compat": "^1.4.1",
"@eslint/eslintrc": "^3.3.1",
- "@eslint/js": "^9.24.0",
- "@storybook/addon-actions": "^8.6.12",
- "@storybook/addon-essentials": "^8.6.12",
- "@storybook/addon-jest": "^8.6.12",
- "@storybook/addon-links": "^8.6.12",
+ "@eslint/js": "^9.39.1",
+ "@storybook/addon-actions": "^8.6.14",
+ "@storybook/addon-essentials": "^8.6.14",
+ "@storybook/addon-jest": "^8.6.14",
+ "@storybook/addon-links": "^8.6.14",
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
- "@storybook/cli": "^8.6.12",
+ "@storybook/cli": "^8.6.14",
"@storybook/preset-scss": "^1.0.3",
- "@storybook/react": "^8.6.12",
- "@storybook/react-webpack5": "^8.6.12",
- "@storybook/test": "^8.6.12",
- "@testing-library/jest-dom": "^6.6.3",
+ "@storybook/react": "^8.6.14",
+ "@storybook/react-webpack5": "^8.6.14",
+ "@storybook/test": "^8.6.14",
+ "@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^12.1.5",
- "@types/codemirror": "^5.60.15",
"@types/color": "^3.0.6",
- "@types/jest": "^29.5.14",
+ "@types/he": "^1.2.3",
+ "@types/jest": "^30.0.0",
"@types/jshint": "^2.12.4",
- "@types/lodash": "^4.17.16",
- "@types/n3": "^1.24.2",
+ "@types/lodash": "^4.17.21",
+ "@types/n3": "^1.26.1",
+ "@types/react-is": "^19.2.0",
"@types/react-syntax-highlighter": "^15.5.13",
- "@typescript-eslint/eslint-plugin": "^8.30.1",
- "@typescript-eslint/parser": "^8.30.1",
- "babel-jest": "^29.7.0",
- "chromatic": "^11.28.0",
- "eslint": "^9.24.0",
+ "@typescript-eslint/eslint-plugin": "^8.47.0",
+ "@typescript-eslint/parser": "^8.47.0",
+ "babel-jest": "^30.2.0",
+ "chromatic": "^13.3.4",
+ "eslint": "^9.39.1",
"eslint-plugin-react": "^7.37.5",
- "eslint-plugin-react-hooks": "^5.2.0",
+ "eslint-plugin-react-hooks": "^7.0.1",
"eslint-plugin-simple-import-sort": "^12.1.1",
"husky": "4",
"identity-obj-proxy": "^3.0.0",
- "jest": "^30.0.5",
- "jest-environment-jsdom": "^30.0.5",
+ "jest": "^30.2.0",
+ "jest-environment-jsdom": "^30.2.0",
"jest-pnp-resolver": "^1.2.3",
- "lint-staged": "^15.5.1",
+ "lint-staged": "^15.5.2",
"node-sass-package-importer": "^5.3.3",
"path": "^0.12.7",
"prettier": "^2.8.8",
"react-app-polyfill": "^3.0.0",
"react-lorem-ipsum": "^1.4.9",
"regenerator-runtime": "^0.13.9",
- "rimraf": "^5.0.10",
+ "rimraf": "^6.1.3",
"sass": "1.62.1",
"sass-loader": "10.3.1",
- "storybook": "^8.6.12",
- "stylelint": "^16.18.0",
- "stylelint-config-recess-order": "^6.0.0",
- "stylelint-config-standard-scss": "^14.0.0",
+ "storybook": "^8.6.14",
+ "stylelint": "^17.6.0",
+ "stylelint-config-recess-order": "^7.7.0",
+ "stylelint-config-standard-scss": "^17.0.0",
+ "stylelint-order": "^8.1.1",
"ts-node": "^10.9.2",
"tsc-esm-fix": "^3.1.2",
"typescript": "5.5.3",
@@ -174,15 +177,17 @@
},
"peerDependencies": {
"@blueprintjs/core": ">=5",
- "react": ">=16",
- "react-dom": ">=16"
+ "react": ">=16"
},
"resolutions": {
- "**/@types/react": "^17.0.85",
- "node-sass-package-importer/**/postcss": "^8.4.49",
+ "**/@types/react": "^17.0.90",
+ "node-sass-package-importer/**/postcss": "^8.5.6",
"string-width": "^4.2.3",
"wrap-ansi": "^7.0.0",
- "hast-util-from-parse5": "8.0.0"
+ "hast-util-from-parse5": "8.0.0",
+ "**/picomatch": "^2.3.2",
+ "**/minimatch": "^3.1.4",
+ "**/lodash": "^4.18.0"
},
"husky": {
"hooks": {
diff --git a/src/_shame.scss b/src/_shame.scss
index e808a65f0..e64a869eb 100644
--- a/src/_shame.scss
+++ b/src/_shame.scss
@@ -1,31 +1,13 @@
// Add stuff to test fast and dirty.
// This file should not contain any styles.
-.#{$prefix}--assistive-text,
-.#{$prefix}--visually-hidden {
- /*
- TODO: move to better place, originally from ~@carbon/styles/scss/css--helpers
- but we cannot use it directly because of other included rules there.
- */
- position: absolute;
- width: 1px;
- height: 1px;
- padding: 0;
- margin: -1px;
- overflow: hidden;
- clip: rect(0, 0, 0, 0);
- white-space: nowrap;
- visibility: inherit;
- border: 0;
-}
-
/*
WORKAROUND: thinner scrollbars
*/
* {
- scrollbar-width: thin;
scrollbar-color: #bbb transparent;
+ scrollbar-width: thin;
&::-webkit-scrollbar {
width: 0.25rem;
@@ -38,19 +20,3 @@
border-radius: 0.125rem;
}
}
-
-/*
- CHANGE: default focus behaviour
-*/
-
-:focus,
-input:focus-visible,
-textarea:focus-visible {
- outline: none;
- outline-offset: 0;
-}
-
-:focus-visible {
- outline: rgba($eccgui-color-accent, $eccgui-opacity-muted) solid 2px;
- outline-offset: 1px;
-}
diff --git a/src/cmem/ActivityControl/ActivityControlWidget.tsx b/src/cmem/ActivityControl/ActivityControlWidget.tsx
index efda5060f..319889e73 100644
--- a/src/cmem/ActivityControl/ActivityControlWidget.tsx
+++ b/src/cmem/ActivityControl/ActivityControlWidget.tsx
@@ -1,17 +1,20 @@
import React from "react";
-import { ValidIconName } from "../../components/Icon/canonicalIconNames";
-import { IconProps } from "../../components/Icon/Icon";
-import { TestIconProps } from "../../components/Icon/TestIcon";
-import { TestableComponent } from "../../components/interfaces";
-import { ProgressBarProps } from "../../components/ProgressBar/ProgressBar";
-import { SpinnerProps } from "../../components/Spinner/Spinner";
-import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import {ValidIconName} from "../../components/Icon/canonicalIconNames";
+import {IconProps} from "../../components/Icon/Icon";
+import {TestIconProps} from "../../components/Icon/TestIcon";
+import {TestableComponent} from "../../components/interfaces";
+import {ProgressBarProps} from "../../components/ProgressBar/ProgressBar";
+import {SpinnerProps} from "../../components/Spinner/Spinner";
+import {CLASSPREFIX as eccgui} from "../../configuration/constants";
import {
Card,
ContextMenu,
+ DecoupledOverlay,
IconButton,
MenuItem,
+ Notification,
+ NotificationProps,
OverflowText,
OverviewItem,
OverviewItemActions,
@@ -97,7 +100,7 @@ interface IActivityContextMenu extends TestableComponent {
export interface ActivityControlWidgetAction extends TestableComponent {
// The action that should be triggered
action: () => void;
- // The tooltip that should be shown over the action icon
+ // The tooltip that should be shown over the action icon on hover
tooltip?: string;
// The icon of the action button
icon: ValidIconName | React.ReactElement;
@@ -105,6 +108,16 @@ export interface ActivityControlWidgetAction extends TestableComponent {
disabled?: boolean;
// Warning state
hasStateWarning?: boolean;
+ // Active state
+ active?: boolean
+ /** A notification that is shown in an overlay pointing at the activity action button. */
+ notification?: {
+ message: string
+ onClose: () => void
+ intent?: NotificationProps["intent"]
+ // Timeout in ms before notification is closed. Default: none
+ timeout?: number
+ }
}
interface IActivityMenuAction extends ActivityControlWidgetAction {
@@ -209,28 +222,11 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
data-test-id={dataTestIdLegacy ? `${dataTestIdLegacy}-actions` : undefined}
>
{activityActions &&
- activityActions.map((action, idx) => {
- return (
-
- );
- })}
+ activityActions.map((action, idx) =>
+ )}
{additionalActions}
{activityContextMenu && activityContextMenu.menuItems.length > 0 && (
@@ -267,3 +259,44 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) {
{widget}
);
}
+
+interface ActivityActionButtonProps {
+ action: ActivityControlWidgetAction
+}
+
+const ActivityActionButton = ({action}: ActivityActionButtonProps) => {
+ const actionButtonRef = React.useRef(null);
+ const ActionButton = () => (
+
+ )
+ return action.notification ?
+ <>
+
+
+
+ {actionButtonRef.current && (
+
+
+
+ )}
+ :
+
+}
diff --git a/src/cmem/ActivityControl/SilkActivityControl.tsx b/src/cmem/ActivityControl/SilkActivityControl.tsx
index 284d86a09..3997fe4e2 100644
--- a/src/cmem/ActivityControl/SilkActivityControl.tsx
+++ b/src/cmem/ActivityControl/SilkActivityControl.tsx
@@ -196,7 +196,7 @@ export function useSilkActivityControl({
registerForUpdates(updateActivityStatus);
return unregisterFromUpdates;
},
- // eslint-disable-next-line react-hooks/exhaustive-deps
+
[]
);
diff --git a/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx b/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx
index 5ba6d1a99..26b214ab1 100644
--- a/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx
+++ b/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx
@@ -58,7 +58,7 @@ export function ContentBlobToggler({
{previewContent}
{enableToggler && (
<>
- …{" "}
+ {" "}…{" "}
{
/**
- The preview content will be cut to this length if it is too long.
+ * The preview content will be cut to this length if it is too long.
*/
previewMaxLength?: number;
/**
- The content string. If it is smaller than previewMaxLength this will be displayed in full, else fullviewContent will be displayed.
+ * The content string.
+ * If it is smaller than `previewMaxLength` this will be displayed in full, else `fullviewContent` will be displayed.
*/
content: string;
- /** If only the first non-empty line should be shown in the preview. This will in addition also be shortened according to previewMaxLength. */
- firstNonEmptyLineOnly?: boolean;
- /** If enabled the preview is rendered as markdown. */
+ /**
+ * Use only parts of `content` in the preview.
+ * `firstMarkdownSection` uses the content until the first double line return.
+ * Currently overwritten by `firstNonEmptyLineOnly`.
+ */
+ useOnly?: "firstNonEmptyLine" | "firstMarkdownSection";
+ /**
+ * If enabled the preview is rendered as Markdown.
+ */
renderPreviewAsMarkdown?: boolean;
- /** White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled. */
+ /**
+ * White-listing of HTML elements that will be rendered when renderPreviewAsMarkdown is enabled.
+ */
allowedHtmlElementsInPreview?: string[];
- /** Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
+ /**
+ * Allows to add non-string elements at the end of the content if the full description is shown, i.e. no toggler is necessary.
* This allows to add non-string elements to both the full-view content and the pure string content.
*/
noTogglerContentSuffix?: JSX.Element;
+ /**
+ * If only the first non-empty line should be shown in the preview.
+ * This will in addition also be shortened according to `previewMaxLength`.
+ * @deprecated (v26) use `useOnly="firstNonEmptyLine"` instead
+ */
+ firstNonEmptyLineOnly?: boolean;
}
-/** Version of the content toggler for text only content. */
+/** Version of the content toggler for text centric content. */
export function StringPreviewContentBlobToggler({
className = "",
previewMaxLength,
@@ -33,14 +49,28 @@ export function StringPreviewContentBlobToggler({
content,
fullviewContent,
startExtended,
- firstNonEmptyLineOnly,
+ useOnly,
renderPreviewAsMarkdown = false,
allowedHtmlElementsInPreview,
noTogglerContentSuffix,
+ firstNonEmptyLineOnly,
}: StringPreviewContentBlobTogglerProps) {
- const previewMaybeFirstLine = firstNonEmptyLineOnly ? firstNonEmptyLine(content) : content;
- const previewString = previewMaxLength ? previewMaybeFirstLine.substr(0, previewMaxLength) : previewMaybeFirstLine;
- const enableToggler = previewString !== content;
+ // need to test `firstNonEmptyLineOnly` until property is removed
+ const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly
+ ? "firstNonEmptyLine"
+ : useOnly;
+
+ let previewString = content;
+ switch (useOnlyTest) {
+ case "firstNonEmptyLine":
+ previewString = useOnlyPart(content, regexFirstNonEmptyLine);
+ break;
+ case "firstMarkdownSection":
+ previewString = useOnlyPart(content, regexFirstMarkdownSection);
+ }
+
+ let enableToggler = previewString !== content;
+
let previewContent = renderPreviewAsMarkdown ? (
{previewString}
@@ -48,6 +78,15 @@ export function StringPreviewContentBlobToggler({
) : (
previewString
);
+
+ if (
+ previewMaxLength &&
+ utils.reduceToText(previewContent, { decodeHtmlEntities: true }).length > previewMaxLength
+ ) {
+ previewContent = utils.reduceToText(previewContent, { decodeHtmlEntities: true }).slice(0, previewMaxLength);
+ enableToggler = true;
+ }
+
if (!enableToggler && noTogglerContentSuffix) {
previewContent = (
<>
@@ -60,7 +99,7 @@ export function StringPreviewContentBlobToggler({
return (
{previewContent}}
toggleExtendText={toggleExtendText}
toggleReduceText={toggleReduceText}
fullviewContent={fullviewContent}
@@ -70,15 +109,24 @@ export function StringPreviewContentBlobToggler({
);
}
-const newLineRegex = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstNonEmptyLine = new RegExp("\r|\n"); // eslint-disable-line
+const regexFirstMarkdownSection = new RegExp("\r\n\r\n|\n\n"); // eslint-disable-line
/**
* Takes the first non-empty line from a preview string.
*/
function firstNonEmptyLine(preview: string) {
+ return useOnlyPart(preview, regexFirstNonEmptyLine);
+}
+
+/**
+ * Returns only the first part from a preview string.
+ * Or the full string as fallback.
+ */
+function useOnlyPart(preview: string, regexTest: RegExp): string {
const previewString = preview.trim();
- const result = newLineRegex.exec(previewString);
- return result !== null ? previewString.substr(0, result.index) : previewString;
+ const result = regexTest.exec(previewString);
+ return result !== null ? result.input.slice(0, result.index) : previewString;
}
export const stringPreviewContentBlobTogglerUtils = {
diff --git a/src/cmem/ContentBlobToggler/stories/StringPreviewContentBlobToggler.stories.tsx b/src/cmem/ContentBlobToggler/stories/StringPreviewContentBlobToggler.stories.tsx
new file mode 100644
index 000000000..d196bd308
--- /dev/null
+++ b/src/cmem/ContentBlobToggler/stories/StringPreviewContentBlobToggler.stories.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Markdown, StringPreviewContentBlobToggler } from "../../../index";
+
+const config = {
+ title: "CMEM/ContentBlobToggler/StringPreview",
+ component: StringPreviewContentBlobToggler,
+} as Meta;
+export default config;
+
+const Template: StoryFn = (args) => (
+
+);
+
+const initialTeststring =
+ "A library for GUI elements.\nIn order to create graphical user interfaces, please have look at the documentation at [Github](https://github.com/eccenca/gui-elements).";
+
+export const Default = Template.bind({});
+Default.args = {
+ content: initialTeststring,
+ fullviewContent: {initialTeststring},
+ previewMaxLength: 64,
+ renderPreviewAsMarkdown: true,
+ toggleExtendText: "show more",
+ toggleReduceText: "show less",
+};
diff --git a/src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx b/src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx
new file mode 100644
index 000000000..f16d9943a
--- /dev/null
+++ b/src/cmem/ContentBlobToggler/tests/StringPreviewContentBlobToggler.test.tsx
@@ -0,0 +1,98 @@
+import React from "react";
+import { render, RenderResult } from "@testing-library/react";
+
+import "@testing-library/jest-dom";
+
+import {
+ StringPreviewContentBlobToggler,
+ StringPreviewContentBlobTogglerProps,
+} from "../StringPreviewContentBlobToggler";
+
+import { Default as StringPreviewContentBlobTogglerStory } from "./../stories/StringPreviewContentBlobToggler.stories";
+
+describe("StringPreviewContentBlobToggler", () => {
+ const textMustExist = (queryByText: RenderResult["queryByText"], text: string) => {
+ expect(queryByText(text, { exact: false })).not.toBeNull();
+ };
+ const textMustNotExist = (queryByText: RenderResult["queryByText"], text: string) => {
+ expect(queryByText(text, { exact: false })).toBeNull();
+ };
+ it("should cut preview and show toggler to extend", () => {
+ const { queryByText } = render(
+
+ );
+ textMustExist(queryByText, "A library for GUI elements.");
+ textMustNotExist(
+ queryByText,
+ "In order to create graphical user interfaces, please have look at the documentation at"
+ );
+ textMustExist(queryByText, "show more");
+ });
+ it("should display full view if `startExtended` is enabled, and show toggler to reduce", () => {
+ const { queryByText } = render(
+
+ );
+ textMustExist(
+ queryByText,
+ "In order to create graphical user interfaces, please have look at the documentation at"
+ );
+ textMustExist(queryByText, "show less");
+ });
+ it('should display only first content line on `useOnly={"firstNonEmptyLine"}`', () => {
+ const { queryByText } = render(
+
+ );
+ textMustExist(queryByText, "A library for GUI elements.");
+ textMustNotExist(queryByText, "In order to create");
+ });
+ it('should use first Markdown paragraph as preview content on `useOnly={"firstMarkdownSection"}` but shorten it', () => {
+ const { queryByText } = render(
+
+ );
+ textMustExist(queryByText, "A library for GUI elements.");
+ textMustExist(queryByText, "In order to create");
+ textMustNotExist(queryByText, "please have look at the documentation at");
+ });
+ it("should display full preview and no toggler if content is short enough", () => {
+ const { queryByText } = render(
+
+ );
+ textMustExist(queryByText, "A library for GUI elements.");
+ textMustExist(
+ queryByText,
+ "In order to create graphical user interfaces, please have look at the documentation at"
+ );
+ textMustNotExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+ textMustNotExist(queryByText, "show more");
+ });
+ it("should not use Markdown rendering on `renderPreviewAsMarkdown={false}`", () => {
+ const { queryByText } = render(
+
+ );
+ textMustExist(queryByText, "A library for GUI elements.");
+ textMustExist(
+ queryByText,
+ "In order to create graphical user interfaces, please have look at the documentation at"
+ );
+ textMustExist(queryByText, "https://github.com/"); // test if Markdown was rendered
+ textMustExist(queryByText, "show more");
+ });
+});
diff --git a/src/cmem/markdown/Markdown.stories.tsx b/src/cmem/markdown/Markdown.stories.tsx
index d067e7912..ee7adef3e 100644
--- a/src/cmem/markdown/Markdown.stories.tsx
+++ b/src/cmem/markdown/Markdown.stories.tsx
@@ -1,5 +1,4 @@
import React from "react";
-import { Blockquote } from "@blueprintjs/core";
import { Meta, StoryFn } from "@storybook/react";
import { Markdown } from "./../../../index";
@@ -37,7 +36,7 @@ This is a paragraph.
* another line
3. third item
-This is a paragraph with a [text link](http://example.com/) and a footnote reference [^1].
+This is a paragraph with a [text link](http://example.com/), some \`inline code\`, and a footnote reference [^1].
## Headline level 2
### Headline level 3
@@ -45,7 +44,7 @@ This is a paragraph with a [text link](http://example.com/) and a footnote refer
##### Headline level 5
###### Headline level 6
- This is a code block.
+ This is a code block.
\`\`\`
another code block
diff --git a/src/cmem/markdown/Markdown.tsx b/src/cmem/markdown/Markdown.tsx
index 8f0b0282c..7544d8f95 100644
--- a/src/cmem/markdown/Markdown.tsx
+++ b/src/cmem/markdown/Markdown.tsx
@@ -1,21 +1,15 @@
import React from "react";
import ReactMarkdown from "react-markdown";
-/**
- * Recreate the old type to provide support until next major
- */
-import { PluggableList as PluggableListDeprecated } from "react-markdown-deprecated/lib/react-markdown";
import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
// @ts-ignore: No declaration file for module (TODO: should be @ts-expect-error but GUI elements is used inside project with `noImplicitAny=false`)
-import remarkTypograf from "@mavrin/remark-typograf";
import rehypeExternalLinks from "rehype-external-links";
import rehypeRaw from "rehype-raw";
import { remarkDefinitionList } from "remark-definition-list";
import remarkGfm from "remark-gfm";
-import { PluggableList as PluggableListUnified } from "unified";
+import { PluggableList } from "unified";
import { CLASSPREFIX as eccgui } from "../../configuration/constants";
import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index";
-type PluggableList = PluggableListUnified | PluggableListDeprecated;
export interface MarkdownProps extends TestableComponent {
children: string;
@@ -41,7 +35,6 @@ export interface MarkdownProps extends TestableComponent {
/**
* Additional reHype plugins to execute.
* @see https://github.com/remarkjs/react-markdown#architecture
- * @deprecated (v25) this property won't support `PluggableList` from "react-markdown/lib/react-markdown" with the next major version, only the one from `unified` will be supported then.
*/
reHypePlugins?: PluggableList;
/**
@@ -61,9 +54,9 @@ const configDefault = {
@see https://github.com/remarkjs/react-markdown#api
*/
// @see https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins
- remarkPlugins: [remarkGfm, remarkTypograf, remarkDefinitionList] as PluggableListUnified,
+ remarkPlugins: [remarkGfm, remarkDefinitionList] as PluggableList,
// @see https://github.com/rehypejs/rehype/blob/main/doc/plugins.md#list-of-plugins
- rehypePlugins: [] as PluggableListUnified,
+ rehypePlugins: [] as PluggableList,
allowedElements: [
// default markdown
"a",
@@ -173,9 +166,7 @@ export const Markdown = ({
};
if (reHypePlugins) {
- reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(
- reHypePlugins as PluggableListUnified
- );
+ reactMarkdownProperties.rehypePlugins = reactMarkdownProperties.rehypePlugins.concat(reHypePlugins);
}
const markdownDisplay = ;
diff --git a/src/cmem/markdown/markdown.scss b/src/cmem/markdown/markdown.scss
index 5b390d1e5..b2668d0b1 100644
--- a/src/cmem/markdown/markdown.scss
+++ b/src/cmem/markdown/markdown.scss
@@ -55,8 +55,8 @@
a[href=""]:not(#{$eccgui-selector-text-spot-highlight}) {
font-size: $eccgui-size-typo-caption;
line-height: $eccgui-size-typo-caption-lineheight;
- text-decoration: none;
vertical-align: super;
+ text-decoration: none;
&::before {
content: "[";
diff --git a/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx b/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx
index 147dc9d6e..8abe52313 100644
--- a/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx
+++ b/src/cmem/react-flow/ReactFlow/ReactFlow.stories.tsx
@@ -1,375 +1,431 @@
import React, { FC, useCallback, useEffect, useState } from "react";
-import { Elements, FlowElement } from "react-flow-renderer";
+import {
+ Background as BackgroundV9,
+ BackgroundVariant as BackgroundVariantV9,
+ Elements,
+ FlowElement,
+ Position,
+} from "react-flow-renderer";
import { Meta, StoryFn } from "@storybook/react";
+import { fn } from "@storybook/test";
+import {
+ Background as BackgroundV12,
+ BackgroundVariant as BackgroundVariantV12,
+ Edge as Edge12,
+ Node as Node12,
+ useEdgesState as useEdgesState12,
+ useNodesState as useNodesState12,
+} from "@xyflow/react";
-import { EdgeTools, NodeTools, ReactFlow } from "./../../../index";
-import { ReactFlowProps } from "./ReactFlow";
+import {
+ ApplicationContainer,
+ EdgeTools,
+ MiniMap,
+ NodeTools,
+ ReactFlowExtended,
+ ReactFlowExtendedProps,
+} from "./../../../index";
const nodeExamples = {
- unspecified: [
- {
- id: "unspecified-1",
- type: "default",
- data: {
- label: "Default ",
- content: "Example content.",
- minimalShape: "none",
- menuButtons: Pass your menu here.,
- },
- position: { x: 200, y: 50 },
- },
- {
- id: "unspecified-2",
- type: "default",
- data: {
- label: "Default ",
- content: "Example content.",
- minimalShape: "none",
- handles: [
- { type: "source", position: "left" },
- { type: "target", position: "right" },
- ],
- },
- position: { x: 200, y: 300 },
- },
- {
- id: "unspecified-e1",
- type: "straight",
- label: "straight edge",
- arrowHeadType: "arrowclosed",
- source: "unspecified-1",
- target: "unspecified-2",
- },
- {
- id: "unspecified-e2",
- type: "step",
- label: "step edge",
- arrowHeadType: "arrowclosed",
- source: "unspecified-2",
- target: "unspecified-1",
- },
- ],
- linking: [
- {
- id: "linking-1",
- type: "sourcepath",
- data: {
- label: "Source path",
- content: "Example content.",
- minimalShape: "none",
- menuButtons: Pass your menu here.,
- },
- position: { x: 100, y: 50 },
- },
- {
- id: "linking-2",
- type: "targetpath",
- data: {
- label: "Target path",
- content: "Example content.",
- minimalShape: "none",
- },
- position: { x: 400, y: 200 },
- },
- {
- id: "linking-3",
- type: "transformation",
- data: {
- label: "Transformation",
- content: "Example content.",
- minimalShape: "none",
- },
- position: { x: 700, y: 50 },
- },
- {
- id: "linking-4",
- type: "comparator",
- data: {
- label: "Comparation",
- content: "Example content.",
- minimalShape: "none",
- handles: [
- { type: "source", position: "left" },
- { type: "target", position: "right" },
- ],
- },
- position: { x: 750, y: 300 },
- },
- {
- id: "linking-5",
- type: "aggregator",
- data: {
- label: "Aggregation",
- content: "Example content.",
- minimalShape: "none",
- handles: [
- { type: "source", position: "left" },
- { type: "target", position: "right" },
- ],
- },
- position: { x: 50, y: 300 },
- },
- {
- id: "linking-e1",
- type: "value",
- label: "value edge",
- arrowHeadType: "arrowclosed",
- source: "linking-1",
- target: "linking-2",
- },
- {
- id: "linking-e2",
- type: "score",
- label: "score edge",
- arrowHeadType: "arrowclosed",
- source: "linking-2",
- target: "linking-3",
- },
- {
- id: "linking-e3",
- type: "success",
- label: "success edge",
- arrowHeadType: "arrowclosed",
- source: "linking-3",
- target: "linking-4",
- },
- {
- id: "linking-e4",
- type: "warning",
- label: "warning edge",
- arrowHeadType: "arrowclosed",
- source: "linking-4",
- target: "linking-5",
- },
- {
- id: "linking-e5",
- type: "danger",
- label: "danger edge",
- arrowHeadType: "arrowclosed",
- source: "linking-5",
- target: "linking-1",
- },
- ],
- workflow: [
- {
- id: "workflow-1",
- type: "dataset",
- data: {
- label: "Dataset",
- content: "Example content.",
- minimalShape: "none",
- menuButtons: Pass your menu here.,
- },
- position: { x: 100, y: 50 },
- },
- {
- id: "workflow-2",
- type: "linking",
- data: {
- label: "Linking",
- content: "Example content.",
- minimalShape: "none",
- },
- position: { x: 400, y: 200 },
- },
- {
- id: "workflow-3",
- type: "transform",
- data: {
- label: "Transform",
- content: "Example content.",
- minimalShape: "none",
- },
- position: { x: 700, y: 50 },
- },
- {
- id: "workflow-4",
- type: "task",
- data: {
- label: "Task",
- content: "Example content.",
- minimalShape: "none",
- handles: [
- { type: "source", position: "left" },
- { type: "target", position: "right" },
- ],
- },
- position: { x: 750, y: 300 },
- },
- {
- id: "workflow-5",
- type: "workflow",
- data: {
- label: "Workflow",
- content: "Example content.",
- minimalShape: "none",
- handles: [
- { type: "source", position: "left" },
- { type: "target", position: "right" },
- ],
- },
- position: { x: 50, y: 300 },
- },
- {
- id: "workflow-e1",
- label: "default",
- arrowHeadType: "arrowclosed",
- source: "workflow-1",
- target: "workflow-2",
- },
- {
- id: "workflow-e2",
- label: "default",
- arrowHeadType: "arrowclosed",
- source: "workflow-2",
- target: "workflow-3",
- },
- {
- id: "workflow-e3",
- type: "success",
- label: "success edge",
- arrowHeadType: "arrowclosed",
- source: "workflow-3",
- target: "workflow-4",
- },
- {
- id: "workflow-e4",
- type: "warning",
- label: "warning edge",
- arrowHeadType: "arrowclosed",
- source: "workflow-4",
- target: "workflow-5",
- },
- {
- id: "workflow-e5",
- type: "danger",
- label: "danger edge",
- arrowHeadType: "arrowclosed",
- source: "workflow-5",
- target: "workflow-1",
- },
- ],
- graph: [
- {
- id: "graph-1",
- type: "default",
- data: {
- label: "Default ",
- content: "Example content.",
- minimalShape: "none",
- menuButtons: Pass your menu here.,
- },
- position: { x: 100, y: 50 },
- },
- {
- id: "graph-2",
- type: "graph",
- data: {
- label: "Graph",
- content: "Example content.",
- minimalShape: "none",
- },
- position: { x: 400, y: 200 },
- },
- {
- id: "graph-3",
- type: "class",
- data: {
- label: "Class",
- content: "Example content.",
- minimalShape: "none",
- },
- position: { x: 700, y: 50 },
- },
- {
- id: "graph-4",
- type: "instance",
- data: {
- label: "Instance",
- content: "Example content.",
- minimalShape: "none",
- handles: [
- { type: "source", position: "left" },
- { type: "target", position: "right" },
- ],
- },
- position: { x: 750, y: 300 },
- },
- {
- id: "graph-5",
- type: "property",
- data: {
- label: "Property",
- content: "Example content.",
- minimalShape: "none",
- handles: [
- { type: "source", position: "left" },
- { type: "target", position: "right" },
- ],
- },
- position: { x: 50, y: 300 },
- },
- {
- id: "graph-e1",
- type: "implicit",
- label: "implicit edge",
- arrowHeadType: "arrowclosed",
- source: "graph-1",
- target: "graph-2",
- },
- {
- id: "graph-e2",
- type: "import",
- label: "import edge",
- arrowHeadType: "arrowclosed",
- source: "graph-2",
- target: "graph-3",
- },
- {
- id: "graph-e3",
- type: "subclass",
- label: "subclass edge",
- arrowHeadType: "arrowclosed",
- source: "graph-3",
- target: "graph-4",
- },
- {
- id: "graph-e4",
- type: "subproperty",
- label: "subproperty edge",
- arrowHeadType: "arrowclosed",
- source: "graph-4",
- target: "graph-5",
- },
- {
- id: "graph-e5",
- type: "rdftype",
- label: "rdftype edge",
- arrowHeadType: "arrowclosed",
- source: "graph-5",
- target: "graph-1",
- },
- ],
+ unspecified: {
+ nodes: [
+ {
+ id: "unspecified-1",
+ type: "default",
+ data: {
+ label: "Default ",
+ content: "Example content.",
+ minimalShape: "none",
+ menuButtons: Pass your menu here.,
+ },
+ position: { x: 200, y: 50 },
+ },
+ {
+ id: "unspecified-2",
+ type: "default",
+ targetPosition: Position.Right,
+ sourcePosition: Position.Left,
+ data: {
+ label: "Default ",
+ content: "Example content.",
+ minimalShape: "none",
+ handles: [
+ { type: "source", position: "left" },
+ { type: "target", position: "right" },
+ ],
+ },
+ position: { x: 200, y: 300 },
+ },
+ ],
+ edges: [
+ {
+ id: "unspecified-e1",
+ type: "straight",
+ label: "straight edge",
+ arrowHeadType: "arrowclosed",
+ source: "unspecified-1",
+ target: "unspecified-2",
+ },
+ {
+ id: "unspecified-e2",
+ type: "step",
+ label: "step edge",
+ arrowHeadType: "arrowclosed",
+ source: "unspecified-2",
+ target: "unspecified-1",
+ },
+ ],
+ },
+ linking: {
+ nodes: [
+ {
+ id: "linking-1",
+ type: "sourcepath",
+ data: {
+ label: "Source path",
+ content: "Example content.",
+ minimalShape: "none",
+ menuButtons: Pass your menu here.,
+ },
+ position: { x: 100, y: 50 },
+ },
+ {
+ id: "linking-2",
+ type: "targetpath",
+ data: {
+ label: "Target path",
+ content: "Example content.",
+ minimalShape: "none",
+ },
+ position: { x: 400, y: 200 },
+ },
+ {
+ id: "linking-3",
+ type: "transformation",
+ data: {
+ label: "Transformation",
+ content: "Example content.",
+ minimalShape: "none",
+ },
+ position: { x: 700, y: 50 },
+ },
+ {
+ id: "linking-4",
+ type: "comparator",
+ targetPosition: Position.Right,
+ sourcePosition: Position.Left,
+ data: {
+ label: "Comparation",
+ content: "Example content.",
+ minimalShape: "none",
+ handles: [
+ { type: "source", position: "left" },
+ { type: "target", position: "right" },
+ ],
+ },
+ position: { x: 750, y: 300 },
+ },
+ {
+ id: "linking-5",
+ type: "aggregator",
+ targetPosition: Position.Right,
+ sourcePosition: Position.Left,
+ data: {
+ label: "Aggregation",
+ content: "Example content.",
+ minimalShape: "none",
+ handles: [
+ { type: "source", position: "left" },
+ { type: "target", position: "right" },
+ ],
+ },
+ position: { x: 50, y: 300 },
+ },
+ ],
+ edges: [
+ {
+ id: "linking-e1",
+ type: "value",
+ label: "value edge",
+ arrowHeadType: "arrowclosed",
+ source: "linking-1",
+ target: "linking-2",
+ },
+ {
+ id: "linking-e2",
+ type: "score",
+ label: "score edge",
+ arrowHeadType: "arrowclosed",
+ source: "linking-2",
+ target: "linking-3",
+ },
+ {
+ id: "linking-e3",
+ type: "success",
+ label: "success edge",
+ arrowHeadType: "arrowclosed",
+ source: "linking-3",
+ target: "linking-4",
+ },
+ {
+ id: "linking-e4",
+ type: "warning",
+ label: "warning edge",
+ arrowHeadType: "arrowclosed",
+ source: "linking-4",
+ target: "linking-5",
+ },
+ {
+ id: "linking-e5",
+ type: "danger",
+ label: "danger edge",
+ arrowHeadType: "arrowclosed",
+ source: "linking-5",
+ target: "linking-1",
+ },
+ ],
+ },
+ workflow: {
+ nodes: [
+ {
+ id: "workflow-1",
+ type: "dataset",
+ data: {
+ label: "Dataset",
+ content: "Example content.",
+ minimalShape: "none",
+ menuButtons: Pass your menu here.,
+ },
+ position: { x: 100, y: 50 },
+ },
+ {
+ id: "workflow-2",
+ type: "linking",
+ data: {
+ label: "Linking",
+ content: "Example content.",
+ minimalShape: "none",
+ },
+ position: { x: 400, y: 200 },
+ },
+ {
+ id: "workflow-3",
+ type: "transform",
+ data: {
+ label: "Transform",
+ content: "Example content.",
+ minimalShape: "none",
+ },
+ position: { x: 700, y: 50 },
+ },
+ {
+ id: "workflow-4",
+ type: "task",
+ targetPosition: Position.Right,
+ sourcePosition: Position.Left,
+ data: {
+ label: "Task",
+ content: "Example content.",
+ minimalShape: "none",
+ handles: [
+ { type: "source", position: "left" },
+ { type: "target", position: "right" },
+ ],
+ },
+ position: { x: 750, y: 300 },
+ },
+ {
+ id: "workflow-5",
+ type: "workflow",
+ targetPosition: Position.Right,
+ sourcePosition: Position.Left,
+ data: {
+ label: "Workflow",
+ content: "Example content.",
+ minimalShape: "none",
+ handles: [
+ { type: "source", position: "left" },
+ { type: "target", position: "right" },
+ ],
+ },
+ position: { x: 50, y: 300 },
+ },
+ ],
+ edges: [
+ {
+ id: "workflow-e1",
+ label: "default",
+ arrowHeadType: "arrowclosed",
+ source: "workflow-1",
+ target: "workflow-2",
+ },
+ {
+ id: "workflow-e2",
+ label: "default",
+ arrowHeadType: "arrowclosed",
+ source: "workflow-2",
+ target: "workflow-3",
+ },
+ {
+ id: "workflow-e3",
+ type: "success",
+ label: "success edge",
+ arrowHeadType: "arrowclosed",
+ source: "workflow-3",
+ target: "workflow-4",
+ },
+ {
+ id: "workflow-e4",
+ type: "warning",
+ label: "warning edge",
+ arrowHeadType: "arrowclosed",
+ source: "workflow-4",
+ target: "workflow-5",
+ },
+ {
+ id: "workflow-e5",
+ type: "danger",
+ label: "danger edge",
+ arrowHeadType: "arrowclosed",
+ source: "workflow-5",
+ target: "workflow-1",
+ },
+ ],
+ },
+ graph: {
+ nodes: [
+ {
+ id: "graph-1",
+ type: "default",
+ data: {
+ label: "Default ",
+ content: "Example content.",
+ minimalShape: "none",
+ menuButtons: Pass your menu here.,
+ },
+ position: { x: 100, y: 50 },
+ },
+ {
+ id: "graph-2",
+ type: "graph",
+ data: {
+ label: "Graph",
+ content: "Example content.",
+ minimalShape: "none",
+ },
+ position: { x: 400, y: 200 },
+ },
+ {
+ id: "graph-3",
+ type: "class",
+ data: {
+ label: "Class",
+ content: "Example content.",
+ minimalShape: "none",
+ },
+ position: { x: 700, y: 50 },
+ },
+ {
+ id: "graph-4",
+ type: "instance",
+ targetPosition: Position.Right,
+ sourcePosition: Position.Left,
+ data: {
+ label: "Instance",
+ content: "Example content.",
+ minimalShape: "none",
+ handles: [
+ { type: "source", position: "left" },
+ { type: "target", position: "right" },
+ ],
+ },
+ position: { x: 750, y: 300 },
+ },
+ {
+ id: "graph-5",
+ type: "property",
+ targetPosition: Position.Right,
+ sourcePosition: Position.Left,
+ data: {
+ label: "Property",
+ content: "Example content.",
+ minimalShape: "none",
+ handles: [
+ { type: "source", position: "left" },
+ { type: "target", position: "right" },
+ ],
+ },
+ position: { x: 50, y: 300 },
+ },
+ ],
+ edges: [
+ {
+ id: "graph-e1",
+ type: "implicit",
+ label: "implicit edge",
+ arrowHeadType: "arrowclosed",
+ source: "graph-1",
+ target: "graph-2",
+ },
+ {
+ id: "graph-e2",
+ type: "import",
+ label: "import edge",
+ arrowHeadType: "arrowclosed",
+ source: "graph-2",
+ target: "graph-3",
+ },
+ {
+ id: "graph-e3",
+ type: "subclass",
+ label: "subclass edge",
+ arrowHeadType: "arrowclosed",
+ source: "graph-3",
+ target: "graph-4",
+ },
+ {
+ id: "graph-e4",
+ type: "subproperty",
+ label: "subproperty edge",
+ arrowHeadType: "arrowclosed",
+ source: "graph-4",
+ target: "graph-5",
+ },
+ {
+ id: "graph-e5",
+ type: "rdftype",
+ label: "rdftype edge",
+ arrowHeadType: "arrowclosed",
+ source: "graph-5",
+ target: "graph-1",
+ },
+ ],
+ },
};
export default {
title: "CMEM/React Flow/Configurations",
- component: ReactFlow,
+ component: ReactFlowExtended,
argTypes: {
configuration: {
control: "select",
options: Object.keys(nodeExamples),
},
+ flowVersion: {
+ control: "select",
+ options: [undefined, "v9", "v12"],
+ },
},
-} as Meta;
+} as Meta;
-const ReactFlowExample: FC = (args) => {
- const [reactflowInstance, setReactflowInstance] = useState(null);
+const ReactFlowExampleV9: FC = (args) => {
+ const [reactflowInstance, setReactflowInstance] = useState(undefined);
const [elements, setElements] = useState([] as Elements);
const [edgeTools, setEdgeTools] = useState(<>);
useEffect(() => {
- setElements(nodeExamples[args.configuration ?? "unspecified"] as Elements);
+ const examples = nodeExamples[args.configuration ?? "unspecified"];
+ setElements([...examples.nodes, ...examples.edges] as Elements);
}, [args]);
// Helper methods for nodes and edges
@@ -402,31 +458,81 @@ const ReactFlowExample: FC = (args) => {
[reactflowInstance]
);
- const { configuration, ...otherArgs } = args;
+ const { style, ...otherProps } = args;
+ const { height, width, ...otherStyles } = style ?? {};
+
+ const reactFlowExtendedProps = {
+ ...otherProps,
+ style: otherStyles,
+ defaultZoom: 1,
+ elements,
+ onLoad,
+ onElementClick,
+ onEdgeContextMenu: onElementClick,
+ };
return (
- <>
-
+
+