@moneyforward/mfui-components 4.8.0 → 4.10.0

package/dist/src/utilities/react/isComponentOrWrapped.js

@@ -1,4 +1,5 @@
 import { isValidElement } from 'react';
+import { isProduction } from '../env/isProduction';
 /**
  * Checks if a React element is of a specific component type or wraps that component.
  *
@@ -79,7 +80,7 @@ export function isComponentOrWrapped(element, targetComponent) {
                 const result = element.type(element.props);
                 if (isValidElement(result) && result.type === targetComponent) {
                     // Warn in development about better practice
-                    if (process.env['NODE_ENV'] !== 'production' && targetDisplayName) {
+                    if (!isProduction() && targetDisplayName) {
                         console.warn(`[MFUI] Wrapper component detected without displayName. ` +
                             `This may cause issues if your wrapper uses React hooks. ` +
                             `Please set displayName="${targetDisplayName}" on your wrapper component.`);

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

@@ -10,7 +10,7 @@ type BadgeSlotRecipeVariantMap = {
   [key in keyof BadgeSlotRecipeVariant]: Array<BadgeSlotRecipeVariant[key]>
 }
 
-type BadgeSlotRecipeSlot = "root" | "indicator" | "srOnlyLabel"
+type BadgeSlotRecipeSlot = "root" | "indicator"
 
 export type BadgeSlotRecipeVariantProps = {
   [key in keyof BadgeSlotRecipeVariant]?: ConditionalValue<BadgeSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/badge-slot-recipe.js

@@ -10,10 +10,6 @@ const badgeSlotRecipeSlotNames = [
     [
         "indicator",
         "Badge__indicator"
-    ],
-    [
-        "srOnlyLabel",
-        "Badge__srOnlyLabel"
     ]
 ];
 const badgeSlotRecipeSlotFns = /* @__PURE__ */ badgeSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, badgeSlotRecipeDefaultVariants, getSlotCompoundVariant(badgeSlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/day-cell-slot-recipe.d.ts

@@ -10,7 +10,7 @@ type DayCellSlotRecipeVariantMap = {
   [key in keyof DayCellSlotRecipeVariant]: Array<DayCellSlotRecipeVariant[key]>
 }
 
-type DayCellSlotRecipeSlot = "root" | "label" | "srOnlyLabel"
+type DayCellSlotRecipeSlot = "root" | "label"
 
 export type DayCellSlotRecipeVariantProps = {
   [key in keyof DayCellSlotRecipeVariant]?: ConditionalValue<DayCellSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/day-cell-slot-recipe.js

@@ -10,10 +10,6 @@ const dayCellSlotRecipeSlotNames = [
     [
         "label",
         "DayCell__label"
-    ],
-    [
-        "srOnlyLabel",
-        "DayCell__srOnlyLabel"
     ]
 ];
 const dayCellSlotRecipeSlotFns = /* @__PURE__ */ dayCellSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, dayCellSlotRecipeDefaultVariants, getSlotCompoundVariant(dayCellSlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/index.d.ts

@@ -109,4 +109,5 @@ export * from './navigation-list-slot-recipe';
 export * from './navigation-list-item-slot-recipe';
 export * from './form-footer-slot-recipe';
 export * from './sidebar-slot-recipe';
-export * from './sidebar-menu-heading-slot-recipe';
+export * from './sidebar-menu-heading-slot-recipe';
+export * from './visually-hidden-slot-recipe';

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

@@ -109,3 +109,4 @@ export * from './navigation-list-item-slot-recipe.js';
 export * from './form-footer-slot-recipe.js';
 export * from './sidebar-slot-recipe.js';
 export * from './sidebar-menu-heading-slot-recipe.js';
+export * from './visually-hidden-slot-recipe.js';

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

@@ -10,7 +10,7 @@ type PopoverSlotRecipeVariantMap = {
   [key in keyof PopoverSlotRecipeVariant]: Array<PopoverSlotRecipeVariant[key]>
 }
 
-type PopoverSlotRecipeSlot = "root"
+type PopoverSlotRecipeSlot = "root" | "contentWrapper"
 
 export type PopoverSlotRecipeVariantProps = {
   [key in keyof PopoverSlotRecipeVariant]?: ConditionalValue<PopoverSlotRecipeVariant[key]> | undefined

package/dist/styled-system/recipes/popover-slot-recipe.js

@@ -6,6 +6,10 @@ const popoverSlotRecipeSlotNames = [
     [
         "root",
         "Popover__root"
+    ],
+    [
+        "contentWrapper",
+        "Popover__contentWrapper"
     ]
 ];
 const popoverSlotRecipeSlotFns = /* @__PURE__ */ popoverSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, popoverSlotRecipeDefaultVariants, getSlotCompoundVariant(popoverSlotRecipeCompoundVariants, slotName))]);

package/dist/styled-system/recipes/visually-hidden-slot-recipe.d.ts

@@ -0,0 +1,33 @@
+/* eslint-disable */
+import type { ConditionalValue } from '../types/index';
+import type { DistributiveOmit, Pretty } from '../types/system-types';
+
+interface VisuallyHiddenSlotRecipeVariant {
+  
+}
+
+type VisuallyHiddenSlotRecipeVariantMap = {
+  [key in keyof VisuallyHiddenSlotRecipeVariant]: Array<VisuallyHiddenSlotRecipeVariant[key]>
+}
+
+type VisuallyHiddenSlotRecipeSlot = "root"
+
+export type VisuallyHiddenSlotRecipeVariantProps = {
+  [key in keyof VisuallyHiddenSlotRecipeVariant]?: ConditionalValue<VisuallyHiddenSlotRecipeVariant[key]> | undefined
+}
+
+export interface VisuallyHiddenSlotRecipeRecipe {
+  __slot: VisuallyHiddenSlotRecipeSlot
+  __type: VisuallyHiddenSlotRecipeVariantProps
+  (props?: VisuallyHiddenSlotRecipeVariantProps): Pretty<Record<VisuallyHiddenSlotRecipeSlot, string>>
+  raw: (props?: VisuallyHiddenSlotRecipeVariantProps) => VisuallyHiddenSlotRecipeVariantProps
+  variantMap: VisuallyHiddenSlotRecipeVariantMap
+  variantKeys: Array<keyof VisuallyHiddenSlotRecipeVariant>
+  splitVariantProps<Props extends VisuallyHiddenSlotRecipeVariantProps>(props: Props): [VisuallyHiddenSlotRecipeVariantProps, Pretty<DistributiveOmit<Props, keyof VisuallyHiddenSlotRecipeVariantProps>>]
+  getVariantProps: (props?: VisuallyHiddenSlotRecipeVariantProps) => VisuallyHiddenSlotRecipeVariantProps
+}
+
+/**
+ * Slot class created for the MFUI VisuallyHidden component
+ */
+export declare const visuallyHiddenSlotRecipe: VisuallyHiddenSlotRecipeRecipe

package/dist/styled-system/recipes/visually-hidden-slot-recipe.js

@@ -0,0 +1,28 @@
+import { compact, getSlotCompoundVariant, memo, splitProps } from '../helpers.js';
+import { createRecipe } from './create-recipe.js';
+const visuallyHiddenSlotRecipeDefaultVariants = {};
+const visuallyHiddenSlotRecipeCompoundVariants = [];
+const visuallyHiddenSlotRecipeSlotNames = [
+    [
+        "root",
+        "VisuallyHidden__root"
+    ]
+];
+const visuallyHiddenSlotRecipeSlotFns = /* @__PURE__ */ visuallyHiddenSlotRecipeSlotNames.map(([slotName, slotKey]) => [slotName, createRecipe(slotKey, visuallyHiddenSlotRecipeDefaultVariants, getSlotCompoundVariant(visuallyHiddenSlotRecipeCompoundVariants, slotName))]);
+const visuallyHiddenSlotRecipeFn = memo((props = {}) => {
+    return Object.fromEntries(visuallyHiddenSlotRecipeSlotFns.map(([slotName, slotFn]) => [slotName, slotFn.recipeFn(props)]));
+});
+const visuallyHiddenSlotRecipeVariantKeys = [];
+const getVariantProps = (variants) => ({ ...visuallyHiddenSlotRecipeDefaultVariants, ...compact(variants) });
+export const visuallyHiddenSlotRecipe = /* @__PURE__ */ Object.assign(visuallyHiddenSlotRecipeFn, {
+    __recipe__: false,
+    __name__: 'visuallyHiddenSlotRecipe',
+    raw: (props) => props,
+    classNameMap: {},
+    variantKeys: visuallyHiddenSlotRecipeVariantKeys,
+    variantMap: {},
+    splitVariantProps(props) {
+        return splitProps(props, visuallyHiddenSlotRecipeVariantKeys);
+    },
+    getVariantProps
+});

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

@@ -5659,6 +5659,10 @@ const tokens = {
         "value": 5000,
         "variable": "var(--mfui-z-index-dialog)"
     },
+    "zIndex.popover": {
+        "value": 6000,
+        "variable": "var(--mfui-z-index-popover)"
+    },
     "zIndex.toast.container": {
         "value": 9999,
         "variable": "var(--mfui-z-index-toast-container)"

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" | "tooltip"
+export type ZIndexToken = "dialog" | "popover" | "toast.container" | "toast.item" | "tooltip"
 
 export type BreakpointToken = "sm" | "lg"
 

package/dist/styles.css

@@ -151,6 +151,7 @@
 
 :host,:root {
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               --mfui-z-index-dialog: 5000;
+  --mfui-z-index-popover: 6000;
   --mfui-z-index-toast-container: 9999;
   --mfui-z-index-toast-item: 1000;
   --mfui-z-index-tooltip: 10000;
@@ -496,10 +497,6 @@
   --mfui-line-heights-mfui\.typography\.line-height\.condensed-input\.narrow: 21px;
         }
 
-.mfui-gXBBVr {
-  overflow-y: auto;
-}
-
 .mfui-iHuYNm {
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort);
   flex-direction: column;
@@ -808,10 +805,6 @@
   row-gap: var(--mfui-spacing-mfui\.size\.spacing\.container\.vertical\.comfort);
 }
 
-.mfui-hkWvKm {
-  overflow-y: auto;
-}
-
 .mfui-hxpVHi {
   padding-block: var(--mfui-spacing-mfui\.size\.padding\.container\.vertical\.comfort);
   padding-inline: 0px;
@@ -1326,18 +1319,6 @@
   height: var(--mfui-sizes-mfui\.size\.dimension\.badge\.diameter\.comfort);
 }
 
-.mfui-fCRxLF {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .mfui-jntiOR {
   border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.none);
   border-style: solid;
@@ -2618,18 +2599,6 @@
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
 }
 
-.mfui-iYrkDO {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
 .mfui-fKMSWf {
   gap: 0;
   display: grid;
@@ -2701,7 +2670,7 @@
   white-space: nowrap;
 }
 
-.mfui-Popover__root > .mfui-fhtZXM {
+.mfui-Popover__contentWrapper > .mfui-fhtZXM {
   overflow-x: hidden;
   overflow-y: hidden;
 }
@@ -3372,7 +3341,7 @@
   cursor: pointer;
   text-align: left;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
   width: 100%;
 }
@@ -3487,6 +3456,7 @@
   display: grid;
   font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.icon);
   min-width: var(--mfui-sizes-mfui\.size\.dimension\.icon\.square\.comfort);
+  min-height: 24px;
   margin-left: var(--mfui-spacing-mfui\.size\.spacing\.inline\.horizontal\.comfort);
 }
 
