@sprinklrjs/spaceweb 10.1.0 → 12.0.0-ci.0

package/esm/truncateWithTooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TruncateWithTooltip } from './TruncateWithTooltip';
+export type { TruncateWithTooltipProps } from './types';

package/esm/truncateWithTooltip/index.js

@@ -0,0 +1 @@
+export { default as TruncateWithTooltip } from './TruncateWithTooltip';

package/esm/truncateWithTooltip/types.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { ClassName } from '../types';
+import { TooltipProps } from '../tooltip';
+import { Override } from '../overrides';
+export declare type TruncateWithTooltipProps = {
+    className?: ClassName;
+    tooltipClassName?: ClassName;
+    prefixEl?: React.ReactElement | null;
+    suffixEl?: React.ReactElement | null;
+    children: string;
+    overrides?: {
+        Tooltip?: Override<TooltipProps & Record<string, any>>;
+    };
+} & ({
+    maxLines: number;
+    maxWidth?: never;
+} | {
+    maxWidth: number;
+    maxLines?: never;
+});

package/esm/truncateWithTooltip/types.js

@@ -0,0 +1 @@
+export {};

package/esm/types.d.ts

@@ -1,18 +1,17 @@
 import { AllHTMLAttributes, ElementType } from 'react';
-import { Theme as BaseTheme } from 'baseui/themes';
-import { StandardEngine as StyletronStandardEngine, StyleObject as StyletronStyleObject } from 'styletron-react';
+import { StyleObject as StyletronStyleObject } from 'styletron-react';
+import { StandardEngine as StyletronStandardEngine, KeyframesObject as StyletronKeyframesObject } from 'styletron-standard';
 import { Direction, Theme, ThemeClassNames } from '@sprinklrjs/spaceweb-themes/types';
 export declare type StyleObject = StyletronStyleObject;
 export declare type StandardEngine = StyletronStandardEngine;
+export declare type KeyframesObject = StyletronKeyframesObject;
 /**
  * Theme-callback function (used to specify styles dynamically)
  *
  * TODO: Replace `any` for `unknown`, the change will cause several
  * components to fail.
  */
-export declare type StyleFn<P = any> = (utils: StyleUtils, props: {
-    $theme?: BaseTheme;
-} & P) => StyleObject | string | undefined;
+export declare type StyleFn<P = any> = (utils: StyleUtils, props: P) => StyleObject | string | undefined;
 declare type RecursiveArray<T> = Array<T | RecursiveArray<T>>;
 /**
  * CSS in JS object
@@ -59,11 +58,11 @@ export declare type Variant = 'primary' | 'secondary' | 'tertiary' | 'minimal';
 /**
  * Size Options
  */
-export declare type Size = 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare type Size = 'xxxxs' | 'xxxs' | 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 /**
  * Intent Options
  */
-export declare type Intent = 'default' | 'success' | 'warning' | 'error';
+export declare type Intent = 'default' | 'success' | 'warning' | 'error' | 'ai';
 /**
  * Gets Styletron's generated class names from `StyleArg`s
  */
