@fast-simon/dashboard-utilities 1.0.1

package/dist/frontends/dashboard-utilities/src/utils/narrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"narrow.js","sourceRoot":"","sources":["../../../../../src/utils/narrow.ts"],"names":[],"mappings":"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","sourcesContent":["import type {Narrow, ServerNarrow} from \"../@types/narrow\";\r\n\r\nexport class NarrowParser {\r\n    toServerNarrow(narrow: Narrow) {\r\n        return Object.entries(narrow).reduce((previousValue, [name, values]) => {\r\n            values.forEach(value => previousValue.push([name, value]));\r\n\r\n            return previousValue;\r\n        }, [] as ServerNarrow[]);\r\n    }\r\n\r\n    static toReportingNarrow(narrow: Narrow) {\r\n        const reportingNarrow: [string, string[]][] = [];\r\n        if(narrow) {\r\n            for (const [key, values] of Object.entries(narrow)) {\r\n                reportingNarrow.push([key, Array.from(values)])\r\n            }\r\n        }\r\n        return {\r\n            narrow_by : reportingNarrow.length > 0 ? String(reportingNarrow) : undefined,\r\n            narrow_by_filters :reportingNarrow.length > 0 ? JSON.stringify(reportingNarrow) : undefined,\r\n        }\r\n    }\r\n\r\n    static isEqual(narrow1:Narrow, narrow2:Narrow) {\r\n        let isEqual = true;\r\n        const narrowArr = Object.entries(narrow1);\r\n        const prevNarrowArr = Object.entries(narrow2);\r\n        const areSetsEqual = (a: Set<string>, b: Set<string>) => a.size === b.size && [...a].every(value => b.has(value));\r\n        const combined = [...narrowArr, ...prevNarrowArr];\r\n        for(const item of combined) {\r\n            const name = item[0];\r\n            if(!narrow1?.[name] || !narrow2?.[name]) {\r\n                isEqual = false;\r\n            } else if (!areSetsEqual(narrow1?.[name], narrow2?.[name])) {\r\n                isEqual = false;\r\n            }\r\n        }\r\n        return isEqual;\r\n    }\r\n\r\n    toNarrow(narrow: ServerNarrow[]): Narrow {\r\n        return narrow.reduce((previousValue, currentValue) => {\r\n            const [name, value] = currentValue;\r\n            if (name in previousValue) {\r\n                previousValue[name].add(value);\r\n            } else {\r\n                previousValue[name] = new Set([value]);\r\n            }\r\n\r\n            return previousValue;\r\n        }, {} as Narrow);\r\n    }\r\n\r\n    stringify(narrow: Narrow) {\r\n        return Object.entries(narrow).reduce((previousValue, [key, values]) => {\r\n\r\n            return previousValue + (previousValue ? `,${key}:${[...values]}` : `${key}:${[...values]}`);\r\n        }, \"\")\r\n    }\r\n}\r\n\r\nexport function isInNarrow(narrow: Narrow, name: string, value?: string) {\r\n    if (value) {\r\n        return name in narrow && narrow[name].has(value);\r\n    }\r\n    return name in narrow;\r\n}\r\n\r\nexport function updateNarrow(narrow: Narrow, name: string, value: string) {\r\n    let newNarrow;\r\n\r\n    if (name in narrow) {\r\n        const copy = new Set(narrow[name]);\r\n        if (narrow[name].has(value)) {\r\n            copy.delete(value);\r\n        } else {\r\n            copy.add(value);\r\n        }\r\n\r\n        newNarrow = {\r\n            ...narrow,\r\n            [name]: copy\r\n        }\r\n    } else {\r\n        newNarrow = {\r\n            ...narrow,\r\n            [name]: new Set([value])\r\n        }\r\n    }\r\n\r\n    if (newNarrow[name] && newNarrow[name].size === 0) {\r\n        delete newNarrow[name];\r\n    }\r\n\r\n    return newNarrow;\r\n}\r\n\r\nexport function updateSingleNarrow(narrow: Narrow, name: string, value: string) {\r\n    let newNarrow;\r\n\r\n    if (name in narrow) {\r\n        if (!narrow[name].has(value)) {\r\n            newNarrow = {\r\n                ...narrow,\r\n                [name]: new Set([value])\r\n            }\r\n        } else {\r\n            const copy = {...narrow};\r\n            delete copy[name];\r\n            newNarrow = copy;\r\n        }\r\n    } else {\r\n        newNarrow = {\r\n            ...narrow,\r\n            [name]: new Set([value])\r\n        }\r\n    }\r\n\r\n    if (newNarrow[name] && newNarrow[name].size === 0) {\r\n        delete newNarrow[name];\r\n    }\r\n\r\n    return newNarrow;\r\n}"]}

