@moneyforward/mfui-components 4.9.0 → 4.10.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 (63) hide show
  1. package/dist/src/Badge/Badge.js +2 -1
  2. package/dist/src/DataTable/DataTable.types.d.ts +1 -0
  3. package/dist/src/DataTable/DataTableBody/DataTableBody.js +5 -2
  4. package/dist/src/DataTable/DataTableFilterButton/DataTableFilterButton.js +3 -9
  5. package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.js +7 -3
  6. package/dist/src/DataTable/DataTableHeaderCell/DataTableHeaderCell.types.d.ts +18 -6
  7. package/dist/src/DataTable/hooks/useVirtualizedColumns.js +2 -1
  8. package/dist/src/DateTimeSelection/FilterDatePicker/CalendarPopover/CalendarPopover.js +1 -1
  9. package/dist/src/DateTimeSelection/FilterDatePicker/FilterDatePicker.js +2 -4
  10. package/dist/src/DateTimeSelection/FilterDateRangePicker/DateRangePickerContent/DateRangePickerContent.js +1 -1
  11. package/dist/src/DateTimeSelection/FilterDateRangePicker/FilterDateRangePicker.js +2 -4
  12. package/dist/src/DateTimeSelection/FilterMonthPicker/FilterMonthPicker.js +2 -4
  13. package/dist/src/DateTimeSelection/FilterMonthPicker/MonthPickerPopover/MonthPickerPopover.js +1 -1
  14. package/dist/src/DateTimeSelection/FilterMonthRangePicker/FilterMonthRangePicker.js +2 -3
  15. package/dist/src/DateTimeSelection/FilterMonthRangePicker/MonthRangePickerPopover/MonthRangePickerPopover.js +1 -1
  16. package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.d.ts +1 -1
  17. package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.js +2 -2
  18. package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePicker.types.d.ts +34 -0
  19. package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.js +18 -17
  20. package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerProvider/BaseRangePickerProvider.types.d.ts +8 -0
  21. package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.d.ts +2 -1
  22. package/dist/src/DateTimeSelection/shared/BaseRangePicker/BaseRangePickerTrigger/hooks/useDateRangeTriggerValueController.js +2 -1
  23. package/dist/src/DateTimeSelection/shared/DayCell/DayCell.js +2 -1
  24. package/dist/src/DateTimeSelection/shared/accessibility/constants.d.ts +1 -1
  25. package/dist/src/DateTimeSelection/shared/accessibility/constants.js +0 -4
  26. package/dist/src/DateTimeSelection/shared/accessibility/generateDateLabel.d.ts +4 -0
  27. package/dist/src/DateTimeSelection/shared/accessibility/generateDateLabel.js +4 -7
  28. package/dist/src/Dialog/Dialog.types.d.ts +17 -0
  29. package/dist/src/FileDropZone/FileDropZone.js +23 -6
  30. package/dist/src/Popover/Popover.d.ts +1 -1
  31. package/dist/src/Popover/Popover.js +118 -14
  32. package/dist/src/Popover/Popover.types.d.ts +16 -3
  33. package/dist/src/SectionMessage/SectionMessage.d.ts +6 -0
  34. package/dist/src/SectionMessage/SectionMessage.js +16 -1
  35. package/dist/src/SectionMessage/SectionMessage.types.d.ts +4 -0
  36. package/dist/src/Skeleton/Skeleton.d.ts +5 -2
  37. package/dist/src/Skeleton/Skeleton.js +5 -2
  38. package/dist/src/Skeleton/Skeleton.types.d.ts +9 -1
  39. package/dist/src/VisuallyHidden/VisuallyHidden.d.ts +17 -0
  40. package/dist/src/VisuallyHidden/VisuallyHidden.js +21 -0
  41. package/dist/src/VisuallyHidden/VisuallyHidden.types.d.ts +19 -0
  42. package/dist/src/VisuallyHidden/VisuallyHidden.types.js +1 -0
  43. package/dist/src/VisuallyHidden/index.d.ts +2 -0
  44. package/dist/src/VisuallyHidden/index.js +1 -0
  45. package/dist/src/index.d.ts +1 -0
  46. package/dist/src/index.js +1 -0
  47. package/dist/src/utilities/dom/usePopoverMenuPlacement.js +0 -5
  48. package/dist/src/utilities/env/isProduction.d.ts +14 -0
  49. package/dist/src/utilities/env/isProduction.js +22 -0
  50. package/dist/src/utilities/react/isComponentOrWrapped.js +2 -1
  51. package/dist/styled-system/recipes/badge-slot-recipe.d.ts +1 -1
  52. package/dist/styled-system/recipes/badge-slot-recipe.js +0 -4
  53. package/dist/styled-system/recipes/day-cell-slot-recipe.d.ts +1 -1
  54. package/dist/styled-system/recipes/day-cell-slot-recipe.js +0 -4
  55. package/dist/styled-system/recipes/index.d.ts +2 -1
  56. package/dist/styled-system/recipes/index.js +1 -0
  57. package/dist/styled-system/recipes/popover-slot-recipe.d.ts +1 -1
  58. package/dist/styled-system/recipes/popover-slot-recipe.js +4 -0
  59. package/dist/styled-system/recipes/visually-hidden-slot-recipe.d.ts +33 -0
  60. package/dist/styled-system/recipes/visually-hidden-slot-recipe.js +28 -0
  61. package/dist/styles.css +27 -38
  62. package/dist/tsconfig.build.tsbuildinfo +1 -1
  63. package/package.json +2 -2
