@moneyforward/mfui-components 2.48.1

package/dist/cjs/src/DisplayTable/DisplayTable.js

@@ -0,0 +1,103 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTable = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DisplayTableProvider_1 = require("./DisplayTableProvider");
+const recipes_1 = require("../../styled-system/recipes");
+const DisplayTableBody_1 = require("./DisplayTableBody");
+const DisplayTableCell_1 = require("./DisplayTableCell");
+const DisplayTableHeader_1 = require("./DisplayTableHeader");
+const DisplayTableHeaderCell_1 = require("./DisplayTableHeaderCell");
+const DisplayTableHeaderRow_1 = require("./DisplayTableHeaderRow");
+const DisplayTableRow_1 = require("./DisplayTableRow");
+const css_1 = require("../../styled-system/css");
+const Heading_1 = require("../Heading");
+const Typography_1 = require("../Typography");
+function Base({ title, titleTag = 'h4', lead, className, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, wrapperProps, ...props }) {
+    const classes = (0, recipes_1.displayTableSlotRecipe)({ fixedHeader });
+    return ((0, jsx_runtime_1.jsx)(DisplayTableProvider_1.DisplayTableProvider, { fixedHeader: fixedHeader, leftFixedColumnIndex: leftFixedColumnIndex, rightFixedColumnIndex: rightFixedColumnIndex, children: (0, jsx_runtime_1.jsxs)("div", { ...wrapperProps, className: (0, css_1.cx)(classes.wrapper, 'mfui-DisplayTable__wrapper', wrapperProps?.className), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, css_1.cx)(classes.header, 'mfui-DisplayTable__header'), children: [(0, jsx_runtime_1.jsx)(Heading_1.Heading, { variant: "sectionHeading2", tag: titleTag, className: (0, css_1.cx)(classes.title, 'mfui-DisplayTable__title'), children: title }), lead ? ((0, jsx_runtime_1.jsx)(Typography_1.Typography, { tag: "p", className: (0, css_1.cx)(classes.lead, 'mfui-DisplayTable__lead'), children: lead })) : null] }), (0, jsx_runtime_1.jsx)("div", { className: (0, css_1.cx)(classes.body, 'mfui-DisplayTable__body'), children: (0, jsx_runtime_1.jsx)("table", { className: (0, css_1.cx)(classes.table, 'mfui-DisplayTable__table', className), ...props }) })] }) }));
+}
+/**
+ * The `DisplayTable` component.
+ *
+ * It renders a `table` element.
+ * This component should be used as a wrapper for all DisplayTable composition components.
+ * The composition components are provided as sub-components of DisplayTable.
+ * You can use them as follows:
+ *
+ * @example
+ * ```jsx
+ * <DisplayTable title="My Table" lead="Table lead text">
+ *     <DisplayTable.HeaderRow>
+ *       <DisplayTable.HeaderCell>Header 1</DisplayTable.HeaderCell>
+ *       <DisplayTable.HeaderCell>Header 2</DisplayTable.HeaderCell>
+ *     </DisplayTable.HeaderRow>
+ *   </DisplayTable.Header>
+ *   </DisplayTable.Body>
+ *     <DisplayTable.Row>
+ *       <DisplayTable.Cell>Cell 1</DisplayTable.Cell>
+ *       <DisplayTable.Cell>Cell 2</DisplayTable.Cell>
+ *     </DisplayTable.Row>
+ *   </DisplayTable.Body>
+ * </DisplayTable>
+ * ```
+ */
+exports.DisplayTable = Object.assign(Base, {
+    /**
+     * The `DisplayTableBody` component.
+     * This component should be used inside the `DisplayTable` component.
+     *
+     * It renders and extends the props of `tbody` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+     */
+    Body: DisplayTableBody_1.DisplayTableBody,
+    /**
+     * The `DisplayTableCell` component.
+     * This component should be used inside the `DisplayTable` component.
+     *
+     * It renders and extends the props of `td` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+     */
+    Cell: DisplayTableCell_1.DisplayTableCell,
+    /**
+     * The `DisplayTableHeader` component.
+     * This component should be used inside the `DisplayTable` component.
+     *
+     * If the `fixedHeader` prop of the `DisplayTable` component is `true`, it will be sticky on the top of the table while scrolling.
+     *
+     * It renders and extends the props of `thead` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+     */
+    Header: DisplayTableHeader_1.DisplayTableHeader,
+    /**
+     * The `DisplayTableHeaderCell` component.
+     * This component should be used inside the `DisplayTable` component.
+     *
+     * It renders and extends the props of `th` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+     */
+    HeaderCell: DisplayTableHeaderCell_1.DisplayTableHeaderCell,
+    /**
+     * The `DisplayTableHeaderRow` component.
+     * This component should be used inside the `DisplayTable` component.
+     *
+     * It renders and extends the props of `tr` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+     */
+    HeaderRow: DisplayTableHeaderRow_1.DisplayTableHeaderRow,
+    /**
+     * The `DisplayTableRow` component.
+     * This component should be used inside the `DisplayTable` component.
+     *
+     * It renders and extends the props of `tr` element.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+     */
+    Row: DisplayTableRow_1.DisplayTableRow,
+});

