npm - @contentful/f36-drag-handle - Versions diffs - 4.13.0 → 4.15.1 - Mend

@contentful/f36-drag-handle 4.13.0 → 4.15.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,29 @@
 # Change Log
+## 4.15.1
+### Patch Changes
+- Updated dependencies []:
+  - @contentful/f36-icons@4.15.1
+  - @contentful/f36-core@4.15.1
+## 4.15.0
+### Patch Changes
+- Updated dependencies []:
+  - @contentful/f36-icons@4.15.0
+  - @contentful/f36-core@4.15.0
+## 4.14.0
+### Patch Changes
+- Updated dependencies []:
+  - @contentful/f36-icons@4.14.0
+  - @contentful/f36-core@4.14.0
 ## 4.13.0
 ### Patch Changes

package/dist/main.js CHANGED Viewed

@@ -18,44 +18,43 @@ $parcel$export(module.exports, "DragHandle", () => $7340ff11beb99de7$export$a0c2
 const $590c5f6da3a22459$export$ffd58b7f6f099a57 = ()=>({
-        label: /*#__PURE__*/ $9zqHf$emotion.css({
+        label: /*#__PURE__*/ (0, $9zqHf$emotion.css)({
             name: "1b512s9",
             styles: "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;"
         }),
         root: ({ isActive: isActive , isFocused: isFocused , isHovered: isHovered  })=>{
-            return $9zqHf$emotion.cx(/*#__PURE__*/ $9zqHf$emotion.css({
-                alignItems: 'center',
-                backgroundColor: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).gray100,
+            return (0, $9zqHf$emotion.cx)(/*#__PURE__*/ (0, $9zqHf$emotion.css)({
+                alignItems: "center",
+                backgroundColor: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).gray100,
                 border: 0,
-                borderBottomLeftRadius: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).borderRadiusMedium,
-                borderRight: `1px solid ${($parcel$interopDefault($9zqHf$contentfulf36tokens)).gray200}`,
-                borderTopLeftRadius: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).borderRadiusMedium,
-                boxSizing: 'border-box',
-                display: 'flex',
-                justifyContent: 'center',
+                borderBottomLeftRadius: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).borderRadiusMedium,
+                borderRight: `1px solid ${(0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).gray200}`,
+                borderTopLeftRadius: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).borderRadiusMedium,
+                boxSizing: "border-box",
+                display: "flex",
+                justifyContent: "center",
                 padding: 0,
-                position: 'relative',
-                transition: `background-color ${($parcel$interopDefault($9zqHf$contentfulf36tokens)).transitionDurationDefault} ${($parcel$interopDefault($9zqHf$contentfulf36tokens)).transitionEasingDefault}`,
-                width: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).spacingL,
-                '&:hover': {
-                    backgroundColor: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).gray200
+                position: "relative",
+                transition: `background-color ${(0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).transitionDurationDefault} ${(0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).transitionEasingDefault}`,
+                width: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).spacingL,
+                "&:hover": {
+                    backgroundColor: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).gray200
                 },
-                '&:focus': {
-                    boxShadow: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).glowPrimary
+                "&:focus": {
+                    boxShadow: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).glowPrimary
                 },
-                '&:focus:not(:focus-visible)': {
-                    boxShadow: 'unset'
+                "&:focus:not(:focus-visible)": {
+                    boxShadow: "unset"
                 },
-                '&:focus-visible': {
-                    boxShadow: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).glowPrimary
+                "&:focus-visible": {
+                    boxShadow: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).glowPrimary
                 }
-            }), (isActive || isFocused || isHovered) && /*#__PURE__*/ $9zqHf$emotion.css({
-                backgroundColor: ($parcel$interopDefault($9zqHf$contentfulf36tokens)).gray200,
-                cursor: isActive ? 'grabbing' : 'grab'
+            }), (isActive || isFocused || isHovered) && /*#__PURE__*/ (0, $9zqHf$emotion.css)({
+                backgroundColor: (0, ($parcel$interopDefault($9zqHf$contentfulf36tokens))).gray200,
+                cursor: isActive ? "grabbing" : "grab"
             }));
         }
