playbook_ui 12.35.0 → 12.36.0.pre.alpha.svgiconmethods1043

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9b982d7d15691df84bc2a32b4f67b5dab67cf90ab7f9fc072ebfd4d81b800684
-  data.tar.gz: 293f1da6a6611a18106a6f0f1a3cccf2edc2520657ff5f17f3e06a2b74de7839
+  metadata.gz: a55076e0e8167e0db8cbbe9509bf5c99f10e376e0ac56a769c1cc5a5185178ba
+  data.tar.gz: 0e9efeea039a9149b34cfbc3d445845de2c937d892ce380a8af16f449f09e096
 SHA512:
-  metadata.gz: 46f096f0c12c8c764ab72c44ff5fd42f0bc8c547c6807a2ae06dae1e073c055abbbfae072144524ddeeba99e2397d7deaa81b9f64cb07b904b2582b636c4da9b
-  data.tar.gz: 992a01e77be2823afea2e8e8ece093d84114fb0e85a3e58bb1dc57a50d8ff4f86fb3ccaae38f16d8554de1334285463b155bb28b28c2bccbbb1969e21af4807e
+  metadata.gz: 2002845578b53dd39bb6f23d5a16de27bdc92618f22b31a8f9f0d4f9134418509b7c80f077112bbccb9b3fa1bf2a1a56376b9cc7d0626423406729e5bce37a5f
+  data.tar.gz: c61aed1e059b92f3fc5753f1ed723425f4bbe4265a1f2cc595f2f0d05ab439ebb17da6cab3251a19830b6a08d996c590a68ce15c889e15029d803c2d64391f11

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

