@sprinklrjs/spaceweb 12.14.4 → 12.33.2

package/list/list-item.d.ts

@@ -22,6 +22,6 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     } | undefined;
     selected?: boolean | undefined;
     startEnhancer?: Enhancer<ListItemSharedProps>;
-    tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
+    tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
 } & React.RefAttributes<HTMLElement>>>;
 export default _default;

package/list/list-item.js

@@ -50,7 +50,7 @@ var ListItem = React.forwardRef(function (_a, ref) {
     };
     var _r = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.StatefulTooltip, tooltip_1.StatefulTooltip), 2), StatefulTooltip = _r[0], statefulTooltipProps = _r[1];
     var listEl = ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "list-item", role: "listitem", ref: combinedRef, tabIndex: tabIndex, "aria-disabled": disabled, "$as": $as, onClick: disabled ? noop_1.default : onClick, onKeyDown: handleKeyDown, "data-highlighted": highlighted }, sharedProps, restProps, rootProps, useFocusVisibleProps, { children: [startEnhancer && ((0, jsx_runtime_1.jsx)(StartEnhancer, (0, tslib_1.__assign)({}, sharedProps, startEnhancerProps, { children: renderEnhancer(startEnhancer) }), void 0)), (0, jsx_runtime_1.jsx)(ChildContainer, (0, tslib_1.__assign)({}, sharedProps, childContainerProps, { children: children }), void 0), endEnhancer && ((0, jsx_runtime_1.jsx)(EndEnhancer, (0, tslib_1.__assign)({}, sharedProps, endEnhancerProps, { children: renderEnhancer(endEnhancer) }), void 0))] }), void 0));
-    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent }, statefulTooltipProps, { children: listEl }), void 0)) : (listEl);
+    return tooltipContent ? ((0, jsx_runtime_1.jsx)(StatefulTooltip, (0, tslib_1.__assign)({ placement: "bottom", content: tooltipContent, viewportAsBoundary: true }, statefulTooltipProps, { children: listEl }), void 0)) : (listEl);
 });
 ListItem.displayName = 'ListItem';
 exports.default = React.memo(ListItem);

package/loader/loader.d.ts

@@ -2,5 +2,7 @@
 import { LoaderProps } from './types';
 export declare const DEFAULT_SIZE = 16;
 export declare const DEFAULT_DELAY = 0;
-declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & import("react").RefAttributes<HTMLElement>>;
+declare const Loader: import("react").ForwardRefExoticComponent<LoaderProps & {
+    children?: import("react").ReactNode;
+} & import("react").RefAttributes<HTMLElement>>;
 export default Loader;

package/loader/loader.js

@@ -4,6 +4,7 @@ exports.DEFAULT_DELAY = exports.DEFAULT_SIZE = void 0;
 var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var react_1 = require("react");
+var times_1 = (0, tslib_1.__importDefault)(require("lodash/times"));
 var typography_1 = require("../helpers/typography");
 var overrides_1 = require("../overrides");
 var typography_2 = require("../typography");
@@ -14,10 +15,18 @@ var Loader = (0, react_1.forwardRef)(function (_a, ref) {
     var _b = _a.delay, delay = _b === void 0 ? exports.DEFAULT_DELAY : _b, loadingContent = _a.loadingContent, _c = _a.variant, variant = _c === void 0 ? 'beat' : _c, _d = _a.size, size = _d === void 0 ? exports.DEFAULT_SIZE : _d, overrides = _a.overrides, restProps = (0, tslib_1.__rest)(_a, ["delay", "loadingContent", "variant", "size", "overrides"]);
     // should be visible from start if delay is 0
     var _e = (0, tslib_1.__read)((0, react_1.useState)(!delay), 2), visible = _e[0], updateVisibleState = _e[1];
+    var LoaderComponent;
+    if (variant === 'beat')
+        LoaderComponent = styled_component_1.StyledBeatLoader;
+    else if (variant === 'clip')
+        LoaderComponent = styled_component_1.StyledClipLoader;
+    else
+        LoaderComponent = styled_component_1.StyledSpinner;
     var _f = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Root, styled_component_1.StyledRoot), 2), Root = _f[0], rootProps = _f[1];
     var _g = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Text, typography_2.Typography), 2), Text = _g[0], textProps = _g[1];
