playbook_ui 14.14.0.pre.alpha.play1852reacthookformsupportradio6318 → 14.14.0.pre.alpha.play1868dependencyremovallodash6286

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '08169588154946fcdb034524b646de6a050c504884a381f360f3a5470ea4917d'
-  data.tar.gz: d2794398a68601eeac259328439846e39816d671489e70cf35c9e9cc3669b76e
+  metadata.gz: d27a1fb0e1b7ff46b56d6009a0eb62cd2d8fee0a67bcbe52756710ef9aaf5581
+  data.tar.gz: c46d01bb2e6d6b386297b040c132f438da09b14b5582319a07ec6358f758917f
 SHA512:
-  metadata.gz: ca7b5000b148f3a0e8beac0926d11b05e36b9cc32cef3ccd72b8c53e04a4bdb6822e957ac82c85d50910dd4240d165c912e2b4eeb09566c8dbae3b70b28320de
-  data.tar.gz: fa1e9d28c2a166f674ac45c0c662262fb86fb69815409769be724bdba9a36b31bf24fe484053f17f97c691f9083759827b054f5a2a6652c7aab72bd8dc1c06f3
+  metadata.gz: 7c87e5ec2242eaf97737497152d0494d166282ad0da5dc17e0efd1008e1c698bbeb1389fd96cff40e8b1607caaa92dfdf3a90b9461e9876cf4c79030bd079b2d
+  data.tar.gz: f41cc750d14f6ec823711b0f85c3af3f60ff08f7149de6242969353b0fb2bac27576e03d75e587370d1286f46c2b60b64554cc19aa663a432274ee91c0dd03b3

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_filter/Filter/CurrentFilters.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty, map, omitBy } from 'lodash'
+import { isEmpty, map, omitBy } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -40,13 +40,13 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                   className="filter"
                   key={`filter-${name}`}
               >
-                { value === true ? 
+                { value === true ?
                 <Title
                     dark={dark}
                     size={4}
                     tag="h4"
                     text={name}
-                /> : 
+                /> :
                 <div>
                   <Caption
                       dark={dark}
@@ -58,7 +58,7 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                       tag="h4"
                       text={value}
                   />
-                </div>    
+                </div>
                 }
               </div>
             ))}

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { isEmpty } from 'lodash'
+import { isEmpty } from '../../utilities/object'
 
 import Flex from '../../pb_flex/_flex'
 
