playbook_ui 14.4.0.pre.alpha.pbntr523enablekitsforradiofix3826 → 14.4.0.pre.alpha.stephenagreerpatch13908

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

@@ -0,0 +1,117 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerBorders = () => {
+  // Individual state variables for each drawer size
+  const [openedBRightDrawer, setOpenedBRightDrawer] = useState(false);
+  const [openedBLeftDrawer, setOpenedBLeftDrawer] = useState(false);
+  const [openedBFullDrawer, setOpenedBFullDrawer] = useState(false);
+  const [openedBDefaultDrawer, setOpenedBDefaultDrawer] = useState(false);
+  const [openedBRoundedDrawer, setOpenedBRoundedDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleBRightDrawer = () => setOpenedBRightDrawer(!openedBRightDrawer);
+  const toggleBLeftDrawer = () => setOpenedBLeftDrawer(!openedBLeftDrawer);
+  const toggleBFullDrawer = () => setOpenedBFullDrawer(!openedBFullDrawer);
+  const toggleBDefaultDrawer = () => setOpenedBDefaultDrawer(!openedBDefaultDrawer);
+  const toggleBRoundedDrawer = () => setOpenedBRoundedDrawer(!openedBRoundedDrawer);
+
+  return (
+    <>
+      <Flex padding="md"
+          wrap
+      >
+        <Button marginRight="md"
+            onClick={toggleBRightDrawer}
+        >
+         Drawer with border right
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBLeftDrawer}
+        >
+         Drawer with border left
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBFullDrawer}
+        >
+          Drawer with border full
+        </Button>
+        <Button marginRight="md"    
+            onClick={toggleBDefaultDrawer}
+        >
+          Default Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleBRoundedDrawer}
+        > 
+          Rounded Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="float"
+          border="right"
+          fullHeight
+          onClose={toggleBRightDrawer}
+          opened={openedBRightDrawer}
+          overlay={false}
+          placement="left"
+          size="lg"
+      >
+        This is a Drawer with border right  
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="left"
+          fullHeight
+          onClose={toggleBLeftDrawer}
+          opened={openedBLeftDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border left
+      </Drawer>
+      <Drawer
+          behavior="float"
+          border="full"
+          fullHeight
+          onClose={toggleBFullDrawer}
+          opened={openedBFullDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with border full
+      </Drawer>
+      <Drawer
+          behavior="float"
+          fullHeight
+          onClose={toggleBDefaultDrawer}
+          opened={openedBDefaultDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >   
+        This is a Default Drawer
+      </Drawer>
+      <Drawer
+          behavior="float"
+          borderRadius="rounded"
+          fullHeight
+          onClose={toggleBRoundedDrawer}
+          opened={openedBRoundedDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+      <div style={{ paddingTop: '100px', paddingLeft: '12px' }}>
+        This is a Rounded Drawer
+      </div>
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerBorders;

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

@@ -0,0 +1,43 @@
+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 DrawerBreakpoints = () => {
+  const [smallDrawerOpened, toggleSmallDrawer] = useDrawer();
+
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleSmallDrawer}
+        >
+          {"Will open at small breakpoint"}
+        </Button>
+      </Flex>
+      <Flex>
+        <Drawer
+            behavior={"push"}
+            breakpoint="sm"
+            fullHeight
+            onClose={toggleSmallDrawer}
+            opened={smallDrawerOpened}
+            overlay={false}
+            placement={"right"}
+            size={"lg"}
+        >
+          Open because small breakpoint 
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
+
+export default DrawerBreakpoints;

data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("drawer") %>

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

@@ -0,0 +1,63 @@
+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 DrawerDefault = () => {
+  const [headerSeparatorDrawerOpened, toggleHeaderSeparatorDrawer] = useDrawer();
+  const [bothSeparatorsDrawerOpened, toggleBothSeparatorsDrawer] = useDrawer();
+
+  return (
+    <>
+      <Flex wrap>
+        <Button
+            id="sm"
+            marginRight="md"
+            onClick={toggleHeaderSeparatorDrawer}
+        >
+          {"Left Drawer"}
+        </Button>
+        <Button
+            marginRight="xl"
+            onClick={toggleBothSeparatorsDrawer}
+        >
+          {"Right Drawer"}
+        </Button>
+      </Flex>
+      <Flex>
+        {/* Left Drawer */}
+        <Drawer
+            behavior={"push"}
+            fullHeight
+            onClose={toggleHeaderSeparatorDrawer}
+            opened={headerSeparatorDrawerOpened}
+            overlay
+            placement={"left"}
+            size={"lg"}
+        >
+          Test me (Left Drawer)
+        </Drawer>
+
+        {/* Right Drawer */}
+        <Drawer
+            behavior={"push"}
+            fullHeight
+            onClose={toggleBothSeparatorsDrawer}
+            opened={bothSeparatorsDrawerOpened}
+            overlay
+            placement={"right"}
+            size={"lg"}
+        >
+          Test me (Right Drawer)
+        </Drawer>
+      </Flex>
+    </>
+  );
+};
+
+export default DrawerDefault;

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

@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedNoOverlayDrawer, setOpenedNoOverlayDrawer] = useState(false);
+  const [openedOverlayDrawer, setOpenedOverlayDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleNoOverlayDrawer = () => setOpenedNoOverlayDrawer(!openedNoOverlayDrawer);
+  const toggleOverlayDrawer = () => setOpenedOverlayDrawer(!openedOverlayDrawer);
+
+  return (
+    <>
+      <Flex wrap>
+        <Button marginRight="md"
+            onClick={toggleNoOverlayDrawer}
+        >
+          No Overlay Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleOverlayDrawer}
+        >
+          Overlay Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleNoOverlayDrawer}
+          opened={openedNoOverlayDrawer}
+          overlay={false}
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with no overlay
+      </Drawer>
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleOverlayDrawer}
+          opened={openedOverlayDrawer}
+          overlay
+          placement="right"
+          size="lg"
+      >
+        This is a Drawer with an overlay 
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerSizes;

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

@@ -0,0 +1,113 @@
+import React, { useState } from "react";
+import { Button, Drawer, Flex } from "playbook-ui";
+
+const DrawerSizes = () => {
+  // Individual state variables for each drawer size
+  const [openedXsDrawer, setOpenedXsDrawer] = useState(false);
+  const [openedSmDrawer, setOpenedSmDrawer] = useState(false);
+  const [openedMdDrawer, setOpenedMdDrawer] = useState(false);
+  const [openedLgDrawer, setOpenedLgDrawer] = useState(false);
+  const [openedXlDrawer, setOpenedXlDrawer] = useState(false);
+
+  // Toggle functions for each drawer
+  const toggleXsDrawer = () => setOpenedXsDrawer(!openedXsDrawer);
+  const toggleSmDrawer = () => setOpenedSmDrawer(!openedSmDrawer);
+  const toggleMdDrawer = () => setOpenedMdDrawer(!openedMdDrawer);
+  const toggleLgDrawer = () => setOpenedLgDrawer(!openedLgDrawer);
+  const toggleXlDrawer = () => setOpenedXlDrawer(!openedXlDrawer);
+
+  return (
+    <>
+      <Flex wrap>
+        <Button marginRight="md"
+            onClick={toggleXsDrawer}
+        >
+          XS Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleSmDrawer}
+        >
+          SM Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleMdDrawer}
+        >
+          MD Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleLgDrawer}
+        >
+          LG Drawer
+        </Button>
+        <Button marginRight="md"
+            onClick={toggleXlDrawer}
+        >
+          XL Drawer
+        </Button>
+      </Flex>
+
+      {/* Drawers for each size */}
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleXsDrawer}
+          opened={openedXsDrawer}
+          overlay
+          placement="right"
+          size="xs"
+      >
+        XS 
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleSmDrawer}
+          opened={openedSmDrawer}
+          overlay
+          placement="right"
+          size="sm"
+      >
+        This is an SM Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleMdDrawer}
+          opened={openedMdDrawer}
+          overlay
+          placement="right"
+          size="md"
+      >
+        This is an MD Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleLgDrawer}
+          opened={openedLgDrawer}
+          overlay
+          placement="right"
+          size="lg"
+      >
+        This is an LG Drawer
+      </Drawer>
+
+      <Drawer
+          behavior="push"
+          fullHeight
+          onClose={toggleXlDrawer}
+          opened={openedXlDrawer}
+          overlay
+          placement="right"
+          size="xl"
+      >
+        This is an XL Drawer
+      </Drawer>
+    </>
+  );
+};
+
+export default DrawerSizes;

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

