playbook_ui 14.14.0.pre.rc.5 → 14.15.0.pre.alpha.PBNTR900phonenumberinputhidden6593

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

@@ -5,6 +5,7 @@ examples:
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
   - advanced_table_table_props: Table Props
+  - advanced_table_table_props_sticky_header: Table Props Sticky Header
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_responsive: Responsive Tables
   - advanced_table_custom_cell_rails: Custom Components for Cells
@@ -30,6 +31,7 @@ examples:
   - advanced_table_pagination_with_props: Pagination Props
   - advanced_table_column_headers: Multi-Header Columns
   - advanced_table_column_headers_multiple: Multi-Header Columns (Multiple Levels)
+  - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   # - advanced_table_no_subrows: Table with No Subrows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)

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

@@ -19,4 +19,5 @@ export { default as AdvancedTableSelectableRowsNoSubrows } from './_advanced_tab
 export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.jsx'
 export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_selectable_rows_header.jsx'
 export { default as AdvancedTableSelectableRowsActions } from './_advanced_table_selectable_rows_actions.jsx'
-export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
+export { default as AdvancedTableTablePropsStickyHeader } from './_advanced_table_table_props_sticky_header.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -1,7 +1,8 @@
 /* eslint-disable react/no-multi-comp */
 
 import React from 'react'
-import { get } from 'lodash'
+import { get } from '../utilities/object'
+
 import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, forwardRef } from 'react'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
@@ -24,7 +24,7 @@ type CheckboxProps = {
   value?: string,
 } & GlobalProps
 
-const Checkbox = (props: CheckboxProps): React.ReactElement => {
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
   const {
     aria = {},
     checked = false,
@@ -44,7 +44,15 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
     value = '',
   } = props
 
-  const checkRef = useRef(null)
+  const internalRef = useRef<HTMLInputElement>(null)
+  const setRefs = (el: HTMLInputElement) => {
+    internalRef.current = el
+    if (typeof ref === 'function') {
+      ref(el)
+    } else if (ref) {
+      (ref as React.MutableRefObject<HTMLInputElement | null>).current = el
+    }
+  }
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -56,9 +64,9 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
   )
 
   useEffect(() => {
-    if (checkRef.current) {
-      checkRef.current.checked = checked
-      checkRef.current.indeterminate = indeterminate
+    if (internalRef.current) {
+      internalRef.current.checked = checked
+      internalRef.current.indeterminate = indeterminate
     }
   }, [indeterminate, checked])
 
@@ -72,7 +80,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
         disabled={disabled}
         name={name}
         onChange={onChange}
-        ref={checkRef}
+        ref={setRefs}
         tabIndex={tabIndex}
         type="checkbox"
         value={value}
@@ -119,6 +127,7 @@ const Checkbox = (props: CheckboxProps): React.ReactElement => {
       </Body>
     </label>
   )
-}
+})
 
+Checkbox.displayName = "Checkbox"
 export default Checkbox

data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js

@@ -106,3 +106,19 @@ test('has disabled attribute', () => {
   const input = kit.querySelector('input')
   expect(input).toHaveAttribute('disabled')
 }) 
