playbook_ui 14.17.0 → 14.18.0.pre.alpha.PLAY20787400

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.jsx

@@ -0,0 +1,81 @@
+import React, { useState } from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Button from '../../pb_button/_button'
+import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
+
+const OverlayFullscreenOpacity = () => {
+  const [openOpacity40, setOpenOpacity40] = useState(false)
+  const [openOpacity80, setOpenOpacity80] = useState(false)
+
+  const handleClickOpacity40 = () => {
+    setOpenOpacity40(true)
+  }
+  const handleCloseOpacity40 = () => {
+    setOpenOpacity40(false)
+  }
+
+  const handleClickOpacity80 = () => {
+    setOpenOpacity80(true)
+  }
+  const handleCloseOpacity80 = () => {
+    setOpenOpacity80(false)
+  }
+
+  return (
+    <>
+      <div>
+        <Button
+            onClick={handleClickOpacity40}
+            text="40% Opacity"
+            variant="secondary"
+        />
+        {' '}
+        <Button
+            onClick={handleClickOpacity80}
+            text="80% Opacity"
+            variant="secondary"
+        />
+
+        {openOpacity40 && (
+            <Overlay
+                fullScreen
+                gradient={false}
+                opacity="opacity_4"
+            >
+              <FixedConfirmationToast
+                  closeable
+                  horizontal='center'
+                  onClose={handleCloseOpacity40}
+                  open={openOpacity40}
+                  status="tip"
+                  text='Fullscreen Overlay at 40% Opacity.'
+                  vertical='top'
+              />
+            </Overlay>
+        )}
+
+        {openOpacity80 && (
+            <Overlay
+                fullScreen
+                gradient={false}
+                opacity="opacity_8"
+            >
+              <FixedConfirmationToast
+                  closeable
+                  display="block"
+                  horizontal='center'
+                  onClose={handleCloseOpacity80}
+                  open={openOpacity80}
+                  status="tip"
+                  text='Fullscreen Overlay at 80% Opacity.'
+                  vertical='top'
+              />
+            </Overlay>
+        )}
+      </div>
+    </>
+  )
+}
+
+export default OverlayFullscreenOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_fullscreen_opacity.md

@@ -0,0 +1 @@
+To enable the overlay to cover the full size of your screen, you can pass the `fullScreen` prop. You can also pass an opacity along with it.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Image from '../../pb_image/_image'
+import Flex from '../../pb_flex/_flex'
+
+const OverlayGradientOpacity = () => (
+    <Flex
+        justify="around"
+        wrap
+    >
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_2"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+        <Overlay
+            gradient={false}
+            marginBottom="xxs"
+            opacity="opacity_8"
+        >
+          <Image
+              alt="picture of a misty forest"
+              display="block"
+              maxWidth="100%"
+              url="https://unsplash.it/500/400/?image=634"
+          />
+        </Overlay>
+    </Flex>
+)
+
+export default OverlayGradientOpacity

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_gradient_opacity.md

@@ -0,0 +1 @@
+By default, the overlay is rendered as a gradient. Setting the `gradient` prop to `false` renders the overlay as a solid color. You can adjust the transparency of the solid overlay by using the `opacity` prop.

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.jsx

@@ -0,0 +1,40 @@
+import React from 'react'
+
+import Overlay from '../../pb_overlay/_overlay'
+import Table from '../../pb_table/_table'
+
+
+const TableExample = () => {
+    return (
+        <Table size="sm">
+            <thead>
+                <tr>
+                    <th>{'Column 1'}</th>
+                    <th>{'Column 2'}</th>
+                    <th>{'Column 3'}</th>
+                    <th>{'Column 4'}</th>
+                    <th>{'Column 5'}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {Array.from({ length: 7 }, (_, index) => (
+                    <tr key={index}>
+                        {Array.from({ length: 5 }, (_, columnIndex) => (
+                            <td key={columnIndex}>{`Value ${columnIndex + 1}`}</td>
+                        ))}
+                    </tr>
+                ))}
+            </tbody>
+        </Table>
+    )
+}
+
+const OverlayLayout = () => (
+    <>
+        <Overlay layout={{ y: "xl" }}>
+            <TableExample />
+        </Overlay>
+    </>
+)
+
+export default OverlayLayout

