Rename isSticky prop to sticky

Author: Earthsplit

site/src/components/sections/docs.tsx

@@ -310,7 +310,7 @@ export function Docs({
         </PropertiesListRow>
         <PropertiesListRow
           defaultValue="true"
-          name="isSticky"
+          name="sticky"
           type="boolean"
         >
           <p>Whether to enable the sticky position of the category headers.</p>

src/components/emoji-picker.tsx

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

src/store.ts

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

src/types.ts

@@ -124,11 +124,6 @@ export interface EmojiPickerListCategoryHeaderProps
    * The category for this sticky header.
    */
   category: Category;
-
-  /**
-   * Whether to enable the sticky position of the category header.
-   */
-  isSticky?: boolean;
 }
 
 export interface EmojiPickerListEmojiProps
@@ -206,7 +201,7 @@ export interface EmojiPickerRootProps extends ComponentProps<"div"> {
    *
    * @default true
    */
-  isSticky?: boolean;
+  sticky?: boolean;
 }
 
 export type EmojiPickerViewportProps = ComponentProps<"div">;