@sprinklrjs/spaceweb 12.33.2 → 14.11.0

package/breadcrumb/hooks/useBreadCrumbWidths.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useBreadcrumbWidths = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var calculateVisibleItems_1 = require("../utils/calculateVisibleItems");
+var debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+var useBreadcrumbWidths = function (totalItems) {
+    var containerRef = (0, react_1.useRef)(null);
+    var itemRefs = (0, react_1.useRef)([]);
+    var itemWidthsRef = (0, react_1.useRef)([]);
+    var menuButtonWidthRef = (0, react_1.useRef)(40);
+    var _a = tslib_1.__read((0, react_1.useState)(null), 2), visibleItemsCount = _a[0], setVisibleItemsCount = _a[1];
+    var measureAndUpdateVisibility = (0, react_1.useCallback)(function () {
+        if (!containerRef.current)
+            return;
+        itemRefs.current = itemRefs.current.slice(0, totalItems);
+        if (itemWidthsRef.current.length === 0 || itemWidthsRef.current.length !== totalItems) {
+            var hasAllRefs = itemRefs.current.length === totalItems && itemRefs.current.every(function (ref) { return ref !== null; });
+            if (!hasAllRefs)
+                return;
+            itemWidthsRef.current = itemRefs.current.map(function (ref) { return (ref === null || ref === void 0 ? void 0 : ref.offsetWidth) || 0; });
+        }
+        var containerWidth = containerRef.current.clientWidth;
+        var visibleCount = (0, calculateVisibleItems_1.calculateVisibleItems)(containerWidth, itemWidthsRef.current, menuButtonWidthRef.current, totalItems);
+        setVisibleItemsCount(visibleCount);
+    }, [totalItems]);
+    // Debounced measure events to prevent exessive updates
+    var debouncedMeasureAndUpdateVisibility = (0, react_1.useMemo)(function () { return (0, debounce_1.default)(measureAndUpdateVisibility, 100); }, [measureAndUpdateVisibility]);
+    (0, react_1.useEffect)(function () {
+        if (!containerRef.current)
+            return;
+        // reset whenever totalItems changes
+        setVisibleItemsCount(null);
+        var resizeObserver = new ResizeObserver(debouncedMeasureAndUpdateVisibility);
+        resizeObserver.observe(containerRef.current);
+        return function () {
+            resizeObserver.disconnect();
+        };
+    }, [debouncedMeasureAndUpdateVisibility, totalItems]);
+    return {
+        containerRef: containerRef,
+        itemRefs: itemRefs,
+        menuButtonWidthRef: menuButtonWidthRef,
+        visibleItemsCount: visibleItemsCount,
+        isCollapsed: visibleItemsCount !== null ? visibleItemsCount < totalItems : false,
+    };
+};
+exports.useBreadcrumbWidths = useBreadcrumbWidths;

package/breadcrumb/styled-components.d.ts

@@ -1,6 +1,6 @@
-export declare const StyledStartEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledEndEnhancer: import("../style/styled").StyledComponent;
-export declare const StyledWrapper: import("../style/styled").StyledComponent;
-export declare const StyledSeparator: import("../style/styled").StyledComponent;
-export declare const StyledListItem: import("../style/styled").StyledComponent;
+export declare const StyledStartEnhancer: import("../style").StyledComponent;
+export declare const StyledEndEnhancer: import("../style").StyledComponent;
+export declare const StyledWrapper: import("../style").StyledComponent;
+export declare const StyledSeparator: import("../style").StyledComponent;
+export declare const StyledListItem: import("../style").StyledComponent;
 export declare const DEFAULT_SEPARATOR: import("react/jsx-runtime").JSX.Element;

package/breadcrumb/styled-components.js