package/dist/cjs/src/DisplayTable/DisplayTable.types.d.ts

@@ -0,0 +1,77 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type HeadingProps } from '../Heading';
+export type CellDataType = 'text' | 'amount';
+/**
+ * The props for the `DisplayTable` component.
+ *
+ * It extends the general attributes of `table` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table
+ */
+export type DisplayTableProps = {
+    /**
+     * The title of the table.
+     * This is used to provide a title for the table.
+     * The title is displayed above the table.
+     */
+    title: string;
+    /**
+     * The tag of the title.
+     * This is used to determine the HTML tag to be used for the title.
+     * It can be any valid HTML heading tag, such as `h1`, `h2`, `h3`, etc.
+     *
+     * @default 'h4'
+     */
+    titleTag?: HeadingProps['tag'];
+    /**
+     * The lead text of the table.
+     * This is used to provide additional information about the table.
+     * The lead text is displayed above the table and under the title.
+     */
+    lead?: string;
+    /**
+     * Whether the header is fixed when scrolling horizontally.
+     * If `true`, the header will be sticky.
+     *
+     * @default false
+     */
+    fixedHeader?: boolean;
+    /**
+     * The index of the column to fix on the left side.
+     * It should be started from 0.
+     *
+     * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
+     * please add `table-layout: fixed` to the DisplayTable and specify the width of the each column.
+     *
+     * @default undefined
+     */
+    leftFixedColumnIndex?: number;
+    /**
+     * The index of the column to fix on the right side.
+     * It should be started from 0.
+     *
+     * If the fixed column width might be changed with any interaction, such as disclosure, removing row or translating,
+     * please add `table-layout: fixed` to the DisplayTable and specify the width of the each column.
+     *
+     * @default undefined
+     */
+    rightFixedColumnIndex?: number;
+    /**
+     * The props for the wrapper element of the table.
+     *
+     * The DisplayTable component is wrapped with a `div` element.
+     *
+     * ```tsx
+     * <div {...wrapperProps}>
+     *   <table {...props}>
+     *     ...
+     *   </table>
+     * </div>
+     * ```
+     *
+     * Currently supported props are below.
+     *
+     * @property className - The class name of the wrapper element.
+     */
+    wrapperProps?: Pick<ComponentPropsWithoutRef<'div'>, 'className'>;
+} & ComponentPropsWithoutRef<'table'>;

package/dist/cjs/src/DisplayTable/DisplayTable.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DisplayTable/DisplayTableBody/DisplayTableBody.d.ts

