@rovula/ui 0.0.69 → 0.0.70

package/dist/cjs/types/components/FocusedScrollView/FocusedScrollView.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+type ScrollAlign = "start" | "center" | "end";
+type FocusedScrollViewProps = {
+    selectedKey?: string;
+    children: ReactNode;
+    direction?: "vertical" | "horizontal";
+    className?: string;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    scrollAlign?: ScrollAlign;
+};
+export declare const FocusedScrollView: React.FC<FocusedScrollViewProps>;
+export {};

package/dist/cjs/types/components/FocusedScrollView/FocusedScrollView.stories.d.ts

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FocusedScrollView } from "./FocusedScrollView";
+declare const meta: Meta<typeof FocusedScrollView>;
+export default meta;
+type Story = StoryObj<typeof FocusedScrollView>;
+export declare const VerticalScroll: Story;
+export declare const HorizontalScroll: Story;

package/dist/cjs/types/index.d.ts

@@ -33,6 +33,7 @@ export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
+export * from "./components/FocusedScrollView/FocusedScrollView";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/components/FocusedScrollView/FocusedScrollView.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, cloneElement, isValidElement, } from "react";
+export const FocusedScrollView = ({ selectedKey, children, direction = "vertical", className, containerProps, scrollAlign = "center", }) => {
+    const containerRef = useRef(null);
+    const itemRefs = useRef({});
+    const scrollToItem = (key) => {
+        const container = containerRef.current;
+        const item = itemRefs.current[key];
+        if (container && item) {
+            if (direction === "vertical") {
+                const containerTop = container.getBoundingClientRect().top;
+                const itemTop = item.getBoundingClientRect().top;
+                const offset = itemTop - containerTop + container.scrollTop;
+                const containerHeight = container.clientHeight;
+                const itemHeight = item.offsetHeight;
+                let targetTop = offset;
+                if (scrollAlign === "center") {
+                    targetTop = offset - (containerHeight / 2 - itemHeight / 2);
+                }
+                else if (scrollAlign === "end") {
+                    targetTop = offset + (itemHeight - containerHeight);
+                }
+                container.scrollTo({
+                    top: targetTop,
+                    behavior: "smooth",
+                });
+            }
+            else if (direction === "horizontal") {
+                const containerLeft = container.getBoundingClientRect().left;
+                const itemLeft = item.getBoundingClientRect().left;
+                const offset = itemLeft - containerLeft + container.scrollLeft;
+                const containerWidth = container.clientWidth;
+                const itemWidth = item.offsetWidth;
+                let targetLeft = offset;
+                if (scrollAlign === "center") {
+                    targetLeft = offset - (containerWidth / 2 - itemWidth / 2);
+                }
+                else if (scrollAlign === "end") {
+                    targetLeft = offset + (itemWidth - containerWidth);
+                }
+                container.scrollTo({
+                    left: targetLeft,
+                    behavior: "smooth",
+                });
+            }
+        }
+    };
+    useEffect(() => {
+        if (selectedKey) {
+            scrollToItem(selectedKey);
+        }
+    }, [selectedKey, direction, scrollAlign]);
+    const enhancedChildren = Array.isArray(children)
+        ? children.map((child) => {
+            if (isValidElement(child) && child.key) {
+                return cloneElement(child, {
+                    // @ts-ignore
+                    ref: (el) => {
+                        itemRefs.current[String(child.key)] = el;
+                    },
+                });
+            }
+            return child;
+        })
+        : children;
+    return (_jsx("div", Object.assign({ ref: containerRef, className: `overflow-auto ${direction === "vertical" ? "max-h-60" : "max-w-full whitespace-nowrap"} ${className !== null && className !== void 0 ? className : ""}` }, containerProps, { children: enhancedChildren })));
+};

package/dist/components/FocusedScrollView/FocusedScrollView.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FocusedScrollView } from "./FocusedScrollView";
+const meta = {
+    title: "Components/FocusedScrollView",
+    component: FocusedScrollView,
+    args: {
+        direction: "vertical",
+        scrollAlign: "center",
+        className: "border border-input-default-stroke rounded",
+    },
+};
+export default meta;
+const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);
+export const VerticalScroll = {
+    render: (args) => {
+        const [selected, setSelected] = useState("item-5");
+        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-20"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 20" }), _jsx("button", { onClick: () => setSelected("item-29"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 30" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `px-4 py-2 ${selected === `item-${index + 1}`
+                            ? "bg-secondary text-secondary-foreground"
+                            : "bg-white"}`, children: item }, `item-${index + 1}`))) }))] }));
+    },
+};
+export const HorizontalScroll = {
+    args: {
+        direction: "horizontal",
+    },
+    render: (args) => {
+        const [selected, setSelected] = useState("item-15");
+        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-15"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 15" }), _jsx("button", { onClick: () => setSelected("item-25"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 25" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `inline-block w-28 h-12 mx-2 text-center leading-[3rem] rounded ${selected === `item-${index + 1}`
+                            ? "bg-secondary text-secondary-foreground"
+                            : "bg-gray-200"}`, children: item }, `item-${index + 1}`))) }))] }));
+    },
+};

package/dist/esm/bundle.css

@@ -675,6 +675,10 @@ input[type=number] {
   margin-left: -0.5rem;
   margin-right: -0.5rem;
 }
+.mx-2{
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
 .mx-4{
   margin-left: 1rem;
   margin-right: 1rem;
@@ -744,6 +748,9 @@ input[type=number] {
 .block{
   display: block;
 }
+.inline-block{
+  display: inline-block;
+}
 .flex{
   display: flex;
 }
@@ -906,6 +913,9 @@ input[type=number] {
 .w-2{
   width: 0.5rem;
 }
+.w-28{
+  width: 7rem;
+}
 .w-3{
   width: 0.75rem;
 }
@@ -974,6 +984,9 @@ input[type=number] {
   min-width: -moz-fit-content;
   min-width: fit-content;
 }
+.max-w-full{
+  max-width: 100%;
+}
 .max-w-lg{
   max-width: 32rem;
 }
@@ -1185,6 +1198,9 @@ input[type=number] {
 .text-ellipsis{
   text-overflow: ellipsis;
 }
+.whitespace-nowrap{
+  white-space: nowrap;
+}
 .rounded{
   border-radius: 0.25rem;
 }
@@ -2669,6 +2685,10 @@ input[type=number] {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-warning-8) calc(100% * var(--tw-bg-opacity, 1)), transparent);
 }
+.bg-white{
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
+}
 .bg-white-transparent-12{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--other-transparency-white-12) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -3184,6 +3204,9 @@ input[type=number] {
 .capitalize{
   text-transform: capitalize;
 }
+.leading-\[3rem\]{
+  line-height: 3rem;
+}
 .leading-none{
   line-height: 1;
 }