@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/tag/styled-components.js

@@ -3,47 +3,53 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledText = exports.StyledAction = exports.StyledRoot = exports.StyledStartEnhancer = void 0;
 var tslib_1 = require("tslib");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
-var themeHelpers_1 = require("../helpers/themeHelpers");
 var commonStyles_1 = require("../helpers/commonStyles");
 var style_1 = require("../style");
 var intentStyles_1 = require("./intentStyles");
-exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex items-center', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
-        marginRight: px2rem(6),
-    });
+var utils_1 = require("./utils");
+exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex items-center', function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $size = _b.$size;
+    var _c = (0, utils_1.getTagSizeTheme)(theme, $size), startEnhancerMarginLeft = _c.startEnhancerMarginLeft, startEnhancerMarginRight = _c.startEnhancerMarginRight;
+    return {
+        marginRight: startEnhancerMarginRight,
+        marginLeft: startEnhancerMarginLeft,
+    };
 });
 exports.StyledRoot = (0, style_1.styled)('span', 'inline-flex items-center box-border', function (utils, _a) {
     var _b;
     var $withStartEnhancer = _a.$withStartEnhancer, $size = _a.$size, $closeable = _a.$closeable, $intent = _a.$intent, $variant = _a.$variant, $clickable = _a.$clickable, $isFocusVisible = _a.$isFocusVisible;
-    var direction = utils.direction, theme = utils.theme, px2rem = utils.px2rem;
-    var paddingStartDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
-    var paddingEndDir = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
-    var borderRadius = (0, themeHelpers_1.getComponentTheme)(theme, 'tag').borderRadius;
-    var height = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'tag', $size, 'lg').height;
-    var paddingStart = $size === 'sm' ? px2rem(10) : theme.padding['3'];
-    if ($withStartEnhancer)
-        paddingStart = theme.padding['1'];
-    var paddingEnd = $closeable ? '0' : paddingStart;
-    var typographyStyles = $intent === 'default'
+    var theme = utils.theme;
+    var paddingStartDir = 'paddingLeft';
+    var paddingEndDir = 'paddingRight';
+    var _c = (0, utils_1.getTagSizeTheme)(theme, $size), height = _c.height, borderRadius = _c.borderRadius, paddingX = _c.paddingX, paddingY = _c.paddingY;
+    var paddingStart = $withStartEnhancer ? '0' : paddingX;
+    var paddingEnd = $closeable ? '0' : paddingX;
+    var typographyStyles = $intent === 'default' || $intent === 'ai'
         ? (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.l2), { fontWeight: theme.fontWeight.normal }) : (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.typography.l2), { fontWeight: theme.fontWeight.semibold });
-    var hoverStyles = (0, tslib_1.__assign)({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, (0, longHandHelpers_1.borderColor)(theme.spr.border06));
-    var activeStyles = (0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.interactive01));
-    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.maxWidth = 'none', _b), typographyStyles), (0, longHandHelpers_1.margin)(0)), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.borderColor.transparent)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(borderRadius)), (0, intentStyles_1.getIntentStyles)(theme, $intent, $variant)), ($clickable && (0, tslib_1.__assign)({ cursor: 'pointer', 
+    var _d = (0, intentStyles_1.getIntentStyles)(theme, $intent, $variant), intentStyles = _d.styles, intentHoverStyles = _d.hoverStyles, intentActiveStyles = _d.activeStyles;
+    var hoverStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({ boxShadow: 'inset 0px 0px 100px rgba(0, 0, 0, 0.08)' }, (0, longHandHelpers_1.borderColor)(theme.spr.border06)), intentHoverStyles);
+    var activeStyles = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, longHandHelpers_1.borderColor)(theme.spr.interactive01)), intentActiveStyles);
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((_b = { height: height }, _b[paddingStartDir] = paddingStart, _b[paddingEndDir] = paddingEnd, _b.paddingTop = paddingY, _b.paddingBottom = paddingY, _b.maxWidth = 'none', _b), typographyStyles), (0, longHandHelpers_1.margin)(0)), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)(theme.borderColor.transparent)), (0, longHandHelpers_1.borderWidth)('1px')), (0, longHandHelpers_1.borderRadius)(borderRadius)), intentStyles), ($clickable && (0, tslib_1.__assign)({ cursor: 'pointer', 
         // temporary boxShadow onHover
         ':hover': hoverStyles, ':active': activeStyles }, (0, commonStyles_1.getFocusVisibleStyles)(utils)))), { ':focus': (0, tslib_1.__assign)({}, ($isFocusVisible && hoverStyles)) });
 });
