@mailstep/design-system 0.13.0-beta.1 → 0.13.1-beta.1

package/ui/Elements/DatePicker/utils/getInputFormat.d.ts

@@ -0,0 +1,3 @@
+type GetInputFormatType = (dateFormat?: boolean | string, timeFormat?: boolean | string) => string;
+export declare const getInputFormat: GetInputFormatType;
+export {};

package/ui/Elements/DatePicker/utils/getInputFormat.js

@@ -0,0 +1,10 @@
+//#region packages/ui/Elements/DatePicker/utils/getInputFormat.ts
+const getInputFormat = (dateFormat, timeFormat) => {
+	const date = typeof dateFormat === "string" ? dateFormat : "";
+	const time = typeof timeFormat === "string" ? timeFormat : "";
+	if (!date) return time;
+	if (!time) return date;
+	return `${date} ${time}`;
+};
+//#endregion
+export { getInputFormat };

package/ui/Elements/Dropdown/Dropdown.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { th } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Dropdown/Dropdown.tsx
 const ArrowInnerB = styled$1.div``;
 const ArrowInnerA = styled$1.div``;

package/ui/Elements/DropdownMenu/DropdownMenu.js

@@ -1,8 +1,8 @@
 import MenuItem from "./components/DefaultItem.js";
 import MenuList from "./components/MenuList.js";
 import "react";
-import styled$1 from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/DropdownMenu/DropdownMenu.tsx
 const StyledDropdownWrap = styled$1.div`
   width: fit-content;

package/ui/Elements/DropdownMenu/components/DefaultItem.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { css } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 //#region packages/ui/Elements/DropdownMenu/components/DefaultItem.tsx
 const StyledListItem = styled$1.li`
   padding: 8px 10px;

package/ui/Elements/DropdownMenu/components/MenuItem.js

@@ -1,7 +1,7 @@
 import Link from "../../Link/Link.js";
 import { useCallback } from "react";
-import styled$1, { css } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 import { useLocation } from "react-router";
 //#region packages/ui/Elements/DropdownMenu/components/MenuItem.tsx
 const StyledLink = styled$1(Link)`

package/ui/Elements/DropdownSelect/DropdownSelect.js

@@ -4,8 +4,8 @@ import { DropdownMenu } from "../DropdownMenu/DropdownMenu.js";
 import "../DropdownMenu/index.js";
 import Popover from "../../Blocks/Popover/index.js";
 import React, { useCallback, useRef } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/DropdownSelect/DropdownSelect.tsx
 const ArrowIcon = styled$1(Icon)`
   flex-shrink: 0;

package/ui/Elements/ErrorMessage/ErrorMessage.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { css, th } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { css, th } from "@xstyled/styled-components";
 //#region packages/ui/Elements/ErrorMessage/ErrorMessage.tsx
 const tooltip = css`
   span {

package/ui/Elements/HighlightBox/HighlightBox.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { useTheme } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { useTheme } from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Elements/HighlightBox/HighlightBox.tsx
 const StyledHighlightBox = styled$1.div`

package/ui/Elements/Icon/BadgeIcon.js

