@contentful/f36-drag-handle 4.8.1 → 4.8.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 4.8.2
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @contentful/f36-icons@4.8.2
+  - @contentful/f36-core@4.8.2
+
 ## 4.8.1
 
 ### Patch Changes

package/dist/main.js

@@ -37,8 +37,17 @@ const $590c5f6da3a22459$export$ffd58b7f6f099a57 = ()=>({
                 position: 'relative',
                 transition: `background-color ${($parcel$interopDefault($9zqHf$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9zqHf$contentfulf36tokens)).transitionEasingDefault}`,
                 width: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).spacingL,
-                '&:hover, &:focus': {
-                    backgroundColor: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).colorElementLight
+                '&:hover': {
+                    backgroundColor: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).gray200
+                },
+                '&:focus': {
+                    boxShadow: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).glowPrimary
+                },
+                '&:focus:not(:focus-visible)': {
+                    boxShadow: 'unset'
+                },
+                '&:focus-visible': {
+                    boxShadow: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).glowPrimary
                 }
             }), (isActive || isFocused || isHovered) && /*#__PURE__*/ $9zqHf$emotion.css({
                 backgroundColor: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).gray200,
@@ -49,8 +58,18 @@ const $590c5f6da3a22459$export$ffd58b7f6f099a57 = ()=>({
 ;
 
 
-const $7340ff11beb99de7$export$a0c24614540b0efb = /*#__PURE__*/ $9zqHf$react.forwardRef(({ 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 }, forwardedRef)=>{
+//
+// 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 = $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] = $9zqHf$react.useState(isFocusedProp);
     const [isHovered, setisHovered] = $9zqHf$react.useState(isHoveredProp);
     const handleFocus = $9zqHf$react.useCallback((event)=>{
@@ -77,38 +96,41 @@ const $7340ff11beb99de7$export$a0c24614540b0efb = /*#__PURE__*/ $9zqHf$react.for
     }, [
         onMouseLeave
     ]);
-    return(//
-    // 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
-    /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("div", {
-        role: "button",
-        tabIndex: 0,
-        type: "button",
-        ...otherProps,
+    const commonProps = {
         className: $9zqHf$emotion.cx(styles.root({
             isActive: isActive,
             isFocused: isFocused,
             isHovered: isHovered
         }), className),
+        'data-test-id': testId,
         onBlur: handleBlur,
         onFocus: handleFocus,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        "data-test-id": testId,
-        ref: forwardedRef,
+        ref: ref,
         style: style
+    };
+    if (as === 'div') return /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("div", {
+        ...otherProps,
+        ...commonProps,
+        role: "button",
+        tabIndex: 0
+    }, /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement($9zqHf$contentfulf36icons.DragIcon, {
+        variant: "muted"
+    }), /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("span", {
+        className: styles.label
+    }, label));
+    return /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("button", {
+        ...otherProps,
+        ...commonProps,
+        type: "button"
     }, /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement($9zqHf$contentfulf36icons.DragIcon, {
         variant: "muted"
     }), /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("span", {
         className: styles.label
-    }, label)));
-});
-$7340ff11beb99de7$export$a0c24614540b0efb.displayName = 'DragHandle';
+    }, label));
+}
+const $7340ff11beb99de7$export$a0c24614540b0efb = /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).forwardRef($7340ff11beb99de7$var$_DragHandle);
 
 
 

package/dist/main.js.map

