playbook_ui 14.17.0.pre.alpha.play1966highchartsgaugedefaultpoc7347 → 14.17.0.pre.alpha.play2065passphrasewithselect7273

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bc0d8ea20e40b6d57149525cbc76adf2cdf4926171655c4342096878b5f54f36
-  data.tar.gz: 742c9238a941d2346b8afc6ac2612b29775cbebb51a0ec47d933b631357108bc
+  metadata.gz: 988011be4025b14893c9c1fe0950f94c0675bf89ad49411bfe44ff2cac44a06e
+  data.tar.gz: f0343e02babc04057365026dc0de42e6e32a01eb8ed061beaeb454cbc5898676
 SHA512:
-  metadata.gz: b6f6f12f994b15457e4cec40cc2cfaba46796996a6e10fb98db5f60b92b07d9bffc7a0d4d4fb280fb55099d6bd69785f8bb40484e0f60fd9ca3d3aeb6dd582e4
-  data.tar.gz: 1dabd0f3e16d56c689716a14518f095170447ff6239ea99a32de46fd0ad5a66e440e65824dd1b8e6133f1b6a109b2da3da865f8f06d3ac29e03fa461593faa5f
+  metadata.gz: ce4c7b62fe6597ff9242d79550bce33e8abc970e233ca3a432fc2778798c5f854fe13183c0e26d10eee9a31c968265aa29047ec22d0e64de6ff051a5376b531c
+  data.tar.gz: 9c3ab0c466d18f9ce9f0ca87ea0758153b5ba8a2f7646de2a2cc5020fbb369ddcf4b652dc34f02e96b7f81a0fe21954b5839ee5ec2d64df19811316e238036ff

data/app/pb_kits/playbook/pb_copy_button/_copy_button.tsx

@@ -1,4 +1,5 @@
-import React from 'react'
+
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
@@ -6,19 +7,16 @@ import { globalProps } from '../utilities/globalProps'
 import Button from '../pb_button/_button'
 import Tooltip from '../pb_tooltip/_tooltip'
 
