playbook_ui 15.6.0.pre.alpha.play265012865 → 15.6.0.pre.rc.0

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

@@ -39,59 +39,6 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 
       return { ...state, items: newItems };
     }
-
-    // Used only when enableCrossContainerPreview is true
-    case "REORDER_ITEMS_CROSS_CONTAINER": {
-      const { dragId, targetId, newContainer } = action.payload;
-      const newItems = [...state.items];
-      const draggedItem = newItems.find((item) => item && item.id === dragId);
-
-      if (!draggedItem) return state;
-
-      const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(
-        (item) => item && item.id === targetId
-      );
-
-      if (draggedIndex === -1 || targetIndex === -1) return state;
-
-      const updatedItem = { ...draggedItem, container: newContainer };
-      newItems.splice(draggedIndex, 1);
-      newItems.splice(targetIndex, 0, updatedItem);
-
-      return { ...state, items: newItems };
-    }
-
-    // Used only when enableCrossContainerPreview is true
-    case "MOVE_TO_CONTAINER_END": {
-      const { dragId, newContainer } = action.payload;
-      const newItems = [...state.items];
-      const draggedItem = newItems.find((item) => item && item.id === dragId);
-
-      if (!draggedItem) return state;
-
-      const draggedIndex = newItems.indexOf(draggedItem);
-      if (draggedIndex === -1) return state;
-
-      const updatedItem = { ...draggedItem, container: newContainer };
-
-      // Remove from current position
-      newItems.splice(draggedIndex, 1);
-
-      // Insert at end of target container
-      const lastIndexInContainer = newItems
-        .map((item) => item && item.container)
-        .lastIndexOf(newContainer);
-
-      if (lastIndexInContainer === -1) {
-        newItems.push(updatedItem);
-      } else {
-        newItems.splice(lastIndexInContainer + 1, 0, updatedItem);
-      }
-
-      return { ...state, items: newItems };
-    }
-
     default:
       return state;
   }
