@farmzone/fz-react-ui 1.0.14 → 1.0.15

package/dist/index.d.cts

@@ -1152,9 +1152,19 @@ interface MenuSection {
     items: Array<MenuItem>;
 }
 type SidebarVariant = "light" | "dark" | "system-dark" | "system-light";
+interface SidebarHeaderRenderProps {
+    isCollapsed: boolean;
+    toggleCollapse: () => void;
+}
 interface SidebarProps {
     menuSections: Array<MenuSection>;
-    header?: ReactNode;
+    /**
+     * ReactNode로 넘기면 기존과 동일하게 nav와 함께 collapse 시 fade-out 됨.
+     * 함수로 넘기면 collapse 상태와 무관하게 항상 렌더링되며, { isCollapsed, toggleCollapse }를
+     * 전달받아 헤더 내부에 자체 collapse 토글 UI를 둘 수 있음 — 이 경우 showCollapseButton은 무시되고
+     * 기본 floating 버튼은 렌더링되지 않음.
+     */
+    header?: ReactNode | ((props: SidebarHeaderRenderProps) => ReactNode);
     footer?: ReactNode;
     className?: string;
     showCollapseButton?: boolean;
@@ -1415,4 +1425,4 @@ declare const Z_INDEX: {
 };
 type ZIndexKey = keyof typeof Z_INDEX;
 
-export { ArrowIcon, Badge, type BadgeProps, type BaseParams, BaseUploader, type BaseUploaderProps, BreadCrumb, type BreadCrumbItem, type BreadCrumbMenuItem, type BreadCrumbProps, type BreadCrumbRoot, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarYearRange, Carousel, type CarouselProps, type CarouselRef, Checkbox, type CheckboxProps, type Column, type ConfirmOptions, DatePicker, DebouncedButton, type DebouncedButtonProps, DetailContent, type DetailContentProps, type DetailField, type DetailFieldOrSection, DetailModalFrame, type DetailMode, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, type FilterRow, type FormFieldConfig, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, type MenuChild, type MenuGrandchild, type MenuItem, type MenuSection, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, type ModalIconHeaderProps, ModalOverlay, type ModalProps, type ModalType, MultiTabBar as MultiTab, type MultiTab as MultiTabItem, PageFilter, type PageParams, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverPosition, PopoverTitle, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, ScrollArea, ScrollBar, SearchAddress, type SearchAddressProps, SearchBar, type SearchBarProps, Select, Select$1 as SelectBase, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionType, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, type SidebarProps, SimplePopover, type SimplePopoverProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOption, type SortOrder, type SortParams, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, SubmitForm, Switch, type SwitchProps, Tab, type TabItem, type TabProps, Table, Textarea, type TextareaProps, type ToastPosition, type ToastProps, ToastProvider, type ToastType, ToggleSwitch, Tooltip, type TooltipProps, type UseParams, type YmdDateString, type ZIndexKey, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };
+export { ArrowIcon, Badge, type BadgeProps, type BaseParams, BaseUploader, type BaseUploaderProps, BreadCrumb, type BreadCrumbItem, type BreadCrumbMenuItem, type BreadCrumbProps, type BreadCrumbRoot, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarYearRange, Carousel, type CarouselProps, type CarouselRef, Checkbox, type CheckboxProps, type Column, type ConfirmOptions, DatePicker, DebouncedButton, type DebouncedButtonProps, DetailContent, type DetailContentProps, type DetailField, type DetailFieldOrSection, DetailModalFrame, type DetailMode, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, type FilterRow, type FormFieldConfig, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, type MenuChild, type MenuGrandchild, type MenuItem, type MenuSection, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, type ModalIconHeaderProps, ModalOverlay, type ModalProps, type ModalType, MultiTabBar as MultiTab, type MultiTab as MultiTabItem, PageFilter, type PageParams, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverPosition, PopoverTitle, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, ScrollArea, ScrollBar, SearchAddress, type SearchAddressProps, SearchBar, type SearchBarProps, Select, Select$1 as SelectBase, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionType, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, type SidebarHeaderRenderProps, type SidebarProps, SimplePopover, type SimplePopoverProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOption, type SortOrder, type SortParams, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, SubmitForm, Switch, type SwitchProps, Tab, type TabItem, type TabProps, Table, Textarea, type TextareaProps, type ToastPosition, type ToastProps, ToastProvider, type ToastType, ToggleSwitch, Tooltip, type TooltipProps, type UseParams, type YmdDateString, type ZIndexKey, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };

package/dist/index.d.ts

@@ -1152,9 +1152,19 @@ interface MenuSection {
     items: Array<MenuItem>;
 }
 type SidebarVariant = "light" | "dark" | "system-dark" | "system-light";
+interface SidebarHeaderRenderProps {
+    isCollapsed: boolean;
+    toggleCollapse: () => void;
+}
 interface SidebarProps {
     menuSections: Array<MenuSection>;
-    header?: ReactNode;
+    /**
+     * ReactNode로 넘기면 기존과 동일하게 nav와 함께 collapse 시 fade-out 됨.
+     * 함수로 넘기면 collapse 상태와 무관하게 항상 렌더링되며, { isCollapsed, toggleCollapse }를
+     * 전달받아 헤더 내부에 자체 collapse 토글 UI를 둘 수 있음 — 이 경우 showCollapseButton은 무시되고
+     * 기본 floating 버튼은 렌더링되지 않음.
+     */
+    header?: ReactNode | ((props: SidebarHeaderRenderProps) => ReactNode);
     footer?: ReactNode;
     className?: string;
     showCollapseButton?: boolean;
@@ -1415,4 +1425,4 @@ declare const Z_INDEX: {
 };
 type ZIndexKey = keyof typeof Z_INDEX;
 
-export { ArrowIcon, Badge, type BadgeProps, type BaseParams, BaseUploader, type BaseUploaderProps, BreadCrumb, type BreadCrumbItem, type BreadCrumbMenuItem, type BreadCrumbProps, type BreadCrumbRoot, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarYearRange, Carousel, type CarouselProps, type CarouselRef, Checkbox, type CheckboxProps, type Column, type ConfirmOptions, DatePicker, DebouncedButton, type DebouncedButtonProps, DetailContent, type DetailContentProps, type DetailField, type DetailFieldOrSection, DetailModalFrame, type DetailMode, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, type FilterRow, type FormFieldConfig, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, type MenuChild, type MenuGrandchild, type MenuItem, type MenuSection, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, type ModalIconHeaderProps, ModalOverlay, type ModalProps, type ModalType, MultiTabBar as MultiTab, type MultiTab as MultiTabItem, PageFilter, type PageParams, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverPosition, PopoverTitle, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, ScrollArea, ScrollBar, SearchAddress, type SearchAddressProps, SearchBar, type SearchBarProps, Select, Select$1 as SelectBase, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionType, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, type SidebarProps, SimplePopover, type SimplePopoverProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOption, type SortOrder, type SortParams, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, SubmitForm, Switch, type SwitchProps, Tab, type TabItem, type TabProps, Table, Textarea, type TextareaProps, type ToastPosition, type ToastProps, ToastProvider, type ToastType, ToggleSwitch, Tooltip, type TooltipProps, type UseParams, type YmdDateString, type ZIndexKey, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };
+export { ArrowIcon, Badge, type BadgeProps, type BaseParams, BaseUploader, type BaseUploaderProps, BreadCrumb, type BreadCrumbItem, type BreadCrumbMenuItem, type BreadCrumbProps, type BreadCrumbRoot, Button, type ButtonProps, type ButtonSize, type ButtonVariant, type CalendarYearRange, Carousel, type CarouselProps, type CarouselRef, Checkbox, type CheckboxProps, type Column, type ConfirmOptions, DatePicker, DebouncedButton, type DebouncedButtonProps, DetailContent, type DetailContentProps, type DetailField, type DetailFieldOrSection, DetailModalFrame, type DetailMode, DetailPageFrame, Empty, ExcelUploader, FilePreviewViewer, FileUploader, type FilterRow, type FormFieldConfig, Input, type InputProps, Loading, LoadingOverlay, type LoadingOverlayProps, type LoadingProps, type MenuChild, type MenuGrandchild, type MenuItem, type MenuSection, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalIconHeader, type ModalIconHeaderProps, ModalOverlay, type ModalProps, type ModalType, MultiTabBar as MultiTab, type MultiTab as MultiTabItem, PageFilter, type PageParams, Pagination, type PaginationProps, Popover, type PopoverAlign, PopoverAnchor, PopoverClose, PopoverContent, type PopoverContentProps, PopoverDescription, PopoverFooter, PopoverHeader, type PopoverPosition, PopoverTitle, PopoverTrigger, Radio, RadioGroup, type RadioGroupProps, type RadioOptionType, type RadioProps, ScrollArea, ScrollBar, SearchAddress, type SearchAddressProps, SearchBar, type SearchBarProps, Select, Select$1 as SelectBase, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionType, type SelectProps, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Sidebar, type SidebarHeaderRenderProps, type SidebarProps, SimplePopover, type SimplePopoverProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type SortOption, type SortOrder, type SortParams, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, SubmitForm, Switch, type SwitchProps, Tab, type TabItem, type TabProps, Table, Textarea, type TextareaProps, type ToastPosition, type ToastProps, ToastProvider, type ToastType, ToggleSwitch, Tooltip, type TooltipProps, type UseParams, type YmdDateString, type ZIndexKey, Z_INDEX, buildBreadCrumbItems, buttonVariants, cn, confirmModal, findParentMenuItem, findParentMenuName, formatDate, getFileLabel, getPreviewFileType, isCalendarDayAfterMax, isDateInRange, switchTrackSizes, textVariants, toast, useBlockModalConfirm, useBreadCrumbItems, useCustomBlocker, useDetailController, useFilePreviewViewer, useModal, useMultiTabStore, useParams, useScrollToTop, useStableImageSrc, useToast, validateAndFormatInput };

package/dist/index.js

@@ -1062,43 +1062,50 @@ function Radio(props) {
     "--radio-checked": checkColor,
     "--radio-unchecked": unCheckColor
   };
-  const control = /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-1.5", wrapperClassName), style: colorVars, children: [
-    /* @__PURE__ */ jsx(
-      RadioGroupPrimitive.Item,
-      {
-        value,
-        disabled,
-        id: inputId,
-        className: cn(
-          "group relative size-4 shrink-0 rounded-full border box-border transition-colors duration-200 outline-none",
-          "border-(--radio-unchecked) data-[state=checked]:border-(--radio-checked)",
-          "data-[state=unchecked]:hover:opacity-80",
-          disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-        ),
-        children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsx(
-          CircleIcon,
+  const control = /* @__PURE__ */ jsxs(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn("flex items-center gap-1.5", disabled ? "cursor-not-allowed" : "cursor-pointer", wrapperClassName),
+      style: colorVars,
+      children: [
+        /* @__PURE__ */ jsx(
+          RadioGroupPrimitive.Item,
           {
+            value,
+            disabled,
+            id: inputId,
             className: cn(
-              "absolute top-1/2 left-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 fill-(--radio-checked) text-(--radio-checked) transition-opacity duration-200",
-              indicatorClassName
-            )
+              "group relative size-4 shrink-0 rounded-full border box-border transition-colors duration-200 outline-none",
+              "border-(--radio-unchecked) data-[state=checked]:border-(--radio-checked)",
+              "data-[state=unchecked]:hover:opacity-80",
+              disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+            ),
+            children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "relative flex items-center justify-center", children: /* @__PURE__ */ jsx(
+              CircleIcon,
+              {
+                className: cn(
+                  "absolute top-1/2 left-1/2 size-2.5 -translate-x-1/2 -translate-y-1/2 fill-(--radio-checked) text-(--radio-checked) transition-opacity duration-200",
+                  indicatorClassName
+                )
+              }
+            ) })
           }
-        ) })
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "label",
-      {
-        htmlFor: inputId,
-        className: cn(
-          "text-sm font-medium cursor-pointer text-black select-none",
-          disabled && "cursor-not-allowed text-gray-400 opacity-50",
-          labelClassName
         ),
-        children: label
-      }
-    )
-  ] });
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "text-sm font-medium text-black select-none",
+              disabled && "text-gray-400 opacity-50",
+              labelClassName
+            ),
+            children: label
+          }
+        )
+      ]
+    }
+  );
   const withTooltip = (node) => {
     if (!disabled || !disabledMessage) return node;
     return /* @__PURE__ */ jsx(Tooltip2, { content: disabledMessage, position: "bottom", asChild: true, sideOffset: 4, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: node }) });
