quicksnack 3.9.0 → 3.11.0

package/dist/components/Box/Box.d.ts

@@ -10,6 +10,7 @@ export interface BoxProps {
     mr?: Responsive<number>;
     mb?: Responsive<number>;
     ml?: Responsive<number>;
+    width?: Responsive<number | string>;
     display?: Responsive<"inline" | "block" | "contents" | "flex" | "grid" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table" | "list-item" | "run-in" | "table" | "table-caption" | "table-column-group" | "table-header-group" | "table-footer-group" | "table-row-group" | "table-cell" | "table-column" | "table-row" | "none" | "initial" | "inherit">;
     flexGrow?: Responsive<"inherit" | "initial" | "unset" | number>;
     flexShrink?: Responsive<"inherit" | "initial" | "unset" | number>;

package/dist/components/Box/Box.js

@@ -26,7 +26,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Box = void 0;
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 var styled_components_1 = __importStar(require("styled-components"));
-exports.Box = styled_components_1.default.div(templateObject_18 || (templateObject_18 = __makeTemplateObject(["\n  box-sizing: border-box;\n  \n  ", "\n"], ["\n  box-sizing: border-box;\n  \n  ", "\n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
+exports.Box = styled_components_1.default.div(templateObject_19 || (templateObject_19 = __makeTemplateObject(["\n  box-sizing: border-box;\n  \n  ", "\n"], ["\n  box-sizing: border-box;\n  \n  ", "\n"])), function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
     "p": function (unit) { return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["padding: ", ";"], ["padding: ", ";"])), props.theme.spacing(unit)); },
     "pt": function (unit) { return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["padding-top: ", ";"], ["padding-top: ", ";"])), props.theme.spacing(unit)); },
     "pr": function (unit) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["padding-right: ", ";"], ["padding-right: ", ";"])), props.theme.spacing(unit)); },
@@ -44,5 +44,6 @@ exports.Box = styled_components_1.default.div(templateObject_18 || (templateObje
     "alignItems": function (unit) { return (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["align-items: ", ";"], ["align-items: ", ";"])), unit); },
     "textAlign": function (unit) { return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["text-align: ", ";"], ["text-align: ", ";"])), unit); },
     "justifyContent": function (unit) { return (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["justify-content: ", ";"], ["justify-content: ", ";"])), unit); },
+    "width": function (unit) { return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), typeof unit === 'number' ? props.theme.spacing(unit) : unit); },
 }); });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19;

package/dist/components/Floater/Floater.d.ts

@@ -2,6 +2,7 @@ import { BoxProps } from "../Box/Box";
 import React from "react";
 interface Props extends BoxProps {
     stretch?: boolean;
+    forceEqualWidth?: boolean;
     items: Array<JSX.Element | false | {}>;
 }
 export declare const Floater: React.FC<Props>;

package/dist/components/Floater/Floater.js

@@ -36,13 +36,13 @@ var hasElement = function (item) {
     return !!item.element;
 };
 var Floater = function (_a) {
-    var items = _a.items, _b = _a.stretch, stretch = _b === void 0 ? false : _b, props = __rest(_a, ["items", "stretch"]);
+    var items = _a.items, _b = _a.forceEqualWidth, forceEqualWidth = _b === void 0 ? false : _b, _c = _a.stretch, stretch = _c === void 0 ? false : _c, props = __rest(_a, ["items", "forceEqualWidth", "stretch"]);
     return react_1.default.createElement(Box_1.Box, __assign({ mb: verticalMargin, mt: verticalMargin, ml: horizontalMargin, mr: horizontalMargin, display: display }, props), items
         .filter(Boolean)
         .map(function (item, i) {
         return hasElement(item)
-            ? react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, stretch: item.stretch }, item.element)
-            : react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, stretch: stretch }, item);
+            ? (react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, laptopWidth: item.forceEqualWidth ? "".concat(100 / items.length, "%") : undefined, stretch: item.stretch }, item.element))
+            : react_1.default.createElement(FloaterItem_1.FloaterItem, { key: i, laptopWidth: forceEqualWidth ? "".concat(100 / items.length, "%") : undefined, stretch: stretch }, item);
     }));
 };
 exports.Floater = Floater;

package/dist/components/Floater/FloaterItem.d.ts

@@ -1,6 +1,7 @@
 import { BoxProps } from "../Box/Box";
 import React from "react";
 interface Props extends BoxProps {
+    laptopWidth?: string;
     stretch: boolean;
 }
 export declare const FloaterItem: React.FC<Props>;

package/dist/components/Floater/FloaterItem.js

