playbook_ui 16.3.0.pre.alpha.play274314785 → 16.3.0.pre.alpha.play283714716

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 401ad87164675d7ba82055bc775edb0d00fb5919b33572f92eb6a33e5189e1ec
-  data.tar.gz: 4618f042a89e4c2b2bff1ad36a24b86f86c3c5caa8a3652753f150588f1493d4
+  metadata.gz: 8268fd29b4cb73ceb2b1795a9edbb7d0775c8eb2fac019ea89c04fd2e2866653
+  data.tar.gz: eeaa290965d1ee98aa32555672688a89f98f3fa4b410542cd260c8f5dc7c1042
 SHA512:
-  metadata.gz: b9505991c35886449f39d2d9d8d9b1f5d4410ca1fa7f5552454a5255eb96a2c49da2d0a79abcb0fb67aab38baa8e4bedfebcc2a07a418013018e3363f67e0f46
-  data.tar.gz: f9016211d8ec4dde9944d3b00b984e7d5f0f5150b85f5cdbebd22b11a573031f190f46f3cfb0c55fd0d89ac91a881af0317a3a199a1a0fa0805167a1ae7903c3
+  metadata.gz: 8b5074ed6659ec809ada0af5455c4a93fa2ddb889e314eb9f5f94eb2a8a6989d5c046ebadf5f60527f0be5a78178243cbcefa3e76251de23c06413d1df1c4bea
+  data.tar.gz: 6f1716a0201cbf67b4a87d123f32efa30bef8116709f7dad382c12affe58734301cc2756c3a833e8162c7150869344e9c80a84c51cc942f4959f5f4036eaf31e

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -11,7 +11,6 @@ import Icon from "../../pb_icon/_icon"
 import Checkbox from "../../pb_checkbox/_checkbox"
 
 import AdvancedTableContext from "../Context/AdvancedTableContext"
-import { getDescendantRowIds } from "../Utilities/ExpansionControlHelpers"
 
 interface CustomCellProps {
   getValue?: Getter<string>
@@ -32,25 +31,13 @@ export const CustomCell = ({
   selectableRows,
   customStyle = {},
 }: CustomCellProps & GlobalProps) => {
-  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows, cascadeCollapse } = useContext(AdvancedTableContext);
+  const { setExpanded, expanded, expandedControl, inlineRowLoading, hasAnySubRows } = useContext(AdvancedTableContext);
 
   const handleOnExpand = (row: Row<GenericObject>) => {
     onRowToggleClick && onRowToggleClick(row);
-
-    const willBeExpanded = !row.getIsExpanded();
-    if (willBeExpanded) {
-      if (!expandedControl) {
-        setExpanded({ ...expanded, [row.id]: true });
-      }
-    } else {
-      if (cascadeCollapse) {
-        const idsToRemove = new Set([row.id, ...getDescendantRowIds(row)]);
-        const nextExpanded = { ...expanded };
-        idsToRemove.forEach((id) => delete nextExpanded[id]);
-        setExpanded(nextExpanded);
-      } else if (!expandedControl) {
-        setExpanded({ ...expanded, [row.id]: false });
-      }
+    
+    if (!expandedControl) {
+      setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
     }
   };
 

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -63,7 +63,6 @@ export const TableHeaderCell = ({
     stickyLeftColumn,
     inlineRowLoading,
     isActionBarVisible,
-    cascadeCollapse,
   } = useContext(AdvancedTableContext);
 
   type justifyTypes = "none" | "center" | "start" | "end" | "between" | "around" | "evenly"
@@ -183,8 +182,7 @@ const isToggleExpansionEnabled =
       table.getRowModel(),
       expanded,
       undefined,
-      depth,
-      cascadeCollapse
+      depth
     )
     setExpanded(updated)
   }

data/app/pb_kits/playbook/pb_advanced_table/Hooks/useTableActions.ts

@@ -12,7 +12,6 @@ interface UseTableActionsProps {
   inlineRowLoading?: boolean;
   localPagination?: { pageIndex: number; pageSize: number };
   setLocalPagination?: (pagination: { pageIndex: number; pageSize: number }) => void;
-  cascadeCollapse?: boolean;
 }
 
 export function useTableActions({
@@ -23,8 +22,7 @@ export function useTableActions({
   onRowSelectionChange,
   inlineRowLoading = false,
   localPagination,
-  setLocalPagination,
-  cascadeCollapse = false
+  setLocalPagination
 }: UseTableActionsProps) {
 
   // State to achieve 1 second delay before fetching more rows
@@ -34,25 +32,15 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     if (onToggleExpansionClick) onToggleExpansionClick(row)
+      const updatedExpandedState = await updateExpandAndCollapseState(
+        table.getRowModel(),
+        expanded,
+        row?.parentId,
+        undefined
+      )
 
-    const anyTopLevelExpanded = table.getRowModel().rows.some((r: Row<GenericObject>) => r.getIsExpanded())
-    const isHeaderCollapseAll = row == null && anyTopLevelExpanded
-
-    if (cascadeCollapse && isHeaderCollapseAll) {
-      setExpanded({})
-      return
-    }
-
-    const updatedExpandedState = await updateExpandAndCollapseState(
-      table.getRowModel(),
-      expanded,
-      row?.parentId,
-      undefined,
-      cascadeCollapse
-    )
-
-    setExpanded(updatedExpandedState)
-  }, [expanded, setExpanded, onToggleExpansionClick, table, cascadeCollapse]);
+      setExpanded(updatedExpandedState)
+  }, [expanded, setExpanded, onToggleExpansionClick, table]);
 
   // Handle pagination
   const onPageChange = useCallback((page: number) => {

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -11,21 +11,11 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
   return expandedState
 }
 
-export const getDescendantRowIds = (row: Row<GenericObject>): string[] => {
-  const ids: string[] = []
-  for (const sub of row.subRows || []) {
-    ids.push(sub.id)
-    ids.push(...getDescendantRowIds(sub))
-  }
-  return ids
-}
-
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
   targetParent?: string,
   targetDepth?: number,
-  cascadeCollapse?: boolean,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
   const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
@@ -61,22 +51,8 @@ export const updateExpandAndCollapseState = (
     }
   }
 
