@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/integrations/tanstack-router/components/task-menu/SubTask.d.ts

@@ -0,0 +1,69 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { SubTaskProps as RawSubTaskProps } from '../../../../components/task-menu/parts/RawSubTask.js';
+type SubTaskRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawSubTaskProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+type SubTaskButtonProps = Omit<RawSubTaskProps, 'href'> & {
+    onPress: NonNullable<RawSubTaskProps['onPress']>;
+};
+export type SubTaskProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = SubTaskRouterProps<TRouter, TOptions> | SubTaskButtonProps;
+/**
+ * A subtask component that integrates with Tanstack Router for seamless navigation within task groups.
+ * Represents individual subtask items within a TaskGroup that can be either links for navigation or buttons
+ * for custom interactions, with support for various visual states including completed, uncompleted, and locked.
+ * @param {SubTaskProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { SubTask } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { TaskMenu, TaskGroup } from '@payfit/unity-components'
+ *
+ * function OnboardingTaskGroup() {
+ *   return (
+ *     <TaskMenu label="Onboarding tasks">
+ *       <TaskGroup
+ *         uniqueId="onboarding"
+ *         label="Complete Onboarding"
+ *         taskNumber={1}
+ *         taskStatus="uncompleted"
+ *       >
+ *         <SubTask
+ *           uniqueId="profile-setup"
+ *           label="Complete Profile Information"
+ *           taskStatus="uncompleted"
+ *           to="/onboarding/profile"
+ *         />
+ *         <SubTask
+ *           uniqueId="validate-email"
+ *           label="Validate Email Address"
+ *           taskStatus="completed"
+ *           onPress={() => console.log('Email validation triggered')}
+ *         />
+ *         <SubTask
+ *           uniqueId="final-approval"
+ *           label="Manager Approval"
+ *           taskStatus="locked"
+ *           to="/onboarding/approval"
+ *         />
+ *       </TaskGroup>
+ *     </TaskMenu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a link when 'to' prop is provided, or as a button when 'onPress' is provided
+ * - Supports type-safe route parameters, search params, and relative navigation with Tanstack Router
+ * - Integrates with TaskGroup component for hierarchical task organization
+ * - Provides automatic active state styling based on current route
+ * - Supports multiple task states: completed, uncompleted, and locked
+ * - Displays a dot indicator instead of a numbered badge to distinguish from main Task components
+ * - Maintains all accessibility features from the underlying RawSubTask component
+ * - SubTask selection state is automatically managed based on routing context
+ * @see {@link SubTaskProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/task-menu GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function SubTask<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: SubTaskProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace SubTask {
+    var displayName: string;
+}
+export { SubTask };

package/dist/esm/integrations/tanstack-router/components/task-menu/SubTask.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createLink as e } from "@tanstack/react-router";
+import { RawSubTask as o } from "../../../../components/task-menu/parts/RawSubTask.js";
+const i = e(o);
+function a(r) {
+  return "to" in r || "href" in r ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ t(i, { ...r, activeProps: { "data-current": !0 } })
+  ) : /* @__PURE__ */ t(o, { ...r });
+}
+a.displayName = "SubTask";
+export {
+  a as SubTask
+};

package/dist/esm/integrations/tanstack-router/components/task-menu/Task.d.ts

