phx-react 1.3.1832 → 1.3.1835

package/dist/cjs/components/TableSchedule/components/useStickyShadow.js

@@ -0,0 +1,37 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useStickyShadow = void 0;
+const react_1 = require("react");
+/**
+ * Tracks whether the sticky-header shadow should be visible based on horizontal scroll.
+ *
+ * @param {UseStickyShadowParams} params Dependencies required to recalculate shadow visibility.
+ * @returns {boolean} True when the table has been horizontally scrolled.
+ */
+const useStickyShadow = ({ scrollContainerRef, columnsLength, rowsLength, stickyHeaderCount, }) => {
+    const [showStickyShadow, setShowStickyShadow] = (0, react_1.useState)(false);
+    (0, react_1.useEffect)(() => {
+        const container = scrollContainerRef.current;
+        if (!container)
+            return;
+        /**
+         * Synchronizes the sticky shadow state with the container's horizontal scroll position.
+         *
+         * @returns {void}
+         */
+        const updateStickyShadow = () => {
+            setShowStickyShadow(container.scrollLeft > 0);
+        };
+        updateStickyShadow();
+        container.addEventListener('scroll', updateStickyShadow, { passive: true });
+        window.addEventListener('resize', updateStickyShadow);
+        return () => {
+            container.removeEventListener('scroll', updateStickyShadow);
+            window.removeEventListener('resize', updateStickyShadow);
+        };
+    }, [columnsLength, rowsLength, stickyHeaderCount, scrollContainerRef]);
+    return showStickyShadow;
+};
+exports.useStickyShadow = useStickyShadow;
+//# sourceMappingURL=useStickyShadow.js.map

package/dist/cjs/components/TableSchedule/components/useStickyShadow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useStickyShadow.js","sourceRoot":"","sources":["../../../../../src/components/TableSchedule/components/useStickyShadow.ts"],"names":[],"mappings":";AAAA,YAAY,CAAA;;;AAGZ,iCAA2C;AAS3C;;;;;GAKG;AACI,MAAM,eAAe,GAAG,CAAC,EAC9B,kBAAkB,EAClB,aAAa,EACb,UAAU,EACV,iBAAiB,GACK,EAAE,EAAE;IAC1B,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAE/D,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,kBAAkB,CAAC,OAAO,CAAA;QAC5C,IAAI,CAAC,SAAS;YAAE,OAAM;QAEtB;;;;WAIG;QACH,MAAM,kBAAkB,GAAG,GAAG,EAAE;YAC9B,mBAAmB,CAAC,SAAS,CAAC,UAAU,GAAG,CAAC,CAAC,CAAA;QAC/C,CAAC,CAAA;QAED,kBAAkB,EAAE,CAAA;QACpB,SAAS,CAAC,gBAAgB,CAAC,QAAQ,EAAE,kBAAkB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QAC3E,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAA;QAErD,OAAO,GAAG,EAAE;YACV,SAAS,CAAC,mBAAmB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAA;YAC3D,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,kBAAkB,CAAC,CAAA;QAC1D,CAAC,CAAA;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,iBAAiB,EAAE,kBAAkB,CAAC,CAAC,CAAA;IAEtE,OAAO,gBAAgB,CAAA;AACzB,CAAC,CAAA;AAhCY,QAAA,eAAe,mBAgC3B"}

package/dist/cjs/components/TableSchedule/constants.d.ts

