@eccenca/gui-elements 23.5.0 → 23.6.0-rc.0

package/src/components/TextField/SearchField.tsx

@@ -1,26 +1,30 @@
 import React from "react";
+
+import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import IconButton from "../Icon/IconButton";
 import Icon from "../Icon/Icon";
+import IconButton from "../Icon/IconButton";
+
 import TextField, { TextFieldProps } from "./TextField";
-import { TestableComponent } from "../../components/interfaces";
 
-export interface SearchFieldProps extends TestableComponent, Omit<
-    TextFieldProps,
-    "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
-> {
+export interface SearchFieldProps
+    extends TestableComponent,
+        Omit<
+            TextFieldProps,
+            "placeholder | hasStatePrimary | hasStateSuccess | hasStateWarning | hasStateDanger | fullWidth"
+        > {
     /**
-    * Placeholder text for search box.
-    */
+     * Placeholder text for search box.
+     */
     emptySearchInputMessage?: string;
     /**
-    * Event handler to reset search input.
-    * If set then `rightElement` is automatically set with an action button to trigger the handler.
-    */
+     * Event handler to reset search input.
+     * If set then `rightElement` is automatically set with an action button to trigger the handler.
+     */
     onClearanceHandler?: () => void;
     /**
-    * Tooltip to show for the clear button.
-    */
+     * Tooltip to show for the clear button.
+     */
     onClearanceText?: string;
 }
 
@@ -28,44 +32,39 @@ export interface SearchFieldProps extends TestableComponent, Omit<
  * Special `TextField` element for search term inputs.
  */
 export const SearchField = ({
-  className = "",
-  emptySearchInputMessage = "Enter search term",
-  onClearanceHandler,
-  onClearanceText = "Clear input",
-  leftIcon = <Icon name="operation-search" />,
-  ...otherProps
+    className = "",
+    emptySearchInputMessage = "Enter search term",
+    onClearanceHandler,
+    onClearanceText = "Clear input",
+    leftIcon = <Icon name="operation-search" />,
+    ...otherProps
 }: SearchFieldProps) => {
-  return (
-    <TextField
-      className={
-        `${eccgui}-textfield--searchinput` +
-        (onClearanceHandler ? ` ${eccgui}-textfield--justifyclearance` : "") +
-        (className ? ` ${className}` : "")
-      }
-      dir={"auto"}
-      placeholder={emptySearchInputMessage}
-      aria-label={emptySearchInputMessage}
-      rightElement={
-        onClearanceHandler && otherProps.value ? (
-          <IconButton
-            data-test-id={
-              otherProps["data-test-id"] &&
-              `${otherProps["data-test-id"]}-clear-btn`
+    return (
+        <TextField
+            className={
+                `${eccgui}-textfield--searchinput` +
+                (onClearanceHandler ? ` ${eccgui}-textfield--justifyclearance` : "") +
+                (className ? ` ${className}` : "")
             }
-            name="operation-clear"
-            text={
-              onClearanceText ? onClearanceText : "Clear current search term"
+            dir={"auto"}
+            placeholder={emptySearchInputMessage}
+            aria-label={emptySearchInputMessage}
+            rightElement={
+                onClearanceHandler && otherProps.value ? (
+                    <IconButton
+                        data-test-id={otherProps["data-test-id"] && `${otherProps["data-test-id"]}-clear-btn`}
+                        name="operation-clear"
+                        text={onClearanceText ? onClearanceText : "Clear current search term"}
+                        onClick={onClearanceHandler}
+                    />
+                ) : undefined
             }
-            onClick={onClearanceHandler}
-          />
-        ) : undefined
-      }
-      {...otherProps}
-      type={"search"}
-      leftIcon={leftIcon}
-      round={true}
-    />
-  );
-}
+            {...otherProps}
+            type={"search"}
+            leftIcon={leftIcon}
+            round={true}
+        />
+    );
+};
 
 export default SearchField;

package/src/components/TextField/TextArea.tsx

@@ -1,75 +1,77 @@
 import React from "react";
 import {
-  TextArea as BlueprintTextArea,
-  Intent as BlueprintIntent,
-  TextAreaProps as BlueprintTextAreaProps,
+    Intent as BlueprintIntent,
+    TextArea as BlueprintTextArea,
+    TextAreaProps as BlueprintTextAreaProps,
 } from "@blueprintjs/core";
+
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
-import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
+
+import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
 
 export interface TextAreaProps extends Partial<BlueprintTextAreaProps> {
     /**
-    * when set to true the input takes a blue border color
-    */
+     * when set to true the input takes a blue border color
+     */
     hasStatePrimary?: boolean;
     /**
-    * when set to true the input takes a green border color
-    */
+     * when set to true the input takes a green border color
+     */
     hasStateSuccess?: boolean;
     /**
-    * when set to true the input takes an orange border color
-    */
+     * when set to true the input takes an orange border color
+     */
     hasStateWarning?: boolean;
     /**
-    * when set to true the input takes a red border color
-    */
+     * when set to true the input takes a red border color
+     */
     hasStateDanger?: boolean;
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
-    invisibleCharacterWarning?: InvisibleCharacterWarningProps
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 }
 
 export const TextArea = ({
-  className = "",
-  hasStatePrimary = false,
-  hasStateSuccess = false,
-  hasStateWarning = false,
-  hasStateDanger = false,
-  rows = 5,
-  invisibleCharacterWarning,
-  ...otherProps
+    className = "",
+    hasStatePrimary = false,
+    hasStateSuccess = false,
+    hasStateWarning = false,
+    hasStateDanger = false,
+    rows = 5,
+    invisibleCharacterWarning,
+    ...otherProps
 }: TextAreaProps) => {
-  let intent;
-  switch (true) {
-    case hasStatePrimary:
-      intent = BlueprintIntent.PRIMARY;
-      break;
-    case hasStateSuccess:
-      intent = BlueprintIntent.SUCCESS;
-      break;
-    case hasStateWarning:
-      intent = BlueprintIntent.WARNING;
-      break;
-    case hasStateDanger:
-      intent = BlueprintIntent.DANGER;
-      break;
-    default:
-      break;
-  }
+    let intent;
+    switch (true) {
+        case hasStatePrimary:
+            intent = BlueprintIntent.PRIMARY;
+            break;
+        case hasStateSuccess:
+            intent = BlueprintIntent.SUCCESS;
+            break;
+        case hasStateWarning:
+            intent = BlueprintIntent.WARNING;
+            break;
+        case hasStateDanger:
+            intent = BlueprintIntent.DANGER;
+            break;
+        default:
+            break;
+    }
 
-  const maybeWrappedOnChange = useTextValidation({...otherProps, invisibleCharacterWarning})
+    const maybeWrappedOnChange = useTextValidation({ ...otherProps, invisibleCharacterWarning });
 
-  return (
-    <BlueprintTextArea
-      className={`${eccgui}-textarea ` + className}
-      intent={intent}
-      rows={rows ? rows : undefined}
-      {...otherProps}
-      dir={"auto"}
-      onChange={maybeWrappedOnChange}
-    />
-  );
-}
+    return (
+        <BlueprintTextArea
+            className={`${eccgui}-textarea ` + className}
+            intent={intent}
+            rows={rows ? rows : undefined}
+            {...otherProps}
+            dir={"auto"}
+            onChange={maybeWrappedOnChange}
+        />
+    );
+};
 
 export default TextArea;

package/src/components/TextField/TextField.tsx

@@ -1,4 +1,4 @@
-import React, {KeyboardEventHandler, RefObject} from "react";
+import React, { KeyboardEventHandler, RefObject } from "react";
 import {
     Classes as BlueprintClassNames,
     HTMLInputProps,
@@ -7,37 +7,40 @@ import {
     Intent as BlueprintIntent,
     MaybeElement,
 } from "@blueprintjs/core";
-import {Definitions as IntentDefinitions, IntentTypes} from "../../common/Intent";
+
+import { Definitions as IntentDefinitions, IntentTypes } from "../../common/Intent";
+import { CLASSPREFIX as eccgui } from "../../configuration/constants";
+import { ValidIconName } from "../Icon/canonicalIconNames";
 import Icon from "../Icon/Icon";
-import {CLASSPREFIX as eccgui} from "../../configuration/constants";
-import {ValidIconName} from "../Icon/canonicalIconNames";
-import {InvisibleCharacterWarningProps, useTextValidation} from "./useTextValidation";
 
-export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
+import { InvisibleCharacterWarningProps, useTextValidation } from "./useTextValidation";
+
+export interface TextFieldProps
+    extends Partial<Omit<InputGroupProps2, "intent" | "leftIcon" | "leftElement"> & HTMLInputProps> {
     /**
-    * The input element is displayed with primary color scheme.
-    * @deprecated
-    */
+     * The input element is displayed with primary color scheme.
+     * @deprecated
+     */
     hasStatePrimary?: boolean;
     /**
-    * The input element is displayed with success (some type of green) color scheme.
-    * @deprecated
-    */
+     * The input element is displayed with success (some type of green) color scheme.
+     * @deprecated
+     */
     hasStateSuccess?: boolean;
     /**
-    * The input element is displayed with warning (some type of orange) color scheme.
-    * @deprecated
-    */
+     * The input element is displayed with warning (some type of orange) color scheme.
+     * @deprecated
+     */
     hasStateWarning?: boolean;
     /**
-    * The input element is displayed with danger (some type of red) color scheme.
-    * @deprecated
-    */
+     * The input element is displayed with danger (some type of red) color scheme.
+     * @deprecated
+     */
     hasStateDanger?: boolean;
     /**
      * Intent state of the text field.
      */
-    intent?: IntentTypes | "edited" | "removed"
+    intent?: IntentTypes | "edited" | "removed";
     /**
      * The input element uses the full horizontal width of the parent container.
      */
@@ -49,118 +52,126 @@ export interface TextFieldProps extends Partial<Omit<InputGroupProps2, "intent"
     /**
      * If set, allows to be informed of invisible, hard to spot characters in the string value.
      */
-    invisibleCharacterWarning?: InvisibleCharacterWarningProps
+    invisibleCharacterWarning?: InvisibleCharacterWarningProps;
 
     /** If true pressing the Escape key will blur/de-focus the input field. Default: false */
-    escapeToBlur?: boolean
+    escapeToBlur?: boolean;
 }
 
 /**
-  * Text input field.
-  */
+ * Text input field.
+ */
 export const TextField = ({
-  className = "",
-  hasStatePrimary = false,
-  hasStateSuccess = false,
-  hasStateWarning = false,
-  hasStateDanger = false,
-  fullWidth = true,
-  leftIcon,
-  invisibleCharacterWarning,
-  escapeToBlur = false,
-  ...otherProps
+    className = "",
+    hasStatePrimary = false,
+    hasStateSuccess = false,
+    hasStateWarning = false,
+    hasStateDanger = false,
+    fullWidth = true,
+    leftIcon,
+    invisibleCharacterWarning,
+    escapeToBlur = false,
+    ...otherProps
 }: TextFieldProps) => {
-    const inputRef = React.useRef<HTMLInputElement | null>(null)
-  let deprecatedIntent;
-  switch (true) {
-    case hasStatePrimary:
-      deprecatedIntent = IntentDefinitions.PRIMARY;
-      break;
-    case hasStateSuccess:
-      deprecatedIntent = IntentDefinitions.SUCCESS;
-      break;
-    case hasStateWarning:
-      deprecatedIntent = IntentDefinitions.WARNING;
-      break;
-    case hasStateDanger:
-      deprecatedIntent = IntentDefinitions.DANGER;
-      break;
-    default:
-      break;
-  }
+    const inputRef = React.useRef<HTMLInputElement | null>(null);
+    let deprecatedIntent;
+    switch (true) {
+        case hasStatePrimary:
+            deprecatedIntent = IntentDefinitions.PRIMARY;
+            break;
+        case hasStateSuccess:
+            deprecatedIntent = IntentDefinitions.SUCCESS;
+            break;
+        case hasStateWarning:
+            deprecatedIntent = IntentDefinitions.WARNING;
+            break;
+        case hasStateDanger:
+            deprecatedIntent = IntentDefinitions.DANGER;
+            break;
+        default:
+            break;
+    }
 
     const handleLabelEscape = React.useCallback(() => {
-        inputRef.current?.blur()
-        if(otherProps.inputRef) {
-            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>
-            if(otherInputRef.current) {
-                otherInputRef.current.blur()
+        inputRef.current?.blur();
+        if (otherProps.inputRef) {
+            const otherInputRef = otherProps.inputRef as RefObject<HTMLInputElement>;
+            if (otherInputRef.current) {
+                otherInputRef.current.blur();
             }
         }
-    }, [])
+    }, []);
 
-    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback((event) => {
-        if(escapeToBlur && event.key === "Escape") {
-            event.preventDefault()
-            handleLabelEscape()
-            return false
-        }
-        return otherProps.onKeyDown?.(event)
-    }, [otherProps.onKeyDown, escapeToBlur])
+    const onKeyDown: KeyboardEventHandler<HTMLInputElement> = React.useCallback(
+        (event) => {
+            if (escapeToBlur && event.key === "Escape") {
+                event.preventDefault();
+                handleLabelEscape();
+                return false;
+            }
+            return otherProps.onKeyDown?.(event);
+        },
+        [otherProps.onKeyDown, escapeToBlur]
+    );
 
-  const {
-      intent = deprecatedIntent,
-      ...otherBlueprintInputGroupProps
-  } = otherProps;
+    const { intent = deprecatedIntent, ...otherBlueprintInputGroupProps } = otherProps;
 
-  let iconIntent;
-  switch (intent) {
-      case "edited":
-        iconIntent = IntentDefinitions.INFO;
-        break;
-      case "removed":
-        iconIntent = IntentDefinitions.DANGER;
-        break;
-      default:
-        iconIntent = intent as IntentTypes;
-        break;
-  }
+    let iconIntent;
+    switch (intent) {
+        case "edited":
+            iconIntent = IntentDefinitions.INFO;
+            break;
+        case "removed":
+            iconIntent = IntentDefinitions.DANGER;
+            break;
+        default:
+            iconIntent = intent as IntentTypes;
+            break;
+    }
 
-  const maybeWrappedOnChange = useTextValidation({...otherBlueprintInputGroupProps, invisibleCharacterWarning})
+    const maybeWrappedOnChange = useTextValidation({ ...otherBlueprintInputGroupProps, invisibleCharacterWarning });
 
-  if ((otherBlueprintInputGroupProps.readOnly || otherBlueprintInputGroupProps.disabled) && !!otherBlueprintInputGroupProps.value && !otherBlueprintInputGroupProps.title) {
-      otherBlueprintInputGroupProps["title"] = otherBlueprintInputGroupProps.value;
-  }
+    if (
+        (otherBlueprintInputGroupProps.readOnly || otherBlueprintInputGroupProps.disabled) &&
+        !!otherBlueprintInputGroupProps.value &&
+        !otherBlueprintInputGroupProps.title
+    ) {
+        otherBlueprintInputGroupProps["title"] = otherBlueprintInputGroupProps.value;
+    }
 
-  return (
-    <BlueprintInputGroup
-        inputRef={inputRef}
-      className={
-          `${eccgui}-textfield` +
-          (intent ? ` ${eccgui}-intent--${intent}` : "") +
-          (!!className ? ` ${className}` : "")
-      }
-      intent={(intent && !(["info", "edited", "removed", "neutral"].includes(intent))) ? intent as BlueprintIntent : undefined}
-      fill={fullWidth}
-      {...otherBlueprintInputGroupProps}
-      leftElement={
-        leftIcon != null && leftIcon !== false ? (
-          typeof leftIcon === "string" ? (
-            <Icon
-              name={leftIcon}
-              className={BlueprintClassNames.ICON}
-              intent={iconIntent as IntentTypes | undefined}
-            />
-          ) : (
-            <span className={BlueprintClassNames.ICON}>{leftIcon}</span>
-          )
-        ) : undefined
-      }
-      dir={"auto"}
-      onChange={maybeWrappedOnChange}
-        onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
-    />
-  );
-}
+    return (
+        <BlueprintInputGroup
+            inputRef={inputRef}
+            className={
+                `${eccgui}-textfield` +
+                (intent ? ` ${eccgui}-intent--${intent}` : "") +
+                (className ? ` ${className}` : "")
+            }
+            intent={
+                intent && !["info", "edited", "removed", "neutral"].includes(intent)
+                    ? (intent as BlueprintIntent)
+                    : undefined
+            }
+            fill={fullWidth}
+            {...otherBlueprintInputGroupProps}
+            leftElement={
+                leftIcon != null && leftIcon !== false ? (
+                    typeof leftIcon === "string" ? (
+                        <Icon
+                            name={leftIcon as ValidIconName}
+                            className={BlueprintClassNames.ICON}
+                            intent={iconIntent as IntentTypes | undefined}
+                        />
+                    ) : (
+                        <span className={BlueprintClassNames.ICON}>{leftIcon}</span>
+                    )
+                ) : undefined
+            }
+            dir={"auto"}
+            onChange={maybeWrappedOnChange}
+            onKeyDown={otherProps.onKeyDown || escapeToBlur ? onKeyDown : undefined}
+        />
+    );
+};
 
 export default TextField;

package/src/components/TextField/stories/SearchField.stories.tsx

@@ -1,23 +1,21 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
 
 import SearchField from "./../SearchField";
 
 export default {
-  title: "Components/SearchField",
-  component: SearchField,
-  argTypes: {
-      hasStatePrimary: { table: { disable: true } },
-      hasStateSuccess: { table: { disable: true } },
-      hasStateWarning: { table: { disable: true } },
-      hasStateDanger: { table: { disable: true } },
-      fullWidth: { table: { disable: true } },
-  },
+    title: "Components/SearchField",
+    component: SearchField,
+    argTypes: {
+        hasStatePrimary: { table: { disable: true } },
+        hasStateSuccess: { table: { disable: true } },
+        hasStateWarning: { table: { disable: true } },
+        hasStateDanger: { table: { disable: true } },
+        fullWidth: { table: { disable: true } },
+    },
 } as ComponentMeta<typeof SearchField>;
 
-const Template: ComponentStory<typeof SearchField> = (args) => (
-  <SearchField {...args}></SearchField>
-);
+const Template: ComponentStory<typeof SearchField> = (args) => <SearchField {...args}></SearchField>;
 
 export const Default = Template.bind({});
 Default.args = {
@@ -25,16 +23,14 @@ Default.args = {
     onClearanceText: "",
 };
 
-export const SearchFieldWithClearanceIcon: ComponentStory<typeof SearchField> = (
-  args
-) => {
-  const [query, setQuery] = React.useState<string>("");
-  return (
-    <SearchField
-      {...args}
-      value={query}
-      onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
-      onClearanceHandler={() => setQuery("")}
-    />
-  );
+export const SearchFieldWithClearanceIcon: ComponentStory<typeof SearchField> = (args) => {
+    const [query, setQuery] = React.useState<string>("");
+    return (
+        <SearchField
+            {...args}
+            value={query}
+            onChange={(e) => setQuery((e.target as HTMLInputElement).value)}
+            onClearanceHandler={() => setQuery("")}
+        />
+    );
 };

package/src/components/TextField/stories/TextArea.stories.tsx

@@ -1,18 +1,16 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
-import { TextArea as CustomTextArea} from "./../../../../index";
+import { ComponentMeta, ComponentStory } from "@storybook/react";
+
+import { TextArea as CustomTextArea } from "./../../../../index";
 type TextAreaType = typeof CustomTextArea;
 
 export default {
     title: "Forms/TextArea",
     component: CustomTextArea,
-    argTypes: {
-    },
+    argTypes: {},
 } as ComponentMeta<TextAreaType>;
 
-const Template: ComponentStory<TextAreaType> = (args) => (
-    <CustomTextArea {...args}></CustomTextArea>
-);
+const Template: ComponentStory<TextAreaType> = (args) => <CustomTextArea {...args}></CustomTextArea>;
 
 export const Default = Template.bind({});
 Default.args = {