@arterial/chips - npm Package Compare versions

Comparing version 1.2.0 to 2.0.0

dist/index.js

@@ -1,1 +0,168 @@
-import e from"react";import c from"prop-types";import t from"classnames";function r(e,c,t){return c in e?Object.defineProperty(e,c,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[c]=t,e}function n(e,c){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);c&&(r=r.filter((function(c){return Object.getOwnPropertyDescriptor(e,c).enumerable}))),t.push.apply(t,r)}return t}function i(e){for(var c=1;c<arguments.length;c++){var t=null!=arguments[c]?arguments[c]:{};c%2?n(Object(t),!0).forEach((function(c){r(e,c,t[c])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):n(Object(t)).forEach((function(c){Object.defineProperty(e,c,Object.getOwnPropertyDescriptor(t,c))}))}return e}function o(e,c){if(null==e)return{};var t,r,n=function(e,c){if(null==e)return{};var t,r,n={},i=Object.keys(e);for(r=0;r<i.length;r++)t=i[r],c.indexOf(t)>=0||(n[t]=e[t]);return n}(e,c);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)t=i[r],c.indexOf(t)>=0||Object.prototype.propertyIsEnumerable.call(e,t)&&(n[t]=e[t])}return n}var a=e.forwardRef((function(c,r){var n=c.className,a=c.icon,l=o(c,["className","icon"]);if("string"==typeof a){var s=t("art-icon","material-icons",n);return e.createElement("i",Object.assign({className:s,ref:r},l),a)}var p=a.props.className&&!a.props.className.includes("art-icon"),m=t({"art-icon":p},a.props.className,n),d=i(i(i({},l),a.props),{},{className:m,ref:r});return e.cloneElement(a,d)}));function l(c){var r=c.children,n=c.className,i=c.choice,a=c.filter,l=c.input,s=c.tag,p=void 0===s?"div":s,m=o(c,["children","className","choice","filter","input","tag"]),d=t("mdc-chip-set",n,{"mdc-chip-set--choice":i,"mdc-chip-set--filter":a,"mdc-chip-set--input":l}),f=p;return e.createElement(f,Object.assign({className:d,role:"grid"},m),r)}function s(c){var r=c.checkmark,n=c.className,i=c.icon,l=c.id,s=c.onSelect,p=c.onTrailingIconSelect,m=c.ripple,d=void 0===m||m,f=c.selected,u=c.text,b=c.trailingIcon,g=c.tag,h=void 0===g?"div":g,y=o(c,["checkmark","className","icon","id","onSelect","onTrailingIconSelect","ripple","selected","text","trailingIcon","tag"]),O=t("mdc-chip",n,{"mdc-chip--selected":f}),N=t("mdc-chip__icon","mdc-chip__icon--leading",{"mdc-chip__icon--leading-hidden":r&&f}),v=t("mdc-chip__icon","mdc-chip__icon--trailing"),k=h;function _(e){var c="click"===e.type,t="Enter"===e.key||13===e.keyCode,r="Spacebar"===e.key||32===e.keyCode;return c||t||r}function j(e){p&&_(e)&&p(l)}function E(e){s&&_(e)&&s()}return e.createElement(k,Object.assign({className:O,id:l,onClick:E,onKeyDown:E,role:"row"},y),d&&e.createElement("div",{className:"mdc-chip__ripple"}),i&&e.createElement(a,{className:N,icon:i}),r&&e.createElement("span",{className:"mdc-chip__checkmark"},e.createElement("svg",{className:"mdc-chip__checkmark-svg",viewBox:"-2 -3 30 30"},e.createElement("path",{className:"mdc-chip__checkmark-path",fill:"none",stroke:"black",d:"M1.73,12.91 8.1,19.28 22.79,4.59"}))),u&&e.createElement("span",{role:"gridcell"},e.createElement("span",{className:"mdc-chip__primary-action",role:"button",tabIndex:"0"},e.createElement("span",{className:"mdc-chip__text"},u))),b&&e.createElement(a,{className:v,icon:b,role:"button",tabIndex:p?0:-1,onKeyDown:j,onClick:j}))}a.displayName="Icon",a.propTypes={className:c.string,icon:c.node.isRequired},l.propTypes={children:c.node,className:c.string,choice:c.bool,filter:c.bool,input:c.bool,tag:c.element},s.propTypes={checkmark:c.bool,className:c.string,icon:c.node,id:c.string,onSelect:c.func,onTrailingIconSelect:c.func,ripple:c.bool,selected:c.bool,text:c.string,trailingIcon:c.node,tag:c.element};export{s as Chip,l as ChipSet};
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { Icon } from '@arterial/icon';
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+function ChipSet(_ref) {
+  var children = _ref.children,
+      className = _ref.className,
+      choice = _ref.choice,
+      filter = _ref.filter,
+      input = _ref.input,
+      _ref$tag = _ref.tag,
+      Tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+      otherProps = _objectWithoutProperties(_ref, ["children", "className", "choice", "filter", "input", "tag"]);
+
+  var classes = classNames('mdc-chip-set', className, {
+    'mdc-chip-set--choice': choice,
+    'mdc-chip-set--filter': filter,
+    'mdc-chip-set--input': input
+  });
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({
+    className: classes,
+    role: "grid"
+  }, otherProps), children);
+}
+ChipSet.displayName = 'ChipSet';
+ChipSet.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  choice: PropTypes.bool,
+  filter: PropTypes.bool,
+  input: PropTypes.bool,
+  tag: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+};
+
+function Chip(_ref) {
+  var checkmark = _ref.checkmark,
+      className = _ref.className,
+      icon = _ref.icon,
+      id = _ref.id,
+      onSelect = _ref.onSelect,
+      onTrailingIconSelect = _ref.onTrailingIconSelect,
+      _ref$ripple = _ref.ripple,
+      ripple = _ref$ripple === void 0 ? true : _ref$ripple,
+      selected = _ref.selected,
+      text = _ref.text,
+      trailingIcon = _ref.trailingIcon,
+      _ref$tag = _ref.tag,
+      Tag = _ref$tag === void 0 ? 'div' : _ref$tag,
+      otherProps = _objectWithoutProperties(_ref, ["checkmark", "className", "icon", "id", "onSelect", "onTrailingIconSelect", "ripple", "selected", "text", "trailingIcon", "tag"]);
+
+  var classes = classNames('mdc-chip', className, {
+    'mdc-chip--selected': selected
+  });
+  var iconClasses = classNames('mdc-chip__icon', 'mdc-chip__icon--leading', {
+    'mdc-chip__icon--leading-hidden': checkmark && selected
+  });
+  var trailingIconClasses = classNames('mdc-chip__icon', 'mdc-chip__icon--trailing');
+
+  function isSelected(e) {
+    var isClick = e.type === 'click';
+    var isEnter = e.key === 'Enter' || e.keyCode === 13;
+    var isSpacebar = e.key === 'Spacebar' || e.keyCode === 32;
+    return isClick || isEnter || isSpacebar;
+  }
+
+  function handleTrailingIconSelect(e) {
+    if (onTrailingIconSelect && isSelected(e)) {
+      onTrailingIconSelect(id);
+    }
+  }
+
+  function handleSelect(e) {
+    if (onSelect && isSelected(e)) {
+      onSelect();
+    }
+  }
+
+  return /*#__PURE__*/React.createElement(Tag, Object.assign({
+    className: classes,
+    id: id,
+    onClick: handleSelect,
+    onKeyDown: handleSelect,
+    role: "row"
+  }, otherProps), ripple && /*#__PURE__*/React.createElement("div", {
+    className: "mdc-chip__ripple"
+  }), icon && /*#__PURE__*/React.createElement(Icon, {
+    className: iconClasses,
+    icon: icon
+  }), checkmark && /*#__PURE__*/React.createElement("span", {
+    className: "mdc-chip__checkmark"
+  }, /*#__PURE__*/React.createElement("svg", {
+    className: "mdc-chip__checkmark-svg",
+    viewBox: "-2 -3 30 30"
+  }, /*#__PURE__*/React.createElement("path", {
+    className: "mdc-chip__checkmark-path",
+    fill: "none",
+    stroke: "black",
+    d: "M1.73,12.91 8.1,19.28 22.79,4.59"
+  }))), text && /*#__PURE__*/React.createElement("span", {
+    role: "gridcell"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mdc-chip__primary-action",
+    role: "button",
+    tabIndex: "0"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "mdc-chip__text"
+  }, text))), trailingIcon && /*#__PURE__*/React.createElement(Icon, {
+    className: trailingIconClasses,
+    icon: trailingIcon,
+    role: "button",
+    tabIndex: onTrailingIconSelect ? 0 : -1,
+    onKeyDown: handleTrailingIconSelect,
+    onClick: handleTrailingIconSelect
+  }));
+}
+Chip.displayName = 'Chip';
+Chip.propTypes = {
+  checkmark: PropTypes.bool,
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  id: PropTypes.string,
+  onSelect: PropTypes.func,
+  onTrailingIconSelect: PropTypes.func,
+  ripple: PropTypes.bool,
+  selected: PropTypes.bool,
+  text: PropTypes.string,
+  trailingIcon: PropTypes.node,
+  tag: PropTypes.oneOfType([PropTypes.object, PropTypes.string])
+};
+
+export { Chip, ChipSet };

