@popmenu/common-ui 0.20.0 → 0.23.0

package/build/components/NumberField/NumberField.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { NumberFieldProps } from './NumberFieldProps';
+export declare const NumberField: (props: NumberFieldProps) => JSX.Element;

package/build/components/NumberField/NumberFieldProps.d.ts

@@ -0,0 +1,7 @@
+import { FilledTextFieldProps } from '@material-ui/core';
+export interface NumberFieldProps extends Omit<FilledTextFieldProps, 'variant'> {
+    /** Callback invoked when the plus sign is clicked. */
+    onIncrement: () => void;
+    /** Callback invoked when the minus sign is clicked. */
+    onDecrement: () => void;
+}

package/build/components/NumberField/NumberFieldStyles.d.ts

@@ -0,0 +1,2 @@
+export declare const useNumberFieldStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root">;
+export declare const useNumberInputStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"root" | "input" | "adornedStart" | "adornedEnd">;

package/build/components/NumberField/index.d.ts

@@ -0,0 +1,2 @@
+export { NumberField } from './NumberField';
+export { NumberFieldProps } from './NumberFieldProps';

package/build/components/index.d.ts

@@ -72,3 +72,4 @@ export { default as ToggleButtonGroup, ToggleButtonGroupProps } from './ToggleBu
 export { default as Toolbar, ToolbarProps } from './Toolbar';
 export { default as Tooltip, TooltipProps } from './Tooltip';
 export { default as Typography, TypographyProps } from './Typography';
+export { NumberField, NumberFieldProps } from './NumberField';

package/build/index.es.js

@@ -1,5 +1,5 @@
 export { default as Alert } from '@material-ui/lab/Alert';
-import { makeStyles, Paper as Paper$1, useTheme, Box, Popper, Grow, Slider, Link as Link$1 } from '@material-ui/core';
+import { makeStyles, Paper as Paper$1, useTheme, Box, Popper, Grow, Slider, Link as Link$1, TextField as TextField$1 } from '@material-ui/core';
 export { Accordion, AccordionActions, AccordionDetails, AccordionSummary, Box, Breadcrumbs, ButtonBase, ClickAwayListener, Fab, GridList, Hidden, Modal, Popover, Popper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper, ThemeProvider, Toolbar, alpha, createTheme, darken, decomposeColor, getLuminance, hexToRgb, lighten, makeStyles, recomposeColor, rgbToHex } from '@material-ui/core';
 export { default as AppBar } from '@material-ui/core/AppBar';
 import * as React from 'react';
@@ -90,128 +90,164 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$3k;
+var _path$3e;
 
