@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/tag/tag.js

@@ -2,21 +2,27 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
+// libs
 var react_1 = require("react");
-var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
+var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
+// components
+var close_1 = tslib_1.__importDefault(require("../icon/components/close"));
+var styled_components_1 = require("./styled-components");
+var base_button_1 = require("../base-button");
+var tooltip_1 = require("../tooltip");
+var box_1 = require("../box");
+// hooks
 var useFocusVisible_1 = require("../hooks/useFocusVisible");
-var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
 var overrides_1 = require("../overrides");
 var style_1 = require("../style");
-var styled_components_1 = require("./styled-components");
-var utils_1 = require("./utils");
 var locale_1 = require("../locale");
-var longHandHelpers_1 = require("../helpers/longHandHelpers");
-var base_button_1 = require("../base-button");
+var useTruncateWithTooltip_1 = require("../truncateWithTooltip/hooks/useTruncateWithTooltip");
+var utils_1 = require("./utils");
 var Tag = (0, react_1.forwardRef)(function (props, ref) {
-    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _size = props.size, _b = props.isFocused, isFocused = _b === void 0 ? false : _b, _c = props.isHovered, isHovered = _c === void 0 ? false : _c, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _d = props.onClick, onClick = _d === void 0 ? null : _d, _e = props.onKeyDown, onKeyDown = _e === void 0 ? null : _e, overrides = props.overrides, title = props.title, _f = props.variant, variant = _f === void 0 ? 'light' : _f, _g = props.intent, intent = _g === void 0 ? 'default' : _g, className = props.className, startEnhancer = props.startEnhancer, restProps = (0, tslib_1.__rest)(props, ["children", "closeable", "size", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "className", "startEnhancer"]);
-    var _h = (0, useFocusVisible_1.useFocusVisible)(), $isFocusVisible = _h.$isFocusVisible, onBlur = _h.onBlur, onFocus = _h.onFocus;
+    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _size = props.size, _b = props.shape, shape = _b === void 0 ? 'default' : _b, _c = props.isFocused, isFocused = _c === void 0 ? false : _c, _d = props.isHovered, isHovered = _d === void 0 ? false : _d, onActionClick = props.onActionClick, onActionKeyDown = props.onActionKeyDown, _e = props.onClick, onClick = _e === void 0 ? null : _e, _f = props.onKeyDown, onKeyDown = _f === void 0 ? null : _f, overrides = props.overrides, title = props.title, _g = props.variant, variant = _g === void 0 ? 'light' : _g, _h = props.intent, intent = _h === void 0 ? 'default' : _h, _j = props.appearance, appearance = _j === void 0 ? 'gray' : _j, className = props.className, startEnhancer = props.startEnhancer, noTooltipOnTruncation = props.noTooltipOnTruncation, restProps = tslib_1.__rest(props, ["children", "closeable", "size", "shape", "isFocused", "isHovered", "onActionClick", "onActionKeyDown", "onClick", "onKeyDown", "overrides", "title", "variant", "intent", "appearance", "className", "startEnhancer", "noTooltipOnTruncation"]);
+    var _k = (0, useFocusVisible_1.useFocusVisible)(), $isFocusVisible = _k.$isFocusVisible, onBlur = _k.onBlur, onFocus = _k.onFocus;
     var theme = (0, style_1.useStyle)().theme;
+    var locale = (0, locale_1.useLocale)();
     var size = _size !== null && _size !== void 0 ? _size : (0, utils_1.getDefaultTagSize)(theme);
     var handleKeyDown = (0, react_1.useCallback)(function (event) {
         if (event.currentTarget !== event.target) {
@@ -30,15 +36,13 @@ var Tag = (0, react_1.forwardRef)(function (props, ref) {
             onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick(event);
             onActionKeyDown === null || onActionKeyDown === void 0 ? void 0 : onActionKeyDown(event);
         }
-        if (onKeyDown) {
-            onKeyDown(event);
-        }
+        onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     }, [closeable, onActionClick, onActionKeyDown, onClick, onKeyDown]);
-    var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledRoot), 2), Root = _j[0], rootProps = _j[1];
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Action, styled_components_1.StyledAction), 2), Action = _k[0], actionProps = _k[1];
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, close_1.default), 2), ActionIcon = _l[0], actionIconProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, styled_components_1.StyledText), 2), Text = _m[0], textProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _o[0], startEnhancerProps = _o[1];
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledRoot), 2), Root = _l[0], rootProps = _l[1];
+    var _m = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Action, styled_components_1.StyledAction), 2), Action = _m[0], actionProps = _m[1];
+    var _o = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, close_1.default), 2), ActionIcon = _o[0], actionIconProps = _o[1];
+    var _p = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, styled_components_1.StyledText), 2), Text = _p[0], _q = _p[1], onMouseEnter = _q.onMouseEnter, onMouseLeave = _q.onMouseLeave, textProps = tslib_1.__rest(_q, ["onMouseEnter", "onMouseLeave"]);
+    var _r = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _r[0], startEnhancerProps = _r[1];
     var clickable = typeof onClick === 'function';
     var sharedProps = {
         $clickable: clickable,
@@ -48,14 +52,25 @@ var Tag = (0, react_1.forwardRef)(function (props, ref) {
         $variant: variant,
         $isFocusVisible: $isFocusVisible,
         $size: size,
+        $shape: shape,
         $withStartEnhancer: !!startEnhancer,
+        $withChildren: !!children,
         $intent: intent,
+        $appearance: appearance,
+        $addHoverStyles: clickable || $isFocusVisible,
     };
     var titleText = title || (0, utils_1.getTextFromChildren)(children);
-    var _p = (0, utils_1.getTagSizeTheme)(theme, size), clearableIconSize = _p.clearableIconSize, clearableIconButtonSize = _p.clearableIconButtonSize, clearableIconButtonBorderRadius = _p.clearableIconButtonBorderRadius;
-    var actionIconButtonOverrides = (0, tslib_1.__assign)({ height: clearableIconButtonSize, width: clearableIconButtonSize }, (0, longHandHelpers_1.borderRadius)(clearableIconButtonBorderRadius));
-    var locale = (0, locale_1.useLocale)();
-    return ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-spaceweb": "tag", role: clickable ? 'button' : null, tabIndex: clickable ? 0 : null, onFocus: onFocus, onBlur: onBlur, className: className, onClick: onClick, onKeyDown: handleKeyDown }, sharedProps, restProps, rootProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }), void 0)), (0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ title: titleText }, sharedProps, textProps, { children: children }), void 0), closeable ? ((0, jsx_runtime_1.jsx)(Action, (0, tslib_1.__assign)({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, (0, omit_1.default)(actionProps, 'tabIndex'), { children: (0, jsx_runtime_1.jsx)(base_button_1.BaseButton, (0, tslib_1.__assign)({ type: "button", className: ['hover:spr-clr-grey', actionIconButtonOverrides], "aria-label": locale.tag.closeAriaLabel, tabIndex: actionProps === null || actionProps === void 0 ? void 0 : actionProps.tabIndex }, { children: (0, jsx_runtime_1.jsx)(ActionIcon, (0, tslib_1.__assign)({ size: clearableIconSize }, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
+    var clearableIconSize = (0, utils_1.getTagSizeTheme)(theme, size).clearableIconSize;
+    var actionIconButtonOverrides = (0, utils_1.getActionIconButtonOverrides)(size);
+    var _s = (0, useTruncateWithTooltip_1.useTruncateWithTooltip)(noTooltipOnTruncation, onMouseEnter, onMouseLeave), mouseEventProps = _s.mouseEventProps, renderTooltip = _s.renderTooltip, elementRef = _s.elementRef;
+    var textElement = ((0, jsx_runtime_1.jsx)(Text, tslib_1.__assign({ ref: elementRef }, sharedProps, textProps, { children: children })));
+    return ((0, jsx_runtime_1.jsxs)(Root, tslib_1.__assign({ ref: ref, "data-spaceweb": "tag", role: clickable ? 'button' : null, tabIndex: clickable ? 0 : null, onFocus: onFocus, onBlur: onBlur, onClick: onClick, onKeyDown: handleKeyDown }, sharedProps, restProps, rootProps, { className: [className, rootProps === null || rootProps === void 0 ? void 0 : rootProps.className] }, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, tslib_1.__assign({}, sharedProps, startEnhancerProps, { children: typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer }))), (0, jsx_runtime_1.jsx)(tooltip_1.StatefulTooltip, tslib_1.__assign({ content: renderTooltip ? ((0, jsx_runtime_1.jsx)(box_1.Box, tslib_1.__assign({ "data-testid": "tooltip", className: "max-w-2xl break-words" }, { children: props.children }))) : null, size: "50vw", placement: "bottom", onMouseEnterDelay: 0, onMouseLeaveDelay: 0, accessibilityType: "tooltip" }, mouseEventProps, { children: textElement })), closeable ? ((0, jsx_runtime_1.jsx)(Action, tslib_1.__assign({ "aria-hidden": true, role: "presentation", onClick: onActionClick }, sharedProps, (0, omit_1.default)(actionProps, 'tabIndex'), { children: (0, jsx_runtime_1.jsx)(base_button_1.BaseButton, tslib_1.__assign({ type: "button", className: [
+                        'hover:spr-bg-quaternary hover:border border-solid spr-border-quaternary hover:spr-text-primary color-[--sw-color]',
+                        actionIconButtonOverrides,
+                    ], style: {
+                        '--sw-color': theme.spr.iconTertiary,
+                    }, "aria-label": locale.tag.closeAriaLabel, tabIndex: actionProps === null || actionProps === void 0 ? void 0 : actionProps.tabIndex }, { children: (0, jsx_runtime_1.jsx)(ActionIcon, tslib_1.__assign({ size: clearableIconSize }, actionIconProps)) })) }))) : null] })));
 });
 Tag.displayName = 'Tag';
