playbook_ui 14.5.0.pre.rc.3 → 14.5.0.pre.rc.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '083ad248c1cd517b5c07e07a78869bd821647a2f2ce56639eb3f1a70f5dfa505'
-  data.tar.gz: 188a7a944b5cbf20cc3caf1440b2507afa6ca34396c2130756fc4920add09192
+  metadata.gz: 8bb4fc0b70639490033875fbbf734462b07c72cdf35a2b9b9ca5f670dd5cd433
+  data.tar.gz: e26233f28c5914392ddc16a87a3107bd39b4943e14d002c409a54a9bc1d4b06f
 SHA512:
-  metadata.gz: 356fc851d3550acb895a6b48f98a8b9e598e7f33bcacd9e12bdbf0702b689adb50595eb24864adfaf8fe4fd0fcdb1a6b7140ce981962ffe694116aa0ff8bf239
-  data.tar.gz: 5561e611de275821882f3a30a934c382c9b188ea1bc09e4960a3ac4f570057e9b761590fbb9a641311c75e8c3dc4ed4b73f28477bbea05d7abb429911f9b9a83
+  metadata.gz: 10e77672d5309d7cbed79807fea62086fa30b40f268209342163a79d6eb1ac66050961070543d5077ba8f87af8d6f30dfe65e797c83761aade59d23f3acef79e
+  data.tar.gz: b442a063e7fd932c3bac853e9033cff26c1d2118e43d2c1ef2badde4aa0ddad302a9ae7d912a4f43b02dc176039c818b5e47e3fc67749d2135f89f9cb6acaf80

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -187,6 +187,8 @@
 
   &_close_icon {
     cursor: pointer;
+    font-size: $font_base;
+    line-height: $lh_normal;
   }
 
   &_overlay {

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -2,7 +2,7 @@
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 
-            <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
+            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
                 <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
             </button>
         <% end %>

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -88,6 +88,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     item: []
   })
 
+  const arrowDownElementId = `arrow_down_${id}`
+  const arrowUpElementId = `arrow_up_${id}`
+
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
       return
@@ -173,7 +176,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target) &&
+        event.target.id !== arrowDownElementId &&
+        event.target.id !== arrowUpElementId
+      ) {
         setIsDropdownClosed(true)
       }
     }
@@ -260,7 +268,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
-    e.stopPropagation()
     if (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
@@ -518,16 +525,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
 
           {isDropdownClosed ? (
-            <div key="chevron-down">
+            <div id={arrowDownElementId}
+                key="chevron-down">
               <Icon
                   icon="chevron-down"
+                  id={arrowDownElementId}
                   size="xs"
               />
             </div>
           ) : (
-            <div key="chevron-up">
+            <div id={arrowUpElementId}
+                key="chevron-up">
               <Icon
                   icon="chevron-up"
+                  id={arrowUpElementId}
                   size="xs"
               />
             </div>