@mailstep/design-system 0.9.3 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.9.3",
+  "version": "0.10.0",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",

package/ui/Blocks/CommonGrid/CommonGridContainer.js

@@ -5,6 +5,8 @@ import HidePrint from "../HidePrint/HidePrint.js";
 import { useModal } from "../Modal/hooks/useModal.js";
 import ActionHead_default from "./components/ActionHead/index.js";
 import { getFilters } from "./utils/index.js";
+import { clearShareParams } from "./utils/shareUrl/clearShareParams.js";
+import "./utils/shareUrl/index.js";
 import ControlButtons_default from "./components/ControlButtons/index.js";
 import { GridAggregation } from "./components/GridAggregation/GridAggregation.js";
 import "./components/GridAggregation/index.js";
@@ -13,6 +15,7 @@ import { GridModals } from "./components/GridModals/index.js";
 import MobileFilterModal from "./components/MobileFilterModal.js";
 import MobileSortModal from "./components/MobileSortModal.js";
 import TablePagination_default from "./components/TablePagination/index.js";
+import { useApplySharedGridState } from "./hooks/useApplySharedGridState.js";
 import useEditReadAsColumn from "./hooks/useEditReadAsColumn.js";
 import { useGridAutoRowsPerPage } from "./hooks/useGridAutoRowsPerPage.js";
 import useManageColumn from "./hooks/useManageColumn.js";
@@ -21,18 +24,18 @@ import { getExtendedExtraControlButtons } from "./utils/getExtendedExtraControlB
 import { getRowsPerPage } from "./utils/getRowsPerPage.js";
 import { hasSortTerminated } from "./utils/hasSortTerminated.js";
 import { BottomWrapper, CommonGridWithStyles, CommonGridWrap, ContentContainer, StyledButtonStrip } from "./styles.js";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/CommonGrid/CommonGridContainer.tsx
 const CommonGridContainer = (props) => {
-	const { optimizeFilters = false, extraControlButtons, onBatchAction, processCheckedValues, processCheckedValuesTitle, hideControlButtons, quickFilter, floatingButtonProps, queryRowsParam, customPaginationHandler, autoHeight = true, gridName, withPresets = true, withManageColumnButton = true, withPagination = true, withAggregation = true, allowSortingOnlyUnderTotalRows, onReload, ...passDownProps } = props;
+	const { optimizeFilters = false, extraControlButtons, onBatchAction, processCheckedValues, processCheckedValuesTitle, hideControlButtons, quickFilter, floatingButtonProps, queryRowsParam, customPaginationHandler, autoHeight = true, gridName, withPresets = true, withManageColumnButton = true, withPagination = true, withAggregation = true, withShare = true, allowSortingOnlyUnderTotalRows, onReload, ...passDownProps } = props;
 	const { gridActions, gridSelectors, rowsData, actionColumnDefinition } = passDownProps;
 	const extendedExtraControlButtons = useMemo(() => getExtendedExtraControlButtons(extraControlButtons, onReload), [extraControlButtons, onReload]);
 	const [displayManageColumnButton, setDisplayManageColumnButton] = useState(false);
 	const [activeColumnName, setActiveColumnName] = useState(null);
 	const gridRef = useRef(null);
-	const withButtonStrip = !!extendedExtraControlButtons?.length || !hideControlButtons || !!withPresets || !!withManageColumnButton;
+	const withButtonStrip = !!extendedExtraControlButtons?.length || !hideControlButtons || !!withPresets || !!withManageColumnButton || !!withShare;
 	const hasGroups = !!props.columnsDefinitions.find((col) => col.group);
 	const hasFilters = !!props.columnsDefinitions.find((col) => col.filtering);
 	const hasGroupsOrFilters = hasGroups || hasFilters;
@@ -48,6 +51,15 @@ const CommonGridContainer = (props) => {
 	const modifiedPassDownProps = useEditReadAsColumn(passDownProps);
 	const filters = useMemo(() => getFilters(optimizeFilters), [optimizeFilters]);
 	const columns = modifiedPassDownProps.columnsDefinitions;
+	useApplySharedGridState({
+		enabled: withShare,
+		columns,
+		gridActions
+	});
+	const onClearSettings = useCallback(() => {
+		clearShareParams();
+		gridActions.clearSettings?.();
+	}, [gridActions]);
 	const { onOpen: openManageColumnForm, isOpen: manageColumnFormVisible, onClose } = useModal();
 	const { columnsConfigValues, setColumnsConfigOptions, onConfirmForm, resetColumnConfig, handleDragEnd, onCloseForm, displayColumnsDefinitions, manageColumnsFormDefinitions } = useManageColumn({
 		columns,
@@ -87,7 +99,8 @@ const CommonGridContainer = (props) => {
 						withManageColumnButton,
 						onOpenMobileFilters: onOpenMobileFilter,
 						onOpenMobileSorting: onOpenMobileSort,
-						isSortTerminated
+						isSortTerminated,
+						withShare
 					})
 				}) }), /* @__PURE__ */ jsx(CommonGridWithStyles, {
 					...passDownProps,
@@ -185,7 +198,7 @@ const CommonGridContainer = (props) => {
 			handleUxChange: gridActions.handleUxChange,
 			onAsyncLoadFilterOptions: passDownProps.onAsyncLoadFilterOptions,
 			actionColumn: actionColumnDefinition,
-			onClearSettings: gridActions.clearSettings
+			onClearSettings
 		}),
 		isMobileSortOpen && gridActions.addSorting && /* @__PURE__ */ jsx(MobileSortModal, {
 			isShown: isMobileSortOpen,

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.d.ts

@@ -20,6 +20,7 @@ type Props = {
     onOpenMobileFilters?: () => void;
     onOpenMobileSorting?: () => void;
     isSortTerminated: boolean;
+    withShare?: boolean;
 };
 declare const ControlButtons: FC<Props>;
 export default ControlButtons;

package/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.js

@@ -8,17 +8,22 @@ import { H6 } from "../../../../Elements/Typography/Typography.js";
 import "../../../../Elements/Typography/index.js";
 import { isFilterActive } from "../../utils/index.js";
 import useQuickFilter from "../../hooks/useQuickFilter.js";
+import { useShareGrid } from "../../hooks/useShareGrid.js";
 import "../../types.js";
 import ExtraControlButtons_default from "../ExtraControlButtons/index.js";
 import QuickFilter_default from "../QuickFilter/index.js";
-import { ControlButtonsContainer, Left, Right, StyledColumnButton } from "./styles.js";
+import { ControlButtonsContainer, CopiedMessage, Left, Right, ShareButtonWrapper, StyledColumnButton } from "./styles.js";
 import { useEffect, useMemo } from "react";
 import { useColor, x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/CommonGrid/components/ControlButtons/ControlButtons.tsx
-const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quickFilter = "", columns, filters, hideControlButtons, displayManageColumnButton, openManageColumnForm, setDisplayManageColumnButton, onOpenPresetsModal, gridName, selectedPresetName, withPresets, withManageColumnButton, onOpenMobileFilters, onOpenMobileSorting, isSortTerminated }) => {
+const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quickFilter = "", columns, filters, hideControlButtons, displayManageColumnButton, openManageColumnForm, setDisplayManageColumnButton, onOpenPresetsModal, gridName, selectedPresetName, withPresets, withManageColumnButton, onOpenMobileFilters, onOpenMobileSorting, isSortTerminated, withShare }) => {
+	const { onShare, isCopied } = useShareGrid({
+		gridSelectors,
+		columns
+	});
 	const { searchedValue, translatedValue, onChangeInputValue, onClear, onClearSettings, onDisplayInput, displayInput, isMobileInputView, isMobile, filter } = useQuickFilter({
 		gridActions,
 		gridSelectors,
@@ -135,26 +140,44 @@ const ControlButtons = ({ extraControlButtons, gridActions, gridSelectors, quick
 				children: selectedPresetName
 			})
 		})] })
