@adaptabletools/adaptable 17.0.0-canary.0 → 17.0.0-canary.10

package/src/components/Select/Select.js

@@ -0,0 +1,161 @@
+"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 commonStyles = ({ isFocused, isDisabled, }) => {
+    return {
+        color: 'var(--ab-cmp-input__color)',
+        background: isDisabled
+            ? 'var(--ab-cmp-input--disabled__background)'
+            : 'var(--ab-cmp-input__background)',
+    };
+};
+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 option.value === props.value;
+    };
+    let selectedOption = null;
+    if (props.isMulti) {
+        selectedOption =
+            (_b = ((_a = props.value) !== null && _a !== void 0 ? _a : []).map((value) => {
+                var _a;
+                // return (props.value as any[]).includes(option.value);
+                const option = ((_a = props.options) !== null && _a !== void 0 ? _a : []).find(doesOptionMatchValue);
+                if (!option) {
+                    return {
+                        value,
+                        label: value,
+                    };
+                }
+                return option;
+            })) !== null && _b !== void 0 ? _b : null;
+    }
+    else {
+        selectedOption = (_d = ((_c = props.options) !== null && _c !== void 0 ? _c : []).find(doesOptionMatchValue)) !== null && _d !== void 0 ? _d : null;
+        if (!selectedOption && props.value !== undefined && props.value !== null) {
+            selectedOption = {
+                value: props.value,
+                label: props.value,
+            };
+        }
+    }
+    let disabled = (_e = props.disabled) !== null && _e !== void 0 ? _e : false;
+    const accessLevel = (_f = props.accessLevel) !== null && _f !== void 0 ? _f : 'Full';
+    if (accessLevel === 'Hidden') {
+        return null;
+    }
+    if (accessLevel === 'ReadOnly') {
+        disabled = true;
+    }
+    /**
+     * If on each render a new reference is passed, the menu will not open using the keyboard.
+     */
+    const SelectContainer = React.useMemo(() => {
+        return (inputProps) => {
+            return (React.createElement(react_select_1.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) })));
+        };
+    }, []);
+    const SelectComponent = props.isCreatable ? creatable_1.default : react_select_1.default;
+    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', 
+        // This needed so the menu is not clipped by overflow: hidden
+        menuPortalTarget: document.body, isClearable: props.isClearable, onChange: (option) => {
+            if (props.isMulti) {
+                props.onChange(option.map((x) => x === null || x === void 0 ? void 0 : x.value));
+            }
+            else {
+                props.onChange(option === null || option === void 0 ? void 0 : option.value);
+            }
+        }, placeholder: props.placeholder, components: {
+            SelectContainer,
+            ValueContainer,
+            SingleValue: (singleValueProps) => {
+                return (React.createElement(react_select_1.components.SingleValue, Object.assign({}, singleValueProps), props.rederSingleValue
+                    ? props.rederSingleValue(selectedOption)
+                    : singleValueProps.children));
+            },
+        }, 
+        /**
+         * Using styles is the preferred way to style react-select.
+         * https://react-select.com/styles#the-styles-prop
+         */
+        styles: {
+            // Typescript issue with csstype@3.1.3
+            // https://github.com/JedWatson/react-select/issues/5825#issuecomment-1850472549
+            // Remove
+            container: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), props.style);
+            },
+            // @ts-ignorets-ignore when fixed
+            menuPortal: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, textAlign: 'left' });
+            },
+            // @ts-ignore
+            menu: (baseStyle, state) => {
+                return Object.assign(Object.assign(Object.assign({}, baseStyle), { zIndex: 999999, boxShadow: 'var(--ab-cmp-select-menu__box-shadow)', minWidth: 160 }), commonStyles(state));
+            },
+            // @ts-ignore
+            option: (baseStyle, state) => {
+                const style = Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { '&:active': {
+                        background: 'var(--ab-cmp-select-option-active__background)',
+                    }, opacity: state.isDisabled ? 0.5 : 1 });
+                if (state.isSelected) {
+                    style.background = 'var(--ab-cmp-select-option-active__background)';
+                    style.color = 'var(--ab-cmp-select-option-active__color)';
+                }
+                if (state.isFocused) {
+                    style.background = 'var(--ab-cmp-select-option-focused__background)';
+                }
+                return style;
+            },
+            // @ts-ignore
+            input: (baseStyle, state) => {
+                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? 0 : baseStyle.padding, color: 'var(--ab-cmp-select__color)' });
+            },
+            valueContainer: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { padding: props.size === 'small' ? `0 var(--ab-space-1)` : baseStyle.padding });
+            },
+            // @ts-ignore
+            singleValue: (baseStyle, state) => {
+                return Object.assign(Object.assign({}, baseStyle), commonStyles(state));
+            },
+            // @ts-ignore
+            control: (baseStyle, state) => {
+                state;
+                return Object.assign(Object.assign(Object.assign({}, baseStyle), commonStyles(state)), { 
+                    // height: 30,
+                    minHeight: props.size === 'small' ? 0 : 32, boxShadow: state.isFocused ? 'var(--ab-cmp-select-focused__box-shadow)' : 'none', outline: state.isFocused ? 'var(--ab-cmp-select-focused__outline)' : 'none', border: 'var(--ab-cmp-select__border)', borderRadius: 'var(--ab-cmp-select__border-radius)', '&:hover': {
+                        border: 'var(--ab-cmp-select__border)',
+                    } });
+            },
+            // @ts-ignore
+            dropdownIndicator: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { padding: 0 });
+            },
+            // @ts-ignore
+            clearIndicator: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { padding: '2px 3px' });
+            },
+            multiValue: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-select__color)', background: 'var(--ab-cmp-select-multi-value__background)', border: 'var(--ab-cmp-select__border)' });
+            },
+            multiValueLabel: (baseStyle) => {
+                return Object.assign(Object.assign({}, baseStyle), { color: 'var(--ab-cmp-select__color)' });
+            },
+        } }));
+};
+exports.Select = Select;

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

