@sprinklrjs/spaceweb 12.33.2 → 14.11.3

package/esm/button/Button.js

@@ -1,70 +1,108 @@
 import { __assign, __read, __rest } from "tslib";
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from 'react';
-import _pick from 'lodash/pick';
-import _omit from 'lodash/omit';
-import { Button as BaseUIButton } from '../baseui/button';
-import { mergeOverrides, useOverrides } from '../overrides';
-import { getButtonStyles, StyledLoadingSpinnerContainer, getLoaderMajorColor, getLoaderMinorColor, } from './styled-components';
-import adaptBaseButtonProps from './basewebAdapter';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, forwardRef, useState, } from 'react';
+import { getBorderRadiiStyles, getButtonStyleAtomic, getButtonStyles, getLoadingSpinnerClasses, getLoadingSpinnerStyles, StyledLoadingSpinnerContainer, } from './styled-components';
+import ButtonEnhancers from './button-enhancers';
+import DropdownEnhancer from './DropdownEnhancer';
+import { useOverrides } from '../overrides';
+import { forkBlur, forkFocus, isFocusVisible as isFocusVisibleFunc } from '../baseui/utils/focusVisible';
+import { StyledBaseButton } from '../base-button';
+import { Box } from '../box';
+import { StyledClipLoader } from '../loader/styled-component';
+import { useStyle } from '../style';
+import DisabledTooltipContainer from '../tooltip/disabled-tooltip-container';
+import DefaultStatefulTooltip from '../tooltip/stateful-tooltip';
+import { getDefaultSize } from '../helpers/themeHelpers';
 import { add$props } from '../helpers';
-import { StyledBaseButton as BaseButton } from '../base-button';
-import { StatefulTooltip as DefaultStatefulTooltip, DisabledTooltipContainer } from '../tooltip';
 import { useContextualFormProps } from '../form-control/context';