@@ -0,0 +1,64 @@
+import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router';
+import { TaskProps as RawTaskProps } from '../../../../components/task-menu/parts/RawTask.js';
+type TaskRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawTaskProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>;
+type TaskButtonProps = Omit<RawTaskProps, 'href'> & {
+    onPress: NonNullable<RawTaskProps['onPress']>;
+};
+export type TaskProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = TaskRouterProps<TRouter, TOptions> | TaskButtonProps;
+/**
+ * A task component that integrates with Tanstack Router for seamless navigation within task menus.
+ * Represents individual task items that can be either links for navigation or buttons for custom interactions,
+ * with support for various visual states including completed, uncompleted, locked, and selected states.
+ * @param {TaskProps} props - Either router-based props (with 'to') or button-based props (with 'onPress')
+ * @example
+ * ```tsx
+ * import { Task } from '@payfit/unity-components/integrations/tanstack-router'
+ * import { TaskMenu } from '@payfit/unity-components'
+ *
+ * function OnboardingTasks() {
+ *   return (
+ *     <TaskMenu label="Onboarding tasks">
+ *       <Task
+ *         uniqueId="setup-profile"
+ *         label="Complete Profile Setup"
+ *         taskNumber={1}
+ *         taskStatus="uncompleted"
+ *         to="/profile/setup"
+ *       />
+ *       <Task
+ *         uniqueId="validate-data"
+ *         label="Validate Information"
+ *         taskNumber={2}
+ *         taskStatus="completed"
+ *         onPress={() => console.log('Validation triggered')}
+ *       />
+ *       <Task
+ *         uniqueId="final-review"
+ *         label="Final Review"
+ *         taskNumber={3}
+ *         taskStatus="locked"
+ *         to="/review"
+ *       />
+ *     </TaskMenu>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically renders as a link when 'to' prop is provided, or as a button when 'onPress' is provided
+ * - Supports type-safe route parameters, search params, and relative navigation with Tanstack Router
+ * - Integrates with TaskMenu component for consistent task navigation UI patterns
+ * - Provides automatic active state styling based on current route
+ * - Supports multiple task states: completed, uncompleted, and locked
+ * - Maintains all accessibility features from the underlying RawTask component
+ * - Task selection state is automatically managed based on routing context
+ * @see {@link TaskProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/task-menu GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ * @see Design docs in {@link https://www.payfit.design/ Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io}
+ */
+declare function Task<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: TaskProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element;
+declare namespace Task {
+    var displayName: string;
+}
+export { Task };

package/dist/esm/integrations/tanstack-router/components/task-menu/Task.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { createLink as e } from "@tanstack/react-router";
+import { RawTask as o } from "../../../../components/task-menu/parts/RawTask.js";
+const i = e(o);
+function a(r) {
+  return "to" in r || "href" in r ? (
+    // @ts-expect-error - Complex type intersection between router props and component props
+    /* @__PURE__ */ t(i, { ...r, activeProps: { "data-current": !0 } })
+  ) : /* @__PURE__ */ t(o, { ...r });
+}
+a.displayName = "Task";
+export {
+  a as Task
+};

package/dist/esm/integrations/tanstack-router/index.d.ts

@@ -0,0 +1,20 @@
+export * from './components/breadcrumbs/Breadcrumb.js';
+export * from './components/breadcrumbs/BreadcrumbLink.js';
+export * from './components/breadcrumbs/Breadcrumbs.js';
+export * from './components/form-contextual-link/FormContextualLink.js';
+export * from './components/link/Link.js';
+export * from './components/link-button/LinkButton.js';
+export * from './components/list-view/ListView.js';
+export * from './components/list-view/parts/ListViewItem.js';
+export * from './components/menu-item/MenuItem.js';
+export * from './components/navigation-card/NavigationCard.js';
+export * from './components/nav-item/NavItem.js';
+export * from './components/pagination/PaginationLink.js';
+export * from './components/pagination/PaginationNext.js';
+export * from './components/pagination/PaginationPrevious.js';
+export * from './components/tabs/parts/Tab.js';
+export * from './components/tabs/parts/TabPanel.js';
+export * from './components/tabs/parts/TabList.js';
+export * from './components/tabs/Tabs.js';
+export * from './components/task-menu/Task.js';
+export * from './components/task-menu/SubTask.js';

package/dist/esm/integrations/tanstack-router/utils/decorators.d.ts

@@ -0,0 +1,23 @@
+import { Decorator, StoryContext } from '@storybook/react-vite';
+import { AnyContext, LoaderFnContext, RootRoute, RouteComponent } from '@tanstack/react-router';
+interface RouteConfig {
+    path: string;
+    element: RouteComponent | 'story';
+    loader?: ((ctx: LoaderFnContext<RootRoute<undefined, object, AnyContext, AnyContext, object>, any, any, any, AnyContext, any, any>) => any) | undefined;
+    children?: RouteConfig[];
+    beforeLoad?: ((ctx: LoaderFnContext<RootRoute<undefined, object, AnyContext, AnyContext, object>, any, any, any, AnyContext, any, any>) => any) | undefined;
+    validateSearch?: (search: Record<string, unknown>) => any;
+    loaderDeps?: (deps: Record<string, unknown>) => Record<string, unknown>;
+}
+export interface TanstackRouterDecoratorContext extends StoryContext {
+    parameters: {
+        router?: {
+            initialPath?: string;
+            renderRootRoute?: (Story: Parameters<Decorator>[0]) => React.ReactNode;
+            routes: RouteConfig[];
+        };
+        enableTanstackRouterDevTools?: boolean;
+    };
+}
+export declare const TanstackRouterDecorator: Decorator;
+export {};

