@eccenca/gui-elements 24.4.1 → 25.0.0-featurecolorwheelinputcmem7327.0

package/src/components/Chat/_chat.scss

@@ -0,0 +1,86 @@
+.#{$eccgui}-chat__content {
+    @extend .bp5-elevation-1;
+
+    position: relative;
+    z-index: 0;
+    min-height: $button-height;
+    padding: $eccgui-size-inline-whitespace;
+    overflow: auto;
+    background-color: var(--#{$eccgui}-chat__content-background);
+    border-radius: 3 * $pt-border-radius;
+}
+
+.#{$eccgui}-chat__content--display-free {
+    --#{$eccgui}-chat__content-background: transparent;
+
+    padding: 1px 0;
+    box-shadow: none;
+}
+
+.#{$eccgui}-chat__content--display-bubble {
+    margin-left: 0.75 * $eccgui-size-block-whitespace;
+
+    &.#{$eccgui}-chat__content--align-right {
+        margin-right: 0.75 * $eccgui-size-block-whitespace;
+        margin-left: none;
+    }
+}
+
+.#{$eccgui}-chat__content-wrapper {
+    --#{$eccgui}-chat__content-background: #{$light-gray5};
+    &:has(.#{$eccgui}-chat__content--display-bubble) {
+        position: relative;
+
+        &::before {
+            @extend .bp5-elevation-1;
+
+            position: absolute;
+            top: calc(#{mini-units(3)} - #{0.5 * $eccgui-size-block-whitespace});
+            left: 0.25 * $eccgui-size-block-whitespace;
+            z-index: 1;
+            width: $eccgui-size-block-whitespace;
+            height: $eccgui-size-block-whitespace;
+            content: " ";
+            background-color: var(--#{$eccgui}-chat__content-background);
+            clip-path: polygon(-5px calc(100% + 5px), -5px -5px, calc(100% + 5px) calc(100% + 5px));
+            transform: rotate(45deg);
+        }
+    }
+    &:has(.#{$eccgui}-chat__content--display-bubble.#{$eccgui}-chat__content--align-right) {
+        &::before {
+            right: 0.25 * $eccgui-size-block-whitespace;
+            left: auto;
+            transform: rotate(225deg);
+        }
+    }
+}
+
+.#{$eccgui}-chat__content--limitheight {
+    max-height: 50vh;
+}
+
+.#{$eccgui}-chat__inputfield {
+    min-height: mini-units(9);
+    max-height: 39vh;
+    resize: none !important;
+}
+
+.#{$eccgui}-chat__area {
+    padding: 0.25rem;
+    background-color: $card-background-color;
+}
+
+.#{$eccgui}-chat__area-contentwidth {
+    width: 100%;
+    margin: 0 auto;
+
+    .#{$eccgui}-chat__area--small & {
+        max-width: 40rem;
+    }
+    .#{$eccgui}-chat__area--medium & {
+        max-width: 60rem;
+    }
+    .#{$eccgui}-chat__area--large & {
+        max-width: 80rem;
+    }
+}

package/src/components/Chat/index.ts

@@ -0,0 +1,4 @@
+export * from "./ChatArea";
+export * from "./ChatContent";
+export * from "./ChatContentCollapsed";
+export * from "./ChatField";

