playbook_ui_docs 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469 → 16.10.0.pre.alpha.PLAY3059dialogpopoverportalingfullscreen17455

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 54da223a58079747e07a434617596364176d18e253953d3538b471b5682514fc
-  data.tar.gz: c9ac712cb4fc7704c4d122cf27377c4847d432664f7871a3536104332e85ddfe
+  metadata.gz: defe35c0433c7a7ddcc57558f4b80bd7e325b43eff9e3cd67a8978e1e1034a4c
+  data.tar.gz: f6a79ad144af1026e7e748b90ed8ec8e68425e88120fd4f92022526f5d9a477c
 SHA512:
-  metadata.gz: 845a59d6693e7e4c17c38ecc339b30cf06fa815a77e222f40c4521b98a513dfeff8166aaae4f5a7fd35e5ae30e30a271e2d55a6fd7bbbe6197b73428d8f33e52
-  data.tar.gz: db593af6693a42cde0cbe0ae239e25890041de12bc1957788210ac2db85a81e48cd499a8997c72e9bb39993c2fc8a039e3343a2e52061eb312c90711a5793333
+  metadata.gz: dd921a3952a3e98f028b9b51a25705904c42944827fc898ac87c5077a9c9a8f5fde6d24d0f4cd9651c68d5758c8618fa3cd11c2076b7f9950bab3cb88c794438
+  data.tar.gz: 41ff708cebbb2685675aa8ee17afc8a0fc2994846efc52e7d6f9691989f5b39c14e79b0ae2fa581cf20a01119a04d8096274c1147741d21d0f97039c0a599565

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from "react"
 import AdvancedTable from '../_advanced_table'
 import MOCK_DATA_WITH_ID from "./advanced_table_mock_data_with_id.json"
