quicksnack 3.21.1 → 3.22.0

package/dist/components/Icons/CrossIcon.d.ts

@@ -0,0 +1 @@
+export declare const CrossIcon: () => JSX.Element;

package/dist/components/Icons/CrossIcon.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CrossIcon = void 0;
+var react_1 = __importDefault(require("react"));
+var CrossIcon = function () {
+    return react_1.default.createElement("svg", { stroke: "currentColor", fill: "currentColor", strokeWidth: "0", viewBox: "0 0 352 512", height: "1em", width: "1em", xmlns: "http://www.w3.org/2000/svg" },
+        react_1.default.createElement("path", { d: "M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z" }));
+};
+exports.CrossIcon = CrossIcon;

package/dist/form/Button/Button.d.ts

@@ -7,6 +7,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<any> {
     hasChildren?: boolean;
     actionButton?: boolean;
     stretch?: boolean;
+    noMargin?: boolean;
 }
 export declare const Button: React.FC<React.PropsWithChildren<ButtonProps>>;
 export {};

package/dist/form/Button/Button.js

@@ -57,7 +57,7 @@ var react_1 = __importDefault(require("react"));
 var styled_components_1 = __importStar(require("styled-components"));
 var theme_1 = require("../../theme");
 var responsiveProps_1 = require("../../responsiveness/responsiveProps");
