@asphalt-react/actionlist - npm Package Compare versions

Comparing version 2.0.0-alpha.29 to 2.0.0-alpha.32

dist/index.js

@@ -52,5 +52,5 @@ import React, { createContext, useRef, useState, useEffect, useContext } from 'react';
 
-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  border-radius: var(--roundness-defined-type-3, 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  display: flex;\n  align-items: center;\n  width: 100%;\n  cursor: default;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--roundness-defined-type-2, 0.375rem);\n  box-sizing: border-box;\n}\n\n.caption__L39Fy {\n  text-transform: capitalize;\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.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","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  border-radius: var(--roundness-defined-type-3, 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  display: flex;\n  align-items: center;\n  width: 100%;\n  cursor: default;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--roundness-defined-type-2, 0.375rem);\n  box-sizing: border-box;\n}\n\n.caption__L39Fy {\n  text-transform: capitalize;\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.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  border-radius: var(--roundness-defined-type-3, 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  display: flex;\n  align-items: center;\n  width: 100%;\n  cursor: default;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--roundness-defined-type-2, 0.375rem);\n  box-sizing: border-box;\n}\n\n.caption__L39Fy {\n  text-transform: capitalize;\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  flex: 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","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  border-radius: var(--roundness-defined-type-3, 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  display: flex;\n  align-items: center;\n  width: 100%;\n  cursor: default;\n  text-decoration: none;\n  border: 1px solid transparent;\n  border-radius: var(--roundness-defined-type-2, 0.375rem);\n  box-sizing: border-box;\n}\n\n.caption__L39Fy {\n  text-transform: capitalize;\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  flex: 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);
@@ -66,4 +66,4 @@
 
-const Action=({children,qualifier,danger,actionable,as,asProps,separator,...props})=>{const{style,className,...rest}=props;const{setActive,size}=useContext(context);const Link=as||(actionable?"button":"a");const onClick=event=>{var _rest$onClick,_asProps$onClick;setActive(event);(_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);};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[sizeClass(size)]),tabIndex:"-1",onClick:onClick}),qualifier&&React.createElement(Qualifier,{iconSize:svgSize(qualifierSVGSizes,size),"data-testId":"actionlist-icon"},qualifier),React.createElement("span",{className:styles.caption},children)))};Action.propTypes={children:PropTypes.node,qualifier:PropTypes.oneOfType([PropTypes.element,PropTypes.string]),danger:PropTypes.bool,actionable:PropTypes.bool,as:PropTypes.elementType,asProps:PropTypes.object,separator:PropTypes.bool};Action.defaultProps={danger:false,actionable:false,asProps:{},separator:false};
+const Action=({children,qualifier,qualifierEnd,danger,actionable,as,asProps,separator,...props})=>{const{style,className,...rest}=props;const{setActive,size}=useContext(context);const Link=as||(actionable?"button":"a");const onClick=event=>{var _rest$onClick,_asProps$onClick;setActive(event);(_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=()=>qualifier&&React.createElement(Qualifier,{iconSize:svgSize(qualifierSVGSizes,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[sizeClass(size)]),tabIndex:"-1",onClick:onClick}),!qualifierEnd&&getQualifier(),React.createElement("span",{className:cn(styles.caption,{[styles.qualifierEnd]:qualifierEnd})},children),qualifierEnd&&getQualifier()))};Action.propTypes={children:PropTypes.node,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};
 
 export { Action, Actionlist };

package.json

 {
   "name": "@asphalt-react/actionlist",
-  "version": "2.0.0-alpha.29",
+  "version": "2.0.0-alpha.32",
   "description": "Actionlist",
@@ -51,3 +51,3 @@ "keywords": [
   "license": "UNLICENSED",
-  "gitHead": "491625ede025781fe585a96c527222cace330f28"
+  "gitHead": "a6a174377c4adb05c058859b5665be5b07a917f9"
 }

README.md

@@ -99,2 +99,10 @@ # Actionlist
 
+### qualifierEnd
+
+Appends qualifier to the caption.
+
+| type | required | default |
+| ---- | -------- | ------- |
+| bool | false    | false   |
+
 ### danger
@@ -101,0 +109,0 @@

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

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

Total package byte prevSize

29282

2.62%

Lines of code

181

1.12%

Number of lines in readme file

146

5.8%

Number of medium supply chain risk alerts

0

-100%

No dependency changes