@mackin.com/styleguide 7.1.0-beta.3 → 7.2.0

package/index.d.ts

@@ -349,6 +349,9 @@ interface InputProps {
     onChange?: (value: InputValue, name?: string) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyPress?: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Defaults to 100. Ignored for type=number and type=date. */
     maxLength?: number;
     /** Ignored for type=textarea. */
@@ -761,6 +764,10 @@ interface FileUploaderProps {
     maxBytes?: number;
     multiple?: boolean;
     accept?: string;
+    /** Defaults to 'Click or drag and drop files.'*/
+    instructionMessage?: string;
+    /** For additional info below the instructionMessage. */
+    infoMessage?: string | JSX.Element;
 }
 declare const FileUploader: (p: FileUploaderProps) => JSX.Element;
 

package/index.js

@@ -2035,10 +2035,10 @@ const Input = React__namespace.forwardRef((props, ref) => {
     if (props.type === 'number') {
         inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, 
             // set fixed default to defeat pasting stupid numbers
-            maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+            maxLength: 50, min: props.min, max: props.max, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else if (props.type === 'date') {
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else if (props.type === 'textarea') {
         inputElement = React__namespace.createElement("textarea", { ref: ref, name: props.name, style: props.style, rows: props.rows || 10, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(css.css `
@@ -2046,11 +2046,11 @@ const Input = React__namespace.forwardRef((props, ref) => {
 			max-width: 100%;
 			min-height: ${theme.controls.height};
 			padding-top: 0.75rem;
-			height:auto;`, props.inputClassName), placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+			height:auto;`, props.inputClassName), placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     else {
         // text, password, email, and url
-        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+        inputElement = React__namespace.createElement("input", { ref: ref, name: props.name, pattern: props.pattern, style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: props.maxLength || DEFAULT_MAX_LENGTH, required: props.required, disabled: props.disabled, id: props.id, className: css.cx(inputStyles, props.inputClassName), placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange, onKeyDown: props.onKeyDown, onKeyUp: props.onKeyUp, onKeyPress: props.onKeyPress });
     }
     const inputWrapperStyles = css.css `
 		width:100%;
@@ -2934,7 +2934,7 @@ const hoverClass = css.css({
     backgroundColor: 'rgba(0,0,0,0.25) !important'
 });
 const FileUploader = (p) => {
-    var _a, _b, _c, _d, _e, _f;
+    var _a, _b, _c, _d, _e, _f, _g;
     const [message, setMessage] = React.useState(undefined);
     const [canUpload, setCanUpload] = React.useState(false);
     const [uploading, setUploading] = React.useState(false);
@@ -2947,7 +2947,7 @@ const FileUploader = (p) => {
     let filesDisplay = '';
     if (!message) {
         if (!(files === null || files === void 0 ? void 0 : files.length)) {
-            filesDisplay = `Click or drag and drop files.`;
+            filesDisplay = (_b = p.instructionMessage) !== null && _b !== void 0 ? _b : `Click or drag and drop files.`;
         }
         else {
             filesDisplay = `${files.length.toLocaleString()} file${files.length > 1 ? 's' : ''} selected (${getSizeString(totalFileSize)}): ${files.files.map(f => f.name).join(', ')}`;
@@ -2972,6 +2972,15 @@ const FileUploader = (p) => {
             maxBytes: p.maxBytes
         });
     };
+    let infoMessage;
+    if (p.infoMessage) {
+        if (typeof p.infoMessage === 'string') {
+            infoMessage = React__default['default'].createElement(Text, { noPad: true }, p.infoMessage);
+        }
+        else {
+            infoMessage = p.infoMessage;
+        }
+    }
     return (React__default['default'].createElement(Form, { ref: form, className: css.css({
             border: theme.controls.border,
             borderStyle: 'dashed',
@@ -3051,19 +3060,20 @@ const FileUploader = (p) => {
                         e.stopPropagation();
                         onFilesChange(undefined);
                     }, className: css.css({ marginLeft: '1rem', color: theme.colors.negative }), rightIcon: React__default['default'].createElement(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
+            infoMessage,
             !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (React__default['default'].createElement(InfoPanel, { variant: "error" },
                 "Invalid files: ",
                 files.invalidFiles.map(f => f.name).join(', '),
                 ".")),
             (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (React__default['default'].createElement(InfoPanel, { variant: "error" },
                 "Max file size exceeded (",
-                getSizeString((_b = p.maxBytes) !== null && _b !== void 0 ? _b : 0),
+                getSizeString((_c = p.maxBytes) !== null && _c !== void 0 ? _c : 0),
                 ").")))),
         canUpload && !(files === null || files === void 0 ? void 0 : files.hasErrors) && (React__default['default'].createElement(Button, { className: css.css({
-                width: (_c = p.buttonWidth) !== null && _c !== void 0 ? _c : '10rem',
+                width: (_d = p.buttonWidth) !== null && _d !== void 0 ? _d : '10rem',
                 zIndex: 1,
-            }), waiting: uploading, type: "submit", variant: (_d = p.buttonVariant) !== null && _d !== void 0 ? _d : 'primary' }, (_e = p.buttonText) !== null && _e !== void 0 ? _e : 'Upload')),
-        message === 'success' && (React__default['default'].createElement(UploadInfoPanel, { variant: "positive", message: (_f = p.successMessage) !== null && _f !== void 0 ? _f : 'Upload successful.', onClear: () => setMessage(undefined) })),
+            }), waiting: uploading, type: "submit", variant: (_e = p.buttonVariant) !== null && _e !== void 0 ? _e : 'primary' }, (_f = p.buttonText) !== null && _f !== void 0 ? _f : 'Upload')),
+        message === 'success' && (React__default['default'].createElement(UploadInfoPanel, { variant: "positive", message: (_g = p.successMessage) !== null && _g !== void 0 ? _g : 'Upload successful.', onClear: () => setMessage(undefined) })),
         message === 'failure' && (React__default['default'].createElement(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
 };
 const UploadInfoPanel = (p) => {

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "7.1.0-beta.3",
+	"version": "7.2.0",
 	"description": "",
 	"main": "./index.js",
-	"types": "./index.d.ts",
+"types": "./index.d.ts",
 	"scripts": {},
 	"author": "Mackin",
 	"license": "ISC",