@popmenu/common-ui 0.21.0 → 0.24.0

package/build/index.js

@@ -7,7 +7,6 @@ var core = require('@material-ui/core');
 var AppBar = require('@material-ui/core/AppBar');
 var React = require('react');
 var MuiIconButton = require('@material-ui/core/IconButton');
-var MuiTypography = require('@material-ui/core/Typography');
 var styles = require('@material-ui/core/styles');
 var MuiAvatar = require('@material-ui/core/Avatar');
 var Badge = require('@material-ui/core/Badge');
@@ -77,7 +76,6 @@ var AppBar__default = /*#__PURE__*/_interopDefaultLegacy(AppBar);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var MuiIconButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiIconButton);
-var MuiTypography__default = /*#__PURE__*/_interopDefaultLegacy(MuiTypography);
 var MuiAvatar__default = /*#__PURE__*/_interopDefaultLegacy(MuiAvatar);
 var Badge__default = /*#__PURE__*/_interopDefaultLegacy(Badge);
 var MuiButton__default = /*#__PURE__*/_interopDefaultLegacy(MuiButton);
@@ -157,6 +155,42 @@ function __rest(s, e) {
     return t;
 }
 
+var _path$3M;
+
+function _extends$41() { _extends$41 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$41.apply(this, arguments); }
+
+function SvgMinusCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$41({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3M || (_path$3M = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334zM5.333 8h5.334"
+  })));
+}
+
+var _path$3E;
+
+function _extends$3V() { _extends$3V = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3V.apply(this, arguments); }
+
+function SvgPlusCircle(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3V({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    width: "1em",
+    height: "1em",
+    fill: "none"
+  }, props), _path$3E || (_path$3E = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.333a6.667 6.667 0 000 13.334zm0-9.334v5.334M5.333 8h5.334"
+  })));
+}
+
 var _path$3k;
 
 function _extends$3B() { _extends$3B = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3B.apply(this, arguments); }
@@ -405,29 +439,29 @@ IconButton.defaultProps = {
     color: 'secondary',
 };
 
-var useTypographyStyles = styles.makeStyles(function () {
-    var _a;
-    return ({
-        root: (_a = {},
-            _a["& ." + iconStaticClassName] = {
-                position: 'relative',
-                top: '0.125em',
-                padding: '0 0.125em',
-                boxSizing: 'content-box',
-            },
-            _a),
-        caption: {
-            display: 'inline',
-        },
-        overline: {
-            display: 'inline',
-        },
-    });
-});
+var useTypographyStyles = styles.makeStyles(function () { return ({
+    root: function (_a) {
+        var _b;
+        var weight = _a.weight;
+        return (__assign((_b = {}, _b["& ." + iconStaticClassName] = {
+            position: 'relative',
+            top: '0.125em',
+            padding: '0 0.125em',
+            boxSizing: 'content-box',
+        }, _b), (weight && { fontWeight: (weight === 'semi-bold' && 600) || (weight === 'bold' && 700) || 400 })));
+    },
+    caption: {
+        display: 'inline',
+    },
+    overline: {
+        display: 'inline',
+    },
+}); });
 
 var Typography = React.forwardRef(function (props, ref) {
+    props.weight; var restProps = __rest(props, ["weight"]);
     var classes = useTypographyStyles(props);
-    return React__default['default'].createElement(MuiTypography__default['default'], __assign({ ref: ref, classes: classes }, props));
+    return React__default['default'].createElement(core.Typography, __assign({ ref: ref, classes: classes }, restProps));
 });
 Typography.displayName = 'Typography';
 
@@ -1062,6 +1096,44 @@ var Tooltip = React.forwardRef(function (props, ref) {
 });
 Tooltip.displayName = 'Tooltip';
 
+var useNumberFieldStyles = core.makeStyles(function () { return ({
+    root: {
+        height: 56,
+    },
+}); });
+var useNumberInputStyles = core.makeStyles(function (theme) { return ({
+    root: {
+        height: '100%',
+        width: 'min-content',
+        borderRadius: theme.spacing(1),
+    },
+    input: {
+        '&::-webkit-clear-button, &::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+            display: 'none',
+        },
+        '-moz-appearance': 'textfield',
+        minWidth: 40,
+        padding: 0,
+        textAlign: 'center',
+    },
+    adornedStart: {
+        padding: 0,
+    },
+    adornedEnd: {
+        padding: 0,
+    },
+}); });
+
+var NumberField = function (props) {
+    var onIncrement = props.onIncrement, onDecrement = props.onDecrement, _a = props.InputProps, InputProps = _a === void 0 ? {} : _a, classes = props.classes, restProps = __rest(props, ["onIncrement", "onDecrement", "InputProps", "classes"]);
+    var _b = InputProps, inputClassesOverride = _b.classes, restInputProps = __rest(_b, ["classes"]);
+    var fieldClasses = useNumberFieldStyles(props);
+    var inputClasses = useNumberInputStyles(props);
+    return (React__default['default'].createElement(core.TextField, __assign({ classes: __assign(__assign({}, fieldClasses), classes), variant: "filled", type: "number", defaultValue: 0, InputProps: __assign({ classes: __assign(__assign({}, inputClasses), inputClassesOverride), disableUnderline: true, endAdornment: (React__default['default'].createElement(IconButton, { style: { fontSize: 20 }, onClick: onIncrement },
+                React__default['default'].createElement(Icon, { icon: SvgPlusCircle }))), startAdornment: (React__default['default'].createElement(IconButton, { style: { fontSize: 20 }, onClick: onDecrement },
+                React__default['default'].createElement(Icon, { icon: SvgMinusCircle }))) }, restInputProps) }, restProps)));
+};
+
 var useCollapsibleText = function () {
     var _a = React.useState(false), open = _a[0], setOpen = _a[1];
     var collapseState = React.useState(false);
@@ -1486,6 +1558,7 @@ exports.Divider = Divider;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
 exports.Link = Link;
+exports.NumberField = NumberField;
 exports.Paper = Paper;
 exports.PaperContent = PaperContent;
 exports.Radio = Radio;