package/src/components/Chat/stories/ChatArea.stories.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import {
+    ChatArea,
+    ChatContent,
+    ChatContentCollapsed,
+    ChatField,
+    ContentGroup,
+    Spacing,
+    TitleSubsection,
+} from "../../../index";
+
+import { BasicExample as ContentGroupExample } from "./../../ContentGroup/ContentGroup.stories";
+import { Default as ShortChatBubble, LongChatBubble } from "./ChatContent.stories";
+import { Default as ChatFieldExample } from "./ChatField.stories";
+
+export default {
+    title: "Components/Chat/ChatArea",
+    component: ChatArea,
+    argTypes: {},
+} as Meta<typeof ChatArea>;
+
+let forceupdate = 0;
+const TemplateFull: StoryFn<typeof ChatArea> = (args) => (
+    <div style={args.useAbsoluteSpace ? { position: "relative", height: "75vh" } : undefined}>
+        <ChatArea {...args} key={forceupdate++} />
+    </div>
+);
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    chatField: <ChatField {...ChatFieldExample.args} />,
+    children: [
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContentCollapsed textReducerProps={{ maxNodes: 1 }}>
+            <ChatContent
+                avatar={undefined}
+                displayType="free"
+                statusLine={
+                    <>
+                        <strong>Bot</strong> right now
+                    </>
+                }
+            >
+                <TitleSubsection>Some technical content</TitleSubsection>
+                <Spacing size="small" />
+                <ContentGroup {...ContentGroupExample.args} style={{ marginRight: "2px" }} />
+            </ChatContent>
+        </ChatContentCollapsed>,
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContentCollapsed>
+            <ChatContent {...LongChatBubble.args} />
+        </ChatContentCollapsed>,
+        <ChatContent {...ShortChatBubble.args} alignment="right" indentationSize="medium" />,
+        <ChatContent {...ShortChatBubble.args} />,
+    ],
+    autoSpacingSize: "medium",
+    autoScrollTo: "last",
+    useAbsoluteSpace: true,
+};

package/src/components/Chat/stories/ChatContent.stories.tsx

@@ -0,0 +1,61 @@
+import React from "react";
+import { LoremIpsum } from "react-lorem-ipsum";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, Depiction, HtmlContentBlock, Icon, OverflowText } from "../../../index";
+
+import canonicalIcons from "./../../Icon/canonicalIconNames";
+
+const allIcons = new Map([
+    ...Object.keys(canonicalIcons).map((keyId) => {
+        return [`Icon: ${keyId}`, <Depiction image={<Icon name={keyId} />} />];
+    }),
+]);
+
+const exampleImages = {
+    None: undefined,
+    ...Object.fromEntries(allIcons),
+};
+
+export default {
+    title: "Components/Chat/ChatContent",
+    component: ChatContent,
+    argTypes: {
+        avatar: {
+            control: "select",
+            options: Object.keys(exampleImages),
+            mapping: exampleImages,
+        },
+    },
+} as Meta<typeof ChatContent>;
+
+let update = 0;
+const TemplateFull: StoryFn<typeof ChatContent> = (args) => <ChatContent {...args} key={update++} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={1} avgSentencesPerParagraph={5} random={false} />
+        </HtmlContentBlock>
+    ),
+    avatar: <Depiction image={<Icon name={"application-useraccount"} />} />,
+    statusLine: (
+        <OverflowText>
+            <strong>Username</strong> 25 minutes ago
+        </OverflowText>
+    ),
+};
+
+export const LongChatBubble = TemplateFull.bind({});
+LongChatBubble.args = {
+    ...Default.args,
+    avatar: undefined,
+    displayType: "simple",
+    children: (
+        <HtmlContentBlock>
+            <LoremIpsum p={7} avgSentencesPerParagraph={7} random={false} />
+        </HtmlContentBlock>
+    ),
+    limitHeight: true,
+};

package/src/components/Chat/stories/ChatContentCollapsed.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatContent, ChatContentCollapsed } from "../../../index";
+
+import { LongChatBubble } from "./ChatContent.stories";
+
+export default {
+    title: "Components/Chat/ChatContentCollapsed",
+    component: ChatContentCollapsed,
+    argTypes: {},
+} as Meta<typeof ChatContentCollapsed>;
+
+let update = 0;
+const TemplateFull: StoryFn<typeof ChatContentCollapsed> = (args) => (
+    <div key={update++}>
+        <ChatContentCollapsed {...args} />
+    </div>
+);
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    children: <ChatContent {...LongChatBubble.args} />,
+};

package/src/components/Chat/stories/ChatField.stories.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import { ChatField, ContextMenu, MenuItem } from "../../../index";
+
+export default {
+    title: "Components/Chat/ChatField",
+    component: ChatField,
+    argTypes: {},
+} as Meta<typeof ChatField>;
+
+let forceupdate = 0;
+const TemplateFull: StoryFn<typeof ChatField> = (args) => <ChatField {...args} key={forceupdate++} />;
+
+export const Default = TemplateFull.bind({});
+Default.args = {
+    onTextSubmit: (value) => alert(value),
+    rightElement: (
+        <ContextMenu>
+            <MenuItem text="Just a test" />
+        </ContextMenu>
+    ),
+};