@@ -76,6 +75,7 @@ export declare type Px2Rem = (px: number | string) => string;
  * `useStyle` return type
  */
 export declare type StyleUtils = ThemeContext & {
+    isRTL?: boolean;
     css: CSSFunc;
     getStyle: GetStyle;
     px2rem: Px2Rem;

package/esm/typography/Typography.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { TruncateWithTooltipProps } from '../truncateWithTooltip';
 declare const Typography: import("react").ForwardRefExoticComponent<Omit<import("react").AllHTMLAttributes<HTMLElement>, "style" | "className"> & {
     $as?: import("react").ElementType<any> | undefined;
     className?: import("..").Styles;
@@ -8,5 +9,10 @@ declare const Typography: import("react").ForwardRefExoticComponent<Omit<import(
 } & {
     variant?: import("./types").TypographyVariant | undefined;
     weight?: import("./types").FontWeight | undefined;
+    overrides?: {
+        TruncateWithTooltip?: import("../overrides").Override<TruncateWithTooltipProps & Record<string, any>> | undefined;
+    } | undefined;
+    maxLines?: number | undefined;
+    maxWidth?: number | undefined;
 } & import("react").RefAttributes<HTMLElement>>;
 export default Typography;

package/esm/typography/Typography.js

@@ -1,8 +1,11 @@
-import { __assign, __rest } from "tslib";
+import { __assign, __read, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef } from 'react';
+import _isNumber from 'lodash/isNumber';
 import { add$props } from '../helpers';
 import { StyledTypography } from './styled-components';
+import { TruncateWithTooltip as BaseTruncateWithTooltip } from '../truncateWithTooltip';
+import { useOverrides } from '../overrides';
 var defaultVariantToHTMLTagMapping = {
     h1: 'div',
     h2: 'div',
@@ -17,11 +20,26 @@ var defaultVariantToHTMLTagMapping = {
     bl1: 'p',
     bl2: 'p',
     bl3: 'p',
+    'body-8': 'span',
+    'body-10': 'span',
+    'body-12': 'span',
+    'body-13': 'span',
+    'body-14': 'span',
+    'body-16': 'span',
+    'display-18': 'h6',
+    'display-20': 'h5',
+    'display-24': 'h4',
+    'display-28': 'h3',
+    'display-32': 'h2',
+    'display-40': 'h1',
+    'display-42': 'h1',
 };
 var Typography = forwardRef(function (_a, ref) {
-    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'l1' : _b, weight = _a.weight, restProps = __rest(_a, ["$as", "variant", "weight"]);
+    var $as = _a.$as, _b = _a.variant, variant = _b === void 0 ? 'body-14' : _b, weight = _a.weight, overrides = _a.overrides, children = _a.children, maxLines = _a.maxLines, maxWidth = _a.maxWidth, restProps = __rest(_a, ["$as", "variant", "weight", "overrides", "children", "maxLines", "maxWidth"]);
     var sharedProps = add$props({ variant: variant, weight: weight });
-    return (_jsx(StyledTypography, __assign({ ref: ref, "data-spaceweb": "typography-".concat(variant), "$as": $as || defaultVariantToHTMLTagMapping[variant] }, restProps, sharedProps), void 0));
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.TruncateWithTooltip, BaseTruncateWithTooltip), 2), TruncateWithTooltip = _c[0], truncateWithTooltipProps = _c[1];
+    var mergedTruncateWithTooltipProps = __assign(__assign(__assign({}, truncateWithTooltipProps), (_isNumber(maxWidth) && { maxWidth: maxWidth })), (_isNumber(maxLines) && { maxLines: maxLines }));
+    return (_jsx(StyledTypography, __assign({ ref: ref, "data-spaceweb": "typography-".concat(variant), "$as": $as || defaultVariantToHTMLTagMapping[variant] }, restProps, sharedProps, { children: _isNumber(maxWidth) || _isNumber(maxLines) ? (_jsx(TruncateWithTooltip, __assign({}, mergedTruncateWithTooltipProps, { children: children }), void 0)) : (children) }), void 0));
 });
 Typography.displayName = 'Typography';
 export default Typography;

package/esm/typography/constants.d.ts

@@ -4,3 +4,59 @@ export declare const WEIGHT: Readonly<{
     semibold: number;
     bold: number;
 }>;
+export declare const DEFAULT_BODY_WEIGHT = 400;
+export declare const DEFAULT_DISPLAY_WEIGHT = 600;
+export declare const TYPOGRAPHY_VARIANT_MAP: {
+    'body-8': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-10': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-12': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-13': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-14': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'body-16': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-18': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-20': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-24': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-28': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-32': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-40': {
+        fontSize: string;
+        lineHeight: string;
+    };
+    'display-42': {
+        fontSize: string;
+        lineHeight: string;
+    };
+};

package/esm/typography/constants.js

@@ -4,3 +4,59 @@ export var WEIGHT = Object.freeze({
     semibold: 600,
     bold: 700,
 });
+export var DEFAULT_BODY_WEIGHT = 400;
+export var DEFAULT_DISPLAY_WEIGHT = 600;
+export var TYPOGRAPHY_VARIANT_MAP = {
+    'body-8': {
+        fontSize: '8px',
+        lineHeight: '10px',
+    },
+    'body-10': {
+        fontSize: '10px',
+        lineHeight: '12px',
+    },
+    'body-12': {
+        fontSize: '12px',
+        lineHeight: '15px',
+    },
+    'body-13': {
+        fontSize: '13px',
+        lineHeight: '16px',
+    },
+    'body-14': {
+        fontSize: '14px',
+        lineHeight: '18px',
+    },
+    'body-16': {
+        fontSize: '16px',
+        lineHeight: '20px',
+    },
+    'display-18': {
+        fontSize: '18px',
+        lineHeight: '24px',
+    },
+    'display-20': {
+        fontSize: '20px',
+        lineHeight: '26px',
+    },
+    'display-24': {
+        fontSize: '24px',
+        lineHeight: '34px',
+    },
+    'display-28': {
+        fontSize: '28px',
+        lineHeight: '34px',
+    },
+    'display-32': {
+        fontSize: '32px',
+        lineHeight: '38px',
+    },
+    'display-40': {
+        fontSize: '40px',
+        lineHeight: '46px',
+    },
+    'display-42': {
+        fontSize: '42px',
+        lineHeight: '48px',
+    },
+};

package/esm/typography/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Typography } from './Typography';
+export { TYPOGRAPHY_VARIANT_MAP } from './constants';
 export type { TypographyProps, FontWeight, TypographyVariant } from './types';

