@eccenca/gui-elements 25.1.0 → 25.2.0-featuredarkthemesupportcmem7503.0

package/src/components/OverviewItem/stories/OverviewItemListPerformance.tsx

@@ -86,7 +86,7 @@ export const OverviewItemListPerformance = ({
         // eslint-disable-next-line no-console
         console.log(
             "OverviewItemListPerformance Rendering time (s)",
-            (renderEnd.getTime() - renderStart.getTime()) / 1000
+            (renderEnd.getTime() - renderStart.getTime()) / 1000,
         );
 
         if (containerRef.current) {
@@ -96,7 +96,7 @@ export const OverviewItemListPerformance = ({
                 // eslint-disable-next-line no-console
                 console.log(
                     `Change ${++changeCount} after time (s)`,
-                    (renderChange.getTime() - renderEnd.getTime()) / 1000
+                    (renderChange.getTime() - renderEnd.getTime()) / 1000,
                 );
             };
             if (observerRef.current) {

package/src/components/Pagination/Pagination.tsx

@@ -103,7 +103,7 @@ export const usePagination = ({
         ({ page, pageSize }: { page: any; pageSize: any }) => {
             setPagination({ ..._pagination.current, current: page, limit: pageSize });
         },
-        [setPagination]
+        [setPagination],
     );
     // When the total number of pageable items changes, this function must be called
     const onTotalChange = React.useCallback(
@@ -112,7 +112,7 @@ export const usePagination = ({
                 setPagination({ ..._pagination.current, total: total, current: 1 });
             }
         },
-        [setPagination]
+        [setPagination],
     );
     const paginationElement = (
         <Pagination

package/src/components/Pagination/Stories/Pagination.stories.tsx

@@ -10,6 +10,14 @@ export default {
 
 const PaginationExample = (args) => <Pagination {...args} />;
 
+const ContainerQueriesExample = (args) => (
+    <>
+        <Pagination {...args} style={{ maxWidth: "100%" }} />
+        <Pagination {...args} style={{ maxWidth: "32rem" }} />
+        <Pagination {...args} style={{ maxWidth: "26rem" }} />
+    </>
+);
+
 export const Default: StoryFn<typeof Pagination> = PaginationExample.bind({});
 Default.args = {
     pageSizes: [10, 20, 50, 100],
@@ -28,3 +36,27 @@ ExtendedPagesizeSelection.args = {
         { text: "Large page with 100 items", value: "100" },
     ],
 };
+
+/**
+ * This story demonstrates a minimal pagination and is a check that elements are always hidden.
+ */
+export const MinimalPagination: StoryFn<typeof Pagination> = PaginationExample.bind({});
+MinimalPagination.args = {
+    ...Default.args,
+    hidePageSizeConfiguration: true,
+    hidePageSelect: true,
+    hideInfoText: true,
+    hideNavigationArrows: false,
+    hideBorders: false,
+};
+
+/**
+ * Demonstrates the breakpoints of the container queries.
+ * If the container gets too small, some elements are removed automatically.
+ * First, page selector disappears, then the page size selector.
+ * Info text and navigation arrow are never hidden automatically.
+ */
+export const ContainerQueries: StoryFn<typeof Pagination> = ContainerQueriesExample.bind({});
+ContainerQueries.args = {
+    ...Default.args,
+};

package/src/components/Pagination/pagination.scss

@@ -7,6 +7,8 @@ $eccgui-size-typo-pagination: $eccgui-size-typo-caption !default;
 $eccgui-size-pagination-height-medium: $pt-button-height !default;
 $eccgui-size-pagination-height-small: $pt-button-height-small !default;
 $eccgui-size-pagination-height-large: $pt-button-height-large !default;
+$eccgui-size-pagination-breakpoint-wide: 32rem !default;
+$eccgui-size-pagination-breakpoint-small: 26rem !default;
 
 .#{$prefix}--pagination {
     min-block-size: $eccgui-size-pagination-height-medium;
@@ -38,7 +40,7 @@ span.#{$prefix}--pagination__text {
         padding-left: 0;
 
         & > *:not(:last-child) {
-            display: none;
+            display: none !important;
         }
     }
 }
@@ -56,7 +58,7 @@ span.#{$prefix}--pagination__text {
 
 .#{$eccgui}-pagination--hideinfotext {
     .#{$prefix}--pagination__left > .#{$prefix}--pagination__text:last-child {
-        display: none;
+        display: none !important;
     }
 
     & .#{$prefix}--select__item-count .#{$prefix}--select-input {
@@ -66,13 +68,13 @@ span.#{$prefix}--pagination__text {
 
 .#{$eccgui}-pagination--hidepageselect {
     .#{$prefix}--pagination__right > *:not(.#{$prefix}--pagination__control-buttons) {
-        display: none;
+        display: none !important;
     }
 }
 
 .#{$eccgui}-pagination--hidenavigation {
     .#{$prefix}--pagination__right > .#{$prefix}--pagination__control-buttons {
-        display: none;
+        display: none !important;
     }
 }
 
@@ -137,3 +139,51 @@ span.#{$prefix}--pagination__text {
         line-height: $eccgui-size-pagination-height-large;
     }
 }
