@imposium-hub/components 1.44.3 → 1.45.0

package/dist/esm/components/color-field/ColorField.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { IToolTipConfig } from '../Tooltip';
+interface IColorFieldProps {
+    buttons?: any;
+    label?: string;
+    placeholder?: string;
+    readOnly?: boolean;
+    value: string;
+    tooltip?: IToolTipConfig | string;
+    enableAlpha?: boolean;
+    presetColors?: any[];
+    width?: string | number;
+    onChange(e: any): void;
+    info?: string;
+    labelPosition?: string;
+    pickerPosition?: string;
+}
+interface IColorFieldState {
+    pickerOpen: boolean;
+}
+declare class ColorField extends React.PureComponent<IColorFieldProps, IColorFieldState> {
+    private clickOutsideHandler;
+    private picker;
+    private transparentBg;
+    constructor(props: any);
+    private togglePicker;
+    private handleClickOutside;
+    private handleChangeComplete;
+    render(): JSX.Element;
+}
+export default ColorField;

package/dist/esm/components/color-field/ColorField.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import FieldWrapper from '../field-wrapper/FieldWrapper';
+import { SketchPicker } from 'react-color';
+class ColorField extends React.PureComponent {
+    clickOutsideHandler;
+    picker;
+    transparentBg = `url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAMUlEQVQ4T2NkYGAQYcAP3uCTZhw1gGGYhAGBZIA/nYDCgBDAm9BGDWAAJyRCgLaBCAAgXwixzAS0pgAAAABJRU5ErkJggg==") left center`;
+    constructor(props) {
+        super(props);
+        this.state = {
+            pickerOpen: false
+        };
+        this.picker = React.createRef();
+        this.clickOutsideHandler = (e) => this.handleClickOutside(e);
+    }
+    togglePicker(e) {
+        e.preventDefault();
+        e.stopPropagation();
+        const newState = !this.state.pickerOpen;
+        this.setState({
+            pickerOpen: newState
+        }, () => {
+            if (this.state.pickerOpen) {
+                document.addEventListener('click', this.clickOutsideHandler);
+            }
+            else {
+                document.removeEventListener('click', this.clickOutsideHandler);
+            }
+        });
+    }
+    handleClickOutside(e) {
+        let targetElement = e.target;
+        const ref = this.picker.current;
+        do {
+            if (targetElement === ref) {
+                return;
+            }
+            targetElement = targetElement.parentNode;
+        } while (targetElement);
+        document.removeEventListener('click', this.clickOutsideHandler);
+        this.setState({
+            pickerOpen: false
+        });
+    }
+    handleChangeComplete(color, e) {
+        return this.props.onChange(color);
+    }
+    render() {
+        const { label, placeholder, width, readOnly, buttons, tooltip, value, enableAlpha, presetColors, info, labelPosition, pickerPosition } = this.props;
+        const { pickerOpen } = this.state;
+        const disableAlpha = !enableAlpha;
+        const pickerPos = pickerPosition || 'left';
+        const picker = (pickerOpen) ? React.createElement(SketchPicker, { color: value, disableAlpha: disableAlpha, presetColors: presetColors, onChangeComplete: (c, e) => this.handleChangeComplete(c, e) }) : null;
+        let swatchStyle;
+        if (value === 'transparent') {
+            swatchStyle = {
+                background: this.transparentBg,
+                border: '1px solid #1d1d1d',
+                boxSizing: 'border-box'
+            };
+        }
+        else {
+            swatchStyle = {
+                backgroundColor: value
+            };
+        }
+        return React.createElement(FieldWrapper, { customClass: 'color-field', label: label, tooltip: tooltip, buttons: buttons, info: info, labelPosition: labelPosition, width: width },
+            React.createElement("div", { className: 'swatch', style: swatchStyle, onClick: (e) => this.togglePicker(e) }),
+            React.createElement("div", { className: `picker picker-${pickerPos}`, ref: this.picker }, picker));
+    }
+}
+export default ColorField;
+//# sourceMappingURL=ColorField.js.map