-exports.StyledAction = (0, style_1.styled)('span', 'cursor-pointer inline-flex items-center justify-center pl-2 pr-2', function (_a) {
-    var _b;
-    var px2rem = _a.px2rem, direction = _a.direction;
-    var marginStartDir = direction === 'rtl' ? 'marginRight' : 'marginLeft';
-    return _b = {},
-        _b[marginStartDir] = px2rem(6),
-        _b;
+exports.StyledAction = (0, style_1.styled)('span', 'cursor-pointer inline-flex items-center justify-center', function (_a, _b) {
+    var theme = _a.theme;
+    var $size = _b.$size;
+    var clearableIconMarginX = (0, utils_1.getTagSizeTheme)(theme, $size).clearableIconMarginX;
+    return {
+        marginRight: clearableIconMarginX,
+        marginLeft: clearableIconMarginX,
+    };
 });
-exports.StyledText = (0, style_1.styled)('span', 'truncate', function (_a) {
-    var px2rem = _a.px2rem;
-    return ({
+exports.StyledText = (0, style_1.styled)('span', 'truncate', function (_a, _b) {
+    var px2rem = _a.px2rem, theme = _a.theme;
+    var $size = _b.$size;
+    var _c = (0, utils_1.getTagSizeTheme)(theme, $size), fontSize = _c.fontSize, lineHeight = _c.lineHeight;
+    return {
         maxWidth: px2rem(128),
-    });
+        fontSize: fontSize,
+        lineHeight: lineHeight,
+    };
 });

package/tag/tag.js

@@ -3,18 +3,21 @@ 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 button_1 = require("../button");
-var themeHelpers_1 = require("../helpers/themeHelpers");
+var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
 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 Tag = (0, react_1.forwardRef)(function (props, ref) {
-    var children = props.children, _a = props.closeable, closeable = _a === void 0 ? true : _a, _b = props.size, size = _b === void 0 ? 'lg' : _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, 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 _j = (0, useFocusVisible_1.useFocusVisible)(), $isFocusVisible = _j.$isFocusVisible, onBlur = _j.onBlur, onFocus = _j.onFocus;
+    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 theme = (0, style_1.useStyle)().theme;
+    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) {
             return;
@@ -31,11 +34,11 @@ var Tag = (0, react_1.forwardRef)(function (props, ref) {
             onKeyDown(event);
         }
     }, [closeable, onActionClick, onActionKeyDown, onClick, onKeyDown]);
-    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_components_1.StyledRoot), 2), Root = _k[0], rootProps = _k[1];
-    var _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Action, styled_components_1.StyledAction), 2), Action = _l[0], actionProps = _l[1];
-    var _m = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ActionIcon, close_1.default), 2), ActionIcon = _m[0], actionIconProps = _m[1];
-    var _o = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, styled_components_1.StyledText), 2), Text = _o[0], textProps = _o[1];
-    var _p = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StartEnhancer, styled_components_1.StyledStartEnhancer), 2), StartEnhancer = _p[0], startEnhancerProps = _p[1];
+    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 clickable = typeof onClick === 'function';
     var sharedProps = {
         $clickable: clickable,
@@ -49,9 +52,10 @@ var Tag = (0, react_1.forwardRef)(function (props, ref) {
         $intent: intent,
     };
     var titleText = title || (0, utils_1.getTextFromChildren)(children);
-    var actionSize = 8;
-    var actionButtonBorderRadius = (0, themeHelpers_1.getComponentTheme)(theme, 'tag').actionButtonBorderRadius;
-    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, actionProps, { children: (0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({ type: "button", size: "xxxs", shape: "square", className: "hover:spr-clr-grey" }, { children: (0, jsx_runtime_1.jsx)(ActionIcon, (0, tslib_1.__assign)({}, actionIconProps), void 0) }), void 0) }), void 0)) : null] }), void 0));
+    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));
 });
 Tag.displayName = 'Tag';
 exports.default = Tag;

