@contentful/f36-drag-handle 4.39.0 → 4.40.1

package/README.mdx

@@ -25,28 +25,21 @@ import { DragHandle } from '@contentful/f36-drag-handle';
 
 The DragHandle can be styled based on the props you pass to it:
 
-**Base**:
+### Variants
 
-```jsx
-<DragHandle label="Drag handle" />
-```
+DragHandle has 2 different variants:
 
-**Active**:
-
-```jsx
-<DragHandle isActive label="Active drag handle" />
-```
+- **Secondary** - Default variant.
+- **Transparent** - For having an unstyled DragHandle.
 
-**Focused**:
+```jsx file=./examples/DragHandleVariantsExample.tsx
 
-```jsx
-<DragHandle isFocused label="Focus drag handle" />
 ```
 
-**Hovered**:
+### States
+
+```jsx file=./examples/DragHandleStatesExample.tsx
 
-```jsx
-<DragHandle isHovered label="Hovered drag handle" />
 ```
 
 ### Card example

package/dist/esm/index.js

@@ -1,9 +1,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

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/DragHandle.tsx","../../src/DragHandle.styles.ts"],"names":["React","useCallback","useState","cx","DragIcon","css","tokens","getStyles","isActive","isFocused","isHovered","DRAG_HANDLE_DEFAULT_TAG","_DragHandle","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","__spreadProps","__spreadValues","DragHandle"],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  useState,\n  type ElementType,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type Ref,\n} from 'react';\nimport { cx } from 'emotion';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  CommonProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\n\nimport { getStyles } from './DragHandle.styles';\n\n// We use div instead of a button because react-sortable-hoc lib cancels sorting if the event target is button.\n//\n// The other alternative way to fix it was to pass a custom `shouldCancelStart` callback,\n// in every place where we use this component with react-sortable-hoc.\n// (the custom callback with all the logic from default callback, but without button event cancelation).\n// So we decided that just changing it to the div, as it was in v3, is a better fix.\n//\n// default shouldCancelStart callback:\n// https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js\nconst DRAG_HANDLE_DEFAULT_TAG = 'div';\n\nexport interface DragHandleInternalProps extends CommonProps {\n  /**\n   * The element used for the root node\n   * @default div\n   */\n  as?: 'button' | 'div';\n  /**\n   * Applies styling for when the component is actively being dragged by\n   * the user\n   */\n  isActive?: boolean;\n  /**\n   * Applies focus styling\n   */\n  isFocused?: boolean;\n  /**\n   * Applies hover styling\n   */\n  isHovered?: boolean;\n  /**\n   * Label rendered in DragHandle - not visible on screen as its purpose\n   * is for screen readers only\n   */\n  label: string;\n  /**\n   * Set type button for div element\n   */\n  type?: string;\n}\n\nexport type DragHandleProps<\n  E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG,\n> = PolymorphicProps<DragHandleInternalProps, E>;\n\nfunction _DragHandle<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG>(\n  props: DragHandleProps<E>,\n  ref: Ref<any>,\n) {\n  const styles = getStyles();\n  const {\n    as = DRAG_HANDLE_DEFAULT_TAG,\n    className,\n    isActive,\n    isFocused: isFocusedProp,\n    isHovered: isHoveredProp,\n    label,\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    testId = 'cf-ui-drag-handle',\n    style,\n    ...otherProps\n  } = props;\n  const [isFocused, setisFocused] = useState(isFocusedProp);\n  const [isHovered, setisHovered] = useState(isHoveredProp);\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (event) => {\n      setisFocused(true);\n\n      if (onFocus) {\n        onFocus(event);\n      }\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (event) => {\n      setisFocused(false);\n\n      if (onBlur) {\n        onBlur(event);\n      }\n    },\n    [onBlur],\n  );\n\n  const handleMouseEnter = useCallback<MouseEventHandler<HTMLElement>>(\n    (event) => {\n      setisHovered(true);\n\n      if (onMouseEnter) {\n        onMouseEnter(event);\n      }\n    },\n    [onMouseEnter],\n  );\n\n  const handleMouseLeave = useCallback<MouseEventHandler<HTMLElement>>(\n    (event) => {\n      setisHovered(false);\n\n      if (onMouseLeave) {\n        onMouseLeave(event);\n      }\n    },\n    [onMouseLeave],\n  );\n\n  const commonProps = {\n    className: cx(styles.root({ isActive, isFocused, isHovered }), className),\n    'data-test-id': testId,\n    onBlur: handleBlur,\n    onFocus: handleFocus,\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n    ref,\n    style,\n  };\n\n  if (as === 'div') {\n    return (\n      <div {...otherProps} {...commonProps} role=\"button\" tabIndex={0}>\n        <DragIcon variant=\"muted\" />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <button {...otherProps} {...commonProps} type=\"button\">\n      <DragIcon variant=\"muted\" />\n      <span className={styles.label}>{label}</span>\n    </button>\n  );\n}\n\nexport const DragHandle: PolymorphicComponent<\n  ExpandProps<DragHandleInternalProps>,\n  typeof DRAG_HANDLE_DEFAULT_TAG,\n  'disabled'\n> = React.forwardRef(_DragHandle);\n","import { cx, css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = () => ({\n  label: css({\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0, 0, 0, 0)',\n    border: 0,\n  }),\n  root: ({\n    isActive,\n    isFocused,\n    isHovered,\n  }: {\n    isActive: boolean;\n    isFocused: boolean;\n    isHovered: boolean;\n  }) => {\n    return cx(\n      css({\n        alignItems: 'center',\n        backgroundColor: tokens.gray100,\n        border: 0,\n        borderBottomLeftRadius: tokens.borderRadiusMedium,\n        borderRight: `1px solid ${tokens.gray200}`,\n        borderTopLeftRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        display: 'flex',\n        justifyContent: 'center',\n        padding: 0,\n        margin: 0, // remove the default button margin in Safari.\n        position: 'relative',\n        transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n        width: tokens.spacingL,\n        '&:hover': {\n          backgroundColor: tokens.gray200,\n        },\n        '&:focus': {\n          boxShadow: tokens.glowPrimary,\n        },\n        '&:focus:not(:focus-visible)': {\n          boxShadow: 'unset',\n        },\n        '&:focus-visible': {\n          boxShadow: tokens.glowPrimary,\n        },\n      }),\n      (isActive || isFocused || isHovered) &&\n        css({\n          backgroundColor: tokens.gray200,\n          cursor: isActive ? 'grabbing' : 'grab',\n        }),\n    );\n  },\n});\n"]}
+{"version":3,"sources":["../../src/DragHandle.tsx","../../src/DragHandle.styles.ts"],"names":["React","useCallback","useState","cx","DragIcon","css","tokens","hexToRGBA","getStyles","isActive","isFocused","isHovered","variant","DRAG_HANDLE_DEFAULT_TAG","_DragHandle","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","__spreadProps","__spreadValues","DragHandle"],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  useState,\n  type ElementType,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type Ref,\n} from 'react';\nimport { cx } from 'emotion';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  CommonProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\n\nimport { getStyles } from './DragHandle.styles';\n\n// We use div instead of a button because react-sortable-hoc lib cancels sorting if the event target is button.\n//\n// The other alternative way to fix it was to pass a custom `shouldCancelStart` callback,\n// in every place where we use this component with react-sortable-hoc.\n// (the custom callback with all the logic from default callback, but without button event cancelation).\n// So we decided that just changing it to the div, as it was in v3, is a better fix.\n//\n// default shouldCancelStart callback:\n// https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js\nconst DRAG_HANDLE_DEFAULT_TAG = 'div';\n\nexport interface DragHandleInternalProps extends CommonProps {\n  /**\n   * The element used for the root node\n   * @default div\n   */\n  as?: 'button' | 'div';\n  /**\n   * Applies styling for when the component is actively being dragged by\n   * the user\n   */\n  isActive?: boolean;\n  /**\n   * Applies focus styling\n   */\n  isFocused?: boolean;\n  /**\n   * Applies hover styling\n   */\n  isHovered?: boolean;\n  /**\n   * Label rendered in DragHandle - not visible on screen as its purpose\n   * is for screen readers only\n   */\n  label: string;\n  /**\n   * Set type button for div element\n   */\n  type?: string;\n\n  /**\n   * Determines style variation\n   * @default secondary\n   */\n  variant?: 'secondary' | 'transparent';\n}\n\nexport type DragHandleProps<\n  E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG,\n> = PolymorphicProps<DragHandleInternalProps, E>;\n\nfunction _DragHandle<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG>(\n  props: DragHandleProps<E>,\n  ref: Ref<any>,\n) {\n  const styles = getStyles();\n  const {\n    as = DRAG_HANDLE_DEFAULT_TAG,\n    className,\n    isActive,\n    isFocused: isFocusedProp,\n    isHovered: isHoveredProp,\n    label,\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    testId = 'cf-ui-drag-handle',\n    style,\n    variant = 'secondary',\n    ...otherProps\n  } = props;\n  const [isFocused, setisFocused] = useState(isFocusedProp);\n  const [isHovered, setisHovered] = useState(isHoveredProp);\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (event) => {\n      setisFocused(true);\n\n      if (onFocus) {\n        onFocus(event);\n      }\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (event) => {\n      setisFocused(false);\n\n      if (onBlur) {\n        onBlur(event);\n      }\n    },\n    [onBlur],\n  );\n\n  const handleMouseEnter = useCallback<MouseEventHandler<HTMLElement>>(\n    (event) => {\n      setisHovered(true);\n\n      if (onMouseEnter) {\n        onMouseEnter(event);\n      }\n    },\n    [onMouseEnter],\n  );\n\n  const handleMouseLeave = useCallback<MouseEventHandler<HTMLElement>>(\n    (event) => {\n      setisHovered(false);\n\n      if (onMouseLeave) {\n        onMouseLeave(event);\n      }\n    },\n    [onMouseLeave],\n  );\n\n  const commonProps = {\n    className: cx(\n      styles.root({ isActive, isFocused, isHovered, variant }),\n      className,\n    ),\n    'data-test-id': testId,\n    onBlur: handleBlur,\n    onFocus: handleFocus,\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n    ref,\n    style,\n  };\n\n  if (as === 'div') {\n    return (\n      <div {...otherProps} {...commonProps} role=\"button\" tabIndex={0}>\n        <DragIcon variant=\"muted\" />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <button {...otherProps} {...commonProps} type=\"button\">\n      <DragIcon variant=\"muted\" />\n      <span className={styles.label}>{label}</span>\n    </button>\n  );\n}\n\nexport const DragHandle: PolymorphicComponent<\n  ExpandProps<DragHandleInternalProps>,\n  typeof DRAG_HANDLE_DEFAULT_TAG,\n  'disabled'\n> = React.forwardRef(_DragHandle);\n","import { cx, css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { DragHandleProps } from './DragHandle';\n\nexport const getStyles = () => ({\n  label: css({\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0, 0, 0, 0)',\n    border: 0,\n  }),\n  root: ({\n    isActive,\n    isFocused,\n    isHovered,\n    variant,\n  }: {\n    isActive: boolean;\n    isFocused: boolean;\n    isHovered: boolean;\n    variant: DragHandleProps['variant'];\n  }) => {\n    return cx(\n      css({\n        alignItems: 'center',\n        backgroundColor: 'transparent',\n        border: 0,\n        borderRight: `1px solid ${tokens.gray200}`,\n        boxSizing: 'border-box',\n        display: 'flex',\n        justifyContent: 'center',\n        padding: 0,\n        margin: 0, // remove the default button margin in Safari.\n        position: 'relative',\n        transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n        width: tokens.spacingL,\n        '&:hover': {\n          backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n        },\n        '&:focus': {\n          boxShadow: tokens.glowPrimary,\n        },\n        '&:focus:not(:focus-visible)': {\n          boxShadow: 'unset',\n        },\n        '&:focus-visible': {\n          boxShadow: tokens.glowPrimary,\n        },\n      }),\n      variant === 'secondary' &&\n        css({\n          borderTopLeftRadius: tokens.borderRadiusMedium,\n          borderBottomLeftRadius: tokens.borderRadiusMedium,\n          backgroundColor: tokens.gray100,\n        }),\n      (isActive || isFocused || isHovered) &&\n        css({\n          backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n          cursor: isActive ? 'grabbing' : 'grab',\n        }),\n    );\n  },\n});\n"]}

