playbook_ui 14.16.0.pre.alpha.play1957inlinedatepickericonbugfix6872 → 14.16.0.pre.alpha.play1959tablekitstripedlogicoverridesbackground6893

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6ac4260b02869cad3eaa3d0c49e523d9f4a4463cfccf98858f504172eaf1d601
-  data.tar.gz: 1f91664b626b1362cf6b61ebf15ae1681830e96a3fb6d2bcd8601a2c50ea4a7a
+  metadata.gz: b1b61bbe353c51c6d0b9b65fe43a989ecd07bc6383f816a8ca36385541a8fab3
+  data.tar.gz: 9e0b3698c30553e33d081a9cd6eb70d1a299b5a309ae197cbb44ce65b1be3e69
 SHA512:
-  metadata.gz: 1176546d1665cfe26fa78e48ad632470539f9b5bef9be47c28f60b238901c6237e236b413d09856ecde5d8f1166b3f9cc22e0c45e3e1d96c170b68d28dc2eeef
-  data.tar.gz: 327c8ebe3c86777bffeb9af8b56ba1ab2ff2033b2245d728170ae3d86a164881abd90a0bbf691a01bce8c000a2bef515609e3c463313a4869ec36915e9e396c7
+  metadata.gz: db55d048eb70afdb219b9e6bcc9eb44301414a209daf19fff52a4b858e744eda43764ce1e3abb7f94c3eb4d8b1fbd208405f1ec45a00bb9bf33cc2049a7cba51
+  data.tar.gz: 0afca121c5aab26a344906909da824344db35d0fcf0b74c5f4450a1204cd1606ac0888e26c2c7a8dd71a2f4ae128864aae0bb25b928c1da482c78e213522cbe1

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx

@@ -167,93 +167,95 @@ const AdvancedTable = (props: AdvancedTableProps) => {
   const isActionBarVisible = selectableRows && showActionsBar && selectedRowsLength > 0;
 
   return (
-    <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
-        onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
-          e.currentTarget,
-          fetchNextPage,
-          isFetching,
-          totalFetched,
-          fullData.length
-        ) : undefined}
-        ref={tableWrapperRef}
-        style={tableWrapperStyle as React.CSSProperties}
-    >
-      <AdvancedTableProvider
-          columnDefinitions={columnDefinitions}
-          enableToggleExpansion={enableToggleExpansion}
-          enableVirtualization={virtualizedRows}
-          expanded={expanded}
-          expandedControl={expandedControl}
-          handleExpandOrCollapse={handleExpandOrCollapse}
-          hasAnySubRows={hasAnySubRows}
-          inlineRowLoading={inlineRowLoading}
-          isActionBarVisible={isActionBarVisible}
-          loading={loading}
-          responsive={responsive}
-          selectableRows={selectableRows}
-          setExpanded={setExpanded}
-          showActionsBar={showActionsBar}
-          sortControl={sortControl}
-          subRowHeaders={tableOptions?.subRowHeaders}
-          table={table}
-          tableContainerRef={tableWrapperRef}
-          toggleExpansionIcon={toggleExpansionIcon}
-          virtualizedRows={virtualizedRows}
+    <>
+      {/* Top Pagination */}
+      {pagination && (
+        <TablePagination
+            onChange={onPageChange}
+            position="top"
+            range={paginationProps?.range}
+            table={table}
+        />
+      )}
+
+      <div
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+          onScroll={virtualizedRows ? e => fetchMoreOnBottomReached(
+            e.currentTarget,
+            fetchNextPage,
+            isFetching,
+            totalFetched,
+            fullData.length
+          ) : undefined}
+          ref={tableWrapperRef}
+          style={tableWrapperStyle as React.CSSProperties}
       >
-        <React.Fragment>
-          {/* Top Pagination */}
-          {pagination && (
-            <TablePagination
-                onChange={onPageChange}
-                position="top"
-                range={paginationProps?.range}
-                table={table}
+        <AdvancedTableProvider
+            columnDefinitions={columnDefinitions}
+            enableToggleExpansion={enableToggleExpansion}
+            enableVirtualization={virtualizedRows}
+            expanded={expanded}
+            expandedControl={expandedControl}
+            handleExpandOrCollapse={handleExpandOrCollapse}
+            hasAnySubRows={hasAnySubRows}
+            inlineRowLoading={inlineRowLoading}
+            isActionBarVisible={isActionBarVisible}
+            loading={loading}
+            responsive={responsive}
+            selectableRows={selectableRows}
+            setExpanded={setExpanded}
+            showActionsBar={showActionsBar}
+            sortControl={sortControl}
+            subRowHeaders={tableOptions?.subRowHeaders}
+            table={table}
+            tableContainerRef={tableWrapperRef}
+            toggleExpansionIcon={toggleExpansionIcon}
+            virtualizedRows={virtualizedRows}
+        >
+          <React.Fragment>
+            {/* Selection Action Bar */}
+            <TableActionBar
+                actions={actions}
+                isVisible={isActionBarVisible}
+                selectedCount={selectedRowsLength}
             />
-          )}
-
-          {/* Selection Action Bar */}
-          <TableActionBar
-              actions={actions}
-              isVisible={isActionBarVisible}
-              selectedCount={selectedRowsLength}
-          />
 