-  const updatedExpandedState = filterExpandableRows({
+  return filterExpandableRows({
     ...(expanded as ExpandedStateObject),
     ...updateExpandedRows,
   });
-
-  if (cascadeCollapse && !isExpandAction) {
-    const idsToRemove = new Set<string>();
-    for (const row of rowsToToggle) {
-      const shouldUpdate =
-        targetDepth === undefined ? true : row.depth === targetDepth;
-      if (shouldUpdate) {
-        getDescendantRowIds(row).forEach((id) => idsToRemove.add(id));
-      }
-    }
-    idsToRemove.forEach((id) => delete updatedExpandedState[id]);
-  }
-
-  return updatedExpandedState;
 };

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -31,7 +31,6 @@ type FullscreenControls = {
 type AdvancedTableProps = {
   aria?: { [key: string]: string }
   actions?: React.ReactNode[] | React.ReactNode
-  cascadeCollapse?: boolean
   children?: React.ReactNode | React.ReactNode[]
   className?: string
   columnDefinitions: GenericObject[]
@@ -81,7 +80,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const {
     aria = {},
     actions,
-    cascadeCollapse = false,
     children,
     className,
     columnDefinitions,
@@ -175,8 +173,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     onRowSelectionChange,
     inlineRowLoading,
     localPagination,
-    setLocalPagination,
-    cascadeCollapse
+    setLocalPagination
   });
 
   // Set table row count for loading state
@@ -342,7 +339,6 @@ const AdvancedTable = (props: AdvancedTableProps) => {
       >
         {renderFullscreenHeader()}
         <AdvancedTableProvider
-            cascadeCollapse={cascadeCollapse}
             columnDefinitions={columnDefinitions}
             columnGroupBorderColor={columnGroupBorderColor}
             columnVisibilityControl={columnVisibilityControl}

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1015,77 +1015,4 @@ test("columnStyling.headerFontColor works as excpected", () => {
 
   const firstEnrollmentHeader = screen.getAllByText("New Enrollments")[0].closest("th");
   expect(firstEnrollmentHeader).toHaveStyle({ color: colors.white });
-});
-
-test("cascadeCollapse=false (default) preserves existing behavior when parent is re-expanded", () => {
-  render(
-    <AdvancedTable
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
-  const parentButton = getParentExpandButton()
-  expect(parentButton).toBeInTheDocument()
-  parentButton.click()
-  let subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
-  expect(subRow).toBeInTheDocument()
-  getParentExpandButton().click()
-  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
-  expect(subRow).not.toBeInTheDocument()
-  getParentExpandButton().click()
-  subRow = kit.querySelector(".pb-bg-row-white.depth-sub-row-1")
-  expect(subRow).toBeInTheDocument()
-})
-
-test("cascadeCollapse=true collapses all descendants when parent is collapsed", () => {
-  render(
-    <AdvancedTable
-        cascadeCollapse
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const getParentExpandButton = () => kit.querySelector("tbody tr .gray-icon.expand-toggle-icon")
-  const parentButton = getParentExpandButton()
-  expect(parentButton).toBeInTheDocument()
-  parentButton.click()
-  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
-  getParentExpandButton().click()
-  expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
-  getParentExpandButton().click()
-  expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
-})
-
-test("cascadeCollapse=true with header toggle all: collapse all then expand all shows only direct children", async () => {
-  render(
-    <AdvancedTable
-        cascadeCollapse
-        columnDefinitions={columnDefinitions}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const toggleAllButton = kit.querySelector(".gray-icon.toggle-all-icon")
-  expect(toggleAllButton).toBeInTheDocument()
-  toggleAllButton.click()
-  await waitFor(() => {
-    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
-  })
-  toggleAllButton.click()
-  await waitFor(() => {
-    expect(kit.querySelector(".depth-sub-row-1")).not.toBeInTheDocument()
-  })
-  toggleAllButton.click()
-  await waitFor(() => {
-    expect(kit.querySelector(".depth-sub-row-1")).toBeInTheDocument()
-  })
-})
+});

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

@@ -42,7 +42,6 @@ examples:
   - advanced_table_expanded_control: Expanded Control
   - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
-  - advanced_table_cascade_collapse: Cascade Collapse
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props

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

@@ -48,5 +48,4 @@ export { default as AdvancedTablePaddingControl } from './_advanced_table_paddin
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
 export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
-export { default as AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -57,7 +57,7 @@ $pb_button_border_width: 0px;
   }
 
   .loading-icon {
-    position: absolute;
+    position: static;
     display: none;
   }
   .pb_button_content {
@@ -158,10 +158,15 @@ $pb_button_border_width: 0px;
 // Loading =====================
 @mixin pb_button_loading($loading: false) {
   @if $loading == true {
+    display: inline-grid;
+    place-items: center;
+
     .loading-icon {
+      grid-area: 1 / 1;
       display: block;
     }
     .pb_button_content {
+      grid-area: 1 / 1;
       visibility: hidden;
     }
   }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -28,7 +28,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("textarea", props: {id: "default"}) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.jsx

@@ -4,7 +4,7 @@ import Body from '../../pb_body/_body'
 import Button from '../../pb_button/_button'
 import Caption from '../../pb_caption/_caption'
 import Dialog from '../../pb_dialog/_dialog'
-import Textarea from '../../pb_textarea/_textarea'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const DialogCompound = () => {
@@ -25,11 +25,8 @@ const DialogCompound = () => {
           <Body>{'What do you need us to take care of?'}</Body>
         </Dialog.Header>
         <Dialog.Body>
-          <Textarea
-              id="default-example-1"
-              label="Description"
-              rows={4}
-          />
+          <Caption marginBottom="xs">{'Description'}</Caption>
+          <RichTextEditor />
           <br />
           <Caption>
             {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb

@@ -1,11 +1,20 @@
 <%= pb_rails("button", props: { text: "Open Dialog", data: {"open-dialog": "dialog-1"} }) %>
 
-<%= pb_rails("dialog", props: { 
-    id:"dialog-1", 
-    size: "sm", 
-    title: "Header Title is the Title Prop", 
-    text: "Hello Body Text, Nice to meet ya.", 
-    cancel_button: "Cancel Button", 
-    confirm_button: "Okay", 
-    confirm_button_id: "confirm-button-1"
-}) %>
+<%= pb_rails("dialog", props: {
+        id:"dialog-1",
+        size: "md",
+        title: "Header Title is the Title Prop"
+}) do %>
+    <%= pb_rails("dialog/dialog_body") do %>
+        <%= pb_rails("button", props: { aria: { label: "Loading" }, loading: true, margin_right: "lg", text: "Button Primary" }) %>
+        <div style="height: 800px; background-color: lightgray;"></div>
+        <%= pb_rails("button", props: { loading: true, text: "Loading..." }) %>
+    <% end %>
+
+    <%= pb_rails("dialog/dialog_footer") do %>
+        <%= pb_rails("flex", props: { spacing: "between", padding_x: "md", padding_bottom: "md", padding: "sm" }) do %>
+            <%= pb_rails("button", props: { loading: true, text: "Send My Issue" }) %>
+            <%= pb_rails("button", props: { text: "Back", variant: "link", data: {"close-dialog": "dialog-1"} }) %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx

@@ -12,16 +12,35 @@ const DialogDefault = () => {
     <>
       <Button onClick={open}>{'Open Dialog'}</Button>
       <Dialog
-          cancelButton="Cancel Button"
-          confirmButton="Okay"
           onCancel={close}
           onClose={close}
           onConfirm={close}
           opened={isOpen}
-          size="sm"
-          text="Hello Body Text, Nice to meet ya."
+          size="md"
           title="Header Title is the Title Prop"
-      />
+      >
+        <Dialog.Body>
+            <Button
+                aria={{ label: 'Loading' }}
+                loading
+                text="Button Primary"
+            />
+            <div style={{height: '800px', backgroundColor: 'lightgray'}} />
+            <Button
+                loading
+                text="Loading..."
+            />
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button
+                loading
+                text="Send My Issue"
+            />
+            <Button  variant="link">
+              {"Back"}
+            </Button>
+          </Dialog.Footer>
+        </Dialog>
     </>
   )
 }

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb

@@ -12,7 +12,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("textarea", props: {id: "default-7"}) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
 
@@ -31,7 +31,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("textarea", props: {id: "default-8"}) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     
@@ -49,7 +49,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("textarea", props: {id: "default-9"}) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import Textarea from '../../pb_textarea/_textarea'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -77,11 +77,8 @@ const DialogFullHeight = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Textarea
-                  id="default-example-1"
-                  label="Description"
-                  rows={4}
-              />
+              <Caption marginBottom="xs">{"Description"}</Caption>
+              <RichTextEditor />
               <br />
               <Caption>
                 {

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb

@@ -13,7 +13,7 @@
     <% end %>
     <%= pb_rails("dialog/dialog_body") do %>
         <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-        <%= pb_rails("textarea", props: {id: "default-2"}) %>
+        <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
     <% end %>
@@ -32,7 +32,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("textarea", props: {id: "default-3"}) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>
@@ -50,7 +50,7 @@
         <% end %>
         <%= pb_rails("dialog/dialog_body") do %>
             <%= pb_rails("caption", props: { text: "Description", margin_bottom: "xs" }) %>
-            <%= pb_rails("textarea", props: {id: "default-4"}) %>
+            <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
             <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
             <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
         <% end %>

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx

@@ -5,7 +5,7 @@ import Button from '../../pb_button/_button'
 import Dialog from '../../pb_dialog/_dialog'
 import Flex from '../../pb_flex/_flex'
 import Caption from '../../pb_caption/_caption'
-import Textarea from "../../pb_textarea/_textarea";
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
 import Typeahead from '../../pb_typeahead/_typeahead'
 
 const useDialog = (visible = false) => {
@@ -76,11 +76,8 @@ const DialogFullHeightPlacement = () => {
               <Body>{title}</Body>
             </Dialog.Header>
             <Dialog.Body>
-              <Textarea
-                  id={`default-example-2-${index}`}
-                  label="Description"
-                  rows={4}
-              />
+              <Caption marginBottom="xs">{"Description"}</Caption>
+              <RichTextEditor />
               <br />
               <Caption>
                 {