playbook_ui 14.22.0.pre.alpha.PLAY2256stickydataidreact8523 → 14.22.0.pre.alpha.PLAY2281atcustomheaderrails8968

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_labels.jsx

@@ -1,47 +1,61 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithLabels = [
   {
     name: 'Facebook',
-    value: 2498,
+    y: 2498,
   },
   {
     name: 'YouTube',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'WhatsApp',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'Facebook Messenger',
-    value: 1300,
+    y: 1300,
   },
   {
     name: 'WeChat',
-    value: 1165,
+    y: 1165,
   },
   {
     name: 'Instagram',
-    value: 1000,
+    y: 1000,
   },
   {
     name: 'Tik Tok',
-    value: 800,
+    y: 800,
   },
 ]
 
-const CircleChartWithLabels = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithLabels}
-        dataLabels
-        id="with-labels-example"
-        {...props}
-    />
-  </div>
-)
+const CircleChartWithLabels = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLabels }],
+    plotOptions: {
+      pie: {
+        dataLabels: {
+          enabled: true,
+        }
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLabels
+export default CircleChartWithLabels

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_legend_kit.jsx

@@ -1,32 +1,41 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithLegend = [{
   name: 'Bugs',
-  value: 8,
-
+  y: 8,
 },
 {
   name: 'Chores',
-  value: 1,
-
+  y: 1,
 },
 {
   name: 'Stories',
-  value: 12,
-},
-]
+  y: 12,
+}]
+
+const CircleChartWithLegendKit = () => {
+  const chartOptions = {
+    series: [{ data: dataWithLegend }],
+    plotOptions: {
+      pie: {
+        showInLegend: true
+      }
+    }
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
 
-const CircleChartWithLegendKit = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithLegend}
-        id="with-legend-example"
-        legend
-        {...props}
-    />
-  </div>
-)
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLegendKit
+export default CircleChartWithLegendKit

data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_with_title.jsx

@@ -1,47 +1,55 @@
 import React from 'react'
-
-import CircleChart from '../_circle_chart'
+import circleChartTheme from '../circleChartTheme'
+import Highcharts from "highcharts"
+import HighchartsReact from "highcharts-react-official"
 
 const dataWithTitle = [
   {
     name: 'Facebook',
-    value: 2498,
+    y: 2498,
   },
   {
     name: 'YouTube',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'WhatsApp',
-    value: 2000,
+    y: 2000,
   },
   {
     name: 'Facebook Messenger',
-    value: 1300,
+    y: 1300,
   },
   {
     name: 'WeChat',
-    value: 1165,
+    y: 1165,
   },
   {
     name: 'Instagram',
-    value: 1000,
+    y: 1000,
   },
   {
     name: 'Tik Tok',
-    value: 800,
+    y: 800,
   },
 ]
 
-const CircleChartWithLegendKit = (props) => (
-  <div>
-    <CircleChart
-        chartData={dataWithTitle}
-        id="with-title-example"
-        title="Active Users on Social Media"
-        {...props}
-    />
-  </div>
-)
+const CircleChartWithTitle = () => {
+  const chartOptions = {
+    title: { text: "Active Users on Social Media" },
+    series: [{ data: dataWithTitle }],
+  }
+
+  const options = Highcharts.merge({}, circleChartTheme, chartOptions)
+
+  return (
+    <div>
+      <HighchartsReact
+          highcharts={Highcharts}
+          options={options}
+      />
+    </div>
+  )
+}
 
-export default CircleChartWithLegendKit
+export default CircleChartWithTitle

data/app/pb_kits/playbook/pb_circle_chart/docs/_description.md

@@ -0,0 +1 @@
+**Important Note for the React Kit**: In order to leverage this kit, you must install `highcharts` and `highcharts-react-official` into your project as shown below. To then apply Playbook styles to your Highchart, import circleChartTheme.ts from playbook-ui and merge it with your Highchart options. Then, pass the merged value to the options prop. Playbook’s styling will be applied automatically. See the examples in the documentation below.

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

@@ -14,7 +14,6 @@ examples:
 
   react:
   - circle_chart_default: Default Style
