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

package/dist/index.mjs

@@ -0,0 +1,413 @@
+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 { 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";
+import {
+  useEffect,
+  useState
+} from "react";
+
+// 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["5xs"]};
+    width: 100%;
+    position: relative;
+    
+
+    ${hasPrefix ? `
+    label {
+      left: 0;
+      padding-left: ${isFloatingLabel ? theme.spacing.l : ""};
+    }
+    ` : ""}
+
+    i {
+      color: ${theme.palette.content.medium};
+    }
+
+    :has(input[disabled]) {
+      i, label > span {
+        color: ${theme.palette.content.light};
+      }
+    }
+
+    :has(input[readonly]:not(input[disabled])) {
+      label, label > span {
+        color: ${isFloatingLabel ? theme.palette.content.medium : theme.palette.content.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 InputFieldStyled = styled.input`
+  ${({ theme, isFloatingLabel, isSearchType }) => `
+    ${theme.fontStyles.body2}
+    border: 0;
+    outline: 0;
+    width: 100%;
+    background-color: inherit;
+    
+
+
+    input:-webkit-autofill,
+    input:-webkit-autofill:hover,
+    input:-webkit-autofill:focus,
+    input:-webkit-autofill:active {
+        transition: background-color 5000s ease-in-out 0s;
+    }
+
+    &::placeholder {
+      color: ${isFloatingLabel ? "transparent" : theme.palette.content.medium};
+    }
+
+    padding: ${isFloatingLabel && !isSearchType ? `${theme.spacing.xs} 0 ${theme.spacing["4xs"]} 0` : ""};
+
+  `}
+`;
+var InputExtraPrefixStyled = styled.div`
+  ${({ theme, onClick }) => {
+  const isClickable = !!onClick;
+  return `
+    display: flex;
+    cursor: ${isClickable ? "pointer" : "default"};
+
+    ${isClickable && `
+        &:hover > i  {
+          color: ${theme.palette.content.dark};
+        }
+      `}
+  
+  `;
+}}
+`;
+var InputExtraSuffixStyled = styled.div`
+  ${({ theme, onClick }) => {
+  const isClickable = !!onClick;
+  return `
+    display: flex;
+    cursor: ${isClickable ? "pointer" : "default"};
+
+    ${isClickable && `
+        &:hover > i  {
+          color: ${theme.palette.content.dark};
+        }
+      `}
+  `;
+}}
+`;
+var TextFieldMessageStyled = styled.div`
+  padding-left: ${({ theme }) => theme.spacing["2xs"]};
+`;
+var ResetInputIconStyled = styled.div`
+  ${({ theme }) => `
+    cursor: pointer;
+    display: flex;
+
+    :hover > i {
+      color: ${theme.palette.content.dark}
+    }
+  `}
+`;
+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.border.dark;
+  return `
+    display:flex;
+    flex-direction: row;
+    align-items: center;
+    min-width: 198px;
+    width: 100%;
+    height: 54px;
+    color: ${theme.palette.content.default};
+    gap: ${theme.spacing["4xs"]};
+    background-color: ${getThemedBackgroundFill(backgroundFill, theme)};
+    
+    padding-inline: ${theme.spacing["3xs"]};
+
+    ${variant === "outlined" ? `border-radius: ${theme.shape.formField};
+            border: 1px solid ${borderColor};
+            &:focus-within, &:hover { { border: 1px solid ${borderFocusColor}};
+          ` : `border-radius: ${theme.shape.formField} ${theme.shape.formField} 0 0;
+            border-bottom: 1px solid ${borderColor};
+            &:focus-within, &:hover { { border-bottom: 1px solid  ${borderFocusColor}};
+          `};
+
+    &:has(input[readonly]:not([disabled])) {
+      background-color: ${theme.palette.surface.default};
+      color: ${theme.palette.content.medium};
+    }
+
+    &:has(input[disabled]), &:has(input[disabled]) > * {
+      color: ${theme.palette.content.light};
+      background-color: ${theme.palette.surface.light};
+      border-color: ${theme.palette.border.default};
+      cursor: not-allowed;
+
+      input::placeholder {
+        color: ${isFloatingLabel ? "transparent" : theme.palette.content.light};
+      }
+    }
+  `;
+}}
+`;
+
+// src/TextField.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var TextField = (_a) => {
+  var _b = _a, {
+    hasError = false,
+    extraPrefix,
+    extraSuffix,
+    label,
+    isFloatingLabel = true,
+    name,
+    id,
+    required,
+    requiredMessage,
+    style,
+    children,
+    initialValue,
+    inputRef,
+    message: messageProp = "",
+    type = "text",
+    variant = "outlined",
+    backgroundFill = "default",
+    disabled = false,
+    onChange = () => null,
+    onResetInput = () => null
+  } = _b, rest = __objRest(_b, [
+    "hasError",
+    "extraPrefix",
+    "extraSuffix",
+    "label",
+    "isFloatingLabel",
+    "name",
+    "id",
+    "required",
+    "requiredMessage",
+    "style",
+    "children",
+    "initialValue",
+    "inputRef",
+    "message",
+    "type",
+    "variant",
+    "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();
+  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) => {
+    const isEmptyOrOnlySpaces = event.currentTarget.value.trim().length === 0;
+    if (isEmptyOrOnlySpaces) {
+      setActiveInput(false);
+      if (required && requiredMessage) {
+        setHasRequiredError(true);
+      }
+    }
+    if (rest.onBlur) {
+      rest.onBlur(event);
+    }
+  };
+  const handleResetInput = () => {
+    setInputValue("");
+    setActiveInput(false);
+    onResetInput();
+  };
+  const handleResetIconEnter = (event) => event.code === "Enter" && handleResetInput();
+  const handleExtraPreffixEnter = (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 extraPreffixOnClick = (extraPrefix == null ? void 0 : extraPrefix.onClick) ? extraPrefix.onClick : null;
+  const extraSuffixOnClick = (extraSuffix == null ? void 0 : extraSuffix.onClick) ? extraSuffix.onClick : null;
+  return /* @__PURE__ */ jsxs(
+    TextFieldStyled,
+    {
+      hasPrefix: !!extraPrefix,
+      isFloatingLabel,
+      style,
+      children: [
+        !isActiveInput || !isFloatingLabel || !isSearchType ? /* @__PURE__ */ jsx(
+          LabelField,
+          {
+            hasError: showError,
+            htmlFor: textFieldId,
+            isActive: isActiveInput || type === "date",
+            isDisabled: disabled,
+            isFloating: isFloatingLabel,
+            isRequired: required,
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          InputWrapperStyled,
+          {
+            backgroundFill,
+            "data-testid": "input-wrapper",
+            hasError: showError,
+            isFloatingLabel,
+            variant,
+            children: [
+              (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ jsx(
+                InputExtraPrefixStyled,
+                __spreadProps(__spreadValues({
+                  "data-testid": "extra-preffix"
+                }, !!extraPreffixOnClick && {
+                  tabIndex: 0,
+                  onClick: () => extraPreffixOnClick(inputValue),
+                  onKeyDown: handleExtraPreffixEnter
+                }), {
+                  children: extraPrefix.component
+                })
+              ) : null,
+              /* @__PURE__ */ jsx(
+                InputFieldStyled,
+                __spreadProps(__spreadValues({
+                  "data-error": showError,
+                  "data-testid": "input-field",
+                  disabled,
+                  id: textFieldId,
+                  isFloatingLabel,
+                  isSearchType,
+                  name: name != null ? name : textFieldId,
+                  ref: inputRef,
+                  type,
+                  value: inputValue
+                }, rest), {
+                  onBlur,
+                  onChange: handleChange,
+                  onFocus
+                })
+              ),
+              isSearchType && !!inputValue ? /* @__PURE__ */ jsx(
+                ResetInputIconStyled,
+                {
+                  "data-testid": "reset-icon",
+                  onKeyDown: handleResetIconEnter,
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ jsx(IconButton, { onClick: handleResetInput, children: /* @__PURE__ */ jsx(Icon, { code: "close_small" }) })
+                }
+              ) : null,
+              (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ jsx(
+                InputExtraSuffixStyled,
+                __spreadProps(__spreadValues({
+                  "data-testid": "extra-suffix"
+                }, !!extraSuffixOnClick && {
+                  tabIndex: 0,
+                  onClick: () => extraSuffixOnClick(inputValue),
+                  onKeyDown: handleExtraSuffixEnter
+                }), {
+                  children: extraSuffix.component
+                })
+              ) : null
+            ]
+          }
+        ),
+        message ? /* @__PURE__ */ jsx(TextFieldMessageStyled, { children: /* @__PURE__ */ jsx(
+          Typography,
+          {
+            color: showError ? "error.default" : messageColor,
+            element: "span",
+            fontStyles: "body3",
+            children: message
+          }
+        ) }) : null,
+        children
+      ]
+    }
+  );
+};
+export {
+  InputExtraPrefixStyled,
+  InputExtraSuffixStyled,
+  InputFieldStyled,
+  InputWrapperStyled,
+  ResetInputIconStyled,
+  TextField,
+  TextFieldMessageStyled,
+  TextFieldStyled
+};

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@dt-dds/react-text-field",
+  "version": "1.0.0-beta.49",
+  "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.41",
+    "@dt-dds/react-spinner": "1.0.0-beta.44",
+    "@dt-dds/react-label-field": "1.0.0-beta.37",
+    "@dt-dds/react-typography": "1.0.0-beta.32",
+    "@dt-dds/react-icon-button": "1.0.0-beta.9",
+    "@dt-dds/react-icon": "1.0.0-beta.42"
+  },
+  "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": "^6.6.3",
+    "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"
+  }
+}