playbook_ui 16.10.0.pre.alpha.play3040dropdownkitdisableoptions17375 → 16.10.0.pre.alpha.play300617388

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4db2f33bce161b88ecc2e3053e2581ad9feeb1bf2fe74fd61332773936f05558
-  data.tar.gz: 044d88ae50adb83779eb429af4be3dde9f165d3a7b5844fb2ec91ad41ea3db17
+  metadata.gz: 136e0ee2c63bf1f23fd2183429e8c8fc0404605fa1a6d6f6d2d8c882f1ad4e6a
+  data.tar.gz: fffab17b4fb9c91b864f815426fb816529a2d594fe397aa06119c97bda692aa1
 SHA512:
-  metadata.gz: 3785ea13abfa2370b4eacdb8d04c8ab2125dc276a39c840b19556826983a2732cc1bc6a35b1d5b28bbce2a39d5af8a8eefeae05b69b8cfce4509c82eb15b7393
-  data.tar.gz: 2c74f176b4360edfac32c0b88fe20f73fd95e1d73c4001d6c0075254b5e6c80eba4bec779dcafb98144bd674b2994fb03d9a320b173752b9b4f3766308d677be
+  metadata.gz: 2cde44dd1cb7d345c54c98dcadb251bc7fa396351de68ccda061d1123f1b15ecee076f36174685650b1d6bdca86ead9a9b354d1ddbf29a38c9eb18bc3157c91d
+  data.tar.gz: 88e1236b5b9169ba14f7091837040582512da5ed331f8cb9b4e3e7af58d8915fc4ba1ff8813db91dad95bab4054f31686fed8580f22a2afa5cac3b4ba3e68e06

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -84,11 +84,13 @@ export const CustomCell = ({
           >
             {row.getIsExpanded() ? (
               <Icon cursor="pointer"
+                  htmlOptions={{ style: { width: "16.656px", height: "13.328px" } }}
                   icon="circle-play"
                   rotation={90}
               />
             ) : (
               <Icon cursor="pointer"
+                  htmlOptions={{ style: { width: "16.656px", height: "13.328px" } }}
                   icon="circle-play"    
                />
             )}

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

@@ -10,61 +10,6 @@
 @import "./scss_partials/dropdown_animation";
 @import "dropdown_mixin";
 
-@mixin dropdown-disabled-typography($color) {
-  .pb_body_kit,
-  .pb_body_kit_default,
-  .pb_body_kit_light,
-  .pb_body_kit_lighter,
-  .pb_body_kit_link,
-  .pb_body_kit_success,
-  .pb_body_kit_error,
-  .pb_body_kit_neutral,
-  .pb_body_kit_positive,
-  .pb_body_kit_negative,
-  .pb_caption_kit,
-  .pb_caption_kit_xs,
-  .pb_caption_kit_sm,
-  .pb_caption_kit_md,
-  .pb_caption_kit_base,
-  .pb_caption_kit_lg,
-  .pb_caption_kit_xl,
-  .pb_title_kit,
-  .pb_detail_kit,
-  .pb_detail_kit_color_light,
-  .pb_detail_kit_color_default,
-  .pb_detail_kit_color_lighter,
-  .pb_detail_kit_color_link,
-  .pb_detail_kit_color_error,
-  .pb_detail_kit_color_success,
-  .pb_link_kit,
-  .pb_link_kit_underline,
-  a {
-    color: $color !important;
-  }
-
-
-  @each $caption-color, $caption-value in $pb_caption_colors {
-    .pb_caption_kit_xs_#{$caption-color},
-    .pb_caption_kit_sm_#{$caption-color},
-    .pb_caption_kit_md_#{$caption-color},
-    .pb_caption_kit_base_#{$caption-color},
-    .pb_caption_kit_lg_#{$caption-color},
-    .pb_caption_kit_xl_#{$caption-color} {
-      color: $color !important;
-    }
-  }
-  
-
-  @each $link-color, $link-value in $pb_link_colors {
-    .pb_link_kit_#{$link-color},
-    .pb_link_kit_#{$link-color}_underline,
-    .pb_link_kit_#{$link-color}_disabled,
-    .pb_link_kit_#{$link-color}_underline_disabled {
-      color: $color !important;
-    }
-  }
-}
-
 .pb_dropdown_default,
 .pb_dropdown_subtle,
 .pb_dropdown_quickpick,
@@ -105,17 +50,6 @@
           color: $input_text_default;
         }
       }