-  - circle_chart_pb_styles: Playbook Styles
   - circle_chart_live_data: Live Data
   - circle_chart_rounded: Rounded Corners
   - circle_chart_block: Accepts Any Block

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

@@ -9,4 +9,3 @@ export { default as CircleChartLegendPosition } from './_circle_chart_legend_pos
 export { default as CircleChartWithTitle } from './_circle_chart_with_title.jsx'
 export { default as CircleChartInnerSizes } from './_circle_chart_inner_sizes.jsx'
 export { default as CircleChartCustomTooltip } from "./_circle_chart_custom_tooltip.jsx"
-export { default as CircleChartPbStyles } from "./_circle_chart_pb_styles.jsx"

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: "" },
+  dragData: { id: "", initialGroup: "", originId: "" },
   isDragging: "",
   activeContainer: ""
 };
@@ -60,7 +60,8 @@ export const DraggableProvider = ({
   onDragEnd,
   onDrop,
   onDragOver,
-  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' }
+  dropZone = { type: 'ghost', color: 'neutral', direction: 'vertical' },
+  providerId = 'default', // fallback provided for backward compatibility, so this does not become a required prop
 }: DraggableProviderType) => {
   const [state, dispatch] = useReducer(reducer, initialState);
 
@@ -93,15 +94,17 @@ export const DraggableProvider = ({
   }, [state.items]);
 
   const handleDragStart = (id: string, container: string) => {
-    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container } });
+    dispatch({ type: 'SET_DRAG_DATA', payload: { id: id, initialGroup: container, originId: providerId } });
     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 } });
+      dispatch({ type: 'SET_DRAG_DATA', payload: { id: state.dragData.id, initialGroup: container, originId: providerId } });
     }
     if (onDragEnter) onDragEnter(id, container);
   };
@@ -109,6 +112,7 @@ 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();
   };
 
@@ -117,6 +121,8 @@ 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);
@@ -124,6 +130,8 @@ 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,14 +6,16 @@ export interface ItemType {
 
 export interface InitialStateType {
   items: ItemType[];
-  dragData: { id: string; initialGroup: string };
+  dragData: { id: string; initialGroup: string, originId?: string };
   isDragging: string;
   activeContainer: string;
 }
 
 export type ActionType =
   | { type: 'SET_ITEMS'; payload: ItemType[] }
-  | { type: 'SET_DRAG_DATA'; payload: { id: string; initialGroup: string } }
+  | { type: 'SET_DRAG_DATA'; payload: {
+    originId: string; id: string; initialGroup: string 
+} }
   | { type: 'SET_IS_DRAGGING'; payload: string }
   | { type: 'SET_ACTIVE_CONTAINER'; payload: string }
   | { type: 'CHANGE_CATEGORY'; payload: { itemId: string; container: string } }
@@ -35,4 +37,5 @@ 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.MutableRefObject<unknown>) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>) => {
   const {
     aria = {},
     className,
@@ -106,15 +106,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     className
   )
 
-  const inputRef = useRef<HTMLInputElement>()
+  const inputRef = useRef<HTMLInputElement | null>(null)
   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)
