quicksnack 1.21.0 → 1.22.1

package/dist/components/Details/Details.d.ts

@@ -1,5 +1,6 @@
 import React from "react";
 interface Props {
+    firstColumnWidth: string;
     details: Record<string, number | string | JSX.Element>;
 }
 export declare const Details: React.FC<Props>;

package/dist/components/Details/Details.js

@@ -1,19 +1,45 @@
 "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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Details = void 0;
 var react_1 = __importDefault(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
 var Table_1 = require("../Table/Table");
+var StyledCell = (0, styled_components_1.default)(Table_1.Table.Cell)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) { return props.firstRow && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject([" border-top: 0px !important;"], [" border-top: 0px !important;"]))); }, function (props) { return props.width && (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" width: ", ";"], [" width: ", ";"])), props.width); });
 var Details = function (_a) {
-    var details = _a.details;
+    var details = _a.details, firstColumnWidth = _a.firstColumnWidth;
     return (react_1.default.createElement(Table_1.Table, null,
-        react_1.default.createElement("tbody", null, Object.entries(details).map(function (_a) {
+        react_1.default.createElement("tbody", null, Object.entries(details).map(function (_a, index) {
             var key = _a[0], val = _a[1];
-            return (react_1.default.createElement(Table_1.Table.Row, { key: key },
-                react_1.default.createElement(Table_1.Table.Cell, null, key),
-                react_1.default.createElement(Table_1.Table.Cell, null, val)));
+            return (react_1.default.createElement(Table_1.Table.Row, { key: key, disableHover: true },
+                react_1.default.createElement(StyledCell, { width: firstColumnWidth, firstRow: index === 0 }, key),
+                react_1.default.createElement(StyledCell, { firstRow: index === 0 }, val)));
         }))));
 };
 exports.Details = Details;
+var templateObject_1, templateObject_2, templateObject_3;

package/dist/components/Modal/Modal.js

@@ -36,7 +36,7 @@ var SlideInFromTop_1 = require("../../animation/SlideInFromTop/SlideInFromTop");
 var Panel_1 = require("../Panel/Panel");
 var Box_1 = require("../Box/Box");
 var Overlay_1 = require("../Overlay/Overlay");
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);  \n  z-index: 50;\n"], ["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);  \n  z-index: 50;\n"])));
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);  \n  z-index: 50;\n"], ["\n  position: fixed;\n  left: 50%;\n  top: 50%;\n  transform: translate(-50%, -50%);  \n  z-index: 50;\n"])));
 var StyledPanel = (0, styled_components_1.default)(Panel_1.Panel)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);\n"], ["\n  box-shadow: 0 8px 8px 0 rgba(34,36,38,.15);\n"])));
 var Content = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  line-height: ", ";\n  font-size: 15px;\n"], ["\n  line-height: ", ";\n  font-size: 15px;\n"])), function (props) { return props.theme.spacing(6); });
 var Modal = function (_a) {

package/dist/components/Table/Table.d.ts

@@ -1,7 +1,9 @@
 import React from "react";
 import { Theme } from "../../UiProvider";
 export declare const StyledTable: import("styled-components").StyledComponent<"table", import("styled-components").DefaultTheme, {}, never>;
-declare const StyledTableRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {}, never>;
+declare const StyledTableRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
+    disableHover?: boolean | undefined;
+}, never>;
 interface HeadCellProps {
     sortable?: boolean;
     sortDirection?: 'asc' | 'desc';

package/dist/components/Table/Table.js

@@ -55,7 +55,7 @@ var responsiveProps_1 = require("../../form/ScaffoldForm/utils/responsiveProps")
 exports.StyledTable = styled_components_1.default.table(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;      \n"], ["\n  border-radius: 4px;\n  width: 100%;\n  border-collapse: separate;\n  border-spacing: 0;      \n"])));
 var StyledTableRow = styled_components_1.default.tr(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  ", "    \n"], ["\n  & > td {\n    transition: background-color .1s ease, color .1s ease;\n  }\n  ", "    \n"])), function (props) { return Object.entries(props.theme.palette.pane).map(function (_a) {
     var variant = _a[0], value = _a[1];
-    return "\n    &:nth-child(odd) > td." + variant + " {    \n      color: " + value.main.idle.text + ";\n      background-color: " + value.main.idle.background + ";        \n    }            \n    &:nth-child(odd):hover > td." + variant + " {\n      color: " + value.main.hover.text + ";\n      background-color: " + value.main.hover.background + ";          \n    }  \n    &:nth-child(even) > td." + variant + " {    \n      color: " + value.alternate.idle.text + ";\n      background-color: " + value.alternate.idle.background + ";        \n    }            \n    &:nth-child(even):hover > td." + variant + " {\n      color: " + value.alternate.hover.text + ";\n      background-color: " + value.alternate.hover.background + ";          \n    }\n  ";
+    return "\n    &:nth-child(odd) > td." + variant + " {    \n      color: " + value.main.idle.text + ";\n      background-color: " + value.main.idle.background + ";        \n    }                  \n    &:nth-child(even) > td." + variant + " {    \n      color: " + value.alternate.idle.text + ";\n      background-color: " + value.alternate.idle.background + ";        \n    }            \n    \n    \n    " + (!props.disableHover && "\n      &:nth-child(odd):hover > td." + variant + " {\n        color: " + value.main.hover.text + ";\n        background-color: " + value.main.hover.background + ";          \n      }\n      &:nth-child(even):hover > td." + variant + " {\n        color: " + value.alternate.hover.text + ";\n        background-color: " + value.alternate.hover.background + ";          \n      }\n    ") + " \n    \n    \n  ";
 }); });
 var StyledTableCell = styled_components_1.default.td(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  border-top: 1px solid rgba(34,36,38,.1);\n  border-right: 1px solid rgba(34,36,38,.1);    \n  padding: ", ";\n  \n  &:last-of-type {\n    border-right: 0;\n  }\n        \n  ", "\n"], ["\n  border-top: 1px solid rgba(34,36,38,.1);\n  border-right: 1px solid rgba(34,36,38,.1);    \n  padding: ", ";\n  \n  &:last-of-type {\n    border-right: 0;\n  }\n        \n  ", "\n"])), function (props) { return props.theme.spacing(2, 3); }, function (props) { return (0, responsiveProps_1.responsiveProps)(props, {
     width: function (unit) { return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), unit); },

