@mackin.com/styleguide 6.2.0 → 7.0.0

package/index.d.ts

@@ -262,29 +262,11 @@ declare const ErrorModal: (props: {
 
 /** @jsx jsx */
 
-interface FilePickerProps {
-    maxBytes?: number;
-    multiple?: boolean;
-    accept?: string;
-    /** Defaults to 'Choose File(s)'. */
-    buttonText?: string;
-    /** If the handler returns true, the native file input will be cleared.  */
-    onChange?: (files: FileList | undefined) => boolean | undefined;
-    /**
-     * Used the facilitate communication between the FilePicker and FileUploader.
-     * Temp solution until we merge both together.  Don't use! */
-    __passClearFilesHandle?: (func: () => void) => void;
-}
-/** Basic implementation here for later abstraction. */
-declare const FilePicker: (props: FilePickerProps) => jsx.JSX.Element;
-
-/** @jsx jsx */
-
 interface IProps extends React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
     inline?: boolean;
 }
 /** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
-declare const Form: (props: IProps) => jsx.JSX.Element;
+declare const Form: React.ForwardRefExoticComponent<Pick<IProps, "inline" | "key" | "css" | "acceptCharset" | "action" | "autoComplete" | "encType" | "method" | "name" | "noValidate" | "target" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & React.RefAttributes<unknown>>;
 declare const FormFlexRow: (props: {
     children: React.ReactNode;
     className?: string;
@@ -374,9 +356,10 @@ declare const InfoTip: (props: InfoTipProps) => jsx.JSX.Element;
 /** @jsx jsx */
 
 declare type InputValue = string | number | undefined;
-declare type InputType = 'text' | 'number' | 'textarea' | 'date' | 'password';
+declare type InputType = 'text' | 'number' | 'textarea' | 'date' | 'password' | 'url' | 'email';
 interface InputProps {
     type: InputType;
+    name?: string;
     style?: React.CSSProperties;
     value?: InputValue;
     rounded?: boolean;
@@ -392,7 +375,7 @@ interface InputProps {
     /** Defaults to 'off'. */
     autoComplete?: string;
     /** Called with debounce when the input changes. */
-    onChange?: (value: InputValue) => void;
+    onChange?: (value: InputValue, name?: string) => void;
     onFocus?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     onBlur?: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     /** Defaults to 100. Ignored for type=number and type=date. */
@@ -407,8 +390,9 @@ interface InputProps {
     max?: number;
     /** Only used for type=textarea. Defaults to 10. */
     rows?: number;
+    pattern?: string;
 }
-declare const Input: (props: InputProps) => jsx.JSX.Element;
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<any>>;
 
 /** @jsx jsx */
 
@@ -816,7 +800,7 @@ declare const TabLocker: (props: {
 
 /** @jsx jsx */
 
-interface FileUploaderProps extends FilePickerProps {
+interface FileUploaderProps {
     onUpload: (files: FileList) => Promise<void>;
     /** Defaults to 'Upload'. */
     buttonText?: string;
@@ -828,8 +812,9 @@ interface FileUploaderProps extends FilePickerProps {
     buttonWidth?: string;
     /** Defaults to 'primary'. */
     buttonVariant?: ButtonVariant;
-    /** Will clear all files on upload success. */
-    clearOnUpload?: boolean;
+    maxBytes?: number;
+    multiple?: boolean;
+    accept?: string;
 }
 declare const FileUploader: (p: FileUploaderProps) => jsx.JSX.Element;
 
@@ -974,4 +959,4 @@ declare const Backdrop: (p: {
 
 declare const useMediaQuery: (query: string) => boolean;
 
-export { Alignment, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FilePicker, FilePickerProps, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };
+export { Alignment, Backdrop$1 as Backdrop, Backdrop as Backdrop2, BoundMemoryPager, BoundStaticPager, Button, ButtonProps, Calendar, CalendarProps, Checkbox, CheckboxProps, ConfirmModal, ConfirmModalProps, CopyButton, DatePicker, DatePickerProps, Divider, ErrorModal, FileUploader, Form, FormColumnRow, FormFlexRow, GlobalStyles, Header, Highlight, ICONS, Icon, Image, InfoPanel, InfoTip, InfoTipProps, Input, InputProps, ItemPager, Label, LabelProps, List, ListItem, MackinTheme, Modal, Nav, OmniLink, OmniLinkProps, PagedResult, Pager, PagerProps, Picker, PickerProps, Popover, ProgressBar, ProgressBarProps, SearchBox, SearchBoxProps, Slider, TabHeader, TabHeaderProps, TabLocker, Table, Td, TdCurrency, TdNumber, Text, TextProps, Th, ThSort, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };

package/index.js

@@ -1607,203 +1607,12 @@ const ErrorModal = (props) => {
             react.jsx(Text, { align: "center" }, message))));
 };
 
-/** @jsx jsx */
-const InfoPanel = (props) => {
-    const theme = useThemeSafely();
-    const styles = react.css `
-		border:${theme.colors.border};
-		padding:1rem;
-		color: rgba(0, 0, 0, 0.7);
-		margin: 0 !important;
-		${props.variant === 'info' && `
-			background-color:${theme.colors.info};
-			color:${theme.colors.infoFont};
-		`}
-		${props.variant === 'warning' && `
-			background-color:${theme.colors.warning};
-			color:${theme.colors.warningFont};
-		`}
-		${props.variant === 'error' && `
-			background-color:${theme.colors.omg};
-			color:${theme.colors.omgFont};
-		`}
-		${props.variant === 'negative' && `
-			background-color:${theme.colors.negative};
-			color:${theme.colors.negativeFont};
-		`}
-		${props.variant === 'positive' && `
-			background-color:${theme.colors.positive};
-			color:${theme.colors.positiveFont};
-		`}
-	`;
-    return (react.jsx(Text, { style: props.style, align: "center", css: styles, className: mergeClassNames('infoPanel', props.className) }, props.children));
-};
-
-class FileListPlus {
-    constructor(_raw, _args = {}) {
-        this._raw = _raw;
-        this._args = _args;
-        this._files = Array.from(this._raw).map(f => {
-            return { name: f.name, size: f.size, type: f.type };
-        });
-        if (this._args.accept) {
-            const acceptTypes = this._args.accept.split(',');
-            this._invalidFiles = this._files.filter(f => {
-                if (acceptTypes.includes(f.type)) {
-                    return false;
-                }
-                if (acceptTypes.some(t => f.name.endsWith(t))) {
-                    return false;
-                }
-                return true;
-            });
-        }
-        else {
-            this._invalidFiles = [];
-        }
-    }
-    get raw() {
-        return this._raw;
-    }
-    get length() {
-        return this._files.length;
-    }
-    get files() {
-        return this._files;
-    }
-    get invalidFiles() {
-        return this._invalidFiles;
-    }
-    get totalBytes() {
-        return lodash.sumBy(this.files, f => f.size);
-    }
-    get overMaxBytes() {
-        var _a;
-        return this.totalBytes >= ((_a = this._args.maxBytes) !== null && _a !== void 0 ? _a : Infinity);
-    }
-    get overFileLimit() {
-        return this.length > (this._args.multiple ? Infinity : 1);
-    }
-    get hasErrors() {
-        return this.overMaxBytes || this.overFileLimit || !!this.invalidFiles.length;
-    }
-}
-
-/** @jsx jsx */
-/** Basic implementation here for later abstraction. */
-const FilePicker = (props) => {
-    var _a, _b, _c, _d;
-    const input = React__namespace.useRef(null);
-    const [fileList, setFileList] = React__namespace.useState(undefined);
-    const totalFileSize = (_a = fileList === null || fileList === void 0 ? void 0 : fileList.totalBytes) !== null && _a !== void 0 ? _a : 0;
-    const theme = useThemeSafely();
-    let filesDisplay = '';
-    if (!(fileList === null || fileList === void 0 ? void 0 : fileList.length)) {
-        filesDisplay = `No file${props.multiple ? 's' : ''} chosen.`;
-    }
-    else {
-        filesDisplay = `${fileList.length.toLocaleString()} file${fileList.length > 1 ? 's' : ''} selected (${getSizeString(totalFileSize)}): ${fileList.files.map(f => f.name).join(', ')}`;
-    }
-    const width = '10rem';
-    const nativeInputStyles = react.css `
-		position: absolute;
-		top: 0;
-		left: 0;
-		bottom: 0;
-		right: 0;
-		border: 1px solid black;
-		cursor: pointer;
-		width:${width};
-		opacity: 0;
-	`;
-    const buttonText = (_b = props.buttonText) !== null && _b !== void 0 ? _b : `Choose File${props.multiple ? 's' : ''}`;
-    const clearFiles = () => {
-        if (input.current) {
-            input.current.value = '';
-        }
-        setFileList(undefined);
-    };
-    (_c = props.__passClearFilesHandle) === null || _c === void 0 ? void 0 : _c.call(props, clearFiles);
-    return (react.jsx("span", { css: { display: 'inline-block' }, className: "fileUploader" },
-        react.jsx("div", { css: {
-                position: 'relative',
-                width
-            } },
-            react.jsx(Button, { block: true, variant: "secondary", type: "button" }, buttonText),
-            react.jsx("input", { ref: input, css: nativeInputStyles, type: "file", multiple: props.multiple, accept: props.accept, onChange: e => {
-                    var _a;
-                    try {
-                        if (!e.target.files) {
-                            setFileList(undefined);
-                            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, undefined);
-                            return;
-                        }
-                        const fileListPlus = new FileListPlus(e.target.files, {
-                            accept: props.accept,
-                            multiple: props.multiple,
-                            maxBytes: props.maxBytes
-                        });
-                        if (props.onChange) {
-                            if (fileListPlus.hasErrors) {
-                                props.onChange(undefined);
-                                setFileList(fileListPlus);
-                            }
-                            else {
-                                const removeFiles = props.onChange(fileListPlus.raw);
-                                if (removeFiles) {
-                                    setFileList(undefined);
-                                }
-                                else {
-                                    setFileList(fileListPlus);
-                                }
-                            }
-                        }
-                        else {
-                            setFileList(fileListPlus);
-                        }
-                    }
-                    catch (err) {
-                        // tslint:disable-next-line
-                        console.error(err);
-                        setFileList(undefined);
-                    }
-                } })),
-        react.jsx(Text, null,
-            filesDisplay,
-            !!(fileList === null || fileList === void 0 ? void 0 : fileList.length) && (react.jsx(Button, { onClick: () => {
-                    var _a;
-                    clearFiles();
-                    (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, undefined);
-                }, css: { marginLeft: '1rem', color: theme.colors.negative }, rightIcon: react.jsx(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
-        !!(fileList === null || fileList === void 0 ? void 0 : fileList.invalidFiles.length) && react.jsx(InfoPanel, { variant: "error" },
-            "Invalid files: ",
-            fileList.invalidFiles.map(f => f.name).join(', '),
-            "."),
-        (fileList === null || fileList === void 0 ? void 0 : fileList.overMaxBytes) && react.jsx(InfoPanel, { variant: "error" },
-            "Max file size exceeded (",
-            getSizeString((_d = props.maxBytes) !== null && _d !== void 0 ? _d : 0),
-            ").")));
-};
-const bytesInMb = 1048576;
-const bytesInKb = 1024;
-const getSizeString = (size) => {
-    if (size < bytesInKb) {
-        return size.toLocaleString() + ' B';
-    }
-    else if (size < bytesInMb) {
-        return (size / bytesInKb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' KB';
-    }
-    else {
-        return (size / bytesInMb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' MB';
-    }
-};
-
 /** @jsx jsx */
 /** Use this instead of <form> directly.  If we need to fight Chrome's autofill, we can do so at a global level. */
-const Form = (props) => {
+const Form = React__namespace.forwardRef((props, ref) => {
     const { inline, children, onSubmit } = props, rest = __rest(props, ["inline", "children", "onSubmit"]);
     const theme = useThemeSafely();
-    return (react.jsx("form", Object.assign({ className: "form", css: {
+    return (react.jsx("form", Object.assign({ ref: ref, className: "form", css: {
             display: 'flex',
             flexDirection: props.inline ? 'row' : 'column',
             alignItems: props.inline ? 'flex-end' : 'normal',
@@ -1815,7 +1624,7 @@ const Form = (props) => {
                 onSubmit(e);
             }
         } }), children));
-};
+});
 const FormFlexRow = (props) => {
     var _a;
     const theme = useThemeSafely();
@@ -1952,6 +1761,38 @@ const Image = (props) => {
         }, alt: props.alt, style: props.style, className: mergeClassNames('image', props.className), src: props.src }));
 };
 
+/** @jsx jsx */
+const InfoPanel = (props) => {
+    const theme = useThemeSafely();
+    const styles = react.css `
+		border:${theme.colors.border};
+		padding:1rem;
+		color: rgba(0, 0, 0, 0.7);
+		margin: 0 !important;
+		${props.variant === 'info' && `
+			background-color:${theme.colors.info};
+			color:${theme.colors.infoFont};
+		`}
+		${props.variant === 'warning' && `
+			background-color:${theme.colors.warning};
+			color:${theme.colors.warningFont};
+		`}
+		${props.variant === 'error' && `
+			background-color:${theme.colors.omg};
+			color:${theme.colors.omgFont};
+		`}
+		${props.variant === 'negative' && `
+			background-color:${theme.colors.negative};
+			color:${theme.colors.negativeFont};
+		`}
+		${props.variant === 'positive' && `
+			background-color:${theme.colors.positive};
+			color:${theme.colors.positiveFont};
+		`}
+	`;
+    return (react.jsx(Text, { style: props.style, align: "center", css: styles, className: mergeClassNames('infoPanel', props.className) }, props.children));
+};
+
 /** @jsx jsx */
 const Popover = (p) => {
     var _a, _b;
@@ -2067,19 +1908,19 @@ const formatLocalValue = (value, type) => {
     }
     return newValue;
 };
-const Input = (props) => {
+const Input = React__namespace.forwardRef((props, ref) => {
     var _a, _b, _c;
     const [localValue, setLocalValue] = React__namespace.useState(formatLocalValue(props.value, props.type));
     const debounceMs = (_a = props.debounceMs) !== null && _a !== void 0 ? _a : DEFAULT_DEBOUNCE_MS;
     const autoComplete = (_b = props.autoComplete) !== null && _b !== void 0 ? _b : 'off';
     const vars = React__namespace.useRef({
-        wrappedOnChange: (props.onChange && debounceMs) ? lodash.debounce((value) => {
+        wrappedOnChange: (props.onChange && debounceMs) ? lodash.debounce((value, name) => {
             var _a;
-            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value);
+            (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, value, name);
         }, debounceMs) : undefined,
         focused: false
     });
-    const onChange = (_c = vars.current.wrappedOnChange) !== null && _c !== void 0 ? _c : props.onChange;
+    const outerOnChange = (_c = vars.current.wrappedOnChange) !== null && _c !== void 0 ? _c : props.onChange;
     const trySyncLocalValue = () => {
         if (vars.current.focused) {
             return;
@@ -2092,53 +1933,49 @@ const Input = (props) => {
     };
     React__namespace.useEffect(() => {
         trySyncLocalValue();
-    });
+    }, [props.value]);
     const theme = useThemeSafely();
-    const inputStyles = react.css `
-		font-family: ${theme.fonts.family};
-		font-size:  ${theme.fonts.size};
-		width: 100%;
-		border:  ${theme.controls.border};
-		color:  ${theme.colors.font};
-		padding-left: ${theme.controls.padding};
-		padding-right: ${theme.controls.padding};
-		height: ${theme.controls.height};
-		transition: ${theme.controls.transition};
-		&:focus {
-			outline: none;
-			box-shadow: ${theme.controls.focusOutlineShadow};
-		}
-		&:disabled {
-			background-color: ${theme.colors.disabled};
-			cursor: not-allowed;
-		}
-		${props.required && !localValue && `
-			border-color: ${theme.colors.required};
-			&:focus {
-				box-shadow: ${theme.controls.focusOutlineRequiredShadow};
-			}
-		`}
-		${props.round && props.type !== 'textarea' && `
-			border-radius: ${theme.controls.roundRadius};
-			padding-left: calc(${theme.controls.padding} * 2);
-			padding-right: calc(${theme.controls.padding} * 2);
-		`}
-		${props.rounded && `
-			border-radius: ${theme.controls.roundedRadius};
-		`}
-		${props.readOnly && `
-			background-color: transparent;
-			cursor: default;
-			border: none;
-			&:focus {
-				outline: none;
-				box-shadow: none;
-			}
-		`}
-		${props.rightControl && props.type !== 'textarea' && `
-			padding-right: ${theme.controls.height};
-		`}
-	`;
+    const inputStyles = react.css({
+        fontFamily: theme.fonts.family,
+        fontSize: theme.fonts.size,
+        width: '100%',
+        border: theme.controls.border,
+        color: theme.colors.font,
+        paddingLeft: theme.controls.padding,
+        paddingRight: theme.controls.padding,
+        height: theme.controls.height,
+        transition: theme.controls.transition,
+        ':focus': {
+            outline: 'none',
+            boxShadow: theme.controls.focusOutlineShadow
+        },
+        ':disabled': {
+            backgroundColor: theme.colors.disabled,
+            cursor: 'not-allowed'
+        },
+        ':invalid': {
+            borderColor: theme.colors.required,
+            ':focus': {
+                boxShadow: theme.controls.focusOutlineRequiredShadow
+            }
+        },
+    }, props.round && props.type !== 'textarea' && {
+        borderRadius: theme.controls.roundRadius,
+        paddingLeft: `calc(${theme.controls.padding} * 2)`,
+        paddingRight: `calc(${theme.controls.padding} * 2)`
+    }, props.rounded && {
+        borderRadius: theme.controls.roundedRadius
+    }, props.readOnly && {
+        backgroundColor: 'transparent',
+        cursor: 'default',
+        border: 'none',
+        ':focus': {
+            outline: 'none',
+            boxShadow: 'none'
+        }
+    }, props.rightControl && props.type !== 'textarea' && {
+        paddingRight: theme.controls.height
+    });
     let inputElement;
     const onFocus = (e) => {
         var _a;
@@ -2151,78 +1988,84 @@ const Input = (props) => {
         trySyncLocalValue();
         (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     };
+    let localOnChange;
     if (props.type === 'number') {
-        inputElement = react.jsx("input", { 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, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
-                const value = e.target.value;
-                if (NUMBER_REGEX.test(value)) {
-                    let numValue = parseFloat(value);
-                    if (props.min && numValue < props.min) {
-                        numValue = props.min;
-                    }
-                    if (props.max && numValue > props.max) {
-                        numValue = props.max;
-                    }
-                    setLocalValue(numValue);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(numValue);
+        localOnChange = e => {
+            const value = e.target.value;
+            if (NUMBER_REGEX.test(value)) {
+                let numValue = parseFloat(value);
+                if (props.min && numValue < props.min) {
+                    numValue = props.min;
                 }
-                else if (!value) {
-                    setLocalValue(value);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(undefined);
+                if (props.max && numValue > props.max) {
+                    numValue = props.max;
                 }
-            } });
+                setLocalValue(numValue);
+                outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(numValue, props.name);
+            }
+            else if (!value) {
+                setLocalValue(value);
+                outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(undefined, props.name);
+            }
+        };
     }
     else if (props.type === 'date') {
-        inputElement = react.jsx("input", { style: props.style, autoComplete: autoComplete, tabIndex: props.readOnly ? -1 : undefined, readOnly: props.readOnly, maxLength: 10, required: props.required, disabled: props.disabled, id: props.id, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
-                const value = e.target.value;
-                setLocalValue(value);
-                if (onChange) {
-                    const dateParts = DATE_REGEX.exec(value);
-                    if (!dateParts) {
-                        onChange(undefined);
-                    }
-                    else {
-                        const year = parseInt(dateParts[3], 10);
-                        const month = parseInt(dateParts[1], 10);
-                        const day = parseInt(dateParts[2], 10);
-                        if (dateFns.isExists(year, month, day)) {
-                            let ms = new Date(year, month - 1, day).valueOf();
-                            if (props.min && ms < props.min) {
-                                ms = props.min;
-                            }
-                            if (props.max && ms > props.max) {
-                                ms = props.max;
-                            }
-                            onChange(ms);
+        localOnChange = e => {
+            const value = e.target.value;
+            setLocalValue(value);
+            if (outerOnChange) {
+                const dateParts = DATE_REGEX.exec(value);
+                if (!dateParts) {
+                    outerOnChange(undefined, props.name);
+                }
+                else {
+                    const year = parseInt(dateParts[3], 10);
+                    const month = parseInt(dateParts[1], 10);
+                    const day = parseInt(dateParts[2], 10);
+                    if (dateFns.isExists(year, month, day)) {
+                        let ms = new Date(year, month - 1, day).valueOf();
+                        if (props.min && ms < props.min) {
+                            ms = props.min;
                         }
-                        else {
-                            onChange(undefined);
+                        if (props.max && ms > props.max) {
+                            ms = props.max;
                         }
+                        outerOnChange(ms, props.name);
+                    }
+                    else {
+                        outerOnChange(undefined, props.name);
                     }
                 }
-            } });
+            }
+        };
+    }
+    else {
+        localOnChange = e => {
+            const value = e.target.value;
+            setLocalValue(value);
+            outerOnChange === null || outerOnChange === void 0 ? void 0 : outerOnChange(value, props.name);
+        };
+    }
+    if (props.type === 'number') {
+        inputElement = react.jsx("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, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: "number", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
+    }
+    else if (props.type === 'date') {
+        inputElement = react.jsx("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, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: "text", value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
     }
     else if (props.type === 'textarea') {
-        inputElement = react.jsx("textarea", { 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, css: react.css `
+        inputElement = react.jsx("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, css: react.css `
 				${inputStyles}
 				max-width: 100%;
 				min-height: ${theme.controls.height};
 				padding-top: 0.75rem;
 				height:auto;
-			`, className: props.inputClassName, placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
-                const value = e.target.value;
-                setLocalValue(value);
-                onChange === null || onChange === void 0 ? void 0 : onChange(value);
-            } });
+			`, className: props.inputClassName, placeholder: props.placeholder, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
     }
     else {
-        // text & password
-        inputElement = react.jsx("input", { 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, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: e => {
-                const value = e.target.value;
-                setLocalValue(value);
-                onChange === null || onChange === void 0 ? void 0 : onChange(value);
-            } });
+        // text, password, email, and url
+        inputElement = react.jsx("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, css: inputStyles, className: props.inputClassName, placeholder: props.placeholder, type: props.type, value: localValue, onFocus: onFocus, onBlur: onBlur, onChange: localOnChange });
     }
     const inputWrapperStyles = react.css `
 		width:100%;
@@ -2244,7 +2087,7 @@ const Input = (props) => {
     return (react.jsx("div", { css: inputWrapperStyles, className: mergeClassNames('input', props.className) },
         inputElement,
         props.rightControl && props.type !== 'textarea' && react.jsx("div", { css: rightControlStyles }, props.rightControl)));
-};
+});
 
 /** @jsx jsx */
 const List = (props) => {
@@ -3060,64 +2903,217 @@ const GlobalStyles = (p) => {
         }) }));
 };
 
+class FileListPlus {
+    constructor(_raw, _args = {}) {
+        this._raw = _raw;
+        this._args = _args;
+        this._files = Array.from(this._raw).map(f => {
+            return { name: f.name, size: f.size, type: f.type };
+        });
+        if (this._args.accept) {
+            const acceptTypes = this._args.accept.split(',');
+            this._invalidFiles = this._files.filter(f => {
+                if (acceptTypes.includes(f.type)) {
+                    return false;
+                }
+                if (acceptTypes.some(t => f.name.endsWith(t))) {
+                    return false;
+                }
+                return true;
+            });
+        }
+        else {
+            this._invalidFiles = [];
+        }
+    }
+    get raw() {
+        return this._raw;
+    }
+    get length() {
+        return this._files.length;
+    }
+    get files() {
+        return this._files;
+    }
+    get invalidFiles() {
+        return this._invalidFiles;
+    }
+    get totalBytes() {
+        return lodash.sumBy(this.files, f => f.size);
+    }
+    get overMaxBytes() {
+        var _a;
+        return this.totalBytes >= ((_a = this._args.maxBytes) !== null && _a !== void 0 ? _a : Infinity);
+    }
+    get overFileLimit() {
+        return this.length > (this._args.multiple ? Infinity : 1);
+    }
+    get hasErrors() {
+        return this.overMaxBytes || this.overFileLimit || !!this.invalidFiles.length;
+    }
+}
+
 /** @jsx jsx */
 const DEFAULT_FAILURE_MESSAGE = 'Upload failed.';
+const hoverClass = css.css({
+    backgroundColor: 'rgba(0,0,0,0.25) !important'
+});
 const FileUploader = (p) => {
-    var _a;
+    var _a, _b, _c, _d, _e, _f;
     const [message, setMessage] = React.useState(undefined);
     const [canUpload, setCanUpload] = React.useState(false);
     const [uploading, setUploading] = React.useState(false);
     const [files, setFiles] = React.useState(undefined);
     const [fullFailureMessage, setFullFailureMessage] = React.useState(undefined);
-    const clearFilePickerHandler = React.useRef(() => {
-        // noop
-    });
-    const { buttonText, successMessage, failureMessage, buttonWidth, buttonVariant, onChange } = p, filePickerProps = __rest(p, ["buttonText", "successMessage", "failureMessage", "buttonWidth", "buttonVariant", "onChange"]);
-    const onClear = () => {
-        var _a;
-        (_a = clearFilePickerHandler.current) === null || _a === void 0 ? void 0 : _a.call(clearFilePickerHandler);
+    const form = React.useRef(null);
+    const input = React.useRef(null);
+    const totalFileSize = (_a = files === null || files === void 0 ? void 0 : files.totalBytes) !== null && _a !== void 0 ? _a : 0;
+    const theme = useThemeSafely();
+    let filesDisplay = '';
+    if (!message) {
+        if (!(files === null || files === void 0 ? void 0 : files.length)) {
+            filesDisplay = `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(', ')}`;
+        }
+    }
+    const setAllFiles = (inputFiles) => {
+        if (input.current && inputFiles === undefined) {
+            input.current.value = '';
+        }
+        setFiles(inputFiles);
+    };
+    const onFilesChange = (rawFiles) => {
+        setAllFiles(rawFiles ? createFileList(rawFiles) : undefined);
+        setCanUpload(!!(rawFiles === null || rawFiles === void 0 ? void 0 : rawFiles.length));
         setMessage(undefined);
+        setFullFailureMessage(undefined);
+    };
+    const createFileList = (rawFiles) => {
+        return new FileListPlus(rawFiles, {
+            accept: p.accept,
+            multiple: p.multiple,
+            maxBytes: p.maxBytes
+        });
     };
-    return (react.jsx(Form, { onSubmit: () => {
+    return (react.jsx(Form, { ref: form, css: {
+            border: theme.controls.border,
+            borderStyle: 'dashed',
+            alignItems: 'center',
+            justifyContent: 'center',
+            position: 'relative',
+            padding: '1rem',
+            overflow: 'hidden',
+            backgroundColor: theme.colors.lightBg,
+        }, onDragOver: e => {
+            var _a, _b;
+            e.preventDefault();
+            // we're using onDragOver instead of onDragEnter because *Enter and *Leave apparently can fire multiple times even though you're over the target.
+            // *Over is continuous.
+            if (!((_a = form.current) === null || _a === void 0 ? void 0 : _a.classList.contains(hoverClass))) {
+                (_b = form.current) === null || _b === void 0 ? void 0 : _b.classList.add(hoverClass);
+            }
+        }, onDragLeave: e => {
+            var _a;
+            (_a = form.current) === null || _a === void 0 ? void 0 : _a.classList.remove(hoverClass);
+        }, onDrop: e => {
+            var _a;
+            e.preventDefault();
+            (_a = form.current) === null || _a === void 0 ? void 0 : _a.classList.remove(hoverClass);
+            onFilesChange(e.dataTransfer.files);
+        }, onSubmit: e => {
             if (!files) {
                 return;
             }
             setUploading(true);
-            p.onUpload(files).then(() => {
+            p.onUpload(files.raw).then(() => {
                 setMessage('success');
-                if (p.clearOnUpload) {
-                    clearFilePickerHandler.current();
-                }
+                setAllFiles(undefined);
             }).catch(err => {
+                var _a;
                 setMessage('failure');
-                setFullFailureMessage(`${failureMessage !== null && failureMessage !== void 0 ? failureMessage : DEFAULT_FAILURE_MESSAGE}  Error: ${err instanceof Error ? err.message : err}`);
+                setFullFailureMessage(`${(_a = p.failureMessage) !== null && _a !== void 0 ? _a : DEFAULT_FAILURE_MESSAGE}  Error: ${err instanceof Error ? err.message : err}`);
             }).finally(() => {
                 setUploading(false);
                 setCanUpload(false);
             });
         } },
-        react.jsx(FilePicker, Object.assign({}, filePickerProps, { onChange: filesFromPicker => {
-                setFiles(filesFromPicker);
-                setCanUpload(!!(filesFromPicker === null || filesFromPicker === void 0 ? void 0 : filesFromPicker.length));
-                setMessage(undefined);
-                setFullFailureMessage(undefined);
-                if (onChange) {
-                    return onChange(filesFromPicker);
+        react.jsx("input", { ref: input, css: {
+                position: 'absolute',
+                top: -50,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                width: '100%',
+                cursor: 'pointer',
+                opacity: 0
+            }, type: "file", multiple: p.multiple, accept: p.accept, onChange: e => {
+                try {
+                    if (!e.target.files) {
+                        onFilesChange(undefined);
+                        return;
+                    }
+                    onFilesChange(e.target.files);
                 }
-                return false;
-            }, __passClearFilesHandle: func => clearFilePickerHandler.current = func })),
-        react.jsx("span", null,
-            react.jsx(Button, { css: { width: (_a = p.buttonWidth) !== null && _a !== void 0 ? _a : '10rem' }, disabled: !canUpload, waiting: uploading, type: "submit", variant: buttonVariant !== null && buttonVariant !== void 0 ? buttonVariant : 'primary', rightIcon: react.jsx(Icon, { id: "save" }) }, buttonText !== null && buttonText !== void 0 ? buttonText : 'Upload')),
-        message === 'success' && (react.jsx(UploadInfoPanel, { variant: "positive", message: successMessage !== null && successMessage !== void 0 ? successMessage : 'Upload successful.', onClear: onClear })),
-        message === 'failure' && (react.jsx(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: onClear }))));
+                catch (err) {
+                    // tslint:disable-next-line
+                    console.error(err);
+                    onFilesChange(undefined);
+                }
+            } }),
+        !message && (react.jsx("span", { css: {
+                display: 'flex',
+                flexDirection: 'column',
+                gap: '1rem',
+                alignItems: 'center',
+                zIndex: !!(files === null || files === void 0 ? void 0 : files.length) ? 1 : undefined
+            } },
+            !(files === null || files === void 0 ? void 0 : files.length) && react.jsx(Icon, { style: { fontSize: '2rem' }, id: "upload" }),
+            react.jsx(Text, { align: "center", noPad: true, spacedOut: true },
+                filesDisplay,
+                !!(files === null || files === void 0 ? void 0 : files.length) && (react.jsx(Button, { onClick: e => {
+                        e.stopPropagation();
+                        onFilesChange(undefined);
+                    }, css: { marginLeft: '1rem', color: theme.colors.negative }, rightIcon: react.jsx(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear"))),
+            !!(files === null || files === void 0 ? void 0 : files.invalidFiles.length) && (react.jsx(InfoPanel, { variant: "error" },
+                "Invalid files: ",
+                files.invalidFiles.map(f => f.name).join(', '),
+                ".")),
+            (files === null || files === void 0 ? void 0 : files.overMaxBytes) && (react.jsx(InfoPanel, { variant: "error" },
+                "Max file size exceeded (",
+                getSizeString((_b = p.maxBytes) !== null && _b !== void 0 ? _b : 0),
+                ").")))),
+        canUpload && !(files === null || files === void 0 ? void 0 : files.hasErrors) && (react.jsx(Button, { css: {
+                width: (_c = p.buttonWidth) !== null && _c !== void 0 ? _c : '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.jsx(UploadInfoPanel, { variant: "positive", message: (_f = p.successMessage) !== null && _f !== void 0 ? _f : 'Upload successful.', onClear: () => setMessage(undefined) })),
+        message === 'failure' && (react.jsx(UploadInfoPanel, { variant: "error", message: fullFailureMessage, onClear: () => setMessage(undefined) }))));
 };
 const UploadInfoPanel = (p) => {
-    return (react.jsx(InfoPanel, { variant: p.variant },
+    return (react.jsx(InfoPanel, { variant: p.variant, css: { zIndex: 1 } },
         p.message,
-        react.jsx(Button, { block: true, className: css.css({
+        react.jsx(Button, { block: true, css: {
                 color: 'inherit',
                 marginTop: '1rem'
-            }), onClick: p.onClear, rightIcon: react.jsx(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear")));
+            }, onClick: e => {
+                e.stopPropagation();
+                p.onClear();
+            }, rightIcon: react.jsx(Icon, { id: "clear" }), variant: "inlineLink" }, "Clear")));
+};
+const bytesInMb = 1048576;
+const bytesInKb = 1024;
+const getSizeString = (size) => {
+    if (size < bytesInKb) {
+        return size.toLocaleString() + ' B';
+    }
+    else if (size < bytesInMb) {
+        return (size / bytesInKb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' KB';
+    }
+    else {
+        return (size / bytesInMb).toLocaleString(undefined, { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' MB';
+    }
 };
 
 const CopyButton = (props) => {
@@ -3389,7 +3385,6 @@ exports.CopyButton = CopyButton;
 exports.DatePicker = DatePicker;
 exports.Divider = Divider;
 exports.ErrorModal = ErrorModal;
-exports.FilePicker = FilePicker;
 exports.FileUploader = FileUploader;
 exports.Form = Form;
 exports.FormColumnRow = FormColumnRow;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@mackin.com/styleguide",
-	"version": "6.2.0",
+	"version": "7.0.0",
 	"description": "",
 	"main": "./index.js",
 	"types": "./index.d.ts",