playbook_ui 15.5.0.pre.alpha.PLAY2581aggressivevalidation12698 → 15.5.0.pre.alpha.draggableask12812

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ae823d2ea188c8b8b0476223c92ffb8cbf0604e42028c011f6fe12b81a25b8d1
-  data.tar.gz: 7d8758ea0c6fb712605df92777b66589a7d62c63b43cefb3e0cb0a4a104b9547
+  metadata.gz: 56097fbb1da0d4528e1d4beb87d0737331ed094cc2e29e3ebdee8384c8a2ba98
+  data.tar.gz: dd17076481fb9ad736c29ca19272f2c8c598fb996e858216971756d8405dd9e6
 SHA512:
-  metadata.gz: b0bdb702a07ce7985616a28ee935a875208cf9e6292c78d4368408804bbd5a18743e52f642be425d0282b951035fbdbf89a51ced9f143ac314e9545e51069b7a
-  data.tar.gz: 2b3897ff7f64c3d7a618ba0ae8056bcc817b81dbf65088e66b800fec33f23144966bdceec47386a8356cc04727c62d8db0e5f5d3f6f0f53be142d04545a3329f
+  metadata.gz: 8ed5946c8074670af44c1ebf4bfdff28144418e7eb199ea8bc755c3750f4d4ecd7ea9050c773e4adff13c55daed0ca16376e0f088ba2664795a8a58340bbaf27
+  data.tar.gz: c712a117f381ee38fbdcbb850003540978418541b04ef575e16c65964d2224b40a2399c9d61ff14613bdaa064e8241657dc48588a5babbc54df6c99d27ffeef3

data/app/pb_kits/playbook/pb_background/_background.tsx

@@ -102,16 +102,16 @@ const Background = (props: BackgroundProps): React.ReactElement => {
   useEffect(() => {
     const updateResponsiveProps = () => {
       setResponsiveProps({
-        backgroundSize: getResponsiveValue(props.backgroundSize),
-        backgroundPosition: getResponsiveValue(props.backgroundPosition),
-        backgroundRepeat: getResponsiveValue(props.backgroundRepeat),
-        backgroundColor: getResponsiveValue(props.backgroundColor),
-        imageUrl: getResponsiveValue(props.imageUrl),
+        backgroundSize: getResponsiveValue(backgroundSize),
+        backgroundPosition: getResponsiveValue(backgroundPosition),
+        backgroundRepeat: getResponsiveValue(backgroundRepeat),
+        backgroundColor: getResponsiveValue(backgroundColor),
+        imageUrl: getResponsiveValue(imageUrl),
       });
     };
     window.addEventListener('resize', updateResponsiveProps);
     return () => window.removeEventListener('resize', updateResponsiveProps);
-  }, [props]);
+  }, [backgroundSize, backgroundPosition, backgroundRepeat, backgroundColor, imageUrl]);
 
 
   // Extract currently applicable responsive values.

data/app/pb_kits/playbook/pb_background/background.test.js

@@ -4,7 +4,6 @@ import Background from './_background'
 
 const props = {
   data: { testid: 'background' },
-  backgroundColor: null,
 }
 
 it('Should be accessible', async () => {
@@ -42,3 +41,8 @@ test('applies correct overlay class when imageOverlay prop is provided', () => {
   const kit = renderKit(Background, props, { imageOverlay: 'opacity_6' });
   expect(kit).toHaveClass('imageoverlay_opacity_6');
 });
+
+test('Sets backgroundColor to light as default when no backgroundColor prop is provided', () => {
+  const kit = renderKit(Background, props);
+  expect(kit).toHaveClass('pb_background_color_light');
+});

data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb

@@ -1,3 +1,3 @@
-<%= pb_rails("background", props: { background_color: "light", padding: "xl" }) do %>
+<%= pb_rails("background", props: { padding: "xl" }) do %>
 
 <% end %>

data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx

@@ -3,7 +3,6 @@ import Background from '../../pb_background/_background'
 
 const BackgroundLight = (props) => (
   <Background
-      backgroundColor="light"
       padding="xl"
       {...props}
   />

data/app/pb_kits/playbook/pb_background/docs/_background_light.md

@@ -0,0 +1 @@
+By default, the Background kit sets background color to 'light' as seen here. 

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

@@ -1,7 +1,7 @@
 examples:
 
   rails:
-  - background_light: Light
+  - background_light: Default
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image
@@ -11,7 +11,7 @@ examples:
   - background_size: Size
 
   react:
-  - background_light: Light
+  - background_light: Default
   - background_white: White
   - background_gradient: Gradient
   - background_image: Image

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -143,30 +143,25 @@ export default class PbDialog extends PbEnhancedElement {
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      const originalClickHandler = dialogElement._outsideClickHandler
-      if (originalClickHandler) dialogElement.removeEventListener("click", originalClickHandler)
-      
+      const originalMousedownHandler = dialogElement._outsideClickHandler
+      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
       dialogElement._outsideClickHandler = (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
-        // Get the dialog's bounding box (the actual content area)
-        const rect = dialogElement.getBoundingClientRect()
-        const clickedInDialog = (
-          event.clientX >= rect.left &&
-          event.clientX <= rect.right &&
-          event.clientY >= rect.top &&
-          event.clientY <= rect.bottom
-        )
-
-        // Only close if clicked outside the dialog content (on the backdrop)
-        if (!clickedInDialog) {
+        const dialogModal = event.target.getBoundingClientRect()
+        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+          event.clientX > dialogModal.right ||
+          event.clientY < dialogModal.top ||
+          event.clientY > dialogModal.bottom
+
+        if (clickedOutsideDialogModal) {
           dialogElement.close()
           event.stopPropagation()
         }
       }
 
-      dialogElement.addEventListener("click", dialogElement._outsideClickHandler);
+      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
     })
   }
 }

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

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, useContext, useEffect, useMemo } from "react";
+import React, { createContext, useReducer, useContext, useEffect, useMemo, useRef } from "react";
 import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