package/dist/frontends/dashboard-utilities/src/utils/products.d.ts

@@ -0,0 +1,30 @@
+import { EditorProduct } from "../@types/editorProduct";
+export declare const ProductsUtils: {
+    /**
+     * Change the position of multiple products, starting from index a and moving n products to index b, in use for multiple product actions
+     * Use the splice method to extract and remove the products from their original positions, then use the splice method again to insert them into the new positions
+     * Time complexity O(n), where n is the number of elements in the array that being modified
+     * @param products - is the current products state
+     * @param startIndex - is the starting index
+     * @param numberOfProducts - is the number of products to move
+     * @param destIndex - is the destination index you want to insert the product into
+     **/
+    changeProductsPosition: (products: EditorProduct[], startIndex: number, numberOfProducts: number, destIndex: number) => EditorProduct[];
+    /**
+     * Change position of a single product
+     * Use the splice method to remove the product from its original position and insert it into the new position.
+     * time complexity O(n)
+     * @param gridItems - is the current products state
+     * @param oldIndex - is the index of the product to move
+     * @param newIndex - is the destination index
+     **/
+    changeProductPosition: (gridItems: EditorProduct[], oldIndex: number, newIndex: number) => EditorProduct[];
+    /**
+     * Add product (hidden/unpublished/promotile) to specific position in the products array
+     * Use the splice method to remove the product from its original position and insert it into the new position.
+     * @param products - is the current products state
+     * @param productToAdd - is the new product to add
+     * @param destIndex - is the destination index
+     **/
+    addProductToIndex: (products: EditorProduct[], productToAdd: EditorProduct, destIndex: number) => EditorProduct[];
+};

package/dist/frontends/dashboard-utilities/src/utils/products.js

@@ -0,0 +1,39 @@
+export const ProductsUtils = {
+    /**
+     * Change the position of multiple products, starting from index a and moving n products to index b, in use for multiple product actions
+     * Use the splice method to extract and remove the products from their original positions, then use the splice method again to insert them into the new positions
+     * Time complexity O(n), where n is the number of elements in the array that being modified
+     * @param products - is the current products state
+     * @param startIndex - is the starting index
+     * @param numberOfProducts - is the number of products to move
+     * @param destIndex - is the destination index you want to insert the product into
+     **/
+    changeProductsPosition: (products, startIndex, numberOfProducts, destIndex) => {
+        products.splice(destIndex - numberOfProducts + 1, 0, ...products.splice(startIndex, numberOfProducts));
+        return products;
+    },
+    /**
+     * Change position of a single product
+     * Use the splice method to remove the product from its original position and insert it into the new position.
+     * time complexity O(n)
+     * @param gridItems - is the current products state
+     * @param oldIndex - is the index of the product to move
+     * @param newIndex - is the destination index
+     **/
+    changeProductPosition: (gridItems, oldIndex, newIndex) => {
+        gridItems.splice(newIndex, 0, gridItems.splice(oldIndex, 1)[0]);
+        return gridItems;
+    },
+    /**
+     * Add product (hidden/unpublished/promotile) to specific position in the products array
+     * Use the splice method to remove the product from its original position and insert it into the new position.
+     * @param products - is the current products state
+     * @param productToAdd - is the new product to add
+     * @param destIndex - is the destination index
+     **/
+    addProductToIndex: (products, productToAdd, destIndex) => {
+        products.splice(destIndex, 0, productToAdd);
+        return products;
+    }
+};
+//# sourceMappingURL=products.js.map

