@moneyforward/mfui-components 3.20.0 → 3.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moneyforward/mfui-components",
-  "version": "3.20.0",
+  "version": "3.21.0",
   "description": "React UI Component Library for all Money Forward products",
   "repository": {
     "type": "git",
@@ -31,7 +31,7 @@
   ],
   "devDependencies": {
     "@chromatic-com/storybook": "5.1.2",
-    "@pandacss/dev": "1.9.1",
+    "@pandacss/dev": "1.11.1",
     "@storybook/addon-a11y": "10.3.6",
     "@storybook/addon-docs": "10.3.6",
     "@storybook/addon-links": "10.3.6",
@@ -52,7 +52,7 @@
     "react-dom": "19.2.3",
     "storybook": "10.3.6",
     "ts-node": "10.9.2",
-    "tsx": "4.21.0",
+    "tsx": "4.22.3",
     "vitest": "3.2.4"
   },
   "peerDependencies": {
@@ -63,8 +63,8 @@
     "@floating-ui/react-dom": "^2.1.2",
     "@tanstack/react-virtual": "^3.13.18",
     "dayjs": "^1.11.13",
-    "@moneyforward/mfui-design-tokens": "^3.2.0",
-    "@moneyforward/mfui-icons-react": "^3.4.0"
+    "@moneyforward/mfui-icons-react": "^3.4.0",
+    "@moneyforward/mfui-design-tokens": "^3.2.0"
   },
   "scripts": {
     "prepare:panda": "panda codegen",

package/dist/src/DateTimeSelection/shared/BasePicker/YearSelector/YearSelector.d.ts

@@ -1,18 +0,0 @@
-import { type SelectBoxProps } from '../../../../SelectBox';
-/**
- * Props for YearSelector component
- */
-type YearSelectorProps = {
-    /**
-     * Internal value of the DatePicker
-     */
-    value?: Date;
-    /**
-     * This callback will be triggered whenever you click on a year.
-     *
-     * @param year - The year that user selected.
-     */
-    onChange: (year: number) => void;
-} & Pick<SelectBoxProps, 'targetDOMNode'>;
-export declare function YearSelector({ value, onChange, targetDOMNode }: YearSelectorProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/src/DateTimeSelection/shared/BasePicker/YearSelector/YearSelector.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useCallback, useMemo } from 'react';
-import { SelectBox } from '../../../../SelectBox';
-import { yearSelectorSlotRecipe } from '../../../../../styled-system/recipes';
-import { MAXIMUM_VIEWABLE_YEAR, MINIMUM_VIEWABLE_YEAR } from '../constants';
-import { cx } from '../../../../../styled-system/css';
-import { useCalendarLocale } from '../../CalendarLocale/CalendarLocaleContext';
-import { useDisplayJapaneseCalendar } from '../../CalendarLocale/DisplayJapaneseCalendarContext';
-import { yearToEraLabel } from '../../utilities/japaneseCalendar';
-export function YearSelector({ value, onChange, targetDOMNode }) {
-    const calendarLocale = useCalendarLocale();
-    const displayJapaneseCalendar = useDisplayJapaneseCalendar();
-    const internalYearString = useMemo(() => (value ?? new Date()).getFullYear().toString(), [value]);
-    const options = useMemo(() => Array.from({ length: MAXIMUM_VIEWABLE_YEAR - MINIMUM_VIEWABLE_YEAR + 1 }).map((_, i) => {
-        const year = MINIMUM_VIEWABLE_YEAR + i;
-        let label;
-        if (displayJapaneseCalendar) {
-            label = yearToEraLabel(year, calendarLocale ?? 'ja');
-        }
-        else if (calendarLocale === 'ja') {
-            label = `${String(year)}年`;
-        }
-        else {
-            label = String(year);
-        }
-        return { value: String(year), label };
-    }), [calendarLocale, displayJapaneseCalendar]);
-    const selectedOption = useMemo(() => options.find((o) => o.value === internalYearString), [options, internalYearString]);
-    const handleChange = useCallback((option) => {
-        if (option) {
-            onChange(Number(option.value));
-        }
-    }, [onChange]);
-    const classes = yearSelectorSlotRecipe();
-    return (_jsx(SelectBox, { value: selectedOption, options: options, size: "small", targetDOMNode: targetDOMNode, enableAutoScrollToSelectedOption: { block: 'center', behavior: 'instant' }, popoverContentProps: { className: cx(classes.optionPanel, 'mfui-YearSelector__optionPanel') }, onChange: handleChange }));
-}