@@ -10,7 +10,7 @@ type DayCellSlotRecipeVariantMap = {
10
10
  [key in keyof DayCellSlotRecipeVariant]: Array<DayCellSlotRecipeVariant[key]>
11
11
  }
12
12
 
13
- type DayCellSlotRecipeSlot = "root" | "label" | "srOnlyLabel"
13
+ type DayCellSlotRecipeSlot = "root" | "label"
14
14
 
15
15
  export type DayCellSlotRecipeVariantProps = {
16
16
  [key in keyof DayCellSlotRecipeVariant]?: ConditionalValue<DayCellSlotRecipeVariant[key]> | undefined
@@ -10,10 +10,6 @@ const dayCellSlotRecipeSlotNames = [
10
10
  [
11
11
  "label",
12
12
  "DayCell__label"
13
- ],
14
- [
15
- "srOnlyLabel",
16
- "DayCell__srOnlyLabel"
17
13
  ]
18
14
  ];
19
15
  const dayCellSlotRecipeSlotFns = /* @__PURE__ */ dayCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dayCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dayCellSlotRecipeCompoundVariants, slotName))]);
@@ -109,4 +109,5 @@ export * from './navigation-list-slot-recipe';
109
109
  export * from './navigation-list-item-slot-recipe';
110
110
  export * from './form-footer-slot-recipe';
111
111
  export * from './sidebar-slot-recipe';
112
- export * from './sidebar-menu-heading-slot-recipe';
112
+ export * from './sidebar-menu-heading-slot-recipe';
113
+ export * from './visually-hidden-slot-recipe';
@@ -109,3 +109,4 @@ export * from './navigation-list-item-slot-recipe.js';
109
109
  export * from './form-footer-slot-recipe.js';
110
110
  export * from './sidebar-slot-recipe.js';
111
111
  export * from './sidebar-menu-heading-slot-recipe.js';
112
+ export * from './visually-hidden-slot-recipe.js';
@@ -10,7 +10,7 @@ type PopoverSlotRecipeVariantMap = {
10
10
  [key in keyof PopoverSlotRecipeVariant]: Array<PopoverSlotRecipeVariant[key]>
11
11
  }
12
12
 
13
- type PopoverSlotRecipeSlot = "root"
13
+ type PopoverSlotRecipeSlot = "root" | "contentWrapper"
14
14
 
15
15
  export type PopoverSlotRecipeVariantProps = {
16
16
  [key in keyof PopoverSlotRecipeVariant]?: ConditionalValue<PopoverSlotRecipeVariant[key]> | undefined
@@ -6,6 +6,10 @@ const popoverSlotRecipeSlotNames = [
6
6
  [
7
7
  "root",
8
8
  "Popover__root"
9
+ ],
10
+ [
11
+ "contentWrapper",
12
+ "Popover__contentWrapper"
9
13
  ]
10
14
  ];
11
15
  const popoverSlotRecipeSlotFns = /* @__PURE__ */ popoverSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, popoverSlotRecipeDefaultVariants, getSlotCompoundVariant(popoverSlotRecipeCompoundVariants, slotName))]);
