playbook_ui 14.15.0.pre.alpha.play1910emptystatekitreactbeta6685 → 14.15.0.pre.alpha.play1917lodashremoval2of36613

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b5d72dcd60056b7f11f21d9d9df5773e495607966aacda253d3528e5de2472dd
-  data.tar.gz: fa73995286cadd1d924c88ff689de889f9e999d675ef968b540ea844cb5ef318
+  metadata.gz: 02e0b2959617acf35e73e785a01537eb8bb39c0b6b00aef5c6d013c9f48b6340
+  data.tar.gz: d6145400e8f289e968c68a521efd36598f09477db5ca012fe1404c72941bae1b
 SHA512:
-  metadata.gz: ee16de9591adb4f1ffca2153698188a125c122c6a1a83b8f69101c724ca32cda3f8eb193995345f9f3957f474a616f515e94efaca631d767fc88ab480c879d11
-  data.tar.gz: e9c9fe9eb4b2ddedfd99d61b3006e6e7b899134aa3492fc9ce7e0c606d58a88628d542fc8964cef94b484aa55d24c9954805ca5ec98f0f192f8b0ea0e41bc45a
+  metadata.gz: 95b6226943493be0424146f6da2b39ee5d28695a222a31e9da129a3dabba898589df0721a133b849170908d9020e6e27154f0a46329e07ec992e10acbe99b5d0
+  data.tar.gz: 6f115c33f3cc07859f331497dc3f0dab1c53d6d59b2f0f08386a1025083c0b46da24099e5a9e5bfd13426677a7d1bf4ffa44be431577a6e602db49167dbd2a7c

data/app/pb_kits/playbook/_playbook.scss

@@ -1,5 +1,4 @@
 
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -15,8 +14,8 @@
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
-@import 'pb_contact/contact';
 @import 'pb_copy_button/copy_button';
+@import 'pb_contact/contact';
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
@@ -46,7 +45,6 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
-@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';
@@ -111,7 +109,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
-@import 'pb_empty_state/empty_state';
+@import 'pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -161,13 +161,6 @@
         }
       }
     }
-    td {
-      [class^=pb_text_input_kit] .text_input_wrapper input {
-        padding: 0 $space_xxs;
-        font-size: 14px;
-        text-align: right;
-      }
-    }
   }
 
   .table-header-cells-active:first-child {

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

@@ -36,5 +36,4 @@ examples:
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
-  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)
-  - advanced_table_inline_editing: Inline Cell Editing
+  - advanced_table_selectable_rows_header: Selectable Rows (No Actions Bar)

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

@@ -20,5 +20,4 @@ export { default as AdvancedTableNoSubrows } from './_advanced_table_no_subrows.
 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 AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'
-export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'
+export { default as AdvancedTableColumnHeadersCustomCell } from './_advanced_table_column_headers_custom_cell.jsx'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -7,7 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 import classnames from "classnames";
 

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx

@@ -10,7 +10,7 @@ import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type CircleChartProps = {
   align?: "left" | "right" | "center";

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { find, map, partial } from 'lodash'
+import { map } from 'lodash'
+import { find, partial } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb

@@ -25,7 +25,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>
   <%= form.search_field :example_search_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -24,7 +24,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field" } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -13,7 +13,7 @@ import typography from "../tokens/exports/_typography.module.scss";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 import { GenericObject } from "../types";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type GaugeProps = {
   aria: { [key: string]: string };

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -49,7 +49,7 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          borderRadius="xs"
+          borderRadius="lg"
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -4,7 +4,7 @@
                                   new_window:object.new_window,
                                   target: object.target,
                                   dark: object.dark,
-                                  border_radius: "xs" }) do %>
+                                  border_radius: "lg" }) do %>
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object' 
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
 import Image from '../../pb_image/_image'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import React, { useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.tsx

@@ -1,4 +1,4 @@
-import { noop } from 'lodash'
+import { noop } from '../../utilities/object'
 import classnames from 'classnames'
 import React, { useLayoutEffect } from 'react'
 import { useWindowSize } from '../hooks/useWindowSize'

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -8,7 +8,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
-import { merge } from 'lodash'
+import { merge } from '../utilities/object' 
 
 type LineGraphProps = {
   align?: "left" | "right" | "center";

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

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef, forwardRef } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import classnames from "classnames";
 import { globalProps, GlobalProps } from "../utilities/globalProps";
 import {
@@ -23,13 +23,6 @@ import {
   getExpandedItems,
 } from "./_helper_functions";
 
-interface MultiLevelSelectComponent
-  extends React.ForwardRefExoticComponent<
-    MultiLevelSelectProps & React.RefAttributes<HTMLInputElement>
-  > {
-  Options: typeof MultiLevelSelectOptions;
-}
-
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string }
   className?: string
@@ -42,7 +35,6 @@ type MultiLevelSelectProps = {
   name?: string
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
-  onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[] | any
   variant?: "multi" | "single"
@@ -50,7 +42,7 @@ type MultiLevelSelectProps = {
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
 } & GlobalProps
 
-const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((props) => {
+const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   const {
     aria = {},
     className,
@@ -63,7 +55,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     name,
     returnAllSelected = false,
     treeData,
-    onChange = () => null,
     onSelect = () => null,
     selectedIds,
     variant = "multi",
@@ -296,10 +287,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     // Logic for removing items from returnArray or defaultReturn when pills clicked
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
-      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
-      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -325,10 +314,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     const updatedTree = changeItem(filtered[0], check);
     if (returnAllSelected) {
       onSelect(getCheckedItems(updatedTree));
-      onChange({ target: { name, value: getCheckedItems(updatedTree) } });
     } else {
       onSelect(getDefaultCheckedItems(updatedTree));
-      onChange({ target: { name, value: getDefaultCheckedItems(updatedTree) } });
     }
   };
 
@@ -361,7 +348,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     setIsDropdownClosed(true);
 
     onSelect(selectedItem);
-    onChange({ target: { name, value: selectedItem } });
   };
 
   // Single select: reset the tree state upon typing
@@ -403,12 +389,12 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   // Rendering formattedData to UI based on typeahead
   const renderNestedOptions = (items: { [key: string]: string; }[] | any ) => {
     const hasOptionsChild = React.Children.toArray(props.children).some(
-      (child) => React.isValidElement(child) && child.type === MultiLevelSelect.Options
+      (child: any) => child.type === MultiLevelSelect.Options
     );
 
     if (hasOptionsChild) {
       return React.Children.map(props.children, (child) => {
-        if (React.isValidElement(child) && child.type === MultiLevelSelect.Options) {
+        if (child.type === MultiLevelSelect.Options) {
           return React.cloneElement(child, { items });
         }
         return null;
@@ -473,18 +459,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                     ))
                   : null}
 
-                {!returnAllSelected
-                  ? defaultReturn.map((item) => (
-                      <input
-                          disabled={disabled}
-                          key={item.id} 
-                          name={`${name}[]`}
-                          type="hidden"
-                          value={item.id}
-                      />
-                    ))
-                  : null}
-
                 {returnAllSelected &&
                 returnedArray.length !== 0 &&
                 inputDisplay === "pills"
@@ -573,9 +547,8 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
       </MultiLevelSelectContext.Provider>
     </div>
   );
-}) as MultiLevelSelectComponent;
+};
 
-MultiLevelSelect.displayName = "MultiLevelSelect";
 MultiLevelSelect.Options = MultiLevelSelectOptions;
 
 export default MultiLevelSelect;

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

@@ -12,7 +12,6 @@ examples:
 
   react:
   - multi_level_select_default: Default
-  - multi_level_select_react_hook: React Hook
   - multi_level_select_single: Single Select
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected

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

@@ -7,4 +7,3 @@ export { default as MultiLevelSelectColor } from './_multi_level_select_color.js
 export { default as MultiLevelSelectWithChildren } from './_multi_level_select_with_children.jsx'
 export { default as MultiLevelSelectWithChildrenWithRadios } from './_multi_level_select_with_children_with_radios.jsx'
 export { default as MultiLevelSelectDisabled } from './_multi_level_select_disabled.jsx'
-export { default as MultiLevelSelectReactHook  } from './_multi_level_select_react_hook.jsx'

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

@@ -40,7 +40,7 @@ module Playbook
           treeData: tree_data,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
-          inputName: input_name,
+          input_name: input_name,
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,

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

@@ -23,7 +23,6 @@ type PhoneNumberInputProps = {
   data?: { [key: string]: string },
   disabled?: boolean,
   error?: string,
-  hiddenInputs?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   initialCountry?: string,
@@ -73,7 +72,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
     dark = false,
     data = {},
     disabled = false,
-    hiddenInputs = false,
     htmlOptions = {},
     id = "",
     initialCountry = "",
@@ -245,10 +243,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.MutableRefOb
       countrySearch: false,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
-      hiddenInput: hiddenInputs ? () => ({
-        phone: `${name}_full`,
-        country: `${name}_country_code`,
-      }) : null,
     })
 
     itiRef.current = telInputInit;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb

@@ -1,3 +1,3 @@
 <%= pb_rails("phone_number_input", props: {
-    id: "hello",
+    id: "hello"
 }) %>

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

@@ -16,6 +16,4 @@ examples:
   - phone_number_input_initial_country: Initial Country
   - phone_number_input_only_countries: Limited Countries
   - phone_number_input_validation: Form Validation
-  - phone_number_input_format: Format as You Type
-  - phone_number_input_hidden_inputs: Hidden Inputs
-  
+  - phone_number_input_format: Format as You Type

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

@@ -23,8 +23,6 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
-      prop :hidden_inputs, type: Playbook::Props::Boolean,
-                           default: false
 
       def classname
         generate_classname("pb_phone_number_input")
@@ -37,7 +35,6 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
-          hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,
           name: name,

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

@@ -10,7 +10,7 @@ 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: {

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

@@ -29,3 +29,77 @@ export const omitBy = (obj: Record<string, any>, predicate: (value: any, key: st
     return result;
   }, {})
 }
+
+export const noop = (): void => {
+  // empty
+};
+
+export const merge = (...objects: any[]): any => {
+  const isObject = (obj: any): boolean => obj && typeof obj === 'object';
+  const result = {} as any;
+  objects.forEach(obj => {
+    if (isObject(obj)) {
+      Object.keys(obj).forEach(key => {
+        const existingVal = result[key];
+        const newVal = obj[key];
+        if (isObject(existingVal) && isObject(newVal)) {
+          result[key] = merge(existingVal, newVal);
+        } else {
+          result[key] = newVal;
+        }
+      });
+    }
+  });
+  return result;
+};
+
+const createIteratee = (predicate: any) => {
+  if (typeof predicate === 'function') {
+    return predicate;
+  }
+  if (typeof predicate === 'string') {
+    return (obj: any) => obj[predicate];
+  }
+  if (Array.isArray(predicate)) {
+    const [key, value] = predicate;
+    return (obj: any) => obj[key] === value;
+  }
+  if (typeof predicate === 'object' && predicate !== null) {
+    return (obj: any) => {
+      for (const key in predicate) {
+        if (Object.prototype.hasOwnProperty.call(predicate, key)) {
+          if (obj[key] !== predicate[key]) return false;
+        }
+      }
+      return true;
+    };
+  }
+  return () => false;
+};
+
+export const filter = <T>(array: T[], predicate: any): T[] => {
+  const iteratee = createIteratee(predicate);
+  return array.filter(iteratee);
+};
+
+export const find = <T>(array: T[], predicate: any): T | undefined => {
+  const iteratee = createIteratee(predicate);
+  return array.find(iteratee);
+};
+
+export const partial = <F extends (...args: unknown[]) => unknown>(
+  fn: F,
+  ...partials: unknown[]
+): ((...args: unknown[]) => ReturnType<F>) => {
+  const placeholder = partial.placeholder;
+  return (...args: unknown[]): ReturnType<F> => {
+    let argIndex = 0;
+    const finalArgs = partials.map(arg =>
+      arg === placeholder ? args[argIndex++] : arg
+    );
+    return fn(...(finalArgs.concat(args.slice(argIndex)) as Parameters<F>));
+  };
+};
+
+partial.placeholder = Symbol();
+export const _ = partial.placeholder;

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

@@ -1,4 +1,4 @@
-import { filter } from 'lodash'
+import { filter } from './object'
 
 const isEmpty = (value: string | unknown): boolean => !value || value == ''