@rovula/ui 0.0.42 → 0.0.44

package/dist/esm/types/components/Dropdown/Dropdown.d.ts

@@ -26,6 +26,8 @@ export type DropdownProps = {
     required?: boolean;
     className?: string;
     optionContainerClassName?: string;
+    optionItemClassName?: string;
+    optionNotFoundItemClassName?: string;
     options: Options[];
     value?: Options;
     onChangeText?: InputProps["onChange"];
@@ -51,6 +53,8 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     required?: boolean | undefined;
     className?: string | undefined;
     optionContainerClassName?: string | undefined;
+    optionItemClassName?: string | undefined;
+    optionNotFoundItemClassName?: string | undefined;
     options: Options[];
     value?: Options | undefined;
     onChangeText?: InputProps["onChange"];

package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts

@@ -17,6 +17,8 @@ declare const meta: {
         required?: boolean | undefined;
         className?: string | undefined;
         optionContainerClassName?: string | undefined;
+        optionItemClassName?: string | undefined;
+        optionNotFoundItemClassName?: string | undefined;
         options: Options[];
         value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;
@@ -46,6 +48,8 @@ declare const meta: {
         required?: boolean | undefined;
         className?: string | undefined;
         optionContainerClassName?: string | undefined;
+        optionItemClassName?: string | undefined;
+        optionNotFoundItemClassName?: string | undefined;
         options: Options[];
         value?: Options | undefined;
         onChangeText?: React.ChangeEventHandler<HTMLInputElement> | undefined;

package/dist/esm/types/components/Search/Search.stories.d.ts

@@ -324,6 +324,8 @@ declare const meta: {
             onClick: (option: Options) => void;
         }) => React.ReactNode) | undefined;
         optionContainerClassName?: string | undefined;
+        optionItemClassName?: string | undefined;
+        optionNotFoundItemClassName?: string | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/index.d.ts

@@ -151,6 +151,8 @@ type DropdownProps = {
     required?: boolean;
     className?: string;
     optionContainerClassName?: string;
+    optionItemClassName?: string;
+    optionNotFoundItemClassName?: string;
     options: Options$1[];
     value?: Options$1;
     onChangeText?: InputProps["onChange"];
@@ -176,6 +178,8 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
     required?: boolean | undefined;
     className?: string | undefined;
     optionContainerClassName?: string | undefined;
+    optionItemClassName?: string | undefined;
+    optionNotFoundItemClassName?: string | undefined;
     options: Options$1[];
     value?: Options$1 | undefined;
     onChangeText?: InputProps["onChange"];

package/dist/src/theme/global.css

@@ -2009,6 +2009,22 @@ body {
   /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
 }
 
+/* hide input number arrow */
+
+/* Chrome, Safari, Edge, Opera */
+
+input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+
+input[type=number] {
+  -moz-appearance: textfield;
+}
+
 *, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
@@ -8557,4 +8573,4 @@ body {
 
 .\[\&_tr\]\:border-b tr {
   border-bottom-width: 1px;
-}
+}

package/dist/theme/global.css

@@ -14,4 +14,17 @@
     /* @apply bg-background text-foreground; */
     /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
   }
-}
+
+  /* hide input number arrow */
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.42",
+  "version": "0.0.44",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/DatePicker/DatePicker.tsx

