@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.0

package/src/components/OverlayTrigger/Overlay.js

@@ -1,34 +1,30 @@
-"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);
+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);
     return () => {
         update(x + 1);
     };
 };
-exports.useRefresh = useRefresh;
 const Overlay = React.forwardRef((props, ref) => {
-    const { visible } = props, domProps = tslib_1.__rest(props, ["visible"]);
-    const domRef = (0, react_1.useRef)(null);
+    const { visible } = props, domProps = __rest(props, ["visible"]);
+    const domRef = useRef(null);
     const setRef = (node) => {
         domRef.current = node;
         if (ref && typeof ref === 'function') {
             ref(node);
         }
     };
-    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)(() => {
+    const [opacity, setOpacity] = useState(0);
+    const transitionInProgressRef = useRef(false);
+    const prevVisible = usePrevious(visible, visible);
+    const prevOpacity = usePrevious(opacity, opacity);
+    const refresh = useRefresh();
+    useEffect(() => {
+        batchUpdate(() => {
             transitionInProgressRef.current = true;
             setOpacity(props.visible ? 1 : 0);
         }).commit();
@@ -43,9 +39,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 = (0, react_1.useRef)(renderTime);
+    const renderTimeRef = useRef(renderTime);
     renderTimeRef.current = renderTime;
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let timeoutId;
         if (prevOpacity && !opacity) {
             timeoutId = setTimeout(() => {
@@ -70,4 +66,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 })));
 });
-exports.default = Overlay;
+export default Overlay;

package/src/components/OverlayTrigger/index.js

@@ -1,44 +1,39 @@
-"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) => {
+import { __rest } from "tslib";
+import * as React from 'react';
+import { useRef, useEffect } from 'react';
+import debounce from 'lodash/debounce';
+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) => {
     let el = null;
     if (typeof constrainTo === 'string') {
-        el = (0, selectParent_1.default)(constrainTo, target);
+        el = selectParent(constrainTo, target);
     }
     if (typeof constrainTo === 'function') {
         el = constrainTo(target);
     }
     return el;
 };
-exports.getConstrainElement = getConstrainElement;
-const getConstrainRect = (target, constrainTo) => {
-    let el = (0, exports.getConstrainElement)(target, constrainTo);
+export const getConstrainRect = (target, constrainTo) => {
+    let el = getConstrainElement(target, constrainTo);
     if (el && el.tagName) {
-        return (0, utils_1.getRect)(el);
+        return getRect(el);
     }
-    return (0, utils_1.getDocRect)();
+    return getDocRect();
 };
-exports.getConstrainRect = getConstrainRect;
 let portalElement;
 const ensurePortalElement = () => {
-    if (!(0, UIHelper_1.isBrowserDocumentAvailable)()) {
+    if (!isBrowserDocumentAvailable()) {
         return;
     }
     if (portalElement) {
@@ -52,7 +47,7 @@ const ensurePortalElement = () => {
     document.body.appendChild(portalElement);
 };
 const OverlayTrigger = React.forwardRef((props, ref) => {
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     let { visible: _, showTriangle, showEvent, hideEvent, render, targetOffset, preventPortalEventPropagation = false, defaultZIndex, anchor, hideDelay = 0, opacityTransitionDuration, onVisibleChange, alignPosition = [
         // overlay - target
         ['TopLeft', 'BottomLeft'],
@@ -64,20 +59,20 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         ['BottomRight', 'TopRight'],
         ['BottomRight', 'TopCenter'],
         ['BottomRight', 'TopLeft'],
-    ], 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)({
+    ], 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({
         portalContainer: portalElement,
     });
-    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 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 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) => {
+    debounce((visible) => {
         onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {
@@ -92,24 +87,24 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         }
         doSetVisible(true);
     }, 50), []);
-    const prevVisible = (0, usePrevious_1.default)(visible, false);
+    const prevVisible = usePrevious(visible, false);
     ensurePortalElement();
     const onShow = React.useCallback((event) => {
         const target = targetRef.current;
-        if (event && preventPortalEventPropagation && !(0, contains_1.default)(target, event.target)) {
+        if (event && preventPortalEventPropagation && !contains(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;
         }
-        (0, batchUpdate_1.default)(() => {
+        batchUpdate(() => {
             setVisible(true);
         }).commit();
     }, [constrainTo, preventPortalEventPropagation]);
     const onHide = React.useCallback((_event) => {
         setVisible(false);
     }, [setVisible]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (ref) {
             const api = {
                 show: onShow,
@@ -123,7 +118,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             }
         }
     }, [ref]);
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let target = domRef.current.previousSibling;
         if (targetProp) {
             target = targetProp(target);
@@ -159,7 +154,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
         }
         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, Object.assign({}, domProps, { ref: (node) => {
                     if (overlayRef.current && overlayRef.current != node) {
                         overlayRef.current.removeEventListener(showEvent, onShow);
                         overlayRef.current.removeEventListener(hideEvent, onHide);
@@ -169,7 +164,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
                         node.addEventListener(showEvent, onShow);
                         node.addEventListener(hideEvent, onHide);
                     }
-                }, className: (0, join_1.default)('ab-Overlay', showTriangle ? 'ab-Overlay--show-triangle' : '', agGridClassName, domProps.className), style: { transition: `opacity ${opacityTransitionDuration}` }, visible: visible, onTransitionEnd: () => {
+                }, className: join('ab-Overlay', showTriangle ? 'ab-Overlay--show-triangle' : '', agGridClassName, domProps.className), style: { transition: `opacity ${opacityTransitionDuration}` }, visible: visible, onTransitionEnd: () => {
                     if (!visible) {
                         clearAllOverlays();
                         hideOverlay('overlay-trigger');
@@ -177,13 +172,13 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
                 } }), props.render({ targetWidth: targetWidth })));
             let preparedConstrinTo;
             if (constrainTo) {
-                preparedConstrinTo = (0, exports.getConstrainElement)(targetRef.current, constrainTo);
+                preparedConstrinTo = 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 = (0, utils_1.getRect)(target, targetOffset !== null && targetOffset !== void 0 ? targetOffset : 0);
+            const alignToRect = getRect(target, targetOffset !== null && targetOffset !== void 0 ? targetOffset : 0);
             const showOverlayOptions = {
                 id: 'overlay-trigger',
                 alignPosition,
@@ -196,7 +191,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
             clearAllOverlays();
         }
     }, [visible, props.render]);
-    const agGridClassName = (0, useAgGridClassName_1.default)([visible]);
+    const agGridClassName = useAgGridClassName([visible]);
     return (React.createElement(React.Fragment, null,
         React.Children.only(props.children),
         React.createElement("div", { "data-name": "OverlayTrigger", "data-visible": visible, ref: domRef, style: {
@@ -217,4 +212,4 @@ OverlayTrigger.defaultProps = {
     defaultZIndex: 1000000,
     opacityTransitionDuration: '250ms',
 };
-exports.default = OverlayTrigger;
+export default OverlayTrigger;

package/src/components/OverlayTrigger/useAgGridClassName.js

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

package/src/components/OverlayTrigger/utils.js

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

package/src/components/Panel/index.js

@@ -1,31 +1,28 @@
-"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';
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import join from '../utils/join';
+export const baseClassName = 'ab-Panel';
 const Header = (_a) => {
-    var { children, variant = 'default' } = _a, headerProps = tslib_1.__rest(_a, ["children", "variant"]);
+    var { children, variant = 'default' } = _a, headerProps = __rest(_a, ["children", "variant"]);
     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(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));
 };
 const Body = (_a) => {
-    var { children, bodyScroll, variant } = _a, bodyProps = tslib_1.__rest(_a, ["children", "bodyScroll", "variant"]);
+    var { children, bodyScroll, variant } = _a, bodyProps = __rest(_a, ["children", "bodyScroll", "variant"]);
     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(Box, Object.assign({}, bodyProps, { className: join(`${baseClassName}__body`, variant && `${baseClassName}__body--variant-${variant}`, bodyScroll ? `${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' } = props, boxProps = __rest(props, ["borderRadius", "border", "className", "header", "children", "headerProps", "bodyProps", "bodyScroll", "variant"]);
     const style = {};
     if (borderRadius !== undefined) {
         style['--ab-cmp-panel__border-radius'] =
@@ -33,8 +30,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(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`) }),
+    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`) }),
         React.createElement(Header, Object.assign({}, headerProps, { style: headerStyle, variant: variant }), header),
         React.createElement(Body, Object.assign({}, bodyProps, { style: bodyStyle, bodyScroll: bodyScroll, variant: variant }), children)));
 };
-exports.default = Panel;
+export default Panel;

package/src/components/PopupWithFooter.js

@@ -1,14 +1,11 @@
-"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: {
+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: {
                 padding: 2,
                 backgroundColor: 'primary',
                 className: 'ab-Popup__footer',

package/src/components/ProgressIndicator/ProgressIndicator.js

@@ -1,22 +1,18 @@
-"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)({
+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({
         top: 0,
         left: 0,
         height: 0,
         width: 0,
     });
-    const adaptable = (0, AdaptableContext_1.useAdaptable)();
+    const adaptable = useAdaptable();
     const disableAdaptableGrid = (containerElement, disabled) => {
         const DISABLING_CSS_CLASS = 'ab-wait-for-progress-indicator';
         if (!containerElement) {
@@ -36,7 +32,7 @@ const ProgressIndicator = () => {
         const { top, left, height, width } = containerElement.getBoundingClientRect();
         setProgressIndicatorCoordinates({ top, left, height, width });
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         disableAdaptableGrid(adaptable.getAdaptableContainerElement(), active);
         disableAdaptableGrid(adaptable.getAgGridContainerElement(), active);
         updateGridContainerCoordinates(adaptable.getAdaptableContainerElement());
@@ -47,7 +43,6 @@ 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(Loader_1.LoaderSpinner, null),
+            React.createElement(LoaderSpinner, null),
             React.createElement("span", { style: { marginLeft: 'var(--ab-space-2)' } }, label))))));
 };
-exports.ProgressIndicator = ProgressIndicator;

package/src/components/Radio/index.js

@@ -1,25 +1,21 @@
-"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"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { useState } from 'react';
+import { Box, Flex } from 'rebass';
+import useProperty from '../utils/useProperty';
 const RadioContext = React.createContext({
     value: null,
     name: '',
     onChange: (v) => { },
 });
-const useRadioContext = () => {
+export 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 context = (0, exports.useRadioContext)();
+    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();
     const { value: contextValue, onChange: contextOnChange, name: contextName } = context;
-    const [stateChecked, setStateChecked] = (0, react_1.useState)(false);
+    const [stateChecked, setStateChecked] = useState(false);
     const computedChecked = checked !== undefined
         ? checked
         : contextValue !== undefined
@@ -42,7 +38,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(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(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: {
@@ -54,15 +50,14 @@ const Radio = (_a) => {
         afterGap,
         after));
 };
-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, {
+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, {
         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(Flex, Object.assign({ className: "ab-RadioGroup", flexDirection: orientation == 'horizontal' ? 'row' : 'column', alignItems: orientation == 'horizontal' ? 'center' : 'flex=start' }, flexProps))));
 };
-exports.RadioGroup = RadioGroup;
-exports.default = Radio;
+export default Radio;

package/src/components/ResizeObserver/getResizeObserverObject.js

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

package/src/components/ResizeObserver/index.js

@@ -1,12 +1,8 @@
-"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)();
+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();
     if (!RO) {
         return () => { };
     }
@@ -31,22 +27,21 @@ 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.
  */
-const useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
-    const sizeRef = (0, react_1.useRef)({
+export const useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
+    const sizeRef = useRef({
         width: 0,
         height: 0,
     });
     const effectFn = (callback) => {
         let disconnect;
         if (ref.current) {
-            disconnect = (0, exports.setupResizeObserver)(ref.current, (size) => {
+            disconnect = setupResizeObserver(ref.current, (size) => {
                 size = {
                     width: Math.round(size.width),
                     height: Math.round(size.height),
@@ -64,22 +59,21 @@ const useResizeObserver = (ref, callback, config = { earlyAttach: false }) => {
             }
         };
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (!config.earlyAttach) {
             return effectFn(callback);
         }
         return () => { };
     }, [ref.current, callback, config.earlyAttach]);
-    (0, react_1.useLayoutEffect)(() => {
+    useLayoutEffect(() => {
         if (config.earlyAttach) {
             return effectFn(callback);
         }
         return () => { };
     }, [ref.current, callback, config.earlyAttach]);
 };
-exports.useResizeObserver = useResizeObserver;
-const ReactResizeObserver = (props) => {
-    const style = (0, react_1.useMemo)(() => ({
+export const ReactResizeObserver = (props) => {
+    const style = useMemo(() => ({
         position: 'absolute',
         top: 0,
         left: 0,
@@ -88,20 +82,19 @@ const ReactResizeObserver = (props) => {
         boxSizing: 'border-box',
     }), []);
     const { notifyOnMount, earlyAttach } = props;
-    const firstTime = (0, react_1.useRef)(true);
-    const ref = (0, react_1.useRef)(null);
-    const onResize = (0, react_1.useCallback)((size) => {
+    const firstTime = useRef(true);
+    const ref = useRef(null);
+    const onResize = useCallback((size) => {
         if (firstTime.current && !notifyOnMount) {
             firstTime.current = false;
             return;
         }
         props.onResize(size);
     }, [props.onResize]);
-    (0, exports.useResizeObserver)(ref, onResize, { earlyAttach: earlyAttach || false });
+    useResizeObserver(ref, onResize, { earlyAttach: earlyAttach || false });
     return React.createElement("div", { ref: ref, style: style });
 };
-exports.ReactResizeObserver = ReactResizeObserver;
-exports.ReactResizeObserver.defaultProps = {
+ReactResizeObserver.defaultProps = {
     notifyOnMount: true,
     earlyAttach: false,
 };