package/dist/frontends/dashboard-utilities/src/utils/products.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"products.js","sourceRoot":"","sources":["../../../../../src/utils/products.ts"],"names":[],"mappings":"AAEA,MAAM,CAAC,MAAM,aAAa,GAAG;IAEzB;;;;;;;;QAQI;IACJ,sBAAsB,EAAE,CAAC,QAAyB,EAAE,UAAkB,EAAE,gBAAwB,EAAE,SAAiB,EAAE,EAAE;QACnH,QAAQ,CAAC,MAAM,CAAC,SAAS,GAAC,gBAAgB,GAAC,CAAC,EAAE,CAAC,EAAE,GAAG,QAAQ,CAAC,MAAM,CAAC,UAAU,EAAE,gBAAgB,CAAC,CAAC,CAAC;QACnG,OAAO,QAAQ,CAAC;IACpB,CAAC;IAED;;;;;;;QAOI;IACJ,qBAAqB,EAAE,CAAC,SAA0B,EAAE,QAAgB,EAAE,QAAgB,EAAE,EAAE;QACtF,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAChE,OAAO,SAAS,CAAC;IACrB,CAAC;IAED;;;;;;QAMI;IACJ,iBAAiB,EAAE,CAAC,QAAyB,EAAE,YAA2B,EAAE,SAAiB,EAAE,EAAE;QAC7F,QAAQ,CAAC,MAAM,CAAC,SAAS,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC;QAC5C,OAAO,QAAQ,CAAC;IACpB,CAAC;CAGJ,CAAA","sourcesContent":["import {EditorProduct} from \"../@types/editorProduct\";\r\n\r\nexport const ProductsUtils = {\r\n\r\n    /**\r\n     * Change the position of multiple products, starting from index a and moving n products to index b, in use for multiple product actions\r\n     * Use the splice method to extract and remove the products from their original positions, then use the splice method again to insert them into the new positions\r\n     * Time complexity O(n), where n is the number of elements in the array that being modified\r\n     * @param products - is the current products state\r\n     * @param startIndex - is the starting index\r\n     * @param numberOfProducts - is the number of products to move\r\n     * @param destIndex - is the destination index you want to insert the product into\r\n     **/\r\n    changeProductsPosition: (products: EditorProduct[], startIndex: number, numberOfProducts: number, destIndex: number) => {\r\n        products.splice(destIndex-numberOfProducts+1, 0, ...products.splice(startIndex, numberOfProducts));\r\n        return products;\r\n    },\r\n\r\n    /**\r\n     * Change position of a single product\r\n     * Use the splice method to remove the product from its original position and insert it into the new position.\r\n     * time complexity O(n)\r\n     * @param gridItems - is the current products state\r\n     * @param oldIndex - is the index of the product to move\r\n     * @param newIndex - is the destination index\r\n     **/\r\n    changeProductPosition: (gridItems: EditorProduct[], oldIndex: number, newIndex: number) => {\r\n        gridItems.splice(newIndex, 0, gridItems.splice(oldIndex, 1)[0]);\r\n        return gridItems;\r\n    },\r\n\r\n    /**\r\n     * Add product (hidden/unpublished/promotile) to specific position in the products array\r\n     * Use the splice method to remove the product from its original position and insert it into the new position.\r\n     * @param products - is the current products state\r\n     * @param productToAdd - is the new product to add\r\n     * @param destIndex - is the destination index\r\n     **/\r\n    addProductToIndex: (products: EditorProduct[], productToAdd: EditorProduct, destIndex: number) => {\r\n        products.splice(destIndex, 0, productToAdd);\r\n        return products;\r\n    }\r\n\r\n\r\n}"]}

package/dist/frontends/dashboard-utilities/src/utils/shopifyMarkets.d.ts

@@ -0,0 +1,3 @@
+export default class ShopifyMarkets {
+    static getCountry(): any;
+}

package/dist/frontends/dashboard-utilities/src/utils/shopifyMarkets.js

@@ -0,0 +1,7 @@
+export default class ShopifyMarkets {
+    static getCountry() {
+        var _a;
+        return (_a = window === null || window === void 0 ? void 0 : window.Shopify) === null || _a === void 0 ? void 0 : _a.country;
+    }
+}
+//# sourceMappingURL=shopifyMarkets.js.map

