@adaptabletools/adaptable 17.0.6 → 18.0.0-canary.1

package/src/components/Select/Select.js

@@ -1,12 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Select = void 0;
-const tslib_1 = require("tslib");
-const date_fns_1 = require("date-fns");
-const React = tslib_1.__importStar(require("react"));
-const react_select_1 = tslib_1.__importStar(require("react-select"));
-const creatable_1 = tslib_1.__importDefault(require("react-select/creatable"));
-const icons_1 = require("../icons");
+import { isSameDay } from 'date-fns';
+import * as React from 'react';
+import ReactSelect, { components } from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import { Icon } from '../icons';
 const commonStyles = ({ isFocused, isDisabled, }) => {
     return {
         color: 'var(--ab-cmp-input__color)',
@@ -15,11 +11,11 @@ const commonStyles = ({ isFocused, isDisabled, }) => {
             : 'var(--ab-cmp-input__background)',
     };
 };
-const Select = function (props) {
+export const Select = function (props) {
     var _a, _b, _c, _d, _e, _f, _g;
     const doesOptionMatchValue = function (option) {
         if (typeof option.value === 'object' && option.value instanceof Date) {
-            return (0, date_fns_1.isSameDay)(option.value, props.value);
+            return isSameDay(option.value, props.value);
         }
         return option.value === props.value;
     };
@@ -61,27 +57,27 @@ const Select = function (props) {
      */
     const SelectContainer = React.useMemo(() => {
         return (inputProps) => {
-            return (React.createElement(react_select_1.components.SelectContainer, Object.assign({}, inputProps, { innerProps: Object.assign({ 
+            return (React.createElement(components.SelectContainer, Object.assign({}, inputProps, { innerProps: Object.assign({ 
                     // @ts-ignore
                     'data-name': props['data-name'], 'data-id': props['data-id'] }, inputProps.innerProps) })));
         };
     }, []);
     const ValueContainer = React.useMemo(() => {
         return (inputProps) => {
-            return (React.createElement(react_select_1.components.ValueContainer, Object.assign({}, inputProps, { innerProps: Object.assign({ 'data-name': 'value-container' }, inputProps.innerProps) })));
+            return (React.createElement(components.ValueContainer, Object.assign({}, inputProps, { innerProps: Object.assign({ 'data-name': 'value-container' }, inputProps.innerProps) })));
         };
     }, []);
-    const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
+    const SelectComponent = props.isCreatable ? CreatableSelect : ReactSelect;
     const ClearIndicator = React.useMemo(() => {
         return (clearIndicatorProps) => {
-            return (React.createElement(react_select_1.components.ClearIndicator, Object.assign({}, clearIndicatorProps),
-                React.createElement(icons_1.Icon, { name: "close" })));
+            return (React.createElement(components.ClearIndicator, Object.assign({}, clearIndicatorProps),
+                React.createElement(Icon, { name: "close" })));
         };
     }, []);
     const DropdownIndicator = React.useMemo(() => {
         return (props) => {
-            return (React.createElement(react_select_1.components.DropdownIndicator, Object.assign({}, props),
-                React.createElement(icons_1.Icon, { name: "triangle-down", style: { height: 20, width: 20 } })));
+            return (React.createElement(components.DropdownIndicator, Object.assign({}, props),
+                React.createElement(Icon, { name: "triangle-down", style: { height: 20, width: 20 } })));
         };
     }, []);
     return (React.createElement(SelectComponent, { onInputChange: props.onInputChange, onFocus: props.onFocus, isLoading: props.isLoding, options: props.options, className: props.className, isDisabled: disabled, isMulti: props.isMulti, value: selectedOption, menuPosition: (_g = props.menuPosition) !== null && _g !== void 0 ? _g : 'absolute', 
@@ -97,7 +93,7 @@ const Select = function (props) {
             SelectContainer,
             ValueContainer,
             SingleValue: (singleValueProps) => {
-                return (React.createElement(react_select_1.components.SingleValue, Object.assign({}, singleValueProps), props.renderSingleValue
+                return (React.createElement(components.SingleValue, Object.assign({}, singleValueProps), props.renderSingleValue
                     ? props.renderSingleValue(selectedOption)
                     : singleValueProps.children));
             },
@@ -173,4 +169,3 @@ const Select = function (props) {
             },
         } }));
 };
-exports.Select = Select;

package/src/components/Select/index.js

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

package/src/components/SelectList.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectList = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const SimpleButton_1 = tslib_1.__importDefault(require("./SimpleButton"));
-const SelectList = (props) => {
-    return (React.createElement(React.Fragment, null, props.options.map((option) => (React.createElement(SimpleButton_1.default, { p: 2, width: '100%', variant: "text", onClick: () => props.onChange(option), key: option.label }, option.label)))));
+import * as React from 'react';
+import SimpleButton from './SimpleButton';
+export const SelectList = (props) => {
+    return (React.createElement(React.Fragment, null, props.options.map((option) => (React.createElement(SimpleButton, { p: 2, width: '100%', variant: "text", onClick: () => props.onChange(option), key: option.label }, option.label)))));
 };
-exports.SelectList = SelectList;

package/src/components/SelectableList/index.js

@@ -1,10 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useSelectionEvent = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const react_1 = require("react");
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
+import * as React from 'react';
+import { useContext, useRef } from 'react';
+import useProperty from '../utils/useProperty';
 const SelectableListContext = React.createContext({
     clickInfoRef: null,
     selected: {},
@@ -12,8 +8,8 @@ const SelectableListContext = React.createContext({
     toggleOnSimpleClick: false,
     setSelected: (x) => { },
 });
-const useSelectionEvent = () => {
-    const { selected, setSelected, toggleOnSimpleClick, clickInfoRef, getItemId } = (0, react_1.useContext)(SelectableListContext);
+export const useSelectionEvent = () => {
+    const { selected, setSelected, toggleOnSimpleClick, clickInfoRef, getItemId } = useContext(SelectableListContext);
     return (event, { index }) => {
         if (index === undefined) {
             return;
@@ -76,10 +72,9 @@ const useSelectionEvent = () => {
         }
     };
 };
-exports.useSelectionEvent = useSelectionEvent;
 const SelectableList = (props) => {
-    const [selected, setSelected] = (0, useProperty_1.default)(props, 'selected', {});
-    const clickInfoRef = (0, react_1.useRef)({
+    const [selected, setSelected] = useProperty(props, 'selected', {});
+    const clickInfoRef = useRef({
         lastClickIndexWithoutShift: 0,
     });
     const getItemId = (index) => {
@@ -96,4 +91,4 @@ const SelectableList = (props) => {
             getItemId,
         } }, props.children));
 };
-exports.default = SelectableList;
+export default SelectableList;

package/src/components/SimpleButton/index.js

@@ -1,23 +1,20 @@
-"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"));
-const icons_1 = require("../icons");
-const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
-const theme_1 = tslib_1.__importDefault(require("../../theme"));
-const Icon_1 = require("../Icon");
-exports.baseClassName = 'ab-SimpleButton';
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Button } from 'rebass';
+import join from '../utils/join';
+import { allIcons } from '../icons';
+import Tooltip from '../Tooltip';
+import theme from '../../theme';
+import { IconComponent, isAdaptableElementIcon, isAdaptableCustomIcon, isAdaptableSystemIcon, } from '../Icon';
+export const baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((props, theRef) => {
     var _a, _b;
-    let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type } = props, buttonProps = tslib_1.__rest(props, ["children", "disabled", "variant", "tone", "iconPosition", "iconSize", "className", "icon", "tooltip", "accessLevel", "type"]);
+    let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type } = props, buttonProps = __rest(props, ["children", "disabled", "variant", "tone", "iconPosition", "iconSize", "className", "icon", "tooltip", "accessLevel", "type"]);
     let adaptableSystemIcon;
-    if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
+    if (isAdaptableSystemIcon(icon)) {
         adaptableSystemIcon = icon;
     }
-    if (typeof icon === 'string' && icons_1.allIcons[icon]) {
+    if (typeof icon === 'string' && allIcons[icon]) {
         adaptableSystemIcon = { name: icon };
     }
     if (adaptableSystemIcon) {
@@ -30,10 +27,10 @@ const SimpleButton = React.forwardRef((props, theRef) => {
         if (typeof buttonProps.color === 'string') {
             iconProps.icon = Object.assign(Object.assign({}, iconProps.icon), { style: { color: buttonProps.color } });
         }
-        icon = React.createElement(Icon_1.IconComponent, Object.assign({}, iconProps));
+        icon = React.createElement(IconComponent, Object.assign({}, iconProps));
     }
-    if ((0, Icon_1.isAdaptableCustomIcon)(icon) || (0, Icon_1.isAdaptableElementIcon)(icon)) {
-        icon = React.createElement(Icon_1.IconComponent, { icon: icon });
+    if (isAdaptableCustomIcon(icon) || isAdaptableElementIcon(icon)) {
+        icon = React.createElement(IconComponent, { icon: icon });
     }
     if (icon) {
         children =
@@ -74,10 +71,10 @@ const SimpleButton = React.forwardRef((props, theRef) => {
     // and sent to rebass, styled-components/rebass does not honour it
     // so we had to send it via css
     const fontWeight = buttonProps.fontWeight
-        ? (_b = (_a = theme_1.default[buttonProps.fontWeight]) !== null && _a !== void 0 ? _a : buttonProps.fontWeight) !== null && _b !== void 0 ? _b : 'normal'
+        ? (_b = (_a = theme[buttonProps.fontWeight]) !== null && _a !== void 0 ? _a : buttonProps.fontWeight) !== null && _b !== void 0 ? _b : 'normal'
         : 'normal';
-    const btn = (React.createElement(rebass_1.Button, Object.assign({}, buttonProps, { disabled: disabled, className: (0, join_1.default)(className, exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : '', fontWeight ? `${exports.baseClassName}--font-weight=${fontWeight}` : '', `${exports.baseClassName}--variant-${variant}`, `${exports.baseClassName}--tone-${tone}`), ref: theRef }), children));
-    return tooltip ? React.createElement(Tooltip_1.default, { label: tooltip }, btn) : btn;
+    const btn = (React.createElement(Button, Object.assign({}, buttonProps, { disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : '', fontWeight ? `${baseClassName}--font-weight=${fontWeight}` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`), ref: theRef }), children));
+    return tooltip ? React.createElement(Tooltip, { label: tooltip }, btn) : btn;
 });
 SimpleButton.defaultProps = {
     px: null,
@@ -87,4 +84,4 @@ SimpleButton.defaultProps = {
     //@ts-ignore
     borderRadius: null,
 };
-exports.default = SimpleButton;
+export default SimpleButton;

package/src/components/SizedContainer/index.js

@@ -1,25 +1,23 @@
-"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 NotifyResize_1 = tslib_1.__importDefault(require("../NotifyResize"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Box } from 'rebass';
+import NotifyResize from '../NotifyResize';
 const SizedContainer = (props) => {
-    const { onResize: onResizeFromProps } = props, domProps = tslib_1.__rest(props, ["onResize"]);
+    const { onResize: onResizeFromProps } = props, domProps = __rest(props, ["onResize"]);
     const [size, onResize] = React.useState(null);
     const sizeFn = props.children;
-    return (React.createElement(rebass_1.Box, Object.assign({}, domProps, { style: Object.assign(Object.assign({ flex: 1 }, domProps.style), { position: 'relative' }) }),
-        React.createElement(rebass_1.Box, { style: {
+    return (React.createElement(Box, Object.assign({}, domProps, { style: Object.assign(Object.assign({ flex: 1 }, domProps.style), { position: 'relative' }) }),
+        React.createElement(Box, { style: {
                 position: 'absolute',
                 left: 0,
                 top: 0,
                 width: '100%',
                 height: '100%',
             }, "data-width": size ? size.width : null, "data-height": size ? size.height : null },
-            React.createElement(NotifyResize_1.default, { onResize: (size) => {
+            React.createElement(NotifyResize, { onResize: (size) => {
                     onResize(size);
                     onResizeFromProps === null || onResizeFromProps === void 0 ? void 0 : onResizeFromProps(size);
                 } }),
             size ? sizeFn(size) : null)));
 };
-exports.default = SizedContainer;
+export default SizedContainer;

package/src/components/StylePreview.js

@@ -1,13 +1,8 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.StylePreview = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const StyleHelper_1 = require("../Utilities/Helpers/StyleHelper");
-const join_1 = tslib_1.__importDefault(require("./utils/join"));
-const StylePreview = (props) => {
+import * as React from 'react';
+import { Box } from 'rebass';
+import { toStyle } from '../Utilities/Helpers/StyleHelper';
+import join from './utils/join';
+export const StylePreview = (props) => {
     var _a, _b, _c;
-    return (React.createElement(rebass_1.Box, Object.assign({}, props, { className: (0, join_1.default)('ab-StylePreview', props.className), padding: (_a = props.padding) !== null && _a !== void 0 ? _a : 2, mt: (_b = props.mt) !== null && _b !== void 0 ? _b : 2, style: Object.assign(Object.assign({}, (0, StyleHelper_1.toStyle)(props.styleObject)), props.style) }), (_c = props.children) !== null && _c !== void 0 ? _c : 'Preview result'));
+    return (React.createElement(Box, Object.assign({}, props, { className: join('ab-StylePreview', props.className), padding: (_a = props.padding) !== null && _a !== void 0 ? _a : 2, mt: (_b = props.mt) !== null && _b !== void 0 ? _b : 2, style: Object.assign(Object.assign({}, toStyle(props.styleObject)), props.style) }), (_c = props.children) !== null && _c !== void 0 ? _c : 'Preview result'));
 };
-exports.StylePreview = StylePreview;

package/src/components/Table/index.js

@@ -1,9 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
+import * as React from 'react';
+import join from '../utils/join';
 const Table = (props) => {
-    return React.createElement("table", Object.assign({}, props, { className: (0, join_1.default)(props.className, 'ab-Table') }));
+    return React.createElement("table", Object.assign({}, props, { className: join(props.className, 'ab-Table') }));
 };
-exports.default = Table;
+export default Table;

package/src/components/Tabs/index.js

@@ -1,12 +1,9 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Content = exports.Tab = exports.Tabs = 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("../utils/join"));
-const useProperty_1 = tslib_1.__importDefault(require("../utils/useProperty"));
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Box, Flex } from 'rebass';
+import { useRef } from 'react';
+import join from '../utils/join';
+import useProperty from '../utils/useProperty';
 const TabContext = React.createContext({
     selectedIndex: 0,
     tabCount: 0,
@@ -14,16 +11,16 @@ const TabContext = React.createContext({
 });
 const isTab = (c) => {
     var _a;
-    return c.type === exports.Tab || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsTab);
+    return c.type === Tab || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsTab);
 };
 const isTabContent = (c) => {
     var _a;
-    return c.type === exports.Content || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsContent);
+    return c.type === Content || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsContent);
 };
-const Tabs = (props) => {
-    const { autoFocus = true, children, onValueChange: _onValueChange, defaultValue: _defaultValue, value: _value, keyboardNavigation = true, selectedIndex: _selectedIndex, defaultSelectedIndex: _defaultSelectedIndex, onSelectedIndexChange: _onSelectedIndexChange } = props, boxProps = tslib_1.__rest(props, ["autoFocus", "children", "onValueChange", "defaultValue", "value", "keyboardNavigation", "selectedIndex", "defaultSelectedIndex", "onSelectedIndexChange"]);
-    let [selectedIndex, doSetSelectedIndex] = (0, useProperty_1.default)(props, 'selectedIndex', 0);
-    const [selectedValue, setSelectedValue] = (0, useProperty_1.default)(props, 'value', 0);
+export const Tabs = (props) => {
+    const { autoFocus = true, children, onValueChange: _onValueChange, defaultValue: _defaultValue, value: _value, keyboardNavigation = true, selectedIndex: _selectedIndex, defaultSelectedIndex: _defaultSelectedIndex, onSelectedIndexChange: _onSelectedIndexChange } = props, boxProps = __rest(props, ["autoFocus", "children", "onValueChange", "defaultValue", "value", "keyboardNavigation", "selectedIndex", "defaultSelectedIndex", "onSelectedIndexChange"]);
+    let [selectedIndex, doSetSelectedIndex] = useProperty(props, 'selectedIndex', 0);
+    const [selectedValue, setSelectedValue] = useProperty(props, 'value', 0);
     const allChildren = React.Children.toArray(children);
     const values = [];
     const tabs = allChildren.filter(isTab).map((tab, index) => {
@@ -62,35 +59,34 @@ const Tabs = (props) => {
         doSetSelectedIndex(index);
     };
     const currentContent = contents[selectedIndex];
-    const _a = (currentContent === null || currentContent === void 0 ? void 0 : currentContent.props) || {}, { value } = _a, contentProps = tslib_1.__rest(_a, ["value"]);
+    const _a = (currentContent === null || currentContent === void 0 ? void 0 : currentContent.props) || {}, { value } = _a, contentProps = __rest(_a, ["value"]);
     return (React.createElement(TabContext.Provider, { value: {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
         } },
-        React.createElement(rebass_1.Box, Object.assign({}, boxProps, { className: (0, join_1.default)(boxProps.className, 'ab-Tabs'), "data-selected-index": selectedIndex }),
-            React.createElement(rebass_1.Flex, { flexDirection: "row", className: "ab-Tabs__Strip" },
-                React.createElement(rebass_1.Box, { className: "ab-Tabs__Filler" }),
+        React.createElement(Box, Object.assign({}, boxProps, { className: join(boxProps.className, 'ab-Tabs'), "data-selected-index": selectedIndex }),
+            React.createElement(Flex, { flexDirection: "row", className: "ab-Tabs__Strip" },
+                React.createElement(Box, { className: "ab-Tabs__Filler" }),
                 tabs,
-                React.createElement(rebass_1.Flex, { flex: 1, className: "ab-Tabs__Filler" })),
-            React.createElement(rebass_1.Box, Object.assign({ padding: 2 }, contentProps, { className: `${contentProps.className || ''} ab-Tabs__Body` }), currentContent))));
+                React.createElement(Flex, { flex: 1, className: "ab-Tabs__Filler" })),
+            React.createElement(Box, Object.assign({ padding: 2 }, contentProps, { className: `${contentProps.className || ''} ab-Tabs__Body` }), currentContent))));
 };
-exports.Tabs = Tabs;
-const Tab = (props) => {
-    const { index, autoFocus, keyboardNavigation = true, className: propsClassName } = props, boxProps = tslib_1.__rest(props, ["index", "autoFocus", "keyboardNavigation", "className"]);
+export const Tab = (props) => {
+    const { index, autoFocus, keyboardNavigation = true, className: propsClassName } = props, boxProps = __rest(props, ["index", "autoFocus", "keyboardNavigation", "className"]);
     const context = React.useContext(TabContext);
     const baseClassName = 'ab-Tabs__Tab';
     const active = context.selectedIndex === props.index;
     const beforeActive = context.selectedIndex === props.index + 1;
-    const className = (0, join_1.default)(propsClassName, baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '');
-    const ref = (0, react_1.useRef)(null);
+    const className = join(propsClassName, baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '');
+    const ref = useRef(null);
     React.useEffect(() => {
         var _a;
         if (active && autoFocus && keyboardNavigation) {
             (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
         }
     }, [active, autoFocus]);
-    return (React.createElement(rebass_1.Box, Object.assign({ ref: ref, padding: 2, tabIndex: active ? 0 : -1 }, boxProps, { className: className, onClick: (event) => {
+    return (React.createElement(Box, Object.assign({ ref: ref, padding: 2, tabIndex: active ? 0 : -1 }, boxProps, { className: className, onClick: (event) => {
             var _a;
             context.setSelectedIndex(props.index);
             (_a = props.onClick) === null || _a === void 0 ? void 0 : _a.call(props, event);
@@ -120,16 +116,14 @@ const Tab = (props) => {
             (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
         } })));
 };
-exports.Tab = Tab;
-exports.Tab.defaultProps = {
+Tab.defaultProps = {
     isTabsTab: true,
 };
-const Content = (props) => {
+export const Content = (props) => {
     return React.createElement(React.Fragment, null, props.children);
 };
-exports.Content = Content;
-exports.Content.defaultProps = {
+Content.defaultProps = {
     isTabsContent: true,
 };
-exports.Tabs.Tab = exports.Tab;
-exports.Tabs.Content = exports.Content;
+Tabs.Tab = Tab;
+Tabs.Content = Content;

package/src/components/Tag/Tag.js

@@ -1,11 +1,7 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = 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.Tag = React.forwardRef((props, ref) => {
+import * as React from 'react';
+import { Box } from 'rebass';
+import join from '../utils/join';
+export const Tag = React.forwardRef((props, ref) => {
     var _a, _b, _c, _d;
-    return (React.createElement(rebass_1.Box, Object.assign({}, props, { ref: ref, className: (0, join_1.default)('ab-Tag', props.className), backgroundColor: "primary", paddingTop: (_a = props.paddingTop) !== null && _a !== void 0 ? _a : 1, paddingBottom: (_b = props.paddingBottom) !== null && _b !== void 0 ? _b : 1, paddingLeft: (_c = props.paddingLeft) !== null && _c !== void 0 ? _c : 2, paddingRight: (_d = props.paddingRight) !== null && _d !== void 0 ? _d : 2, style: Object.assign({ borderRadius: 'var(--ab__border-radius)' }, props.style) })));
+    return (React.createElement(Box, Object.assign({}, props, { ref: ref, className: join('ab-Tag', props.className), backgroundColor: "primary", paddingTop: (_a = props.paddingTop) !== null && _a !== void 0 ? _a : 1, paddingBottom: (_b = props.paddingBottom) !== null && _b !== void 0 ? _b : 1, paddingLeft: (_c = props.paddingLeft) !== null && _c !== void 0 ? _c : 2, paddingRight: (_d = props.paddingRight) !== null && _d !== void 0 ? _d : 2, style: Object.assign({ borderRadius: 'var(--ab__border-radius)' }, props.style) })));
 });

package/src/components/Tag/index.js

@@ -1,5 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tag = void 0;
-var Tag_1 = require("./Tag");
-Object.defineProperty(exports, "Tag", { enumerable: true, get: function () { return Tag_1.Tag; } });
+export { Tag } from './Tag';

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

@@ -2,16 +2,25 @@ import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { HTMLProps } from 'react';
 export declare const baseClassName = "ab-Textarea";
+/**
+ * Autoheight strategy:
+ * - save initial height
+ * - when focused, expand to fit content - max x px
+ * - when blurred, shrink to initial height
+ * - when typing, expand to fit content - max x px
+ */
 export type TextareaProps = Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> & {
     placehoder?: string;
     type?: string;
     disabled?: boolean;
     value?: string;
+    autoResizeOnFocus?: boolean;
 } & Omit<BoxProps, 'ref'>;
 declare const Textarea: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLTextAreaElement>, "ref"> & {
     placehoder?: string;
     type?: string;
     disabled?: boolean;
     value?: string;
+    autoResizeOnFocus?: boolean;
 } & Omit<BoxProps, "ref"> & React.RefAttributes<HTMLDivElement | HTMLInputElement | HTMLTextAreaElement>>;
 export default Textarea;

package/src/components/Textarea/index.js

@@ -1,13 +1,12 @@
-"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-Textarea';
+import { __rest } from "tslib";
+import * as React from 'react';
+import { Box } from 'rebass';
+import join from '../utils/join';
+export const baseClassName = 'ab-Textarea';
 const Textarea = React.forwardRef((props, ref) => {
-    let { disabled, className } = props, textareaProps = tslib_1.__rest(props, ["disabled", "className"]);
+    const internalRef = React.useRef(null);
+    let { disabled, autoResizeOnFocus, className } = props, textareaProps = __rest(props, ["disabled", "autoResizeOnFocus", "className"]);
+    const initialHeight = React.useRef(null);
     let type = 'text';
     if (textareaProps && textareaProps.type) {
         type = textareaProps.type;
@@ -15,6 +14,52 @@ const Textarea = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(rebass_1.Box, Object.assign({ ref: ref, as: "textarea" }, textareaProps, { type: type, disabled: disabled, className: (0, join_1.default)(className, exports.baseClassName, disabled ? `${exports.baseClassName}--disabled` : '') })));
+    const expandToFitContent = () => {
+        if (autoResizeOnFocus && initialHeight.current !== null && internalRef.current) {
+            internalRef.current.style.height = `0px`; // makes sure it shrinks when needed
+            const height = internalRef.current.scrollHeight;
+            internalRef.current.style.height = `${height}px`;
+        }
+    };
+    const shrinkToInitialHeight = () => {
+        if (autoResizeOnFocus) {
+            internalRef.current.style.height = `${initialHeight.current}px`;
+        }
+    };
+    return (React.createElement(Box, Object.assign({}, textareaProps, { onFocus: (e) => {
+            var _a;
+            expandToFitContent();
+            (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+            if (internalRef.current && initialHeight.current === null) {
+                const height = internalRef.current.getBoundingClientRect().height;
+                initialHeight.current = height;
+            }
+        }, onBlur: (e) => {
+            var _a;
+            shrinkToInitialHeight();
+            (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+        }, ref: (elRef) => {
+            // SAVE INITIAL HEIGHT
+            // if (elRef && initialHeight.current === null) {
+            //   const height = elRef.getBoundingClientRect().height;
+            //   initialHeight.current = isNaN(height) ? 'auto' : height;
+            // }
+            // SAVE REF
+            if (internalRef) {
+                internalRef.current = elRef;
+            }
+            // CALL EXTERNAL REF
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(elRef);
+                }
+                else {
+                    ref.current = elRef;
+                }
+            }
+        }, onChange: (e) => {
+            expandToFitContent();
+            props.onChange && props.onChange(e);
+        }, as: "textarea", type: type, disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : ''), spellCheck: false })));
 });
-exports.default = Textarea;
+export default Textarea;

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

@@ -1,3 +1,3 @@
-export { toast, ToastContainer, Slide, Zoom, Bounce, Flip, } from '../../bundle-dependencies/bundles/react-toastify';
-import { ToastOptions } from '../../bundle-dependencies/bundles/react-toastify';
+export { toast, ToastContainer, Slide, Zoom, Bounce, Flip } from 'react-toastify';
+import { ToastOptions } from 'react-toastify';
 export type { ToastOptions };

package/src/components/Toastify/index.js

@@ -1,10 +1 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Flip = exports.Bounce = exports.Zoom = exports.Slide = exports.ToastContainer = exports.toast = void 0;
-var react_toastify_1 = require("../../bundle-dependencies/bundles/react-toastify");
-Object.defineProperty(exports, "toast", { enumerable: true, get: function () { return react_toastify_1.toast; } });
-Object.defineProperty(exports, "ToastContainer", { enumerable: true, get: function () { return react_toastify_1.ToastContainer; } });
-Object.defineProperty(exports, "Slide", { enumerable: true, get: function () { return react_toastify_1.Slide; } });
-Object.defineProperty(exports, "Zoom", { enumerable: true, get: function () { return react_toastify_1.Zoom; } });
-Object.defineProperty(exports, "Bounce", { enumerable: true, get: function () { return react_toastify_1.Bounce; } });
-Object.defineProperty(exports, "Flip", { enumerable: true, get: function () { return react_toastify_1.Flip; } });
+export { toast, ToastContainer, Slide, Zoom, Bounce, Flip } from 'react-toastify';

package/src/components/Toggle/Toggle.js

@@ -1,15 +1,11 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Toggle = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const Icon_1 = require("../Icon");
-const join_1 = tslib_1.__importDefault(require("../utils/join"));
-const Toggle = (_a) => {
-    var { onPressedChange, pressed, icon, children } = _a, rest = tslib_1.__rest(_a, ["onPressedChange", "pressed", "icon", "children"]);
+import { __rest } from "tslib";
+import * as React from 'react';
+import { IconComponent } from '../Icon';
+import join from '../utils/join';
+export const Toggle = (_a) => {
+    var { onPressedChange, pressed, icon, children } = _a, rest = __rest(_a, ["onPressedChange", "pressed", "icon", "children"]);
     const baseClassName = 'ab-Toggle';
-    return (React.createElement("button", Object.assign({}, rest, { className: (0, join_1.default)(baseClassName, pressed && `${baseClassName}--pressed`), onClick: () => onPressedChange(!pressed) }),
-        icon && React.createElement(Icon_1.IconComponent, { icon: { name: icon } }),
+    return (React.createElement("button", Object.assign({}, rest, { className: join(baseClassName, pressed && `${baseClassName}--pressed`), onClick: () => onPressedChange(!pressed) }),
+        icon && React.createElement(IconComponent, { icon: { name: icon } }),
         children));
 };
-exports.Toggle = Toggle;

package/src/components/Toggle/ToggleGroup.js

@@ -1,10 +1,5 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleGroup = void 0;
-const tslib_1 = require("tslib");
-const React = tslib_1.__importStar(require("react"));
-const rebass_1 = require("rebass");
-const ToggleGroup = (props) => {
-    return React.createElement(rebass_1.Flex, { className: "ab-Toggle-Group" }, props.children);
+import * as React from 'react';
+import { Flex } from 'rebass';
+export const ToggleGroup = (props) => {
+    return React.createElement(Flex, { className: "ab-Toggle-Group" }, props.children);
 };
-exports.ToggleGroup = ToggleGroup;

package/src/components/Toggle/index.js

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