package/src/components/Checkbox/checkbox.scss

@@ -24,9 +24,15 @@ $control-indicator-spacing: $eccgui-size-inline-whitespace !default;
 // $switch-background-color-active: rgba($gray1, 0.5) !default;
 // $switch-background-color-disabled: $button-background-color-disabled !default;
 $switch-checked-background-color: $eccgui-color-accent !default;
-$switch-checked-background-color-hover: rgba($switch-checked-background-color, $eccgui-opacity-narrow) !default;
+$switch-checked-background-color-hover: eccgui-color-rgba(
+    $switch-checked-background-color,
+    $eccgui-opacity-narrow
+) !default;
 $switch-checked-background-color-active: $switch-checked-background-color-hover !default;
-$switch-checked-background-color-disabled: rgba($switch-checked-background-color, $eccgui-opacity-disabled) !default;
+$switch-checked-background-color-disabled: eccgui-color-rgba(
+    $switch-checked-background-color,
+    $eccgui-opacity-disabled
+) !default;
 
 @import "~@blueprintjs/core/src/components/forms/controls"; // Checkbox, Radio, Switch
 
@@ -73,3 +79,9 @@ $switch-checked-background-color-disabled: rgba($switch-checked-background-color
     display: inline-block;
     vertical-align: text-top;
 }
+
+@media print {
+    .#{$ns}-control {
+        print-color-adjust: exact;
+    }
+}

package/src/components/CodeAutocompleteField/index.ts

@@ -1 +1,8 @@
-export * from "./CodeAutocompleteField";
+import { AutoSuggestionList, AutoSuggestionListProps } from "./../AutoSuggestion/AutoSuggestionList";
+import { ExtendedCodeEditor, ExtendedCodeEditorProps } from "./../AutoSuggestion/ExtendedCodeEditor";
+
+export * from "./../AutoSuggestion/AutoSuggestion";
+
+export { AutoSuggestionList, ExtendedCodeEditor };
+
+export type { AutoSuggestionListProps, ExtendedCodeEditorProps };

package/src/components/ColorField/ColorField.stories.tsx

@@ -0,0 +1,69 @@
+import React from "react";
+import { Meta, StoryFn } from "@storybook/react";
+
+import textFieldTest from "../TextField/stories/TextField.stories";
+
+import { ColorField, ColorFieldProps } from "./ColorField";
+
+export default {
+    title: "Forms/ColorField",
+    component: ColorField,
+    argTypes: {
+        ...textFieldTest.argTypes,
+    },
+} as Meta<typeof ColorField>;
+
+const Template: StoryFn<typeof ColorField> = (args) => <ColorField {...args}></ColorField>;
+
+export const Default = Template.bind({});
+Default.args = {
+    onChange: (e) => {
+        alert(e.target.value);
+    },
+};
+
+export const NoPalettePresets = Template.bind({});
+NoPalettePresets.args = {
+    ...Default.args,
+    colorWeightFilter: [],
+    paletteGroupFilter: [],
+    allowCustomColor: true,
+};
+
+interface TemplateColorHashProps
+    extends Pick<ColorFieldProps, "onChange" | "allowCustomColor" | "colorWeightFilter" | "paletteGroupFilter"> {
+    stringForColorHashValue: string;
+}
+
+const TemplateColorHash: StoryFn<TemplateColorHashProps> = (args: TemplateColorHashProps) => (
+    <ColorField
+        allowCustomColor={args.allowCustomColor}
+        colorWeightFilter={args.colorWeightFilter}
+        paletteGroupFilter={args.paletteGroupFilter}
+        value={ColorField.calculateColorHashValue(args.stringForColorHashValue, {
+            allowCustomColor: args.allowCustomColor,
+            colorWeightFilter: args.colorWeightFilter,
+            paletteGroupFilter: args.paletteGroupFilter,
+        })}
+    />
+);
+
+/**
+ * Component provides a helper function to calculate a color hash from a text,
+ * that can be used as `value` or `defaultValue`.
+ *
+ * ```
+ * <ColorField value={ColorField.calculateColorHashValue("MyText")} />
+ * ```
+ *
+ * You can add `options` to set the config for the color palette filters.
+ * The same default values like on `ColorField` are used for them.
+ */
+export const ColorHashValue = TemplateColorHash.bind({});
+ColorHashValue.args = {
+    ...Default.args,
+    allowCustomColor: true,
+    colorWeightFilter: [300, 500, 700],
+    paletteGroupFilter: ["layout", "extra"],
+    stringForColorHashValue: "My text that will used to create a color hash as initial value.",
+};