package/esm/typography/index.js

@@ -1 +1,2 @@
 export { default as Typography } from './Typography';
+export { TYPOGRAPHY_VARIANT_MAP } from './constants';

package/esm/typography/styled-components.js

@@ -1,10 +1,18 @@
 import { styled } from '../style';
-import { WEIGHT as WeightAlias } from './constants';
+import { WEIGHT as WeightAlias, TYPOGRAPHY_VARIANT_MAP, DEFAULT_BODY_WEIGHT, DEFAULT_DISPLAY_WEIGHT, } from './constants';
+var getTypographyWeight = function ($variant) {
+    return $variant.includes('body')
+        ? DEFAULT_BODY_WEIGHT
+        : $variant.includes('display')
+            ? DEFAULT_DISPLAY_WEIGHT
+            : WeightAlias.regular;
+};
 export var StyledTypography = styled('span', function (_a, _b) {
-    var theme = _a.theme;
+    var _c, _d;
+    var theme = _a.theme, classes = _a.classes;
     var $variant = _b.$variant, $weight = _b.$weight;
-    var variantStyles = theme.typography[$variant] || theme.typography.l3;
+    var variantStyles = (_d = (_c = TYPOGRAPHY_VARIANT_MAP[$variant]) !== null && _c !== void 0 ? _c : theme.typography[$variant]) !== null && _d !== void 0 ? _d : theme.typography['l1'];
     var fontSize = variantStyles.fontSize, lineHeight = variantStyles.lineHeight, variantFontWeight = variantStyles.fontWeight;
-    var fontWeight = $weight ? "".concat(WeightAlias[$weight]) : variantFontWeight;
+    var fontWeight = $weight ? "".concat(WeightAlias[$weight]) : variantFontWeight !== null && variantFontWeight !== void 0 ? variantFontWeight : getTypographyWeight($variant);
     return { fontSize: fontSize, lineHeight: lineHeight, fontWeight: fontWeight };
 });

package/esm/typography/types.d.ts

@@ -1,9 +1,15 @@
 import { PropsWithChildren } from 'react';
 import { SpacewebComponentProps } from '../types';
