playbook_ui 18.0.0.pre.alpha.play320919634 → 18.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6b1d806bb5dbb66ef11cb466e82fc7ae02031bc3d39161893fe1e175b93f8164
-  data.tar.gz: ceef5eaefacbd459ca4d7b4609c620b723604895d2b93bf174ebced2c22ad069
+  metadata.gz: 1ba21582839d4a05178fc1ea74ca0ad1b8ca652238e4119192fe4c461dcbb9ae
+  data.tar.gz: 453a53b804b46fb84aaa6d9efd1bf1f316b7525633a57134da3d3f4b6b8c46dd
 SHA512:
-  metadata.gz: 7ff50b2e13d4dc4057facbbef6b09d649b107def894d0c117e11e11d2fe36d43abe4c328d64b90081219c151d18ca8539c72105051cf6e9338ec63dc56d2816b
-  data.tar.gz: f8568698c3790c8cb1623edf23ce2b01c14a1b8dd1aa07dc2d824450905761c1f0afa47a807f36e744435fad318f75450da815a923234c7be0a79dcff2e1104f
+  metadata.gz: 02f76fdc192859f041aa853a8f155c01248c0bf849a00484409ed5154f99dc4f92bb9829bf24da859c5c38bc532108724eda2dcbe1f11edd1ff527eaa89e1826
+  data.tar.gz: 8fa85b1670735641741175e82792867fc72459c5ac1040a5117314a66d2a3ce874c83b017fd4342b56d1d80c5c03c90a23c75629ba15cb74c05240696a2cf6fb

data/app/pb_kits/playbook/pb_body/_body.tsx

@@ -3,7 +3,6 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
-import { globalEventProps, GlobalEventProps } from '../utilities/globalEventProps'
 
 import Highlight from '../pb_highlight/_highlight'
 
@@ -22,7 +21,7 @@ type BodyProps = {
   tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
   text?: string,
   variant?: null | 'link',
-} & GlobalProps & GlobalEventProps
+} & GlobalProps
 
 const Body = (props: BodyProps): React.ReactElement => {
   if (props.variant) deprecatedProps() //status prop is deprecated, use color instead please
@@ -57,7 +56,6 @@ const Body = (props: BodyProps): React.ReactElement => {
         {...ariaProps}
         {...dataProps}
         {...htmlProps}
-        {...globalEventProps(props)}
         className={classes}
         id={id}
     >

data/app/pb_kits/playbook/pb_body/kit.schema.json

@@ -94,7 +94,6 @@
     }
   },
   "globalProps": true,
-  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Body } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -7,7 +7,6 @@ import classnames from 'classnames'
 
 import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
-import { GlobalEventProps, globalEventProps } from '../utilities/globalEventProps'
 import type { ProductColors, CategoryColors, BackgroundColors, StatusColors } from '../types/colors'
 
 import Icon from '../pb_icon/_icon'
@@ -35,7 +34,7 @@ type CardPropTypes = {
   padding?: string,
   selected?: boolean,
   tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav",
-} & GlobalProps & GlobalEventProps
+} & GlobalProps
 
 type CardHeaderProps = {
   headerColor?: BackgroundColors | ProductColors | CategoryColors | StatusColors | "none",
@@ -157,7 +156,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
             {...dataProps}
             className={classnames(cardCss, globalProps(props), className)}
             {...restHtmlProps}
-            {...globalEventProps(props)}
             style={mergedStyles}
         >
           {subComponentTags('Header')}
@@ -187,7 +185,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
               {...dataProps}
               className={classnames(cardCss, globalProps(props), className)}
               {...restHtmlProps}
-              {...globalEventProps(props)}
               style={mergedStyles}
             >
               {subComponentTags('Header')}

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -25,16 +25,6 @@ $additional_colors: (
 );
 $background_colors: map-merge($product_colors, $additional_colors);
 $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $additional_colors), $category_colors), $status_colors);
-// Prop sizes only — legacy $border_radius keys like "light" collide with background_light.
-$pb_card_border_radius_values: (
-  xs: $border_radius_xs,
-  sm: $border_radius_sm,
-  md: $border_radius_md,
-  lg: $border_radius_lg,
-  xl: $border_radius_xl,
-  none: $border_radius_none,
-  rounded: $border_radius_rounded,
-);
 
 @mixin pb_card_selected($border_color: $primary) {
   border-color: $border_color;
@@ -73,8 +63,8 @@ $pb_card_border_radius_values: (
     }
   }
 
-  @each $name, $radius in $pb_card_border_radius_values {
-    &.pb_card_kit_border_radius_#{$name} {
+  @each $name, $radius in $border_radius {
+    &[class*=_#{$name}] {
       border-radius: $radius;
     }
   }

data/app/pb_kits/playbook/pb_card/kit.schema.json

@@ -186,7 +186,6 @@
     }
   },
   "globalProps": true,
