@telia/teddy 0.4.4 → 0.4.6

package/dist/components/scroll-area/scroll-area-bar.js

@@ -1,235 +1,8 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import React__default from "react";
-import clsx from "clsx";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { Button as Button$1 } from "../button/button.js";
-import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
-import "../../assets/sprite.1321fab0-teddy.svg";
-import { Icon } from "../icon/icon.js";
-import { Slottable } from "@radix-ui/react-slot";
-const styles = {
-  "teddy-scroll-area": "_teddy-scroll-area_1r6mf_1",
-  "teddy-scroll-area__viewport": "_teddy-scroll-area__viewport_1r6mf_5",
-  "teddy-scroll-area__scrollbar": "_teddy-scroll-area__scrollbar_1r6mf_11",
-  "teddy-scroll-area__scrollbar--hidden": "_teddy-scroll-area__scrollbar--hidden_1r6mf_32",
-  "teddy-scroll-area__thumb": "_teddy-scroll-area__thumb_1r6mf_45",
-  "teddy-scroll-area__corner": "_teddy-scroll-area__corner_1r6mf_62",
-  "teddy-scroll-area__button": "_teddy-scroll-area__button_1r6mf_65",
-  "teddy-scroll-area__button--hidden": "_teddy-scroll-area__button--hidden_1r6mf_93"
-};
-const Scrollbar = React__default.forwardRef(
-  ({ className, ...props }, forwardRef) => {
-    const context = React__default.useContext(RootContext);
-    const classes = clsx(
-      [styles[`${rootClassName}__scrollbar`]],
-      {
-        [styles[`${rootClassName}__scrollbar--hidden`]]: (context == null ? void 0 : context.variant) !== "scrollbar"
-      },
-      className
-    );
-    return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Scrollbar, { ...props, ref: forwardRef, className: classes });
-  }
-);
-Scrollbar.displayName = "Scrollbar";
-const Thumb = React__default.forwardRef(
-  ({ className, ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}__thumb`]], className);
-    return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Thumb, { ...props, ref: forwardRef, className: classes });
-  }
-);
-Thumb.displayName = "Thumb";
-const Corner = React__default.forwardRef(
-  ({ className, ...props }, forwardRef) => {
-    const classes = clsx([styles[`${rootClassName}__corner`]], className);
-    return /* @__PURE__ */ jsx(ScrollAreaPrimitive.Corner, { ...props, ref: forwardRef, className: classes });
-  }
-);
-Corner.displayName = "Corner";
-const directionToAriaLabel = {
-  up: "Scroll opp",
-  down: "Scroll ned",
-  left: "Scroll til venstre",
-  right: "Scroll til høyre"
-};
-const directionToIconName = {
-  up: "chevron-up",
-  down: "chevron-down",
-  left: "chevron-left",
-  right: "chevron-right"
-};
-const Button = React__default.forwardRef(
-  ({ className, hidden, direction = "right", children, ...props }, forwardRef) => {
-    const scrollAreaContext = React__default.useContext(RootContext);
-    const shouldBeHidden = hidden ?? (direction === "up" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollTop) || direction === "down" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollBottom) || direction === "left" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollLeft) || direction === "right" && !(scrollAreaContext == null ? void 0 : scrollAreaContext.hasScrollRight));
-    const buttonClasses = clsx(
-      styles[`${rootClassName}__button`],
-      {
-        [styles[`${rootClassName}__button--hidden`]]: shouldBeHidden
-      },
-      className
-    );
-    const handleButtonClick = composeEventHandlers(props.onClick, (event) => {
-      if (event.defaultPrevented)
-        return;
-      const scrollAreaElement = scrollAreaContext == null ? void 0 : scrollAreaContext.scrollRef;
-      if (!scrollAreaElement)
-        return;
-      const scrollableItems = Array.from(scrollAreaElement.querySelectorAll("[data-in-view]"));
-      const isHorizontalScroll = direction === "left" || direction === "right";
-      const scrollProperty = isHorizontalScroll ? "left" : "top";
-      const isScrollingBackward = direction === "left" || direction === "up";
-      const currentScrollPosition = isHorizontalScroll ? scrollAreaElement.scrollLeft : scrollAreaElement.scrollTop;
-      const viewportSize = isHorizontalScroll ? scrollAreaElement.clientWidth : scrollAreaElement.clientHeight;
-      const scrollButtonSize = isHorizontalScroll ? event.currentTarget.offsetWidth : event.currentTarget.offsetHeight;
-      const visibleAreaStart = currentScrollPosition + (isScrollingBackward ? scrollButtonSize : 0);
-      const visibleAreaEnd = currentScrollPosition + viewportSize - (!isScrollingBackward ? scrollButtonSize : 0);
-      const getItemBounds = (item) => {
-        const itemStart = isHorizontalScroll ? item.offsetLeft : item.offsetTop;
-        const itemEnd = itemStart + (isHorizontalScroll ? item.offsetWidth : item.offsetHeight);
-        return { itemStart, itemEnd };
-      };
-      const isItemFullyVisible = (item) => {
-        const { itemStart, itemEnd } = getItemBounds(item);
-        return itemStart >= visibleAreaStart && itemEnd <= visibleAreaEnd;
-      };
-      const fullyVisibleItemIndices = scrollableItems.map((item, index) => {
-        const isInView = item.getAttribute("data-in-view") === "true";
-        const isFullyVisible = isItemFullyVisible(item);
-        return isInView && isFullyVisible ? index : -1;
-      }).filter((index) => index !== -1);
-      const userPrefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
-      const scrollBehavior = userPrefersReducedMotion ? "auto" : (scrollAreaContext == null ? void 0 : scrollAreaContext.scrollBehavior) ?? "smooth";
-      function calculateScrollAmount() {
-        if (fullyVisibleItemIndices.length <= 0) {
-          const defaultScrollAmount = viewportSize - scrollButtonSize * 2;
-          return isScrollingBackward ? currentScrollPosition - defaultScrollAmount : currentScrollPosition + defaultScrollAmount;
-        }
-        const isRightToLeft = scrollAreaContext == null ? void 0 : scrollAreaContext.isRtl;
-        const effectiveBackwardDirection = isRightToLeft ? !isScrollingBackward : isScrollingBackward;
-        const referenceItemIndex = effectiveBackwardDirection ? fullyVisibleItemIndices[0] : fullyVisibleItemIndices[fullyVisibleItemIndices.length - 1];
-        const targetItemIndex = effectiveBackwardDirection ? referenceItemIndex > 0 ? referenceItemIndex - 1 : referenceItemIndex : referenceItemIndex < scrollableItems.length - 1 ? referenceItemIndex + 1 : referenceItemIndex;
-        const targetItem = scrollableItems[targetItemIndex];
-        const { itemStart, itemEnd } = getItemBounds(targetItem);
-        const targetItemSize = itemEnd - itemStart;
-        return isScrollingBackward ? itemStart + targetItemSize - viewportSize + scrollButtonSize : itemStart - scrollButtonSize;
-      }
-      const newScrollPosition = calculateScrollAmount();
-      scrollAreaElement.scrollTo({
-        [scrollProperty]: newScrollPosition,
-        behavior: scrollBehavior
-      });
-    });
-    return /* @__PURE__ */ jsx(
-      Button$1,
-      {
-        iconOnly: true,
-        variant: "primary",
-        "aria-label": directionToAriaLabel[direction],
-        "data-direction": direction,
-        tabIndex: shouldBeHidden ? -1 : void 0,
-        ...props,
-        onClick: handleButtonClick,
-        ref: forwardRef,
-        className: buttonClasses,
-        children: children || /* @__PURE__ */ jsx(Icon, { name: directionToIconName[direction] })
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-const rootClassName = "teddy-scroll-area";
-const RootContext = React__default.createContext(void 0);
-function isScrollable(element) {
-  if (!element)
-    return null;
-  const buffer = 1;
-  const scrollLeft = element.scrollLeft;
-  const scrollWidth = element.scrollWidth;
-  const offsetWidth = element.offsetWidth;
-  const maxScrollLeft = scrollWidth - offsetWidth;
-  const isRtl = getComputedStyle(element).direction === "rtl";
-  let left;
-  let right;
-  if (isRtl) {
-    const normalizedScrollLeft = Math.abs(scrollLeft);
-    left = normalizedScrollLeft < maxScrollLeft - buffer;
-    right = normalizedScrollLeft > buffer;
-  } else {
-    left = scrollLeft > buffer;
-    right = scrollLeft < maxScrollLeft - buffer;
-  }
-  const scrollTop = element.scrollTop;
-  const maxScrollTop = element.scrollHeight - element.offsetHeight;
-  const top = scrollTop > buffer;
-  const bottom = scrollTop < maxScrollTop - buffer;
-  return {
-    left,
-    right,
-    top,
-    bottom
-  };
-}
-const Root = React__default.forwardRef(
-  ({ className, variant, scrollBehavior = "smooth", children, ...props }, forwardRef) => {
-    const [scrollRef, setScrollRef] = React__default.useState(null);
-    const [hasScroll, setHasScroll] = React__default.useState(null);
-    const initialScrollable = isScrollable(scrollRef);
-    const hasScrollLeft = hasScroll ? hasScroll.left : initialScrollable == null ? void 0 : initialScrollable.left;
-    const hasScrollRight = hasScroll ? hasScroll.right : initialScrollable == null ? void 0 : initialScrollable.right;
-    const hasScrollTop = hasScroll ? hasScroll.top : initialScrollable == null ? void 0 : initialScrollable.top;
-    const hasScrollBottom = hasScroll ? hasScroll.bottom : initialScrollable == null ? void 0 : initialScrollable.bottom;
-    const hasScrollHorizontal = hasScrollLeft || hasScrollRight;
-    const hasScrollVertical = hasScrollTop || hasScrollBottom;
-    function handleScroll(e) {
-      const target = e.currentTarget;
-      setHasScroll(isScrollable(target));
-    }
-    const classes = clsx([styles[`${rootClassName}`]], className);
-    return /* @__PURE__ */ jsx(
-      RootContext.Provider,
-      {
-        value: {
-          scrollRef,
-          variant,
-          hasScrollTop,
-          hasScrollBottom,
-          hasScrollLeft,
-          hasScrollRight,
-          scrollBehavior,
-          isRtl: props.dir === "rtl"
-        },
-        children: /* @__PURE__ */ jsxs(ScrollAreaPrimitive.Root, { ...props, ref: forwardRef, className: classes, children: [
-          /* @__PURE__ */ jsx(
-            ScrollAreaPrimitive.Viewport,
-            {
-              onScroll: handleScroll,
-              ref: setScrollRef,
-              className: clsx([styles[`${rootClassName}__viewport`]]),
-              children: /* @__PURE__ */ jsx(Slottable, { children })
-            }
-          ),
-          /* @__PURE__ */ jsx(Scrollbar, { orientation: "vertical", children: /* @__PURE__ */ jsx(Thumb, {}) }),
-          /* @__PURE__ */ jsx(Scrollbar, { orientation: "horizontal", children: /* @__PURE__ */ jsx(Thumb, {}) }),
-          /* @__PURE__ */ jsx(Corner, {}),
-          variant === "button" && /* @__PURE__ */ jsxs(Fragment, { children: [
-            hasScrollVertical && /* @__PURE__ */ jsx(Button, { direction: "up", hidden: !hasScrollTop }),
-            hasScrollVertical && /* @__PURE__ */ jsx(Button, { direction: "down", hidden: !hasScrollBottom }),
-            hasScrollHorizontal && /* @__PURE__ */ jsx(Button, { direction: "left", hidden: !hasScrollLeft }),
-            hasScrollHorizontal && /* @__PURE__ */ jsx(Button, { direction: "right", hidden: !hasScrollRight })
-          ] })
-        ] })
-      }
-    );
-  }
-);
-Root.displayName = "Root";
+import "react/jsx-runtime";
+import "react";
+import "clsx";
+import "@radix-ui/react-scroll-area";
+import { S } from "./scroll-area-thumb.js";
 export {
-  Button as B,
-  Corner as C,
-  Root as R,
-  Scrollbar,
-  Thumb as T,
-  RootContext as a,
-  rootClassName as r,
-  styles as s
+  S as Scrollbar
 };

package/dist/components/scroll-area/scroll-area-button.cjs

@@ -3,9 +3,9 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("react/jsx-runtime");
 require("react");
 require("clsx");
-const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
+const components_scrollArea_scrollAreaThumb = require("./scroll-area-thumb.cjs");
 require("../button/button.cjs");
 require("../../utils/composeEventHandlers.cjs");
 require("../../assets/sprite.1321fab0-teddy.svg");
 require("../icon/icon.cjs");
-exports.Button = components_scrollArea_scrollAreaBar.Button;
+exports.Button = components_scrollArea_scrollAreaThumb.Button;

package/dist/components/scroll-area/scroll-area-button.d.ts

@@ -17,7 +17,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("default" | "dashed") | undefined;
 } & {
     iconOnly: true;
@@ -29,7 +29,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<Omit<Omit<Reac
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;
     size?: "sm" | "md" | "lg" | undefined;
-    variant?: "primary" | "text" | "list-item" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
+    variant?: "text" | "list-item" | "primary" | "secondary" | "destructive" | "tertiary-purple" | "expressive" | "primary-negative" | "secondary-negative" | "destructive-negative" | "tertiary-purple-negative" | "text-negative" | "expressive-negative" | undefined;
     borderStyle?: ("default" | "dashed") | undefined;
 } & {
     iconOnly?: false | undefined;

package/dist/components/scroll-area/scroll-area-button.js

@@ -1,7 +1,7 @@
 import "react/jsx-runtime";
 import "react";
 import "clsx";
-import { B } from "./scroll-area-bar.js";
+import { B } from "./scroll-area-thumb.js";
 import "../button/button.js";
 import "../../utils/composeEventHandlers.js";
 import "../../assets/sprite.1321fab0-teddy.svg";

package/dist/components/scroll-area/scroll-area-corner.cjs

@@ -4,5 +4,5 @@ require("react/jsx-runtime");
 require("react");
 require("clsx");
 require("@radix-ui/react-scroll-area");
-const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
-exports.Corner = components_scrollArea_scrollAreaBar.Corner;
+const components_scrollArea_scrollAreaThumb = require("./scroll-area-thumb.cjs");
+exports.Corner = components_scrollArea_scrollAreaThumb.Corner;

package/dist/components/scroll-area/scroll-area-corner.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "clsx";
 import "@radix-ui/react-scroll-area";
-import { C } from "./scroll-area-bar.js";
+import { C } from "./scroll-area-thumb.js";
 export {
   C as Corner
 };

package/dist/components/scroll-area/scroll-area-item.cjs

@@ -3,7 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
 const clsx = require("clsx");
-const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
+const components_scrollArea_scrollAreaThumb = require("./scroll-area-thumb.cjs");
 const reactSlot = require("@radix-ui/react-slot");
 const utils_composeEventHandlers = require("../../utils/composeEventHandlers.cjs");
 const utils_composeRefs = require("../../utils/composeRefs.cjs");
@@ -24,7 +24,7 @@ function scrollItemToCenter(item, scrollArea, scrollBehavior) {
 }
 const Item = React.forwardRef(
   ({ className, asChild, isSelected, scrollBehavior, scrollBehaviorOnMount, ...props }, forwardRef) => {
-    const classes = clsx([components_scrollArea_scrollAreaBar.styles[`${components_scrollArea_scrollAreaBar.rootClassName}__item`]], className);
+    const classes = clsx([components_scrollArea_scrollAreaThumb.styles[`${components_scrollArea_scrollAreaThumb.rootClassName}__item`]], className);
     const Comp = asChild ? reactSlot.Slot : "div";
     const ref = React.useRef(null);
     const { ref: inViewRef, inView } = reactIntersectionObserver.useInView({
@@ -37,7 +37,7 @@ const Item = React.forwardRef(
       [inViewRef]
     );
     const composedRef = utils_composeRefs.useComposedRefs(ref, forwardRef, adjustedInViewRef);
-    const context = React.useContext(components_scrollArea_scrollAreaBar.RootContext);
+    const context = React.useContext(components_scrollArea_scrollAreaThumb.RootContext);
     const internalScrollBehavior = scrollBehavior ?? (context == null ? void 0 : context.scrollBehavior) ?? "smooth";
     React.useEffect(() => {
       if (isSelected && ref.current && (context == null ? void 0 : context.scrollRef)) {

package/dist/components/scroll-area/scroll-area-item.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import React__default from "react";
 import clsx from "clsx";
-import { s as styles, r as rootClassName, a as RootContext } from "./scroll-area-bar.js";
+import { s as styles, r as rootClassName, a as RootContext } from "./scroll-area-thumb.js";
 import { Slot } from "@radix-ui/react-slot";
 import { composeEventHandlers } from "../../utils/composeEventHandlers.js";
 import { useComposedRefs } from "../../utils/composeRefs.js";

package/dist/components/scroll-area/scroll-area-root.cjs

@@ -4,8 +4,7 @@ require("react/jsx-runtime");
 require("react");
 require("clsx");
 require("@radix-ui/react-scroll-area");
-const components_scrollArea_scrollAreaBar = require("./scroll-area-bar.cjs");
-require("@radix-ui/react-slot");
-exports.Root = components_scrollArea_scrollAreaBar.Root;
-exports.RootContext = components_scrollArea_scrollAreaBar.RootContext;
-exports.rootClassName = components_scrollArea_scrollAreaBar.rootClassName;
+const components_scrollArea_scrollAreaThumb = require("./scroll-area-thumb.cjs");
+exports.Root = components_scrollArea_scrollAreaThumb.Root;
+exports.RootContext = components_scrollArea_scrollAreaThumb.RootContext;
+exports.rootClassName = components_scrollArea_scrollAreaThumb.rootClassName;

package/dist/components/scroll-area/scroll-area-root.d.ts

@@ -2,15 +2,26 @@ import { default as React } from 'react';
 
 import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
 export declare const rootClassName = "teddy-scroll-area";
-type Variant = 'scrollbar' | 'button';
+type Variant = 'scrollbar' | 'button' | 'hidden';
 export type RootProps = React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
     /** There are three different variants
      *  - `scrollbar`: The scrollbar will be visible on hover and scroll
      *  - `button`: There will be buttons to scroll
-     *  - `undefined`: The scrollbar will not be visible
+     *  - `hidden`: The scrollbar will not be visible
      */
     variant?: Variant | undefined;
+    /**
+     * The scroll behavior of the scroll area
+     */
     scrollBehavior?: 'smooth' | 'auto';
+    /**
+     * To style the viewport, viewport is the inner container of the scroll area
+     */
+    viewPortClassName?: string;
+    /**
+     * To style the scrollbar
+     */
+    barClassName?: string;
 };
 type RootContextType = {
     scrollRef: HTMLDivElement | null;
@@ -27,9 +38,20 @@ export declare const Root: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimit
     /** There are three different variants
      *  - `scrollbar`: The scrollbar will be visible on hover and scroll
      *  - `button`: There will be buttons to scroll
-     *  - `undefined`: The scrollbar will not be visible
+     *  - `hidden`: The scrollbar will not be visible
      */
     variant?: Variant | undefined;
+    /**
+     * The scroll behavior of the scroll area
+     */
     scrollBehavior?: "auto" | "smooth" | undefined;
+    /**
+     * To style the viewport, viewport is the inner container of the scroll area
+     */
+    viewPortClassName?: string | undefined;
+    /**
+     * To style the scrollbar
+     */
+    barClassName?: string | undefined;
 } & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/components/scroll-area/scroll-area-root.js

@@ -2,8 +2,7 @@ import "react/jsx-runtime";
 import "react";
 import "clsx";
 import "@radix-ui/react-scroll-area";
-import { R, a, r } from "./scroll-area-bar.js";
-import "@radix-ui/react-slot";
+import { R, a, r } from "./scroll-area-thumb.js";
 export {
   R as Root,
   a as RootContext,