playbook_ui 16.10.0 → 16.11.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 463f8e78562bf32966038fc3b60d2399d5b79ed6bd1469e96a22a3cba9b9acfd
-  data.tar.gz: b096a3632bdba7efd17d0c95fcfd22459af97f642558a7ab7e68962794d9f849
+  metadata.gz: ace743a234de15aaf9ee6ffb24611f554ee330384f789a8bb480dc88625219de
+  data.tar.gz: 0e5e6b5351a5320b6752873019fea60337fbc90241a646036790c80b8d2469a8
 SHA512:
-  metadata.gz: 44790a1671535c961f69c03f7f81c2ac60cccede4b9ea40527b52a4f5696cfdd6b96d0c47595bf3cf0e8dee1da6ab9b66409fa22e7bd2ec0325ae3c907744e55
-  data.tar.gz: e3596b959c27bddff550044d9a8b13c5fa01932ec931d910221b8c1fb30084fb85b5afcdcca5d1d0e940fd4749574aba925f5a730457ec6b3a7a7584ea71cc9f
+  metadata.gz: 6fcda84f3ea5e911d96bfa65d56a049004b3b439104873f578609efadbae701904ccac15acdfd87d76e24962a4f4e9cd0ff2f2371eda67d92ace3ce764cc6226
+  data.tar.gz: 846e209e5edfed5a2c8e909248b32596ed0c612c35785a90a49642fc11b2d08d4f5ea6dcb3fd8b3dea16ed12b30ca8ea615d622022dbce44f1326812c91b1ba3

data/app/pb_kits/playbook/_playbook.scss

@@ -36,6 +36,7 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
+@import 'pb_full_screen/full_screen';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -128,3 +129,4 @@
 @import 'utilities/vertical_align';
 @import 'utilities/height';
 @import 'utilities/gap';
+@import 'utilities/border';

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

@@ -106,7 +106,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     },
     "required": {
       "platforms": [

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

@@ -106,7 +106,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "GenericObject"
     }
   },
   "globalProps": true,

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

@@ -72,7 +72,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "Date"
     },
     "timezone": {
       "platforms": [

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

@@ -44,7 +44,7 @@
       "platforms": [
         "rails"
       ],
-      "type": "string"
+      "type": "Date"
     },
     "timezone": {
       "platforms": [

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

@@ -10,6 +10,61 @@
 @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,
@@ -50,6 +105,17 @@
           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;
@@ -145,6 +211,20 @@
             }
           }
         }
+
+        // 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 {
@@ -376,6 +456,40 @@
           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,6 +93,7 @@ type DropdownProps = {
     closeOnClick?: "outside" | "inside" | "any";
     constrainHeight?: boolean;
     customQuickPickDates?: CustomQuickPickDates;
+    disabled?: boolean;
     formPillProps?: GenericObject;
     dark?: boolean;
     data?: { [key: string]: string };
@@ -139,6 +140,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         dark = false,
         data = {},
         defaultValue = {},
+        disabled = false,
         error,
         htmlOptions = {},
         id,
@@ -164,6 +166,7 @@ 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
     );
@@ -174,7 +177,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         : (options || []);
     // ----------------------------------------------------------
 
-    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
+    const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(disabled ? true : isClosed);
 
     // Use a suffix for the trigger ID to avoid conflict with the outer div's id
     const sanitizeForId = (str: string) =>
@@ -228,6 +231,7 @@ 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();
@@ -269,8 +273,8 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     // dropdown to toggle with external control
     useEffect(() => {
-        setIsDropDownClosed(isClosed)
-    }, [isClosed])
+        setIsDropDownClosed(disabled ? true : isClosed)
+    }, [disabled, isClosed])
 
     const blankSelectionOption: GenericObject = blankSelection ? [{ label: blankSelection, value: "" }] : [];
     const optionsWithBlankSelection = blankSelectionOption.concat(dropdownOptions);
@@ -330,12 +334,14 @@ 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) {
@@ -378,11 +384,13 @@ 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([]);
@@ -502,6 +510,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     blankSelection,
                     clearable,
                     dropdownContainerRef,
+                    disabled,
                     error,
                     errorId,
                     filterItem,
@@ -564,7 +573,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                             }
                         }, 0);
                     }}
