@rovula/ui 0.0.11 → 0.0.13

package/src/components/Dropdown/Dropdown.stories.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import Dropdown, { Options } from "./Dropdown";
 import Button from "../Button/Button";
@@ -53,15 +53,37 @@ export const Default = {
 const DropdownWithRef = (props: any) => {
   const inputRef = useRef<HTMLInputElement | null>(null);
 
+  const [options, setOptions] = useState(customOptions);
+  const [value, setValue] = useState<Options>({
+    label: "",
+    value: "",
+  });
+  const [text, setText] = useState("");
+
   return (
     <Dropdown
       id="1"
       size="lg"
       {...props}
+      value={value}
+      options={options}
       ref={inputRef}
       labelClassName="peer-focus:bg-red-500"
+      onSelect={setValue}
+      onChangeText={(e) => setText(e.target.value)}
       onKeyDown={(e) => {
         if (e.code === "Enter") {
+          setOptions((options) => [
+            ...options,
+            {
+              label: text,
+              value: text,
+            },
+          ]);
+          setValue({
+            label: text,
+            value: text,
+          });
           inputRef.current?.blur?.();
         }
       }}
@@ -83,7 +105,7 @@ export const WithRef = {
     };
     return (
       <div className="flex flex-row gap-4 w-full">
-        <DropdownWithRef id="1" size="lg" options={options} {...args} />\
+        <DropdownWithRef id="1" size="lg" options={options} {...args} />
       </div>
     );
   },
@@ -126,7 +148,7 @@ export const CustomOption = {
     };
     return (
       <div className="flex flex-row gap-4 w-full">
-        <DropdownWithRef id="1" size="lg" options={options} {...args} />\
+        <DropdownWithRef id="1" size="lg" options={options} {...args} />
       </div>
     );
   },

package/src/components/Dropdown/Dropdown.tsx

@@ -5,6 +5,7 @@ import React, {
   useCallback,
   useEffect,
   useMemo,
+  useRef,
   useState,
 } from "react";
 
@@ -80,6 +81,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       Options | null | undefined
     >(null);
     const [textValue, setTextValue] = useState("");
+    const keyCode = useRef("");
 
     useEffect(() => {
       if (value && !selectedOption) {
@@ -147,6 +149,62 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       </ul>
     );
 
+    const handleOnFocus = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        setIsFocused(true);
+        props?.onFocus?.(e);
+      },
+      [props?.onFocus]
+    );
+
+    const clearMismatchValue = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        const matchSelectedValue = optionsFiltered.find(
+          (opt) =>
+            opt.value === e.target?.value || opt.label === e.target?.value
+        );
+        const isMatchSelectedValue = !!matchSelectedValue;
+
+        let option = matchSelectedValue || {
+          value: "",
+          label: "",
+        };
+
+        if (!isMatchSelectedValue && textValue) {
+          option = {
+            value: "",
+            label: "",
+          };
+        }
+
+        if (keyCode.current === "Enter") {
+          return;
+        }
+
+        setSelectedOption(option);
+        setTextValue(option.label);
+        onSelect?.(option);
+      },
+      [optionsFiltered, textValue]
+    );
+
+    const handleOnBlur = useCallback(
+      (e: React.FocusEvent<HTMLInputElement, Element>) => {
+        setIsFocused(false);
+        clearMismatchValue(e);
+        props?.onBlur?.(e);
+      },
+      [props?.onBlur]
+    );
+
+    const handleOnKeyDown = useCallback(
+      (e: React.KeyboardEvent<HTMLInputElement>) => {
+        keyCode.current = e.code;
+        props?.onKeyDown?.(e);
+      },
+      [props?.onKeyDown]
+    );
+
     return (
       <div className={`relative ${fullwidth ? "w-full" : ""}`}>
         <TextInput
@@ -170,8 +228,9 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           hasClearIcon={false}
           size={size}
           className={customInputVariant({ size })}
-          onFocus={() => setIsFocused(true)}
-          onBlur={() => setIsFocused(false)}
+          onFocus={handleOnFocus}
+          onBlur={handleOnBlur}
+          onKeyDown={handleOnKeyDown}
           endIcon={
             <div className={iconWrapperVariant({ size })}>
               <ChevronDownIcon

package/src/components/Table/Table.tsx

@@ -4,12 +4,14 @@ import { cn } from "@/utils/cn";
 
 const Table = React.forwardRef<
   HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
+  {
+    rootRef?: React.LegacyRef<HTMLDivElement>;
+  } & React.HTMLAttributes<HTMLTableElement>
+>(({ className, rootRef, ...props }, ref) => (
+  <div className="relative h-full w-full overflow-auto" ref={rootRef}>
     <table
       ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
+      className={cn("w-full caption-bottom text-sm border-collapse", className)}
       {...props}
     />
   </div>
@@ -20,7 +22,11 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+  <thead
+    ref={ref}
+    className={cn("[&_tr]:border-b bg-secondary-80", className)}
+    {...props}
+  />
 ));
 TableHeader.displayName = "TableHeader";
 
@@ -58,7 +64,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-grey-20",
       className
     )}
     {...props}