@@ -0,0 +1,49 @@
+import { CSSProperties } from 'react';
+import { GridCellVariant, GridColumnAlign, GridRowHeaderAlign } from './types';
+export declare const BORDER = "0.5px solid var(--color-border-tertiary, #e5e7eb)";
+export declare const stickyBase: CSSProperties;
+export declare const thBase: CSSProperties;
+export declare const HEADER_TH_CLASSNAME = "whitespace-nowrap bg-white px-3 py-2 text-xs font-semibold text-gray-900";
+export declare const STICKY_SHADOW_CLASSNAME = "drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]";
+export declare const LEGEND_WRAPPER_CLASSNAME = "mb-3 flex w-fit items-center gap-2 rounded-lg bg-white p-2";
+export declare const LEGEND_ITEM_CLASSNAME = "ml-2 flex items-center gap-1";
+export declare const LEGEND_LAST_ITEM_CLASSNAME = "ml-2 mr-2 flex items-center gap-1";
+export declare const LEGEND_LABEL_CLASSNAME = "text-xs font-normal text-gray-900";
+export declare const TABLE_SCROLL_CONTAINER_CLASSNAME = "overflow-x-auto rounded-lg bg-white";
+export declare const TABLE_CLASSNAME = "w-full border-collapse";
+export declare const TABLE_SCROLL_CONTAINER_STYLE: CSSProperties;
+export declare const TABLE_STYLE: CSSProperties;
+export declare const ROW_HEADER_CONTENT_CLASSNAME = "flex flex-col";
+export declare const ROW_HEADER_ALIGN_CLASSNAME: Record<GridRowHeaderAlign, string>;
+export declare const ROW_HEADER_TITLE_CLASSNAME = "text-xs font-semibold text-gray-900";
+export declare const ROW_HEADER_DESCRIPTION_CLASSNAME = "text-xs text-gray-600";
+export declare const CELL_BOX_BASE_CLASSNAME = "flex h-[30px] w-[176px] items-center overflow-hidden rounded-lg border-[0.5px] px-2.5 text-left text-xs font-normal shadow-sm";
+export declare const CELL_BOX_VARIANT_CLASSNAME: Record<GridCellVariant, string>;
+export declare const LEGEND_INDICATOR_CLASSNAME: Record<GridCellVariant, string>;
+export declare const CELL_WRAPPER_ALIGN_CLASSNAME: Record<GridColumnAlign, string>;
+/**
+ * Returns the wrapper alignment class for a cell based on the column alignment.
+ *
+ * @param {GridColumnAlign} align The alignment configured for the column.
+ * @returns {string} The Tailwind class used to align the cell wrapper content.
+ */
+export declare const getCellWrapperAlignClassName: (align: GridColumnAlign) => string;
+export declare const TOOLTIP_CONTENT_CLASSNAME = "flex max-w-[320px] flex-col gap-2 text-left";
+export declare const TOOLTIP_TITLE_CLASSNAME = "text-xs font-semibold leading-5 text-gray-800";
+export declare const TOOLTIP_SECTION_CLASSNAME = "flex flex-col gap-0.5";
+export declare const TOOLTIP_LABEL_CLASSNAME = "text-xs leading-5 text-gray-500";
+export declare const TOOLTIP_VALUE_CLASSNAME = "text-xs font-semibold leading-5 text-gray-800";
+export declare const DEFAULT_TOOLTIP_CLASSNAME = "w-fit !px-5 !py-4";
+export declare const SCHEDULE_CELL_CLASSNAME = "flex flex-col gap-2 text-left";
+export declare const SCHEDULE_TITLE_CLASSNAME = "text-sm font-semibold leading-5 text-gray-800";
+export declare const SCHEDULE_TITLE_DOTTED_CLASSNAME = "inline-block w-fit border-b-2 border-dotted border-gray-300 text-sm font-semibold leading-5 text-gray-800";
+export declare const SCHEDULE_SECTION_CLASSNAME = "flex flex-col gap-1";
+export declare const SCHEDULE_SECTION_LABEL_CLASSNAME = "flex items-center gap-1.5 text-xs font-normal leading-5 text-gray-500";
+export declare const SCHEDULE_SECTION_VALUE_CLASSNAME = "text-sm font-semibold leading-5 text-gray-800";
+export declare const SCHEDULE_EMPTY_TITLE_CLASSNAME = "text-sm font-semibold leading-5 text-gray-800";
+export declare const SCHEDULE_EMPTY_DESCRIPTION_CLASSNAME = "text-xs font-normal leading-5 text-gray-500";
+export declare const BOXED_CELL_PADDING_CLASSNAME = "px-1 py-1";
+export declare const PLAIN_CELL_PADDING_CLASSNAME = "px-2 py-1.5";
+export declare const BUTTON_BASE_CLASSNAME = "!shadow-none !flex !w-full !rounded-none !text-left";
+export declare const CELL_CONTENT_BASE_CLASSNAME = "flex w-full text-left";
+export declare const DATA_CELL_BASE_CLASSNAME = "align-middle border-l p-0";

