@ringcentral/spring-ui 1.7.0

package/Tag.js

@@ -0,0 +1,28 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useClasses, getTitle } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { I as Icon } from './chunks/Icon.js';
+
+var Tag$1 = {"sui-tag-root":"sui-tag-root","sui-tag-has-start-icon":"sui-tag-has-start-icon","sui-tag-default":"sui-tag-default","sui-tag-neutral":"sui-tag-neutral","sui-tag-secondary":"sui-tag-secondary","sui-tag-primary":"sui-tag-primary","sui-tag-success":"sui-tag-success","sui-tag-warning":"sui-tag-warning","sui-tag-danger":"sui-tag-danger","sui-tag-outlined":"sui-tag-outlined","sui-tag-filled-default":"sui-tag-filled-default","sui-tag-filled-neutral":"sui-tag-filled-neutral","sui-tag-filled-secondary":"sui-tag-filled-secondary","sui-tag-filled-primary":"sui-tag-filled-primary","sui-tag-filled-success":"sui-tag-filled-success","sui-tag-filled-warning":"sui-tag-filled-warning","sui-tag-filled-danger":"sui-tag-filled-danger","sui-tag-inverted-default":"sui-tag-inverted-default","sui-tag-inverted-neutral":"sui-tag-inverted-neutral","sui-tag-inverted-secondary":"sui-tag-inverted-secondary","sui-tag-inverted-primary":"sui-tag-inverted-primary","sui-tag-inverted-success":"sui-tag-inverted-success","sui-tag-inverted-warning":"sui-tag-inverted-warning","sui-tag-inverted-danger":"sui-tag-inverted-danger","sui-tag-label":"sui-tag-label","sui-tag-start-icon":"sui-tag-start-icon"};
+
+const Tag = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Tag' });
+    const { classes, className, children, label: labelProp, startIcon, variant = 'outlined', color = 'default', title, ...rest } = props;
+    const cls = useClasses('tag', classes, className);
+    const label = children ?? labelProp;
+    let tagContent = null;
+    if (startIcon) {
+        tagContent = (jsxs(Fragment, { children: [jsx(Icon, { className: cls('start-icon'), symbol: startIcon, size: 'xsmall' }), jsx("span", { className: cls('label'), children: label })] }));
+    }
+    else {
+        tagContent = label;
+    }
+    return (jsx("div", { ...rest, ref: ref, className: cls('root', color, variant !== 'outlined' && `${variant}-${color}`, {
+            'has-start-icon': !!startIcon,
+            outlined: variant === 'outlined',
+        }), title: title ?? getTitle(label), children: tagContent }));
+});
+Tag.displayName = 'SuiTag';
+
+export { Tag, Tag$1 as tagStyle };

package/Text.js

@@ -0,0 +1,61 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef, useState, useRef } from 'react';
+import clsx from 'clsx';
+import isString from 'lodash/isString';
+import { useForkRef, useOverflow, useClasses } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { T as Tooltip } from './chunks/Tooltip.js';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import '@mui/base';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+var Text$1 = {"sui-text-root":"sui-text-root","sui-text-no-wrap":"sui-text-no-wrap","sui-text-flex-full":"sui-text-flex-full","sui-text-highlight-term":"sui-text-highlight-term"};
+
+const Text = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Text' });
+    const { component: TextRoot = 'span', children, className, flexFull, highlight, title: _title, titleWhenOverflow, useTooltip, TooltipProps, noWrap = false, ...rest } = props;
+    const [isShowTitle, setIsShowTitle] = useState(false);
+    const innerRef = useRef(null);
+    const textRef = useForkRef(innerRef, ref);
+    // * here put hook in if else, titleWhenOverflow not change any more
+    if (titleWhenOverflow) {
+        // eslint-disable-next-line react-hooks/rules-of-hooks
+        useOverflow(innerRef, (state) => setIsShowTitle(state));
+    }
+    const cls = useClasses('text', {}, className);
+    const title = isShowTitle || useTooltip // * if useTooltip always keep title pass into
+        ? // * if user pass title, use title first
+            _title ?? (isString(children) ? children : undefined)
+        : undefined;
+    const showTooltip = Boolean(useTooltip) && isShowTitle && !!title && !!children;
+    if (!showTooltip) {
+        return (jsx(TextRoot, { ref: textRef, title: isShowTitle ? title : undefined, className: cls('root', {
+                'no-wrap': noWrap,
+                'highlight-term': highlight,
+            }), ...rest, children: children }));
+    }
+    const lineClamp = [
+        'line-clamp-none',
+        'line-clamp-1',
+        'line-clamp-2',
+        'line-clamp-3',
+        'line-clamp-4',
+        'line-clamp-5',
+        'line-clamp-6',
+    ][titleWhenOverflow ?? -1];
+    return (jsx(Tooltip, { ...TooltipProps, title: title, PopperProps: { offset: 8 }, motionProps: null, children: jsx(TextRoot, { ref: textRef, className: clsx(cls('root', {
+                'no-wrap': noWrap,
+                'highlight-term': highlight,
+            }), lineClamp), ...rest, children: children }) }));
+});
+Text.displayName = 'SuiText';
+
+export { Text, Text$1 as textStyle };

