@contentful/f36-drag-handle - npm Package Compare versions

Comparing version 4.39.0 to 4.40.0

dist/esm/index.js

@@ -1,9 +0,10 @@
-import a, { useState, useCallback } from 'react';
+import s, { useState, useCallback } from 'react';
 import { cx, css } from 'emotion';
 import { DragIcon } from '@contentful/f36-icons';
 import t from '@contentful/f36-tokens';
+import { hexToRGBA } from '@contentful/f36-utils';
 
-var $=Object.defineProperty,j=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var l=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?$(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,i=(o,r)=>{for(var e in r||(r={}))P.call(r,e)&&x(o,e,r[e]);if(l)for(var e of l(r))h.call(r,e)&&x(o,e,r[e]);return o},b=(o,r)=>j(o,z(r));var A=(o,r)=>{var e={};for(var n in o)P.call(o,n)&&r.indexOf(n)<0&&(e[n]=o[n]);if(o!=null&&l)for(var n of l(o))r.indexOf(n)<0&&h.call(o,n)&&(e[n]=o[n]);return e};var L=()=>({label:css({position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),root:({isActive:o,isFocused:r,isHovered:e})=>cx(css({alignItems:"center",backgroundColor:t.gray100,border:0,borderBottomLeftRadius:t.borderRadiusMedium,borderRight:`1px solid ${t.gray200}`,borderTopLeftRadius:t.borderRadiusMedium,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t.transitionDurationDefault} ${t.transitionEasingDefault}`,width:t.spacingL,"&:hover":{backgroundColor:t.gray200},"&:focus":{boxShadow:t.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t.glowPrimary}}),(o||r||e)&&css({backgroundColor:t.gray200,cursor:o?"grabbing":"grab"}))});var K="div";function O(o,r){let e=L(),D=o,{as:n=K,className:M,isActive:_,isFocused:w,isHovered:C,label:g,onBlur:p,onFocus:u,onMouseEnter:c,onMouseLeave:m,testId:G="cf-ui-drag-handle",style:N}=D,y=A(D,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style"]),[I,E]=useState(w),[R,H]=useState(C),S=useCallback(s=>{E(!0),u&&u(s);},[u]),k=useCallback(s=>{E(!1),p&&p(s);},[p]),B=useCallback(s=>{H(!0),c&&c(s);},[c]),U=useCallback(s=>{H(!1),m&&m(s);},[m]),v={className:cx(e.root({isActive:_,isFocused:I,isHovered:R}),M),"data-test-id":G,onBlur:k,onFocus:S,onMouseEnter:B,onMouseLeave:U,ref:r,style:N};return n==="div"?a.createElement("div",b(i(i({},y),v),{role:"button",tabIndex:0}),a.createElement(DragIcon,{variant:"muted"}),a.createElement("span",{className:e.label},g)):a.createElement("button",b(i(i({},y),v),{type:"button"}),a.createElement(DragIcon,{variant:"muted"}),a.createElement("span",{className:e.label},g))}var Q=a.forwardRef(O);
+var z=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?z(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,i=(o,r)=>{for(var e in r||(r={}))P.call(r,e)&&x(o,e,r[e]);if(d)for(var e of d(r))h.call(r,e)&&x(o,e,r[e]);return o},g=(o,r)=>q(o,J(r));var A=(o,r)=>{var e={};for(var n in o)P.call(o,n)&&r.indexOf(n)<0&&(e[n]=o[n]);if(o!=null&&d)for(var n of d(o))r.indexOf(n)<0&&h.call(o,n)&&(e[n]=o[n]);return e};var T=()=>({label:css({position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),root:({isActive:o,isFocused:r,isHovered:e,variant:n})=>cx(css({alignItems:"center",backgroundColor:"transparent",border:0,borderRight:`1px solid ${t.gray200}`,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t.transitionDurationDefault} ${t.transitionEasingDefault}`,width:t.spacingL,"&:hover":{backgroundColor:hexToRGBA(t.gray900,.08)},"&:focus":{boxShadow:t.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t.glowPrimary}}),n==="secondary"&&css({borderTopLeftRadius:t.borderRadiusMedium,borderBottomLeftRadius:t.borderRadiusMedium,backgroundColor:t.gray100}),(o||r||e)&&css({backgroundColor:hexToRGBA(t.gray900,.08),cursor:o?"grabbing":"grab"}))});var Q="div";function V(o,r){let e=T(),D=o,{as:n=Q,className:_,isActive:C,isFocused:w,isHovered:G,label:f,onBlur:u,onFocus:c,onMouseEnter:m,onMouseLeave:b,testId:N="cf-ui-drag-handle",style:R,variant:k="secondary"}=D,y=A(D,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","variant"]),[I,v]=useState(w),[S,H]=useState(G),B=useCallback(a=>{v(!0),c&&c(a);},[c]),U=useCallback(a=>{v(!1),u&&u(a);},[u]),$=useCallback(a=>{H(!0),m&&m(a);},[m]),j=useCallback(a=>{H(!1),b&&b(a);},[b]),E={className:cx(e.root({isActive:C,isFocused:I,isHovered:S,variant:k}),_),"data-test-id":N,onBlur:U,onFocus:B,onMouseEnter:$,onMouseLeave:j,ref:r,style:R};return n==="div"?s.createElement("div",g(i(i({},y),E),{role:"button",tabIndex:0}),s.createElement(DragIcon,{variant:"muted"}),s.createElement("span",{className:e.label},f)):s.createElement("button",g(i(i({},y),E),{type:"button"}),s.createElement(DragIcon,{variant:"muted"}),s.createElement("span",{className:e.label},f))}var W=s.forwardRef(V);
 
-export { Q as DragHandle };
+export { W as DragHandle };
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -33,2 +33,7 @@ import { ElementType } from 'react';
     type?: string;
+    /**
+     * Determines style variation
+     * @default secondary
+     */
+    variant?: 'secondary' | 'transparent';
 }
@@ -35,0 +40,0 @@ declare type DragHandleProps<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG> = PolymorphicProps<DragHandleInternalProps, E>;

dist/index.js

@@ -5,15 +5,16 @@ 'use strict';
 
-var a = require('react');
+var s = require('react');
 var emotion = require('emotion');
 var f36Icons = require('@contentful/f36-icons');
 var t = require('@contentful/f36-tokens');
+var f36Utils = require('@contentful/f36-utils');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var a__default = /*#__PURE__*/_interopDefaultLegacy(a);
+var s__default = /*#__PURE__*/_interopDefaultLegacy(s);
 var t__default = /*#__PURE__*/_interopDefaultLegacy(t);
 
-var $=Object.defineProperty,j=Object.defineProperties;var z=Object.getOwnPropertyDescriptors;var l=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?$(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,i=(o,r)=>{for(var e in r||(r={}))P.call(r,e)&&x(o,e,r[e]);if(l)for(var e of l(r))h.call(r,e)&&x(o,e,r[e]);return o},b=(o,r)=>j(o,z(r));var A=(o,r)=>{var e={};for(var n in o)P.call(o,n)&&r.indexOf(n)<0&&(e[n]=o[n]);if(o!=null&&l)for(var n of l(o))r.indexOf(n)<0&&h.call(o,n)&&(e[n]=o[n]);return e};var L=()=>({label:emotion.css({position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),root:({isActive:o,isFocused:r,isHovered:e})=>emotion.cx(emotion.css({alignItems:"center",backgroundColor:t__default["default"].gray100,border:0,borderBottomLeftRadius:t__default["default"].borderRadiusMedium,borderRight:`1px solid ${t__default["default"].gray200}`,borderTopLeftRadius:t__default["default"].borderRadiusMedium,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t__default["default"].transitionDurationDefault} ${t__default["default"].transitionEasingDefault}`,width:t__default["default"].spacingL,"&:hover":{backgroundColor:t__default["default"].gray200},"&:focus":{boxShadow:t__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t__default["default"].glowPrimary}}),(o||r||e)&&emotion.css({backgroundColor:t__default["default"].gray200,cursor:o?"grabbing":"grab"}))});var K="div";function O(o,r){let e=L(),D=o,{as:n=K,className:M,isActive:_,isFocused:w,isHovered:C,label:g,onBlur:p,onFocus:u,onMouseEnter:c,onMouseLeave:m,testId:G="cf-ui-drag-handle",style:N}=D,y=A(D,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style"]),[I,E]=a.useState(w),[R,H]=a.useState(C),S=a.useCallback(s=>{E(!0),u&&u(s);},[u]),k=a.useCallback(s=>{E(!1),p&&p(s);},[p]),B=a.useCallback(s=>{H(!0),c&&c(s);},[c]),U=a.useCallback(s=>{H(!1),m&&m(s);},[m]),v={className:emotion.cx(e.root({isActive:_,isFocused:I,isHovered:R}),M),"data-test-id":G,onBlur:k,onFocus:S,onMouseEnter:B,onMouseLeave:U,ref:r,style:N};return n==="div"?a__default["default"].createElement("div",b(i(i({},y),v),{role:"button",tabIndex:0}),a__default["default"].createElement(f36Icons.DragIcon,{variant:"muted"}),a__default["default"].createElement("span",{className:e.label},g)):a__default["default"].createElement("button",b(i(i({},y),v),{type:"button"}),a__default["default"].createElement(f36Icons.DragIcon,{variant:"muted"}),a__default["default"].createElement("span",{className:e.label},g))}var Q=a__default["default"].forwardRef(O);
+var z=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?z(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,i=(o,r)=>{for(var e in r||(r={}))P.call(r,e)&&x(o,e,r[e]);if(d)for(var e of d(r))h.call(r,e)&&x(o,e,r[e]);return o},g=(o,r)=>q(o,J(r));var A=(o,r)=>{var e={};for(var n in o)P.call(o,n)&&r.indexOf(n)<0&&(e[n]=o[n]);if(o!=null&&d)for(var n of d(o))r.indexOf(n)<0&&h.call(o,n)&&(e[n]=o[n]);return e};var T=()=>({label:emotion.css({position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),root:({isActive:o,isFocused:r,isHovered:e,variant:n})=>emotion.cx(emotion.css({alignItems:"center",backgroundColor:"transparent",border:0,borderRight:`1px solid ${t__default["default"].gray200}`,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t__default["default"].transitionDurationDefault} ${t__default["default"].transitionEasingDefault}`,width:t__default["default"].spacingL,"&:hover":{backgroundColor:f36Utils.hexToRGBA(t__default["default"].gray900,.08)},"&:focus":{boxShadow:t__default["default"].glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t__default["default"].glowPrimary}}),n==="secondary"&&emotion.css({borderTopLeftRadius:t__default["default"].borderRadiusMedium,borderBottomLeftRadius:t__default["default"].borderRadiusMedium,backgroundColor:t__default["default"].gray100}),(o||r||e)&&emotion.css({backgroundColor:f36Utils.hexToRGBA(t__default["default"].gray900,.08),cursor:o?"grabbing":"grab"}))});var Q="div";function V(o,r){let e=T(),D=o,{as:n=Q,className:_,isActive:C,isFocused:w,isHovered:G,label:f,onBlur:u,onFocus:c,onMouseEnter:m,onMouseLeave:b,testId:N="cf-ui-drag-handle",style:R,variant:k="secondary"}=D,y=A(D,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","variant"]),[I,v]=s.useState(w),[S,H]=s.useState(G),B=s.useCallback(a=>{v(!0),c&&c(a);},[c]),U=s.useCallback(a=>{v(!1),u&&u(a);},[u]),$=s.useCallback(a=>{H(!0),m&&m(a);},[m]),j=s.useCallback(a=>{H(!1),b&&b(a);},[b]),E={className:emotion.cx(e.root({isActive:C,isFocused:I,isHovered:S,variant:k}),_),"data-test-id":N,onBlur:U,onFocus:B,onMouseEnter:$,onMouseLeave:j,ref:r,style:R};return n==="div"?s__default["default"].createElement("div",g(i(i({},y),E),{role:"button",tabIndex:0}),s__default["default"].createElement(f36Icons.DragIcon,{variant:"muted"}),s__default["default"].createElement("span",{className:e.label},f)):s__default["default"].createElement("button",g(i(i({},y),E),{type:"button"}),s__default["default"].createElement(f36Icons.DragIcon,{variant:"muted"}),s__default["default"].createElement("span",{className:e.label},f))}var W=s__default["default"].forwardRef(V);
 
-exports.DragHandle = Q;
+exports.DragHandle = W;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-drag-handle",
-  "version": "4.39.0",
+  "version": "4.40.0",
   "description": "Forma 36: DragHandle component",
@@ -9,4 +9,5 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-core": "^4.39.0",
+    "@contentful/f36-core": "^4.40.0",
     "@contentful/f36-icons": "^4.23.2",
+    "@contentful/f36-utils": "^4.23.2",
     "@contentful/f36-tokens": "^4.0.1",
@@ -13,0 +14,0 @@ "emotion": "^10.0.17"

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

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

Improved metrics

Total package byte prevSize

29028

increased by6.73%

Lines of code

79

increased by9.72%

Worsened metrics

Dependency count

7

increased by16.67%

Number of lines in readme file

81

decreased by-7.95%

Dependency changes

• + Added@contentful/f36-utils@^4.23.2

• + Added@contentful/f36-utils@4.24.3(transitive)

• Updated@contentful/f36-core@^4.40.0