@croquiscom/pds 3.10.0-alpha.6 → 4.0.0-next.0

package/CHANGELOG.md

@@ -1,73 +1,11 @@
 # @croquiscom/pds
 
-## 3.10.0-alpha.6
+## 4.0.0-next.0
 
-### Patch Changes
-
-- YearMonthCalendar panel disabled 조건변경
-
-## 3.10.0-alpha.3
-
-### Minor Changes
-
-- ecf6746: 인사이트 셀러피드백 아이콘 추가
-
-### Patch Changes
-
-- f7537e5: DateRangePicker minDate/maxDate + maxRange 혼합 케이스 추가
-
-## 3.10.0-alpha.2
-
-### Patch Changes
-
-- db5bbd2: DateRangePicker MaxRange 사용시 날짜 모두 입력 후 시작일 클릭시 클릭 범위 초기화
-  DatePicker,DateRangePicker 에러케이스여도 날짜 형식이 맞으면 달력 이동
-
-## 3.10.0-alpha.1
-
-### Patch Changes
-
-- 09019b3: 날짜 입력후 selectedDatePreset 값 변경
-
-## 3.10.0-alpha.0
-
-### Minor Changes
-
-- 36b35ec: DatePicker/DateRangePicker prevYear, nextYear 버튼 추가(default) 및 디자인 변경사항
-
-  ## BreakPoint
-
-  - DatePicker 내부 TodayButton kind 변경
-  - DatePicker 내부 TimePicker 사이즈 변경
-  - DatePicker showTimePicker 사용시 [오늘]버튼 [지금]버튼으로 변경
-  - DateRangePicker Description 제거
-  - DateRangePicker [오늘] 버튼 추가
-
-- 3806f94: DateRangePicker autoCloseable 추가 및 디자인 변경 사항 적용
-
-  ## BreakPoint
-
-  - autoCloseable (default=[true])
-    - default true 속성으로 날짜 범위 선택 완료시 캘린더 창 자동 닫기 기능
-    - displayMode 'popover'인 경우 하단의 footer 영역의 취소/확인 버튼은 노출되지 않습니다.
-    - displayMode 'bottomSheet'인 경우 적용이 불가합니다. footer 영역의 취소/확인 버튼이 default로 노출됩니다.
-  - DateRangePicker showDataPreset true인 경우, TodayButton 미노출
-  - DatePicker/DateRangePicker 내부 캘린더 DayButton UI 변경
-
-- 4f33c17: DatePicker/DateRangePicker 날짜를 직접 입력할 수 있다.
-- 2e1d69f: DateRangePicker 시작일/종료일 포커싱 선택
-- 851dd98: DatePicker, DateRangePicker 연/월을 각각 빠르게 선택할 수 있다.
-
-### Patch Changes
-
-- 3f5b2e1: - DateRangePicker 날짜가 모두 입력된 상태에서 열었을 때 시작일 또는 종료일을 현재 선택된 날짜와 관계없이 모두 선택 가능
-  - DateRangePicker 범위 선택 hover ui 변경
-
-## 3.10.0
-
-### Minor Changes
+### Major Changes
 
-- ecf6746: 인사이트 셀러피드백 아이콘 추가
+- 85a3423: - MessageManager를 이용한 컴포넌트들을 ssr시에도 사용할 수 있도록 변경
+  - Toast는 useToast의 형태로, Notification은 useNotification의 형태로 변경
 
 ## 3.9.0
 

package/dist/components/date-picker/Caption.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Locale } from 'date-fns';
 import { CaptionProps } from 'react-day-picker';