@@ -46,7 +46,7 @@ const FilterSingle = ({
           paddingRight="lg"
           vertical="center"
       >
-        { children && 
+        { children &&
           <>
             <FiltersPopover
                 dark={dark}

data/app/pb_kits/playbook/pb_radio/_radio.tsx

@@ -1,4 +1,6 @@
-import React, { useRef, forwardRef } from 'react'
+/*eslint-disable react/no-multi-comp */
+
+import React, { forwardRef, useRef } from 'react'
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
 import classnames from 'classnames'
@@ -8,7 +10,7 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 type RadioProps = {
   aria?: { [key: string]: string },
   alignment?: string,
-  checked?: boolean, // removed default assignment here
+  checked?: boolean,
   children?: React.ReactChild[] | React.ReactChild,
   customChildren?: boolean,
   className?: string,
@@ -22,10 +24,10 @@ type RadioProps = {
   name?: string,
   value?: string,
   text?: string,
-  onChange?: (event: React.FormEvent<HTMLInputElement> | null) => void,
+  onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
 } & GlobalProps
 
-const Radio = forwardRef<HTMLInputElement, RadioProps>(({
+const Radio = ({
   aria = {},
   alignment,
   children,
@@ -41,123 +43,110 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(({
   name = 'radio_name',
   text = 'Radio Text',
   value = 'radio_text',
-  checked,
   onChange = () => { void 0 },
   ...props
-}, ref) => {
-  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)
+}: RadioProps, ref: any) => {
+  const radioRef = useRef(null);
 
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss('pb_radio_kit', alignment),
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  )
+  );
 
   const classesCustom = classnames(
     dark ? 'dark' : null,
     error ? 'error' : null,
     globalProps(props),
     className
-  )
-
-  const checkedProps = checked !== undefined ? { checked } : {}
+  );
 
-  const displayRadio = (inputProps: any) => {
-    if (children && customChildren === false)
-      return children
+  const displayRadio = (props: RadioProps & any) => {
+    if (children && customChildren == false)
+      return (children)
     else
-      return (
-        <input
-            {...checkedProps}
-            disabled={disabled}
-            id={id}
-            name={name}
-            onChange={onChange}
-            ref={setRefs}
-            type="radio"
-            value={value}
-            {...inputProps}
-        />
-      )
-  }
+    return (
+    <input
+        disabled={disabled}
+        id={id}
+        name={name}
+        onChange={onChange}
+        ref={ref}
+        text={text}
+        type="radio"
+        value={value}
+        {...props}
+    />
+  )}
 
   const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
     if (event) {
-      const target = event.target as HTMLElement
+      const target = event.target as HTMLElement;
       if (
         target.id === 'pb-radio-children-wrapper' ||
         target.closest('#pb-radio-children-wrapper')
       ) {
-        internalRef.current?.click()
+        radioRef.current?.click();
       }
     }
-  }
+  };
 
-  return customChildren ? (
-    <Flex
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        align="center"
-        className={classesCustom}
-        cursor="pointer"
-        htmlFor={id}
-        htmlOptions={{
-          onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-            handleContainerClick(event)
-          }) as unknown as () => void
-        }}
-        id="radio-container"
-    >
-      <label className={buildCss('pb_radio_kit', alignment)}>
+  return (
+    customChildren ? (
+      <Flex 
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          align='center'
+          className={classesCustom}
+          cursor='pointer'
+          htmlFor={id}
+          htmlOptions={{
+            onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+              handleContainerClick(event);
+            }) as unknown as () => void
+          }}
+          id="radio-container"
+      >
+        <label className={buildCss('pb_radio_kit', alignment)}>
         <input
-            {...checkedProps}
             disabled={disabled}
             id={id}
             name={name}
             onChange={onChange}
-            ref={setRefs}
+            ref={radioRef}
             type="radio"
             value={value}
             {...props}
         />
+          <span className="pb_radio_button" />
+        </label>
+        <div id="pb-radio-children-wrapper"> {children} </div>
+      </Flex>
+    ) : (
+        <label
+            {...ariaProps}
+            {...dataProps}
+            {...htmlProps}
+            className={classes}
+            htmlFor={id}
+        >
+        <>{displayRadio(props)}</>
         <span className="pb_radio_button" />
+        <Body
+            dark={dark}
+            status={error ? 'negative' : null}
+            text={label}
+            variant={null}
+        />
       </label>
-      <div id="pb-radio-children-wrapper"> {children} </div>
-    </Flex>
-  ) : (
-    <label
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        htmlFor={id}
-    >
-      {displayRadio(props)}
-      <span className="pb_radio_button" />
-      <Body
-          dark={dark}
-          status={error ? 'negative' : null}
-          text={label}
-          variant={null}
-      />
-    </label>
-  )
-})
+    )
+  );
+};
 
-Radio.displayName = "Radio"
-export default Radio
+export default forwardRef(Radio);

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

@@ -16,7 +16,6 @@ examples:
   - radio_alignment: Alignment
   - radio_disabled: Disabled
   - radio_custom_children: Custom Children
-  - radio_react_hook: React Hook Form
 
   swift:
   - radio_default_swift: Default
@@ -27,4 +26,4 @@ examples:
   - radio_spacing_swift: Spacing
   - radio_padding_swift: Padding
   - radio_subtitle_swift: Subtitle
-  - radio_props_swift: ""
+  - radio_props_swift: ""

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

@@ -4,4 +4,3 @@ export { default as RadioError } from './_radio_error.jsx'
 export { default as RadioAlignment } from './_radio_alignment.jsx'
 export { default as RadioDisabled } from './_radio_disabled.jsx'
 export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
-export { default as RadioReactHook } from './_radio_react_hook.jsx'