data/app/pb_kits/playbook/pb_overlay/docs/_overlay_layout.md

@@ -0,0 +1,5 @@
+The optional `layout` prop accepts the `position` and `size` of the overlay as a key:value pair.
+
+The `position` key accepts `bottom` (default), `top`, `y` (for both top and bottom) `right`, `left`, or `x` (for both left and right), which sets the side(s) where the `color` overlay starts. The direction of the overlay is always toward the opposite side of the position. For example, the default position of `bottom` starts the overlay on the bottom edge of your container and extends it toward the opposite side: the top.
+
+The `size` value is `full` (100%) by default, but accepts our [spacing tokens](https://playbook.powerapp.cloud/visual_guidelines/spacing) or a percentage value as a string, and literally translates to how much of the container is covered by the overlay(s).

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

@@ -1,10 +1,15 @@
 examples:
   react:
   - overlay_default: Default
+  - overlay_gradient_opacity: Gradient & Opacity
+  - overlay_color: Color
+  - overlay_layout: Layout
   - overlay_multi_directional: Multi-directional
   - overlay_vertical_dynamic_multi_directional: Vertical Dynamic Multi-directional
   - overlay_toggle: Toggle
   - overlay_hide_scroll_bar: Hide Scroll Bar
+  - overlay_fullscreen_opacity: Full Page Opacity
+  - overlay_fullscreen_background: Full Page Using Background Color Tokens
 
   rails:
   - overlay_default: Default

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

@@ -1,5 +1,10 @@
 export { default as OverlayDefault } from './_overlay_default.jsx'
+export { default as OverlayGradientOpacity } from './_overlay_gradient_opacity.jsx'
+export { default as OverlayColor } from './_overlay_color.jsx'
+export { default as OverlayLayout } from './_overlay_layout.jsx'
 export { default as OverlayMultiDirectional } from './_overlay_multi_directional.jsx'
 export { default as OverlayToggle } from './_overlay_toggle.jsx'
 export { default as OverlayVerticalDynamicMultiDirectional } from './_overlay_vertical_dynamic_multi_directional.jsx'
 export { default as OverlayHideScrollBar } from './_overlay_hide_scroll_bar.jsx'
+export { default as OverlayFullscreenOpacity } from './_overlay_fullscreen_opacity.jsx'
+export { default as OverlayFullscreenBackground } from './_overlay_fullscreen_background.jsx'

data/app/pb_kits/playbook/pb_overlay/overlay.test.jsx

@@ -71,8 +71,46 @@ test('should add overlay-hide-scrollbar class when scrollBarNone is true', () =>
       data: { testid: testId },
       scrollBarNone: true
     }
-  
+
     render(<Overlay {...props} />)
     const kit = screen.getByTestId(testId)
     expect(kit).toHaveClass('overlay-hide-scrollbar')
 })
+
+test('should have no_gradient class if gradient prop is false', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId,
+        gradient: false
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('no_gradient')
+})
+
+test('should not have no_gradient class if gradient is not passed', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).not.toHaveClass('no_gradient')
+})
+
+test('should have the correct opacity class if opacity prop is passed', () => {
+    const props = {
+        children,
+        data: { testid: testId },
+        id: testId,
+        opacity: "opacity_5"
+    }
+
+    render(<Overlay {...props} />)
+    const kit = screen.getByTestId(testId)
+    expect(kit).toHaveClass('opacity_5')
+})

data/app/pb_kits/playbook/pb_table/_table.tsx

