diff --git a/CHANGELOG.md b/CHANGELOG.md index bfd0b1c67..14305c6c8 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,6 +35,17 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - `state-declined-all` - `` - `MultiSuggestFieldSelectionProps` provides `newlyRemoved` for callbacks set when removing a selected item +- `` + - simple placeholder element that can be used to display info about missing data +- `` + - `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 @@ -67,6 +78,8 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p - 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) +- ``: + - border of the BlueprintJS `Tag` elements were fixed ### Changed @@ -87,11 +100,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"` +- `` + - `togglerLarge`: replaced by the more versatile `togglerSize` property +- `` + - `searchPredicate`: replaced by the, in some cases, more efficient `searchListPredicate` ## [25.0.0] - 2025-12-01 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 1353b1f7b..c063eb213 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, @@ -24,7 +17,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 { /** 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 9fef52717..218628ea5 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) @@ -267,15 +270,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 403017897..02b53e03a 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} {typeof badge !== "undefined" && ( 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/ContextOverlay/ContextOverlay.tsx b/src/components/ContextOverlay/ContextOverlay.tsx index a9e5c1b56..64388fab2 100644 --- a/src/components/ContextOverlay/ContextOverlay.tsx +++ b/src/components/ContextOverlay/ContextOverlay.tsx @@ -6,8 +6,8 @@ import { PopoverProps as BlueprintPopoverProps, Utils as BlueprintUtils, } from "@blueprintjs/core"; - -import { CLASSPREFIX as eccgui, WhiteSpaceContainer, WhiteSpaceContainerProps } from "../../index"; +import {WhiteSpaceContainerProps, WhiteSpaceContainer} from "../Typography"; +import {CLASSPREFIX as eccgui} from "../../configuration/constants"; export interface ContextOverlayProps extends Omit { /** diff --git a/src/components/DecoupledOverlay/DecoupledOverlay.tsx b/src/components/DecoupledOverlay/DecoupledOverlay.tsx index 92707ce92..884f6932c 100644 --- a/src/components/DecoupledOverlay/DecoupledOverlay.tsx +++ b/src/components/DecoupledOverlay/DecoupledOverlay.tsx @@ -2,8 +2,11 @@ import React from "react"; import { createPortal } from "react-dom"; import { Classes as BlueprintClasses } from "@blueprintjs/core"; import { createPopper } from "@popperjs/core"; - -import { CLASSPREFIX as eccgui, ContextOverlayProps, TestableComponent, TooltipSize, WhiteSpaceContainer } from "../../index"; +import {TooltipSize} from "../Tooltip/Tooltip"; +import {TestableComponent} from "../interfaces"; +import {ContextOverlayProps} from "../ContextOverlay"; +import {CLASSPREFIX as eccgui} from "../../configuration/constants"; +import WhiteSpaceContainer from "../Typography/WhiteSpaceContainer"; export interface DecoupledOverlayProps extends React.HTMLAttributes, 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 8cbe559ce..f57ef88e4 100644 --- a/src/components/MultiSelect/MultiSelect.tsx +++ b/src/components/MultiSelect/MultiSelect.tsx @@ -27,9 +27,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. */ @@ -79,9 +80,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. */ @@ -112,9 +115,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). @@ -168,6 +182,7 @@ export function MultiSuggestField({ newItemPostfix = " (new item)", disabled, createNewItemFromQuery, + isValidNewOption, requestDelay = 0, clearQueryOnSelection = false, className, @@ -175,6 +190,7 @@ export function MultiSuggestField({ "data-testid": dataTestid, wrapperProps, searchPredicate, + searchListPredicate, limitHeightOpened, intent, ...otherMultiSelectProps @@ -183,7 +199,7 @@ export function MultiSuggestField({ // 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([]); @@ -292,10 +308,14 @@ export function MultiSuggestField({ }); }; - const defaultFilterPredicate = (item: T, query: string) => { + /** 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 highlighterUtils.matchesAllWords(itemLabel(item).toLowerCase(), searchWords); - }; + return items.filter(item => { + const searchIn = itemLabel(item).toLowerCase() + return highlighterUtils.matchesAllWords(searchIn, searchWords); + }) + } /** * selects and deselects an item from selection list @@ -328,17 +348,24 @@ export function MultiSuggestField({ if (requestState.current.timeoutId) { clearTimeout(requestState.current.timeoutId); } + setShowSpinner(true); + setFilteredItems([]); const fn = async () => { - setShowSpinner(true); - setFilteredItems([]); const resultFromQuery = runOnQueryChange && (await runOnQueryChange(removeExtraSpaces(query))); 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); } @@ -423,7 +450,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(); }; @@ -439,7 +468,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()); @@ -454,7 +487,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); @@ -496,7 +529,6 @@ export function MultiSuggestField({ ? "Search for item, or enter term to create new one..." : undefined } - {...otherMultiSelectProps} query={requestState.current.query} onQueryChange={onQueryChange} items={filteredItems} @@ -565,6 +597,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/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 aa2da8bef..6a625a9e9 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 d264df1c4..03a34a09a 100644 --- a/src/components/Typography/typography.scss +++ b/src/components/Typography/typography.scss @@ -68,12 +68,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/VisualTour/VisualTour.tsx b/src/components/VisualTour/VisualTour.tsx index 04b85f778..59537eebc 100644 --- a/src/components/VisualTour/VisualTour.tsx +++ b/src/components/VisualTour/VisualTour.tsx @@ -70,10 +70,6 @@ export const VisualTour = ({ usableStepTarget = false, isOpen = false, }: VisualTourProps) => { - if (isOpen === false) { - return null; - } - const [currentStepIndex, setCurrentStepIndex] = React.useState(0); const [currentStepComponent, setCurrentStepComponent] = React.useState(null); @@ -234,7 +230,11 @@ export const VisualTour = ({ }; }, [currentStepIndex, usableStepTarget]); - return currentStepComponent; + if (isOpen === false) { + return null; + } else { + return currentStepComponent; + } }; interface StepModalProps { diff --git a/src/components/index.ts b/src/components/index.ts index 372973482..e4cd3125d 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -25,6 +25,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 22474da96..58c5d9ea9 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,