-	] }), /* @__PURE__ */ jsxs(Right, { children: [/* @__PURE__ */ jsx(ExtraControlButtons_default, {
-		extraControlButtons,
-		targetPosition: "top-right",
-		isMobile
-	}), displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
-		type: "button",
-		variant: "ghost",
-		appearance: "primary",
-		iconLeft: /* @__PURE__ */ jsx(Settings2, {}),
-		onClick: openManageColumnForm,
-		children: /* @__PURE__ */ jsx(H6, {
-			variant: "semiBold",
-			mt: 0,
-			mb: 0,
-			children: /* @__PURE__ */ jsx(Trans, {
-				id: "manageColumn.title",
-				message: "Manage column"
+	] }), /* @__PURE__ */ jsxs(Right, { children: [
+		/* @__PURE__ */ jsx(ExtraControlButtons_default, {
+			extraControlButtons,
+			targetPosition: "top-right",
+			isMobile
+		}),
+		withShare && !isMobile && /* @__PURE__ */ jsxs(ShareButtonWrapper, { children: [isCopied && /* @__PURE__ */ jsx(CopiedMessage, { children: /* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.share.copiedMessage",
+			message: "Grid url copied"
+		}) }), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			appearance: "secondary",
+			icon: isCopied ? "circleCheck" : "shareNodes",
+			iconFillColor: "iconStroke",
+			onClick: onShare,
+			title: i18n._({
+				id: "dataGrid.share.title",
+				message: "Share"
+			}),
+			"data-cy": "shareGridBtn"
+		})] }),
+		displayManageColumnButton && !isMobile && /* @__PURE__ */ jsx(StyledColumnButton, {
+			type: "button",
+			variant: "ghost",
+			appearance: "primary",
+			iconLeft: /* @__PURE__ */ jsx(Settings2, {}),
+			onClick: openManageColumnForm,
+			children: /* @__PURE__ */ jsx(H6, {
+				variant: "semiBold",
+				mt: 0,
+				mb: 0,
+				children: /* @__PURE__ */ jsx(Trans, {
+					id: "manageColumn.title",
+					message: "Manage column"
+				})
 			})
 		})
-	})] })] });
+	] })] });
 };
 //#endregion
 export { ControlButtons as default };

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.d.ts

