playbook_ui 14.11.1.pre.alpha.PLAY17445539 → 14.11.1.pre.alpha.hfhbrakemanplaybook5370

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.11.1"
-  VERSION = "14.11.1.pre.alpha.PLAY17445539"
+  VERSION = "14.11.1.pre.alpha.hfhbrakemanplaybook5370"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.11.1.pre.alpha.PLAY17445539
+  version: 14.11.1.pre.alpha.hfhbrakemanplaybook5370
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-22 00:00:00.000000000 Z
+date: 2025-01-14 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1146,11 +1146,8 @@ files:
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.jsx
 - app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list.md
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb
-- app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md
 - app/pb_kits/playbook/pb_draggable/docs/example.yml
 - app/pb_kits/playbook/pb_draggable/docs/index.js
 - app/pb_kits/playbook/pb_draggable/draggable.html.erb
@@ -1167,8 +1164,6 @@ files:
 - app/pb_kits/playbook/pb_drawer/_drawer.scss
 - app/pb_kits/playbook/pb_drawer/_drawer.tsx
 - app/pb_kits/playbook/pb_drawer/_drawer_context.tsx
-- app/pb_kits/playbook/pb_drawer/context.ts
-- app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx
 - app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb
@@ -1182,8 +1177,6 @@ files:
 - app/pb_kits/playbook/pb_drawer/drawer.html.erb
 - app/pb_kits/playbook/pb_drawer/drawer.rb
 - app/pb_kits/playbook/pb_drawer/drawer.test.jsx
-- app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx
-- app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx
 - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
 - app/pb_kits/playbook/pb_dropdown/context/index.tsx
@@ -2161,9 +2154,6 @@ files:
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_default.md
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx
-- app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.html.erb
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.jsx
 - app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_initial_country.md
@@ -2669,17 +2659,13 @@ files:
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sticky.md
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_columns.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_columns_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns.jsx
-- app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_rails.md
 - app/pb_kits/playbook/pb_table/docs/_table_sticky_right_columns_react.md
 - app/pb_kits/playbook/pb_table/docs/_table_striped.html.erb
 - app/pb_kits/playbook/pb_table/docs/_table_striped.jsx
@@ -2757,7 +2743,6 @@ files:
 - app/pb_kits/playbook/pb_table/table_header.rb
 - app/pb_kits/playbook/pb_table/table_row.html.erb
 - app/pb_kits/playbook/pb_table/table_row.rb
-- app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts
 - app/pb_kits/playbook/pb_text_input/_text_input.scss
 - app/pb_kits/playbook/pb_text_input/_text_input.tsx
 - app/pb_kits/playbook/pb_text_input/add_on.html.erb
@@ -3266,11 +3251,11 @@ files:
 - app/pb_kits/playbook/utilities/test/globalProps/truncate.test.js
 - app/pb_kits/playbook/utilities/text.ts
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
-- dist/chunks/_typeahead-vFuUQM5F.js
-- dist/chunks/_weekday_stacked-DG3A22sS.js
+- dist/chunks/_typeahead-BNULwihE.js
+- dist/chunks/_weekday_stacked-BKWemDAe.js
 - dist/chunks/lazysizes-B7xYodB-.js
-- dist/chunks/lib-OFT985dg.js
-- dist/chunks/pb_form_validation-CrsXd1-Y.js
+- dist/chunks/lib-B7sgJtGS.js
+- dist/chunks/pb_form_validation-C5Cc0-1v.js
 - dist/chunks/vendor.js
 - dist/menu.yml
 - dist/playbook-doc.js

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md

@@ -1,5 +0,0 @@
-For a simplified version of the Draggable API for the List kit, you can do the following:
-
-The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
-
-An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.html.erb

@@ -1,38 +0,0 @@
-<%= pb_rails("selectable_list",
-        props: {
-          enable_drag: true,
-          variant: "radio",
-          items: [
-            { drag_id: "41",
-              text: "Task 1",
-              input_options: {
-                value: "1",
-                name: "radio-name",
-              }
-            },
-            { drag_id: "42",
-              text: "Task 2",
-              checked: true,
-              input_options: {
-                value: "2",
-                name: "radio-name",
-              }
-            },
-            { drag_id: "43",
-              text: "Task 3",
-              input_options: {
-                value: "3",
-                name: "radio-name",
-              }
-            },
-            { drag_id: "44",
-              text: "Task 4",
-              input_options: {
-                value: "4",
-                name: "radio-name",
-              }
-            }
-          ]
-        }
-    )
-%>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md

@@ -1,3 +0,0 @@
-For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
-
-The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