package/dist/frontends/dashboard-utilities/src/utils/shopifyMarkets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shopifyMarkets.js","sourceRoot":"","sources":["../../../../../src/utils/shopifyMarkets.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,OAAO,cAAc;IAChC,MAAM,CAAC,UAAU;;QACZ,OAAO,MAAC,MAAc,aAAd,MAAM,uBAAN,MAAM,CAAU,OAAO,0CAAE,OAAO,CAAC;IAC7C,CAAC;CACJ","sourcesContent":["export default class ShopifyMarkets {\r\n   static getCountry() {\r\n        return (window as any)?.Shopify?.country;\r\n    }\r\n}"]}

package/dist/frontends/dashboard-utilities/src/utils/useDragToSelect.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+interface Props {
+    areaRef: React.RefObject<HTMLDivElement>;
+    selectables: HTMLElement[];
+    areaId: string;
+    onSelectCommitted?: (selectedIDS: string[]) => void;
+    onSelect: (ids: Record<string, number>) => void;
+    isDragAndDropActive: boolean;
+    disabled?: boolean;
+    onDispatch: (key: string, value: any) => void;
+}
+export declare const useDragToSelect: ({ areaRef, selectables, areaId, onSelectCommitted, onSelect, isDragAndDropActive, disabled, onDispatch, }: Props) => void;
+export {};

package/dist/frontends/dashboard-utilities/src/utils/useDragToSelect.js