+
+test('has ref in the input element', () => {
+  const ref = React.createRef()
+    render(
+      <Checkbox
+          data={{ testid: testId }}
+          name="checkbox-name"
+          ref={ref}
+          text="Checkbox"
+          value="check-box value"
+      />
+  )
+
+  expect(ref.current).not.toBeNull()
+  expect(ref.current?.tagName).toBe('INPUT')
+})

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react"
+import { useForm } from "react-hook-form"
+import { Button, Checkbox, Flex, Body } from "playbook-ui"
+
+const CheckboxReactHook = () => {
+  const { register, handleSubmit } = useForm({
+    defaultValues: {
+      Small: false,
+      Medium: false,
+      Large: false,
+    },
+  })
+
+  const [submittedData, setSubmittedData] = useState({
+    Small: false,
+    Medium: false,
+    Large: false,
+  })
+
+  const onSubmit = (data) => {
+    setSubmittedData(data)
+  }
+
+  return (
+    <Flex orientation="row">
+      <Flex align="start"
+          orientation="column"
+          paddingRight="lg"
+      >
+        <form onSubmit={handleSubmit(onSubmit)}>
+          <Checkbox padding="xs"
+              text="Small"
+              {...register("Small")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Medium"
+              {...register("Medium")}
+          />
+          <br />
+          <Checkbox padding="xs"
+              text="Large"
+              {...register("Large")}
+          />
+          <br />
+          <Button htmlType="submit"
+              marginTop="sm"
+              text="submit"
+          />
+        </form>
+      </Flex>
+      <Flex align="start"
+          orientation="column"
+      >
+        <Body padding="xs"
+            text={`Small: ${submittedData.Small ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Medium: ${submittedData.Medium ? "true" : "false"}`}
+        />
+        <Body padding="xs"
+            text={`Large: ${submittedData.Large ? "true" : "false"}`}
+        />
+      </Flex>
+    </Flex>
+  )
+}
+
+export default CheckboxReactHook

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_react_hook.md

@@ -0,0 +1 @@
+You can pass react hook props to the checkbox kit.

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

@@ -11,6 +11,7 @@ examples:
   react:
   - checkbox_default: Default
   - checkbox_checked: Load as checked
+  - checkbox_react_hook: React Hook Form
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
@@ -21,4 +22,4 @@ examples:
     - checkbox_error_swift: Default w/ Error
     - checkbox_indeterminate_swift: Indeterminate Checkbox
     - checkbox_props_swift: ""
-    
+    

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

@@ -1,5 +1,6 @@
 export { default as CheckboxDefault } from './_checkbox_default.jsx'
 export { default as CheckboxCustom } from './_checkbox_custom.jsx'
+export { default as CheckboxReactHook } from './_checkbox_react_hook.jsx'
 export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -21,6 +21,7 @@ type CurrencyProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,
+  nullDisplay?: string,
   size?: 'sm' | 'md' | 'lg',
   symbol?: string,
   variant?: 'default' | 'light' | 'bold',
@@ -49,6 +50,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
     unit,
     className,
     label = '',
+    nullDisplay = '',
     size = 'sm',
     symbol = '$',
     variant = 'default',
@@ -118,44 +120,57 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         id={id}
     >
       <Caption dark={dark}>{label}</Caption>
-
       <div className={`pb_currency_wrapper${variantClass || emphasizedClass}`}>
         {unstyled ? (
-          <>
-            <div>{handleNegative}{symbol}</div>
-            <div>{getAmount}</div>
-            <div>
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </div>
-          </>
+          nullDisplay && !amount ? (
+            <div>{nullDisplay}</div>
+          ) : (
+            <>
+              <div>{handleNegative}{symbol}</div>
+              <div>{getAmount}</div>
+              <div>
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </div>
+            </>
+          )
         ) : (
-          <>
-            <Body
-                className="dollar_sign"
-                color="light"
-                dark={dark}
-            >
-              {handleNegative}{symbol}
-            </Body>
-
+          nullDisplay && !amount ? (
             <Title
                 className="pb_currency_value"
                 dark={dark}
                 size={sizes[size]}
-            >
-              {getAmount}
-            </Title>
-
-            <Body
-                className="unit"
-                color="light"
-                dark={dark}
-            >
-              {getAbbreviation}
-              {unit ? unit : getDecimalValue}
-            </Body>
-          </>
+          >
+            {nullDisplay}
+          </Title>
+          ) : (
+            <>
+              <Body
+                  className="dollar_sign"
+                  color="light"
+                  dark={dark}
+              >
+                {handleNegative}{symbol}
+              </Body>
+      
+              <Title
+                  className="pb_currency_value"
+                  dark={dark}
+                  size={sizes[size]}
+              >
+                {getAmount}
+              </Title>
+      
+              <Body
+                  className="unit"
+                  color="light"
+                  dark={dark}
+              >
+                {getAbbreviation}
+                {unit ? unit : getDecimalValue}
+              </Body>
+            </>
+          )
         )}
       </div>
     </div>

data/app/pb_kits/playbook/pb_currency/currency.html.erb

@@ -1,17 +1,24 @@
 <%= pb_content_tag do %>
   <%= pb_rails("caption", props: object.caption_props) %>
-
   <div class=<%= "pb_currency_wrapper#{object.variant_class || object.emphasized_class}" %>>
     <% if object.unstyled %>
-      <div><%= object.negative_sign %><%= object.symbol %></div>
-      <div><%= object.title_props[:text] %></div>
-      <div><%= object.body_props[:text] %></div>
+      <% if object.null_display && object.amount.blank? %>
+        <div><%= object.null_display %></div>
+      <% else %>
+        <div><%= object.negative_sign %><%= object.symbol %></div>
+        <div><%= object.title_props[:text] %></div>
+        <div><%= object.body_props[:text] %></div>
+      <% end %>
     <% else %>
-      <%= pb_rails("body", props: object.currency_wrapper_props) do %>
-        <%= object.negative_sign %><%= object.symbol %>
+     <% if object.null_display && object.amount.blank? %>
+        <%= pb_rails("title", props: object.title_props) %>
+      <% else %>
+        <%= pb_rails("body", props: object.currency_wrapper_props) do %>
+          <%= object.negative_sign %><%= object.symbol %>
+        <% end %>
+          <%= pb_rails("title", props: object.title_props) %>
+          <%= pb_rails("body", props: object.body_props) %>
       <% end %>
-      <%= pb_rails("title", props: object.title_props) %>
-      <%= pb_rails("body", props: object.body_props) %>
     <% end %>
   </div>
 <% end %>

data/app/pb_kits/playbook/pb_currency/currency.rb

@@ -46,6 +46,9 @@ module Playbook
       prop :comma_separator, type: Playbook::Props::Boolean,
                              default: false
 
+      prop :null_display, type: Playbook::Props::String,
+                          required: false
+
       def classname
         generate_classname("pb_currency_kit", align, size, dark_class)
       end
@@ -65,10 +68,20 @@ module Playbook
         }
       end
 
