@bikdotai/bik-component-library 0.0.708-beta.1 → 0.0.708-beta.2
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/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js +1 -1
- package/dist/cjs/components/dropdown/ChipDropdown.d.ts +1 -0
- package/dist/cjs/components/dropdown/ChipDropdown.js +4 -3
- package/dist/cjs/components/dropdown/Dropdown.d.ts +1 -0
- package/dist/cjs/components/tabs/Tabs.js +1 -1
- package/dist/cjs/components/tabs/Tabs.model.d.ts +2 -0
- package/dist/esm/components/analytics-chips-and-dropdowns/chart/heatmap/HeatMap.js +1 -1
- package/dist/esm/components/dropdown/ChipDropdown.d.ts +1 -0
- package/dist/esm/components/dropdown/ChipDropdown.js +5 -4
- package/dist/esm/components/dropdown/Dropdown.d.ts +1 -0
- package/dist/esm/components/tabs/Tabs.js +1 -1
- package/dist/esm/components/tabs/Tabs.model.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,s
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t,s=require("../../../../node_modules/react/jsx-runtime.js"),o=require("react"),x=require("../../../tooltips/Tooltip.js"),n=require("../../../TypographyStyle.js"),r=require("../../../../constants/Theme.js"),i=require("./HeatMapStyled.js");exports.HEAT_GRADING_TYPE=void 0,(e=exports.HEAT_GRADING_TYPE||(exports.HEAT_GRADING_TYPE={}))[e.ABSOLUTE=0]="ABSOLUTE",e[e.RELATIVE=1]="RELATIVE",exports.HEAT=void 0,(t=exports.HEAT||(exports.HEAT={}))[t.LOW=0]="LOW",t[t.MEDIUM=1]="MEDIUM",t[t.HIGH=2]="HIGH",t[t.HIGHEST=3]="HIGHEST";const j={[exports.HEAT.LOW]:"#EBDBFF",[exports.HEAT.MEDIUM]:"#D2AEFF",[exports.HEAT.HIGH]:"#9E77ED",[exports.HEAT.HIGHEST]:"#5E07BB"},p=e=>{if(e>=1e3){const t=e/1e3,s=Math.round(10*t)/10;return`${s}K`}return e.toString()};exports.HEAT_COLORS=j,exports.HeatMap=e=>{let{title:t,xLabels:E,yLabels:c,values:a,heatType:l,absolutHeatValues:d,showAbsoluteValuesOnLegend:u,hideXLabels:m,customComponent:H,heatBoxWidth:R,heatBoxHeight:h,isLooseFit:T}=e;const[L,g]=o.useState(),A=T?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return o.useEffect((()=>{const e=Math.max(...a.flat()),t=Math.min(...a.flat());g(a.map((s=>s.map((s=>((e,t,s,o,x)=>{if(t===exports.HEAT_GRADING_TYPE.ABSOLUTE)return e<=s[0]?exports.HEAT.LOW:e<=s[1]?exports.HEAT.MEDIUM:e<=s[2]?exports.HEAT.HIGH:exports.HEAT.HIGHEST;{const t=(x-o)/4;return e<=o+t?exports.HEAT.LOW:e<=o+2*t?exports.HEAT.MEDIUM:e<=o+3*t?exports.HEAT.HIGH:exports.HEAT.HIGHEST}})(s,l,d||[],t,e))))))}),[a,d,l]),L?s.jsxRuntimeExports.jsxs(i.HeatBoxStyled,Object.assign({isLooseFit:T},{children:[s.jsxRuntimeExports.jsxs("div",Object.assign({className:"top-container"},{children:[s.jsxRuntimeExports.jsxs("div",Object.assign({className:"top-container__heading"},{children:[s.jsxRuntimeExports.jsx(n.TitleMedium,Object.assign({style:{color:r.COLORS.content.primary}},{children:t})),H]})),s.jsxRuntimeExports.jsx("div",Object.assign({className:"top-container__legend"},{children:s.jsxRuntimeExports.jsx(i.LegendContainer,{children:l===exports.HEAT_GRADING_TYPE.ABSOLUTE&&u&&d&&d.length>=3?s.jsxRuntimeExports.jsxs(s.jsxRuntimeExports.Fragment,{children:[s.jsxRuntimeExports.jsxs(i.LegendItem,{children:[s.jsxRuntimeExports.jsx(i.HeatBoxLegend,{color:j[exports.HEAT.LOW]}),s.jsxRuntimeExports.jsx(i.LegendValue,{children:s.jsxRuntimeExports.jsx(n.BodyCaption,Object.assign({color:r.COLORS.content.secondary},{children:p(d[0])}))})]}),s.jsxRuntimeExports.jsxs(i.LegendItem,{children:[s.jsxRuntimeExports.jsx(i.HeatBoxLegend,{color:j[exports.HEAT.MEDIUM]}),s.jsxRuntimeExports.jsx(i.LegendValue,{children:s.jsxRuntimeExports.jsx(n.BodyCaption,Object.assign({color:r.COLORS.content.secondary},{children:p(d[1])}))})]}),s.jsxRuntimeExports.jsxs(i.LegendItem,{children:[s.jsxRuntimeExports.jsx(i.HeatBoxLegend,{color:j[exports.HEAT.HIGH]}),s.jsxRuntimeExports.jsx(i.LegendValue,{children:s.jsxRuntimeExports.jsx(n.BodyCaption,Object.assign({color:r.COLORS.content.secondary},{children:p(d[2])}))})]}),s.jsxRuntimeExports.jsxs(i.LegendItem,{children:[s.jsxRuntimeExports.jsx(i.HeatBoxLegend,{color:j[exports.HEAT.HIGHEST]}),s.jsxRuntimeExports.jsx(i.LegendValue,{children:s.jsxRuntimeExports.jsx(n.BodyCaption,Object.assign({color:r.COLORS.content.secondary},{children:d[3]?p(d[3]):p(d[2])+"+"}))})]})]}):s.jsxRuntimeExports.jsxs(i.LegendLabels,{children:[s.jsxRuntimeExports.jsx(i.LegendCaption,{children:s.jsxRuntimeExports.jsx(n.Caption,{children:"Less"})}),s.jsxRuntimeExports.jsx(i.HeatBoxLegend,{color:j[exports.HEAT.LOW]}),s.jsxRuntimeExports.jsx(i.HeatBoxLegend,{color:j[exports.HEAT.MEDIUM]}),s.jsxRuntimeExports.jsx(i.HeatBoxLegend,{color:j[exports.HEAT.HIGH]}),s.jsxRuntimeExports.jsx(i.HeatBoxLegend,{color:j[exports.HEAT.HIGHEST]}),s.jsxRuntimeExports.jsx(i.LegendCaption,{children:s.jsxRuntimeExports.jsx(n.Caption,{children:"More"})})]})})}))]})),s.jsxRuntimeExports.jsx("table",Object.assign({style:A},{children:s.jsxRuntimeExports.jsxs("tbody",{children:[c.map(((e,t)=>s.jsxRuntimeExports.jsxs("tr",{children:[s.jsxRuntimeExports.jsx("td",{children:s.jsxRuntimeExports.jsx(n.BodyTiny,Object.assign({style:{color:r.COLORS.content.placeholder}},{children:e}))}),E.map(((e,o)=>s.jsxRuntimeExports.jsx("td",{children:s.jsxRuntimeExports.jsx(x.Tooltip,Object.assign({body:p(a[t][o]),placement:"bottom"},{children:s.jsxRuntimeExports.jsx(i.HeatBox,{color:j[L[t][o]],heatBoxWidth:R,heatBoxHeight:h})}))},e)))]},e))),!m&&s.jsxRuntimeExports.jsxs("tr",{children:[s.jsxRuntimeExports.jsx("th",{}),E.map((e=>s.jsxRuntimeExports.jsx("th",{children:s.jsxRuntimeExports.jsx(n.BodyTiny,Object.assign({style:{color:r.COLORS.content.placeholder}},{children:e}))},e)))]})]})}))]})):s.jsxRuntimeExports.jsx(s.jsxRuntimeExports.Fragment,{})};
|
|
@@ -4,4 +4,5 @@ export declare const ChipDropdown: React.FC<DropdownProps>;
|
|
|
4
4
|
export declare const ChipDropdownContainer: import("styled-components").StyledComponent<"div", any, {
|
|
5
5
|
width?: string | undefined;
|
|
6
6
|
height?: string | undefined;
|
|
7
|
+
backgroundColor?: string | undefined;
|
|
7
8
|
}, never>;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/_tslib.js"),r=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),o=require("styled-components"),n=require("../tag/Tag.js"),i=require("../../constants/Theme.js"),s=require("../../assets/icons/chevronDown.svg.js"),l=require("../../assets/icons/chevronDownOutline.svg.js"),a=require("../../assets/icons/chevronUpOutline.svg.js"),d=require("../TypographyStyle.js"),u=require("./DropdownPopover/index.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=c(o);const g=o=>{var{placeHolder:c,onSelect:p,backgroundColor:g}=o,x=e.__rest(o,["placeHolder","onSelect","backgroundColor"]);const[j,v]=t.useState(!1),f=t.useRef();return r.jsxRuntimeExports.jsx(u.DropdownPopover,Object.assign({ref:f,onDropdownVisbilityChange:e=>v(e),onSelect:function(e){null==p||p(e)}},x,{children:"default"==x.inputType?r.jsxRuntimeExports.jsxs(h,Object.assign({width:null==x?void 0:x.width,height:null==x?void 0:x.height,backgroundColor:g},{children:[r.jsxRuntimeExports.jsx(d.BodySecondary,Object.assign({color:i.COLORS.content.placeholder},{children:c})),r.jsxRuntimeExports.jsx(s.default,{style:{transform:j?"rotate(180deg)":"rotate(0deg)"},width:20,height:20,color:i.COLORS.content.primary})]})):r.jsxRuntimeExports.jsx(n.Tag,{tagText:null!=c?c:"",theme:"light",type:"neutral",variant:"regular",TrailingIcon:j?a.default:l.default})}))};g.displayName="ChipDropdown";const h=p.default.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: row;
|
|
4
4
|
width: ${e=>(null==e?void 0:e.width)?e.width:"240px"};
|
|
@@ -6,9 +6,10 @@
|
|
|
6
6
|
gap: 8px;
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
align-items: center;
|
|
9
|
-
border: 1px solid ${
|
|
9
|
+
border: 1px solid ${i.COLORS.stroke.primary};
|
|
10
10
|
border-radius: 4px;
|
|
11
11
|
padding-left: 8px;
|
|
12
12
|
padding-right: 8px;
|
|
13
13
|
cursor: pointer;
|
|
14
|
-
|
|
14
|
+
${e=>e.backgroundColor&&`background-color: ${e.backgroundColor};`}
|
|
15
|
+
`;exports.ChipDropdown=g,exports.ChipDropdownContainer=h;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),s=require("../../constants/Theme.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../node_modules/react/jsx-runtime.js"),t=require("react"),s=require("../../constants/Theme.js"),n=require("../tag/Tag.js"),r=require("./Tabs.styles.js");const a=n=>{var a,i;const{tabs:l,initialTab:c,onTabSelected:d,TabItemStyledProps:u,selectedTab:x,extendedBorder:m,rightComponent:b,size:p="default",isSquared:T=!1,containerStyles:g}=n,[j,y]=t.useState(c||l[0].key),{colorsV2:E}=s.DEFAULT_THEME;t.useEffect((()=>{x&&x!==j&&y(x)}),[x,j]);const C=n.backgroundColor,v=null!==(a=n.selectedTextColor)&&void 0!==a?a:E.background.brand,h=null!==(i=n.textColor)&&void 0!==i?i:E.content.secondary;return e.jsxRuntimeExports.jsxs(r.TabHeader,Object.assign({style:null!=g?g:{},bgColor:C,"data-test":n["data-test"]},{children:[l.map(((t,s)=>{var r;return e.jsxRuntimeExports.jsx(o,{hasEqualSpacing:n.hasEqualSpacing,selectedTextColor:v,textColor:h,tab:t,currentTab:j,TabItemStyledProps:u,IconComponent:t.icon,size:p,setCurrentTab:e=>{y(e),d&&d(e)},isSquared:T,isFirstlement:0==s,isLastElement:s==l.length-1,iconPosition:null!==(r=t.iconPosition)&&void 0!==r?r:"left"},t.key)})),m&&e.jsxRuntimeExports.jsx(r.EmptyTab,{}),e.jsxRuntimeExports.jsx(r.RightComponent,{children:b})]}))},o=a=>{var o,i;const{tab:l,currentTab:c,setCurrentTab:d,TabItemStyledProps:u,IconComponent:x,iconPosition:m="left",size:b="default",isSquared:p=!1,isFirstlement:T,isLastElement:g}=a,j=l.key===c,{colorsV2:y}=s.DEFAULT_THEME,E=t.useCallback((()=>Object.assign(Object.assign({},u),{borderRadius:a.isSquared?T?"4px 0px 0px 4px":g?"0px 4px 4px 0px":"":""})),[]);return e.jsxRuntimeExports.jsxs(r.TabItem,Object.assign({style:E(),selected:j,hasEqualSpacing:a.hasEqualSpacing,onClick:()=>d(a.tab.key),selectedTextColor:a.selectedTextColor,isSquared:p,"data-test":a["data-test"]},{children:[x&&"left"===m&&e.jsxRuntimeExports.jsx(x,{selected:j?y.background.brand:y.content.secondary}),void 0!==l.leadingNumber&&null!==l.leadingNumber&&e.jsxRuntimeExports.jsx(r.TrailingNumberContainer,Object.assign({selected:j},{children:e.jsxRuntimeExports.jsx(n.Tag,{tagText:null!==(o=null==l?void 0:l.leadingNumber)&&void 0!==o?o:0,theme:"dark",type:l.numberTagType,variant:"circle",color:y.content.primaryInverse})})),e.jsxRuntimeExports.jsx(r.TabItemText,Object.assign({style:"small"===b?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:a.textColor,selectedTextColor:a.selectedTextColor,selected:j},{children:l.title})),void 0!==l.trailingNumber&&null!==l.trailingNumber&&e.jsxRuntimeExports.jsx(r.TrailingNumberContainer,Object.assign({selected:j},{children:e.jsxRuntimeExports.jsx(n.Tag,{tagText:null!==(i=null==l?void 0:l.trailingNumber)&&void 0!==i?i:0,theme:"dark",type:l.numberTagType,variant:"circle",color:y.content.primaryInverse})})),x&&"right"===m&&e.jsxRuntimeExports.jsx(x,{selected:j?y.background.brand:y.content.secondary})]}))};a.displayName="Tabs",o.displayName="TabItemComponent",exports.TabItemComponent=o,exports.Tabs=a;
|
|
@@ -21,6 +21,7 @@ export interface TabInterface {
|
|
|
21
21
|
trailingNumber?: number;
|
|
22
22
|
numberTagType?: TagType;
|
|
23
23
|
leadingNumber?: number;
|
|
24
|
+
iconPosition?: 'left' | 'right';
|
|
24
25
|
}
|
|
25
26
|
export interface TabViewHeaderProps {
|
|
26
27
|
hasEqualSpacing?: boolean;
|
|
@@ -58,4 +59,5 @@ export interface TabItemComponentProps {
|
|
|
58
59
|
isFirstlement?: boolean;
|
|
59
60
|
isLastElement?: boolean;
|
|
60
61
|
'data-test'?: string;
|
|
62
|
+
iconPosition?: 'left' | 'right';
|
|
61
63
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as
|
|
1
|
+
import{j as e}from"../../../../node_modules/react/jsx-runtime.js";import{useState as s,useEffect as t}from"react";import{Tooltip as n}from"../../../tooltips/Tooltip.js";import{TitleMedium as o,BodyCaption as r,Caption as c,BodyTiny as l}from"../../../TypographyStyle.js";import{COLORS as i}from"../../../../constants/Theme.js";import{HeatBoxStyled as a,LegendContainer as j,LegendItem as d,HeatBoxLegend as h,LegendValue as x,LegendLabels as m,LegendCaption as H,HeatBox as p}from"./HeatMapStyled.js";var E,O;!function(e){e[e.ABSOLUTE=0]="ABSOLUTE",e[e.RELATIVE=1]="RELATIVE"}(E||(E={})),function(e){e[e.LOW=0]="LOW",e[e.MEDIUM=1]="MEDIUM",e[e.HIGH=2]="HIGH",e[e.HIGHEST=3]="HIGHEST"}(O||(O={}));const g={[O.LOW]:"#EBDBFF",[O.MEDIUM]:"#D2AEFF",[O.HIGH]:"#9E77ED",[O.HIGHEST]:"#5E07BB"},I=e=>{if(e>=1e3){const s=e/1e3,t=Math.round(10*s)/10;return`${t}K`}return e.toString()},b=b=>{let{title:L,xLabels:y,yLabels:M,values:u,heatType:T,absolutHeatValues:f,showAbsoluteValuesOnLegend:G,hideXLabels:S,customComponent:B,heatBoxWidth:U,heatBoxHeight:D,isLooseFit:W}=b;const[A,F]=s(),v=W?{display:"flex",justifyContent:"center",alignItems:"center"}:{};return t((()=>{const e=Math.max(...u.flat()),s=Math.min(...u.flat());F(u.map((t=>t.map((t=>((e,s,t,n,o)=>{if(s===E.ABSOLUTE)return e<=t[0]?O.LOW:e<=t[1]?O.MEDIUM:e<=t[2]?O.HIGH:O.HIGHEST;{const s=(o-n)/4;return e<=n+s?O.LOW:e<=n+2*s?O.MEDIUM:e<=n+3*s?O.HIGH:O.HIGHEST}})(t,T,f||[],s,e))))))}),[u,f,T]),A?e.jsxs(a,Object.assign({isLooseFit:W},{children:[e.jsxs("div",Object.assign({className:"top-container"},{children:[e.jsxs("div",Object.assign({className:"top-container__heading"},{children:[e.jsx(o,Object.assign({style:{color:i.content.primary}},{children:L})),B]})),e.jsx("div",Object.assign({className:"top-container__legend"},{children:e.jsx(j,{children:T===E.ABSOLUTE&&G&&f&&f.length>=3?e.jsxs(e.Fragment,{children:[e.jsxs(d,{children:[e.jsx(h,{color:g[O.LOW]}),e.jsx(x,{children:e.jsx(r,Object.assign({color:i.content.secondary},{children:I(f[0])}))})]}),e.jsxs(d,{children:[e.jsx(h,{color:g[O.MEDIUM]}),e.jsx(x,{children:e.jsx(r,Object.assign({color:i.content.secondary},{children:I(f[1])}))})]}),e.jsxs(d,{children:[e.jsx(h,{color:g[O.HIGH]}),e.jsx(x,{children:e.jsx(r,Object.assign({color:i.content.secondary},{children:I(f[2])}))})]}),e.jsxs(d,{children:[e.jsx(h,{color:g[O.HIGHEST]}),e.jsx(x,{children:e.jsx(r,Object.assign({color:i.content.secondary},{children:f[3]?I(f[3]):I(f[2])+"+"}))})]})]}):e.jsxs(m,{children:[e.jsx(H,{children:e.jsx(c,{children:"Less"})}),e.jsx(h,{color:g[O.LOW]}),e.jsx(h,{color:g[O.MEDIUM]}),e.jsx(h,{color:g[O.HIGH]}),e.jsx(h,{color:g[O.HIGHEST]}),e.jsx(H,{children:e.jsx(c,{children:"More"})})]})})}))]})),e.jsx("table",Object.assign({style:v},{children:e.jsxs("tbody",{children:[M.map(((s,t)=>e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx(l,Object.assign({style:{color:i.content.placeholder}},{children:s}))}),y.map(((s,o)=>e.jsx("td",{children:e.jsx(n,Object.assign({body:I(u[t][o]),placement:"bottom"},{children:e.jsx(p,{color:g[A[t][o]],heatBoxWidth:U,heatBoxHeight:D})}))},s)))]},s))),!S&&e.jsxs("tr",{children:[e.jsx("th",{}),y.map((s=>e.jsx("th",{children:e.jsx(l,Object.assign({style:{color:i.content.placeholder}},{children:s}))},s)))]})]})}))]})):e.jsx(e.Fragment,{})};export{O as HEAT,g as HEAT_COLORS,E as HEAT_GRADING_TYPE,b as HeatMap};
|
|
@@ -4,4 +4,5 @@ export declare const ChipDropdown: React.FC<DropdownProps>;
|
|
|
4
4
|
export declare const ChipDropdownContainer: import("styled-components").StyledComponent<"div", any, {
|
|
5
5
|
width?: string | undefined;
|
|
6
6
|
height?: string | undefined;
|
|
7
|
+
backgroundColor?: string | undefined;
|
|
7
8
|
}, never>;
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import{__rest as
|
|
1
|
+
import{__rest as o}from"../../_virtual/_tslib.js";import{j as r}from"../../node_modules/react/jsx-runtime.js";import{useState as t,useRef as e}from"react";import i from"styled-components";import{Tag as n}from"../tag/Tag.js";import{COLORS as s}from"../../constants/Theme.js";import l from"../../assets/icons/chevronDown.svg.js";import a from"../../assets/icons/chevronDownOutline.svg.js";import d from"../../assets/icons/chevronUpOutline.svg.js";import{BodySecondary as c}from"../TypographyStyle.js";import{DropdownPopover as p}from"./DropdownPopover/index.js";const g=i=>{var{placeHolder:g,onSelect:m,backgroundColor:u}=i,j=o(i,["placeHolder","onSelect","backgroundColor"]);const[f,x]=t(!1),v=e();return r.jsx(p,Object.assign({ref:v,onDropdownVisbilityChange:o=>x(o),onSelect:function(o){null==m||m(o)}},j,{children:"default"==j.inputType?r.jsxs(h,Object.assign({width:null==j?void 0:j.width,height:null==j?void 0:j.height,backgroundColor:u},{children:[r.jsx(c,Object.assign({color:s.content.placeholder},{children:g})),r.jsx(l,{style:{transform:f?"rotate(180deg)":"rotate(0deg)"},width:20,height:20,color:s.content.primary})]})):r.jsx(n,{tagText:null!=g?g:"",theme:"light",type:"neutral",variant:"regular",TrailingIcon:f?d:a})}))};g.displayName="ChipDropdown";const h=i.div`
|
|
2
2
|
display: flex;
|
|
3
3
|
flex-direction: row;
|
|
4
|
-
width: ${
|
|
5
|
-
height: ${
|
|
4
|
+
width: ${o=>(null==o?void 0:o.width)?o.width:"240px"};
|
|
5
|
+
height: ${o=>(null==o?void 0:o.height)?o.height:"32px"};
|
|
6
6
|
gap: 8px;
|
|
7
7
|
justify-content: space-between;
|
|
8
8
|
align-items: center;
|
|
@@ -11,4 +11,5 @@ import{__rest as t}from"../../_virtual/_tslib.js";import{j as e}from"../../node_
|
|
|
11
11
|
padding-left: 8px;
|
|
12
12
|
padding-right: 8px;
|
|
13
13
|
cursor: pointer;
|
|
14
|
-
|
|
14
|
+
${o=>o.backgroundColor&&`background-color: ${o.backgroundColor};`}
|
|
15
|
+
`;export{g as ChipDropdown,h as ChipDropdownContainer};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useState as t,useEffect as
|
|
1
|
+
import{j as e}from"../../node_modules/react/jsx-runtime.js";import{useState as t,useEffect as n,useCallback as s}from"react";import{DEFAULT_THEME as o}from"../../constants/Theme.js";import{Tag as r}from"../tag/Tag.js";import{TabHeader as a,EmptyTab as l,RightComponent as i,TabItem as c,TrailingNumberContainer as d,TabItemText as u}from"./Tabs.styles.js";const m=s=>{var r,c;const{tabs:d,initialTab:u,onTabSelected:m,TabItemStyledProps:x,selectedTab:p,extendedBorder:g,rightComponent:T,size:j="default",isSquared:y=!1,containerStyles:C}=s,[h,v]=t(u||d[0].key),{colorsV2:S}=o;n((()=>{p&&p!==h&&v(p)}),[p,h]);const f=s.backgroundColor,k=null!==(r=s.selectedTextColor)&&void 0!==r?r:S.background.brand,q=null!==(c=s.textColor)&&void 0!==c?c:S.content.secondary;return e.jsxs(a,Object.assign({style:null!=C?C:{},bgColor:f,"data-test":s["data-test"]},{children:[d.map(((t,n)=>{var o;return e.jsx(b,{hasEqualSpacing:s.hasEqualSpacing,selectedTextColor:k,textColor:q,tab:t,currentTab:h,TabItemStyledProps:x,IconComponent:t.icon,size:j,setCurrentTab:e=>{v(e),m&&m(e)},isSquared:y,isFirstlement:0==n,isLastElement:n==d.length-1,iconPosition:null!==(o=t.iconPosition)&&void 0!==o?o:"left"},t.key)})),g&&e.jsx(l,{}),e.jsx(i,{children:T})]}))},b=t=>{var n,a;const{tab:l,currentTab:i,setCurrentTab:m,TabItemStyledProps:b,IconComponent:x,iconPosition:p="left",size:g="default",isSquared:T=!1,isFirstlement:j,isLastElement:y}=t,C=l.key===i,{colorsV2:h}=o,v=s((()=>Object.assign(Object.assign({},b),{borderRadius:t.isSquared?j?"4px 0px 0px 4px":y?"0px 4px 4px 0px":"":""})),[]);return e.jsxs(c,Object.assign({style:v(),selected:C,hasEqualSpacing:t.hasEqualSpacing,onClick:()=>m(t.tab.key),selectedTextColor:t.selectedTextColor,isSquared:T,"data-test":t["data-test"]},{children:[x&&"left"===p&&e.jsx(x,{selected:C?h.background.brand:h.content.secondary}),void 0!==l.leadingNumber&&null!==l.leadingNumber&&e.jsx(d,Object.assign({selected:C},{children:e.jsx(r,{tagText:null!==(n=null==l?void 0:l.leadingNumber)&&void 0!==n?n:0,theme:"dark",type:l.numberTagType,variant:"circle",color:h.content.primaryInverse})})),e.jsx(u,Object.assign({style:"small"===g?{fontSize:14,fontStyle:"normal",fontWeight:600}:void 0,textColor:t.textColor,selectedTextColor:t.selectedTextColor,selected:C},{children:l.title})),void 0!==l.trailingNumber&&null!==l.trailingNumber&&e.jsx(d,Object.assign({selected:C},{children:e.jsx(r,{tagText:null!==(a=null==l?void 0:l.trailingNumber)&&void 0!==a?a:0,theme:"dark",type:l.numberTagType,variant:"circle",color:h.content.primaryInverse})})),x&&"right"===p&&e.jsx(x,{selected:C?h.background.brand:h.content.secondary})]}))};m.displayName="Tabs",b.displayName="TabItemComponent";export{b as TabItemComponent,m as Tabs};
|
|
@@ -21,6 +21,7 @@ export interface TabInterface {
|
|
|
21
21
|
trailingNumber?: number;
|
|
22
22
|
numberTagType?: TagType;
|
|
23
23
|
leadingNumber?: number;
|
|
24
|
+
iconPosition?: 'left' | 'right';
|
|
24
25
|
}
|
|
25
26
|
export interface TabViewHeaderProps {
|
|
26
27
|
hasEqualSpacing?: boolean;
|
|
@@ -58,4 +59,5 @@ export interface TabItemComponentProps {
|
|
|
58
59
|
isFirstlement?: boolean;
|
|
59
60
|
isLastElement?: boolean;
|
|
60
61
|
'data-test'?: string;
|
|
62
|
+
iconPosition?: 'left' | 'right';
|
|
61
63
|
}
|