-    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, variant === 'beat' ? styled_component_1.StyledBeatLoader : styled_component_1.StyledClipLoader), 2), LoaderInternal = _h[0], loaderProps = _h[1];
+    var _h = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.Loader, LoaderComponent), 2), LoaderInternal = _h[0], loaderProps = _h[1];
     var _j = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.BeatLoaderBall, styled_component_1.StyledBeatLoaderBall), 2), BeatLoaderBall = _j[0], beatLoaderBallProps = _j[1];
+    var _k = (0, tslib_1.__read)((0, overrides_1.useOverrides)(overrides === null || overrides === void 0 ? void 0 : overrides.SpinnerStick, styled_component_1.StyledSpinnerStick), 2), SpinnerStick = _k[0], spinnerStickProps = _k[1];
     (0, react_1.useEffect)(function () {
         var delayTimer;
         if (delay) {
@@ -35,7 +44,7 @@ var Loader = (0, react_1.forwardRef)(function (_a, ref) {
         ? loadingContent
         : loadingContent && ((0, jsx_runtime_1.jsx)(Text, (0, tslib_1.__assign)({ variant: "bs3" }, sharedProps, textProps, { className: [textProps.className, 'spr-text-02 mt-1'] }, { children: loadingContent }), void 0));
     // todo: aria-label localization
-    return visible ? ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsx)(LoaderInternal, (0, tslib_1.__assign)({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: variant === 'beat' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)) }), void 0), content] }), void 0)) : null;
+    return visible ? ((0, jsx_runtime_1.jsxs)(Root, (0, tslib_1.__assign)({ "data-spaceweb": "loader", "data-testid": "loader" }, sharedProps, restProps, rootProps, { ref: ref }, { children: [(0, jsx_runtime_1.jsxs)(LoaderInternal, (0, tslib_1.__assign)({ "aria-label": "Loading", role: "progressbar", "aria-busy": true }, sharedProps, loaderProps, { children: [variant === 'beat' && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 1 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 2 }, beatLoaderBallProps), void 0), (0, jsx_runtime_1.jsx)(BeatLoaderBall, (0, tslib_1.__assign)({}, sharedProps, { "$index": 3 }, beatLoaderBallProps), void 0)] }, void 0)), variant === 'spinner' && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, times_1.default)(8).map(function (index) { return ((0, jsx_runtime_1.jsx)(SpinnerStick, (0, tslib_1.__assign)({}, sharedProps, { "$index": index + 1 }, spinnerStickProps), index)); }) }, void 0))] }), void 0), content] }), void 0)) : null;
 });
 Loader.displayName = 'Loader';
 exports.default = Loader;

package/loader/styled-component.d.ts

@@ -2,3 +2,5 @@ export declare const StyledRoot: import("../style/styled").StyledComponent;
 export declare const StyledClipLoader: import("../style/styled").StyledComponent;
 export declare const StyledBeatLoader: import("../style/styled").StyledComponent;
 export declare const StyledBeatLoaderBall: import("../style/styled").StyledComponent;
+export declare const StyledSpinner: import("../style/styled").StyledComponent;
+export declare const StyledSpinnerStick: import("../style/styled").StyledComponent;

package/loader/styled-component.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.StyledBeatLoaderBall = exports.StyledBeatLoader = exports.StyledClipLoader = exports.StyledRoot = void 0;
+exports.StyledSpinnerStick = exports.StyledSpinner = exports.StyledBeatLoaderBall = exports.StyledBeatLoader = exports.StyledClipLoader = exports.StyledRoot = void 0;
 var tslib_1 = require("tslib");
 var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var style_1 = require("../style");
