@navikt/ds-react 1.0.0-rc.2 → 1.0.0-rc.3

package/src/pagination/PaginationItem.tsx

@@ -1,9 +1,8 @@
 import React, { forwardRef } from "react";
 import cl from "clsx";
-import { Button, OverridableComponent } from "..";
+import { Button, ButtonProps, OverridableComponent } from "..";
 
-export interface PaginationItemProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+export interface PaginationItemProps extends ButtonProps {
   children: React.ReactNode;
   /**
    * Sets selected styling if true

package/src/read-more/ReadMore.tsx

@@ -1,9 +1,9 @@
 import React, { forwardRef, useState } from "react";
 import cl from "clsx";
-import { Collapse, UnmountClosed } from "react-collapse";
 import { Expand } from "@navikt/ds-icons";
 import { BodyLong } from "../typography";
 import { ExpandFilled } from "@navikt/ds-icons";
+import AnimateHeight from "../util/AnimateHeight";
 
 export interface ReadMoreProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -25,11 +25,6 @@ export interface ReadMoreProps
    * @default false
    */
   defaultOpen?: boolean;
-  /**
-   * Removes content-element from dom when closed
-   * @default false
-   */
-  renderContentWhenClosed?: boolean;
   /**
    * Changes fontsize for content
    * @default false
@@ -42,7 +37,6 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     {
       className,
       header,
-      renderContentWhenClosed = false,
       children,
       open,
       defaultOpen = false,
@@ -53,27 +47,25 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
     ref
   ) => {
     const [internalOpen, setInternalOpen] = useState<boolean>(defaultOpen);
-    const CollapseComponent = renderContentWhenClosed
-      ? Collapse
-      : UnmountClosed;
 
     const isOpened = open ?? internalOpen;
 
     return (
-      <div>
+      <div
+        className={cl(
+          "navds-read-more",
+          `navds-read-more--${size}`,
+          className,
+          { "navds-read-more--open": isOpened }
+        )}
+      >
         <button
-          type="button"
           {...rest}
-          className={cl(
-            "navds-read-more",
-            "navds-body-short",
-            `navds-read-more--${size}`,
-            className,
-            {
-              "navds-read-more--open": isOpened,
-              "navds-body-short--small": size === "small",
-            }
-          )}
+          ref={ref}
+          type="button"
+          className={cl("navds-read-more__button", "navds-body-short", {
+            "navds-body-short--small": size === "small",
+          })}
           onClick={(e) => {
             if (open === undefined) {
               setInternalOpen((isOpen) => !isOpen);
@@ -81,22 +73,19 @@ export const ReadMore = forwardRef<HTMLButtonElement, ReadMoreProps>(
             onClick?.(e);
           }}
           aria-expanded={isOpened}
-          ref={ref}
         >
-          <Expand className={"navds-read-more__expand-icon"} aria-hidden />
+          <Expand className="navds-read-more__expand-icon" aria-hidden />
           <ExpandFilled
-            className={
-              "navds-read-more__expand-icon navds-read-more__expand-icon--filled"
-            }
+            className="navds-read-more__expand-icon navds-read-more__expand-icon--filled"
             aria-hidden
           />
           <span>{header}</span>
         </button>
-        <CollapseComponent isOpened={isOpened}>
+        <AnimateHeight height={isOpened ? "auto" : 0} duration={250}>
           <BodyLong as="div" className="navds-read-more__content" size={size}>
             {children}
           </BodyLong>
-        </CollapseComponent>
+        </AnimateHeight>
       </div>
     );
   }

package/src/read-more/readmore.stories.tsx

@@ -22,7 +22,7 @@ export const Default = (props) => {
       open={props.controlled ? state : undefined}
       onClick={() => setState((x) => !x)}
       header="Grunnen til at vi spør om dette og i tillegg ber om vedlegg"
-      {...props}
+      size={props.size}
     >
       Command station, this is ST 321. Code Clearance Blue. We're starting our
       approach. Deactivate the security shield.

package/src/table/ExpandableRow.tsx

@@ -1,10 +1,10 @@
-import React, { forwardRef, useState } from "react";
-import cl from "clsx";
-import Row, { RowProps } from "./Row";
-import DataCell from "./DataCell";
-import { UnmountClosed } from "react-collapse";
 import { Expand, ExpandFilled } from "@navikt/ds-icons";
+import cl from "clsx";
+import React, { forwardRef, useState } from "react";
 import { useId } from "..";
+import AnimateHeight from "../util/AnimateHeight";
+import DataCell from "./DataCell";
+import Row, { RowProps } from "./Row";
 
 export interface ExpandableRowProps extends RowProps {
   /**
@@ -104,15 +104,14 @@ export const ExpandableRow: ExpandableRowType = forwardRef(
         </Row>
         <tr className="navds-table__expanded-row" aria-hidden={!isOpen} id={id}>
           <td colSpan={999} className="navds-table__expanded-row-cell">
-            <UnmountClosed
-              isOpened={isOpen}
-              theme={{
-                collapse: "navds-table__expanded-row-collapse",
-                content: "navds-table__expanded-row-content",
-              }}
+            <AnimateHeight
+              className="navds-table__expanded-row-collapse"
+              innerClassName="navds-table__expanded-row-content"
+              height={isOpen ? "auto" : 0}
+              duration={250}
             >
               {content}
-            </UnmountClosed>
+            </AnimateHeight>
           </td>
         </tr>
       </>

package/src/tabs/Tab.tsx

@@ -24,15 +24,7 @@ export type TabType = OverridableComponent<TabProps, HTMLButtonElement>;
 
 export const Tab: TabType = forwardRef(
   (
-    {
-      className,
-      as: Component = "button",
-      label,
-      icon,
-      iconPosition,
-      value,
-      ...rest
-    },
+    { className, as: Component = "button", label, icon, value, ...rest },
     ref
   ) => {
     const context = useContext(TabsContext);

package/src/util/AnimateHeight.tsx

@@ -0,0 +1,240 @@
+/* https://github.com/Stanko/react-animate-height/blob/v3/src/index.tsx */
+import React, { CSSProperties, useEffect, useRef, useState } from "react";
+
+// ------------------ Types
+
+export type Height = "auto" | number | `${number}%`;
+type Timeout = ReturnType<typeof setTimeout>;
+type Overflow = "auto" | "visible" | "hidden" | undefined;
+
+// ------------------ Helpers
+
+function isNumber(n: string) {
+  const number = parseFloat(n);
+  return !isNaN(number) && isFinite(number);
+}
+
+function isPercentage(height: Height) {
+  // Percentage height
+  return (
+    typeof height === "string" &&
+    height[height.length - 1] === "%" &&
+    isNumber(height.substring(0, height.length - 1))
+  );
+}
+
+function hideContent(element: HTMLDivElement | null, height: Height) {
+  // Check for element?.style is added cause this would fail in tests (react-test-renderer)
+  // Read more here: https://github.com/Stanko/react-animate-height/issues/17
+  if (height === 0 && element?.style) {
+    element.style.display = "none";
+  }
+}
+
+function showContent(element: HTMLDivElement | null, height: Height) {
+  // Check for element?.style is added cause this would fail in tests (react-test-renderer)
+  // Read more here: https://github.com/Stanko/react-animate-height/issues/17
+  if (height === 0 && element?.style) {
+    element.style.display = "";
+  }
+}
+
+// ------------------ Component
+
+interface AnimateHeightProps extends React.HTMLAttributes<HTMLDivElement> {
+  duration?: number;
+  easing?: string;
+  height: Height;
+  innerClassName?: string;
+}
+
+const AnimateHeight: React.FC<AnimateHeightProps> = ({
+  children,
+  className,
+  innerClassName,
+  duration: userDuration = 250,
+  easing = "ease",
+  height,
+  ...props
+}) => {
+  // ------------------ Initialization
+  const prevHeight = useRef<Height>(height);
+  const contentElement = useRef<HTMLDivElement>(null);
+
+  const animationClassesTimeoutID = useRef<Timeout>();
+  const timeoutID = useRef<Timeout>();
+
+  const isBrowser = typeof window !== "undefined";
+
+  const prefersReducedMotion = useRef<boolean>(
+    isBrowser && window.matchMedia
+      ? window.matchMedia("(prefers-reduced-motion)").matches
+      : false
+  );
+
+  const duration = prefersReducedMotion.current ? 0 : userDuration;
+
+  let initHeight: Height = height;
+  let initOverflow: Overflow = "visible";
+
+  if (typeof initHeight === "number") {
+    // Reset negative height to 0
+    initHeight = height < 0 ? 0 : height;
+    initOverflow = "hidden";
+  } else if (isPercentage(initHeight)) {
+    // If value is string "0%" make sure we convert it to number 0
+    initHeight = height === "0%" ? 0 : height;
+    initOverflow = "hidden";
+  }
+
+  const [currentHeight, setCurrentHeight] = useState<Height>(initHeight);
+  const [overflow, setOverflow] = useState<Overflow>(initOverflow);
+  const [useTransitions, setUseTransitions] = useState<boolean>(false);
+
+  // ------------------ Did mount
+  useEffect(() => {
+    // Hide content if height is 0 (to prevent tabbing into it)
+    hideContent(contentElement.current, currentHeight);
+
+    // This should be explicitly run only on mount
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // ------------------ Height update
+  useEffect(() => {
+    if (height !== prevHeight.current && contentElement.current) {
+      showContent(contentElement.current, prevHeight.current);
+
+      // Cache content height
+      contentElement.current.style.overflow = "hidden";
+      const contentHeight = contentElement.current.offsetHeight;
+      contentElement.current.style.overflow = "";
+
+      // set total animation time
+      const totalDuration = duration;
+
+      let newHeight: Height;
+      let timeoutHeight: Height;
+      let timeoutOverflow: Overflow = "hidden";
+      let timeoutUseTransitions: boolean;
+
+      const isCurrentHeightAuto = prevHeight.current === "auto";
+
+      if (typeof height === "number") {
+        // Reset negative height to 0
+        newHeight = height < 0 ? 0 : height;
+        timeoutHeight = newHeight;
+      } else if (isPercentage(height)) {
+        // If value is string "0%" make sure we convert it to number 0
+        newHeight = height === "0%" ? 0 : height;
+        timeoutHeight = newHeight;
+      } else {
+        // If not, animate to content height
+        // and then reset to auto
+        newHeight = contentHeight; // TODO solve contentHeight = 0
+        timeoutHeight = "auto";
+        timeoutOverflow = undefined;
+      }
+
+      if (isCurrentHeightAuto) {
+        // This is the height to be animated to
+        timeoutHeight = newHeight;
+
+        // If previous height was 'auto'
+        // set starting height explicitly to be able to use transition
+        newHeight = contentHeight;
+      }
+
+      // Set starting height and animating classes
+      // When animating from 'auto' we first need to set fixed height
+      // that change should be animated
+      setCurrentHeight(newHeight);
+      setOverflow("hidden");
+      setUseTransitions(!isCurrentHeightAuto);
+
+      // Clear timeouts
+      clearTimeout(timeoutID.current as Timeout);
+      clearTimeout(animationClassesTimeoutID.current as Timeout);
+
+      if (isCurrentHeightAuto) {
+        // When animating from 'auto' we use a short timeout to start animation
+        // after setting fixed height above
+        timeoutUseTransitions = true;
+
+        // Short timeout to allow rendering of the initial animation state first
+        timeoutID.current = setTimeout(() => {
+          setCurrentHeight(timeoutHeight);
+          setOverflow(timeoutOverflow);
+          setUseTransitions(timeoutUseTransitions);
+        }, 50);
+
+        // Set static classes and remove transitions when animation ends
+        animationClassesTimeoutID.current = setTimeout(() => {
+          setUseTransitions(false);
+
+          // ANIMATION ENDS
+          // Hide content if height is 0 (to prevent tabbing into it)
+          hideContent(contentElement.current, timeoutHeight);
+        }, totalDuration);
+      } else {
+        // Set end height, classes and remove transitions when animation is complete
+        timeoutID.current = setTimeout(() => {
+          setCurrentHeight(timeoutHeight);
+          setOverflow(timeoutOverflow);
+          setUseTransitions(false);
+
+          // ANIMATION ENDS
+          // If height is auto, don't hide the content
+          // (case when element is empty, therefore height is 0)
+          if (height !== "auto") {
+            // Hide content if height is 0 (to prevent tabbing into it)
+            hideContent(contentElement.current, newHeight); // TODO solve newHeight = 0
+          }
+        }, totalDuration);
+      }
+    }
+
+    prevHeight.current = height;
+
+    return () => {
+      clearTimeout(timeoutID.current as Timeout);
+      clearTimeout(animationClassesTimeoutID.current as Timeout);
+    };
+
+    // This should be explicitly run only on height change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [height]);
+
+  // ------------------ Render
+
+  const componentStyle: CSSProperties = {
+    height: currentHeight,
+    overflow: overflow,
+  };
+
+  if (useTransitions) {
+    componentStyle.transition = `height ${duration}ms ${easing} 0ms`;
+
+    // Add webkit vendor prefix still used by opera, blackberry...
+    componentStyle.WebkitTransition = componentStyle.transition;
+  }
+
+  // Check if user passed aria-hidden prop
+  const hasAriaHiddenProp = typeof props["aria-hidden"] !== "undefined";
+  const ariaHidden = hasAriaHiddenProp ? props["aria-hidden"] : height === 0;
+
+  return (
+    <div
+      {...props}
+      aria-hidden={ariaHidden}
+      className={className}
+      style={componentStyle}
+    >
+      <div className={innerClassName} ref={contentElement}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default AnimateHeight;