@asphalt-react/actionlist - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/index.js

@@ -9,16 +9,9 @@ import React, { useState, useRef, useEffect } from 'react';
 function _extends() {
-  _extends = Object.assign ? Object.assign.bind() : 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 _extends = Object.assign ? Object.assign.bind() : function (n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
     }
-
-    return target;
-  };
-  return _extends.apply(this, arguments);
+    return n;
+  }, _extends.apply(null, arguments);
 }
@@ -57,5 +50,5 @@
 
-var css_248z = ".Actionlist__d154F {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --content-color: var(--content-muted, #8e919b);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --padding-horizontal: 1rem;\n  --icon-margin: 1rem;\n\n  border-radius: var(--roundness-container-S, 0.5rem);\n}\n\n.panel__hEYYO {\n  display: inline-block;\n  background-color: var(--static-surface-primary, #ffffff);\n  min-width: 160px;\n  max-width: 320px;\n  box-sizing: border-box;\n  /* override ul useragent styles */\n  margin: 0;\n  padding: 0;\n}\n\n.action__AwLYT {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.separator__2nqq6:not(:first-child) {\n  position: relative;\n  margin-top: 0.5rem;\n}\n\n.separator__2nqq6:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -4px;\n  left: var(--padding-horizontal);\n  width: calc(100% - (2 * var(--padding-horizontal)));\n  border-top: 1px solid var(--static-border-secondary, #dce5f0);\n}\n\n.actionItem__nSHE8 {\n  background-color: var(--surface-color);\n  color: var(--content-color);\n  font: var(--text-font);\n  text-align: left;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  align-items: center;\n  width: 100%;\n  cursor: default;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--roundness-menu, 0.375rem);\n  box-sizing: border-box;\n}\n\n.caption__L39Fy {\n  text-transform: capitalize;\n  flex: 1;\n}\n\n.actionItemDanger__jq-tb {\n  --content-color: var(--content-danger, #bb354e);\n}\n\n.actionItem__nSHE8:active {\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n  --content-color: var(--content-primary, #2d2e34);\n  border-color: var(--interactive-active, #1c3abb);\n}\n\n@supports not selector(:focus-visible) {\n  .actionItem__nSHE8:focus {\n    outline: var(--focus);\n    --content-color: var(--content-primary, #2d2e34);\n  }\n\n  .actionItemDanger__jq-tb:focus {\n    --content-color: var(--content-danger, #bb354e);\n  }\n}\n\n.actionItem__nSHE8:focus-visible {\n  outline: var(--focus);\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.actionItem__nSHE8:hover {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --content-color: var(--content-primary, #2d2e34);\n  text-decoration: none;\n}\n\n.actionItemDanger__jq-tb:focus-visible,\n.actionItemDanger__jq-tb:hover {\n  --content-color: var(--content-danger, #bb354e);\n}\n\n.qualifier__T5J0l {\n  gap: 1rem;\n}\n\n.qualifierEnd__LQKBd {\n  justify-content: space-between;\n}\n\n.icon__M0roB {\n  display: inline-grid;\n  vertical-align: middle;\n}\n\n.iconEnd__A9LmS {\n  order: 1;\n}\n\n.s__-gF43 {\n  --text-font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 0.625rem var(--padding-horizontal);\n}\n\n.m__bPRnO {\n  --text-font: var(\n    --text-bold-M,\n    600 1rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 0.75rem var(--padding-horizontal);\n}\n\n.l__cQfvc {\n  --text-font: var(\n    --text-bold-L,\n    600 1.125rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 1rem var(--padding-horizontal);\n}\n";
+var css_248z = ".Actionlist__d154F {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --content-color: var(--content-muted, #8e919b);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --padding-horizontal: 1rem;\n  --icon-margin: 1rem;\n\n  border-radius: var(--roundness-container-S, 0.5rem);\n}\n\n.panel__hEYYO {\n  display: inline-block;\n  background-color: var(--static-surface-primary, #ffffff);\n  min-width: 160px;\n  max-width: 320px;\n  box-sizing: border-box;\n  /* override ul useragent styles */\n  margin: 0;\n  padding: 0;\n}\n\n.action__AwLYT {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.separator__2nqq6:not(:first-child) {\n  position: relative;\n  margin-top: 0.5rem;\n}\n\n.separator__2nqq6:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -4px;\n  left: var(--padding-horizontal);\n  width: calc(100% - (2 * var(--padding-horizontal)));\n  border-top: 1px solid var(--static-border-secondary, #dce5f0);\n}\n\n.actionItem__nSHE8 {\n  background-color: var(--surface-color);\n  color: var(--content-color);\n  font: var(--text-font);\n  text-align: left;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: max-content;\n  align-items: center;\n  width: 100%;\n  cursor: default;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--roundness-menu, 0.375rem);\n  box-sizing: border-box;\n}\n\n.caption__L39Fy {\n  text-transform: capitalize;\n  flex: 1;\n}\n\n.actionItemDanger__jq-tb {\n  --content-color: var(--content-danger, #bb354e);\n}\n\n.actionItem__nSHE8:active {\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n  --content-color: var(--content-primary, #2d2e34);\n  border-color: var(--interactive-active, #1c3abb);\n}\n\n@supports not selector(:focus-visible) {\n  .actionItem__nSHE8:focus {\n    outline: var(--focus);\n    --content-color: var(--content-primary, #2d2e34);\n  }\n\n  .actionItemDanger__jq-tb:focus {\n    --content-color: var(--content-danger, #bb354e);\n  }\n}\n\n.actionItem__nSHE8:focus-visible {\n  outline: var(--focus);\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.actionItem__nSHE8:hover {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --content-color: var(--content-primary, #2d2e34);\n  text-decoration: none;\n}\n\n.actionItemDanger__jq-tb:focus-visible,\n.actionItemDanger__jq-tb:hover {\n  --content-color: var(--content-danger, #bb354e);\n}\n\n.qualifier__T5J0l {\n  gap: 1rem;\n}\n\n.qualifierEnd__LQKBd {\n  justify-content: space-between;\n}\n\n.icon__M0roB {\n  display: inline-grid;\n  vertical-align: middle;\n}\n\n.iconEnd__A9LmS {\n  order: 1;\n}\n\n.s__-gF43 {\n  --text-font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 0.625rem var(--padding-horizontal);\n}\n\n.m__bPRnO {\n  --text-font: var(\n    --text-bold-M,\n    600 1rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 0.75rem var(--padding-horizontal);\n}\n\n.l__cQfvc {\n  --text-font: var(\n    --text-bold-L,\n    600 1.125rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 1rem var(--padding-horizontal);\n}\n";
 var styles = {"Actionlist":"Actionlist__d154F","panel":"panel__hEYYO","action":"action__AwLYT","separator":"separator__2nqq6","actionItem":"actionItem__nSHE8","caption":"caption__L39Fy","actionItemDanger":"actionItemDanger__jq-tb","qualifier":"qualifier__T5J0l","qualifierEnd":"qualifierEnd__LQKBd","icon":"icon__M0roB","iconEnd":"iconEnd__A9LmS","s":"s__-gF43","m":"m__bPRnO","l":"l__cQfvc"};
