@ultraviolet/ui 1.28.0 → 1.29.0

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

@@ -0,0 +1,240 @@
+import _styled from '@emotion/styled/base';
+import { Icon } from '@ultraviolet/icons';
+import { forwardRef, useId } 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 => !['isSuccess', 'isError', '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,
+  isError,
+  isSuccess
+}) => /* 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 '';
+}, ";");
+/**
+ * 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();
+
+  // 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;
+  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(StyledTextAreaWrapper, {
+        children: [jsx(StyledTextArea, {
+          "aria-invalid": !!computedError,
+          id: id ?? localId,
+          tabIndex: tabIndex,
+          autoFocus: autoFocus,
+          disabled: disabled,
+          rows: rows,
+          ref: ref,
+          value: value,
+          onChange: event => {
+            onChange(event.currentTarget.value);
+          },
+          isSuccess: !!computedSuccess,
+          isError: !!computedError,
+          isClearable: !!clearable,
+          minLength: minLength,
+          maxLength: maxLength,
+          placeholder: placeholder,
+          "data-testid": dataTestId,
+          name: name,
+          onFocus: onFocus,
+          onBlur: onBlur,
+          readOnly: computedReadOnly
+        }), jsxs(StyledTextAreaAbsoluteStack, {
+          direction: "row",
+          alignItems: "center",
+          gap: "1",
+          children: [clearable ? 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"
+          }) : null]
+        })]
+      })
+    }), computedSuccess || computedError || computedHelper || maxLength ? jsxs(Row, {
+      templateColumns: "minmax(0, 1fr) min-content",
+      gap: "1",
+      children: [jsxs("div", {
+        children: [computedSuccess ? 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",
+          disabled: disabled,
+          children: computedHelper
+        }) : null, computedHelper && typeof computedHelper !== 'string' ? computedHelper : null]
+      }), maxLength ? jsxs(Text, {
+        as: "div",
+        sentiment: "neutral",
+        prominence: "weak",
+        variant: "caption",
+        children: [value?.length ?? 0, "/", maxLength]
+      }) : null]
+    }) : null]
+  });
+});
+
+export { TextArea };