@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/data-table/parts/DataTableBulkActions.d.ts

@@ -0,0 +1,55 @@
+import { Table as TableType } from '@tanstack/react-table';
+import { ActionBarProps } from '../../action-bar/ActionBar.js';
+export interface DataTableBulkActionsProps<TData> {
+    /** The table instance from @tanstack/react-table */
+    table: TableType<TData>;
+    /** Bulk actions to perform over the table, rendered in the action bar */
+    actions: ActionBarProps['actions'];
+}
+/**
+ * The DataTableBulkActions component provides contextual bulk actions when table rows are selected.
+ * It automatically shows/hides based on row selection and provides keyboard accessibility via Alt+A (Option+A on Mac).
+ * @param {DataTableBulkActionsProps} props - The props for the DataTableBulkActions component
+ * @param props.table - The table instance from `@tanstack/react-table`
+ * @param props.actions - Bulk actions to perform over the table, rendered in the action bar
+ * @example
+ * ```tsx
+ * import { DataTableRoot, DataTable, DataTableBulkActions } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const actions = [
+ *     { id: 'delete', label: 'Delete', onPress: handleDelete },
+ *     { id: 'archive', label: 'Archive', onPress: handleArchive },
+ *   ]
+ *
+ *   return (
+ *     <DataTableRoot>
+ *       <DataTable table={table}>
+ *         {row => (
+ *           <TableRow key={row.id} isSelected={row.getIsSelected()}>
+ *             {row.getVisibleCells().map(cell => (
+ *               <TableCell key={cell.id}>
+ *                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *               </TableCell>
+ *             ))}
+ *           </TableRow>
+ *         )}
+ *       </DataTable>
+ *       <DataTableBulkActions table={table} actions={actions} />
+ *     </DataTableRoot>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Use F6 keyboard shortcut to focus the action bar when it's visible and has actions
+ * - The keyboard shortcut provides quick access to bulk actions for users with disabilities
+ * - When triggered, focus moves to the first focusable element in the action bar (typically the first action button)
+ * - The shortcut only works when rows are selected and the action bar is visible
+ * @see {@link DataTableBulkActionsProps} for all available props
+ * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/data-table)
+ */
+declare function DataTableBulkActions<TData extends object>({ table, actions, }: DataTableBulkActionsProps<TData>): import("react/jsx-runtime").JSX.Element | null;
+declare namespace DataTableBulkActions {
+    var displayName: string;
+}
+export { DataTableBulkActions };

package/dist/esm/components/data-table/parts/DataTableBulkActions.js