@@ -0,0 +1,33 @@
1
+ /* eslint-disable */
2
+ import type { ConditionalValue } from '../types/index';
3
+ import type { DistributiveOmit, Pretty } from '../types/system-types';
4
+
5
+ interface VisuallyHiddenSlotRecipeVariant {
6
+
7
+ }
8
+
9
+ type VisuallyHiddenSlotRecipeVariantMap = {
10
+ [key in keyof VisuallyHiddenSlotRecipeVariant]: Array<VisuallyHiddenSlotRecipeVariant[key]>
11
+ }
12
+
13
+ type VisuallyHiddenSlotRecipeSlot = "root"
14
+
15
+ export type VisuallyHiddenSlotRecipeVariantProps = {
16
+ [key in keyof VisuallyHiddenSlotRecipeVariant]?: ConditionalValue<VisuallyHiddenSlotRecipeVariant[key]> | undefined
17
+ }
18
+
19
+ export interface VisuallyHiddenSlotRecipeRecipe {
20
+ __slot: VisuallyHiddenSlotRecipeSlot
21
+ __type: VisuallyHiddenSlotRecipeVariantProps
22
+ (props?: VisuallyHiddenSlotRecipeVariantProps): Pretty<Record<VisuallyHiddenSlotRecipeSlot, string>>
23
+ raw: (props?: VisuallyHiddenSlotRecipeVariantProps) => VisuallyHiddenSlotRecipeVariantProps
24
+ variantMap: VisuallyHiddenSlotRecipeVariantMap
25
+ variantKeys: Array<keyof VisuallyHiddenSlotRecipeVariant>
26
+ splitVariantProps<Props extends VisuallyHiddenSlotRecipeVariantProps>(props: Props): [VisuallyHiddenSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof VisuallyHiddenSlotRecipeVariantProps>>]
27
+ getVariantProps: (props?: VisuallyHiddenSlotRecipeVariantProps) => VisuallyHiddenSlotRecipeVariantProps
28
+ }
29
+
30
+ /**
31
+ * Slot class created for the MFUI VisuallyHidden component
32
+ */
33
+ export declare const visuallyHiddenSlotRecipe: VisuallyHiddenSlotRecipeRecipe
@@ -0,0 +1,28 @@
1
+ import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
2
+ import { createRecipe } from './create-recipe.js';
3
+ const visuallyHiddenSlotRecipeDefaultVariants = {};
4
+ const visuallyHiddenSlotRecipeCompoundVariants = [];
5
+ const visuallyHiddenSlotRecipeSlotNames = [
6
+ [
7
+ "root",
8
+ "VisuallyHidden__root"
9
+ ]
10
+ ];
11
+ const visuallyHiddenSlotRecipeSlotFns = /* @__PURE__ */ visuallyHiddenSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, visuallyHiddenSlotRecipeDefaultVariants, getSlotCompoundVariant(visuallyHiddenSlotRecipeCompoundVariants, slotName))]);
12
+ const visuallyHiddenSlotRecipeFn = memo((props = {}) => {
13
+ return Object.fromEntries(visuallyHiddenSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
14
+ });
15
+ const visuallyHiddenSlotRecipeVariantKeys = [];
16
+ const getVariantProps = (variants) => ({ ...visuallyHiddenSlotRecipeDefaultVariants, ...compact(variants) });
17
+ export const visuallyHiddenSlotRecipe = /* @__PURE__ */ Object.assign(visuallyHiddenSlotRecipeFn, {
18
+ __recipe__: false,
19
+ __name__: 'visuallyHiddenSlotRecipe',
20
+ raw: (props) => props,
21
+ classNameMap: {},
22
+ variantKeys: visuallyHiddenSlotRecipeVariantKeys,
23
+ variantMap: {},
24
+ splitVariantProps(props) {
25
+ return splitProps(props, visuallyHiddenSlotRecipeVariantKeys);
26
+ },
27
+ getVariantProps
28
+ });
package/dist/styles.css CHANGED
@@ -497,10 +497,6 @@
497
497
  --mfui-line-heights-mfui\.typography\.line-height\.condensed-input\.narrow: 21px;
498
498
  }
499
499
 
500
- .mfui-gXBBVr {
501
- overflow-y: auto;
502
- }
503
-
504
500
  .mfui-iHuYNm {
505
501
  padding-block: var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort);
506
502
  flex-direction: column;
@@ -809,10 +805,6 @@
809
805
  row-gap: var(--mfui-spacing-mfui\.size\.spacing\.container\.vertical\.comfort);
810
806
  }
811
807
 
812
- .mfui-hkWvKm {
813
- overflow-y: auto;
814
- }
815
-
816
808
  .mfui-hxpVHi {
817
809
  padding-block: var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort);
818
810
  padding-inline: 0px;
@@ -1327,18 +1319,6 @@
1327
1319
  height: var(--mfui-sizes-mfui\.size\.dimension\.badge\.diameter\.comfort);
1328
1320
  }
1329
1321
 
1330
- .mfui-fCRxLF {
1331
- position: absolute;
1332
- width: 1px;
1333
- height: 1px;
1334
- padding: 0;
1335
- margin: -1px;
1336
- overflow: hidden;
1337
- clip: rect(0, 0, 0, 0);
1338
- white-space: nowrap;
1339
- border-width: 0;
1340
- }
1341
-
1342
1322
  .mfui-jntiOR {
1343
1323
  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
1344
1324
  border-style: solid;
@@ -2619,18 +2599,6 @@
2619
2599
  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
2620
2600
  }
2621
2601
 
