@codecademy/gamut

72.2.472.2.5-alpha.619ec9.0
dist/Form/SelectDropdown/elements/containers.d.ts
~dist/Form/SelectDropdown/elements/containers.d.tsModified
+15−2
Index: package/dist/Form/SelectDropdown/elements/containers.d.ts
===================================================================
--- package/dist/Form/SelectDropdown/elements/containers.d.ts
+++ package/dist/Form/SelectDropdown/elements/containers.d.ts
@@ -1,12 +1,21 @@
+import { ReactNode } from 'react';
 import { components as SelectDropdownElements, GroupBase, Props } from 'react-select';
 import { CustomSelectComponentProps, SelectDropdownContextValueTypes, TypedReactSelectProps } from '../types';
 /**
  * React context for sharing state between SelectDropdown components.
  * Provides access to focus state and refs for keyboard navigation.
  */
 export declare const SelectDropdownContext: import("react").Context<SelectDropdownContextValueTypes>;
 /**
+ * Wraps react-select's `NoOptionsMessage` to report its text via
+ * `onAnnouncementChange` for screen-reader announcement (see
+ * `useNoOptionsAnnouncement`). react-select controls this component's
+ * mount/unmount, so a mount/unmount effect is the only way to detect the
+ * "no options" state - there's no prop or event exposed for it.
+ */
+export declare const createNoOptionsMessage: (onAnnouncementChange: (announcement: ReactNode) => void) => (props: CustomSelectComponentProps<typeof SelectDropdownElements.NoOptionsMessage>) => import("react/jsx-runtime").JSX.Element;
+/**
  * Custom container component that adds a hidden input for form submission.
  * Renders the selected values as a comma-separated string in the hidden input.
  */
 export declare const CustomContainer: ({ children, ...rest }: CustomSelectComponentProps<typeof SelectDropdownElements.SelectContainer>) => import("react/jsx-runtime").JSX.Element;
@@ -23,7 +32,11 @@
  */
 export declare const CustomInput: ({ ...rest }: CustomSelectComponentProps<typeof SelectDropdownElements.Input>) => import("react/jsx-runtime").JSX.Element;
 /**
  * Typed wrapper around react-select component.
- * Provides type safety for the underlying react-select implementation.
+ * Renders CreatableSelect when isCreatable is true, ReactSelect otherwise.
+ * Creatable-only props (formatCreateLabel, isValidNewOption) are stripped from
+ * the non-creatable path so they don't reach ReactSelect. `onCreateOption` is
+ * handled in SelectDropdown's changeHandler — do not pass it to CreatableSelect
+ * or react-select will skip onChange on create.
  */
-export declare function TypedReactSelect<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>>({ selectRef, ...props }: Props<OptionType, IsMulti, GroupType> & TypedReactSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare function TypedReactSelect<OptionType, IsMulti extends boolean = false, GroupType extends GroupBase<OptionType> = GroupBase<OptionType>>({ selectRef, isCreatable, formatCreateLabel, isValidNewOption, ...props }: Props<OptionType, IsMulti, GroupType> & TypedReactSelectProps): import("react/jsx-runtime").JSX.Element;