@agregio-solutions/design-system 1.15.0 → 1.15.1

package/dist/design-system.cjs

@@ -852,7 +852,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[Tr]+=1);function z1(e){return
   display: flex;
   align-items: center;
   column-gap: var(--spacing-xs);
-`;function Ru({nature:e,successHelperText:t,errorHelperText:r}){return e||(r?"negative":t?"positive":"default")}function Zv(){return typeof window.ResizeObserver<"u"}function Wv(e){const{ref:t,onResize:r}=e;u.useEffect(()=>{const n=t==null?void 0:t.current;if(n)if(Zv()){const o=new window.ResizeObserver(i=>{i.length&&r()});return o.observe(n),()=>{n&&o.unobserve(n)}}else return window.addEventListener("resize",r,!1),()=>{window.removeEventListener("resize",r,!1)}},[r,t])}function Iu(e){const{locale:t}=_t(),r=t||"";return`${r[0]}${r[1]}`.toLowerCase()==="fr"?e.fr:e.en}const Co=u.forwardRef((e,t)=>{var c,d;const r=Iu(Uv),n=Ru({nature:e.nature,successHelperText:e.successHelperText,errorHelperText:e.errorHelperText}),o={...e.wrapperProps,htmlForId:e.id,label:e.label,labelIconRight:e.labelIconRight,description:e.description,helperTextIcon:e.helperTextIcon,helperText:e.helperText,errorHelperText:e.errorHelperText,errorHelperTextIcon:e.errorHelperTextIcon,successHelperText:e.successHelperText,successHelperTextIcon:e.successHelperTextIcon,required:e.required},i=u.useRef(null),[a,l]=u.useState(null),s=u.useCallback(()=>{i.current&&l(i.current.offsetWidth+"px")},[i]);return Wv({ref:i,onResize:s}),e.mode==="multiple"?v.jsx(Po,{...o,ref:t,children:v.jsxs(P0,{defaultOpen:e.defaultOpen,isOpen:e.open,onOpenChange:e.onOpenChange,children:[v.jsxs(ga,{...e.buttonProps,type:"button",ref:i,"data-nature":n,"data-fullwidth":e.fullWidth,"data-testid":"select-trigger",isDisabled:e.disabled,children:[!((c=e.selectedKeys)!=null&&c.length)&&v.jsx("span",{children:e.placeholder||""}),!!((d=e.selectedKeys)!=null&&d.length)&&v.jsxs(Hv,{children:[v.jsx(Cu,{value:e.selectedKeys.length,nature:"informative"}),e.selectedKeys.length===1?` ${r.itemSelected}`:` ${r.itemsSelected}`]}),v.jsx(ma,{name:"expand_more","data-disabled":e.disabled})]}),v.jsx(ba,{offset:4,placement:"bottom",children:v.jsx(ya,{"aria-label":String(e.label),selectionMode:"multiple",selectedKeys:e.selectedKeys,disabledKeys:e.disabledIds,onSelectionChange:p=>{p!=="all"&&e.onSelectionChange([...p].map(String))},style:{"--trigger-width":a},children:e.children})})]})}):v.jsx(Po,{...o,children:v.jsxs(zv,{ref:t,id:e.id,isDisabled:e.disabled,isRequired:e.required,onSelectionChange:p=>{var f;return(f=e.onChange)==null?void 0:f.call(e,String(p))},selectedKey:e.value,name:e.name,disabledKeys:e.disabledIds,defaultOpen:e.defaultOpen,isOpen:e.open,onOpenChange:e.onOpenChange,"data-fullwidth":e.fullWidth,"aria-label":String(e.label),children:[v.jsxs(ga,{...e.buttonProps,type:"button","data-nature":n,"data-fullwidth":e.fullWidth,"data-testid":"select-trigger",children:[v.jsx(Vv,{children:p=>p.isPlaceholder?e.placeholder||"":p.selectedText}),v.jsx(ma,{name:"expand_more","data-disabled":e.disabled})]}),v.jsx(ba,{offset:4,placement:"bottom",children:v.jsx(ya,{children:e.children})})]})})}),Uv={en:{itemsSelected:" items selected",itemSelected:" item selected"},fr:{itemsSelected:" éléments sélectionnés",itemSelected:" élément sélectionné"}},To=K(Ve)`
+`;function Ru({nature:e,successHelperText:t,errorHelperText:r}){return e||(r?"negative":t?"positive":"default")}function Zv(){return typeof window.ResizeObserver<"u"}function Wv(e){const{ref:t,onResize:r}=e;u.useEffect(()=>{const n=t==null?void 0:t.current;if(n)if(Zv()){const o=new window.ResizeObserver(i=>{i.length&&r()});return o.observe(n),()=>{n&&o.unobserve(n)}}else return window.addEventListener("resize",r,!1),()=>{window.removeEventListener("resize",r,!1)}},[r,t])}function Iu(e){const{locale:t}=_t(),r=t||"";return`${r[0]}${r[1]}`.toLowerCase()==="fr"?e.fr:e.en}const Co=u.forwardRef((e,t)=>{var d,p;const r=Iu(Uv),n=e["aria-label"]??String(e.label),o=Ru({nature:e.nature,successHelperText:e.successHelperText,errorHelperText:e.errorHelperText}),i={...e.wrapperProps,htmlForId:e.id,label:e.label,labelIconRight:e.labelIconRight,description:e.description,helperTextIcon:e.helperTextIcon,helperText:e.helperText,errorHelperText:e.errorHelperText,errorHelperTextIcon:e.errorHelperTextIcon,successHelperText:e.successHelperText,successHelperTextIcon:e.successHelperTextIcon,required:e.required},a=u.useRef(null),[l,s]=u.useState(null),c=u.useCallback(()=>{a.current&&s(a.current.offsetWidth+"px")},[a]);return Wv({ref:a,onResize:c}),e.mode==="multiple"?v.jsx(Po,{...i,ref:t,children:v.jsxs(P0,{defaultOpen:e.defaultOpen,isOpen:e.open,onOpenChange:e.onOpenChange,children:[v.jsxs(ga,{...e.buttonProps,type:"button",ref:a,"data-nature":o,"data-fullwidth":e.fullWidth,"aria-label":n,isDisabled:e.disabled,children:[!((d=e.selectedKeys)!=null&&d.length)&&v.jsx("span",{children:e.placeholder||""}),!!((p=e.selectedKeys)!=null&&p.length)&&v.jsxs(Hv,{children:[v.jsx(Cu,{value:e.selectedKeys.length,nature:"informative"}),e.selectedKeys.length===1?` ${r.itemSelected}`:` ${r.itemsSelected}`]}),v.jsx(ma,{name:"expand_more","data-disabled":e.disabled})]}),v.jsx(ba,{offset:4,placement:"bottom",children:v.jsx(ya,{"aria-label":`${r.selectionFor} ${n}`,selectionMode:"multiple",selectedKeys:e.selectedKeys,disabledKeys:e.disabledIds,onSelectionChange:f=>{f!=="all"&&e.onSelectionChange([...f].map(String))},style:{"--trigger-width":l},children:e.children})})]})}):v.jsx(Po,{...i,children:v.jsxs(zv,{ref:t,id:e.id,isDisabled:e.disabled,isRequired:e.required,onSelectionChange:f=>{var h;return(h=e.onChange)==null?void 0:h.call(e,String(f))},selectedKey:e.value,name:e.name,disabledKeys:e.disabledIds,defaultOpen:e.defaultOpen,isOpen:e.open,onOpenChange:e.onOpenChange,"data-fullwidth":e.fullWidth,"aria-label":n,children:[v.jsxs(ga,{...e.buttonProps,type:"button","data-nature":o,"data-fullwidth":e.fullWidth,children:[v.jsx(Vv,{children:f=>f.isPlaceholder?e.placeholder||"":f.selectedText}),v.jsx(ma,{name:"expand_more","data-disabled":e.disabled})]}),v.jsx(ba,{offset:4,placement:"bottom",children:v.jsx(ya,{children:e.children})})]})})}),Uv={en:{itemsSelected:" items selected",itemSelected:" item selected",selectionFor:" selection for"},fr:{itemsSelected:" éléments sélectionnés",itemSelected:" élément sélectionné",selectionFor:" sélection pour"}},To=K(Ve)`
   font-size: ${X.large};
   color: var(--color-content-neutral-primary);
 `,qv=K.div`

package/dist/design-system.js

@@ -10506,12 +10506,12 @@ function Fu(e) {
   return `${r[0]}${r[1]}`.toLowerCase() === "fr" ? e.fr : e.en;
 }
 const ka = w.forwardRef((e, t) => {
-  var c, u;
-  const r = Fu(Jv), n = _u({
+  var u, f;
+  const r = Fu(Jv), n = e["aria-label"] ?? String(e.label), o = _u({
     nature: e.nature,
     successHelperText: e.successHelperText,
     errorHelperText: e.errorHelperText
-  }), o = {
+  }), i = {
     ...e.wrapperProps,
     htmlForId: e.id,
     label: e.label,
@@ -10524,10 +10524,10 @@ const ka = w.forwardRef((e, t) => {
     successHelperText: e.successHelperText,
     successHelperTextIcon: e.successHelperTextIcon,
     required: e.required
-  }, i = _(null), [a, l] = ie(null), s = ce(() => {
-    i.current && l(i.current.offsetWidth + "px");
-  }, [i]);
-  return Xv({ ref: i, onResize: s }), e.mode === "multiple" ? /* @__PURE__ */ v(Ao, { ...o, ref: t, children: /* @__PURE__ */ re(
+  }, a = _(null), [l, s] = ie(null), c = ce(() => {
+    a.current && s(a.current.offsetWidth + "px");
+  }, [a]);
+  return Xv({ ref: a, onResize: c }), e.mode === "multiple" ? /* @__PURE__ */ v(Ao, { ...i, ref: t, children: /* @__PURE__ */ re(
     M0,
     {
       defaultOpen: e.defaultOpen,
@@ -10539,14 +10539,14 @@ const ka = w.forwardRef((e, t) => {
           {
             ...e.buttonProps,
             type: "button",
-            ref: i,
-            "data-nature": n,
+            ref: a,
+            "data-nature": o,
             "data-fullwidth": e.fullWidth,
-            "data-testid": "select-trigger",
+            "aria-label": n,
             isDisabled: e.disabled,
             children: [
-              !((c = e.selectedKeys) != null && c.length) && /* @__PURE__ */ v("span", { children: e.placeholder || "" }),
-              !!((u = e.selectedKeys) != null && u.length) && /* @__PURE__ */ re(Gv, { children: [
+              !((u = e.selectedKeys) != null && u.length) && /* @__PURE__ */ v("span", { children: e.placeholder || "" }),
+              !!((f = e.selectedKeys) != null && f.length) && /* @__PURE__ */ re(Gv, { children: [
                 /* @__PURE__ */ v(pv, { value: e.selectedKeys.length, nature: "informative" }),
                 e.selectedKeys.length === 1 ? ` ${r.itemSelected}` : ` ${r.itemsSelected}`
               ] }),
@@ -10557,29 +10557,29 @@ const ka = w.forwardRef((e, t) => {
         /* @__PURE__ */ v(Ca, { offset: 4, placement: "bottom", children: /* @__PURE__ */ v(
           Ta,
           {
-            "aria-label": String(e.label),
+            "aria-label": `${r.selectionFor} ${n}`,
             selectionMode: "multiple",
             selectedKeys: e.selectedKeys,
             disabledKeys: e.disabledIds,
-            onSelectionChange: (f) => {
-              f !== "all" && e.onSelectionChange([...f].map(String));
+            onSelectionChange: (d) => {
+              d !== "all" && e.onSelectionChange([...d].map(String));
             },
-            style: { "--trigger-width": a },
+            style: { "--trigger-width": l },
             children: e.children
           }
         ) })
       ]
     }
-  ) }) : /* @__PURE__ */ v(Ao, { ...o, children: /* @__PURE__ */ re(
+  ) }) : /* @__PURE__ */ v(Ao, { ...i, children: /* @__PURE__ */ re(
     Uv,
     {
       ref: t,
       id: e.id,
       isDisabled: e.disabled,
       isRequired: e.required,
-      onSelectionChange: (f) => {
-        var d;
-        return (d = e.onChange) == null ? void 0 : d.call(e, String(f));
+      onSelectionChange: (d) => {
+        var p;
+        return (p = e.onChange) == null ? void 0 : p.call(e, String(d));
       },
       selectedKey: e.value,
       name: e.name,
@@ -10588,18 +10588,17 @@ const ka = w.forwardRef((e, t) => {
       isOpen: e.open,
       onOpenChange: e.onOpenChange,
       "data-fullwidth": e.fullWidth,
-      "aria-label": String(e.label),
+      "aria-label": n,
       children: [
         /* @__PURE__ */ re(
           Ea,
           {
             ...e.buttonProps,
             type: "button",
-            "data-nature": n,
+            "data-nature": o,
             "data-fullwidth": e.fullWidth,
-            "data-testid": "select-trigger",
             children: [
-              /* @__PURE__ */ v(qv, { children: (f) => f.isPlaceholder ? e.placeholder || "" : f.selectedText }),
+              /* @__PURE__ */ v(qv, { children: (d) => d.isPlaceholder ? e.placeholder || "" : d.selectedText }),
               /* @__PURE__ */ v(Pa, { name: "expand_more", "data-disabled": e.disabled })
             ]
           }
@@ -10611,11 +10610,13 @@ const ka = w.forwardRef((e, t) => {
 }), Jv = {
   en: {
     itemsSelected: " items selected",
-    itemSelected: " item selected"
+    itemSelected: " item selected",
+    selectionFor: " selection for"
   },
   fr: {
     itemsSelected: " éléments sélectionnés",
-    itemSelected: " élément sélectionné"
+    itemSelected: " élément sélectionné",
+    selectionFor: " sélection pour"
   }
 }, Ro = K(lt)`
   font-size: ${ne.large};

package/dist/packages/components/Select/index.d.ts

@@ -92,6 +92,10 @@ interface GenericProps {
      * Disabled items in the dropdown, should be the item's id
      */
     disabledIds?: Array<string>;
+    /**
+     * If you give a ReactNode as label, you should then provide an aria-label as string to ensure there is no accessibility issue
+     */
+    "aria-label"?: string;
 }
 interface SelectSingleProps extends GenericProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.15.0",
+  "version": "1.15.1",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",
@@ -48,7 +48,7 @@
     "@storybook/react": "^8.0.8",
     "@storybook/react-vite": "^8.0.8",
     "@storybook/test": "^8.0.8",
-    "@storybook/test-runner": "^0.17.0",
+    "@storybook/test-runner": "^0.18.0",
     "@storybook/theming": "^8.0.8",
     "@tanstack/react-table": "^8.15.0",
     "@types/node": "^20.12.2",