@@ -1,7 +1,7 @@
 import Icon from "./Icon.js";
 import { useMemo } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/Icon/BadgeIcon.tsx
 const Badge = styled$1(Icon)`
   display: inline-table;

package/ui/Elements/Icon/Icon.js

@@ -1,5 +1,6 @@
 import { icons_exports } from "./icons/index.js";
 import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { faFacebookF } from "@fortawesome/free-brands-svg-icons/faFacebookF";
 import { faInstagram } from "@fortawesome/free-brands-svg-icons/faInstagram";
@@ -115,7 +116,6 @@ import { faWineGlassCrack } from "@fortawesome/pro-solid-svg-icons/faWineGlassCr
 import { faXmark } from "@fortawesome/pro-solid-svg-icons/faXmark";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import styled$1, { th, useTheme } from "@xstyled/styled-components";
-import { jsx } from "react/jsx-runtime";
 //#region packages/ui/Elements/Icon/Icon.tsx
 const iconDictionary = {
 	greaterThan: faAngleRight,

package/ui/Elements/Line/Line.js

@@ -1,5 +1,5 @@
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/Line/Line.tsx
 const gabs = {
 	none: 0,

package/ui/Elements/Link/Link.js

@@ -1,8 +1,8 @@
 import { createRgba } from "../../utils/CreateRgba/createRgba.js";
 import "../../utils/index.js";
 import "react";
-import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { css, th, useTheme } from "@xstyled/styled-components";
 import { NavLink } from "react-router-dom";
 //#region packages/ui/Elements/Link/Link.tsx
 const StyledLink = styled$1(NavLink)`

package/ui/Elements/Logo/Logo.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import logoBlackImage from "./assets/mailship/logo_black.png";
 import logoMImage from "./assets/mailship/logo_m.png";
 import logoWhiteImage from "./assets/mailship/logo_white.png";

package/ui/Elements/Select/Select.js

@@ -6,8 +6,8 @@ import SpaceAround_default from "../SpaceAround/index.js";
 import { StyledAsyncSelect, StyledReactSelect, Wrapper } from "./styles.js";
 import { useStylesAndComponents } from "./themes/index.js";
 import { useCallback, useMemo, useRef } from "react";
-import { useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useTheme } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 //#region packages/ui/Elements/Select/Select.tsx
 const emptyOptions = [];

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

@@ -1,5 +1,5 @@
-import styled$1, { th } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th } from "@xstyled/styled-components";
 import { components } from "react-select";
 //#region packages/ui/Elements/Select/components/CountMultiValue.tsx
 const StyledNumber = styled$1.div`

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

@@ -1,7 +1,7 @@
 import { ArrowDown } from "../../Icon/icons/ArrowDown.js";
 import { ArrowUp } from "../../Icon/icons/ArrowUp.js";
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { components } from "react-select";
 //#region packages/ui/Elements/Select/components/DropdownIndicator.tsx
 const ChevronDiv = styled$1.div`

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

@@ -1,6 +1,6 @@
 import Icon from "../../Icon/Icon.js";
-import styled$1 from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { components } from "react-select";
 //#region packages/ui/Elements/Select/components/IconValueContainer.tsx
 const IconDiv = styled$1.div`

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

@@ -2,8 +2,8 @@ import Checkbox_default from "../../../Forms/Checkbox/Checkbox.js";
 import Toggle from "../../Toggle/Toggle.js";
 import SelectedIndicator from "./SelectedIndicator.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import styled$1, { th } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Elements/Select/components/SelectAll.tsx
 const SelectAllWrap = styled$1.div`

