@mailstep/design-system 0.10.0 → 0.10.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mailstep/design-system",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "license": "ISC",
   "type": "module",
   "main": "./ui/index.js",
@@ -45,10 +45,10 @@
     "@nivo/legends": "^0.73.0",
     "@nivo/pie": "^0.73.0",
     "@popperjs/core": "^2.11.8",
-    "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "10.4.6",
-    "@storybook/addon-links": "10.4.6",
-    "@storybook/react-webpack5": "10.4.6",
+    "@storybook/addon-designs": "^11.1.4",
+    "@storybook/addon-docs": "10.5.3",
+    "@storybook/addon-links": "10.5.3",
+    "@storybook/react-webpack5": "10.5.3",
     "@svgr/rollup": "^8.0.1",
     "@swc/core": "^1.15.30",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
@@ -80,7 +80,7 @@
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-perf": "^3.3.2",
-    "eslint-plugin-storybook": "10.4.6",
+    "eslint-plugin-storybook": "10.5.3",
     "faker": "^5.1.0",
     "husky": "^9.1.7",
     "immer": "^9.0.19",
@@ -105,7 +105,7 @@
     "react-use-draggable-scroll": "^0.4.7",
     "redux": ">=4.0.5",
     "reselect": "5.0.0-alpha.2",
-    "storybook": "10.4.6",
+    "storybook": "10.5.3",
     "string-width": "6.1.0",
     "styled-components": "^5.3.10",
     "swiper": "^11.0.3",

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

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

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

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

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

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

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

@@ -6,12 +6,16 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region packages/ui/Blocks/CommonGrid/components/GridAggregation/GridAggregation.tsx
 const GridAggregation = ({ rowsData, columns, activeColumnName }) => {
 	const [operation, setOperation] = useState("sum");
-	const { column, numericValues, operationOptions, selectedOption } = useGridAggregation({
+	const { column, isNumberFilter, numericValues, operationOptions, selectedOption } = useGridAggregation({
 		rowsData,
 		columns,
 		activeColumnName,
 		operation
 	});
+	const handleChange = useCallback((option) => {
+		if (option && "value" in option) setOperation(option.value);
+	}, []);
+	if (!isNumberFilter) return null;
 	return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(StyledSelect, { children: [/* @__PURE__ */ jsx(Select, {
 		name: "aggregationOperation",
 		menuPlacement: "top",
@@ -19,9 +23,7 @@ const GridAggregation = ({ rowsData, columns, activeColumnName }) => {
 		options: operationOptions,
 		value: operation,
 		isDarkPlaceholderText: true,
-		onChange: useCallback((option) => {
-			if (option && "value" in option) setOperation(option.value);
-		}, []),
+		onChange: handleChange,
 		title: selectedOption?.label,
 		disabled: !numericValues?.length,
 		isSearchable: false

package/ui/Blocks/CommonGrid/components/GridAggregation/hooks/useGridAggregation.d.ts

@@ -12,6 +12,7 @@ type Props = {
 };
 type UseGridAggregationType = (props: Props) => {
     column: ColumnDefinition | null;
+    isNumberFilter: boolean;
     numericValues: number[];
     operationOptions: OperationOptionType[];
     selectedOption: OperationOptionType | undefined;

package/ui/Blocks/CommonGrid/components/GridAggregation/hooks/useGridAggregation.js

@@ -13,11 +13,12 @@ const useGridAggregation = ({ rowsData, columns, activeColumnName, operation })
 		activeColumnName,
 		rowsData
 	]);
+	const isNumberFilter = column?.filteringType === "number";
 	const numericValues = useMemo(() => {
 		return rowsData?.map((row) => {
 			const value = get(activeColumnName || "", row);
-			const rowValue = column?.formatRowValue?.(row) || value;
-			return Number(rowValue);
+			const formatRowValue = column?.formatRowValue?.(row);
+			return Number(typeof formatRowValue === "string" || typeof formatRowValue === "number" ? formatRowValue : value);
 		}).filter((n) => Number.isFinite(n));
 	}, [
 		rowsData,
@@ -43,6 +44,7 @@ const useGridAggregation = ({ rowsData, columns, activeColumnName, operation })
 	}, [numericValues]);
 	return {
 		column,
+		isNumberFilter,
 		numericValues,
 		operationOptions,
 		selectedOption: useMemo(() => operationOptions.find((o) => o.value === operation), [operationOptions, operation])

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

@@ -1,8 +1,8 @@
 import Icon from "../../../../Elements/Icon/Icon.js";
 import React from "react";
 import styled$1 from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { th as th$1 } from "@xstyled/system";
 //#region packages/ui/Blocks/CommonGrid/components/IconList/IconList.tsx
 const List = styled$1.ul`
   background-color: white;

package/ui/Blocks/SideMenu/components/Footer.js

@@ -3,8 +3,8 @@ import { Paragraph4 } from "../../../Elements/Typography/Typography.js";
 import "../../../Elements/Typography/index.js";
 import { useCallback } from "react";
 import styled$1, { css } from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { th as th$1 } from "@xstyled/system";
 import { Trans } from "@lingui/react";
 //#region packages/ui/Blocks/SideMenu/components/Footer.tsx
 const FooterWrap = styled$1.div`

package/ui/Blocks/SideMenu/components/HamburgerMenu.js

@@ -2,8 +2,8 @@ import { HamburgerMenu } from "../../../Elements/Icon/icons/HamburgerMenu.js";
 import { MobileCancel } from "../../../Elements/Icon/icons/MobileCancel.js";
 import "react";
 import { css, useTheme, x } from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
 import { jsx } from "react/jsx-runtime";
+import { th as th$1 } from "@xstyled/system";
 import styled$2 from "styled-components";
 //#region packages/ui/Blocks/SideMenu/components/HamburgerMenu.tsx
 const HamburgerMenuWrapper = styled$2(x.div)`

package/ui/Elements/Button/styles.js

@@ -121,6 +121,7 @@ const StyledButton = styled$1.button`
       @media (hover: hover) {
         :hover {
           background-color: red20;
+          color: red70;
         }
       }
     }

package/ui/Elements/DatePicker/Datetime/components/Timepicker.js

@@ -3,8 +3,8 @@ import { FooterRow } from "./FooterRow.js";
 import { FooterRowLabel } from "./FooterRowLabel.js";
 import { useCallback, useEffect, useState } from "react";
 import styled$1, { x } from "@xstyled/styled-components";
-import { th as th$1 } from "@xstyled/system";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { th as th$1 } from "@xstyled/system";
 import { i18n } from "@lingui/core";
 //#region packages/ui/Elements/DatePicker/Datetime/components/Timepicker.tsx
 const Btn = styled$1.button`

package/ui/Elements/HighlightBox/HighlightBox.js

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

package/ui/Elements/Icon/Icon.js

@@ -1,6 +1,5 @@
 import { icons_exports } from "./icons/index.js";
 import { useMemo } from "react";
-import styled$1, { th, useTheme } from "@xstyled/styled-components";
 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,6 +114,7 @@ import { faWebhook } from "@fortawesome/pro-solid-svg-icons/faWebhook";
 import { faWineGlassCrack } from "@fortawesome/pro-solid-svg-icons/faWineGlassCrack";
 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 = {

package/ui/Elements/Pagination/styled.js

@@ -57,7 +57,7 @@ const PageBtn = styled$1.span`
   line-height: 1em;
 
   &:hover {
-    color: blue2;
+    color: red2;
   }
 `;
 //#endregion