-export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4';
+import { Override } from '../overrides';
+import { TruncateWithTooltipProps } from '../truncateWithTooltip';
+export declare type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'h7' | 'bl1' | 'bl2' | 'bl3' | 'bs1' | 'bs2' | 'bs3' | 'l1' | 'l2' | 'l3' | 'l4' | 'body-8' | 'body-10' | 'body-12' | 'body-13' | 'body-14' | 'body-16' | 'display-18' | 'display-20' | 'display-24' | 'display-28' | 'display-32' | 'display-40' | 'display-42';
 export declare type FontWeight = 'regular' | 'medium' | 'semibold' | 'bold';
 export declare type TypographyProps = PropsWithChildren<SpacewebComponentProps> & {
-    /** variant of typography element */
     variant?: TypographyVariant;
     weight?: FontWeight;
+    overrides?: {
+        TruncateWithTooltip?: Override<TruncateWithTooltipProps & Record<string, any>>;
+    };
+    maxLines?: number;
+    maxWidth?: number;
 };

package/esm/utils/intlNumberFormatUtils/index.d.ts

@@ -0,0 +1,7 @@
+import { NumberVariant } from './types';
+export declare const getFormattedNumber: ({ value, locale, variant, numberOptions, }: {
+    value: number;
+    locale: string;
+    variant: NumberVariant;
+    numberOptions?: Intl.NumberFormatOptions | undefined;
+}) => string;

package/esm/utils/intlNumberFormatUtils/index.js

@@ -0,0 +1,38 @@
+import { __assign } from "tslib";
+import { NUMBER_VARIANTS } from './types';
+export var getFormattedNumber = function (_a) {
+    var value = _a.value, locale = _a.locale, variant = _a.variant, numberOptions = _a.numberOptions;
+    var absValue = Math.abs(value);
+    var betweenZeroAndOne = absValue > 0 && absValue < 1;
+    var maximumFractionDigits, notation;
+    switch (variant.type) {
+        case NUMBER_VARIANTS.EXPANDED_AUTO_FORMAT: {
+            var decimalDigits = betweenZeroAndOne ? 4 : 2;
+            maximumFractionDigits = decimalDigits;
+            notation = 'standard';
+            break;
+        }
+        case NUMBER_VARIANTS.EXPANDED_DECIMAL_FORMAT: {
+            maximumFractionDigits = variant.decimalDigits;
+            notation = 'standard';
+            break;
+        }
+        case NUMBER_VARIANTS.COMPACT_AUTO_FORMAT: {
+            var decimalDigits = betweenZeroAndOne ? 4 : 2;
+            maximumFractionDigits = decimalDigits;
+            notation = 'compact';
+            break;
+        }
+        case NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT: {
+            maximumFractionDigits = variant.decimalDigits;
+            notation = 'compact';
+            break;
+        }
+        default: {
+            break;
+        }
+    }
+    return Intl.NumberFormat(locale, __assign({ minimumFractionDigits: 0, maximumFractionDigits: maximumFractionDigits, 
+        // @ts-ignore -- yarn migration
+        notation: notation }, numberOptions)).format(value);
+};

package/esm/utils/intlNumberFormatUtils/types.d.ts

@@ -0,0 +1,21 @@
+export declare const NUMBER_VARIANTS: {
+    readonly EXPANDED_AUTO_FORMAT: "expandedAutoFormat";
+    readonly COMPACT_AUTO_FORMAT: "compactAutoFormat";
+    readonly EXPANDED_DECIMAL_FORMAT: "expandedDecimalFormat";
+    readonly COMPACT_DECIMAL_FORMAT: "compactDecimalFormat";
+};
+export declare type ExpandedAutoFormat = {
+    type: typeof NUMBER_VARIANTS.EXPANDED_AUTO_FORMAT;
+};
+export declare type CompactAutoFormat = {
+    type: typeof NUMBER_VARIANTS.COMPACT_AUTO_FORMAT;
+};
+export declare type ExpandedDecimalFormat = {
+    type: typeof NUMBER_VARIANTS.EXPANDED_DECIMAL_FORMAT;
+    decimalDigits: number;
+};
+export declare type CompactDecimalFormat = {
+    type: typeof NUMBER_VARIANTS.COMPACT_DECIMAL_FORMAT;
+    decimalDigits: number;
+};
+export declare type NumberVariant = ExpandedAutoFormat | CompactAutoFormat | ExpandedDecimalFormat | CompactDecimalFormat;