package/src/components/ColorField/ColorField.tsx

@@ -0,0 +1,200 @@
+import React, { CSSProperties } from "react";
+import classNames from "classnames";
+
+import { utils } from "../../common";
+import { ColorWeight, PaletteGroup } from "../../common/utils/colorHash";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ContextOverlay } from "../ContextOverlay";
+import { FieldSet } from "../Form";
+import { RadioButton } from "../RadioButton/RadioButton";
+import { Spacing } from "../Separation/Spacing";
+import { Tag, TagList } from "../Tag";
+import { TextField, TextFieldProps } from "../TextField";
+import { Tooltip } from "../Tooltip/Tooltip";
+import { WhiteSpaceContainer } from "../Typography";
+
+export interface ColorFieldProps extends Omit<TextFieldProps, "invisibleCharacterWarning"> {
+    /**
+     * Any color can be selected, not only from the configured color palette.
+     */
+    allowCustomColor?: boolean;
+    /**
+     * What color weights should be included in the set of allowed colors.
+     */
+    colorWeightFilter?: ColorWeight[];
+    /**
+     * What palette groups should be included in the set of allowed colors.
+     */
+    paletteGroupFilter?: PaletteGroup[];
+}
+
+/**
+ * Color input field that provides resets from the configured color palette.
+ * Use `colorWeightFilter` and `paletteGroupFilter` to filter them.
+ */
+export const ColorField = ({
+    className = "",
+    allowCustomColor = false,
+    colorWeightFilter = [100, 300, 700, 900],
+    paletteGroupFilter = ["layout"],
+    defaultValue,
+    value,
+    onChange,
+    fullWidth = false,
+    ...otherTextFieldProps
+}: ColorFieldProps) => {
+    const ref = React.useRef(null);
+    const [colorValue, setColorValue] = React.useState<string>(defaultValue || value || "#000000");
+
+    let allowedPaletteColors, disableNativePicker, disabled;
+    const updateConfig = () => {
+        allowedPaletteColors = utils.getEnabledColorPropertiesFromPalette({
+            includePaletteGroup: paletteGroupFilter,
+            includeColorWeight: colorWeightFilter,
+            minimalColorDistance: 0, // we use all allowed colors, and do not check distances between them
+        });
+
+        disableNativePicker =
+            colorWeightFilter.length > 0 && paletteGroupFilter.length > 0 && allowedPaletteColors.length > 0;
+        disabled = (!disableNativePicker && !allowCustomColor) || otherTextFieldProps.disabled;
+    };
+    updateConfig();
+    React.useEffect(() => {
+        updateConfig();
+    }, [allowCustomColor, colorWeightFilter, paletteGroupFilter, otherTextFieldProps]);
+
+    React.useEffect(() => {
+        setColorValue(defaultValue || value || "#000000");
+    }, [defaultValue, value]);
+
+    const forwardOnChange = (forwardedEvent: React.ChangeEvent<HTMLInputElement>) => {
+        setColorValue(forwardedEvent.target.value);
+        if (onChange) {
+            onChange(forwardedEvent);
+        }
+    };
+
+    const colorInput = (
+        <TextField
+            inputRef={ref}
+            className={classNames(`${eccgui}-colorfield`, className, {
+                [`${eccgui}-colorfield--custom-picker`]: disableNativePicker,
+            })}
+            // we cannot use `color` type for the custom picker because we do not have control over it then
+            type={!disableNativePicker ? "color" : "text"}
+            readOnly={disableNativePicker}
+            disabled={disabled}
+            value={colorValue}
+            fullWidth={fullWidth}
+            {...otherTextFieldProps}
+            onChange={
+                !disableNativePicker
+                    ? (e: React.ChangeEvent<HTMLInputElement>) => {
+                          forwardOnChange(e);
+                      }
+                    : undefined
+            }
+            style={{ ...otherTextFieldProps.style, [`--eccgui-colorfield-background`]: colorValue } as CSSProperties}
+        />
+    );
+
+    return disableNativePicker && !disabled ? (
+        <ContextOverlay
+            fill={fullWidth}
+            content={
+                <WhiteSpaceContainer
+                    paddingTop={"small"}
+                    paddingRight={"small"}
+                    paddingBottom={"small"}
+                    paddingLeft={"small"}
+                    className={`${eccgui}-colorfield__picker`}
+                >
+                    {allowCustomColor && (
+                        <>
+                            <TextField
+                                type={"color"}
+                                value={colorValue}
+                                onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                    forwardOnChange(e);
+                                }}
+                            />
+                            <Spacing size={"small"} />
+                        </>
+                    )}
+                    <FieldSet>
+                        <TagList
+                            className={`${eccgui}-colorfield__palette ${eccgui}-colorfield__palette--${
+                                colorWeightFilter.length >= 3 ? colorWeightFilter.length * 2 : "8"
+                            }col`}
+                        >
+                            {allowedPaletteColors!.map((color: [string, string], idx: number) => [
+                                <RadioButton
+                                    className={`${eccgui}-colorfield__palette__color`}
+                                    hideIndicator
+                                    value={color[1]}
+                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                                        forwardOnChange(e);
+                                    }}
+                                >
+                                    <Tooltip key={idx} content={color[0].replace(`${eccgui}-color-palette-`, "")}>
+                                        <Tag
+                                            large
+                                            style={{ [`--eccgui-colorfield-palette-color`]: color[1] } as CSSProperties}
+                                        >
+                                            {color[1]}
+                                        </Tag>
+                                    </Tooltip>
+                                </RadioButton>,
+                                // Looks like we cannot force some type of line break in the tag list via CSS only
+                                (idx + 1) % (colorWeightFilter.length >= 3 ? colorWeightFilter.length * 2 : 8) ===
+                                    0 && (
+                                    <>
+                                        <br className={`${eccgui}-colorfield__palette-linebreak`} />
+                                    </>
+                                ),
+                            ])}
+                        </TagList>
+                    </FieldSet>
+                </WhiteSpaceContainer>
+            }
+        >
+            {colorInput}
+        </ContextOverlay>
+    ) : (
+        colorInput
+    );
+};
+
+type calculateColorHashValueProps = Pick<
+    ColorFieldProps,
+    "allowCustomColor" | "colorWeightFilter" | "paletteGroupFilter"
+>;
+
+/**
+ * Simple helper function that provide simple access to color hash calculation.
+ * Using the same default values for the color palette filter.
+ */
+ColorField.calculateColorHashValue = (
+    text: string,
+    options: calculateColorHashValueProps = {
+        allowCustomColor: false,
+        colorWeightFilter: [100, 300, 700, 900],
+        paletteGroupFilter: ["layout"],
+    }
+) => {
+    const hash = utils.textToColorHash({
+        text,
+        options: {
+            returnValidColorsDirectly: options.allowCustomColor as boolean,
+            enabledColors: utils.getEnabledColorsFromPalette({
+                includePaletteGroup: options.paletteGroupFilter,
+                includeColorWeight: options.colorWeightFilter,
+                minimalColorDistance: 0,
+            }),
+        },
+    });
+
+    return hash ? hash : undefined;
+};
+
+export default ColorField;

