playbook_ui 14.9.0.pre.alpha.PBNTR738collapsiblewithintablekit4855 → 14.9.0.pre.alpha.PLAY1731inputmasking4868

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7836406579285d2cbea8a738bb95e477a2f513f6243b4a59cfaef6985ee22a3a
-  data.tar.gz: 0af1be0d7a9f685d063c68d09d7d441317bb99b6bd591eab66d738300ab49dd9
+  metadata.gz: b40a6d80e2e00552963c2986d6ae0e1bad26cd43320b0959b534e37f0e7d71fa
+  data.tar.gz: 52bb830750b5edc87fe3a4c670c944e1fcdf78764649ebcc708db45257694c0d
 SHA512:
-  metadata.gz: cdb9e010f6a61b4b6a52ce0f317127c1f097607aa846b14887b0163625d1718eac6a93eff8e5bc1f7aab34f06eb3d69c56fea4667e513751c697f58ca221fe6a
-  data.tar.gz: 99fb58c0a203ddc69ebf6fa643274582d5b96e32284d1817fbe6d9d9ebfd5fbe358816e674bbf02cdbb394490283db22e077c44a2116e23935a37852ba628354
+  metadata.gz: c4f3b88e16a1efe2875d297f45e030854943cc62a8a8ddaf8629c6e6f674e54583e72bfe24d1185ef67de57b3e497597f0c328c427f362f6868b5b136e720541
+  data.tar.gz: 8d309708dbc3912906a4f2b73829fcff692c195b641bd352dee6e313409f74c6ba2c8ea782bbb4c8784a7ca5e5ee3ed5084e4cc147130e37bc9f5203e4cbdee2

data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, ReactElement } from 'react'
 import classnames from 'classnames'
 import  useCollapsible from './useCollapsible'
 
-import { globalProps, globalInlineProps, GlobalProps } from '../utilities/globalProps'
+import { globalProps, globalInlineProps } from '../utilities/globalProps'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 
 import CollapsibleContent from './child_kits/CollapsibleContent'