package/dist/index.d.ts

@@ -30,6 +30,11 @@ interface DragHandleInternalProps extends CommonProps {
      * Set type button for div element
      */
     type?: string;
+    /**
+     * Determines style variation
+     * @default secondary
+     */
+    variant?: 'secondary' | 'transparent';
 }
 declare type DragHandleProps<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG> = PolymorphicProps<DragHandleInternalProps, E>;
 declare const DragHandle: PolymorphicComponent<ExpandProps<DragHandleInternalProps>, typeof DRAG_HANDLE_DEFAULT_TAG, 'disabled'>;

package/dist/index.js

@@ -2,17 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/DragHandle.tsx","../src/DragHandle.styles.ts"],"names":["React","useCallback","useState","cx","DragIcon","css","tokens","getStyles","isActive","isFocused","isHovered","DRAG_HANDLE_DEFAULT_TAG","_DragHandle","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","__spreadProps","__spreadValues","DragHandle"],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  useState,\n  type ElementType,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type Ref,\n} from 'react';\nimport { cx } from 'emotion';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  CommonProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\n\nimport { getStyles } from './DragHandle.styles';\n\n// We use div instead of a button because react-sortable-hoc lib cancels sorting if the event target is button.\n//\n// The other alternative way to fix it was to pass a custom `shouldCancelStart` callback,\n// in every place where we use this component with react-sortable-hoc.\n// (the custom callback with all the logic from default callback, but without button event cancelation).\n// So we decided that just changing it to the div, as it was in v3, is a better fix.\n//\n// default shouldCancelStart callback:\n// https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js\nconst DRAG_HANDLE_DEFAULT_TAG = 'div';\n\nexport interface DragHandleInternalProps extends CommonProps {\n  /**\n   * The element used for the root node\n   * @default div\n   */\n  as?: 'button' | 'div';\n  /**\n   * Applies styling for when the component is actively being dragged by\n   * the user\n   */\n  isActive?: boolean;\n  /**\n   * Applies focus styling\n   */\n  isFocused?: boolean;\n  /**\n   * Applies hover styling\n   */\n  isHovered?: boolean;\n  /**\n   * Label rendered in DragHandle - not visible on screen as its purpose\n   * is for screen readers only\n   */\n  label: string;\n  /**\n   * Set type button for div element\n   */\n  type?: string;\n}\n\nexport type DragHandleProps<\n  E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG,\n> = PolymorphicProps<DragHandleInternalProps, E>;\n\nfunction _DragHandle<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG>(\n  props: DragHandleProps<E>,\n  ref: Ref<any>,\n) {\n  const styles = getStyles();\n  const {\n    as = DRAG_HANDLE_DEFAULT_TAG,\n    className,\n    isActive,\n    isFocused: isFocusedProp,\n    isHovered: isHoveredProp,\n    label,\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    testId = 'cf-ui-drag-handle',\n    style,\n    ...otherProps\n  } = props;\n  const [isFocused, setisFocused] = useState(isFocusedProp);\n  const [isHovered, setisHovered] = useState(isHoveredProp);\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (event) => {\n      setisFocused(true);\n\n      if (onFocus) {\n        onFocus(event);\n      }\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (event) => {\n      setisFocused(false);\n\n      if (onBlur) {\n        onBlur(event);\n      }\n    },\n    [onBlur],\n  );\n\n  const handleMouseEnter = useCallback<MouseEventHandler<HTMLElement>>(\n    (event) => {\n      setisHovered(true);\n\n      if (onMouseEnter) {\n        onMouseEnter(event);\n      }\n    },\n    [onMouseEnter],\n  );\n\n  const handleMouseLeave = useCallback<MouseEventHandler<HTMLElement>>(\n    (event) => {\n      setisHovered(false);\n\n      if (onMouseLeave) {\n        onMouseLeave(event);\n      }\n    },\n    [onMouseLeave],\n  );\n\n  const commonProps = {\n    className: cx(styles.root({ isActive, isFocused, isHovered }), className),\n    'data-test-id': testId,\n    onBlur: handleBlur,\n    onFocus: handleFocus,\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n    ref,\n    style,\n  };\n\n  if (as === 'div') {\n    return (\n      <div {...otherProps} {...commonProps} role=\"button\" tabIndex={0}>\n        <DragIcon variant=\"muted\" />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <button {...otherProps} {...commonProps} type=\"button\">\n      <DragIcon variant=\"muted\" />\n      <span className={styles.label}>{label}</span>\n    </button>\n  );\n}\n\nexport const DragHandle: PolymorphicComponent<\n  ExpandProps<DragHandleInternalProps>,\n  typeof DRAG_HANDLE_DEFAULT_TAG,\n  'disabled'\n> = React.forwardRef(_DragHandle);\n","import { cx, css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\n\nexport const getStyles = () => ({\n  label: css({\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0, 0, 0, 0)',\n    border: 0,\n  }),\n  root: ({\n    isActive,\n    isFocused,\n    isHovered,\n  }: {\n    isActive: boolean;\n    isFocused: boolean;\n    isHovered: boolean;\n  }) => {\n    return cx(\n      css({\n        alignItems: 'center',\n        backgroundColor: tokens.gray100,\n        border: 0,\n        borderBottomLeftRadius: tokens.borderRadiusMedium,\n        borderRight: `1px solid ${tokens.gray200}`,\n        borderTopLeftRadius: tokens.borderRadiusMedium,\n        boxSizing: 'border-box',\n        display: 'flex',\n        justifyContent: 'center',\n        padding: 0,\n        margin: 0, // remove the default button margin in Safari.\n        position: 'relative',\n        transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n        width: tokens.spacingL,\n        '&:hover': {\n          backgroundColor: tokens.gray200,\n        },\n        '&:focus': {\n          boxShadow: tokens.glowPrimary,\n        },\n        '&:focus:not(:focus-visible)': {\n          boxShadow: 'unset',\n        },\n        '&:focus-visible': {\n          boxShadow: tokens.glowPrimary,\n        },\n      }),\n      (isActive || isFocused || isHovered) &&\n        css({\n          backgroundColor: tokens.gray200,\n          cursor: isActive ? 'grabbing' : 'grab',\n        }),\n    );\n  },\n});\n"]}
+{"version":3,"sources":["../src/DragHandle.tsx","../src/DragHandle.styles.ts"],"names":["React","useCallback","useState","cx","DragIcon","css","tokens","hexToRGBA","getStyles","isActive","isFocused","isHovered","variant","DRAG_HANDLE_DEFAULT_TAG","_DragHandle","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","__spreadProps","__spreadValues","DragHandle"],"mappings":"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","sourcesContent":["import React, {\n  useCallback,\n  useState,\n  type ElementType,\n  type FocusEventHandler,\n  type MouseEventHandler,\n  type Ref,\n} from 'react';\nimport { cx } from 'emotion';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  CommonProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\n\nimport { getStyles } from './DragHandle.styles';\n\n// We use div instead of a button because react-sortable-hoc lib cancels sorting if the event target is button.\n//\n// The other alternative way to fix it was to pass a custom `shouldCancelStart` callback,\n// in every place where we use this component with react-sortable-hoc.\n// (the custom callback with all the logic from default callback, but without button event cancelation).\n// So we decided that just changing it to the div, as it was in v3, is a better fix.\n//\n// default shouldCancelStart callback:\n// https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js\nconst DRAG_HANDLE_DEFAULT_TAG = 'div';\n\nexport interface DragHandleInternalProps extends CommonProps {\n  /**\n   * The element used for the root node\n   * @default div\n   */\n  as?: 'button' | 'div';\n  /**\n   * Applies styling for when the component is actively being dragged by\n   * the user\n   */\n  isActive?: boolean;\n  /**\n   * Applies focus styling\n   */\n  isFocused?: boolean;\n  /**\n   * Applies hover styling\n   */\n  isHovered?: boolean;\n  /**\n   * Label rendered in DragHandle - not visible on screen as its purpose\n   * is for screen readers only\n   */\n  label: string;\n  /**\n   * Set type button for div element\n   */\n  type?: string;\n\n  /**\n   * Determines style variation\n   * @default secondary\n   */\n  variant?: 'secondary' | 'transparent';\n}\n\nexport type DragHandleProps<\n  E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG,\n> = PolymorphicProps<DragHandleInternalProps, E>;\n\nfunction _DragHandle<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG>(\n  props: DragHandleProps<E>,\n  ref: Ref<any>,\n) {\n  const styles = getStyles();\n  const {\n    as = DRAG_HANDLE_DEFAULT_TAG,\n    className,\n    isActive,\n    isFocused: isFocusedProp,\n    isHovered: isHoveredProp,\n    label,\n    onBlur,\n    onFocus,\n    onMouseEnter,\n    onMouseLeave,\n    testId = 'cf-ui-drag-handle',\n    style,\n    variant = 'secondary',\n    ...otherProps\n  } = props;\n  const [isFocused, setisFocused] = useState(isFocusedProp);\n  const [isHovered, setisHovered] = useState(isHoveredProp);\n\n  const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n    (event) => {\n      setisFocused(true);\n\n      if (onFocus) {\n        onFocus(event);\n      }\n    },\n    [onFocus],\n  );\n\n  const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n    (event) => {\n      setisFocused(false);\n\n      if (onBlur) {\n        onBlur(event);\n      }\n    },\n    [onBlur],\n  );\n\n  const handleMouseEnter = useCallback<MouseEventHandler<HTMLElement>>(\n    (event) => {\n      setisHovered(true);\n\n      if (onMouseEnter) {\n        onMouseEnter(event);\n      }\n    },\n    [onMouseEnter],\n  );\n\n  const handleMouseLeave = useCallback<MouseEventHandler<HTMLElement>>(\n    (event) => {\n      setisHovered(false);\n\n      if (onMouseLeave) {\n        onMouseLeave(event);\n      }\n    },\n    [onMouseLeave],\n  );\n\n  const commonProps = {\n    className: cx(\n      styles.root({ isActive, isFocused, isHovered, variant }),\n      className,\n    ),\n    'data-test-id': testId,\n    onBlur: handleBlur,\n    onFocus: handleFocus,\n    onMouseEnter: handleMouseEnter,\n    onMouseLeave: handleMouseLeave,\n    ref,\n    style,\n  };\n\n  if (as === 'div') {\n    return (\n      <div {...otherProps} {...commonProps} role=\"button\" tabIndex={0}>\n        <DragIcon variant=\"muted\" />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <button {...otherProps} {...commonProps} type=\"button\">\n      <DragIcon variant=\"muted\" />\n      <span className={styles.label}>{label}</span>\n    </button>\n  );\n}\n\nexport const DragHandle: PolymorphicComponent<\n  ExpandProps<DragHandleInternalProps>,\n  typeof DRAG_HANDLE_DEFAULT_TAG,\n  'disabled'\n> = React.forwardRef(_DragHandle);\n","import { cx, css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { DragHandleProps } from './DragHandle';\n\nexport const getStyles = () => ({\n  label: css({\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0, 0, 0, 0)',\n    border: 0,\n  }),\n  root: ({\n    isActive,\n    isFocused,\n    isHovered,\n    variant,\n  }: {\n    isActive: boolean;\n    isFocused: boolean;\n    isHovered: boolean;\n    variant: DragHandleProps['variant'];\n  }) => {\n    return cx(\n      css({\n        alignItems: 'center',\n        backgroundColor: 'transparent',\n        border: 0,\n        borderRight: `1px solid ${tokens.gray200}`,\n        boxSizing: 'border-box',\n        display: 'flex',\n        justifyContent: 'center',\n        padding: 0,\n        margin: 0, // remove the default button margin in Safari.\n        position: 'relative',\n        transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n        width: tokens.spacingL,\n        '&:hover': {\n          backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n        },\n        '&:focus': {\n          boxShadow: tokens.glowPrimary,\n        },\n        '&:focus:not(:focus-visible)': {\n          boxShadow: 'unset',\n        },\n        '&:focus-visible': {\n          boxShadow: tokens.glowPrimary,\n        },\n      }),\n      variant === 'secondary' &&\n        css({\n          borderTopLeftRadius: tokens.borderRadiusMedium,\n          borderBottomLeftRadius: tokens.borderRadiusMedium,\n          backgroundColor: tokens.gray100,\n        }),\n      (isActive || isFocused || isHovered) &&\n        css({\n          backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n          cursor: isActive ? 'grabbing' : 'grab',\n        }),\n    );\n  },\n});\n"]}

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@contentful/f36-drag-handle",
-  "version": "4.39.0",
+  "version": "4.40.1",
   "description": "Forma 36: DragHandle component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^4.39.0",
+    "@contentful/f36-core": "^4.40.1",
     "@contentful/f36-icons": "^4.23.2",
+    "@contentful/f36-utils": "^4.24.1",
     "@contentful/f36-tokens": "^4.0.1",
     "emotion": "^10.0.17"
   },