playbook_ui 14.11.0.pre.rc.17 → 14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5339

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f599fa0970fcb3140d297268f529a3d03495f21b515eaac87f1d7139bf3b84ff
-  data.tar.gz: 494f5ec517ef6e7fbf7f5549003e2e43112654f415d932756b13cadee015b085
+  metadata.gz: 9dca52c6de9bc88a8b2ce69d53315b7f3159f80097baff34f327cf5598142a80
+  data.tar.gz: e9920a4f8ff2773183bd2ae356900e72d93b346e83e4fac415b419f3bafd2372
 SHA512:
-  metadata.gz: 7665f9d805d6199cedbccf11052e936a78b7cff00575c27f146ad3a08d5bd0f36da1d5f32a7a849f80f41ac39681956668efdffb6945415a5d4766b5405a7495
-  data.tar.gz: 2f8c3da2c45bdd8cced277e3329b188dec90ec6fd271cbfb0ef7b63058a93c8faf99d70bcaf6a68c779fce93a1e53d33ced703dbdc07788236fd88b89f714ac2
+  metadata.gz: adaa58f5dbdebc31ed781c93def51a17dce06d8a6134b2d1fdfa72ed046a0beffd9942c9910ad70f39d36c878ba7f532afc6d883fd8578d0bf705589fbfd6654
+  data.tar.gz: '005478448c5c35da3d9eeb0436958a3e58fa4bedacf649526de6331aa495a49429103ed131898681e6f9ac6fc9bd99dbfd8553c692f0512f282334c70226015e'

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

@@ -1,5 +1,5 @@
 <%= pb_content_tag do %>
-        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }) do %>
+        <%= pb_rails("table", props: { size: "sm", data_table: true, number_spacing:"tabular", responsive:"none", dark: dark }.merge(object.table_props)) do %>
           <% if content.present? %>
             <% content.presence %>
           <% else %>

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.rb

@@ -13,6 +13,8 @@ module Playbook
       prop :responsive, type: Playbook::Props::Enum,
                         values: %w[none scroll],
                         default: "none"
+      prop :table_props, type: Playbook::Props::HashProp,
+                         default: {}
 
       def classname
         generate_classname("pb_advanced_table", responsive_classname, separator: " ")

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

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,6 +1,5 @@
-<%= content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options,
-                **combined_html_options) do %>
+<%= pb_content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:label, aria: object.aria,
-                        id: object.id,
-                        data: object.data,
-                        class: object.classname,
-                        **combined_html_options
-                ) do %>
+<%= pb_content_tag(:label) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,9 +1,5 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname + object.error_class,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div,
+    class: object.classname + object.error_class) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,19 +1,14 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if object.label.present? %>
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input 
-            data-default-value="<%= input_default_value %>" 
-            id="dropdown-selected-option" 
-            name="<%= object.name %>" 
-            style="display: none" 
-            <%= object.required ? "required" : ""%> 
+        <input
+            data-default-value="<%= input_default_value %>"
+            id="dropdown-selected-option"
+            name="<%= object.name %>"
+            style="display: none"
+            <%= object.required ? "required" : ""%>
         />
         <% if content.present? %>
             <%= content.presence %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -1,20 +1,15 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
-            <% if content.present? %> 
+            <% if content.present? %>
                 <%= content.presence %>
-            <% else %> 
+            <% else %>
                 <%= pb_rails("list/item", props: {
-                    display: "flex", 
-                    justify_content: "center", 
-                    padding:"xs", 
-                    }) do %> 
+                    display: "flex",
+                    justify_content: "center",
+                    padding:"xs",
+                    }) do %>
                         <%= pb_rails("body", props: {text: "No option"}) %>
                 <% end %>
             <% end %>
-    <% end %>        
-<% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,15 +1,10 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.option[:id],
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <%= pb_rails("list/item", props: {
-        display: "flex", 
-        justify_content: "center", 
-        padding:"none", 
+        display: "flex",
+        justify_content: "center",
+        padding:"none",
         cursor: "pointer"
-        }) do %> 
+        }) do %>
             <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
