@adaptabletools/adaptable 16.2.4 → 17.0.0-canary.1

package/src/components/FileDroppable/index.js

@@ -1,16 +1,13 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.readJSONFile = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const react_1 = require("react");
-const join_1 = tslib_1.__importDefault(require("../../components/utils/join"));
-const contains_1 = tslib_1.__importDefault(require("../../components/utils/contains"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
-const icons_1 = require("../icons");
-const HelpBlock_1 = tslib_1.__importDefault(require("../HelpBlock"));
-const reducer_1 = tslib_1.__importStar(require("./reducer"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Flex, Box } from 'rebass';
+import { useReducer, useRef } from 'react';
+import join from '../../components/utils/join';
+import contains from '../../components/utils/contains';
+import SimpleButton from '../SimpleButton';
+import { Icon } from '../icons';
+import HelpBlock from '../HelpBlock';
+import reducer, { ActionTypes } from './reducer';
 const initialState = {
     dragOver: false,
     message: null,
@@ -19,7 +16,7 @@ const preventEventPropagation = (e) => {
     e.preventDefault();
     e.stopPropagation();
 };
-const readJSONFile = async (file, toJSON) => {
+export const readJSONFile = async (file, toJSON) => {
     const reader = new FileReader();
     return new Promise((resolve, reject) => {
         reader.onload = function (e) {
@@ -38,24 +35,23 @@ const readJSONFile = async (file, toJSON) => {
         reader.readAsText(file);
     });
 };
-exports.readJSONFile = readJSONFile;
 const FileDroppable = (props) => {
     var _a;
-    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(icons_1.Icon, { name: "paperclip", size: 48 }), value } = props, domProps = tslib_1.__rest(props, ["onDropSuccess", "message", "fileAccept", "helpText", "defaultText", "dragOverText", "icon", "value"]);
-    const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, initialState);
+    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(Icon, { name: "paperclip", size: 48 }), value } = props, domProps = __rest(props, ["onDropSuccess", "message", "fileAccept", "helpText", "defaultText", "dragOverText", "icon", "value"]);
+    const [state, dispatch] = useReducer(reducer, initialState);
     const onDragEnter = (e) => {
         dispatch({
-            type: reducer_1.ActionTypes.DRAG_OVER,
+            type: ActionTypes.DRAG_OVER,
         });
     };
     const onDragLeave = (event) => {
         preventEventPropagation(event);
         if (domRef.current != event.target &&
-            (0, contains_1.default)(domRef.current, event.target)) {
+            contains(domRef.current, event.target)) {
             return;
         }
         dispatch({
-            type: reducer_1.ActionTypes.DRAG_OUT,
+            type: ActionTypes.DRAG_OUT,
         });
     };
     const onDrop = async (e) => {
@@ -73,11 +69,11 @@ const FileDroppable = (props) => {
         if (file) {
             let json;
             try {
-                json = await (props.readFile || exports.readJSONFile)(file, props.toJSON);
+                json = await (props.readFile || readJSONFile)(file, props.toJSON);
                 dispatch({
-                    type: reducer_1.ActionTypes.DROP_SUCCES,
+                    type: ActionTypes.DROP_SUCCES,
                     payload: {
-                        message: (React.createElement(rebass_1.Box, null, props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText)),
+                        message: (React.createElement(Box, null, props.loadingText === undefined ? 'Initializing adaptable...' : props.loadingText)),
                     },
                 });
                 requestAnimationFrame(() => {
@@ -90,17 +86,17 @@ const FileDroppable = (props) => {
             }
             catch (err) {
                 dispatch({
-                    type: reducer_1.ActionTypes.SET_INVALID_FILE,
+                    type: ActionTypes.SET_INVALID_FILE,
                     payload: {
-                        message: React.createElement(rebass_1.Box, null, 'The file is not a valid JSON file! Please try again!'),
+                        message: React.createElement(Box, null, 'The file is not a valid JSON file! Please try again!'),
                     },
                 });
             }
         }
     };
-    const domRef = (0, react_1.useRef)();
+    const domRef = useRef();
     let form = (React.createElement("form", { onSubmit: preventEventPropagation },
-        React.createElement(SimpleButton_1.default, { style: { cursor: 'pointer' }, variant: "outlined" },
+        React.createElement(SimpleButton, { style: { cursor: 'pointer' }, variant: "outlined" },
             React.createElement("div", null, state.dragOver ? dragOverText : defaultText),
             React.createElement("input", { type: "file", onChange: onDrop, accept: fileAccept, value: (_a = props === null || props === void 0 ? void 0 : props.file) === null || _a === void 0 ? void 0 : _a.name, style: {
                     opacity: 0,
@@ -115,15 +111,15 @@ const FileDroppable = (props) => {
                     zIndex: 1,
                 } }))));
     const msg = message || state.message;
-    return (React.createElement(rebass_1.Flex, Object.assign({}, domProps, { flexDirection: "column", className: (0, join_1.default)(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef }),
+    return (React.createElement(Flex, Object.assign({}, domProps, { flexDirection: "column", className: join(props.className, 'ab-FileDroppable', state.dragOver ? 'ab-FileDroppable--drag-over' : ''), alignItems: "center", justifyContent: "center", onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDrop: onDrop, onDragOver: preventEventPropagation, ref: domRef }),
         props.children,
-        helpText || icon ? (React.createElement(rebass_1.Flex, { flexDirection: "column" },
-            helpText ? (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "center", margin: 2 },
-                React.createElement(HelpBlock_1.default, null,
+        helpText || icon ? (React.createElement(Flex, { flexDirection: "column" },
+            helpText ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 },
+                React.createElement(HelpBlock, null,
                     React.createElement("b", null, helpText)))) : null,
-            icon ? (React.createElement(rebass_1.Flex, { flexDirection: "column", alignItems: "center", margin: 2 }, icon)) : null)) : null,
+            icon ? (React.createElement(Flex, { flexDirection: "column", alignItems: "center", margin: 2 }, icon)) : null)) : null,
         msg,
         form));
 };
 FileDroppable.defaultProps = {};
-exports.default = FileDroppable;
+export default FileDroppable;

package/src/components/FileDroppable/reducer.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionTypes = void 0;
-var ActionTypes;
+export var ActionTypes;
 (function (ActionTypes) {
     ActionTypes["DRAG_OVER"] = "DRAG_OVER";
     ActionTypes["DRAG_OUT"] = "DRAG_OUT";
     ActionTypes["SET_INVALID_FILE"] = "SET_INVALID_FILE";
     ActionTypes["DROP_SUCCES"] = "DROP_SUCCES";
-})(ActionTypes = exports.ActionTypes || (exports.ActionTypes = {}));
+})(ActionTypes || (ActionTypes = {}));
 const reducer = (state, action) => {
     if (action.type === ActionTypes.DRAG_OVER) {
         return Object.assign(Object.assign({}, state), { dragOver: true });
@@ -23,4 +20,4 @@ const reducer = (state, action) => {
     }
     return state;
 };
-exports.default = reducer;
+export default reducer;

package/src/components/FlexWithFooter.js

@@ -1,8 +1,6 @@
-"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");
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Flex } from 'rebass';
 const defaultStyle = {
     height: '100%',
     maxHeight: '90vh',
@@ -10,10 +8,10 @@ const defaultStyle = {
     maxWidth: 800,
 };
 const FlexWithFooter = (props) => {
-    const { footer, footerProps, children, style } = props, domProps = tslib_1.__rest(props, ["footer", "footerProps", "children", "style"]);
-    return (React.createElement(rebass_1.Flex, Object.assign({ flexDirection: "column" }, domProps, { style: Object.assign(Object.assign({}, defaultStyle), style) }),
-        React.createElement(rebass_1.Flex, { flexDirection: "column", padding: 0, flex: 1 },
-            React.createElement(rebass_1.Flex, { flexDirection: "column", flex: 1 }, children)),
-        footer ? (React.createElement(rebass_1.Flex, Object.assign({ padding: 2, backgroundColor: "primary" }, footerProps), footer)) : null));
+    const { footer, footerProps, children, style } = props, domProps = __rest(props, ["footer", "footerProps", "children", "style"]);
+    return (React.createElement(Flex, Object.assign({ flexDirection: "column" }, domProps, { style: Object.assign(Object.assign({}, defaultStyle), style) }),
+        React.createElement(Flex, { flexDirection: "column", padding: 0, flex: 1 },
+            React.createElement(Flex, { flexDirection: "column", flex: 1 }, children)),
+        footer ? (React.createElement(Flex, Object.assign({ padding: 2, backgroundColor: "primary" }, footerProps), footer)) : null));
 };
-exports.default = FlexWithFooter;
+export default FlexWithFooter;

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

@@ -2,14 +2,14 @@ import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { ReactNode } from 'react';
 import { ReactComponentLike } from 'prop-types';
-declare type FormColumn = {
+type FormColumn = {
     name: string;
     component?: ReactComponentLike;
     size?: string | number;
     className?: string;
     style?: React.CSSProperties;
 };
-declare type TypeFormLayout = {
+type TypeFormLayout = {
     childrenToColumns?: boolean;
     defaultComponent?: ReactComponentLike;
     columns?: (string | number | FormColumn)[];
@@ -19,8 +19,8 @@ declare type TypeFormLayout = {
     gridRowGap?: string | number;
     gridColumnGap?: string | number;
 };
-export declare type AdaptableFormConfig = TypeFormLayout;
-export declare type FormLayoutColumn = FormColumn;
+export type AdaptableFormConfig = TypeFormLayout;
+export type FormLayoutColumn = FormColumn;
 interface FormLayoutProps extends Omit<BoxProps, keyof TypeFormLayout>, TypeFormLayout {
 }
 declare const FormLayout: (props: FormLayoutProps) => JSX.Element;

package/src/components/FormLayout/index.js

@@ -1,13 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormRow = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const react_1 = require("react");
-const merge_1 = tslib_1.__importDefault(require("lodash/merge"));
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const FormLayoutContext = (0, react_1.createContext)(null);
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Box } from 'rebass';
+import { createContext, useContext } from 'react';
+import merge from 'lodash/merge';
+import join from '../utils/join';
+const FormLayoutContext = createContext(null);
 const defaultColumns = {
     label: {
         className: 'ab-FormLayout_column--label',
@@ -18,7 +15,7 @@ const defaultColumns = {
 };
 const PLACEHOLDER = React.createElement("div", null);
 const FormLayout = (props) => {
-    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = rebass_1.Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true } = props, boxProps = tslib_1.__rest(props, ["placeholder", "columns", "defaultComponent", "sizes", "gridColumnGap", "gridRowGap", "style", "childrenToColumns"]);
+    let { placeholder = PLACEHOLDER, columns = ['label', 'children'], defaultComponent = Box, sizes = ['auto', '1fr'], gridColumnGap = 'var(--ab-space-2)', gridRowGap = 'var(--ab-space-2)', style, childrenToColumns = true } = props, boxProps = __rest(props, ["placeholder", "columns", "defaultComponent", "sizes", "gridColumnGap", "gridRowGap", "style", "childrenToColumns"]);
     columns = columns.map((c) => {
         if (typeof c === 'string' || typeof c === 'number') {
             c = {
@@ -26,7 +23,7 @@ const FormLayout = (props) => {
             };
         }
         if (defaultColumns[c.name]) {
-            c = (0, merge_1.default)({}, defaultColumns[c.name], c);
+            c = merge({}, defaultColumns[c.name], c);
         }
         c.component = c.component === undefined ? defaultComponent : c.component;
         return c;
@@ -53,10 +50,10 @@ const FormLayout = (props) => {
             currentRow: 0,
             childrenToColumns,
         } },
-        React.createElement(rebass_1.Box, Object.assign({}, boxProps, { className: (0, join_1.default)(boxProps.className, 'ab-FormLayout'), style: Object.assign(Object.assign({}, style), formStyle) }))));
+        React.createElement(Box, Object.assign({}, boxProps, { className: join(boxProps.className, 'ab-FormLayout'), style: Object.assign(Object.assign({}, style), formStyle) }))));
 };
-const FormRow = (props) => {
-    const ctx = (0, react_1.useContext)(FormLayoutContext);
+export const FormRow = (props) => {
+    const ctx = useContext(FormLayoutContext);
     const { columns, placeholder, childrenToColumns } = ctx;
     const rowIndex = ctx.currentRow;
     ctx.currentRow++;
@@ -79,5 +76,4 @@ const FormRow = (props) => {
     });
     return React.createElement(React.Fragment, null, columnValues);
 };
-exports.FormRow = FormRow;
-exports.default = FormLayout;
+export default FormLayout;

package/src/components/HelpBlock/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-HelpBlock';
+import * as React from 'react';
+import { Box } from 'rebass';
+import join from '../utils/join';
+export const baseClassName = 'ab-HelpBlock';
 const HelpBlock = (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 = HelpBlock;
+export default HelpBlock;

package/src/components/Icon/index.js

@@ -1,24 +1,20 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableCustomIcon = exports.isAdaptableSystemIcon = exports.IconComponent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const icons_1 = require("../icons");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const react_1 = require("react");
-const IconComponent = (props) => {
+import * as React from 'react';
+import { allIcons, Icon } from '../icons';
+import join from '../utils/join';
+import { useEffect, useRef } from 'react';
+export const IconComponent = (props) => {
     var _a, _b, _c, _d, _e;
     const { icon, iconClassName } = props;
     if (!icon) {
         return null;
     }
-    const className = !(0, exports.isAdaptableElementIcon)(icon)
-        ? (0, join_1.default)(icon.className, iconClassName)
+    const className = !isAdaptableElementIcon(icon)
+        ? join(icon.className, iconClassName)
         : iconClassName;
-    const divRef = (0, react_1.useRef)(null);
-    (0, react_1.useEffect)(() => {
+    const divRef = useRef(null);
+    useEffect(() => {
         let htmlElement;
-        if ((0, exports.isAdaptableElementIcon)(icon)) {
+        if (isAdaptableElementIcon(icon)) {
             if (typeof icon.element === 'string') {
                 const domParser = new DOMParser();
                 htmlElement = domParser.parseFromString(icon.element, 'text/html').body
@@ -33,41 +29,36 @@ const IconComponent = (props) => {
             divRef.current.insertAdjacentElement('afterend', htmlElement);
         }
         return () => {
-            if ((0, exports.isAdaptableElementIcon)(icon)) {
+            if (isAdaptableElementIcon(icon)) {
                 htmlElement === null || htmlElement === void 0 ? void 0 : htmlElement.remove();
             }
         };
     }, [icon]);
-    if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.allIcons) {
-        return (React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
+    if (isAdaptableSystemIcon(icon) && icon.name in allIcons) {
+        return (React.createElement(Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
-    if ((0, exports.isAdaptableCustomIcon)(icon)) {
+    if (isAdaptableCustomIcon(icon)) {
         let width = (_b = (_a = icon.style) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'var(--ab-cmp-icon__width)';
         let height = (_d = (_c = icon.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 'var(--ab-cmp-icon__height)';
         const iconStyle = (_e = icon.style) !== null && _e !== void 0 ? _e : {};
         return React.createElement("img", { src: icon.src, className: className, style: Object.assign({ height, width }, iconStyle) });
     }
-    if ((0, exports.isAdaptableElementIcon)(icon)) {
+    if (isAdaptableElementIcon(icon)) {
         return (React.createElement("span", { ref: divRef, style: { display: 'none' }, "data-name": "adaptable-icon-placeholder" }));
     }
     return null;
 };
-exports.IconComponent = IconComponent;
-const isAdaptableSystemIcon = (icon) => {
+export const isAdaptableSystemIcon = (icon) => {
     return typeof (icon === null || icon === void 0 ? void 0 : icon.name) === 'string';
 };
-exports.isAdaptableSystemIcon = isAdaptableSystemIcon;
-const isAdaptableCustomIcon = (icon) => {
+export const isAdaptableCustomIcon = (icon) => {
     return typeof (icon === null || icon === void 0 ? void 0 : icon.src) === 'string';
 };
-exports.isAdaptableCustomIcon = isAdaptableCustomIcon;
-const isAdaptableElementIcon = (icon) => {
+export const isAdaptableElementIcon = (icon) => {
     return ((typeof HTMLElement === 'function' &&
         (icon === null || icon === void 0 ? void 0 : icon.element) instanceof HTMLElement) ||
         typeof (icon === null || icon === void 0 ? void 0 : icon.element) === 'string');
 };
-exports.isAdaptableElementIcon = isAdaptableElementIcon;
-const isAdaptableIcon = (icon) => {
-    return (0, exports.isAdaptableSystemIcon)(icon) || (0, exports.isAdaptableCustomIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon);
+export const isAdaptableIcon = (icon) => {
+    return isAdaptableSystemIcon(icon) || isAdaptableCustomIcon(icon) || isAdaptableElementIcon(icon);
 };
-exports.isAdaptableIcon = isAdaptableIcon;

package/src/components/IconSelector/IconSelector.js

@@ -1,58 +1,53 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconSelector = void 0;
-const tslib_1 = require("tslib");
-const react_1 = tslib_1.__importDefault(require("react"));
-const rebass_1 = require("rebass");
-const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
-const Icon_1 = require("../Icon");
-const icons_1 = require("../icons");
-const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
-const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+import React from 'react';
+import { Box, Flex } from 'rebass';
+import AdaptableInput from '../../View/Components/AdaptableInput';
+import { IconComponent } from '../Icon';
+import { allIcons, Icon } from '../icons';
+import OverlayTrigger from '../OverlayTrigger';
+import SimpleButton from '../SimpleButton';
 const IconButton = (props) => {
-    return (react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onClick(), p: 2, variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
+    return (React.createElement(SimpleButton, { onClick: () => props.onClick(), p: 2, variant: props.active ? 'raised' : 'text', tone: props.active ? 'accent' : 'none', icon: props.icon }, props.children));
 };
-const IconSelector = (props) => {
+export const IconSelector = (props) => {
     var _a, _b, _c;
-    const [query, setQuery] = react_1.default.useState('');
-    const allIconsNames = Object.keys(icons_1.allIcons);
+    const [query, setQuery] = React.useState('');
+    const allIconsNames = Object.keys(allIcons);
     const filteredIcons = query
         ? allIconsNames.filter((iconName) => {
             return iconName.toLowerCase().includes(query.toLowerCase());
         })
         : allIconsNames;
     const iconsElements = filteredIcons.map((iconName) => {
-        return (react_1.default.createElement(rebass_1.Flex, { key: iconName },
-            react_1.default.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
+        return (React.createElement(Flex, { key: iconName },
+            React.createElement(IconButton, { onClick: () => props.onChange(iconName), active: iconName === props.value, icon: iconName })));
     });
     const customIconsElements = (_a = props.customIcons) === null || _a === void 0 ? void 0 : _a.map((def) => {
-        return (react_1.default.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
-            react_1.default.createElement(Icon_1.IconComponent, { key: def.name, icon: def.icon })));
+        return (React.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
+            React.createElement(IconComponent, { key: def.name, icon: def.icon })));
     });
-    const popup = (react_1.default.createElement(rebass_1.Box, { className: "ab-IconSelector__Popup" },
-        react_1.default.createElement(rebass_1.Box, { mb: 2 },
-            react_1.default.createElement(rebass_1.Box, { mb: 2, fontSize: 4 }, "Select an Icon"),
-            react_1.default.createElement(AdaptableInput_1.default, { value: query, onChange: (event) => { var _a; return setQuery((_a = event.target.value) !== null && _a !== void 0 ? _a : ''); }, width: "100%" })),
-        react_1.default.createElement(rebass_1.Flex, { p: 2, style: { width: 300, maxHeight: 300, overflow: 'auto' }, flexWrap: "wrap" },
+    const popup = (React.createElement(Box, { className: "ab-IconSelector__Popup" },
+        React.createElement(Box, { mb: 2 },
+            React.createElement(Box, { mb: 2, fontSize: 4 }, "Select an Icon"),
+            React.createElement(AdaptableInput, { value: query, onChange: (event) => { var _a; return setQuery((_a = event.target.value) !== null && _a !== void 0 ? _a : ''); }, width: "100%" })),
+        React.createElement(Flex, { p: 2, style: { width: 300, maxHeight: 300, overflow: 'auto' }, flexWrap: "wrap" },
             iconsElements,
             " ",
             customIconsElements)));
     let value = 'No Icon Selected';
-    if (props.value in icons_1.allIcons) {
-        value = (react_1.default.createElement(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
+    if (props.value in allIcons) {
+        value = (React.createElement(Icon, { style: { display: 'inline-block' }, name: props.value }));
     }
     else {
         const icon = (_b = props.customIcons) === null || _b === void 0 ? void 0 : _b.find((def) => def.name === props.value);
         if (icon)
-            value = react_1.default.createElement(Icon_1.IconComponent, { icon: icon.icon });
+            value = React.createElement(IconComponent, { icon: icon.icon });
     }
-    return (react_1.default.createElement(rebass_1.Flex, { className: "ab-IconSelector" },
-        react_1.default.createElement(OverlayTrigger_1.default, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
-            react_1.default.createElement(SimpleButton_1.default, { className: "ab-IconSelector__trigger", textAlign: "center", onClick: () => null, variant: "raised", width: 150, justifyContent: "center" }, value)),
-        ((_c = props.clearable) !== null && _c !== void 0 ? _c : true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button", ml: 2, onClick: (event) => {
+    return (React.createElement(Flex, { className: "ab-IconSelector" },
+        React.createElement(OverlayTrigger, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
+            React.createElement(SimpleButton, { className: "ab-IconSelector__trigger", textAlign: "center", onClick: () => null, variant: "raised", width: 150, justifyContent: "center" }, value)),
+        ((_c = props.clearable) !== null && _c !== void 0 ? _c : true) && (React.createElement(SimpleButton, { disabled: !props.value, className: "ab-IconSelector__clear-button", ml: 2, onClick: (event) => {
                 event.stopPropagation();
                 event.preventDefault();
                 props.onChange('');
             }, variant: "text", icon: "close" }))));
 };
-exports.IconSelector = IconSelector;

package/src/components/IconSelector/index.js

@@ -1,4 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-tslib_1.__exportStar(require("./IconSelector"), exports);
+export * from './IconSelector';

package/src/components/InfiniteTable/index.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfiniteTable = void 0;
-const tslib_1 = require("tslib");
-const infinite_react_1 = require("@infinite-table/infinite-react");
-Object.defineProperty(exports, "InfiniteTable", { enumerable: true, get: function () { return infinite_react_1.InfiniteTable; } });
-tslib_1.__exportStar(require("@infinite-table/infinite-react"), exports);
-const env_1 = tslib_1.__importDefault(require("../../env"));
-const defaultProps = infinite_react_1.InfiniteTable.defaultProps;
-defaultProps.licenseKey = env_1.default.INFINITE_TABLE_LICENSE_KEY;
+import { InfiniteTable } from '@infinite-table/infinite-react';
+export * from '@infinite-table/infinite-react';
+import env from '../../env';
+const defaultProps = InfiniteTable.defaultProps;
+defaultProps.licenseKey = env.INFINITE_TABLE_LICENSE_KEY;
 defaultProps.sortable = false;
 defaultProps.rowHeight = '--ab-grid-row-height';
 defaultProps.draggableColumns = false;
 defaultProps.keyboardNavigation = false;
+export { InfiniteTable };

package/src/components/Input/NumberInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { InputProps } from './index';
-export declare type NumberInputProps = {
+export type NumberInputProps = {
     onChange: (value: number) => void;
 } & Omit<InputProps, 'onChange'>;
 /**

package/src/components/Input/NumberInput.js

@@ -1,14 +1,10 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NumberInput = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const index_1 = tslib_1.__importDefault(require("./index"));
+import * as React from 'react';
+import Input from './index';
 /**
  * This component allows - and empty values as intermediery values
  * it calls change only with valid numeric values
  */
-const NumberInput = (props) => {
+export const NumberInput = (props) => {
     const [value, setValue] = React.useState(() => {
         var _a;
         // awlays controlled
@@ -41,6 +37,5 @@ const NumberInput = (props) => {
             setValue(props.value);
         }
     }, [props.value, value]);
-    return React.createElement(index_1.default, Object.assign({}, props, { value: value, onBlur: handleBlur, onChange: handleChange }));
+    return React.createElement(Input, Object.assign({}, props, { value: value, onBlur: handleBlur, onChange: handleChange }));
 };
-exports.NumberInput = NumberInput;

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

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { HTMLProps } from 'react';
 import { BoxProps } from 'rebass';
 export declare const baseClassName = "ab-Input";
-export declare type InputProps = HTMLProps<HTMLInputElement> & {
+export type InputProps = HTMLProps<HTMLInputElement> & {
     placehoder?: string;
     type?: string;
     disabled?: boolean;
     list?: any;
 } & BoxProps;
-declare const Input: React.ForwardRefExoticComponent<Pick<InputProps, "max" | "required" | "type" | "data" | "default" | "high" | "low" | "key" | "id" | "media" | "height" | "width" | "start" | "open" | "name" | "alignContent" | "alignItems" | "alignSelf" | "backgroundColor" | "color" | "content" | "display" | "flex" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "opacity" | "order" | "overflow" | "overflowX" | "overflowY" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "textAlign" | "translate" | "verticalAlign" | "value" | "hidden" | "cite" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "acceptCharset" | "action" | "method" | "noValidate" | "target" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "nonce" | "tabIndex" | "async" | "disabled" | "multiple" | "size" | "manifest" | "m" | "wrap" | "accept" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "marginHeight" | "marginWidth" | "maxLength" | "mediaGroup" | "min" | "minLength" | "muted" | "optimum" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "useMap" | "wmode" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "bg" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "variant" | "tx" | "sx" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+declare const Input: React.ForwardRefExoticComponent<Pick<InputProps, "children" | "size" | "name" | "tabIndex" | "color" | "style" | "cite" | "data" | "form" | "label" | "p" | "slot" | "span" | "summary" | "title" | "pattern" | "start" | "hidden" | "content" | "default" | "flex" | "wrap" | "open" | "padding" | "multiple" | "disabled" | "checked" | "download" | "list" | "order" | "target" | "src" | "className" | "onTransitionEnd" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEndCapture" | "opacity" | "value" | "key" | "sizes" | "variant" | "tx" | "as" | "css" | "m" | "margin" | "mt" | "marginTop" | "mr" | "marginRight" | "mb" | "marginBottom" | "ml" | "marginLeft" | "mx" | "marginX" | "my" | "marginY" | "pt" | "paddingTop" | "pr" | "paddingRight" | "pb" | "paddingBottom" | "pl" | "paddingLeft" | "px" | "paddingX" | "py" | "paddingY" | "width" | "height" | "minWidth" | "minHeight" | "maxWidth" | "maxHeight" | "display" | "verticalAlign" | "overflow" | "overflowX" | "overflowY" | "fontFamily" | "fontSize" | "fontWeight" | "lineHeight" | "letterSpacing" | "fontStyle" | "textAlign" | "bg" | "backgroundColor" | "alignItems" | "alignContent" | "justifyItems" | "justifyContent" | "flexWrap" | "flexDirection" | "flexGrow" | "flexShrink" | "flexBasis" | "justifySelf" | "alignSelf" | "sx" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "srcDoc" | "srcLang" | "srcSet" | "step" | "type" | "useMap" | "wmode" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
 export default Input;