package/tag/types.d.ts

@@ -2,9 +2,9 @@ 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';
+export declare type Intent = 'success' | 'error' | 'warning' | 'info' | 'default' | 'ai';
 export declare type Variant = 'solid' | 'light';
-export declare type Size = 'sm' | 'lg';
+export declare type Size = 'xxxs' | 'sm' | 'lg';
 export declare type TagOverrides = {
     Root?: Override<SharedProps & Record<string, any>>;
     Action?: Override<SharedProps & Record<string, any>>;
@@ -34,7 +34,7 @@ export declare type TagProps = {
     variant?: Variant;
     size?: Size;
 };
-export declare type AvatarTagProps = Omit<TagProps, 'size' | 'overrides'> & {
+export declare type AvatarTagProps = Omit<TagProps, 'overrides'> & {
     avatarProps: AvatarProps;
     overrides?: TagProps['overrides'] & {
         StartEnhancer?: Override<Record<string, any>>;

package/tag/utils.d.ts

@@ -1,2 +1,52 @@
 import * as React from 'react';
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 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;
+    };
+};
+export declare const getTagSizeTheme: (theme: any, size: any) => any;

package/tag/utils.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getTextFromChildren = void 0;
+exports.getTagSizeTheme = exports.tagSizeMap = exports.getDefaultTagSize = exports.getTextFromChildren = void 0;
 var tslib_1 = require("tslib");
 var React = (0, tslib_1.__importStar)(require("react"));
+var themeHelpers_1 = require("../helpers/themeHelpers");
 var JOINABLE_TYPES = new Set(['string', 'number']);
 // 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
@@ -22,3 +23,68 @@ function getTextFromChildren(children) {
     return childList.join('');
 }
 exports.getTextFromChildren = getTextFromChildren;
+var getDefaultTagSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'sm';
+        case 'SPACIOUS':
+            return 'sm';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'lg';
+    }
+};
+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',
+    },
+};
+var getTagSizeTheme = function (theme, size) {
+    var _a, _b;
+    return (_b = (_a = (0, themeHelpers_1.getComponentSizeTheme)(theme, 'tag', size, (0, exports.getDefaultTagSize)(theme))) !== null && _a !== void 0 ? _a : exports.tagSizeMap[size]) !== null && _b !== void 0 ? _b : exports.tagSizeMap[(0, exports.getDefaultTagSize)(theme)];
+};
+exports.getTagSizeTheme = getTagSizeTheme;

package/textarea/basewebAdapters.js

@@ -4,30 +4,34 @@ var tslib_1 = require("tslib");
 var react_1 = require("react");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var styled_components_1 = require("./styled-components");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
