@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/tabs/parts/TabList.js

@@ -1,83 +0,0 @@
-import { jsxs as A, jsx as c } from "react/jsx-runtime";
-import { forwardRef as C, useRef as B, useState as d, useCallback as j } from "react";
-import { TabList as L } from "react-aria-components/Tabs";
-import { useResizeObserver as q } from "usehooks-ts";
-import { useTabsContext as w } from "../Tabs.context.js";
-import { tabsVariant as z } from "../Tabs.variant.js";
-import { NavigationButton as g } from "./NavigationButton.js";
-const P = C(
-  ({ children: i }, f) => {
-    const t = B(null), [p, S] = d(!1), [R, v] = d(!1), { variant: y, scrollable: u } = w(), { tabList: b, scroller: W } = z({ variant: y, scrollable: u }), m = j(() => {
-      if (!t.current) return;
-      const { scrollLeft: r, scrollWidth: s, clientWidth: e } = t.current;
-      S(r > 0), v(r + e < s);
-    }, []);
-    q({
-      ref: t,
-      onResize: m
-    });
-    const N = (r) => {
-      m();
-    }, T = () => {
-      const r = t.current?.querySelectorAll("[role=tab]");
-      if (!t.current || !r) return 0;
-      const { scrollLeft: s } = t.current, e = Array.from(r);
-      for (let o = e.length - 1; o >= 0; o--) {
-        const l = e[o];
-        if (l.offsetLeft < s)
-          return -l.offsetWidth;
-      }
-      return 0;
-    }, x = () => {
-      const r = t.current?.querySelectorAll("[role=tab]");
-      if (!t.current || !r) return 0;
-      const { scrollLeft: s, clientWidth: e } = t.current, o = Array.from(r), l = s + e;
-      for (let n = 0; n < o.length - 1; n++) {
-        const a = o[n], h = a.offsetLeft + a.offsetWidth;
-        if (h > l || h < l)
-          return a.offsetWidth;
-      }
-      return 0;
-    };
-    return u ? /* @__PURE__ */ A("div", { className: "uy:relative", children: [
-      p && /* @__PURE__ */ c(
-        g,
-        {
-          direction: "left",
-          onPress: () => {
-            t.current?.scrollBy({
-              behavior: "smooth",
-              left: T()
-            });
-          }
-        }
-      ),
-      /* @__PURE__ */ c(
-        "div",
-        {
-          ref: t,
-          "data-testid": "scrollable-tab-list",
-          className: W(),
-          onScroll: N,
-          children: /* @__PURE__ */ c(L, { ref: f, className: b(), children: i })
-        }
-      ),
-      R && /* @__PURE__ */ c(
-        g,
-        {
-          direction: "right",
-          onPress: () => {
-            t.current?.scrollBy({
-              behavior: "smooth",
-              left: x()
-            });
-          }
-        }
-      )
-    ] }) : /* @__PURE__ */ c(L, { ref: f, className: b(), children: i });
-  }
-);
-P.displayName = "TabList";
-export {
-  P as TabList
-};

package/dist/esm/components/tabs/parts/TabPanel.d.ts

@@ -1,6 +0,0 @@
-import { TabPanelProps as AriaTabPanelProps, Key } from 'react-aria-components/Tabs';
-export interface TabPanelProps extends Omit<AriaTabPanelProps, 'classname' | 'style' | 'id'> {
-    id: Key | undefined;
-}
-declare const TabPanel: import('react').ForwardRefExoticComponent<TabPanelProps & import('react').RefAttributes<HTMLDivElement>>;
-export { TabPanel };

package/dist/esm/components/tabs/parts/TabPanel.js

@@ -1,10 +0,0 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as t } from "react";
-import { TabPanel as n } from "react-aria-components/Tabs";
-const p = t(
-  ({ children: a, id: r, ...o }, e) => /* @__PURE__ */ m(n, { "data-dd-privacy": "mask", id: r, ref: e, ...o, children: a })
-);
-p.displayName = "TabPanel";
-export {
-  p as TabPanel
-};

package/dist/esm/components/task-menu/TaskMenu.context.d.ts

