@ultraviolet/ui 1.51.0 → 1.51.2

package/dist/src/components/TextArea/index.js

@@ -1,210 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { Icon } from '@ultraviolet/icons';
-import { forwardRef, useId, useMemo } from 'react';
-import { Button, SIZE_HEIGHT } from '../Button/index.js';
-import { Row } from '../Row/index.js';
-import { Stack } from '../Stack/index.js';
-import { Text } from '../Text/index.js';
-import { Tooltip } from '../Tooltip/index.js';
-import { jsxs, jsx } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-const STATE_ICON_SIZE = 16;
-const StyledTextAreaWrapper = /*#__PURE__*/_styled("div", {
-  target: "enu776d2"
-})(process.env.NODE_ENV === "production" ? {
-  name: "8k1832",
-  styles: "position:relative;display:flex"
-} : {
-  name: "8k1832",
-  styles: "position:relative;display:flex",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledTextAreaAbsoluteStack = /*#__PURE__*/_styled(Stack, {
-  target: "enu776d1"
-})("position:absolute;top:", ({
-  theme
-}) => theme.space['1.5'], ";right:", ({
-  theme
-}) => theme.space['1'], ";");
-const StyledTextArea = /*#__PURE__*/_styled('textarea', {
-  shouldForwardProp: prop => !['hasSentimentIcon', 'isClearable'].includes(prop),
-  target: "enu776d0"
-})("width:100%;resize:vertical;background:", ({
-  theme
-}) => theme.colors.neutral.background, ";border:1px solid ", ({
-  theme
-}) => theme.colors.neutral.border, ";color:", ({
-  theme
-}) => theme.colors.neutral.text, ";&::placeholder{color:", ({
-  theme
-}) => theme.colors.neutral.textWeak, ";}border-radius:", ({
-  theme
-}) => theme.radii.default, ";padding:", ({
-  theme
-}) => `${theme.space['1.5']} ${theme.space['1']} ${theme.space['1.5']} ${theme.space['2']}`, ";padding-right:", ({
-  theme,
-  isClearable,
-  hasSentimentIcon
-}) => /* including 1 optional if both element is visible + 1 because content is absolute 1space unit from right */
-`calc(${theme.space[isClearable && hasSentimentIcon ? '4' : '3']} + ${isClearable ? `${SIZE_HEIGHT.xsmall}px` : '0px'} + ${hasSentimentIcon ? `${STATE_ICON_SIZE}px` : '0px'})`, ";&[data-success='true']{border-color:", ({
-  theme
-}) => theme.colors.success.border, ";}&[data-error='true']{border-color:", ({
-  theme
-}) => theme.colors.danger.border, ";}&[data-readOnly='true']{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundWeak, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.border, ";}&[data-disabled='true']{background:", ({
-  theme
-}) => theme.colors.neutral.backgroundDisabled, ";border-color:", ({
-  theme
-}) => theme.colors.neutral.borderDisabled, ";&::placeholder{color:", ({
-  theme
-}) => theme.colors.neutral.textWeakDisabled, ";}}&:not([data-disabled='true']):hover{&:hover{border-color:", ({
-  theme
-}) => theme.colors.primary.border, ";}&:focus{outline:none;border-color:", ({
-  theme
-}) => theme.colors.primary.border, ";box-shadow:", ({
-  theme
-}) => theme.shadows.focusPrimary, ";}}");
-/**
- * This component offers an extended textarea HTML
- */
-const TextArea = /*#__PURE__*/forwardRef(({
-  id,
-  className,
-  tabIndex,
-  value,
-  onChange,
-  placeholder,
-  rows = 3,
-  disabled = false,
-  readOnly = false,
-  success,
-  error,
-  helper,
-  minLength,
-  maxLength,
-  tooltip,
-  label,
-  autoFocus,
-  required = false,
-  'data-testid': dataTestId,
-  name,
-  onFocus,
-  onBlur,
-  clearable = false,
-  labelDescription
-}, ref) => {
-  const localId = useId();
-  const sentiment = useMemo(() => {
-    if (error) {
-      return 'danger';
-    }
-    if (success) {
-      return 'success';
-    }
-    return 'neutral';
-  }, [error, success]);
-  const notice = success || error || helper;
-  const computedClearable = clearable && !!value;
-  return jsxs(Stack, {
-    gap: "0.5",
-    className: className,
-    children: [label || labelDescription ? jsxs(Stack, {
-      direction: "row",
-      gap: "1",
-      alignItems: "center",
-      children: [label ? jsxs(Stack, {
-        direction: "row",
-        gap: "0.5",
-        alignItems: "start",
-        children: [jsx(Text, {
-          as: "label",
-          variant: "bodyStrong",
-          sentiment: "neutral",
-          htmlFor: id ?? localId,
-          children: label
-        }), required ? jsx(Icon, {
-          name: "asterisk",
-          color: "danger",
-          size: 8
-        }) : null]
-      }) : null, labelDescription ?? null]
-    }) : null, jsx(Tooltip, {
-      text: tooltip,
-      children: jsxs(StyledTextAreaWrapper, {
-        children: [jsx(StyledTextArea, {
-          "aria-invalid": !!error,
-          id: id ?? localId,
-          tabIndex: tabIndex,
-          autoFocus: autoFocus,
-          disabled: disabled,
-          rows: rows,
-          ref: ref,
-          value: value,
-          onChange: event => {
-            onChange(event.currentTarget.value);
-          },
-          hasSentimentIcon: !!success || !!error,
-          "data-disabled": disabled,
-          "data-readOnly": readOnly,
-          "data-success": !!success,
-          "data-error": !!error,
-          isClearable: !!computedClearable,
-          minLength: minLength,
-          maxLength: maxLength,
-          placeholder: placeholder,
-          "data-testid": dataTestId,
-          name: name,
-          onFocus: onFocus,
-          onBlur: onBlur
-        }), jsxs(StyledTextAreaAbsoluteStack, {
-          direction: "row",
-          alignItems: "center",
-          gap: "1",
-          children: [computedClearable ? jsx(Button, {
-            "aria-label": "clear value",
-            variant: "ghost",
-            size: "xsmall",
-            icon: "close",
-            onClick: () => {
-              onChange('');
-            },
-            sentiment: "neutral"
-          }) : null, success ? jsx(Icon, {
-            name: "checkbox-circle-outline",
-            color: "success",
-            size: STATE_ICON_SIZE
-          }) : null, error ? jsx(Icon, {
-            name: "alert",
-            color: "danger",
-            variant: "outlined"
-          }) : null]
-        })]
-      })
-    }), notice || maxLength ? jsxs(Row, {
-      templateColumns: "minmax(0, 1fr) min-content",
-      gap: "1",
-      children: [jsxs("div", {
-        children: [error || success || typeof helper === 'string' ? jsx(Text, {
-          as: "p",
-          variant: "caption",
-          sentiment: sentiment,
-          prominence: !error && !success ? 'weak' : 'default',
-          disabled: disabled,
-          children: error || success || helper
-        }) : null, !error && !success && typeof helper !== 'string' && helper ? helper : null]
-      }), maxLength ? jsxs(Text, {
-        as: "div",
-        sentiment: "neutral",
-        prominence: "weak",
-        variant: "caption",
-        children: [value?.length ?? 0, "/", maxLength]
-      }) : null]
-    }) : null]
-  });
-});
-
-export { TextArea };

