@soyfri/shared-library 1.2.0 → 1.2.2

package/cjs/components/MenuButton/MenuButton.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("react"),n=require("@mui/material");const r=({buttonText:r,buttonIcon:o,options:u,variant:i="contained"})=>{const[s,a]=t.useState(null),l=Boolean(s),c=t.useId(),x=`menu-button-${c}`,d=`menu-content-${c}`,p=()=>{a(null)};return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(n.Button,{variant:i,id:x,"aria-controls":l?d:void 0,"aria-haspopup":"true","aria-expanded":l?"true":void 0,onClick:e=>{a(e.currentTarget)},startIcon:o,children:r}),e.jsxRuntimeExports.jsx(n.Menu,{id:d,anchorEl:s,open:l,onClose:p,MenuListProps:{"aria-labelledby":x},children:u.map(((t,r)=>e.jsxRuntimeExports.jsx(n.MenuItem,{onClick:()=>{return e=t.action,p(),void e();var e},children:t.label},r)))})]})};exports.MenuButton=r,exports.default=r;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),t=require("react"),n=require("@mui/material");const r=({buttonText:r,buttonIcon:i,options:o,variant:s="contained"})=>{const[u,a]=t.useState(null),[l,c]=t.useState(0),x=Boolean(u),p=t.useRef(null),d=t.useId(),m=`menu-button-${d}`,j=`menu-content-${d}`,h=()=>{a(null)};return e.jsxRuntimeExports.jsxs(e.jsxRuntimeExports.Fragment,{children:[e.jsxRuntimeExports.jsx(n.Button,{ref:p,variant:s,id:m,"aria-controls":x?j:void 0,"aria-haspopup":"true","aria-expanded":x?"true":void 0,onClick:e=>{a(e.currentTarget),p.current&&c(p.current.offsetWidth)},startIcon:i,children:r}),e.jsxRuntimeExports.jsx(n.Menu,{id:j,anchorEl:u,open:x,onClose:h,MenuListProps:{"aria-labelledby":m},PaperProps:{style:{minWidth:l}},children:o.map(((t,r)=>e.jsxRuntimeExports.jsxs(n.MenuItem,{onClick:()=>{return e=t.action,h(),void e();var e},children:[t.icon&&e.jsxRuntimeExports.jsx(n.ListItemIcon,{children:t.icon}),e.jsxRuntimeExports.jsx(n.Typography,{variant:"inherit",noWrap:!0,children:t.label})]},r)))})]})};exports.MenuButton=r,exports.default=r;
 //# sourceMappingURL=MenuButton.cjs.map

package/cjs/components/tabs/TabItem.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});const e=e=>null;e.displayName="Tab",exports.Tab=e,exports.default=e;
+//# sourceMappingURL=TabItem.cjs.map

package/cjs/components/tabs/TabItem.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/components/tabs/Tabs.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../_virtual/jsx-runtime.cjs"),l=require("react"),r=require("@mui/material"),o=require("./_tabUtils.cjs");const s=({children:s,defaultValue:a,onChange:t,centered:n=!0,orientation:i="horizontal",scrollButtons:u="auto",variant:c="standard",indicatorColor:x="primary",labelColor:d="primary",className:p,onChangeValue:m,allowScrollButtonsMobile:v=!0,sx:j})=>{var b,h;const B=null===(b=s[0])||void 0===b?void 0:b.props.value,[_,C]=l.useState(null!==(h=null!=a?a:B)&&void 0!==h?h:0);return e.jsxRuntimeExports.jsxs(r.Box,{sx:{display:o.TAB_DISPLAY_MAP[i].display,flexDirection:o.TAB_DISPLAY_MAP[i].flexDirection},children:[e.jsxRuntimeExports.jsx(r.Tabs,{value:_,onChange:(e,l)=>{C(l),null==t||t(),null==m||m(l)},centered:n,indicatorColor:x,orientation:i,scrollButtons:u,variant:c,className:p,textColor:d,sx:j,allowScrollButtonsMobile:v,children:s.map(((l,o)=>{const{label:s,icon:a,value:t=o,disabled:n,wrapped:i,iconPosition:u,className:c,sx:x}=l.props;return e.jsxRuntimeExports.jsx(r.Tab,{label:s,icon:a,value:t,disabled:n,wrapped:i,iconPosition:u,className:c,sx:x},t)}))}),e.jsxRuntimeExports.jsx(r.Box,{m:2,role:"tabpanel",children:s.map(((l,o)=>{var s;const a=null!==(s=l.props.value)&&void 0!==s?s:o;return a===_?e.jsxRuntimeExports.jsx(r.Box,{children:l.props.children},a):null}))})]})};exports.Tabs=s,exports.default=s;
+//# sourceMappingURL=Tabs.cjs.map

package/cjs/components/tabs/Tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/components/tabs/_tabUtils.cjs

