@adaptabletools/adaptable 16.2.3 → 17.0.0-canary.0

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;

package/src/components/Dropdown/Arrows.js

@@ -1,8 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const icons_1 = require("../icons");
+import * as React from 'react';
+import { Icon } from '../icons';
 const Arrows = () => {
     return (React.createElement("div", { style: {
             display: 'flex',
@@ -15,7 +12,7 @@ const Arrows = () => {
             transform: 'translate3d(0px, -50%, 0px)',
             cursor: 'pointer',
         } },
-        React.createElement(icons_1.Icon, { name: "triangle-up", size: 24, style: { position: 'relative', top: 7 } }),
-        React.createElement(icons_1.Icon, { name: "triangle-down", size: 24, style: { position: 'relative', top: -7 } })));
+        React.createElement(Icon, { name: "triangle-up", size: 24, style: { position: 'relative', top: 7 } }),
+        React.createElement(Icon, { name: "triangle-down", size: 24, style: { position: 'relative', top: -7 } })));
 };
-exports.default = Arrows;
+export default Arrows;

package/src/components/Dropdown/index.js

@@ -1,24 +1,22 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const rebass_1 = require("rebass");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
-const Arrows_1 = tslib_1.__importDefault(require("./Arrows"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { useState, useRef } from 'react';
+import { Flex } from 'rebass';
+import join from '../utils/join';
+import useProperty from '../utils/useProperty';
+import Arrows from './Arrows';
+import SimpleButton from '../SimpleButton';
 const baseClassName = 'ab-Dropdown';
 const Dropdown = (props) => {
-    let { options, multiple, name, autoFocus, showEmptyItem = true, showClearButton, disabled, allowSearch, clearButtonProps, value: _, onChange: __, style, onExpand } = props, boxProps = tslib_1.__rest(props, ["options", "multiple", "name", "autoFocus", "showEmptyItem", "showClearButton", "disabled", "allowSearch", "clearButtonProps", "value", "onChange", "style", "onExpand"]);
+    let { options, multiple, name, autoFocus, showEmptyItem = true, showClearButton, disabled, allowSearch, clearButtonProps, value: _, onChange: __, style, onExpand } = props, boxProps = __rest(props, ["options", "multiple", "name", "autoFocus", "showEmptyItem", "showClearButton", "disabled", "allowSearch", "clearButtonProps", "value", "onChange", "style", "onExpand"]);
     if (showClearButton !== false) {
         showClearButton = true;
     }
-    let [value, setValue] = (0, useProperty_1.default)(props, 'value', undefined, {
+    let [value, setValue] = useProperty(props, 'value', undefined, {
         onChange: props.onChange,
     });
     let selectedOption = null;
-    let [lazyOptions, setLazyOptions] = (0, react_1.useState)([]);
+    let [lazyOptions, setLazyOptions] = useState([]);
     let onMouseDown = () => {
         if (onExpand) {
             onExpand();
@@ -56,9 +54,9 @@ const Dropdown = (props) => {
     const onChange = (option, e) => {
         setValue(option ? option.value : option, e, option);
     };
-    const selectRef = (0, react_1.useRef)(null);
-    const domRef = (0, react_1.useRef)(null);
-    const [focused, setFocused] = (0, react_1.useState)(false);
+    const selectRef = useRef(null);
+    const domRef = useRef(null);
+    const [focused, setFocused] = useState(false);
     const onFocus = (e) => {
         if (e.target === selectRef.current) {
             setFocused(true);
@@ -79,14 +77,14 @@ const Dropdown = (props) => {
         selectedText = placeholder;
     }
     //20  ... 20 16
-    const renderClearButton = () => (React.createElement(SimpleButton_1.default, Object.assign({ variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1 }, clearButtonProps, { style: Object.assign({ zIndex: 10, color: 'inherit' }, (clearButtonProps ? clearButtonProps.style : null)), onClick: (e) => {
+    const renderClearButton = () => (React.createElement(SimpleButton, Object.assign({ variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1 }, clearButtonProps, { style: Object.assign({ zIndex: 10, color: 'inherit' }, (clearButtonProps ? clearButtonProps.style : null)), onClick: (e) => {
             e.preventDefault();
             onChange(null, e);
         } })));
-    return (React.createElement(rebass_1.Flex, Object.assign({ ref: domRef, flexDirection: "row", alignItems: "center" }, boxProps, { className: (0, join_1.default)(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur }),
+    return (React.createElement(Flex, Object.assign({ ref: domRef, flexDirection: "row", alignItems: "center" }, boxProps, { className: join(props.className, baseClassName, !selectedOption ? `${baseClassName}--empty` : `${baseClassName}--not-empty`, focused ? `${baseClassName}--focused` : `${baseClassName}--not-focused`, disabled ? `${baseClassName}--disabled` : null), style: style, tabIndex: focused ? -1 : props.tabIndex || 0, onFocus: onFocus, onBlur: onBlur }),
         React.createElement("div", { style: { display: 'inline-block' }, className: `${baseClassName}__text` },
             selectedText,
-            React.createElement(Arrows_1.default, null)),
+            React.createElement(Arrows, null)),
         React.createElement("select", { ref: selectRef, tabIndex: -1, disabled: disabled, value: value == null ? '' : value, onChange: (e) => {
                 const selected = finalOptions.filter((o) => o.value == e.target.value)[0];
                 onChange(selected, e);
@@ -102,4 +100,4 @@ const Dropdown = (props) => {
         })),
         showClearButton && selectedOption ? renderClearButton() : null));
 };
-exports.default = Dropdown;
+export default Dropdown;

package/src/components/DropdownButton/DropdownButtonItem.js

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

package/src/components/DropdownButton/index.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.DROPDOWN_ICON = 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 SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const useExpanded_1 = tslib_1.__importDefault(require("./useExpanded"));
-const renderItem_1 = tslib_1.__importDefault(require("./renderItem"));
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
-exports.DROPDOWN_ICON = (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24" },
+import { __rest } from "tslib";
+import * as React from 'react';
+import { cloneElement, useRef } from 'react';
+import join from '../utils/join';
+import SimpleButton from '../SimpleButton';
+import useExpanded from './useExpanded';
+import renderItem from './renderItem';
+import OverlayTrigger from '../OverlayTrigger';
+export const DROPDOWN_ICON = (React.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24" },
     React.createElement("path", { d: "M7 10l5 5 5-5H7z" })));
 const spacer = React.createElement("div", { style: { flex: 1 } });
 const baseClassName = 'ab-DropdownButton';
@@ -17,7 +14,7 @@ const defaultListItemStyle = {
     padding: 'var(--ab-cmp-dropdownbutton-list-item__padding)',
 };
 const DropdownButton = React.forwardRef((props, theRef) => {
-    let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps, onExpand, onCollapse, showToggleIcon = true } = props, domProps = tslib_1.__rest(props, ["columns", "overlayProps", "listOffset", "collapseOnItemClick", "focusOnClear", "idProperty", "isItemDisabled", "items", "children", "listMinWidth", "listStyle", "listItemStyle", "listItemClassName", "constrainTo", "showClearButton", "onClear", "clearButtonProps", "onExpand", "onCollapse", "showToggleIcon"]);
+    let { columns, overlayProps, listOffset = 10, collapseOnItemClick = true, focusOnClear = true, idProperty = 'id', isItemDisabled, items, children, listMinWidth = 100, listStyle, listItemStyle, listItemClassName, constrainTo, showClearButton = false, onClear, clearButtonProps, onExpand, onCollapse, showToggleIcon = true } = props, domProps = __rest(props, ["columns", "overlayProps", "listOffset", "collapseOnItemClick", "focusOnClear", "idProperty", "isItemDisabled", "items", "children", "listMinWidth", "listStyle", "listItemStyle", "listItemClassName", "constrainTo", "showClearButton", "onClear", "clearButtonProps", "onExpand", "onCollapse", "showToggleIcon"]);
     isItemDisabled = isItemDisabled || ((item) => item.disabled);
     if (!columns) {
         columns = ['icon', 'label'];
@@ -34,7 +31,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
             }
             const disabled = isItemDisabled(item);
             const itemStyle = Object.assign(Object.assign({}, defaultListItemStyle), listItemStyle);
-            const itemClassName = (0, join_1.default)(`${baseClassName}__list-item`, item.clickable === false || disabled
+            const itemClassName = join(`${baseClassName}__list-item`, item.clickable === false || disabled
                 ? `${baseClassName}__list-item--not-clickable`
                 : `${baseClassName}__list-item--clickable`, disabled ? `${baseClassName}__list-item--disabled` : '', listItemClassName);
             const getItemHandler = (eventName) => {
@@ -63,7 +60,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
             if (item['label']) {
                 domProps['data-name'] = item['label'];
             }
-            return (0, renderItem_1.default)({
+            return renderItem({
                 index,
                 idProperty,
                 onItemClick: getItemHandler('onClick'),
@@ -78,18 +75,18 @@ const DropdownButton = React.forwardRef((props, theRef) => {
             React.createElement("tbody", null, content)));
     }
     const dropdownButtonClassName = props.className;
-    const className = (0, join_1.default)(props.className, baseClassName);
-    const positionerRef = (0, react_1.useRef)(null);
-    const { expanded, toggle, setExpanded, positionInfo } = (0, useExpanded_1.default)(props, positionerRef);
+    const className = join(props.className, baseClassName);
+    const positionerRef = useRef(null);
+    const { expanded, toggle, setExpanded, positionInfo } = useExpanded(props, positionerRef);
     const { maxHeight: maxListHeight, maxWidth: maxListWidth } = positionInfo;
     listStyle = Object.assign({ minWidth: typeof maxListWidth === 'number' ? Math.min(listMinWidth, maxListWidth) : listMinWidth, maxHeight: maxListHeight, maxWidth: maxListWidth }, listStyle);
     let icon = expanded
-        ? (0, react_1.cloneElement)(exports.DROPDOWN_ICON, {
-            style: Object.assign(Object.assign({}, exports.DROPDOWN_ICON.props.style), { transform: 'rotate(180deg) translate3d(0px, -2px, 0px)' }),
+        ? cloneElement(DROPDOWN_ICON, {
+            style: Object.assign(Object.assign({}, DROPDOWN_ICON.props.style), { transform: 'rotate(180deg) translate3d(0px, -2px, 0px)' }),
         })
-        : exports.DROPDOWN_ICON;
+        : DROPDOWN_ICON;
     const hasClearButton = onClear || showClearButton;
-    const clearButton = hasClearButton ? (React.createElement(SimpleButton_1.default, Object.assign({ disabled: domProps.disabled, as: "div", onClick: (event) => {
+    const clearButton = hasClearButton ? (React.createElement(SimpleButton, Object.assign({ disabled: domProps.disabled, as: "div", onClick: (event) => {
             var _a;
             event.stopPropagation();
             if (onClear) {
@@ -101,11 +98,11 @@ const DropdownButton = React.forwardRef((props, theRef) => {
         spacer,
         hasClearButton ? clearButton : null,
         icon));
-    const buttonRef = (0, react_1.useRef)(null);
-    return (React.createElement(OverlayTrigger_1.default, Object.assign({ visible: expanded, targetOffset: listOffset, render: () => {
+    const buttonRef = useRef(null);
+    return (React.createElement(OverlayTrigger, Object.assign({ visible: expanded, targetOffset: listOffset, render: () => {
             return (React.createElement("div", { "data-name": `${dropdownButtonClassName}`, style: listStyle, className: `${baseClassName}__list` }, content));
         } }, overlayProps),
-        React.createElement(SimpleButton_1.default, Object.assign({ iconPosition: "end" }, (showToggleIcon && { icon, paddingRight: 0 }), domProps, { ref: (btn) => {
+        React.createElement(SimpleButton, Object.assign({ iconPosition: "end" }, (showToggleIcon && { icon, paddingRight: 0 }), domProps, { ref: (btn) => {
                 buttonRef.current = btn;
                 if (!theRef) {
                     return;
@@ -149,4 +146,4 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 } }),
             children)));
 });
-exports.default = DropdownButton;
+export default DropdownButton;

package/src/components/DropdownButton/renderItem.js

@@ -1,11 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const isPlainObject_1 = tslib_1.__importDefault(require("lodash/isPlainObject"));
-exports.default = ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
+import * as React from 'react';
+import isPlainObject from 'lodash/isPlainObject';
+export default ({ domProps, item, onItemClick, index, columns, className, idProperty, style, }) => {
     const key = item[idProperty] || index;
-    if (!(0, isPlainObject_1.default)(item)) {
+    if (!isPlainObject(item)) {
         return (React.createElement("tr", Object.assign({ onClick: onItemClick, key: key, className: className }, domProps),
             React.createElement("td", { colSpan: columns.length, style: style }, item)));
     }

package/src/components/DropdownButton/useExpanded.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const react_1 = require("react");
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
-const getAvailableSizeInfo_1 = tslib_1.__importDefault(require("../utils/getAvailableSizeInfo"));
-const OverlayTrigger_1 = require("../OverlayTrigger");
-exports.default = (props, positionerRef) => {
-    const positionInfoRef = (0, react_1.useRef)({
+import { useRef } from 'react';
+import useProperty from '../utils/useProperty';
+import getAvailableSizeInfo from '../utils/getAvailableSizeInfo';
+import { getConstrainRect } from '../OverlayTrigger';
+export default (props, positionerRef) => {
+    const positionInfoRef = useRef({
         maxHeight: '50vh',
         maxWidth: '50vw',
         verticalPosition: 'bottom',
@@ -14,13 +11,13 @@ exports.default = (props, positionerRef) => {
     });
     const updatePosition = () => {
         const positionRect = positionerRef.current.getBoundingClientRect();
-        positionInfoRef.current = (0, getAvailableSizeInfo_1.default)({
-            constrainRect: (0, OverlayTrigger_1.getConstrainRect)(positionerRef.current, props.constrainTo),
+        positionInfoRef.current = getAvailableSizeInfo({
+            constrainRect: getConstrainRect(positionerRef.current, props.constrainTo),
             targetRect: positionRect,
             maxSizeOffset: 30,
         });
     };
-    const [expanded, doSetExpanded] = (0, useProperty_1.default)(props, 'expanded', false, {
+    const [expanded, doSetExpanded] = useProperty(props, 'expanded', false, {
         onChange: (expanded) => {
             if (expanded) {
                 if (props.onExpand) {

package/src/components/EllipsisContainer/index.js

@@ -1,15 +1,12 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.EllipsisContainer = 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 useLatest_1 = require("../utils/useLatest");
-const usePrevious_1 = tslib_1.__importDefault(require("../utils/usePrevious"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { useRef, useState } from 'react';
+import { Flex } from 'rebass';
+import { useLatest } from '../utils/useLatest';
+import usePrevious from '../utils/usePrevious';
 const Container = ({ children, index, hidden, observerRef, }) => {
     var _a;
-    const [mounted, setMounted] = (0, react_1.useState)(false);
+    const [mounted, setMounted] = useState(false);
     React.useEffect(() => {
         const timeoutId = setTimeout(() => {
             // we wait for a bit, so intersection observer
@@ -19,7 +16,7 @@ const Container = ({ children, index, hidden, observerRef, }) => {
         }, 50);
         return () => clearTimeout(timeoutId);
     }, []);
-    const domRef = (0, react_1.useRef)(null);
+    const domRef = useRef(null);
     const onMount = (node) => {
         var _a, _b;
         if (node) {
@@ -44,14 +41,14 @@ const Container = ({ children, index, hidden, observerRef, }) => {
     child = React.cloneElement(child, cloneProps);
     return React.createElement(React.Fragment, null, child);
 };
-const EllipsisContainer = (props) => {
-    const { allowWrap, count, direction, renderItem, renderEllipsis } = props, boxProps = tslib_1.__rest(props, ["allowWrap", "count", "direction", "renderItem", "renderEllipsis"]);
-    const domRef = (0, react_1.useRef)(null);
-    const observerRef = (0, react_1.useRef)(null);
+export const EllipsisContainer = (props) => {
+    const { allowWrap, count, direction, renderItem, renderEllipsis } = props, boxProps = __rest(props, ["allowWrap", "count", "direction", "renderItem", "renderEllipsis"]);
+    const domRef = useRef(null);
+    const observerRef = useRef(null);
     const [minNotVisibleIndex, setMinNotVisibleIndex] = React.useState(props.count);
-    const [visibleSet] = (0, react_1.useState)(() => new Set());
-    const [invisibleSet] = (0, react_1.useState)(() => new Set());
-    const getCount = (0, useLatest_1.useLatest)(props.count);
+    const [visibleSet] = useState(() => new Set());
+    const [invisibleSet] = useState(() => new Set());
+    const getCount = useLatest(props.count);
     React.useEffect(() => {
         const callback = (entries) => {
             const count = getCount();
@@ -84,7 +81,7 @@ const EllipsisContainer = (props) => {
             observer.disconnect();
         };
     }, []);
-    const prevCount = (0, usePrevious_1.default)(count, count);
+    const prevCount = usePrevious(count, count);
     React.useLayoutEffect(() => {
         if (allowWrap) {
             return;
@@ -103,6 +100,5 @@ const EllipsisContainer = (props) => {
                 ? (_a = renderEllipsis === null || renderEllipsis === void 0 ? void 0 : renderEllipsis({ remaining })) !== null && _a !== void 0 ? _a : '...'
                 : null));
     });
-    return (React.createElement(rebass_1.Flex, Object.assign({ ref: domRef, flexWrap: allowWrap ? 'wrap' : 'nowrap', alignItems: "center", "data-name": "options-container" }, boxProps, { flexDirection: direction === 'horizontal' ? 'row' : 'column' }), children));
+    return (React.createElement(Flex, Object.assign({ ref: domRef, flexWrap: allowWrap ? 'wrap' : 'nowrap', alignItems: "center", "data-name": "options-container" }, boxProps, { flexDirection: direction === 'horizontal' ? 'row' : 'column' }), children));
 };
-exports.EllipsisContainer = EllipsisContainer;

package/src/components/EmptyContent/index.js

@@ -1,16 +1,14 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-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"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import join from '../utils/join';
 const baseClassName = 'ab-EmptyContent';
 const EmptyContent = (_a) => {
-    var { children, className, style } = _a, flexProps = tslib_1.__rest(_a, ["children", "className", "style"]);
+    var { children, className, style } = _a, flexProps = __rest(_a, ["children", "className", "style"]);
     if (typeof children === 'string') {
         children = React.createElement("p", null, children);
     }
-    return (React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__wrapper` },
-        React.createElement(rebass_1.Flex, Object.assign({ alignItems: "center", justifyContent: "center", flexDirection: "column" }, flexProps, { className: (0, join_1.default)(baseClassName, className), style: style }), children)));
+    return (React.createElement(Box, { flex: 1, className: `${baseClassName}__wrapper` },
+        React.createElement(Flex, Object.assign({ alignItems: "center", justifyContent: "center", flexDirection: "column" }, flexProps, { className: join(baseClassName, className), style: style }), children)));
 };
-exports.default = EmptyContent;
+export default EmptyContent;

package/src/components/ErrorBox/index.js

@@ -1,12 +1,8 @@
-"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-ErrorBox';
+import * as React from 'react';
+import { Box } from 'rebass';
+import join from '../utils/join';
+export const baseClassName = 'ab-ErrorBox';
 const ErrorBox = (props) => {
-    return React.createElement(rebass_1.Box, Object.assign({}, props, { className: (0, join_1.default)(props.className, exports.baseClassName) }));
+    return React.createElement(Box, Object.assign({}, props, { className: join(props.className, baseClassName) }));
 };
-exports.default = ErrorBox;
+export default ErrorBox;