package/dist/esm/integrations/tanstack-router.js

@@ -0,0 +1,42 @@
+import { BreadcrumbLink as t } from "./tanstack-router/components/breadcrumbs/BreadcrumbLink.js";
+import { FormContextualLink as m } from "./tanstack-router/components/form-contextual-link/FormContextualLink.js";
+import { Link as a } from "./tanstack-router/components/link/Link.js";
+import { LinkButton as p } from "./tanstack-router/components/link-button/LinkButton.js";
+import { ListView as n } from "./tanstack-router/components/list-view/ListView.js";
+import { ListViewItem as s } from "./tanstack-router/components/list-view/parts/ListViewItem.js";
+import { MenuItem as L } from "./tanstack-router/components/menu-item/MenuItem.js";
+import { NavigationCard as T } from "./tanstack-router/components/navigation-card/NavigationCard.js";
+import { NavItem as d } from "./tanstack-router/components/nav-item/NavItem.js";
+import { PaginationLink as B } from "./tanstack-router/components/pagination/PaginationLink.js";
+import { PaginationNext as v } from "./tanstack-router/components/pagination/PaginationNext.js";
+import { PaginationPrevious as N } from "./tanstack-router/components/pagination/PaginationPrevious.js";
+import { Tab as w } from "./tanstack-router/components/tabs/parts/Tab.js";
+import { TabPanel as V } from "./tanstack-router/components/tabs/parts/TabPanel.js";
+import { Tabs as M } from "./tanstack-router/components/tabs/Tabs.js";
+import { Task as h } from "./tanstack-router/components/task-menu/Task.js";
+import { SubTask as q } from "./tanstack-router/components/task-menu/SubTask.js";
+import { Breadcrumb as z } from "../components/breadcrumbs/parts/Breadcrumb.js";
+import { Breadcrumbs as D } from "../components/breadcrumbs/Breadcrumbs.js";
+import { TabList as G } from "../components/tabs/parts/TabList.js";
+export {
+  z as Breadcrumb,
+  t as BreadcrumbLink,
+  D as Breadcrumbs,
+  m as FormContextualLink,
+  a as Link,
+  p as LinkButton,
+  n as ListView,
+  s as ListViewItem,
+  L as MenuItem,
+  d as NavItem,
+  T as NavigationCard,
+  B as PaginationLink,
+  v as PaginationNext,
+  N as PaginationPrevious,
+  q as SubTask,
+  w as Tab,
+  G as TabList,
+  V as TabPanel,
+  M as Tabs,
+  h as Task
+};

package/dist/esm/mocks/employees.d.ts

@@ -0,0 +1,13 @@
+export type Employee = {
+    id: string;
+    name: string;
+    position: string;
+    avatarUrl: string;
+    team: string;
+    workingAgreement: 'Full-time' | 'Part-time' | 'Freelance' | 'Contractor';
+    startWorkingDate: string;
+    endWorkingDate: string;
+    status: 'active' | 'onboarding' | 'offboarding' | 'inactive' | 'retired';
+    manager: Pick<Employee, 'name' | 'position' | 'team'> | null;
+};
+export declare const mockEmployees: Employee[];

package/dist/esm/providers/router/RouterProvider.d.ts

