@croquiscom/pds 0.12.0 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @croquiscom/pds
 
+## 0.13.0
+
+### Minor Changes
+
+- c07909a: Dropdown 컴포넌트 추가
+
+  - listbox role 기본형 지원
+
 ## 0.12.0
 
 ### Minor Changes

package/dist/dropdown/Dropdown.d.ts

@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+import { CSSValueWithLength } from '../styles/buildCSSWithLength';
+export interface DropdownOption<OptionValue> {
+    label: ReactNode;
+    value: OptionValue;
+    disabled?: boolean;
+}
+export interface DropdownProps<OptionValue> {
+    className?: string;
+    width?: CSSValueWithLength;
+    disabled?: boolean;
+    options: Array<DropdownOption<OptionValue>>;
+    placeholder?: string;
+    value?: OptionValue;
+    keyExtractor?: (item: DropdownOption<OptionValue>, index: number) => string | number;
+    onChange?: (value: OptionValue) => void;
+}
+export declare const Dropdown: <OptionValue extends string | number>({ className, width, disabled, options, placeholder, value, keyExtractor, onChange, }: DropdownProps<OptionValue>) => JSX.Element;

package/dist/dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { Dropdown } from './Dropdown';
+declare const _default: ComponentMeta<(<OptionValue extends string | number>({ className, width, disabled, options, placeholder, value, keyExtractor, onChange, }: import("./Dropdown").DropdownProps<OptionValue>) => JSX.Element)>;
+export default _default;
+export declare const Base: any;
+export declare const Disabled: any;
+export declare const DisabledOptionItem: any;
+export declare const WithIcon: ComponentStory<typeof Dropdown>;
+export declare const Controlled: ComponentStory<typeof Dropdown>;

package/dist/dropdown/DropdownItem.d.ts

@@ -0,0 +1,10 @@
+import React, { LiHTMLAttributes } from 'react';
+export interface DropdownItemProps extends LiHTMLAttributes<HTMLLIElement> {
+    disabled?: boolean;
+    /**
+     *  @default false
+     *  Option 선택 여부
+     */
+    selected?: boolean;
+}
+export declare const DropdownItem: React.ForwardRefExoticComponent<DropdownItemProps & React.RefAttributes<HTMLLIElement>>;

package/dist/dropdown/DropdownLabel.d.ts

@@ -0,0 +1,17 @@
+import React, { AllHTMLAttributes } from 'react';
+import { CSSValueWithLength } from '../styles/buildCSSWithLength';
+export interface DropdownLabelProps extends AllHTMLAttributes<HTMLDivElement> {
+    width?: CSSValueWithLength;
+    disabled?: boolean;
+    /**
+     *  @default false
+     *  Option listbox 오픈 여부
+     */
+    expanded?: boolean;
+    /**
+     * @default false
+     * Option 선택 여부
+     */
+    selected?: boolean;
+}
+export declare const DropdownLabel: React.ForwardRefExoticComponent<DropdownLabelProps & React.RefAttributes<HTMLDivElement>>;

package/dist/dropdown/index.d.ts

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

package/dist/dropdown/styles.d.ts

@@ -0,0 +1,24 @@
+export declare const dropdown_label_base_css: import("@emotion/utils").SerializedStyles;
+export declare const dropdown_label_expanded_style: {
+    border: string;
+    '&:hover': {
+        border: string;
+    };
+};
+export declare const dropdown_label_selected_style: {
+    color: string;
+};
+export declare const dropdown_item_group_css: import("@emotion/utils").SerializedStyles;
+export declare const dropdown_item_base_css: import("@emotion/utils").SerializedStyles;
+export declare const dropdown_item_disabled_style: {
+    backgroundColor: string;
+    color: string;
+    cursor: string;
+};
+export declare const dropdown_item_selected_style: {
+    backgroundColor: string;
+    color: string;
+    '&:hover, &:focus': {
+        backgroundColor: string;
+    };
+};

package/dist/index.d.ts

@@ -15,5 +15,6 @@ export * from './tooltip';
 export * from './popover';
 export * from './textarea';
 export * from './input';
+export * from './dropdown';
 export * from './menu';
 export * from './container';