playbook_ui 17.2.0.pre.rc.2 → 17.2.0.pre.rc.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 672b9baf425e982f8d59fe03e71b4211cd715c2975de0f0c3a30895201d6b780
-  data.tar.gz: ed5012fd921338fdcc088c046e07e0a44f54b11f61e9921309958307b324fdfa
+  metadata.gz: b7287af0b8d2bde74e68c570b2997cae4eccb91cd0e6091b3323cb168fe79b9a
+  data.tar.gz: 35a49a7c94cfa00b247e687ee9766f6668ab3e15364a9f975d7b3e1c03c48242
 SHA512:
-  metadata.gz: 8291cbace8ba3b7abebdf73b25d577d4a464fc49b1c8de677c1e990b42409a90e3b59a1b76f11312a7443c45ddb18bae51e481e501e602bfc3c735aa8ff98422
-  data.tar.gz: e1277c1934e5ecd79e9740070ca25dee5966f39916501d5cd257055bb96aaade4fa9d5ed924badab1a53666e725caaaef2644a6ec55393d1f06032cf5b250b6f
+  metadata.gz: a1ee4f80a2e9a88affce23654cd842e4c2a8e25de724d74b9a2836073cb9fda8048cc245d2f755ba3d43c79de0b479a6cb39bde761bea22dc22fe9c63ef3a316
+  data.tar.gz: 91ad77dd27483c9f3f91568a5ad3c8161f69f8aa72c6a71c196f93914cf34aa55292d0b90b3f71b13446b831592a8ae5dcfc5327e9ddeb4a5d11aa45ebcb656c

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.",

data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml

@@ -24,6 +24,7 @@ examples:
     - multi_level_select_default: Default
     - multi_level_select_react_hook: React Hook
     - multi_level_select_single: Single Select
+    - multi_level_select_format_selected_display: Custom Single Select Display
     - multi_level_select_single_children_only: Single Select w/ Hidden Radios
     - multi_level_select_return_all_selected: Return All Selected
     - multi_level_select_input_display: With Input Display None

data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js

@@ -1,5 +1,6 @@
 export { default as MultiLevelSelectDefault } from "./_multi_level_select_default.jsx"
 export { default as MultiLevelSelectSingle } from "./_multi_level_select_single.jsx"
+export { default as MultiLevelSelectFormatSelectedDisplay } from "./_multi_level_select_format_selected_display.jsx"
 export { default as MultiLevelSelectSingleChildrenOnly } from "./_multi_level_select_single_children_only.jsx"
 export { default as MultiLevelSelectReturnAllSelected } from "./_multi_level_select_return_all_selected.jsx"
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"

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

@@ -23,6 +23,12 @@
       ],
       "default": ""
     },
+    "formatSelectedDisplay": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
     "inputDisplay": {
       "type": "enum",
       "platforms": [

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.test.jsx

@@ -384,8 +384,47 @@ describe('MultiLevelSelect single variant', () => {
 
     expect(input.value).toBe('Power Home Remodeling')
   })
+
+  test('should format the selected input display with hierarchy context', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          formatSelectedDisplay={(item, { path }) =>
+            path.map(({ label }) => label).join(' / ')
+          }
+          treeData={treeData}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+    fireEvent.click(input)
+    fireEvent.click(kit.querySelector('#people1'))
+
+    expect(input.value).toBe('Power Home Remodeling / People')
+  })
+
+  test('should format the selected input display from selectedIds', () => {
+    render(
+      <MultiLevelSelect
+          data={{ testid: testId }}
+          formatSelectedDisplay={(item, { ancestors }) => {
+            const parent = ancestors[ancestors.length - 1]
+            return `${parent.label}: ${item.label}`
+          }}
+          selectedIds={['talent1']}
+          treeData={treeData}
+          variant="single"
+      />
+    )
+    const kit = screen.getByTestId(testId)
+    const input = kit.querySelector('#multiselect_input')
+
+    expect(input.value).toBe('People: Talent Acquisition')
+  })
 })
 