package/dist/esm/components/color-field/ColorField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorField.js","sourceRoot":"","sources":["../../../../src/components/color-field/ColorField.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/color-field/ColorFiled.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import ColorField from './ColorField';
+declare const _default: {
+    title: string;
+    component: typeof ColorField;
+};
+export default _default;
+export declare const defaultColorField: () => JSX.Element;

package/dist/esm/components/color-field/ColorFiled.stories.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { useState } from 'react';
+import ColorField from './ColorField';
+import { action } from '@storybook/addon-actions';
+export default {
+    title: 'ColorField',
+    component: ColorField
+};
+export const defaultColorField = () => {
+    const [color, setColor] = useState('red');
+    return (React.createElement(ColorField, { label: 'Color Field', tooltip: 'TOOLTIP', width: '300px', value: color, onChange: action('CHANGED') }));
+};
+//# sourceMappingURL=ColorFiled.stories.js.map

package/dist/esm/components/color-field/ColorFiled.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColorFiled.stories.js","sourceRoot":"","sources":["../../../../src/components/color-field/ColorFiled.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,UAAU,MAAM,cAAc,CAAC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGlD,eAAe;IACX,KAAK,EAAE,YAAY;IACnB,SAAS,EAAE,UAAU;CACxB,CAAC;AAkBF,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE;IAClC,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE1C,OAAO,CACH,oBAAC,UAAU,IACP,KAAK,EAAI,aAAa,EACtB,OAAO,EAAI,SAAS,EACpB,KAAK,EAAI,OAAO,EAChB,KAAK,EAAI,KAAK,EACd,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAAG,CACvC,CAAC;AACN,CAAC,CAAC"}

package/dist/esm/components/compositions/TextLayer.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { ITextLayer } from '../../constants/compositions';
+interface ITextLayerProps {
+    inventory?: any;
+    onReady?(): void;
+    options: ITextLayer;
+}
+interface ITextLayerState {
+    fontLoaded: boolean;
+    fontError: boolean;
+}
+export default class TextLayer extends React.PureComponent<ITextLayerProps, ITextLayerState> {
+    private innerTextRef;
+    constructor(props: any);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: any): void;
+    private fitElement;
+    private loadFont;
+    private formatContent;
+    private fitText;
+    private errorLoadingFont;
+    private fontReady;
+    private getFlexStart;
+    render(): JSX.Element;
+}
+export {};

package/dist/esm/components/compositions/TextLayer.js

