@popmenu/common-ui 0.23.0 → 0.25.1

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,164 +155,164 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$3e;
+var _path$3M;
 
-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 _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$3u({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$41({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$3e || (_path$3e = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zM5.333 8h5.334"
+    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$36;
+var _path$3E;
 
-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 _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$3m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3V({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$36 || (_path$36 = /*#__PURE__*/React__namespace.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"
+    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$2O;
+var _path$3k;
 
-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 _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 SvgUser(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$32({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3B({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$2O || (_path$2O = /*#__PURE__*/React__namespace.createElement("path", {
+    height: "1em",
+    fill: "none"
+  }, props), _path$3k || (_path$3k = /*#__PURE__*/React__namespace.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$1k;
+var _path$1f;
 
-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 _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 SvgPause(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1o({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1p({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$1k || (_path$1k = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M6.667 2.667H4v10.666h2.667V2.666zm5.333 0H9.333v10.666H12V2.666z"
+    height: "1em",
+    fill: "none"
+  }, props), _path$1f || (_path$1f = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M6.667 2.667H4v10.666h2.667V2.667zm5.333 0H9.333v10.666H12V2.667z"
   })));
 }
 
-var _path$1i;
+var _path$1d;
 
-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 _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 SvgPlay(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1m({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1n({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$1i || (_path$1i = /*#__PURE__*/React__namespace.createElement("path", {
+    height: "1em",
+    fill: "none"
+  }, props), _path$1d || (_path$1d = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M3.333 2l9.334 6-9.334 6V2z"
   })));
 }
 
-var _path$15;
+var _path$10;
 
-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$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 SvgVolumeDown(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$19({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1a({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$15 || (_path$15 = /*#__PURE__*/React__namespace.createElement("path", {
-    d: "M8.999 3.333L5.665 6H3v4h2.666L9 12.667V3.333zm3.026 2.307a3.333 3.333 0 010 4.714"
+    height: "1em",
+    fill: "none"
+  }, props), _path$10 || (_path$10 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M8.999 3.333L5.665 6H3v4h2.666L9 12.667V3.333zm3.026 2.307a3.333 3.333 0 010 4.713"
   })));
 }
 
-var _path$14;
+var _path$$;
 
-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$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 SvgVolumeMute(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$18({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$19({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$14 || (_path$14 = /*#__PURE__*/React__namespace.createElement("path", {
+    height: "1em",
+    fill: "none"
+  }, props), _path$$ || (_path$$ = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333z"
   })));
 }
 
-var _path$13;
+var _path$_;
 
-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$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 SvgVolumeOff(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$17({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$18({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$13 || (_path$13 = /*#__PURE__*/React__namespace.createElement("path", {
+    height: "1em",
+    fill: "none"
+  }, props), _path$_ || (_path$_ = /*#__PURE__*/React__namespace.createElement("path", {
     d: "M7.333 3.333L4 6H1.333v4H4l3.333 2.667V3.333zm8 2.667l-4 4m0-4l4 4"
   })));
 }
 
-var _path$12;
+var _path$Z;
 
-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 _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 SvgVolumeUp(props) {
-  return /*#__PURE__*/React__namespace.createElement("svg", _extends$16({
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends$17({
     viewBox: "0 0 16 16",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     stroke: "currentColor",
-    fill: "none",
     width: "1em",
-    height: "1em"
-  }, props), _path$12 || (_path$12 = /*#__PURE__*/React__namespace.createElement("path", {
+    height: "1em",
+    fill: "none"
+  }, props), _path$Z || (_path$Z = /*#__PURE__*/React__namespace.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"
   })));
 }
@@ -441,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';
 
@@ -1034,6 +1032,11 @@ var Switch = React.forwardRef(function (props, ref) {
 });
 Switch.displayName = 'Switch';
 
+var TabPanel = function (props) {
+    var children = props.children, show = props.show;
+    return show ? React__default['default'].createElement(core.Box, null, children) : null;
+};
+
 var useToggleButtonStyles = styles.makeStyles(function (theme) { return ({
     root: {
         color: theme.palette.text.primary,
@@ -1149,6 +1152,37 @@ var useCollapsibleText = function () {
     };
 };
 
+var useTabs = function (options) {
+    var initialTab = options.initialTab;
+    var genTabId = function (id) { return ("tab-" + id).toLowerCase().replace(/ /g, '-'); };
+    var genPanelId = function (id) { return ("tab-panel-" + id).toLowerCase().replace(/ /g, '-'); };
+    var _a = React.useState(genTabId(initialTab)), activeTab = _a[0], setActiveTab = _a[1];
+    var handleChange = function (_, nextTab) { return setActiveTab(nextTab); };
+    var TabsProps = { onChange: handleChange, value: activeTab };
+    var useTab = function (baseId) {
+        var tabId = genTabId(baseId);
+        var tabPanelId = genPanelId(baseId);
+        var tabProps = {
+            id: tabId,
+            label: baseId,
+            value: tabId,
+            'aria-controls': tabPanelId,
+        };
+        var panelProps = {
+            id: tabPanelId,
+            role: 'tabpanel',
+            show: activeTab === tabId,
+            'aria-labelledby': tabId,
+        };
+        return [tabProps, panelProps];
+    };
+    return {
+        TabsProps: TabsProps,
+        useTab: useTab,
+        setActiveTab: function (tabId) { return setActiveTab(tabId); },
+    };
+};
+
 Object.defineProperty(exports, 'Alert', {
     enumerable: true,
     get: function () {
@@ -1566,9 +1600,11 @@ exports.PaperContent = PaperContent;
 exports.Radio = Radio;
 exports.SplitInput = SplitInput;
 exports.Switch = Switch;
+exports.TabPanel = TabPanel;
 exports.ToggleButton = ToggleButton;
 exports.ToggleButtonGroup = ToggleButtonGroup;
 exports.Tooltip = Tooltip;
 exports.Typography = Typography;
 exports.useCollapsibleText = useCollapsibleText;
+exports.useTabs = useTabs;
 //# sourceMappingURL=index.js.map