@contentful/f36-drag-handle 4.47.3 → 4.48.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.
- package/dist/esm/index.js +1 -0
- package/dist/esm/index.js.map +1 -1
- package/dist/index.d.mts +42 -0
- package/dist/index.js +5 -6
- package/dist/index.js.map +1 -1
- package/package.json +3 -3
package/dist/esm/index.js
CHANGED
|
@@ -7,4 +7,5 @@ import { hexToRGBA } from '@contentful/f36-utils';
|
|
|
7
7
|
var z=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?z(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,i=(o,r)=>{for(var e in r||(r={}))P.call(r,e)&&x(o,e,r[e]);if(d)for(var e of d(r))h.call(r,e)&&x(o,e,r[e]);return o},g=(o,r)=>q(o,J(r));var A=(o,r)=>{var e={};for(var n in o)P.call(o,n)&&r.indexOf(n)<0&&(e[n]=o[n]);if(o!=null&&d)for(var n of d(o))r.indexOf(n)<0&&h.call(o,n)&&(e[n]=o[n]);return e};var T=()=>({label:css({position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),root:({isActive:o,isFocused:r,isHovered:e,variant:n})=>cx(css({alignItems:"center",backgroundColor:"transparent",border:0,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t.transitionDurationDefault} ${t.transitionEasingDefault}`,width:t.spacingL,"&:focus":{boxShadow:t.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t.glowPrimary}}),n==="secondary"&&css({borderRight:`1px solid ${t.gray200}`,borderTopLeftRadius:t.borderRadiusMedium,borderBottomLeftRadius:t.borderRadiusMedium,backgroundColor:t.gray100,"&:hover":{backgroundColor:hexToRGBA(t.gray900,.08)}}),n==="secondary"&&(o||r||e)&&css({backgroundColor:hexToRGBA(t.gray900,.08)}),(o||r||e)&&css({cursor:o?"grabbing":"grab"}))});var Q="div";function V(o,r){let e=T(),D=o,{as:n=Q,className:_,isActive:C,isFocused:w,isHovered:G,label:f,onBlur:u,onFocus:c,onMouseEnter:m,onMouseLeave:b,testId:N="cf-ui-drag-handle",style:R,variant:k="secondary"}=D,y=A(D,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","variant"]),[I,E]=useState(w),[S,H]=useState(G),B=useCallback(a=>{E(!0),c&&c(a);},[c]),U=useCallback(a=>{E(!1),u&&u(a);},[u]),$=useCallback(a=>{H(!0),m&&m(a);},[m]),j=useCallback(a=>{H(!1),b&&b(a);},[b]),v={className:cx(e.root({isActive:C,isFocused:I,isHovered:S,variant:k}),_),"data-test-id":N,onBlur:U,onFocus:B,onMouseEnter:$,onMouseLeave:j,ref:r,style:R};return n==="div"?s.createElement("div",g(i(i({},y),v),{role:"button",tabIndex:0}),s.createElement(DragIcon,{variant:"muted"}),s.createElement("span",{className:e.label},f)):s.createElement("button",g(i(i({},y),v),{type:"button"}),s.createElement(DragIcon,{variant:"muted"}),s.createElement("span",{className:e.label},f))}var W=s.forwardRef(V);
|
|
8
8
|
|
|
9
9
|
export { W as DragHandle };
|
|
10
|
+
//# sourceMappingURL=out.js.map
|
|
10
11
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/DragHandle.tsx","../../src/DragHandle.styles.ts"],"names":["React","useCallback","useState","cx","DragIcon","css","tokens","hexToRGBA","getStyles","isActive","isFocused","isHovered","variant","DRAG_HANDLE_DEFAULT_TAG","_DragHandle","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","__spreadProps","__spreadValues","DragHandle"],"mappings":"+kBAAA,OAAOA,GACL,eAAAC,EACA,YAAAC,MAKK,QACP,OAAS,MAAAC,MAAU,UAOnB,OAAS,YAAAC,MAAgB,wBCfzB,OAAS,MAAAD,EAAI,OAAAE,MAAW,UACxB,OAAOC,MAAY,yBACnB,OAAS,aAAAC,MAAiB,wBAGnB,IAAMC,EAAY,KAAO,CAC9B,MAAOH,EAAI,CACT,SAAU,WACV,MAAO,MACP,OAAQ,MACR,QAAS,EACT,OAAQ,OACR,SAAU,SACV,KAAM,mBACN,OAAQ,CACV,CAAC,EACD,KAAM,CAAC,CACL,SAAAI,EACA,UAAAC,EACA,UAAAC,EACA,QAAAC,CACF,IAMST,EACLE,EAAI,CACF,WAAY,SACZ,gBAAiB,cACjB,OAAQ,EACR,UAAW,aACX,QAAS,OACT,eAAgB,SAChB,QAAS,EACT,OAAQ,EACR,SAAU,WACV,WAAY,oBAAoBC,EAAO,
|
|
1
|
+
{"version":3,"sources":["../../src/DragHandle.tsx","../../src/DragHandle.styles.ts"],"names":["React","useCallback","useState","cx","DragIcon","css","tokens","hexToRGBA","getStyles","isActive","isFocused","isHovered","variant","DRAG_HANDLE_DEFAULT_TAG","_DragHandle","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","__spreadProps","__spreadValues","DragHandle"],"mappings":"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","sourcesContent":["import React, {\n useCallback,\n useState,\n type ElementType,\n type FocusEventHandler,\n type MouseEventHandler,\n type Ref,\n} from 'react';\nimport { cx } from 'emotion';\nimport type {\n PolymorphicComponent,\n PolymorphicProps,\n CommonProps,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\n\nimport { getStyles } from './DragHandle.styles';\n\n// We use div instead of a button because react-sortable-hoc lib cancels sorting if the event target is button.\n//\n// The other alternative way to fix it was to pass a custom `shouldCancelStart` callback,\n// in every place where we use this component with react-sortable-hoc.\n// (the custom callback with all the logic from default callback, but without button event cancelation).\n// So we decided that just changing it to the div, as it was in v3, is a better fix.\n//\n// default shouldCancelStart callback:\n// https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js\nconst DRAG_HANDLE_DEFAULT_TAG = 'div';\n\nexport interface DragHandleInternalProps extends CommonProps {\n /**\n * The element used for the root node\n * @default div\n */\n as?: 'button' | 'div';\n /**\n * Applies styling for when the component is actively being dragged by\n * the user\n */\n isActive?: boolean;\n /**\n * Applies focus styling\n */\n isFocused?: boolean;\n /**\n * Applies hover styling\n */\n isHovered?: boolean;\n /**\n * Label rendered in DragHandle - not visible on screen as its purpose\n * is for screen readers only\n */\n label: string;\n /**\n * Set type button for div element\n */\n type?: string;\n\n /**\n * Determines style variation\n * @default secondary\n */\n variant?: 'secondary' | 'transparent';\n}\n\nexport type DragHandleProps<\n E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG,\n> = PolymorphicProps<DragHandleInternalProps, E>;\n\nfunction _DragHandle<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG>(\n props: DragHandleProps<E>,\n ref: Ref<any>,\n) {\n const styles = getStyles();\n const {\n as = DRAG_HANDLE_DEFAULT_TAG,\n className,\n isActive,\n isFocused: isFocusedProp,\n isHovered: isHoveredProp,\n label,\n onBlur,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n testId = 'cf-ui-drag-handle',\n style,\n variant = 'secondary',\n ...otherProps\n } = props;\n const [isFocused, setisFocused] = useState(isFocusedProp);\n const [isHovered, setisHovered] = useState(isHoveredProp);\n\n const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n (event) => {\n setisFocused(true);\n\n if (onFocus) {\n onFocus(event);\n }\n },\n [onFocus],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n (event) => {\n setisFocused(false);\n\n if (onBlur) {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback<MouseEventHandler<HTMLElement>>(\n (event) => {\n setisHovered(true);\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback<MouseEventHandler<HTMLElement>>(\n (event) => {\n setisHovered(false);\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave],\n );\n\n const commonProps = {\n className: cx(\n styles.root({ isActive, isFocused, isHovered, variant }),\n className,\n ),\n 'data-test-id': testId,\n onBlur: handleBlur,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n ref,\n style,\n };\n\n if (as === 'div') {\n return (\n <div {...otherProps} {...commonProps} role=\"button\" tabIndex={0}>\n <DragIcon variant=\"muted\" />\n <span className={styles.label}>{label}</span>\n </div>\n );\n }\n\n return (\n <button {...otherProps} {...commonProps} type=\"button\">\n <DragIcon variant=\"muted\" />\n <span className={styles.label}>{label}</span>\n </button>\n );\n}\n\nexport const DragHandle: PolymorphicComponent<\n ExpandProps<DragHandleInternalProps>,\n typeof DRAG_HANDLE_DEFAULT_TAG,\n 'disabled'\n> = React.forwardRef(_DragHandle);\n","import { cx, css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { DragHandleProps } from './DragHandle';\n\nexport const getStyles = () => ({\n label: css({\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: 0,\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n border: 0,\n }),\n root: ({\n isActive,\n isFocused,\n isHovered,\n variant,\n }: {\n isActive: boolean;\n isFocused: boolean;\n isHovered: boolean;\n variant: DragHandleProps['variant'];\n }) => {\n return cx(\n css({\n alignItems: 'center',\n backgroundColor: 'transparent',\n border: 0,\n boxSizing: 'border-box',\n display: 'flex',\n justifyContent: 'center',\n padding: 0,\n margin: 0, // remove the default button margin in Safari.\n position: 'relative',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n width: tokens.spacingL,\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n }),\n variant === 'secondary' &&\n css({\n borderRight: `1px solid ${tokens.gray200}`,\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.gray100,\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n },\n }),\n variant === 'secondary' &&\n (isActive || isFocused || isHovered) &&\n css({\n backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n }),\n (isActive || isFocused || isHovered) &&\n css({\n cursor: isActive ? 'grabbing' : 'grab',\n }),\n );\n },\n});\n"]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
import { ElementType } from 'react';
|
|
2
|
+
import { PolymorphicProps, PolymorphicComponent, ExpandProps, CommonProps } from '@contentful/f36-core';
|
|
3
|
+
|
|
4
|
+
declare const DRAG_HANDLE_DEFAULT_TAG = "div";
|
|
5
|
+
interface DragHandleInternalProps extends CommonProps {
|
|
6
|
+
/**
|
|
7
|
+
* The element used for the root node
|
|
8
|
+
* @default div
|
|
9
|
+
*/
|
|
10
|
+
as?: 'button' | 'div';
|
|
11
|
+
/**
|
|
12
|
+
* Applies styling for when the component is actively being dragged by
|
|
13
|
+
* the user
|
|
14
|
+
*/
|
|
15
|
+
isActive?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Applies focus styling
|
|
18
|
+
*/
|
|
19
|
+
isFocused?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Applies hover styling
|
|
22
|
+
*/
|
|
23
|
+
isHovered?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Label rendered in DragHandle - not visible on screen as its purpose
|
|
26
|
+
* is for screen readers only
|
|
27
|
+
*/
|
|
28
|
+
label: string;
|
|
29
|
+
/**
|
|
30
|
+
* Set type button for div element
|
|
31
|
+
*/
|
|
32
|
+
type?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Determines style variation
|
|
35
|
+
* @default secondary
|
|
36
|
+
*/
|
|
37
|
+
variant?: 'secondary' | 'transparent';
|
|
38
|
+
}
|
|
39
|
+
declare type DragHandleProps<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG> = PolymorphicProps<DragHandleInternalProps, E>;
|
|
40
|
+
declare const DragHandle: PolymorphicComponent<ExpandProps<DragHandleInternalProps>, typeof DRAG_HANDLE_DEFAULT_TAG, 'disabled'>;
|
|
41
|
+
|
|
42
|
+
export { DragHandle, DragHandleProps };
|
package/dist/index.js
CHANGED
|
@@ -1,19 +1,18 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var s = require('react');
|
|
6
4
|
var emotion = require('emotion');
|
|
7
5
|
var f36Icons = require('@contentful/f36-icons');
|
|
8
6
|
var t = require('@contentful/f36-tokens');
|
|
9
7
|
var f36Utils = require('@contentful/f36-utils');
|
|
10
8
|
|
|
11
|
-
function
|
|
9
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
10
|
|
|
13
|
-
var s__default = /*#__PURE__*/
|
|
14
|
-
var t__default = /*#__PURE__*/
|
|
11
|
+
var s__default = /*#__PURE__*/_interopDefault(s);
|
|
12
|
+
var t__default = /*#__PURE__*/_interopDefault(t);
|
|
15
13
|
|
|
16
|
-
var z=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?z(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,i=(o,r)=>{for(var e in r||(r={}))P.call(r,e)&&x(o,e,r[e]);if(d)for(var e of d(r))h.call(r,e)&&x(o,e,r[e]);return o},g=(o,r)=>q(o,J(r));var A=(o,r)=>{var e={};for(var n in o)P.call(o,n)&&r.indexOf(n)<0&&(e[n]=o[n]);if(o!=null&&d)for(var n of d(o))r.indexOf(n)<0&&h.call(o,n)&&(e[n]=o[n]);return e};var T=()=>({label:emotion.css({position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),root:({isActive:o,isFocused:r,isHovered:e,variant:n})=>emotion.cx(emotion.css({alignItems:"center",backgroundColor:"transparent",border:0,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t__default
|
|
14
|
+
var z=Object.defineProperty,q=Object.defineProperties;var J=Object.getOwnPropertyDescriptors;var d=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,h=Object.prototype.propertyIsEnumerable;var x=(o,r,e)=>r in o?z(o,r,{enumerable:!0,configurable:!0,writable:!0,value:e}):o[r]=e,i=(o,r)=>{for(var e in r||(r={}))P.call(r,e)&&x(o,e,r[e]);if(d)for(var e of d(r))h.call(r,e)&&x(o,e,r[e]);return o},g=(o,r)=>q(o,J(r));var A=(o,r)=>{var e={};for(var n in o)P.call(o,n)&&r.indexOf(n)<0&&(e[n]=o[n]);if(o!=null&&d)for(var n of d(o))r.indexOf(n)<0&&h.call(o,n)&&(e[n]=o[n]);return e};var T=()=>({label:emotion.css({position:"absolute",width:"1px",height:"1px",padding:0,margin:"-1px",overflow:"hidden",clip:"rect(0, 0, 0, 0)",border:0}),root:({isActive:o,isFocused:r,isHovered:e,variant:n})=>emotion.cx(emotion.css({alignItems:"center",backgroundColor:"transparent",border:0,boxSizing:"border-box",display:"flex",justifyContent:"center",padding:0,margin:0,position:"relative",transition:`background-color ${t__default.default.transitionDurationDefault} ${t__default.default.transitionEasingDefault}`,width:t__default.default.spacingL,"&:focus":{boxShadow:t__default.default.glowPrimary},"&:focus:not(:focus-visible)":{boxShadow:"unset"},"&:focus-visible":{boxShadow:t__default.default.glowPrimary}}),n==="secondary"&&emotion.css({borderRight:`1px solid ${t__default.default.gray200}`,borderTopLeftRadius:t__default.default.borderRadiusMedium,borderBottomLeftRadius:t__default.default.borderRadiusMedium,backgroundColor:t__default.default.gray100,"&:hover":{backgroundColor:f36Utils.hexToRGBA(t__default.default.gray900,.08)}}),n==="secondary"&&(o||r||e)&&emotion.css({backgroundColor:f36Utils.hexToRGBA(t__default.default.gray900,.08)}),(o||r||e)&&emotion.css({cursor:o?"grabbing":"grab"}))});var Q="div";function V(o,r){let e=T(),D=o,{as:n=Q,className:_,isActive:C,isFocused:w,isHovered:G,label:f,onBlur:u,onFocus:c,onMouseEnter:m,onMouseLeave:b,testId:N="cf-ui-drag-handle",style:R,variant:k="secondary"}=D,y=A(D,["as","className","isActive","isFocused","isHovered","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","variant"]),[I,E]=s.useState(w),[S,H]=s.useState(G),B=s.useCallback(a=>{E(!0),c&&c(a);},[c]),U=s.useCallback(a=>{E(!1),u&&u(a);},[u]),$=s.useCallback(a=>{H(!0),m&&m(a);},[m]),j=s.useCallback(a=>{H(!1),b&&b(a);},[b]),v={className:emotion.cx(e.root({isActive:C,isFocused:I,isHovered:S,variant:k}),_),"data-test-id":N,onBlur:U,onFocus:B,onMouseEnter:$,onMouseLeave:j,ref:r,style:R};return n==="div"?s__default.default.createElement("div",g(i(i({},y),v),{role:"button",tabIndex:0}),s__default.default.createElement(f36Icons.DragIcon,{variant:"muted"}),s__default.default.createElement("span",{className:e.label},f)):s__default.default.createElement("button",g(i(i({},y),v),{type:"button"}),s__default.default.createElement(f36Icons.DragIcon,{variant:"muted"}),s__default.default.createElement("span",{className:e.label},f))}var W=s__default.default.forwardRef(V);
|
|
17
15
|
|
|
18
16
|
exports.DragHandle = W;
|
|
17
|
+
//# sourceMappingURL=out.js.map
|
|
19
18
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/DragHandle.tsx","../src/DragHandle.styles.ts"],"names":["React","useCallback","useState","cx","DragIcon","css","tokens","hexToRGBA","getStyles","isActive","isFocused","isHovered","variant","DRAG_HANDLE_DEFAULT_TAG","_DragHandle","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","__spreadProps","__spreadValues","DragHandle"],"mappings":"+kBAAA,OAAOA,GACL,eAAAC,EACA,YAAAC,MAKK,QACP,OAAS,MAAAC,MAAU,UAOnB,OAAS,YAAAC,MAAgB,wBCfzB,OAAS,MAAAD,EAAI,OAAAE,MAAW,UACxB,OAAOC,MAAY,yBACnB,OAAS,aAAAC,MAAiB,wBAGnB,IAAMC,EAAY,KAAO,CAC9B,MAAOH,EAAI,CACT,SAAU,WACV,MAAO,MACP,OAAQ,MACR,QAAS,EACT,OAAQ,OACR,SAAU,SACV,KAAM,mBACN,OAAQ,CACV,CAAC,EACD,KAAM,CAAC,CACL,SAAAI,EACA,UAAAC,EACA,UAAAC,EACA,QAAAC,CACF,IAMST,EACLE,EAAI,CACF,WAAY,SACZ,gBAAiB,cACjB,OAAQ,EACR,UAAW,aACX,QAAS,OACT,eAAgB,SAChB,QAAS,EACT,OAAQ,EACR,SAAU,WACV,WAAY,oBAAoBC,EAAO,
|
|
1
|
+
{"version":3,"sources":["../src/DragHandle.tsx","../src/DragHandle.styles.ts"],"names":["React","useCallback","useState","cx","DragIcon","css","tokens","hexToRGBA","getStyles","isActive","isFocused","isHovered","variant","DRAG_HANDLE_DEFAULT_TAG","_DragHandle","props","ref","styles","_a","as","className","isFocusedProp","isHoveredProp","label","onBlur","onFocus","onMouseEnter","onMouseLeave","testId","style","otherProps","__objRest","setisFocused","setisHovered","handleFocus","event","handleBlur","handleMouseEnter","handleMouseLeave","commonProps","__spreadProps","__spreadValues","DragHandle"],"mappings":"+kBAAA,OAAOA,GACL,eAAAC,EACA,YAAAC,MAKK,QACP,OAAS,MAAAC,MAAU,UAOnB,OAAS,YAAAC,MAAgB,wBCfzB,OAAS,MAAAD,EAAI,OAAAE,MAAW,UACxB,OAAOC,MAAY,yBACnB,OAAS,aAAAC,MAAiB,wBAGnB,IAAMC,EAAY,KAAO,CAC9B,MAAOH,EAAI,CACT,SAAU,WACV,MAAO,MACP,OAAQ,MACR,QAAS,EACT,OAAQ,OACR,SAAU,SACV,KAAM,mBACN,OAAQ,CACV,CAAC,EACD,KAAM,CAAC,CACL,SAAAI,EACA,UAAAC,EACA,UAAAC,EACA,QAAAC,CACF,IAMST,EACLE,EAAI,CACF,WAAY,SACZ,gBAAiB,cACjB,OAAQ,EACR,UAAW,aACX,QAAS,OACT,eAAgB,SAChB,QAAS,EACT,OAAQ,EACR,SAAU,WACV,WAAY,oBAAoBC,EAAO,yBAAyB,IAAIA,EAAO,uBAAuB,GAClG,MAAOA,EAAO,SACd,UAAW,CACT,UAAWA,EAAO,WACpB,EACA,8BAA+B,CAC7B,UAAW,OACb,EACA,kBAAmB,CACjB,UAAWA,EAAO,WACpB,CACF,CAAC,EACDM,IAAY,aACVP,EAAI,CACF,YAAa,aAAaC,EAAO,OAAO,GACxC,oBAAqBA,EAAO,mBAC5B,uBAAwBA,EAAO,mBAC/B,gBAAiBA,EAAO,QACxB,UAAW,CACT,gBAAiBC,EAAUD,EAAO,QAAS,GAAI,CACjD,CACF,CAAC,EACHM,IAAY,cACTH,GAAYC,GAAaC,IAC1BN,EAAI,CACF,gBAAiBE,EAAUD,EAAO,QAAS,GAAI,CACjD,CAAC,GACFG,GAAYC,GAAaC,IACxBN,EAAI,CACF,OAAQI,EAAW,WAAa,MAClC,CAAC,CACL,CAEJ,GD3CA,IAAMI,EAA0B,MA0ChC,SAASC,EACPC,EACAC,EACA,CACA,IAAMC,EAAST,EAAU,EAgBrBU,EAAAH,EAdF,IAAAI,EAAKN,EACL,UAAAO,EACA,SAAAX,EACA,UAAWY,EACX,UAAWC,EACX,MAAAC,EACA,OAAAC,EACA,QAAAC,EACA,aAAAC,EACA,aAAAC,EACA,OAAAC,EAAS,oBACT,MAAAC,EACA,QAAAjB,EAAU,WAxFd,EA0FMM,EADCY,EAAAC,EACDb,EADC,CAbH,KACA,YACA,WACA,YACA,YACA,QACA,SACA,UACA,eACA,eACA,SACA,QACA,YAGI,CAACR,EAAWsB,CAAY,EAAI9B,EAASmB,CAAa,EAClD,CAACV,EAAWsB,CAAY,EAAI/B,EAASoB,CAAa,EAElDY,EAAcjC,EACjBkC,GAAU,CACTH,EAAa,EAAI,EAEbP,GACFA,EAAQU,CAAK,CAEjB,EACA,CAACV,CAAO,CACV,EAEMW,EAAanC,EAChBkC,GAAU,CACTH,EAAa,EAAK,EAEdR,GACFA,EAAOW,CAAK,CAEhB,EACA,CAACX,CAAM,CACT,EAEMa,EAAmBpC,EACtBkC,GAAU,CACTF,EAAa,EAAI,EAEbP,GACFA,EAAaS,CAAK,CAEtB,EACA,CAACT,CAAY,CACf,EAEMY,EAAmBrC,EACtBkC,GAAU,CACTF,EAAa,EAAK,EAEdN,GACFA,EAAaQ,CAAK,CAEtB,EACA,CAACR,CAAY,CACf,EAEMY,EAAc,CAClB,UAAWpC,EACTc,EAAO,KAAK,CAAE,SAAAR,EAAU,UAAAC,EAAW,UAAAC,EAAW,QAAAC,CAAQ,CAAC,EACvDQ,CACF,EACA,eAAgBQ,EAChB,OAAQQ,EACR,QAASF,EACT,aAAcG,EACd,aAAcC,EACd,IAAAtB,EACA,MAAAa,CACF,EAEA,OAAIV,IAAO,MAEPnB,EAAA,cAAC,MAAAwC,EAAAC,IAAA,GAAQX,GAAgBS,GAAxB,CAAqC,KAAK,SAAS,SAAU,IAC5DvC,EAAA,cAACI,EAAA,CAAS,QAAQ,QAAQ,EAC1BJ,EAAA,cAAC,QAAK,UAAWiB,EAAO,OAAQM,CAAM,CACxC,EAKFvB,EAAA,cAAC,SAAAwC,EAAAC,IAAA,GAAWX,GAAgBS,GAA3B,CAAwC,KAAK,WAC5CvC,EAAA,cAACI,EAAA,CAAS,QAAQ,QAAQ,EAC1BJ,EAAA,cAAC,QAAK,UAAWiB,EAAO,OAAQM,CAAM,CACxC,CAEJ,CAEO,IAAMmB,EAIT1C,EAAM,WAAWc,CAAW","sourcesContent":["import React, {\n useCallback,\n useState,\n type ElementType,\n type FocusEventHandler,\n type MouseEventHandler,\n type Ref,\n} from 'react';\nimport { cx } from 'emotion';\nimport type {\n PolymorphicComponent,\n PolymorphicProps,\n CommonProps,\n ExpandProps,\n} from '@contentful/f36-core';\nimport { DragIcon } from '@contentful/f36-icons';\n\nimport { getStyles } from './DragHandle.styles';\n\n// We use div instead of a button because react-sortable-hoc lib cancels sorting if the event target is button.\n//\n// The other alternative way to fix it was to pass a custom `shouldCancelStart` callback,\n// in every place where we use this component with react-sortable-hoc.\n// (the custom callback with all the logic from default callback, but without button event cancelation).\n// So we decided that just changing it to the div, as it was in v3, is a better fix.\n//\n// default shouldCancelStart callback:\n// https://github.com/clauderic/react-sortable-hoc/blob/d94ba3cc67cfc7d6d460b585e7723bdb50015e53/src/SortableContainer/defaultShouldCancelStart.js\nconst DRAG_HANDLE_DEFAULT_TAG = 'div';\n\nexport interface DragHandleInternalProps extends CommonProps {\n /**\n * The element used for the root node\n * @default div\n */\n as?: 'button' | 'div';\n /**\n * Applies styling for when the component is actively being dragged by\n * the user\n */\n isActive?: boolean;\n /**\n * Applies focus styling\n */\n isFocused?: boolean;\n /**\n * Applies hover styling\n */\n isHovered?: boolean;\n /**\n * Label rendered in DragHandle - not visible on screen as its purpose\n * is for screen readers only\n */\n label: string;\n /**\n * Set type button for div element\n */\n type?: string;\n\n /**\n * Determines style variation\n * @default secondary\n */\n variant?: 'secondary' | 'transparent';\n}\n\nexport type DragHandleProps<\n E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG,\n> = PolymorphicProps<DragHandleInternalProps, E>;\n\nfunction _DragHandle<E extends ElementType = typeof DRAG_HANDLE_DEFAULT_TAG>(\n props: DragHandleProps<E>,\n ref: Ref<any>,\n) {\n const styles = getStyles();\n const {\n as = DRAG_HANDLE_DEFAULT_TAG,\n className,\n isActive,\n isFocused: isFocusedProp,\n isHovered: isHoveredProp,\n label,\n onBlur,\n onFocus,\n onMouseEnter,\n onMouseLeave,\n testId = 'cf-ui-drag-handle',\n style,\n variant = 'secondary',\n ...otherProps\n } = props;\n const [isFocused, setisFocused] = useState(isFocusedProp);\n const [isHovered, setisHovered] = useState(isHoveredProp);\n\n const handleFocus = useCallback<FocusEventHandler<HTMLElement>>(\n (event) => {\n setisFocused(true);\n\n if (onFocus) {\n onFocus(event);\n }\n },\n [onFocus],\n );\n\n const handleBlur = useCallback<FocusEventHandler<HTMLElement>>(\n (event) => {\n setisFocused(false);\n\n if (onBlur) {\n onBlur(event);\n }\n },\n [onBlur],\n );\n\n const handleMouseEnter = useCallback<MouseEventHandler<HTMLElement>>(\n (event) => {\n setisHovered(true);\n\n if (onMouseEnter) {\n onMouseEnter(event);\n }\n },\n [onMouseEnter],\n );\n\n const handleMouseLeave = useCallback<MouseEventHandler<HTMLElement>>(\n (event) => {\n setisHovered(false);\n\n if (onMouseLeave) {\n onMouseLeave(event);\n }\n },\n [onMouseLeave],\n );\n\n const commonProps = {\n className: cx(\n styles.root({ isActive, isFocused, isHovered, variant }),\n className,\n ),\n 'data-test-id': testId,\n onBlur: handleBlur,\n onFocus: handleFocus,\n onMouseEnter: handleMouseEnter,\n onMouseLeave: handleMouseLeave,\n ref,\n style,\n };\n\n if (as === 'div') {\n return (\n <div {...otherProps} {...commonProps} role=\"button\" tabIndex={0}>\n <DragIcon variant=\"muted\" />\n <span className={styles.label}>{label}</span>\n </div>\n );\n }\n\n return (\n <button {...otherProps} {...commonProps} type=\"button\">\n <DragIcon variant=\"muted\" />\n <span className={styles.label}>{label}</span>\n </button>\n );\n}\n\nexport const DragHandle: PolymorphicComponent<\n ExpandProps<DragHandleInternalProps>,\n typeof DRAG_HANDLE_DEFAULT_TAG,\n 'disabled'\n> = React.forwardRef(_DragHandle);\n","import { cx, css } from 'emotion';\nimport tokens from '@contentful/f36-tokens';\nimport { hexToRGBA } from '@contentful/f36-utils';\nimport { DragHandleProps } from './DragHandle';\n\nexport const getStyles = () => ({\n label: css({\n position: 'absolute',\n width: '1px',\n height: '1px',\n padding: 0,\n margin: '-1px',\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n border: 0,\n }),\n root: ({\n isActive,\n isFocused,\n isHovered,\n variant,\n }: {\n isActive: boolean;\n isFocused: boolean;\n isHovered: boolean;\n variant: DragHandleProps['variant'];\n }) => {\n return cx(\n css({\n alignItems: 'center',\n backgroundColor: 'transparent',\n border: 0,\n boxSizing: 'border-box',\n display: 'flex',\n justifyContent: 'center',\n padding: 0,\n margin: 0, // remove the default button margin in Safari.\n position: 'relative',\n transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,\n width: tokens.spacingL,\n '&:focus': {\n boxShadow: tokens.glowPrimary,\n },\n '&:focus:not(:focus-visible)': {\n boxShadow: 'unset',\n },\n '&:focus-visible': {\n boxShadow: tokens.glowPrimary,\n },\n }),\n variant === 'secondary' &&\n css({\n borderRight: `1px solid ${tokens.gray200}`,\n borderTopLeftRadius: tokens.borderRadiusMedium,\n borderBottomLeftRadius: tokens.borderRadiusMedium,\n backgroundColor: tokens.gray100,\n '&:hover': {\n backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n },\n }),\n variant === 'secondary' &&\n (isActive || isFocused || isHovered) &&\n css({\n backgroundColor: hexToRGBA(tokens.gray900, 0.08),\n }),\n (isActive || isFocused || isHovered) &&\n css({\n cursor: isActive ? 'grabbing' : 'grab',\n }),\n );\n },\n});\n"]}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@contentful/f36-drag-handle",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.48.1",
|
|
4
4
|
"description": "Forma 36: DragHandle component",
|
|
5
5
|
"scripts": {
|
|
6
6
|
"build": "tsup"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
|
-
"@contentful/f36-core": "^4.
|
|
10
|
-
"@contentful/f36-icons": "^4.
|
|
9
|
+
"@contentful/f36-core": "^4.48.1",
|
|
10
|
+
"@contentful/f36-icons": "^4.27.0",
|
|
11
11
|
"@contentful/f36-utils": "^4.24.1",
|
|
12
12
|
"@contentful/f36-tokens": "^4.0.2",
|
|
13
13
|
"emotion": "^10.0.17"
|