package/dist/cjs/components/TableSchedule/constants.js

@@ -0,0 +1,85 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DATA_CELL_BASE_CLASSNAME = exports.CELL_CONTENT_BASE_CLASSNAME = exports.BUTTON_BASE_CLASSNAME = exports.PLAIN_CELL_PADDING_CLASSNAME = exports.BOXED_CELL_PADDING_CLASSNAME = exports.SCHEDULE_EMPTY_DESCRIPTION_CLASSNAME = exports.SCHEDULE_EMPTY_TITLE_CLASSNAME = exports.SCHEDULE_SECTION_VALUE_CLASSNAME = exports.SCHEDULE_SECTION_LABEL_CLASSNAME = exports.SCHEDULE_SECTION_CLASSNAME = exports.SCHEDULE_TITLE_DOTTED_CLASSNAME = exports.SCHEDULE_TITLE_CLASSNAME = exports.SCHEDULE_CELL_CLASSNAME = exports.DEFAULT_TOOLTIP_CLASSNAME = exports.TOOLTIP_VALUE_CLASSNAME = exports.TOOLTIP_LABEL_CLASSNAME = exports.TOOLTIP_SECTION_CLASSNAME = exports.TOOLTIP_TITLE_CLASSNAME = exports.TOOLTIP_CONTENT_CLASSNAME = exports.getCellWrapperAlignClassName = exports.CELL_WRAPPER_ALIGN_CLASSNAME = exports.LEGEND_INDICATOR_CLASSNAME = exports.CELL_BOX_VARIANT_CLASSNAME = exports.CELL_BOX_BASE_CLASSNAME = exports.ROW_HEADER_DESCRIPTION_CLASSNAME = exports.ROW_HEADER_TITLE_CLASSNAME = exports.ROW_HEADER_ALIGN_CLASSNAME = exports.ROW_HEADER_CONTENT_CLASSNAME = exports.TABLE_STYLE = exports.TABLE_SCROLL_CONTAINER_STYLE = exports.TABLE_CLASSNAME = exports.TABLE_SCROLL_CONTAINER_CLASSNAME = exports.LEGEND_LABEL_CLASSNAME = exports.LEGEND_LAST_ITEM_CLASSNAME = exports.LEGEND_ITEM_CLASSNAME = exports.LEGEND_WRAPPER_CLASSNAME = exports.STICKY_SHADOW_CLASSNAME = exports.HEADER_TH_CLASSNAME = exports.thBase = exports.stickyBase = exports.BORDER = void 0;
+exports.BORDER = '0.5px solid var(--color-border-tertiary, #e5e7eb)';
+exports.stickyBase = {
+    position: 'sticky',
+    left: 0,
+    zIndex: 2,
+    background: 'var(--color-background-primary, #fff)',
+    borderRight: exports.BORDER,
+};
+exports.thBase = {
+    borderBottom: exports.BORDER,
+    textAlign: 'center',
+};
+exports.HEADER_TH_CLASSNAME = 'whitespace-nowrap bg-white px-3 py-2 text-xs font-semibold text-gray-900';
+exports.STICKY_SHADOW_CLASSNAME = 'drop-shadow-[4px_0_4px_rgba(0,0,0,0.1)]';
+exports.LEGEND_WRAPPER_CLASSNAME = 'mb-3 flex w-fit items-center gap-2 rounded-lg bg-white p-2';
+exports.LEGEND_ITEM_CLASSNAME = 'ml-2 flex items-center gap-1';
+exports.LEGEND_LAST_ITEM_CLASSNAME = 'ml-2 mr-2 flex items-center gap-1';
+exports.LEGEND_LABEL_CLASSNAME = 'text-xs font-normal text-gray-900';
+exports.TABLE_SCROLL_CONTAINER_CLASSNAME = 'overflow-x-auto rounded-lg bg-white';
+exports.TABLE_CLASSNAME = 'w-full border-collapse';
+exports.TABLE_SCROLL_CONTAINER_STYLE = {
+    border: exports.BORDER,
+};
+exports.TABLE_STYLE = {
+    width: '100%',
+    borderCollapse: 'collapse',
+};
+exports.ROW_HEADER_CONTENT_CLASSNAME = 'flex flex-col';
+exports.ROW_HEADER_ALIGN_CLASSNAME = {
+    left: 'items-start text-left',
+    center: 'items-center text-center',
+    right: 'items-end text-right',
+};
+exports.ROW_HEADER_TITLE_CLASSNAME = 'text-xs font-semibold text-gray-900';
+exports.ROW_HEADER_DESCRIPTION_CLASSNAME = 'text-xs text-gray-600';
+exports.CELL_BOX_BASE_CLASSNAME = 'flex h-[30px] w-[176px] items-center overflow-hidden rounded-lg border-[0.5px] px-2.5 text-left text-xs font-normal shadow-sm';
+exports.CELL_BOX_VARIANT_CLASSNAME = {
+    default: 'border-gray-500 bg-white text-gray-900',
+    moving: 'border-gray-500 bg-[#FFD6A4] text-gray-900',
+    trogiang: 'border-[#00527C] bg-[#E0F0FF] text-[#00527C]',
+    empty: 'border-gray-500 bg-white text-gray-900',
+};
+exports.LEGEND_INDICATOR_CLASSNAME = {
+    default: '',
+    moving: 'bg-[#FFD6A4]',
+    trogiang: 'border-[#00527C] bg-[#E0F0FF]',
+    empty: '',
+};
+exports.CELL_WRAPPER_ALIGN_CLASSNAME = {
+    left: 'justify-start',
+    center: 'justify-center',
+    right: 'justify-end',
+};
+/**
+ * Returns the wrapper alignment class for a cell based on the column alignment.
+ *
+ * @param {GridColumnAlign} align The alignment configured for the column.
+ * @returns {string} The Tailwind class used to align the cell wrapper content.
+ */
+const getCellWrapperAlignClassName = (align) => exports.CELL_WRAPPER_ALIGN_CLASSNAME[align];
+exports.getCellWrapperAlignClassName = getCellWrapperAlignClassName;
+exports.TOOLTIP_CONTENT_CLASSNAME = 'flex max-w-[320px] flex-col gap-2 text-left';
+exports.TOOLTIP_TITLE_CLASSNAME = 'text-xs font-semibold leading-5 text-gray-800';
+exports.TOOLTIP_SECTION_CLASSNAME = 'flex flex-col gap-0.5';
+exports.TOOLTIP_LABEL_CLASSNAME = 'text-xs leading-5 text-gray-500';
+exports.TOOLTIP_VALUE_CLASSNAME = 'text-xs font-semibold leading-5 text-gray-800';
+exports.DEFAULT_TOOLTIP_CLASSNAME = 'w-fit !px-5 !py-4';
+exports.SCHEDULE_CELL_CLASSNAME = 'flex flex-col gap-2 text-left';
+exports.SCHEDULE_TITLE_CLASSNAME = 'text-sm font-semibold leading-5 text-gray-800';
+exports.SCHEDULE_TITLE_DOTTED_CLASSNAME = 'inline-block w-fit border-b-2 border-dotted border-gray-300 text-sm font-semibold leading-5 text-gray-800';
+exports.SCHEDULE_SECTION_CLASSNAME = 'flex flex-col gap-1';
+exports.SCHEDULE_SECTION_LABEL_CLASSNAME = 'flex items-center gap-1.5 text-xs font-normal leading-5 text-gray-500';
+exports.SCHEDULE_SECTION_VALUE_CLASSNAME = 'text-sm font-semibold leading-5 text-gray-800';
+exports.SCHEDULE_EMPTY_TITLE_CLASSNAME = 'text-sm font-semibold leading-5 text-gray-800';
+exports.SCHEDULE_EMPTY_DESCRIPTION_CLASSNAME = 'text-xs font-normal leading-5 text-gray-500';
+exports.BOXED_CELL_PADDING_CLASSNAME = 'px-1 py-1';
+exports.PLAIN_CELL_PADDING_CLASSNAME = 'px-2 py-1.5';
+exports.BUTTON_BASE_CLASSNAME = '!shadow-none !flex !w-full !rounded-none !text-left';
+exports.CELL_CONTENT_BASE_CLASSNAME = 'flex w-full text-left';
+exports.DATA_CELL_BASE_CLASSNAME = 'align-middle border-l p-0';
+//# sourceMappingURL=constants.js.map