package/esm/utils/intlNumberFormatUtils/types.js

@@ -0,0 +1,6 @@
+export var NUMBER_VARIANTS = {
+    EXPANDED_AUTO_FORMAT: 'expandedAutoFormat',
+    COMPACT_AUTO_FORMAT: 'compactAutoFormat',
+    EXPANDED_DECIMAL_FORMAT: 'expandedDecimalFormat',
+    COMPACT_DECIMAL_FORMAT: 'compactDecimalFormat',
+};

package/esm/video/Video.js

@@ -23,16 +23,19 @@ var Video = forwardRef(function (props, ref) {
     }, overrides || {});
     var _c = __read(useOverrides(mergedOverrides.Root, StyledRoot), 2), Root = _c[0], rootProps = _c[1];
     var _d = __read(useOverrides(mergedOverrides.Video, StyledVideo), 2), Vid = _d[0], videoProps = _d[1];
+    var _e = __read(useOverrides(mergedOverrides.PlayButton, Play), 2), PlayButton = _e[0], playButtonProps = _e[1];
+    var _f = __read(useOverrides(mergedOverrides.VideoDisabledIcon, VideoDisabled), 2), VideoDisabledIcon = _f[0], VideoDisabledIconProps = _f[1];
+    var _g = __read(useOverrides(mergedOverrides.PosterImage, Image), 2), PosterImage = _g[0], posterImageProps = _g[1];
     var onPlay = videoProps.onPlay;
     var onClickPlay = useCallback(function (event) {
         startPlay(true);
         if (_isFunction(onPlay))
             onPlay(event);
     }, [onPlay]);
-    return played || !videoProps.poster ? (_jsx(Root, __assign({ "data-spaceweb": "video" }, rootProps, { children: _jsx(Vid, __assign({ ref: ref, "data-testid": "video" }, videoProps, { autoPlay: played }, { children: children }), void 0) }), void 0)) : (_jsxs(Root, __assign({ "data-spaceweb": "video" }, rootProps, { className: "flex items-center relative justify-center ".concat(classNames({ 'cursor-pointer': !videoProps.disabled })) }, { children: [_jsx(Image, __assign({}, videoProps, { src: videoProps.poster, alt: "Thumbnail", overrides: {
+    return played || !videoProps.poster ? (_jsx(Root, __assign({ "data-spaceweb": "video" }, rootProps, { children: _jsx(Vid, __assign({ ref: ref, "data-testid": "video" }, videoProps, { autoPlay: played }, { children: children }), void 0) }), void 0)) : (_jsxs(Root, __assign({ "data-spaceweb": "video" }, rootProps, { className: "flex items-center relative justify-center ".concat(classNames({ 'cursor-pointer': !videoProps.disabled })) }, { children: [_jsx(PosterImage, __assign({}, videoProps, { src: videoProps.poster, alt: "Thumbnail", overrides: {
                     Image: { style: videoProps.$style },
                     Root: { style: rootProps.$style },
-                }, onClick: videoProps.disabled ? _noop : onClickPlay }), void 0), _jsx("div", __assign({ className: css('absolute') }, { children: videoProps.disabled ? (_jsx(VideoDisabled, { className: "w-8 h-8 cursor-not-allowed spr-icon-05" }, void 0)) : (_jsx(Play, { className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, void 0)) }), void 0)] }), void 0));
+                }, onClick: videoProps.disabled ? _noop : onClickPlay }, posterImageProps), void 0), _jsx("div", __assign({ className: css('absolute') }, { children: videoProps.disabled ? (_jsx(VideoDisabledIcon, __assign({ className: "w-8 h-8 cursor-not-allowed spr-icon-05" }, VideoDisabledIconProps), void 0)) : (_jsx(PlayButton, __assign({ className: "w-8 h-8 spr-icon-05", onClick: onClickPlay }, playButtonProps), void 0)) }), void 0)] }), void 0));
 });
 Video.displayName = 'Video';
 export default Video;

package/esm/video/types.d.ts

