@sinco/react 1.0.11-rc.4 → 1.0.11-rc.6

package/index.js

@@ -16924,7 +16924,7 @@ var EmptyStateImageUrls;
 (function (EmptyStateImageUrls) {
   EmptyStateImageUrls["error"] = "error";
   EmptyStateImageUrls["search"] = "search";
-  EmptyStateImageUrls["noresult"] = "noresult";
+  EmptyStateImageUrls["noResult"] = "noResult";
   EmptyStateImageUrls["create"] = "create";
 })(EmptyStateImageUrls || (EmptyStateImageUrls = {}));
 const EmptyStateComponent = ({
@@ -17437,24 +17437,29 @@ var _default = (0, _createSvgIcon.default)( /*#__PURE__*/(0, _jsxRuntime.jsx)("p
 }), 'Close');
 default_1 = Close.default = _default;
 
-const stylesDrawer = {
+const DrawerContainer = styled$1(Box$2)(({
+  theme
+}) => ({
   display: 'flex',
   flexDirection: 'column',
   alignContent: 'flex-start',
   justifyContent: 'space-between',
-  width: '530px',
   height: '100%',
   overflow: 'hidden'
-};
-const stylesDrawerHeader = {
+}));
+const DrawerHeader = styled$1(Box$2)(({
+  theme
+}) => ({
   display: 'flex',
   alignContent: 'center',
   justifyContent: 'space-between',
   backgroundColor: 'secondary.main',
   py: '12px',
   px: '8px'
-};
-const stylesDrawerContent = {
+}));
+const DrawerContent = styled$1(Box$2)(({
+  theme
+}) => ({
   display: 'flex',
   overflow: 'auto',
   alignItems: 'flex-start',
@@ -17462,28 +17467,32 @@ const stylesDrawerContent = {
   height: '-webkit-fill-available',
   py: '12px',
   px: '8px'
-};
-const stylesDrawerActions = {
+}));
+const DrawerActions = styled$1(Box$2)(({
+  theme
+}) => ({
   display: 'flex',
   alignContent: 'center',
   justifyContent: 'flex-end',
   borderTop: '1px solid rgba(16, 24, 64, 0.23)',
   backgroundColor: '#F1F0EE',
-  mt: '4px',
   gap: '8px',
+  mt: '4px',
   py: '12px',
   px: '8px'
-};
+}));
 const DrawerComponent = ({
   title,
   children,
-  actions,
+  renderActions,
+  showActions,
   position,
+  width,
   open,
   onClose
 }) => {
-  const [stateActions, setActionsState] = useState(false);
-  const handleDrawerAcciones = () => {
+  const [stateActions, setActionsState] = useState(showActions);
+  const handleDrawerActions = () => {
     setActionsState(true);
   };
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
@@ -17492,23 +17501,18 @@ const DrawerComponent = ({
     anchor: position,
     open: open,
     onClose: onClose
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
-    sx: stylesDrawer
-  }, /*#__PURE__*/React__default.createElement(Box$2, {
-    sx: stylesDrawerHeader
-  }, /*#__PURE__*/React__default.createElement(Typography$1, {
+  }, /*#__PURE__*/React__default.createElement(DrawerContainer, {
+    width: width
+  }, /*#__PURE__*/React__default.createElement(DrawerHeader, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "h6"
   }, title), /*#__PURE__*/React__default.createElement(Box$2, null, /*#__PURE__*/React__default.createElement(IconButton$1, {
     onClick: onClose,
     size: "small"
   }, /*#__PURE__*/React__default.createElement(default_1, {
     fontSize: "small"
-  })))), /*#__PURE__*/React__default.createElement(Box$2, {
-    onClick: handleDrawerAcciones,
-    sx: stylesDrawerContent
-  }, children), stateActions && /*#__PURE__*/React__default.createElement(Box$2, {
-    sx: stylesDrawerActions
-  }, actions))));
+  })))), /*#__PURE__*/React__default.createElement(DrawerContent, {
+    onClick: handleDrawerActions
+  }, children), stateActions && /*#__PURE__*/React__default.createElement(DrawerActions, null, renderActions))));
 };
 
 const ToastContainer = styled$1(Stack$1)(() => ({
@@ -17698,26 +17702,31 @@ const ToastNotificationComponent = toast => {
   })))));
 };
 
