@cgi-learning-hub/ui 1.1.0-dev.1724423209 → 1.1.0-dev.1724427560

package/dist/components/UserSelectionSection/index.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/styles2.css');require('../../assets/styles.css');const t=require("react/jsx-runtime"),i=require("@mui/material"),l=require("react"),u=require("./style.cjs.js"),O=require("./utils.cjs.js");require("../inputs/SearchInput/SearchInput.cjs.js");const P=require("../inputs/TextInput/TextInput.cjs.js");require("../../DefaultButton-y-mHSNFH.cjs");require("../feedback/Alert/Alert.cjs.js");require("../lists/FileList/FileListItem.cjs.js");;/* empty css                      */;/* empty css                      */require("../../fr-TRjulm1Q.cjs");const C=l.forwardRef(({users:f,selectedUsers:n,onUserSelectionChange:y,minSearchLength:v=1,translations:r=O.defaultTranslations,chipVariantStyle:V="filled",chipProps:I},B)=>{const[c,m]=l.useState(""),[b,h]=l.useState(!1),[p,L]=l.useState([]),[o,g]=l.useState(!1),s=8,[T,j]=l.useState(s),d=n.length>s,q=n.length===0;l.useImperativeHandle(B,()=>({closeList:()=>h(!1)})),l.useEffect(()=>{const e=c.toLowerCase(),a=f.reduce((x,S)=>x.length<5&&S.label.toLowerCase().includes(e)&&!n.some(M=>M.id===S.id)?[...x,S]:x,[]);L(a)},[c,f,n]);const w=e=>{const{value:a}=e.target;m(a),b||h(!0)},_=e=>{y([...n,e]),h(!1),m("")},E=e=>{y(n.filter(a=>a.id!==e.id))},R=()=>{g(!o),j(o?s:n.length)};return l.useEffect(()=>{d||g(!1),j(o?n.length:s)},[p]),t.jsxs(i.Box,{sx:u.wrapperBoxStyle,children:[t.jsx(i.Typography,{variant:"h2",children:r.title}),t.jsxs(i.Box,{sx:{width:"100%",position:"relative",maxWidth:"100%"},children:[t.jsx(P,{name:"search",placeholder:r.searchPlaceholder,fullWidth:!0,value:c,onChange:w}),c.length>=v&&b&&t.jsx(i.Paper,{sx:u.paperStyle,children:p.length?t.jsx(i.List,{children:p.map(e=>t.jsx(i.ListItemButton,{onClick:()=>_(e),children:t.jsx(i.ListItemText,{primary:e.label})},e.id))}):t.jsx(i.Typography,{sx:{padding:".5rem"},variant:"body1",children:r.noResults})})]}),t.jsx(u.ChipBox,{isEmpty:q,isScrollable:o&&d,children:q?t.jsx(i.Typography,{variant:"body1",children:r.emptySelection}):n.slice(0,T).map(e=>t.jsx(i.Chip,{label:e.label,onDelete:()=>E(e),sx:{maxWidth:"20%",justifyContent:"space-betweeen"},...I},e.id))}),n.length>s&&t.jsx(i.Collapse,{in:d&&!o,collapsedSize:0,children:t.jsx(i.Button,{sx:u.seeMoreButtonStyle,"data-testid":"see-more",onClick:R,children:r.expandButton})})]})});C.displayName="UserSelectionSection";exports.UserSelectionSection=C;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});require('../../assets/styles2.css');require('../../assets/styles.css');const t=require("react/jsx-runtime"),i=require("@mui/material"),l=require("react"),u=require("./style.cjs.js"),O=require("./utils.cjs.js");require("../inputs/SearchInput/SearchInput.cjs.js");const P=require("../inputs/TextInput/TextInput.cjs.js");require("../../DefaultButton-y-mHSNFH.cjs");require("../feedback/Alert/Alert.cjs.js");require("../lists/FileList/FileListItem.cjs.js");;/* empty css                      */;/* empty css                      */require("../../fr-TRjulm1Q.cjs");const C=l.forwardRef(({users:f,selectedUsers:n,onUserSelectionChange:y,minSearchLength:v=1,translations:o=O.defaultTranslations,chipProps:I},B)=>{const[c,m]=l.useState(""),[b,h]=l.useState(!1),[p,L]=l.useState([]),[r,g]=l.useState(!1),s=8,[T,j]=l.useState(s),d=n.length>s,q=n.length===0;l.useImperativeHandle(B,()=>({closeList:()=>h(!1)})),l.useEffect(()=>{const e=c.toLowerCase(),a=f.reduce((x,S)=>x.length<5&&S.label.toLowerCase().includes(e)&&!n.some(M=>M.id===S.id)?[...x,S]:x,[]);L(a)},[c,f,n]);const w=e=>{const{value:a}=e.target;m(a),b||h(!0)},_=e=>{y([...n,e]),h(!1),m("")},E=e=>{y(n.filter(a=>a.id!==e.id))},R=()=>{g(!r),j(r?s:n.length)};return l.useEffect(()=>{d||g(!1),j(r?n.length:s)},[p]),t.jsxs(i.Box,{sx:u.wrapperBoxStyle,children:[t.jsx(i.Typography,{variant:"h2",children:o.title}),t.jsxs(i.Box,{sx:{width:"100%",position:"relative",maxWidth:"100%"},children:[t.jsx(P,{name:"search",placeholder:o.searchPlaceholder,fullWidth:!0,value:c,onChange:w}),c.length>=v&&b&&t.jsx(i.Paper,{sx:u.paperStyle,children:p.length?t.jsx(i.List,{children:p.map(e=>t.jsx(i.ListItemButton,{onClick:()=>_(e),children:t.jsx(i.ListItemText,{primary:e.label})},e.id))}):t.jsx(i.Typography,{sx:{padding:".5rem"},variant:"body1",children:o.noResults})})]}),t.jsx(u.ChipBox,{isEmpty:q,isScrollable:r&&d,children:q?t.jsx(i.Typography,{variant:"body1",children:o.emptySelection}):n.slice(0,T).map(e=>t.jsx(i.Chip,{label:e.label,onDelete:()=>E(e),sx:{maxWidth:"20%",justifyContent:"space-betweeen"},...I},e.id))}),n.length>s&&t.jsx(i.Collapse,{in:d&&!r,collapsedSize:0,children:t.jsx(i.Button,{sx:u.seeMoreButtonStyle,"data-testid":"see-more",onClick:R,children:o.expandButton})})]})});C.displayName="UserSelectionSection";exports.UserSelectionSection=C;

