playbook_ui 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968 → 14.22.0.pre.alpha.PLAY2292advancedtablepinnedrowsloading8630

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

@@ -3,7 +3,7 @@ import { InitialStateType, ActionType, DraggableProviderType } from "./types";
 
 const initialState: InitialStateType = {
   items: [],
-  dragData: { id: "", initialGroup: "", originId: "" },
+  dragData: { id: "", initialGroup: "" },
   isDragging: "",
   activeContainer: ""
 };
@@ -60,8 +60,7 @@ export const DraggableProvider = ({
   onDragEnd,
   onDrop,
   onDragOver,
-  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
-  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
+  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -94,17 +93,15 @@ export const DraggableProvider = ({
   }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
     dispatch({ type: 'SET_IS_DRAGGING', payload: id });
     if (onDragStart) onDragStart(id, container);
   };
 
   const handleDragEnter = (id: string, container: string) => {
-    if (state.dragData.originId !== providerId) return; // Ignore drag events from other providers
-
     if (state.dragData.id !== id) {
       dispatch({ type: 'REORDER_ITEMS', payload: { dragId: state.dragData.id, targetId: id } });
-      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -112,7 +109,6 @@ export const DraggableProvider = ({
   const handleDragEnd = () => {
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: "", initialGroup: "", originId: "" } });
     if (onDragEnd) onDragEnd();
   };
 
@@ -121,8 +117,6 @@ export const DraggableProvider = ({
   };
 
   const handleDrop = (container: string) => {
-    if (state.dragData.originId !== providerId) return; // Ignore drop events from other providers
-
     dispatch({ type: 'SET_IS_DRAGGING', payload: "" });
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: "" });
     changeCategory(state.dragData.id, container);
@@ -130,8 +124,6 @@ export const DraggableProvider = ({
   };
 
   const handleDragOver = (e: Event, container: string) => {
-     if (state.dragData.originId !== providerId) return; // Ignore drag over events from other providers
-
     e.preventDefault();
     dispatch({ type: 'SET_ACTIVE_CONTAINER', payload: container });
     if (onDragOver) onDragOver(e, container);

data/app/pb_kits/playbook/pb_draggable/context/types.ts

@@ -6,16 +6,14 @@ export interface ItemType {
 
 export interface InitialStateType {
   items: ItemType[];
-  dragData: { id: string; initialGroup: string, originId?: string };
+  dragData: { id: string; initialGroup: string };
   isDragging: string;
   activeContainer: string;
 }
 
 export type ActionType =
   | { type: 'SET_ITEMS'; payload: ItemType[] }
-  | { type: 'SET_DRAG_DATA'; payload: {
-    originId: string; id: string; initialGroup: string 
-} }
+  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
@@ -37,5 +35,4 @@ export type ActionType =
     onDrop?: (container: string) => void;
     onDragOver?: (e: Event, container: string) => void;
     dropZone?: DropZoneConfig | string; // Can accept string for backward compatibility
-    providerId?: string;
   }

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -68,7 +68,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
   const {
     aria = {},
     className,
@@ -106,16 +106,15 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     className
   )
 
-  const inputRef = useRef<HTMLInputElement | null>(null)
+  const inputRef = useRef<HTMLInputElement>()
   const itiRef = useRef<any>(null);
   const [inputValue, setInputValue] = useState(value)
   const [error, setError] = useState(props.error)
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
-  const [hasTyped, setHasTyped] = useState(false)
 
   useEffect(() => {
-    if ((error ?? '').length > 0) {
+    if (error?.length > 0) {
       onValidate(false)
     } else {
       onValidate(true)
@@ -132,7 +131,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       clearField() {
         setInputValue("")
         setError("")
-        setHasTyped(false)
       },
       inputNode() {
         return inputRef.current
@@ -203,8 +201,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const validateErrors = () => {
-    if (!hasTyped && !error) return
-
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -218,7 +214,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
-    if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
     let phoneNumberData
     if (formatAsYouType) {
@@ -264,17 +259,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
     itiRef.current = telInputInit;
 
-    if (inputRef.current) {
-      inputRef.current.addEventListener("countrychange", (evt: Event) => {
-        const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
-        setSelectedData(phoneNumberData)
-        onChange(phoneNumberData)
-        validateErrors()
-      })
+    inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
+      setSelectedData(phoneNumberData)
+      onChange(phoneNumberData)
+      validateErrors()
+    })
+
+    inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
+    inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
 
-      inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
-      inputRef.current.addEventListener("close:countrydropdown", () => setDropDownIsOpen(false))
-    }
     if (formatAsYouType) {
       inputRef.current?.addEventListener("input", (evt) => {
         handleOnChange(evt as unknown as React.ChangeEvent<HTMLInputElement>);
@@ -309,16 +303,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
         {...htmlProps}
     >
       <TextInput
-          ref={inputNode => {
-            if (ref) {
-              if (typeof ref === 'function') {
-                ref(inputNode)
-              } else {
-                (ref as React.MutableRefObject<HTMLInputElement | null>).current = inputNode
-              }
+          ref={
+            inputNode => {
+              ref ? ref.current = inputNode : null
+              inputRef.current = inputNode
             }
-            inputRef.current = inputNode
-          }}
+          }
           {...textInputProps}
       />
     </div>

data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx

@@ -20,7 +20,7 @@ const TitleTruncate = (props) => {
           marginBottom="md"
           size={4}
           text={lorem}
-          truncate={1}
+          truncate="1"
           {...props}
       />
 
@@ -32,7 +32,7 @@ const TitleTruncate = (props) => {
           marginBottom="md"
           size={4}
           text={lorem}
-          truncate={2}
+          truncate="2"
           {...props}
       />
 
@@ -43,7 +43,7 @@ const TitleTruncate = (props) => {
       <Title
           size={4}
           text={lorem}
-          truncate={3}
+          truncate="3"
           {...props}
       />
     </Flex>

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

@@ -9,7 +9,6 @@ examples:
   - tooltip_with_icon_circle: Icon Circle Tooltip
   - tooltip_delay_rails: Delay
   - tooltip_show_tooltip: Show Tooltip
-  - tooltip_click_open: Click to Open
 
   react:
   - tooltip_default_react: Default

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

@@ -19,75 +19,60 @@ export default class PbTooltip extends PbEnhancedElement {
     }
     
     this.triggerElements.forEach((trigger) => {
-      const method = this.effectiveTriggerMethod
+      const method = this.triggerMethod
       const interactionEnabled = this.tooltipInteraction
 
       if (method === 'click') {
-        trigger.addEventListener('click', (e) => {
-          if (this.useClickToOpen) {
-            e.preventDefault()
-            if (this.isTooltipVisible()) {
-              this.hideTooltip()
-            } else {
-              this.showTooltip(trigger)
-            }
-          } else {
-            this.showTooltip(trigger)
-          }
+        trigger.addEventListener('click', () => {
+          this.showTooltip(trigger)
         })
       } else {
-        if (!this.useClickToOpen) {
-          trigger.addEventListener('mouseenter', () => {
-            clearSafeZoneListener(this)
-            clearTimeout(this.mouseleaveTimeout)
-            this.currentTrigger = trigger
-            const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
-            this.mouseenterTimeout = setTimeout(() => {
-              this.showTooltip(trigger)
-              if (interactionEnabled) {
-                this.checkCloseTooltip(trigger)
-              }
-            }, delayOpen)
-          })
+        trigger.addEventListener('mouseenter', () => {
+          clearSafeZoneListener(this)
+          clearTimeout(this.mouseleaveTimeout)
+          this.currentTrigger = trigger
+          const delayOpen = this.delayOpen ? parseInt(this.delayOpen) : TOOLTIP_TIMEOUT
+          this.mouseenterTimeout = setTimeout(() => {
+            this.showTooltip(trigger)
+            if (interactionEnabled) {
+              this.checkCloseTooltip(trigger)
+            }
+          }, delayOpen)
+        })
 
-          trigger.addEventListener('mouseleave', () => {
-            clearTimeout(this.mouseenterTimeout)
-            if (this.delayClose) {
-              const delayClose = parseInt(this.delayClose)
-              this.mouseleaveTimeout = setTimeout(() => {
-                if (interactionEnabled) {
-                  this.attachSafeZoneListener()
-                } else {
-                  this.hideTooltip()
-                }
-              }, delayClose)
-            } else {
+        trigger.addEventListener('mouseleave', () => {
+          clearTimeout(this.mouseenterTimeout)
+          if (this.delayClose) {
+            const delayClose = parseInt(this.delayClose)
+            this.mouseleaveTimeout = setTimeout(() => {
               if (interactionEnabled) {
                 this.attachSafeZoneListener()
               } else {
                 this.hideTooltip()
               }
+            }, delayClose)
+          } else {
+            if (interactionEnabled) {
+              this.attachSafeZoneListener()
+            } else {
+              this.hideTooltip()
             }
-          })
+          }
+        })
 
-          if (interactionEnabled) {
-            this.tooltip.addEventListener('mouseenter', () => {
-              clearSafeZoneListener(this)
-            })
+        if (interactionEnabled) {
+          this.tooltip.addEventListener('mouseenter', () => {
+            clearSafeZoneListener(this)
+          })
 
-            this.tooltip.addEventListener('mouseleave', () => {
-              this.attachSafeZoneListener()
-            })
-          }
+          this.tooltip.addEventListener('mouseleave', () => {
+            this.attachSafeZoneListener()
+          })
         }
       }
     })
   }
 
-  isTooltipVisible() {
-    return this.tooltip && this.tooltip.classList.contains('show')
-  }
-
   attachSafeZoneListener() {
     clearSafeZoneListener(this)
     this.safeZoneHandler = (e) => {
@@ -160,7 +145,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.tooltip.classList.add('show')
 
-    if (this.effectiveTriggerMethod === 'click' && !this.useClickToOpen) {
+    if (this.triggerMethod === 'click') {
       clearTimeout(this.autoHideTimeout)
       this.autoHideTimeout = setTimeout(() => {
         this.hideTooltip()
@@ -239,14 +224,6 @@ export default class PbTooltip extends PbEnhancedElement {
     return this.element.dataset.pbTooltipTriggerMethod || 'hover'
   }
 
-  get useClickToOpen() {
-    return this.element.dataset.pbTooltipUseClickToOpen === 'true'
-  }
-
-  get effectiveTriggerMethod() {
-    return this.useClickToOpen ? 'click' : this.triggerMethod
-  }
-
   get tooltipInteraction() {
     return this.element.dataset.pbTooltipInteraction === 'true'
   }

data/app/pb_kits/playbook/pb_tooltip/tooltip.rb

@@ -21,8 +21,6 @@ module Playbook
       prop :trigger_method, type: Playbook::Props::Enum,
                             values: %w[hover click],
                             default: "hover"
-      prop :use_click_to_open, type: Playbook::Props::Boolean,
-                               default: false
       prop :width
 
       def classname
@@ -48,10 +46,6 @@ module Playbook
         out
       end
 
-      def effective_trigger_method
-        use_click_to_open ? "click" : (trigger_method || "hover")
-      end
-
       def data
         data = Hash(values[:data]).merge(
           pb_tooltip_kit: true,
@@ -60,9 +54,8 @@ module Playbook
           pb_tooltip_trigger_element_id: trigger_element_id,
           pb_tooltip_tooltip_id: tooltip_id,
           pb_tooltip_show_tooltip: true,
-          pb_tooltip_trigger_method: effective_trigger_method,
-          pb_tooltip_interaction: interaction,
-          pb_tooltip_use_click_to_open: use_click_to_open
+          pb_tooltip_trigger_method: trigger_method,
+          pb_tooltip_interaction: interaction
         )
         data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
         data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close