-  "globalEventProps": true,
   "usage": {
     "react": {
       "import": "import { Card } from 'playbook-ui'",

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -112,8 +112,6 @@ type DropdownProps = {
     isClosed?: boolean;
     label?: string;
     multiSelect?: boolean;
-    name?: string;
-    onChange?: (event: { target: { name?: string; value: any } }) => void;
     onSelect?: (arg: GenericObject) => null;
     options?: GenericObject;
     placeholder?: string;
@@ -158,8 +156,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         label,
         multiSelect = false,
         formPillProps,
-        name,
-        onChange,
         onSelect,
         options,
         placeholder,
@@ -418,10 +414,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setIsDropDownClosed(false);
     };
 
-    const handleSelectionChange = (value: any) => {
-        onSelect && onSelect(value);
-        onChange && onChange({ target: { name, value } });
-    };
 
       const handleOptionClick = (clickedItem: GenericObject) => {
                 if (disabled) return;
@@ -434,7 +426,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                        const next = exists
                        ? list.filter((option) => option.value !== clickedItem.value)
                            : [...list, clickedItem];
-                   handleSelectionChange(next);
+                   onSelect && onSelect(next);
                        return next;
                    });
                    setFilterItem("");
@@ -447,7 +439,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                    if (shouldCloseOnClick) {
                        setIsDropDownClosed(true);
                    }
-                   handleSelectionChange(clickedItem);
+                   onSelect && onSelect(clickedItem);
                    
                    // Sync with DatePickers if this is a quickpick variant
                    if (variant === "quickpick" && Array.isArray(clickedItem.value)) {
@@ -476,10 +468,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       if (disabled) return;
       if (multiSelect) {
         setSelected([]);
-        handleSelectionChange([]);
+        onSelect && onSelect([]);
       } else {
         setSelected({});
-        handleSelectionChange(null);
+        onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
         setFilterItem("");
         
@@ -513,10 +505,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       clearSelected: () => {
         if (multiSelect) {
           setSelected([]);
-          handleSelectionChange([]);
+          onSelect && onSelect([]);
         } else {
           setSelected({});
-          handleSelectionChange(null);
+          onSelect && onSelect(null);
         }
         setFilterItem("");
         setIsDropDownClosed(true);
@@ -530,16 +522,16 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         clearSelected: () => {
           if (multiSelect) {
             setSelected([]);
-            handleSelectionChange([]);
+            onSelect && onSelect([]);
           } else {
             setSelected({});
-            handleSelectionChange(null);
+            onSelect && onSelect(null);
           }
           setFilterItem("");
           setIsDropDownClosed(true);
         },
       };
-    }, [multiSelect, handleSelectionChange, setSelected, setFilterItem, setIsDropDownClosed]);
+    }, [multiSelect, onSelect, setSelected, setFilterItem, setIsDropDownClosed]);
 
     useImperativeHandle(ref, () => imperativeRef.current);
 
@@ -602,7 +594,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     handleBackspace,
                     handleChange,
                     handleOptionClick,
-                    handleSelectionChange,
                     handleWrapperClick,
                     inputRef,
                     inputWrapperRef,

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.json