@@ -21,13 +21,17 @@ const dialogHelper = () => {
 
   // Close dialog box on outside click
   dialogs.forEach((dialogElement) => {
-    dialogElement.addEventListener("click", (event) => {
+    dialogElement.addEventListener("mousedown", (event) => {
       const dialogParentDataset = dialogElement.parentElement.dataset
       if (dialogParentDataset.overlayClick === "overlay_close") return
 
-      const clickedOutsideDialogBox = event.target.classList.contains("pb_dialog_rails")
+      const dialogModal = event.target.getBoundingClientRect()
+      const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+                                        event.clientX > dialogModal.right ||
+                                        event.clientY < dialogModal.top ||
+                                        event.clientY > dialogModal.bottom
 
-      if (clickedOutsideDialogBox) {
+      if (clickedOutsideDialogModal) {
         dialogElement.close()
         event.stopPropagation()
       }

data/app/pb_kits/playbook/pb_icon/docs/_icon_animate.html.erb

@@ -1,3 +1,4 @@
 <p><%= pb_rails("icon", props: { icon: "spinner", spin: true, fixed_width: true, size: "2x" }) %> <span>Spin</span></p>
 <br/>
 <p><%= pb_rails("icon", props: { icon: "spinner", pulse: true, fixed_width: true, size: "2x" }) %> <span>Pulse</span></p>
+

data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb

@@ -14,3 +14,5 @@
     parent element's css color properties."
   } ) %>
 </div>
+
+

data/app/pb_kits/playbook/pb_icon/docs/_icon_svg.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "copilot", padding_left: "xl" } ) %>
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "squirrel" } ) %>
+<%= pb_rails("icon", props: { size: "5x", custom_icon: "star" } ) %>
+

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

@@ -1,14 +1,15 @@
 examples:
   rails:
-  - icon_default: Icon Default
-  - icon_rotate: Icon Rotate
-  - icon_flip: Icon Flip
-  - icon_animate: Icon Animation
-  - icon_pull: Icon Pull
-  - icon_border: Icon Border
-  - icon_sizes: Icon Sizes
-  - icon_custom: Icon Custom
-  - icon_fa_kit: Icon with FontAwesome Kit
+  # - icon_default: Icon Default
+  # - icon_rotate: Icon Rotate
+  # - icon_flip: Icon Flip
+  # - icon_animate: Icon Animation
+  # - icon_pull: Icon Pull
+  # - icon_border: Icon Border
+  # - icon_sizes: Icon Sizes
+  # - icon_custom: Icon Custom
+  # - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_svg: Icon SVG
 
   react:
   - icon_default: Icon Default

data/app/pb_kits/playbook/pb_icon/icon.html.erb

@@ -1,15 +1,15 @@
 <% if object.custom_icon %>
-  <%= object.render_svg(object.custom_icon) %>
+  <%= object.embedded_svg(object.custom_icon) %>
 <% elsif object.valid_emoji(object.icon) %>
   <span class="pb_icon_kit_emoji"><%= object.icon.html_safe %></span>
 <% else %>
   <%= content_tag(:i, nil,
       id: object.id,
       data: object.data,
-      class: object.classname
+      class: object.classname,
   ) %>
   <%= content_tag(:span, nil,
       aria: { label: "#{object.icon} icon" }.merge(object.aria),
       hidden: true
   ) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/icon.rb

@@ -90,6 +90,23 @@ module Playbook
         end
       end
 
+      def embedded_svg(icon_name)
+        file = File.read(Rails.root.join("app", "javascript", "images", "#{icon_name}.svg"))
+        doc = Nokogiri::HTML::DocumentFragment.parse file
+        svg = doc.at_css "svg"
+
+        doc.to_html.html_safe
+
+        size_factor = size.to_i
+        if size_factor > 1
+          pixel_size = size_factor * 16
+          svg["width"] = pixel_size.to_s
+          svg["height"] = pixel_size.to_s
+        end
+
+        raw doc
+      end
+
     private
 
       def border_class

data/app/pb_kits/playbook/pb_popover/_popover.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import {
   Popper,
@@ -17,6 +17,7 @@ import {
 
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
+import _uniqueId from 'lodash/uniqueId';
 
 type PbPopoverProps = {
   aria?: { [key: string]: string };
@@ -72,6 +73,7 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
+    targetId,
   } = props;
 
   const popoverSpacing =
@@ -123,6 +125,7 @@ const Popover = (props: PbPopoverProps) => {
                     popoverSpacing,
                     overflowHandling
                   )}
+                  id={targetId}
                   style={widthHeightStyles()}
               >
                 {children}
@@ -136,6 +139,7 @@ const Popover = (props: PbPopoverProps) => {
 };
 
 const PbReactPopover = (props: PbPopoverProps) => {
+  const [targetId] = useState(_uniqueId('id-'))
   const {
     className,
     children,
@@ -163,25 +167,27 @@ const PbReactPopover = (props: PbPopoverProps) => {
       "click",
       ({ target }) => {
         const targetIsPopover =
-          (target as HTMLElement).closest("[class^=pb_popover_tooltip]") !==
+          (target as HTMLElement).closest("#" + targetId) !==
           null;
         const targetIsReference =
-          (target as HTMLElement).closest(".pb_popover_reference_wrapper") !==
+          (target as HTMLElement).closest("#reference-" + targetId) !==
           null;
 
         switch (closeOnClick) {
           case "outside":
-            if (!targetIsPopover || targetIsReference) {
+            if (!targetIsPopover && !targetIsReference) {
               shouldClosePopover(true);
             }
             break;
           case "inside":
-            if (targetIsPopover || targetIsReference) {
+            if (targetIsPopover) {
               shouldClosePopover(true);
             }
             break;
           case "any":
-            shouldClosePopover(true);
+            if (targetIsPopover || !targetIsPopover && !targetIsReference) {
+              shouldClosePopover(true);
+            }
             break;
         }
       },
@@ -200,6 +206,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
         offset={offset}
         placement={placement}
         referenceElement={referenceElement}
+        targetId={targetId}
         zIndex={zIndex}
         {...props}
     >
@@ -214,6 +221,7 @@ const PbReactPopover = (props: PbPopoverProps) => {
           <PopperReference>
             {({ ref }) => (
               <span
+                  id={"reference-" + targetId}
                   className="pb_popover_reference_wrapper"
                   ref={ref}>
                 <reference.type {...reference.props} />

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -24,6 +24,7 @@ const PopoverClose = (props) => {
 
   const handleOutsideTogglePopover = () => {
     setOutsideShowPopover(!showOutsidePopover)
+    setAnyShowPopover(false)
   }
 
   const handleAnyShouldClosePopover = (shouldClosePopover) => {
@@ -32,6 +33,7 @@ const PopoverClose = (props) => {
 
   const handleAnyTogglePopover = () => {
     setAnyShowPopover(!showAnyPopover)
+    setOutsideShowPopover(false)
   }
 
   const insidePopoverTrigger = (

data/app/pb_kits/playbook/pb_popover/index.ts

@@ -49,13 +49,16 @@ export default class PbPopover extends PbEnhancedElement {
   checkCloseTooltip() {
     document.querySelector('body').addEventListener('click', ({ target } ) => {
       const isTooltipElement = (target as HTMLElement).closest(`#${this.tooltipId}`) !== null
+      const isTriggerElement = (target as HTMLElement).closest(`#${this.triggerElementId}`) !== null
 
       switch (this.closeOnClick) {
       case 'any':
-        this.hideTooltip()
+        if (isTooltipElement || !isTooltipElement && !isTriggerElement) {
+          this.hideTooltip()
+        }
         break
       case 'outside':
-        if (!isTooltipElement) {
+        if (!isTooltipElement && !isTriggerElement) {
           this.hideTooltip()
         }
         break