-
-      .dropdown_input:disabled {
-        background-color: $input_background_disabled;
-        color: $input_text_disabled;
-        cursor: default;
-      }
-
-      .dropdown_input:disabled::placeholder {
-        color: $input_text_disabled;
-      }
-
       &:focus {
         box-shadow: 0px 0px 0 1px $status_border_primary !important;
         outline: unset;
@@ -211,20 +145,6 @@
             }
           }
         }
-
-        // Disabled state
-        &.disabled {
-          cursor: not-allowed;
-          // background-color: $input_background_disabled;
-          color: $input_text_disabled;
-          border-color: $input_border_disabled;
-          pointer-events: none;
-          @include dropdown-disabled-typography($input_text_disabled);
-          &:hover,
-          &:focus {
-            background-color: $input_background_disabled;
-          }
-        }
       }
 
       .dropdown_option_wrapper {
@@ -456,40 +376,6 @@
           background-color: $primary;
           border-bottom: rgba($white, 0.15);
         }
-
-        &.disabled {
-          cursor: not-allowed;
-          background-color: $input_background_disabled_dark;
-          color: $input_text_disabled_dark;
-          border-color: $input_border_disabled_dark;
-          pointer-events: none;
-          @include dropdown-disabled-typography($input_text_disabled_dark);
-          &:hover,
-          &:focus {
-            background-color: $input_background_disabled_dark;
-          }
-        }
-      }
-    }
-  }
-
-  &.disabled {
-    .dropdown_wrapper {
-      .dropdown_trigger_wrapper,
-      .dropdown_trigger_wrapper_focus,
-      .dropdown_trigger_wrapper_focus_select_only,
-      .dropdown_trigger_wrapper_select_only {
-        background-color: $input_background_disabled;
-        box-shadow: none !important;
-        cursor: default !important;
-        opacity: 0.5;
-        pointer-events: none;
-
-        input {
-          background-color: $input_background_disabled;
-          color: $input_text_disabled;
-          cursor: default !important;
-        }
       }
     }
   }

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

@@ -93,7 +93,6 @@ type DropdownProps = {
     closeOnClick?: "outside" | "inside" | "any";
     constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
-    disabled?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -140,7 +139,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         dark = false,
         data = {},
         defaultValue = {},
-        disabled = false,
         error,
         htmlOptions = {},
         id,
@@ -166,7 +164,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     const separatorsClass = separators ? '' : 'separators_hidden'
     const classes = classnames(
         buildCss("pb_dropdown", variant, separatorsClass),
-        disabled && "disabled",
         globalProps(props),
         className
     );
@@ -177,7 +174,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         : (options || []);
     // ----------------------------------------------------------
 
-    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(disabled ? true : isClosed);
+    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
     // Use a suffix for the trigger ID to avoid conflict with the outer div's id
     const sanitizeForId = (str: string) =>
@@ -231,7 +228,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const handleLabelClick = (e: React.MouseEvent) => {
       e.stopPropagation();
-      if (disabled) return;
       if (selectId) {
         const trigger = document.getElementById(selectId);
         if (trigger) trigger.focus();
@@ -273,8 +269,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     // dropdown to toggle with external control
     useEffect(() => {
-        setIsDropDownClosed(disabled ? true : isClosed)
-    }, [disabled, isClosed])
+        setIsDropDownClosed(isClosed)
+    }, [isClosed])
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
     const optionsWithBlankSelection = blankSelectionOption.concat(dropdownOptions);
@@ -334,14 +330,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        if (disabled) return;
         setFilterItem(e.target.value);
         setIsDropDownClosed(false);
     };
 
 
       const handleOptionClick = (clickedItem: GenericObject) => {
-                if (disabled) return;
                 const shouldCloseOnClick = closeOnClick === "any" || closeOnClick === "inside";
                 
                 if (multiSelect) {
@@ -384,13 +378,11 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
              };
 
     const handleWrapperClick = () => {
-        if (disabled) return;
         autocomplete && inputRef?.current?.focus();
         toggleDropdown();
     };
 
     const handleBackspace = () => {
-      if (disabled) return;
       if (multiSelect) {
         setSelected([]);
         onSelect && onSelect([]);
@@ -510,7 +502,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     blankSelection,
                     clearable,
                     dropdownContainerRef,
-                    disabled,
                     error,
                     errorId,
                     filterItem,
@@ -573,7 +564,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                             }
                         }, 0);
                     }}