@@ -0,0 +1,176 @@
+import * as React from 'react';
+import { ASSET_DISTRO, ASSET_ORIGIN } from '../../constants/assets';
+import { FONT_TYPES } from '../../constants/compositions';
+import { s3Url } from '../../Util';
+export default class TextLayer extends React.PureComponent {
+    innerTextRef;
+    constructor(props) {
+        super(props);
+        this.state = {
+            fontError: false,
+            fontLoaded: false
+        };
+        this.innerTextRef = React.createRef();
+    }
+    componentDidMount() {
+        this.loadFont();
+    }
+    componentDidUpdate(prevProps) {
+        const { fontLoaded } = this.state;
+        const { options: { font, custom_font_id, content } } = this.props;
+        if (prevProps.options.font !== font ||
+            prevProps.options.custom_font_id !== custom_font_id) {
+            this.loadFont();
+        }
+        if (prevProps.options.content !== content && fontLoaded) {
+            this.fitText();
+        }
+    }
+    fitElement(element, targWidth, targHeight) {
+        const computedStyle = window.getComputedStyle(element, null);
+        let fSize = parseFloat(computedStyle.getPropertyValue('font-size'));
+        let lSpace = parseFloat(computedStyle.getPropertyValue('letter-spacing'));
+        let lHeight = parseFloat(computedStyle.getPropertyValue('line-height'));
+        let wSpace = parseFloat(computedStyle.getPropertyValue('word-spacing'));
+        const lSpaceRatio = lSpace / fSize;
+        const lHeightRatio = lHeight / fSize;
+        const wSpaceRatio = wSpace / fSize;
+        let w = element.offsetWidth;
+        let h = element.offsetHeight;
+        while (w > targWidth || h > targHeight) {
+            fSize--;
+            lSpace = Math.round(fSize * lSpaceRatio);
+            lHeight = Math.round(fSize * lHeightRatio);
+            wSpace = Math.round(fSize * wSpaceRatio);
+            element.style.fontSize = `${fSize}px`;
+            element.style.letterSpacing = `${lSpace}px`;
+            element.style.wordSpacing = `${wSpace}px`;
+            element.style.lineHeight = `${lHeight}px`;
+            w = element.offsetWidth;
+            h = element.offsetHeight;
+        }
+    }
+    loadFont() {
+        const { options: { font, font_size, font_type, custom_font_url } } = this.props;
+        if (font_type === FONT_TYPES.CUSTOM && font_size && custom_font_url) {
+            const fontOrigin = s3Url(custom_font_url, ASSET_DISTRO, ASSET_ORIGIN);
+            let fontLoaded = false;
+            // Not sure why you need to pass the size in here, but .check() throws an error without it.
+            try {
+                fontLoaded = document.fonts.check(`${font_size}px ${font}`);
+            }
+            catch {
+                this.errorLoadingFont();
+            }
+            if (!fontLoaded) {
+                this.setState({
+                    fontLoaded: false
+                }, () => {
+                    const fontObj = new FontFace(font, `url(${fontOrigin})`, { style: 'normal', weight: 'normal' });
+                    fontObj.load().then((e) => {
+                        const fonts = document.fonts; // to get rid of "Property 'add' does not exist on type 'FontFaceSet'." TSC error.
+                        fonts.add(fontObj);
+                        this.fontReady();
+                    }).catch((e) => {
+                        this.errorLoadingFont();
+                    });
+                });
+            }
+            else {
+                this.fontReady();
+            }
+        }
+        else if (font_type === FONT_TYPES.STANDARD) {
+            // TODO: check this?
+            this.fontReady();
+        }
+    }
+    formatContent() {
+        const { options: { content }, inventory } = this.props;
+        let contentStr = content || '';
+        if (inventory) {
+            // replce all instances of all inventory in the string
+            for (const key in inventory) {
+                if (inventory.hasOwnProperty(key)) {
+                    const regex = new RegExp(`{{${key}}}`, 'g');
+                    let val = inventory[key];
+                    if (val) {
+                        val = val.toString();
+                        contentStr = contentStr.replace(regex, val);
+                    }
+                }
+            }
+        }
+        const pieces = contentStr.split('\n');
+        const sections = [];
+        for (let i = 0; i < pieces.length; i++) {
+            sections.push(React.createElement("span", { key: `s-${i}` }, pieces[i]));
+            if (pieces[i + 1]) {
+                sections.push(React.createElement("br", { key: `b-${i}` }));
+            }
+        }
+        return sections;
+    }
+    fitText() {
+        if (this.props.options.text_fit) {
+            const text = this.innerTextRef.current;
+            if (text) {
+                this.fitElement(text, this.props.options.width, this.props.options.height);
+            }
+        }
+    }
+    errorLoadingFont() {
+        this.setState({
+            fontError: true
+        }, () => {
+            this.fontReady();
+        });
+    }
+    fontReady() {
+        this.setState({
+            fontLoaded: true
+        }, () => {
+            this.fitText();
+            if (this.props.onReady) {
+                this.props.onReady();
+            }
+        });
+    }
+    getFlexStart(hAlign) {
+        switch (hAlign) {
+            case 'left': return 'flex-start';
+            case 'center': return 'center';
+            case 'right': return 'flex-end';
+        }
+    }
+    render() {
+        const { options: { color, background_color, line_height, word_spacing, letter_spacing, font_size, font_weight, font, horizontal_alignment, vertical_alignment, text_wrap } } = this.props;
+        const { fontError } = this.state;
+        const whiteSpace = (text_wrap) ? 'normal' : 'nowrap';
+        const lS = (letter_spacing) ? `${letter_spacing}px` : 'normal';
+        const wS = (word_spacing) ? `${word_spacing}px` : 'normal';
+        const lH = (line_height) ? `${line_height}px` : 'normal';
+        const fS = (font_size) ? `${font_size}px` : '0px';
+        const fontWeight = (font_weight) ? font_weight : 400;
+        const innerTextStyle = {
+            color,
+            lineHeight: lH,
+            wordSpacing: wS,
+            letterSpacing: lS,
+            fontSize: fS,
+            fontWeight,
+            whiteSpace: whiteSpace,
+            fontFamily: (!fontError) ? font : 'Arial, helvetica, sans-serif'
+        };
+        const wrapperStyle = {
+            display: 'flex',
+            textAlign: horizontal_alignment,
+            justifyContent: this.getFlexStart(horizontal_alignment),
+            alignItems: vertical_alignment,
+            backgroundColor: background_color
+        };
+        return React.createElement("div", { className: 'composition-text-layer', style: wrapperStyle },
+            React.createElement("div", { className: 'inner-text', style: innerTextStyle, ref: this.innerTextRef }, this.formatContent()));
+    }
+}
+//# sourceMappingURL=TextLayer.js.map