-import useStyle from '../style/useStyle';
-import { getDefaultSize } from '../helpers/themeHelpers';
-import { StyledClipLoader } from '../loader/styled-component';
-BaseUIButton.displayName = 'BaseUIButton';
-var Button = React.forwardRef(function (props, ref) {
-    var buttonRef = ref;
-    var _a = useContextualFormProps(props), _b = _a.variant, variant = _b === void 0 ? 'primary' : _b, _c = _a.intent, intent = _c === void 0 ? 'default' : _c, _size = _a.size, fullWidth = _a.fullWidth, className = _a.className, style = _a.style, overrides = _a.overrides, tooltipContent = _a.tooltipContent, animate = _a.animate, restProps = __rest(_a, ["variant", "intent", "size", "fullWidth", "className", "style", "overrides", "tooltipContent", "animate"]);
-    var isSelected = restProps.isSelected;
-    var _d = useStyle(), getStyle = _d.getStyle, isRTL = _d.isRTL, theme = _d.theme;
+import _omit from 'lodash/omit';
+import { getPaddingStyleVariables } from './helpers';
+var Button = forwardRef(function (props, ref) {
+    var _a = props.overrides, overrides = _a === void 0 ? {} : _a, className = props.className, style = props.style, _size = props.size, shape = props.shape, _b = props.variant, variant = _b === void 0 ? 'primary' : _b, _c = props.isLoading, isLoading = _c === void 0 ? false : _c, _intent = props.intent, isSelected = props.isSelected, children = props.children, tooltipContent = props.tooltipContent, _d = props.disabled, disabled = _d === void 0 ? false : _d, fullWidth = props.fullWidth, _e = props.animate, animate = _e === void 0 ? false : _e, dropdownContent = props.dropdownContent, onClick = props.onClick, startEnhancer = props.startEnhancer, endEnhancer = props.endEnhancer, href = props.href, type = props.type, restProps = __rest(props, ["overrides", "className", "style", "size", "shape", "variant", "isLoading", "intent", "isSelected", "children", "tooltipContent", "disabled", "fullWidth", "animate", "dropdownContent", "onClick", "startEnhancer", "endEnhancer", "href", "type"]);
+    var enhancerProps = _omit(props, ['className', 'style']);
+    var _f = __read(useState(false), 2), isFocusVisible = _f[0], setIsFocusVisible = _f[1];
+    var styleUtils = useStyle();
+    var theme = styleUtils.theme;
     var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
-    var buttonOverrides = React.useMemo(function () { return _omit(overrides, 'StatefulTooltip'); }, [overrides]);
-    var adaptedProps = adaptBaseButtonProps(__assign(__assign({}, restProps), { variant: variant, overrides: buttonOverrides }));
-    var convertedOverrides = mergeOverrides(adaptedProps.overrides || {});
-    var mergedOverrides = mergeOverrides({
-        BaseButton: {
-            props: __assign({ className: [getButtonStyles, className, style] }, add$props({ variant: variant, intent: intent, size: size, fullWidth: fullWidth, animate: animate })),
-            component: BaseButton, //using StyledBaseButton instead of BaseButton as all the handling is done by baseui's Button.
-        },
-        LoadingSpinnerContainer: {
-            component: StyledLoadingSpinnerContainer,
-            props: {
-                $size: size,
+    var intent = useContextualFormProps({ intent: _intent }).intent;
+    var sharedProps = add$props({
+        variant: variant,
+        intent: intent,
+        size: size,
+        fullWidth: fullWidth,
+        animate: animate,
+        disabled: disabled,
+        isFocusVisible: isFocusVisible,
+        isSelected: isSelected,
+        shape: shape,
+        isLoading: isLoading,
+    });
+    var internalOnClick = useCallback(function (event) {
+        if (isLoading) {
+            event.preventDefault();
+            return;
+        }
+        onClick && (onClick === null || onClick === void 0 ? void 0 : onClick(event));
+    }, [isLoading, onClick]);
+    var handleFocus = useCallback(function (event) {
+        if (isFocusVisibleFunc(event)) {
+            setIsFocusVisible(true);
+        }
+    }, []);
+    var handleBlur = useCallback(function (event) {
+        if (isFocusVisible) {
+            setIsFocusVisible(false);
+        }
+    }, [isFocusVisible]);
+    var _g = __read(useOverrides(overrides.BaseButton || overrides.Root, StyledBaseButton), 2), BaseButton = _g[0], _h = _g[1], baseButtonClasses = _h.$className, baseButtonProps = __rest(_h, ["$className"]);
+    var _j = __read(useOverrides(overrides.LoadingSpinner, StyledClipLoader), 2), LoadingSpinner = _j[0], _k = _j[1], loadingSpinnerClasses = _k.$className, loadingSpinnerProps = __rest(_k, ["$className"]);
+    var _l = __read(useOverrides(overrides.LoadingSpinnerContainer, StyledLoadingSpinnerContainer), 2), LoadingSpinnerContainer = _l[0], loadingSpinnerContainerProps = _l[1];
+    var ariaLoadingElements = isLoading
+        ? {
+            'aria-label': typeof children === 'string' ? "loading ".concat(children) : 'content is loading',
+            'aria-busy': 'true',
+            'aria-live': 'polite',
+        }
+        : {};
+    var _m = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultStatefulTooltip), 2), StatefulTooltip = _m[0], statefulTooltipProps = _m[1];
+    var buttonBorderRadius = getBorderRadiiStyles(styleUtils, sharedProps);
+    var isAnchor = Boolean(href);
+    var buttonType = isAnchor ? undefined : type || 'button';
+    var buttonEl = (_jsx(BaseButton, __assign({ "data-spaceweb": "button", "$as": isAnchor ? 'a' : undefined, type: buttonType, href: href, disabled: disabled, "data-testid": "button", ref: ref }, ariaLoadingElements, sharedProps, restProps, baseButtonProps, { style: [
+            { '--sw-bg-color': variant === 'primary' && intent === 'default' ? theme.spr.interactiveFocus : '' },
+            { '--sw-bg-color-active': variant === 'primary' && intent === 'default' ? theme.spr.interactiveFocus : '' },
+            function (_, _a) {
+                var $isIconButton = _a.$isIconButton, $isRenderedInsideButtonGroup = _a.$isRenderedInsideButtonGroup;
+                return !$isIconButton && !$isRenderedInsideButtonGroup
+                    ? __assign({ '--sw-before-border-radius': buttonBorderRadius, '--sw-after-border-radius': "calc(".concat(buttonBorderRadius, " - 1px)"), '--sw-animation-play-state': animate ? 'running' : 'paused', '--sw-before-left': 'auto', '--sw-ai-button-background': theme.ai.border01.background, '--sw-ai-button-hover-background': theme.ai.border01.background }, (animate ? { '--sw-ai-animated-background-size': '300% 300%' } : {})) : {};
             },
-        },
-        LoadingSpinner: {
-            component: StyledClipLoader,
-            style: [
-                __assign(__assign(__assign({ height: '100%', width: '100%' }, getLoaderMajorColor({ theme: theme }, { variant: variant })), getLoaderMinorColor({ theme: theme }, { variant: variant })), { animationName: {
-                        '0%': {
-                            transform: 'rotate(0deg) scale(1)',
-                        },
-                        '50%': {
-                            transform: 'rotate(180deg) scale(1)',
-                        },
-                        '100%': {
-                            transform: 'rotate(360deg) scale(1)',
-                        },
-                    } }),
-                'border-2',
-            ],
-        },
-        StartEnhancer: {
-            style: 'mr-1',
-        },
-        EndEnhancer: {
-            style: 'ml-1',
-        },
-    }, _pick(adaptedProps.overrides, 'BaseButton'));
-    var _e = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, DefaultStatefulTooltip), 2), StatefulTooltip = _e[0], statefulTooltipProps = _e[1];
-    var buttonEl = (_jsx(BaseUIButton, __assign({ "data-spaceweb": "button", "data-testid": "button" }, adaptedProps, { onClick: adaptedProps.onClick, overrides: __assign(__assign({}, convertedOverrides), mergedOverrides), ref: buttonRef }), void 0));
-    if (adaptedProps.disabled && tooltipContent) {
-        return (_jsx(DisabledTooltipContainer, __assign({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl }), void 0));
+            getPaddingStyleVariables,
+            style,
+            baseButtonProps === null || baseButtonProps === void 0 ? void 0 : baseButtonProps.style,
+        ], className: [
+            getButtonStyleAtomic,
+            getButtonStyles,
+            baseButtonClasses,
+            className,
+            baseButtonProps === null || baseButtonProps === void 0 ? void 0 : baseButtonProps.className,
+            dropdownContent ? 'rounded-r-0' : '',
+        ], onClick: internalOnClick, onFocus: forkFocus(__assign(__assign({}, restProps), baseButtonProps), handleFocus), onBlur: forkBlur(__assign(__assign({}, restProps), baseButtonProps), handleBlur) }, { children: isLoading ? (_jsxs(_Fragment, { children: [_jsx(ButtonEnhancers, __assign({ sharedProps: sharedProps }, enhancerProps)), _jsx(LoadingSpinnerContainer, __assign({}, sharedProps, loadingSpinnerContainerProps, { children: _jsx(LoadingSpinner, __assign({}, sharedProps, loadingSpinnerProps, { style: [getLoadingSpinnerStyles, loadingSpinnerProps === null || loadingSpinnerProps === void 0 ? void 0 : loadingSpinnerProps.style], className: [getLoadingSpinnerClasses, loadingSpinnerClasses] })) }))] })) : (_jsx(ButtonEnhancers, __assign({ sharedProps: sharedProps }, enhancerProps))) })));
+    var tooltipWrappedButtonEl = (function () {
+        if (disabled && tooltipContent) {
+            return (_jsx(DisabledTooltipContainer, __assign({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl })));
+        }
+        if (tooltipContent) {
+            return (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl })));
+        }
+        return buttonEl;
+    })();
+    if (dropdownContent) {
+        return (_jsxs(Box, __assign({ className: fullWidth ? 'flex w-full' : 'inline-flex', role: "group" }, { children: [tooltipWrappedButtonEl, _jsx(DropdownEnhancer, { dropdownContent: dropdownContent, overrides: overrides, 
+                    // since our DropdownEnhancer is a button, we need to remove the fullWidth prop
+                    sharedProps: __assign(__assign({}, sharedProps), { $fullWidth: false }) })] })));
     }
