@orangesk/orange-design-system 3.5.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orangesk/orange-design-system",
-  "version": "3.5.0",
+  "version": "3.6.0",
   "private": false,
   "engines": {
     "node": ">=20.x"
@@ -23,40 +23,11 @@
     "./src/*": "./src/*",
     "./public/*": "./public/*"
   },
-  "scripts": {
-    "dev": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next dev",
-    "build": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next build && npm run sprite",
-    "build:bundle": "npm run build:scss-exports && pnpm exec rollup -c && npm run build:megamenu && npm run build:footer",
-    "build:preview-iframe": "node scripts/build-preview-iframe-bundle.mjs",
-    "build:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs",
-    "dev:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs --watch",
-    "build:footer": "npm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs",
-    "dev:footer": "npm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs --watch",
-    "build:scss-exports": "node scripts/build-scss-exports.js",
-    "build:search-index": "node scripts/mdx-search-index.js",
-    "start": "next start",
-    "lint": "biome lint .",
-    "lint:fix": "biome lint --write .",
-    "lint:fix:unsafe": "biome lint --write --unsafe .",
-    "check": "biome check .",
-    "check:fix": "biome check --write .",
-    "imports:fix": "biome check --write --only=assist/source/organizeImports .",
-    "format": "biome format --write . && prettier --write '**/*.{mdx,scss}'",
-    "format:biome": "biome format --write .",
-    "format:prettier": "prettier --write '**/*.{mdx,scss}'",
-    "test": "vitest",
-    "test:visual:docker": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual\"",
-    "test:visual:docker:update": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual:update\"",
-    "test:ui": "vitest --ui",
-    "coverage": "vitest run --coverage",
-    "prepare": "husky",
-    "sprite": "svg-sprite --symbol --symbol-dest public --symbol-sprite sprite.svg src/assets/icons/*.svg"
-  },
   "dependencies": {
     "@cloudfour/transition-hidden-element": "^2.0.2",
     "@mdx-js/loader": "^3.1.1",
     "@mdx-js/react": "^3.1.1",
-    "@next/mdx": "16.3.1",
+    "@next/mdx": "16.3.2",
     "@orangesk/accessible-autocomplete": "3.2.2",
     "@popperjs/core": "^2.11.8",
     "@types/mdx": "^2.0.14",
@@ -64,11 +35,11 @@
     "classnames": "^2.5.1",
     "daypickr": "^0.3.4",
     "diff2html": "^3.4.56",
-    "dompurify": "^3.4.13",
+    "dompurify": "^3.4.14",
     "html-react-parser": "6.1.7",
     "lorem-ipsum": "3.0.0",
     "minisearch": "7.2.0",
-    "next": "16.3.1",
+    "next": "16.3.2",
     "normalize.css": "^8.0.1",
     "nouislider": "^15.8.1",
     "prism-react-renderer": "^2.4.1",
@@ -110,10 +81,10 @@
     "@types/react-dom": "19.2.4",
     "@types/wnumb": "^1.2.3",
     "@vitejs/plugin-react": "6.0.5",
-    "@vitest/browser": "^4.1.10",
-    "@vitest/browser-playwright": "^4.1.10",
-    "@vitest/coverage-v8": "^4.1.10",
-    "@vitest/ui": "^4.1.10",
+    "@vitest/browser": "^4.1.11",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "@vitest/ui": "^4.1.11",
     "canvas": "^3.2.3",
     "fs-extra": "^11.4.0",
     "glob": "13.0.6",
@@ -131,12 +102,40 @@
     "sass": "^1.102.0",
     "svg-sprite": "^2.0.4",
     "typescript": "6.0.3",
-    "vitest": "^4.1.10",
+    "vitest": "^4.1.11",
     "vitest-axe": "^0.1.0",
     "vitest-browser-react": "^2.2.0"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx,json,css}": "biome check --write --no-errors-on-unmatched",
     "*.{mdx,scss}": "prettier --write"
