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

Comparing version 4.0.1-next-v4-6859.2287 to 4.0.1-next-v4-7604.2322

dist/main.js

@@ -1,2 +0,2 @@
-var e=c(require("@babel/runtime/helpers/extends")),{cx:r,css:o}=require("emotion"),t=require("react"),n=c(t),{forwardRef:i,useState:a,useCallback:s}=t,{usePrimitive:u}=require("@contentful/f36-core"),{DragIcon:d}=require("@contentful/f36-icons"),l=c(require("@contentful/f36-tokens"));function c(e){return e&&e.__esModule?e.default:e}var b,f,g,m,p={};b=p,f="DragHandle",g=()=>v,Object.defineProperty(b,f,{get:g,set:m,enumerable:!0,configurable:!0});const v=i((({className:t,isActive:i,isFocused:c,isHovered:b,label:f,onBlur:g,onFocus:m,onMouseEnter:p,onMouseLeave:v,testId:h="cf-ui-drag-handle",...x},y)=>{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:l.gray100,border:0,borderBottomLeftRadius:l.borderRadiusMedium,borderRight:`1px solid ${l.gray300}`,borderTopLeftRadius:l.borderRadiusMedium,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,position:"relative",transition:`background-color ${l.transitionDurationDefault} ${l.transitionEasingDefault}`,width:l.spacingL,"&:hover, &:focus":{backgroundColor:l.colorElementLight}},""),(e||t||n)&&o({backgroundColor:l.gray200,cursor:e?"grabbing":"grab"},""))},{primitiveProps:M,Element:k}=u(x),[q,L]=a(c),[R,C]=a(b),D=s((e=>{L(!0),m&&m(e)}),[m]),F=s((e=>{L(!1),g&&g(e)}),[g]),j=s((e=>{C(!0),p&&p(e)}),[p]),w=s((e=>{C(!1),v&&v(e)}),[v]);return n.createElement(k,e({as:"button"},M,{className:r(E.root({isActive:i,isFocused:q,isHovered:R}),t),onBlur:F,onFocus:D,onMouseEnter:j,onMouseLeave:w,testId:h,ref:y}),n.createElement(d,{variant:"muted"}),n.createElement("span",{className:E.label},f))}));var h,x;h=module.exports,x=p,Object.keys(x).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(h,e,{enumerable:!0,get:function(){return x[e]}})}));
+var e=l(require("@babel/runtime/helpers/extends")),{cx:r,css:o}=require("emotion"),t=require("react"),n=l(t),{useState:a,useCallback: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.gray300}`,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]=a(l),[D,L]=a(c),R=i((e=>{k(!0),f&&f(e)}),[f]),q=i((e=>{k(!1),g&&g(e)}),[g]),C=i((e=>{L(!0),m&&m(e)}),[m]),F=i((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]}})}));
 //# sourceMappingURL=main.js.map

dist/module.js

@@ -1,2 +0,2 @@
-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 i}from"react";import{usePrimitive as n}from"@contentful/f36-core";import{DragIcon as d}from"@contentful/f36-icons";import l from"@contentful/f36-tokens";var c,u,m,b;c={},u="DragHandle",m=()=>f,Object.defineProperty(c,u,{get:m,set:b,enumerable:!0,configurable:!0});const f=a((({className:a,isActive:c,isFocused:u,isHovered:m,label:b,onBlur:f,onFocus:g,onMouseEnter:p,onMouseLeave:v,testId:h="cf-ui-drag-handle",...x},E)=>{const y={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:l.gray100,border:0,borderBottomLeftRadius:l.borderRadiusMedium,borderRight:`1px solid ${l.gray300}`,borderTopLeftRadius:l.borderRadiusMedium,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,position:"relative",transition:`background-color ${l.transitionDurationDefault} ${l.transitionEasingDefault}`,width:l.spacingL,"&:hover, &:focus":{backgroundColor:l.colorElementLight}},""),(e||t||a)&&r({backgroundColor:l.gray200,cursor:e?"grabbing":"grab"},""))},{primitiveProps:k,Element:D}=n(x),[L,M]=s(u),[R,C]=s(m),F=i((e=>{M(!0),g&&g(e)}),[g]),H=i((e=>{M(!1),f&&f(e)}),[f]),w=i((e=>{C(!0),p&&p(e)}),[p]),I=i((e=>{C(!1),v&&v(e)}),[v]);return t.createElement(D,e({as:"button"},k,{className:o(y.root({isActive:c,isFocused:L,isHovered:R}),a),onBlur:H,onFocus:F,onMouseEnter:w,onMouseLeave:I,testId:h,ref:E}),t.createElement(d,{variant:"muted"}),t.createElement("span",{className:y.label},b))}));export{f as DragHandle};
+import e from"@babel/runtime/helpers/esm/extends";import{cx as o,css as r}from"emotion";import t,{useCallback as a,useState as s,forwardRef 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=n((({className:n,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.gray300}`,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=a((e=>{k(!0),g&&g(e)}),[g]),R=a((e=>{k(!1),m&&m(e)}),[m]),C=a((e=>{L(!0),f&&f(e)}),[f]),F=a((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}),n),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};
 //# sourceMappingURL=module.js.map

