playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

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

@@ -51,7 +51,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": null
     },
     "disableInput": {
       "type": "boolean",
@@ -66,14 +67,16 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": null
     },
     "disableWeekdays": {
       "type": "array",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": null
     },
     "enableTime": {
       "type": "boolean",
@@ -118,27 +121,31 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "inLine": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "inputAria": {
       "type": "GenericObject",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "inputData": {
       "type": "GenericObject",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "inputOnChange": {
       "type": "function",
@@ -227,12 +234,23 @@
         "react",
         "rails"
       ],
-      "values": [
-        "month",
-        "week",
-        "quickpick"
-      ],
-      "default": "none"
+      "values": {
+        "react": [
+          "month",
+          "week",
+          "quickpick"
+        ],
+        "rails": [
+          "week",
+          "month",
+          "quickpick",
+          "none"
+        ]
+      },
+      "default": {
+        "react": "",
+        "rails": "none"
+      }
     },
     "showTimezone": {
       "type": "boolean",
@@ -410,7 +428,7 @@
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"date_picker\", props: { selection_type: \"month\" }) %>"
+      "example": "<%= pb_rails(\"date_picker\", props: { selection_type: \"week\" }) %>"
     }
   }
 }

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/docs/_playground.json

@@ -4,6 +4,7 @@
   "defaults": {
     "align": "left",
     "dark": false,
+    "icon": false,
     "size": "sm",
     "showCurrentYear": false
   },

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

@@ -40,7 +40,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": false
     },
     "size": {
       "type": "enum",
@@ -71,6 +72,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/docs/_playground.json

@@ -6,7 +6,8 @@
     "size": "md",
     "showCurrentYear": false,
     "showDayOfWeek": false,
-    "showIcon": false
+    "showIcon": false,
+    "timeZone": "America/New_York"
   },
   "groups": [
     {

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

@@ -66,7 +66,8 @@
       "type": "string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": "America/New_York"
     },
     "date": {
       "platforms": [
@@ -90,6 +91,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/docs/_playground.json

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "dark": false,
+    "timeZone": "America/New_York",
     "showCurrentYear": false
   },
   "groups": [

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

@@ -32,7 +32,8 @@
       "type": "string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": "America/New_York"
     },
     "showCurrentYear": {
       "type": "boolean",
@@ -57,6 +58,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_detail/docs/_playground.json

@@ -4,7 +4,8 @@
   "defaults": {
     "bold": false,
     "color": "light",
-    "tag": "div"
+    "tag": "div",
+    "text": ""
   },
   "children": {
     "editable": true,

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

@@ -61,7 +61,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     }
   },
   "globalProps": true,

data/app/pb_kits/playbook/pb_dialog/docs/_playground.json

@@ -4,10 +4,10 @@
   "defaults": {
     "closeable": true,
     "fullHeight": false,
+    "loading": false,
     "placement": "center",
     "shouldCloseOnOverlayClick": true,
     "size": "md",
-    "status": "",
     "title": "Header Title is the Title Prop",
     "text": "Hello Body Text, Nice to meet ya."
   },

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

@@ -42,7 +42,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": false
     },
     "onCancel": {
       "type": "function",
@@ -123,14 +124,26 @@
         "react",
         "rails"
       ],
-      "values": [
-        "info",
-        "caution",
-        "delete",
-        "error",
-        "success"
-      ],
-      "default": ""
+      "values": {
+        "react": [
+          "info",
+          "caution",
+          "delete",
+          "error",
+          "success"
+        ],
+        "rails": [
+          "info",
+          "caution",
+          "delete",
+          "error",
+          "success",
+          "default"
+        ]
+      },
+      "default": {
+        "rails": ""
+      }
     },
     "text": {
       "type": "string",

data/app/pb_kits/playbook/pb_distribution_bar/docs/_playground.json

@@ -2,12 +2,12 @@
   "template": "<DistributionBar{{props}} />",
   "propTargets": {},
   "defaults": {
-    "size": "lg",
     "colors": [
       "data_7",
       "data_1",
       "neutral"
-    ]
+    ],
+    "size": "lg"
   },
   "groups": [
     {

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

@@ -12,7 +12,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": []
     },
     "size": {
       "type": "enum",

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