@@ -0,0 +1 @@
+export * from './Select';

package/src/components/Select/index.js

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

package/src/components/SelectList.js

@@ -1,5 +1,10 @@
-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)))));
+"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)))));
 };
+exports.SelectList = SelectList;

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

@@ -1,5 +1,5 @@
 import { SyntheticEvent, HTMLProps } from 'react';
-declare type SelectableListValues = {
+type SelectableListValues = {
     [key: string]: boolean;
 };
 export declare const useSelectionEvent: () => (event: SyntheticEvent, { index }: {

package/src/components/SelectableList/index.js

@@ -1,6 +1,10 @@
-import * as React from 'react';
-import { useContext, useRef } from 'react';
-import useProperty from '../utils/useProperty';
+"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"));
 const SelectableListContext = React.createContext({
     clickInfoRef: null,
     selected: {},
@@ -8,8 +12,8 @@ const SelectableListContext = React.createContext({
     toggleOnSimpleClick: false,
     setSelected: (x) => { },
 });
-export const useSelectionEvent = () => {
-    const { selected, setSelected, toggleOnSimpleClick, clickInfoRef, getItemId } = useContext(SelectableListContext);
+const useSelectionEvent = () => {
+    const { selected, setSelected, toggleOnSimpleClick, clickInfoRef, getItemId } = (0, react_1.useContext)(SelectableListContext);
     return (event, { index }) => {
         if (index === undefined) {
             return;
@@ -72,9 +76,10 @@ export const useSelectionEvent = () => {
         }
     };
 };
+exports.useSelectionEvent = useSelectionEvent;
 const SelectableList = (props) => {
-    const [selected, setSelected] = useProperty(props, 'selected', {});
-    const clickInfoRef = useRef({
+    const [selected, setSelected] = (0, useProperty_1.default)(props, 'selected', {});
+    const clickInfoRef = (0, react_1.useRef)({
         lastClickIndexWithoutShift: 0,
     });
     const getItemId = (index) => {
@@ -91,4 +96,4 @@ const SelectableList = (props) => {
             getItemId,
         } }, props.children));
 };
-export default SelectableList;
+exports.default = SelectableList;

package/src/components/SimpleButton/index.js

@@ -1,20 +1,23 @@
-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';
+"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';
 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 = __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 = tslib_1.__rest(props, ["children", "disabled", "variant", "tone", "iconPosition", "iconSize", "className", "icon", "tooltip", "accessLevel", "type"]);
     let adaptableSystemIcon;
-    if (isAdaptableSystemIcon(icon)) {
+    if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
         adaptableSystemIcon = icon;
     }
-    if (typeof icon === 'string' && allIcons[icon]) {
+    if (typeof icon === 'string' && icons_1.allIcons[icon]) {
         adaptableSystemIcon = { name: icon };
     }
     if (adaptableSystemIcon) {
@@ -27,10 +30,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(IconComponent, Object.assign({}, iconProps));
+        icon = React.createElement(Icon_1.IconComponent, Object.assign({}, iconProps));
     }
-    if (isAdaptableCustomIcon(icon) || isAdaptableElementIcon(icon)) {
-        icon = React.createElement(IconComponent, { icon: icon });
+    if ((0, Icon_1.isAdaptableCustomIcon)(icon) || (0, Icon_1.isAdaptableElementIcon)(icon)) {
+        icon = React.createElement(Icon_1.IconComponent, { icon: icon });
     }
     if (icon) {
         children =
@@ -71,10 +74,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[buttonProps.fontWeight]) !== null && _a !== void 0 ? _a : buttonProps.fontWeight) !== null && _b !== void 0 ? _b : 'normal'
+        ? (_b = (_a = theme_1.default[buttonProps.fontWeight]) !== null && _a !== void 0 ? _a : buttonProps.fontWeight) !== null && _b !== void 0 ? _b : 'normal'
         : 'normal';
-    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;
+    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;
 });
 SimpleButton.defaultProps = {
     px: null,
@@ -84,4 +87,4 @@ SimpleButton.defaultProps = {
     //@ts-ignore
     borderRadius: null,
 };
-export default SimpleButton;
+exports.default = SimpleButton;

package/src/components/SizedContainer/index.js

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

package/src/components/StylePreview.js

@@ -1,8 +1,13 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import { toStyle } from '../Utilities/Helpers/StyleHelper';
-import join from './utils/join';
-export const StylePreview = (props) => {
+"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) => {
     var _a, _b, _c;
-    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'));
+    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'));
 };
+exports.StylePreview = StylePreview;

package/src/components/Table/index.js

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

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

@@ -1,6 +1,6 @@
 import { BoxProps } from 'rebass';
 import { HTMLProps } from 'react';
-export declare type TabsProps<VALUE_TYPE> = HTMLProps<HTMLElement> & {
+export type TabsProps<VALUE_TYPE> = HTMLProps<HTMLElement> & {
     value?: VALUE_TYPE;
     defaultValue?: VALUE_TYPE;
     onValueChange?: (value: VALUE_TYPE) => void;
@@ -25,7 +25,7 @@ export declare const Tabs: {
         };
     };
 };
-declare type TabProps = {
+type TabProps = {
     index?: number;
     keyboardNavigation?: boolean;
 } & BoxProps & HTMLProps<HTMLDivElement>;
@@ -35,7 +35,7 @@ export declare const Tab: {
         isTabsTab: boolean;
     };
 };
-declare type ContentProps = {
+type ContentProps = {
     value?: string | number;
 } & BoxProps;
 export declare const Content: {

package/src/components/Tabs/index.js

@@ -1,9 +1,12 @@
-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';
+"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"));
 const TabContext = React.createContext({
     selectedIndex: 0,
     tabCount: 0,
@@ -11,16 +14,16 @@ const TabContext = React.createContext({
 });
 const isTab = (c) => {
     var _a;
-    return c.type === Tab || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsTab);
+    return c.type === exports.Tab || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsTab);
 };
 const isTabContent = (c) => {
     var _a;
-    return c.type === Content || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsContent);
+    return c.type === exports.Content || ((_a = c.props) === null || _a === void 0 ? void 0 : _a.isTabsContent);
 };
-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 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);
     const allChildren = React.Children.toArray(children);
     const values = [];
     const tabs = allChildren.filter(isTab).map((tab, index) => {
@@ -59,34 +62,35 @@ export const Tabs = (props) => {
         doSetSelectedIndex(index);
     };
     const currentContent = contents[selectedIndex];
-    const _a = (currentContent === null || currentContent === void 0 ? void 0 : currentContent.props) || {}, { value } = _a, contentProps = __rest(_a, ["value"]);
+    const _a = (currentContent === null || currentContent === void 0 ? void 0 : currentContent.props) || {}, { value } = _a, contentProps = tslib_1.__rest(_a, ["value"]);
     return (React.createElement(TabContext.Provider, { value: {
             selectedIndex,
             tabCount: tabs.length,
             setSelectedIndex,
         } },
-        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" }),
+        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" }),
                 tabs,
-                React.createElement(Flex, { flex: 1, className: "ab-Tabs__Filler" })),
-            React.createElement(Box, Object.assign({ padding: 2 }, contentProps, { className: `${contentProps.className || ''} ab-Tabs__Body` }), currentContent))));
+                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))));
 };