-    return tooltipContent ? (_jsx(StatefulTooltip, __assign({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl }), void 0)) : (buttonEl);
+    return tooltipWrappedButtonEl;
 });
 Button.displayName = 'Button';
+Button.__standard = 'Component';
 export default Button;

package/esm/button/CitationButton/CitationButton.d.ts

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

package/esm/button/CitationButton/CitationButton.js

@@ -0,0 +1,11 @@
+import { __assign, __rest } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import Button from '../Button';
+var CitationButton = forwardRef(function (props, ref) {
+    var _a = props.variant, variant = _a === void 0 ? 'secondary' : _a, _b = props.shape, shape = _b === void 0 ? 'square' : _b, className = props.className, restProps = __rest(props, ["variant", "shape", "className"]);
+    return (_jsx(Button, __assign({ variant: variant, shape: shape }, restProps, { size: "small", ref: ref, className: ['text-12 font-600 rounded-4 h-5 px-2 hover:spr-bg-quaternary', className] })));
+});
+CitationButton.displayName = 'CitationButton';
+CitationButton.__standard = 'Component';
+export default CitationButton;

package/esm/button/CitationButton/index.d.ts

@@ -0,0 +1,3 @@
+import CitationButton from './CitationButton';
+export default CitationButton;
+export * from './types';

package/esm/button/CitationButton/index.js

@@ -0,0 +1,3 @@
+import CitationButton from './CitationButton';
+export default CitationButton;
+export * from './types';

package/esm/button/CitationButton/types.d.ts

@@ -0,0 +1,3 @@
+import { ButtonProps, ButtonSharedProps } from '../types';
+export type CitationButtonProps = Omit<ButtonProps, 'size' | 'intent'>;
+export type SharedProps = Omit<ButtonSharedProps, '$size'>;