package/dist/cjs/components/TableSchedule/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../src/components/TableSchedule/constants.ts"],"names":[],"mappings":"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"}

package/dist/cjs/components/TableSchedule/index.d.ts

@@ -0,0 +1 @@
+export * from './PHXScheduleTable';

package/dist/cjs/components/TableSchedule/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./PHXScheduleTable"), exports);
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/TableSchedule/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/TableSchedule/index.ts"],"names":[],"mappings":";;;AAAA,6DAAkC"}

package/dist/cjs/components/TableSchedule/renderers.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { GridCellData, GridRowHeader, GridScheduleContent } from './types';
+/**
+ * Renders the content displayed inside a sticky row-header cell.
+ *
+ * @param {GridRowHeader} header The row-header configuration object.
+ * @returns {React.ReactNode} The rendered header content, or null when nothing is configured.
+ */
+export declare const renderRowHeaderContent: (header: GridRowHeader) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | React.JSX.Element | null;
+/**
+ * Renders the boxed visual treatment used by default-layout schedule cells.
+ *
+ * @param {GridCellData} cell The cell data to render.
+ * @returns {React.ReactNode} The boxed content node for the cell.
+ */
+export declare const renderCellBoxContent: (cell: GridCellData) => React.JSX.Element;
+/**
+ * Renders the rich schedule layout used by plain schedule cells.
+ *
+ * @param {GridScheduleContent} scheduleContent The structured schedule content to render.
+ * @param {string} [userDetailPageUrl] The base URL used to build person detail links.
+ * @returns {React.ReactNode} The rendered schedule content.
+ */
+export declare const renderScheduleContent: (scheduleContent: GridScheduleContent, userDetailPageUrl?: string) => React.JSX.Element;
+/**
+ * Resolves and renders the tooltip content for a data cell.
+ *
+ * @param {GridCellData} cell The cell whose tooltip content should be rendered.
+ * @param {string} [userDetailPageUrl] The base URL used to build person detail links.
+ * @returns {React.ReactNode} The tooltip content, or null when the cell has no tooltip payload.
+ */
+export declare const renderTooltipContent: (cell: GridCellData, userDetailPageUrl?: string) => string | number | bigint | true | Iterable<React.ReactNode> | Promise<React.AwaitedReactNode> | React.JSX.Element | null;
+/**
+ * Resolves the tooltip container class name for a cell.
+ *
+ * @param {GridCellData} cell The cell that may override the tooltip class.
+ * @returns {string} The tooltip class name to apply.
+ */
+export declare const resolveTooltipClassName: (cell: GridCellData) => string;

