Optional sticky headers (#19)

Author: Earthsplit

site/src/components/sections/docs.tsx

@@ -308,6 +308,13 @@ export function Docs({
         <PropertiesListRow defaultValue="10" name="columns" type="number">
           <p>The number of columns in the list.</p>
         </PropertiesListRow>
+        <PropertiesListRow
+          defaultValue="true"
+          name="sticky"
+          type="boolean"
+        >
+          <p>Whether to enable the sticky position of the category headers.</p>
+        </PropertiesListRow>
         <PropertiesListRow
           defaultValue="the most recent version supported by the current browser"
           name="emojiVersion"

src/components/__tests__/emoji-picker.test.browser.tsx

@@ -27,6 +27,7 @@ function DefaultPage({
   searchOnChange,
   rootChildren,
   emptyChildren = <div data-testid="empty">No emojis found</div>,
+  sticky = true,
 }: {
   children?: ReactNode;
   locale?: EmojiPickerRootProps["locale"];
@@ -40,6 +41,7 @@ function DefaultPage({
   searchValue?: EmojiPickerSearchProps["value"];
   rootChildren?: EmojiPickerRootProps["children"];
   emptyChildren?: EmojiPickerEmptyProps["children"];
+  sticky?: EmojiPickerRootProps["sticky"];
 }) {
   const [selectedEmoji, setSelectedEmoji] = useState<Emoji | null>(null);
 
@@ -57,6 +59,7 @@ function DefaultPage({
           locale={locale}
           onEmojiSelect={setSelectedEmoji}
           skinTone={skinTone}
+          sticky={sticky}
         >
           <EmojiPicker.Search
             data-testid="search"
@@ -431,6 +434,28 @@ describe("EmojiPicker.Root", () => {
       .element(page.getByRole("gridcell").nth(7))
       .toHaveAttribute("aria-colindex", "7");
   });
+
+  it("should support disabling sticky category headers", async () => {
+    page.render(
+      <DefaultPage
+        sticky={false}
+        listComponents={{
+          CategoryHeader: ({ category, ...props }) => (
+            <div
+              data-testid="category-header"
+              {...props}
+            >
+              {category.label}
+            </div>
+          ),
+        }}
+      />,
+    );
+
+    await expect.element(page.getByTestId("category-header").nth(1)).not.toHaveStyle({
+      position: "sticky",
+    });
+  });
 });
 
 describe("EmojiPicker.Search", () => {

src/components/emoji-picker.tsx

@@ -149,6 +149,7 @@ const EmojiPickerRoot = forwardRef<HTMLDivElement, EmojiPickerRootProps>(
       onBlurCapture,
       children,
       style,
+      sticky = true,
       ...props
     },
     forwardedRef,
@@ -159,6 +160,7 @@ const EmojiPickerRoot = forwardRef<HTMLDivElement, EmojiPickerRootProps>(
         stableOnEmojiSelect,
         validateLocale(locale),
         columns,
+        sticky,
         validateSkinTone(skinTone),
       ),
     );
@@ -179,6 +181,10 @@ const EmojiPickerRoot = forwardRef<HTMLDivElement, EmojiPickerRootProps>(
       store.set({ columns });
     }, [columns]);
 
+    useLayoutEffect(() => {
+      store.set({ sticky });
+    }, [sticky]);
+
     useLayoutEffect(() => {
       store.set({ skinTone: validateSkinTone(skinTone) });
     }, [skinTone]);
@@ -769,6 +775,7 @@ function listCategoryProps(
 function listCategoryHeaderProps(
   category: EmojiPickerCategory,
   sizer = false,
+  sticky = true,
 ): WithAttributes<EmojiPickerListCategoryHeaderProps> {
   return {
     category,
@@ -777,7 +784,7 @@ function listCategoryHeaderProps(
       contain: !sizer ? "layout paint" : undefined,
       height: !sizer ? "var(--frimousse-category-header-height)" : undefined,
       pointerEvents: "auto",
-      position: "sticky",
+      position: sticky ? "sticky" : undefined,
       top: 0,
     },
   };
@@ -913,6 +920,7 @@ const EmojiPickerListCategory = memo(
       (state) => state.data?.categories[categoryIndex],
       shallow,
     );
+    const sticky = useSelectorKey(store, "sticky");
 
     /* v8 ignore next 3 */
     if (!category) {
@@ -922,7 +930,11 @@ const EmojiPickerListCategory = memo(
     return (
       <div {...listCategoryProps(categoryIndex, category)}>
         <CategoryHeader
-          {...listCategoryHeaderProps({ label: category.label })}
+          {...listCategoryHeaderProps(
+            { label: category.label },
+            false,
+            sticky,
+          )}
         />
       </div>
     );

src/store.ts

@@ -16,6 +16,7 @@ type Interaction = "keyboard" | "pointer" | "none";
 export type EmojiPickerStore = {
   locale: Locale;
   columns: number;
+  sticky: boolean;
   skinTone: SkinTone;
   onEmojiSelect: NonNullable<EmojiPickerRootProps["onEmojiSelect"]>;
 
@@ -59,13 +60,15 @@ export function createEmojiPickerStore(
   onEmojiSelect: NonNullable<EmojiPickerRootProps["onEmojiSelect"]>,
   initialLocale: Locale,
   initialColumns: number,
+  initialSticky: boolean,
   initialSkinTone: SkinTone,
 ) {
   let viewportScrollY = 0;
 
   return createStore<EmojiPickerStore>((set, get) => ({
     locale: initialLocale,
     columns: initialColumns,
+    sticky: initialSticky,
     skinTone: initialSkinTone,
     onEmojiSelect,
 

src/types.ts

@@ -195,6 +195,13 @@ export interface EmojiPickerRootProps extends ComponentProps<"div"> {
    * @default "https://cdn.jsdelivr.net/npm/emojibase-data"
    */
   emojibaseUrl?: string;
+
+  /**
+   * Whether to enable the sticky position of the category headers.
+   *
+   * @default true
+   */
+  sticky?: boolean;
 }
 
 export type EmojiPickerViewportProps = ComponentProps<"div">;