notionsoft-ui 1.0.33 → 1.0.35

package/src/notion-ui/page-size-select/page-size-select.tsx

@@ -0,0 +1,283 @@
+import { cn } from "../../utils/cn";
+import { Check, ChevronDown } from "lucide-react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+interface Option {
+  value: string;
+  label: string;
+}
+
+interface SelectProps {
+  placeholder: string;
+  className?: string;
+  paginationKey: string;
+  emptyPlaceholder: string;
+  rangePlaceholder: string;
+  options: Option[];
+  onChange?: (value: string) => void;
+
+  save?: (key: string, data: any) => Promise<void> | void;
+  load?: (key: string) => Promise<any> | any;
+}
+
+const KEYS = {
+  input: 0,
+  default: 1,
+};
+
+// ---------------- Default Storage ----------------
+const defaultSave = (key: string, data: any, STORAGE_KEY: string) => {
+  try {
+    localStorage.setItem(STORAGE_KEY + key, JSON.stringify(data));
+  } catch {}
+};
+
+const defaultLoad = (key: string, STORAGE_KEY: string) => {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY + key);
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+};
+
+const PageSizeSelect: React.FC<SelectProps> = ({
+  placeholder,
+  emptyPlaceholder,
+  rangePlaceholder,
+  options,
+  onChange,
+  className,
+  paginationKey,
+  save,
+  load,
+}) => {
+  const [mounted, setMounted] = useState(false);
+  const [dropDirection, setDropDirection] = useState<"up" | "down">("down");
+  const [position, setPosition] = useState({
+    top: 0,
+    left: 0,
+    width: 0,
+  });
+
+  const [selectData, setSelectData] = useState({
+    isOpen: false,
+    showIcon: false,
+    select: { key: "", value: "", option: -1 },
+  });
+
+  const selectRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const saveFn = save
+    ? save
+    : (key: string, data: any) => defaultSave(key, data, paginationKey);
+
+  const loadFn = load ? load : (key: string) => defaultLoad(key, paginationKey);
+
+  // ---------------- Mount ----------------
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // ---------------- Load Cache ----------------
+  useEffect(() => {
+    const loadCache = async () => {
+      const cached = await loadFn(paginationKey);
+      if (cached) {
+        setSelectData((p) => ({ ...p, select: cached }));
+        onChange?.(cached.value);
+      } else {
+        const item = { key: paginationKey, value: "10", option: KEYS.default };
+        setSelectData((p) => ({ ...p, select: item }));
+        saveFn(paginationKey, item);
+        onChange?.("10");
+      }
+    };
+    loadCache();
+  }, [paginationKey]);
+
+  // ---------------- Positioning ----------------
+  const updatePosition = () => {
+    const trigger = selectRef.current;
+    const dropdown = dropdownRef.current;
+    if (!trigger || !dropdown) return;
+
+    const rect = trigger.getBoundingClientRect();
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    const gap = 6;
+
+    const dropdownHeight = Math.min(dropdown.offsetHeight || 0, 260);
+    const dropdownWidth = dropdown.offsetWidth || rect.width;
+
+    const spaceBelow = viewportHeight - rect.bottom;
+    const spaceAbove = rect.top;
+
+    const spaceRight = viewportWidth - rect.left;
+    const spaceLeft = rect.right;
+
+    /* ---------- Vertical (Up / Down) ---------- */
+    let top: number;
+    if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
+      setDropDirection("up");
+      top = rect.top + window.scrollY - dropdownHeight - gap;
+    } else {
+      setDropDirection("down");
+      top = rect.bottom + window.scrollY + gap;
+    }
+
+    /* ---------- Horizontal (Left / Right) ---------- */
+    let left = rect.left + window.scrollX;
+
+    // If dropdown overflows right viewport → shift left
+    if (spaceRight < dropdownWidth && spaceLeft >= dropdownWidth) {
+      left = rect.right + window.scrollX - dropdownWidth;
+    }
+
+    // Clamp to viewport (safety)
+    left = Math.max(8, Math.min(left, viewportWidth - dropdownWidth - 8));
+
+    setPosition({
+      top,
+      left,
+      width: rect.width,
+    });
+  };
+
+  useLayoutEffect(() => {
+    if (selectData.isOpen) updatePosition();
+  }, [selectData.isOpen, options.length]);
+
+  useEffect(() => {
+    if (!selectData.isOpen) return;
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    return () => {
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+    };
+  }, [selectData.isOpen]);
+
+  // ---------------- Outside Click ----------------
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (
+        !selectRef.current?.contains(e.target as Node) &&
+        !dropdownRef.current?.contains(e.target as Node)
+      ) {
+        setSelectData((p) => ({ ...p, isOpen: false, showIcon: false }));
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  // ---------------- Select ----------------
+  const handleSelect = async (value: string) => {
+    const item = { key: paginationKey, value, option: KEYS.default };
+    onChange?.(value);
+    setSelectData((p) => ({ ...p, isOpen: false, select: item }));
+    await saveFn(paginationKey, item);
+  };
+
+  // ---------------- Render ----------------
+  return (
+    <div ref={selectRef} className={cn("w-full", className)}>
+      <button
+        onClick={() => setSelectData((p) => ({ ...p, isOpen: !p.isOpen }))}
+        className="w-full px-3 py-2 border rounded-md flex items-center justify-between bg-card"
+      >
+        {selectData.select.value || placeholder}
+        <ChevronDown
+          className={cn(
+            "size-3 transition-transform",
+            selectData.isOpen && "rotate-180"
+          )}
+        />
+      </button>
+
+      {mounted &&
+        selectData.isOpen &&
+        createPortal(
+          <div
+            ref={dropdownRef}
+            className={cn(
+              "absolute min-w-fit z-50 bg-card border border-primary/15 shadow-lg",
+              dropDirection === "down" ? "rounded-b-md" : "rounded-t-md"
+            )}
+            style={{
+              top: position.top,
+              left: position.left,
+              width: position.width,
+            }}
+          >
+            {/* Input */}
+            <div className="relative">
+              <input
+                ref={inputRef}
+                type="number"
+                placeholder={rangePlaceholder}
+                onFocus={() => setSelectData((p) => ({ ...p, showIcon: true }))}
+                defaultValue={
+                  selectData.select.option === KEYS.input
+                    ? selectData.select.value
+                    : ""
+                }
+                className={`bg-card  dark:bg-card-secondary text-tertiary rtl:text-[17px] w-full [appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none text-center text-sm px-4 py-2 border-b border-primary/15 rounded-t-md focus:outline-none`}
+              />
+              <Check
+                className={cn(
+                  "size-4 absolute top-2.5 right-2 cursor-pointer",
+                  !selectData.showIcon && "hidden"
+                )}
+                onClick={async () => {
+                  const value = inputRef.current?.value || "10";
+                  const option = value ? KEYS.input : KEYS.default;
+                  const item = { key: paginationKey, value, option };
+                  onChange?.(value);
+                  await saveFn(paginationKey, item);
+                  setSelectData((p) => ({
+                    ...p,
+                    isOpen: false,
+                    showIcon: false,
+                    select: item,
+                  }));
+                }}
+              />
+            </div>
+
+            {/* Options */}
+            <ul className="max-h-60 overflow-auto">
+              {options.length === 0 ? (
+                <li className="px-4 py-2 text-center text-sm">
+                  {emptyPlaceholder}
+                </li>
+              ) : (
+                options.map((o) => (
+                  <li
+                    key={o.value}
+                    onClick={() => handleSelect(o.value)}
+                    className={cn(
+                      "px-4 py-2 cursor-pointer flex justify-between hover:bg-primary/10",
+                      selectData.select.value === o.value && "bg-primary/10"
+                    )}
+                  >
+                    {o.label}
+                    {selectData.select.value === o.value && (
+                      <Check className="size-3" />
+                    )}
+                  </li>
+                ))
+              )}
+            </ul>
+          </div>,
+          document.body
+        )}
+    </div>
+  );
+};
+
+export default PageSizeSelect;

