@sprinklrjs/spaceweb 11.0.0 → 12.0.0-ci.0

package/form-control/form-control.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormControl = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var uniqueId_1 = (0, tslib_1.__importDefault)(require("lodash/uniqueId"));
 var react_1 = require("react");
 var React = (0, tslib_1.__importStar)(require("react"));
 var helpers_1 = require("../helpers");
@@ -14,44 +13,41 @@ var overrides_1 = require("../overrides");
 var tooltip_1 = require("../tooltip");
 var context_1 = require("./context");
 var styled_component_1 = require("./styled-component");
-function chooseRenderedHint(caption, error, positive, sharedProps) {
-    if (error && typeof error !== 'boolean') {
-        return typeof error === 'function' ? error(sharedProps) : error;
-    }
-    if (positive && typeof positive !== 'boolean') {
-        return typeof positive === 'function' ? positive(sharedProps) : positive;
-    }
-    if (caption) {
-        return typeof caption === 'function' ? caption(sharedProps) : caption;
-    }
-    return null;
-}
-var FormControl = function (_a) {
+var useUniqueId_1 = (0, tslib_1.__importDefault)(require("../hooks/useUniqueId"));
+var withErrorIcon = function (message) { return ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 2, shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_clr_1.default, { size: 14 }, void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, { children: message }, void 0)] }), void 0)); };
+var FormControl = (0, react_1.forwardRef)(function (_a, ref) {
     var overrides = _a.overrides, label = _a.label, caption = _a.caption, disabled = _a.disabled, error = _a.error, positive = _a.positive, htmlFor = _a.htmlFor, children = _a.children, intent = _a.intent, required = _a.required, layout = _a.layout, $as = _a.$as, className = _a.className, subText = _a.subText, subTextAsIcon = _a.subTextAsIcon;
     var onlyChildProps = React.Children.only(children).props;
-    var a11yCaptionId = (0, react_1.useRef)((0, uniqueId_1.default)('sw-id-'));
+    var a11yCaptionId = (0, useUniqueId_1.default)();
+    var a11yErrorMessageId = (0, useUniqueId_1.default)();
+    var a11LabelId = (0, useUniqueId_1.default)();
+    var a11SubTextId = (0, useUniqueId_1.default)();
+    var fieldUniqueId = (0, useUniqueId_1.default)();
+    var intentMessageNode = error !== null && error !== void 0 ? error : positive;
     // First try to infer id from props or children. Create new id if needed.
-    var a11yFieldId = (0, react_1.useRef)(htmlFor || onlyChildProps.id || (0, uniqueId_1.default)('sw-id-'));
-    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ required: required, layout: layout, intent: intent, disabled: disabled })), { $error: !!error, $positive: !!positive });
-    var hint = chooseRenderedHint(caption, error, positive, sharedProps);
-    var hintEl = intent === 'error' && (caption || error) ? ((0, jsx_runtime_1.jsxs)(stack_1.Stack, (0, tslib_1.__assign)({ direction: "horizontal", gap: 2, shrink: true }, { children: [(0, jsx_runtime_1.jsx)(error_clr_1.default, { size: 14 }, void 0), (0, jsx_runtime_1.jsx)(stack_1.StackItem, { children: hint }, void 0)] }), void 0)) : (hint);
-    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _b[0], labelContainerProps = _b[1], _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _c[0], labelProps = _c[1], _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, styled_component_1.StyledRequiredDot), 2), RequiredDot = _d[0], requiredDotProps = _d[1], _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1], _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, styled_component_1.StyledSubText), 2), SubText = _f[0], subTextProps = _f[1], _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, styled_component_1.StyledInfoIconContainer), 2), InfoIconContainer = _g[0], infoIconContainerProps = _g[1], _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, styled_component_1.StyledControlContainer), 2), ControlContainer = _h[0], controlContainerProps = _h[1], _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, styled_component_1.StyledCaption), 2), Caption = _j[0], captionProps = _j[1], _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, tooltip_1.StatefulTooltip), 2), SubTextTooltip = _k[0], subTextTooltipProps = _k[1];
+    var a11yFieldId = htmlFor || onlyChildProps.id || fieldUniqueId;
+    var sharedProps = (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (0, helpers_1.add$props)({ required: required, layout: layout, intent: intent, disabled: disabled })), { $hasSubText: !!subText, $subTextAsIcon: subTextAsIcon });
+    var _b = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.LabelContainer, styled_component_1.StyledLabelContainer), 2), LabelContainer = _b[0], labelContainerProps = _b[1], _c = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Label, styled_component_1.StyledLabel), 2), Label = _c[0], labelProps = _c[1], _d = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.RequiredDot, styled_component_1.StyledRequiredDot), 2), RequiredDot = _d[0], requiredDotProps = _d[1], _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _e[0], rootProps = _e[1], _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubText, styled_component_1.StyledSubText), 2), SubText = _f[0], subTextProps = _f[1], _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.InfoIconContainer, styled_component_1.StyledInfoIconContainer), 2), InfoIconContainer = _g[0], infoIconContainerProps = _g[1], _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ControlContainer, styled_component_1.StyledControlContainer), 2), ControlContainer = _h[0], controlContainerProps = _h[1], _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Caption, styled_component_1.StyledCaption), 2), Caption = _j[0], captionProps = _j[1], _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.ErrCaption, styled_component_1.StyledIntentCaption), 2), ErrCaption = _k[0], errCaptionProps = _k[1], _l = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SubTextTooltip, tooltip_1.StatefulTooltip), 2), SubTextTooltip = _l[0], subTextTooltipProps = _l[1];
     var formControlProviderValue = (0, react_1.useMemo)(function () { return ({ intent: intent }); }, [intent]);
     var shouldRenderSubTextInTooltip = layout === 'horizontal' || subTextAsIcon;
