norma-library 0.6.892 → 0.6.894

package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.d.ts

@@ -10,6 +10,7 @@ interface Props extends MuiTabsBaseProps {
     color?: ColorVariant;
     variant?: TabsVariant;
     info?: React.ReactNode;
+    tabPanelSx?: SxProps<Theme>;
 }
 declare const UncontrolledTabs: ({ tabs, tab, color, onTabChange, info, ...props }: Props) => React.JSX.Element;
 export default UncontrolledTabs;

package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.js

@@ -4,8 +4,8 @@ import { Box } from '@mui/material';
 import { NormaTab, NormaTabs } from './UncontrolledTabs.style';
 import { NormaTabInfo } from './UncontrolledTabsInfo.style';
 function TabPanel(props) {
-    var children = props.children, value = props.value, index = props.index, other = __rest(props, ["children", "value", "index"]);
-    return (React.createElement("div", __assign({ role: "tabpanel", hidden: value !== index, id: "simple-tabpanel-".concat(index), "aria-labelledby": "simple-tab-".concat(index) }, other), value === index && React.createElement(Box, { sx: { p: 3 } }, children)));
+    var children = props.children, value = props.value, index = props.index, sx = props.sx, other = __rest(props, ["children", "value", "index", "sx"]);
+    return (React.createElement("div", __assign({ role: "tabpanel", hidden: value !== index, id: "simple-tabpanel-".concat(index), "aria-labelledby": "simple-tab-".concat(index) }, other), value === index && React.createElement(Box, { sx: __assign({ p: 3 }, sx) }, children)));
 }
 function a11yProps(index) {
     return {
@@ -25,7 +25,7 @@ var UncontrolledTabs = function (_a) {
                 info && React.createElement(NormaTabInfo, null, info))),
         tabs.map(function (item, key) {
             var _a;
-            return (React.createElement(TabPanel, __assign({}, (_a = item.tabPanel) === null || _a === void 0 ? void 0 : _a.props, { key: key, value: tab, index: key }), item.children));
+            return (React.createElement(TabPanel, __assign({}, (_a = item.tabPanel) === null || _a === void 0 ? void 0 : _a.props, { key: key, value: tab, index: key, sx: props.tabPanelSx }), item.children));
         })));
 };
 export default UncontrolledTabs;