package/src/notion-ui/password-input/password-input.tsx

@@ -93,7 +93,7 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
         {/* Password strength text */}
         <p
           id="password-strength"
-          className="mb-2 text-start rtl:text-xl-rtl ltr:text-xl-ltr font-medium text-foreground"
+          className="mb-2 text-start rtl:text-lg ltr:text-sm font-medium text-foreground"
         >
           {`${getStrengthText(strengthScore)}. ${text.must_contain}`}
         </p>
@@ -108,9 +108,9 @@ const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
                 <X size={16} className="text-muted-foreground/80" />
               )}
               <span
-                className={`ltr:text-xs rtl:text-lg-rtl ${
+                className={`ltr:text-xs rtl:text-[17px] ${
                   req.met
-                    ? "text-emerald-600 ltr:text-xl-ltr"
+                    ? "text-emerald-600 ltr:text-sm"
                     : "text-muted-foreground"
                 }`}
               >

package/src/notion-ui/phone-input/phone-input.tsx

@@ -78,6 +78,9 @@ interface PhoneInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     rootDivClassName?: string;
     iconClassName?: string;
   };
+  text: {
+    searchInputPlaceholder: string;
+  };
   measurement?: PhoneInputSize;
   ROW_HEIGHT?: number;
   VISIBLE_ROWS?: number;
@@ -97,11 +100,14 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
   ROW_HEIGHT = 32,
   VISIBLE_ROWS = 10,
   BUFFER = 5,
+  text,
   ...rest
 }) => {
   const { rootDivClassName, iconClassName = "size-4" } = classNames || {};
   const [open, setOpen] = useState(false);
   const [highlightedIndex, setHighlightedIndex] = useState<number>(0);
+  const { searchInputPlaceholder } = text;
+
   const initialCountry = (() => {
     if (typeof value === "string" && value.startsWith("+")) {
       const matched = defaultCountries.find((c) =>
@@ -119,6 +125,20 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
   const dropdownRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const [position, setPosition] = useState({ top: 0, left: 0, width: 0 });
+  const [search, setSearch] = useState("");
+  const filteredCountries = useMemo(() => {
+    if (!search.trim()) return defaultCountries;
+    const s = search.toLowerCase();
+    return defaultCountries.filter(
+      (c) =>
+        c.name.toLowerCase().includes(s) ||
+        c.iso2.toLowerCase().includes(s) ||
+        ("+" + c.dialCode).includes(s)
+    );
+  }, [search]);
+  useEffect(() => {
+    setHighlightedIndex(0);
+  }, [search]);
 
   const [dropDirection, setDropDirection] = useState<"down" | "up">("down");
 
@@ -163,14 +183,14 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
 
     if (e.key === "ArrowDown") {
       setHighlightedIndex((prev) =>
-        Math.min(prev + 1, defaultCountries.length - 1)
+        Math.min(prev + 1, filteredCountries.length - 1)
       );
       e.preventDefault();
     } else if (e.key === "ArrowUp") {
       setHighlightedIndex((prev) => Math.max(prev - 1, 0));
       e.preventDefault();
     } else if (e.key === "Enter") {
-      chooseCountry(defaultCountries[highlightedIndex]);
+      chooseCountry(filteredCountries[highlightedIndex]);
       e.preventDefault();
     } else if (e.key === "Escape") {
       setOpen(false);
@@ -247,7 +267,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
     }
   };
 
-  useLayoutEffect(() => updateDropdownPosition(), [open]);
+  useLayoutEffect(() => updateDropdownPosition(), [open, search]);
   useEffect(() => {
     if (!open) return;
     window.addEventListener("resize", updateDropdownPosition);
@@ -357,6 +377,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
             +{country.dialCode}
           </span>
         </button>
+
         <input
           ref={inputRef}
           type="tel"
@@ -377,16 +398,14 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
             "focus-visible:border-tertiary/60",
             "[&::-webkit-outer-spin-button]:appearance-none",
             "[&::-webkit-inner-spin-button]:appearance-none",
-            "[-moz-appearance:textfield] ",
+            "[-moz-appearance:textfield] rtl:text-right",
             hasError && "border-red-400",
             className
           )}
           {...rest}
           disabled={readOnly}
-          dir="ltr"
         />
       </div>
-
       {open &&
         createPortal(
           <div
@@ -403,10 +422,21 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
             }}
             role="listbox"
           >
+            {/* 🔍 Search bar */}
+            <div className="p-2 border-b bg-card sticky top-0 z-10">
+              <input
+                type="text"
+                autoFocus
+                className="w-full px-2 py-1 text-sm border rounded-sm bg-input/30 focus:outline-none"
+                placeholder={searchInputPlaceholder}
+                value={search}
+                onChange={(e) => setSearch(e.target.value)}
+              />
+            </div>
             <VirtualList
               ROW_HEIGHT={ROW_HEIGHT}
               BUFFER={BUFFER}
-              items={defaultCountries}
+              items={filteredCountries}
               height={ROW_HEIGHT * VISIBLE_ROWS}
               renderRow={(c, i) => (
                 <div
@@ -446,7 +476,7 @@ const PhoneInput: React.FC<PhoneInputProps> = ({
           }}
           intersectionArgs={{ once: true, rootMargin: "-5% 0%" }}
         >
-          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-sm-ltr">
+          <h1 className="text-red-400 text-start capitalize rtl:text-sm rtl:font-medium ltr:text-[11px]">
             {errorMessage}
           </h1>
         </AnimatedItem>

package/src/notion-ui/shimmer/shimmer.tsx

@@ -1,8 +1,14 @@
 import { cn } from "../../utils/cn";
 
-export interface ShimmerProps extends React.HTMLAttributes<HTMLDivElement> {}
+export interface ShimmerProps extends React.HTMLAttributes<HTMLDivElement> {
+  stop?: boolean;
+}
 
-export default function Shimmer({ className, children }: ShimmerProps) {
+export default function Shimmer({
+  stop = false,
+  className,
+  children,
+}: ShimmerProps) {
   return (
     <div
       className={cn("relative w-full overflow-hidden *:rounded-sm", className)}
@@ -30,7 +36,7 @@ export default function Shimmer({ className, children }: ShimmerProps) {
             var(--from-shimmer) 25%
           )`,
           backgroundSize: "1200px 100%",
-          animation: "shimmer 2.2s linear infinite",
+          animation: !stop ? "shimmer 2.2s linear infinite" : "",
         }}
       />
 

