@symply.io/basic-components 1.3.3 → 1.3.4-beta.2

package/DynamicHeaderBar/HeaderBar.js

@@ -22,11 +22,12 @@ import HeaderButtons from "./HeaderButtons";
 import useCustomTheme from "../useCustomTheme";
 function HeaderBar(props) {
     var title = props.title, color = props.color, subtitle = props.subtitle, bottomEl = props.bottomEl, _a = props.buttons, buttons = _a === void 0 ? [] : _a, showBackButton = props.showBackButton, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, onBack = props.onBack;
+    console.log(2, { primaryColor: primaryColor, secondaryColor: secondaryColor });
     var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
     var hasButtons = useMemo(function () { return buttons.length > 0; }, [buttons.length]);
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsxs(Grid, __assign({ sx: { mb: 1 } }, { children: [_jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [_jsx(Grid, __assign({ item: true, xs: 12, sm: hasButtons ? 6 : 12, md: hasButtons ? 5 : 12, lg: hasButtons ? 4 : 12, xl: hasButtons ? 3 : 12 }, { children: _jsxs(Grid, __assign({ container: true, direction: "row", justifyContent: "flex-start", alignItems: "center" }, { children: [showBackButton && (_jsx(IconButton, __assign({ onClick: function () {
                                             onBack ? onBack() : window.history.back();
-                                        } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }) }))), typeof title === "string" ? (_jsx(Typography, __assign({ align: "left", sx: { fontWeight: 600, fontSize: isLessThanSm ? 21 : 24 } }, { children: title }))) : (cloneElement(title))] })) })), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons }) }))) : (_jsx(_Fragment, {}))] })), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color }) })) })), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) })) }))), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) })) })))] })) })));
+                                        } }, { children: _jsx(ArrowBackIcon, { fontSize: "small" }) }))), typeof title === "string" ? (_jsx(Typography, __assign({ align: "left", sx: { fontWeight: 600, fontSize: isLessThanSm ? 21 : 24 } }, { children: title }))) : (cloneElement(title))] })) })), hasButtons ? (_jsx(Grid, __assign({ item: true, xs: 12, sm: 6, md: 7, lg: 8, xl: 9 }, { children: _jsx(HeaderButtons, { buttons: buttons, primaryColor: primaryColor, secondaryColor: secondaryColor }) }))) : (_jsx(_Fragment, {}))] })), _jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: _jsx(HeaderLine, { color: color, primaryColor: primaryColor, secondaryColor: secondaryColor }) })) })), subtitle && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: typeof subtitle === "string" ? (_jsx(Typography, { children: subtitle })) : (cloneElement(subtitle)) })) }))), bottomEl && (_jsx(Grid, __assign({ container: true, direction: "row" }, { children: _jsx(Grid, __assign({ item: true, xs: 12, sx: { mt: 1 } }, { children: cloneElement(bottomEl) })) })))] })) })));
 }
 export default HeaderBar;

package/DynamicHeaderBar/HeaderButtons.d.ts