@@ -1,4 +1,6 @@
 export declare const ControlButtonsContainer: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const Left: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const Right: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const ShareButtonWrapper: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
+export declare const CopiedMessage: import("styled-components").StyledComponent<"div", import("@xstyled/styled-components").Theme, {}, never>;
 export declare const StyledColumnButton: import("styled-components").StyledComponent<import("react").FC<import("../../../../Elements/Button/types").Props>, import("@xstyled/styled-components").Theme, {}, never>;

package/ui/Blocks/CommonGrid/components/ControlButtons/styles.js

@@ -17,12 +17,28 @@ const Left = styled$1.div`
 const Right = styled$1.div`
   display: flex;
 `;
+const ShareButtonWrapper = styled$1.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+`;
+const CopiedMessage = styled$1.div`
+  position: absolute;
+  bottom: calc(100% + 4px);
+  right: 0;
+  white-space: nowrap;
+  font-size: 10px;
+  line-height: 1;
+  font-weight: 600;
+  color: ${th$1("colors.iconStroke")};
+  background-color: ${th$1("colors.white")};
+  padding: 3px 5px;
+  border-radius: 4px;
+  box-shadow: tooltipShadow;
+  pointer-events: none;
+  z-index: 4;
+`;
 const StyledColumnButton = styled$1(Button)`
-  position: sticky;
-  right: 20px;
-  z-index: 3;
-  margin-left: 8px;
-
   > span > svg {
     stroke: ${th$1("colors.iconStroke")};
     width: 18px;
@@ -39,4 +55,4 @@ const StyledColumnButton = styled$1(Button)`
   }
 `;
 //#endregion
-export { ControlButtonsContainer, Left, Right, StyledColumnButton };
+export { ControlButtonsContainer, CopiedMessage, Left, Right, ShareButtonWrapper, StyledColumnButton };

package/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.js

@@ -7,10 +7,9 @@ import { Fragment, jsx } from "react/jsx-runtime";
 //#region packages/ui/Blocks/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.tsx
 const Row = styled$1.div`
   display: flex;
-  & > * {
-    margin-right: 12px;
-  }
+  gap: 8px;
   z-index: 2;