@@ -73,7 +79,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      " h-12 py-3 px-6 text-left align-middle typography-body2 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
       className
     )}
     {...props}
@@ -87,7 +93,10 @@ const TableCell = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <td
     ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    className={cn(
+      " py-3 px-6 text-left align-middle  typography-body3 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
+      className
+    )}
     {...props}
   />
 ));

package/src/index.ts

@@ -10,13 +10,14 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export * from "./components/Table/Table";
+export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";
 export * from "./components/AlertDialog/AlertDialog";
 
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
-export type { DropdownProps } from "./components/Dropdown/Dropdown";
+export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
 
 // UTILS
 export {

package/dist/cjs/types/components/ui/table.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/components/ui/table.js

@@ -1,66 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
-import { cn } from "@/utils/cn";
-var Table = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", __assign({ ref: ref, className: cn("w-full caption-bottom text-sm", className) }, props)) }));
-});
-Table.displayName = "Table";
-var TableHeader = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("thead", __assign({ ref: ref, className: cn("[&_tr]:border-b", className) }, props)));
-});
-TableHeader.displayName = "TableHeader";
-var TableBody = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("tbody", __assign({ ref: ref, className: cn("[&_tr:last-child]:border-0", className) }, props)));
-});
-TableBody.displayName = "TableBody";
-var TableFooter = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("tfoot", __assign({ ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className) }, props)));
-});
-TableFooter.displayName = "TableFooter";
-var TableRow = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("tr", __assign({ ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className) }, props)));
-});
-TableRow.displayName = "TableRow";
-var TableHead = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("th", __assign({ ref: ref, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className) }, props)));
-});
-TableHead.displayName = "TableHead";
-var TableCell = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("td", __assign({ ref: ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className) }, props)));
-});
-TableCell.displayName = "TableCell";
-var TableCaption = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("caption", __assign({ ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className) }, props)));
-});
-TableCaption.displayName = "TableCaption";
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/esm/types/components/ui/table.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & React.RefAttributes<HTMLTableElement>>;
-declare const TableHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableBody: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableSectionElement> & React.RefAttributes<HTMLTableSectionElement>>;
-declare const TableRow: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableRowElement> & React.RefAttributes<HTMLTableRowElement>>;
-declare const TableHead: React.ForwardRefExoticComponent<React.ThHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & React.RefAttributes<HTMLTableCellElement>>;
-declare const TableCaption: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableCaptionElement> & React.RefAttributes<HTMLTableCaptionElement>>;
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/src/components/ui/table.tsx

@@ -1,117 +0,0 @@
-import * as React from "react"
-
-import { cn } from "@/utils/cn"
-
-const Table = React.forwardRef<
-  HTMLTableElement,
-  React.HTMLAttributes<HTMLTableElement>
->(({ className, ...props }, ref) => (
-  <div className="relative w-full overflow-auto">
-    <table
-      ref={ref}
-      className={cn("w-full caption-bottom text-sm", className)}
-      {...props}
-    />
-  </div>
-))
-Table.displayName = "Table"
-
-const TableHeader = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
-
-const TableBody = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tbody
-    ref={ref}
-    className={cn("[&_tr:last-child]:border-0", className)}
-    {...props}
-  />
-))
-TableBody.displayName = "TableBody"
-
-const TableFooter = React.forwardRef<
-  HTMLTableSectionElement,
-  React.HTMLAttributes<HTMLTableSectionElement>
->(({ className, ...props }, ref) => (
-  <tfoot
-    ref={ref}
-    className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableFooter.displayName = "TableFooter"
-
-const TableRow = React.forwardRef<
-  HTMLTableRowElement,
-  React.HTMLAttributes<HTMLTableRowElement>
->(({ className, ...props }, ref) => (
-  <tr
-    ref={ref}
-    className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
-      className
-    )}
-    {...props}
-  />
-))
-TableRow.displayName = "TableRow"
-
-const TableHead = React.forwardRef<
-  HTMLTableCellElement,
-  React.ThHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <th
-    ref={ref}
-    className={cn(
-      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
-      className
-    )}
-    {...props}
-  />
-))
-TableHead.displayName = "TableHead"
-
-const TableCell = React.forwardRef<
-  HTMLTableCellElement,
-  React.TdHTMLAttributes<HTMLTableCellElement>
->(({ className, ...props }, ref) => (
-  <td
-    ref={ref}
-    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
-    {...props}
-  />
-))
-TableCell.displayName = "TableCell"
-
-const TableCaption = React.forwardRef<
-  HTMLTableCaptionElement,
-  React.HTMLAttributes<HTMLTableCaptionElement>
->(({ className, ...props }, ref) => (
-  <caption
-    ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
-    {...props}
-  />
-))
-TableCaption.displayName = "TableCaption"
-
-export {
-  Table,
-  TableHeader,
-  TableBody,
-  TableFooter,
-  TableHead,
-  TableRow,
-  TableCell,
-  TableCaption,
-}