sbwb-ds 3.31.0 → 3.32.0

package/dist/src/main/assets/icons/index.d.ts

@@ -215,3 +215,4 @@ export { default as Notifications } from './ant/notifications-off.svg';
 export { default as NotificationsFill } from './ant/notifications-off-fill.svg';
 export { default as PersonOff } from './ant/person-off.svg';
 export { default as PersonOffFill } from './ant/person-off-fill.svg';
+export { default as RemoveDone } from './ant/remove-done.svg';

package/dist/src/main/helpers/functions/icons.d.ts

@@ -7404,4 +7404,34 @@ export declare const Icons: {
         desc?: string;
         descId?: string;
     }>;
+    RemoveDoneAnt: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    RemoveDoneEl: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    RemoveDoneLg: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    RemoveDoneMd: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
+    RemoveDoneSm: import("react").FunctionComponent<import("react").SVGProps<SVGSVGElement> & {
+        title?: string;
+        titleId?: string;
+        desc?: string;
+        descId?: string;
+    }>;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "3.31.0",
+  "version": "3.32.0",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",
@@ -28,24 +28,16 @@
     ]
   },
   "dependencies": {
-    "@types/react-window": "^1.8.8",
     "color": "^4.2.3",
     "dotenv": "^16.0.3",
     "echarts": "^5.5.0",
     "framer-motion": "^12.6.2",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
-    "jest-transform-stub": "^2.0.0",
     "prismjs": "^1.29.0",
     "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.18.0",
     "react-mosaic-component": "^6.1.0",
-    "react-router-dom": "^6.9.0",
     "react-syntax-highlighter": "^15.5.0",
-    "sbwb-icons": "^1.18.0",
-    "svgo": "^2.6.4",
-    "ts-node": "^10.9.1",
-    "vite-plugin-svgr": "^4.3.0"
+    "sbwb-icons": "^1.19.0"
   },
   "devDependencies": {
     "@babel/core": "^7.21.3",
@@ -64,6 +56,7 @@
     "@types/jest": "^29.4.2",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
+    "@types/react-window": "^1.8.8",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^5.13.0",
     "@typescript-eslint/parser": "^5.0.0",
@@ -79,18 +72,26 @@
     "eslint-plugin-promise": "^6.1.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.13",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "jest-styled-components": "^7.2.0",
+    "jest-transform-stub": "^2.0.0",
     "lint-staged": "^13.2.0",
     "msw": "^1.1.0",
     "prettier": "^2.8.4",
+    "react-router-dom": "^6.9.0",
     "storybook": "^7.1.0",
     "styled-components": "^5.3.9",
+    "svgo": "^2.6.4",
+    "ts-node": "^10.9.1",
     "typescript": "^4.9.5",
-    "vite": "^4.2.1"
+    "vite": "^4.2.1",
+    "vite-plugin-svgr": "^4.3.0"
   },
   "peerDependencies": {
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": ">=6.0.0",
     "styled-components": ">=5"
   },
   "msw": {

package/src/main/assets/icons/ant/remove-done.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.1458 18.2083L12.25 13.3125L10.3542 15.2083L6.8125 11.6667L7.875 10.6042L10.3542 13.0833L11.1875 12.25L3 4.0625L4.0625 3L18.2083 17.1458L17.1458 18.2083ZM6.10417 15.2083L2.5625 11.6667L3.625 10.6042L6.04167 13.0208L7.16667 14.1458L6.10417 15.2083ZM14.375 11.1875L13.3125 10.125L16.375 7.0625L17.4375 8.125L14.375 11.1875ZM12.25 9.0625L11.1875 8L12.125 7.08333L13.1875 8.14583L12.25 9.0625Z" fill="black"/>
+</svg>

package/src/main/assets/icons/extraLarge/remove-done.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M35.9029 36.3333L24.5971 25L19.8471 29.75L10.4863 20.3887L12.4583 18.3887L19.8471 25.7779L22.5971 23.0279L4.90292 5.36124L6.875 3.36124L37.875 34.3612L35.9029 36.3333ZM11.9863 29.75L2.625 20.3887L4.59708 18.4167L11.9863 25.8054L13.9583 27.7779L11.9863 29.75ZM28.5138 21.0833L26.5417 19.1112L35.5971 10.0554L37.5971 12L28.5138 21.0833ZM24.5696 17.1387L22.5971 15.1667L27.7638 9.99999L29.7363 11.9721L24.5696 17.1387Z" fill="black"/>
+</svg>

package/src/main/assets/icons/index.ts

@@ -215,3 +215,4 @@ export { default as Notifications } from './ant/notifications-off.svg';
 export { default as NotificationsFill } from './ant/notifications-off-fill.svg';
 export { default as PersonOff } from './ant/person-off.svg';
 export { default as PersonOffFill } from './ant/person-off-fill.svg';
+export { default as RemoveDone } from './ant/remove-done.svg';

package/src/main/assets/icons/large/remove-done.svg

@@ -0,0 +1,3 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28.7223 29.0667L19.6776 20L15.8776 23.8L8.38898 16.311L9.96664 14.711L15.8776 20.6223L18.0776 18.4223L3.92231 4.289L5.49998 2.689L30.3 27.489L28.7223 29.0667ZM9.58898 23.8L2.09998 16.311L3.67764 14.7333L9.58898 20.6443L11.1666 22.2223L9.58898 23.8ZM22.811 16.8667L21.2333 15.289L28.4776 8.04433L30.0776 9.6L22.811 16.8667ZM19.6556 13.711L18.0776 12.1333L22.211 8L23.789 9.57766L19.6556 13.711Z" fill="black"/>
+</svg>

package/src/main/assets/icons/medium/remove-done.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.825 21.8L15.225 15.2L12.375 18.05L6.72495 12.4L8.12495 10.95L12.375 15.2L13.775 13.8L3.42495 3.45L4.82495 2L23.225 20.4L21.825 21.8ZM6.72495 18.05L1.07495 12.4L2.47495 11L6.72495 15.25L8.12495 16.65L6.72495 18.05ZM18.025 12.4L16.625 11L21.525 6.1L22.975 7.45L18.025 12.4ZM15.175 9.55L13.775 8.15L15.925 6L17.325 7.4L15.175 9.55Z" fill="black"/>
+</svg>

package/src/main/assets/icons/small/remove-done.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7167 14.5667L9.80005 10.65L8.28338 12.1667L5.45005 9.33333L6.30005 8.48333L8.28338 10.4667L8.95005 9.79999L2.40005 3.24999L3.25005 2.39999L14.5667 13.7167L13.7167 14.5667ZM4.88338 12.1667L2.05005 9.33333L2.90005 8.48333L4.83338 10.4167L5.73338 11.3167L4.88338 12.1667ZM11.5 8.94999L10.65 8.09999L13.1 5.64999L13.95 6.49999L11.5 8.94999ZM9.80005 7.24999L8.95005 6.39999L9.70005 5.66666L10.55 6.51666L9.80005 7.24999Z" fill="black"/>
+</svg>

package/src/main/helpers/functions/icons.ts

@@ -1482,6 +1482,12 @@ import PersonOffFillLg from '../../assets/icons/large/person-off-fill.svg?react'
 import PersonOffFillMd from '../../assets/icons/medium/person-off-fill.svg?react';
 import PersonOffFillSm from '../../assets/icons/small/person-off-fill.svg?react';
 
+import RemoveDoneAnt from '../../assets/icons/ant/remove-done.svg?react';
+import RemoveDoneEl from '../../assets/icons/extraLarge/remove-done.svg?react';
+import RemoveDoneLg from '../../assets/icons/large/remove-done.svg?react';
+import RemoveDoneMd from '../../assets/icons/medium/remove-done.svg?react';
+import RemoveDoneSm from '../../assets/icons/small/remove-done.svg?react';
+
 export const Icons = {
   ExpandedCircleDown,
   ExpandedCircleRight,
@@ -2717,4 +2723,9 @@ export const Icons = {
   PersonOffFillLg,
   PersonOffFillMd,
   PersonOffFillSm,
+  RemoveDoneAnt,
+  RemoveDoneEl,
+  RemoveDoneLg,
+  RemoveDoneMd,
+  RemoveDoneSm,
 };

package/src/presentation/components/atoms/Select/hooks/useSelect.tsx

@@ -1,10 +1,30 @@
 import { SelectOption } from '../../../../../models/select-option';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { Icons } from '../../../../../main/helpers/functions/icons';
 import { SelectProps } from '..';
 import { getLabelText } from '../../../../../main/helpers/functions/getLabelText';
 import { normalizeString } from '../../../../../main/helpers/functions/normalizeString';
 
+const findScrollableContainers = (
+  element: HTMLElement | null
+): HTMLElement[] => {
+  const scrollableContainers: HTMLElement[] = [];
+  let currentElement: HTMLElement | null = element;
+
+  while (currentElement && currentElement !== document.documentElement) {
+    const computedStyle = window.getComputedStyle(currentElement);
+    const overflowY = computedStyle.overflowY;
+
+    if (overflowY === 'scroll' || overflowY === 'auto') {
+      scrollableContainers.push(currentElement);
+    }
+
+    currentElement = currentElement.parentElement;
+  }
+
+  return scrollableContainers;
+};
+
 export const useSelect = (
   handleOption: (value: SelectOption | undefined) => void,
   onSelect: (value: SelectOption | undefined) => void,
@@ -34,33 +54,12 @@ export const useSelect = (
     return result;
   }, [options, inputValue]);
 
-  // Função para encontrar contêineres com overflow e scroll
-  const findScrollableContainers = (
-    element: HTMLElement | null
-  ): HTMLElement[] => {
-    const scrollableContainers: HTMLElement[] = [];
-    let currentElement: HTMLElement | null = element;
-
-    while (currentElement && currentElement !== document.documentElement) {
-      const computedStyle = window.getComputedStyle(currentElement);
-      const overflowY = computedStyle.overflowY;
-
-      if (overflowY === 'scroll' || overflowY === 'auto') {
-        scrollableContainers.push(currentElement);
-      }
-
-      currentElement = currentElement.parentElement;
-    }
-
-    return scrollableContainers;
-  };
-
   useEffect(() => {
+    if (!isOpen && !expanded) return;
+
     const handleScrollOrResize = () => {
-      if (isOpen || expanded) {
-        setIsOpen(false);
-        setExpanded(false);
-      }
+      setIsOpen(false);
+      setExpanded(false);
     };
 
     // Encontra todos os ancestrais scrolláveis
@@ -91,26 +90,36 @@ export const useSelect = (
     };
   }, [isOpen, expanded]);
 
-  function selectOption(option: SelectOption) {
-    setInputValue('');
-    setIsOpen(!isOpen);
-    setExpanded(!expanded);
-    inputContainerRef?.current && inputContainerRef.current?.blur();
-    if (option !== value) {
-      handleOption && handleOption(option);
-      onSelect && onSelect(option);
-    } else {
-      handleOption && handleOption(undefined);
-      onSelect && onSelect(undefined);
-    }
-  }
-
-  function isValue(valueSelected: SelectOption): boolean {
-    return !valueSelected;
-  }
-
-  const ExpandLess = Icons[`ExpandLess${size === 'Small' ? 'Sm' : 'Ant'}`];
-  const ExpandMore = Icons[`ExpandMore${size === 'Small' ? 'Sm' : 'Ant'}`];
+  const selectOption = useCallback(
+    (option: SelectOption) => {
+      setInputValue('');
+      setIsOpen((prev) => !prev);
+      setExpanded((prev) => !prev);
+      inputContainerRef?.current && inputContainerRef.current?.blur();
+      if (option !== value) {
+        handleOption && handleOption(option);
+        onSelect && onSelect(option);
+      } else {
+        handleOption && handleOption(undefined);
+        onSelect && onSelect(undefined);
+      }
+    },
+    [value, handleOption, onSelect]
+  );
+
+  const isValue = useCallback(
+    (valueSelected: SelectOption): boolean => !valueSelected,
+    []
+  );
+
+  const ExpandLess = useMemo(
+    () => Icons[`ExpandLess${size === 'Small' ? 'Sm' : 'Ant'}`],
+    [size]
+  );
+  const ExpandMore = useMemo(
+    () => Icons[`ExpandMore${size === 'Small' ? 'Sm' : 'Ant'}`],
+    [size]
+  );
 
   return {
     isOpen,

package/src/presentation/components/atoms/Select/index.tsx

@@ -1,6 +1,6 @@
 import { SelectOption } from '../../../../models/select-option';
 import { useSelect } from './hooks/useSelect';
-import { forwardRef, ReactNode, useMemo } from 'react';
+import { forwardRef, ReactNode, useCallback, useMemo } from 'react';
 import MenuSelect from '../../molecules/MenuSelect';
 import Tooltip, { TooltipProps } from '../Tooltip';
 import { Icons } from '../../../../main/helpers/functions/icons';
@@ -139,11 +139,11 @@ const Select: React.FC<SelectProps> = forwardRef<
       return undefined;
     }, [hasError, hasSuccess, disabled]);
 
-    const handleInputBlur = () => {
+    const handleInputBlur = useCallback(() => {
       if (!isOpen && !expanded) {
         setInputValue('');
       }
-    };
+    }, [isOpen, expanded, setInputValue]);
 
     return (
       <C.SelectContainer