-                    onFocus={() => !disabled && setIsInputFocused(true)}
+                    onFocus={() => setIsInputFocused(true)}
                     ref={dropdownRef}
                 >
                     {children ? (

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

@@ -6,14 +6,12 @@ examples:
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display_rails: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
-  - dropdown_disabled_option: Disabled Option
   - dropdown_subcomponent_structure_rails: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options_rails: Custom Options
   - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display_rails: Custom Display
-  - dropdown_custom_display_disabled_option: Custom Display Disabled Option
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_search_rails: Custom Trigger Dropdown with Search
   - dropdown_with_custom_padding: Custom Option Padding
@@ -35,7 +33,6 @@ examples:
   - dropdown_quickpick_with_date_pickers_rails: Quick Pick with Date Pickers
   - dropdown_quickpick_with_date_pickers_default_rails: Quick Pick with Date Pickers (Default Value)
   - dropdown_required_indicator: Required Indicator
-  - dropdown_disabled: Disabled Input
   - dropdown_custom_event_type: Custom Event Type
 
   react:
@@ -45,12 +42,10 @@ examples:
   - dropdown_multi_select_with_autocomplete: Multi Select with Autocomplete
   - dropdown_multi_select_display: Multi Select with Form Pill Props
   - dropdown_subtle_variant: Subtle Variant
-  - dropdown_disabled_option: Disabled Option
   - dropdown_subcomponent_structure: Subcomponent Structure
   - dropdown_with_autocomplete_with_subcomponents: Autocomplete with Subcomponent Structure
   - dropdown_with_label: With Label
   - dropdown_with_custom_options: Custom Options
-  - dropdown_custom_display_disabled_option: Custom Display Disabled Option
   - dropdown_multi_select_with_custom_options: Multi Select with Custom Options
   - dropdown_with_custom_display: Custom Display
   - dropdown_with_custom_trigger: Custom Trigger
@@ -76,4 +71,3 @@ examples:
   - dropdown_quickpick_custom: Quick Pick Variant (Custom Quick Pick Dates)
   - dropdown_quickpick_with_date_pickers: Quick Pick Variant with Date Pickers
   - dropdown_required_indicator: Required Indicator
-  - dropdown_disabled: Disabled Input

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

@@ -33,6 +33,3 @@ export { default as DropdownWithClearable } from './_dropdown_with_clearable.jsx
 export { default as DropdownWithConstrainHeight } from './_dropdown_with_constrain_height.jsx'
 export { default as DropdownClosingOptions } from './_dropdown_closing_options.jsx'
 export { default as DropdownRequiredIndicator } from "./_dropdown_required_indicator.jsx";
-export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.jsx";
-export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
-export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -18,12 +18,11 @@
             data-dropdown-selected-option
             name="<%= object.name %><%= '[]' if object.multi_select %>"
             style="display: none"
-            <%= object.disabled ? "disabled" : ""%>
             <%= object.required ? "required" : ""%>
         />
         <% if object.variant == "quickpick" %>
-          <input id="<%= object.start_date_id %>" name="<%= object.start_date_name %>" style="display: none" <%= object.disabled ? "disabled" : ""%>>
-          <input id="<%= object.end_date_id %>" name="<%= object.end_date_name %>" style="display: none" <%= object.disabled ? "disabled" : ""%>>
+          <input id="<%= object.start_date_id %>" name="<%= object.start_date_name %>" style="display: none">
+          <input id="<%= object.end_date_id %>" name="<%= object.end_date_name %>" style="display: none">
         <% end %>
         <% if content.present? %>
             <%= content.presence %>
@@ -31,8 +30,8 @@
                 <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
             <% end %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, disabled: object.disabled, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
-            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height, disabled: object.disabled }) do %>
+            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
+            <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
                         <%= pb_rails("dropdown/dropdown_option", props: {option: option}) %>

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

@@ -18,8 +18,6 @@ module Playbook
                              default: ""
       prop :custom_quick_pick_dates, type: Playbook::Props::HashProp,
                                      default: {}
-      prop :disabled, type: Playbook::Props::Boolean,
-                      default: false
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default subtle quickpick],
                      default: "default"
