playbook_ui 17.2.0.pre.rc.2 → 18.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 672b9baf425e982f8d59fe03e71b4211cd715c2975de0f0c3a30895201d6b780
-  data.tar.gz: ed5012fd921338fdcc088c046e07e0a44f54b11f61e9921309958307b324fdfa
+  metadata.gz: 1ba21582839d4a05178fc1ea74ca0ad1b8ca652238e4119192fe4c461dcbb9ae
+  data.tar.gz: 453a53b804b46fb84aaa6d9efd1bf1f316b7525633a57134da3d3f4b6b8c46dd
 SHA512:
-  metadata.gz: 8291cbace8ba3b7abebdf73b25d577d4a464fc49b1c8de677c1e990b42409a90e3b59a1b76f11312a7443c45ddb18bae51e481e501e602bfc3c735aa8ff98422
-  data.tar.gz: e1277c1934e5ecd79e9740070ca25dee5966f39916501d5cd257055bb96aaade4fa9d5ed924badab1a53666e725caaaef2644a6ec55393d1f06032cf5b250b6f
+  metadata.gz: 02f76fdc192859f041aa853a8f155c01248c0bf849a00484409ed5154f99dc4f92bb9829bf24da859c5c38bc532108724eda2dcbe1f11edd1ff527eaa89e1826
+  data.tar.gz: 8fa85b1670735641741175e82792867fc72459c5ac1040a5117314a66d2a3ce874c83b017fd4342b56d1d80c5c03c90a23c75629ba15cb74c05240696a2cf6fb

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

