@moneyforward/mfui-components 4.6.0 → 4.8.0

package/dist/src/shared/OptionLabel/OptionLabel.d.ts

@@ -0,0 +1,45 @@
+import { type ReactNode } from 'react';
+/**
+ * The state of an option passed to the function that renders its label slot.
+ */
+export type OptionLabelSlotState = {
+    /**
+     * Whether the option is currently selected.
+     */
+    isSelected: boolean;
+};
+/**
+ * The function that renders the label slot of an option, replacing its label text.
+ */
+export type RenderOptionLabelSlot<Option> = (option: Option, state: OptionLabelSlotState) => ReactNode;
+type OptionLabelProps<Option extends {
+    label: string;
+}> = {
+    /**
+     * The option whose label is rendered.
+     */
+    option: Option;
+    /**
+     * Whether the option is currently selected.
+     */
+    isSelected: boolean;
+    /**
+     * The function that renders the label slot. The label text is rendered when it is omitted.
+     */
+    renderOptionLabelSlot?: RenderOptionLabelSlot<Option>;
+    /**
+     * The `data-mfui-content` value of the slot wrapper, prefixed with the component name so that the
+     * component styles can target it.
+     */
+    slotContentName: string;
+};
+/**
+ * Renders the label of an option in an option list, or the label slot that replaces it.
+ *
+ * The slot is wrapped so that it keeps the default text style and an icon returned by it is not
+ * styled as the selected mark of the option (`& > svg`). A `div` because the slot may return block content.
+ */
+export declare const OptionLabel: <Option extends {
+    label: string;
+}>({ option, isSelected, renderOptionLabelSlot, slotContentName, }: OptionLabelProps<Option>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/shared/OptionLabel/OptionLabel.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '../../Typography';
+/**
+ * Renders the label of an option in an option list, or the label slot that replaces it.
+ *
+ * The slot is wrapped so that it keeps the default text style and an icon returned by it is not
+ * styled as the selected mark of the option (`& > svg`). A `div` because the slot may return block content.
+ */
+export const OptionLabel = ({ option, isSelected, renderOptionLabelSlot, slotContentName, }) => renderOptionLabelSlot ? (_jsx(Typography, { as: "div", variant: "body", "data-mfui-content": slotContentName, children: renderOptionLabelSlot(option, { isSelected }) })) : (_jsx(Typography, { variant: "body", children: option.label }));

package/dist/src/shared/OptionLabel/index.d.ts

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

package/dist/src/shared/OptionLabel/index.js

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

package/dist/styled-system/recipes/data-table-body-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type DataTableBodySlotRecipeVariantMap = {
   [key in keyof DataTableBodySlotRecipeVariant]: Array<DataTableBodySlotRecipeVariant[key]>
 }
 
-type DataTableBodySlotRecipeSlot = "root"
+type DataTableBodySlotRecipeSlot = "root" | "spacer"
 
 export type DataTableBodySlotRecipeVariantProps = {
   [key in keyof DataTableBodySlotRecipeVariant]?: ConditionalValue<DataTableBodySlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/data-table-body-slot-recipe.js

@@ -6,6 +6,10 @@ const dataTableBodySlotRecipeSlotNames = [
     [
         "root",
         "DataTableBody__root"
+    ],
+    [
+        "spacer",
+        "DataTableBody__spacer"
     ]
 ];
 const dataTableBodySlotRecipeSlotFns = /* @__PURE__ */ dataTableBodySlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableBodySlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableBodySlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/data-table-slot-recipe.d.ts

@@ -4,6 +4,10 @@ import type { DistributiveOmit, Pretty } from '../types/system-types';
 
 interface DataTableSlotRecipeVariant {
   /**
+ * @default false
+ */
+columnVirtualization: boolean
+/**
  * @default "default"
  */
 layout: "default" | "edge-to-edge"
@@ -13,7 +17,7 @@ type DataTableSlotRecipeVariantMap = {
   [key in keyof DataTableSlotRecipeVariant]: Array<DataTableSlotRecipeVariant[key]>
 }
 
-type DataTableSlotRecipeSlot = "wrapper" | "table" | "emptyState"
+type DataTableSlotRecipeSlot = "wrapper" | "table" | "emptyState" | "columnSpacer" | "headerColumnSpacer" | "selectionColumn"
 
 export type DataTableSlotRecipeVariantProps = {
   [key in keyof DataTableSlotRecipeVariant]?: ConditionalValue<DataTableSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/data-table-slot-recipe.js

@@ -1,7 +1,8 @@
 import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
 import { createRecipe } from './create-recipe.js';
 const dataTableSlotRecipeDefaultVariants = {
-    "layout": "default"
+    "layout": "default",
+    "columnVirtualization": false
 };
 const dataTableSlotRecipeCompoundVariants = [];
 const dataTableSlotRecipeSlotNames = [
@@ -16,6 +17,18 @@ const dataTableSlotRecipeSlotNames = [
     [
         "emptyState",
         "DataTable__emptyState"
+    ],
+    [
+        "columnSpacer",
+        "DataTable__columnSpacer"
+    ],
+    [
+        "headerColumnSpacer",
+        "DataTable__headerColumnSpacer"
+    ],
+    [
+        "selectionColumn",
+        "DataTable__selectionColumn"
     ]
 ];
 const dataTableSlotRecipeSlotFns = /* @__PURE__ */ dataTableSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableSlotRecipeCompoundVariants, slotName))]);
@@ -23,6 +36,7 @@ const dataTableSlotRecipeFn = memo((props = {}) => {
     return Object.fromEntries(dataTableSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
 });
 const dataTableSlotRecipeVariantKeys = [
+    "columnVirtualization",
     "layout"
 ];
 const getVariantProps = (variants) => ({ ...dataTableSlotRecipeDefaultVariants, ...compact(variants) });
@@ -33,6 +47,10 @@ export const dataTableSlotRecipe = /* @__PURE__ */ Object.assign(dataTableSlotRe
     classNameMap: {},
     variantKeys: dataTableSlotRecipeVariantKeys,
     variantMap: {
+        "columnVirtualization": [
+            "true",
+            "false"
+        ],
         "layout": [
             "default",
             "edge-to-edge"

package/dist/styled-system/tokens/index.js

@@ -5667,6 +5667,10 @@ const tokens = {
         "value": 1000,
         "variable": "var(--mfui-z-index-toast-item)"
     },
+    "zIndex.tooltip": {
+        "value": 10000,
+        "variable": "var(--mfui-z-index-tooltip)"
+    },
     "breakpoints.sm": {
         "value": "600px",
         "variable": "var(--mfui-breakpoints-sm)"

package/dist/styled-system/tokens/tokens.d.ts

@@ -15,7 +15,7 @@ export type DurationToken = "mfui.core.transition.duration.none" | "mfui.core.tr
 
 export type EasingToken = "mfui.core.transition.easing.linear" | "mfui.core.transition.easing.ease-in-out" | "mfui.transition.easing.side-pane.in" | "mfui.transition.easing.side-pane.out" | "mfui.transition.easing.split-view.in" | "mfui.transition.easing.split-view.out"
 
-export type ZIndexToken = "dialog" | "toast.container" | "toast.item"
+export type ZIndexToken = "dialog" | "toast.container" | "toast.item" | "tooltip"
 
 export type BreakpointToken = "sm" | "lg"
 

package/dist/styles.css

@@ -153,6 +153,7 @@
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               --mfui-z-index-dialog: 5000;
   --mfui-z-index-toast-container: 9999;
   --mfui-z-index-toast-item: 1000;
+  --mfui-z-index-tooltip: 10000;
                                   --mfui-colors-mfui\.color\.base\.content\.none: #262626ff;
   --mfui-colors-mfui\.color\.base\.content\.hovered: #111111ff;
   --mfui-colors-mfui\.color\.base\.content\.pressed: #000000ff;
@@ -1444,6 +1445,7 @@
   padding-inline: var(--mfui-spacing-mfui\.size\.padding\.control\.horizontal\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.indicator-component\.comfort);
   position: fixed;
+  z-index: var(--mfui-z-index-tooltip);
   background-color: var(--mfui-colors-mfui\.color\.neutral\.background\.none);
   color: var(--mfui-colors-mfui\.color\.base\.inverted-content\.none);
   box-shadow: var(--mfui-shadows-mfui\.elevation\.plus-1\.shadow-1);
@@ -1632,6 +1634,11 @@
   min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
+.mfui-fmdPwh > [data-mfui-content="select-box-option-label-slot"] {
+  flex-grow: 1;
+  min-width: 0px;
+}
+
 .mfui-fmdPwh[data-mfui-skeleton="true"] > .mfui-Skeleton {
   flex-grow: 1;
   height: 1.25rem;
@@ -2977,6 +2984,11 @@
   top: 50%;
 }
 
+.mfui-kWseNH {
+  padding: 0;
+  border: 0;
+}
+
 .mfui-dDOVnx {
   vertical-align: top;
 }
@@ -3085,6 +3097,23 @@
   width: 100%;
 }
 
+.mfui-chNDct {
+  padding: 0;
+  border: 0;
+}
+
+.mfui-djixCu {
+  padding: 0;
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.none);
+  border-block-end-style: solid;
+  border-block-end-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
+  border-block-end-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
+}
+
+.mfui-cHcPnP {
+  width: calc(var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort) + var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort) * 2 + var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort));
+}
+
 .mfui-jMpBJi {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
   background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.none);
@@ -3748,6 +3777,11 @@
   min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
 }
 
