@ultraviolet/ui 1.30.0 → 1.31.0

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

@@ -0,0 +1,299 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { forwardRef, useRef, useImperativeHandle, useId, useCallback, useMemo } from 'react';
+import { Button } 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 SIZES = {
+  small: '30px',
+  medium: '38px',
+  large: '46px'
+};
+const SideContainer = /*#__PURE__*/_styled(Stack, {
+  target: "e1b9qdjy4"
+})("padding:", ({
+  theme
+}) => `${theme.space['0.25']} ${theme.space['1']}`, ";&[data-size='small']{height:", SIZES.small, ";}&[data-size='medium']{height:", SIZES.medium, ";}&[data-size='large']{height:", SIZES.large, ";padding:", ({
+  theme
+}) => `${theme.space['0.5']} ${theme.space['1']}`, ";}");
+const InputContainer = /*#__PURE__*/_styled(Row, {
+  target: "e1b9qdjy3"
+})(process.env.NODE_ENV === "production" ? {
+  name: "v1pgyp",
+  styles: "border-width:0 1px 0 1px;border-style:solid;border-color:inherit;background:inherit;width:100%"
+} : {
+  name: "v1pgyp",
+  styles: "border-width:0 1px 0 1px;border-style:solid;border-color:inherit;background:inherit;width:100%",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+});
+const Unit = /*#__PURE__*/_styled(Text, {
+  shouldForwardProp: prop => !['size'].includes(prop),
+  target: "e1b9qdjy2"
+})("display:flex;align-items:center;padding:", ({
+  theme
+}) => theme.space['1'], ";height:", ({
+  size
+}) => SIZES[size], ";");
+const Input = /*#__PURE__*/_styled("input", {
+  target: "e1b9qdjy1"
+})("outline:none;border:none;padding:0;width:100%;color:", ({
+  theme
+}) => theme.colors.neutral.text, ";font-size:", ({
+  theme
+}) => theme.typography.body.fontSize, ";font-family:", ({
+  theme
+}) => theme.typography.body.fontFamily, ";font-weight:", ({
+  theme
+}) => theme.typography.body.fontWeight, ";line-height:", ({
+  theme
+}) => theme.typography.body.lineHeight, ";text-align:center;padding:", ({
+  theme
+}) => theme.space['1'], ";background:none;&[data-has-unit='true']{text-align:left;padding:", ({
+  theme
+}) => `${theme.space['1']} 0 ${theme.space['1']} ${theme.space['1']}`, ";}&::-webkit-outer-spin-button,&::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}&{-moz-appearance:textfield;}&[data-size='small']{height:", SIZES.small, ";}&[data-size='medium']{height:", SIZES.medium, ";}&[data-size='large']{height:", SIZES.large, ";}&:read-only{color:", ({
+  theme
+}) => theme.colors.neutral.text, ";background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";&~", Unit, "{background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";}}&:disabled{color:", ({
+  theme
+}) => theme.colors.neutral.textDisabled, ";background:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;&~", Unit, "{background:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;user-select:none;}}&:placeholder-shown~", Unit, "{color:", ({
+  theme
+}) => theme.colors.neutral.textWeak, ";}");
+const Container = /*#__PURE__*/_styled("div", {
+  target: "e1b9qdjy0"
+})("display:flex;align-items:center;justify-content:space-between;flex-direction:row;border:1px solid ", ({
+  theme
+}) => theme.colors.neutral.border, ";border-radius:", ({
+  theme
+}) => theme.radii.default, ";&:focus-within{border-color:", ({
+  theme
+}) => theme.colors.primary.borderHover, ";box-shadow:", ({
+  theme
+}) => theme.shadows.focusPrimary, ";}&[data-success='true']{border-color:", ({
+  theme
+}) => theme.colors.success.border, ";}&[data-error='true']{border-color:", ({
+  theme
+}) => theme.colors.danger.border, ";}&:hover{border-color:", ({
+  theme
+}) => theme.colors.primary.borderHover, ";}&[data-readonly='true']{border-color:", ({
+  theme
+}) => theme.colors.neutral.border, ";background:", ({
+  theme
+}) => theme.colors.neutral.backgroundWeak, ";cursor:not-allowed;}&[data-disabled='true']{border-color:", ({
+  theme
+}) => theme.colors.neutral.borderDisabled, ";background:", ({
+  theme
+}) => theme.colors.neutral.backgroundDisabled, ";cursor:not-allowed;}");
+/**
+ * NumberInputV2 component is used to increment / decrement a number value by clicking on + / - buttons or
+ * by typing into input. If the value is out of the min / max range, the input will automatically be the min / max value on blur.
+ */
+const NumberInputV2 = /*#__PURE__*/forwardRef(({
+  disabled = false,
+  max = Infinity,
+  min = 0,
+  name,
+  onChange,
+  onFocus,
+  onBlur,
+  size = 'medium',
+  step,
+  unit,
+  value,
+  tooltip,
+  className,
+  label,
+  labelDescription,
+  id,
+  placeholder = '',
+  error,
+  success,
+  helper,
+  'aria-label': ariaLabel,
+  'data-testid': dataTestId,
+  required,
+  autoFocus,
+  readOnly
+}, ref) => {
+  const localRef = useRef(null);
+  useImperativeHandle(ref, () => localRef.current);
+  const uniqueId = useId();
+  const localId = id ?? uniqueId;
+  const createChangeEvent = newValue => ({
+    target: {
+      value: newValue
+    }
+  });
+  const onClickSideButton = useCallback(direction => () => {
+    if (direction === 'up') {
+      localRef.current?.stepUp();
+      onChange?.(createChangeEvent(localRef.current?.value ?? min));
+    }
+    if (direction === 'down') {
+      localRef.current?.stepDown();
+      onChange?.(createChangeEvent(localRef.current?.value ?? min));
+    }
+  }, [localRef, min, onChange]);
+  const isMinusDisabled = useMemo(() => {
+    if (!localRef?.current?.value || localRef?.current?.value === '') {
+      return false;
+    }
+    const numericValue = Number(localRef?.current?.value);
+    if (Number.isNaN(numericValue)) return false;
+    const minValue = typeof min === 'number' ? min : Number(min);
+    return Number.isNaN(numericValue) || numericValue <= minValue;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [localRef?.current?.value, min]);
+  const isPlusDisabled = useMemo(() => {
+    if (!localRef?.current?.value || localRef?.current?.value === '') {
+      return false;
+    }
+    const numericValue = Number(localRef?.current?.value);
+    if (Number.isNaN(numericValue)) return false;
+    const maxValue = typeof max === 'number' ? max : Number(max);
+    return numericValue >= maxValue;
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [localRef?.current?.value, max]);
+  const helperSentiment = useMemo(() => {
+    if (error) {
+      return 'danger';
+    }
+    if (success) {
+      return 'success';
+    }
+    return 'neutral';
+  }, [error, success]);
+  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("div", {
+      children: jsx(Tooltip, {
+        text: tooltip,
+        children: jsxs(Container, {
+          "data-disabled": disabled,
+          "data-readonly": readOnly,
+          "data-error": !!error,
+          "data-success": !!success,
+          "data-unit": !!unit,
+          children: [jsx(SideContainer, {
+            justifyContent: "center",
+            alignItems: "center",
+            "data-size": size,
+            children: jsx(Button, {
+              sentiment: "neutral",
+              variant: "ghost",
+              icon: "minus",
+              size: size === 'small' ? 'xsmall' : 'small',
+              disabled: disabled || readOnly || isMinusDisabled,
+              onClick: onClickSideButton('down'),
+              "aria-label": "minus"
+            })
+          }), jsxs(InputContainer, {
+            justifyContent: "space-between",
+            alignItems: "center",
+            templateColumns: "1fr auto",
+            children: [jsx(Input, {
+              ref: localRef,
+              type: "number",
+              name: name,
+              id: localId,
+              placeholder: placeholder,
+              onBlur: event => {
+                if (event.target.value === '') {
+                  onBlur?.(event);
+                  return;
+                }
+                const numericValue = Number(event.target.value);
+                const maxValue = typeof max === 'number' ? max : Number(max);
+                const minValue = typeof min === 'number' ? min : Number(min);
+                if (Number.isNaN(numericValue) || !Number.isNaN(minValue) && numericValue < minValue) {
+                  onChange?.(createChangeEvent(min.toString()));
+                }
+                if (Number.isNaN(numericValue) || !Number.isNaN(maxValue) && numericValue > maxValue) {
+                  onChange?.(createChangeEvent(max.toString()));
+                }
+                onBlur?.(event);
+              },
+              onFocus: onFocus,
+              onChange: onChange,
+              value: value,
+              "data-size": size,
+              step: step,
+              disabled: disabled,
+              "aria-label": ariaLabel,
+              "data-testid": dataTestId,
+              min: min,
+              max: max,
+              required: required,
+              autoFocus: autoFocus,
+              readOnly: readOnly,
+              "data-has-unit": !!unit
+            }), unit ? jsx(Unit, {
+              variant: "body",
+              sentiment: "neutral",
+              as: "span",
+              disabled: disabled,
+              size: size,
+              children: unit
+            }) : null]
+          }), jsx(SideContainer, {
+            justifyContent: "center",
+            alignItems: "center",
+            "data-size": size,
+            children: jsx(Button, {
+              sentiment: "neutral",
+              variant: "ghost",
+              icon: "plus",
+              size: size === 'small' ? 'xsmall' : 'small',
+              disabled: disabled || readOnly || isPlusDisabled,
+              onClick: onClickSideButton('up'),
+              "aria-label": "plus"
+            })
+          })]
+        })
+      })
+    }), error || success || helper ? jsx(Text, {
+      variant: "caption",
+      as: "span",
+      prominence: !error && !success ? 'weak' : undefined,
+      sentiment: helperSentiment,
+      disabled: disabled || readOnly,
+      children: error || success || helper
+    }) : null]
+  });
+});
+
+export { NumberInputV2 };

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