@@ -8,7 +8,10 @@
   ],
   "props": {
     "actions": {
-      "type": "React.ReactNode[] | React.ReactNode",
+      "type": {
+        "react": "React.ReactNode[] | React.ReactNode",
+        "rails": "array"
+      },
       "platforms": [
         "react",
         "rails"
@@ -115,7 +118,10 @@
       "default": false
     },
     "loading": {
-      "type": "boolean | string",
+      "type": {
+        "react": "boolean | string",
+        "rails": "boolean"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -14,7 +14,10 @@
       ]
     },
     "backgroundColor": {
-      "type": "enum",
+      "type": {
+        "react": "ResponsiveProp<BackgroundColors> | BackgroundColors",
+        "rails": "enum"
+      },
       "platforms": [
         "react",
         "rails"
@@ -85,7 +88,10 @@
       "default": "light"
     },
     "backgroundSize": {
-      "type": "enum",
+      "type": {
+        "react": "ResponsiveProp<BackgroundSizes> | BackgroundSizes",
+        "rails": "enum"
+      },
       "platforms": [
         "react",
         "rails"
@@ -98,7 +104,10 @@
       "default": "cover"
     },
     "backgroundPosition": {
-      "type": "ResponsiveProp<string> | string",
+      "type": {
+        "react": "ResponsiveProp<string> | string",
+        "rails": "string"
+      },
       "platforms": [
         "react",
         "rails"
@@ -106,7 +115,10 @@
       "default": null
     },
     "backgroundRepeat": {
-      "type": "enum",
+      "type": {
+        "react": "ResponsiveProp<BackgroundRepeat> | BackgroundRepeat",
+        "rails": "enum"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -8,7 +8,10 @@
   ],
   "props": {
     "background": {
-      "type": "enum",
+      "type": {
+        "react": "BackgroundColors | ProductColors | \"none\"",
+        "rails": "enum"
+      },
       "platforms": [
         "react",
         "rails"

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.jsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/no-multi-comp */
-import React, { useMemo, useState } from 'react'
+import React, { useState } from 'react'
 
 import DatePicker from '../_date_picker'
 import Body from '../../pb_body/_body'
@@ -11,26 +11,22 @@ DEFAULT_DATE.setMinutes(0)
 const DatePickerTime = (props) => {
   const [selectedDateTime, setSelectedDateTime] = useState(DEFAULT_DATE)
 
-  const refExample = React.createRef()
-
-  const handleOnInputChanged = (dateTime) => {
-    setSelectedDateTime(dateTime)
+  const handleOnClose = (selectedDates) => {
+    setSelectedDateTime(selectedDates[0])
   }
 
   return (
-    <div ref={refExample}>
-      <Body marginBottom="md">{selectedDateTime.toString()}</Body>
-      {useMemo(() => (
-        <DatePicker
-            closeOnSelect={false}
-            defaultDate={DEFAULT_DATE}
-            enableTime
-            onChange={handleOnInputChanged}
-            pickerId="date-picker-time"
-            showTimezone
-            {...props}
-        />
-      ), [props])}
+    <div>
+      <Body marginBottom="md">{selectedDateTime ? selectedDateTime.toString() : ''}</Body>
+      <DatePicker
+          defaultDate={DEFAULT_DATE}
+          enableTime
+          initializeOnce
+          onClose={handleOnClose}
+          pickerId="date-picker-time"
+          showTimezone
+          {...props}
+      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_time.md

@@ -1 +1,3 @@
-To select time as well, you should pass the `enableTime` boolean prop. You can also enable timezone display by passing `showTimezone`.
+To select time as well, you should pass the `enableTime` / `enable_time` boolean prop. You can also enable timezone display by passing `showTimezone` / `show_timezone`.
+
+Use `onClose` when the calendar should stay open while the user picks both a date and a time. It fires once, after the user clicks outside to close the calendar, instead of on every selection the way `onChange` does. For React, pair the handler with `initializeOnce` so storing the value in state does not re-initialize the picker and reset the input back to `defaultDate`.

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

@@ -189,7 +189,10 @@
       "default": "Select Date"
     },
     "positionElement": {
-      "type": "HTMLElement | null",
+      "type": {
+        "react": "HTMLElement | null",
+        "rails": "string"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -53,7 +53,10 @@
       "default": false
     },
     "customQuickPickDates": {
-      "type": "CustomQuickPickDates",
+      "type": {
+        "react": "CustomQuickPickDates",
+        "rails": "GenericObject"
+      },
       "platforms": [
         "react",
         "rails"
@@ -122,7 +125,10 @@
       ]
     },
     "options": {
-      "type": "GenericObject",
+      "type": {
+        "react": "GenericObject",
+        "rails": "array"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -8,7 +8,10 @@
   ],
   "props": {
     "accept": {
-      "type": "GenericObject",
+      "type": {
+        "react": "GenericObject",
+        "rails": "string"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -22,7 +22,10 @@
       ]
     },
     "filters": {
-      "type": "GenericObject",
+      "type": {
+        "react": "GenericObject",
+        "rails": "array"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -58,7 +58,10 @@
       "default": "street"
     },
     "homeId": {
-      "type": "string",
+      "type": {
+        "react": "string",
+        "rails": "number"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -8,7 +8,10 @@
   ],
   "props": {
     "border": {
-      "type": "enum",
+      "type": {
+        "react": "boolean | BorderPropValue",
+        "rails": "enum"
+      },
       "platforms": [
         "react",
         "rails"
@@ -34,7 +37,10 @@
       ]
     },
     "customIcon": {
-      "type": "GenericObject",
+      "type": {
+        "react": "GenericObject",
+        "rails": "string"
+      },
       "platforms": [
         "react",
         "rails"

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

@@ -6,10 +6,7 @@
     "full": false,
     "position": "left",
     "responsive": false,
-    "size": {
-      "react": "sm",
-      "rails": "md"
-    },
+    "size": "sm",
     "variant": "light",
     "transparent": false,
     "layout": "sidebar"

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

@@ -78,7 +78,10 @@
       "default": "America/New_York"
     },
     "alignTimestamp": {
-      "type": "enum",
+      "type": {
+        "react": "string",
+        "rails": "enum"
+      },
       "platforms": [
         "react",
         "rails"

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -49,12 +49,19 @@ interface MultiLevelSelectComponent extends React.ForwardRefExoticComponent<
   Options: typeof MultiLevelSelectOptions;
 }
 
+type MultiLevelSelectItem = { [key: string]: any };
+type SelectedDisplayContext = {
+  ancestors: MultiLevelSelectItem[];
+  path: MultiLevelSelectItem[];
+};
+
 type MultiLevelSelectProps = {
   aria?: { [key: string]: string };
   className?: string;
   data?: { [key: string]: string };
   disabled?: boolean;
   error?: string;
+  formatSelectedDisplay?: (item: MultiLevelSelectItem, context: SelectedDisplayContext) => string;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
   inputDisplay?: "pills" | "none";
@@ -105,6 +112,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       data = {},
       disabled = false,
       error,
+      formatSelectedDisplay,
       htmlOptions = {},
       id,
       inputDisplay = "pills",
@@ -175,6 +183,26 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
       item: [],
     });
 
+    const getSelectedDisplay = (
+      item: MultiLevelSelectItem,
+      data: MultiLevelSelectItem[],
+    ) => {
+      const ancestors: MultiLevelSelectItem[] = [];
+      let parentId = item.parent_id;
+
+      while (parentId) {
+        const parent = filterFormattedDataById(data, parentId)[0];
+        if (!parent) break;
+
+        ancestors.unshift(parent);
+        parentId = parent.parent_id;
+      }
+
+      return formatSelectedDisplay
+        ? formatSelectedDisplay(item, { ancestors, path: [...ancestors, item] })
+        : item.label;
+    };
+
     const arrowDownElementId = `arrow_down_${id}`;
     const arrowUpElementId = `arrow_up_${id}`;
     // Control id for label htmlFor: use suffix to avoid conflict with outer div's id
@@ -771,7 +799,9 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
                       : placeholderText
                   }
                     required={required}
-                    value={singleSelectedItem.value || filterItem}
+                    value={singleSelectedItem.item.length
+                      ? getSelectedDisplay(singleSelectedItem.item[0], formattedData)
+                      : singleSelectedItem.value || filterItem}
                 />
               </div>
 

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_format_selected_display.jsx

@@ -0,0 +1,191 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq1",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl1",
+    expanded: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL1",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL1",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL1",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj1",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj11",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ1",
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ1",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ1",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton1",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR1",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR1",
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR1",
+          },
+        ]
+      },
+    ]
+  },
+];
+
+const treeData2 = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    expanded: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj22",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+              id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+];
+
+const MultiLevelSelectFormatSelectedDisplay = (props) => (
+  <>
+  <MultiLevelSelect
+      formatSelectedDisplay={(_, { path }) =>
+        path.map(({ label }) => label).join(" / ")
+      }
+      treeData={treeData}
+      variant="single"
+      {...props}
+  />
+  <br />
+  <MultiLevelSelect
+      formatSelectedDisplay={(item, { ancestors }) => {
+      const parent = ancestors[ancestors.length - 1];
+      return parent ? `${item.label} (${parent.label})` : item.label;
+    }}
+      treeData={treeData2}
+      variant="single"
+      {...props}
+  />
+  </>
+);
+
+export default MultiLevelSelectFormatSelectedDisplay;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_format_selected_display.md

@@ -0,0 +1 @@
+Use `formatSelectedDisplay` to customize the string shown in the input after a single-select option is chosen. The formatter receives the selected item and a context object containing `ancestors` (ordered from the root through the immediate parent) and `path` (the ancestors plus the selected item). This changes only the displayed string; selection callbacks and form values remain unchanged.

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

@@ -31,7 +31,8 @@
         "name",
         "placeholder",
         "selectedIds",
-        "inputName"
+        "inputName",
+        "formatSelectedDisplay"
       ]
     },
     {
@@ -48,7 +49,8 @@
       "props": [
         "inputDisplay",
         "variant",
-        "wrapped"
+        "wrapped",
+        "pillColor"
       ]
     },
     {
@@ -92,6 +94,20 @@
         "onSelect": "(selectedNode) => console.log('Selected Node', selectedNode)"
       }
     },
+    {
+      "name": "Custom Single Select Display",
+      "structureMode": "standard",
+      "props": {
+        "variant": "single",
+        "label": "Pick one team",
+        "placeholder": "Choose...",
+        "selectedIds": [
+          "initiative1"
+        ],
+        "formatSelectedDisplay": "(_, { path }) => path.map(({ label }) => label).join(' / ')",
+        "onSelect": "(selectedNode) => console.log('Selected Node', selectedNode)"
+      }
+    },
     {
       "name": "Selected IDs",
       "structureMode": "standard",
@@ -246,6 +262,11 @@
     }
   ],
   "conditionals": {
+    "formatSelectedDisplay": {
+      "requires": {
+        "variant": "single"
+      }
+    },
     "requiredIndicator": {
       "requires": "label"
     }
@@ -266,6 +287,11 @@
       "message": "Single Select uses radios and should receive at most one selectedIds value because only one node can be selected.",
       "type": "info"
     },
+    "custom_single_select_display": {
+      "presetName": "Custom Single Select Display",
+      "message": "formatSelectedDisplay receives the selected item plus ancestors and path context, and must return the string shown in the single-select input. Edit the function in Content to choose which hierarchy details to display.",
+      "type": "info"
+    },
     "selected_ids": {
       "presetName": "Selected IDs",
       "message": "selectedIds checks matching treeData node ids on load. In multi mode, multiple ids can be passed.",
@@ -319,6 +345,9 @@
     "editable": false,
     "default": ""
   },
+  "editableFunctionProps": [
+    "formatSelectedDisplay"
+  ],
   "customProps": {
     "treeData": {
       "type": "array",

data/app/pb_kits/playbook/pb_multi_level_select/docs/_playground.overrides.json

@@ -16,6 +16,9 @@
     "editable": false,
     "default": ""
   },
+  "editableFunctionProps": [
+    "formatSelectedDisplay"
+  ],
   "customProps": {
     "treeData": {
       "type": "array",
@@ -135,7 +138,8 @@
         "name",
         "placeholder",
         "selectedIds",
-        "inputName"
+        "inputName",
+        "formatSelectedDisplay"
       ]
     },
     {
@@ -152,7 +156,8 @@
       "props": [
         "inputDisplay",
         "variant",
-        "wrapped"
+        "wrapped",
+        "pillColor"
       ]
     },
     {
@@ -196,6 +201,20 @@
         "onSelect": "(selectedNode) => console.log('Selected Node', selectedNode)"
       }
     },
+    {
+      "name": "Custom Single Select Display",
+      "structureMode": "standard",
+      "props": {
+        "variant": "single",
+        "label": "Pick one team",
+        "placeholder": "Choose...",
+        "selectedIds": [
+          "initiative1"
+        ],
+        "formatSelectedDisplay": "(_, { path }) => path.map(({ label }) => label).join(' / ')",
+        "onSelect": "(selectedNode) => console.log('Selected Node', selectedNode)"
+      }
+    },
     {
       "name": "Selected IDs",
       "structureMode": "standard",
@@ -350,6 +369,11 @@
     }
   ],
   "conditionals": {
+    "formatSelectedDisplay": {
+      "requires": {
+        "variant": "single"
+      }
+    },
     "requiredIndicator": {
       "requires": "label"
     }
@@ -370,6 +394,11 @@
       "message": "Single Select uses radios and should receive at most one selectedIds value because only one node can be selected.",
       "type": "info"
     },
+    "custom_single_select_display": {
+      "presetName": "Custom Single Select Display",
+      "message": "formatSelectedDisplay receives the selected item plus ancestors and path context, and must return the string shown in the single-select input. Edit the function in Content to choose which hierarchy details to display.",
+      "type": "info"
+    },
     "selected_ids": {
       "presetName": "Selected IDs",
       "message": "selectedIds checks matching treeData node ids on load. In multi mode, multiple ids can be passed.",