@contentful/f36-drag-handle 5.5.0 → 6.0.0-alpha.1

package/dist/esm/index.js

@@ -1,11 +1,2 @@
-import s, { useState, useCallback } from 'react';
-import { cx, css } from 'emotion';
-import t from '@contentful/f36-tokens';
-import { DotsSixVerticalIcon } from '@contentful/f36-icons';
-import { hexToRGBA } from '@contentful/f36-utils';
-
-var V=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?V(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,l=(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,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t.transitionDurationDefault} ${t.transitionEasingDefault}`,width:t.spacingL,"&:focus":{boxShadow:t.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t.glowPrimary}}),n==="secondary"&&css({borderRight:`1px solid ${t.gray200}`,borderTopLeftRadius:t.borderRadiusMedium,borderBottomLeftRadius:t.borderRadiusMedium,backgroundColor:t.gray100,"&:hover":{backgroundColor:hexToRGBA(t.gray900,.08)}}),n==="secondary"&&(o||r||e)&&css({backgroundColor:hexToRGBA(t.gray900,.08)}),(o||r||e)&&css({cursor:o?"grabbing":"grab"}))});var Q="div";function W(o,r){let e=T(),D=o,{as:n=Q,className:C,isActive:w,isFocused:G,isHovered:k,label:f,onBlur:c,onFocus:u,onMouseEnter:m,onMouseLeave:b,testId:N="cf-ui-drag-handle",style:R,variant:S="secondary"}=D,y=A(D,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","variant"]),[I,E]=useState(G),[B,H]=useState(k),U=useCallback(a=>{E(!0),u&&u(a);},[u]),$=useCallback(a=>{E(!1),c&&c(a);},[c]),j=useCallback(a=>{H(!0),m&&m(a);},[m]),z=useCallback(a=>{H(!1),b&&b(a);},[b]),v={className:cx(e.root({isActive:w,isFocused:I,isHovered:B,variant:S}),C),"data-test-id":N,onBlur:$,onFocus:U,onMouseEnter:j,onMouseLeave:z,ref:r,style:R};return n==="div"?s.createElement("div",g(l(l({},y),v),{role:"button",tabIndex:0}),s.createElement(DotsSixVerticalIcon,{color:t.gray600}),s.createElement("span",{className:e.label},f)):s.createElement("button",g(l(l({},y),v),{type:"button"}),s.createElement(DotsSixVerticalIcon,{color:t.gray600}),s.createElement("span",{className:e.label},f))}var X=s.forwardRef(W);
-
-export { X as DragHandle };
-//# sourceMappingURL=out.js.map
+import s,{useState,useCallback}from'react';import {cx,css}from'@emotion/css';import t from'@contentful/f36-tokens';import {DotsSixVerticalIcon}from'@contentful/f36-icons';import {hexToRGBA}from'@contentful/f36-utils';var q=Object.defineProperty,J=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?q(o,r,{enumerable:true,configurable:true,writable:true,value:e}):o[r]=e,l=(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},b=(o,r)=>J(o,K(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,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t.transitionDurationDefault} ${t.transitionEasingDefault}`,width:t.spacingL,"&:focus":{boxShadow:t.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t.glowPrimary}}),n==="secondary"&&css({borderRight:`1px solid ${t.gray200}`,borderTopLeftRadius:t.borderRadiusMedium,borderBottomLeftRadius:t.borderRadiusMedium,backgroundColor:t.gray100,"&:hover":{backgroundColor:hexToRGBA(t.gray900,.08)}}),n==="secondary"&&(o||r||e)&&css({backgroundColor:hexToRGBA(t.gray900,.08)}),(o||r||e)&&css({cursor:o?"grabbing":"grab"}))});var W="div";function C(o,r){let e=T(),v=o,{as:n=W,className:w,isActive:G,isFocused:N,isHovered:k,label:f,onBlur:c,onFocus:u,onMouseEnter:m,onMouseLeave:g,testId:R="cf-ui-drag-handle",style:S,variant:I="secondary"}=v,y=A(v,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","variant"]),[B,H]=useState(N),[U,E]=useState(k),$=useCallback(a=>{H(true),u&&u(a);},[u]),j=useCallback(a=>{H(false),c&&c(a);},[c]),z=useCallback(a=>{E(true),m&&m(a);},[m]),V=useCallback(a=>{E(false),g&&g(a);},[g]),D={className:cx(e.root({isActive:G,isFocused:B,isHovered:U,variant:I}),w),"data-test-id":R,onBlur:j,onFocus:$,onMouseEnter:z,onMouseLeave:V,ref:r,style:S};return n==="div"?s.createElement("div",b(l(l({},y),D),{role:"button",tabIndex:0}),s.createElement(DotsSixVerticalIcon,{color:t.gray600}),s.createElement("span",{className:e.label},f)):s.createElement("button",b(l(l({},y),D),{type:"button"}),s.createElement(DotsSixVerticalIcon,{color:t.gray600}),s.createElement("span",{className:e.label},f))}C.displayName="DragHandle";var X=s.forwardRef(C);export{X as DragHandle};//# sourceMappingURL=index.js.map
 //# 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","tokens","DotsSixVerticalIcon","css","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 tokens from '@contentful/f36-tokens';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  CommonProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { DotsSixVerticalIcon } 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        <DotsSixVerticalIcon color={tokens.gray600} />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <button {...otherProps} {...commonProps} type=\"button\">\n      <DotsSixVerticalIcon color={tokens.gray600} />\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        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        '&: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          borderRight: `1px solid ${tokens.gray200}`,\n          borderTopLeftRadius: tokens.borderRadiusMedium,\n          borderBottomLeftRadius: tokens.borderRadiusMedium,\n          backgroundColor: tokens.gray100,\n          '&:hover': {\n            backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n          },\n        }),\n      variant === 'secondary' &&\n        (isActive || isFocused || isHovered) &&\n        css({\n          backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n        }),\n      (isActive || isFocused || isHovered) &&\n        css({\n          cursor: isActive ? 'grabbing' : 'grab',\n        }),\n    );\n  },\n});\n"]}
+{"version":3,"sources":["../../src/DragHandle.styles.ts","../../src/DragHandle.tsx"],"names":["getStyles","css","isActive","isFocused","isHovered","variant","cx","tokens","hexToRGBA","DRAG_HANDLE_DEFAULT_TAG","DragHandleBase","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","useState","setisHovered","handleFocus","useCallback","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","React","__spreadProps","__spreadValues","DotsSixVerticalIcon","DragHandle"],"mappings":"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","file":"index.js","sourcesContent":["import { cx, css } from '@emotion/css';\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        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        '&: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          borderRight: `1px solid ${tokens.gray200}`,\n          borderTopLeftRadius: tokens.borderRadiusMedium,\n          borderBottomLeftRadius: tokens.borderRadiusMedium,\n          backgroundColor: tokens.gray100,\n          '&:hover': {\n            backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n          },\n        }),\n      variant === 'secondary' &&\n        (isActive || isFocused || isHovered) &&\n        css({\n          backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n        }),\n      (isActive || isFocused || isHovered) &&\n        css({\n          cursor: isActive ? 'grabbing' : 'grab',\n        }),\n    );\n  },\n});\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/css';\nimport tokens from '@contentful/f36-tokens';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  CommonProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { DotsSixVerticalIcon } 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 DragHandleBase<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG>(\n  props: DragHandleProps<E>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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        <DotsSixVerticalIcon color={tokens.gray600} />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <button {...otherProps} {...commonProps} type=\"button\">\n      <DotsSixVerticalIcon color={tokens.gray600} />\n      <span className={styles.label}>{label}</span>\n    </button>\n  );\n}\n\nDragHandleBase.displayName = 'DragHandle';\n\nexport const DragHandle = React.forwardRef(\n  DragHandleBase,\n) as PolymorphicComponent<\n  ExpandProps<DragHandleInternalProps>,\n  typeof DRAG_HANDLE_DEFAULT_TAG,\n  'disabled'\n>;\n"]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import { PolymorphicProps, PolymorphicComponent, ExpandProps, CommonProps } from '@contentful/f36-core';
+import { PolymorphicComponent, ExpandProps, CommonProps, PolymorphicProps } from '@contentful/f36-core';
 
 declare const DRAG_HANDLE_DEFAULT_TAG = "div";
 interface DragHandleInternalProps extends CommonProps {
@@ -36,7 +36,7 @@ interface DragHandleInternalProps extends CommonProps {
      */
     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'>;
+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">;
 
-export { DragHandle, DragHandleProps };
+export { DragHandle, type DragHandleProps };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { ElementType } from 'react';
-import { PolymorphicProps, PolymorphicComponent, ExpandProps, CommonProps } from '@contentful/f36-core';
+import { PolymorphicComponent, ExpandProps, CommonProps, PolymorphicProps } from '@contentful/f36-core';
 
 declare const DRAG_HANDLE_DEFAULT_TAG = "div";
 interface DragHandleInternalProps extends CommonProps {
@@ -36,7 +36,7 @@ interface DragHandleInternalProps extends CommonProps {
      */
     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'>;
+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">;
 
-export { DragHandle, DragHandleProps };
+export { DragHandle, type DragHandleProps };

package/dist/index.js

@@ -1,18 +1,2 @@
-'use strict';
-
-var s = require('react');
-var emotion = require('emotion');
-var t = require('@contentful/f36-tokens');
-var f36Icons = require('@contentful/f36-icons');
-var f36Utils = require('@contentful/f36-utils');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var s__default = /*#__PURE__*/_interopDefault(s);
-var t__default = /*#__PURE__*/_interopDefault(t);
-
-var V=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?V(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,l=(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,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,"&:focus":{boxShadow:t__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t__default.default.glowPrimary}}),n==="secondary"&&emotion.css({borderRight:`1px solid ${t__default.default.gray200}`,borderTopLeftRadius:t__default.default.borderRadiusMedium,borderBottomLeftRadius:t__default.default.borderRadiusMedium,backgroundColor:t__default.default.gray100,"&:hover":{backgroundColor:f36Utils.hexToRGBA(t__default.default.gray900,.08)}}),n==="secondary"&&(o||r||e)&&emotion.css({backgroundColor:f36Utils.hexToRGBA(t__default.default.gray900,.08)}),(o||r||e)&&emotion.css({cursor:o?"grabbing":"grab"}))});var Q="div";function W(o,r){let e=T(),D=o,{as:n=Q,className:C,isActive:w,isFocused:G,isHovered:k,label:f,onBlur:c,onFocus:u,onMouseEnter:m,onMouseLeave:b,testId:N="cf-ui-drag-handle",style:R,variant:S="secondary"}=D,y=A(D,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","variant"]),[I,E]=s.useState(G),[B,H]=s.useState(k),U=s.useCallback(a=>{E(!0),u&&u(a);},[u]),$=s.useCallback(a=>{E(!1),c&&c(a);},[c]),j=s.useCallback(a=>{H(!0),m&&m(a);},[m]),z=s.useCallback(a=>{H(!1),b&&b(a);},[b]),v={className:emotion.cx(e.root({isActive:w,isFocused:I,isHovered:B,variant:S}),C),"data-test-id":N,onBlur:$,onFocus:U,onMouseEnter:j,onMouseLeave:z,ref:r,style:R};return n==="div"?s__default.default.createElement("div",g(l(l({},y),v),{role:"button",tabIndex:0}),s__default.default.createElement(f36Icons.DotsSixVerticalIcon,{color:t__default.default.gray600}),s__default.default.createElement("span",{className:e.label},f)):s__default.default.createElement("button",g(l(l({},y),v),{type:"button"}),s__default.default.createElement(f36Icons.DotsSixVerticalIcon,{color:t__default.default.gray600}),s__default.default.createElement("span",{className:e.label},f))}var X=s__default.default.forwardRef(W);
-
-exports.DragHandle = X;
-//# sourceMappingURL=out.js.map
+'use strict';var s=require('react'),css=require('@emotion/css'),t=require('@contentful/f36-tokens'),f36Icons=require('@contentful/f36-icons'),f36Utils=require('@contentful/f36-utils');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var s__default=/*#__PURE__*/_interopDefault(s);var t__default=/*#__PURE__*/_interopDefault(t);var q=Object.defineProperty,J=Object.defineProperties;var K=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?q(o,r,{enumerable:true,configurable:true,writable:true,value:e}):o[r]=e,l=(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},b=(o,r)=>J(o,K(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.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})=>css.cx(css.css({alignItems:"center",backgroundColor:"transparent",border:0,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,"&:focus":{boxShadow:t__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t__default.default.glowPrimary}}),n==="secondary"&&css.css({borderRight:`1px solid ${t__default.default.gray200}`,borderTopLeftRadius:t__default.default.borderRadiusMedium,borderBottomLeftRadius:t__default.default.borderRadiusMedium,backgroundColor:t__default.default.gray100,"&:hover":{backgroundColor:f36Utils.hexToRGBA(t__default.default.gray900,.08)}}),n==="secondary"&&(o||r||e)&&css.css({backgroundColor:f36Utils.hexToRGBA(t__default.default.gray900,.08)}),(o||r||e)&&css.css({cursor:o?"grabbing":"grab"}))});var W="div";function C(o,r){let e=T(),v=o,{as:n=W,className:w,isActive:G,isFocused:N,isHovered:k,label:f,onBlur:c,onFocus:u,onMouseEnter:m,onMouseLeave:g,testId:R="cf-ui-drag-handle",style:S,variant:I="secondary"}=v,y=A(v,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","variant"]),[B,H]=s.useState(N),[U,E]=s.useState(k),$=s.useCallback(a=>{H(true),u&&u(a);},[u]),j=s.useCallback(a=>{H(false),c&&c(a);},[c]),z=s.useCallback(a=>{E(true),m&&m(a);},[m]),V=s.useCallback(a=>{E(false),g&&g(a);},[g]),D={className:css.cx(e.root({isActive:G,isFocused:B,isHovered:U,variant:I}),w),"data-test-id":R,onBlur:j,onFocus:$,onMouseEnter:z,onMouseLeave:V,ref:r,style:S};return n==="div"?s__default.default.createElement("div",b(l(l({},y),D),{role:"button",tabIndex:0}),s__default.default.createElement(f36Icons.DotsSixVerticalIcon,{color:t__default.default.gray600}),s__default.default.createElement("span",{className:e.label},f)):s__default.default.createElement("button",b(l(l({},y),D),{type:"button"}),s__default.default.createElement(f36Icons.DotsSixVerticalIcon,{color:t__default.default.gray600}),s__default.default.createElement("span",{className:e.label},f))}C.displayName="DragHandle";var X=s__default.default.forwardRef(C);exports.DragHandle=X;//# sourceMappingURL=index.js.map
 //# 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","tokens","DotsSixVerticalIcon","css","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 tokens from '@contentful/f36-tokens';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  CommonProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { DotsSixVerticalIcon } 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        <DotsSixVerticalIcon color={tokens.gray600} />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <button {...otherProps} {...commonProps} type=\"button\">\n      <DotsSixVerticalIcon color={tokens.gray600} />\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        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        '&: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          borderRight: `1px solid ${tokens.gray200}`,\n          borderTopLeftRadius: tokens.borderRadiusMedium,\n          borderBottomLeftRadius: tokens.borderRadiusMedium,\n          backgroundColor: tokens.gray100,\n          '&:hover': {\n            backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n          },\n        }),\n      variant === 'secondary' &&\n        (isActive || isFocused || isHovered) &&\n        css({\n          backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n        }),\n      (isActive || isFocused || isHovered) &&\n        css({\n          cursor: isActive ? 'grabbing' : 'grab',\n        }),\n    );\n  },\n});\n"]}
+{"version":3,"sources":["../src/DragHandle.styles.ts","../src/DragHandle.tsx"],"names":["getStyles","css","isActive","isFocused","isHovered","variant","cx","tokens","hexToRGBA","DRAG_HANDLE_DEFAULT_TAG","DragHandleBase","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","useState","setisHovered","handleFocus","useCallback","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","React","__spreadProps","__spreadValues","DotsSixVerticalIcon","DragHandle"],"mappings":"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","file":"index.js","sourcesContent":["import { cx, css } from '@emotion/css';\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        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        '&: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          borderRight: `1px solid ${tokens.gray200}`,\n          borderTopLeftRadius: tokens.borderRadiusMedium,\n          borderBottomLeftRadius: tokens.borderRadiusMedium,\n          backgroundColor: tokens.gray100,\n          '&:hover': {\n            backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n          },\n        }),\n      variant === 'secondary' &&\n        (isActive || isFocused || isHovered) &&\n        css({\n          backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n        }),\n      (isActive || isFocused || isHovered) &&\n        css({\n          cursor: isActive ? 'grabbing' : 'grab',\n        }),\n    );\n  },\n});\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/css';\nimport tokens from '@contentful/f36-tokens';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  CommonProps,\n  ExpandProps,\n} from '@contentful/f36-core';\nimport { DotsSixVerticalIcon } 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 DragHandleBase<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG>(\n  props: DragHandleProps<E>,\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\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        <DotsSixVerticalIcon color={tokens.gray600} />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  }\n\n  return (\n    <button {...otherProps} {...commonProps} type=\"button\">\n      <DotsSixVerticalIcon color={tokens.gray600} />\n      <span className={styles.label}>{label}</span>\n    </button>\n  );\n}\n\nDragHandleBase.displayName = 'DragHandle';\n\nexport const DragHandle = React.forwardRef(\n  DragHandleBase,\n) as PolymorphicComponent<\n  ExpandProps<DragHandleInternalProps>,\n  typeof DRAG_HANDLE_DEFAULT_TAG,\n  'disabled'\n>;\n"]}

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@contentful/f36-drag-handle",
-  "version": "5.5.0",
+  "version": "6.0.0-alpha.1",
   "description": "Forma 36: DragHandle component",
   "scripts": {
     "build": "tsup"
   },
   "dependencies": {
-    "@contentful/f36-core": "^5.5.0",
-    "@contentful/f36-icons": "^5.5.0",
-    "@contentful/f36-utils": "^5.1.0",
-    "@contentful/f36-tokens": "^5.1.0",
-    "emotion": "^10.0.17"
+    "@contentful/f36-core": "^6.0.0-alpha.0",
+    "@contentful/f36-icons": "^6.0.0-alpha.0",
+    "@contentful/f36-utils": "^6.0.0-alpha.0",
+    "@contentful/f36-tokens": "^6.0.0-alpha.0",
+    "@emotion/css": "^11.13.5"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=19.1.0",
+    "react-dom": ">=19.1.0"
   },
   "license": "MIT",
   "files": [