@@ -84,8 +84,8 @@ const Table = (props: TableProps): React.ReactElement => {
             'single-line': singleLine,
             'no-hover': disableHover,
             'sticky-header': sticky,
-            'sticky-left-column': stickyLeftColumn,
-            'sticky-right-column': stickyRightColumn,
+            'sticky-left-column': stickyLeftColumn.length,
+            'sticky-right-column': stickyRightColumn.length,
             'striped': striped,
             'header-borderless': headerStyle === 'borderless',
             'header-floating': headerStyle === 'floating',

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows.md

@@ -1,3 +1,5 @@
 The `collapsibleContent` can display any content, including nested Table Rows. 
 
-Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default. 
+Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default. 
+
+**NOTE**: We advise against using the `disableHover` Table prop when nesting Table Rows within a Table.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_rows_rails.md

@@ -1,3 +1,5 @@
 The `collapsible_content` can display any content, including nested Table Rows.
 
-Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.
+
+**NOTE**: We advise against using the `disable_hover` Table prop when nesting Table Rows within a Table.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table.md

@@ -1 +1,3 @@
-The `collapsibleContent` can also be used to display nested Tables within each Row. 
+The `collapsibleContent` can also be used to display nested Tables within each Row. 
+
+**NOTE**: We advise against using the `disableHover` Table prop when nesting Tables within a Table.

data/app/pb_kits/playbook/pb_table/docs/_table_with_collapsible_with_nested_table_rails.md

@@ -1 +1,3 @@
-The `collapsible_content` can also be used to display nested Tables within each Row.
+The `collapsible_content` can also be used to display nested Tables within each Row.
+
+**NOTE**: We advise against using the `disable_hover` Table prop when nesting Tables within a Table.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless.html.erb

@@ -0,0 +1,34 @@
+<%= pb_rails("table", props: { size: "sm", header_style: "borderless" }) do %>
+    <thead>
+        <tr>
+            <th>Column 1</th>
+            <th>Column 2</th>
+            <th>Column 3</th>
+            <th>Column 4</th>
+            <th>Column 5</th>
+        </tr>
+    </thead>
+    <tbody>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+        <tr>
+            <td>Value 1</td>
+            <td>Value 2</td>
+            <td>Value 3</td>
+            <td>Value 4</td>
+            <td>Value 5</td>
+        </tr>
+    </tbody>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_borderless_rails.md

@@ -0,0 +1 @@
+Customize your header by removing the header borders with the `header_style: "borderless"` prop.

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating.html.erb

@@ -0,0 +1,36 @@
+<%= pb_rails("card", props: { background: "light" })  do %>
+    <%= pb_rails("table", props: { size: "sm", header_style: "floating" }) do %>
+        <%= pb_rails("table/table_head") do %>
+            <%= pb_rails("background", props: { background_color: "light", tag: "tr" }) do %>
+                <%= pb_rails("table/table_header", props: { text: "Column 1"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 2"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 3"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 4"}) %>
+                <%= pb_rails("table/table_header", props: { text: "Column 5"}) %>       
+            <% end %>
+        <% end %>
+        <%= pb_rails("table/table_body") do %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+            <%= pb_rails("table/table_row") do %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 1"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 2"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 3"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 4"}) %>
+                <%= pb_rails("table/table_cell", props: { text: "Value 5"}) %>
+            <% end %>
+        <% end %>
+    <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_rails.md

@@ -0,0 +1 @@
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/rails#table-with-background-kit) logic to give your table header a custom background color. Use the `header_style: "floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `background_color` passed to Background kit should match the `background` or `background_color` for the element in which it is nested).

data/app/pb_kits/playbook/pb_table/docs/_table_with_header_style_floating_react.md

@@ -1 +1 @@
-Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `backgroundColor` for the element in which it is nested).
+Further customize your header by using the [table with background kit](https://playbook.powerapp.cloud/kits/table/react#table-with-background-kit) logic to give your table header a custom background color. Use the `headerStyle="floating"` prop to visually nest the borderless table within a card or collapsible with a matching background color (the `backgroundColor` passed to Background kit should match the `background` or `backgroundColor` for the element in which it is nested).

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

@@ -37,6 +37,8 @@ examples:
     - table_with_collapsible_with_nested_table_rails: Table with Collapsible with Nested Table
     - table_with_clickable_rows: Table with Clickable Rows
     - table_with_selectable_rows: Table with Selectable Rows
+    - table_with_header_style_borderless: Header Style Borderless
+    - table_with_header_style_floating: Header Style Floating
 
   react:
     - table_sm: Small

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

@@ -48,4 +48,4 @@
   .border-active {
     border-bottom: 1px;
   }
-}
+}

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

