playbook_ui 15.5.0.pre.alpha.play250212696 → 15.5.0.pre.alpha.play250612607

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0f25d8e230fb6f3cf92eac4b1e458b83579eba7a8f201a70f84c54fb97698b6b
-  data.tar.gz: f63d76ad13dada00d5d24667c202d4b8de8b29559fe5b6c0fbcf28eb8e3205f8
+  metadata.gz: 2b5ffde9745ceb25129d5ef341dd3dda350a7cc52f0db4be00ffd873e90912a4
+  data.tar.gz: 4ba6f0e94b76a8b45bc12853f81c160dc54f31e4d671292e7c447df040bdc17c
 SHA512:
-  metadata.gz: 3f81a0dbf26bbbe3705c641959e175d4d4807690c16c672200e0a75a9fda6929eefe20ed29305f863c2229c6b5427a61327372364c4adb4f043ede86ac58cfb0
-  data.tar.gz: 9e0869caebd6545288ebe34e1df3d8c3f51faf21c915237aae222029abe6274c934ba2453b46c59f476ea3b38f58e0be319817b5f3d017fef7b915232a5fc5aa
+  metadata.gz: 32d276f58d1ac23aa1a37911eac0142b1e0f1d4b959a51edbf14e3a6c8aad19ec3875e28cc5828372f07853c4d3ae6e27c320e5ea7a957e79032b19026b97a60
+  data.tar.gz: 47f2381f3a46b5c8b0c5bc80080ca2ed7268c706a8cd27f592fa1ebe61587d67b3d72d06a3afabf89449b43a12e0ebc7db8de08ca8108fa5f37535d2f3589711

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_compound_components.html.erb

@@ -1,24 +1,3 @@
-<% 
-  options = [
-    {
-      label: "United States",
-      value: "unitedStates",
-      id: "us"
-    },
-    {
-      label: "United Kingdom",
-      value: "unitedKingdom",
-      id: "gb"
-    },
-    {
-      label: "Pakistan",
-      value: "pakistan",
-      id: "pk"
-    }
-  ]
-%>
-
-
 <%= pb_rails("button", props: { text: "Open Complex Dialog", data:{"open-dialog": "dialog-complex"} }) %>
 
 <%= pb_rails("dialog", props: { id:"dialog-complex", size: "lg", full_height: true }) do %>
@@ -31,16 +10,6 @@
         <%= pb_rails("rich_text_editor", props: {id: "default", value: "Add your text here"}) %>
         <%= pb_rails("caption", props: { text: "Type in a word or term too help find tickets later. ex. training, phone setup, hr", margin_bottom: "xs", margin_top: "sm" }) %>
         <%= pb_rails("typeahead", props: { placeholder: "Tags.."}) %>
-        <%= pb_rails("dropdown", props: {options: options, autocomplete: true}) %>
-        <%= pb_rails("typeahead", props: {
-        id: "typeahead-default",
-        placeholder: "Select one...",
-        options: options,
-        name: :foo,
-        margin_top: "sm",
-        is_multi: false
-      })
-%>
 
     <% end %>
     <%= pb_rails("dialog/dialog_footer", props: {cancel_button: "Back", confirm_button: "Send my Issue", confirm_button_id:"confirm-complex", id: "dialog-complex"}) %>

data/app/pb_kits/playbook/pb_dialog/index.js

@@ -143,30 +143,25 @@ export default class PbDialog extends PbEnhancedElement {
 
     // Close dialog box on outside click
     dialogs.forEach((dialogElement) => {
-      const originalClickHandler = dialogElement._outsideClickHandler
-      if (originalClickHandler) dialogElement.removeEventListener("click", originalClickHandler)
-      
+      const originalMousedownHandler = dialogElement._outsideClickHandler
+      if (originalMousedownHandler) dialogElement.removeEventListener("mousedown", originalMousedownHandler)
       dialogElement._outsideClickHandler = (event) => {
         const dialogParentDataset = dialogElement.parentElement.dataset
         if (dialogParentDataset.overlayClick === "overlay_close") return
 
-        // Get the dialog's bounding box (the actual content area)
-        const rect = dialogElement.getBoundingClientRect()
-        const clickedInDialog = (
-          event.clientX >= rect.left &&
-          event.clientX <= rect.right &&
-          event.clientY >= rect.top &&
-          event.clientY <= rect.bottom
-        )
-
-        // Only close if clicked outside the dialog content (on the backdrop)
-        if (!clickedInDialog) {
+        const dialogModal = event.target.getBoundingClientRect()
+        const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+          event.clientX > dialogModal.right ||
+          event.clientY < dialogModal.top ||
+          event.clientY > dialogModal.bottom
+
+        if (clickedOutsideDialogModal) {
           dialogElement.close()
           event.stopPropagation()
         }
       }
 
-      dialogElement.addEventListener("click", dialogElement._outsideClickHandler);
+      dialogElement.addEventListener("mousedown", dialogElement._outsideClickHandler);
     })
   }
 }

data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx

@@ -276,18 +276,3 @@ test('multi-value badges have tabIndex and focus class when focused', () => {
   })
 })
 