@@ -0,0 +1,2 @@
+"use strict";exports.TAB_DISPLAY_MAP={horizontal:{display:"flex",flexDirection:"column"},vertical:{display:"flex",flexDirection:"row"}};
+//# sourceMappingURL=_tabUtils.cjs.map

package/cjs/components/tabs/_tabUtils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"_tabUtils.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/cjs/components/tabs.cjs

@@ -0,0 +1,2 @@
+"use strict";var s=require("./tabs/Tabs.cjs"),a=require("./tabs/TabItem.cjs");exports.Tabs=s.Tabs,exports.TabItem=a.Tab;
+//# sourceMappingURL=tabs.cjs.map

package/cjs/components/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/tabs/index.ts

@@ -0,0 +1 @@
+export * from '../../esm/components/tabs';

package/esm/components/MenuButton/MenuButton.d.ts

@@ -3,6 +3,7 @@ import { ButtonProps } from '@mui/material/Button';
 export interface MenuOption {
     label: string;
     action: () => void;
+    icon?: ReactNode;
 }
 interface MenuButtonProps {
     buttonText?: string;

package/esm/components/MenuButton/MenuButton.js

@@ -1,2 +1,2 @@
-import{j as n}from"../../_virtual/jsx-runtime.js";import{useState as r,useId as t}from"react";import{Button as o,Menu as a,MenuItem as e}from"@mui/material";const i=({buttonText:i,buttonIcon:l,options:s,variant:u="contained"})=>{const[c,d]=r(null),m=Boolean(c),p=t(),x=`menu-button-${p}`,j=`menu-content-${p}`,v=()=>{d(null)};return n.jsxs(n.Fragment,{children:[n.jsx(o,{variant:u,id:x,"aria-controls":m?j:void 0,"aria-haspopup":"true","aria-expanded":m?"true":void 0,onClick:n=>{d(n.currentTarget)},startIcon:l,children:i}),n.jsx(a,{id:j,anchorEl:c,open:m,onClose:v,MenuListProps:{"aria-labelledby":x},children:s.map(((r,t)=>n.jsx(e,{onClick:()=>{return n=r.action,v(),void n();var n},children:r.label},t)))})]})};export{i as MenuButton,i as default};
+import{j as n}from"../../_virtual/jsx-runtime.js";import{useState as r,useRef as t,useId as e}from"react";import{Button as o,Menu as i,MenuItem as a,ListItemIcon as l,Typography as s}from"@mui/material";const c=({buttonText:c,buttonIcon:u,options:d,variant:p="contained"})=>{const[m,h]=r(null),[x,j]=r(0),v=Boolean(m),f=t(null),b=e(),C=`menu-button-${b}`,P=`menu-content-${b}`,W=()=>{h(null)};return n.jsxs(n.Fragment,{children:[n.jsx(o,{ref:f,variant:p,id:C,"aria-controls":v?P:void 0,"aria-haspopup":"true","aria-expanded":v?"true":void 0,onClick:n=>{h(n.currentTarget),f.current&&j(f.current.offsetWidth)},startIcon:u,children:c}),n.jsx(i,{id:P,anchorEl:m,open:v,onClose:W,MenuListProps:{"aria-labelledby":C},PaperProps:{style:{minWidth:x}},children:d.map(((r,t)=>n.jsxs(a,{onClick:()=>{return n=r.action,W(),void n();var n},children:[r.icon&&n.jsx(l,{children:r.icon}),n.jsx(s,{variant:"inherit",noWrap:!0,children:r.label})]},t)))})]})};export{c as MenuButton,c as default};
 //# sourceMappingURL=MenuButton.js.map

package/esm/components/MenuButton/MenuButton.stories.d.ts

@@ -8,5 +8,5 @@ export declare const IconButton: Story;
 export declare const TextAndIconButton: Story;
 export declare const LongMenu: Story;
 export declare const WithAlertActions: Story;
-export declare const DisabledButton: Story;
 export declare const Variants: Story;
+export declare const WideButton: Story;

package/esm/components/tabs/Tab.definition.d.ts

@@ -0,0 +1,2 @@
+export declare const DefaultTabDefinition: string;
+export declare const ScrollTabDefinition: string;

package/esm/components/tabs/TabItem.d.ts

@@ -0,0 +1,13 @@
+import React from "react";
+import { TabProps as MuiTabProps } from "@mui/material";
+type PickMuiTabProps = Pick<MuiTabProps, "label" | "icon" | "disabled" | "sx" | "value" | "wrapped" | "iconPosition" | "className" | "disabled" | 'disableRipple'>;
+export interface TabProps extends PickMuiTabProps {
+    value?: number;
+    onChange?: () => void;
+    children?: React.ReactNode;
+}
+export declare const Tab: {
+    (_: TabProps): null;
+    displayName: string;
+};
+export default Tab;

package/esm/components/tabs/TabItem.js

@@ -0,0 +1,2 @@
+const a=a=>null;a.displayName="Tab";export{a as Tab,a as default};
+//# sourceMappingURL=TabItem.js.map

package/esm/components/tabs/TabItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabItem.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/components/tabs/Tabs.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactElement } from "react";
+import { TabsProps as MuiTabsProps } from "@mui/material";
+import { TabProps } from "./TabItem";
+type PickTabsProps = Pick<MuiTabsProps, "centered" | "indicatorColor" | "orientation" | "scrollButtons" | "variant" | "className" | "sx" | "visibleScrollbar" | 'indicatorColor' | 'allowScrollButtonsMobile'>;
+interface MyTabsProps extends PickTabsProps {
+    children: ReactElement<TabProps>[];
+    defaultValue?: number;
+    onChange?: () => void;
+    centered?: boolean;
+    orientation?: "horizontal" | "vertical";
+    scrollButtons?: "auto" | false | true;
+    variant?: "standard" | "scrollable" | "fullWidth";
+    indicatorColor?: "primary" | "secondary";
+    labelColor?: "primary" | "secondary" | "inherit";
+    onChangeValue?: (newValue: number) => void;
+    allowScrollButtonsMobile?: boolean;
+}
+export declare const Tabs: React.FC<MyTabsProps>;
+export default Tabs;