-var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "      \n"], ["\n  ", "\n  ", "      \n"])), function (props) { return props.stretch && "width: 100%;"; }, function (props) { return props.actionButton || props.stretch
+var Wrapper = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n  ", "      \n"], ["\n  ", "\n  ", "      \n"])), function (props) { return props.stretch && "width: 100%;"; }, function (props) { return props.actionButton || props.stretch || props.noMargin
     ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["margin: 0;"], ["margin: 0;"]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["margin: ", ";"], ["margin: ", ";"])), function (props) { return props.theme.spacing(0, 2, 0, 0); }); });
 var StyledButton = styled_components_1.default.button(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;  \n  outline: 0;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  transition: background-color .1s ease, color .1s ease;      \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  user-select: none;\n  min-height: 38px;   \n  \n  ", "\n  \n  ", "\n  \n   \n  ", " \n    \n  &:disabled {\n    opacity: .5;\n    cursor: default;\n  }  \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"], ["\n  font-size: 14px;\n  font-weight: bold;\n  letter-spacing: 1px;    \n  line-height: 1em;  \n  outline: 0;\n  border: none;\n  border-radius: 4px;\n  cursor: pointer;\n  text-decoration: none;\n  font-family: \"Open Sans\", Lato, \"Helvetica Neue\", Arial, Helvetica, sans-serif;   \n  transition: background-color .1s ease, color .1s ease;      \n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  user-select: none;\n  min-height: 38px;   \n  \n  ", "\n  \n  ", "\n  \n   \n  ", " \n    \n  &:disabled {\n    opacity: .5;\n    cursor: default;\n  }  \n                   \n  &:focus {\n    background-blend-mode: darken;\n  }        \n  \n  ", "\n          \n  ", "        \n"])), function (props) { return props.stretch && (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n      width: 100%;\n      display: block;\n  "], ["\n      width: 100%;\n      display: block;\n  "]))); }, function (props) { return props.actionButton && (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: 100%;      \n      ", "\n  "], ["\n      width: 100%;      \n      ", "\n  "])), (0, responsiveProps_1.mq)('laptop', "width: auto")); }, function (props) { return props.variant !== 'text'
     ? !props.icon
@@ -75,8 +75,8 @@ var IconWrapper = styled_components_1.default.span(templateObject_13 || (templat
     ? props.hasChildren && (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-right: ", ";\n    "], ["\n      padding-right: ", ";\n    "])), props.theme.spacing(2))
     : props.hasChildren && (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: ", ";\n      height: 100%;\n      background-color: rgba(0,0,0,.05);\n      \n      & > svg {\n        transform: translate(-50%, -50%);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n      }\n  "], ["\n      position: absolute;\n      left: 0;\n      top: 0;\n      width: ", ";\n      height: 100%;\n      background-color: rgba(0,0,0,.05);\n      \n      & > svg {\n        transform: translate(-50%, -50%);\n        position: absolute;\n        top: 50%;\n        left: 50%;\n      }\n  "])), function (props) { return props.theme.spacing(10); }); });
 exports.Button = react_1.default.forwardRef(function (_a, ref) {
-    var children = _a.children, icon = _a.icon, stretch = _a.stretch, props = __rest(_a, ["children", "icon", "stretch"]);
-    return (react_1.default.createElement(Wrapper, { actionButton: props.actionButton, stretch: stretch },
+    var children = _a.children, icon = _a.icon, stretch = _a.stretch, noMargin = _a.noMargin, props = __rest(_a, ["children", "icon", "stretch", "noMargin"]);
+    return (react_1.default.createElement(Wrapper, { actionButton: props.actionButton, noMargin: noMargin, stretch: stretch },
         react_1.default.createElement(StyledButton, __assign({ ref: ref, icon: icon, hasChildren: !!children, stretch: stretch }, props),
             icon && (react_1.default.createElement(IconWrapper, { variant: props.variant, hasChildren: !!children }, icon)),
             children)));

package/dist/form/FileField/FileField.js

@@ -57,20 +57,30 @@ 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 CrossIcon_1 = require("../../components/Icons/CrossIcon");
 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  .has-error & {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \n"], ["    \n  height: 40px;\n  \n  .has-error & {\n    background: #fff6f6;\n    border-color: #e0b4b4;\n    color: #9f3a38;\n  }  \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 StyledTextField = (0, styled_components_1.default)(TextField_1.TextField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  flex: 1;  \n  padding-right: ", "\n"], ["\n  flex: 1;  \n  padding-right: ", "\n"])), function (props) { return props.theme.spacing(8); });
+var DeleteButton = (0, styled_components_1.default)(Button_1.Button)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    position: absolute;\n    top: 50%;\n    right: ", ";\n    transform: translateY(-44%)\n"], ["\n    position: absolute;\n    top: 50%;\n    right: ", ";\n    transform: translateY(-44%)\n"])), function (props) { return props.theme.spacing(3); });
 exports.FileField = react_1.default.forwardRef(function (_a, ref) {
     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 _d = (0, react_1.useState)(), originalRef = _d[0], setOriginalRef = _d[1];
+    var _e = (0, react_1.useState)(""), fileName = _e[0], setFilename = _e[1];
     var handleChange = react_1.default.useCallback(function (e) {
         var _a;
         var files = (e === null || e === void 0 ? void 0 : e.target).files;
         setFilename(((_a = files === null || files === void 0 ? void 0 : files[0]) === null || _a === void 0 ? void 0 : _a.name) || "");
     }, []);
+    var handleRemove = (0, react_1.useCallback)(function () {
+        if (originalRef) {
+            originalRef.value = '';
+            originalRef.dispatchEvent(new Event('change'));
+        }
+    }, [originalRef]);
     var extendedRef = react_1.default.useMemo(function () { return function (el) {
         el === null || el === void 0 ? void 0 : el.addEventListener('change', handleChange);
+        setOriginalRef(el);
         if (typeof ref === 'function') {
             ref === null || ref === void 0 ? void 0 : ref(el);
         }
@@ -78,6 +88,7 @@ exports.FileField = react_1.default.forwardRef(function (_a, ref) {
     return (react_1.default.createElement(Wrapper, null,
         react_1.default.createElement(HiddenInput, __assign({ type: 'file', ref: extendedRef }, props)),
         react_1.default.createElement(StyledButton, { variant: 'basic' }, !!fileName ? changeFileLabel : chooseFileLabel),
-        react_1.default.createElement(StyledTextField, { placeholder: placeholder, className: className, disabled: true, value: fileName })));
+        react_1.default.createElement(StyledTextField, { placeholder: placeholder, className: className, disabled: true, value: fileName }),
+        !!fileName && react_1.default.createElement(DeleteButton, { noMargin: true, icon: react_1.default.createElement(CrossIcon_1.CrossIcon, null), variant: "text", onClick: handleRemove })));
 });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/package.json

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