@@ -32,7 +32,7 @@ const DatePicker: FC<DatePickerProps> = ({
 
   return (
     <div>
-      <Popover open={isOpen} onOpenChange={setIsOpen}>
+      <Popover modal open={isOpen} onOpenChange={setIsOpen}>
         <PopoverTrigger asChild>
           <div className="flex">
             <TextInput

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

@@ -147,9 +147,20 @@ export const CustomOption = {
     const props: typeof args = {
       ...args,
     };
+
+    const onChangeText = (e: any) => {
+      console.log("aaa ", e);
+    };
+
     return (
       <div className="flex flex-row gap-4 w-full">
-        <DropdownWithRef id="1" size="lg" options={options} {...args} />
+        <Dropdown
+          id="1"
+          size="lg"
+          options={options}
+          {...args}
+          onChangeText={onChangeText}
+        />
       </div>
     );
   },

package/src/components/Dropdown/Dropdown.tsx

@@ -47,6 +47,8 @@ export type DropdownProps = {
   required?: boolean;
   className?: string;
   optionContainerClassName?: string;
+  optionItemClassName?: string;
+  optionNotFoundItemClassName?: string;
   options: Options[];
   value?: Options;
   onChangeText?: InputProps["onChange"];
@@ -79,13 +81,15 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       onSelect,
       renderOptions: customRenderOptions,
       optionContainerClassName,
+      optionItemClassName,
+      optionNotFoundItemClassName,
       ...props
     },
     ref
   ) => {
     const _id = id || `${label}-select`;
 
-    const [isFocused, setIsFocused] = useState(false);
+    const [isFocused, setIsFocused] = useState(true);
     const [selectedOption, setSelectedOption] = useState<
       Options | null | undefined
     >(null);
@@ -150,11 +154,14 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
                     value: option.value,
                     label: option.label,
                     handleOnClick: () => handleOptionClick(option),
-                    className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${
-                      selectedOption?.value === option.value
-                        ? " bg-gray-200"
-                        : ""
-                    }`,
+                    className: cn(
+                      `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`,
+                      optionItemClassName,
+                      {
+                        "bg-base-popup-highligh":
+                          selectedOption?.value === option.value,
+                      }
+                    ),
                   })}
                 </Fragment>
               );
@@ -163,18 +170,26 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
               <li
                 key={option.value}
                 onMouseDown={() => handleOptionClick(option)}
-                className={`px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${
-                  selectedOption?.value === option.value
-                    ? "bg-base-popup-highligh"
-                    : ""
-                }`}
+                className={cn(
+                  `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer`,
+                  optionItemClassName,
+                  {
+                    "bg-base-popup-highligh":
+                      selectedOption?.value === option.value,
+                  }
+                )}
               >
                 {option.label}
               </li>
             );
           })}
           {optionsFiltered.length === 0 && (
-            <li className="px-4 py-14 text-center text-input-text">
+            <li
+              className={cn(
+                "px-4 py-14 text-center text-input-text",
+                optionNotFoundItemClassName
+              )}
+            >
               Not found
             </li>
           )}
@@ -257,6 +272,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           label={label}
           placeholder=" "
           type="text"
+          autoComplete="off"
           rounded={rounded}
           variant={variant}
           helperText={helperText}

package/src/components/Toast/Toast.tsx

@@ -93,7 +93,7 @@ const ToastDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <ToastPrimitives.Description
     ref={ref}
-    className={cn("typography-subtitile5 text-text-grey-dark", className)}
+    className={cn("typography-subtitile5 text-input-default-tex", className)}
     {...props}
   />
 ));

package/src/components/Toast/useToast.ts

@@ -5,7 +5,7 @@ import * as React from "react";
 import { ToastActionElement, ToastProps } from "./Toast";
 
 const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 6000;
+const TOAST_REMOVE_DELAY = 3000;
 
 type ToasterToast = ToastProps & {
   id: string;
@@ -81,7 +81,7 @@ const addToRemoveQueue = (toastId: string) => {
       type: "REMOVE_TOAST",
       toastId: toastId,
     });
-  }, TOAST_REMOVE_DELAY);
+  }, TOAST_REMOVE_DELAY); // TODO
 
   toastTimeouts.set(toastId, timeout);
 };

package/src/theme/global.css

@@ -14,4 +14,17 @@
     /* @apply bg-background text-foreground; */
     /* @apply bg-[var(--backgroud)] text-[var(--foreground)]; */
   }
-}
+
+  /* hide input number arrow */
+  /* Chrome, Safari, Edge, Opera */
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  /* Firefox */
+  input[type=number] {
+    -moz-appearance: textfield;
+  }
+}