ingred-ui 25.12.0 → 25.13.0

package/dist/components/DropdownButton/DropdownButton.stories.d.ts

@@ -26,3 +26,4 @@ export declare const SplitWithIcon: StoryObj<DropdownButtonProps>;
 export declare const WithSelectedValue: StoryObj<DropdownButtonProps>;
 export declare const WithConfirmModal: StoryObj<DropdownButtonProps>;
 export declare const WithLoading: StoryObj<DropdownButtonProps>;
+export declare const WithHeadingAndHelpText: StoryObj<DropdownButtonProps>;

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

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
 import { ButtonSize, ButtonColor } from "../Button/Button";
 export type DropdownButtonColor = Exclude<ButtonColor, "danger">;
-export type ContextMenu2ContentProp = {
+export type ContextMenu2ButtonContent = {
+    type?: undefined;
     text: string;
     onClick: () => void;
     divideTop?: boolean;
@@ -11,6 +12,18 @@ export type ContextMenu2ContentProp = {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
 };
+export type ContextMenu2HeadingContent = {
+    type: "heading";
+    text: string;
+    divideTop?: boolean;
+};
+export type ContextMenu2HelpTextContent = {
+    type: "helpText";
+    text: string;
+    prepend?: ReactNode;
+    divideTop?: boolean;
+};
+export type ContextMenu2ContentProp = ContextMenu2ButtonContent | ContextMenu2HeadingContent | ContextMenu2HelpTextContent;
 export type DropdownButtonProps = {
     size?: ButtonSize;
     color?: DropdownButtonColor;

package/dist/index.es.js

@@ -20,16 +20,13 @@ import*as e from"react";import t,{forwardRef as n,useState as r,useRef as i,useE
   ${Q};
   ${({theme:e,gap:t})=>t&&`gap: ${e.spacing*t}px`};
 `,K=y.div`
-  border-top: ${({theme:e})=>`1px solid ${e.palette.divider}`};
+  border-bottom: ${({theme:e})=>`1px solid ${e.palette.gray.main}`};
 `,ee=y(q)`
-  background-color: ${({disabled:e,theme:t})=>t.palette.gray.light};
+  background-color: ${({theme:e})=>e.palette.gray.highlight};
   color: ${({disabled:e,theme:t})=>e?t.palette.text.disabled:"auto"};
   cursor: ${({disabled:e})=>e?"not-allowed":"pointer"};
-  pointer-events: ${({disabled:e})=>e?"none":"auto"};
+
   justify-content: space-between;
-  transition:
-    background-color 0.3s,
-    border-top 0.3s;
 `,te=y.div`
   padding: ${({theme:e})=>e.spacing}px
     ${({theme:e})=>2*e.spacing}px;
@@ -54,7 +51,7 @@ import*as e from"react";import t,{forwardRef as n,useState as r,useRef as i,useE
   overflow: ${({overflow:e})=>e};
   transition: 0.3s all;
   background-color: ${({theme:e})=>e.palette.white};
-`,oe=n((function(e,n){var{title:a,expanded:l=!1,disabled:s=!1,onChange:c,children:d}=e,u=$(e,["title","expanded","disabled","onChange","children"]);const p=j(),[m,h]=r(l),[g,f]=r("0px"),[b,v]=r("hidden"),y=i(null),x=e=>{var t,n,r,i;e?f(`${null!==(n=null===(t=y.current)||void 0===t?void 0:t.scrollHeight)&&void 0!==n?n:0}px`):(f(`${null!==(i=null===(r=y.current)||void 0===r?void 0:r.scrollHeight)&&void 0!==i?i:0}px`),v("hidden"),setTimeout((()=>f("0px")),100))},w=(e,t)=>{h(t),x(t),c&&c(e,t)};return o((()=>{h(l),x(l)}),[l]),t.createElement(K,Object.assign({ref:n},u),t.createElement(ee,{display:"flex",tabIndex:s?-1:0,role:"button","aria-expanded":m,"aria-controls":`accordion-content-${a}`,expanded:m,disabled:s,onClick:e=>{w(e,!m)},onKeyDown:e=>{"Enter"===e.key&&w(e,!m)}},t.createElement(te,null,a),t.createElement(re,null,t.createElement(ne,{expanded:m},t.createElement(U,{name:"arrow_bottom",size:"md",color:s?p.palette.text.disabled:"black"})))),t.createElement(ie,{ref:y,height:g,overflow:b,onTransitionEnd:()=>{m&&(f("auto"),v("visible"))}},d))})),ae=y.p`
+`,oe=n((function(e,n){var{title:a,expanded:l=!1,disabled:s=!1,onChange:c,children:d}=e,u=$(e,["title","expanded","disabled","onChange","children"]);const p=j(),[m,h]=r(l),[g,f]=r("0px"),[b,v]=r("hidden"),y=i(null),x=e=>{var t,n,r,i;e?f(`${null!==(n=null===(t=y.current)||void 0===t?void 0:t.scrollHeight)&&void 0!==n?n:0}px`):(f(`${null!==(i=null===(r=y.current)||void 0===r?void 0:r.scrollHeight)&&void 0!==i?i:0}px`),v("hidden"),setTimeout((()=>f("0px")),100))},w=(e,t)=>{h(t),x(t),c&&c(e,t)};return o((()=>{h(l),x(l)}),[l]),t.createElement(K,Object.assign({ref:n},u),t.createElement(ee,{display:"flex",tabIndex:s?-1:0,role:"button","aria-expanded":m,"aria-disabled":s,"aria-controls":`accordion-content-${a}`,expanded:m,disabled:s,onClick:e=>{s||w(e,!m)},onKeyDown:e=>{s||"Enter"===e.key&&w(e,!m)}},t.createElement(te,null,a),t.createElement(re,null,t.createElement(ne,{expanded:m},t.createElement(U,{name:"arrow_bottom",size:"md",color:s?p.palette.text.disabled:"black"})))),t.createElement(ie,{ref:y,height:g,overflow:b,onTransitionEnd:()=>{m&&(f("auto"),v("visible"))}},d))})),ae=y.p`
   color: ${({color:e})=>e};
   text-align: ${({align:e})=>e};
   font-size: ${({fontSize:e})=>e};
@@ -2260,6 +2257,10 @@ object-assign
   }
 `,kw=y.div`
   position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 4px;
   box-sizing: border-box;
   padding: 8px ${({isSmallLayout:e})=>e?6:10}px;
   height: 100%;
@@ -2345,10 +2346,6 @@ object-assign
   font-size: 13px;
   line-height: 16px;
   color: ${({theme:e})=>e.palette.black};
-
-  &:not(:last-child) {
-    margin-bottom: 4px;
-  }
 `,$w=y.button`
   padding: 0;
   border: 0;
@@ -2680,7 +2677,7 @@ object-assign
 `,GC=y.span`
   display: flex;
   align-items: center;
-`,jC=({size:t="medium",color:n="primary",onClick:r,split:i=!1,contents:o=[],disabled:a=!1,children:l,icon:s,selectedValue:c,menuWidth:d=200,loading:u=!1})=>{const p=j(),m=!!u,h="string"==typeof u?u:u?"Loading...":void 0,g=((e,t)=>e?p.palette.text.disabled:"primary"===t?p.palette.white:p.palette.black)(a||m,n),f=e.useMemo((()=>({small:"16px",medium:"18px",large:"20px"}[t])),[t]),b=void 0!==c?c:l,v=e.useMemo((()=>e.createElement(U,{name:"arrow_bottom",size:ZC[t].arrowIconSize,color:g})),[t,g]),y=e.useMemo((()=>m?e.createElement(Cs,{width:f}):null),[m,f]),x=!!s,w=!!b,C=m?x?y:void 0:s,E=m?!x&&w||x&&w?h:void 0:b,I=m?x?y:void 0:s,k=(()=>{if(m&&(!x||w))return w?h:void 0})(),A=i?e.createElement(zC,{role:"button"},e.createElement(BC,{size:t,color:n,inline:!0,disabled:a||m,icon:C,onClick:r},E),e.createElement(_C,{size:t,color:n,inline:!0,disabled:a||m,"data-testid":"menu-toggle"},v)):e.createElement(PC,{size:t,color:n,disabled:a||m,"data-testid":"menu-toggle",icon:I},e.createElement(FC,null,m?k?e.createElement(e.Fragment,null,"string"==typeof k?e.createElement(ps,null,k):k,e.createElement(GC,null,e.createElement(gs,{pr:.5}),v)):e.createElement(GC,null,e.createElement(gs,{pr:.5}),v):e.createElement(e.Fragment,null,b&&e.createElement(ps,null,b),e.createElement(GC,null,e.createElement(gs,{pr:.5}),v))));return e.createElement(ts,null,e.createElement(es,{trigger:A,width:d},o.map(((t,n)=>e.createElement(e.Fragment,{key:`${n}-${t.text}`},t.divideTop&&e.createElement(os,null),void 0!==t.checked?e.createElement(Bi,{closeOnChange:!0,checked:t.checked,color:t.color,disabled:t.disabled,prepend:t.icon,onChange:t.onChange},t.text):e.createElement(Ni,{closeOnClick:!0,color:t.color,disabled:t.disabled,prepend:t.icon,onClick:t.onClick},t.text))))))},WC=y.div`
+`,jC=({size:t="medium",color:n="primary",onClick:r,split:i=!1,contents:o=[],disabled:a=!1,children:l,icon:s,selectedValue:c,menuWidth:d=200,loading:u=!1})=>{const p=j(),m=!!u,h="string"==typeof u?u:u?"Loading...":void 0,g=((e,t)=>e?p.palette.text.disabled:"primary"===t?p.palette.white:p.palette.black)(a||m,n),f=e.useMemo((()=>({small:"16px",medium:"18px",large:"20px"}[t])),[t]),b=void 0!==c?c:l,v=e.useMemo((()=>e.createElement(U,{name:"arrow_bottom",size:ZC[t].arrowIconSize,color:g})),[t,g]),y=e.useMemo((()=>m?e.createElement(Cs,{width:f}):null),[m,f]),x=!!s,w=!!b,C=m?x?y:void 0:s,E=m?!x&&w||x&&w?h:void 0:b,I=m?x?y:void 0:s,k=(()=>{if(m&&(!x||w))return w?h:void 0})(),A=i?e.createElement(zC,{role:"button"},e.createElement(BC,{size:t,color:n,inline:!0,disabled:a||m,icon:C,onClick:r},E),e.createElement(_C,{size:t,color:n,inline:!0,disabled:a||m,"data-testid":"menu-toggle"},v)):e.createElement(PC,{size:t,color:n,disabled:a||m,"data-testid":"menu-toggle",icon:I},e.createElement(FC,null,m?k?e.createElement(e.Fragment,null,"string"==typeof k?e.createElement(ps,null,k):k,e.createElement(GC,null,e.createElement(gs,{pr:.5}),v)):e.createElement(GC,null,e.createElement(gs,{pr:.5}),v):e.createElement(e.Fragment,null,b&&e.createElement(ps,null,b),e.createElement(GC,null,e.createElement(gs,{pr:.5}),v))));return e.createElement(ts,null,e.createElement(es,{trigger:A,width:d},o.map(((t,n)=>e.createElement(e.Fragment,{key:`${n}-${t.text}`},t.divideTop&&e.createElement(os,null),(t=>"heading"===t.type?e.createElement(ns,null,t.text):"helpText"===t.type?e.createElement(is,{prepend:t.prepend},t.text):void 0!==t.checked?e.createElement(Bi,{closeOnChange:!0,checked:t.checked,color:t.color,disabled:t.disabled,prepend:t.icon,onChange:t.onChange},t.text):e.createElement(Ni,{closeOnClick:!0,color:t.color,disabled:t.disabled,prepend:t.icon,onClick:t.onClick},t.text))(t))))))},WC=y.div`
   background-color: ${({theme:e})=>e.palette.background.default};
   border: 1px solid ${({theme:e})=>e.palette.divider};
   border-radius: ${({theme:e})=>e.radius}px;
@@ -2698,7 +2695,7 @@ object-assign
 `,UC=y(XC)`
   border-bottom: 1px solid ${({theme:e})=>e.palette.divider};
 `,QC=y(oe)`
-  border-top: none;
+  border-bottom: none;
 `,qC=y.div`
   padding-left: ${({theme:e})=>e.spacing/2}px;
 `,KC=({children:e,disableCheckbox:n=!1,item:r,onAdd:i,onRemove:o})=>{var a;return t.createElement(q,{display:"flex",justifyContent:"space-between"},r.items||n?e:t.createElement(Rh,{checked:null!==(a=null==r?void 0:r.selected)&&void 0!==a&&a,onClick:()=>{r.selected?null==o||o(r):null==i||i(r)}},e))},eE=({disableCheckbox:e,items:n,onAdd:r,onRemove:i})=>t.createElement(YC,null,n.map(((o,a)=>t.createElement(t.Fragment,null,o.items?t.createElement(UC,{key:o.id},t.createElement(QC,{title:t.createElement(qC,null,t.createElement(KC,{item:o,onAdd:r,onRemove:i},o.content))},t.createElement(eE,{disableCheckbox:e,items:o.items,onAdd:r,onRemove:i}))):t.createElement(JC,{key:o.id,isLastIndex:a+1===n.length},t.createElement(KC,{disableCheckbox:e,item:o,onAdd:r,onRemove:i},o.content)))))),tE=y.div`