@sprinklrjs/spaceweb 10.1.0

package/tabs/types.d.ts

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { Override } from '../overrides';
+import { SpacewebComponentProps } from '../types';
+export declare type position = 'top' | 'left' | 'right';
+export declare type variant = 'default' | 'flap';
+export declare type ChangEventHandler = (args: {
+    activeTabId?: React.Key;
+}) => void;
+export declare type SharedPropsTab = {
+    $selected?: boolean;
+    $position?: position;
+    $variant?: variant;
+};
+export declare type SharedPropsTabs = {
+    $position?: position;
+    $variant?: variant;
+};
+export declare type TabOverrides = {
+    Tab?: Override<SharedPropsTabs & Record<string, any>>;
+};
+export declare type TabsOverrides = TabOverrides & {
+    TabList?: Override<SharedPropsTabs & Record<string, any>>;
+};
+export declare type TabsPanelOverrides = {
+    TabsPanel?: Override<Omit<SharedPropsTab, '$variant'> & Record<string, any>>;
+};
+export declare type TabListProps = Omit<SpacewebComponentProps, 'onChange'> & {
+    activeTabId?: React.Key;
+    children: React.ReactNode;
+    onChange?: ChangEventHandler;
+    position?: position;
+    variant?: variant;
+    activateOnFocus?: boolean;
+    overrides?: TabsOverrides;
+};
+export declare type TabsPanelProps = SpacewebComponentProps & {
+    children?: React.ReactNode;
+    selected?: boolean;
+    tabId?: React.Key;
+    overrides?: TabsPanelOverrides;
+};
+export declare type TabProps = TabsPanelProps & {
+    id?: React.Key;
+    position?: position;
+    variant?: variant;
+    overrides?: TabOverrides;
+    onClick?: (e: React.MouseEvent) => void;
+};
+export declare type StatefulTabProps = {
+    onChange?: ChangEventHandler;
+    defaultActiveTabId?: React.Key;
+};

package/tabs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/tag/avatar-tag.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+import { AvatarTagProps } from './types';
+declare const AvatarTag: (props: AvatarTagProps) => ReactElement;
+export default AvatarTag;

package/tag/avatar-tag.js

@@ -0,0 +1,26 @@
+"use strict";
+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 avatar_1 = require("../avatar");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var tag_1 = (0, tslib_1.__importDefault)(require("./tag"));
+var tagRootStyles = function (_a) {
+    var theme = _a.theme, px2rem = _a.px2rem;
+    var tagBorderRadius = (0, themeHelpers_1.getComponentTheme)(theme, 'multiSelect').tagBorderRadius;
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (tagBorderRadius && (0, longHandHelpers_1.borderRadius)(tagBorderRadius))), { marginLeft: px2rem(4) });
+};
+var avatarRootStyles = function (_a) {
+    var theme = _a.theme;
+    var avatarMarginLeft = (0, themeHelpers_1.getComponentTheme)(theme, 'tag').avatarMarginLeft;
+    return { marginLeft: avatarMarginLeft };
+};
+var AvatarTag = function (props) {
+    var avatarProps = props.avatarProps, startEnhancer = props.startEnhancer, className = props.className, tagProps = (0, tslib_1.__rest)(props, ["avatarProps", "startEnhancer", "className"]);
+    var startEnhancerOverride = (0, react_1.useCallback)(function (sharedProps) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer, (0, jsx_runtime_1.jsx)(avatar_1.Avatar, (0, tslib_1.__assign)({ size: "sm" }, avatarProps, { className: [avatarRootStyles, avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className] }), void 0)] }, void 0)); }, [avatarProps, startEnhancer]);
+    var mergedClassName = (0, react_1.useMemo)(function () { return [tagRootStyles, className]; }, [className]);
+    return (0, jsx_runtime_1.jsx)(tag_1.default, (0, tslib_1.__assign)({ size: "lg", startEnhancer: startEnhancerOverride, className: mergedClassName }, tagProps), void 0);
+};
+exports.default = AvatarTag;

package/tag/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Tag } from './tag';
+export { default as AvatarTag } from './avatar-tag';
+export { StyledText, StyledAction, StyledRoot, StyledStartEnhancer } from './styled-components';
+export type { TagProps, TagOverrides, SharedProps, Intent, Size, Variant } from './types';

package/tag/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledStartEnhancer = exports.StyledRoot = exports.StyledAction = exports.StyledText = exports.AvatarTag = exports.Tag = void 0;
+var tag_1 = require("./tag");
+Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return __importDefault(tag_1).default; } });
+var avatar_tag_1 = require("./avatar-tag");
+Object.defineProperty(exports, "AvatarTag", { enumerable: true, get: function () { return __importDefault(avatar_tag_1).default; } });
+var styled_components_1 = require("./styled-components");
+Object.defineProperty(exports, "StyledText", { enumerable: true, get: function () { return styled_components_1.StyledText; } });
+Object.defineProperty(exports, "StyledAction", { enumerable: true, get: function () { return styled_components_1.StyledAction; } });
+Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return styled_components_1.StyledRoot; } });
+Object.defineProperty(exports, "StyledStartEnhancer", { enumerable: true, get: function () { return styled_components_1.StyledStartEnhancer; } });