@@ -5,7 +5,7 @@ import _styled from '@emotion/styled/base';
  * it accepts few props to deal with spacing and align.
  */
 const Stack = /*#__PURE__*/_styled('div', {
-  shouldForwardProp: prop => !['gap', 'direction', 'alignItems', 'justifyContent', 'wrap', 'width'].includes(prop),
+  shouldForwardProp: prop => !['gap', 'direction', 'alignItems', 'justifyContent', 'wrap', 'width', 'flex'].includes(prop),
   target: "ehpbis70"
 })("display:flex;", ({
   theme,

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

@@ -1,6 +1,6 @@
 import _styled from '@emotion/styled/base';
 import { Icon } from '@ultraviolet/icons';
-import { forwardRef, useId } from 'react';
+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';
@@ -28,7 +28,7 @@ const StyledTextAreaAbsoluteStack = /*#__PURE__*/_styled(Stack, {
   theme
 }) => theme.space['1'], ";");
 const StyledTextArea = /*#__PURE__*/_styled('textarea', {
-  shouldForwardProp: prop => !['isSuccess', 'isError', 'isClearable'].includes(prop),
+  shouldForwardProp: prop => !['hasSentimentIcon', 'isClearable'].includes(prop),
   target: "enu776d0"
 })("width:100%;resize:vertical;background:", ({
   theme
@@ -45,57 +45,29 @@ const StyledTextArea = /*#__PURE__*/_styled('textarea', {
 }) => `${theme.space['1.5']} ${theme.space['1']} ${theme.space['1.5']} ${theme.space['2']}`, ";padding-right:", ({
   theme,
   isClearable,
-  isError,
-  isSuccess
+  hasSentimentIcon
 }) => /* including 1 optional if both element is visible + 1 because content is absolute 1space unit from right */
-`calc(${theme.space[isClearable && (isSuccess || isError) ? '4' : '3']} + ${isClearable ? `${SIZE_HEIGHT.xsmall}px` : '0px'} + ${isSuccess || isError ? `${STATE_ICON_SIZE}px` : '0px'})`, ";", ({
-  theme,
-  disabled
-}) => !disabled ? `
-  &:hover {
-    border-color: ${theme.colors.primary.border};
-  }
-  &:focus {
-    outline: none;
-    border-color: ${theme.colors.primary.border};
-    box-shadow: ${theme.shadows.focusPrimary};
-  }
-  ` : '', " ", ({
-  theme,
-  isSuccess,
-  isError,
-  readOnly,
-  disabled
-}) => {
-  if (disabled) {
-    return `
-            background : ${theme.colors.neutral.backgroundDisabled};
-            border-color : ${theme.colors.neutral.borderDisabled};
-            color : ${theme.colors.neutral.textDisabled};
-            &::placeholder {
-              color: ${theme.colors.neutral.textWeakDisabled};
-            }
-            cursor: not-allowed;
-        `;
-  }
-  if (readOnly) {
-    return `
-            background : ${theme.colors.neutral.backgroundWeak};
-            border-color : ${theme.colors.neutral.borderWeak};
-        `;
-  }
-  if (isSuccess) {
-    return `
-            border-color : ${theme.colors.success.border};
-        `;
-  }
-  if (isError) {
-    return `
-            border-color : ${theme.colors.danger.border};
-        `;
-  }
-  return '';
-}, ";");
+`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
  */
@@ -126,12 +98,17 @@ const TextArea = /*#__PURE__*/forwardRef(({
   labelDescription
 }, ref) => {
   const localId = useId();
-
-  // Avoid conflicts between properties
-  const computedReadOnly = !disabled && readOnly;
-  const computedSuccess = !disabled && !readOnly ? success : undefined;
-  const computedError = !disabled && !readOnly && !success ? error : undefined;
-  const computedHelper = !success && !error ? helper : undefined;
+  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,
@@ -159,7 +136,7 @@ const TextArea = /*#__PURE__*/forwardRef(({
       text: tooltip,
       children: jsxs(StyledTextAreaWrapper, {
         children: [jsx(StyledTextArea, {
-          "aria-invalid": !!computedError,
+          "aria-invalid": !!error,
           id: id ?? localId,
           tabIndex: tabIndex,
           autoFocus: autoFocus,
@@ -170,22 +147,24 @@ const TextArea = /*#__PURE__*/forwardRef(({
           onChange: event => {
             onChange(event.currentTarget.value);
           },
-          isSuccess: !!computedSuccess,
-          isError: !!computedError,
-          isClearable: !!clearable,
+          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,
-          readOnly: computedReadOnly
+          onBlur: onBlur
         }), jsxs(StyledTextAreaAbsoluteStack, {
           direction: "row",
           alignItems: "center",
           gap: "1",
-          children: [clearable ? jsx(Button, {
+          children: [computedClearable ? jsx(Button, {
             "aria-label": "clear value",
             variant: "ghost",
             size: "xsmall",
@@ -204,28 +183,18 @@ const TextArea = /*#__PURE__*/forwardRef(({
           }) : null]
         })]
       })
-    }), computedSuccess || computedError || computedHelper || maxLength ? jsxs(Row, {
+    }), notice || maxLength ? jsxs(Row, {
       templateColumns: "minmax(0, 1fr) min-content",
       gap: "1",
       children: [jsxs("div", {
-        children: [computedSuccess ? jsx(Text, {
+        children: [error || success || typeof helper === 'string' ? jsx(Text, {
           as: "p",
           variant: "caption",
-          sentiment: "success",
-          children: computedSuccess
-        }) : null, computedError ? jsx(Text, {
-          as: "p",
-          variant: "caption",
-          sentiment: "danger",
-          children: computedError
-        }) : null, computedHelper && typeof computedHelper === 'string' ? jsx(Text, {
-          as: "p",
-          variant: "caption",
-          sentiment: "neutral",
-          prominence: "weak",
+          sentiment: sentiment,
+          prominence: !error && !success ? 'weak' : 'default',
           disabled: disabled,
-          children: computedHelper
-        }) : null, computedHelper && typeof computedHelper !== 'string' ? computedHelper : null]
+          children: error || success || helper
+        }) : null, !error && !success && typeof helper !== 'string' && helper ? helper : null]
       }), maxLength ? jsxs(Text, {
         as: "div",
         sentiment: "neutral",