playbook_ui 18.2.0 → 18.3.0.pre.alpha.forwardrefwarnings20879

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownFormFields.tsx

@@ -0,0 +1,83 @@
+import React, { useEffect, useRef } from "react";
+import { GenericObject } from "../../types";
+
+type DropdownFormFieldsProps = {
+  disabled: boolean;
+  multiSelect: boolean;
+  name?: string;
+  onInvalid: () => void;
+  onReset: () => void;
+  required: boolean;
+  selected: GenericObject[];
+  validationMessage: string;
+};
+
+const DropdownFormFields = ({
+  disabled,
+  multiSelect,
+  name,
+  onInvalid,
+  onReset,
+  required,
+  selected,
+  validationMessage,
+}: DropdownFormFieldsProps): React.ReactElement => {
+  const validationRef = useRef<HTMLInputElement>(null);
+  const onResetRef = useRef(onReset);
+  onResetRef.current = onReset;
+
+  const hasSelection = selected.some((option) => String(option.id ?? option.value ?? "") !== "");
+  const needsArraySuffix = multiSelect && name && !name.endsWith("[]");
+  const fieldName = needsArraySuffix ? `${name}[]` : name;
+  const submittedOptions = hasSelection ? selected : [{}];
+
+  useEffect(() => {
+    validationRef.current?.setCustomValidity(required && !hasSelection ? validationMessage : "");
+  }, [required, hasSelection, validationMessage]);
+
+  useEffect(() => {
+    const form = validationRef.current?.form;
+    const handleReset = (event: Event) => {
+      // Let native controls reset first, and honor listeners that cancel the reset.
+      Promise.resolve().then(() => {
+        if (!event.defaultPrevented) onResetRef.current();
+      });
+    };
+    form?.addEventListener("reset", handleReset);
+    return () => form?.removeEventListener("reset", handleReset);
+  }, []);
+
+  return (
+    <>
+      {name && submittedOptions.map((option, index) => (
+        <input disabled={disabled}
+            key={index}
+            name={fieldName}
+            type="hidden"
+            value={option.id ?? option.value ?? ""}
+        />
+      ))}
+      <input aria-hidden="true"
+          disabled={disabled}
+          onChange={() => undefined}
+          onInvalid={(event) => {
+            event.preventDefault();
+            onInvalid();
+          }}
+          ref={validationRef}
+          required={required && !hasSelection}
+          style={{
+            position: "absolute",
+            opacity: 0,
+            width: 1,
+            height: 1,
+            pointerEvents: "none",
+          }}
+          tabIndex={-1}
+          value={hasSelection ? "selected" : ""}
+      />
+    </>
+  );
+};
+
+export default DropdownFormFields;

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -9,6 +9,7 @@ import {
 import { globalProps, GlobalProps } from "../../utilities/globalProps";
 
 import DropdownContext from "../context";
+import { matchesOptionExactly } from "../utilities/optionCreation";
 
 import Body from "../../pb_body/_body";
 import ListItem from "../../pb_list/_list_item";
@@ -36,12 +37,13 @@ const DropdownOption = (props: DropdownOptionProps) => {
     data = {},
     htmlOptions = {},
     id,
-    key,
     option,
   } = props;
 
   const {
     asyncEnabled,
+    creationOption,
+    creationEnabled,
     autocomplete,
     activeStyle,
     disabled,
@@ -70,7 +72,8 @@ const DropdownOption = (props: DropdownOptionProps) => {
     const filterText =
       selectedLabel && filterItem === selectedLabel ? "" : filterItem;
     const label = typeof option?.label === 'string' ? option.label.toLowerCase() : option?.label;
-    return String(label).toLowerCase().includes(filterText.toLowerCase());
+    return String(label).toLowerCase().includes(filterText.toLowerCase()) ||
+      (creationEnabled && matchesOptionExactly(option, filterText));
   }
 
   // When multiSelect, then if an option is selected, remove from dropdown
@@ -84,7 +87,8 @@ const DropdownOption = (props: DropdownOptionProps) => {
   const isOptionDisabled = option?.disabled === true;
   const isDisabled = disabled || isOptionDisabled;
 
-  if (!isItemMatchingFilter(option) || (multiSelect && isSelected)) {
+  const isCreationOption = option === creationOption;
+  if ((!isCreationOption && !isItemMatchingFilter(option)) || (multiSelect && isSelected)) {
     return null;
   }
   const isFocused =
@@ -122,7 +126,12 @@ const DropdownOption = (props: DropdownOptionProps) => {
     isDisabled && "disabled"
   );
 
-  const content = children || (renderOption && option ? renderOption(option) : null);
+  let content = children || null;
+  if (isCreationOption) {
+    content = `Create "${option.label}"`;
+  } else if (!content && renderOption && option) {
+    content = renderOption(option);
+  }
 
   return (
     <div
@@ -132,7 +141,6 @@ const DropdownOption = (props: DropdownOptionProps) => {
         aria-disabled={isDisabled}
         className={classes}
         id={id}
-        key={key}
         onClick={isDisabled ? undefined : () => handleOptionClick(option)}
     >
       <ListItem

data/app/pb_kits/playbook/pb_dropdown/subcomponents/MultiSelectTriggerDisplay.tsx

@@ -1,10 +1,15 @@
-import React, { useContext } from "react";
-import FormPill from "../../pb_form_pill/_form_pill";
-import Flex from "../../pb_flex/_flex";
+import React, { useCallback, useContext, useMemo, useRef } from "react";
 import Body from "../../pb_body/_body";
+import Draggable from "../../pb_draggable/_draggable";
+import { DraggableContext, DraggableProvider } from "../../pb_draggable/context";
+import Flex from "../../pb_flex/_flex";
+import FormPill from "../../pb_form_pill/_form_pill";
+import Icon from "../../pb_icon/_icon";
+import { noop } from "../../utilities/object";
 import { GenericObject } from "../../types";
-import DropdownContext
- from "../context";
+import DropdownContext from "../context";
+import usePillDropIndicator from "../utilities/usePillDropIndicator";
+
 type MultiSelectTriggerDisplayProps = {
   autocomplete?: boolean;
   selected: GenericObject[];
@@ -12,52 +17,352 @@ type MultiSelectTriggerDisplayProps = {
   dark?: boolean;
 };
 
+type DropdownPillProps = {
+  dark?: boolean;
+  formPillProps?: GenericObject;
+  index: number;
+  onKeyboardReorder?: (direction: "left" | "right") => void;
+  onRemove: (event: React.MouseEvent | React.KeyboardEvent) => void;
+  option: GenericObject;
+  externalDragHandle?: boolean;
+  showPillIndex?: boolean;
+  totalCount: number;
+};
+
+const DropdownPill = ({
+  dark = false,
+  formPillProps,
+  index,
+  onKeyboardReorder,
+  onRemove,
+  option,
+  externalDragHandle = false,
+  showPillIndex = false,
+  totalCount,
+}: DropdownPillProps) => {
+  const baseLabel = option.label || "";
+  const label = showPillIndex ? `${index + 1}. ${baseLabel}` : baseLabel;
+  const positionLabel = totalCount > 0
+    ? `${baseLabel}, position ${index + 1} of ${totalCount}, press Left or Right Arrow keys to reorder`
+    : baseLabel;
+  const pillIcon = !externalDragHandle && onKeyboardReorder ? "grip-dots-vertical" : "";
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Backspace" || event.key === "Delete") {
+      event.preventDefault();
+      event.stopPropagation();
+      onRemove(event);
+    } else if (onKeyboardReorder && (event.key === "ArrowLeft" || event.key === "ArrowRight")) {
+      event.preventDefault();
+      event.stopPropagation();
+      const pill = event.currentTarget;
+      onKeyboardReorder(event.key === "ArrowLeft" ? "left" : "right");
+      requestAnimationFrame(() => pill.focus());
+    }
+  };
+
+  const pill = (
+    <FormPill
+        dark={dark}
+        htmlOptions={{ "aria-label": positionLabel, onKeyDown: handleKeyDown }}
+        icon={pillIcon}
+        marginRight="xs"
+        name=""
+        onClick={(event) => {
+          event.stopPropagation();
+          onRemove(event);
+        }}
+        tabIndex={0}
+        text={label}
+        {...formPillProps}
+    />
+  );
+
+  if (!externalDragHandle) return pill;
+
+  return (
+    <span className="pb_dropdown_pill_with_handle">
+      <span
+          aria-hidden="true"
+          className="pb_draggable_handle pb_dropdown_external_drag_handle"
+          onMouseDown={(event) => {
+            event.stopPropagation();
+          }}
+      >
+        <Body color="light">
+          <Icon
+              icon="grip-dots-vertical"
+              verticalAlign="middle"
+          />
+        </Body>
+      </span>
+      {pill}
+    </span>
+  );
+};
+
+type DraggablePillListProps = {
+  dark?: boolean;
+  formPillProps?: GenericObject;
+  getItemId: (item: GenericObject) => string;
+  onRemove: (option: GenericObject) => void;
+  onReorder: (next: GenericObject[]) => void;
+  pendingReorderRef: React.MutableRefObject<GenericObject[] | null>;
+  externalDragHandle: boolean;
+  selected: GenericObject[];
+  showPillIndex: boolean;
+};
+
+const DraggablePillList = ({
+  dark,
+  formPillProps,
+  getItemId,
+  onRemove,
+  onReorder,
+  pendingReorderRef,
+  externalDragHandle,
+  selected,
+  showPillIndex,
+}: DraggablePillListProps) => {
+  const { isDragging: dragId } = DraggableContext();
+  const dropTarget = usePillDropIndicator(
+    dragId,
+    selected,
+    getItemId,
+    pendingReorderRef,
+  );
+
+  const getDropLineClassName = (index: number): string | undefined => {
+    if (dropTarget?.index !== index) return undefined;
+    return dropTarget.after ? "pb_dropdown_drop_after" : "pb_dropdown_drop_before";
+  };
+
+  const handleKeyboardReorder = (index: number, direction: "left" | "right") => {
+    const newIndex = direction === "left" ? index - 1 : index + 1;
+    if (newIndex < 0 || newIndex >= selected.length) return;
+
+    const reordered = [...selected];
+    const [movedItem] = reordered.splice(index, 1);
+    reordered.splice(newIndex, 0, movedItem);
+    onReorder(reordered);
+  };
+
+  return (
+    <div
+        onClick={(event) => event.stopPropagation()}
+        onMouseDown={(event) => {
+          if ((event.target as HTMLElement | null)?.closest(".pb_form_pill_close")) return
+          event.stopPropagation()
+        }}
+    >
+      <Draggable.Container
+          className="pb_dropdown_draggable_pills"
+          container="dropdown-pills"
+          tag="div"
+      >
+        {selected.map((option, index) => (
+          <Draggable.Item
+              className={getDropLineClassName(index)}
+              container="dropdown-pills"
+              dragId={getItemId(option)}
+              handlePointerDrag={externalDragHandle}
+              key={getItemId(option)}
+              pointerDrag={!externalDragHandle}
+              tag="span"
+          >
+            <DropdownPill
+                dark={dark}
+                externalDragHandle={externalDragHandle}
+                formPillProps={formPillProps}
+                index={index}
+                onKeyboardReorder={(direction) => handleKeyboardReorder(index, direction)}
+                onRemove={() => onRemove(option)}
+                option={option}
+                showPillIndex={showPillIndex}
+                totalCount={selected.length}
+            />
+          </Draggable.Item>
+        ))}
+      </Draggable.Container>
+    </div>
+  );
+};
+
+type DraggablePillsStripProps = {
+  dark?: boolean;
+  formPillProps?: GenericObject;
+  getItemId: (item: GenericObject) => string;
+  onRemove: (option: GenericObject) => void;
+  onReorder: (next: GenericObject[]) => void;
+  externalDragHandle: boolean;
+  selected: GenericObject[];
+  showPillIndex: boolean;
+};
+
+const buildSelectedPillsKey = (value: GenericObject[], getItemId: (item: GenericObject) => string): string => (
+  value.map((item) => `${getItemId(item)}:${item.label ?? ""}`).join("|")
+);
+
+const formPillPropsKey = (formPillProps?: GenericObject): string => (
+  JSON.stringify(formPillProps ?? {})
+);
+
+const DraggablePillsStrip = React.memo(function DraggablePillsStrip({
+  dark,
+  formPillProps,
+  getItemId,
+  onRemove,
+  onReorder,
+  externalDragHandle,
+  selected,
+  showPillIndex,
+}: DraggablePillsStripProps) {
+  const pendingReorderRef = useRef<GenericObject[] | null>(null);
+  const selectedRef = useRef(selected);
+  selectedRef.current = selected;
+
+  const initialItems = useMemo(
+    () => selected.map((item) => ({
+      id: getItemId(item),
+      container: "dropdown-pills",
+      label: item.label,
+      value: item.value,
+    })),
+    [getItemId, selected],
+  );
+
+  const commitReorder = useCallback(() => {
+    if (!pendingReorderRef.current) return;
+
+    const currentOrder = selectedRef.current.map((item) => getItemId(item)).join(",");
+    const newOrder = pendingReorderRef.current.map((item) => getItemId(item)).join(",");
+
+    if (currentOrder !== newOrder) {
+      onReorder(pendingReorderRef.current);
+    }
+
+    pendingReorderRef.current = null;
+  }, [getItemId, onReorder]);
+
+  return (
+    <DraggableProvider
+        dropZone={{ type: "ghost" }}
+        initialItems={initialItems}
+        onDragEnd={commitReorder}
+        onDrop={commitReorder}
+        onReorder={noop}
+    >
+      <DraggablePillList
+          dark={dark}
+          externalDragHandle={externalDragHandle}
+          formPillProps={formPillProps}
+          getItemId={getItemId}
+          onRemove={onRemove}
+          onReorder={onReorder}
+          pendingReorderRef={pendingReorderRef}
+          selected={selected}
+          showPillIndex={showPillIndex}
+      />
+    </DraggableProvider>
+  );
+}, (prevProps, nextProps) => (
+  prevProps.dark === nextProps.dark
+  && prevProps.externalDragHandle === nextProps.externalDragHandle
+  && prevProps.showPillIndex === nextProps.showPillIndex
+  && formPillPropsKey(prevProps.formPillProps) === formPillPropsKey(nextProps.formPillProps)
+  && buildSelectedPillsKey(prevProps.selected, prevProps.getItemId)
+    === buildSelectedPillsKey(nextProps.selected, nextProps.getItemId)
+));
+
 const MultiSelectTriggerDisplay = ({
   autocomplete,
   selected,
   placeholder,
   dark = false,
 }: MultiSelectTriggerDisplayProps) => {
+  const {
+    disabled,
+    enablePillReorder,
+    formPillProps,
+    getOptionValue,
+    handleSelectionChange,
+    isControlled,
+    isSameOption,
+    optionKey,
+    externalDragHandle = false,
+    setSelected,
+    showPillIndex = false,
+  } = useContext(DropdownContext);
 
-  const { setSelected, handleSelectionChange, formPillProps, isControlled, isSameOption, getOptionValue } = useContext(DropdownContext);
+  const getItemId = useCallback((option: GenericObject) => (
+    optionKey ? optionKey(option) : String(
+      getOptionValue ? getOptionValue(option) : option.id ?? option.value ?? option.label
+    )
+  ), [getOptionValue, optionKey]);
 
   if (selected.length === 0) {
     if (autocomplete) return null;
     return (
-    <Body
-        color="lighter"
-        dark={dark}
-        text={placeholder ? placeholder : "Select..."}
-    />
-    )
+      <Body
+          color="lighter"
+          dark={dark}
+          text={placeholder ? placeholder : "Select..."}
+      />
+    );
   }
 
- const handleRemoveIconClick = (option: GenericObject) => {
-  if (isControlled || getOptionValue) {
-    const next = selected.filter((item) => !isSameOption(item, option));
-    setSelected(next);
-    handleSelectionChange(next);
-    return;
-  }
-  setSelected((prev: GenericObject[]) => {
-      const next = prev.filter((item) => !isSameOption(item, option));
+  const applySelection = (next: GenericObject[]) => {
+    if (isControlled || getOptionValue) {
+      setSelected(next);
+      handleSelectionChange(next);
+      return;
+    }
+    setSelected(() => {
       handleSelectionChange && handleSelectionChange(next);
       return next;
     });
- } 
+  };
+
+  const handleRemoveIconClick = (option: GenericObject) => {
+    if (disabled) return;
+    applySelection(selected.filter((item) => !isSameOption(item, option)));
+  };
+
+  const handleReorder = (next: GenericObject[]) => {
+    if (disabled) return;
+    applySelection(next);
+  };
+
+  if (enablePillReorder && !disabled) {
+    return (
+      <DraggablePillsStrip
+          dark={dark}
+          externalDragHandle={Boolean(externalDragHandle)}
+          formPillProps={formPillProps}
+          getItemId={getItemId}
+          onRemove={handleRemoveIconClick}
+          onReorder={handleReorder}
+          selected={selected}
+          showPillIndex={Boolean(showPillIndex)}
+      />
+    );
+  }
 
   return (
     <Flex wrap>
       {selected.map((option, i) => (
-          <FormPill
-              dark={dark}
-              key={getOptionValue ? getOptionValue(option) : i}
-              marginRight="xs"
-              onClick={(e)=>{e.stopPropagation();handleRemoveIconClick(option)}}
-              tabIndex={0}
-              text={option.label}
-              {...formPillProps}
-          />
+        <FormPill
+            dark={dark}
+            key={getOptionValue ? getOptionValue(option) : i}
+            marginRight="xs"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleRemoveIconClick(option);
+            }}
+            tabIndex={0}
+            text={showPillIndex ? `${i + 1}. ${option.label}` : option.label}
+            {...formPillProps}
+        />
       ))}
     </Flex>
   );

data/app/pb_kits/playbook/pb_dropdown/utilities/optionCreation.ts

@@ -0,0 +1,21 @@
+import { GenericObject } from "../../types";
+
+export const matchesOptionExactly = (option: GenericObject | undefined, query: string): boolean => {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!option || !normalizedQuery) return false;
+
+  const optionValues = [option.label, option.value, option.id];
+  return optionValues.some((value) => (
+    value != null && String(value).trim().toLowerCase() === normalizedQuery
+  ));
+};
+
+export const getCreationOption = (query: string, options: GenericObject[]): GenericObject | null => {
+  const text = query.trim();
+  if (!text) return null;
+
+  const optionExists = options.some((option) => matchesOptionExactly(option, text));
+  if (optionExists) return null;
+
+  return { id: text, label: text, value: text, __isNew__: true };
+};