playbook_ui 14.9.0 → 14.10.0.pre.alpha.PBNTR775formmatingmaskdefaultvalue5137

data/app/pb_kits/playbook/pb_table/index.ts

@@ -1,32 +1,108 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-  static get selector(): string {
-    return '.table-responsive-collapse'
-  }
-
-  connect(): void {
-    const tables = document.querySelectorAll('.table-responsive-collapse');
-
-    // Each Table
-    [].forEach.call(tables, (table: HTMLTableElement) => {
-      // Header Titles
-      const headers: string[] = [];
-      [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
-        const colSpan = header.colSpan
-        for (let i = 0; i < colSpan; i++) {
-          headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+    private stickyLeftColumns: string[] = [];
+    private handleStickyColumnsRef: () => void;
+
+    static get selector(): string {
+      return '.table-responsive-collapse'
+    }
+
+    connect(): void {
+      const tables = document.querySelectorAll('.table-responsive-collapse');
+      // Each Table
+      [].forEach.call(tables, (table: HTMLTableElement) => {
+        // Header Titles
+        const headers: string[] = [];
+        [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
+            const colSpan = header.colSpan
+            for (let i = 0; i < colSpan; i++) {
+              headers.push(header.textContent.replace(/\r?\n|\r/, ''));
+            }
+        });
+        // for each row in tbody
+        [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
+          // for each cell
+          [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
+            // apply the attribute
+            cell.setAttribute('data-title', headers[headerIndex])
+          })
+        })
+      });
+
+      // New sticky columns logic
+      this.initStickyColumns();
+    }
+
+    private initStickyColumns(): void {
+      // Find tables with sticky-left-column class
+      const tables = document.querySelectorAll('.sticky-left-column');
+
+      tables.forEach((table) => {
+        // Extract sticky left column IDs by looking at the component's class
+        const classList = Array.from(table.classList);
+
+        // Look for classes in the format sticky-left-column-{ids}
+        const stickyColumnClass = classList.find(cls => cls.startsWith('sticky-columns-'));
+        if (stickyColumnClass) {
+          // Extract the IDs from the class name
+          this.stickyLeftColumns = stickyColumnClass
+              .replace('sticky-columns-', '')
+              .split('-');
+
+          if (this.stickyLeftColumns.length > 0) {
+            setTimeout(() => {
+              this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
+              this.handleStickyColumns();
+              window.addEventListener('resize', this.handleStickyColumnsRef);
+            }, 10);
+          }
         }
       });
+    }
 
-      // for each row in tbody
-      [].forEach.call(table.querySelectorAll('tbody tr'), (row: HTMLTableRowElement) => {
-        // for each cell
-        [].forEach.call(row.cells, (cell: HTMLTableCellElement, headerIndex: number) => {
-          // apply the attribute
-          cell.setAttribute('data-title', headers[headerIndex])
-        })
-      })
-    })
-  }
-}
+    private handleStickyColumns(): void {
+      let accumulatedWidth = 0;
+
+      this.stickyLeftColumns.forEach((colId, index) => {
+        const isLastColumn = index === this.stickyLeftColumns.length - 1;
+        const header = document.querySelector(`th[id="${colId}"]`);
+        const cells = document.querySelectorAll(`td[id="${colId}"]`);
+
+        if (header) {
+          header.classList.add('sticky');
+          (header as HTMLElement).style.left = `${accumulatedWidth}px`;
+
+          if (!isLastColumn) {
+            header.classList.add('with-border');
+            header.classList.remove('sticky-shadow');
+          } else {
+            header.classList.remove('with-border');
+            header.classList.add('sticky-shadow');
+          }
+
+          accumulatedWidth += (header as HTMLElement).offsetWidth;
+        }
+
+        cells.forEach((cell) => {
+          cell.classList.add('sticky');
+          (cell as HTMLElement).style.left = `${accumulatedWidth - (header as HTMLElement).offsetWidth}px`;
+
+          if (!isLastColumn) {
+            cell.classList.add('with-border');
+            cell.classList.remove('sticky-shadow');
+          } else {
+            cell.classList.remove('with-border');
+            cell.classList.add('sticky-shadow');
+          }
+        });
+      });
+    }
+
+    // Cleanup method to remove event listener
+    disconnect(): void {
+      if (this.handleStickyColumnsRef) {
+        window.removeEventListener('resize', this.handleStickyColumnsRef);
+      }
+    }
+}

data/app/pb_kits/playbook/pb_table/styles/_all.scss

