playbook_ui 18.2.0.pre.rc.3 → 18.3.0.pre.alpha.forwardrefwarnings20879

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1c86866d416fa61cd6ef95462feacdaab4821a38f7512d171709d74ae355ca79
-  data.tar.gz: 881dc11beb08455d597c2fef659070af84626c562597566f69fcdb773a61f5e7
+  metadata.gz: af48353705b1ce87159c9761f41618cbb21c66e593c0e6c3a7eca1ba3cd7d2a3
+  data.tar.gz: ab45901796d0cfff09d8d199d320c83cd58429b7831544aa427865306d6e5d96
 SHA512:
-  metadata.gz: 2a6e88281370f5ce11a7467aab89ed9db923a593f34748c39f43143488daa0f92b9f55b8eb9c1636c2f2c64215a3b092cdd5fbc3702315cc9612ef9cfe2327b0
-  data.tar.gz: 398a941db88d54157eb9ca15fb952d290961fc05074a7c62ec0e6246cf315ae9d75da943f31d57b6c654d99652f32036b33c4dc1fda9bd3b2454e1cf524dae50
+  metadata.gz: fcdf296d7ddc231a54b735b920bc650387c76f8364531ee44950d80d4e819b16dc188a102b4ca44d92964a60498272d00b33d5fbdaf4edd3bdfb4e7c9a466e7a
+  data.tar.gz: 0142e30f5c5b217699a9e3b2059117fd350cfa51dac2ab3fc6c3e2c9b700707f068412da119e437b81574b4f4844f7781ce9f6bd9ea075717c6127400bf1a3c4

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -157,7 +157,7 @@ module Playbook
 
       # Determines if the toggle-all button should be shown in the header based on inline row loading and persist toggle expansion button props
       def show_toggle_all_button?
-        return false unless enable_toggle_expansion == "header" || enable_toggle_expansion == "all"
+        return false unless %w[header all].include?(enable_toggle_expansion)
 
         has_any_sub_rows? || (inline_row_loading && persist_toggle_expansion_button)
       end

data/app/pb_kits/playbook/pb_avatar/_avatar.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { getPlacementProps } from './Utilities/GetPlacementPropsHelper'
 
 import Image from "../pb_image/_image";
@@ -33,7 +34,7 @@ export type AvatarProps = {
   name?: string,
   size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs",
   status?: "away" | "offline" | "online",
-  } & GlobalProps
+  } & GlobalProps & GlobalEventProps
 
 const firstTwoInitials = (name: string) =>
   name.split(/\s/).map((name) => name[0])
@@ -94,6 +95,7 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_avatar/kit.schema.json

@@ -83,6 +83,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Avatar } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js

@@ -11,8 +11,7 @@ beforeEach(() => {
 })
 
 afterEach(() => {
-  // eslint-disable-next-line
-  console.error.mockRestore()
+  jest.restoreAllMocks()
 })
 
 const testId = 'collapsible1',

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
@@ -64,7 +65,7 @@ type ContactProps = {
   iconEnabled?: boolean
   id?: string
   unstyled?: boolean
-}
+} & GlobalEventProps
 
 const Contact = (props: ContactProps): React.ReactElement => {
   const {
@@ -125,6 +126,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
+          {...globalEventProps(props)}
           className={classes}
           id={id}
       >
@@ -139,6 +141,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_contact/kit.schema.json

@@ -52,6 +52,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Contact } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_currency/_currency.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import Body from '../pb_body/_body'
@@ -28,7 +29,7 @@ type CurrencyProps = {
   unit?: string,
   unstyled?: boolean,
   commaSeparator?: boolean,
-}
+} & GlobalEventProps
 
 const sizes: {lg: 1, md: 3, sm: 4} = {
   lg: 1,
@@ -132,6 +133,7 @@ const Currency = (props: CurrencyProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_currency/kit.schema.json

@@ -137,6 +137,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Currency } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import StatChange from '../pb_stat_change/_stat_change'
@@ -23,7 +24,7 @@ type DashboardValueProps = {
     unit?: string,
     value?: string | number
   }
-}
+} & GlobalEventProps
 
 const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
   const {
@@ -52,6 +53,7 @@ const DashboardValue = (props: DashboardValueProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_dashboard_value/kit.schema.json

@@ -43,6 +43,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DashboardValue } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date/_date.tsx

@@ -3,6 +3,7 @@ import classnames from "classnames";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GlobalEventProps, globalEventProps } from "../utilities/globalEventProps";
 import DateTime from '../pb_kit/dateTime';
 
 import Body from "../pb_body/_body";