@@ -4,16 +4,10 @@ exports.DEFAULT_SEPARATOR = exports.StyledListItem = exports.StyledSeparator = e
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var style_1 = require("../style");
-var chevron_right_1 = (0, tslib_1.__importDefault)(require("../icon/components/chevron-right"));
+var chevron_right_1 = tslib_1.__importDefault(require("../icon/components/chevron-right"));
 exports.StyledStartEnhancer = (0, style_1.styled)('div', 'inline-flex items-center mr-1');
 exports.StyledEndEnhancer = (0, style_1.styled)('div', 'inline-flex items-center ml-1');
-exports.StyledWrapper = (0, style_1.styled)('ul', 'm-0 p-0 inline-flex items-center flex-wrap');
-exports.StyledSeparator = (0, style_1.styled)('span', 'inline-flex items-center', function (_, _a) {
-    var $gap = _a.$gap;
-    return {
-        marginLeft: "".concat($gap * 4, "px"),
-        marginRight: "".concat($gap * 4, "px"),
-    };
-});
-exports.StyledListItem = (0, style_1.styled)('li', 'm-0 inline-flex items-center');
-exports.DEFAULT_SEPARATOR = (0, jsx_runtime_1.jsx)(chevron_right_1.default, { size: 10 }, void 0);
+exports.StyledWrapper = (0, style_1.styled)('ul', 'w-full m-0 p-0 inline-flex items-center flex-nowrap');
+exports.StyledSeparator = (0, style_1.styled)('span', 'inline-flex items-center mx-[--sw-margin-inline]');
+exports.StyledListItem = (0, style_1.styled)('li', 'm-0 inline-flex items-center whitespace-nowrap');
+exports.DEFAULT_SEPARATOR = (0, jsx_runtime_1.jsx)(chevron_right_1.default, { size: 10 });

package/breadcrumb/types.d.ts

@@ -1,32 +1,44 @@
 import React, { ReactNode } from 'react';
 import { Override } from '../overrides';
 import { LinkProps } from '../link';
