@moda/om 19.8.2 → 19.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moda/om",
-  "version": "19.8.2",
+  "version": "19.9.0",
   "description": "Moda Operandi design system",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -27,7 +27,7 @@
     "commitlint": "commitlint",
     "compile": "rollup -c --bundleConfigAsCjs",
     "format": "prettier --write '**/*'",
-    "lint": "eslint src --ext .tsx,.ts --fix",
+    "lint": "eslint src",
     "lint-staged": "lint-staged",
     "postpublish": "pinst --enable",
     "predeploy:documentation": "NODE_ENV=production npm run build && cd documentation && npm install && npm run build",
@@ -50,102 +50,104 @@
     "react-router-dom": "^5.1.2"
   },
   "dependencies": {
-    "@moda/icons": "^5.24.0",
-    "@moda/tokens": "^5.9.70",
+    "@moda/icons": "^5.29.9",
+    "@moda/tokens": "^5.10.101",
     "@storybook/addon-styling": "^1.3.7",
-    "@types/classnames": "^2.3.0",
+    "@types/classnames": "^2.3.4",
     "classnames": "^2.5.1",
-    "credit-card-type": "^10.0.0",
-    "focus-visible": "^5.2.0",
+    "credit-card-type": "^10.0.1",
+    "focus-visible": "^5.2.1",
     "proportional-scale": "^4.0.0",
-    "react-focus-on": "^3.9.2",
+    "react-focus-on": "^3.9.4",
     "react-input-mask": "^2.0.4",
     "scroll-into-view-if-needed": "^3.1.0",
-    "storybook": "^8.0.1",
+    "storybook": "^8.3.6",
     "use-cursor": "^1.2.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.24.1",
-    "@babel/preset-env": "^7.24.1",
-    "@babel/preset-react": "^7.24.1",
-    "@babel/preset-typescript": "^7.24.1",
-    "@commitlint/cli": "^19.2.1",
-    "@commitlint/config-conventional": "^19.1.0",
+    "@babel/core": "^7.25.9",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-typescript": "^7.25.9",
+    "@commitlint/cli": "^19.5.0",
+    "@commitlint/config-conventional": "^19.5.0",
+    "@eslint/js": "^9.13.0",
     "@moda/rollup-plugin-postcss": "^4.0.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^28.0.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
-    "@storybook/addon-actions": "^8.0.1",
-    "@storybook/addon-essentials": "^8.0.1",
-    "@storybook/addon-links": "^8.0.1",
-    "@storybook/addon-mdx-gfm": "^8.0.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@storybook/addon-actions": "^8.3.6",
+    "@storybook/addon-essentials": "^8.3.6",
+    "@storybook/addon-links": "^8.3.6",
+    "@storybook/addon-mdx-gfm": "^8.3.6",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-viewport": "^8.0.1",
+    "@storybook/addon-viewport": "^8.3.6",
     "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
     "@storybook/addons": "^7.6.17",
-    "@storybook/react": "^8.0.1",
-    "@storybook/react-webpack5": "^8.0.1",
-    "@testing-library/jest-dom": "^6.4.2",
-    "@testing-library/react": "^16.0.0",
+    "@storybook/react": "^8.3.6",
+    "@storybook/react-webpack5": "^8.3.6",
+    "@testing-library/jest-dom": "^6.6.2",
+    "@testing-library/react": "^16.0.1",
     "@testing-library/user-event": "^14.5.2",
     "@types/cheerio": "^0.22.35",
-    "@types/credit-card-type": "^9.0.0",
-    "@types/jest": "^29.5.12",
-    "@types/ramda": "^0.30.0",
-    "@types/react": "^18.2.67",
-    "@types/react-dom": "^18.2.22",
+    "@types/credit-card-type": "^9.0.3",
+    "@types/jest": "^29.5.14",
+    "@types/ramda": "^0.30.2",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-input-mask": "^3.0.5",
     "@types/react-router-dom": "^5.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.3.1",
-    "@typescript-eslint/parser": "^7.3.1",
-    "autoprefixer": "^10.4.18",
-    "babel-loader": "^9.1.3",
-    "commitizen": "^4.3.0",
-    "css-loader": "^7.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "autoprefixer": "^10.4.20",
+    "babel-loader": "^9.2.1",
+    "commitizen": "^4.3.1",
+    "css-loader": "^7.1.2",
     "cz-conventional-changelog": "^3.3.0",
-    "eslint": "^8.57.0",
+    "eslint": "^9.13.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard-jsx": "^11.0.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-jest-dom": "^5.1.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-no-loops": "^0.3.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest-dom": "^5.4.0",
+    "eslint-plugin-jsx-a11y": "^6.10.1",
+    "eslint-plugin-no-loops": "^0.4.0",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-promise": "^7.0.0",
-    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-promise": "^7.1.0",
+    "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-testing-library": "^6.2.0",
-    "husky": "^9.0.11",
+    "eslint-plugin-testing-library": "^6.4.0",
+    "globals": "^15.11.0",
+    "husky": "^9.1.6",
     "identity-obj-proxy": "^3.0.0",
     "ignore-not-found-export-webpack-plugin": "^1.0.2",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-matchmedia-mock": "^1.1.0",
-    "lint-staged": "^15.2.2",
+    "lint-staged": "^15.2.10",
     "node-sass-package-importer": "^5.3.3",
     "pinst": "^3.0.0",
-    "postcss": "^8.4.36",
+    "postcss": "^8.4.47",
     "postcss-loader": "^8.1.1",
-    "prettier": "^3.2.5",
-    "ramda": "^0.30.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "prettier": "^3.3.3",
+    "ramda": "^0.30.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-router-dom": "^5.1.2",
-    "rollup": "^4.13.0",
+    "rollup": "^4.24.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-scss": "^4.0.0",
-    "sass": "^1.72.0",
-    "sass-loader": "^16.0.0",
-    "semantic-release": "^24.0.0",
+    "sass": "^1.80.4",
+    "sass-loader": "^16.0.2",
+    "semantic-release": "^24.1.3",
     "semantic-release-npm-github": "^5.0.0",
     "storybook-states": "^1.2.0",
     "style-loader": "^4.0.0",
-    "ts-jest": "^29.1.2",
-    "typescript": "^5.4.2",
+    "ts-jest": "^29.2.5",
+    "typescript": "^5.6.3",
+    "typescript-eslint": "^8.11.0",
     "waait": "^1.0.5",
-    "webpack": "^5.90.3",
+    "webpack": "^5.95.0",
     "webpack-cli": "^5.1.4"
   },
   "config": {

package/src/components/Checkbox/Checkbox.tsx

@@ -41,7 +41,7 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   const handleChange = useCallback(
     (event: React.ChangeEvent<HTMLInputElement>) => {
       if (typeof checked === 'undefined') setIsChecked(event.currentTarget.checked);
-      onChange && onChange(event);
+      onChange?.(event);
     },
     [onChange, checked]
   );

package/src/components/ColorSwatch/ColorSwatch.tsx

@@ -40,14 +40,14 @@ export const ColorSwatch: React.FC<ColorSwatchProps> = ({
 }) => {
   const handleClick = useCallback(
     (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      onClick && onClick(color, title);
+      onClick?.(color, title);
     },
     [color, title, onClick]
   );
 
   const handleMouseEnter = useCallback(
     (_event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
-      onMouseEnter && onMouseEnter(color, title);
+      onMouseEnter?.(color, title);
     },
     [color, title, onMouseEnter]
   );

package/src/components/Popover/Popover.tsx

@@ -69,7 +69,7 @@ export const Popover: React.FC<PopoverProps> = ({
 
   const handleMouseEnter = useCallback(() => {
     if (!open) {
-      timeout.current && clearTimeout(timeout.current);
+      if (timeout.current) clearTimeout(timeout.current);
       handleOpen();
     }
   }, [handleOpen, open]);
@@ -115,7 +115,11 @@ export const Popover: React.FC<PopoverProps> = ({
   useEffect(() => {
     if (open === undefined) return;
 
-    open ? handleOpen() : handleClose();
+    if (open) {
+      handleOpen();
+    } else {
+      handleClose();
+    }
   }, [handleClose, handleOpen, open]);
 
   const isOpen =

package/src/components/Select/MultiSelect.tsx

@@ -71,7 +71,7 @@ export const MultiSelect: React.FC<Props> = ({
   );
 
   useEffect(() => {
-    onChange && onChange(values);
+    onChange?.(values);
   }, [onChange, values]);
 
   return (

package/src/components/Select/Select.tsx

@@ -82,7 +82,7 @@ export const Select: React.FC<SelectProps> = ({
 
   const handleAutofill = useCallback(
     (value: string) => {
-      value && dispatch({ type: 'SELECT', payload: { value } });
+      if (value) dispatch({ type: 'SELECT', payload: { value } });
     },
     [dispatch]
   );

package/src/components/Select/SelectOption.tsx

@@ -25,7 +25,7 @@ export const SelectOption: React.FC<SelectOptionProps> = ({
   const handleClick = useCallback(
     (event: React.MouseEvent<HTMLLIElement>) => {
       event.preventDefault();
-      !option.disabled && onClick(option);
+      if (!option.disabled) onClick(option);
     },
     [onClick, option]
   );

package/src/components/Select/SelectOptions.tsx

@@ -51,12 +51,12 @@ export const SelectOptions: React.FC<SelectOptionsProps> = ({
 
   useEffect(() => {
     if (autoFocus) {
-      ref.current && ref.current.focus();
+      ref.current?.focus();
     }
   }, [autoFocus]);
 
   useUpdateEffect(() => {
-    onFocus && activeOption && onFocus(activeOption);
+    if (activeOption) onFocus?.(activeOption);
   }, [activeOption, onFocus]);
 
   return (

package/src/components/Select/useSelect.ts

@@ -78,7 +78,7 @@ export const useSelect = ({ value, defaultValue }: UseSelectProps) => {
   }, [handleKeyDown]);
 
   useUpdateEffect(() => {
-    value && dispatch({ type: 'SELECT', payload: { value } });
+    if (value) dispatch({ type: 'SELECT', payload: { value } });
   }, [value]);
 
   return { state, dispatch, Mode, selectRef };