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

Comparing version 4.0.1-next-v4-9789.2434 to 4.0.1-next-v4-9898.2438

dist/main.js

@@ -1,2 +0,106 @@
-var e=l(require("@babel/runtime/helpers/extends")),{cx:r,css:o}=require("emotion"),t=require("react"),n=l(t),{useCallback:a,useState:i,forwardRef:s}=t,{DragIcon:u}=require("@contentful/f36-icons"),d=l(require("@contentful/f36-tokens"));function l(e){return e&&e.__esModule?e.default:e}var c,b,g,f,m={};c=m,b="DragHandle",g=()=>p,Object.defineProperty(c,b,{get:g,set:f,enumerable:!0,configurable:!0});const p=s((({className:t,isActive:s,isFocused:l,isHovered:c,label:b,onBlur:g,onFocus:f,onMouseEnter:m,onMouseLeave:p,testId:v="cf-ui-drag-handle",style:y,...h},x)=>{const E={label:o({name:"1b512s9",styles:"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;"}),root:({isActive:e,isFocused:t,isHovered:n})=>r(o({alignItems:"center",backgroundColor:d.gray100,border:0,borderBottomLeftRadius:d.borderRadiusMedium,borderRight:`1px solid ${d.gray200}`,borderTopLeftRadius:d.borderRadiusMedium,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,position:"relative",transition:`background-color ${d.transitionDurationDefault} ${d.transitionEasingDefault}`,width:d.spacingL,"&:hover, &:focus":{backgroundColor:d.colorElementLight}},""),(e||t||n)&&o({backgroundColor:d.gray200,cursor:e?"grabbing":"grab"},""))},[M,k]=i(l),[D,L]=i(c),R=a((e=>{k(!0),f&&f(e)}),[f]),q=a((e=>{k(!1),g&&g(e)}),[g]),C=a((e=>{L(!0),m&&m(e)}),[m]),F=a((e=>{L(!1),p&&p(e)}),[p]);return n.createElement("button",e({type:"button"},h,{className:r(E.root({isActive:s,isFocused:M,isHovered:D}),t),onBlur:q,onFocus:R,onMouseEnter:C,onMouseLeave:F,"data-test-id":v,ref:x,style:y}),n.createElement(u,{variant:"muted"}),n.createElement("span",{className:E.label},b))}));var v,y;p.displayName="DragHandle",v=module.exports,y=m,Object.keys(y).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(v,e,{enumerable:!0,get:function(){return y[e]}})}));
+var $9zqHf$emotion = require("emotion");
+var $9zqHf$react = require("react");
+var $9zqHf$contentfulf36icons = require("@contentful/f36-icons");
+var $9zqHf$contentfulf36tokens = require("@contentful/f36-tokens");
+
+function $parcel$export(e, n, v, s) {
+  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
+}
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
+
+$parcel$export(module.exports, "DragHandle", () => $7340ff11beb99de7$export$a0c24614540b0efb);
+
+
+
+
+
+
+const $590c5f6da3a22459$export$ffd58b7f6f099a57 = ()=>({
+        label: /*#__PURE__*/ $9zqHf$emotion.css({
+            name: "1b512s9",
+            styles: "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;"
+        }),
+        root: ({ isActive: isActive , isFocused: isFocused , isHovered: isHovered  })=>{
+            return $9zqHf$emotion.cx(/*#__PURE__*/ $9zqHf$emotion.css({
+                alignItems: 'center',
+                backgroundColor: $parcel$interopDefault($9zqHf$contentfulf36tokens).gray100,
+                border: 0,
+                borderBottomLeftRadius: $parcel$interopDefault($9zqHf$contentfulf36tokens).borderRadiusMedium,
+                borderRight: `1px solid ${$parcel$interopDefault($9zqHf$contentfulf36tokens).gray200}`,
+                borderTopLeftRadius: $parcel$interopDefault($9zqHf$contentfulf36tokens).borderRadiusMedium,
+                boxSizing: 'border-box',
+                display: 'flex',
+                justifyContent: 'center',
+                padding: 0,
+                position: 'relative',
+                transition: `background-color ${$parcel$interopDefault($9zqHf$contentfulf36tokens).transitionDurationDefault} ${$parcel$interopDefault($9zqHf$contentfulf36tokens).transitionEasingDefault}`,
+                width: $parcel$interopDefault($9zqHf$contentfulf36tokens).spacingL,
+                '&:hover, &:focus': {
+                    backgroundColor: $parcel$interopDefault($9zqHf$contentfulf36tokens).colorElementLight
+                }
+            }), (isActive || isFocused || isHovered) && /*#__PURE__*/ $9zqHf$emotion.css({
+                backgroundColor: $parcel$interopDefault($9zqHf$contentfulf36tokens).gray200,
+                cursor: isActive ? 'grabbing' : 'grab'
+            }));
+        }
+    })
+;
+
+
+const $7340ff11beb99de7$export$a0c24614540b0efb = /*#__PURE__*/ $9zqHf$react.forwardRef(({ className: className , isActive: isActive , isFocused: isFocusedProp , isHovered: isHoveredProp , label: label , onBlur: onBlur , onFocus: onFocus , onMouseEnter: onMouseEnter , onMouseLeave: onMouseLeave , testId: testId = 'cf-ui-drag-handle' , style: style , ...otherProps }, forwardedRef)=>{
+    const styles = $590c5f6da3a22459$export$ffd58b7f6f099a57();
+    const [isFocused, setisFocused] = $9zqHf$react.useState(isFocusedProp);
+    const [isHovered, setisHovered] = $9zqHf$react.useState(isHoveredProp);
+    const handleFocus = $9zqHf$react.useCallback((event)=>{
+        setisFocused(true);
+        if (onFocus) onFocus(event);
+    }, [
+        onFocus
+    ]);
+    const handleBlur = $9zqHf$react.useCallback((event)=>{
+        setisFocused(false);
+        if (onBlur) onBlur(event);
+    }, [
+        onBlur
+    ]);
+    const handleMouseEnter = $9zqHf$react.useCallback((event)=>{
+        setisHovered(true);
+        if (onMouseEnter) onMouseEnter(event);
+    }, [
+        onMouseEnter
+    ]);
+    const handleMouseLeave = $9zqHf$react.useCallback((event)=>{
+        setisHovered(false);
+        if (onMouseLeave) onMouseLeave(event);
+    }, [
+        onMouseLeave
+    ]);
+    return(/*#__PURE__*/ $parcel$interopDefault($9zqHf$react).createElement("button", {
+        type: "button",
+        ...otherProps,
+        className: $9zqHf$emotion.cx(styles.root({
+            isActive: isActive,
+            isFocused: isFocused,
+            isHovered: isHovered
+        }), className),
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "data-test-id": testId,
+        ref: forwardedRef,
+        style: style
+    }, /*#__PURE__*/ $parcel$interopDefault($9zqHf$react).createElement($9zqHf$contentfulf36icons.DragIcon, {
+        variant: "muted"
+    }), /*#__PURE__*/ $parcel$interopDefault($9zqHf$react).createElement("span", {
+        className: styles.label
+    }, label)));
+});
+$7340ff11beb99de7$export$a0c24614540b0efb.displayName = 'DragHandle';
+
+
+
+
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,99 @@
-import e from"@babel/runtime/helpers/esm/extends";import{cx as o,css as r}from"emotion";import t,{forwardRef as a,useState as s,useCallback as n}from"react";import{DragIcon as i}from"@contentful/f36-icons";import d from"@contentful/f36-tokens";var l,c,u,b;l={},c="DragHandle",u=()=>m,Object.defineProperty(l,c,{get:u,set:b,enumerable:!0,configurable:!0});const m=a((({className:a,isActive:l,isFocused:c,isHovered:u,label:b,onBlur:m,onFocus:g,onMouseEnter:f,onMouseLeave:p,testId:v="cf-ui-drag-handle",style:y,...h},x)=>{const D={label:r({name:"1b512s9",styles:"position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;"}),root:({isActive:e,isFocused:t,isHovered:a})=>o(r({alignItems:"center",backgroundColor:d.gray100,border:0,borderBottomLeftRadius:d.borderRadiusMedium,borderRight:`1px solid ${d.gray200}`,borderTopLeftRadius:d.borderRadiusMedium,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,position:"relative",transition:`background-color ${d.transitionDurationDefault} ${d.transitionEasingDefault}`,width:d.spacingL,"&:hover, &:focus":{backgroundColor:d.colorElementLight}},""),(e||t||a)&&r({backgroundColor:d.gray200,cursor:e?"grabbing":"grab"},""))},[E,k]=s(c),[H,L]=s(u),M=n((e=>{k(!0),g&&g(e)}),[g]),R=n((e=>{k(!1),m&&m(e)}),[m]),C=n((e=>{L(!0),f&&f(e)}),[f]),F=n((e=>{L(!1),p&&p(e)}),[p]);return t.createElement("button",e({type:"button"},h,{className:o(D.root({isActive:l,isFocused:E,isHovered:H}),a),onBlur:R,onFocus:M,onMouseEnter:C,onMouseLeave:F,"data-test-id":v,ref:x,style:y}),t.createElement(i,{variant:"muted"}),t.createElement("span",{className:D.label},b))}));m.displayName="DragHandle";export{m as DragHandle};
+import {cx as $8USmO$cx, css as $8USmO$css} from "emotion";
+import $8USmO$react, {forwardRef as $8USmO$forwardRef, useState as $8USmO$useState, useCallback as $8USmO$useCallback} from "react";
+import {DragIcon as $8USmO$DragIcon} from "@contentful/f36-icons";
+import $8USmO$contentfulf36tokens from "@contentful/f36-tokens";
+
+
+
+
+
+
+
+const $1282af47e008eae6$export$ffd58b7f6f099a57 = ()=>({
+        label: /*#__PURE__*/ $8USmO$css({
+            name: "1b512s9",
+            styles: "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;"
+        }),
+        root: ({ isActive: isActive , isFocused: isFocused , isHovered: isHovered  })=>{
+            return $8USmO$cx(/*#__PURE__*/ $8USmO$css({
+                alignItems: 'center',
+                backgroundColor: $8USmO$contentfulf36tokens.gray100,
+                border: 0,
+                borderBottomLeftRadius: $8USmO$contentfulf36tokens.borderRadiusMedium,
+                borderRight: `1px solid ${$8USmO$contentfulf36tokens.gray200}`,
+                borderTopLeftRadius: $8USmO$contentfulf36tokens.borderRadiusMedium,
+                boxSizing: 'border-box',
+                display: 'flex',
+                justifyContent: 'center',
+                padding: 0,
+                position: 'relative',
+                transition: `background-color ${$8USmO$contentfulf36tokens.transitionDurationDefault} ${$8USmO$contentfulf36tokens.transitionEasingDefault}`,
+                width: $8USmO$contentfulf36tokens.spacingL,
+                '&:hover, &:focus': {
+                    backgroundColor: $8USmO$contentfulf36tokens.colorElementLight
+                }
+            }), (isActive || isFocused || isHovered) && /*#__PURE__*/ $8USmO$css({
+                backgroundColor: $8USmO$contentfulf36tokens.gray200,
+                cursor: isActive ? 'grabbing' : 'grab'
+            }));
+        }
+    })
+;
+
+
+const $0d6e001a91dc675e$export$a0c24614540b0efb = /*#__PURE__*/ $8USmO$forwardRef(({ className: className , isActive: isActive , isFocused: isFocusedProp , isHovered: isHoveredProp , label: label , onBlur: onBlur , onFocus: onFocus , onMouseEnter: onMouseEnter , onMouseLeave: onMouseLeave , testId: testId = 'cf-ui-drag-handle' , style: style , ...otherProps }, forwardedRef)=>{
+    const styles = $1282af47e008eae6$export$ffd58b7f6f099a57();
+    const [isFocused, setisFocused] = $8USmO$useState(isFocusedProp);
+    const [isHovered, setisHovered] = $8USmO$useState(isHoveredProp);
+    const handleFocus = $8USmO$useCallback((event)=>{
+        setisFocused(true);
+        if (onFocus) onFocus(event);
+    }, [
+        onFocus
+    ]);
+    const handleBlur = $8USmO$useCallback((event)=>{
+        setisFocused(false);
+        if (onBlur) onBlur(event);
+    }, [
+        onBlur
+    ]);
+    const handleMouseEnter = $8USmO$useCallback((event)=>{
+        setisHovered(true);
+        if (onMouseEnter) onMouseEnter(event);
+    }, [
+        onMouseEnter
+    ]);
+    const handleMouseLeave = $8USmO$useCallback((event)=>{
+        setisHovered(false);
+        if (onMouseLeave) onMouseLeave(event);
+    }, [
+        onMouseLeave
+    ]);
+    return(/*#__PURE__*/ $8USmO$react.createElement("button", {
+        type: "button",
+        ...otherProps,
+        className: $8USmO$cx(styles.root({
+            isActive: isActive,
+            isFocused: isFocused,
+            isHovered: isHovered
+        }), className),
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        "data-test-id": testId,
+        ref: forwardedRef,
+        style: style
+    }, /*#__PURE__*/ $8USmO$react.createElement($8USmO$DragIcon, {
+        variant: "muted"
+    }), /*#__PURE__*/ $8USmO$react.createElement("span", {
+        className: styles.label
+    }, label)));
+});
+$0d6e001a91dc675e$export$a0c24614540b0efb.displayName = 'DragHandle';
+
+
+
+
+export {$0d6e001a91dc675e$export$a0c24614540b0efb as DragHandle};
 //# sourceMappingURL=module.js.map

