playbook_ui 12.27.0 → 12.28.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c8a90666ee111265053efa8a6306dcf5312bd5db5b1f9ed04f9f308efc4b800c
-  data.tar.gz: 5ff43b2f9c0b59121483cb30cfd1fcd24ba8fa02c65381000fb86b8ef5097fa9
+  metadata.gz: cab9debec032f68fc67b6f61b6f2000ffede5043697966b80485088a0473a8ad
+  data.tar.gz: 72d285f09790989661d452b373a3b5ad71a1c1b4ba7ff2259151080489c06cbb
 SHA512:
-  metadata.gz: 23a90f57292ebf633ef4d2305b4ca7c038abd1bfa8a0a2e8729c5c279522c265b76ca3e8f616076d5483990467baeaec22999d70dec6cb015f9064a64cba7e6a
-  data.tar.gz: ca7a82f0e5d3c9de8df3cef5c4913f1dbbd8890b0b29ebfd563f6cb02d5125c664a0a221cb676eb56a68e1f4be7ce26bd1507c0bf7893530a916ccf8e720891d
+  metadata.gz: 0cf3c45db8cb7a11944661b0b7b42ad6f5a663a1ccae18325ded4bfaf48e1c177b1acb8e7662b53ca245d11de607d24c40b7d3425dfc87b0fabbea1ae993db11
+  data.tar.gz: be69695f4d08f486173791be50af44607ffa75decfb025cd5b6fab2ba97171f1164f9e0417236049bb37367cf4d5bff327dbe1ce64c74187521c0a4351a93fad

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

@@ -51,8 +51,25 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const dropdownRef = useRef(null)
 
 
-  //state for expanded property
-  const [expanded, setExpanded] = useState([])
+  const getExpandedItems = (treeData: { [key: string]: string }[]) => {
+    let expandedItems: any[] = [];
+    
+    const traverse = (items: string | any[]) => {
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item.expanded) {
+          expandedItems.push(item.id);
+        }
+        if (Array.isArray(item.children)) {
+          traverse(item.children);
+        }
+      }
+    }
+  
+    traverse(treeData);
+    return expandedItems;
+  }
+
   //state for whether dropdown is open or closed
   const [isClosed, setIsClosed] = useState(true)
   //state from onchange for textinput, to use for filtering to create typeahead
@@ -63,6 +80,10 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const [formattedData, setFormattedData] = useState([])
   //state for return for default
   const [defaultReturn, setDefaultReturn] = useState([])
