playbook_ui_docs 14.23.0 → 14.24.0.pre.alpha.PLAY2116datepickercursorfix9610

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.jsx

@@ -0,0 +1,94 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "powerHomeRemodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "people",
+        id: "people1",
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "talentAcquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "businessAffairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "learningAndDevelopment",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "peopleExperience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "contactCenter",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "appointmentManagement",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "customerService",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+// Pre-selected node IDs to demonstrate the functionality
+const preSelectedIds = ["talent1", "initiative1", "customer1"];
+
+const MultiLevelSelectShowCheckedChildren = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-checked-children'
+          onSelect={(selectedNodes) =>
+            console.log(
+              "Selected Items",
+              selectedNodes
+            )
+          }
+          selectedIds={preSelectedIds}
+          showCheckedChildren={false}
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectShowCheckedChildren;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_show_checked_children.md

@@ -0,0 +1,3 @@
+If you wish to control the auto-expansion of nodes with selected descendants in your multi-level select, you can utilize `showCheckedChildren/show_checked_children`. This prop (set to 'true' by default) controls whether items will be expanded on first render. When set to true, a node with selected descendants will automatically render as expanded so the selected nodes are visible. If you do NOT wish for this to be the case, you can set this prop to false.
+
+The prop will still honor any `expanded` attribute set up within your tree data.

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

@@ -13,4 +13,4 @@ export { default as MultiLevelSelectDisabledOptions } from './_multi_level_selec
 export { default as MultiLevelSelectDisabledOptionsParent } from './_multi_level_select_disabled_options_parent.jsx'
 export { default as MultiLevelSelectDisabledOptionsParentDefault } from './_multi_level_select_disabled_options_parent_default.jsx'
 export { default as MultiLevelSelectDisabledOptionsDefault } from './_multi_level_select_disabled_options_default.jsx'
-export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'
+export { default as MultiLevelSelectLabel } from './_multi_level_select_label.jsx'

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_rails.md

@@ -3,4 +3,6 @@ Our Pagination kit depends on the <a href="https://github.com/mislav/will_pagina
 
 Once you have perfomed the paginated query in your controller file you can use our kit (see code example below) instead of `<%= will_paginate @users %>` in your view file.
 
-You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
+You need to add: <code>require "playbook/pagination_renderer"</code> in your apps controller file.
+
+Note: If the total page count is 0 or 1, the Pagination kit will not be displayed as there aren't multiple pages to navigate.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default_react.md

@@ -1 +1,3 @@
-The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
+The `range` prop determines how many pages to display in the Pagination component. Regardless of this value, the first two and last two pages are always visible to facilitate navigation to the beginning and end of the pagination. If these always-visible pages fall within the specified range, they are included in the display. If they fall outside the range, the pagination will show additional pages up to the number defined by the `range` prop.
+
+Note: If the `total` pages prop is 0 or 1, the Pagination component will not be displayed, as there aren't multiple pages to navigate.

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control.jsx