@@ -64,7 +62,6 @@ module Playbook
         Hash(prop(:data)).merge(
           pb_dropdown: true,
           pb_dropdown_multi_select: multi_select,
-          pb_dropdown_disabled: disabled,
           pb_dropdown_variant: variant,
           pb_dropdown_clearable: clearable,
           pb_dropdown_close_on_click: close_on_click,
@@ -78,9 +75,7 @@ module Playbook
       end
 
       def classname
-        classes = generate_classname("pb_dropdown", variant, separators_class)
-        classes << " disabled" if disabled
-        classes
+        generate_classname("pb_dropdown", variant, separators_class)
       end
 
       def select_id

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

@@ -238,46 +238,6 @@ test('generated custom option', () => {
   expect(customOption).toBeInTheDocument()
 })
 
-test('disabled custom option does not select and marks child wrapper disabled', () => {
-  const onSelect = jest.fn()
-  const disabledOptions = [
-    {
-      label: 'Enabled',
-      value: 'enabled',
-      id: 'enabled',
-    },
-    {
-      label: 'Disabled',
-      value: 'disabled',
-      id: 'disabled',
-      disabled: true,
-    },
-  ]
-
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        onSelect={onSelect}
-        options={disabledOptions}
-    >
-      {disabledOptions.map((option) => (
-        <Dropdown.Option key={option.id}
-            option={option}
-        >
-          <span>{option.label}</span>
-        </Dropdown.Option>
-      ))}
-    </Dropdown>
-  )
-
-  const disabledChild = screen.getByText('Disabled')
-  fireEvent.click(disabledChild)
-
-  expect(onSelect).not.toHaveBeenCalled()
-  expect(disabledChild.parentElement).toHaveClass('dropdown_option_wrapper', 'disabled')
-  expect(disabledChild.closest('[aria-disabled="true"]')).toBeInTheDocument()
-})
-
 test('generated custom Trigger', () => {
   render (
     <Dropdown
@@ -872,60 +832,4 @@ describe("quickpick Last Month range when current month is shorter than the prev
     expect(formatDate(startDate)).toBe(formatDate(DateTime.getPreviousMonthStartDate(now)))
     expect(formatDate(endDate)).toBe(formatDate(DateTime.getPreviousMonthEndDate(now)))
   })
-})
-
-test('disabled prop prevents dropdown from opening', () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        disabled
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  expect(kit).toHaveClass('disabled')
-
-  const trigger = kit.querySelector('.dropdown_trigger_wrapper_select_only')
-  const container = kit.querySelector('.pb_dropdown_container')
-
-  fireEvent.click(trigger)
-
-  expect(container).toHaveClass('close')
-  expect(container).not.toHaveClass('open')
-})
-
-test('disabled prop prevents dropdown from opening with keyboard', () => {
-  render(
-    <Dropdown
-        data={{ testid: testId }}
-        disabled
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const trigger = kit.querySelector('.dropdown_trigger_wrapper_select_only')
-  const container = kit.querySelector('.pb_dropdown_container')
-
-  fireEvent.keyDown(trigger, { key: 'Enter' })
-
-  expect(container).toHaveClass('close')
-  expect(container).not.toHaveClass('open')
-})
-
-test('disabled prop disables autocomplete input', () => {
-  render(
-    <Dropdown
-        autocomplete
-        data={{ testid: testId }}
-        disabled
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = kit.querySelector('.dropdown_input')
-
-  expect(input).toBeDisabled()
 })

data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb

@@ -5,7 +5,6 @@
             type="text"
             placeholder="Search…"
             data-dropdown-search
-            <%= object.disabled ? "disabled" : "" %>
             autocomplete="off"
             />
         <% end %>

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

@@ -7,8 +7,6 @@ module Playbook
                        default: false
       prop :constrain_height, type: Playbook::Props::Boolean,
                               default: false
-      prop :disabled, type: Playbook::Props::Boolean,
-                      default: false
 
       def classname
         classes = %w[pb_dropdown_container close]

data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb

@@ -1,11 +1,11 @@
-<%= pb_content_tag(:div, id: object.option_id, aria: { disabled: object.disabled }) do %>
+<%= pb_content_tag(:div, id: object.option[:id]) do %>
     <%= pb_rails("list/item", props: {
         display: "flex",
         justify_content: "center",
         padding:"none",
         cursor: "pointer"
         }) do %>
-            <div class="<%= object.option_wrapper_class %>">
+            <div class="dropdown_option_wrapper">
                 <% if content.present? %>
                     <%= content.presence %>
                 <% else %>

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

@@ -7,36 +7,11 @@ module Playbook
       prop :id, type: Playbook::Props::String
 
       def data
-        Hash(prop(:data)).merge(
-          "dropdown_option_disabled": disabled,
-          "dropdown_option_label": option
-        )
+        Hash(prop(:data)).merge("dropdown_option_label": option)
       end
 
       def classname
-        "#{generate_classname('pb_dropdown_option', 'list')}#{disabled_class}"
-      end
-
-      def disabled
-        option_value(:disabled) == true
-      end
-
-      def option_id
-        option_value(:id)
-      end
-
-      def option_wrapper_class
-        disabled ? "dropdown_option_wrapper disabled" : "dropdown_option_wrapper"
-      end
-
-    private
-
-      def disabled_class
-        disabled ? " disabled" : ""
-      end
-
-      def option_value(key)
-        option[key] || option[key.to_s]
+        generate_classname("pb_dropdown_option", "list")
       end
     end
   end

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,6 +1,6 @@
 <%= pb_content_tag do %>
     <% if content.present? %>
-        <div style="display: inline-block" tabindex="<%= object.disabled ? "-1" : "0" %>" data-dropdown="pb-dropdown-trigger" data-dropdown-custom-trigger aria-disabled="<%= object.disabled %>" aria-invalid="<%= object.error.present? %>"
+        <div style="display: inline-block" tabindex="0" data-dropdown="pb-dropdown-trigger" data-dropdown-custom-trigger aria-invalid="<%= object.error.present? %>"
             <% if object.label.present? %> aria-label="<%= [object.label, object.default_display_placeholder].join(', ') %>"<% end %>
             <% if object.select_id.present? %> id="<%= object.select_id %>"<% end %>
             <% if object.error_id.present? %> aria-describedby="<%= object.error_id %>"<% end %>
@@ -17,7 +17,7 @@
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
-        html_options: { tabindex: object.disabled ? "-1" : "0", "aria-disabled": object.disabled, "aria-label": object.label.present? ? [object.label, object.default_display_placeholder].join(", ") : nil, "aria-describedby": object.error_id, "aria-invalid": object.error.present?, "data-dropdown": "pb-dropdown-trigger" }
+        html_options: { tabindex: "0", "aria-label": object.label.present? ? [object.label, object.default_display_placeholder].join(", ") : nil, "aria-describedby": object.error_id, "aria-invalid": object.error.present?, "data-dropdown": "pb-dropdown-trigger" }
         }) do %>
         <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>