-import usePBCopy from './usePBCopy'
-
 type CopyButtonProps = {
-  aria?: { [key: string]: string }
-  className?: string
-  data?: { [key: string]: string }
-  id?: string
-  from?: string
-  text?: string
-  tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left'
-  tooltipText?: string
-  value?: string
-  timeout?: number
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+  from?: string,
+  text?: string,
+  tooltipPlacement?:  "top" | "right" | "bottom" | "left",
+  tooltipText?: string,
+  value?: string,
 }
 
 const CopyButton = (props: CopyButtonProps) => {
@@ -29,34 +27,62 @@ const CopyButton = (props: CopyButtonProps) => {
     from = '',
     id,
     text= 'Copy',
-    timeout = 1000,
     tooltipPlacement= 'bottom',
     tooltipText = 'Copied!',
     value = '',
   } = props
 
-  const [copied, copy] = usePBCopy({ value, from, timeout })
+  const [copied, setCopied] = useState(false)
 
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(buildCss('pb_copy_button_kit'), globalProps(props), className)
 
+  const copy = () => {
+    if (!from && !value) {
+      return
+    }
+
+    if (value) {
+      navigator.clipboard.writeText(value)
+    } else if (from) {
+      const copyElement = document.getElementById(from);
+      let copyText = copyElement?.innerText
+
+      if (copyElement instanceof HTMLTextAreaElement || copyElement instanceof HTMLInputElement) {
+        copyText = copyElement.value;
+      }
+
+      if (copyText) {
+        navigator.clipboard.writeText(copyText)
+      }
+    }
+
+    setCopied(true)
+
+    setTimeout(() => {
+      setCopied(false)
+    }, 1000);
+  }
+
   return (
-    <div {...ariaProps}
+    <div
+        {...ariaProps}
         {...dataProps}
         className={classes}
         id={id}
     >
-      <Tooltip
+      <Tooltip 
           forceOpenTooltip={copied}
           placement={tooltipPlacement}
           showTooltip={false}
           text={tooltipText}
       >
-        <Button icon="copy"
+        <Button
+            icon='copy'
             onClick={copy}
         >
-          {text}
+          { text }
         </Button>
       </Tooltip>
     </div>

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

@@ -6,4 +6,3 @@ examples:
   react:
   - copy_button_default: Default
   - copy_button_from: Copy From
-  - copy_button_hook: Copy Hook

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

@@ -1,3 +1,2 @@
 export { default as CopyButtonDefault } from './_copy_button_default.jsx'
-export { default as CopyButtonFrom } from './_copy_button_from.jsx' 
-export { default as CopyButtonHook } from './_copy_button_hook.jsx'
+export { default as CopyButtonFrom } from './_copy_button_from.jsx'

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

@@ -15,7 +15,6 @@ examples:
 
   react:
   - gauge_default: Default
-  - gauge_pb_styles: Playbook Styles
   - gauge_disable_animation: Disable Animation
   - gauge_title: Title
   - gauge_units: Units

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

@@ -1,5 +1,4 @@
 export { default as GaugeDefault } from './_gauge_default.jsx'
-export { default as GaugePbStyles } from './_gauge_pb_styles.jsx'
 export { default as GaugeDisableAnimation } from './_gauge_disable_animation.jsx'
 export { default as GaugeFullCircle } from './_gauge_full_circle.jsx'
 export { default as GaugeHeight } from './_gauge_height.jsx'

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.length,
-            'sticky-right-column': stickyRightColumn.length,
+            'sticky-left-column': stickyLeftColumn,
+            'sticky-right-column': stickyRightColumn,
             '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,5 +1,3 @@
 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. 
-
-**NOTE**: We advise against using the `disableHover` Table prop when nesting Table Rows within a Table.
+Additionally, the `collapsibleSideHighlight` can also be removed by setting it to false if needed. This prop is set to true by default. 

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

@@ -1,5 +1,3 @@
 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.
-
-**NOTE**: We advise against using the `disable_hover` Table prop when nesting Table Rows within a Table.
+Additionally, the `collapsible_side_highlight` can also be removed by setting it to false if needed. This prop is set to true by default.

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

@@ -1,3 +1 @@
-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.
+The `collapsibleContent` can also be used to display nested Tables within each Row. 

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

@@ -1,3 +1 @@
-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.
+The `collapsible_content` can also be used to display nested Tables within each Row.

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_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>, sanitizedValue?: string) => void,
+  onChange: (e: React.FormEvent<HTMLInputElement>) => void,
   placeholder: string,
   required?: boolean,
   type: string,
@@ -102,16 +102,10 @@ 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)
@@ -122,11 +116,9 @@ 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/example.yml

@@ -18,8 +18,6 @@ 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,4 +6,3 @@ 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'

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

@@ -3,7 +3,6 @@ type InputMask = {
     formatDefaultValue: (value: string) => string
     pattern: string
     placeholder: string
-    sanitize?: (value: string) => string;
 }
 
 type InputMaskDictionary = {
@@ -74,41 +73,35 @@ export const INPUTMASKS: InputMaskDictionary = {
         // eslint-disable-next-line no-useless-escape
         pattern: '^\\$\\d{1,3}(?:,\\d{3})*(?:\\.\\d{2})?$',
         placeholder: '$0.00',
-        sanitize: (value: string) => value.replace(/[$,]/g, ''),
     },
     zipCode: {
         format: formatBasicPostal,
         formatDefaultValue: formatBasicPostal,
         pattern: '\\d{5}',
         placeholder: '12345',
-        sanitize: (value: string) => value,
     },
     postalCode: {
         format: formatExtendedPostal,
         formatDefaultValue: formatExtendedPostal,
         pattern: '\\d{5}-\\d{4}',
         placeholder: '12345-6789',
-        sanitize: (value: string) => value.replace(/-/g, ''),
     },
     ssn: {
         format: formatSSN,
         formatDefaultValue: formatSSN,
         pattern: '\\d{3}-\\d{2}-\\d{4}',
         placeholder: '123-45-6789',
-        sanitize: (value: string) => value.replace(/-/g, ''),
     },
     creditCard: {
         format: formatCreditCard,
         formatDefaultValue: formatCreditCard,
         pattern: '\\d{4} \\d{4} \\d{4} \\d{4}',
         placeholder: '1234 5678 9012 3456',
-        sanitize: (value: string) => value.replace(/\s/g, ''),
     },
     cvv: {
         format: formatCVV,
         formatDefaultValue: formatCVV,
         pattern: '\\d{3,4}',
         placeholder: '123',
-        sanitize: (value: string) => value,
     },
-}
+}