playbook_ui 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6884 → 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6929

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 21528e851e7da1a68fbae7253282c62bf76693e9c5a5510267d2be87179c991d
-  data.tar.gz: ff54496d1d1dc98d3d68e91c16ee01b650cb128ab11e6254be691306d9e79c64
+  metadata.gz: 5a8fbad59b6bcf213da8999442155913c3562e141c07d59a2b726122fb3b7644
+  data.tar.gz: cb01f14fa0d0b7bbfa98f7c8ebacea874e45e1dc307008bf523ae3a3b29976a4
 SHA512:
-  metadata.gz: a43e42dcd18832ecf7369284202e62cd028ff1250c6bb909798f63bac85b0ba40c8fb04f0c5d506dde27365b878be8876642d4faf15a5f09d506b13f499e4ae6
-  data.tar.gz: 92f158efe372f0b0da3c30a8d3c110dd510a6de7d55865577cf3534e661c7f0af2d48be0a492a7984f00158091017d7598dbfeeeca7a5da1bf48bff3ab68c6b7
+  metadata.gz: d6c879326332cde7cb15cc39915c01b998ba6ed799d088baa3222d7d66d0e87d63c85924203473cd35527e97a16139b62e1029be7b6b3f3e0b4c4399e97ac6d6
+  data.tar.gz: c9a5f2bdfa46a82adce264fbcf347562a8387d0c88a74174e502ec1f02826f3ca4f57ce0f3f78828b627bb2e8cbd5b7b926217ef65e41745790feb8e571bb1be

data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts

@@ -4,3 +4,14 @@ export type ExpandedStateObject = Extract<
   ExpandedState,
   Record<string, boolean>
 >
+
+declare global {
+  interface Document {
+    webkitExitFullscreen?: () => Promise<void>
+    msExitFullscreen?: () => Promise<void>
+    webkitRequestFullscreen?: () => Promise<void>
+    msRequestFullscreen?: () => Promise<void>
+    webkitFullscreenElement?: Element | null
+    msFullscreenElement?: Element | null
+  }
+}

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

@@ -232,10 +232,6 @@
   }
   
   // Fullscreen
