diff --git a/CHANGELOG.md b/CHANGELOG.md index 9b550f94e..34b21eb38 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,9 +11,19 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - component for hiding elements in specific media - `` - - force children to get displayed as inline content + - force children to get displayed as inline content +- `` + - simple placeholder element that can be used to display info about missing data - `` - - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly` + - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly` +- `` + - `forceInline` property: force inline rendering +- `` + - `togglerSize`: replaces the deprecated `togglerLarge` property +- `: + - `searchListPredicate` property: Allows to filter the complete list of search options at once. + - Following optional BlueprintJs properties are forwarded now to override default behaviour: `noResults`, `createNewItemRenderer` and `itemRenderer` + - `isValidNewOption` property: Checks if an input string is or can be turned into a valid new option. ### Fixed @@ -21,9 +31,11 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - create more whitespace inside `small` tag - reduce visual impact of border - `` - - take Markdown rendering into account before testing the maximum preview length + - take Markdown rendering into account before testing the maximum preview length - `` - header-menu items are vertically centered now +- ``: + - border of the BlueprintJS `Tag` elements were fixed ### Changed @@ -37,11 +49,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `` - `` - `` and `` +- `` + - by default, if no searchPredicate or searchListPredicate is defined, the filtering is done via case-insensitive multi-word filtering. ### Deprecated - `` - - `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"` + - `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"` +- `` + - `togglerLarge`: replaced by the more versatile `togglerSize` property +- `` + - `searchPreficate`: replaced by the, in some cases, more efficient `searchListPredicate` ## [25.0.0] - 2025-12-01 diff --git a/eslint.config.mjs b/eslint.config.mjs index 4dc59ed7e..b50d55fdf 100644 --- a/eslint.config.mjs +++ b/eslint.config.mjs @@ -17,11 +17,13 @@ const compat = new FlatCompat({ allConfig: js.configs.all }); -export default [...compat.extends( +const base = compat.extends( "eslint:recommended", "plugin:@typescript-eslint/eslint-recommended", "plugin:@typescript-eslint/recommended", -), { +); + +export default [...base, { plugins: { "@typescript-eslint": typescriptEslint, react, @@ -31,6 +33,9 @@ export default [...compat.extends( languageOptions: { parser: tsParser, + globals: { + window: "readonly", + } }, rules: { @@ -54,4 +59,4 @@ export default [...compat.extends( "no-console": "error", }, -}]; \ No newline at end of file +}]; diff --git a/package.json b/package.json index 65bfde6e9..9a6a996f5 100644 --- a/package.json +++ b/package.json @@ -153,6 +153,7 @@ "identity-obj-proxy": "^3.0.0", "jest": "^30.2.0", "jest-environment-jsdom": "^30.2.0", + "jest-fixed-jsdom": "^0.0.11", "jest-pnp-resolver": "^1.2.3", "lint-staged": "^15.5.2", "node-sass-package-importer": "^5.3.3", @@ -224,7 +225,7 @@ "testMatch": [ "/src/**/*(*.)@(spec|test).{js,jsx,ts,tsx}" ], - "testEnvironment": "jest-environment-jsdom", + "testEnvironment": "jest-fixed-jsdom", "transform": { "^.+\\.(js|jsx|ts|tsx)$": "babel-jest" }, diff --git a/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx b/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx index 811eef16a..68dd3412c 100644 --- a/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx +++ b/src/cmem/ActivityControl/ActivityControlWidget.stories.tsx @@ -4,14 +4,9 @@ import { OverlaysProvider } from "@blueprintjs/core"; import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../.storybook/helpers"; -import { - ActivityControlWidget, - ActivityControlWidgetAction, - IconButton, - SimpleDialog, - Tag, - TagList, -} from "../../../index"; +import { IconButton, SimpleDialog, Tag, TagList } from "../../components"; + +import { ActivityControlWidget, ActivityControlWidgetAction } from "./ActivityControlWidget"; export default { title: "Cmem/ActivityControlWidget", diff --git a/src/cmem/ActivityControl/ActivityControlWidget.tsx b/src/cmem/ActivityControl/ActivityControlWidget.tsx index 69d893652..f1cd91773 100644 --- a/src/cmem/ActivityControl/ActivityControlWidget.tsx +++ b/src/cmem/ActivityControl/ActivityControlWidget.tsx @@ -1,12 +1,5 @@ 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 { Card, ContextMenu, @@ -21,7 +14,14 @@ import { ProgressBar, Spinner, Tooltip, -} from "../../index"; +} from "../../components"; +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"; export interface ActivityControlWidgetProps extends TestableComponent { /** @@ -212,11 +212,7 @@ export function ActivityControlWidget(props: ActivityControlWidgetProps) { activityActions.map((action, idx) => { return ( diff --git a/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx b/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx index 2497e7bdc..1a8622ad7 100644 --- a/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx +++ b/src/cmem/ActivityControl/ActivityExecutionErrorReportModal.tsx @@ -1,6 +1,8 @@ -import React, { useState } from "react"; - -import { Button, HtmlContentBlock, IconButton, SimpleDialog } from "../../index"; +import React, {useState} from "react"; +import SimpleDialog from "../../components/Dialog/SimpleDialog"; +import IconButton from "../../components/Icon/IconButton"; +import Button from "../../components/Button/Button"; +import HtmlContentBlock from "../../components/Typography/HtmlContentBlock"; interface ActivityExecutionErrorReportModalProps { // Title of the modal diff --git a/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx b/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx index 26b214ab1..aa3462e35 100644 --- a/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx +++ b/src/cmem/ContentBlobToggler/ContentBlobToggler.tsx @@ -1,6 +1,8 @@ import React, { useState } from "react"; -import { Link, Spacing } from "../../index"; +import Link from "../../components/Link/Link"; +import Spacing from "../../components/Separation/Spacing"; +import InlineText from "../../components/Typography/InlineText"; export interface ContentBlobTogglerProps extends React.HTMLAttributes { /** @@ -31,6 +33,10 @@ export interface ContentBlobTogglerProps extends React.HTMLAttributes { + const handlerToggleView = (event: React.MouseEvent) => { event.preventDefault(); event.stopPropagation(); setViewState(!isExtended); }; - return ( + const tooglerDisplay = (
{!isExtended ? ( <> {previewContent} {enableToggler && ( <> - {" "}…{" "} + {" "} + …{" "} { + onClick={(e: React.MouseEvent) => { handlerToggleView(e); }} > @@ -76,11 +84,11 @@ export function ContentBlobToggler({ {fullviewContent} {enableToggler && (
- + {forceInline ? <> : } { + onClick={(e: React.MouseEvent) => { handlerToggleView(e); }} > @@ -92,4 +100,6 @@ export function ContentBlobToggler({ )}
); + + return forceInline ? {tooglerDisplay} : tooglerDisplay; } diff --git a/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx b/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx index e5ec7a796..836526240 100644 --- a/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx +++ b/src/cmem/ContentBlobToggler/StringPreviewContentBlobToggler.tsx @@ -1,6 +1,9 @@ import React from "react"; +import {ContentBlobToggler, ContentBlobTogglerProps} from "./ContentBlobToggler"; +import {Markdown} from "../markdown/Markdown"; +import {utils} from "../../common"; +import InlineText from "../../components/Typography/InlineText"; -import { ContentBlobToggler, ContentBlobTogglerProps, InlineText, Markdown, utils } from "./../../index"; export interface StringPreviewContentBlobTogglerProps extends Omit { @@ -54,6 +57,7 @@ export function StringPreviewContentBlobToggler({ allowedHtmlElementsInPreview, noTogglerContentSuffix, firstNonEmptyLineOnly, + ...otherContentBlobTogglerProps }: StringPreviewContentBlobTogglerProps) { // need to test `firstNonEmptyLineOnly` until property is removed const useOnlyTest: StringPreviewContentBlobTogglerProps["useOnly"] = firstNonEmptyLineOnly @@ -105,6 +109,7 @@ export function StringPreviewContentBlobToggler({ fullviewContent={fullviewContent} startExtended={startExtended} enableToggler={enableToggler} + {...otherContentBlobTogglerProps} /> ); } diff --git a/src/cmem/markdown/Markdown.tsx b/src/cmem/markdown/Markdown.tsx index 7544d8f95..1821f1ef5 100644 --- a/src/cmem/markdown/Markdown.tsx +++ b/src/cmem/markdown/Markdown.tsx @@ -8,8 +8,9 @@ import { remarkDefinitionList } from "remark-definition-list"; import remarkGfm from "remark-gfm"; import { PluggableList } from "unified"; +import { TestableComponent } from "../../components"; +import { HtmlContentBlock, HtmlContentBlockProps } from "../../components/Typography"; import { CLASSPREFIX as eccgui } from "../../configuration/constants"; -import { HtmlContentBlock, HtmlContentBlockProps, TestableComponent } from "../../index"; export interface MarkdownProps extends TestableComponent { children: string; diff --git a/src/components/Accordion/Stories/AccordionItem.stories.tsx b/src/components/Accordion/Stories/AccordionItem.stories.tsx index 12e2bdc9b..54a4a4309 100644 --- a/src/components/Accordion/Stories/AccordionItem.stories.tsx +++ b/src/components/Accordion/Stories/AccordionItem.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { Accordion, AccordionItem, HtmlContentBlock } from "../../../../index"; +import { Accordion, AccordionItem, HtmlContentBlock } from "../../../components"; export default { title: "Components/Accordion/AccordionItem", diff --git a/src/components/Application/_header.scss b/src/components/Application/_header.scss index 27d7fd492..0a13abb06 100644 --- a/src/components/Application/_header.scss +++ b/src/components/Application/_header.scss @@ -52,19 +52,22 @@ $shell-header-icon-03: $eccgui-color-applicationheader-text !default; /// Item link $shell-header-link: $blue-60 !default; +/// Height +$shell-header-height: mini-units(8) !default; + // load library sub component @import "~@carbon/react/scss/components/ui-shell/header/index"; // tweak original layout .#{$prefix}--header { - height: mini-units(8); + height: $shell-header-height; } .#{$prefix}--header__action, .#{$prefix}--header__action.#{$prefix}--btn--icon-only { - width: mini-units(8); - height: mini-units(8); + width: $shell-header-height; + height: $shell-header-height; padding-block-start: 0; background-color: transparent; @@ -128,7 +131,7 @@ span.#{$prefix}--header__name { } .#{$prefix}--header__menu .#{$prefix}--header__menu-item { - height: mini-units(8); + height: $shell-header-height; } // tweak original colors (as long as config does not work properly) @@ -255,15 +258,15 @@ a.#{$prefix}--header__menu-item:focus > svg { // adjust position of all other modal dialogs .#{$ns}-dialog-container { - top: mini-units(8); - left: mini-units(8); - width: calc(100% - #{mini-units(8)}); - min-height: calc(100% - #{mini-units(8)}); + top: $shell-header-height; + left: $shell-header-height; + width: calc(100% - #{$shell-header-height}); + min-height: calc(100% - #{$shell-header-height}); } .#{$eccgui}-dialog__wrapper { - max-width: calc(100vw - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace}); - max-height: calc(100vh - #{mini-units(8)} - #{2 * $eccgui-size-block-whitespace}); + max-width: calc(100vw - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace}); + max-height: calc(100vh - #{$shell-header-height} - #{2 * $eccgui-size-block-whitespace}); margin: 0; } } diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx index 91167e4b1..a55cc986b 100644 --- a/src/components/Badge/Badge.stories.tsx +++ b/src/components/Badge/Badge.stories.tsx @@ -3,7 +3,7 @@ import { LogoReact } from "@carbon/icons-react"; import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../.storybook/helpers"; -import { Badge, Icon, TestIcon } from "../../../index"; +import { Badge, Icon, TestIcon } from "../../components"; export default { title: "Components/Badge", diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx index fcf253924..7efb0d020 100644 --- a/src/components/Button/Button.tsx +++ b/src/components/Button/Button.tsx @@ -104,13 +104,18 @@ export const Button = ({ const ButtonType = restProps.href ? BlueprintAnchorButton : BlueprintButton; + const iconSize = { + small: restProps["size"] === "small", + large: restProps["size"] === "large", + }; + const button = ( : icon} - rightIcon={typeof rightIcon === "string" ? : rightIcon} + icon={typeof icon === "string" ? : icon} + rightIcon={typeof rightIcon === "string" ? : rightIcon} > {children} {badge && ( diff --git a/src/components/Card/stories/Card.stories.tsx b/src/components/Card/stories/Card.stories.tsx index 735088c57..46f4becd8 100644 --- a/src/components/Card/stories/Card.stories.tsx +++ b/src/components/Card/stories/Card.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../../.storybook/helpers"; -import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../../index"; +import { Card, CardActions, CardContent, CardHeader, CardOptions, CardTitle, Divider } from "../../../components"; import { Default as CardActionsExample } from "./CardActions.stories"; import { Default as CardContentExample } from "./CardContent.stories"; diff --git a/src/components/Checkbox/Stories/Checkbox.stories.tsx b/src/components/Checkbox/Stories/Checkbox.stories.tsx index 5027bea5b..930c40eb5 100644 --- a/src/components/Checkbox/Stories/Checkbox.stories.tsx +++ b/src/components/Checkbox/Stories/Checkbox.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { Checkbox, HtmlContentBlock } from "../../../../index"; +import { Checkbox, HtmlContentBlock } from "../../../components"; export default { title: "Forms/Checkbox", diff --git a/src/components/ContentGroup/ContentGroup.stories.tsx b/src/components/ContentGroup/ContentGroup.stories.tsx index bf524e9b8..26182bf1d 100644 --- a/src/components/ContentGroup/ContentGroup.stories.tsx +++ b/src/components/ContentGroup/ContentGroup.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../../index"; +import { Badge, ContentGroup, HtmlContentBlock, IconButton, Tag } from "../../components"; export default { title: "Components/ContentGroup", diff --git a/src/components/ContentGroup/ContentGroup.tsx b/src/components/ContentGroup/ContentGroup.tsx index 4ce4172db..a98768302 100644 --- a/src/components/ContentGroup/ContentGroup.tsx +++ b/src/components/ContentGroup/ContentGroup.tsx @@ -2,8 +2,6 @@ import React from "react"; import classNames from "classnames"; import Color from "color"; -import { TestableComponent } from "../../components/interfaces"; -import { CLASSPREFIX as eccgui } from "../../configuration/constants"; import { Divider, Icon, @@ -17,7 +15,9 @@ import { Toolbar, ToolbarSection, Tooltip, -} from "../index"; +} from "../../components"; +import { TestableComponent } from "../../components/interfaces"; +import { CLASSPREFIX as eccgui } from "../../configuration/constants"; export interface ContentGroupProps extends Omit, "title">, TestableComponent { /** diff --git a/src/components/ContextOverlay/ContextMenu.tsx b/src/components/ContextOverlay/ContextMenu.tsx index c51ca0b33..d0ec4bf39 100644 --- a/src/components/ContextOverlay/ContextMenu.tsx +++ b/src/components/ContextOverlay/ContextMenu.tsx @@ -2,7 +2,7 @@ import React, { ReactElement } from "react"; import { CLASSPREFIX as eccgui } from "../../configuration/constants"; import { ValidIconName } from "../Icon/canonicalIconNames"; -import IconButton from "../Icon/IconButton"; +import { IconButton, IconButtonProps } from "../Icon/IconButton"; import { TestableComponent } from "../interfaces"; import Menu from "../Menu/Menu"; @@ -28,8 +28,13 @@ export interface ContextMenuProps extends TestableComponent { * Text displayed as title or tooltip on toggler element. */ togglerText?: string; + /** + * Allow to de- and increase the size of the default toggler button. + */ + togglerSize?: IconButtonProps["size"]; /** * Toggler element is displayed larger than normal. + * @deprecated (v26) use `togglerSize="large" instead */ togglerLarge?: boolean; /** @@ -62,6 +67,7 @@ export const ContextMenu = ({ contextOverlayProps, disabled, togglerLarge = false, + togglerSize, /* FIXME: The Tooltip component can interfere with the opened menu, since it is implemented via portal and may cover the menu, so by default we use the title attribute instead of Tooltip. */ tooltipAsTitle = true, @@ -76,7 +82,7 @@ export const ContextMenu = ({ tooltipAsTitle={tooltipAsTitle} name={[togglerElement]} text={togglerText} - large={togglerLarge} + size={togglerLarge ? "large" : togglerSize} disabled={!!disabled} data-test-id={dataTestId ?? undefined} data-testid={dataTestid ?? undefined} diff --git a/src/components/Dialog/stories/Modal.stories.tsx b/src/components/Dialog/stories/Modal.stories.tsx index c306611c1..f11480f3b 100644 --- a/src/components/Dialog/stories/Modal.stories.tsx +++ b/src/components/Dialog/stories/Modal.stories.tsx @@ -5,7 +5,7 @@ import { fn } from "@storybook/test"; import { SimpleCard } from "../../Card/stories/Card.stories"; -import { Card, Modal } from "./../../../../index"; +import { Card, Modal } from "./../../../components"; export default { title: "Components/Dialog/Modal", diff --git a/src/components/Form/Stories/FieldItem.stories.tsx b/src/components/Form/Stories/FieldItem.stories.tsx index 00379ae5c..5c7dfc1b3 100644 --- a/src/components/Form/Stories/FieldItem.stories.tsx +++ b/src/components/Form/Stories/FieldItem.stories.tsx @@ -3,7 +3,7 @@ import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../../.storybook/helpers"; -import { FieldItem, TextField } from "../../../../index"; +import { FieldItem, TextField } from "../../../components"; export default { title: "Forms/FieldItem", diff --git a/src/components/Form/Stories/FieldSet.stories.tsx b/src/components/Form/Stories/FieldSet.stories.tsx index 7bd097b6d..c02b854e3 100644 --- a/src/components/Form/Stories/FieldSet.stories.tsx +++ b/src/components/Form/Stories/FieldSet.stories.tsx @@ -3,7 +3,7 @@ import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../../.storybook/helpers"; -import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../../index"; +import { FieldItem, FieldItemRow, FieldSet, TitleSubsection } from "../../../components"; import { Default as SimpleFieldItemExample } from "./FieldItem.stories"; import { Default as SimpleFieldItemRowExample } from "./FieldItemRow.stories"; diff --git a/src/components/Grid/stories/GridColumn.stories.tsx b/src/components/Grid/stories/GridColumn.stories.tsx index 3d9cde38b..448c64fa8 100644 --- a/src/components/Grid/stories/GridColumn.stories.tsx +++ b/src/components/Grid/stories/GridColumn.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../../index"; +import { Grid, GridColumn, GridRow, HtmlContentBlock } from "../../../components"; export default { title: "Components/Grid/Column", diff --git a/src/components/Grid/stories/GridRow.stories.tsx b/src/components/Grid/stories/GridRow.stories.tsx index 28ed25677..236ddfd9d 100644 --- a/src/components/Grid/stories/GridRow.stories.tsx +++ b/src/components/Grid/stories/GridRow.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Meta, StoryFn } from "@storybook/react"; -import { Grid, GridColumn, GridRow } from "../../../../index"; +import { Grid, GridColumn, GridRow } from "../../../components"; import { Default as ColumnExample } from "./GridColumn.stories"; diff --git a/src/components/Icon/IconButton.tsx b/src/components/Icon/IconButton.tsx index 969ffde20..1be9f8854 100644 --- a/src/components/Icon/IconButton.tsx +++ b/src/components/Icon/IconButton.tsx @@ -54,8 +54,8 @@ export const IconButton = ({ swapPlaceholderDelay: 10, }; const iconProps = { - small: restProps.small, - large: restProps.large, + small: restProps.small || restProps["size"] === "small", + large: restProps.large || restProps["size"] === "large", tooltipText: tooltipAsTitle ? undefined : text, tooltipProps: tooltipProps ? { diff --git a/src/components/Icon/stories/IconButton.stories.tsx b/src/components/Icon/stories/IconButton.stories.tsx index 9191ca7a1..3e03695e1 100644 --- a/src/components/Icon/stories/IconButton.stories.tsx +++ b/src/components/Icon/stories/IconButton.stories.tsx @@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core"; import { LogoReact } from "@carbon/icons-react"; import { Meta, StoryFn } from "@storybook/react"; -import { IconButton, TestIcon } from "../../../../index"; +import { IconButton, TestIcon } from "../../../components"; import buttonStory from "./../../Button/Button.stories"; import canonicalIcons from "./../canonicalIconNames"; diff --git a/src/components/Icon/stories/TestIcon.stories.tsx b/src/components/Icon/stories/TestIcon.stories.tsx index 2393e2662..708a50231 100644 --- a/src/components/Icon/stories/TestIcon.stories.tsx +++ b/src/components/Icon/stories/TestIcon.stories.tsx @@ -3,8 +3,8 @@ import { OverlaysProvider } from "@blueprintjs/core"; import { LogoReact } from "@carbon/icons-react"; import { Meta, StoryFn } from "@storybook/react"; -import { TestIcon } from "../../../../index"; import { Definitions } from "../../../common/Intent"; +import { TestIcon } from "../TestIcon"; export default { title: "Components/Icon/TestIcon", diff --git a/src/components/Menu/Stories/MenuItem.stories.tsx b/src/components/Menu/Stories/MenuItem.stories.tsx index 362f67cc4..a66422a30 100644 --- a/src/components/Menu/Stories/MenuItem.stories.tsx +++ b/src/components/Menu/Stories/MenuItem.stories.tsx @@ -3,7 +3,7 @@ import { OverlaysProvider } from "@blueprintjs/core"; import { LogoReact } from "@carbon/icons-react"; import { Meta, StoryFn } from "@storybook/react"; -import { Menu, MenuItem, TestIcon } from "../../../../index"; +import { Menu, MenuItem, TestIcon } from "../../../components"; import canonicalIcons from "./../../Icon/canonicalIconNames"; diff --git a/src/components/MultiSelect/MultiSelect.tsx b/src/components/MultiSelect/MultiSelect.tsx index 3766baf65..72af76fa2 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -10,7 +10,15 @@ import { removeExtraSpaces } from "../../common/utils/stringUtils"; import { CLASSPREFIX as eccgui } from "../../configuration/constants"; import { TestableComponent } from "../interfaces"; -import { ContextOverlayProps, Highlighter, IconButton, MenuItem, OverflowText, Spinner } from "./../../index"; +import { + ContextOverlayProps, + Highlighter, + highlighterUtils, + IconButton, + MenuItem, + OverflowText, + Spinner +} from "./../../index"; export interface MultiSuggestFieldSelectionProps { newlySelected?: T; @@ -18,9 +26,10 @@ export interface MultiSuggestFieldSelectionProps { createdItems: Partial[]; } -interface MultiSuggestFieldCommonProps +export interface MultiSuggestFieldCommonProps extends TestableComponent, - Pick, "items" | "placeholder" | "openOnKeyDown"> { + Pick, "items" | "placeholder" | "openOnKeyDown" | "noResults" | "createNewItemRenderer">, + Partial, "itemRenderer">> { /** * Additional class name, space separated. */ @@ -70,9 +79,11 @@ interface MultiSuggestFieldCommonProps */ newItemCreationText?: string; /** - * Allows to creates new item from a given query. If this is not provided then no new items can be created. + * Allows to create new item from a given query. If this is not provided then no new items can be created. */ createNewItemFromQuery?: (query: string) => T; + /** Validates if a new item can be created from the current query string. */ + isValidNewOption?: (query: string) => boolean; /** * Items that were newly created and not taken from the list will be post-fixed with this string. */ @@ -103,9 +114,20 @@ interface MultiSuggestFieldCommonProps wrapperProps?: React.HTMLAttributes; /** * Function that allows us to filter values from the option list. - * If not provided, values are filtered by their labels + * + * @deprecated (v26) use `searchListPredicate` instead. */ searchPredicate?: (item: T, query: string) => boolean; + + /** + * Returns the filtered the search option list. + * By default, a case-insensitive multi-word filtering is applied. + * + * @param items The options. + * @param query The search query. + */ + searchListPredicate?: (items: T[], query: string) => T[] + /** * Limits the height of the input target plus its dropdown menu when it is opened. * Need to be a `number not greater than 100` (as `vh`, a unit describing a length relative to the viewport height) or `true` (equals 100). @@ -159,6 +181,7 @@ export function MultiSuggestField({ newItemPostfix = " (new item)", disabled, createNewItemFromQuery, + isValidNewOption, requestDelay = 0, clearQueryOnSelection = false, className, @@ -166,13 +189,14 @@ export function MultiSuggestField({ "data-testid": dataTestid, wrapperProps, searchPredicate, + searchListPredicate, limitHeightOpened, intent, ...otherMultiSelectProps }: MultiSuggestFieldProps) { // Options created by a user const createdItems = useRef([]); - // Options passed ouside (f.e. from the backend) + // Options passed outside (f.e. from the backend) const [externalItems, setExternalItems] = React.useState([...items]); // All options (created and passed) that match the query const [filteredItems, setFilteredItems] = React.useState([]); @@ -264,9 +288,14 @@ export function MultiSuggestField({ setSelectedItems(filteredItems); }; - const defaultFilterPredicate = (item: T, query: string) => { - return itemLabel(item).toLowerCase().includes(query); - }; + /** Does a case-insensitive multi-word search in the item label. */ + const defaultSearchListPredicate = (items: T[], query: string): T[] => { + const searchWords = highlighterUtils.extractSearchWords(query, true); + return items.filter(item => { + const searchIn = itemLabel(item).toLowerCase() + return highlighterUtils.matchesAllWords(searchIn, searchWords); + }) + } /** * selects and deselects an item from selection list @@ -305,10 +334,17 @@ export function MultiSuggestField({ if (requestState.current.query === query) { // Only use most recent request const outsideOptions = [...(resultFromQuery ?? externalItems)]; - const filter = searchPredicate ?? defaultFilterPredicate; + let itemFilter = defaultSearchListPredicate + if(searchListPredicate) { + itemFilter = searchListPredicate + } else if(searchPredicate) { + itemFilter = (items, query) => { + return items.filter((item) => searchPredicate(item, query)) + } + } setFilteredItems( - [...outsideOptions, ...createdItems.current].filter((item) => filter(item, query.toLowerCase())) + itemFilter([...outsideOptions, ...createdItems.current], query) ); setShowSpinner(false); } @@ -386,7 +422,9 @@ export function MultiSuggestField({ */ const handleOnKeyUp = (event: React.KeyboardEvent) => { if (event.key === "Enter" && !filteredItems.length && !!requestState.current.query && createNewItemFromQuery) { - createNewItem(requestState.current.query); + if(!isValidNewOption || isValidNewOption(requestState.current.query)) { + createNewItem(requestState.current.query); + } } inputRef.current?.focus(); }; @@ -402,7 +440,11 @@ export function MultiSuggestField({ if (focusedItem) { onItemSelect(focusedItem); } else { - onItemSelect(createNewItem(requestState.current.query)); + if (!isValidNewOption || isValidNewOption(requestState.current.query)) { + onItemSelect(createNewItem(requestState.current.query)); + } else { + return + } } requestState.current.query = ""; setTimeout(() => inputRef.current?.focus()); @@ -417,7 +459,7 @@ export function MultiSuggestField({ * @returns */ const newItemRenderer = (label: string, active: boolean, handleClick: React.MouseEventHandler) => { - if (!createNewItemFromQuery) return undefined; + if (!createNewItemFromQuery || isValidNewOption && !isValidNewOption(label)) return undefined; const clickHandler = (e: React.MouseEvent) => { createNewItem(label); handleClick(e); @@ -459,7 +501,6 @@ export function MultiSuggestField({ ? "Search for item, or enter term to create new one..." : undefined } - {...otherMultiSelectProps} query={requestState.current.query} onQueryChange={onQueryChange} items={filteredItems} @@ -528,6 +569,7 @@ export function MultiSuggestField({ : undefined, } as BlueprintMultiSelectProps["popoverContentProps"] } + {...otherMultiSelectProps} /> ); diff --git a/src/components/NotAvailable/NotAvailable.stories.tsx b/src/components/NotAvailable/NotAvailable.stories.tsx new file mode 100644 index 000000000..29dde1e3e --- /dev/null +++ b/src/components/NotAvailable/NotAvailable.stories.tsx @@ -0,0 +1,15 @@ +import React from "react"; +import { Meta, StoryFn } from "@storybook/react"; + +import { NotAvailable } from "../../../index"; + +export default { + title: "Components/NotAvailable", + component: NotAvailable, + argTypes: {}, +} as Meta; + +const TemplateFull: StoryFn = (args) => ; + +export const Default = TemplateFull.bind({}); +Default.args = {}; diff --git a/src/components/NotAvailable/NotAvailable.tsx b/src/components/NotAvailable/NotAvailable.tsx new file mode 100644 index 000000000..47b14adbc --- /dev/null +++ b/src/components/NotAvailable/NotAvailable.tsx @@ -0,0 +1,70 @@ +import React from "react"; + +import { + CLASSPREFIX as eccgui, + Tag, + TagProps, + Tooltip, + TooltipProps, +} from "../../../index"; +import { TestableComponent } from "../interfaces"; +export interface NotAvailableProps extends TestableComponent, Pick, Pick { + /** + * Text displayed by the element. + */ + label?: TagProps["children"]; + /** + * Add a tooltip to the element. + * You need to set an empty string `""` to remove it. + */ + tooltip?: TooltipProps["content"]; + /** + * Specify the display of the used `Tag` component. + */ + tagProps?: Omit; + /** + * Specify the display of the used `Tooltip` component. + */ + tooltipProps?: Omit; + /** + * Do not use the `Tag` component for the display. + * The `intent` state can be displayed only on the tooltip then. + */ + noTag?: boolean; +} + +/** + * Simple placeholder element that can be used to display info about missing data. + */ +export const NotAvailable = ({ + label = "n/a", + tooltip = "not available", + icon, + intent, + tagProps, + tooltipProps, + className, + noTag = false, + ...otherProps +}: NotAvailableProps) => { + const defaultTagProps : TagProps = { icon, intent, emphasis: "weaker", className: `${eccgui}-notavailable` + className ? ` ${className}` : "" }; + const naElement = noTag === false ? ( + + { label ?? "n/a"} + + ) : <>{ label ?? "n/a"}; + const defaultTooltipProps : TooltipProps = { + children: naElement, + content: tooltip, + intent, + addIndicator: noTag, + }; + + return tooltip ? : naElement; +}; + +export default NotAvailable; diff --git a/src/components/Notification/Notification.stories.tsx b/src/components/Notification/Notification.stories.tsx index 6a346f066..9bc5c6579 100644 --- a/src/components/Notification/Notification.stories.tsx +++ b/src/components/Notification/Notification.stories.tsx @@ -3,7 +3,8 @@ import { LoremIpsum, loremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../.storybook/helpers"; -import { Button, HtmlContentBlock, Markdown, Notification, Spacing } from "../../../index"; +import { Markdown } from "../../cmem"; +import { Button, HtmlContentBlock, Notification, Spacing } from "../../components"; export default { title: "Components/Notification", diff --git a/src/components/OverviewItem/stories/OverviewItem.stories.tsx b/src/components/OverviewItem/stories/OverviewItem.stories.tsx index 7e0637486..b839a31ad 100644 --- a/src/components/OverviewItem/stories/OverviewItem.stories.tsx +++ b/src/components/OverviewItem/stories/OverviewItem.stories.tsx @@ -14,7 +14,7 @@ import { OverviewItemLine, Tag, TagList, -} from "./../../../../index"; +} from "./../../../components"; import { FullExample as OtherDepictionExample } from "./../../Depiction/stories/Depiction.stories"; import { Default as ActionsExample } from "./OverviewItemActions.stories"; import { AutoTransform as DepictionExample } from "./OverviewItemDepiction.stories"; diff --git a/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx b/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx index 2cfef4478..f61f68dd4 100644 --- a/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx +++ b/src/components/OverviewItem/stories/OverviewItemActions.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Meta, StoryFn } from "@storybook/react"; -import { Button, ContextMenu, IconButton, OverviewItemActions } from "./../../../../index"; +import { Button, ContextMenu, IconButton, OverviewItemActions } from "./../../../components"; export default { title: "Components/OverviewItem/OverviewItemActions", diff --git a/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx b/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx index 945843f15..3616cf835 100644 --- a/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx +++ b/src/components/OverviewItem/stories/OverviewItemDepiction.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react"; import png16to9 from "../../Depiction/stories/test-16to9.png"; -import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../../index"; +import { Depiction, Icon, OverviewItem, OverviewItemDepiction } from "./../../../components"; import { FullExample as DepictionExample } from "./../../Depiction/stories/Depiction.stories"; export default { diff --git a/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx b/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx index 6d1d98fa6..6410dd8e9 100644 --- a/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx +++ b/src/components/OverviewItem/stories/OverviewItemDescription.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { OverviewItemDescription, OverviewItemLine } from "./../../../../index"; +import { OverviewItemDescription, OverviewItemLine } from "./../../../components"; export default { title: "Components/OverviewItem/OverviewItemDescription", diff --git a/src/components/RadioButton/Stories/RadioButton.stories.tsx b/src/components/RadioButton/Stories/RadioButton.stories.tsx index 820ad1e3b..b365690bc 100644 --- a/src/components/RadioButton/Stories/RadioButton.stories.tsx +++ b/src/components/RadioButton/Stories/RadioButton.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { HtmlContentBlock, RadioButton } from "../../../../index"; +import { HtmlContentBlock, RadioButton } from "../../../components"; export default { title: "Forms/RadioButton", diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx index c7e8e5697..fd5683f07 100644 --- a/src/components/Select/Select.tsx +++ b/src/components/Select/Select.tsx @@ -1,11 +1,13 @@ import React from "react"; -import { Classes as BlueprintClasses, InputGroupProps } from "@blueprintjs/core"; -import { Select as BlueprintSelect, SelectProps as BlueprintSelectProps } from "@blueprintjs/select"; +import {Classes as BlueprintClasses, InputGroupProps} from "@blueprintjs/core"; +import {Select as BlueprintSelect, SelectProps as BlueprintSelectProps} from "@blueprintjs/select"; -import { CLASSPREFIX as eccgui } from "../../configuration/constants"; -import { TestableComponent } from "../interfaces"; - -import { Button, ButtonProps, ContextOverlayProps, Icon, OverflowText } from "./../../index"; +import {CLASSPREFIX as eccgui} from "../../configuration/constants"; +import {TestableComponent} from "../interfaces"; +import {Button, ButtonProps} from "../Button/Button"; +import {ContextOverlayProps} from "../ContextOverlay"; +import OverflowText from "../Typography/OverflowText"; +import Icon from "../Icon/Icon"; export interface SelectProps extends TestableComponent, diff --git a/src/components/Table/TableExpandRow.tsx b/src/components/Table/TableExpandRow.tsx index 97c02f75f..07d518630 100644 --- a/src/components/Table/TableExpandRow.tsx +++ b/src/components/Table/TableExpandRow.tsx @@ -6,7 +6,7 @@ import { usePrefix as carbonPrefix } from "@carbon/react"; import { CLASSPREFIX as eccgui } from "../../configuration/constants"; import IconButton from "./../Icon/IconButton"; -import { TableCell } from "./index"; +import TableCell from "./TableCell"; // workaround to get type/interface type CarbonTableExpandRowProps = React.ComponentProps; diff --git a/src/components/Tag/stories/Tag.stories.tsx b/src/components/Tag/stories/Tag.stories.tsx index 423757ae1..6373fa2b7 100644 --- a/src/components/Tag/stories/Tag.stories.tsx +++ b/src/components/Tag/stories/Tag.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../../.storybook/helpers"; -import { Tag } from "./../../../../index"; +import { Tag } from "./../../../components"; export default { title: "Components/Tag", diff --git a/src/components/Tag/stories/TagList.stories.tsx b/src/components/Tag/stories/TagList.stories.tsx index 27221c360..93fdc16d8 100644 --- a/src/components/Tag/stories/TagList.stories.tsx +++ b/src/components/Tag/stories/TagList.stories.tsx @@ -1,7 +1,7 @@ import React from "react"; import { Meta, StoryFn } from "@storybook/react"; -import { Tag, TagList } from "./../../../../index"; +import { Tag, TagList } from "./../../../components"; export default { title: "Components/Tag", diff --git a/src/components/Tag/tag.scss b/src/components/Tag/tag.scss index 8abfb2e12..43f05b959 100644 --- a/src/components/Tag/tag.scss +++ b/src/components/Tag/tag.scss @@ -30,8 +30,6 @@ $tag-round-adjustment: 0 !default; @import "~@blueprintjs/core/src/components/tag/tag"; .#{$eccgui}-tag__item { - --eccgui-tag-border-width: 1px; - flex-grow: 0; flex-shrink: 0; min-width: calc(#{$tag-height} - 2px); @@ -141,6 +139,8 @@ $tag-round-adjustment: 0 !default; } .#{$ns}-tag { + --eccgui-tag-border-width: 1px; + border-style: solid; border-width: var(--eccgui-tag-border-width); diff --git a/src/components/TextField/stories/TextArea.stories.tsx b/src/components/TextField/stories/TextArea.stories.tsx index 24bfd90ad..7f3cfcdfc 100644 --- a/src/components/TextField/stories/TextArea.stories.tsx +++ b/src/components/TextField/stories/TextArea.stories.tsx @@ -3,7 +3,7 @@ import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../../.storybook/helpers"; -import { Button, IconButton, TextArea } from "./../../../../index"; +import { Button, IconButton, TextArea } from "./../../../components"; type TextAreaType = typeof TextArea; export default { diff --git a/src/components/TextField/stories/TextField.stories.tsx b/src/components/TextField/stories/TextField.stories.tsx index 8a2907adb..56ca2ee44 100644 --- a/src/components/TextField/stories/TextField.stories.tsx +++ b/src/components/TextField/stories/TextField.stories.tsx @@ -3,9 +3,7 @@ import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../../.storybook/helpers"; import characters from "../../../common/utils/characters"; -import { TextFieldProps } from "../TextField"; - -import { TextField } from "./../../../../index"; +import { TextField, TextFieldProps } from "../TextField"; export default { title: "Forms/TextField", diff --git a/src/components/TextReducer/TextReducer.stories.tsx b/src/components/TextReducer/TextReducer.stories.tsx index 48aa04684..6280afcca 100644 --- a/src/components/TextReducer/TextReducer.stories.tsx +++ b/src/components/TextReducer/TextReducer.stories.tsx @@ -2,7 +2,10 @@ import React from "react"; import { LoremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; -import { HtmlContentBlock, Markdown, TextReducer } from "../../../index"; +import { Markdown } from "../../cmem/markdown/Markdown"; +import { HtmlContentBlock } from "../Typography"; + +import { TextReducer } from "./TextReducer"; export default { title: "Components/TextReducer", diff --git a/src/components/Typography/typography.scss b/src/components/Typography/typography.scss index 87d20c595..623e47971 100644 --- a/src/components/Typography/typography.scss +++ b/src/components/Typography/typography.scss @@ -63,12 +63,14 @@ mark { line-height: $eccgui-size-typo-text-lineheight; } -.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small { +.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--small, +.#{$eccgui}-typography--small { font-size: $eccgui-size-typo-caption; line-height: $eccgui-size-typo-caption-lineheight; } -.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large { +.#{$eccgui}-typography__contentblock.#{$eccgui}-typography--large, +.#{$eccgui}-typography--large { font-size: $eccgui-size-typo-subtitle; line-height: $eccgui-size-typo-subtitle-lineheight; } diff --git a/src/components/index.ts b/src/components/index.ts index 6f7fdf95b..5e1c496d2 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -23,6 +23,7 @@ export * from "./Link/Link"; export * from "./List/List"; export * from "./Menu"; export * from "./MultiSuggestField"; +export * from "./NotAvailable/NotAvailable"; export * from "./Notification"; export * from "./OverviewItem"; export * from "./Pagination/Pagination"; diff --git a/src/extensions/react-flow/edges/EdgeLabel.tsx b/src/extensions/react-flow/edges/EdgeLabel.tsx index 41f4a2f8b..b9af3eae5 100644 --- a/src/extensions/react-flow/edges/EdgeLabel.tsx +++ b/src/extensions/react-flow/edges/EdgeLabel.tsx @@ -1,9 +1,11 @@ -import React, { memo } from "react"; +import React, {memo} from "react"; -import { intentClassName, IntentTypes } from "../../../common/Intent"; -import { ValidIconName } from "../../../components/Icon/canonicalIconNames"; -import { CLASSPREFIX as eccgui } from "../../../configuration/constants"; -import { Depiction, DepictionProps, Icon, OverflowText } from "../../../index"; +import {intentClassName, IntentTypes} from "../../../common/Intent"; +import {ValidIconName} from "../../../components/Icon/canonicalIconNames"; +import {CLASSPREFIX as eccgui} from "../../../configuration/constants"; +import {Depiction, DepictionProps} from "../../../components/Depiction/Depiction"; +import Icon from "../../../components/Icon/Icon"; +import OverflowText from "../../../components/Typography/OverflowText"; export interface EdgeLabelProps extends React.HTMLAttributes { /** diff --git a/src/extensions/react-flow/edges/EdgeNew.tsx b/src/extensions/react-flow/edges/EdgeNew.tsx index d0096e9c9..15216890c 100644 --- a/src/extensions/react-flow/edges/EdgeNew.tsx +++ b/src/extensions/react-flow/edges/EdgeNew.tsx @@ -1,12 +1,11 @@ import React from "react"; -import { - ConnectionLineComponentProps, - ConnectionLineType, -} from "@xyflow/react"; +import {ConnectionLineComponentProps, ConnectionLineType,} from "@xyflow/react"; -import { CLASSPREFIX as eccgui } from "../../../configuration/constants"; - -import { EdgeBezier, EdgeDefaultV12Props,EdgeStep, EdgeStraight } from "./../index"; +import {CLASSPREFIX as eccgui} from "../../../configuration/constants"; +import {EdgeStep} from "./EdgeStep"; +import {EdgeStraight} from "./EdgeStraight"; +import {EdgeBezier} from "./EdgeBezier"; +import {EdgeDefaultV12Props} from "./EdgeDefaultV12"; export const EdgeNew = (edgeNewProps: ConnectionLineComponentProps) => { diff --git a/src/extensions/react-flow/edges/EdgeTools.tsx b/src/extensions/react-flow/edges/EdgeTools.tsx index 31cbc4079..b8583a33c 100644 --- a/src/extensions/react-flow/edges/EdgeTools.tsx +++ b/src/extensions/react-flow/edges/EdgeTools.tsx @@ -1,10 +1,9 @@ -import React, { memo } from "react"; -import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core"; +import React, {memo} from "react"; +import {PopoverInteractionKind as BlueprintPopoverInteractionKind} from "@blueprintjs/core"; -import { CLASSPREFIX as eccgui } from "../../../configuration/constants"; -import { ContextOverlay } from "../../../index"; +import {CLASSPREFIX as eccgui} from "../../../configuration/constants"; -import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay"; +import {ContextOverlay, ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay"; interface PosOffset { left: number; diff --git a/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx b/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx index cbe771cbf..839853df7 100644 --- a/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx +++ b/src/extensions/react-flow/edges/stories/EdgeLabel.stories.tsx @@ -3,8 +3,9 @@ import { loremIpsum } from "react-lorem-ipsum"; import { Meta, StoryFn } from "@storybook/react"; import { helpersArgTypes } from "../../../../../.storybook/helpers"; +import { EdgeLabel } from "../EdgeLabel"; -import { Badge, EdgeLabel, Icon, IconButton, OverflowText } from "./../../../../../index"; +import { Badge, Icon, IconButton, OverflowText } from "./../../../../components"; import canonicalIcons from "./../../../../components/Icon/canonicalIconNames"; export default { diff --git a/src/extensions/react-flow/handles/HandleContent.tsx b/src/extensions/react-flow/handles/HandleContent.tsx index 7738195b3..12ff14ed0 100644 --- a/src/extensions/react-flow/handles/HandleContent.tsx +++ b/src/extensions/react-flow/handles/HandleContent.tsx @@ -1,7 +1,7 @@ -import React, { memo } from "react"; +import React, {memo} from "react"; -import { CLASSPREFIX as eccgui } from "../../../configuration/constants"; -import { Tooltip, TooltipProps } from "../../../index"; +import {CLASSPREFIX as eccgui} from "../../../configuration/constants"; +import Tooltip, {TooltipProps} from "../../../components/Tooltip/Tooltip"; export interface HandleContentProps extends Omit, "className"> { /** diff --git a/src/extensions/react-flow/handles/HandleDefault.tsx b/src/extensions/react-flow/handles/HandleDefault.tsx index 0f2a492db..dfebfea63 100644 --- a/src/extensions/react-flow/handles/HandleDefault.tsx +++ b/src/extensions/react-flow/handles/HandleDefault.tsx @@ -6,10 +6,10 @@ import { Handle as HandleV12, HandleProps as ReactFlowHandleV12Props } from "@xy import { intentClassName, IntentTypes } from "../../../common/Intent"; import { CLASSPREFIX as eccgui } from "../../../configuration/constants"; -import { TooltipProps } from "../../../index"; import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport"; import { HandleContent, HandleContentProps } from "./HandleContent"; +import {TooltipProps} from "../../../components"; export type HandleCategory = "configuration" | "flexible" | "fixed" | "unknown" | "dependency"; diff --git a/src/extensions/react-flow/handles/HandleTools.tsx b/src/extensions/react-flow/handles/HandleTools.tsx index a5a85e252..37916438d 100644 --- a/src/extensions/react-flow/handles/HandleTools.tsx +++ b/src/extensions/react-flow/handles/HandleTools.tsx @@ -2,9 +2,9 @@ import React from "react"; import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core"; import { CLASSPREFIX as eccgui } from "../../../configuration/constants"; -import { ContextOverlay, TestableComponent } from "../../../index"; -import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay"; +import {ContextOverlay, ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay"; +import {TestableComponent} from "../../../components"; export interface HandleToolsProps extends Omit, diff --git a/src/extensions/react-flow/nodes/NodeContent.tsx b/src/extensions/react-flow/nodes/NodeContent.tsx index 5e023aa81..85905bef0 100644 --- a/src/extensions/react-flow/nodes/NodeContent.tsx +++ b/src/extensions/react-flow/nodes/NodeContent.tsx @@ -1,20 +1,21 @@ import React from "react"; -import { Position, useStoreState as getStoreStateFlowV9 } from "react-flow-renderer"; -import { useStore as getStoreStateFlowV12 } from "@xyflow/react"; +import {Position, useStoreState as getStoreStateFlowV9} from "react-flow-renderer"; +import {useStore as getStoreStateFlowV12} from "@xyflow/react"; import Color from "color"; import {NumberSize, Resizable, ResizeCallback} from "re-resizable"; -import { intentClassName, IntentTypes } from "../../../common/Intent"; -import { DepictionProps } from "../../../components"; -import { ValidIconName } from "../../../components/Icon/canonicalIconNames"; -import { CLASSPREFIX as eccgui } from "../../../configuration/constants"; -import { Depiction, Icon, OverflowText } from "../../../index"; -import { ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion } from "../versionsupport"; - -import { HandleDefault, HandleDefaultProps } from "./../handles/HandleDefault"; -import { NodeContentExtensionProps } from "./NodeContentExtension"; -import { NodeDefaultProps } from "./NodeDefault"; -import { NodeHighlightColor } from "./sharedTypes"; +import {intentClassName, IntentTypes} from "../../../common/Intent"; +import {Depiction, DepictionProps} from "../../../components"; +import {ValidIconName} from "../../../components/Icon/canonicalIconNames"; +import {CLASSPREFIX as eccgui} from "../../../configuration/constants"; +import {ReacFlowVersionSupportProps, ReactFlowVersions, useReactFlowVersion} from "../versionsupport"; + +import {HandleDefault, HandleDefaultProps} from "./../handles/HandleDefault"; +import {NodeContentExtensionProps} from "./NodeContentExtension"; +import {NodeDefaultProps} from "./NodeDefault"; +import {NodeHighlightColor} from "./sharedTypes"; +import Icon from "../../../components/Icon/Icon"; +import OverflowText from "../../../components/Typography/OverflowText"; /** * @deprecated (v26) use `HandleDefaultProps` diff --git a/src/extensions/react-flow/nodes/NodeDefault.tsx b/src/extensions/react-flow/nodes/NodeDefault.tsx index 5b81a076e..654dc8a39 100644 --- a/src/extensions/react-flow/nodes/NodeDefault.tsx +++ b/src/extensions/react-flow/nodes/NodeDefault.tsx @@ -2,10 +2,10 @@ import React, { memo } from "react"; import { NodeProps as ReactFlowNodeV9Props } from "react-flow-renderer"; import { NodeProps as ReactFlowNodeV12Props, Position } from "@xyflow/react"; -import { Tooltip } from "../../../index"; import { ReacFlowVersionSupportProps, useReactFlowVersion } from "../versionsupport"; import { NodeContent, NodeContentProps } from "./NodeContent"; +import Tooltip from "../../../components/Tooltip/Tooltip"; interface NodeDefaultExtendedProps extends ReacFlowVersionSupportProps { /** diff --git a/src/extensions/react-flow/nodes/NodeDefaultV12.tsx b/src/extensions/react-flow/nodes/NodeDefaultV12.tsx index b91269944..50209bcba 100644 --- a/src/extensions/react-flow/nodes/NodeDefaultV12.tsx +++ b/src/extensions/react-flow/nodes/NodeDefaultV12.tsx @@ -1,9 +1,8 @@ import React, { memo } from "react"; import { NodeProps as ReactFlowNodeProps, Position } from "react-flow-renderer"; -import { Tooltip } from "../../../index"; - import { NodeContent, NodeContentProps } from "./NodeContent"; +import Tooltip from "../../../components/Tooltip/Tooltip"; export interface NodeDefaultProps extends ReactFlowNodeProps { /** diff --git a/src/extensions/react-flow/nodes/NodeTools.tsx b/src/extensions/react-flow/nodes/NodeTools.tsx index 970f3a0ca..4852ea8cf 100644 --- a/src/extensions/react-flow/nodes/NodeTools.tsx +++ b/src/extensions/react-flow/nodes/NodeTools.tsx @@ -1,11 +1,11 @@ -import React, { memo, useEffect, useState } from "react"; -import { PopoverInteractionKind as BlueprintPopoverInteractionKind } from "@blueprintjs/core"; +import React, {memo, useEffect, useState} from "react"; +import {PopoverInteractionKind as BlueprintPopoverInteractionKind} from "@blueprintjs/core"; -import { ValidIconName } from "../../../components/Icon/canonicalIconNames"; -import { CLASSPREFIX as eccgui } from "../../../configuration/constants"; -import { ContextOverlay, IconButton } from "../../../index"; +import {ValidIconName} from "../../../components/Icon/canonicalIconNames"; +import {CLASSPREFIX as eccgui} from "../../../configuration/constants"; -import { ContextOverlayProps } from "./../../../components/ContextOverlay/ContextOverlay"; +import ContextOverlay, {ContextOverlayProps} from "./../../../components/ContextOverlay/ContextOverlay"; +import IconButton from "../../../components/Icon/IconButton"; // Functions regarding the menu that can be called from the outside export interface NodeToolsMenuFunctions { diff --git a/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx b/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx index 1e591088a..865a97669 100644 --- a/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx +++ b/src/extensions/react-flow/nodes/stories/NodeContent.stories.tsx @@ -12,12 +12,14 @@ import { HtmlContentBlock, IconButton, MenuItem, - NodeContent, - NodeContentExtension, OverflowText, Tag, TagList, -} from "./../../../../index"; +} from "./../../../../components"; +import { + NodeContent, + NodeContentExtension, +} from "./../../../../extensions"; import { Default as ContentExtensionExample, SlideOutOfNode as ContentExtensionExampleSlideOut, diff --git a/src/test/setupTests.js b/src/test/setupTests.js index 69bff8a25..ee1400ec4 100644 --- a/src/test/setupTests.js +++ b/src/test/setupTests.js @@ -1,12 +1,6 @@ import "regenerator-runtime/runtime"; -import { TextEncoder, TextDecoder } from "util"; -// Polyfill TextEncoder/TextDecoder for React 18 -global.TextEncoder = TextEncoder; -global.TextDecoder = TextDecoder; - - -if (window.document) { +if (typeof window !== "undefined" && window.document) { window.document.body.createTextRange = function () { return { setEnd: function () {}, diff --git a/yarn.lock b/yarn.lock index e4ba0860c..b0665b034 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8195,6 +8195,11 @@ jest-environment-node@30.2.0: jest-util "30.2.0" jest-validate "30.2.0" +jest-fixed-jsdom@^0.0.11: + version "0.0.11" + resolved "https://registry.yarnpkg.com/jest-fixed-jsdom/-/jest-fixed-jsdom-0.0.11.tgz#67b5d5c4e9821bfb1e09a43139bfb0b9f4ec4f18" + integrity sha512-3UkjgM79APnmLVDnelrxdwz4oybD5qw6NLyayl7iCX8C8tJHeqjL9fmNrRlIrNiVJSXkF5t9ZPJ+xlM0kSwwYg== + jest-haste-map@30.2.0: version "30.2.0" resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-30.2.0.tgz#808e3889f288603ac70ff0ac047598345a66022e"