@moneyforward/mfui-components 4.7.0 → 4.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/dist/src/DataTable/DataTable.js +38 -5
  2. package/dist/src/DataTable/DataTable.types.d.ts +101 -0
  3. package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.js +5 -2
  4. package/dist/src/DataTable/DataTableHeaderRow/DataTableHeaderRow.js +31 -15
  5. package/dist/src/DataTable/DataTableProvider.d.ts +19 -4
  6. package/dist/src/DataTable/DataTableProvider.js +11 -3
  7. package/dist/src/DataTable/DataTableRow/DataTableRow.js +21 -12
  8. package/dist/src/DataTable/hooks/useVirtualizedColumns.d.ts +73 -0
  9. package/dist/src/DataTable/hooks/useVirtualizedColumns.js +109 -0
  10. package/dist/src/DataTable/index.d.ts +1 -1
  11. package/dist/src/DataTable/shared/commonStyles.d.ts +11 -0
  12. package/dist/src/DataTable/shared/commonStyles.js +11 -0
  13. package/dist/src/DataTable/utils/renderVirtualizedColumns.d.ts +42 -0
  14. package/dist/src/DataTable/utils/renderVirtualizedColumns.js +40 -0
  15. package/dist/src/DataTable/utils/resolveColumnWidths.d.ts +28 -0
  16. package/dist/src/DataTable/utils/resolveColumnWidths.js +41 -0
  17. package/dist/src/MultipleSelectBox/MultipleSelectBox.d.ts +1 -1
  18. package/dist/src/MultipleSelectBox/MultipleSelectBox.js +10 -7
  19. package/dist/src/MultipleSelectBox/MultipleSelectBox.types.d.ts +33 -0
  20. package/dist/src/Popover/Popover.d.ts +7 -0
  21. package/dist/src/Popover/Popover.js +7 -0
  22. package/dist/src/SelectBox/SelectBox.js +6 -4
  23. package/dist/src/SelectBox/SelectBox.types.d.ts +33 -0
  24. package/dist/src/SelectBox/SelectBoxOption.d.ts +5 -1
  25. package/dist/src/SelectBox/SelectBoxOption.js +3 -4
  26. package/dist/src/SelectBox/SelectBoxOptionGroup.d.ts +5 -1
  27. package/dist/src/SelectBox/SelectBoxOptionGroup.js +2 -2
  28. package/dist/src/shared/OptionLabel/OptionLabel.d.ts +45 -0
  29. package/dist/src/shared/OptionLabel/OptionLabel.js +9 -0
  30. package/dist/src/shared/OptionLabel/index.d.ts +1 -0
  31. package/dist/src/shared/OptionLabel/index.js +1 -0
  32. package/dist/styled-system/recipes/data-table-slot-recipe.d.ts +5 -1
  33. package/dist/styled-system/recipes/data-table-slot-recipe.js +19 -1
  34. package/dist/styled-system/tokens/index.js +4 -0
  35. package/dist/styled-system/tokens/tokens.d.ts +1 -1
  36. package/dist/styles.css +33 -0
  37. package/dist/tsconfig.build.tsbuildinfo +1 -1
  38. package/package.json +7 -7
package/dist/styled-system/recipes/data-table-slot-recipe.js CHANGED
@@ -1,7 +1,8 @@
1
1
  import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
2
2
  import { createRecipe } from './create-recipe.js';
3
3
  const dataTableSlotRecipeDefaultVariants = {
4
- "layout": "default"
4
+ "layout": "default",
5
+ "columnVirtualization": false
5
6
  };
6
7
  const dataTableSlotRecipeCompoundVariants = [];
7
8
  const dataTableSlotRecipeSlotNames = [
@@ -16,6 +17,18 @@ const dataTableSlotRecipeSlotNames = [
16
17
  [
17
18
  "emptyState",
18
19
  "DataTable__emptyState"
20
+ ],
21
+ [
22
+ "columnSpacer",
23
+ "DataTable__columnSpacer"
24
+ ],
25
+ [
26
+ "headerColumnSpacer",
27
+ "DataTable__headerColumnSpacer"
28
+ ],
29
+ [
30
+ "selectionColumn",
31
+ "DataTable__selectionColumn"
19
32
  ]
20
33
  ];
21
34
  const dataTableSlotRecipeSlotFns = /* @__PURE__ */ dataTableSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dataTableSlotRecipeDefaultVariants, getSlotCompoundVariant(dataTableSlotRecipeCompoundVariants, slotName))]);
