@itcase/ui-web 1.10.5 → 1.10.7

package/dist/components/Accordion.js

@@ -1 +1 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import r,{useCallback as a,useState as o,useMemo as t}from"react";import l from"clsx";import c from"lodash/castArray";import{useAppearanceConfig as n,useDevicePropsGenerator as s,useStyles as d}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as p}from"@itcase/ui-core/utils";import{T as m,B as z,I as f,D as x}from"../primitives_es_BQqNcRQk.js";import{b as u}from"../default_es_CaWUd9iO.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";const S={...{sizeXXL:{size:"xxl",titleTextSize:"xxl",badgeAppearanceSize:"sizeXS",contentTextSize:"xxl",icon:u.Arrow.ChevronDown},sizeXL:{size:"xl",titleTextSize:"xl",badgeAppearanceSize:"sizeXS",contentTextSize:"l",icon:u.Arrow.ChevronDown},sizeL:{size:"l",titleTextSize:"l",badgeAppearanceSize:"sizeXS",icon:u.Arrow.ChevronDown},sizeM:{size:"m",titleTextSize:"m",badgeAppearanceSize:"sizeXS",contentTextSize:"m",icon:u.Arrow.ChevronDown},sizeS:{size:"s",titleTextSize:"s",badgeAppearanceSize:"sizeXS",contentTextSize:"s",icon:u.Arrow.ChevronDown},sizeXS:{size:"xs",titleTextSize:"xs",badgeAppearanceSize:"sizeXS",contentTextSize:"xs",icon:u.Arrow.ChevronDown},sizeXXS:{size:"xxs",titleTextSize:"xxs",badgeAppearanceSize:"sizeXS",contentTextSize:"xs",icon:u.Arrow.ChevronDown}},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},surfacePrimary:{fill:"surfacePrimary",fillHover:"surfacePrimary",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary sizeM solid rounded",badgeShape:"circular",iconFillIcon:"surfaceItemPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillHover:"surfaceQuaternary",labelTextColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary sizeM solid rounded",badgeShape:"circular",iconFillIcon:"surfaceItemPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillHover:"surfaceSecondary",labelTextColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary sizeM solid rounded",badgeShape:"circular",iconFillIcon:"surfaceItemPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillHover:"surfaceTertiary",labelTextColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary sizeM solid rounded",badgeShape:"circular",iconFillIcon:"surfaceItemPrimary"}},h={appearance:S,setAppearance:e=>{h.appearance=e}};function C(r){const{id:o,appearance:t,className:c,title:u,afterContent:S,beforeContent:C,content:_,isExpanded:T,onClick:b,children:g}=r,y=a(()=>{b&&b({id:o,title:u,content:_,isExpanded:!T})},[o,u,_,T,b]),v=n(t,h),A=s(r,v),{fillClass:w,fillHoverClass:P,titleBorderColorClass:$,titleFillClass:I,titleFillHoverClass:X,titleTextColor:F,titleTextSize:N,titleTextWeight:k,titleWidthClass:D,borderColorClass:E,badgeAppearance:H,badgeAppearanceSize:M,badgeShape:W,badgeSize:j,badgeTextColor:L,badgeTextSize:Q,badgeValue:B,contentTextColor:V,contentTextSize:G,contentTextWeight:q,dividerDirection:J,dividerFill:K,dividerSize:O,icon:R,iconFill:U,iconFillIcon:Y,iconFillSize:Z,iconShape:ee,iconSize:ie,iconSrc:re,shapeClass:ae,showDivider:oe,sizeClass:te,zeroGap:le,zeroPadding:ce}=A,{styles:ne}=d(r);return e("div",{className:l("accordion-item",c,ce&&"accordion-item_zero-padding",le&&"accordion-item_zero-gap",E&&`border-color_${E}`,ae&&`shape_${ae}`,te&&`accordion-item_size_${te}`,T&&"accordion-item_state_open"),style:ne,children:[e("div",{className:l("accordion-item__header",w&&`fill_${w}`,P&&`fill_hover_${P}`),children:[i(m,{className:l("accordion-item__title",$&&`border-color_${$}`,I&&`fill_${I}`,X&&`fill_hover_${X}`,D&&`width_${D}`,b&&"cursor_type_pointer"),size:N,textColor:F,textWeight:k,onClick:y,children:u}),e("div",{className:"accordion-item__action",children:[B&&i(z,{appearance:p(H,M),className:"accordion-item__badge",size:j,textColor:L,textSize:Q,shape:W,value:B}),(R||re)&&i(f,{className:l("accordion-item__icon"),fill:U,fillSize:Z,iconFill:Y,iconSize:ie,imageSrc:re,shape:ee,SvgImage:R,onClick:y})]}),oe&&i(x,{width:"fill",direction:J,size:O,fill:K||"surfaceTertiary"})]}),C,T&&e("div",{className:l("accordion-item__content"),children:[_&&i("div",{className:l("accordion-item__content-inner",w&&`fill_${w}`),children:i(m,{size:G,textColor:V,textWeight:q,children:_})}),g]}),S]})}function _(e){const{appearance:n,className:p,dataTestId:m,dataTour:z,initial:f=[],items:x,isSkeleton:u,isMultiple:S,onClickItem:h,children:_}=e,[T,b]=o(()=>c(f)),g=a(e=>{b(i=>{const r=i.find(i=>i===e.id);return S?r?i.filter(i=>i!==e.id):[...i,e.id]:r?[]:[e.id]}),h&&h(e)},[S,h]),y=t(()=>x?x.map((e,r)=>i(C,{id:e.id,appearance:n,title:e.title,content:e.content,isExpanded:T.includes(e.id),onClick:g},`accordionItem_${e.id||r+1}`)):_?r.Children.toArray(_).map(e=>{if(r.isValidElement(e)){const i=e.props.id||e.key;return r.cloneElement(e,{id:i,isExpanded:T.includes(i),onClick:g})}return e}):[],[x,_,n,T,g]),v=s(e),{fillClass:A,borderColorClass:w,shapeClass:P,widthClass:$}=v,{styles:I}=d(e);return i("div",{className:l(p,"accordion",w&&`border-color_${w}`,A&&`fill_${A}`,P&&`shape_${P}`,$&&`width_${$}`,u&&"skeleton"),"data-testid":m,"data-tour":z,style:I,children:y})}export{_ as Accordion,C as AccordionItem,S as accordionAppearance,h as accordionItemConfig};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import r,{useCallback as a,useState as t,useMemo as o}from"react";import l from"clsx";import c from"lodash/castArray";import{useAppearanceConfig as n,useDevicePropsGenerator as s,useStyles as d}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as p}from"@itcase/ui-core/utils";import{T as m,B as z,I as f,D as x}from"../primitives_es_BQqNcRQk.js";import{b as u}from"../default_es_CaWUd9iO.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";const S={...{sizeXXL:{size:"xxl",titleTextSize:"xxl",badgeAppearanceSize:"sizeXS",contentTextSize:"xxl",icon:u.Arrow.ChevronDown},sizeXL:{size:"xl",titleTextSize:"xl",badgeAppearanceSize:"sizeXS",contentTextSize:"l",icon:u.Arrow.ChevronDown},sizeL:{size:"l",titleTextSize:"l",badgeAppearanceSize:"sizeXS",icon:u.Arrow.ChevronDown},sizeM:{size:"m",titleTextSize:"m",badgeAppearanceSize:"sizeXS",contentTextSize:"m",icon:u.Arrow.ChevronDown},sizeS:{size:"s",titleTextSize:"s",badgeAppearanceSize:"sizeXS",contentTextSize:"s",icon:u.Arrow.ChevronDown},sizeXS:{size:"xs",titleTextSize:"xs",badgeAppearanceSize:"sizeXS",contentTextSize:"xs",icon:u.Arrow.ChevronDown},sizeXXS:{size:"xxs",titleTextSize:"xxs",badgeAppearanceSize:"sizeXS",contentTextSize:"xs",icon:u.Arrow.ChevronDown}},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},surfacePrimary:{fill:"surfacePrimary",fillHover:"surfacePrimary",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary sizeM solid rounded",badgeShape:"circular",iconFillIcon:"surfaceItemPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillHover:"surfaceQuaternary",labelTextColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary sizeM solid rounded",badgeShape:"circular",iconFillIcon:"surfaceItemPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillHover:"surfaceSecondary",labelTextColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary sizeM solid rounded",badgeShape:"circular",iconFillIcon:"surfaceItemPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillHover:"surfaceTertiary",labelTextColor:"surfaceTextPrimary",badgeAppearance:"accentPrimary sizeM solid rounded",badgeShape:"circular",iconFillIcon:"surfaceItemPrimary"}},h={appearance:S,setAppearance:e=>{h.appearance=e}};function C(r){const{id:t,appearance:o,className:c,dataTestId:u,title:S,afterContent:C,beforeContent:T,content:_,isExpanded:b,onClick:g,children:y}=r,v=a(()=>{g&&g({id:t,title:S,content:_,isExpanded:!b})},[t,S,_,b,g]),A=n(o,h),w=s(r,A),{fillClass:I,fillHoverClass:P,titleBorderColorClass:$,titleFillClass:X,titleFillHoverClass:F,titleTextColor:N,titleTextSize:k,titleTextWeight:D,titleWidthClass:E,borderColorClass:H,badgeAppearance:M,badgeAppearanceSize:W,badgeShape:j,badgeSize:L,badgeTextColor:Q,badgeTextSize:B,badgeValue:V,contentTextColor:G,contentTextSize:q,contentTextWeight:J,dividerDirection:K,dividerFill:O,dividerSize:R,icon:U,iconFill:Y,iconFillIcon:Z,iconFillSize:ee,iconShape:ie,iconSize:re,iconSrc:ae,shapeClass:te,showDivider:oe,sizeClass:le,zeroGap:ce,zeroPadding:ne}=w,{styles:se}=d(r);return e("div",{className:l("accordion-item",c,ne&&"accordion-item_zero-padding",ce&&"accordion-item_zero-gap",H&&`border-color_${H}`,te&&`shape_${te}`,le&&`accordion-item_size_${le}`,b&&"accordion-item_state_open"),style:se,children:[e("div",{className:l("accordion-item__header",I&&`fill_${I}`,P&&`fill_hover_${P}`),"data-testid":u&&t?`${u}Item${t}Title`:void 0,children:[i(m,{className:l("accordion-item__title",$&&`border-color_${$}`,X&&`fill_${X}`,F&&`fill_hover_${F}`,E&&`width_${E}`,g&&"cursor_type_pointer"),size:k,textColor:N,textWeight:D,onClick:v,children:S}),e("div",{className:"accordion-item__action",children:[V&&i(z,{appearance:p(M,W),className:"accordion-item__badge",size:L,textColor:Q,textSize:B,shape:j,value:V}),(U||ae)&&i(f,{className:l("accordion-item__icon"),fill:Y,fillSize:ee,iconFill:Z,iconSize:re,imageSrc:ae,shape:ie,SvgImage:U,onClick:v})]}),oe&&i(x,{width:"fill",direction:K,size:R,fill:O||"surfaceTertiary"})]}),T,b&&e("div",{className:l("accordion-item__content"),children:[_&&i("div",{className:l("accordion-item__content-inner",I&&`fill_${I}`),children:i(m,{size:q,textColor:G,textWeight:J,children:_})}),y]}),C]})}function T(e){const{appearance:n,className:p,dataTestId:m,dataTour:z,initial:f=[],items:x,isSkeleton:u,isMultiple:S,onClickItem:h,children:T}=e,[_,b]=t(()=>c(f)),g=a(e=>{b(i=>{const r=i.find(i=>i===e.id);return S?r?i.filter(i=>i!==e.id):[...i,e.id]:r?[]:[e.id]}),h&&h(e)},[S,h]),y=o(()=>x?x.map((e,r)=>i(C,{id:e.id,appearance:n,dataTestId:m,title:e.title,content:e.content,isExpanded:_.includes(e.id),onClick:g},`accordionItem_${e.id||r+1}`)):T?r.Children.toArray(T).map(e=>{if(r.isValidElement(e)){const i=e.props.id||e.key;return r.cloneElement(e,{id:i,dataTestId:e.props.dataTestId??m,isExpanded:_.includes(i),onClick:g})}return e}):[],[x,T,n,m,_,g]),v=s(e),{fillClass:A,borderColorClass:w,shapeClass:I,widthClass:P}=v,{styles:$}=d(e);return i("div",{className:l(p,"accordion",w&&`border-color_${w}`,A&&`fill_${A}`,I&&`shape_${I}`,P&&`width_${P}`,u&&"skeleton"),"data-testid":m,"data-tour":z,style:$,children:y})}export{T as Accordion,C as AccordionItem,S as accordionAppearance,h as accordionItemConfig};