@@ -37,7 +37,6 @@
                                 <input
                                     data-dropdown-autocomplete
                                     class="dropdown_input"
-                                    <%= object.disabled ? "disabled" : "" %>
                                     type="text"
                                     placeholder="<%= object.placeholder || 'Select…' %>"
                                     autocomplete="off"
@@ -51,7 +50,6 @@
                             <input
                                 data-dropdown-autocomplete
                                 class="dropdown_input"
-                                <%= object.disabled ? "disabled" : "" %>
                                 type="text"
                                 placeholder="<%= object.placeholder || 'Select…' %>"
                                 autocomplete="off"

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

@@ -11,8 +11,6 @@ module Playbook
       prop :custom_display
       prop :autocomplete, type: Playbook::Props::Boolean,
                           default: false
-      prop :disabled, type: Playbook::Props::Boolean,
-                      default: false
       prop :multi_select, type: Playbook::Props::Boolean,
                           default: false
       prop :select_id, type: Playbook::Props::String

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -15,28 +15,6 @@ const {
   setIsDropDownClosed,
 }= useContext(DropdownContext)
 
-  // Helper function to find next non-disabled option
-  const findNextAvailableIndex = (currentIndex: number, direction: 'forward' | 'backward'): number => {
-    let nextIndex = currentIndex;
-    let attempts = 0;
-
-    while (attempts < filteredOptions.length) {
-      if (direction === 'forward') {
-        nextIndex = (nextIndex + 1) % filteredOptions.length;
-      } else {
-        nextIndex = (nextIndex - 1 + filteredOptions.length) % filteredOptions.length;
-      }
-
-      if (!filteredOptions[nextIndex]?.disabled) {
-        return nextIndex;
-      }
-      attempts++;
-    }
-
-    // If all options are disabled, return current index
-    return currentIndex;
-  };
-
   return (e: React.KeyboardEvent) => {
 
     if (e.key !== "Tab" && autocomplete && selected && selected.label) {
@@ -47,18 +25,20 @@ const {
     case "ArrowDown": {
       e.preventDefault();
       setIsDropDownClosed(false);
-      const nextIndex = findNextAvailableIndex(focusedOptionIndex, 'forward');
+      const nextIndex = (focusedOptionIndex + 1) % filteredOptions.length;
       setFocusedOptionIndex(nextIndex);
       break;
     }
     case "ArrowUp": {
       e.preventDefault();
-      const nextIndexUp = findNextAvailableIndex(focusedOptionIndex, 'backward');
+      const nextIndexUp =
+        (focusedOptionIndex - 1 + filteredOptions.length) %
+        filteredOptions.length;
       setFocusedOptionIndex(nextIndexUp);
       break;
     }
     case "Enter":
-      if (focusedOptionIndex !== -1 && !filteredOptions[focusedOptionIndex]?.disabled) {
+      if (focusedOptionIndex !== -1) {
         e.preventDefault();
         handleOptionClick(filteredOptions[focusedOptionIndex]);
         setFocusedOptionIndex(-1)