playbook_ui 14.18.0.pre.rc.3 → 14.18.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6365ffa349a3400e9838c6825d30fea0a806ea9e2cef468b45911071fe84fd2f
-  data.tar.gz: 2f491f5d69a296241312690575ccf94a08b985e67595ce116ec00e63081c78a6
+  metadata.gz: 94ec449a03aebe3006ca1edc972e4632eb4ce67276e4e2a575dd54e4a26d87be
+  data.tar.gz: 6843d0fe6728e70935869341db3aa00e22eaa987e935ff80c502629f841fee9b
 SHA512:
-  metadata.gz: 1dda3b47457cd1a0fa42f75c445b061f0a63a69a512811166ac3ff0458a31375a4bbe563259cddcb64f0082de48cc8f22eecaa49d8842b400caa101b92c3d0b0
-  data.tar.gz: 78c8e1619dba55b47099e415283da83f47bd4b8cbc6740f16c83e4a7a6df0070e806e8b98b5ade9c51f1fb839b46681bfe15fd7f148b623c6d88eec1190c05a6
+  metadata.gz: c4f7a5ceff1a63c95bfea4df95fcc16a633fd926d6a521cf812062292da2cc73ddaf8b3e010311bcedd20b962a7558855c44895d236ab5db3b0015cda458fb1c
+  data.tar.gz: ed2800f912e35e9e0c2e457613ad19d58e9801b9fc8ce8a322c38d0d0609b28138eaeb9dcce449e441ceb93983697c628b49790eccc930c9264e4e9c11fbc505

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

@@ -1,6 +1,6 @@
 import React, { useContext } from "react"
 import classnames from "classnames"
-import { flexRender, Header, Table } from "@tanstack/react-table"
+import { flexRender, Header, Table, RowModel } from "@tanstack/react-table"
 
 import { GenericObject } from "../../types"
 
@@ -8,9 +8,16 @@ import { GlobalProps } from "../../utilities/globalProps"
 
 import Flex from "../../pb_flex/_flex"
 import Checkbox from "../../pb_checkbox/_checkbox"
+import Dropdown from "../../pb_dropdown/_dropdown"
+import DropdownTrigger from "../../pb_dropdown/subcomponents/DropdownTrigger"
+import DropdownOption from "../../pb_dropdown/subcomponents/DropdownOption"
+import DropdownContainer from "../../pb_dropdown/subcomponents/DropdownContainer"
+import Icon from "../../pb_icon/_icon"
 
 import { SortIconButton } from "./SortIconButton"
 import { ToggleIconButton } from "./ToggleIconButton"
+import { displayIcon } from "../Utilities/IconHelpers"
+import { updateExpandAndCollapseState } from "../Utilities/ExpansionControlHelpers"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 
@@ -40,6 +47,11 @@ export const TableHeaderCell = ({
   table
 }: TableHeaderCellProps) => {
   const {
+    expanded,
+    setExpanded,
+    expandByDepth,
+    onExpandByDepthClick,
+    toggleExpansionIcon,
     sortControl,
     responsive,
     selectableRows,
@@ -107,6 +119,21 @@ const isToggleExpansionEnabled =
     justifyHeader = isLeafColumn ? "end" : "center";
   }
   
+  const handleExpandDepth = (depth: number) => {
+    if (onExpandByDepthClick) {
+      const flatRows = table?.getRowModel().flatRows
+      onExpandByDepthClick(depth, flatRows)
+    }
+    const updated = updateExpandAndCollapseState(
+      table.getRowModel(),
+      expanded,
+      undefined,
+      depth
+    )
+    setExpanded(updated)
+  }
+  
+
   return (
     <th
         align="right"
@@ -143,9 +170,36 @@ const isToggleExpansionEnabled =
               />
             )
           }
