@navikt/ds-react 6.4.0 → 6.5.0

package/src/tabs/Tab.tsx

@@ -1,66 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
-import { BodyShort } from "../typography";
-import { OverridableComponent } from "../util/types";
-import { TabsContext } from "./context";
-
-export interface TabProps
-  extends Omit<React.HTMLAttributes<HTMLButtonElement>, "children"> {
-  /**
-   * Tab label
-   */
-  label?: React.ReactNode;
-  /**
-   * Tab Icon
-   */
-  icon?: React.ReactNode;
-  /**
-   * Value for state-handling
-   */
-  value: string;
-}
-
-export const Tab: OverridableComponent<TabProps, HTMLButtonElement> =
-  forwardRef(
-    (
-      { className, as: Component = "button", label, icon, value, ...rest },
-      ref,
-    ) => {
-      const context = useContext(TabsContext);
-
-      if (!label && !icon) {
-        console.error("<Tabs.Tab/> needs label/icon");
-        return null;
-      }
-
-      return (
-        <RadixTabs.Trigger value={value} asChild>
-          <Component
-            ref={ref}
-            className={cl(
-              "navds-tabs__tab",
-              `navds-tabs__tab--${context?.size ?? "medium"}`,
-              `navds-tabs__tab-icon--${context?.iconPosition}`,
-              className,
-              {
-                "navds-tabs__tab--icon-only": icon && !label,
-              },
-            )}
-            {...rest}
-          >
-            <BodyShort
-              as="span"
-              className="navds-tabs__tab-inner"
-              size={context?.size}
-            >
-              {icon}
-              {label}
-            </BodyShort>
-          </Component>
-        </RadixTabs.Trigger>
-      );
-    },
-  );
-
-export default Tab;

package/src/tabs/TabList.tsx

@@ -1,128 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import cl from "clsx";
-import React, {
-  forwardRef,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
-import { ChevronLeftIcon, ChevronRightIcon } from "@navikt/aksel-icons";
-import { debounce } from "../util";
-import { useMergeRefs } from "../util/hooks/useMergeRefs";
-import { TabsContext } from "./context";
-
-export interface TabListProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * `<Tabs.Tab />` elements
-   */
-  children: React.ReactNode;
-}
-
-export const TabList = forwardRef<HTMLDivElement, TabListProps>(
-  ({ className, ...rest }, ref) => {
-    const context = useContext(TabsContext);
-    const listRef = useRef<HTMLDivElement | null>(null);
-    const mergedRef = useMergeRefs(listRef, ref);
-
-    const [displayScroll, setDisplayScroll] = useState({
-      start: false,
-      end: false,
-    });
-
-    const updateScrollButtonState = useMemo(
-      () =>
-        debounce(() => {
-          if (!listRef?.current) return;
-          const { scrollWidth, clientWidth } = listRef.current;
-          const scrollLeft = listRef.current.scrollLeft;
-          // use 1 for the potential rounding error with browser zooms.
-          const showStartScroll = scrollLeft > 1;
-          const showEndScroll = scrollLeft < scrollWidth - clientWidth - 1;
-
-          setDisplayScroll((oldDisplayScroll) =>
-            showStartScroll === oldDisplayScroll.start &&
-            showEndScroll === oldDisplayScroll.end
-              ? oldDisplayScroll
-              : { start: showStartScroll, end: showEndScroll },
-          );
-        }),
-      [],
-    );
-
-    useEffect(() => {
-      const handleResize = () => updateScrollButtonState();
-      const win = listRef.current?.ownerDocument ?? document ?? window;
-      win.addEventListener("resize", handleResize);
-
-      let resizeObserver;
-
-      if (typeof ResizeObserver !== "undefined") {
-        resizeObserver = new ResizeObserver(handleResize);
-        resizeObserver.observe(listRef.current);
-      }
-
-      return () => {
-        win.removeEventListener("resize", handleResize);
-        if (resizeObserver) {
-          resizeObserver.disconnect();
-        }
-      };
-    }, [updateScrollButtonState]);
-
-    useEffect(() => {
-      updateScrollButtonState();
-    });
-
-    useEffect(() => {
-      return () => {
-        updateScrollButtonState.clear();
-      };
-    }, [updateScrollButtonState]);
-
-    const ScrollButton = ({
-      dir,
-      hidden,
-    }: {
-      dir: 1 | -1;
-      hidden: boolean;
-    }) => (
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-      <div
-        className={cl("navds-tabs__scroll-button", {
-          "navds-tabs__scroll-button--hidden": hidden,
-        })}
-        onClick={() => {
-          if (!listRef.current) return;
-          listRef.current.scrollLeft += dir * 100;
-        }}
-      >
-        {dir === -1 ? (
-          <ChevronLeftIcon title="scroll tilbake" />
-        ) : (
-          <ChevronRightIcon title="scroll neste" />
-        )}
-      </div>
-    );
-
-    const showSteppers = displayScroll.end || displayScroll.start;
-    return (
-      <div className="navds-tabs__tablist-wrapper">
-        {showSteppers && (
-          <ScrollButton dir={-1} hidden={!displayScroll.start} />
-        )}
-        <RadixTabs.TabsList
-          {...rest}
-          ref={mergedRef}
-          onScroll={updateScrollButtonState}
-          loop={context?.loop}
-          className={cl("navds-tabs__tablist", className)}
-        />
-        {showSteppers && <ScrollButton dir={1} hidden={!displayScroll.end} />}
-      </div>
-    );
-  },
-);
-
-export default TabList;

