playbook_ui 15.6.0.pre.alpha.PLAY2686contactkittextonly13049 → 15.6.0.pre.alpha.draggableask12898

data/app/pb_kits/playbook/pb_distribution_bar/docs/_distribution_bar_custom_colors.md

@@ -1 +1 @@
-You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/tokens/colors) for reference.
+You can customize the order of the colors you would like to use by using the `colors` prop. Only the data and status colors will work for Playbook charts. See the [design page](https://playbook.powerapp.cloud/token/colors) for reference.

data/app/pb_kits/playbook/pb_draggable/context/index.tsx

@@ -92,32 +92,16 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       return { ...state, items: newItems };
     }
 
-    // Reset item back to its original container and position (e.g., when drag ends without valid drop)
+    // Reset item back to its original container (e.g., when drag ends without valid drop)
     case "RESET_DRAG_CONTAINER": {
-      const { itemId, originalContainer, originalIndex } = action.payload;
-      const newItems = [...state.items];
-      const draggedItem = newItems.find(item => item && item.id === itemId);
-      
-      if (!draggedItem) return state;
-      
-      const currentIndex = newItems.indexOf(draggedItem);
-      
-      // Remove from current position
-      newItems.splice(currentIndex, 1);
-      
-      // Restore container property and insert at original index
-      const restoredItem = { ...draggedItem, container: originalContainer };
-      
-      // Insert at original index, or at end if index is invalid
-      if (originalIndex !== undefined && originalIndex >= 0) {
-        newItems.splice(originalIndex, 0, restoredItem);
-      } else {
-        newItems.push(restoredItem);
-      }
-      
+      const { itemId, originalContainer } = action.payload;
       return {
         ...state,
-        items: newItems
+        items: state.items.map(item =>
+          item.id === itemId
+            ? { ...item, container: originalContainer }
+            : item
+        )
       };
     }
 