@@ -0,0 +1,2 @@
+import { type DisplayTableBodyProps } from './DisplayTableBody.types';
+export declare function DisplayTableBody({ className, ...props }: DisplayTableBodyProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DisplayTable/DisplayTableBody/DisplayTableBody.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableBody = DisplayTableBody;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const recipes_1 = require("../../../styled-system/recipes");
+const css_1 = require("../../../styled-system/css");
+function DisplayTableBody({ className, ...props }) {
+    const classes = (0, recipes_1.displayTableBodySlotRecipe)();
+    return (0, jsx_runtime_1.jsx)("tbody", { className: (0, css_1.cx)(classes.root, 'mfui-DisplayTableBody__root', className), ...props });
+}

package/dist/cjs/src/DisplayTable/DisplayTableBody/DisplayTableBody.types.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The props for the `DisplayTableBody` component.
+ *
+ * It extends the general attributes of `tbody` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tbody
+ */
+export type DisplayTableBodyProps = ComponentPropsWithoutRef<'tbody'>;

package/dist/cjs/src/DisplayTable/DisplayTableBody/DisplayTableBody.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DisplayTable/DisplayTableBody/index.d.ts

@@ -0,0 +1,2 @@
+export { DisplayTableBody } from './DisplayTableBody';
+export type { DisplayTableBodyProps } from './DisplayTableBody.types';

package/dist/cjs/src/DisplayTable/DisplayTableBody/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableBody = void 0;
+var DisplayTableBody_1 = require("./DisplayTableBody");
+Object.defineProperty(exports, "DisplayTableBody", { enumerable: true, get: function () { return DisplayTableBody_1.DisplayTableBody; } });

package/dist/cjs/src/DisplayTable/DisplayTableCell/DisplayTableCell.d.ts

@@ -0,0 +1,2 @@
+import { type DisplayTableCellProps } from './DisplayTableCell.types';
+export declare function DisplayTableCell({ children, className, depth, columnIndex, style, type, isTotal, ...props }: DisplayTableCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DisplayTable/DisplayTableCell/DisplayTableCell.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableCell = DisplayTableCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const recipes_1 = require("../../../styled-system/recipes");
+const Typography_1 = require("../../Typography");
+const DisplayTableProvider_1 = require("../DisplayTableProvider");
+const css_1 = require("../../../styled-system/css");
+const useFixedColumns_1 = require("../../utilities/dom/useFixedColumns");
+function DisplayTableCell({ children, className, depth = '0', columnIndex, style, type = 'text', isTotal = false, ...props }) {
+    const { leftFixedColumnIndex, rightFixedColumnIndex } = (0, DisplayTableProvider_1.useDisplayTableContext)();
+    const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = (0, useFixedColumns_1.useFixedColumns)({
+        columnIndex,
+        leftFixedColumnIndex,
+        rightFixedColumnIndex,
+    });
+    const classes = (0, recipes_1.displayTableCellSlotRecipe)({
+        type,
+        depth,
+        fixedColumn: isFixedColumn,
+        edgeFixedColumn: isEdgeFixedColumn,
+    });
+    const getTypographyVariant = () => {
+        if (isTotal) {
+            return type === 'amount' ? 'strongAmount' : 'strongBody';
+        }
+        return type === 'amount' ? 'amount' : 'body';
+    };
+    // Determine if the cell is a row header
+    // Row headers are fixed columns on the left side
+    const isRowHeader = isFixedColumn && isEdgeFixedColumn === 'left';
+    const Tag = isRowHeader ? 'th' : 'td';
+    return ((0, jsx_runtime_1.jsx)(Tag, { ref: cellRef, className: (0, css_1.cx)(classes.root, 'mfui-DisplayTableCell__root', className), style: { ...style, ...fixedPositionStyles }, ...props, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: getTypographyVariant(), children: children }) }));
+}

package/dist/cjs/src/DisplayTable/DisplayTableCell/DisplayTableCell.types.d.ts