@@ -3501,7 +3471,7 @@
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
   cursor: pointer;
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
 }
 
@@ -4377,15 +4347,24 @@
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
   outline: 2px solid transparent;
   outline-offset: 2px;
+  z-index: var(--mfui-z-index-popover);
   background-color: var(--mfui-colors-mfui\.color\.base\.background\.none);
   box-shadow: var(--mfui-shadows-mfui\.elevation\.plus-1\.shadow-1), var(--mfui-shadows-mfui\.elevation\.plus-1\.shadow-2);
   pointer-events: auto;
   display: flex;
   flex-direction: column;
+}
+
+.mfui-jxYKcw {
+  flex: 1 1 auto;
+  border-radius: inherit;
+  display: flex;
+  flex-direction: column;
+  min-height: 0px;
   overflow-y: hidden;
 }
 
-.mfui-vzUZg > * {
+.mfui-jxYKcw > * {
   flex: 1 1 auto;
   overflow: auto;
   min-height: 0px;
@@ -5071,6 +5050,7 @@
   border-style: dashed;
   border-width: var(--mfui-border-widths-mfui\.size\.border\.indicator\.width\.comfort);
   border-radius: var(--mfui-radii-mfui\.size\.radius\.control-component\.comfort);
+  cursor: not-allowed;
   background-color: var(--mfui-colors-mfui\.color\.disabled\.background);
 }
 
@@ -5090,6 +5070,7 @@
   background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.none);
   font-family: var(--mfui-fonts-mfui\.typography\.font-family\.label);
   font-size: var(--mfui-font-sizes-mfui\.typography\.font-size\.control-label);
