playbook_ui 14.24.0.pre.rc.2 → 14.24.0.pre.rc.4

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "14.23.0"
-  VERSION = "14.24.0.pre.rc.2"
+  VERSION = "14.24.0.pre.rc.4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 14.24.0.pre.rc.2
+  version: 14.24.0.pre.rc.4
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-07-21 00:00:00.000000000 Z
+date: 2025-07-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1352,6 +1352,7 @@ files:
 - app/pb_kits/playbook/pb_drawer/index.js
 - app/pb_kits/playbook/pb_dropdown/_dropdown.scss
 - app/pb_kits/playbook/pb_dropdown/_dropdown.tsx
+- app/pb_kits/playbook/pb_dropdown/_dropdown_mixin.scss
 - app/pb_kits/playbook/pb_dropdown/context/index.tsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx
@@ -1395,6 +1396,8 @@ files:
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.html.erb
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_with_subcomponents.md
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx
+- app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md
 - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb
@@ -3513,17 +3516,6 @@ files:
 - app/pb_kits/playbook/pb_user_badge/user_badge.html.erb
 - app/pb_kits/playbook/pb_user_badge/user_badge.rb
 - app/pb_kits/playbook/pb_user_badge/user_badge.test.js
-- app/pb_kits/playbook/pb_walkthrough/_walkthrough.scss
-- app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_continuous.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_default.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_multi_beacon.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_beacon.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_no_overlay.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/_walkthrough_styled.jsx
-- app/pb_kits/playbook/pb_walkthrough/docs/example.yml
-- app/pb_kits/playbook/pb_walkthrough/docs/index.js
-- app/pb_kits/playbook/pb_walkthrough/walkthrough.test.jsx
 - app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.scss
 - app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx
 - app/pb_kits/playbook/pb_weekday_stacked/docs/_weekday_stacked_compact.html.erb
@@ -3633,7 +3625,7 @@ files:
 - app/pb_kits/playbook/utilities/validEmojiChecker.ts
 - dist/chunks/_line_graph-BfCo79KE.js
 - dist/chunks/_typeahead-Db4YQA5c.js
-- dist/chunks/_weekday_stacked-DfH_cGOX.js
+- dist/chunks/_weekday_stacked-9aguRqOv.js
 - dist/chunks/lazysizes-B7xYodB-.js
 - dist/chunks/lib-DnQyMxO1.js
 - dist/chunks/pb_form_validation-kl-4Jv4t.js

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

@@ -1,202 +0,0 @@
-/* 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

@@ -1,69 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,110 +0,0 @@
-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

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

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughNoBeacon = (props) => {
-  const [state, setState] = useState({
-    callback: (data) => {
-      if (data.action === 'close' && data.type === 'step:after') {
-        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
-        setState({ ...state, run: false })
-      }
-    },
-    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: '.exampleNoBeacon',
-        disableBeacon: true,
-      },
-      {
-        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="exampleNoBeacon"
-          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 WalkthroughNoBeacon

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

@@ -1,76 +0,0 @@
-import React, { useState } from 'react'
-import Button from '../../pb_button/_button'
-import Walkthrough from '../../pb_walkthrough/_walkthrough'
-
-const WalkthroughNoOverlay = (props) => {
-  const [noOverlay, setNoOverlayState] = useState({
-    callback: (data) => {
-      if (data.action === 'close' && data.type === 'step:after') {
-        // This explicitly stops the tour (otherwise it displays a "beacon" to resume the tour)
-        setNoOverlayState({ ...noOverlay, run: false })
-      }
-    },
-    disableOverlay: true,
-    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: '.exampleNoOverlay',
-      },
-      {
-        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="exampleNoOverlay"
-          style={{ 'display': 'inline' }}
-      >
-        {'Start the Tour. Then click the Beacon to demo the default behavior of the Walkthrough Kit'}
-      </div>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-            setNoOverlayState({ ...noOverlay,
-              run: true,
-            })
-          }}
-      >
-        {'Start Tour'}
-      </Button>
-      <br />
-      <br />
-      <Button
-          onClick={() => {
-          setNoOverlayState({
-            ...noOverlay,
-            run: false,
-          })
-        }}
-      >
-        {'Reset/Stop Tour'}
-      </Button>
-
-      <Walkthrough
-          disableOverlay
-          run={noOverlay.run}
-          steps={noOverlay.steps}
-          {...props}
-      />
-    </div>
-  )
-}
-
-export default WalkthroughNoOverlay