playbook_ui 13.15.0 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -2,7 +2,8 @@ import React, { useEffect, useState } from "react";
 import classnames from "classnames";
 
 import { globalProps } from "../utilities/globalProps";
-import { buildHtmlProps } from '../utilities/props'
+import { buildHtmlProps } from "../utilities/props";
+import { VoidCallback } from "../types";
 
 import Icon from "../pb_icon/_icon";
 import Title from "../pb_title/_title";
@@ -15,23 +16,23 @@ const iconMap = {
 };
 
 type FixedConfirmationToastProps = {
-  autoClose?: number,
-  children?: React.ReactChild[] | React.ReactChild,
-  className?: string,
-  closeable?: boolean,
-  data?: string,
-  horizontal?: "right" | "left" | "center",
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
-  id?: string,
-  multiLine?: boolean,
-  onClose?: () => void,
-  open?: boolean,
-  status?: "success" | "error" | "neutral" | "tip",
-  text?: string,
-  vertical?: "top" | "bottom",
-}
+  autoClose?: number;
+  children?: React.ReactChild[] | React.ReactChild;
+  className?: string;
+  closeable?: boolean;
+  data?: string;
+  horizontal?: "right" | "left" | "center";
+  htmlOptions?: { [key: string]: string | number | boolean | (VoidCallback) };
+  id?: string;
+  multiLine?: boolean;
+  onClose?: VoidCallback;
+  open?: boolean;
+  status?: "success" | "error" | "neutral" | "tip";
+  text?: string;
+  vertical?: "top" | "bottom";
+};
 
-const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
+const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
   const {
     autoClose = 0,
@@ -41,7 +42,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
     horizontal,
     htmlOptions = {},
     multiLine = false,
-    onClose = () => { },
+    onClose = () => undefined,
     open = true,
     status = "neutral",
     text,
@@ -65,7 +66,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
         onClose();
       }, autoClose);
     }