2622
- .mfui-iYrkDO {
2623
- position: absolute;
2624
- width: 1px;
2625
- height: 1px;
2626
- padding: 0;
2627
- margin: -1px;
2628
- overflow: hidden;
2629
- clip: rect(0, 0, 0, 0);
2630
- white-space: nowrap;
2631
- border-width: 0;
2632
- }
2633
-
2634
2602
  .mfui-fKMSWf {
2635
2603
  gap: 0;
2636
2604
  display: grid;
@@ -2702,7 +2670,7 @@
2702
2670
  white-space: nowrap;
2703
2671
  }
2704
2672
 
2705
- .mfui-Popover__root > .mfui-fhtZXM {
2673
+ .mfui-Popover__contentWrapper > .mfui-fhtZXM {
2706
2674
  overflow-x: hidden;
2707
2675
  overflow-y: hidden;
2708
2676
  }
@@ -3373,7 +3341,7 @@
3373
3341
  cursor: pointer;
3374
3342
  text-align: left;
3375
3343
  display: flex;
3376
- align-items: center;
3344
+ align-items: flex-start;
3377
3345
  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
3378
3346
  width: 100%;
3379
3347
  }
@@ -3488,6 +3456,7 @@
3488
3456
  display: grid;
3489
3457
  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.icon);
3490
3458
  min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
3459
+ min-height: 24px;
3491
3460
  margin-left: var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort);
3492
3461
  }
3493
3462
 
@@ -3502,7 +3471,7 @@
3502
3471
  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
3503
3472
  cursor: pointer;
3504
3473
  display: flex;
3505
- align-items: center;
3474
+ align-items: flex-start;
3506
3475
  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
3507
3476
  }
3508
3477
 
@@ -4384,10 +4353,18 @@
4384
4353
  pointer-events: auto;
4385
4354
  display: flex;
4386
4355
  flex-direction: column;
4356
+ }
4357
+
4358
+ .mfui-jxYKcw {
4359
+ flex: 1 1 auto;
4360
+ border-radius: inherit;
4361
+ display: flex;
4362
+ flex-direction: column;
4363
+ min-height: 0px;
4387
4364
  overflow-y: hidden;
4388
4365
  }
4389
4366
 
4390
- .mfui-vzUZg > * {
4367
+ .mfui-jxYKcw > * {
4391
4368
  flex: 1 1 auto;
4392
4369
  overflow: auto;
4393
4370
  min-height: 0px;
@@ -5073,6 +5050,7 @@
5073
5050
  border-style: dashed;
5074
5051
  border-width: var(--mfui-border-widths-mfui\.size\.border\.indicator\.width\.comfort);
5075
5052
  border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
5053
+ cursor: not-allowed;
5076
5054
  background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
5077
5055
  }
5078
5056
 
@@ -5092,6 +5070,7 @@
5092
5070
  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.none);
5093
5071
  font-family: var(--mfui-fonts-mfui\.typography\.font-family\.label);
5094
5072
  font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.control-label);
5073
+ cursor: pointer;
5095
5074
  height: 100%;
5096
5075
  }
5097
5076
 
@@ -5133,7 +5112,6 @@
5133
5112
  display: flex;
5134
5113
  align-items: center;
5135
5114
  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
5136
- cursor: default;
5137
5115
  }
5138
5116
 
5139
5117
  .mfui-bODIPe {
@@ -6758,7 +6736,7 @@ li:last-child > .mfui-cXGJls {
6758
6736
  height: 18px;
6759
6737
  }
6760
6738
 
6761
- .mfui-czdCzS {
6739
+ .mfui-czdCzS,.mfui-ewjNpm {
6762
6740
  position: absolute;
6763
6741
  width: 1px;
6764
6742
  height: 1px;
@@ -8294,6 +8272,7 @@ li:last-child > .mfui-cXGJls {
8294
8272
  display: grid;
8295
8273
  grid-template-columns: 1fr auto;
8296
8274
  align-content: start;
8275
+ align-items: center;
8297
8276
  }
8298
8277
 
8299
8278
  .mfui-eLqgVJ[data-mfui-nest-level="1"] {
@@ -8940,6 +8919,16 @@ li:last-child > .mfui-cXGJls {
8940
8919
  color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
8941
8920
  }
8942
8921
 
8922
+ .mfui-bjPlYK:is(:hover, [data-hover]) {
8923
+ border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
8924
+ background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
8925
+ }
8926
+
8927
+ .mfui-bjPlYK:is(:active, [data-active]) {
8928
+ border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
8929
+ background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.pressed);
8930
+ }
8931
+
8943
8932
  .mfui-hhZyjV {
8944
8933
  color: var(--mfui-colors-mfui\.color\.base\.content\.none);
8945
8934
  }