@croquiscom/pds 8.22.7 → 8.23.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @croquiscom/pds
 
+## 8.23.0
+
+### Minor Changes
+
+- fe57fc6: feat: ChipInput 컴포넌트 추가, InputChip 삭제 버튼 optional 처리
+
+## 8.22.8
+
+### Patch Changes
+
+- 3913ac9: DateUnitPicker min/max모두같은 월 설정시 월단위 선택 오류 수정
+- 7f2e511: FormField status를 공유하는 형태로 변경, children type변경
+
 ## 8.22.7
 
 ### Patch Changes

package/dist/components/chip/Chip.d.ts

@@ -3,6 +3,8 @@ import { InputSize } from '../input/types';
 export interface ChipProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
     /** @default medium */
     size?: InputSize;
-    onDelete: () => void;
+    /** @default true */
+    canDelete?: boolean;
+    onDelete?: () => void;
 }
 export declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement>>;

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

@@ -3,6 +3,6 @@ export declare const input_chip_base_css: import("@emotion/utils").SerializedSty
 export declare const input_chip_x_enabled_css: import("@emotion/utils").SerializedStyles;
 export declare const input_chip_x_disabled_css: import("@emotion/utils").SerializedStyles;
 export declare const input_chip_height_size_css: Record<InputSize, string>;
-export declare const input_chip_size_css: Record<InputSize, string>;
+export declare const getInputChipSizeStyle: (size: InputSize, canDelete?: boolean) => "" | import("@emotion/utils").SerializedStyles;
 export declare const select_chip_base_css: import("@emotion/utils").SerializedStyles;
 export declare const select_chip_selected_css: import("@emotion/utils").SerializedStyles;

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

@@ -9,5 +9,6 @@ export declare const Error: Story;
 export declare const Size: Story;
 export declare const ShowRemoveButton: Story;
 export declare const MinDate: Story;
+export declare const MinMaxDate: Story;
 export declare const MaxDate: Story;
 export declare const BottomSheetPicker: Story;

package/dist/components/form/FormField.d.ts

@@ -2,10 +2,17 @@ import React, { ReactNode, PropsWithChildren } from 'react';
 import { HelpTextProps } from '../text';
 import { VerticalAlignment } from '../stack';
 import { CSSValueWithLength } from '../../styles';
+import { InputStatus } from '../input/types';
 type FormFieldAlignment = Extract<VerticalAlignment, 'top' | 'center'>;
 type FormFieldPosition = 'left' | 'top';
 export interface FormFieldProps {
     className?: string;
+    /**
+     * FormField의 상태를 지정하면 children과 formHelperText 상태를 공유합니다.
+     * PDS의 Input, Dropdown, DropdownInput, NumericInput 컴포넌트만 공유하도록 제한합니다.
+     * 다른 컴포넌트는 사용하더라도 formHelperText에만 status가 적용됩니다.
+     */
+    status?: InputStatus;
     label?: ReactNode;
     /**
      * 라벨 우측 렌더링될 Addon 요소
@@ -20,7 +27,7 @@ export interface FormFieldProps {
      */
     helper?: HelpTextProps;
     /**
-     * FormHelperText 컴포넌트로 라벨 아래에 메세지를 표시합니다.
+     * FormHelperText 컴포넌트로 children 아래에 메세지를 표시합니다.
      */
     formHelperText?: ReactNode;
     /**
@@ -39,6 +46,7 @@ export interface FormFieldProps {
      * @default left
      */
     position?: FormFieldPosition;
+    children?: ReactNode;
 }
-export declare const FormField: ({ className, label, rightAddon, required, helper, formHelperText, labelWidth, alignment, position, children, }: PropsWithChildren<FormFieldProps>) => React.JSX.Element;
+export declare const FormField: ({ className, label, status, rightAddon, required, helper, formHelperText, labelWidth, alignment, position, children, }: PropsWithChildren<FormFieldProps>) => React.JSX.Element;
 export {};

package/dist/components/form/FormField.stories.d.ts

@@ -10,7 +10,9 @@ export declare const WithCheckboxGroup: Story;
 export declare const WithHelpPopover: Story;
 export declare const TopAlign: Story;
 export declare const TopPosition: Story;
+export declare const SuccessCheckboxGroup: Story;
 export declare const Error: Story;
+export declare const ErrorDropdown: Story;
 export declare const ErrorLongLabel: Story;
 export declare const ErrorOverflowLabel: Story;
 export declare const ErrorTop: Story;

package/dist/components/input/ChipInput.d.ts

@@ -0,0 +1,51 @@
+import React, { CSSProperties } from 'react';
+import { AriaFocusProps } from '../../types/common';
+import { InputSize, InputStatus } from './types';
+export interface ChipInputValue {
+    value: string;
+    canDelete?: boolean;
+    disabled?: boolean;
+}
+export interface ChipInputProps extends AriaFocusProps {
+    value?: ChipInputValue[];
+    disabled?: boolean;
+    placeholder?: string;
+    /** @default large */
+    size?: InputSize;
+    /**
+     * `error` 이외에 상태는 별도로 UI상 표시되지 않습니다.
+     * @default info
+     * */
+    status?: InputStatus;
+    /**
+     * 칩 목록은 한 줄로 제한하거나 개행되도록 할 수 있습니다.
+     *
+     * - `nowrap`: 칩이 인풋의 너비를 초과하면 수평으로 스크롤됩니다.
+     * - `wrap`: 칩이 인풋의 너비를 초과하면 수직으로 스크롤됩니다.
+     * @default nowrap
+     * */
+    wrap?: 'wrap' | 'nowrap';
+    width?: number;
+    /**
+     * `wrap` prop이 `"wrap"`인 경우 최대 높이를 지정할 수 있습니다.
+     * 최대 높이를 초과하면 수직으로 스크롤됩니다.
+     * `maxHeight` prop이 지정되지 않으면 `size` prop에 따라 기본 높이가 적용됩니다.(small: 66px, medium: 80px, large: 90px)
+     */
+    maxHeight?: number;
+    className?: string;
+    style?: CSSProperties;
+    onChange?: (value: ChipInputValue[]) => void;
+}
+export declare const getChipInputPaddingBySize: (size: InputSize) => string;
+/**
+ * 입력된 텍스트가 있다면 아래의 경우에 Chip이 생성 됩니다.
+ * - 엔터키를 입력
+ * - 쉼표(,)를 입력
+ * - blur 이벤트가 발생
+ * - 붙여넣기시 쉼표(,)로 구분된 값들이 칩으로 추가
+ *
+ * 아래의 경우에 Chip이 삭제 됩니다.
+ * - Chip의 삭제 버튼을 클릭
+ * - 입력된 텍스트가 없는 상태에서 백스페이스를 누르면 마지막 Chip이 삭제됩니다.
+ */
+export declare const ChipInput: React.ForwardRefExoticComponent<ChipInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/input/ChipInput.stories.d.ts

@@ -0,0 +1,11 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ChipInput } from './ChipInput';
+declare const meta: Meta<typeof ChipInput>;
+export default meta;
+type Story = StoryObj<typeof ChipInput>;
+export declare const Base: Story;
+export declare const Value: Story;
+export declare const Wrapping: Story;
+export declare const Disabled: Story;
+export declare const Size: Story;
+export declare const StatusWithFormField: Story;