package.json

 {
   "name": "@contentful/f36-drag-handle",
-  "version": "4.0.1-next-v4-9789.2434+754dee05",
+  "version": "4.0.1-next-v4-9898.2438+c14d4c99",
   "description": "Forma 36: DragHandle component",
   "scripts": {
-    "build": "parcel build index.ts"
+    "build": "parcel build"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "4.0.1-next-v4-9789.2434+754dee05",
-    "@contentful/f36-icons": "4.0.1-next-v4-9789.2434+754dee05",
-    "@contentful/f36-tokens": "4.0.1-next-v4-9789.2434+754dee05",
+    "@contentful/f36-core": "4.0.1-next-v4-9898.2438+c14d4c99",
+    "@contentful/f36-icons": "4.0.1-next-v4-9898.2438+c14d4c99",
+    "@contentful/f36-tokens": "4.0.1-next-v4-9898.2438+c14d4c99",
     "emotion": "^10.0.17"
@@ -36,3 +36,3 @@ },
   },
-  "gitHead": "754dee05f9e188f1492231120e4449a9e4f1992d"
+  "gitHead": "c14d4c99c0a87c8905dbe90d5f1dc38dd12d1008"
 }

README.md

 # @contentful/f36-drag-handle
 
 This package is part of the pre-release. This means it is unsupported and subject to breaking changes without warning.
-Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components)
+
+Please use official, supported version of the library [forma-36](https://github.com/contentful/forma-36/tree/master/packages/forma-36-react-components), [NPM](https://www.npmjs.com/package/@contentful/forma-36-react-components).

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

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

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Minified code

Quality

This package contains minified code. This may be harmless in some cases where minified code is included in packaged libraries, however packages on npm should not minify code.

Found 1 instance in 1 package

Improved metrics

Lines of code

392

increased by71.18%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

6

increased by20%

Worsened metrics

Total package byte prevSize

33899

decreased by-18.35%

Dependency changes

• Updated@contentful/f36-core@4.0.1-next-v4-9898.2438+c14d4c99

• Updated@contentful/f36-icons@4.0.1-next-v4-9898.2438+c14d4c99

• Updated@contentful/f36-tokens@4.0.1-next-v4-9898.2438+c14d4c99