data/app/pb_kits/playbook/pb_drawer/context.ts

@@ -1,11 +0,0 @@
-import React from 'react'
-
-const noop = (): void => void 0
-
-type DrawerContextType = {
-  onClose: () => void
-}
-
-export const DrawerContext = React.createContext<DrawerContextType>({
-  onClose: noop,
-})

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_behavior.jsx

@@ -1,38 +0,0 @@
-import React, { useState } from "react"
-import { Button, Drawer, Flex } from "playbook-ui"
-
-const useDrawer = (visible = false) => {
-  const [opened, setOpened] = useState(visible)
-  const toggle = () => setOpened(!opened)
-
-  return [opened, toggle]
-}
-
-const DrawerBehavior = () => {
-  const [drawerOpen, toggleDrawerOpen] = useDrawer()
-
-  return (
-    <>
-      <Flex wrap>
-        <Button id='sm'
-            marginRight='md'
-            onClick={toggleDrawerOpen}
-        >
-          {"Push Behavior"}
-        </Button>
-      </Flex>
-      <Flex>
-        <Drawer
-            behavior={"push"}      
-            onClose={toggleDrawerOpen}
-            opened={drawerOpen}
-            size={"lg"}
-        >
-          Test me (Push Behavior)
-        </Drawer>
-      </Flex>
-    </>
-  )
-}
-
-export default DrawerBehavior

data/app/pb_kits/playbook/pb_drawer/hooks/useBreakpoint.tsx

@@ -1,73 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export const breakpointValues = {
-  none: 0,
-  xs: 575,
-  sm: 768,
-  md: 992,
-  lg: 1200,
-  xl: 1400,
-} as const
-
-type BreakpointSize = keyof typeof breakpointValues
-
-interface UseBreakpointProps {
-  openBreakpoint?: BreakpointSize
-  closeBreakpoint?: BreakpointSize
-  triggerId?: string
-}
-
-export const useBreakpoint = ({ 
-  openBreakpoint = 'none',
-  closeBreakpoint = 'none',
-  triggerId 
-}: UseBreakpointProps) => {
-  const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false)
-  const [isUserClosed, setIsUserClosed] = useState(false)
-
-  useEffect(() => {
-    if (openBreakpoint === 'none' && closeBreakpoint === 'none') return
-
-    const handleResize = () => {
-      const width = window.innerWidth
-      
-      if (openBreakpoint !== 'none') {
-        const openBreakpointWidth = breakpointValues[openBreakpoint]
-        if (width >= openBreakpointWidth) {
-          setIsOpenBreakpointOpen(true)
-        } else {
-          setIsOpenBreakpointOpen(false)
-          setIsUserClosed(false)
-        }
-      }
-
-      if (closeBreakpoint !== 'none') {
-        const closeBreakpointWidth = breakpointValues[closeBreakpoint]
-        if (width < closeBreakpointWidth) {
-          setIsOpenBreakpointOpen(false)
-        } else {
-          setIsOpenBreakpointOpen(true)
-        }
-      }
-
-      // Handle menu button visibility
-      if (triggerId) {
-        const menuButton = document.getElementById(triggerId)
-        if (menuButton) {
-          menuButton.style.display = isOpenBreakpointOpen ? 'none' : ''
-        }
-      }
-    }
-
-    window.addEventListener('resize', handleResize)
-    handleResize()
-
-    return () => window.removeEventListener('resize', handleResize)
-  }, [openBreakpoint, closeBreakpoint, triggerId, isOpenBreakpointOpen])
-
-  return {
-    isOpenBreakpointOpen,
-    isUserClosed,
-    setIsUserClosed
-  }
-} 

data/app/pb_kits/playbook/pb_drawer/hooks/useDrawerAnimation.tsx

@@ -1,21 +0,0 @@
-import { useState, useEffect } from 'react'
-
-export const useDrawerAnimation = (isOpen: boolean) => {
-  const [animationState, setAnimationState] = useState('')
-
-  useEffect(() => {
-    if (isOpen) {
-      setAnimationState('afterOpen')
-    } else if (!isOpen && animationState === 'afterOpen') {
-      setAnimationState('beforeClose')
-      setTimeout(() => {
-        setAnimationState('')
-      }, 200)
-    }
-  }, [isOpen])
-
-  return {
-    animationState,
-    isVisible: isOpen || animationState === 'beforeClose'
-  }
-} 

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.html.erb