package.json

 {
   "name": "@arterial/chips",
-  "version": "1.2.0",
+  "version": "2.0.0",
   "description": "Another React Material Chips",
@@ -26,5 +26,6 @@ "author": "jdc2000",
   "dependencies": {
-    "@arterial/icon": "^1.2.0"
+    "@arterial/icon": "^2.0.0",
+    "@material/chips": "^6.0.0"
   },
-  "gitHead": "5022a2b21d1bb83ed2e07f65cf400b0ffdae7d6d"
+  "gitHead": "d783681c7083bb9c16e889110f5fd106de3ca77b"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

Lines of code

150

increased by80.72%

Worsened metrics

Total package byte prevSize

6106

decreased by-70.37%

Dependency count

2

increased by100%

Number of package files

3

decreased by-25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@material/chips@^6.0.0

• + Added@arterial/icon@2.0.3(transitive)

• + Added@material/animation@6.0.0(transitive)

• + Added@material/base@6.0.0(transitive)

• + Added@material/checkbox@6.0.0(transitive)

• + Added@material/chips@6.0.0(transitive)

• + Added@material/density@6.0.0(transitive)

• + Added@material/dom@6.0.0(transitive)

• + Added@material/elevation@6.0.0(transitive)

• + Added@material/feature-targeting@6.0.0(transitive)

• + Added@material/ripple@6.0.0(transitive)

• + Added@material/rtl@6.0.0(transitive)

• + Added@material/shape@6.0.0(transitive)

• + Added@material/theme@6.0.0(transitive)

• + Added@material/touch-target@6.0.0(transitive)

• + Added@material/typography@6.0.0(transitive)

• + Addedtslib@1.14.1(transitive)

• - Removed@arterial/icon@1.2.0(transitive)

• Updated@arterial/icon@^2.0.0