@contentful/f36-pill - npm Package Compare versions

Comparing version 4.40.7 to 4.41.0

dist/esm/index.js

@@ -1,12 +0,13 @@
-import n from 'react';
+import l from 'react';
 import { cx, css } from 'emotion';
 import { Tooltip } from '@contentful/f36-tooltip';
-import { DragIcon, CloseIcon } from '@contentful/f36-icons';
+import { CloseIcon } from '@contentful/f36-icons';
 import { Button } from '@contentful/f36-button';
+import { DragHandle } from '@contentful/f36-drag-handle';
 import o from '@contentful/f36-tokens';
 
-var E=Object.defineProperty;var s=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var f=(t,e,r)=>e in t?E(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,p=(t,e)=>{for(var r in e||(e={}))P.call(e,r)&&f(t,r,e[r]);if(s)for(var r of s(e))y.call(e,r)&&f(t,r,e[r]);return t};var b=(t,e)=>{var r={};for(var a in t)P.call(t,a)&&e.indexOf(a)<0&&(r[a]=t[a]);if(t!=null&&s)for(var a of s(t))e.indexOf(a)<0&&y.call(t,a)&&(r[a]=t[a]);return r};var H=()=>css({borderLeft:`1px solid ${o.gray400}`,borderTopLeftRadius:0,borderBottomLeftRadius:0,padding:o.spacingXs,minHeight:"auto",transition:`background ${o.transitionDurationShort} ${o.transitionEasingDefault},
-    opacity ${o.transitionDurationDefault} ${o.transitionEasingDefault}`,"&:focus":{boxShadow:o.glowMuted,borderLeftColor:o.gray300},"&:hover, &:focus, &:active":{backgroundColor:o.gray300}}),L=()=>css({color:o.gray700,lineHeight:o.lineHeightM,padding:o.spacingXs,fontSize:o.fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"}),N=t=>{let e=r=>{switch(r){case"active":return {background:o.gray300};case"deleted":return {background:o.gray200,textDecoration:"line-through",opacity:"0.5"};default:return {background:o.gray200}}};return css(p({display:"inline-flex",fontFamily:o.fontStackPrimary,alignItems:"center",borderRadius:o.borderRadiusSmall,border:"none",padding:0,maxWidth:"100%"},e(t)))};function h(t){return {closeButton:H(),label:L(),icon:css({fill:o.gray600,verticalAlign:"middle",outline:"none"}),dragIcon:css({padding:o.spacingXs,paddingRight:0,cursor:"move"}),pill:N(t)}}var v=n.forwardRef((t,e)=>{let g=t,{label:r,onClose:a,testId:x="cf-ui-pill",onDrag:d,className:C,dragHandleComponent:c,variant:D="idle"}=g,S=b(g,["label","onClose","testId","onDrag","className","dragHandleComponent","variant"]),l=h(D),[I,m]=n.useState(!1),k=n.useCallback(u=>{if(!u)return;let{scrollWidth:T,offsetWidth:w}=u.parentElement;m(T>w);},[m]);return n.createElement("div",p({className:cx(l.pill,C),"data-test-id":x,onDrag:d,ref:e},S),d&&(c||n.createElement("span",{"aria-label":"Drag handler",className:l.dragIcon},n.createElement(DragIcon,{className:l.icon,variant:"muted"}))),n.createElement(Tooltip,{content:r,maxWidth:"none",targetWrapperClassName:l.label,isDisabled:!I},n.createElement("span",{ref:k},r)),a&&n.createElement(Button,{type:"button",variant:"transparent",startIcon:n.createElement(CloseIcon,{"aria-label":"Close"}),"aria-label":"Close",onClick:a,className:l.closeButton}))});v.displayName="Pill";
+var L=Object.defineProperty;var n=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var P=(t,e,r)=>e in t?L(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))b.call(e,r)&&P(t,r,e[r]);if(n)for(var r of n(e))y.call(e,r)&&P(t,r,e[r]);return t};var h=(t,e)=>{var r={};for(var a in t)b.call(t,a)&&e.indexOf(a)<0&&(r[a]=t[a]);if(t!=null&&n)for(var a of n(t))e.indexOf(a)<0&&y.call(t,a)&&(r[a]=t[a]);return r};var I=()=>css({borderLeft:`1px solid ${o.gray400}`,borderTopLeftRadius:0,borderBottomLeftRadius:0,padding:o.spacingXs,minHeight:"auto",transition:`background ${o.transitionDurationShort} ${o.transitionEasingDefault},
+    opacity ${o.transitionDurationDefault} ${o.transitionEasingDefault}`,"&:focus":{boxShadow:o.glowMuted,borderLeftColor:o.gray300},"&:hover, &:focus, &:active":{backgroundColor:o.gray300}}),M=()=>css({color:o.gray700,lineHeight:o.lineHeightM,padding:o.spacingXs,fontSize:o.fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"}),W=t=>{let e=r=>{switch(r){case"active":return {background:o.gray300};case"deleted":return {background:o.gray200,textDecoration:"line-through",opacity:"0.5"};default:return {background:o.gray200}}};return css(i({display:"inline-flex",fontFamily:o.fontStackPrimary,alignItems:"center",borderRadius:o.borderRadiusSmall,border:"none",padding:0,maxWidth:"100%"},e(t)))};function x(t){return {closeButton:I(),label:M(),icon:css({fill:o.gray600,verticalAlign:"middle",outline:"none"}),pill:W(t)}}var v=l.forwardRef((t,e)=>{let g=t,{isDraggable:r,label:a,onClose:d,testId:C="cf-ui-pill",onDrag:m,className:D,dragHandleComponent:c,variant:S="idle"}=g,k=h(g,["isDraggable","label","onClose","testId","onDrag","className","dragHandleComponent","variant"]),p=x(S),[H,f]=l.useState(!1),T=l.useCallback(u=>{if(!u)return;let{scrollWidth:w,offsetWidth:E}=u.parentElement;f(w>E);},[f]);return l.createElement("div",i({className:cx(p.pill,D),"data-test-id":C,onDrag:m,ref:e},k),(r||m)&&(c||l.createElement(DragHandle,{label:"Reorder item",variant:"transparent"})),l.createElement(Tooltip,{content:a,maxWidth:"none",targetWrapperClassName:p.label,isDisabled:!H},l.createElement("span",{ref:T},a)),d&&l.createElement(Button,{type:"button",variant:"transparent",startIcon:l.createElement(CloseIcon,null),"aria-label":"Close",onClick:d,className:p.closeButton}))});v.displayName="Pill";
 
 export { v as Pill };
 //# sourceMappingURL=index.js.map

dist/index.d.ts

@@ -8,2 +8,6 @@ import React from 'react';
     /**
+     * Mark the pill as draggable. Drag icon is rendered when this property is set.
+     */
+    isDraggable?: boolean;
+    /**
      * Text that will be shown on the pill
@@ -17,3 +21,3 @@ */
     /**
-     * Function that handles when the pill is dragged. Drag icon visibility depends on if this property is set.
+     * Function that handles when the pill is dragged. Drag icon is rendered when this property is set.
      */
@@ -32,4 +36,8 @@ onDrag?: () => void;
 declare type PillProps = PropsWithHTMLElement<PillInternalProps, 'div'>;
-declare const Pill: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, "label" | "onDrag" | keyof CommonProps | "onClose" | "dragHandleComponent" | "variant"> & CommonProps & {
+declare const Pill: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, "label" | "onDrag" | keyof CommonProps | "isDraggable" | "onClose" | "dragHandleComponent" | "variant"> & CommonProps & {
     /**
+     * Mark the pill as draggable. Drag icon is rendered when this property is set.
+     */
+    isDraggable?: boolean;
+    /**
      * Text that will be shown on the pill
@@ -43,3 +51,3 @@ */
     /**
-     * Function that handles when the pill is dragged. Drag icon visibility depends on if this property is set.
+     * Function that handles when the pill is dragged. Drag icon is rendered when this property is set.
      */
@@ -46,0 +54,0 @@ onDrag?: () => void;

dist/index.js

@@ -5,3 +5,3 @@ 'use strict';
 
-var n = require('react');
+var l = require('react');
 var emotion = require('emotion');
@@ -11,2 +11,3 @@ var f36Tooltip = require('@contentful/f36-tooltip');
 var f36Button = require('@contentful/f36-button');
+var f36DragHandle = require('@contentful/f36-drag-handle');
 var o = require('@contentful/f36-tokens');
@@ -16,9 +17,9 @@
 
-var n__default = /*#__PURE__*/_interopDefaultLegacy(n);
+var l__default = /*#__PURE__*/_interopDefaultLegacy(l);
 var o__default = /*#__PURE__*/_interopDefaultLegacy(o);
 
-var E=Object.defineProperty;var s=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var f=(t,e,r)=>e in t?E(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,p=(t,e)=>{for(var r in e||(e={}))P.call(e,r)&&f(t,r,e[r]);if(s)for(var r of s(e))y.call(e,r)&&f(t,r,e[r]);return t};var b=(t,e)=>{var r={};for(var a in t)P.call(t,a)&&e.indexOf(a)<0&&(r[a]=t[a]);if(t!=null&&s)for(var a of s(t))e.indexOf(a)<0&&y.call(t,a)&&(r[a]=t[a]);return r};var H=()=>emotion.css({borderLeft:`1px solid ${o__default["default"].gray400}`,borderTopLeftRadius:0,borderBottomLeftRadius:0,padding:o__default["default"].spacingXs,minHeight:"auto",transition:`background ${o__default["default"].transitionDurationShort} ${o__default["default"].transitionEasingDefault},
-    opacity ${o__default["default"].transitionDurationDefault} ${o__default["default"].transitionEasingDefault}`,"&:focus":{boxShadow:o__default["default"].glowMuted,borderLeftColor:o__default["default"].gray300},"&:hover, &:focus, &:active":{backgroundColor:o__default["default"].gray300}}),L=()=>emotion.css({color:o__default["default"].gray700,lineHeight:o__default["default"].lineHeightM,padding:o__default["default"].spacingXs,fontSize:o__default["default"].fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"}),N=t=>{let e=r=>{switch(r){case"active":return {background:o__default["default"].gray300};case"deleted":return {background:o__default["default"].gray200,textDecoration:"line-through",opacity:"0.5"};default:return {background:o__default["default"].gray200}}};return emotion.css(p({display:"inline-flex",fontFamily:o__default["default"].fontStackPrimary,alignItems:"center",borderRadius:o__default["default"].borderRadiusSmall,border:"none",padding:0,maxWidth:"100%"},e(t)))};function h(t){return {closeButton:H(),label:L(),icon:emotion.css({fill:o__default["default"].gray600,verticalAlign:"middle",outline:"none"}),dragIcon:emotion.css({padding:o__default["default"].spacingXs,paddingRight:0,cursor:"move"}),pill:N(t)}}var v=n__default["default"].forwardRef((t,e)=>{let g=t,{label:r,onClose:a,testId:x="cf-ui-pill",onDrag:d,className:C,dragHandleComponent:c,variant:D="idle"}=g,S=b(g,["label","onClose","testId","onDrag","className","dragHandleComponent","variant"]),l=h(D),[I,m]=n__default["default"].useState(!1),k=n__default["default"].useCallback(u=>{if(!u)return;let{scrollWidth:T,offsetWidth:w}=u.parentElement;m(T>w);},[m]);return n__default["default"].createElement("div",p({className:emotion.cx(l.pill,C),"data-test-id":x,onDrag:d,ref:e},S),d&&(c||n__default["default"].createElement("span",{"aria-label":"Drag handler",className:l.dragIcon},n__default["default"].createElement(f36Icons.DragIcon,{className:l.icon,variant:"muted"}))),n__default["default"].createElement(f36Tooltip.Tooltip,{content:r,maxWidth:"none",targetWrapperClassName:l.label,isDisabled:!I},n__default["default"].createElement("span",{ref:k},r)),a&&n__default["default"].createElement(f36Button.Button,{type:"button",variant:"transparent",startIcon:n__default["default"].createElement(f36Icons.CloseIcon,{"aria-label":"Close"}),"aria-label":"Close",onClick:a,className:l.closeButton}))});v.displayName="Pill";
+var L=Object.defineProperty;var n=Object.getOwnPropertySymbols;var b=Object.prototype.hasOwnProperty,y=Object.prototype.propertyIsEnumerable;var P=(t,e,r)=>e in t?L(t,e,{enumerable:!0,configurable:!0,writable:!0,value:r}):t[e]=r,i=(t,e)=>{for(var r in e||(e={}))b.call(e,r)&&P(t,r,e[r]);if(n)for(var r of n(e))y.call(e,r)&&P(t,r,e[r]);return t};var h=(t,e)=>{var r={};for(var a in t)b.call(t,a)&&e.indexOf(a)<0&&(r[a]=t[a]);if(t!=null&&n)for(var a of n(t))e.indexOf(a)<0&&y.call(t,a)&&(r[a]=t[a]);return r};var I=()=>emotion.css({borderLeft:`1px solid ${o__default["default"].gray400}`,borderTopLeftRadius:0,borderBottomLeftRadius:0,padding:o__default["default"].spacingXs,minHeight:"auto",transition:`background ${o__default["default"].transitionDurationShort} ${o__default["default"].transitionEasingDefault},
+    opacity ${o__default["default"].transitionDurationDefault} ${o__default["default"].transitionEasingDefault}`,"&:focus":{boxShadow:o__default["default"].glowMuted,borderLeftColor:o__default["default"].gray300},"&:hover, &:focus, &:active":{backgroundColor:o__default["default"].gray300}}),M=()=>emotion.css({color:o__default["default"].gray700,lineHeight:o__default["default"].lineHeightM,padding:o__default["default"].spacingXs,fontSize:o__default["default"].fontSizeM,flexGrow:2,whiteSpace:"nowrap",textOverflow:"ellipsis",overflow:"hidden"}),W=t=>{let e=r=>{switch(r){case"active":return {background:o__default["default"].gray300};case"deleted":return {background:o__default["default"].gray200,textDecoration:"line-through",opacity:"0.5"};default:return {background:o__default["default"].gray200}}};return emotion.css(i({display:"inline-flex",fontFamily:o__default["default"].fontStackPrimary,alignItems:"center",borderRadius:o__default["default"].borderRadiusSmall,border:"none",padding:0,maxWidth:"100%"},e(t)))};function x(t){return {closeButton:I(),label:M(),icon:emotion.css({fill:o__default["default"].gray600,verticalAlign:"middle",outline:"none"}),pill:W(t)}}var v=l__default["default"].forwardRef((t,e)=>{let g=t,{isDraggable:r,label:a,onClose:d,testId:C="cf-ui-pill",onDrag:m,className:D,dragHandleComponent:c,variant:S="idle"}=g,k=h(g,["isDraggable","label","onClose","testId","onDrag","className","dragHandleComponent","variant"]),p=x(S),[H,f]=l__default["default"].useState(!1),T=l__default["default"].useCallback(u=>{if(!u)return;let{scrollWidth:w,offsetWidth:E}=u.parentElement;f(w>E);},[f]);return l__default["default"].createElement("div",i({className:emotion.cx(p.pill,D),"data-test-id":C,onDrag:m,ref:e},k),(r||m)&&(c||l__default["default"].createElement(f36DragHandle.DragHandle,{label:"Reorder item",variant:"transparent"})),l__default["default"].createElement(f36Tooltip.Tooltip,{content:a,maxWidth:"none",targetWrapperClassName:p.label,isDisabled:!H},l__default["default"].createElement("span",{ref:T},a)),d&&l__default["default"].createElement(f36Button.Button,{type:"button",variant:"transparent",startIcon:l__default["default"].createElement(f36Icons.CloseIcon,null),"aria-label":"Close",onClick:d,className:p.closeButton}))});v.displayName="Pill";
 
 exports.Pill = v;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "@contentful/f36-pill",
-  "version": "4.40.7",
+  "version": "4.41.0",
   "description": "Forma 36: Pill component",
@@ -9,7 +9,8 @@ "scripts": {
   "dependencies": {
-    "@contentful/f36-button": "^4.40.7",
-    "@contentful/f36-core": "^4.40.7",
+    "@contentful/f36-button": "^4.41.0",
+    "@contentful/f36-core": "^4.41.0",
+    "@contentful/f36-drag-handle": "^4.41.0",
     "@contentful/f36-icons": "^4.23.2",
     "@contentful/f36-tokens": "^4.0.1",
-    "@contentful/f36-tooltip": "^4.40.7",
+    "@contentful/f36-tooltip": "^4.41.0",
     "emotion": "^10.0.17"
@@ -16,0 +17,0 @@ },

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

Lines of code

104

increased by8.33%

Worsened metrics

Total package byte prevSize

26785

decreased by-0.24%

Dependency count

9

increased by12.5%

Dependency changes

• + Added@contentful/f36-drag-handle@^4.41.0

• + Added@contentful/f36-drag-handle@4.75.2(transitive)

• Updated@contentful/f36-button@^4.41.0

• Updated@contentful/f36-core@^4.41.0

• Updated@contentful/f36-tooltip@^4.41.0