package/dist/components/UserSelectionSection/index.es.js

@@ -1,5 +1,5 @@
 import { jsxs as v, jsx as t } from "react/jsx-runtime";
-import { Box as I, Typography as f, Paper as O, List as P, ListItemButton as z, ListItemText as D, Chip as F, Collapse as H, Button as N } from "@mui/material";
+import { Box as I, Typography as f, Paper as P, List as V, ListItemButton as z, ListItemText as D, Chip as F, Collapse as H, Button as N } from "@mui/material";
 import { forwardRef as q, useState as a, useImperativeHandle as A, useEffect as B } from "react";
 import { wrapperBoxStyle as G, paperStyle as J, ChipBox as K, seeMoreButtonStyle as Q } from "./style.es.js";
 import { defaultTranslations as X } from "./utils.es.js";
@@ -11,52 +11,52 @@ import "../lists/FileList/FileListItem.es.js";
 import '../../assets/styles2.css';import '../../assets/styles.css';/* empty css                    */
 /* empty css                    */
 import "../../fr-C9KY9a-o.js";
-const Z = q(({ users: u, selectedUsers: i, onUserSelectionChange: x, minSearchLength: L = 1, translations: l = X, chipVariantStyle: _ = "filled", chipProps: w }, T) => {
-  const [p, S] = a(""), [y, s] = a(!1), [c, j] = a([]), [o, b] = a(!1), n = 8, [E, g] = a(n), h = i.length > n, C = i.length === 0;
+const Z = q(({ users: u, selectedUsers: i, onUserSelectionChange: x, minSearchLength: L = 1, translations: o = X, chipProps: w }, T) => {
+  const [s, S] = a(""), [b, p] = a(!1), [c, j] = a([]), [l, y] = a(!1), n = 8, [E, g] = a(n), h = i.length > n, C = i.length === 0;
   A(T, () => ({
-    closeList: () => s(!1)
+    closeList: () => p(!1)
   })), B(() => {
-    const e = p.toLowerCase(), r = u.reduce((d, m) => d.length < 5 && m.label.toLowerCase().includes(e) && !i.some((M) => M.id === m.id) ? [...d, m] : d, []);
+    const e = s.toLowerCase(), r = u.reduce((d, m) => d.length < 5 && m.label.toLowerCase().includes(e) && !i.some((O) => O.id === m.id) ? [...d, m] : d, []);
     j(r);
-  }, [p, u, i]);
+  }, [s, u, i]);
   const R = (e) => {
     const { value: r } = e.target;
-    S(r), y || s(!0);
-  }, V = (e) => {
-    x([...i, e]), s(!1), S("");
+    S(r), b || p(!0);
   }, W = (e) => {
+    x([...i, e]), p(!1), S("");
+  }, k = (e) => {
     x(i.filter((r) => r.id !== e.id));
-  }, k = () => {
-    b(!o), g(o ? n : i.length);
+  }, M = () => {
+    y(!l), g(l ? n : i.length);
   };
   return B(() => {
-    h || b(!1), g(o ? i.length : n);
+    h || y(!1), g(l ? i.length : n);
   }, [c]), /* @__PURE__ */ v(I, { sx: G, children: [
-    /* @__PURE__ */ t(f, { variant: "h2", children: l.title }),
+    /* @__PURE__ */ t(f, { variant: "h2", children: o.title }),
     /* @__PURE__ */ v(I, { sx: { width: "100%", position: "relative", maxWidth: "100%" }, children: [
       /* @__PURE__ */ t(
         Y,
         {
           name: "search",
-          placeholder: l.searchPlaceholder,
+          placeholder: o.searchPlaceholder,
           fullWidth: !0,
-          value: p,
+          value: s,
           onChange: R
         }
       ),
-      p.length >= L && y && /* @__PURE__ */ t(O, { sx: J, children: c.length ? /* @__PURE__ */ t(P, { children: c.map((e) => /* @__PURE__ */ t(z, { onClick: () => V(e), children: /* @__PURE__ */ t(D, { primary: e.label }) }, e.id)) }) : /* @__PURE__ */ t(f, { sx: { padding: ".5rem" }, variant: "body1", children: l.noResults }) })
+      s.length >= L && b && /* @__PURE__ */ t(P, { sx: J, children: c.length ? /* @__PURE__ */ t(V, { children: c.map((e) => /* @__PURE__ */ t(z, { onClick: () => W(e), children: /* @__PURE__ */ t(D, { primary: e.label }) }, e.id)) }) : /* @__PURE__ */ t(f, { sx: { padding: ".5rem" }, variant: "body1", children: o.noResults }) })
     ] }),
-    /* @__PURE__ */ t(K, { isEmpty: C, isScrollable: o && h, children: C ? /* @__PURE__ */ t(f, { variant: "body1", children: l.emptySelection }) : i.slice(0, E).map((e) => /* @__PURE__ */ t(
+    /* @__PURE__ */ t(K, { isEmpty: C, isScrollable: l && h, children: C ? /* @__PURE__ */ t(f, { variant: "body1", children: o.emptySelection }) : i.slice(0, E).map((e) => /* @__PURE__ */ t(
       F,
       {
         label: e.label,
-        onDelete: () => W(e),
+        onDelete: () => k(e),
         sx: { maxWidth: "20%", justifyContent: "space-betweeen" },
         ...w
       },
       e.id
     )) }),
-    i.length > n && /* @__PURE__ */ t(H, { in: h && !o, collapsedSize: 0, children: /* @__PURE__ */ t(N, { sx: Q, "data-testid": "see-more", onClick: k, children: l.expandButton }) })
+    i.length > n && /* @__PURE__ */ t(H, { in: h && !l, collapsedSize: 0, children: /* @__PURE__ */ t(N, { sx: Q, "data-testid": "see-more", onClick: M, children: o.expandButton }) })
   ] });
 });
 Z.displayName = "UserSelectionSection";

package/dist/components/UserSelectionSection/types.d.ts

@@ -14,7 +14,6 @@ export interface UserSelectionSectionProps {
     onUserSelectionChange: (newSelectedUsers: User[]) => void;
     minSearchLength?: number;
     translations?: UserSelectionSectionTranslations;
-    chipVariantStyle?: "outlined" | "filled";
     chipProps?: ChipProps;
 }
 export interface ChipBoxProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.1.0-dev.1724423209",
+  "version": "1.1.0-dev.1724427560",
   "private": false,
   "author": "CGI Learning-hub Team",
   "description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",