package/TextField.js

@@ -0,0 +1,29 @@
+export { T as TextField } from './chunks/TextField.js';
+import 'react/jsx-runtime';
+import 'react';
+import '@mui/base';
+import '@ringcentral/spring-base';
+import '@ringcentral/spring-icon';
+import '@ringcentral/spring-theme';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/ShowHideEye.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/useHelperTextId.js';
+import 'clsx';
+import './chunks/IconButtonLabel.js';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+var TextField = {"sui-text-field-clear":"sui-text-field-clear","sui-text-field-mask-value-button":"sui-text-field-mask-value-button","sui-text-field-form-field-content":"sui-text-field-form-field-content","sui-text-field-root":"sui-text-field-root","sui-focused":"sui-focused","sui-disabled":"sui-disabled","sui-text-field-full-width":"sui-text-field-full-width","sui-text-field-input":"sui-text-field-input","sui-text-field-end-adornment":"sui-text-field-end-adornment","sui-text-field-start-adornment":"sui-text-field-start-adornment","sui-text-field-outlined":"sui-text-field-outlined","sui-text-field-standard":"sui-text-field-standard","sui-text-field-quiet":"sui-text-field-quiet","sui-text-field-helper-text":"sui-text-field-helper-text","sui-text-field-hide-native-clear":"sui-text-field-hide-native-clear"};
+
+export { TextField as textFieldStyle };

package/Textarea.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { TextareaAutosize } from '@mui/base';
+import { logInDev, useClasses, combineProps } from '@ringcentral/spring-base';
+import { useThemeProps } from '@ringcentral/spring-theme';
+import { T as TextField } from './chunks/TextField.js';
+import '@ringcentral/spring-icon';
+import 'framer-motion';
+import './chunks/Icon.js';
+import './chunks/ShowHideEye.js';
+import './chunks/useMotionSafeTransition.js';
+import './chunks/usePrefersReducedMotion.js';
+import './chunks/useHelperTextId.js';
+import 'clsx';
+import './chunks/IconButtonLabel.js';
+import './chunks/Squircle.js';
+import './chunks/withTooltip.js';
+import './chunks/Tooltip.js';
+import './chunks/getFade.js';
+import './Popper.js';
+import '@floating-ui/react-dom';
+import './chunks/Modal.js';
+import './chunks/useFocusTrapStack.js';
+import './chunks/Backdrop.js';
+import './chunks/PopperPaper.js';
+
+var Textarea$1 = {"sui-textarea-form-field-content":"sui-textarea-form-field-content","sui-textarea-form-field-content-xlarge":"sui-textarea-form-field-content-xlarge","sui-textarea-form-field-content-large":"sui-textarea-form-field-content-large","sui-textarea-form-field-content-medium":"sui-textarea-form-field-content-medium","sui-textarea-input":"sui-textarea-input","sui-textarea-input-xlarge":"sui-textarea-input-xlarge","sui-textarea-input-large":"sui-textarea-input-large","sui-textarea-input-medium":"sui-textarea-input-medium","sui-textarea-standard-input":"sui-textarea-standard-input","sui-textarea-clear":"sui-textarea-clear","sui-textarea-clear-xlarge":"sui-textarea-clear-xlarge","sui-textarea-clear-large":"sui-textarea-clear-large","sui-textarea-clear-medium":"sui-textarea-clear-medium","sui-textarea-clear-standard":"sui-textarea-clear-standard"};
+
+const Textarea = forwardRef((inProps, ref) => {
+    const props = useThemeProps({ props: inProps, name: 'Textarea' });
+    const { classes, className, rows, minRows, maxRows, variant = 'outlined', inputProps: inputPropsProp, size = 'xlarge', ClearButtonProps, ...rest } = props;
+    let inputProps = inputPropsProp;
+    if (rows) {
+        if (process.env.NODE_ENV !== 'production' && (minRows || maxRows)) {
+            logInDev({
+                scope: 'Textarea',
+                message: 'You can not use the `minRows` or `maxRows` props when the input `rows` prop is set.',
+                level: 'warn',
+            });
+        }
+        inputProps = {
+            ...inputProps,
+            minRows: rows,
+            maxRows: rows,
+        };
+    }
+    else {
+        inputProps = {
+            ...inputProps,
+            maxRows,
+            minRows,
+        };
+    }
+    const cls = useClasses('textarea', classes, className);
+    return (jsx(TextField, { ...rest, size: size, variant: variant, inputProps: inputProps, inputComponent: TextareaAutosize, ClearButtonProps: combineProps({ background: true }, ClearButtonProps), ref: ref, classes: {
+            ...classes,
+            root: cls('root'),
+            outlined: cls('outlined'),
+            standard: cls('standard'),
+            input: cls('input', `${variant}-input`, `input-${size}`),
+            formFieldContent: cls('form-field-content', `form-field-content-${size}`, `${variant}-form-field-content`),
+            clear: cls('clear', `clear-${variant}`, `clear-${size}`),
+        } }));
+});
+Textarea.displayName = 'SuiTextarea';
+
+export { Textarea, Textarea$1 as textareaStyle };