-const PageContent = styled$1(Stack$1)(({
+const PageHeaderContent = styled$1(Stack$1)(({
   theme
 }) => ({
-  backgroundColor: "#fff",
-  boxShadow: "0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)",
+  backgroundColor: '#fff',
+  boxShadow: '0px 1px 3px rgba(24, 39, 75, 0.12), 0px 1px 1px -1px rgba(24, 39, 75, 0.14), 0px 2px 1px -2px rgba(24, 39, 75, 0.2)',
   zIndex: 100,
-  padding: "8px 24px",
-  justifyContent: "space-between",
+  padding: '8px 24px',
+  justifyContent: 'space-between',
   minHeight: 39,
-  position: "fixed",
-  width: "100%"
+  position: 'fixed',
+  width: '100%'
 }));
-const PageHeaderComponent = page => {
+const PageHeaderComponent = ({
+  title,
+  subtitle,
+  actions,
+  buttonBack
+}) => {
   return /*#__PURE__*/React__default.createElement(ThemeProvider, {
     theme: SincoTheme
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       minHeight: 56
     }
-  }, /*#__PURE__*/React__default.createElement(PageContent, null, /*#__PURE__*/React__default.createElement(Stack$1, {
+  }, /*#__PURE__*/React__default.createElement(PageHeaderContent, null, /*#__PURE__*/React__default.createElement(Stack$1, {
     width: "90%",
     justifyContent: "space-between",
     flexDirection: "row",
@@ -17726,17 +17735,17 @@ const PageHeaderComponent = page => {
     gap: 1.5,
     flexDirection: "row",
     alignItems: "center"
-  }, page.buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
+  }, buttonBack, /*#__PURE__*/React__default.createElement(Stack$1, null, /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "h6",
     color: "text.primary"
-  }, page.title), /*#__PURE__*/React__default.createElement(Typography$1, {
+  }, title), /*#__PURE__*/React__default.createElement(Typography$1, {
     variant: "caption",
     color: "text.secondary"
-  }, page.subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
+  }, subtitle))), /*#__PURE__*/React__default.createElement(Stack$1, {
     gap: 1,
     alignItems: "center",
     flexDirection: "row"
-  }, page.actions)))));
+  }, actions)))));
 };
 
 const FooterActionComponent = ({
@@ -23226,4 +23235,4 @@ const useDynamicColor = url => {
   };
 };
 
-export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageContent, PageHeaderComponent, SincoTheme, ToastNotificationComponent, useDynamicColor };
+export { DrawerComponent, DynamicColor, EmptyStateComponent, EmptyStateImageUrls, FooterActionComponent, PageHeaderComponent, PageHeaderContent, SincoTheme, ToastNotificationComponent, useDynamicColor };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sinco/react",
-  "version": "1.0.11-rc.4",
+  "version": "1.0.11-rc.6",
   "description": "package for the configuration of mui react sinco",
   "private": false,
   "license": "MIT",

package/src/lib/Components/Drawer.d.ts

@@ -3,9 +3,11 @@ export type handleDrawerPosition = 'left' | 'right';
 export interface DrawerComponentProperties {
     title: string;
     children: ReactNode;
-    actions: ReactNode;
+    renderActions: ReactNode;
+    showActions?: boolean;
     position?: handleDrawerPosition;
+    width: string;
     open: boolean;
     onClose: () => void;
 }
-export declare const DrawerComponent: ({ title, children, actions, position, open, onClose, }: DrawerComponentProperties) => JSX.Element;
+export declare const DrawerComponent: ({ title, children, renderActions, showActions, position, width, open, onClose, }: DrawerComponentProperties) => JSX.Element;

package/src/lib/Components/EmptyState.d.ts

@@ -1,9 +1,9 @@
 import { ReactNode } from 'react';
-export type EmptyStateStates = 'create' | 'error' | 'noresult' | 'search';
+export type EmptyStateStates = 'create' | 'error' | 'noResult' | 'search';
 export declare enum EmptyStateImageUrls {
     error = "error",
     search = "search",
-    noresult = "noresult",
+    noResult = "noResult",
     create = "create"
 }
 export interface EmptyStateProperties {

package/src/lib/Components/PageHeader.d.ts

@@ -1,11 +1,5 @@
-import React from "react";
-interface Pageheader {
-    title: string;
-    subtitle?: string;
-    actions?: React.ReactNode;
-    buttonBack?: React.ReactNode;
-}
-export declare const PageContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+import React from 'react';
+export declare const PageHeaderContent: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
     children?: React.ReactNode;
     direction?: import("@mui/system").ResponsiveStyleValue<"column" | "column-reverse" | "row" | "row-reverse"> | undefined;
     spacing?: import("@mui/system").ResponsiveStyleValue<string | number> | undefined;
@@ -15,5 +9,11 @@ export declare const PageContent: import("@emotion/styled").StyledComponent<impo
 } & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "direction" | ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "children" | "spacing" | "divider" | "useFlexGap" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
-export declare const PageHeaderComponent: (page: Pageheader) => JSX.Element;
+interface PageheaderProperties {
+    title: string;
+    subtitle?: string;
+    actions?: React.ReactNode;
+    buttonBack?: React.ReactNode;
+}
+export declare const PageHeaderComponent: ({ title, subtitle, actions, buttonBack, }: PageheaderProperties) => JSX.Element;
 export {};

package/src/lib/Utils/index.d.ts

@@ -1 +1 @@
-export * from './DynamicColor';
+export * from './dynamicColor';