+var overrides_1 = require("../overrides");
 var helpers_1 = require("../helpers");
 var context_1 = require("../form-control/context");
 var useDebouncedEventHandler_1 = require("../hooks/useDebouncedEventHandler");
 var noop_1 = (0, tslib_1.__importDefault)(require("lodash/noop"));
 function useTextareaAdapter(props) {
     var _a;
-    var _b = (0, context_1.useContextualFormProps)(props), size = _b.size, variant = _b.variant, className = _b.className, style = _b.style, intent = _b.intent, _c = _b.autoSize, autoSize = _c === void 0 ? false : _c, restProps = (0, tslib_1.__rest)(_b, ["size", "variant", "className", "style", "intent", "autoSize"]);
-    var sharedProps = (0, helpers_1.add$props)({ size: size, variant: variant, intent: intent });
+    var _b = (0, context_1.useContextualFormProps)(props), size = _b.size, variant = _b.variant, className = _b.className, style = _b.style, _intent = _b.intent, _c = _b.autoSize, autoSize = _c === void 0 ? false : _c, restProps = (0, tslib_1.__rest)(_b, ["size", "variant", "className", "style", "intent", "autoSize"]);
+    var maxCharLimit = restProps.maxCharLimit, value = restProps.value;
+    var intent = typeof value === 'string' && value.length > (maxCharLimit !== null && maxCharLimit !== void 0 ? maxCharLimit : Infinity) ? 'error' : _intent;
+    var sharedProps = (0, react_1.useMemo)(function () { return (0, helpers_1.add$props)({ size: size, variant: variant, intent: intent }); }, [intent, size, variant]);
     var inputContainerStyles = (0, react_1.useMemo)(function () { return [className, style, styled_components_1.getTextareaInputContainerStyles]; }, [className, style]);
     var handleChange = (0, useDebouncedEventHandler_1.useDebouncedEventHandler)((_a = props.debouncedOnChange) !== null && _a !== void 0 ? _a : noop_1.default, props.onChange, props.debounceInterval || 200);
-    var overrides = (0, useConvertOverrides_1.useConvertOverrides)({
-        Root: {
-            style: [(0, tslib_1.__assign)({ backgroundColor: 'transparent' }, (0, longHandHelpers_1.borderStyle)('none'))],
-        },
-        InputContainer: {
-            style: inputContainerStyles,
-            props: sharedProps,
-        },
-        Input: {
-            style: styled_components_1.getTextareaInputStyles,
-            props: (0, tslib_1.__assign)({ $autoSize: autoSize }, sharedProps),
-        },
-    }, restProps.overrides);
+    var overrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_1.mergeOverrides)({
+            Root: {
+                style: [(0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: 'transparent' }, (0, longHandHelpers_1.borderStyle)('none')), (0, longHandHelpers_1.borderRadius)('0px'))], // overriding baseweb borderRadius
+            },
+            InputContainer: {
+                style: inputContainerStyles,
+                props: sharedProps,
+            },
+            Input: {
+                style: styled_components_1.getTextareaInputStyles,
+                props: (0, tslib_1.__assign)({ $autoSize: autoSize, 'aria-required': restProps['aria-required'] }, sharedProps),
+            },
+        }, restProps.overrides);
+    }, [autoSize, inputContainerStyles, sharedProps, restProps.overrides, restProps['aria-required']]);
     var rows = autoSize && !restProps.rows ? 1 : restProps.rows;
     return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides, rows: rows, onChange: handleChange });
 }

package/textarea/index.d.ts

@@ -1,3 +1,3 @@
 export { Textarea, StatefulTextarea } from './textarea';
-export { StatefulContainer, StyledTextareaContainer, StyledTextarea, STATE_CHANGE_TYPE } from 'baseui/textarea';
+export { StatefulContainer, StyledTextareaContainer, StyledTextarea, STATE_CHANGE_TYPE } from '../baseui/textarea';
 export * from './types';

package/textarea/index.js

@@ -5,7 +5,7 @@ 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");
+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; } });

package/textarea/styled-components.d.ts

