@eml-payments/ui-kit 0.1.27 → 0.1.28

package/dist/src/components/DropdownWrapper/DropdownWrapper.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
 import type { DropdownOption, DropdownStructure } from './DropdownWrapper.types';
-declare const DropdownWrapper: ({ triggerElement, options, className, structure, selectedValue, onValueChange, }: {
+declare const DropdownWrapper: ({ triggerElement, options, className, structure, selectedValue, onValueChange, menuAlignment, }: {
     triggerElement: React.ReactNode;
     options: DropdownOption[];
     className?: string;
     structure?: DropdownStructure;
     selectedValue?: string;
     onValueChange?: (value: string) => void;
+    menuAlignment?: "start" | "end" | "center" | undefined;
 }) => import("react/jsx-runtime").JSX.Element;
 export { DropdownWrapper };

package/dist/src/components/DropdownWrapper/DropdownWrapper.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuCheckboxItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubTrigger, DropdownMenuSubContent, } from '../Dropdown';
 const getKey = (opt) => { var _a, _b; return (_a = opt.value) !== null && _a !== void 0 ? _a : `${(_b = opt.groupLabel) !== null && _b !== void 0 ? _b : 'group'}-${opt.label}`; };
-const DropdownWrapper = ({ triggerElement, options, className, structure = 'default', selectedValue, onValueChange, }) => {
+const DropdownWrapper = ({ triggerElement, options, className, structure = 'default', selectedValue, onValueChange, menuAlignment = 'start', }) => {
     const renderContent = () => {
         switch (structure) {
             case 'radio':
@@ -26,6 +26,6 @@ const DropdownWrapper = ({ triggerElement, options, className, structure = 'defa
                 return options.map((opt) => (_jsx(DropdownMenuItem, { onSelect: opt.onSelect, disabled: opt.disabled, children: opt.label }, opt.label)));
         }
     };
-    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: triggerElement }), _jsx(DropdownMenuContent, { className: className !== null && className !== void 0 ? className : 'w-56', children: renderContent() })] }));
+    return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: triggerElement }), _jsx(DropdownMenuContent, { className: className !== null && className !== void 0 ? className : 'w-56', align: menuAlignment !== null && menuAlignment !== void 0 ? menuAlignment : 'start', children: renderContent() })] }));
 };
 export { DropdownWrapper };

package/dist/src/components/Table/Table.js

@@ -23,7 +23,7 @@ export function Table(props) {
             return (_jsxs("tr", { className: classNames('border-t hover:bg-[var(--uikit-primary-10)]', props.onRowClick && 'cursor-pointer', row.getIsSelected() && 'bg-[var(--uikit-primary-10)]'), onClick: () => { var _a; return (_a = props.onRowClick) === null || _a === void 0 ? void 0 : _a.call(props, row.original); }, children: [row.getVisibleCells().map((cell) => {
                         const width = cell.column.getSize();
                         return (_jsx("td", { style: { width }, className: cell.column.id === 'select' ? 'p-1' : 'px-4 py-2', children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id));
-                    }), props.tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_a = props.tableActionsDropdown.structure) !== null && _a !== void 0 ? _a : 'default', options: props.tableActionsDropdown.getOptions(row.original), triggerElement: (_e = (_d = (_b = props.tableActionsDropdown).renderCustomTrigger) === null || _d === void 0 ? void 0 : _d.call(_b, row.original)) !== null && _e !== void 0 ? _e : (_jsx(Button, { size: "icon", variant: "ghost", className: "p-1 focus-visible:outline-none focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_f = props.rowIdKey) !== null && _f !== void 0 ? _f : 'id')]));
+                    }), props.tableActionsDropdown && (_jsx("td", { className: "w-[40px] px-2 py-2 text-right", children: _jsx(DropdownWrapper, { structure: (_a = props.tableActionsDropdown.structure) !== null && _a !== void 0 ? _a : 'default', options: props.tableActionsDropdown.getOptions(row.original), menuAlignment: props.tableActionsDropdown.menuAlignment, triggerElement: (_e = (_d = (_b = props.tableActionsDropdown).renderCustomTrigger) === null || _d === void 0 ? void 0 : _d.call(_b, row.original)) !== null && _e !== void 0 ? _e : (_jsx(Button, { size: "icon", variant: "ghost", className: "p-1 focus-visible:outline-none focus-visible:ring-0", children: _jsx(FiMoreHorizontal, { size: 16 }) })) }) }))] }, row.original[((_f = props.rowIdKey) !== null && _f !== void 0 ? _f : 'id')]));
         });
     }
     return (_jsxs("div", { className: "relative w-full overflow-auto", children: [props.isLoading && _jsx("div", { className: "mui-loader" }), _jsx("div", { className: "rounded-[var(--uikit-radius)] overflow-hidden border", children: _jsxs("table", { className: classNames('min-w-full text-sm table-fixed', props.className), role: "table", id: props.id, children: [showHeader && (_jsx("thead", { className: "bg-[var(--uikit-tertiary)]", children: table.getHeaderGroups().map((headerGroup) => (_jsxs("tr", { children: [headerGroup.headers.map((header) => {

package/dist/src/components/Table/Table.stories.js

@@ -131,6 +131,7 @@ export const WithRowActionsDropdown = {
         return (_jsx(Table, { id: "example-table", data: data, columns: columns, tableActionsDropdown: {
                 getOptions,
                 structure: 'default',
+                menuAlignment: 'end',
             } }));
     },
 };

package/dist/src/components/Table/Table.types.d.ts

@@ -31,6 +31,7 @@ export interface TableProps<T> {
         }[];
         structure?: DropdownStructure;
         renderCustomTrigger?: (row: T) => React.ReactNode;
+        menuAlignment?: 'start' | 'end' | 'center' | undefined;
     };
     onRowClick?: (row: T) => void;
     showHeader?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eml-payments/ui-kit",
-	"version": "0.1.27",
+	"version": "0.1.28",
 	"private": false,
 	"description": "ARLO UIKit",
 	"homepage": "https://github.com/EML-Payments/arlo.npm.uikit#readme",
@@ -109,4 +109,4 @@
 	"lint-staged": {
 		"*.{js,ts,tsx}": "eslint --fix"
 	}
-}
+}