@@ -1,15 +0,0 @@
-<%= pb_rails("phone_number_input", props: {
-    id: "phone_number_input",
-    format_as_you_type: true
-}) %>
-
-<%= pb_rails("button", props: {id: "clickable", text: "Save Phone Number"}) %>
-
-<%= javascript_tag do %>
-    document.querySelector('#clickable').addEventListener('click', () => {
-        const formattedPhoneNumber = document.querySelector('#phone_number_input').value
-        const unformattedPhoneNumber = formattedPhoneNumber.replace(/\D/g, "")
-
-        alert(`Formatted: ${formattedPhoneNumber}. Unformatted: ${unformattedPhoneNumber}`)
-    })
-<% end %>

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.jsx

@@ -1,24 +0,0 @@
-import React, { useState } from "react";
-import { PhoneNumberInput, Body } from "playbook-ui";
-
-const PhoneNumberInputFormat = (props) => {
-    const [phoneNumber, setPhoneNumber] = useState("");
-
-    const handleOnChange = ({ number }) => {
-        setPhoneNumber(number);
-    };
-
-    return (
-        <>
-            <PhoneNumberInput
-                formatAsYouType
-                id="format"
-                onChange={handleOnChange}
-                {...props}
-            />
-            {phoneNumber && <Body>Unformatted number: {phoneNumber}</Body>}
-        </>
-    );
-};
-
-export default PhoneNumberInputFormat;

data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_format.md

@@ -1 +0,0 @@
-NOTE: the `number` in the React `onChange` event will not include formatting (no spaces, dashes, and parentheses). For Rails, the `value` will include formatting and its value must be sanitized manually. 

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

@@ -1,74 +0,0 @@
-<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_left_column: ["a"], sticky_right_column: ["b"] }) do %>
-  <thead>
-    <tr>
-      <th id="a">Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-      <th>Column 6</th>
-      <th>Column 7</th>
-      <th>Column 8</th>
-      <th>Column 9</th>
-      <th>Column 10</th>
-      <th>Column 11</th>
-      <th>Column 12</th>
-      <th>Column 13</th>
-      <th>Column 14</th>
-      <th id="b">Column 15</th>
-    </tr>
-  </thead>
-  <tbody>
-    <tr>
-      <td id="a">Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td id="b">Value 15</td>
-    </tr>
-    <tr>
-      <td id="a">Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td id="b">Value 15</td>
-    </tr>
-    <tr>
-      <td id="a">Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td>Value 13</td>
-      <td>Value 14</td>
-      <td id="b">Value 15</td>
-    </tr>
-  </tbody>
-<% end %>

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

@@ -1,3 +0,0 @@
-The `sticky_left_column` and `sticky_right_column` props can be used together on the same table as needed.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using props.

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

@@ -1,74 +0,0 @@
-<%= pb_rails("table", props: { size: "md", responsive: "scroll", sticky_right_column: ["13", "14", "15"] }) do %>
-  <thead>
-    <tr>
-      <th>Column 1</th>
-      <th>Column 2</th>
-      <th>Column 3</th>
-      <th>Column 4</th>
-      <th>Column 5</th>
-      <th>Column 6</th>
-      <th>Column 7</th>
-      <th>Column 8</th>
-      <th>Column 9</th>
-      <th>Column 10</th>
-      <th>Column 11</th>
-      <th>Column 12</th>
-      <th id="13">Column 13</th>
-      <th id="14">Column 14</th>
-      <th id="15">Column 15</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>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td id="13">Value 13</td>
-      <td id="14">Value 14</td>
-      <td id="15">Value 15</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td id="13">Value 13</td>
-      <td id="14">Value 14</td>
-      <td id="15">Value 15</td>
-    </tr>
-    <tr>
-      <td>Value 1</td>
-      <td>Value 2</td>
-      <td>Value 3</td>
-      <td>Value 4</td>
-      <td>Value 5</td>
-      <td>Value 6</td>
-      <td>Value 7</td>
-      <td>Value 8</td>
-      <td>Value 9</td>
-      <td>Value 10</td>
-      <td>Value 11</td>
-      <td>Value 12</td>
-      <td id="13">Value 13</td>
-      <td id="14">Value 14</td>
-      <td id="15">Value 15</td>
-    </tr>
-  </tbody>
-<% end %>

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

@@ -1,3 +0,0 @@
-The `sticky_right_column` prop works in the same way as the above `sticky_left_column` prop. It expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
-
-Please ensure that unique ids are used for all columns across multiple tables. Using the same columns ids on multiple tables can lead to issues when using the `sticky_right_column` prop.

data/app/pb_kits/playbook/pb_table/utilities/addDataTitle.ts

@@ -1,22 +0,0 @@
-export const addDataTitle = () => {
-    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])
-            })
-        })
-    });
-}