@@ -1,4 +1,6 @@
-export declare const getTextareaInputStyles: (import("..").StyleFn<Partial<Pick<import("../input").SharedProps, "$disabled" | "$size" | "$variant">>> | (({}: {}, { $autoSize }: {
+export declare const getTextareaInputStyles: (import("..").StyleFn<Partial<Pick<import("../input").SharedProps, "$size" | "$disabled" | "$variant">>> | ((_: any, { $maxCharLimit }: {
+    $maxCharLimit: any;
+}) => "pb-8" | "") | (({}: {}, { $autoSize }: {
     $autoSize: any;
 }) => "overflow-hidden" | "resize") | (({ theme }: {
     theme: any;

package/textarea/styled-components.js

@@ -5,6 +5,10 @@ var styled_components_1 = require("../input/styled-components");
 //todo: need to use withThemeOverride to create overriden styled version of comps
 exports.getTextareaInputStyles = [
     styled_components_1.getInputStyles,
+    function (_, _a) {
+        var $maxCharLimit = _a.$maxCharLimit;
+        return ($maxCharLimit ? 'pb-8' : '');
+    },
     function (_a, _b) {
         var $autoSize = _b.$autoSize;
         return ($autoSize ? 'overflow-hidden' : 'resize');

package/textarea/textarea.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StatefulTextarea = exports.Textarea = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var textarea_1 = require("baseui/textarea");
+var textarea_1 = require("../baseui/textarea");
 var basewebAdapters_1 = (0, tslib_1.__importDefault)(require("./basewebAdapters"));
 var useAutoFocus_1 = (0, tslib_1.__importDefault)(require("../hooks/useAutoFocus"));
 var useAutoSizeTextarea_1 = (0, tslib_1.__importDefault)(require("./useAutoSizeTextarea"));
@@ -20,7 +20,7 @@ var Textarea = function (props) {
         inputRef: autoFocusRef,
     });
     var adaptedProps = (0, basewebAdapters_1.default)(restProps);
-    return (0, jsx_runtime_1.jsx)(textarea_1.Textarea, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: inputRef }), void 0);
+    return ((0, jsx_runtime_1.jsx)(textarea_1.Textarea, (0, tslib_1.__assign)({}, adaptedProps, { overrides: adaptedProps.overrides, inputRef: inputRef }), void 0));
 };
 exports.Textarea = Textarea;
 exports.Textarea.displayName = 'Textarea';
@@ -28,7 +28,7 @@ var StatefulTextarea = function (props) {
     var autoFocus = props.autoFocus, restProps = (0, tslib_1.__rest)(props, ["autoFocus"]);
     var autoFocusRef = (0, useAutoFocus_1.default)({ autoFocus: autoFocus, inputRef: restProps.inputRef });
     var adaptedProps = (0, basewebAdapters_1.default)(restProps);
-    return (0, jsx_runtime_1.jsx)(textarea_1.StatefulTextarea, (0, tslib_1.__assign)({}, adaptedProps, { inputRef: autoFocusRef }), void 0);
+    return ((0, jsx_runtime_1.jsx)(textarea_1.StatefulTextarea, (0, tslib_1.__assign)({}, adaptedProps, { overrides: adaptedProps.overrides, inputRef: autoFocusRef }), void 0));
 };
 exports.StatefulTextarea = StatefulTextarea;
 exports.StatefulTextarea.displayName = 'StatefulTextarea';

package/textarea/types.d.ts

@@ -1,5 +1,5 @@
 import { Ref } from 'react';
-import { TextareaProps as BaseTextareaProps, StatefulTextareaProps as BaseStatefulTextareaProps } from 'baseui/textarea';
+import { TextareaProps as BaseTextareaProps, StatefulTextareaProps as BaseStatefulTextareaProps } from '../baseui/textarea';
 import { InputSize, InputVariant, FocusPosition } from '../input';
 import { Intent, SpacewebComponentProps } from '../types';
 import { Override } from '../overrides';
@@ -7,7 +7,7 @@ export declare type TextareaProps = SpacewebComponentProps<Omit<BaseTextareaProp
     size?: InputSize;
     variant?: InputVariant;
     overrides?: {
-        [key in keyof BaseTextareaProps['overrides']]?: Override<any>;
+        [key in keyof Required<BaseTextareaProps>['overrides']]?: Override<any>;
     };
     intent?: Intent;
     debouncedOnChange?: BaseTextareaProps['onChange'];
@@ -20,7 +20,7 @@ export declare type StatefulTextareaProps = SpacewebComponentProps<Omit<BaseStat
     size?: InputSize;
     variant?: InputVariant;
     overrides?: {
-        [key in keyof BaseStatefulTextareaProps['overrides']]?: Override<any>;
+        [key in keyof Required<BaseStatefulTextareaProps>['overrides']]?: Override<any>;
     };
     debouncedOnChange?: BaseStatefulTextareaProps['onChange'];
     debounceInterval?: number;

package/theme/Provider.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren, ReactElement } from 'react';
+import { ThemeProviderT } from './types';
+import type { Density } from '@sprinklrjs/spaceweb-themes/types';
+declare type Props = PropsWithChildren<{
+    theme?: ThemeProviderT;
+    containerElement?: HTMLElement | null;
+    density?: Density;
+}>;
+export declare const ThemeProvider: (props: Props) => ReactElement;
+export {};

package/theme/Provider.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeProvider = void 0;
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
+var usePrevious_1 = (0, tslib_1.__importDefault)(require("../hooks/usePrevious"));
+var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
+var context_1 = require("./context");
+var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
+var addDensityToTheme = function (theme, density) {
+    var _a;
+    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme), { theme: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.theme), { density: density || ((_a = theme.theme) === null || _a === void 0 ? void 0 : _a.density) }) }));
+};
+var ThemeProvider = function (props) {
+    var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
+    var outerTheme = (0, context_1.useTheme)();
+    if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
+        throw new Error('No Theme present in context & props');
+    }
+    var Provider = context_1.themeContext.Provider;
+    var value = (0, react_1.useMemo)(function () {
+        var _a, _b;
+        if (theme) {
+            var newTheme = void 0;
+            if (typeof theme === 'function') {
+                newTheme = theme(outerTheme);
+            }
+            else {
+                var newThemeName = (_a = theme.theme) === null || _a === void 0 ? void 0 : _a.name, outerThemeName = (_b = outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.theme) === null || _b === void 0 ? void 0 : _b.name, 
+                // theme should be merged if both the outerTheme & themeToOverride has same name
+                shouldMergeThemes = !newThemeName || !outerThemeName || newThemeName === outerThemeName;
+                if (shouldMergeThemes) {
+                    newTheme = (0, merge_1.default)({}, outerTheme, theme);
+                }
+                else {
+                    newTheme = (0, tslib_1.__assign)({ direction: outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.direction }, theme);
+                }
+            }
+            if (typeof newTheme !== 'object') {
+                throw new Error('theme has to be an object of shape {theme : {}, classes : {}}');
+            }
+            return addDensityToTheme(newTheme, density);
+        }
+        return addDensityToTheme(outerTheme, density);
+    }, [theme, outerTheme, density]);
+    var themeName = value.theme.name, prevThemName = (0, usePrevious_1.default)(themeName), containerElement = elementToApplyClass, prevContainerElement = (0, usePrevious_1.default)(containerElement);
+    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
+        prevThemName && (prevContainerElement === null || prevContainerElement === void 0 ? void 0 : prevContainerElement.classList.remove(prevThemName));
+        THEME_NAMES.forEach(function (name) { return containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.remove(name); });
+        containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.add(themeName);
+    }, [themeName, prevThemName, containerElement, prevContainerElement]);
+    /**
+     * Box component/styled cannot be used here as styletron might not be initialized when ThemeProvider renders for the first time.
+     */
+    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ "data-testid": "theme-provider-container", style: { display: 'contents' }, className: elementToApplyClass ? undefined : themeName }, { children: (0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: value }, { children: children }), void 0) }), void 0));
+};
+exports.ThemeProvider = ThemeProvider;

