@contentful/f36-drag-handle 4.16.0 → 4.19.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 4.19.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-icons@4.19.0
+  - @contentful/f36-core@4.19.0
+
+## 4.18.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-icons@4.18.0
+  - @contentful/f36-core@4.18.0
+
+## 4.17.0
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-icons@4.17.0
+  - @contentful/f36-core@4.17.0
+
 ## 4.16.0
 
 ### Patch Changes

package/dist/{types.d.ts → index.d.ts}

@@ -1,5 +1,6 @@
-import { ElementType } from "react";
-import { PolymorphicComponent, PolymorphicProps, CommonProps, ExpandProps } from "@contentful/f36-core";
+import { ElementType } from 'react';
+import { PolymorphicProps, PolymorphicComponent, ExpandProps, CommonProps } from '@contentful/f36-core';
+
 declare const DRAG_HANDLE_DEFAULT_TAG = "div";
 interface DragHandleInternalProps extends CommonProps {
     /**
@@ -30,7 +31,7 @@ interface DragHandleInternalProps extends CommonProps {
      */
     type?: string;
 }
-export type DragHandleProps<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG> = PolymorphicProps<DragHandleInternalProps, E>;
-export const DragHandle: PolymorphicComponent<ExpandProps<DragHandleInternalProps>, typeof DRAG_HANDLE_DEFAULT_TAG, 'disabled'>;
+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'>;
 
-//# sourceMappingURL=types.d.ts.map
+export { DragHandle, DragHandleProps };

package/dist/index.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var a = require('react');
+var emotion = require('emotion');
+var f36Icons = require('@contentful/f36-icons');
+var t = require('@contentful/f36-tokens');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var a__default = /*#__PURE__*/_interopDefaultLegacy(a);
+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,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);
+
+exports.DragHandle = Q;
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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        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"]}

package/dist/index.mjs

@@ -0,0 +1,9 @@
+import a, { useState, useCallback } from 'react';
+import { cx, css } from 'emotion';
+import { DragIcon } from '@contentful/f36-icons';
+import t from '@contentful/f36-tokens';
+
+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,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);
+
+export { Q as DragHandle };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +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        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"]}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@contentful/f36-drag-handle",
-  "version": "4.16.0",
+  "version": "4.19.0",
   "description": "Forma 36: DragHandle component",
   "scripts": {
-    "build": "parcel build"
+    "build": "tsup"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.16.0",
-    "@contentful/f36-icons": "^4.16.0",
+    "@contentful/f36-core": "^4.19.0",
+    "@contentful/f36-icons": "^4.19.0",
     "@contentful/f36-tokens": "^4.0.1",
     "emotion": "^10.0.17"
   },
@@ -19,9 +19,9 @@
   "files": [
     "dist"
   ],
-  "main": "dist/main.js",
-  "module": "dist/module.js",
-  "types": "dist/types.d.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
   "source": "src/index.ts",
   "sideEffects": false,
   "browserslist": "extends @contentful/browserslist-config",

package/dist/main.js

