playbook_ui_docs 14.11.0.pre.rc.17 → 14.11.1.pre.alpha.PBNTR769sticky5359

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d36a4ed75a9f7a9ff312dfaa55cd044c0f1bb36d561e5de66ba66b029789e7d
-  data.tar.gz: 1a6fbb988aaacc84469d367442af77c5bdfe7405eb29b8f877cd45e89da87d5c
+  metadata.gz: f3bdb49fc5fa2ae41cef519b8fc54c5a9fa804baecf7583ef6b16d0dbd1167d4
+  data.tar.gz: c61ffaa7be0fb6b1421dd77dcaa4c7653006377abfc564278064e3fea0a9cf94
 SHA512:
-  metadata.gz: a94b9030b36267143cfb9476ba2972c738c4bd72df3a9d2e32425861f4b5f3639a0df1dc8b7c34504a2fb34b7c624681941cfc720c6d99c4e41c9fd827e5fdfd
-  data.tar.gz: 9e68f7284a5c29802a57aa716fd8c2d325c20d70827e6caa5b119caa1ce46ec75fae2b78dac7eb06319f04b9bb0b3bd53fb62747627b8c3b6fd60a8327f6388a
+  metadata.gz: fae106e1a12690322c17c135dd21c65cf7af1fc23ddbab77855f4d958e7afce6ee4194b9bcd1a52a2e2395d947365f5a793d1de56de09ecc2ef4f499d4059282
+  data.tar.gz: '078f33440cc6284dc9d29952c1d500727d7957b76a147b50af05c62d4005fc16625828295c72e361d64e1dd7cffde0f3ecd884851ca807d392595e4a4f2fef20'

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

@@ -0,0 +1,52 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+
+const AdvancedTableStickyHeaderResponsive = (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",
+    },
+  ]
+
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          htmlOptions={{style: { maxHeight: "100vh" }}}
+          tableData={MOCK_DATA}
+          tableProps={{sticky:true}}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableStickyHeaderResponsive

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      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",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "table_props_table", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, sticky: true }}) %>

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

@@ -0,0 +1 @@
+This kit uses the [Table kit](https://playbook.powerapp.cloud/kits/table) 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 `table_props` 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).

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

@@ -3,6 +3,7 @@ examples:
   - advanced_table_beta: Default (Required Props)
   - advanced_table_beta_subrow_headers: SubRow Headers
   - advanced_table_collapsible_trail_rails: Collapsible Trail
+  - advanced_table_table_props: Table Props
   - advanced_table_beta_sort: Enable Sorting
   - advanced_table_custom_cell_rails: Custom Components for Cells
   - advanced_table_column_headers: Multi-Header Columns
@@ -21,6 +22,7 @@ examples:
   - advanced_table_table_props: Table Props
   - advanced_table_inline_row_loading: Inline Row Loading
   - advanced_table_responsive: Responsive Tables
+  - advanced_table_sticky_header_responsive: Sticky Header and Responsive
   - advanced_table_custom_cell: Custom Components for Cells
   - advanced_table_pagination: Pagination
   - advanced_table_pagination_with_props: Pagination Props

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

@@ -13,4 +13,5 @@ export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cel
 export { default as AdvancedTablePagination } from './_advanced_table_pagination.jsx'
 export { default as AdvancedTablePaginationWithProps } from './_advanced_table_pagination_with_props.jsx'
 export { default as AdvancedTableColumnHeaders } from './_advanced_table_column_headers.jsx'
-export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableColumnHeadersMultiple } from './_advanced_table_column_headers_multiple.jsx'
+export { default as AdvancedTableStickyHeaderResponsive } from './_advanced_table_sticky_header_responsive.jsx'

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx

@@ -1,3 +1,5 @@
+/* eslint-disable react/no-multi-comp */
+
 import React, { useState } from 'react'
 
 import {

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx

@@ -45,8 +45,7 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
+
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -58,6 +57,9 @@ const TypeaheadWithPillsAsync = (props) => {
     return results()
   }
 
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
+
   return (
     <>
       {users && users.length > 0 && (

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_custom_options.jsx

@@ -83,13 +83,13 @@ const TypeaheadWithPillsAsyncCustomOptions = (props) => {
           onChange={handleOnChange}
           onMultiValueClick={handleOnMultiValueClick}
           placeholder="type the name of a Github user"
-          valueComponent={(props) => (
+          valueComponent={({imageUrl, label, territory, type}) => (
             <User
                 avatar
-                avatarUrl={props.imageUrl}
-                name={props.label}
-                territory={props.territory}
-                title={props.type}
+                avatarUrl={imageUrl}
+                name={label}
+                territory={territory}
+                title={type}
             />
           )}
           {...props}