playbook_ui 14.15.0.pre.alpha.play1949lodashremoval3of36815 → 14.15.0.pre.alpha.play1952fixhorizontalnavcursorstyle6795

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 00c74c07957b56cf1da4de814303ddc2a8ddd7632aac68fff9e7d4cdd3cbf203
-  data.tar.gz: f27e1e2692df72b86d23da070e3ca4e78c98ec266d451f2ef31267946da5c524
+  metadata.gz: c8462d011ee01fbc2e1dcbcc3da414e4c97080fd50b0fca45cbdaa02e39015a4
+  data.tar.gz: 1ca28020da66e69a5262d5817ab9a827f82586f861ffeb2657d939fe1e0335a7
 SHA512:
-  metadata.gz: 97b42f8f769cd29673a57688f2f0fff0ae8894242137f0966b267f33098b0b7b6d934f4ae59302d0c3bb502f05b21e52a95fbb49072ad0a763eb5a6b571ca21e
-  data.tar.gz: 00fa01e72545d9ce4edadee984709233526e7279fce642627d9e89dfff0de4b3488013685ed0744ece60475eee2250160a9b44eead8f65169227d7d7b21c9709
+  metadata.gz: 6cdcb36480d01c4657d5dcc7614a39b8d4f068c5122242d2eea84e189216cc146fb14ba5c17d0a9716211284fb542c15c6a4a9902274236f2623a0a9cc46b1b0
+  data.tar.gz: 6f2d7d27c882350ea27cf7c31dac83c82b029b32e54511f0783b85d3279be6314eb19253a9e3680d81cf5f0b7112c25f78b593dfa9c686a284148616dbfc0db2

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

@@ -1,5 +1,6 @@
 import React from 'react'
-import { isEmpty, omitBy, map } from '../../utilities/object'
+import { map } from 'lodash'
+import { isEmpty, omitBy } from '../../utilities/object'
 
 import Body from '../../pb_body/_body'
 import Caption from '../../pb_caption/_caption'
@@ -45,12 +46,12 @@ const CurrentFilters = ({ dark, filters }: CurrentFiltersProps): React.ReactElem
                     dark={dark}
                     size={4}
                     tag="h4"
-                    text={`${name}`}
+                    text={name}
                 /> :
                 <div>
                   <Caption
                       dark={dark}
-                      text={`${name}`}
+                      text={name}
                   />
                   <Title
                       dark={dark}

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

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { find, partial, map } from  '../../utilities/object'
+import { map } from 'lodash'
+import { find, partial } from  '../../utilities/object'
 
 import Button from '../../pb_button/_button'
 import Icon from '../../pb_icon/_icon'
@@ -26,7 +27,7 @@ const directionIcon = (dir: Direction) => (
 
 const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (arg0: SortValue) => void) => (
   map(options, (label, name) => {
-    const next = nextValue(value, String(name))
+    const next = nextValue(value, name)
     return (
       <ListItem key={`option-${next.name}-${next.dir}`}>
         <Button

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

@@ -22,72 +22,6 @@
 
 %>
 
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
 <%= 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 } %>
@@ -113,7 +47,6 @@
   <%= form.date_picker :example_date_picker_1, props: { label: true } %>
   <%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true } %>
-  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form-default", tree_data: treeData, margin_bottom: "sm", label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

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

@@ -21,72 +21,6 @@
   ]
 %>
 
-<% treeData = [{
-    label: "Power Home Remodeling",
-    value: "Power Home Remodeling",
-    id: "100",
-    expanded: true,
-    children: [
-      {
-        label: "People",
-        value: "People",
-        id: "101",
-        expanded: true,
-        children: [
-          {
-            label: "Talent Acquisition",
-            value: "Talent Acquisition",
-            id: "102",
-          },
-          {
-            label: "Business Affairs",
-            value: "Business Affairs",
-            id: "103",
-            children: [
-              {
-                label: "Initiatives",
-                value: "Initiatives",
-                id: "104",
-              },
-              {
-                label: "Learning & Development",
-                value: "Learning & Development",
-                id: "105",
-              },
-            ],
-          },
-          {
-            label: "People Experience",
-            value: "People Experience",
-            id: "106",
-          },
-        ],
-      },
-      {
-        label: "Contact Center",
-        value: "Contact Center",
-        id: "107",
-        children: [
-          {
-            label: "Appointment Management",
-            value: "Appointment Management",
-            id: "108",
-          },
-          {
-            label: "Customer Service",
-            value: "Customer Service",
-            id: "109",
-          },
-          {
-            label: "Energy",
-            value: "Energy",
-            id: "110",
-          },
-        ],
-      },
-    ],
-}] %>
-
 <%= 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 } %>
