@adaptabletools/adaptable-cjs 19.2.4 → 20.0.0-canary.0

package/src/components/Dashboard/Dashboard.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ReactElement, ReactNode, Dispatch, SetStateAction } from 'react';
 import { DashboardTabProps } from './DashboardTab';
 export type DashboardPosition = {
@@ -28,4 +29,4 @@ export type DashboardProps = {
     defaultPosition?: DashboardPosition;
     onPositionChange?: Dispatch<SetStateAction<DashboardPosition>>;
 };
-export declare function Dashboard(props: DashboardProps): JSX.Element;
+export declare function Dashboard(props: DashboardProps): React.JSX.Element;

package/src/components/Dashboard/Dashboard.js

@@ -42,11 +42,10 @@ function Dashboard(props) {
                 }
             } }, child.props.title)))));
     const renderTabsDropdown = () => {
-        var _a, _b, _c;
         if (children && children.length < 2) {
             return null;
         }
-        const activeTabTitle = (_c = (_b = (_a = children === null || children === void 0 ? void 0 : children[activeTabIndex]) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b.title) !== null && _c !== void 0 ? _c : 'Select Toolbar';
+        const activeTabTitle = children?.[activeTabIndex]?.props?.title ?? 'Select Toolbar';
         return (React.createElement(DropdownButton_1.default, { ml: 1, columns: ['label'], items: React.Children.map(children, (child, index) => ({
                 value: String(index),
                 label: child.props.title,

package/src/components/Dashboard/DashboardToolbar.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ReactNode } from 'react';
 import { AccessLevel } from '../../PredefinedConfig/Common/Entitlement';
 export type DashboardToolbarProps = {
@@ -11,4 +12,4 @@ export type DashboardToolbarProps = {
     showClose: boolean;
     accessLevel: AccessLevel;
 };
-export declare function DashboardToolbar(props: DashboardToolbarProps): JSX.Element;
+export declare function DashboardToolbar(props: DashboardToolbarProps): React.JSX.Element;

package/src/components/Dashboard/DashboardToolbar.js

@@ -11,7 +11,7 @@ function DashboardToolbar(props) {
         React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
         React.createElement(rebass_1.Flex, { className: "ab-Dashboard__toolbar-title", flexDirection: "row", alignItems: "center" },
             React.createElement("span", null, props.title),
-            props.showConfigure && (React.createElement(SimpleButton_1.default, { icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Configure ${props.title} Toolbar`, onClick: () => props.onConfigure() })),
+            props.showConfigure && (React.createElement(SimpleButton_1.default, { icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
             ' ',
             props.showClose && (React.createElement(SimpleButton_1.default, { style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
 }

package/src/components/Datepicker/DatepickerContext.d.ts

@@ -2,8 +2,10 @@ import * as React from 'react';
 export declare const DatepickerContext: React.Context<{
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
+    locale?: Locale;
 }>;
 export declare const useDatepickerContext: () => {
     onHide?: (keyboardEventKey?: string) => void;
     onShow?: VoidFunction;
+    locale?: Locale;
 };

package/src/components/Datepicker/index.d.ts

@@ -4,6 +4,7 @@ import { DatepickerButton } from '../../AdaptableOptions/DateInputOptions';
 export type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'defaultValue'> & {
     value: Date | undefined;
     defaultValue?: Date | undefined;
+    autoFocus?: boolean;
     onChange: (value: Date | undefined) => void;
     onHide?: VoidFunction;
     showClearButton?: boolean;
@@ -15,4 +16,4 @@ export type DatepickerProps = Omit<BoxProps, 'value' | 'onChange' | 'defaultValu
     showWeekNumber?: boolean;
     showOutsideDays?: boolean;
 };
-export declare const Datepicker: React.ForwardRefExoticComponent<Pick<DatepickerProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "rows" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "step" | "sizes" | "variant" | "tx" | "as" | "css" | "key" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "type" | "useMap" | "wmode" | "onHide" | "showClearButton" | "datepickerButtons" | "dateProps" | "showWeekNumber" | "showOutsideDays"> & React.RefAttributes<HTMLInputElement>>;
+export declare const Datepicker: React.ForwardRefExoticComponent<Omit<DatepickerProps, "ref"> & React.RefAttributes<HTMLInputElement>>;

package/src/components/Datepicker/index.js

@@ -10,58 +10,50 @@ const FieldWrap_1 = tslib_1.__importDefault(require("../FieldWrap"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const rebass_1 = require("rebass");
 const FormatHelper_1 = require("../../Utilities/Helpers/FormatHelper");
-const Caption_1 = require("./Caption");
-const CaptionLabel_1 = require("./CaptionLabel");
 const DatepickerContext_1 = require("./DatepickerContext");
-const addDays_1 = tslib_1.__importDefault(require("date-fns/addDays"));
-const addBusinessDays_1 = tslib_1.__importDefault(require("date-fns/addBusinessDays"));
 const react_day_picker_1 = require("react-day-picker");
 const AdaptableDateInlineInput_1 = require("../../View/Components/AdaptableInput/AdaptableDateInlineInput");
 const date_fns_1 = require("date-fns");
 const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
-    React.useEffect(() => {
-        var _a;
-        (_a = domRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, []);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, tabIndex: -1, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
-            var _a;
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
             const { relatedTarget } = e;
             const node = domRef.current;
             // relatedTarget is the newly focused element as a result of this blur event
             // so we close the overlay when the newly focused element is outside the overlay
-            if (relatedTarget == null || !((_a = node.contains) === null || _a === void 0 ? void 0 : _a.call(node, relatedTarget))) {
+            if (relatedTarget == null || !node.contains?.(relatedTarget)) {
                 onHide();
             }
         } }, children));
 };
+const END_MONTH = (0, date_fns_1.endOfYear)((0, date_fns_1.addYears)(new Date(), 10));
+const START_MONTH = (0, date_fns_1.startOfYear)((0, date_fns_1.addYears)(new Date(), -50));
 exports.Datepicker = React.forwardRef((props, ref) => {
-    var _a;
-    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, datepickerButtons } = props, boxProps = tslib_1.__rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "datepickerButtons"]);
+    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, datepickerButtons, showClearButton, autoFocus, ...boxProps } = props;
     const datepickerContext = (0, DatepickerContext_1.useDatepickerContext)();
     let [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
         onChange: props.onChange,
     });
-    const useInputOptions = Object.assign(Object.assign({}, dateProps), { required });
-    if (value && value instanceof Date && !isNaN(+value)) {
-        useInputOptions.defaultSelected = value;
-    }
-    const [month, setMonth] = (0, react_1.useState)(value !== null && value !== void 0 ? value : new Date());
-    const { dayPickerProps, setSelected } = (0, react_day_picker_1.useInput)(useInputOptions);
+    (0, react_1.useEffect)(() => {
+        // when value is reset, also reset the month to the current month
+        if (!value) {
+            setMonth(new Date());
+        }
+    }, [!!value]);
+    const [month, setMonth] = (0, react_1.useState)(value ?? new Date());
     const updateValue = (value) => {
         setValue(value);
-        setSelected(value);
+        setMonth(value ?? new Date());
     };
-    const inputValue = (_a = (0, FormatHelper_1.DateFormatter)(value, { Pattern: dateProps.format })) !== null && _a !== void 0 ? _a : '';
+    const inputValue = (0, FormatHelper_1.DateFormatter)(value, { Pattern: dateProps.format }) ?? '';
     const [visible, doSetVisible] = (0, react_1.useState)(false);
     const setVisible = (visible, keyboardEventKey) => {
-        var _a, _b;
         doSetVisible(visible);
         if (!visible) {
-            (_a = datepickerContext === null || datepickerContext === void 0 ? void 0 : datepickerContext.onHide) === null || _a === void 0 ? void 0 : _a.call(datepickerContext, keyboardEventKey);
+            datepickerContext?.onHide?.(keyboardEventKey);
         }
         else {
-            (_b = datepickerContext === null || datepickerContext === void 0 ? void 0 : datepickerContext.onShow) === null || _b === void 0 ? void 0 : _b.call(datepickerContext);
+            datepickerContext?.onShow?.();
         }
     };
     const clearValue = () => {
@@ -73,18 +65,18 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         clear: renderButton('Clear', () => clearValue()),
         close: renderButton('Close', () => setVisible(false)),
         today: renderButton('Today', () => updateValue(todayDate)),
-        tomorrow: renderButton('Tomorrow', () => updateValue((0, addDays_1.default)(todayDate, 1))),
-        yesterday: renderButton('Yesterday', () => updateValue((0, addDays_1.default)(todayDate, -1))),
-        nextWorkday: renderButton('Next Workday', () => updateValue((0, addBusinessDays_1.default)(todayDate, 1))),
-        prevWorkday: renderButton('Prev Workday', () => updateValue((0, addBusinessDays_1.default)(todayDate, -1))),
+        tomorrow: renderButton('Tomorrow', () => updateValue((0, date_fns_1.addDays)(todayDate, 1))),
+        yesterday: renderButton('Yesterday', () => updateValue((0, date_fns_1.addDays)(todayDate, -1))),
+        nextWorkday: renderButton('Next Workday', () => updateValue((0, date_fns_1.addBusinessDays)(todayDate, 1))),
+        prevWorkday: renderButton('Prev Workday', () => updateValue((0, date_fns_1.addBusinessDays)(todayDate, -1))),
         '-': React.createElement("div", { style: { flex: '1 1 1%' } }),
         '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
     };
     const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
-    const clearButton = (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
+    const clearButton = showClearButton !== false ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
             e.preventDefault();
             clearValue();
-        }, accessLevel: 'Full' }));
+        }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
     return (React.createElement(rebass_1.Flex, null,
         React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
@@ -92,19 +84,20 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                         setVisible(false, e.key);
                     }
                 } },
-                React.createElement(react_day_picker_1.DayPicker, Object.assign({ fixedWeeks: true }, dayPickerProps, { showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", month: isNaN(+month) ? new Date() : month, onMonthChange: setMonth, components: { Caption: Caption_1.Caption, CaptionLabel: CaptionLabel_1.CaptionLabel }, onSelect: updateValue, footer: React.createElement(rebass_1.Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) })))) },
-            React.createElement(FieldWrap_1.default, Object.assign({}, boxProps, { style: {
-                    borderRadius: style === null || style === void 0 ? void 0 : style.borderRadius,
-                    width: style === null || style === void 0 ? void 0 : style.width,
-                    maxWidth: style === null || style === void 0 ? void 0 : style.maxWidth,
+                React.createElement(react_day_picker_1.DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, footer: React.createElement(rebass_1.Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
+            React.createElement(FieldWrap_1.default, { ...boxProps, style: {
+                    borderRadius: style?.borderRadius,
+                    width: style?.width,
+                    maxWidth: style?.maxWidth,
+                    border: style?.border,
                 }, className: "ab-Datepicker", onFocus: () => {
                     if (!visible) {
                         setVisible(true);
                     }
-                } }),
+                } },
                 React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { ref: ref, value: inputValue, 
                     // We do not want to show the format when the date-picker is visible
-                    placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : '', onChange: (value) => {
+                    placeholder: placeholder ?? '', onChange: (value) => {
                         const date = new Date(value);
                         if ((0, date_fns_1.isValid)(date)) {
                             updateValue(date);

package/src/components/Dialog/index.js

@@ -15,7 +15,7 @@ const icons_1 = require("../icons");
 const WindowModal_1 = require("../WindowModal");
 const baseClassName = 'ab-Dialog';
 exports.Dialog = React.forwardRef((props, dialogRef) => {
-    let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps } = props, boxProps = tslib_1.__rest(props, ["modal", "fixed", "focusOnBrowserVisible", "autoFocus", "className", "children", "modalProps", "dismissOnClickOutside", "onDismiss", "windowModal", "windowModalProps"]);
+    let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps, ...boxProps } = props;
     modal = props.modal === undefined ? true : props.modal;
     fixed = props.fixed === undefined ? true : props.fixed;
     const [isOpen, setIsOpen] = (0, useIsOpen_1.default)(props);
@@ -105,20 +105,20 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
             e.nativeEvent.preventDialogDismiss = true;
         }
     };
-    const box = (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { onClick: (e) => {
+    const box = (React.createElement(rebass_1.Box, { ...boxProps, onClick: (e) => {
             setPreventDismissFlag(e);
             if (boxProps && boxProps.onClick) {
                 boxProps.onClick(e);
             }
-        }, onKeyDown: onKeyDown, className: (0, join_1.default)(baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef }),
+        }, onKeyDown: onKeyDown, className: (0, join_1.default)(baseClassName, modal ? `${baseClassName}--modal` : `${baseClassName}--not-modal`, className), ref: boxRef },
         children,
         closeButton));
     const content = fixed ? (React.createElement("div", { onClick: setPreventDismissFlag, className: `${baseClassName}-fixed-wrapper` }, box)) : (box);
     if (windowModal) {
-        return React.createElement(WindowModal_1.WindowModal, Object.assign({}, windowModalProps), content);
+        return React.createElement(WindowModal_1.WindowModal, { ...windowModalProps }, content);
     }
     if (modal) {
-        return (React.createElement(Modal_1.Modal, Object.assign({}, modalProps, { isOpen: isOpen, onBringToFront: bringToFront }), box));
+        return (React.createElement(Modal_1.Modal, { ...modalProps, isOpen: isOpen, onBringToFront: bringToFront }, box));
     }
     return content;
 });

package/src/components/DragAndDropContext/ModuleManager.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ModuleManager = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const dnd_1 = require("../dnd");
 const PanelWithButton_1 = require("../../View/Components/Panels/PanelWithButton");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const DragAndDropContext_1 = require("./DragAndDropContext");
@@ -12,7 +12,14 @@ const UnusedPanel_1 = require("./UnusedPanel");
 const ModuleManager = (props) => {
     const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, } = props;
     const contextValue = React.useMemo(() => {
-        const preparedPermittedAction = Object.assign({ createTab: true, editTabName: true, dragAndDropTab: true, deleteTab: true }, permittedActions);
+        const preparedPermittedAction = {
+            createTab: true,
+            editTabName: true,
+            dragAndDropTab: true,
+            deleteTab: true,
+            // override default permitted actions
+            ...permittedActions,
+        };
         return {
             permittedActions: preparedPermittedAction,
             availableItems: props.availableItems,
@@ -21,7 +28,7 @@ const ModuleManager = (props) => {
     const unusedItems = React.useMemo(() => availableItems
         .map((t) => t.Id)
         .filter((item) => {
-        return !tabs.some((tab) => { var _a; return (_a = tab.Items) === null || _a === void 0 ? void 0 : _a.includes(item); });
+        return !tabs.some((tab) => tab.Items?.includes(item));
     }), [tabs, availableItems]);
     const handleToolbarDragEnd = (result) => {
         const { source, destination, draggableId } = result;
@@ -56,17 +63,23 @@ const ModuleManager = (props) => {
         onTabsChange(tabs.map((tab, index) => {
             if (index !== tabIndex)
                 return tab;
-            return Object.assign(Object.assign({}, tab), { Items: tab.Items.filter((_, index) => index !== toolbarIndex) });
+            return {
+                ...tab,
+                Items: tab.Items.filter((_, index) => index !== toolbarIndex),
+            };
         }));
     };
     const handleChangeTabName = (tabIndex, tabName) => {
         onTabsChange(tabs.map((tab, index) => {
             if (index !== tabIndex)
                 return tab;
-            return Object.assign(Object.assign({}, tab), { Name: tabName });
+            return {
+                ...tab,
+                Name: tabName,
+            };
         }));
     };
-    return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
+    return (React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
             if (result.type === 'TAB')
                 handleTabDragEnd(result);
             if (result.type === 'TOOLBAR')

package/src/components/DragAndDropContext/TabList.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { BaseModuleTab } from './types';
 export declare function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }: {
     disabled: boolean;
@@ -6,7 +6,7 @@ export declare function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTa
     onRemoveTab: (tabIndex: number) => void;
     onRemoveToolbar: (tabIndex: number, toolbarIndex: number) => void;
     onChangeTabName: (tabIndex: number, tabName: string) => void;
-}): JSX.Element;
+}): React.JSX.Element;
 export declare function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }: {
     tab: BaseModuleTab;
     tabIndex: number;
@@ -14,16 +14,16 @@ export declare function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onCh
     onRemove: () => void;
     onRemoveToolbar: (toolbarIndex: number) => void;
     onChangeTabName: (tabName: string) => void;
-}): JSX.Element;
+}): React.JSX.Element;
 export declare function ToolbarList({ toolbars, droppableId, onRemove, disabled, }: {
     toolbars: string[];
     droppableId: string;
     disabled: boolean;
     onRemove: (toolbarIndex: number) => void;
-}): JSX.Element;
+}): React.JSX.Element;
 export declare function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }: {
     disabled: boolean;
     toolbar: string;
     toolbarIndex: number;
     onRemove: () => void;
-}): JSX.Element;
+}): React.JSX.Element;

package/src/components/DragAndDropContext/TabList.js

@@ -3,13 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ToolbarItem = exports.ToolbarList = exports.TabItem = exports.TabList = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const dnd_1 = require("../dnd");
 const rebass_1 = require("rebass");
 const icons_1 = require("../icons");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const DragAndDropContext_1 = require("./DragAndDropContext");
 function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({}, provided.droppableProps, { className: "ab-ModuleSelector__TabList", ref: provided.innerRef, style: { display: 'flex' }, "data-name": "dashboard-tabs" }),
+    return (React.createElement(dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList", ref: provided.innerRef, style: { display: 'flex' }, "data-name": "dashboard-tabs" },
         tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
         provided.placeholder))));
 }
@@ -17,13 +17,15 @@ exports.TabList = TabList;
 function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
     const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", Object.assign({ className: "ab-ModuleSelector__TabItem", "data-name": "dashboard-tab", ref: provided.innerRef }, provided.draggableProps, { style: Object.assign({}, (isDragDisabled ? {} : provided.draggableProps.style)) }),
+    return (React.createElement(dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", { className: "ab-ModuleSelector__TabItem", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
+            ...(isDragDisabled ? {} : provided.draggableProps.style),
+        } },
         React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
-            React.createElement("div", Object.assign({}, (disabled ? {} : provided.dragHandleProps), { style: context.permittedActions.dragAndDropTab
+            React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
                     ? {}
                     : {
                         display: 'none',
-                    } }),
+                    } },
                 React.createElement(icons_1.Icon, { name: "drag" })),
             context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
                     onChangeTabName(event.target.value);
@@ -33,8 +35,8 @@ function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, di
 }
 exports.TabItem = TabItem;
 function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, Object.assign({ className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef }, (disabled ? {} : provided.droppableProps), { "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' }), toolbars === null || toolbars === void 0 ? void 0 :
-        toolbars.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
+    return (React.createElement(dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' },
+        toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
         provided.placeholder))));
 }
 exports.ToolbarList = ToolbarList;
@@ -42,9 +44,9 @@ function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     let currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(rebass_1.Flex, Object.assign({ className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", mb: 1, pl: 1, backgroundColor: snapshot.isDragging
+    return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(rebass_1.Flex, { className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", mb: 1, pl: 1, backgroundColor: snapshot.isDragging
             ? 'var(--ab-dashboard-toolbar-drag__background)'
-            : 'var(--ab-color-primarylight)', ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
+            : 'var(--ab-color-primarylight)', ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style },
         React.createElement("div", { style: { flex: 1 } }, title),
         React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", padding: 1, onClick: onRemove })))));
 }

package/src/components/DragAndDropContext/UnusedPanel.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import * as React from 'react';
 export declare function UnusedPanel({ items, disabled, title, dragItemText, }: {
     title: string;
     items: string[];
     disabled: boolean;
     dragItemText: string;
-}): JSX.Element;
+}): React.JSX.Element;

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.UnusedPanel = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_beautiful_dnd_1 = require("react-beautiful-dnd");
+const dnd_1 = require("../dnd");
 const rebass_1 = require("rebass");
 const DragAndDropContext_1 = require("./DragAndDropContext");
 function UnusedPanel({ items, disabled, title, dragItemText, }) {
@@ -17,13 +17,13 @@ function UnusedPanel({ items, disabled, title, dragItemText, }) {
 }
 exports.UnusedPanel = UnusedPanel;
 function UnusedItemList({ items, disabled }) {
-    return (React.createElement(react_beautiful_dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", Object.assign({ ref: provided.innerRef, "data-name": "unusedpanel-items-list" }, provided.droppableProps, { style: {
+    return (React.createElement(dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, style: {
             display: 'flex',
             flexDirection: 'row',
             flexWrap: 'wrap',
             paddingLeft: 'var(--ab-space-2)',
             paddingRight: 'var(--ab-space-2)',
-        } }),
+        } },
         items.map((unusedItem, unusedItemIndex) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem, unusedItemIndex: unusedItemIndex }))),
         provided.placeholder))));
 }
@@ -31,13 +31,23 @@ function UnusedItem({ unusedItem, unusedItemIndex, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     let currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return (React.createElement(react_beautiful_dnd_1.Draggable, { isDragDisabled: disabled, draggableId: unusedItem, index: unusedItemIndex }, (provided, snapshot) => {
+    return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: unusedItem, index: unusedItemIndex }, (provided, snapshot) => {
         const eventHandlers = disabled
             ? {}
-            : Object.assign(Object.assign({}, provided.draggableProps), provided.dragHandleProps);
+            : {
+                ...provided.draggableProps,
+                ...provided.dragHandleProps,
+            };
         const dragStyle = disabled ? {} : provided.draggableProps.style;
-        return (React.createElement("div", Object.assign({ "data-name": "unused-item", ref: provided.innerRef }, eventHandlers, { style: Object.assign(Object.assign({}, dragStyle), { border: '1px solid var(--ab-color-primary)', backgroundColor: snapshot.isDragging
+        return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, style: {
+                ...dragStyle,
+                border: '1px solid var(--ab-color-primary)',
+                backgroundColor: snapshot.isDragging
                     ? 'var(--ab-dashboard-toolbar-drag__background)'
-                    : 'var(--ab-color-primarylight)', padding: 'var(--ab-space-1) var(--ab-space-2)', marginRight: 'var(--ab-space-1)', marginBottom: 'var(--ab-space-1)' }) }), title));
+                    : 'var(--ab-color-primarylight)',
+                padding: 'var(--ab-space-1) var(--ab-space-2)',
+                marginRight: 'var(--ab-space-1)',
+                marginBottom: 'var(--ab-space-1)',
+            } }, title));
     }));
 }

package/src/components/Drawer/index.js

@@ -26,10 +26,9 @@ const Drawer = (props) => {
         }
     }, [props.open]);
     const handleOnKeyDown = React.useCallback((event) => {
-        var _a;
         // escape
         if (event.key === 'Escape') {
-            (_a = props.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(props, false);
+            props.onOpenChange?.(false);
         }
     }, []);
     const handletransitionEnd = () => {

package/src/components/Dropdown/Arrows.d.ts

@@ -1,3 +1,3 @@
-/// <reference types="react" />
-declare const Arrows: () => JSX.Element;
+import * as React from 'react';
+declare const Arrows: () => React.JSX.Element;
 export default Arrows;

package/src/components/Dropdown/index.d.ts

@@ -26,5 +26,5 @@ export type DropdownProps = Omit<BoxProps, 'onChange' | 'value'> & {
     onExpand?: () => void | Function;
     onSelect?: () => void | Function;
 };
-declare const Dropdown: (props: DropdownProps) => JSX.Element;
+declare const Dropdown: (props: DropdownProps) => React.JSX.Element;
 export default Dropdown;

package/src/components/Dropdown/index.js

@@ -10,7 +10,7 @@ const Arrows_1 = tslib_1.__importDefault(require("./Arrows"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const baseClassName = 'ab-Dropdown';
 const Dropdown = (props) => {
-    let { options, multiple, name, autoFocus, showEmptyItem = true, showClearButton, disabled, allowSearch, clearButtonProps, value: _, onChange: __, style, onExpand } = props, boxProps = tslib_1.__rest(props, ["options", "multiple", "name", "autoFocus", "showEmptyItem", "showClearButton", "disabled", "allowSearch", "clearButtonProps", "value", "onChange", "style", "onExpand"]);
+    let { options, multiple, name, autoFocus, showEmptyItem = true, showClearButton, disabled, allowSearch, clearButtonProps, value: _, onChange: __, style, onExpand, ...boxProps } = props;
     if (showClearButton !== false) {
         showClearButton = true;
     }
@@ -79,11 +79,15 @@ const Dropdown = (props) => {
         selectedText = placeholder;
     }
     //20  ... 20 16
-    const renderClearButton = () => (React.createElement(SimpleButton_1.default, Object.assign({ variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1 }, clearButtonProps, { style: Object.assign({ zIndex: 10, color: 'inherit' }, (clearButtonProps ? clearButtonProps.style : null)), onClick: (e) => {
+    const renderClearButton = () => (React.createElement(SimpleButton_1.default, { variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1, ...clearButtonProps, style: {
+            zIndex: 10,
+            color: 'inherit',
+            ...(clearButtonProps ? clearButtonProps.style : null),
+        }, onClick: (e) => {
             e.preventDefault();
             onChange(null, e);
-        } })));
-    return (React.createElement(rebass_1.Flex, Object.assign({ ref: domRef, flexDirection: "row", alignItems: "center" }, boxProps, { className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur }),
+        } }));
+    return (React.createElement(rebass_1.Flex, { ref: domRef, flexDirection: "row", alignItems: "center", ...boxProps, className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur },
         React.createElement("div", { style: { display: 'inline-block' }, className: `${baseClassName}__text` },
             selectedText,
             React.createElement(Arrows_1.default, null)),

package/src/components/DropdownButton/index.d.ts

@@ -4,13 +4,14 @@ import { SimpleButtonProps } from '../SimpleButton';
 import { ExpandedProps } from './useExpanded';
 import DropdownButtonItem from './DropdownButtonItem';
 import { OverlayTriggerProps } from '../OverlayTrigger';
-export declare const DROPDOWN_ICON: JSX.Element;
+export declare const DROPDOWN_ICON: React.JSX.Element;
 export type DropdownButtonProps = React.PropsWithChildren<Omit<BoxProps, 'ref'>> & Omit<React.HTMLProps<HTMLElement>, 'ref'> & SimpleButtonProps & ExpandedProps & {
     collapseOnItemClick?: boolean;
     columns?: string[];
     overlayProps?: OverlayTriggerProps;
     listOffset?: number;
     items?: DropdownButtonItem[];
+    stopPropagationOnOverlay?: boolean;
     idProperty?: string;
     showClearButton?: boolean;
     focusOnClear?: boolean;
@@ -31,6 +32,7 @@ declare const DropdownButton: React.ForwardRefExoticComponent<Omit<BoxProps, "re
     overlayProps?: OverlayTriggerProps;
     listOffset?: number;
     items?: DropdownButtonItem[];
+    stopPropagationOnOverlay?: boolean;
     idProperty?: string;
     showClearButton?: boolean;
     focusOnClear?: boolean;