@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

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.StyledRoot = (0, style_1.styled)('div', 'mb-4 flex', function (utils, _a) {
+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 my-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-l2 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

@@ -9,9 +9,10 @@ export declare const chevronStyles: StyleFn<{
 export declare const transparentScrollbarStyles: StyleObject;
 export declare type OutlineProps = {
     $outlineColor?: string;
-    $outlineWidth?: string | number;
-    $outlineOffset?: string | number;
+    $outlineWidth?: StyleObject['outlineWidth'];
+    $outlineOffset?: StyleObject['outlineOffset'];
     $outlineStyle?: string;
 };
 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,12 +0,0 @@
-/**
- * @deprecated use spaceweb/styled
- */
-export declare const styled: import("baseui").StyledFn<ThemeT>;
-/**
- * @deprecated
- */
-export declare const withStyle: import("baseui").WithStyleFn<ThemeT>;
-/**
- * @deprecated use spaceweb/useStyle
- */
-export declare const useStyletron: () => [(arg: 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.d.ts

@@ -1,9 +1,8 @@
-import * as React from 'react';
-import { InputProps } from '../input';
-import { TextareaProps } from '../textarea';
-declare type UseAutoFocus = {
-    (props: Pick<InputProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLInputElement>;
-    (props: Pick<TextareaProps, 'autoFocus' | 'inputRef'>): React.RefObject<HTMLTextAreaElement>;
+import { RefObject, Ref } from 'react';
+import { FocusPosition } from '../input';
+declare type Params<T> = {
+    autoFocus?: FocusPosition;
+    inputRef?: Ref<T>;
 };
-declare const useAutoFocus: UseAutoFocus;
+declare const useAutoFocus: <T extends HTMLTextAreaElement | HTMLInputElement>({ autoFocus, inputRef, }: Params<T>) => RefObject<T>;
 export default useAutoFocus;

package/hooks/useAutoFocus.js

@@ -1,29 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = (0, tslib_1.__importStar)(require("react"));
+var react_1 = require("react");
+var useCombinedRef_1 = require("./useCombinedRef");
 var __DEV__ = process.env.NODE_ENV !== 'production';
 var useAutoFocus = function (_a) {
     var autoFocus = _a.autoFocus, inputRef = _a.inputRef;
-    var ownRef = React.useRef(null);
-    var ref = inputRef !== null && inputRef !== void 0 ? inputRef : ownRef;
-    React.useEffect(function () {
-        if (!ref.current || typeof autoFocus === 'undefined') {
+    var refObj = (0, useCombinedRef_1.useCombineRefObjects)(inputRef);
+    (0, react_1.useEffect)(function () {
+        if (!refObj.current || typeof autoFocus === 'undefined') {
             return;
         }
         var position;
         switch (typeof autoFocus) {
             case 'boolean':
                 if (autoFocus) {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
                 }
                 break;
             case 'number':
-                if (autoFocus >= ref.current.value.length) {
-                    position = ref.current.value.length;
+                if (autoFocus >= refObj.current.value.length) {
+                    position = refObj.current.value.length;
                 }
                 else if (autoFocus >= 0) {
                     position = autoFocus;
@@ -37,7 +36,7 @@ var useAutoFocus = function (_a) {
                     position = 0;
                 }
                 else if (autoFocus === 'end') {
-                    position = ref.current.value.length;
+                    position = refObj.current.value.length;
                 }
                 else {
                     return;
@@ -47,15 +46,21 @@ var useAutoFocus = function (_a) {
                 position = 0;
         }
         try {
-            ref.current.focus();
-            ref.current.setSelectionRange(position, position);
+            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__) {
                 console.error(err);
             }
         }
-    }, [autoFocus]);
-    return ref;
+    }, [autoFocus, refObj]);
+    return refObj;
 };
 exports.default = useAutoFocus;

package/hooks/useCombinedRef.d.ts

@@ -2,5 +2,6 @@ import * as React from 'react';
 export declare type Ref<T> = React.RefCallback<T> | React.MutableRefObject<T> | null;
 declare type Refs<T> = (Ref<T | null> | null | undefined)[];
 export declare function combineRefs<T>(...refs: Refs<T>): (element: T) => void;
+export declare function useCombineRefObjects<T>(...refs: Refs<T>): React.RefObject<T>;
 declare function useCombinedRefs<T>(...refs: Refs<T>): React.RefCallback<T | null>;
 export default useCombinedRefs;

package/hooks/useCombinedRef.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.combineRefs = void 0;
+exports.useCombineRefObjects = exports.combineRefs = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
+var React = (0, tslib_1.__importStar)(require("react"));
 function combineRefs() {
     var refs = [];
     for (var _i = 0; _i < arguments.length; _i++) {
@@ -22,6 +23,39 @@ function combineRefs() {
     };
 }
 exports.combineRefs = combineRefs;
+function useCombineRefObjects() {
+    var refs = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        refs[_i] = arguments[_i];
+    }
+    var targetRef = React.useRef(null);
+    React.useEffect(function () {
+        refs.forEach(function (ref) {
+            if (!ref)
+                return;
+            if (typeof ref === 'function') {
+                ref(targetRef.current);
+            }
+            else {
+                ref.current = targetRef.current;
+            }
+        });
+        return function () {
+            refs.forEach(function (ref) {
+                if (!ref)
+                    return;
+                if (typeof ref === 'function') {
+                    ref(targetRef.current);
+                }
+                else {
+                    ref.current = targetRef.current;
+                }
+            });
+        };
+    }, (0, tslib_1.__spreadArray)([], (0, tslib_1.__read)(refs), false)); // eslint-disable-line react-hooks/exhaustive-deps
+    return targetRef;
+}
+exports.useCombineRefObjects = useCombineRefObjects;
 /*
  * combines multiple refs to single MutableRefObject - when one wants to assign same element/instance to multiple refs
  * https://github.com/facebook/react/issues/13029#issue-331682836

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/useIsMobileDevice.d.ts

@@ -0,0 +1 @@
+export declare const useIsMobileDevice: () => boolean;