-var stylesheet=".Actionlist__d154F {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --content-color: var(--content-muted, #8e919b);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --padding-horizontal: 1rem;\n  --icon-margin: 1rem;\n\n  border-radius: var(--roundness-container-S, 0.5rem);\n}\n\n.panel__hEYYO {\n  display: inline-block;\n  background-color: var(--static-surface-primary, #ffffff);\n  min-width: 160px;\n  max-width: 320px;\n  box-sizing: border-box;\n  /* override ul useragent styles */\n  margin: 0;\n  padding: 0;\n}\n\n.action__AwLYT {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.separator__2nqq6:not(:first-child) {\n  position: relative;\n  margin-top: 0.5rem;\n}\n\n.separator__2nqq6:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -4px;\n  left: var(--padding-horizontal);\n  width: calc(100% - (2 * var(--padding-horizontal)));\n  border-top: 1px solid var(--static-border-secondary, #dce5f0);\n}\n\n.actionItem__nSHE8 {\n  background-color: var(--surface-color);\n  color: var(--content-color);\n  font: var(--text-font);\n  text-align: left;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: -webkit-max-content;\n  grid-auto-columns: max-content;\n  align-items: center;\n  width: 100%;\n  cursor: default;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--roundness-menu, 0.375rem);\n  box-sizing: border-box;\n}\n\n.caption__L39Fy {\n  text-transform: capitalize;\n  flex: 1;\n}\n\n.actionItemDanger__jq-tb {\n  --content-color: var(--content-danger, #bb354e);\n}\n\n.actionItem__nSHE8:active {\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n  --content-color: var(--content-primary, #2d2e34);\n  border-color: var(--interactive-active, #1c3abb);\n}\n\n@supports not selector(:focus-visible) {\n  .actionItem__nSHE8:focus {\n    outline: var(--focus);\n    --content-color: var(--content-primary, #2d2e34);\n  }\n\n  .actionItemDanger__jq-tb:focus {\n    --content-color: var(--content-danger, #bb354e);\n  }\n}\n\n.actionItem__nSHE8:focus-visible {\n  outline: var(--focus);\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.actionItem__nSHE8:hover {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --content-color: var(--content-primary, #2d2e34);\n  text-decoration: none;\n}\n\n.actionItemDanger__jq-tb:focus-visible,\n.actionItemDanger__jq-tb:hover {\n  --content-color: var(--content-danger, #bb354e);\n}\n\n.qualifier__T5J0l {\n  gap: 1rem;\n}\n\n.qualifierEnd__LQKBd {\n  justify-content: space-between;\n}\n\n.icon__M0roB {\n  display: inline-grid;\n  vertical-align: middle;\n}\n\n.iconEnd__A9LmS {\n  order: 1;\n}\n\n.s__-gF43 {\n  --text-font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 0.625rem var(--padding-horizontal);\n}\n\n.m__bPRnO {\n  --text-font: var(\n    --text-bold-M,\n    600 1rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 0.75rem var(--padding-horizontal);\n}\n\n.l__cQfvc {\n  --text-font: var(\n    --text-bold-L,\n    600 1.125rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 1rem var(--padding-horizontal);\n}\n";
+var stylesheet=".Actionlist__d154F {\n  --surface-color: var(--interactive-surface-primary-default, #ffffff);\n  --content-color: var(--content-muted, #8e919b);\n  --focus-appearance: var(--focus-outline, 2px solid);\n  --focus-color: var(--interactive-focus, #86afff);\n  --focus: var(--focus-appearance) var(--focus-color);\n  --padding-horizontal: 1rem;\n  --icon-margin: 1rem;\n\n  border-radius: var(--roundness-container-S, 0.5rem);\n}\n\n.panel__hEYYO {\n  display: inline-block;\n  background-color: var(--static-surface-primary, #ffffff);\n  min-width: 160px;\n  max-width: 320px;\n  box-sizing: border-box;\n  /* override ul useragent styles */\n  margin: 0;\n  padding: 0;\n}\n\n.action__AwLYT {\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n}\n\n.separator__2nqq6:not(:first-child) {\n  position: relative;\n  margin-top: 0.5rem;\n}\n\n.separator__2nqq6:not(:first-child):before {\n  content: \"\";\n  position: absolute;\n  top: -4px;\n  left: var(--padding-horizontal);\n  width: calc(100% - (2 * var(--padding-horizontal)));\n  border-top: 1px solid var(--static-border-secondary, #dce5f0);\n}\n\n.actionItem__nSHE8 {\n  background-color: var(--surface-color);\n  color: var(--content-color);\n  font: var(--text-font);\n  text-align: left;\n  display: grid;\n  grid-auto-flow: column;\n  grid-auto-columns: max-content;\n  align-items: center;\n  width: 100%;\n  cursor: default;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--roundness-menu, 0.375rem);\n  box-sizing: border-box;\n}\n\n.caption__L39Fy {\n  text-transform: capitalize;\n  flex: 1;\n}\n\n.actionItemDanger__jq-tb {\n  --content-color: var(--content-danger, #bb354e);\n}\n\n.actionItem__nSHE8:active {\n  --surface-color: var(--interactive-surface-primary-active, #d6dce7);\n  --content-color: var(--content-primary, #2d2e34);\n  border-color: var(--interactive-active, #1c3abb);\n}\n\n@supports not selector(:focus-visible) {\n  .actionItem__nSHE8:focus {\n    outline: var(--focus);\n    --content-color: var(--content-primary, #2d2e34);\n  }\n\n  .actionItemDanger__jq-tb:focus {\n    --content-color: var(--content-danger, #bb354e);\n  }\n}\n\n.actionItem__nSHE8:focus-visible {\n  outline: var(--focus);\n  --content-color: var(--content-primary, #2d2e34);\n}\n\n.actionItem__nSHE8:hover {\n  --surface-color: var(--interactive-surface-primary-hover, #f5f7fa);\n  --content-color: var(--content-primary, #2d2e34);\n  text-decoration: none;\n}\n\n.actionItemDanger__jq-tb:focus-visible,\n.actionItemDanger__jq-tb:hover {\n  --content-color: var(--content-danger, #bb354e);\n}\n\n.qualifier__T5J0l {\n  gap: 1rem;\n}\n\n.qualifierEnd__LQKBd {\n  justify-content: space-between;\n}\n\n.icon__M0roB {\n  display: inline-grid;\n  vertical-align: middle;\n}\n\n.iconEnd__A9LmS {\n  order: 1;\n}\n\n.s__-gF43 {\n  --text-font: var(\n    --text-bold-S,\n    600 0.875rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 0.625rem var(--padding-horizontal);\n}\n\n.m__bPRnO {\n  --text-font: var(\n    --text-bold-M,\n    600 1rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 0.75rem var(--padding-horizontal);\n}\n\n.l__cQfvc {\n  --text-font: var(\n    --text-bold-L,\n    600 1.125rem/1.5 Maison Neue,\n    Helvetica,\n    Open Sans,\n    sans-serif\n  );\n  padding: 1rem var(--padding-horizontal);\n}\n";
 styleInject(css_248z);
