playbook_ui 18.2.0 → 18.3.0.pre.alpha.PLAY3342advancedtablereactmulticolumnselectablerow21082

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

@@ -12,7 +12,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "collapse": {
       "type": "enum",
@@ -62,7 +63,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "filterContent": {
       "type": "any",
@@ -99,7 +101,10 @@
         "lg",
         "xl"
       ],
-      "default": null
+      "default": {
+        "react": "",
+        "rails": null
+      }
     },
     "pagination": {
       "type": "ReactNode",
@@ -132,7 +137,10 @@
         "md",
         "lg"
       ],
-      "default": "md"
+      "default": {
+        "react": "sm",
+        "rails": "md"
+      }
     },
     "sticky": {
       "type": "boolean",
@@ -147,14 +155,16 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": []
     },
     "stickyRightColumn": {
       "type": "array",
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": []
     },
     "striped": {
       "type": "boolean",
@@ -189,7 +199,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "variant": {
       "type": "enum",
@@ -197,10 +208,16 @@
         "react",
         "rails"
       ],
-      "values": [
-        "default",
-        "withFilter"
-      ],
+      "values": {
+        "react": [
+          "default",
+          "withFilter"
+        ],
+        "rails": [
+          "default",
+          "with_filter"
+        ]
+      },
       "default": "default"
     },
     "contrastBorder": {

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

@@ -2,12 +2,15 @@
   "template": "<TextInput{{props}} value={textInputValue} onChange={({ target }) => setTextInputValue(target.value)} />",
   "propTargets": {},
   "defaults": {
+    "dark": false,
     "disabled": false,
     "emojiMask": false,
     "inline": false,
     "required": false,
     "requiredIndicator": false,
     "type": "text",
+    "value": "",
+    "autoComplete": true,
     "addOn": {
       "icon": "user",
       "alignment": "left",

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

@@ -11,7 +11,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "disabled": {
       "type": "boolean",
@@ -64,12 +65,22 @@
         "react",
         "rails"
       ],
-      "values": [
-        "currency",
-        "zipCode",
-        "postalCode",
-        "ssn"
-      ],
+      "values": {
+        "react": [
+          "currency",
+          "zipCode",
+          "postalCode",
+          "ssn"
+        ],
+        "rails": [
+          "currency",
+          "zip_code",
+          "postal_code",
+          "ssn",
+          "credit_card",
+          "cvv"
+        ]
+      },
       "default": null
     },
     "onChange": {
@@ -114,7 +125,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": ""
     },
     "addOn": {
       "type": {
@@ -130,7 +142,8 @@
       "type": "boolean | string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     },
     "autocomplete": {
       "platforms": [

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx

@@ -69,7 +69,10 @@ const Textarea = ({
   rows = 4,
   value,
   ...props
-}: TextareaProps) => {
+}: TextareaProps, _ref: React.ForwardedRef<unknown>) => {
+  // Accept the ref without attaching it, preserving the existing ref behavior.
+  void _ref
+
   const ref = useRef<HTMLTextAreaElement>(null)
   useEffect(() => {
     if (ref.current && resize === 'auto') {

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

@@ -46,10 +46,18 @@
         "react",
         "rails"
       ],
-      "values": [
-        "md",
-        "sm"
-      ],
+      "values": {
+        "react": [
+          "md",
+          "sm"
+        ],
+        "rails": [
+          "xs",
+          "sm",
+          "md",
+          "lg"
+        ]
+      },
       "default": "sm"
     },
     "showTimezone": {
@@ -94,7 +102,7 @@
     },
     "rails": {
       "import": null,
-      "example": "<%= pb_rails(\"time\", props: { align: \"left\", size: \"md\" }) %>"
+      "example": "<%= pb_rails(\"time\", props: { align: \"left\", size: \"xs\" }) %>"
     }
   }
 }

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

@@ -4,6 +4,7 @@
   "defaults": {
     "dark": false,
     "disabled": false,
+    "inputOptions": {},
     "label": "Time Picker",
     "required": false,
     "requiredIndicator": false,

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

@@ -42,7 +42,8 @@
       "platforms": [
         "react",
         "rails"
-      ]
+      ],
+      "default": {}
     },
     "label": {
       "type": "string",

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import DateTime from '../pb_kit/dateTime';
 
@@ -22,7 +23,7 @@ type TimeRangeInlineProps = {
   timezone?: boolean,
   startTime: Date,
   endTime: Date,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 const timezoneString = (dateValue: Date) => {
   return `${DateTime.toTimeZone(dateValue)}`
@@ -91,6 +92,7 @@ const TimeRangeInline = (props: TimeRangeInlineProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classnames('pb_time_range_inline_kit_' + alignment, globalProps(props), className)}
         id={id}
     >

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

@@ -13,11 +13,18 @@
         "react",
         "rails"
       ],
-      "values": [
-        "left",
-        "center",
-        "vertical"
-      ],
+      "values": {
+        "react": [
+          "left",
+          "center",
+          "vertical"
+        ],
+        "rails": [
+          "left",
+          "center",
+          "right"
+        ]
+      },
       "default": "left"
     },
     "size": {
@@ -72,6 +79,7 @@
     }
   },
   "globalProps": true,
+  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { TimeRangeInline } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx

@@ -3,6 +3,7 @@ import classnames from 'classnames'
 
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps } from '../utilities/globalProps'
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import DateTime from '../pb_kit/dateTime';
 
 import Body from '../pb_body/_body'
@@ -18,7 +19,7 @@ type TimeStackedProps = {
   id?: string,
   time?: number | Date,
   timeZone?: string,
-}
+} & GlobalEventProps
 
 const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
   if (props.date) deprecatedProps() //date prop is deprecated, use time instead
@@ -47,6 +48,7 @@ const TimeStackedDefault = (props: TimeStackedProps): React.ReactElement => {
         className={classes}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
     >
       <Body
           className={classnames('pb_time_stacked', 'time-spacing')}

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

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

data/app/pb_kits/playbook/pb_timeline/_item.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildHtmlProps } from '../utilities/props'
 import { globalProps, GlobalProps } from "../utilities/globalProps"
+import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 
 import DateStacked from '../pb_date_stacked/_date_stacked'
 import IconCircle from '../pb_icon_circle/_icon_circle'
@@ -19,7 +20,7 @@ type ItemProps = {
   iconColor?: 'default' | 'royal' | 'blue' | 'purple' | 'teal' | 'red' | 'yellow' | 'green',
   lineStyle?: 'solid' | 'dotted',
   showCurrentYear?: boolean,
-} & GlobalProps
+} & GlobalProps & GlobalEventProps
 
 function isElementOfType<P>(
   element: React.ReactNode,
@@ -67,6 +68,7 @@ const TimelineItem = ({
   return (
     <div
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classnames(timelineItemCss, globalProps(props), className)}
     >
         {labelChild || (

data/app/pb_kits/playbook/pb_timestamp/_timestamp.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 { resolveTimeZone } from './activeSupportTimeZones'
 
@@ -27,7 +28,7 @@ type TimestampProps = {
   showTimezone?: boolean,
   unstyled?: boolean,
   variant?: "default" | "elapsed" | "updated"
-}
+} & GlobalEventProps
 
 const Timestamp = (props: TimestampProps): React.ReactElement => {
   const {
@@ -120,6 +121,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
+        {...globalEventProps(props)}
         className={classes}
     >
       <div className="pb_timestamp_kit">

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

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

data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js

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

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

@@ -61,16 +61,29 @@
         "react",
         "rails"
       ],
-      "values": [
-        "h1",
-        "h2",
-        "h3",
-        "h4",
-        "h5",
-        "h6",
-        "div",
-        "span"
-      ],
+      "values": {
+        "react": [
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "div",
+          "span"
+        ],
+        "rails": [
+          "h1",
+          "h2",
+          "h3",
+          "h4",
+          "h5",
+          "h6",
+          "p",
+          "div",
+          "span"
+        ]
+      },
       "default": "h3"
     },
     "text": {

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

@@ -3,6 +3,7 @@
   "propTargets": {},
   "defaults": {
     "align": "left",
+    "dark": false,
     "size": "sm",
     "count": 1428,
     "title": "Active users"

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

@@ -31,7 +31,8 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "title": {
       "type": "string",

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

@@ -3,7 +3,11 @@
   "propTargets": {},
   "defaults": {
     "useClickToOpen": false,
-    "interaction": false
+    "delay": 0,
+    "interaction": false,
+    "position": "absolute",
+    "showTooltip": true,
+    "forceOpenTooltip": false
   },
   "children": {
     "editable": true,

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

@@ -19,7 +19,8 @@
       "type": "number | Partial<{open: number; close: number}>",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": 0
     },
     "height": {
       "type": "string",
@@ -32,7 +33,8 @@
       "type": "string",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": null
     },
     "interaction": {
       "type": "boolean",
@@ -85,7 +87,8 @@
       "values": [
         "absolute",
         "fixed"
-      ]
+      ],
+      "default": "absolute"
     },
     "text": {
       "type": "string",
@@ -104,13 +107,15 @@
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": true
     },
     "forceOpenTooltip": {
       "type": "boolean",
       "platforms": [
         "react"
-      ]
+      ],
+      "default": false
     },
     "dark": {
       "platforms": [

data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss

@@ -3,6 +3,7 @@
 @import "../tokens/spacing";
 @import "../tokens/shadows";
 @import "../tokens/positioning";
+@import "../tokens/opacity";
 
 .pb_typeahead_kit {
   .typeahead-kit-select__option {
@@ -204,11 +205,31 @@
     gap: 0;
 
     .pb_draggable_item {
+      position: relative;
       display: inline-flex;
       align-items: center;
       user-select: none;
       -webkit-user-select: none;
 
+      // 2px drop line centered in the xs (8px) margin pills keep on their right:
+      // 4px gap center - 1px half line = 3px inside the margin, or 5px before the next pill
+      &.pb_typeahead_drop_before::before,
+      &.pb_typeahead_drop_after::after {
+        content: "";
+        position: absolute;
+        inset-block: 2px;
+        width: 2px;
+        background-color: $primary;
+        border-radius: $border_radius_rounded;
+        pointer-events: none;
+      }
+      &.pb_typeahead_drop_before::before {
+        inset-inline-start: -5px;
+      }
+      &.pb_typeahead_drop_after::after {
+        inset-inline-end: 3px;
+      }
+
       &:hover {
         cursor: grab;
       }
@@ -216,6 +237,22 @@
       &.is_dragging {
         cursor: grabbing;
       }
+
+      // Whole-pill draggable pills (the ones with the grip icon) override Form Pill's pointer cursor
+      .pb_form_pill_kit_icon,
+      .pb_form_pill_kit_icon * {
+        cursor: grab;
+      }
+      .pb_form_pill_close,
+      .pb_form_pill_close * {
+        cursor: pointer;
+      }
+    }
+
+    // While dragging (container is .active), pills skip hover styles but their
+    // wrappers still receive the pointer for drop targeting
+    &.active .pb_draggable_item > * {
+      pointer-events: none;
     }
   }
 
@@ -391,3 +428,39 @@
     }
   }
 }
+
+// Draggable pill grip icon; !important beats Form Pill's dark-mode icon color
+.pb_typeahead_draggable_pills,
+.pb_typeahead_pill_drag_preview {
+  .pb_form_pill_kit_icon .pb_form_pill_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 {
+    color: $text_lighter_dark !important;
+  }
+}
+
+// Ghost that follows the pointer while a pill is dragged
+.pb_typeahead_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;
+  }
+}
+
+// The ghost only exists mid-drag, so keep the grabbing cursor everywhere until drop
+body:has(.pb_typeahead_pill_drag_preview),
+body:has(.pb_typeahead_pill_drag_preview) * {
+  cursor: grabbing !important;
+}