-  }
+  };
 
   useEffect(() => {
     toggleToast(open);
@@ -80,22 +81,35 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   return (
     <>
       {showToast && (
-        <div className={css} onClick={handleClick} {...htmlProps}>
-          {icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
+        <div
+            className={css}
+            onClick={handleClick}
+            {...htmlProps}
+        >
+          {icon && (
+            <Icon
+                className="pb_icon"
+                fixedWidth
+                icon={icon}
+            />
+          )}
 
-          {
-            children && children ||
-            text && (
+          {(children && children) ||
+            (text && (
               <Title
-                className="pb_fixed_confirmation_toast_text"
-                size={4}
-                text={text}
+                  className="pb_fixed_confirmation_toast_text"
+                  size={4}
+                  text={text}
               />
-            )
-          }
+            ))}
 
           {closeable && (
-            <Icon className="pb_icon" cursor="pointer" fixedWidth={false} icon="times" />
+            <Icon
+                className="pb_icon"
+                cursor="pointer"
+                fixedWidth={false}
+                icon="times"
+            />
           )}
         </div>
       )}

data/app/pb_kits/playbook/pb_flex/_flex.tsx

@@ -2,15 +2,15 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps } from '../utilities/globalProps'
-import { Sizes } from '../types'
+import { GenericObject, Sizes } from '../types'
 
 type FlexProps = {
   children: React.ReactChild[] | React.ReactNode,
   className?: string,
-  data?: object,
+  data?: GenericObject,
   horizontal?: "left" | "center" | "right" | "stretch" | "none",
   justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void) | ((arg?: unknown) => void)},
   id?: string,
   inline?: boolean,
   orientation?: "row" | "column",
@@ -25,7 +25,7 @@ type FlexProps = {
   alignSelf?: "start" | "end" | "center" | "stretch" | "none"
 } & GlobalProps
 
-const Flex = (props: FlexProps) => {
+const Flex = (props: FlexProps): React.ReactElement => {
   const {
     align = 'none',
     children,
@@ -45,7 +45,7 @@ const Flex = (props: FlexProps) => {
     wrap = false,
     alignSelf = 'none',
   } = props
-  
+
   const orientationClass =
     orientation !== undefined ? `orientation_${orientation}` : ''
   const justifyClass =

data/app/pb_kits/playbook/pb_form_group/_form_group.tsx

@@ -2,18 +2,19 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { globalProps } from '../utilities/globalProps'
+import { GenericObject } from '../types'
 
 type FormGroupProps = {
   aria?: {[key: string]: string},
   children?: Node,
   className?: string,
-  data?: object,
+  data?: GenericObject,
   fullWidth?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
 }
 
-const FormGroup = (props: FormGroupProps) => {
+const FormGroup = (props: FormGroupProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -22,16 +22,16 @@ type FormPillProps = {
     onClick?: React.MouseEventHandler<HTMLSpanElement>,
     onMouseDown?: React.MouseEventHandler<HTMLSpanElement>,
     onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>,
-  }, 
+  },
 } & GlobalProps
-const FormPill = (props: FormPillProps) => {
+const FormPill = (props: FormPillProps): React.ReactElement => {
   const {
     className,
     htmlOptions = {},
     id,
     text,
     name,
-    onClick = () => {},
+    onClick = () => undefined,
     avatarUrl,
     closeProps = {},
     size = '',
@@ -48,7 +48,10 @@ const FormPill = (props: FormPillProps) => {
   const htmlProps = buildHtmlProps(htmlOptions)
 
   return (
-    <div className={css} id={id} {...htmlProps}>
+    <div className={css}
+        id={id}
+        {...htmlProps}
+    >
         {name &&
         <>
         <Avatar

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -12,12 +12,13 @@ import typography from "../tokens/exports/_typography.scss";
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
+import { GenericObject } from "../types";
 
 type GaugeProps = {
   aria: { [key: string]: string };
   className?: string;
   chartData?: { name: string; value: number[] | number }[];
-  dark?: Boolean;
+  dark?: boolean;
   data?: { [key: string]: string };
   disableAnimation?: boolean;
   fullCircle?: boolean;
@@ -33,13 +34,12 @@ type GaugeProps = {
   title?: string;
   tooltipHtml?: string;
   colors: string[];
-  minorTickInterval: any;
+  minorTickInterval?: number;
   circumference: number[];
 };
 
 const Gauge = ({
   aria = {},
-  className,
   chartData,
   dark = false,
   data = {},
@@ -61,9 +61,9 @@ const Gauge = ({
   minorTickInterval = null,
   circumference = fullCircle ? [0, 360] : [-100, 100],
   ...props
-}: GaugeProps) => {
+}: GaugeProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
- const dataProps = buildDataProps(data)
+  const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions);
   highchartsMore(Highcharts);
   solidGauge(Highcharts);
@@ -89,7 +89,7 @@ const Gauge = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
+    const formattedChartData = chartData.map((obj: GenericObject) => {
       obj.y = obj.value;
       delete obj.value;
       return obj;
@@ -185,20 +185,20 @@ const Gauge = ({
         .querySelectorAll(".fix")
         .forEach((fix) => fix.setAttribute("y", "38"));
     }
-
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [chartData]);
 
   return (
     <HighchartsReact
-      containerProps={{
+        containerProps={{
         className: classnames(css, globalProps(props)),
         id: id,
         ...ariaProps,
         ...dataProps,
         ...htmlProps,
       }}
-      highcharts={Highcharts}
-      options={options}
+        highcharts={Highcharts}
+        options={options}
     />
   );
 };

data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx

@@ -8,6 +8,7 @@ import Body from '../pb_body/_body'
 import Hashtag from '../pb_hashtag/_hashtag'
 import Title from '../pb_title/_title'
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { GenericObject } from '../types'
 
 type HomeAddressStreetProps = {
   aria?: { [key: string]: string },
@@ -28,7 +29,7 @@ type HomeAddressStreetProps = {
   territory: string,
 }
 
-const HomeAddressStreet = (props: HomeAddressStreetProps) => {
+const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => {
   const {
     address,
     addressCont,
@@ -58,17 +59,17 @@ const HomeAddressStreet = (props: HomeAddressStreetProps) => {
       className
     )
 
-  const dataProps: { [key: string]: any } = buildDataProps(data)
-  const ariaProps: { [key: string]: any } = buildAriaProps(aria)
+  const dataProps: GenericObject = buildDataProps(data)
+  const ariaProps: GenericObject = buildAriaProps(aria)
   const htmlProps = buildHtmlProps(htmlOptions)
   return (
-    <div 
-      className={classes(className, dark)} 
-      {...ariaProps} 
-      {...dataProps}
-      {...htmlProps}
+    <div
+        className={classes(className, dark)}
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
     >
-      {emphasis == 'street' && 
+      {emphasis == 'street' &&
         <div>
           <Title
               className="pb_home_address_street_address"

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx

@@ -9,11 +9,12 @@ import Caption from '../pb_caption/_caption'
 import Flex from '../pb_flex/_flex'
 import IconCircle from '../pb_icon_circle/_icon_circle'
 import Title from '../pb_title/_title'
+import { GenericObject } from '../types'
 
 type IconStatValueProps = {
   aria?: { [key: string]: string },
   className?: string,
-  data?: object,
+  data?: GenericObject,
   dark?: boolean,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -34,7 +35,7 @@ type IconStatValueProps = {
     | "green",
 }
 
-const IconStatValue = (props: IconStatValueProps) => {
+const IconStatValue = (props: IconStatValueProps): React.ReactElement => {
   const {
     aria = {},
     className,

data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx

@@ -6,20 +6,21 @@ import { globalProps } from '../utilities/globalProps'
 
 import Body from '../pb_body/_body'
 import Icon from '../pb_icon/_icon'
+import { GenericObject } from '../types'
 
 type IconValueProps = {
   align?: "left" | "center" | "right",
   aria?: { [key: string]: string; },
   className?: string,
   dark?: boolean,
-  data?: object,
+  data?: GenericObject,
   icon: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   text: string,
 }
 
-const IconValue = (props: IconValueProps) => {
+const IconValue = (props: IconValueProps): React.ReactElement => {
   const {
     align = 'left',
     aria = {},

data/app/pb_kits/playbook/pb_label_value/_label_value.tsx

@@ -15,7 +15,7 @@ type LabelValueProps = {
   aria?: { [key: string]: string };
   className?: string;
   dark?: boolean;
-  data?: object;
+  data?: Record<string, unknown>;
   date?: Date;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string;

data/app/pb_kits/playbook/pb_layout/_layout.tsx

@@ -10,7 +10,7 @@ type LayoutPropTypes = {
   className?: string,
   collapse?: "xs" | "sm" | "md" | "lg" | "xl",
   dark?: boolean,
-  data?: object,
+  data?: Record<string, unknown>,
   full?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   position?: "left" | "right",
@@ -168,6 +168,7 @@ const Layout = (props: LayoutPropTypes) => {
         layoutCss,
         layoutCollapseCss,
         className,
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         globalProps(filteredProps)
       )}

data/app/pb_kits/playbook/pb_layout/layout.test.js

@@ -16,7 +16,8 @@ test("render all color variants", () => {
   testValues.forEach((variant) => {
     const { getByTestId } = render(
       <LayoutTest data={{ testid: `test-${variant}` }}
-          variant={variant} />
+          variant={variant}
+      />
     )
     expect(getByTestId(`test-${variant}`)).toHaveClass(
       `pb_layout_kit_sidebar_size_md_left_${
@@ -33,7 +34,8 @@ test("render transparent class", () => {
 
   const { getByTestId } = render(
     <LayoutTest data={{ testid: `test-${id}` }}
-        variant={id} />
+        variant={id}
+    />
   )
   expect(getByTestId(`test-${id}`)).toHaveClass(
     `pb_layout_kit_sidebar_size_md_left_${id}`
@@ -47,7 +49,8 @@ test("render all sizes variants", () => {
   testValues.forEach((size) => {
     const { getByTestId } = render(
       <LayoutTest data={{ testid: `test-${size}` }}
-          size={size} />
+          size={size}
+      />
     )
     expect(getByTestId(`test-${size}`)).toHaveClass(
       `pb_layout_kit_sidebar_size_${size}_left_light`
@@ -84,7 +87,8 @@ test("render all layout variants", () => {
   testValues.forEach(({ layout, expected }) => {
     const { getByTestId } = render(
       <Layout data={{ testid: `test-${layout}` }}
-          layout={layout}>
+          layout={layout}
+      >
         <Layout.Body>
           <Card>{"Card content"}</Card>
         </Layout.Body>

data/app/pb_kits/playbook/pb_legend/_legend.tsx

@@ -12,7 +12,7 @@ type LegendProps = {
   className?: string,
   color?: string,
   dark?: boolean,
-  data?: object,
+  data?: Record<string, unknown>,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
   prefixText?: string,
@@ -64,11 +64,11 @@ const Legend = (props: LegendProps) => {
         {
           prefixText && (
             <Title
-              dark={dark}
-              size={4}
-              tag="span"
-              text={` ${prefixText} `}
-          />
+                dark={dark}
+                size={4}
+                tag="span"
+                text={` ${prefixText} `}
+            />
           )
         }
         {` ${text} `}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx

@@ -56,15 +56,15 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
   return (
     <div
         className="Slides"
-        onTouchStart={onTouchStart} 
+        onTouchEnd={onTouchEnd} 
         onTouchMove={onTouchMove} 
-        onTouchEnd={onTouchEnd}
+        onTouchStart={onTouchStart}
     >
       {
         urls.length > 1 && (
         <CircleIconButton
             className='carousel-arrow-left'
-            dark={true}
+            dark
             icon="chevron-left"
             onClick={arrowLeft}
             variant="link"
@@ -81,7 +81,7 @@ const arrowRight = () => setIndex(current < urls.length - 1 ? current + 1 : urls
         urls.length > 1 && (
         <CircleIconButton
             className='carousel-arrow-right'
-            dark={true}
+            dark
             icon="chevron-right"
             onClick={arrowRight}
             variant="link"

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx

@@ -16,7 +16,7 @@ export default function Thumbnail({
   alt,
   width,
   url,
-  onClick = ()=>{},
+  onClick,
   buttonRef,
 }: ThumbnailType): React.ReactElement {
   const activeClasses = classnames('Thumbnail', { active })

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx

@@ -20,8 +20,8 @@ type CarouselType = {
 export default function Carousel({
   currentIndex,
   photos,
-  onClick = ()=>{},
-  onChange = ()=>{},
+  onClick,
+  onChange = () => undefined,
   setIndex,
 }: CarouselType): React.ReactElement {
   useEffect(() => {
@@ -39,10 +39,10 @@ export default function Carousel({
   return (
     <div className="Lightbox">
       <Slides
-          setIndex={setIndex}
           current={currentIndex}
           onChange={handleChange}
           onClick={onClick}
+          setIndex={setIndex}
           urls={photos.map((photo) => photo.url)}
       />
       {photos.length > 1 ? (

data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx

@@ -61,23 +61,31 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
 
   const HeaderBody = () => (
     <React.Fragment>
-      <FlexItem flex="1" marginLeft="sm">
+      <FlexItem flex="1"
+          marginLeft="sm"
+      >
         <CircleIconButton
-          onClick={handleOnLightboxClose}
-          dark={true}
-          variant="link"
-          icon={icon}
+            dark
+            icon={icon}
+            onClick={handleOnLightboxClose}
+            variant="link"
         />
       </FlexItem>
       {title && text && (
         <FlexItem flex="5">
           <Flex justify="center">
-            <Flex align="center" orientation="column">
+            <Flex align="center"
+                orientation="column"
+            >
               {typeof title === "string" ? (
-                <Title dark paddingBottom="xxs" size={4} text={title} />
+                <Title dark
+                    paddingBottom="xxs"
+                    size={4}
+                    text={title}
+                />
               ) : (
-                <Flex justify="center"
-                   className="custom-header"
+                <Flex className="custom-header"
+                    justify="center"
                 >
                   {title}
                   </Flex>
@@ -86,8 +94,8 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
               {typeof text === "string" ? (
                 <Caption dark>{text}</Caption>
               ) : (
-                <Flex justify="center"
-                className="custom-header"
+                <Flex className="custom-header"
+                    justify="center"
                 >
                   {text}
                 </Flex>
@@ -99,12 +107,12 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
       <FlexItem flex="1">
         <Flex justify="end">
           <Button
-            className="nav-right-btn"
-            htmlType="button"
-            onClick={onClickRight}
-            dark
-            variant="link"
-            text={navRight}
+              className="nav-right-btn"
+              dark
+              htmlType="button"
+              onClick={onClickRight}
+              text={navRight}
+              variant="link"
           />
         </Flex>
       </FlexItem>
@@ -114,11 +122,11 @@ const LightboxHeader = (props: LightboxHeaderProps): React.ReactElement => {
   return (
     <div className="carousel-header">
       <Flex
-        {...ariaProps}
-        {...dataProps}
-        {...htmlProps}
-        className={classnames(headerCSS, headerSpacing, className)}
-        spacing={spacing}
+          {...ariaProps}
+          {...dataProps}
+          {...htmlProps}
+          className={classnames(headerCSS, headerSpacing, className)}
+          spacing={spacing}
       >
         {closeable && <HeaderBody />}
         {children}

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

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