@transferwise/components 0.0.0-experimental-38195a1 → 0.0.0-experimental-4f26f19

package/build/Snackbar/useSnackbarAutoDismiss.js

@@ -0,0 +1,58 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var constants = require('./constants.js');
+
+const DURATIONS = {
+  default: constants.SNACKBAR_DEFAULT_DURATION,
+  extended: constants.SNACKBAR_EXTENDED_DURATION,
+  indefinite: null
+};
+/** Starts after entry finishes and pauses on hover or focus, preserving the remaining time. */
+const useSnackbarAutoDismiss = ({
+  duration,
+  onDismissRequest,
+  timeout,
+  visible
+}) => {
+  const surfaceRef = React.useRef(null);
+  const remaining = React.useRef(duration ? DURATIONS[duration] : timeout ?? constants.SNACKBAR_DEFAULT_DURATION);
+  const [entered, setEntered] = React.useState(false);
+  const [hovered, setHovered] = React.useState(false);
+  const [focusWithin, setFocusWithin] = React.useState(false);
+  const running = visible && entered && !hovered && !focusWithin;
+  React.useEffect(() => {
+    const ms = remaining.current;
+    if (!running || ms === null) {
+      return undefined;
+    }
+    const startedAt = Date.now();
+    const id = window.setTimeout(() => onDismissRequest(), ms);
+    return () => {
+      window.clearTimeout(id);
+      remaining.current = Math.max(0, ms - (Date.now() - startedAt));
+    };
+  }, [running, onDismissRequest]);
+  return {
+    handleBlur: event => {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        setFocusWithin(false);
+      }
+    },
+    handleEntered: () => {
+      // Entry can finish beneath the pointer or with focus already inside the surface.
+      setHovered(surfaceRef.current?.matches(':hover') ?? false);
+      setFocusWithin(Boolean(surfaceRef.current?.contains(document.activeElement)));
+      setEntered(true);
+    },
+    handleFocus: () => setFocusWithin(true),
+    handleMouseEnter: () => setHovered(true),
+    handleMouseLeave: () => setHovered(false),
+    surfaceRef
+  };
+};
+
+exports.default = useSnackbarAutoDismiss;
+//# sourceMappingURL=useSnackbarAutoDismiss.js.map