@@ -0,0 +1,177 @@
+import React, { useCallback, useEffect, useState } from "react";
+import DragSelect from "dragselect";
+export const useDragToSelect = ({ areaRef, selectables, areaId, onSelectCommitted, onSelect, isDragAndDropActive, disabled, onDispatch, }) => {
+    // const { state, dispatcher } = useVisualEditorContext();
+    const [dragselect, setDragSelect] = React.useState();
+    const [prevSelectables, setPrevSelectables] = useState([]);
+    const setSelected = useCallback((items) => {
+        const selected = items.map((el) => {
+            const wrapper = el.closest(".main-product-container") ||
+                el.querySelector(".main-product-container");
+            return {
+                id: wrapper === null || wrapper === void 0 ? void 0 : wrapper.getAttribute("product-id"),
+                pos: wrapper === null || wrapper === void 0 ? void 0 : wrapper.getAttribute("product-index"),
+            };
+        });
+        const ids = {};
+        selected.forEach((el) => {
+            const id = el.id.includes("_")
+                ? el.id.split("_")[1]
+                : String(el.id);
+            ids[id] = parseInt(el.pos);
+        });
+        onSelect(ids);
+    }, [onSelect]);
+    const onselect = (callback_object) => {
+        var _a;
+        if (window.isDragAndDropActive ||
+            (callback_object === null || callback_object === void 0 ? void 0 : callback_object.isDragging) ||
+            !((_a = callback_object.event) === null || _a === void 0 ? void 0 : _a.target) ||
+            callback_object.event.target.localName === "svg") {
+            return;
+        }
+        if (callback_object.event.target.classList.contains("material-symbols-outlined") ||
+            callback_object.event.target.className.includes("icon") ||
+            callback_object.event.target.className.includes("Tooltip")) {
+            return;
+        }
+        setSelected(callback_object.items);
+    };
+    const commit = (callback_object) => {
+        var _a, _b, _c;
+        // dispatcher.setIsDragToSelectActive(false);
+        onDispatch("setIsDragToSelectActive", false);
+        if ((callback_object === null || callback_object === void 0 ? void 0 : callback_object.isDragging) ||
+            window.isDragAndDropActive) {
+            const area = document.getElementById(areaId);
+            if (area) {
+                area.style.userSelect = "";
+                area.style.webkitUserSelect = "";
+            }
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.clearSelection();
+            return;
+        }
+        if ((_c = (_b = (_a = callback_object === null || callback_object === void 0 ? void 0 : callback_object.event) === null || _a === void 0 ? void 0 : _a.target) === null || _b === void 0 ? void 0 : _b.closest) === null || _c === void 0 ? void 0 : _c.call(_b, ".main-product-container")) {
+            return;
+        }
+        onselect(callback_object);
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.clearSelection();
+    };
+    const onSelectStart = (callback_object) => {
+        var _a, _b, _c, _d;
+        // dispatcher.setIsDragToSelectActive(true);
+        onDispatch("setIsDragToSelectActive", true);
+        if (!(callback_object === null || callback_object === void 0 ? void 0 : callback_object.isDragging) &&
+            !window.isDragAndDropActive &&
+            callback_object.items.length !== 1) {
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.clearSelection();
+        }
+        if (window.getSelection) {
+            (_b = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges) === null || _b === void 0 ? void 0 : _b.call(_a);
+        }
+        else if (document.getSelection) {
+            (_d = (_c = document.getSelection()) === null || _c === void 0 ? void 0 : _c.empty) === null || _d === void 0 ? void 0 : _d.call(_c);
+        }
+        const area = document.getElementById(areaId);
+        if (area) {
+            area.style.userSelect = "none";
+            area.style.webkitUserSelect = "none";
+        }
+    };
+    const onscroll = (callback_object) => {
+        var _a;
+        if (((_a = callback_object === null || callback_object === void 0 ? void 0 : callback_object.items) === null || _a === void 0 ? void 0 : _a.length) > 1 &&
+            !window.isDragAndDropActive) {
+            setSelected(callback_object.items);
+        }
+    };
+    useEffect(() => {
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.subscribe("dragmove", onselect);
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.subscribe("callback", commit);
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.subscribe("dragstart", onSelectStart);
+        dragselect === null || dragselect === void 0 ? void 0 : dragselect.subscribe("autoscroll", onscroll);
+        return () => {
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.unsubscribe("dragmove", onselect);
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.unsubscribe("callback", commit);
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.unsubscribe("dragstart", onSelectStart);
+            dragselect === null || dragselect === void 0 ? void 0 : dragselect.unsubscribe("autoscroll", onscroll);
+        };
+    }, [dragselect, setSelected]);
+    useEffect(() => {
+        const prevIds = prevSelectables.map((el) => {
+            const wrapper = el.closest(".main-product-container");
+            return wrapper === null || wrapper === void 0 ? void 0 : wrapper.getAttribute("product-id");
+        });
+        const currentIds = selectables.map((el) => {
+            const wrapper = el.closest(".main-product-container");
+            return wrapper === null || wrapper === void 0 ? void 0 : wrapper.getAttribute("product-id");
+        });
+        if (!dragselect && areaRef.current) {
+            if (onSelectCommitted) {
+                console.log("init dragselect");
+            }
+            setDragSelect(new DragSelect({
+                selectables: selectables,
+                area: document.getElementById(areaId),
+                autoScrollSpeed: 15,
+                overflowTolerance: { x: 0, y: 0 },
+            }));
+        }
+        else if (dragselect &&
+            JSON.stringify(prevIds) !== JSON.stringify(currentIds) &&
+            !isDragAndDropActive) {
+            dragselect.setSettings({
+                selectables: selectables,
+                overflowTolerance: { x: 0, y: 0 },
+            });
+            setPrevSelectables(selectables);
+        }
+    }, [selectables, areaRef, disabled, isDragAndDropActive]);
+    useEffect(() => {
+        const mousedownCallback = (e) => {
+            var _a;
+            if (e.target.closest("#page_top")) {
+                return;
+            }
+            if (e.target.closest(".actions-bar-container") ||
+                e.target.closest(".scroll-to-top-btn") ||
+                e.target.closest(".paste-button-container")) {
+                return;
+            }
+            if (!((_a = e.target) === null || _a === void 0 ? void 0 : _a.closest("#" + areaId))) {
+                // dispatcher.setIsCutting(false);
+                // dispatcher.setSelectedProducts([]);
+                onDispatch("setIsCutting", false);
+                onDispatch("setSelectedProducts", []);
+                onSelect({});
+            }
+        };
+        document.addEventListener("mousedown", mousedownCallback);
+        return () => {
+            document.removeEventListener("mousedown", mousedownCallback);
+        };
+    }, []);
+    useEffect(() => {
+        document.querySelectorAll(".ds-selector-area").forEach((el) => {
+            el.style.visibility = isDragAndDropActive ? "hidden" : "visible";
+        });
+    }, [isDragAndDropActive]);
+    useEffect(() => {
+        if (dragselect && disabled) {
+            dragselect.clearSelection();
+            dragselect.setSettings({
+                selectables: [],
+                area: document.createElement("div"),
+                overflowTolerance: { x: 0, y: 0 },
+            });
+        }
+        else if (dragselect && disabled === false) {
+            dragselect.setSettings({
+                selectables: selectables,
+                area: document.getElementById(areaId),
+                overflowTolerance: { x: 0, y: 0 },
+            });
+        }
+    }, [dragselect, disabled]);
+};
+//# sourceMappingURL=useDragToSelect.js.map