@@ -1,6 +1,9 @@
+import { CSSProperties } from "react";
 import { HeaderButtonProps } from "./types";
 export interface HeaderButtonsProps {
     buttons: Array<HeaderButtonProps>;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
 declare function HeaderButtons(props: HeaderButtonsProps): JSX.Element;
 export default HeaderButtons;

package/DynamicHeaderBar/HeaderButtons.js

@@ -20,8 +20,8 @@ import MenuButtonGroup from "../MenuButtonGroup";
 import { HeaderButtonCategory } from "./types";
 import useCustomTheme from "../useCustomTheme";
 function HeaderButtons(props) {
-    var buttons = props.buttons;
-    var theme = useCustomTheme();
+    var buttons = props.buttons, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var isLessThanSm = useMediaQuery(theme.breakpoints.down("sm"));
     return (_jsx(ThemeProvider, __assign({ theme: theme }, { children: _jsx(Grid, __assign({ container: true, spacing: 1, direction: "row", justifyContent: "flex-end", alignItems: "center" }, { children: buttons.map(function (button) {
                 switch (button.type) {

package/DynamicHeaderBar/HeaderLine.d.ts

@@ -1,6 +1,8 @@
 import { CSSProperties } from "react";
 interface HeaderLineProps {
     color?: CSSProperties["color"];
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
 declare function HeaderLine(props: HeaderLineProps): JSX.Element;
 export default HeaderLine;

package/DynamicHeaderBar/HeaderLine.js

@@ -2,8 +2,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import Divider from "@mui/material/Divider";
 import useCustomTheme from "../useCustomTheme";
 function HeaderLine(props) {
-    var color = props.color;
-    var theme = useCustomTheme();
+    var color = props.color, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor;
+    var theme = useCustomTheme({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     return (_jsx(Divider, { sx: {
             height: "3px",
             backgroundColor: color || theme.palette.primary.main

package/DynamicHeaderBar/index.d.ts

@@ -1,9 +1,11 @@
-import { ReactElement } from "react";
+import { ReactElement, CSSProperties } from "react";
 import { SxProps } from "@mui/material/styles";
 import { HeaderBarProps } from "./HeaderBar";
 interface HeaderProviderProps {
     sx?: SxProps;
     children: ReactElement;
+    primaryColor?: CSSProperties["color"];
+    secondaryColor?: CSSProperties["color"];
 }
 interface HeaderContextProps {
     onInit: (props: HeaderBarProps) => void;

package/DynamicHeaderBar/index.js

@@ -10,22 +10,23 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { cloneElement, createContext, useContext, useState, useCallback, } from "react";
+import { cloneElement, createContext, useContext, useState, useCallback } from "react";
 import Grid from "@mui/material/Grid";
 import HeaderBar from "./HeaderBar";
 var HeaderContext = createContext({
     onInit: function () { },
     onShow: function () { },
-    onHide: function () { },
+    onHide: function () { }
 });
 export function HeaderProvider(props) {
-    var children = props.children, _a = props.sx, sx = _a === void 0 ? {} : _a;
+    var children = props.children, primaryColor = props.primaryColor, secondaryColor = props.secondaryColor, _a = props.sx, sx = _a === void 0 ? {} : _a;
     var _b = useState(false), visible = _b[0], setVisible = _b[1];
     var _c = useState({ title: "" }), headerProps = _c[0], setHeaderProps = _c[1];
     var _d = useState(0), height = _d[0], setHeight = _d[1];
     var onInit = useCallback(function (args) {
         setHeaderProps(args);
     }, []);
+    console.log({ primaryColor: primaryColor, secondaryColor: secondaryColor });
     var onShow = useCallback(function () {
         setVisible(true);
     }, []);
@@ -37,12 +38,12 @@ export function HeaderProvider(props) {
             setHeight(node.getBoundingClientRect().height);
         }
     }, [headerProps]);
-    return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps)) })) }))) : (_jsx(_Fragment, {})), cloneElement(children, {
+    return (_jsx(HeaderContext.Provider, __assign({ value: { onInit: onInit, onHide: onHide, onShow: onShow } }, { children: _jsxs(_Fragment, { children: [visible ? (_jsx(Grid, __assign({ container: true, direction: "row", sx: __assign({}, sx), ref: measureRef }, { children: _jsx(Grid, __assign({ item: true, xs: 12 }, { children: _jsx(HeaderBar, __assign({}, headerProps, { primaryColor: primaryColor, secondaryColor: secondaryColor })) })) }))) : (_jsx(_Fragment, {})), cloneElement(children, {
                     sx: {
                         p: 3,
                         py: 1,
-                        pt: height ? "calc(".concat(height, "px)") : undefined,
-                    },
+                        pt: height ? "calc(".concat(height, "px)") : undefined
+                    }
                 })] }) })));
 }
 export function useHeaderBar() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@symply.io/basic-components",
-  "version": "1.3.3",
+  "version": "1.3.4-beta.2",
   "description": "Basic and reusable components for all frontend of Symply apps",
   "keywords": [
     "react",