@agregio-solutions/design-system 1.101.0 → 1.101.1

package/dist/design-system.cjs

@@ -214,7 +214,7 @@ See https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-sev
 `,Sw=T.div`
   padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md)
     var(--spacing-md);
-`;function je(e){const{locale:t}=Me(),r=t||"";return`${r[0]}${r[1]}`.toLowerCase()==="fr"?e.fr:e.en}function Pw(e){const{duration:t,onComplete:r,onPressStart:n,onPressEnd:a}=e,o=!!t&&t>0,[i,l]=s.useState(!1),c=s.useRef(void 0),u=s.useCallback(()=>{clearTimeout(c.current),c.current=void 0,l(!1)},[]);return s.useEffect(()=>u,[u]),{requiresHold:o,isHolding:i,pressProps:{onPressStart:p=>{n?.(p),o&&(l(!0),c.current=setTimeout(()=>{u(),r?.()},t))},onPressEnd:p=>{a?.(p),o&&u()}}}}const $2=T.span`
+`;function je(e){const{locale:t}=Me(),r=t||"";return`${r[0]}${r[1]}`.toLowerCase()==="fr"?e.fr:e.en}function Pw(e){const{duration:t,onComplete:r,onPressStart:n,onPressEnd:a}=e,o=!!t&&t>0,[i,l]=s.useState(!1),c=s.useRef(void 0),u=s.useCallback(()=>{clearTimeout(c.current),c.current=void 0,l(!1)},[]);return s.useEffect(()=>u,[u]),{requiresHold:o,isHolding:i,pressProps:{onPressStart:p=>{if(n?.(p),!o)return;l(!0);const g=p.target;c.current=setTimeout(()=>{u(),r?.(g)},t)},onPressEnd:p=>{a?.(p),o&&u()}}}}const $2=T.span`
   // This reflect the little space between text and y-axis paddings (see Figma file)
   &[data-size="medium"] {
     padding: 2px 0;
@@ -736,7 +736,7 @@ See https://styled-components.com/docs/faqs#why-am-i-getting-a-warning-about-sev
   &[data-invisible="true"] {
     visibility: hidden;
   }
-`,V1=s.forwardRef(({value:e,nature:t="default",max:r,showZero:n,invisible:a,variant:o="standard",...i},l)=>{if(Bw({value:e,variant:o,showZero:n}))return null;let c=e;return e&&r&&typeof e=="number"&&e>r&&(c=`${r}+`),o==="dot"&&(c=""),d.jsx(Aw,{ref:l,"data-nature":t,"data-invisible":a,"data-variant":o,$value:e,$max:r,...i,children:c})}),Bw=({value:e,variant:t,showZero:r})=>t==="dot"?!1:e==null||e===0&&!r,Se=s.forwardRef(({text:e,mode:t="primary",size:r="medium",nature:n="action",iconLeft:a,iconRight:o,type:i,onClick:l,disabled:c,fullWidth:u,isLoading:f,href:h,target:p,tooltip:g,tooltipProps:m,badgeProps:C,holdToSubmitDuration:b,onPressStart:y,onPressEnd:x,...v},S)=>{const{requiresHold:E,isHolding:k,pressProps:w}=Pw({duration:b,onComplete:l,onPressStart:y,onPressEnd:x}),D=e==null||e==="";if(D&&!a&&!o)throw new Error("You must provide a text or an icon");if(a&&o)throw new Error("You can't provide both an iconLeft and an iconRight");const L=h?Mw:Ew,j=d.jsxs(L,{...v,ref:S,type:i||"button","data-size":r,"data-nature":n,"data-mode":t,"data-has-icon-left":!!a||f,"data-has-icon-right":!!o,"data-has-no-text":D,"data-fullwidth":u,"data-holding":k,onPress:E?void 0:l,...w,isDisabled:c||f,href:h,target:p,"data-is-loading":f,children:[d.jsx(jw,{iconLeft:a,isLoading:f,size:r}),!D&&d.jsx($2,{"data-size":r,children:e}),d.jsx(Hw,{iconRight:o,text:e,isLoading:f,size:r}),!!C&&d.jsx(Dw,{children:d.jsx(V1,{...C})}),k&&!!b&&d.jsx(Vw,{size:r,duration:b})]});return g?d.jsx(Za,{label:g,...m,children:j}):j});function Kw({children:e,title:t,titleContentLeft:r,titleContentRight:n,description:a,unmountOnExit:o=!1,defaultExpanded:i=!1,isExpanded:l,onExpandedChange:c,isDisabled:u=!1,className:f,style:h,nature:p="default",noPadding:g=!1,withBottomCloseButton:m=!1}){const C=je(Zw);return d.jsx(gw,{defaultExpanded:i,isExpanded:l,onExpandedChange:c,isDisabled:u,className:f,style:h,"data-nature":p,"data-no-padding":g,children:({isExpanded:b})=>{const y=o&&!b;return d.jsxs(d.Fragment,{children:[d.jsxs(mw,{children:[d.jsxs(Cw,{children:[d.jsxs(bw,{children:[r,d.jsx(h5,{slot:"trigger","data-open":b,"data-disabled":u,"data-nature":p,"data-full-width":!n,children:d.jsx(vw,{slot:"trigger",children:t})}),!!n&&d.jsx(xw,{children:n})]}),d.jsx(h5,{slot:"trigger","data-open":b,"data-disabled":u,"data-nature":p,excludeFromTabOrder:!0,"data-close-button":!0,children:d.jsx(yw,{name:b?"minimize":"add"})})]}),a&&d.jsx(ww,{"data-disabled":u,children:a})]}),d.jsx($w,{"data-padding":!g,children:y?null:d.jsx(d.Fragment,{children:e})}),b&&m&&d.jsx(Sw,{children:d.jsx(Se,{slot:"trigger",text:C.close,mode:"tertiary",size:"small",iconLeft:"expand_less"})})]})}})}const Zw={en:{close:"Close"},fr:{close:"Fermer"}},_a=ln`
+`,V1=s.forwardRef(({value:e,nature:t="default",max:r,showZero:n,invisible:a,variant:o="standard",...i},l)=>{if(Bw({value:e,variant:o,showZero:n}))return null;let c=e;return e&&r&&typeof e=="number"&&e>r&&(c=`${r}+`),o==="dot"&&(c=""),d.jsx(Aw,{ref:l,"data-nature":t,"data-invisible":a,"data-variant":o,$value:e,$max:r,...i,children:c})}),Bw=({value:e,variant:t,showZero:r})=>t==="dot"?!1:e==null||e===0&&!r,Se=s.forwardRef(({text:e,mode:t="primary",size:r="medium",nature:n="action",iconLeft:a,iconRight:o,type:i,onClick:l,disabled:c,fullWidth:u,isLoading:f,href:h,target:p,tooltip:g,tooltipProps:m,badgeProps:C,holdToSubmitDuration:b,onPressStart:y,onPressEnd:x,...v},S)=>{const{requiresHold:E,isHolding:k,pressProps:w}=Pw({duration:b,onComplete:O=>{if(l?.(),i!=="submit")return;const B=O;B.type="submit",B.form?.requestSubmit(B),B.type="button"},onPressStart:y,onPressEnd:x}),D=e==null||e==="";if(D&&!a&&!o)throw new Error("You must provide a text or an icon");if(a&&o)throw new Error("You can't provide both an iconLeft and an iconRight");const L=h?Mw:Ew,j=d.jsxs(L,{...v,ref:S,type:E?"button":i||"button","data-size":r,"data-nature":n,"data-mode":t,"data-has-icon-left":!!a||f,"data-has-icon-right":!!o,"data-has-no-text":D,"data-fullwidth":u,"data-holding":k,onPress:E?void 0:l,...w,isDisabled:c||f,href:h,target:p,"data-is-loading":f,children:[d.jsx(jw,{iconLeft:a,isLoading:f,size:r}),!D&&d.jsx($2,{"data-size":r,children:e}),d.jsx(Hw,{iconRight:o,text:e,isLoading:f,size:r}),!!C&&d.jsx(Dw,{children:d.jsx(V1,{...C})}),k&&!!b&&d.jsx(Vw,{size:r,duration:b})]});return g?d.jsx(Za,{label:g,...m,children:j}):j});function Kw({children:e,title:t,titleContentLeft:r,titleContentRight:n,description:a,unmountOnExit:o=!1,defaultExpanded:i=!1,isExpanded:l,onExpandedChange:c,isDisabled:u=!1,className:f,style:h,nature:p="default",noPadding:g=!1,withBottomCloseButton:m=!1}){const C=je(Zw);return d.jsx(gw,{defaultExpanded:i,isExpanded:l,onExpandedChange:c,isDisabled:u,className:f,style:h,"data-nature":p,"data-no-padding":g,children:({isExpanded:b})=>{const y=o&&!b;return d.jsxs(d.Fragment,{children:[d.jsxs(mw,{children:[d.jsxs(Cw,{children:[d.jsxs(bw,{children:[r,d.jsx(h5,{slot:"trigger","data-open":b,"data-disabled":u,"data-nature":p,"data-full-width":!n,children:d.jsx(vw,{slot:"trigger",children:t})}),!!n&&d.jsx(xw,{children:n})]}),d.jsx(h5,{slot:"trigger","data-open":b,"data-disabled":u,"data-nature":p,excludeFromTabOrder:!0,"data-close-button":!0,children:d.jsx(yw,{name:b?"minimize":"add"})})]}),a&&d.jsx(ww,{"data-disabled":u,children:a})]}),d.jsx($w,{"data-padding":!g,children:y?null:d.jsx(d.Fragment,{children:e})}),b&&m&&d.jsx(Sw,{children:d.jsx(Se,{slot:"trigger",text:C.close,mode:"tertiary",size:"small",iconLeft:"expand_less"})})]})}})}const Zw={en:{close:"Close"},fr:{close:"Fermer"}},_a=ln`
   margin: 0;
   max-height: 200px; /* 5 items of 40px height */
   overflow-y: auto;

package/dist/design-system.js

@@ -22508,9 +22508,12 @@ function Mw(e) {
     isHolding: i,
     pressProps: {
       onPressStart: (h) => {
-        n?.(h), o && (l(!0), s.current = setTimeout(() => {
-          c(), r?.();
-        }, t));
+        if (n?.(h), !o) return;
+        l(!0);
+        const p = h.target;
+        s.current = setTimeout(() => {
+          c(), r?.(p);
+        }, t);
       },
       onPressEnd: (h) => {
         a?.(h), o && c();
@@ -23230,7 +23233,11 @@ const _w = T.span`
   }, P) => {
     const { requiresHold: E, isHolding: k, pressProps: w } = Mw({
       duration: C,
-      onComplete: l,
+      onComplete: (F) => {
+        if (l?.(), i !== "submit") return;
+        const K = F;
+        K.type = "submit", K.form?.requestSubmit(K), K.type = "button";
+      },
       onPressStart: b,
       onPressEnd: x
     }), M = e == null || e === "";
@@ -23243,7 +23250,7 @@ const _w = T.span`
       {
         ...v,
         ref: P,
-        type: i || "button",
+        type: E ? "button" : i || "button",
         "data-size": r,
         "data-nature": n,
         "data-mode": t,

package/dist/packages/components/Button/Button.d.ts

@@ -69,6 +69,8 @@ export type Props = Omit<ButtonProps, "onPress" | "isDisabled" | "children"> & {
      * before `onClick` is called. While pressed, text and icons are hidden (the button
      * keeps its size) and a circular progress fills up. Releasing early resets
      * everything without calling `onClick`.
+     * Works with `type="submit"`: the owner form is submitted once the hold completes,
+     * and never on a short click.
      * Omit it (or pass 0) to get a regular click button. Not supported with `href`.
      */
     holdToSubmitDuration?: number;
@@ -143,6 +145,8 @@ declare const Button: import('react').ForwardRefExoticComponent<Omit<ButtonProps
      * before `onClick` is called. While pressed, text and icons are hidden (the button
      * keeps its size) and a circular progress fills up. Releasing early resets
      * everything without calling `onClick`.
+     * Works with `type="submit"`: the owner form is submitted once the hold completes,
+     * and never on a short click.
      * Omit it (or pass 0) to get a regular click button. Not supported with `href`.
      */
     holdToSubmitDuration?: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agregio-solutions/design-system",
-  "version": "1.101.0",
+  "version": "1.101.1",
   "description": "React Component library and Storybook that is part of the Design System for Agregio Solutions",
   "type": "module",
   "module": "dist/design-system.js",