quicksnack 3.22.1 → 3.22.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -33,13 +33,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
33
33
  exports.AnimatedCheckmark = void 0;
34
34
  var react_1 = __importDefault(require("react"));
35
35
  var styled_components_1 = __importStar(require("styled-components"));
36
- var Mask = styled_components_1.default.g(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n fill: none; \n stroke: ", "; \n stroke-width: 10;\n"], ["\n fill: none; \n stroke: ", "; \n stroke-width: 10;\n"])), function (props) { return props.theme.palette.colors.green; });
36
+ var green = '#20c997';
37
+ var Mask = styled_components_1.default.g(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n fill: none; \n stroke: ", "; \n stroke-width: 10;\n"], ["\n fill: none; \n stroke: ", "; \n stroke-width: 10;\n"])), green);
37
38
  var polyLineAnimation = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject([" \n 0% {\n stroke-dashoffset: 100px\n }\n 100% {\n stroke-dashoffset: 0px\n }\n"], [" \n 0% {\n stroke-dashoffset: 100px\n }\n 100% {\n stroke-dashoffset: 0px\n }\n"])));
38
- var Polyline = styled_components_1.default.polyline(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n stroke-dasharray: 100px, 100px;\n stroke-dashoffset: 200px;\n animation: ", " 0.21s ease-in-out 0.4s backwards;\n stroke: ", "; \n stroke-width: 10; \n"], ["\n stroke-dasharray: 100px, 100px;\n stroke-dashoffset: 200px;\n animation: ", " 0.21s ease-in-out 0.4s backwards;\n stroke: ", "; \n stroke-width: 10; \n"])), polyLineAnimation, function (props) { return props.theme.palette.colors.green; });
39
+ var Polyline = styled_components_1.default.polyline(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n stroke-dasharray: 100px, 100px;\n stroke-dashoffset: 200px;\n animation: ", " 0.42s ease-in-out 0.8s backwards;\n stroke: ", ";\n stroke-width: 10; \n"], ["\n stroke-dasharray: 100px, 100px;\n stroke-dashoffset: 200px;\n animation: ", " 0.42s ease-in-out 0.8s backwards;\n stroke: ", ";\n stroke-width: 10; \n"])), polyLineAnimation, green);
39
40
  var circleAnimation = (0, styled_components_1.keyframes)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n 0% {\n stroke-dashoffset: 480px \n }\n 100% {\n stroke-dashoffset: 960px\n }\n"], ["\n 0% {\n stroke-dashoffset: 480px \n }\n 100% {\n stroke-dashoffset: 960px\n }\n"])));
40
- var Circle = styled_components_1.default.circle(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n stroke-dasharray: 480px, 480px; \n stroke-dashoffset: 960px;\n animation: ", " 0.3s ease-in-out backwards;\n stroke: ", "; \n stroke-width: 10; \n"], ["\n stroke-dasharray: 480px, 480px; \n stroke-dashoffset: 960px;\n animation: ", " 0.3s ease-in-out backwards;\n stroke: ", "; \n stroke-width: 10; \n"])), circleAnimation, function (props) { return props.theme.palette.colors.green; });
41
+ var Circle = styled_components_1.default.circle(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n stroke-dasharray: 480px, 480px; \n stroke-dashoffset: 960px;\n animation: ", " 0.6s ease-in-out backwards;\n stroke: ", ";\n stroke-width: 10; \n"], ["\n stroke-dasharray: 480px, 480px; \n stroke-dashoffset: 960px;\n animation: ", " 0.6s ease-in-out backwards;\n stroke: ", ";\n stroke-width: 10; \n"])), circleAnimation, green);
41
42
  var circleColoredAnimation = (0, styled_components_1.keyframes)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n 0% { \n opacity:0; \n }\n 100% { \n opacity:100; \n }\n"], ["\n 0% { \n opacity:0; \n }\n 100% { \n opacity:100; \n }\n"])));
42
- var CircleColored = styled_components_1.default.circle(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n stroke-dasharray: 480px, 480px; \n stroke-dashoffset: 960px;\n animation: ", " 0.6s ease-in-out 0.7s backwards;\n fill: #effaf8; \n"], ["\n stroke-dasharray: 480px, 480px; \n stroke-dashoffset: 960px;\n animation: ", " 0.6s ease-in-out 0.7s backwards;\n fill: #effaf8; \n"])), circleColoredAnimation);
43
+ var CircleColored = styled_components_1.default.circle(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n stroke-dasharray: 480px, 480px; \n stroke-dashoffset: 960px;\n animation: ", " 1.2s ease-in-out 1.4s backwards;\n fill: #effaf8; \n"], ["\n stroke-dasharray: 480px, 480px; \n stroke-dashoffset: 960px;\n animation: ", " 1.2s ease-in-out 1.4s backwards;\n fill: #effaf8; \n"])), circleColoredAnimation);
43
44
  var AnimatedCheckmark = function () { return (react_1.default.createElement("svg", { viewBox: "0 0 154 154" },
44
45
  react_1.default.createElement(Mask, null,
45
46
  react_1.default.createElement(Circle, { cx: '77', cy: '77', r: '72' }),
@@ -4,6 +4,7 @@ interface Props {
4
4
  buttonLabel: string | JSX.Element;
5
5
  buttonIcon?: JSX.Element;
6
6
  title: string | JSX.Element;
7
+ subtitle?: string | JSX.Element;
7
8
  }
8
9
  export declare const Feedback: React.FC<Props>;
9
10
  export {};
@@ -17,12 +17,14 @@ var Modal_1 = require("../Modal/Modal");
17
17
  var styled_components_1 = __importDefault(require("styled-components"));
18
18
  var StyledBox = (0, styled_components_1.default)(Box_1.Box)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n width: 300px; \n"], ["\n width: 300px; \n"])));
19
19
  var Feedback = function (_a) {
20
- var onConfirm = _a.onConfirm, buttonLabel = _a.buttonLabel, buttonIcon = _a.buttonIcon, title = _a.title;
20
+ var onConfirm = _a.onConfirm, buttonLabel = _a.buttonLabel, buttonIcon = _a.buttonIcon, title = _a.title, subtitle = _a.subtitle;
21
21
  return (react_1.default.createElement(Modal_1.Modal, { handleClickOverlay: onConfirm, buttons: react_1.default.createElement(Button_1.Button, { stretch: true, icon: buttonIcon, variant: 'secondary', onClick: onConfirm }, buttonLabel) },
22
- react_1.default.createElement(StyledBox, { pt: 3, pb: 3, pl: 7, pr: 7 },
22
+ react_1.default.createElement(StyledBox, { pt: 3, pb: 3 },
23
23
  react_1.default.createElement(Box_1.Box, { pb: 7, textAlign: "center" },
24
- react_1.default.createElement(Header_1.Header, null, title)),
25
- react_1.default.createElement(AnimatedCheckmark_1.AnimatedCheckmark, null))));
24
+ react_1.default.createElement(Header_1.Header, null, title),
25
+ subtitle && react_1.default.createElement(Header_1.Header, { level: 5 }, subtitle)),
26
+ react_1.default.createElement(Box_1.Box, { pt: 5, pb: 5, pl: 7, pr: 7 },
27
+ react_1.default.createElement(AnimatedCheckmark_1.AnimatedCheckmark, null)))));
26
28
  };
27
29
  exports.Feedback = Feedback;
28
30
  var templateObject_1;
@@ -74,7 +74,8 @@ exports.FileField = react_1.default.forwardRef(function (_a, ref) {
74
74
  var handleRemove = (0, react_1.useCallback)(function () {
75
75
  if (originalRef) {
76
76
  originalRef.value = '';
77
- originalRef.dispatchEvent(new Event('change'));
77
+ originalRef.files = null;
78
+ originalRef.dispatchEvent(new Event('change', { bubbles: true }));
78
79
  }
79
80
  }, [originalRef]);
80
81
  var extendedRef = react_1.default.useMemo(function () { return function (el) {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "quicksnack",
3
3
  "description": "Quickly create beautiful admin layouts using react",
4
- "version": "3.22.1",
4
+ "version": "3.22.2",
5
5
  "private": false,
6
6
  "files": [
7
7
  "dist/**"
@@ -77,6 +77,7 @@
77
77
  "babel-loader": "8.2.5",
78
78
  "react": "18.1.0",
79
79
  "react-dom": "18.1.0",
80
+ "react-hook-form": "7.34.0",
80
81
  "react-icons": "4.3.1",
81
82
  "react-scripts": "5.0.1",
82
83
  "semantic-release": "19.0.2",