package/ui/Elements/SpaceAround/SpaceAround.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1, { css, th, useTheme, x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1, { css, th, useTheme, x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/SpaceAround/SpaceAround.tsx
 const Wrapper = styled$1(x.div)`
   width: ${({ $marginLeft, $marginRight }) => `calc(100% - ${$marginLeft || "0px"} - ${$marginRight || "0px"})`};

package/ui/Elements/Tag/stories/components/predefinedTags.js

@@ -1,7 +1,7 @@
 import Tag from "../../Tag.js";
 import { palettes } from "../../palettes.js";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Tag/stories/components/predefinedTags.tsx
 const PredefinedTags = () => {
 	return /* @__PURE__ */ jsx(x.div, {

package/ui/Elements/Text/Text.js

@@ -1,6 +1,6 @@
 import "react";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Text/Text.tsx
 const Text = ({ as = "span", ...props }) => /* @__PURE__ */ jsx(x.div, {
 	as,

package/ui/Elements/Toast/Toast.js

@@ -3,8 +3,8 @@ import "../Icon/index.js";
 import { toastIconFill, toastIconMap, toastTitleMap } from "./constants.js";
 import { CloseWrapper, Container, ContentWrapper, Text, Title } from "./styles.js";
 import { useEffect } from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Toast/Toast.tsx
 const Toast = ({ closeToast, title, text, type, autoClose }) => {
 	const icon = toastIconMap[type];

package/ui/Elements/Toggle/Toggle.js

@@ -3,8 +3,8 @@ import "../Label/index.js";
 import SpaceAroundWrap from "../SpaceAround/SpaceAround.js";
 import "../SpaceAround/index.js";
 import "react";
-import styled$1, { css } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 //#region packages/ui/Elements/Toggle/Toggle.tsx
 const isHorizontal = (position) => !!position && ["left", "right"].includes(position);
 const StyledSpaceAroundWrap = styled$1(SpaceAroundWrap)`

package/ui/Elements/Tooltip/Tooltip.js

@@ -2,8 +2,8 @@ import { Paragraph4 } from "../Typography/Typography.js";
 import "../Typography/index.js";
 import Popover from "../../Blocks/Popover/index.js";
 import { useRef, useState } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Elements/Tooltip/Tooltip.tsx
 const Container = styled$1.div`
   width: fit-content;

package/ui/Modules/CommonGrid/CommonGrid.d.ts

@@ -7,7 +7,7 @@ type Props = CommonGridProps & {
     displayColumnsDefinitions: ColumnDefinition[];
     hasGroups: boolean;
     hasFilters: boolean;
-    onCellClick?: (columnName: string) => void;
+    onSetActiveColumn?: (columnName: string) => void;
 };
 declare const CommonGrid: FC<Props>;
 export default CommonGrid;

package/ui/Modules/CommonGrid/CommonGrid.js

@@ -11,14 +11,14 @@ import useRowsKeyControls from "./hooks/useRowsKeyControls.js";
 import useUxReset from "./hooks/useUxReset.js";
 import { initialState } from "./store/index.js";
 import { useCallback, useMemo } from "react";
-import { x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/CommonGrid.tsx
 const rowsStyles = { outline: "none" };
 const defaultVoidFunction = (...args) => null;
 const defaultUxState = initialState.uxState;
 const defaultColumnsWidth = {};
-const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, onAsyncLoadFilterOptions, columnLayout = "normal", displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated, onCellClick }) => {
+const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridActions, isLoading, rowsData, hasColouredRows, actionColumnDefinition, allowRowSelect, allowRowSelectOnAction, onRowAction, onRowClick, onAsyncLoadFilterOptions, onSetActiveColumn, columnLayout = "normal", displayColumnsDefinitions, className, minColumnWidth, errorMessage, floatingButtonProps, hasGroups, hasFilters, isSortTerminated }) => {
 	const { uxState = defaultUxState, columnsWidth = defaultColumnsWidth, columnsWidthVariant, page = 1, filter, sorting, rowsPerPage = 10 } = gridSelectors;
 	const { clearUxState, handleUxChange, addFilter = defaultVoidFunction, addSorting = defaultVoidFunction, setColumnWidth = defaultVoidFunction } = gridActions;
 	const handleRowsKeyDown = useRowsKeyControls(rowsData, uxState, handleUxChange);
@@ -61,7 +61,8 @@ const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridAc
 						handleResizeDrag,
 						groups,
 						handleDragEnd,
-						isSortTerminated
+						isSortTerminated,
+						onCellClick: onSetActiveColumn
 					}),
 					hasFilters && /* @__PURE__ */ jsx(FilterRow, {
 						filters,
@@ -75,7 +76,8 @@ const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridAc
 						rowsData,
 						uxState,
 						handleUxChange,
-						onAsyncLoadFilterOptions
+						onAsyncLoadFilterOptions,
+						onCellClick: onSetActiveColumn
 					})
 				]
 			}), /* @__PURE__ */ jsx("div", {
@@ -94,7 +96,7 @@ const CommonGrid = ({ filters, comparators, handleDragEnd, gridSelectors, gridAc
 						onRowAction,
 						onUxChange: handleUxChange,
 						onRowClick,
-						onCellClick,
+						onCellClick: onSetActiveColumn,
 						columns: displayColumnsDefinitions,
 						displayColumnsWidth,
 						groups

package/ui/Modules/CommonGrid/CommonGridContainer.js

@@ -1,8 +1,8 @@
+import HidePrint from "../../Blocks/HidePrint/HidePrint.js";
+import { useModal } from "../../Blocks/Modal/hooks/useModal.js";
 import Pagination from "../../Elements/Pagination/Pagination.js";
 import "../../Elements/Pagination/index.js";
 import { useCheckDeviceWidth } from "../../utils/CheckDeviceWidth/checkDeviceWidth.js";
-import HidePrint from "../../Blocks/HidePrint/HidePrint.js";
-import { useModal } from "../../Blocks/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";
@@ -25,8 +25,8 @@ import { getRowsPerPage } from "./utils/getRowsPerPage.js";
 import { hasSortTerminated } from "./utils/hasSortTerminated.js";
 import { BottomWrapper, CommonGridWithStyles, CommonGridWrap, ContentContainer, StyledButtonStrip } from "./styles.js";
 import { useCallback, useMemo, useRef, useState } from "react";
-import { x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Modules/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, withShare = true, allowSortingOnlyUnderTotalRows, onReload, ...passDownProps } = props;
@@ -114,7 +114,7 @@ const CommonGridContainer = (props) => {
 					hasFilters,
 					hasGroups,
 					isSortTerminated,
-					onCellClick: setActiveColumnName,
+					onSetActiveColumn: setActiveColumnName,
 					hasColouredRows: true
 				})]
 			}), /* @__PURE__ */ jsxs(BottomWrapper, {

package/ui/Modules/CommonGrid/components/ActionHead/ActionHead.js

@@ -4,8 +4,8 @@ import { useGridActionTrigger } from "../../hooks/useGridActionTrigger.js";
 import { useToggleAllCheckbox } from "../../hooks/useToggleAllCheckbox.js";
 import ButtonMore from "../ButtonMore/ButtonMore.js";
 import { useCallback, useMemo } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/ActionHead/ActionHead.tsx

package/ui/Modules/CommonGrid/components/ActionHead/components/ActionDropdownMenu.js

@@ -1,6 +1,6 @@
 import "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Modules/CommonGrid/components/ActionHead/components/ActionDropdownMenu.tsx
 const StyledDropdownWrap = styled$1.div`

package/ui/Modules/CommonGrid/components/ActionHead/components/ActionDropdownSelect.js

@@ -2,8 +2,8 @@ import Icon from "../../../../../Elements/Icon/Icon.js";
 import Popover from "../../../../../Blocks/Popover/index.js";
 import ActionDropdownMenu from "./ActionDropdownMenu.js";
 import React, { memo, useRef } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/ActionHead/components/ActionDropdownSelect.tsx

package/ui/Modules/CommonGrid/components/ButtonMore/ButtonMore.js

@@ -3,8 +3,8 @@ import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js"
 import "../../../../Elements/DropdownMenu/index.js";
 import { useClickOutside } from "../../../../Blocks/Modal/hooks/useClickOutside.js";
 import { useCallback, useState } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/components/ButtonMore/ButtonMore.tsx
 const ButtonWrapper = styled$1.div`
   position: relative;

package/ui/Modules/CommonGrid/components/ColumnFilterCell.js

@@ -3,8 +3,8 @@ import { useAddFilter } from "../hooks/useAddFilter.js";
 import { Cell } from "./Table.js";
 import OverlayComponent from "./FilterDropdown.js";
 import React from "react";
-import { x } from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/components/ColumnFilterCell.tsx
 const ColumnFilterCell = ({ onChange, value, others, displayColumnWidth, filters, column: columnDefinition, group, comparators, actionColumn, rowsData, uxState, handleUxChange, onAsyncLoadFilterOptions }) => {
 	const cellSizeProps = getCellSizeProps(columnDefinition, displayColumnWidth);
@@ -28,6 +28,7 @@ const ColumnFilterCell = ({ onChange, value, others, displayColumnWidth, filters
 	return /* @__PURE__ */ jsx(Cell, {
 		className: cellClassName,
 		...cellSizeProps,
+		"data-column-name": columnDefinition.name,
 		children: /* @__PURE__ */ jsx(x.div, { children: /* @__PURE__ */ jsx(RenderComponent, {
 			asyncLoadKey: columnDefinition.asyncLoadKey,
 			"data-test": columnDefinition.name,
@@ -44,7 +45,7 @@ const ColumnFilterCell = ({ onChange, value, others, displayColumnWidth, filters
 			onAsyncLoadFilterOptions,
 			...filterConfig?.defaultExtraProps,
 			...columnDefinition.filterExtraProps,
-			...filterType == "options" && { options: columnDefinition.filterOptions },
+			...filterType === "options" && { options: columnDefinition.filterOptions },
 			columnWidth: cellSizeProps?.flexBasis
 		}) })
 	});

package/ui/Modules/CommonGrid/components/ColumnTitle/ColumnTitle.js

@@ -1,7 +1,7 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import { useCallback, useEffect, useRef, useState } from "react";
-import styled$1, { css, x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css, x } from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/components/ColumnTitle/ColumnTitle.tsx
 const WRAPPER_WIDTH = 35;
 const Wrap = styled$1.div`

package/ui/Modules/CommonGrid/components/ColumnTitle.js

@@ -1,7 +1,7 @@
 import { SortingDown, SortingUp } from "./icons/Sorting.js";
 import React from "react";
-import styled$1, { th, useTheme } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { th, useTheme } from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/components/ColumnTitle.tsx
 const Title = styled$1.span`
   & + * {

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

@@ -14,8 +14,8 @@ import ExtraControlButtons_default from "../ExtraControlButtons/index.js";
 import QuickFilter_default from "../QuickFilter/index.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 { useColor, x } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/ControlButtons/ControlButtons.tsx

package/ui/Modules/CommonGrid/components/DropdownButton/DropdownButton.js

@@ -6,8 +6,8 @@ import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js"
 import "../../../../Elements/DropdownMenu/index.js";
 import { useClickOutside } from "../../../../Blocks/Modal/hooks/useClickOutside.js";
 import React, { useCallback, useState } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Modules/CommonGrid/components/DropdownButton/DropdownButton.tsx
 const ButtonWrapper = styled$1.div`

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

@@ -2,8 +2,8 @@ import Button from "../../../../Elements/Button/Button.js";
 import ButtonMore from "../ButtonMore/ButtonMore.js";
 import DropdownSelect_default from "../../../../Elements/DropdownSelect/index.js";
 import "react";
-import styled$1, { x } from "@xstyled/styled-components";
 import { Fragment, jsx } from "react/jsx-runtime";
+import styled$1, { x } from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/components/ExtraControlButtons/ExtraControlButtons.tsx
 const Row = styled$1.div`
   display: flex;

package/ui/Modules/CommonGrid/components/FilterDropdown.js

@@ -1,6 +1,6 @@
 import React from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/components/FilterDropdown.tsx
 const OverlayWrapper = styled$1.div`
   position: absolute;

package/ui/Modules/CommonGrid/components/FilterRow.d.ts

@@ -13,6 +13,7 @@ type Props = {
     onAsyncLoadFilterOptions?: (key: string, value: string) => void;
     rowsData: RowProps[];
     uxState: UxState;
+    onCellClick?: (columnName: string) => void;
 };
 declare const FilterRow: FC<Props>;
 export default FilterRow;

package/ui/Modules/CommonGrid/components/FilterRow.js

@@ -1,14 +1,19 @@
 import { getFilterName } from "../utils/index.js";
 import { Row } from "./Table.js";
 import ColumnFilterCell from "./ColumnFilterCell.js";
+import { useCallback } from "react";
 import { jsx } from "react/jsx-runtime";
 import get from "lodash/fp/get";
 import throttle from "lodash/throttle";
 //#region packages/ui/Modules/CommonGrid/components/FilterRow.tsx
-const FilterRow = ({ columns, groups, actionColumn, onChange, filterValues = {}, displayColumnsWidth, filters, comparators, handleUxChange, onAsyncLoadFilterOptions, rowsData, uxState }) => {
+const FilterRow = ({ columns, groups, actionColumn, onChange, filterValues = {}, displayColumnsWidth, filters, comparators, handleUxChange, onAsyncLoadFilterOptions, onCellClick, rowsData, uxState }) => {
 	const handleOnChange = throttle(onChange, 500);
 	return /* @__PURE__ */ jsx(Row, {
 		className: "filterRow",
+		onMouseDown: useCallback((e) => {
+			const columnName = e.target.closest(".cell")?.dataset?.columnName;
+			if (columnName) onCellClick?.(columnName);
+		}, [onCellClick]),
 		children: columns.map((column, index) => /* @__PURE__ */ jsx(ColumnFilterCell, {
 			column,
 			actionColumn,

package/ui/Modules/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.js

@@ -1,7 +1,7 @@
 import { useToggleAllCheckbox } from "../../../hooks/useToggleAllCheckbox.js";
 import Checkbox_default from "../../../../../Forms/Checkbox/index.js";
-import { x } from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/components/Filters/ActionsFilter/ActionsFilter.tsx
 const ActionsFilter = ({ actionColumn, rowsData, uxState, handleUxChange }) => {
 	const [allChecked, toggleCheckbox] = useToggleAllCheckbox(rowsData, uxState, handleUxChange);

package/ui/Modules/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.js

@@ -4,8 +4,8 @@ import DatePicker_default from "../../../../../Elements/DatePicker/index.js";
 import { getCleanValues } from "./utils/getCleanValues.js";
 import { pickerRangeToString } from "./utils/pickerRangeToString.js";
 import React, { useCallback, useMemo, useState } from "react";
-import styled$1, { css } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import styled$1, { css } from "@xstyled/styled-components";
 import { i18n } from "@lingui/core";
 import { DateTime } from "luxon";
 //#region packages/ui/Modules/CommonGrid/components/Filters/DatePickerRange/DatePickerRange.tsx

package/ui/Modules/CommonGrid/components/FloatingButton/FloatingButton.js

@@ -2,8 +2,8 @@ import { DropdownMenu } from "../../../../Elements/DropdownMenu/DropdownMenu.js"
 import "../../../../Elements/DropdownMenu/index.js";
 import Popover from "../../../../Blocks/Popover/index.js";
 import { useCallback, useRef, useState } from "react";
-import styled$1 from "@xstyled/styled-components";
 import { jsx, jsxs } from "react/jsx-runtime";
+import styled$1 from "@xstyled/styled-components";
 //#region packages/ui/Modules/CommonGrid/components/FloatingButton/FloatingButton.tsx
 const FloatingWrapper = styled$1.div`
   display: block;

package/ui/Modules/CommonGrid/components/GridInfo/index.js

@@ -1,7 +1,7 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import "../../../../Elements/Icon/index.js";
-import { x } from "@xstyled/styled-components";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { x } from "@xstyled/styled-components";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Modules/CommonGrid/components/GridInfo/index.tsx
 const GridInfo = ({ isSortTerminatedAppeal, isSortTerminated }) => {

package/ui/Modules/CommonGrid/components/HeadCell.js

@@ -21,6 +21,7 @@ const HeadCell = ({ column, isDragDisabled, displayColumnsWidth, onResizeOut, on
 		transition,
 		transform: CSS.Transform.toString(transform),
 		ref: setNodeRef,
+		"data-column-name": column.name,
 		children: [/* @__PURE__ */ jsx(ColumnTitle_default, {
 			title: column?.title,
 			isSortable: !!column.sorting && !isSortTerminated,

package/ui/Modules/CommonGrid/components/HeadRow.d.ts

@@ -11,6 +11,7 @@ type HeadRowProps = {
     handleDragEnd: (event: DragEndEvent) => void;
     groups: Group[];
     isSortTerminated?: boolean;
+    onCellClick?: (columnName: string) => void;
 };
 declare const HeadRow: FC<HeadRowProps>;
 export default HeadRow;

package/ui/Modules/CommonGrid/components/HeadRow.js

@@ -2,7 +2,7 @@ import { getCellSizeProps, getStickyCollClassNames } from "../utils/index.js";
 import { Cell, Row } from "./Table.js";
 import ColumnTitle_default from "./ColumnTitle.js";
 import { HeadCell } from "./HeadCell.js";
-import React, { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { SortableContext, horizontalListSortingStrategy } from "@dnd-kit/sortable";
 import { DndContext, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
@@ -19,24 +19,28 @@ const getStickyComponent = (columns, stickyTo, displayColumnsWidth) => columns?.
 		})
 	}, column.name);
 });
-const HeadRow = ({ columns, onAddSort, handleDragEnd, sortingValues = [], displayColumnsWidth, columnLayout, handleResizeDrag, groups, isSortTerminated }) => {
+const HeadRow = ({ columns, onAddSort, handleDragEnd, sortingValues = [], displayColumnsWidth, columnLayout, handleResizeDrag, groups, isSortTerminated, onCellClick }) => {
 	const [showUIElements, setShowUIElements] = useState(false);
 	useEffect(() => {
 		setShowUIElements(true);
 	}, []);
 	const [isDragDisabled, setIsDragDisabled] = useState(false);
-	const onResizeOver = React.useCallback(() => {
+	const onResizeOver = useCallback(() => {
 		setIsDragDisabled(true);
 	}, [setIsDragDisabled]);
-	const onResizeOut = React.useCallback(() => {
+	const onResizeOut = useCallback(() => {
 		setIsDragDisabled(false);
 	}, [setIsDragDisabled]);
-	const onResize = React.useCallback((name) => (width) => {
+	const onResize = useCallback((name) => (width) => {
 		handleResizeDrag?.(name, width);
 	}, [handleResizeDrag]);
-	const onSetSort = React.useCallback((name, systemName) => (value) => {
+	const onSetSort = useCallback((name, systemName) => (value) => {
 		onAddSort?.(systemName || name, value);
 	}, [onAddSort]);
+	const onRowClick = useCallback((e) => {
+		const columnName = e.target.closest(".cell")?.dataset?.columnName;
+		if (columnName) onCellClick?.(columnName);
+	}, [onCellClick]);
 	const sensors = useSensors(useSensor(PointerSensor));
 	return /* @__PURE__ */ jsx(Fragment, { children: showUIElements && /* @__PURE__ */ jsx(DndContext, {
 		sensors,
@@ -47,6 +51,7 @@ const HeadRow = ({ columns, onAddSort, handleDragEnd, sortingValues = [], displa
 			strategy: horizontalListSortingStrategy,
 			children: /* @__PURE__ */ jsxs(Row, {
 				className: "headRow",
+				onMouseDown: onRowClick,
 				children: [
 					getStickyComponent(columns, "left", displayColumnsWidth),
 					columns.filter((item) => !item.sticky).map((column, index) => /* @__PURE__ */ jsx(HeadCell, {