playbook_ui 13.16.0.pre.alpha.PLAY11641992 → 13.16.0.pre.alpha.PLAY12002127

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

@@ -0,0 +1,3 @@
+`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc. 
+
+The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { AdvancedTable } from "../..";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableSubrowHeaders = (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",
+    },
+  ];
+
+  //Render the subRow header rows
+  const subRowHeaders = ["Quarter", "Month", "Day"]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          enableToggleExpansion="all"
+          tableData={MOCK_DATA}
+          {...props}
+      >
+        <AdvancedTable.Header />
+        <AdvancedTable.Body subRowHeaders={subRowHeaders}/>
+      </AdvancedTable>
+    </div>
+  );
+};
+
+export default AdvancedTableSubrowHeaders;

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

@@ -0,0 +1,3 @@
+`subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
+
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all' or 'header". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'headeer' by default.

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

@@ -0,0 +1,61 @@
+import React from "react";
+import { AdvancedTable } from "../../";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableTableOptions = (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 tableOptions = {
+    initialState: {
+        sorting: [
+          {
+            id: "year",
+            desc: true,
+          },
+        ],
+      },
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableOptions={tableOptions}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default AdvancedTableTableOptions;

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

@@ -0,0 +1,3 @@
+The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional `tableOptions` can be used to pass tanstack options to the kit. 
+
+In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and hoe to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)

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

@@ -0,0 +1,55 @@
+import React from "react";
+import { AdvancedTable } from "../../";
+import { MOCK_DATA } from "./_mock_data";
+
+const AdvancedTableTableProps = (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 tableProps = {
+    container: false,
+    sticky: true
+  }
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      />
+    </div>
+  );
+};
+
+export default AdvancedTableTableProps;

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

@@ -0,0 +1 @@
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table/react) under the hood which comes with it's own set of props. If you want to apply certain Table props to that underlying kit, you can do so by using the optional `tableProps` prop. This prop must be an object that contains valid Table props. For a full list of Table props, see [here](https://playbook.powerapp.cloud/kits/table/react).

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

