quicksnack 3.7.0 → 3.10.0

package/dist/components/Menu/MenuSlideOpenIndicator.js

@@ -13,7 +13,7 @@ var styled_components_1 = __importDefault(require("styled-components"));
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
 var SideBar_1 = require("./SideBar");
 var Box_1 = require("../Box/Box");
-var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: none;\n    ", "\n    \n    height: 100%;\n    flex-direction: row;\n    align-items: center;\n    padding: ", ";    \n    \n    ", ":hover & {\n        display:none;\n    }\n"], ["\n    display: none;\n    ", "\n    \n    height: 100%;\n    flex-direction: row;\n    align-items: center;\n    padding: ", ";    \n    \n    ", ":hover & {\n        display:none;\n    }\n"])), (0, responsiveProps_1.mq)("laptop", "display: flex;"), function (props) { return props.theme.spacing(0, 5); }, SideBar_1.StyledSidebar);
+var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: none;\n    ", "\n    \n    height: 100%;\n    flex-direction: row;\n    align-items: center;\n    \n    width: ", ";    \n    \n    & > svg {\n       margin: 0 auto; \n    }\n    \n    ", ":hover & {\n        display:none;\n    }\n"], ["\n    display: none;\n    ", "\n    \n    height: 100%;\n    flex-direction: row;\n    align-items: center;\n    \n    width: ", ";    \n    \n    & > svg {\n       margin: 0 auto; \n    }\n    \n    ", ":hover & {\n        display:none;\n    }\n"])), (0, responsiveProps_1.mq)("laptop", "display: flex;"), function (props) { return props.theme.spacing(SideBar_1.SIDEBAR_COLLAPSED_WIDTH); }, SideBar_1.StyledSidebar);
 var MenuSlideOpenIndicator = function (_a) {
     var children = _a.children;
     return (react_1.default.createElement(StyledBox, null, children));

package/dist/components/Menu/SideBarHeader.js

@@ -32,7 +32,7 @@ var styled_components_1 = __importStar(require("styled-components"));
 var Box_1 = require("../Box/Box");
 var constants_1 = require("../../layouts/constants");
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
-var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;\n  // flex-direction: column;\n  // justify-content: center;\n  \n  // font-size: ", ";\n  // color: ", ";  \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);\n  \n  ", "  \n"], ["\n  box-sizing: border-box; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;\n  // flex-direction: column;\n  // justify-content: center;\n  \n  // font-size: ", ";\n  // color: ", ";  \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);\n  \n  ", "  \n"])), function (props) { return props.theme.palette.button.text.idle.text; }, function (props) { return props.theme.spacing(5); }, function (props) { return props.theme.palette.common.white; }, (0, responsiveProps_1.mq)('laptop', (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      min-height: ", ";\n  "], ["\n      min-height: ", ";\n  "])), function (props) { return props.theme.spacing(12); })));
+var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-sizing: border-box; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;    \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);\n  \n  ", "  \n"], ["\n  box-sizing: border-box; \n  color: ", ";\n  font-weight: bold;  \n  \n  display: flex;    \n  text-align: center;\n  \n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;\n  \n  background-color: rgba(0,0,0,.2);\n  \n  ", "  \n"])), function (props) { return props.theme.palette.button.text.idle.text; }, (0, responsiveProps_1.mq)('laptop', (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      min-height: ", ";\n  "], ["\n      min-height: ", ";\n  "])), function (props) { return props.theme.spacing(12); })));
 var SideBarHeader = function (_a) {
     var children = _a.children, right = _a.right;
     return (react_1.default.createElement(StyledBox, { mb: constants_1.VerticalRhythmLaptop },

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

@@ -0,0 +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

@@ -0,0 +1,66 @@
+"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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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    \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        color: ".concat(props.theme.palette.form[props.variant], ";       \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 () {
+        if (!isActive) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(id);
+        }
+    }, [id, isActive, onClick]);
+    return react_1.default.createElement(StyledBox, __assign({}, restProps, { onClick: handleClick, isActive: isActive }));
+};
+exports.Tab = Tab;
+var templateObject_1, templateObject_2, templateObject_3;

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.d.ts

@@ -0,0 +1 @@
+export declare const Tabs: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("../Box/Box").BoxProps, never>;

package/dist/components/Tabs/Tabs.js

@@ -0,0 +1,14 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+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"], ["\n    display: flex;\n    border-bottom: 1px solid rgba(34,36,38,.15);     \n"])));
+var templateObject_1;

package/dist/form/ScaffoldForm/FormGrid/FormGridWrapper.js

@@ -22,10 +22,10 @@ exports.getFormGridWrapperProps = getFormGridWrapperProps;
 var FormGridWrapper = function (_a) {
     var position = _a.position, align = _a.align, label = _a.label, hint = _a.hint, error = _a.error, children = _a.children;
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(FormGridCell_1.FormGridCell, { position: position, align: align },
+        react_1.default.createElement(FormGridCell_1.FormGridCell, { position: position, align: align, className: 'form-grid-cell__label-hint' },
             label && (react_1.default.createElement(Label, { error: error }, label)),
             hint && (react_1.default.createElement(Hint, { error: error }, hint))),
-        react_1.default.createElement(FormGridCell_1.FormGridCell, { position: position, align: align, rowOffset: 1 },
+        react_1.default.createElement(FormGridCell_1.FormGridCell, { position: position, align: align, rowOffset: 1, className: 'form-grid-cell__field-error' },
             children,
             error && (react_1.default.createElement(Error, null, error)))));
 };

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';
@@ -25,6 +26,9 @@ export * from './components/Panel/Panel';
 export * from './components/Section/Section';
 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);
@@ -37,6 +38,9 @@ __exportStar(require("./components/Panel/Panel"), exports);
 __exportStar(require("./components/Section/Section"), exports);
 __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.7.0",
+  "version": "3.10.0",
   "private": false,
   "files": [
     "dist/**"