@@ -114,9 +61,7 @@ export const DraggableProvider = ({
   onDrop,
   onDragOver,
   dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility
-  // Opt-in flag for cross-container preview
-  enableCrossContainerPreview = false,
+  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -158,74 +103,17 @@ export const DraggableProvider = ({
     if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
 
     if (state.dragData.id !== id) {
-      if (enableCrossContainerPreview) {
-        // Used only when enableCrossContainerPreview is true
-        const draggedItem = state.items.find(
-          (item) => item && item.id === state.dragData.id
-        );
-        const currentContainer =
-          draggedItem && draggedItem.container
-            ? draggedItem.container
-            : state.dragData.initialGroup;
-
-        const isCrossContainer =
-          currentContainer !== container &&
-          (currentContainer !== undefined || container !== undefined);
-
-        if (isCrossContainer) {
-          dispatch({
-            type: "REORDER_ITEMS_CROSS_CONTAINER",
-            payload: {
-              dragId: state.dragData.id,
-              targetId: id,
-              newContainer: container,
-            },
-          });
-        } else {
-          // Same container: keep original behavior
-          dispatch({
-            type: "REORDER_ITEMS",
-            payload: { dragId: state.dragData.id, targetId: id },
-          });
-        }
-      } else {
-        // Original behavior (no preview across containers)
-        dispatch({type: "REORDER_ITEMS", payload: { dragId: state.dragData.id, targetId: id }});
-      }
-
-      dispatch({type: "SET_DRAG_DATA",payload: {id: state.dragData.id, initialGroup: container, originId: providerId}});
+      dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
 
   const handleDragEnd = () => {
-    const draggedItemId = state.dragData.id;
-    const originalContainer = state.dragData.initialGroup;
-    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
-    if (onDragEnd) {
-      if (!enableCrossContainerPreview) {
-        onDragEnd();
-      } else {
-        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
-        const finalContainer = draggedItem ? draggedItem.container : originalContainer;
-        
-        const itemsInContainer = state.items.filter(item => item && item.container === finalContainer);
-        const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
-        const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
-        const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
-        
-        onDragEnd(
-          draggedItemId,
-          finalContainer,
-          originalContainer,
-          itemAbove,
-          itemBelow
-        );
-      }
-    }
+    if (onDragEnd) onDragEnd();
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -235,34 +123,10 @@ export const DraggableProvider = ({
   const handleDrop = (container: string) => {
     if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
 
-    const draggedItemId = state.dragData.id;
-    const originalContainer = state.dragData.initialGroup;
-
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     changeCategory(state.dragData.id, container);
-    if (onDrop) {
-      if (!enableCrossContainerPreview) {
-        onDrop(container);
-      } else {
-        const draggedItem = state.items.find(item => item && item.id === draggedItemId);
-        const updatedItem = draggedItem ? { ...draggedItem, container } : null;
-        
-        const itemsInContainer = state.items.filter(item => item && item.container === container);
-        const indexInContainer = itemsInContainer.findIndex(item => item && item.id === draggedItemId);
-        const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
-        const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
-        
-        onDrop(
-          draggedItemId,
-          container,
-          originalContainer,
-          updatedItem,
-          itemAbove,
-          itemBelow
-        );
-      }
-    }
+    if (onDrop) onDrop(container);
   };
 
   const handleDragOver = (e: Event, container: string) => {
@@ -270,20 +134,6 @@ export const DraggableProvider = ({
 
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
-
-    if (enableCrossContainerPreview && state.dragData.id) {
-      // Only when enableCrossContainerPreview is true: when hovering over a different container, move item to end
-      const draggedItem = state.items.find(
-        (item) => item && item.id === state.dragData.id
-      );
-      if (draggedItem && draggedItem.container !== container) {
-        dispatch({
-          type: "MOVE_TO_CONTAINER_END",
-          payload: { dragId: state.dragData.id, newContainer: container },
-        });
-      }
-    }
-
     if (onDragOver) onDragOver(e, container);
   };
 
@@ -307,4 +157,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};

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

@@ -18,12 +18,8 @@ export type ActionType =
 } }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
-  | { type: 'SET_CROSS_CONTAINER_PREVIEW'; payload: boolean }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
-  | { 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 } };
+  | { type: 'REORDER_ITEMS'; payload: { dragId: string; targetId: string } };
 
   export interface DropZoneConfig {
     type?: 'ghost' | 'outline' | 'shadow' | 'line';
@@ -37,10 +33,9 @@ export type ActionType =
     onReorder: (items: ItemType[]) => void;
     onDragStart?: (id: string, container: string) => void;
     onDragEnter?: (id: string, container: string) => void;
-    onDragEnd?: (...args: any[]) => void;
-    onDrop?: (...args: any[]) => void;
+    onDragEnd?: () => void;
+    onDrop?: (container: string) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
     providerId?: string;
-    enableCrossContainerPreview?: boolean;
   }

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

@@ -5,12 +5,11 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers
-  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
 
   rails:
   - draggable_default: Default
@@ -18,8 +17,8 @@ examples:
   - draggable_with_selectable_list: Draggable with SelectableList Kit
   - draggable_with_cards: Draggable with Cards
   - draggable_with_table: Draggable with Table
+  - draggable_multiple_containers: Dragging Across Multiple Containers
   - draggable_drop_zones: Draggable Drop Zones
   - draggable_drop_zones_colors: Draggable Drop Zones Colors
   - draggable_drop_zones_line: Draggable Drop Zones Line
   - draggable_event_listeners: Draggable Event Listeners
-  - draggable_multiple_containers: Dragging Across Multiple Containers

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

@@ -7,5 +7,4 @@ export { default as DraggableWithTable } from './_draggable_with_table.jsx'
 export { default as DraggableDropZones } from './_draggable_drop_zones.jsx'
 export { default as DraggableDropZonesColors } from './_draggable_drop_zones_colors.jsx'
 export { default as DraggableDropZonesLine } from './_draggable_drop_zones_line.jsx'
-export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'
-export { default as DraggableMultipleContainersDropzone } from './_draggable_multiple_containers_dropzone.jsx'
+export { default as DraggableEventListeners } from './_draggable_event_listeners.jsx'

data/app/pb_kits/playbook/pb_draggable/draggable.test.jsx

@@ -255,80 +255,4 @@ test("line dropZone with horizontal direction applies 'line_horizontal' class to
   const container = kit.querySelector(".pb_draggable_container");
   
   expect(container).toHaveClass("line_horizontal");
-});
-
-// Cross-container drag tests
-const multiContainerData = [
-  { id: "1", container: "To Do", text: "Task 1" },
-  { id: "2", container: "To Do", text: "Task 2" },
-  { id: "3", container: "In Progress", text: "Task 3" },
-  { id: "4", container: "Done", text: "Task 4" },
-];
-
-const containers = ["To Do", "In Progress", "Done"];
-
-const DraggableMultipleContainers = () => {
-  const [initialState, setInitialState] = useState(multiContainerData);
-
-  return (
-    <div data-testid={testId}>
-      <DraggableProvider
-          dropZone={{ type: "outline" }}
-          initialItems={multiContainerData}
-          onReorder={(items) => setInitialState(items)}
-      >
-        {containers.map((container) => (
-          <Draggable.Container
-              container={container}
-              data={{testid:`container-${container}`}}
-              key={container}
-          >
-            {initialState
-              .filter((item) => item.container === container)
-              .map(({ id, text }) => (
-                <Draggable.Item
-                    container={container}
-                    data-testid={`item-${id}`}
-                    dragId={id}
-                    key={id}
-                >
-                  {text}
-                </Draggable.Item>
-              ))}
-          </Draggable.Container>
-        ))}
-      </DraggableProvider>
-    </div>
-  );
-};
-
-test("renders multiple containers with correct items", () => {
-  render(<DraggableMultipleContainers />);
-  
-  const kit = screen.getByTestId(testId);
-  expect(kit).toBeInTheDocument();
-  
-  containers.forEach((container) => {
-    const containerEl = kit.querySelector(`[data-testid="container-${container}"]`);
-    expect(containerEl).toBeInTheDocument();
-  });
-  
-  // Check items are in correct containers
-  expect(screen.getByText("Task 1")).toBeInTheDocument();
-  expect(screen.getByText("Task 2")).toBeInTheDocument();
-  expect(screen.getByText("Task 3")).toBeInTheDocument();
-  expect(screen.getByText("Task 4")).toBeInTheDocument();
-});
-
-test("items have correct container association", () => {
-  const { container } = render(<DraggableMultipleContainers />);
-  
-  // items rendered within their respective containers
-  const todoContainer = container.querySelector('[data-testid="container-To Do"]');
-  const inProgressContainer = container.querySelector('[data-testid="container-In Progress"]');
-  const doneContainer = container.querySelector('[data-testid="container-Done"]');
-  
-  expect(todoContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(2);
-  expect(inProgressContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
-  expect(doneContainer.querySelectorAll('.pb_draggable_item')).toHaveLength(1);
-})
+});

data/app/pb_kits/playbook/pb_file_upload/_file_upload.scss

@@ -1,5 +1,5 @@
 .pb_file_upload_kit {
-  .pb_card_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px #ccc dashed;
     text-align: center;
   }
@@ -11,7 +11,7 @@
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error;
     }
     .pb_body_kit_negative {
@@ -30,12 +30,12 @@
 }
 
 .dark .pb_file_upload_kit {
-  .pb_card_kit {
+  .pb_card_kit_deselected_border_radius_md {
     border: 1px $text_dk_lighter dashed;
   }
   &.error,
   &.pb_file_upload_kit_error {
-    .pb_card_kit {
+    .pb_card_kit_deselected_border_radius_md {
       border-color: $error_dark;
     }
   }

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -96,24 +96,20 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       {hasAllEmptyProps && '—'}
       {emphasis == 'street' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Title
-                className="pb_home_address_street_address"
-                dark={dark}
-                size={4}
-            >
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Title>
-          )}
-          {addressCont && (
-            <Title
-                className="pb_home_address_street_address"
-                dark={dark}
-                size={4}
-            >
-              {titleize(addressCont)}
-            </Title>
-          )}
+          <Title
+              className="pb_home_address_street_address"
+              dark={dark}
+              size={4}
+          >
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Title>
+          <Title
+              className="pb_home_address_street_address"
+              dark={dark}
+              size={4}
+          >
+            {titleize(addressCont)}
+          </Title>
           <Body color="light">
             {`${city ? `${titleize(city)}, ` : ''}${uppercaseState}${zipcode ? ` ${zipcode}` : ''}`}
           </Body>
@@ -121,14 +117,10 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       }
       {emphasis == 'city' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Body color="light">
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Body>
-          )}
-          {addressCont && (
-            <Body color="light">{titleize(addressCont)}</Body>
-          )}
+          <Body color="light">
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Body>
+          <Body color="light">{titleize(addressCont)}</Body>
           <div>
             <Title
                 className="pb_home_address_street_address"
@@ -149,14 +141,10 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
       }
       {emphasis == 'none' && !hasAllEmptyProps &&
         <div>
-          {(address || houseStyle) && (
-            <Body dark={dark}>
-              {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
-            </Body>
-          )}
-          {addressCont && (
-            <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
-          )}
+          <Body dark={dark}>
+            {joinPresent([formatStreetAdr(address), houseStyle], ' · ')}
+          </Body>
+          <Body dark={dark}>{formatStreetAdr(addressCont)}</Body>
           <div>
             <Body
                 color="light"

data/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    color: "light",
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    color: "light",
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  color: "light",
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  color: "light",
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <div>
   <%= pb_rails "title", props: {
     tag: "span",

data/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb

@@ -8,4 +8,4 @@
   state: "PA",
   zipcode: "19382",
   territory: "PHL",
-}) %>
+}) %>

data/app/pb_kits/playbook/pb_home_address_street/none_emphasis.html.erb

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "body", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "body", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <%= pb_rails "body", props: {
   color: "light",
   text: object.city_state_zip,

data/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb

@@ -1,19 +1,15 @@
-<% if object.address_house_style.present? %>
-  <%= pb_rails "title", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style,
-    dark: object.dark
-  } %>
-<% end %>
-<% if object.address_house_style2.present? %>
-  <%= pb_rails "title", props: {
-    classname: "pb_home_address_street_address",
-    size: 4,
-    text: object.address_house_style2,
-    dark: object.dark
-  } %>
-<% end %>
+<%= pb_rails "title", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style,
+  dark: object.dark
+} %>
+<%= pb_rails "title", props: {
+  classname: "pb_home_address_street_address",
+  size: 4,
+  text: object.address_house_style2,
+  dark: object.dark
+} %>
 <%= pb_rails "body", props: {
   color: "light",
   text: object.city_state_zip,

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -1,9 +1,8 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-import { deprecatedKitWarning } from '../utilities/deprecated'
 
 import Body from '../pb_body/_body'
 import Title from '../pb_title/_title'
@@ -33,11 +32,6 @@ const Legend = (props: LegendProps) => {
     text,
   } = props
 
-  useEffect(() => {
-    console.log('TESTING ------------------------')
-    deprecatedKitWarning('Legend')
-  }, [])
-
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)

data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss

@@ -36,16 +36,6 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
     height: $pb_multiple_users_size_xxs;
   }
 
-
-  .user_tooltip {
-    margin-left: $pb_multiple_users_overlap !important;
-  }
-
-  .user_count_tooltip {
-    margin-left: $pb_multiple_users_overlap !important;
-    position: relative;
-  }
-
   .pb_multiple_users_item {
     margin-left: $pb_multiple_users_overlap;
     margin-right: 0;