package/esm/button/DropdownEnhancer.d.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { ButtonProps, ButtonSharedProps } from './types';
+import { StatefulPopoverProps } from '../popover/types';
+type DropdownEnhancerProps = {
+    dropdownContent: StatefulPopoverProps['content'];
+    overrides?: ButtonProps['overrides'];
+    sharedProps: ButtonSharedProps;
+};
+/**
+ * DropdownEnhancer component wraps a dropdown trigger button with a popover to create a dropdown menu.
+ * It combines the DropdownTrigger component with a StatefulPopover to handle the dropdown functionality.
+ * @param {StatefulPopoverProps['content']} dropdownContent - Dropdown content to display in the popover
+ * @param {Object} overrides - Overrides for customizing the dropdown popover and trigger button components
+ * @param {ButtonSharedProps} sharedProps - Shared button properties including variant, intent, size, shape, and disabled state
+ */
+declare const DropdownEnhancer: ({ dropdownContent, overrides, sharedProps }: DropdownEnhancerProps) => ReactElement;
+export default DropdownEnhancer;

package/esm/button/DropdownEnhancer.js

@@ -0,0 +1,45 @@
+import { __assign, __read } from "tslib";
+import { jsx as _jsx } from "react/jsx-runtime";
+// libs
+import { forwardRef } from 'react';
+// components
+import { StatefulPopover } from '../popover';
+import { StyledTriggerButton } from './styled-components';
+import ChevronDown from '../icon/components/chevron-down';
+// hooks
+import { useOverrides } from '../overrides';
+import { getDropdownBorderRadius, getDropdownIconSize } from './helpers';
+/**
+ * DropdownTrigger component renders a button with a chevron icon that triggers a dropdownContent menu.
+ * @param {Function} onClick - Click handler for the trigger button
+ * @param {ButtonSharedProps} sharedProps - Shared button properties including variant, intent, size, shape, and disabled state
+ * @param {boolean} isOpen - Whether the dropdownContent is currently open, used for aria-expanded attribute
+ * @param {Object} overrides - Overrides for customizing the trigger button component
+ */
+var DropdownTrigger = forwardRef(function (_a, ref) {
+    var onClick = _a.onClick, sharedProps = _a.sharedProps, isOpen = _a.isOpen, _b = _a.overrides, overrides = _b === void 0 ? {} : _b;
+    var $variant = sharedProps.$variant, $disabled = sharedProps.$disabled, $size = sharedProps.$size, $shape = sharedProps.$shape;
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DropdownTrigger, StyledTriggerButton), 2), TriggerButton = _c[0], triggerButtonProps = _c[1];
+    return (_jsx(TriggerButton, __assign({ ref: ref, "data-spaceweb": "button", "data-testid": "dropdown-trigger", type: "button", onClick: onClick, "aria-expanded": isOpen, "aria-haspopup": "true", disabled: $disabled }, sharedProps, triggerButtonProps, { className: [
+            getDropdownBorderRadius({ $shape: $shape, $size: $size }),
+            $variant === 'primary' ? 'ml-px' : 'border-l-0',
+            'min-w-0',
+            triggerButtonProps === null || triggerButtonProps === void 0 ? void 0 : triggerButtonProps.className,
+        ] }, { children: _jsx(ChevronDown, { size: getDropdownIconSize($size) }) })));
+});
+/**
+ * DropdownEnhancer component wraps a dropdown trigger button with a popover to create a dropdown menu.
+ * It combines the DropdownTrigger component with a StatefulPopover to handle the dropdown functionality.
+ * @param {StatefulPopoverProps['content']} dropdownContent - Dropdown content to display in the popover
+ * @param {Object} overrides - Overrides for customizing the dropdown popover and trigger button components
+ * @param {ButtonSharedProps} sharedProps - Shared button properties including variant, intent, size, shape, and disabled state
+ */
+var DropdownEnhancer = function (_a) {
+    var dropdownContent = _a.dropdownContent, _b = _a.overrides, overrides = _b === void 0 ? {} : _b, sharedProps = _a.sharedProps;
+    var _c = __read(useOverrides(overrides === null || overrides === void 0 ? void 0 : overrides.DropdownPopover, StatefulPopover), 2), DropdownPopover = _c[0], dropdownPopoverProps = _c[1];
+    return (_jsx(DropdownPopover, __assign({ showArrow: false, placement: "bottom" }, dropdownPopoverProps, { content: dropdownContent }, { children: function (_a) {
+            var isOpen = _a.isOpen, onClick = _a.onClick;
+            return (_jsx(DropdownTrigger, { sharedProps: sharedProps, isOpen: isOpen, onClick: onClick, overrides: overrides }));
+        } })));
+};
+export default DropdownEnhancer;

package/esm/button/IconButton/IconButton.js

@@ -1,29 +1,54 @@
 import { __assign, __rest } from "tslib";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { forwardRef, Children } from 'react';
+import { forwardRef, Children, useMemo } from 'react';
 import { mergeOverrides } from '../../overrides';
 import { useStyle } from '../../style';
 import Button from '../Button';