-          {isToggleExpansionEnabled && hasAnySubRows && (
+          {isToggleExpansionEnabled && hasAnySubRows && !expandByDepth && (
               <ToggleIconButton onClick={handleExpandOrCollapse} />
             )}
+          {isToggleExpansionEnabled && hasAnySubRows && expandByDepth && (
+              <Dropdown className="expand-by-depth-dropdown-wrapper" 
+                  options={expandByDepth}
+              >
+                <DropdownTrigger className="gray-icon toggle-all-icon">
+                  <Icon icon={displayIcon(toggleExpansionIcon)[0]} />
+                </DropdownTrigger>
+                <DropdownContainer className="expand-by-depth-dropdown">
+                  {expandByDepth.map((option:{ [key: string]: any }, index: number) => (
+                    <DropdownOption
+                        key={index}
+                        option={option}
+                        padding="none"
+                    > 
+                      <Flex
+                          alignItems="center"
+                          htmlOptions={{onClick: () => {handleExpandDepth(option.depth)} }}
+                          paddingX="sm"
+                          paddingY="xs"
+                          >
+                            {option.label}
+                          </Flex>
+                    </DropdownOption>
+                  ))}
+                </DropdownContainer>
+              </Dropdown>
+            )}
 
           {isToggleExpansionEnabledLoading &&(
               <div className="loading-toggle-icon header-toggle-icon" />

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

@@ -22,10 +22,9 @@ export function useTableActions({
   // Handle expand/collapse
   const handleExpandOrCollapse = useCallback(async (row: Row<GenericObject>) => {
     onToggleExpansionClick && onToggleExpansionClick(row);
-
     const expandedState = expanded;
     const targetParent = row?.parentId;
-    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent);
+    const updatedRows = await updateExpandAndCollapseState(table.getRowModel(), expandedState, targetParent, undefined);
     setExpanded(updatedRows);
   }, [expanded, setExpanded, onToggleExpansionClick, table]);
 

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

@@ -1,4 +1,4 @@
-import { RowModel } from "@tanstack/react-table"
+import { RowModel, Row } from "@tanstack/react-table"
 import { ExpandedStateObject } from "./types"
 import { GenericObject } from "../../types"
 
@@ -14,30 +14,40 @@ const filterExpandableRows = (expandedState: Record<string, boolean>) => {
 export const updateExpandAndCollapseState = (
   tableRows: RowModel<GenericObject>,
   expanded: Record<string, boolean>,
-  targetParent: string
+  targetParent?: string,
+  targetDepth?: number,
 ) => {
   const updateExpandedRows: Record<string, boolean> = {};
-  const rows = tableRows.rows;
+  const rows = targetDepth !== undefined ? tableRows.flatRows : tableRows.rows;
 
-  let isExpansionConsistent = true;
-  const areRowsExpanded = new Set<boolean>();
+  const rowsToToggle: Row<GenericObject>[] = [];
 
   for (const row of rows) {
-    const shouldBeUpdated = targetParent === undefined ? row.depth === 0 : targetParent === row.parentId;
-    
+    const shouldBeUpdated =
+      targetDepth !== undefined
+        ? row.depth <= targetDepth
+        : targetParent === undefined
+        ? row.depth === 0
+        : targetParent === row.parentId;
+
     if (shouldBeUpdated) {
-      const isExpanded = row.getIsExpanded();
-      areRowsExpanded.add(isExpanded);
-
-      updateExpandedRows[row.id] = !isExpansionConsistent ? true : !isExpanded;
-
-      if (areRowsExpanded.size > 1) {
-        isExpansionConsistent = false;
-        // If expansion inconsistent, ensure all target rows are set to expand
-        for (const key in updateExpandedRows) {
-          updateExpandedRows[key] = true;
-        }
-      }
+      rowsToToggle.push(row);
+    }
+  }
+
+  // Check if we are expanding or collapsing
+  const anyCollapsed = rowsToToggle.some((row) => !row.getIsExpanded());
+  const isExpandAction = anyCollapsed;
+
+  
+  for (const row of rowsToToggle) {
+    const shouldUpdate =
+      isExpandAction || targetDepth === undefined
+        ? true
+        : row.depth === targetDepth;
+
+    if (shouldUpdate) {
+      updateExpandedRows[row.id] = isExpandAction;
     }
   }
 

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

@@ -130,6 +130,13 @@
         box-sizing: border-box !important;
       }
     }
+    .expand-by-depth-dropdown-wrapper {
+      position: unset !important;
+    }
+    .expand-by-depth-dropdown {
+      width: unset !important;
+      text-align: left;
+    }
   }
 
   .pb_advanced_table_body {

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

@@ -38,6 +38,8 @@ type AdvancedTableProps = {
   data?: { [key: string]: string }
   enableToggleExpansion?: "all" | "header" | "none"
   expandedControl?: GenericObject
+  expandByDepth?: { [key: string]: string | number }
+  onExpandByDepthClick?: (arg: number, arg1: any) => void
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string
   initialLoadingRowsCount?: number
@@ -73,6 +75,8 @@ const AdvancedTable = (props: AdvancedTableProps) => {
     data = {},
     enableToggleExpansion = "header",
     expandedControl,
+    expandByDepth,
+    onExpandByDepthClick,
     htmlOptions = {},
     id,
     initialLoadingRowsCount = 10,
@@ -280,6 +284,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             columnDefinitions={columnDefinitions}
             enableToggleExpansion={enableToggleExpansion}
             enableVirtualization={virtualizedRows}
+            expandByDepth={expandByDepth}
             expanded={expanded}
             expandedControl={expandedControl}
             handleExpandOrCollapse={handleExpandOrCollapse}
@@ -288,6 +293,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
             isActionBarVisible={isActionBarVisible}
             isFullscreen={isFullscreen}
             loading={loading}
+            onExpandByDepthClick={onExpandByDepthClick}
             responsive={responsive}
             selectableRows={selectableRows}
             setExpanded={setExpanded}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.jsx

@@ -0,0 +1,66 @@
+import React from "react"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableExpandByDepth = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const expandByDepth = [
+    {
+        depth: 0,
+        label: "Year",
+    },
+    {
+        depth: 1,
+        label: "Quarter",
+    },
+    {
+        depth: 2,
+        label: "Month",
+    }
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          expandByDepth={expandByDepth}
+          onExpandByDepthClick={(depth, rows) => {console.log(depth, rows)}}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableExpandByDepth

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expand_by_depth.md

@@ -0,0 +1,10 @@
+The `expandByDepth` prop enables users to expand or collapse table rows by specific levels of nesting. When provided, it renders a dropdown that appears when the toggle icon in the header is clicked.
+
+`expandByDepth` accepts an array of objects, where each object defines the depth level to target and the label to display in the dropdown. When a user selects an option:
+
+**Expanding a depth**: Expands all rows at the selected depth AND all parent levels above it (if parent levels were closed), ensuring nested content is visible.
+
+**Collapsing a depth**: Only collapses rows at the selected depth, keeping parent rows expanded for context.
+
+If you want to attach further logic to each option click, the **optional** `onExpandByDepthClick` prop can be used. This click event provides 2 arguments that can be hooked into: the depth level of the clicked item AND all flattened table rows. Any additional functionality provided through this onClick will be applied in addition to the default.
+

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

@@ -22,6 +22,7 @@ examples:
   - advanced_table_sort: Enable Sorting
   - advanced_table_sort_control: Sort Control
   - advanced_table_expanded_control: Expanded Control
+  - advanced_table_expand_by_depth: Expand by Depth
   - advanced_table_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options

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

@@ -25,4 +25,5 @@ export { default as AdvancedTableInlineEditing } from './_advanced_table_inline_
 export { default as AdvancedTableFullscreen } from './_advanced_table_fullscreen.jsx'
 export { default as AdvancedTableStickyColumns } from './_advanced_table_sticky_columns.jsx'
 export { default as AdvancedTableStickyHeader } from './_advanced_table_sticky_header.jsx'
-export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableStickyColumnsAndHeader } from './_advanced_table_sticky_columns_and_header.jsx'
+export { default as AdvancedTableExpandByDepth } from './_advanced_table_expand_by_depth.jsx'

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

@@ -31,6 +31,8 @@ export default class PbAdvancedTable extends PbEnhancedElement {
         this.toggleElement(this.target);
       }
     });
+    
+    this.hideCloseIcon()
 
     const nestedButtons = this.element
       .closest("table")
@@ -49,6 +51,11 @@ export default class PbAdvancedTable extends PbEnhancedElement {
     });
   }
 
+  hideCloseIcon() {
+    const closeIcon = this.element.querySelector(UP_ARROW_SELECTOR);
+    closeIcon.style.display = "none";
+}
+
   showElement(elements) {
     elements.forEach((elem) => {
       elem.style.display = "table-row";

data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb

@@ -30,7 +30,7 @@
                                     class="gray-icon expand-toggle-icon"
                                     data-advanced-table="true">
                                     <%= pb_rails("icon", props: { id: "advanced-table_open_icon", icon: "circle-play", cursor: "pointer" }) %>
-                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", display: "none", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
+                                    <%= pb_rails("icon", props: { id: "advanced-table_close_icon", icon: "circle-play", cursor: "pointer", rotation: 90 }) %>
                                 </button>
                             <% end %>
                         <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -53,4 +53,42 @@ $pb_button_styles: (
       }
     }
   }
-}
+  &.size_small {
+    @each $style in $pb_button_styles {
+      [class^=pb_button_kit][class*=_#{$style}] {
+        width: 20px;
+        height: 20px;
+        min-height: 20px;
+        border-radius: 10px;
+        line-height: 20px;
+        flex-basis: 20px;
+        min-width: 20px;
+        padding: 0;
+      }
+    }
+    // centering small icon svg
+    .pb_button_content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      // rails
+      svg.pb_custom_icon {
+        height: 14px;
+        width: 14px;
+        vertical-align: middle;
+      }
+      // react (nested within an additional span)
+      > span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        > svg.pb_custom_icon {
+          height: 14px;
+          width: 14px;
+          vertical-align: middle;
+          display: inline-block;
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -22,6 +22,7 @@ type CircleIconButtonProps = {
   type?: 'button' | 'submit' | 'reset' | undefined,
   target?: string
   variant?: 'primary' | 'secondary' | 'link',
+  size?: 'default' | 'sm',
 }
 
 const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
@@ -41,13 +42,16 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
     link,
     newWindow,
     variant,
+    size = 'default',
   } = props
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
+  const sizeClass = size === 'sm' ? 'size_small' : ''
   const classes = classnames(
     buildCss('pb_circle_icon_button_kit'),
+    sizeClass,
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -18,8 +18,16 @@ module Playbook
       prop :new_window, type: Playbook::Props::Boolean,
                         default: false
       prop :target
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[default sm],
+                  default: "default"
+
       def classname
-        generate_classname("pb_circle_icon_button_kit")
+        generate_classname("pb_circle_icon_button_kit") + size_class
+      end
+
+      def size_class
+        size == "sm" ? " size_small" : ""
       end
     end
   end

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js

@@ -30,3 +30,17 @@ test('passes loading prop to button', () => {
   
   expect(button).toBeInTheDocument()
 })
+
+test('adds size_small class when size is sm', () => {
+  render(
+    <CircleIconButton
+        data={{ testid: 'small-size-test' }}
+        icon="plus"
+        size="sm"
+    />
+  )
+
+  const kit = screen.getByTestId('small-size-test')
+  
+  expect(kit).toHaveClass('pb_circle_icon_button_kit size_small')
+})

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.html.erb

@@ -0,0 +1,28 @@
+<%= pb_rails("flex", props: { orientation: "column", gap: "sm" }) do %>
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "plus",
+    size: "sm",
+    variant: "primary"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "pen",
+    loading: true,
+    size: "sm",
+    variant: "secondary"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    disabled: true,
+    icon: "times",
+    size: "sm"
+  }) %>
+
+  <%= pb_rails("circle_icon_button", props: {
+    icon: "info",
+    link: "https://playbook.powerapp.cloud/",
+    size: "sm",
+    target: "child",
+    variant: "link"
+  }) %>
+<% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.jsx

@@ -0,0 +1,42 @@
+import React from 'react'
+
+import CircleIconButton from '../_circle_icon_button'
+import Flex from '../../pb_flex/_flex'
+
+const CircleIconButtonSize = (props) => (
+  <>
+    <Flex gap="sm"
+        orientation="column"
+    >
+        <CircleIconButton
+            icon="plus"
+            size="sm"
+            variant="primary"
+            {...props}
+        />
+        <CircleIconButton
+            icon="pen"
+            loading
+            size="sm"
+            variant="secondary"
+            {...props}
+        />
+        <CircleIconButton
+            disabled
+            icon="times"
+            size="sm"
+            {...props}
+        />
+        <CircleIconButton
+            icon="info"
+            link="https://playbook.powerapp.cloud/"
+            size="sm"
+            target="child"
+            variant="link"
+            {...props}
+        />
+    </Flex>
+  </>
+)
+
+export default CircleIconButtonSize

data/app/pb_kits/playbook/pb_circle_icon_button/docs/_circle_icon_button_size.md

@@ -0,0 +1 @@
+The `size` prop accepts "sm" as a value to make the Circle Icon Button 20px x 20px instead of the default 40px x 40px size.

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

@@ -4,9 +4,11 @@ examples:
   - circle_icon_button_default: Default
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size
   
   react:
   - circle_icon_button_default: Default
   - circle_icon_button_click: Click Handler
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
+  - circle_icon_button_size: Size

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

@@ -2,3 +2,4 @@ export { default as CircleIconButtonDefault } from './_circle_icon_button_defaul
 export { default as CircleIconButtonClick } from './_circle_icon_button_click.jsx'
 export { default as CircleIconButtonLink } from './_circle_icon_button_link.jsx'
 export { default as CircleIconButtonLoading } from './_circle_icon_button_loading.jsx'
+export { default as CircleIconButtonSize } from './_circle_icon_button_size.jsx'

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("body", props: { cursor: "pointer", data: { "external-copy-from": "hookbody"} }) do %>
+  <span id="hookbody">I'm a custom copy hook! Click this body to copy this text!</span>
+<% end %>
+
+<%= pb_rails("tooltip", props: {
+  trigger_element_selector: "#hookbody",
+  tooltip_id: "hookbody_tooltip",
+  position: 'top',
+  trigger_method: "click"
+}) do %>
+  Copied!
+<% end %>
+
+<%= pb_rails("textarea", props: { margin_top: "xs", placeholder: "Paste here" }) %>

data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook_rails.md

@@ -0,0 +1,3 @@
+You can use any external control (like the text itself or an icon) to copy. To use this hook, set the `data-external-copy-from` attribute on the external control to the copying ID. This will grab the `innerText` from `your_id` element, or `value` if it is an input element. Alternatively, you can set a `data-external-copy-value` attribute and copy custom text.
+
+See the code example for details. 

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

@@ -2,6 +2,7 @@ examples:
   rails:
   - copy_button_default: Default
   - copy_button_from: Copy From
+  - copy_button_hook_rails: Copy Hook
   
   react:
   - copy_button_default: Default