Update options display

Add menuselect starting height, as well as remove extra code for option
elements.

packages/web-kitchensink-reactnext/src/categories/option/react/components/DropdownSelect/index.tsx

@@ -1,8 +1,6 @@
 import * as React from 'react';
 import * as TextControlBase from '@tesseract-design/web-base-textcontrol';
-import * as SelectControlBase from '@tesseract-design/web-base-selectcontrol';
 import clsx from 'clsx';
-import {RenderOptions} from '@/categories/option/react';
 
 export type DropdownSelectDerivedElement = HTMLSelectElement;
 
@@ -43,7 +41,6 @@ export interface DropdownSelectProps extends Omit<React.HTMLProps<DropdownSelect
    * Is the label hidden?
    */
   hiddenLabel?: boolean,
-  options?: SelectControlBase.SelectOption[],
 }
 
 /**
@@ -64,14 +61,12 @@ export const DropdownSelect = React.forwardRef<DropdownSelectDerivedElement, Dro
       variant = 'default' as const,
       hiddenLabel = false,
       className,
-      options = [],
       children,
       ...etcProps
     }: DropdownSelectProps,
     ref,
   ) => {
     const labelId = React.useId();
-    console.log(children);
 
     return (
       <div

packages/web-kitchensink-reactnext/src/categories/option/react/components/MenuSelect/index.tsx

@@ -37,6 +37,7 @@ export interface MenuSelectProps extends Omit<React.HTMLProps<MenuSelectDerivedE
    * Is the label hidden?
    */
   hiddenLabel?: boolean,
+  startingHeight?: number | string,
 }
 
 /**
@@ -56,6 +57,7 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
       variant = 'default' as const,
       hiddenLabel = false,
       className,
+      startingHeight = '15rem',
       ...etcProps
     }: MenuSelectProps,
     ref,
@@ -81,10 +83,10 @@ export const MenuSelect = React.forwardRef<MenuSelectDerivedElement, MenuSelectP
           data-testid="input"
           size={2}
           style={{
-            height: 0,
+            height: startingHeight,
           }}
           className={clsx(
-            'bg-negative rounded-inherit w-full peer block',
+            'bg-negative rounded-inherit w-full peer block overflow-auto',
             'focus:outline-0',
             'disabled:opacity-50 disabled:cursor-not-allowed',
             {

packages/web-kitchensink-reactnext/src/categories/option/react/components/RenderOptions/index.tsx

@@ -1,76 +0,0 @@
-import * as SelectControlBase from '@/base/selectcontrol';
-import * as React from 'react';
-
-export interface RenderOptionsProps {
-  options: SelectControlBase.SelectOption[],
-  optionComponent?: React.ElementType,
-  optgroupComponent?: React.ElementType,
-  level?: number,
-}
-
-export const RenderOptions: React.FC<RenderOptionsProps> = ({
-  options,
-  optionComponent: Option = 'option',
-  optgroupComponent: Optgroup = 'optgroup',
-  level = 0,
-}: RenderOptionsProps) => (
-  options.map((o) => {
-    if (typeof o === 'number' || typeof o === 'string') {
-      return (
-        <Option
-          key={`${o}:${o}`}
-          value={o}
-        />
-      );
-    }
-
-    if (typeof o.value !== 'undefined') {
-      return (
-        <Option
-          key={`${o.label}:${o.value.toString()}`}
-          value={o.value}
-          label={o.label}
-        >
-          {o.label}
-        </Option>
-      );
-    }
-
-    if (typeof o.children !== 'undefined') {
-      if (level === 0) {
-        return (
-          <Optgroup
-            key={o.label}
-            label={o.label}
-          >
-            <RenderOptions
-              options={o.children}
-              optionComponent={Option}
-              optgroupComponent={Optgroup}
-              level={level + 1}
-            />
-          </Optgroup>
-        );
-      }
-      return (
-        <React.Fragment
-          key={o.label}
-        >
-          <Option
-            disabled
-          >
-            {o.label}
-          </Option>
-          <RenderOptions
-            options={o.children}
-            optionComponent={Option}
-            optgroupComponent={Optgroup}
-            level={level + 1}
-          />
-        </React.Fragment>
-      );
-    }
-
-    return null;
-  })
-);

packages/web-kitchensink-reactnext/src/categories/option/react/index.ts

@@ -3,7 +3,6 @@ export * from './components/DropdownSelect';
 export * from './components/MenuSelect';
 export * from './components/RadioButton';
 export * from './components/RadioTickBox';
-export * from './components/RenderOptions';
 export * from './components/TagInput';
 export * from './components/ToggleButton';
 export * from './components/ToggleSwitch';