quicksnack 3.10.1 → 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/package.json

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