@@ -21,4 +21,5 @@
 @import "striped";
 @import "outer_padding";
 @import "sticky_columns";
-@import "scroll";
+@import "scroll";
+@import "collapsible";

data/app/pb_kits/playbook/pb_table/styles/_collapsible.scss

@@ -0,0 +1,35 @@
+@import "../../tokens/colors";
+
+.table_collapsible_side_highlight {
+  border-left: 4px solid $primary;
+  &.dark {
+    border-left: 4px solid $active_dark;
+  }
+}
+
+[class^="pb_table"] {
+  &.table-sm,
+  &.table-md,
+  &.table-lg {
+    &.table-card {
+      tbody,
+      .pb_table_tbody {
+        tr,
+        .pb_table_tr {
+          &.collapsible_table_row {
+            td,
+            .pb_table_td {
+              border-bottom-color: transparent;
+            }
+            &:hover {
+              td,
+              .pb_table_td {
+                border-bottom-color: darken($border_light, 10%);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -1,4 +1,29 @@
-    .table-responsive-scroll {
-        display: block;
-        overflow-x: auto;
+@import "../../tokens/screen_sizes";
+
+.table-responsive-scroll {
+    display: block;
+    overflow-x: scroll;
+
+    // Responsive Styles
+    @media (max-width: 1600px) {
+        &[class*="table-responsive-scroll"] {
+            border-radius: 4px;
+            box-shadow: 1px 0 0 0px $border_light
+          }
+
+        &[class^=pb_table].table-sm.table-card thead tr th:last-child,
+        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+            border-right-width: 0px;
+        }
+
+        &[class^=pb_table].table-md.table-card thead tr th:last-child,
+        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
+            border-right-width: 0px;
+        }
+
+        &[class^=pb_table].table-lg.table-card thead tr th:last-child,
+        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
+            border-right-width: 0px;
+        }
     }
+}

data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss

@@ -3,7 +3,6 @@
 [class^="pb_table"] {
     .sticky {
         position: sticky !important;
-        left: 0;
         z-index: 1;
         background-color: white;
     }

data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx

@@ -7,14 +7,21 @@ import {
   buildHtmlProps,
 } from "../../utilities/props";
 import { globalProps } from "../../utilities/globalProps";
+import Collapsible from "../../pb_collapsible/_collapsible";
+import useCollapsible from "../../pb_collapsible/useCollapsible";
 
 type TableRowPropTypes = {
   aria?: { [key: string]: string };
   children: React.ReactNode[] | React.ReactNode;
   className: string;
+  collapsible?: boolean;
+  collapsibleContent?: React.ReactNode[] | React.ReactNode;
+  collapsibleSideHighlight?: boolean;
   data?: { [key: string]: string };
+  dark?: boolean;
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
+  toggleCellId?: string;
   sideHighlightColor: string;
   tag?: "table" | "div";
 };
@@ -23,10 +30,15 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const {
     aria = {},
     children,
+    collapsible,
+    collapsibleContent,
+    collapsibleSideHighlight = true,
     className,
     data = {},
+    dark = false,
     htmlOptions = {},
     id,
+    toggleCellId,
     sideHighlightColor = "none",
     tag = "table",
   } = props;
@@ -36,17 +48,110 @@ const TableRow = (props: TableRowPropTypes): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions);
   const sideHighlightClass =
     sideHighlightColor != "" ? `side_highlight_${sideHighlightColor}` : null;
+  
+  const [isCollapsed, setIsCollapsed] = useCollapsible(true);
+
+  const collapsibleRow = collapsible && isCollapsed === true ? "collapsible_table_row" : null;
   const classes = classnames(
     buildCss("pb_table_row_kit", sideHighlightClass),
     "pb_table_tr",
+    collapsibleRow,
     globalProps(props),
     className
   );
   const isTableTag = tag === "table";
 
+  // const [isCollapsed, setIsCollapsed] = useCollapsible(true);
+
+  const colSpan = React.Children.count(children);
+
+  const handleRowClick = (event: React.MouseEvent) => {
+    if (toggleCellId) {
+      const target = event.target as HTMLElement;
+      const clickedCell = target.closest(`#${toggleCellId}`);
+      const isIconClick =
+      target instanceof SVGElement &&
+      (target.matches("svg.pb_custom_icon") || target.closest("svg.pb_custom_icon"));
+
+        if (clickedCell || isIconClick) { 
+      setIsCollapsed(!isCollapsed);
+      }
+    } else {
+      setIsCollapsed(!isCollapsed);
+    }
+  };
+    
   return (
     <>
-      {isTableTag ? (
+      {collapsible ? (
+        isTableTag ? (
+          <>
+            <tr
+                {...ariaProps}
+                {...dataProps}
+                {...htmlProps}
+                className={classes}
+                id={id}
+                onClick={(e)=>handleRowClick(e)}
+                style={{ cursor: toggleCellId ? "default" : "pointer" }}
+            >
+              {children}
+            </tr>
+            <tr>
+              <Collapsible
+                  collapsed={isCollapsed}
+                  dark={dark}
+                  htmlOptions={{ colSpan: colSpan }}
+                  padding="none"
+                  tag="td"
+              >
+                <tr/>
+                <Collapsible.Content 
+                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
+                    dark={dark}
+                    margin="none"
+                    padding="none"
+                >
+                 {collapsibleContent}
+                </Collapsible.Content>
+              </Collapsible>
+            </tr>
+          </>
+        ) : (
+          <>
+            <div
+                {...ariaProps}
+                {...dataProps}
+                {...htmlProps}
+                className={classes}
+                id={id}
+                onClick={handleRowClick}
+                style={{ cursor: "pointer" }}
+            >
+              {children}
+            </div>
+            <tr>
+              <Collapsible
+                  collapsed={isCollapsed}
+                  dark={dark}
+                  htmlOptions={{ colSpan: colSpan }}
+                  padding="none"
+                  tag="td"
+              >
+                <tr/>
+                <Collapsible.Content 
+                    className={collapsibleSideHighlight ? `table_collapsible_side_highlight` : ''}
+                    dark={dark}
+                    margin="none"
+                    padding="none"
+                >
+                 {collapsibleContent}
+                </Collapsible.Content>
+              </Collapsible>
+            </tr>
+          </>
+        )
+      ) : isTableTag ? (
         <tr
             {...ariaProps}
             {...dataProps}

data/app/pb_kits/playbook/pb_table/table.html.erb

@@ -1,4 +1,10 @@
-<%= content_tag(:div) do %>
+<% if object.responsive_classname %>
+  <% responsive_class = object.responsive_classname %>
+<% else %>
+  <% responsive_class = nil %>
+<% end %>
+
+<%= content_tag(:div, class: responsive_class) do %>
   <% if object.tag == "table" %>
     <%= content_tag(:table,
       aria: object.aria,
@@ -18,4 +24,4 @@
       <%= content.presence %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/table.rb

@@ -23,6 +23,8 @@ module Playbook
       prop :text
       prop :sticky, type: Playbook::Props::Boolean,
                     default: false
+      prop :sticky_left_column, type: Playbook::Props::Array,
+                                default: []
       prop :vertical_border, type: Playbook::Props::Boolean,
                              default: false
       prop :striped, type: Playbook::Props::Boolean,
@@ -37,12 +39,16 @@ module Playbook
       def classname
         generate_classname(
           "pb_table", "table-#{size}", single_line_class, dark_class,
-          disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
-          vertical_border_class, striped_class, outer_padding_class,
+          disable_hover_class, container_class, data_table_class, sticky_class, sticky_left_column_class,
+          collapse_class, vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
 
+      def responsive_classname
+        responsive ? "table-responsive-#{responsive}" : nil
+      end
+
     private
 
       def dark_class
@@ -73,6 +79,19 @@ module Playbook
         sticky ? "sticky-header" : nil
       end
 
+      def sticky_left_column_class
+        if sticky_left_column.empty?
+          nil
+        else
+          sticky_col_classname = "sticky-left-column sticky-columns"
+          sticky_left_column.each do |id|
+            sticky_col_classname += "-#{id}"
+          end
+
+          sticky_col_classname
+        end
+      end
+
       def striped_class
         striped ? "striped" : nil
       end

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from 'react'
+import React, { forwardRef, ChangeEvent } from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
@@ -10,6 +10,8 @@ import Caption from '../pb_caption/_caption'
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
 
+import { INPUTMASKS } from './inputMask'
+
 type TextInputProps = {
   aria?: { [key: string]: string },
   className?: string,
@@ -22,6 +24,7 @@ type TextInputProps = {
   inline?: boolean,
   name: string,
   label: string,
+  mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
   onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
@@ -47,6 +50,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     htmlOptions = {},
     id,
     inline = false,
+    mask = null,
     name,
     label,
     onChange = () => { void 0 },
@@ -90,8 +94,42 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     />
   )
 
+  const isMaskedInput = mask && mask in INPUTMASKS
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    if (isMaskedInput) {
+      const inputValue = e.target.value
+
+      let cursorPosition = e.target.selectionStart;
+      const isAtEnd = cursorPosition === inputValue.length;
+      
+      const formattedValue = INPUTMASKS[mask].format(inputValue)
+      e.target.value = formattedValue
+      
+      // Keep cursor position
+      if (!isAtEnd) {
+        // Account for extra characters (e.g., commas added/removed in currency)
+        if (formattedValue.length - inputValue.length === 1) {
+          cursorPosition = cursorPosition + 1
+        } else if (mask === "currency" && formattedValue.length - inputValue.length === -1) {
+          cursorPosition = cursorPosition - 1
+        }
+        e.target.selectionStart = e.target.selectionEnd = cursorPosition
+      }
+    }
+    
+    onChange(e)
+  }
+
   const childInput = children ? children.type === "input" : undefined
 
+  let formattedValue;
+  if (isMaskedInput && value) {
+    formattedValue = INPUTMASKS[mask].formatDefaultValue(value.toString())
+  } else {
+    formattedValue = value
+  }
+
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
@@ -101,12 +139,13 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         id={id}
         key={id}
         name={name}
-        onChange={onChange}
-        placeholder={placeholder}
+        onChange={isMaskedInput ? handleChange : onChange}
+        pattern={isMaskedInput ? INPUTMASKS[mask]?.pattern : undefined}
+        placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
         ref={ref}
         required={required}
         type={type}
-        value={value}
+        value={formattedValue}
      />)
   )
 

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_mask.jsx

@@ -0,0 +1,88 @@
+import React, { useState } from 'react'
+
+import Caption from '../../pb_caption/_caption'
+import TextInput from '../../pb_text_input/_text_input'
+import Title from '../../pb_title/_title'
+
+const TextInputMask = (props) => {
+  const [ssn, setSSN] = useState('')
+  const handleOnChangeSSN = ({ target }) => {
+    setSSN(target.value)
+  }
+  const ref = React.createRef()
+
+  const [formFields, setFormFields] = useState({
+    currency: '',
+    zipCode: '',
+    postalCode: '',
+    ssn: '',
+  })
+
+  const handleOnChangeFormField =  ({ target }) => {
+    const { name, value } = target
+    setFormFields({ ...formFields, [name]: value })
+  }
+
+  return (
+    <div>
+      <TextInput
+          label="Currency"
+          mask="currency"
+          name="currency"
+          onChange={handleOnChangeFormField}
+          value={formFields.currency}
+          {...props}
+      />
+      <TextInput
+          label="Zip Code"
+          mask="zipCode"
+          name="zipCode"
+          onChange={handleOnChangeFormField}
+          value={formFields.zipCode}
+          {...props}
+      />
+      <TextInput
+          label="Postal Code"
+          mask="postalCode"
+          name="postalCode"
+          onChange={handleOnChangeFormField}
+          value={formFields.postalCode}
+          {...props}
+      />
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          name="ssn"
+          onChange={handleOnChangeFormField}
+          value={formFields.ssn}
+          {...props}
+      />
+
+      <br />
+      <br />
+
+      <Title>{'Event Handler Props'}</Title>
+
+      <br />
+      <Caption>{'onChange'}</Caption>
+
+      <br />
+
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          onChange={handleOnChangeSSN}
+          placeholder="Enter SSN"
+          ref={ref}
+          value={ssn}
+          {...props}
+      />
+
+      {ssn !== '' && (
+        <React.Fragment>{`SSN is: ${ssn}`}</React.Fragment>
+      )}
+    </div>
+  )
+}
+
+export default TextInputMask

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

@@ -16,6 +16,7 @@ examples:
   - text_input_add_on: Add On
   - text_input_inline: Inline
   - text_input_no_label: No Label
+  - text_input_mask: Mask
 
   swift:
     - text_input_default_swift: Default

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

@@ -5,3 +5,4 @@ export { default as TextInputDisabled } from './_text_input_disabled.jsx'
 export { default as TextInputAddOn } from './_text_input_add_on.jsx'
 export { default as TextInputInline } from './_text_input_inline.jsx'
 export { default as TextInputNoLabel } from './_text_input_no_label.jsx'
+export { default as TextInputMask } from './_text_input_mask.jsx'