@@ -59,3 +59,64 @@ exports.StyledBeatLoaderBall = (0, style_1.styled)('div', 'spr-tooltip-01 rounde
         marginRight: px2rem(2),
     };
 });
+var spinnerAnimationStyles = function (_, _a) {
+    var $index = _a.$index;
+    return ({
+        animationDuration: '1000ms',
+        animationDelay: "".concat($index * 125, "ms"),
+        animationIterationCount: 'infinite',
+        animationTimingFunction: 'step-start',
+        // @ts-ignore animationName can be an object https://www.styletron.org/concepts/#keyframes
+        animationName: {
+            '10%': {
+                opacity: 0.125,
+            },
+            '100%': {
+                opacity: 1,
+            },
+        },
+    });
+};
+var spinnerStyles = function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size, index = props.$index;
+    var radius = $size / 2;
+    var stickHeight = radius / 2;
+    var stickWidth = radius / 4;
+    var stickHeightOffset = stickHeight / 2;
+    var stickWidthOffset = stickWidth / 2;
+    // Adjust the baseRadius to be the radius minus the stick width
+    var baseRadius = radius - stickWidth;
+    // Calculate the angle in degrees
+    var angle = (index - 1) * 45;
+    // Calculate the x and y offsets based on the adjusted baseRadius
+    var yOffset = Math.sin((Math.PI * angle) / 180) * baseRadius;
+    var xOffset = Math.cos((Math.PI * angle) / 180) * baseRadius;
+    return {
+        top: px2rem(radius + yOffset - stickHeightOffset),
+        left: px2rem(radius + xOffset - stickWidthOffset),
+        transform: "rotate(".concat(angle + 90, "deg)"),
+    };
+};
+exports.StyledSpinner = (0, style_1.styled)('div', function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    return {
+        height: px2rem($size),
+        width: px2rem($size),
+        position: 'relative',
+    };
+});
+exports.StyledSpinnerStick = (0, style_1.styled)('div', 'box-border spr-tooltip-01', spinnerStyles, spinnerAnimationStyles, function (utils, props) {
+    var px2rem = utils.px2rem;
+    var $size = props.$size;
+    var radius = $size / 2;
+    var stickHeight = radius / 2;
+    var stickWidth = radius / 4;
+    return {
+        height: px2rem(stickHeight),
+        width: px2rem(stickWidth),
+        borderRadius: px2rem(16),
+        position: 'absolute',
+    };
+});

package/loader/types.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Override } from '../overrides';
 import { ClassName } from '../types';
-export declare type Variant = 'clip' | 'beat';
+export declare type Variant = 'clip' | 'beat' | 'spinner';
 export declare type SharedProps = {
     $variant: Variant;
     $hasLoadingContent: boolean;
@@ -19,5 +19,6 @@ export declare type LoaderProps = {
         Text?: Override<SharedProps & Record<string, any>>;
         Loader?: Override<SharedProps & Record<string, any>>;
         BeatLoaderBall?: Override<SharedProps & Record<string, any>>;
+        SpinnerStick?: Override<SharedProps & Record<string, any>>;
     };
 };

package/locale/context.d.ts

@@ -10,7 +10,7 @@ export declare const LocaleProvider: {
     (props: {
         children?: React.ReactNode;
         locale?: DeepPartial<Locale>;
-    }): JSX.Element;
+    }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export {};

package/locale/en_US.js