package/build/Snackbar/useSnackbarAutoDismiss.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnackbarAutoDismiss.js","sources":["../../src/Snackbar/useSnackbarAutoDismiss.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { SNACKBAR_DEFAULT_DURATION, SNACKBAR_EXTENDED_DURATION } from './constants';\nimport type { SnackbarProps } from './Snackbar';\nimport type { SnackbarDuration } from './Snackbar.types';\n\nconst DURATIONS: Record<SnackbarDuration, number | null> = {\n  default: SNACKBAR_DEFAULT_DURATION,\n  extended: SNACKBAR_EXTENDED_DURATION,\n  indefinite: null,\n};\n\n/** Starts after entry finishes and pauses on hover or focus, preserving the remaining time. */\nconst useSnackbarAutoDismiss = ({\n  duration,\n  onDismissRequest,\n  timeout,\n  visible,\n}: Pick<SnackbarProps, 'duration' | 'onDismissRequest' | 'timeout' | 'visible'>) => {\n  const surfaceRef = useRef<HTMLDivElement>(null);\n  const remaining = useRef(duration ? DURATIONS[duration] : (timeout ?? SNACKBAR_DEFAULT_DURATION));\n  const [entered, setEntered] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [focusWithin, setFocusWithin] = useState(false);\n\n  const running = visible && entered && !hovered && !focusWithin;\n\n  useEffect(() => {\n    const ms = remaining.current;\n    if (!running || ms === null) {\n      return undefined;\n    }\n\n    const startedAt = Date.now();\n    const id = window.setTimeout(() => onDismissRequest(), ms);\n    return () => {\n      window.clearTimeout(id);\n      remaining.current = Math.max(0, ms - (Date.now() - startedAt));\n    };\n  }, [running, onDismissRequest]);\n\n  return {\n    handleBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n      if (!event.currentTarget.contains(event.relatedTarget)) {\n        setFocusWithin(false);\n      }\n    },\n    handleEntered: () => {\n      // Entry can finish beneath the pointer or with focus already inside the surface.\n      setHovered(surfaceRef.current?.matches(':hover') ?? false);\n      setFocusWithin(Boolean(surfaceRef.current?.contains(document.activeElement)));\n      setEntered(true);\n    },\n    handleFocus: () => setFocusWithin(true),\n    handleMouseEnter: () => setHovered(true),\n    handleMouseLeave: () => setHovered(false),\n    surfaceRef,\n  };\n};\n\nexport default useSnackbarAutoDismiss;\n"],"names":["DURATIONS","default","SNACKBAR_DEFAULT_DURATION","extended","SNACKBAR_EXTENDED_DURATION","indefinite","useSnackbarAutoDismiss","duration","onDismissRequest","timeout","visible","surfaceRef","useRef","remaining","entered","setEntered","useState","hovered","setHovered","focusWithin","setFocusWithin","running","useEffect","ms","current","undefined","startedAt","Date","now","id","window","setTimeout","clearTimeout","Math","max","handleBlur","event","currentTarget","contains","relatedTarget","handleEntered","matches","Boolean","document","activeElement","handleFocus","handleMouseEnter","handleMouseLeave"],"mappings":";;;;;;;AAMA,MAAMA,SAAS,GAA4C;AACzDC,EAAAA,OAAO,EAAEC,mCAAyB;AAClCC,EAAAA,QAAQ,EAAEC,oCAA0B;AACpCC,EAAAA,UAAU,EAAE;CACb;AAED;AACA,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,QAAQ;EACRC,gBAAgB;EAChBC,OAAO;AACPC,EAAAA;AAAO,CACsE,KAAI;AACjF,EAAA,MAAMC,UAAU,GAAGC,YAAM,CAAiB,IAAI,CAAC;AAC/C,EAAA,MAAMC,SAAS,GAAGD,YAAM,CAACL,QAAQ,GAAGP,SAAS,CAACO,QAAQ,CAAC,GAAIE,OAAO,IAAIP,mCAA0B,CAAC;EACjG,MAAM,CAACY,OAAO,EAAEC,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGF,cAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACG,WAAW,EAAEC,cAAc,CAAC,GAAGJ,cAAQ,CAAC,KAAK,CAAC;EAErD,MAAMK,OAAO,GAAGX,OAAO,IAAII,OAAO,IAAI,CAACG,OAAO,IAAI,CAACE,WAAW;AAE9DG,EAAAA,eAAS,CAAC,MAAK;AACb,IAAA,MAAMC,EAAE,GAAGV,SAAS,CAACW,OAAO;AAC5B,IAAA,IAAI,CAACH,OAAO,IAAIE,EAAE,KAAK,IAAI,EAAE;AAC3B,MAAA,OAAOE,SAAS;AAClB,IAAA;AAEA,IAAA,MAAMC,SAAS,GAAGC,IAAI,CAACC,GAAG,EAAE;AAC5B,IAAA,MAAMC,EAAE,GAAGC,MAAM,CAACC,UAAU,CAAC,MAAMvB,gBAAgB,EAAE,EAAEe,EAAE,CAAC;AAC1D,IAAA,OAAO,MAAK;AACVO,MAAAA,MAAM,CAACE,YAAY,CAACH,EAAE,CAAC;AACvBhB,MAAAA,SAAS,CAACW,OAAO,GAAGS,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEX,EAAE,IAAII,IAAI,CAACC,GAAG,EAAE,GAAGF,SAAS,CAAC,CAAC;IAChE,CAAC;AACH,EAAA,CAAC,EAAE,CAACL,OAAO,EAAEb,gBAAgB,CAAC,CAAC;EAE/B,OAAO;IACL2B,UAAU,EAAGC,KAAuC,IAAI;MACtD,IAAI,CAACA,KAAK,CAACC,aAAa,CAACC,QAAQ,CAACF,KAAK,CAACG,aAAa,CAAC,EAAE;QACtDnB,cAAc,CAAC,KAAK,CAAC;AACvB,MAAA;IACF,CAAC;IACDoB,aAAa,EAAEA,MAAK;AAClB;MACAtB,UAAU,CAACP,UAAU,CAACa,OAAO,EAAEiB,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC;AAC1DrB,MAAAA,cAAc,CAACsB,OAAO,CAAC/B,UAAU,CAACa,OAAO,EAAEc,QAAQ,CAACK,QAAQ,CAACC,aAAa,CAAC,CAAC,CAAC;MAC7E7B,UAAU,CAAC,IAAI,CAAC;IAClB,CAAC;AACD8B,IAAAA,WAAW,EAAEA,MAAMzB,cAAc,CAAC,IAAI,CAAC;AACvC0B,IAAAA,gBAAgB,EAAEA,MAAM5B,UAAU,CAAC,IAAI,CAAC;AACxC6B,IAAAA,gBAAgB,EAAEA,MAAM7B,UAAU,CAAC,KAAK,CAAC;AACzCP,IAAAA;GACD;AACH;;"}

package/build/Snackbar/useSnackbarAutoDismiss.mjs

@@ -0,0 +1,54 @@
+import { useRef, useState, useEffect } from 'react';
+import { SNACKBAR_EXTENDED_DURATION, SNACKBAR_DEFAULT_DURATION } from './constants.mjs';
+
+const DURATIONS = {
+  default: SNACKBAR_DEFAULT_DURATION,
+  extended: SNACKBAR_EXTENDED_DURATION,
+  indefinite: null
+};
+/** Starts after entry finishes and pauses on hover or focus, preserving the remaining time. */
+const useSnackbarAutoDismiss = ({
+  duration,
+  onDismissRequest,
+  timeout,
+  visible
+}) => {
+  const surfaceRef = useRef(null);
+  const remaining = useRef(duration ? DURATIONS[duration] : timeout ?? SNACKBAR_DEFAULT_DURATION);
+  const [entered, setEntered] = useState(false);
+  const [hovered, setHovered] = useState(false);
+  const [focusWithin, setFocusWithin] = useState(false);
+  const running = visible && entered && !hovered && !focusWithin;
+  useEffect(() => {
+    const ms = remaining.current;
+    if (!running || ms === null) {
+      return undefined;
+    }
+    const startedAt = Date.now();
+    const id = window.setTimeout(() => onDismissRequest(), ms);
+    return () => {
+      window.clearTimeout(id);
+      remaining.current = Math.max(0, ms - (Date.now() - startedAt));
+    };
+  }, [running, onDismissRequest]);
+  return {
+    handleBlur: event => {
+      if (!event.currentTarget.contains(event.relatedTarget)) {
+        setFocusWithin(false);
+      }
+    },
+    handleEntered: () => {
+      // Entry can finish beneath the pointer or with focus already inside the surface.
+      setHovered(surfaceRef.current?.matches(':hover') ?? false);
+      setFocusWithin(Boolean(surfaceRef.current?.contains(document.activeElement)));
+      setEntered(true);
+    },
+    handleFocus: () => setFocusWithin(true),
+    handleMouseEnter: () => setHovered(true),
+    handleMouseLeave: () => setHovered(false),
+    surfaceRef
+  };
+};
+
+export { useSnackbarAutoDismiss as default };
+//# sourceMappingURL=useSnackbarAutoDismiss.mjs.map

package/build/Snackbar/useSnackbarAutoDismiss.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnackbarAutoDismiss.mjs","sources":["../../src/Snackbar/useSnackbarAutoDismiss.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\nimport { SNACKBAR_DEFAULT_DURATION, SNACKBAR_EXTENDED_DURATION } from './constants';\nimport type { SnackbarProps } from './Snackbar';\nimport type { SnackbarDuration } from './Snackbar.types';\n\nconst DURATIONS: Record<SnackbarDuration, number | null> = {\n  default: SNACKBAR_DEFAULT_DURATION,\n  extended: SNACKBAR_EXTENDED_DURATION,\n  indefinite: null,\n};\n\n/** Starts after entry finishes and pauses on hover or focus, preserving the remaining time. */\nconst useSnackbarAutoDismiss = ({\n  duration,\n  onDismissRequest,\n  timeout,\n  visible,\n}: Pick<SnackbarProps, 'duration' | 'onDismissRequest' | 'timeout' | 'visible'>) => {\n  const surfaceRef = useRef<HTMLDivElement>(null);\n  const remaining = useRef(duration ? DURATIONS[duration] : (timeout ?? SNACKBAR_DEFAULT_DURATION));\n  const [entered, setEntered] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [focusWithin, setFocusWithin] = useState(false);\n\n  const running = visible && entered && !hovered && !focusWithin;\n\n  useEffect(() => {\n    const ms = remaining.current;\n    if (!running || ms === null) {\n      return undefined;\n    }\n\n    const startedAt = Date.now();\n    const id = window.setTimeout(() => onDismissRequest(), ms);\n    return () => {\n      window.clearTimeout(id);\n      remaining.current = Math.max(0, ms - (Date.now() - startedAt));\n    };\n  }, [running, onDismissRequest]);\n\n  return {\n    handleBlur: (event: React.FocusEvent<HTMLDivElement>) => {\n      if (!event.currentTarget.contains(event.relatedTarget)) {\n        setFocusWithin(false);\n      }\n    },\n    handleEntered: () => {\n      // Entry can finish beneath the pointer or with focus already inside the surface.\n      setHovered(surfaceRef.current?.matches(':hover') ?? false);\n      setFocusWithin(Boolean(surfaceRef.current?.contains(document.activeElement)));\n      setEntered(true);\n    },\n    handleFocus: () => setFocusWithin(true),\n    handleMouseEnter: () => setHovered(true),\n    handleMouseLeave: () => setHovered(false),\n    surfaceRef,\n  };\n};\n\nexport default useSnackbarAutoDismiss;\n"],"names":["DURATIONS","default","SNACKBAR_DEFAULT_DURATION","extended","SNACKBAR_EXTENDED_DURATION","indefinite","useSnackbarAutoDismiss","duration","onDismissRequest","timeout","visible","surfaceRef","useRef","remaining","entered","setEntered","useState","hovered","setHovered","focusWithin","setFocusWithin","running","useEffect","ms","current","undefined","startedAt","Date","now","id","window","setTimeout","clearTimeout","Math","max","handleBlur","event","currentTarget","contains","relatedTarget","handleEntered","matches","Boolean","document","activeElement","handleFocus","handleMouseEnter","handleMouseLeave"],"mappings":";;;AAMA,MAAMA,SAAS,GAA4C;AACzDC,EAAAA,OAAO,EAAEC,yBAAyB;AAClCC,EAAAA,QAAQ,EAAEC,0BAA0B;AACpCC,EAAAA,UAAU,EAAE;CACb;AAED;AACA,MAAMC,sBAAsB,GAAGA,CAAC;EAC9BC,QAAQ;EACRC,gBAAgB;EAChBC,OAAO;AACPC,EAAAA;AAAO,CACsE,KAAI;AACjF,EAAA,MAAMC,UAAU,GAAGC,MAAM,CAAiB,IAAI,CAAC;AAC/C,EAAA,MAAMC,SAAS,GAAGD,MAAM,CAACL,QAAQ,GAAGP,SAAS,CAACO,QAAQ,CAAC,GAAIE,OAAO,IAAIP,yBAA0B,CAAC;EACjG,MAAM,CAACY,OAAO,EAAEC,UAAU,CAAC,GAAGC,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACC,OAAO,EAAEC,UAAU,CAAC,GAAGF,QAAQ,CAAC,KAAK,CAAC;EAC7C,MAAM,CAACG,WAAW,EAAEC,cAAc,CAAC,GAAGJ,QAAQ,CAAC,KAAK,CAAC;EAErD,MAAMK,OAAO,GAAGX,OAAO,IAAII,OAAO,IAAI,CAACG,OAAO,IAAI,CAACE,WAAW;AAE9DG,EAAAA,SAAS,CAAC,MAAK;AACb,IAAA,MAAMC,EAAE,GAAGV,SAAS,CAACW,OAAO;AAC5B,IAAA,IAAI,CAACH,OAAO,IAAIE,EAAE,KAAK,IAAI,EAAE;AAC3B,MAAA,OAAOE,SAAS;AAClB,IAAA;AAEA,IAAA,MAAMC,SAAS,GAAGC,IAAI,CAACC,GAAG,EAAE;AAC5B,IAAA,MAAMC,EAAE,GAAGC,MAAM,CAACC,UAAU,CAAC,MAAMvB,gBAAgB,EAAE,EAAEe,EAAE,CAAC;AAC1D,IAAA,OAAO,MAAK;AACVO,MAAAA,MAAM,CAACE,YAAY,CAACH,EAAE,CAAC;AACvBhB,MAAAA,SAAS,CAACW,OAAO,GAAGS,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEX,EAAE,IAAII,IAAI,CAACC,GAAG,EAAE,GAAGF,SAAS,CAAC,CAAC;IAChE,CAAC;AACH,EAAA,CAAC,EAAE,CAACL,OAAO,EAAEb,gBAAgB,CAAC,CAAC;EAE/B,OAAO;IACL2B,UAAU,EAAGC,KAAuC,IAAI;MACtD,IAAI,CAACA,KAAK,CAACC,aAAa,CAACC,QAAQ,CAACF,KAAK,CAACG,aAAa,CAAC,EAAE;QACtDnB,cAAc,CAAC,KAAK,CAAC;AACvB,MAAA;IACF,CAAC;IACDoB,aAAa,EAAEA,MAAK;AAClB;MACAtB,UAAU,CAACP,UAAU,CAACa,OAAO,EAAEiB,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC;AAC1DrB,MAAAA,cAAc,CAACsB,OAAO,CAAC/B,UAAU,CAACa,OAAO,EAAEc,QAAQ,CAACK,QAAQ,CAACC,aAAa,CAAC,CAAC,CAAC;MAC7E7B,UAAU,CAAC,IAAI,CAAC;IAClB,CAAC;AACD8B,IAAAA,WAAW,EAAEA,MAAMzB,cAAc,CAAC,IAAI,CAAC;AACvC0B,IAAAA,gBAAgB,EAAEA,MAAM5B,UAAU,CAAC,IAAI,CAAC;AACxC6B,IAAAA,gBAAgB,EAAEA,MAAM7B,UAAU,CAAC,KAAK,CAAC;AACzCP,IAAAA;GACD;AACH;;"}

package/build/Snackbar/useSnackbarManager.js

@@ -0,0 +1,144 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+const emptyState = {
+  active: null,
+  activeHasRendered: false,
+  announcementKey: 0,
+  pending: null,
+  visible: false
+};
+/**
+ * Coalesces creates before the first commit, then keeps active content until its exit finishes.
+ * Only the latest pending replacement is retained. Manual dismissal cancels it; action dismissal
+ * preserves a follow-up created by its callback. Exited promotes pending or returns to idle.
+ * Instance IDs prevent stale exit callbacks from affecting a newer Snackbar.
+ */
+const snackbarManagerReducer = (state, action) => {
+  switch (action.type) {
+    case 'show':
+      if (!state.active || !state.activeHasRendered) {
+        // Batched creates collapse to the latest instance before anything has entered.
+        return {
+          active: action.instance,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true
+        };
+      }
+      // Keep the active content until it exits; newer creates replace only the pending instance.
+      return {
+        ...state,
+        pending: action.instance,
+        visible: false
+      };
+    case 'rendered':
+      if (state.active?.id !== action.instanceId || state.activeHasRendered) {
+        return state;
+      }
+      return {
+        ...state,
+        activeHasRendered: true
+      };
+    case 'dismiss':
+      if (!state.active) {
+        return state;
+      }
+      return state.activeHasRendered ? {
+        ...state,
+        pending: action.preservePending ? state.pending : null,
+        visible: false
+      } : {
+        ...emptyState,
+        announcementKey: state.announcementKey
+      };
+    case 'exited':
+      // Ignore callbacks from an instance that has already been replaced.
+      if (state.active?.id !== action.instanceId) {
+        return state;
+      }
+      if (state.pending) {
+        return {
+          active: state.pending,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true
+        };
+      }
+      return {
+        ...emptyState,
+        announcementKey: state.announcementKey
+      };
+    default:
+      return state;
+  }
+};
+/**
+ * Owns latest-wins replacement through reducer actions, separate from rendering and animation.
+ * Stable create/dismiss callbacks request state changes; the surface's onExited callback completes
+ * dismissal. The provider uses this state to mount/unmount the portal without a notification queue.
+ */
+const useSnackbarManager = () => {
+  const [state, dispatch] = React.useReducer(snackbarManagerReducer, emptyState);
+  const nextInstanceId = React.useRef(0);
+  const createSnackbar = React.useCallback(props => {
+    const {
+      text
+    } = props;
+    if (text == null || typeof text === 'boolean' || typeof text === 'string' && text.trim() === '') {
+      // A clear request must dismiss active and cancel pending, never create a blank replacement.
+      dispatch({
+        type: 'dismiss'
+      });
+      return;
+    }
+    nextInstanceId.current += 1;
+    dispatch({
+      type: 'show',
+      instance: {
+        id: nextInstanceId.current,
+        props
+      }
+    });
+  }, []);
+  const dismissSnackbar = React.useCallback(reason => {
+    // Action callbacks can create a replacement; dismiss only the original in that case.
+    dispatch({
+      type: 'dismiss',
+      preservePending: reason === 'action'
+    });
+  }, []);
+  const handleExited = React.useCallback(() => {
+    if (state.active) {
+      dispatch({
+        type: 'exited',
+        instanceId: state.active.id
+      });
+    }
+  }, [state.active]);
+  React.useEffect(() => {
+    if (state.active && state.visible && !state.activeHasRendered) {
+      // Later creates can now wait for this instance's exit instead of coalescing before render.
+      dispatch({
+        type: 'rendered',
+        instanceId: state.active.id
+      });
+    }
+  }, [state.active, state.activeHasRendered, state.visible]);
+  return {
+    active: state.active,
+    announcementKey: state.announcementKey,
+    createSnackbar,
+    dismissSnackbar,
+    handleExited,
+    visible: state.visible
+  };
+};
+
+exports.default = useSnackbarManager;
+//# sourceMappingURL=useSnackbarManager.js.map

package/build/Snackbar/useSnackbarManager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnackbarManager.js","sources":["../../src/Snackbar/useSnackbarManager.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useRef } from 'react';\n\nimport type { SnackbarCreationProps } from './Snackbar.types';\n\ntype SnackbarInstance = {\n  id: number;\n  props: SnackbarCreationProps;\n};\n\ntype SnackbarManagerState = {\n  /** The instance currently entering, visible or exiting. `null` means the provider is idle. */\n  active: SnackbarInstance | null;\n  /** Marks the active provider render as committed, not its entry animation as finished. */\n  activeHasRendered: boolean;\n  /** Changes when a new instance becomes active so repeated message text can be announced. */\n  announcementKey: number;\n  /** The latest replacement waiting for active to exit. `null` means no replacement is waiting. */\n  pending: SnackbarInstance | null;\n  /** Whether active should enter/stay visible; false requests its exit or indicates idle state. */\n  visible: boolean;\n};\n\ntype SnackbarManagerAction =\n  | { type: 'show'; instance: SnackbarInstance }\n  | {\n      /** Ends pre-render coalescing; subsequent creates must wait for the committed instance to exit. */\n      type: 'rendered';\n      instanceId: number;\n    }\n  | { type: 'dismiss'; preservePending?: boolean }\n  | { type: 'exited'; instanceId: number };\n\nconst emptyState: SnackbarManagerState = {\n  active: null,\n  activeHasRendered: false,\n  announcementKey: 0,\n  pending: null,\n  visible: false,\n};\n\n/**\n * Coalesces creates before the first commit, then keeps active content until its exit finishes.\n * Only the latest pending replacement is retained. Manual dismissal cancels it; action dismissal\n * preserves a follow-up created by its callback. Exited promotes pending or returns to idle.\n * Instance IDs prevent stale exit callbacks from affecting a newer Snackbar.\n */\nconst snackbarManagerReducer = (\n  state: SnackbarManagerState,\n  action: SnackbarManagerAction,\n): SnackbarManagerState => {\n  switch (action.type) {\n    case 'show':\n      if (!state.active || !state.activeHasRendered) {\n        // Batched creates collapse to the latest instance before anything has entered.\n        return {\n          active: action.instance,\n          activeHasRendered: false,\n          announcementKey: state.announcementKey + 1,\n          pending: null,\n          visible: true,\n        };\n      }\n\n      // Keep the active content until it exits; newer creates replace only the pending instance.\n      return { ...state, pending: action.instance, visible: false };\n    case 'rendered':\n      if (state.active?.id !== action.instanceId || state.activeHasRendered) {\n        return state;\n      }\n\n      return { ...state, activeHasRendered: true };\n    case 'dismiss':\n      if (!state.active) {\n        return state;\n      }\n\n      return state.activeHasRendered\n        ? { ...state, pending: action.preservePending ? state.pending : null, visible: false }\n        : { ...emptyState, announcementKey: state.announcementKey };\n    case 'exited':\n      // Ignore callbacks from an instance that has already been replaced.\n      if (state.active?.id !== action.instanceId) {\n        return state;\n      }\n\n      if (state.pending) {\n        return {\n          active: state.pending,\n          activeHasRendered: false,\n          announcementKey: state.announcementKey + 1,\n          pending: null,\n          visible: true,\n        };\n      }\n\n      return { ...emptyState, announcementKey: state.announcementKey };\n    default:\n      return state;\n  }\n};\n\n/**\n * Owns latest-wins replacement through reducer actions, separate from rendering and animation.\n * Stable create/dismiss callbacks request state changes; the surface's onExited callback completes\n * dismissal. The provider uses this state to mount/unmount the portal without a notification queue.\n */\nconst useSnackbarManager = () => {\n  const [state, dispatch] = useReducer(snackbarManagerReducer, emptyState);\n  const nextInstanceId = useRef(0);\n\n  const createSnackbar = useCallback((props: SnackbarCreationProps) => {\n    const { text } = props;\n    if (\n      text == null ||\n      typeof text === 'boolean' ||\n      (typeof text === 'string' && text.trim() === '')\n    ) {\n      // A clear request must dismiss active and cancel pending, never create a blank replacement.\n      dispatch({ type: 'dismiss' });\n      return;\n    }\n\n    nextInstanceId.current += 1;\n    dispatch({ type: 'show', instance: { id: nextInstanceId.current, props } });\n  }, []);\n\n  const dismissSnackbar = useCallback((reason?: 'action') => {\n    // Action callbacks can create a replacement; dismiss only the original in that case.\n    dispatch({ type: 'dismiss', preservePending: reason === 'action' });\n  }, []);\n\n  const handleExited = useCallback(() => {\n    if (state.active) {\n      dispatch({ type: 'exited', instanceId: state.active.id });\n    }\n  }, [state.active]);\n\n  useEffect(() => {\n    if (state.active && state.visible && !state.activeHasRendered) {\n      // Later creates can now wait for this instance's exit instead of coalescing before render.\n      dispatch({ type: 'rendered', instanceId: state.active.id });\n    }\n  }, [state.active, state.activeHasRendered, state.visible]);\n\n  return {\n    active: state.active,\n    announcementKey: state.announcementKey,\n    createSnackbar,\n    dismissSnackbar,\n    handleExited,\n    visible: state.visible,\n  };\n};\n\nexport default useSnackbarManager;\n"],"names":["emptyState","active","activeHasRendered","announcementKey","pending","visible","snackbarManagerReducer","state","action","type","instance","id","instanceId","preservePending","useSnackbarManager","dispatch","useReducer","nextInstanceId","useRef","createSnackbar","useCallback","props","text","trim","current","dismissSnackbar","reason","handleExited","useEffect"],"mappings":"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"}

package/build/Snackbar/useSnackbarManager.mjs

@@ -0,0 +1,140 @@
+import { useReducer, useRef, useCallback, useEffect } from 'react';
+
+const emptyState = {
+  active: null,
+  activeHasRendered: false,
+  announcementKey: 0,
+  pending: null,
+  visible: false
+};
+/**
+ * Coalesces creates before the first commit, then keeps active content until its exit finishes.
+ * Only the latest pending replacement is retained. Manual dismissal cancels it; action dismissal
+ * preserves a follow-up created by its callback. Exited promotes pending or returns to idle.
+ * Instance IDs prevent stale exit callbacks from affecting a newer Snackbar.
+ */
+const snackbarManagerReducer = (state, action) => {
+  switch (action.type) {
+    case 'show':
+      if (!state.active || !state.activeHasRendered) {
+        // Batched creates collapse to the latest instance before anything has entered.
+        return {
+          active: action.instance,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true
+        };
+      }
+      // Keep the active content until it exits; newer creates replace only the pending instance.
+      return {
+        ...state,
+        pending: action.instance,
+        visible: false
+      };
+    case 'rendered':
+      if (state.active?.id !== action.instanceId || state.activeHasRendered) {
+        return state;
+      }
+      return {
+        ...state,
+        activeHasRendered: true
+      };
+    case 'dismiss':
+      if (!state.active) {
+        return state;
+      }
+      return state.activeHasRendered ? {
+        ...state,
+        pending: action.preservePending ? state.pending : null,
+        visible: false
+      } : {
+        ...emptyState,
+        announcementKey: state.announcementKey
+      };
+    case 'exited':
+      // Ignore callbacks from an instance that has already been replaced.
+      if (state.active?.id !== action.instanceId) {
+        return state;
+      }
+      if (state.pending) {
+        return {
+          active: state.pending,
+          activeHasRendered: false,
+          announcementKey: state.announcementKey + 1,
+          pending: null,
+          visible: true
+        };
+      }
+      return {
+        ...emptyState,
+        announcementKey: state.announcementKey
+      };
+    default:
+      return state;
+  }
+};
+/**
+ * Owns latest-wins replacement through reducer actions, separate from rendering and animation.
+ * Stable create/dismiss callbacks request state changes; the surface's onExited callback completes
+ * dismissal. The provider uses this state to mount/unmount the portal without a notification queue.
+ */
+const useSnackbarManager = () => {
+  const [state, dispatch] = useReducer(snackbarManagerReducer, emptyState);
+  const nextInstanceId = useRef(0);
+  const createSnackbar = useCallback(props => {
+    const {
+      text
+    } = props;
+    if (text == null || typeof text === 'boolean' || typeof text === 'string' && text.trim() === '') {
+      // A clear request must dismiss active and cancel pending, never create a blank replacement.
+      dispatch({
+        type: 'dismiss'
+      });
+      return;
+    }
+    nextInstanceId.current += 1;
+    dispatch({
+      type: 'show',
+      instance: {
+        id: nextInstanceId.current,
+        props
+      }
+    });
+  }, []);
+  const dismissSnackbar = useCallback(reason => {
+    // Action callbacks can create a replacement; dismiss only the original in that case.
+    dispatch({
+      type: 'dismiss',
+      preservePending: reason === 'action'
+    });
+  }, []);
+  const handleExited = useCallback(() => {
+    if (state.active) {
+      dispatch({
+        type: 'exited',
+        instanceId: state.active.id
+      });
+    }
+  }, [state.active]);
+  useEffect(() => {
+    if (state.active && state.visible && !state.activeHasRendered) {
+      // Later creates can now wait for this instance's exit instead of coalescing before render.
+      dispatch({
+        type: 'rendered',
+        instanceId: state.active.id
+      });
+    }
+  }, [state.active, state.activeHasRendered, state.visible]);
+  return {
+    active: state.active,
+    announcementKey: state.announcementKey,
+    createSnackbar,
+    dismissSnackbar,
+    handleExited,
+    visible: state.visible
+  };
+};
+
+export { useSnackbarManager as default };
+//# sourceMappingURL=useSnackbarManager.mjs.map

package/build/Snackbar/useSnackbarManager.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSnackbarManager.mjs","sources":["../../src/Snackbar/useSnackbarManager.ts"],"sourcesContent":["import { useCallback, useEffect, useReducer, useRef } from 'react';\n\nimport type { SnackbarCreationProps } from './Snackbar.types';\n\ntype SnackbarInstance = {\n  id: number;\n  props: SnackbarCreationProps;\n};\n\ntype SnackbarManagerState = {\n  /** The instance currently entering, visible or exiting. `null` means the provider is idle. */\n  active: SnackbarInstance | null;\n  /** Marks the active provider render as committed, not its entry animation as finished. */\n  activeHasRendered: boolean;\n  /** Changes when a new instance becomes active so repeated message text can be announced. */\n  announcementKey: number;\n  /** The latest replacement waiting for active to exit. `null` means no replacement is waiting. */\n  pending: SnackbarInstance | null;\n  /** Whether active should enter/stay visible; false requests its exit or indicates idle state. */\n  visible: boolean;\n};\n\ntype SnackbarManagerAction =\n  | { type: 'show'; instance: SnackbarInstance }\n  | {\n      /** Ends pre-render coalescing; subsequent creates must wait for the committed instance to exit. */\n      type: 'rendered';\n      instanceId: number;\n    }\n  | { type: 'dismiss'; preservePending?: boolean }\n  | { type: 'exited'; instanceId: number };\n\nconst emptyState: SnackbarManagerState = {\n  active: null,\n  activeHasRendered: false,\n  announcementKey: 0,\n  pending: null,\n  visible: false,\n};\n\n/**\n * Coalesces creates before the first commit, then keeps active content until its exit finishes.\n * Only the latest pending replacement is retained. Manual dismissal cancels it; action dismissal\n * preserves a follow-up created by its callback. Exited promotes pending or returns to idle.\n * Instance IDs prevent stale exit callbacks from affecting a newer Snackbar.\n */\nconst snackbarManagerReducer = (\n  state: SnackbarManagerState,\n  action: SnackbarManagerAction,\n): SnackbarManagerState => {\n  switch (action.type) {\n    case 'show':\n      if (!state.active || !state.activeHasRendered) {\n        // Batched creates collapse to the latest instance before anything has entered.\n        return {\n          active: action.instance,\n          activeHasRendered: false,\n          announcementKey: state.announcementKey + 1,\n          pending: null,\n          visible: true,\n        };\n      }\n\n      // Keep the active content until it exits; newer creates replace only the pending instance.\n      return { ...state, pending: action.instance, visible: false };\n    case 'rendered':\n      if (state.active?.id !== action.instanceId || state.activeHasRendered) {\n        return state;\n      }\n\n      return { ...state, activeHasRendered: true };\n    case 'dismiss':\n      if (!state.active) {\n        return state;\n      }\n\n      return state.activeHasRendered\n        ? { ...state, pending: action.preservePending ? state.pending : null, visible: false }\n        : { ...emptyState, announcementKey: state.announcementKey };\n    case 'exited':\n      // Ignore callbacks from an instance that has already been replaced.\n      if (state.active?.id !== action.instanceId) {\n        return state;\n      }\n\n      if (state.pending) {\n        return {\n          active: state.pending,\n          activeHasRendered: false,\n          announcementKey: state.announcementKey + 1,\n          pending: null,\n          visible: true,\n        };\n      }\n\n      return { ...emptyState, announcementKey: state.announcementKey };\n    default:\n      return state;\n  }\n};\n\n/**\n * Owns latest-wins replacement through reducer actions, separate from rendering and animation.\n * Stable create/dismiss callbacks request state changes; the surface's onExited callback completes\n * dismissal. The provider uses this state to mount/unmount the portal without a notification queue.\n */\nconst useSnackbarManager = () => {\n  const [state, dispatch] = useReducer(snackbarManagerReducer, emptyState);\n  const nextInstanceId = useRef(0);\n\n  const createSnackbar = useCallback((props: SnackbarCreationProps) => {\n    const { text } = props;\n    if (\n      text == null ||\n      typeof text === 'boolean' ||\n      (typeof text === 'string' && text.trim() === '')\n    ) {\n      // A clear request must dismiss active and cancel pending, never create a blank replacement.\n      dispatch({ type: 'dismiss' });\n      return;\n    }\n\n    nextInstanceId.current += 1;\n    dispatch({ type: 'show', instance: { id: nextInstanceId.current, props } });\n  }, []);\n\n  const dismissSnackbar = useCallback((reason?: 'action') => {\n    // Action callbacks can create a replacement; dismiss only the original in that case.\n    dispatch({ type: 'dismiss', preservePending: reason === 'action' });\n  }, []);\n\n  const handleExited = useCallback(() => {\n    if (state.active) {\n      dispatch({ type: 'exited', instanceId: state.active.id });\n    }\n  }, [state.active]);\n\n  useEffect(() => {\n    if (state.active && state.visible && !state.activeHasRendered) {\n      // Later creates can now wait for this instance's exit instead of coalescing before render.\n      dispatch({ type: 'rendered', instanceId: state.active.id });\n    }\n  }, [state.active, state.activeHasRendered, state.visible]);\n\n  return {\n    active: state.active,\n    announcementKey: state.announcementKey,\n    createSnackbar,\n    dismissSnackbar,\n    handleExited,\n    visible: state.visible,\n  };\n};\n\nexport default useSnackbarManager;\n"],"names":["emptyState","active","activeHasRendered","announcementKey","pending","visible","snackbarManagerReducer","state","action","type","instance","id","instanceId","preservePending","useSnackbarManager","dispatch","useReducer","nextInstanceId","useRef","createSnackbar","useCallback","props","text","trim","current","dismissSnackbar","reason","handleExited","useEffect"],"mappings":"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"}

package/build/Stepper/Stepper.js

@@ -81,7 +81,7 @@ const Stepper = ({
       children: step.label
     });
     return /*#__PURE__*/jsxRuntime.jsx("li", {
-      className: clsx.clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default wds-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: clsx.clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`

package/build/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active\n            ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active'\n            : 'np-text-body-default wds-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/Stepper/Stepper.mjs

@@ -77,7 +77,7 @@ const Stepper = ({
       children: step.label
     });
     return /*#__PURE__*/jsx("li", {
-      className: clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default wds-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
+      className: clsx('hidden-xs', 'tw-stepper__step', active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default', clickable && 'tw-stepper__step--clickable', step.hoverLabel && 'tw-stepper__step--has-tooltip'),
       "aria-current": active ? 'step' : false,
       style: isRTL ? {
         right: `${index * stepPercentage * 100}%`

package/build/Stepper/Stepper.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.mjs","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active\n            ? 'np-text-body-default-bold wds-text-body-default-bold tw-stepper__step--active'\n            : 'np-text-body-default wds-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}
+{"version":3,"file":"Stepper.mjs","sources":["../../src/Stepper/Stepper.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport * as React from 'react';\n\nimport { Position } from '../common';\nimport { useDirection } from '../common/hooks';\nimport Tooltip from '../Tooltip';\n\nimport { isTouchDevice } from './deviceDetection';\n\nfunction clamp(from: number, to: number, value: number) {\n  return Math.max(Math.min(to, value), from);\n}\n\nexport interface Step {\n  label: React.ReactNode;\n  onClick?: () => void;\n  hoverLabel?: React.ReactNode;\n}\n\nexport interface StepperProps {\n  steps: readonly Step[];\n  activeStep?: number;\n  className?: string;\n  testId?: string;\n}\n\n/**\n * This component is considered user-unfriendly and inaccessible on its own and will likely be made internal in the future. Please use `FlowNavigation` instead.\n * @see https://storybook.wise.design/?path=/story/navigation-flownavigation--variants\n */\nconst Stepper = ({ steps, activeStep = 0, className, testId }: StepperProps) => {\n  const { isRTL } = useDirection();\n\n  if (steps.length === 0) {\n    return null;\n  }\n\n  const activeStepIndex = clamp(0, steps.length - 1, activeStep);\n  const stepPercentage = 1 / (steps.length - 1);\n  const percentageCompleted = activeStepIndex / (steps.length - 1);\n\n  const getProgressWidth = (): string => {\n    if (percentageCompleted === 0) {\n      return '0%';\n    }\n    /**\n     * Progress bar starts with left/right (depends on rtl) shift `--progress-bar-start-shift` for hiding Progress bar's left and right borders\n     * which are used for progress vertical delimiter.\n     * When progress is completed, we need to add `--progress-bar-border-width` to the width to allow the right border be outside of the progress area.\n     */\n    return `calc(${percentageCompleted * 100}% + var(--progress-bar-start-shift) + var(--progress-bar-border-width))`;\n  };\n\n  const renderStep = (step: Step, index: number) => {\n    const active = index === activeStepIndex;\n    const clickable = step.onClick && !active;\n\n    const labelButton = clickable ? (\n      <button\n        type=\"button\"\n        className=\"btn-unstyled tw-stepper__step-label\"\n        onClick={() => clickable && step.onClick?.()}\n      >\n        <small>{step.label}</small>\n      </button>\n    ) : (\n      <span className=\"tw-stepper__step-label\">{step.label}</span>\n    );\n\n    return (\n      <li\n        key={index}\n        className={clsx(\n          'hidden-xs',\n          'tw-stepper__step',\n          active ? 'np-text-body-default-bold tw-stepper__step--active' : 'np-text-body-default',\n          clickable && 'tw-stepper__step--clickable',\n          step.hoverLabel && 'tw-stepper__step--has-tooltip',\n        )}\n        aria-current={active ? 'step' : false}\n        style={\n          isRTL\n            ? { right: `${index * stepPercentage * 100}%` }\n            : { left: `${index * stepPercentage * 100}%` }\n        }\n      >\n        {step.hoverLabel && !isTouchDevice() ? (\n          <Tooltip position={Position.BOTTOM} label={step.hoverLabel}>\n            {labelButton}\n          </Tooltip>\n        ) : (\n          labelButton\n        )}\n      </li>\n    );\n  };\n\n  return (\n    <div className={clsx('tw-stepper', className)} data-testid={testId}>\n      <div className=\"progress\">\n        <div\n          className=\"progress-bar\"\n          style={{ width: getProgressWidth() }}\n          data-testid=\"progress-bar\"\n        />\n      </div>\n      <ol className=\"tw-stepper-steps p-t-1 m-b-0\">{steps.map(renderStep)}</ol>\n    </div>\n  );\n};\n\nexport default Stepper;\n"],"names":["clamp","from","to","value","Math","max","min","Stepper","steps","activeStep","className","testId","isRTL","useDirection","length","activeStepIndex","stepPercentage","percentageCompleted","getProgressWidth","renderStep","step","index","active","clickable","onClick","labelButton","_jsx","type","children","label","clsx","hoverLabel","style","right","left","isTouchDevice","Tooltip","position","Position","BOTTOM","_jsxs","width","map"],"mappings":"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"}

package/build/Table/Header/TableHeader.js

@@ -37,7 +37,7 @@ const TableHeader = ({
     }
     // If headers are empty, we still should render empty headers to keep visual consistency
     return /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: "np-table-header-content np-text-body-default-bold wds-text-body-default-bold",
+      className: "np-table-header-content np-text-body-default-bold",
       "data-testid": "np-table-empty-header",
       children: "\xA0"
     });

package/build/Table/Header/TableHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.js","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n  header?: string;\n  className?: string;\n  alignment?: 'left' | 'right';\n  status?: 'error';\n  width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n  isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n  header,\n  className,\n  alignment = 'left',\n  status,\n  width,\n  isActionHeader = false,\n}: TableHeaderProps) => {\n  const { formatMessage } = useIntl();\n\n  const getHeaderContent = () => {\n    if (isActionHeader) {\n      // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n      return (\n        <TableStatusText\n          text={formatMessage(messages.actionHeader)}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n        />\n      );\n    }\n\n    if (header) {\n      return (\n        <TableStatusText\n          text={header}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n          status={status}\n          typography=\"default-bold\"\n        />\n      );\n    }\n\n    // If headers are empty, we still should render empty headers to keep visual consistency\n    return (\n      <div\n        className=\"np-table-header-content np-text-body-default-bold wds-text-body-default-bold\"\n        data-testid=\"np-table-empty-header\"\n      >\n        &nbsp;\n      </div>\n    );\n  };\n\n  return (\n    <th\n      className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n        'np-table-header--error': status === 'error',\n        'np-table-header--action': isActionHeader,\n      })}\n      style={{ minWidth: width, width }}\n    >\n      {getHeaderContent()}\n    </th>\n  );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,sBAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,cAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,8EAA8E;AACxF,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,cAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,SAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}
+{"version":3,"file":"TableHeader.js","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n  header?: string;\n  className?: string;\n  alignment?: 'left' | 'right';\n  status?: 'error';\n  width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n  isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n  header,\n  className,\n  alignment = 'left',\n  status,\n  width,\n  isActionHeader = false,\n}: TableHeaderProps) => {\n  const { formatMessage } = useIntl();\n\n  const getHeaderContent = () => {\n    if (isActionHeader) {\n      // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n      return (\n        <TableStatusText\n          text={formatMessage(messages.actionHeader)}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n        />\n      );\n    }\n\n    if (header) {\n      return (\n        <TableStatusText\n          text={header}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n          status={status}\n          typography=\"default-bold\"\n        />\n      );\n    }\n\n    // If headers are empty, we still should render empty headers to keep visual consistency\n    return (\n      <div\n        className=\"np-table-header-content np-text-body-default-bold\"\n        data-testid=\"np-table-empty-header\"\n      >\n        &nbsp;\n      </div>\n    );\n  };\n\n  return (\n    <th\n      className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n        'np-table-header--error': status === 'error',\n        'np-table-header--action': isActionHeader,\n      })}\n      style={{ minWidth: width, width }}\n    >\n      {getHeaderContent()}\n    </th>\n  );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,iBAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,sBAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,cAAA,CAACC,uBAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,cAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,mDAAmD;AAC7D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,cAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,SAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}

package/build/Table/Header/TableHeader.mjs

@@ -33,7 +33,7 @@ const TableHeader = ({
     }
     // If headers are empty, we still should render empty headers to keep visual consistency
     return /*#__PURE__*/jsx("div", {
-      className: "np-table-header-content np-text-body-default-bold wds-text-body-default-bold",
+      className: "np-table-header-content np-text-body-default-bold",
       "data-testid": "np-table-empty-header",
       children: "\xA0"
     });

package/build/Table/Header/TableHeader.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"TableHeader.mjs","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n  header?: string;\n  className?: string;\n  alignment?: 'left' | 'right';\n  status?: 'error';\n  width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n  isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n  header,\n  className,\n  alignment = 'left',\n  status,\n  width,\n  isActionHeader = false,\n}: TableHeaderProps) => {\n  const { formatMessage } = useIntl();\n\n  const getHeaderContent = () => {\n    if (isActionHeader) {\n      // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n      return (\n        <TableStatusText\n          text={formatMessage(messages.actionHeader)}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n        />\n      );\n    }\n\n    if (header) {\n      return (\n        <TableStatusText\n          text={header}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n          status={status}\n          typography=\"default-bold\"\n        />\n      );\n    }\n\n    // If headers are empty, we still should render empty headers to keep visual consistency\n    return (\n      <div\n        className=\"np-table-header-content np-text-body-default-bold wds-text-body-default-bold\"\n        data-testid=\"np-table-empty-header\"\n      >\n        &nbsp;\n      </div>\n    );\n  };\n\n  return (\n    <th\n      className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n        'np-table-header--error': status === 'error',\n        'np-table-header--action': isActionHeader,\n      })}\n      style={{ minWidth: width, width }}\n    >\n      {getHeaderContent()}\n    </th>\n  );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,QAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,GAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,8EAA8E;AACxF,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,GAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,IAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}
+{"version":3,"file":"TableHeader.mjs","sources":["../../../src/Table/Header/TableHeader.tsx"],"sourcesContent":["import { useIntl } from 'react-intl';\nimport messages from '../Table.messages';\nimport TableStatusText from '../StatusText/TableStatusText';\nimport { clsx } from 'clsx';\n\nexport interface TableHeaderType {\n  header?: string;\n  className?: string;\n  alignment?: 'left' | 'right';\n  status?: 'error';\n  width?: string;\n}\n\nexport interface TableHeaderProps extends TableHeaderType {\n  isActionHeader?: boolean;\n}\n\nconst TableHeader = ({\n  header,\n  className,\n  alignment = 'left',\n  status,\n  width,\n  isActionHeader = false,\n}: TableHeaderProps) => {\n  const { formatMessage } = useIntl();\n\n  const getHeaderContent = () => {\n    if (isActionHeader) {\n      // `Action` header doesn't have visual text content, but it has the header, which is visible for screen readers only\n      return (\n        <TableStatusText\n          text={formatMessage(messages.actionHeader)}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n        />\n      );\n    }\n\n    if (header) {\n      return (\n        <TableStatusText\n          text={header}\n          className={`np-table-header-content${isActionHeader ? ' sr-only' : ''}`}\n          status={status}\n          typography=\"default-bold\"\n        />\n      );\n    }\n\n    // If headers are empty, we still should render empty headers to keep visual consistency\n    return (\n      <div\n        className=\"np-table-header-content np-text-body-default-bold\"\n        data-testid=\"np-table-empty-header\"\n      >\n        &nbsp;\n      </div>\n    );\n  };\n\n  return (\n    <th\n      className={clsx('np-table-header', className, `np-table-header--${alignment}`, {\n        'np-table-header--error': status === 'error',\n        'np-table-header--action': isActionHeader,\n      })}\n      style={{ minWidth: width, width }}\n    >\n      {getHeaderContent()}\n    </th>\n  );\n};\n\nexport default TableHeader;\n"],"names":["TableHeader","header","className","alignment","status","width","isActionHeader","formatMessage","useIntl","getHeaderContent","_jsx","TableStatusText","text","messages","actionHeader","typography","children","clsx","style","minWidth"],"mappings":";;;;;;AAiBA,MAAMA,WAAW,GAAGA,CAAC;EACnBC,MAAM;EACNC,SAAS;AACTC,EAAAA,SAAS,GAAG,MAAM;EAClBC,MAAM;EACNC,KAAK;AACLC,EAAAA,cAAc,GAAG;AAAK,CACL,KAAI;EACrB,MAAM;AAAEC,IAAAA;GAAe,GAAGC,OAAO,EAAE;EAEnC,MAAMC,gBAAgB,GAAGA,MAAK;AAC5B,IAAA,IAAIH,cAAc,EAAE;AAClB;MACA,oBACEI,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEL,aAAa,CAACM,QAAQ,CAACC,YAAY,CAAE;AAC3CZ,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA;AAAG,OAAA,CACxE;AAEN,IAAA;AAEA,IAAA,IAAIL,MAAM,EAAE;MACV,oBACES,GAAA,CAACC,eAAe,EAAA;AACdC,QAAAA,IAAI,EAAEX,MAAO;AACbC,QAAAA,SAAS,EAAE,CAAA,uBAAA,EAA0BI,cAAc,GAAG,UAAU,GAAG,EAAE,CAAA,CAAG;AACxEF,QAAAA,MAAM,EAAEA,MAAO;AACfW,QAAAA,UAAU,EAAC;AAAc,OAAA,CACzB;AAEN,IAAA;AAEA;AACA,IAAA,oBACEL,GAAA,CAAA,KAAA,EAAA;AACER,MAAAA,SAAS,EAAC,mDAAmD;AAC7D,MAAA,aAAA,EAAY,uBAAuB;AAAAc,MAAAA,QAAA,EAEnC;AACF,KAAK,CAAC;EAEV,CAAC;AAED,EAAA,oBACEN,GAAA,CAAA,IAAA,EAAA;IACER,SAAS,EAAEe,IAAI,CAAC,iBAAiB,EAAEf,SAAS,EAAE,CAAA,iBAAA,EAAoBC,SAAS,CAAA,CAAE,EAAE;MAC7E,wBAAwB,EAAEC,MAAM,KAAK,OAAO;AAC5C,MAAA,yBAAyB,EAAEE;AAC5B,KAAA,CAAE;AACHY,IAAAA,KAAK,EAAE;AAAEC,MAAAA,QAAQ,EAAEd,KAAK;AAAEA,MAAAA;KAAQ;IAAAW,QAAA,EAEjCP,gBAAgB;AAAE,GACjB,CAAC;AAET;;"}