@itcase/ui-web 1.10.18 → 1.10.20

package/dist/cjs/components/Cell.js

@@ -1 +1 @@
-"use strict";var e=require("react/jsx-runtime"),l=require("clsx"),a=require("@itcase/ui-core/hooks"),r=require("@itcase/ui-core/utils"),i=require("../../primitives_cjs_ocTnUpml.js"),t=require("../../Label_cjs_DI2LmDIX.js");require("@rc-component/tooltip"),require("react"),require("react-inlinesvg"),require("@itcase/ui-core/hoc");const s={sizeXL:{size:"xl",titleLabelAppearanceSize:"sizeXS",titleTextSize:"l",valueLabelAppearanceSize:"sizeS",valueTextSize:"xl"},sizeL:{size:"l",titleLabelAppearanceSize:"sizeXS",titleTextSize:"m",valueLabelAppearanceSize:"sizeS",valueTextSize:"l"},sizeM:{size:"m",titleLabelAppearanceSize:"sizeXS",titleTextSize:"s",valueLabelAppearanceSize:"sizeS",valueTextSize:"m"},sizeS:{size:"s",titleLabelAppearanceSize:"sizeXS",titleTextSize:"xs",valueLabelAppearanceSize:"sizeS",valueTextSize:"s"},sizeEqualL:{size:"l",titleLabelAppearanceSize:"sizeS",titleTextSize:"l",valueLabelAppearanceSize:"sizeS",valueTextSize:"l"},sizeEqualM:{size:"m",titleLabelAppearanceSize:"sizeS",titleTextSize:"m",valueLabelAppearanceSize:"sizeS",valueTextSize:"m"},sizeEqualS:{size:"s",titleLabelAppearanceSize:"sizeXS",titleTextSize:"s",valueLabelAppearanceSize:"sizeXS",valueTextSize:"s"},sizeEqualXL:{size:"xl",titleLabelAppearanceSize:"sizeS",titleTextSize:"xl",valueLabelAppearanceSize:"sizeS",valueTextSize:"xl"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},surfacePrimary:{fill:"surfacePrimary",fillHover:"surfacePrimary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillHover:"surfaceQuaternary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillHover:"surfaceSecondary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillHover:"surfaceTertiary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"}},c={appearance:s,setAppearance:e=>{c.appearance=e}};exports.Cell=function(s){const{appearance:o,className:n,dataTestId:u,dataTour:p,title:z,titleIcon:v,titleLabel:x,titleTag:m,showTitleLabel:d,showValueLabel:S,value:T,valueIcon:b,valueTag:f,before:_,after:y,isActive:I,isSkeleton:L,isEqual:C,isSameWidth:A,onClick:P,onMouseEnter:h}=s,g=a.useAppearanceConfig(o,c),F=a.useDevicePropsGenerator(s,g),{directionClass:j,fillActiveClass:q,fillActiveHoverClass:N,fillClass:$,fillHoverClass:H,titleIconFill:M,titleIconFillHover:w,titleIconFillSize:W,titleIconItemFill:X,titleIconShape:E,titleIconSrc:k,titleLabelAppearance:B,titleLabelAppearanceSize:Q,titleLabelShape:G,titleLabelSize:K,titleLabelTextSize:D,titleTextColor:V,titleTextSize:J,titleTextTruncate:O,titleTextWeight:R,titleTextWrap:U,borderColorActiveClass:Y,borderColorActiveHoverClass:Z,borderColorClass:ee,borderColorHoverClass:le,reverseClass:ae,shapeClass:re,sizeClass:ie,valueIconFill:te,valueIconFillHover:se,valueIconFillSize:ce,valueIconItemFill:oe,valueIconShape:ne,valueIconSrc:ue,valueLabel:pe,valueLabelAppearance:ze,valueLabelAppearanceSize:ve,valueLabelShape:xe,valueLabelSize:me,valueLabelTextSize:de,valueTextAlign:Se,valueTextColor:Te,valueTextSize:be,valueTextTruncate:fe,valueTextWeight:_e,valueTextWrap:ye,widthClass:Ie,zeroGap:Le,zeroPadding:Ce}=F,{data:Ae,styles:Pe}=a.useStyles(s);return e.jsxs("div",{className:l(n,"cell",ie&&`cell_size_${ie}`,I?q&&`fill_active_${q}`:$&&`fill_${$}`,I?N&&`fill_active_hover_${N}`:H&&`fill_hover_${H}`,I?Y&&`border-color_active_${Y}`:ee&&`border-color_${ee}`,I?Z&&`border-color_active_hover_${Z}`:le&&`border-color_hover_${le}`,ae&&`cell_reverse_${ae}`,re&&`cell_shape_${re}`,Ie&&`width_${Ie}`,L&&"skeleton",Ce&&"cell_reset-padding",Le&&"cell_reset-gap"),"data-testid":u,"data-tour":p,style:Pe,onClick:P,onMouseEnter:h,children:[_&&e.jsx("div",{className:"cell__before",children:_}),e.jsxs("div",{className:l("cell__wrapper",j&&`cell__wrapper_direction_${j}`,C&&"cell__wrapper-equal",A&&"cell__wrapper-same-width"),children:[z&&e.jsxs("div",{className:"cell__data",style:Ae,children:[e.jsx(i.Text,{className:"cell__title",size:J,textColor:V,textTruncate:O,textWeight:R,textWrap:U,tag:m,children:z}),(v||k)&&e.jsx(i.Icon,{className:"cell__title-icon",fill:M,fillSize:W,iconFill:X,iconFillHover:w,imageSrc:k,shape:E,SvgImage:v}),(d||x)&&e.jsx(t.Label,{appearance:r.mergeAppearanceKeys(B,Q),className:"cell__title-label",size:K,label:x,labelTextSize:D,shape:G})]}),T&&e.jsxs("div",{className:"cell__data",style:Ae,children:[e.jsx(i.Text,{className:"cell__value",size:be,textAlign:Se,textColor:Te,textTruncate:fe,textWeight:_e,textWrap:ye,tag:f,children:T}),(b||ue)&&e.jsx(i.Icon,{className:"cell__value-icon",fill:te,fillSize:ce,iconFill:oe,iconFillHover:se,imageSrc:ue,shape:ne,SvgImage:b}),(S||pe)&&e.jsx(t.Label,{appearance:r.mergeAppearanceKeys(ze,ve),className:"cell__value-label",size:me,label:pe,labelTextSize:de,shape:xe})]})]}),y&&e.jsx("div",{className:"cell__after",children:y})]})},exports.cellAppearance=s,exports.cellConfig=c;
+"use strict";var e=require("react/jsx-runtime"),l=require("clsx"),a=require("@itcase/ui-core/hooks"),r=require("@itcase/ui-core/utils"),i=require("../../primitives_cjs_ocTnUpml.js"),t=require("../../Label_cjs_DI2LmDIX.js");require("@rc-component/tooltip"),require("react"),require("react-inlinesvg"),require("@itcase/ui-core/hoc");const s={sizeXL:{size:"xl",titleLabelAppearanceSize:"sizeXS",titleTextSize:"l",valueLabelAppearanceSize:"sizeS",valueTextSize:"xl"},sizeL:{size:"l",titleLabelAppearanceSize:"sizeXS",titleTextSize:"m",valueLabelAppearanceSize:"sizeS",valueTextSize:"l"},sizeM:{size:"m",titleLabelAppearanceSize:"sizeXS",titleTextSize:"s",valueLabelAppearanceSize:"sizeS",valueTextSize:"m"},sizeS:{size:"s",titleLabelAppearanceSize:"sizeXS",titleTextSize:"xs",valueLabelAppearanceSize:"sizeS",valueTextSize:"s"},sizeEqualL:{size:"l",titleLabelAppearanceSize:"sizeS",titleTextSize:"l",valueLabelAppearanceSize:"sizeS",valueTextSize:"l"},sizeEqualM:{size:"m",titleLabelAppearanceSize:"sizeS",titleTextSize:"m",valueLabelAppearanceSize:"sizeS",valueTextSize:"m"},sizeEqualS:{size:"s",titleLabelAppearanceSize:"sizeXS",titleTextSize:"s",valueLabelAppearanceSize:"sizeXS",valueTextSize:"s"},sizeEqualXL:{size:"xl",titleLabelAppearanceSize:"sizeS",titleTextSize:"xl",valueLabelAppearanceSize:"sizeS",valueTextSize:"xl"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},surfacePrimary:{fill:"surfacePrimary",fillHover:"surfacePrimary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillHover:"surfaceQuaternary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillHover:"surfaceSecondary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillHover:"surfaceTertiary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"}},c={appearance:s,setAppearance:e=>{c.appearance=e}};exports.Cell=function(s){const{appearance:o,className:n,dataTestId:u,dataTour:p,title:z,titleIcon:d,titleLabel:v,titleTag:x,showTitleLabel:m,showValueLabel:S,value:T,valueIcon:b,valueTag:f,before:_,after:I,isActive:y,isSkeleton:L,isEqual:C,isSameWidth:A,onClick:P,onMouseEnter:h}=s,g=a.useAppearanceConfig(o,c),F=a.useDevicePropsGenerator(s,g),{directionClass:$,fillActiveClass:j,fillActiveHoverClass:q,fillClass:N,fillHoverClass:H,titleIconFill:M,titleIconFillHover:w,titleIconFillSize:W,titleIconItemFill:X,titleIconShape:E,titleIconSrc:k,titleLabelAppearance:B,titleLabelAppearanceSize:V,titleLabelShape:Q,titleLabelSize:G,titleLabelTextSize:K,titleTextColor:D,titleTextSize:J,titleTextTruncate:O,titleTextWeight:R,titleTextWrap:U,borderColorActiveClass:Y,borderColorActiveHoverClass:Z,borderColorClass:ee,borderColorHoverClass:le,reverseClass:ae,shapeClass:re,sizeClass:ie,valueIconFill:te,valueIconFillHover:se,valueIconFillSize:ce,valueIconItemFill:oe,valueIconShape:ne,valueIconSrc:ue,valueLabel:pe,valueLabelAppearance:ze,valueLabelAppearanceSize:de,valueLabelShape:ve,valueLabelSize:xe,valueLabelTextSize:me,valueTextAlign:Se,valueTextColor:Te,valueTextSize:be,valueTextTruncate:fe,valueTextWeight:_e,valueTextWrap:Ie,widthClass:ye,zeroGap:Le,zeroPadding:Ce}=F,{data:Ae,styles:Pe}=a.useStyles(s),he=u&&`${u}Title`,ge=u&&`${u}Value`,Fe=u&&`${u}TitleIcon`,$e=u&&`${u}ValueIcon`,je=u&&`${u}TitleLabel`,qe=u&&`${u}ValueLabel`;return e.jsxs("div",{className:l(n,"cell",ie&&`cell_size_${ie}`,y?j&&`fill_active_${j}`:N&&`fill_${N}`,y?q&&`fill_active_hover_${q}`:H&&`fill_hover_${H}`,y?Y&&`border-color_active_${Y}`:ee&&`border-color_${ee}`,y?Z&&`border-color_active_hover_${Z}`:le&&`border-color_hover_${le}`,ae&&`cell_reverse_${ae}`,re&&`cell_shape_${re}`,ye&&`width_${ye}`,L&&"skeleton",Ce&&"cell_reset-padding",Le&&"cell_reset-gap"),"data-testid":u,"data-tour":p,style:Pe,onClick:P,onMouseEnter:h,children:[_&&e.jsx("div",{className:"cell__before",children:_}),e.jsxs("div",{className:l("cell__wrapper",$&&`cell__wrapper_direction_${$}`,C&&"cell__wrapper-equal",A&&"cell__wrapper-same-width"),children:[z&&e.jsxs("div",{className:"cell__data",style:Ae,children:[e.jsx(i.Text,{className:"cell__title",dataTestId:he,size:J,textColor:D,textTruncate:O,textWeight:R,textWrap:U,tag:x,children:z}),(d||k)&&e.jsx(i.Icon,{className:"cell__title-icon",dataTestId:Fe,fill:M,fillSize:W,iconFill:X,iconFillHover:w,imageSrc:k,shape:E,SvgImage:d}),(m||v)&&e.jsx(t.Label,{appearance:r.mergeAppearanceKeys(B,V),className:"cell__title-label",dataTestId:je,size:G,label:v,labelTextSize:K,shape:Q})]}),T&&e.jsxs("div",{className:"cell__data",style:Ae,children:[e.jsx(i.Text,{className:"cell__value",dataTestId:ge,size:be,textAlign:Se,textColor:Te,textTruncate:fe,textWeight:_e,textWrap:Ie,tag:f,children:T}),(b||ue)&&e.jsx(i.Icon,{className:"cell__value-icon",dataTestId:$e,fill:te,fillSize:ce,iconFill:oe,iconFillHover:se,imageSrc:ue,shape:ne,SvgImage:b}),(S||pe)&&e.jsx(t.Label,{appearance:r.mergeAppearanceKeys(ze,de),className:"cell__value-label",dataTestId:qe,size:xe,label:pe,labelTextSize:me,shape:ve})]})]}),I&&e.jsx("div",{className:"cell__after",children:I})]})},exports.cellAppearance=s,exports.cellConfig=c;

package/dist/components/Cell.js

@@ -1 +1 @@
-import{jsxs as e,jsx as l}from"react/jsx-runtime";import a from"clsx";import{useAppearanceConfig as r,useDevicePropsGenerator as i,useStyles as t}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as c}from"@itcase/ui-core/utils";import{T as s,I as o}from"../primitives_es_BQqNcRQk.js";import{L as n}from"../Label_es_C4QnITZA.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";const u={sizeXL:{size:"xl",titleLabelAppearanceSize:"sizeXS",titleTextSize:"l",valueLabelAppearanceSize:"sizeS",valueTextSize:"xl"},sizeL:{size:"l",titleLabelAppearanceSize:"sizeXS",titleTextSize:"m",valueLabelAppearanceSize:"sizeS",valueTextSize:"l"},sizeM:{size:"m",titleLabelAppearanceSize:"sizeXS",titleTextSize:"s",valueLabelAppearanceSize:"sizeS",valueTextSize:"m"},sizeS:{size:"s",titleLabelAppearanceSize:"sizeXS",titleTextSize:"xs",valueLabelAppearanceSize:"sizeS",valueTextSize:"s"},sizeEqualL:{size:"l",titleLabelAppearanceSize:"sizeS",titleTextSize:"l",valueLabelAppearanceSize:"sizeS",valueTextSize:"l"},sizeEqualM:{size:"m",titleLabelAppearanceSize:"sizeS",titleTextSize:"m",valueLabelAppearanceSize:"sizeS",valueTextSize:"m"},sizeEqualS:{size:"s",titleLabelAppearanceSize:"sizeXS",titleTextSize:"s",valueLabelAppearanceSize:"sizeXS",valueTextSize:"s"},sizeEqualXL:{size:"xl",titleLabelAppearanceSize:"sizeS",titleTextSize:"xl",valueLabelAppearanceSize:"sizeS",valueTextSize:"xl"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},surfacePrimary:{fill:"surfacePrimary",fillHover:"surfacePrimary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillHover:"surfaceQuaternary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillHover:"surfaceSecondary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillHover:"surfaceTertiary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"}},p={appearance:u,setAppearance:e=>{p.appearance=e}};function m(u){const{appearance:m,className:z,dataTestId:v,dataTour:d,title:S,titleIcon:x,titleLabel:f,titleTag:T,showTitleLabel:b,showValueLabel:_,value:y,valueIcon:I,valueTag:L,before:C,after:A,isActive:P,isSkeleton:h,isEqual:g,isSameWidth:F,onClick:N,onMouseEnter:$}=u,H=r(m,p),M=i(u,H),{directionClass:w,fillActiveClass:W,fillActiveHoverClass:X,fillClass:E,fillHoverClass:q,titleIconFill:k,titleIconFillHover:B,titleIconFillSize:j,titleIconItemFill:Q,titleIconShape:G,titleIconSrc:V,titleLabelAppearance:D,titleLabelAppearanceSize:J,titleLabelShape:K,titleLabelSize:O,titleLabelTextSize:R,titleTextColor:U,titleTextSize:Y,titleTextTruncate:Z,titleTextWeight:ee,titleTextWrap:le,borderColorActiveClass:ae,borderColorActiveHoverClass:re,borderColorClass:ie,borderColorHoverClass:te,reverseClass:ce,shapeClass:se,sizeClass:oe,valueIconFill:ne,valueIconFillHover:ue,valueIconFillSize:pe,valueIconItemFill:me,valueIconShape:ze,valueIconSrc:ve,valueLabel:de,valueLabelAppearance:Se,valueLabelAppearanceSize:xe,valueLabelShape:fe,valueLabelSize:Te,valueLabelTextSize:be,valueTextAlign:_e,valueTextColor:ye,valueTextSize:Ie,valueTextTruncate:Le,valueTextWeight:Ce,valueTextWrap:Ae,widthClass:Pe,zeroGap:he,zeroPadding:ge}=M,{data:Fe,styles:Ne}=t(u);return e("div",{className:a(z,"cell",oe&&`cell_size_${oe}`,P?W&&`fill_active_${W}`:E&&`fill_${E}`,P?X&&`fill_active_hover_${X}`:q&&`fill_hover_${q}`,P?ae&&`border-color_active_${ae}`:ie&&`border-color_${ie}`,P?re&&`border-color_active_hover_${re}`:te&&`border-color_hover_${te}`,ce&&`cell_reverse_${ce}`,se&&`cell_shape_${se}`,Pe&&`width_${Pe}`,h&&"skeleton",ge&&"cell_reset-padding",he&&"cell_reset-gap"),"data-testid":v,"data-tour":d,style:Ne,onClick:N,onMouseEnter:$,children:[C&&l("div",{className:"cell__before",children:C}),e("div",{className:a("cell__wrapper",w&&`cell__wrapper_direction_${w}`,g&&"cell__wrapper-equal",F&&"cell__wrapper-same-width"),children:[S&&e("div",{className:"cell__data",style:Fe,children:[l(s,{className:"cell__title",size:Y,textColor:U,textTruncate:Z,textWeight:ee,textWrap:le,tag:T,children:S}),(x||V)&&l(o,{className:"cell__title-icon",fill:k,fillSize:j,iconFill:Q,iconFillHover:B,imageSrc:V,shape:G,SvgImage:x}),(b||f)&&l(n,{appearance:c(D,J),className:"cell__title-label",size:O,label:f,labelTextSize:R,shape:K})]}),y&&e("div",{className:"cell__data",style:Fe,children:[l(s,{className:"cell__value",size:Ie,textAlign:_e,textColor:ye,textTruncate:Le,textWeight:Ce,textWrap:Ae,tag:L,children:y}),(I||ve)&&l(o,{className:"cell__value-icon",fill:ne,fillSize:pe,iconFill:me,iconFillHover:ue,imageSrc:ve,shape:ze,SvgImage:I}),(_||de)&&l(n,{appearance:c(Se,xe),className:"cell__value-label",size:Te,label:de,labelTextSize:be,shape:fe})]})]}),A&&l("div",{className:"cell__after",children:A})]})}export{m as Cell,u as cellAppearance,p as cellConfig};
+import{jsxs as e,jsx as l}from"react/jsx-runtime";import a from"clsx";import{useAppearanceConfig as r,useDevicePropsGenerator as i,useStyles as t}from"@itcase/ui-core/hooks";import{mergeAppearanceKeys as s}from"@itcase/ui-core/utils";import{T as c,I as o}from"../primitives_es_BQqNcRQk.js";import{L as n}from"../Label_es_C4QnITZA.js";import"@rc-component/tooltip";import"react";import"react-inlinesvg";import"@itcase/ui-core/hoc";const u={sizeXL:{size:"xl",titleLabelAppearanceSize:"sizeXS",titleTextSize:"l",valueLabelAppearanceSize:"sizeS",valueTextSize:"xl"},sizeL:{size:"l",titleLabelAppearanceSize:"sizeXS",titleTextSize:"m",valueLabelAppearanceSize:"sizeS",valueTextSize:"l"},sizeM:{size:"m",titleLabelAppearanceSize:"sizeXS",titleTextSize:"s",valueLabelAppearanceSize:"sizeS",valueTextSize:"m"},sizeS:{size:"s",titleLabelAppearanceSize:"sizeXS",titleTextSize:"xs",valueLabelAppearanceSize:"sizeS",valueTextSize:"s"},sizeEqualL:{size:"l",titleLabelAppearanceSize:"sizeS",titleTextSize:"l",valueLabelAppearanceSize:"sizeS",valueTextSize:"l"},sizeEqualM:{size:"m",titleLabelAppearanceSize:"sizeS",titleTextSize:"m",valueLabelAppearanceSize:"sizeS",valueTextSize:"m"},sizeEqualS:{size:"s",titleLabelAppearanceSize:"sizeXS",titleTextSize:"s",valueLabelAppearanceSize:"sizeXS",valueTextSize:"s"},sizeEqualXL:{size:"xl",titleLabelAppearanceSize:"sizeS",titleTextSize:"xl",valueLabelAppearanceSize:"sizeS",valueTextSize:"xl"},solid:{borderColor:"none"},outlined:{fill:"none"},full:{},ghost:{fill:"none",borderColor:"none"},surfacePrimary:{fill:"surfacePrimary",fillHover:"surfacePrimary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceQuaternary:{fill:"surfaceQuaternary",fillHover:"surfaceQuaternary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceSecondary:{fill:"surfaceSecondary",fillHover:"surfaceSecondary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"},surfaceTertiary:{fill:"surfaceTertiary",fillHover:"surfaceTertiary",titleIconItemFill:"surfaceItemPrimary",titleLabelAppearance:"accentPrimary sizeM solid rounded",titleTextColor:"surfaceTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderPrimary",valueIconItemFill:"surfaceItemPrimary",valueLabelAppearance:"accentPrimary sizeM solid rounded",valueTextColor:"surfaceTextPrimary"}},p={appearance:u,setAppearance:e=>{p.appearance=e}};function m(u){const{appearance:m,className:z,dataTestId:d,dataTour:v,title:S,titleIcon:T,titleLabel:x,titleTag:f,showTitleLabel:b,showValueLabel:_,value:I,valueIcon:y,valueTag:L,before:C,after:A,isActive:P,isSkeleton:h,isEqual:g,isSameWidth:F,onClick:$,onMouseEnter:N}=u,H=r(m,p),M=i(u,H),{directionClass:w,fillActiveClass:W,fillActiveHoverClass:X,fillClass:E,fillHoverClass:q,titleIconFill:k,titleIconFillHover:B,titleIconFillSize:V,titleIconItemFill:j,titleIconShape:Q,titleIconSrc:G,titleLabelAppearance:D,titleLabelAppearanceSize:J,titleLabelShape:K,titleLabelSize:O,titleLabelTextSize:R,titleTextColor:U,titleTextSize:Y,titleTextTruncate:Z,titleTextWeight:ee,titleTextWrap:le,borderColorActiveClass:ae,borderColorActiveHoverClass:re,borderColorClass:ie,borderColorHoverClass:te,reverseClass:se,shapeClass:ce,sizeClass:oe,valueIconFill:ne,valueIconFillHover:ue,valueIconFillSize:pe,valueIconItemFill:me,valueIconShape:ze,valueIconSrc:de,valueLabel:ve,valueLabelAppearance:Se,valueLabelAppearanceSize:Te,valueLabelShape:xe,valueLabelSize:fe,valueLabelTextSize:be,valueTextAlign:_e,valueTextColor:Ie,valueTextSize:ye,valueTextTruncate:Le,valueTextWeight:Ce,valueTextWrap:Ae,widthClass:Pe,zeroGap:he,zeroPadding:ge}=M,{data:Fe,styles:$e}=t(u),Ne=d&&`${d}Title`,He=d&&`${d}Value`,Me=d&&`${d}TitleIcon`,we=d&&`${d}ValueIcon`,We=d&&`${d}TitleLabel`,Xe=d&&`${d}ValueLabel`;return e("div",{className:a(z,"cell",oe&&`cell_size_${oe}`,P?W&&`fill_active_${W}`:E&&`fill_${E}`,P?X&&`fill_active_hover_${X}`:q&&`fill_hover_${q}`,P?ae&&`border-color_active_${ae}`:ie&&`border-color_${ie}`,P?re&&`border-color_active_hover_${re}`:te&&`border-color_hover_${te}`,se&&`cell_reverse_${se}`,ce&&`cell_shape_${ce}`,Pe&&`width_${Pe}`,h&&"skeleton",ge&&"cell_reset-padding",he&&"cell_reset-gap"),"data-testid":d,"data-tour":v,style:$e,onClick:$,onMouseEnter:N,children:[C&&l("div",{className:"cell__before",children:C}),e("div",{className:a("cell__wrapper",w&&`cell__wrapper_direction_${w}`,g&&"cell__wrapper-equal",F&&"cell__wrapper-same-width"),children:[S&&e("div",{className:"cell__data",style:Fe,children:[l(c,{className:"cell__title",dataTestId:Ne,size:Y,textColor:U,textTruncate:Z,textWeight:ee,textWrap:le,tag:f,children:S}),(T||G)&&l(o,{className:"cell__title-icon",dataTestId:Me,fill:k,fillSize:V,iconFill:j,iconFillHover:B,imageSrc:G,shape:Q,SvgImage:T}),(b||x)&&l(n,{appearance:s(D,J),className:"cell__title-label",dataTestId:We,size:O,label:x,labelTextSize:R,shape:K})]}),I&&e("div",{className:"cell__data",style:Fe,children:[l(c,{className:"cell__value",dataTestId:He,size:ye,textAlign:_e,textColor:Ie,textTruncate:Le,textWeight:Ce,textWrap:Ae,tag:L,children:I}),(y||de)&&l(o,{className:"cell__value-icon",dataTestId:we,fill:ne,fillSize:pe,iconFill:me,iconFillHover:ue,imageSrc:de,shape:ze,SvgImage:y}),(_||ve)&&l(n,{appearance:s(Se,Te),className:"cell__value-label",dataTestId:Xe,size:fe,label:ve,labelTextSize:be,shape:xe})]})]}),A&&l("div",{className:"cell__after",children:A})]})}export{m as Cell,u as cellAppearance,p as cellConfig};

package/dist/css/styles/bundles.css

@@ -61611,7 +61611,7 @@ h2.react-datepicker__current-month {
     opacity: 100% !important;
     backdrop-filter: var(--drawer-overlay-filter) !important;
   }
-  &__content {
+  &__content.group {
     display: flex;
     flex: 1;
     flex-flow: column nowrap;

package/dist/types/components/Cell/Cell.js

@@ -18,6 +18,12 @@ function Cell(props) {
     const propsGenerator = useDevicePropsGenerator(props, appearanceConfig);
     const { directionClass, fillActiveClass, fillActiveHoverClass, fillClass, fillHoverClass, titleIconFill, titleIconFillHover, titleIconFillSize, titleIconItemFill, titleIconShape, titleIconSrc, titleLabelAppearance, titleLabelAppearanceSize, titleLabelShape, titleLabelSize, titleLabelTextSize, titleTextColor, titleTextSize, titleTextTruncate, titleTextWeight, titleTextWrap, borderColorActiveClass, borderColorActiveHoverClass, borderColorClass, borderColorHoverClass, reverseClass, shapeClass, sizeClass, valueIconFill, valueIconFillHover, valueIconFillSize, valueIconItemFill, valueIconShape, valueIconSrc, valueLabel, valueLabelAppearance, valueLabelAppearanceSize, valueLabelShape, valueLabelSize, valueLabelTextSize, valueTextAlign, valueTextColor, valueTextSize, valueTextTruncate, valueTextWeight, valueTextWrap, widthClass, zeroGap, zeroPadding, } = propsGenerator;
     const { data: dataStyles, styles: cellStyles } = useStyles(props);
+    const titleDataTestId = dataTestId && `${dataTestId}Title`;
+    const valueDataTestId = dataTestId && `${dataTestId}Value`;
+    const titleIconDataTestId = dataTestId && `${dataTestId}TitleIcon`;
+    const valueIconDataTestId = dataTestId && `${dataTestId}ValueIcon`;
+    const titleLabelDataTestId = dataTestId && `${dataTestId}TitleLabel`;
+    const valueLabelDataTestId = dataTestId && `${dataTestId}ValueLabel`;
     return (_jsxs("div", { className: clsx(className, 'cell', sizeClass && `cell_size_${sizeClass}`, !isActive
             ? fillClass && `fill_${fillClass}`
             : fillActiveClass && `fill_active_${fillActiveClass}`, !isActive
@@ -29,6 +35,6 @@ function Cell(props) {
             ? borderColorHoverClass &&
                 `border-color_hover_${borderColorHoverClass}`
             : borderColorActiveHoverClass &&
-                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, isSkeleton && `skeleton`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), "data-testid": dataTestId, "data-tour": dataTour, style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && _jsx("div", { className: "cell__before", children: before }), _jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (_jsxs("div", { className: "cell__data", style: dataStyles, children: [_jsx(Text, { className: "cell__title", size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (_jsx(Icon, { className: "cell__title-icon", fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (_jsx(Label, { appearance: mergeAppearanceKeys(titleLabelAppearance, titleLabelAppearanceSize), className: "cell__title-label", size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (_jsxs("div", { className: "cell__data", style: dataStyles, children: [_jsx(Text, { className: "cell__value", size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (_jsx(Icon, { className: "cell__value-icon", fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (_jsx(Label, { appearance: mergeAppearanceKeys(valueLabelAppearance, valueLabelAppearanceSize), className: "cell__value-label", size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && _jsx("div", { className: "cell__after", children: after })] }));
+                `border-color_active_hover_${borderColorActiveHoverClass}`, reverseClass && `cell_reverse_${reverseClass}`, shapeClass && `cell_shape_${shapeClass}`, widthClass && `width_${widthClass}`, isSkeleton && `skeleton`, zeroPadding && 'cell_reset-padding', zeroGap && 'cell_reset-gap'), "data-testid": dataTestId, "data-tour": dataTour, style: cellStyles, onClick: onClick, onMouseEnter: onMouseEnter, children: [before && _jsx("div", { className: "cell__before", children: before }), _jsxs("div", { className: clsx('cell__wrapper', directionClass && `cell__wrapper_direction_${directionClass}`, isEqual && 'cell__wrapper-equal', isSameWidth && 'cell__wrapper-same-width'), children: [title && (_jsxs("div", { className: "cell__data", style: dataStyles, children: [_jsx(Text, { className: "cell__title", dataTestId: titleDataTestId, size: titleTextSize, textColor: titleTextColor, textTruncate: titleTextTruncate, textWeight: titleTextWeight, textWrap: titleTextWrap, tag: titleTag, children: title }), (titleIcon || titleIconSrc) && (_jsx(Icon, { className: "cell__title-icon", dataTestId: titleIconDataTestId, fill: titleIconFill, fillSize: titleIconFillSize, iconFill: titleIconItemFill, iconFillHover: titleIconFillHover, imageSrc: titleIconSrc, shape: titleIconShape, SvgImage: titleIcon })), (showTitleLabel || titleLabel) && (_jsx(Label, { appearance: mergeAppearanceKeys(titleLabelAppearance, titleLabelAppearanceSize), className: "cell__title-label", dataTestId: titleLabelDataTestId, size: titleLabelSize, label: titleLabel, labelTextSize: titleLabelTextSize, shape: titleLabelShape }))] })), value && (_jsxs("div", { className: "cell__data", style: dataStyles, children: [_jsx(Text, { className: "cell__value", dataTestId: valueDataTestId, size: valueTextSize, textAlign: valueTextAlign, textColor: valueTextColor, textTruncate: valueTextTruncate, textWeight: valueTextWeight, textWrap: valueTextWrap, tag: valueTag, children: value }), (valueIcon || valueIconSrc) && (_jsx(Icon, { className: "cell__value-icon", dataTestId: valueIconDataTestId, fill: valueIconFill, fillSize: valueIconFillSize, iconFill: valueIconItemFill, iconFillHover: valueIconFillHover, imageSrc: valueIconSrc, shape: valueIconShape, SvgImage: valueIcon })), (showValueLabel || valueLabel) && (_jsx(Label, { appearance: mergeAppearanceKeys(valueLabelAppearance, valueLabelAppearanceSize), className: "cell__value-label", dataTestId: valueLabelDataTestId, size: valueLabelSize, label: valueLabel, labelTextSize: valueLabelTextSize, shape: valueLabelShape }))] }))] }), after && _jsx("div", { className: "cell__after", children: after })] }));
 }
 export { Cell, cellConfig };

package/dist/types/components/Cell/__test__/CellTest.stories.js

@@ -17,6 +17,9 @@ const meta = {
 };
 export default meta;
 export const Skeleton = {
+    args: {
+        isSkeleton: true,
+    },
     play: async ({ args, canvas, step }) => {
         await step('Cell renders with skeleton class', async () => {
             const cell = canvas.getByTestId(args.dataTestId);
@@ -24,9 +27,6 @@ export const Skeleton = {
             await storybookTest.expect(cell).toHaveClass('skeleton');
         });
     },
-    args: {
-        isSkeleton: true,
-    },
     render: (args) => _jsx(Cell, { ...args }),
 };
 export const Children = {
@@ -34,13 +34,20 @@ export const Children = {
         await step('Cell has a right children value', async () => {
             const cell = canvas.getByTestId(args.dataTestId);
             await storybookTest.expect(cell).toBeInTheDocument();
-            await storybookTest.expect(cell).toHaveTextContent(String(args.value));
-            await storybookTest.expect(cell).toHaveTextContent(String(args.title));
+            await storybookTest
+                .expect(canvas.getByTestId(`${args.dataTestId}Value`))
+                .toHaveTextContent(String(args.value));
+            await storybookTest
+                .expect(canvas.getByTestId(`${args.dataTestId}Title`))
+                .toHaveTextContent(String(args.title));
         });
     },
     render: (args) => _jsx(Cell, { ...args }),
 };
 export const Reversed = {
+    args: {
+        reverse: true,
+    },
     play: async ({ args, canvas, step }) => {
         await step('Cell with a reversed direction', async () => {
             const cell = canvas.getByTestId(args.dataTestId);
@@ -48,8 +55,5 @@ export const Reversed = {
             await storybookTest.expect(cell).toHaveClass('cell_reverse_true');
         });
     },
-    args: {
-        reverse: true,
-    },
     render: (args) => _jsx(Cell, { ...args }),
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/ui-web",
-  "version": "1.10.18",
+  "version": "1.10.20",
   "description": "UI components",
   "keywords": "",
   "license": "MIT",
@@ -116,5 +116,5 @@
     "storybook": "^10.4.1",
     "typescript": "^6.0.3"
   },
-  "gitHead": "60caa3c47e25c3b96ee0540a91547595c9ab7aed"
+  "gitHead": "af340e79f424605cb4fcc1a66f87cfad2f40c52d"
 }