playbook_ui 15.5.0.pre.alpha.draggablefix12589 → 15.5.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9048fda164619db498afb925949d4d2d56e2c273fcb753e7d43a504fe4c9e5a5
-  data.tar.gz: ff6ed156a4e852bcae45701f34feba01cdfa6f4e7a58b86181d76271781a5dd3
+  metadata.gz: 1908d580a733d2f740d4764449b6a29a4da28df8569d05c6986bde253714b026
+  data.tar.gz: aab898d2e6a575ed7cb75bb23596e0f6d10fdc41e1b1b849cf7fa18ba4fcc374
 SHA512:
-  metadata.gz: 1bda0b34988a106ead207cc8fd705876f3550ebd6bc42c261da82f2be82a0f85fbe2398b9a345ce308840f052846be435f46a975a50e27fe7a4a939f3d27dacb
-  data.tar.gz: db28214d63307ebeae96aefbb6db9ad6376cd84ba3606d09deac5507a0c41c39146b3ca0fe23976551e95376d96d6de979e5428585dbde764594db0279827855
+  metadata.gz: 9fdcef54c8ee3e0c25c7b37ddbc3c36125a51ebdfd87e3bbe87e4390fb74faa5282775b823041d8583abe15e50bf77cd68cf6c80fa1258d53bdcad787ceb48d2
+  data.tar.gz: e8da8e5b2fb73da7e16056b90e752c522df3d5bd9afacf19a27fd41586c3620b0567be99214b0763a051d852a105a170277adf0a91b7c63f2b7dee4ac0aa2115

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

@@ -791,28 +791,6 @@
       box-shadow: 1px 0px 0px 0px var(--column-border-color) !important;
     }
 