@@ -0,0 +1,12 @@
+examples:
+  
+  rails:
+  - drawer_default: Default
+  
+  
+  react:
+  - drawer_default: Default
+  - drawer_sizes: Sizes
+  - drawer_overlay: Overlay
+  - drawer_borders: Borders 
+  - drawer_breakpoints: Open on Breakpoints 

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

@@ -0,0 +1,5 @@
+export { default as DrawerDefault } from './_drawer_default.jsx'
+export { default as DrawerSizes } from './_drawer_sizes.jsx'
+export { default as DrawerOverlay } from './_drawer_overlay.jsx'
+export { default as DrawerBorders } from './_drawer_borders.jsx'
+export { default as DrawerBreakpoints } from './_drawer_breakpoints.jsx'

data/app/pb_kits/playbook/pb_drawer/drawer.html.erb

@@ -0,0 +1,12 @@
+<!-- Go to pb_content_tag definition in kit_base.rb for usage information. Commented out options are default (showing the default shape), and each can be deleted if not customizing that param. -->
+<!-- If using nonstandard params please un-comment out and replace with your custom params. -->
+<%= pb_content_tag(
+    # :div,
+    # aria: object.aria,
+    # class: object.classname,
+    # data: object.data,
+    # id: object.id,
+    # **combined_html_options
+) do %>
+  <span>DRAWER CONTENT</span>
+<% end %>