@@ -104,7 +38,6 @@
   <%= form.date_picker :example_date_picker_2, props: { label: true, required: true, validation_message: "Please, select a date.", allow_input: true } %>
   <%= form.star_rating_field :example_star_rating_validation, props: { variant: "interactive", label: true, required: true } %>
   <%= form.time_zone_select_field :example_time_zone_select, ActiveSupport::TimeZone.us_zones, { default: "Eastern Time (US & Canada)" }, props: { label: true, blank_selection: "Select a Time Zone...", required: true } %>
-  <%= form.multi_level_select :example_multi_level_select, props: { id: "multi-level-select-form", tree_data: treeData, margin_bottom: "sm", required: true, label: "Example Multi Level Select field" } %>
 
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from '../utilities/object'
+import { debounce } from 'lodash'
 
 // Kit selectors
 const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'

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

@@ -1,7 +1,7 @@
 
 import React from 'react'
 import classnames from 'classnames'
-import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
@@ -17,7 +17,6 @@ type IconButtonProps = {
   id?: string,
   link?: string,
   newWindow?: boolean,
-  onClick?: React.MouseEventHandler<HTMLElement>,
   size?: IconSizes,
   target?: string,
   variant?: 'default' | 'link',
@@ -33,7 +32,6 @@ const IconButton = (props: IconButtonProps) => {
     id,
     link,
     newWindow = false,
-    onClick = noop,
     size = "2x",
     target,
     variant = "default",
@@ -55,7 +53,6 @@ const IconButton = (props: IconButtonProps) => {
           htmlType={htmlType}
           link={link}
           newWindow={newWindow}
-          onClick={onClick}
           target={target}
       >
         <Icon

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

@@ -7,4 +7,3 @@ examples:
   react:
   - icon_button_default: Default
   - icon_button_sizes: Sizes
-  - icon_button_click: Click Handler

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

@@ -1,3 +1,2 @@
 export { default as IconButtonDefault } from './_icon_button_default.jsx'
 export { default as IconButtonSizes } from './_icon_button_sizes.jsx'
-export { default as IconButtonClick } from './_icon_button_click.jsx'

data/app/pb_kits/playbook/pb_lightbox/hooks/useVisibility.js

@@ -1,4 +1,4 @@
-import { debounce } from "../../utilities/object" 
+import { debounce } from 'lodash'
 import { useCallback, useMemo, useState } from 'react'
 
 export default function useVisibility(initialState = false) {

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

@@ -10,16 +10,6 @@
 .pb_multi_level_select {
   font-family: $font-family-base;
 
-&.error {
-  .wrapper {
-    .input_wrapper {
-      border-color: $error;
-    }
-  }
-  [class*=pb_body_kit_negative] {
-    margin-top: $space_xxs;
-  }
-}
   .wrapper {
     position: relative;
 
@@ -102,17 +92,4 @@
   .open {
     display: block;
   }
-
-  &.dark {
-    &.error {
-      .wrapper {
-        .input_wrapper {
-          border-color: $error_dark;
-        }
-      }
-      [class*=pb_body_kit_negative] {
-        color: $error_dark;
-      }
-    }
-  }
 }

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

@@ -7,12 +7,9 @@ import {
   buildDataProps,
   buildHtmlProps,
 } from "../utilities/props";
-import { cloneDeep } from "../utilities/object";
-
 import Icon from "../pb_icon/_icon";
 import FormPill from "../pb_form_pill/_form_pill";
-import Body from "../pb_body/_body";
-import Caption from "../pb_caption/_caption";
+import { cloneDeep } from "lodash";
 import MultiLevelSelectOptions from "./multi_level_select_options";
 import MultiLevelSelectContext from "./context";
 
@@ -38,14 +35,11 @@ type MultiLevelSelectProps = {
   className?: string
   data?: { [key: string]: string }
   disabled?: boolean
-  error?: string
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   inputDisplay?: "pills" | "none"
   inputName?: string
-  label?: string
   name?: string
-  required?: boolean
   returnAllSelected?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
@@ -62,14 +56,11 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     className,
     data = {},
     disabled = false,
-    error,
     htmlOptions = {},
     id,
     inputDisplay = "pills",
     inputName,
     name,
-    label,
-    required = false,
     returnAllSelected = false,
     treeData,
     onChange = () => null,
@@ -86,7 +77,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   const htmlProps = buildHtmlProps(htmlOptions);
   const classes = classnames(
     buildCss("pb_multi_level_select"),
-    error && "error",
     globalProps(props),
     className
   );
@@ -449,12 +439,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         className={classes}
         id={id}
     >
-      {label &&
-        <Caption
-            marginBottom="xs"
-            text={label}
-        />
-      }
       <MultiLevelSelectContext.Provider value={{
           variant,
           inputName,
@@ -478,7 +462,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       disabled={disabled}
                       key={selectedItem.id}
                       name={`${name}[]`}
-                      required={required}
                       type="hidden"
                       value={selectedItem.id}
                   />
@@ -493,7 +476,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id}
                           name={`${name}[]`}
-                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -506,7 +488,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                           disabled={disabled}
                           key={item.id} 
                           name={`${name}[]`}
-                          required={required}
                           type="hidden"
                           value={item.id}
                       />
@@ -567,7 +548,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
                       } selected`
                     : "Start typing..."
                 }
-                required={required}
                 value={singleSelectedItem.value || filterItem}
             />
           </div>
@@ -600,13 +580,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
         </div>
       </div>
       </MultiLevelSelectContext.Provider>
-      {error &&
-          <Body
-              dark={props.dark}
-              status="negative"
-              text={error}
-          />
-        }
     </div>
   );
 }) as MultiLevelSelectComponent;

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

@@ -8,8 +8,6 @@ examples:
   - multi_level_select_with_form: With Form
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_reset: Reset Selection
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
   - multi_level_select_disabled: Disabled Input
   - multi_level_select_disabled_options_default: Disabled Options (Default)
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)
@@ -26,8 +24,6 @@ examples:
   - multi_level_select_color: With Pills (Custom Color)
   - multi_level_select_with_children: Checkboxes With Children
   - multi_level_select_with_children_with_radios: Single Select With Children
-  - multi_level_select_label: With Label
-  - multi_level_select_error: Error
   - multi_level_select_disabled: Disabled Input
   - multi_level_select_disabled_options_default: Disabled Options (Default)
   - multi_level_select_disabled_options: Disabled Options (Return All Selected)

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

@@ -8,9 +8,7 @@ export { default as MultiLevelSelectWithChildren } from './_multi_level_select_w
 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'
-export { default as MultiLevelSelectError } from './_multi_level_select_error.jsx'
 export { default as MultiLevelSelectDisabledOptions } from './_multi_level_select_disabled_options.jsx'
 export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
-export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
-export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
+export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'

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

@@ -26,12 +26,6 @@ module Playbook
                      default: false
       prop :disabled, type: Playbook::Props::Boolean,
                       default: false
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
-      prop :error, type: Playbook::Props::String,
-                   default: ""
-      prop :label, type: Playbook::Props::String,
-                   default: ""
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -39,15 +33,11 @@ module Playbook
 
       def multi_level_select_options
         {
-          data: data,
           disabled: disabled,
-          error: error,
           id: id,
           inputDisplay: input_display,
           name: name,
-          label: label,
           treeData: tree_data,
-          required: required,
           returnAllSelected: return_all_selected,
           selectedIds: selected_ids,
           inputName: input_name,

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

@@ -1,5 +1,5 @@
 import PbEnhancedElement from '../pb_enhanced_element'
-import { debounce } from '../utilities/object'
+import { debounce } from 'lodash'
 
 export default class PbTypeahead extends PbEnhancedElement {
   _searchInput: HTMLInputElement
@@ -284,4 +284,4 @@ export default class PbTypeahead extends PbEnhancedElement {
     if (visible) visibilityProperty = '1'
     this.resultsLoadingIndicator.style.opacity = visibilityProperty
   }
-}
+}

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

@@ -1,4 +1,4 @@
-import { omit } from './object'
+import { omit } from 'lodash'
 import { camelToSnakeCase } from './text'
 
 import {

data/app/pb_kits/playbook/utilities/object.test.js

@@ -1,4 +1,4 @@
-import { isEmpty, get, isString, uniqueId, omitBy, noop, merge, filter, find, partial, map, cloneDeep, omit, debounce } from './object';
+import { isEmpty, get, isString, uniqueId, omitBy, noop, merge, filter, find, partial } from './object';
 
 describe('Lodash functions', () => {
   describe('isEmpty', () => {
@@ -234,152 +234,4 @@ describe('Lodash functions', () => {
       expect(joinPartial('b', 'c')).toBe('a_b_c');
     });
   });
-
-  describe('map', () => {
-    test('maps over an array with a function iteratee', () => {
-      const arr = [1, 2, 3];
-      const result = map(arr, (num) => num * 2);
-      expect(result).toEqual([2, 4, 6]);
-    });
-
-    test('maps over an array with a string iteratee', () => {
-      const arr = [{ value: 1 }, { value: 2 }, { value: 3 }];
-      const result = map(arr, 'value');
-      expect(result).toEqual([1, 2, 3]);
-    });
-
-    test('maps over an object with a function iteratee', () => {
-      const obj = { a: 1, b: 2, c: 3 };
-      const result = map(obj, (val, key) => key + val);
-      expect(result.sort()).toEqual(['a1', 'b2', 'c3'].sort());
-    });
-
-    test('maps over an object with a string iteratee', () => {
-      const obj = {
-        one: { num: 1 },
-        two: { num: 2 },
-        three: { num: 3 },
-      };
-      const result = map(obj, 'num');
-      expect(result.sort()).toEqual([1, 2, 3].sort());
-    });
-
-    test('returns original values if no iteratee provided', () => {
-      const arr = [1, 2, 3];
-      const result = map(arr);
-      expect(result).toEqual([1, 2, 3]);
-    });
-  });
-
-  describe('cloneDeep', () => {
-    test('clones primitive values', () => {
-      expect(cloneDeep(42)).toBe(42);
-      expect(cloneDeep('test')).toBe('test');
-      expect(cloneDeep(null)).toBe(null);
-    });
-
-    test('clones arrays deeply', () => {
-      const arr = [1, [2, 3]];
-      const cloned = cloneDeep(arr);
-      expect(cloned).toEqual(arr);
-      cloned[1][0] = 99;
-      expect(arr[1][0]).toBe(2);
-    });
-
-    test('clones objects deeply', () => {
-      const obj = { a: { b: 2 } };
-      const cloned = cloneDeep(obj);
-      expect(cloned).toEqual(obj);
-      cloned.a.b = 99;
-      expect(obj.a.b).toBe(2);
-    });
-
-    test('clones Date objects', () => {
-      const date = new Date();
-      const cloned = cloneDeep(date);
-      expect(cloned).not.toBe(date);
-      expect(cloned.getTime()).toBe(date.getTime());
-    });
-
-    test('clones RegExp objects', () => {
-      const regex = /test/gi;
-      const cloned = cloneDeep(regex);
-      expect(cloned).not.toBe(regex);
-      expect(cloned.source).toBe(regex.source);
-      expect(cloned.flags).toBe(regex.flags);
-    });
-  });
-
-  describe('omit', () => {
-    test('omits specified keys from object', () => {
-      const obj = { a: 1, b: 2, c: 3 };
-      expect(omit(obj, 'a', 'c')).toEqual({ b: 2 });
-    });
-
-    test('supports array of keys to omit', () => {
-      const obj = { a: 1, b: 2, c: 3 };
-      expect(omit(obj, ['b'])).toEqual({ a: 1, c: 3 });
-    });
-
-    test('returns empty object for null or non-object input', () => {
-      expect(omit(null, 'a')).toEqual({});
-      expect(omit("string", 'a')).toEqual({});
-    });
-
-    test('returns original object if no keys match', () => {
-      const obj = { a: 1, b: 2 };
-      expect(omit(obj, 'c')).toEqual({ a: 1, b: 2 });
-    });
-  });
-
-  describe('debounce', () => {
-    beforeEach(() => {
-      jest.useFakeTimers();
-    });
-
-    afterEach(() => {
-      jest.useRealTimers();
-    });
-
-    test('delays execution until wait time has passed', () => {
-      const func = jest.fn();
-      const debounced = debounce(func, 1000);
-      debounced();
-      expect(func).not.toHaveBeenCalled();
-      jest.advanceTimersByTime(500);
-      expect(func).not.toHaveBeenCalled();
-      jest.advanceTimersByTime(500);
-      expect(func).toHaveBeenCalledTimes(1);
-    });
-
-    test('calls function only once when called repeatedly', () => {
-      const func = jest.fn();
-      const debounced = debounce(func, 1000);
-      debounced();
-      debounced();
-      debounced();
-      jest.advanceTimersByTime(1000);
-      expect(func).toHaveBeenCalledTimes(1);
-    });
-
-    test('immediate option calls function on first call', () => {
-      const func = jest.fn();
-      const debounced = debounce(func, 1000, true);
-      debounced();
-      expect(func).toHaveBeenCalledTimes(1);
-      debounced();
-      debounced();
-      jest.advanceTimersByTime(1000);
-      expect(func).toHaveBeenCalledTimes(1);
-    });
-
-    test('subsequent call after wait period works with immediate option', () => {
-      const func = jest.fn();
-      const debounced = debounce(func, 1000, true);
-      debounced();
-      jest.advanceTimersByTime(1100);
-      debounced();
-      expect(func).toHaveBeenCalledTimes(2);
-    });
-  });
 });