@itcase/ui-web 1.10.12 → 1.10.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Drawer.js +1 -1
- package/dist/cjs/components/Segmented.js +1 -1
- package/dist/components/Drawer.js +1 -1
- package/dist/components/Segmented.js +1 -1
- package/dist/css/styles/bundles.css +2 -0
- package/dist/types/components/Drawer/Drawer.js +3 -3
- package/dist/types/components/Segmented/Segmented.interface.d.ts +2 -1
- package/dist/types/components/Segmented/Segmented.js +3 -1
- package/dist/types/components/Segmented/__test__/SegmentedTest.stories.d.ts +1 -0
- package/dist/types/components/Segmented/__test__/SegmentedTest.stories.js +10 -10
- package/dist/types/components/Segmented/stories/__mock__/index.d.ts +5 -0
- package/dist/types/components/Segmented/stories/__mock__/index.js +5 -0
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),s=require("react-modern-drawer"),
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),s=require("react-modern-drawer"),a=require("@itcase/ui-core/hooks"),c=require("../../primitives_cjs_ocTnUpml.js"),t=require("../../Group_cjs_CiLUYKP7.js"),o=require("../../default_cjs_BMdcKzhJ.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const l={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:o.icons24.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},n={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},d={appearance:l,setAppearance:e=>{d.appearance=e}};exports.Drawer=function(o){const{appearance:l,className:u,dataTestId:I,dataTour:p,type:_,title:x,desc:T,enableOverlay:m,lockBackgroundScroll:f=!0,stickyButton:S,before:h,after:N,close:v,isKeepMounted:w=!1,isOpen:j=!1,onClickClose:z,onClose:C,children:y}=o,g=r.useRef(j),F=r.useRef(!0),q=a.useAppearanceConfig(l,d),E=a.useDevicePropsGenerator(o,q),{direction:O,size:D,titleTextColor:k,titleTextSize:H,titleTextWeight:A,descTextColor:P,descTextSize:b,divider:B,dividerSize:M,zeroPadding:R,closeIcon:$,closeIconFill:G,closeIconFillIcon:X,closeIconFillSize:L,closeIconShape:U,closeIconSize:W,closeIconSrc:K}=E,[J,Q]=r.useState(j?n.ENTER_FINISH:n.EXIT_FINISH);return r.useEffect(()=>{if(F.current)return void(F.current=!1);const e=!0===Boolean(g.current),r=!1===Boolean(j);g.current=j,Q(n.DEFAULT);const i=setTimeout(()=>{Q(j?n.ENTER_FINISH:n.EXIT_FINISH),e&&r&&C&&C()},j?16:300);return()=>{clearTimeout(i)}},[j]),w||J.isInDOM?e.jsx(s,{className:i("drawer",_&&`drawer_type_${_}`,u,S&&"drawer_sticky-button",R&&"drawer_reset-padding"),direction:O||"right",size:D||600,customIdSuffix:I?`_${I}`:void 0,duration:300,enableOverlay:m,lockBackgroundScroll:f,overlayClassName:"drawer__overlay",open:J.isOpen,onClose:z,children:e.jsxs(t.Group,{className:"drawer__content",dataTestId:I,dataTour:p,width:"fill",children:[h&&e.jsx("div",{className:"drawer__before",children:h}),!v&&($||K)&&e.jsx("div",{className:"drawer__close",children:e.jsx(c.Icon,{className:"cursor_type_pointer",dataTestId:I&&`${I}CloseIcon`,fill:G,fillSize:L,iconFill:X,iconSize:W,imageSrc:K,shape:U,SvgImage:$,onClick:z})}),(x||T)&&e.jsxs("div",{className:"drawer__header",children:[e.jsx(c.Title,{className:"drawer__header-title",dataTestId:I&&`${I}Title`,size:H,textColor:k,textWeight:A,children:x}),e.jsx(c.Text,{className:"drawer__header-desc",dataTestId:I&&`${I}Desc`,size:b,textColor:P,children:T})]}),B&&e.jsx(c.Divider,{width:"fill",size:M,fill:"surfaceTertiary"}),y&&e.jsx("div",{className:"drawer__wrapper",children:y}),N&&e.jsx("div",{className:"drawer__after",children:N})]})}):null},exports.drawerAppearance=l,exports.drawerConfig=d;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),l=require("@itcase/ui-core/hooks"),a=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const t={disabledPrimary:{fill:"surfaceDisabled",fillActive:"surfaceTertiary",labelTextActiveColor:"surfaceTextActiveQuaternary",labelTextColor:"surfaceTextQuaternary",borderColor:"surfaceBorderPrimary",iconFill:"surfaceItemPrimary",iconFillActive:"surfaceItemPrimary"},sizeL:{size:"l",labelTextSize:"m",iconSize:"24"},sizeM:{size:"m",labelTextSize:"m",iconSize:"24"},sizeS:{size:"s",labelTextSize:"s",iconSize:"20"},sizeXS:{size:"xs",labelTextSize:"xs",iconSize:"16"},sizeXXS:{size:"xxs",labelTextSize:"xxs",iconSize:"14"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{borderColor:"none"},outlined:{fill:"none",fillActive:"none"},full:{},ghost:{fill:"none",fillActive:"none",borderColor:"none"},errorPrimary:{fill:"errorTertiary",fillActive:"errorPrimary",fillHover:"errorHoverPrimary",labelTextActiveColor:"errorTextPrimary",labelTextColor:"errorTextSecondary",labelTextColorHover:"errorTextPrimary",borderColor:"errorBorderQuaternary",iconFill:"errorItemSecondary",iconFillActive:"errorItemTertiary"},successPrimary:{fill:"successTertiary",fillActive:"successSecondary",fillActiveHover:"successSecondary",fillHover:"successSecondary",labelTextActiveColor:"successTextPrimary",labelTextActiveColorHover:"successTextPrimary",labelTextColor:"successTextQuaternary",labelTextColorHover:"successTextPrimary",borderColor:"successBorderSecondary",iconFill:"successItemSecondary",indicatorFill:"accentPrimary"},defaultPrimary:{fill:"surfacePrimary",fillActive:"accentPrimary",fillActiveHover:"accentPrimary",fillHover:"surfaceHoverSecondary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillActive:"accentPrimary",fillActiveHover:"accentActiveHoverPrimary",fillHover:"surfaceHoverTertiary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextActiveHoverPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},requirePrimary:{fill:"warningTertiary",fillActive:"warningPrimary",fillActiveHover:"warningPrimary",fillHover:"warningSecondary",labelTextActiveColor:"warningTextPrimary",labelTextColor:"warningTextSecondary",labelTextColorHover:"warningTextSecondary",borderColor:"warningBorderSecondary",iconFill:"warningItemSecondary"}},o={appearance:t,setAppearance:e=>{o.appearance=e}};exports.Segmented=t=>{const{appearance:c,className:s,dataTestId:n,dataTour:d,name:v,activeSegment:m,segments:u,isDisabled:f,isSkeleton:x,setActiveSegment:y,onChange:b}=t,T=r.useRef(null),_=r.useMemo(()=>new Map(u.map(e=>[e.value,r.createRef()])),[u]),A=r.useCallback(e=>{b&&b(e.value,v),y&&y(e)},[v,b,y]);r.useEffect(()=>{let e=0,r=0;const i=_.get(m.value);i?.current&&(e=i.current.offsetWidth,r=i.current.offsetLeft),T.current?.style.setProperty("--segmented-active-width",`${e}px`),T.current?.style.setProperty("--segmented-active-x-pos",`${r}px`)},[m,_]);const C=l.useAppearanceConfig(c,o,f),g=l.useDevicePropsGenerator(t,C),{fillActiveClass:S,fillActiveHoverClass:p,fillClass:P,fillHoverClass:z,labelTextActiveColor:h,labelTextActiveColorHover:F,labelTextColor:H,labelTextColorHover:I,labelTextSize:$,labelTextWrap:w,borderColorClass:j,borderTypeClass:q,borderWidthClass:B,iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,indicatorFillClass:k,shapeClass:M,sizeClass:X,widthClass:W}=g;return e.jsx("div",{className:i(s,"segmented",M&&`shape_${M}`,P&&`fill_${P}`,W&&`segmented_width_${W}`,X&&`segmented_size_${X}`,j&&`border-color_${j}`,B&&`border-width_${B}`,q&&`border_type_${q}`,x&&"skeleton"),ref:T,"data-testid":n,"data-tour":d,children:e.jsx("div",{className:"segmented__wrapper",children:e.jsxs("div",{className:i("segmented__wrapper-inner"),children:[u?.map(r=>{const l=m.value===r.value;return e.jsx("div",{className:i("segmented__item",!r.label&&"segmented__item_icon",X&&`segmented__item_size_${X}`,l&&"segmented__item_active",!l&&f&&"segmented__item_state_disabled",l&&f&&"segmented__item_active_state_disabled",l?p&&`fill_active_hover_${p}`:z&&`fill_hover_${z}`,l&&S&&`fill_active_${S}`),ref:_.get(r.value),onClick:()=>!f&&A(r),children:e.jsxs("div",{className:i("segmented__item-label",X&&`segmented_size_${X}`),children:[r.iconBefore||r.iconBeforeActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconBeforeActive||r.iconBefore,isActive:l,isDisabled:f}):null,r.label&&e.jsx(a.Text,{size:$,textColor:H,textColorActive:h,textColorActiveHover:F,textColorHover:I,textWrap:w,isActive:l,children:r.label}),r.icon||r.iconActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconActive||r.icon,isActive:l,isDisabled:f}):null,r.iconAfter||r.iconAfterActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconAfterActive||r.iconAfter,isActive:l,isDisabled:f}):null]})},`${v}-${r.value}`)}),e.jsx("div",{className:i("segmented__indicator",k&&`fill_${k}`)})]})})})},exports.segmentedAppearance=t,exports.segmentedConfig=o;
|
|
1
|
+
"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("clsx"),l=require("@itcase/ui-core/hooks"),a=require("../../primitives_cjs_ocTnUpml.js");require("@rc-component/tooltip"),require("react-inlinesvg"),require("@itcase/ui-core/hoc"),require("@itcase/ui-core/utils");const t={disabledPrimary:{fill:"surfaceDisabled",fillActive:"surfaceTertiary",labelTextActiveColor:"surfaceTextActiveQuaternary",labelTextColor:"surfaceTextQuaternary",borderColor:"surfaceBorderPrimary",iconFill:"surfaceItemPrimary",iconFillActive:"surfaceItemPrimary"},sizeL:{size:"l",labelTextSize:"m",iconSize:"24"},sizeM:{size:"m",labelTextSize:"m",iconSize:"24"},sizeS:{size:"s",labelTextSize:"s",iconSize:"20"},sizeXS:{size:"xs",labelTextSize:"xs",iconSize:"16"},sizeXXS:{size:"xxs",labelTextSize:"xxs",iconSize:"14"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{borderColor:"none"},outlined:{fill:"none",fillActive:"none"},full:{},ghost:{fill:"none",fillActive:"none",borderColor:"none"},errorPrimary:{fill:"errorTertiary",fillActive:"errorPrimary",fillHover:"errorHoverPrimary",labelTextActiveColor:"errorTextPrimary",labelTextColor:"errorTextSecondary",labelTextColorHover:"errorTextPrimary",borderColor:"errorBorderQuaternary",iconFill:"errorItemSecondary",iconFillActive:"errorItemTertiary"},successPrimary:{fill:"successTertiary",fillActive:"successSecondary",fillActiveHover:"successSecondary",fillHover:"successSecondary",labelTextActiveColor:"successTextPrimary",labelTextActiveColorHover:"successTextPrimary",labelTextColor:"successTextQuaternary",labelTextColorHover:"successTextPrimary",borderColor:"successBorderSecondary",iconFill:"successItemSecondary",indicatorFill:"accentPrimary"},defaultPrimary:{fill:"surfacePrimary",fillActive:"accentPrimary",fillActiveHover:"accentPrimary",fillHover:"surfaceHoverSecondary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillActive:"accentPrimary",fillActiveHover:"accentActiveHoverPrimary",fillHover:"surfaceHoverTertiary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextActiveHoverPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},requirePrimary:{fill:"warningTertiary",fillActive:"warningPrimary",fillActiveHover:"warningPrimary",fillHover:"warningSecondary",labelTextActiveColor:"warningTextPrimary",labelTextColor:"warningTextSecondary",labelTextColorHover:"warningTextSecondary",borderColor:"warningBorderSecondary",iconFill:"warningItemSecondary"}},o={appearance:t,setAppearance:e=>{o.appearance=e}};exports.Segmented=t=>{const{appearance:c,className:s,dataTestId:n,dataTour:d,name:v,activeSegment:m,segments:u,isDisabled:f,isSkeleton:x,setActiveSegment:y,onChange:b}=t,T=r.useRef(null),_=r.useMemo(()=>new Map(u.map(e=>[e.value,r.createRef()])),[u]),A=r.useCallback(e=>{b&&b(e.value,v),y&&y(e)},[v,b,y]);r.useEffect(()=>{let e=0,r=0;const i=_.get(m.value);i?.current&&(e=i.current.offsetWidth,r=i.current.offsetLeft),T.current?.style.setProperty("--segmented-active-width",`${e}px`),T.current?.style.setProperty("--segmented-active-x-pos",`${r}px`)},[m,_]);const C=l.useAppearanceConfig(c,o,f),g=l.useDevicePropsGenerator(t,C),{fillActiveClass:S,fillActiveHoverClass:p,fillClass:P,fillHoverClass:z,labelTextActiveColor:h,labelTextActiveColorHover:F,labelTextColor:H,labelTextColorHover:I,labelTextSize:$,labelTextWrap:w,borderColorClass:j,borderTypeClass:q,borderWidthClass:B,iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,indicatorFillClass:k,shapeClass:M,sizeClass:X,widthClass:W}=g;return e.jsx("div",{className:i(s,"segmented",M&&`shape_${M}`,P&&`fill_${P}`,W&&`segmented_width_${W}`,X&&`segmented_size_${X}`,j&&`border-color_${j}`,B&&`border-width_${B}`,q&&`border_type_${q}`,x&&"skeleton"),ref:T,"data-testid":n,"data-tour":d,children:e.jsx("div",{className:"segmented__wrapper",children:e.jsxs("div",{className:i("segmented__wrapper-inner"),children:[u?.map(r=>{const l=m.value===r.value;return e.jsx("div",{className:i("segmented__item",!r.label&&"segmented__item_icon",X&&`segmented__item_size_${X}`,l&&"segmented__item_active",!l&&f&&"segmented__item_state_disabled",l&&f&&"segmented__item_active_state_disabled",l?p&&`fill_active_hover_${p}`:z&&`fill_hover_${z}`,l&&S&&`fill_active_${S}`),ref:_.get(r.value),"data-testid":n&&r.dataTestId?`${n}${r.dataTestId}`:void 0,onClick:()=>!f&&A(r),children:e.jsxs("div",{className:i("segmented__item-label",X&&`segmented_size_${X}`),children:[r.iconBefore||r.iconBeforeActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconBeforeActive||r.iconBefore,isActive:l,isDisabled:f}):null,r.label&&e.jsx(a.Text,{size:$,textColor:H,textColorActive:h,textColorActiveHover:F,textColorHover:I,textWrap:w,isActive:l,children:r.label}),r.icon||r.iconActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconActive||r.icon,isActive:l,isDisabled:f}):null,r.iconAfter||r.iconAfterActive?e.jsx(a.Icon,{className:"segmented__item-icon",iconFill:D,iconFillActive:N,iconFillDisabled:Q,iconSize:L,SvgImage:l&&r.iconAfterActive||r.iconAfter,isActive:l,isDisabled:f}):null]})},`${v}-${r.value}`)}),e.jsx("div",{className:i("segmented__indicator",k&&`fill_${k}`)})]})})})},exports.segmentedAppearance=t,exports.segmentedConfig=o;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as i,useState as o,useEffect as t}from"react";import a from"clsx";import s from"react-modern-drawer";import{useAppearanceConfig as c,useDevicePropsGenerator as l}from"@itcase/ui-core/hooks";import{I as n,d,T as m,D as p}from"../primitives_es_BQqNcRQk.js";import{G as I}from"../Group_es_DIuSNHx3.js";import{d as _}from"../default_es_OK2akzEP.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const u={sizeH3:{titleTextSize:"h3",descTextSize:"s",dividerSize:"s"},...{surfacePrimary:{titleTextColor:"surfaceTextPrimary",descTextColor:"surfaceTextPrimary",closeIcon:_.Action.Close,closeIconFillIcon:"surfaceItemPrimary"}}},T={DEFAULT:{isInDOM:!0,isOpen:!1},ENTER_FINISH:{isInDOM:!0,isOpen:!0},EXIT_FINISH:{isInDOM:!1,isOpen:!1}},f={appearance:u,setAppearance:e=>{f.appearance=e}};function h(_){const{appearance:u,className:h,dataTestId:S,dataTour:N,type:x,title:v,desc:w,enableOverlay:z,lockBackgroundScroll:y=!0,stickyButton:C,before:F,after:g,close:E,isKeepMounted:O=!1,isOpen:k=!1,onClickClose:D,onClose:H,children:b}=_,B=i(k),M=i(!0),P=c(u,f),$=l(_,P),{direction:j,size:A,titleTextColor:R,titleTextSize:X,titleTextWeight:G,descTextColor:L,descTextSize:U,divider:W,dividerSize:K,zeroPadding:q,closeIcon:J,closeIconFill:Q,closeIconFillIcon:V,closeIconFillSize:Y,closeIconShape:Z,closeIconSize:ee,closeIconSrc:re}=$,[ie,oe]=o(k?T.ENTER_FINISH:T.EXIT_FINISH);return t(()=>{if(M.current)return void(M.current=!1);const e=!0===Boolean(B.current),r=!1===Boolean(k);B.current=k,oe(T.DEFAULT);const i=setTimeout(()=>{oe(k?T.ENTER_FINISH:T.EXIT_FINISH),e&&r&&H&&H()},k?16:300);return()=>{clearTimeout(i)}},[k]),O||ie.isInDOM?e(s,{className:a("drawer",x&&`drawer_type_${x}`,h,C&&"drawer_sticky-button",q&&"drawer_reset-padding"),direction:j||"right",size:A||600,customIdSuffix:S?`_${S}`:void 0,duration:300,enableOverlay:z,lockBackgroundScroll:y,overlayClassName:"drawer__overlay",open:ie.isOpen,onClose:D,children:r(I,{className:"drawer__content",dataTestId:S,dataTour:N,width:"fill",children:[F&&e("div",{className:"drawer__before",children:F}),!E&&(J||re)&&e("div",{className:"drawer__close",children:e(n,{className:"cursor_type_pointer",dataTestId:S&&`${S}CloseIcon`,fill:Q,fillSize:Y,iconFill:V,iconSize:ee,imageSrc:re,shape:Z,SvgImage:J,onClick:D})}),(v||w)&&r("div",{className:"drawer__header",children:[e(d,{className:"drawer__header-title",dataTestId:S&&`${S}Title`,size:X,textColor:R,textWeight:G,children:v}),e(m,{className:"drawer__header-desc",dataTestId:S&&`${S}Desc`,size:U,textColor:L,children:w})]}),W&&e(p,{width:"fill",size:K,fill:"surfaceTertiary"}),b&&e("div",{className:"drawer__wrapper",children:b}),g&&e("div",{className:"drawer__after",children:g})]})}):null}export{h as Drawer,u as drawerAppearance,f as drawerConfig};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as i,useMemo as l,createRef as
|
|
1
|
+
import{jsx as e,jsxs as r}from"react/jsx-runtime";import{useRef as i,useMemo as l,createRef as t,useCallback as a,useEffect as o}from"react";import c from"clsx";import{useAppearanceConfig as s,useDevicePropsGenerator as n}from"@itcase/ui-core/hooks";import{I as d,T as m}from"../primitives_es_BQqNcRQk.js";import"@rc-component/tooltip";import"react-inlinesvg";import"@itcase/ui-core/hoc";import"@itcase/ui-core/utils";const v={disabledPrimary:{fill:"surfaceDisabled",fillActive:"surfaceTertiary",labelTextActiveColor:"surfaceTextActiveQuaternary",labelTextColor:"surfaceTextQuaternary",borderColor:"surfaceBorderPrimary",iconFill:"surfaceItemPrimary",iconFillActive:"surfaceItemPrimary"},sizeL:{size:"l",labelTextSize:"m",iconSize:"24"},sizeM:{size:"m",labelTextSize:"m",iconSize:"24"},sizeS:{size:"s",labelTextSize:"s",iconSize:"20"},sizeXS:{size:"xs",labelTextSize:"xs",iconSize:"16"},sizeXXS:{size:"xxs",labelTextSize:"xxs",iconSize:"14"},circular:{shape:"circular"},rounded:{shape:"rounded"},roundedXL:{shape:"roundedXL"},roundedL:{shape:"roundedL"},roundedM:{shape:"roundedM"},roundedS:{shape:"roundedS"},solid:{borderColor:"none"},outlined:{fill:"none",fillActive:"none"},full:{},ghost:{fill:"none",fillActive:"none",borderColor:"none"},errorPrimary:{fill:"errorTertiary",fillActive:"errorPrimary",fillHover:"errorHoverPrimary",labelTextActiveColor:"errorTextPrimary",labelTextColor:"errorTextSecondary",labelTextColorHover:"errorTextPrimary",borderColor:"errorBorderQuaternary",iconFill:"errorItemSecondary",iconFillActive:"errorItemTertiary"},successPrimary:{fill:"successTertiary",fillActive:"successSecondary",fillActiveHover:"successSecondary",fillHover:"successSecondary",labelTextActiveColor:"successTextPrimary",labelTextActiveColorHover:"successTextPrimary",labelTextColor:"successTextQuaternary",labelTextColorHover:"successTextPrimary",borderColor:"successBorderSecondary",iconFill:"successItemSecondary",indicatorFill:"accentPrimary"},defaultPrimary:{fill:"surfacePrimary",fillActive:"accentPrimary",fillActiveHover:"accentPrimary",fillHover:"surfaceHoverSecondary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},defaultSecondary:{fill:"surfaceSecondary",fillActive:"accentPrimary",fillActiveHover:"accentActiveHoverPrimary",fillHover:"surfaceHoverTertiary",labelTextActiveColor:"accentTextPrimary",labelTextActiveColorHover:"accentTextActiveHoverPrimary",labelTextColor:"surfaceTextPrimary",borderColor:"surfaceBorderQuaternary",iconFill:"surfaceItemQuaternary",iconFillActive:"surfaceItemSecondary",indicatorFill:"accentPrimary"},requirePrimary:{fill:"warningTertiary",fillActive:"warningPrimary",fillActiveHover:"warningPrimary",fillHover:"warningSecondary",labelTextActiveColor:"warningTextPrimary",labelTextColor:"warningTextSecondary",labelTextColorHover:"warningTextSecondary",borderColor:"warningBorderSecondary",iconFill:"warningItemSecondary"}},u={appearance:v,setAppearance:e=>{u.appearance=e}},f=v=>{const{appearance:f,className:y,dataTestId:x,dataTour:b,name:T,activeSegment:_,segments:A,isDisabled:C,isSkeleton:p,setActiveSegment:S,onChange:g}=v,P=i(null),z=l(()=>new Map(A.map(e=>[e.value,t()])),[A]),h=a(e=>{g&&g(e.value,T),S&&S(e)},[T,g,S]);o(()=>{let e=0,r=0;const i=z.get(_.value);i?.current&&(e=i.current.offsetWidth,r=i.current.offsetLeft),P.current?.style.setProperty("--segmented-active-width",`${e}px`),P.current?.style.setProperty("--segmented-active-x-pos",`${r}px`)},[_,z]);const F=s(f,u,C),H=n(v,F),{fillActiveClass:$,fillActiveHoverClass:I,fillClass:w,fillHoverClass:B,labelTextActiveColor:N,labelTextActiveColorHover:D,labelTextColor:Q,labelTextColorHover:L,labelTextSize:X,labelTextWrap:k,borderColorClass:M,borderTypeClass:W,borderWidthClass:j,iconFill:q,iconFillActive:E,iconFillDisabled:G,iconSize:J,indicatorFillClass:K,shapeClass:O,sizeClass:R,widthClass:U}=H;return e("div",{className:c(y,"segmented",O&&`shape_${O}`,w&&`fill_${w}`,U&&`segmented_width_${U}`,R&&`segmented_size_${R}`,M&&`border-color_${M}`,j&&`border-width_${j}`,W&&`border_type_${W}`,p&&"skeleton"),ref:P,"data-testid":x,"data-tour":b,children:e("div",{className:"segmented__wrapper",children:r("div",{className:c("segmented__wrapper-inner"),children:[A?.map(i=>{const l=_.value===i.value;return e("div",{className:c("segmented__item",!i.label&&"segmented__item_icon",R&&`segmented__item_size_${R}`,l&&"segmented__item_active",!l&&C&&"segmented__item_state_disabled",l&&C&&"segmented__item_active_state_disabled",l?I&&`fill_active_hover_${I}`:B&&`fill_hover_${B}`,l&&$&&`fill_active_${$}`),ref:z.get(i.value),"data-testid":x&&i.dataTestId?`${x}${i.dataTestId}`:void 0,onClick:()=>!C&&h(i),children:r("div",{className:c("segmented__item-label",R&&`segmented_size_${R}`),children:[i.iconBefore||i.iconBeforeActive?e(d,{className:"segmented__item-icon",iconFill:q,iconFillActive:E,iconFillDisabled:G,iconSize:J,SvgImage:l&&i.iconBeforeActive||i.iconBefore,isActive:l,isDisabled:C}):null,i.label&&e(m,{size:X,textColor:Q,textColorActive:N,textColorActiveHover:D,textColorHover:L,textWrap:k,isActive:l,children:i.label}),i.icon||i.iconActive?e(d,{className:"segmented__item-icon",iconFill:q,iconFillActive:E,iconFillDisabled:G,iconSize:J,SvgImage:l&&i.iconActive||i.icon,isActive:l,isDisabled:C}):null,i.iconAfter||i.iconAfterActive?e(d,{className:"segmented__item-icon",iconFill:q,iconFillActive:E,iconFillDisabled:G,iconSize:J,SvgImage:l&&i.iconAfterActive||i.iconAfter,isActive:l,isDisabled:C}):null]})},`${T}-${i.value}`)}),e("div",{className:c("segmented__indicator",K&&`fill_${K}`)})]})})})};export{f as Segmented,v as segmentedAppearance,u as segmentedConfig};
|
|
@@ -61611,6 +61611,8 @@ h2.react-datepicker__current-month {
|
|
|
61611
61611
|
opacity: 100% !important;
|
|
61612
61612
|
backdrop-filter: var(--drawer-overlay-filter) !important;
|
|
61613
61613
|
}
|
|
61614
|
+
&__content {
|
|
61615
|
+
}
|
|
61614
61616
|
&__close {
|
|
61615
61617
|
padding: 3m 3m 0 3m;
|
|
61616
61618
|
position: relative;
|
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import { useEffect, useRef, useState } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import ReactDrawer from 'react-modern-drawer';
|
|
5
5
|
import { useAppearanceConfig, useDevicePropsGenerator, } from '@itcase/ui-core/hooks';
|
|
6
6
|
import { Divider } from 'src/components/Divider';
|
|
7
|
+
import { Group } from 'src/components/Group';
|
|
7
8
|
import { Icon } from 'src/components/Icon';
|
|
8
9
|
import { Text } from 'src/components/Text';
|
|
9
10
|
import { Title } from 'src/components/Title';
|
|
@@ -53,7 +54,6 @@ function Drawer(props) {
|
|
|
53
54
|
if (!isKeepMounted && !animationState.isInDOM) {
|
|
54
55
|
return null;
|
|
55
56
|
}
|
|
56
|
-
|
|
57
|
-
return (_jsx(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, dataTour && `dataTour-${dataTour}`, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose: onClickClose, children: dataTestId || dataTour ? (_jsx("div", { "data-testid": dataTestId, "data-tour": dataTour, style: { display: 'contents' }, children: drawerContent })) : (drawerContent) }));
|
|
57
|
+
return (_jsx(ReactDrawer, { className: clsx('drawer', type && `drawer_type_${type}`, className, stickyButton && 'drawer_sticky-button', zeroPadding && 'drawer_reset-padding'), direction: direction || 'right', size: size || 600, customIdSuffix: dataTestId ? `_${dataTestId}` : undefined, duration: ANIMATION_DURATION, enableOverlay: enableOverlay, lockBackgroundScroll: lockBackgroundScroll, overlayClassName: "drawer__overlay", open: animationState.isOpen, onClose: onClickClose, children: _jsxs(Group, { className: "drawer__content", dataTestId: dataTestId, dataTour: dataTour, width: "fill", children: [before && _jsx("div", { className: "drawer__before", children: before }), !close && (closeIcon || closeIconSrc) && (_jsx("div", { className: "drawer__close", children: _jsx(Icon, { className: "cursor_type_pointer", dataTestId: dataTestId && `${dataTestId}CloseIcon`, fill: closeIconFill, fillSize: closeIconFillSize, iconFill: closeIconFillIcon, iconSize: closeIconSize, imageSrc: closeIconSrc, shape: closeIconShape, SvgImage: closeIcon, onClick: onClickClose }) })), (title || desc) && (_jsxs("div", { className: "drawer__header", children: [_jsx(Title, { className: "drawer__header-title", dataTestId: dataTestId && `${dataTestId}Title`, size: titleTextSize, textColor: titleTextColor, textWeight: titleTextWeight, children: title }), _jsx(Text, { className: "drawer__header-desc", dataTestId: dataTestId && `${dataTestId}Desc`, size: descTextSize, textColor: descTextColor, children: desc })] })), divider && (_jsx(Divider, { width: "fill", size: dividerSize, fill: "surfaceTertiary" })), children && _jsx("div", { className: "drawer__wrapper", children: children }), after && _jsx("div", { className: "drawer__after", children: after })] }) }));
|
|
58
58
|
}
|
|
59
59
|
export { Drawer, drawerConfig };
|
|
@@ -42,6 +42,7 @@ type SegmentedProps = SegmentedAppearanceProps & StyleAttributes & {
|
|
|
42
42
|
setActiveSegment?: (item: Segment) => void;
|
|
43
43
|
};
|
|
44
44
|
type Segment = {
|
|
45
|
+
dataTestId?: string;
|
|
45
46
|
icon?: IconProps['SvgImage'];
|
|
46
47
|
iconActive?: IconProps['SvgImage'];
|
|
47
48
|
iconAfter?: IconProps['SvgImage'];
|
|
@@ -57,5 +58,5 @@ type SegmentedAppearanceStyle = AppearanceRecord<AppearanceStyleKey, SegmentedAp
|
|
|
57
58
|
type SegmentedAppearanceShape = AppearancePartialRecord<AppearanceShapeKey, SegmentedAppearanceProps, 'shape'>;
|
|
58
59
|
type SegmentedAppearanceSize = AppearancePartialRecord<AppearanceSizeKey, SegmentedAppearanceProps, 'iconSize' | 'labelTextSize' | 'size'>;
|
|
59
60
|
type SegmentedAppearanceKey = NonNullable<SegmentedProps['appearance']>;
|
|
60
|
-
type SegmentedGalleryStory = ComponentGalleryArgs & Pick<SegmentedProps, 'activeSegment' | 'isDisabled' | 'isSkeleton' | 'segments'>;
|
|
61
|
+
type SegmentedGalleryStory = ComponentGalleryArgs & Pick<SegmentedProps, 'activeSegment' | 'dataTestId' | 'isDisabled' | 'isSkeleton' | 'segments'>;
|
|
61
62
|
export type { Segment, SegmentedAppearance, SegmentedAppearanceKey, SegmentedAppearanceShape, SegmentedAppearanceSize, SegmentedAppearanceStyle, SegmentedConfig, SegmentedGalleryStory, SegmentedProps, };
|
|
@@ -42,7 +42,9 @@ const Segmented = (props) => {
|
|
|
42
42
|
: fillActiveHoverClass &&
|
|
43
43
|
`fill_active_hover_${fillActiveHoverClass}`, isActive &&
|
|
44
44
|
fillActiveClass &&
|
|
45
|
-
`fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value),
|
|
45
|
+
`fill_active_${fillActiveClass}`), ref: segmentsRefs.get(item.value), "data-testid": dataTestId && item.dataTestId
|
|
46
|
+
? `${dataTestId}${item.dataTestId}`
|
|
47
|
+
: undefined, onClick: () => !isDisabled && onChangeValue(item), children: _jsxs("div", { className: clsx('segmented__item-label', sizeClass && `segmented_size_${sizeClass}`), children: [item.iconBefore || item.iconBeforeActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
|
|
46
48
|
? item.iconBeforeActive || item.iconBefore
|
|
47
49
|
: item.iconBefore, isActive: isActive, isDisabled: isDisabled })) : null, item.label && (_jsx(Text, { size: labelTextSize, textColor: labelTextColor, textColorActive: labelTextActiveColor, textColorActiveHover: labelTextActiveColorHover, textColorHover: labelTextColorHover, textWrap: labelTextWrap, isActive: isActive, children: item.label })), item.icon || item.iconActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive ? item.iconActive || item.icon : item.icon, isActive: isActive, isDisabled: isDisabled })) : null, item.iconAfter || item.iconAfterActive ? (_jsx(Icon, { className: "segmented__item-icon", iconFill: iconFill, iconFillActive: iconFillActive, iconFillDisabled: iconFillDisabled, iconSize: iconSize, SvgImage: isActive
|
|
48
50
|
? item.iconAfterActive || item.iconAfter
|
|
@@ -18,6 +18,10 @@ const meta = {
|
|
|
18
18
|
};
|
|
19
19
|
export default meta;
|
|
20
20
|
export const Disabled = {
|
|
21
|
+
args: {
|
|
22
|
+
isDisabled: true,
|
|
23
|
+
setActiveSegment: storybookTest['fn'](),
|
|
24
|
+
},
|
|
21
25
|
play: async ({ args, canvas, step, userEvent }) => {
|
|
22
26
|
const segmented = canvas.getByTestId(args.dataTestId);
|
|
23
27
|
await step('Segmented items is disabled', async () => {
|
|
@@ -34,13 +38,12 @@ export const Disabled = {
|
|
|
34
38
|
await storybookTest.expect(setActiveSegment).not.toHaveBeenCalled();
|
|
35
39
|
});
|
|
36
40
|
},
|
|
37
|
-
args: {
|
|
38
|
-
isDisabled: true,
|
|
39
|
-
setActiveSegment: storybookTest['fn'](),
|
|
40
|
-
},
|
|
41
41
|
render: (args) => _jsx(Segmented, { ...args }),
|
|
42
42
|
};
|
|
43
43
|
export const Skeleton = {
|
|
44
|
+
args: {
|
|
45
|
+
isSkeleton: true,
|
|
46
|
+
},
|
|
44
47
|
play: async ({ args, canvas, step }) => {
|
|
45
48
|
await step('Segmented renders with skeleton class', async () => {
|
|
46
49
|
const segmented = canvas.getByTestId(args.dataTestId);
|
|
@@ -48,12 +51,12 @@ export const Skeleton = {
|
|
|
48
51
|
await storybookTest.expect(segmented).toHaveClass('skeleton');
|
|
49
52
|
});
|
|
50
53
|
},
|
|
51
|
-
args: {
|
|
52
|
-
isSkeleton: true,
|
|
53
|
-
},
|
|
54
54
|
render: (args) => _jsx(Segmented, { ...args }),
|
|
55
55
|
};
|
|
56
56
|
export const WithIcon = {
|
|
57
|
+
args: {
|
|
58
|
+
segments: segmentedIconMock,
|
|
59
|
+
},
|
|
57
60
|
play: async ({ args, canvas, step }) => {
|
|
58
61
|
await step('Segmented with icon in DOM', async () => {
|
|
59
62
|
const segmented = canvas.getByTestId(args.dataTestId);
|
|
@@ -63,8 +66,5 @@ export const WithIcon = {
|
|
|
63
66
|
await storybookTest.expect(iconEl).toBeInTheDocument();
|
|
64
67
|
});
|
|
65
68
|
},
|
|
66
|
-
args: {
|
|
67
|
-
segments: segmentedIconMock,
|
|
68
|
-
},
|
|
69
69
|
render: (args) => _jsx(Segmented, { ...args }),
|
|
70
70
|
};
|
|
@@ -3,6 +3,7 @@ declare const segmentedMock: {
|
|
|
3
3
|
value: string;
|
|
4
4
|
};
|
|
5
5
|
segments: {
|
|
6
|
+
dataTestId: string;
|
|
6
7
|
label: string;
|
|
7
8
|
iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
8
9
|
iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
@@ -10,6 +11,7 @@ declare const segmentedMock: {
|
|
|
10
11
|
}[];
|
|
11
12
|
};
|
|
12
13
|
declare const segmentedLabelMock: {
|
|
14
|
+
dataTestId: string;
|
|
13
15
|
label: string;
|
|
14
16
|
value: string;
|
|
15
17
|
}[];
|
|
@@ -21,18 +23,21 @@ declare const segmentedMockSize: {
|
|
|
21
23
|
14: {
|
|
22
24
|
iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
23
25
|
iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
26
|
+
dataTestId: string;
|
|
24
27
|
label: string;
|
|
25
28
|
value: string;
|
|
26
29
|
}[];
|
|
27
30
|
16: {
|
|
28
31
|
iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
29
32
|
iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
33
|
+
dataTestId: string;
|
|
30
34
|
label: string;
|
|
31
35
|
value: string;
|
|
32
36
|
}[];
|
|
33
37
|
20: {
|
|
34
38
|
iconAfter: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
35
39
|
iconBefore: import("react").FunctionComponent<import("react").SVGAttributes<SVGElement>>;
|
|
40
|
+
dataTestId: string;
|
|
36
41
|
label: string;
|
|
37
42
|
value: string;
|
|
38
43
|
}[];
|
|
@@ -5,24 +5,28 @@ const segmentedMock = {
|
|
|
5
5
|
},
|
|
6
6
|
segments: [
|
|
7
7
|
{
|
|
8
|
+
dataTestId: '1Option',
|
|
8
9
|
label: 'Label 1',
|
|
9
10
|
iconAfter: icons24.Placeholder.Default,
|
|
10
11
|
iconBefore: icons24.Placeholder.Default,
|
|
11
12
|
value: '1',
|
|
12
13
|
},
|
|
13
14
|
{
|
|
15
|
+
dataTestId: '2Option',
|
|
14
16
|
label: 'Label 2',
|
|
15
17
|
iconAfter: icons24.Placeholder.Default,
|
|
16
18
|
iconBefore: icons24.Placeholder.Default,
|
|
17
19
|
value: '2',
|
|
18
20
|
},
|
|
19
21
|
{
|
|
22
|
+
dataTestId: '3Option',
|
|
20
23
|
label: 'Label 3',
|
|
21
24
|
iconAfter: icons24.Placeholder.Default,
|
|
22
25
|
iconBefore: icons24.Placeholder.Default,
|
|
23
26
|
value: '3',
|
|
24
27
|
},
|
|
25
28
|
{
|
|
29
|
+
dataTestId: '4Option',
|
|
26
30
|
label: 'Label 4',
|
|
27
31
|
iconAfter: icons24.Placeholder.Default,
|
|
28
32
|
iconBefore: icons24.Placeholder.Default,
|
|
@@ -31,6 +35,7 @@ const segmentedMock = {
|
|
|
31
35
|
],
|
|
32
36
|
};
|
|
33
37
|
const segmentedLabelMock = segmentedMock?.segments.map((segment) => ({
|
|
38
|
+
dataTestId: segment.dataTestId,
|
|
34
39
|
label: segment.label,
|
|
35
40
|
value: segment.value,
|
|
36
41
|
}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itcase/ui-web",
|
|
3
|
-
"version": "1.10.
|
|
3
|
+
"version": "1.10.14",
|
|
4
4
|
"description": "UI components",
|
|
5
5
|
"keywords": "",
|
|
6
6
|
"license": "MIT",
|
|
@@ -53,7 +53,7 @@
|
|
|
53
53
|
"@itcase/tokens-am": "^1.1.57",
|
|
54
54
|
"@itcase/tokens-baikal": "^1.1.54",
|
|
55
55
|
"@itcase/tokens-palette": "^1.1.50",
|
|
56
|
-
"@itcase/ui-core": "^1.10.
|
|
56
|
+
"@itcase/ui-core": "^1.10.14",
|
|
57
57
|
"@rc-component/tooltip": "^1.4.0",
|
|
58
58
|
"axios": "^1.16.1",
|
|
59
59
|
"clsx": "^2.1.1",
|
|
@@ -116,5 +116,5 @@
|
|
|
116
116
|
"storybook": "^10.4.1",
|
|
117
117
|
"typescript": "^6.0.3"
|
|
118
118
|
},
|
|
119
|
-
"gitHead": "
|
|
119
|
+
"gitHead": "f163770bae77f16cb99748b546e8608351d4d9da"
|
|
120
120
|
}
|