package/dist/form/FileField/FileField.d.ts

@@ -3,5 +3,5 @@ interface Props extends React.InputHTMLAttributes<any> {
     chooseFileLabel?: string;
     changeFileLabel?: string;
 }
-export declare const FileField: React.FC<Props>;
+export declare const FileField: React.ForwardRefExoticComponent<Props & React.RefAttributes<unknown>>;
 export {};

package/dist/form/FileField/FileField.js

@@ -53,31 +53,25 @@ var react_1 = __importStar(require("react"));
 var styled_components_1 = __importDefault(require("styled-components"));
 var Button_1 = require("../Button/Button");
 var TextField_1 = require("../TextField/TextField");
-var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;    \n"], ["\n  display: flex;    \n"])));
-var HiddenInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: -1000px;\n  width: 1px;  \n"], ["\n  position: absolute;\n  left: -1000px;\n  width: 1px;  \n"])));
+var Wrapper = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;    \n"], ["\n  position: relative;\n  display: flex;    \n"])));
+var HiddenInput = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;    \n  width: 100%;\n  opacity:0;\n"], ["\n  position: absolute;\n  left: 0;\n  right: 0;\n  top: 0;\n  bottom: 0;    \n  width: 100%;\n  opacity:0;\n"])));
 var StyledButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  height: 40px;\n"], ["\n  height: 40px;\n"])));
 var StyledTextField = (0, styled_components_1.default)(TextField_1.TextField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;  \n"], ["\n  flex: 1;  \n"])));
-var FileField = function (_a) {
+exports.FileField = react_1.default.forwardRef(function (_a, forwardedRef) {
     var className = _a.className, placeholder = _a.placeholder, _b = _a.chooseFileLabel, chooseFileLabel = _b === void 0 ? "Choose file" : _b, _c = _a.changeFileLabel, changeFileLabel = _c === void 0 ? "Change file" : _c, props = __rest(_a, ["className", "placeholder", "chooseFileLabel", "changeFileLabel"]);
     var _d = (0, react_1.useState)(""), fileName = _d[0], setFilename = _d[1];
-    var ref = (0, react_1.useRef)(null);
-    var onClick = react_1.default.useCallback(function (e) {
-        var _a;
-        e.preventDefault();
-        (_a = ref.current) === null || _a === void 0 ? void 0 : _a.click();
-    }, []);
+    var ref = (forwardedRef || react_1.default.createRef());
     react_1.default.useEffect(function () {
         if (ref.current) {
-            ref.current.onchange = function () {
-                var _a, _b, _c, _d;
-                setFilename((_d = (_c = (_b = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.files) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.name) !== null && _d !== void 0 ? _d : "");
-            };
+            ref.current.addEventListener('change', function (e) {
+                var files = (e === null || e === void 0 ? void 0 : e.target).files;
+                setFilename((files === null || files === void 0 ? void 0 : files[0].name) || "");
+            });
         }
     }, []);
     return (react_1.default.createElement(Wrapper, null,
         react_1.default.createElement(HiddenInput, __assign({ type: 'file', ref: ref }, props)),
-        react_1.default.createElement(StyledButton, { onClick: onClick, variant: 'basic' }, !!fileName ? changeFileLabel : chooseFileLabel),
+        react_1.default.createElement(StyledButton, { variant: 'basic' }, !!fileName ? changeFileLabel : chooseFileLabel),
         react_1.default.createElement(StyledTextField, { placeholder: placeholder, className: className, disabled: true, value: fileName })));
-};
-exports.FileField = FileField;
+});
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quicksnack",
   "description": "Quickly create beautiful admin layouts using react",
-  "version": "1.21.0",
+  "version": "1.22.1",
   "private": false,
   "files": [
     "dist/**"
@@ -62,15 +62,15 @@
     "@storybook/react": "^6.3.8",
     "@testing-library/jest-dom": "5.14.1",
     "@testing-library/react": "12.1.2",
-    "@testing-library/user-event": "13.2.1",
+    "@testing-library/user-event": "13.3.0",
     "@types/jest": "27.0.2",
     "@types/lodash": "4.14.175",
-    "@types/node": "16.10.3",
-    "@types/react": "17.0.27",
+    "@types/node": "16.10.9",
+    "@types/react": "17.0.29",
     "@types/react-dom": "17.0.9",
-    "@types/styled-components": "5.1.14",
+    "@types/styled-components": "5.1.15",
     "babel-loader": "8.2.2",
-    "chromatic": "5.10.2",
+    "chromatic": "6.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-icons": "4.3.1",