@contentful/f36-drag-handle 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.1.0](https://github.com/contentful/forma-36/compare/@contentful/f36-drag-handle@4.0.1...@contentful/f36-drag-handle@4.1.0) (2022-01-31)
+
+
+### Features
+
+* implement props list redesign [BAU-535]  ([#1756](https://github.com/contentful/forma-36/issues/1756)) ([21c57e7](https://github.com/contentful/forma-36/commit/21c57e72008b75990d03af4e7500edc1c7f3d26d))
+
+
+
+
+
 ## [4.0.1](https://github.com/contentful/forma-36/compare/@contentful/f36-drag-handle@4.0.0...@contentful/f36-drag-handle@4.0.1) (2022-01-11)
 
 **Note:** Version bump only for package @contentful/f36-drag-handle

package/README.mdx

@@ -4,11 +4,11 @@ type: 'component'
 slug: /components/drag-handle/
 github: 'https://github.com/contentful/forma-36/tree/master/packages/components/drag-handle'
 typescript: ./src/DragHandle.tsx
+storybook: 'https://v4-f36-storybook.netlify.app/?path=/story/components-draghandle--default'
 ---
 
 import { Heading, Stack, TextLink } from '@contentful/f36-components';
 import { ExternalLinkIcon } from '@contentful/f36-icons';
-import { Props } from '@contentful/f36-docs-utils';
 
 DragHandle is a new component to make it easier when creating draggable elements. it contains the styling for focus, hover and dragging states.
 This component only needs to be used if you're creating a custom component with drag, some of our components already have this implemented, for example [Card](/components/card).
@@ -80,7 +80,7 @@ The DragHandle can be styled based on the props you pass to it:
   </TextLink>
 </Stack>
 
-<Props of="DragHandle" />
+<PropsTable of="DragHandle" />
 
 ## Accessibility
 

package/dist/types.d.ts

@@ -25,269 +25,28 @@ type DragHandleInternalProps = CommonProps & {
     type?: string;
 };
 export type DragHandleProps = PropsWithHTMLElement<DragHandleInternalProps, 'div'>;
-export const DragHandle: React.ForwardRefExoticComponent<{
-    hidden?: boolean;
-    color?: string;
-    translate?: "yes" | "no";
-    slot?: string;
-    title?: string;
-    key?: React.Key;
-    defaultChecked?: boolean;
-    defaultValue?: string | number | readonly string[];
-    suppressContentEditableWarning?: boolean;
-    suppressHydrationWarning?: boolean;
-    accessKey?: string;
-    contentEditable?: "inherit" | (boolean | "true" | "false");
-    contextMenu?: string;
-    dir?: string;
-    draggable?: boolean | "true" | "false";
-    id?: string;
-    lang?: string;
-    placeholder?: string;
-    spellCheck?: boolean | "true" | "false";
-    tabIndex?: number;
-    radioGroup?: string;
-    role?: string;
-    about?: string;
-    datatype?: string;
-    inlist?: any;
-    prefix?: string;
-    property?: string;
-    resource?: string;
-    typeof?: string;
-    vocab?: string;
-    autoCapitalize?: string;
-    autoCorrect?: string;
-    autoSave?: string;
-    itemProp?: string;
-    itemScope?: boolean;
-    itemType?: string;
-    itemID?: string;
-    itemRef?: string;
-    results?: number;
-    security?: string;
-    unselectable?: "on" | "off";
-    inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search";
-    is?: string;
-    'aria-activedescendant'?: string;
-    'aria-atomic'?: boolean | "true" | "false";
-    'aria-autocomplete'?: "none" | "inline" | "list" | "both";
-    'aria-busy'?: boolean | "true" | "false";
-    'aria-checked'?: boolean | "true" | "false" | "mixed";
-    'aria-colcount'?: number;
-    'aria-colindex'?: number;
-    'aria-colspan'?: number;
-    'aria-controls'?: string;
-    'aria-current'?: boolean | "time" | "true" | "false" | "page" | "step" | "location" | "date";
-    'aria-describedby'?: string;
-    'aria-details'?: string;
-    'aria-disabled'?: boolean | "true" | "false";
-    'aria-dropeffect'?: "none" | "copy" | "move" | "link" | "execute" | "popup";
-    'aria-errormessage'?: string;
-    'aria-expanded'?: boolean | "true" | "false";
-    'aria-flowto'?: string;
-    'aria-grabbed'?: boolean | "true" | "false";
-    'aria-haspopup'?: boolean | "grid" | "dialog" | "menu" | "true" | "false" | "listbox" | "tree";
-    'aria-hidden'?: boolean | "true" | "false";
-    'aria-invalid'?: boolean | "true" | "false" | "grammar" | "spelling";
-    'aria-keyshortcuts'?: string;
-    'aria-label'?: string;
-    'aria-labelledby'?: string;
-    'aria-level'?: number;
-    'aria-live'?: "off" | "assertive" | "polite";
-    'aria-modal'?: boolean | "true" | "false";
-    'aria-multiline'?: boolean | "true" | "false";
-    'aria-multiselectable'?: boolean | "true" | "false";
-    'aria-orientation'?: "horizontal" | "vertical";
-    'aria-owns'?: string;
-    'aria-placeholder'?: string;
-    'aria-posinset'?: number;
-    'aria-pressed'?: boolean | "true" | "false" | "mixed";
-    'aria-readonly'?: boolean | "true" | "false";
-    'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals";
-    'aria-required'?: boolean | "true" | "false";
-    'aria-roledescription'?: string;
-    'aria-rowcount'?: number;
-    'aria-rowindex'?: number;
-    'aria-rowspan'?: number;
-    'aria-selected'?: boolean | "true" | "false";
-    'aria-setsize'?: number;
-    'aria-sort'?: "none" | "ascending" | "descending" | "other";
-    'aria-valuemax'?: number;
-    'aria-valuemin'?: number;
-    'aria-valuenow'?: number;
-    'aria-valuetext'?: string;
-    children?: React.ReactNode;
-    dangerouslySetInnerHTML?: {
-        __html: string;
-    };
-    onCopy?: React.ClipboardEventHandler<HTMLDivElement>;
-    onCopyCapture?: React.ClipboardEventHandler<HTMLDivElement>;
-    onCut?: React.ClipboardEventHandler<HTMLDivElement>;
-    onCutCapture?: React.ClipboardEventHandler<HTMLDivElement>;
-    onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
-    onPasteCapture?: React.ClipboardEventHandler<HTMLDivElement>;
-    onCompositionEnd?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionEndCapture?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionStart?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionStartCapture?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionUpdate?: React.CompositionEventHandler<HTMLDivElement>;
-    onCompositionUpdateCapture?: React.CompositionEventHandler<HTMLDivElement>;
-    onFocus?: React.FocusEventHandler<HTMLDivElement>;
-    onFocusCapture?: React.FocusEventHandler<HTMLDivElement>;
-    onBlur?: React.FocusEventHandler<HTMLDivElement>;
-    onBlurCapture?: React.FocusEventHandler<HTMLDivElement>;
-    onChange?: React.FormEventHandler<HTMLDivElement>;
-    onChangeCapture?: React.FormEventHandler<HTMLDivElement>;
-    onBeforeInput?: React.FormEventHandler<HTMLDivElement>;
-    onBeforeInputCapture?: React.FormEventHandler<HTMLDivElement>;
-    onInput?: React.FormEventHandler<HTMLDivElement>;
-    onInputCapture?: React.FormEventHandler<HTMLDivElement>;
-    onReset?: React.FormEventHandler<HTMLDivElement>;
-    onResetCapture?: React.FormEventHandler<HTMLDivElement>;
-    onSubmit?: React.FormEventHandler<HTMLDivElement>;
-    onSubmitCapture?: React.FormEventHandler<HTMLDivElement>;
-    onInvalid?: React.FormEventHandler<HTMLDivElement>;
-    onInvalidCapture?: React.FormEventHandler<HTMLDivElement>;
-    onLoad?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onError?: React.ReactEventHandler<HTMLDivElement>;
-    onErrorCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyDownCapture?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyPressCapture?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
-    onKeyUpCapture?: React.KeyboardEventHandler<HTMLDivElement>;
-    onAbort?: React.ReactEventHandler<HTMLDivElement>;
-    onAbortCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onCanPlay?: React.ReactEventHandler<HTMLDivElement>;
-    onCanPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onCanPlayThrough?: React.ReactEventHandler<HTMLDivElement>;
-    onCanPlayThroughCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onDurationChange?: React.ReactEventHandler<HTMLDivElement>;
-    onDurationChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onEmptied?: React.ReactEventHandler<HTMLDivElement>;
-    onEmptiedCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onEncrypted?: React.ReactEventHandler<HTMLDivElement>;
-    onEncryptedCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onEnded?: React.ReactEventHandler<HTMLDivElement>;
-    onEndedCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadedData?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadedDataCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadedMetadata?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadedMetadataCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadStart?: React.ReactEventHandler<HTMLDivElement>;
-    onLoadStartCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onPause?: React.ReactEventHandler<HTMLDivElement>;
-    onPauseCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onPlay?: React.ReactEventHandler<HTMLDivElement>;
-    onPlayCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onPlaying?: React.ReactEventHandler<HTMLDivElement>;
-    onPlayingCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onProgress?: React.ReactEventHandler<HTMLDivElement>;
-    onProgressCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onRateChange?: React.ReactEventHandler<HTMLDivElement>;
-    onRateChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onSeeked?: React.ReactEventHandler<HTMLDivElement>;
-    onSeekedCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onSeeking?: React.ReactEventHandler<HTMLDivElement>;
-    onSeekingCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onStalled?: React.ReactEventHandler<HTMLDivElement>;
-    onStalledCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onSuspend?: React.ReactEventHandler<HTMLDivElement>;
-    onSuspendCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onTimeUpdate?: React.ReactEventHandler<HTMLDivElement>;
-    onTimeUpdateCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onVolumeChange?: React.ReactEventHandler<HTMLDivElement>;
-    onVolumeChangeCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onWaiting?: React.ReactEventHandler<HTMLDivElement>;
-    onWaitingCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onAuxClick?: React.MouseEventHandler<HTMLDivElement>;
-    onAuxClickCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onClick?: React.MouseEventHandler<HTMLDivElement>;
-    onClickCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
-    onContextMenuCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
-    onDoubleClickCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onDrag?: React.DragEventHandler<HTMLDivElement>;
-    onDragCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragEnd?: React.DragEventHandler<HTMLDivElement>;
-    onDragEndCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragEnter?: React.DragEventHandler<HTMLDivElement>;
-    onDragEnterCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragExit?: React.DragEventHandler<HTMLDivElement>;
-    onDragExitCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragLeave?: React.DragEventHandler<HTMLDivElement>;
-    onDragLeaveCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragOver?: React.DragEventHandler<HTMLDivElement>;
-    onDragOverCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDragStart?: React.DragEventHandler<HTMLDivElement>;
-    onDragStartCapture?: React.DragEventHandler<HTMLDivElement>;
-    onDrop?: React.DragEventHandler<HTMLDivElement>;
-    onDropCapture?: React.DragEventHandler<HTMLDivElement>;
-    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseDownCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseMoveCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOut?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOutCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOverCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseUp?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseUpCapture?: React.MouseEventHandler<HTMLDivElement>;
-    onSelect?: React.ReactEventHandler<HTMLDivElement>;
-    onSelectCapture?: React.ReactEventHandler<HTMLDivElement>;
-    onTouchCancel?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchCancelCapture?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchEndCapture?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchMove?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchMoveCapture?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchStartCapture?: React.TouchEventHandler<HTMLDivElement>;
-    onPointerDown?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerDownCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerMove?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerMoveCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerUp?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerUpCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerCancel?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerCancelCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerEnter?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerEnterCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerLeave?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerLeaveCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerOver?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerOverCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerOut?: React.PointerEventHandler<HTMLDivElement>;
-    onPointerOutCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onGotPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onGotPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onLostPointerCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onLostPointerCaptureCapture?: React.PointerEventHandler<HTMLDivElement>;
-    onScroll?: React.UIEventHandler<HTMLDivElement>;
-    onScrollCapture?: React.UIEventHandler<HTMLDivElement>;
-    onWheel?: React.WheelEventHandler<HTMLDivElement>;
-    onWheelCapture?: React.WheelEventHandler<HTMLDivElement>;
-    onAnimationStart?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationStartCapture?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationEnd?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationEndCapture?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationIteration?: React.AnimationEventHandler<HTMLDivElement>;
-    onAnimationIterationCapture?: React.AnimationEventHandler<HTMLDivElement>;
-    onTransitionEnd?: React.TransitionEventHandler<HTMLDivElement>;
-    onTransitionEndCapture?: React.TransitionEventHandler<HTMLDivElement>;
-    className?: string;
-    testId?: string;
-    style?: React.CSSProperties;
+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 & {
+    /**
+     * 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;
+    /**
+     * Set type button for div element
+     */
     type?: string;
 } & React.RefAttributes<HTMLDivElement>>;
 

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAzBA,OAAO;gBAIN,OAAO;gBAIP,OAAO;WAKZ,MAAM;WAIN,MAAM;wCAsGd,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":";;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;wCAsGd,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.0.1",
+  "version": "4.1.0",
   "description": "Forma 36: DragHandle component",
   "scripts": {
     "build": "parcel build"
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@contentful/f36-core": "^4.0.1",
-    "@contentful/f36-icons": "^4.0.1",
+    "@contentful/f36-core": "^4.1.0",
+    "@contentful/f36-icons": "^4.0.2",
     "@contentful/f36-tokens": "^4.0.0",
     "emotion": "^10.0.17"
   },
@@ -32,5 +32,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "cee6bd9ae0b1ca2ce23d42873d9344a20fe740d0"
+  "gitHead": "2ea3b5b814dbe3fb5e0b1b6adf65aff768e6855e"
 }