+      def title_text
+        if null_display
+          null_display
+        elsif swap_negative
+          absolute_amount(abbr_or_format_amount)
+        else
+          abbr_or_format_amount
+        end
+      end
+
       def title_props
         {
           size: size_value,
-          text: swap_negative ? absolute_amount(abbr_or_format_amount) : abbr_or_format_amount,
+          text: title_text,
           classname: "pb_currency_value",
           dark: dark,
         }
@@ -145,8 +158,10 @@ module Playbook
           1
         when "md"
           3
-        else
+        when "sm"
           4
+        else
+          3
         end
       end
 

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.html.erb

@@ -0,0 +1,22 @@
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "--",
+    size: "sm"
+}) %>
+
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    margin_bottom: "md",
+    null_display: "$0.00",
+    size: "sm"
+}) %>
+
+<%= pb_rails("currency", props: {
+    amount: "",
+    label: "Nil",
+    null_display: " ",
+    size: "sm"
+}) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import { Currency } from 'playbook-ui'
+
+const CurrencyNullDisplay = (props) => {
+  return (
+    <>
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="--"
+          {...props}
+      />
+
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay="$0.00"
+          {...props}
+      />
+    
+      <Currency
+          amount=""
+          label="Null"
+          marginBottom="md"
+          nullDisplay=" "
+          {...props}
+      />
+    </>
+  )
+}
+
+export default CurrencyNullDisplay

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_rails.md

@@ -0,0 +1 @@
+To customize how the `amount` field appears when it is empty, use the `null_display` prop and set it to the desired value you want to display.

data/app/pb_kits/playbook/pb_currency/docs/_currency_null_display_react.md

@@ -0,0 +1 @@
+To customize how the `amount` field appears when it is empty, use the `nullDisplay` prop and set it to the desired value you want to display.

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

@@ -10,6 +10,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
   
   react:
   - currency_variants: Variants
@@ -21,6 +22,7 @@ examples:
   - currency_unstyled: Unstyled
   - currency_comma_separator: Comma Separator
   - currency_negative: Negative
+  - currency_null_display: Null Display
 
   swift:
   - currency_size_swift: Size

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

@@ -6,4 +6,5 @@ export { default as CurrencyAbbreviated } from './_currency_abbreviated.jsx'
 export { default as CurrencyMatchingDecimals } from './_currency_matching_decimals.jsx'
 export { default as CurrencyUnstyled } from './_currency_unstyled.jsx'
 export { default as CurrencyCommaSeparator } from './_currency_comma_separator.jsx'
-export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNegative } from './_currency_negative.jsx'
+export { default as CurrencyNullDisplay } from './_currency_null_display.jsx'

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,5 +1,8 @@
 <%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+    class: object.classname + object.error_class,
