@moneyforward/mfui-components 3.6.0 → 3.8.0

package/dist/src/{DataGrid/DataGridCell/DataGridCell.types.d.ts → DataTable/DataTableCell/DataTableCell.types.d.ts}

@@ -1,13 +1,13 @@
 import { type ComponentPropsWithRef } from 'react';
-import { type CellDataType } from '../DataGrid.types';
+import { type CellDataType } from '../DataTable.types';
 /**
- * The props for the `DataGridCell` component.
+ * The props for the `DataTableCell` component.
  *
  * It extends the general attributes of `td` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td
  */
-export type DataGridCellProps = {
+export type DataTableCellProps = {
     /**
      * The type of the cell data.
      * Used for determining how to align the cell content.
@@ -20,10 +20,10 @@ export type DataGridCellProps = {
      * @example
      * ```tsx
      * // For standard text columns
-     * <DataGrid.Cell>John Doe</DataGrid.Cell>
+     * <DataTable.Cell>John Doe</DataTable.Cell>
      *
      * // For amount/balance columns
-     * <DataGrid.Cell type="amount">¥125,000</DataGrid.Cell>
+     * <DataTable.Cell type="amount">¥125,000</DataTable.Cell>
      * ```
      */
     type?: CellDataType;
@@ -38,7 +38,7 @@ export type DataGridCellProps = {
      * **Do not pass this prop manually.**
      *
      * Indicates whether the row containing this cell is highlighted.
-     * This prop is automatically passed down from the DataGridRow component.
+     * This prop is automatically passed down from the DataTableRow component.
      *
      * @default false
      */
@@ -47,13 +47,13 @@ export type DataGridCellProps = {
      * **Do not pass this prop manually.**
      *
      * Indicates whether the cell is disabled.
-     * This prop is automatically passed down from the DataGridRow component.
+     * This prop is automatically passed down from the DataTableRow component.
      *
      * @default false
      */
     disabled?: boolean;
     /**
-     * The depth of the DataGrid.
+     * The depth of the DataTable.
      * padding-left is applied based on the depth.
      *
      * @default 0

package/dist/src/DataTable/DataTableCell/index.d.ts

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

package/dist/src/DataTable/DataTableCell/index.js

@@ -0,0 +1 @@
+export { DataTableCell } from './DataTableCell';

package/dist/src/DataTable/DataTableHeader/DataTableHeader.d.ts

@@ -0,0 +1 @@
+export declare const DataTableHeader: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref"> & import("react").RefAttributes<HTMLTableSectionElement>>;

package/dist/src/DataTable/DataTableHeader/DataTableHeader.js

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { dataTableHeaderSlotRecipe } from '../../../styled-system/recipes';
+import { useDataTableContext } from '../DataTableProvider';
+import { cx } from '../../../styled-system/css';
+export const DataTableHeader = forwardRef(({ children, className, ...props }, ref) => {
+    const { fixedHeader } = useDataTableContext();
+    const classes = dataTableHeaderSlotRecipe({ fixedHeader });
+    return (_jsx("thead", { className: cx(classes.root, 'mfui-DataTableHeader__root', 
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeader__root', className), ...props, ref: ref, children: children }));
+});
+DataTableHeader.displayName = 'DataTableHeader';

package/dist/src/{DataGrid/DataGridHeader/DataGridHeader.types.d.ts → DataTable/DataTableHeader/DataTableHeader.types.d.ts}

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

package/dist/src/DataTable/DataTableHeader/index.d.ts

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

package/dist/src/DataTable/DataTableHeader/index.js

@@ -0,0 +1 @@
+export { DataTableHeader } from './DataTableHeader';

package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.d.ts

@@ -0,0 +1,2 @@
+import { type DataTableHeaderCellProps } from './DataTableHeaderCell.types';
+export declare const DataTableHeaderCell: import("react").ForwardRefExoticComponent<Omit<DataTableHeaderCellProps, "ref"> & import("react").RefAttributes<HTMLTableCellElement>>;

package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SortAscending, SortDescending, SortUnsorted } from '@moneyforward/mfui-icons-react';
+import { forwardRef } from 'react';
+import { FocusIndicator } from '../../FocusIndicator';
+import { dataTableHeaderCellSlotRecipe } from '../../../styled-system/recipes';
+import { Typography } from '../../Typography';
+import { useDataTableContext } from '../DataTableProvider';
+import { cx } from '../../../styled-system/css';
+import { useFixedColumns } from '../../utilities/dom/useFixedColumns';
+import { handleCheckboxCellClick } from '../utils/handleCheckbox';
+import { mergeRefs } from '../../utilities/dom/mergeRefs';
+export const DataTableHeaderCell = forwardRef(({ children, type = 'text', sortButtonProps, sortOrder, ascendingIconProps, descendingIconProps, unsortedIconProps, className, columnIndex, disabled = false, ...props }, ref) => {
+    const { size, leftFixedColumnIndex, rightFixedColumnIndex, enableRowSelection } = useDataTableContext();
+    const { cellRef, isFixedColumn, isEdgeFixedColumn, fixedPositionStyles } = useFixedColumns({
+        enableRowSelection,
+        columnIndex,
+        leftFixedColumnIndex,
+        rightFixedColumnIndex,
+    });
+    const classes = dataTableHeaderCellSlotRecipe({
+        size,
+        type,
+        fixedColumn: isFixedColumn,
+        edgeFixedColumn: isEdgeFixedColumn,
+        isCheckboxCell: enableRowSelection && columnIndex === 0,
+    });
+    const isCheckboxCell = enableRowSelection && columnIndex === 0;
+    const isStringChild = typeof children === 'string';
+    const sortIcon = (() => {
+        if (!sortOrder) {
+            return (_jsx(SortUnsorted, { className: cx(classes.unsortedIcon, 'mfui-DataTableHeaderCell__unsortedIcon', 
+                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__unsortedIcon'), "aria-label": unsortedIconProps?.['aria-label'] ?? '並び替えを解除' }));
+        }
+        if (sortOrder === 'ascending') {
+            return (_jsx(SortAscending, { className: cx(classes.sortIcon, 'mfui-DataTableHeaderCell__sortIcon', 
+                /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), "aria-label": ascendingIconProps?.['aria-label'] ?? '昇順で並び替え' }));
+        }
+        return (_jsx(SortDescending, { className: cx(classes.sortIcon, 'mfui-DataTableHeaderCell__sortIcon', 
+            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIcon'), "aria-label": descendingIconProps?.['aria-label'] ?? '降順で並び替え' }));
+    })();
+    const handleClickSortButton = sortButtonProps?.onClick;
+    const cellContent = (() => {
+        if (sortButtonProps?.onClick) {
+            return (_jsx(FocusIndicator, { position: "inside", children: _jsxs("button", { type: "button", className: cx(classes.sortButton, 'mfui-DataTableHeaderCell__sortButton', 
+                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortButton'), onClick: handleClickSortButton, children: [isStringChild ? _jsx(Typography, { variant: "strongBody", children: children }) : children, _jsx("div", { className: cx(classes.sortIconContainer, 'mfui-DataTableHeaderCell__sortIconContainer', 
+                            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__sortIconContainer'), children: sortIcon })] }) }));
+        }
+        if (isCheckboxCell) {
+            return (_jsx(FocusIndicator, { position: "inside", children: _jsx("div", { className: cx(classes.headerCell, 'mfui-DataTableHeaderCell__headerCell', 
+                    /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__headerCell'), ...(disabled && { 'data-disabled': true, 'aria-disabled': true }), onClick: disabled ? undefined : handleCheckboxCellClick, children: isStringChild ? _jsx(Typography, { variant: "strongBody", children: children }) : children }) }));
+        }
+        return (_jsx("div", { className: cx(classes.headerCell, 'mfui-DataTableHeaderCell__headerCell', 
+            /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__headerCell'), children: isStringChild ? _jsx(Typography, { variant: "strongBody", children: children }) : children }));
+    })();
+    return (_jsx("th", { ref: mergeRefs(ref, cellRef), className: cx(classes.root, 'mfui-DataTableHeaderCell__root', 
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderCell__root', className), "aria-sort": sortOrder, style: fixedPositionStyles, ...props, children: cellContent }));
+});
+DataTableHeaderCell.displayName = 'DataTableHeaderCell';

package/dist/src/{DataGrid/DataGridHeaderCell/DataGridHeaderCell.types.d.ts → DataTable/DataTableHeaderCell/DataTableHeaderCell.types.d.ts}

@@ -1,13 +1,13 @@
 import { type ComponentPropsWithRef, type ComponentPropsWithoutRef } from 'react';
-import { type CellDataType } from '../DataGrid.types';
+import { type CellDataType } from '../DataTable.types';
 /**
- * The props for the `DataGridHeaderCell` component.
+ * The props for the `DataTableHeaderCell` component.
  *
  * It extends the general attributes of `th` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/th
  */
-export type DataGridHeaderCellProps = {
+export type DataTableHeaderCellProps = {
     /**
      * The type of the cell data.
      * Used for determining how to align the header cell content.
@@ -20,10 +20,10 @@ export type DataGridHeaderCellProps = {
      * @example
      * ```tsx
      * // For standard text columns
-     * <DataGrid.HeaderCell>Account Name</DataGrid.HeaderCell>
+     * <DataTable.HeaderCell>Account Name</DataTable.HeaderCell>
      *
      * // For amount/balance columns
-     * <DataGrid.HeaderCell type="amount">Balance</DataGrid.HeaderCell>
+     * <DataTable.HeaderCell type="amount">Balance</DataTable.HeaderCell>
      * ```
      */
     type?: CellDataType;
@@ -74,7 +74,7 @@ export type DataGridHeaderCellProps = {
      * **Do not pass this prop manually.**
      *
      * Indicates whether the cell is disabled.
-     * This prop is automatically passed down from the DataGridHeaderRow component.
+     * This prop is automatically passed down from the DataTableHeaderRow component.
      *
      * @default false
      */

package/dist/src/DataTable/DataTableHeaderCell/index.d.ts

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

package/dist/src/DataTable/DataTableHeaderCell/index.js

@@ -0,0 +1 @@
+export { DataTableHeaderCell } from './DataTableHeaderCell';

package/dist/src/DataTable/DataTableHeaderRow/DataTableHeaderRow.d.ts

@@ -0,0 +1,2 @@
+import { type DataTableHeaderRowProps } from './DataTableHeaderRow.types';
+export declare const DataTableHeaderRow: import("react").ForwardRefExoticComponent<Omit<DataTableHeaderRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/src/DataTable/DataTableHeaderRow/DataTableHeaderRow.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Children, cloneElement, forwardRef, isValidElement, useEffect } from 'react';
+import { dataTableHeaderRowSlotRecipe } from '../../../styled-system/recipes';
+import { useDataTableContext } from '../DataTableProvider';
+import { DataTableHeaderCell } from '../DataTableHeaderCell';
+import { Checkbox } from '../../Checkbox';
+import { cx } from '../../../styled-system/css';
+import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped';
+export const DataTableHeaderRow = forwardRef(({ children, checkboxProps, className, ...props }, ref) => {
+    const { enableRowSelection, setNumberColumns } = useDataTableContext();
+    const classes = dataTableHeaderRowSlotRecipe();
+    // Count the number of header cells
+    useEffect(() => {
+        const headerCells = Children.toArray(children).filter((child) => isValidElement(child) && isComponentOrWrapped(child, DataTableHeaderCell));
+        setNumberColumns(headerCells.length);
+    }, [children, enableRowSelection, setNumberColumns]);
+    return (_jsxs("tr", { className: cx(classes.root, 'mfui-DataTableHeaderRow__root', 
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridHeaderRow__root', className), ...props, ref: ref, children: [enableRowSelection ? (_jsx(DataTableHeaderCell, { columnIndex: 0, disabled: checkboxProps?.disabled, children: _jsx(Checkbox, { checked: checkboxProps?.checked, indeterminate: checkboxProps?.indeterminate, "aria-label": checkboxProps?.['aria-label'] ?? 'すべての行を選択', disabled: checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : null, Children.map(children, (child, index) => {
+                if (!isValidElement(child)) {
+                    return child;
+                }
+                // Check if the component is DataTableHeaderCell or wraps DataTableHeaderCell
+                if (isComponentOrWrapped(child, DataTableHeaderCell)) {
+                    // Add selectable offset to columnIndex if selectable is true
+                    const columnIndex = enableRowSelection ? index + 1 : index;
+                    return cloneElement(child, { columnIndex });
+                }
+                return child;
+            })] }));
+});
+DataTableHeaderRow.displayName = 'DataTableHeaderRow';

package/dist/src/{DataGrid/DataGridHeaderRow/DataGridHeaderRow.types.d.ts → DataTable/DataTableHeaderRow/DataTableHeaderRow.types.d.ts}

@@ -1,16 +1,16 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type CheckboxProps } from '../../Checkbox';
 /**
- * The props for the `DataGridHeaderRow` component.
+ * The props for the `DataTableHeaderRow` component.
  *
  * It extends the general attributes of `tr` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
  */
-export type DataGridHeaderRowProps = {
+export type DataTableHeaderRowProps = {
     /**
      * The properties for the checkbox.
-     * This prop is available when the `enableRowSelection` prop of the `DataGrid` component is `true`.
+     * This prop is available when the `enableRowSelection` prop of the `DataTable` component is `true`.
      * If this prop is not passed, the default values for each property will be applied.
      *
      * @property aria-label - The alternative text for the checkbox. default is 'すべての行を選択'.

package/dist/src/DataTable/DataTableHeaderRow/index.d.ts

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

package/dist/src/DataTable/DataTableHeaderRow/index.js

@@ -0,0 +1 @@
+export { DataTableHeaderRow } from './DataTableHeaderRow';

package/dist/src/DataTable/DataTableProvider.d.ts

@@ -0,0 +1,27 @@
+import { type PropsWithChildren } from 'react';
+import { type DataTableProps } from './DataTable.types';
+export type DataTableSize = 'small' | 'medium';
+/**
+ * The props for the `DataTableContext` component.
+ */
+export type DataTableContextProps = Pick<DataTableProps, 'size' | 'enableRowSelection' | 'fixedHeader' | 'leftFixedColumnIndex' | 'rightFixedColumnIndex' | 'loading' | 'layout'>;
+export type DataTableProviderValues = {
+    numberColumns: number;
+    setNumberColumns: (number: number) => void;
+} & DataTableContextProps;
+/**
+ * The context for the `DataTable` component.
+ *
+ * This should only be used in DataTable component.
+ */
+export declare const DataTableContext: import("react").Context<DataTableProviderValues>;
+/**
+ * The hook to use the `DataTableContext`.
+ */
+export declare const useDataTableContext: () => DataTableProviderValues;
+/**
+ * The provider for the `DataTableContext`.
+ *
+ * This should only be used in DataTable component.
+ */
+export declare function DataTableProvider({ children, size, enableRowSelection, fixedHeader, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout, }: PropsWithChildren<DataTableContextProps>): import("react/jsx-runtime").JSX.Element;

package/dist/src/{DataGrid/DataGridProvider.js → DataTable/DataTableProvider.js}

@@ -2,11 +2,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useMemo, useState } from 'react';
 /**
- * The context for the `DataGrid` component.
+ * The context for the `DataTable` component.
  *
- * This should only be used in DataGrid component.
+ * This should only be used in DataTable component.
  */
-export const DataGridContext = createContext({
+export const DataTableContext = createContext({
     size: 'medium',
     enableRowSelection: false,
     fixedHeader: false,
@@ -19,15 +19,15 @@ export const DataGridContext = createContext({
     },
 });
 /**
- * The hook to use the `DataGridContext`.
+ * The hook to use the `DataTableContext`.
  */
-export const useDataGridContext = () => useContext(DataGridContext);
+export const useDataTableContext = () => useContext(DataTableContext);
 /**
- * The provider for the `DataGridContext`.
+ * The provider for the `DataTableContext`.
  *
- * This should only be used in DataGrid component.
+ * This should only be used in DataTable component.
  */
-export function DataGridProvider({ children, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', }) {
+export function DataTableProvider({ children, size = 'medium', enableRowSelection = false, fixedHeader = false, leftFixedColumnIndex, rightFixedColumnIndex, loading, layout = 'default', }) {
     const [numberColumns, setNumberColumns] = useState(0);
     const contextValue = useMemo(() => ({
         size,
@@ -49,5 +49,5 @@ export function DataGridProvider({ children, size = 'medium', enableRowSelection
         layout,
         numberColumns,
     ]);
-    return _jsx(DataGridContext.Provider, { value: contextValue, children: children });
+    return _jsx(DataTableContext.Provider, { value: contextValue, children: children });
 }

package/dist/src/DataTable/DataTableRow/DataTableRow.d.ts

@@ -0,0 +1,2 @@
+import { type DataTableRowProps } from './DataTableRow.types';
+export declare const DataTableRow: import("react").ForwardRefExoticComponent<Omit<DataTableRowProps, "ref"> & import("react").RefAttributes<HTMLTableRowElement>>;

package/dist/src/{DataGrid/DataGridRow/DataGridRow.js → DataTable/DataTableRow/DataTableRow.js}

@@ -1,17 +1,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement, forwardRef, isValidElement } from 'react';
-import { dataGridRowSlotRecipe } from '../../../styled-system/recipes';
-import { DataGridCell } from '../DataGridCell';
+import { dataTableRowSlotRecipe } from '../../../styled-system/recipes';
+import { DataTableCell } from '../DataTableCell';
 import { Checkbox } from '../../Checkbox';
-import { useDataGridContext } from '../DataGridProvider';
+import { useDataTableContext } from '../DataTableProvider';
 import { cx } from '../../../styled-system/css';
 import { isComponentOrWrapped } from '../../utilities/react/isComponentOrWrapped';
-export const DataGridRow = forwardRef(({ children, disabled = false, highlighted, checkboxProps, className, onClickRow, selectable, ...props }, ref) => {
-    const { enableRowSelection: contextEnableRowSelection, layout } = useDataGridContext();
+export const DataTableRow = forwardRef(({ children, disabled = false, highlighted, checkboxProps, className, onClickRow, selectable, ...props }, ref) => {
+    const { enableRowSelection: contextEnableRowSelection, layout } = useDataTableContext();
     const isSelectable = selectable ?? contextEnableRowSelection;
     const isRowHighlighted = isSelectable ? (checkboxProps?.checked ?? highlighted) : highlighted;
     const isInteractive = onClickRow !== undefined && !disabled;
-    const classes = dataGridRowSlotRecipe({
+    const classes = dataTableRowSlotRecipe({
         layout,
         highlighted: isRowHighlighted,
         interactive: isInteractive,
@@ -27,13 +27,14 @@ export const DataGridRow = forwardRef(({ children, disabled = false, highlighted
             onClickRow?.(event);
         }
     };
-    return (_jsxs("tr", { ref: ref, className: cx(classes.root, 'mfui-DataGridRow__root', className), ...props, 
+    return (_jsxs("tr", { ref: ref, className: cx(classes.root, 'mfui-DataTableRow__root', 
+        /* TODO: Remove in v5.0.0 */ 'mfui-DataGridRow__root', className), ...props, 
         // When the row is clickable, the role should be 'button' in order to allow screen readers to understand the row is clickable.
-        role: isInteractive ? 'button' : 'row', tabIndex: isInteractive ? 0 : undefined, ...(disabled && { 'aria-disabled': disabled }), onClick: handleClickRow, onKeyDown: handleKeyDownRow, children: [isSelectable ? (_jsx(DataGridCell, { columnIndex: 0, isRowHighlighted: isRowHighlighted, disabled: disabled, children: _jsx(Checkbox, { checked: checkboxProps?.checked, "aria-label": checkboxProps?.['aria-label'] ?? '行を選択', disabled: disabled || checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : null, Children.map(children, (child, index) => {
+        role: isInteractive ? 'button' : 'row', tabIndex: isInteractive ? 0 : undefined, ...(disabled && { 'aria-disabled': disabled }), onClick: handleClickRow, onKeyDown: handleKeyDownRow, children: [isSelectable ? (_jsx(DataTableCell, { columnIndex: 0, isRowHighlighted: isRowHighlighted, disabled: disabled, children: _jsx(Checkbox, { checked: checkboxProps?.checked, "aria-label": checkboxProps?.['aria-label'] ?? '行を選択', disabled: disabled || checkboxProps?.disabled, onChange: checkboxProps?.onChange, onClick: checkboxProps?.onClick }) })) : null, Children.map(children, (child, index) => {
                 if (!isValidElement(child)) {
                     return child;
                 }
-                if (isComponentOrWrapped(child, DataGridCell)) {
+                if (isComponentOrWrapped(child, DataTableCell)) {
                     // Add selectable offset to columnIndex if selectable is true
                     const columnIndex = isSelectable ? index + 1 : index;
                     return cloneElement(child, { isRowHighlighted, columnIndex, disabled });
@@ -41,4 +42,4 @@ export const DataGridRow = forwardRef(({ children, disabled = false, highlighted
                 return child;
             })] }));
 });
-DataGridRow.displayName = 'DataGridRow';
+DataTableRow.displayName = 'DataTableRow';

package/dist/src/{DataGrid/DataGridRow/DataGridRow.types.d.ts → DataTable/DataTableRow/DataTableRow.types.d.ts}

@@ -1,32 +1,32 @@
 import { type ComponentPropsWithRef } from 'react';
 import { type CheckboxProps } from '../../Checkbox';
 /**
- * The props for the `DataGridRow` component.
+ * The props for the `DataTableRow` component.
  *
  * It extends the general attributes of `tr` element.
  *
  * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tr
  */
-export type DataGridRowProps = {
+export type DataTableRowProps = {
     /**
      * Whether the row is disabled.
      * When true, interaction when the row is clicked and the checkbox for selectable feature will be disabled.
      * The row content remains visible with appropriate styling for readability.
-     * Interactive elements passed as a children for DataGrid.Cell won't be disabled automatically.
+     * Interactive elements passed as a children for DataTable.Cell won't be disabled automatically.
      *
      * @default false
      */
     disabled?: boolean;
     /**
      * The state of the row whether it is highlighted without a selected.
-     * This prop displays a highlighted background color regardless of the `enableRowSelection` prop of the DataGrid component.
+     * This prop displays a highlighted background color regardless of the `enableRowSelection` prop of the DataTable component.
      *
      * @default false
      */
     highlighted?: boolean;
     /**
      * The properties for the checkbox.
-     * This prop is available when the `enableRowSelection` prop of the `DataGrid` component is `true`.
+     * This prop is available when the `enableRowSelection` prop of the `DataTable` component is `true`.
      * If this prop is not passed, the default values for each property will be applied.
      *
      * @property aria-label - The alternative text for the checkbox. default is '行を選択'.

package/dist/src/DataTable/DataTableRow/index.d.ts

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

package/dist/src/DataTable/DataTableRow/index.js

@@ -0,0 +1 @@
+export { DataTableRow } from './DataTableRow';

package/dist/src/DataTable/index.d.ts

@@ -0,0 +1,8 @@
+export { DataTable } from './DataTable';
+export type { DataTableProps } from './DataTable.types';
+export type { DataTableBodyProps } from './DataTableBody';
+export type { DataTableCellProps } from './DataTableCell';
+export type { DataTableHeaderProps } from './DataTableHeader';
+export type { DataTableHeaderCellProps } from './DataTableHeaderCell';
+export type { DataTableHeaderRowProps } from './DataTableHeaderRow';
+export type { DataTableRowProps } from './DataTableRow';

package/dist/src/DataTable/index.js

@@ -0,0 +1 @@
+export { DataTable } from './DataTable';

package/dist/src/MainNavigation/BaseMainNavigation.js

@@ -30,16 +30,31 @@ export function BaseMainNavigation({ className, featureShortcut, navigationItems
     const InternalLinkTag = customLinkComponent ?? 'a';
     const hasCurrentNavigationInChildren = (children) => children?.some((child) => child.isCurrent);
     const toggleButtonLabel = isCollapsed ? 'ナビゲーションを拡げる' : 'ナビゲーションを折りたたむ';
-    return (_jsxs("div", { "data-mfui-collapsed": isCollapsed, className: cx(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsx("nav", { id: navId, className: cx(classes.nav, 'mfui-BaseMainNavigation__nav'), children: _jsx("ul", { className: cx(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), "data-mfui-popover-portal-target-id": `nested-popover-portal-target-${String(index)}`, children: navigation.children ? (isCollapsed ? (_jsx(CollapsedNestedNavigationItem, { navigation: navigation, classes: classes, InternalLinkTag: InternalLinkTag, hasCurrentChildren: hasCurrentNavigationInChildren(navigation.children) || false, popoverPortalTargetId: `nested-popover-portal-target-${String(index)}`, isOpen: openPopoverIndex === index, onOpenChange: (isOpen) => {
-                                if (isOpen) {
-                                    setOpenPopoverIndex(index);
-                                }
-                                else {
-                                    setOpenPopoverIndex(null);
-                                }
-                            } })) : (_jsxs("details", { open: navigation.isOpenByDefault || hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
-                                                ? navigation.statusSlot
-                                                : null] }) }) }) })) }, index))) }) }), enableCollapsible ? (_jsx("div", { className: cx(classes.footer, 'mfui-BaseMainNavigation__footer'), children: _jsx(Tooltip, { content: toggleButtonLabel, placement: "right", children: _jsx(ToggleButton, { className: cx(classes.toggleButton, 'mfui-BaseMainNavigation__toggleButton'), iconClassName: cx(classes.toggleButtonIcon, 'mfui-BaseMainNavigation__toggleButtonIcon'), isCollapsed: isCollapsed, "aria-label": toggleButtonLabel, targetId: navId, handleClickToggleButton: handleClickToggleButton }) }) })) : null] }));
+    return (_jsxs("div", { "data-mfui-collapsed": isCollapsed, className: cx(classes.root, 'mfui-BaseMainNavigation__root', className), children: [featureShortcut ? (_jsx("div", { className: cx(classes.featureShortcut, 'mfui-BaseMainNavigation__featureShortcut'), children: _jsx(FocusIndicator, { children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: featureShortcut.isExternal, href: featureShortcut.href, className: cx(classes.featureShortcutAnchor, 'mfui-BaseMainNavigation__featureShortcutAnchor'), children: _jsx(Typography, { variant: "controlLabel", children: featureShortcut.label }) }) }) })) : null, _jsxs("nav", { id: navId, className: cx(classes.nav, 'mfui-BaseMainNavigation__nav'), children: [_jsx("ul", { className: cx(classes.list, 'mfui-BaseMainNavigation__list'), children: navigationItems.map((navigation, index) => {
+                            const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
+                            if (isGroupLabel) {
+                                return null;
+                            }
+                            return (_jsx("li", { className: cx(classes.listItem, 'mfui-BaseMainNavigation__listItem'), "data-mfui-popover-portal-target-id": `nested-popover-portal-target-${String(index)}`, children: navigation.children ? (isCollapsed ? (_jsx(CollapsedNestedNavigationItem, { navigation: navigation, classes: classes, InternalLinkTag: InternalLinkTag, hasCurrentChildren: hasCurrentNavigationInChildren(navigation.children) || false, popoverPortalTargetId: `nested-popover-portal-target-${String(index)}`, isOpen: openPopoverIndex === index, onOpenChange: (isOpen) => {
+                                        if (isOpen) {
+                                            setOpenPopoverIndex(index);
+                                        }
+                                        else {
+                                            setOpenPopoverIndex(null);
+                                        }
+                                    } })) : (_jsxs("details", { open: ('isOpenByDefault' in navigation && navigation.isOpenByDefault) ||
+                                        hasCurrentNavigationInChildren(navigation.children), className: cx(classes.parentDetails, 'mfui-BaseMainNavigation__parentDetails'), children: [_jsx(FocusIndicator, { position: "inside", children: _jsxs("summary", { className: cx(classes.parentSummary, 'mfui-BaseMainNavigation__parentSummary'), children: [_jsx("div", { className: cx(classes.parentSummaryIcon, 'mfui-BaseMainNavigation__parentSummaryIcon'), children: navigation.icon }), _jsx(Typography, { variant: "controlLabel", children: navigation.label }), _jsx(DisclosureBasicCollapsed, { className: "mfui-BaseMainNavigation__icon_collapsed", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-collapsed" }), _jsx(DisclosureBasicExpanded, { className: "mfui-BaseMainNavigation__icon_expanded", "aria-hidden": "true", "data-mfui-content": "main-navigation-icon-expanded" })] }) }), _jsx("ul", { className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.childrenListItemAnchor, 'mfui-BaseMainNavigation__childrenListItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsx(Typography, { variant: "controlLabel", children: child.label }) }) }) }, childIndex))) })] }))) : (_jsx(Tooltip, { className: cx(classes.listItemTooltip, 'mfui-BaseMainNavigation__listItemTooltip'), content: navigation.label, disabled: !isCollapsed, placement: "right", children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: navigation.isExternal, href: navigation.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-label": isCollapsed ? navigation.label : undefined, "aria-current": navigation.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: navigation.icon }), isCollapsed ? null : _jsx(Typography, { variant: "controlLabel", children: navigation.label })] }), navigation.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": navigation.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, !isCollapsed && navigation.statusSlot && navigation.locked !== true
+                                                        ? navigation.statusSlot
+                                                        : null] }) }) }) })) }, index));
+                        }) }), !isCollapsed &&
+                        navigationItems.map((navigation, index) => {
+                            const isGroupLabel = navigation.children && 'isGroupLabel' in navigation && navigation.isGroupLabel;
+                            if (!isGroupLabel) {
+                                return null;
+                            }
+                            const groupLabelId = `${navId}-group-label-${String(index)}`;
+                            return (_jsxs("div", { className: cx(classes.groupLabelSection, 'mfui-BaseMainNavigation__groupLabelSection'), children: [_jsx("div", { className: cx(classes.groupLabel, 'mfui-BaseMainNavigation__groupLabel'), children: _jsx(Typography, { id: groupLabelId, variant: "condensedControlLabel", className: cx(classes.groupLabelText, 'mfui-BaseMainNavigation__groupLabelText'), children: navigation.label }) }), _jsx("ul", { "aria-labelledby": groupLabelId, className: cx(classes.childrenList, 'mfui-BaseMainNavigation__childrenList'), children: navigation.children.map((child, childIndex) => (_jsx("li", { className: cx(classes.childrenListItem, 'mfui-BaseMainNavigation__childrenListItem'), children: _jsx(FocusIndicator, { position: "inside", children: _jsx(NavigationLink, { tag: InternalLinkTag, isExternal: child.isExternal, href: child.href, className: cx(classes.listItemAnchor, 'mfui-BaseMainNavigation__listItemAnchor'), "aria-current": child.isCurrent ? 'page' : undefined, children: _jsxs("div", { className: cx(classes.labelGroup, 'mfui-BaseMainNavigation__labelGroup'), children: [_jsxs("div", { className: cx(classes.iconAndLabel, 'mfui-BaseMainNavigation__iconAndLabel'), children: [_jsx("div", { className: cx(classes.listItemAnchorIcon, 'mfui-BaseMainNavigation__listItemAnchorIcon'), children: child.icon }), _jsx(Typography, { variant: "controlLabel", children: child.label })] }), child.locked ? (_jsx(Lock, { className: cx(classes.lockIcon, 'mfui-BaseMainNavigation__lockIcon'), "aria-label": child.lockIconProps?.['aria-label'] ?? 'ロックされています' })) : null, child.statusSlot && child.locked !== true ? child.statusSlot : null] }) }) }) }, childIndex))) })] }, index));
+                        })] }), enableCollapsible ? (_jsx("div", { className: cx(classes.footer, 'mfui-BaseMainNavigation__footer'), children: _jsx(Tooltip, { content: toggleButtonLabel, placement: "right", children: _jsx(ToggleButton, { className: cx(classes.toggleButton, 'mfui-BaseMainNavigation__toggleButton'), iconClassName: cx(classes.toggleButtonIcon, 'mfui-BaseMainNavigation__toggleButtonIcon'), isCollapsed: isCollapsed, "aria-label": toggleButtonLabel, targetId: navId, handleClickToggleButton: handleClickToggleButton }) }) })) : null] }));
 }
 /**
  * The component for displaying nested navigation in collapsed state with popover.

package/dist/src/MainNavigation/MainNavigation.types.d.ts

@@ -96,8 +96,56 @@ type ParentNavigationItem = {
      * The nested depth is limited to one level and the icon is only allowed for the first level navigation item.
      */
     children: Omit<BasicNavigationItem, 'icon' | 'children'>[];
+    /**
+     * Whether this navigation item is a group label.
+     *
+     * This property is not allowed for the parent navigation items.
+     */
+    isGroupLabel?: undefined;
+};
+/**
+ * The group label navigation item type.
+ * Used for displaying a label that groups child navigation items that are always visible.
+ * Commonly used for important menus that need to be constantly displayed or menus with display toggle functionality.
+ *
+ * Example: Administrator Menu (menu only visible to users with admin privileges)
+ */
+type GroupLabelNavigationItem = {
+    /**
+     * The label of the group.
+     */
+    label: string;
+    /**
+     * The URL of the navigation item.
+     *
+     * This property is not allowed for the group label navigation items.
+     */
+    href?: undefined;
+    /**
+     * The icon of the navigation item.
+     *
+     * This property is not allowed for the group label navigation items.
+     */
+    icon?: undefined;
+    /**
+     * Whether the navigation item is the current page.
+     *
+     * This property is not allowed for the group label navigation items.
+     */
+    isCurrent?: undefined;
+    /**
+     * Nested navigation items under the group label.
+     *
+     * These items are always visible and cannot be toggled.
+     */
+    children: Omit<BasicNavigationItem, 'children'>[];
+    /**
+     * Indicates that this navigation item is a group label.
+     * Group labels are always expanded and cannot be collapsed.
+     */
+    isGroupLabel: true;
 };
-type NavigationItem = BasicNavigationItem | ParentNavigationItem;
+type NavigationItem = BasicNavigationItem | ParentNavigationItem | GroupLabelNavigationItem;
 type FeatureShortcut = {
     /**
      * The label of the feature shortcut link button.