@ultraviolet/ui 1.30.0 → 1.31.0

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

@@ -0,0 +1,282 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { forwardRef, useId, useState, useMemo } from 'react';
+import { Button } from '../Button/index.js';
+import { Loader } from '../Loader/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';
+
+const TEXTINPUT_SIZE_HEIGHT = {
+  large: 48,
+  medium: 40,
+  small: 32
+};
+const BasicPrefixStack = /*#__PURE__*/_styled(Stack, {
+  target: "e7tir8v5"
+})("padding:", ({
+  theme
+}) => theme.space['2'], ";border-right:1px solid;border-color:inherit;");
+const StateStack = /*#__PURE__*/_styled(Stack, {
+  target: "e7tir8v4"
+})("padding:", ({
+  theme
+}) => `0 ${theme.space['2']}`, ";");
+const BasicSuffixStack = /*#__PURE__*/_styled(Stack, {
+  target: "e7tir8v3"
+})("padding:", ({
+  theme
+}) => `0 ${theme.space['2']}`, ";border-left:1px solid;border-color:inherit;");
+const CTASuffixStack = /*#__PURE__*/_styled(Stack, {
+  target: "e7tir8v2"
+})("padding:", ({
+  theme
+}) => `0 ${theme.space['1']}`, ";border-left:1px solid;border-color:inherit;");
+const StyledInput = /*#__PURE__*/_styled('input', {
+  shouldForwardProp: prop => !['isSuccess', 'isError', 'isClearable'].includes(prop),
+  target: "e7tir8v1"
+})("flex:1;border:none;outline:none;height:100%;padding-left:", ({
+  theme
+}) => theme.space['2'], ";background:transparent;");
+const StyledInputWrapper = /*#__PURE__*/_styled('div', {
+  shouldForwardProp: prop => !['hasFocus', 'size'].includes(prop),
+  target: "e7tir8v0"
+})("display:flex;flex-direction:row;height:", ({
+  size
+}) => TEXTINPUT_SIZE_HEIGHT[size], "px;background:", ({
+  theme
+}) => theme.colors.neutral.background, ";border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";&>", StyledInput, "{color:", ({
+  theme
+}) => theme.colors.neutral.text, ";&::placeholder{color:", ({
+  theme
+}) => theme.colors.neutral.textWeak, ";}}&[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, ";&>", StyledInput, "{color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";&::placeholder{color:", ({
+  theme
+}) => theme.colors.neutral.textWeakDisabled, ";}}}&:not([data-disabled='true']):not([data-readOnly]):hover{border-color:", ({
+  theme
+}) => theme.colors.primary.border, ";}", ({
+  theme,
+  hasFocus
+}) => hasFocus ? `
+  box-shadow: ${theme.shadows.focusPrimary};
+  border: 1px solid ${theme.colors.primary.border};
+` : null, ";");
+/**
+ * This component offers an extended input HTML
+ */
+const TextInput = /*#__PURE__*/forwardRef(({
+  id,
+  className,
+  tabIndex,
+  value,
+  onChange,
+  placeholder,
+  disabled = false,
+  readOnly = false,
+  success,
+  error,
+  helper,
+  tooltip,
+  label,
+  autoFocus,
+  required = false,
+  'data-testid': dataTestId,
+  name,
+  onFocus,
+  onBlur,
+  clearable = false,
+  labelDescription,
+  type = 'text',
+  prefix,
+  suffix,
+  iconName,
+  size = 'large',
+  loading,
+  onRandomize,
+  minLength,
+  maxLength
+}, ref) => {
+  const localId = useId();
+  const [hasFocus, setHasFocus] = useState(false);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+  const computedType = type === 'password' && isPasswordVisible ? 'text' : type;
+  const sentiment = useMemo(() => {
+    if (error) {
+      return 'danger';
+    }
+    if (success) {
+      return 'success';
+    }
+    return 'neutral';
+  }, [error, success]);
+  const computedClearable = clearable && !!value;
+  return jsxs(Stack, {
+    gap: 0.5,
+    className: className,
+    children: [jsxs(Stack, {
+      direction: "row",
+      gap: "1",
+      alignItems: "center",
+      children: [jsxs(Stack, {
+        direction: "row",
+        gap: "0.5",
+        alignItems: "start",
+        children: [jsx(Text, {
+          as: "label",
+          variant: "bodySmallStrong",
+          sentiment: "neutral",
+          htmlFor: id ?? localId,
+          children: label
+        }), required ? jsx(Icon, {
+          name: "asterisk",
+          color: "danger",
+          size: 8
+        }) : null]
+      }), labelDescription ?? null]
+    }), jsx(Tooltip, {
+      text: tooltip,
+      children: jsxs(StyledInputWrapper, {
+        hasFocus: hasFocus,
+        "data-disabled": disabled,
+        "data-readOnly": readOnly,
+        "data-success": !!success,
+        "data-error": !!error,
+        size: size,
+        children: [prefix ? jsx(BasicPrefixStack, {
+          direction: "row",
+          alignItems: "center",
+          children: jsx(Text, {
+            as: "span",
+            sentiment: "neutral",
+            variant: "bodySmall",
+            disabled: disabled,
+            children: prefix
+          })
+        }) : null, iconName ? jsx(Icon, {
+          name: iconName,
+          size: 16
+        }) : null, jsx(StyledInput, {
+          type: computedType,
+          "aria-invalid": !!error,
+          id: id ?? localId,
+          tabIndex: tabIndex,
+          autoFocus: autoFocus,
+          disabled: disabled,
+          ref: ref,
+          value: value,
+          onChange: event => {
+            onChange(event.currentTarget.value);
+          },
+          isSuccess: !!success,
+          isError: !!error,
+          isClearable: !!computedClearable,
+          placeholder: placeholder,
+          "data-testid": dataTestId,
+          name: name,
+          onFocus: event => {
+            setHasFocus(true);
+            onFocus?.(event);
+          },
+          onBlur: event => {
+            setHasFocus(false);
+            onBlur?.(event);
+          },
+          readOnly: readOnly,
+          minLength: minLength,
+          maxLength: maxLength
+        }), success || error || loading || computedClearable ? jsxs(StateStack, {
+          direction: "row",
+          gap: 1,
+          alignItems: "center",
+          children: [computedClearable ? jsx(Button, {
+            "aria-label": "clear value",
+            disabled: disabled || !value,
+            variant: "ghost",
+            size: size === 'small' ? 'xsmall' : 'small',
+            icon: "close",
+            onClick: () => {
+              onChange('');
+            },
+            sentiment: "neutral"
+          }) : null, success ? jsx(Icon, {
+            name: "checkbox-circle-outline",
+            color: "success",
+            size: 16,
+            disabled: disabled
+          }) : null, error ? jsx(Icon, {
+            name: "alert",
+            color: "danger",
+            size: 16,
+            disabled: disabled
+          }) : null, loading && !disabled ? jsx(Loader, {
+            active: true,
+            size: 16
+          }) : null]
+        }) : null, suffix ? jsx(BasicSuffixStack, {
+          direction: "row",
+          alignItems: "center",
+          children: jsx(Text, {
+            as: "span",
+            sentiment: "neutral",
+            variant: "bodySmall",
+            disabled: disabled,
+            children: suffix
+          })
+        }) : null, type === 'password' ? jsx(CTASuffixStack, {
+          direction: "row",
+          alignItems: "center",
+          children: jsx(Button, {
+            disabled: disabled,
+            "data-testid": dataTestId ? `${dataTestId}-visibility-button` : undefined,
+            "aria-label": isPasswordVisible ? 'hide' : 'show',
+            onClick: () => {
+              setIsPasswordVisible(!isPasswordVisible);
+            },
+            variant: "ghost",
+            sentiment: "neutral",
+            icon: isPasswordVisible ? 'eye-off' : 'eye',
+            size: size === 'small' ? 'xsmall' : 'small'
+          })
+        }) : null, onRandomize ? jsx(CTASuffixStack, {
+          direction: "row",
+          alignItems: "center",
+          children: jsx(Button, {
+            disabled: disabled,
+            icon: "auto-fix",
+            size: size === 'small' ? 'xsmall' : 'small',
+            variant: "ghost",
+            sentiment: "neutral",
+            onClick: onRandomize
+          })
+        }) : null]
+      })
+    }), 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]
+  });
+});
+
+export { TEXTINPUT_SIZE_HEIGHT, TextInput };

