@sats-group/ui-lib 75.0.0 → 75.2.0

package/eslint.config.mjs

@@ -24,6 +24,8 @@ export default [
       '**/docs',
       '**/node_modules',
       '**/test-results',
+      '**/site/pages/colors/dark-docs.tsx',
+      '**/site/pages/colors/light-docs.tsx',
     ],
   },
   ...compat.extends(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sats-group/ui-lib",
-  "version": "75.0.0",
+  "version": "75.2.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",
@@ -23,17 +23,17 @@
   "author": "developer@sats.no",
   "license": "UNLICENSED",
   "peerDependencies": {
-    "@sats-group/icons": "^8.0.0",
+    "@sats-group/icons": "^8.1.0",
     "classnames": "^2.5.1",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
     "@svgr/cli": "^8.1.0",
     "@types/fuzzy-search": "^2.1.5",
     "@types/node": "^18.16.19",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.12.2",
     "@typescript-eslint/parser": "^8.12.2",
     "eslint": "^9.13.0",
@@ -44,14 +44,13 @@
     "npm-run-all": "^4.1.5",
     "pascal-case": "^4.0.0",
     "prettier": "^3.3.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
     "typescript": "^5.6.3"
   },
   "dependencies": {
-    "fuzzy-search": "^3.2.1",
-    "react-tiny-collapse": "^2.0.0"
+    "fuzzy-search": "^3.2.1"
   },
   "workspaces": [
     "site"

package/react/chip-selected/chip-selected.tsx

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import Collapse from 'react-tiny-collapse';
 
 import ChevronDown from '../icons/24/arrow-down';
 import ChevronUp from '../icons/24/arrow-up';
 import Chip from '../chip/chip';
 import Text from '../text';
+import Link from '../link';
+import Collapse from '../collapse';
 
 import useEvent from '../hooks/use-event';
 
 import { ChipSelected as Props } from './chip-selected.types';
-import Link from '../link';
 
 const ChipSelected: React.FC<Props> = ({
   resetSelected,

package/react/collapse/collapse.tsx

@@ -0,0 +1,179 @@
+import React, { Component, createRef } from 'react';
+
+import { Collapse as Props } from './collapse.types';
+
+interface CollapseState {
+  height: number | null;
+  isAnimating: boolean;
+  isMounted: boolean;
+  isOpen: boolean;
+  shouldAnimate?: boolean;
+}
+
+class Collapse extends Component<Props, CollapseState> {
+  static defaultProps: Props = {
+    animateChildren: false,
+    component: 'div',
+    componentProps: {},
+    duration: 500,
+    easing: 'cubic-bezier(0.3,0,0,1)',
+    forceInitialAnimation: false,
+    isOpen: false,
+    onMeasure: () => {},
+    unmountChildren: false,
+  };
+
+  state: CollapseState = {
+    height: this.props.forceInitialAnimation || !this.props.isOpen ? 0 : null,
+    isAnimating: false,
+    isMounted: false,
+    isOpen: this.props.isOpen || false,
+  };
+
+  private wrapperRef = createRef<HTMLElement>();
+  private previousHeight: number = 0;
+  private raf: number | null = null;
+  private timer: number | null = null;
+  private isAnimating: boolean = false;
+
+  getHeight = (): number => {
+    const child = this.wrapperRef.current
+      ?.firstElementChild as HTMLElement | null;
+    return child ? Math.max(child.offsetHeight - 1, 0) : 0; // -1px to avoid jump after transition
+  };
+
+  transition = () => {
+    const newHeight = this.props.isOpen ? this.getHeight() : 0;
+
+    clearTimeout(this.timer!);
+    cancelAnimationFrame(this.raf!);
+    this.isAnimating = true;
+
+    this.setState(
+      { height: this.previousHeight, isAnimating: true, shouldAnimate: false },
+      () => {
+        this.previousHeight = newHeight;
+        this.raf = requestAnimationFrame(() => {
+          this.raf = requestAnimationFrame(() => {
+            this.setState({ height: newHeight }, () => {
+              this.timer = window.setTimeout(() => {
+                this.setState(
+                  {
+                    height: this.props.isOpen ? null : 0,
+                    isAnimating: false,
+                  },
+                  () => {
+                    this.isAnimating = false;
+                  },
+                );
+              }, this.props.duration);
+            });
+          });
+        });
+      },
+    );
+  };
+
+  componentDidMount() {
+    this.setState({ isMounted: true }, () => {
+      if (this.props.forceInitialAnimation) {
+        this.transition();
+      } else {
+        this.previousHeight = this.props.isOpen ? this.getHeight() : 0;
+        this.setState({ isAnimating: false });
+      }
+    });
+  }
+
+  onTransitionEnd = () => {
+    this.previousHeight = this.getHeight();
+  };
+
+  static getDerivedStateFromProps(
+    nextProps: Props,
+    prevState: CollapseState,
+  ): Partial<CollapseState> | null {
+    const openDidChange = nextProps.isOpen !== prevState.isOpen;
+    const forceAnimation =
+      !prevState.isMounted &&
+      nextProps.forceInitialAnimation &&
+      nextProps.isOpen;
+
+    return {
+      isOpen: nextProps.isOpen || false,
+      shouldAnimate: openDidChange || forceAnimation,
+    };
+  }
+
+  getSnapshotBeforeUpdate(): number {
+    return this.props.isOpen ? this.getHeight() : 0;
+  }
+
+  componentDidUpdate(
+    _prevProps: Props,
+    _prevState: CollapseState,
+    snapshot: number,
+  ) {
+    if (this.isAnimating && !this.state.shouldAnimate) {
+      return;
+    }
+
+    const newHeight = this.getHeight();
+    const childrenDidChange = newHeight !== snapshot;
+    this.props.onMeasure!(newHeight);
+
+    if (
+      this.state.shouldAnimate ||
+      (childrenDidChange && this.props.animateChildren)
+    ) {
+      this.transition();
+    } else if (childrenDidChange) {
+      this.previousHeight = this.getHeight();
+    }
+  }
+
+  componentWillUnmount() {
+    clearTimeout(this.timer!);
+    cancelAnimationFrame(this.raf!);
+  }
+
+  render() {
+    const { isAnimating, isMounted } = this.state;
+    const {
+      component = 'div',
+      componentProps = {},
+      forceInitialAnimation,
+      isOpen,
+      unmountChildren,
+      className,
+      children,
+    } = this.props;
+    const shouldMount = unmountChildren ? isOpen || isAnimating : true;
+    const initiallyHidden = !isMounted && forceInitialAnimation && isOpen;
+
+    return React.createElement(
+      component,
+      {
+        ...componentProps,
+        className: className,
+        onTransitionEnd: this.onTransitionEnd,
+        ref: this.wrapperRef,
+        style: {
+          ...componentProps.style,
+          height: this.state.height,
+          overflow:
+            isAnimating || !isOpen || initiallyHidden ? 'hidden' : undefined,
+          visibility:
+            (!isAnimating && !isOpen) || initiallyHidden ? 'hidden' : undefined,
+          transition:
+            isAnimating || initiallyHidden
+              ? `height ${this.props.duration}ms ${this.props.easing}`
+              : undefined,
+        },
+      },
+      shouldMount && children,
+    );
+  }
+}
+
+export default Collapse;

package/react/collapse/collapse.types.ts

@@ -0,0 +1,13 @@
+export type Collapse = {
+  animateChildren?: boolean;
+  component?: string;
+  componentProps?: React.HTMLAttributes<HTMLElement>;
+  duration?: number;
+  easing?: string;
+  forceInitialAnimation?: boolean;
+  isOpen?: boolean;
+  onMeasure?: (height: number) => void;
+  unmountChildren?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+};

package/react/collapse/index.ts

@@ -0,0 +1,2 @@
+import Collapse from './collapse';
+export default Collapse;

package/react/expander/expander.tsx

@@ -1,6 +1,5 @@
 import cn from 'classnames';
 import React, { useState } from 'react';
-import Collapse from 'react-tiny-collapse';
 
 import ArrowDown from '../icons/24/arrow-down';
 import LinkButton from '../link-button';
@@ -10,6 +9,7 @@ import type { Expander as Props } from './expander.types';
 import Badge from '../badge';
 import { Types } from '../badge/badge.types';
 import Link from '../link';
+import Collapse from '../collapse';
 
 const ExpanderListItem: React.FC<
   React.PropsWithChildren<Props<unknown>['items'][number]['listItemProps']>

package/react/form-content/checkbox-category.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Collapse from 'react-tiny-collapse';
 import Text from '../text';
 import Checkbox from '../checkbox';
 
@@ -9,6 +8,7 @@ import ChevronUp from '../icons/24/arrow-up';
 import { CheckboxCategory as Props } from './form-content.checkbox-list.types';
 import VisuallyHidden from '../visually-hidden';
 import { mod } from '../add-bem-modifiers';
+import Collapse from '../collapse';
 
 const CheckboxCategory: React.FC<React.PropsWithChildren<Props>> = ({
   currentlySelectedValues = [],

package/react/hooks/focus-previous-element.ts

@@ -1,11 +1,11 @@
 import { RefObject, useEffect, useRef } from 'react';
 
-const focusRef = (ref: React.MutableRefObject<HTMLElement | null>): void => {
+const focusRef = (ref: React.RefObject<HTMLElement | null>): void => {
   ref?.current?.focus();
 };
 
 const focusPreviousElement = (
-  modal: RefObject<HTMLElement>,
+  modal: RefObject<HTMLElement | null>,
   isActive?: boolean,
 ) => {
   const previouslyFocusedElement = useRef<HTMLElement | null>(null);

package/react/modal/tab-trapper.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 
-const focusRef = (ref: React.MutableRefObject<HTMLElement | null>): void => {
+const focusRef = (ref: React.RefObject<HTMLElement | null>): void => {
   ref?.current?.focus();
 };
 
@@ -14,7 +14,7 @@ const previousValue = usePrevious(value);
 const usePrevious = <T extends unknown>(
   value: T,
   initialValue?: T,
-): React.RefObject<T>['current'] => {
+): React.RefObject<T | null>['current'] => {
   const state = React.useRef<T | null>(
     typeof initialValue === 'undefined' ? null : initialValue,
   );

package/tokens/dark.scss

@@ -281,8 +281,11 @@ $on-ge-on-selector-secondary-unselected-default: primitives.$white-100;
 $on-ge-on-selector-secondary-unselected-disabled: primitives.$white-20;
 $on-ge-on-tabs-default: primitives.$white-100;
 $on-ge-on-tabs-disabled: primitives.$black-40;
+$on-ge-on-tags-featured-alternate: primitives.$coral-90;
 $on-ge-on-tags-featured-default: primitives.$coral-170;
+$on-ge-on-tags-primary-alternate: primitives.$white-100;
 $on-ge-on-tags-primary-default: primitives.$blue-100;
+$on-ge-on-tags-secondary-alternate: primitives.$white-100;
 $on-ge-on-tags-secondary-default: primitives.$white-100;
 $on-ge-on-workouts-bootcamp: primitives.$tropical-indigo-160;
 $on-ge-on-workouts-gx: primitives.$salmon-pink-180;
@@ -370,14 +373,14 @@ $signal-surface-neutral: primitives.$black-90;
 $signal-surface-success: primitives.$spring-green-170;
 $signal-surface-waiting-list: primitives.$egyptian-purple-160;
 $signal-surface-warning: primitives.$gold-170;
-$surface-primary-default: primitives.$black-85;
+$surface-primary-default: primitives.$black-90;
 $surface-primary-disabled: primitives.$black-95;
 $surface-primary-hover: primitives.$bright-blue-170;
 $surface-primary-selected: primitives.$bright-blue-160;
-$surface-secondary-default: primitives.$black-90;
+$surface-secondary-default: primitives.$black-85;
 $surface-secondary-disabled: primitives.$black-100;
-$surface-secondary-hover: primitives.$black-85;
-$surface-secondary-selected: primitives.$black-90;
+$surface-secondary-hover: primitives.$black-80;
+$surface-secondary-selected: primitives.$black-85;
 $workout-surface-bootcamp: primitives.$tropical-indigo-180;
 $workout-surface-bootcamp-hover: primitives.$tropical-indigo-160;
 $workout-surface-gx: primitives.$salmon-pink-180;

package/tokens/light.scss

@@ -76,8 +76,8 @@ $ge-border-focused: primitives.$blue-40;
 $ge-chips-selected-default: primitives.$blue-100;
 $ge-chips-selected-disabled: primitives.$light-grey-15;
 $ge-chips-selected-hover: primitives.$blue-grey-80;
-$ge-chips-unselected-default: primitives.$blue-40;
-$ge-chips-unselected-disabled: primitives.$light-grey-15;
+$ge-chips-unselected-default: primitives.$light-grey-15;
+$ge-chips-unselected-disabled: primitives.$blue-10;
 $ge-chips-unselected-hover: primitives.$bright-blue-10;
 $ge-divider-alternate: primitives.$black-o20;
 $ge-divider-default: primitives.$light-grey-15;
@@ -128,7 +128,7 @@ $ge-icons-secondary: primitives.$blue-grey-80;
 $ge-icons-waiting-list: primitives.$egyptian-purple-100;
 $ge-indicator-tags-attention-alternate: primitives.$gold-10;
 $ge-indicator-tags-attention-default: primitives.$gold-80;
-$ge-indicator-tags-featured-alternate: primitives.$coral-10;
+$ge-indicator-tags-featured-alternate: primitives.$coral-5;
 $ge-indicator-tags-featured-default: primitives.$coral-120;
 $ge-indicator-tags-information-alternate: primitives.$bright-blue-10;
 $ge-indicator-tags-information-default: primitives.$bright-blue-100;
@@ -162,7 +162,7 @@ $ge-selector-primary-selected-disabled: primitives.$coral-40;
 $ge-selector-primary-selected-hover: primitives.$coral-130;
 $ge-selector-primary-selected-bg-default: primitives.$coral-10;
 $ge-selector-primary-selected-bg-disabled: primitives.$coral-5;
-$ge-selector-primary-unselected-default: primitives.$black-80;
+$ge-selector-primary-unselected-default: primitives.$black-60;
 $ge-selector-primary-unselected-disabled: primitives.$light-grey-15;
 $ge-selector-primary-unselected-hover: primitives.$coral-10;
 $ge-selector-primary-unselected-bg-default: primitives.$white-0;
@@ -281,8 +281,11 @@ $on-ge-on-selector-secondary-unselected-default: primitives.$blue-100;
 $on-ge-on-selector-secondary-unselected-disabled: primitives.$black-40;
 $on-ge-on-tabs-default: primitives.$blue-100;
 $on-ge-on-tabs-disabled: primitives.$black-40;
+$on-ge-on-tags-featured-alternate: primitives.$coral-130;
 $on-ge-on-tags-featured-default: primitives.$white-100;
+$on-ge-on-tags-primary-alternate: primitives.$blue-100;
 $on-ge-on-tags-primary-default: primitives.$white-100;
+$on-ge-on-tags-secondary-alternate: primitives.$blue-100;
 $on-ge-on-tags-secondary-default: primitives.$blue-100;
 $on-ge-on-workouts-bootcamp: primitives.$tropical-indigo-180;
 $on-ge-on-workouts-gx: primitives.$salmon-pink-180;
@@ -353,7 +356,7 @@ $on-buttons-on-fixed-link-disabled: primitives.$white-50;
 $on-buttons-on-fixed-link-hover: primitives.$bright-blue-100;
 $on-buttons-on-link-default: primitives.$bright-blue-110;
 $on-buttons-on-link-disabled: primitives.$black-50;
-$on-buttons-on-link-hover: primitives.$bright-blue-80;
+$on-buttons-on-link-hover: primitives.$bright-blue-130;
 $on-buttons-on-primary-default: primitives.$white-100;
 $on-buttons-on-primary-disabled: primitives.$black-60;
 $on-buttons-on-secondary-default: primitives.$blue-100;

package/react/form-content/types/index.d.ts

@@ -1 +0,0 @@
-declare module 'react-tiny-collapse';