+
+// fix breakpoints for container queries
+// Carbon does not provide the option to configure that breakpoint
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-small}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__control-buttons {
+            display: flex;
+        }
+        .#{$prefix}--pagination__left > * {
+            display: inherit;
+        }
+    }
+}
+
+@container pagination (min-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__right > * {
+            display: inherit;
+        }
+    }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-small}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__left > * {
+            display: none;
+        }
+        .#{$prefix}--pagination__items-count {
+            margin-left: 0;
+        }
+    }
+}
+
+@container pagination (max-width: #{$eccgui-size-pagination-breakpoint-wide}) {
+    .#{$prefix}--pagination.#{$eccgui}-pagination {
+        .#{$prefix}--pagination__right > * {
+            display: none;
+        }
+
+        .#{$prefix}--pagination__items-count {
+            display: initial;
+        }
+
+        .#{$prefix}--pagination__control-buttons {
+            display: flex;
+        }
+    }
+}

package/src/components/PropertyValuePair/PropertyValueList.tsx

@@ -7,7 +7,7 @@ import { PropertyValuePair } from "./PropertyValuePair";
 export interface PropertyValueListProps extends React.HTMLAttributes<HTMLDListElement> {
     /**
      * Only use one single column and put property label and value below each other.
-     * This property is forwardd to direct `PropertyValuePair` children.
+     * This property is forward to direct `PropertyValuePair` children.
      */
     singleColumn?: boolean;
 }

package/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",

package/src/components/RadioButton/radiobutton.scss

@@ -27,6 +27,15 @@
 
         input ~ .#{$ns}-control-indicator::before {
             background-image: url("~@carbon/icons/svg/32/radio-button.svg");
+
+            @media (prefers-color-scheme: dark) {
+                filter: invert(1);
+            }
+
+            html:has(.#{$eccgui}-application__container.#{$eccgui}-palette--dark) :not(.#{$eccgui}-palette--light) &,
+            .#{$eccgui}-palette--dark :not(.#{$eccgui}-palette--light) & {
+                filter: invert(1);
+            }
         }
         input:checked ~ .#{$ns}-control-indicator::before {
             background-image: url("~@carbon/icons/svg/32/radio-button--checked.svg");

package/src/components/Select/Select.stories.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { loremIpsum } from "react-lorem-ipsum";
 import { Meta, StoryFn } from "@storybook/react";
-import { fn } from "@storybook/test";
+import { fn } from "storybook/test";
 
 import { helpersArgTypes } from "../../../.storybook/helpers";
 import { Button, Depiction, MenuItem, Select } from "../../index";

package/src/components/Select/Select.tsx

@@ -3,12 +3,15 @@ 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 { Button, ButtonProps } from "../Button/Button";
+import { ContextOverlayProps } from "../ContextOverlay";
+import Icon from "../Icon/Icon";
 import { TestableComponent } from "../interfaces";
