playbook_ui 15.5.0.pre.alpha.draggableask12815 → 15.5.0.pre.alpha.draggablefix12557

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

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
@@ -39,61 +39,46 @@ const reducer = (state: InitialStateType, action: ActionType) => {
 
       return { ...state, items: newItems };
     }
-
-    // Used only when enableCrossContainerPreview is true
-    case "REORDER_ITEMS_CROSS_CONTAINER": {
+    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 draggedItem = newItems.find(item => item.id === dragId);
       const draggedIndex = newItems.indexOf(draggedItem);
-      const targetIndex = newItems.findIndex(
-        (item) => item && item.id === targetId
-      );
-
-      if (draggedIndex === -1 || targetIndex === -1) return state;
+      const targetIndex = newItems.findIndex(item => item.id === targetId);
 
+      // Update container temporarily so dropzone preview works correctly
       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": {
+    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 draggedItem = newItems.find(item => item.id === dragId);
       const draggedIndex = newItems.indexOf(draggedItem);
-      if (draggedIndex === -1) return state;
 
+      // Update container temporarily so dropzone preview works correctly
       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);
-
+      // Find the last item in the target container and insert after it
+      const lastIndexInContainer = newItems.map(item => item.container).lastIndexOf(newContainer);
       if (lastIndexInContainer === -1) {
+        // Container is empty, add to end
         newItems.push(updatedItem);
       } else {
+        // Insert after last item in container
         newItems.splice(lastIndexInContainer + 1, 0, updatedItem);
       }
 
       return { ...state, items: newItems };
     }
-
-    // Reset item back to its original container (e.g., when drag ends without valid drop)
-    case "RESET_DRAG_CONTAINER": {
+    case 'RESET_DRAG_CONTAINER': {
       const { itemId, originalContainer } = action.payload;
       return {
         ...state,
@@ -104,7 +89,6 @@ const reducer = (state: InitialStateType, action: ActionType) => {
         )
       };
     }
-
     default:
       return state;
   }
@@ -127,24 +111,9 @@ 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);
-  
-  // Track drag state for global listener
-  const dragStateRef = useRef<{
-    isDragging: boolean;
-    draggedItemId: string;
-    originalContainer: string;
-    dropOccurred: boolean;
-  }>({
-    isDragging: false,
-    draggedItemId: '',
-    originalContainer: '',
-    dropOccurred: false,
-  });
 
   // Parse dropZone prop - handle both string format (backward compatibility) and object format
   let dropZoneType = 'ghost';
@@ -174,94 +143,7 @@ export const DraggableProvider = ({
     onReorder(state.items);
   }, [state.items]);
 