-                    onFocus={() => setIsInputFocused(true)}
+                    onFocus={() => !disabled && setIsInputFocused(true)}
                     ref={dropdownRef}
                 >
                     {children ? (

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.html.erb

@@ -0,0 +1,93 @@
+<%
+  options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ]
+%>
+
+<%
+  custom_display = capture do
+    pb_rails("flex", props: { align: "center" }) do
+      concat(pb_rails("avatar", props: { name: "", size: "xs", id: "dropdown-avatar" }))
+      concat(pb_rails("body", props: { text: "", size: "xs", margin_x: "xs", id: "dropdown-avatar-name" }))
+      concat(pb_rails("badge", props: { text: "", id: "dropdown-avatar-status" }))
+    end
+  end
+%>
+
+<%= pb_rails("dropdown", props: { id: "user-dropdown-disabled-options", options: options }) do %>
+  <%= pb_rails("dropdown/dropdown_trigger", props: { placeholder: "Select a User", custom_display: custom_display }) %>
+  <%= pb_rails("dropdown/dropdown_container") do %>
+    <% options.each do |option| %>
+      <%= pb_rails("dropdown/dropdown_option", props: { option: option }) do %>
+        <%= pb_rails("flex", props: { align: "center", justify: "between" }) do %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("user", props: { name: option[:label], align: "left", avatar: true, orientation: "horizontal", territory: option[:territory], title: option[:title] }) %>
+          <% end %>
+          <%= pb_rails("flex/flex_item") do %>
+            <%= pb_rails("badge", props: { rounded: true, dark: true, text: option[:status], variant: option[:status] == "Offline" ? "neutral" : option[:status] == "Online" ? "success" : "warning" }) %>
+          <% end %>
+        <% end %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>
+
+<script>
+  document.addEventListener("pb:dropdown:selected", (e) => {
+    if (e.target.id !== "user-dropdown-disabled-options") return;
+
+    const option = e.detail;
+    const dropdown = e.target;
+    const display = dropdown.querySelector("[data-dropdown-trigger-custom-display]");
+    if (!display) return;
+
+    const nameEl = display.querySelector("#dropdown-avatar-name");
+    if (nameEl) nameEl.textContent = option.label;
+
+    const avatarWrapper = display.querySelector("#dropdown-avatar .avatar_wrapper");
+    if (avatarWrapper) {
+      const initials = (option.label[0] + option.label.split(" ").pop()[0]).toUpperCase();
+      avatarWrapper.dataset.name = option.label;
+      avatarWrapper.setAttribute("data-initials", initials);
+    }
+
+    const badgeEl = display.querySelector("#dropdown-avatar-status");
+    const variant = option.status === "Online" ? "success" : option.status === "Offline" ? "neutral" : "warning";
+    if (badgeEl) {
+      badgeEl.querySelector("span").textContent = option.status;
+      badgeEl.className = `pb_badge_kit_${variant}`;
+    }
+  });
+</script>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.jsx

@@ -0,0 +1,127 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Badge from '../../pb_badge/_badge'
+import Flex from '../../pb_flex/_flex'
+import FlexItem from '../../pb_flex/_flex_item'
+import Avatar from '../../pb_avatar/_avatar'
+import User from '../../pb_user/_user'
+import Body from '../../pb_body/_body'
+
+const DropdownCustomDisplayDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState();
+
+  const options = [
+    {
+      label: "Jasper Furniss",
+      value: "jasperFurniss",
+      territory: "PHL",
+      title: "Lead UX Engineer",
+      id: "jasper-furniss",
+      status: "Offline"
+    },
+    {
+      label: "Ramon Ruiz",
+      value: "ramonRuiz",
+      territory: "PHL",
+      title: "Senior UX Designer",
+      id: "ramon-ruiz",
+      status: "Unavailable",
+      disabled: true
+    },
+    {
+      label: "Carlos Lima",
+      value: "carlosLima",
+      territory: "PHL",
+      title: "Nitro Developer",
+      id: "carlos-lima",
+      status: "Online"
+    },
+    {
+      label: "Courtney Long",
+      value: "courtneyLong",
+      territory: "PHL",
+      title: "Lead UX Designer",
+      id: "courtney-long",
+      status: "Online"
+    }
+  ];
+
+  const CustomDisplay = () => {
+    return (
+      <>
+      {
+        selectedOption && (
+          <Flex align="center">
+            <Avatar
+                name={selectedOption.label}
+                size="xs"
+            />
+            <Body 
+                marginX="xs"
+                text={selectedOption.label} 
+            />
+            <Badge 
+                text={selectedOption.status} 
+                variant={selectedOption.status == "Offline" ? "neutral" : selectedOption.status == "Online" ? "success" : "warning"}
+            />
+          </Flex>
+        )
+      }
+    </>
+    )
+  };
+
+
+  return (
+  <div>
+    <Dropdown
+        onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+        options={options}
+        {...props}
+    >
+      <Dropdown.Trigger customDisplay={<CustomDisplay/>}
+          placeholder="Select a User"
+      />
+        {options.map((option) => (
+          <Dropdown.Option key={option.id} 
+              option={option}
+          >
+            <Flex
+                align="center"
+                justify="between"
+            >
+              <FlexItem>
+                <User
+                    align="left"
+                    avatar
+                    name={option.label}
+                    orientation="horizontal"
+                    territory={option.territory}
+                    title={option.title}
+                />
+              </FlexItem>
+              <FlexItem>
+                <Badge dark
+                    rounded
+                    text={option.status}
+                    variant={`${
+                        option.status === "Offline"
+                        ? "neutral"
+                    : option.status === "Unavailable"
+                    ? "warning"
+                        : option.status === "Online"
+                        ? "success"
+                        : "warning"
+                    }`}
+                />
+              </FlexItem>
+            </Flex>
+          </Dropdown.Option>
+        ))}
+    </Dropdown>
+  </div>
+  )
+}
+
+export default DropdownCustomDisplayDisabledOption

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_custom_display_disabled_option.md

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.html.erb