+Tag.__standard = 'Component';
 exports.default = Tag;

package/tag/types.d.ts

@@ -1,18 +1,20 @@
 import * as React from 'react';
 import { AvatarProps } from '../avatar';
 import { Override } from '../overrides';
-import { ClassName } from '../types';
-export declare type Intent = 'success' | 'error' | 'warning' | 'info' | 'default' | 'ai';
-export declare type Variant = 'solid' | 'light';
-export declare type Size = 'xxxs' | 'sm' | 'lg';
-export declare type TagOverrides = {
+import { ClassName, SpacewebComponentProps } from '../types';
+export type Intent = 'success' | 'error' | 'warning' | 'info' | 'default' | 'ai';
+export type Appearance = 'gray' | 'white' | 'outline';
+export type Variant = 'solid' | 'light';
+export type Size = 'xxxs' | 'sm' | 'lg' | 'small' | 'medium' | 'large';
+export type Shape = 'default' | 'pill';
+export type TagOverrides = {
     Root?: Override<SharedProps & Record<string, any>>;
     Action?: Override<SharedProps & Record<string, any>>;
     ActionIcon?: Override<SharedProps & Record<string, any>>;
     Text?: Override<SharedProps & Record<string, any>>;
     StartEnhancer?: Override<SharedProps & Record<string, any>>;
 };
-export declare type TagProps = {
+export type TagProps = SpacewebComponentProps<{
     closeable?: boolean;
     isFocused?: boolean;
     isHovered?: boolean;
@@ -26,28 +28,46 @@ export declare type TagProps = {
     overrides?: TagOverrides;
     startEnhancer?: React.ReactNode | ((props: {
         $withStartEnhancer: boolean;
+        $withChildren: boolean;
         $size: Size;
         $intent: Intent;
+        $appearance: Appearance;
+        /**
+         * @deprecated: Check designs for HDS 2.0
+         */
         $variant: Variant;
     }) => React.ReactNode);
     intent?: Intent;
+    appearance?: Appearance;
+    /**
+     * @deprecated: Check designs for HDS 2.0
+     */
     variant?: Variant;
     size?: Size;
-};
-export declare type AvatarTagProps = Omit<TagProps, 'overrides'> & {
+    shape?: Shape;
+    noTooltipOnTruncation?: boolean;
+}>;
+export type AvatarTagProps = Omit<TagProps, 'overrides'> & {
     avatarProps: AvatarProps;
     overrides?: TagProps['overrides'] & {
         StartEnhancer?: Override<Record<string, any>>;
     };
 };
-export declare type SharedProps = {
+export type SharedProps = {
     $clickable?: boolean;
     $closeable?: boolean;
     $isFocused?: boolean;
     $isHovered?: boolean;
     $isFocusVisible: boolean;
     $withStartEnhancer: boolean;
+    $withChildren: boolean;
     $intent?: Intent;
+    $appearance?: Appearance;
+    /**
+     * @deprecated: Check designs for HDS 2.0
+     */
     $variant?: Variant;
     $size?: Size;
+    $shape?: Shape;
+    $addHoverStyles?: boolean;
 };

package/tag/utils.d.ts

@@ -1,52 +1,38 @@
 import * as React from 'react';
 import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+export declare const getActionIconButtonOverrides: (size: any) => "h-3.5 w-3.5 rounded-2" | "h-4 w-4 rounded-3" | "h-4.5 w-4.5 rounded-3" | "h-6 w-6 rounded-4";
 export declare function getTextFromChildren(children: React.ReactNode): string | null;
 export declare const getDefaultTagSize: (theme: Theme) => 'xxxs' | 'sm' | 'lg';
 export declare const tagSizeMap: {
     xxxs: {
-        paddingY: string;
-        paddingX: string;
-        height: string;
-        fontSize: string;
-        lineHeight: string;
         borderRadius: string;
         avatarIconSize: number;
         clearableIconSize: string;
-        clearableIconButtonSize: string;
-        clearableIconButtonBorderRadius: string;
-        clearableIconMarginX: string;
-        startEnhancerMarginLeft: string;
-        startEnhancerMarginRight: string;
     };
     sm: {
-        paddingY: string;
-        paddingX: string;
-        height: string;
-        fontSize: string;
-        lineHeight: string;
         borderRadius: string;
         avatarIconSize: number;
         clearableIconSize: string;
-        clearableIconButtonSize: string;
-        clearableIconButtonBorderRadius: string;
-        clearableIconMarginX: string;
-        startEnhancerMarginLeft: string;
-        startEnhancerMarginRight: string;
     };
     lg: {
-        paddingY: string;
-        paddingX: string;
-        height: string;
-        fontSize: string;
-        lineHeight: string;
         borderRadius: string;
         avatarIconSize: number;
         clearableIconSize: string;
-        clearableIconButtonSize: string;
-        clearableIconButtonBorderRadius: string;
-        clearableIconMarginX: string;
-        startEnhancerMarginLeft: string;
-        startEnhancerMarginRight: string;
+    };
+    small: {
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
+    };
+    medium: {
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
+    };
+    large: {
+        borderRadius: string;
+        avatarIconSize: number;
+        clearableIconSize: string;
     };
 };
 export declare const getTagSizeTheme: (theme: any, size: any) => any;

package/tag/utils.js

@@ -1,10 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTagSizeTheme = exports.tagSizeMap = exports.getDefaultTagSize = exports.getTextFromChildren = void 0;
+exports.getTagSizeTheme = exports.tagSizeMap = exports.getDefaultTagSize = exports.getTextFromChildren = exports.getActionIconButtonOverrides = void 0;
 var tslib_1 = require("tslib");
-var React = (0, tslib_1.__importStar)(require("react"));
+var React = tslib_1.__importStar(require("react"));
 var themeHelpers_1 = require("../helpers/themeHelpers");
 var JOINABLE_TYPES = new Set(['string', 'number']);
+var getActionIconButtonOverrides = function (size) {
+    switch (size) {
+        case 'xxxs':
+            return 'h-3.5 w-3.5 rounded-2';
+        case 'sm':
+            return 'h-4 w-4 rounded-3';
+        case 'lg':
+        default:
+            return 'h-4.5 w-4.5 rounded-3';
+        case 'small':
+        case 'medium':
+        case 'large':
+            return 'h-6 w-6 rounded-4';
+    }
+};
+exports.getActionIconButtonOverrides = getActionIconButtonOverrides;
 // Checks the children of a React component to ensure every value is a number
 // or a string. If they are, they are joined and returned. Useful for collecting
 // text from the child of a node to use as an attribute.
@@ -38,49 +54,34 @@ var getDefaultTagSize = function (theme) {
 exports.getDefaultTagSize = getDefaultTagSize;
 exports.tagSizeMap = {
     xxxs: {
-        paddingY: '1px',
-        paddingX: '6px',
-        height: '18px',
-        fontSize: '13px',
-        lineHeight: '16px',
         borderRadius: '4px',
         avatarIconSize: 12,
         clearableIconSize: '8px',
-        clearableIconButtonSize: '14px',
-        clearableIconButtonBorderRadius: '2px',
-        clearableIconMarginX: '3px',
-        startEnhancerMarginLeft: '6px',
-        startEnhancerMarginRight: '2px',
     },
     sm: {
-        paddingY: '2px',
-        paddingX: '8px',
-        height: '22px',
-        fontSize: '14px',
-        lineHeight: '18px',
         borderRadius: '5px',
         avatarIconSize: 14,
         clearableIconSize: '9px',
-        clearableIconButtonSize: '16px',
-        clearableIconButtonBorderRadius: '3px',
-        clearableIconMarginX: '5px',
-        startEnhancerMarginLeft: '8px',
-        startEnhancerMarginRight: '3px',
     },
     lg: {
-        paddingY: '7px',
-        paddingX: '12px',
-        height: '34px',
-        fontSize: '16px',
-        lineHeight: '18px',
         borderRadius: '6px',
         avatarIconSize: 20,
         clearableIconSize: '10px',
-        clearableIconButtonSize: '18px',
-        clearableIconButtonBorderRadius: '3px',
-        clearableIconMarginX: '7px',
-        startEnhancerMarginLeft: '12px',
-        startEnhancerMarginRight: '4px',
+    },
+    small: {
+        borderRadius: '4px',
+        avatarIconSize: 16,
+        clearableIconSize: '12px',
+    },
+    medium: {
+        borderRadius: '8px',
+        avatarIconSize: 16,
+        clearableIconSize: '12px',
+    },
+    large: {
+        borderRadius: '8px',
+        avatarIconSize: 16,
+        clearableIconSize: '12px',
     },
 };
 var getTagSizeTheme = function (theme, size) {

package/test-utils/helper.d.ts

@@ -0,0 +1,2 @@
+export declare const setDimension: (scrollWidth: number, clientWidth: number, scrollHeight: number, clientHeight: number) => void;
+export declare const wait: (milliseconds: number) => Promise<void>;

package/test-utils/helper.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.wait = exports.setDimension = void 0;
+var setDimension = function (scrollWidth, clientWidth, scrollHeight, clientHeight) {
+    Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+        writable: true,
+        value: clientHeight,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
+        writable: true,
+        value: clientWidth,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollHeight', {
+        writable: true,
+        value: scrollHeight,
+    });
+    Object.defineProperty(HTMLElement.prototype, 'scrollWidth', {
+        writable: true,
+        value: scrollWidth,
+    });
+};
+exports.setDimension = setDimension;
+var wait = function (milliseconds) { return new Promise(function (resolve) { return setTimeout(resolve, milliseconds); }); };
+exports.wait = wait;

package/test-utils/index.d.ts

@@ -0,0 +1 @@
+export { getSelectedOptions } from '../select/utils/test-utils';

package/test-utils/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedOptions = void 0;
+var test_utils_1 = require("../select/utils/test-utils");
+Object.defineProperty(exports, "getSelectedOptions", { enumerable: true, get: function () { return test_utils_1.getSelectedOptions; } });

package/test-utils/test-provider/TestProvider.d.ts

@@ -1,6 +1,13 @@
-import { ReactElement } from 'react';
-import * as React from 'react';
+import { ReactElement, ComponentProps } from 'react';
 import SpacewebProvider from '../../spacewebProvider';
-declare type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
-declare const TestProvider: (props: WithOptional<WithOptional<React.ComponentProps<typeof SpacewebProvider>, 'theme'>, 'styleEngine'>) => ReactElement;
+type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+/**
+ * @param {boolean} [injectStylesheets=undefined] - it lowers CSS size so react-testing-library has to parse less CSS while running. It only needs to be enabled for tests that read element.style that's passed from a classname
+ */
+declare const TestProvider: (props: Omit<import("../../spacewebProvider/SpacewebProvider").Props, "theme" | "styleEngine"> & Partial<Pick<import("../../spacewebProvider/SpacewebProvider").Props, "theme" | "styleEngine">> & {
+    /**
+     * CSS injection/parsing is disabled by default for performance reasons. Enable it if you need to test styles applied from className.
+     */
+    injectStylesheets?: boolean | undefined;
+}) => ReactElement;
 export default TestProvider;

package/test-utils/test-provider/TestProvider.js

@@ -3,14 +3,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var spacewebProvider_1 = (0, tslib_1.__importDefault)(require("../../spacewebProvider"));
-var styleEngine_1 = require("../../styleEngine");
+var spacewebProvider_1 = tslib_1.__importDefault(require("../../spacewebProvider"));
 var theme_1 = require("../../theme");
 var helpers_1 = require("./helpers");
+var fs_1 = tslib_1.__importDefault(require("fs"));
+var css = fs_1.default.readFileSync(require.resolve('@sprinklrjs/spaceweb-themes/styles/tailwind-test-classes.css'), 'utf-8');
+/**
+ * @param {boolean} [injectStylesheets=undefined] - it lowers CSS size so react-testing-library has to parse less CSS while running. It only needs to be enabled for tests that read element.style that's passed from a classname
+ */
 var TestProvider = function (props) {
     var themeModule = (0, theme_1.useTheme)();
     var testableTheme = (0, react_1.useMemo)(function () { return (0, helpers_1.convertToTestableTheme)(themeModule); }, [themeModule]);
-    var _a = props.styleEngine, styleEngine = _a === void 0 ? (0, styleEngine_1.getStyleEngine)() : _a, _b = props.theme, theme = _b === void 0 ? testableTheme : _b;
-    return (0, jsx_runtime_1.jsx)(spacewebProvider_1.default, (0, tslib_1.__assign)({ theme: theme, styleEngine: styleEngine }, props, { debug: true }), void 0);
+    var styleEngine = props.styleEngine, _a = props.theme, theme = _a === void 0 ? testableTheme : _a, injectStylesheets = props.injectStylesheets;
+    (0, react_1.useLayoutEffect)(function () {
+        if (!injectStylesheets)
+            return undefined;
+        var style = window.document.createElement('style');
+        style.textContent = css;
+        window.document.head.appendChild(style);
+        return function () {
+            window.document.head.removeChild(style);
+        };
+    }, [injectStylesheets]);
+    return (0, jsx_runtime_1.jsx)(spacewebProvider_1.default, tslib_1.__assign({ theme: theme, styleEngine: styleEngine }, props, { debug: true }));
 };
 exports.default = TestProvider;

package/test-utils/test-provider/helpers.d.ts

@@ -1,7 +1,7 @@
 import { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
 import { StyleUtils } from '../../types';
-declare type Breakpoint = [string, string];
-declare type ScreenList = {
+type Breakpoint = [string, string];
+type ScreenList = {
     [name: string]: string;
 };
 /**

package/test-utils/test-provider/helpers.js

@@ -2,11 +2,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getTestStyleUtils = exports.convertToTestableTheme = exports.getCSSFromEl = exports.getCSSByBasewebId = exports.getCSSByTestId = exports.setupBreakpoints = exports.getBreakpoints = exports.getScreens = void 0;
 var tslib_1 = require("tslib");
-var mq_polyfill_1 = (0, tslib_1.__importDefault)(require("mq-polyfill"));
+var mq_polyfill_1 = tslib_1.__importDefault(require("mq-polyfill"));
 var styletron_engine_atomic_1 = require("styletron-engine-atomic");
 var styletron_standard_1 = require("styletron-standard");
-var light_1 = (0, tslib_1.__importDefault)(require("@sprinklrjs/spaceweb-themes/hyperspace/light"));
-var _buildUtils_1 = (0, tslib_1.__importDefault)(require("../../style/_buildUtils"));
+var light_1 = tslib_1.__importDefault(require("@sprinklrjs/spaceweb-themes/hyperspace/light"));
+var _buildUtils_1 = tslib_1.__importDefault(require("../../style/_buildUtils"));
 var styleEngine_1 = require("../../styleEngine");
 var helpers_1 = require("../../helpers");
 /**
@@ -52,7 +52,7 @@ var getCSSFromEl = function (el) { return window.getComputedStyle(el); };
 exports.getCSSFromEl = getCSSFromEl;
 var convertToTestableTheme = function (testTheme) {
     var classes = testTheme.classes, theme = testTheme.theme;
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, testTheme), { classes: (0, helpers_1.covertCSSVariablesToValue)(classes), theme: (0, helpers_1.covertCSSVariablesToValue)(theme) });
+    return tslib_1.__assign(tslib_1.__assign({}, testTheme), { classes: (0, helpers_1.covertCSSVariablesToValue)(classes), theme: (0, helpers_1.covertCSSVariablesToValue)(theme) });
 };
 exports.convertToTestableTheme = convertToTestableTheme;
 var getTestStyleUtils = function (direction) {
@@ -61,6 +61,6 @@ var getTestStyleUtils = function (direction) {
     var options = { prefix: styleEngine_1.SPACEWEB_STYLE_PREFIX };
     var styletron = isServer ? new styletron_engine_atomic_1.Server(options) : new styletron_engine_atomic_1.Client(options);
     var css = function (arg) { return (0, styletron_standard_1.driver)(arg, styletron); };
-    return (0, _buildUtils_1.default)((0, tslib_1.__assign)({ direction: direction }, (0, exports.convertToTestableTheme)(light_1.default)), css);
+    return (0, _buildUtils_1.default)(tslib_1.__assign({ direction: direction }, (0, exports.convertToTestableTheme)(light_1.default)), css);
 };
 exports.getTestStyleUtils = getTestStyleUtils;

package/test-utils/test-provider/testableThemes.d.ts

@@ -1,5 +1,3 @@
 import { ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
-export declare const sprLight: ThemeModule;
-export declare const sprDark: ThemeModule;
 export declare const hyperspaceLight: ThemeModule;
 export declare const hyperspaceDark: ThemeModule;

package/test-utils/test-provider/testableThemes.js

@@ -1,13 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hyperspaceDark = exports.hyperspaceLight = exports.sprDark = exports.sprLight = void 0;
+exports.hyperspaceDark = exports.hyperspaceLight = void 0;
 var tslib_1 = require("tslib");
-var light_1 = (0, tslib_1.__importDefault)(require("@sprinklrjs/spaceweb-themes/space/light"));
-var dark_1 = (0, tslib_1.__importDefault)(require("@sprinklrjs/spaceweb-themes/space/dark"));
-var light_2 = (0, tslib_1.__importDefault)(require("@sprinklrjs/spaceweb-themes/hyperspace/light"));
-var dark_2 = (0, tslib_1.__importDefault)(require("@sprinklrjs/spaceweb-themes/hyperspace/dark"));
+var light_1 = tslib_1.__importDefault(require("@sprinklrjs/spaceweb-themes/hyperspace/light"));
+var dark_1 = tslib_1.__importDefault(require("@sprinklrjs/spaceweb-themes/hyperspace/dark"));
 var helpers_1 = require("./helpers");
-exports.sprLight = (0, helpers_1.convertToTestableTheme)(light_1.default);
-exports.sprDark = (0, helpers_1.convertToTestableTheme)(dark_1.default);
-exports.hyperspaceLight = (0, helpers_1.convertToTestableTheme)(light_2.default);
-exports.hyperspaceDark = (0, helpers_1.convertToTestableTheme)(dark_2.default);
+exports.hyperspaceLight = (0, helpers_1.convertToTestableTheme)(light_1.default);
+exports.hyperspaceDark = (0, helpers_1.convertToTestableTheme)(dark_1.default);

package/textarea/cvaConfig.d.ts

@@ -0,0 +1,3 @@
+export declare const textareaRootCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const textareaContainerCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;
+export declare const textareaInputCVA: ({ theme, deprecatedAIThemeEnabled }: import("..").ThemeContext, sharedProps: Record<string, unknown>) => string;

package/textarea/cvaConfig.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.textareaInputCVA = exports.textareaContainerCVA = exports.textareaRootCVA = void 0;
+var cvaWrapper_1 = require("../style/cvaWrapper");
+exports.textareaRootCVA = (0, cvaWrapper_1.cvaWrapper)('textarea', 'root', [
+    'ease-outbox-border flex w-full duration-200 bg-transparent border-none rounded-none transition-border',
+    {
+        variants: {
+            $intent: {
+                default: 'overflow-hidden',
+                success: 'overflow-hidden',
+                error: 'overflow-hidden',
+                warning: 'overflow-hidden',
+                ai: '',
+            },
+        },
+        defaultVariants: {
+            $intent: 'default',
+            $deprecatedAIThemeEnabled: false,
+        },
+        compoundVariants: [{ $intent: 'ai', $deprecatedAIThemeEnabled: false, className: 'overflow-hidden' }],
+    },
+]);
+exports.textareaContainerCVA = (0, cvaWrapper_1.cvaWrapper)('textarea', 'container', [
+    'max-w-full w-min flex',
+    {
+        variants: {
+            $maxCharLimit: {
+                true: 'relative',
+            },
+            $disabled: {
+                true: 'cursor-not-allowed',
+                false: 'cursor-text',
+            },
+            $resize: {
+                vertical: 'w-full',
+            },
+        },
+        defaultVariants: {
+            $maxCharLimit: undefined,
+            $disabled: false,
+        },
+    },
+]);
+exports.textareaInputCVA = (0, cvaWrapper_1.cvaWrapper)('textarea', 'input', [
+    'box-border border-transparent border-0 border-none bg-transparent w-full p-0 m-0 min-w-full min-w-0 outline-none resize w-screen placeholder:spr-text-placeholder spr-text-primary placeholder:font-normal font-normal',
+    {
+        variants: {
+            $size: {
+                xxxs: 'px-1.75 py-0.75 text-13 leading-4',
+                xs: 'px-2.75 py-1.5 text-14 leading-4.5',
+                sm: 'px-2.75 py-2 text-14 leading-4.5',
+                md: 'px-2.75 py-2.5 text-14 leading-4.5',
+                lg: 'px-2.75 py-2.5 text-14 leading-4.5',
+                medium: 'px-3 py-2 text-14 leading-150',
+            },
+            $variant: {
+                line: 'px-0',
+            },
+            $isMaxCharFooterPreset: {
+                true: 'relative pb-8',
+            },
+            $disabled: {
+                true: 'cursor-not-allowed',
+                false: 'cursor-text',
+            },
+            $resize: {
+                vertical: 'w-full',
+            },
+            $autoSize: {
+                true: 'overflow-hidden resize-none',
+            },
+        },
+        defaultVariants: {
+            $autoSize: false,
+            $isMaxCharFooterPreset: false,
+            $size: 'md',
+            $variant: 'default',
+            $disabled: false,
+        },
+    },
+]);

package/textarea/index.d.ts

@@ -1,3 +1,5 @@
-export { Textarea, StatefulTextarea } from './textarea';
-export { StatefulContainer, StyledTextareaContainer, StyledTextarea, STATE_CHANGE_TYPE } from '../baseui/textarea';
+export { default as Textarea } from './textarea';
+export { default as StatefulTextarea } from './stateful-textarea';
+export { STATE_CHANGE_TYPE } from '../input';
+export { StyledTextareaContainer, StyledTextarea } from './styled-components';
 export * from './types';

package/textarea/index.js

@@ -1,13 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STATE_CHANGE_TYPE = exports.StyledTextarea = exports.StyledTextareaContainer = exports.StatefulContainer = exports.StatefulTextarea = exports.Textarea = void 0;
+exports.StyledTextarea = exports.StyledTextareaContainer = exports.STATE_CHANGE_TYPE = exports.StatefulTextarea = exports.Textarea = void 0;
 var tslib_1 = require("tslib");
 var textarea_1 = require("./textarea");
-Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return textarea_1.Textarea; } });
-Object.defineProperty(exports, "StatefulTextarea", { enumerable: true, get: function () { return textarea_1.StatefulTextarea; } });
-var textarea_2 = require("../baseui/textarea");
-Object.defineProperty(exports, "StatefulContainer", { enumerable: true, get: function () { return textarea_2.StatefulContainer; } });
-Object.defineProperty(exports, "StyledTextareaContainer", { enumerable: true, get: function () { return textarea_2.StyledTextareaContainer; } });
-Object.defineProperty(exports, "StyledTextarea", { enumerable: true, get: function () { return textarea_2.StyledTextarea; } });
-Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return textarea_2.STATE_CHANGE_TYPE; } });
-(0, tslib_1.__exportStar)(require("./types"), exports);
+Object.defineProperty(exports, "Textarea", { enumerable: true, get: function () { return tslib_1.__importDefault(textarea_1).default; } });
+var stateful_textarea_1 = require("./stateful-textarea");
+Object.defineProperty(exports, "StatefulTextarea", { enumerable: true, get: function () { return tslib_1.__importDefault(stateful_textarea_1).default; } });
+var input_1 = require("../input");
+Object.defineProperty(exports, "STATE_CHANGE_TYPE", { enumerable: true, get: function () { return input_1.STATE_CHANGE_TYPE; } });
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledTextareaContainer", { enumerable: true, get: function () { return styled_components_1.StyledTextareaContainer; } });
+Object.defineProperty(exports, "StyledTextarea", { enumerable: true, get: function () { return styled_components_1.StyledTextarea; } });
+tslib_1.__exportStar(require("./types"), exports);