@@ -32,7 +32,6 @@ type CollapsibleProps = {
   onClick?: ()=> void,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col',
 }
 
 const Collapsible = ({
@@ -48,9 +47,8 @@ const Collapsible = ({
   onIconClick,
   onClick,
   id,
-  tag = 'div',
   ...props
-}: CollapsibleProps & GlobalProps): React.ReactElement => {
+}: CollapsibleProps): React.ReactElement => {
   const [isCollapsed, toggle, setIsCollapsed] = useCollapsible(collapsed)
 
   useEffect(()=> {
@@ -78,12 +76,9 @@ const Collapsible = ({
     className
   )
   const dynamicInlineProps = globalInlineProps(props)
-
-  const Tag: React.ReactElement | any = `${tag}`;
-
   return (
     <CollapsibleContext.Provider value={{ collapsed: isCollapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick }}>
-      <Tag
+      <div
           {...ariaProps}
           {...dataProps}
           {...htmlProps}
@@ -101,7 +96,7 @@ const Collapsible = ({
           <CollapsibleContent {...contentProps}>
             {contentChildren}
           </CollapsibleContent>
-      </Tag>
+      </div>
     </CollapsibleContext.Provider>
   )
 }

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames'
 import React, { useContext, useRef, useEffect } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps'
 import { hideElement, showElement } from '../_helper_functions'
 
 import CollapsibleContext from '../context'
@@ -15,7 +15,7 @@ const CollapsibleContent = ({
   children,
   className,
   ...props
-}: CollapsibleContentProps & GlobalProps): React.ReactElement => {
+}: CollapsibleContentProps): React.ReactElement => {
   const context: {[key: string]: boolean | string} = useContext(CollapsibleContext)
   const contentCSS = buildCss('pb_collapsible_content_kit')
   const contentSpacing = globalProps(props)

data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx

@@ -3,7 +3,7 @@
 import classnames from 'classnames'
 import React, { useContext } from 'react'
 import { buildCss } from '../../utilities/props'
-import { globalProps, GlobalProps } from '../../utilities/globalProps'
+import { globalProps } from '../../utilities/globalProps'
 
 import Flex from '../../pb_flex/_flex'
 import FlexItem from '../../pb_flex/_flex_item'
@@ -25,7 +25,7 @@ const CollapsibleMain = ({
   className,
   cursor = 'pointer',
   ...props
-}: CollapsibleMainProps & GlobalProps): React.ReactElement=> {
+}: CollapsibleMainProps): React.ReactElement=> {
   const {collapsed, toggle, icon, iconSize, iconColor, onIconClick, onClick}: any = useContext(CollapsibleContext)
   const mainCSS = buildCss('pb_collapsible_main_kit')
   const mainSpacing = globalProps(props, { cursor })

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

@@ -55,8 +55,3 @@ examples:
     - table_with_subcomponents: Table with Sub Components (Table Elements)
     - table_with_subcomponents_as_divs: Table with Sub Components (Divs)
     - table_outer_padding: Outer Padding
-    - table_with_collapsible: Table with Collapsible
-    - table_with_collapsible_with_custom_click: Table with Collapsible with Custom Click
-    - table_with_collapsible_with_custom_content: Table with Collapsible with Custom Content
-    - table_with_collapsible_with_nested_rows: Table with Collapsible with Nested Rows
-    - table_with_collapsible_with_nested_table: Table with Collapsible with Nested Table

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

@@ -26,8 +26,3 @@ export { default as TableWithSubcomponents } from './_table_with_subcomponents.j
 export { default as TableWithSubcomponentsAsDivs } from './_table_with_subcomponents_as_divs.jsx'
 export { default as TableOuterPadding } from './_table_outer_padding.jsx'
 export { default as TableStickyLeftColumns } from './_table_sticky_left_columns.jsx'
-export { default as TableWithCollapsible } from './_table_with_collapsible.jsx'
-export { default as TableWithCollapsibleWithCustomContent } from './_table_with_collapsible_with_custom_content.jsx'
-export { default as TableWithCollapsibleWithNestedTable } from './_table_with_collapsible_with_nested_table.jsx'
-export { default as TableWithCollapsibleWithNestedRows } from './_table_with_collapsible_with_nested_rows.jsx'
-export { default as TableWithCollapsibleWithCustomClick } from './_table_with_collapsible_with_custom_click.jsx'

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

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

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_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,6 +94,33 @@ 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 = (
@@ -101,8 +132,9 @@ 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}

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'

data/app/pb_kits/playbook/pb_text_input/inputMask.ts

@@ -0,0 +1,64 @@
+type InputMask = {
+    format: (value: string) => string
+    pattern: string
+    placeholder: string
+}
+
+type InputMaskDictionary = {
+    [key in 'currency' | 'zipCode' | 'postalCode' | 'ssn']: InputMask
+}
+
+const formatCurrency = (value: string): string => {
+    const numericValue = value.replace(/[^0-9]/g, '').slice(0, 15)
+
+    if (!numericValue) return ''
+
+    const dollars = parseFloat((parseInt(numericValue) / 100).toFixed(2))
+    if (dollars === 0) return ''
+
+    return new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+        maximumFractionDigits: 2,
+    }).format(dollars)
+}
+
+const formatBasicPostal = (value: string): string => {
+    return value.replace(/\D/g, '').slice(0, 5)
+}
+
+const formatExtendedPostal = (value: string): string => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 9)
+    return cleaned.replace(/(\d{5})(?=\d)/, '$1-')
+}
+
+const formatSSN = (value: string): string => {
+    const cleaned = value.replace(/\D/g, '').slice(0, 9)
+    return cleaned
+        .replace(/(\d{5})(?=\d)/, '$1-')
+        .replace(/(\d{3})(?=\d)/, '$1-')
+}
+
+export const INPUTMASKS: InputMaskDictionary = {
+    currency: {
+        format: formatCurrency,
+        // eslint-disable-next-line no-useless-escape
+        pattern: '^\$\d{1,3}(?:,\d{3})*(?:\.\d{2})?$',
+        placeholder: '$0.00',
+    },
+    zipCode: {
+        format: formatBasicPostal,
+        pattern: '\\d{5}',
+        placeholder: '12345',
+    },
+    postalCode: {
+        format: formatExtendedPostal,
+        pattern: '\\d{5}-\\d{4}',
+        placeholder: '12345-6789',
+    },
+    ssn: {
+        format: formatSSN,
+        pattern: '\\d{3}-\\d{2}-\\d{4}',
+        placeholder: '123-45-6789',
+    },
+} 

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

@@ -1,5 +1,5 @@
-import React from 'react'
-import { render, screen } from '../utilities/test-utils'
+import React, { useState } from 'react'
+import { render, screen, fireEvent, within } from '../utilities/test-utils'
 
 import TextInput from './_text_input'
 
@@ -89,3 +89,140 @@ 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')
+})