@@ -154,14 +138,12 @@ export const DraggableProvider = ({
     isDragging: boolean;
     draggedItemId: string;
     originalContainer: string;
-    originalIndex: number;
     currentContainer: string;
     dropOccurred: boolean;
   }>({
     isDragging: false,
     draggedItemId: '',
     originalContainer: '',
-    originalIndex: -1,
     currentContainer: '',
     dropOccurred: false,
   });
@@ -220,33 +202,87 @@ export const DraggableProvider = ({
       
       e.preventDefault();
       
-      // If we reach here, it means the drop was NOT on a valid container
-      // (otherwise the container's handleDrop would have set dropOccurred = true)
-      // So we should ALWAYS reset to original container for invalid drops
-      const originalContainer = dragStateRef.current.originalContainer;
-      
-      dispatch({
-        type: 'RESET_DRAG_CONTAINER',
-        payload: {
-          itemId: dragStateRef.current.draggedItemId,
-          originalContainer: originalContainer,
-          originalIndex: dragStateRef.current.originalIndex,
-        },
-      });
+      const currentContainer = dragStateRef.current.currentContainer;
       
-      dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
-      dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-      
-      // Clear drag state
-      dragStateRef.current = {
-        isDragging: false,
-        draggedItemId: '',
-        originalContainer: '',
-        originalIndex: -1,
-        currentContainer: '',
-        dropOccurred: false,
-      };
+      // If item is in a different container than original, treat it as a successful drop
+      if (currentContainer && currentContainer !== dragStateRef.current.originalContainer) {
+        
+        // Mark as dropped so other handlers know
+        dragStateRef.current.dropOccurred = true;
+        
+        // Trigger onDrop callback with the current container
+        if (onDrop) {
+          const draggedItem = stateRef.current.items.find(item => item && item.id === dragStateRef.current.draggedItemId);
+          const updatedItem = draggedItem ? { ...draggedItem, container: currentContainer } : null;
+          const itemsInContainer = stateRef.current.items.filter(item => item && item.container === currentContainer);
+          const indexInContainer = itemsInContainer.findIndex(item => item && item.id === dragStateRef.current.draggedItemId);
+          const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+          const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+          
+          onDrop(
+            dragStateRef.current.draggedItemId,
+            currentContainer,
+            dragStateRef.current.originalContainer,
+            updatedItem,
+            itemAbove,
+            itemBelow
+          );
+        }
+        
+        // Trigger onDragEnd callback
+        if (onDragEnd) {
+          const itemsInContainer = stateRef.current.items.filter(item => item && item.container === currentContainer);
+          const indexInContainer = itemsInContainer.findIndex(item => item && item.id === dragStateRef.current.draggedItemId);
+          const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+          const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+          
+          onDragEnd(
+            dragStateRef.current.draggedItemId,
+            currentContainer,
+            dragStateRef.current.originalContainer,
+            itemAbove,
+            itemBelow
+          );
+        }
+        
+        dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+        dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+      } else {
+        // Reset to original container (item didn't move or dropped in invalid zone)
+        const originalContainer = dragStateRef.current.originalContainer;
+        
+        dispatch({
+          type: 'RESET_DRAG_CONTAINER',
+          payload: {
+            itemId: dragStateRef.current.draggedItemId,
+            originalContainer: originalContainer,
+          },
+        });
+        
+        // Call onDrop with original container info
+        if (onDrop) {
+          const draggedItem = stateRef.current.items.find(item => item && item.id === dragStateRef.current.draggedItemId);
+          const updatedItem = draggedItem ? { ...draggedItem, container: originalContainer } : null;
+          const itemsInContainer = stateRef.current.items.filter(item => item && item.container === originalContainer);
+          const indexInContainer = itemsInContainer.findIndex(item => item && item.id === dragStateRef.current.draggedItemId);
+          const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+          const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
+          
+          onDrop(
+            dragStateRef.current.draggedItemId,
+            originalContainer,
+            originalContainer,
+            updatedItem,
+            itemAbove,
+            itemBelow
+          );
+        }
+        
+        dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
+        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
+        dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+      }
     };
 
     const handleGlobalMouseUp = () => {
@@ -283,7 +319,6 @@ export const DraggableProvider = ({
                 payload: {
                   itemId: dragStateRef.current.draggedItemId,
                   originalContainer: dragStateRef.current.originalContainer,
-                  originalIndex: dragStateRef.current.originalIndex,
                 },
               });
             }
@@ -296,7 +331,6 @@ export const DraggableProvider = ({
               isDragging: false,
               draggedItemId: '',
               originalContainer: '',
-              originalIndex: -1,
               currentContainer: '',
               dropOccurred: false,
             };
@@ -305,45 +339,14 @@ export const DraggableProvider = ({
       }
     };
 
-    // Detect when drag leaves document boundaries
-    const handleDragLeave = (e: DragEvent) => {
-      // Check if we're leaving the document (relatedTarget will be null)
-      if (!e.relatedTarget && dragStateRef.current.isDragging && !dragStateRef.current.dropOccurred) {
-        // Drag left the document: reset to original container immediately
-        dispatch({
-          type: 'RESET_DRAG_CONTAINER',
-          payload: {
-            itemId: dragStateRef.current.draggedItemId,
-            originalContainer: dragStateRef.current.originalContainer,
-            originalIndex: dragStateRef.current.originalIndex,
-          },
-        });
-        dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
-        dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-        dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-        
-        // Clear drag state
-        dragStateRef.current = {
-          isDragging: false,
-          draggedItemId: '',
-          originalContainer: '',
-          originalIndex: -1,
-          currentContainer: '',
-          dropOccurred: false,
-        };
-      }
-    };
-
     document.addEventListener('dragover', handleGlobalDragOver);
     document.addEventListener('drop', handleGlobalDrop);
-    document.addEventListener('dragleave', handleDragLeave);
     document.addEventListener('mouseup', handleGlobalMouseUp);
     document.addEventListener('pointerup', handleGlobalMouseUp);
     
     return () => {
       document.removeEventListener('dragover', handleGlobalDragOver);
       document.removeEventListener('drop', handleGlobalDrop);
-      document.removeEventListener('dragleave', handleDragLeave);
       document.removeEventListener('mouseup', handleGlobalMouseUp);
       document.removeEventListener('pointerup', handleGlobalMouseUp);
     };
@@ -368,7 +371,6 @@ export const DraggableProvider = ({
           payload: {
             itemId: dragStateRef.current.draggedItemId,
             originalContainer: dragStateRef.current.originalContainer,
-            originalIndex: dragStateRef.current.originalIndex,
           },
         });
       }
@@ -378,7 +380,6 @@ export const DraggableProvider = ({
         isDragging: false,
         draggedItemId: '',
         originalContainer: '',
-        originalIndex: -1,
         currentContainer: '',
         dropOccurred: false,
       };
@@ -390,14 +391,10 @@ export const DraggableProvider = ({
   const handleDragStart = (id: string, container: string) => {
     // Track drag in ref for global listener
     if (enableCrossContainerPreview) {
-      // Find the original index of the item
-      const originalIndex = state.items.findIndex(item => item && item.id === id);
-      
       dragStateRef.current = {
         isDragging: true,
         draggedItemId: id,
         originalContainer: container,
-        originalIndex: originalIndex,
         currentContainer: container,
         dropOccurred: false,
       };
@@ -465,7 +462,7 @@ export const DraggableProvider = ({
     
     // If enableCrossContainerPreview is true and no drop occurred, reset item to original container
     if (enableCrossContainerPreview && !dragStateRef.current.dropOccurred && draggedItemId && originalContainer) {
-      dispatch({ type: 'RESET_DRAG_CONTAINER', payload: { itemId: draggedItemId, originalContainer, originalIndex: dragStateRef.current.originalIndex } });
+      dispatch({ type: 'RESET_DRAG_CONTAINER', payload: { itemId: draggedItemId, originalContainer } });
     }
     
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -23,7 +23,7 @@ export type ActionType =
   | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } }
   | { type: 'REORDER_ITEMS_CROSS_CONTAINER'; payload: { dragId: string; targetId: string; newContainer: string } }
   | { type: 'MOVE_TO_CONTAINER_END'; payload: { dragId: string; newContainer: string } }
-  | { type: 'RESET_DRAG_CONTAINER'; payload: { itemId: string; originalContainer: string, originalIndex: number } };
+  | { type: 'RESET_DRAG_CONTAINER'; payload: { itemId: string; originalContainer: string } };
 
   export interface DropZoneConfig {
     type?: 'ghost' | 'outline' | 'shadow' | 'line';

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.tsx

@@ -6,10 +6,10 @@ import { GlobalProps, globalProps } from '../../utilities/globalProps'
 import Card from '../../pb_card/_card'
 
 export type FilterBackgroundProps = {
-  background?: boolean,
-  className?: string,
+  background: boolean,
+  className: string,
   children?: React.ReactChild[] | React.ReactChild,
-  dark?: boolean,
+  dark: boolean,
 } & GlobalProps
 
 const FilterBackground = (props: FilterBackgroundProps): React.ReactElement => {

data/app/pb_kits/playbook/pb_radio/docs/_radio_error.md

@@ -1 +1 @@
-Error shows that the radio option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).
+Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/_select.tsx

@@ -29,7 +29,6 @@ type SelectProps = {
   id?: string,
   includeBlank?: string,
   inline?: boolean,
-  inputOptions?: {[key: string]: string | number | boolean | (() => void)},
   label?: string,
   margin: string,
   marginBottom: string,
@@ -64,7 +63,6 @@ const Select = ({
   label,
   htmlOptions = {},
   inline = false,
-  inputOptions = {},
   multiple = false,
   name,
   onChange = () => undefined,
@@ -96,17 +94,14 @@ const Select = ({
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
-  const selectId = (inputOptions?.id as string) || name
-
   const selectBody =(() =>{
     if (children) return children
     return (
       <select
           {...htmlOptions}
           {...domSafeProps(props)}
-          {...inputOptions}
           disabled={disabled}
-          id={selectId}
+          id={name}
           multiple={multiple}
           name={name}
           onChange={onChange}
@@ -130,7 +125,7 @@ const Select = ({
       {label &&
         <label
             className="pb_select_kit_label"
-            htmlFor={selectId}
+            htmlFor={name}
         >
           <Caption 
               dark={props.dark}
@@ -140,7 +135,7 @@ const Select = ({
       }
       <label
           className={selectWrapperClass}
-          htmlFor={selectId}
+          htmlFor={name}
       >
         {selectBody}
         { multiple !== true ?

data/app/pb_kits/playbook/pb_select/docs/_select_error.md

@@ -1 +1 @@
-Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).
+Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

data/app/pb_kits/playbook/pb_select/docs/example.yml

@@ -15,7 +15,6 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_attributes: Select W/ Attributes
   - select_multiple: Select Multiple
-  - select_input_options: Input Options
 
 
 
@@ -34,7 +33,6 @@ examples:
   - select_inline_compact: Select Inline Compact
   - select_multiple: Select Multiple
   - select_react_hook: React Hook
-  - select_input_options: Input Options
 
   swift:
   - select_default_swift: Default

data/app/pb_kits/playbook/pb_select/docs/index.js

@@ -12,4 +12,3 @@ export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
 export { default as SelectMultiple } from './_select_multiple.jsx'
 export { default as SelectReactHook } from './_select_react_hook.jsx'
 export { default as SelectCustomSelectSubheaders } from './_select_custom_select_subheaders.jsx'
-export { default as SelectInputOptions } from './_select_input_options.jsx'

data/app/pb_kits/playbook/pb_select/select.html.erb

@@ -2,11 +2,11 @@
   id: nil,
   class: object.classnames ) do %>
   <% if object.label %>
-    <label class="pb_select_kit_label" for="<%= object.input_options[:id] || object.name %>">
+    <label class="pb_select_kit_label" for="<%= object.name %>">
       <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) %>
     </label>
   <% end %>
-  <label class="<%= object.select_wrapper_class %>" for="<%= object.input_options[:id] || object.name %>">
+  <label class="<%= object.select_wrapper_class %>" for="<%= object.name %>">
     <% if content.present? %>
       <%= content %>
       <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_select/select.rb

@@ -14,8 +14,6 @@ module Playbook
       prop :error
       prop :include_blank
       prop :inline, type: Playbook::Props::Boolean, default: false
-      prop :input_options, type: Playbook::Props::HashProp,
-                           default: {}
       prop :label
       prop :multiple, type: Playbook::Props::Boolean, default: false
       prop :name
@@ -40,7 +38,7 @@ module Playbook
           multiple: multiple,
           onchange: onchange,
           include_blank: include_blank,
-        }.merge(attributes).merge(input_options)
+        }.merge(attributes)
       end
 
       def classname

data/app/pb_kits/playbook/pb_select/select.test.js

@@ -65,27 +65,4 @@ test('returns multiple variant', () => {
   const selectElement = kit.querySelector('select');
 
   expect(selectElement).toHaveAttribute('multiple', '');
-});
-
-test('inputOptions are passed to select element', () => {
-  render(
-    <Select
-        data={{ testid: testId }}
-        inputOptions={{
-          id: 'custom-select-id',
-          className: 'custom-select-class',
-          'aria-label': 'Custom aria label',
-        }}
-        label="Favorite Food"
-        name="food"
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const selectElement = kit.querySelector('select')
-
-  expect(selectElement).toHaveAttribute('id', 'custom-select-id')
-  expect(selectElement).toHaveClass('custom-select-class')
-  expect(selectElement).toHaveAttribute('aria-label', 'Custom aria label')
 });