@@ -6,8 +6,20 @@
   &.table-lg {
     thead, .pb_table_thead {
       tr, .pb_table_tr {
-        th, .pb_table_th {
+        th:not(:has(
+          [class*="pb_body_kit"],
+          [class*="pb_detail_kit"],
+          [class*="pb_title_kit"]
+        )),
+        .pb_table_th:not(:has(
+          [class*="pb_body_kit"],
+          [class*="pb_detail_kit"],
+          [class*="pb_title_kit"]
+        )) {
           @include caption;
+        }
+
+        th, .pb_table_th {
           border-bottom: 1px solid $border_light;
         }
       }
@@ -83,10 +95,10 @@
 
 // flatten out corners for floating headerstyle variant to avoid small triangle of white/empty space
 .header-floating > thead > tr:first-child > th:first-child,
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child { 
-  border-top-left-radius: 0 !important; 
-} 
-.header-floating > thead > tr:first-child > th:last-child, 
-.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child { 
-  border-top-right-radius: 0 !important; 
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:first-child {
+  border-top-left-radius: 0 !important;
+}
+.header-floating > thead > tr:first-child > th:last-child,
+.header-floating > .pb_table_thead > .pb_table_tr:first-child > .pb_table_th:last-child {
+  border-top-right-radius: 0 !important;
 }

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

@@ -37,13 +37,16 @@ module Playbook
       prop :outer_padding, type: Playbook::Props::Enum,
                            values: ["none", "xxs", "xs", "sm", "md", "lg", "xl", nil],
                            default: nil
+      prop :header_style, type: Playbook::Props::Enum,
+                          values: %w[default borderless floating],
+                          default: "default"
 
       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,
           sticky_right_column_class, collapse_class, vertical_border_class, striped_class, outer_padding_class,
-          "table-responsive-#{responsive}", separator: " "
+          "table-responsive-#{responsive}", header_style_class, separator: " "
         )
       end
 
@@ -123,6 +126,15 @@ module Playbook
           outer_padding.present? ? "outer_padding_#{space_css_name}#{outer_padding}" : nil
         end
       end
+
+      def header_style_class
+        case header_style
+        when "borderless"
+          "header-borderless"
+        when "floating"
+          "header-floating"
+        end
+      end
     end
   end
 end

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

@@ -26,9 +26,12 @@ module Playbook
       prop :tag, type: Playbook::Props::Enum,
                  values: %w[table div],
                  default: "table"
+      prop :header_style, type: Playbook::Props::Enum,
+                          values: %w[default borderless floating],
+                          default: "default"
 
       def classname
-        generate_classname("pb_table_header_kit", align_class) + tag_class
+        generate_classname("pb_table_header_kit", align_class, header_style_class) + tag_class
       end
 
       def tag_class
@@ -106,6 +109,15 @@ module Playbook
         end
         active_item
       end
+
+      def header_style_class
+        case header_style
+        when "borderless"
+          "header-borderless"
+        when "floating"
+          "header-floating"
+        end
+      end
     end
   end
 end

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

@@ -25,7 +25,7 @@ type TextInputProps = {
   name: string,
   label: string,
   mask?: 'currency' | 'zipCode' | 'postalCode' | 'ssn',
-  onChange: (e: React.FormEvent<HTMLInputElement>) => void,
+  onChange: (e: React.FormEvent<HTMLInputElement>, sanitizedValue?: string) => void,
   placeholder: string,
   required?: boolean,
   type: string,
@@ -102,10 +102,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
 
       let cursorPosition = e.target.selectionStart;
       const isAtEnd = cursorPosition === inputValue.length;
-      
+
       const formattedValue = INPUTMASKS[mask].format(inputValue)
+
+      let sanitizedValue = formattedValue;
+      if (INPUTMASKS[mask].sanitize) {
+        sanitizedValue = INPUTMASKS[mask].sanitize(formattedValue)
+      }
+
       e.target.value = formattedValue
-      
+
       // Keep cursor position
       if (!isAtEnd) {
         // Account for extra characters (e.g., commas added/removed in currency)
@@ -116,9 +122,11 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         }
         e.target.selectionStart = e.target.selectionEnd = cursorPosition
       }
+
+      onChange(e, sanitizedValue);
+    } else {
+      onChange(e)
     }
-    
-    onChange(e)
   }
 
   const childInput = children ? children.type === "input" : undefined

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

@@ -0,0 +1,94 @@
+import React, { useState } from 'react'
+
+import TextInput from '../../pb_text_input/_text_input'
+
+const TextInputSanitize = (props) => {
+  const ref = React.createRef()
+
+  const [currency, setCurrency] = useState('')
+  const [sanitizedCurrency, setSanitizedCurrency] = useState('')
+  const handleOnChangeSanitizeCurrency = ({ target }, sanitizedValue) => {
+    setCurrency(target.value)
+    setSanitizedCurrency(sanitizedValue);
+  }
+
+  const [creditCard, setCreditCard] = useState('')
+  const [sanitizedCreditCard, setSanitizedCreditCard] = useState('')
+  const handleOnChangeSanitizeCC = ({ target }, sanitizedValue) => {
+    setCreditCard(target.value)
+    setSanitizedCreditCard(sanitizedValue);
+  }
+
+  const [ssn, setSSN] = useState('')
+  const [sanitizedSSN, setSanitizedSSN] = useState('')
+  const handleOnChangeSanitizeSSN = ({ target }, sanitizedValue) => {
+    setSSN(target.value)
+    setSanitizedSSN(sanitizedValue);
+  }
+
+  return (
+    <div>
+      <TextInput
+          label="Currency"
+          mask="currency"
+          onChange={handleOnChangeSanitizeCurrency}
+          placeholder="Enter Amount"
+          ref={ref}
+          value={currency}
+          {...props}
+      />
+
+      {currency !== "" && (
+        <React.Fragment>{`The masked value is: ${currency}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedCurrency !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedCurrency}`}</React.Fragment>
+      )}
+
+      <br />
+      <br />
+
+      <TextInput
+          label="Credit Card"
+          mask="creditCard"
+          onChange={handleOnChangeSanitizeCC}
+          placeholder="Enter Card"
+          ref={ref}
+          value={creditCard}
+          {...props}
+      />
+
+      {creditCard !== "" && (
+        <React.Fragment>{`The masked value is: ${creditCard}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedCreditCard !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedCreditCard}`}</React.Fragment>
+      )}
+
+      <br />
+      <br />
+
+      <TextInput
+          label="SSN"
+          mask="ssn"
+          onChange={handleOnChangeSanitizeSSN}
+          placeholder="Enter Amount"
+          ref={ref}
+          value={ssn}
+          {...props}
+      />
+
+      {ssn !== "" && (
+        <React.Fragment>{`The masked value is: ${ssn}`}</React.Fragment>
+      )}
+      <br />
+      {sanitizedSSN !== "" && (
+        <React.Fragment>{`The sanitized value is: ${sanitizedSSN}`}</React.Fragment>
+      )}
+    </div>
+  )
+}
+
+export default TextInputSanitize

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_sanitize.md

@@ -0,0 +1 @@
+When utilizing the Mask prop, you can retrieve the sanitized value of your input through an event handler that targets `sanitizedValue`.

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

@@ -18,6 +18,8 @@ examples:
   - text_input_inline: Inline
   - text_input_no_label: No Label
   - text_input_mask: Mask
+  - text_input_sanitize: Sanitized Masked Input
+
 
   swift:
     - text_input_default_swift: Default

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

@@ -6,3 +6,4 @@ 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'
+export { default as TextInputSanitize } from './_text_input_sanitize.jsx'