@@ -0,0 +1,112 @@
+import React, { useState } from "react";
+import Flex from '../../pb_flex/_flex'
+import Pagination from '../../pb_pagination/_pagination'
+import Select from '../../pb_select/_select'
+import Table from '../../pb_table/_table'
+
+import { data } from "./data";
+
+const PaginationExternalControl = (props) => {
+  const [totalItems, setTotalItems] = useState(20);
+  const [itemsPerPage, setItemsPerPage] = useState(5);
+  const [currentPage, setCurrentPage] = useState(1);
+
+  const totalPages = Math.ceil(totalItems / itemsPerPage);
+
+  const handlePageChange = (page) => {
+    setCurrentPage(page);
+  };
+
+  const limitedData = data.slice(0, totalItems);
+  const startIndex = (currentPage - 1) * itemsPerPage;
+  const paginatedItems = limitedData.slice(startIndex, startIndex + itemsPerPage);
+
+  const handleTotalItemsChange = (event) => {
+    const value = Number(event.target.value);
+    setTotalItems(value);
+    setCurrentPage(1);
+  };
+
+  const handleItemsPerPageChange = (event) => {
+    const value = Number(event.target.value);
+    setItemsPerPage(value);
+    setCurrentPage(1);
+  };
+
+  return (
+    <>
+        <Flex gap="sm">
+            <Select
+                label="Total Items"
+                onChange={handleTotalItemsChange}
+                options={[
+                    { value: "5", text: "5" },
+                    { value: "10", text: "10" },
+                    { value: "20", text: "20" }
+                ]}
+                size="sm"
+                value={String(totalItems)}
+                {...props}
+            />
+
+            <Select
+                label="Items per Page"
+                onChange={handleItemsPerPageChange}
+                options={[
+                    { value: "3", text: "3" },
+                    { value: "5", text: "5" },
+                    { value: "10", text: "10" }
+                ]}
+                size="sm"
+                value={String(itemsPerPage)}
+                {...props}
+            />
+        </Flex>
+
+        <Pagination
+            current={currentPage}
+            key={`pagination-top-${currentPage}`}
+            marginBottom="xs"
+            onChange={handlePageChange}
+            range={5}
+            total={totalPages}
+            {...props}
+        />
+        <Table 
+            marginBottom="xs"
+            responsive="none" 
+            size="sm" 
+            {...props}
+        >
+            <Table.Head>
+            <Table.Row>
+                <Table.Header>{"Column 1"}</Table.Header>
+                <Table.Header>{"Column 2"}</Table.Header>
+                <Table.Header>{"Column 3"}</Table.Header>
+                <Table.Header>{"Column 4"}</Table.Header>
+                <Table.Header>{"Column 5"}</Table.Header>
+            </Table.Row>
+            </Table.Head>
+            <Table.Body>
+            {paginatedItems.map((row, index) => (
+                <Table.Row key={index}>
+                {row.map((cell, cellIndex) => (
+                    <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+                ))}
+                </Table.Row>
+            ))}
+            </Table.Body>
+        </Table>
+        <Pagination
+            current={currentPage}
+            key={`pagination-bottom-${currentPage}`}
+            onChange={handlePageChange}
+            range={5}
+            total={totalPages}
+            {...props}
+        />
+    </>
+  )
+}
+
+export default PaginationExternalControl 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_external_control_react.md

@@ -0,0 +1,3 @@
+The Pagination component supports external control of the current page. This allows for programmatically reseting or changing the current page when filters or other criteria change, without needing to unmount and remount the component.
+
+In this example, changing the "Total Items" or "Items per Page" dropdowns will automatically reset the pagination to page 1, demonstrating how external control works. The pagination component will update its internal state to reflect the new `current` prop value.

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

@@ -6,3 +6,4 @@ examples:
   react:
   - pagination_default: Default
   - pagination_page_change: Page Change
+  - pagination_external_control: External Control

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

@@ -1,2 +1,3 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
 export { default as PaginationPageChange } from './_pagination_page_change.jsx'
+export { default as PaginationExternalControl } from './_pagination_external_control.jsx'

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

@@ -0,0 +1,10 @@
+<%= pb_rails("phone_number_input", props: {
+    strict_mode: true,
+}) %>
+
+<%= pb_rails("body", props: { text: "With format_as_you_type" }) %>
+
+<%= pb_rails("phone_number_input", props: {
+    strict_mode: true,
+    format_as_you_type: true,
+}) %>

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+import Body from '../../pb_body/_body'
+import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
+
+const PhoneNumberInputStrictMode = (props) => {
+
+    return (
+        <>
+            <PhoneNumberInput
+                id="strict"
+                strictMode
+                {...props}
+            />
+            <Body>With formatAsYouType</Body>
+            <PhoneNumberInput
+                formatAsYouType
+                id="strict"
+                strictMode
+                {...props}
+            />
+        </>
+    );
+};
+
+export default PhoneNumberInputStrictMode;

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

@@ -0,0 +1,3 @@
+Ignore any irrelevant characters and cap the length at the maximum valid number length.
+
+This can be combined with `format_as_you_type` / `formatAsYouType`. 

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

@@ -10,6 +10,7 @@ examples:
   - phone_number_input_clear_field: Clearing the Input Field
   - phone_number_input_access_input_element: Accessing the Input Element
   - phone_number_input_format: Format as You Type
+  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
 
   rails:
@@ -20,5 +21,6 @@ examples:
   - phone_number_input_exclude_countries: Exclude Countries
   - phone_number_input_validation: Form Validation
   - phone_number_input_format: Format as You Type
+  - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search

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

@@ -7,4 +7,5 @@ export { default as PhoneNumberInputValidation } from './_phone_number_input_val
 export { default as PhoneNumberInputClearField } from './_phone_number_input_clear_field'
 export { default as PhoneNumberInputAccessInputElement } from './_phone_number_input_access_input_element'
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
+export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'

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

@@ -19,6 +19,7 @@
                     value: "checkbox-value",
                     name: "main-checkbox-selectable",
                     indeterminate_main: true,
+                    indeterminate_main_labels: ["", ""],
                     id: "checkbox-selectable"
                 }) %>
             <% end %>