-          {/* Main Table */}
-          <Table
-              className={`${loading ? "content-loading" : ""}`}
-              dark={dark}
-              dataTable
-              numberSpacing="tabular"
-              responsive="none"
-              {...tableProps}
-          >
-            {children ? (
-              children
-            ) : (
-              <>
-                <TableHeader />
-                <TableBody />
-              </>
-            )}
-          </Table>
-
-          {/* Bottom Pagination */}
-          {pagination && (
-            <TablePagination
-                onChange={onPageChange}
-                position="bottom"
-                range={paginationProps?.range}
-                table={table}
-            />
-          )}
-        </React.Fragment>
-      </AdvancedTableProvider>
-    </div>
+            {/* Main Table */}
+            <Table
+                className={`${loading ? "content-loading" : ""}`}
+                dark={dark}
+                dataTable
+                numberSpacing="tabular"
+                responsive="none"
+                {...tableProps}
+            >
+              {children ? (
+                children
+              ) : (
+                <>
+                  <TableHeader />
+                  <TableBody />
+                </>
+              )}
+            </Table>
+          </React.Fragment>
+        </AdvancedTableProvider>
+     
+      </div>
+ {/* Bottom Pagination */}
+      {pagination && (
+        <TablePagination
+            onChange={onPageChange}
+            position="bottom"
+            range={paginationProps?.range}
+            table={table}
+        />
+      )}
+    </>
   );
 };
 

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

@@ -40,7 +40,6 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -63,11 +63,6 @@ $pb_button_sizes: (
     color: $text_lt_lighter;
   }
 