-test('input display none shows number of selected items', () => {
-  render(
-    <Typeahead
-        data={{ testid: 'input-display-none-test' }}
-        defaultValue={[options[0], options[1]]}
-        inputDisplay="none"
-        isMulti
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId('input-display-none-test')
-  const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
-  expect(inputDisplayDiv).toHaveTextContent("2 items selected") 
-})

data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx

@@ -43,7 +43,6 @@ type TypeaheadProps = {
   error?: string,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   id?: string,
-  inputDisplay?: "pills" | "none",
   label?: string,
   loadOptions?: string | Noop,
   getOptionLabel?: string | (() => string),
@@ -90,7 +89,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
   getOptionValue,
   htmlOptions = {},
   id,
-  inputDisplay = "pills",
   name,
   loadOptions = noop,
   marginBottom = "sm",
@@ -240,7 +238,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(({
     getOptionValue: isString(getOptionValue) ? get(window, getOptionValue) : getOptionValue,
     defaultOptions: true,
     id: id || uniqueId(),
-    inputDisplay: inputDisplay,
     inline: false,
     isClearable: true,
     isSearchable: true,

data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx

@@ -7,29 +7,18 @@ type ClearContainerProps = {
     id: string,
   },
   clearValue: () => void,
-  innerProps?: any,
 }
 
-const ClearContainer = (props: ClearContainerProps | any): React.ReactElement => {
-  const { selectProps, clearValue, innerProps } = props
+const ClearContainer = (props: ClearContainerProps): React.ReactElement => {
+  const { selectProps, clearValue } = props
   useEffect(() => {
     document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
   }, [clearValue, selectProps.id])
 
-  // To stop this from bubbling up when inside a dialog or other modal
-  const handleMouseDown = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    innerProps?.onMouseDown?.(event)
-  }
-
   return (
     <components.ClearIndicator
         className="clear_indicator"
         {...props}
-        innerProps={{
-          ...innerProps,
-          onMouseDown: handleMouseDown,
-        }}
     />
   )
 }

data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx

@@ -19,12 +19,7 @@ type Props = {
 const MultiValue = (props: Props) => {
   const { removeProps, isFocused } = props
   const { imageUrl, label } = props.data
-  const { dark, multiKit, pillColor, truncate, wrapped, inputDisplay } = props.selectProps
-
-  // If inputDisplay is "none", don't render the pill/badge, just return null (the count handled in ValueContainer file)
-  if (inputDisplay === 'none') {
-    return null
-  }
+  const { dark, multiKit, pillColor, truncate, wrapped } = props.selectProps
 
   const formPillProps = {
     marginRight: 'xs',

data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx

@@ -1,42 +1,15 @@
 import React from 'react'
 import { components } from 'react-select'
-import Body from '../../pb_body/_body'
 
 type ValueContainerProps = {
-  children: React.ReactNode | React.ReactNode[],
-  selectProps?: Record<string, unknown>,
-  hasValue?: boolean,
+  children: React.ReactNode,
 }
 
-const ValueContainer = (props: ValueContainerProps | any): React.ReactElement => {
-  const { children, selectProps, hasValue } = props
-  const inputDisplay = (selectProps as any)?.inputDisplay
-  const value = (selectProps as any)?.value
-
-  // When inputDisplay is "none" and there are selected values, show count text (this is for multi-select only)
-  if (inputDisplay === 'none' && hasValue && value) {
-    const selectedCount = Array.isArray(value) ? value.length : 0
-    
-    return (
-      <components.ValueContainer 
-          className="text_input_value_container"
-          {...props}
-      >
-        <Body
-            className="pb_typeahead_selection_count"
-            text={`${selectedCount} item${selectedCount !== 1 ? 's' : ''} selected`}
-        />
-        {children}
-      </components.ValueContainer>
-    )
-  }
-
-  return (
-    <components.ValueContainer 
-        className="text_input_value_container"
-        {...props}
-    />
-  )
-}
+const ValueContainer = (props: ValueContainerProps): React.ReactElement => (
+  <components.ValueContainer
+      className="text_input_value_container"
+      {...props}
+  />
+)
 
 export default ValueContainer

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

@@ -5,7 +5,6 @@ examples:
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
-    - typeahead_input_display: Input Display
     - typeahead_without_pills: Without Pills (Single Select)
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
@@ -27,7 +26,6 @@ examples:
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight
     - typeahead_with_pills: With Pills
-    - typeahead_input_display: Input Display
     - typeahead_with_pills_async: With Pills (Async Data)
     - typeahead_with_pills_async_users: With Pills (Async Data w/ Users)
     - typeahead_with_pills_async_custom_options: With Pills (Async Data w/ Custom Options)

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

@@ -17,5 +17,4 @@ export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
 export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
-export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'
-export { default as TypeaheadInputDisplay } from './_typeahead_input_display.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'

data/app/pb_kits/playbook/pb_typeahead/typeahead.rb

@@ -25,10 +25,6 @@ module Playbook
       prop :is_multi, type: Playbook::Props::Boolean,
                       default: true
 
-      prop :input_display, type: Playbook::Props::Enum,
-                           values: %w[none pills],
-                           default: "pills"
-
       prop :pills, type: Playbook::Props::Boolean,
                    default: false
 
@@ -82,7 +78,7 @@ module Playbook
       end
 
       def is_react?
-        pills || !is_multi || wrapped || input_display == "none"
+        pills || !is_multi || wrapped
       end
 
       def typeahead_react_options
@@ -95,7 +91,6 @@ module Playbook
           id: id,
           inline: inline,
           isMulti: is_multi,
-          inputDisplay: input_display,
           label: label,
           marginBottom: margin_bottom,
           multiKit: multi_kit,