package/tag/intentStyles.d.ts

@@ -0,0 +1,4 @@
+import { Theme } from '@sprinklrjs/spaceweb-themes/types';
+import { StyleObject } from '../types';
+import { Intent, Variant } from './types';
+export declare const getIntentStyles: (theme: Theme, intent: Intent, variant: Variant) => StyleObject;

package/tag/intentStyles.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIntentStyles = void 0;
+var getColorMap = function (theme) { return ({
+    default: {
+        solid: {
+            bg: theme.spr.ui05,
+            bgHover: theme.spr.uiHover,
+            font: theme.spr.text01,
+            fontHover: theme.spr.text01,
+        },
+        light: {
+            bg: theme.spr.ui05,
+            bgHover: theme.spr.uiHover,
+            font: theme.spr.text01,
+            fontHover: theme.spr.text01,
+        },
+    },
+    error: {
+        solid: {
+            bg: theme.spr.clrRed,
+            bgHover: theme.spr.clrRed,
+            font: theme.spr.text05,
+            fontHover: theme.spr.text05,
+        },
+        light: {
+            bg: theme.spr.supportErrorHighlight,
+            bgHover: theme.spr.supportErrorHighlight,
+            font: theme.spr.supportErrorText,
+            fontHover: theme.spr.supportErrorText,
+        },
+    },
+    info: {
+        solid: {
+            bg: theme.spr.clrSea,
+            bgHover: theme.spr.clrSea,
+            font: theme.spr.text05,
+            fontHover: theme.spr.text05,
+        },
+        light: {
+            bg: theme.spr.clrSea,
+            bgHover: theme.spr.clrSea,
+            font: theme.spr.text05,
+            fontHover: theme.spr.text05,
+        },
+    },
+    success: {
+        solid: {
+            bg: theme.spr.clrGreen,
+            bgHover: theme.spr.clrGreen,
+            font: theme.spr.text05,
+            fontHover: theme.spr.text05,
+        },
+        light: {
+            bg: theme.spr.supportSuccessHighlight,
+            bgHover: theme.spr.supportSuccessHighlight,
+            font: theme.spr.supportSuccessText,
+            fontHover: theme.spr.supportSuccessText,
+        },
+    },
+    warning: {
+        solid: {
+            bg: theme.spr.clrOrange,
+            bgHover: theme.spr.clrOrange,
+            font: theme.spr.text05,
+            fontHover: theme.spr.text05,
+        },
+        light: {
+            bg: theme.spr.supportWarningHighlight,
+            bgHover: theme.spr.supportWarningHighlight,
+            font: theme.spr.clrOrange,
+            fontHover: theme.spr.clrOrange,
+        },
+    },
+}); };
+var getIntentStyles = function (theme, intent, variant) {
+    var _a;
+    var colorMap = getColorMap(theme);
+    var variantStyles = (_a = colorMap[intent]) === null || _a === void 0 ? void 0 : _a[variant];
+    return {
+        backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bg,
+        color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.font,
+        '&:hover': {
+            backgroundColor: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.bgHover,
+            color: variantStyles === null || variantStyles === void 0 ? void 0 : variantStyles.fontHover,
+        },
+    };
+};
+exports.getIntentStyles = getIntentStyles;

package/tag/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/tag/index.js"
+}

package/tag/styled-components.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledStartEnhancer: import("../style/styled").StyledComponent;
+export declare const StyledRoot: import("../style/styled").StyledComponent;
+export declare const StyledAction: import("../style/styled").StyledComponent;
+export declare const StyledText: import("../style/styled").StyledComponent;

package/tag/styled-components.js

@@ -0,0 +1,49 @@
+"use strict";
+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),
+    });
+});
+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'
+        ? (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', 
+        // 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.StyledText = (0, style_1.styled)('span', 'truncate', function (_a) {
+    var px2rem = _a.px2rem;
+    return ({
+        maxWidth: px2rem(128),
+    });
+});

package/tag/tag.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { TagProps } from './types';
+declare const Tag: import("react").ForwardRefExoticComponent<TagProps & import("react").RefAttributes<HTMLElement>>;
+export default Tag;

package/tag/tag.js