@@ -67,4 +60,4 @@
 
-const Action=({children,qualifier,qualifierEnd=false,danger=false,actionable=false,as,size:rawSize="s",asProps={},separator=false,...props})=>{const{style,className,...rest}=props;const Link=as||(actionable?"button":"a");const{invalid,size}=resolveSize(rawSize);if(invalid){console.warn("Action: Invalid size prop. Defaulting to 's'");}const onClick=event=>{var _rest$onClick,_asProps$onClick;(_rest$onClick=rest.onClick)===null||_rest$onClick===void 0?void 0:_rest$onClick.call(rest,event);asProps===null||asProps===void 0?void 0:(_asProps$onClick=asProps.onClick)===null||_asProps$onClick===void 0?void 0:_asProps$onClick.call(asProps,event);};const getQualifier=()=>{if(!qualifier)return null;return React.createElement(Qualifier,{iconSize:qualifierSize(size),"data-testId":"actionlist-icon"},qualifier)};return React.createElement("li",{className:cn(styles.action,{[styles.danger]:danger,[styles.separator]:separator}),role:"none"},React.createElement(Link,_extends({},rest,asProps,{role:"menuitem",className:cn(styles.actionItem,{[styles.actionItemDanger]:danger,[styles.qualifier]:qualifier},{[styles.qualifierEnd]:qualifierEnd},styles[size]),tabIndex:"-1",onClick:onClick}),React.createElement("span",{className:cn(styles.icon,{[styles.iconEnd]:qualifierEnd})},getQualifier()),React.createElement("span",{className:cn(styles.caption)},children)))};Action.displayName="Action";Action.propTypes={children:PropTypes.node,size:PropTypes.oneOf(["s","m","l"]),qualifier:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.bool,danger:PropTypes.bool,actionable:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object,separator:PropTypes.bool};Action.defaultProps={qualifierEnd:false,danger:false,actionable:false,asProps:{},separator:false,size:"s"};
+const Action=({children,qualifier,qualifierEnd=false,danger=false,actionable=false,as,size:rawSize="s",asProps={},separator=false,...props})=>{const{style,className,...rest}=props;const Link=as||(actionable?"button":"a");const{invalid,size}=resolveSize(rawSize);if(invalid){console.warn("Action: Invalid size prop. Defaulting to 's'");}const onClick=event=>{rest.onClick?.(event);asProps?.onClick?.(event);};const getQualifier=()=>{if(!qualifier)return null;return React.createElement(Qualifier,{iconSize:qualifierSize(size),"data-testId":"actionlist-icon"},qualifier)};return React.createElement("li",{className:cn(styles.action,{[styles.danger]:danger,[styles.separator]:separator}),role:"none"},React.createElement(Link,_extends({},rest,asProps,{role:"menuitem",className:cn(styles.actionItem,{[styles.actionItemDanger]:danger,[styles.qualifier]:qualifier},{[styles.qualifierEnd]:qualifierEnd},styles[size]),tabIndex:"-1",onClick:onClick}),React.createElement("span",{className:cn(styles.icon,{[styles.iconEnd]:qualifierEnd})},getQualifier()),React.createElement("span",{className:cn(styles.caption)},children)))};Action.displayName="Action";Action.propTypes={children:PropTypes.node,size:PropTypes.oneOf(["s","m","l"]),qualifier:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),qualifierEnd:PropTypes.bool,danger:PropTypes.bool,actionable:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object,separator:PropTypes.bool};Action.defaultProps={qualifierEnd:false,danger:false,actionable:false,asProps:{},separator:false,size:"s"};
 
 export { Action, Actionlist };

