@hitachivantara/uikit-react-core 5.44.1 → 5.44.3

package/dist/esm/Input/Input.js

@@ -0,0 +1,501 @@
+import { jsx, jsxs, Fragment } from "@emotion/react/jsx-runtime";
+import React__default, { forwardRef, useRef, useState, useMemo, useCallback, isValidElement, useEffect } from "react";
+import { useForkRef } from "@mui/material/utils";
+import { CloseXS, Search, PreviewOff, Preview, Success } from "@hitachivantara/uikit-react-icons";
+import { isBrowser } from "../utils/browser.js";
+import { isKey } from "../utils/keyboardUtils.js";
+import { setId } from "../utils/setId.js";
+import validationState, { isInvalid, isValid } from "../Forms/FormElement/validationStates.js";
+import { DEFAULT_ERROR_MESSAGES, computeValidationType, validateInput, computeValidationState, computeValidationMessage, hasBuiltInValidations } from "../BaseInput/validations.js";
+import { useControlled } from "../hooks/useControlled.js";
+import { useIsMounted } from "../hooks/useIsMounted.js";
+import { useUniqueId } from "../hooks/useUniqueId.js";
+import { useLabels } from "../hooks/useLabels.js";
+import { useDefaultProps } from "../hooks/useDefaultProps.js";
+import { useClasses } from "./Input.styles.js";
+import { staticClasses } from "./Input.styles.js";
+import { HvAdornment } from "../Forms/Adornment/Adornment.js";
+import { HvBaseInput } from "../BaseInput/BaseInput.js";
+import { HvSuggestions } from "../Forms/Suggestions/Suggestions.js";
+import { HvTooltip } from "../Tooltip/Tooltip.js";
+import { HvTypography } from "../Typography/Typography.js";
+import { HvFormElement } from "../Forms/FormElement/FormElement.js";
+import { HvLabel } from "../Forms/Label/Label.js";
+import { HvInfoMessage } from "../Forms/InfoMessage/InfoMessage.js";
+import { HvWarningText } from "../Forms/WarningText/WarningText.js";
+const DEFAULT_LABELS = {
+  clearButtonLabel: "Clear the text",
+  revealPasswordButtonLabel: "Reveal password",
+  revealPasswordButtonClickToShowTooltip: "Click to show password.",
+  revealPasswordButtonClickToHideTooltip: "Click to hide password.",
+  searchButtonLabel: "Search"
+};
+const getFocusedElement = (event) => isBrowser("ie") ? document.activeElement : event.relatedTarget;
+function eventTargetIsInsideContainer(container, event) {
+  return container != null && container.contains(getFocusedElement(event));
+}
+const changeInputValue = (input, value = "") => {
+  const event = new Event("input", { bubbles: true });
+  const setInputValue = Object.getOwnPropertyDescriptor(
+    window.HTMLInputElement.prototype,
+    "value"
+  )?.set;
+  setInputValue?.call(input, value);
+  input?.dispatchEvent(event);
+};
+const HvInput = forwardRef((props, ref) => {
+  const {
+    classes: classesProp,
+    className,
+    id,
+    name,
+    value: valueProp,
+    defaultValue = "",
+    required = false,
+    readOnly = false,
+    disabled = false,
+    label,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    description,
+    "aria-describedby": ariaDescribedBy,
+    onChange,
+    onEnter,
+    status,
+    statusMessage,
+    "aria-errormessage": ariaErrorMessage,
+    type = "text",
+    placeholder,
+    autoFocus = false,
+    labels: labelsProp,
+    validationMessages,
+    disableClear = false,
+    disableRevealPassword = false,
+    disableSearchButton = false,
+    endAdornment,
+    maxCharQuantity,
+    minCharQuantity,
+    validation,
+    showValidationIcon = false,
+    suggestionListCallback,
+    inputRef: inputRefProp,
+    onBlur,
+    onFocus,
+    onKeyDown,
+    inputProps = {},
+    ...others
+  } = useDefaultProps("HvInput", props);
+  const { classes, cx } = useClasses(classesProp);
+  const labels = useLabels(DEFAULT_LABELS, labelsProp);
+  const elementId = useUniqueId(id, "hvinput");
+  const inputRef = useRef(null);
+  const forkedRef = useForkRef(ref, inputRef, inputRefProp);
+  const suggestionsRef = useRef(null);
+  const [focused, setFocused] = useState(false);
+  const isDirty = useRef(false);
+  const [value, setValue] = useControlled(valueProp, defaultValue);
+  const isEmptyValue = value == null || value === "";
+  const [validationState$1, setValidationState] = useControlled(
+    status,
+    validationState.standBy
+  );
+  const [validationMessage, setValidationMessage] = useControlled(
+    statusMessage,
+    ""
+  );
+  const errorMessages = useMemo(
+    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      validationMessages?.error,
+      validationMessages?.requiredError,
+      validationMessages?.minCharError,
+      validationMessages?.maxCharError,
+      validationMessages?.typeMismatchError
+    ]
+  );
+  const validationType = useMemo(() => computeValidationType(type), [type]);
+  const performValidation = useCallback(() => {
+    const inputValidity = validateInput(
+      inputRef.current,
+      value,
+      required,
+      minCharQuantity,
+      maxCharQuantity,
+      validationType,
+      validation
+    );
+    setValidationState(computeValidationState(inputValidity, isEmptyValue));
+    setValidationMessage(
+      computeValidationMessage(inputValidity, errorMessages)
+    );
+    return inputValidity;
+  }, [
+    errorMessages,
+    isEmptyValue,
+    maxCharQuantity,
+    minCharQuantity,
+    required,
+    setValidationMessage,
+    setValidationState,
+    validation,
+    validationType,
+    value
+  ]);
+  const canShowError = ariaErrorMessage == null && (status !== void 0 && statusMessage !== void 0 || status === void 0 && hasBuiltInValidations(
+    required,
+    validationType,
+    minCharQuantity,
+    maxCharQuantity,
+    validation,
+    inputProps
+  ));
+  const isStateInvalid = isInvalid(validationState$1);
+  const [revealPassword, setRevealPassword] = useState(false);
+  const realType = useMemo(() => {
+    if (type === "password") {
+      return revealPassword ? "text" : "password";
+    }
+    if (type === "search") {
+      return "search";
+    }
+    return "text";
+  }, [revealPassword, type]);
+  const [suggestionValues, setSuggestionValues] = useState(null);
+  const canShowSuggestions = suggestionListCallback != null;
+  const hasSuggestions = !!suggestionValues;
+  const hasLabel = label != null;
+  const hasDescription = description != null;
+  const focusInput = () => {
+    inputRef.current?.focus();
+  };
+  const isMounted = useIsMounted();
+  const suggestionClearHandler = () => {
+    if (isMounted.current) {
+      setSuggestionValues(null);
+    }
+  };
+  const suggestionHandler = (val) => {
+    const suggestionsArray = suggestionListCallback?.(val);
+    if (suggestionsArray?.[0]?.label) {
+      setSuggestionValues(suggestionsArray);
+    } else {
+      suggestionClearHandler();
+    }
+  };
+  const suggestionSelectedHandler = (event, item) => {
+    const newValue = item.value || item.label;
+    changeInputValue(inputRef.current, newValue);
+    focusInput();
+    suggestionClearHandler();
+    if (type === "search") {
+      onEnter?.(event, newValue);
+    }
+  };
+  const onChangeHandler = (event, newValue) => {
+    isDirty.current = true;
+    setValue(newValue);
+    onChange?.(event, newValue);
+    if (canShowSuggestions) {
+      suggestionHandler(newValue);
+    }
+  };
+  const onInputBlurHandler = (event) => {
+    if (eventTargetIsInsideContainer(suggestionsRef.current, event))
+      return;
+    setFocused(false);
+    const inputValidity = performValidation();
+    onBlur?.(event, value, inputValidity);
+  };
+  const onFocusHandler = (event) => {
+    setFocused(true);
+    setValidationState(validationState.standBy);
+    onFocus?.(event, value);
+  };
+  const getSuggestions = (li) => {
+    const listEl = document.getElementById(
+      setId(elementId, "suggestions-list") || ""
+    );
+    return li != null ? listEl?.getElementsByTagName("li")?.[li] : listEl;
+  };
+  const onSuggestionKeyDown = (event) => {
+    if (isKey(event, "Esc")) {
+      suggestionClearHandler();
+      focusInput();
+    } else if (isKey(event, "Tab")) {
+      suggestionClearHandler();
+    }
+  };
+  const onKeyDownHandler = (event) => {
+    if (isKey(event, "ArrowDown") && hasSuggestions) {
+      const li = getSuggestions(0);
+      li?.focus();
+    } else if (isKey(event, "Enter")) {
+      onEnter?.(event, value);
+    }
+    onKeyDown?.(event, value);
+  };
+  const onContainerBlurHandler = (event) => {
+    if (event.relatedTarget) {
+      setTimeout(() => {
+        const list = getSuggestions(null);
+        if (!list?.contains(document.activeElement))
+          suggestionClearHandler();
+      }, 10);
+    }
+  };
+  const hasOnEnter = onEnter != null;
+  const showClear = !disabled && !readOnly && !disableClear && !isEmptyValue && (!hasOnEnter || type !== "search" || disableSearchButton || validationState$1 !== validationState.standBy);
+  const showSearchIcon = type === "search" && !disableSearchButton;
+  const showRevealPasswordButton = type === "password" && !disableRevealPassword;
+  const handleClear = useCallback(() => {
+    setValidationState(validationState.standBy);
+    changeInputValue(inputRef.current, "");
+    setTimeout(focusInput);
+  }, [setValidationState]);
+  const clearButton = useMemo(() => {
+    if (!showClear) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      HvAdornment,
+      {
+        className: cx(classes.adornmentButton, {
+          [classes.iconClear]: !showSearchIcon
+        }),
+        onClick: handleClear,
+        "aria-label": labels?.clearButtonLabel,
+        "aria-controls": setId(elementId, "input"),
+        icon: /* @__PURE__ */ jsx(CloseXS, {})
+      }
+    );
+  }, [
+    showClear,
+    classes.adornmentButton,
+    classes.iconClear,
+    showSearchIcon,
+    handleClear,
+    labels?.clearButtonLabel,
+    elementId,
+    cx
+  ]);
+  const handleSearch = useCallback(
+    (event) => {
+      onEnter?.(event, value);
+    },
+    [onEnter, value]
+  );
+  const searchButton = useMemo(() => {
+    const reallyShowIt = showSearchIcon && (isEmptyValue || hasOnEnter && validationState$1 === validationState.standBy);
+    if (!reallyShowIt) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      HvAdornment,
+      {
+        className: classes.adornmentButton,
+        onClick: hasOnEnter ? handleSearch : void 0,
+        "aria-label": labels?.searchButtonLabel,
+        icon: /* @__PURE__ */ jsx(Search, {})
+      }
+    );
+  }, [
+    showSearchIcon,
+    isEmptyValue,
+    hasOnEnter,
+    validationState$1,
+    classes.adornmentButton,
+    handleSearch,
+    labels?.searchButtonLabel
+  ]);
+  const handleRevealPassword = useCallback(() => {
+    setRevealPassword(!revealPassword);
+  }, [revealPassword]);
+  const revealPasswordButton = useMemo(() => {
+    if (!showRevealPasswordButton) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(
+      HvTooltip,
+      {
+        disableFocusListener: true,
+        disableTouchListener: true,
+        title: /* @__PURE__ */ jsx(HvTypography, { children: revealPassword ? labels?.revealPasswordButtonClickToHideTooltip : labels?.revealPasswordButtonClickToShowTooltip }),
+        children: /* @__PURE__ */ jsx(
+          HvAdornment,
+          {
+            className: classes.adornmentButton,
+            onClick: handleRevealPassword,
+            "aria-label": labels?.revealPasswordButtonLabel,
+            "aria-controls": setId(elementId, "input"),
+            icon: revealPassword ? /* @__PURE__ */ jsx(PreviewOff, {}) : /* @__PURE__ */ jsx(Preview, {})
+          }
+        )
+      }
+    );
+  }, [
+    showRevealPasswordButton,
+    revealPassword,
+    labels?.revealPasswordButtonClickToHideTooltip,
+    labels?.revealPasswordButtonClickToShowTooltip,
+    labels?.revealPasswordButtonLabel,
+    classes.adornmentButton,
+    handleRevealPassword,
+    elementId
+  ]);
+  const validationIcon = useMemo(() => {
+    if (!showValidationIcon) {
+      return null;
+    }
+    if (!isValid(validationState$1)) {
+      return null;
+    }
+    return /* @__PURE__ */ jsx(Success, { color: "positive", className: classes.icon });
+  }, [showValidationIcon, validationState$1, classes.icon]);
+  const customIconEl = useMemo(
+    () => isValidElement(endAdornment) && React__default.cloneElement(endAdornment, {
+      className: cx(endAdornment.props.className, classes.icon)
+    }),
+    [classes.icon, endAdornment, cx]
+  );
+  const adornments = useMemo(() => {
+    if (!clearButton && !revealPasswordButton && !searchButton && !validationIcon && !customIconEl)
+      return null;
+    return /* @__PURE__ */ jsxs("div", { className: classes.adornmentsBox, "aria-hidden": "true", children: [
+      clearButton,
+      revealPasswordButton,
+      searchButton,
+      validationIcon || customIconEl
+    ] });
+  }, [
+    classes.adornmentsBox,
+    clearButton,
+    customIconEl,
+    revealPasswordButton,
+    searchButton,
+    validationIcon
+  ]);
+  useEffect(() => {
+    if (focused || !isDirty.current && isEmptyValue) {
+      return;
+    }
+    performValidation();
+  }, [focused, isEmptyValue, performValidation]);
+  const errorMessageId = isStateInvalid ? canShowError ? setId(elementId, "error") : ariaErrorMessage : void 0;
+  return /* @__PURE__ */ jsxs(
+    HvFormElement,
+    {
+      id,
+      name,
+      status: validationState$1,
+      disabled,
+      required,
+      readOnly,
+      className: cx(
+        classes.root,
+        {
+          [classes.hasSuggestions]: hasSuggestions
+        },
+        className
+      ),
+      onBlur: onContainerBlurHandler,
+      children: [
+        (hasLabel || hasDescription) && /* @__PURE__ */ jsxs("div", { className: classes.labelContainer, children: [
+          hasLabel && /* @__PURE__ */ jsx(
+            HvLabel,
+            {
+              id: setId(elementId, "label"),
+              className: classes.label,
+              htmlFor: setId(elementId, "input"),
+              label
+            }
+          ),
+          hasDescription && /* @__PURE__ */ jsx(
+            HvInfoMessage,
+            {
+              id: setId(elementId, "description"),
+              className: classes.description,
+              children: description
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          HvBaseInput,
+          {
+            id: hasLabel || showClear || showRevealPasswordButton ? setId(elementId, "input") : setId(id, "input"),
+            name,
+            value,
+            required,
+            readOnly,
+            disabled,
+            onChange: onChangeHandler,
+            autoFocus,
+            onKeyDown: onKeyDownHandler,
+            onBlur: onInputBlurHandler,
+            onFocus: onFocusHandler,
+            placeholder,
+            type: realType,
+            classes: {
+              input: classes.input,
+              inputRoot: classes.inputRoot,
+              inputRootFocused: classes.inputRootFocused,
+              inputRootDisabled: classes.inputRootDisabled,
+              inputRootMultiline: classes.inputRootMultiline,
+              inputBorderContainer: classes.inputBorderContainer
+            },
+            invalid: isStateInvalid,
+            inputProps: {
+              "aria-label": ariaLabel,
+              "aria-labelledby": ariaLabelledBy,
+              "aria-invalid": isStateInvalid ? true : void 0,
+              "aria-errormessage": errorMessageId,
+              "aria-describedby": ariaDescribedBy != null ? ariaDescribedBy : description ? setId(elementId, "description") : void 0,
+              "aria-controls": canShowSuggestions ? setId(elementId, "suggestions") : void 0,
+              ref: inputRef,
+              // prevent browsers auto-fill/suggestions when we have our own
+              autoComplete: canShowSuggestions ? "off" : void 0,
+              ...inputProps
+            },
+            inputRef: forkedRef,
+            endAdornment: adornments,
+            ...others
+          }
+        ),
+        canShowSuggestions && /* @__PURE__ */ jsxs(Fragment, { children: [
+          hasSuggestions && /* @__PURE__ */ jsx("div", { role: "presentation", className: classes.inputExtension }),
+          /* @__PURE__ */ jsx(
+            HvSuggestions,
+            {
+              ref: suggestionsRef,
+              id: setId(elementId, "suggestions"),
+              classes: {
+                root: classes.suggestionsContainer,
+                list: classes.suggestionList
+              },
+              expanded: hasSuggestions,
+              anchorEl: inputRef.current?.parentElement,
+              onClose: suggestionClearHandler,
+              onKeyDown: onSuggestionKeyDown,
+              onSuggestionSelected: suggestionSelectedHandler,
+              suggestionValues
+            }
+          )
+        ] }),
+        canShowError && /* @__PURE__ */ jsx(
+          HvWarningText,
+          {
+            id: setId(elementId, "error"),
+            disableBorder: true,
+            className: classes.error,
+            children: validationMessage
+          }
+        )
+      ]
+    }
+  );
+});
+export {
+  HvInput,
+  staticClasses as inputClasses
+};
+//# sourceMappingURL=Input.js.map

package/dist/esm/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/Input/Input.tsx"],"sourcesContent":["import React, {\n  FocusEvent,\n  HTMLInputTypeAttribute,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { InputBaseComponentProps as MuiInputBaseComponentProps } from \"@mui/material/InputBase\";\nimport { useForkRef } from \"@mui/material/utils\";\n\nimport {\n  CloseXS,\n  PreviewOff,\n  Preview,\n  Search,\n  Success,\n} from \"@hitachivantara/uikit-react-icons\";\n\nimport { ExtractNames } from \"../utils/classes\";\nimport { isBrowser } from \"../utils/browser\";\nimport { isKey } from \"../utils/keyboardUtils\";\nimport { setId } from \"../utils/setId\";\nimport {\n  HvInputLabels,\n  HvInputSuggestion,\n  HvValidationMessages,\n} from \"../types/forms\";\nimport { HvBaseProps, HvExtraProps } from \"../types/generic\";\nimport {\n  HvAdornment,\n  HvAdornmentProps,\n  HvFormElement,\n  HvFormElementProps,\n  HvFormStatus,\n  HvInfoMessage,\n  HvLabel,\n  HvSuggestion,\n  HvSuggestions,\n  HvSuggestionsProps,\n  HvWarningText,\n  isValid,\n  isInvalid,\n} from \"../Forms\";\nimport validationStates from \"../Forms/FormElement/validationStates\";\nimport { HvBaseInput, HvBaseInputProps } from \"../BaseInput\";\nimport {\n  DEFAULT_ERROR_MESSAGES,\n  computeValidationType,\n  hasBuiltInValidations,\n  validateInput,\n  computeValidationState,\n  computeValidationMessage,\n  HvInputValidity,\n} from \"../BaseInput/validations\";\nimport { HvTypography } from \"../Typography\";\nimport { HvTooltip } from \"../Tooltip\";\nimport { useControlled } from \"../hooks/useControlled\";\nimport { useIsMounted } from \"../hooks/useIsMounted\";\nimport { useUniqueId } from \"../hooks/useUniqueId\";\nimport { useLabels } from \"../hooks/useLabels\";\n\nimport { useDefaultProps } from \"../hooks/useDefaultProps\";\n\nimport { staticClasses, useClasses } from \"./Input.styles\";\n\nexport { staticClasses as inputClasses };\n\nexport type HvInputClasses = ExtractNames<typeof useClasses>;\n\ntype InputElement = HTMLInputElement | HTMLTextAreaElement;\n\nexport interface HvInputProps\n  extends HvBaseProps<\n    HTMLElement,\n    \"onChange\" | \"onBlur\" | \"onFocus\" | \"onKeyDown\" | \"color\"\n  > {\n  /** The form element name. */\n  name?: string;\n  /** The value of the form element. */\n  value?: string;\n  /** When uncontrolled, defines the initial input value. */\n  defaultValue?: string;\n  /**\n   * The label of the form element.\n   *\n   * The form element must be labeled for accessibility reasons.\n   * If not provided, an aria-label or aria-labelledby must be inputted via inputProps.\n   */\n  label?: React.ReactNode;\n  /** Provide additional descriptive text for the form element. */\n  description?: React.ReactNode;\n  /** Indicates that the form element is disabled. */\n  disabled?: boolean;\n  /** Indicates that the form element is not editable. */\n  readOnly?: boolean;\n  /** Indicates that user input is required on the form element. */\n  required?: boolean;\n  /**\n   * The status of the form element.\n   *\n   * Valid is correct, invalid is incorrect and standBy means no validations have run.\n   *\n   * When uncontrolled and unspecified it will default to \"standBy\" and change to either \"valid\"\n   * or \"invalid\" after any change to `checked`, depending of the values of both `required` and `checked`.\n   */\n  status?: HvFormStatus;\n  /** The error message to show when `status` is \"invalid\". */\n  statusMessage?: string;\n  /**\n   * The function that will be executed onChange, allows modification of the input,\n   * it receives the value. If a new value should be presented it must returned it.\n   */\n  onChange?: HvBaseInputProps[\"onChange\"];\n  /**\n   * Callback called when the user submits the value by pressing Enter/Return.\n   *\n   * Also called when the search button is clicked (when type is \"search\").\n   */\n  onEnter?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the validation state,\n   * it receives the value and the validation state.\n   */\n  onBlur?: (\n    event: React.FocusEvent<InputElement>,\n    value: string,\n    validationState: HvInputValidity\n  ) => void;\n  /**\n   * The function that will be executed onBlur, allows checking the value state,\n   * it receives the value.\n   */\n  onFocus?: (event: React.FocusEvent<InputElement>, value: string) => void;\n  /**\n   * The function that will be executed onKeyDown, allows checking the value state,\n   * it receives the event and value.\n   */\n  onKeyDown?: (\n    event: React.KeyboardEvent<InputElement> | React.MouseEvent,\n    value: string\n  ) => void;\n  /** The input type. */\n  type?: HTMLInputTypeAttribute;\n  /** The placeholder value of the input. */\n  placeholder?: string;\n  /** Internal labels?. */\n  labels?: HvInputLabels & HvExtraProps;\n  /** An Object containing the various texts associated with the input. */\n  validationMessages?: HvValidationMessages;\n  /** Attributes applied to the input element. */\n  inputProps?: MuiInputBaseComponentProps;\n  /**\n   * Allows passing a ref to the underlying input\n   * @deprecated Use `ref` directly instead\n   * */\n  inputRef?: HvBaseInputProps[\"inputRef\"];\n  /** The function that will be executed to received an array of objects that has a label and id to create list of suggestion */\n  suggestionListCallback?: (value: string) => HvInputSuggestion[] | null;\n  /**\n   * The custom validation function, it receives the value and must return\n   * either `true` for valid or `false` for invalid, default validations would only\n   * occur if this function is null or undefined\n   */\n  validation?: (value: string) => boolean;\n  /** If `true` it should autofocus. */\n  autoFocus?: boolean;\n  /** If `true` the clear button is disabled. */\n  disableClear?: boolean;\n  /** If `true` the reveal password button is disabled. Valid only when type is \"password\". */\n  disableRevealPassword?: boolean;\n  /** If `true` the search button is disabled. Valid only when type is \"search\". */\n  disableSearchButton?: boolean;\n  /**\n   * If `true` the validation icon adornment is visible. Defaults to `false`.\n   *\n   * Currently, DS specifications define only a positive feedback icon;\n   * errors are signaled through the border style and by displaying the error message.\n   */\n  showValidationIcon?: boolean;\n  /** A custom icon to be added into the input. */\n  endAdornment?: React.ReactNode;\n  /** The maximum allowed length of the characters, if this value is null no check will be performed. */\n  maxCharQuantity?: number;\n  /** The minimum allowed length of the characters, if this value is null no check will be perform. */\n  minCharQuantity?: number;\n  /** A Jss Object used to override or extend the styles applied to the component. */\n  classes?: HvInputClasses;\n}\n\nconst DEFAULT_LABELS = {\n  clearButtonLabel: \"Clear the text\",\n  revealPasswordButtonLabel: \"Reveal password\",\n  revealPasswordButtonClickToShowTooltip: \"Click to show password.\",\n  revealPasswordButtonClickToHideTooltip: \"Click to hide password.\",\n  searchButtonLabel: \"Search\",\n};\n\n/**\n * Find the focused element onBlur.\n */\nconst getFocusedElement = (event: FocusEvent) =>\n  isBrowser(\"ie\") ? document.activeElement : event.relatedTarget;\n\nfunction eventTargetIsInsideContainer(\n  container: HTMLElement | null,\n  event: FocusEvent<any>\n) {\n  return container != null && container.contains(getFocusedElement(event));\n}\n\n/** Changes a given `input`'s `value`, triggering its `onChange` */\nconst changeInputValue = (input: HTMLInputElement | null, value = \"\") => {\n  const event = new Event(\"input\", { bubbles: true });\n\n  /** Original `input.value` setter (React overrides it). */\n  const setInputValue = Object.getOwnPropertyDescriptor(\n    window.HTMLInputElement.prototype,\n    \"value\"\n  )?.set;\n\n  setInputValue?.call(input, value);\n  input?.dispatchEvent(event);\n};\n\n/**\n * A text input box is a graphical control element intended to enable the user to input text information to be used by the software.\n */\nexport const HvInput = forwardRef<InputElement, HvInputProps>((props, ref) => {\n  const {\n    classes: classesProp,\n    className,\n    id,\n    name,\n    value: valueProp,\n    defaultValue = \"\",\n    required = false,\n    readOnly = false,\n    disabled = false,\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    description,\n    \"aria-describedby\": ariaDescribedBy,\n    onChange,\n    onEnter,\n    status,\n    statusMessage,\n    \"aria-errormessage\": ariaErrorMessage,\n    type = \"text\",\n    placeholder,\n    autoFocus = false,\n    labels: labelsProp,\n    validationMessages,\n    disableClear = false,\n    disableRevealPassword = false,\n    disableSearchButton = false,\n    endAdornment,\n    maxCharQuantity,\n    minCharQuantity,\n    validation,\n    showValidationIcon = false,\n    suggestionListCallback,\n    inputRef: inputRefProp,\n    onBlur,\n    onFocus,\n    onKeyDown,\n    inputProps = {},\n    ...others\n  } = useDefaultProps(\"HvInput\", props);\n  const { classes, cx } = useClasses(classesProp);\n  const labels = useLabels(DEFAULT_LABELS, labelsProp);\n  const elementId = useUniqueId(id, \"hvinput\");\n\n  const inputRef = useRef<HTMLInputElement>(null);\n  const forkedRef = useForkRef(ref, inputRef, inputRefProp);\n  const suggestionsRef = useRef<HTMLElement>(null);\n\n  const [focused, setFocused] = useState(false);\n\n  // Signals that the user has manually edited the input value\n  const isDirty = useRef(false);\n\n  // Value related state\n  const [value, setValue] = useControlled(valueProp, defaultValue);\n\n  const isEmptyValue = value == null || value === \"\";\n\n  // Validation related state\n  const [validationState, setValidationState] = useControlled(\n    status,\n    validationStates.standBy\n  );\n\n  const [validationMessage, setValidationMessage] = useControlled(\n    statusMessage,\n    \"\"\n  );\n\n  // validationMessages reference tends to change, as users will not memoize/useState for it;\n  // dependencies must be more explicit so we set\n  const errorMessages = useMemo(\n    () => ({ ...DEFAULT_ERROR_MESSAGES, ...validationMessages }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [\n      validationMessages?.error,\n      validationMessages?.requiredError,\n      validationMessages?.minCharError,\n      validationMessages?.maxCharError,\n      validationMessages?.typeMismatchError,\n    ]\n  );\n\n  const validationType = useMemo(() => computeValidationType(type), [type]);\n\n  // Validates the input, sets the status and the statusMessage accordingly (if uncontrolled)\n  // and returns the validity state of the input.\n  const performValidation = useCallback(() => {\n    const inputValidity = validateInput(\n      inputRef.current,\n      value,\n      required,\n      minCharQuantity,\n      maxCharQuantity,\n      validationType,\n      validation\n    );\n\n    // This will only run if status is uncontrolled\n    setValidationState(computeValidationState(inputValidity, isEmptyValue));\n\n    // This will only run if statusMessage is uncontrolled\n    setValidationMessage(\n      computeValidationMessage(inputValidity, errorMessages)\n    );\n\n    return inputValidity;\n  }, [\n    errorMessages,\n    isEmptyValue,\n    maxCharQuantity,\n    minCharQuantity,\n    required,\n    setValidationMessage,\n    setValidationState,\n    validation,\n    validationType,\n    value,\n  ]);\n\n  // The error message area will only be created if:\n  // - an external element that provides an error message isn't identified via aria-errormessage AND\n  //   - both status and statusMessage properties are being controlled OR\n  //   - status is uncontrolled and any of the built-in validations are active\n  const canShowError =\n    ariaErrorMessage == null &&\n    ((status !== undefined && statusMessage !== undefined) ||\n      (status === undefined &&\n        hasBuiltInValidations(\n          required,\n          validationType,\n          minCharQuantity,\n          maxCharQuantity,\n          validation,\n          inputProps\n        )));\n\n  const isStateInvalid = isInvalid(validationState);\n\n  // Input type related state\n  const [revealPassword, setRevealPassword] = useState(false);\n\n  const realType = useMemo(() => {\n    if (type === \"password\") {\n      return revealPassword ? \"text\" : \"password\";\n    }\n\n    if (type === \"search\") {\n      return \"search\";\n    }\n\n    return \"text\";\n  }, [revealPassword, type]);\n\n  // Suggestions related state\n  const [suggestionValues, setSuggestionValues] = useState<\n    HvSuggestion[] | null\n  >(null);\n\n  const canShowSuggestions = suggestionListCallback != null;\n  const hasSuggestions = !!suggestionValues;\n\n  // Miscellaneous state\n  const hasLabel = label != null;\n  const hasDescription = description != null;\n\n  /**\n   * Looks for the node that represent the input inside the material tree and focus it.\n   */\n  const focusInput = () => {\n    inputRef.current?.focus();\n  };\n\n  const isMounted = useIsMounted();\n\n  /**\n   * Clears the suggestion array.\n   */\n  const suggestionClearHandler = () => {\n    if (isMounted.current) {\n      setSuggestionValues(null);\n    }\n  };\n\n  /**\n   * Fills of the suggestion array.\n   */\n  const suggestionHandler = (val: string) => {\n    const suggestionsArray = suggestionListCallback?.(val);\n    if (suggestionsArray?.[0]?.label) {\n      setSuggestionValues(suggestionsArray);\n    } else {\n      suggestionClearHandler();\n    }\n  };\n\n  /**\n   * Executes the user callback adds the selection to the state and clears the suggestions.\n   */\n  const suggestionSelectedHandler: HvSuggestionsProps[\"onSuggestionSelected\"] =\n    (event, item) => {\n      const newValue = item.value || (item.label as any);\n\n      changeInputValue(inputRef.current, newValue);\n\n      focusInput();\n      suggestionClearHandler();\n\n      if (type === \"search\") {\n        // trigger the onEnter callback when the user selects an option in a search box\n        onEnter?.(event, newValue);\n      }\n    };\n\n  const onChangeHandler: HvBaseInputProps[\"onChange\"] = (event, newValue) => {\n    isDirty.current = true;\n\n    // set the input value (only when value is uncontrolled)\n    setValue(newValue);\n\n    onChange?.(event, newValue);\n\n    if (canShowSuggestions) {\n      // an edge case might be a controlled input whose onChange callback\n      // doesn't change the value (or sets another): the suggestionListCallback\n      // callback will still receive the original rejected value.\n      // a refactor is needed so the suggestionListCallback might be called only\n      // when the input is uncontrolled, providing a way to externally control\n      // the suggestion values.\n      suggestionHandler(newValue);\n    }\n  };\n\n  /**\n   * Validates the input updating the state and modifying the info text, also executes\n   * the user provided onBlur passing the current validation status and value.\n   */\n  const onInputBlurHandler: HvBaseInputProps[\"onBlur\"] = (event) => {\n    // If the blur is executed when choosing an suggestion it should be ignored.\n    if (eventTargetIsInsideContainer(suggestionsRef.current, event)) return;\n\n    setFocused(false);\n\n    const inputValidity = performValidation();\n\n    onBlur?.(event, value, inputValidity);\n  };\n\n  /**\n   * Updates the state putting again the value from the state because the input value is\n   * not automatically manage, it also executes the onFocus function from the user passing the value\n   */\n  const onFocusHandler: HvBaseInputProps[\"onFocus\"] = (event) => {\n    setFocused(true);\n\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    onFocus?.(event, value);\n  };\n\n  const getSuggestions = (li: number | null) => {\n    // TODO Replace with ref\n    const listEl = document.getElementById(\n      setId(elementId, \"suggestions-list\") || \"\"\n    );\n    return li != null ? listEl?.getElementsByTagName(\"li\")?.[li] : listEl;\n  };\n\n  const onSuggestionKeyDown: HvSuggestionsProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"Esc\")) {\n      suggestionClearHandler();\n      focusInput();\n    } else if (isKey(event, \"Tab\")) {\n      suggestionClearHandler();\n    }\n  };\n\n  /** Focus the suggestion list when the arrow down is pressed. */\n  const onKeyDownHandler: HvBaseInputProps[\"onKeyDown\"] = (event) => {\n    if (isKey(event, \"ArrowDown\") && hasSuggestions) {\n      const li = getSuggestions(0);\n      li?.focus();\n    } else if (isKey(event, \"Enter\")) {\n      onEnter?.(event, value);\n    }\n\n    onKeyDown?.(event, value);\n  };\n\n  /** Clears the suggestion list on blur. */\n  const onContainerBlurHandler: HvFormElementProps[\"onBlur\"] = (event) => {\n    if (event.relatedTarget) {\n      setTimeout(() => {\n        const list = getSuggestions(null);\n        if (!list?.contains(document.activeElement)) suggestionClearHandler();\n      }, 10);\n    }\n  };\n\n  const hasOnEnter = onEnter != null;\n\n  // show the clear button only if the input is enabled, not read-only, disableClear is false and the input is not empty\n  // also, don't show it when the input type is \"search\" and the input is active (standBy)\n  const showClear =\n    !disabled &&\n    !readOnly &&\n    !disableClear &&\n    !isEmptyValue &&\n    (!hasOnEnter ||\n      type !== \"search\" ||\n      disableSearchButton ||\n      validationState !== validationStates.standBy);\n\n  const showSearchIcon = type === \"search\" && !disableSearchButton;\n\n  const showRevealPasswordButton =\n    type === \"password\" && !disableRevealPassword;\n\n  /**\n   * Clears the input value from the state and refocus the input.\n   */\n  const handleClear = useCallback(() => {\n    // reset validation status to standBy (only when status is uncontrolled)\n    setValidationState(validationStates.standBy);\n\n    changeInputValue(inputRef.current, \"\");\n\n    // we want to focus the input when clicked and not active\n    setTimeout(focusInput);\n  }, [setValidationState]);\n\n  const clearButton = useMemo(() => {\n    if (!showClear) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        // Don't control visibility when the search icon is enabled\n        className={cx(classes.adornmentButton, {\n          [classes.iconClear]: !showSearchIcon,\n        })}\n        onClick={handleClear}\n        aria-label={labels?.clearButtonLabel}\n        aria-controls={setId(elementId, \"input\")}\n        icon={<CloseXS />}\n      />\n    );\n  }, [\n    showClear,\n    classes.adornmentButton,\n    classes.iconClear,\n    showSearchIcon,\n    handleClear,\n    labels?.clearButtonLabel,\n    elementId,\n    cx,\n  ]);\n\n  /**\n   * Calls the onEnter callback and refocus the input.\n   */\n  const handleSearch = useCallback<NonNullable<HvAdornmentProps[\"onClick\"]>>(\n    (event) => {\n      onEnter?.(event, value);\n    },\n    [onEnter, value]\n  );\n\n  const searchButton = useMemo(() => {\n    // If the search icon is not actionable, only show it when the input is empty or active\n    const reallyShowIt =\n      showSearchIcon &&\n      (isEmptyValue ||\n        (hasOnEnter && validationState === validationStates.standBy));\n\n    if (!reallyShowIt) {\n      return null;\n    }\n\n    return (\n      <HvAdornment\n        className={classes.adornmentButton}\n        onClick={hasOnEnter ? handleSearch : undefined}\n        aria-label={labels?.searchButtonLabel}\n        icon={<Search />}\n      />\n    );\n  }, [\n    showSearchIcon,\n    isEmptyValue,\n    hasOnEnter,\n    validationState,\n    classes.adornmentButton,\n    handleSearch,\n    labels?.searchButtonLabel,\n  ]);\n\n  /**\n   * Changes input type and refocus the input.\n   */\n  const handleRevealPassword = useCallback(() => {\n    setRevealPassword(!revealPassword);\n  }, [revealPassword]);\n\n  const revealPasswordButton = useMemo(() => {\n    if (!showRevealPasswordButton) {\n      return null;\n    }\n\n    return (\n      <HvTooltip\n        disableFocusListener\n        disableTouchListener\n        title={\n          <HvTypography>\n            {revealPassword\n              ? labels?.revealPasswordButtonClickToHideTooltip\n              : labels?.revealPasswordButtonClickToShowTooltip}\n          </HvTypography>\n        }\n      >\n        <HvAdornment\n          className={classes.adornmentButton}\n          onClick={handleRevealPassword}\n          aria-label={labels?.revealPasswordButtonLabel}\n          aria-controls={setId(elementId, \"input\")}\n          icon={revealPassword ? <PreviewOff /> : <Preview />}\n        />\n      </HvTooltip>\n    );\n  }, [\n    showRevealPasswordButton,\n    revealPassword,\n    labels?.revealPasswordButtonClickToHideTooltip,\n    labels?.revealPasswordButtonClickToShowTooltip,\n    labels?.revealPasswordButtonLabel,\n    classes.adornmentButton,\n    handleRevealPassword,\n    elementId,\n  ]);\n\n  const validationIcon = useMemo(() => {\n    if (!showValidationIcon) {\n      return null;\n    }\n\n    if (!isValid(validationState)) {\n      return null;\n    }\n\n    return <Success color=\"positive\" className={classes.icon} />;\n  }, [showValidationIcon, validationState, classes.icon]);\n\n  // useMemo to avoid repetitive cloning of the custom icon\n  const customIconEl = useMemo(\n    () =>\n      isValidElement(endAdornment) &&\n      React.cloneElement(endAdornment as React.ReactElement, {\n        className: cx(endAdornment.props.className, classes.icon),\n      }),\n    [classes.icon, endAdornment, cx]\n  );\n\n  const adornments = useMemo(() => {\n    if (\n      !clearButton &&\n      !revealPasswordButton &&\n      !searchButton &&\n      !validationIcon &&\n      !customIconEl\n    )\n      return null;\n\n    // note: specification implies that the custom icon should be hidden when\n    // a validation feedback icon is being shown.\n    return (\n      <div className={classes.adornmentsBox} aria-hidden=\"true\">\n        {clearButton}\n        {revealPasswordButton}\n        {searchButton}\n        {validationIcon || customIconEl}\n      </div>\n    );\n  }, [\n    classes.adornmentsBox,\n    clearButton,\n    customIconEl,\n    revealPasswordButton,\n    searchButton,\n    validationIcon,\n  ]);\n\n  // run initial validation after first render\n  // and also when any validation condition changes\n  useEffect(() => {\n    if (focused || (!isDirty.current && isEmptyValue)) {\n      // skip validation if currently focused or if empty and\n      // the user never manually edited the input value\n      return;\n    }\n\n    performValidation();\n  }, [focused, isEmptyValue, performValidation]);\n\n  const errorMessageId = isStateInvalid\n    ? canShowError\n      ? setId(elementId, \"error\")\n      : ariaErrorMessage\n    : undefined;\n\n  return (\n    <HvFormElement\n      id={id}\n      name={name}\n      status={validationState}\n      disabled={disabled}\n      required={required}\n      readOnly={readOnly}\n      className={cx(\n        classes.root,\n        {\n          [classes.hasSuggestions]: hasSuggestions,\n        },\n        className\n      )}\n      onBlur={onContainerBlurHandler}\n    >\n      {(hasLabel || hasDescription) && (\n        <div className={classes.labelContainer}>\n          {hasLabel && (\n            <HvLabel\n              id={setId(elementId, \"label\")}\n              className={classes.label}\n              htmlFor={setId(elementId, \"input\")}\n              label={label}\n            />\n          )}\n\n          {hasDescription && (\n            <HvInfoMessage\n              id={setId(elementId, \"description\")}\n              className={classes.description}\n            >\n              {description}\n            </HvInfoMessage>\n          )}\n        </div>\n      )}\n      <HvBaseInput\n        id={\n          hasLabel || showClear || showRevealPasswordButton\n            ? setId(elementId, \"input\")\n            : setId(id, \"input\")\n        }\n        name={name}\n        value={value}\n        required={required}\n        readOnly={readOnly}\n        disabled={disabled}\n        onChange={onChangeHandler}\n        autoFocus={autoFocus}\n        onKeyDown={onKeyDownHandler}\n        onBlur={onInputBlurHandler}\n        onFocus={onFocusHandler}\n        placeholder={placeholder}\n        type={realType}\n        classes={{\n          input: classes.input,\n          inputRoot: classes.inputRoot,\n          inputRootFocused: classes.inputRootFocused,\n          inputRootDisabled: classes.inputRootDisabled,\n          inputRootMultiline: classes.inputRootMultiline,\n          inputBorderContainer: classes.inputBorderContainer,\n        }}\n        invalid={isStateInvalid}\n        inputProps={{\n          \"aria-label\": ariaLabel,\n          \"aria-labelledby\": ariaLabelledBy,\n          \"aria-invalid\": isStateInvalid ? true : undefined,\n          \"aria-errormessage\": errorMessageId,\n          \"aria-describedby\":\n            ariaDescribedBy != null\n              ? ariaDescribedBy\n              : description\n              ? setId(elementId, \"description\")\n              : undefined,\n          \"aria-controls\": canShowSuggestions\n            ? setId(elementId, \"suggestions\")\n            : undefined,\n\n          ref: inputRef,\n\n          // prevent browsers auto-fill/suggestions when we have our own\n          autoComplete: canShowSuggestions ? \"off\" : undefined,\n\n          ...inputProps,\n        }}\n        inputRef={forkedRef}\n        endAdornment={adornments}\n        {...others}\n      />\n      {canShowSuggestions && (\n        <>\n          {hasSuggestions && (\n            <div role=\"presentation\" className={classes.inputExtension} />\n          )}\n          <HvSuggestions\n            ref={suggestionsRef}\n            id={setId(elementId, \"suggestions\")}\n            classes={{\n              root: classes.suggestionsContainer,\n              list: classes.suggestionList,\n            }}\n            expanded={hasSuggestions}\n            anchorEl={inputRef.current?.parentElement}\n            onClose={suggestionClearHandler}\n            onKeyDown={onSuggestionKeyDown}\n            onSuggestionSelected={suggestionSelectedHandler}\n            suggestionValues={suggestionValues}\n          />\n        </>\n      )}\n      {canShowError && (\n        <HvWarningText\n          id={setId(elementId, \"error\")}\n          disableBorder\n          className={classes.error}\n        >\n          {validationMessage}\n        </HvWarningText>\n      )}\n    </HvFormElement>\n  );\n});\n"],"names":["validationState","validationStates","React"],"mappings":"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"}

package/dist/esm/Input/Input.styles.js

@@ -0,0 +1,73 @@
+import { theme } from "@hitachivantara/uikit-styles";
+import { createClasses } from "../utils/classes.js";
+import { staticClasses as staticClasses$1 } from "../Forms/Suggestions/Suggestions.styles.js";
+import "../Forms/Suggestions/Suggestions.js";
+const { staticClasses, useClasses } = createClasses("HvInput", {
+  root: { display: "block" },
+  labelContainer: { display: "flex", alignItems: "flex-start" },
+  label: { paddingBottom: "6px", display: "block" },
+  description: {},
+  adornmentsBox: {
+    display: "flex",
+    flexDirection: "row",
+    height: "30px",
+    justifyContent: "center",
+    marginRight: 1
+  },
+  icon: { width: "30px", height: "30px" },
+  adornmentButton: {
+    backgroundColor: "transparent",
+    border: "none",
+    padding: 0,
+    margin: 0,
+    cursor: "pointer"
+  },
+  iconClear: { display: "none" },
+  hasSuggestions: {},
+  suggestionsContainer: { width: "100%", position: "relative" },
+  suggestionList: {
+    [`& .${staticClasses$1.root} .${staticClasses$1.list} &`]: {
+      width: "100%"
+    }
+  },
+  inputExtension: {
+    height: theme.space.xs,
+    backgroundColor: theme.colors.atmo1,
+    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`
+  },
+  input: {
+    "&::-ms-clear": {
+      display: "none"
+    }
+  },
+  inputRoot: {
+    ":hover": {
+      "& $iconClear": {
+        display: "block"
+      }
+    },
+    ":focus-within $iconClear": {
+      display: "block"
+    }
+  },
+  inputRootFocused: {
+    "& $iconClear": {
+      display: "block"
+    }
+  },
+  inputRootDisabled: {
+    cursor: "not-allowed"
+  },
+  inputRootMultiline: { padding: 0 },
+  inputBorderContainer: {
+    "$hasSuggestions &": {
+      display: "none"
+    }
+  },
+  error: {}
+});
+export {
+  staticClasses,
+  useClasses
+};
+//# sourceMappingURL=Input.styles.js.map

package/dist/esm/Input/Input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.js","sources":["../../../src/Input/Input.styles.tsx"],"sourcesContent":["import { theme } from \"@hitachivantara/uikit-styles\";\n\nimport { suggestionsClasses } from \"../Forms\";\nimport { createClasses } from \"../utils/classes\";\n\nexport const { staticClasses, useClasses } = createClasses(\"HvInput\", {\n  root: { display: \"block\" },\n  labelContainer: { display: \"flex\", alignItems: \"flex-start\" },\n  label: { paddingBottom: \"6px\", display: \"block\" },\n  description: {},\n  adornmentsBox: {\n    display: \"flex\",\n    flexDirection: \"row\",\n    height: \"30px\",\n    justifyContent: \"center\",\n    marginRight: 1,\n  },\n  icon: { width: \"30px\", height: \"30px\" },\n  adornmentButton: {\n    backgroundColor: \"transparent\",\n    border: \"none\",\n    padding: 0,\n    margin: 0,\n    cursor: \"pointer\",\n  },\n  iconClear: { display: \"none\" },\n  hasSuggestions: {},\n  suggestionsContainer: { width: \"100%\", position: \"relative\" },\n  suggestionList: {\n    [`& .${suggestionsClasses.root} .${suggestionsClasses.list} &`]: {\n      width: \"100%\",\n    },\n  },\n  inputExtension: {\n    height: theme.space.xs,\n    backgroundColor: theme.colors.atmo1,\n    boxShadow: `0px 8px 0px ${theme.colors.atmo1}, 0px 0px 9px 0px rgba(65,65,65,.12)`,\n  },\n  input: {\n    \"&::-ms-clear\": {\n      display: \"none\",\n    },\n  },\n  inputRoot: {\n    \":hover\": {\n      \"& $iconClear\": {\n        display: \"block\",\n      },\n    },\n    \":focus-within $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootFocused: {\n    \"& $iconClear\": {\n      display: \"block\",\n    },\n  },\n  inputRootDisabled: {\n    cursor: \"not-allowed\",\n  },\n  inputRootMultiline: { padding: 0 },\n  inputBorderContainer: {\n    \"$hasSuggestions &\": {\n      display: \"none\",\n    },\n  },\n  error: {},\n});\n"],"names":["suggestionsClasses"],"mappings":";;;;AAKO,MAAM,EAAE,eAAe,eAAe,cAAc,WAAW;AAAA,EACpE,MAAM,EAAE,SAAS,QAAQ;AAAA,EACzB,gBAAgB,EAAE,SAAS,QAAQ,YAAY,aAAa;AAAA,EAC5D,OAAO,EAAE,eAAe,OAAO,SAAS,QAAQ;AAAA,EAChD,aAAa,CAAC;AAAA,EACd,eAAe;AAAA,IACb,SAAS;AAAA,IACT,eAAe;AAAA,IACf,QAAQ;AAAA,IACR,gBAAgB;AAAA,IAChB,aAAa;AAAA,EACf;AAAA,EACA,MAAM,EAAE,OAAO,QAAQ,QAAQ,OAAO;AAAA,EACtC,iBAAiB;AAAA,IACf,iBAAiB;AAAA,IACjB,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,QAAQ;AAAA,EACV;AAAA,EACA,WAAW,EAAE,SAAS,OAAO;AAAA,EAC7B,gBAAgB,CAAC;AAAA,EACjB,sBAAsB,EAAE,OAAO,QAAQ,UAAU,WAAW;AAAA,EAC5D,gBAAgB;AAAA,IACd,CAAC,MAAMA,gBAAmB,IAAI,KAAKA,gBAAmB,IAAI,IAAI,GAAG;AAAA,MAC/D,OAAO;AAAA,IACT;AAAA,EACF;AAAA,EACA,gBAAgB;AAAA,IACd,QAAQ,MAAM,MAAM;AAAA,IACpB,iBAAiB,MAAM,OAAO;AAAA,IAC9B,WAAW,eAAe,MAAM,OAAO,KAAK;AAAA,EAC9C;AAAA,EACA,OAAO;AAAA,IACL,gBAAgB;AAAA,MACd,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,WAAW;AAAA,IACT,UAAU;AAAA,MACR,gBAAgB;AAAA,QACd,SAAS;AAAA,MACX;AAAA,IACF;AAAA,IACA,4BAA4B;AAAA,MAC1B,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,kBAAkB;AAAA,IAChB,gBAAgB;AAAA,MACd,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,mBAAmB;AAAA,IACjB,QAAQ;AAAA,EACV;AAAA,EACA,oBAAoB,EAAE,SAAS,EAAE;AAAA,EACjC,sBAAsB;AAAA,IACpB,qBAAqB;AAAA,MACnB,SAAS;AAAA,IACX;AAAA,EACF;AAAA,EACA,OAAO,CAAC;AACV,CAAC;"}