@ballistix.digital/react-components 3.3.2 → 4.0.0

package/dist/index.d.ts

@@ -3,6 +3,7 @@ import { DeepPartialType } from 'types/DeepPartialType';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { Placement } from '@floating-ui/react';
 import { Menu } from '@headlessui/react';
+import { AnchorProps } from '@headlessui/react/dist/internal/floating';
 import { ColumnDef, SortingState, ColumnOrderState, Row, Table } from '@tanstack/react-table';
 import { TButtonElementStyles as TButtonElementStyles$1 } from 'components/Element/Button';
 import { TDropdownElementStyles as TDropdownElementStyles$1 } from 'components/Element/Dropdown';
@@ -159,7 +160,7 @@ type TProps$c = {
     trigger?: ReactNode;
     dataCy?: string;
     type?: 'button' | 'compact';
-    direction?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+    direction?: AnchorProps;
     isEscapingOverflow?: boolean;
     styles?: TDropdownElementStyles;
 };
@@ -495,6 +496,11 @@ declare const base$e: {
                 container: string;
                 row: string;
                 checkbox: string;
+                column: {
+                    pinned: {
+                        cell: string;
+                    };
+                };
                 cell: {
                     container: string;
                     text: string;

package/dist/index.esm.js

@@ -11,7 +11,7 @@ import { fas } from '@fortawesome/pro-solid-svg-icons';
 import { fat } from '@fortawesome/pro-thin-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useFloating, offset, flip, shift, arrow, autoUpdate, useHover, useFocus, useDismiss, useRole, useInteractions, FloatingArrow } from '@floating-ui/react';
-import { Menu, Transition, Dialog, Popover, Switch as Switch$1 } from '@headlessui/react';
+import { Menu, MenuButton, Transition, MenuItems, Dialog, Popover, Switch as Switch$1 } from '@headlessui/react';
 import { useMask } from '@react-input/mask';
 import { ViewColumnsIcon, ChevronDownIcon as ChevronDownIcon$1, TableCellsIcon, XMarkIcon, PlusIcon } from '@heroicons/react/24/outline';
 import { useReactTable, getCoreRowModel, flexRender, createColumnHelper as createColumnHelper$1 } from '@tanstack/react-table';
@@ -730,18 +730,18 @@ var styles$r = {
 };
 
 var Container$3 = function (props) {
-    var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom-left' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
+    var children = props.children, label = props.label, trigger = props.trigger, dataCy = props.dataCy, _a = props.type, type = _a === void 0 ? 'button' : _a, _b = props.direction, direction = _b === void 0 ? 'bottom end' : _b, _c = props.isEscapingOverflow, isEscapingOverflow = _c === void 0 ? false : _c, stylesOverrides = props.styles;
     var handleGenerateStyle = function () {
         var result = deepCopyObject(styles$q.base);
         var keys = calculateNestedKeys(styles$q.base);
         keys.forEach(function (key) {
-            set(result, key, toClassName(get(styles$q.base, key), type && get(styles$q[type], key), direction && get(styles$q[direction], key), get(stylesOverrides, key)));
+            set(result, key, toClassName(get(styles$q.base, key), type && get(styles$q[type], key), get(stylesOverrides, key)));
         });
         return result;
     };
     var styles = handleGenerateStyle();
     return (jsxs(Menu, { as: "div", className: toClassName(styles.container, !isEscapingOverflow && 'relative'), children: [jsxs("div", { children: [type === 'button' &&
-                        (!trigger ? (jsxs(Menu.Button, { className: styles.button, "data-cy": dataCy, children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsx(Menu.Button, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxs(Menu.Button, { className: styles.compact, "data-cy": dataCy, children: [jsx("span", { className: "sr-only", children: label }), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsx(Transition, { as: Fragment$1, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsx(Menu.Items, { className: styles.items, children: children }) })] }));
+                        (!trigger ? (jsxs(MenuButton, { className: styles.button, "data-cy": dataCy, children: [label, jsx(ChevronDownIcon, { className: "-mr-1 ml-2 h-5 w-5", "aria-hidden": "true" })] })) : (jsx(MenuButton, { "data-cy": dataCy, children: trigger }))), type === 'compact' && (jsxs(MenuButton, { className: styles.compact, "data-cy": dataCy, children: [jsx("span", { className: "sr-only", children: label }), jsx(EllipsisVerticalIcon, { className: styles.dots, "aria-hidden": "true" })] }))] }), jsx(Transition, { as: Fragment$1, enter: "transition ease-out duration-100", enterFrom: "transform opacity-0 scale-95", enterTo: "transform opacity-100 scale-100", leave: "transition ease-in duration-75", leaveFrom: "transform opacity-100 scale-100", leaveTo: "transform opacity-0 scale-95", children: jsx(MenuItems, { anchor: direction, className: styles.items, children: children }) })] }));
 };
 var DropdownElement = {
     Container: Container$3,
@@ -6064,7 +6064,7 @@ var TableList2 = function (props) {
                                                                     : ChevronDownIcon;
                                                         }
                                                         return (jsx("th", { colSpan: header.colSpan, className: toClassName(styles.body.table.head.cell.container, 'border-b', header.column.getCanSort() && 'cursor-pointer', header.column.getIsPinned() &&
-                                                                styles.body.table.body.column.pinned.cell), onClick: header.column.getToggleSortingHandler(), style: __assign$1({ minWidth: !!header.column.columnDef.size &&
+                                                                styles.body.table.head.column.pinned.cell), onClick: header.column.getToggleSortingHandler(), style: __assign$1({ minWidth: !!header.column.columnDef.size &&
                                                                     header.column.columnDef.size !== 150
                                                                     ? "".concat(header.column.columnDef.size, "px")
                                                                     : 'auto' }, getCommonPinningStyles(header.column)), children: jsxs("div", { className: "grid gap-x-1 items-center", style: {
@@ -6111,6 +6111,11 @@ var base$c = {
                 container: '',
                 row: '',
                 checkbox: 'absolute left-4 top-1/2 -mt-2 h-4 w-4 rounded border-gray-300 text-primary-600 focus:ring-primary-500 sm:left-6',
+                column: {
+                    pinned: {
+                        cell: 'bg-white sticky z-10 overflow-hidden text-ellipsis',
+                    },
+                },
                 cell: {
                     container: ' py-3.5 px-3 text-left text-sm font-semibold text-gray-900 group',
                     text: 'whitespace-normal break-words',