@gsretail.com/gui-core/build/esm/core/Section/PageTabs/view/AllTabsButtonView.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as e}from"tslib";import t from"react";import n from"@emotion/styled";import{ListItem as o,ListItemText as r,Box as i,Typography as l,Popover as a,List as c,ListItemButton as m}from"@mui/material";import{GuiIconButton as u}from"../../../Button/GuiIconButton.js";import{FilterNumber as s,Close as p}from"@gsretail.com/gui-icons";import f from"../../../../assets/theme/basicStyle.js";var g,d,y=function(y){var h=y.pages,v=y.activePageIndex,E=y.onSelectListItem,b=void 0===E?function(){}:E,k=y.onRemoveListItem,z=void 0===k?function(){}:k,B=t.useState(null),I=B[0],x=B[1],C=Boolean(I),L=n(o)(g||(g=e(["\n    .MuiListItemButton-root {\n      &:hover { background-color: "," };\n    }\n  "],["\n    .MuiListItemButton-root {\n      &:hover { background-color: "," };\n    }\n  "])),f.color.primaryLightHover),S=n(r)(d||(d=e(["\n    .MuiTypography-root {\n      font-size: 13px;\n      font-weight: inherit;\n    }\n  "],["\n    .MuiTypography-root {\n      font-size: 13px;\n      font-weight: inherit;\n    }\n  "])));return t.createElement(t.Fragment,null,t.createElement(i,{style:{position:"relative",marginTop:5}},t.createElement(u,{variant:"clear",size:"tiny",onClick:function(e){x(e.currentTarget)},style:{zIndex:1,padding:0}},t.createElement(s,null)),t.createElement(l,{style:{position:"absolute",top:1,right:11,fontSize:10}},h.length)),t.createElement(a,{id:"AllTabsButtonView-Popover",open:C,anchorEl:I,onClose:function(){x(null)},anchorOrigin:{vertical:"bottom",horizontal:"left"}},t.createElement(c,null,h.map((function(e,n){return t.createElement(L,{key:e.id,disablePadding:!0,secondaryAction:t.createElement(u,{edge:"end",variant:"clear",size:"tiny",onClick:function(){return z(e,n)}},t.createElement(p,null)),style:{backgroundColor:v===n?f.color.skyBlueSelected:"none"}},t.createElement(m,{onClick:function(){return b(e,n)}},t.createElement(S,{primary:e.title,style:{fontWeight:v===n?700:"unset"}})))})))))};export{y as default};