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

package/src/components/OverlayTrigger/Overlay.js

@@ -14,7 +14,7 @@ const useRefresh = () => {
 };
 exports.useRefresh = useRefresh;
 const Overlay = React.forwardRef((props, ref) => {
-    const { visible } = props, domProps = tslib_1.__rest(props, ["visible"]);
+    const { visible, ...domProps } = props;
     const domRef = (0, react_1.useRef)(null);
     const setRef = (node) => {
         domRef.current = node;
@@ -37,10 +37,9 @@ const Overlay = React.forwardRef((props, ref) => {
         transitionInProgressRef.current = true;
     }
     const onTransitionEnd = () => {
-        var _a;
         transitionInProgressRef.current = false;
         refresh();
-        (_a = props === null || props === void 0 ? void 0 : props.onTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(props);
+        props?.onTransitionEnd?.();
     };
     const renderTime = Date.now();
     const renderTimeRef = (0, react_1.useRef)(renderTime);
@@ -68,6 +67,6 @@ const Overlay = React.forwardRef((props, ref) => {
     if (!visible && !transitionInProgress) {
         return null;
     }
-    return (React.createElement("div", Object.assign({}, domProps, { ref: setRef, style: Object.assign(Object.assign({}, props.style), { opacity }), onTransitionEnd: onTransitionEnd })));
+    return (React.createElement("div", { ...domProps, ref: setRef, style: { ...props.style, opacity }, onTransitionEnd: onTransitionEnd }));
 });
 exports.default = Overlay;

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

@@ -24,6 +24,7 @@ export interface OverlayTriggerProps extends React.HTMLAttributes<HTMLElement> {
     anchor?: 'vertical' | 'horizontal';
     alignPosition?: OverlayShowParams['alignPosition'];
     constrainTo?: ConstrainToType;
+    shouldHide?: (hideEvent: React.MouseEvent | React.FocusEvent) => boolean;
 }
 declare const OverlayTrigger: React.ForwardRefExoticComponent<OverlayTriggerProps & React.RefAttributes<{
     show: () => any;

package/src/components/OverlayTrigger/index.js

@@ -60,7 +60,7 @@ const defaultProps = {
     opacityTransitionDuration: '250ms',
 };
 const OverlayTrigger = React.forwardRef((givenProps, ref) => {
-    const props = Object.assign(Object.assign({}, defaultProps), givenProps);
+    const props = { ...defaultProps, ...givenProps };
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
         // overlay - target
@@ -80,7 +80,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
         ['TopLeft', 'TopRight'],
         ['CenterRight', 'CenterLeft'],
         ['CenterLeft', 'CenterRight'],
-    ], constrainTo, target: targetProp } = props, domProps = tslib_1.__rest(props, ["visible", "showTriangle", "showEvent", "hideEvent", "render", "targetOffset", "preventPortalEventPropagation", "defaultZIndex", "anchor", "hideDelay", "opacityTransitionDuration", "onVisibleChange", "alignPosition", "constrainTo", "target"]);
+    ], constrainTo, target: targetProp, ...domProps } = props;
     const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = (0, InfiniteTable_1.useOverlay)({
         portalContainer: portalElement,
     });
@@ -94,7 +94,7 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
     // when moving the mouse cursor from the trigger to the overlay
     // for this case we debounce the visible change for a very small amount of time
     (0, debounce_1.default)((visible) => {
-        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
+        onVisibleChange?.(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {
                 hideTimeoutRef.current = null;
@@ -123,7 +123,10 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
         }).commit();
     }, [constrainTo, preventPortalEventPropagation]);
     const onHide = React.useCallback((_event) => {
-        setVisible(false);
+        const shouldHide = props.shouldHide ? props.shouldHide(_event) : true;
+        if (shouldHide) {
+            setVisible(false);
+        }
     }, [setVisible]);
     (0, react_1.useEffect)(() => {
         if (ref) {
@@ -168,14 +171,13 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
         };
     }, [props.visible, showEvent, hideEvent, onShow, onHide]);
     React.useEffect(() => {
-        var _a, _b;
         const target = targetRef.current;
         if (!target) {
             return;
         }
         const targetWidth = target.getBoundingClientRect().width;
         if ((prevVisible && !visible) || visible) {
-            const overlayContent = (React.createElement(Overlay_1.default, Object.assign({}, domProps, { ref: (node) => {
+            const overlayContent = (React.createElement(Overlay_1.default, { ...domProps, ref: (node) => {
                     if (overlayRef.current && overlayRef.current != node) {
                         overlayRef.current.removeEventListener(showEvent, onShow);
                         overlayRef.current.removeEventListener(hideEvent, onHide);
@@ -190,17 +192,17 @@ const OverlayTrigger = React.forwardRef((givenProps, ref) => {
                         clearAllOverlays();
                         hideOverlay('overlay-trigger');
                     }
-                } }), props.render({ targetWidth: targetWidth })));
+                } }, props.render({ targetWidth: targetWidth })));
             let preparedConstrainTo;
             if (constrainTo) {
                 preparedConstrainTo = (0, exports.getConstrainElement)(targetRef.current, constrainTo);
             }
             // show only if visible or if it was visible and now it is invisible
-            const alignToRect = (0, utils_1.getRect)(target, targetOffset !== null && targetOffset !== void 0 ? targetOffset : 0);
+            const alignToRect = (0, utils_1.getRect)(target, targetOffset ?? 0);
             const showOverlayOptions = {
-                id: 'overlay-trigger',
+                id: 'overlay-trigger', // add id on props so component is not unmounted
                 alignPosition,
-                constrainTo: (_b = (_a = preparedConstrainTo === null || preparedConstrainTo === void 0 ? void 0 : preparedConstrainTo.getBoundingClientRect) === null || _a === void 0 ? void 0 : _a.call(preparedConstrainTo)) !== null && _b !== void 0 ? _b : true,
+                constrainTo: preparedConstrainTo?.getBoundingClientRect?.() ?? true, // at least constrain to document
                 alignTo: alignToRect,
             };
             showOverlay(() => overlayContent, showOverlayOptions);

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { BoxProps, FlexProps } from 'rebass';
 import { ReactNode, HTMLProps } from 'react';
 export declare const baseClassName = "ab-Panel";
@@ -5,6 +6,7 @@ export interface HeaderProps extends FlexProps {
 }
 export type PanelProps = HTMLProps<HTMLElement> & {
     header?: ReactNode | string;
+    children?: ReactNode;
     headerProps?: HeaderProps;
     bodyProps?: BoxProps;
     variant?: 'default' | 'primary' | 'modern';
@@ -12,5 +14,5 @@ export type PanelProps = HTMLProps<HTMLElement> & {
     borderRadius?: string | number;
     bodyScroll?: string | boolean;
 } & BoxProps;
-declare const Panel: (props: PanelProps) => JSX.Element;
+declare const Panel: React.FC<PanelProps>;
 export default Panel;

package/src/components/Panel/index.js

@@ -6,35 +6,39 @@ const React = tslib_1.__importStar(require("react"));
 const rebass_1 = require("rebass");
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 exports.baseClassName = 'ab-Panel';
-const Header = (_a) => {
-    var { children, variant = 'default' } = _a, headerProps = tslib_1.__rest(_a, ["children", "variant"]);
+const Header = ({ children, variant = 'default', ...headerProps }) => {
     if (!children) {
         return null;
     }
     const style = {};
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "row", alignItems: "center" }, headerProps, { style: Object.assign(Object.assign({}, style), headerProps.style), className: (0, join_1.default)(`${exports.baseClassName}__header`, `${exports.baseClassName}__header--variant-${variant}`) }), children));
+    return (React.createElement(rebass_1.Flex, { flexDirection: "row", alignItems: "center", ...headerProps, style: { ...style, ...headerProps.style }, className: (0, join_1.default)(`${exports.baseClassName}__header`, `${exports.baseClassName}__header--variant-${variant}`) }, children));
 };
-const Body = (_a) => {
-    var { children, bodyScroll, variant } = _a, bodyProps = tslib_1.__rest(_a, ["children", "bodyScroll", "variant"]);
+const Body = ({ children, bodyScroll, variant, ...bodyProps }) => {
     if (!children) {
         return null;
     }
     if (bodyScroll === true) {
         bodyScroll = 'auto';
     }
-    return (React.createElement(rebass_1.Box, Object.assign({}, bodyProps, { className: (0, join_1.default)(`${exports.baseClassName}__body`, variant && `${exports.baseClassName}__body--variant-${variant}`, bodyScroll ? `${exports.baseClassName}__body--scroll-${bodyScroll}` : null) }), children));
+    return (React.createElement(rebass_1.Box, { ...bodyProps, className: (0, join_1.default)(`${exports.baseClassName}__body`, variant && `${exports.baseClassName}__body--variant-${variant}`, bodyScroll ? `${exports.baseClassName}__body--scroll-${bodyScroll}` : null) }, children));
 };
 const Panel = (props) => {
-    const { borderRadius, border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default' } = props, boxProps = tslib_1.__rest(props, ["borderRadius", "border", "className", "header", "children", "headerProps", "bodyProps", "bodyScroll", "variant"]);
+    const { borderRadius, border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default', ...boxProps } = props;
     const style = {};
     if (borderRadius !== undefined) {
         style['--ab-cmp-panel__border-radius'] =
             typeof borderRadius == 'number' ? `var(--ab-space-${borderRadius})` : borderRadius;
     }
-    const headerStyle = Object.assign({ border }, (headerProps ? headerProps.style : null));
-    const bodyStyle = Object.assign({ border }, (bodyProps ? bodyProps.style : null));
-    return (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { style: Object.assign(Object.assign({}, style), boxProps.style), className: (0, join_1.default)(className, exports.baseClassName, `${exports.baseClassName}--variant-${variant}`, !header ? `${exports.baseClassName}--no-header` : `${exports.baseClassName}--with-header`) }),
-        React.createElement(Header, Object.assign({}, headerProps, { style: headerStyle, variant: variant }), header),
-        React.createElement(Body, Object.assign({}, bodyProps, { style: bodyStyle, bodyScroll: bodyScroll, variant: variant }), children)));
+    const headerStyle = {
+        border,
+        ...(headerProps ? headerProps.style : null),
+    };
+    const bodyStyle = {
+        border,
+        ...(bodyProps ? bodyProps.style : null),
+    };
+    return (React.createElement(rebass_1.Box, { ...boxProps, style: { ...style, ...boxProps.style }, className: (0, join_1.default)(className, exports.baseClassName, `${exports.baseClassName}--variant-${variant}`, !header ? `${exports.baseClassName}--no-header` : `${exports.baseClassName}--with-header`) },
+        React.createElement(Header, { ...headerProps, style: headerStyle, variant: variant }, header),
+        React.createElement(Body, { ...bodyProps, style: bodyStyle, bodyScroll: bodyScroll, variant: variant }, children)));
 };
 exports.default = Panel;

package/src/components/PopupWithFooter.js

@@ -6,8 +6,8 @@ const React = tslib_1.__importStar(require("react"));
 const Dialog_1 = tslib_1.__importDefault(require("./Dialog"));
 const FlexWithFooter_1 = tslib_1.__importDefault(require("./FlexWithFooter"));
 exports.PopupWithFooter = React.forwardRef((props, ref) => {
-    const { showModal, onHide, footer, maxWidth, style } = props, dialogProps = tslib_1.__rest(props, ["showModal", "onHide", "footer", "maxWidth", "style"]);
-    return (React.createElement(Dialog_1.default, Object.assign({}, dialogProps, { ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, padding: 0 }),
+    const { showModal, onHide, footer, maxWidth, style, ...dialogProps } = props;
+    return (React.createElement(Dialog_1.default, { ...dialogProps, ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, padding: 0 },
         React.createElement(FlexWithFooter_1.default, { flexDirection: "column", style: style, footer: footer, footerProps: {
                 padding: 2,
                 backgroundColor: 'primary',

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -12,7 +12,7 @@ const Dialog_1 = tslib_1.__importDefault(require("../Dialog"));
 const rebass_1 = require("rebass");
 const ProgressIndicator = () => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
-    const { active, text, render, frameworkComponent } = (0, react_redux_1.useSelector)((state) => state.System.ProgressIndicator);
+    const { active, text, render, frameworkComponent } = (0, react_redux_1.useSelector)((state) => state.Popup.ProgressIndicator);
     const [visible, setVisible] = (0, react_1.useState)(false);
     const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = (0, react_1.useState)({
         top: 0,
@@ -43,6 +43,7 @@ const ProgressIndicator = () => {
         disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
         disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
         updateGridContainerCoordinates(adaptable.getAgGridContainerElement());
+        // #raf_progress_indicator
         // without rAF the progress indicator would be rendered instantly, without the 'transition-delay' defined via CSS
         requestAnimationFrame(() => {
             setVisible(active);

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

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { ReactNode, SyntheticEvent } from 'react';
 import { BoxProps, FlexProps } from 'rebass';
 type TypeProps = {
@@ -6,7 +7,7 @@ type TypeProps = {
     name?: string;
     value?: any;
     onChange?: (checked: boolean, event?: SyntheticEvent | any) => void;
-    children?: ReactNode | JSX.Element;
+    children?: ReactNode | React.JSX.Element;
     gapDistance?: number;
     childrenPosition?: 'start' | 'end';
 };
@@ -17,12 +18,12 @@ export declare const useRadioContext: <T extends unknown>() => {
     onChange: (value: T) => void;
     name: string;
 };
-declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, disabled, ...props }: RadioProps) => JSX.Element;
+declare const Radio: ({ children, checked, onChange, value, name, gapDistance, childrenPosition, as, id, tabIndex, disabled, ...props }: RadioProps) => React.JSX.Element;
 export declare const RadioGroup: <T extends unknown>(props: FlexProps & {
     orientation: 'horizontal' | 'vertical';
     value?: T;
     name?: string;
     defaultValue?: T;
     onRadioChange?: (value: T) => void;
-}) => JSX.Element;
+}) => React.JSX.Element;
 export default Radio;

package/src/components/Radio/index.js

@@ -15,8 +15,7 @@ const useRadioContext = () => {
     return React.useContext(RadioContext);
 };
 exports.useRadioContext = useRadioContext;
-const Radio = (_a) => {
-    var { children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex, disabled } = _a, props = tslib_1.__rest(_a, ["children", "checked", "onChange", "value", "name", "gapDistance", "childrenPosition", "as", "id", "tabIndex", "disabled"]);
+const Radio = ({ children, checked, onChange, value, name, gapDistance = 10, childrenPosition = 'end', as = 'label', id, tabIndex, disabled, ...props }) => {
     const context = (0, exports.useRadioContext)();
     const { value: contextValue, onChange: contextOnChange, name: contextName } = context;
     const [stateChecked, setStateChecked] = (0, react_1.useState)(false);
@@ -42,11 +41,19 @@ const Radio = (_a) => {
     const beforeGap = childrenPosition === 'start' ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
     const afterGap = childrenPosition === 'end' ? gap : null;
-    return (React.createElement(rebass_1.Box, Object.assign({ className: "ab-Radio", my: 2 }, props, { style: Object.assign({ display: 'inline-flex', flexFlow: 'row', alignItems: 'center', cursor: 'pointer', position: 'relative' }, props.style), as: as }),
+    return (React.createElement(rebass_1.Box, { className: "ab-Radio", my: 2, ...props, style: {
+            display: 'inline-flex',
+            flexFlow: 'row',
+            alignItems: 'center',
+            cursor: 'pointer',
+            position: 'relative',
+            ...props.style,
+        }, as: as },
         before,
         beforeGap,
-        React.createElement("input", { disabled: disabled, className: "ab-Radio-input", id: id, checked: computedChecked, type: "radio", name: name !== null && name !== void 0 ? name : contextName, value: value, tabIndex: tabIndex, style: {
+        React.createElement("input", { disabled: disabled, className: "ab-Radio-input", id: id, checked: computedChecked, type: "radio", name: name ?? contextName, value: value, tabIndex: tabIndex, style: {
                 verticalAlign: 'middle',
+                margin: '0px',
                 borderRadius: '50%',
                 cursor: 'pointer',
                 position: 'relative',
@@ -55,14 +62,14 @@ const Radio = (_a) => {
         after));
 };
 const RadioGroup = (props) => {
-    const { orientation, value: _value, name, onRadioChange } = props, flexProps = tslib_1.__rest(props, ["orientation", "value", "name", "onRadioChange"]);
+    const { orientation, value: _value, name, onRadioChange, ...flexProps } = props;
     const [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
         onChange: (value) => {
             onRadioChange(value);
         },
     });
     return (React.createElement(RadioContext.Provider, { value: { value, onChange: setValue, name } },
-        React.createElement(rebass_1.Flex, Object.assign({ className: "ab-RadioGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start' }, flexProps))));
+        React.createElement(rebass_1.Flex, { className: "ab-RadioGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start', ...flexProps })));
 };
 exports.RadioGroup = RadioGroup;
 exports.default = Radio;

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

@@ -27,5 +27,5 @@ export declare const setupResizeObserver: (node: HTMLElement, callback: OnResize
 export declare const useResizeObserver: (ref: React.MutableRefObject<HTMLElement | null>, callback: OnResizeFn, config?: {
     earlyAttach: boolean;
 }) => void;
-export declare const ReactResizeObserver: ({ notifyOnMount, earlyAttach, ...props }: ResizeObserverProps) => JSX.Element;
+export declare const ReactResizeObserver: ({ notifyOnMount, earlyAttach, ...props }: ResizeObserverProps) => React.JSX.Element;
 export {};

package/src/components/ResizeObserver/index.js

@@ -11,10 +11,9 @@ const setupResizeObserver = (node, callback) => {
         return () => { };
     }
     const observer = new RO((entries) => {
-        var _a;
         const entry = entries[0];
         let { width, height } = entry.contentRect;
-        if ((_a = entry.borderBoxSize) === null || _a === void 0 ? void 0 : _a[0]) {
+        if (entry.borderBoxSize?.[0]) {
             height = entry.borderBoxSize[0].blockSize;
             width = entry.borderBoxSize[0].inlineSize;
         }
@@ -78,8 +77,7 @@ const useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
     }, [ref.current, callback, config.earlyAttach]);
 };
 exports.useResizeObserver = useResizeObserver;
-const ReactResizeObserver = (_a) => {
-    var { notifyOnMount = true, earlyAttach = false } = _a, props = tslib_1.__rest(_a, ["notifyOnMount", "earlyAttach"]);
+const ReactResizeObserver = ({ notifyOnMount = true, earlyAttach = false, ...props }) => {
     const style = (0, react_1.useMemo)(() => ({
         position: 'absolute',
         top: 0,

package/src/components/Select/Select.d.ts

@@ -11,8 +11,12 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     disabled?: boolean;
     menuPosition?: 'fixed' | 'absolute';
     menuPlacement?: 'auto' | 'bottom' | 'top';
+    menuStyle?: React.CSSProperties;
+    menuMinWidth?: string | number;
     searchable?: boolean;
     isClearable?: boolean;
+    closeMenuOnSelect?: boolean;
+    hideSelectedOptions?: boolean;
     isMulti?: IsMulti;
     onChange: (value: IsMulti extends true ? SelectValue[] : SelectValue) => void;
     value: IsMulti extends true ? SelectValue[] : SelectValue;
@@ -20,14 +24,26 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     'data-name'?: string;
     'data-id'?: string;
     renderSingleValue?: (option: SelectOption<SelectValue>) => React.ReactNode;
+    renderMultipleValues?: (values: SelectValue[], options: {
+        focused: boolean;
+        placeholder?: string;
+    }) => React.ReactNode;
     className?: string;
     isLoading?: boolean;
     onFocus?: () => void;
+    onBlur?: () => void;
     accessLevel?: AccessLevel;
     style?: React.CSSProperties;
+    styles?: {
+        valueContainer?: React.CSSProperties;
+        control?: React.CSSProperties;
+        container?: React.CSSProperties;
+        dropdownIndicator?: React.CSSProperties;
+    };
     onInputChange?: (value: string) => void;
+    onMenuOpen?: VoidFunction;
     size?: 'small' | 'normal';
     isCreatable?: boolean;
     menuPortalTarget?: HTMLElement;
 };
-export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => JSX.Element;
+export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => React.JSX.Element;