@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/components/TextInput/index.js

@@ -0,0 +1,472 @@
+import { jsx, jsxs } from "@emotion/react/jsx-runtime";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import randomName from "@scaleway/random-name";
+import { Icon } from "@ultraviolet/icons";
+import { forwardRef, useRef, useState, useCallback, useImperativeHandle, useEffect, useMemo } from "react";
+import { Button } from "../Button/index.js";
+import { Expandable } from "../Expandable/index.js";
+import { Notice } from "../Notice/index.js";
+import { Separator } from "../Separator/index.js";
+import { Stack } from "../Stack/index.js";
+import { Text } from "../Text/index.js";
+const inputSizes = {
+  medium: {
+    default: `
+      height: 48px;
+      padding-left: 8px;
+      padding-right: 20px;
+      padding-top: 14px;
+    `,
+    full: `
+      padding: 8px;
+    `
+  },
+  small: {
+    default: `
+      height: 30px;
+      padding-left: 8px;
+      padding-right: 8px;
+      padding-top: 14px;
+      font-size: 14px;
+    `,
+    full: `
+      padding: 4px 8px;
+    `
+  }
+};
+const StyledSeparator = styled(Separator)`
+  margin: 1px 0px;
+  height: calc(100% - 2px);
+  background-color: ${({ theme: { colors } }) => colors.neutral.backgroundStrong};
+`;
+const StyledRightElement = styled("div", {
+  shouldForwardProp: (prop) => !["edit", "touchable"].includes(prop)
+})`
+  ${({ theme: { colors, space } }) => css`
+    pointer-events: none;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    padding: 0 ${space["1"]};
+    display: flex;
+    gap: ${space["1"]};
+    align-items: center;
+    transition:
+      transform 150ms,
+      color 150ms;
+    color: ${colors.neutral.textWeak};
+
+    &:hover,
+    &:focus-within {
+      color: ${colors.neutral.textWeakHover};
+    }
+  `}
+
+  ${({ touchable }) => touchable && css`
+      pointer-events: auto;
+      > button {
+        box-shadow: none !important;
+      }
+    `}
+`;
+const StyledLabel = styled("label", {
+  shouldForwardProp: (prop) => !["edit", "error", "resizable", "fillAvailable"].includes(prop)
+})`
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  padding-left: 8px;
+  padding-right: 8px;
+  pointer-events: none;
+  color: ${({ theme: { colors } }) => colors.neutral.textWeak};
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: 100%;
+  height: 48px;
+  font-size: ${({ theme }) => theme.typography.bodySmall};
+  transition: transform 150ms;
+  transform: translate(0, 12px) scale(1);
+
+  ${({ edit }) => edit && css`
+      transform: translate(-9.6%, -3px) scale(0.8);
+    `}
+
+  ${({ disabled, theme: { colors } }) => disabled && css`
+      color: ${colors.neutral.textDisabled};
+    `}
+
+  ${({ readOnly, theme: { colors } }) => readOnly && css`
+      color: ${colors.neutral.textDisabled};
+    `}
+
+  ${({ error, theme: { colors } }) => error && css`
+      color: ${colors.danger.text};
+    `}
+`;
+const StyledRelativeDiv = styled.div`
+  position: relative;
+`;
+const StyledError = styled.div`
+  font-size: 12px;
+  color: ${({ theme }) => theme.colors.danger.text};
+  padding-top: ${({ theme }) => theme.space["0.25"]};
+`;
+const StyledNotice = styled(Notice)`
+  margin-top: ${({ theme }) => theme.space["0.5"]};
+`;
+const StyledInput = styled("input", {
+  shouldForwardProp: (prop) => ![
+    "as",
+    "error",
+    "fillAvailable",
+    "hasLabel",
+    "isPlaceholderVisible",
+    "multiline",
+    "resizable",
+    "inputSize",
+    "paddingRightFactor",
+    "rightComponentLength",
+    "unit"
+  ].includes(prop)
+})`
+  transition:
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
+  appearance: none;
+  background-color: ${({ theme: { colors } }) => colors.neutral.background};
+  background-image: none;
+  border: 1px solid ${({ theme: { colors } }) => colors.neutral.border};
+  border-radius: ${({ theme: { radii } }) => radii.default};
+  color: ${({ theme: { colors } }) => colors.neutral.text};
+  display: block;
+  max-width: 100%;
+  outline: none;
+  position: relative;
+  width: 100%;
+  padding-left: ${({ theme }) => theme.space["1"]};
+  padding-right: ${({ theme }) => theme.space["1"]};
+  padding-top: 14px;
+  font-size: 16px;
+  line-height: 24px;
+
+  &::placeholder {
+    color: ${({ theme: { colors } }) => colors.neutral.textWeak};
+    opacity: 0;
+  }
+
+  &:hover,
+  &:focus {
+    border-color: ${({ theme: { colors } }) => colors.primary.borderHover};
+  }
+
+  &:focus {
+    box-shadow: ${({ theme: { shadows } }) => shadows.focusPrimary};
+    border-color: ${({ theme: { colors } }) => colors.primary.borderHover};
+  }
+
+  ${({ isPlaceholderVisible }) => isPlaceholderVisible && `&::placeholder {
+      opacity: 1;
+    }`}
+
+  ${({ disabled, theme: { colors } }) => disabled && `cursor: default;
+    pointer-events: none;
+    background-color: ${colors.neutral.backgroundDisabled};
+    border-color: ${colors.neutral.borderDisabled};
+    color: ${colors.neutral.textDisabled};`}
+
+  ${({ readOnly, theme: { colors } }) => readOnly && `background-color: ${colors.neutral.backgroundDisabled};
+    border-color: ${colors.neutral.borderDisabled};
+    color: ${colors.neutral.text};`}
+
+  ${({ inputSize }) => inputSizes[inputSize]?.default}
+
+  ${({ inputSize, hasLabel }) => !!inputSize && !hasLabel && inputSizes[inputSize]?.full}
+
+  ${({ error, theme: { colors, shadows } }) => error && `border-color: ${colors.danger.border};
+
+    &:hover,
+    &:focus {
+      border-color: ${colors.danger.borderHover};
+    }
+
+    &:focus {
+      box-shadow: ${shadows.focusDanger};
+      border-color: ${colors.danger.borderHover};
+    }`}
+
+    ${({ multiline, resizable, fillAvailable }) => multiline && `
+    padding-top: 20px;
+    height: ${fillAvailable ? "100%" : "initial"};
+    resize: ${resizable === false ? "none" : "vertical"};
+  `}
+
+  ${({ multiline, hasLabel, theme }) => multiline && !hasLabel && `
+    padding-top: ${theme.space["1"]};
+  `}
+
+  ${({ paddingRightFactor, rightComponentLength, unit, theme }) => paddingRightFactor > 0 && `
+    padding-right: calc(${unit ? `${unit.length} * ${theme.space["1"]} + ` : ""}${paddingRightFactor + (unit ? rightComponentLength - 1 : rightComponentLength)} * ${theme.space["4"]});
+  `}
+`;
+const RightComponent = styled(Stack)`
+  min-width: 24px;
+`;
+const UnitLabel = styled(Text)`
+  padding: ${({ theme }) => theme.space["1"]} 0;
+  line-height: 18px;
+`;
+const TextInput = forwardRef(
+  ({
+    "data-testid": dataTestId,
+    ariaControls,
+    autoComplete = "on",
+    autoFocus,
+    className,
+    cols,
+    defaultValue,
+    disabled,
+    edit: forceEdit,
+    error,
+    fillAvailable,
+    generated,
+    height,
+    id,
+    label,
+    multiline,
+    name,
+    notice,
+    noTopLabel = false,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyUp,
+    onKeyDown,
+    placeholder,
+    random,
+    readOnly,
+    required,
+    resizable,
+    rows,
+    size = "medium",
+    tabIndex,
+    type = "text",
+    unit,
+    valid,
+    value,
+    wrap,
+    inputProps,
+    min,
+    max
+  }, ref) => {
+    const controlRef = useRef(null);
+    const [visited, setVisited] = useState(false);
+    const [passwordVisible, setPasswordVisible] = useState(false);
+    const togglePasswordVisibility = useCallback(
+      () => setPasswordVisible((x) => !x),
+      []
+    );
+    useImperativeHandle(ref, () => controlRef, []);
+    useEffect(() => {
+      if (passwordVisible) {
+        controlRef?.current?.focus();
+      }
+    }, [passwordVisible]);
+    const handlePassVisibilityClick = useCallback(
+      () => togglePasswordVisibility(),
+      [togglePasswordVisibility]
+    );
+    const randomize = useCallback(
+      () => onChange?.(randomName(random)),
+      [onChange, random]
+    );
+    const handleClickRandomize = useCallback(() => randomize(), [randomize]);
+    const handleFocus = useCallback(
+      (event) => {
+        if (!visited && !readOnly) {
+          setVisited(true);
+        }
+        if (onFocus) {
+          onFocus(event);
+        }
+      },
+      [visited, readOnly, onFocus]
+    );
+    const handleChange = useCallback(
+      (event) => onChange?.(event.target.value),
+      [onChange]
+    );
+    const isPassToggleable = type === "toggleable-password";
+    const hasLabel = !!label && !noTopLabel && size === "medium";
+    const edit = hasLabel && (forceEdit || visited || value || error || generated);
+    const isPlaceholderVisible = !hasLabel || !!edit;
+    const hasRightElement = !!(valid !== void 0 || isPassToggleable || random || unit);
+    const getType = () => {
+      if (isPassToggleable) {
+        return passwordVisible || generated ? "text" : "password";
+      }
+      return multiline ? void 0 : type;
+    };
+    const inputSize = size;
+    const rightComponentsArray = useMemo(() => {
+      const rightComponents = [];
+      if (isPassToggleable && !generated) {
+        rightComponents.push(
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "data-testid": dataTestId ? `${dataTestId}-visibility-button` : void 0,
+              "aria-label": passwordVisible ? "hide" : "show",
+              onClick: handlePassVisibilityClick,
+              variant: "ghost",
+              sentiment: "neutral",
+              icon: passwordVisible ? "eye-off" : "eye",
+              size: "small"
+            },
+            "password-visible"
+          )
+        );
+      }
+      if (random) {
+        rightComponents.push(
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              "data-testid": dataTestId ? `${dataTestId}-randomize-button` : void 0,
+              "aria-label": "randomize",
+              onClick: handleClickRandomize,
+              disabled,
+              icon: "auto-fix",
+              variant: "ghost",
+              sentiment: "neutral",
+              size: "small"
+            },
+            "random"
+          )
+        );
+      }
+      if (valid === false || valid === true) {
+        rightComponents.push(
+          /* @__PURE__ */ jsx(
+            Icon,
+            {
+              name: !valid ? "close" : "check",
+              color: !valid ? "danger" : "success",
+              size: 20
+            },
+            "valid"
+          )
+        );
+      }
+      if (unit) {
+        rightComponents.push(
+          /* @__PURE__ */ jsx(UnitLabel, { variant: "bodySmall", as: "p", prominence: "weak", children: unit }, "unit")
+        );
+      }
+      return rightComponents;
+    }, [
+      disabled,
+      generated,
+      handleClickRandomize,
+      handlePassVisibilityClick,
+      isPassToggleable,
+      passwordVisible,
+      random,
+      unit,
+      valid,
+      dataTestId
+    ]);
+    const showSeparator = required && hasRightElement || unit;
+    const paddingRightFactor = (required ? 1 : 0) + (showSeparator ? 0.5 : 0);
+    return /* @__PURE__ */ jsxs("div", { className, children: [
+      /* @__PURE__ */ jsxs(StyledRelativeDiv, { children: [
+        /* @__PURE__ */ jsx(
+          StyledInput,
+          {
+            "aria-controls": ariaControls,
+            "aria-label": label || void 0,
+            "aria-labelledby": hasLabel ? ariaControls : void 0,
+            as: multiline ? "textarea" : "input",
+            autoComplete,
+            autoFocus,
+            cols,
+            "data-testid": dataTestId,
+            defaultValue,
+            disabled,
+            error: !!error,
+            fillAvailable,
+            hasLabel,
+            paddingRightFactor,
+            rightComponentLength: rightComponentsArray.length,
+            unit,
+            id,
+            inputSize,
+            isPlaceholderVisible,
+            multiline,
+            name,
+            onBlur,
+            onChange: handleChange,
+            onFocus: handleFocus,
+            onKeyUp,
+            onKeyDown,
+            placeholder,
+            readOnly,
+            ref: controlRef,
+            resizable,
+            rows,
+            style: { height },
+            tabIndex,
+            type: getType(),
+            value: value === null ? "" : value,
+            wrap,
+            min,
+            max,
+            required,
+            ...inputProps
+          }
+        ),
+        hasLabel && /* @__PURE__ */ jsx(
+          StyledLabel,
+          {
+            edit: !!edit,
+            disabled,
+            readOnly,
+            error: !!error,
+            id: ariaControls,
+            htmlFor: id,
+            "aria-live": "assertive",
+            children: label
+          }
+        ),
+        hasRightElement || required ? /* @__PURE__ */ jsxs(
+          StyledRightElement,
+          {
+            edit: !!edit,
+            touchable: isPassToggleable || !!random,
+            children: [
+              required ? /* @__PURE__ */ jsx(Icon, { name: "asterisk", color: "danger", size: 10 }) : null,
+              showSeparator ? /* @__PURE__ */ jsx(StyledSeparator, { direction: "vertical" }) : null,
+              rightComponentsArray.length > 0 ? /* @__PURE__ */ jsx(
+                RightComponent,
+                {
+                  justifyContent: "center",
+                  direction: "row",
+                  alignItems: "center",
+                  children: rightComponentsArray
+                }
+              ) : null
+            ]
+          }
+        ) : null
+      ] }),
+      /* @__PURE__ */ jsx(Expandable, { opened: !!error, children: /* @__PURE__ */ jsx(StyledError, { children: error }) }),
+      notice ? /* @__PURE__ */ jsx(StyledNotice, { children: notice }) : null
+    ] });
+  }
+);
+export {
+  TextInput
+};

