playbook_ui 18.3.0.pre.rc.0 → 18.3.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88b3c7acb984d6ec746498490e23eb8d4331520919cc6c3e609e9fff446bdaa3
-  data.tar.gz: 2d681d215b4fb8d8c0059779981325e75289915e5ffa4df4a1a76f03c5327e3f
+  metadata.gz: 8582fa63726a34ad01ae22c73948ace36979ee0b5d3a2f6a362309826689f963
+  data.tar.gz: 657c7f4fcc9819b0dec67daaab5cca1c11bc3cd8948374bc462ea287d72fe57e
 SHA512:
-  metadata.gz: ba772fd2326b5e74beabc4a8a36d99b3e85abaf3fdfa961b0768e59f5742b22fab17b994a53e32ce914d952f332d0ac430af15dd06f5b7f2a09beba8fa9881ea
-  data.tar.gz: f687567b001ed365e906da885b8528d2baf542e4e0f752ee98e7dc3a87d48f4e9b2e563d302afbb843a558eadd7bc50f7763bf1bc2a703f7b16d347b51c7123b
+  metadata.gz: 2598b3eea96f74b461e103e443895c80e9372ebf6dde222dca8efd6d1d9b7900f7ad3b69a48e4c80e98fb8036e1105cd344e619f2131e877477b52b929a1f4ed
+  data.tar.gz: 1cdd22957b2083b97d80ab7591d5441e18d43eb42a734ea33b06edd4365117d42d1b9fc1a112d33aea8cca06de775d95eaa9fa59dd5518b66f2c392c66ff99b4

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_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_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/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_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/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/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/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;
+}