+  cursor: pointer;
   height: 100%;
 }
 
@@ -5131,7 +5112,6 @@
   display: flex;
   align-items: center;
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
-  cursor: default;
 }
 
 .mfui-bODIPe {
@@ -6756,7 +6736,7 @@ li:last-child > .mfui-cXGJls {
   height: 18px;
 }
 
-.mfui-czdCzS {
+.mfui-czdCzS,.mfui-ewjNpm {
   position: absolute;
   width: 1px;
   height: 1px;
@@ -8292,6 +8272,7 @@ li:last-child > .mfui-cXGJls {
   display: grid;
   grid-template-columns: 1fr auto;
   align-content: start;
+  align-items: center;
 }
 
 .mfui-eLqgVJ[data-mfui-nest-level="1"] {
@@ -8938,6 +8919,16 @@ li:last-child > .mfui-cXGJls {
   color: var(--mfui-colors-mfui\.color\.neutral\.content\.none);
 }
 
+.mfui-bjPlYK:is(:hover, [data-hover]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.hovered);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.hovered);
+}
+
+.mfui-bjPlYK:is(:active, [data-active]) {
+  border-color: var(--mfui-colors-mfui\.color\.neutral\.border\.pressed);
+  background-color: var(--mfui-colors-mfui\.color\.neutral\.thin-background\.pressed);
+}
+
 .mfui-hhZyjV {
   color: var(--mfui-colors-mfui\.color\.base\.content\.none);
 }