@@ -32,7 +32,8 @@ var horizontalPadding = { laptop: 1 };
 var verticalPadding = { mobile: 1, laptop: 0 };
 var flexGrow = { laptop: 1 };
 var FloaterItem = function (_a) {
-    var stretch = _a.stretch, props = __rest(_a, ["stretch"]);
-    return react_1.default.createElement(Box_1.Box, __assign({ flexGrow: stretch ? flexGrow : undefined, pt: verticalPadding, pb: verticalPadding, pl: horizontalPadding, pr: horizontalPadding }, props));
+    var stretch = _a.stretch, laptopWidth = _a.laptopWidth, props = __rest(_a, ["stretch", "laptopWidth"]);
+    var width = react_1.default.useMemo(function () { return ({ laptop: laptopWidth }); }, [laptopWidth]);
+    return react_1.default.createElement(Box_1.Box, __assign({ flexGrow: stretch ? flexGrow : undefined, width: width, pt: verticalPadding, pb: verticalPadding, pl: horizontalPadding, pr: horizontalPadding }, props));
 };
 exports.FloaterItem = FloaterItem;

package/dist/components/Menu/useCloseSidebarOnNavigate.d.ts

@@ -0,0 +1 @@
+export declare const useCloseSidebarOnNavigate: (pathName: string) => void;

package/dist/components/Menu/useCloseSidebarOnNavigate.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useCloseSidebarOnNavigate = void 0;
+var UiStateProvider_1 = require("../../UiStateProvider");
+var react_1 = __importDefault(require("react"));
+var useCloseSidebarOnNavigate = function (pathName) {
+    var closeSideMenu = (0, UiStateProvider_1.useUiStateContext)().closeSideMenu;
+    react_1.default.useEffect(function () {
+        closeSideMenu();
+    }, [pathName, closeSideMenu]);
+};
+exports.useCloseSidebarOnNavigate = useCloseSidebarOnNavigate;

package/dist/components/Tabs/Tab.d.ts

@@ -1,9 +1,12 @@
+import { DefaultTheme } from "styled-components";
 import { BoxProps } from "../Box/Box";
 import React, { PropsWithChildren } from "react";
+declare type Variant = keyof DefaultTheme['palette']['form'];
 interface Props<ID> extends BoxProps {
     id: ID;
     isActive?: boolean;
     onClick?: (id: ID) => void;
+    variant?: Variant;
 }
 export declare const Tab: <ID>({ id, isActive, onClick, ...restProps }: React.PropsWithChildren<Props<ID>>) => JSX.Element;
 export {};

package/dist/components/Tabs/Tab.js

@@ -52,7 +52,7 @@ exports.Tab = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../Box/Box");
 var react_1 = __importDefault(require("react"));
