From 4deadfdddfa1db2bc1dc8cd45829f20546f06018 Mon Sep 17 00:00:00 2001
From: Eileen Guo <eileen.m.guo@gmail.com>
Date: Wed, 24 Jan 2024 15:14:38 +0100
Subject: [PATCH] updating NavHeaderSelect

---
 .../Common/Layout/partials/Header/Header.tsx  | 24 +++--
 .../src/components/ListBox/ListBox.css.ts     |  1 -
 .../src/components/NavHeader/NavHeader.css.ts | 88 +------------------
 .../NavHeader/NavHeader.stories.tsx           | 17 ++--
 .../components/NavHeader/NavHeaderButton.tsx  |  4 +-
 .../NavHeader/NavHeaderButtonLink.tsx         |  4 +-
 .../components/NavHeader/NavHeaderSelect.tsx  | 62 +++----------
 7 files changed, 36 insertions(+), 164 deletions(-)

diff --git a/packages/apps/tools/src/components/Common/Layout/partials/Header/Header.tsx b/packages/apps/tools/src/components/Common/Layout/partials/Header/Header.tsx
index 03b39dedd6d..68593d21274 100644
--- a/packages/apps/tools/src/components/Common/Layout/partials/Header/Header.tsx
+++ b/packages/apps/tools/src/components/Common/Layout/partials/Header/Header.tsx
@@ -10,6 +10,7 @@ import {
   NavHeaderLink,
   NavHeaderLinkList,
   NavHeaderSelect,
+  SelectItem,
   SystemIcon,
 } from '@kadena/react-ui';
 import { atoms } from '@kadena/react-ui/styles';