+  },
+  "scripts": {
+    "dev": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next dev",
+    "build": "npm run build:scss-exports && npm run build:search-index && npm run build:preview-iframe && next build && npm run sprite",
+    "build:bundle": "pnpm run build:scss-exports && pnpm exec rollup -c && pnpm run build:megamenu && pnpm run build:footer",
+    "build:preview-iframe": "node scripts/build-preview-iframe-bundle.mjs",
+    "build:megamenu": "pnpm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs",
+    "dev:megamenu": "npm run build:scss-exports && pnpm exec rollup -c rollup.megamenu.config.mjs --watch",
+    "build:footer": "pnpm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs",
+    "dev:footer": "npm run build:scss-exports && pnpm exec rollup -c rollup.footer.config.mjs --watch",
+    "build:scss-exports": "node scripts/build-scss-exports.js",
+    "build:search-index": "node scripts/mdx-search-index.js",
+    "start": "next start",
+    "lint": "biome lint .",
+    "lint:fix": "biome lint --write .",
+    "lint:fix:unsafe": "biome lint --write --unsafe .",
+    "check": "biome check .",
+    "check:fix": "biome check --write .",
+    "imports:fix": "biome check --write --only=assist/source/organizeImports .",
+    "format": "biome format --write . && prettier --write '**/*.{mdx,scss}'",
+    "format:biome": "biome format --write .",
+    "format:prettier": "prettier --write '**/*.{mdx,scss}'",
+    "test": "vitest",
+    "test:visual:docker": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual\"",
+    "test:visual:docker:update": "docker run --rm --init --ipc=host -e CI=1 -v \"$PWD\":/work -w /work mcr.microsoft.com/playwright:v1.58.2-noble bash -lc \"corepack enable && pnpm install --frozen-lockfile --ignore-scripts && pnpm run test:visual:update\"",
+    "test:ui": "vitest --ui",
+    "coverage": "vitest run --coverage",
+    "sprite": "svg-sprite --symbol --symbol-dest public --symbol-sprite sprite.svg src/assets/icons/*.svg"
   }
-}
+}

package/src/components/Accordion/Accordion.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import AccordionStatic from "./Accordion.static";
 import HeadingContext from "./HeadingContext";

package/src/components/Accordion/AccordionItem.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 
 import { useHydrationSafeId } from "../../utils/hooks";
 

package/src/components/Alert/Alert.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { JSX } from "react";
+import type { JSX } from "react";
+import React from "react";
 import ConditionalWrapper from "../../utils/ConditionalWrapper";
 import { Buttons } from "../Buttons";
 import { Icon } from "../Icon";

package/src/components/Avatar/Avatar.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
+import React from "react";
 
 import { Icon } from "../Icon";
 

package/src/components/BlockAction/BlockAction.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { Provider } from "./Context";

package/src/components/BlockAction/BlockActionControl.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { ReactElement, useContext } from "react";
+import type { ReactElement } from "react";
+import React, { useContext } from "react";
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { Context } from "./Context";
 

package/src/components/BlockAction/BlockActionIndicator.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactElement, useContext } from "react";
+import type { ReactElement } from "react";
+import React, { useContext } from "react";
 import { CloneElementWithClassName } from "./CloneElementWithClassName";
 import { Context } from "./Context";
 