data/app/pb_kits/playbook/pb_radio/radio.test.js

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

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -10,7 +10,8 @@ import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import treemap from 'highcharts/modules/treemap'
-import { merge } from 'lodash'
+import { merge} from '../utilities/object'
+
 
 type TreemapChartProps = {
   chartData: {
@@ -53,7 +54,7 @@ const TreemapChart = ({
   type = "treemap",
   ...props
 }: TreemapChartProps): React.ReactElement => {
-  
+
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -62,9 +63,9 @@ const TreemapChart = ({
     dark
       ? Highcharts.setOptions(highchartsDarkTheme)
       : Highcharts.setOptions(highchartsTheme);
-  };  
+  };
   treemap(Highcharts)
-  setupTheme();  
+  setupTheme();
 
   const staticOptions = {
     title: {

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -3,7 +3,8 @@ import Select from 'react-select'
 import AsyncSelect from 'react-select/async'
 import CreateableSelect from 'react-select/creatable'
 import AsyncCreateableSelect from 'react-select/async-creatable'
-import { get, isString, uniqueId } from 'lodash'
+import { get, isString, uniqueId } from '../utilities/object'
+
 import { globalProps, GlobalProps } from '../utilities/globalProps'
 import classnames from 'classnames'
 

data/app/pb_kits/playbook/utilities/object.ts

@@ -1,3 +1,84 @@
 /* 🛠️ Any commonly used lodash functions can be added here. 🤙 */
 
-export const isEmpty = (obj: Record<string, unknown>): boolean => Object.keys(obj).length < 1
+export const isEmpty = (obj: any) => [Object, Array].includes((obj || {}).constructor) && !Object.entries((obj || {})).length;
+
+export const get = <T, R = any>(obj: T, path: string, defaultValue?: R): R | any => {
+  const travel = (regexp: RegExp): any =>
+    String.prototype.split
+      .call(path, regexp)
+      .filter(Boolean)
+      .reduce((res: any, key: string) => (res !== null && res !== undefined ? res[key] : res), obj)
+  const result = travel(/[,[\]]+?/) || travel(/[,[\].]+?/)
+  return result === undefined || result === obj ? defaultValue : result
+}
+
+export const map = <T, U>(
+  collection: T[] | Record<string, T> | null | undefined,
+  iteratee: (value: any, key: string, collection: T[] | Record<string, T>) => U
+): U[] => {
+  if (!collection) return []
+  const coerce = (val: any) => {
+    if (val === true) return val
+    if (
+      typeof val === "number" ||
+      typeof val === "string" ||
+      typeof val === "boolean" ||
+      val === null
+    )
+      return String(val)
+    return val
+  }
+  return Array.isArray(collection)
+    ? collection.map((v, i) => iteratee(coerce(v), String(i), collection))
+    : Object.keys(collection).map(key => iteratee(coerce(collection[key]), key, collection))
+}
+
+export const isString = (str: unknown): str is string =>
+  str != null && typeof (str as any).valueOf() === "string"
+
+export const omitBy = <T extends Record<string, any>>(
+  obj: T,
+  predicate: (value: T[keyof T], key: string) => boolean
+): Partial<T> => {
+  if (obj === null || typeof obj !== 'object') return {} as Partial<T>
+  return Object.keys(obj).reduce((result, key) => {
+    const typedKey = key as keyof T
+    if (!predicate(obj[typedKey], key)) {
+      result[typedKey] = obj[typedKey]
+    }
+    return result
+  }, {} as Partial<T>)
+}
+
+export const uniqueId: (prefix?: string) => string = (() => {
+  let counter = 0
+  return (prefix = '') => `${prefix}${++counter}`
+})()
+
+type PlainObject = { [key: string]: any }
+
+const isObject = (item: any): item is PlainObject =>
+  item !== null && typeof item === 'object'
+
+export const merge = <T extends PlainObject>(
+  target: T,
+  ...sources: PlainObject[]
+): T => {
+  if (!sources.length) return target
+  const source = sources.shift()!
+  if (isObject(target) && isObject(source)) {
+    Object.keys(source).forEach((key: string) => {
+      const typedKey = key as keyof T
+      const srcValue = source[key]
+      if (isObject(srcValue)) {
+        if (!target[typedKey]) {
+          target[typedKey] = (Array.isArray(srcValue) ? [] : {}) as unknown as T[typeof typedKey]
+        }
+        merge(target[typedKey], srcValue)
+      } else {
+        target[typedKey] = srcValue
+      }
+    })
+  }
+  return merge(target, ...sources)
+}