feat: add new actions show and toggle for year, month, day (for examp…

…le showDay)

BREAKING CHAMNGE: Remove dayMonthYear, dayMonth, dayYear and monthYear action.
use new toggle and show action instead

src/components/datepicker/button/Button.stories.tsx

@@ -26,10 +26,9 @@ const meta = {
  'toggle',
  'next',
  'prev',
- 'dayMonthYear',
- 'dayMonth',
- 'dayYear',
- 'monthYear',
+ 'year',
+ 'month',
+ 'day',
  'today',
  'todayHour',
  ],
@@ -91,21 +90,39 @@ export const Toggle = {
  ],
 } satisfies Story;
 
-export const DayMonth = {
+export const ShowYear = {
  args: {
- action: 'dayMonth',
+ action: 'showYear',
  className:
  'leading-2 p-2 text-lg font-semibold hover:bg-gray-700 hover:text-white',
- children: 'Toggle Day-Month',
+ children: 'Show year',
  },
 } satisfies Story;
 
-export const DayYear = {
+export const ToggleYear = {
  args: {
- action: 'dayYear',
+ action: 'toggleYear',
  className:
  'leading-2 p-2 text-lg font-semibold hover:bg-gray-700 hover:text-white',
- children: 'Toggle Day-Year',
+ children: 'Toggle year',
+ },
+} satisfies Story;
+
+export const ShowMonth = {
+ args: {
+ action: 'showMonth',
+ className:
+ 'leading-2 p-2 text-lg font-semibold hover:bg-gray-700 hover:text-white',
+ children: 'Show month',
+ },
+} satisfies Story;
+
+export const ToggleMonth = {
+ args: {
+ action: 'toggleMonth',
+ className:
+ 'leading-2 p-2 text-lg font-semibold hover:bg-gray-700 hover:text-white',
+ children: 'Toggle month',
  },
 } satisfies Story;
 

src/components/datepicker/button/Button.tsx

@@ -1,6 +1,6 @@
 import { ElementType, Ref, useContext, useRef } from 'react';
 import {
- Actions,
+ Action,
  DatepickerSlot,
  useDatepickerSlot,
 } from '../../../context/context';
@@ -25,8 +25,7 @@ export type ButtonProps<
  *
  * The only exception is `today` and `todayHour` since they set value for all pickers.
  *
- * For `open`, `close` or `toggle` the default target Picker is the first Picker in siblings.
- * For others the default target Picker is the parent Picker.
+ * The default target Picker is the parent Picker.
  * If no picker found, it will be the first Picker.
  *
  * Action can be one of these
@@ -37,12 +36,11 @@ export type ButtonProps<
  * - `toggle` or `'toggle' + pickerId` close the calendar
  * - `next` or `'next' + pickerId` go to next month or year (depend on calendar mode)
  * - `prev` or `'prev' + pickerId` go to prev month or year (depend on calendar mode)
- * - `dayMonthYear` or `'dayMonthYear' + pickerId` toggle calendar mode between day and month and year
- * - `dayMonth` or `'dayMonth' + pickerId` toggle calendar mode between day and month
- * - `dayYear` or `'dayYear' + pickerId` toggle calendar mode between day and year
- * - `monthYear` or `'monthYear' + pickerId` toggle calendar mode between month and year
+ * - `year` or `'year' + pickerId` set showing items to year
+ * - `month` or `'month' + pickerId` set showing items to month
+ * - `day` or `'day' + pickerId` set showing items to day
  */
- action: Actions;
+ action: Action;
  }
 >;
 
@@ -51,7 +49,7 @@ export const Button = forwardRef(
  { action, ...props }: ButtonProps<ElemenElementTag>,
  ref: Ref<HTMLElement>,
  ) => {
- const { id, nestedLevel } = useContext(PickerContext);
+ const { id } = useContext(PickerContext);
 
  const buttonRef = useRef<HTMLButtonElement | null>(null);
  useSyncRef(buttonRef, ref);
@@ -61,8 +59,8 @@ export const Button = forwardRef(
  const ourProps = {
  onClick: () =>
  dispatch({
- type: action,
- payload: { ref: buttonRef, nestedLevel, pickerId: id },
+ type: 'action',
+ payload: { action, ref: buttonRef, pickerId: id },
  }),
  };