@@ -23,6 +36,7 @@ const dataTableSlotRecipeFn = memo((props = {}) => {
23
36
  return Object.fromEntries(dataTableSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
24
37
  });
25
38
  const dataTableSlotRecipeVariantKeys = [
39
+ "columnVirtualization",
26
40
  "layout"
27
41
  ];
28
42
  const getVariantProps = (variants) => ({ ...dataTableSlotRecipeDefaultVariants, ...compact(variants) });
@@ -33,6 +47,10 @@ export const dataTableSlotRecipe = /* @__PURE__ */ Object.assign(dataTableSlotRe
33
47
  classNameMap: {},
34
48
  variantKeys: dataTableSlotRecipeVariantKeys,
35
49
  variantMap: {
50
+ "columnVirtualization": [
51
+ "true",
52
+ "false"
53
+ ],
36
54
  "layout": [
37
55
  "default",
38
56
  "edge-to-edge"
package/dist/styled-system/tokens/index.js CHANGED
@@ -5659,6 +5659,10 @@ const tokens = {
5659
5659
  "value": 5000,
5660
5660
  "variable": "var(--mfui-z-index-dialog)"
5661
5661
  },
5662
+ "zIndex.popover": {
5663
+ "value": 6000,
5664
+ "variable": "var(--mfui-z-index-popover)"
5665
+ },
5662
5666
  "zIndex.toast.container": {
5663
5667
  "value": 9999,
5664
5668
  "variable": "var(--mfui-z-index-toast-container)"
package/dist/styled-system/tokens/tokens.d.ts CHANGED
@@ -15,7 +15,7 @@ export type DurationToken = "mfui.core.transition.duration.none" | "mfui.core.tr
15
15
 
16
16
  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"
17
17
 
18
- export type ZIndexToken = "dialog" | "toast.container" | "toast.item" | "tooltip"
18
+ export type ZIndexToken = "dialog" | "popover" | "toast.container" | "toast.item" | "tooltip"
19
19
 
20
20
  export type BreakpointToken = "sm" | "lg"
21
21
 
package/dist/styles.css CHANGED
@@ -151,6 +151,7 @@
151
151
 
152
152
  :host,:root {
153
153
  --mfui-z-index-dialog: 5000;
154
+ --mfui-z-index-popover: 6000;
154
155
  --mfui-z-index-toast-container: 9999;
155
156
  --mfui-z-index-toast-item: 1000;
156
157
  --mfui-z-index-tooltip: 10000;
@@ -1634,6 +1635,11 @@
1634
1635
  min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
1635
1636
  }
1636
1637
 
1638
+ .mfui-fmdPwh > [data-mfui-content="select-box-option-label-slot"] {
1639
+ flex-grow: 1;
1640
+ min-width: 0px;
1641
+ }
1642
+
1637
1643
  .mfui-fmdPwh[data-mfui-skeleton="true"] > .mfui-Skeleton {
1638
1644
  flex-grow: 1;
1639
1645
  height: 1.25rem;
@@ -3092,6 +3098,23 @@
3092
3098
  width: 100%;
3093
3099
  }
3094
3100
 
3101
+ .mfui-chNDct {
3102
+ padding: 0;
3103
+ border: 0;
3104
+ }
3105
+
3106
+ .mfui-djixCu {
3107
+ padding: 0;
3108
+ background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.none);
3109
+ border-block-end-style: solid;
3110
+ border-block-end-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);
3111
+ border-block-end-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
3112
+ }
3113
+
3114
+ .mfui-cHcPnP {
3115
+ 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));
3116
+ }
3117
+
3095
3118
  .mfui-jMpBJi {
3096
3119
  border-color: var(--mfui-colors-mfui\.color\.neutral\.sub-border\.none);
3097
3120
  background-color: var(--mfui-colors-mfui\.color\.neutral\.sub-background\.none);
@@ -3755,6 +3778,11 @@
3755
3778
  min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
3756
3779
  }
3757
3780
 
3781
+ .mfui-hBoLjB > [data-mfui-content="multiple-select-box-option-label-slot"] {
3782
+ flex-grow: 1;
3783
+ min-width: 0px;
3784
+ }
3785
+
3758
3786
  .mfui-hBoLjB[aria-disabled="true"] {
3759
3787
  color: var(--mfui-colors-mfui\.color\.disabled\.content);
3760
3788
  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
@@ -4350,6 +4378,7 @@
4350
4378
  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
4351
4379
  outline: 2px solid transparent;
4352
4380
  outline-offset: 2px;
4381
+ z-index: var(--mfui-z-index-popover);
4353
4382
  background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
4354
4383
  box-shadow: var(--mfui-shadows-mfui\.elevation\.plus-1\.shadow-1), var(--mfui-shadows-mfui\.elevation\.plus-1\.shadow-2);
4355
4384
  pointer-events: auto;
@@ -7931,6 +7960,10 @@ li:last-child > .mfui-cXGJls {
7931
7960
  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
7932
7961
  }
7933
7962
 
7963
+ .mfui-gwKOSv {
7964
+ table-layout: fixed;
7965
+ }
7966
+
7934
7967
  .mfui-hUuodk {
7935
7968
  border-block-style: solid;
7936
7969
  border-block-width: var(--mfui-border-widths-mfui\.size\.border\.base\.width\.comfort);