Review Fixes of different PRs merged (#565)

gsoft-inc · Jan 9, 2025 · d29ca78 · d29ca78
2 parents 672cb06 + cfa45ea
commit d29ca78
Show file tree

Hide file tree

Showing 45 changed files with 227 additions and 229 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -6,7 +6,7 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["basic"],
+  "ignore": ["basic", "docs"],
   "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
     "onlyUpdatePeerDependentsWhenOutOfRange": true
   }

diff --git a/.changeset/cuddly-deers-reply.md b/.changeset/cuddly-deers-reply.md
@@ -0,0 +1,9 @@
+---
+"@hopper-ui/components": patch
+---
+
+- **Improvement:** Simplified the `inputRef` type to enhance usability across multiple components.
+- **Bug Fixes:**
+  - Resolved an issue preventing the addition of a custom `renderEmptyState` on a `Listbox` within a `ComboBox`.
+  - Fixed a console error that occurred when using custom values inside the `Select` component.
+  - Addressed a console error that appeared with custom popovers.
diff --git a/apps/docs/app/ui/components/linkList/LinkList.tsx b/apps/docs/app/ui/components/linkList/LinkList.tsx
@@ -45,7 +45,7 @@ export default function LinkList({ links, className }: LinkListProps) {
                         target="_blank"
                         key={`link-list-${key.toString()}`}
                     >{link.label}
-                        <Icon slot="icon"
+                        <Icon
                             src={icon as IconProps["src"]}
                         />
                     </LinkButton>

diff --git a/apps/docs/app/ui/icons/switcher/Switcher.tsx b/apps/docs/app/ui/icons/switcher/Switcher.tsx
@@ -1,12 +1,11 @@
 "use client";
 
 import { IconTable } from "@/app/ui/icons/iconTable/IconTable.tsx";
+import { ThemeContext } from "@/context/theme/ThemeProvider";
+import { HopperProvider, SearchField } from "@hopper-ui/components";
 import { SparklesIcon, SparklesRichIcon, iconNames, richIconNames } from "@hopper-ui/icons";
 import { memo, useContext, useState, type ReactNode } from "react";
 import { Radio, RadioGroup, type RadioProps } from "react-aria-components";
-
-import { ThemeContext } from "@/context/theme/ThemeProvider";
-import { HopperProvider, TextField } from "@hopper-ui/components";
 import "./switcher.css";
 
 interface SwitcherProps {
@@ -37,7 +36,7 @@ const Switcher = memo(({ type, iconType = "icon" }: SwitcherProps) => {
                 {iconType === "richIcon" && <SwitcherChoice value="xl" preview={<SparklesRichIcon size="xl" />} />}
             </RadioGroup>
             <HopperProvider colorScheme={colorMode}>
-                <TextField placeholder="Search" value={filter} onChange={onTextFieldChange} />
+                <SearchField aria-label="Filter icons" placeholder="Search" value={filter} onChange={onTextFieldChange} />
             </HopperProvider>
             <IconTable type={type} size={selectedSize} filter={filter} items={iconList} />
         </div>

diff --git a/apps/docs/app/ui/layout/header/Header.tsx b/apps/docs/app/ui/layout/header/Header.tsx
@@ -65,7 +65,7 @@ const ProductMenuAndBrand = () => {
             <ToggleTrigger>
                 <PopoverTrigger>
                     <ToggleButton aria-label="Open other libraries menu">
-                        <Icon slot="icon" src={ProductMenuIcon} />
+                        <Icon src={ProductMenuIcon} />
                     </ToggleButton>
                     <Popover
                         className="hd-product__menu"

diff --git a/apps/docs/app/ui/layout/sectionPopover/sectionLinkArrow.tsx b/apps/docs/app/ui/layout/sectionPopover/sectionLinkArrow.tsx
@@ -6,7 +6,7 @@ import { UseArrowContext } from "./sectionLinkArrowContext";
 import "./sectionLinkArrow.css";
 
 interface SectionLinkArrowProps {
-    slot: string;
+    slot?: string;
     className?: string;
     src: ElementType<Omit<SVGProps<SVGSVGElement>, "ref"> & RefAttributes<SVGSVGElement>>;
 }

diff --git a/apps/docs/app/ui/layout/sectionPopover/sectionPopover.tsx b/apps/docs/app/ui/layout/sectionPopover/sectionPopover.tsx
@@ -70,7 +70,7 @@ const SectionPopover = ({ links }: PropsWithoutRef<SectionPopoverProps>) => {
                     <PopoverTrigger>
                         <Button className="hd-section-popover__button">
                             On this page
-                            <SectionLinkArrow slot="icon" src={ChevronIcon} />
+                            <SectionLinkArrow src={ChevronIcon} />
                         </Button>
                         <Popover
                             aria-label="On this page"

diff --git a/apps/docs/app/ui/layout/sidebar/Sidebar.tsx b/apps/docs/app/ui/layout/sidebar/Sidebar.tsx
@@ -1,19 +1,15 @@
 "use client";
 
+import type { Section } from "@/app/lib/getPageLinks";
+import Overlay from "@/components/overlay/Overlay";
 import { FeatureFlagContext } from "@/context/feature/FeatureFlagProvider.tsx";
+import { useSidebar } from "@/context/sidebar/SidebarProvider";
+import { ThemeContext } from "@/context/theme/ThemeProvider";
+import { HopperProvider, SearchField } from "@hopper-ui/components";
 import clsx from "clsx";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useContext, useEffect, useRef, useState } from "react";
-
-import { useSidebar } from "@/context/sidebar/SidebarProvider";
-
-import Overlay from "@/components/overlay/Overlay";
-
-import type { Section } from "@/app/lib/getPageLinks";
-
-import { ThemeContext } from "@/context/theme/ThemeProvider";
-import { HopperProvider, TextField } from "@hopper-ui/components";
 import "./sidebar.css";
 
 export interface SidebarProps {
@@ -122,7 +118,7 @@ const Sidebar = ({ links }: SidebarProps) => {
                 <div className="hd-sidebar__wrapper">
                     <div className="hd-sidebar__container">
                         <HopperProvider colorScheme={colorMode}>
-                            <TextField placeholder="Search" value={filter} onChange={onTextFieldChange} />
+                            <SearchField aria-label="Filter sections" placeholder="Search" value={filter} onChange={onTextFieldChange} />
                         </HopperProvider>
                         {linkItems}
                     </div>

diff --git a/apps/docs/components/button/Button.tsx b/apps/docs/components/button/Button.tsx
@@ -2,7 +2,7 @@
 
 import { IconContext } from "@/components/icon/IconContext.ts";
 import clsx from "clsx";
-import { Provider, Button as RACButton, type ButtonProps as RACButtonProps } from "react-aria-components";
+import { DEFAULT_SLOT, Provider, Button as RACButton, type ButtonProps as RACButtonProps } from "react-aria-components";
 import "./button.css";
 
 export interface ButtonProps extends RACButtonProps {
@@ -31,7 +31,7 @@ const Button = ({
         <Provider values={[
             [IconContext, {
                 slots: {
-                    icon: {
+                    [DEFAULT_SLOT]: {
                         className: "hd-btn__icon"
                     },
                     "end-icon": {

diff --git a/apps/docs/components/button/LinkButton.stories.tsx b/apps/docs/components/button/LinkButton.stories.tsx
@@ -55,15 +55,15 @@ export const AsLink: Story = {
             </LinkButton>
             <LinkButton variant="ghost" size="sm" {...args} >
                 View source
-                <Icon src={GithubIcon} slot="icon" />
+                <Icon src={GithubIcon} />
             </LinkButton>
             <LinkButton variant="ghost" size="sm" {...args} >
                 View on npm
-                <Icon src={NpmIcon} slot="icon" />
+                <Icon src={NpmIcon} />
             </LinkButton>
             <LinkButton variant="ghost" size="sm" {...args} >
                 Report an issue
-                <Icon src={ExternalLinkIcon} slot="icon" />
+                <Icon src={ExternalLinkIcon} />
             </LinkButton>
         </div>
     )

diff --git a/apps/docs/components/button/LinkButton.tsx b/apps/docs/components/button/LinkButton.tsx
@@ -1,7 +1,7 @@
 "use client";
 import { IconContext } from "@/components/icon/IconContext.ts";
 import clsx from "clsx";
-import { Provider, Link as RACLink, type LinkProps as RACLinkProps } from "react-aria-components";
+import { DEFAULT_SLOT, Provider, Link as RACLink, type LinkProps as RACLinkProps } from "react-aria-components";
 import "./button.css";
 
 export interface LinkButtonProps extends RACLinkProps {
@@ -30,7 +30,7 @@ const LinkButton = ({
         <Provider values={[
             [IconContext, {
                 slots: {
-                    icon: {
+                    [DEFAULT_SLOT]: {
                         className: "hd-btn__icon"
                     },
                     "end-icon": {

diff --git a/apps/docs/components/icon/Icon.tsx b/apps/docs/components/icon/Icon.tsx
@@ -11,7 +11,7 @@ export interface IconProps extends SlotProps {
 }
 
 const Icon = (props: IconProps) => {
-    [props] = useContextProps({ ...props, slot: props.slot || "hd-icon" }, null, IconContext);
+    [props] = useContextProps(props, null, IconContext);
     const { src, ...otherProps } = props;
 
     const Component = src;

diff --git a/apps/docs/components/link/Link.tsx b/apps/docs/components/link/Link.tsx
@@ -1,10 +1,11 @@
+import { IconContext as HopperIconContext } from "@hopper-ui/icons";
+import clsx from "clsx";
 import {
+    DEFAULT_SLOT,
     Provider,
     Link as RACLink,
     type LinkProps as RACLinkProps
 } from "react-aria-components";
-import clsx from "clsx";
-import { IconContext as HopperIconContext } from "@hopper-ui/icons";
 import "./link.css";
 
 export interface LinkProps extends RACLinkProps {
@@ -20,7 +21,7 @@ const Link = ({ href, children, underline = false, ...rest }: LinkProps) => {
         <Provider values={[
             [HopperIconContext, {
                 slots: {
-                    icon: {
+                    [DEFAULT_SLOT]: {
                         className: "hd-link__icon",
                         size: "sm"
                     },

diff --git a/apps/docs/content/components/pickers/ComboBox.mdx b/apps/docs/content/components/pickers/ComboBox.mdx
@@ -101,7 +101,7 @@ A combo box can overridde the default [useFilter](https://react-spectrum.adobe.c
 
 ### Allow Empty Collection
 
-A combo box can be rendered with an empty collection.
+A combo box can be rendered with an empty collection. If you want the popover to open with a custom message, you can use the `renderEmptyState` prop within the `listBoxProps` prop.
 
 <Example src="ComboBox/docs/allowEmptyCollection" />
 

diff --git a/packages/components/src/ComboBox/docs/allowEmptyCollection.tsx b/packages/components/src/ComboBox/docs/allowEmptyCollection.tsx
@@ -5,6 +5,9 @@ export default function Example() {
         <ComboBox
             allowsEmptyCollection
             label="Roles"
+            listBoxProps={{
+                renderEmptyState: () => "No roles found"
+            }}
         >
             {[]}
         </ComboBox>

diff --git a/packages/components/src/ComboBox/src/ComboBox.tsx b/packages/components/src/ComboBox/src/ComboBox.tsx
@@ -63,7 +63,7 @@ export interface ComboBoxProps<T extends object> extends StyledComponentProps<Om
     /**
      * A ref for the HTML input element.
      */
-    inputRef?: MutableRefObject<HTMLInputElement>;
+    inputRef?: MutableRefObject<HTMLInputElement | null>;
     /**
      * If `true`, the select will take all available width.
      * @default false

diff --git a/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx b/packages/components/src/ComboBox/tests/chromatic/ComboBox.stories.tsx
@@ -265,11 +265,11 @@ export const SelectedItemWithIcon = {
                     <ComboBox {...args} defaultSelectedKey="raccoon">
                         <ComboBoxItem id="dog" textValue="Dog">
                             <SparklesIcon />
-                            <Text slot="label">Dog</Text>
+                            <Text>Dog</Text>
                         </ComboBoxItem>
                         <ComboBoxItem id="raccoon" textValue="Raccoon">
                             <SparklesIcon />
-                            <Text slot="label">Raccoon</Text>
+                            <Text>Raccoon</Text>
                         </ComboBoxItem>
                         <ComboBoxItem id="frog">Frog</ComboBoxItem>
                     </ComboBox>
@@ -279,11 +279,11 @@ export const SelectedItemWithIcon = {
                     <ComboBox {...args} selectedKey="raccoon">
                         <ComboBoxItem id="dog" textValue="Dog">
                             <SparklesIcon />
-                            <Text slot="label">Dog</Text>
+                            <Text>Dog</Text>
                         </ComboBoxItem>
                         <ComboBoxItem id="raccoon" textValue="Raccoon">
                             <SparklesIcon />
-                            <Text slot="label">Raccoon</Text>
+                            <Text>Raccoon</Text>
                         </ComboBoxItem>
                         <ComboBoxItem id="frog">Frog</ComboBoxItem>
                     </ComboBox>
@@ -293,23 +293,23 @@ export const SelectedItemWithIcon = {
             <ComboBox {...args} defaultSelectedKey="raccoon" isDisabled>
                 <ComboBoxItem id="dog" textValue="Dog">
                     <SparklesIcon />
-                    <Text slot="label">Dog</Text>
+                    <Text>Dog</Text>
                 </ComboBoxItem>
                 <ComboBoxItem id="raccoon" textValue="Raccoon">
                     <SparklesIcon />
-                    <Text slot="label">Raccoon</Text>
+                    <Text>Raccoon</Text>
                 </ComboBoxItem>
                 <ComboBoxItem id="frog">Frog</ComboBoxItem>
             </ComboBox>
             <h1>Fluid</h1>
             <ComboBox {...args} defaultSelectedKey="raccoon" isFluid>
                 <ComboBoxItem id="dog" textValue="Dog">
                     <SparklesIcon />
-                    <Text slot="label">Dog</Text>
+                    <Text>Dog</Text>
                 </ComboBoxItem>
                 <ComboBoxItem id="raccoon" textValue="Raccoon">
                     <SparklesIcon />
-                    <Text slot="label">Raccoon</Text>
+                    <Text>Raccoon</Text>
                 </ComboBoxItem>
                 <ComboBoxItem id="frog">Frog</ComboBoxItem>
             </ComboBox>
@@ -318,11 +318,11 @@ export const SelectedItemWithIcon = {
                 <ComboBox {...args} defaultSelectedKey="raccoon" isFluid>
                     <ComboBoxItem id="dog" textValue="Dog">
                         <SparklesIcon />
-                        <Text slot="label">Dog</Text>
+                        <Text>Dog</Text>
                     </ComboBoxItem>
                     <ComboBoxItem id="raccoon" textValue="Raccoon">
                         <SparklesIcon />
-                        <Text slot="label">Raccoon</Text>
+                        <Text>Raccoon</Text>
                     </ComboBoxItem>
                     <ComboBoxItem id="frog">Frog</ComboBoxItem>
                 </ComboBox>
@@ -340,11 +340,11 @@ export const SelectedItemWithEndIcon = {
                     <ComboBox {...args} defaultSelectedKey="raccoon">
                         <ComboBoxItem id="dog" textValue="Dog">
                             <SparklesIcon slot="end-icon" />
-                            <Text slot="label">Dog</Text>
+                            <Text>Dog</Text>
                         </ComboBoxItem>
                         <ComboBoxItem id="raccoon" textValue="Raccoon">
                             <SparklesIcon slot="end-icon" />
-                            <Text slot="label">Raccoon</Text>
+                            <Text>Raccoon</Text>
                         </ComboBoxItem>
                         <ComboBoxItem id="frog">Frog</ComboBoxItem>
                     </ComboBox>
@@ -354,11 +354,11 @@ export const SelectedItemWithEndIcon = {
                     <ComboBox {...args} selectedKey="raccoon">
                         <ComboBoxItem id="dog" textValue="Dog">
                             <SparklesIcon slot="end-icon" />
-                            <Text slot="label">Dog</Text>
+                            <Text>Dog</Text>
                         </ComboBoxItem>
                         <ComboBoxItem id="raccoon" textValue="Raccoon">
                             <SparklesIcon slot="end-icon" />
-                            <Text slot="label">Raccoon</Text>
+                            <Text>Raccoon</Text>
                         </ComboBoxItem>
                         <ComboBoxItem id="frog">Frog</ComboBoxItem>
                     </ComboBox>
@@ -368,23 +368,23 @@ export const SelectedItemWithEndIcon = {
             <ComboBox {...args} defaultSelectedKey="raccoon" isDisabled>
                 <ComboBoxItem id="dog" textValue="Dog">
                     <SparklesIcon slot="end-icon" />
-                    <Text slot="label">Dog</Text>
+                    <Text>Dog</Text>
                 </ComboBoxItem>
                 <ComboBoxItem id="raccoon" textValue="Raccoon">
                     <SparklesIcon slot="end-icon" />
-                    <Text slot="label">Raccoon</Text>
+                    <Text>Raccoon</Text>
                 </ComboBoxItem>
                 <ComboBoxItem id="frog">Frog</ComboBoxItem>
             </ComboBox>
             <h1>Fluid</h1>
             <ComboBox {...args} defaultSelectedKey="raccoon" isFluid>
                 <ComboBoxItem id="dog" textValue="Dog">
                     <SparklesIcon slot="end-icon" />
-                    <Text slot="label">Dog</Text>
+                    <Text>Dog</Text>
                 </ComboBoxItem>
                 <ComboBoxItem id="raccoon" textValue="Raccoon">
                     <SparklesIcon slot="end-icon" />
-                    <Text slot="label">Raccoon</Text>
+                    <Text>Raccoon</Text>
                 </ComboBoxItem>
                 <ComboBoxItem id="frog">Frog</ComboBoxItem>
             </ComboBox>
@@ -393,11 +393,11 @@ export const SelectedItemWithEndIcon = {
                 <ComboBox {...args} defaultSelectedKey="raccoon" isFluid>
                     <ComboBoxItem id="dog" textValue="Dog">
                         <SparklesIcon slot="end-icon" />
-                        <Text slot="label">Dog</Text>
+                        <Text>Dog</Text>
                     </ComboBoxItem>
                     <ComboBoxItem id="raccoon" textValue="Raccoon">
                         <SparklesIcon slot="end-icon" />
-                        <Text slot="label">Raccoon</Text>
+                        <Text>Raccoon</Text>
                     </ComboBoxItem>
                     <ComboBoxItem id="frog">Frog</ComboBoxItem>
                 </ComboBox>
@@ -410,11 +410,11 @@ export const ComboBoxItemWithDescription = {
     render: args => (
         <ComboBox {...args}>
             <ComboBoxItem id="dog" textValue="Dog">
-                <Text slot="label">Dog</Text>
+                <Text>Dog</Text>
                 <Text slot="description">I come in many different breeds</Text>
             </ComboBoxItem>
             <ComboBoxItem id="raccoon" textValue="Raccoon">
-                <Text slot="label">Raccoon</Text>
+                <Text>Raccoon</Text>
                 <Text slot="description">I am nocturnal</Text>
             </ComboBoxItem>
             <ComboBoxItem id="frog">Frog</ComboBoxItem>