feat: improve api

Author: SpyZzey

src/internal/components/option/interfaces.ts

@@ -43,8 +43,12 @@ export interface DropdownOption {
   afterHeader?: boolean;
 }
 
-export interface DropdownOptionItem<T> {
-  type: 'child' | 'parent' | 'select-all' | 'use-entered';
+export type DropdownOptionItemType = 'child' | 'parent' | 'select-all' | 'use-entered';
+export interface DropdownOptionItem<
+  T,
+  TType extends DropdownOptionItemType = 'child' | 'parent' | 'select-all' | 'use-entered',
+> {
+  type: TType;
   disabled: boolean;
   highlighted: boolean;
   selected: boolean;

src/multiselect/interfaces.ts

@@ -16,7 +16,7 @@ export interface MultiselectProps extends BaseSelectProps {
    *
    * @awsuiSystem core
    */
-  renderOption?: (item: MultiselectProps.MultiselectOptionItem) => ReactNode;
+  renderOption?: MultiselectProps.MultiselectOptionItemRenderer;
 
   /**
    * Specifies the currently selected options.
@@ -91,7 +91,8 @@ export namespace MultiselectProps {
   export type Option = OptionDefinition;
   export type OptionGroup = OptionGroupDefinition;
   export type Options = ReadonlyArray<Option | OptionGroup>;
-  export type MultiselectOptionItem = DropdownOptionItem<Option | OptionGroup>;
+  export type MultiselectOptionItem = DropdownOptionItem<Option | OptionGroup, 'child' | 'parent' | 'select-all'>;
+  export type MultiselectOptionItemRenderer = (item: MultiselectOptionItem) => ReactNode;
 
   export type DeselectAriaLabelFunction = (option: Option) => string;
   export type TriggerVariant = 'placeholder' | 'tokens';

src/select/interfaces.ts

@@ -165,7 +165,7 @@ export interface SelectProps extends BaseSelectProps {
    *
    * @awsuiSystem core
    */
-  renderOption?: (option: SelectProps.SelectOptionItem) => ReactNode;
+  renderOption?: SelectProps.SelectOptionItemRenderer;
 
   /**
    * Adds a small label inline with the input for saving vertical space in the UI.
@@ -210,7 +210,9 @@ export namespace SelectProps {
   export type Option = OptionDefinition;
   export type OptionGroup = OptionGroupDefinition;
   export type Options = ReadonlyArray<Option | OptionGroup>;
-  export type SelectOptionItem = DropdownOptionItem<Option | OptionGroup>;
+  export type SelectOptionItem = DropdownOptionItem<Option | OptionGroup, 'child' | 'parent'>;
+  export type SelectOptionItemRenderer = (item: SelectOptionItem) => ReactNode;
+
   export type LoadItemsDetail = OptionsLoadItemsDetail;
 
   export interface ChangeDetail {

src/select/parts/item.tsx

@@ -110,7 +110,7 @@ const Item = (
             selected: !!selected,
             highlighted: !!highlighted,
             disabled: !!disabled,
-            type: option.type === 'select-all' ? 'child' : (option.type ?? 'child'),
+            type: option.type === 'parent' ? 'parent' : 'child',
           })
         ) : (
           <Option

src/select/parts/multiselect-item.tsx

@@ -105,7 +105,7 @@ const MultiSelectItem = (
             selected: !!selected,
             highlighted: !!highlighted,
             disabled: !!disabled,
-            type: option.type ?? 'child',
+            type: option.type !== 'use-entered' ? (option.type ?? 'child') : 'child',
           })
         ) : (
           <Option

src/select/parts/plain-list.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { forwardRef, ReactNode, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 
 import { useContainerQuery } from '@cloudscape-design/component-toolkit';
 import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
@@ -29,7 +29,7 @@ export interface SelectListProps {
   useInteractiveGroups?: boolean;
   screenReaderContent?: string;
   firstOptionSticky?: boolean;
-  renderOption?: (option: SelectProps.SelectOptionItem | MultiselectProps.MultiselectOptionItem) => ReactNode;
+  renderOption?: SelectProps.SelectOptionItemRenderer | MultiselectProps.MultiselectOptionItemRenderer;
 }
 
 export namespace SelectListProps {

src/select/utils/render-options.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { ReactNode } from 'react';
+import React from 'react';
 
 import { DropdownOption } from '../../internal/components/option/interfaces';
 import { NestedDropdownOption, unflattenOptions } from '../../internal/components/option/utils/unflatten-options';
@@ -28,7 +28,7 @@ interface RenderOptionProps {
   withScrollbar: boolean;
   firstOptionSticky?: boolean;
   stickyOptionRef?: React.Ref<HTMLDivElement>;
-  renderOption?: (option: SelectProps.SelectOptionItem | MultiselectProps.MultiselectOptionItem) => ReactNode;
+  renderOption?: SelectProps.SelectOptionItemRenderer | MultiselectProps.MultiselectOptionItemRenderer;
 }
 
 export const renderOptions = ({