playbook_ui 14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5341 → 14.11.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4151d717eddca9843cbee0cfc1bb9749f739689a6b2e59dc4008a54f93abeba
-  data.tar.gz: 96d539dc7f12d61d3a1ef76e6018731f7f244ef9972e21d81c404e85a292405d
+  metadata.gz: 684dfcc3e0b2d271c0ef3992c66895d5bf59f7814908e97b4ba0a6a2fd3a35c6
+  data.tar.gz: 8cff029a4d16a46c0d11292767c7faed0fed272b1102316c5c6988289b145f9b
 SHA512:
-  metadata.gz: c4ca0515955bc7b8f7b2e1b235e3361e6e9cfe8ef38e7e2969aa99196439399ba473b0e7d75cab6ad617813bff735c00d9782762d57090cbf45d2b13efa2dd18
-  data.tar.gz: 26428d2ec5528dcdf8b5d7efb8935e4efe7726c848502bc54847f1bc251ac06d30df8de8a1b32567b7f851a73789c57a51f4141dbc7f2179f00a2b6f67084c9c
+  metadata.gz: cf605e9ea95eca375c9efc8a112416d373958b9c5b0cd2bb4ea63495a6e6a97e22776d372d96894d2060c0c2c02ee671943390b06dbf0b35dded14de3b531a09
+  data.tar.gz: 8c2b6329d1a8ed96313eb9cacae23f86c2801ebdf4fe24de3070b969b79758753ca5f7e2507956482e4560fac781f6dc443f55cf0844ea749f2e7dcd26b1c92e

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

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

@@ -13,8 +13,6 @@ 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/example.yml

@@ -3,7 +3,6 @@ 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,5 +1,6 @@
-<%= pb_content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options) do %>
+<%= content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_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,4 +1,9 @@
-<%= pb_content_tag(:label) do %>
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname,
+                        **combined_html_options
+                ) 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,5 +1,9 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

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

@@ -1,14 +1,19 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) 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,15 +1,20 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) 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,10 +1,15 @@
-<%= pb_content_tag(:div, id: object.option[:id]) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.option[:id],
+    **combined_html_options) 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 %>
@@ -13,4 +18,4 @@
                 <% end %>
             </div>
     <% end %>
-<% end %>
+<% end %>

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

@@ -1,16 +1,21 @@
-<%= pb_content_tag do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) 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 %>
@@ -18,7 +23,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"}) %>
@@ -35,3 +40,4 @@
     <% 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 | (() => string),
-  getOptionValue?: string | (() => string),
+  getOptionLabel?: string | (() => any),
+  getOptionValue?: string | (() => any),
   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,7 +109,6 @@ 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,24 +1,16 @@
 import React, { useEffect } from 'react'
 import { components } from 'react-select'
 
-type ClearContainerProps = {
-  children: React.ReactNode,
-  selectProps?: {
-    id: string,
-  },
-  clearValue: () => void,
-}
-
-const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
+const ClearContainer = (props: any) => {
   const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
-  }, [clearValue, selectProps.id])
+  }, [true])
 
   return (
     <components.ClearIndicator
-        className="clear_indicator"
-        {...props}
+      className="clear_indicator"
+      {...props}
     />
   )
 }

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

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

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

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

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

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

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

@@ -3,22 +3,7 @@ import { components } from 'react-select'
 
 import User from '../../pb_user/_user'
 
-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 Option = (props: any) => {
   const {
     imageUrl,
   } = props.data
@@ -29,11 +14,11 @@ const Option = (props: OptionProps): React.ReactElement => {
       <>
         {!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,26 +4,19 @@ import { components } from 'react-select'
 import Flex from '../../pb_flex/_flex'
 import Icon from '../../pb_icon/_icon'
 
-type PlaceholderProps = {
-  children: React.ReactNode,
-  selectProps: {
-    plusIcon?: boolean,
-  },
-}
-
-const Placeholder = (props: PlaceholderProps): React.ReactElement => (
+const Placeholder = (props: any) => (
   <>
     <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,14 +1,10 @@
 import React from 'react'
 import { components } from 'react-select'
 
-type ValueContainerProps = {
-  children: React.ReactNode,
-}
-
-const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
+const ValueContainer = (props: any) => (
   <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,5 +1,3 @@
-/* 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,7 +45,8 @@ 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'){
@@ -57,9 +58,6 @@ 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={({imageUrl, label, territory, type}) => (
+          valueComponent={(props) => (
             <User
                 avatar
-                avatarUrl={imageUrl}
-                name={label}
-                territory={territory}
-                title={type}
+                avatarUrl={props.imageUrl}
+                name={props.label}
+                territory={props.territory}
+                title={props.type}
             />
           )}
           {...props}