@@ -38,9 +39,6 @@ const Header: FC<IHeaderProps> = () => {
 
   const currentTheme = theme === 'system' ? systemTheme : theme;
 
-  const handleOnChange = (e: React.FormEvent<HTMLSelectElement>): void =>
-    setSelectedNetwork((e.target as HTMLSelectElement).value as Network);
-
   const toggleTheme = (): void => {
     const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
     setTheme(newTheme);
@@ -91,20 +89,18 @@ const Header: FC<IHeaderProps> = () => {
         className={atoms({ marginInlineEnd: 'sm' })}
       />
       <NavHeaderSelect
-        id="network-select"
-        ariaLabel={t('Select Network')}
-        value={selectedNetwork as string}
-        onChange={(e) => handleOnChange(e)}
-        icon="Earth"
+        aria-label={t('Select Network')}
+        selectedKey={selectedNetwork as string}
+        onSelectionChange={(value: string) =>
+          setSelectedNetwork(value as Network)
+        }
+        startIcon={<SystemIcon.Earth />}
+        disabledKeys={['mainnet01']}
       >
         {networksData.map((network: INetworkData) => (
-          <option
-            key={network.networkId}
-            value={network.networkId}
-            disabled={network.networkId === 'mainnet01'}
-          >
+          <SelectItem key={network.networkId} textValue={network.networkId}>
             {network.label}
-          </option>
+          </SelectItem>
         ))}
       </NavHeaderSelect>
       {/* <div className={walletConnectWrapperStyle}>
diff --git a/packages/libs/react-ui/src/components/ListBox/ListBox.css.ts b/packages/libs/react-ui/src/components/ListBox/ListBox.css.ts
index ffdab069939..66f74ff0651 100644
--- a/packages/libs/react-ui/src/components/ListBox/ListBox.css.ts
+++ b/packages/libs/react-ui/src/components/ListBox/ListBox.css.ts
@@ -68,7 +68,6 @@ export const listItemClass = style([
       },
       '&[data-disabled="true"]': {
         color: token('color.text.base.@disabled'),
-        backgroundColor: token('color.background.base.@disabled'),
         cursor: 'not-allowed',
       },
       '&[data-focused="true"]': {
diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts
index cd61df4afb9..7be01ff3b35 100644
--- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts
+++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.css.ts
@@ -1,7 +1,7 @@
-import { iconFill } from '@components/Icon/IconWrapper.css';
-import { token } from '@theme/themeUtils';
 import { style } from '@vanilla-extract/css';
-import { atoms, tokens, vars } from '../../styles';
+import { atoms, tokens } from '../../styles';
+import { token } from '../../styles/themeUtils';
+import { iconFill } from '../Icon/IconWrapper.css';
 
 export const containerClass = style([
   atoms({
@@ -127,88 +127,8 @@ export const iconButtonClass = style([
   },
 ]);
 
-// TODO review
 export const selectContainerClass = style([
-  atoms({
-    alignItems: 'stretch',
-    display: 'flex',
-    lineHeight: 'lg',
-    overflow: 'hidden',
-    position: 'relative',
-    flexShrink: 0,
-  }),
-  {
-    paddingLeft: vars.sizes.$4,
-    paddingRight: vars.sizes.$2,
-    backgroundColor: vars.colors.$gray90,
-    borderRadius: '1px',
-    border: `1px solid ${vars.colors.$gray40}`,
-    selectors: {
-      '&:active': {
-        color: vars.colors.$gray40,
-      },
-    },
-  },
-]);
-
-export const selectContainerClassDisabled = style([
-  {
-    backgroundColor: vars.colors.$gray20,
-    color: vars.colors.$gray100,
-  },
-]);
-
-export const selectIconClass = style([
-  atoms({
-    alignItems: 'center',
-    display: 'flex',
-  }),
-  {
-    color: vars.colors.$gray40,
-    selectors: {
-      '&:active': {
-        color: vars.colors.$gray40,
-      },
-    },
-  },
-]);
-
-export const selectClass = style([
-  atoms({
-    background: 'none',
-    border: 'none',
-    flexGrow: 1,
-    outline: 'none',
-    fontSize: 'base',
-  }),
   {
-    backgroundColor: 'inherit',
-    color: vars.colors.$gray40,
-    appearance: 'none',
-    padding: `${vars.sizes.$2} 0`,
-    paddingRight: vars.sizes.$8,
-    paddingLeft: vars.sizes.$3,
-  },
-]);
-
-export const chevronIconClass = style([
-  atoms({
-    position: 'absolute',
-    display: 'inline-flex',
-    alignItems: 'center',
-    top: 0,
-    bottom: 0,
-  }),
-  {
-    right: vars.sizes.$1,
-    color: vars.colors.$gray40,
-    marginRight: vars.sizes.$2,
-    pointerEvents: 'none',
-    zIndex: 10,
-    selectors: {
-      '&:active': {
-        color: vars.colors.$gray40,
-      },
-    },
+    border: `1px solid ${token('color.neutral.n60')}`,
   },
 ]);
diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx
index e80e10c61b2..49dd8dbd1e6 100644
--- a/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx
+++ b/packages/libs/react-ui/src/components/NavHeader/NavHeader.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import React, { useState } from 'react';
 import { atoms } from '../../styles/atoms.css';
+import { Select, SelectItem } from '../Form/Select';
 import { SystemIcon } from '../Icon';
 import { KadenaLogo } from '../Logo';
 import {
@@ -114,19 +115,15 @@ export const Dynamic: IStory = {
           className={atoms({ marginInlineEnd: 'sm' })}
         />
         <NavHeaderSelect
-          id="network-select"
-          ariaLabel="Select Network"
-          value={value}
-          onChange={(e) => {
-            console.log('clicked on', e.target.value);
-            setValue(e.target.value);
-          }}
-          icon="Earth"
+          aria-label="Select Network"
+          selectedKey={value}
+          onSelectionChange={(value) => setValue(value)}
+          startIcon={<SystemIcon.Earth />}
         >
           {sampleNetworkItems.map((network) => (
-            <option key={network} value={network}>
+            <SelectItem key={network} textValue={network}>
               {network}
-            </option>
+            </SelectItem>
           ))}
         </NavHeaderSelect>
       </NavHeader>
diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderButton.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderButton.tsx
index b61a56760c8..83dc9ee2935 100644
--- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderButton.tsx
+++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderButton.tsx
@@ -1,8 +1,8 @@
-import type { IButtonProps } from '@components/Button';
-import { Button } from '@components/Button';
 import cn from 'classnames';
 import type { FC } from 'react';
 import React from 'react';
+import type { IButtonProps } from '../Button';
+import { Button } from '../Button';
 import { iconButtonClass } from './NavHeader.css';
 
 export interface INavHeaderButtonProps extends IButtonProps {}
diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderButtonLink.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderButtonLink.tsx
index 5b5479a0c59..99f28afecb2 100644
--- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderButtonLink.tsx
+++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderButtonLink.tsx
@@ -1,8 +1,8 @@
-import type { ILinkProps } from '@components/Link';
-import { Link } from '@components/Link';
 import cn from 'classnames';
 import type { FC } from 'react';
 import React from 'react';
+import type { ILinkProps } from '../Link';
+import { Link } from '../Link';
 import { iconButtonClass } from './NavHeader.css';
 
 export interface INavHeaderButtonLinkProps extends ILinkProps {}
diff --git a/packages/libs/react-ui/src/components/NavHeader/NavHeaderSelect.tsx b/packages/libs/react-ui/src/components/NavHeader/NavHeaderSelect.tsx
index 85be2d6af5f..1207aa30aa8 100644
--- a/packages/libs/react-ui/src/components/NavHeader/NavHeaderSelect.tsx
+++ b/packages/libs/react-ui/src/components/NavHeader/NavHeaderSelect.tsx
@@ -1,63 +1,23 @@
 import classNames from 'classnames';
 import type { FC } from 'react';
 import React, { forwardRef } from 'react';
-import { SystemIcon } from '../Icon';
-import {
-  chevronIconClass,
-  selectClass,
-  selectContainerClass,
-  selectContainerClassDisabled,
-  selectIconClass,
-} from './NavHeader.css';
+import type { ISelectProps } from '../Form';
+import { Select as BaseSelect } from '../Form';
+import { selectContainerClass } from './NavHeader.css';
 
-export interface INavHeaderSelectProps
-  extends Omit<
-    React.HTMLAttributes<HTMLSelectElement>,
-    'aria-label' | 'as' | 'className' | 'children' | 'id'
-  > {
-  ariaLabel: string;
-  children: React.ReactNode;
-  disabled?: boolean;
-  icon?: keyof typeof SystemIcon;
-  ref?: React.ForwardedRef<HTMLSelectElement>;
-  onChange?: React.ChangeEventHandler<HTMLSelectElement>;
-  id: string;
-  value?: string;
-}
+export interface INavHeaderSelectProps<T extends object = any>
+  extends ISelectProps<T> {}
 
 export const NavHeaderSelect: FC<INavHeaderSelectProps> = forwardRef<
   HTMLSelectElement,
   INavHeaderSelectProps
->(function Select(
-  { ariaLabel, children, disabled = false, icon, ...rest },
-  ref,
-) {
-  const Icon = icon && SystemIcon[icon];
-  const ChevronDown = SystemIcon.ChevronDown;
-
+>(function Select({ children, className, ...props }, ref) {
   return (
-    <div
-      className={classNames(selectContainerClass, {
-        [selectContainerClassDisabled]: disabled,
-      })}
+    <BaseSelect
+      {...props}
+      className={classNames(className, selectContainerClass)}
     >
-      {Icon && (
-        <span className={selectIconClass}>
-          <Icon size="md" />
-        </span>
-      )}
-      <select
-        aria-label={ariaLabel}
-        className={selectClass}
-        disabled={Boolean(disabled)}
-        ref={ref}
-        {...rest}
-      >
-        {children}
-      </select>
-      <span className={chevronIconClass}>
-        <ChevronDown size="md" />
-      </span>
-    </div>
+      {children}
+    </BaseSelect>
   );
 });