-    })
-;
+    });
 //
@@ -66,43 +65,43 @@ const $590c5f6da3a22459$export$ffd58b7f6f099a57 = ()=>({
 //
 // default shouldCancelStart callback:
 // https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js
-const $7340ff11beb99de7$var$DRAG_HANDLE_DEFAULT_TAG = 'div';
+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)=>{
+    const styles = (0, $590c5f6da3a22459$export$ffd58b7f6f099a57)();
+    const { as: as = $7340ff11beb99de7$var$DRAG_HANDLE_DEFAULT_TAG , className: className , isActive: isActive , isFocused: isFocusedProp , isHovered: isHoveredProp , label: label , onBlur: onBlur , onFocus: onFocus , onMouseEnter: onMouseEnter , onMouseLeave: onMouseLeave , testId: testId = "cf-ui-drag-handle" , style: style , ...otherProps } = props;
+    const [isFocused, setisFocused] = (0, $9zqHf$react.useState)(isFocusedProp);
+    const [isHovered, setisHovered] = (0, $9zqHf$react.useState)(isHoveredProp);
+    const handleFocus = (0, $9zqHf$react.useCallback)((event)=>{
         setisFocused(true);
         if (onFocus) onFocus(event);
     }, [
         onFocus
     ]);
-    const handleBlur = $9zqHf$react.useCallback((event)=>{
+    const handleBlur = (0, $9zqHf$react.useCallback)((event)=>{
         setisFocused(false);
         if (onBlur) onBlur(event);
     }, [
         onBlur
     ]);
-    const handleMouseEnter = $9zqHf$react.useCallback((event)=>{
+    const handleMouseEnter = (0, $9zqHf$react.useCallback)((event)=>{
         setisHovered(true);
         if (onMouseEnter) onMouseEnter(event);
     }, [
         onMouseEnter
     ]);
-    const handleMouseLeave = $9zqHf$react.useCallback((event)=>{
+    const handleMouseLeave = (0, $9zqHf$react.useCallback)((event)=>{
         setisHovered(false);
         if (onMouseLeave) onMouseLeave(event);
     }, [
         onMouseLeave
     ]);
     const commonProps = {
-        className: $9zqHf$emotion.cx(styles.root({
+        className: (0, $9zqHf$emotion.cx)(styles.root({
             isActive: isActive,
             isFocused: isFocused,
             isHovered: isHovered
         }), className),
-        'data-test-id': testId,
+        "data-test-id": testId,
         onBlur: handleBlur,
         onFocus: handleFocus,
         onMouseEnter: handleMouseEnter,
@@ -110,27 +109,27 @@ function $7340ff11beb99de7$var$_DragHandle(props, ref) {
         ref: ref,
         style: style
     };
-    if (as === 'div') return /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("div", {
+    if (as === "div") return /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement("div", {
         ...otherProps,
         ...commonProps,
         role: "button",
         tabIndex: 0
-    }, /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement($9zqHf$contentfulf36icons.DragIcon, {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement((0, $9zqHf$contentfulf36icons.DragIcon), {
         variant: "muted"
-    }), /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("span", {
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement("span", {
         className: styles.label
     }, label));
-    return /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("button", {
+    return /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement("button", {
         ...otherProps,
         ...commonProps,
         type: "button"
-    }, /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement($9zqHf$contentfulf36icons.DragIcon, {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement((0, $9zqHf$contentfulf36icons.DragIcon), {
         variant: "muted"
-    }), /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).createElement("span", {
+    }), /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).createElement("span", {
         className: styles.label
     }, label));
 }
-const $7340ff11beb99de7$export$a0c24614540b0efb = /*#__PURE__*/ ($parcel$interopDefault($9zqHf$react)).forwardRef($7340ff11beb99de7$var$_DragHandle);
+const $7340ff11beb99de7$export$a0c24614540b0efb = /*#__PURE__*/ (0, ($parcel$interopDefault($9zqHf$react))).forwardRef($7340ff11beb99de7$var$_DragHandle);

package/dist/main.js.map CHANGED Viewed

	@@ -1 +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, { 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"}
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, { 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 CHANGED Viewed

@@ -10,44 +10,43 @@ import $8USmO$contentfulf36tokens from "@contentful/f36-tokens";
 const $1282af47e008eae6$export$ffd58b7f6f099a57 = ()=>({
-        label: /*#__PURE__*/ $8USmO$css({
+        label: /*#__PURE__*/ (0, $8USmO$css)({
             name: "1b512s9",
             styles: "position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0;"
         }),
         root: ({ isActive: isActive , isFocused: isFocused , isHovered: isHovered  })=>{
-            return $8USmO$cx(/*#__PURE__*/ $8USmO$css({
-                alignItems: 'center',
-                backgroundColor: $8USmO$contentfulf36tokens.gray100,
+            return (0, $8USmO$cx)(/*#__PURE__*/ (0, $8USmO$css)({
+                alignItems: "center",
+                backgroundColor: (0, $8USmO$contentfulf36tokens).gray100,
                 border: 0,
-                borderBottomLeftRadius: $8USmO$contentfulf36tokens.borderRadiusMedium,
-                borderRight: `1px solid ${$8USmO$contentfulf36tokens.gray200}`,
-                borderTopLeftRadius: $8USmO$contentfulf36tokens.borderRadiusMedium,
-                boxSizing: 'border-box',
-                display: 'flex',
-                justifyContent: 'center',
+                borderBottomLeftRadius: (0, $8USmO$contentfulf36tokens).borderRadiusMedium,
+                borderRight: `1px solid ${(0, $8USmO$contentfulf36tokens).gray200}`,
+                borderTopLeftRadius: (0, $8USmO$contentfulf36tokens).borderRadiusMedium,
+                boxSizing: "border-box",
+                display: "flex",
+                justifyContent: "center",
                 padding: 0,
-                position: 'relative',
-                transition: `background-color ${$8USmO$contentfulf36tokens.transitionDurationDefault} ${$8USmO$contentfulf36tokens.transitionEasingDefault}`,
-                width: $8USmO$contentfulf36tokens.spacingL,
-                '&:hover': {
-                    backgroundColor: $8USmO$contentfulf36tokens.gray200
+                position: "relative",
+                transition: `background-color ${(0, $8USmO$contentfulf36tokens).transitionDurationDefault} ${(0, $8USmO$contentfulf36tokens).transitionEasingDefault}`,
+                width: (0, $8USmO$contentfulf36tokens).spacingL,
+                "&:hover": {
+                    backgroundColor: (0, $8USmO$contentfulf36tokens).gray200
                 },
-                '&:focus': {
-                    boxShadow: $8USmO$contentfulf36tokens.glowPrimary
+                "&:focus": {
+                    boxShadow: (0, $8USmO$contentfulf36tokens).glowPrimary
                 },
-                '&:focus:not(:focus-visible)': {
-                    boxShadow: 'unset'
+                "&:focus:not(:focus-visible)": {
+                    boxShadow: "unset"
                 },
-                '&:focus-visible': {
-                    boxShadow: $8USmO$contentfulf36tokens.glowPrimary
+                "&:focus-visible": {
+                    boxShadow: (0, $8USmO$contentfulf36tokens).glowPrimary
                 }
-            }), (isActive || isFocused || isHovered) && /*#__PURE__*/ $8USmO$css({
-                backgroundColor: $8USmO$contentfulf36tokens.gray200,
-                cursor: isActive ? 'grabbing' : 'grab'
+            }), (isActive || isFocused || isHovered) && /*#__PURE__*/ (0, $8USmO$css)({
+                backgroundColor: (0, $8USmO$contentfulf36tokens).gray200,
+                cursor: isActive ? "grabbing" : "grab"
             }));
         }
-    })
-;
+    });
 //
@@ -58,43 +57,43 @@ const $1282af47e008eae6$export$ffd58b7f6f099a57 = ()=>({
 //
 // default shouldCancelStart callback:
 // https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js
-const $0d6e001a91dc675e$var$DRAG_HANDLE_DEFAULT_TAG = 'div';
+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)=>{
+    const styles = (0, $1282af47e008eae6$export$ffd58b7f6f099a57)();
+    const { as: as = $0d6e001a91dc675e$var$DRAG_HANDLE_DEFAULT_TAG , className: className , isActive: isActive , isFocused: isFocusedProp , isHovered: isHoveredProp , label: label , onBlur: onBlur , onFocus: onFocus , onMouseEnter: onMouseEnter , onMouseLeave: onMouseLeave , testId: testId = "cf-ui-drag-handle" , style: style , ...otherProps } = props;
+    const [isFocused, setisFocused] = (0, $8USmO$useState)(isFocusedProp);
+    const [isHovered, setisHovered] = (0, $8USmO$useState)(isHoveredProp);
+    const handleFocus = (0, $8USmO$useCallback)((event)=>{
         setisFocused(true);
         if (onFocus) onFocus(event);
     }, [
         onFocus
     ]);
-    const handleBlur = $8USmO$useCallback((event)=>{
+    const handleBlur = (0, $8USmO$useCallback)((event)=>{
         setisFocused(false);
         if (onBlur) onBlur(event);
     }, [
         onBlur
     ]);
-    const handleMouseEnter = $8USmO$useCallback((event)=>{
+    const handleMouseEnter = (0, $8USmO$useCallback)((event)=>{
         setisHovered(true);
         if (onMouseEnter) onMouseEnter(event);
     }, [
         onMouseEnter
     ]);
-    const handleMouseLeave = $8USmO$useCallback((event)=>{
+    const handleMouseLeave = (0, $8USmO$useCallback)((event)=>{
         setisHovered(false);
         if (onMouseLeave) onMouseLeave(event);
     }, [
         onMouseLeave
     ]);
     const commonProps = {
-        className: $8USmO$cx(styles.root({
+        className: (0, $8USmO$cx)(styles.root({
             isActive: isActive,
             isFocused: isFocused,
             isHovered: isHovered
         }), className),
-        'data-test-id': testId,
+        "data-test-id": testId,
         onBlur: handleBlur,
         onFocus: handleFocus,
         onMouseEnter: handleMouseEnter,
@@ -102,27 +101,27 @@ function $0d6e001a91dc675e$var$_DragHandle(props, ref) {
         ref: ref,
         style: style
     };
-    if (as === 'div') return /*#__PURE__*/ $8USmO$react.createElement("div", {
+    if (as === "div") return /*#__PURE__*/ (0, $8USmO$react).createElement("div", {
         ...otherProps,
         ...commonProps,
         role: "button",
         tabIndex: 0
-    }, /*#__PURE__*/ $8USmO$react.createElement($8USmO$DragIcon, {
+    }, /*#__PURE__*/ (0, $8USmO$react).createElement((0, $8USmO$DragIcon), {
         variant: "muted"
-    }), /*#__PURE__*/ $8USmO$react.createElement("span", {
+    }), /*#__PURE__*/ (0, $8USmO$react).createElement("span", {
         className: styles.label
     }, label));
-    return /*#__PURE__*/ $8USmO$react.createElement("button", {
+    return /*#__PURE__*/ (0, $8USmO$react).createElement("button", {
         ...otherProps,
         ...commonProps,
         type: "button"
-    }, /*#__PURE__*/ $8USmO$react.createElement($8USmO$DragIcon, {
+    }, /*#__PURE__*/ (0, $8USmO$react).createElement((0, $8USmO$DragIcon), {
         variant: "muted"
-    }), /*#__PURE__*/ $8USmO$react.createElement("span", {
+    }), /*#__PURE__*/ (0, $8USmO$react).createElement("span", {
         className: styles.label
     }, label));
 }
-const $0d6e001a91dc675e$export$a0c24614540b0efb = /*#__PURE__*/ $8USmO$react.forwardRef($0d6e001a91dc675e$var$_DragHandle);
+const $0d6e001a91dc675e$export$a0c24614540b0efb = /*#__PURE__*/ (0, $8USmO$react).forwardRef($0d6e001a91dc675e$var$_DragHandle);

package/dist/module.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"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"}
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, { 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/package.json CHANGED Viewed

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