package/dist/cjs/components/TableSchedule/renderers.js

@@ -0,0 +1,138 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveTooltipClassName = exports.renderTooltipContent = exports.renderScheduleContent = exports.renderCellBoxContent = exports.renderRowHeaderContent = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const constants_1 = require("./constants");
+/**
+ * Checks whether a render value is a structured person-link object.
+ *
+ * @param {ReactNode | GridPersonLink} value The render value to inspect.
+ * @returns {value is GridPersonLink} True when the value matches the person-link contract.
+ */
+const isGridPersonLink = (value) => !!value && typeof value === 'object' && 'type' in value && value.type === 'person-link';
+/**
+ * Renders a person-link value as an external profile anchor when a destination URL exists.
+ *
+ * @param {GridPersonLink} person The person-link payload to render.
+ * @param {string} [userDetailPageUrl] The base URL used to build the person detail link.
+ * @returns {React.ReactNode} The rendered link node, or null when the person has no display name.
+ */
+const renderGridPersonLink = (person, userDetailPageUrl) => {
+    if (!person.name)
+        return null;
+    return (react_1.default.createElement("a", { className: 'group inline-flex items-center gap-1 whitespace-nowrap font-semibold text-gray-800 hover:text-blue-500', href: userDetailPageUrl && person.id ? `${userDetailPageUrl}${person.id}` : undefined, rel: 'noopener noreferrer', target: '_blank' },
+        react_1.default.createElement("span", null,
+            person.name,
+            person.code ? ` (${person.code})` : ''),
+        person.id && userDetailPageUrl && person.icon));
+};
+/**
+ * Renders a tooltip or schedule value that may contain raw nodes, a person link, or a list of person links.
+ *
+ * @param {ReactNode | GridPersonLink | GridPersonLink[]} value The value payload to render.
+ * @param {string} [userDetailPageUrl] The base URL used to build person detail links.
+ * @returns {React.ReactNode} The rendered value node.
+ */
+const renderRichValue = (value, userDetailPageUrl) => {
+    if (Array.isArray(value)) {
+        return (react_1.default.createElement("div", { className: 'flex flex-col gap-1' }, value.map((item, index) => (react_1.default.createElement("div", { key: index }, isGridPersonLink(item) ? renderGridPersonLink(item, userDetailPageUrl) : item)))));
+    }
+    return isGridPersonLink(value) ? renderGridPersonLink(value, userDetailPageUrl) : value;
+};
+/**
+ * Renders the content displayed inside a sticky row-header cell.
+ *
+ * @param {GridRowHeader} header The row-header configuration object.
+ * @returns {React.ReactNode} The rendered header content, or null when nothing is configured.
+ */
+const renderRowHeaderContent = (header) => {
+    if (header.content)
+        return header.content;
+    if (!header.headerContent)
+        return null;
+    const { title, description, align = 'left' } = header.headerContent;
+    return (react_1.default.createElement("div", { className: `${constants_1.ROW_HEADER_CONTENT_CLASSNAME} ${constants_1.ROW_HEADER_ALIGN_CLASSNAME[align]}` },
+        react_1.default.createElement("div", { className: constants_1.ROW_HEADER_TITLE_CLASSNAME }, title),
+        description && react_1.default.createElement("div", { className: constants_1.ROW_HEADER_DESCRIPTION_CLASSNAME }, description)));
+};
+exports.renderRowHeaderContent = renderRowHeaderContent;
+/**
+ * Renders the boxed visual treatment used by default-layout schedule cells.
+ *
+ * @param {GridCellData} cell The cell data to render.
+ * @returns {React.ReactNode} The boxed content node for the cell.
+ */
+const renderCellBoxContent = (cell) => {
+    var _a, _b;
+    return (react_1.default.createElement("div", { className: `${constants_1.CELL_BOX_BASE_CLASSNAME} ${constants_1.CELL_BOX_VARIANT_CLASSNAME[(_a = cell.variant) !== null && _a !== void 0 ? _a : 'default']}` },
+        react_1.default.createElement("span", { className: 'block w-full overflow-hidden text-ellipsis whitespace-nowrap' }, (_b = cell.content) !== null && _b !== void 0 ? _b : ' ')));
+};
+exports.renderCellBoxContent = renderCellBoxContent;
+/**
+ * Renders the rich schedule layout used by plain schedule cells.
+ *
+ * @param {GridScheduleContent} scheduleContent The structured schedule content to render.
+ * @param {string} [userDetailPageUrl] The base URL used to build person detail links.
+ * @returns {React.ReactNode} The rendered schedule content.
+ */
+const renderScheduleContent = (scheduleContent, userDetailPageUrl) => {
+    const { title, titleVariant = 'default', sections = [], emptyTitle = 'Trống', emptyDescription = 'Chưa xếp', } = scheduleContent;
+    if (!title && sections.length === 0) {
+        return (react_1.default.createElement("div", { className: constants_1.SCHEDULE_CELL_CLASSNAME },
+            react_1.default.createElement("div", { className: constants_1.SCHEDULE_EMPTY_TITLE_CLASSNAME }, emptyTitle),
+            react_1.default.createElement("div", { className: constants_1.SCHEDULE_EMPTY_DESCRIPTION_CLASSNAME }, emptyDescription)));
+    }
+    return (react_1.default.createElement("div", { className: constants_1.SCHEDULE_CELL_CLASSNAME },
+        title && (react_1.default.createElement("div", { className: titleVariant === 'dotted' ? constants_1.SCHEDULE_TITLE_DOTTED_CLASSNAME : constants_1.SCHEDULE_TITLE_CLASSNAME }, title)),
+        sections.map((section, sectionIndex) => (react_1.default.createElement("div", { key: sectionIndex, className: constants_1.SCHEDULE_SECTION_CLASSNAME },
+            section.label && (react_1.default.createElement("div", { className: constants_1.SCHEDULE_SECTION_LABEL_CLASSNAME },
+                section.labelPrefix,
+                react_1.default.createElement("span", null, section.label))),
+            section.items.map((item, itemIndex) => (react_1.default.createElement("div", { key: itemIndex, className: constants_1.SCHEDULE_SECTION_VALUE_CLASSNAME }, isGridPersonLink(item) ? renderGridPersonLink(item, userDetailPageUrl) : item))))))));
+};
+exports.renderScheduleContent = renderScheduleContent;
+/**
+ * Renders the grouped tooltip sections for a cell.
+ *
+ * @param {GridTooltipBlock[]} blocks The tooltip blocks to render.
+ * @param {string} [userDetailPageUrl] The base URL used to build person detail links.
+ * @returns {React.ReactNode} The rendered tooltip block list.
+ */
+const renderTooltipBlocks = (blocks, userDetailPageUrl) => (react_1.default.createElement("ul", { className: 'text-left' }, blocks.map((block, index) => {
+    var _a;
+    return (react_1.default.createElement("li", { key: index, className: index === 0 ? 'list-none' : 'mt-3 list-none border-t border-gray-200 pt-3' },
+        react_1.default.createElement("div", { className: constants_1.TOOLTIP_CONTENT_CLASSNAME },
+            block.title && react_1.default.createElement("div", { className: constants_1.TOOLTIP_TITLE_CLASSNAME }, block.title), (_a = block.sections) === null || _a === void 0 ? void 0 :
+            _a.map((section, sectionIndex) => (react_1.default.createElement("div", { key: sectionIndex, className: constants_1.TOOLTIP_SECTION_CLASSNAME },
+                react_1.default.createElement("span", { className: `${constants_1.TOOLTIP_LABEL_CLASSNAME} inline-flex items-center gap-1.5` },
+                    section.labelPrefix,
+                    react_1.default.createElement("span", null, section.label)),
+                react_1.default.createElement("span", { className: constants_1.TOOLTIP_VALUE_CLASSNAME }, renderRichValue(section.value, userDetailPageUrl))))))));
+})));
+/**
+ * Resolves and renders the tooltip content for a data cell.
+ *
+ * @param {GridCellData} cell The cell whose tooltip content should be rendered.
+ * @param {string} [userDetailPageUrl] The base URL used to build person detail links.
+ * @returns {React.ReactNode} The tooltip content, or null when the cell has no tooltip payload.
+ */
+const renderTooltipContent = (cell, userDetailPageUrl) => {
+    if (cell.tooltip)
+        return cell.tooltip;
+    if (cell.tooltipBlocks && cell.tooltipBlocks.length > 0) {
+        return renderTooltipBlocks(cell.tooltipBlocks, userDetailPageUrl);
+    }
+    return null;
+};
+exports.renderTooltipContent = renderTooltipContent;
+/**
+ * Resolves the tooltip container class name for a cell.
+ *
+ * @param {GridCellData} cell The cell that may override the tooltip class.
+ * @returns {string} The tooltip class name to apply.
+ */
+const resolveTooltipClassName = (cell) => { var _a; return (_a = cell.tooltipClassName) !== null && _a !== void 0 ? _a : constants_1.DEFAULT_TOOLTIP_CLASSNAME; };
+exports.resolveTooltipClassName = resolveTooltipClassName;
+//# sourceMappingURL=renderers.js.map