@@ -1,137 +0,0 @@
-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__*/ (0, $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 (0, $9zqHf$emotion.cx)(/*#__PURE__*/ (0, $9zqHf$emotion.css)({
-                alignItems: "center",
-                backgroundColor: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).gray100,
-                border: 0,
-                borderBottomLeftRadius: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).borderRadiusMedium,
-                borderRight: `1px solid ${(0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).gray200}`,
-                borderTopLeftRadius: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).borderRadiusMedium,
-                boxSizing: "border-box",
-                display: "flex",
-                justifyContent: "center",
-                padding: 0,
-                position: "relative",
-                transition: `background-color ${(0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).transitionDurationDefault} ${(0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).transitionEasingDefault}`,
-                width: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).spacingL,
-                "&:hover": {
-                    backgroundColor: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).gray200
-                },
-                "&:focus": {
-                    boxShadow: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).glowPrimary
-                },
-                "&:focus:not(:focus-visible)": {
-                    boxShadow: "unset"
-                },
-                "&:focus-visible": {
-                    boxShadow: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).glowPrimary
-                }
-            }), (isActive || isFocused || isHovered) && /*#__PURE__*/ (0, $9zqHf$emotion.css)({
-                backgroundColor: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).gray200,
-                cursor: isActive ? "grabbing" : "grab"
-            }));
-        }
-    });
-
-
-//
-// The other alternative way to fix it was to pass a custom `shouldCancelStart` callback,
-// in every place where we use this component with react-sortable-hoc.
-// (the custom callback with all the logic from default callback, but without button event cancelation).
-// So we decided that just changing it to the div, as it was in v3, is a better fix.
-//
-// default shouldCancelStart callback:
-// https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js
-const $7340ff11beb99de7$var$DRAG_HANDLE_DEFAULT_TAG = "div";
-function $7340ff11beb99de7$var$_DragHandle(props, ref) {
-    const styles = (0, $590c5f6da3a22459$export$ffd58b7f6f099a57)();
-    const { as: as = $7340ff11beb99de7$var$DRAG_HANDLE_DEFAULT_TAG , 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 } = props;
-    const [isFocused, setisFocused] = (0, $9zqHf$react.useState)(isFocusedProp);
-    const [isHovered, setisHovered] = (0, $9zqHf$react.useState)(isHoveredProp);
-    const handleFocus = (0, $9zqHf$react.useCallback)((event)=>{
-        setisFocused(true);
-        if (onFocus) onFocus(event);
-    }, [
-        onFocus
-    ]);
-    const handleBlur = (0, $9zqHf$react.useCallback)((event)=>{
-        setisFocused(false);
-        if (onBlur) onBlur(event);
-    }, [
-        onBlur
-    ]);
-    const handleMouseEnter = (0, $9zqHf$react.useCallback)((event)=>{
-        setisHovered(true);
-        if (onMouseEnter) onMouseEnter(event);
-    }, [
-        onMouseEnter
-    ]);
-    const handleMouseLeave = (0, $9zqHf$react.useCallback)((event)=>{
-        setisHovered(false);
-        if (onMouseLeave) onMouseLeave(event);
-    }, [
-        onMouseLeave
-    ]);
-    const commonProps = {
-        className: (0, $9zqHf$emotion.cx)(styles.root({
-            isActive: isActive,
-            isFocused: isFocused,
-            isHovered: isHovered
-        }), className),
-        "data-test-id": testId,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        ref: ref,
-        style: style
-    };
-    if (as === "div") return /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement("div", {
-        ...otherProps,
-        ...commonProps,
-        role: "button",
-        tabIndex: 0
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement((0, $9zqHf$contentfulf36icons.DragIcon), {
-        variant: "muted"
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement("span", {
-        className: styles.label
-    }, label));
-    return /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement("button", {
-        ...otherProps,
-        ...commonProps,
-        type: "button"
-    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement((0, $9zqHf$contentfulf36icons.DragIcon), {
-        variant: "muted"
-    }), /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement("span", {
-        className: styles.label
-    }, label));
-}
-const $7340ff11beb99de7$export$a0c24614540b0efb = /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).forwardRef($7340ff11beb99de7$var$_DragHandle);
-
-
-
-
-//# sourceMappingURL=main.js.map

package/dist/main.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/drag-handle/src/index.ts","packages/components/drag-handle/src/DragHandle.tsx","packages/components/drag-handle/src/DragHandle.styles.ts"],"sourcesContent":["export { DragHandle } from './DragHandle';\nexport type { DragHandleProps } from './DragHandle';\n","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        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"],"names":["DragHandle","DragHandleProps","React","useCallback","useState","ElementType","FocusEventHandler","MouseEventHandler","Ref","PolymorphicComponent","PolymorphicProps","CommonProps","ExpandProps","DragIcon","getStyles","DRAG_HANDLE_DEFAULT_TAG","DragHandleInternalProps","as","isActive","isFocused","isHovered","label","type","E","_DragHandle","props","ref","styles","className","isFocusedProp","isHoveredProp","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","setisFocused","setisHovered","handleFocus","HTMLElement","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","root","forwardRef","tokens","alignItems","backgroundColor","gray100","border","borderBottomLeftRadius","borderRadiusMedium","borderRight","gray200","borderTopLeftRadius","boxSizing","display","justifyContent","padding","position","transition","transitionDurationDefault","transitionEasingDefault","width","spacingL","boxShadow","glowPrimary","cursor"],"version":3,"file":"main.js.map"}

package/dist/module.js

@@ -1,130 +0,0 @@
-import {cx as $8USmO$cx, css as $8USmO$css} from "emotion";
-import $8USmO$react, {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__*/ (0, $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 (0, $8USmO$cx)(/*#__PURE__*/ (0, $8USmO$css)({
-                alignItems: "center",
-                backgroundColor: (0, $8USmO$contentfulf36tokens).gray100,
-                border: 0,
-                borderBottomLeftRadius: (0, $8USmO$contentfulf36tokens).borderRadiusMedium,
-                borderRight: `1px solid ${(0, $8USmO$contentfulf36tokens).gray200}`,
-                borderTopLeftRadius: (0, $8USmO$contentfulf36tokens).borderRadiusMedium,
-                boxSizing: "border-box",
-                display: "flex",
-                justifyContent: "center",
-                padding: 0,
-                position: "relative",
-                transition: `background-color ${(0, $8USmO$contentfulf36tokens).transitionDurationDefault} ${(0, $8USmO$contentfulf36tokens).transitionEasingDefault}`,
-                width: (0, $8USmO$contentfulf36tokens).spacingL,
-                "&:hover": {
-                    backgroundColor: (0, $8USmO$contentfulf36tokens).gray200
-                },
-                "&:focus": {
-                    boxShadow: (0, $8USmO$contentfulf36tokens).glowPrimary
-                },
-                "&:focus:not(:focus-visible)": {
-                    boxShadow: "unset"
-                },
-                "&:focus-visible": {
-                    boxShadow: (0, $8USmO$contentfulf36tokens).glowPrimary
-                }
-            }), (isActive || isFocused || isHovered) && /*#__PURE__*/ (0, $8USmO$css)({
-                backgroundColor: (0, $8USmO$contentfulf36tokens).gray200,
-                cursor: isActive ? "grabbing" : "grab"
-            }));
-        }
-    });
-
-
-//
-// The other alternative way to fix it was to pass a custom `shouldCancelStart` callback,
-// in every place where we use this component with react-sortable-hoc.
-// (the custom callback with all the logic from default callback, but without button event cancelation).
-// So we decided that just changing it to the div, as it was in v3, is a better fix.
-//
-// default shouldCancelStart callback:
-// https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js
-const $0d6e001a91dc675e$var$DRAG_HANDLE_DEFAULT_TAG = "div";
-function $0d6e001a91dc675e$var$_DragHandle(props, ref) {
-    const styles = (0, $1282af47e008eae6$export$ffd58b7f6f099a57)();
-    const { as: as = $0d6e001a91dc675e$var$DRAG_HANDLE_DEFAULT_TAG , 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 } = props;
-    const [isFocused, setisFocused] = (0, $8USmO$useState)(isFocusedProp);
-    const [isHovered, setisHovered] = (0, $8USmO$useState)(isHoveredProp);
-    const handleFocus = (0, $8USmO$useCallback)((event)=>{
-        setisFocused(true);
-        if (onFocus) onFocus(event);
-    }, [
-        onFocus
-    ]);
-    const handleBlur = (0, $8USmO$useCallback)((event)=>{
-        setisFocused(false);
-        if (onBlur) onBlur(event);
-    }, [
-        onBlur
-    ]);
-    const handleMouseEnter = (0, $8USmO$useCallback)((event)=>{
-        setisHovered(true);
-        if (onMouseEnter) onMouseEnter(event);
-    }, [
-        onMouseEnter
-    ]);
-    const handleMouseLeave = (0, $8USmO$useCallback)((event)=>{
-        setisHovered(false);
-        if (onMouseLeave) onMouseLeave(event);
-    }, [
-        onMouseLeave
-    ]);
-    const commonProps = {
-        className: (0, $8USmO$cx)(styles.root({
-            isActive: isActive,
-            isFocused: isFocused,
-            isHovered: isHovered
-        }), className),
-        "data-test-id": testId,
-        onBlur: handleBlur,
-        onFocus: handleFocus,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        ref: ref,
-        style: style
-    };
-    if (as === "div") return /*#__PURE__*/ (0, $8USmO$react).createElement("div", {
-        ...otherProps,
-        ...commonProps,
-        role: "button",
-        tabIndex: 0
-    }, /*#__PURE__*/ (0, $8USmO$react).createElement((0, $8USmO$DragIcon), {
-        variant: "muted"
-    }), /*#__PURE__*/ (0, $8USmO$react).createElement("span", {
-        className: styles.label
-    }, label));
-    return /*#__PURE__*/ (0, $8USmO$react).createElement("button", {
-        ...otherProps,
-        ...commonProps,
-        type: "button"
-    }, /*#__PURE__*/ (0, $8USmO$react).createElement((0, $8USmO$DragIcon), {
-        variant: "muted"
-    }), /*#__PURE__*/ (0, $8USmO$react).createElement("span", {
-        className: styles.label
-    }, label));
-}
-const $0d6e001a91dc675e$export$a0c24614540b0efb = /*#__PURE__*/ (0, $8USmO$react).forwardRef($0d6e001a91dc675e$var$_DragHandle);
-
-
-
-
-export {$0d6e001a91dc675e$export$a0c24614540b0efb as DragHandle};
-//# sourceMappingURL=module.js.map

package/dist/module.js.map

@@ -1 +0,0 @@
-{"mappings":"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","sources":["packages/components/drag-handle/src/index.ts","packages/components/drag-handle/src/DragHandle.tsx","packages/components/drag-handle/src/DragHandle.styles.ts"],"sourcesContent":["export { DragHandle } from './DragHandle';\nexport type { DragHandleProps } from './DragHandle';\n","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        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"],"names":["DragHandle","DragHandleProps","React","useCallback","useState","ElementType","FocusEventHandler","MouseEventHandler","Ref","PolymorphicComponent","PolymorphicProps","CommonProps","ExpandProps","DragIcon","getStyles","DRAG_HANDLE_DEFAULT_TAG","DragHandleInternalProps","as","isActive","isFocused","isHovered","label","type","E","_DragHandle","props","ref","styles","className","isFocusedProp","isHoveredProp","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","setisFocused","setisHovered","handleFocus","HTMLElement","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","root","forwardRef","tokens","alignItems","backgroundColor","gray100","border","borderBottomLeftRadius","borderRadiusMedium","borderRight","gray200","borderTopLeftRadius","boxSizing","display","justifyContent","padding","position","transition","transitionDurationDefault","transitionEasingDefault","width","spacingL","boxShadow","glowPrimary","cursor"],"version":3,"file":"module.js.map"}

package/dist/types.d.ts.map

@@ -1 +0,0 @@
-{"mappings":";;AC4BA,QAAA,MAAM,+BAA+B,CAAC;AAEtC,iCAAyC,SAAQ,WAAW;IAC1D;;;OAGG;IACH,EAAE,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC;IACtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,4BACE,CAAC,SAAS,WAAW,GAAG,8BAA8B,IACpD,iBAAiB,uBAAuB,EAAE,CAAC,CAAC,CAAC;AAiGjD,OAAO,MAAM,YAAY,qBACvB,YAAY,uBAAuB,CAAC,EACpC,8BAA8B,EAC9B,UAAU,CACqB,CAAC","sources":["packages/components/drag-handle/src/src/DragHandle.styles.ts","packages/components/drag-handle/src/src/DragHandle.tsx","packages/components/drag-handle/src/src/index.ts","packages/components/drag-handle/src/index.ts"],"sourcesContent":[null,null,null,"export { DragHandle } from './DragHandle';\nexport type { DragHandleProps } from './DragHandle';\n"],"names":[],"version":3,"file":"types.d.ts.map"}