@@ -0,0 +1 @@
+The AdvancedTable kit uses the [Tanstack Table v8](https://tanstack.com/table/v8/docs/introduction) under the hood to render advanced tables that allow for complex, nested data structures with expansion and sort options. 

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

@@ -0,0 +1,278 @@
+export const MOCK_DATA = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [
+      {
+        year: "2021",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "20",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "February",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "February",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [
+      {
+        year: "2022",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "15",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "25",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "May",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "May",
+                day: "2",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "10",
+    scheduledMeetings: "15",
+    attendanceRate: "65%",
+    completedClasses: "4",
+    classCompletionRate: "49%",
+    graduatedStudents: "29",
+    children: [
+      {
+        year: "2023",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "March",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "11",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "April",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "April",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];

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

@@ -0,0 +1,12 @@
+examples:
+  react:
+  - advanced_table_default: Default (Required Props)
+  - advanced_table_loading: Loading State
+  - advanced_table_sort: enable Sorting
+  - advanced_table_sort_control: Sort Control
+  - advanced_table_expanded_control: Expanded Control
+  - advanced_table_subrow_headers: SubRow Headers
+  - 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

@@ -0,0 +1,9 @@
+export { default as AdvancedTableDefault } from './_advanced_table_default.jsx'
+export { default as AdvancedTableSort } from './_advanced_table_sort.jsx'
+export { default as AdvancedTableSortControl } from './_advanced_table_sort_control.jsx'
+export { default as AdvancedTableLoading } from './_advanced_table_loading.jsx'
+export { default as AdvancedTableExpandedControl } from './_advanced_table_expanded_control.jsx'
+export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_headers.jsx'
+export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
+export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
+export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss

@@ -0,0 +1,72 @@
+
+  //animation scss
+  @keyframes wave {
+    0% {
+      background-position: -468px 0;
+    }
+    100% {
+      background-position: 468px 0;
+    }
+  }
+
+.content-loading {
+  pointer-events: none;
+  p,
+  .pb_body_kit_light,
+  .loading-toggle-icon,
+  .pb_caption_kit_md,
+  h4,
+  .loading-cell {
+    position: relative;
+    color: rgba($white, 0) !important;
+    background: rgba($white, 0) !important;
+    border: 0 !important;
+    &::after {
+      content: "";
+      position: absolute;
+      top: $space-xxs;
+      left: 0;
+      width: 100%;
+      height: calc(100% - #{$space-xxs * 2});
+      display: block;
+      border-radius: $border-rad-light;
+      animation-duration: 1.5s;
+      animation-fill-mode: forwards;
+      animation-iteration-count: infinite;
+      animation-name: wave;
+      animation-timing-function: linear;
+      background: $silver;
+      background-color: $silver;
+      background-image: linear-gradient(
+        to left,
+        $silver 0%,
+        lighten($silver, 1%) 50%,
+        lighten($silver, 1%) 60%,
+        $silver 80%,
+        $silver 100%
+      );
+      background-repeat: no-repeat;
+      background-size: 800px 104px;
+    }
+  }
+
+  .loading-cell {
+    height: $space_sm + 4;
+  }
+
+  .loading-toggle-icon {
+    width: $space_sm - 3;
+    height: $space_sm - 4;
+    margin-right: $space_xxs;
+    margin-bottom: $space_xxs + 2;
+    &::after {
+      height: $space_sm - 4;
+      border-radius: $border_radius_rounded;
+    }
+  }
+
+  svg,
+  img {
+    visibility: hidden;
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss

@@ -0,0 +1,12 @@
+%primary-color-pseudo {
+  &:hover,
+  &:active {
+    color: $primary;
+  }
+
+  &:focus-visible {
+    border-color: transparent;
+    box-shadow: 0px 0px 0 2px $primary_action;
+    outline: none;
+  }
+}

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -10,7 +10,7 @@ type FlexProps = {
   data?: GenericObject,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: unknown) => void)},
   id?: string,
   inline?: boolean,
   orientation?: "row" | "column",

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -1,4 +1,4 @@
-import React, { ReactSVGElement } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
@@ -27,7 +27,7 @@ type IconProps = {
   data?: {[key: string]: string},
   fixedWidth?: boolean,
   flip?: "horizontal" | "vertical" | "both" | "none",
-  icon: string | ReactSVGElement,
+  icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   inverse?: boolean,
@@ -57,7 +57,7 @@ const Icon = (props: IconProps) => {
     fixedWidth = true,
     flip = "none",
     htmlOptions = {},
-    icon = "",
+    icon,
     id,
     inverse = false,
     listItem = false,
@@ -79,19 +79,19 @@ const Icon = (props: IconProps) => {
     [`fa-${size}`]: size,
     [`fa-pull-${pull}`]: pull,
     [`fa-rotate-${rotation}`]: rotation,
-  }
-
-  const iconURL = typeof(icon) === 'string' && icon.includes('.svg') ? icon : null
-  const iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
 
-  const isFA = !iconElement && !customIcon && !iconURL
-
-  if (isFA) faClasses[`fa-${icon}`] = icon as string
+  }
 
+  // Lets check and see if the icon prop is referring to a custom Power icon...
+  // If so, then set fa-icon to "custom"
+  // this ensures the JS will not do any further operations
+  // faClasses[`fa-${icon}`] = customIcon ? 'custom' : icon
+  if (!customIcon) faClasses[`fa-${icon}`] = icon
+  
   const classes = classnames(
     flipMap[flip],
     'pb_icon_kit',
-    (iconElement || customIcon) ? '' : fontStyle,
+    customIcon ? '' : fontStyle,
     faClasses,
     globalProps(props),
     className
@@ -110,11 +110,11 @@ const Icon = (props: IconProps) => {
 
   // Add a conditional here to show only the SVG if custom
   const displaySVG = (customIcon: any) => {
-    if (iconElement || customIcon)
+    if (customIcon)
       return (
         <>
           {
-            React.cloneElement(iconElement || customIcon, {
+            React.cloneElement(customIcon, {
               ...dataProps,
               ...htmlProps,
               className: classes,
@@ -123,7 +123,7 @@ const Icon = (props: IconProps) => {
           }
         </>
       )
-    else if (isValidEmoji(icon as string))
+    else if (isValidEmoji(icon))
       return (
         <>
           <span
@@ -136,19 +136,7 @@ const Icon = (props: IconProps) => {
           </span>
         </>
       )
-    else if (iconURL)
-      return (
-        <>
-          <span
-              {...dataProps}
-              {...htmlProps}
-              className={classesEmoji}
-              id={id}
-          >
-            <img src={iconURL} />
-          </span>
-        </>
-      )
+
     else
       return (
         <>
@@ -173,4 +161,4 @@ const Icon = (props: IconProps) => {
   )
 }
 
-export default Icon
+export default Icon