package/dist/esm/components/compositions/TextLayer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextLayer.js","sourceRoot":"","sources":["../../../../src/components/compositions/TextLayer.tsx"],"names":[],"mappings":"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"}

package/dist/esm/components/controlled-list/ControlledList.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+interface IControlledListProps {
+    items?: any[];
+    removable?: boolean;
+    onRemove?(index: any): void;
+}
+declare class ControlledList extends React.PureComponent<IControlledListProps> {
+    private inputRef;
+    private submitHandler;
+    renderRemoveButton(index: any): JSX.Element;
+    render(): JSX.Element;
+}
+export default ControlledList;

package/dist/esm/components/controlled-list/ControlledList.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import Button from '../button/Button';
+import { ICON_TIMES } from '../../constants/icons';
+class ControlledList extends React.PureComponent {
+    inputRef;
+    submitHandler;
+    renderRemoveButton(index) {
+        const { removable } = this.props;
+        if (removable) {
+            return React.createElement("div", { className: 'buttons' },
+                React.createElement(Button, { style: 'subtle', color: 'danger', onClick: () => this.props.onRemove(index) }, ICON_TIMES));
+        }
+    }
+    render() {
+        const { items } = this.props;
+        let buttons;
+        if (items) {
+            buttons = items.map((item, i) => {
+                return React.createElement("div", { className: 'item', key: `item-${i}` },
+                    item,
+                    this.renderRemoveButton(i));
+            });
+        }
+        return React.createElement("div", { className: 'controlled-list' }, buttons);
+    }
+}
+export default ControlledList;
+//# sourceMappingURL=ControlledList.js.map