dist/types.d.ts

 import React from "react";
-import { PolymorphicComponentProps, PolymorphicComponent, CommonProps } from "@contentful/f36-core";
-declare const DEFAULT_TAG = "button";
+import { PropsWithHTMLElement, CommonProps } from "@contentful/f36-core";
 type DragHandleInternalProps = CommonProps & {
@@ -24,5 +23,24 @@ /**
 };
-export type DragHandleProps<E extends React.ElementType> = PolymorphicComponentProps<E, DragHandleInternalProps>;
-export const DragHandle: PolymorphicComponent<DragHandleInternalProps, typeof DEFAULT_TAG>;
+export type DragHandleProps = PropsWithHTMLElement<DragHandleInternalProps, 'button'>;
+export const DragHandle: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>>, never>, "label" | keyof CommonProps | "isActive" | "isFocused" | "isHovered"> & CommonProps & {
+    /**
+     * Applies styling for when the component is actively being dragged by
+     * the user
+     */
+    isActive?: boolean;
+    /**
+     * Applies focus styling
+     */
+    isFocused?: boolean;
+    /**
+     * Applies hover styling
+     */
+    isHovered?: boolean;
+    /**
+     * Label rendered in DragHandle - not visible on screen as its purpose
+     * is for screen readers only
+     */
+    label: string;
+} & React.RefAttributes<HTMLButtonElement>>;
 
 //# sourceMappingURL=types.d.ts.map

package.json

 {
   "name": "@contentful/f36-drag-handle",
-  "version": "4.0.1-next-v4-6859.2287+1c884886",
+  "version": "4.0.1-next-v4-7604.2322+0bee7360",
   "description": "Forma 36: DragHandle component",
@@ -10,5 +10,5 @@ "scripts": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "4.0.1-next-v4-6859.2287+1c884886",
-    "@contentful/f36-icons": "4.0.1-next-v4-6859.2287+1c884886",
-    "@contentful/f36-tokens": "4.0.1-next-v4-6859.2287+1c884886",
+    "@contentful/f36-core": "4.0.1-next-v4-7604.2322+0bee7360",
+    "@contentful/f36-icons": "4.0.1-next-v4-7604.2322+0bee7360",
+    "@contentful/f36-tokens": "4.0.1-next-v4-7604.2322+0bee7360",
     "emotion": "^10.0.17"
@@ -37,3 +37,3 @@ },
   },
-  "gitHead": "1c884886dfbd1a17e16a1c06523e23861922e466"
+  "gitHead": "0bee7360d2456674a913f221d51a3b08d75a14bb"
 }

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

Improved metrics

Total package byte prevSize

41541

increased by0.09%

Lines of code

229

increased by6.51%

Dependency changes

• Updated@contentful/f36-core@4.0.1-next-v4-7604.2322+0bee7360

• Updated@contentful/f36-icons@4.0.1-next-v4-7604.2322+0bee7360

• Updated@contentful/f36-tokens@4.0.1-next-v4-7604.2322+0bee7360