@darajs/ui-components 0.4.8

package/dist/table/filters.js

@@ -0,0 +1,226 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { faFilter } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { isAfter, isBefore, isEqual, isWithinInterval, parseISO } from 'date-fns';
+import { transparentize } from 'polished';
+import { useMemo, useRef, useState } from 'react';
+import styled from '@darajs/styled-components';
+import { FilterWrapper, StyledSearchBar } from '../filter/categorical-filter';
+import Tooltip from '../tooltip/tooltip';
+const FilterIcon = styled(FontAwesomeIcon) `
+    cursor: pointer;
+    color: ${(props) => (props.$hasFilter ? props.theme.colors.primary : props.theme.colors.grey3)};
+`;
+export const HeaderIconWrapper = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.5rem;
+    height: 1.5rem;
+
+    border-radius: 0.25rem;
+
+    :hover {
+        background-color: ${(props) => transparentize(0.9, props.theme.colors.primaryHover)};
+
+        svg {
+            color: ${(props) => (props.hasFilter ? props.theme.colors.primary : props.theme.colors.grey3)};
+        }
+    }
+
+    :active {
+        background-color: ${(props) => transparentize(0.8, props.theme.colors.primaryDown)};
+    }
+`;
+var NumericOperator;
+(function (NumericOperator) {
+    NumericOperator["BT"] = "Between";
+    NumericOperator["EQ"] = "Equal to";
+    NumericOperator["GT"] = "Greater than";
+    NumericOperator["LT"] = "Less than";
+    NumericOperator["NE"] = "Not equal to";
+})(NumericOperator || (NumericOperator = {}));
+var DateOperator;
+(function (DateOperator) {
+    DateOperator["BT"] = "Between";
+    DateOperator["EQ"] = "On date";
+    DateOperator["GT"] = "After";
+    DateOperator["LT"] = "Before";
+})(DateOperator || (DateOperator = {}));
+/**
+ * Check whether a given operator is supported
+ * @param op potential operator
+ */
+function isValidOperator(op) {
+    return Object.keys(NumericOperator)
+        .map((key) => NumericOperator[key])
+        .includes(op);
+}
+/**
+ * Check whether a given operator is supported for datetime
+ * @param op potential operator
+ */
+function isValidDatetimeOperator(op) {
+    return Object.keys(DateOperator)
+        .map((key) => DateOperator[key])
+        .includes(op);
+}
+/**
+ * Apply an operator to a given numeric value.
+ *
+ * @param operator operator to apply
+ * @param value value to compare
+ * @param filterValue filter value to compare to
+ */
+function applyNumericOperator(operator, value, filterValue) {
+    switch (operator) {
+        case NumericOperator.EQ:
+            return value === filterValue;
+        case NumericOperator.GT:
+            if (Array.isArray(filterValue)) {
+                throw new Error('Cannot use array for GT operator');
+            }
+            return value > filterValue;
+        case NumericOperator.LT:
+            if (Array.isArray(filterValue)) {
+                throw new Error('Cannot use array for LT operator');
+            }
+            return value < filterValue;
+        case NumericOperator.NE:
+            return value !== filterValue;
+        case NumericOperator.BT:
+            if (Array.isArray(filterValue)) {
+                return value <= filterValue[1] && value >= filterValue[0];
+            }
+            break;
+        default:
+            return true;
+    }
+}
+/**
+ * Apply an operator to a given datetime value.
+ *
+ * @param operator operator to apply
+ * @param value value to compare
+ * @param filterValue filter value to compare to
+ */
+function applyDatetimeOperator(operator, value, filterValue) {
+    const parsedValue = parseISO(value);
+    if (Array.isArray(filterValue)) {
+        if (operator === DateOperator.BT) {
+            return isWithinInterval(parsedValue, { end: filterValue[1], start: filterValue[0] });
+        }
+        return true;
+    }
+    switch (operator) {
+        case DateOperator.EQ:
+            return isEqual(parsedValue, filterValue);
+        case DateOperator.GT:
+            return isAfter(parsedValue, filterValue);
+        case DateOperator.LT:
+            return isBefore(parsedValue, filterValue);
+        default:
+            return true;
+    }
+}
+/**
+ * Custom numeric filter function
+ *
+ * @param rows rows to filter
+ * @param columnIds IDs of columns
+ * @param filterValue filter value provided
+ */
+export function numeric(rows, columnIds, filterValue) {
+    const { selected, value } = filterValue;
+    const [colId] = columnIds;
+    // If operator not supported or there's no value to compare to, return all rows
+    if (!isValidOperator(selected) || (!value && value !== 0)) {
+        return rows;
+    }
+    return rows.filter((row) => applyNumericOperator(selected, row.values[colId], value));
+}
+/**
+ * Custom datetime filter function
+ *
+ * @param rows rows to filter
+ * @param columnIds IDs of columns
+ * @param filterValue filter value
+ */
+export function datetime(rows, columnIds, filterValue) {
+    const { selected, value } = filterValue;
+    const [colId] = columnIds;
+    // If operator not supported or there's no value to compare to, return all rows
+    if (!isValidDatetimeOperator(selected) || !value) {
+        return rows;
+    }
+    return rows.filter((row) => applyDatetimeOperator(selected, row.values[colId], value));
+}
+/**
+ * Custom categorical filter function
+ *
+ * @param rows rows to filter
+ * @param columnIds IDs of columns
+ * @param filterItems filter value
+ */
+export function categorical(rows, columnIds, filterItems) {
+    const [colId] = columnIds;
+    const filteredItems = filterItems.map((item) => item.value);
+    // If no categories selected return everything
+    if (filteredItems.length === 0) {
+        return rows;
+    }
+    return rows.filter((row) => filteredItems.includes(row.values[colId]));
+}
+/**
+ * Text Filter component
+ */
+export function TextFilter(props) {
+    return (_jsx(FilterWrapper, { children: _jsx(StyledSearchBar, { onChange: (val) => props.column.setFilter(val || undefined), placeholder: "Rows containing value...", value: props.column.filterValue || '' }) }));
+}
+export function FilterContainer(props) {
+    var _a;
+    const [visible, setVisible] = useState(false);
+    const show = () => setVisible(true);
+    const hide = () => setVisible(false);
+    const hasFilter = !(props.col.filterValue === undefined ||
+        ((_a = props.col.filterValue) === null || _a === void 0 ? void 0 : _a.selected) === 'None' ||
+        (Array.isArray(props.col.filterValue) && props.col.filterValue.length === 0));
+    const items = useMemo(() => {
+        var _a;
+        if ((_a = props.col) === null || _a === void 0 ? void 0 : _a.uniqueItems) {
+            return props.col.uniqueItems.map((item) => ({ label: item, value: item }));
+        }
+    }, [props.col]);
+    // because the select dropdown lives outside of the component we need to pass a ref so that we can check whether the user is clicking within it or outside
+    const portalsRef = useRef([]);
+    function onClickOutside(instance, event) {
+        const target = event.target;
+        // loop through refs if they contain the target then user is clicking within a dropdown
+        for (const portal of portalsRef.current) {
+            if (portal === null || portal === void 0 ? void 0 : portal.contains(target)) {
+                return;
+            }
+        }
+        // user clicked outside so hide
+        hide();
+    }
+    return (_jsx(Tooltip, { content: props.col.render('Filter', { items, onChange: hide, portalsRef }), hidden: true, interactive: true, onClickOutside: onClickOutside, visible: visible, children: _jsx("span", { children: _jsx(HeaderIconWrapper, { hasFilter: hasFilter, children: _jsx(FilterIcon, { "$hasFilter": hasFilter, icon: faFilter, onClick: show }) }) }) }));
+}
+//# sourceMappingURL=filters.js.map

package/dist/table/filters.js.map

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

package/dist/table/headers/select-header.d.ts

@@ -0,0 +1,14 @@
+interface selectHeaderProps {
+    /** An action handler, will be called for selecting/unselecting all rows */
+    onAction: (actionId: string, input?: any) => void | Promise<void>;
+    /** The rows of the table, needed to keep track of them being selected or not */
+    rows: any;
+}
+/**
+ * A table header with a tri-state checkbox, for bulk selection actions
+ *
+ * @param {selectHeaderProps} props - the component props
+ */
+declare function SelectHeader(props: selectHeaderProps): JSX.Element;
+export default SelectHeader;
+//# sourceMappingURL=select-header.d.ts.map

package/dist/table/headers/select-header.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-header.d.ts","sourceRoot":"","sources":["../../../src/table/headers/select-header.tsx"],"names":[],"mappings":"AAmBA,UAAU,iBAAiB;IACvB,2EAA2E;IAC3E,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAClE,gFAAgF;IAChF,IAAI,EAAE,GAAG,CAAC;CACb;AAED;;;;GAIG;AACH,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAyB3D;AAED,eAAe,YAAY,CAAC"}

package/dist/table/headers/select-header.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import TriStateCheckbox, { CheckboxState } from '../../checkbox/tri-state-checkbox';
+import { Action } from '../cells/action-cell';
+/**
+ * A table header with a tri-state checkbox, for bulk selection actions
+ *
+ * @param {selectHeaderProps} props - the component props
+ */
+function SelectHeader(props) {
+    const allValues = props.rows.map((r) => r.original.selected);
+    const countSelected = allValues.filter(Boolean).length;
+    const allSelected = countSelected > 0 && countSelected === allValues.length;
+    const noneSelected = countSelected === 0;
+    const onChange = (state) => {
+        if (state === CheckboxState.UNCHECKED) {
+            props.onAction(Action.UNSELECT_ALL);
+        }
+        else if (state === CheckboxState.CHECKED) {
+            props.onAction(Action.SELECT_ALL, props.rows.map((r) => r.original));
+        }
+    };
+    return (_jsx(TriStateCheckbox, { allSelected: allSelected, noneSelected: noneSelected, onChange: onChange, style: { display: 'flex', justifyContent: 'center' } }));
+}
+export default SelectHeader;
+//# sourceMappingURL=select-header.js.map

package/dist/table/headers/select-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-header.js","sourceRoot":"","sources":["../../../src/table/headers/select-header.tsx"],"names":[],"mappings":";AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,gBAAgB,EAAE,EAAE,aAAa,EAAE,MAAM,mCAAmC,CAAC;AACpF,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAS9C;;;;GAIG;AACH,SAAS,YAAY,CAAC,KAAwB;IAC1C,MAAM,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC;IAClE,MAAM,aAAa,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,MAAM,CAAC;IAEvD,MAAM,WAAW,GAAG,aAAa,GAAG,CAAC,IAAI,aAAa,KAAK,SAAS,CAAC,MAAM,CAAC;IAC5E,MAAM,YAAY,GAAG,aAAa,KAAK,CAAC,CAAC;IAEzC,MAAM,QAAQ,GAAG,CAAC,KAAoB,EAAQ,EAAE;QAC5C,IAAI,KAAK,KAAK,aAAa,CAAC,SAAS,EAAE,CAAC;YACpC,KAAK,CAAC,QAAQ,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;QACxC,CAAC;aAAM,IAAI,KAAK,KAAK,aAAa,CAAC,OAAO,EAAE,CAAC;YACzC,KAAK,CAAC,QAAQ,CACV,MAAM,CAAC,UAAU,EACjB,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAM,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,CACzC,CAAC;QACN,CAAC;IACL,CAAC,CAAC;IACF,OAAO,CACH,KAAC,gBAAgB,IACb,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,YAAY,EAC1B,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,EAAE,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GACtD,CACL,CAAC;AACN,CAAC;AAED,eAAe,YAAY,CAAC"}

package/dist/table/options-menu.d.ts

@@ -0,0 +1,25 @@
+import { FunctionComponent } from 'react';
+import { ColumnInstance, Filters } from 'react-table';
+interface OptionsMenuProps {
+    /** all columns from the table component */
+    allColumns: ColumnInstance<any>[];
+    /** Optional flag to enable column hiding */
+    allowColumnHiding?: boolean;
+    /** count of currently visible columns */
+    numVisibleColumns: number;
+    /** column resizing reset function callback from useTable */
+    resetResizing: () => void;
+    /** filter setter from useTable */
+    setAllFilters: (updater: Filters<any> | ((filters: Filters<any>) => Filters<any>)) => void;
+    /** Pass through of the style prop to the table options Dropdown */
+    style: React.CSSProperties;
+}
+/**
+ * The OptionsMenu component adds a sectioned list menu to the Table component.
+ * It inherits the ability to reset column widths and filters from react-table's useTable hook
+ *
+ * @param props - the component props
+ */
+declare const OptionsMenu: FunctionComponent<OptionsMenuProps>;
+export default OptionsMenu;
+//# sourceMappingURL=options-menu.d.ts.map

package/dist/table/options-menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"options-menu.d.ts","sourceRoot":"","sources":["../../src/table/options-menu.tsx"],"names":[],"mappings":"AA4BA,OAAO,EAAE,iBAAiB,EAAkC,MAAM,OAAO,CAAC;AAE1E,OAAO,EAAE,cAAc,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AA6BtD,UAAU,gBAAgB;IACtB,2CAA2C;IAC3C,UAAU,EAAE,cAAc,CAAC,GAAG,CAAC,EAAE,CAAC;IAClC,4CAA4C;IAC5C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,yCAAyC;IACzC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,4DAA4D;IAC5D,aAAa,EAAE,MAAM,IAAI,CAAC;IAC1B,kCAAkC;IAClC,aAAa,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,OAAO,CAAC,GAAG,CAAC,KAAK,OAAO,CAAC,GAAG,CAAC,CAAC,KAAK,IAAI,CAAC;IAC3F,mEAAmE;IACnE,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;CAC9B;AAED;;;;;GAKG;AACH,QAAA,MAAM,WAAW,EAAE,iBAAiB,CAAC,gBAAgB,CA6GpD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/table/options-menu.js

@@ -0,0 +1,123 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Copyright 2023 Impulse Innovations Limited
+ *
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { autoUpdate, flip, shift, useClick, useDismiss, useFloating, useInteractions, useRole, } from '@floating-ui/react';
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { useCallback, useMemo, useState } from 'react';
+import ReactDOM from 'react-dom';
+import styled from '@darajs/styled-components';
+import SectionedList from '../sectioned-list/sectioned-list';
+import { List } from '../utils';
+const HeaderOptionsIcon = styled(FontAwesomeIcon) `
+    cursor: pointer;
+    align-items: center;
+    color: ${(props) => props.theme.colors.grey5};
+`;
+const HeaderOptions = styled.div `
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 12px;
+
+    background-color: ${(props) => props.theme.colors.grey3};
+`;
+const OptionsDropdownList = styled(List) `
+    background-color: ${(props) => props.theme.colors.background};
+    box-shadow: ${(props) => props.theme.shadow.light};
+`;
+/**
+ * The OptionsMenu component adds a sectioned list menu to the Table component.
+ * It inherits the ability to reset column widths and filters from react-table's useTable hook
+ *
+ * @param props - the component props
+ */
+const OptionsMenu = ({ allColumns, allowColumnHiding, numVisibleColumns, resetResizing, setAllFilters, style, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const toggleOptions = useCallback(() => {
+        setIsOpen((prev) => !prev);
+    }, []);
+    const onOptionSelect = useCallback((option) => {
+        option.onClick();
+        setIsOpen(false);
+    }, []);
+    const { refs, floatingStyles, context } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement: 'left-end',
+        middleware: [flip(), shift()],
+        whileElementsMounted: isOpen ? autoUpdate : undefined,
+    });
+    const interactions = useInteractions([
+        useClick(context, { event: 'mousedown' }),
+        useDismiss(context, { outsidePress: true, outsidePressEvent: 'mousedown' }),
+        useRole(context, { role: 'menu' }),
+    ]);
+    const resetFunctions = useMemo(() => {
+        const functions = {
+            items: [
+                {
+                    label: 'Reset Column Widths',
+                    onClick: resetResizing,
+                    value: 'resetResizing',
+                },
+                {
+                    label: 'Reset Filters',
+                    onClick: () => setAllFilters([]),
+                    value: 'resetFilters',
+                },
+            ],
+            label: 'Reset',
+        };
+        if (allowColumnHiding) {
+            functions.items.push({
+                label: 'Show All Columns',
+                onClick: () => {
+                    allColumns.forEach((column) => {
+                        if (!column.isVisible) {
+                            column.toggleHidden();
+                        }
+                    });
+                },
+                value: 'showAllColumns',
+            });
+        }
+        return functions;
+    }, [resetResizing, setAllFilters, allColumns, allowColumnHiding]);
+    const columnToggles = useMemo(() => {
+        return {
+            items: allColumns
+                .filter((column) => typeof column.Header === 'string')
+                .map((column) => ({
+                label: `${column.isVisible ? 'Hide' : 'Show'} ${String(column.Header)}`,
+                onClick: () => 
+                /* Don't allow last visible column to be hidden */
+                !(column.isVisible && numVisibleColumns === 1) ? column.toggleHidden() : null,
+                value: `${column.isVisible ? 'hide' : 'show'}${String(column.Header)}`,
+            })),
+            label: 'Columns',
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [allColumns, allowColumnHiding, numVisibleColumns]);
+    return (_jsxs(HeaderOptions, { ref: refs.setReference, children: [_jsx(HeaderOptionsIcon, { icon: faEllipsisV, onClick: toggleOptions }), ReactDOM.createPortal(_jsx(OptionsDropdownList, Object.assign({}, interactions.getFloatingProps({
+                ref: refs.setFloating,
+                style: Object.assign(Object.assign(Object.assign({}, floatingStyles), { maxHeight: 800, minWidth: 150, zIndex: 9999 }), style),
+            }), { isOpen: isOpen, children: _jsx(SectionedList, { items: allowColumnHiding ? [resetFunctions, columnToggles] : [resetFunctions], onSelect: onOptionSelect }, isOpen ? 'open' : 'closed') })), document.body)] }));
+};
+export default OptionsMenu;
+//# sourceMappingURL=options-menu.js.map

package/dist/table/options-menu.js.map

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

package/dist/table/render-row.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { HeaderGroup } from 'react-table';
+import { TableColumn } from './types';
+export declare const ROW_HEIGHT: number;
+export declare const shouldForwardProp: (prop: any) => boolean;
+type Props = {
+    data: {
+        backgroundColor: string;
+        currentEditCell: [number, string | number];
+        getItem: (index: number) => any;
+        headerGroups: Array<HeaderGroup<object>>;
+        mappedColumns: Array<TableColumn>;
+        onClickRow: (row: any) => void | Promise<void>;
+        prepareRow: (row: any) => void;
+        rows: Array<any>;
+        throttledClickRow: (row: any) => void | Promise<void>;
+        totalColumnsWidth: number;
+        width: number;
+    };
+    index: number;
+    style: React.CSSProperties;
+};
+declare const RenderRow: React.MemoExoticComponent<({ data: { width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns, }, index, style: renderRowStyle, }: Props) => JSX.Element>;
+export default RenderRow;
+//# sourceMappingURL=render-row.d.ts.map

package/dist/table/render-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-row.d.ts","sourceRoot":"","sources":["../../src/table/render-row.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAK1C,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAC;AAStC,eAAO,MAAM,UAAU,QAA6B,CAAC;AAGrD,eAAO,MAAM,iBAAiB,SAAU,GAAG,KAAG,OAAqD,CAAC;AAkGpG,KAAK,KAAK,GAAG;IACT,IAAI,EAAE;QACF,eAAe,EAAE,MAAM,CAAC;QACxB,eAAe,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;QAC3C,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;QAChC,YAAY,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,CAAC;QACzC,aAAa,EAAE,KAAK,CAAC,WAAW,CAAC,CAAC;QAClC,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAC/C,UAAU,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAC;QAC/B,IAAI,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC;QACjB,iBAAiB,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QACtD,iBAAiB,EAAE,MAAM,CAAC;QAC1B,KAAK,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC;CAC9B,CAAC;AAEF,QAAA,MAAM,SAAS,8NAiBR,KAAK,KAAG,GAAG,CAAC,OAAO,CAsGzB,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/dist/table/render-row.js

@@ -0,0 +1,163 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { transparentize } from 'polished';
+import * as React from 'react';
+import { areEqual } from 'react-window';
+import styled from '@darajs/styled-components';
+// Get the row height from the font size of the root element to respect rem units
+const { fontSize } = window.getComputedStyle(document.documentElement);
+export const ROW_HEIGHT = parseFloat(fontSize) * 2.5;
+// Prevents the isSorted or onClickRow prop being added to the dom element
+export const shouldForwardProp = (prop) => !['isSorted', 'onClickRow'].includes(prop);
+const Row = styled.div.withConfig({ shouldForwardProp }) `
+    cursor: ${(props) => (props.onClickRow ? 'pointer' : 'default')};
+    display: flex;
+
+    :hover {
+        div {
+            background-color: ${(props) => props.theme.colors.grey1};
+        }
+    }
+
+    :active,
+    :focus {
+        div {
+            background-color: ${(props) => props.theme.colors.grey2};
+        }
+    }
+`;
+const RowPlaceholder = styled(Row) `
+    position: absolute;
+    left: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+const CellPlaceholder = styled.div `
+    min-width: 80px;
+    height: 0.7rem;
+    margin: 0.5rem;
+
+    background: ${(props) => `linear-gradient(to right, ${props.theme.colors.grey2}, ${transparentize(0.2, props.theme.colors.grey3)}, ${props.theme.colors.grey2});`};
+    background-size: 50%;
+    border-radius: 0.5rem;
+
+    animation-name: ani-horizontal;
+    animation-duration: 3.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+
+    @keyframes ani-horizontal {
+        0% {
+            background-position: -100% 0;
+        }
+
+        100% {
+            background-position: 100% 0;
+        }
+    }
+`;
+const Cell = styled.div `
+    display: flex !important;
+    align-items: center;
+
+    min-width: 80px;
+    height: ${() => `${ROW_HEIGHT}px`};
+
+    color: ${(props) => props.theme.colors.grey6};
+
+    background-color: ${(props) => props.theme.colors.blue1};
+    border-bottom: 1px solid ${(props) => props.theme.colors.grey3};
+
+    :last-child {
+        border-right: 0;
+    }
+`;
+const CellContent = styled.span `
+    overflow: hidden;
+
+    width: 100%;
+    padding: 0 1rem;
+
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+/**
+ * Checks if the previous and next props are equal while also
+ * forcing a re-render if any column in any headerGroup is being resized
+ *
+ * @param {any} prevProps - The previous props.
+ * @param {any} nextProps - The next props.
+ * @returns {boolean} - Whether the props are equal.
+ */
+const arePropsEqual = (prevProps, nextProps) => {
+    var _a;
+    return areEqual(prevProps, nextProps) &&
+        !(((_a = nextProps.data) === null || _a === void 0 ? void 0 : _a.headerGroups) || []).some((headerGroup) => ((headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers) || []).some((header) => header.isResizing));
+};
+const RenderRow = React.memo(({ data: { width, currentEditCell, headerGroups, rows, prepareRow, getItem, totalColumnsWidth, onClickRow, throttledClickRow, backgroundColor, mappedColumns, }, index, style: renderRowStyle, }) => {
+    let row = rows[index];
+    if (getItem) {
+        const value = getItem(index);
+        // attempting to render a row which there's no data yet, make sure loading state is used
+        if (!value) {
+            row = null;
+        }
+        else {
+            row.original = value;
+            row.values = value;
+        }
+    }
+    if (!row) {
+        return (_jsx("div", { children: headerGroups.map((headerGroup, gidx) => (_jsx(RowPlaceholder, { style: {
+                    height: ROW_HEIGHT,
+                    top: (index + 1) * ROW_HEIGHT,
+                    width: totalColumnsWidth > width ? totalColumnsWidth : '100%',
+                }, children: headerGroup === null || headerGroup === void 0 ? void 0 : headerGroup.headers.map((col, cidx) => {
+                    const headerProps = col.getHeaderProps();
+                    // If width calc has messed up then use the raw width from the column
+                    const headerWidth = headerProps.style.width === 'NaNpx' ?
+                        mappedColumns[cidx].width
+                        : headerProps.style.width;
+                    return (_jsx(CellPlaceholder, { style: {
+                            maxWidth: col.maxWidth,
+                            width: headerWidth,
+                        } }, `col-${index}-${cidx}`));
+                }) }, `row-${gidx}`))) }));
+    }
+    prepareRow(row);
+    const onClick = () => {
+        if (onClickRow) {
+            throttledClickRow(row.original);
+        }
+    };
+    const _a = row.getRowProps({ style: renderRowStyle }), { style: rowStyle } = _a, restRow = __rest(_a, ["style"]);
+    return (_createElement(Row, Object.assign({}, restRow, { key: `row-${index}`, onClick: onClick, onClickRow: onClickRow, style: Object.assign(Object.assign({}, rowStyle), { top: (index + 1) * ROW_HEIGHT, width: totalColumnsWidth > width ? totalColumnsWidth : '100%' }) }), row.cells.map((cell, colIdx) => {
+        var _a;
+        const cellProps = cell.getCellProps();
+        return (_createElement(Cell, Object.assign({}, cellProps, { key: `cell-${index}-${colIdx}`, style: Object.assign(Object.assign({}, cellProps.style), { backgroundColor, justifyContent: mappedColumns[colIdx].align, maxWidth: (_a = cell.column) === null || _a === void 0 ? void 0 : _a.maxWidth, width: 
+                // If width calc has messed up then use the raw width from the column
+                cellProps.style.width === 'NaNpx' ?
+                    mappedColumns[colIdx].width
+                    : cellProps.style.width }) }),
+            _jsx(CellContent, { children: cell.render('Cell', {
+                    colIdx,
+                    currentEditCell,
+                    rowIdx: index,
+                }) })));
+    })));
+}, arePropsEqual);
+export default RenderRow;
+//# sourceMappingURL=render-row.js.map