package/src/components/BlockAction/CloneElementWithClassName.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 
 interface CloneElementWithClassNameProps {
   className?: string;

package/src/components/BlockAction/Context.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { Dispatch, ReactNode, SetStateAction, useState } from "react";
+import type { Dispatch, ReactNode, SetStateAction } from "react";
+import React, { useState } from "react";
 
 interface ContextType {
   isIndicating: boolean;

package/src/components/BlockAction/index.tsx

@@ -1,4 +1,5 @@
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 import { BlockAction } from "./BlockAction";
 import { BlockActionControl } from "./BlockActionControl";
 import { BlockActionIndicator } from "./BlockActionIndicator";

package/src/components/Button/IconButton.tsx

@@ -2,7 +2,8 @@ import cx from "classnames";
 import React from "react";
 
 import { Icon } from "../Icon";
-import { Button, ButtonSize } from "./Button";
+import type { ButtonSize } from "./Button";
+import { Button } from "./Button";
 
 export type IconPosition = "left" | "right";
 

package/src/components/Button/index.tsx

@@ -1,4 +1,5 @@
-import { Button, ButtonProps } from "./Button";
+import type { ButtonProps } from "./Button";
+import { Button } from "./Button";
 import { IconButton } from "./IconButton";
 
 export const ButtonPrimary = (props: ButtonProps) => (

package/src/components/Carousel/Carousel.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { HTMLAttributes, ReactElement, ReactNode } from "react";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import { Controls } from "../Controls";
 import CarouselStatic from "./Carousel.static";

package/src/components/Carousel/CarouselItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 import { CLASS_SLIDE } from "./constants";
 

package/src/components/CarouselHero/CarouselHero.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode, useId } from "react";
+import type { ReactNode } from "react";
+import React, { useId } from "react";
 import { useStatic } from "@/utils/hooks";
 import { Container } from "../Container";
 import { Controls } from "../Controls";

package/src/components/CarouselHero/CarouselHeroItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 import { Image } from "@/components/Image";
 import { Container } from "../Container";
 import {

package/src/components/CarouselPromotions/CarouselPromotions.static.ts

@@ -59,7 +59,7 @@ export default class CarouselPromotions {
   viewport!: HTMLElement;
   instance!: Swiper;
   interval: number = 0;
-  autoplayTimer?: NodeJS.Timeout;
+  autoplayTimer?: ReturnType<typeof setTimeout>;
   private resizeRafId?: number;
   private boundWindowResizeHandler: () => void;
   private boundPaginationClickHandler: () => void;

package/src/components/CarouselPromotions/CarouselPromotions.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import CarouselPromotionsStatic from "./CarouselPromotions.static";
 import {

package/src/components/CarouselPromotions/CarouselPromotionsItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { ReactElement } from "react";
+import type { ReactElement } from "react";
+import React from "react";
 
 import {
   CLASS_IMAGE,

package/src/components/CarouselPromotions/styles/mixins.scss

@@ -85,9 +85,8 @@
 
 @function get-breakout-media-query($min, $max) {
   @return if(
-    $max,
-    "(min-width: #{$min}) and (max-width: #{$max})",
-    "(min-width: #{$min})"
+    sass($max): "(min-width: #{$min}) and (max-width: #{$max})";
+      else: "(min-width: #{$min})"
   );
 }
 

package/src/components/Countdown/Countdown.react.ts

@@ -1,9 +1,9 @@
-import {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  countdownUnits,
 } from "./Countdown.static";
+import { countdownUnits } from "./Countdown.static";
 
 const defaultCountdownLabels: Required<CountdownLabels> = {
   days: {

package/src/components/Countdown/Countdown.static.ts

@@ -1,11 +1,13 @@
-import {
-  BaseCountdownStatic,
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
+  DayLabels,
+} from "./Countdown.shared";
+import {
+  BaseCountdownStatic,
   calculateState,
   countdownUnits,
-  DayLabels,
   getVisibleUnits,
   normalizeDayLabels,
 } from "./Countdown.shared";

package/src/components/Countdown/Countdown.tsx

@@ -12,12 +12,12 @@ import {
   getLabelText,
   normalizeUnits,
 } from "./Countdown.react";
-import CountdownStatic, {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  countdownUnits,
 } from "./Countdown.static";
+import CountdownStatic, { countdownUnits } from "./Countdown.static";
 import {
   ATTR_COUNTDOWN,
   ATTR_COUNTDOWN_CONFIG,

package/src/components/Countdown/CountdownTag.static.ts

@@ -1,10 +1,12 @@
-import {
-  BaseCountdownStatic,
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,
-  calculateState,
   DayLabels,
+} from "./Countdown.shared";
+import {
+  BaseCountdownStatic,
+  calculateState,
   getVisibleUnits,
   normalizeDayLabels,
 } from "./Countdown.shared";

package/src/components/Countdown/CountdownTag.tsx

@@ -12,7 +12,7 @@ import {
   getLabelText,
   normalizeUnits,
 } from "./Countdown.react";
-import {
+import type {
   CountdownConfig,
   CountdownLabels,
   CountdownUnit,

package/src/components/Divider/Divider.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 import { Icon } from "../Icon";
 

package/src/components/Dropdown/Dropdown.static.ts

@@ -1,5 +1,6 @@
 import { transitionHiddenElement } from "@cloudfour/transition-hidden-element";
-import { createPopper, Instance, Options } from "@popperjs/core";
+import type { Instance, Options } from "@popperjs/core";
+import { createPopper } from "@popperjs/core";
 
 import { keys } from "../../utils";
 

package/src/components/Dropdown/Dropdown.tsx

@@ -1,15 +1,17 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 import { useStatic } from "@/utils/hooks";
 import { Bar, BarItem } from "../Bar";
 import { IconButton } from "../Button";
-import { ButtonProps } from "../Button/Button";
+import type { ButtonProps } from "../Button/Button";
+import { CLASS_ROOT } from "./constants";
 import DropdownButtonStatic from "./Dropdown.static";
 import { DropdownToggleButton } from "./DropdownToggleButton";
 
-export const CLASS_ROOT = "dropdown";
+export { CLASS_ROOT } from "./constants";
 
 export type DropdownButtonProps = {
   className?: string;

package/src/components/Dropdown/DropdownItem.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { AnchorHTMLAttributes, ReactNode } from "react";
+import type { AnchorHTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 const CLASS_ROOT = "dropdown__item";
 

package/src/components/Dropdown/DropdownToggleButton.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import ToggleButton from "../../docs/utils/ToggleButton";
 
-import { CLASS_ROOT } from "./Dropdown";
+import { CLASS_ROOT } from "./constants";
 
 interface DropdownToggleButtonProps
   extends React.HTMLAttributes<HTMLButtonElement> {

package/src/components/Dropdown/constants.ts

@@ -0,0 +1 @@
+export const CLASS_ROOT = "dropdown";

package/src/components/FeatureAccordion/FeatureAccordion.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { RefCallback, useMemo } from "react";
+import type { RefCallback } from "react";
+import React, { useMemo } from "react";
 import { useStatic } from "../../utils/hooks";
 import { Accordion } from "../Accordion/Accordion";
 import { Image } from "../Image";

package/src/components/FeatureAccordion/FeatureAccordionItem.tsx

@@ -2,7 +2,8 @@
 
 import cx from "classnames";
 import React from "react";
-import { AccordionItem, AccordionItemProps } from "../Accordion/AccordionItem";
+import type { AccordionItemProps } from "../Accordion/AccordionItem";
+import { AccordionItem } from "../Accordion/AccordionItem";
 import type { FeatureAccordionImage } from "./FeatureAccordion";
 
 const CLASS_ROOT = "feature-accordion__item";

package/src/components/Forms/Autocomplete/Autocomplete.static.ts

@@ -176,7 +176,7 @@ export default class Autocomplete {
   ): void {
     if (!this.getInput()) {
       if (retries > 0) {
-        window.setTimeout(
+        this.element.ownerDocument.defaultView?.setTimeout(
           () =>
             this.initEnhancedControls(
               hasSearchIconWithPlaceholder,
@@ -231,7 +231,7 @@ export default class Autocomplete {
       clearButton.hidden = input.disabled || input.value.length === 0;
     };
     const scheduleUpdateClearButton = () => {
-      window.setTimeout(updateClearButton, 0);
+      this.element.ownerDocument.defaultView?.setTimeout(updateClearButton, 0);
     };
 
     clearButton.addEventListener("mousedown", this.preventDefault);

package/src/components/Forms/Field/Field.tsx

@@ -5,7 +5,8 @@ import React from "react";
 import { Bar, BarBreak, BarItem } from "../../Bar";
 import { Control } from "./Control";
 import { Description } from "./Description";
-import { FieldContext, FieldContextType } from "./FieldContext";
+import type { FieldContextType } from "./FieldContext";
+import { FieldContext } from "./FieldContext";
 import { FieldLabel } from "./Label";
 import { Messages } from "./Messages";
 import { FormTooltip } from "./Tooltip";

package/src/components/Forms/Field/Label.tsx

@@ -4,7 +4,8 @@ import cx from "classnames";
 import React from "react";
 
 import { Label } from "../Label";
-import { FieldContext, FieldContextType } from "./FieldContext";
+import type { FieldContextType } from "./FieldContext";
+import { FieldContext } from "./FieldContext";
 
 const CLASS_ROOT = "form-field__label";
 

package/src/components/Forms/Fieldset/Fieldset.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { ReactNode } from "react";
+import type { ReactNode } from "react";
+import React from "react";
 
 import { Messages } from "../Field/Messages";
 

package/src/components/Forms/File/File.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import cx from "classnames";
-import React, { FC } from "react";
+import type { FC } from "react";
+import React from "react";
 import { useHydrationSafeId, useStatic } from "../../../utils/hooks";
 import FileStatic from "./File.static";
 

package/src/components/Forms/Group/Group.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 import { Autocomplete } from "../Autocomplete/Autocomplete";
 import { Select } from "../Select/Select";
 import { TextInput } from "../TextInput/TextInput";

package/src/components/Forms/Group/Item.tsx

@@ -1,5 +1,6 @@
 import cx from "classnames";
-import React, { HTMLAttributes, ReactNode } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import React from "react";
 
 const CLASS_ROOT = "control-group__item";
 

package/src/components/Forms/RangeSlider/RangeSlider.static.ts

@@ -1,5 +1,7 @@
-import noUiSlider, { API as NoUiSliderInstance } from "nouislider";
-import wnumb, { Instance as WNumbInstance } from "wnumb";
+import type { API as NoUiSliderInstance } from "nouislider";
+import noUiSlider from "nouislider";
+import type { Instance as WNumbInstance } from "wnumb";
+import wnumb from "wnumb";
 
 import defaultConfig from "./data";
 

package/src/components/Forms/Select/index.tsx

@@ -1,4 +1,5 @@
-import { Select, SelectProps } from "./Select";
+import type { SelectProps } from "./Select";
+import { Select } from "./Select";
 
 export { Select };