@croquiscom/pds 5.4.1 → 5.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @croquiscom/pds
 
+## 5.5.0
+
+### Minor Changes
+
+- 672f21d: CategorySelector, Chip 추가 및 Popover.padding 추가
+
 ## 5.4.1
 
 ### Patch Changes

package/dist/components/category-selector/CategorySelector.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="react" />
+export interface Category {
+    /**
+     * 루트 ~ 해당 카테고리 텍스트
+     * ex) 패션의류/아우터/코트/트렌치코트
+     * @see DropdownChip - label
+     */
+    label: string;
+    /**
+     * 해당 카테고리 텍스트
+     * ex) 트렌치코트
+     * @see ListItem - category.name
+     */
+    name: string;
+    key: string;
+    parentKey: string;
+    childrenKeys?: Array<string>;
+    level: number;
+}
+export interface CategorySelectorProps {
+    className?: string;
+    /**
+     * 레벨별 카테고리 데이터
+     * @see CategorySelector.stories - categories_by_levels
+     */
+    categoriesByLevels: Array<Array<Category>>;
+    selectedKeys: Array<string>;
+    /**
+     * 선택값 변경 이벤트
+     * @param selectedKeys 선택된 카테고리 키 리스트
+     * @param isLeaf selectedKeys의 리프 여부 (multiple == false 일 때만 내려감)
+     * @returns
+     */
+    onSelectedKeysChange: (selectedKeys: Array<string>, isLeaf?: boolean) => void;
+    /**
+     * 체크박스 사용여부
+     * true일 경우 멀티 셀렉트 가능
+     * @default false
+     */
+    multiple?: boolean;
+    /**
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 각 ListItem의 너비
+     * @default 240
+     */
+    width?: number;
+    /**
+     * 각 List의 높이
+     * @default 332
+     */
+    height?: number;
+}
+export declare const CategorySelector: ({ className, categoriesByLevels, selectedKeys, onSelectedKeysChange, multiple, disabled, width, height, }: CategorySelectorProps) => JSX.Element;

package/dist/components/category-selector/CategorySelector.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { CategorySelector } from './CategorySelector';
+declare const _default: ComponentMeta<({ className, categoriesByLevels, selectedKeys, onSelectedKeysChange, multiple, disabled, width, height, }: import("./CategorySelector").CategorySelectorProps) => JSX.Element>;
+export default _default;
+export declare const Base: any;
+export declare const MultiSelectable: any;
+export declare const Disabled: any;
+export declare const WithDropdownChip: ComponentStory<typeof CategorySelector>;

package/dist/components/category-selector/ChipsDropdown.d.ts

@@ -0,0 +1,28 @@
+import React, { PropsWithChildren } from 'react';
+import { CSSValueWithLength } from '../../styles';
+import { DropdownLabelProps } from '../dropdown/DropdownLabel';
+import { InputSize } from '../input/types';
+export interface ChipsDropdownOption<OptionValue> {
+    label: string;
+    value: OptionValue;
+}
+export interface ChipsDropdownProps<OptionValue> {
+    /**
+     * Input 너비를 지정할 수 있습니다.
+     * @default 240
+     */
+    width?: CSSValueWithLength;
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1030
+     */
+    zIndex?: number;
+    /** @default large */
+    size?: InputSize;
+    disabled?: boolean;
+    selectedOptions: Array<ChipsDropdownOption<OptionValue>>;
+    onOptionValuesChange?: (values: Array<OptionValue>) => void;
+    placeholder?: string;
+    status?: DropdownLabelProps['status'];
+}
+export declare const ChipsDropdown: <OptionValue extends string | number>({ children, width, zIndex, disabled, selectedOptions, onOptionValuesChange, placeholder, status, size: sizeProp, }: React.PropsWithChildren<ChipsDropdownProps<OptionValue>>) => JSX.Element;

package/dist/components/category-selector/List.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { Category } from './CategorySelector';
+export interface ListProps {
+    level: number;
+    categories: Array<Category>;
+    selectedKeys: Array<string>;
+    onSelect: (category: Category) => void;
+    onClick: (category: Category) => void;
+    isSelected: (category: Category) => boolean;
+    isIndeterminate: (category: Category) => boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+}
+export declare const List: ({ level, categories, selectedKeys, onSelect, onClick, isSelected, isIndeterminate, multiple, disabled, }: ListProps) => JSX.Element;

package/dist/components/category-selector/ListItem.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { Category } from './CategorySelector';
+export interface ListItemProps {
+    category: Category;
+    selectedKeys: Array<string>;
+    onSelect: (category: Category) => void;
+    onClick: (category: Category) => void;
+    isSelected: (category: Category) => boolean;
+    isIndeterminate: (category: Category) => boolean;
+    multiple?: boolean;
+    disabled?: boolean;
+}
+export declare const ListItem: ({ category, multiple, disabled, selectedKeys, onSelect, onClick, isSelected, isIndeterminate, }: ListItemProps) => JSX.Element;

package/dist/components/category-selector/index.d.ts

@@ -0,0 +1 @@
+export * from './CategorySelector';

package/dist/components/category-selector/styles.d.ts

@@ -0,0 +1,6 @@
+import { InputSize } from '../input/types';
+export declare const input_chip_base_css: import("@emotion/utils").SerializedStyles;
+export declare const list_item_enabled_css: import("@emotion/utils").SerializedStyles;
+export declare const list_item_selected_css: import("@emotion/utils").SerializedStyles;
+export declare const list_item_disabled_css: import("@emotion/utils").SerializedStyles;
+export declare const input_chip_size_css: Record<InputSize, string>;

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

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

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

@@ -0,0 +1,7 @@
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import React from 'react';
+import { Chip } from './Chip';
+declare const _default: ComponentMeta<React.ForwardRefExoticComponent<import("./Chip").ChipProps & React.RefAttributes<HTMLButtonElement>>>;
+export default _default;
+export declare const InputChip: any;
+export declare const InputChipDelete: ComponentStory<typeof Chip>;

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

@@ -0,0 +1 @@
+export * from './Chip';

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

@@ -0,0 +1,6 @@
+import { InputSize } from '../input/types';
+export declare const input_chip_base_css: import("@emotion/utils").SerializedStyles;
+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>;

package/dist/components/popover/Popover.d.ts

@@ -52,6 +52,11 @@ export interface PopoverProps {
      * @default true
      */
     arrow?: boolean;
+    /**
+     * 팝오버 내부여백
+     * @default 16,20(arrow)
+     */
+    padding?: number;
 }
 export declare const Popover: React.FC<PopoverProps>;
 export {};