playbook_ui 13.33.1 → 13.34.0.pre.alpha.PBNTR358responsiveadvancedtablereact3368

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon.jsx

@@ -1,73 +1,74 @@
 import React from 'react'
-import { Collapsible, useCollapsible, Background, Flex, Title, List, ListItem } from '../..'
+import PropTypes from 'prop-types'
+import { Collapsible, useCollapsible, Flex, Title, List, ListItem } from '../..'
 
-const CollapsibleCustomMainWithIcon = () => {
+const CollapsibleCustomMainWithIcon = (props) => {
   const [isCollapsed, setIsCollapsed] = useCollapsible(true)
 
   return (
-  <>
-    <Collapsible
-        collapsed={isCollapsed}
-    >
-          <Background 
-              backgroundColor="white" 
-              cursor="pointer"
-              htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
-              position="sticky" 
-              top="0" 
-          >
-              <Flex 
-                  align="center" 
-                  gap="sm"
-                  justify="between" 
-              >
-                <Title 
-                    size={4} 
-                    text="Custom Main Section" 
-                />
-                <Collapsible.Icon collapsed={isCollapsed}/>
-              </Flex>
-          </Background>
-      <Collapsible.Content padding="none">
+    <>
+      <Collapsible collapsed={isCollapsed}>
+        <Flex
+            align="center"
+            cursor="pointer"
+            gap="sm"
+            htmlOptions={{onClick:() => setIsCollapsed(!isCollapsed)}}
+            justify="between"
+            position="sticky"
+            top="0"
+        >
+          <Title
+              dark={props.dark}
+              size={4}
+              text="Custom Main Section"
+          />
+          <Collapsible.Icon collapsed={isCollapsed} />
+        </Flex>
+        <Collapsible.Content 
+            padding="none"
+        >
           <div>
           <List>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
               <ListItem 
                   align="stretch"
                   flexDirection="column" 
               >
-                Checklist item
+                {"Checklist item"}
               </ListItem>
             </List>
           </div>
       </Collapsible.Content>
     </Collapsible>
-   
   </>
   )
 }
 
+CollapsibleCustomMainWithIcon.propTypes = {
+  dark: PropTypes.bool,
+}
+
 export default CollapsibleCustomMainWithIcon

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_custom_main_with_icon_rails.html.erb

@@ -1,12 +1,8 @@
 <%= pb_rails("collapsible", props: { name: "default-example" }) do %>
-    <%= pb_rails("background", props: { background_color: "white", position: "sticky", top: "0", cursor:"pointer", data: {"collapsible-main": "true"} }) do %>
-      <%= pb_rails("flex", props: {align:"center", gap:"sm", justify:"between"}) do %>
-        <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
+  <%= pb_rails("flex", props: { position: "sticky", top: "0", cursor: "pointer", data: { "collapsible-main": "true" }, align: "center", gap: "sm", justify: "between" }) do %>
+    <%= pb_rails("title", props: { text: "Custom Main Section", tag: "h4", size: 4 }) %>
     <%= pb_rails("collapsible/collapsible_icon") %>
-     <% end %>
-      <% end %>
-     <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
-    <% end %>
+  <% end %>
       <%= pb_rails("collapsible/collapsible_content", props: { padding: "none"  }) do %>
         <%= pb_rails("list", props: {ordered: false, dark: false, borderless: false}) do %>
             <%= pb_rails("list/item") do %> Checklist Item <% end %>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx

@@ -7,6 +7,7 @@ const CollapsibleIcons = (props) => {
   <>
   <Collapsible
       icon={['plus','minus']}
+      iconColor='white'
   >
     <Collapsible.Main {...props}>
       <div>{'Main Section'}</div>

data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types';
 import { Collapsible, useCollapsible, Button } from '../..'
 
 const CollapsibleState = (props) => {
@@ -7,6 +8,7 @@ const CollapsibleState = (props) => {
   return (
   <>
     <Button
+        dark={props.dark}
         onClick={() => setIsCollapsed(!isCollapsed)}
         padding="none"
         variant="link"
@@ -17,6 +19,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -35,6 +38,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
       <Collapsible.Main padding="sm" 
@@ -53,6 +57,7 @@ const CollapsibleState = (props) => {
     <Collapsible
         collapsed={isCollapsed}
         icon={["plus", "minus"]}
+        iconColor='white'
         padding="none"
     >
         <Collapsible.Main padding="sm" 
@@ -72,4 +77,8 @@ const CollapsibleState = (props) => {
   )
 }
 
+CollapsibleState.propTypes = {
+  dark: PropTypes.bool,
+}
+
 export default CollapsibleState

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -8,23 +8,23 @@ import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import Icon from '../pb_icon/_icon'
 
-const contactTypeMap: { [key: string]: string; } = {
+const contactTypeMap: { [key: string]: string } = {
   'cell': 'mobile',
   'email': 'envelope',
+  'extension': 'phone-plus',
   'home': 'phone',
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
   'wrong-phone': 'phone-slash',
-  'extension': 'phone-plus',
 }
 
 const formatContact = (contactString: string, contactType: string) => {
-  if (contactType == 'email') return contactString
+  if (contactType === 'email') return contactString
 
   const cleaned = contactString.replace(/\D/g, '')
   const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
 
-  if(contactType == 'extension') {
+  if (contactType === 'extension') {
     return cleaned.match(/^\d{4}$/)
   }
 
@@ -40,19 +40,20 @@ const formatContact = (contactString: string, contactType: string) => {
       phoneNumber[4],
     ].join('')
   }
-  
+
   return null
 }
 
 type ContactProps = {
-  aria?: { [key: string]: string; },
-  className?: string | string[],
-  contactDetail?: string,
-  contactType?: string,
-  contactValue: string,
-  data?: {[key: string]: string},
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
+  aria?: { [key: string]: string }
+  className?: string | string[]
+  contactDetail?: string
+  contactType?: string
+  contactValue: string
+  data?: { [key: string]: string }
+  dark?: boolean
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) }
+  id?: string
 }
 
 const Contact = (props: ContactProps): React.ReactElement => {
@@ -63,8 +64,10 @@ const Contact = (props: ContactProps): React.ReactElement => {
     contactType,
     contactValue,
     data = {},
+    dark = false,
     htmlOptions = {},
-    id } = props
+    id,
+  } = props
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
@@ -73,6 +76,7 @@ const Contact = (props: ContactProps): React.ReactElement => {
     globalProps(props),
     className
   )
+
   return (
     <div
         {...ariaProps}
@@ -83,25 +87,27 @@ const Contact = (props: ContactProps): React.ReactElement => {
     >
       <Body
           className="pb_contact_kit"
-          color="light"
+          color={"light"} 
+          dark={dark}
           tag="span"
       >
         <Icon
+            dark={dark}
             fixedWidth
             icon={contactTypeMap[contactType] || 'phone'}
         />
         {` ${formatContact(contactValue, contactType)} `}
-        {
-          contactDetail &&
+        {contactDetail && (
           <Caption
+              dark={dark}
               size="xs"
               tag="span"
               text={contactDetail}
           />
-        }
+        )}
       </Body>
     </div>
   )
 }
 
-export default Contact
+export default Contact

data/app/pb_kits/playbook/pb_contact/contact.html.erb

@@ -2,18 +2,21 @@
   <%= pb_rails("body", props: { 
         tag: "span", 
         classname: "pb_contact_kit", 
-        color: "light" 
+        color: "light",
+        dark: object.dark
       }) do %>
     <%= pb_rails("icon", props: { 
           icon: object.contact_icon, 
-          fixed_width: true 
+          fixed_width: true,
+          dark: object.dark
         }) %>
     <%= object.formatted_contact_value if object.contact_value %>
 
     <%= pb_rails("caption", props: { 
           text: object.contact_detail, 
           tag: 'span', 
-          size: 'xs'
+          size: 'xs',
+          dark: object.dark
         }) if object.contact_detail %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx

@@ -10,16 +10,16 @@ import Caption from "../pb_caption/_caption";
 import Icon from "../pb_icon/_icon";
 
 type DateRangeInlineProps = {
-  className?: string;
-  id?: string;
-  data?: string;
   align?: "left" | "center" | "vertical";
-  size?: "sm" | "xs";
+  className?: string;
   dark?: boolean;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => any)};
+  data?: string;
+  endDate?: Date;
+  htmlOptions?: { [key: string]: string | number | boolean | (() => any) };
   icon?: boolean;
+  id?: string;
+  size?: "sm" | "xs";
   startDate?: Date;
-  endDate?: Date;
 };
 
 const dateTimestamp = (dateValue: Date, includeYear: boolean) => {
@@ -36,59 +36,36 @@ const dateTimeIso = (dateValue: Date) => {
 
 const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
   const {
-    icon = false,
-    dark = false,
-    size = "sm",
     align = "left",
+    className,
+    dark = false,
     data = {},
+    endDate,
     htmlOptions = {},
+    icon = false,
+    size = "sm",
     startDate,
-    endDate,
-    className,
   } = props;
 
-  const iconContent = () => {
-    return (
-      <>
-        {icon && (
-          <>
-            <Body color="light"
-                key={Math.random()}
-                tag="span"
-            >
-              <Icon
-                  className="pb_date_range_inline_icon"
-                  dark={dark}
-                  fixedWidth
-                  icon="calendar-alt"
-                  size={size}
-                  tag="span"
-              />
-            </Body>
-          </>
-        )}
-      </>
-    );
-  };
-
   const dateInCurrentYear = () => {
     const currentDate = new Date();
     return (
-      startDate.getFullYear() == endDate.getFullYear() &&
-      startDate.getFullYear() == currentDate.getFullYear()
+      startDate?.getFullYear() === endDate?.getFullYear() &&
+      startDate?.getFullYear() === currentDate.getFullYear()
     );
   };
 
   const dateRangeClasses = buildCss("pb_date_range_inline_kit", align);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions)
+  const dataProps = buildDataProps(data);
+  const htmlProps = buildHtmlProps(htmlOptions);
+  
   const renderTime = (date: Date) => {
     return (
       <time dateTime={dateTimeIso(date)}>
         {dateInCurrentYear() ? (
-          <>{` ${dateTimestamp(date, false)} `}</>
+          ` ${dateTimestamp(date, false)} `
         ) : (
-          <>{` ${dateTimestamp(date, true)} `}</>
+          ` ${dateTimestamp(date, true)} `
         )}
       </time>
     );
@@ -101,53 +78,83 @@ const DateRangeInline = (props: DateRangeInlineProps): React.ReactElement => {
         className={classnames(dateRangeClasses, globalProps(props), className)}
     >
       <div className="pb_date_range_inline_wrapper">
-        {size == "xs" && (
+        {size === "xs" && (
           <>
-            {iconContent()}
-            <Caption dark={dark}
-                tag="span"
-            >
+            {icon && (
+              <Caption 
+                  dark={dark} 
+                  tag="span">
+                <Icon
+                    className="pb_date_range_inline_icon"
+                    dark={dark}
+                    fixedWidth
+                    icon="calendar-alt"
+                    size={size}
+                    tag="span"
+                />
+              </Caption>
+            )}
+            <Caption 
+                dark={dark} 
+                tag="span">
               {renderTime(startDate)}
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption 
+                dark={dark} 
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
+                  dark={dark}
                   fixedWidth
                   icon="long-arrow-right"
+                  tag="span"
               />
             </Caption>
-            <Caption dark={dark}
-                tag="span"
-            >
+            <Caption 
+                dark={dark} 
+                tag="span">
               {renderTime(endDate)}
             </Caption>
           </>
         )}
 
-        {size == "sm" && (
+        {size === "sm" && (
           <>
-            {iconContent()}
-            <Body dark={dark}
-                tag="span"
-            >
+            {icon && (
+              <Body 
+                  color={"light"} 
+                  dark={dark}
+                  tag="span">
+                <Icon
+                    className="pb_date_range_inline_icon"
+                    dark={dark}
+                    fixedWidth
+                    icon="calendar-alt"
+                    size={size}
+                    tag="span"
+                />
+              </Body>
+            )}
+            <Body 
+                dark={dark} 
+                tag="span">
               {renderTime(startDate)}
             </Body>
-            <Body color="light"
-                dark={dark}
-                tag="span"
-            >
+            <Body 
+                color={"light"} 
+                dark={dark} 
+                tag="span">
               <Icon
                   className="pb_date_range_inline_arrow"
                   dark={dark}
                   fixedWidth
                   icon="long-arrow-right"
+                  tag="span"
               />
             </Body>
-            <Body dark={dark}
-                tag="span"
-            >
+            <Body 
+                dark={dark} 
+                tag="span">
               {renderTime(endDate)}
             </Body>
           </>

data/app/pb_kits/playbook/pb_detail/detail.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(object.tag,
-    aria: object.aria,
-    class: object.classname,
-    data: object.data,
-    id: object.id,
-    **combined_html_options) do %>
+<%= pb_content_tag(object.tag) do %>
   <%= object.content %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -1,10 +1,5 @@
 <div class="pb_dialog_wrapper_rails <%= object.full_height_style %>" data-overlay-click= <%= object.overlay_close %> >
-    <%= content_tag(:dialog,
-        aria: object.aria,
-        data: object.data,
-        id: object.id,
-        class: object.classname,
-        **combined_html_options) do %>
+    <%= pb_content_tag(:dialog) do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_body.html.erb

@@ -1,8 +1,3 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.classname,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag do %>
         <%= content.presence || object.text %>
 <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -1,8 +1,5 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, class: "") do %>
+  <%  'excluded classname?'  %>
     <% if object.confirm_button && object.cancel_button %>
         <div class="dialog-pseudo-footer"></div>
         <%= pb_rails("flex", props: { classname:object.classname, spacing:"between", padding_x:"sm", padding:"sm", padding_bottom:"sm" }) do %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -1,9 +1,4 @@
-<%= content_tag(:div,
-    id: object.id,
-    data: object.data,
-    class: object.sticky_header,
-    aria: object.aria,
-    **combined_html_options) do %>
+<%= pb_content_tag(:div, class: object.sticky_header) do %>
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 

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

@@ -8,9 +8,13 @@
         <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
-        <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value="<%= input_default_value %>" />
-        <input id="dropdown-form-validation" name="<%= object.name %>_form_validation" value="<%= input_default_value %>" 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 %>
             <%= pb_rails("body", props: { status: "negative", text: object.error }) %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -29,7 +29,7 @@ module Playbook
       end
 
       def input_default_value
-        default_value.present? ? default_value.transform_keys(&:to_s) : ""
+        default_value.present? ? default_value.transform_keys(&:to_s)["id"] : ""
       end
 
       def options_with_blank