package/src/components/ColorField/_colorfield.scss

@@ -0,0 +1,56 @@
+.#{$eccgui}-colorfield {
+    cursor: default;
+
+    &:not(.#{$ns}-fill) {
+        width: 100%;
+        max-width: 4 * $eccgui-size-textfield-height-regular;
+    }
+
+    .#{$ns}-input {
+        color: var(--#{$eccgui}-colorfield-background);
+        cursor: inherit;
+        background-color: var(--#{$eccgui}-colorfield-background);
+
+        &[type="color"] {
+            &::-webkit-color-swatch-wrapper {
+                display: none;
+            }
+
+            &::-moz-color-swatch {
+                display: none;
+            }
+        }
+    }
+
+    .#{$ns}-input-left-container {
+        top: 1px;
+        left: 1px !important;
+        height: calc(100% - 2px);
+        background-color: $eccgui-color-textfield-background;
+    }
+    .#{$ns}-input-action {
+        top: 1px;
+        right: 1px !important;
+        height: calc(100% - 2px);
+        background-color: $eccgui-color-textfield-background;
+    }
+}
+
+.#{$eccgui}-colorfield__palette {
+    & > li:has(.#{$eccgui}-colorfield__palette-linebreak) {
+        display: block;
+        width: 100%;
+        height: 0;
+        margin: 0;
+        overflow: hidden;
+    }
+}
+
+.#{$eccgui}-colorfield__palette__color {
+    margin: 0;
+    .#{$eccgui}-tag__item {
+        width: 3rem;
+        color: var(--#{$eccgui}-colorfield-palette-color) !important;
+        background-color: var(--#{$eccgui}-colorfield-palette-color) !important;
+    }
+}