package/dist/esm/components/controlled-list/ControlledList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledList.js","sourceRoot":"","sources":["../../../../src/components/controlled-list/ControlledList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,MAAM,MAAM,kBAAkB,CAAC;AACtC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAQnD,MAAM,cAAe,SAAQ,KAAK,CAAC,aAAmC;IAE1D,QAAQ,CAAO;IACf,aAAa,CAAO;IAErB,kBAAkB,CAAC,KAAK;QAE3B,MAAM,EAAC,SAAS,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAE/B,IAAK,SAAS,EAAE;YACZ,OAAO,6BAAK,SAAS,EAAG,SAAS;gBAC7B,oBAAC,MAAM,IACH,KAAK,EAAG,QAAQ,EAChB,KAAK,EAAG,QAAQ,EAChB,OAAO,EAAI,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,IAC1C,UAAU,CACN,CACP,CAAC;SACV;IACL,CAAC;IACM,MAAM;QAET,MAAM,EAAC,KAAK,EAAC,GAAG,IAAI,CAAC,KAAK,CAAC;QAC3B,IAAI,OAAuB,CAAC;QAE5B,IAAI,KAAK,EAAE;YACP,OAAO,GAAG,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE;gBAC5B,OAAO,6BAAK,SAAS,EAAG,MAAM,EAAC,GAAG,EAAI,QAAQ,CAAC,EAAE;oBAC5C,IAAI;oBACH,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAC1B,CAAC;YACX,CAAC,CAAC,CAAC;SACN;QAED,OAAO,6BAAK,SAAS,EAAG,iBAAiB,IACpC,OAAO,CACN,CAAC;IACX,CAAC;CACJ;AAED,eAAe,cAAc,CAAC"}

package/dist/esm/components/controlled-list/ControlledList.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import ControlledList from './ControlledList';
+declare const _default: {
+    title: string;
+    componenet: typeof ControlledList;
+};
+export default _default;
+export declare const ControlledListWithTags: () => JSX.Element;

package/dist/esm/components/controlled-list/ControlledList.stories.js

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { action } from '@storybook/addon-actions';
+import ControlledList from './ControlledList';
+import Tag from '../Tag/Tag';
+export default {
+    title: 'ControlledList',
+    componenet: ControlledList
+};
+export const ControlledListWithTags = () => (React.createElement("div", { style: { width: '8%' } },
+    React.createElement(ControlledList, { items: [React.createElement(Tag, { key: `tag1`, copy: 'Sample Tag' }), React.createElement(Tag, { key: `tag2`, copy: 'Sample Tag' })], removable: true, onRemove: action('REMOVED') })));
+//# sourceMappingURL=ControlledList.stories.js.map

package/dist/esm/components/controlled-list/ControlledList.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ControlledList.stories.js","sourceRoot":"","sources":["../../../../src/components/controlled-list/ControlledList.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAClD,OAAO,cAAc,MAAM,kBAAkB,CAAC;AAC9C,OAAO,GAAG,MAAM,YAAY,CAAC;AAE7B,eAAe;IACX,KAAK,EAAE,gBAAgB;IACvB,UAAU,EAAE,cAAc;CAC7B,CAAC;AASF,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,CACxC,6BAAK,KAAK,EAAE,EAAC,KAAK,EAAE,IAAI,EAAC;IACrB,oBAAC,cAAc,IACX,KAAK,EAAI,CAAC,oBAAC,GAAG,IAAC,GAAG,EAAI,MAAM,EAAE,IAAI,EAAG,YAAY,GAAG,EAAE,oBAAC,GAAG,IAAC,GAAG,EAAI,MAAM,EAAE,IAAI,EAAG,YAAY,GAAG,CAAC,EACjG,SAAS,EAAI,IAAI,EACjB,QAAQ,EAAI,MAAM,CAAC,SAAS,CAAC,GAC3B,CACJ,CACT,CAAC"}

package/dist/esm/components/data-table/DataTable.d.ts

