@flamingo-stack/openframe-frontend-core 0.0.400 → 0.0.401

package/src/components/ui/filter-modal.tsx

@@ -6,7 +6,9 @@ import { cn } from '../../utils/cn'
 import { Filter02Icon } from '../icons-v2-generated/sort-and-filter/filter-02-icon'
 import { Button } from './button'
 import { FilterCheckboxItem } from './filter-checkbox-item'
+import { DateFilterPanel, type DateFilterResult, type DateRange } from './date-picker'
 import { ModalV2, ModalV2Content, ModalV2Footer, ModalV2Header, ModalV2Title } from './modal-v2'
+import { ScrollFadeOverlay, useScrollFade } from './scroll-fade'
 import { Skeleton } from './skeleton'
 import { SortColumnItem, type SortConfig, type SortDirection } from './sort-column-item'
 import { TagKeyValueFilter, type TagKeyConfig } from './tag-key-value-filter'
@@ -51,6 +53,20 @@ export interface FilterModalProps {
   tagFilterTitle?: string
   /** Show skeleton loading state */
   isLoading?: boolean
+  /** Date sort + range filter rendered as the last section. Drafted with the
+   *  other filters and committed via `onChange` on Apply (defaults on Reset). */
+  dateFilter?: {
+    /** Section title. Defaults to 'Date'. */
+    title?: string
+    /** Applied sort direction. Defaults to `defaultSort`. */
+    sort?: SortDirection
+    /** Baseline sort direction restored by Reset. Defaults to 'desc'. */
+    defaultSort?: SortDirection
+    /** Applied date range. */
+    range?: DateRange
+    /** Fired on Apply with the drafted values, and on Reset with the defaults. */
+    onChange: (result: DateFilterResult) => void
+  }
   /** Text shown in empty state title */
   emptyStateTitle?: string
   /** Text shown in empty state description */
@@ -74,6 +90,7 @@ export function FilterModal({
   selectedTags,
   onTagsChange,
   tagFilterTitle,
+  dateFilter,
   isLoading = false,
   emptyStateTitle = 'No filters available',
   emptyStateDescription = 'There are no filter options to display at the moment',
@@ -83,10 +100,20 @@ export function FilterModal({
   })
   const [pendingTags, setPendingTags] = useState<string[]>(selectedTags ?? [])
 
+  const dateDefaultSort: SortDirection = dateFilter?.defaultSort ?? 'desc'
+  const [draftDateSort, setDraftDateSort] = useState<SortDirection>(dateFilter?.sort ?? dateDefaultSort)
+  const [draftDateRange, setDraftDateRange] = useState<DateRange | undefined>(dateFilter?.range)
+
+  // Scroll shadows: bottom fade by default while content continues below,
+  // top fade once scrolled (same pattern as the chat lists).
+  const { scrollRef, fadeTop, fadeBottom, update: updateFade } = useScrollFade<HTMLDivElement>()
+
   useEffect(() => {
     if (isOpen) {
       setSelectedFilters({ ...currentFilters })
       setPendingTags(selectedTags ?? [])
+      setDraftDateSort(dateFilter?.sort ?? dateDefaultSort)
+      setDraftDateRange(dateFilter?.range)
     }
   }, [isOpen, JSON.stringify(currentFilters), JSON.stringify(selectedTags)])
 
@@ -109,12 +136,14 @@ export function FilterModal({
   const handleReset = () => {
     onFilterChange({})
     onTagsChange?.([])
+    dateFilter?.onChange({ sort: dateDefaultSort, range: undefined })
     onClose()
   }
 
   const handleApply = () => {
     onFilterChange(selectedFilters)
     onTagsChange?.(pendingTags)
+    dateFilter?.onChange({ sort: draftDateSort, range: draftDateRange })
     onClose()
   }
 
@@ -125,7 +154,7 @@ export function FilterModal({
   const hasSort = !!sortConfig && sortConfig.columns.length > 0
   const hasFilterGroups = filterGroups.length > 0
   const hasTagFilter = !!tagFilterKeys && tagFilterKeys.length > 0 && !!onTagsChange
-  const isEmpty = !isLoading && !hasSort && !hasFilterGroups && !hasTagFilter
+  const isEmpty = !isLoading && !hasSort && !hasFilterGroups && !hasTagFilter && !dateFilter
 
   return (
     <ModalV2
@@ -143,7 +172,12 @@ export function FilterModal({
           !isEmpty && 'md:bg-ods-bg md:border md:border-ods-border md:rounded-md md:px-3',
         )}
       >
-        <div className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-4 md:py-3">
+        <div className="relative flex-1 min-h-0 flex flex-col">
+        <div
+          ref={scrollRef}
+          onScroll={updateFade}
+          className="flex-1 min-h-0 overflow-y-auto flex flex-col gap-4 md:py-3"
+        >
         {isLoading ? (
           <>
             {[0, 1].map((group) => (
@@ -229,10 +263,31 @@ export function FilterModal({
             onTagsChange={setPendingTags}
             keysTitle={tagFilterTitle}
           />
+        )}
+        {/* Date sort + range filter */}
+        {dateFilter && (
+          <div className="flex flex-col gap-1">
+            <span className="text-h5 text-ods-text-secondary">
+              {dateFilter.title ?? 'Date'}
+            </span>
+            <DateFilterPanel
+              mode="range"
+              sort={draftDateSort}
+              onSortChange={setDraftDateSort}
+              selected={draftDateRange}
+              onSelect={(value) => setDraftDateRange(value as DateRange | undefined)}
+              className="gap-[var(--spacing-system-xxs)]"
+            />
+          </div>
         )}
           </>
         )}
         </div>
+
+        {/* Scroll shadows over the filter list edges */}
+        <ScrollFadeOverlay edge="top" visible={fadeTop} />
+        <ScrollFadeOverlay edge="bottom" visible={fadeBottom} />
+        </div>
       </ModalV2Content>
 
       <ModalV2Footer>

package/src/components/ui/index.ts

@@ -24,6 +24,7 @@ export * from './no-data'
 export * from './page-loader'
 export * from './progress-bar'
 export * from './radio-group'
+export * from './scroll-fade'
 export * from './select'
 export * from './switch'
 export * from './tag-select-dropdown'

package/src/components/ui/scroll-fade.tsx

@@ -0,0 +1,90 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '../../utils/cn'
+
+/**
+ * Tracks whether a scrollable element is scrolled away from its top/bottom
+ * edge, so edge fades ("scroll shadows") can be shown only where content
+ * continues. Attach `scrollRef` to the scrollable element and `update` to its
+ * `onScroll`; content/size changes are re-measured via ResizeObserver.
+ *
+ * Canonical fade pattern shared by chat lists and FilterModal.
+ */
+export function useScrollFade<T extends HTMLElement = HTMLDivElement>() {
+  const scrollRef = React.useRef<T | null>(null)
+  const [fade, setFade] = React.useState({ top: false, bottom: false })
+
+  const update = React.useCallback(() => {
+    const el = scrollRef.current
+    if (!el) return
+    setFade((prev) => {
+      const top = el.scrollTop > 0
+      const bottom = el.scrollHeight - el.scrollTop - el.clientHeight > 1
+      return prev.top === top && prev.bottom === bottom ? prev : { top, bottom }
+    })
+  }, [])
+
+  React.useLayoutEffect(() => {
+    update()
+    const el = scrollRef.current
+    if (!el) return
+    const cleanups: Array<() => void> = []
+    if (typeof ResizeObserver !== 'undefined') {
+      const resizeObserver = new ResizeObserver(update)
+      resizeObserver.observe(el)
+      cleanups.push(() => resizeObserver.disconnect())
+    }
+    // ResizeObserver only sees the container box; content growth (appended
+    // list items) changes scrollHeight without resizing it — watch mutations.
+    if (typeof MutationObserver !== 'undefined') {
+      const mutationObserver = new MutationObserver(update)
+      mutationObserver.observe(el, { childList: true, subtree: true, characterData: true })
+      cleanups.push(() => mutationObserver.disconnect())
+    }
+    return () => {
+      for (const cleanup of cleanups) cleanup()
+    }
+  }, [update])
+
+  return { scrollRef, fadeTop: fade.top, fadeBottom: fade.bottom, update }
+}
+
+export interface ScrollFadeOverlayProps {
+  /** Which edge of the scroll container the fade sits on. */
+  edge: 'top' | 'bottom'
+  /** Whether the fade is currently shown (content continues past this edge). */
+  visible: boolean
+  /**
+   * CSS color the content fades into — should match the surface behind the
+   * list. Defaults to the page background token.
+   */
+  color?: string
+  className?: string
+}
+
+/**
+ * Edge overlay that fades scrollable content into the surface behind it.
+ * Render inside a `relative` wrapper around the scrollable element.
+ */
+export function ScrollFadeOverlay({
+  edge,
+  visible,
+  color = 'var(--color-bg)',
+  className,
+}: ScrollFadeOverlayProps) {
+  return (
+    <div
+      aria-hidden
+      className={cn(
+        'pointer-events-none absolute inset-x-0 h-16 transition-opacity duration-150',
+        edge === 'top' ? 'top-0' : 'bottom-0',
+        visible ? 'opacity-100' : 'opacity-0',
+        className,
+      )}
+      style={{
+        background: `linear-gradient(${edge === 'top' ? '0deg' : '180deg'}, transparent 0%, ${color} 100%)`,
+      }}
+    />
+  )
+}

package/src/stories/DatePicker.stories.tsx

@@ -775,8 +775,10 @@ const fmtDay = (d: Date) =>
 
 /**
  * DateFilterMenu — calendar-icon trigger opens a popover with a sort selector,
- * a date-range calendar, and Close / Apply actions. Matches the Figma
- * `filter-menu`. Selections are drafted internally and committed on Apply.
+ * a date-range calendar, and Close/Reset + Apply actions. Matches the Figma
+ * `filter-menu`. The sort and date selection are drafted and committed on
+ * Apply. With a selection present, Close becomes Reset, which clears and
+ * commits the empty selection.
  */
 export const FilterMenuRange: Story = {
   render: function Render() {

package/src/stories/FilterModal.stories.tsx

@@ -517,3 +517,36 @@ export const InteractiveWithTags: Story = {
     onClose: fn(),
   },
 }
+
+/**
+ * Mobile "Sort and Filter" with the date sort + range filter as the last
+ * section (per the logs Figma). Scroll shadows: bottom fade by default while
+ * content continues, top fade once scrolled.
+ */
+export const WithDateFilter: Story = {
+  args: {
+    isOpen: true,
+    title: 'Sort and Filter',
+    filterGroups: [
+      ...defaultFilterGroups,
+      {
+        id: 'tools',
+        title: 'Tool',
+        options: [
+          { id: 'fleet', label: 'Fleet MDM', count: 10 },
+          { id: 'mesh', label: 'MeshCentral', count: 30 },
+          { id: 'tactical', label: 'TacticalRMM', count: 20 },
+          { id: 'windows', label: 'Windows', count: 30 },
+        ],
+      },
+    ],
+    currentFilters: defaultCurrentFilters,
+    onFilterChange: fn(),
+    onClose: fn(),
+    dateFilter: {
+      title: 'Date',
+      sort: 'desc',
+      onChange: fn(),
+    },
+  },
+}