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

package/dist/index.d.ts

@@ -0,0 +1,82 @@
+import { BaseProps, Theme } from '@dt-dds/react-core';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode, ComponentPropsWithoutRef, RefObject } from 'react';
+import * as _emotion_styled from '@emotion/styled';
+import * as _emotion_react from '@emotion/react';
+
+type TextFieldVariant = 'outlined' | 'bottom-line';
+type TextFieldBackgroundFill = 'default' | 'contrast' | 'light';
+
+interface ExtraComponent {
+    onClick?: (text: string) => void;
+    component: ReactNode;
+}
+interface TextFieldProps extends ComponentPropsWithoutRef<'input'>, BaseProps {
+    label: string;
+    isFloatingLabel?: boolean;
+    extraPrefix?: ExtraComponent;
+    extraSuffix?: ExtraComponent;
+    hasError?: boolean;
+    requiredMessage?: string;
+    initialValue?: string;
+    inputRef?: RefObject<HTMLInputElement>;
+    message?: string;
+    variant?: TextFieldVariant;
+    backgroundFill?: TextFieldBackgroundFill;
+    onResetInput?: () => void;
+}
+declare const TextField: ({ hasError, extraPrefix, extraSuffix, label, isFloatingLabel, name, id, required, requiredMessage, style, children, initialValue, inputRef, message: messageProp, type, variant, backgroundFill, disabled, onChange, onResetInput, ...rest }: TextFieldProps) => react_jsx_runtime.JSX.Element;
+
+interface InputFieldStyledProps {
+    isFloatingLabel: boolean;
+    isSearchType: boolean;
+}
+interface InputWrapperStyledProps {
+    isFloatingLabel: boolean;
+    variant: TextFieldVariant;
+    backgroundFill: TextFieldBackgroundFill;
+    hasError: boolean;
+}
+declare const TextFieldStyled: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+} & {
+    isFloatingLabel?: boolean | undefined;
+    hasPrefix?: boolean | undefined;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const InputFieldStyled: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+} & InputFieldStyledProps, react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
+declare const InputExtraPrefixStyled: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+} & {
+    isClickable?: boolean | undefined;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const InputExtraSuffixStyled: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+} & {
+    isClickable?: boolean | undefined;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const TextFieldMessageStyled: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const ResetInputIconStyled: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+}, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+declare const InputWrapperStyled: _emotion_styled.StyledComponent<{
+    theme?: _emotion_react.Theme | undefined;
+    as?: react.ElementType<any, keyof react.JSX.IntrinsicElements> | undefined;
+} & InputWrapperStyledProps, react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+
+declare module '@emotion/react' {
+    interface Theme extends Theme {
+    }
+}
+
+export { ExtraComponent, InputExtraPrefixStyled, InputExtraSuffixStyled, InputFieldStyled, InputFieldStyledProps, InputWrapperStyled, InputWrapperStyledProps, ResetInputIconStyled, TextField, TextFieldMessageStyled, TextFieldProps, TextFieldStyled };

package/dist/index.js

@@ -0,0 +1,451 @@
+"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 text_field_exports = {};
+__export(text_field_exports, {
+  InputExtraPrefixStyled: () => InputExtraPrefixStyled,
+  InputExtraSuffixStyled: () => InputExtraSuffixStyled,
+  InputFieldStyled: () => InputFieldStyled,
+  InputWrapperStyled: () => InputWrapperStyled,
+  ResetInputIconStyled: () => ResetInputIconStyled,
+  TextField: () => TextField,
+  TextFieldMessageStyled: () => TextFieldMessageStyled,
+  TextFieldStyled: () => TextFieldStyled
+});
+module.exports = __toCommonJS(text_field_exports);
+
+// src/TextField.tsx
+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");
+var import_react = require("react");
+
+// 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["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 = import_styled.default.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 = import_styled.default.div`
+  ${({ theme, onClick }) => {
+  const isClickable = !!onClick;
+  return `
+    display: flex;
+    cursor: ${isClickable ? "pointer" : "default"};
+
+    ${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"};
+
+    ${isClickable && `
+        &:hover > i  {
+          color: ${theme.palette.content.dark};
+        }
+      `}
+  `;
+}}
+`;
+var TextFieldMessageStyled = import_styled.default.div`
+  padding-left: ${({ theme }) => theme.spacing["2xs"]};
+`;
+var ResetInputIconStyled = import_styled.default.div`
+  ${({ theme }) => `
+    cursor: pointer;
+    display: flex;
+
+    :hover > i {
+      color: ${theme.palette.content.dark}
+    }
+  `}
+`;
+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.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
+var import_jsx_runtime = require("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] = (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();
+  (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) => {
+    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__ */ (0, import_jsx_runtime.jsxs)(
+    TextFieldStyled,
+    {
+      hasPrefix: !!extraPrefix,
+      isFloatingLabel,
+      style,
+      children: [
+        !isActiveInput || !isFloatingLabel || !isSearchType ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_react_label_field.LabelField,
+          {
+            hasError: showError,
+            htmlFor: textFieldId,
+            isActive: isActiveInput || type === "date",
+            isDisabled: disabled,
+            isFloating: isFloatingLabel,
+            isRequired: required,
+            children: label
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          InputWrapperStyled,
+          {
+            backgroundFill,
+            "data-testid": "input-wrapper",
+            hasError: showError,
+            isFloatingLabel,
+            variant,
+            children: [
+              (extraPrefix == null ? void 0 : extraPrefix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                InputExtraPrefixStyled,
+                __spreadProps(__spreadValues({
+                  "data-testid": "extra-preffix"
+                }, !!extraPreffixOnClick && {
+                  tabIndex: 0,
+                  onClick: () => extraPreffixOnClick(inputValue),
+                  onKeyDown: handleExtraPreffixEnter
+                }), {
+                  children: extraPrefix.component
+                })
+              ) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)(
+                ResetInputIconStyled,
+                {
+                  "data-testid": "reset-icon",
+                  onKeyDown: handleResetIconEnter,
+                  tabIndex: 0,
+                  children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon_button.IconButton, { onClick: handleResetInput, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_icon.Icon, { code: "close_small" }) })
+                }
+              ) : null,
+              (extraSuffix == null ? void 0 : extraSuffix.component) ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                InputExtraSuffixStyled,
+                __spreadProps(__spreadValues({
+                  "data-testid": "extra-suffix"
+                }, !!extraSuffixOnClick && {
+                  tabIndex: 0,
+                  onClick: () => 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,
+            element: "span",
+            fontStyles: "body3",
+            children: message
+          }
+        ) }) : null,
+        children
+      ]
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  InputExtraPrefixStyled,
+  InputExtraSuffixStyled,
+  InputFieldStyled,
+  InputWrapperStyled,
+  ResetInputIconStyled,
+  TextField,
+  TextFieldMessageStyled,
+  TextFieldStyled
+});