@sats-group/ui-lib 74.2.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": "74.2.0",
+  "version": "75.2.0",
   "description": "SATS web user interface library",
   "engines": {
     "node": "^18 || ^20",
@@ -23,16 +23,17 @@
   "author": "developer@sats.no",
   "license": "UNLICENSED",
   "peerDependencies": {
+    "@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",
@@ -43,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/react/select/select.scss

@@ -1,6 +1,7 @@
 @use '../../tokens/corner-radius';
 @use '../../tokens/light';
 @use '../../tokens/spacing';
+@use '../../tokens/font-sizes';
 
 .select {
   display: flex;
@@ -35,44 +36,25 @@
   &__chevron {
     color: light.$on-surface-primary-default;
     position: absolute;
-    right: 13px;
+    right: clamp(spacing.$s, 2vw, spacing.$m);
     top: 50%;
     transform: translateY(-50%);
     pointer-events: none;
-  }
-
-  &__icon {
-    color: light.$on-surface-primary-default;
-    position: absolute;
-    left: 13px;
-    top: 50%;
-    width: 20px;
-    transform: translateY(-50%);
-
-    svg {
-      display: block;
-      max-width: 100%;
-      height: auto;
-    }
-  }
-
-  :root &--icon {
-    select {
-      padding-left: 40px; // NOTE: Space for icon
-    }
+    display: flex;
+    align-items: center
   }
 
   select {
+    @include font-sizes.normal(basic);
     color: light.$on-surface-primary-default;
     appearance: none;
     background-color: transparent;
     border: 1px solid light.$ge-border-default;
     display: block;
-    font-size: 16px;
-    font-family: 'Inter', sans-serif;
-    line-height: 1.25;
-    padding: 13px 15px;
-    padding-right: 35px; // NOTE: Space for chevron icon
+    padding-top: clamp(spacing.$xs, 2vw, spacing.$s);
+    padding-bottom: clamp(spacing.$xs, 2vw, spacing.$s);
+    padding-left: clamp(spacing.$s, 2vw, spacing.$m);
+    padding-right: spacing.$l; // NOTE: Space for chevron icon
     position: relative;
     width: 100%;
     border-radius: corner-radius.$s;
@@ -82,11 +64,6 @@
         &:not(:disabled) {
           background-color: light.$surface-primary-hover;
           border-color: light.$surface-primary-hover;
-
-          ~ .select__chevron,
-          ~ .select__icon {
-            color: light.$on-surface-primary-default;
-          }
         }
       }
     }
@@ -95,11 +72,6 @@
       &:not(:disabled) {
         background-color: light.$surface-primary-default;
         border-color: light.$ge-border-focused;
-
-        ~ .select__chevron,
-        ~ .select__icon {
-          color: light.$on-surface-primary-default;
-        }
       }
     }
 
@@ -111,8 +83,7 @@
     &:disabled {
       color: light.$on-surface-primary-disabled;
 
-      ~ .select__chevron,
-      ~ .select__icon {
+      ~ .select__native-wrapper {
         color: light.$on-surface-primary-disabled;
       }
     }

package/react/select/select.tsx

@@ -3,9 +3,9 @@ import * as React from 'react';
 
 import useInputValidation from '../use-input-validation';
 
-import ChevronDown from './chevron-down';
 import Option from '../select-option/select-option';
 import Text from '../text';
+import SvgArrowDown from '@sats-group/icons/18/arrow-down';
 
 import { labelPositions, Select as Props } from './select.types';
 
@@ -18,7 +18,6 @@ const RefSelect = React.forwardRef<
     {
       children,
       className,
-      icon,
       isLabelVisible = true,
       label,
       labelPosition = labelPositions.stacked,
@@ -43,7 +42,6 @@ const RefSelect = React.forwardRef<
       <label
         className={cn('select', className, {
           'select--error': error,
-          'select--icon': icon,
           [`select--label-position-${labelPosition}`]: labelPosition
             ? labelPositions[labelPosition]
             : undefined,
@@ -79,8 +77,9 @@ const RefSelect = React.forwardRef<
               <Option key={option.value} {...option} />
             ))}
           </select>
-          {icon && <div className="select__icon">{icon}</div>}
-          <ChevronDown className="select__chevron" />
+          <span className="select__chevron">
+            <SvgArrowDown />
+          </span>
         </div>
 
         {/* NOTE: This is aria-hidden because reporting of validation errors is handled by the browser */}

package/react/select/select.types.ts

@@ -9,7 +9,6 @@ export const labelPositions = {
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type Select<OptionExtra = any> = {
-  icon?: React.ReactNode;
   isLabelVisible?: boolean;
   label?: string;
   labelPosition?: ObjectValues<typeof labelPositions>;

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/font-sizes.scss

@@ -41,8 +41,8 @@ $headline: (
   font-weight: bold;
   text-transform: uppercase;
   @if map.has-key($headline, $size) {
-    font-size: map-get(map-get($headline, $size), fallback);
-    font-size: map-get(map-get($headline, $size), clamp);
+    font-size: map.get(map.get($headline, $size), fallback);
+    font-size: map.get(map.get($headline, $size), clamp);
   } @else {
     @error "Size #{$size} does not exist on Headline.";
   }
@@ -87,8 +87,8 @@ $normal: (
   @if map.has-key($normal, $size) {
     font-family: font-names.$brand, sans-serif;
     font-weight: normal;
-    font-size: map-get(map-get($normal, $size), fallback);
-    font-size: map-get(map-get($normal, $size), clamp);
+    font-size: map.get(map.get($normal, $size), fallback);
+    font-size: map.get(map.get($normal, $size), clamp);
   } @else {
     @error "Size #{$size} does not exist on Normal.";
   }

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';

package/react/select/chevron-down.tsx

@@ -1,24 +0,0 @@
-import * as React from 'react';
-
-const ChevronDown: React.FunctionComponent<{ className?: string }> = ({
-  className,
-}) => (
-  <svg
-    width="14"
-    height="8"
-    viewBox="0 0 14 8"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    className={className}
-  >
-    <path
-      d="M12 1.5L7 6.5L2 1.5"
-      stroke="currentColor"
-      strokeWidth="1.8"
-      strokeMiterlimit="10"
-      strokeLinecap="square"
-    />
-  </svg>
-);
-
-export default ChevronDown;

package/react/select-option/README.md

@@ -1,3 +0,0 @@
-# SelectOption
-
-This component is not intended to be used directly. It is used by `Select` internally but needs to live in a separate folder in order for a TypeScript file to be created for it.