playbook_ui 14.9.0.pre.alpha.play17004992 → 14.9.0.pre.rc.0

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

@@ -1,106 +1,32 @@
 import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbTable extends PbEnhancedElement {
-    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) {
-            this.handleStickyColumnsRef = this.handleStickyColumns.bind(this);
-            this.handleStickyColumns();
-            window.addEventListener('resize', this.handleStickyColumnsRef);
-          }
+  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 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);
-      }
-    }
-}
+      // 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])
+        })
+      })
+    })
+  }
+}

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

@@ -20,6 +20,3 @@
 @import "table_header";
 @import "striped";
 @import "outer_padding";
-@import "sticky_columns";
-@import "scroll";
-@import "collapsible";

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

@@ -7,21 +7,14 @@ 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";
 };
@@ -30,15 +23,10 @@ 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;
@@ -48,110 +36,17 @@ 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 (
     <>
-      {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 ? (
+      {isTableTag ? (
         <tr
             {...ariaProps}
             {...dataProps}

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

@@ -18,4 +18,4 @@
       <%= content.presence %>
     <% end %>
   <% end %>
-<% end %>
+<% end %>

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

@@ -23,8 +23,6 @@ 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,
@@ -39,8 +37,8 @@ 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, sticky_left_column_class,
-          collapse_class, vertical_border_class, striped_class, outer_padding_class,
+          disable_hover_class, container_class, data_table_class, sticky_class, collapse_class,
+          vertical_border_class, striped_class, outer_padding_class,
           "table-responsive-#{responsive}", separator: " "
         )
       end
@@ -75,19 +73,6 @@ 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, ChangeEvent } from 'react'
+import React, { forwardRef } from 'react'
 import classnames from 'classnames'
 
 import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
@@ -10,8 +10,6 @@ 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,
@@ -24,7 +22,6 @@ type TextInputProps = {
   inline?: boolean,
   name: string,
   label: string,
-  mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
   onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
@@ -50,7 +47,6 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     htmlOptions = {},
     id,
     inline = false,
-    mask = null,
     name,
     label,
     onChange = () => { void 0 },
@@ -94,33 +90,6 @@ 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
 
   const textInput = (
@@ -132,9 +101,8 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         id={id}
         key={id}
         name={name}
-        onChange={isMaskedInput ? handleChange : onChange}
-        pattern={isMaskedInput ? INPUTMASKS[mask]?.pattern : undefined}
-        placeholder={placeholder || (isMaskedInput ? INPUTMASKS[mask]?.placeholder : undefined)}
+        onChange={onChange}
+        placeholder={placeholder}
         ref={ref}
         required={required}
         type={type}

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

@@ -16,7 +16,6 @@ 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,4 +5,3 @@ 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'

data/app/pb_kits/playbook/pb_text_input/text_input.test.js

@@ -1,5 +1,5 @@
-import React, { useState } from 'react'
-import { render, screen, fireEvent, within } from '../utilities/test-utils'
+import React from 'react'
+import { render, screen } from '../utilities/test-utils'
 
 import TextInput from './_text_input'
 
@@ -89,140 +89,3 @@ test('returns additional class name', () => {
   const kit = screen.getByTestId(testId)
   expect(kit).toHaveClass(`${kitClass} mb_lg`)
 })
-
-
-const TextInputCurrencyMask = (props) => {
-  const [currency, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="currency"
-        onChange={handleOnChange}
-        value={currency}
-        {...props}
-    />
-  )
-}
-
-test('returns masked currency value', () => {
-  render(
-    <TextInputCurrencyMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456' } });
-
-  expect(input.value).toBe('$1,234.56')
-
-  fireEvent.change(input, { target: { value: '1' } });
-
-  expect(input.value).toBe('$0.01')
-
-  fireEvent.change(input, { target: { value: '' } });
-
-  expect(input.value).toBe('')
-})
-
-const TextInputZipCodeMask = (props) => {
-  const [zipCode, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="zipCode"
-        onChange={handleOnChange}
-        value={zipCode}
-        {...props}
-    />
-  )
-}
-
-test('returns masked zip code value', () => {
-  render(
-    <TextInputZipCodeMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456' } });
-
-  expect(input.value).toBe('12345')
-})
-
-const TextInputPostalCodeMask = (props) => {
-  const [postalCode, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="postalCode"
-        onChange={handleOnChange}
-        value={postalCode}
-        {...props}
-    />
-  )
-}
-
-test('returns masked postal code value', () => {
-  render(
-    <TextInputPostalCodeMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456789' } });
-
-  expect(input.value).toBe('12345-6789')
-})
-
-const TextInputSSNMask = (props) => {
-  const [ssn, setValue] = useState('')
-  const handleOnChange = ({ target }) => {
-    setValue(target.value)
-  }
-
-  return (
-    <TextInput
-        mask="ssn"
-        onChange={handleOnChange}
-        value={ssn}
-        {...props}
-    />
-  )
-}
-
-test('returns masked ssn value', () => {
-  render(
-    <TextInputSSNMask
-        data={{ testid: testId }}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-
-  const input = within(kit).getByRole('textbox');
-
-  fireEvent.change(input, { target: { value: '123456789' } });
-
-  expect(input.value).toBe('123-45-6789')
-})

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb

@@ -41,50 +41,3 @@
       }) %>
     <% end %>
 <% end %>
-
-<br /><br /><br />
-
-<%= pb_rails("timeline", props: {orientation: "vertical", show_date: true}) do %>
-  <%= pb_rails("timeline/item") do |item| %>
-
-    <% item.label do %>
-      <%= pb_rails("timeline/label") do %>
-        <%= pb_rails("title", props: { text: "Any Kit", size: 4 }) %>
-      <% end %>
-    <% end %>
-  
-    <% item.step do %>
-      <%= pb_rails("timeline/step", props: { icon: 'user', icon_color: 'royal' }) %>
-    <% end %>
-  
-    <% item.detail do %>
-      <%= pb_rails("title_detail", props: {
-        title: "Jackson Heights",
-        detail: "37-27 74th Street"
-      }) %>
-    <% end %>
-  <% end %>
-
-  <%= pb_rails("timeline/item", props: {icon: "map-marker-alt", icon_color: "purple", date: Date.today+1, line_style: "dotted" }) do |item| %>
-    <%= pb_rails("title_detail", props: {
-        title: "Society Hill",
-        detail: "72 E St Astoria"
-    }) %>
-  <% end %>
-
-  <%= pb_rails("timeline/item") do |item| %>
-
-    <% item.step do %>
-      <%= pb_rails("timeline/step") do %>
-        <%= pb_rails("pill", props: { text: "3" , variant: "success" }) %>
-      <% end %>
-    <% end %>
-  
-    <% item.detail do %>
-      <%= pb_rails("title_detail", props: {
-        title: "Greenpoint",
-        detail: "81 Gate St Brooklyn"
-      }) %>
-    <% end %>
-  <% end %>
-<% end %>

data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx

@@ -62,65 +62,6 @@ const TimelineWithChildren = (props) => (
         </Timeline.Detail>
       </Timeline.Item>
     </Timeline>
-
-    <br />
-    <br />
-    <br />
-
-    <Timeline orientation="vertical"
-        showDate
-        {...props}
-    >
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Label>
-          <Title size={4}
-              text='Any Kit'
-          />
-        </Timeline.Label>
-        <Timeline.Step icon="user"
-            iconColor="royal"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="37-27 74th Street"
-              title="Jackson Heights"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="dotted"
-          {...props}
-      >
-        <Timeline.Label date={new Date(new Date().setDate(new Date().getDate() + 1))} />
-        <Timeline.Step icon="map-marker-alt"
-            iconColor="purple"
-        />
-        <Timeline.Detail>
-          <TitleDetail detail="72 E St Astoria"
-              title="Society Hill"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-
-      <Timeline.Item lineStyle="solid"
-          {...props}
-      >
-        <Timeline.Step>
-          <Pill text="3"
-              variant="success"
-          />
-        </Timeline.Step>
-        <Timeline.Detail>
-          <TitleDetail detail="81 Gate St Brooklyn"
-              title="Greenpoint"
-              {...props}
-          />
-        </Timeline.Detail>
-      </Timeline.Item>
-    </Timeline>
   </div>
 )