-  &.advanced-table-fullscreenable {
-    transition: all 0.3s ease;
-  }
-  
   &.advanced-table-fullscreen {
     background-color: $border_light;
     box-sizing: border-box;

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

@@ -58,9 +58,8 @@ type AdvancedTableProps = {
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
   virtualizedRows?: boolean
-  fullscreenable?: boolean
-  onFullscreenChange?: (isFullscreen: boolean) => void
-  getFullscreenControls?: (controls: FullscreenControls) => void
+  allowFullScreen?: boolean
+  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
@@ -94,9 +93,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
-    fullscreenable = false,
-    onFullscreenChange,
-    getFullscreenControls,
+    allowFullScreen = false,
+    fullScreenControl,
   } = props;
 
   // Component refs
@@ -164,21 +162,76 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   // Fullscreen
   const [isFullscreen, setIsFullscreen] = useState(false)
 
+  const enterFullscreen = useCallback(async () => {
+    const element = tableWrapperRef.current
+    if (!element) return
+
+    try {
+      if (element.requestFullscreen) {
+        await element.requestFullscreen()
+      } else if ((element as any).webkitRequestFullscreen) {
+        await (element as any).webkitRequestFullscreen()
+      } else if ((element as any).msRequestFullscreen) {
+        await (element as any).msRequestFullscreen()
+      }
+    } catch (error) {
+      console.error('Error attempting to enable fullscreen:', error)
+    }
+  }, [])
+
+  const exitFullscreen = useCallback(async () => {
+    try {
+      if (document.exitFullscreen) {
+        await document.exitFullscreen()
+      } else if ((document as any).webkitExitFullscreen) {
+        await (document as any).webkitExitFullscreen()
+      } else if ((document as any).msExitFullscreen) {
+        await (document as any).msExitFullscreen()
+      }
+    } catch (error) {
+      console.error('Error exiting fullscreen:', error)
+    }
+  }, [])
+
   const toggleFullscreen = useCallback(() => {
-    const newFullscreenState = !isFullscreen
-    setIsFullscreen(newFullscreenState)
-    
-    onFullscreenChange?.(newFullscreenState)
-  }, [isFullscreen, onFullscreenChange])
+    if (isFullscreen) {
+      exitFullscreen()
+    } else {
+      enterFullscreen()
+    }
+  }, [isFullscreen, enterFullscreen, exitFullscreen])
+
+  const handleFullscreenChange = useCallback(() => {
+    const isCurrentlyFullscreen = !!(
+      document.fullscreenElement ||
+      (document as any).webkitFullscreenElement ||
+      (document as any).msFullscreenElement
+    )
+    setIsFullscreen(isCurrentlyFullscreen)
+  }, [])
 
   useEffect(() => {
-    if (fullscreenable && getFullscreenControls) {
-      getFullscreenControls({
-        toggleFullscreen,
-        isFullscreen
+    if (!allowFullScreen) return
+
+    document.addEventListener('fullscreenchange', handleFullscreenChange)
+    document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
+    document.addEventListener('msfullscreenchange', handleFullscreenChange)
+
+    return () => {
+      document.removeEventListener('fullscreenchange', handleFullscreenChange)
+      document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
+      document.removeEventListener('msfullscreenchange', handleFullscreenChange)
+    }
+  }, [allowFullScreen, handleFullscreenChange])
+
+  useEffect(() => {
+    if (fullScreenControl && allowFullScreen) {
+      fullScreenControl({ 
+        toggleFullscreen, 
+        isFullscreen 
       })
     }
-  }, [fullscreenable, getFullscreenControls, toggleFullscreen, isFullscreen])
+  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
 
   const renderFullscreenHeader = () => {
     if (!isFullscreen) return null
@@ -203,7 +256,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           borderRadius="none"
           className="advanced-table-fullscreen-header" 
           {...props}
-        >
+      >
           <Flex justify="end">
             {defaultMinimizeIcon}
           </Flex>
@@ -211,20 +264,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     )
   }
 
-  useEffect(() => {
-    if (!fullscreenable) return
-  
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isFullscreen) {
-        event.preventDefault()
-        toggleFullscreen()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [fullscreenable, toggleFullscreen])
 
   // Build CSS classes and props
   const ariaProps = buildAriaProps(aria);
@@ -236,7 +275,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
     {
       'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-fullscreenable': fullscreenable
+      'advanced-table-allow-fullscreen': allowFullScreen
     },
     globalProps(props),
     className
@@ -332,7 +371,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
         </AdvancedTableProvider>
      
       </div>
- {/* Bottom Pagination */}
+      {/* Bottom Pagination */}
       {pagination && (
         <TablePagination
             onChange={onPageChange}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -149,7 +149,7 @@ return (
         data={{testid: testId}}
         sortControl={sortControl}
         tableData={MOCK_DATA}
-      >
+    >
         <AdvancedTable.Header enableSorting />
         <AdvancedTable.Body />
       </AdvancedTable>
@@ -500,15 +500,15 @@ test("customRenderer prop functions as expected", () => {
   expect(pill).toBeInTheDocument()
 })
 
-test("fullscreenable prop adds fullscreen class", () => {
+test("allowFullScreen prop adds fullscreen class", () => {
   render(
     <AdvancedTable
+        allowFullScreen
         columnDefinitions={columnDefinitions}
-        fullscreenable
         tableData={MOCK_DATA}
     />
   )
 
   const tableContainer = screen.getByRole("table").closest("div")
-  expect(tableContainer).toHaveClass("advanced-table-fullscreenable")
+  expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
 })

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -54,9 +54,9 @@ const AdvancedTableFullscreen = (props) => {
           />
       </Flex>
       <AdvancedTable
+          allowFullScreen
           columnDefinitions={columnDefinitions}
-          fullscreenable
-          getFullscreenControls={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
           tableData={MOCK_DATA}
           {...props}
       >
@@ -72,9 +72,9 @@ const AdvancedTableFullscreen = (props) => {
           />
       </Flex>
       <AdvancedTable
+          allowFullScreen
           columnDefinitions={columnDefinitions}
-          fullscreenable
-          getFullscreenControls={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
           responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           tableProps={tableProps}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md

@@ -1,3 +1,3 @@
-Trigger Fullscreen mode with the `fullscreenable`and `getFullscreenControls` props.  `fullscreenable` is a boolean that enables Fullscreen functionality for an Advanced Table. `getFullscreenControls` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
+Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props.  `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
 
 Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -106,41 +106,41 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
-useEffect(() => {
-  datePickerHelper({
-    allowInput,
-    customQuickPickDates,
-    defaultDate,
-    disableDate,
-    disableRange,
-    disableWeekdays,
-    enableTime,
-    format,
-    hideIcon,
-    inLine,
-    maxDate,
-    minDate,
-    mode,
-    onChange,
-    onClose,
-    pickerId,
-    plugins,
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    position,
-    positionElement,
-    selectionType,
-    showTimezone,
-    staticPosition,
-    thisRangesEndToday,
-    yearRange,
-    required: false,
-  }, scrollContainer)
-}, initializeOnce ? [] : undefined)
+  useEffect(() => {
+    datePickerHelper({
+      allowInput,
+      customQuickPickDates,
+      defaultDate,
+      disableDate,
+      disableRange,
+      disableWeekdays,
+      enableTime,
+      format,
+      hideIcon,
+      inLine,
+      maxDate,
+      minDate,
+      mode,
+      onChange,
+      onClose,
+      pickerId,
+      plugins,
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      position,
+      positionElement,
+      selectionType,
+      showTimezone,
+      staticPosition,
+      thisRangesEndToday,
+      yearRange,
+      required: false,
+    }, scrollContainer)
+  }, initializeOnce ? [] : undefined)
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
-  } 
+  }
   delete filteredProps?.position
 
   const classes = classnames(
@@ -221,7 +221,7 @@ useEffect(() => {
             {hideIcon && inLine ?
               <div>
                 <div
-                    className={iconWrapperClass()}
+                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
                     id={`${pickerId}-icon-plus`}
                 >
                   <Icon
@@ -230,7 +230,7 @@ useEffect(() => {
                   />
                 </div>
                 <div
-                    className={iconWrapperClass()}
+                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -44,7 +44,7 @@
     <% if object.hide_icon && object.inline %>
       <!-- Plus Icon -->
       <div
-          class="<%= object.icon_wrapper_class %>"
+          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
           id="<%= object.picker_id %>-icon-plus"
       >
         <%= pb_rails("icon", props: {
@@ -55,7 +55,7 @@
 
       <!-- Angle Down Icon -->
       <div
-          class="<%= object.icon_wrapper_class %>"
+          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
           id="<%= object.picker_id %>-angle-down"
       >
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -174,6 +174,21 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       yearInput.value = fp.currentYear?.toString()
   }
 
+  const handleDatePickerChange = (fp: Instance, selectedDates: Date[]) => {
+    const inputEl = fp.input
+
+    if (inputEl) {
+      const inlineDatePickerElem = inputEl.closest('.inline-date-picker')
+      if (inlineDatePickerElem) {
+        if (selectedDates && selectedDates.length > 0) {
+          inlineDatePickerElem.classList.add('show-angle-down-icon')
+        } else {
+          inlineDatePickerElem.classList.remove('show-angle-down-icon')
+        }
+      }
+    }
+  }
+
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -204,6 +219,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
+      handleDatePickerChange(fp, selectedDates)
       yearChangeHook(fp)
       onChange(dateStr, selectedDates)
     }],

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -4,14 +4,3 @@
   inline: true,
   picker_id: "date-picker-inline"
 }) %>
-
-<%= javascript_tag do %>
-  window.addEventListener("DOMContentLoaded", (event) => {
-    const fpInline = document.querySelector("#date-picker-inline")._flatpickr
-    <!-- Display the angle-down icon when a date has been selected -->
-    const showAngleDownHandler = () => {
-      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
-    }
-    fpInline.config.onChange.push(showAngleDownHandler)
-  })
-<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx

@@ -3,19 +3,12 @@ import React from 'react'
 import DatePicker from '../_date_picker'
 
 const DatePickerInline = (props) => {
-  const showAngleDownHandler = (dateSelected) => {
-    if (dateSelected) {
-      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
-    }
-  }
-
   return (
     <div>
       <DatePicker
           className="inline-date-picker"
           hideIcon
           inLine
-          onChange={showAngleDownHandler}
           pickerId="date-picker-inline"
           {...props}
       />

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss

@@ -14,12 +14,12 @@
       opacity: 1;
     }
     &:not(:hover) {
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           color: $slate;
           display: inline-block;
@@ -33,12 +33,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $primary;
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $primary;
@@ -47,32 +47,34 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        #date-picker-inline-angle-down {
+        .date-picker-inline-angle-down.cal_icon_wrapper {
           svg {
             display: inline-block;
             color: $text_lt_light;
           }
         }
-        #date-picker-inline-icon-plus {
+        .date-picker-inline-icon-plus.cal_icon_wrapper {
           svg {
             display: none;
           }
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $primary;
         }
       }
     }
-    #date-picker-inline,
-    #date-picker-inline .active {
+    .date_picker_input.flatpickr-input,
+    .date_picker_input.flatpickr-input .active,
+    .text_input.flatpickr-input,
+    .text_input.flatpickr-input .active      {
       border: none;
       padding: 5px 5px 5px 10px;
       background-color: #FFF;
@@ -82,8 +84,8 @@
         box-shadow: none;
       }
     }
-    #date-picker-inline-angle-down,
-    #date-picker-inline-icon-plus {
+    .date-picker-inline-angle-down.cal_icon_wrapper,
+    .date-picker-inline-icon-plus.cal_icon_wrapper {
       height: 33px;
       border: none;
     }
@@ -96,12 +98,12 @@
 [class^=pb_date_picker_kit].dark {
   &.inline-date-picker {
     &:not(:hover) {
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
@@ -115,12 +117,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $white;
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
@@ -129,32 +131,34 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        #date-picker-inline-angle-down {
+        .date-picker-inline-angle-down.cal_icon_wrapper {
           svg {
             display: inline-block;
             color: $white;
           }
         }
-        #date-picker-inline-icon-plus {
+        .date-picker-inline-icon-plus.cal_icon_wrapper {
           svg {
             display: none;
           }
         }
       }
-      #date-picker-inline-icon-plus {
+      .date-picker-inline-icon-plus.cal_icon_wrapper {
         svg {
           display: none;
         }
       }
-      #date-picker-inline-angle-down {
+      .date-picker-inline-angle-down.cal_icon_wrapper {
         svg {
           display: inline-block;
           color: $white;
         }
       }
     }
-    #date-picker-inline,
-    #date-picker-inline .active {
+    .date_picker_input.flatpickr-input,
+    .date_picker_input.flatpickr-input .active,
+    .text_input.flatpickr-input,
+    .text_input.flatpickr-input .active {
       background-color: rgba($white,.10);
       border: none;
       padding: 5px 5px 5px 10px;
@@ -164,8 +168,8 @@
         box-shadow: none;
       }
     }
-    #date-picker-inline-angle-down,
-    #date-picker-inline-icon-plus {
+    .date-picker-inline-angle-down.cal_icon_wrapper,
+    .date-picker-inline-icon-plus.cal_icon_wrapper {
       height: 33px;
       border: none;
     }

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

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

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

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

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

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

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

@@ -7,11 +7,12 @@ 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";