@@ -0,0 +1,10 @@
+<% 
+  options = [
+    { label: 'United States', value: 'unitedStates', id: 'us' },
+    { label: 'Canada', value: 'canada', id: 'ca' },
+    { label: 'Pakistan', value: 'pakistan', id: 'pk' },
+  ]
+
+%>
+
+<%= pb_rails("dropdown", props: {id: "dropdown-disabled", disabled: true,label: "Default Dropdown", options: options}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled.jsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Dropdown from '../_dropdown'
+
+const DropdownDisabled = (props) => {
+
+  const options = [
+    {
+      label: "United States",
+      value: "unitedStates",
+      id: "us"
+    },
+    {
+      label: "Canada",
+      value: "canada",
+      id: "ca"
+    },
+    {
+      label: "Pakistan",
+      value: "pakistan",
+      id: "pk"
+    }
+  ];  
+
+
+  return (
+  <div>
+    <Dropdown
+        disabled
+        label="Default Dropdown"
+        options={options}
+        {...props}
+    />
+  </div>
+  )
+}
+
+export default DropdownDisabled

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.html.erb

@@ -0,0 +1,10 @@
+<%
+  options = [
+    { label: "Available Option", value: "available", id: "available-option" },
+    { label: "Coming Soon", value: "coming-soon", id: "coming-soon", disabled: true },
+    { label: "Another Available", value: "another-available", id: "another-available" },
+    { label: "Locked Feature", value: "locked-feature", id: "locked-feature", disabled: true },
+  ]
+%>
+
+<%= pb_rails("dropdown", props: { label: "Disabled Options", options: options }) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.jsx

@@ -0,0 +1,37 @@
+import React, { useState } from 'react'
+
+import Dropdown from '../../pb_dropdown/_dropdown'
+import Caption from '../../pb_caption/_caption'
+
+const DropdownDisabledOption = (props) => {
+  const [selectedOption, setSelectedOption] = useState()
+
+  const options = [
+    { label: 'Available Option', value: 'available', id: 'available-option' },
+    { label: 'Coming Soon', value: 'coming-soon', id: 'coming-soon', disabled: true },
+    { label: 'Another Available', value: 'another-available', id: 'another-available' },
+    { label: 'Locked Feature', value: 'locked-feature', id: 'locked-feature', disabled: true },
+  ]
+
+  return (
+    <div>
+      <Caption
+          text="Select an option. Disabled options remain visible but cannot be selected."
+      />
+      <Dropdown
+          onSelect={(selectedItem) => setSelectedOption(selectedItem)}
+          options={options}
+          placeholder="Choose an option"
+          {...props}
+      />
+      {selectedOption && (
+        <Caption
+            marginTop="xs"
+            text={`Selected: ${selectedOption.label}`}
+        />
+      )}
+    </div>
+  )
+}
+
+export default DropdownDisabledOption

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_disabled_option.md

@@ -0,0 +1 @@
+To disable individual items in the `options`, include `disabled: true` within the object on the option that you want disabled. See the code snippet below for an example of how to do this.

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

@@ -6,12 +6,14 @@ 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
@@ -33,6 +35,7 @@ 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:
@@ -42,10 +45,12 @@ 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
@@ -71,3 +76,4 @@ 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,3 +33,6 @@ 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";