package/dist/frontends/dashboard-utilities/src/utils/useDragToSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDragToSelect.js","sourceRoot":"","sources":["../../../../../src/utils/useDragToSelect.ts"],"names":[],"mappings":"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","sourcesContent":["import React, { useCallback, useEffect, useMemo, useState } from \"react\";\nimport DragSelect from \"dragselect\";\nimport { useVisualEditorContext } from \"../../../../dashboard/dashboard-client/src/pages/LandingPages/editor/context/visualEditorContext\";\ninterface Props {\n    areaRef: React.RefObject<HTMLDivElement>;\n    selectables: HTMLElement[];\n    areaId: string;\n    onSelectCommitted?: (selectedIDS: string[]) => void;\n    onSelect: (ids: Record<string, number>) => void;\n    isDragAndDropActive: boolean;\n    disabled?: boolean;\n    onDispatch: (key: string, value: any) => void;\n}\nexport const useDragToSelect = ({\n    areaRef,\n    selectables,\n    areaId,\n    onSelectCommitted,\n    onSelect,\n    isDragAndDropActive,\n    disabled,\n    onDispatch,\n}: Props) => {\n    // const { state, dispatcher } = useVisualEditorContext();\n\n    const [dragselect, setDragSelect] = React.useState<DragSelect>();\n\n    const [prevSelectables, setPrevSelectables] = useState<HTMLElement[]>([]);\n\n    const setSelected = useCallback(\n        (items: HTMLElement[]) => {\n            const selected = items.map((el: HTMLElement) => {\n                const wrapper =\n                    el.closest(\".main-product-container\") ||\n                    el.querySelector(\".main-product-container\");\n                return {\n                    id: wrapper?.getAttribute(\"product-id\"),\n                    pos: wrapper?.getAttribute(\"product-index\"),\n                };\n            });\n            const ids: Record<string, number> = {};\n            selected.forEach((el: any) => {\n                const id = el.id.includes(\"_\")\n                    ? el.id.split(\"_\")[1]\n                    : String(el.id);\n                ids[id] = parseInt(el.pos);\n            });\n\n            onSelect(ids);\n        },\n        [onSelect]\n    );\n\n    const onselect = (callback_object: any) => {\n        if (\n            (window as any).isDragAndDropActive ||\n            callback_object?.isDragging ||\n            !callback_object.event?.target ||\n            callback_object.event.target.localName === \"svg\"\n        ) {\n            return;\n        }\n        if (\n            callback_object.event.target.classList.contains(\n                \"material-symbols-outlined\"\n            ) ||\n            callback_object.event.target.className.includes(\"icon\") ||\n            callback_object.event.target.className.includes(\"Tooltip\")\n        ) {\n            return;\n        }\n\n        setSelected(callback_object.items);\n    };\n\n    const commit = (callback_object: any) => {\n        // dispatcher.setIsDragToSelectActive(false);\n        onDispatch(\"setIsDragToSelectActive\", false);\n        if (\n            callback_object?.isDragging ||\n            (window as any).isDragAndDropActive\n        ) {\n            const area = document.getElementById(areaId) as HTMLElement;\n            if (area) {\n                area.style.userSelect = \"\";\n                area.style.webkitUserSelect = \"\";\n            }\n            dragselect?.clearSelection();\n            return;\n        }\n        if (\n            callback_object?.event?.target?.closest?.(\".main-product-container\")\n        ) {\n            return;\n        }\n        onselect(callback_object);\n        dragselect?.clearSelection();\n    };\n\n    const onSelectStart = (callback_object: any) => {\n        // dispatcher.setIsDragToSelectActive(true);\n        onDispatch(\"setIsDragToSelectActive\", true);\n\n        if (\n            !callback_object?.isDragging &&\n            !(window as any).isDragAndDropActive &&\n            callback_object.items.length !== 1\n        ) {\n            dragselect?.clearSelection();\n        }\n        if (window.getSelection) {\n            window.getSelection()?.removeAllRanges?.();\n        } else if (document.getSelection) {\n            document.getSelection()?.empty?.();\n        }\n        const area = document.getElementById(areaId) as HTMLElement;\n        if (area) {\n            area.style.userSelect = \"none\";\n            area.style.webkitUserSelect = \"none\";\n        }\n    };\n\n    const onscroll = (callback_object: any) => {\n        if (\n            callback_object?.items?.length > 1 &&\n            !(window as any).isDragAndDropActive\n        ) {\n            setSelected(callback_object.items);\n        }\n    };\n\n    useEffect(() => {\n        dragselect?.subscribe(\"dragmove\", onselect);\n        dragselect?.subscribe(\"callback\", commit);\n        dragselect?.subscribe(\"dragstart\", onSelectStart);\n        dragselect?.subscribe(\"autoscroll\", onscroll);\n        return () => {\n            dragselect?.unsubscribe(\"dragmove\", onselect);\n            dragselect?.unsubscribe(\"callback\", commit);\n            dragselect?.unsubscribe(\"dragstart\", onSelectStart);\n            dragselect?.unsubscribe(\"autoscroll\", onscroll);\n        };\n    }, [dragselect, setSelected]);\n\n    useEffect(() => {\n        const prevIds = prevSelectables.map((el: HTMLElement) => {\n            const wrapper = el.closest(\".main-product-container\");\n            return wrapper?.getAttribute(\"product-id\");\n        });\n        const currentIds = selectables.map((el: HTMLElement) => {\n            const wrapper = el.closest(\".main-product-container\");\n            return wrapper?.getAttribute(\"product-id\");\n        });\n\n        if (!dragselect && areaRef.current) {\n            if (onSelectCommitted) {\n                console.log(\"init dragselect\");\n            }\n            setDragSelect(\n                new DragSelect({\n                    selectables: selectables as HTMLElement[],\n                    area: document.getElementById(areaId) as HTMLElement,\n                    autoScrollSpeed: 15,\n                    overflowTolerance: { x: 0, y: 0 },\n                })\n            );\n        } else if (\n            dragselect &&\n            JSON.stringify(prevIds) !== JSON.stringify(currentIds) &&\n            !isDragAndDropActive\n        ) {\n            dragselect.setSettings({\n                selectables: selectables as HTMLElement[],\n                overflowTolerance: { x: 0, y: 0 },\n            });\n            setPrevSelectables(selectables);\n        }\n    }, [selectables, areaRef, disabled, isDragAndDropActive]);\n\n    useEffect(() => {\n        const mousedownCallback = (e: any) => {\n            if (e.target.closest(\"#page_top\")) {\n                return;\n            }\n            if (\n                e.target.closest(\".actions-bar-container\") ||\n                e.target.closest(\".scroll-to-top-btn\") ||\n                e.target.closest(\".paste-button-container\")\n            ) {\n                return;\n            }\n            if (!e.target?.closest(\"#\" + areaId)) {\n                // dispatcher.setIsCutting(false);\n                // dispatcher.setSelectedProducts([]);\n                onDispatch(\"setIsCutting\", false);\n                onDispatch(\"setSelectedProducts\", []);\n                onSelect({});\n            }\n        };\n\n        document.addEventListener(\"mousedown\", mousedownCallback);\n        return () => {\n            document.removeEventListener(\"mousedown\", mousedownCallback);\n        };\n    }, []);\n\n    useEffect(() => {\n        document.querySelectorAll(\".ds-selector-area\").forEach((el: any) => {\n            el.style.visibility = isDragAndDropActive ? \"hidden\" : \"visible\";\n        });\n    }, [isDragAndDropActive]);\n\n    useEffect(() => {\n        if (dragselect && disabled) {\n            dragselect.clearSelection();\n            dragselect.setSettings({\n                selectables: [],\n                area: document.createElement(\"div\"),\n                overflowTolerance: { x: 0, y: 0 },\n            });\n        } else if (dragselect && disabled === false) {\n            dragselect.setSettings({\n                selectables: selectables as HTMLElement[],\n                area: document.getElementById(areaId) as HTMLElement,\n                overflowTolerance: { x: 0, y: 0 },\n            });\n        }\n    }, [dragselect, disabled]);\n};\n"]}