package/dist/components/TextInputV2/index.d.ts

@@ -0,0 +1,30 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+export declare const TEXTINPUT_SIZE_HEIGHT: {
+    readonly large: 48;
+    readonly medium: 40;
+    readonly small: 32;
+};
+/**
+ * This component offers an extended input HTML
+ */
+export declare const TextInputV2: import("react").ForwardRefExoticComponent<{
+    className?: string | undefined;
+    clearable?: boolean | undefined;
+    'data-testid'?: string | undefined;
+    error?: string | undefined;
+    helper?: ReactNode;
+    label?: string | undefined;
+    labelDescription?: ReactNode;
+    loading?: boolean | undefined;
+    minLength?: number | undefined;
+    maxLength?: number | undefined;
+    onRandomize?: (() => void) | undefined;
+    onChange?: ((newValue: string) => void) | undefined;
+    prefix?: ReactNode;
+    size?: "large" | "small" | "medium" | undefined;
+    success?: string | boolean | undefined;
+    suffix?: ReactNode;
+    tooltip?: string | undefined;
+    type?: "text" | "email" | "password" | "url" | undefined;
+    value?: string | undefined;
+} & Pick<InputHTMLAttributes<HTMLInputElement>, "autoFocus" | "id" | "tabIndex" | "aria-label" | "aria-labelledby" | "onFocus" | "onBlur" | "onKeyDown" | "name" | "disabled" | "autoComplete" | "placeholder" | "readOnly" | "required"> & import("react").RefAttributes<HTMLInputElement>>;