playbook_ui 12.25.0.pre.alpha.play824786 → 12.25.0.pre.alpha.railsmultilevelimprovements758

data/app/pb_kits/playbook/pb_multi_level_select/helper_functions.ts

@@ -0,0 +1,87 @@
+export const findItemById = (
+  items: { [key: string]: any }[],
+  id: string
+): any => {
+  for (const item of items) {
+    if (item.id === id) {
+      return item;
+    }
+    if (item.children) {
+      const found = findItemById(item.children, id);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+export const checkIt = (
+  foundItem: { [key: string]: any },
+  selectedItems: any[],
+  setSelectedItems: Function,
+  expand: boolean
+) => {
+  if (!foundItem) {
+    return;
+  }
+
+  foundItem.checked = true;
+  foundItem.expanded = expand;
+  selectedItems.push(foundItem);
+
+  if (foundItem.children) {
+    foundItem.children.map((x: any) => {
+      checkIt(x, selectedItems, setSelectedItems, expand);
+    });
+  }
+
+  setSelectedItems([...selectedItems]);
+};
+
+export const unCheckIt = (
+  foundItem: { [key: string]: any },
+  selectedItems: any,
+  setSelectedItems: any,
+  expand: boolean
+) => {
+  if (!foundItem) {
+    return;
+  }
+
+  foundItem.checked = false;
+  foundItem.expanded = false;
+  const newSelectedItems = selectedItems.filter(
+    (item: any) => item.id !== foundItem.id
+  );
+  if (foundItem.children) {
+    foundItem.children.map((x: any) => {
+      unCheckIt(x, selectedItems, setSelectedItems, expand);
+    });
+  }
+  setSelectedItems([...newSelectedItems]);
+};
+
+
+export const getParentAndAncestorsIds = (itemId:string, items:{ [key: string]: string; }[], ancestors:string[] = []):any => {
+  for (let i = 0; i < items.length; i++) {
+    const item:any = items[i];
+    if (item.id === itemId) {
+      // item found in current level of items array
+      return [...ancestors, item.id];
+    }
+    if (item.children && item.children.length > 0) {
+      // recursively search through children
+      const foundAncestors = getParentAndAncestorsIds(
+        itemId,
+        item.children,
+        [...ancestors, item.id]
+      );
+      if (foundAncestors) {
+        return foundAncestors;
+      }
+    }
+  }
+  // item not found in this level of items array or its children
+  return null;
+}

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -3,6 +3,8 @@
 module Playbook
   module PbMultiLevelSelect
     class MultiLevelSelect < Playbook::KitBase
+      prop :id
+      prop :name
       prop :tree_data, type: Playbook::Props::Array,
                        default: []
       prop :return_all_selected, type: Playbook::Props::Boolean,
@@ -15,6 +17,7 @@ module Playbook
       def multi_level_select_options
         {
           id: id,
+          name: name,
           treeData: tree_data,
           returnAllSelected: return_all_selected,
         }

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -16,7 +16,7 @@ const treeData = {
         {
           label: 'No one can get me',
           value: 'anonymous',
-          id:'default3',
+          id:'default2',
         },
       ],
     },

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

@@ -1,16 +1,11 @@
-import React, { forwardRef, useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import classnames from 'classnames'
-
-import intlTelInput from 'intl-tel-input'
-import 'intl-tel-input/build/css/intlTelInput.css'
-import 'intl-tel-input/build/js/utils.js'
-
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
-
+import intlTelInput from 'intl-tel-input'
+import 'intl-tel-input/build/css/intlTelInput.css'
 import TextInput from '../pb_text_input/_text_input'
-import { Callback } from '../types'
-import { isEmpty } from '../utilities/object'
+import 'intl-tel-input/build/js/utils.js'
 
 declare global {
   interface Window {
@@ -24,25 +19,20 @@ type PhoneNumberInputProps = {
   dark?: boolean,
   data?: { [key: string]: string },
   disabled?: boolean,
-  error?: string,
   id?: string,
   initialCountry?: string,
   isValid?: (valid: boolean) => void,
   label?: string,
   name?: string,
   onChange?: (e: React.FormEvent<HTMLInputElement>) => void,
-  onValidate?: Callback<boolean, void>,
   onlyCountries: string[],
   preferredCountries?: string[],
-  required?: boolean,
   value?: string,
 }
 
 enum ValidationError {
   TooShort = 2,
   TooLong = 3,
-  MissingAreaCode = 4,
-  SomethingWentWrong = -99
 }
 
 const formatToGlobalCountryName = (countryName: string) => {
@@ -50,10 +40,10 @@ const formatToGlobalCountryName = (countryName: string) => {
 }
 
 const formatAllCountries = () => {
-  const countryData = window.intlTelInputGlobals.getCountryData()
+  let countryData = window.intlTelInputGlobals.getCountryData()
 
   for (let i = 0; i < countryData.length; i++) {
-    const country = countryData[i]
+    let country = countryData[i]
     country.name = formatToGlobalCountryName(country.name)
   }
 }
@@ -81,9 +71,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     onChange = () => {
       void 0
     },
-    onValidate = () => null,
     onlyCountries = [],
-    required = false,
     preferredCountries = [],
     value = "",
   } = props
@@ -99,83 +87,39 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
   const inputRef = useRef<HTMLInputElement>()
   const [inputValue, setInputValue] = useState(value)
   const [itiInit, setItiInit] = useState<any>()
-  const [error, setError] = useState(props.error)
+  const [error, setError] = useState('')
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
 
-  useEffect(() => {
-    if (error?.length > 0) {
-      onValidate(false)
-    } else {
-      onValidate(true)
-    }
-  }, [error, onValidate])
-
-  const showFormattedError = (reason = '') => {
-    const countryName = itiInit.getSelectedCountryData().name
-    const reasonText = reason.length > 0 ? ` (${reason})` : ''
-    setError(`Invalid ${countryName} phone number${reasonText}`)
-    return true
-  }
-
   const validateTooLongNumber = (itiInit: any) => {
-    if (!itiInit) return
-    if (itiInit.getValidationError() === ValidationError.TooLong) {
-      return showFormattedError('too long')
-    } else {
-      setError('')
-    }
-  }
+    const error = itiInit.getValidationError()
 
-  const validateTooShortNumber = (itiInit: any) => {
-    if (!itiInit) return
-    if (itiInit.getValidationError() === ValidationError.TooShort) {
-      return showFormattedError('too short')
+    if (error === ValidationError.TooLong) {
+      const countryName = itiInit.getSelectedCountryData().name
+      setError(`Invalid ${countryName} phone number (too long)`)
     } else {
-      if (inputValue.length === 1) {
-        return showFormattedError('too short')
-      } else {
-        setError('')
-      }
+      setError("")
     }
   }
 
-  const validateOnlyNumbers = (itiInit: any) => {
-    if (!itiInit) return
-    if (inputValue && !containOnlyNumbers(inputValue)) {
-      return showFormattedError('enter numbers only')
-    }
-  }
+  const validateTooShortNumber = () => {
+    const error = itiInit.getValidationError()
 
-  const validateUnhandledError = (itiInit: any) => {
-    if (!required || !itiInit) return
-    if (itiInit.getValidationError() === ValidationError.SomethingWentWrong) {
-      if (inputValue.length === 1) {
-        return showFormattedError('too short')
-      } else if (inputValue.length === 0) {
-        setError('Missing phone number')
-        return true
-      } else {
-        return showFormattedError()
-      }
+    if (error === ValidationError.TooShort) {
+      const countryName = itiInit.getSelectedCountryData().name
+      setError(`Invalid ${countryName} phone number (too short)`)
     }
   }
 
-  const validateMissingAreaCode = (itiInit: any) => {
-    if (!required || !itiInit) return
-    if (itiInit.getValidationError() === ValidationError.MissingAreaCode) {
-      showFormattedError('missing area code')
-      return true
+  const validateOnlyNumbers = () => {
+    if (inputValue && !containOnlyNumbers(inputValue)) {
+      setError("Invalid phone number. Enter numbers only.")
     }
   }
 
   const validateErrors = () => {
-    if (itiInit) isValid(itiInit.isValidNumber())
-    if (validateOnlyNumbers(itiInit)) return
-    if (validateTooLongNumber(itiInit)) return
-    if (validateTooShortNumber(itiInit)) return
-    if (validateUnhandledError(itiInit)) return
-    if (validateMissingAreaCode(itiInit)) return
+    validateTooShortNumber()
+    validateOnlyNumbers()
   }
 
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
@@ -184,6 +128,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     setInputValue(evt.target.value)
+    validateTooLongNumber(itiInit)
     const phoneNumberData = getCurrentSelectedData(itiInit, evt.target.value)
     setSelectedData(phoneNumberData)
     onChange(phoneNumberData)
@@ -192,24 +137,25 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
 
   // Separating Concerns as React Docs Recommend
   // This also Fixes things for our react_component rendering on the Rails Side
-  useEffect(formatAllCountries, [])
+  useEffect(() => {
+    formatAllCountries()
+  }, [])
 
   useEffect(() => {
-    const telInputInit = intlTelInput(inputRef.current, {
+    const telInputInit = new intlTelInput(inputRef.current, {
       separateDialCode: true,
       preferredCountries,
       allowDropdown: !disabled,
-      autoInsertDialCode: false,
       initialCountry,
       onlyCountries,
-      utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/18.1.6/js/utils.min.js"
-    })
+    }
+    )
 
     inputRef.current.addEventListener("countrychange", (evt: Event) => {
+      validateTooLongNumber(telInputInit)
       const phoneNumberData = getCurrentSelectedData(telInputInit, (evt.target as HTMLInputElement).value)
       setSelectedData(phoneNumberData)
       onChange(phoneNumberData)
-      validateErrors()
     })
 
     inputRef.current.addEventListener("open:countrydropdown", () => setDropDownIsOpen(true))
@@ -218,35 +164,24 @@ const PhoneNumberInput = (props: PhoneNumberInputProps) => {
     setItiInit(telInputInit)
   }, [])
 
-  let textInputProps: {[key: string]: any} = {
-    className: dropDownIsOpen ? 'dropdown_open' : '',
-    dark,
-    "data-phone-number": JSON.stringify(selectedData),
-    disabled,
-    error,
-    type: 'tel',
-    id,
-    label,
-    name,
-    onBlur: validateErrors,
-    onChange: handleOnChange,
-    value: inputValue
-  }
-
-  let wrapperProps: Record<string, unknown> = { className: classes }
-
-  if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
-  if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}
-  if (required) textInputProps.required = true
-
   return (
-    <div {...wrapperProps}>
+    <div {...ariaProps} {...dataProps} className={classes}>
       <TextInput
-          ref={inputRef}
-          {...textInputProps}
+        className={dropDownIsOpen ? 'dropdown_open' : ''}
+        dark={dark}
+        data-phone-number={JSON.stringify(selectedData)}
+        disabled={disabled}
+        error={error}
+        id={id}
+        label={label}
+        name={name}
+        onBlur={() => validateErrors()}
+        onChange={handleOnChange}
+        ref={inputRef}
+        value={inputValue}
       />
     </div>
   )
 }
 
-export default forwardRef(PhoneNumberInput)
+export default PhoneNumberInput

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

@@ -5,11 +5,9 @@ examples:
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
 
   rails:
   - phone_number_input_default: Default
   - phone_number_input_preferred_countries: Preferred Countries
   - phone_number_input_initial_country: Initial Country
-  - phone_number_input_only_countries: Limited Countries
-  - phone_number_input_validation: Form Validation
+  - phone_number_input_only_countries: Limited Countries

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

@@ -2,4 +2,3 @@ export { default as PhoneNumberInputDefault } from './_phone_number_input_defaul
 export { default as PhoneNumberInputPreferredCountries } from './_phone_number_input_preferred_countries'
 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'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -5,8 +5,6 @@ module Playbook
     class PhoneNumberInput < Playbook::KitBase
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -17,8 +15,6 @@ module Playbook
                             default: []
       prop :preferred_countries, type: Playbook::Props::Array,
                                  default: []
-      prop :error, type: Playbook::Props::String,
-                   default: ""
       prop :value, type: Playbook::Props::String,
                    default: ""
 
@@ -31,13 +27,11 @@ module Playbook
           id: id,
           dark: dark,
           disabled: disabled,
-          error: error,
           initialCountry: initial_country,
           label: label,
           name: name,
           onlyCountries: only_countries,
           preferredCountries: preferred_countries,
-          required: required,
           value: value,
         }
       end

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,122 +1,74 @@
-import React from "react";
-import { render, screen } from "../utilities/test-utils";
-import PhoneNumberInput from "./_phone_number_input";
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
+import PhoneNumberInput from './_phone_number_input'
 
-const testId = "phoneNumberInput";
+const testId = "phoneNumberInput"
 
-test("should be disabled", () => {
-    const props = {
-        disabled: true,
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).toBeDisabled();
-});
-
-test("should be enabled by default", () => {
-    const props = {
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).not.toBeDisabled();
-});
-
-test("should have label", () => {
-    const label = "Phone Number";
-    const props = {
-        id: testId,
-        label,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByText(label);
-    expect(kit).toBeInTheDocument();
-});
-
-test("should pass data prop", () => {
-    const props = {
-        data: { testid: testId },
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByTestId(testId);
-    expect(kit).toBeInTheDocument();
-});
-
-test("should pass className prop", () => {
-    const className = "custom-class-name";
-    const props = {
-        className,
-        data: { testid: testId },
-        id: testId,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByTestId(testId);
-    expect(kit).toHaveClass(className);
-});
-
-test("should pass value prop", () => {
-    const value = "1234567890";
-    const props = {
-        id: testId,
-        value,
-    };
+test('should be disabled', () => {
+  const props = {
+    disabled: true,
+    id: testId,
+  }
 
-    render(<PhoneNumberInput {...props} />);
-    const kit = screen.getByRole("textbox");
-    expect(kit).toHaveDisplayValue(value);
-});
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).toBeDisabled()
+})
 
-//TODO: test required field presence
-test("should pass required prop", () => {
-    const props = {
-        id: testId,
-    };
+test('should be enabled by default', () => {
+  const props = {
+    id: testId,
+  }
 
-    render(
-        <PhoneNumberInput
-            required
-            {...props}
-        />
-    );
-    const kit = screen.getByRole("textbox");
-    expect(kit).toHaveAttribute("required");
-});
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).not.toBeDisabled()
+})
 
-test("should have error attribute when invalid", () => {
+test('should have label', () => {
+  const label = 'Phone Number'
   const props = {
-      id: testId,
-      error: "Something isn't right here."
-  };
+    id: testId,
+    label,
+  }
 
-  render(
-      <PhoneNumberInput
-          {...props}
-      />
-  );
-  const kit = screen.getByRole("textbox");
-  expect(kit).toHaveAttribute("error");
-});
-
-test("should trigger callback", () => {
-  const handleOnValidate = jest.fn((valid) => valid)
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByText(label)
+  expect(kit).toBeInTheDocument()
+})
 
+test('should pass data prop', () => {
   const props = {
-      id: testId,
-      onValidate: handleOnValidate
-  };
+    data: { testid: testId },
+    id: testId,
+  }
 
-  render(
-      <PhoneNumberInput
-          {...props}
-      />
-  );
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByTestId(testId)
+  expect(kit).toBeInTheDocument()
+})
 
-  expect(handleOnValidate).toBeCalledWith(true)
-});
+test('should pass className prop', () => {
+  const className = 'custom-class-name'
+  const props = {
+    className,
+    data: { testid: testId },
+    id: testId,
+  }
+
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByTestId(testId)
+  expect(kit).toHaveClass(className)
+})
+
+test('should pass value prop', () => {
+  const value = '1234567890'
+  const props = {
+    id: testId,
+    value,
+  }
+
+  render(<PhoneNumberInput {...props} />)
+  const kit = screen.getByRole("textbox")
+  expect(kit).toHaveDisplayValue(value)
+})

data/app/pb_kits/playbook/playbook-doc.js

@@ -30,7 +30,6 @@ import * as DateStacked from 'pb_date_stacked/docs'
 import * as DateTime from 'pb_date_time/docs'
 import * as DateTimeStacked from 'pb_date_time_stacked/docs'
 import * as DateYearStacked from 'pb_date_year_stacked/docs'
-import * as Detail from 'pb_detail/docs'
 import * as Dialog from 'pb_dialog/docs'
 import * as DistributionBarDocs from 'pb_distribution_bar/docs'
 import * as FileUpload from 'pb_file_upload/docs'
@@ -131,7 +130,6 @@ WebpackerReact.setup({
   ...DateTime,
   ...DateTimeStacked,
   ...DateYearStacked,
-  ...Detail,
   ...Dialog,
   ...DistributionBarDocs,
   ...FileUpload,

data/dist/menu.yml

@@ -90,7 +90,6 @@ kits:
   - typography:
     - body
     - caption
-    - detail
     - title
   - typography_patterns:
     - contact