package/dist/icons/styles.module.css

@@ -0,0 +1,61 @@
+.svg {
+    fill: black;
+    transition: all ease-in-out 110ms;
+
+}
+
+.svg:hover {
+    fill: var(--primary-color);
+}
+
+.svgPath {
+    stroke: black;
+    transition: all ease-in-out 200ms;
+    stroke-width: 2;
+}
+
+.iconWrapper {
+    transition: all ease-in-out 200ms;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+}
+
+.iconWrapperForStrokedSvg:hover .svgPath {
+    stroke: var(--primary-color);
+}
+
+.iconWrapper:hover .svg {
+    fill: var(--primary-color);
+}
+
+.iconWrapperForStrokedSvg:hover .svg{
+    fill: var(--primary-color);
+}
+
+.iconWrapperForStrokedSvg {
+    transition: all ease-in-out 200ms;
+    width: 100%;
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+}
+
+.iconWrapper:hover .materialIcon {
+    color: var(--primary-color);
+}
+
+.materialIcon {
+    transition: all ease-in-out 200ms;
+    font-size: 26px;
+    font-variation-settings:
+            'FILL' 0,
+            'wght' 500,
+            'GRAD' 0,
+            'opsz' 48
+}

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@fast-simon/dashboard-utilities",
+  "version": "1.0.1",
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "build": "tsc -p tsconfig-build.json",
+    "prepublishOnly": "npm version patch && npm run build",
+    "postbuild": "copyfiles -u 2 src/components/**/*.css dist/components && copyfiles -u 2 src/icons/**/*.css dist/icons && copyfiles -u 2 src/assets/**/*.gif dist/assets"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@babel/core": "^7.20.12",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/modifiers": "^6.0.1",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
+    "@emotion/react": "11.4.1",
+    "@fast-simon/logger": "^1.0.0",
+    "@fast-simon/utilities": "^1.0.19",
+    "@radix-ui/react-accordion": "^1.1.1",
+    "@tippyjs/react": "^4.2.6",
+    "classnames": "^2.3.1",
+    "clsx": "^1.1.1",
+    "dragselect": "^2.7.4",
+    "fast-simon-sdk": "^1.2.60",
+    "lucide-react": "^0.223.0",
+    "moment": "^2.29.1",
+    "rc-slider": "^10.1.1",
+    "react-datepicker": "^4.10.0",
+    "react-select": "^5.2.1",
+    "tss-react": "^3.6.0",
+    "usehooks-ts": "^2.9.1",
+    "react-jss": "^10.6.0",
+    "react-loading-skeleton": "^2.2.0",
+    "react-multi-carousel": "^2.6.3",
+    "react-switch": "^6.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^18.13.0",
+    "@types/react": "^17.0.33",
+    "@types/react-datepicker": "^4.10.0",
+    "@types/react-dom": "^17.0.10",
+    "@types/react-modal": "^3.13.1",
+    "@types/react-router-dom": "^5.1.5",
+    "@vitejs/plugin-react": "^1.0.7",
+    "axios": "^0.24.0",
+    "copyfiles": "^2.4.1",
+    "dotenv": "^11.0.0",
+    "prettier": "^2.8.4",
+    "react": "^17.0.2",
+    "react-datepicker": "^4.10.0",
+    "react-dom": "^17.0.2",
+    "react-modal": "3.14.4",
+    "react-router-dom": "^5.2.0",
+    "rimraf": "^3.0.2",
+    "typescript": "^4.4.4",
+    "vite": "^2.7.2"
+  }
+}