@@ -4,6 +4,10 @@ exports.DEFAULT_LOCALE = void 0;
 exports.DEFAULT_LOCALE = {
     colorPicker: {
         resetButtonLabel: 'Reset Color',
+        colorLibraryLabel: 'Color Library',
+        solidColorLabel: 'Solid Color',
+        gradientColorLabel: 'Gradient Color',
+        selectColorLabel: 'Select Color',
     },
     select: {
         noResultsMsg: 'No Results',
@@ -12,6 +16,7 @@ exports.DEFAULT_LOCALE = {
         selectPlaceholder: 'Select...',
         clearOptionLabel: 'Unassign',
         selectedValuesPrefix: 'Selected ${values}.',
+        collapsibleMenuDescription: 'You are currently using a collapsible grouped menu. To move to next group press Shift and down arrow. To move to previous group press Shift and up arrow.',
     },
     asyncSelect: {
         searchingText: 'Searching',

package/locale/types.d.ts

@@ -1,10 +1,10 @@
-import { TimeRangePickerLocale } from '../time-range-picker';
-import { SelectLocale } from '../select';
-import { AsyncSelectLocale } from '../asyncSelect';
-import { PhoneInputLocale } from '../phone-input';
-import { DatePickerLocale } from '../date-picker/locale';
-import { BannerLocale } from '../banner';
-import { ColorPickerLocale } from '../color-picker/locale';
+import type { TimeRangePickerLocale } from '../time-range-picker/locale';
+import type { SelectLocale } from '../select/locale';
+import type { AsyncSelectLocale } from '../asyncSelect/locale';
+import type { PhoneInputLocale } from '../phone-input/locale';
+import type { DatePickerLocale } from '../date-picker/locale';
+import type { BannerLocale } from '../banner/locale';
+import type { ColorPickerLocale } from '../color-picker/locale';
 export declare type Locale = {
     select: SelectLocale;
     colorPicker: ColorPickerLocale;

package/menu/helpers.d.ts

@@ -1,8 +1,15 @@
-import { Reducer } from './types';
+import { Reducer, TraversalFunction } from './types';
+export declare const nextItem: TraversalFunction;
+export declare const prevItem: TraversalFunction;
 /**
  * Checks if given item can be highlighted
  */
 export declare const canHighlightItem: (item?: HTMLElement | null | undefined) => boolean;
+/**
+ * https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/MenuList/MenuList.js
+ * Get index of next element which is not disabled
+ */
+export declare const getNextItemIndexToHighlight: (highlightedItem: HTMLElement | null, parentContainer: HTMLElement, traversalFunction: TraversalFunction) => HTMLElement | null;
 export declare const getFirstHighlightableElement: (listItemsContainerRef: HTMLElement) => {
     firstHighlightableItem: HTMLElement | null;
     firstSelectedItem: HTMLElement | null;

package/menu/helpers.js

@@ -1,14 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getNextHighlightedItem = exports.defaultReducer = exports.getFirstHighlightableElement = exports.canHighlightItem = void 0;
+exports.getNextHighlightedItem = exports.defaultReducer = exports.getFirstHighlightableElement = exports.getNextItemIndexToHighlight = exports.canHighlightItem = exports.prevItem = exports.nextItem = void 0;
 var nextItem = function (highlightedItem, parentContainer) {
     var _a;
     if (highlightedItem) {
         return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.nextElementSibling) !== null && _a !== void 0 ? _a : highlightedItem);
     }
-    return parentContainer.firstElementChild;
+    return parentContainer === null || parentContainer === void 0 ? void 0 : parentContainer.firstElementChild;
 };
+exports.nextItem = nextItem;
 var prevItem = function (highlightedItem) { var _a; return ((_a = highlightedItem === null || highlightedItem === void 0 ? void 0 : highlightedItem.previousElementSibling) !== null && _a !== void 0 ? _a : highlightedItem); };
+exports.prevItem = prevItem;
 /**
  * Checks if given item can be highlighted
  */
@@ -32,6 +34,7 @@ var getNextItemIndexToHighlight = function (highlightedItem, parentContainer, tr
     }
     return highlightedItem;
 };
+exports.getNextItemIndexToHighlight = getNextItemIndexToHighlight;
 var getFirstHighlightableElement = function (listItemsContainerRef) {
     var _a;
     var childItem = (_a = listItemsContainerRef.firstElementChild) !== null && _a !== void 0 ? _a : null, firstHighlightableItem = null, firstSelectedItem = null;
@@ -53,11 +56,11 @@ var getNextHighlightedItem = function (event, highlightedItem, parentContainer)
         case 'ArrowDown':
         case 'End':
             event.preventDefault(); // prevent body scroll
-            return getNextItemIndexToHighlight(highlightedItem, parentContainer, nextItem);
+            return (0, exports.getNextItemIndexToHighlight)(highlightedItem, parentContainer, exports.nextItem);
         case 'ArrowUp':
         case 'Home':
             event.preventDefault();
-            return getNextItemIndexToHighlight(highlightedItem, parentContainer, prevItem);
+            return (0, exports.getNextItemIndexToHighlight)(highlightedItem, parentContainer, exports.prevItem);
         case 'Enter': {
             // IME docs - If an Input Method Editor is processing key input and the event is keydown, return 229. https://www.w3.org/TR/uievents/#determine-keydown-keyup-keyCode
             // related PR in baseweb - https://github.com/uber/baseweb/pull/2284

package/menu/menu-item.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list").ListItemProps, "overrides" | "onMouseEnter" | "onMouseLeave"> & {
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("../list").ListItemProps, "onMouseEnter" | "onMouseLeave" | "overrides"> & {
     getChildMenu?: (() => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) | undefined;
     onMouseEnter?: (() => void) | undefined;
     onMouseLeave?: (() => void) | undefined;
@@ -27,9 +27,9 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
             } | undefined;
             selected?: boolean | undefined;
             startEnhancer?: import("../list/types").Enhancer<import("../list").ListItemSharedProps>;
-            tooltipContent?: React.ReactNode | import("baseui/popover").StatefulContentRenderProp;
+            tooltipContent?: React.ReactNode | import("../baseui/popover").StatefulContentRenderProp;
         } & Record<string, any>> | undefined;
-        Popover?: import("../overrides").Override<Omit<import("baseui/popover").PopoverProps, "children" | "overrides" | "triggerType" | "placement"> & {
+        Popover?: import("../overrides").Override<Omit<import("../baseui/popover").PopoverProps, "children" | "overrides" | "placement" | "triggerType"> & {
             overrides?: ({
                 Body?: import("../overrides").Override<any> | undefined;
                 Arrow?: import("../overrides").Override<any> | undefined;

package/menu/menu-item.js

@@ -26,10 +26,14 @@ var listItemOverrides = {
                         var getStyle = _a.getStyle, theme = _a.theme;
                         var $disabled = _b.$disabled, $highlighted = _b.$highlighted, $selected = _b.$selected, $outlined = _b.$outlined;
                         var hoverBackgroundColor = (0, themeHelpers_1.getComponentTheme)(theme, 'list').hoverBackgroundColor;
-                        return getStyle((0, classNames_1.default)({ 'outline-01 outline-offset-0': $outlined }), {
+                        return getStyle((0, classNames_1.default)({ 'outline-01': $outlined }), {
                             backgroundColor: $highlighted || $selected ? hoverBackgroundColor : 'none',
                             cursor: $disabled ? 'not-allowed' : 'pointer',
-                        });
+                        }, $outlined
+                            ? {
+                                outlineOffset: '-2px',
+                            }
+                            : {});
                     },
                 },
             },

package/modal/adapter.d.ts

@@ -1,4 +1,4 @@
-import { ROLE } from 'baseui/modal';
+import { ROLE } from '../baseui/modal';
 import { StyleUtils } from '../types';
 import { Role, Size } from './types';
 import { ValueOf } from '../utility-types';

package/modal/adapter.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.roleMap = exports.getWidthFromSize = void 0;
-var modal_1 = require("baseui/modal");
+var modal_1 = require("../baseui/modal");
 var getWidthFromSize = function (_a, size) {
     var px2rem = _a.px2rem;
     switch (size) {

package/modal/index.d.ts

@@ -1,7 +1,7 @@
 export { default as Modal } from './modal';
 export { default as ModalHeader } from './modal-header';
 export { default as ModalFooter } from './modal-footer';
-export { FocusOnce } from 'baseui/modal';
+export { FocusOnce } from '../baseui/modal';
 export { ModalBody, StyledRoot, StyledClose, StyledDialog, StyledDialogContainer, StyledModal, } from './styled-components';
 export type { SharedProps, ModalProps, ModalState, Size, Role, } from './types';
 export { CLOSE_SOURCE } from './types';

package/modal/index.js

@@ -10,7 +10,7 @@ var modal_header_1 = require("./modal-header");
 Object.defineProperty(exports, "ModalHeader", { enumerable: true, get: function () { return __importDefault(modal_header_1).default; } });
 var modal_footer_1 = require("./modal-footer");
 Object.defineProperty(exports, "ModalFooter", { enumerable: true, get: function () { return __importDefault(modal_footer_1).default; } });
-var modal_2 = require("baseui/modal");
+var modal_2 = require("../baseui/modal");
 Object.defineProperty(exports, "FocusOnce", { enumerable: true, get: function () { return modal_2.FocusOnce; } });
 var styled_components_1 = require("./styled-components");
 Object.defineProperty(exports, "ModalBody", { enumerable: true, get: function () { return styled_components_1.ModalBody; } });

package/modal/modal-footer.d.ts

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react';
 import { ModalFooterProps } from './types';
 declare const ModalFooter: {
-    (props: ModalFooterProps): ReactElement;
+    ({ noBorder, ...props }: ModalFooterProps): ReactElement;
     displayName: string;
 };
 export default ModalFooter;

package/modal/modal-footer.js

@@ -4,8 +4,9 @@ var tslib_1 = require("tslib");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_components_1 = require("./styled-components");
 var helpers_1 = require("../helpers");
-var ModalFooter = function (props) {
-    var sharedProps = (0, helpers_1.add$props)({ noBorder: props.noBorder });
+var ModalFooter = function (_a) {
+    var noBorder = _a.noBorder, props = (0, tslib_1.__rest)(_a, ["noBorder"]);
+    var sharedProps = (0, helpers_1.add$props)({ noBorder: noBorder });
     return (0, jsx_runtime_1.jsx)(styled_components_1.StyledModalFooter, (0, tslib_1.__assign)({}, props, sharedProps), void 0);
 };
 ModalFooter.displayName = 'ModalFooter';

package/modal/modal.js

@@ -3,8 +3,8 @@ 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 react_1 = require("react");
 var button_1 = require("../button");
-var useConvertOverrides_1 = require("../helpers/baseui/useConvertOverrides");
 var close_1 = (0, tslib_1.__importDefault)(require("../icon/components/close"));
 var style_1 = require("../style");
 var adapter_1 = require("./adapter");
@@ -12,24 +12,27 @@ var overrides_1 = require("./overrides");
 var styled_components_1 = require("./styled-components");
 var helpers_1 = require("../helpers");
 var locale_1 = require("../locale");
+var overrides_2 = require("../overrides");
 var CloseButton = function (closeProps) { return ((0, jsx_runtime_1.jsx)(button_1.IconButton, (0, tslib_1.__assign)({}, closeProps, { children: (0, jsx_runtime_1.jsx)(close_1.default, {}, void 0) }), void 0)); };
 var Modal = function (_a) {
     var _b = _a.size, size = _b === void 0 ? 'md' : _b, _c = _a.role, role = _c === void 0 ? 'dialog' : _c, ariaLabel = _a.ariaLabel, overrides = _a.overrides, props = (0, tslib_1.__rest)(_a, ["size", "role", "ariaLabel", "overrides"]);
     var utils = (0, style_1.useStyle)();
     var theme = utils.theme;
-    var sharedProps = (0, helpers_1.add$props)({ dialogSize: size });
+    var sharedProps = (0, react_1.useMemo)(function () { return (0, helpers_1.add$props)({ dialogSize: size }); }, [size]);
     var locale = (0, locale_1.useLocale)();
-    var _overrides = (0, useConvertOverrides_1.useConvertOverrides)({
-        DialogContainer: { style: overrides_1.getDialogContainerStyles, props: sharedProps },
-        Dialog: {
-            style: overrides_1.getDialogStyles,
-            props: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (ariaLabel ? { 'aria-label': ariaLabel } : undefined)), sharedProps),
-        },
-        Close: {
-            component: CloseButton,
-            props: (0, overrides_1.getCloseButtonProps)(utils, sharedProps, locale.modal.closeAriaLabel),
-        },
-    }, overrides, [overrides, theme]);
+    var _overrides = (0, react_1.useMemo)(function () {
+        return (0, overrides_2.mergeOverrides)({
+            DialogContainer: { style: overrides_1.getDialogContainerStyles, props: sharedProps },
+            Dialog: {
+                style: overrides_1.getDialogStyles,
+                props: (0, tslib_1.__assign)((0, tslib_1.__assign)({}, (ariaLabel ? { 'aria-label': ariaLabel } : undefined)), sharedProps),
+            },
+            Close: {
+                component: CloseButton,
+                props: (0, overrides_1.getCloseButtonProps)(utils, sharedProps, locale.modal.closeAriaLabel),
+            },
+        }, overrides);
+    }, [sharedProps, ariaLabel, utils, locale.modal.closeAriaLabel, overrides]);
     return ((0, jsx_runtime_1.jsx)(styled_components_1.StyledModal, (0, tslib_1.__assign)({}, props, { size: (0, adapter_1.getWidthFromSize)(utils, size), role: adapter_1.roleMap[role], overrides: _overrides }), void 0));
 };
 Modal.displayName = 'Modal';

package/modal/overrides.js

@@ -2,14 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getCloseButtonProps = exports.getDialogStyles = exports.getDialogContainerStyles = void 0;
 var tslib_1 = require("tslib");
+var longHandHelpers_1 = require("../helpers/longHandHelpers");
 var getDialogHeightControl = function (_a, _b) {
     var px2rem = _a.px2rem;
     var $dialogSize = _b.$dialogSize;
     switch ($dialogSize) {
         case 'sm':
-            return { maxHeight: px2rem(560) };
+            return { maxHeight: "min(".concat(px2rem(560), ",95%)") };
         case 'md':
-            return { maxHeight: px2rem(660) };
+            return { maxHeight: "min(".concat(px2rem(660), ", 95%)") };
         case 'lg':
             return { height: '90%' };
         case 'fullPage':
@@ -32,7 +33,7 @@ var transitionDuration = function (_a, _b) {
     return ($animate ? { transitionDuration: '200ms' } : {});
 };
 exports.getDialogContainerStyles = [
-    'border-box spr-overlay',
+    'border-box spr-overlay h-full',
     getDialogContainerHeightControl,
     transitionDuration,
 ];
@@ -50,18 +51,10 @@ var getCloseButtonProps = function (_a, _b, ariaLabel) {
         overrides: {
             BaseButton: {
                 style: (0, tslib_1.__assign)({ position: 'absolute', top: px2rem(12), right: px2rem(16) }, ($dialogSize === 'fullPage'
-                    ? {
-                        top: px2rem(-44),
-                        right: px2rem(0),
-                        backgroundColor: theme.spr.ui01,
-                        color: theme.spr.icon02,
-                        borderColor: theme.borderColor.transparent,
-                        ':hover': {
+                    ? (0, tslib_1.__assign)((0, tslib_1.__assign)({ top: px2rem(-44), right: px2rem(0), backgroundColor: theme.spr.ui01, color: theme.spr.icon02 }, (0, longHandHelpers_1.borderColor)(theme.borderColor.transparent)), { ':hover': {
                             color: theme.spr.ui04,
                             backgroundColor: theme.spr.ui06,
-                        },
-                    }
-                    : {})),
+                        } }) : {})),
             },
         },
     });

package/modal/styled-components.d.ts

@@ -1,6 +1,6 @@
-import { ModalProps as BaseModalProps } from 'baseui/modal';
+import { ModalProps as BaseModalProps } from '../baseui/modal';
 import * as React from 'react';
-export { StyledRoot, StyledClose, StyledDialog, StyledDialogContainer } from 'baseui/modal';
+export { StyledRoot, StyledClose, StyledDialog, StyledDialogContainer } from '../baseui/modal';
 export declare const StyledModal: React.ComponentType<BaseModalProps>;
 export declare const StyledModalHeader: import("../style/styled").StyledComponent;
 export declare const ModalBody: import("../style/styled").StyledComponent;

package/modal/styled-components.js

@@ -1,26 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.StyledModalFooter = exports.ModalBody = exports.StyledModalHeader = exports.StyledModal = exports.StyledDialogContainer = exports.StyledDialog = exports.StyledClose = exports.StyledRoot = void 0;
-var tslib_1 = require("tslib");
-var modal_1 = require("baseui/modal");
-var withThemeOverride_1 = (0, tslib_1.__importDefault)(require("../helpers/baseui/withThemeOverride"));
+var modal_1 = require("../baseui/modal");
 var style_1 = require("../style");
-var modal_2 = require("baseui/modal");
+var modal_2 = require("../baseui/modal");
 Object.defineProperty(exports, "StyledRoot", { enumerable: true, get: function () { return modal_2.StyledRoot; } });
 Object.defineProperty(exports, "StyledClose", { enumerable: true, get: function () { return modal_2.StyledClose; } });
 Object.defineProperty(exports, "StyledDialog", { enumerable: true, get: function () { return modal_2.StyledDialog; } });
 Object.defineProperty(exports, "StyledDialogContainer", { enumerable: true, get: function () { return modal_2.StyledDialogContainer; } });
 // @ts-ignore
 modal_1.Modal.displayName = 'BaseUIModal';
-exports.StyledModal = (0, withThemeOverride_1.default)(modal_1.Modal, function (theme) { return ({
-    colors: {
-        backgroundPrimary: theme.spr.popup,
-        modalCloseColor: theme.spr.icon02,
-        modalCloseColorHover: theme.spr.icon01,
-        contentPrimary: theme.spr.text01,
-        contentSecondary: theme.spr.text02,
-    },
-}); });
+exports.StyledModal = modal_1.Modal;
 exports.StyledModalHeader = (0, style_1.styled)('div', 'typography-h4 spr-text-01 font-bold border-t-0 border-r-0 border-l-0 pt-4 px-6', function (_a, _b) {
     var px2rem = _a.px2rem;
     var $noBorder = _b.$noBorder;

package/modal/types.d.ts

@@ -1,4 +1,4 @@
-import { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from 'baseui/modal';
+import { ModalOverrides, ModalProps as BaseModalProps, SharedStylePropsArg } from '../baseui/modal';
 import { Override } from '../overrides';
 import { SpacewebComponentProps } from '../types';
 export declare type Size = 'sm' | 'md' | 'lg' | 'fullPage';
@@ -20,5 +20,5 @@ export declare type ModalHeaderProps = SpacewebComponentProps & {
 export declare type ModalFooterProps = SpacewebComponentProps & {
     noBorder?: boolean;
 };
-export type { ModalState } from 'baseui/modal';
-export { CLOSE_SOURCE } from 'baseui/modal';
+export type { ModalState } from '../baseui/modal';
+export { CLOSE_SOURCE } from '../baseui/modal';

package/modal/types.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CLOSE_SOURCE = void 0;
-var modal_1 = require("baseui/modal");
+var modal_1 = require("../baseui/modal");
 Object.defineProperty(exports, "CLOSE_SOURCE", { enumerable: true, get: function () { return modal_1.CLOSE_SOURCE; } });

package/overrides/useOverrides.js

@@ -2,7 +2,7 @@
 /* eslint @typescript-eslint/no-explicit-any: 0 */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useOverrides = exports.getOverrides = void 0;
-var overrides_1 = require("baseui/helpers/overrides");
+var overrides_1 = require("../baseui/helpers/overrides");
 var react_1 = require("react");
 var getOverrides = function (override, defaultComponent) {
     if (override === void 0) { override = {}; }