@contentful/f36-drag-handle 4.0.1-beta.2482 → 4.0.1-beta.2500

package/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@contentful/f36-drag-handle",
-  "version": "4.0.1-beta.2482+8a686cce",
+  "version": "4.0.1-beta.2500+37347e82",
   "description": "Forma 36: DragHandle component",
   "scripts": {
     "build": "parcel build"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.0.1-beta.2482+8a686cce",
-    "@contentful/f36-icons": "^4.0.1-beta.2482+8a686cce",
-    "@contentful/f36-tokens": "^4.0.1-beta.2482+8a686cce",
+    "@contentful/f36-core": "4.0.1-beta.2500+37347e82",
+    "@contentful/f36-icons": "4.0.1-beta.2500+37347e82",
+    "@contentful/f36-tokens": "4.0.1-beta.2500+37347e82",
     "emotion": "^10.0.17"
   },
   "peerDependencies": {
@@ -17,8 +17,7 @@
   },
   "license": "MIT",
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "main": "dist/main.js",
   "module": "dist/module.js",
@@ -33,5 +32,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "8a686cceae653a16315a29e92b5254b9559fae5f"
+  "gitHead": "37347e8217c4fb99af8df64f564f67be4bdcea04"
 }

package/src/DragHandle.styles.ts

@@ -1,50 +0,0 @@
-import { cx, css } from 'emotion';
-import tokens from '@contentful/f36-tokens';
-
-export const getStyles = () => ({
-  label: css({
-    position: 'absolute',
-    width: '1px',
-    height: '1px',
-    padding: 0,
-    margin: '-1px',
-    overflow: 'hidden',
-    clip: 'rect(0, 0, 0, 0)',
-    border: 0,
-  }),
-  root: ({
-    isActive,
-    isFocused,
-    isHovered,
-  }: {
-    isActive: boolean;
-    isFocused: boolean;
-    isHovered: boolean;
-  }) => {
-    return cx(
-      css({
-        alignItems: 'center',
-        backgroundColor: tokens.gray100,
-        border: 0,
-        borderBottomLeftRadius: tokens.borderRadiusMedium,
-        borderRight: `1px solid ${tokens.gray200}`,
-        borderTopLeftRadius: tokens.borderRadiusMedium,
-        boxSizing: 'border-box',
-        display: 'flex',
-        justifyContent: 'center',
-        padding: 0,
-        position: 'relative',
-        transition: `background-color ${tokens.transitionDurationDefault} ${tokens.transitionEasingDefault}`,
-        width: tokens.spacingL,
-        '&:hover, &:focus': {
-          backgroundColor: tokens.colorElementLight,
-        },
-      }),
-      (isActive || isFocused || isHovered) &&
-        css({
-          backgroundColor: tokens.gray200,
-          cursor: isActive ? 'grabbing' : 'grab',
-        }),
-    );
-  },
-});

package/src/DragHandle.tsx

@@ -1,129 +0,0 @@
-import React, {
-  forwardRef,
-  useCallback,
-  useState,
-  FocusEventHandler,
-  MouseEventHandler,
-} from 'react';
-import { cx } from 'emotion';
-import type { PropsWithHTMLElement } from '@contentful/f36-core';
-import type { CommonProps } from '@contentful/f36-core';
-import { DragIcon } from '@contentful/f36-icons';
-import { getStyles } from './DragHandle.styles';
-
-export type DragHandleInternalProps = CommonProps & {
-  /**
-   * Applies styling for when the component is actively being dragged by
-   * the user
-   */
-  isActive?: boolean;
-  /**
-   * Applies focus styling
-   */
-  isFocused?: boolean;
-  /**
-   * Applies hover styling
-   */
-  isHovered?: boolean;
-  /**
-   * Label rendered in DragHandle - not visible on screen as its purpose
-   * is for screen readers only
-   */
-  label: string;
-};
-
-export type DragHandleProps = PropsWithHTMLElement<
-  DragHandleInternalProps,
-  'button'
->;
-
-export const DragHandle = forwardRef<HTMLButtonElement, DragHandleProps>(
-  (
-    {
-      className,
-      isActive,
-      isFocused: isFocusedProp,
-      isHovered: isHoveredProp,
-      label,
-      onBlur,
-      onFocus,
-      onMouseEnter,
-      onMouseLeave,
-      testId = 'cf-ui-drag-handle',
-      style,
-      ...otherProps
-    },
-    forwardedRef,
-  ) => {
-    const styles = getStyles();
-    const [isFocused, setisFocused] = useState(isFocusedProp);
-    const [isHovered, setisHovered] = useState(isHoveredProp);
-
-    const handleFocus = useCallback<FocusEventHandler<HTMLButtonElement>>(
-      (event) => {
-        setisFocused(true);
-
-        if (onFocus) {
-          onFocus(event);
-        }
-      },
-      [onFocus],
-    );
-
-    const handleBlur = useCallback<FocusEventHandler<HTMLButtonElement>>(
-      (event) => {
-        setisFocused(false);
-
-        if (onBlur) {
-          onBlur(event);
-        }
-      },
-      [onBlur],
-    );
-
-    const handleMouseEnter = useCallback<MouseEventHandler<HTMLButtonElement>>(
-      (event) => {
-        setisHovered(true);
-
-        if (onMouseEnter) {
-          onMouseEnter(event);
-        }
-      },
-      [onMouseEnter],
-    );
-
-    const handleMouseLeave = useCallback<MouseEventHandler<HTMLButtonElement>>(
-      (event) => {
-        setisHovered(false);
-
-        if (onMouseLeave) {
-          onMouseLeave(event);
-        }
-      },
-      [onMouseLeave],
-    );
-
-    return (
-      <button
-        type="button"
-        {...otherProps}
-        className={cx(
-          styles.root({ isActive, isFocused, isHovered }),
-          className,
-        )}
-        onBlur={handleBlur}
-        onFocus={handleFocus}
-        onMouseEnter={handleMouseEnter}
-        onMouseLeave={handleMouseLeave}
-        data-test-id={testId}
-        ref={forwardedRef}
-        style={style}
-      >
-        <DragIcon variant="muted" />
-        <span className={styles.label}>{label}</span>
-      </button>
-    );
-  },
-);
-
-DragHandle.displayName = 'DragHandle';

package/src/index.ts

@@ -1,2 +0,0 @@
-export { DragHandle } from './DragHandle';
-export type { DragHandleProps } from './DragHandle';