-
-import { Button, ButtonProps, ContextOverlayProps, Icon, OverflowText } from "./../../index";
+import OverflowText from "../Typography/OverflowText";
 
 export interface SelectProps<T>
-    extends TestableComponent,
+    extends
+        TestableComponent,
         Omit<BlueprintSelectProps<T>, "popoverTargetProps" | "popoverContentProps" | "popoverProps" | "popoverRef">,
         Pick<ButtonProps, "icon" | "rightIcon"> {
     /**
@@ -117,7 +120,7 @@ export function Select<T>({
                             {typeof rightIcon === "string" ? (
                                 <Icon name={rightIcon} />
                             ) : (
-                                rightIcon ?? <Icon name={"toggler-caretdown"} />
+                                (rightIcon ?? <Icon name={"toggler-caretdown"} />)
                             )}
                         </>
                     }

package/src/components/Skeleton/Skeleton.tsx

@@ -6,7 +6,7 @@ export interface SkeletonProps {
     /**
      * Element that need to displayed using the skeleton styles.
      */
-    children: JSX.Element | JSX.Element[];
+    children: React.JSX.Element | React.JSX.Element[];
 }
 
 /**
@@ -15,7 +15,7 @@ export interface SkeletonProps {
  */
 export function Skeleton({ children }: SkeletonProps) {
     const alteredChildren = React.Children.map(children, (child) => {
-        const originalChild = child as React.ReactElement;
+        const originalChild = child;
         if (originalChild.props) {
             return React.cloneElement(originalChild, {
                 className: originalChild.props.className ? originalChild.props.className + " " + SKELETON : SKELETON,

package/src/components/Spinner/Spinner.tsx

@@ -5,7 +5,7 @@ import {
     Spinner as BlueprintSpinner,
     SpinnerProps as BlueprintSpinnerProps,
 } from "@blueprintjs/core";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 
@@ -21,7 +21,7 @@ export interface SpinnerProps extends Omit<BlueprintSpinnerProps, "size" | "inte
      * Must be a valid css color definition.
      * `intent` property will always overwrite this setting.
      */
-    color?: Color | string | "inherit";
+    color?: ColorLike | "inherit";
     /**
      * Intent state of the spinner.
      * When used the spinner is colored.

package/src/components/Sticky/StickyTarget.tsx

@@ -101,7 +101,7 @@ export const StickyTarget = ({
                         }
                         stickyTargetRef.current?.style.setProperty(
                             "--eccgui-sticky-target-applicationoffset",
-                            `${connectedOffset}px`
+                            `${connectedOffset}px`,
                         );
                     };
 

package/src/components/Sticky/stories/StickyTarget.stories.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { LoremIpsum } from "react-lorem-ipsum";
-import { Meta, Story } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 import { HtmlContentBlock, StickyTarget } from "../../../../index";
 
@@ -10,7 +10,7 @@ export default {
     argTypes: {},
 } as Meta<typeof StickyTarget>;
 
-const Template: Story<typeof StickyTarget> = (args) => (
+const Template: StoryFn<typeof StickyTarget> = (args) => (
     <div style={{ height: "10rem", overflow: "auto", position: "relative" }}>
         <HtmlContentBlock>
             {args.getConnectedElement && args.to !== "bottom" && (

package/src/components/Structure/TitleSubsection.tsx

@@ -6,7 +6,7 @@ export interface TitleSubsectionProps extends React.HTMLAttributes<HTMLElement>
     /**
      * HTML tag to use for element. As default element `h3` is used for a string as children, otherwise `div`.
      */
-    useHtmlElement?: keyof JSX.IntrinsicElements;
+    useHtmlElement?: keyof React.JSX.IntrinsicElements;
 }
 
 export const TitleSubsection = ({ children, className = "", useHtmlElement, ...restProps }: TitleSubsectionProps) => {
@@ -20,7 +20,7 @@ export const TitleSubsection = ({ children, className = "", useHtmlElement, ...r
             ...restProps,
             className: `${eccgui}-structure__title-subsection ` + className,
         },
-        children
+        children,
     );
 };
 

package/src/components/SuggestField/SuggestField.stories.tsx

@@ -22,7 +22,7 @@ const defaultArgs: SuggestFieldProps<string, string> = {
     onSearch: (query: string) => {
         const multiWord = highlighterUtils.extractSearchWords(query, true);
         return ["search item A", "search element B", "search object C"].filter((word) =>
-            highlighterUtils.matchesAllWords(word.toLowerCase(), multiWord)
+            highlighterUtils.matchesAllWords(word.toLowerCase(), multiWord),
         );
     },
     onChange: (elem) => {
@@ -76,7 +76,7 @@ const allowCustomValues: SuggestFieldProps<string, string> = {
     createNewItem: {
         itemRenderer: suggestFieldUtils.createNewItemRendererFactory(
             (query: string) => `Create new item: ${query}`,
-            "item-add-artefact"
+            "item-add-artefact",
         ),
         itemFromQuery: (item) => item,
     },

package/src/components/Table/Table.tsx

@@ -9,7 +9,8 @@ type TableRowHeightSize = "small" | "medium" | "large";
 // workaround to get type/interface
 type CarbonTableProps = React.ComponentProps<typeof CarbonTable>;
 export interface TableProps
-    extends Omit<CarbonTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
+    extends
+        Omit<CarbonTableProps, "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth">,
         React.TableHTMLAttributes<HTMLTableElement> {
     /**
      * Sets basically the height of a row inside the table.
@@ -50,7 +51,7 @@ export function Table({
     children,
     ...otherCarbonTableProps
 }: TableProps) {
-    let colLayout: boolean | JSX.Element = false;
+    let colLayout: boolean | React.JSX.Element = false;
     if (!!columnWidths && columnWidths.length > 0) {
         colLayout = (
             <colgroup className={`${eccgui}-simpletable__layout`}>

package/src/components/Table/TableContainer.tsx

@@ -12,21 +12,23 @@ import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TableProps, tableRowHeightSizes } from "./Table";
 
 export interface TableDataContainerProps
-    extends Omit<
+    extends
+        Omit<
             CarbonDataTableProps<
                 Array<Omit<CarbonDataTableRow<Array<CarbonDataTableHeader>>, "cells">>,
                 Array<CarbonDataTableHeader>
             >,
             "size" | "overflowMenuOnHover" | "stickyHeader" | "useStaticWidth"
         >,
-        React.TableHTMLAttributes<HTMLTableElement> {
-    children(signature: any): JSX.Element;
+        Omit<React.TableHTMLAttributes<HTMLTableElement>, "children"> {
+    children(signature: any): React.JSX.Element;
     size?: TableProps["size"];
 }
 export interface TableSimpleContainerProps
-    extends Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,
+    extends
+        Omit<CarbonTableContainerProps, "description" | "stickyHeader" | "title" | "useStaticWidth">,
         React.HTMLAttributes<HTMLDivElement> {
-    children?: JSX.Element;
+    children?: React.JSX.Element;
 }
 
 export type TableContainerProps = TableDataContainerProps | TableSimpleContainerProps;
@@ -46,7 +48,10 @@ export function TableContainer({ className = "", ...otherProps }: TableContainer
             />
         </CarbonDataTable.TableContainer>
     ) : (
-        <CarbonDataTable.TableContainer {...otherProps} className={`${eccgui}-simpletable__container ` + className} />
+        <CarbonDataTable.TableContainer
+            {...{ ...otherProps, children: otherProps.children as React.ReactNode }}
+            className={`${eccgui}-simpletable__container ` + className}
+        />
     );
 }
 

package/src/components/Table/TableExpandHeader.tsx

@@ -9,7 +9,8 @@ import { ValidIconName } from "../Icon/canonicalIconNames";
 import IconButton from "./../Icon/IconButton";
 
 export interface TableExpandHeaderProps
-    extends Omit<
+    extends
+        Omit<
             CarbonTableExpandHeaderProps,
             "children" | "ariaLabel" | "enableExpando" | "expandIconDescription" | "aria-label"
         >,

package/src/components/Table/TableExpandRow.tsx

@@ -6,12 +6,13 @@ 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<typeof CarbonTableExpandRow>;
 export interface TableExpandRowProps
-    extends Omit<CarbonTableExpandRowProps, "children" | "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">,
+    extends
+        Omit<CarbonTableExpandRowProps, "children" | "ref" | "ariaLabel" | "expandIconDescription" | "aria-label">,
         React.HTMLAttributes<HTMLTableRowElement> {
     /**
      * This text is displayed as tooltip for the button that toggles the expanded/collapsed state.

package/src/components/Table/index.tsx

@@ -7,4 +7,10 @@ export * from "./TableCell";
 
 // TODO, we may wrap to add own classes (currently not necessary)
 export { TableHead, TableBody, TableExpandedRow, TableHeader } from "@carbon/react";
-export type { TableHeadProps, TableBodyProps, TableExpandedRowProps, TableHeaderProps, DataTableRenderProps } from "@carbon/react";
+export type {
+    TableHeadProps,
+    TableBodyProps,
+    TableExpandedRowProps,
+    TableHeaderProps,
+    DataTableRenderProps,
+} from "@carbon/react";

package/src/components/Tabs/Tab.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Tab as BlueprintTab, TabProps as BlueprintTabProps } from "@blueprintjs/core";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
 import { TestableComponent } from "../interfaces";
@@ -20,7 +20,7 @@ export interface TabProps extends TestableComponent, Omit<BlueprintTabProps, "ti
      *
      * The front color is set automatically, so the tag label is always readable.
      */
-    backgroundColor?: Color | string;
+    backgroundColor?: ColorLike;
     /**
      * In case of not enough space do not shrink this tab in its size.
      */

package/src/components/Tabs/TabTitle.tsx

@@ -29,7 +29,7 @@ export interface TabTitleProps {
     /**
      * Add a tooltip to a tab, displayed when user hoveres over it.
      */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
     /**
      * Make the tab not usable, display is also narrowed.
      */

package/src/components/Tag/Tag.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Tag as BlueprintTag, TagProps as BlueprintTagProps } from "@blueprintjs/core";
-import Color from "color";
+import Color, { ColorLike } from "color";
 
 import { intentClassName, IntentTypes } from "../../common/Intent";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -10,12 +10,11 @@ import { TestIconProps } from "../Icon/TestIcon";
 
 import decideContrastColorValue from "./../../common/utils/colorDecideContrastvalue";
 
-export interface TagProps
-    extends Omit<
-        BlueprintTagProps,
-        // currently not supported
-        "active" | "fill" | "icon" | "intent" | "large" | "multiline" | "rightIcon"
-    > {
+export interface TagProps extends Omit<
+    BlueprintTagProps,
+    // currently not supported
+    "active" | "fill" | "icon" | "intent" | "large" | "multiline" | "rightIcon"
+> {
     // own properties
 
     /**
@@ -25,7 +24,7 @@ export interface TagProps
      *
      * The front color is set automatically, so the tag label is always readable.
      */
-    backgroundColor?: Color | string;
+    backgroundColor?: ColorLike;
 
     /**
      * visual appearance and "thickness" of the tag
@@ -61,13 +60,13 @@ function Tag({
     backgroundColor,
     ...otherProps
 }: TagProps) {
-    otherProps["interactive"] = otherProps.interactive ?? !!otherProps.onClick ? true : false;
+    otherProps["interactive"] = (otherProps.interactive ?? !!otherProps.onClick) ? true : false;
     if (backgroundColor) {
         const additionalStyles = otherProps.style ?? {};
         let color = Color("#ffffff");
         try {
             color = Color(backgroundColor);
-        } catch (ex) {
+        } catch {
             // eslint-disable-next-line no-console
             console.warn("Received invalid background color for tag: " + backgroundColor);
         }

package/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",

package/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",

package/src/components/TextField/TextArea.tsx

@@ -32,12 +32,17 @@ export interface TextAreaProps extends Omit<BlueprintTextAreaProps, "intent"> {
      * Element to render on right side of text area. Should be not too large.
      * This will update right padding on the text area.
      */
-    rightElement?: JSX.Element;
+    rightElement?: React.JSX.Element;
     /**
      * Add HTML properties to the wrapper element.
      * The element wraps `TextArea` in case of a given `wrapperDivProps`, `leftIcon` or `rightElement` property.
      */
     wrapperDivProps?: Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    /**
+     * Whether the text area should automatically grow vertically to accommodate content.
+     * @deprecated (v27) use the `autoResize` property instead.
+     */
+    growVertically?: boolean;
 }
 
 export const TextArea = ({
@@ -81,7 +86,7 @@ export const TextArea = ({
                     } else {
                         leftIconElement.style.setProperty(
                             "top",
-                            `${((textAreaElementRect.height ?? 0) - (leftIconElementRect.height ?? 0)) * 0.5}px`
+                            `${((textAreaElementRect.height ?? 0) - (leftIconElementRect.height ?? 0)) * 0.5}px`,
                         );
                     }
                     leftIconElement.style.setProperty("left", textAreaStyle.paddingLeft);
@@ -89,7 +94,7 @@ export const TextArea = ({
                         "padding-left",
                         `calc(${leftIconElementRect.width ? 2 : 1} * ${textAreaStyle.paddingLeft} + ${
                             leftIconElementRect.width ?? 0
-                        }px)`
+                        }px)`,
                     );
                     leftIconElement.addEventListener("click", () => {
                         textAreaElement.focus();
@@ -98,7 +103,7 @@ export const TextArea = ({
 
                 if (rightElement && wrapperElement) {
                     const rightElementElement = wrapperElement.querySelector(
-                        `.${eccgui}-textarea__options`
+                        `.${eccgui}-textarea__options`,
                     ) as HTMLElement;
                     const rightElementElementRect = rightElementElement.getBoundingClientRect();
                     if (
@@ -109,7 +114,7 @@ export const TextArea = ({
                     } else {
                         rightElementElement.style.setProperty(
                             "top",
-                            `${((textAreaElementRect.height ?? 0) - (rightElementElementRect.height ?? 0)) * 0.5}px`
+                            `${((textAreaElementRect.height ?? 0) - (rightElementElementRect.height ?? 0)) * 0.5}px`,
                         );
                     }
                     rightElementElement.style.setProperty("right", textAreaStyle.paddingRight);
@@ -117,12 +122,12 @@ export const TextArea = ({
                         "padding-right",
                         `calc(${rightElementElementRect.width ? 2 : 1} * ${textAreaStyle.paddingRight} + ${
                             rightElementElementRect.width ?? 0
-                        }px)`
+                        }px)`,
                     );
                 }
             }
         },
-        [leftIcon, rightElement]
+        [leftIcon, rightElement],
     );
 
     let iconIntent;

package/src/components/TextField/TextField.tsx

@@ -15,8 +15,9 @@ import Icon from "../Icon/Icon";
 
 import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
-export interface TextFieldProps
-    extends Partial<Omit<BlueprintInputGroupProps, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
+export interface TextFieldProps extends Partial<
+    Omit<BlueprintInputGroupProps, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps
+> {
     /**
      * Intent state of the text field.
      */
@@ -71,7 +72,7 @@ export const TextField = ({
             }
             return otherBlueprintInputGroupProps.onKeyDown?.(event);
         },
-        [otherBlueprintInputGroupProps.onKeyDown, escapeToBlur]
+        [otherBlueprintInputGroupProps.onKeyDown, escapeToBlur],
     );
 
     let iconIntent;

package/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 {