@@ -0,0 +1,37 @@
+import * as React from 'react';
+interface IDataTableProps {
+    defaultPageSize?: number;
+    sortState?: any[];
+    noDataText?: string;
+    minRows?: number;
+    simple?: boolean;
+    paginated?: boolean;
+    disableMultisort?: boolean;
+    showInterstitial?: boolean;
+    freezeWhenExpanded?: boolean;
+    customPaginator?: boolean;
+    pages?: number;
+    tightRows: boolean;
+    dndType: string;
+    dndName: string;
+    dnd: boolean;
+    onFetchData?: (...args: any[]) => any;
+    data: any[];
+    columns: any | any[];
+    hiddenColumns?: string[];
+    hidePaginator?: boolean;
+    currentPage?: number;
+    totalPages?: number;
+    itemsPerPage?: number;
+    totalItems?: number;
+    onPage?: (pageIndex: number, pageSize: number) => void;
+    sortBy?: any[];
+    onSort?: (sortBy: any[]) => void;
+    highlightBy?: any;
+    onRowClick?: (row: any) => void;
+    onRowDoubleClick?: (row: any) => void;
+    renderPivotComponent?: (row: any) => JSX.Element;
+    disableKeyScroll?: boolean;
+}
+declare const DataTable: React.FC<IDataTableProps>;
+export default DataTable;

package/dist/esm/components/data-table/DataTable.js