-import { CaptionLabelType, DisplayMode } from './DatePicker';
+import { DisplayMode } from './DatePicker';
 export declare const captionColor: (disabled: boolean) => string;
 export interface DatePickerCaptionProps extends CaptionProps {
     /**
@@ -12,6 +12,5 @@ export interface DatePickerCaptionProps extends CaptionProps {
     currentMonth?: Date;
     locale: Locale;
     displayMode: DisplayMode;
-    onClickCaptionLabel?: (type: CaptionLabelType) => void;
 }
-export declare const Caption: ({ multipleMonths, currentMonth: controlledMonth, displayMode, className, locale, onClickCaptionLabel, ...props }: DatePickerCaptionProps) => JSX.Element;
+export declare const Caption: ({ multipleMonths, currentMonth: controlledMonth, displayMode, className, locale, ...props }: DatePickerCaptionProps) => JSX.Element;

package/dist/components/date-picker/DatePicker.d.ts

@@ -5,7 +5,6 @@ import { TimePickerProps } from '../time-picker';
 import { InputSize } from '../input/types';
 export type DisplayTimeFormat = 'hourMinute' | 'hourMinuteSecond';
 export type DisplayMode = 'popover' | 'bottomSheet';
-export type CaptionLabelType = 'month' | 'year';
 export declare const DATE_FORMAT = "yyyy.MM.dd";
 export declare const DATE_HOUR_MINUTE_FORMAT = "yyyy.MM.dd HH:mm";
 export declare const DATE_HOUR_MINUTE_SECOND_FORMAT = "yyyy.MM.dd HH:mm:ss";

package/dist/components/date-picker/DateRangeInput.d.ts

@@ -1,21 +1,10 @@
-import React, { Dispatch, SetStateAction } from 'react';
+import React from 'react';
 import { DatePickerIconProps } from './DatePickerIcon';
 import { InputBaseProps } from '../input/InputBase';
 import { AriaFocusProps } from '../../types/common';
-export type FocusType = null | 'start' | 'end';
 export interface DateRangeInputProps extends Omit<InputBaseProps, 'leftAddon' | 'rightAddon' | 'alignment'>, AriaFocusProps {
-    placeholder?: string;
-    focused?: FocusType;
-    setFocused?: (focused: FocusType) => void;
+    fromDate?: string;
+    toDate?: string;
     onClickRemoveButton?: () => void;
-    inputValue: {
-        start: string;
-        end: string;
-    };
-    fetchInputValue: Dispatch<SetStateAction<{
-        start: string;
-        end: string;
-    }>>;
-    modalOpen: boolean;
 }
 export declare const DateRangeInput: React.ForwardRefExoticComponent<DateRangeInputProps & DatePickerIconProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/date-picker/DateRangePicker.d.ts

@@ -43,12 +43,5 @@ export interface DateRangePickerProps extends DatePickerBaseProps {
      */
     numberOfMonths?: number;
     onChange?: (start: Dates['from'], end: Dates['to']) => void;
-    /**
-     * 선택 완료시 자동으로 캘린더 선택 창을 닫습니다.
-     *   - displayMode 'bottomSheet'인 경우 적용이 불가합니다.
-     *   - displayMode 'popover'인 경우 하단의 footer 영역의 취소/확인 버튼은 노출되지 않습니다.
-     * @default true
-     */
-    autoCloseable?: boolean;
 }
-export declare const DateRangePicker: ({ width, error, disabled, className, size, showDatePreset, showRadioGroupDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths: numberOfMonthsProps, showRemoveButton, autoCloseable, opened: openProp, customDatePreset, displayMode, onOpen, onClose, onChange, }: DateRangePickerProps) => JSX.Element;
+export declare const DateRangePicker: ({ width, error, disabled, className, size, showDatePreset, showRadioGroupDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths: numberOfMonthsProps, showRemoveButton, opened: openProp, customDatePreset, displayMode, onOpen, onClose, onChange, }: DateRangePickerProps) => JSX.Element;

package/dist/components/date-picker/DateRangePicker.stories.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import { DateRangePicker } from './DateRangePicker';
-declare const _default: ComponentMeta<({ width, error, disabled, className, size, showDatePreset, showRadioGroupDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths: numberOfMonthsProps, showRemoveButton, autoCloseable, opened: openProp, customDatePreset, displayMode, onOpen, onClose, onChange, }: import("./DateRangePicker").DateRangePickerProps) => JSX.Element>;
+declare const _default: ComponentMeta<({ width, error, disabled, className, size, showDatePreset, showRadioGroupDatePreset, dates, maxDate, minDate, maxRange, numberOfMonths: numberOfMonthsProps, showRemoveButton, opened: openProp, customDatePreset, displayMode, onOpen, onClose, onChange, }: import("./DateRangePicker").DateRangePickerProps) => JSX.Element>;
 export default _default;
 export declare const Base: any;
 export declare const Disabled: any;
@@ -16,4 +16,3 @@ export declare const WithDatePreset: any;
 export declare const WithRadioGroupDatePreset: any;
 export declare const WithAllDatePreset: any;
 export declare const BottomSheetPicker: any;
-export declare const UnusedAutoCloseable: any;

package/dist/components/date-picker/hooks/constants.d.ts

@@ -1,6 +1,5 @@
-export declare const POPOVER_CELL_SIZE = 36;
-export declare const BOTTOM_SHEET_CELL_SIZE = 48;
-export declare const CELL_SIZE_MARGIN = 4;
+export declare const POPOVER_CELL_SIZE = 32;
+export declare const BOTTOM_SHEET_CELL_SIZE = 49;
 export declare const BOTTOM_SHEET_CAPTION_HEIGHT = 72;
 export declare const BOTTOM_SHEET_FOOTER_HEIGHT = 90;
 export declare const MIN_SATE_PADDING_TOP = 40;

package/dist/components/date-picker/hooks/useDatePickerAttributes.d.ts

