Merge pull request #51 from buildo/fixes-3

More fixes for HM integration

Author: gabro

src/List/createInternalList.tsx

@@ -1,6 +1,6 @@
 import { Inset, Stack } from "../internal";
 import { Children } from "../";
-import { ListConfig, ListProps } from "./createList";
+import { ListConfig, ListProps } from "./createListComponents";
 
 type Props = Omit<ListProps, "items" | "size"> & {
   children: Children;

src/List/createList.tsx src/List/createListComponents.tsxsrc/List/createList.tsx renamed to src/List/createListComponents.tsx

@@ -16,7 +16,7 @@ export type ListConfig = {
   item: ListItemConfig;
 };
 
-export function createList(
+export function createListComponents(
   config: ListConfig = {
     paddingY: 8,
     item: {
@@ -41,15 +41,17 @@ export function createList(
 ) {
   const InternalList = createInternalList(config);
   const ListItem = createListItem(config.item);
-  return function List({ items, ...props }: Props) {
+  function List({ items, ...props }: Props) {
     return (
       <InternalList {...props}>
         {items.map((liProps) => (
           <ListItem key={liProps.label} {...liProps} size={props.size} />
         ))}
       </InternalList>
     );
-  };
+  }
+
+  return { List, ListItem };
 }
 
 export type { Props as ListProps };

src/List/createListItem.tsx

@@ -5,7 +5,7 @@ import { Box, Columns, Column, Inset, Stack, BentoSprinkles } from "../internal"
 import { IconProps } from "../Icons/IconProps";
 import { IllustrationProps } from "../Illustrations/IllustrationProps";
 import { listItemRecipe } from "./ListItem.css";
-import { ListSize } from "./createList";
+import { ListSize } from "./createListComponents";
 
 type Kind =
   | {
@@ -47,7 +47,7 @@ export type Props = Kind &
     disabled?: boolean;
     size: ListSize;
     isFocused?: boolean;
-    ignoreTabIndex: boolean;
+    ignoreTabIndex?: boolean;
   } & (
     | {
         onPress?: () => void;

src/SelectField/components.tsx

@@ -165,7 +165,7 @@ export function createComponents(inputConfig: InputConfig, dropdownConfig: Dropd
       <defaultComponents.Option {...props}>
         <ListItem
           {...props.data}
-          size={props.selectProps.size}
+          size={props.selectProps.menuSize ?? "medium"}
           onPress={() => props.selectOption(props.data)}
           trailingIcon={props.isSelected ? IconCheck : undefined}
           isFocused={props.isFocused}

src/SelectField/createSelectField.tsx

@@ -39,7 +39,7 @@ export type { Props as SelectFieldProps };
 
 declare module "react-select/dist/declarations/src/Select" {
   export interface Props<Option, IsMulti extends boolean, Group extends GroupBase<Option>> {
-    size: ListSize;
+    menuSize?: ListSize;
     validationState: "valid" | "invalid";
     multiValueMessage?: (numberOfSelectedOptions: number) => LocalizedString;
   }
@@ -162,7 +162,7 @@ export function createSelectField(
           }
           closeMenuOnSelect={!isMulti}
           hideSelectedOptions={false}
-          size={size}
+          menuSize={size}
         />
       </Field>
     );

src/index.ts

@@ -23,8 +23,9 @@ export * from "./Illustrations/svgIllustrationProps";
 export * from "./InlineLoader/InlineLoader";
 export * from "./Layout/createLayoutComponents";
 export * from "./Link/createLink";
-export * from "./List/createList";
+export * from "./List/createListComponents";
 export * from "./Modal/createModal";
+export * from "./Modal/useModalContext";
 export * from "./NumberInput/createNumberInput";
 export * from "./Placeholder/Placeholder";
 export * from "./SearchBar/createSearchBar";

stories/Components/SelectField.stories.tsx

@@ -13,7 +13,7 @@ function Illustration(props: IllustrationProps) {
 const { defaultExport, createControlledStory } = createComponentStories({
   component: SelectField,
   args: {
-    size: "large",
+    menuSize: "large",
     name: "color",
     label: formatMessage("What's your favorite color?"),
     placeholder: formatMessage("Select a color"),
@@ -60,7 +60,7 @@ export default defaultExport;
 
 export const LargeMenu = createControlledStory(undefined, {});
 
-export const MediumMenu = createControlledStory(undefined, { size: "medium" });
+export const MediumMenu = createControlledStory(undefined, { menuSize: "medium" });
 
 export const Disabled = createControlledStory(undefined, {
   disabled: true,

stories/index.tsx

@@ -13,7 +13,7 @@ import {
   createToast,
   createModal,
   createChip,
-  createList,
+  createListComponents,
   createDisclosure,
   createDisclosureGroup,
   createTooltip,
@@ -51,7 +51,7 @@ export const Link = createLink();
 export const Breadcrumb = createBreadcrumb(Link);
 export const Modal = createModal(Actions);
 export const Chip = createChip();
-export const List = createList();
+export const { List } = createListComponents();
 export const Disclosure = createDisclosure();
 export const DisclosureGroup = createDisclosureGroup(Disclosure);
 export const Tooltip = createTooltip();