package/src/components/ContentGroup/ContentGroup.tsx

@@ -189,7 +189,7 @@ export const ContentGroup = ({
                                 </div>
                             </ToolbarSection>
                         )}
-                    {!isCollapsed && handlerToggleCollapse && actionOptions && (
+                    {(!isCollapsed || !handlerToggleCollapse) && actionOptions && (
                         <ToolbarSection className={`${eccgui}-contentgroup__header__options`}>
                             <Spacing vertical size="small" />
                             {actionOptions}

package/src/components/ContentGroup/_contentgroup.scss

@@ -1,5 +1,11 @@
-$eccgui-color-scontentgroup-border-main: rgba($eccgui-color-workspace-text, $eccgui-opacity-muted) !default;
-$eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccgui-opacity-disabled) !default;
+$eccgui-color-scontentgroup-border-main: eccgui-color-rgba(
+    $eccgui-color-workspace-text,
+    $eccgui-opacity-muted
+) !default;
+$eccgui-color-scontentgroup-border-sub: eccgui-color-rgba(
+    $eccgui-color-workspace-text,
+    $eccgui-opacity-disabled
+) !default;
 
 .#{$eccgui}-contentgroup {
     --#{$eccgui}-color-contentgroup-border-main: #{$eccgui-color-scontentgroup-border-main};
@@ -54,3 +60,12 @@ $eccgui-color-scontentgroup-border-sub: rgba($eccgui-color-workspace-text, $eccg
     flex-shrink: 1;
     width: 100%;
 }
+
+@media print {
+    .#{$eccgui}-contentgroup__header__options {
+        display: none;
+    }
+    .#{$eccgui}-contentgroup--border-sub::after {
+        print-color-adjust: exact;
+    }
+}

package/src/components/ContextOverlay/ContextMenu.tsx

@@ -66,6 +66,8 @@ export const ContextMenu = ({
               so by default we use the title attribute instead of Tooltip. */
     tooltipAsTitle = true,
     preventPlaceholder = false,
+    "data-test-id": dataTestId,
+    "data-testid": dataTestid,
     ...restProps
 }: ContextMenuProps) => {
     const toggleButton =
@@ -76,7 +78,8 @@ export const ContextMenu = ({
                 text={togglerText}
                 large={togglerLarge}
                 disabled={!!disabled}
-                data-test-id={restProps["data-test-id"]}
+                data-test-id={dataTestId ?? undefined}
+                data-testid={dataTestid ?? undefined}
             />
         ) : (
             (togglerElement as ReactElement)