package.json

 {
   "name": "@asphalt-react/actionlist",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "Actionlist",
@@ -53,3 +53,3 @@ "keywords": [
   "license": "UNLICENSED",
-  "gitHead": "d73f7d2b4114940b08c77f38636217e678f38dc5"
+  "gitHead": "07f7e46ca908cd5d4dea245ca87e61c8f8b956b5"
 }

README.md

 # Actionlist
 
 ![npm](https://img.shields.io/npm/dt/@asphalt-react/actionlist?style=flat-square)
+[![npm version](https://badge.fury.io/js/@asphalt-react%2Factionlist.svg)](https://badge.fury.io/js/@asphalt-react%2Factionlist)
 
@@ -19,3 +20,3 @@ A component to display a list of actions.
 
-```
+```js
 import { Actionlist, Action } from "@asphalt-react/actionlist"
@@ -28,3 +29,3 @@ import { Link } from '@reach/router'
         <Actionlist>
-            <Action as="Link" asProps={{ to: "/document/edit" }}>
+            <Action as={Link} asProps={{ to: "/document/edit" }}>
                 Edit
@@ -31,0 +32,0 @@ </Action>

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

147

0.68%

Worsened metrics

Total package byte prevSize

31288

-2.23%

Lines of code

220

-6.38%

No dependency changes