@croquiscom/pds 8.22.1 → 8.22.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @croquiscom/pds
 
+## 8.22.3
+
+### Patch Changes
+
+- 6b5d323: FormField 컴포넌트 사용 패턴 개선(status를 공유하는 형태로 제공)
+
+## 8.22.2
+
+### Patch Changes
+
+- 9c8c44e: DropdownItem transition 반영, selected 스타일적용되지 않는 이슈 수정
+
 ## 8.22.1
 
 ### Patch Changes

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

@@ -4,6 +4,7 @@ declare const meta: Meta<typeof Dropdown>;
 export default meta;
 type Story = StoryObj<typeof Dropdown>;
 export declare const Base: Story;
+export declare const NoOptions: Story;
 export declare const Error: Story;
 export declare const Flip: Story;
 export declare const WithFormHelperText: Story;

package/dist/components/dropdown/DropdownOptions.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, CSSProperties } from 'react';
-import { ExtendedRefs, FloatingContext, MiddlewareData } from '@floating-ui/react';
+import { ExtendedRefs, FloatingContext } from '@floating-ui/react';
 import { InputSize } from '../input/types';
 import { AriaFocusProps } from '../../types/common';
 import { DropdownOption } from '../dropdown';
@@ -10,10 +10,10 @@ export interface PopoverContentProps<OptionValue> {
      * @default 1030
      */
     zIndex?: number;
+    hasNoData?: boolean;
     /** @default large */
+    initialFocus?: number;
     size?: InputSize;
-    /** @default false */
-    opened: boolean;
     options: Array<DropdownOption<OptionValue>>;
     placeholder?: string;
     value?: OptionValue;
@@ -27,7 +27,6 @@ export interface PopoverContentProps<OptionValue> {
     context: FloatingContext;
     floatingStyles: CSSProperties;
     refs: ExtendedRefs<Element>;
-    hide: MiddlewareData['hide'];
     setRefs: (node: HTMLElement | null, index: number) => void;
 }
-export declare const DropdownOptions: <OptionValue extends string | number>({ className, zIndex, size: sizeProp, options, opened, onClose, value: valueProp, unstableFocusVisible, keyExtractor, onChange, focusIndex, context, getFloatingProps, getItemProps, floatingStyles, refs, hide, setRefs, }: PopoverContentProps<OptionValue> & AriaFocusProps) => React.JSX.Element;
+export declare const DropdownOptions: <OptionValue extends string | number>({ className, zIndex, size: sizeProp, initialFocus, options, onClose, hasNoData, value: valueProp, unstableFocusVisible, keyExtractor, onChange, focusIndex, context, getFloatingProps, getItemProps, floatingStyles, refs, setRefs, }: PopoverContentProps<OptionValue> & AriaFocusProps) => React.JSX.Element;

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

@@ -1,11 +1,18 @@
-import React, { ReactNode, PropsWithChildren } from 'react';
+import React, { ReactNode, PropsWithChildren, ReactElement } 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,9 @@ export interface FormFieldProps {
      * @default left
      */
     position?: FormFieldPosition;
+    children?: ReactElement<{
+        status?: InputStatus;
+    }>;
 }
-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;