@popmenu/common-ui 0.40.3 → 0.42.0

package/build/components/Chip/Chip.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ChipProps } from './ChipProps';
+export declare const Chip: {
+    (props: ChipProps): JSX.Element;
+    displayName: string;
+};

package/build/components/Chip/ChipProps.d.ts

@@ -0,0 +1,4 @@
+import { ChipProps as MuiChipProps } from '@material-ui/core/Chip';
+export interface ChipProps extends MuiChipProps {
+    severity?: 'success' | 'info' | 'warning' | 'error';
+}

package/build/components/Chip/ChipStyles.d.ts

@@ -0,0 +1,2 @@
+import { ChipProps } from './ChipProps';
+export declare const useChipStyles: (props: ChipProps) => import("@material-ui/styles").ClassNameMap<string>;

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

@@ -1 +1,2 @@
-export { default, ChipProps } from '@material-ui/core/Chip';
+export { Chip as default } from './Chip';
+export { ChipProps } from './ChipProps';

package/build/index.es.js

@@ -21,7 +21,7 @@ export { default as CardMedia } from '@material-ui/core/CardMedia';
 import MuiCheckbox from '@material-ui/core/Checkbox';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
 export { default as FormControlLabel } from '@material-ui/core/FormControlLabel';
-export { default as Chip } from '@material-ui/core/Chip';
+import MuiChip from '@material-ui/core/Chip';
 import Collapse from '@material-ui/core/Collapse';
 export { default as Dialog } from '@material-ui/core/Dialog';
 export { default as DialogActions } from '@material-ui/core/DialogActions';
@@ -90,60 +90,135 @@ function __rest(s, e) {
     return t;
 }
 
-var _path$V;
+var _g;
 
