@heymantle/litho 0.0.1

package/dist/esm/utilities/dates.js

@@ -0,0 +1,289 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { arEG, enGB, enUS } from "date-fns/locale";
+import dayjs from "dayjs";
+import quarterOfYear from "dayjs/plugin/quarterOfYear.js";
+dayjs.extend(quarterOfYear);
+export var isValidDate = function(date) {
+    return date && !isNaN(date.getTime());
+};
+export var DAY_FORMAT = "MMM D YYYY";
+export var DAY_TIME_FORMAT = "MMM D YYYY, h:mm A";
+export var TIME_FORMAT = "HH:mm";
+export var NOW = new Date();
+export var NOW_TODAY = dayjs(NOW).format(DAY_FORMAT);
+export var DATE_LOCALES = {
+    enUS: enUS,
+    enGB: enGB,
+    arEG: arEG
+};
+export var DATE_LOCALE_MAP = Object.entries({
+    enUS: [
+        "en-US",
+        "us",
+        "america"
+    ],
+    enGB: [
+        "en-GB",
+        "gb",
+        "uk"
+    ],
+    arEG: [
+        "ar-EG",
+        "egypt"
+    ]
+}).reduce(function(map, param) {
+    var _param = _sliced_to_array(param, 2), localeKey = _param[0], keys = _param[1];
+    var locale = DATE_LOCALES[localeKey];
+    keys.forEach(function(key) {
+        map[key] = locale;
+    });
+    return map;
+}, {});
+export var HOURLY_RANGE_PRESETS = [
+    {
+        id: "last_30_minutes",
+        label: "Last 30 minutes",
+        value: {
+            start: dayjs().startOf("minute").subtract(29, "minutes").toDate(),
+            end: dayjs().endOf("minute").toDate()
+        }
+    },
+    {
+        id: "last_60_minutes",
+        label: "Last 60 minutes",
+        value: {
+            start: dayjs().startOf("minute").subtract(59, "minutes").toDate(),
+            end: dayjs().endOf("minute").toDate()
+        }
+    }
+];
+export var RANGE_PRESETS = [
+    {
+        id: "today",
+        label: "Today",
+        value: {
+            start: dayjs().startOf("day").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "yesterday",
+        label: "Yesterday",
+        value: {
+            start: dayjs().subtract(1, "day").startOf("day").toDate(),
+            end: dayjs().subtract(1, "day").endOf("day").toDate()
+        }
+    },
+    {
+        id: "last_12_hours",
+        label: "Last 12 hours",
+        value: {
+            start: dayjs().subtract(11, "hours").startOf("hour").toDate(),
+            end: dayjs().endOf("hour").toDate()
+        }
+    },
+    {
+        id: "last_24_hours",
+        hideCalendar: true,
+        label: "Last 24 hours",
+        value: {
+            start: dayjs().subtract(23, "hours").startOf("hour").toDate(),
+            end: dayjs().endOf("hour").toDate()
+        }
+    },
+    {
+        id: "last_7_days",
+        label: "Last 7 days",
+        value: {
+            start: dayjs().subtract(6, "day").startOf("day").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "last_14_days",
+        label: "Last 14 days",
+        value: {
+            start: dayjs().subtract(13, "day").startOf("day").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "last_30_days",
+        label: "Last 30 days",
+        value: {
+            start: dayjs().subtract(29, "day").startOf("day").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "last_90_days",
+        label: "Last 90 days",
+        value: {
+            start: dayjs().subtract(89, "day").startOf("day").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "last_month",
+        label: "Last month",
+        value: {
+            start: dayjs().subtract(1, "month").startOf("month").toDate(),
+            end: dayjs().subtract(1, "month").endOf("month").toDate()
+        }
+    },
+    {
+        id: "last_12_months",
+        label: "Last 12 months",
+        value: {
+            start: dayjs().subtract(11, "month").startOf("month").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "last_24_months",
+        label: "Last 24 months",
+        value: {
+            start: dayjs().subtract(23, "month").startOf("month").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "month_to_date",
+        label: "Month to date",
+        value: {
+            start: dayjs().startOf("month").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "quarter_to_date",
+        label: "Quarter to date",
+        value: {
+            start: dayjs().startOf("quarter").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "year_to_date",
+        label: "Year to date",
+        value: {
+            start: dayjs().startOf("year").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    },
+    {
+        id: "all_time",
+        label: "All time",
+        value: {
+            start: dayjs("2018-01-01").toDate(),
+            end: dayjs().endOf("day").toDate()
+        }
+    }
+];
+export var MONTHS = [
+    {
+        value: 0,
+        name: "January",
+        shortName: "Jan"
+    },
+    {
+        value: 1,
+        name: "February",
+        shortName: "Feb"
+    },
+    {
+        value: 2,
+        name: "March",
+        shortName: "Mar"
+    },
+    {
+        value: 3,
+        name: "April",
+        shortName: "Apr"
+    },
+    {
+        value: 4,
+        name: "May",
+        shortName: "May"
+    },
+    {
+        value: 5,
+        name: "June",
+        shortName: "Jun"
+    },
+    {
+        value: 6,
+        name: "July",
+        shortName: "Jul"
+    },
+    {
+        value: 7,
+        name: "August",
+        shortName: "Aug"
+    },
+    {
+        value: 8,
+        name: "September",
+        shortName: "Sep"
+    },
+    {
+        value: 9,
+        name: "October",
+        shortName: "Oct"
+    },
+    {
+        value: 10,
+        name: "November",
+        shortName: "Nov"
+    },
+    {
+        value: 11,
+        name: "December",
+        shortName: "Dec"
+    }
+];

package/dist/esm/utilities/useIndexResourceState.js

@@ -0,0 +1,158 @@
+"use client";
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _array_without_holes(arr) {
+    if (Array.isArray(arr)) return _array_like_to_array(arr);
+}
+function _iterable_to_array(iter) {
+    if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _non_iterable_spread() {
+    throw new TypeError("Invalid attempt to spread non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _to_consumable_array(arr) {
+    return _array_without_holes(arr) || _iterable_to_array(arr) || _unsupported_iterable_to_array(arr) || _non_iterable_spread();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useState, useCallback } from "react";
+var SelectionType = {
+    All: "all",
+    Page: "page",
+    Multi: "multi",
+    Single: "single",
+    Some: "some",
+    None: "none"
+};
+var defaultResourceIDResolver = function(resource) {
+    if ("id" in resource) {
+        return resource.id;
+    }
+    throw new Error("Your resource does not directly contain an `id`. Pass a `resourceIDResolver` to `useIndexResourceState`");
+};
+var useIndexResourceState = function(resources) {
+    var _ref = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : {}, tmp = _ref.selectedResources, initSelectedResources = tmp === void 0 ? [] : tmp, tmp1 = _ref.allResourcesSelected, initAllResourcesSelected = tmp1 === void 0 ? false : tmp1, _ref_resourceIDResolver = _ref.resourceIDResolver, resourceIDResolver = _ref_resourceIDResolver === void 0 ? defaultResourceIDResolver : _ref_resourceIDResolver, _ref_resourceFilter = _ref.resourceFilter, resourceFilter = _ref_resourceFilter === void 0 ? undefined : _ref_resourceFilter;
+    var _useState = _sliced_to_array(useState(initSelectedResources), 2), selectedResources = _useState[0], setSelectedResources = _useState[1];
+    var _useState1 = _sliced_to_array(useState(initAllResourcesSelected), 2), allResourcesSelected = _useState1[0], setAllResourcesSelected = _useState1[1];
+    var handleSelectionChange = useCallback(function(selectionType, isSelecting, selection) {
+        if (selectionType === SelectionType.All) {
+            setAllResourcesSelected(isSelecting);
+        } else if (allResourcesSelected) {
+            setAllResourcesSelected(false);
+        }
+        switch(selectionType){
+            case SelectionType.None:
+                setSelectedResources([]);
+                break;
+            case SelectionType.Single:
+                setSelectedResources(function(newSelectedResources) {
+                    return isSelecting ? _to_consumable_array(newSelectedResources).concat([
+                        selection
+                    ]) : newSelectedResources.filter(function(id) {
+                        return id !== selection;
+                    });
+                });
+                break;
+            case SelectionType.All:
+                if (resourceFilter) {
+                    var filteredResources = resources.filter(resourceFilter);
+                    setSelectedResources(isSelecting && selectedResources.length < filteredResources.length ? filteredResources.map(resourceIDResolver) : []);
+                } else {
+                    setSelectedResources(isSelecting ? resources.map(resourceIDResolver) : []);
+                }
+                break;
+            case SelectionType.Page:
+                setSelectedResources(resources.map(resourceIDResolver));
+                break;
+            case SelectionType.Multi:
+                if (!selection) break;
+                setSelectedResources(function(newSelectedResources) {
+                    var ids = [];
+                    var filteredResources = resourceFilter ? resources.filter(resourceFilter) : resources;
+                    for(var i = selection[0]; i <= selection[1]; i++){
+                        if (filteredResources.includes(resources[i])) {
+                            var id = resourceIDResolver(resources[i]);
+                            if (isSelecting && !newSelectedResources.includes(id) || !isSelecting && newSelectedResources.includes(id)) {
+                                ids.push(id);
+                            }
+                        }
+                    }
+                    return isSelecting ? _to_consumable_array(newSelectedResources).concat(_to_consumable_array(ids)) : newSelectedResources.filter(function(id) {
+                        return !ids.includes(id);
+                    });
+                });
+                break;
+        }
+    }, [
+        allResourcesSelected,
+        resourceFilter,
+        selectedResources.length,
+        resources,
+        resourceIDResolver
+    ]);
+    var clearSelection = useCallback(function() {
+        setSelectedResources([]);
+        setAllResourcesSelected(false);
+    }, []);
+    var removeSelectedResources = useCallback(function(removeResources) {
+        var newSelectedResources = selectedResources.filter(function(resource) {
+            return !removeResources.includes(resource);
+        });
+        setSelectedResources(newSelectedResources);
+        if (newSelectedResources.length === 0) {
+            setAllResourcesSelected(false);
+        }
+    }, [
+        selectedResources
+    ]);
+    return {
+        selectedResources: selectedResources,
+        allResourcesSelected: allResourcesSelected,
+        handleSelectionChange: handleSelectionChange,
+        clearSelection: clearSelection,
+        removeSelectedResources: removeSelectedResources
+    };
+};
+export { SelectionType, useIndexResourceState };

package/dist/esm/utilities/useMounted.js

@@ -0,0 +1,57 @@
+function _array_like_to_array(arr, len) {
+    if (len == null || len > arr.length) len = arr.length;
+    for(var i = 0, arr2 = new Array(len); i < len; i++)arr2[i] = arr[i];
+    return arr2;
+}
+function _array_with_holes(arr) {
+    if (Array.isArray(arr)) return arr;
+}
+function _iterable_to_array_limit(arr, i) {
+    var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"];
+    if (_i == null) return;
+    var _arr = [];
+    var _n = true;
+    var _d = false;
+    var _s, _e;
+    try {
+        for(_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true){
+            _arr.push(_s.value);
+            if (i && _arr.length === i) break;
+        }
+    } catch (err) {
+        _d = true;
+        _e = err;
+    } finally{
+        try {
+            if (!_n && _i["return"] != null) _i["return"]();
+        } finally{
+            if (_d) throw _e;
+        }
+    }
+    return _arr;
+}
+function _non_iterable_rest() {
+    throw new TypeError("Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _sliced_to_array(arr, i) {
+    return _array_with_holes(arr) || _iterable_to_array_limit(arr, i) || _unsupported_iterable_to_array(arr, i) || _non_iterable_rest();
+}
+function _unsupported_iterable_to_array(o, minLen) {
+    if (!o) return;
+    if (typeof o === "string") return _array_like_to_array(o, minLen);
+    var n = Object.prototype.toString.call(o).slice(8, -1);
+    if (n === "Object" && o.constructor) n = o.constructor.name;
+    if (n === "Map" || n === "Set") return Array.from(n);
+    if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _array_like_to_array(o, minLen);
+}
+import { useState, useEffect } from "react";
+export var useMounted = function() {
+    var _useState = _sliced_to_array(useState(), 2), mounted = _useState[0], setMounted = _useState[1];
+    // effects run only client-side
+    // so we can detect when the component is hydrated/mounted
+    // @see https://react.dev/reference/react/useEffect
+    useEffect(function() {
+        setMounted(true);
+    }, []);
+    return mounted;
+};

package/dist/esm/utilities/useTableScrollState.js

@@ -0,0 +1,132 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useDebouncedCallback } from "use-debounce";
+/**
+ * A custom hook to manage table scroll state and column widths.
+ *
+ * @param {Object} params - Parameters for the hook.
+ * @param {boolean} params.loading - Indicates if data is loading.
+ * @param {React.RefObject<HTMLDivElement>} params.containerRef - Reference to the container element.
+ * @param {React.RefObject<HTMLDivElement>} params.tableContainerRef - Reference to the table container element.
+ * @param {Function} params.setCanScrollLeft - Function to set the scrollable state on the left.
+ * @param {Function} params.setCanScrollRight - Function to set the scrollable state on the right.
+ * @param {Function} params.setColumnWidths - Function to set the column widths.
+ * @param {Function} params.setRowHeights - Function to set the row heights.
+ * @param {Function} params.setIsHeaderSticky - Function to set the sticky state of the header.
+ * @param {boolean} params.insideModal - Indicates if the table exists in a modal.
+ * @param {any} params.children - Table children elements (triggers recalculations).
+ */ var useTableScrollState = function(param) {
+    var loading = param.loading, idRef = param.idRef, containerRef = param.containerRef, tableContainerRef = param.tableContainerRef, setCanScrollLeft = param.setCanScrollLeft, setCanScrollRight = param.setCanScrollRight, setColumnWidths = param.setColumnWidths, setRowHeights = param.setRowHeights, setIsHeaderSticky = param.setIsHeaderSticky, stickyHeader = param.stickyHeader, children = param.children, showHoverStates = param.showHoverStates, insideModal = param.insideModal, itemCount = param.itemCount;
+    var columnWidthsRef = useRef([]);
+    var rowHeightsRef = useRef([]);
+    var styleSheetRef = useRef(null);
+    var root = document.documentElement;
+    var cssValue = getComputedStyle(root).getPropertyValue('--litho-table-header-sticky-at').trim();
+    var becomeStickyAt = parseInt(cssValue || 56, 10);
+    useEffect(function() {
+        if (!styleSheetRef.current) {
+            var styleElement = document.createElement("style");
+            document.head.appendChild(styleElement);
+            styleSheetRef.current = styleElement.sheet;
+        }
+    }, []);
+    useEffect(function() {
+        if (!tableContainerRef.current || !showHoverStates) return;
+        var container = containerRef.current;
+        var rows = container.querySelectorAll("tr[data-position]");
+        var handleMouseEnter = function(e) {
+            var interactive = e.currentTarget.getAttribute("data-interactive") === "true";
+            if (!interactive) return;
+            var tbody = e.currentTarget.closest("tbody");
+            if (!tbody) return;
+            var rows = Array.from(tbody.children).filter(function(row) {
+                return row.tagName === "TR";
+            });
+            var rowIndex = rows.indexOf(e.currentTarget) + 1;
+            if (styleSheetRef.current) {
+                while(styleSheetRef.current.cssRules.length){
+                    styleSheetRef.current.deleteRule(0);
+                }
+                styleSheetRef.current.insertRule('[data-id="'.concat(idRef.current, '"] tbody tr:nth-child(').concat(rowIndex, ") { background-color: var(--color-surface-higher); }"), 0);
+            }
+        };
+        var handleMouseLeave = function() {
+            if (styleSheetRef.current) {
+                while(styleSheetRef.current.cssRules.length){
+                    styleSheetRef.current.deleteRule(0);
+                }
+            }
+        };
+        rows.forEach(function(row) {
+            row.addEventListener("mouseenter", handleMouseEnter);
+            row.addEventListener("mouseleave", handleMouseLeave);
+        });
+        return function() {
+            rows.forEach(function(row) {
+                row.removeEventListener("mouseenter", handleMouseEnter);
+                row.removeEventListener("mouseleave", handleMouseLeave);
+            });
+        };
+    }, [
+        loading,
+        containerRef,
+        tableContainerRef,
+        itemCount
+    ]);
+    var updateScrollState = useCallback(function() {
+        if (!tableContainerRef.current) return;
+        var container = tableContainerRef.current;
+        requestAnimationFrame(function() {
+            var scrollLeft = container.scrollLeft, clientWidth = container.clientWidth, scrollWidth = container.scrollWidth;
+            setCanScrollLeft(scrollLeft > 0);
+            setCanScrollRight(scrollLeft + clientWidth + 4 < scrollWidth);
+            var firstRowCells = container.querySelectorAll("tbody > tr:first-child td");
+            var rowCells = container.querySelectorAll("tbody > tr");
+            columnWidthsRef.current = Array.from(firstRowCells).map(function(td) {
+                return td.offsetWidth;
+            });
+            rowHeightsRef.current = Array.from(rowCells).map(function(tr) {
+                return tr.getBoundingClientRect().height;
+            });
+            setColumnWidths(columnWidthsRef.current);
+            setRowHeights(rowHeightsRef.current);
+        });
+    }, [
+        tableContainerRef,
+        setCanScrollLeft,
+        setCanScrollRight,
+        setColumnWidths,
+        setRowHeights
+    ]);
+    var checkIfTableIsOutOfView = useCallback(function() {
+        if (!tableContainerRef.current || insideModal) return;
+        var rect = tableContainerRef.current.getBoundingClientRect();
+        var isOutOfView = rect.bottom <= becomeStickyAt + 36 || rect.top >= window.innerHeight;
+        setIsHeaderSticky(stickyHeader && !isOutOfView && rect.top <= becomeStickyAt);
+    }, [
+        tableContainerRef,
+        setIsHeaderSticky
+    ]);
+    var debouncedUpdateScrollState = useDebouncedCallback(updateScrollState, 30);
+    useEffect(function() {
+        if (!tableContainerRef.current) return;
+        var container = tableContainerRef.current;
+        container.addEventListener("scroll", debouncedUpdateScrollState);
+        window.addEventListener("resize", debouncedUpdateScrollState);
+        window.addEventListener("scroll", checkIfTableIsOutOfView);
+        updateScrollState();
+        return function() {
+            container.removeEventListener("scroll", debouncedUpdateScrollState);
+            window.removeEventListener("resize", debouncedUpdateScrollState);
+            window.removeEventListener("scroll", checkIfTableIsOutOfView);
+        };
+    }, [
+        debouncedUpdateScrollState,
+        updateScrollState,
+        children,
+        loading,
+        tableContainerRef.current,
+        becomeStickyAt
+    ]);
+    return updateScrollState;
+};
+export default useTableScrollState;