@@ -0,0 +1,57 @@
+"use strict";
+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 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 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 theme = (0, style_1.useStyle)().theme;
+    var handleKeyDown = (0, react_1.useCallback)(function (event) {
+        if (event.currentTarget !== event.target) {
+            return;
+        }
+        var key = event.key;
+        if (onClick && key === 'Enter') {
+            onClick(event);
+        }
+        if (closeable && (key === 'Backspace' || key === 'Delete')) {
+            onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick(event);
+            onActionKeyDown === null || onActionKeyDown === void 0 ? void 0 : onActionKeyDown(event);
+        }
+        if (onKeyDown) {
+            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 clickable = typeof onClick === 'function';
+    var sharedProps = {
+        $clickable: clickable,
+        $closeable: closeable,
+        $isFocused: isFocused,
+        $isHovered: isHovered,
+        $variant: variant,
+        $isFocusVisible: $isFocusVisible,
+        $size: size,
+        $withStartEnhancer: !!startEnhancer,
+        $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));
+});
+Tag.displayName = 'Tag';
+exports.default = Tag;

package/tag/types.d.ts

@@ -0,0 +1,53 @@
+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 Variant = 'solid' | 'light';
+export declare type Size = 'sm' | 'lg';
+export declare 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 = {
+    closeable?: boolean;
+    isFocused?: boolean;
+    isHovered?: boolean;
+    children?: React.ReactNode;
+    title?: string;
+    onActionClick?: (e: Event, children?: React.ReactNode) => any;
+    onActionKeyDown?: (e: Event, children?: React.ReactNode) => any;
+    onClick?: (event: Event) => any;
+    onKeyDown?: (event: Event) => any;
+    className?: ClassName;
+    overrides?: TagOverrides;
+    startEnhancer?: React.ReactNode | ((props: {
+        $withStartEnhancer: boolean;
+        $size: Size;
+        $intent: Intent;
+        $variant: Variant;
+    }) => React.ReactNode);
+    intent?: Intent;
+    variant?: Variant;
+    size?: Size;
+};
+export declare type AvatarTagProps = Omit<TagProps, 'size' | 'overrides'> & {
+    avatarProps: AvatarProps;
+    overrides?: TagProps['overrides'] & {
+        StartEnhancer?: Override<Record<string, any>>;
+    };
+};
+export declare type SharedProps = {
+    $clickable?: boolean;
+    $closeable?: boolean;
+    $isFocused?: boolean;
+    $isHovered?: boolean;
+    $isFocusVisible: boolean;
+    $withStartEnhancer: boolean;
+    $intent?: Intent;
+    $variant?: Variant;
+    $size?: Size;
+};

package/tag/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/tag/utils.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare function getTextFromChildren(children: React.ReactNode): string | null;

package/tag/utils.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTextFromChildren = void 0;
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+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
+// text from the child of a node to use as an attribute.
+function getTextFromChildren(children) {
+    var childList = React.Children.toArray(children).filter(function (child) { return child !== null && child !== undefined; });
+    if (!childList.length) {
+        return null;
+    }
+    var isJoinable = childList.every(function (child) { return JOINABLE_TYPES.has(typeof child); });
+    if (!isJoinable) {
+        return null;
+    }
+    // Join on an empty string to preserve React's whitespace handling:
+    // <Tag>foo{'bar'}baz</Tag> => 'foobar'
+    // <Tag>foo {'bar'} baz</Tag> => 'foo bar baz'
+    return childList.join('');
+}
+exports.getTextFromChildren = getTextFromChildren;

package/test-utils/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/test-utils/index.js"
+}

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

@@ -0,0 +1,6 @@
+import { ReactElement } from 'react';
+import * as React 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;
+export default TestProvider;

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

@@ -0,0 +1,16 @@
+"use strict";
+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 theme_1 = require("../../theme");
+var helpers_1 = require("./helpers");
+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);
+};
+exports.default = TestProvider;

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

@@ -0,0 +1,27 @@
+import { Direction, ThemeModule } from '@sprinklrjs/spaceweb-themes/types';
+import { StyleUtils } from '../../types';
+declare type Breakpoint = [string, string];
+declare type ScreenList = {
+    [name: string]: string;
+};
+/**
+ * Gets screens by breakpoint name from the theme
+ */
+export declare const getScreens: () => ScreenList;
+/**
+ * Gets a tuple of all breakpoints from the theme
+ */
+export declare const getBreakpoints: () => Breakpoint[];
+/**
+ * Setup events for responsive testing
+ */
+export declare const setupBreakpoints: () => void;
+/**
+ * Gets CSS declaration of the first element matching `[data-testid=]`
+ */
+export declare const getCSSByTestId: (testId: string) => CSSStyleDeclaration;
+export declare const getCSSByBasewebId: (basewebId: string) => CSSStyleDeclaration;
+export declare const getCSSFromEl: (el: any) => CSSStyleDeclaration;
+export declare const convertToTestableTheme: (testTheme: ThemeModule) => ThemeModule;
+export declare const getTestStyleUtils: (direction?: Direction) => StyleUtils;
+export {};

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