@@ -8,6 +8,9 @@ const initialState: InitialStateType = {
   activeContainer: ""
 };
 
+// Track if a successful drop occurred to distinguish from dragEnd without drop
+let dropOccurred = false;
+
 const reducer = (state: InitialStateType, action: ActionType) => {
   switch (action.type) {
     case 'SET_ITEMS':
@@ -92,6 +95,19 @@ const reducer = (state: InitialStateType, action: ActionType) => {
       return { ...state, items: newItems };
     }
 
+    // Reset item back to its original container (e.g., when drag ends without valid drop)
+    case "RESET_DRAG_CONTAINER": {
+      const { itemId, originalContainer } = action.payload;
+      return {
+        ...state,
+        items: state.items.map(item =>
+          item.id === itemId
+            ? { ...item, container: originalContainer }
+            : item
+        )
+      };
+    }
+
     default:
       return state;
   }
@@ -119,6 +135,19 @@ export const DraggableProvider = ({
   enableCrossContainerPreview = false,
 }: 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';
@@ -148,7 +177,94 @@ 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);
@@ -202,9 +318,18 @@ export const DraggableProvider = ({
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
     
+    // If enableCrossContainerPreview is true and no drop occurred, reset item to original container
+    if (enableCrossContainerPreview && !dropOccurred && draggedItemId && originalContainer) {
+      dispatch({ type: 'RESET_DRAG_CONTAINER', payload: { itemId: draggedItemId, originalContainer } });
+    }
+    
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
+    
+    // Reset the drop flag
+    dropOccurred = false;
+    
     if (onDragEnd) {
       if (!enableCrossContainerPreview) {
         onDragEnd();
@@ -237,6 +362,11 @@ export const DraggableProvider = ({
 
     const draggedItemId = state.dragData.id;
     const originalContainer = state.dragData.initialGroup;
+    
+    // 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: "" });

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

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

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

@@ -1,15 +1,19 @@
-<%= 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
-} %>
+<% 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 %>
 <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,15 +1,19 @@
-<%= 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
-} %>
+<% 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: {
   color: "light",
   text: object.city_state_zip,

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

@@ -1,15 +1,19 @@
-<%= 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
-} %>
+<% 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 "body", props: {
   color: "light",
   text: object.city_state_zip,

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

@@ -36,6 +36,16 @@ $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;

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

@@ -5,17 +5,19 @@ import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../uti
 import { globalProps } from '../utilities/globalProps'
 
 import Avatar from '../pb_avatar/_avatar'
+import Tooltip from '../pb_tooltip/_tooltip'
 
 type MultipleUsersProps = {
   aria?: { [key: string]: string },
   className?: string,
   dark?: boolean,
   data?: { [key: string]: string },
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   maxDisplayedUsers?: number,
   reverse?: boolean,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
+  withTooltip?: boolean,
   users: Array<{ [key: string]: string }>,
 }
 
@@ -30,6 +32,7 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
     maxDisplayedUsers = 4,
     reverse = false,
     size = 'xs',
+    withTooltip = false,
     users,
   } = props
 
@@ -62,22 +65,70 @@ const MultipleUsers = (props: MultipleUsersProps): React.ReactElement => {
         className={classes}
         id={id}
     >
-      {usersToDisplay.map((avatarData, index) => (
-        <Avatar
-            {...avatarData}
-            className="pb_multiple_users_item"
-            dark={dark}
-            imageAlt={avatarData.name}
-            key={index}
-            size={size}
-        />
-      ))}
+      {withTooltip ?
+        <>
+          {usersToDisplay.map((avatarData, index) => (
+            <Tooltip
+                key={"user_tooltip_" + index}
+                placement='top'
+                text={avatarData.tooltip ? avatarData.tooltip : ''}
+                zIndex={10}
+            >
+              <Avatar
+                  {...avatarData}
+                  className={"pb_multiple_users_item" + (withTooltip ? " user_tooltip" : "")}
+                  dark={dark}
+                  imageAlt={avatarData.name}
+                  key={index}
+                  size={size}
+              />
+            </Tooltip>
+          ))}
 
-      { users.length > maxDisplayedUsers && 
-        <div className={itemClasses}>
-          {`+${users.length - 3}`}
-        </div>
+          {users.length > maxDisplayedUsers &&
+            <Tooltip
+                placement='top'
+                text={
+                  <div>
+                    {
+                      usersToDisplay.length < users.length ? 
+                        users.slice(displayCount).map((u, i) => (
+                          <div key={i}>{u.tooltip}</div>
+                        ))
+                      : 
+                        ''
+                    }
+                  </div>
+                }
+                zIndex={10}
+            >
+              <div className={itemClasses + (withTooltip ? " user_count_tooltip" : "")}>
+                {`+${users.length - displayCount}`}
+              </div>
+            </Tooltip>
+          }
+        </>
+        :
+        <>
+          {usersToDisplay.map((avatarData, index) => (
+            <Avatar
+                {...avatarData}
+                className="pb_multiple_users_item"
+                dark={dark}
+                imageAlt={avatarData.name}
+                key={index}
+                size={size}
+            />
+          ))}
+
+          {users.length > maxDisplayedUsers &&
+            <div className={itemClasses}>
+              {`+${users.length - 3}`}
+            </div>
+          }
+        </>
       }
+
     </div>
   )
 }