@pk-design/react-tailwind 1.5.2 → 1.5.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react-tailwind.cjs.js +5 -5
- package/dist/react-tailwind.cjs.js.map +1 -1
- package/dist/react-tailwind.es.js +5 -5
- package/dist/react-tailwind.es.js.map +1 -1
- package/dist/types/components/DataTable/DataTable.d.ts +1 -1
- package/dist/types/components/DataTable/DataTable.types.d.ts +1 -0
- package/package.json +1 -1
|
@@ -965,7 +965,7 @@ const autoSortItems = (items, column, sort) => {
|
|
|
965
965
|
return 0;
|
|
966
966
|
});
|
|
967
967
|
};
|
|
968
|
-
function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, }) {
|
|
968
|
+
function DataTable({ items, columns, sorting = {}, onSort, loading, pagination, setPagination = () => { }, emptyMessage = 'No data found', containerClass = '', wrapperClass = '', tableClass = '', headClass = '', footerRow, rowKey = 'id', onRowClick, rowClass, density = 'default', striped = false, layout = 'auto', selectable = false, selectedRowKeys, defaultSelectedRowKeys, onSelectionChange, isRowSelectable, paginationContainerClass, }) {
|
|
969
969
|
const internalSorting = React.useRef({});
|
|
970
970
|
const [sortedItems, setSortedItems] = React.useState(items);
|
|
971
971
|
React.useEffect(() => {
|
|
@@ -1026,7 +1026,7 @@ function DataTable({ items, columns, sorting = {}, onSort, loading, pagination,
|
|
|
1026
1026
|
? column.render(item)
|
|
1027
1027
|
: ((_a = get(item, column.name)) !== null && _a !== void 0 ? _a : 'Not set') }, column.name));
|
|
1028
1028
|
})] }, key));
|
|
1029
|
-
})) }), footerRow && jsxRuntime.jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsxRuntime.jsx(Pagination, { ...pagination, className:
|
|
1029
|
+
})) }), footerRow && jsxRuntime.jsx(TableFoot, { children: footerRow })] }) }), pagination && (jsxRuntime.jsx(Pagination, { ...pagination, className: buildClassName('rounded-b-lg border-t border-[var(--ui-border)]', paginationContainerClass), onChange: setPagination }))] }));
|
|
1030
1030
|
}
|
|
1031
1031
|
DataTable.displayName = 'DataTable';
|
|
1032
1032
|
|
|
@@ -1081,7 +1081,7 @@ const panelSizeMap = {
|
|
|
1081
1081
|
};
|
|
1082
1082
|
const Drawer = ({ isOpen, onClose = () => { }, align = 'end', size = 'md', backdrop = true, title, description, children, panelClass = '', contentClass = '', titleClass = '', descriptionClass = '', titleSticky = false, showBackButton = false, }) => {
|
|
1083
1083
|
const showTitleSection = Boolean(title || description);
|
|
1084
|
-
return (jsxRuntime.jsxs(react.Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: onClose, transition: true, children: [backdrop && jsxRuntime.jsx(react.DialogBackdrop, { className: "fixed inset-0 bg-black/20 transition-opacity" }), jsxRuntime.jsx("div", { className: "fixed inset-0 w-screen h-
|
|
1084
|
+
return (jsxRuntime.jsxs(react.Dialog, { open: isOpen, as: "div", className: "relative z-50 focus:outline-none", onClose: onClose, transition: true, children: [backdrop && jsxRuntime.jsx(react.DialogBackdrop, { className: "fixed inset-0 bg-black/20 transition-opacity" }), jsxRuntime.jsx("div", { className: "fixed inset-0 w-screen h-[100svh]", children: jsxRuntime.jsx("div", { className: buildClassName('flex', alignmentMap[align]), children: jsxRuntime.jsxs(react.DialogPanel, { transition: true, className: buildClassName('w-full bg-white dark:bg-gray-800 backdrop-blur-2xl shadow-sm', 'overflow-y-auto space-y-4 duration-200 ease-out data-[closed]:opacity-0', panelAlignmentMap[align], panelSizeMap[size], panelClass), children: [showTitleSection && (jsxRuntime.jsxs("div", { className: buildClassName('space-y-2 pt-2 md:pt-4 px-4 md:px-6', titleSticky && 'sticky top-0 bg-white dark:bg-gray-800 z-10'), children: [jsxRuntime.jsxs(react.DialogTitle, { as: "h3", className: buildClassName('text-lg font-medium dark:text-white flex items-center gap-2', titleClass), children: [showBackButton && (jsxRuntime.jsx(Button, { iconOnly: true, "aria-label": "Close drawer", variant: "plain", theme: "secondary", size: "sm", onClick: onClose, children: jsxRuntime.jsx(SvgChevronLeft, { className: "size-5" }) })), title] }), description && (jsxRuntime.jsx("p", { className: buildClassName('text-sm dark:text-white/60', descriptionClass), children: description }))] })), jsxRuntime.jsx("div", { className: contentClass, children: children })] }) }) })] }));
|
|
1085
1085
|
};
|
|
1086
1086
|
Drawer.displayName = 'Drawer';
|
|
1087
1087
|
|
|
@@ -1111,7 +1111,7 @@ var SvgFolderPlus = function SvgFolderPlus(props) {
|
|
|
1111
1111
|
};
|
|
1112
1112
|
|
|
1113
1113
|
const EmptyState = ({ title, description, className, action = null, }) => {
|
|
1114
|
-
return (jsxRuntime.jsx("div", { className: buildClassName('w-full flex justify-center px-4 pt-16', className), children: jsxRuntime.jsxs("div", { className: "max-w-md flex flex-col items-center gap-4", children: [jsxRuntime.jsx(SvgFolderPlus, { className: "size-8" }), jsxRuntime.jsx(HeadingText.SubTitle, { children: title }), description && (jsxRuntime.jsx(BodyText, { as: "p", className: "text-center", muted: true, small: true, children: description })), action] }) }));
|
|
1114
|
+
return (jsxRuntime.jsx("div", { className: buildClassName('w-full flex justify-center px-4 pt-16', className), children: jsxRuntime.jsxs("div", { className: "max-w-md flex flex-col items-center gap-4", children: [jsxRuntime.jsx(SvgFolderPlus, { className: "size-8 text-[var(--ui-text)]" }), jsxRuntime.jsx(HeadingText.SubTitle, { children: title }), description && (jsxRuntime.jsx(BodyText, { as: "p", className: "text-center", muted: true, small: true, children: description })), action] }) }));
|
|
1115
1115
|
};
|
|
1116
1116
|
|
|
1117
1117
|
function buildInputClass(className, { isFocusWithin = false, disabled = false } = {}) {
|
|
@@ -1590,7 +1590,7 @@ const Textarea = React.forwardRef((props, ref) => {
|
|
|
1590
1590
|
const hasError = !isEmpty(error);
|
|
1591
1591
|
const hasRightGroup = rightGroup != null && rightGroup !== undefined;
|
|
1592
1592
|
const hasLeftGroup = leftGroup != null && leftGroup !== undefined;
|
|
1593
|
-
return (jsxRuntime.jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsxRuntime.jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsxRuntime.jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs("div", { className: "relative", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsxRuntime.jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100', 'dark:disabled:bg-gray-
|
|
1593
|
+
return (jsxRuntime.jsxs("div", { className: buildClassName('group', hasError && 'has-error', containerClass), children: [label && (jsxRuntime.jsxs("div", { className: buildClassName('flex items-center justify-between mb-2', labelWrapperClass), children: [jsxRuntime.jsx(Label, { className: labelClass, htmlFor: id, children: label }), jsxRuntime.jsx(TextContent, { xsmall: true, children: labelHint })] })), jsxRuntime.jsxs("div", { className: "relative", children: [hasLeftGroup && (jsxRuntime.jsx("span", { className: "absolute top-0 h-full flex items-center justify-center w-10", children: leftGroup })), jsxRuntime.jsx("textarea", { ref: ref, autoComplete: "off", ...inputProps, name: name, id: id, className: buildClassName('transition-all', 'block w-full rounded-lg bg-white px-3.5 py-2 text-base sm:text-sm/6', 'text-gray-900 outline dark:outline outline-1 -outline-offset-1', 'outline-gray-300 dark:outline-gray-600', 'focus:outline-blue-600 dark:focus:outline-blue-600 focus:outline-2 focus:-outline-offset-2', 'dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-500 placeholder:text-gray-400 dark:text-white', 'invalid:group-[.has-error]:outline-red-500', 'disabled:pointer-events-none disabled:bg-gray-100 disabled:outline-gray-200', 'dark:disabled:bg-gray-800 dark:disabled:text-gray-600 dark:disabled:placeholder-gray-600 dark:disabled:outline-gray-700', hasRightGroup ? 'pe-10' : '', hasLeftGroup ? 'ps-10' : '', className) }), hasRightGroup && (jsxRuntime.jsx("span", { className: "absolute end-0.75 top-0 h-full flex items-center justify-center", children: rightGroup }))] }), showErrorMessage && error && (jsxRuntime.jsx("div", { className: "mt-1", children: jsxRuntime.jsx(TextContent, { error: true, small: true, children: error }) }))] }));
|
|
1594
1594
|
});
|
|
1595
1595
|
|
|
1596
1596
|
/**
|