@noya-app/noya-designsystem 0.1.22 → 0.1.24

package/package.json

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

package/src/components/Button.tsx

@@ -57,10 +57,10 @@ export const ButtonElement = styled.button<{
     borderRadius: "4px",
     paddingTop: $variant === "none" ? "0px" : "4px",
     paddingRight:
-      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     paddingBottom: $variant === "none" ? "0px" : "4px",
     paddingLeft:
-      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "8px",
+      $variant === "none" ? "0px" : $variant === "thin" ? "1px" : "6px",
     ...($size === "large" && {
       paddingTop: "12px",
       paddingRight: "16px",

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/InputField.tsx

@@ -543,6 +543,8 @@ interface InputFieldRootProps {
   size?: InputFieldSize;
   renderPopoverContent?: (options: { width: number }) => ReactNode;
   onFocusChange?: (isFocused: boolean) => void;
+  style?: React.CSSProperties;
+  className?: string;
 }
 
 function InputFieldRoot({
@@ -555,6 +557,8 @@ function InputFieldRoot({
   size = "medium",
   renderPopoverContent,
   onFocusChange,
+  style,
+  className,
 }: InputFieldRootProps) {
   const childrenArray = Children.toArray(children);
 
@@ -617,7 +621,13 @@ function InputFieldRoot({
   );
 
   const rootElement = (
-    <RootContainer id={id} $width={width} $flex={flex}>
+    <RootContainer
+      id={id}
+      $width={width}
+      $flex={flex}
+      style={style}
+      className={className}
+    >
       {children}
     </RootContainer>
   );

package/src/components/ListView.tsx

@@ -333,6 +333,13 @@ interface ListViewRowProps<MenuItemType extends string = string> {
   onMenuOpenChange?: (isOpen: boolean) => void;
   onKeyDown?: (event: React.KeyboardEvent) => void;
   style?: CSSProperties;
+  dragIndicatorStyle?:
+    | CSSProperties
+    | ((props: {
+        depth: number;
+        indentation: number;
+        position: RelativeDropPosition;
+      }) => CSSProperties);
 }
 
 const ListViewRow = forwardRef(function ListViewRow<
@@ -359,6 +366,7 @@ const ListViewRow = forwardRef(function ListViewRow<
     onMenuOpenChange,
     onKeyDown,
     style,
+    dragIndicatorStyle,
   }: ListViewRowProps<MenuItemType>,
   forwardedRef: ForwardedRef<HTMLElement>
 ) {
@@ -461,7 +469,16 @@ const ListViewRow = forwardRef(function ListViewRow<
             $colorScheme={colorScheme}
             $relativeDropPosition={relativeDropPosition}
             $offsetLeft={33 + depth * indentation}
-            $gap={listGap}
+            $gap={listGap + (divider ? 1 : 0)}
+            style={
+              typeof dragIndicatorStyle === "function"
+                ? dragIndicatorStyle({
+                    depth,
+                    indentation,
+                    position: relativeDropPosition,
+                  })
+                : dragIndicatorStyle
+            }
           />
         )}
         {depth > 0 && <Spacer.Horizontal size={depth * indentation} />}

package/src/components/Select.tsx

@@ -77,7 +77,7 @@ const SelectElement = styled.select<{ $flex: CSSProperties["flex"] }>(
     borderRadius: "4px",
     paddingTop: "4px",
     paddingBottom: "4px",
-    paddingLeft: "8px",
+    paddingLeft: "6px",
     paddingRight: "23px",
     background: [
       `calc(100% - 6px) / 15px url("data:image/svg+xml;utf8,${createChevronSVGString(

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;
 };