package/dist/esm/components/UncontrolledTabs/UncontrolledTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"UncontrolledTabs.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTabs/UncontrolledTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAW,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAkB5D,SAAS,QAAQ,CAAC,KAAoB;IAC5B,IAAA,QAAQ,GAA6B,KAAK,SAAlC,EAAE,KAAK,GAAsB,KAAK,MAA3B,EAAE,KAAK,GAAe,KAAK,MAApB,EAAK,KAAK,UAAK,KAAK,EAA5C,8BAAoC,CAAF,CAAW;IAEnD,OAAO,CACL,sCACE,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,KAAK,KAAK,KAAK,EACvB,EAAE,EAAE,0BAAmB,KAAK,CAAE,qBACb,qBAAc,KAAK,CAAE,IAClC,KAAK,GAER,KAAK,KAAK,KAAK,IAAI,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,IAAG,QAAQ,CAAO,CACnD,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAAa;IAC9B,OAAO;QACL,EAAE,EAAE,qBAAc,KAAK,CAAE;QACzB,eAAe,EAAE,0BAAmB,KAAK,CAAE;KAC5C,CAAC;AACJ,CAAC;AAED,IAAM,gBAAgB,GAAG,UAAC,EAAoE;IAAlE,IAAA,IAAI,UAAA,EAAE,GAAG,SAAA,EAAE,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAA3D,+CAA6D,CAAF;IACnF,IAAM,YAAY,GAAG,UAAC,KAAqB,EAAE,QAAgB;QAC3D,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,oBAAC,GAAG;YACF,oBAAC,SAAS,aAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,gBAAa,MAAM,IAAK,KAAK;gBACrF,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CACvB,oBAAC,QAAQ,aAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAM,SAAS,CAAC,GAAG,CAAC,EAAI,CAC5E,EAFwB,CAExB,CAAC;gBACD,IAAI,IAAI,oBAAC,YAAY,QAAE,IAAI,CAAgB,CAClC,CACR;QACL,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG;;YAAK,OAAA,CACvB,oBAAC,QAAQ,eAAK,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KACjE,IAAI,CAAC,QAAQ,CACL,CACZ,CAAA;SAAA,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UncontrolledTabs.js","sourceRoot":"","sources":["../../../../src/components/UncontrolledTabs/UncontrolledTabs.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAyB,MAAM,OAAO,CAAC;AAC9C,OAAO,EAAE,GAAG,EAAW,MAAM,eAAe,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAoB5D,SAAS,QAAQ,CAAC,KAAoB;IAC5B,IAAA,QAAQ,GAAiC,KAAK,SAAtC,EAAE,KAAK,GAA0B,KAAK,MAA/B,EAAE,KAAK,GAAmB,KAAK,MAAxB,EAAE,EAAE,GAAe,KAAK,GAApB,EAAK,KAAK,UAAK,KAAK,EAAhD,oCAAwC,CAAF,CAAW;IAEvD,OAAO,CACL,sCACE,IAAI,EAAC,UAAU,EACf,MAAM,EAAE,KAAK,KAAK,KAAK,EACvB,EAAE,EAAE,0BAAmB,KAAK,CAAE,qBACb,qBAAc,KAAK,CAAE,IAClC,KAAK,GAER,KAAK,KAAK,KAAK,IAAI,oBAAC,GAAG,IAAC,EAAE,aAAI,CAAC,EAAE,CAAC,IAAK,EAAE,KAAK,QAAQ,CAAO,CAC1D,CACP,CAAC;AACJ,CAAC;AAED,SAAS,SAAS,CAAC,KAAa;IAC9B,OAAO;QACL,EAAE,EAAE,qBAAc,KAAK,CAAE;QACzB,eAAe,EAAE,0BAAmB,KAAK,CAAE;KAC5C,CAAC;AACJ,CAAC;AAED,IAAM,gBAAgB,GAAG,UAAC,EAAoE;IAAlE,IAAA,IAAI,UAAA,EAAE,GAAG,SAAA,EAAE,aAAiB,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAE,WAAW,iBAAA,EAAE,IAAI,UAAA,EAAK,KAAK,cAA3D,+CAA6D,CAAF;IACnF,IAAM,YAAY,GAAG,UAAC,KAAqB,EAAE,QAAgB;QAC3D,WAAW,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC/B,CAAC,CAAC;IAEF,OAAO,CACL,oBAAC,GAAG,IAAC,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE;QACxB,oBAAC,GAAG;YACF,oBAAC,SAAS,aAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,YAAY,gBAAa,MAAM,IAAK,KAAK;gBACrF,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG,IAAK,OAAA,CACvB,oBAAC,QAAQ,aAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,IAAM,SAAS,CAAC,GAAG,CAAC,EAAI,CAC5E,EAFwB,CAExB,CAAC;gBACD,IAAI,IAAI,oBAAC,YAAY,QAAE,IAAI,CAAgB,CAClC,CACR;QACL,IAAI,CAAC,GAAG,CAAC,UAAC,IAAI,EAAE,GAAG;;YAAK,OAAA,CACvB,oBAAC,QAAQ,eAAK,MAAA,IAAI,CAAC,QAAQ,0CAAE,KAAK,IAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,KAAK,CAAC,UAAU,KACvF,IAAI,CAAC,QAAQ,CACL,CACZ,CAAA;SAAA,CAAC,CACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "norma-library",
-  "version": "0.6.892",
+  "version": "0.6.894",
   "private": false,
   "description": "Olos/Norma-DS. Design System based on Material UI, developed with TypeScript and Styled Components to create reusable and consistent components in web applications.",
   "scripts": {

package/src/components/UncontrolledTabs/UncontrolledTabs.tsx

@@ -13,16 +13,18 @@ interface Props extends MuiTabsBaseProps {
   color?: ColorVariant;
   variant?: TabsVariant;
   info?: React.ReactNode;
+  tabPanelSx?: SxProps<Theme>;
 }
 
 interface TabPanelProps {
   children?: React.ReactNode;
   index: number;
   value: number;
+  sx?: SxProps<Theme>;
 }
 
 function TabPanel(props: TabPanelProps) {
-  const { children, value, index, ...other } = props;
+  const { children, value, index, sx, ...other } = props;
 
   return (
     <div
@@ -32,7 +34,7 @@ function TabPanel(props: TabPanelProps) {
       aria-labelledby={`simple-tab-${index}`}
       {...other}
     >
-      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+      {value === index && <Box sx={{ p: 3, ...sx }}>{children}</Box>}
     </div>
   );
 }
@@ -60,7 +62,7 @@ const UncontrolledTabs = ({ tabs, tab, color = 'primary', onTabChange, info, ...
         </NormaTabs>
       </Box>
       {tabs.map((item, key) => (
-        <TabPanel {...item.tabPanel?.props} key={key} value={tab} index={key}>
+        <TabPanel {...item.tabPanel?.props} key={key} value={tab} index={key} sx={props.tabPanelSx}>
           {item.children}
         </TabPanel>
       ))}

package/src/stories/UncontrolledTabs.stories.tsx

@@ -76,4 +76,22 @@ export const UncontrolledTabsInfo = () => {
   )
 }
 
-UncontrolledTabsInfo.storyName = 'Uncontrolled Tabs With  Info'
+UncontrolledTabsInfo.storyName = 'Uncontrolled Tabs With  Info';
+
+export const UncontrolledTabsAndTabPanelSx = () => {
+  const [tab, setTab] = useState(0);
+  return (
+    <div style={{ width: '480px', marginBottom: 30 }}>
+      <UncontrolledTabs
+        info={<div>tabPanelSx permite estilizar a tab</div>}
+        tab={tab}
+        tabs={data}
+        onTabChange={(evt, tab) => setTab(tab)}
+        tabPanelSx={{ backgroundColor: 'gray', color: 'orange', p: 0 }}
+      />
+    </div>
+  );
+};
+
+UncontrolledTabsAndTabPanelSx.storyName = 'Uncontrolled Tabs With  Info and tabPanelSx';
+