@helpdice/draggable 0.0.1 → 0.0.2

package/dist/types/state/droppable/get-droppable.d.ts

@@ -10,9 +10,9 @@ export type Closest = {
 type Args = {
     descriptor: DroppableDescriptor;
     isEnabled: boolean;
-    isCombineEnabled: boolean;
+    isCombineEnabled?: boolean;
     isFixedOnPage: boolean;
-    direction: 'vertical' | 'horizontal';
+    direction?: 'vertical' | 'horizontal';
     client: BoxModel;
     page: BoxModel;
     closest?: Closest | null;

package/dist/types/types.d.ts

@@ -94,7 +94,7 @@ export type DroppableDimension = {
     descriptor: DroppableDescriptor;
     axis: Axis;
     isEnabled: boolean;
-    isCombineEnabled: boolean;
+    isCombineEnabled?: boolean;
     client: BoxModel;
     isFixedOnPage: boolean;
     page: BoxModel;
@@ -276,10 +276,10 @@ export type OnDragStartResponder = (start: DragStart, provided: ResponderProvide
 export type OnDragUpdateResponder = (update: DragUpdate, provided: ResponderProvided) => unknown;
 export type OnDragEndResponder = (result: DropResult, provided: ResponderProvided) => unknown;
 export type Responders = {
-    onBeforeCapture: OnBeforeCaptureResponder | null;
-    onBeforeDragStart: OnBeforeDragStartResponder | null;
-    onDragStart: OnDragStartResponder | null;
-    onDragUpdate: OnDragUpdateResponder | null;
+    onBeforeCapture?: OnBeforeCaptureResponder | null;
+    onBeforeDragStart?: OnBeforeDragStartResponder | null;
+    onDragStart?: OnDragStartResponder | null;
+    onDragUpdate?: OnDragUpdateResponder | null;
     onDragEnd: OnDragEndResponder;
 };
 export type StopDragOptions = {

package/dist/types/view/context/droppable-context.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { DraggableId, DroppableId, TypeId } from '../../types';
 export type DroppableContextValue = {
-    isUsingCloneFor: DraggableId | null;
+    isUsingCloneFor?: DraggableId | null;
     droppableId: DroppableId;
-    type: TypeId;
+    type?: TypeId;
 };
 declare const _default: React.Context<DroppableContextValue | null>;
 export default _default;

package/dist/types/view/droppable/droppable-types.d.ts

@@ -29,13 +29,13 @@ export type MapProps = {
     useClone: UseClone | null;
 };
 export type DefaultProps = {
-    mode: DroppableMode;
-    type: TypeId;
-    isDropDisabled: boolean;
-    isCombineEnabled: boolean;
-    direction: Direction;
-    renderClone: DraggableChildrenFn | null;
-    ignoreContainerClipping: boolean;
+    mode?: DroppableMode;
+    type?: TypeId;
+    isDropDisabled?: boolean;
+    isCombineEnabled?: boolean;
+    direction?: Direction;
+    renderClone?: DraggableChildrenFn | null;
+    ignoreContainerClipping?: boolean;
     getContainerForClone: () => HTMLElement;
 };
 export type DispatchProps = {

package/dist/types/view/use-droppable-publisher/get-dimension.d.ts

@@ -6,9 +6,9 @@ type Args = {
     descriptor: DroppableDescriptor;
     env: Env;
     windowScroll: Position;
-    direction: Direction;
-    isDropDisabled: boolean;
-    isCombineEnabled: boolean;
+    direction?: Direction;
+    isDropDisabled?: boolean;
+    isCombineEnabled?: boolean;
     shouldClipSubject: boolean;
 };
 declare const _default: ({ ref, descriptor, env, windowScroll, direction, isDropDisabled, isCombineEnabled, shouldClipSubject, }: Args) => DroppableDimension;

package/dist/types/view/use-droppable-publisher/use-droppable-publisher.d.ts

@@ -1,13 +1,13 @@
 import type { DroppableId, TypeId, Direction, DroppableMode } from "../../types";
 type Props = {
     droppableId: DroppableId;
-    type: TypeId;
-    mode: DroppableMode;
-    direction: Direction;
-    isDropDisabled: boolean;
-    isCombineEnabled: boolean;
-    ignoreContainerClipping: boolean;
-    getDroppableRef: () => HTMLElement | null;
+    type?: TypeId;
+    mode?: DroppableMode;
+    direction?: Direction;
+    isDropDisabled?: boolean;
+    isCombineEnabled?: boolean;
+    ignoreContainerClipping?: boolean;
+    getDroppableRef?: () => HTMLElement | null;
 };
 export default function useDroppablePublisher(args: Props): void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@helpdice/draggable",
-  "version": "0.0.1",
+  "version": "0.0.2",
   "description": "Beautiful and accessible drag and drop for lists with React",
   "author": "Helpdice",
   "type": "module",

package/src/state/droppable/get-droppable.ts

@@ -26,9 +26,9 @@ export type Closest = {
 type Args = {
   descriptor: DroppableDescriptor,
   isEnabled: boolean,
-  isCombineEnabled: boolean,
+  isCombineEnabled?: boolean,
   isFixedOnPage: boolean,
-  direction: 'vertical' | 'horizontal',
+  direction?: 'vertical' | 'horizontal',
   client: BoxModel,
   // is null when in a fixed container
   page: BoxModel,

package/src/state/middleware/responders/publisher.ts

@@ -95,7 +95,7 @@ export default (getResponders: () => Responders, announce: Announce) => {
     );
     withTimings('onBeforeCapture', () => {
       // No use of screen reader for this responder
-      const fn: OnBeforeCaptureResponder | null = getResponders().onBeforeCapture;
+      const fn: OnBeforeCaptureResponder | null | undefined = getResponders().onBeforeCapture;
       if (fn) {
         const before: BeforeCapture = {
           draggableId,
@@ -113,7 +113,7 @@ export default (getResponders: () => Responders, announce: Announce) => {
     );
     withTimings('onBeforeDragStart', () => {
       // No use of screen reader for this responder
-      const fn: OnBeforeDragStartResponder | null = getResponders().onBeforeDragStart;
+      const fn: OnBeforeDragStartResponder | null | undefined = getResponders().onBeforeDragStart;
       if (fn) {
         fn(getDragStart(critical, mode));
       }
@@ -137,7 +137,7 @@ export default (getResponders: () => Responders, announce: Announce) => {
     asyncMarshal.add(() => {
       withTimings('onDragStart', () =>
         execute(
-          getResponders().onDragStart,
+          getResponders().onDragStart ?? null,
           data,
           announce,
           messagePreset.onDragStart,
@@ -195,7 +195,7 @@ export default (getResponders: () => Responders, announce: Announce) => {
     asyncMarshal.add(() => {
       withTimings('onDragUpdate', () =>
         execute(
-          getResponders().onDragUpdate,
+          getResponders().onDragUpdate ?? null,
           data,
           announce,
           messagePreset.onDragUpdate,

package/src/types.ts

@@ -143,7 +143,7 @@ export type DroppableDimension = {
   descriptor: DroppableDescriptor,
   axis: Axis,
   isEnabled: boolean,
-  isCombineEnabled: boolean,
+  isCombineEnabled?: boolean,
   // relative to the current viewport
   client: BoxModel,
   // relative to the whole page
@@ -430,10 +430,10 @@ export type OnDragEndResponder = (
 ) => unknown;
 
 export type Responders = {
-  onBeforeCapture: OnBeforeCaptureResponder | null,
-  onBeforeDragStart: OnBeforeDragStartResponder | null,
-  onDragStart: OnDragStartResponder | null,
-  onDragUpdate: OnDragUpdateResponder | null,
+  onBeforeCapture?: OnBeforeCaptureResponder | null,
+  onBeforeDragStart?: OnBeforeDragStartResponder | null,
+  onDragStart?: OnDragStartResponder | null,
+  onDragUpdate?: OnDragUpdateResponder | null,
   // always required
   onDragEnd: OnDragEndResponder,
 };

package/src/view/context/droppable-context.ts

@@ -4,9 +4,9 @@ import type { DraggableId, DroppableId, TypeId } from '../../types';
 
 // Exact
 export type DroppableContextValue = {
-  isUsingCloneFor: DraggableId | null,
+  isUsingCloneFor?: DraggableId | null,
   droppableId: DroppableId,
-  type: TypeId,
+  type?: TypeId,
 };
 
 export default React.createContext<DroppableContextValue | null>(null);

package/src/view/draggable/draggable.tsx

@@ -37,7 +37,7 @@ export default function Draggable(props: Props) {
     () => ({
       id: props.draggableId,
       index: props.index,
-      type,
+      type: type ?? "", // Empty by default Marked for review
       droppableId,
     }),
     [props.draggableId, props.index, type, droppableId],

package/src/view/droppable/connected-droppable.tsx

@@ -160,7 +160,7 @@ export const makeMapStateToProps = (): Selector => {
     ownProps: OwnProps,
   ): MapProps => {
     const id: DroppableId = ownProps.droppableId;
-    const type: TypeId = ownProps.type;
+    const type: TypeId | undefined = ownProps.type;
     const isEnabled: boolean = !ownProps.isDropDisabled;
     const renderClone: DraggableChildrenFn | null =
       ownProps.renderClone;
@@ -168,7 +168,7 @@ export const makeMapStateToProps = (): Selector => {
     if (isDragging(state)) {
       const critical: Critical = state.critical;
 
-      if (!isMatchingType(type, critical)) {
+      if (type && !isMatchingType(type, critical)) {
         return idleWithoutAnimation;
       }
 
@@ -193,7 +193,7 @@ export const makeMapStateToProps = (): Selector => {
     if (state.phase === 'DROP_ANIMATING') {
       const completed: CompletedDrag = state.completed;
 
-      if (!isMatchingType(type, completed.critical)) {
+      if (type && !isMatchingType(type, completed.critical)) {
         return idleWithoutAnimation;
       }
 
@@ -219,7 +219,7 @@ export const makeMapStateToProps = (): Selector => {
     ) {
       const completed: CompletedDrag = state.completed;
 
-      if (!isMatchingType(type, completed.critical)) {
+      if (type && !isMatchingType(type, completed.critical)) {
         return idleWithoutAnimation;
       }
 

package/src/view/droppable/droppable-types.ts

@@ -65,13 +65,13 @@ export type MapProps = {
 
 // Exact
 export type DefaultProps = {
-  mode: DroppableMode,
-  type: TypeId,
-  isDropDisabled: boolean,
-  isCombineEnabled: boolean,
-  direction: Direction,
-  renderClone: DraggableChildrenFn | null,
-  ignoreContainerClipping: boolean,
+  mode?: DroppableMode,
+  type?: TypeId,
+  isDropDisabled?: boolean,
+  isCombineEnabled?: boolean,
+  direction?: Direction,
+  renderClone?: DraggableChildrenFn | null,
+  ignoreContainerClipping?: boolean,
   getContainerForClone: () => HTMLElement,
 };
 

package/src/view/use-droppable-publisher/get-dimension.ts

@@ -85,9 +85,9 @@ type Args = {
   descriptor: DroppableDescriptor,
   env: Env,
   windowScroll: Position,
-  direction: Direction,
-  isDropDisabled: boolean,
-  isCombineEnabled: boolean,
+  direction?: Direction,
+  isDropDisabled?: boolean,
+  isCombineEnabled?: boolean,
   shouldClipSubject: boolean,
 };
 

package/src/view/use-droppable-publisher/use-droppable-publisher.ts

@@ -36,13 +36,13 @@ import useUniqueId from "../use-unique-id";
 // Exact
 type Props = {
   droppableId: DroppableId,
-  type: TypeId,
-  mode: DroppableMode,
-  direction: Direction,
-  isDropDisabled: boolean,
-  isCombineEnabled: boolean,
-  ignoreContainerClipping: boolean,
-  getDroppableRef: () => HTMLElement | null,
+  type?: TypeId,
+  mode?: DroppableMode,
+  direction?: Direction,
+  isDropDisabled?: boolean,
+  isCombineEnabled?: boolean,
+  ignoreContainerClipping?: boolean,
+  getDroppableRef?: () => HTMLElement | null,
 };
 
 // Exact
@@ -66,8 +66,8 @@ export default function useDroppablePublisher(args: Props) {
   const descriptor = useMemo<DroppableDescriptor>(
     () => ({
       id: args.droppableId,
-      type: args.type,
-      mode: args.mode,
+      type: args.type ?? "",
+      mode: args.mode ?? "standard", // By default
     }),
     [args.droppableId, args.mode, args.type],
   );
@@ -129,7 +129,7 @@ export default function useDroppablePublisher(args: Props) {
         "Cannot collect a droppable while a drag is occurring",
       );
       const previous: Props = previousRef.current;
-      const ref: HTMLElement | null = previous.getDroppableRef();
+      const ref: HTMLElement | null = previous.getDroppableRef ? previous.getDroppableRef() : null;
       invariant(ref, "Cannot collect without a droppable ref");
       const env: Env = getEnv(ref);
 
@@ -282,7 +282,7 @@ export default function useDroppablePublisher(args: Props) {
     }
     marshal.updateDroppableIsCombineEnabled(
       publishedDescriptorRef.current.id,
-      args.isCombineEnabled,
+      args.isCombineEnabled ?? false, // by default
     );
   }, [args.isCombineEnabled, marshal]);
 }