@@ -18,4 +13,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,21 +1,16 @@
-<%= content_tag(:div,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
     <% if content.present? %>
         <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
     <%= pb_rails("flex", props: {
-        align: "center", 
-        border_radius:"lg", 
-        classname: object.trigger_wrapper_classes, 
-        cursor: "pointer", 
-        justify: "between", 
-        padding_x:"sm", 
+        align: "center",
+        border_radius:"lg",
+        classname: object.trigger_wrapper_classes,
+        cursor: "pointer",
+        justify: "between",
+        padding_x:"sm",
         padding_y:"xs",
         html_options: {tabindex:"0"}
         }) do %>
@@ -23,7 +18,7 @@
             <%= pb_rails("flex", props: {align: "center"}) do %>
                 <% if object.custom_display.present?  %>
                     <%= pb_rails("flex", props: {align: "center"}) do %>
-                        <div id="dropdown_trigger_custom_display" style="display: none;"> 
+                        <div id="dropdown_trigger_custom_display" style="display: none;">
                             <%= object.custom_display %>
                         </div>
                         <%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
@@ -40,4 +35,3 @@
     <% end %>
     <% end %>
 <% end %>
-      

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -42,8 +42,8 @@ type TypeaheadProps = {
   id?: string,
   label?: string,
   loadOptions?: string | Noop,
-  getOptionLabel?: string | (() => any),
-  getOptionValue?: string | (() => any),
+  getOptionLabel?: string | (() => string),
+  getOptionValue?: string | (() => string),
   name?: string,
   marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
   pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
@@ -109,6 +109,7 @@ const Typeahead = ({
     multiKit: '',
     onCreateOption: null as null,
     plusIcon: false,
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     onMultiValueClick: (_option: SelectValueType): any => undefined,
     pillColor: pillColor,
     ...props,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -1,16 +1,24 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
-const ClearContainer = (props: any) => {
+type ClearContainerProps = {
+  children: React.ReactNode,
+  selectProps?: {
+    id: string,
+  },
+  clearValue: () => void,
+}
+
+const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [true])
+  }, [clearValue, selectProps.id])
 
   return (
     <components.ClearIndicator
-      className="clear_indicator"
-      {...props}
+        className="clear_indicator"
+        {...props}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx

@@ -5,7 +5,11 @@ import Flex from '../../pb_flex/_flex'
 import TextInput from '../../pb_text_input/_text_input'
 
 type Props = {
-  selectProps: any,
+    selectProps: {
+    dark?: boolean,
+    label: string,
+    error?: string,
+  },
 }
 
 const TypeaheadControl = (props: Props) => (

data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx

@@ -1,10 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const IndicatorsContainer = (props: any) => (
+type IndicatorsContainerProps = {
+  children: React.ReactNode,
+}
+
+
+const IndicatorsContainer = (props: IndicatorsContainerProps): React.ReactElement => (
   <components.IndicatorsContainer
-    className="text_input_indicators"
-    {...props}
+      className="text_input_indicators"
+      {...props}
   />
 )
 

data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx

@@ -1,7 +1,12 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const MenuList = (props: any) => {
+type MenuListProps = {
+  children: React.ReactNode,
+  footer: React.ReactNode,
+}
+
+const MenuList = (props: MenuListProps): React.ReactElement => {
   return (
   <components.MenuList {...props}>
     {props.children}

data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx

@@ -3,7 +3,22 @@ import { components } from 'react-select'
 
 import User from '../../pb_user/_user'
 
-const Option = (props: any) => {
+type OptionProps = {
+  children: React.ReactNode,
+  label?: string,
+  data: {
+    imageUrl?: string,
+  },
+  selectProps: {
+    dark?: boolean,
+    valueComponent?: (data: {
+      imageUrl?: string,
+    }) => React.ReactNode,
+  },
+}
+
+
+const Option = (props: OptionProps): React.ReactElement => {
   const {
     imageUrl,
   } = props.data
@@ -14,11 +29,11 @@ const Option = (props: any) => {
       <>
         {!valueComponent && imageUrl &&
           <User
-            align="left"
-            avatarUrl={imageUrl}
-            dark={props.selectProps.dark}
-            name={props.label}
-            orientation="horizontal"
+              align="left"
+              avatarUrl={imageUrl}
+              dark={props.selectProps.dark}
+              name={props.label}
+              orientation="horizontal"
           />
         }
 

data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx

@@ -4,19 +4,26 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
 
-const Placeholder = (props: any) => (
+type PlaceholderProps = {
+  children: React.ReactNode,
+  selectProps: {
+    plusIcon?: boolean,
+  },
+}
+
+const Placeholder = (props: PlaceholderProps): React.ReactElement => (
   <>
     <Flex
-      align="center"
-      className="placeholder"
+        align="center"
+        className="placeholder"
     >
       <components.IndicatorsContainer
-        {...props}
+          {...props}
       />
       {props.selectProps.plusIcon &&
         <Icon
-          className="typeahead-plus-icon"
-          icon="plus"
+            className="typeahead-plus-icon"
+            icon="plus"
         />
       }
     </Flex>

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -1,10 +1,14 @@
 import React from 'react'
 import { components } from 'react-select'
 
-const ValueContainer = (props: any) => (
+type ValueContainerProps = {
+  children: React.ReactNode,
+}
+
+const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
   <components.ValueContainer
-    className="text_input_value_container"
-    {...props}
+      className="text_input_value_container"
+      {...props}
   />
 )
 

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}