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

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

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

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

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

@@ -1,3 +1,4 @@
+import { ChipProps } from '@mui/material';
 import { ForwardRefExoticComponent, RefAttributes } from 'react';
 
 export interface UserSelectionSectionTranslations {
@@ -8,12 +9,13 @@ export interface UserSelectionSectionTranslations {
     expandButton: string;
 }
 export interface UserSelectionSectionProps {
-    users: Users[];
-    selectedUsers: Users[];
-    onUserSelectionChange: (newSelectedUsers: Users[]) => void;
+    users: User[];
+    selectedUsers: User[];
+    onUserSelectionChange: (newSelectedUsers: User[]) => void;
     minSearchLength?: number;
     translations?: UserSelectionSectionTranslations;
     chipVariantStyle?: "outlined" | "filled";
+    chipProps?: ChipProps;
 }
 export interface ChipBoxProps {
     isScrollable: boolean;
@@ -24,11 +26,11 @@ export interface UserSelectionSectionRef {
 }
 export type UserSelectionSectionComponent = ForwardRefExoticComponent<UserSelectionSectionProps & RefAttributes<UserSelectionSectionRef>>;
 export type BasicValueType = string | number | boolean | null | undefined;
-export interface Users {
+export interface User {
     id: string | number;
     label: string;
     [key: string]: BasicValueType | BasicValueType[] | Record<string, BasicValueType>;
 }
 export interface InputValueState {
-    users: Users[];
+    users: User[];
 }

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

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e="Users selection",t="Search by first name, last name, class, or group",s="No result",o="No user, class, or group selected",n="See more...",l={title:e,searchPlaceholder:t,noResults:s,emptySelection:o,expandButton:n},a={users:[]};exports.defaultTranslations=l;exports.initialInputValue=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={users:[]},t="Users selection",s="Search by first name, last name, class, or group",o="No result",n="No user, class, or group selected",l="See more...",a={title:t,searchPlaceholder:s,noResults:o,emptySelection:n,expandButton:l};exports.defaultTranslations=a;exports.initialInputValue=e;

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

@@ -1,5 +1,6 @@
 import { InputValueState } from './types';
 
+export declare const initialInputValue: InputValueState;
 export declare const defaultTranslations: {
     title: string;
     searchPlaceholder: string;
@@ -7,4 +8,3 @@ export declare const defaultTranslations: {
     emptySelection: string;
     expandButton: string;
 };
-export declare const initialInputValue: InputValueState;

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

@@ -1,13 +1,13 @@
-const e = "Users selection", s = "Search by first name, last name, class, or group", t = "No result", o = "No user, class, or group selected", n = "See more...", l = {
+const l = {
+  users: []
+}, e = "Users selection", s = "Search by first name, last name, class, or group", t = "No result", o = "No user, class, or group selected", n = "See more...", c = {
   title: e,
   searchPlaceholder: s,
   noResults: t,
   emptySelection: o,
   expandButton: n
-}, c = {
-  users: []
 };
 export {
-  l as defaultTranslations,
-  c as initialInputValue
+  c as defaultTranslations,
+  l as initialInputValue
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.1.0-dev.1724331727",
+  "version": "1.1.0-dev.1724423209",
   "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",