package/src/tabs/TabPanel.tsx

@@ -1,26 +0,0 @@
-import * as RadixTabs from "@radix-ui/react-tabs";
-import cl from "clsx";
-import React, { forwardRef } from "react";
-
-export interface TabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Tab panel content
-   */
-  children: React.ReactNode;
-  /**
-   * Value for state-handling
-   */
-  value: string;
-}
-
-const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
-  ({ className, ...rest }, ref) => (
-    <RadixTabs.TabsContent
-      {...rest}
-      ref={ref}
-      className={cl("navds-tabs__tabpanel", className)}
-    />
-  ),
-);
-
-export default TabPanel;

package/src/tabs/context.ts

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-
-interface TabsContextProps {
-  size: "medium" | "small";
-  loop: boolean;
-  iconPosition: "left" | "top";
-}
-
-export const TabsContext = createContext<TabsContextProps | null>(null);

package/src/toggle-group/ToggleItem.tsx

@@ -1,41 +0,0 @@
-import * as RadixToggleGroup from "@radix-ui/react-toggle-group";
-import cl from "clsx";
-import React, { forwardRef, useContext } from "react";
-import { BodyShort } from "../typography/BodyShort";
-import { ToggleGroupContext } from "./context";
-
-export interface ToggleGroupItemProps
-  extends React.HTMLAttributes<HTMLButtonElement> {
-  /**
-   * Content
-   */
-  children: React.ReactNode;
-  /**
-   * Value for state-handling
-   */
-  value: string;
-}
-
-const ToggleItem = forwardRef<HTMLButtonElement, ToggleGroupItemProps>(
-  ({ className, children, ...rest }, ref) => {
-    const context = useContext(ToggleGroupContext);
-
-    return (
-      <RadixToggleGroup.Item
-        {...rest}
-        ref={ref}
-        className={cl("navds-toggle-group__button", className)}
-      >
-        <BodyShort
-          as="span"
-          className="navds-toggle-group__button-inner"
-          size={context?.size}
-        >
-          {children}
-        </BodyShort>
-      </RadixToggleGroup.Item>
-    );
-  },
-);
-
-export default ToggleItem;

package/src/toggle-group/context.ts

@@ -1,9 +0,0 @@
-import { createContext } from "react";
-
-interface ToggleContextProps {
-  size: "medium" | "small";
-}
-
-export const ToggleGroupContext = createContext<ToggleContextProps | null>(
-  null,
-);