@@ -0,0 +1,42 @@
+import { ComponentProps, PropsWithChildren } from 'react';
+import { RouterProvider as AriaRouterProvider } from 'react-aria-components';
+export interface ExtendedRouterContextValue {
+    /**
+     * Function to determine if a route is active
+     */
+    isActive: (to: string, isExact?: boolean) => boolean;
+}
+/**
+ * Hook to access the extended ARIA router context. For internal use in Unity only.
+ */
+export declare const useRouter: () => ExtendedRouterContextValue | null;
+type AriaRouterProviderProps = ComponentProps<typeof AriaRouterProvider>;
+export interface RouterProviderProps extends ComponentProps<typeof AriaRouterProvider> {
+    /**
+     * function received from a client-side routing library to perform a client-side navigation programmatically
+     */
+    navigate: AriaRouterProviderProps['navigate'];
+    /**
+     * Optional function to convert a router-specific href to a native HTML href, e.g. prepending a base path
+     */
+    useHref?: AriaRouterProviderProps['useHref'];
+    /**
+     * Function to determine if a route is active
+     */
+    isActive: (to: string) => boolean;
+}
+/**
+ * The `RouterProvider` component is a provider that allows for integrations between Unity components that render links (such as `RawLink`, `RawNavItem`, etc.) and any client-side routing library in a single or multi-page application.
+ *
+ * By default, links perform native browser navigation when they are interacted with. However, many apps and frameworks use client side routers to avoid a full page reload when navigating between pages. The `RouterProvider` component configures all Unity components that support it to navigate using the client side router you provide. Set this up once in the root of your app, and any component with the href prop will automatically navigate using your router.
+ */
+export declare function RouterProvider({ isActive, children, ...routerProps }: RouterProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RouterProvider {
+    var displayName: string;
+}
+/**
+ * The `NoopRouterProvider` should only be use when transitioning between routers to bail out of the previous provider
+ * that is rendered upper in the react tree.
+ */
+export declare function NoopRouterProvider({ children }: PropsWithChildren): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/providers/router/RouterProvider.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import { useContext as n, createContext as i } from "react";
+import { RouterProvider as d } from "react-aria-components";
+const o = i(
+  null
+), a = () => n(o);
+function v({
+  isActive: r,
+  children: u,
+  ...t
+}) {
+  return /* @__PURE__ */ e(o.Provider, { value: { isActive: r, ...t }, children: /* @__PURE__ */ e(d, { ...t, children: u }) });
+}
+function c({ children: r }) {
+  return /* @__PURE__ */ e(o.Provider, { value: null, children: r });
+}
+v.displayName = "RouterProvider";
+export {
+  c as NoopRouterProvider,
+  v as RouterProvider,
+  a as useRouter
+};

package/dist/esm/storybook-testing.js

@@ -0,0 +1,14 @@
+import { getTestingUtilsDatePicker as i } from "./components/date-picker-field/test-utils.js";
+import { getTestingUtilsDateRangePicker as o } from "./components/date-range-picker-field/test-utils.js";
+import { getTestingUtilsMultiSelect as s } from "./components/multi-select-field/test-utils.js";
+import { getTestingUtilsSelect as n } from "./components/select-field/test-utils.js";
+import { getTestingUtilsToast as f } from "./components/toast/test-utils.js";
+import { getTestingUtilsDialog as p } from "./components/dialog/test-utils.js";
+export {
+  i as getTestingUtilsDatePicker,
+  o as getTestingUtilsDateRangePicker,
+  p as getTestingUtilsDialog,
+  s as getTestingUtilsMultiSelect,
+  n as getTestingUtilsSelect,
+  f as getTestingUtilsToast
+};

package/dist/esm/storybook-utilities/breadcrumbs/transform.d.ts

@@ -0,0 +1,2 @@
+export declare const transformDynamic: (code: string) => string;
+export declare const transformStatic: (code: string) => string;

package/dist/esm/storybook-utilities/previewTransform.d.ts

@@ -0,0 +1,2 @@
+export declare const previewTransform: (code: string) => Promise<string>;
+export declare const extractRenderProperty: (code: string) => string;

package/dist/esm/types/DataAttributes.d.ts

@@ -0,0 +1 @@
+export type DataAttributes = Record<`data-${string}`, unknown>;

package/dist/esm/types/schema.d.ts

@@ -0,0 +1,8 @@
+export interface StandardSchemaField {
+    isOptional: boolean;
+    type: string;
+    shape?: Record<string, StandardSchemaField>;
+}
+export interface StandardSchema {
+    getField(path: string): StandardSchemaField | null;
+}

package/dist/esm/types/testing.d.ts

@@ -0,0 +1,2 @@
+import { StoryContext } from '@storybook/react-vite';
+export type PlayCtx = StoryContext<any>;

package/dist/esm/types/utils.d.ts

@@ -0,0 +1 @@
+export type IconName<T extends string> = T extends `${infer Base}${'Filled' | 'Outlined'}` ? Base : T;

package/dist/esm/utils/createSchemaAdapter.d.ts

@@ -0,0 +1,7 @@
+import { StandardSchema } from '../types/schema.js';
+/**
+ * Creates the appropriate schema adapter based on the schema type
+ * @param schema - The schema object (Zod, Standard Schema, or null)
+ * @returns The appropriate schema adapter or null
+ */
+export declare function createSchemaAdapter(schema: any): StandardSchema | null;

package/dist/esm/utils/createSchemaAdapter.js

@@ -0,0 +1,13 @@
+import { StandardSchemaAdapter as n } from "../adapters/standardSchemaAdapter.js";
+import { ZodV4SchemaAdapter as f, ZodV3SchemaAdapter as e } from "../adapters/zodAdapter.js";
+function i(r) {
+  if (!r) return null;
+  if (r._def && typeof r._def == "object") {
+    const t = "def" in r;
+    return t ? new f(r) : t ? new e(r) : new e(r);
+  }
+  return r["~validate"] && typeof r["~validate"] == "function" ? new n(r) : null;
+}
+export {
+  i as createSchemaAdapter
+};

package/dist/esm/utils/field-revalidate-logic.d.ts

@@ -0,0 +1,55 @@
+import { ValidationLogicFn } from '@tanstack/form-core';
+type ValidationEvent = 'blur' | 'change' | 'submit';
+export interface FieldRevalidateLogicProps {
+    /** Event to trigger onDynamic when observed fields have not been blurred yet (default: 'blur') */
+    whenPristine?: ValidationEvent;
+    /** Event to trigger onDynamic after the first blur (default: 'change') */
+    whenDirty?: ValidationEvent;
+    /** Fields observed by this validation logic */
+    fields: string[];
+}
+/**
+ * A `ValidationLogicFn` that controls when `onDynamic` / `onDynamicAsync`
+ * validators fire based on per-field blur state.
+ *
+ * Before the first blur → `onDynamic` fires on `whenPristine` (default: `'blur'`).
+ * After the first blur  → `onDynamic` fires on `whenDirty`    (default: `'change'`).
+ *
+ * **Important**: Fields listed in `fields` **must** use `onDynamic` (or
+ * `onDynamicAsync`) as their sole validation mechanism and be **excluded**
+ * from form-level validation schemas (e.g. `onBlur`, `onChange`).
+ * Mixing `onDynamic` with other validators on the same field leads to
+ * stale errors because standard validators are not re-run outside their
+ * original event.
+ *
+ * Validators without `onDynamic` (e.g. other fields validated via
+ * form-level `onBlur` schemas) are delegated to `defaultValidationLogic`.
+ * @example
+ * ```tsx
+ * const form = useTanstackUnityForm({
+ *   defaultValues: { password: '', email: '' },
+ *   validationLogic: fieldRevalidateLogic({
+ *     whenPristine: 'blur',
+ *     whenDirty: 'change',
+ *     fields: ['password'],
+ *   }),
+ *   // Form-level schema validates non-dynamic fields only.
+ *   // The password field is excluded — it uses onDynamic instead.
+ *   validators: { onBlur: z.object({ email: z.string().email() }) },
+ * })
+ *
+ * <form.AppField
+ *   name="password"
+ *   validators={{
+ *     onDynamic: ({ value }) => {
+ *       const result = passwordSchema.safeParse(value)
+ *       return result.success ? undefined : result.error.issues[0].message
+ *     },
+ *   }}
+ * >
+ *   {field => <field.PasswordField label="Password" />}
+ * </form.AppField>
+ * ```
+ */
+export declare const fieldRevalidateLogic: (config: FieldRevalidateLogicProps) => ValidationLogicFn;
+export {};

package/dist/esm/utils/field-revalidate-logic.js

@@ -0,0 +1,39 @@
+import { defaultValidationLogic as l } from "@tanstack/form-core";
+const v = {
+  change: ["change", "blur", "submit"],
+  blur: ["blur", "submit"],
+  submit: ["submit"]
+}, b = (n) => {
+  const { whenPristine: s = "blur", whenDirty: d = "change" } = n;
+  let r = !1;
+  return (a) => {
+    if (Object.keys(a.validators ?? {}).length === 0)
+      return a.runValidation({ validators: [], form: a.form });
+    const e = a.event.async ? a.validators?.onDynamicAsync : a.validators?.onDynamic;
+    if (!e)
+      return l(a);
+    a.event.type === "blur" && (r = !0);
+    const o = {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment -- TanStack FormValidators properties are typed as `any`
+      fn: e,
+      cause: "dynamic"
+    }, u = r ? d : s, t = [];
+    v[u].includes(a.event.type) && t.push(o);
+    let i = [];
+    return l({
+      ...a,
+      runValidation: (m) => {
+        i = m.validators;
+      }
+    }), t.length === 0 ? a.runValidation({
+      validators: i,
+      form: a.form
+    }) : a.runValidation({
+      validators: [...i, ...t],
+      form: a.form
+    });
+  };
+};
+export {
+  b as fieldRevalidateLogic
+};

package/dist/esm/utils/platform.d.ts

@@ -0,0 +1,3 @@
+export declare function isTestEnvironment(): boolean;
+export declare function isProduction(): boolean;
+export declare function isBrowser(): boolean;

package/dist/esm/utils/platform.js

@@ -0,0 +1,6 @@
+function e() {
+  return typeof window < "u";
+}
+export {
+  e as isBrowser
+};

package/dist/esm/utils/scroll-detection.d.ts

@@ -0,0 +1,77 @@
+/**
+ * Strategy for detecting scrollable content
+ */
+export type ScrollDetectionStrategy = 'size' | 'style' | 'both';
+/**
+ * Detailed detection results for both size and style methods
+ */
+export interface DetectionMethod {
+    size: {
+        vertical: boolean;
+        horizontal: boolean;
+    };
+    style: {
+        vertical: boolean;
+        horizontal: boolean;
+    };
+}
+/**
+ * Result of scroll detection
+ */
+export interface ScrollDetectionResult {
+    hasVerticalScroll: boolean;
+    hasHorizontalScroll: boolean;
+    hasAnyScroll: boolean;
+    detectionMethod: DetectionMethod;
+}
+/**
+ * Detects if an element has scrollable content using the specified strategy.
+ * This is a pure function with no side effects, making it easy to test
+ * and reuse in different contexts (React hooks, vanilla JS, etc.)
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {ScrollDetectionResult} Detailed scroll detection result
+ * @example
+ * ```ts
+ * const element = document.getElementById('container');
+ * const result = detectScroll(element, 'size');
+ * if (result.hasVerticalScroll) {
+ *   console.log('Element has vertical scroll');
+ * }
+ * ```
+ * @example
+ * ```ts
+ * // Check both strategies for debugging
+ * const result = detectScroll(element, 'both');
+ * console.log('Size detection:', result.detectionMethod.size);
+ * console.log('Style detection:', result.detectionMethod.style);
+ * ```
+ */
+export declare function detectScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): ScrollDetectionResult;
+/**
+ * Simplified helper to check if element has any scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has any scrollable content
+ * @example
+ * ```ts
+ * if (hasScroll(document.getElementById('container'))) {
+ *   console.log('Has scroll');
+ * }
+ * ```
+ */
+export declare function hasScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;
+/**
+ * Check if element has vertical scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has vertical scrollable content
+ */
+export declare function hasVerticalScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;
+/**
+ * Check if element has horizontal scrollable content
+ * @param {HTMLElement} element - DOM element to check
+ * @param {ScrollDetectionStrategy} strategy - Detection strategy to use
+ * @returns {boolean} True if element has horizontal scrollable content
+ */
+export declare function hasHorizontalScroll(element: HTMLElement, strategy?: ScrollDetectionStrategy): boolean;

package/dist/esm/utils/scroll-detection.js

@@ -0,0 +1,33 @@
+function S(o, z = "size") {
+  const r = o.scrollHeight > o.clientHeight, e = o.scrollWidth > o.clientWidth, s = window.getComputedStyle(o), h = s.overflowY, n = s.overflowX, c = s.overflow, a = h === "scroll" || h === "auto" || c === "scroll" || c === "auto", i = n === "scroll" || n === "auto" || c === "scroll" || c === "auto";
+  let t, l;
+  switch (z) {
+    case "size":
+      t = r, l = e;
+      break;
+    case "style":
+      t = a, l = i;
+      break;
+    case "both":
+      t = r && a, l = e && i;
+      break;
+  }
+  return {
+    hasVerticalScroll: t,
+    hasHorizontalScroll: l,
+    hasAnyScroll: t || l,
+    detectionMethod: {
+      size: {
+        vertical: r,
+        horizontal: e
+      },
+      style: {
+        vertical: a,
+        horizontal: i
+      }
+    }
+  };
+}
+export {
+  S as detectScroll
+};