package/src/notion-ui/shining-text/shining-text.tsx

@@ -7,11 +7,7 @@ interface ShiningTextProps extends React.HTMLAttributes<HTMLSpanElement> {
   text: string;
 }
 
-export default function ShiningText({
-  text,
-  className,
-  ...props
-}: ShiningTextProps) {
+export function ShiningText({ text, className, ...props }: ShiningTextProps) {
   // Animate strictly left → right
   const styles = useSpring({
     from: { backgroundPosition: "-100% 0%" }, // start offscreen left
@@ -27,7 +23,7 @@ export default function ShiningText({
         ...styles,
       }}
       className={cn(
-        "bg-gradient-to-r from-gray-300 via-white to-gray-300", // left→right gradient
+        "bg-gradient-to-r text-md font-medium from-black via-gray-100 to-black", // left→right gradient
         "bg-clip-text text-transparent",
         className
       )}

package/src/notion-ui/sidebar/index.ts

@@ -0,0 +1,3 @@
+import Sidebar from "./sidebar";
+
+export default Sidebar;

package/src/notion-ui/sidebar/sidebar-item.tsx

@@ -0,0 +1,198 @@
+import { useMemo, useCallback, memo, useEffect, useState } from "react";
+import { ChevronRight } from "lucide-react";
+import { useLocation } from "react-router";
+import CachedSvg, {
+  CachedSvgProps,
+} from "@/components/notion-ui/cache-svg/cached-svg";
+import AnimatedItem from "@/components/notion-ui/animated-item";
+import { cn } from "@/utils/cn";
+
+export interface SubPermission {
+  id: number;
+  name: string;
+  is_category: boolean;
+}
+
+export type Permission = {
+  id: number;
+  visible: boolean;
+  permission: string;
+  icon: string;
+  sub: Map<number, SubPermission>;
+};
+
+export interface SidebarItemProps {
+  path: string;
+  isActive: boolean;
+  permission: Permission;
+  icon: CachedSvgProps;
+  navigateTo: (path: string) => void;
+  translate?: (key: string) => string;
+  classNames?: {};
+}
+
+export const SidebarItem = memo(function SidebarItem({
+  isActive,
+  navigateTo,
+  permission,
+  path,
+  icon,
+  translate,
+}: SidebarItemProps) {
+  const location = useLocation();
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  // Calculate categories and selectedSubId
+  const { categories, selectedSubId } = useMemo(() => {
+    const subs = Array.from(permission.sub.values()).filter(
+      (sub) => sub.is_category
+    );
+    const selectedId = Number(location.pathname.split("/").pop());
+    return { categories: subs, selectedSubId: selectedId };
+  }, [permission.sub, location.pathname]);
+
+  // Auto-open dropdown if current URL matches any category
+  useEffect(() => {
+    const matched = categories.find((sub) =>
+      location.pathname.includes(`${path}/${sub.id}`)
+    );
+    setShowDropdown(matched ? true : false);
+  }, [location.pathname, categories, path]);
+  useEffect(() => {
+    const handleCloseDropdowns = (e: Event) => {
+      const customEvent = e as CustomEvent;
+      if (customEvent.detail?.forceClose) {
+        setShowDropdown(false);
+      }
+    };
+
+    // Listen for close events
+    window.addEventListener("sidebar-close-dropdowns", handleCloseDropdowns);
+
+    return () => {
+      window.removeEventListener(
+        "sidebar-close-dropdowns",
+        handleCloseDropdowns
+      );
+    };
+  }, []);
+  const handleClick = useCallback(
+    (e: React.MouseEvent) => {
+      if (categories.length === 0) {
+        navigateTo(path);
+      } else {
+        setShowDropdown((prev) => !prev);
+        // Dispatch custom event to parent (Sidebar)
+        const expandEvent = new CustomEvent("sidebar-item-expand", {
+          bubbles: true, // This makes the event bubble up through DOM
+          composed: true, // This allows it to cross shadow DOM boundaries if any
+          detail: {
+            hasChildren: true,
+          },
+        });
+
+        // Dispatch from the clicked element
+        e.currentTarget.dispatchEvent(expandEvent);
+      }
+    },
+    [categories.length, navigateTo, path]
+  );
+
+  const handleCategoryClick = useCallback(
+    (cat: SubPermission) => {
+      navigateTo(`${path}/${cat.id}`);
+    },
+    [navigateTo, path]
+  );
+
+  const spring = useMemo(
+    () => ({
+      springProps: {
+        from: { opacity: 0, transform: "translateY(-8px)" },
+        config: { mass: 1, tension: 210, friction: 20 },
+        to: { opacity: 1, transform: "translateY(0px)" },
+      },
+      intersectionArgs: { rootMargin: "-10% 0%", once: true },
+    }),
+    []
+  );
+
+  const dropdownContent = useMemo(() => {
+    if (!showDropdown || categories.length === 0) return null;
+    return (
+      <div className="relative ltr:ml-5 rtl:mr-5 mt-1 mb-4 space-y-1 ltr:pl-2 rtl:pr-2 before:absolute before:top-3 before:bottom-0 rtl:before:right-1 ltr:before:left-1 before:w-px rounded-full before:bg-primary/30">
+        {categories.map((cat, index) => {
+          const selected = selectedSubId === cat.id;
+          return (
+            <AnimatedItem
+              key={cat.id}
+              springProps={{
+                ...spring.springProps,
+                delay: index * 100,
+                to: {
+                  ...spring.springProps.to,
+                  delay: index * 100,
+                },
+              }}
+              intersectionArgs={spring.intersectionArgs}
+            >
+              <div className="relative flex items-center before:absolute ltr:before:left-1 rtl:before:right-1 before:top-1/2 before:w-3 before:h-px before:bg-primary/40">
+                <button
+                  onClick={handleCategoryClick.bind(null, cat)}
+                  className={`cursor-pointer text-primary/80 ltr:ml-5 rtl:mr-5 rtl:text-sm rtl:font-bold ltr:text-xs flex items-center gap-x-2 py-1 px-2 w-[85%] rounded-sm transition-colors ${
+                    selected
+                      ? "font-semibold bg-tertiary/10 text-primary"
+                      : "hover:opacity-75"
+                  }`}
+                >
+                  {translate ? translate(cat.name) : cat.name}
+                </button>
+              </div>
+            </AnimatedItem>
+          );
+        })}
+      </div>
+    );
+  }, [
+    showDropdown,
+    categories,
+    selectedSubId,
+    spring,
+    handleCategoryClick,
+    translate,
+  ]);
+  return (
+    <>
+      <div
+        onClick={handleClick}
+        className={cn(
+          `grid grid-cols-[1fr_auto] ltr:py-2 rtl:p-1 ltr:pl-2.5 rtl:pr-2 ltr:mx-1 rtl:mx-1.5 text-primary items-center rtl:text-lg ltr:text-xs cursor-pointer rounded-md ${
+            isActive
+              ? `bg-tertiary/90 text-card font-semibold`
+              : "hover:opacity-75"
+          }`
+        )}
+        key={permission.permission}
+      >
+        <div className="flex items-center gap-x-4 w-full">
+          <CachedSvg {...icon} className={cn("rtl", icon.className)} />
+          <h1 className="truncate">
+            {translate
+              ? translate(permission.permission)
+              : permission.permission}
+          </h1>
+        </div>
+
+        {categories.length > 0 && (
+          <ChevronRight
+            className={`size-3.5 min-h-3.5 min-w-3.5 text-primary ltr:mr-2 transition-transform duration-300 ease-in-out ${
+              showDropdown ? "rotate-90" : "rtl:rotate-180"
+            }`}
+          />
+        )}
+      </div>
+
+      {dropdownContent}
+    </>
+  );
+}); // Pass custom comparison function