@@ -5,18 +5,10 @@ import { ButtonProps } from '../../button';
 import { VStackProps, HStackProps } from '../../stack';
 interface DatePickerAttributes {
     maxHeight: number;
-    panelSize: {
-        width: number;
-        height: number;
-    };
     cellSize: number;
     caption: {
         kind: Typography;
-        arrow: {
-            size: number;
-            width: number;
-            height: number;
-        };
+        arrowSize: number;
         style?: CSSObject;
     };
     footer: {
@@ -24,6 +16,9 @@ interface DatePickerAttributes {
         container: Partial<HStackProps & VStackProps> & {
             style?: CSSObject;
         };
+        description?: {
+            kind: Typography;
+        };
     };
 }
 export declare function useDatePickerAttributes(displayMode: DisplayMode): DatePickerAttributes;

package/dist/components/date-picker/styles.d.ts

@@ -1,11 +1,18 @@
-import { CSSProperties } from 'react';
-import { InputSize } from '../input/types';
 export declare const date_picker_base_css: import("@emotion/utils").SerializedStyles;
 export declare const popover_picker_css: import("@emotion/utils").SerializedStyles;
 export declare const bottom_sheet_picker_css: import("@emotion/utils").SerializedStyles;
-export declare const caption_text_button_css: import("@emotion/utils").SerializedStyles;
-export declare const caption_arrow_button_css: import("@emotion/utils").SerializedStyles;
-export declare const range_input_default_style: CSSProperties;
-export declare const range_picker_focus_style: import("@emotion/utils").SerializedStyles;
-export declare const year_month_select_panel_css: import("@emotion/utils").SerializedStyles;
-export declare const getRangeFocusInputStyle: (size: InputSize) => import("@emotion/utils").SerializedStyles;
+export declare const caption_button_css: import("@emotion/utils").SerializedStyles;
+export declare const range_input_default_style: {
+    border: number;
+    borderRadius: number;
+    backgroundColor: string;
+    padding: number;
+    transition: string;
+    '&:hover': {
+        borderColor: string;
+    };
+    '&:focus, &:focus-within': {
+        outline: string;
+        border: string;
+    };
+};

package/dist/components/icons/generated/index.d.ts

@@ -46,7 +46,6 @@ export { default as IconBulb } from './Bulb';
 export { default as IconBulbFill } from './BulbFill';
 export { default as IconCalendar } from './Calendar';
 export { default as IconCamera } from './Camera';
-export { default as IconCancel } from './Cancel';
 export { default as IconCart } from './Cart';
 export { default as IconCategoryBeauty } from './CategoryBeauty';
 export { default as IconCategoryBrand } from './CategoryBrand';
@@ -91,11 +90,6 @@ export { default as IconColoredCoupon } from './ColoredCoupon';
 export { default as IconColoredDocument } from './ColoredDocument';
 export { default as IconColoredExcel } from './ColoredExcel';
 export { default as IconColoredEyes } from './ColoredEyes';
-export { default as IconColoredFaceBad } from './ColoredFaceBad';
-export { default as IconColoredFaceGood } from './ColoredFaceGood';
-export { default as IconColoredFaceNeutral } from './ColoredFaceNeutral';
-export { default as IconColoredFaceVeryBad } from './ColoredFaceVeryBad';
-export { default as IconColoredFaceVeryGood } from './ColoredFaceVeryGood';
 export { default as IconColoredFlag } from './ColoredFlag';
 export { default as IconColoredGift } from './ColoredGift';
 export { default as IconColoredGraphDown } from './ColoredGraphDown';

package/dist/components/message/MessageManager.d.ts

@@ -1,13 +1,13 @@
 import { FunctionComponent } from 'react';
 import { NotificationComponentProps } from '../notification';
 import { ToastComponentProps } from '../toast';
-import { MessageDirection, MessagePosition } from './types';
+import type { MessageDirection, MessagePositionType } from './types';
 export interface MessageContainerProps {
     /**
      * @desc 메세지 노출 위치
      * @default top-center
      */
-    position: MessagePosition;
+    position: MessagePositionType;
     /**
      * @desc position 기준으로 커스텀 위치, center일 경우 적용되지 않습니다
      */
@@ -30,12 +30,14 @@ export interface MessageContainerProps {
      */
     direction?: MessageDirection;
 }
-type MessageContainerKey = `${MessagePosition}_${MessageDirection}_${number}_${number}`;
+type MessageContainerType = 'toast' | 'notification';
+type MessageContainerKey = `${MessagePositionType}_${MessageDirection}_${number}_${number}`;
 type MessageComponentTypes = ToastComponentProps | NotificationComponentProps;
 export type MessageOptions<T extends MessageComponentTypes> = Omit<T, 'destroy' | 'position'> & Partial<MessageContainerProps>;
 export declare class MessageManager<T extends MessageComponentTypes> {
     private root;
     private component;
+    private type;
     private z_index;
     private default_max_count;
     private default_offset;
@@ -43,15 +45,22 @@ export declare class MessageManager<T extends MessageComponentTypes> {
     private default_direction;
     private container_keys;
     private messages;
-    constructor({ component, container_id, z_index, default_max_count, default_offset, default_position, default_direction, }: {
+    private static instance;
+    constructor({ component, type, z_index, default_max_count, default_offset, default_position, default_direction, }: {
         component: FunctionComponent<T>;
-        container_id: 'notification' | 'toast';
+        type: MessageContainerType;
         z_index?: number;
         default_max_count?: number;
         default_offset?: number;
-        default_position?: MessagePosition;
+        default_position?: MessagePositionType;
         default_direction?: MessageDirection;
     });
+    static getInstance(type: MessageContainerType): MessageManager<MessageComponentTypes>;
+    set setInstance({ default_max_count, default_offset, default_position, }: {
+        default_max_count: number;
+        default_offset: number;
+        default_position: MessagePositionType;
+    });
     static generateContainerKey({ position, direction, offset_x, offset_y }: MessageContainerProps): MessageContainerKey;
     static getContainerPropsByKey(key: MessageContainerKey): MessageContainerProps;
     private generateMessageId;

package/dist/components/message/types.d.ts

@@ -6,5 +6,5 @@ export declare const MessagePosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type MessagePosition = typeof MessagePosition[keyof typeof MessagePosition];
+export type MessagePositionType = typeof MessagePosition[keyof typeof MessagePosition];
 export type MessageDirection = Extract<CSSProperties['flexDirection'], 'column' | 'column-reverse'>;

package/dist/components/notification/Notification.d.ts

@@ -1,6 +1,5 @@
 import React, { ReactNode } from 'react';
-import { MessageManager } from '../message';
-import { NotificationKind, NotificationPosition } from './types';
+import type { NotificationKind, NotificationPositionType } from './types';
 export interface NotificationComponentProps {
     /**
      * id값을 지정할 수 있습니다.
@@ -29,7 +28,6 @@ export interface NotificationComponentProps {
     onClose?: () => void;
     onClickLink?: () => void;
     destroy: () => void;
-    position: NotificationPosition;
+    position: NotificationPositionType;
 }
 export declare const NotificationComponent: React.FC<NotificationComponentProps>;
-export declare const Notification: MessageManager<NotificationComponentProps>;

package/dist/components/notification/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Notification';
 export * from './types';
+export * from './useNotification';

package/dist/components/notification/styles.d.ts

@@ -1,3 +1,3 @@
-import { NotificationKind, NotificationPosition } from './types';
+import type { NotificationKind, NotificationPositionType } from './types';
 export declare const notification_kind_css: Record<NotificationKind, string>;
-export declare const notification_hide_animation: (position: NotificationPosition) => import("@emotion/serialize").Keyframes;
+export declare const notification_hide_animation: (position: NotificationPositionType) => import("@emotion/serialize").Keyframes;

package/dist/components/notification/types.d.ts

@@ -6,4 +6,4 @@ export declare const NotificationPosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type NotificationPosition = typeof NotificationPosition[keyof typeof NotificationPosition];
+export type NotificationPositionType = typeof NotificationPosition[keyof typeof NotificationPosition];

package/dist/components/notification/useNotification.d.ts

@@ -0,0 +1,3 @@
+import { MessageManager } from '../message';
+import { NotificationComponentProps } from './Notification';
+export declare function useNotification(): MessageManager<NotificationComponentProps>;

package/dist/components/toast/Toast.d.ts

@@ -1,5 +1,4 @@
 import React, { ReactNode } from 'react';
-import { MessageManager } from '../message';
 import { ToastSize, ToastKind } from './types';
 export interface ToastComponentProps {
     /**
@@ -27,4 +26,3 @@ export interface ToastComponentProps {
     destroy: () => void;
 }
 export declare const ToastComponent: React.FC<ToastComponentProps>;
-export declare const Toast: MessageManager<ToastComponentProps>;

package/dist/components/toast/index.d.ts

@@ -1,2 +1,3 @@
 export * from './Toast';
 export * from './types';
+export * from './useToast';

package/dist/components/toast/types.d.ts

@@ -8,5 +8,5 @@ export declare const ToastPosition: {
     readonly BOTTOM_CENTER: "bottom-center";
     readonly CENTER: "center";
 };
-export type ToastPosition = typeof ToastPosition[keyof typeof ToastPosition];
+export type ToastPositionType = typeof ToastPosition[keyof typeof ToastPosition];
 export type ToastDirection = MessageDirection;

package/dist/components/toast/useToast.d.ts

@@ -0,0 +1,3 @@
+import { MessageManager } from '../message';
+import { ToastComponentProps } from './Toast';
+export declare function useToast(): MessageManager<ToastComponentProps>;