@olundot/ui 0.20.1 → 0.20.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @olundot/ui
 
+## 0.20.2
+
+### Patch Changes
+
+- 8a28822: `FilterToolbar layout="grid"`은 640px 미만에서 `filters`도 시트로 보낸다. 줄에는 검색, 접힌 필터 버튼, `actions`만 남고, 시트에는 `filters`를 순서대로 둔 뒤 `collapsible`을 둔다.
+
+  - 폭을 재기 전 첫 화면에서도 640px 미만이면 줄 필터를 펼치지 않는다. 컨테이너 쿼리로 숨기고, 폭을 잰 뒤에는 줄에 그리지 않는다.
+  - `collapsible` 없이 `filters`만 있어도 640px 미만에서 버튼과 시트가 생긴다.
+  - `activeLineFilterCount`: `filters` 중 적용한 조건 수. 640px 미만에서 버튼 배지, 버튼 이름, 적용 개수 줄의 개수에 더한다.
+  - `onClearLineFilters`: 640px 미만의 "해제"가 `onClearFilters`와 함께 부른다.
+  - 격자의 `filters`와 `collapsible` 컨트롤은 줄과 시트를 오가며 새로 그려지므로 값은 `value`로 넘긴다. `defaultValue`로 둔 값은 시트를 닫으면 남지 않는다.
+  - 두 prop을 주지 않으면 640px 미만 개수와 "해제"는 `collapsible` 조건만 다룬다. 640px 이상 격자와 `layout="flow"`는 그대로다.
+  - 격자에서 `collapseBelow="never"`도 `collapsible`을 줄에 펼치지 않는다.
+  - 격자는 툴바 폭을 컨테이너 쿼리와 같은 기준(내용 상자, CSS `zoom` 전)으로 잰다.
+
 ## 0.20.1
 
 ### Patch Changes

package/dist/index.d.ts

@@ -903,6 +903,10 @@ interface FilterToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
     collapseBelow?: FilterToolbarCollapseBelow;
     activeFilterCount?: number;
     onClearFilters?: () => void;
+    /** grid: applied conditions among `filters`. Under 640px the count adds them. */
+    activeLineFilterCount?: number;
+    /** grid: under 640px 해제 calls it with `onClearFilters`. */
+    onClearLineFilters?: () => void;
     collapsedLabel?: string;
     resultSummary?: React.ReactNode;
     clearAction?: React.ReactNode;

package/dist/index.js

@@ -5737,14 +5737,8 @@ var collapsibleClassNames = {
     trigger: "hidden"
   }
 };
-var gridCollapsibleClassNames = {
-  sm: { inline: "hidden", trigger: "" },
-  md: { inline: "hidden", trigger: "" },
-  lg: { inline: "hidden", trigger: "" },
-  never: { inline: "flex @[640px]:hidden", trigger: "hidden @[640px]:inline" }
-};
 var gridSearchClassName = "order-1 min-w-[min(160px,100%)] max-w-full flex-[1_1_0%] @[640px]:min-w-0 @[640px]:flex-[3_1_0%]";
-var gridFiltersClassName = "order-3 flex min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:contents";
+var gridFiltersClassName = "order-3 hidden min-w-0 flex-[1_0_100%] flex-wrap items-center gap-[var(--space-2)] @[640px]:contents";
 var gridCellClassName = cn(
   "contents @[640px]:block @[640px]:order-3 @[640px]:min-w-0 @[640px]:flex-[3_1_0%]",
   "@[640px]:[&:has([data-slot=select-trigger])]:flex-[2_1_0%]",
@@ -5766,6 +5760,10 @@ function filterCells(node, prefix = "") {
     return React31.isValidElement(child) && child.type === React31.Fragment ? filterCells(child.props.children, `${key}/`) : [{ key, cell: child }];
   });
 }
