@croquiscom/pds 8.22.8 → 8.23.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @croquiscom/pds
 
+## 8.23.0
+
+### Minor Changes
+
+- fe57fc6: feat: ChipInput 컴포넌트 추가, InputChip 삭제 버튼 optional 처리
+
 ## 8.22.8
 
 ### 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/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;