playbook_ui 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023 → 13.16.0.pre.alpha.PLAY11641991

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -19,7 +19,7 @@ type LightboxType = {
   id?: string,
   photos: [],
   initialPhoto?: number,
-  onChange?: (index: number)=> void,
+  onChange?: (index: number)=> {},
   onClickRight?: () => void,
   onClose?: () => void,
   icon: string,
@@ -40,7 +40,7 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     id = '',
     initialPhoto = 0,
     photos,
-    onChange = () => undefined,
+    onChange = ()=>{},
     onClose,
     onClickRight,
     icon = 'times',
@@ -107,18 +107,18 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
           <div className="carousel">
           <Lightbox.Header
               icon={icon}
-              navRight={navRight}
-              onClickRight={onClickRight}
               onClose={onClose}
+              onClickRight={onClickRight}
               text={description}
+              navRight={navRight}
               title={title}
           />
             {children}
             <Carousel
+                setIndex={setActivePhoto}
                 currentIndex={activePhoto}
                 onChange={handleOnSlide}
                 photos={photosMap}
-                setIndex={setActivePhoto}
             />
           </div>
         </div>

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -12,7 +12,7 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 type LineGraphProps = {
   align?: "left" | "right" | "center";
   axisTitle?: string;
-  dark?: boolean;
+  dark?: Boolean;
   xAxisCategories: [];
   yAxisMin: number;
   yAxisMax: number;
@@ -138,15 +138,15 @@ const LineGraph = ({
 
   return (
     <HighchartsReact
-        containerProps={{
+      containerProps={{
         className: classnames(globalProps(props), className),
         id: id,
         ...ariaProps,
         ...dataProps,
         ...htmlProps
       }}
-        highcharts={Highcharts}
-        options={options}
+      highcharts={Highcharts}
+      options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_list/_list.tsx

@@ -9,7 +9,7 @@ type ListProps = {
   className?: string;
   children: React.ReactNode[] | React.ReactNode;
   dark?: boolean;
-  data?: Record<string, unknown>;
+  data?: object;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;
   layout?: "" | "left" | "right";
@@ -72,25 +72,25 @@ const List = (props: ListProps) => {
     <div className={classes}>
       {ordered ? (
         <ol
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={className}
-            id={id}
-            role={role}
-            tabIndex={tabIndex}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={className}
+          id={id}
+          role={role}
+          tabIndex={tabIndex}
         >
           {childrenWithProps}
         </ol>
       ) : (
         <ul
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={className}
-            id={id}
-            role={role}
-            tabIndex={tabIndex}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={className}
+          id={id}
+          role={role}
+          tabIndex={tabIndex}
         >
           {childrenWithProps}
         </ul>

data/app/pb_kits/playbook/pb_list/_list_item.tsx

@@ -7,7 +7,7 @@ type ListItemProps = {
   aria?: { [key: string]: string },
   children: React.ReactNode[] | React.ReactNode,
   className?: string,
-  data?: Record<string, unknown>,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   tabIndex?: number,

data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx

@@ -37,18 +37,18 @@ const LoadingInline = (props: LoadingInlineProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       <Body color="light">
         <Icon
-            aria={{ label: 'loading icon' }}
-            fixedWidth
-            icon="spinner"
-            pulse
+          aria={{ label: 'loading icon' }}
+          fixedWidth
+          icon="spinner"
+          pulse
         />
         {' Loading'}
       </Body>

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

@@ -14,9 +14,9 @@ type MapProps = {
   id?: string,
   zoomBtns?: boolean,
   flyTo?: boolean, 
-  zoomInClick?: () => void,
-  zoomOutClick?: () => void,
-  flyToClick?: () => void,
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
 } & GlobalProps
 
 const Map = (props: MapProps) => {
@@ -51,11 +51,11 @@ const Map = (props: MapProps) => {
       {
         zoomBtns ? (
           <Map.Controls
-              flyTo={flyTo}
-              flyToClick={flyToClick}
-              zoomBtns={zoomBtns}
-              zoomInClick={zoomInClick}
-              zoomOutClick={zoomOutClick}
+          flyTo={flyTo}
+          flyToClick={flyToClick}
+          zoomBtns={zoomBtns}
+          zoomInClick={zoomInClick}
+          zoomOutClick={zoomOutClick}
           />
          ) : null
       }

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

@@ -6,9 +6,9 @@ import Flex from "../pb_flex/_flex";
 type MapControlTypes = {
   zoomBtns?: boolean, 
   flyTo?: boolean, 
-  zoomInClick?: () => void,
-  zoomOutClick?: () => void,
-  flyToClick?: () => void,
+  zoomInClick?: () => {},
+  zoomOutClick?: () => {},
+  flyToClick?: () => {},
   children?: React.ReactNode | React.ReactNode[]
 }
 
@@ -21,27 +21,19 @@ const MapControls = ({
   children,
 }: MapControlTypes) => {
   return (
-    <Flex className="custom-nav-control"
-        orientation="column"
-    >
+    <Flex className="custom-nav-control" orientation="column">
       {zoomBtns ? (
         <>
           <div className="custom-nav-control-zoom">
-            <Button className="map-zoom-in-button"
-                onClick={zoomInClick}
-            >
+            <Button className="map-zoom-in-button" onClick={zoomInClick}>
               <Icon icon="plus" />
             </Button>
-            <Button className="map-zoom-out-button"
-                onClick={zoomOutClick}
-            >
+            <Button className="map-zoom-out-button" onClick={zoomOutClick}>
               <Icon icon="minus" />
             </Button>
           </div>
           {flyTo ? (
-            <Button className="map-flyto-button"
-                onClick={flyToClick}
-            >
+            <Button className="map-flyto-button" onClick={flyToClick}>
               <Icon icon="eye" />
             </Button>
           ) : null}

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

@@ -3,15 +3,13 @@ import Button from "../pb_button/_button";
 import Icon from "../pb_icon/_icon";
 
 type MapCustomButtonTypes = {
-  onClick?: () => void;
+  onClick?: () => {};
   icon?: string;
 };
 
 const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
   return (
-    <Button className="pb_map-custom-button"
-        onClick={onClick}
-    >
+    <Button className="pb_map-custom-button" onClick={onClick}>
       <Icon icon={icon} />
     </Button>
   );

data/app/pb_kits/playbook/pb_message/_message.tsx

@@ -20,7 +20,7 @@ type MessageProps = {
   avatarUrl?: string,
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
-  data?: Record<string, unknown>,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   label?: string,

data/app/pb_kits/playbook/pb_message/_message_mention.tsx

@@ -7,7 +7,7 @@ type MessageMentionProps = {
   aria: { [key: string]: string },
   children?: React.ReactChild[] | React.ReactChild,
   className?: string,
-  data?: Record<string, unknown>,
+  data?: object,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   variant: 'user' | 'self',
@@ -34,11 +34,11 @@ const MessageMention = (props: MessageMentionProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {children}
     </div>

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

@@ -86,50 +86,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     item: []
   })
 
-  const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
-    if (!Array.isArray(tree)) {
-      return
-    }
-    return tree.map((item: { [key: string]: any }) => {
-      item.checked = check
-      item.children = modifyRecursive(item.children, check)
-      return item
-    })
-  }
-
-   // Function to map over data and add parent_id + depth property to each item
-  const addCheckedAndParentProperty = (
-    treeData: { [key: string]: any }[],
-    selectedIds: string[],
-    parent_id: string = null,
-    depth = 0,
-  ) => {
-    if (!Array.isArray(treeData)) {
-      return
-    }
-    return treeData.map((item: { [key: string]: any } | any) => {
-      const newItem = {
-        ...item,
-        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
-        parent_id,
-        depth,
-      }
-      if (newItem.children && newItem.children.length > 0) {
-        const children =
-          item.checked && !returnAllSelected
-            ? modifyRecursive(item.children, true)
-            : item.children
-        newItem.children = addCheckedAndParentProperty(
-          children,
-          selectedIds,
-          newItem.id,
-          depth + 1
-        )
-      }
-      return newItem
-    })
-  }
-
   useEffect(() => {
     const formattedData = addCheckedAndParentProperty(
       treeData,
@@ -183,7 +139,16 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     }
   }, [])
 
-
+  const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
+    if (!Array.isArray(tree)) {
+      return
+    }
+    return tree.map((item: { [key: string]: any }) => {
+      item.checked = check
+      item.children = modifyRecursive(item.children, check)
+      return item
+    })
+  }
 
   // Iterate over tree, find item and set checked or unchecked
   const modifyValue = (
@@ -241,7 +206,38 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     return tree
   }
 
- 
+  // Function to map over data and add parent_id + depth property to each item
+  const addCheckedAndParentProperty = (
+    treeData: { [key: string]: any }[],
+    selectedIds: string[],
+    parent_id: string = null,
+    depth = 0,
+  ) => {
+    if (!Array.isArray(treeData)) {
+      return
+    }
+    return treeData.map((item: { [key: string]: any } | any) => {
+      const newItem = {
+        ...item,
+        checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
+        parent_id,
+        depth,
+      }
+      if (newItem.children && newItem.children.length > 0) {
+        const children =
+          item.checked && !returnAllSelected
+            ? modifyRecursive(item.children, true)
+            : item.children
+        newItem.children = addCheckedAndParentProperty(
+          children,
+          selectedIds,
+          newItem.id,
+          depth + 1
+        )
+      }
+      return newItem
+    })
+  }
 
   // Click event for x on form pill
   const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {

data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx

@@ -44,11 +44,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     return users.slice(0, 1).map((userObject, index) => {
       return (
         <Avatar
-            {...userObject}
-            className="pb_multiple_users_stacked_item"
-            dark={dark}
-            key={index}
-            size="xs"
+          {...userObject}
+          className="pb_multiple_users_stacked_item"
+          dark={dark}
+          key={index}
+          size="xs"
         />
       )
     })
@@ -59,11 +59,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
       return users.slice(1, 2).map((userObject, index) => {
         return (
           <Avatar
-              {...userObject}
-              className="pb_multiple_users_stacked_item second_item"
-              dark={dark}
-              key={index}
-              size="xs"
+            {...userObject}
+            className="pb_multiple_users_stacked_item second_item"
+            dark={dark}
+            key={index}
+            size="xs"
           />
         )
       })
@@ -74,11 +74,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
     if (moreThanTwo === true) {
       return (
         <Badge
-            className="pb_multiple_users_stacked_item second_item"
-            dark={dark}
-            rounded
-            text={`+${users.length - displayCount()}`}
-            variant="primary"
+          className="pb_multiple_users_stacked_item second_item"
+          dark={dark}
+          rounded
+          text={`+${users.length - displayCount()}`}
+          variant="primary"
         />
       )
     }
@@ -86,11 +86,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
 
   return (
     <div
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classes}
-        id={id}
+      {...ariaProps}
+      {...dataProps}
+      {...htmlProps}
+      className={classes}
+      id={id}
     >
       {firstUser()}
       {secondUser()}

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -18,7 +18,7 @@ type NavItemProps = {
   children?: React.ReactNode[] | React.ReactNode;
   className?: string;
   collapsible?: boolean;
-  data?: Record<string, unknown>;
+  data?: object;
   dark?: boolean;
   fontSize?: "normal" | "small";
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -76,7 +76,7 @@ const NavItem = (props: NavItemProps) => {
     id,
     imageUrl,
     link,
-    onClick,
+    onClick = () => {},
     target = "_self",
     text = "",
     collapsibleTrail,
@@ -205,49 +205,46 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
       {collapsible ? (
         <>
           <Collapsible
-              className={collapsibleClasses}
-              collapsed={collapsed}
-              icon={iconRight && iconRight}
-              iconSize="xs"
-              id={id}
-              onClick={onClick}
-              onIconClick={onIconRightClick}
+            className={collapsibleClasses}
+            icon={iconRight && iconRight}
+            iconSize="xs"
+            id={id}
+            collapsed={collapsed}
+            onIconClick={onIconRightClick}
+            onClick={onClick}
           >
             <Collapsible.Main
-                className={globalProps({ ...finalItemSpacing })}
-                dark={dark}
-            >
+            className={globalProps({ ...finalItemSpacing })}
+            dark={dark}>
               <Tag
-                  {...ariaProps}
-                  {...dataProps}
-                  {...htmlProps}
-                  className={classes}
-                  href={link}
-                  id={id}
-                  target={target}
+                {...ariaProps}
+                {...dataProps}
+                {...htmlProps}
+                className={classes}
+                id={id}
+                href={link}
+                target={target}
               >
                 {imageUrl && (
                   <div
-                      className="pb_nav_list_item_icon_section_collapsible"
-                      key={imageUrl}
-                      onClick={(e) => handleIconClick(e)}
+                    className="pb_nav_list_item_icon_section_collapsible"
+                    key={imageUrl}
+                    onClick={(e) => handleIconClick(e)}
                   >
-                    <Image className="pb_nav_img_wrapper"
-                        url={imageUrl}
-                    />
+                    <Image className="pb_nav_img_wrapper" url={imageUrl} />
                   </div>
                 )}
 
                 {iconLeft && (
                   <div
-                      className="pb_nav_list_item_icon_section_collapsible"
-                      key={iconLeft}
-                      onClick={(e) => handleIconClick(e)}
+                    className="pb_nav_list_item_icon_section_collapsible"
+                    key={iconLeft}
+                    onClick={(e) => handleIconClick(e)}
                   >
                     <Icon
-                        className="pb_nav_list_item_icon_left_collapsible"
-                        fixedWidth
-                        icon={iconLeft}
+                      className="pb_nav_list_item_icon_left_collapsible"
+                      fixedWidth
+                      icon={iconLeft}
                     />
                   </div>
                 )}
@@ -261,33 +258,27 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
         </>
       ) : (
         <Tag
-            {...ariaProps}
-            {...dataProps}
-            {...htmlProps}
-            className={classes}
-            href={link}
-            id={id}
-            onClick={onClick}
-            target={target}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classes}
+          id={id}
+          href={link}
+          onClick={onClick}
+          target={target}
         >
           {imageUrl && (
-            <div className="pb_nav_list_item_icon_section"
-                key={imageUrl}
-            >
-              <Image className="pb_nav_img_wrapper"
-                  url={imageUrl}
-              />
+            <div className="pb_nav_list_item_icon_section" key={imageUrl}>
+              <Image className="pb_nav_img_wrapper" url={imageUrl} />
             </div>
           )}
 
           {iconLeft && (
-            <div className="pb_nav_list_item_icon_section"
-                key={iconLeft}
-            >
+            <div className="pb_nav_list_item_icon_section" key={iconLeft}>
               <Icon
-                  className="pb_nav_list_item_icon_left"
-                  fixedWidth
-                  icon={iconLeft}
+                className="pb_nav_list_item_icon_left"
+                fixedWidth
+                icon={iconLeft}
               />
             </div>
           )}
@@ -296,13 +287,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
           {iconRight && (
             <div
-                className="pb_nav_list_item_icon_section"
-                key={iconRight as string}
+              className="pb_nav_list_item_icon_section"
+              key={iconRight as string}
             >
               <Icon
-                  className="pb_nav_list_item_icon_right"
-                  fixedWidth
-                  icon={iconRight as string}
+                className="pb_nav_list_item_icon_right"
+                fixedWidth
+                icon={iconRight as string}
               />
             </div>
           )}