-  // Disabled =================
-  &[class*=_disabled]  {
-    @include pb_button_disabled;
-  }
-
   // Block ====================
   &[class*=_block]  {
     @include pb_button_block;
@@ -83,6 +78,11 @@ $pb_button_sizes: (
     @include pb_button_danger;
   }
 
+  // Disabled =================
+  &[class*=_disabled]  {
+    @include pb_button_disabled;
+  }
+
   // Dark Variants =============
   &.dark  {
     &[class*=_primary]  {

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -106,41 +106,41 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
-  useEffect(() => {
-    datePickerHelper({
-      allowInput,
-      customQuickPickDates,
-      defaultDate,
-      disableDate,
-      disableRange,
-      disableWeekdays,
-      enableTime,
-      format,
-      hideIcon,
-      inLine,
-      maxDate,
-      minDate,
-      mode,
-      onChange,
-      onClose,
-      pickerId,
-      plugins,
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore
-      position,
-      positionElement,
-      selectionType,
-      showTimezone,
-      staticPosition,
-      thisRangesEndToday,
-      yearRange,
-      required: false,
-    }, scrollContainer)
-  }, initializeOnce ? [] : undefined)
+useEffect(() => {
+  datePickerHelper({
+    allowInput,
+    customQuickPickDates,
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    enableTime,
+    format,
+    hideIcon,
+    inLine,
+    maxDate,
+    minDate,
+    mode,
+    onChange,
+    onClose,
+    pickerId,
+    plugins,
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    position,
+    positionElement,
+    selectionType,
+    showTimezone,
+    staticPosition,
+    thisRangesEndToday,
+    yearRange,
+    required: false,
+  }, scrollContainer)
+}, initializeOnce ? [] : undefined)
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
-  }
+  } 
   delete filteredProps?.position
 
   const classes = classnames(
@@ -221,7 +221,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
             {hideIcon && inLine ?
               <div>
                 <div
-                    className={`${iconWrapperClass()} date-picker-inline-icon-plus`}
+                    className={iconWrapperClass()}
                     id={`${pickerId}-icon-plus`}
                 >
                   <Icon
@@ -230,7 +230,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   />
                 </div>
                 <div
-                    className={`${iconWrapperClass()} date-picker-inline-angle-down`}
+                    className={iconWrapperClass()}
                     id={`${pickerId}-angle-down`}
                 >
                   <Icon

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

@@ -44,7 +44,7 @@
     <% if object.hide_icon && object.inline %>
       <!-- Plus Icon -->
       <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-icon-plus"
+          class="<%= object.icon_wrapper_class %>"
           id="<%= object.picker_id %>-icon-plus"
       >
         <%= pb_rails("icon", props: {
@@ -55,7 +55,7 @@
 
       <!-- Angle Down Icon -->
       <div
-          class="<%= object.icon_wrapper_class %> date-picker-inline-angle-down"
+          class="<%= object.icon_wrapper_class %>"
           id="<%= object.picker_id %>-angle-down"
       >
         <%= pb_rails("icon", props: {

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -174,21 +174,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       yearInput.value = fp.currentYear?.toString()
   }
 
-  const handleDatePickerChange = (fp: Instance, selectedDates: Date[]) => {
-    const inputEl = fp.input
-
-    if (inputEl) {
-      const inlineDatePickerElem = inputEl.closest('.inline-date-picker')
-      if (inlineDatePickerElem) {
-        if (selectedDates && selectedDates.length > 0) {
-          inlineDatePickerElem.classList.add('show-angle-down-icon')
-        } else {
-          inlineDatePickerElem.classList.remove('show-angle-down-icon')
-        }
-      }
-    }
-  }
-
   // ===========================================================
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
@@ -219,7 +204,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
       onClose(selectedDates, dateStr)
     }],
     onChange: [(selectedDates, dateStr, fp) => {
-      handleDatePickerChange(fp, selectedDates)
       yearChangeHook(fp)
       onChange(dateStr, selectedDates)
     }],

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb

@@ -4,3 +4,14 @@
   inline: true,
   picker_id: "date-picker-inline"
 }) %>
+
+<%= javascript_tag do %>
+  window.addEventListener("DOMContentLoaded", (event) => {
+    const fpInline = document.querySelector("#date-picker-inline")._flatpickr
+    <!-- Display the angle-down icon when a date has been selected -->
+    const showAngleDownHandler = () => {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+    fpInline.config.onChange.push(showAngleDownHandler)
+  })
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx

@@ -3,12 +3,19 @@ import React from 'react'
 import DatePicker from '../_date_picker'
 
 const DatePickerInline = (props) => {
+  const showAngleDownHandler = (dateSelected) => {
+    if (dateSelected) {
+      document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
+    }
+  }
+
   return (
     <div>
       <DatePicker
           className="inline-date-picker"
           hideIcon
           inLine
+          onChange={showAngleDownHandler}
           pickerId="date-picker-inline"
           {...props}
       />

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss

@@ -14,12 +14,12 @@
       opacity: 1;
     }
     &:not(:hover) {
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           color: $slate;
           display: inline-block;
@@ -33,12 +33,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $primary;
       }
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: inline-block;
           color: $primary;
@@ -47,34 +47,32 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        .date-picker-inline-angle-down.cal_icon_wrapper {
+        #date-picker-inline-angle-down {
           svg {
             display: inline-block;
             color: $text_lt_light;
           }
         }
-        .date-picker-inline-icon-plus.cal_icon_wrapper {
+        #date-picker-inline-icon-plus {
           svg {
             display: none;
           }
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: inline-block;
           color: $primary;
         }
       }
     }
-    .date_picker_input.flatpickr-input,
-    .date_picker_input.flatpickr-input .active,
-    .text_input.flatpickr-input,
-    .text_input.flatpickr-input .active      {
+    #date-picker-inline,
+    #date-picker-inline .active {
       border: none;
       padding: 5px 5px 5px 10px;
       background-color: #FFF;
@@ -84,8 +82,8 @@
         box-shadow: none;
       }
     }
-    .date-picker-inline-angle-down.cal_icon_wrapper,
-    .date-picker-inline-icon-plus.cal_icon_wrapper {
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
       height: 33px;
       border: none;
     }
@@ -98,12 +96,12 @@
 [class^=pb_date_picker_kit].dark {
   &.inline-date-picker {
     &:not(:hover) {
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: inline-block;
           color: $white;
@@ -117,12 +115,12 @@
       [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $white;
       }
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: inline-block;
           color: $white;
@@ -131,34 +129,32 @@
     }
     &.show-angle-down-icon {
       &:not(:hover) {
-        .date-picker-inline-angle-down.cal_icon_wrapper {
+        #date-picker-inline-angle-down {
           svg {
             display: inline-block;
             color: $white;
           }
         }
-        .date-picker-inline-icon-plus.cal_icon_wrapper {
+        #date-picker-inline-icon-plus {
           svg {
             display: none;
           }
         }
       }
-      .date-picker-inline-icon-plus.cal_icon_wrapper {
+      #date-picker-inline-icon-plus {
         svg {
           display: none;
         }
       }
-      .date-picker-inline-angle-down.cal_icon_wrapper {
+      #date-picker-inline-angle-down {
         svg {
           display: inline-block;
           color: $white;
         }
       }
     }
-    .date_picker_input.flatpickr-input,
-    .date_picker_input.flatpickr-input .active,
-    .text_input.flatpickr-input,
-    .text_input.flatpickr-input .active {
+    #date-picker-inline,
+    #date-picker-inline .active {
       background-color: rgba($white,.10);
       border: none;
       padding: 5px 5px 5px 10px;
@@ -168,8 +164,8 @@
         box-shadow: none;
       }
     }
-    .date-picker-inline-angle-down.cal_icon_wrapper,
-    .date-picker-inline-icon-plus.cal_icon_wrapper {
+    #date-picker-inline-angle-down,
+    #date-picker-inline-icon-plus {
       height: 33px;
       border: none;
     }

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx

@@ -32,11 +32,12 @@ type RichTextEditorProps = {
   advancedEditor?: any,
   advancedEditorToolbar?: boolean,
   toolbarBottom?: boolean,
-  children?: React.ReactNode | React.ReactNode[]
+  children?: React.ReactNode | React.ReactNode[],
   className?: string,
   data?: { [key: string]: string },
   focus?: boolean,
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
+  inputOptions?: { [key: string]: string | number | boolean | (() => void) },
   id?: string,
   inline?: boolean,
   extensions?: { [key: string]: string }[],
@@ -61,6 +62,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     data = {},
     focus = false,
     htmlOptions = {},
+    inputOptions = {},
     inline = false,
     extensions,
     name,
@@ -70,7 +72,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     sticky = false,
     template = '',
     value = '',
-    maxWidth="md"
+    maxWidth = "md"
   } = props
 
   const ariaProps = buildAriaProps(aria),
@@ -79,12 +81,28 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
   const htmlProps = buildHtmlProps(htmlOptions)
   
-  const handleOnEditorReady = (editorInstance: Editor) => setEditor(editorInstance),
-    element = editor?.element
+  const handleOnEditorReady = (editorInstance: Editor) => {
+    setEditor(editorInstance)
+    setTimeout(() => {
+      const oldId = editorInstance.element.getAttribute('input')
+      if (oldId) {
+        const hiddenInput = document.getElementById(oldId)
+        if (hiddenInput) {
+          const newId = (inputOptions.id as string) || oldId  
+          hiddenInput.id = newId
+          editorInstance.element.setAttribute('input', newId)
+
+          if (inputOptions.name) {
+            hiddenInput.setAttribute('name', inputOptions.name as string)
+          }
+        }
+      }
+    })
+  }
 
   // DOM manipulation must wait for editor to be ready
-  if (editor) {
-    const toolbarElement = element.parentElement.querySelector('trix-toolbar') as HTMLElement,
+  if (editor && editor.element) {
+    const toolbarElement = editor.element.parentElement.querySelector('trix-toolbar') as HTMLElement,
       blockCodeButton = toolbarElement.querySelector('[data-trix-attribute=code]') as HTMLElement
 
     // replace default trix "block code" button with "inline code" button
@@ -118,8 +136,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   }, [editor, template])
 
   useEffect(() => {
-    if (!element) return
-    element.addEventListener('click', ({ target }: Event) => {
+    if (!editor?.element) return
+    editor.element.addEventListener('click', ({ target }: Event) => {
       const trixEditorContainer = (target as Element).closest('.pb_rich_text_editor_kit')
       if (!trixEditorContainer) return
 
@@ -128,7 +146,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
 
       if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
     })
-  }, [element])
+  }, [editor])
 
   const richTextEditorClass = 'pb_rich_text_editor_kit',
     simpleClass = simple ? 'simple' : '',
@@ -137,7 +155,7 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     inlineClass = inline ? 'inline' : '',
     toolbarBottomClass = toolbarBottom ? 'toolbar-bottom' : ''
 
-  let css = classnames(globalProps(props, {maxWidth}), className)
+  let css = classnames(globalProps(props, { maxWidth }), className)
   css = classnames(
     richTextEditorClass,
     simpleClass,

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb

@@ -1 +1 @@
-<%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>
+<%= pb_rails("rich_text_editor", props: {input_options: { id: 'hidden_input_id', name: "hidden_input_name" }, value: "Add your text here. You can format your text, add links, quotes, and bullets."}) %>

data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb

@@ -1,5 +1,5 @@
 <%= react_component('RichTextEditor',
-  object.rich_text_options,
-  aria: object.aria,
-  data: object.data
-) %>
+                    object.rich_text_options,
+                    aria: object.aria,
+                    data: object.data
+                   ) %>