sbwb-ds 3.1.7 → 3.1.8

package/dist/sbwb-ds.js

@@ -29610,7 +29610,9 @@ const Lge = xn(
     values: r = [],
     onChange: n,
     onSearchChange: a,
+    // Nova prop para capturar mudanças no texto de busca
     searchValue: i,
+    // Nova prop para controlar o valor de busca externamente
     disabled: o = !1,
     enableSearch: l = !0,
     width: s = "100%",
@@ -29644,9 +29646,9 @@ const Lge = xn(
       [u, r, A]
     ), se = Sr(
       (we) => {
-        n(we), i === void 0 && O("");
+        n(we);
       },
-      [n, i]
+      [n]
     ), ne = Sr(
       (we) => {
         const be = r.includes(we) ? r.filter((ye) => ye !== we) : [...r, we];
@@ -29689,12 +29691,12 @@ const Lge = xn(
         return;
       const we = (be) => {
         const ye = be.target;
-        V.current && !V.current.contains(ye) && (T(!1), i === void 0 && O(""));
+        V.current && !V.current.contains(ye) && (T(!1), i === void 0 && !a && O(""));
       };
       return document.addEventListener("mousedown", we), () => {
         document.removeEventListener("mousedown", we);
       };
-    }, [A, i]), Vt(() => {
+    }, [A, i, a]), Vt(() => {
       if (!L)
         return;
       const we = {

package/dist/sbwb-ds.umd.cjs

@@ -6041,7 +6041,7 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
   font-weight: ${y.fonts.fontWeight.fontWeightSemiBold};
   line-height: ${({size:e})=>e==="Small"?y.fonts.lineHeight.lineHeightSm(y.fonts.fontSize.fontSizeBodySm):y.fonts.lineHeight.lineHeightMd(y.fonts.fontSize.fontSizeBodyMd)};
   color: ${y.colors.brandColors.colorBrandPrimary};
-`,IV=ee.forwardRef(({selectContainerRef:e,options:t,size:r,onSelectOption:n,values:a,searchText:i,setIsOpen:o,withCheckbox:l=!0,height:s},c)=>{const u=ee.useRef(null),[d,f]=ee.useState(0),h=ee.useCallback(()=>{const g=e.current,m=u.current;if(!g||!m)return;const C=g.getBoundingClientRect(),w=m.getBoundingClientRect(),S=window.innerHeight,b=C.top,x=S-C.bottom,_=x<w.height&&b>x;let L;_?(L=C.top-w.height,m.style.maxHeight=`${b}px`):(L=C.bottom,m.style.maxHeight=`${x}px`);let V=C.left;const H=V+w.width-window.innerWidth;H>0&&(V=Math.max(0,V-H)),m.style.position="fixed",m.style.top=`${L}px`,m.style.left=`${V}px`,m.style.width=`${Math.max(C.width,w.width)}px`,m.style.overflowY="auto",f(C.width)},[e]);ee.useLayoutEffect(()=>{h()},[h,t,i]),ee.useEffect(()=>{const g=()=>{h()};return window.addEventListener("resize",g),document.addEventListener("scroll",g,!0),()=>{window.removeEventListener("resize",g),document.removeEventListener("scroll",g,!0)}},[h]),ee.useEffect(()=>{const g=m=>{const C=m.target;u.current&&!u.current.contains(C)&&e.current&&!e.current.contains(C)&&o(!1)};return document.addEventListener("mousedown",g),()=>{document.removeEventListener("mousedown",g)}},[o,e]),ee.useEffect(()=>{const g=m=>{const C=m.target;u.current&&u.current.contains(C)||e.current&&e.current.contains(C)||o(!1)};return document.addEventListener("scroll",g,!0),()=>{document.removeEventListener("scroll",g,!0)}},[o,e]);const p=i.toLowerCase();return R(o3e,{ref:g=>{u.current=g,typeof c=="function"?c(g):c&&(c.current=g)},width:`${d}px`,height:s,"data-testid":"MenuMultiSelect",id:"MenuMultiSelect",onClick:g=>g.stopPropagation(),children:t.length===0?R(l3e,{size:r,children:"Sem opções"}):t.map(g=>{const C=g.label.toLowerCase().indexOf(p),w=a.includes(g.value);return R(c3e,{children:Ve(u3e,{onClick:S=>{S.preventDefault(),S.stopPropagation(),n(g.value)},isSelected:w,"data-testid":g.value,size:r,children:[l&&R(p0,{width:"24.333px",id:g.value,onChange:S=>{S.stopPropagation(),n(g.value)},checked:w,size:r}),R(s3e,{size:r,hasDescription:!1,children:R("p",{title:g.label,children:C>=0?Ve(or,{children:[g.label.substring(0,C),R(d3e,{children:g.label.substring(C,C+i.length)}),g.label.substring(C+i.length)]}):g.label})})]})},g.value)})})});IV.displayName="MenuMultiSelect";const PV=ee.forwardRef(({id:e,options:t=[],values:r=[],onChange:n,onSearchChange:a,searchValue:i,disabled:o=!1,enableSearch:l=!0,width:s="100%",size:c="Medium",placeholder:u,label:d,helpText:f,errorText:h,variant:p="default",tableDensity:g="normal",tooltipPosition:m,tooltipMaxWidth:C,tooltipIsVisible:w,tooltipProps:S,menuSelectHeight:b,enableTagsScroll:x=!0,tagsContainerMaxHeight:_="40px"},L)=>{const V=ee.useRef(null),H=ee.useRef(null),[A,T]=ee.useState(!1),[F,N]=ee.useState(""),z=i!==void 0?i:F,[Y,q]=ee.useState(!1),ne=ee.useMemo(()=>!!h,[h]),ie=ee.useMemo(()=>Object.fromEntries(t.map(Se=>[Se.value,Se])),[t]),pe=ee.useMemo(()=>{const Se=z.toLowerCase().trim();return Se?t.filter(be=>{var ze;const we=be.label.toLowerCase(),de=((ze=be.searchText)==null?void 0:ze.toLowerCase())||"";return we.includes(Se)||de.includes(Se)}):t},[z,t]),oe=ee.useMemo(()=>!!u&&r.length===0&&!A,[u,r,A]),ce=ee.useCallback(Se=>{n(Se),i===void 0&&N("")},[n,i]),ae=ee.useCallback(Se=>{const be=r.includes(Se)?r.filter(we=>we!==Se):[...r,Se];ce(be)},[r,ce]),fe=ee.useCallback(()=>{q(!0),A||T(!0)},[A]),he=ee.useCallback(()=>{q(!1)},[]),xe=ee.useCallback(Se=>{Se==null||Se.stopPropagation(),!o&&(T(be=>!be),A||setTimeout(()=>{var be;(be=H.current)==null||be.focus()},0))},[o,A]),te=ee.useCallback(Se=>{var be;z===""&&Se.key==="Backspace"&&r.length>0&&ce(r.slice(0,-1)),Se.key==="Escape"&&(T(!1),(be=H.current)==null||be.blur())},[z,r,ce]),ke=ee.useCallback(Se=>{var be;Se.key==="Enter"&&(z!==""&&pe.length>0?ae(pe[0].value):z===""&&((be=H.current)==null||be.blur(),T(!1)))},[z,pe,ae]),ve=ee.useCallback(Se=>{const be=Se.target.value;i!==void 0&&a?a(be):(N(be),a&&a(be)),A||T(!0)},[A,a,i]);return ee.useEffect(()=>{if(!A)return;const Se=be=>{const we=be.target;V.current&&!V.current.contains(we)&&(T(!1),i===void 0&&N(""))};return document.addEventListener("mousedown",Se),()=>{document.removeEventListener("mousedown",Se)}},[A,i]),ee.useEffect(()=>{if(!L)return;const Se={focus:()=>{var be;return(be=H.current)==null?void 0:be.focus()},blur:()=>{var be;return(be=H.current)==null?void 0:be.blur()},open:()=>T(!0),close:()=>T(!1)};typeof L=="function"?L(Se):L.current=Se},[L]),Ve(K2e,{ref:V,width:s,disabled:o,id:e,tabIndex:0,onFocus:()=>!o&&q(!0),onBlur:()=>q(!1),children:[d&&p==="default"&&R(n3e,{onClick:xe,children:d}),R(t1,{isActive:ne&&p==="default",errorTooltip:!0,label:h,position:m,maxWidth:C,isAlwaysVisible:w,wrapperWidth:"auto",...S,children:Ve(Q2e,{hasError:ne,tableDensity:g,tableSelect:p==="table",onClick:xe,size:c,isOpen:A,"data-testid":"select",disabled:o,error:h,children:[R(J2e,{children:Ve(e3e,{tableSelect:p==="table",size:c,onClick:xe,enableTagsScroll:x,tagsContainerMaxHeight:_,children:[oe&&R(t3e,{name:"placeholder-name",size:c,onClick:Se=>{var be;Se.stopPropagation(),o||(T(!0),(be=H.current)==null||be.focus())},role:"button",tabIndex:o?-1:0,onKeyDown:Se=>{var be;(Se.key==="Enter"||Se.key===" ")&&(Se.preventDefault(),o||(T(!0),(be=H.current)==null||be.focus()))},children:u}),h&&p==="table"&&R(Zc,{id:`${e}-select-table`,errorMessage:h,size:c,tooltipIsVisible:!1}),r.map(Se=>{const be=ie[Se];return be?R(xp,{label:be.tagText??be.label,size:p==="table"?"Small":c,closeButton:!0,onClose:we=>{we.stopPropagation(),ce(r.filter(de=>de!==Se))},tableTag:p==="table",tooltipProps:{isActive:!1}},be.value):null}),l&&R(r3e,{ref:H,error:h,tableSelect:p==="table",value:z,name:"inputMultiSelect",id:"inputMultiSelect",onChange:ve,onFocus:fe,onBlur:he,onKeyDown:te,onKeyUp:ke,size:p==="table"?"Small":c,disabled:o,"aria-expanded":A,"aria-haspopup":"listbox",role:"combobox",className:"multiselect-search-field"})]})}),R(i3e,{onClick:Se=>{Se.stopPropagation(),o||T(be=>!be)},children:R(mr,{iconName:A?"ExpandLessSm":"ExpandMoreSm",color:p==="table"&&h?y.colors.feedbackColors.colorFeedbackError:y.colors.neutralColors.colorNeutralCloudy})}),A&&R(IV,{selectContainerRef:V,values:r,options:pe,onSelectOption:ae,size:p==="table"?"Small":c,searchText:z,setIsOpen:T,height:b})]})}),!h&&f&&p==="default"&&R(a3e,{children:f})]})});PV.displayName="MultiSelect";var dl={};/**
+`,IV=ee.forwardRef(({selectContainerRef:e,options:t,size:r,onSelectOption:n,values:a,searchText:i,setIsOpen:o,withCheckbox:l=!0,height:s},c)=>{const u=ee.useRef(null),[d,f]=ee.useState(0),h=ee.useCallback(()=>{const g=e.current,m=u.current;if(!g||!m)return;const C=g.getBoundingClientRect(),w=m.getBoundingClientRect(),S=window.innerHeight,b=C.top,x=S-C.bottom,_=x<w.height&&b>x;let L;_?(L=C.top-w.height,m.style.maxHeight=`${b}px`):(L=C.bottom,m.style.maxHeight=`${x}px`);let V=C.left;const H=V+w.width-window.innerWidth;H>0&&(V=Math.max(0,V-H)),m.style.position="fixed",m.style.top=`${L}px`,m.style.left=`${V}px`,m.style.width=`${Math.max(C.width,w.width)}px`,m.style.overflowY="auto",f(C.width)},[e]);ee.useLayoutEffect(()=>{h()},[h,t,i]),ee.useEffect(()=>{const g=()=>{h()};return window.addEventListener("resize",g),document.addEventListener("scroll",g,!0),()=>{window.removeEventListener("resize",g),document.removeEventListener("scroll",g,!0)}},[h]),ee.useEffect(()=>{const g=m=>{const C=m.target;u.current&&!u.current.contains(C)&&e.current&&!e.current.contains(C)&&o(!1)};return document.addEventListener("mousedown",g),()=>{document.removeEventListener("mousedown",g)}},[o,e]),ee.useEffect(()=>{const g=m=>{const C=m.target;u.current&&u.current.contains(C)||e.current&&e.current.contains(C)||o(!1)};return document.addEventListener("scroll",g,!0),()=>{document.removeEventListener("scroll",g,!0)}},[o,e]);const p=i.toLowerCase();return R(o3e,{ref:g=>{u.current=g,typeof c=="function"?c(g):c&&(c.current=g)},width:`${d}px`,height:s,"data-testid":"MenuMultiSelect",id:"MenuMultiSelect",onClick:g=>g.stopPropagation(),children:t.length===0?R(l3e,{size:r,children:"Sem opções"}):t.map(g=>{const C=g.label.toLowerCase().indexOf(p),w=a.includes(g.value);return R(c3e,{children:Ve(u3e,{onClick:S=>{S.preventDefault(),S.stopPropagation(),n(g.value)},isSelected:w,"data-testid":g.value,size:r,children:[l&&R(p0,{width:"24.333px",id:g.value,onChange:S=>{S.stopPropagation(),n(g.value)},checked:w,size:r}),R(s3e,{size:r,hasDescription:!1,children:R("p",{title:g.label,children:C>=0?Ve(or,{children:[g.label.substring(0,C),R(d3e,{children:g.label.substring(C,C+i.length)}),g.label.substring(C+i.length)]}):g.label})})]})},g.value)})})});IV.displayName="MenuMultiSelect";const PV=ee.forwardRef(({id:e,options:t=[],values:r=[],onChange:n,onSearchChange:a,searchValue:i,disabled:o=!1,enableSearch:l=!0,width:s="100%",size:c="Medium",placeholder:u,label:d,helpText:f,errorText:h,variant:p="default",tableDensity:g="normal",tooltipPosition:m,tooltipMaxWidth:C,tooltipIsVisible:w,tooltipProps:S,menuSelectHeight:b,enableTagsScroll:x=!0,tagsContainerMaxHeight:_="40px"},L)=>{const V=ee.useRef(null),H=ee.useRef(null),[A,T]=ee.useState(!1),[F,N]=ee.useState(""),z=i!==void 0?i:F,[Y,q]=ee.useState(!1),ne=ee.useMemo(()=>!!h,[h]),ie=ee.useMemo(()=>Object.fromEntries(t.map(Se=>[Se.value,Se])),[t]),pe=ee.useMemo(()=>{const Se=z.toLowerCase().trim();return Se?t.filter(be=>{var ze;const we=be.label.toLowerCase(),de=((ze=be.searchText)==null?void 0:ze.toLowerCase())||"";return we.includes(Se)||de.includes(Se)}):t},[z,t]),oe=ee.useMemo(()=>!!u&&r.length===0&&!A,[u,r,A]),ce=ee.useCallback(Se=>{n(Se)},[n]),ae=ee.useCallback(Se=>{const be=r.includes(Se)?r.filter(we=>we!==Se):[...r,Se];ce(be)},[r,ce]),fe=ee.useCallback(()=>{q(!0),A||T(!0)},[A]),he=ee.useCallback(()=>{q(!1)},[]),xe=ee.useCallback(Se=>{Se==null||Se.stopPropagation(),!o&&(T(be=>!be),A||setTimeout(()=>{var be;(be=H.current)==null||be.focus()},0))},[o,A]),te=ee.useCallback(Se=>{var be;z===""&&Se.key==="Backspace"&&r.length>0&&ce(r.slice(0,-1)),Se.key==="Escape"&&(T(!1),(be=H.current)==null||be.blur())},[z,r,ce]),ke=ee.useCallback(Se=>{var be;Se.key==="Enter"&&(z!==""&&pe.length>0?ae(pe[0].value):z===""&&((be=H.current)==null||be.blur(),T(!1)))},[z,pe,ae]),ve=ee.useCallback(Se=>{const be=Se.target.value;i!==void 0&&a?a(be):(N(be),a&&a(be)),A||T(!0)},[A,a,i]);return ee.useEffect(()=>{if(!A)return;const Se=be=>{const we=be.target;V.current&&!V.current.contains(we)&&(T(!1),i===void 0&&!a&&N(""))};return document.addEventListener("mousedown",Se),()=>{document.removeEventListener("mousedown",Se)}},[A,i,a]),ee.useEffect(()=>{if(!L)return;const Se={focus:()=>{var be;return(be=H.current)==null?void 0:be.focus()},blur:()=>{var be;return(be=H.current)==null?void 0:be.blur()},open:()=>T(!0),close:()=>T(!1)};typeof L=="function"?L(Se):L.current=Se},[L]),Ve(K2e,{ref:V,width:s,disabled:o,id:e,tabIndex:0,onFocus:()=>!o&&q(!0),onBlur:()=>q(!1),children:[d&&p==="default"&&R(n3e,{onClick:xe,children:d}),R(t1,{isActive:ne&&p==="default",errorTooltip:!0,label:h,position:m,maxWidth:C,isAlwaysVisible:w,wrapperWidth:"auto",...S,children:Ve(Q2e,{hasError:ne,tableDensity:g,tableSelect:p==="table",onClick:xe,size:c,isOpen:A,"data-testid":"select",disabled:o,error:h,children:[R(J2e,{children:Ve(e3e,{tableSelect:p==="table",size:c,onClick:xe,enableTagsScroll:x,tagsContainerMaxHeight:_,children:[oe&&R(t3e,{name:"placeholder-name",size:c,onClick:Se=>{var be;Se.stopPropagation(),o||(T(!0),(be=H.current)==null||be.focus())},role:"button",tabIndex:o?-1:0,onKeyDown:Se=>{var be;(Se.key==="Enter"||Se.key===" ")&&(Se.preventDefault(),o||(T(!0),(be=H.current)==null||be.focus()))},children:u}),h&&p==="table"&&R(Zc,{id:`${e}-select-table`,errorMessage:h,size:c,tooltipIsVisible:!1}),r.map(Se=>{const be=ie[Se];return be?R(xp,{label:be.tagText??be.label,size:p==="table"?"Small":c,closeButton:!0,onClose:we=>{we.stopPropagation(),ce(r.filter(de=>de!==Se))},tableTag:p==="table",tooltipProps:{isActive:!1}},be.value):null}),l&&R(r3e,{ref:H,error:h,tableSelect:p==="table",value:z,name:"inputMultiSelect",id:"inputMultiSelect",onChange:ve,onFocus:fe,onBlur:he,onKeyDown:te,onKeyUp:ke,size:p==="table"?"Small":c,disabled:o,"aria-expanded":A,"aria-haspopup":"listbox",role:"combobox",className:"multiselect-search-field"})]})}),R(i3e,{onClick:Se=>{Se.stopPropagation(),o||T(be=>!be)},children:R(mr,{iconName:A?"ExpandLessSm":"ExpandMoreSm",color:p==="table"&&h?y.colors.feedbackColors.colorFeedbackError:y.colors.neutralColors.colorNeutralCloudy})}),A&&R(IV,{selectContainerRef:V,values:r,options:pe,onSelectOption:ae,size:p==="table"?"Small":c,searchText:z,setIsOpen:T,height:b})]})}),!h&&f&&p==="default"&&R(a3e,{children:f})]})});PV.displayName="MultiSelect";var dl={};/**
  * @license React
  * react-dom-server-legacy.browser.production.min.js
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sbwb-ds",
-  "version": "3.1.7",
+  "version": "3.1.8",
   "type": "module",
   "description": "Sistema de design para padronização dos processos visuais do portal SUBWEB",
   "main": "dist/sbwb-ds.js",

package/src/presentation/components/molecules/MultiSelect/MultiSelect.component.tsx

@@ -29,8 +29,8 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       options = [],
       values = [],
       onChange,
-      onSearchChange,
-      searchValue,
+      onSearchChange, // Nova prop para capturar mudanças no texto de busca
+      searchValue, // Nova prop para controlar o valor de busca externamente
       disabled = false,
       enableSearch = true,
       width = '100%',
@@ -55,7 +55,6 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
     const inputRef = useRef<HTMLInputElement>(null);
 
     const [isOpen, setIsOpen] = useState<boolean>(false);
-
     const [internalSearchText, setInternalSearchText] = useState<string>('');
     const searchText =
       searchValue !== undefined ? searchValue : internalSearchText;
@@ -87,11 +86,8 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
     const handleChange = useCallback(
       (newValues: string[]) => {
         onChange(newValues);
-        if (searchValue === undefined) {
-          setInternalSearchText('');
-        }
       },
-      [onChange, searchValue]
+      [onChange]
     );
 
     const toggleOption = useCallback(
@@ -146,6 +142,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
         if (e.key === 'Enter') {
           if (searchText !== '' && filteredOptions.length > 0) {
             toggleOption(filteredOptions[0].value);
+            // Não limpar o texto de busca após pressionar Enter
           } else if (searchText === '') {
             inputRef.current?.blur();
             setIsOpen(false);
@@ -182,7 +179,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
           !selectContainerRef.current.contains(target)
         ) {
           setIsOpen(false);
-          if (searchValue === undefined) {
+          if (searchValue === undefined && !onSearchChange) {
             setInternalSearchText('');
           }
         }
@@ -191,7 +188,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
       return () => {
         document.removeEventListener('mousedown', handleClickOutside);
       };
-    }, [isOpen, searchValue]);
+    }, [isOpen, searchValue, onSearchChange]);
 
     useEffect(() => {
       if (!ref) return;