package/theme/context.d.ts

@@ -1,14 +1,5 @@
-import { ReactElement, PropsWithChildren } from 'react';
+/// <reference types="react" />
 import { ThemeContext } from '../types';
-import { ThemeProviderT } from './types';
-import type { Density } from '@sprinklrjs/spaceweb-themes/types';
 export declare const themeContext: import("react").Context<ThemeContext>;
 export declare const useTheme: () => ThemeContext;
-declare type Props = PropsWithChildren<{
-    theme?: ThemeProviderT;
-    containerElement?: HTMLElement | null;
-    density?: Density;
-}>;
-export declare const ThemeProvider: (props: Props) => ReactElement;
 export declare const ThemeConsumer: import("react").Consumer<ThemeContext>;
-export {};

package/theme/context.js

@@ -1,70 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ThemeConsumer = exports.ThemeProvider = exports.useTheme = exports.themeContext = void 0;
+exports.ThemeConsumer = exports.useTheme = exports.themeContext = void 0;
 var tslib_1 = require("tslib");
-var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
-var merge_1 = (0, tslib_1.__importDefault)(require("lodash/merge"));
 var light_1 = (0, tslib_1.__importDefault)(require("@sprinklrjs/spaceweb-themes/hyperspace/light"));
-var baseui_1 = require("baseui");
-var usePrevious_1 = (0, tslib_1.__importDefault)(require("../hooks/usePrevious"));
-var useMemoizedStyletron_1 = (0, tslib_1.__importDefault)(require("../style/useMemoizedStyletron"));
-var themes_1 = (0, tslib_1.__importDefault)(require("../themes"));
-var useIsomorphicLayoutEffect_1 = require("../hooks/useIsomorphicLayoutEffect");
-//todo: remove default sprLight, too many tests failing on removal
 exports.themeContext = (0, react_1.createContext)(light_1.default);
 var useTheme = function () { return (0, react_1.useContext)(exports.themeContext); };
 exports.useTheme = useTheme;
