@croquiscom/pds 8.21.4 → 8.22.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @croquiscom/pds
 
+## 8.22.0
+
+### Minor Changes
+
+- a1d2e89: PopoverButton 추가
+- b7d23a1: linetabs side padding option 추가
+
 ## 8.21.4
 
 ### Patch Changes

package/assets/icons/DotsHorizontal.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19 13.5C19.8284 13.5 20.5 12.8284 20.5 12C20.5 11.1716 19.8284 10.5 19 10.5C18.1716 10.5 17.5 11.1716 17.5 12C17.5 12.8284 18.1716 13.5 19 13.5Z" fill="#363644"/>
+<path d="M13.5 12C13.5 12.8284 12.8284 13.5 12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12Z" fill="#363644"/>
+<path d="M6.5 12C6.5 12.8284 5.82843 13.5 5 13.5C4.17157 13.5 3.5 12.8284 3.5 12C3.5 11.1716 4.17157 10.5 5 10.5C5.82843 10.5 6.5 11.1716 6.5 12Z" fill="#363644"/>
+</svg>

package/assets/icons/DotsVertical.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.5 19C10.5 19.8284 11.1716 20.5 12 20.5C12.8284 20.5 13.5 19.8284 13.5 19C13.5 18.1716 12.8284 17.5 12 17.5C11.1716 17.5 10.5 18.1716 10.5 19Z" fill="#363644"/>
+<path d="M12 6.5C11.1716 6.5 10.5 5.82843 10.5 5C10.5 4.17157 11.1716 3.5 12 3.5C12.8284 3.5 13.5 4.17157 13.5 5C13.5 5.82843 12.8284 6.5 12 6.5Z" fill="#363644"/>
+<path d="M12 13.5C11.1716 13.5 10.5 12.8284 10.5 12C10.5 11.1716 11.1716 10.5 12 10.5C12.8284 10.5 13.5 11.1716 13.5 12C13.5 12.8284 12.8284 13.5 12 13.5Z" fill="#363644"/>
+</svg>

package/dist/components/button/PopoverButton.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { DropdownOption } from '../dropdown';
+import { AriaFocusProps } from '../../types/common';
+import { ButtonProps } from './Button';
+export interface PopoverButtonProps<OptionValue> extends Omit<ButtonProps, 'size' | 'value' | 'onChange'> {
+    /** @default small */
+    size?: 'xsmall' | 'small' | 'medium';
+    /**
+     * floating 요소가 reference 영역을 넘어갈 경우 자동 위치 처리 사용 유무
+     *  - 자동 위치 상/하만 적용됩니다.
+     * @default true
+     */
+    autoPlacement?: boolean;
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1030
+     */
+    zIndex?: number;
+    /** @default true */
+    optionsMatchRefWidth?: boolean;
+    /**
+     * Popover OptionList maxHeight값
+     * @default 400
+     */
+    maxHeight?: number;
+    disabled?: boolean;
+    value?: OptionValue;
+    onChange?: (value: OptionValue) => void;
+    options: Array<DropdownOption<OptionValue>>;
+}
+export declare const PopoverButton: <OptionValue extends string | number>({ size: sizeProp, loading, type, kind, startIcon, className, children, zIndex, autoPlacement: autoPlacementProps, optionsMatchRefWidth, options, value: valueProp, maxHeight, disabled, unstableFocusVisible, onChange, }: PopoverButtonProps<OptionValue> & AriaFocusProps) => React.JSX.Element;

package/dist/components/button/PopoverButton.stories.d.ts

@@ -0,0 +1,9 @@
+import { PopoverButton } from './PopoverButton';
+import type { Meta, StoryObj } from '@storybook/react';
+declare const meta: Meta<typeof PopoverButton>;
+export default meta;
+type Story = StoryObj<typeof PopoverButton>;
+export declare const Short: Story;
+export declare const Long: Story;
+export declare const Disabled: Story;
+export declare const Loading: Story;

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

@@ -0,0 +1,33 @@
+import React, { ReactNode, CSSProperties } from 'react';
+import { ExtendedRefs, FloatingContext, MiddlewareData } from '@floating-ui/react';
+import { InputSize } from '../input/types';
+import { AriaFocusProps } from '../../types/common';
+import { DropdownOption } from '../dropdown';
+export interface PopoverContentProps<OptionValue> {
+    className?: string;
+    /**
+     * 기본값으로 [ZIndexOrder](https://github.com/croquiscom/pds/blob/main/src/styles/zIndex.ts) 규칙을 적용합니다.
+     * @default 1030
+     */
+    zIndex?: number;
+    /** @default large */
+    size?: InputSize;
+    /** @default false */
+    opened: boolean;
+    options: Array<DropdownOption<OptionValue>>;
+    placeholder?: string;
+    value?: OptionValue;
+    onClose: () => void;
+    keyExtractor?: (item: DropdownOption<OptionValue>, index: number) => string | number;
+    onChange?: (value: OptionValue) => void;
+    renderLabel?: (selectedOption: DropdownOption<OptionValue>) => ReactNode;
+    focusIndex?: number | null;
+    getFloatingProps: (props: Record<string, unknown>) => Record<string, unknown>;
+    getItemProps: (props: Record<string, unknown>) => Record<string, unknown>;
+    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;

package/dist/components/icons/generated/DotsHorizontal.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgDotsHorizontal: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgDotsHorizontal;

package/dist/components/icons/generated/DotsVertical.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { IconProps } from '.';
+declare const SvgDotsVertical: ({ size, color, secondaryColor, ...props }: IconProps) => JSX.Element;
+export default SvgDotsVertical;

package/dist/components/icons/generated/index.d.ts

@@ -152,6 +152,8 @@ export { default as IconCrop } from './Crop';
 export { default as IconDiscountTagFill } from './DiscountTagFill';
 export { default as IconDocument } from './Document';
 export { default as IconDocumentCheck } from './DocumentCheck';
+export { default as IconDotsHorizontal } from './DotsHorizontal';
+export { default as IconDotsVertical } from './DotsVertical';
 export { default as IconEdit } from './Edit';
 export { default as IconEmail } from './Email';
 export { default as IconExcel } from './Excel';

package/dist/components/tabs/LineTabs.d.ts

@@ -20,7 +20,12 @@ export interface LineTabsProps {
      * @default false
      */
     dense?: boolean;
+    /**
+     * side padding on/off
+     * @default true
+     */
+    horizontalPadding?: boolean;
     activeTabId?: string;
     onChange?: (id?: string) => void;
 }
-export declare const LineTabs: ({ className, children, dense, width, activeTabId, onChange, }: PropsWithChildren<LineTabsProps>) => React.JSX.Element;
+export declare const LineTabs: ({ className, children, dense, horizontalPadding, width, activeTabId, onChange, }: PropsWithChildren<LineTabsProps>) => React.JSX.Element;

package/dist/components/tabs/Tabs.stories.d.ts

@@ -8,3 +8,4 @@ export declare const Fill: Story;
 export declare const Dense: Story;
 export declare const WithIcon: Story;
 export declare const Scroll: Story;
+export declare const NoSidePadding: Story;