package/esm/components/tabs/Tabs.js

@@ -0,0 +1,2 @@
+import{j as l}from"../../_virtual/jsx-runtime.js";import{useState as o}from"react";import{Box as a,Tabs as r,Tab as e}from"@mui/material";import{TAB_DISPLAY_MAP as n}from"./_tabUtils.js";const i=({children:i,defaultValue:s,onChange:t,centered:c=!0,orientation:u="horizontal",scrollButtons:d="auto",variant:p="standard",indicatorColor:m="primary",labelColor:x="primary",className:v,onChangeValue:b,allowScrollButtonsMobile:h=!0,sx:j})=>{var f,C;const w=null===(f=i[0])||void 0===f?void 0:f.props.value,[y,B]=o(null!==(C=null!=s?s:w)&&void 0!==C?C:0);return l.jsxs(a,{sx:{display:n[u].display,flexDirection:n[u].flexDirection},children:[l.jsx(r,{value:y,onChange:(l,o)=>{B(o),null==t||t(),null==b||b(o)},centered:c,indicatorColor:m,orientation:u,scrollButtons:d,variant:p,className:v,textColor:x,sx:j,allowScrollButtonsMobile:h,children:i.map(((o,a)=>{const{label:r,icon:n,value:i=a,disabled:s,wrapped:t,iconPosition:c,className:u,sx:d}=o.props;return l.jsx(e,{label:r,icon:n,value:i,disabled:s,wrapped:t,iconPosition:c,className:u,sx:d},i)}))}),l.jsx(a,{m:2,role:"tabpanel",children:i.map(((o,r)=>{var e;const n=null!==(e=o.props.value)&&void 0!==e?e:r;return n===y?l.jsx(a,{children:o.props.children},n):null}))})]})};export{i as Tabs,i as default};
+//# sourceMappingURL=Tabs.js.map

package/esm/components/tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/components/tabs/Tabs.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Tabs from "./Tabs";
+declare const meta: Meta<typeof Tabs>;
+export default meta;
+type Story = StoryObj<typeof Tabs>;
+export declare const DefaultTab: Story;
+export declare const ScrollTab: Story;
+export declare const VeriticalTab: Story;

package/esm/components/tabs/_tabUtils.d.ts

@@ -0,0 +1,4 @@
+export declare const TAB_DISPLAY_MAP: Record<"horizontal" | "vertical", {
+    display: string;
+    flexDirection: string;
+}>;

package/esm/components/tabs/_tabUtils.js

@@ -0,0 +1,2 @@
+const l={horizontal:{display:"flex",flexDirection:"column"},vertical:{display:"flex",flexDirection:"row"}};export{l as TAB_DISPLAY_MAP};
+//# sourceMappingURL=_tabUtils.js.map

package/esm/components/tabs/_tabUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_tabUtils.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/esm/components/tabs/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tabs } from './Tabs';
+export { default as TabItem } from './TabItem';

package/esm/components/tabs.js

@@ -0,0 +1,2 @@
+export{Tabs}from"./tabs/Tabs.js";export{Tab as TabItem}from"./tabs/TabItem.js";
+//# sourceMappingURL=tabs.js.map

package/esm/components/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soyfri/shared-library",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "type": "module",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
@@ -40,6 +40,11 @@
       "require": "./cjs/components/timeline.cjs",
       "types": "./esm/components/timeline/timeline.d.ts"
     },
+    "./components/tabs": {
+      "import": "./esm/components/tabs.js",
+      "require": "./cjs/components/tabs.cjs",
+      "types": "./esm/components/tabs/tabs.d.ts"
+    },
     "./components/Table": {
       "import": "./esm/components/Table.js",
       "require": "./cjs/components/Table.cjs",