-export declare type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
-export declare type BreadcrumbItemSharedProps = {
+import { SpacewebComponentProps } from '../types';
+export type Enhancer<SharedProps> = ReactNode | ((props: SharedProps) => ReactNode);
+export type BreadcrumbItemSharedProps = {
     $isLastChild?: boolean;
     $withStartEnhancer: boolean;
     $withEndEnhancer: boolean;
     $gap: number;
 };
-export declare type BreadcrumbSharedProps = {
+export type BreadcrumbSharedProps = {
     $gap: number;
 };
-export declare type BreadcrumbProps = {
+export type BreadcrumbProps = SpacewebComponentProps<{
     separator?: ReactNode;
     gap?: number;
+    maxItems?: number;
+    collapsedItemsTooltip?: string;
     overrides?: {
         Root?: Override<Record<string, any>>;
     };
     children: ReactNode;
+}>;
+export type BreadcrumbEllipsisProps = {
+    focusBreadcrumbContainer: () => boolean;
+    collapsedItems: React.ReactElement[];
+    collapsedItemsTooltip: string;
 };
-export declare type BreadcrumbItemProps = Omit<LinkProps, 'onClick'> & {
+export type BreadcrumbItemProps = Omit<LinkProps, 'onClick'> & {
     isLastChild?: boolean;
+    menuSeparator?: boolean;
+    containerRef?: React.RefObject<HTMLElement>;
     gap?: number;
     onClick?: (event: React.MouseEvent<HTMLElement>, index: number) => void;
     index?: number;
     separator?: ReactNode;
     startEnhancer?: Enhancer<BreadcrumbItemSharedProps>;
     endEnhancer?: Enhancer<BreadcrumbItemSharedProps>;
+    collapsedItems?: React.ReactElement[];
+    collapsedItemsTooltip?: string;
     overrides?: {
         Link?: Override<Record<string, any>>;
         StartEnhancer?: Override<Record<string, any>>;

package/breadcrumb/utils/calculateVisibleItems.d.ts

@@ -0,0 +1,2 @@
+export declare const BUFFER = 10;
+export declare function calculateVisibleItems(containerWidth: number, itemWidths: number[], menuButtonWidth: number, totalItems: number): number;

package/breadcrumb/utils/calculateVisibleItems.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateVisibleItems = exports.BUFFER = void 0;
+exports.BUFFER = 10;
+function calculateVisibleItems(containerWidth, itemWidths, menuButtonWidth, totalItems) {
+    if (totalItems <= 1)
+        return totalItems;
+    var availableWidth = containerWidth - menuButtonWidth;
+    var usedWidth = itemWidths[0] + itemWidths[itemWidths.length - 1];
+    var visibleCount = 2;
+    for (var i = itemWidths.length - 2; i > 0; i--) {
+        var nextWidth = usedWidth + itemWidths[i];
+        if (nextWidth <= availableWidth) {
+            usedWidth = nextWidth;
+            visibleCount += 1;
+        }
+        else
+            break;
+    }
+    return Math.max(2, visibleCount);
+}
+exports.calculateVisibleItems = calculateVisibleItems;

package/button/Button.d.ts

@@ -1,33 +1,32 @@
-import * as React from 'react';
-declare const Button: React.ForwardRefExoticComponent<Omit<{
-    $as?: React.ElementType<any> | undefined;
-    className?: import("..").Styles;
-    style?: import("..").Styles;
+import { type MouseEvent } from 'react';
+import type { Styles } from '../types';
+declare const Button: import("react").ForwardRefExoticComponent<Omit<{
     size?: import("./types").Size | undefined;
     shape?: import("./types").Shape | undefined;
-    variant?: import("..").Variant | undefined;
-    intent?: import("..").Intent | undefined;
+    variant?: import("../types").Variant | undefined;
+    intent?: import("../types").Intent | undefined;
     isLoading?: boolean | undefined;
     isSelected?: boolean | undefined;
     animate?: boolean | undefined;
+    dropdownContent?: import("react").ReactNode | import("../baseui/popover").StatefulContentRenderProp;
     disabled?: boolean | undefined;
     fullWidth?: boolean | undefined;
     autoFocus?: boolean | undefined;
-    role?: React.AriaRole | undefined;
+    role?: import("react").AriaRole | undefined;
     href?: string | undefined;
     target?: string | undefined;
     rel?: string | undefined;
-    children?: React.ReactNode;
-    endEnhancer?: React.ReactNode | React.ComponentType<any>;
-    onClick?: ((event: React.MouseEvent<HTMLElement, MouseEvent>) => any) | undefined;
+    children?: import("react").ReactNode;
+    endEnhancer?: import("react").ReactNode | import("react").ComponentType<any>;
+    onClick?: ((event: MouseEvent<HTMLElement, globalThis.MouseEvent>) => any) | undefined;
     overrides?: import("./types").ButtonOverrides | undefined;
-    startEnhancer?: React.ReactNode | React.ComponentType<any>;
+    startEnhancer?: import("react").ReactNode | import("react").ComponentType<any>;
     type?: "button" | "reset" | "submit" | undefined;
-    tooltipContent?: React.ReactNode | import("../baseui/popover").ContentRenderProp;
+    tooltipContent?: import("react").ReactNode | import("../baseui/popover").ContentRenderProp;
     tabIndex?: number | undefined;
-}, "style" | "className"> & {
-    $as?: React.ElementType<any> | undefined;
-    className?: import("..").Styles;
-    style?: import("..").Styles;
-} & React.RefAttributes<HTMLButtonElement>>;
+}, "className" | "style"> & {
+    $as?: import("react").ElementType | undefined;
+    className?: import("../types").ClassName;
+    style?: Styles;
+} & import("react").RefAttributes<unknown>>;
 export default Button;

package/button/Button.js

@@ -2,71 +2,109 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
-var React = (0, tslib_1.__importStar)(require("react"));
-var pick_1 = (0, tslib_1.__importDefault)(require("lodash/pick"));
-var omit_1 = (0, tslib_1.__importDefault)(require("lodash/omit"));
-var button_1 = require("../baseui/button");
-var overrides_1 = require("../overrides");
+var react_1 = require("react");
 var styled_components_1 = require("./styled-components");
-var basewebAdapter_1 = (0, tslib_1.__importDefault)(require("./basewebAdapter"));
-var helpers_1 = require("../helpers");
+var button_enhancers_1 = tslib_1.__importDefault(require("./button-enhancers"));
+var DropdownEnhancer_1 = tslib_1.__importDefault(require("./DropdownEnhancer"));
+var overrides_1 = require("../overrides");
+var focusVisible_1 = require("../baseui/utils/focusVisible");
 var base_button_1 = require("../base-button");
-var tooltip_1 = require("../tooltip");
-var context_1 = require("../form-control/context");
-var useStyle_1 = (0, tslib_1.__importDefault)(require("../style/useStyle"));
-var themeHelpers_1 = require("../helpers/themeHelpers");
+var box_1 = require("../box");
 var styled_component_1 = require("../loader/styled-component");
-button_1.Button.displayName = 'BaseUIButton';
-var Button = React.forwardRef(function (props, ref) {
-    var buttonRef = ref;
-    var _a = (0, context_1.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 = (0, tslib_1.__rest)(_a, ["variant", "intent", "size", "fullWidth", "className", "style", "overrides", "tooltipContent", "animate"]);
-    var isSelected = restProps.isSelected;
-    var _d = (0, useStyle_1.default)(), getStyle = _d.getStyle, isRTL = _d.isRTL, theme = _d.theme;
+var style_1 = require("../style");
+var disabled_tooltip_container_1 = tslib_1.__importDefault(require("../tooltip/disabled-tooltip-container"));
+var stateful_tooltip_1 = tslib_1.__importDefault(require("../tooltip/stateful-tooltip"));
+var themeHelpers_1 = require("../helpers/themeHelpers");
+var helpers_1 = require("../helpers");
+var context_1 = require("../form-control/context");
+var omit_1 = tslib_1.__importDefault(require("lodash/omit"));
+var helpers_2 = require("./helpers");
+var Button = (0, react_1.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 = tslib_1.__rest(props, ["overrides", "className", "style", "size", "shape", "variant", "isLoading", "intent", "isSelected", "children", "tooltipContent", "disabled", "fullWidth", "animate", "dropdownContent", "onClick", "startEnhancer", "endEnhancer", "href", "type"]);
+    var enhancerProps = (0, omit_1.default)(props, ['className', 'style']);
+    var _f = tslib_1.__read((0, react_1.useState)(false), 2), isFocusVisible = _f[0], setIsFocusVisible = _f[1];
+    var styleUtils = (0, style_1.useStyle)();
+    var theme = styleUtils.theme;
     var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
-    var buttonOverrides = React.useMemo(function () { return (0, omit_1.default)(overrides, 'StatefulTooltip'); }, [overrides]);
-    var adaptedProps = (0, basewebAdapter_1.default)((0, tslib_1.__assign)((0, tslib_1.__assign)({}, restProps), { variant: variant, overrides: buttonOverrides }));
-    var convertedOverrides = (0, overrides_1.mergeOverrides)(adaptedProps.overrides || {});
-    var mergedOverrides = (0, overrides_1.mergeOverrides)({
-        BaseButton: {
-            props: (0, tslib_1.__assign)({ className: [styled_components_1.getButtonStyles, className, style] }, (0, helpers_1.add$props)({ variant: variant, intent: intent, size: size, fullWidth: fullWidth, animate: animate })),
-            component: base_button_1.StyledBaseButton, //using StyledBaseButton instead of BaseButton as all the handling is done by baseui's Button.
-        },
-        LoadingSpinnerContainer: {
-            component: styled_components_1.StyledLoadingSpinnerContainer,
-            props: {
-                $size: size,
+    var intent = (0, context_1.useContextualFormProps)({ intent: _intent }).intent;
+    var sharedProps = (0, helpers_1.add$props)({
+        variant: variant,
+        intent: intent,
+        size: size,
+        fullWidth: fullWidth,
+        animate: animate,
+        disabled: disabled,
+        isFocusVisible: isFocusVisible,
+        isSelected: isSelected,
+        shape: shape,
+        isLoading: isLoading,
+    });
+    var internalOnClick = (0, react_1.useCallback)(function (event) {
+        if (isLoading) {
+            event.preventDefault();
+            return;
+        }
+        onClick && (onClick === null || onClick === void 0 ? void 0 : onClick(event));
+    }, [isLoading, onClick]);
+    var handleFocus = (0, react_1.useCallback)(function (event) {
+        if ((0, focusVisible_1.isFocusVisible)(event)) {
+            setIsFocusVisible(true);
+        }
+    }, []);
+    var handleBlur = (0, react_1.useCallback)(function (event) {
+        if (isFocusVisible) {
+            setIsFocusVisible(false);
+        }
+    }, [isFocusVisible]);
+    var _g = tslib_1.__read((0, overrides_1.useOverrides)(overrides.BaseButton || overrides.Root, base_button_1.StyledBaseButton), 2), BaseButton = _g[0], _h = _g[1], baseButtonClasses = _h.$className, baseButtonProps = tslib_1.__rest(_h, ["$className"]);
+    var _j = tslib_1.__read((0, overrides_1.useOverrides)(overrides.LoadingSpinner, styled_component_1.StyledClipLoader), 2), LoadingSpinner = _j[0], _k = _j[1], loadingSpinnerClasses = _k.$className, loadingSpinnerProps = tslib_1.__rest(_k, ["$className"]);
+    var _l = tslib_1.__read((0, overrides_1.useOverrides)(overrides.LoadingSpinnerContainer, styled_components_1.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 = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, stateful_tooltip_1.default), 2), StatefulTooltip = _m[0], statefulTooltipProps = _m[1];
+    var buttonBorderRadius = (0, styled_components_1.getBorderRadiiStyles)(styleUtils, sharedProps);
+    var isAnchor = Boolean(href);
+    var buttonType = isAnchor ? undefined : type || 'button';
+    var buttonEl = ((0, jsx_runtime_1.jsx)(BaseButton, tslib_1.__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
+                    ? tslib_1.__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: styled_component_1.StyledClipLoader,
-            style: [
-                (0, tslib_1.__assign)((0, tslib_1.__assign)((0, tslib_1.__assign)({ height: '100%', width: '100%' }, (0, styled_components_1.getLoaderMajorColor)({ theme: theme }, { variant: variant })), (0, styled_components_1.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',
-        },
-    }, (0, pick_1.default)(adaptedProps.overrides, 'BaseButton'));
-    var _e = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, tooltip_1.StatefulTooltip), 2), StatefulTooltip = _e[0], statefulTooltipProps = _e[1];
-    var buttonEl = ((0, jsx_runtime_1.jsx)(button_1.Button, (0, tslib_1.__assign)({ "data-spaceweb": "button", "data-testid": "button" }, adaptedProps, { onClick: adaptedProps.onClick, overrides: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, convertedOverrides), mergedOverrides), ref: buttonRef }), void 0));
-    if (adaptedProps.disabled && tooltipContent) {
-        return ((0, jsx_runtime_1.jsx)(tooltip_1.DisabledTooltipContainer, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl }), void 0));
+            helpers_2.getPaddingStyleVariables,
+            style,
+            baseButtonProps === null || baseButtonProps === void 0 ? void 0 : baseButtonProps.style,
+        ], className: [
+            styled_components_1.getButtonStyleAtomic,
+            styled_components_1.getButtonStyles,
+            baseButtonClasses,
+            className,
+            baseButtonProps === null || baseButtonProps === void 0 ? void 0 : baseButtonProps.className,
+            dropdownContent ? 'rounded-r-0' : '',
+        ], onClick: internalOnClick, onFocus: (0, focusVisible_1.forkFocus)(tslib_1.__assign(tslib_1.__assign({}, restProps), baseButtonProps), handleFocus), onBlur: (0, focusVisible_1.forkBlur)(tslib_1.__assign(tslib_1.__assign({}, restProps), baseButtonProps), handleBlur) }, { children: isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_enhancers_1.default, tslib_1.__assign({ sharedProps: sharedProps }, enhancerProps)), (0, jsx_runtime_1.jsx)(LoadingSpinnerContainer, tslib_1.__assign({}, sharedProps, loadingSpinnerContainerProps, { children: (0, jsx_runtime_1.jsx)(LoadingSpinner, tslib_1.__assign({}, sharedProps, loadingSpinnerProps, { style: [styled_components_1.getLoadingSpinnerStyles, loadingSpinnerProps === null || loadingSpinnerProps === void 0 ? void 0 : loadingSpinnerProps.style], className: [styled_components_1.getLoadingSpinnerClasses, loadingSpinnerClasses] })) }))] })) : ((0, jsx_runtime_1.jsx)(button_enhancers_1.default, tslib_1.__assign({ sharedProps: sharedProps }, enhancerProps))) })));
+    var tooltipWrappedButtonEl = (function () {
+        if (disabled && tooltipContent) {
+            return ((0, jsx_runtime_1.jsx)(disabled_tooltip_container_1.default, tslib_1.__assign({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl })));
+        }
+        if (tooltipContent) {
+            return ((0, jsx_runtime_1.jsx)(StatefulTooltip, tslib_1.__assign({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl })));
+        }
+        return buttonEl;
+    })();
+    if (dropdownContent) {
+        return ((0, jsx_runtime_1.jsxs)(box_1.Box, tslib_1.__assign({ className: fullWidth ? 'flex w-full' : 'inline-flex', role: "group" }, { children: [tooltipWrappedButtonEl, (0, jsx_runtime_1.jsx)(DropdownEnhancer_1.default, { dropdownContent: dropdownContent, overrides: overrides, 
+                    // since our DropdownEnhancer is a button, we need to remove the fullWidth prop
+                    sharedProps: tslib_1.__assign(tslib_1.__assign({}, sharedProps), { $fullWidth: false }) })] })));
     }
-    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent, intent: intent, viewportAsBoundary: true }, statefulTooltipProps, { children: buttonEl }), void 0)) : (buttonEl);
+    return tooltipWrappedButtonEl;
 });
 Button.displayName = 'Button';