@@ -24,7 +25,7 @@ type PbDateProps = {
   size?: "sm" | "md" | "lg";
   unstyled?: boolean;
   value: Date;
-};
+} & GlobalEventProps;
 
 const PbDate = (props: PbDateProps): React.ReactElement => {
   const {
@@ -64,6 +65,7 @@ const PbDate = (props: PbDateProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date/date.test.js

@@ -31,7 +31,7 @@ describe('PbDate Kit', () => {
   })
 
   afterEach(() => {
-    console.error.mockRestore()
+    jest.restoreAllMocks()
   })
 
   // Default Props

data/app/pb_kits/playbook/pb_date/kit.schema.json

@@ -90,6 +90,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Date } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_picker/date_picker.test.js

@@ -6,6 +6,10 @@ import DatePicker from './_date_picker'
 import DateTime from "../pb_kit/dateTime.ts"
 import { getTimezoneText } from './plugins/timeSelect'
 
+// Freeze Date while letting Flatpickr updates and waitFor polling run normally.
+jest.useFakeTimers({
+  doNotFake: ['setTimeout', 'clearTimeout', 'setInterval', 'clearInterval', 'requestAnimationFrame', 'cancelAnimationFrame'],
+});
 jest.setSystemTime(new Date('01/01/2020'));
 const DEFAULT_DATE = new Date()
 

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
+import { GlobalEventProps, globalEventProps } from "../utilities/globalEventProps";
 import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import DateTime from '../pb_kit/dateTime';
 
@@ -21,7 +22,7 @@ type DateRangeInlineProps = {
   size?: "sm" | "xs";
   showCurrentYear?: boolean;
   startDate?: Date;
-};
+} & GlobalEventProps;
 
 const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
   if (includeYear) {
@@ -74,6 +75,7 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
     <div
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">

data/app/pb_kits/playbook/pb_date_range_inline/kit.schema.json

@@ -71,6 +71,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateRangeInline } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Body from '../pb_body/_body'
 import Flex from '../pb_flex/_flex'
@@ -18,7 +19,7 @@ type DateRangeStackedProps = {
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   startDate: Date,
-}
+} & GlobalEventProps
 
 const DateRangeStacked = (props: DateRangeStackedProps): React.ReactElement => {
   const { 
@@ -41,6 +42,7 @@ const DateRangeStacked = (props: DateRangeStackedProps): React.ReactElement => {
     <div 
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
     >
       <Flex vertical="center">

data/app/pb_kits/playbook/pb_date_range_stacked/kit.schema.json

@@ -31,6 +31,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateRangeStacked } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import classnames from "classnames";
 import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GlobalEventProps, globalEventProps } from "../utilities/globalEventProps";
 import DateTime from '../pb_kit/dateTime';
 
 import Caption from "../pb_caption/_caption";
@@ -20,7 +21,7 @@ type DateStackedProps = {
   id?: string;
   reverse?: boolean;
   showCurrentYear?: boolean;
-};
+} & GlobalEventProps;
 
 const sizes: {sm: 4, md: 3} = {
   sm: 4,
@@ -60,6 +61,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
         <div
             {...dataProps}
             {...htmlProps}
+            {...globalEventProps(props)}
             className={classes}
         >
           <div className="pb_date_stacked_day_month">
@@ -76,6 +78,7 @@ const DateStacked = (props: DateStackedProps): React.ReactElement => {
           <div
               {...dataProps}
               {...htmlProps}
+              {...globalEventProps(props)}
               className={classes}
           >
             <div className="pb_date_stacked_day_month">

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -4,6 +4,7 @@ import { render, screen } from '../utilities/test-utils'
 import DateStacked from './_date_stacked'
 
 const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.useFakeTimers();
 jest.setSystemTime(new Date(TEST_DATE));
 const futureDate = new Date(
   new Date().getFullYear() - 4,

data/app/pb_kits/playbook/pb_date_stacked/kit.schema.json

@@ -73,6 +73,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateStacked } from 'playbook-ui'",

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

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import Flex from '../pb_flex/_flex'
 import Time from '../pb_time/_time'
@@ -21,7 +22,7 @@ type DateTimeProps = {
   showDayOfWeek: boolean,
   showIcon?: boolean,
   timeZone?: string
-}
+} & GlobalEventProps
 
 const DateTime = (props: DateTimeProps): React.ReactElement => {
   const {
@@ -53,6 +54,7 @@ const DateTime = (props: DateTimeProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_date_time/dateTime.test.js

@@ -4,6 +4,7 @@ import { render, screen } from '../utilities/test-utils'
 import DateTime from './_date_time'
 
 const TEST_DATE = '01/01/2020 00:00:000 GMT-0500'
+jest.useFakeTimers();
 jest.setSystemTime(new Date(TEST_DATE));
 const testId = 'datetime-kit'
 

data/app/pb_kits/playbook/pb_date_time/kit.schema.json

@@ -90,6 +90,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateTime } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { GlobalEventProps } from '../utilities/globalEventProps'
 
 import Flex from '../pb_flex/_flex'
 import FlexItem from '../pb_flex/_flex_item'
@@ -20,7 +21,7 @@ type DateTimeStackedProps = {
   dark: boolean,
   timeZone?: string,
   showCurrentYear?: boolean,
-}
+} & GlobalEventProps
 
 const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
   if (props.date) deprecatedProps()

data/app/pb_kits/playbook/pb_date_time_stacked/kit.schema.json

@@ -57,6 +57,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateTimeStacked } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import DateTime from '../pb_kit/dateTime';
 
 import Body from '../pb_body/_body'
@@ -16,7 +17,7 @@ type DateYearStackedProps = {
   date: Date,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-}
+} & GlobalEventProps
 
 const DateYearStacked = (props: DateYearStackedProps): React.ReactElement => {
   const { 
@@ -39,6 +40,7 @@ const DateYearStacked = (props: DateYearStackedProps): React.ReactElement => {
     <div 
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={css}
     >
       <Title

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js

@@ -4,6 +4,7 @@ import { render, screen } from "../utilities/test-utils";
 import DateYearStacked from "./_date_year_stacked";
 
 const TEST_DATE = "01/01/2020 00:00:000 GMT-0500";
+jest.useFakeTimers();
 jest.setSystemTime(new Date(TEST_DATE));
 const testId = "dateyearstacked-kit";
 const realDate = Date;

data/app/pb_kits/playbook/pb_date_year_stacked/kit.schema.json

@@ -37,6 +37,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { DateYearStacked } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_draggable/utilities/touchDrag.ts

@@ -370,6 +370,16 @@ export const bindMousePointerDrag = ({
     event.preventDefault();
     event.stopPropagation();
 
+    // Dropdown: restore pill focus after preventDefault so ArrowLeft/Right work.
+    // Typeahead: leave focus on the search input — focusing the pill blurs it and
+    // react-select closes the menu / clears the query.
+    const pill = itemElement.querySelector<HTMLElement>(
+      '.pb_form_pill_kit, .pb_form_pill_kit_icon',
+    );
+    if (pill && !itemElement.closest('.pb_typeahead_kit')) {
+      pill.focus({ preventScroll: true });
+    }
+
     state.active = true;
     state.startX = event.clientX;
     state.startY = event.clientY;

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -4,6 +4,7 @@
 @import "../tokens/border_radius";
 @import "../tokens/shadows";
 @import "../tokens/positioning";
+@import "../tokens/opacity";
 @import "../pb_body/body_mixins";
 @import "../pb_textarea/textarea_mixin";
 
@@ -536,3 +537,114 @@
   padding: 0;
   pointer-events: auto;
 }
+
+.pb_dropdown_draggable_pills {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0;
+
+  .pb_draggable_item {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    user-select: none;
+    -webkit-user-select: none;
+
+    &.pb_dropdown_drop_before::before,
+    &.pb_dropdown_drop_after::after {
+      content: "";
+      position: absolute;
+      inset-block: 2px;
+      width: 2px;
+      background-color: $primary;
+      border-radius: $border_radius_rounded;
+      pointer-events: none;
+    }
+    &.pb_dropdown_drop_before::before {
+      inset-inline-start: -5px;
+    }
+    &.pb_dropdown_drop_after::after {
+      inset-inline-end: 3px;
+    }
+
+    &:hover {
+      cursor: grab;
+    }
+
+    &.is_dragging {
+      cursor: grabbing;
+    }
+
+    .pb_form_pill_kit_icon,
+    .pb_form_pill_kit_icon * {
+      cursor: grab;
+    }
+    .pb_form_pill_close,
+    .pb_form_pill_close * {
+      cursor: pointer;
+    }
+  }
+
+  &.active .pb_draggable_item > * {
+    pointer-events: none;
+  }
+}
+
+.pb_dropdown_pill_with_handle {
+  display: inline-flex;
+  align-items: center;
+  gap: $space_xxs;
+}
+
+.pb_dropdown_external_drag_handle {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  cursor: grab;
+  user-select: none;
+  color: $text_lighter;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  .pb_dropdown_pill_grip_icon {
+    color: $text_lighter !important;
+  }
+}
+
+.pb_dropdown_draggable_pills,
+.pb_dropdown_pill_drag_preview {
+  .pb_form_pill_kit_icon .pb_form_pill_icon,
+  .pb_form_pill_kit_icon .pb_dropdown_pill_grip_icon {
+    order: -1;
+    color: $text_lighter !important;
+    margin-left: -$space_xs;
+    padding-right: $space_xxs;
+    scale: 0.9;
+  }
+  .pb_form_pill_kit_icon.dark .pb_form_pill_icon,
+  .pb_form_pill_kit_icon.dark .pb_dropdown_pill_grip_icon {
+    color: $text_lighter_dark !important;
+  }
+}
+
+.pb_dropdown_pill_drag_preview {
+  position: fixed;
+  z-index: $z_max;
+  display: inline-flex;
+  align-items: center;
+  opacity: $opacity_5;
+  pointer-events: none;
+
+  .pb_form_pill_kit,
+  .pb_form_pill_kit_icon {
+    box-shadow: $shadow_deep;
+  }
+}
+
+body:has(.pb_dropdown_pill_drag_preview),
+body:has(.pb_dropdown_pill_drag_preview) * {
+  cursor: grabbing !important;
+}