+  margin-right: 8px;
 `;
 const ControlButton = ({ hide, node, label, appearance, variant, disabled, onClick, onSelect, options, hideChevron, iconLeft, buttonProps }) => {
 	if (hide) return null;

package/ui/Blocks/CommonGrid/hooks/useApplySharedGridState.d.ts

@@ -0,0 +1,9 @@
+import type { ColumnDefinition, GridActionsType } from '../types';
+type Props = {
+    enabled: boolean;
+    columns: ColumnDefinition[];
+    gridActions: GridActionsType;
+};
+type HookType = (props: Props) => void;
+export declare const useApplySharedGridState: HookType;
+export {};

package/ui/Blocks/CommonGrid/hooks/useApplySharedGridState.js

@@ -0,0 +1,22 @@
+import { parseSharedGridState } from "../utils/shareUrl/parseSharedGridState.js";
+import "../utils/shareUrl/index.js";
+import { useEffect, useRef } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useApplySharedGridState.ts
+const useApplySharedGridState = ({ enabled, columns, gridActions }) => {
+	const appliedRef = useRef(false);
+	useEffect(() => {
+		if (!enabled || appliedRef.current) return;
+		const shared = parseSharedGridState({ columns });
+		if (!shared) return;
+		appliedRef.current = true;
+		if (shared.filter) gridActions.setFilters?.(shared.filter);
+		const [sort] = shared.sorting ?? [];
+		if (sort) gridActions.addSorting?.(sort.column, sort.direction);
+	}, [
+		enabled,
+		columns,
+		gridActions
+	]);
+};
+//#endregion
+export { useApplySharedGridState };

package/ui/Blocks/CommonGrid/hooks/useQuickFilter.d.ts

@@ -1,23 +1,26 @@
-import { ChangeEvent } from 'react';
-import { ColumnDefinition, CommonGridProps, FiltersConfig, GridActionsType, GridSelectorsType } from '../types';
+import { type ChangeEvent } from 'react';
+import { getTranslatedValue } from '../components/ManageColumnForm/utils';
+import { type ColumnDefinition, type CommonGridProps, type FiltersConfig, type GridActionsType, type GridSelectorsType } from '../types';
 type Props = {
     gridActions: GridActionsType;
     gridSelectors: GridSelectorsType;
     quickFilter?: CommonGridProps['quickFilter'];
     filter?: CommonGridProps['gridSelectors']['filter'];
-    columns?: ColumnDefinition<string>[];
+    columns?: Array<ColumnDefinition<string>>;
     filters?: FiltersConfig;
 };
-declare const useQuickFilter: ({ gridActions, gridSelectors, quickFilter, columns, filters }: Props) => {
+type UseQuickFilterReturn = {
     searchedValue: string;
-    translatedValue: import("react").ReactNode;
-    onChangeInputValue: (e: ChangeEvent<HTMLInputElement>) => void;
+    translatedValue: ReturnType<typeof getTranslatedValue>;
+    onChangeInputValue: (event: ChangeEvent<HTMLInputElement>) => void;
     onClearSettings: () => void;
     onDisplayInput: () => void;
     displayInput: boolean;
     onClear: () => void;
     isMobileInputView: boolean;
     isMobile: boolean;
-    filter: import("../types").Filtering | undefined;
+    filter: GridSelectorsType['filter'];
 };
+type HookType = (props: Props) => UseQuickFilterReturn;
+declare const useQuickFilter: HookType;
 export default useQuickFilter;

package/ui/Blocks/CommonGrid/hooks/useQuickFilter.js

@@ -1,6 +1,8 @@
 import { useCheckDeviceWidth } from "../../../utils/CheckDeviceWidth/checkDeviceWidth.js";
 import { getTranslatedValue } from "../components/ManageColumnForm/utils.js";
 import { createFilterType } from "../utils/index.js";
+import { clearShareParams } from "../utils/shareUrl/clearShareParams.js";
+import "../utils/shareUrl/index.js";
 import { useAddFilter } from "./useAddFilter.js";
 import { useCallback, useEffect, useState } from "react";
 //#region packages/ui/Blocks/CommonGrid/hooks/useQuickFilter.ts
@@ -14,9 +16,9 @@ const useQuickFilter = ({ gridActions, gridSelectors, quickFilter, columns, filt
 	const handleAddFilter = useAddFilter(addFilter);
 	const quickFilterValues = quickFilter ? filter?.[quickFilter]?.value : void 0;
 	const searchedColumnsDefinitions = columns?.find((item) => item.name === quickFilter) || null;
-	const filterType = createFilterType(searchedColumnsDefinitions || {});
+	const filterType = searchedColumnsDefinitions ? createFilterType(searchedColumnsDefinitions) : "text";
 	const filtersDefaultComparator = filters?.[filterType].defaultExtraProps?.defaultComparator || "eq";
-	const searchComparator = quickFilterValues && quickFilterValues.comparator || filtersDefaultComparator;
+	const searchComparator = quickFilterValues?.comparator || filtersDefaultComparator;
 	const isMobileInputView = isMobile && displayInput;
 	useEffect(() => {
 		if (quickFilterValues) setSearchedValue(quickFilterValues.value);
@@ -30,34 +32,29 @@ const useQuickFilter = ({ gridActions, gridSelectors, quickFilter, columns, filt
 		if (isMobile) setDisplayInput(false);
 		else setDisplayInput(true);
 	}, [isMobile]);
-	const onChangeInputValue = useCallback((e) => {
-		setSearchedValue(e.target.value);
-		const value = {
+	const applySearchValue = useCallback((newValue) => {
+		setSearchedValue(newValue);
+		if (searchedColumnsDefinitions) handleAddFilter({
 			comparator: searchComparator,
-			value: e.target.value
-		};
-		searchedColumnsDefinitions && handleAddFilter(value, searchedColumnsDefinitions);
+			value: newValue
+		}, searchedColumnsDefinitions);
 	}, [
-		setSearchedValue,
 		searchComparator,
 		handleAddFilter,
 		searchedColumnsDefinitions
 	]);
+	const onChangeInputValue = useCallback((event) => {
+		applySearchValue(event.target.value);
+	}, [applySearchValue]);
 	const onClear = useCallback(() => {
-		setSearchedValue("");
-		onChangeInputValue({ target: { value: "" } });
-		if (isMobile) setDisplayInput(false);
-		else setDisplayInput(true);
-	}, [
-		setSearchedValue,
-		isMobile,
-		onChangeInputValue,
-		setDisplayInput
-	]);
+		applySearchValue("");
+		setDisplayInput(!isMobile);
+	}, [applySearchValue, isMobile]);
 	const onDisplayInput = useCallback(() => {
 		setDisplayInput(true);
 	}, []);
 	const onClearSettings = useCallback(() => {
+		clearShareParams();
 		clearSettings?.();
 		setSearchedValue?.("");
 	}, [clearSettings, setSearchedValue]);

package/ui/Blocks/CommonGrid/hooks/useShareGrid.d.ts

@@ -0,0 +1,11 @@
+import type { ColumnDefinition, GridSelectorsType } from '../types';
+type Props = {
+    gridSelectors: GridSelectorsType;
+    columns?: ColumnDefinition[];
+};
+type HookType = (props: Props) => {
+    onShare: () => void;
+    isCopied: boolean;
+};
+export declare const useShareGrid: HookType;
+export {};

package/ui/Blocks/CommonGrid/hooks/useShareGrid.js

@@ -0,0 +1,37 @@
+import { buildShareUrl } from "../utils/shareUrl/buildShareUrl.js";
+import "../utils/shareUrl/index.js";
+import { useCallback, useEffect, useState } from "react";
+//#region packages/ui/Blocks/CommonGrid/hooks/useShareGrid.ts
+const useShareGrid = ({ gridSelectors, columns }) => {
+	const [isCopied, setIsCopied] = useState(false);
+	useEffect(() => {
+		if (!isCopied) return;
+		const timeoutId = setTimeout(() => {
+			setIsCopied(false);
+		}, 2e3);
+		return () => {
+			clearTimeout(timeoutId);
+		};
+	}, [isCopied]);
+	return {
+		onShare: useCallback(() => {
+			const url = buildShareUrl({
+				columns,
+				filter: gridSelectors.filter,
+				sorting: gridSelectors.sorting
+			});
+			navigator.clipboard?.writeText(url).then(() => {
+				setIsCopied(true);
+			}).catch(() => {
+				console.warn("CommonGrid: failed to copy share link to clipboard");
+			});
+		}, [
+			columns,
+			gridSelectors.filter,
+			gridSelectors.sorting
+		]),
+		isCopied
+	};
+};
+//#endregion
+export { useShareGrid };

package/ui/Blocks/CommonGrid/types.d.ts

@@ -314,6 +314,7 @@ export type GridProps = CommonGridProps & {
     withManageColumnButton?: boolean;
     withPagination?: boolean;
     withAggregation?: boolean;
+    withShare?: boolean;
     allowSortingOnlyUnderTotalRows?: [number, number];
     onReload?: () => void;
 };

package/ui/Blocks/CommonGrid/utils/shareUrl/buildShareUrl.d.ts

@@ -0,0 +1,10 @@
+import type { ColumnDefinition, Filtering, Sorting } from '../../types';
+export declare const enc: (value: string) => string;
+type BuildShareUrlProps = {
+    columns?: ColumnDefinition[];
+    filter?: Filtering;
+    sorting?: Sorting;
+};
+type BuildShareUrlType = (props: BuildShareUrlProps) => string;
+export declare const buildShareUrl: BuildShareUrlType;
+export {};

package/ui/Blocks/CommonGrid/utils/shareUrl/buildShareUrl.js

@@ -0,0 +1,66 @@
+import { getFilterName } from "../index.js";
+import { FILTERS_PARAM, SORT_PARAM } from "./constants.js";
+//#region packages/ui/Blocks/CommonGrid/utils/shareUrl/buildShareUrl.ts
+const enc = (value) => encodeURIComponent(value).replace(/\(/g, "%28").replace(/\)/g, "%29");
+const serializeValue = (value) => {
+	if (value == null || value === "") return null;
+	if (typeof value === "object" && !Array.isArray(value) && "value" in value) {
+		const entry = value;
+		if (entry.value == null || entry.value === "") return null;
+		return {
+			valueStr: enc(String(entry.value)),
+			comparator: entry.comparator ? enc(entry.comparator) : ""
+		};
+	}
+	if (Array.isArray(value)) {
+		if (!value.length) return null;
+		if (value.every((item) => item && typeof item === "object" && "value" in item)) {
+			const options = value;
+			return {
+				valueStr: options.map((option) => enc(String(option.value))).join(";"),
+				comparator: options[0]?.isNotEq ? "nin" : "in"
+			};
+		}
+		return {
+			valueStr: value.map((item) => enc(item instanceof Date ? item.toISOString() : String(item))).join(";"),
+			comparator: ""
+		};
+	}
+	return {
+		valueStr: enc(String(value)),
+		comparator: ""
+	};
+};
+const serializeAsyncLabels = (value) => {
+	if (!Array.isArray(value)) return null;
+	const labels = value.filter((item) => item && typeof item === "object" && "label" in item).map((item) => enc(String(item.label)));
+	return labels.length ? labels.join(";") : null;
+};
+const buildFilterGroup = (name, entry, column) => {
+	const serialized = serializeValue(entry?.value);
+	if (!serialized) return null;
+	const fields = [`name=${enc(name)}`, `value=${serialized.valueStr}`];
+	if (serialized.comparator) fields.push(`compar=${serialized.comparator}`);
+	if (column?.asyncLoadKey) {
+		const labels = serializeAsyncLabels(entry?.value);
+		if (labels) fields.push(`label=${labels}`);
+	}
+	return `(${fields.join(",")})`;
+};
+const buildShareUrl = ({ columns, filter, sorting }) => {
+	const filterGroups = Object.entries(filter ?? {}).map(([name, entry]) => buildFilterGroup(name, entry, columns?.find((col) => getFilterName(col) === name))).filter(Boolean);
+	const sort = sorting?.[0];
+	const sortGroup = sort?.column && sort.direction ? `(name=${enc(sort.column)},value=${enc(sort.direction)})` : "";
+	const url = new URL(window.location.href);
+	url.searchParams.delete(FILTERS_PARAM);
+	url.searchParams.delete(SORT_PARAM);
+	const parts = [];
+	const others = url.searchParams.toString();
+	if (others) parts.push(others);
+	if (filterGroups.length) parts.push(`${FILTERS_PARAM}=${filterGroups.join("-")}`);
+	if (sortGroup) parts.push(`${SORT_PARAM}=${sortGroup}`);
+	const query = parts.join("&");
+	return `${url.origin}${url.pathname}${query ? `?${query}` : ""}${url.hash}`;
+};
+//#endregion
+export { buildShareUrl, enc };

package/ui/Blocks/CommonGrid/utils/shareUrl/clearShareParams.d.ts

@@ -0,0 +1 @@
+export declare const clearShareParams: () => void;

package/ui/Blocks/CommonGrid/utils/shareUrl/clearShareParams.js

@@ -0,0 +1,12 @@
+import { FILTERS_PARAM, SORT_PARAM } from "./constants.js";
+//#region packages/ui/Blocks/CommonGrid/utils/shareUrl/clearShareParams.ts
+const clearShareParams = () => {
+	const url = new URL(window.location.href);
+	if (!["gridFilters", "gridSort"].some((key) => url.searchParams.has(key))) return;
+	url.searchParams.delete(FILTERS_PARAM);
+	url.searchParams.delete(SORT_PARAM);
+	const query = url.searchParams.toString();
+	window.history.replaceState(null, "", `${url.origin}${url.pathname}${query ? `?${query}` : ""}${url.hash}`);
+};
+//#endregion
+export { clearShareParams };

package/ui/Blocks/CommonGrid/utils/shareUrl/constants.d.ts

@@ -0,0 +1,5 @@
+export declare const FILTERS_PARAM = "gridFilters";
+export declare const SORT_PARAM = "gridSort";
+export declare const GROUP_SEPARATOR = "-";
+export declare const FIELD_SEPARATOR = ",";
+export declare const VALUE_SEPARATOR = ";";

package/ui/Blocks/CommonGrid/utils/shareUrl/constants.js

@@ -0,0 +1,8 @@
+//#region packages/ui/Blocks/CommonGrid/utils/shareUrl/constants.ts
+const FILTERS_PARAM = "gridFilters";
+const SORT_PARAM = "gridSort";
+const GROUP_SEPARATOR = "-";
+const FIELD_SEPARATOR = ",";
+const VALUE_SEPARATOR = ";";
+//#endregion
+export { FIELD_SEPARATOR, FILTERS_PARAM, GROUP_SEPARATOR, SORT_PARAM, VALUE_SEPARATOR };

package/ui/Blocks/CommonGrid/utils/shareUrl/index.d.ts

@@ -0,0 +1,4 @@
+export { buildShareUrl } from './buildShareUrl';
+export { clearShareParams } from './clearShareParams';
+export { parseSharedGridState } from './parseSharedGridState';
+export type { SharedGridState } from './parseSharedGridState';

package/ui/Blocks/CommonGrid/utils/shareUrl/index.js

@@ -0,0 +1,4 @@
+import { buildShareUrl } from "./buildShareUrl.js";
+import { clearShareParams } from "./clearShareParams.js";
+import { parseSharedGridState } from "./parseSharedGridState.js";
+export { buildShareUrl, clearShareParams, parseSharedGridState };

package/ui/Blocks/CommonGrid/utils/shareUrl/parseSharedGridState.d.ts

@@ -0,0 +1,13 @@
+import type { ColumnDefinition, Filtering, Sorting } from '../../types';
+export declare const dec: typeof decodeURIComponent;
+export type SharedGridState = {
+    filter?: Filtering;
+    sorting?: Sorting;
+};
+type ParseSharedGridStateProps = {
+    columns: ColumnDefinition[];
+    search?: string;
+};
+type ParseSharedGridStateType = (props: ParseSharedGridStateProps) => SharedGridState | null;
+export declare const parseSharedGridState: ParseSharedGridStateType;
+export {};

package/ui/Blocks/CommonGrid/utils/shareUrl/parseSharedGridState.js

@@ -0,0 +1,89 @@
+import { createFilterType, getFilterName } from "../index.js";
+import { FILTERS_PARAM, SORT_PARAM } from "./constants.js";
+//#region packages/ui/Blocks/CommonGrid/utils/shareUrl/parseSharedGridState.ts
+const dec = decodeURIComponent;
+const reconstructValue = (type, column, valuePart, comparator, labels) => {
+	if (type === "options") {
+		if (column.filterExtraProps?.isMulti) return valuePart.split(";").map((raw, index) => {
+			const optionValue = dec(raw);
+			return {
+				value: optionValue,
+				label: labels?.[index] ?? optionValue,
+				isNotEq: comparator === "nin"
+			};
+		});
+		return dec(valuePart);
+	}
+	if (type === "flag") return dec(valuePart);
+	if (type === "date") return valuePart.split(";").map(dec);
+	if (type === "number") return {
+		comparator: comparator || column.filterExtraProps?.defaultComparator || "eq",
+		value: dec(valuePart)
+	};
+	return {
+		comparator: comparator || column.filterExtraProps?.defaultComparator || "eq",
+		value: dec(valuePart)
+	};
+};
+const parseGroupFields = (group) => {
+	const inner = group.slice(1, -1);
+	const fields = {};
+	inner.split(",").forEach((pair) => {
+		const separatorIndex = pair.indexOf("=");
+		if (separatorIndex === -1) return;
+		fields[pair.slice(0, separatorIndex)] = pair.slice(separatorIndex + 1);
+	});
+	return fields;
+};
+const parseFilterGroup = (group, columns) => {
+	const fields = parseGroupFields(group);
+	const name = fields.name ? dec(fields.name) : "";
+	if (!name || fields.value == null) return null;
+	const column = columns.find((col) => getFilterName(col) === name);
+	if (!column) return null;
+	const type = createFilterType(column);
+	const comparator = fields.compar ? dec(fields.compar) : "";
+	const labels = fields.label ? fields.label.split(";").map(dec) : void 0;
+	const value = reconstructValue(type, column, fields.value, comparator, labels);
+	return {
+		name,
+		entry: {
+			value,
+			filterProps: {
+				type,
+				filterExtraProps: column.filterExtraProps || {},
+				computedValue: column.getFilterCriteria ? column.getFilterCriteria(value) : null
+			}
+		}
+	};
+};
+const parseSharedGridState = ({ columns, search }) => {
+	const params = new URLSearchParams(search ?? window.location.search);
+	const filtersRaw = params.get(FILTERS_PARAM);
+	const sortRaw = params.get(SORT_PARAM);
+	if (!filtersRaw && !sortRaw) return null;
+	const result = {};
+	if (filtersRaw) {
+		const filter = {};
+		(filtersRaw.match(/\(([^)]*)\)/g) ?? []).forEach((group) => {
+			const parsed = parseFilterGroup(group, columns);
+			if (parsed) filter[parsed.name] = parsed.entry;
+		});
+		if (Object.keys(filter).length) result.filter = filter;
+	}
+	if (sortRaw) {
+		const sortGroup = sortRaw.match(/\(([^)]*)\)/)?.[0];
+		if (sortGroup) {
+			const fields = parseGroupFields(sortGroup);
+			const column = fields.name ? dec(fields.name) : "";
+			const direction = fields.value ? dec(fields.value) : null;
+			if (column && (direction === "asc" || direction === "desc")) result.sorting = [{
+				column,
+				direction
+			}];
+		}
+	}
+	return Object.keys(result).length ? result : null;
+};
+//#endregion
+export { dec, parseSharedGridState };

package/ui/Elements/Icon/Icon.js

@@ -44,6 +44,7 @@ import { faHand } from "@fortawesome/pro-regular-svg-icons/faHand";
 import { faLink } from "@fortawesome/pro-regular-svg-icons/faLink";
 import { faLock } from "@fortawesome/pro-regular-svg-icons/faLock";
 import { faPenToSquare } from "@fortawesome/pro-regular-svg-icons/faPenToSquare";
+import { faShareNodes } from "@fortawesome/pro-regular-svg-icons/faShareNodes";
 import { faShareSquare } from "@fortawesome/pro-regular-svg-icons/faShareSquare";
 import { faSquareMinus } from "@fortawesome/pro-regular-svg-icons/faSquareMinus";
 import { faTrashCan } from "@fortawesome/pro-regular-svg-icons/faTrashCan";
@@ -170,6 +171,7 @@ const iconDictionary = {
 	shelves: faShelves,
 	reservation: faHandHoldingBox,
 	return: [faShareSquare, "horizontal"],
+	shareNodes: faShareNodes,
 	search: faSearch,
 	supplier: faTriangleExclamation$1,
 	transfer: faExchange,
@@ -261,8 +263,13 @@ const Icon = ({ icon, fill, stroke, style = "normal", size, width, height, class
 	]);
 	const flipProp = namedIcon && Array.isArray(namedIcon) && namedIcon[1] || void 0;
 	const IconComponent = icons_exports[icon];
+	const resolvedSize = size ?? width ?? height;
+	const faIconStyle = useMemo(() => {
+		if (onClick) return { cursor: cursor ?? "pointer" };
+		if (cursor) return { cursor };
+	}, [onClick, cursor]);
 	return /* @__PURE__ */ jsx(FaIconSizing, {
-		size: size ?? width ?? height,
+		size: resolvedSize,
 		className: className ?? "",
 		$colorSecondary: colorSecondary,
 		$fixedWidth: fixedWidth,
@@ -278,7 +285,7 @@ const Icon = ({ icon, fill, stroke, style = "normal", size, width, height, class
 			flip: flipProp,
 			icon: iconProp,
 			onClick,
-			style: onClick ? { cursor: cursor ?? "pointer" } : cursor ? { cursor } : void 0,
+			style: faIconStyle,
 			className: `faIcon ${fixedWidth ? "fa-fw" : ""} ${spinning ? "fa-spin" : ""}`
 		})
 	});

package/ui/Elements/Select/Select.js

@@ -57,9 +57,15 @@ const Select = ({ label, name, value = "", options = emptyOptions, defaultOption
 		localGetOptionValue,
 		resolveOption
 	]);
-	const unsetAllOptions = useCallback(() => {
-		if (typeof onChange === "function") onChange?.(emptyOptions);
-	}, [onChange]);
+	const unsetAllOptions = useCallback(({ options: optionsToRemove }) => {
+		const current = Array.isArray(selectedOption) ? selectedOption : selectedOption ? [selectedOption] : [];
+		const removeValues = new Set((optionsToRemove || []).map((option) => localGetOptionValue(option)));
+		handleChange(current.filter((selected) => !removeValues.has(localGetOptionValue(selected))));
+	}, [
+		handleChange,
+		selectedOption,
+		localGetOptionValue
+	]);
 	const icon = containerVariant === "search" && !placeholderIcon && placeholderIcon !== null ? "search" : placeholderIcon || void 0;
 	const modifiedMaxMenuHeight = showSelectAllButton && maxMenuHeight ? maxMenuHeight - 30 : maxMenuHeight;
 	const [customComponents, customTheme, customStyles] = useStylesAndComponents(style, optionVariant, multiLabelVariant, containerVariant, useSimplifiedOptions, showSelectAllButton);

package/ui/Elements/Select/components/SelectAll.d.ts

@@ -3,7 +3,9 @@ type Props = {
     onCustomSelectAll: ({ options }: {
         options?: Option[];
     }) => void;
-    onCustomDeselectAll: () => void;
+    onCustomDeselectAll: ({ options }: {
+        options?: Option[];
+    }) => void;
     value: SelectProps['value'];
     options: SelectProps['options'];
     maxMenuHeight: number;

package/ui/Elements/Select/components/SelectAll.js

@@ -33,7 +33,7 @@ const SelectAll = ({ onCustomSelectAll, onCustomDeselectAll, value, options, max
 			onCustomSelectAll({ options });
 		} else if (isSelected) {
 			setIsSelected(false);
-			onCustomDeselectAll();
+			onCustomDeselectAll({ options });
 		}
 	}, [
 		isSelected,

package/ui/utils/translations.js

@@ -252,6 +252,14 @@ const Translations = () => {
 			id: "dataGrid.sort",
 			message: "Sort"
 		}),
+		/* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.share.title",
+			message: "Share"
+		}),
+		/* @__PURE__ */ jsx(Trans, {
+			id: "dataGrid.share.copiedMessage",
+			message: "Grid url copied"
+		}),
 		/* @__PURE__ */ jsx(Trans, {
 			id: "dataGrid.presets.title",
 			message: "Presets"