package/dist/src/helpers/isJSON.js

@@ -6,6 +6,5 @@ const isJSONString = str => {
   }
   return true;
 };
-var isJSONString$1 = isJSONString;
 
-export { isJSONString$1 as default };
+export { isJSONString as default };

package/dist/src/helpers/recursivelyGetChildrenString.js

@@ -7,6 +7,5 @@ const recursivelyGetChildrenString = children => {
   }
   return '';
 };
-var recursivelyGetChildrenString$1 = recursivelyGetChildrenString;
 
-export { recursivelyGetChildrenString$1 as default };
+export { recursivelyGetChildrenString as default };

package/dist/src/index.js

@@ -32,6 +32,7 @@ export { Modal } from './components/Modal/index.js';
 export { Notice } from './components/Notice/index.js';
 export { CheckboxGroup, CheckboxGroupCheckbox } from './components/CheckboxGroup/index.js';
 export { NumberInput } from './components/NumberInput/index.js';
+export { NumberInputV2 } from './components/NumberInputV2/index.js';
 export { Pagination } from './components/Pagination/index.js';
 export { PasswordCheck } from './components/PasswordCheck/index.js';
 export { PasswordStrengthMeter } from './components/PasswordStrengthMeter/index.js';
@@ -59,6 +60,7 @@ export { TagList } from './components/TagList/index.js';
 export { Text } from './components/Text/index.js';
 export { TextArea } from './components/TextArea/index.js';
 export { TextInput } from './components/TextInput/index.js';
+export { TextInput as TextInputV2 } from './components/TextInputV2/index.js';
 export { TimeInput } from './components/TimeInput/index.js';
 export { ToastContainer, toast } from './components/Toaster/index.js';
 export { Toggle } from './components/Toggle/index.js';

package/dist/src/utils/capitalize.js

@@ -1,4 +1,3 @@
 const capitalize = value => value.charAt(0).toUpperCase() + value.slice(1);
-var capitalize$1 = capitalize;
 
-export { capitalize$1 as default };
+export { capitalize as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ultraviolet/ui",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "description": "Ultraviolet UI",
   "homepage": "https://github.com/scaleway/ultraviolet#readme",
   "repository": {
@@ -67,7 +67,7 @@
     "react-use-clipboard": "1.0.9",
     "reakit": "1.3.11",
     "@ultraviolet/themes": "1.7.0",
-    "@ultraviolet/icons": "2.7.6"
+    "@ultraviolet/icons": "2.7.7"
   },
   "scripts": {
     "build": "rollup -c ../../rollup.config.mjs",