@noya-app/noya-designsystem 0.1.21 → 0.1.23

package/src/components/Text.tsx

@@ -61,6 +61,8 @@ interface Props extends StyleProps {
   children: ReactNode;
   onClick?: () => void;
   onDoubleClick?: () => void;
+  onKeyDown?: (event: React.KeyboardEvent<HTMLSpanElement>) => void;
+  tabIndex?: number;
 }
 
 const StyledElement = styled.span<{
@@ -84,7 +86,9 @@ export const Text = forwardRef(function Text(
     className,
     color,
     href,
+    tabIndex,
     onClick,
+    onKeyDown,
     ...rest
   }: Props,
   forwardedRef: ForwardedRef<HTMLElement>
@@ -96,11 +100,13 @@ export const Text = forwardRef(function Text(
       ref={forwardedRef}
       as={element}
       className={className}
+      tabIndex={tabIndex}
       $variant={variant}
       $breakpoints={breakpoints}
       $styleProps={rest}
       $color={color}
       onClick={onClick}
+      onKeyDown={onKeyDown}
       {...((href && { href }) as any)}
     >
       {children}

package/src/components/TreeView.tsx

@@ -5,10 +5,10 @@ import React, {
   ReactNode,
   useCallback,
   useContext,
-} from 'react';
-import { IconButton } from './IconButton';
-import { ListView } from './ListView';
-import { Spacer } from './Spacer';
+} from "react";
+import { IconButton } from "./IconButton";
+import { ListView } from "./ListView";
+import { Spacer } from "./Spacer";
 
 /* ----------------------------------------------------------------------------
  * Row
@@ -31,7 +31,7 @@ const TreeRow = forwardRef(function TreeRow<MenuItemType extends string>(
     children,
     ...rest
   }: TreeViewRowProps<MenuItemType>,
-  forwardedRef: ForwardedRef<HTMLLIElement>,
+  forwardedRef: ForwardedRef<HTMLLIElement>
 ) {
   const { expandable } = useContext(ListView.RowContext);
 
@@ -40,7 +40,7 @@ const TreeRow = forwardRef(function TreeRow<MenuItemType extends string>(
       event.stopPropagation();
       onClickChevron?.({ altKey: event.altKey });
     },
-    [onClickChevron],
+    [onClickChevron]
   );
 
   return (
@@ -51,7 +51,7 @@ const TreeRow = forwardRef(function TreeRow<MenuItemType extends string>(
             <Spacer.Horizontal size={19} />
           ) : (
             <IconButton
-              iconName={expanded ? 'ChevronDownIcon' : 'ChevronRightIcon'}
+              iconName={expanded ? "ChevronDownIcon2" : "ChevronRightIcon2"}
               onClick={handleClickChevron}
               selected={rest.selected}
             />

package/src/components/WorkspaceLayout.tsx

@@ -201,6 +201,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
               style={{
                 display: "flex",
                 flexDirection: "row",
+                position: "relative",
               }}
             >
               {leftPanelContent}
@@ -223,6 +224,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
           style={{
             display: "flex",
             flexDirection: "row",
+            position: "relative",
           }}
         >
           {centerPanelContent}
@@ -247,6 +249,7 @@ export const WorkspaceLayout = forwardRef(function WorkspaceLayout(
               style={{
                 display: "flex",
                 flexDirection: "row",
+                position: "relative",
               }}
             >
               {rightPanelContent}

package/src/components/internal/Menu.tsx

@@ -1,5 +1,5 @@
 import { getShortcutDisplayParts } from "@noya-app/noya-keymap";
-import React, { memo, ReactElement, ReactNode } from "react";
+import React, { memo, ReactNode } from "react";
 import styled, { CSSObject } from "styled-components";
 import { useDesignSystemConfiguration } from "../../contexts/DesignSystemConfiguration";
 import { Theme } from "../../theme";
@@ -63,7 +63,7 @@ export type RegularMenuItem<T extends string> = {
   shortcut?: string;
   checked?: boolean;
   disabled?: boolean;
-  icon?: ReactElement;
+  icon?: ReactNode;
   items?: MenuItem<T>[];
   role?: MenuItemRole;
 };

package/src/index.tsx

@@ -41,6 +41,7 @@ export * from "./components/Progress";
 export * from "./components/RadioGroup";
 export * from "./components/ScrollArea";
 export * from "./components/Select";
+export * from "./components/SelectMenu";
 export * from "./components/Slider";
 export * from "./components/Sortable";
 export type { RelativeDropPosition } from "./components/Sortable";

package/src/theme/light.ts

@@ -181,7 +181,8 @@ export const textStyles = {
     fontFamily: fonts.normal,
     fontSize: "0.62rem",
     fontWeight: 400,
-    lineHeight: "1.4",
+    lineHeight: "19px",
+    // lineHeight: "1.4",
     textTransform: "uppercase",
     letterSpacing: "-0.3px",
   } as CSSObject,

package/src/utils/breakpoints.ts

@@ -1,4 +1,4 @@
-import { CSSObject } from 'styled-components';
+import { CSSObject } from "styled-components";
 
 type BreakpointKey = number | string;
 
@@ -11,15 +11,15 @@ export type BreakpointCollection<T extends object> =
 export type StyleMap = Record<string, CSSObject>;
 
 export function mergeBreakpoints(
-  breakpoints: BreakpointCollection<CSSObject>,
+  breakpoints: BreakpointCollection<CSSObject>
 ): StyleMap;
 export function mergeBreakpoints<T extends object>(
   breakpoints: BreakpointCollection<T>,
-  transform?: (value: T) => CSSObject,
+  transform?: (value: T) => CSSObject
 ): StyleMap;
 export function mergeBreakpoints<T extends object>(
   breakpoints: BreakpointCollection<T>,
-  transform?: (value: T) => CSSObject,
+  transform?: (value: T) => CSSObject
 ): StyleMap {
   const breakpointMap = Array.isArray(breakpoints)
     ? breakpoints.reduce(
@@ -28,7 +28,7 @@ export function mergeBreakpoints<T extends object>(
           result[key] = result[key] ? { ...result[key], ...value } : value;
           return result;
         },
-        {},
+        {}
       )
     : breakpoints;
 
@@ -37,7 +37,7 @@ export function mergeBreakpoints<T extends object>(
   const transformedList = breakpointList
     .sort((a, b) => Number(b[0]) - Number(a[0]))
     .map(([width, value]: Breakpoint<T>) => [
-      `@media screen and (max-width: ${width}px)`,
+      `@media (min-width: ${width}px)`,
       transform?.(value) ?? value,
     ]);