playbook_ui 15.5.0.pre.alpha.draggablefix12589 → 15.5.0.pre.alpha.play2663multiuserkitaddtooltipsupport12718

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9048fda164619db498afb925949d4d2d56e2c273fcb753e7d43a504fe4c9e5a5
-  data.tar.gz: ff6ed156a4e852bcae45701f34feba01cdfa6f4e7a58b86181d76271781a5dd3
+  metadata.gz: 4ed59e7452b01bd5e377683d7ca28494a0e6a20a5d9614e70164ee5c36a9ad7f
+  data.tar.gz: ca7cd2df26da0a2639b053f1f44a5f2dfb5162575b96deef2f9c767d601dc874
 SHA512:
-  metadata.gz: 1bda0b34988a106ead207cc8fd705876f3550ebd6bc42c261da82f2be82a0f85fbe2398b9a345ce308840f052846be435f46a975a50e27fe7a4a939f3d27dacb
-  data.tar.gz: db28214d63307ebeae96aefbb6db9ad6376cd84ba3606d09deac5507a0c41c39146b3ca0fe23976551e95376d96d6de979e5428585dbde764594db0279827855
+  metadata.gz: 7308176225b39e0185e1128d0a444a2a71e4cb495acb2bebb7819bcbe59c2941885ca0ea45bb4bc353af45f2bf822b900b3de324f7c0bb34900d5a7b21c9c284
+  data.tar.gz: ac3c61e7da0a69be6db96c22bae3a8894f74d2cc12515d496dc2ca473ff1dcae5bf1ed254b444f95d14a923f04b48541af5d75ced0e6ddf584a0a6f59e3dcb05

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,3 +1,24 @@
+<% 
+  options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "United Kingdom",
+      value: "unitedKingdom",
+      id: "gb"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ]
+%>
+
+
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -10,6 +31,16 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
+        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
+        <%= pb_rails("typeahead", props: {
+        id: "typeahead-default",
+        placeholder: "Select one...",
+        options: options,
+        name: :foo,
+        margin_top: "sm",
+        is_multi: false
+      })
+%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

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

@@ -143,25 +143,30 @@ export default class PbDialog extends PbEnhancedElement {
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      const originalMousedownHandler = dialogElement._outsideClickHandler
-      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
+      const originalClickHandler = dialogElement._outsideClickHandler
+      if (originalClickHandler) dialogElement.removeEventListener("click", originalClickHandler)
+      
       dialogElement._outsideClickHandler = (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
-        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) {
+        // 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) {
           dialogElement.close()
           event.stopPropagation()
         }
       }
 
-      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
+      dialogElement.addEventListener("click", dialogElement._outsideClickHandler);
     })
   }
 }

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_multiple_containers_dropzone.md

@@ -1,6 +1,8 @@
 The multiple container functionality also supports customized dropzone styling as shown here. 
 
-In addition to this, the `onDrop` and `onDragEnd` event listeners provide several arguments to allow developers more context from the drag event.
+In addition to this, the `enableCrossContainerPreview` prop can be used on the `DraggableProvider` as shown here to enable dropzone preview for cross-container dragging. 
+
+With `enableCrossContainerPreview`, the `onDrop` and `onDragEnd` event listeners will also provide several arguments to allow developers more context from the drag event.
 
 The `onDrop` callback is triggered when an item is successfully dropped into a container. It provides the following arguments:
 

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

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

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>
   )
 }

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+import MultipleUsers from '../../pb_multiple_users/_multiple_users'
+
+const MultipleUsersWithTooltip = (props) => {
+    return (
+        <div>
+            <MultipleUsers
+                users={[
+                    {
+                        name: 'Patrick Welch',
+                        imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+                        tooltip: "Patrick Welch - Online"
+                    },
+                    {
+                        name: 'Lucille Sanchez',
+                        imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+                        tooltip: "Lucille Sanchez - Offline"
+                    },
+                    {
+                        name: 'Beverly Reyes',
+                        imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+                        tooltip: "Beverly Reyes - Online"
+                    },
+                    {
+                        name: 'Keith Craig',
+                        imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+                        tooltip: "Keith Craig - Away"
+                    },
+                    {
+                        name: 'Alicia Cooper',
+                        imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+                        tooltip: "Alicia Cooper - Busy"
+                    },
+                ]}
+                withTooltip
+                {...props}
+            />
+        </div>
+    )
+}
+``
+export default MultipleUsersWithTooltip

data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_with_tooltip.md

@@ -0,0 +1 @@
+Use the `withTooltip` boolean prop to enable setting user-specific tooltip content via the `tooltip` property in the users array.

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

@@ -10,6 +10,7 @@ examples:
   - multiple_users_default: Default
   - multiple_users_reverse: Reverse
   - multiple_users_size: Size
+  - multiple_users_with_tooltip: With Tooltip
 
   swift:
   - multiple_users_default_swift: Default

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

@@ -1,3 +1,4 @@
 export { default as MultipleUsersDefault } from './_multiple_users_default.jsx'
 export { default as MultipleUsersReverse } from './_multiple_users_reverse.jsx'
 export { default as MultipleUsersSize } from './_multiple_users_size.jsx'
+export { default as MultipleUsersWithTooltip } from './_multiple_users_with_tooltip.jsx'

data/app/pb_kits/playbook/pb_multiple_users/multiple_users.test.js

@@ -49,4 +49,29 @@ test('should render aria-label', () => {
 
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveAttribute('aria-label', testId)
+})
+
+test('should render withTooltip prop', () => {
+  render(
+      <MultipleUsers
+          data={{ testid: testId }}
+          users={[
+            {
+              name: 'Patrick Welch',
+              imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+              tooltip: "Patrick Welch - Online"
+            },
+            {
+              name: 'Lucille Sanchez',
+              imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+              tooltip: "Lucille Sanchez - Offline"
+            },
+          ]}
+          withTooltip
+      />
+  )
+
+  const kit = screen.getByTestId(testId)
+  const childWithTooltip = kit.querySelector('.pb_tooltip_kit')
+  expect(childWithTooltip).not.toBeNull()
 })

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -7,18 +7,29 @@ type ClearContainerProps = {
     id: string,
   },
   clearValue: () => void,
+  innerProps?: any,
 }
 
-const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
-  const { selectProps, clearValue } = props
+const ClearContainer = (props: ClearContainerProps | any): React.ReactElement => {
+  const { selectProps, clearValue, innerProps } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
   }, [clearValue, selectProps.id])
 
+  // To stop this from bubbling up when inside a dialog or other modal
+  const handleMouseDown = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    innerProps?.onMouseDown?.(event)
+  }
+
   return (
     <components.ClearIndicator
         className="clear_indicator"
         {...props}
+        innerProps={{
+          ...innerProps,
+          onMouseDown: handleMouseDown,
+        }}
     />
   )
 }