@longline/aqua-ui 1.0.26 → 1.0.28

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.
Files changed (7) hide show
  1. package/containers/Form/elements/BoxWrapper.js +1 -1
  2. package/controls/Dropzone/Dropbox.d.ts +5 -0
  3. package/controls/Dropzone/Dropbox.js +1 -1
  4. package/controls/Dropzone/Dropzone.d.ts +5 -0
  5. package/controls/Dropzone/Dropzone.js +1 -1
  6. package/package.json +1 -1
  7. package/services/Dialog/DialogContent.d.ts +1 -1
package/containers/Form/elements/BoxWrapper.js CHANGED
@@ -31,6 +31,6 @@ var BoxWrapperBase = function (props) {
31
31
  React.createElement(HintBackground, null, props.hint)));
32
32
  };
33
33
  var HintBackground = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.radius.normal; });
34
- var BoxWrapper = styled(BoxWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
34
+ var BoxWrapper = styled(BoxWrapperBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n height: 80px;\n \n // Appearance:\n border-radius: ", "px;\n background-color: ", ";\n border: none;\n\n // Content:\n display: flex;\n align-items: center;\n justify-content: start;\n\n // Hint/error background:\n ", " {\n ", "\n }\n\n // Hover:\n &:hover {\n outline: solid 2px ", ";\n }\n\n &:focus-within {\n outline: solid 2px ", ";\n } \n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n }\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n bottom: 2px;\n color: ", ";\n }\n\n // Error state:\n ", "\n\n // Disabled state:\n ", "\n\n // Ghost state:\n ", "\n\n // Fields may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[100]; }, HintBackground, function (p) { return !p.ghost && !p.disabled && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.error ? p.theme.colors.negative : p.theme.colors.neutral[95]); }, function (p) { return p.theme.colors.primary[2]; }, function (p) { return p.theme.colors.primary[1]; }, Label, function (p) { return p.theme.colors.primary[2]; }, Hint, function (p) { return p.error ? p.theme.colors.neutral[100] : p.theme.colors.primary[3]; }, function (p) { return p.error && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "], ["\n outline: solid 2px ", ";\n &:hover, &:focus-within {\n outline: solid 2px ", ";\n }\n "])), p.theme.colors.negative, p.theme.colors.negative); }, function (p) { return p.disabled && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "], ["\n user-select: none;\n outline: solid 2px ", ";\n background-color: ", ";\n pointer-events: none;\n ", " {\n color: ", ";\n }\n ", " {\n color: ", ";\n }\n "])), p.theme.colors.primary[4], p.theme.colors.primary[4], Label, p.theme.colors.neutral[50], Hint, p.theme.colors.neutral[50]); }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n pointer-events: none;\n\n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], Label, function (p) { return p.theme.colors.primary[1]; }, Hint, function (p) { return p.theme.colors.primary[1]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
35
35
  export { BoxWrapper };
36
36
  var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
package/controls/Dropzone/Dropbox.d.ts CHANGED
@@ -2,6 +2,11 @@ import * as React from 'react';
2
2
  interface IProps {
3
3
  /** @ignore */
4
4
  className?: string;
5
+ /**
6
+ * If set, allows a file filter, e.g. `.xls,.xlsx`.
7
+ * This does _not_ prevent the user to upload another kind of file.
8
+ */
9
+ accept?: string;
5
10
  onDragover: () => void;
6
11
  onDragLeave: () => void;
7
12
  onAddFiles: (files: File[]) => void;
package/controls/Dropzone/Dropbox.js CHANGED
@@ -40,7 +40,7 @@ var DropboxBase = function (props) {
40
40
  React.createElement("div", null, (_a = props.message) !== null && _a !== void 0 ? _a : "Drop a file here to upload, or click to select."),
41
41
  React.createElement("svg", null,
42
42
  React.createElement("use", { xlinkHref: SVG.Other.CloudUpload })),
43
- React.createElement("input", { ref: inputElement, type: "file", multiple: true, onChange: handleAddFile })));
43
+ React.createElement("input", { ref: inputElement, type: "file", accept: props.accept, multiple: true, onChange: handleAddFile })));
44
44
  };
45
45
  var Dropbox = styled(DropboxBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: relative;\n border: dashed 2px ", ";\n border-radius: ", "px;\n cursor: pointer;\n width: 100%;\n text-align: center;\n\n ", "\n\n div {\n margin-top: 8px;\n font-weight: 500;\n color: ", ";\n }\n\n svg {\n display: block;\n margin: 8px;\n width: 100%;\n height: 150px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n"], ["\n position: relative;\n border: dashed 2px ", ";\n border-radius: ", "px;\n cursor: pointer;\n width: 100%;\n text-align: center;\n\n ", "\n\n div {\n margin-top: 8px;\n font-weight: 500;\n color: ", ";\n }\n\n svg {\n display: block;\n margin: 8px;\n width: 100%;\n height: 150px;\n fill: ", ";\n }\n\n input {\n display: none;\n }\n"])), function (p) { return p.hover ? p.theme.colors.neutral[100] : p.theme.colors.neutral[80]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.hover && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background: ", ";\n "], ["\n background: ", ";\n "])), p.theme.colors.primary[3]); }, function (p) { return p.hover ? p.theme.colors.neutral[100] : p.theme.colors.neutral[80]; }, function (p) { return p.hover ? p.theme.colors.primary[1] : p.theme.colors.primary[2]; });
46
46
  export { Dropbox };
package/controls/Dropzone/Dropzone.d.ts CHANGED
@@ -4,6 +4,11 @@ interface IDropzoneProps {
4
4
  className?: string;
5
5
  /** @ignore */
6
6
  children?: React.ReactNode;
7
+ /**
8
+ * If set, allows a file filter, e.g. `.xls,.xlsx`.
9
+ * This does _not_ prevent the user to upload another kind of file.
10
+ */
11
+ accept?: string;
7
12
  /**
8
13
  * Callback to call when files are dropped in the Dropzone. Multiple files can be uploaded at
9
14
  * a time.
package/controls/Dropzone/Dropzone.js CHANGED
@@ -25,6 +25,6 @@ var Dropzone = function (props) {
25
25
  var handleDragLeave = function () {
26
26
  setHover(false);
27
27
  };
28
- return (React.createElement(Dropbox, { hover: hover, message: props.message, onDragover: handleDragOver, onDragLeave: handleDragLeave, onAddFiles: handleAddFiles }));
28
+ return (React.createElement(Dropbox, { hover: hover, message: props.message, accept: props.accept, onDragover: handleDragOver, onDragLeave: handleDragLeave, onAddFiles: handleAddFiles }));
29
29
  };
30
30
  export { Dropzone };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@longline/aqua-ui",
3
- "version": "1.0.26",
3
+ "version": "1.0.28",
4
4
  "description": "AquaUI",
5
5
  "author": "Alexander van Oostenrijk / Longline Environment",
6
6
  "license": "Commercial",
package/services/Dialog/DialogContent.d.ts CHANGED
@@ -13,7 +13,7 @@ interface IProps {
13
13
  */
14
14
  maxHeight?: number;
15
15
  /**
16
- * If set, no padding will be added around the content. *
16
+ * If set, no padding will be added around the content.
17
17
  * @default false
18
18
  */
19
19
  nopadding?: boolean;