package/dist/cjs/components/TableSchedule/renderers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderers.js","sourceRoot":"","sources":["../../../../src/components/TableSchedule/renderers.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/components/TableSchedule/types.d.ts

@@ -0,0 +1,112 @@
+import { ComponentType, CSSProperties, ReactNode } from 'react';
+export type GridCellVariant = 'default' | 'moving' | 'trogiang' | 'empty';
+export type GridPersonLink = {
+    type: 'person-link';
+    id?: number | string | null;
+    name?: ReactNode;
+    code?: ReactNode;
+    icon?: ReactNode;
+};
+export type GridTooltipSection = {
+    label: ReactNode;
+    labelPrefix?: ReactNode;
+    value: ReactNode | GridPersonLink | GridPersonLink[];
+};
+export type GridTooltipBlock = {
+    title?: ReactNode;
+    sections?: GridTooltipSection[];
+};
+export type GridCellLayout = 'boxed' | 'plain';
+export type GridScheduleTitleVariant = 'default' | 'dotted';
+export type GridRowHeaderAlign = 'left' | 'center' | 'right';
+export type GridScheduleSection = {
+    label?: ReactNode;
+    labelPrefix?: ReactNode;
+    items: Array<ReactNode | GridPersonLink>;
+};
+export type GridScheduleContent = {
+    title?: ReactNode;
+    titleVariant?: GridScheduleTitleVariant;
+    sections?: GridScheduleSection[];
+    emptyTitle?: ReactNode;
+    emptyDescription?: ReactNode;
+};
+export type GridCellData = {
+    content?: ReactNode;
+    variant?: GridCellVariant;
+    layout?: GridCellLayout;
+    scheduleContent?: GridScheduleContent;
+    tooltipBlocks?: GridTooltipBlock[];
+    tooltip?: ReactNode;
+    tooltipClassName?: string;
+    cellStyle?: CSSProperties;
+    cellClassName?: string;
+    colSpan?: number;
+    rowSpan?: number;
+    disabled?: boolean;
+    data?: unknown;
+};
+export type GridRowHeaderContent = {
+    title: ReactNode;
+    description?: ReactNode;
+    align?: GridRowHeaderAlign;
+};
+export type GridRowHeader = {
+    content?: ReactNode;
+    headerContent?: GridRowHeaderContent;
+    rowSpan?: number;
+    width?: number;
+    className?: string;
+    style?: CSSProperties;
+};
+export type GridColumnAlign = 'left' | 'center' | 'right';
+export type GridColumn = {
+    key: string;
+    header: ReactNode;
+    minWidth?: number;
+    align?: GridColumnAlign;
+};
+export type GridHeaderGroup = {
+    header: ReactNode;
+    columnKeys: string[];
+};
+export type TooltipComponentType = ComponentType<{
+    content: ReactNode;
+    contentClassName?: string;
+    children: ReactNode;
+}>;
+export type ButtonComponentType = ComponentType<{
+    tertiary?: boolean;
+    noPadding?: boolean;
+    className?: string;
+    onClick?: () => void;
+    children?: ReactNode;
+}>;
+export type ScheduleTableRow = {
+    rowHeader?: GridRowHeader;
+    rowHeaders?: Array<GridRowHeader | null>;
+    cells: Record<string, GridCellData>;
+};
+export type GridLegendItem = {
+    label: ReactNode;
+    variant?: GridCellVariant;
+    indicatorClassName?: string;
+};
+export type PHXScheduleTableProps = {
+    columns: GridColumn[];
+    headerGroups?: GridHeaderGroup[];
+    rows: ScheduleTableRow[];
+    onCellClick?: (params: {
+        rowIndex: number;
+        columnKey: string;
+        cellData: GridCellData;
+    }) => void;
+    stickyColumnWidth?: number;
+    stickyColumnWidths?: number[];
+    defaultCellLayout?: GridCellLayout;
+    legendItems?: GridLegendItem[];
+    userDetailPageUrl?: string;
+    className?: string;
+    TooltipComponent?: TooltipComponentType;
+    ButtonComponent?: ButtonComponentType;
+};

package/dist/cjs/components/TableSchedule/types.js

@@ -0,0 +1,4 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/TableSchedule/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/components/TableSchedule/types.ts"],"names":[],"mappings":";AAAA,YAAY,CAAA"}