playbook_ui 15.6.0.pre.rc.1 → 15.6.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4c8379c2539757c4db1dcf2ed5c4a7562899728174921420d2e937f35a03f87d
-  data.tar.gz: 8bb8fd5264d9773fb4acecf09edca3c439945444c4e77c17e5a1745723c56fab
+  metadata.gz: b983bad8c671234614b68b2b02908fb8c5ec33ba66bd8592f9302dcc71f739e5
+  data.tar.gz: 8188f53eac0f277f4c35acee49a5e79fbcf7939dff69e0096d250df2083aa45e
 SHA512:
-  metadata.gz: 4b72606b5b4b030ff3da899075efbb2215b864a6f9c8286de288ee86bc0084185aac17a7e12446c92f93899498c685df5876549e40f7be3b8210726479a656d6
-  data.tar.gz: ea1c0cee0bed7a7144fed0c139a754b2b8487b61e771d8b841f6d92723b7c1f2dff97a7e49177506c3cd55d9ef64aa2d8884f22481d002e518d954f0136c501b
+  metadata.gz: 26d1e8728ead33b88b32b1fbf796a3f3aff34b5ce9bc064f4039a59fc9ca0f2d0ab1c11e06b18994581ae1adb1cd00f67e8c2bc7ec659b60925d168f043be206
+  data.tar.gz: 6cddf1b537e290bcc98ef4be264e3d300c9ba9d29e45c2ebf0fc7723b19e194fbd67c2fcd766ebf1b53dd26d930eaefa38cefdbf1219f674c150e9251e9f6196

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_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_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,
+        }}
     />
   )
 }