package/dist/src/components/TextInput/index.js

@@ -1,451 +0,0 @@
-import _styled from '@emotion/styled/base';
-import { css } from '@emotion/react';
-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';
-import { jsx, jsxs } from '@emotion/react/jsx-runtime';
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-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 = /*#__PURE__*/_styled(Separator, {
-  target: "el3h3g98"
-})("margin:1px 0px;height:calc(100% - 2px);background-color:", ({
-  theme: {
-    colors
-  }
-}) => colors.neutral.backgroundStrong, ";");
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "176jwhy",
-  styles: "pointer-events:auto;>button{box-shadow:none!important;}"
-} : {
-  name: "176jwhy",
-  styles: "pointer-events:auto;>button{box-shadow:none!important;}",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const StyledRightElement = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['edit', 'touchable'].includes(prop),
-  target: "el3h3g97"
-})(({
-  theme: {
-    colors,
-    space
-  }
-}) => /*#__PURE__*/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 && _ref2, ";");
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "z8qxmc",
-  styles: "transform:translate(-9.6%, -3px) scale(0.8)"
-} : {
-  name: "z8qxmc",
-  styles: "transform:translate(-9.6%, -3px) scale(0.8)",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-const StyledLabel = /*#__PURE__*/_styled('label', {
-  shouldForwardProp: prop => !['edit', 'error', 'resizable', 'fillAvailable'].includes(prop),
-  target: "el3h3g96"
-})("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 && _ref, " ", ({
-  disabled,
-  theme: {
-    colors
-  }
-}) => disabled && /*#__PURE__*/css("color:", colors.neutral.textDisabled, ";"), " ", ({
-  readOnly,
-  theme: {
-    colors
-  }
-}) => readOnly && /*#__PURE__*/css("color:", colors.neutral.textDisabled, ";"), " ", ({
-  error,
-  theme: {
-    colors
-  }
-}) => error && /*#__PURE__*/css("color:", colors.danger.text, ";"), ";");
-const StyledRelativeDiv = /*#__PURE__*/_styled("div", {
-  target: "el3h3g95"
-})(process.env.NODE_ENV === "production" ? {
-  name: "bjn8wh",
-  styles: "position:relative"
-} : {
-  name: "bjn8wh",
-  styles: "position:relative",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const StyledError = /*#__PURE__*/_styled("div", {
-  target: "el3h3g94"
-})("font-size:12px;color:", ({
-  theme
-}) => theme.colors.danger.text, ";padding-top:", ({
-  theme
-}) => theme.space['0.25'], ";");
-const StyledNotice = /*#__PURE__*/_styled(Notice, {
-  target: "el3h3g93"
-})("margin-top:", ({
-  theme
-}) => theme.space['0.5'], ";");
-const StyledInput = /*#__PURE__*/_styled('input', {
-  shouldForwardProp: prop => !['as', 'error', 'fillAvailable', 'hasLabel', 'isPlaceholderVisible', 'multiline', 'resizable', 'inputSize', 'paddingRightFactor', 'rightComponentLength', 'unit'].includes(prop),
-  target: "el3h3g92"
-})("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 = /*#__PURE__*/_styled(Stack, {
-  target: "el3h3g91"
-})(process.env.NODE_ENV === "production" ? {
-  name: "9bmev",
-  styles: "min-width:24px"
-} : {
-  name: "9bmev",
-  styles: "min-width:24px",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-});
-const UnitLabel = /*#__PURE__*/_styled(Text, {
-  target: "el3h3g90"
-})("padding:", ({
-  theme
-}) => theme.space['1'], " 0;line-height:18px;");
-
-/**
- * TextInput component allows users to input text, with options for customization and validation.
- * It supports various input types and should be appropriately sized with clear labeling.
- */
-const TextInput = /*#__PURE__*/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), []);
-
-  // Forward ref to parent ref
-  useImperativeHandle(ref, () => controlRef, []);
-
-  // Focus when password is visible
-  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 !== undefined || isPassToggleable || random || unit);
-  const getType = () => {
-    if (isPassToggleable) {
-      return passwordVisible || generated ? 'text' : 'password';
-    }
-    return multiline ? undefined : type;
-  };
-  const inputSize = size;
-  const rightComponentsArray = useMemo(() => {
-    const rightComponents = [];
-    if (isPassToggleable && !generated) {
-      rightComponents.push(jsx(Button, {
-        "data-testid": dataTestId ? `${dataTestId}-visibility-button` : undefined,
-        "aria-label": passwordVisible ? 'hide' : 'show',
-        onClick: handlePassVisibilityClick,
-        variant: "ghost",
-        sentiment: "neutral",
-        icon: passwordVisible ? 'eye-off' : 'eye',
-        size: "small"
-      }, "password-visible"));
-    }
-    if (random) {
-      rightComponents.push(jsx(Button, {
-        "data-testid": dataTestId ? `${dataTestId}-randomize-button` : undefined,
-        "aria-label": "randomize",
-        onClick: handleClickRandomize,
-        disabled: disabled,
-        icon: "auto-fix",
-        variant: "ghost",
-        sentiment: "neutral",
-        size: "small"
-      }, "random"));
-    }
-    if (valid === false || valid === true) {
-      rightComponents.push(jsx(Icon, {
-        name: !valid ? 'close' : 'check',
-        color: !valid ? 'danger' : 'success',
-        size: 20
-      }, "valid"));
-    }
-    if (unit) {
-      rightComponents.push(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 jsxs("div", {
-    className: className,
-    children: [jsxs(StyledRelativeDiv, {
-      children: [jsx(StyledInput, {
-        "aria-controls": ariaControls,
-        "aria-label": label || undefined,
-        "aria-labelledby": hasLabel ? ariaControls : undefined,
-        as: multiline ? 'textarea' : 'input',
-        autoComplete: autoComplete,
-        autoFocus: autoFocus,
-        cols: cols,
-        "data-testid": dataTestId,
-        defaultValue: defaultValue,
-        disabled: disabled,
-        error: !!error,
-        fillAvailable: fillAvailable,
-        hasLabel: hasLabel,
-        paddingRightFactor: paddingRightFactor,
-        rightComponentLength: rightComponentsArray.length,
-        unit: unit,
-        id: id,
-        inputSize: inputSize,
-        isPlaceholderVisible: isPlaceholderVisible,
-        multiline: multiline,
-        name: name,
-        onBlur: onBlur,
-        onChange: handleChange,
-        onFocus: handleFocus,
-        onKeyUp: onKeyUp,
-        onKeyDown: onKeyDown,
-        placeholder: placeholder,
-        readOnly: readOnly,
-        ref: controlRef,
-        resizable: resizable,
-        rows: rows,
-        style: {
-          height
-        },
-        tabIndex: tabIndex,
-        type: getType(),
-        value: value === null ? '' : value,
-        wrap: wrap,
-        min: min,
-        max: max,
-        required: required,
-        ...inputProps
-      }), hasLabel && jsx(StyledLabel, {
-        edit: !!edit,
-        disabled: disabled,
-        readOnly: readOnly,
-        error: !!error,
-        id: ariaControls,
-        htmlFor: id,
-        "aria-live": "assertive",
-        children: label
-      }), hasRightElement || required ? jsxs(StyledRightElement, {
-        edit: !!edit,
-        touchable: isPassToggleable || !!random,
-        children: [required ? jsx(Icon, {
-          name: "asterisk",
-          color: "danger",
-          size: 10
-        }) : null, showSeparator ? jsx(StyledSeparator, {
-          direction: "vertical"
-        }) : null, rightComponentsArray.length > 0 ? jsx(RightComponent, {
-          justifyContent: "center",
-          direction: "row",
-          alignItems: "center",
-          children: rightComponentsArray
-        }) : null]
-      }) : null]
-    }), jsx(Expandable, {
-      opened: !!error,
-      children: jsx(StyledError, {
-        children: error
-      })
-    }), notice ? jsx(StyledNotice, {
-      children: notice
-    }) : null]
-  });
-});
-
-export { TextInput };