@@ -88,7 +88,6 @@
       "name": "Content",
       "props": [
         "label",
-        "name",
         "placeholder",
         "options",
         "defaultValue",
@@ -131,7 +130,6 @@
     {
       "name": "Events",
       "props": [
-        "onChange",
         "onSelect"
       ]
     }

data/app/pb_kits/playbook/pb_dropdown/docs/_playground.overrides.json

@@ -70,7 +70,6 @@
       "name": "Content",
       "props": [
         "label",
-        "name",
         "placeholder",
         "options",
         "defaultValue",
@@ -112,7 +111,7 @@
     },
     {
       "name": "Events",
-      "props": ["onChange", "onSelect"]
+      "props": ["onSelect"]
     }
   ],
   "presets": [

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

@@ -39,9 +39,6 @@ examples:
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
   - dropdown_custom_event_type: Custom Event Type
-  - dropdown_dynamic_options: Dynamic Options
-  - dropdown_dynamic_options_with_autocomplete: Dynamic Options with Autocomplete
-  - dropdown_dynamic_options_with_multi_select: Dynamic Options with Multi Select
 
   react:
   - dropdown_default: Default
@@ -84,6 +81,3 @@ examples:
   - dropdown_required_indicator: Required Indicator
   - dropdown_disabled: Disabled Input
   - dropdown_grouped_options: Grouped Options
-  - dropdown_react_hook: React Hook
-  - dropdown_multi_select_react_hook: React Hook Multi Select
-

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

@@ -1,6 +1,4 @@
 export { default as DropdownDefault } from './_dropdown_default.jsx'
-export { default as DropdownReactHook } from './_dropdown_react_hook.jsx'
-export { default as DropdownMultiSelectReactHook } from './_dropdown_multi_select_react_hook.jsx'
 export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
 export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
 export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -59,14 +59,6 @@ module Playbook
                                 default: false
       prop :custom_event_type, type: Playbook::Props::String,
                                default: ""
-      prop :options_by_context, type: Playbook::Props::HashProp,
-                                default: {}
-      prop :context_selector, type: Playbook::Props::String,
-                              default: ""
-      prop :clear_on_context_change, type: Playbook::Props::Boolean,
-                                     default: true
-      prop :options_event_type, type: Playbook::Props::String,
-                                default: ""
 
       def data
         Hash(prop(:data)).merge(
@@ -81,11 +73,7 @@ module Playbook
           end_date_id: variant == "quickpick" ? end_date_id : nil,
           controls_start_id: variant == "quickpick" && controls_start_id.present? ? controls_start_id : nil,
           controls_end_id: variant == "quickpick" && controls_end_id.present? ? controls_end_id : nil,
-          custom_event_type: custom_event_type.presence,
-          pb_dropdown_options_by_context: options_by_context.present? ? options_by_context.to_json : nil,
-          pb_dropdown_context_selector: context_selector.presence,
-          pb_dropdown_clear_on_context_change: clear_on_context_change,
-          options_event_type: options_event_type.presence
+          custom_event_type: custom_event_type.presence
         ).compact
       end
 

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { render, screen, fireEvent, waitFor, act } from "../utilities/test-utils"
+import { render, screen, fireEvent, waitFor } from "../utilities/test-utils"
 
 import { Dropdown, Icon, IconCircle } from 'playbook-ui'
 import DateTime from "../pb_kit/dateTime.ts"
@@ -995,207 +995,4 @@ test('disabled prop disables autocomplete input', () => {
   const input = kit.querySelector('.dropdown_input')
 
   expect(input).toBeDisabled()
-})
-
-test('onChange uses react-hook-form event shape', () => {
-  const onChange = jest.fn()
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        name="color"
-        onChange={onChange}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
-
-  expect(onChange).toHaveBeenCalledWith({
-    target: { name: 'color', value: options[0] },
-  })
-})
-
-test('react-hook-form onChange receives selected options for multiSelect', () => {
-  const onChange = jest.fn()
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        multiSelect
-        name="languages"
-        onChange={onChange}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
-  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
-
-  expect(onChange.mock.calls[0][0]).toEqual({
-    target: { name: 'languages', value: [options[0]] },
-  })
-  expect(onChange.mock.calls[1][0]).toEqual({
-    target: { name: 'languages', value: [options[0], options[1]] },
-  })
-})
-
-test('onSelect still fires when onChange is provided', () => {
-  const onSelect = jest.fn()
-  const onChange = jest.fn()
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        name="country"
-        onChange={onChange}
-        onSelect={onSelect}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
-
-  expect(onSelect).toHaveBeenCalledWith(options[0])
-  expect(onChange).toHaveBeenCalledWith({
-    target: { name: 'country', value: options[0] },
-  })
-})
-
-test('onSelect-only single select still receives the option object', () => {
-  const onSelect = jest.fn()
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        onSelect={onSelect}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
-
-  expect(onSelect).toHaveBeenCalledTimes(1)
-  expect(onSelect).toHaveBeenCalledWith(options[0])
-})
-
-test('onSelect-only multiSelect still receives the selected options array', () => {
-  const onSelect = jest.fn()
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        multiSelect
-        onSelect={onSelect}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
-  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[0])
-
-  expect(onSelect.mock.calls[0][0]).toEqual([options[0]])
-  expect(onSelect.mock.calls[1][0]).toEqual([options[0], options[1]])
-})
-
-test('onSelect-only clearSelected still receives null', () => {
-  const onSelect = jest.fn()
-  const dropdownRef = React.createRef()
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue={options[0]}
-        onSelect={onSelect}
-        options={options}
-        ref={dropdownRef}
-    />
-  )
-
-  act(() => {
-    dropdownRef.current.clearSelected()
-  })
-
-  expect(onSelect).toHaveBeenCalledWith(null)
-})
-
-test('onSelect-only clear icon still receives null', () => {
-  const onSelect = jest.fn()
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue={options[0]}
-        onSelect={onSelect}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.click(kit.querySelector('[aria-label="times icon"]').closest('div'))
-
-  expect(onSelect).toHaveBeenCalledWith(null)
-})
-
-test('onSelect-only removing a multiSelect pill still receives remaining options', () => {
-  const onSelect = jest.fn()
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        defaultValue={[options[0], options[1]]}
-        multiSelect
-        onSelect={onSelect}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.click(kit.querySelector('.pb_form_pill_close'))
-
-  expect(onSelect).toHaveBeenCalledWith([options[1]])
-})
-
-test('autocomplete typing does not fire onSelect or onChange', () => {
-  const onSelect = jest.fn()
-  const onChange = jest.fn()
-
-  render(
-    <Dropdown
-        autocomplete
-        data={{ testid: testId }}
-        onChange={onChange}
-        onSelect={onSelect}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.change(kit.querySelector('.dropdown_input'), { target: { value: 'Can' } })
-
-  expect(onSelect).not.toHaveBeenCalled()
-  expect(onChange).not.toHaveBeenCalled()
-})
-
-test('autocomplete selection still fires onSelect', () => {
-  const onSelect = jest.fn()
-
-  render(
-    <Dropdown
-        autocomplete
-        data={{ testid: testId }}
-        onSelect={onSelect}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  fireEvent.click(kit.querySelectorAll('.pb_dropdown_option_list')[1])
-
-  expect(onSelect).toHaveBeenCalledWith(options[1])
-})
+})