-    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-label", htmlFor: a11yFieldId.current }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subText, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({}, subTextProps, { children: typeof subText === 'function' ? subText(sharedProps) : subText }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
+    var captionMessage = typeof caption === 'function' ? caption(sharedProps) : caption;
+    var subTextToRender = typeof subText === 'function' ? subText(sharedProps) : subText;
+    var invalidInput = !!(error || (intent === 'error' && captionMessage));
+    return ((0, jsx_runtime_1.jsx)(context_1.FormControlProvider, (0, tslib_1.__assign)({ value: formControlProviderValue }, { children: (0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ ref: ref, "data-testid": "form-control", "data-spaceweb": "form-control", className: className, "$as": $as }, sharedProps, rootProps, { children: [label && ((0, jsx_runtime_1.jsxs)(LabelContainer, (0, tslib_1.__assign)({ "data-testid": "form-control-label-container" }, sharedProps, labelContainerProps, { children: [(0, jsx_runtime_1.jsx)(Label, (0, tslib_1.__assign)({ id: a11LabelId, "data-spaceweb": "form-control-label", htmlFor: a11yFieldId }, sharedProps, labelProps, { children: typeof label === 'function' ? label(sharedProps) : label }), void 0), required && (0, jsx_runtime_1.jsx)(RequiredDot, (0, tslib_1.__assign)({ "data-testid": "form-required" }, requiredDotProps), void 0), subText && shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubTextTooltip, (0, tslib_1.__assign)({ content: subTextToRender, size: "md" }, subTextTooltipProps, { children: (0, jsx_runtime_1.jsx)(InfoIconContainer, (0, tslib_1.__assign)({}, infoIconContainerProps, { children: (0, jsx_runtime_1.jsx)(info_1.default, { className: "h-2 w-2" }, void 0) }), void 0) }), void 0)) : null] }), void 0)), subText && !shouldRenderSubTextInTooltip ? ((0, jsx_runtime_1.jsx)(SubText, (0, tslib_1.__assign)({ id: a11SubTextId }, subTextProps, { children: subTextToRender }), void 0)) : null, (0, jsx_runtime_1.jsxs)(ControlContainer, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-container" }, sharedProps, controlContainerProps, { children: [React.Children.map(children, function (child, index) {
                             if (!child)
                                 return null;
                             var key = child.key || String(index);
                             return React.cloneElement(child, {
                                 key: key,
-                                id: a11yFieldId.current,
-                                'aria-errormessage': error ? a11yCaptionId.current : null,
-                                'aria-describedby': caption || positive ? a11yCaptionId.current : null,
+                                id: a11yFieldId,
+                                'aria-invalid': invalidInput,
+                                'aria-errormessage': invalidInput ? (error ? a11yErrorMessageId : a11yCaptionId) : null,
+                                'aria-describedby': captionMessage || intentMessageNode || subText
+                                    ? "".concat(subText ? a11SubTextId : '', " ").concat(captionMessage && !invalidInput ? a11yCaptionId : '', " ").concat(intentMessageNode && !invalidInput ? a11yErrorMessageId : '')
+                                    : null,
                                 'aria-required': required ? 'true' : 'false',
                                 disabled: onlyChildProps.disabled || disabled,
-                                error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
-                                positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive,
                             });
-                        }), (caption || error || positive) && ((0, jsx_runtime_1.jsx)(Caption, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-caption", id: a11yCaptionId.current }, sharedProps, captionProps, { children: hintEl }), void 0))] }), void 0)] }), void 0) }), void 0));
-};
+                        }), captionMessage ? ((0, jsx_runtime_1.jsx)(Caption, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-caption", id: a11yCaptionId }, sharedProps, captionProps, { children: intent === 'error' ? withErrorIcon(captionMessage) : captionMessage }), void 0)) : null, intentMessageNode ? ((0, jsx_runtime_1.jsx)(ErrCaption, (0, tslib_1.__assign)({ "data-spaceweb": "form-control-errormessage", id: a11yErrorMessageId }, sharedProps, { "$intent": error ? 'error' : 'success' }, errCaptionProps, { children: error ? withErrorIcon(intentMessageNode) : intentMessageNode }), void 0)) : null] }), void 0)] }), void 0) }), void 0));
+});
 exports.FormControl = FormControl;

package/form-control/styled-component.d.ts

@@ -3,6 +3,7 @@ export declare const StyledInfoIconContainer: import("../style/styled").StyledCo
 export declare const StyledRequiredDot: import("../style/styled").StyledComponent;
 export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const StyledCaption: import("../style/styled").StyledComponent;
+export declare const StyledIntentCaption: import("../style/styled").StyledComponent;
 export declare const StyledLabelContainer: import("../style/styled").StyledComponent;
 export declare const StyledLabel: import("../style/styled").StyledComponent;
 export declare const StyledControlContainer: import("../style/styled").StyledComponent;

package/form-control/styled-component.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledControlContainer = exports.StyledLabel = exports.StyledLabelContainer = exports.StyledCaption = exports.StyledRoot = exports.StyledRequiredDot = exports.StyledInfoIconContainer = exports.StyledSubText = void 0;
+exports.StyledControlContainer = exports.StyledLabel = exports.StyledLabelContainer = exports.StyledIntentCaption = exports.StyledCaption = exports.StyledRoot = exports.StyledRequiredDot = exports.StyledInfoIconContainer = exports.StyledSubText = void 0;
 var style_1 = require("../style");
 var getIntentColor = function (_a, _b) {
     var theme = _a.theme;
@@ -17,20 +17,32 @@ var getIntentColor = function (_a, _b) {
             return { color: theme.spr.text02 };
     }
 };
-exports.StyledSubText = (0, style_1.styled)('div', 'spr-text-02 typography-l3 mb-1');
+exports.StyledSubText = (0, style_1.styled)('div', 'spr-text-02 mb-1', {
+    fontSize: '13px',
+    lineHeight: '16px',
+    fontWeight: 400,
+});
 exports.StyledInfoIconContainer = (0, style_1.styled)('div', 'spr-ui-03 rounded-full flex items-center justify-center ml-2 flex-shrink-0', function (_a) {
     var px2rem = _a.px2rem;
     return ({ height: px2rem(14), width: px2rem(14) });
 });
-exports.StyledRequiredDot = (0, style_1.styled)('span', 'ml-1 spr-support-error rounded-full h-1 w-1 flex-shrink-0');
+exports.StyledRequiredDot = (0, style_1.styled)('span', 'spr-support-error rounded-full h-1 w-1 flex-shrink-0 ml-1');
 exports.StyledRoot = (0, style_1.styled)('div', 'flex', function (utils, _a) {
     var $layout = _a.$layout;
     return $layout === 'horizontal' ? 'flex-row items-baseline' : 'flex-col';
 });
-exports.StyledCaption = (0, style_1.styled)('div', 'typography-l2 my-1', getIntentColor);
-exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center mb-1 w-full', function (utils, _a) {
+exports.StyledCaption = (0, style_1.styled)('div', 'typography-l2 mt-1', getIntentColor);
+exports.StyledIntentCaption = (0, style_1.styled)('div', 'typography-l2 mt-1', getIntentColor);
+exports.StyledLabelContainer = (0, style_1.styled)('div', 'flex items-center w-full', function (utils, _a) {
     var $layout = _a.$layout;
-    return $layout === 'horizontal' ? 'w-4/24 mr-2' : '';
+    return ($layout === 'horizontal' ? 'w-4/24 mr-2' : '');
+}, function (utils, _a) {
+    var $hasSubText = _a.$hasSubText, $subTextAsIcon = _a.$subTextAsIcon;
+    return (!$hasSubText || $subTextAsIcon ? 'mb-1' : '');
+});
+exports.StyledLabel = (0, style_1.styled)('label', 'spr-text-02', {
+    fontSize: '14px',
+    lineHeight: '18px',
+    fontWeight: 400,
 });
-exports.StyledLabel = (0, style_1.styled)('label', 'typography-l1 text-14 spr-text-02');
 exports.StyledControlContainer = (0, style_1.styled)('div', 'w-full');

package/form-control/types.d.ts

@@ -7,6 +7,7 @@ export declare type FormControlOverrides = {
     Label?: Override<Record<string, any>>;
     RequiredDot?: Override<Record<string, any>>;
     Caption?: Override<Record<string, any>>;
+    ErrCaption?: Override<Record<string, any>>;
     ControlContainer?: Override<Record<string, any>>;
     Root?: Override<Record<string, any>>;
     SubText?: Override<Record<string, any>>;
@@ -16,17 +17,17 @@ export declare type FormControlOverrides = {
 export declare type FormControlProps = {
     children: React.ReactElement;
     disabled?: boolean;
-    label?: React.ReactNode;
+    label?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
      * Help text to render b/w Label and the form field.
      */
-    subText?: React.ReactNode;
+    subText?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
     /**
      * If true, render info icon and display subText in Tooltip
      */
     subTextAsIcon?: boolean;
-    caption?: React.ReactNode;
-    error?: boolean | React.ReactNode;
+    caption?: React.ReactNode | ((sharedProps: SharedProps) => React.ReactNode);
+    error?: React.ReactNode;
     positive?: React.ReactNode;
     htmlFor?: string;
     className?: ClassName;
@@ -43,4 +44,6 @@ export declare type SharedProps = {
     $required: boolean;
     $layout: layout;
     $intent: Intent;
+    $hasSubText: boolean;
+    $subTextAsIcon?: boolean;
 };

package/grid/Col.js

@@ -10,24 +10,34 @@ var react_1 = require("react");
 var box_1 = require("../box");
 var useStyle_1 = (0, tslib_1.__importDefault)(require("../style/useStyle"));
 var utils_1 = require("./utils");
-var getClassList = function (column, breakpoint) {
-    if (column === void 0) { column = {}; }
+var getGridRange = function (column, breakpointMinWidth) {
+    var _a;
     var colSpan = column.colSpan, colStart = column.colStart, colEnd = column.colEnd, rowSpan = column.rowSpan, rowStart = column.rowStart, rowEnd = column.rowEnd;
-    var classList = [];
-    var prefix = breakpoint ? "".concat(breakpoint, ":") : '';
-    if (colEnd)
-        classList.push("".concat(prefix, "col-end-").concat(colEnd));
-    if (colSpan)
-        classList.push("".concat(prefix, "col-span-").concat(colSpan));
-    if (colStart)
-        classList.push("".concat(prefix, "col-start-").concat(colStart));
-    if (rowEnd)
-        classList.push("".concat(prefix, "row-end-").concat(rowEnd));
-    if (rowSpan)
-        classList.push("".concat(prefix, "row-span-").concat(rowSpan));
-    if (rowStart)
-        classList.push("".concat(prefix, "row-start-").concat(rowStart));
-    return classList;
+    var gridRangeStyle = {};
+    if (typeof colSpan === 'number') {
+        gridRangeStyle.gridColumnStart = "span ".concat(colSpan);
+        gridRangeStyle.gridColumnEnd = "span ".concat(colSpan);
+    }
+    if (typeof rowSpan === 'number') {
+        gridRangeStyle.gridRowStart = "span ".concat(rowSpan);
+        gridRangeStyle.gridRowEnd = "span ".concat(rowSpan);
+    }
+    if (typeof colStart === 'number') {
+        gridRangeStyle.gridColumnStart = colStart;
+    }
+    if (typeof colEnd === 'number') {
+        gridRangeStyle.gridColumnEnd = colEnd;
+    }
+    if (typeof rowStart === 'number') {
+        gridRangeStyle.gridRowStart = rowStart;
+    }
+    if (typeof rowEnd === 'number') {
+        gridRangeStyle.gridRowEnd = rowEnd;
+    }
+    return breakpointMinWidth
+        ? (_a = {},
+            _a["@media screen and (min-width: ".concat(breakpointMinWidth, ")")] = gridRangeStyle,
+            _a) : gridRangeStyle;
 };
 var Col = function (props) {
     var theme = (0, useStyle_1.default)().theme;
@@ -35,10 +45,10 @@ var Col = function (props) {
     var className = props.className, style = props.style, children = props.children;
     var classList = [];
     var breakpoints = (0, react_1.useMemo)(function () { return Object.keys(screens); }, [screens]);
-    classList = classList.concat.apply(classList, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(getClassList(props)), false));
+    classList.push(getGridRange(props));
     breakpoints.forEach(function (breakpoint) {
         if (props[breakpoint]) {
-            classList = classList.concat.apply(classList, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(getClassList(props[breakpoint], breakpoint)), false));
+            classList.push(getGridRange(props[breakpoint], screens[breakpoint]));
         }
     });
     return ((0, jsx_runtime_1.jsx)(box_1.Box, (0, tslib_1.__assign)({ "data-testid": "col" }, (0, utils_1.filterOwnProps)(breakpoints, props), { className: [classList, className, style] }, { children: children }), void 0));

package/helpers/ClearIconButton.js

@@ -4,9 +4,11 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var IconButton_1 = (0, tslib_1.__importDefault)(require("../button/IconButton"));
 var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
+var locale_1 = require("../locale");
 var ClearIconButton = function (_a) {
     var size = _a.size, $size = _a.$size, $isOpen = _a.$isOpen, props = (0, tslib_1.__rest)(_a, ["size", "$size", "$isOpen"]);
-    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, (0, tslib_1.__assign)({}, props, { overrides: {
+    var locale = (0, locale_1.useLocale)();
+    return ((0, jsx_runtime_1.jsx)(IconButton_1.default, (0, tslib_1.__assign)({ "aria-label": locale.input.clearAriaLabel }, props, { overrides: {
             BaseButton: {
                 style: [
                     'h-5 w-5 spr-text-02 hover:spr-text-01 focus:spr-text-01 hover:spr-ui-03 focus:spr-ui-03 bg-transparent',

package/helpers/StyledTombstone.d.ts

@@ -0,0 +1 @@
+export declare const StyledTombstone: import("../style/styled").StyledComponent;

package/helpers/StyledTombstone.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledTombstone = void 0;
+var tslib_1 = require("tslib");
+var styled_1 = (0, tslib_1.__importDefault)(require("../style/styled"));
+exports.StyledTombstone = (0, styled_1.default)('div', 'spr-ui-03 h-full w-full', {
+    animationDuration: '1s',
+    animationIterationCount: 'infinite',
+    animationTimingFunction: 'ease-in-out',
+    animationName: {
+        '0%': {
+            opacity: '1',
+        },
+        '50%': {
+            opacity: '0.4',
+        },
+        '100%': {
+            opacity: '1',
+        },
+    },
+});

package/helpers/colors.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="lodash" />
+export declare function hexToRgb(hex: string): [R: number, G: number, B: number];
+export declare function RgbToHex(rgb: readonly [number, number, number]): string;
+/**
+ * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+ * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
+ */
+export declare const getRelativeLuminance: ((rgb: readonly [number, number, number]) => number) & import("lodash").MemoizedFunction;
+export declare function getContrastRatio(color1: string, color2: string): number;
+export declare function RgbToHsl(rgb: readonly [number, number, number]): [H: number, S: number, L: number];
+export declare function HslToRgb(hsl: readonly [number, number, number]): [R: number, G: number, B: number];

package/helpers/colors.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HslToRgb = exports.RgbToHsl = exports.getContrastRatio = exports.getRelativeLuminance = exports.RgbToHex = exports.hexToRgb = void 0;
+var tslib_1 = require("tslib");
+var memoize_1 = (0, tslib_1.__importDefault)(require("lodash/memoize"));
+function hexToRgb(hex) {
+    var r = parseInt(hex.substring(1, 3), 16);
+    var g = parseInt(hex.substring(3, 5), 16);
+    var b = parseInt(hex.substring(5, 7), 16);
+    return [r, g, b];
+}
+exports.hexToRgb = hexToRgb;
+function RgbToHex(rgb) {
+    return "#".concat(rgb.map(function (n) { return Math.round(n).toString(16).padStart(2, '0'); }).join(''));
+}
+exports.RgbToHex = RgbToHex;
+/**
+ * https://medium.muz.li/the-science-of-color-contrast-an-expert-designers-guide-33e84c41d156
+ * https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum#dfn-contrast-ratio
+ */
+exports.getRelativeLuminance = (0, memoize_1.default)(function (rgb) {
+    var _a = (0, tslib_1.__read)(rgb.map(function (c) { return c / 255; }).map(function (c) { return (c <= 0.04045 ? c / 12.92 : Math.pow(((c + 0.055) / 1.055), 2.4)); }), 3), r = _a[0], g = _a[1], b = _a[2];
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}, function (rgb) { return rgb.join(','); });
+function getContrastRatio(color1, color2) {
+    var rgb1 = hexToRgb(color1);
+    var rgb2 = hexToRgb(color2);
+    var l1 = (0, exports.getRelativeLuminance)(rgb1);
+    var l2 = (0, exports.getRelativeLuminance)(rgb2);
+    return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+}
+exports.getContrastRatio = getContrastRatio;
+// https://www.rapidtables.com/convert/color
+function RgbToHsl(rgb) {
+    var _a = (0, tslib_1.__read)(rgb.map(function (n) { return n / 255; }), 3), R = _a[0], G = _a[1], B = _a[2];
+    var L = Math.max(R, G, B);
+    var S = L - Math.min(R, G, B);
+    // eslint-disable-next-line no-nested-ternary -- Can't really make this readable
+    var H = S ? (L === R ? (G - B) / S : L === G ? 2 + (B - R) / S : 4 + (R - G) / S) : 0;
+    return [
+        Math.round(60 * H < 0 ? 60 * H + 360 : 60 * H),
+        // eslint-disable-next-line no-nested-ternary -- Can't really make this readable
+        Math.round(100 * (S ? (L <= 0.5 ? S / (2 * L - S) : S / (2 - (2 * L - S))) : 0)),
+        Math.round((100 * (2 * L - S)) / 2),
+    ];
+}
+exports.RgbToHsl = RgbToHsl;
+function HslToRgb(hsl) {
+    var H = Math.round(hsl[0]);
+    var S = Math.round(hsl[1]) / 100;
+    var L = Math.round(hsl[2]) / 100;
+    var k = function (n) { return (n + H / 30) % 12; };
+    var A = S * Math.min(L, 1 - L);
+    var f = function (n) { return L - A * Math.max(-1, Math.min(k(n) - 3, Math.min(9 - k(n), 1))); };
+    return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))];
+}
+exports.HslToRgb = HslToRgb;

package/helpers/commonStyles.d.ts

@@ -15,3 +15,4 @@ export declare type OutlineProps = {
 };
 export declare const getOutlineStyles: ({ theme }: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
 export declare const getFocusVisibleStyles: (utils: StyleUtils, props?: OutlineProps | undefined) => StyleObject;
+export declare const accessibilityStyles: StyleObject;

package/helpers/commonStyles.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFocusVisibleStyles = exports.getOutlineStyles = exports.transparentScrollbarStyles = exports.chevronStyles = void 0;
+exports.accessibilityStyles = exports.getFocusVisibleStyles = exports.getOutlineStyles = exports.transparentScrollbarStyles = exports.chevronStyles = void 0;
+var tslib_1 = require("tslib");
+var longHandHelpers_1 = require("./longHandHelpers");
 var chevronStyles = function (_a, _b) {
     var theme = _a.theme, px2rem = _a.px2rem;
     var $isOpen = _b.$isOpen;
@@ -25,12 +27,7 @@ exports.transparentScrollbarStyles = {
     '::-webkit-scrollbar': {
         backgroundColor: 'transparent',
     },
-    '::-webkit-scrollbar-thumb': {
-        backgroundColor: 'darkgrey',
-        border: '4px solid transparent',
-        borderRadius: '8px',
-        backgroundClip: 'padding-box',
-    },
+    '::-webkit-scrollbar-thumb': (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ backgroundColor: 'darkgrey' }, (0, longHandHelpers_1.borderRadius)('8px')), (0, longHandHelpers_1.borderWidth)('4px')), (0, longHandHelpers_1.borderStyle)('solid')), (0, longHandHelpers_1.borderColor)('transparent')), { backgroundClip: 'padding-box' }),
 };
 var getOutlineStyles = function (_a, props) {
     var theme = _a.theme;
@@ -52,3 +49,16 @@ var getFocusVisibleStyles = function (utils, props) {
     });
 };
 exports.getFocusVisibleStyles = getFocusVisibleStyles;
+exports.accessibilityStyles = {
+    position: 'fixed',
+    width: '0px',
+    height: '0px',
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    borderTopWidth: 0,
+    borderBottomWidth: 0,
+    padding: 0,
+    overflow: 'hidden',
+    clip: 'rect(0, 0, 0, 0)',
+    clipPath: 'inset(100%)',
+};

package/helpers/index.d.ts

@@ -17,9 +17,10 @@ export declare const add$props: (props: Record<string, unknown>) => Record<strin
  * @param value
  */
 export declare const covertCSSVariablesToValue: <T extends string | object>(value: T) => T;
+export declare const themeTokenToHex: (token: string) => string | null;
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color
  * @param alpha opacity
  */
-export declare const hex2rgb: (_hex: string, alpha?: string | undefined) => string | null;
+export declare const hex2rgb: (hex: string, alpha?: string | undefined) => string | null;

package/helpers/index.js

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.hex2rgb = exports.covertCSSVariablesToValue = exports.add$props = exports.omit$props = void 0;
+exports.hex2rgb = exports.themeTokenToHex = exports.covertCSSVariablesToValue = exports.add$props = exports.omit$props = void 0;
 var tslib_1 = require("tslib");
+var colors_1 = require("./colors");
 /**
  * Omits properties that starts with `$` (Styletron)
  * @param $props properties
@@ -50,23 +51,25 @@ var covertCSSVariablesToValue = function (value) {
     return value;
 };
 exports.covertCSSVariablesToValue = covertCSSVariablesToValue;
+var themeTokenToHex = function (token) {
+    var hex = (0, exports.covertCSSVariablesToValue)(token);
+    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    return parsed;
+};
+exports.themeTokenToHex = themeTokenToHex;
 /**
  * Converts hexadecimal color to RGB or RGBA (if alpha is provided)
  * @param hex hexadecimal color
  * @param alpha opacity
  */
-var hex2rgb = function (_hex, alpha) {
-    var hex = (0, exports.covertCSSVariablesToValue)(_hex);
-    var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
-    var parsed = hex.replace(shorthandRegex, function (m, r, g, b) {
-        return r + r + g + g + b + b;
-    });
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(parsed);
-    if (result) {
-        return alpha
-            ? "rgba(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ", ").concat(alpha, ")")
-            : "rgb(".concat(parseInt(result[1], 16), ", ").concat(parseInt(result[2], 16), ", ").concat(parseInt(result[3], 16), ")");
-    }
-    return null;
+var hex2rgb = function (hex, alpha) {
+    var convertedHex = (0, exports.covertCSSVariablesToValue)(hex);
+    if (!/^#[0-9a-f]{6}$/i.test(convertedHex))
+        return null;
+    var parsed = (0, colors_1.hexToRgb)(convertedHex);
+    return alpha ? "rgba(".concat(parsed.join(', '), ", ").concat(alpha, ")") : "rgb(".concat(parsed.join(', '), ")");
 };
 exports.hex2rgb = hex2rgb;

package/helpers/styletron.d.ts

@@ -1,23 +0,0 @@
-/// <reference types="react" />
-/**
- * @deprecated use spaceweb/styled
- */
-export declare const styled: {
-    <C extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
-        $theme: Theme;
-    }) => import("styletron-standard").StyleObject)): import("styletron-react").StyletronComponent<C, P>;
-    <C_1 extends keyof JSX.IntrinsicElements | import("react").ComponentType<any>>(component: C_1, style: import("styletron-standard").StyleObject): import("styletron-react").StyletronComponent<C_1, {}>;
-};
-/**
- * @deprecated
- */
-export declare const withStyle: {
-    <C extends import("styletron-react").StyletronComponent<any, any>, P extends {}, Theme = ThemeT>(component: C, style: import("styletron-standard").StyleObject | ((props: Omit<P, "$theme"> & {
-        $theme: Theme;
-    } & (C extends import("styletron-react").StyletronComponent<infer CC, infer PP> ? PP : never)) => import("styletron-standard").StyleObject)): C extends import("styletron-react").StyletronComponent<infer CC_1, infer PP_1> ? import("styletron-react").StyletronComponent<CC_1, P & PP_1> : never;
-    <C_1 extends import("styletron-react").StyletronComponent<any, any>>(component: C_1, style: import("styletron-standard").StyleObject): C_1;
-};
-/**
- * @deprecated use spaceweb/useStyle
- */
-export declare const useStyletron: () => [(a: import("styletron-standard").StyleObject) => string, ThemeT];

package/helpers/styletron.js

@@ -1,16 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useStyletron = exports.withStyle = exports.styled = void 0;
-var baseui_1 = require("baseui");
-/**
- * @deprecated use spaceweb/styled
- */
-exports.styled = (0, baseui_1.createThemedStyled)(); // remove once spaceweb/styled provides props to style callback
-/**
- * @deprecated
- */
-exports.withStyle = (0, baseui_1.createThemedWithStyle)();
-/**
- * @deprecated use spaceweb/useStyle
- */
-exports.useStyletron = (0, baseui_1.createThemedUseStyletron)();

package/helpers/themeHelpers.d.ts

@@ -1,4 +1,6 @@
 import { Theme } from '@sprinklrjs/spaceweb-themes/types';
 import { Size } from '../types';
+export declare const isDarkTheme: (theme: any) => boolean;
 export declare const getComponentTheme: (theme: Theme, componentName: string) => any;
 export declare const getComponentSizeTheme: (theme: Theme, componentName: string, size: Size | undefined, defaultSize: Size) => any;
+export declare const getDefaultSize: (theme: Theme) => 'md' | 'xxxs';

package/helpers/themeHelpers.js

@@ -1,9 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getComponentSizeTheme = exports.getComponentTheme = void 0;
+exports.getDefaultSize = exports.getComponentSizeTheme = exports.getComponentTheme = exports.isDarkTheme = void 0;
+var isDarkTheme = function (theme) { var _a; return (_a = theme === null || theme === void 0 ? void 0 : theme.name) === null || _a === void 0 ? void 0 : _a.includes('dark'); };
+exports.isDarkTheme = isDarkTheme;
 var getComponentTheme = function (theme, componentName) { return theme[componentName]; };
 exports.getComponentTheme = getComponentTheme;
 var sizeAdapter = {
+    xxxxs: 'sizeXxxxs',
     xxxs: 'sizeXxxs',
     xxs: 'sizeXxs',
     xs: 'sizeXs',
@@ -22,3 +25,16 @@ var getComponentSizeTheme = function (theme, componentName, size, defaultSize) {
     return (_b = componentTheme[sizeAdapter[size !== null && size !== void 0 ? size : defaultSize]]) !== null && _b !== void 0 ? _b : componentTheme[sizeAdapter[defaultSize]];
 };
 exports.getComponentSizeTheme = getComponentSizeTheme;
+var getDefaultSize = function (theme) {
+    switch (theme.density) {
+        case 'COMFORTABLE':
+            return 'md';
+        case 'SPACIOUS':
+            return 'md';
+        case 'COMPACT':
+            return 'xxxs';
+        default:
+            return 'md';
+    }
+};
+exports.getDefaultSize = getDefaultSize;

package/hooks/useAutoFocus.js

@@ -48,6 +48,12 @@ var useAutoFocus = function (_a) {
         try {
             refObj.current.focus({ preventScroll: true });
             refObj.current.setSelectionRange(position, position);
+            // moves cursor at the end of the text in input & textarea
+            // this would have been handled by browser, but we have to do it explicitly because of preventScroll option in ref.focus
+            if (position === refObj.current.value.length) {
+                refObj.current.scrollLeft = refObj.current.scrollWidth;
+                refObj.current.scrollTop = refObj.current.scrollHeight;
+            }
         }
         catch (err) {
             if (__DEV__) {

package/hooks/useFocusVisible.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useFocusVisible = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-var focusVisible_1 = require("baseui/utils/focusVisible");
+var focusVisible_1 = require("../baseui/utils/focusVisible");
 var useCombinedHandler_1 = (0, tslib_1.__importDefault)(require("./useCombinedHandler"));
 var useFocusVisible = function (props) {
     var _a = (0, tslib_1.__read)((0, react_1.useState)(false), 2), $isFocusVisible = _a[0], setIsFocusVisible = _a[1];

package/hooks/useHasMounted.d.ts

@@ -0,0 +1,2 @@
+declare const useHasMounted: () => boolean;
+export { useHasMounted };

package/hooks/useHasMounted.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHasMounted = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useTransitionState_1 = require("./useTransitionState");
+var useHasMounted = function () {
+    var _a = (0, tslib_1.__read)((0, useTransitionState_1.useTransitionState)(false), 2), hasMounted = _a[0], setHasMounted = _a[1];
+    (0, react_1.useEffect)(function () {
+        setHasMounted(true);
+    }, [setHasMounted]);
+    return hasMounted;
+};
+exports.useHasMounted = useHasMounted;

package/hooks/useMatchMedia.js

@@ -29,11 +29,22 @@ var useMedia = function (query, defaultState) {
             }
             setState(!!mediaQueryList.matches);
         };
-        mediaQueryList.addEventListener('change', onChange);
+        // addListener is deprecated but older version of safari still have not implemented addEventListener so adding check
+        if ('addEventListener' in mediaQueryList) {
+            mediaQueryList.addEventListener('change', onChange);
+        }
+        else {
+            mediaQueryList.addListener(onChange);
+        }
         setState(mediaQueryList.matches);
         return function () {
             mounted = false;
-            mediaQueryList.removeEventListener('change', onChange);
+            if ('removeEventListener' in mediaQueryList) {
+                mediaQueryList.removeEventListener('change', onChange);
+            }
+            else {
+                mediaQueryList.removeListener(onChange);
+            }
         };
     }, [query]);
     return state;