data/app/pb_kits/playbook/pb_drawer/drawer.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDrawer
+    class Drawer < ::Playbook::KitBase
+    end
+  end
+end

data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react';
+import { render, cleanup, fireEvent, screen } from '../utilities/test-utils';
+import { Drawer, Button } from 'playbook-ui';
+
+const size = 'sm';
+
+function DrawerTest({ props }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const close = () => setIsOpen(false);
+  const open = () => setIsOpen(true);
+
+  return (
+    <>
+      <Button onClick={open}>{'Open Drawer'}</Button>
+      <Drawer
+          className="wrapper"
+          onClose={close}
+          opened={isOpen}
+          placement="left"
+          portalClassName="portal"
+          size={size}
+          {...props}
+      >
+        {props && props.children}
+      </Drawer>
+    </>
+  );
+}
+
+afterEach(cleanup);
+
+test('renders with the right border class when border prop is right', async () => {
+  render(<DrawerTest props={{ border: 'right' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).toHaveClass('drawer_border_right');
+});
+
+test('renders with the left border class when border prop is left', async () => {
+  render(<DrawerTest props={{ border: 'left' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).toHaveClass('drawer_border_left');
+});
+
+test('renders with the full border class when border prop is full', async () => {
+  render(<DrawerTest props={{ border: 'full' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).toHaveClass('drawer_border_full');
+});
+
+test('does not have a border class when border prop is none', async () => {
+  render(<DrawerTest props={{ border: 'none' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).not.toHaveClass('drawer_border_right');
+  expect(drawer).not.toHaveClass('drawer_border_left');
+  expect(drawer).not.toHaveClass('drawer_border_full');
+});
+
+test('renders the correct size class for a large drawer', async () => {
+  render(<DrawerTest props={{ size: 'lg' }} />);
+
+  fireEvent.click(screen.getByText('Open Drawer'));
+
+  const drawer = await screen.findByRole('dialog');
+  expect(drawer).toHaveClass('pb_drawer pb_drawer_lg_left');
+});

data/app/pb_kits/playbook/pb_gantt_chart/_gantt_chart.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
-import HighchartsReact from "highcharts-react-official";
+import HighchartsReact, { HighchartsReactRefObject } from "highcharts-react-official";
 import Highcharts from "highcharts/highcharts-gantt";
 
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
@@ -16,6 +16,7 @@ type GanttChartProps = {
   data?: { [key: string]: string };
   htmlOptions?: { [key: string]: string | number | boolean | (() => void) };
   id?: string;
+  ref?: HighchartsReactRefObject;
 };
 
 const GanttChart = (props: GanttChartProps) => {
@@ -64,6 +65,7 @@ const GanttChart = (props: GanttChartProps) => {
           }}
           highcharts={Highcharts}
           options={options}
+          ref={ref}
       />
     </div>
   );

data/app/pb_kits/playbook/pb_map/_map_controls.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import Button from "../pb_button/_button";
 import Icon from "../pb_icon/_icon";
 import Flex from "../pb_flex/_flex";
+import { getAllIcons } from "../utilities/icons/allicons"
 
 type MapControlTypes = {
   zoomBtns?: boolean, 
@@ -12,6 +13,8 @@ type MapControlTypes = {
   children?: React.ReactNode | React.ReactNode[]
 }
 
+const eyeIcon = getAllIcons()["eye"]
+
 const MapControls = ({
   zoomBtns,
   zoomInClick,
@@ -42,7 +45,10 @@ const MapControls = ({
             <Button className="map-flyto-button"
                 onClick={flyToClick}
             >
-              <Icon icon="eye" />
+              <Icon 
+                  className="svg-inline--fa"
+                  customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }} 
+              />
             </Button>
           ) : null}
         </>

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -88,6 +88,9 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     item: []
   })
 
+  const arrowDownElementId = `arrow_down_${id}`
+  const arrowUpElementId = `arrow_up_${id}`
+
   const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
     if (!Array.isArray(tree)) {
       return
@@ -173,7 +176,12 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   useEffect(() => {
     // Function to handle clicks outside the dropdown
     const handleClickOutside = (event: any) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+      if (
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target) &&
+        event.target.id !== arrowDownElementId &&
+        event.target.id !== arrowUpElementId
+      ) {
         setIsDropdownClosed(true)
       }
     }
@@ -260,7 +268,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
 
   // Handle click on input wrapper(entire div with pills, typeahead, etc) so it doesn't close when input or form pill is clicked
   const handleInputWrapperClick = (e: any) => {
-    e.stopPropagation()
     if (
       e.target.id === "multiselect_input" ||
       e.target.classList.contains("pb_form_pill_tag")
@@ -518,16 +525,20 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
           </div>
 
           {isDropdownClosed ? (
-            <div key="chevron-down">
+            <div id={arrowDownElementId}
+                key="chevron-down">
               <Icon
                   icon="chevron-down"
+                  id={arrowDownElementId}
                   size="xs"
               />
             </div>
           ) : (
-            <div key="chevron-up">
+            <div id={arrowUpElementId}
+                key="chevron-up">
               <Icon
                   icon="chevron-up"
+                  id={arrowUpElementId}
                   size="xs"
               />
             </div>

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

@@ -22,6 +22,16 @@ const PaginationPageChange = (props) => {
 
     return (
       <div className="App">
+      <Pagination
+          current={activePage}
+          key={`pagination-top-${activePage}`}
+          marginBottom="xs"
+          onChange={onPageChange}
+          range={5}
+          total={totalPages}
+          {...props}
+      />
+
       <Table 
           marginBottom="xs"
           responsive="none" 
@@ -49,7 +59,8 @@ const PaginationPageChange = (props) => {
       </Table>
  
       <Pagination
-          current={1}
+          current={activePage}
+          key={`pagination-bottom-${activePage}`}
           onChange={onPageChange}
           range={5}
           total={totalPages}

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

@@ -1 +1,3 @@
-You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
+
+To ensure synchronization between multiple pagination components on a single page, use unique, dynamic keys for each pagination instance. Each Pagination component should have its own dynamic key that reflects the current active page: this example uses `pagination-top-${activePage}` and `pagination-bottom-${activePage}`.