@@ -0,0 +1,65 @@
+import { jsx as c } from "react/jsx-runtime";
+import { useRef as i, useState as A, useCallback as R } from "react";
+import { useHotkeys as u } from "react-hotkeys-hook";
+import { ActionBar as p } from "../../action-bar/ActionBar.js";
+import { ActionBarAction as w } from "../../action-bar/parts/ActionBarAction.js";
+import { ActionBarRoot as B } from "../../action-bar/parts/ActionBarRoot.js";
+function k({
+  table: e,
+  actions: n
+}) {
+  const s = i(null), r = i(null), [a, t] = A(!1), f = e.getState().rowSelection;
+  Object.keys(f).sort().join(","), u(
+    "f6",
+    () => {
+      if ((e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected()) && n && s.current) {
+        const l = s.current.querySelectorAll(
+          'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+        );
+        r.current = document.activeElement, l.length > 0 && (l[0].focus(), t(!0));
+      }
+    },
+    {
+      enableOnFormTags: !0
+    }
+  ), u(
+    "esc",
+    () => {
+      a && r.current && (r.current.focus(), t(!1));
+    },
+    {
+      enableOnFormTags: !0
+    }
+  );
+  const m = e.getIsAllPageRowsSelected() || e.getIsSomePageRowsSelected(), d = e.getSelectedRowModel().rows.length, g = e.getPageCount() > 1, S = R(() => {
+    e.resetRowSelection();
+  }, [e]);
+  return n ? /* @__PURE__ */ c(
+    B,
+    {
+      isVisible: m,
+      offsetBottom: g ? "$600" : 0,
+      children: /* @__PURE__ */ c(
+        p,
+        {
+          ref: s,
+          actions: n,
+          selectionCount: d,
+          onClearSelection: S,
+          onFocus: () => {
+            t(!0);
+          },
+          onBlur: () => {
+            t(!1);
+          },
+          "aria-keyshortcuts": "f6",
+          children: (o) => /* @__PURE__ */ c(w, { ...o, children: o.label }, o.id)
+        }
+      )
+    }
+  ) : null;
+}
+k.displayName = "DataTableBulkActions";
+export {
+  k as DataTableBulkActions
+};

package/dist/esm/components/data-table/parts/DataTableRoot.d.ts

@@ -0,0 +1,37 @@
+import { PropsWithChildren } from 'react';
+export declare const dataTableRoot: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
+export type DataTableRootProps = PropsWithChildren;
+/**
+ * The DataTableRoot component provides positioning and layout context for DataTable components.
+ * It serves as the container for DataTable, DataTableBulkActions, and other related components.
+ * @param {DataTableRootProps} props - The props for the DataTableRoot component
+ * @example
+ * ```tsx
+ * import { DataTableRoot, DataTable, DataTableBulkActions } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <DataTableRoot>
+ *       <DataTable table={table}>
+ *         {row => (
+ *           <TableRow key={row.id} isSelected={row.getIsSelected()}>
+ *             {row.getVisibleCells().map(cell => (
+ *               <TableCell key={cell.id}>
+ *                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
+ *               </TableCell>
+ *             ))}
+ *           </TableRow>
+ *         )}
+ *       </DataTable>
+ *       <DataTableBulkActions table={table} actions={actions} />
+ *     </DataTableRoot>
+ *   )
+ * }
+ * ```
+ * @see {@link DataTableRootProps} for all available props
+ * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/data-table)
+ */
+declare const DataTableRoot: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { DataTableRoot };

package/dist/esm/components/data-table/parts/DataTableRoot.js

@@ -0,0 +1,13 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as r } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+const i = m({
+  base: ["uy:relative uy:overflow-hidden"]
+}), l = r(
+  ({ children: o, ...a }, t) => /* @__PURE__ */ e("div", { ref: t, className: i(), ...a, children: o })
+);
+l.displayName = "DataTableRoot";
+export {
+  l as DataTableRoot,
+  i as dataTableRoot
+};

package/dist/esm/components/date-calendar/DateCalendar.js

@@ -1,13 +1,13 @@
 import { jsx as a, jsxs as r } from "react/jsx-runtime";
 import { useState as m } from "react";
-import { today as I, getLocalTimeZone as p, isToday as k } from "@internationalized/date";
-import { Calendar as B, Heading as M, CalendarGrid as O, CalendarGridHeader as T, CalendarHeaderCell as W, CalendarGridBody as P, CalendarCell as R } from "react-aria-components";
-import { tv as Z } from "tailwind-variants";
+import { today as I, getLocalTimeZone as p, isToday as T } from "@internationalized/date";
+import { uyTv as k } from "@payfit/unity-themes";
+import { Calendar as B, Heading as M, CalendarGrid as O, CalendarGridHeader as W, CalendarHeaderCell as P, CalendarGridBody as R, CalendarCell as Z } from "react-aria-components";
 import { IconButton as h } from "../icon-button/IconButton.js";
 import { useMonthsList as $ } from "./hooks/useMonthsList.js";
 import { useYearsList as q } from "./hooks/useYearsList.js";
 import { DateSegmentSelect as v } from "./parts/DateSegmentSelect.js";