+.mfui-hBoLjB > [data-mfui-content="multiple-select-box-option-label-slot"] {
+  flex-grow: 1;
+  min-width: 0px;
+}
+
 .mfui-hBoLjB[aria-disabled="true"] {
   color: var(--mfui-colors-mfui\.color\.disabled\.content);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
@@ -7793,9 +7827,7 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-coGcRr {
-  width: 32px;
-  min-width: 32px;
-  max-width: 32px;
+  width: calc(var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort) + var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort) * 2 + var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort));
 }
 
 .mfui-jqZsnQ:not(:disabled, [disabled], [data-disabled]):not(:has(input:disabled)) {
@@ -7926,6 +7958,10 @@ li:last-child > .mfui-cXGJls {
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
 }
 
+.mfui-gwKOSv {
+  table-layout: fixed;
+}
+
 .mfui-hUuodk {
   border-block-style: solid;
   border-block-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
@@ -8001,7 +8037,7 @@ li:last-child > .mfui-cXGJls {
 }
 
 .mfui-hdkeDU {
-  width: 32px;
+  width: calc(var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort) + var(--mfui-spacing-mfui\.size\.padding\.data-table-cell\.horizontal\.comfort) * 2 + var(--mfui-spacing-mfui\.size\.padding\.container\.horizontal\.comfort));
 }
 
 .mfui-dQChFX:not(:disabled, [disabled], [data-disabled]) {