@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

package/src/components/Datepicker/Caption.js

@@ -1,47 +1,42 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Caption = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const isSameMonth_1 = tslib_1.__importDefault(require("date-fns/isSameMonth"));
-const add_1 = tslib_1.__importDefault(require("date-fns/add"));
-const CaptionLabel_1 = require("./CaptionLabel");
-const react_day_picker_1 = require("react-day-picker");
+import * as React from 'react';
+import isSameMonth from 'date-fns/isSameMonth';
+import add from 'date-fns/add';
+import { CaptionLabel } from './CaptionLabel';
+import { useDayPicker, useNavigation, } from 'react-day-picker';
 /**
  * Render the caption of a month, which includes title and navigation buttons.
  * The caption has a different layout when setting the `numberOfMonths` prop.
  */
-function Caption(props) {
+export function Caption(props) {
     const { displayMonth } = props;
-    const context = (0, react_day_picker_1.useDayPicker)();
+    const context = useDayPicker();
     const { classNames, disableNavigation, styles, onMonthChange, dir } = context;
-    const { goToMonth, displayMonths } = (0, react_day_picker_1.useNavigation)();
+    const { goToMonth, displayMonths } = useNavigation();
     const handlePreviousClick = () => {
-        handleMonthChange((0, add_1.default)(displayMonth, { months: -1 }));
+        handleMonthChange(add(displayMonth, { months: -1 }));
     };
     const handleNextClick = () => {
-        handleMonthChange((0, add_1.default)(displayMonth, { months: 1 }));
+        handleMonthChange(add(displayMonth, { months: 1 }));
     };
     const handleMonthChange = (newMonth) => {
         goToMonth(newMonth);
         onMonthChange === null || onMonthChange === void 0 ? void 0 : onMonthChange(newMonth);
     };
     const handleNextYearClick = () => {
-        handleMonthChange((0, add_1.default)(displayMonth, { years: 1 }));
+        handleMonthChange(add(displayMonth, { years: 1 }));
     };
     const handlePreviousYearClick = () => {
-        handleMonthChange((0, add_1.default)(displayMonth, { years: -1 }));
+        handleMonthChange(add(displayMonth, { years: -1 }));
     };
-    const displayIndex = displayMonths.findIndex((month) => (0, isSameMonth_1.default)(displayMonth, month));
+    const displayIndex = displayMonths.findIndex((month) => isSameMonth(displayMonth, month));
     let isFirst = displayIndex === 0;
     let isLast = displayIndex === displayMonths.length - 1;
     if (dir === 'rtl') {
         [isLast, isFirst] = [isFirst, isLast];
     }
-    const captionLabel = React.createElement(CaptionLabel_1.CaptionLabel, { displayMonth: displayMonth });
+    const captionLabel = React.createElement(CaptionLabel, { displayMonth: displayMonth });
     return (React.createElement("div", { className: classNames.caption, style: styles.caption },
         disableNavigation && captionLabel,
         !disableNavigation && (React.createElement(React.Fragment, null,
-            React.createElement(CaptionLabel_1.CaptionLabel, { displayMonth: displayMonth, onPreviousYearClick: handlePreviousYearClick, onNextYearClick: handleNextYearClick, onNextMonthClick: handleNextClick, onPreviousMonthClick: handlePreviousClick })))));
+            React.createElement(CaptionLabel, { displayMonth: displayMonth, onPreviousYearClick: handlePreviousYearClick, onNextYearClick: handleNextYearClick, onNextMonthClick: handleNextClick, onPreviousMonthClick: handlePreviousClick })))));
 }
-exports.Caption = Caption;

package/src/components/Datepicker/CaptionLabel.js

