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

package/dist/index.mjs

@@ -0,0 +1,478 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+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;
+};
+
+// src/TextField.tsx
+import {
+  forwardRef,
+  useEffect,
+  useState
+} from "react";
+import { Icon } from "@dt-dds/react-icon";
+import { IconButton } from "@dt-dds/react-icon-button";
+import { LabelField } from "@dt-dds/react-label-field";
+import { Typography } from "@dt-dds/react-typography";
+
+// src/TextField.styled.ts
+import styled from "@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 = styled.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 = styled.div`
+  ${({ theme, isFloatingLabel }) => `
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: ${isFloatingLabel ? "0" : theme.spacing.spacing_30};
+  `}
+`;
+var InputFieldStyled = styled.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 = styled.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 = styled.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 = styled.div`
+  padding-left: ${({ theme }) => theme.spacing.spacing_40};
+`;
+var InputWrapperStyled = styled.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
+import { jsx, jsxs } from "react/jsx-runtime";
+var EXTRA_SUFFIX_DATA_TEST_ID = "extra-suffix";
+var TextField = 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] = useState(false);
+    const [inputValue, setInputValue] = useState("");
+    const [hasRequiredError, setHasRequiredError] = useState(false);
+    const textFieldId = id != null ? id : label.replaceAll(" ", "-").toLowerCase();
+    const testId = dataTestId != null ? dataTestId : `${label.replaceAll(" ", "-").toLowerCase()}-text-field`;
+    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__ */ jsxs(
+      TextFieldStyled,
+      {
+        "data-testid": testId,
+        hasPrefix: !!extraPrefix,
+        isFloatingLabel,
+        style,
+        children: [
+          /* @__PURE__ */ jsxs(InputContainerStyled, { isFloatingLabel, ref, children: [
+            /* @__PURE__ */ jsx(
+              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__ */ jsxs(
+              InputWrapperStyled,
+              {
+                backgroundFill,
+                "data-testid": `${testId}-wrapper`,
+                hasError: showError,
+                isFloatingLabel,
+                variant,
+                children: [
+                  (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ jsx(
+                    InputExtraPrefixStyled,
+                    __spreadProps(__spreadValues({
+                      "data-testid": "extra-prefix"
+                    }, !!extraPrefixOnClick && {
+                      tabIndex: 0,
+                      onClick: () => !disabled && extraPrefixOnClick(inputValue),
+                      onKeyDown: handleExtraPrefixEnter
+                    }), {
+                      children: extraPrefix.component
+                    })
+                  ) : null,
+                  /* @__PURE__ */ 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__ */ jsx(
+                    IconButton,
+                    {
+                      dataTestId: "reset-icon",
+                      onClick: handleResetInput,
+                      style: { marginRight: 12 },
+                      children: /* @__PURE__ */ jsx(Icon, { code: "close" })
+                    }
+                  ) : null,
+                  (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ 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__ */ jsx(TextFieldMessageStyled, { children: /* @__PURE__ */ jsx(
+            Typography,
+            {
+              color: showError ? "error.default" : messageColor,
+              fontStyles: "bodySmRegular",
+              children: message
+            }
+          ) }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+export {
+  InputContainerStyled,
+  InputExtraPrefixStyled,
+  InputExtraSuffixStyled,
+  InputFieldStyled,
+  InputWrapperStyled,
+  TextField,
+  TextFieldMessageStyled,
+  TextFieldStyled
+};

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "@dt-dds/react-text-field",
+  "version": "1.0.0-beta.100",
+  "license": "MIT",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "lint": "eslint --cache .",
+    "test": "jest",
+    "test:report": "open ./jest-coverage/lcov-report/index.html",
+    "test:update:snapshot": "jest -u"
+  },
+  "dependencies": {
+    "@dt-dds/react-core": "1.0.0-beta.53",
+    "@dt-dds/react-spinner": "1.0.0-beta.95",
+    "@dt-dds/react-label-field": "1.0.0-beta.54",
+    "@dt-dds/react-typography": "1.0.0-beta.44",
+    "@dt-dds/react-icon-button": "1.0.0-beta.22",
+    "@dt-dds/react-icon": "1.0.0-beta.56",
+    "@dt-dds/react-tooltip": "1.0.0-beta.62",
+    "@dt-dds/themes": "1.0.0-beta.10"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.22.9",
+    "@babel/preset-env": "^7.22.9",
+    "@babel/preset-react": "^7.22.5",
+    "@babel/preset-typescript": "^7.23.3",
+    "@emotion/babel-plugin": "^11.11.0",
+    "@emotion/css": "^11.7.1",
+    "@emotion/jest": "^11.10.0",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.4",
+    "babel-loader": "^8.3.0",
+    "eslint-config-custom": "*",
+    "eslint-plugin-storybook": "^9.1.0",
+    "jest-config": "*",
+    "react": "^18.1.0",
+    "react-dom": "^18.2.0",
+    "tsconfig": "*",
+    "tsup": "^8.5.0",
+    "typescript": "^4.5.3"
+  },
+  "peerDependencies": {
+    "@emotion/css": "^11.7.1",
+    "@emotion/react": "^11.8.2",
+    "@emotion/styled": "^11.8.1",
+    "react": ">=17.0.2",
+    "react-dom": ">=17.0.2"
+  }
+}