+    'data-pb-date-picker' => true,
+    'data-validation-message' => object.validation_message,
+      ) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -75,6 +75,8 @@ module Playbook
                         default: [1900, 2100]
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
+      prop :validation_message, type: Playbook::Props::String,
+                                default: ""
 
       def classname
         default_margin_bottom = margin_bottom.present? ? "" : " mb_sm"

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

@@ -0,0 +1,38 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const DATE_PICKER_WRAPPER_SELECTOR = '[data-pb-date-picker]';
+const SELECT_VALIDATION_MESSAGE_CLASS = '.pb_body_kit_negative';
+
+export default class PbDatePicker extends PbEnhancedElement {
+  static get selector() {
+    return DATE_PICKER_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    this.setValidationMessage();
+  }
+
+  setValidationMessage() {
+    const validationMessage = this.element.dataset?.validationMessage;
+    const inputElement = this.element.querySelector("input");
+
+    if (validationMessage) {
+      const setErrorTextContent = (text, timeout) => {
+        setTimeout(() => {
+          const errorMessageElement = this.element.querySelector(SELECT_VALIDATION_MESSAGE_CLASS);
+          if (errorMessageElement) {
+            errorMessageElement.textContent = text;
+          } else {
+            setErrorTextContent(text, 100);
+          }
+        }, timeout);
+      };
+
+      inputElement.addEventListener("change", (e) => {
+        if (!e.target.checkValidity()) {
+          setErrorTextContent(validationMessage, 300);
+        }
+      });
+    }
+  }
+}

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

@@ -1,4 +1,8 @@
-<div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
+<div
+    class="pb_dialog_wrapper_rails <%= object.full_height_style %>"
+    data-pb-dialog-wrapper="true"
+    data-overlay-click= <%= object.overlay_close %>
+>
     <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
@@ -33,8 +37,3 @@
             <%= content %>
     <% end %>
 </div>
-
-<%= javascript_tag do %>
-    window.addEventListener("DOMContentLoaded", () => dialogHelper())
-    window.addEventListener("turbo:frame-load", () => dialogHelper())
-<% end %>

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

@@ -1,3 +1,5 @@
+// Three places in Nitro depend on this function inside the window scope.
+// We will keep this file until we remove this dependency from Nitro.
 const dialogHelper = () => {
   const openTrigger = document.querySelectorAll("[data-open-dialog]");
   const closeTrigger = document.querySelectorAll("[data-close-dialog]");

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

@@ -0,0 +1,75 @@
+import PbEnhancedElement from "../pb_enhanced_element";
+
+const DIALOG_WRAPPER_SELECTOR = "[data-pb-dialog-wrapper]";
+
+export default class PbDialog extends PbEnhancedElement {
+  static get selector() {
+    return DIALOG_WRAPPER_SELECTOR;
+  }
+
+  connect() {
+    window.addEventListener("DOMContentLoaded", () => this.setupDialog())
+    window.addEventListener("turbo:frame-load", () => this.setupDialog())
+  }
+
+  setupDialog() {
+    const openTrigger = document.querySelectorAll("[data-open-dialog]");
+    const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+    const dialogs = document.querySelectorAll(".pb_dialog_rails")
+
+    const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+    if (loadingButton) {
+      loadingButton.addEventListener("click", function () {
+        const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+        const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+        let currentClass = okayLoadingButton.className;
+        let cancelClass = cancelButton ? cancelButton.className : "";
+
+        let newClass = currentClass.replace("_enabled", "_disabled_loading");
+        let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+        // Disable the buttons
+        okayLoadingButton.disabled = true;
+        if (cancelButton) cancelButton.disabled = true;
+
+        okayLoadingButton.className = newClass;
+        if (cancelButton) cancelButton.className = newCancelClass;
+      });
+    }
+
+    openTrigger.forEach((open) => {
+      open.addEventListener("click", () => {
+        var openTriggerData = open.dataset.openDialog;
+        var targetDialog = document.getElementById(openTriggerData)
+        if (targetDialog.open) return;
+        targetDialog.showModal();
+      });
+    });
+
+    closeTrigger.forEach((close) => {
+      close.addEventListener("click", () => {
+        var closeTriggerData = close.dataset.closeDialog;
+        document.getElementById(closeTriggerData).close();
+      });
+    });
+
+    // Close dialog box on outside click
+    dialogs.forEach((dialogElement) => {
+      dialogElement.addEventListener("mousedown", (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) {
+          dialogElement.close()
+          event.stopPropagation()
+        }
+      })
+    })
+  }
+}