@mackin.com/styleguide 7.1.0-beta.1 → 7.1.1

package/index.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import * as React from 'react';
-import React__default from 'react';
+import React__default, { ReactNode } from 'react';
 import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 declare type Alignment = 'left' | 'right' | 'center';
@@ -735,6 +735,11 @@ declare const defaultTheme: MackinTheme;
 /** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
 declare const useThemeSafely: () => MackinTheme;
 
+declare const ThemeProvider: <T extends MackinTheme>(p: {
+    children?: ReactNode;
+    theme: T;
+}) => JSX.Element;
+
 declare const TabLocker: (props: {
     disabled?: boolean;
     children?: React.ReactNode;
@@ -756,6 +761,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;
 
@@ -892,4 +901,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, 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, ThemeProvider, ToggleButton, ToggleButtonGroup, ToggleButtonGroupProps, ToggleButtonProps, TogglePasswordInput, Tr, WaitingIndicator, calcDynamicThemeProps, defaultTheme, getCurrencyDisplay, mergeClassNames, useMediaQuery, useThemeSafely };

package/index.js

@@ -36,8 +36,8 @@ function _interopNamespace(e) {
 	return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var ReactSlider__default = /*#__PURE__*/_interopDefaultLegacy(ReactSlider);
 
 /** @deprecated This will not work correctly with emotion/css.  Use 'cx' for adding multiple class names together.  */
@@ -153,7 +153,10 @@ const defaultTheme = {
 };
 calcDynamicThemeProps(defaultTheme);
 
-const ThemeContext = React.createContext(defaultTheme);
+const ThemeContext = React.createContext(defaultTheme);
+const ThemeProvider = (p) => {
+    return (React__default['default'].createElement(ThemeContext.Provider, { value: p.theme }, p.children));
+};
 
 /** Returns a user-provided theme if ThemeProvider was used correctly, or the default theme. */
 const useThemeSafely = () => {
@@ -2399,7 +2402,7 @@ const OmniLink = (props) => {
 			line-height: ${theme.controls.heightSmall};
 		`}
 	`;
-    const mainClassName = css.cx('omniLink', props.className);
+    const mainClassName = css.cx('omniLink', linkStyles, props.className);
     const content = React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("span", null,
             props.leftIcon && React__namespace.createElement("span", { className: css.css({
@@ -2414,9 +2417,9 @@ const OmniLink = (props) => {
                 verticalAlign: 'middle'
             }) }, props.rightIcon));
     if (props.noRouter) {
-        return (React__namespace.createElement("a", { title: props.title, target: props.target, className: css.cx(mainClassName, linkStyles), href: props.href, onClick: props.onClick }, content));
+        return (React__namespace.createElement("a", { title: props.title, target: props.target, className: mainClassName, href: props.href, onClick: props.onClick }, content));
     }
-    return (React__namespace.createElement(reactRouterDom.Link, { title: props.title, className: css.cx(mainClassName, linkStyles), onClick: props.onClick, to: props.href }, content));
+    return (React__namespace.createElement(reactRouterDom.Link, { title: props.title, className: mainClassName, onClick: props.onClick, to: props.href }, content));
 };
 
 const ProgressBar = (props) => {
@@ -2931,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);
@@ -2944,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(', ')}`;
@@ -2969,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',
@@ -3048,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) => {
@@ -3393,6 +3406,7 @@ exports.TdNumber = TdNumber;
 exports.Text = Text;
 exports.Th = Th;
 exports.ThSort = ThSort;
+exports.ThemeProvider = ThemeProvider;
 exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.TogglePasswordInput = TogglePasswordInput;

package/package.json

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