+
 describe('MultiLevelSelect disabled parent behavior', () => {
   test('children of disabled parent should also be disabled in single variant', () => {
     render(
@@ -833,4 +872,3 @@ describe('PbMultiLevelSelect Rails enhanced element', () => {
     expect(element.querySelectorAll('.dropdown_item').length).toBeGreaterThan(0)
   })
 })
-

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx

@@ -8,6 +8,7 @@ import Nav from '../../pb_nav/_nav'
 import NavItem from '../../pb_nav/_item'
 
 import { ToolbarTypes } from './EditorTypes'
+import { normalizeListSelection } from './listSelection'
 
 const ToolbarDropdown = ({editor}: any): React.ReactElement => {
   const [showPopover, setShowPopover] = useState(false)
@@ -46,14 +47,20 @@ const toolbarDropdownItems = [
         icon: "list",
         isActive: editor.isActive("bulletList"),
         text: "Bullet List",
-        onclick: () => editor.chain().focus().toggleBulletList().run(),
+        onclick: () => {
+          normalizeListSelection(editor)
+          editor.chain().focus().toggleBulletList().run()
+        },
     },
     {
         node: "orderedList",
         icon: "list-ol",
         isActive: editor.isActive("orderedList"),
         text: "Ordered List",
-        onclick: () =>   editor.chain().focus().toggleOrderedList().run()
+        onclick: () => {
+          normalizeListSelection(editor)
+          editor.chain().focus().toggleOrderedList().run()
+        }
         ,
     },
     {

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/listSelection.ts

@@ -0,0 +1,59 @@
+import { Editor } from "@tiptap/core"
+
+type ListSelection = { from: number, to: number } | null
+
+const getNormalizedListSelection = (editor: Editor): ListSelection => {
+  const { selection } = editor.state
+
+  if (selection.empty) return null
+
+  const { $from, $to } = selection
+  let { from, to } = selection
+
+  if (
+    $from.depth > 0 &&
+    $from.parent.isTextblock &&
+    $from.parentOffset === $from.parent.content.size
+  ) {
+    const nextBlockStart = $from.after($from.depth) + 1
+    if (nextBlockStart < to) from = nextBlockStart
+  }
+
+  if (
+    $to.depth > 0 &&
+    $to.parent.isTextblock &&
+    $to.parentOffset === 0
+  ) {
+    const previousBlockEnd = $to.before($to.depth) - 1
+    if (previousBlockEnd > from) to = previousBlockEnd
+  }
+
+  return from === selection.from && to === selection.to ? null : { from, to }
+}
+
+const normalizeListSelection = (editor: Editor): void => {
+  const initialSelection = editor.state.selection
+
+  if (
+    !initialSelection.empty &&
+    initialSelection.$from.nodeBefore?.type.name === "hardBreak"
+  ) {
+    const selectedSize = initialSelection.to - initialSelection.from
+    const breakPosition = initialSelection.from - 1
+
+    editor.chain()
+      .deleteRange({ from: breakPosition, to: initialSelection.from })
+      .setTextSelection(breakPosition)
+      .splitBlock()
+      .run()
+
+    const from = editor.state.selection.from
+    editor.commands.setTextSelection({ from, to: from + selectedSize })
+  }
+
+  const selection = getNormalizedListSelection(editor)
+
+  if (selection) editor.commands.setTextSelection(selection)
+}
+
+export { getNormalizedListSelection, normalizeListSelection }

data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/markdownPaste.ts

@@ -0,0 +1,100 @@
+const NEUTRAL_CLIPBOARD_TAGS = new Set(["html", "head", "body", "meta", "div", "span", "p"])
+const MARKDOWN_SOURCE_TAGS = new Set([...NEUTRAL_CLIPBOARD_TAGS, "pre", "code"])
+
+type MarkdownJSONNode = {
+  content?: MarkdownJSONNode[],
+  marks?: unknown[],
+  type: string,
+}
+
+type MarkdownDocumentNode = {
+  content: unknown,
+  toJSON: () => MarkdownJSONNode,
+  type: { schema: unknown },
+}
+
+type MarkdownParser = {
+  parse: (text: string) => MarkdownDocumentNode | null,
+}
+
+type MarkdownDOMSerializer = {
+  fromSchema: (schema: unknown) => {
+    serializeFragment: (content: unknown) => DocumentFragment,
+  },
+}
+
+type MarkdownDependencies = {
+  parser: MarkdownParser,
+  serializer: MarkdownDOMSerializer,
+}
+
+const hasRichTextFormatting = (html: string, text: string): boolean => {
+  if (!html) return false
+
+  const clipboardDocument = new DOMParser().parseFromString(html, "text/html")
+  const elements = [...clipboardDocument.querySelectorAll("*")]
+  const hasStyledElement = elements.some((element) => element.hasAttribute("style"))
+  if (hasStyledElement) return true
+
+  const hasOnlyNeutralTags = elements.every((element) =>
+    NEUTRAL_CLIPBOARD_TAGS.has(element.tagName.toLowerCase())
+  )
+  if (hasOnlyNeutralTags) return false
+
+  const hasOnlyMarkdownSourceTags = elements.every((element) =>
+    MARKDOWN_SOURCE_TAGS.has(element.tagName.toLowerCase())
+  )
+  const sourceTextMatches = clipboardDocument.body.textContent?.trim() === text.trim()
+  return !(hasOnlyMarkdownSourceTags && sourceTextMatches)
+}
+
+const hasMarkdownFormatting = (node: MarkdownJSONNode): boolean => {
+  const isFormattedNode = !["doc", "paragraph", "text"].includes(node.type)
+  if (isFormattedNode || node.marks?.length) return true
+
+  return node.content?.some(hasMarkdownFormatting) || false
+}
+
+const createMarkdownToHTML = (
+  markdownParser: MarkdownParser,
+  domSerializer: MarkdownDOMSerializer
+) => (text: string): string | null => {
+  const documentNode = markdownParser.parse(text)
+  if (!documentNode || !hasMarkdownFormatting(documentNode.toJSON())) return null
+
+  const container = document.createElement("div")
+  const serializer = domSerializer.fromSchema(documentNode.type.schema)
+  container.appendChild(serializer.serializeFragment(documentNode.content))
+  container.querySelectorAll("[data-tight]").forEach((node) => node.removeAttribute("data-tight"))
+
+  return container.innerHTML
+}
+
+const handleMarkdownPaste = (
+  event: ClipboardEvent,
+  insertHTML: (html: string) => void,
+  markdownToHTML: (text: string) => string | null
+): boolean => {
+  const text = event.clipboardData?.getData("text/plain")
+  const richHtml = event.clipboardData?.getData("text/html")
+  if (!text || hasRichTextFormatting(richHtml, text)) return false
+
+  let html
+  try {
+    html = markdownToHTML(text)
+  } catch (_error) {
+    return false
+  }
+  if (!html) return false
+
+  event.preventDefault()
+  event.stopImmediatePropagation()
+  insertHTML(html)
+  return true
+}
+
+export {
+  createMarkdownToHTML,
+  handleMarkdownPaste,
+}
+export type { MarkdownDependencies }