-export const Tab = (props) => {
-    const { index, autoFocus, keyboardNavigation = true, className: propsClassName } = props, boxProps = __rest(props, ["index", "autoFocus", "keyboardNavigation", "className"]);
+exports.Tabs = Tabs;
+const Tab = (props) => {
+    const { index, autoFocus, keyboardNavigation = true, className: propsClassName } = props, boxProps = tslib_1.__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 = join(propsClassName, baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '');
-    const ref = useRef(null);
+    const className = (0, join_1.default)(propsClassName, baseClassName, active ? `${baseClassName}--active` : '', beforeActive ? `${baseClassName}--before-active` : '');
+    const ref = (0, react_1.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(Box, Object.assign({ ref: ref, padding: 2, tabIndex: active ? 0 : -1 }, boxProps, { className: className, onClick: (event) => {
+    return (React.createElement(rebass_1.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);
@@ -116,14 +120,16 @@ export const Tab = (props) => {
             (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, event);
         } })));
 };
-Tab.defaultProps = {
+exports.Tab = Tab;
+exports.Tab.defaultProps = {
     isTabsTab: true,
 };
-export const Content = (props) => {
+const Content = (props) => {
     return React.createElement(React.Fragment, null, props.children);
 };
-Content.defaultProps = {
+exports.Content = Content;
+exports.Content.defaultProps = {
     isTabsContent: true,
 };
-Tabs.Tab = Tab;
-Tabs.Content = Content;
+exports.Tabs.Tab = exports.Tab;
+exports.Tabs.Content = exports.Content;

package/src/components/Tag/Tag.js

@@ -1,7 +1,11 @@
-import * as React from 'react';
-import { Box } from 'rebass';
-import join from '../utils/join';
-export const Tag = React.forwardRef((props, ref) => {
+"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) => {
     var _a, _b, _c, _d;
-    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) })));
+    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) })));
 });

