playbook_ui 14.16.0.pre.alpha.play1958formgrouperrorborder7022 → 14.16.0.pre.alpha.play1959tablekitstripedlogicoverridesbackground6892

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7680053a486bf429a42e72112f6c0fa522171770377200ddbd631c192fbadb0b
-  data.tar.gz: 6664fd870a1313a499185510c1693b5a4c4d57cf393019961a8e7a0cf9abb13d
+  metadata.gz: 587e6ce7fc55be094027d2d2a58d4cf002a8a7c823600bf948296eff7ce928d7
+  data.tar.gz: a53b7609d0f527f00109c9011f9b4c210a48af9597beb28f5e79215631e99353
 SHA512:
-  metadata.gz: ab3eb0acb12b638587ff1dbe067afd88d883cd5d905f0ee4fc16022d5f47cd32e4444aaecfb5d35f679714e88a6dde0c87649df7efda36fab62bc8439ee3acaa
-  data.tar.gz: a4948ad436c573dcc8dd3f42f1b35fc1ee8814bda6b4b306b25f1a88eb3ff24811365b02a33661bb7d49f03b70acbc810d022ab4593f60c82c3d4fecc4b15dc5
+  metadata.gz: 44da80957b1b634e626e5ccc0e04badbd4211d8d0b65f2d867909970895de8334569832c36a0cd0b61d5514b4a6bd0c5c8afbce702c0beae2161ab798ee371a2
+  data.tar.gz: 937164a8cd121323562f3b2f5b6aa4c63ea6a12c8c04eb67a4b2ad606bf6304772f7a84c44381dfcbb0252ab796c30537e84f5e45f263e2a66333ece35f79e14

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

@@ -3,4 +3,4 @@ import { ExpandedState } from "@tanstack/react-table"
 export type ExpandedStateObject = Extract<
   ExpandedState,
   Record<string, boolean>
->
+>

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

@@ -7,7 +7,6 @@
 @import "./scss_partials/chrome_styles";
 @import "../tokens/screen_sizes";
 @import "../tokens/shadows";
-@import "../tokens/positioning";
 
 .pb_advanced_table {
   $border-color: 1px solid $border_light;
@@ -230,53 +229,6 @@
     max-height: 1920px;
     overflow-y: auto;
   }
-  
-  // Fullscreen
-  &.advanced-table-allow-fullscreen {
-    transition: all 0.3s ease;
-  }
-  
-  &.advanced-table-fullscreen {
-    background-color: $bg_light;
-    box-sizing: border-box;
-    height: 100vh;
-    left: 0;
-    overflow: auto;
-    position: fixed;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-
-    .pb_table {
-      th, td, div, button {
-        font-size: calc(100%);
-      }
-      box-sizing: border-box;
-      margin: $space_lg;
-      max-width: calc(100% - 64px);
-      width: calc(100% - 64px);
-    }
-
-    .pb_table.sticky-header {
-      thead,
-      .pb_advanced_table_header {
-        position: sticky !important;
-        top: 44px !important;
-        z-index: $z_10;
-      }
-    }
-  }
-  
-  .advanced-table-fullscreen-header {
-    background-color: $white;
-    height: 44px;
-    padding: 13px 20px;
-    position: sticky;
-    top: 0;
-    width: 100%;
-    z-index: $z_10;
-  }
-
   // Icons
   .button-icon {
     display: flex;
@@ -325,16 +277,6 @@
     }
   }
 
-  .fullscreen-icon {
-    @extend .button-icon;
-    @extend %primary-color-pseudo;
-    padding: 2px 0;
-
-    &:focus-visible {
-      border-radius: $border_rad_lighter;
-    }
-  }
-
   // Vertical separator
   .table-header-cells:first-child,
   .table-header-cells-custom:first-child,
@@ -524,18 +466,6 @@
       box-shadow: 1px 0px 0px 0px $border_dark !important;
     }
 
-    // Fullscreen
-    &.advanced-table-fullscreen {
-      background: $bg_dark;
-    }
-
-    .advanced-table-fullscreen-header {
-      background-color: $bg_dark_card;
-      position: sticky;
-      top: 0;
-      z-index: $z_10;
-    }
-
     // Dark Mode Responsive Styles
     @media only screen and (max-width: $screen-xl-min) {
       &[class*="advanced-table-responsive-scroll"] {

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

@@ -1,4 +1,4 @@
-import React, { useRef, useEffect, useState, useCallback } from "react";
+import React, { useRef, useEffect } from "react";
 import classnames from "classnames";
 
 import { GenericObject } from "../types";
@@ -19,15 +19,6 @@ import TableActionBar from "./Components/TableActionBar";
 import { useTableState } from "./Hooks/useTableState";
 import { useTableActions } from "./Hooks/useTableActions";
 
-import Card from "../pb_card/_card"
-import Flex from "../pb_flex/_flex"
-import Icon from "../pb_icon/_icon"
-
-type FullscreenControls = {
-  toggleFullscreen: () => void;
-  isFullscreen: boolean;
-};
-
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
@@ -58,8 +49,6 @@ type AdvancedTableProps = {
   toggleExpansionIcon?: string | string[]
   onRowSelectionChange?: (arg: RowSelectionState) => void
   virtualizedRows?: boolean
-  allowFullScreen?: boolean
-  fullScreenControl?: (controls: FullscreenControls) => void
 } & GlobalProps;
 
 const AdvancedTable = (props: AdvancedTableProps) => {
@@ -93,8 +82,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     toggleExpansionIcon = "arrows-from-line",
     onRowSelectionChange,
     virtualizedRows = false,
-    allowFullScreen = false,
-    fullScreenControl,
   } = props;
 
   // Component refs
@@ -159,68 +146,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     );
   }, [fetchMoreOnBottomReached, fetchNextPage, isFetching, totalFetched, fullData.length]);
 