@@ -0,0 +1,66 @@
+"use strict";
+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 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 styleEngine_1 = require("../../styleEngine");
+var helpers_1 = require("../../helpers");
+/**
+ * Gets screens by breakpoint name from the theme
+ */
+var getScreens = function () { return light_1.default.theme.screens; };
+exports.getScreens = getScreens;
+/**
+ * Gets a tuple of all breakpoints from the theme
+ */
+var getBreakpoints = function () { return Object.entries((0, exports.getScreens)()); };
+exports.getBreakpoints = getBreakpoints;
+/**
+ * Setup events for responsive testing
+ */
+var setupBreakpoints = function () {
+    (0, mq_polyfill_1.default)(window);
+    Object.values((0, exports.getScreens)()).forEach(function (maxWidth) { return window.matchMedia("(max-width: ".concat(maxWidth, ")")); });
+    window.resizeTo = function resizeTo(width, height) {
+        Object.assign(this, {
+            innerWidth: width,
+            innerHeight: height,
+            outerWidth: width,
+            outerHeight: height,
+        }).dispatchEvent(new this.Event('resize'));
+    };
+};
+exports.setupBreakpoints = setupBreakpoints;
+/**
+ * Gets CSS declaration of the first element matching `[data-testid=]`
+ */
+var getCSSByTestId = function (testId) {
+    var el = window.document.querySelectorAll("[data-testid=\"".concat(testId, "\"]"))[0];
+    return window.getComputedStyle(el);
+};
+exports.getCSSByTestId = getCSSByTestId;
+var getCSSByBasewebId = function (basewebId) {
+    var el = window.document.querySelectorAll("[data-baseweb=\"".concat(basewebId, "\"]"))[0];
+    return window.getComputedStyle(el);
+};
+exports.getCSSByBasewebId = getCSSByBasewebId;
+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) });
+};
+exports.convertToTestableTheme = convertToTestableTheme;
+var getTestStyleUtils = function (direction) {
+    if (direction === void 0) { direction = 'ltr'; }
+    var isServer = typeof window === 'undefined';
+    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);
+};
+exports.getTestStyleUtils = getTestStyleUtils;

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

@@ -0,0 +1,2 @@
+export { default as TestProvider } from './TestProvider';
+export { getScreens, getBreakpoints, setupBreakpoints, getCSSByTestId, getCSSByBasewebId, getCSSFromEl, getTestStyleUtils, } from './helpers';

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

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTestStyleUtils = exports.getCSSFromEl = exports.getCSSByBasewebId = exports.getCSSByTestId = exports.setupBreakpoints = exports.getBreakpoints = exports.getScreens = exports.TestProvider = void 0;
+var TestProvider_1 = require("./TestProvider");
+Object.defineProperty(exports, "TestProvider", { enumerable: true, get: function () { return __importDefault(TestProvider_1).default; } });
+var helpers_1 = require("./helpers");
+Object.defineProperty(exports, "getScreens", { enumerable: true, get: function () { return helpers_1.getScreens; } });
+Object.defineProperty(exports, "getBreakpoints", { enumerable: true, get: function () { return helpers_1.getBreakpoints; } });
+Object.defineProperty(exports, "setupBreakpoints", { enumerable: true, get: function () { return helpers_1.setupBreakpoints; } });
+Object.defineProperty(exports, "getCSSByTestId", { enumerable: true, get: function () { return helpers_1.getCSSByTestId; } });
+Object.defineProperty(exports, "getCSSByBasewebId", { enumerable: true, get: function () { return helpers_1.getCSSByBasewebId; } });
+Object.defineProperty(exports, "getCSSFromEl", { enumerable: true, get: function () { return helpers_1.getCSSFromEl; } });
+Object.defineProperty(exports, "getTestStyleUtils", { enumerable: true, get: function () { return helpers_1.getTestStyleUtils; } });

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

@@ -0,0 +1,5 @@
+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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.hyperspaceDark = exports.hyperspaceLight = exports.sprDark = exports.sprLight = 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 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);

package/textarea/basewebAdapters.d.ts

@@ -0,0 +1,3 @@
+import { TextareaProps } from './types';
+declare function useTextareaAdapter<T extends TextareaProps>(props: T): Omit<T, 'size' | 'variant' | 'className' | 'style' | 'intent' | 'autoSize'>;
+export default useTextareaAdapter;

package/textarea/basewebAdapters.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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 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)({ onChange: handleChange, $autoSize: autoSize }, sharedProps),
+        },
+    }, restProps.overrides);
+    var rows = autoSize && !restProps.rows ? 1 : restProps.rows;
+    return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { overrides: overrides, rows: rows });
+}
+exports.default = useTextareaAdapter;