-  // Monitor for failed drops by detecting mouse/pointer release during drag (this is needed for cross container preview)
-  useEffect(() => {
-    if (!enableCrossContainerPreview) return;
-
-    const handleGlobalMouseUp = () => {
-      // If we're dragging and mouse is released, wait a bit to see if drop occurs
-      if (dragStateRef.current.isDragging) {
-        setTimeout(() => {
-          // If drop still hasn't occurred, reset
-          if (dragStateRef.current.isDragging && !dragStateRef.current.dropOccurred) {
-            dispatch({
-              type: 'RESET_DRAG_CONTAINER',
-              payload: {
-                itemId: dragStateRef.current.draggedItemId,
-                originalContainer: dragStateRef.current.originalContainer,
-              },
-            });
-            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: '',
-              dropOccurred: false,
-            };
-          }
-        }, 50); // Small delay to let drop event fire if it's going to
-      }
-    };
-
-    document.addEventListener('mouseup', handleGlobalMouseUp);
-    document.addEventListener('pointerup', handleGlobalMouseUp);
-    
-    return () => {
-      document.removeEventListener('mouseup', handleGlobalMouseUp);
-      document.removeEventListener('pointerup', handleGlobalMouseUp);
-    };
-  }, [enableCrossContainerPreview]);
-
-  // Detect when dragging stops (isDragging goes from truthy to empty)
-  const prevIsDraggingRef = useRef(state.isDragging);
-  
-  useEffect(() => {
-    if (!enableCrossContainerPreview) return;
-
-    const wasDragging = prevIsDraggingRef.current;
-    const isNowDragging = state.isDragging;
-    
-    // Drag just ended (was dragging, now not)
-    if (wasDragging && !isNowDragging) {
-      
-      // If drop didn't occur, reset to original container
-      if (!dragStateRef.current.dropOccurred && dragStateRef.current.draggedItemId) {
-        dispatch({
-          type: 'RESET_DRAG_CONTAINER',
-          payload: {
-            itemId: dragStateRef.current.draggedItemId,
-            originalContainer: dragStateRef.current.originalContainer,
-          },
-        });
-      }
-      
-      // Clear drag state
-      dragStateRef.current = {
-        isDragging: false,
-        draggedItemId: '',
-        originalContainer: '',
-        dropOccurred: false,
-      };
-    }
-    
-    prevIsDraggingRef.current = isNowDragging;
-  }, [state.isDragging, enableCrossContainerPreview]);
-
   const handleDragStart = (id: string, container: string) => {
-    // Track drag in ref for global listener
-    if (enableCrossContainerPreview) {
-      dragStateRef.current = {
-        isDragging: true,
-        draggedItemId: id,
-        originalContainer: container,
-        dropOccurred: false,
-      };
-    }
-    
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
     if (onDragStart) onDragStart(id, container);
@@ -271,42 +153,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 },
-          });
-        }
+      // Check if this is a cross-container drag
+      const isCrossContainer = state.dragData.initialGroup !== container;
+      
+      if (isCrossContainer) {
+        // Use cross-container reorder to update container temporarily for dropzone preview
+        dispatch({ type: 'REORDER_ITEMS_CROSS_CONTAINER', payload: { dragId: state.dragData.id, targetId: id, newContainer: container } });
       } else {
-        // Original behavior (no preview across containers)
-        dispatch({type: "REORDER_ITEMS", payload: { dragId: state.dragData.id, targetId: id }});
+        // Same container: use normal reorder no need to be fancy nancy
+        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: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -314,37 +171,21 @@ export const DraggableProvider = ({
   const handleDragEnd = () => {
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
+    const draggedItem = state.items.find(item => item.id === draggedItemId);
+    const finalContainer = draggedItem ? draggedItem.container : originalContainer;
     
-    // 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 } });
-    }
+    // Find items above and below in the same container
+    const itemsInContainer = state.items.filter(item => item.container === finalContainer);
+    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
+    const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+    const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
     
     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
-        );
-      }
-    }
+    // Pass enhanced info to onDragEnd callback to give dev more context
+    if (onDragEnd) onDragEnd(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow);
   };
 
   const changeCategory = (itemId: string, container: string) => {
@@ -356,36 +197,23 @@ export const DraggableProvider = ({
 
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
+    const draggedItem = state.items.find(item => item.id === draggedItemId);
+    
+    // Find items above and below in the same container (before changeCategory updates it)
+    const itemsInContainer = state.items.filter(item => item.container === container);
+    const indexInContainer = itemsInContainer.findIndex(item => item.id === draggedItemId);
+    const itemAbove = indexInContainer > 0 ? itemsInContainer[indexInContainer - 1] : null;
+    const itemBelow = indexInContainer < itemsInContainer.length - 1 ? itemsInContainer[indexInContainer + 1] : null;
     
-    // Mark drop as successful in ref for global listener
-    if (enableCrossContainerPreview) {
-      dragStateRef.current.dropOccurred = true;
-    }
-
     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
-        );
-      }
+    // changeCategory will ensure the container is set correctly on drop for cross container and same container drops
+    changeCategory(draggedItemId, container);
+    
+    // Pass enhanced info to onDrop callback so devs have more context
+    if (onDrop && draggedItem) {
+      const updatedItem = { ...draggedItem, container };
+      onDrop(draggedItemId, container, originalContainer, updatedItem, itemAbove, itemBelow);
     }
   };
 
@@ -394,20 +222,15 @@ 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 },
-        });
-      }
+    
+    // Check if we're dragging over a different container than where the item currently is
+    const draggedItem = state.items.find(item => item.id === state.dragData.id);
+    if (draggedItem && draggedItem.container !== container) {
+      // This handles the case when dragging to empty space at bottom of container OR in empty container
+      dispatch({ type: 'MOVE_TO_CONTAINER_END', payload: { dragId: state.dragData.id, newContainer: container } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
     }
-
+    
     if (onDragOver) onDragOver(e, container);
   };
 
@@ -431,4 +254,4 @@ export const DraggableProvider = ({
   return (
     <DragContext.Provider value={contextValue}>{children}</DragContext.Provider>
   );
-};
+};

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

@@ -18,7 +18,6 @@ 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 } }
@@ -37,10 +36,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?: (draggedItemId: string, finalContainer: string, originalContainer: string, itemAbove: ItemType | null, itemBelow: ItemType | null) => void;
+    onDrop?: (draggedItemId: string, droppedContainer: string, originalContainer: string, item: ItemType, itemAbove: ItemType | null, itemBelow: ItemType | null) => 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/_draggable_multiple_containers_dropzone.jsx

@@ -83,7 +83,6 @@ const DraggableMultipleContainersDropzone = (props) => {
   return (
     <DraggableProvider 
         dropZone={{type: "outline"}}
-        enableCrossContainerPreview
         initialItems={data}
         onDragEnd={(draggedItemId, finalContainer, originalContainer, itemAbove, itemBelow) => {
           console.log(`Dragged Item ID: ${draggedItemId}`);

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

@@ -1,16 +1,16 @@
 examples:
   react:
   - draggable_default: Default
+  - draggable_multiple_containers_dropzone: Dragging Across Multiple Containers with Dropzones
   - draggable_with_list: Draggable with List Kit
   - 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 +18,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/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"