-import Caption from "../../pb_caption/_caption"
 
 const AdvancedTableRowPinning = (props) => {
   const columnDefinitions = [
@@ -36,30 +35,14 @@ const AdvancedTableRowPinning = (props) => {
     },
   ]
 
-  const [pinnedRowsTop, setPinnedRowsTop] = useState({top: ["8"]})
-  const [pinnedRowsBottom, setPinnedRowsBottom] = useState({bottom: ["8"]})
+  const [pinnedRows, setPinnedRows] = useState({top: ["8"]})
 
   return (
     <div>
-      <Caption text="Pinned Rows Top" />
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           maxHeight="xs"
-          pinnedRows={{value: pinnedRowsTop, onChange: setPinnedRowsTop}}
-          tableData={MOCK_DATA_WITH_ID}
-          tableProps={{sticky: true}}
-          {...props}
-      >
-        <AdvancedTable.Header enableSorting />
-        <AdvancedTable.Body />
-      </AdvancedTable>
-      <Caption marginTop="md"
-          text="Pinned Rows Bottom"
-      />
-      <AdvancedTable
-          columnDefinitions={columnDefinitions}
-          maxHeight="xs"
-          pinnedRows={{value: pinnedRowsBottom, onChange: setPinnedRowsBottom}}
+          pinnedRows={{value: pinnedRows, onChange: setPinnedRows}}
           tableData={MOCK_DATA_WITH_ID}
           tableProps={{sticky: true}}
           {...props}

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pinned_rows_react.md

@@ -1,7 +1,7 @@
-Use the `pinnedRows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom when scrolling through table data and will not change position if sorting is used.
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
 
 **NOTE:** 
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
 - Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` or `bottom` property as shown in the code snippet below (both can be used on the same table).
+- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
 - For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 

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

@@ -89,4 +89,5 @@ examples:
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color
+  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -4,7 +4,6 @@ examples:
   - file_upload_default: File Upload
   - file_upload_custom: Custom
   - file_upload_error: Error
-  - file_upload_remove_replace: Remove and Replace
 
   react:
   - file_upload_default: Default List of files to upload
@@ -12,5 +11,4 @@ examples:
   - file_upload_custom_message: Add a custom message
   - file_upload_custom_description: Add your one accepted files description
   - file_upload_max_size: Set a file size limit
-  - file_upload_error: Error
-  - file_upload_remove_replace: Remove and Replace
+  - file_upload_error: Error

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

@@ -4,4 +4,3 @@ export { default as FileUploadCustomMessage } from './_file_upload_custom_messag
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
 export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
 export { default as FileUploadError } from './_file_upload_error.jsx'
-export { default as FileUploadRemoveReplace } from './_file_upload_remove_replace.jsx'

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.jsx

@@ -90,7 +90,7 @@ const FullScreenTableAndFilter = (props) => {
                 double
                 maxHeight="50vh"
                 minWidth="xs"
-                popoverProps={{ width: "350px", appendTo: ".fullscreen-overlay" }}
+                popoverProps={{ width: "350px" }}
                 results={50}
                 sortOptions={{
                   territory_id: "Territory ID",

data/app/pb_kits/playbook/pb_full_screen/docs/_full_screen_table_and_filter.md

@@ -1 +1 @@
-Full Screen can host composed workflows such as a filter paired with a data table. For popovers inside the overlay, set the popover append target to `.fullscreen-overlay` so menus render within the fullscreen layer.
+Full Screen can host composed workflows such as a filter paired with a data table. Filter and sort popovers automatically append to the fullscreen overlay; dropdown menus inside them portal above the overlay via the shared floating UI stack.

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.jsx

@@ -1,21 +1,523 @@
-import React from 'react'
+import React, { useState } from 'react'
 
 import Typeahead from '../_typeahead'
+import Dropdown from '../../pb_dropdown/_dropdown'
+import MultiLevelSelect from '../../pb_multi_level_select/_multi_level_select'
+import DatePicker from '../../pb_date_picker/_date_picker'
+import TimePicker from '../../pb_time_picker/_time_picker'
+import FullScreen from '../../pb_full_screen/_full_screen'
+import Button from '../../pb_button/_button'
+import Dialog from '../../pb_dialog/_dialog'
+import Flex from '../../pb_flex/_flex'
+import Body from '../../pb_body/_body'
+import Caption from '../../pb_caption/_caption'
+import SectionSeparator from '../../pb_section_separator/_section_separator'
+import Filter from '../../pb_filter/_filter'
 
-const options = [
-  { label: 'Orange', value: '#FFA500' },
-  { label: 'Red', value: '#FF0000' },
-  { label: 'Green', value: '#00FF00' },
-  { label: 'Blue', value: '#0000FF' },
+const typeaheadOptions = [
+  { label: 'United States', value: 'unitedStates', id: 'us' },
+  { label: 'United Kingdom', value: 'unitedKingdom', id: 'gb' },
+  { label: 'Canada', value: 'canada', id: 'ca' },
+  { label: 'Australia', value: 'australia', id: 'au' },
+  { label: 'Germany', value: 'germany', id: 'de' },
+  { label: 'France', value: 'france', id: 'fr' },
+  { label: 'Japan', value: 'japan', id: 'jp' },
+  { label: 'Brazil', value: 'brazil', id: 'br' },
+  { label: 'Mexico', value: 'mx', id: 'mx' },
+  { label: 'Italy', value: 'it', id: 'it' },
+  { label: 'Spain', value: 'es', id: 'es' },
+  { label: 'Netherlands', value: 'nl', id: 'nl' },
+  { label: 'Sweden', value: 'se', id: 'se' },
+  { label: 'Norway', value: 'no', id: 'no' },
+  { label: 'Denmark', value: 'dk', id: 'dk' },
+  { label: 'Finland', value: 'fi', id: 'fi' },
+  { label: 'Poland', value: 'pl', id: 'pl' },
+  { label: 'Switzerland', value: 'ch', id: 'ch' },
+  { label: 'Austria', value: 'at', id: 'at' },
+  { label: 'Belgium', value: 'be', id: 'be' },
+  { label: 'Ireland', value: 'ie', id: 'ie' },
+  { label: 'Portugal', value: 'pt', id: 'pt' },
+  { label: 'Greece', value: 'gr', id: 'gr' },
+  { label: 'Czech Republic', value: 'cz', id: 'cz' },
+  { label: 'Hungary', value: 'hu', id: 'hu' },
+  { label: 'New Zealand', value: 'nz', id: 'nz' },
+  { label: 'Singapore', value: 'sg', id: 'sg' },
+  { label: 'South Korea', value: 'kr', id: 'kr' },
+  { label: 'India', value: 'in', id: 'in' },
+  { label: 'China', value: 'cn', id: 'cn' },
 ]
 
-const TypeaheadDefault = (props) => {
-  return (
+const dropdownDocOptions = [
+  { label: 'United States', value: 'unitedStates', id: 'us' },
+  { label: 'Canada', value: 'canada', id: 'ca' },
+  { label: 'United Kingdom', value: 'unitedKingdom', id: 'gb' },
+  { label: 'Japan', value: 'japan', id: 'jp' },
+  { label: 'Brazil', value: 'brazil', id: 'br' },
+]
+
+const suffixTreeIds = (nodes, suffix) =>
+  nodes.map((node) => {
+    const next = {
+      ...node,
+      id: `${node.id}-${suffix}`,
+    }
+    if (node.children?.length) {
+      next.children = suffixTreeIds(node.children, suffix)
+    }
+    return next
+  })
+
+/** From `pb_multi_level_select` default doc example */
+const MLS_DEFAULT_TREE_DATA = [
+  {
+    label: 'Power Home Remodeling',
+    value: 'powerHomeRemodeling',
+    id: 'powerhome1',
+    expanded: true,
+    children: [
+      {
+        label: 'People',
+        value: 'people',
+        id: 'people1',
+        expanded: true,
+        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',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+/** From `pb_multi_level_select` single-select doc example */
+const MLS_SINGLE_TREE_DATA = [
+  {
+    label: 'HQ',
+    value: 'hQ',
+    id: 'hq',
+  },
+  {
+    label: 'Philadelphia',
+    value: 'philadelphia',
+    id: 'phl',
+    children: [
+      {
+        label: 'Marketing & Sales PHL',
+        value: 'marketingAndSalesPhl',
+        id: 'marketingPHL',
+      },
+      {
+        label: 'Installation Office PHL',
+        value: 'installationOfficePhl',
+        id: 'installationPHL',
+      },
+      {
+        label: 'Warehouse PHL',
+        value: 'warehousePhl',
+        id: 'warehousePHL',
+      },
+    ],
+  },
+  {
+    label: 'New Jersey',
+    value: 'newJersey',
+    id: 'nj',
+    children: [
+      {
+        label: 'New Jersey',
+        value: 'newJersey',
+        id: 'nj1',
+        children: [
+          {
+            label: 'Marketing & Sales NJ',
+            value: 'marketingAndSalesNj',
+            id: 'marketingNJ',
+          },
+          {
+            label: 'Installation Office NJ',
+            value: 'installationOfficeNj',
+            id: 'installationNJ',
+          },
+          {
+            label: 'Warehouse NJ',
+            value: 'warehouseNj',
+            id: 'warehouseNJ',
+          },
+        ],
+      },
+      {
+        label: 'Princeton',
+        value: 'princeton',
+        id: 'princeton',
+        children: [
+          {
+            label: 'Marketing & Sales Princeton',
+            value: 'marketingAndSalesPrinceton',
+            id: 'marketingPR',
+          },
+          {
+            label: 'Installation Office Princeton',
+            value: 'installationOfficePrinceton',
+            id: 'installationPR',
+          },
+          {
+            label: 'Warehouse Princeton',
+            value: 'warehousePrinceton',
+            id: 'warehousePR',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    label: 'Maryland',
+    value: 'maryland',
+    id: 'MD',
+    children: [
+      {
+        label: 'Marketing & Sales MD',
+        value: 'marketingAndSalesMd',
+        id: 'marketingMD',
+      },
+      {
+        label: 'Installation Office MD',
+        value: 'installationOfficeMd',
+        id: 'installationMD',
+      },
+      {
+        label: 'Warehouse MD',
+        value: 'warehouseMd',
+        id: 'warehouseMD',
+      },
+    ],
+  },
+  {
+    label: 'Connecticut',
+    value: 'connecticut',
+    id: 'CT',
+    children: [
+      {
+        label: 'Marketing & Sales CT',
+        value: 'marketingAndSalesCt',
+        id: 'marketingCT',
+      },
+      {
+        label: 'Installation Office CT',
+        value: 'installationOfficeCt',
+        id: 'installationCT',
+      },
+      {
+        label: 'Warehouse CT',
+        value: 'warehouseCt',
+        id: 'warehouseCT',
+      },
+    ],
+  },
+]
+
+const mlsDefaultTreeFor = (suffix) =>
+  suffixTreeIds(MLS_DEFAULT_TREE_DATA, suffix)
+
+const mlsSingleTreeFor = (suffix) =>
+  suffixTreeIds(MLS_SINGLE_TREE_DATA, suffix)
+
+const TITLE_TYPEAHEAD_OPTIONS = [
+  { key: 'senior-ux-engineer', label: 'Senior UX Engineer', value: 'senior-ux-engineer' },
+  { key: 'ux-engineer-ii', label: 'UX Engineer II', value: 'ux-engineer-ii' },
+  { key: 'ux-engineer', label: 'UX Engineer', value: 'ux-engineer' },
+  { key: 'ux-designer', label: 'UX Designer', value: 'ux-designer' },
+  { key: 'director-uxe', label: 'Director of User Experience Engineering', value: 'director-uxe' },
+  { key: 'product-manager', label: 'Product Manager', value: 'product-manager' },
+  { key: 'engineering-manager', label: 'Engineering Manager', value: 'engineering-manager' },
+  { key: 'staff-engineer', label: 'Staff Engineer', value: 'staff-engineer' },
+  { key: 'principal-engineer', label: 'Principal Engineer', value: 'principal-engineer' },
+  { key: 'data-analyst', label: 'Data Analyst', value: 'data-analyst' },
+  { key: 'qa-engineer', label: 'QA Engineer', value: 'qa-engineer' },
+  { key: 'devops-engineer', label: 'DevOps Engineer', value: 'devops-engineer' },
+  { key: 'technical-writer', label: 'Technical Writer', value: 'technical-writer' },
+  { key: 'scrum-master', label: 'Scrum Master', value: 'scrum-master' },
+  { key: 'nitro-producteer', label: 'Nitro Producteer', value: 'nitro-producteer' },
+]
+
+const filterSortProps = {
+  results: 50,
+  sortOptions: {
+    started_on: 'Start Date',
+    title_name: 'Title',
+    department_name: 'Department',
+    branch_branch_name: 'Branch',
+  },
+  sortValue: [{ name: 'started_on', dir: 'asc' }],
+}
+
+const datePickerDocProps = {
+  customQuickPickDates: { override: true, dates: [] },
+  maxDate: '',
+  minDate: '',
+  staticPosition: true,
+}
+
+const renderDateTimePickers = (suffix) => (
+  <>
+    <DatePicker
+        {...datePickerDocProps}
+        label="Date picker"
+        name={`typeahead-doc-date-picker-${suffix}`}
+        pickerId={`inputs-overflow-date-picker-${suffix}`}
+        selectionType="quickpick"
+    />
+    <TimePicker
+        id={`inputs-overflow-time-picker-${suffix}`}
+        label="Time picker"
+    />
+  </>
+)
+const renderFilterPopover = (closePopover, suffix) => (
+  <>
     <Typeahead
-        label="Colors"
-        options={options}
-        {...props}
+        id={`overflow-visible-title-${suffix}`}
+        isMulti={false}
+        label="Typeahead"
+        marginBottom="none"
+        options={TITLE_TYPEAHEAD_OPTIONS}
+        placeholder="Search title…"
     />
+    <Dropdown
+        blankSelection="Select country…"
+        id={`overflow-visible-dropdown-${suffix}`}
+        label="Dropdown"
+        options={dropdownDocOptions}
+    />
+    <MultiLevelSelect
+        id={`overflow-visible-multi-level-select-${suffix}-single`}
+        inputName="Power"
+        label="Multi level select (single)"
+        name={`typeahead_doc_filter_${suffix}_mls_single`}
+        placeholder="Start typing..."
+        treeData={mlsSingleTreeFor(`filter-${suffix}-single`)}
+        variant="single"
+    />
+    <MultiLevelSelect
+        id={`overflow-visible-multi-level-select-${suffix}-multi`}
+        label="Multi level select (default)"
+        name={`typeahead_doc_filter_${suffix}_mls_multi`}
+        placeholder="Start typing..."
+        treeData={mlsDefaultTreeFor(`filter-${suffix}-multi`)}
+    />
+    {renderDateTimePickers(`filter-${suffix}`)}
+    <Flex spacing="between">
+      <Button
+          onClick={() => {
+            alert('No filtering functionality - just a pattern demo!')
+            closePopover()
+          }}
+          text="Filter"
+      />
+      <Button
+          text="Defaults"
+          variant="secondary"
+      />
+    </Flex>
+  </>
+)
+
+const TypeaheadDefault = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const [isScrollableOpen, setIsScrollableOpen] = useState(false);
+  const close = () => setIsOpen(false);
+  const open = () => setIsOpen(true);
+  const closeScrollable = () => setIsScrollableOpen(false);
+  const openScrollable = () => setIsScrollableOpen(true);
+  return (
+    <>
+      <div style={{ height: "2000px" }}>
+      <FullScreen
+          headerText="Fullscreen"
+          trigger={({ onClick, isOpen }) => (
+            <Button
+                onClick={onClick}
+                text={isOpen ? "Exit Fullscreen" : "Enter Fullscreen"}
+                variant="secondary"
+            />
+        )}
+    >
+      <Button marginY="md" 
+          onClick={open}
+      >
+          {"Open dialog: Input kits inside"}
+        </Button>
+        <Dialog onClose={close}
+            opened={isOpen}
+            size="md"
+        >
+          <Dialog.Header>
+            <Body>{"Input kits inside Dialog"}</Body>
+          </Dialog.Header>
+          <Dialog.Body>
+            <Typeahead
+                label="Typeahead"
+                marginBottom="none"
+                options={typeaheadOptions}
+                placeholder="Search country…"
+            />
+            <Dropdown
+                blankSelection="Select country…"
+                id="inputs-overflow-dropdown-js"
+                label="Dropdown"
+                options={dropdownDocOptions}
+            />
+            <MultiLevelSelect
+                id="inputs-overflow-multi-level-select-dialog-js-single"
+                inputName="Power"
+                label="Multi level select (single)"
+                name="typeahead_doc_dialog_mls_js_single"
+                placeholder="Start typing..."
+                treeData={mlsSingleTreeFor("dialog-single")}
+                variant="single"
+            />
+            <MultiLevelSelect
+                id="inputs-overflow-multi-level-select-dialog-js-multi"
+                label="Multi level select (default)"
+                name="typeahead_doc_dialog_mls_js_multi"
+                placeholder="Start typing..."
+                treeData={mlsDefaultTreeFor("dialog-multi")}
+            />
+            {renderDateTimePickers('dialog')}
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button onClick={close}>{"Save"}</Button>
+            <Button onClick={close}
+                variant="link"
+            >
+              {"Cancel"}
+            </Button>
+          </Dialog.Footer>
+        </Dialog>
+        <Button marginBottom="md"
+            onClick={openScrollable}
+        >
+          {"Open scrollable dialog: Input kits inside"}
+        </Button>
+        <Dialog onClose={closeScrollable}
+            opened={isScrollableOpen}
+            size="md"
+        >
+          <Dialog.Header>
+            <Body>{"Input kits inside Dialog"}</Body>
+          </Dialog.Header>
+          <Dialog.Body>
+            <Body text="At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat.At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat." />
+            <Typeahead
+                label="Typeahead"
+                marginBottom="none"
+                options={typeaheadOptions}
+                placeholder="Search country…"
+            />
+            <Dropdown
+                blankSelection="Select country…"
+                id="inputs-overflow-dropdown-js"
+                label="Dropdown"
+                options={dropdownDocOptions}
+            />
+            <MultiLevelSelect
+                id="inputs-overflow-multi-level-select-scrollable-js-single"
+                inputName="Power"
+                label="Multi level select (single)"
+                name="typeahead_doc_dialog_scrollable_mls_js_single"
+                placeholder="Start typing..."
+                treeData={mlsSingleTreeFor("dialog-scrollable-single")}
+                variant="single"
+            />
+            <MultiLevelSelect
+                id="inputs-overflow-multi-level-select-scrollable-js-multi"
+                label="Multi level select (default)"
+                name="typeahead_doc_dialog_scrollable_mls_js_multi"
+                placeholder="Start typing..."
+                treeData={mlsDefaultTreeFor("dialog-scrollable-multi")}
+            />
+            {renderDateTimePickers('dialog-scrollable')}
+          </Dialog.Body>
+          <Dialog.Footer>
+            <Button onClick={closeScrollable}>{"Save"}</Button>
+            <Button onClick={closeScrollable}
+                variant="link"
+            >
+              {"Cancel"}
+            </Button>
+          </Dialog.Footer>
+        </Dialog>
+        <Caption text="FILTER #1 HAS NO MAX HEIGHT" />
+        <Filter
+            background={false}
+            double
+            minWidth="xs"
+            popoverProps={{ width: '350px' }}
+            {...filterSortProps}
+        >
+          {({ closePopover }) => renderFilterPopover(closePopover, '1')}
+        </Filter>
+        <SectionSeparator />
+        <Caption text="FILTER #2 HAS MAX HEIGHT" />
+        <Filter
+            background={false}
+            double
+            maxHeight="50vh"
+            minWidth="xs"
+            popoverProps={{ width: '350px' }}
+            {...filterSortProps}
+        >
+          {({ closePopover }) => renderFilterPopover(closePopover, '2')}
+        </Filter>
+        </FullScreen>
+      </div>
+    </>
   )
 }
 

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469
+  version: 16.10.0.pre.alpha.PLAY3059dialogpopoverportalingfullscreen17455
 platform: ruby
 authors:
 - Power UX
@@ -1092,9 +1092,6 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.html.erb
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_error.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
-- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb
-- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx
-- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md
 - app/pb_kits/playbook/pb_file_upload/docs/_playground.json
 - app/pb_kits/playbook/pb_file_upload/docs/_playground.overrides.json
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.html.erb

@@ -1,66 +0,0 @@
-<div id="file-upload-remove-replace">
-  <%= pb_rails("list", props: { id: "selected-files-list", margin_bottom: "sm" }) %>
-
-  <%= pb_rails("file_upload", props: {
-    id: "remove_replace",
-    input_options: { multiple: true },
-  }) %>
-</div>
-
-<template id="file-list-item-template">
-  <%= pb_rails("list/item") do %>
-    <%= pb_rails("flex", props: { align: "center", justify: "between", width: "100%" }) do %>
-      <%= pb_rails("body", props: { data: { file_name: true } }) %>
-      <%= pb_rails("circle_icon_button", props: {
-        icon: "times",
-        variant: "secondary",
-        input_options: { classname: "remove-file-button" },
-      }) %>
-    <% end %>
-  <% end %>
-</template>
-
-<%= javascript_tag defer: "defer" do %>
-  document.addEventListener("DOMContentLoaded", function () {
-    const fileInput = document.getElementById("upload-remove_replace")
-    const list = document.getElementById("selected-files-list")
-    const template = document.getElementById("file-list-item-template")
-    let files = []
-
-    if (!fileInput || !list || !template) return
-
-    function syncInput() {
-      const dataTransfer = new DataTransfer()
-      files.forEach((file) => dataTransfer.items.add(file))
-      fileInput.files = dataTransfer.files
-    }
-
-    function render() {
-      list.innerHTML = ""
-
-      files.forEach((file, index) => {
-        const clone = template.content.cloneNode(true)
-        const nameElement = clone.querySelector("[data-file-name]")
-        const removeButton = clone.querySelector(".remove-file-button")
-
-        nameElement.textContent = file.name
-        removeButton.addEventListener("click", function (event) {
-          event.preventDefault()
-          event.stopPropagation()
-          files = files.filter((_, fileIndex) => fileIndex !== index)
-          syncInput()
-          render()
-        })
-
-        list.appendChild(clone)
-      })
-    }
-
-    fileInput.addEventListener("change", function () {
-      const newFiles = Array.from(fileInput.files)
-      files = [...files, ...newFiles]
-      syncInput()
-      render()
-    })
-  })
-<% end %>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.jsx

@@ -1,53 +0,0 @@
-
-import React, { useState } from 'react'
-
-import Body from '../../pb_body/_body'
-import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
-import FileUpload from '../../pb_file_upload/_file_upload'
-import Flex from '../../pb_flex/_flex'
-import List from '../../pb_list/_list'
-import ListItem from '../../pb_list/_list_item'
-
-const FileUploadRemoveReplace = (props) => {
-  const [filesToUpload, setFilesToUpload] = useState([])
-
-  const handleOnFilesAccepted = (files) => {
-    setFilesToUpload([...filesToUpload, ...files])
-  }
-
-  const handleRemoveFile = (index) => {
-    setFilesToUpload(filesToUpload.filter((_, fileIndex) => fileIndex !== index))
-  }
-
-  return (
-    <div>
-      {filesToUpload.length > 0 && (
-        <List marginBottom="sm">
-          {filesToUpload.map((file, index) => (
-            <ListItem key={`${file.name}-${index}`}>
-              <Flex
-                  align="center"
-                  justify="between"
-                  width="100%"
-              >
-                <Body text={file.name} />
-                <CircleIconButton
-                    aria={{ label: `Remove ${file.name}` }}
-                    icon="times"
-                    onClick={() => handleRemoveFile(index)}
-                    variant="secondary"
-                />
-              </Flex>
-            </ListItem>
-          ))}
-        </List>
-      )}
-      <FileUpload
-          onFilesAccepted={handleOnFilesAccepted}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default FileUploadRemoveReplace

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_remove_replace.md

@@ -1,5 +0,0 @@
-The File Upload kit does not include built-in remove or replace behavior. Manage selected files in application state and compose the kit with other Playbook components.
-
-**Remove** — Track accepted files in state and filter out the file to remove. In React, pair `List` with `CircleIconButton`. In Rails, listen for `change` on the file input, keep files in a JavaScript array, and use `DataTransfer` to sync the input when a file is removed.
-
-**Replace** — Selecting a new file on the native Rails input replaces the current selection. For single-file React workflows, set state to the newly accepted files instead of appending: `setFilesToUpload(files)`.