@@ -1 +1 @@
-{"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  forwardRef,\n  useCallback,\n  useState,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\nimport { cx } from 'emotion';\nimport type { PropsWithHTMLElement } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\nimport { getStyles } from './DragHandle.styles';\n\nexport type DragHandleInternalProps = CommonProps & {\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 = PropsWithHTMLElement<\n  DragHandleInternalProps,\n  'div'\n>;\n\nexport const DragHandle = forwardRef<\n  HTMLDivElement,\n  ExpandProps<DragHandleProps>\n>(\n  (\n    {\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    },\n    forwardedRef,\n  ) => {\n    const styles = getStyles();\n    const [isFocused, setisFocused] = useState(isFocusedProp);\n    const [isHovered, setisHovered] = useState(isHoveredProp);\n\n    const handleFocus = useCallback<FocusEventHandler<HTMLDivElement>>(\n      (event) => {\n        setisFocused(true);\n\n        if (onFocus) {\n          onFocus(event);\n        }\n      },\n      [onFocus],\n    );\n\n    const handleBlur = useCallback<FocusEventHandler<HTMLDivElement>>(\n      (event) => {\n        setisFocused(false);\n\n        if (onBlur) {\n          onBlur(event);\n        }\n      },\n      [onBlur],\n    );\n\n    const handleMouseEnter = useCallback<MouseEventHandler<HTMLDivElement>>(\n      (event) => {\n        setisHovered(true);\n\n        if (onMouseEnter) {\n          onMouseEnter(event);\n        }\n      },\n      [onMouseEnter],\n    );\n\n    const handleMouseLeave = useCallback<MouseEventHandler<HTMLDivElement>>(\n      (event) => {\n        setisHovered(false);\n\n        if (onMouseLeave) {\n          onMouseLeave(event);\n        }\n      },\n      [onMouseLeave],\n    );\n\n    return (\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\n      <div\n        role=\"button\"\n        tabIndex={0}\n        type=\"button\"\n        {...otherProps}\n        className={cx(\n          styles.root({ isActive, isFocused, isHovered }),\n          className,\n        )}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        data-test-id={testId}\n        ref={forwardedRef}\n        style={style}\n      >\n        <DragIcon variant=\"muted\" />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  },\n);\n\nDragHandle.displayName = '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, &:focus': {\n          backgroundColor: tokens.colorElementLight,\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","forwardRef","useCallback","useState","FocusEventHandler","MouseEventHandler","PropsWithHTMLElement","CommonProps","ExpandProps","DragIcon","getStyles","DragHandleInternalProps","isActive","isFocused","isHovered","label","type","HTMLDivElement","className","isFocusedProp","isHoveredProp","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","forwardedRef","styles","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","root","displayName","tokens","alignItems","backgroundColor","gray100","border","borderBottomLeftRadius","borderRadiusMedium","borderRight","gray200","borderTopLeftRadius","boxSizing","display","justifyContent","padding","position","transition","transitionDurationDefault","transitionEasingDefault","width","spacingL","colorElementLight","cursor"],"version":3,"file":"main.js.map"}
+{"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, { useCallback, useState } from 'react';\nimport type {\n  /* ElementRef, */\n  ElementType,\n  FocusEventHandler,\n  MouseEventHandler,\n  Ref,\n} from 'react';\nimport { cx } from 'emotion';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n} from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\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,5 +1,5 @@
 import {cx as $8USmO$cx, css as $8USmO$css} from "emotion";
-import $8USmO$react, {forwardRef as $8USmO$forwardRef, useState as $8USmO$useState, useCallback as $8USmO$useCallback} from "react";
+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";
 
@@ -29,8 +29,17 @@ const $1282af47e008eae6$export$ffd58b7f6f099a57 = ()=>({
                 position: 'relative',
                 transition: `background-color ${$8USmO$contentfulf36tokens.transitionDurationDefault} ${$8USmO$contentfulf36tokens.transitionEasingDefault}`,
                 width: $8USmO$contentfulf36tokens.spacingL,
-                '&:hover, &:focus': {
-                    backgroundColor: $8USmO$contentfulf36tokens.colorElementLight
+                '&:hover': {
+                    backgroundColor: $8USmO$contentfulf36tokens.gray200
+                },
+                '&:focus': {
+                    boxShadow: $8USmO$contentfulf36tokens.glowPrimary
+                },
+                '&:focus:not(:focus-visible)': {
+                    boxShadow: 'unset'
+                },
+                '&:focus-visible': {
+                    boxShadow: $8USmO$contentfulf36tokens.glowPrimary
                 }
             }), (isActive || isFocused || isHovered) && /*#__PURE__*/ $8USmO$css({
                 backgroundColor: $8USmO$contentfulf36tokens.gray200,
@@ -41,8 +50,18 @@ const $1282af47e008eae6$export$ffd58b7f6f099a57 = ()=>({
 ;
 
 
-const $0d6e001a91dc675e$export$a0c24614540b0efb = /*#__PURE__*/ $8USmO$forwardRef(({ 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 }, forwardedRef)=>{
+//
+// 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 = $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] = $8USmO$useState(isFocusedProp);
     const [isHovered, setisHovered] = $8USmO$useState(isHoveredProp);
     const handleFocus = $8USmO$useCallback((event)=>{
@@ -69,38 +88,41 @@ const $0d6e001a91dc675e$export$a0c24614540b0efb = /*#__PURE__*/ $8USmO$forwardRe
     }, [
         onMouseLeave
     ]);
-    return(//
-    // 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
-    /*#__PURE__*/ $8USmO$react.createElement("div", {
-        role: "button",
-        tabIndex: 0,
-        type: "button",
-        ...otherProps,
+    const commonProps = {
         className: $8USmO$cx(styles.root({
             isActive: isActive,
             isFocused: isFocused,
             isHovered: isHovered
         }), className),
+        'data-test-id': testId,
         onBlur: handleBlur,
         onFocus: handleFocus,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
-        "data-test-id": testId,
-        ref: forwardedRef,
+        ref: ref,
         style: style
+    };
+    if (as === 'div') return /*#__PURE__*/ $8USmO$react.createElement("div", {
+        ...otherProps,
+        ...commonProps,
+        role: "button",
+        tabIndex: 0
+    }, /*#__PURE__*/ $8USmO$react.createElement($8USmO$DragIcon, {
+        variant: "muted"
+    }), /*#__PURE__*/ $8USmO$react.createElement("span", {
+        className: styles.label
+    }, label));
+    return /*#__PURE__*/ $8USmO$react.createElement("button", {
+        ...otherProps,
+        ...commonProps,
+        type: "button"
     }, /*#__PURE__*/ $8USmO$react.createElement($8USmO$DragIcon, {
         variant: "muted"
     }), /*#__PURE__*/ $8USmO$react.createElement("span", {
         className: styles.label
-    }, label)));
-});
-$0d6e001a91dc675e$export$a0c24614540b0efb.displayName = 'DragHandle';
+    }, label));
+}
+const $0d6e001a91dc675e$export$a0c24614540b0efb = /*#__PURE__*/ $8USmO$react.forwardRef($0d6e001a91dc675e$var$_DragHandle);
 
 
 

package/dist/module.js.map

@@ -1 +1 @@
-{"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  forwardRef,\n  useCallback,\n  useState,\n  FocusEventHandler,\n  MouseEventHandler,\n} from 'react';\nimport { cx } from 'emotion';\nimport type { PropsWithHTMLElement } from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\nimport { getStyles } from './DragHandle.styles';\n\nexport type DragHandleInternalProps = CommonProps & {\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 = PropsWithHTMLElement<\n  DragHandleInternalProps,\n  'div'\n>;\n\nexport const DragHandle = forwardRef<\n  HTMLDivElement,\n  ExpandProps<DragHandleProps>\n>(\n  (\n    {\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    },\n    forwardedRef,\n  ) => {\n    const styles = getStyles();\n    const [isFocused, setisFocused] = useState(isFocusedProp);\n    const [isHovered, setisHovered] = useState(isHoveredProp);\n\n    const handleFocus = useCallback<FocusEventHandler<HTMLDivElement>>(\n      (event) => {\n        setisFocused(true);\n\n        if (onFocus) {\n          onFocus(event);\n        }\n      },\n      [onFocus],\n    );\n\n    const handleBlur = useCallback<FocusEventHandler<HTMLDivElement>>(\n      (event) => {\n        setisFocused(false);\n\n        if (onBlur) {\n          onBlur(event);\n        }\n      },\n      [onBlur],\n    );\n\n    const handleMouseEnter = useCallback<MouseEventHandler<HTMLDivElement>>(\n      (event) => {\n        setisHovered(true);\n\n        if (onMouseEnter) {\n          onMouseEnter(event);\n        }\n      },\n      [onMouseEnter],\n    );\n\n    const handleMouseLeave = useCallback<MouseEventHandler<HTMLDivElement>>(\n      (event) => {\n        setisHovered(false);\n\n        if (onMouseLeave) {\n          onMouseLeave(event);\n        }\n      },\n      [onMouseLeave],\n    );\n\n    return (\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\n      <div\n        role=\"button\"\n        tabIndex={0}\n        type=\"button\"\n        {...otherProps}\n        className={cx(\n          styles.root({ isActive, isFocused, isHovered }),\n          className,\n        )}\n        onBlur={handleBlur}\n        onFocus={handleFocus}\n        onMouseEnter={handleMouseEnter}\n        onMouseLeave={handleMouseLeave}\n        data-test-id={testId}\n        ref={forwardedRef}\n        style={style}\n      >\n        <DragIcon variant=\"muted\" />\n        <span className={styles.label}>{label}</span>\n      </div>\n    );\n  },\n);\n\nDragHandle.displayName = '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, &:focus': {\n          backgroundColor: tokens.colorElementLight,\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","forwardRef","useCallback","useState","FocusEventHandler","MouseEventHandler","PropsWithHTMLElement","CommonProps","ExpandProps","DragIcon","getStyles","DragHandleInternalProps","isActive","isFocused","isHovered","label","type","HTMLDivElement","className","isFocusedProp","isHoveredProp","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","forwardedRef","styles","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","root","displayName","tokens","alignItems","backgroundColor","gray100","border","borderBottomLeftRadius","borderRadiusMedium","borderRight","gray200","borderTopLeftRadius","boxSizing","display","justifyContent","padding","position","transition","transitionDurationDefault","transitionEasingDefault","width","spacingL","colorElementLight","cursor"],"version":3,"file":"module.js.map"}
+{"mappings":";;;;;A;;;A;;;AEGO,MAAMc,yCAAS,GAAG,IAAO,CAAA;QAC9BO,KAAK,EAAA,aAAE,CAAA,UAAPA,CAAAA;YAAO,IAAA,EAAA,SAAA;YAAA,MAAA,EAAA,8GAAA;SAAA,CADuB;QAW9B0B,IAAI,EAAE,CAAC,E,UACL7B,QADK,CAAA,E,WAELC,SAFK,CAAA,E,WAGLC,SAAAA,CAAAA,EAHI,GAQA;YACJ,OAAO,SAAA,CAAA,aACL,CAAA,UAAA,CAAI;gBACF8B,UAAU,EAAE,QADV;gBAEFC,eAAe,EAAEF,0BAAM,CAACG,OAFtB;gBAGFC,MAAM,EAAE,CAHN;gBAIFC,sBAAsB,EAAEL,0BAAM,CAACM,kBAJ7B;gBAKFC,WAAW,EAAG,CAAA,UAAA,EAAYP,0BAAM,CAACQ,OAAQ,CAAA,CALvC;gBAMFC,mBAAmB,EAAET,0BAAM,CAACM,kBAN1B;gBAOFI,SAAS,EAAE,YAPT;gBAQFC,OAAO,EAAE,MARP;gBASFC,cAAc,EAAE,QATd;gBAUFC,OAAO,EAAE,CAVP;gBAWFC,QAAQ,EAAE,UAXR;gBAYFC,UAAU,EAAG,CAAA,iBAAA,EAAmBf,0BAAM,CAACgB,yBAA0B,CAAA,CAAA,EAAGhB,0BAAM,CAACiB,uBAAwB,CAAA,CAZjG;gBAaFC,KAAK,EAAElB,0BAAM,CAACmB,QAbZ;gBAcF,SAAA,EAAW;oBACTjB,eAAe,EAAEF,0BAAM,CAACQ,OAAxBN;iBAfA;gBAiBF,SAAA,EAAW;oBACTkB,SAAS,EAAEpB,0BAAM,CAACqB,WAAlBD;iBAlBA;gBAoBF,6BAAA,EAA+B;oBAC7BA,SAAS,EAAE,OAAXA;iBArBA;gBAuBF,iBAAA,EAAmB;oBACjBA,SAAS,EAAEpB,0BAAM,CAACqB,WAAlBD;iBADiB;aAvBrB,CADK,EA4BL,AAACnD,CAAAA,QAAQ,IAAIC,SAAZ,IAAyBC,SAA1B,CAAA,IAAA,aACE,CAAA,UAAA,CAAI;gBACF+B,eAAe,EAAEF,0BAAM,CAACQ,OADtB;gBAEFc,MAAM,EAAErD,QAAQ,GAAG,UAAH,GAAgB,MAAhCqD;aAFF,CA7BG,CAAP,CA6BQ;SAKT;KAtDsB,CAAA;AAAO;;;ADehC,EAAA;AACA,yFAAA;AACA,sEAAA;AACA,wGAAA;AACA,oFAAA;AACA,EAAA;AACA,sCAAA;AACA,kJAAA;AACA,MAAMxD,6CAAuB,GAAG,KAAhC,AAAA;AAoCA,SAASS,iCAAW,CAClBC,KADF,EAEEC,GAFF,EAGE;IACA,MAAMC,MAAM,GAAGb,yCAAS,EAAxB,AAAA;IACA,MAAM,MACJG,EAAE,GAAGF,6CADD,G,WAEJa,SAFI,CAAA,E,UAGJV,QAHI,CAAA,EAIJC,SAAS,EAAEU,aAJP,CAAA,EAKJT,SAAS,EAAEU,aALP,CAAA,E,OAMJT,KANI,CAAA,E,QAOJU,MAPI,CAAA,E,SAQJC,OARI,CAAA,E,cASJC,YATI,CAAA,E,cAUJC,YAVI,CAAA,UAWJC,MAAM,GAAG,mBAXL,G,OAYJC,KAZI,CAAA,EAaJ,GAAGC,UAAH,EAbI,GAcFZ,KAdJ,AAAM;IAeN,MAAM,CAACN,SAAD,EAAYmB,YAAZ,CAAA,GAA4BlC,eAAQ,CAACyB,aAAD,CAA1C,AAAA;IACA,MAAM,CAACT,SAAD,EAAYmB,YAAZ,CAAA,GAA4BnC,eAAQ,CAAC0B,aAAD,CAA1C,AAAA;IAEA,MAAMU,WAAW,GAAGrC,kBAAW,CAC5BuC,CAAAA,KAAD,GAAW;QACTJ,YAAY,CAAC,IAAD,CAAZ,CAAAA;QAEA,IAAIN,OAAJ,EACEA,OAAO,CAACU,KAAD,CAAP,CAAAV;KALyB,EAQ7B;QAACA,OAAD;KAR6B,CAA/B,AAOG;IAIH,MAAMW,UAAU,GAAGxC,kBAAW,CAC3BuC,CAAAA,KAAD,GAAW;QACTJ,YAAY,CAAC,KAAD,CAAZ,CAAAA;QAEA,IAAIP,MAAJ,EACEA,MAAM,CAACW,KAAD,CAAN,CAAAX;KALwB,EAQ5B;QAACA,MAAD;KAR4B,CAA9B,AAOG;IAIH,MAAMa,gBAAgB,GAAGzC,kBAAW,CACjCuC,CAAAA,KAAD,GAAW;QACTH,YAAY,CAAC,IAAD,CAAZ,CAAAA;QAEA,IAAIN,YAAJ,EACEA,YAAY,CAACS,KAAD,CAAZ,CAAAT;KAL8B,EAQlC;QAACA,YAAD;KARkC,CAApC,AAOG;IAIH,MAAMY,gBAAgB,GAAG1C,kBAAW,CACjCuC,CAAAA,KAAD,GAAW;QACTH,YAAY,CAAC,KAAD,CAAZ,CAAAA;QAEA,IAAIL,YAAJ,EACEA,YAAY,CAACQ,KAAD,CAAZ,CAAAR;KAL8B,EAQlC;QAACA,YAAD;KARkC,CAApC,AAOG;IAIH,MAAMY,WAAW,GAAG;QAClBlB,SAAS,EAAE,SAAA,CAAGD,MAAM,CAACoB,IAAP,CAAY;Y,UAAE7B,QAAF;Y,WAAYC,SAAZ;Y,WAAuBC,SAAAA;SAAnC,CAAH,EAAoDQ,SAApD,CADO;QAElB,cAAA,EAAgBO,MAFE;QAGlBJ,MAAM,EAAEY,UAHU;QAIlBX,OAAO,EAAEQ,WAJS;QAKlBP,YAAY,EAAEW,gBALI;QAMlBV,YAAY,EAAEW,gBANI;Q,KAOlBnB,GAPkB;Q,OAQlBU,KAAAA;KARF,AAAoB;IAWpB,IAAInB,EAAE,KAAK,KAAX,EACE,qBACE,2BAAC,KAAD;QAAK,GAAIoB,UAAJ;QAAgB,GAAIS,WAAJ;QAAiB,IAAA,EAAK,QAA3C;QAAoD,QAAA,EAAU,CAAD;qBAC3D,2BAAC,eAAD;QAAU,OAAA,EAAQ,OAAlB;MAAR,gBACQ,2BAAC,MAAD;QAAM,SAAA,EAAWnB,MAAM,CAACN,KAAR;OAAgBA,KAAD,CAAvC,CAHI,CAIJ;IAIE,qBACE,2BAAC,QAAD;QAAQ,GAAIgB,UAAJ;QAAgB,GAAIS,WAAJ;QAAiB,IAAA,EAAK,QAA9C;qBACE,2BAAC,eAAD;QAAU,OAAA,EAAQ,OAAlB;MAAN,gBACM,2BAAC,MAAD;QAAM,SAAA,EAAWnB,MAAM,CAACN,KAAR;OAAgBA,KAAD,CAArC,CAHE,CAIF;CAEC;AAEM,MAAMrB,yCAAU,iBAInBE,YAAK,CAAC8C,UAAN,CAAiBxB,iCAAjB,CAJG,AAAP;;AD7JA","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, { useCallback, useState } from 'react';\nimport type {\n  /* ElementRef, */\n  ElementType,\n  FocusEventHandler,\n  MouseEventHandler,\n  Ref,\n} from 'react';\nimport { cx } from 'emotion';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n} from '@contentful/f36-core';\nimport type { CommonProps, ExpandProps } from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\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

@@ -1,31 +1,12 @@
-import React from "react";
-import { PropsWithHTMLElement, CommonProps } from "@contentful/f36-core";
-type DragHandleInternalProps = CommonProps & {
+import { ElementType } from "react";
+import { PolymorphicComponent, PolymorphicProps, CommonProps, ExpandProps } from "@contentful/f36-core";
+declare const DRAG_HANDLE_DEFAULT_TAG = "div";
+interface DragHandleInternalProps extends CommonProps {
     /**
-     * Applies styling for when the component is actively being dragged by
-     * the user
-     */
-    isActive?: boolean;
-    /**
-     * Applies focus styling
-     */
-    isFocused?: boolean;
-    /**
-     * Applies hover styling
+     * The element used for the root node
+     * @default div
      */
-    isHovered?: boolean;
-    /**
-     * Label rendered in DragHandle - not visible on screen as its purpose
-     * is for screen readers only
-     */
-    label: string;
-    /**
-     * Set type button for div element
-     */
-    type?: string;
-};
-export type DragHandleProps = PropsWithHTMLElement<DragHandleInternalProps, 'div'>;
-export const DragHandle: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>>, never>, "isActive" | "isFocused" | "isHovered" | "label" | keyof CommonProps | "type"> & CommonProps & {
+    as?: 'button' | 'div';
     /**
      * Applies styling for when the component is actively being dragged by
      * the user
@@ -48,6 +29,8 @@ export const DragHandle: React.ForwardRefExoticComponent<Omit<Omit<Pick<React.De
      * Set type button for div element
      */
     type?: string;
-} & React.RefAttributes<HTMLDivElement>>;
+}
+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'>;
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;ACaA,+BAAsC,WAAW,GAAG;IAClD;;;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,CAAC;AAEF,8BAA8B,qBAC5B,uBAAuB,EACvB,KAAK,CACN,CAAC;AAEF,OAAO,MAAM;IA7BX;;;OAGG;eACQ,OAAO;IAClB;;OAEG;gBACS,OAAO;IACnB;;OAEG;gBACS,OAAO;IACnB;;;OAGG;WACI,MAAM;IACb;;OAEG;WACI,MAAM;wCA6Gd,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"}
+{"mappings":";;AC0BA,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"}

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@contentful/f36-drag-handle",
-  "version": "4.8.1",
+  "version": "4.8.2",
   "description": "Forma 36: DragHandle component",
   "scripts": {
     "build": "parcel build"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.8.1",
-    "@contentful/f36-icons": "^4.8.1",
+    "@contentful/f36-core": "^4.8.2",
+    "@contentful/f36-icons": "^4.8.2",
     "@contentful/f36-tokens": "^4.0.1",
     "emotion": "^10.0.17"
   },