-    // Override last-header-cell border color in dark mode
-    .pb_advanced_table_header {
-      > tr:not(:first-child) {
-        .last-header-cell {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-
-      th[colspan]:not([colspan="1"]) {
-        border-right: 1px solid $border_dark !important;
-      }
-    }
-
-    // Override last-cell border color in dark mode for body cells
-    .pb_advanced_table_body {
-      tr {
-        .last-cell:not(:last-of-type) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-    }
-
     // Apply border colors in dark mode
     &[class*="column-group-border-"] {
       // For top-level column groups (ENROLLMENT DATA, PERFORMANCE DATA)
@@ -872,7 +850,7 @@
     // Restore vertical border styling in dark mode when verticalBorder is true
     .pb_table[data-vertical-border="true"] {
       .pb_advanced_table_header {
-        > tr {
+        > tr:not(:first-child) {
           th:not(:last-child) {
             border-right: 1px solid $border_dark !important;
           }
@@ -886,17 +864,11 @@
         }
       }
 
-      tr.virtualized-table-row {
-        td:not(:last-child) {
-          border-right: 1px solid $border_dark !important;
-        }
-      }
-
       // When both verticalBorder AND columnGroupBorderColor are set in dark mode,
       // override the default border-dark with the custom color
       &.pb_advanced_table[class*="column-group-border-"] {
         .pb_advanced_table_header {
-          > tr {
+          > tr:not(:first-child) {
             th:not(:last-child) {
               border-right: 1px solid var(--column-border-color) !important;
             }
@@ -909,12 +881,6 @@
             border-right: 1px solid var(--column-border-color) !important;
           }
         }
-
-        tr.virtualized-table-row {
-          td:not(:last-child) {
-            border-right: 1px solid var(--column-border-color) !important;
-          }
-        }
       }
     }
 
@@ -1019,90 +985,34 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      th[colspan]:not([colspan="1"]):not(:last-child) {
-        border-right: none !important;
-        box-shadow: 1px 0 0 0 $border_light !important;
-      }
-
-      .last-header-cell:not(:last-child),
-      > tr:last-child .last-header-cell:not(:last-child) {
+      .last-header-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      tr .last-cell:not(:last-of-type),
-      td.last-cell:not(:last-child),
-      .pb_table_td.last-cell:not(:last-child) {
+      .last-cell:not(:last-child) {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
-    &[class*="column-group-border-"] {
-      .pb_advanced_table_header {
-        th[colspan]:not([colspan="1"]):not(:last-child),
-        .last-header-cell:not(:last-child),
-        > tr:last-child .last-header-cell:not(:last-child) {
-          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-        }
-      }
-
-      .pb_advanced_table_body {
-        tr .last-cell:not(:last-of-type),
-        td.last-cell:not(:last-child),
-        .pb_table_td.last-cell:not(:last-child) {
-          box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-        }
-      }
-    }
-
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        // Convert all colspan headers to box-shadow with dark color
-        th[colspan]:not([colspan="1"]) {
-          border-right: none !important;
-          box-shadow: 1px 0 0 0 $border_dark !important;
-        }
-
-        // Convert all last-header-cell borders to box-shadow with dark color
-        .last-header-cell:not(:last-child),
-        > tr:last-child .last-header-cell:not(:last-child),
-        > tr:not(:first-child) .last-header-cell:not(:last-child),
-        > tr:not(:first-child) .last-header-cell:last-child {
+        .last-header-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        tr .last-cell:not(:last-of-type),
-        td.last-cell:not(:last-child),
-        .pb_table_td.last-cell:not(:last-child) {
+        .last-cell:not(:last-child) {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
-
-      &[class*="column-group-border-"] {
-        .pb_advanced_table_header {
-          th[colspan]:not([colspan="1"]):not(:last-child),
-          .last-header-cell:not(:last-child),
-          > tr:last-child .last-header-cell:not(:last-child) {
-            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-          }
-        }
-
-        .pb_advanced_table_body {
-          tr .last-cell:not(:last-of-type),
-          td.last-cell:not(:last-child),
-          .pb_table_td.last-cell:not(:last-child) {
-            box-shadow: 1px 0 0 0 var(--column-border-color) !important;
-          }
-        }
-      }
     }
   }
 }

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

@@ -1,6 +1,5 @@
 import React from "react"
-import AdvancedTable from '../_advanced_table'
-import colors from '../../tokens/exports/_colors.module.scss'
+import { AdvancedTable, colors } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 

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

@@ -1,5 +1,5 @@
 import React from "react";
-import AdvancedTable from '../_advanced_table';
+import { AdvancedTable } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnStylingColumnHeaders = (props) => {

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

@@ -1,7 +1,5 @@
 import React, { useState } from "react"
-import AdvancedTable from '../_advanced_table'
-import Flex from '../../pb_flex/_flex'
-import Button from '../../pb_button/_button'
+import { AdvancedTable, Button, Flex } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 

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

@@ -1,5 +1,5 @@
 import React from "react"
-import AdvancedTable from '../_advanced_table'
+import { AdvancedTable } from "playbook-ui"
 import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
 
 const AdvancedTableInfiniteScroll = (props) => {

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

@@ -1,7 +1,5 @@
 import React, { useState } from "react";
-import AdvancedTable from '../../pb_advanced_table/_advanced_table'
-import TextInput from '../../pb_text_input/_text_input'
-import Body from '../../pb_body/_body'
+import { AdvancedTable, TextInput, Body } from "playbook-ui";
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableInlineEditing = (props) => {

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

@@ -1,8 +1,7 @@
 import React from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
-import colors from '../../tokens/exports/_colors.module.scss'
-
+import { colors } from "playbook-ui"
 
 const AdvancedTableRowStyling = (props) => {
   const columnDefinitions = [

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -30,4 +30,4 @@
     }
 ] %>
 
-<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true, container: false }}) %>

data/app/pb_kits/playbook/pb_bar_graph/BarGraphStyles.scss

@@ -0,0 +1,58 @@
+@import "../tokens/colors";
+@import "../tokens/typography";
+@import url("https://code.highcharts.com/css/highcharts.css");
+
+:root {
+    --highcharts-color-0: #{$data_1};
+    --highcharts-color-1: #{$data_2};
+    --highcharts-color-2: #{$data_3};
+    --highcharts-color-3: #{$data_4};
+    --highcharts-color-4: #{$data_5};
+    --highcharts-color-5: #{$data_6};
+    --highcharts-color-6: #{$data_7};
+    --highcharts-color-7: #{$data_8};
+}
+
+.highcharts-title {
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $heading_3;
+    color: $text_lt_default;
+    fill: $text_lt_default;
+}
+
+.highcharts-subtitle {
+    font-family: $font_family_base;
+    color: $text_lt_light;
+    fill: $text_lt_light;
+    font-weight: $regular;
+    font-size: $text_base;
+}
+
+.highcharts-yaxis > .highcharts-axis-title {
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-family: $font_family_base;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-axis-labels {
+    font-family: $font_family_base;
+    color: $text_lt_lighter;
+    fill: $text_lt_lighter;
+    font-weight: $bold;
+    font-size: $text_smaller;
+}
+
+.highcharts-grid-line {
+    stroke: $border_light;
+}
+
+.highcharts-point {
+  border-radius: 3px;
+}
+
+.highcharts-axis-line {
+  stroke: $border_light;
+}

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -5,7 +5,6 @@ import { globalProps } from '../utilities/globalProps'
 
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
-import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
 
 import usePBCopy from './usePBCopy'
 
@@ -19,7 +18,6 @@ type CopyButtonProps = {
   tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
   tooltipText?: string
   value?: string
-  variant?: 'button' | 'icon'
   timeout?: number
 }
 
@@ -30,12 +28,11 @@ const CopyButton = (props: CopyButtonProps) => {
     data = {},
     from = '',
     id,
-    text = 'Copy',
+    text= 'Copy',
     timeout = 1000,
-    tooltipPlacement = 'bottom',
+    tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
-    variant = 'icon',
   } = props
 
   const [copied, copy] = usePBCopy({ value, from, timeout })
@@ -45,8 +42,7 @@ const CopyButton = (props: CopyButtonProps) => {
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
   return (
-    <div 
-        {...ariaProps}
+    <div {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
@@ -57,20 +53,11 @@ const CopyButton = (props: CopyButtonProps) => {
           showTooltip={false}
           text={tooltipText}
       >
-        {variant === 'icon' ? (
-          <CircleIconButton 
-              icon="copy" 
-              onClick={copy} 
-              variant="link" 
-          />
-        ) : (
-          <Button 
-              icon="copy"
-              onClick={copy}
-          >
-            {text}
-          </Button>
-        )}
+        <Button icon="copy"
+            onClick={copy}
+        >
+          {text}
+        </Button>
       </Tooltip>
     </div>
   )

data/app/pb_kits/playbook/pb_copy_button/copy_button.html.erb

@@ -1,10 +1,6 @@
 <%= pb_content_tag do %>
-    <% if object.variant == "icon" %>
-      <%= pb_rails("circle_icon_button", props: { icon: "copy", variant: "link" }) %>
-    <% else %>
-      <%= pb_rails("button", props: { icon: "copy" }) do %>
-        <%= object.text %>
-      <% end %>
+    <%= pb_rails("button", props: { icon: "copy" }) do %>
+      <%= object.text %>
     <% end %>
   <% if object.id %> 
   <%= pb_rails("tooltip", props: {

data/app/pb_kits/playbook/pb_copy_button/copy_button.rb

@@ -12,9 +12,6 @@ module Playbook
                           default: "Copied!"
       prop :value
       prop :from
-      prop :variant, type: Playbook::Props::Enum,
-                     values: %w[button icon],
-                     default: "icon"
 
       def classname
         generate_classname("pb_copy_button_kit")

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -37,29 +37,6 @@ it('copies the value to clipboard and pastes it into an input', async () => {
   expect(navigator.clipboard.writeText).toHaveBeenCalledWith("copy");
 })
 
-test('passes text and tooltip props to icon variant', () => {
-  render(
-      <CopyButton
-          data={{ testid: 'text-test' }}
-          tooltipPlacement="right"
-          tooltipText="Text copied!"
-          value="copy"
-      />
-  )
-
-  const kit = screen.getByTestId('text-test')
-  const button = kit.querySelector('.pb_button_kit.pb_button_link.pb_button_inline.pb_button_enabled')
-  expect(button).toBeInTheDocument()
-
-  fireEvent.click(button)
-  const tooltipContent = screen.getByText("Text copied!")
-  expect(tooltipContent).toHaveTextContent("Text copied!")
-
-  const tooltip = kit.querySelector('.pb_tooltip_kit')
-  expect(tooltip).toBeInTheDocument()
-})
-
-
 test('passes text and tooltip props to button', () => {
   render(
       <CopyButton
@@ -68,7 +45,6 @@ test('passes text and tooltip props to button', () => {
           tooltipPlacement="right"
           tooltipText="Text copied!"
           value="copy"
-          variant="button"
       />
   )
 

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.html.erb

@@ -1,2 +1,2 @@
-<%= pb_rails("copy_button", props: { id: "default-copy-button", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
-<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Click the icon above to copy and paste here" }) %>
+<%= pb_rails("copy_button", props: { id: "default-copy-button", text: "Copy Text", value: "Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease." } ) %>
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_default.jsx

@@ -7,6 +7,7 @@ const CopyButtonDefault = (props) => (
   <div>
     <CopyButton
         {...props}
+        text="Copy Text"
         tooltipPlacement="right"
         tooltipText="Text copied!"
         value="Playbook makes it easy to support bleeding edge, or legacy systems. Use Playbook’s 200+ components and end-to-end design language to create simple, intuitive and beautiful experiences with ease."
@@ -14,7 +15,7 @@ const CopyButtonDefault = (props) => (
 
     <Textarea
         {...props}
-        placeholder="Click the icon above to copy and paste here"
+        placeholder="Copy and paste here"
     />
   </div>
 )

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.html.erb

@@ -1,5 +1,5 @@
 <%= pb_rails("body", props: { id: "body", text: "Copy this body text!"}) %>
-<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button", variant: "button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Body text", from: "body", id: "copy-body-button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", placeholder: "Copy and paste here" }) %>
-<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button", variant: "button" }) %>
+<%= pb_rails("copy_button", props: { text: "Copy Text Input", from: "copy-input", id: "copy-input-button" }) %>
 <%= pb_rails("text_input", props: { margin_top: "xs", id: "copy-input" , value: "Copy and paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_from.jsx

@@ -21,7 +21,6 @@ const CopyButtonFrom = (props) => {
         text="Copy Body text"
         tooltipPlacement="right"
         tooltipText="Body text copied!"
-        variant="button"
     />
 
     <TextInput
@@ -37,7 +36,6 @@ const CopyButtonFrom = (props) => {
         text="Copy Text Input"
         tooltipPlacement="right"
         tooltipText="Text input copied!"
-        variant="button"
     />
 
     <Textarea

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

@@ -1,12 +1,10 @@
 examples:
   rails:
   - copy_button_default: Default
-  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default
-  - copy_button_button_variant: Button Variant
   - copy_button_from: Copy From
   - copy_button_hook: Copy Hook

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

@@ -1,4 +1,3 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
 export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
 export { default as CopyButtonHook } from './_copy_button_hook.jsx'
-export { default as CopyButtonButtonVariant } from './_copy_button_button_variant.jsx'

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb

@@ -1,14 +1,4 @@
 <%= pb_rails("currency", props: {
   amount: "-2,000.50",
   size: "sm",
-}) %>
-
-<%= pb_rails("currency", props: {
-  amount: "-2,000.50",
-  size: "md",
-}) %>
-
-<%= pb_rails("currency", props: {
-  amount: "-2,000.50",
-  size: "lg",
 }) %>

data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx

@@ -9,16 +9,6 @@ const CurrencyNegative = (props) => {
           amount="-2,000.50"
           {...props}
       />
-      <Currency
-          amount="-2,000.50"
-          size="md"
-          {...props}
-      />
-      <Currency
-          amount="-2,000.50"
-          size="lg"
-          {...props}
-      />
     </>
   )
 }

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb

@@ -1,10 +1,3 @@
-<%= pb_rails("currency", props: {
-  amount: "30,327.43",
-  label: "Default",
-  size: "sm",
-  margin_bottom: "md",
-}) %>
-
 <%= pb_rails("currency", props: {
   amount: "2,000.50",
   emphasized: false,

data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx

@@ -5,13 +5,6 @@ import Currency from '../_currency'
 const CurrencyVariants = (props) => {
   return (
     <>
-      <Currency
-          amount="30,327.43"
-          label="Default"
-          marginBottom="md"
-          size="sm"
-          {...props}
-      />
       <Currency
           amount="2,000.50"
           emphasized={false}

data/app/pb_kits/playbook/pb_currency/docs/_description.md

@@ -1,2 +1,2 @@
-Use this kit to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. Pairing it with labels improves user understanding.
-Cents are automatically ".00" unless otherwise overwritten (i.e. `unit` prop).
+Use to display monetary amounts, typically on dashboards or other layouts to show an overview or summary. User understanding increase when paired with labels. 
+Cents is automatically ".00" unless other wise overwritten (i.e. unit prop).

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

@@ -182,33 +182,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  const positionCalendarIfNeeded = (fp: Instance) => {
-    const cal = document.querySelector(`#cal-${pickerId}`) as HTMLElement
-    if (!cal) return
-
-    const inputRect = fp.input.getBoundingClientRect()
-    const h = cal.getBoundingClientRect().height || 300
-    const spaceBelow = window.innerHeight - inputRect.bottom
-    const spaceAbove = inputRect.top
-
-    if (spaceBelow < h + 10 && spaceAbove >= h + 10) {
-      if (staticPosition) {
-        cal.style.top = 'auto'
-        cal.style.bottom = 'calc(100% + 5px)'
-      } else {
-        cal.style.position = 'fixed'
-        cal.style.top = `${Math.max(10, inputRect.top - h - 5)}px`
-        cal.style.left = `${inputRect.left}px`
-      }
-    } else if (staticPosition) {
-      cal.style.top = ''
-      cal.style.bottom = ''
-    } else {
-      Object.assign(cal.style, { position: '', top: '', left: '', bottom: '', right: '', transform: '' })
-      fp._positionCalendar()
-    }
-  }
-
   const setPlugins = (thisRangesEndToday: boolean, customQuickPickDates: any) => {
     const pluginList = []
 
@@ -266,9 +239,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
-  // Store resize / position handler reference for cleanup
-  let resizeRepositionHandlerRef: (() => void) | null = null
-
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -290,24 +260,13 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     minDate: setMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
-    onOpen: [(_selectedDates, _dateStr, fp) => {
+    onOpen: [() => {
       calendarResizer()
-      if (resizeRepositionHandlerRef) {
-        window.removeEventListener('resize', resizeRepositionHandlerRef)
-      }
-      resizeRepositionHandlerRef = () => {
-        calendarResizer()
-        positionCalendarIfNeeded(fp)
-      }
-      window.addEventListener('resize', resizeRepositionHandlerRef)
+      window.addEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) attachToScroll(scrollContainer)
-      positionCalendarIfNeeded(fp)
     }],
     onClose: [(selectedDates, dateStr) => {
-      if (resizeRepositionHandlerRef) {
-        window.removeEventListener('resize', resizeRepositionHandlerRef)
-        resizeRepositionHandlerRef = null
-      }
+      window.removeEventListener('resize', calendarResizer)
       if (!staticPosition && scrollContainer) detachFromScroll(scrollContainer as HTMLElement)
       onClose(selectedDates, dateStr)
     }],

data/app/pb_kits/playbook/pb_date_time/_date_time.tsx

@@ -17,7 +17,6 @@ type DateTimeProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   size?: "sm" | "md",
-  showCurrentYear?: boolean,
   showDayOfWeek: boolean,
   showIcon?: boolean,
   timeZone?: string
@@ -33,7 +32,6 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
     showDayOfWeek = false,
     datetime,
     id,
-    showCurrentYear = false,
     showIcon = false,
     size = 'md',
     timeZone = 'America/New_York',
@@ -61,7 +59,6 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
           vertical="baseline"
       >
         <FormattedDate
-            showCurrentYear={showCurrentYear}
             showDayOfWeek={showDayOfWeek}
             size={size}
             value={datetime}