@@ -5,6 +5,9 @@ import { SpacewebComponentProps } from '../types';
 export declare type VideoOverrides = {
     Root?: Override<{}>;
     Video?: Override<{}>;
+    PlayButton?: Override<{}>;
+    PosterImage?: Override<{}>;
+    VideoDisabledIcon?: Override<{}>;
 };
 export declare type VideoProps = SpacewebComponentProps<React.VideoHTMLAttributes<HTMLVideoElement>> & {
     children?: ReactChildren;

package/form-control/context.d.ts

@@ -1,22 +1,15 @@
 /// <reference types="react" />
 import { Intent } from '../types';
-export declare const formControlContext: import("react").Context<{
-    intent?: Intent | undefined;
-}>;
-export declare const FormControlProvider: import("react").Provider<{
-    intent?: Intent | undefined;
-}>;
-export declare const FormControlConsumer: import("react").Consumer<{
-    intent?: Intent | undefined;
-}>;
-export declare const useFormControl: () => {
+declare type FormControlContextValueType = {
     intent?: Intent;
 };
+export declare const FormControlProvider: import("react").Provider<FormControlContextValueType>;
+export declare const FormControlConsumer: import("react").Consumer<FormControlContextValueType>;
+export declare const useFormControl: () => FormControlContextValueType;
 /**
  * @param props
  * uses form values to be passed using context to child components
  * this hook can be scaled to incorporate multiple props
  */
-export declare const useContextualFormProps: <T extends {
-    intent?: Intent;
-}>(props: T) => T;
+export declare const useContextualFormProps: <T extends FormControlContextValueType>(props: T, defaultProps?: FormControlContextValueType) => T;
+export {};

package/form-control/context.js

@@ -1,23 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useContextualFormProps = exports.useFormControl = exports.FormControlConsumer = exports.FormControlProvider = exports.formControlContext = void 0;
+exports.useContextualFormProps = exports.useFormControl = exports.FormControlConsumer = exports.FormControlProvider = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
-exports.formControlContext = (0, react_1.createContext)({ intent: 'default' });
-exports.formControlContext.displayName = 'FormControlContext';
-exports.FormControlProvider = exports.formControlContext.Provider;
-exports.FormControlConsumer = exports.formControlContext.Consumer;
-var useFormControl = function () { return (0, react_1.useContext)(exports.formControlContext); };
+var FormControlContext = (0, react_1.createContext)({ intent: 'default' });
+FormControlContext.displayName = 'FormControlContext';
+exports.FormControlProvider = FormControlContext.Provider;
+exports.FormControlConsumer = FormControlContext.Consumer;
+var useFormControl = function () { return (0, react_1.useContext)(FormControlContext); };
 exports.useFormControl = useFormControl;
 /**
  * @param props
  * uses form values to be passed using context to child components
  * this hook can be scaled to incorporate multiple props
  */
-var useContextualFormProps = function (props) {
-    var _a;
-    var contextProps = (0, exports.useFormControl)();
-    var intent = (_a = props.intent) !== null && _a !== void 0 ? _a : contextProps.intent;
+var useContextualFormProps = function (props, defaultProps) {
+    var _a, _b;
+    if (defaultProps === void 0) { defaultProps = {}; }
+    var formControlValue = (0, exports.useFormControl)();
+    var intent = (_b = (_a = props.intent) !== null && _a !== void 0 ? _a : formControlValue.intent) !== null && _b !== void 0 ? _b : defaultProps.intent;
     return (0, tslib_1.__assign)((0, tslib_1.__assign)({}, props), { intent: intent });
 };
 exports.useContextualFormProps = useContextualFormProps;

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

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { FormControlProps } from './types';
-declare const FormControl: ({ overrides, label, caption, disabled, error, positive, htmlFor, children, intent, required, layout, $as, className, subText, subTextAsIcon, }: FormControlProps) => React.ReactElement;
+declare const FormControl: React.ForwardRefExoticComponent<FormControlProps & React.RefAttributes<HTMLElement>>;
 export { FormControl };

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;