@croquiscom/pds 3.10.0-alpha.6 → 3.11.0

package/CHANGELOG.md

@@ -1,67 +1,10 @@
 # @croquiscom/pds
 
-## 3.10.0-alpha.6
-
-### Patch Changes
-
-- YearMonthCalendar panel disabled 조건변경
-
-## 3.10.0-alpha.3
+## 3.11.0
 
 ### 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 변경
+- 201709d: feat: Box RadioGroup Full Width 옵션 추가
 
 ## 3.10.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/radio/BoxRadioGroup.stories.d.ts

@@ -8,4 +8,5 @@ export declare const Base: any;
 export declare const Disabled: any;
 export declare const DisabledItem: any;
 export declare const SelectedDisabled: any;
+export declare const FullWidth: any;
 export declare const Controlled: () => JSX.Element;

package/dist/components/radio/Radio.d.ts

@@ -1,6 +1,6 @@
 import React, { InputHTMLAttributes } from 'react';
 import { AriaFocusProps } from '../../types/common';
-import { RadioCategoryType, RadioItemType } from './RadioGroup';
+import { RadioCategoryType, RadioItemType, RadioWidthType } from './RadioGroup';
 interface RadioBaseType extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>, AriaFocusProps {
 }
 export interface RadioProps extends RadioBaseType, RadioCategoryType<RadioItemType> {
@@ -8,6 +8,10 @@ export interface RadioProps extends RadioBaseType, RadioCategoryType<RadioItemTy
      * @default false
      */
     fill?: boolean;
+    /**
+     * @default 'auto'
+     */
+    width?: RadioWidthType;
     className?: string;
 }
 export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/radio/RadioGroup.d.ts

@@ -3,6 +3,7 @@ import { AriaFocusProps } from '../../types/common';
 import { RadioSizeUnion } from './types';
 export type AlignType = 'horizontal' | 'vertical';
 export type RadioItemType = 'default' | 'box';
+export type RadioWidthType = 'fill' | 'auto';
 export interface RadioCategoryType<T> {
     radioItemType?: T;
     /**
@@ -24,16 +25,21 @@ export interface RadioGroupProps<RadioValue> extends Omit<React.HTMLAttributes<H
     name?: string;
     items: RadioItem<RadioValue>[];
     /**
-     * radioItmType - box 일경우 spacing 속성은 미적용됩니다.
+     * RadioItemType - box 일경우 spacing 속성은 미적용됩니다.
      * @default 24
      */
     spacing?: number;
     disabled?: boolean;
     /**
-     * radioItmType - box 일경우 align 속성은 'horizontal' 고정입니다.
+     * RadioItemType - box 일경우 align 속성은 'horizontal' 고정입니다.
      * @default horizontal
      */
     align?: AlignType;
+    /**
+     * 'fill' 일경우 Full Width 값, 'auto' 일경우 기본 너비 값으로 적용됩니다.
+     * @default 'auto'
+     */
+    width?: RadioWidthType;
     keyExtractor?: (item: RadioItem<RadioValue>, index: number) => string | number;
     onChange?: (value: RadioValue) => void;
 }

package/dist/components/radio/RadioGroup.stories.d.ts

@@ -8,4 +8,5 @@ export declare const Base: any;
 export declare const Spacing: any;
 export declare const Disabled: any;
 export declare const VerticalAlign: any;
+export declare const FullWidth: any;
 export declare const Controlled: () => JSX.Element;

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

@@ -1,4 +1,4 @@
-import { RadioItemType, AlignType, RadioCategoryType } from './RadioGroup';
+import { RadioItemType, AlignType, RadioCategoryType, RadioWidthType } from './RadioGroup';
 import { RadioSizeUnion } from './types';
 export declare const getRadioGroupStyleByProps: ({ radio_item_type, align, spacing, }: {
     radio_item_type?: RadioItemType;
@@ -9,9 +9,10 @@ export declare const radio_size_css: Record<RadioSizeUnion, string>;
 export declare const getRadioWidthBySize: (size: RadioSizeUnion) => number;
 interface RadioStyleProps extends RadioCategoryType<RadioItemType> {
     fill?: boolean;
+    width?: RadioWidthType;
     disabled?: boolean;
     checked?: boolean;
     focused?: boolean;
 }
-export declare const getRadioStyleByProps: ({ radioItemType, fill, size, disabled, checked, focused }: RadioStyleProps) => import("@emotion/utils").SerializedStyles;
+export declare const getRadioStyleByProps: ({ radioItemType, fill, width, size, disabled, checked, focused, }: RadioStyleProps) => import("@emotion/utils").SerializedStyles;
 export {};