@@ -0,0 +1,43 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type CellDataType } from '../DisplayTable.types';
+import { type DisplayTableCellSlotRecipeVariantProps } from '../../../styled-system/recipes';
+/**
+ * The props for the `DisplayTableCell` component.
+ *
+ * It extends the general attributes of `td` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
+ */
+export type DisplayTableCellProps = {
+    /**
+     * The depth of the DisplayTable.
+     * padding-left is applied based on the depth.
+     *
+     * @default '0'
+     */
+    depth?: DisplayTableCellSlotRecipeVariantProps['depth'];
+    /**
+     * **Do not pass this prop manually.**
+     *
+     * The index of this cell in its row.
+     * Used for determining if the cell should be fixed.
+     *
+     * @default undefined
+     */
+    columnIndex?: number;
+    /**
+     * The type of the cell data.
+     * Used for determining how to render the cell content.
+     *
+     * @default 'text'
+     */
+    type?: CellDataType;
+    /**
+     * The flag indicating if this row is a total row.
+     * If `true`, the row will be styled as a total row.
+     * This is used to highlight the total row in the table.
+     *
+     * @default false
+     */
+    isTotal?: boolean;
+} & ComponentPropsWithoutRef<'td'>;

package/dist/cjs/src/DisplayTable/DisplayTableCell/DisplayTableCell.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DisplayTable/DisplayTableCell/index.d.ts

@@ -0,0 +1,2 @@
+export { DisplayTableCell } from './DisplayTableCell';
+export type { DisplayTableCellProps } from './DisplayTableCell.types';

package/dist/cjs/src/DisplayTable/DisplayTableCell/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableCell = void 0;
+var DisplayTableCell_1 = require("./DisplayTableCell");
+Object.defineProperty(exports, "DisplayTableCell", { enumerable: true, get: function () { return DisplayTableCell_1.DisplayTableCell; } });

package/dist/cjs/src/DisplayTable/DisplayTableHeader/DisplayTableHeader.d.ts

