@superdispatch/ui 0.24.8 → 0.25.0

package/dist-node/index.js

@@ -17,7 +17,7 @@ var resizeObserver = require('@juggle/resize-observer');
 var hooks = require('@superdispatch/hooks');
 var clsx = _interopDefault(require('clsx'));
 var flattenChildren = _interopDefault(require('react-keyed-flatten-children'));
-var NumberFormat = _interopDefault(require('react-number-format'));
+var reactNumberFormat = require('react-number-format');
 var createBreakpoints = _interopDefault(require('@material-ui/core/styles/createBreakpoints'));
 
 var _excluded = ["size", "children", "disabled", "isActive", "isLoading", "color"];
@@ -1119,7 +1119,7 @@ function useVisibilityObserver(node) {
 
     var observer = new IntersectionObserver(_ref => {
       var [entry] = _ref;
-      setState(entry !== null && entry !== void 0 && entry.isIntersecting ? 'visible' : 'invisible');
+      setState(entry !== null && entry !== void 0 && entry.isIntersecting && document.visibilityState === 'visible' ? 'visible' : 'invisible');
     }, {
       rootMargin,
       threshold
@@ -1785,7 +1785,7 @@ var Inline = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Inline.displayName = "Inline";
 
-var _excluded$i = ["value", "inputRef", "onChange", "isNumericString", "thousandSeparator", "disableValueParsing"],
+var _excluded$i = ["value", "inputRef", "onChange", "valueIsNumericString", "thousandSeparator", "disableValueParsing"],
     _excluded2$3 = ["id", "InputProps"];
 
 function NumberInputComponent(_ref) {
@@ -1793,17 +1793,17 @@ function NumberInputComponent(_ref) {
     value,
     inputRef,
     onChange,
-    isNumericString = true,
+    valueIsNumericString = true,
     thousandSeparator = true,
     disableValueParsing
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$i);
 
-  return /*#__PURE__*/jsxRuntime.jsx(NumberFormat, _objectSpread(_objectSpread({}, props), {}, {
+  return /*#__PURE__*/jsxRuntime.jsx(reactNumberFormat.NumericFormat, _objectSpread(_objectSpread({}, props), {}, {
     value: value !== null && value !== void 0 ? value : '',
     inputMode: "decimal",
     getInputRef: inputRef,
-    isNumericString: isNumericString,
+    valueIsNumericString: valueIsNumericString,
     thousandSeparator: thousandSeparator,
     allowedDecimalSeparators: ['.', ','],
     onValueChange: values => {
@@ -1812,7 +1812,8 @@ function NumberInputComponent(_ref) {
         target: {
           value: disableValueParsing ? values.value : floatValue
         }
-      };
+      }; // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+
       onChange === null || onChange === void 0 ? void 0 : onChange(event);
     }
   }));
@@ -1837,7 +1838,41 @@ var NumberField = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 if (process.env.NODE_ENV !== "production") NumberField.displayName = "NumberField";
 NumberField.displayName = 'NumberField';
 
-var _excluded$j = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
+var _excluded$j = ["id", "value", "onChange", "inputMode", "valueIsNumericString"];
+var PatternField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  var {
+    id,
+    value,
+    onChange,
+    inputMode = 'decimal',
+    valueIsNumericString = true
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$j);
+
+  var uid = useUID(id);
+  return /*#__PURE__*/jsxRuntime.jsx(reactNumberFormat.PatternFormat, _objectSpread(_objectSpread({}, props), {}, {
+    id: uid,
+    value: value !== null && value !== void 0 ? value : '' // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    ,
+    inputMode: inputMode,
+    getInputRef: ref,
+    valueIsNumericString: valueIsNumericString,
+    customInput: core.TextField,
+    onValueChange: values => {
+      var event = {
+        target: {
+          name: props.name,
+          value: values.value
+        }
+      };
+      onChange === null || onChange === void 0 ? void 0 : onChange(event);
+    }
+  }));
+});
+if (process.env.NODE_ENV !== "production") PatternField.displayName = "PatternField";
+PatternField.displayName = 'PatternField';
+
+var _excluded$k = ["label", "error", "checked", "onBlur", "onChange", "helperText", "FormControlLabelProps"];
 var FormControl$1 = /*#__PURE__*/styled__default(core.FormControl).withConfig({
   displayName: "RadioField__FormControl",
   componentId: "SD__sc-6ey4qt-0"
@@ -1856,7 +1891,7 @@ var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     helperText,
     FormControlLabelProps: formControlLabelProps
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$j);
+      props = _objectWithoutProperties(_ref, _excluded$k);
 
   return /*#__PURE__*/jsxRuntime.jsxs(FormControl$1, {
     error: error,
@@ -1876,7 +1911,7 @@ var RadioField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") RadioField.displayName = "RadioField";
 
-var _excluded$k = ["name", "value", "label", "caption", "disabled", "icon", "checked", "onChange"];
+var _excluded$l = ["name", "value", "label", "caption", "disabled", "icon", "checked", "onChange"];
 var ClickableCard = /*#__PURE__*/styled__default(core.ButtonBase).withConfig({
   displayName: "RadioFieldCard__ClickableCard",
   componentId: "SD__sc-5etge2-0"
@@ -1913,7 +1948,7 @@ var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     checked,
     onChange
   } = _ref2,
-      props = _objectWithoutProperties(_ref2, _excluded$k);
+      props = _objectWithoutProperties(_ref2, _excluded$l);
 
   return /*#__PURE__*/jsxRuntime.jsx(Card, {
     disabled: disabled,
@@ -1955,7 +1990,7 @@ var RadioFieldCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") RadioFieldCard.displayName = "RadioFieldCard";
 
-var _excluded$l = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
+var _excluded$m = ["name", "value", "onChange", "RadioGroupProps", "label", "FormLabelProps", "helperText", "FormHelperTextProps", "children"];
 var FormLabel$1 = /*#__PURE__*/styled__default(core.FormLabel).withConfig({
   displayName: "RadioGroupField__FormLabel",
   componentId: "SD__sc-1udxviq-0"
@@ -1976,7 +2011,7 @@ var RadioGroupField = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     FormHelperTextProps: formHelperTextProps,
     children
   } = _ref,
-      formControlProps = _objectWithoutProperties(_ref, _excluded$l);
+      formControlProps = _objectWithoutProperties(_ref, _excluded$m);
 
   return /*#__PURE__*/jsxRuntime.jsxs(core.FormControl, _objectSpread(_objectSpread({}, formControlProps), {}, {
     hiddenLabel: !label,
@@ -2026,7 +2061,7 @@ function useMinBreakpoint(minBreakpoint) {
   return minBreakpointIDX < breakpointIDX;
 }
 
-var _excluded$m = ["action", "children", "onClose", "className", "classes", "variant"],
+var _excluded$n = ["action", "children", "onClose", "className", "classes", "variant"],
     _excluded2$4 = ["icon", "closeButton", "variantError", "variantSuccess"];
 var PaddedContent = /*#__PURE__*/styled__default.span.withConfig({
   displayName: "SnackbarContent__PaddedContent",
@@ -2084,7 +2119,7 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     classes,
     variant = 'default'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   var _useStyles = useStyles$b({
     classes
@@ -2136,7 +2171,7 @@ var SnackbarContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SnackbarContent.displayName = "SnackbarContent";
 
-var _excluded$n = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
+var _excluded$o = ["open", "action", "variant", "onClose", "children", "ContentProps", "hasCloseButton", "TransitionComponent"];
 
 function SlideTransition(props) {
   return /*#__PURE__*/jsxRuntime.jsx(core.Slide, _objectSpread(_objectSpread({}, props), {}, {
@@ -2155,7 +2190,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     hasCloseButton = onClose != null,
     TransitionComponent = SlideTransition
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$n);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
   function handleClose(reason) {
     if (reason !== 'clickaway') {
@@ -2184,7 +2219,7 @@ var Snackbar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Snackbar.displayName = "Snackbar";
 
-var _excluded$o = ["onClose", "variant", "key", "id", "autoHideDuration"];
+var _excluded$p = ["onClose", "variant", "key", "id", "autoHideDuration"];
 
 function warnContext() {
   // eslint-disable-next-line no-console
@@ -2230,7 +2265,7 @@ function SnackbarStackProvider(_ref2) {
       id = String(key),
       autoHideDuration = 5000
     } = _ref3,
-        props = _objectWithoutProperties(_ref3, _excluded$o);
+        props = _objectWithoutProperties(_ref3, _excluded$p);
 
     function removeSnackbar() {
       setStack(prev => {
@@ -2327,7 +2362,7 @@ var Stack = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
 });
 if (process.env.NODE_ENV !== "production") Stack.displayName = "Stack";
 
-var _excluded$p = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
+var _excluded$q = ["color", "variant", "children", "classes", "className", "noWrap", "fontWeight", "component"];
 var useStyles$c = /*#__PURE__*/styles.makeStyles(theme => ({
   root: {
     maxWidth: '100%',
@@ -2411,7 +2446,7 @@ var Tag = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     fontWeight = 'bold',
     component = 'div'
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$p);
+      props = _objectWithoutProperties(_ref, _excluded$q);
 
   var styles = useStyles$c({
     classes
@@ -3842,6 +3877,14 @@ function overrideTypography(theme) {
   theme.props.MuiTypography = {
     variant: 'body2'
   };
+  theme.overrides.MuiTypography = {
+    colorError: {
+      color: exports.Color.Red500
+    },
+    colorPrimary: {
+      color: exports.Color.Blue500
+    }
+  };
 }
 
 function createSuperDispatchTheme() {
@@ -4086,6 +4129,7 @@ exports.Inline = Inline;
 exports.InlineGrid = InlineGrid;
 exports.NumberField = NumberField;
 exports.OverflowText = OverflowText;
+exports.PatternField = PatternField;
 exports.RadioField = RadioField;
 exports.RadioFieldCard = RadioFieldCard;
 exports.RadioGroupField = RadioGroupField;