-import { iconButtonStyles, renderIconButtonChild } from './styled-components';
+import { getBorderRadiiStyles, iconButtonStyles, renderIconButtonChild } from './styled-components';
 import { getDefaultSize } from '../../helpers/themeHelpers';
 var IconButton = forwardRef(function (props, ref) {
-    var theme = useStyle().theme;
-    var bordered = props.bordered, _size = props.size, className = props.className, style = props.style, _a = props.variant, variant = _a === void 0 ? 'minimal' : _a, _b = props.shape, shape = _b === void 0 ? 'round' : _b, buttonProps = __rest(props, ["bordered", "size", "className", "style", "variant", "shape"]);
+    var styleUtils = useStyle();
+    var theme = styleUtils.theme;
+    var bordered = props.bordered, _size = props.size, _a = props.variant, variant = _a === void 0 ? 'secondary' : _a, _b = props.shape, shape = _b === void 0 ? 'round' : _b, buttonProps = __rest(props, ["bordered", "size", "variant", "shape"]);
     var size = _size !== null && _size !== void 0 ? _size : getDefaultSize(theme);
-    var overrides = mergeOverrides({
-        BaseButton: {
-            style: [iconButtonStyles, className, style],
-            props: {
-                $bordered: bordered,
-                $size: size,
-                $isIconButton: true,
-                $intent: props.intent,
-                $variant: variant,
+    var iconButtonBorderRadius = getBorderRadiiStyles(styleUtils, { $size: size, $shape: shape });
+    var overrides = useMemo(function () {
+        var _a;
+        return mergeOverrides({
+            BaseButton: {
+                className: iconButtonStyles,
+                style: __assign({ 
+                    //@ts-ignore -- CSS variable declaration
+                    '--sw-before-border-radius': iconButtonBorderRadius, '--sw-after-border-radius': "calc(".concat(iconButtonBorderRadius, " - 1px)"), '--sw-animation-play-state': props.animate ? 'running' : 'paused', '--sw-before-left': 'auto', '--sw-ai-button-background': theme.ai.border01.background, '--sw-ai-button-hover-background': theme.ai.border01.background }, (props.animate ? { '--sw-ai-animated-background-size': '300% 300%' } : {})),
+                props: {
+                    $bordered: bordered,
+                    $size: size,
+                    $isIconButton: true,
+                    $intent: (_a = props.intent) !== null && _a !== void 0 ? _a : 'default',
+                    $variant: variant,
+                },
             },
-        },
-    }, buttonProps.overrides);
+            StatefulTooltip: {
+                props: __assign({}, (!buttonProps['aria-label']
+                    ? {
+                        // setting accessibility type none so that popover doesn't add aria-describedby to the anchor
+                        accessibilityType: 'none',
+                        overrides: {
+                            Body: {
+                                // manually setting role since accessibility type is set to none
+                                props: {
+                                    role: 'tooltip',
+                                },
+                            },
+                        },
+                    }
+                    : {})),
+            },
+        }, buttonProps.overrides);
+    }, [bordered, buttonProps, iconButtonBorderRadius, props.animate, props.intent, size, theme.ai.border01, variant]);
     var ariaLabel = typeof buttonProps.tooltipContent === 'string' && !buttonProps.isLoading ? buttonProps.tooltipContent : undefined;
-    return (_jsx(Button, __assign({ variant: variant, shape: shape }, (ariaLabel ? { 'aria-label': ariaLabel } : {}), buttonProps, { overrides: overrides, ref: ref }, { children: Children.map(props.children, renderIconButtonChild.bind(null, theme, size)) }), void 0));
+    return (_jsx(Button, __assign({ variant: variant, shape: shape }, (ariaLabel ? { 'aria-label': ariaLabel } : {}), buttonProps, { overrides: overrides, ref: ref }, { children: Children.map(props.children, renderIconButtonChild.bind(null, theme, size)) })));
 });
 IconButton.displayName = 'IconButton';
+IconButton.__standard = 'Component';
 export default IconButton;

package/esm/button/IconButton/styled-components.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { IconProps } from '../../icon';
-import { Styles } from '../../types';
-export declare const getBorderRadiiStyles: (utils: any, props: any) => import("styletron-standard").StyleObject | undefined;
-export declare const iconButtonStyles: Styles;
+import { ClassName } from '../../types';
+export declare const getBorderRadiiStyles: (utils: any, props: any) => string;
+export declare const iconButtonStyles: ClassName;
 export declare const renderIconButtonChild: (theme: any, size: any, child: React.ReactElement<IconProps>) => React.ReactElement<IconProps, string | React.JSXElementConstructor<any>> | null;

package/esm/button/IconButton/styled-components.js

@@ -1,105 +1,165 @@
+import { __assign } from "tslib";
 import * as React from 'react';
-import { getComponentSizeTheme } from '../../helpers/themeHelpers';
-import { borderRadius, padding } from '../../helpers/longHandHelpers';
-import { createButtonStyles, getStylesWithAnimatedBorder } from '../styled-components';
+import { getComponentTheme, getComponentSizeTheme } from '../../helpers/themeHelpers';
+import { borderRadius } from '../../helpers/longHandHelpers';
+import { createButtonStyles, createButtonStylesAtomic } from '../helpers';
+import _omit from 'lodash/omit';
 var SHAPE_VS_THEME_KEY = {
     round: 'shapeRound',
     square: 'shapeSquare',
 };
-var getButtonShapeThemeKey = function (shape) { var _a; return (_a = SHAPE_VS_THEME_KEY[shape]) !== null && _a !== void 0 ? _a : SHAPE_VS_THEME_KEY.round; };
+var borderRadiusMap = {
+    xxxxs: '3px',
+    small: '4px',
+    xxxs: '5px',
+    xxs: '6px',
+    xs: '7px',
+    sm: '8px',
+    md: '8px',
+    lg: '8px',
+    medium: '8px',
+    large: '8px',
+};
 var getButtonSizeTheme = function (theme, size) { return getComponentSizeTheme(theme, 'iconButton', size, 'md'); };
-var getDimensions = function (_a, _b) {
+var getOverrideStyles = function (_a, props) {
+    var _b, _c, _d, _e;
     var theme = _a.theme, px2rem = _a.px2rem;
-    var $size = _b.$size;
-    var size = getButtonSizeTheme(theme, $size).buttonSize;
-    return { height: px2rem(size), width: px2rem(size) };
+    var $size = props.$size, _f = props.$shape, $shape = _f === void 0 ? 'default' : _f, $bordered = props.$bordered, $intent = props.$intent;
+    var iconButtonTheme = getComponentTheme(theme, 'iconButton');
+    var iconButtonSizeTheme = getButtonSizeTheme(theme, $size);
+    var overrideBorderRadius = (_b = iconButtonSizeTheme === null || iconButtonSizeTheme === void 0 ? void 0 : iconButtonSizeTheme.squareBorderRadius) !== null && _b !== void 0 ? _b : (_c = iconButtonTheme === null || iconButtonTheme === void 0 ? void 0 : iconButtonTheme.shapeSquare) === null || _c === void 0 ? void 0 : _c.borderRadius;
+    var overrideStyleObj = [];
+    if (iconButtonTheme === null || iconButtonTheme === void 0 ? void 0 : iconButtonTheme.minWidth) {
+        overrideStyleObj.push({ minWidth: (_d = theme === null || theme === void 0 ? void 0 : theme.iconButton) === null || _d === void 0 ? void 0 : _d.minWidth });
+    }
+    if (overrideBorderRadius && $shape === 'square') {
+        overrideStyleObj.push(borderRadius(overrideBorderRadius));
+    }
+    if (iconButtonSizeTheme === null || iconButtonSizeTheme === void 0 ? void 0 : iconButtonSizeTheme.buttonSize) {
+        overrideStyleObj.push({
+            height: px2rem(iconButtonSizeTheme.buttonSize),
+            width: px2rem(iconButtonSizeTheme.buttonSize),
+        });
+    }
+    var shapeKey = $bordered ? "".concat(SHAPE_VS_THEME_KEY[$shape], "Bordered") : SHAPE_VS_THEME_KEY[$shape];
+    var defaultShapeKey = SHAPE_VS_THEME_KEY[$shape];
+    var iconButtonShapeTheme = iconButtonTheme === null || iconButtonTheme === void 0 ? void 0 : iconButtonTheme[shapeKey];
+    var defaultIconButtonShapeTheme = (_e = iconButtonTheme === null || iconButtonTheme === void 0 ? void 0 : iconButtonTheme[defaultShapeKey]) !== null && _e !== void 0 ? _e : {};
+    if ($intent === 'default' && iconButtonShapeTheme) {
+        var mergedIconButtonShapeTheme = __assign(__assign({}, ($shape === 'square' ? _omit(defaultIconButtonShapeTheme, 'borderRadius') : defaultIconButtonShapeTheme)), iconButtonShapeTheme);
+        overrideStyleObj.push(createButtonStyles(mergedIconButtonShapeTheme, props));
+    }
+    return overrideStyleObj;
+};
+var getSizeClass = function (_, _a) {
+    var $size = _a.$size;
+    switch ($size) {
+        case 'xxxxs':
+            return 'w-4 h-4';
+        case 'xxxs':
+        case 'small':
+            return 'w-6 h-6';
+        case 'xxs':
+            return 'w-7 h-7';
+        case 'xs':
+        case 'medium':
+            return 'w-8 h-8';
+        case 'sm':
+            return 'w-9 h-9';
+        case 'md':
+        case 'large':
+        default:
+            return 'w-10 h-10';
+        case 'lg':
+            return 'w-11 h-11';
+        case 'xl':
+            return 'w-11 h-11';
+    }
+};
+var getBorderRadiiAtomicStyles = function (utils, props) {
+    var $size = props.$size, $shape = props.$shape;
+    if ($shape !== 'square')
+        return '';
+    switch ($size) {
+        case 'xxxxs':
+            return 'rounded-3';
+        case 'small':
+            return 'rounded-4';
+        case 'xxxs':
+            return 'rounded-5';
+        case 'xxs':
+            return 'rounded-6';
+        case 'xs':
+            return 'rounded-7';
+        default:
+            return 'rounded-8';
+    }
 };
 export var getBorderRadiiStyles = function (utils, props) {
+    var _a, _b, _c, _d;
     var theme = utils.theme;
     var $size = props.$size, $shape = props.$shape;
-    if ($shape !== 'square')
-        return undefined;
-    var squareButtonSizeRadius = getButtonSizeTheme(theme, $size).squareBorderRadius;
+    if ($shape === 'round')
+        return '100%';
+    var iconButtonTheme = getComponentTheme(theme, 'iconButton');
+    var squareButtonSizeRadius = (_a = getButtonSizeTheme(theme, $size)) === null || _a === void 0 ? void 0 : _a.squareBorderRadius;
     var squareBorderRadius = squareButtonSizeRadius
         ? "".concat(squareButtonSizeRadius, "px")
-        : theme.iconButton.shapeSquare.borderRadius;
-    return borderRadius(squareBorderRadius);
-};
-var resetPadding = function (_a) {
-    var theme = _a.theme;
-    return padding(theme.padding['0']);
-};
-var makeGetStyleFromTheme = function (theme, shape, bordered) {
-    var btnShapeKey = getButtonShapeThemeKey(shape);
-    var iconButton = theme.iconButton;
-    return function (btnStateKey, defaultKey) {
-        var _a, _b;
-        var defaultColor = defaultKey
-            ? (_a = iconButton[btnShapeKey][btnStateKey]) !== null && _a !== void 0 ? _a : iconButton[btnShapeKey][defaultKey]
-            : iconButton[btnShapeKey][btnStateKey];
-        return bordered ? (_b = iconButton["".concat(btnShapeKey, "Bordered")][btnStateKey]) !== null && _b !== void 0 ? _b : defaultColor : defaultColor;
-    };
+        : (_d = (_c = (_b = iconButtonTheme === null || iconButtonTheme === void 0 ? void 0 : iconButtonTheme.shapeSquare) === null || _b === void 0 ? void 0 : _b.borderRadius) !== null && _c !== void 0 ? _c : borderRadiusMap[$size]) !== null && _d !== void 0 ? _d : borderRadiusMap.md;
+    return squareBorderRadius;
 };
-var getAiIntentStyle = function (utils, props) {
-    var theme = utils.theme;
-    var $bordered = props.$bordered, $shape = props.$shape;
-    var aiIntentStyle = createButtonStyles({
-        color: theme.spr.icon01,
-        borderColor: theme.borderColor.transparent,
-        hoverBorderColor: theme.borderColor.transparent,
-        activeBorderColor: theme.borderColor.transparent,
-        disabledBorderColor: theme.borderColor.transparent,
-        backgroundColor: theme.spr.ui01,
-        hoverBackgroundColor: theme.spr.ui01,
-        activeBackgroundColor: theme.spr.ui01,
-        background: $bordered ? theme.ai.border01.background : undefined,
-        hoverBackground: theme.ai.border01.background,
-        activeBackground: "".concat(theme.ai.ui02, " padding-box , ").concat(theme.ai.ui01, " border-box"),
-        disabledBackground: theme.ai.border01.background,
-        disabledOpacity: '0.2',
-    }, props);
-    var borderRadiiStyles = ($shape === 'round' ? borderRadius('100%') : getBorderRadiiStyles(utils, props));
-    return getStylesWithAnimatedBorder(utils, props, aiIntentStyle, borderRadiiStyles);
-};
-var getIntentStyles = function (utils, props) {
-    var theme = utils.theme;
-    var _a = props.$bordered, $bordered = _a === void 0 ? false : _a, _b = props.$shape, $shape = _b === void 0 ? 'round' : _b, $intent = props.$intent;
-    var styleFromThemeGetter = makeGetStyleFromTheme(theme, $shape, $bordered);
-    var defaultStyle = createButtonStyles({
-        color: styleFromThemeGetter('color'),
-        activeColor: styleFromThemeGetter('activeColor'),
-        hoverColor: styleFromThemeGetter('hoverColor'),
-        disabledColor: styleFromThemeGetter('disabledColor'),
-        borderColor: styleFromThemeGetter('borderColor'),
-        hoverBorderColor: styleFromThemeGetter('hoverBorderColor'),
-        activeBorderColor: styleFromThemeGetter('activeBorderColor'),
-        disabledBorderColor: styleFromThemeGetter('disabledBorderColor'),
-        backgroundColor: styleFromThemeGetter('backgroundColor'),
-        hoverBackgroundColor: styleFromThemeGetter('hoverBackgroundColor'),
-        activeBackgroundColor: styleFromThemeGetter('activeBackgroundColor'),
-        disabledBackgroundColor: styleFromThemeGetter('disabledBackgroundColor'),
-    }, props);
+var getIntentStylesAtomic = function (utils, props) {
+    var _a = props.$bordered, $bordered = _a === void 0 ? false : _a, $intent = props.$intent, $isLoading = props.$isLoading;
     switch ($intent) {
-        case 'ai':
-            return getAiIntentStyle(utils, props);
-        default:
-            return defaultStyle;
+        case 'error': {
+            var defaultClasses = "spr-text-error ".concat($bordered ? 'spr-border-error spr-bg-primary' : 'border-transparent bg-transparent', "  ").concat($isLoading ? 'spr-bg-primary' : '');
+            var hoverClasses = "spr-text-error spr-bg-quaternary ".concat($bordered ? 'spr-border-error' : 'border-transparent');
+            var activeClasses = "spr-text-error spr-bg-quaternary ".concat($bordered ? 'spr-border-error' : 'border-transparent');
+            var disabledClasses = "spr-text-error ".concat($bordered ? 'spr-border-primary spr-bg-primary' : 'border-transparent bg-transparent', " ").concat($isLoading ? 'spr-bg-primary' : '');
+            return createButtonStylesAtomic(utils, props, defaultClasses, hoverClasses, activeClasses, disabledClasses);
+        }
+        case 'ai': {
+            var defaultClasses = "spr-text-primary ".concat($bordered ? 'spr-bg-primary spr-border-tertiary' : 'bg-transparent border-transparent', " ").concat($isLoading ? 'spr-bg-primary' : '');
+            var hoverClasses = "spr-text-primary ai-border-02 ".concat($bordered ? 'spr-bg-primary' : 'bg-transparent');
+            var activeClasses = 'spr-text-primary ai-border-02 ai-bg-gradient';
+            var disabledClasses = "spr-text-primary ".concat($bordered ? 'spr-bg-primary spr-border-tertiary' : 'border-transparent bg-transparent', "  ").concat($isLoading ? 'spr-bg-primary' : '');
+            return createButtonStylesAtomic(utils, props, defaultClasses, hoverClasses, activeClasses, disabledClasses);
+        }
+        default: {
+            var defaultClasses = "spr-text-primary ".concat($bordered ? 'spr-border-primary spr-bg-primary' : 'border-transparent bg-transparent', " ").concat($isLoading ? 'spr-bg-primary' : '');
+            var hoverClasses = "spr-text-primary ".concat($bordered ? 'spr-bg-primary spr-border-quaternary' : 'spr-bg-quaternary border-transparent');
+            var activeClasses = "spr-text-link-active ".concat($bordered ? 'spr-bg-primary spr-border-quinary' : 'spr-bg-quaternary border-transparent');
+            var disabledClasses = "spr-text-primary ".concat($bordered ? 'spr-border-primary spr-bg-primary' : 'border-transparent bg-transparent', " ").concat($isLoading ? 'spr-bg-primary' : '');
+            return createButtonStylesAtomic(utils, props, defaultClasses, hoverClasses, activeClasses, disabledClasses);
+        }
     }
 };
 export var iconButtonStyles = [
-    function (_a) {
-        var theme = _a.theme;
-        return ({ minWidth: theme.iconButton.minWidth });
-    },
-    getBorderRadiiStyles,
-    resetPadding,
-    getDimensions,
-    getIntentStyles,
+    'p-0 min-w-0',
+    getBorderRadiiAtomicStyles,
+    getSizeClass,
+    function (utils, props) { return getIntentStylesAtomic(utils, props); },
+    // @ts-ignore -- TS2322: Type 'StyleFn<SharedProps>' is not assignable to type 'StyleAtom | Rec...
+    getOverrideStyles,
 ];
+var iconSizeMap = {
+    xxxxs: '8px',
+    xxxs: '10px',
+    small: '12px',
+    xxs: '12px',
+    xs: '14px',
+    sm: '14px',
+    md: '16px',
+    lg: '16px',
+    xl: '16px',
+    medium: '16px',
+    large: '20px',
+};
 export var renderIconButtonChild = function (theme, size, child) {
+    var _a, _b, _c, _d;
     return React.isValidElement(child)
         ? React.cloneElement(child, {
-            size: child.props.size || getButtonSizeTheme(theme, size).iconSize,
+            size: (_d = (_c = (_a = child.props.size) !== null && _a !== void 0 ? _a : (_b = getButtonSizeTheme(theme, size)) === null || _b === void 0 ? void 0 : _b.iconSize) !== null && _c !== void 0 ? _c : iconSizeMap[size]) !== null && _d !== void 0 ? _d : iconSizeMap.md,
         })
         : null;
 };