-var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    padding: ", ";\n    \n    ", "\n           \n    ", "       \n"], ["\n    padding: ", ";\n    \n    ", "\n           \n    ", "       \n"])), function (props) { return props.theme.spacing(3, 5); }, function (props) { return !props.isActive && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: pointer;               \n        color: #337ab7;                \n        &:hover,\n        &:focus {\n          color: #23527c;\n          text-decoration: underline;\n        }\n    "], ["\n        cursor: pointer;               \n        color: #337ab7;                \n        &:hover,\n        &:focus {\n          color: #23527c;\n          text-decoration: underline;\n        }\n    "]))); }, function (props) { return props.isActive && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        font-weight: bold;\n        border: 1px solid rgba(34,36,38,.15);\n        border-bottom: 0px;\n        margin-bottom: -1px;\n        border-top-left-radius: 8px;  \n        border-top-right-radius: 8px;  \n        background-color: ", ";            \n    "], ["\n        font-weight: bold;\n        border: 1px solid rgba(34,36,38,.15);\n        border-bottom: 0px;\n        margin-bottom: -1px;\n        border-top-left-radius: 8px;  \n        border-top-right-radius: 8px;  \n        background-color: ", ";            \n    "])), function (props) { return props.theme.palette.common.white; }); });
+var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    \n    padding: ", ";\n    \n    ", "\n           \n    ", "       \n    \n    ", "\n    \n"], ["\n    \n    padding: ", ";\n    \n    ", "\n           \n    ", "       \n    \n    ", "\n    \n"])), function (props) { return props.theme.spacing(2.5, 5); }, function (props) { return !props.isActive && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        cursor: pointer;               \n        color: #337ab7;                \n        &:hover,\n        &:focus {\n          color: #23527c;\n          text-decoration: underline;\n        }\n    "], ["\n        cursor: pointer;               \n        color: #337ab7;                \n        &:hover,\n        &:focus {\n          color: #23527c;\n          text-decoration: underline;\n        }\n    "]))); }, function (props) { return props.isActive && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n        font-weight: bold;\n        border: 1px solid rgba(34,36,38,.15);\n        border-bottom: 0px;\n        margin-bottom: -1px;\n        border-top-left-radius: 4px;  \n        border-top-right-radius: 4px;  \n        background-color: ", ";            \n    "], ["\n        font-weight: bold;\n        border: 1px solid rgba(34,36,38,.15);\n        border-bottom: 0px;\n        margin-bottom: -1px;\n        border-top-left-radius: 4px;  \n        border-top-right-radius: 4px;  \n        background-color: ", ";            \n    "])), function (props) { return props.theme.palette.common.white; }); }, function (props) { return props.variant && "\n        font-weight: bold;\n        color: ".concat(props.theme.palette.form[props.variant], ";\n        &:hover {\n            color: ").concat(props.theme.palette.form[props.variant], ";\n        }\n    "); });
 var Tab = function (_a) {
     var id = _a.id, isActive = _a.isActive, onClick = _a.onClick, restProps = __rest(_a, ["id", "isActive", "onClick"]);
     var handleClick = react_1.default.useCallback(function () {

package/dist/components/Tabs/TabContent.d.ts

@@ -0,0 +1,3 @@
+import { BoxProps } from "../Box/Box";
+import React from "react";
+export declare const TabContent: React.FC<BoxProps>;

package/dist/components/Tabs/TabContent.js

@@ -0,0 +1,28 @@
+"use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContent = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var Box_1 = require("../Box/Box");
+var react_1 = __importDefault(require("react"));
+var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    background-color: ", ";\n    border: 1px solid rgba(34,36,38,.15);\n    border-top: 0px;\n"], ["\n    background-color: ", ";\n    border: 1px solid rgba(34,36,38,.15);\n    border-top: 0px;\n"])), function (props) { return props.theme.palette.common.white; });
+var TabContent = function (props) { return react_1.default.createElement(StyledBox, __assign({ p: 3 }, props)); };
+exports.TabContent = TabContent;
+var templateObject_1;

package/dist/components/Tabs/Tabs.js

@@ -10,5 +10,5 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Tabs = void 0;
 var styled_components_1 = __importDefault(require("styled-components"));
 var Box_1 = require("../Box/Box");
-exports.Tabs = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    border-bottom: 1px solid rgba(34,36,38,.15);\n    padding: ", ";    \n"], ["\n    display: flex;\n    border-bottom: 1px solid rgba(34,36,38,.15);\n    padding: ", ";    \n"])), function (props) { return props.theme.spacing(0, 6); });
+exports.Tabs = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    border-bottom: 1px solid rgba(34,36,38,.15);     \n"], ["\n    display: flex;\n    border-bottom: 1px solid rgba(34,36,38,.15);     \n"])));
 var templateObject_1;

package/dist/index.d.ts

@@ -17,6 +17,7 @@ export * from './components/Menu/Menu';
 export * from './components/Menu/MenuCloseButton';
 export * from './components/Menu/MenuSlideOpenIndicator';
 export * from './components/Menu/useToggleMobileMenu';
+export * from './components/Menu/useCloseSidebarOnNavigate';
 export * from './components/Menu/SideBarHeader';
 export * from './components/Modal/Modal';
 export * from './components/Overlay/Overlay';
@@ -27,6 +28,7 @@ export * from './components/Statistic/Statistic';
 export * from './components/Table/Table';
 export * from './components/Tabs/Tabs';
 export * from './components/Tabs/Tab';
+export * from './components/Tabs/TabContent';
 export * from './components/Timeline/Timeline';
 export * from './components/TopBar/TopBar';
 export * from './form/Button/Button';

package/dist/index.js

@@ -29,6 +29,7 @@ __exportStar(require("./components/Menu/Menu"), exports);
 __exportStar(require("./components/Menu/MenuCloseButton"), exports);
 __exportStar(require("./components/Menu/MenuSlideOpenIndicator"), exports);
 __exportStar(require("./components/Menu/useToggleMobileMenu"), exports);
+__exportStar(require("./components/Menu/useCloseSidebarOnNavigate"), exports);
 __exportStar(require("./components/Menu/SideBarHeader"), exports);
 __exportStar(require("./components/Modal/Modal"), exports);
 __exportStar(require("./components/Overlay/Overlay"), exports);
@@ -39,6 +40,7 @@ __exportStar(require("./components/Statistic/Statistic"), exports);
 __exportStar(require("./components/Table/Table"), exports);
 __exportStar(require("./components/Tabs/Tabs"), exports);
 __exportStar(require("./components/Tabs/Tab"), exports);
+__exportStar(require("./components/Tabs/TabContent"), exports);
 __exportStar(require("./components/Timeline/Timeline"), exports);
 __exportStar(require("./components/TopBar/TopBar"), exports);
 __exportStar(require("./form/Button/Button"), exports);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "3.9.0",
+  "version": "3.11.0",
   "private": false,
   "files": [
     "dist/**"