+function contentWidth(element) {
+  const style = getComputedStyle(element);
+  return element.clientWidth - (parseFloat(style.paddingLeft) || 0) - (parseFloat(style.paddingRight) || 0);
+}
 function warnGridFilters(count) {
   if (typeof process === "undefined" || process.env.NODE_ENV === "production") return;
   console.warn(
@@ -5781,6 +5779,8 @@ var FilterToolbar = React31.forwardRef(
     collapseBelow = "lg",
     activeFilterCount: activeFilterCountProp,
     onClearFilters,
+    activeLineFilterCount,
+    onClearLineFilters,
     collapsedLabel = "\uD544\uD130",
     resultSummary,
     clearAction,
@@ -5796,6 +5796,7 @@ var FilterToolbar = React31.forwardRef(
       null
     );
     const [overlayOpen, setOverlayOpen] = React31.useState(false);
+    const rootRef = React31.useRef(null);
     const triggerRef = React31.useRef(null);
     const rowRef = React31.useRef(null);
     const chipsRef = React31.useRef(null);
@@ -5803,28 +5804,31 @@ var FilterToolbar = React31.forwardRef(
     const pendingFocusRef = React31.useRef(null);
     const setRootRefs = React31.useCallback(
       (element) => {
+        rootRef.current = element;
         setRootElement(element);
         if (typeof ref === "function") ref(element);
         else if (ref) ref.current = element;
       },
       [ref]
     );
+    const isGrid = layout === "grid";
     React31.useEffect(() => {
       if (!rootElement) return;
-      const updateWidth = () => {
-        setContainerWidth(rootElement.getBoundingClientRect().width);
+      const updateWidth = (entry) => {
+        setContainerWidth(
+          isGrid ? entry?.contentBoxSize?.[0]?.inlineSize ?? contentWidth(rootElement) : rootElement.getBoundingClientRect().width
+        );
       };
       updateWidth();
       if (typeof ResizeObserver === "undefined") return;
-      const observer = new ResizeObserver(updateWidth);
+      const observer = new ResizeObserver(([entry]) => updateWidth(entry));
       observer.observe(rootElement);
       return () => observer.disconnect();
-    }, [rootElement]);
+    }, [rootElement, isGrid]);
     const handleOverlayOpenChange = React31.useCallback((open) => {
       setOverlayOpen(open);
       if (!open) queueMicrotask(() => triggerRef.current?.focus());
     }, []);
-    const isGrid = layout === "grid";
     const gridCells = isGrid ? filterCells(filters) : [];
     const filterCellCount = gridCells.length;
     React31.useEffect(() => {
@@ -5866,33 +5870,67 @@ var FilterToolbar = React31.forwardRef(
     const hasAppliedFilters = activeFilterCount > 0;
     const hasAppliedChips = Boolean(appliedFilters && appliedFilters.length > 0);
     const usesSheet = containerWidth !== null && containerWidth < 640;
-    const collapseClasses = (isGrid ? gridCollapsibleClassNames : collapsibleClassNames)[collapseBelow];
-    const collapseTriggerLabel = hasAppliedFilters ? `${collapsedLabel}, ${activeFilterCount}\uAC1C \uC801\uC6A9` : collapsedLabel;
-    const clearFiltersButton = onClearFilters ? /* @__PURE__ */ jsx32(
+    const gridSheet = isGrid && Boolean(filters);
+    const linesInSheet = gridSheet && usesSheet;
+    const lineFilterCount = gridSheet ? activeLineFilterCount ?? 0 : 0;
+    const narrowFilterCount = activeFilterCount + lineFilterCount;
+    const hasCollapsed = Boolean(collapsible) || gridSheet;
+    const outgrownSheet = isGrid && !collapsible && containerWidth !== null && containerWidth >= 640 && overlayOpen;
+    React31.useEffect(() => {
+      if (!outgrownSheet) return;
+      setOverlayOpen(false);
+      const ownerDocument = rootElement?.ownerDocument;
+      const active = ownerDocument?.activeElement;
+      if (!ownerDocument || active && active !== ownerDocument.body && active.isConnected) return;
+      const cell = rowRef.current?.querySelector('[data-slot="filter-toolbar-cell"]');
+      [...cell?.querySelectorAll(focusableSelector) ?? []].find(canTakeFocus)?.focus();
+    }, [outgrownSheet, rootElement]);
+    const inlineClassName = isGrid ? "hidden" : collapsibleClassNames[collapseBelow].inline;
+    const triggerClassName = isGrid ? collapsible ? "" : "@[640px]:hidden" : collapsibleClassNames[collapseBelow].trigger;
+    const triggerCount = linesInSheet ? narrowFilterCount : activeFilterCount;
+    const collapseTriggerLabel = triggerCount > 0 ? `${collapsedLabel}, ${triggerCount}\uAC1C \uC801\uC6A9` : collapsedLabel;
+    const narrowOnlyCount = !hasAppliedFilters && narrowFilterCount > 0;
+    const countText = narrowFilterCount === activeFilterCount || narrowOnlyCount ? narrowFilterCount : /* @__PURE__ */ jsxs28(Fragment14, { children: [
+      /* @__PURE__ */ jsx32("span", { className: "@[640px]:hidden", children: narrowFilterCount }),
+      /* @__PURE__ */ jsx32("span", { className: "hidden @[640px]:inline", children: activeFilterCount })
+    ] });
+    const clearLineFilters = gridSheet ? onClearLineFilters : void 0;
+    const clearNarrow = onClearFilters && clearLineFilters ? () => {
+      onClearFilters();
+      clearLineFilters();
+    } : onClearFilters ?? clearLineFilters;
+    const clearFilters = () => {
+      const width = containerWidth ?? (rootRef.current ? contentWidth(rootRef.current) : null);
+      (width !== null && width < 640 ? clearNarrow : onClearFilters)?.();
+    };
+    const clearFiltersButton = (linesInSheet ? clearNarrow : onClearFilters) ? /* @__PURE__ */ jsx32(
       "button",
       {
         type: "button",
         "data-slot": "filter-toolbar-clear-filters",
         className: "cursor-pointer border-0 bg-transparent p-0 text-body-sm font-medium text-text-secondary no-underline",
-        onClick: onClearFilters,
+        onClick: clearFilters,
         children: "\uD574\uC81C"
       }
     ) : null;
-    const collapsedContent = collapsible ? /* @__PURE__ */ jsx32(
+    const collapsedContent = hasCollapsed ? /* @__PURE__ */ jsxs28(
       "div",
       {
         "data-slot": "filter-toolbar-collapsed-content",
         className: "flex flex-col gap-[var(--space-3)] [&>*]:w-full",
-        children: collapsible
+        children: [
+          linesInSheet ? filters : null,
+          collapsible
+        ]
       }
     ) : null;
-    const collapseTrigger = collapsible ? /* @__PURE__ */ jsxs28(
+    const collapseTrigger = hasCollapsed ? /* @__PURE__ */ jsxs28(
       "span",
       {
         "data-slot": "filter-toolbar-collapse-trigger",
         className: cn(
           "relative order-2 shrink-0 @[640px]:order-4",
-          collapseClasses.trigger
+          triggerClassName
         ),
         children: [
           /* @__PURE__ */ jsx32(
@@ -5907,16 +5945,17 @@ var FilterToolbar = React31.forwardRef(
               onClick: () => handleOverlayOpenChange(true)
             }
           ),
-          hasAppliedFilters ? /* @__PURE__ */ jsx32(
+          narrowFilterCount > 0 ? /* @__PURE__ */ jsx32(
             "span",
             {
               "aria-hidden": "true",
               "data-slot": "filter-toolbar-collapse-count",
               className: cn(
                 chipCountVariants({ tone: "accent", size: "md" }),
-                "pointer-events-none absolute right-0 top-0 translate-x-1/3 -translate-y-1/3"
+                "pointer-events-none absolute right-0 top-0 translate-x-1/3 -translate-y-1/3",
+                narrowOnlyCount && "@[640px]:hidden"
               ),
-              children: activeFilterCount
+              children: countText
             }
           ) : null
         ]
@@ -5952,7 +5991,7 @@ var FilterToolbar = React31.forwardRef(
                     children: search
                   }
                 ) : null,
-                collapsible && usesSheet ? collapseTrigger : null,
+                hasCollapsed && (usesSheet || !collapsible) ? collapseTrigger : null,
                 collapsible && !usesSheet ? /* @__PURE__ */ jsxs28(Popover, { open: overlayOpen, onOpenChange: handleOverlayOpenChange, children: [
                   /* @__PURE__ */ jsx32(PopoverAnchor, { asChild: true, children: collapseTrigger }),
                   overlayOpen ? /* @__PURE__ */ jsxs28(
@@ -5971,7 +6010,7 @@ var FilterToolbar = React31.forwardRef(
                     }
                   ) : null
                 ] }) : null,
-                filters ? /* @__PURE__ */ jsx32(
+                filters && !linesInSheet ? /* @__PURE__ */ jsx32(
                   "div",
                   {
                     "data-slot": "filter-toolbar-filters",
@@ -5993,7 +6032,7 @@ var FilterToolbar = React31.forwardRef(
                     "data-slot": "filter-toolbar-collapsible",
                     className: cn(
                       "order-5 min-w-0 items-center gap-[var(--space-2)]",
-                      collapseClasses.inline
+                      inlineClassName
                     ),
                     children: collapsible
                   }
@@ -6009,7 +6048,7 @@ var FilterToolbar = React31.forwardRef(
               ]
             }
           ) : null,
-          collapsible && usesSheet && overlayOpen ? /* @__PURE__ */ jsx32(
+          hasCollapsed && usesSheet && overlayOpen ? /* @__PURE__ */ jsx32(
             Sheet,
             {
               open: overlayOpen,
@@ -6070,28 +6109,31 @@ var FilterToolbar = React31.forwardRef(
               ]
             }
           ) : null,
-          hasAppliedFilters ? /* @__PURE__ */ jsxs28(
+          narrowFilterCount > 0 ? /* @__PURE__ */ jsxs28(
             "div",
             {
               "data-slot": "filter-toolbar-applied",
               className: cn(
                 "flex items-center gap-[var(--space-1)] text-[11px] text-text-tertiary",
-                hasAppliedChips && "@[640px]:hidden"
+                (hasAppliedChips || narrowOnlyCount) && "@[640px]:hidden"
               ),
               children: [
                 /* @__PURE__ */ jsxs28("span", { children: [
                   "\uD544\uD130 ",
-                  activeFilterCount,
+                  countText,
                   "\uAC1C \uC801\uC6A9"
                 ] }),
-                onClearFilters ? /* @__PURE__ */ jsxs28(Fragment14, { children: [
-                  /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", children: " \xB7 " }),
+                clearNarrow ? /* @__PURE__ */ jsxs28(Fragment14, { children: [
+                  /* @__PURE__ */ jsx32("span", { "aria-hidden": "true", className: onClearFilters ? void 0 : "@[640px]:hidden", children: " \xB7 " }),
                   /* @__PURE__ */ jsx32(
                     "button",
                     {
                       type: "button",
-                      className: "cursor-pointer border-0 bg-transparent p-0 text-[11px] text-text-secondary no-underline",
-                      onClick: onClearFilters,
+                      className: cn(
+                        "cursor-pointer border-0 bg-transparent p-0 text-[11px] text-text-secondary no-underline",
+                        !onClearFilters && "@[640px]:hidden"
+                      ),
+                      onClick: clearFilters,
                       children: "\uD574\uC81C"
                     }
                   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olundot/ui",
-  "version": "0.20.1",
+  "version": "0.20.2",
   "description": "OLUN. shared React UI components built on OLUN design tokens",
   "license": "MIT",
   "keywords": [