@adaptabletools/adaptable 17.0.0-canary.1 → 17.0.0-canary.10

package/src/components/OverlayTrigger/Overlay.js

@@ -1,30 +1,34 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { useEffect, useState, useRef } from 'react';
-import batchUpdate from '../utils/batchUpdate';
-import usePrevious from '../utils/usePrevious';
-export const useRefresh = () => {
-    const [x, update] = useState(0);
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useRefresh = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
+const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
+const useRefresh = () => {
+    const [x, update] = (0, react_1.useState)(0);
     return () => {
         update(x + 1);
     };
 };
+exports.useRefresh = useRefresh;
 const Overlay = React.forwardRef((props, ref) => {
-    const { visible } = props, domProps = __rest(props, ["visible"]);
-    const domRef = useRef(null);
+    const { visible } = props, domProps = tslib_1.__rest(props, ["visible"]);
+    const domRef = (0, react_1.useRef)(null);
     const setRef = (node) => {
         domRef.current = node;
         if (ref && typeof ref === 'function') {
             ref(node);
         }
     };
-    const [opacity, setOpacity] = useState(0);
-    const transitionInProgressRef = useRef(false);
-    const prevVisible = usePrevious(visible, visible);
-    const prevOpacity = usePrevious(opacity, opacity);
-    const refresh = useRefresh();
-    useEffect(() => {
-        batchUpdate(() => {
+    const [opacity, setOpacity] = (0, react_1.useState)(0);
+    const transitionInProgressRef = (0, react_1.useRef)(false);
+    const prevVisible = (0, usePrevious_1.default)(visible, visible);
+    const prevOpacity = (0, usePrevious_1.default)(opacity, opacity);
+    const refresh = (0, exports.useRefresh)();
+    (0, react_1.useEffect)(() => {
+        (0, batchUpdate_1.default)(() => {
             transitionInProgressRef.current = true;
             setOpacity(props.visible ? 1 : 0);
         }).commit();
@@ -39,9 +43,9 @@ const Overlay = React.forwardRef((props, ref) => {
         (_a = props === null || props === void 0 ? void 0 : props.onTransitionEnd) === null || _a === void 0 ? void 0 : _a.call(props);
     };
     const renderTime = Date.now();
-    const renderTimeRef = useRef(renderTime);
+    const renderTimeRef = (0, react_1.useRef)(renderTime);
     renderTimeRef.current = renderTime;
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let timeoutId;
         if (prevOpacity && !opacity) {
             timeoutId = setTimeout(() => {
@@ -66,4 +70,4 @@ const Overlay = React.forwardRef((props, ref) => {
     }
     return (React.createElement("div", Object.assign({}, domProps, { ref: setRef, style: Object.assign(Object.assign({}, props.style), { opacity }), onTransitionEnd: onTransitionEnd })));
 });
-export default Overlay;
+exports.default = Overlay;

package/src/components/OverlayTrigger/index.js

@@ -1,38 +1,44 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { useRef, useEffect } from 'react';
-import batchUpdate from '../utils/batchUpdate';
-import selectParent from '../utils/selectParent';
-import useProperty from '../utils/useProperty';
-import Overlay from './Overlay';
-import join from '../utils/join';
-import usePrevious from '../utils/usePrevious';
-import { getDocRect, getRect } from './utils';
-import useAgGridClassName from './useAgGridClassName';
-import contains from '../utils/contains';
-import { isBrowserDocumentAvailable } from '../../View/UIHelper';
-import { useOverlay } from '../InfiniteTable';
-import { useAdaptable } from '../../View/AdaptableContext';
-export const getConstrainElement = (target, constrainTo) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConstrainRect = exports.getConstrainElement = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const debounce_1 = tslib_1.__importDefault(require("lodash/debounce"));
+const batchUpdate_1 = tslib_1.__importDefault(require("../utils/batchUpdate"));
+const selectParent_1 = tslib_1.__importDefault(require("../utils/selectParent"));
+const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
+const Overlay_1 = tslib_1.__importDefault(require("./Overlay"));
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
+const utils_1 = require("./utils");
+const useAgGridClassName_1 = tslib_1.__importDefault(require("./useAgGridClassName"));
+const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
+const UIHelper_1 = require("../../View/UIHelper");
+const InfiniteTable_1 = require("../InfiniteTable");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const getConstrainElement = (target, constrainTo) => {
     let el = null;
     if (typeof constrainTo === 'string') {
-        el = selectParent(constrainTo, target);
+        el = (0, selectParent_1.default)(constrainTo, target);
     }
     if (typeof constrainTo === 'function') {
         el = constrainTo(target);
     }
     return el;
 };
-export const getConstrainRect = (target, constrainTo) => {
-    let el = getConstrainElement(target, constrainTo);
+exports.getConstrainElement = getConstrainElement;
+const getConstrainRect = (target, constrainTo) => {
+    let el = (0, exports.getConstrainElement)(target, constrainTo);
     if (el && el.tagName) {
-        return getRect(el);
+        return (0, utils_1.getRect)(el);
     }
-    return getDocRect();
+    return (0, utils_1.getDocRect)();
 };
+exports.getConstrainRect = getConstrainRect;
 let portalElement;
 const ensurePortalElement = () => {
-    if (!isBrowserDocumentAvailable()) {
+    if (!(0, UIHelper_1.isBrowserDocumentAvailable)()) {
         return;
     }
     if (portalElement) {
@@ -46,7 +52,7 @@ const ensurePortalElement = () => {
     document.body.appendChild(portalElement);
 };
 const OverlayTrigger = React.forwardRef((props, ref) => {
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
         // overlay - target
         ['TopLeft', 'BottomLeft'],
@@ -58,16 +64,20 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         ['BottomRight', 'TopRight'],
         ['BottomRight', 'TopCenter'],
         ['BottomRight', 'TopLeft'],
-    ], constrainTo, target: targetProp } = props, domProps = __rest(props, ["visible", "showTriangle", "showEvent", "hideEvent", "render", "targetOffset", "preventPortalEventPropagation", "defaultZIndex", "anchor", "hideDelay", "opacityTransitionDuration", "onVisibleChange", "alignPosition", "constrainTo", "target"]);
-    const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = useOverlay({
+    ], constrainTo, target: targetProp } = props, domProps = tslib_1.__rest(props, ["visible", "showTriangle", "showEvent", "hideEvent", "render", "targetOffset", "preventPortalEventPropagation", "defaultZIndex", "anchor", "hideDelay", "opacityTransitionDuration", "onVisibleChange", "alignPosition", "constrainTo", "target"]);
+    const { showOverlay, clearAll: clearAllOverlays, hideOverlay, portal, } = (0, InfiniteTable_1.useOverlay)({
         portalContainer: portalElement,
     });
-    const domRef = useRef(null);
-    const targetRef = useRef(null);
-    const overlayRef = useRef(null);
-    const [visible, doSetVisible] = useProperty(props, 'visible', false);
-    const hideTimeoutRef = useRef(null);
-    const setVisible = React.useCallback((visible) => {
+    const domRef = (0, react_1.useRef)(null);
+    const targetRef = (0, react_1.useRef)(null);
+    const overlayRef = (0, react_1.useRef)(null);
+    const [visible, doSetVisible] = (0, useProperty_1.default)(props, 'visible', false);
+    const hideTimeoutRef = (0, react_1.useRef)(null);
+    const setVisible = React.useCallback(
+    // visible state may quickly change from true -> false -> true
+    // 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);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {
@@ -81,25 +91,25 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             hideTimeoutRef.current = null;
         }
         doSetVisible(true);
-    }, []);
-    const prevVisible = usePrevious(visible, false);
+    }, 50), []);
+    const prevVisible = (0, usePrevious_1.default)(visible, false);
     ensurePortalElement();
     const onShow = React.useCallback((event) => {
         const target = targetRef.current;
-        if (event && preventPortalEventPropagation && !contains(target, event.target)) {
+        if (event && preventPortalEventPropagation && !(0, contains_1.default)(target, event.target)) {
             // because of how React portals behave - see https://github.com/facebook/react/issues/11387
             // after the portal is rendered, even though an item is in a separate dom parent, if it's in the portal,
             // events from it are propagated to the components in the portal and thus break some stuff
             return;
         }
-        batchUpdate(() => {
+        (0, batchUpdate_1.default)(() => {
             setVisible(true);
         }).commit();
     }, [constrainTo, preventPortalEventPropagation]);
     const onHide = React.useCallback((_event) => {
         setVisible(false);
     }, [setVisible]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (ref) {
             const api = {
                 show: onShow,
@@ -113,7 +123,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             }
         }
     }, [ref]);
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         let target = domRef.current.previousSibling;
         if (targetProp) {
             target = targetProp(target);
@@ -149,7 +159,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         }
         const targetWidth = target.getBoundingClientRect().width;
         if ((prevVisible && !visible) || visible) {
-            const overlayContent = (React.createElement(Overlay, Object.assign({}, domProps, { ref: (node) => {
+            const overlayContent = (React.createElement(Overlay_1.default, Object.assign({}, domProps, { ref: (node) => {
                     if (overlayRef.current && overlayRef.current != node) {
                         overlayRef.current.removeEventListener(showEvent, onShow);
                         overlayRef.current.removeEventListener(hideEvent, onHide);
@@ -159,7 +169,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
                         node.addEventListener(showEvent, onShow);
                         node.addEventListener(hideEvent, onHide);
                     }
-                }, className: join('ab-Overlay', showTriangle ? 'ab-Overlay--show-triangle' : '', agGridClassName, domProps.className), style: { transition: `opacity ${opacityTransitionDuration}` }, visible: visible, onTransitionEnd: () => {
+                }, className: (0, join_1.default)('ab-Overlay', showTriangle ? 'ab-Overlay--show-triangle' : '', agGridClassName, domProps.className), style: { transition: `opacity ${opacityTransitionDuration}` }, visible: visible, onTransitionEnd: () => {
                     if (!visible) {
                         clearAllOverlays();
                         hideOverlay('overlay-trigger');
@@ -167,13 +177,13 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
                 } }), props.render({ targetWidth: targetWidth })));
             let preparedConstrinTo;
             if (constrainTo) {
-                preparedConstrinTo = getConstrainElement(targetRef.current, constrainTo);
+                preparedConstrinTo = (0, exports.getConstrainElement)(targetRef.current, constrainTo);
             }
             else {
                 preparedConstrinTo = adaptable === null || adaptable === void 0 ? void 0 : adaptable.getAgGridContainerElement();
             }
             // show only if visible or if it was visible and now it is invisible
-            const alignToRect = getRect(target, targetOffset !== null && targetOffset !== void 0 ? targetOffset : 0);
+            const alignToRect = (0, utils_1.getRect)(target, targetOffset !== null && targetOffset !== void 0 ? targetOffset : 0);
             const showOverlayOptions = {
                 id: 'overlay-trigger',
                 alignPosition,
@@ -186,7 +196,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             clearAllOverlays();
         }
     }, [visible, props.render]);
-    const agGridClassName = useAgGridClassName([visible]);
+    const agGridClassName = (0, useAgGridClassName_1.default)([visible]);
     return (React.createElement(React.Fragment, null,
         React.Children.only(props.children),
         React.createElement("div", { "data-name": "OverlayTrigger", "data-visible": visible, ref: domRef, style: {
@@ -207,4 +217,4 @@ OverlayTrigger.defaultProps = {
     defaultZIndex: 1000000,
     opacityTransitionDuration: '250ms',
 };
-export default OverlayTrigger;
+exports.default = OverlayTrigger;

package/src/components/OverlayTrigger/useAgGridClassName.js

@@ -1,12 +1,14 @@
-import { useMemo } from 'react';
-import { useAdaptable } from '../../View/AdaptableContext';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("react");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
 const useAgGridClassName = (deps = []) => {
-    const adaptable = useAdaptable();
-    return useMemo(() => {
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    return (0, react_1.useMemo)(() => {
         if (adaptable) {
             return adaptable.getAgGridCurrentThemeName();
         }
         return '';
     }, deps);
 };
-export default useAgGridClassName;
+exports.default = useAgGridClassName;

package/src/components/OverlayTrigger/utils.js

@@ -1,4 +1,7 @@
-export const getRect = (node, offset = 0) => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getIntersection = exports.getDocRect = exports.getRect = void 0;
+const getRect = (node, offset = 0) => {
     const rect = node.getBoundingClientRect();
     return {
         top: rect.top - offset,
@@ -9,7 +12,8 @@ export const getRect = (node, offset = 0) => {
         height: rect.height + offset,
     };
 };
-export const getDocRect = () => {
+exports.getRect = getRect;
+const getDocRect = () => {
     const docRect = {
         width: window.innerWidth,
         right: window.innerWidth,
@@ -20,7 +24,8 @@ export const getDocRect = () => {
     };
     return docRect;
 };
-export const getIntersection = (rect1, rect2) => {
+exports.getDocRect = getDocRect;
+const getIntersection = (rect1, rect2) => {
     const left = Math.max(rect1.left, rect2.left);
     const top = Math.max(rect1.top, rect2.top);
     const right = Math.min(rect1.right, rect2.right);
@@ -36,3 +41,4 @@ export const getIntersection = (rect1, rect2) => {
         height,
     };
 };
+exports.getIntersection = getIntersection;

package/src/components/Panel/index.js

@@ -1,28 +1,31 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Box, Flex } from 'rebass';
-import join from '../utils/join';
-export const baseClassName = 'ab-Panel';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.baseClassName = void 0;
+const tslib_1 = require("tslib");
+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 = __rest(_a, ["children", "variant"]);
+    var { children, variant = 'default' } = _a, headerProps = tslib_1.__rest(_a, ["children", "variant"]);
     if (!children) {
         return null;
     }
     const style = {};
-    return (React.createElement(Flex, Object.assign({ flexDirection: "row", alignItems: "center" }, headerProps, { style: Object.assign(Object.assign({}, style), headerProps.style), className: join(`${baseClassName}__header`, `${baseClassName}__header--variant-${variant}`) }), children));
+    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));
 };
 const Body = (_a) => {
-    var { children, bodyScroll, variant } = _a, bodyProps = __rest(_a, ["children", "bodyScroll", "variant"]);
+    var { children, bodyScroll, variant } = _a, bodyProps = tslib_1.__rest(_a, ["children", "bodyScroll", "variant"]);
     if (!children) {
         return null;
     }
     if (bodyScroll === true) {
         bodyScroll = 'auto';
     }
-    return (React.createElement(Box, Object.assign({}, bodyProps, { className: join(`${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `${baseClassName}__body--scroll-${bodyScroll}` : null) }), children));
+    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));
 };
 const Panel = (props) => {
-    const { borderRadius, border, className, header, children, headerProps, bodyProps, bodyScroll, variant = 'default' } = props, boxProps = __rest(props, ["borderRadius", "border", "className", "header", "children", "headerProps", "bodyProps", "bodyScroll", "variant"]);
+    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 style = {};
     if (borderRadius !== undefined) {
         style['--ab-cmp-panel__border-radius'] =
@@ -30,8 +33,8 @@ const Panel = (props) => {
     }
     const headerStyle = Object.assign({ border }, (headerProps ? headerProps.style : null));
     const bodyStyle = Object.assign({ border }, (bodyProps ? bodyProps.style : null));
-    return (React.createElement(Box, Object.assign({}, boxProps, { style: Object.assign(Object.assign({}, style), boxProps.style), className: join(className, baseClassName, `${baseClassName}--variant-${variant}`, !header ? `${baseClassName}--no-header` : `${baseClassName}--with-header`) }),
+    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)));
 };
-export default Panel;
+exports.default = Panel;

package/src/components/PopupWithFooter.js

@@ -1,11 +1,14 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import Dialog from './Dialog';
-import FlexWithFooter from './FlexWithFooter';
-export const PopupWithFooter = React.forwardRef((props, ref) => {
-    const { showModal, onHide, footer, maxWidth, style } = props, dialogProps = __rest(props, ["showModal", "onHide", "footer", "maxWidth", "style"]);
-    return (React.createElement(Dialog, Object.assign({}, dialogProps, { ref: ref, isOpen: showModal, onDismiss: onHide, showCloseButton: false, padding: 0 }),
-        React.createElement(FlexWithFooter, { flexDirection: "column", style: style, footer: footer, footerProps: {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopupWithFooter = void 0;
+const tslib_1 = require("tslib");
+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 }),
+        React.createElement(FlexWithFooter_1.default, { flexDirection: "column", style: style, footer: footer, footerProps: {
                 padding: 2,
                 backgroundColor: 'primary',
                 className: 'ab-Popup__footer',

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -1,18 +1,22 @@
-import * as React from 'react';
-import { useSelector } from 'react-redux';
-import { useEffect, useState } from 'react';
-import { LoaderSpinner } from '../Loader';
-import { useAdaptable } from '../../View/AdaptableContext';
-export const ProgressIndicator = () => {
-    const { active, label } = useSelector((state) => state.System.ProgressIndicator);
-    const [visible, setVisible] = useState(false);
-    const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = useState({
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ProgressIndicator = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_redux_1 = require("react-redux");
+const react_1 = require("react");
+const Loader_1 = require("../Loader");
+const AdaptableContext_1 = require("../../View/AdaptableContext");
+const ProgressIndicator = () => {
+    const { active, label } = (0, react_redux_1.useSelector)((state) => state.System.ProgressIndicator);
+    const [visible, setVisible] = (0, react_1.useState)(false);
+    const [progressIndicatorCoordinates, setProgressIndicatorCoordinates] = (0, react_1.useState)({
         top: 0,
         left: 0,
         height: 0,
         width: 0,
     });
-    const adaptable = useAdaptable();
+    const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const disableAdaptableGrid = (containerElement, disabled) => {
         const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
         if (!containerElement) {
@@ -32,7 +36,7 @@ export const ProgressIndicator = () => {
         const { top, left, height, width } = containerElement.getBoundingClientRect();
         setProgressIndicatorCoordinates({ top, left, height, width });
     };
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
         disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
         updateGridContainerCoordinates(adaptable.getAdaptableContainerElement());
@@ -43,6 +47,7 @@ export const ProgressIndicator = () => {
     }, [active]);
     return (React.createElement(React.Fragment, null, active && (React.createElement("div", { className: `ab-progress-indicator-wrapper ${visible ? 'ab-progress-indicator-wrapper--visible' : ''}`, style: progressIndicatorCoordinates },
         React.createElement("div", { className: "ab-progress-indicator-body" },
-            React.createElement(LoaderSpinner, null),
+            React.createElement(Loader_1.LoaderSpinner, null),
             React.createElement("span", { style: { marginLeft: 'var(--ab-space-2)' } }, label))))));
 };
+exports.ProgressIndicator = ProgressIndicator;

package/src/components/Radio/index.js

@@ -1,21 +1,25 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { useState } from 'react';
-import { Box, Flex } from 'rebass';
-import useProperty from '../utils/useProperty';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroup = exports.useRadioContext = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const rebass_1 = require("rebass");
+const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
 const RadioContext = React.createContext({
     value: null,
     name: '',
     onChange: (v) => { },
 });
-export const useRadioContext = () => {
+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 = __rest(_a, ["children", "checked", "onChange", "value", "name", "gapDistance", "childrenPosition", "as", "id", "tabIndex", "disabled"]);
-    const context = useRadioContext();
+    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 context = (0, exports.useRadioContext)();
     const { value: contextValue, onChange: contextOnChange, name: contextName } = context;
-    const [stateChecked, setStateChecked] = useState(false);
+    const [stateChecked, setStateChecked] = (0, react_1.useState)(false);
     const computedChecked = checked !== undefined
         ? checked
         : contextValue !== undefined
@@ -38,7 +42,7 @@ const Radio = (_a) => {
     const beforeGap = childrenPosition === 'start' ? gap : null;
     const after = childrenPosition === 'end' ? children : null;
     const afterGap = childrenPosition === 'end' ? gap : null;
-    return (React.createElement(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, 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 }),
         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: {
@@ -50,14 +54,15 @@ const Radio = (_a) => {
         afterGap,
         after));
 };
-export const RadioGroup = (props) => {
-    const { orientation, value: _value, name, onRadioChange } = props, flexProps = __rest(props, ["orientation", "value", "name", "onRadioChange"]);
-    const [value, setValue] = useProperty(props, 'value', undefined, {
+const RadioGroup = (props) => {
+    const { orientation, value: _value, name, onRadioChange } = props, flexProps = tslib_1.__rest(props, ["orientation", "value", "name", "onRadioChange"]);
+    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(Flex, Object.assign({ className: "ab-RadioGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start' }, flexProps))));
+        React.createElement(rebass_1.Flex, Object.assign({ className: "ab-RadioGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start' }, flexProps))));
 };
-export default Radio;
+exports.RadioGroup = RadioGroup;
+exports.default = Radio;

package/src/components/ResizeObserver/getResizeObserverObject.js

@@ -1,4 +1,8 @@
-export const getResizeObserverObject = () => {
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getResizeObserverObject = void 0;
+const getResizeObserverObject = () => {
     const globalObject = typeof globalThis !== 'undefined' ? globalThis : window;
     return globalObject.ResizeObserver;
 };
+exports.getResizeObserverObject = getResizeObserverObject;

package/src/components/ResizeObserver/index.js

@@ -1,8 +1,12 @@
-import * as React from 'react';
-import { useMemo, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
-import { getResizeObserverObject } from './getResizeObserverObject';
-export const setupResizeObserver = (node, callback) => {
-    const RO = getResizeObserverObject();
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReactResizeObserver = exports.useResizeObserver = exports.setupResizeObserver = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const react_1 = require("react");
+const getResizeObserverObject_1 = require("./getResizeObserverObject");
+const setupResizeObserver = (node, callback) => {
+    const RO = (0, getResizeObserverObject_1.getResizeObserverObject)();
     if (!RO) {
         return () => { };
     }
@@ -27,21 +31,22 @@ export const setupResizeObserver = (node, callback) => {
         observer.disconnect();
     };
 };
+exports.setupResizeObserver = setupResizeObserver;
 /**
  * A hook that notifies you when a certain DOM element has changed it's size
  *
  * @param ref A React ref to a DOM element
  * @param callback The function to be called when the element is resized.
  */
-export const useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
-    const sizeRef = useRef({
+const useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
+    const sizeRef = (0, react_1.useRef)({
         width: 0,
         height: 0,
     });
     const effectFn = (callback) => {
         let disconnect;
         if (ref.current) {
-            disconnect = setupResizeObserver(ref.current, (size) => {
+            disconnect = (0, exports.setupResizeObserver)(ref.current, (size) => {
                 size = {
                     width: Math.round(size.width),
                     height: Math.round(size.height),
@@ -59,21 +64,22 @@ export const useResizeObserver = (ref, callback, config = { earlyAttach: false }
             }
         };
     };
-    useEffect(() => {
+    (0, react_1.useEffect)(() => {
         if (!config.earlyAttach) {
             return effectFn(callback);
         }
         return () => { };
     }, [ref.current, callback, config.earlyAttach]);
-    useLayoutEffect(() => {
+    (0, react_1.useLayoutEffect)(() => {
         if (config.earlyAttach) {
             return effectFn(callback);
         }
         return () => { };
     }, [ref.current, callback, config.earlyAttach]);
 };
-export const ReactResizeObserver = (props) => {
-    const style = useMemo(() => ({
+exports.useResizeObserver = useResizeObserver;
+const ReactResizeObserver = (props) => {
+    const style = (0, react_1.useMemo)(() => ({
         position: 'absolute',
         top: 0,
         left: 0,
@@ -82,19 +88,20 @@ export const ReactResizeObserver = (props) => {
         boxSizing: 'border-box',
     }), []);
     const { notifyOnMount, earlyAttach } = props;
-    const firstTime = useRef(true);
-    const ref = useRef(null);
-    const onResize = useCallback((size) => {
+    const firstTime = (0, react_1.useRef)(true);
+    const ref = (0, react_1.useRef)(null);
+    const onResize = (0, react_1.useCallback)((size) => {
         if (firstTime.current && !notifyOnMount) {
             firstTime.current = false;
             return;
         }
         props.onResize(size);
     }, [props.onResize]);
-    useResizeObserver(ref, onResize, { earlyAttach: earlyAttach || false });
+    (0, exports.useResizeObserver)(ref, onResize, { earlyAttach: earlyAttach || false });
     return React.createElement("div", { ref: ref, style: style });
 };
-ReactResizeObserver.defaultProps = {
+exports.ReactResizeObserver = ReactResizeObserver;
+exports.ReactResizeObserver.defaultProps = {
     notifyOnMount: true,
     earlyAttach: false,
 };

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

@@ -24,7 +24,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     accessLevel?: AccessLevel;
     style?: React.CSSProperties;
     onInputChange?: (value: string) => void;
-    variant?: 'default' | 'raised';
+    size?: 'small' | 'normal';
     isCreatable?: boolean;
 };
 export declare const Select: <SelectValue extends unknown, IsMulti extends boolean = false>(props: SelectProps<SelectValue, IsMulti>) => JSX.Element;