@@ -1,25 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.CaptionLabel = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const format_1 = tslib_1.__importDefault(require("date-fns/format"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const react_1 = require("react");
-const react_day_picker_1 = require("react-day-picker");
-function CaptionLabel(props) {
-    const { locale, classNames, styles } = (0, react_day_picker_1.useDayPicker)();
+import * as React from 'react';
+import { Flex } from 'rebass';
+import format from 'date-fns/format';
+import SimpleButton from '../SimpleButton';
+import { useMemo } from 'react';
+import { useDayPicker } from 'react-day-picker';
+export function CaptionLabel(props) {
+    const { locale, classNames, styles } = useDayPicker();
     const { onPreviousYearClick, onNextYearClick, onNextMonthClick, onPreviousMonthClick } = props;
-    const captionStyles = (0, react_1.useMemo)(() => (Object.assign(Object.assign({}, styles.caption_label), { width: '100%' })), []);
+    const captionStyles = useMemo(() => (Object.assign(Object.assign({}, styles.caption_label), { width: '100%' })), []);
     return (React.createElement("div", { key: "caption", className: classNames.caption_label, style: captionStyles, "aria-live": "polite", "aria-atomic": "true" },
-        React.createElement(SimpleButton_1.default, { padding: 1, mr: 1, variant: "text", icon: "arrow-left", onClick: onPreviousMonthClick }),
-        React.createElement(rebass_1.Flex, { justifyContent: "center", style: { minWidth: 80, flex: 2 } }, (0, format_1.default)(props.displayMonth, 'LLLL', { locale })),
-        React.createElement(SimpleButton_1.default, { padding: 1, ml: 1, variant: "text", icon: "arrow-right", onClick: onNextMonthClick }),
-        React.createElement(SimpleButton_1.default, { padding: 1, mr: 1, variant: "text", icon: "arrow-left", onClick: onPreviousYearClick }),
-        React.createElement(rebass_1.Flex, { justifyContent: "center", style: { minWidth: 40, flex: 1 } },
-            (0, format_1.default)(props.displayMonth, 'y', { locale }),
+        React.createElement(SimpleButton, { padding: 1, mr: 1, variant: "text", icon: "arrow-left", onClick: onPreviousMonthClick }),
+        React.createElement(Flex, { justifyContent: "center", style: { minWidth: 80, flex: 2 } }, format(props.displayMonth, 'LLLL', { locale })),
+        React.createElement(SimpleButton, { padding: 1, ml: 1, variant: "text", icon: "arrow-right", onClick: onNextMonthClick }),
+        React.createElement(SimpleButton, { padding: 1, mr: 1, variant: "text", icon: "arrow-left", onClick: onPreviousYearClick }),
+        React.createElement(Flex, { justifyContent: "center", style: { minWidth: 40, flex: 1 } },
+            format(props.displayMonth, 'y', { locale }),
             ' '),
-        React.createElement(SimpleButton_1.default, { padding: 1, ml: 1, variant: "text", icon: "arrow-right", onClick: onNextYearClick })));
+        React.createElement(SimpleButton, { padding: 1, ml: 1, variant: "text", icon: "arrow-right", onClick: onNextYearClick })));
 }
-exports.CaptionLabel = CaptionLabel;

package/src/components/Datepicker/DatepickerContext.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDatepickerContext = exports.DatepickerContext = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-exports.DatepickerContext = React.createContext({
+import * as React from 'react';
+export const DatepickerContext = React.createContext({
     onShow: () => { },
     onHide: () => { },
 });
-const useDatepickerContext = () => {
-    return React.useContext(exports.DatepickerContext);
+export const useDatepickerContext = () => {
+    return React.useContext(DatepickerContext);
 };
-exports.useDatepickerContext = useDatepickerContext;

package/src/components/Datepicker/index.js

@@ -1,22 +1,19 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Datepicker = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
-const Input_1 = tslib_1.__importDefault(require("../Input"));
-const react_1 = require("react");
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
-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");
+import { __rest } from "tslib";
+import * as React from 'react';
+import OverlayTrigger from '../OverlayTrigger';
+import Input from '../Input';
+import { useState } from 'react';
+import useProperty from '../utils/useProperty';
+import FieldWrap from '../FieldWrap';
+import SimpleButton from '../SimpleButton';
+import { Flex } from 'rebass';
+import { DateFormatter } from '../../Utilities/Helpers/FormatHelper';
+import { Caption } from './Caption';
+import { CaptionLabel } from './CaptionLabel';
+import { useDatepickerContext } from './DatepickerContext';
+import addDays from 'date-fns/addDays';
+import addBusinessDays from 'date-fns/addBusinessDays';
+import { DayPicker, useInput } from 'react-day-picker';
 const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
     const domRef = React.useRef(null);
     React.useEffect(() => {
@@ -34,26 +31,26 @@ const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
             }
         } }, children));
 };
-exports.Datepicker = React.forwardRef((props, ref) => {
+export const Datepicker = React.forwardRef((props, ref) => {
     var _a;
-    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, showClearButton: showClearButtonFromProps, datepickerButtons } = props, boxProps = tslib_1.__rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "showClearButton", "datepickerButtons"]);
-    const datepickerContext = (0, DatepickerContext_1.useDatepickerContext)();
+    const { dateProps, required, disabled, style, placeholder, showWeekNumber, showOutsideDays, value: _, defaultValue: __, onChange: ___, showClearButton: showClearButtonFromProps, datepickerButtons } = props, boxProps = __rest(props, ["dateProps", "required", "disabled", "style", "placeholder", "showWeekNumber", "showOutsideDays", "value", "defaultValue", "onChange", "showClearButton", "datepickerButtons"]);
+    const datepickerContext = useDatepickerContext();
     const showClearButton = (showClearButtonFromProps !== null && showClearButtonFromProps !== void 0 ? showClearButtonFromProps : datepickerContext.showClearButton) === false ? false : true;
-    let [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
+    let [value, setValue] = useProperty(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);
+    const [month, setMonth] = useState(value !== null && value !== void 0 ? value : new Date());
+    const { dayPickerProps, setSelected } = useInput(useInputOptions);
     const updateValue = (value) => {
         setValue(value);
         setSelected(value);
     };
-    const inputValue = (_a = (0, FormatHelper_1.DateFormatter)(value, { Pattern: dateProps.format })) !== null && _a !== void 0 ? _a : '';
-    const [visible, doSetVisible] = (0, react_1.useState)(false);
+    const inputValue = (_a = DateFormatter(value, { Pattern: dateProps.format })) !== null && _a !== void 0 ? _a : '';
+    const [visible, doSetVisible] = useState(false);
     const setVisible = (visible, keyboardEventKey) => {
         var _a, _b;
         doSetVisible(visible);
@@ -67,33 +64,33 @@ exports.Datepicker = React.forwardRef((props, ref) => {
     const clearValue = () => {
         updateValue(undefined);
     };
-    const renderButton = (label, onClick) => (React.createElement(SimpleButton_1.default, { onClick: onClick, margin: '2px' }, label));
+    const renderButton = (label, onClick) => (React.createElement(SimpleButton, { onClick: onClick, margin: '2px' }, label));
     const todayDate = new Date();
     const footerButtonsMap = {
         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(addDays(todayDate, 1))),
+        yesterday: renderButton('Yesterday', () => updateValue(addDays(todayDate, -1))),
+        nextWorkday: renderButton('Next Workday', () => updateValue(addBusinessDays(todayDate, 1))),
+        prevWorkday: renderButton('Prev Workday', () => updateValue(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 = showClearButton ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
+    const clearButton = showClearButton ? (React.createElement(SimpleButton, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
             e.preventDefault();
             clearValue();
         }, 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) => {
+    const calendarButton = (React.createElement(SimpleButton, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
+    return (React.createElement(Flex, null,
+        React.createElement(OverlayTrigger, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         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: {
+                React.createElement(DayPicker, Object.assign({ fixedWeeks: true }, dayPickerProps, { showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", month: isNaN(+month) ? new Date() : month, onMonthChange: setMonth, components: { Caption, CaptionLabel }, onSelect: updateValue, footer: React.createElement(Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) })))) },
+            React.createElement(FieldWrap, 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,
@@ -102,7 +99,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                         setVisible(true);
                     }
                 } }),
-                React.createElement(Input_1.default, { value: inputValue, placehoder: placeholder !== null && placeholder !== void 0 ? placeholder : dateProps.format, style: style, disabled: disabled, readOnly: true, ref: ref }),
+                React.createElement(Input, { value: inputValue, placehoder: placeholder !== null && placeholder !== void 0 ? placeholder : dateProps.format, style: style, disabled: disabled, readOnly: true, ref: ref }),
                 !!inputValue ? clearButton : null,
                 calendarButton))));
 });

package/src/components/Dialog/index.js

@@ -1,26 +1,23 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Dialog = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const contains_1 = tslib_1.__importDefault(require("../utils/contains"));
-const captureTabNavigation_1 = tslib_1.__importDefault(require("../utils/captureTabNavigation"));
-const rebass_1 = require("rebass");
-const Modal_1 = require("../Modal");
-const useIsOpen_1 = tslib_1.__importDefault(require("./useIsOpen"));
-const useAutoFocus_1 = tslib_1.__importDefault(require("../utils/useAutoFocus"));
-const icons_1 = require("../icons");
-const WindowModal_1 = require("../WindowModal");
+import { __rest } from "tslib";
+import * as React from 'react';
+import { useRef, useEffect } from 'react';
+import join from '../utils/join';
+import contains from '../utils/contains';
+import captureTabNavigation from '../utils/captureTabNavigation';
+import { Box } from 'rebass';
+import { Modal } from '../Modal';
+import useIsOpen from './useIsOpen';
+import useAutoFocus from '../utils/useAutoFocus';
+import { Icon } from '../icons';
+import { WindowModal } from '../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"]);
+export const Dialog = React.forwardRef((props, dialogRef) => {
+    let { modal, fixed, focusOnBrowserVisible = false, autoFocus = true, className, children, modalProps, dismissOnClickOutside = false, onDismiss, windowModal, windowModalProps } = props, boxProps = __rest(props, ["modal", "fixed", "focusOnBrowserVisible", "autoFocus", "className", "children", "modalProps", "dismissOnClickOutside", "onDismiss", "windowModal", "windowModalProps"]);
     modal = props.modal === undefined ? true : props.modal;
     fixed = props.fixed === undefined ? true : props.fixed;
-    const [isOpen, setIsOpen] = (0, useIsOpen_1.default)(props);
-    const boxRef = (0, react_1.useRef)(null);
-    (0, useAutoFocus_1.default)({
+    const [isOpen, setIsOpen] = useIsOpen(props);
+    const boxRef = useRef(null);
+    useAutoFocus({
         isOpen,
         autoFocus: props.autoFocus,
         previous: ({ autoFocus }) => autoFocus && isOpen,
@@ -31,7 +28,7 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
         if (props.onKeyDown) {
             props.onKeyDown(e);
         }
-        (0, captureTabNavigation_1.default)(boxRef.current, e);
+        captureTabNavigation(boxRef.current, e);
         if (e.key === 'Escape') {
             if (e.nativeEvent.anotherModalClosed) {
                 return;
@@ -48,9 +45,9 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
             }
             setIsOpen(false);
         }
-        (0, captureTabNavigation_1.default)(boxRef.current, event);
+        captureTabNavigation(boxRef.current, event);
     };
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         if (dismissOnClickOutside && isOpen) {
             const dismissDialog = (e) => {
                 requestAnimationFrame(() => {
@@ -72,14 +69,14 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
     const bringToFront = React.useCallback(() => {
         if (boxRef.current &&
             boxRef.current.focus &&
-            (!document.activeElement || !(0, contains_1.default)(boxRef.current, document.activeElement))) {
+            (!document.activeElement || !contains(boxRef.current, document.activeElement))) {
             boxRef.current.focus();
         }
     }, [boxRef]);
     React.useImperativeHandle(dialogRef, () => ({
         bringToFront,
     }));
-    (0, react_1.useEffect)(() => {
+    useEffect(() => {
         let listener;
         if (focusOnBrowserVisible) {
             listener = () => {
@@ -98,28 +95,28 @@ exports.Dialog = React.forwardRef((props, dialogRef) => {
     if (!isOpen) {
         return null;
     }
-    const closeButton = showCloseButton ? (React.createElement(rebass_1.Box, { padding: 1, title: "Close dialog", onClick: () => setIsOpen(false), className: `${baseClassName}__close-button` },
-        React.createElement(icons_1.Icon, { size: 24, name: "close" }))) : null;
+    const closeButton = showCloseButton ? (React.createElement(Box, { padding: 1, title: "Close dialog", onClick: () => setIsOpen(false), className: `${baseClassName}__close-button` },
+        React.createElement(Icon, { size: 24, name: "close" }))) : null;
     const setPreventDismissFlag = (e) => {
         if (dismissOnClickOutside) {
             e.nativeEvent.preventDialogDismiss = true;
         }
     };
-    const box = (React.createElement(rebass_1.Box, Object.assign({}, boxProps, { onClick: (e) => {
+    const box = (React.createElement(Box, Object.assign({}, 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: join(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, Object.assign({}, windowModalProps), content);
     }
     if (modal) {
-        return (React.createElement(Modal_1.Modal, Object.assign({}, modalProps, { isOpen: isOpen, onBringToFront: bringToFront }), box));
+        return (React.createElement(Modal, Object.assign({}, modalProps, { isOpen: isOpen, onBringToFront: bringToFront }), box));
     }
     return content;
 });
-exports.default = exports.Dialog;
+export default Dialog;

package/src/components/Dialog/useIsOpen.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
-exports.default = (props) => {
-    return (0, useProperty_1.default)(props, 'isOpen', true, {
+import useProperty from '../utils/useProperty';
+export default (props) => {
+    return useProperty(props, 'isOpen', true, {
         onChange: (isOpen) => {
             if (!isOpen && props.onDismiss) {
                 props.onDismiss();

package/src/components/DragAndDropContext/DragAndDropContext.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DragAndDropContext = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-exports.DragAndDropContext = React.createContext({
+import * as React from 'react';
+export const DragAndDropContext = React.createContext({
     availableItems: [],
     permittedActions: {
         createTab: true,

package/src/components/DragAndDropContext/ModuleManager.js

@@ -1,15 +1,11 @@
-"use strict";
-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 PanelWithButton_1 = require("../../View/Components/Panels/PanelWithButton");
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const DragAndDropContext_1 = require("./DragAndDropContext");
-const TabList_1 = require("./TabList");
-const UnusedPanel_1 = require("./UnusedPanel");
-const ModuleManager = (props) => {
+import * as React from 'react';
+import { DragDropContext } from 'react-beautiful-dnd';
+import { PanelWithButton } from '../../View/Components/Panels/PanelWithButton';
+import SimpleButton from '../SimpleButton';
+import { DragAndDropContext } from './DragAndDropContext';
+import { TabList } from './TabList';
+import { UnusedPanel } from './UnusedPanel';
+export 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);
@@ -66,16 +62,15 @@ const ModuleManager = (props) => {
             return Object.assign(Object.assign({}, tab), { Name: tabName });
         }));
     };
-    return (React.createElement(react_beautiful_dnd_1.DragDropContext, { onDragEnd: (result) => {
+    return (React.createElement(DragDropContext, { onDragEnd: (result) => {
             if (result.type === 'TAB')
                 handleTabDragEnd(result);
             if (result.type === 'TOOLBAR')
                 handleToolbarDragEnd(result);
         } },
-        React.createElement(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue },
+        React.createElement(DragAndDropContext.Provider, { value: contextValue },
             React.createElement("div", { className: "ab-ModuleSelector", style: { display: 'flex', flexDirection: 'column' } },
-                React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
-                React.createElement(PanelWithButton_1.PanelWithButton, { className: "ab-ModuleSelector-UsedPanel", headerText: tabsTitle, button: contextValue.permittedActions.createTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, onClick: handleTabAdd }, "Add Tab")) },
-                    React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName }))))));
+                React.createElement(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
+                React.createElement(PanelWithButton, { className: "ab-ModuleSelector-UsedPanel", headerText: tabsTitle, button: contextValue.permittedActions.createTab && (React.createElement(SimpleButton, { disabled: disabled, onClick: handleTabAdd }, "Add Tab")) },
+                    React.createElement(TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName }))))));
 };
-exports.ModuleManager = ModuleManager;

package/src/components/DragAndDropContext/TabList.js

@@ -1,51 +1,43 @@
-"use strict";
-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 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" }),
+import * as React from 'react';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { Box, Flex } from 'rebass';
+import { Icon } from '../icons';
+import SimpleButton from '../SimpleButton';
+import { DragAndDropContext } from './DragAndDropContext';
+export function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
+    return (React.createElement(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" }),
         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))));
 }
-exports.TabList = TabList;
-function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
-    const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
+export function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+    const context = React.useContext(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(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)) }),
         React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
             React.createElement("div", Object.assign({}, (disabled ? {} : provided.dragHandleProps), { style: context.permittedActions.dragAndDropTab
                     ? {}
                     : {
                         display: 'none',
                     } }),
-                React.createElement(icons_1.Icon, { name: "drag" })),
+                React.createElement(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);
                 } })) : (tab.Name),
-            context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))),
+            context.permittedActions.deleteTab && (React.createElement(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))),
         React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
 }
-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 :
+export function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
+    return (React.createElement(Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(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) }))),
         provided.placeholder))));
 }
-exports.ToolbarList = ToolbarList;
-function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
-    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+export function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
+    const { availableItems } = React.useContext(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(Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(Flex, Object.assign({ 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 }),
         React.createElement("div", { style: { flex: 1 } }, title),
-        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", padding: 1, onClick: onRemove })))));
+        React.createElement(SimpleButton, { disabled: disabled, icon: "close", variant: "text", padding: 1, onClick: onRemove })))));
 }
-exports.ToolbarItem = ToolbarItem;

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -1,23 +1,18 @@
-"use strict";
-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 rebass_1 = require("rebass");
-const DragAndDropContext_1 = require("./DragAndDropContext");
-function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (React.createElement(rebass_1.Box, { pb: 1, mb: 2, className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
-        React.createElement(rebass_1.Box, { p: 2 },
+import * as React from 'react';
+import { Draggable, Droppable } from 'react-beautiful-dnd';
+import { Box } from 'rebass';
+import { DragAndDropContext } from './DragAndDropContext';
+export function UnusedPanel({ items, disabled, title, dragItemText, }) {
+    return (React.createElement(Box, { pb: 1, mb: 2, className: "ab-ModuleSelector__UnusedPanel", "data-name": "unusedpanel-items" },
+        React.createElement(Box, { p: 2 },
             React.createElement("b", null, title),
             " (",
             dragItemText,
             ")"),
         React.createElement(UnusedItemList, { disabled: disabled, items: items })));
 }
-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(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: {
             display: 'flex',
             flexDirection: 'row',
             flexWrap: 'wrap',
@@ -28,10 +23,10 @@ function UnusedItemList({ items, disabled }) {
         provided.placeholder))));
 }
 function UnusedItem({ unusedItem, unusedItemIndex, disabled, }) {
-    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    const { availableItems } = React.useContext(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(Draggable, { isDragDisabled: disabled, draggableId: unusedItem, index: unusedItemIndex }, (provided, snapshot) => {
         const eventHandlers = disabled
             ? {}
             : Object.assign(Object.assign({}, provided.draggableProps), provided.dragHandleProps);

package/src/components/DragAndDropContext/types.js

@@ -1,2 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+export {};

package/src/components/Drawer/index.js

@@ -1,9 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Drawer = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Drawer = (props) => {
+import * as React from 'react';
+export const Drawer = (props) => {
     const [isOpen, setIsOpen] = React.useState(() => {
         return props.open;
     });
@@ -57,4 +53,3 @@ const Drawer = (props) => {
     }
     return (React.createElement("div", { onKeyDown: handleOnKeyDown, style: style, onTransitionEnd: handletransitionEnd }, props.children));
 };
-exports.Drawer = Drawer;