-var THEME_NAMES = ['hyperspace-light', 'space-light', 'space-dark', 'hyperspace-dark'];
-var addDensityToTheme = function (theme, density) {
-    var _a;
-    return ((0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme), { theme: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, theme.theme), { density: density || ((_a = theme.theme) === null || _a === void 0 ? void 0 : _a.density) }) }));
-};
-var ThemeProvider = function (props) {
-    var _a;
-    var theme = props.theme, children = props.children, elementToApplyClass = props.containerElement, density = props.density;
-    var _b = (0, tslib_1.__read)((0, react_1.useState)(null), 2), containerElementRef = _b[0], setContainerElementRef = _b[1];
-    var outerTheme = (0, exports.useTheme)();
-    var _c = (0, tslib_1.__read)((0, useMemoizedStyletron_1.default)(), 2), baseUITheme = _c[1];
-    if (typeof outerTheme === 'undefined' && typeof theme === 'undefined') {
-        throw new Error('No Theme present in context & props');
-    }
-    var Provider = exports.themeContext.Provider;
-    var value = (0, react_1.useMemo)(function () {
-        var _a, _b;
-        if (theme) {
-            var newTheme = void 0;
-            if (typeof theme === 'function') {
-                newTheme = theme(outerTheme);
-            }
-            else {
-                var newThemeName = (_a = theme.theme) === null || _a === void 0 ? void 0 : _a.name, outerThemeName = (_b = outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.theme) === null || _b === void 0 ? void 0 : _b.name, 
-                // theme should be merged if both the outerTheme & themeToOverride has same name
-                shouldMergeThemes = !newThemeName || !outerThemeName || newThemeName === outerThemeName;
-                if (shouldMergeThemes) {
-                    newTheme = (0, merge_1.default)({}, outerTheme, theme);
-                }
-                else {
-                    newTheme = (0, tslib_1.__assign)({ direction: outerTheme === null || outerTheme === void 0 ? void 0 : outerTheme.direction }, theme);
-                }
-            }
-            if (typeof newTheme !== 'object') {
-                throw new Error('theme has to be an object of shape {theme : {}, classes : {}}');
-            }
-            return addDensityToTheme(newTheme, density);
-        }
-        return addDensityToTheme(outerTheme, density);
-    }, [theme, outerTheme, density]);
-    var themeName = value.theme.name, prevThemName = (0, usePrevious_1.default)(themeName), containerElement = elementToApplyClass !== null && elementToApplyClass !== void 0 ? elementToApplyClass : containerElementRef, prevContainerElement = (0, usePrevious_1.default)(containerElement);
-    (0, useIsomorphicLayoutEffect_1.useIsomorphicLayoutEffect)(function () {
-        prevThemName && (prevContainerElement === null || prevContainerElement === void 0 ? void 0 : prevContainerElement.classList.remove(prevThemName));
-        THEME_NAMES.forEach(function (name) { return containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.remove(name); });
-        containerElement === null || containerElement === void 0 ? void 0 : containerElement.classList.add(themeName);
-    }, [themeName, prevThemName, containerElement, prevContainerElement]);
-    /**
-     * Box component/styled cannot be used here as styletron might not be initialized when ThemeProvider renders for the first time.
-     */
-    return ((0, jsx_runtime_1.jsx)("div", (0, tslib_1.__assign)({ "data-testid": "theme-provider-container", style: { display: 'contents' }, ref: setContainerElementRef }, { children: (0, jsx_runtime_1.jsx)(baseui_1.ThemeProvider, (0, tslib_1.__assign)({ theme: (_a = themes_1.default[themeName]) !== null && _a !== void 0 ? _a : baseUITheme }, { children: (0, jsx_runtime_1.jsx)(Provider, (0, tslib_1.__assign)({ value: value }, { children: children }), void 0) }), void 0) }), void 0));
-};
-exports.ThemeProvider = ThemeProvider;
 exports.ThemeConsumer = exports.themeContext.Consumer;

package/theme/index.d.ts

@@ -1,2 +1,3 @@
+export * from './Provider';
 export * from './context';
 export * from './types';