@@ -1145,11 +1152,7 @@ function RadioGroup(props) {
       value,
       onValueChange: (newValue) => onChange(newValue),
       disabled,
-      className: cn(
-        "flex flex-wrap gap-3",
-        direction === "horizontal" ? "flex-row" : "flex-col",
-        containerClassName
-      ),
+      className: cn("flex flex-wrap gap-3", direction === "horizontal" ? "flex-row" : "flex-col", containerClassName),
       children: options.map((option) => /* @__PURE__ */ jsx(
         Radio,
         {
@@ -9208,6 +9211,9 @@ function Sidebar(props) {
   const [overflowVisible, setOverflowVisible] = useState(true);
   const [expandedItems, setExpandedItems] = useState(/* @__PURE__ */ new Set());
   const [expandedSubItems, setExpandedSubItems] = useState(/* @__PURE__ */ new Set());
+  const toggleCollapse = () => setIsCollapsed((prev) => !prev);
+  const isHeaderRenderProp = typeof header === "function";
+  const headerContent = isHeaderRenderProp ? header({ isCollapsed, toggleCollapse }) : header;
   useEffect(() => {
     if (isCollapsed) {
       setOverflowVisible(false);
@@ -9282,21 +9288,22 @@ function Sidebar(props) {
           ${className ?? ""}
         `,
       children: [
-        showCollapseButton && /* @__PURE__ */ jsx(
+        showCollapseButton && !isHeaderRenderProp && /* @__PURE__ */ jsx(
           "button",
           {
-            onClick: () => setIsCollapsed((prev) => !prev),
+            onClick: toggleCollapse,
             className: `absolute top-4 z-20 w-6.5 h-6.5 rounded-full flex items-center justify-center transition-colors cursor-pointer ${s.collapseBtn} ${collapseButtonPlacement === "left" ? "left-2" : "right-2"}`,
             children: isCollapsed ? /* @__PURE__ */ jsx(PanelRightClose, { size: 18, color: primaryColor ?? s.collapseIcon }) : /* @__PURE__ */ jsx(PanelLeftClose, { size: 18, color: primaryColor ?? s.collapseIcon })
           }
         ),
+        isHeaderRenderProp && headerContent,
         /* @__PURE__ */ jsx("div", { className: `flex-1 min-h-0 hide-scrollbar ${overflowVisible ? "overflow-y-auto" : "overflow-hidden"}`, children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: `transition-opacity duration-200 ease-in-out ${isCollapsed ? "opacity-0 pointer-events-none select-none" : "opacity-100"} ${variant === "system-dark" || variant === "system-light" ? "pb-6" : "px-4 pb-6"}`,
             style: { transitionDelay: isCollapsed ? "0ms" : "150ms" },
             children: [
-              header && header,
+              !isHeaderRenderProp && headerContent,
               /* @__PURE__ */ jsx("nav", { className: `space-y-6 ${variant === "system-dark" || variant === "system-light" ? "px-1" : ""}`, children: menuSections.map((section, sectionIndex) => /* @__PURE__ */ jsxs("div", { children: [
                 section.title && /* @__PURE__ */ jsx("div", { className: s.sectionTitle, children: section.title }),
                 /* @__PURE__ */ jsx("div", { className: "space-y-0.5", children: section.items.map((item) => {
@@ -9776,7 +9783,16 @@ function DetailModalFrame(props) {
     ] }),
     /* @__PURE__ */ jsx(ModalFooter, { className: "flex justify-end", children: isEditMode ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleCancelEdit, disabled: controller.isSaving, children: "\uCDE8\uC18C" }),
-      /* @__PURE__ */ jsx(Button, { type: "submit", form: controller.formId, variant: "save", disabled: controller.isSaving, children: "\uC800\uC7A5" })
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          type: "submit",
+          form: controller.formId,
+          variant: "save",
+          disabled: controller.isSaving || !controller.isDirty,
+          children: "\uC800\uC7A5"
+        }
+      )
     ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
       canEdit && /* @__PURE__ */ jsx(Button, { variant: "outline", onClick: handleEdit, children: "\uC218\uC815" }),
       renderFooterExtra,