+Button.__standard = 'Component';
 exports.default = Button;

package/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/button/CitationButton/CitationButton.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var Button_1 = tslib_1.__importDefault(require("../Button"));
+var CitationButton = (0, react_1.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 = tslib_1.__rest(props, ["variant", "shape", "className"]);
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, tslib_1.__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';
+exports.default = CitationButton;

package/button/CitationButton/index.d.ts

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

package/button/CitationButton/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var CitationButton_1 = tslib_1.__importDefault(require("./CitationButton"));
+exports.default = CitationButton_1.default;
+tslib_1.__exportStar(require("./types"), exports);

package/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/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/button/DropdownEnhancer.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+var jsx_runtime_1 = require("react/jsx-runtime");
+// libs
+var react_1 = require("react");
+// components
+var popover_1 = require("../popover");
+var styled_components_1 = require("./styled-components");
+var chevron_down_1 = tslib_1.__importDefault(require("../icon/components/chevron-down"));
+// hooks
+var overrides_1 = require("../overrides");
+var helpers_1 = require("./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 = (0, react_1.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 = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DropdownTrigger, styled_components_1.StyledTriggerButton), 2), TriggerButton = _c[0], triggerButtonProps = _c[1];
+    return ((0, jsx_runtime_1.jsx)(TriggerButton, tslib_1.__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: [
+            (0, helpers_1.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: (0, jsx_runtime_1.jsx)(chevron_down_1.default, { size: (0, helpers_1.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 = tslib_1.__read((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.DropdownPopover, popover_1.StatefulPopover), 2), DropdownPopover = _c[0], dropdownPopoverProps = _c[1];
+    return ((0, jsx_runtime_1.jsx)(DropdownPopover, tslib_1.__assign({ showArrow: false, placement: "bottom" }, dropdownPopoverProps, { content: dropdownContent }, { children: function (_a) {
+            var isOpen = _a.isOpen, onClick = _a.onClick;
+            return ((0, jsx_runtime_1.jsx)(DropdownTrigger, { sharedProps: sharedProps, isOpen: isOpen, onClick: onClick, overrides: overrides }));
+        } })));
+};
+exports.default = DropdownEnhancer;

package/button/IconButton/IconButton.js

@@ -5,27 +5,52 @@ var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
 var overrides_1 = require("../../overrides");
 var style_1 = require("../../style");
-var Button_1 = (0, tslib_1.__importDefault)(require("../Button"));
+var Button_1 = tslib_1.__importDefault(require("../Button"));
 var styled_components_1 = require("./styled-components");
 var themeHelpers_1 = require("../../helpers/themeHelpers");
 var IconButton = (0, react_1.forwardRef)(function (props, ref) {
-    var theme = (0, style_1.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 = (0, tslib_1.__rest)(props, ["bordered", "size", "className", "style", "variant", "shape"]);
+    var styleUtils = (0, style_1.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 = tslib_1.__rest(props, ["bordered", "size", "variant", "shape"]);
     var size = _size !== null && _size !== void 0 ? _size : (0, themeHelpers_1.getDefaultSize)(theme);
-    var overrides = (0, overrides_1.mergeOverrides)({
-        BaseButton: {
-            style: [styled_components_1.iconButtonStyles, className, style],
-            props: {
-                $bordered: bordered,
-                $size: size,
-                $isIconButton: true,
-                $intent: props.intent,
-                $variant: variant,
+    var iconButtonBorderRadius = (0, styled_components_1.getBorderRadiiStyles)(styleUtils, { $size: size, $shape: shape });
+    var overrides = (0, react_1.useMemo)(function () {
+        var _a;
+        return (0, overrides_1.mergeOverrides)({
+            BaseButton: {
+                className: styled_components_1.iconButtonStyles,
+                style: tslib_1.__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: tslib_1.__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 ((0, jsx_runtime_1.jsx)(Button_1.default, (0, tslib_1.__assign)({ variant: variant, shape: shape }, (ariaLabel ? { 'aria-label': ariaLabel } : {}), buttonProps, { overrides: overrides, ref: ref }, { children: react_1.Children.map(props.children, styled_components_1.renderIconButtonChild.bind(null, theme, size)) }), void 0));
+    return ((0, jsx_runtime_1.jsx)(Button_1.default, tslib_1.__assign({ variant: variant, shape: shape }, (ariaLabel ? { 'aria-label': ariaLabel } : {}), buttonProps, { overrides: overrides, ref: ref }, { children: react_1.Children.map(props.children, styled_components_1.renderIconButtonChild.bind(null, theme, size)) })));
 });
 IconButton.displayName = 'IconButton';
+IconButton.__standard = 'Component';
 exports.default = IconButton;

package/button/IconButton/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
-var IconButton_1 = (0, tslib_1.__importDefault)(require("./IconButton"));
+var IconButton_1 = tslib_1.__importDefault(require("./IconButton"));
 exports.default = IconButton_1.default;
-(0, tslib_1.__exportStar)(require("./types"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/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;