@react-fabric/form 1.0.0-beta.9 → 1.0.1

package/src/select/DualList.tsx

@@ -21,107 +21,60 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
-import { type RefProp } from "@react-fabric/core/dist/types/types";
-import {
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
-import { Field, type FieldProps } from "../input/Field";
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+
+import { RestrictToHorizontalAxis } from "@dnd-kit/abstract/modifiers";
+import { DragDropProvider, DragOverlay, useDraggable, useDroppable } from "@dnd-kit/react";
+import { Button, ButtonGroup, Icon } from "@react-fabric/core";
+import { cn, mergeRefs } from "@react-fabric/utilities";
+import { useCallback, useDeferredValue, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { Field } from "../input/Field";
+import type { DualSelectProps } from "../types";
+import { getWrapperProps } from "../utils";
 import { List } from "./List";
-import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
-import {
-  DndContext,
-  DragOverlay,
-  useDraggable,
-  useDroppable,
-} from "@dnd-kit/core";
-import { mergeRefs } from "@react-fabric/utilities";
 
-export interface DualListProps<T>
-  extends Omit<FieldProps, "children">,
-    RefProp<HTMLInputElement> {
-  /**
-   * list height
-   */
-  height?: string | number;
-  /**
-   * list options
-   */
-  options: T[];
-  /**
-   * selected value
-   */
-  value?: string[];
-  /**
-   * group by property name
-   */
-  groupProperty?: keyof T;
-  /**
-   * label property name
-   */
-  labelProperty?: keyof T;
-  /**
-   * value property name
-   */
-  valueProperty?: keyof T;
-  /**
-   * item renderer
-   */
-  renderer?: (option: T) => React.ReactNode;
-  /**
-   * change handler
-   */
-  onChange?: (value?: string[]) => void;
-}
+type DualRef = { moveLeftSelected: () => void; moveRightSelected: () => void };
 
-export const DualList = <T extends AnyObject = string>({
-  ref,
-  value,
-  options,
-  groupProperty,
-  height = "18rem",
-  labelProperty = "label" as AnyObject,
-  valueProperty = "id" as AnyObject,
-  renderer,
-  onChange,
-  // @ts-expect-error ignore
-  name,
-  // @ts-expect-error ignore
-  invalid,
-  // @ts-expect-error ignore
-  readOnly,
-  // @ts-expect-error ignore
-  disabled,
-  // @ts-expect-error ignore
-  placeholder,
-  // @ts-expect-error ignore
-  autoFocus,
-  // @ts-expect-error ignore
-  error,
-  ...rest
-}: DualListProps<T>) => {
-  const [actualValue, setActualValue] = useState<T[]>([]);
-  const [leftSelected, setLeftSelected] = useState<T[]>([]);
-  const [rightSelected, setRightSelected] = useState<T[]>([]);
+function DualListComponent<T extends AnyObject = string>(
+  props: DualSelectProps<T> & {
+    height?: string | number;
+    onSelectedChange: (left: T[], right: T[]) => void;
+    dualRef: React.Ref<DualRef>;
+  },
+) {
+  const {
+    ref,
+    value,
+    options,
+    emptyDisplay,
+    groupProperty,
+    height = "18rem",
+    labelProperty,
+    valueProperty = "value",
+    renderer,
+    onChange,
+    name,
+    invalid,
+    readOnly,
+    disabled,
+    autoFocus,
+    error,
+    dualRef,
+    onSelectedChange,
+  } = props;
+  const [actualValue, setActualValue] = useState<T[]>(() => []);
+  const [leftSelected, setLeftSelected] = useState<T[]>(() => []);
+  const [rightSelected, setRightSelected] = useState<T[]>(() => []);
   const deferred = useDeferredValue(value);
 
   useEffect(() => {
-    setActualValue(
-      options.filter((opt: AnyObject) =>
-        deferred?.includes(opt[valueProperty] ?? opt),
-      ),
-    );
-  }, [deferred, options]);
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
+    setActualValue(options.filter((opt: AnyObject) => deferred?.includes(opt[valueProperty] ?? opt)));
+  }, [deferred, options, valueProperty]);
 
   const [leftOptions, rightOptions] = useMemo(() => {
-    return [
-      options.filter((opt: AnyObject) => !actualValue?.includes(opt)),
-      actualValue,
-    ];
+    return [options.filter((opt: AnyObject) => !actualValue?.includes(opt)), actualValue];
   }, [options, actualValue]);
 
   const moveAllLeft = useCallback(() => {
@@ -141,146 +94,207 @@ export const DualList = <T extends AnyObject = string>({
   const moveLeftSelected = useCallback(() => {
     const selected = [...actualValue, ...leftSelected];
     setActualValue(selected);
-    onChange?.(
-      selected.map((opt: AnyObject) => `${opt[valueProperty] ?? opt}`),
-    );
+    onChange?.(selected.map((opt: AnyObject) => `${opt[valueProperty] ?? opt}`));
     setLeftSelected([]);
-  }, [onChange, leftSelected, actualValue]);
+  }, [actualValue, leftSelected, onChange, valueProperty]);
 
   const moveRightSelected = useCallback(() => {
     const selected = actualValue.filter((opt) => !rightSelected.includes(opt));
     setActualValue(selected);
-    onChange?.(
-      selected.map((opt: AnyObject) => `${opt[valueProperty] ?? opt}`),
-    );
+    onChange?.(selected.map((opt: AnyObject) => `${opt[valueProperty] ?? opt}`));
     setRightSelected([]);
-  }, [onChange, rightSelected, actualValue]);
+  }, [actualValue, onChange, rightSelected, valueProperty]);
 
-  const [dragItems, setDragItems] = useState<AnyObject[]>([]);
   const dragLeft = useDraggable({
     id: "unselected",
+    type: "unselected",
     disabled: !leftSelected.length,
-    data: { supports: ["selected"] },
-    attributes: { role: "none" },
   });
   const dragRight = useDraggable({
     id: "selected",
+    type: "selected",
     disabled: !rightSelected.length,
-    data: { supports: ["unselected"] },
-    attributes: { role: "none" },
   });
   const dropLeft = useDroppable({
     id: "unselected",
-    data: { accepts: ["selected"] },
+    accept: ["selected"],
   });
   const dropRight = useDroppable({
     id: "selected",
-    data: { accepts: ["unselected"] },
+    accept: ["unselected"],
   });
 
+  useImperativeHandle(
+    dualRef,
+    () => ({
+      moveLeftSelected,
+      moveRightSelected,
+    }),
+    [moveLeftSelected, moveRightSelected],
+  );
+
+  useEffect(() => {
+    onSelectedChange(leftSelected, rightSelected);
+  }, [leftSelected, onSelectedChange, rightSelected]);
+
   return (
-    <Field {...rest} noOutline plain>
-      <DndContext
-        modifiers={[restrictToHorizontalAxis]}
+    <>
+      <div
+        className={cn(
+          "flex-1 flex flex-col overflow-hidden p-px border-none!",
+          dropLeft.isDropTarget && "outline outline-primary-500 rounded-capped!",
+        )}
+        data-id="unselected"
+        ref={mergeRefs(dragLeft.ref, dropLeft.ref)}
+      >
+        <List
+          ref={ref}
+          multiple
+          allowClear
+          name={name}
+          invalid={invalid}
+          readOnly={readOnly}
+          disabled={disabled}
+          {...{ autoFocus }}
+          error={error}
+          height={height}
+          options={leftOptions}
+          emptyDisplay={emptyDisplay}
+          groupProperty={groupProperty}
+          labelProperty={labelProperty}
+          searchable
+          placeholder="Filter"
+          decorateStart={<Icon icon="icon-[mdi--filter-variant]" className="ps-2" />}
+          // @ts-expect-error ignore
+          valueProperty={valueProperty}
+          renderer={renderer}
+          onSelect={setLeftSelected}
+          data-inner={true}
+          data-hide-selected={true}
+        />
+      </div>
+      <div className="self-center mx-2">
+        <ButtonGroup vertical className="outline overflow-hidden bg-default">
+          <Button
+            size="sm"
+            variant="link"
+            aria-label="scroll to top"
+            onClick={moveAllLeft}
+            icon={{ icon: "icon-[mdi--chevron-double-left]", rtlFlip: true }}
+            disabled={!rightOptions.length}
+          />
+          <Button
+            size="sm"
+            variant="link"
+            aria-label="scroll up"
+            onClick={moveRightSelected}
+            icon={{ icon: "icon-[mdi--chevron-left]", rtlFlip: true }}
+            disabled={!rightSelected.length}
+          />
+          <Button
+            size="sm"
+            variant="link"
+            aria-label="scroll down"
+            onClick={moveLeftSelected}
+            icon={{ icon: "icon-[mdi--chevron-right]", rtlFlip: true }}
+            disabled={!leftSelected.length}
+          />
+          <Button
+            size="sm"
+            variant="link"
+            aria-label="scroll to bottom"
+            onClick={moveAllRight}
+            icon={{ icon: "icon-[mdi--chevron-double-right]", rtlFlip: true }}
+            disabled={!leftOptions.length}
+          />
+        </ButtonGroup>
+      </div>
+      <div
+        className={cn(
+          "flex-1 flex flex-col overflow-hidden p-px border-none!",
+          dropRight.isDropTarget && "outline outline-primary-500 rounded-capped!",
+        )}
+        data-id="selected"
+        ref={mergeRefs(dropRight.ref, dragRight.ref)}
+      >
+        <List
+          multiple
+          allowClear
+          height={height}
+          options={rightOptions}
+          emptyDisplay={emptyDisplay}
+          groupProperty={groupProperty}
+          labelProperty={labelProperty}
+          placeholder="Filter"
+          decorateStart={<Icon icon="icon-[mdi--filter-variant]" className="ps-2" />}
+          // @ts-expect-error ignore
+          valueProperty={valueProperty}
+          searchable
+          renderer={renderer}
+          onSelect={setRightSelected}
+          data-inner={true}
+          data-hide-selected={true}
+        />
+      </div>
+    </>
+  );
+}
+
+/**
+ * DualList component allows users to select items from two lists.
+ * It displays two lists side by side, one for unselected items and one for selected items.
+ * Users can move items between the lists using buttons or drag-and-drop functionality.
+ * It supports multiple selections and provides options for grouping, labeling, and rendering items.
+ * It also includes features for handling empty states and custom rendering of items.
+ * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
+ */
+export function DualList<T extends AnyObject = string>(props: DualSelectProps<T> & { height?: string | number }) {
+  const [dragCount, setDragCount] = useState(0);
+  const [leftSelected, setLeftSelected] = useState<T[]>(() => []);
+  const [rightSelected, setRightSelected] = useState<T[]>(() => []);
+  const dualRef = useRef<DualRef>(null);
+
+  return (
+    <Field {...getWrapperProps(props)} borderless>
+      <DragDropProvider
+        modifiers={[RestrictToHorizontalAxis]}
         onDragStart={(e) => {
-          setDragItems(
-            e.active.id === "selected" ? rightSelected : leftSelected,
-          );
+          setDragCount(e.operation.source?.id === "selected" ? rightSelected.length : leftSelected.length);
         }}
         onDragEnd={(e) => {
-          setDragItems([]);
+          if (e.operation.source?.id === "selected") dualRef.current?.moveRightSelected();
+          if (e.operation.source?.id === "unselected") dualRef.current?.moveLeftSelected();
+          setDragCount(0);
         }}
       >
-        <div
-          className="flex-1 flex flex-col overflow-hidden p-px"
-          ref={mergeRefs(dragLeft.setNodeRef, dropLeft.setNodeRef)}
-          {...dragLeft.attributes}
-          {...dragLeft.listeners}
-        >
-          <List
-            ref={ref}
-            multiple
-            allowClear
-            name={name}
-            invalid={invalid}
-            readOnly={readOnly}
-            disabled={disabled}
-            placeholder={placeholder}
-            autoFocus={autoFocus}
-            error={error}
-            height={height}
-            options={leftOptions}
-            groupProperty={groupProperty}
-            labelProperty={labelProperty}
-            valueProperty={valueProperty}
-            renderer={renderer}
-            onSelect={setLeftSelected}
-            data-inner={true}
-            data-hide-selected={true}
-          />
-        </div>
-        <div className="self-center mx-2">
-          <ButtonGroup vertical className="outline overflow-hidden bg-base">
-            <Button
-              rtlFlip
-              size="sm"
-              variant="link"
-              aria-label="scroll to top"
-              onClick={moveAllLeft}
-              icon={CoreIcons.chevronsLeft}
-              disabled={!rightOptions.length}
-            />
-            <Button
-              rtlFlip
-              size="sm"
-              variant="link"
-              aria-label="scroll up"
-              onClick={moveRightSelected}
-              icon={CoreIcons.chevronLeft}
-              disabled={!rightSelected.length}
-            />
-            <Button
-              rtlFlip
-              size="sm"
-              variant="link"
-              aria-label="scroll down"
-              onClick={moveLeftSelected}
-              icon={CoreIcons.chevronRight}
-              disabled={!leftSelected.length}
-            />
-            <Button
-              rtlFlip
-              size="sm"
-              variant="link"
-              aria-label="scroll to bottom"
-              onClick={moveAllRight}
-              icon={CoreIcons.chevronsRight}
-              disabled={!leftOptions.length}
-            />
-          </ButtonGroup>
-        </div>
-        <div
-          className="flex-1 flex flex-col overflow-hidden p-px"
-          ref={mergeRefs(dropRight.setNodeRef, dragRight.setNodeRef)}
+        <DualListComponent
+          {...props}
+          dualRef={dualRef}
+          onSelectedChange={(l, r) => (setLeftSelected(l), setRightSelected(r))}
+        />
+        <DragOverlay
+          className="mt-8! w-fit! h-fit!"
+          dropAnimation={({ element, feedbackElement, source }) => {
+            const target = element.parentElement?.querySelector(
+              `[data-id="${source.id === "selected" ? "unselected" : "selected"}"]`,
+            );
+
+            const overlayRect = element.getBoundingClientRect();
+            const targetRect = target?.getBoundingClientRect();
+
+            const deltaX = (targetRect?.left ?? 0) - overlayRect.left;
+            const deltaY = (targetRect?.top ?? 0) - overlayRect.top;
+
+            (feedbackElement as HTMLElement).style.setProperty("--dnd-translate", `${deltaX}px ${deltaY}px 0`);
+          }}
         >
-          <List
-            multiple
-            allowClear
-            height={height}
-            options={rightOptions}
-            groupProperty={groupProperty}
-            labelProperty={labelProperty}
-            valueProperty={valueProperty}
-            renderer={renderer}
-            onSelect={setRightSelected}
-            data-inner={true}
-            data-hide-selected={true}
-          />
-        </div>
-        <DragOverlay>
-          {dragItems.length > 0 && <span>{dragItems.length} Item(s)</span>}
+          {(evt) => {
+            if (!evt) return null;
+            // Render a clean visual preview without the drag hook styles
+            return <div className="bg-default text-xs outline px-2 py-1 size-fit rounded!">Moving {dragCount} item(s)</div>;
+          }}
         </DragOverlay>
-      </DndContext>
+      </DragDropProvider>
     </Field>
   );
-};
+}