@@ -131,6 +132,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       clearField() {
         setInputValue("")
         setError("")
+        setHasTyped(false)
       },
       inputNode() {
         return inputRef.current
@@ -201,6 +203,8 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const validateErrors = () => {
+    if (!hasTyped && !error) return
+
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -214,6 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
   }
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
     let phoneNumberData
     if (formatAsYouType) {
@@ -259,16 +264,17 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
 
     itiRef.current = telInputInit;
 
-    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))
+    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("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>);
@@ -303,12 +309,16 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
         {...htmlProps}
     >
       <TextInput
-          ref={
-            inputNode => {
-              ref ? ref.current = inputNode : null
-              inputRef.current = inputNode
+          ref={inputNode => {
+            if (ref) {
+              if (typeof ref === 'function') {
+                ref(inputNode)
+              } else {
+                (ref as React.MutableRefObject<HTMLInputElement | null>).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_title/docs/_title_truncate_react.md

@@ -0,0 +1,4 @@
+##### Prop
+`truncate` | **Type**: Enum | **Values**: 1 | 2 | 3 | 4 | 5
+
+The `truncate` prop truncates overflowing text up to a maximum of five rows and adds an ellipsis at the end.

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("button", props: { 
+  text: "Click to Open",
+  id: "click-tooltip-trigger-1",
+  variant: "primary"
+}) %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_selector: "#click-tooltip-trigger-1",
+  tooltip_id: "click-tooltip-1",
+  position: "top",
+  use_click_to_open: true
+}) do %>
+  Tooltip opened by click! Click trigger again to close.
+<% end %>

data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_click_open_rails.md

@@ -0,0 +1 @@
+Set the prop `use_click_to_open` as `true` so that the tooltip will only appear when an item is clicked rather than hovered over.

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

@@ -9,6 +9,7 @@ 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,60 +19,75 @@ export default class PbTooltip extends PbEnhancedElement {
     }
     
     this.triggerElements.forEach((trigger) => {
-      const method = this.triggerMethod
+      const method = this.effectiveTriggerMethod
       const interactionEnabled = this.tooltipInteraction
 
       if (method === 'click') {
-        trigger.addEventListener('click', () => {
-          this.showTooltip(trigger)
-        })
-      } else {
-        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)
+        trigger.addEventListener('click', (e) => {
+          if (this.useClickToOpen) {
+            e.preventDefault()
+            if (this.isTooltipVisible()) {
+              this.hideTooltip()
+            } else {
+              this.showTooltip(trigger)
             }
-          }, delayOpen)
+          } else {
+            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('mouseleave', () => {
-          clearTimeout(this.mouseenterTimeout)
-          if (this.delayClose) {
-            const delayClose = parseInt(this.delayClose)
-            this.mouseleaveTimeout = setTimeout(() => {
+          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()
               }
-            }, delayClose)
-          } else {
-            if (interactionEnabled) {
-              this.attachSafeZoneListener()
-            } else {
-              this.hideTooltip()
             }
-          }
-        })
-
-        if (interactionEnabled) {
-          this.tooltip.addEventListener('mouseenter', () => {
-            clearSafeZoneListener(this)
           })
 
-          this.tooltip.addEventListener('mouseleave', () => {
-            this.attachSafeZoneListener()
-          })
+          if (interactionEnabled) {
+            this.tooltip.addEventListener('mouseenter', () => {
+              clearSafeZoneListener(this)
+            })
+
+            this.tooltip.addEventListener('mouseleave', () => {
+              this.attachSafeZoneListener()
+            })
+          }
         }
       }
     })
   }
 
+  isTooltipVisible() {
+    return this.tooltip && this.tooltip.classList.contains('show')
+  }
+
   attachSafeZoneListener() {
     clearSafeZoneListener(this)
     this.safeZoneHandler = (e) => {
@@ -145,7 +160,7 @@ export default class PbTooltip extends PbEnhancedElement {
 
     this.tooltip.classList.add('show')
 
-    if (this.triggerMethod === 'click') {
+    if (this.effectiveTriggerMethod === 'click' && !this.useClickToOpen) {
       clearTimeout(this.autoHideTimeout)
       this.autoHideTimeout = setTimeout(() => {
         this.hideTooltip()
@@ -224,6 +239,14 @@ 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,6 +21,8 @@ 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
@@ -46,6 +48,10 @@ 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,
@@ -54,8 +60,9 @@ 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: trigger_method,
-          pb_tooltip_interaction: interaction
+          pb_tooltip_trigger_method: effective_trigger_method,
+          pb_tooltip_interaction: interaction,
+          pb_tooltip_use_click_to_open: use_click_to_open
         )
         data = data.merge(pb_tooltip_delay_open: delay_open) if delay_open
         data = data.merge(pb_tooltip_delay_close: delay_close) if delay_close

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_preserve_input.html.erb

@@ -0,0 +1,18 @@
+<%
+  options = [
+    { label: 'Orange', value: '#FFA500' },
+    { label: 'Red', value: '#FF0000' },
+    { label: 'Green', value: '#00FF00' },
+    { label: 'Blue', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-preserve-search-input",
+    is_multi: false,
+    label: "Colors",
+    options: options,
+    placeholder: "Select...",
+    preserve_search_input: true,
+  })
+%>