-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); }
+function _extends$3u() { _extends$3u = 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$3u.apply(this, arguments); }
+
+function SvgMinusCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3u({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    fill: "none",
+    width: "1em",
+    height: "1em"
+  }, props), _path$3e || (_path$3e = /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM5.333 8h5.334"
+  })));
+}
+
+var _path$36;
+
+function _extends$3m() { _extends$3m = 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$3m.apply(this, arguments); }
+
+function SvgPlusCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$3m({
+    viewBox: "0 0 16 16",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    stroke: "currentColor",
+    fill: "none",
+    width: "1em",
+    height: "1em"
+  }, props), _path$36 || (_path$36 = /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-9.334v5.334M5.333 8h5.334"
+  })));
+}
+
+var _path$2O;
+
+function _extends$32() { _extends$32 = 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$32.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$3B({
+  return /*#__PURE__*/React.createElement("svg", _extends$32({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$3k || (_path$3k = /*#__PURE__*/React.createElement("path", {
+    height: "1em"
+  }, props), _path$2O || (_path$2O = /*#__PURE__*/React.createElement("path", {
     d: "M13.333 14v-1.333A2.667 2.667 0 0010.667 10H5.333a2.667 2.667 0 00-2.666 2.667V14M8 7.333A2.667 2.667 0 108 2a2.667 2.667 0 000 5.333z"
   })));
 }
 
-var _path$1f;
+var _path$1k;
 
-function _extends$1p() { _extends$1p = 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$1p.apply(this, arguments); }
+function _extends$1o() { _extends$1o = 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$1o.apply(this, arguments); }
 
 function SvgPause(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1p({
+  return /*#__PURE__*/React.createElement("svg", _extends$1o({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$1f || (_path$1f = /*#__PURE__*/React.createElement("path", {
-    d: "M6.667 2.667H4v10.666h2.667V2.667zm5.333 0H9.333v10.666H12V2.667z"
+    height: "1em"
+  }, props), _path$1k || (_path$1k = /*#__PURE__*/React.createElement("path", {
+    d: "M6.667 2.667H4v10.666h2.667V2.666zm5.333 0H9.333v10.666H12V2.666z"
   })));
 }
 
-var _path$1d;
+var _path$1i;
 
-function _extends$1n() { _extends$1n = 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$1n.apply(this, arguments); }
+function _extends$1m() { _extends$1m = 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$1m.apply(this, arguments); }
 
 function SvgPlay(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1n({
+  return /*#__PURE__*/React.createElement("svg", _extends$1m({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$1d || (_path$1d = /*#__PURE__*/React.createElement("path", {
+    height: "1em"
+  }, props), _path$1i || (_path$1i = /*#__PURE__*/React.createElement("path", {
     d: "M3.333 2l9.334 6-9.334 6V2z"
   })));
 }
 
-var _path$10;
+var _path$15;
 
-function _extends$1a() { _extends$1a = 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$1a.apply(this, arguments); }
+function _extends$19() { _extends$19 = 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$19.apply(this, arguments); }
 
 function SvgVolumeDown(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1a({
+  return /*#__PURE__*/React.createElement("svg", _extends$19({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$10 || (_path$10 = /*#__PURE__*/React.createElement("path", {
-    d: "M8.999 3.333L5.665 6H3v4h2.666L9 12.667V3.333zm3.026 2.307a3.333 3.333 0 010 4.713"
+    height: "1em"
+  }, props), _path$15 || (_path$15 = /*#__PURE__*/React.createElement("path", {
+    d: "M8.999 3.333L5.665 6H3v4h2.666L9 12.667V3.333zm3.026 2.307a3.333 3.333 0 010 4.714"
   })));
 }
 
-var _path$$;
+var _path$14;
 
-function _extends$19() { _extends$19 = 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$19.apply(this, arguments); }
+function _extends$18() { _extends$18 = 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$18.apply(this, arguments); }
 
 function SvgVolumeMute(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$19({
+  return /*#__PURE__*/React.createElement("svg", _extends$18({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$$ || (_path$$ = /*#__PURE__*/React.createElement("path", {
+    height: "1em"
+  }, props), _path$14 || (_path$14 = /*#__PURE__*/React.createElement("path", {
     d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333z"
   })));
 }
 
-var _path$_;
+var _path$13;
 
-function _extends$18() { _extends$18 = 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$18.apply(this, arguments); }
+function _extends$17() { _extends$17 = 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$17.apply(this, arguments); }
 
 function SvgVolumeOff(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$18({
+  return /*#__PURE__*/React.createElement("svg", _extends$17({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$_ || (_path$_ = /*#__PURE__*/React.createElement("path", {
+    height: "1em"
+  }, props), _path$13 || (_path$13 = /*#__PURE__*/React.createElement("path", {
     d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm8 2.667l-4 4m0-4l4 4"
   })));
 }
 
-var _path$Z;
+var _path$12;
 
-function _extends$17() { _extends$17 = 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$17.apply(this, arguments); }
+function _extends$16() { _extends$16 = 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$16.apply(this, arguments); }
 
 function SvgVolumeUp(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$17({
+  return /*#__PURE__*/React.createElement("svg", _extends$16({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
+    fill: "none",
     width: "1em",
-    height: "1em",
-    fill: "none"
-  }, props), _path$Z || (_path$Z = /*#__PURE__*/React.createElement("path", {
+    height: "1em"
+  }, props), _path$12 || (_path$12 = /*#__PURE__*/React.createElement("path", {
     d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm5.38-.046a6.667 6.667 0 010 9.426M10.36 5.64a3.333 3.333 0 010 4.713"
   })));
 }
@@ -995,6 +1031,44 @@ var Tooltip = forwardRef(function (props, ref) {
 });
 Tooltip.displayName = 'Tooltip';
 
+var useNumberFieldStyles = makeStyles(function () { return ({
+    root: {
+        height: 56,
+    },
+}); });
+var useNumberInputStyles = 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.createElement(TextField$1, __assign({ classes: __assign(__assign({}, fieldClasses), classes), variant: "filled", type: "number", defaultValue: 0, InputProps: __assign({ classes: __assign(__assign({}, inputClasses), inputClassesOverride), disableUnderline: true, endAdornment: (React__default.createElement(IconButton, { style: { fontSize: 20 }, onClick: onIncrement },
+                React__default.createElement(Icon, { icon: SvgPlusCircle }))), startAdornment: (React__default.createElement(IconButton, { style: { fontSize: 20 }, onClick: onDecrement },
+                React__default.createElement(Icon, { icon: SvgMinusCircle }))) }, restInputProps) }, restProps)));
+};
+
 var useCollapsibleText = function () {
     var _a = useState(false), open = _a[0], setOpen = _a[1];
     var collapseState = useState(false);
@@ -1008,5 +1082,5 @@ var useCollapsibleText = function () {
     };
 };
 
-export { AudioPlayer, Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, Paper, PaperContent, Radio, SplitInput, Switch, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText };
+export { AudioPlayer, Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText };
 //# sourceMappingURL=index.es.js.map