-const z = Z({
+const z = k({
   slots: {
     base: "",
     calendarWrapper: "uy:flex uy:flex-col uy:gap-100",
@@ -154,12 +154,12 @@ function A({
           )
         ] }),
         /* @__PURE__ */ r(O, { className: S(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ a(T, { children: (e) => /* @__PURE__ */ a(W, { className: Y(), children: e }) }),
-          /* @__PURE__ */ a(P, { children: (e) => /* @__PURE__ */ a(
-            R,
+          /* @__PURE__ */ a(W, { children: (e) => /* @__PURE__ */ a(P, { className: Y(), children: e }) }),
+          /* @__PURE__ */ a(R, { children: (e) => /* @__PURE__ */ a(
+            Z,
             {
               date: e,
-              "data-today": k(e, p()) ? !0 : void 0,
+              "data-today": T(e, p()) ? !0 : void 0,
               className: j()
             }
           ) })

package/dist/esm/components/date-picker/DatePicker.js

@@ -1,12 +1,12 @@
 import { jsxs as c, jsx as a } from "react/jsx-runtime";
 import { forwardRef as W } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
 import { DatePicker as I, Group as P, Button as U, Popover as j, Dialog as E } from "react-aria-components";
 import { useIntl as M } from "react-intl";
-import { tv as m } from "tailwind-variants";
 import { DateCalendar as O } from "../date-calendar/DateCalendar.js";
 import { Icon as R } from "../icon/Icon.js";
 import { DateInput as G } from "./parts/DateInput.js";
-const $ = m({
+const T = m({
   slots: {
     base: [
       "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-100",
@@ -58,7 +58,7 @@ const $ = m({
       }
     }
   ]
-}), q = m({
+}), $ = m({
   base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-75",
   variants: {
     isEntering: {
@@ -68,7 +68,7 @@ const $ = m({
       true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in"
     }
   }
-}), z = W(
+}), q = W(
   ({
     value: f,
     defaultValue: n,
@@ -83,8 +83,8 @@ const $ = m({
     onOpenChange: l,
     id: v,
     ...e
-  }, A) => {
-    const g = M(), { base: x, inputWrapper: h, suffix: D } = $({
+  }, z) => {
+    const g = M(), { base: x, inputWrapper: h, suffix: D } = T({
       isInvalid: !!b,
       isReadOnly: !!u,
       isDisabled: !!t
@@ -139,7 +139,7 @@ const $ = m({
           /* @__PURE__ */ a(
             j,
             {
-              className: ({ isEntering: r, isExiting: N }) => q({ isEntering: r, isExiting: N }),
+              className: ({ isEntering: r, isExiting: N }) => $({ isEntering: r, isExiting: N }),
               children: /* @__PURE__ */ a(E, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
                 O,
                 {
@@ -158,7 +158,7 @@ const $ = m({
     );
   }
 );
-z.displayName = "DatePicker";
+q.displayName = "DatePicker";
 export {
-  z as DatePicker
+  q as DatePicker
 };

package/dist/esm/components/date-picker/parts/DateInput.js

@@ -1,8 +1,8 @@
 import { jsxs as i, jsx as e } from "react/jsx-runtime";
 import { useContext as b } from "react";
+import { uyTv as d } from "@payfit/unity-themes";
 import { DatePickerStateContext as g, DateInput as x, DateSegment as v } from "react-aria-components";
 import { useIntl as I } from "react-intl";
-import { tv as d } from "tailwind-variants";
 import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
 import { Icon as D } from "../../icon/Icon.js";
 import { Spinner as M } from "../../spinner/Spinner.js";
@@ -56,16 +56,16 @@ const N = d({
 });
 function O({
   isLoading: n,
-  isInvalid: s,
-  isReadOnly: u,
+  isInvalid: u,
+  isReadOnly: s,
   isDisabled: l,
   onClearButtonPress: a
 }) {
   const o = I(), t = b(g), { dateValue: c } = t, { base: m, input: y, state: f } = w({
-    isInvalid: !!s,
-    isReadOnly: !!u,
+    isInvalid: !!u,
+    isReadOnly: !!s,
     isDisabled: !!l
-  }), p = c && !n && !u && !l;
+  }), p = c && !n && !s && !l;
   return /* @__PURE__ */ i("div", { className: m(), children: [
     /* @__PURE__ */ e(x, { className: y(), children: (r) => /* @__PURE__ */ e(
       v,
@@ -89,7 +89,7 @@ function O({
           })
         }
       ),
-      s && /* @__PURE__ */ e(
+      u && /* @__PURE__ */ e(
         D,
         {
           src: "WarningCircleOutlined",

package/dist/esm/components/date-picker-field/DatePickerField.js

@@ -1,14 +1,14 @@
 import { jsxs as D, jsx as e } from "react/jsx-runtime";
 import { forwardRef as C } from "react";
-import { useFormContext as b } from "react-hook-form";
-import { tv as B } from "tailwind-variants";
-import { DatePicker as j } from "../date-picker/DatePicker.js";
-import { FormField as I } from "../form-field/FormField.js";
-import { FormControl as N } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.js";
+import { uyTv as b } from "@payfit/unity-themes";
+import { useFormContext as B } from "react-hook-form";
+import { DatePicker as T } from "../date-picker/DatePicker.js";
+import { FormField as j } from "../form-field/FormField.js";
+import { FormControl as I } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
 import { FormHelperText as V } from "../form-field/parts/FormHelperText.js";
 import { FormLabel as g } from "../form-field/parts/FormLabel.js";
-const v = B({
+const v = b({
   base: "uy:flex uy:flex-col uy:gap-100"
 });
 function w({
@@ -26,7 +26,7 @@ function w({
   requiredVariant: p,
   ...l
 }, u) {
-  const { control: F, resetField: k, setValue: P } = b(), h = {
+  const { control: F, resetField: k, setValue: P } = B(), h = {
     isRequired: s,
     isInvalid: a,
     isLoading: c,
@@ -40,7 +40,7 @@ function w({
     }), P(r, null, { shouldValidate: !1 });
   }, y = l.onClearButtonPress ?? x;
   return /* @__PURE__ */ D(
-    I,
+    j,
     {
       control: F,
       name: r,
@@ -49,8 +49,8 @@ function w({
       children: [
         /* @__PURE__ */ e(g, { requiredVariant: p, children: o }),
         i && /* @__PURE__ */ e(V, { children: i }),
-        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(
-          j,
+        /* @__PURE__ */ e(I, { children: /* @__PURE__ */ e(
+          T,
           {
             ref: u,
             defaultValue: t,
@@ -58,7 +58,7 @@ function w({
             ...l
           }
         ) }),
-        /* @__PURE__ */ e(T, { children: m }),
+        /* @__PURE__ */ e(N, { children: m }),
         n
       ]
     }

package/dist/esm/components/definition-tooltip/DefinitionTooltip.js

@@ -1,10 +1,10 @@
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as r } from "react";
-import { Focusable as u } from "react-aria-components";
-import { tv as l } from "tailwind-variants";
+import { uyTv as u } from "@payfit/unity-themes";
+import { Focusable as l } from "react-aria-components";
 import { Text as f } from "../text/Text.js";
 import { Tooltip as s } from "../tooltip/Tooltip.js";
-const a = l({
+const a = u({
   base: [
     "uy:text-content-neutral-enabled uy:rounded-50 uy:py-75",
     "uy:hover:text-content-neutral-hover",
@@ -12,7 +12,7 @@ const a = l({
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
   ]
 }), c = r(
-  ({ children: t, title: i, asElement: e = "span", ...n }, m) => /* @__PURE__ */ o(s, { title: i, ...n, children: /* @__PURE__ */ o(u, { children: /* @__PURE__ */ o(
+  ({ children: t, title: i, asElement: e = "span", ...n }, m) => /* @__PURE__ */ o(s, { title: i, ...n, children: /* @__PURE__ */ o(l, { children: /* @__PURE__ */ o(
     f,
     {
       variant: "actionInfo",

package/dist/esm/components/dialog/Dialog.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 import { DialogTrigger } from 'react-aria-components';
 export declare const dialog: import('tailwind-variants').TVReturnType<{
     [key: string]: {

package/dist/esm/components/dialog/Dialog.js

@@ -1,12 +1,12 @@
 import { jsx as o } from "react/jsx-runtime";
 import { Children as i, isValidElement as t } from "react";
-import { useId as s } from "react-aria";
-import { ModalOverlay as g, Modal as p, DialogContext as f, Dialog as c, DialogTrigger as b } from "react-aria-components";
+import { uyTv as s } from "@payfit/unity-themes";
+import { useId as g } from "react-aria";
+import { ModalOverlay as p, Modal as f, DialogContext as c, Dialog as b, DialogTrigger as x } from "react-aria-components";
 import { DialogTrigger as E } from "react-aria-components";
-import { tv as x } from "tailwind-variants";
 import { DialogActions as D } from "./parts/DialogActions.js";
 import { DialogButton as v } from "./parts/DialogActions/DialogButton.js";
-const w = x({
+const w = s({
   slots: {
     overlay: [
       "uy:fixed uy:inset-0 uy:z-30 uy:overflow-y-auto",
@@ -41,16 +41,16 @@ function N({
   isDismissable: u = !0,
   ...y
 }) {
-  const l = s(), { overlay: n, wrapper: d, content: m } = w();
+  const l = g(), { overlay: n, wrapper: d, content: m } = w();
   return /* @__PURE__ */ o(
-    g,
+    p,
     {
       isDismissable: u,
       isOpen: a,
       onOpenChange: r,
       className: n(),
-      children: /* @__PURE__ */ o(p, { className: d(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(f.Provider, { value: { "aria-describedby": l }, children: /* @__PURE__ */ o(
-        c,
+      children: /* @__PURE__ */ o(f, { className: d(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(c.Provider, { value: { "aria-describedby": l }, children: /* @__PURE__ */ o(
+        b,
         {
           role: h(e) ? "alertdialog" : "dialog",
           "aria-modal": "true",
@@ -64,7 +64,7 @@ function N({
   );
 }
 N.displayName = "Dialog";
-b.displayName = "DialogTrigger";
+x.displayName = "DialogTrigger";
 export {
   N as Dialog,
   E as DialogTrigger,

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.d.ts

@@ -16,7 +16,7 @@ export type DialogButtonProps<T extends ButtonVariant> = Omit<ButtonProps, 'vari
  *
  */
 declare const DialogButton: {
-    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, ...props }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element | undefined;
+    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, ...props }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { DialogButton };

package/dist/esm/components/fieldset/Fieldset.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren, ReactNode } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const fieldset: import('tailwind-variants').TVReturnType<{
     isLegendHidden: {
         true: {

package/dist/esm/components/fieldset/Fieldset.js

@@ -1,8 +1,8 @@
 import { jsxs as f, jsx as t } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { useId as g } from "react-aria";
-import { tv as b } from "tailwind-variants";
-const x = b({
+import { uyTv as g } from "@payfit/unity-themes";
+import { useId as b } from "react-aria";
+const x = g({
   slots: {
     base: "uy:p-0 uy:m-0 uy:[&+&]:mt-500 uy:[&:last-of-type]:mb-500",
     legend: "uy:typography-h3 uy:text-content-neutral",
@@ -28,7 +28,7 @@ const x = b({
   }
 }), h = m(
   ({ children: i, ...d }, n) => {
-    const s = g(), { legend: l, description: e, isLegendHidden: o, ...r } = d, {
+    const s = b(), { legend: l, description: e, isLegendHidden: o, ...r } = d, {
       base: a,
       legend: y,
       description: c,

package/dist/esm/components/flex/Flex.d.ts

@@ -1,4 +1,4 @@
-import { VariantProps } from 'tailwind-variants';
+import { VariantProps } from '@payfit/unity-themes';
 import { flex } from './Flex.variants.js';
 export type FlexContainerVariantProps = VariantProps<typeof flex>;
 type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';