package/src/components/Tag/index.js

@@ -1 +1,5 @@
-export { Tag } from './Tag';
+"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; } });

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BoxProps } from 'rebass';
 import { HTMLProps } from 'react';
 export declare const baseClassName = "ab-Textarea";
-export declare type TextareaProps = Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> & {
+export type TextareaProps = Omit<HTMLProps<HTMLTextAreaElement>, 'ref'> & {
     placehoder?: string;
     type?: string;
     disabled?: boolean;

package/src/components/Textarea/index.js

@@ -1,10 +1,13 @@
-import { __rest } from "tslib";
-import * as React from 'react';
-import { Box } from 'rebass';
-import join from '../utils/join';
-export const baseClassName = 'ab-Textarea';
+"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';
 const Textarea = React.forwardRef((props, ref) => {
-    let { disabled, className } = props, textareaProps = __rest(props, ["disabled", "className"]);
+    let { disabled, className } = props, textareaProps = tslib_1.__rest(props, ["disabled", "className"]);
     let type = 'text';
     if (textareaProps && textareaProps.type) {
         type = textareaProps.type;
@@ -12,6 +15,6 @@ const Textarea = React.forwardRef((props, ref) => {
     if (type === 'string') {
         type = 'text';
     }
-    return (React.createElement(Box, Object.assign({ ref: ref, as: "textarea" }, textareaProps, { type: type, disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : '') })));
+    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` : '') })));
 });
-export default Textarea;
+exports.default = Textarea;

package/src/components/Toastify/index.js

@@ -1 +1,10 @@
-export { toast, ToastContainer, Slide, Zoom, Bounce, Flip, } from '../../bundle-dependencies/bundles/react-toastify';
+"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; } });

package/src/components/Toggle/Toggle.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptableSystemIconName } from '../../types';
-export declare type ToggleProps = {
+export type ToggleProps = {
     onPressedChange: (pressed: boolean) => void;
     pressed?: boolean;
     icon?: AdaptableSystemIconName;