@dt-dds/react-text-field 1.0.0-beta.100

package/dist/index.js

@@ -0,0 +1,515 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// index.ts
+var index_exports = {};
+__export(index_exports, {
+  InputContainerStyled: () => InputContainerStyled,
+  InputExtraPrefixStyled: () => InputExtraPrefixStyled,
+  InputExtraSuffixStyled: () => InputExtraSuffixStyled,
+  InputFieldStyled: () => InputFieldStyled,
+  InputWrapperStyled: () => InputWrapperStyled,
+  TextField: () => TextField,
+  TextFieldMessageStyled: () => TextFieldMessageStyled,
+  TextFieldStyled: () => TextFieldStyled
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/TextField.tsx
+var import_react = require("react");
+var import_react_icon = require("@dt-dds/react-icon");
+var import_react_icon_button = require("@dt-dds/react-icon-button");
+var import_react_label_field = require("@dt-dds/react-label-field");
+var import_react_typography = require("@dt-dds/react-typography");
+
+// src/TextField.styled.ts
+var import_styled = __toESM(require("@emotion/styled"));
+
+// src/constants/helpers.ts
+var getThemedBackgroundFill = (backgroundFill, theme) => ({
+  default: theme.palette.surface.default,
+  contrast: theme.palette.surface.contrast,
+  light: theme.palette.surface.light
+})[backgroundFill] || theme.palette.surface.default;
+
+// src/TextField.styled.ts
+var TextFieldStyled = import_styled.default.div`
+  ${({ theme, isFloatingLabel = true, hasPrefix = false }) => `
+    display: flex;
+    flex-direction: column;
+    gap: ${theme.spacing.spacing_20};
+    width: 100%;
+    position: relative;
+    
+    ${hasPrefix ? `
+    label {
+      left: 0;
+      padding-left: ${isFloatingLabel ? theme.spacing.l : ""};
+    }
+    ` : ""}
+
+    :has(input[disabled]) {
+      i, label > span {
+        color: ${theme.palette.content.light};
+      }
+    }
+
+    &:has(input[readonly]:not(input[disabled])) {
+      i, label, label > span {
+        color: ${theme.palette.content.medium};
+      }
+    }
+
+    ${!isFloatingLabel && `
+        &:has(input[readonly]:not([disabled]):focus) {
+          label {
+            color: ${theme.palette.informative.default};
+          }
+        }
+      `}
+  `}
+
+  input[type="search"]::-webkit-search-decoration,
+  input[type="search"]::-webkit-search-cancel-button,
+  input[type="search"]::-webkit-search-results-button,
+  input[type="search"]::-webkit-search-results-decoration {
+    display: none;
+  }
+`;
+var InputContainerStyled = import_styled.default.div`
+  ${({ theme, isFloatingLabel }) => `
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: ${isFloatingLabel ? "0" : theme.spacing.spacing_30};
+  `}
+`;
+var InputFieldStyled = import_styled.default.input`
+  ${({ theme, isFloatingLabel, scale, isFocused }) => `
+    ${theme.fontStyles.bodyMdRegular}
+    border: 0;
+    outline: 0;
+    width: 100%;
+    background-color: inherit;
+
+    &:focus {
+      outline: none;
+    }
+  
+    &:read-only {
+      color: ${theme.palette.content.medium};
+    }
+
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    input:-webkit-autofill:active {
+    transition: background-color 5000s ease-in-out 0s;
+    }
+
+    &[readonly]::placeholder,
+    &[readonly]:focus::placeholder {
+      color: transparent;
+    }
+
+    &::placeholder {
+      color: ${isFloatingLabel && !isFocused ? "transparent" : theme.palette.content.medium};
+    }
+
+    &:disabled {
+      color: ${theme.palette.content.light};
+    }
+
+    color: ${theme.palette.content.default};
+
+    ${scale === "compact" ? `
+        padding: ${isFloatingLabel ? `${theme.spacing.spacing_60} ${theme.spacing.spacing_40} ${theme.spacing.spacing_30} ${theme.spacing.spacing_40}` : `14px ${theme.spacing.spacing_30}`};
+      ` : `
+        padding: ${isFloatingLabel ? `28px ${theme.spacing.spacing_40} ${theme.spacing.spacing_40}` : `20px ${theme.spacing.spacing_40}`};
+      `}
+  `}
+`;
+var InputExtraPrefixStyled = import_styled.default.div`
+  ${({ theme, onClick }) => {
+  const isClickable = !!onClick;
+  return `
+    display: flex;
+    cursor: ${isClickable ? "pointer" : "default"};
+    padding-left: ${theme.spacing.spacing_40}};
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.border.dark};
+      outline-offset: 1px;
+    }
+
+    ${isClickable && `
+        &:hover > i  {
+          color: ${theme.palette.content.dark};
+        }
+      `}
+  
+  `;
+}}
+`;
+var InputExtraSuffixStyled = import_styled.default.div`
+  ${({ theme, onClick }) => {
+  const isClickable = !!onClick;
+  return `
+    display: flex;
+    cursor: ${isClickable ? "pointer" : "default"};
+    margin-right: ${theme.spacing.spacing_40}};
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.border.dark};
+      outline-offset: 1px;
+    }
+
+    ${isClickable && `
+        &:hover > i  {
+          color: ${theme.palette.primary.default};
+        }
+      `}
+  `;
+}}
+`;
+var TextFieldMessageStyled = import_styled.default.div`
+  padding-left: ${({ theme }) => theme.spacing.spacing_40};
+`;
+var InputWrapperStyled = import_styled.default.div`
+  ${({ theme, isFloatingLabel, variant, backgroundFill, hasError }) => {
+  const borderColor = hasError ? theme.palette.error.default : theme.palette.border.medium;
+  const borderFocusColor = hasError ? theme.palette.error.default : theme.palette.informative.default;
+  return `
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 198px;
+    width: 100%;
+    color: ${theme.palette.content.default};
+    background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
+  
+    ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
+        border: 1px solid ${borderColor};
+
+        &:focus-within,
+        &:hover:not([disabled]) { 
+          border: 1px solid ${borderFocusColor};
+        }
+
+        &:hover:([disabled]) { 
+          border: 1px solid ${borderColor};
+        }
+      ` : `border-radius: ${theme.shape.formField} ${theme.shape.formField} 0 0;
+        border-bottom: 1px solid ${borderColor};
+        
+        &:focus-within,
+        &:hover:not([disabled]) { 
+          border-bottom: 1px solid  ${borderFocusColor};
+        }
+      `};
+
+    &:has(input[readonly]:not([disabled])) {
+      background-color: ${theme.palette.surface.light};
+      border: 1px solid ${theme.palette.surface.default};
+
+      &:focus-within, &:hover { 
+          border: 1px solid  ${theme.palette.informative.default};
+        }
+    }
+
+    &:has(input[disabled]), &:has(input[disabled]) > * {
+      cursor: not-allowed;
+
+      &:hover {
+        border-color: ${borderColor};
+      }
+
+      input::placeholder {
+        color: ${isFloatingLabel ? "transparent" : theme.palette.content.light};
+      }
+    }
+  `;
+}}
+`;
+
+// src/TextField.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var EXTRA_SUFFIX_DATA_TEST_ID = "extra-suffix";
+var TextField = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      dataTestId,
+      hasError = false,
+      extraPrefix,
+      extraSuffix,
+      label,
+      labelIcon,
+      isFloatingLabel = true,
+      name,
+      id,
+      required,
+      requiredMessage,
+      style,
+      children,
+      initialValue,
+      inputRef,
+      isInputFocused,
+      message: messageProp = "",
+      type = "text",
+      variant = "outlined",
+      scale = "standard",
+      backgroundFill = "default",
+      disabled = false,
+      onChange = () => null,
+      onResetInput = () => null
+    } = _b, rest = __objRest(_b, [
+      "dataTestId",
+      "hasError",
+      "extraPrefix",
+      "extraSuffix",
+      "label",
+      "labelIcon",
+      "isFloatingLabel",
+      "name",
+      "id",
+      "required",
+      "requiredMessage",
+      "style",
+      "children",
+      "initialValue",
+      "inputRef",
+      "isInputFocused",
+      "message",
+      "type",
+      "variant",
+      "scale",
+      "backgroundFill",
+      "disabled",
+      "onChange",
+      "onResetInput"
+    ]);
+    const [activeInput, setActiveInput] = (0, import_react.useState)(false);
+    const [inputValue, setInputValue] = (0, import_react.useState)("");
+    const [hasRequiredError, setHasRequiredError] = (0, import_react.useState)(false);
+    const textFieldId = id != null ? id : label.replaceAll(" ", "-").toLowerCase();
+    const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLowerCase()}-text-field`;
+    (0, import_react.useEffect)(() => {
+      if (!!initialValue) {
+        setInputValue(initialValue);
+        setHasRequiredError(false);
+      } else {
+        setInputValue("");
+      }
+    }, [initialValue]);
+    const handleChange = (event) => {
+      setInputValue(event.target.value);
+      setHasRequiredError(false);
+      if (onChange) {
+        onChange(event);
+      }
+    };
+    const onFocus = (event) => {
+      if (!rest.readOnly) {
+        setActiveInput(true);
+      }
+      if (rest.onFocus) {
+        rest.onFocus(event);
+      }
+    };
+    const onBlur = (event) => {
+      var _a2;
+      setActiveInput(false);
+      const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
+      const isExtraSuffixClicked = ((_a2 = event.relatedTarget) == null ? void 0 : _a2.getAttribute("data-testid")) === EXTRA_SUFFIX_DATA_TEST_ID;
+      if (isEmptyOrOnlySpaces && required && !isExtraSuffixClicked) {
+        setHasRequiredError(true);
+      }
+      if (rest.onBlur) {
+        rest.onBlur(event);
+      }
+    };
+    const handleResetInput = () => {
+      setInputValue("");
+      setActiveInput(false);
+      onResetInput();
+    };
+    const handleExtraPrefixEnter = (event) => event.code === "Enter" && (extraPrefix == null ? void 0 : extraPrefix.onClick) && extraPrefix.onClick(inputValue);
+    const handleExtraSuffixEnter = (event) => event.code === "Enter" && (extraSuffix == null ? void 0 : extraSuffix.onClick) && extraSuffix.onClick(inputValue);
+    const messageColor = disabled ? "content.light" : "content.medium";
+    const showError = hasError || hasRequiredError;
+    const message = hasRequiredError ? requiredMessage != null ? requiredMessage : messageProp : messageProp;
+    const isActiveInput = activeInput || !!inputValue.trim();
+    const isSearchType = type === "search";
+    const extraPrefixOnClick = (extraPrefix == null ? void 0 : extraPrefix.onClick) ? extraPrefix.onClick : null;
+    const extraSuffixOnClick = (extraSuffix == null ? void 0 : extraSuffix.onClick) ? extraSuffix.onClick : null;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      TextFieldStyled,
+      {
+        "data-testid": testId,
+        hasPrefix: !!extraPrefix,
+        isFloatingLabel,
+        style,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(InputContainerStyled, { isFloatingLabel, ref, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_react_label_field.LabelField,
+              {
+                hasError: showError,
+                htmlFor: textFieldId,
+                icon: labelIcon,
+                isActive: isInputFocused || activeInput,
+                isCentered: !isActiveInput && isFloatingLabel,
+                isDisabled: disabled,
+                isFloating: isFloatingLabel,
+                isInputFilled: !!inputValue,
+                isRequired: required,
+                scale,
+                children: label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              InputWrapperStyled,
+              {
+                backgroundFill,
+                "data-testid": `${testId}-wrapper`,
+                hasError: showError,
+                isFloatingLabel,
+                variant,
+                children: [
+                  (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    InputExtraPrefixStyled,
+                    __spreadProps(__spreadValues({
+                      "data-testid": "extra-prefix"
+                    }, !!extraPrefixOnClick && {
+                      tabIndex: 0,
+                      onClick: () => !disabled && extraPrefixOnClick(inputValue),
+                      onKeyDown: handleExtraPrefixEnter
+                    }), {
+                      children: extraPrefix.component
+                    })
+                  ) : null,
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    InputFieldStyled,
+                    __spreadProps(__spreadValues({
+                      "data-error": showError,
+                      "data-testid": `${testId}-input`,
+                      disabled,
+                      id: textFieldId,
+                      isFloatingLabel,
+                      isFocused: isActiveInput,
+                      name: name != null ? name : textFieldId,
+                      ref: inputRef,
+                      scale,
+                      type,
+                      value: inputValue
+                    }, rest), {
+                      onBlur,
+                      onChange: handleChange,
+                      onFocus
+                    })
+                  ),
+                  isSearchType && !!inputValue ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    import_react_icon_button.IconButton,
+                    {
+                      dataTestId: "reset-icon",
+                      onClick: handleResetInput,
+                      style: { marginRight: 12 },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close" })
+                    }
+                  ) : null,
+                  (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    InputExtraSuffixStyled,
+                    __spreadProps(__spreadValues({
+                      "data-testid": EXTRA_SUFFIX_DATA_TEST_ID
+                    }, !!extraSuffixOnClick && {
+                      tabIndex: 0,
+                      onClick: () => !disabled && extraSuffixOnClick(inputValue),
+                      onKeyDown: handleExtraSuffixEnter
+                    }), {
+                      children: extraSuffix.component
+                    })
+                  ) : null
+                ]
+              }
+            )
+          ] }),
+          message ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TextFieldMessageStyled, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_react_typography.Typography,
+            {
+              color: showError ? "error.default" : messageColor,
+              fontStyles: "bodySmRegular",
+              children: message
+            }
+          ) }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputContainerStyled,
+  InputExtraPrefixStyled,
+  InputExtraSuffixStyled,
+  InputFieldStyled,
+  InputWrapperStyled,
+  TextField,
+  TextFieldMessageStyled,
+  TextFieldStyled
+});