+  // Get expanded items from treeData.
+  const initialExpandedItems = getExpandedItems(treeData);
+  // Initialize state with expanded items.
+  const [expanded, setExpanded] = useState(initialExpandedItems);
 
 
   useEffect(() => {
@@ -153,11 +174,13 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return tree
   }
 
+
+
   //function to map over data and add parent_id + depth property to each item
   const addCheckedAndParentProperty = (
     treeData: { [key: string]: any }[],
     parent_id: string = null,
-    depth: number = 0
+    depth: number = 0,
   ) => {
     if (!Array.isArray(treeData)) {
       return
@@ -295,6 +318,8 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     )
   }
 
+
+
   return (
     <div {...ariaProps} {...dataProps} className={classes} id={id}>
       <div ref={dropdownRef} className='wrapper'>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx

@@ -12,6 +12,7 @@ const treeData = [
         label: "People",
         value: "People",
         id: "people1",
+        expanded: true,
         children: [
           {
             label: "Talent Acquisition",

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { forwardRef, useEffect, useRef, useState, useImperativeHandle } from 'react'
 import classnames from 'classnames'
 
 import intlTelInput from 'intl-tel-input'
@@ -64,7 +64,7 @@ const containOnlyNumbers = (value: string) => {
   return /^[()+\-\ .\d]*$/g.test(value)
 }
 
-const PhoneNumberInput = (props: PhoneNumberInputProps) => {
+const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefObject<unknown>) => {
   const {
     aria = {},
     className,
@@ -111,6 +111,23 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     }
   }, [error, onValidate])
 
+  /*
+    useImperativeHandle exposes the kit's input element to a parent component via a ref.
+    See the Playbook docs for use cases.
+    Read: https://react.dev/reference/react/useImperativeHandle
+  */
+  useImperativeHandle(ref, () => {
+    return {
+      clearField() {
+        setInputValue("")
+        setError("")
+      },
+      inputNode() {
+        return inputRef.current
+      }
+    }
+  })
+
   const showFormattedError = (reason = '') => {
     const countryName = itiInit.getSelectedCountryData().name
     const reasonText = reason.length > 0 ? ` (${reason})` : ''
@@ -201,8 +218,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
       allowDropdown: !disabled,
       autoInsertDialCode: false,
       initialCountry,
-      onlyCountries,
-      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.6/js/utils.min.js"
+      onlyCountries
     })
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
@@ -242,7 +258,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   return (
     <div {...wrapperProps}>
       <TextInput
-          ref={inputRef}
+          ref={
+            inputNode => {
+              ref ? ref.current = inputNode : null
+              inputRef.current = inputNode
+            }
+          }
           {...textInputProps}
       />
     </div>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.jsx

@@ -0,0 +1,26 @@
+import React, { useEffect, useRef } from 'react'
+import { Body, PhoneNumberInput } from '../..'
+
+const PhoneNumberInputAccessInputElement = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+
+    // 2. Add any event listener to ref.current.inputNode() inside a useEffect hook and trigger it once.
+    useEffect(() => {
+        ref.current.inputNode().addEventListener("click", () => alert("Clicked!"))
+    }, [])
+
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <Body text="Click the input field below:" />
+            <PhoneNumberInput
+                id="access-input-element"
+                ref={ref}
+                {...props}
+            />
+        </>
+    )
+}
+
+export default PhoneNumberInputAccessInputElement

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_access_input_element.md

@@ -0,0 +1,3 @@
+To access the kit's input element attributes or add event listeners, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.inputNode()` with your desired attribute or event listener inside a `useEffect` hook. `useEffect` is necessary because the `ref` will be initially `undefined`. Calling `useEffect` with an empty dependency array ensures your event listeners won't be added twice.
+
+`inputNode()` is a custom function inside the kit that returns the input DOM element and its attributes. For example, to get the `name` attribute, use `ref.current.inputNode().name`

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.jsx

@@ -0,0 +1,30 @@
+import React, { useRef } from 'react'
+import { Button, PhoneNumberInput } from '../..'
+
+const PhoneNumberInputClearField = (props) => {
+    // 1. Create a ref - this accesses the kit's input element.
+    const ref = useRef()
+
+    // 2. Use clearField() to clear the field.
+    const handleClick = () => {
+        ref.current.clearField()
+    }
+
+    // 3. Pass the ref to the ref prop.
+    return (
+        <>
+            <PhoneNumberInput
+                id="clear-field"
+                ref={ref}
+                {...props}
+            />
+
+            <Button
+                onClick={handleClick}
+                text="Clear the Input Field"
+            />
+        </>
+    )
+}
+
+export default PhoneNumberInputClearField

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_clear_field.md

@@ -0,0 +1,3 @@
+To clear a number inside the input element, create a `ref` inside your parent component, pass it to the kit's `ref` prop, and use `ref.current.clearField()`.
+
+`clearField()` is a custom function inside the kit to clear numbers and the error message while still providing validation.

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

@@ -6,6 +6,8 @@ examples:
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
+  - phone_number_input_clear_field: Clearing the Input Field
+  - phone_number_input_access_input_element: Accessing the Input Element
 
   rails:
   - phone_number_input_default: Default

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

@@ -3,3 +3,5 @@ export { default as PhoneNumberInputPreferredCountries } from './_phone_number_i
 export { default as PhoneNumberInputInitialCountry } from './_phone_number_input_initial_country'
 export { default as PhoneNumberInputOnlyCountries } from './_phone_number_input_only_countries'
 export { default as PhoneNumberInputValidation } from './_phone_number_input_validation'
+export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
+export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.html.erb

@@ -0,0 +1,11 @@
+<div class="pb--doc-demo-row">
+  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
+
+  <%= pb_rails("selectable_card_icon", props: {
+    custom_icon: svg_url,
+    title_text: "Customization", 
+    body_text: "Personalize everything",
+    input_id: 1,
+    checked: true,
+  }) %>
+</div>

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.jsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import SelectableCardIcon from '../_selectable_card_icon'
+
+const svg = {
+  newChat: (
+    <svg
+        ariaHidden="true"
+        focusable="false"
+        role="img"
+        viewBox="0 0 512 512"
+        xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
+          fill="currentColor"
+      />
+    </svg>
+  ),
+}
+
+const SelectableCardIconCustom = (props) => {
+  return (
+    <div className="pb--doc-demo-row">
+      <SelectableCardIcon
+          bodyText="Talk to someone you love"
+          checked
+          customIcon={svg.newChat}
+          inputId={1}
+          titleText="New Chat"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default SelectableCardIconCustom

data/app/pb_kits/playbook/pb_selectable_card_icon/docs/_selectable_card_icon_custom.md

@@ -0,0 +1,19 @@
+# Tips for Custom Icons
+
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with   <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
+
+You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
+
+### React
+
+So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+
+### Rails
+
+Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.

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

@@ -5,10 +5,10 @@ examples:
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
   - selectable_card_icon_options: With Options
-
-
+  - selectable_card_icon_custom: Custom Icon
 
   react:
   - selectable_card_icon_default: Default
   - selectable_card_icon_checkmark: Checkmark
   - selectable_card_icon_single_select: Single Select
+  - selectable_card_icon_custom: Custom Icon

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

@@ -1,3 +1,4 @@
 export { default as SelectableCardIconDefault } from './_selectable_card_icon_default.jsx'
 export { default as SelectableCardIconCheckmark } from './_selectable_card_icon_checkmark.jsx'
 export { default as SelectableCardIconSingleSelect } from './_selectable_card_icon_single_select.jsx'
+export { default as SelectableCardIconCustom } from './_selectable_card_icon_custom.jsx'

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.html.erb

@@ -8,12 +8,14 @@
     value: object.value,
     checked: object.checked,
     disabled: object.disabled,
+    custom_icon: object.custom_icon,
     icon: object.checkmark,
     multi: object.multi,
     dark: object.dark,
     input_options: object.input_options
   }) do %>
     <%= pb_rails("selectable_icon", props: {
+      custom_icon: object.custom_icon,
       icon: object.icon,
       inputs: "disabled",
       text: object.title_text,

data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbSelectableCardIcon
     class SelectableCardIcon < Playbook::KitBase
       # Icon and text props
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :icon, type: Playbook::Props::String
       prop :title_text, type: Playbook::Props::String
       prop :body_text, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.html.erb

@@ -5,7 +5,7 @@
 
     <% if object.inputs == "disabled" %>
 
-      <%= pb_rails("icon", props: { icon: object.icon, size: "2x" }) %>
+      <%= pb_rails("icon", props: { custom_icon: object.custom_icon, icon: object.icon, size: "2x" }) %>
       <%= pb_rails("title", props: { text: object.text, tag: "h4", size: 4 }) %>
 
     <% else %>

data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb

@@ -4,6 +4,8 @@ module Playbook
   module PbSelectableIcon
     class SelectableIcon < Playbook::KitBase
       # Icon props
+      prop :custom_icon, type: Playbook::Props::String,
+                         default: nil
       prop :icon, type: Playbook::Props::String
       # Title text
       prop :text, type: Playbook::Props::String