@@ -1,24 +0,0 @@
-import { PropsWithChildren, RefObject } from 'react';
-import { OverlayTriggerAria } from 'react-aria/useOverlayTrigger';
-import { OverlayTriggerState } from 'react-stately/useOverlayTriggerState';
-export interface CurrentTask {
-    uniqueId: string;
-    label: string;
-}
-type TaskMenuContextValue = {
-    currentTask: CurrentTask | null | undefined;
-    setCurrentTask: ((currentTask: CurrentTask) => void) | undefined;
-    toggleTaskGroup: ((open: string) => void) | undefined;
-    expandedTaskGroup: string | null | undefined;
-    taskMenuId: string;
-    taskMenuContentId: string;
-    state: OverlayTriggerState | null;
-    triggerRef: RefObject<Element | null>;
-    overlayRef: RefObject<Element | null>;
-    triggerProps: OverlayTriggerAria['triggerProps'];
-    overlayProps: OverlayTriggerAria['overlayProps'];
-};
-export declare const TaskMenuContext: import('react').Context<TaskMenuContextValue>;
-export declare function TaskMenuProvider({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
-export declare function useTaskMenuContext(): TaskMenuContextValue;
-export {};

package/dist/esm/components/task-menu/TaskMenu.context.js

@@ -1,61 +0,0 @@
-import { jsx as x } from "react/jsx-runtime";
-import { useState as r, useRef as i, createContext as C, useContext as M } from "react";
-import { useId as G } from "react-aria/useId";
-import { useOverlayTrigger as P } from "react-aria/useOverlayTrigger";
-import { useOverlayTriggerState as I } from "react-stately/useOverlayTriggerState";
-const c = C({
-  currentTask: void 0,
-  setCurrentTask: void 0,
-  toggleTaskGroup: void 0,
-  expandedTaskGroup: void 0,
-  taskMenuId: "",
-  taskMenuContentId: "",
-  state: null,
-  triggerRef: { current: null },
-  overlayRef: { current: null },
-  triggerProps: {},
-  overlayProps: {}
-});
-function O({ children: e }) {
-  const n = G(), [k, d] = r(null), [o, s] = r(
-    null
-  ), [p, u] = r(null), a = I({}), l = i(null), T = i(null), { triggerProps: v, overlayProps: f } = P(
-    { type: "dialog" },
-    a,
-    l
-  ), g = `task-menu-${n}`, m = (t) => {
-    t === p ? (u(null), s(null)) : (u(t), s(o === t ? null : t));
-  };
-  return /* @__PURE__ */ x(
-    c.Provider,
-    {
-      value: {
-        currentTask: k,
-        setCurrentTask: d,
-        toggleTaskGroup: m,
-        expandedTaskGroup: o,
-        taskMenuId: n,
-        taskMenuContentId: g,
-        state: a,
-        triggerRef: l,
-        overlayRef: T,
-        triggerProps: v,
-        overlayProps: f
-      },
-      children: e
-    }
-  );
-}
-function S() {
-  const e = M(c);
-  if (!e)
-    throw new Error(
-      "useTaskMenuContext must be used within an TaskMenuProvider"
-    );
-  return e;
-}
-export {
-  c as TaskMenuContext,
-  O as TaskMenuProvider,
-  S as useTaskMenuContext
-};

package/dist/esm/components/task-menu/TaskMenu.d.ts

@@ -1,80 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { PropsWithChildren } from 'react';
-export declare const taskMenu: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-}, undefined, unknown, unknown, undefined>>;
-export interface TaskMenuProps extends PropsWithChildren<VariantProps<typeof taskMenu>> {
-    /**
-     * The label for the task menu. This is used for accessibility purposes.
-     */
-    label: string;
-}
-/**
- * The `TaskMenu` component provides a navigation menu for tasks and task groups with expandable functionality.
- * @example
- * ```tsx
- * import { TaskMenu, Task, TaskGroup, SubTask } from '@payfit/unity-components'
- *
- * <TaskMenu>
- *  <RawTask
- *    uniqueId="task1"
- *    label="Complete Profile"
- *    taskNumber={1}
- *    taskStatus="completed"
- *    href="/profile"
- *   />
- *  <RawTask
- *    uniqueId="task2"
- *    label="Upload Documents"
- *    taskNumber={2}
- *    taskStatus="uncompleted"
- *    href="/documents"
- *  />
- *  <TaskGroup
- *    uniqueId="onboarding"
- *    label="Onboarding Steps"
- *    taskNumber={3}
- *    taskStatus="uncompleted"
- *  >
- *    <RawSubTask
- *      uniqueId="step1"
- *      label="Welcome Video"
- *      href="/onboarding/welcome"
- *      taskStatus="completed"
- *    />
- *    <RawSubTask
- *      uniqueId="step2"
- *      label="Company Policies"
- *      href="/onboarding/policies"
- *      taskStatus="uncompleted"
- *    />
- *  </TaskGroup>
- *     </TaskMenu>
- * ```
- * @see {@link TaskMenuProps} for all available props
- * @remarks [API Docs]{https://unity-components.payfit.io/?path=/story/navigation-taskmenu--docs}
- */
-declare const TaskMenu: import('react').ForwardRefExoticComponent<TaskMenuProps & import('react').RefAttributes<HTMLDivElement>>;
-export { TaskMenu };

package/dist/esm/components/task-menu/TaskMenu.js

@@ -1,28 +0,0 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { useBreakpointListener as l } from "../../hooks/use-breakpoint-listener.js";
-import { Content as y } from "./parts/Content.js";
-import { Header as f } from "./parts/Header.js";
-import { TaskMenuProvider as p } from "./TaskMenu.context.js";
-const c = d({
-  slots: {
-    base: [
-      "uy:relative uy:flex uy:flex-col uy:shadow-raising uy:bg-surface-neutral",
-      "uy:md:border uy:md:border-solid uy:md:border-border-neutral uy:md:rounded-300 uy:md:p-300"
-    ]
-  }
-}), b = u(
-  ({ children: o, label: s, ...t }, a) => {
-    const { base: n } = c(), e = l(), i = e === "xs" || e === "sm";
-    return /* @__PURE__ */ r("nav", { ...t, className: n(), ref: a, "aria-label": s, children: /* @__PURE__ */ m(p, { children: [
-      i && /* @__PURE__ */ r(f, {}),
-      /* @__PURE__ */ r(y, { children: o })
-    ] }) });
-  }
-);
-b.displayName = "TaskMenu";
-export {
-  b as TaskMenu,
-  c as taskMenu
-};

package/dist/esm/components/task-menu/parts/Content.d.ts

@@ -1,9 +0,0 @@
-import { ReactNode } from 'react';
-interface ContentProps {
-    children: ReactNode;
-}
-declare const Content: {
-    ({ children }: ContentProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Content };

package/dist/esm/components/task-menu/parts/Content.js

@@ -1,49 +0,0 @@
-import { jsx as t } from "react/jsx-runtime";
-import { uyTv as y } from "@payfit/unity-themes";
-import { FocusScope as p } from "react-aria/FocusScope";
-import { mergeProps as f } from "react-aria/mergeProps";
-import { useOverlay as b } from "react-aria/useOverlay";
-import { useBreakpointListener as u } from "../../../hooks/use-breakpoint-listener.js";
-import { useTaskMenuContext as r } from "../TaskMenu.context.js";
-const v = y({
-  base: [
-    "uy:flex uy:flex-col uy:mt-100",
-    "uy:flex uy:md:flex-col uy:md:gap-200 uy:md:list-none uy:md:mt-0",
-    "uy:focus-visible:outline-2 uy:focus-visible:outline uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
-  ]
-}), l = ({ children: e }) => {
-  const {
-    taskMenuContentId: o,
-    state: s,
-    overlayProps: a,
-    overlayRef: n
-  } = r(), i = u(), m = i === "xs" || i === "sm", { overlayProps: c } = b(
-    {
-      onClose: () => s?.close(),
-      isOpen: s?.isOpen,
-      isDismissable: !1
-    },
-    n
-  );
-  return /* @__PURE__ */ t(
-    "ol",
-    {
-      ...f(c, a),
-      ref: n,
-      className: v(),
-      id: o,
-      ...m && { "data-mobile-open": s?.isOpen },
-      children: e
-    }
-  );
-}, d = ({ children: e }) => {
-  const { state: o } = r();
-  return !!o?.isOpen && /* @__PURE__ */ t("div", { className: "uy:absolute uy:z-9 uy:top-full uy:inset-x-0 uy:h-[100dvh] uy:bg-surface-neutral", children: /* @__PURE__ */ t(p, { contain: !0, restoreFocus: !0, autoFocus: !0, children: /* @__PURE__ */ t(l, { children: e }) }) });
-}, x = ({ children: e }) => {
-  const o = u();
-  return o === "xs" || o === "sm" ? /* @__PURE__ */ t(d, { children: e }) : /* @__PURE__ */ t(l, { children: e });
-};
-x.displayName = "TaskMenuContent";
-export {
-  x as Content
-};

package/dist/esm/components/task-menu/parts/Header.d.ts

@@ -1,5 +0,0 @@
-declare const Header: {
-    (): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { Header };

package/dist/esm/components/task-menu/parts/Header.js

@@ -1,55 +0,0 @@
-import { jsxs as d, jsx as s } from "react/jsx-runtime";
-import { uyTv as m } from "@payfit/unity-themes";
-import { useIntl as c } from "react-intl";
-import { IconButton as p } from "../../icon-button/IconButton.js";
-import { Text as f } from "../../text/Text.js";
-import { useTaskMenuContext as y } from "../TaskMenu.context.js";
-const h = m({
-  slots: {
-    header: ["uy:flex uy:px-300 uy:py-200 uy:gap-200 uy:shadow-raising"],
-    headerSelectedTask: ["uy:flex-1 uy:basis-full uy:self-center"]
-  }
-}), g = () => {
-  const {
-    currentTask: t,
-    taskMenuId: a,
-    taskMenuContentId: n,
-    state: e,
-    triggerProps: r,
-    triggerRef: o
-  } = y(), i = c(), { header: l, headerSelectedTask: u } = h();
-  return /* @__PURE__ */ d("div", { className: l(), children: [
-    /* @__PURE__ */ s(
-      f,
-      {
-        asElement: "span",
-        className: u(),
-        "aria-describedby": a,
-        children: t?.label
-      }
-    ),
-    /* @__PURE__ */ s(
-      p,
-      {
-        ...r,
-        ref: o,
-        variant: "ghost",
-        color: "neutral",
-        icon: e?.isOpen ? "CloseOutlined" : "ListOutlined",
-        label: i.formatMessage({
-          id: e?.isOpen ? "unity:component:task-menu:header:menu-close" : "unity:component:task-menu:header:menu-open",
-          defaultMessage: e?.isOpen ? "Close task menu" : "Open task menu"
-        }),
-        onClick: () => {
-          e?.toggle();
-        },
-        "aria-expanded": !!e?.isOpen,
-        "aria-controls": n
-      }
-    )
-  ] });
-};
-g.displayName = "Header";
-export {
-  g as Header
-};

package/dist/esm/components/task-menu/parts/RawSubTask.d.ts

@@ -1,128 +0,0 @@
-import { TaskProps } from './RawTask.js';
-export declare const rawSubTask: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            number?: import('tailwind-merge').ClassNameValue;
-            text?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            dot?: import('tailwind-merge').ClassNameValue;
-            element?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    taskStatus: {
-        uncompleted: import('tailwind-merge').ClassNameValue | {
-            number?: import('tailwind-merge').ClassNameValue;
-            text?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            dot?: import('tailwind-merge').ClassNameValue;
-            element?: import('tailwind-merge').ClassNameValue;
-        };
-        completed: import('tailwind-merge').ClassNameValue | {
-            number?: import('tailwind-merge').ClassNameValue;
-            text?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            dot?: import('tailwind-merge').ClassNameValue;
-            element?: import('tailwind-merge').ClassNameValue;
-        };
-        locked: import('tailwind-merge').ClassNameValue | {
-            number?: import('tailwind-merge').ClassNameValue;
-            text?: import('tailwind-merge').ClassNameValue;
-            base?: import('tailwind-merge').ClassNameValue;
-            dot?: import('tailwind-merge').ClassNameValue;
-            element?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-}, {
-    base: string[];
-    dot: string[];
-    text: string[];
-    element: string[];
-    number: string[];
-}, undefined, {
-    taskStatus: {
-        uncompleted: string;
-        completed: string;
-        locked: string;
-    };
-}, {
-    base: string[];
-    number: string[];
-    element: string[];
-    text: string[];
-    lock: string[];
-}, import('tailwind-variants').TVReturnType<{
-    taskStatus: {
-        uncompleted: string;
-        completed: string;
-        locked: string;
-    };
-}, {
-    base: string[];
-    number: string[];
-    element: string[];
-    text: string[];
-    lock: string[];
-}, undefined, {
-    taskStatus: {
-        uncompleted: string;
-        completed: string;
-        locked: string;
-    };
-}, {
-    base: string[];
-    number: string[];
-    element: string[];
-    text: string[];
-    lock: string[];
-}, import('tailwind-variants').TVReturnType<{
-    taskStatus: {
-        uncompleted: string;
-        completed: string;
-        locked: string;
-    };
-}, {
-    base: string[];
-    number: string[];
-    element: string[];
-    text: string[];
-    lock: string[];
-}, undefined, unknown, unknown, undefined>>>;
-export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
-    /** internal prop to disable the button, do not use this prop */
-    isDisabled?: boolean;
-}
-/**
- * The `SubTask` component represents an individual subtask item within a TaskGroup that can be either a link or button.
- * It supports various visual states including completed, uncompleted, locked.
- * The component adapts its behavior based on whether an href is provided and displays
- * a dot indicator instead of a numbered badge to distinguish it from main Task components.
- *
- * ```tsx
- * // Link-based subtask for navigation within a task group
- * <RawSubTask
- *   uniqueId="profile-setup"
- *   label="Complete Profile Information"
- *   taskStatus="uncompleted"
- *   href="/onboarding/profile"
- * />
- *
- * // Button-based subtask for custom interactions
- * <RawSubTask
- *   uniqueId="validate-email"
- *   label="Validate Email Address"
- *   taskStatus="completed"
- *   onPress={() => handleEmailValidation()}
- * />
- *
- * // Locked subtask that cannot be interacted with
- * <RawSubTask
- *   uniqueId="final-approval"
- *   label="Manager Approval"
- *   taskStatus="locked"
- * />
- * ```
- * @see {@link SubTaskProps} for all available props
- */
-declare const RawSubTask: import('react').ForwardRefExoticComponent<SubTaskProps & import('react').RefAttributes<HTMLLIElement>>;
-export { RawSubTask };