@noya-app/noya-designsystem 0.1.23 → 0.1.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@noya-app/noya-designsystem",
-  "version": "0.1.23",
+  "version": "0.1.24",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/components/ContextMenu.tsx

@@ -3,6 +3,7 @@ import { useKeyboardShortcuts } from "@noya-app/noya-keymap";
 import * as RadixContextMenu from "@radix-ui/react-context-menu";
 import React, { ReactNode, memo, useCallback, useMemo } from "react";
 import styled from "styled-components";
+import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import {
   CHECKBOX_RIGHT_INSET,
@@ -98,7 +99,7 @@ const ContextMenuItem = memo(function ContextMenuItem<T extends string>({
       )}
       {icon && (
         <>
-          {icon}
+          {renderIcon(icon)}
           <Spacer.Horizontal size={8} />
         </>
       )}

package/src/components/DropdownMenu.tsx

@@ -12,6 +12,7 @@ import React, {
 } from "react";
 import styled from "styled-components";
 import { MenuItemProps, MenuProps } from "./ContextMenu";
+import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import {
   CHECKBOX_RIGHT_INSET,
@@ -73,7 +74,7 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
         </StyledItemIndicator>
         {icon && (
           <>
-            {icon}
+            {renderIcon(icon)}
             <Spacer.Horizontal size={8} />
           </>
         )}
@@ -89,7 +90,7 @@ const DropdownMenuItem = memo(function ContextMenuItem<T extends string>({
       )}
       {icon && (
         <>
-          {icon}
+          {renderIcon(icon)}
           <Spacer.Horizontal size={8} />
         </>
       )}

package/src/components/IconButton.tsx

@@ -1,4 +1,3 @@
-import * as Icons from "@noya-app/noya-icons";
 import React, {
   CSSProperties,
   ForwardedRef,
@@ -8,9 +7,10 @@ import React, {
 } from "react";
 import { useTheme } from "styled-components";
 import { Button, ButtonRootProps } from "./Button";
+import { IconName, Icons } from "./Icons";
 
 type Props = Omit<ButtonRootProps, "children" | "variant" | "flex" | "size"> & {
-  iconName: keyof typeof Icons;
+  iconName: IconName;
   className?: string;
   style?: CSSProperties;
   selected?: boolean;

package/src/components/Icons.tsx

@@ -0,0 +1,18 @@
+import * as Icons from "@noya-app/noya-icons";
+import React, { ReactNode } from "react";
+
+export type IconName = keyof typeof Icons;
+
+export { Icons };
+
+export function renderIcon(
+  iconName: Exclude<ReactNode, string> | IconName
+): ReactNode {
+  if (typeof iconName === "string") {
+    const Icon = Icons[iconName as IconName];
+
+    return <Icon />;
+  }
+
+  return iconName;
+}

package/src/components/SelectMenu.tsx

@@ -3,6 +3,7 @@ import * as Select from "@radix-ui/react-select";
 import React, { memo } from "react";
 import { styled } from "styled-components";
 import { Button } from "./Button";
+import { renderIcon } from "./Icons";
 import { Spacer } from "./Spacer";
 import { MenuItem, RegularMenuItem, styles } from "./internal/Menu";
 
@@ -37,7 +38,7 @@ export const SelectMenu = memo(function SelectMenu<T extends string = string>({
         <Button id={id} style={style} className={className}>
           {icon && (
             <>
-              {icon}
+              {renderIcon(icon)}
               <Spacer.Horizontal size={8} />
             </>
           )}
@@ -86,7 +87,7 @@ const SelectItem = React.forwardRef(
       <StyledItem {...props} ref={forwardedRef}>
         {icon && (
           <>
-            {icon}
+            {renderIcon(icon)}
             <Spacer.Horizontal size={8} />
           </>
         )}

package/src/components/TreeView.tsx

@@ -7,6 +7,7 @@ import React, {
   useContext,
 } from "react";
 import { IconButton } from "./IconButton";
+import { IconName, renderIcon } from "./Icons";
 import { ListView } from "./ListView";
 import { Spacer } from "./Spacer";
 
@@ -15,7 +16,7 @@ import { Spacer } from "./Spacer";
  * ------------------------------------------------------------------------- */
 
 type TreeRowBaseProps = {
-  icon?: ReactNode;
+  icon?: Exclude<ReactNode, string> | IconName;
   expanded?: boolean;
   onClickChevron?: ({ altKey }: { altKey: boolean }) => void;
 };
@@ -61,7 +62,7 @@ const TreeRow = forwardRef(function TreeRow<MenuItemType extends string>(
       )}
       {icon && (
         <>
-          {icon}
+          {renderIcon(icon)}
           <Spacer.Horizontal size={10} />
         </>
       )}

package/src/components/internal/Menu.tsx

@@ -4,6 +4,7 @@ import styled, { CSSObject } from "styled-components";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
 import { Theme } from "../../theme";
 import withSeparatorElements from "../../utils/withSeparatorElements";
+import { IconName } from "../Icons";
 
 export const SEPARATOR_ITEM = "separator";
 
@@ -63,7 +64,7 @@ export type RegularMenuItem<T extends string> = {
   shortcut?: string;
   checked?: boolean;
   disabled?: boolean;
-  icon?: ReactNode;
+  icon?: Exclude<ReactNode, string> | IconName;
   items?: MenuItem<T>[];
   role?: MenuItemRole;
 };