playbook_ui 14.23.0.pre.alpha.PLAY2283multiheaderverticalbordersdoc9335 → 14.23.0.pre.alpha.PLAY2303optD9000

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

@@ -143,8 +143,7 @@ export const recursiveCheckParent = (
 
 export const getExpandedItems = (
   treeData: { [key: string]: string }[],
-  selectedIds: string[],
-  showCheckedChildren = true
+  selectedIds: string[]
 ): any[] => {
   const expandedItems: any[] = [];
 
@@ -153,27 +152,19 @@ export const getExpandedItems = (
       const item = items[i];
       const itemAncestors = [...ancestors, item];
 
-      // Always honor explicit expanded: true
       if (item.expanded) {
         expandedItems.push(item.id);
       }
-
-      // Only expand based on selected items if showCheckedChildren is true
-      if (showCheckedChildren) {
-        if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
-          expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
-        }
-        if (Array.isArray(item.children)) {
-          const hasCheckedChildren = item.children.some(
-            (child: { [key: string]: string }) => child.checked
-          );
-          if (hasCheckedChildren) {
-            expandedItems.push(...itemAncestors.map((ancestor: any) => ancestor.id));
-          }
-        }
+      if (selectedIds && selectedIds.length && selectedIds.includes(item.id)) {
+        expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
       }
-
       if (Array.isArray(item.children)) {
+        const hasCheckedChildren = item.children.some(
+          (child: { [key: string]: string }) => child.checked
+        );
+        if (hasCheckedChildren) {
+          expandedItems.push(...itemAncestors.map((ancestor) => ancestor.id));
+        }
         traverse(item.children, itemAncestors);
       }
     }

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

@@ -47,7 +47,6 @@ type MultiLevelSelectProps = {
   name?: string
   required?: boolean
   returnAllSelected?: boolean
-  showCheckedChildren?: boolean
   treeData?: { [key: string]: string; }[] | any
   onChange?: (event: { target: { name?: string; value: any } }) => void
   onSelect?: (prop: { [key: string]: any }) => void
@@ -72,7 +71,6 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     label,
     required = false,
     returnAllSelected = false,
-    showCheckedChildren = true,
     treeData,
     onChange = () => null,
     onSelect = () => null,
@@ -106,7 +104,7 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
   // State for default return
   const [defaultReturn, setDefaultReturn] = useState([]);
   // Get expanded items from treeData
-  const initialExpandedItems = getExpandedItems(treeData, selectedIds, showCheckedChildren);
+  const initialExpandedItems = getExpandedItems(treeData, selectedIds);
   // Initialize state with expanded items
   const [expanded, setExpanded] = useState(initialExpandedItems);
 

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

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

data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select.rb

@@ -32,8 +32,6 @@ module Playbook
                    default: ""
       prop :label, type: Playbook::Props::String,
                    default: ""
-      prop :show_checked_children, type: Playbook::Props::Boolean,
-                                   default: true
 
       def classname
         generate_classname("pb_multi_level_select")
@@ -56,7 +54,6 @@ module Playbook
           variant: variant,
           pillColor: pill_color,
           wrapped: wrapped,
-          showCheckedChildren: show_checked_children,
         }
       end
     end

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -134,10 +134,6 @@ const Pagination = ( props: PaginationProps) => {
     className
   )
 
-  if (total <= 1) {
-    return null;
-  }
-
   return (
     <div 
         {...ariaProps}

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

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

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

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

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -38,7 +38,6 @@ type PhoneNumberInputProps = {
   required?: boolean,
   value?: string,
   formatAsYouType?: boolean,
-  strictMode?: boolean,
   countrySearch?: boolean,
 }
 
@@ -95,7 +94,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
-    strictMode = false,
     countrySearch = false,
   } = props
 
@@ -258,7 +256,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       countrySearch: countrySearch,
       fixDropdownWidth: false,
       formatAsYouType: formatAsYouType,
-      strictMode: strictMode,
       hiddenInput: hiddenInputs ? () => ({
         phone: `${name}_full`,
         country: `${name}_country_code`,

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

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

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

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

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -25,8 +25,6 @@ module Playbook
                    default: ""
       prop :format_as_you_type, type: Playbook::Props::Boolean,
                                 default: false
-      prop :strict_mode, type: Playbook::Props::Boolean,
-                         default: false
       prop :hidden_inputs, type: Playbook::Props::Boolean,
                            default: false
       prop :country_search, type: Playbook::Props::Boolean,
@@ -43,7 +41,6 @@ module Playbook
           disabled: disabled,
           error: error,
           formatAsYouType: format_as_you_type,
-          strictMode: strict_mode,
           hiddenInputs: hidden_inputs,
           initialCountry: initial_country,
           label: label,

data/app/pb_kits/playbook/pb_select/select.rb

@@ -24,9 +24,7 @@ module Playbook
       prop :validation_message, type: Playbook::Props::String, default: ""
 
       def classnames
-        ([classname] + [inline_class, compact_class, show_arrow_class])
-          .reject(&:empty?)
-          .join(" ")
+        classname + inline_class + compact_class + show_arrow_class
       end
 
       def all_attributes
@@ -46,7 +44,7 @@ module Playbook
       end
 
       def inline_class
-        inline ? "inline" : ""
+        inline ? " inline " : " "
       end
 
       def compact_class

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

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

data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx

@@ -0,0 +1,202 @@
+/* eslint-disable react/no-multi-comp */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+import Joyride, { TooltipRenderProps } from 'react-joyride'
+import Button from '../pb_button/_button'
+import Flex from '../pb_flex/_flex'
+import SectionSeparator from '../pb_section_separator/_section_separator'
+import Title from '../pb_title/_title'
+
+type WalkthroughProps = {
+  aria?: { [key: string]: string },
+  callback?: () => void,
+  className?: string,
+  continuous?: boolean,
+  data?: { [key: string]: string },
+  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
+  id?: string,
+  run?: boolean,
+  steps?: [],
+  stepIndex?: number,
+  debug?: boolean,
+  disableCloseOnEsc?: boolean,
+  disableOverlay?: boolean,
+  disableOverlayClose?: boolean,
+  disableScrolling?: boolean,
+  floaterProps?: Record<string, unknown>,
+  hideBackButton?: boolean,
+  hideCloseButton?: boolean,
+  showProgress?: boolean,
+  showSkipButton?: boolean,
+  spotlightClicks?: boolean,
+  spotlightPadding?: number,
+  styles?: {
+    options: {
+      beaconSize?: number,
+      arrowColor?: string,
+      backgroundColor?: string,
+      primaryColor?: string,
+      overlayColor?: string,
+      spotlightShadow?: string,
+      width?: number,
+      zIndex?: number,
+    },
+  },
+}
+
+type TooltipProps = {
+  continuous?: boolean,
+  className?: string,
+  index?: number,
+  isLastStep?: boolean,
+  size?: number,
+  step: {
+    title?: string,
+    content?: React.ReactNode[] | React.ReactNode | string,
+    target: string,
+    disableBeacon?: boolean,
+  },
+  skip?: boolean,
+  backProps?: Record<string, unknown>,
+  closeProps?: Record<string, unknown>,
+  primaryProps?: Record<string, unknown>,
+  skipProps?: Record<string, unknown>,
+  tooltipProps?: Record<string, unknown>,
+}
+
+// eslint-disable-next-line react/display-name
+const Tooltip = React.forwardRef((props: TooltipProps) => (
+<div
+    className="pb_card_kit_border_none p_none"
+    {...props.tooltipProps}
+>
+  {props.step.title && <div>
+  <Flex
+      align="center"
+      justify="between"
+      padding="xs"
+  >
+      <Title
+          paddingLeft="xs"
+          size={4}
+      >
+      {props.step.title}
+      </Title>
+      {props.skip && (
+      <Button
+          {...props.skipProps}
+          id="skip"
+          text="Skip Tour"
+          variant="link"
+      />
+      )}
+      <Button
+          {...props.skipProps}
+          id="skip"
+          text="Skip Tour"
+          variant="link"
+      />
+  </Flex>
+  <SectionSeparator />
+  </div>}
+
+  <Flex padding="sm">{props.step.content}</Flex>
+  <SectionSeparator />
+  <Flex
+      justify={props.index == 0 ? 'end' : 'between'}
+      padding="xs"
+  >
+
+  {props.index > 0 && (
+      <Button
+          {...props.backProps}
+          id="back"
+          text="Back"
+      />
+  )}
+
+  {props.continuous && !props.isLastStep &&
+      <Button
+          {...props.primaryProps}
+          id="next"
+          text="Next"
+      />
+  }
+
+  {!props.continuous &&
+      <Button
+          {...props.closeProps}
+          id="close"
+          text="Close"
+      />
+  }
+
+  {!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
+      <Button
+          {...props.closeProps}
+          id="close"
+          text="Close"
+      />
+  }
+  </Flex>
+</div>
+)) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
+
+const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
+  const {
+    aria = {},
+    callback,
+    className,
+    continuous = false,
+    data = {},
+    disableOverlay,
+    floaterProps = {
+      offset: 50,
+    },
+    htmlOptions = {},
+    id,
+    run = false,
+    steps,
+    styles = {
+      options: {
+        zIndex: 20000,
+      },
+    },
+    showSkipButton,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const htmlProps = buildHtmlProps(htmlOptions)
+  const classes = classnames(buildCss('pb_walkthrough'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        {...htmlProps}
+        className={classes}
+        id={id}
+    >
+      <Joyride
+          callback={callback}
+          continuous={continuous}
+          disableOverlay={disableOverlay}
+          disableScrolling
+          floaterProps={floaterProps}
+          run={run}
+          showSkipButton={showSkipButton}
+          steps={steps}
+          styles={styles}
+          tooltipComponent={Tooltip}
+          {...props}
+      />
+    </div>
+
+  )
+}
+
+export default Walkthrough

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughContinuous = (props) => {
+  const [state, setState] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Example Title',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.examplePaused',
+      },
+      {
+        title: 'Toggle',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb_toggle_control',
+      },
+      {
+        title: 'Top Nav',
+        content: 'Setting the prop - continuous allows the next button to appear and lets the user move to the next step by pressing the next button instead of the beacon',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="examplePaused"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+            setState({ ...state,
+              run: true,
+            })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setState({
+            ...state,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={state.run}
+          steps={state.steps}
+          {...props}
+          continuous
+      />
+    </div>
+  )
+}
+
+export default WalkthroughContinuous

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx

@@ -0,0 +1,71 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughDefault = (props) => {
+  const [state, setState] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Example title',
+        content:
+      'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
+        target: '.example',
+      },
+      {
+        title: 'Toggle',
+        content:
+        'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb_toggle_control',
+      },
+      {
+        title: 'Top Nav',
+        content:
+          'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="example"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+            setState({ ...state,
+              run: true,
+            })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setState({
+            ...state,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={state.run}
+          steps={state.steps}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default WalkthroughDefault

data/app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react'
+import Button from '../../pb_button/_button'
+import Walkthrough from '../../pb_walkthrough/_walkthrough'
+
+const WalkthroughMultiBeacon = (props) => {
+  const [stateA, setStateA] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Example title',
+        content:
+          'This was an example of a Beacon in the Walkthrough Kit it is used as a simple indicator to inform users about a particular thing',
+        target: '.exampleMulti',
+      },
+    ],
+  })
+
+  const [stateB, setStateB] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Toggle',
+        content:
+          'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb_toggle_control',
+      },
+    ],
+  })
+
+  const [stateC, setStateC] = useState({
+    run: false,
+    steps: [
+      {
+        title: 'Top Nav',
+        content:
+          'By default the walkthrough kit will cycle through each step provided.',
+        target: '.pb--page--topNav',
+      },
+    ],
+  })
+
+  return (
+    <div>
+      <div
+          className="exampleMulti"
+          style={{ 'display': 'inline' }}
+      >
+        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
+      </div>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setStateA({
+            ...stateA,
+            run: true,
+          })
+          setStateB({
+            ...stateB,
+            run: true,
+          })
+          setStateC({
+            ...stateC,
+            run: true,
+          })
+          }}
+      >
+        {'Start Tour'}
+      </Button>
+      <br />
+      <br />
+      <Button
+          onClick={() => {
+          setStateA({
+            ...stateA,
+            run: false,
+          })
+          setStateB({
+            ...stateB,
+            run: false,
+          })
+          setStateC({
+            ...stateC,
+            run: false,
+          })
+        }}
+      >
+        {'Reset/Stop Tour'}
+      </Button>
+
+      <Walkthrough
+          run={stateA.run}
+          steps={stateA.steps}
+          {...props}
+      />
+      <Walkthrough
+          run={stateB.run}
+          steps={stateB.steps}
+          {...props}
+      />
+      <Walkthrough
+          run={stateC.run}
+          steps={stateC.steps}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default WalkthroughMultiBeacon