-function _extends$1D() { _extends$1D = 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$1D.apply(this, arguments); }
+function _extends$6() { _extends$6 = 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$6.apply(this, arguments); }
+
+function SvgCheckCircle(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$6({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
+    stroke: "currentColor"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M14.667 7.387V8a6.667 6.667 0 11-3.954-6.093"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M14.667 2.667L8 9.34l-2-2"
+  }))));
+}
+
+var _path$5;
+
+function _extends$5() { _extends$5 = 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$5.apply(this, arguments); }
+
+function SvgInfo(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$5({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$5 || (_path$5 = /*#__PURE__*/React.createElement("path", {
+    d: "M8 14.667A6.667 6.667 0 108 1.334a6.667 6.667 0 000 13.333zm0-4V8m0-2.667h.007",
+    stroke: "currentColor"
+  })));
+}
+
+var _path$4;
+
+function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
 
 function SvgMinusCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1D({
+  return /*#__PURE__*/React.createElement("svg", _extends$4({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$V || (_path$V = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$4 || (_path$4 = /*#__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",
     stroke: "currentColor"
   })));
 }
 
-var _path$R;
+var _path$3;
 
-function _extends$1z() { _extends$1z = 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$1z.apply(this, arguments); }
+function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
 
 function SvgPlusCircle(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1z({
+  return /*#__PURE__*/React.createElement("svg", _extends$3({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$R || (_path$R = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$3 || (_path$3 = /*#__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",
     stroke: "currentColor"
   })));
 }
 
-var _path$I;
+var _path$2;
 
-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$2() { _extends$2 = 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$2.apply(this, arguments); }
 
 function SvgUser(props) {
-  return /*#__PURE__*/React.createElement("svg", _extends$1m({
+  return /*#__PURE__*/React.createElement("svg", _extends$2({
     viewBox: "0 0 16 16",
     fill: "none",
     strokeLinecap: "round",
     strokeLinejoin: "round",
     width: "1em",
     height: "1em"
-  }, props), _path$I || (_path$I = /*#__PURE__*/React.createElement("path", {
+  }, props), _path$2 || (_path$2 = /*#__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",
     stroke: "currentColor"
   })));
 }
 
+var _path$1;
+
+function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
+
+function SvgError(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends$1({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
+    d: "M5.24 1.333h5.52l3.907 3.907v5.52l-3.907 3.907H5.24L1.333 10.76V5.24L5.24 1.333zm2.76 4V8m0 2.666h.008",
+    stroke: "currentColor"
+  })));
+}
+
+var _path;
+
+function _extends() { _extends = 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.apply(this, arguments); }
+
+function SvgWarning(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 16 16",
+    fill: "none",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    width: "1em",
+    height: "1em"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    d: "M6.86 2.573L1.213 12a1.334 1.334 0 001.14 2h11.294a1.332 1.332 0 001.14-2L9.14 2.573a1.333 1.333 0 00-2.28 0v0zM8 6v2.667m0 2.667h.007",
+    stroke: "currentColor"
+  })));
+}
+
 var useIconStyles = makeStyles(function (_a) {
     var spacing = _a.spacing, palette = _a.palette;
     var getFontSize = function (_a) {
@@ -371,6 +446,93 @@ var Checkbox = forwardRef(function (props, ref) {
 });
 Checkbox.displayName = 'Checkbox';
 
+var getBackground = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var background;
+    var backgrounds = {
+        outlined: 'none',
+        error: 'error.main',
+        warning: 'warning.main',
+        info: 'info.light',
+        success: 'success.light',
+    };
+    if (variant === 'outlined') {
+        background = backgrounds[variant];
+    }
+    else if (severity) {
+        var _a = backgrounds[severity].split('.'), color = _a[0], colorVariant = _a[1];
+        background = theme.palette[color][colorVariant];
+    }
+    return background;
+}; };
+var getColor = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var textColor;
+    if (variant === 'outlined' && severity) {
+        var textColors = {
+            error: theme.palette.error.main,
+            info: theme.palette.info.main,
+            warning: theme.palette.warning.dark,
+            success: theme.palette.success.dark,
+        };
+        textColor = textColors[severity];
+    }
+    else if (variant === 'outlined' && !severity) {
+        textColor = theme.palette.grey[700];
+    }
+    else if ((variant === 'default' || variant === undefined) && severity) {
+        var textColors = {
+            error: theme.palette.common.white,
+            info: theme.palette.secondary.main,
+            warning: theme.palette.secondary.main,
+            success: theme.palette.secondary.main,
+        };
+        textColor = textColors[severity];
+    }
+    return textColor;
+}; };
+var getBorder = function (theme) { return function (props) {
+    var variant = props.variant, severity = props.severity;
+    var borderColor;
+    if (variant === 'outlined' && severity) {
+        var borderColors = {
+            error: theme.palette.error.main,
+            info: theme.palette.info.main,
+            warning: theme.palette.warning.dark,
+            success: theme.palette.success.dark,
+        };
+        borderColor = borderColors[severity];
+    }
+    return borderColor;
+}; };
+var useChipStyles = makeStyles$1(function (theme) { return ({
+    root: {
+        background: getBackground(theme),
+        color: getColor(theme),
+        borderColor: getBorder(theme),
+        borderRadius: theme.spacing(0.5),
+    },
+    icon: {
+        color: 'inherit',
+        height: theme.spacing(2),
+        width: theme.spacing(2),
+    },
+}); });
+
+var IconDictionary = {
+    error: SvgError,
+    info: SvgInfo,
+    success: SvgCheckCircle,
+    warning: SvgWarning,
+};
+var Chip = function (props) {
+    var severity = props.severity, restProps = __rest(props, ["severity"]);
+    var classes = useChipStyles(props);
+    var icon = severity ? React__default.createElement(IconDictionary[severity]) : undefined;
+    return React__default.createElement(MuiChip, __assign({ classes: classes, icon: icon }, restProps));
+};
+Chip.displayName = 'Chip';
+
 var defaultTypographyProps = {
     variant: 'body1',
 };
@@ -831,5 +993,5 @@ var useTabs = function (options) {
     };
 };
 
-export { Avatar, Button, Checkbox, CollapsibleText, Divider, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, TabPanel, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText, useTabs };
+export { Avatar, Button, Checkbox, Chip, CollapsibleText, Divider, Icon, IconButton, Link, NumberField, Paper, PaperContent, Radio, SplitInput, Switch, TabPanel, ToggleButton, ToggleButtonGroup, Tooltip, Typography, useCollapsibleText, useTabs };
 //# sourceMappingURL=index.es.js.map