@@ -0,0 +1,186 @@
+import * as React from 'react';
+import Paginator from './Paginator';
+import Spinner from '../spinner/Spinner';
+import { ICON_EXCLAIMATION_TRIANGLE, ICON_CHEVRON_UP, ICON_CHEVRON_DOWN } from '../../constants/icons';
+import { useTable, useFlexLayout, useFilters, useSortBy, useExpanded, useResizeColumns, usePagination, } from 'react-table';
+import DataTableDnDWrapper from '../assets/DataTableDnDWrapper';
+const DataTableLoader = (p) => ((React.createElement("div", { className: 'ip-table-loader' },
+    React.createElement(Spinner, null))));
+const NoDataComponent = (p) => {
+    return (React.createElement("div", { className: 'ip-table-empty' },
+        React.createElement("span", { className: 'empty-message' },
+            ICON_EXCLAIMATION_TRIANGLE,
+            " ",
+            p.copy || 'No Data Found')));
+};
+const preventKeyScroll = (e) => {
+    if ([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
+        e.preventDefault();
+    }
+};
+const processColumnData = (freshColumns) => {
+    let colKeys;
+    if (Array.isArray(freshColumns)) {
+        return freshColumns;
+    }
+    if (!Array.isArray(freshColumns) && typeof freshColumns === 'object') {
+        colKeys = Object.keys(freshColumns);
+        if (colKeys.length > 0) {
+            return colKeys.map((key) => ({
+                ...freshColumns[key],
+                accessor: key,
+            }));
+        }
+    }
+    return [];
+};
+let doubleClickTimeout;
+const DataTable = (props) => {
+    const wrapperRef = React.useRef(null);
+    const activeRowRef = React.useRef(null);
+    const [didMount, setDidMount] = React.useState(false);
+    const [data, setData] = React.useState([]);
+    const [columns, setColumns] = React.useState([]);
+    const hiddenColumns = (Array.isArray(props.hiddenColumns)) ? props.hiddenColumns : [];
+    const manualPagination = (Number.isInteger(props.currentPage) && typeof props.onPage === 'function');
+    const manualSortBy = (typeof props.onSort === 'function' && typeof props.sortBy !== 'undefined');
+    const canPivot = (typeof props.renderPivotComponent === 'function');
+    const renderPivotComponent = (canPivot) ? props.renderPivotComponent : () => null;
+    const doubleClickEnabled = (typeof props.onRowDoubleClick === 'function');
+    const initialTableState = {
+        hiddenColumns,
+        sortBy: (manualSortBy) ? props.sortBy : [],
+        pageIndex: (manualPagination) ? props.currentPage - 1 : undefined,
+        pageSize: props.itemsPerPage,
+        autoResetExpanded: false,
+    };
+    const { getTableProps, getTableBodyProps, headerGroups, page, rows, prepareRow, canPreviousPage, canNextPage, pageOptions, pageCount, gotoPage, nextPage, previousPage, setPageSize, setHiddenColumns, visibleColumns, totalColumnsWidth, toggleAllRowsExpanded, state: { pageIndex, pageSize, sortBy, }, } = useTable({
+        columns,
+        data,
+        manualSortBy,
+        manualPagination,
+        initialState: initialTableState,
+        manualFilters: true,
+        disableMultiSorting: true,
+        autoResetExpanded: false,
+        disableSortRemove: manualSortBy,
+        pageCount: props.totalPages,
+        pageSize: props.itemsPerPage,
+    }, useFlexLayout, useFilters, useSortBy, useExpanded, usePagination, useResizeColumns);
+    const rowData = (manualPagination) ? rows : page;
+    const hidePaginatorClass = (props.hidePaginator) ? 'hide-paginator' : '';
+    const horizontalScrollClass = (wrapperRef.current && totalColumnsWidth > wrapperRef.current.clientWidth)
+        ? 'horizontal-scroll'
+        : '';
+    const rowClass = (props.tightRows) ? 'tight-rows' : '';
+    // Set component mounted state
+    React.useEffect(() => setDidMount(true), []);
+    // Execute when reference to column configs changes
+    React.useEffect(() => {
+        setColumns(processColumnData(props.columns));
+    }, [props.columns]);
+    // Execute if hidden column ids change
+    React.useEffect(() => {
+        if (didMount && Array.isArray(props.hiddenColumns)) {
+            setHiddenColumns(props.hiddenColumns);
+        }
+    }, [props.hiddenColumns]);
+    // Execute when reference to 'data', i.e the array of objects being passed in changes
+    React.useEffect(() => {
+        if (Array.isArray(props.data)) {
+            setData(props.data);
+        }
+    }, [props.data]);
+    // Execute when page or itemsPerPage changes
+    React.useEffect(() => {
+        if (didMount && manualPagination) {
+            toggleAllRowsExpanded(false);
+        }
+    }, [props.currentPage]);
+    // Execute when sort order or sort key changes
+    React.useEffect(() => {
+        if (didMount && manualSortBy) {
+            props.onSort(sortBy);
+        }
+    }, [sortBy]);
+    return (React.createElement("section", { ref: wrapperRef, className: 'ip-table-wrapper', tabIndex: (props.disableKeyScroll) ? 0 : undefined, onKeyDown: (props.disableKeyScroll) ? preventKeyScroll : null },
+        (props.showInterstitial) && React.createElement(DataTableLoader, null),
+        (didMount && !props.showInterstitial && data.length === 0) && (React.createElement(NoDataComponent, { copy: props.noDataText })),
+        React.createElement("table", { ...getTableProps(), className: `ip-table ${horizontalScrollClass} ${hidePaginatorClass} ${rowClass}` },
+            React.createElement("thead", { className: 'ip-table-head' }, headerGroups.map((headerGroup) => {
+                return (React.createElement(React.Fragment, { key: 'head-fragment' },
+                    React.createElement("tr", { ...headerGroup.getHeaderGroupProps(), className: 'ip-table-head-row' }, headerGroup.headers.map((column) => {
+                        const searchable = (column.hasOwnProperty('Search'));
+                        const toggleProps = column.getSortByToggleProps();
+                        const sortSpan = (React.createElement("span", { className: 'sort-status' }, (column.isSorted)
+                            ? column.isSortedDesc ? ICON_CHEVRON_DOWN : ICON_CHEVRON_UP
+                            : null));
+                        return (React.createElement("th", { ...column.getHeaderProps(), className: `ip-table-header ${column.canSort ? 'ip-sortable' : ''}` },
+                            (!searchable) && (React.createElement("div", { ...toggleProps, className: 'filterable-cell-wrapper' },
+                                column.render('Header'),
+                                sortSpan)),
+                            (searchable) && (React.createElement("div", { className: 'filterable-cell-wrapper' },
+                                React.createElement("span", { ...toggleProps, className: 'searchable-sort-area' },
+                                    column.render('Header'),
+                                    sortSpan),
+                                column.hasOwnProperty('Search') && column.render('Search'))),
+                            column.canResize && (React.createElement("div", { ...column.getResizerProps(), className: `ip-table-resizer ${column.isResizing ? 'resizing' : ''}` }))));
+                    })),
+                    (headerGroup.headers.some((column) => (column.hasOwnProperty('Filter')))) && (React.createElement("tr", { ...headerGroup.getHeaderGroupProps({ key: 'filters-row' }) }, headerGroup.headers.map((column, i) => (React.createElement("th", { ...column.getHeaderProps({ key: `filter-${i}` }), key: `filter-col-${i}`, className: 'ip-table-filter' }, column.canFilter && column.Filter ? column.render('Filter') : null)))))));
+            })),
+            React.createElement("tbody", { ...getTableBodyProps(), className: 'ip-table-body' }, rowData.map((row, i) => {
+                let selectedClass = '';
+                let activeRef;
+                if (props.highlightBy &&
+                    row.original.hasOwnProperty(props.highlightBy.key) &&
+                    row.original[props.highlightBy.key] === props.highlightBy.value) {
+                    selectedClass = 'selected';
+                    activeRef = activeRowRef;
+                }
+                prepareRow(row);
+                const rowProps = row.getRowProps();
+                rowProps.className = `ip-table-row ${selectedClass}`;
+                rowProps.onClick = (e) => {
+                    const onClick = () => {
+                        if (typeof props.onRowClick === 'function') {
+                            props.onRowClick(row);
+                        }
+                    };
+                    if (!doubleClickEnabled) {
+                        onClick();
+                    }
+                    if (e.detail === 1 && doubleClickEnabled) {
+                        doubleClickTimeout = window.setTimeout(onClick, 200);
+                    }
+                };
+                rowProps.onDoubleClick = (e) => {
+                    clearTimeout(doubleClickTimeout);
+                    if (doubleClickEnabled) {
+                        props.onRowDoubleClick(row);
+                    }
+                };
+                const rowContent = row.cells.map((cell) => (React.createElement("td", { ...cell.getCellProps(), className: `ip-table-col ${(cell.column.overflowVisible) ? 'overflow-visible' : ''}`.trim() }, cell.render('Cell'))));
+                return React.createElement(React.Fragment, { key: `row-${i}` },
+                    (props.dnd) && React.createElement(DataTableDnDWrapper, { rowProps: rowProps, rowRef: activeRef, key: `row-${i}`, row: row, dndType: props.dndType, dndName: props.dndName }, rowContent),
+                    (!props.dnd) && React.createElement("tr", { key: `row-${i}`, ref: activeRef, ...rowProps }, rowContent),
+                    (row.isExpanded) &&
+                        (React.createElement("tr", { ...row.getRowProps({ key: 'pivot-row' }), className: 'ip-pivot-row' },
+                            React.createElement("td", { className: `ip-pivot-col ${selectedClass}`, colSpan: visibleColumns.length }, renderPivotComponent(row)))));
+            }))),
+        (!props.hidePaginator) && (React.createElement(Paginator, { ...{
+                totalItems: props.totalItems,
+                pageIndex: (props.currentPage) ? props.currentPage : pageIndex,
+                manualPagination,
+                pageSize,
+                pageCount,
+                pageOptions,
+                canNextPage: (manualPagination) ? props.currentPage + 1 <= props.totalPages : canNextPage,
+                canPreviousPage: (manualPagination) ? props.currentPage - 1 >= 1 : canPreviousPage,
+                gotoPage: (manualPagination) ? props.onPage : gotoPage,
+                setPageSize,
+                nextPage: (manualPagination) ? () => props.onPage(props.currentPage + 1, pageSize) : nextPage,
+                previousPage: (manualPagination) ? () => props.onPage(props.currentPage - 1, pageSize) : previousPage,
+            } }))));
+};
+export default DataTable;
+//# sourceMappingURL=DataTable.js.map