-  // Fullscreen
-  const [isFullscreen, setIsFullscreen] = useState(false)
-
-  const toggleFullscreen = useCallback(() => {
-    setIsFullscreen(prevState => !prevState)
-  }, [])
-
-  useEffect(() => {
-    if (allowFullScreen && fullScreenControl) {
-      fullScreenControl({
-        toggleFullscreen,
-        isFullscreen
-      })
-    }
-  }, [allowFullScreen, fullScreenControl, toggleFullscreen, isFullscreen])
-
-  const renderFullscreenHeader = () => {
-    if (!isFullscreen) return null
-
-    const defaultMinimizeIcon = (
-      <button
-          className="gray-icon fullscreen-icon"
-          onClick={toggleFullscreen}
-      >
-        <Icon
-            cursor="pointer"
-            fixedWidth
-            icon="arrow-down-left-and-arrow-up-right-to-center"
-            {...props}
-        />
-      </button>
-    )
-
-    return (
-      <Card 
-          borderNone
-          borderRadius="none"
-          className="advanced-table-fullscreen-header" 
-          {...props}
-      >
-          <Flex justify="end">
-            {defaultMinimizeIcon}
-          </Flex>
-      </Card>
-    )
-  }
-
-  useEffect(() => {
-    if (!allowFullScreen) return
-
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape' && isFullscreen) {
-        event.preventDefault()
-        toggleFullscreen()
-      }
-    }
-    document.addEventListener('keydown', handleKeyDown)
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-    }
-  }, [allowFullScreen, toggleFullscreen, isFullscreen])
-
   // Build CSS classes and props
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
@@ -229,10 +154,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     buildCss("pb_advanced_table"),
     `advanced-table-responsive-${responsive}`,
     maxHeight ? `advanced-table-max-height-${maxHeight}` : '',
-    {
-      'advanced-table-fullscreen': isFullscreen,
-      'advanced-table-allow-fullscreen': allowFullScreen
-    },
     globalProps(props),
     className
   );
@@ -273,7 +194,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
           ref={tableWrapperRef}
           style={tableWrapperStyle as React.CSSProperties}
       >
-        {renderFullscreenHeader()}
         <AdvancedTableProvider
             columnDefinitions={columnDefinitions}
             enableToggleExpansion={enableToggleExpansion}
@@ -284,7 +204,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             hasAnySubRows={hasAnySubRows}
             inlineRowLoading={inlineRowLoading}
             isActionBarVisible={isActionBarVisible}
-            isFullscreen={isFullscreen}
             loading={loading}
             responsive={responsive}
             selectableRows={selectableRows}
@@ -327,7 +246,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>
@@ -498,17 +498,4 @@ test("customRenderer prop functions as expected", () => {
   const kit = screen.getByTestId(testId)
   const pill = kit.querySelector(".pb_pill_kit_success_lowercase")
   expect(pill).toBeInTheDocument()
-})
-
-test("allowFullScreen prop adds fullscreen class", () => {
-  render(
-    <AdvancedTable
-        allowFullScreen
-        columnDefinitions={columnDefinitions}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const tableContainer = screen.getByRole("table").closest("div")
-  expect(tableContainer).toHaveClass("advanced-table-allow-fullscreen")
-})
+})

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

@@ -39,5 +39,4 @@ examples:
   - 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_fullscreen: Fullscreen
+  - advanced_table_inline_editing: Inline Cell Editing

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

@@ -21,5 +21,4 @@ export { default as AdvancedTableSelectableRowsHeader } from './_advanced_table_
 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 AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
+export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_editing.jsx'

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 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
             {hideIcon && inLine ?
               <div>
                 <div
-                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
+                    className={iconWrapperClass()}
                     id={`${pickerId}-icon-plus`}
                 >
                   <Icon
@@ -230,7 +230,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   />
                 </div>
                 <div
-                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
+                    className={iconWrapperClass()}
                     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 %> date-picker-inline-icon-plus"
+          class="<%= object.icon_wrapper_class %>"
           id="<%= object.picker_id %>-icon-plus"
       >
         <%= pb_rails("icon", props: {
@@ -55,7 +55,7 @@
 
       <!-- Angle Down Icon -->
       <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
+          class="<%= object.icon_wrapper_class %>"
           id="<%= object.picker_id %>-angle-down"
       >
         <%= pb_rails("icon", props: {

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

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

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx

@@ -12,7 +12,7 @@ const DropdownWithAutocomplete = (props) => {
       label: "Jasper Furniss",
       value: "Jasper Furniss",
       territory: "PHL",
-      title: "Lead UX Engineer",
+      title: "Senior UX Engineer",
       id: "jasper-furniss",
       status: "Offline"
     },
@@ -25,18 +25,18 @@ const DropdownWithAutocomplete = (props) => {
       status: "Away"
     },
     {
-      label: "Carlos Lima",
-      value: "Carlos Lima",
+      label: "Jason Cypret",
+      value: "Jason Cypret",
       territory: "PHL",
-      title: "Nitro Developer",
-      id: "carlos-lima",
+      title: "VP of User Experience",
+      id: "jason-cypret",
       status: "Online"
     },
     {
       label: "Courtney Long",
       value: "Courtney Long",
       territory: "PHL",
-      title: "Lead UX Designer",
+      title: "UX Design Mentor",
       id: "courtney-long",
       status: "Online"
     }