@@ -0,0 +1,2 @@
+import { type DisplayTableHeaderProps } from './DisplayTableHeader.types';
+export declare function DisplayTableHeader({ children, className, ...props }: DisplayTableHeaderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DisplayTable/DisplayTableHeader/DisplayTableHeader.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableHeader = DisplayTableHeader;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const recipes_1 = require("../../../styled-system/recipes");
+const DisplayTableProvider_1 = require("../DisplayTableProvider");
+const css_1 = require("../../../styled-system/css");
+function DisplayTableHeader({ children, className, ...props }) {
+    const { fixedHeader } = (0, DisplayTableProvider_1.useDisplayTableContext)();
+    const classes = (0, recipes_1.displayTableHeaderSlotRecipe)({ fixedHeader });
+    return ((0, jsx_runtime_1.jsx)("thead", { className: (0, css_1.cx)(classes.root, 'mfui-DisplayTableHeader__root', className), ...props, children: children }));
+}

package/dist/cjs/src/DisplayTable/DisplayTableHeader/DisplayTableHeader.types.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The props for the `DisplayTableHeader` component.
+ *
+ * It extends the general attributes of `thead` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/thead
+ */
+export type DisplayTableHeaderProps = ComponentPropsWithoutRef<'thead'>;

package/dist/cjs/src/DisplayTable/DisplayTableHeader/DisplayTableHeader.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DisplayTable/DisplayTableHeader/index.d.ts

@@ -0,0 +1,2 @@
+export { DisplayTableHeader } from './DisplayTableHeader';
+export type { DisplayTableHeaderProps } from './DisplayTableHeader.types';

package/dist/cjs/src/DisplayTable/DisplayTableHeader/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableHeader = void 0;
+var DisplayTableHeader_1 = require("./DisplayTableHeader");
+Object.defineProperty(exports, "DisplayTableHeader", { enumerable: true, get: function () { return DisplayTableHeader_1.DisplayTableHeader; } });

package/dist/cjs/src/DisplayTable/DisplayTableHeaderCell/DisplayTableHeaderCell.d.ts

@@ -0,0 +1,2 @@
+import { type DisplayTableHeaderCellProps } from './DisplayTableHeaderCell.types';
+export declare function DisplayTableHeaderCell({ type, children, className, columnIndex, ...props }: DisplayTableHeaderCellProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DisplayTable/DisplayTableHeaderCell/DisplayTableHeaderCell.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableHeaderCell = DisplayTableHeaderCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const recipes_1 = require("../../../styled-system/recipes");
+const Typography_1 = require("../../Typography");
+const DisplayTableProvider_1 = require("../DisplayTableProvider");
+const css_1 = require("../../../styled-system/css");
+const useFixedColumns_1 = require("../../utilities/dom/useFixedColumns");
+function DisplayTableHeaderCell({ type, children, className, columnIndex, ...props }) {
+    const { leftFixedColumnIndex, rightFixedColumnIndex } = (0, DisplayTableProvider_1.useDisplayTableContext)();
+    const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = (0, useFixedColumns_1.useFixedColumns)({
+        columnIndex,
+        leftFixedColumnIndex,
+        rightFixedColumnIndex,
+    });
+    const classes = (0, recipes_1.displayTableHeaderCellSlotRecipe)({
+        type,
+        fixedColumn: isFixedColumn,
+        edgeFixedColumn: isEdgeFixedColumn,
+    });
+    return ((0, jsx_runtime_1.jsx)("th", { ref: cellRef, className: (0, css_1.cx)(classes.root, 'mfui-DisplayTableHeaderCell__root', className), style: fixedPositionStyles, ...props, children: (0, jsx_runtime_1.jsx)(Typography_1.Typography, { variant: "strongBody", children: children }) }));
+}

package/dist/cjs/src/DisplayTable/DisplayTableHeaderCell/DisplayTableHeaderCell.types.d.ts

@@ -0,0 +1,27 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type CellDataType } from '../DisplayTable.types';
+/**
+ * The props for the `DisplayTableHeaderCell` component.
+ *
+ * It extends the general attributes of `th` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
+ */
+export type DisplayTableHeaderCellProps = {
+    /**
+     * **Do not pass this prop manually.**
+     *
+     * The index of this cell in its row.
+     * Used for determining if the cell should be fixed.
+     *
+     * @default undefined
+     */
+    columnIndex?: number;
+    /**
+     * The type of the cell data.
+     * Used for determining how to render the cell content.
+     *
+     * @default 'text'
+     */
+    type?: CellDataType;
+} & ComponentPropsWithoutRef<'th'>;

package/dist/cjs/src/DisplayTable/DisplayTableHeaderCell/DisplayTableHeaderCell.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DisplayTable/DisplayTableHeaderCell/index.d.ts

@@ -0,0 +1,2 @@
+export { DisplayTableHeaderCell } from './DisplayTableHeaderCell';
+export type { DisplayTableHeaderCellProps } from './DisplayTableHeaderCell.types';

package/dist/cjs/src/DisplayTable/DisplayTableHeaderCell/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableHeaderCell = void 0;
+var DisplayTableHeaderCell_1 = require("./DisplayTableHeaderCell");
+Object.defineProperty(exports, "DisplayTableHeaderCell", { enumerable: true, get: function () { return DisplayTableHeaderCell_1.DisplayTableHeaderCell; } });

package/dist/cjs/src/DisplayTable/DisplayTableHeaderRow/DisplayTableHeaderRow.d.ts

@@ -0,0 +1,2 @@
+import { type DisplayTableHeaderRowProps } from './DisplayTableHeaderRow.types';
+export declare function DisplayTableHeaderRow({ children, className, ...props }: DisplayTableHeaderRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DisplayTable/DisplayTableHeaderRow/DisplayTableHeaderRow.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableHeaderRow = DisplayTableHeaderRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../../styled-system/recipes");
+const DisplayTableHeaderCell_1 = require("../DisplayTableHeaderCell");
+const css_1 = require("../../../styled-system/css");
+const isComponentOrWrapped_1 = require("../../utilities/react/isComponentOrWrapped");
+function DisplayTableHeaderRow({ children, className, ...props }) {
+    const classes = (0, recipes_1.displayTableHeaderRowSlotRecipe)();
+    return ((0, jsx_runtime_1.jsx)("tr", { className: (0, css_1.cx)(classes.root, 'mfui-DisplayTableHeaderRow__root', className), ...props, children: react_1.Children.map(children, (child, index) => {
+            if (!(0, react_1.isValidElement)(child)) {
+                return child;
+            }
+            if ((0, isComponentOrWrapped_1.isComponentOrWrapped)(child, DisplayTableHeaderCell_1.DisplayTableHeaderCell)) {
+                return (0, react_1.cloneElement)(child, { columnIndex: index });
+            }
+            return child;
+        }) }));
+}

package/dist/cjs/src/DisplayTable/DisplayTableHeaderRow/DisplayTableHeaderRow.types.d.ts

@@ -0,0 +1,9 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The props for the `DisplayTableHeaderRow` component.
+ *
+ * It extends the general attributes of `tr` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+ */
+export type DisplayTableHeaderRowProps = ComponentPropsWithoutRef<'tr'>;

package/dist/cjs/src/DisplayTable/DisplayTableHeaderRow/DisplayTableHeaderRow.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DisplayTable/DisplayTableHeaderRow/index.d.ts

@@ -0,0 +1,2 @@
+export { DisplayTableHeaderRow } from './DisplayTableHeaderRow';
+export type { DisplayTableHeaderRowProps } from './DisplayTableHeaderRow.types';

package/dist/cjs/src/DisplayTable/DisplayTableHeaderRow/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableHeaderRow = void 0;
+var DisplayTableHeaderRow_1 = require("./DisplayTableHeaderRow");
+Object.defineProperty(exports, "DisplayTableHeaderRow", { enumerable: true, get: function () { return DisplayTableHeaderRow_1.DisplayTableHeaderRow; } });

package/dist/cjs/src/DisplayTable/DisplayTableProvider.d.ts

@@ -0,0 +1,22 @@
+import { type PropsWithChildren } from 'react';
+import { type DisplayTableProps } from './DisplayTable.types';
+/**
+ * The props for the `DisplayTableContext` component.
+ */
+export type DisplayTableContextProps = Pick<DisplayTableProps, 'fixedHeader' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex'>;
+/**
+ * The context for the `DisplayTable` component.
+ *
+ * This should only be used in DisplayTable component.
+ */
+export declare const DisplayTableContext: import("react").Context<DisplayTableContextProps>;
+/**
+ * The hook to use the `DisplayTableContext`.
+ */
+export declare const useDisplayTableContext: () => DisplayTableContextProps;
+/**
+ * The provider for the `DisplayTableContext`.
+ *
+ * This should only be used in DisplayTable component.
+ */
+export declare function DisplayTableProvider({ children, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, }: PropsWithChildren<DisplayTableContextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DisplayTable/DisplayTableProvider.js

@@ -0,0 +1,35 @@
+"use strict";
+'use client';
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDisplayTableContext = exports.DisplayTableContext = void 0;
+exports.DisplayTableProvider = DisplayTableProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+/**
+ * The context for the `DisplayTable` component.
+ *
+ * This should only be used in DisplayTable component.
+ */
+exports.DisplayTableContext = (0, react_1.createContext)({
+    fixedHeader: false,
+    leftFixedColumnIndex: undefined,
+    rightFixedColumnIndex: undefined,
+});
+/**
+ * The hook to use the `DisplayTableContext`.
+ */
+const useDisplayTableContext = () => (0, react_1.useContext)(exports.DisplayTableContext);
+exports.useDisplayTableContext = useDisplayTableContext;
+/**
+ * The provider for the `DisplayTableContext`.
+ *
+ * This should only be used in DisplayTable component.
+ */
+function DisplayTableProvider({ children, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, }) {
+    const contextValue = (0, react_1.useMemo)(() => ({
+        fixedHeader,
+        leftFixedColumnIndex,
+        rightFixedColumnIndex,
+    }), [fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex]);
+    return (0, jsx_runtime_1.jsx)(exports.DisplayTableContext.Provider, { value: contextValue, children: children });
+}

package/dist/cjs/src/DisplayTable/DisplayTableRow/DisplayTableRow.d.ts

@@ -0,0 +1,2 @@
+import { type DisplayTableRowProps } from './DisplayTableRow.types';
+export declare function DisplayTableRow({ children, className, isTotal, ...props }: DisplayTableRowProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/src/DisplayTable/DisplayTableRow/DisplayTableRow.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableRow = DisplayTableRow;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const recipes_1 = require("../../../styled-system/recipes");
+const DisplayTableCell_1 = require("../DisplayTableCell");
+const css_1 = require("../../../styled-system/css");
+const isComponentOrWrapped_1 = require("../../utilities/react/isComponentOrWrapped");
+function DisplayTableRow({ children, className, isTotal = false, ...props }) {
+    const classes = (0, recipes_1.displayTableRowSlotRecipe)({ isTotal });
+    return ((0, jsx_runtime_1.jsx)("tr", { className: (0, css_1.cx)(classes.root, 'mfui-DisplayTableRow__root', className), ...props, children: react_1.Children.map(children, (child, index) => {
+            if (!(0, react_1.isValidElement)(child)) {
+                return child;
+            }
+            if ((0, isComponentOrWrapped_1.isComponentOrWrapped)(child, DisplayTableCell_1.DisplayTableCell)) {
+                return (0, react_1.cloneElement)(child, { columnIndex: index, isTotal });
+            }
+            return child;
+        }) }));
+}

package/dist/cjs/src/DisplayTable/DisplayTableRow/DisplayTableRow.types.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentPropsWithoutRef } from 'react';
+/**
+ * The props for the `DisplayTableRow` component.
+ *
+ * It extends the general attributes of `tr` element.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
+ */
+export type DisplayTableRowProps = {
+    /**
+     * The flag indicating if this row is a total row.
+     * If `true`, the row will be styled as a total row.
+     * This is used to highlight the total row in the table.
+     *
+     * @default false
+     */
+    isTotal?: boolean;
+} & ComponentPropsWithoutRef<'tr'>;

package/dist/cjs/src/DisplayTable/DisplayTableRow/DisplayTableRow.types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/cjs/src/DisplayTable/DisplayTableRow/index.d.ts

@@ -0,0 +1,2 @@
+export { DisplayTableRow } from './DisplayTableRow';
+export type { DisplayTableRowProps } from './DisplayTableRow.types';

package/dist/cjs/src/DisplayTable/DisplayTableRow/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTableRow = void 0;
+var DisplayTableRow_1 = require("./DisplayTableRow");
+Object.defineProperty(exports, "DisplayTableRow", { enumerable: true, get: function () { return DisplayTableRow_1.DisplayTableRow; } });

package/dist/cjs/src/DisplayTable/index.d.ts

@@ -0,0 +1,8 @@
+export { DisplayTable } from './DisplayTable';
+export type { DisplayTableProps } from './DisplayTable.types';
+export type { DisplayTableBodyProps } from './DisplayTableBody';
+export type { DisplayTableCellProps } from './DisplayTableCell';
+export type { DisplayTableHeaderProps } from './DisplayTableHeader';
+export type { DisplayTableHeaderCellProps } from './DisplayTableHeaderCell';
+export type { DisplayTableHeaderRowProps } from './DisplayTableHeaderRow';
+export type { DisplayTableRowProps } from './DisplayTableRow';

package/dist/cjs/src/DisplayTable/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DisplayTable = void 0;
+var DisplayTable_1 = require("./DisplayTable");
+Object.defineProperty(exports, "DisplayTable", { enumerable: true, get: function () { return DisplayTable_1.DisplayTable; } });