@masaraxui/react 1.0.0

package/dist/hooks/use-list-data.d.ts

@@ -0,0 +1,111 @@
+import type { Key, Selection } from "@react-types/shared";
+export interface ListOptions<T> {
+    /** Initial items in the list. */
+    initialItems?: T[];
+    /** The keys for the initially selected items. */
+    initialSelectedKeys?: "all" | Iterable<Key>;
+    /** The initial text to filter the list by. */
+    initialFilterText?: string;
+    /** A function that returns a unique key for an item object. */
+    getKey?: (item: T) => Key;
+    /** A function that returns whether a item matches the current filter text. */
+    filter?: (item: T, filterText: string) => boolean;
+}
+export interface ListData<T> {
+    /** The items in the list. */
+    items: T[];
+    /** The keys of the currently selected items in the list. */
+    selectedKeys: Selection;
+    /** Sets the selected keys. */
+    setSelectedKeys(keys: Selection): void;
+    /** Adds the given keys to the current selected keys. */
+    addKeysToSelection(keys: Selection): void;
+    /** Removes the given keys from the current selected keys. */
+    removeKeysFromSelection(keys: Selection): void;
+    /** The current filter text. */
+    filterText: string;
+    /** Sets the filter text. */
+    setFilterText(filterText: string): void;
+    /**
+     * Gets an item from the list by key.
+     * @param key - The key of the item to retrieve.
+     */
+    getItem(key: Key): T | undefined;
+    /**
+     * Inserts items into the list at the given index.
+     * @param index - The index to insert into.
+     * @param values - The values to insert.
+     */
+    insert(index: number, ...values: T[]): void;
+    /**
+     * Inserts items into the list before the item at the given key.
+     * @param key - The key of the item to insert before.
+     * @param values - The values to insert.
+     */
+    insertBefore(key: Key, ...values: T[]): void;
+    /**
+     * Inserts items into the list after the item at the given key.
+     * @param key - The key of the item to insert after.
+     * @param values - The values to insert.
+     */
+    insertAfter(key: Key, ...values: T[]): void;
+    /**
+     * Appends items to the list.
+     * @param values - The values to insert.
+     */
+    append(...values: T[]): void;
+    /**
+     * Prepends items to the list.
+     * @param value - The value to insert.
+     */
+    prepend(...values: T[]): void;
+    /**
+     * Removes items from the list by their keys.
+     * @param keys - The keys of the item to remove.
+     */
+    remove(...keys: Key[]): void;
+    /**
+     * Removes all items from the list that are currently
+     * in the set of selected items.
+     */
+    removeSelectedItems(): void;
+    /**
+     * Moves an item within the list.
+     * @param key - The key of the item to move.
+     * @param toIndex - The index to move the item to.
+     */
+    move(key: Key, toIndex: number): void;
+    /**
+     * Moves one or more items before a given key.
+     * @param key - The key of the item to move the items before.
+     * @param keys - The keys of the items to move.
+     */
+    moveBefore(key: Key, keys: Iterable<Key>): void;
+    /**
+     * Moves one or more items after a given key.
+     * @param key - The key of the item to move the items after.
+     * @param keys - The keys of the items to move.
+     */
+    moveAfter(key: Key, keys: Iterable<Key>): void;
+    /**
+     * Updates an item in the list.
+     * @param key - The key of the item to update.
+     * @param newValue - The new value for the item, or a function that returns the new value based on the previous value.
+     */
+    update(key: Key, newValue: T | ((prev: T) => T)): void;
+}
+export interface ListState<T> {
+    items: T[];
+    selectedKeys: Selection;
+    filterText: string;
+}
+interface CreateListOptions<T, C> extends ListOptions<T> {
+    cursor?: C;
+}
+/**
+ * Manages state for an immutable list data structure, and provides convenience methods to
+ * update the data over time.
+ */
+export declare function useListData<T>(options: ListOptions<T>): ListData<T>;
+export declare function createListActions<T, C>(opts: CreateListOptions<T, C>, dispatch: (updater: (state: ListState<T>) => ListState<T>) => void): Omit<ListData<T>, "items" | "selectedKeys" | "getItem" | "filterText">;
+export {};

package/dist/hooks/use-list-data.js

@@ -0,0 +1,296 @@
+"use strict";
+import { useState, useMemo } from 'react';
+
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * This file is based on the useListData hook from @react-stately/data package.
+ * Original source: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/data/src/useListData.ts
+ *
+ * Why we copied this code instead of using @react-stately/data as a dependency:
+ * We copied this implementation to avoid adding @react-stately/data as a dependency, which is a
+ * large package that would significantly increase our bundle size. We maintain full attribution to
+ * Adobe and comply with the Apache License 2.0 requirements.
+ */
+/**
+ * Manages state for an immutable list data structure, and provides convenience methods to
+ * update the data over time.
+ */
+function useListData(options) {
+  const {
+    filter,
+    getKey = item => item.id ?? item.key,
+    initialFilterText = "",
+    initialItems = [],
+    initialSelectedKeys
+  } = options;
+
+  // Store both items and filteredItems in state so we can go back to the unfiltered list
+  const [state, setState] = useState({
+    items: initialItems,
+    selectedKeys: initialSelectedKeys === "all" ? "all" : new Set(initialSelectedKeys || []),
+    filterText: initialFilterText
+  });
+  const filteredItems = useMemo(() => filter ? state.items.filter(item => filter(item, state.filterText)) : state.items, [state.items, state.filterText, filter]);
+  return {
+    ...state,
+    items: filteredItems,
+    ...createListActions({
+      getKey
+    }, setState),
+    getItem(key) {
+      return state.items.find(item => getKey(item) === key);
+    }
+  };
+}
+function createListActions(opts, dispatch) {
+  const {
+    cursor,
+    getKey
+  } = opts;
+  return {
+    setSelectedKeys(selectedKeys) {
+      dispatch(state => ({
+        ...state,
+        selectedKeys
+      }));
+    },
+    addKeysToSelection(selectedKeys) {
+      dispatch(state => {
+        if (state.selectedKeys === "all") {
+          return state;
+        }
+        if (selectedKeys === "all") {
+          return {
+            ...state,
+            selectedKeys: "all"
+          };
+        }
+        return {
+          ...state,
+          selectedKeys: new Set([...state.selectedKeys, ...selectedKeys])
+        };
+      });
+    },
+    removeKeysFromSelection(selectedKeys) {
+      dispatch(state => {
+        if (selectedKeys === "all") {
+          return {
+            ...state,
+            selectedKeys: new Set()
+          };
+        }
+        const selection = state.selectedKeys === "all" ? new Set(state.items.map(getKey)) : new Set(state.selectedKeys);
+        for (const key of selectedKeys) {
+          selection.delete(key);
+        }
+        return {
+          ...state,
+          selectedKeys: selection
+        };
+      });
+    },
+    setFilterText(filterText) {
+      dispatch(state => ({
+        ...state,
+        filterText
+      }));
+    },
+    insert(index, ...values) {
+      dispatch(state => insert(state, index, ...values));
+    },
+    insertBefore(key, ...values) {
+      dispatch(state => {
+        let index = state.items.findIndex(item => getKey?.(item) === key);
+        if (index === -1) {
+          if (state.items.length === 0) {
+            index = 0;
+          } else {
+            return state;
+          }
+        }
+        return insert(state, index, ...values);
+      });
+    },
+    insertAfter(key, ...values) {
+      dispatch(state => {
+        let index = state.items.findIndex(item => getKey?.(item) === key);
+        if (index === -1) {
+          if (state.items.length === 0) {
+            index = 0;
+          } else {
+            return state;
+          }
+        }
+        return insert(state, index + 1, ...values);
+      });
+    },
+    prepend(...values) {
+      dispatch(state => insert(state, 0, ...values));
+    },
+    append(...values) {
+      dispatch(state => insert(state, state.items.length, ...values));
+    },
+    remove(...keys) {
+      dispatch(state => {
+        const keySet = new Set(keys);
+        const items = state.items.filter(item => !keySet.has(getKey(item)));
+        let selection = "all";
+        if (state.selectedKeys !== "all") {
+          selection = new Set(state.selectedKeys);
+          for (const key of keys) {
+            selection.delete(key);
+          }
+        }
+        if (cursor == null && items.length === 0) {
+          selection = new Set();
+        }
+        return {
+          ...state,
+          items,
+          selectedKeys: selection
+        };
+      });
+    },
+    removeSelectedItems() {
+      dispatch(state => {
+        if (state.selectedKeys === "all") {
+          return {
+            ...state,
+            items: [],
+            selectedKeys: new Set()
+          };
+        }
+        const selectedKeys = state.selectedKeys;
+        const items = state.items.filter(item => !selectedKeys.has(getKey(item)));
+        return {
+          ...state,
+          items,
+          selectedKeys: new Set()
+        };
+      });
+    },
+    move(key, toIndex) {
+      dispatch(state => {
+        const index = state.items.findIndex(item => getKey(item) === key);
+        if (index === -1) {
+          return state;
+        }
+        const copy = state.items.slice();
+        const [item] = copy.splice(index, 1);
+        if (item !== undefined) {
+          copy.splice(toIndex, 0, item);
+        }
+        return {
+          ...state,
+          items: copy
+        };
+      });
+    },
+    moveBefore(key, keys) {
+      dispatch(state => {
+        const toIndex = state.items.findIndex(item => getKey(item) === key);
+        if (toIndex === -1) {
+          return state;
+        }
+
+        // Find indices of keys to move. Sort them so that the order in the list is retained.
+        const keyArray = Array.isArray(keys) ? keys : [...keys];
+        const indices = keyArray.map(key => state.items.findIndex(item => getKey(item) === key)).sort((a, b) => a - b);
+        return move(state, indices, toIndex);
+      });
+    },
+    moveAfter(key, keys) {
+      dispatch(state => {
+        const toIndex = state.items.findIndex(item => getKey(item) === key);
+        if (toIndex === -1) {
+          return state;
+        }
+        const keyArray = Array.isArray(keys) ? keys : [...keys];
+        const indices = keyArray.map(key => state.items.findIndex(item => getKey(item) === key)).sort((a, b) => a - b);
+        return move(state, indices, toIndex + 1);
+      });
+    },
+    update(key, newValue) {
+      dispatch(state => {
+        const index = state.items.findIndex(item => getKey(item) === key);
+        if (index === -1) {
+          return state;
+        }
+        const currentItem = state.items[index];
+        if (currentItem === undefined) {
+          return state;
+        }
+        let updatedValue;
+        if (typeof newValue === "function") {
+          updatedValue = newValue(currentItem);
+        } else {
+          updatedValue = newValue;
+        }
+        return {
+          ...state,
+          items: [...state.items.slice(0, index), updatedValue, ...state.items.slice(index + 1)]
+        };
+      });
+    }
+  };
+}
+function insert(state, index, ...values) {
+  return {
+    ...state,
+    items: [...state.items.slice(0, index), ...values, ...state.items.slice(index)]
+  };
+}
+function move(state, indices, toIndex) {
+  // Shift the target down by the number of items being moved from before the target
+  toIndex -= indices.filter(index => index < toIndex).length;
+  const moves = indices.map(from => ({
+    from,
+    to: toIndex++
+  }));
+
+  // Shift later from indices down if they have a larger index
+  for (let i = 0; i < moves.length; i++) {
+    const a = moves[i];
+    for (let j = i; j < moves.length; j++) {
+      const b = moves[j];
+      if (b.from > a.from) {
+        b.from--;
+      }
+    }
+  }
+
+  // Interleave the moves so they can be applied one by one rather than all at once
+  for (let i = 0; i < moves.length; i++) {
+    const a = moves[i];
+    for (let j = moves.length - 1; j > i; j--) {
+      const b = moves[j];
+      if (b.from < a.to) {
+        a.to++;
+      } else {
+        b.from++;
+      }
+    }
+  }
+  const copy = state.items.slice();
+  for (const moveItem of moves) {
+    const [item] = copy.splice(moveItem.from, 1);
+    if (item !== undefined) {
+      copy.splice(moveItem.to, 0, item);
+    }
+  }
+  return {
+    ...state,
+    items: copy
+  };
+}
+
+export { createListActions, useListData };

package/dist/hooks/use-measured-height.d.ts

@@ -0,0 +1,4 @@
+import type { RefObject } from "react";
+export declare const useMeasuredHeight: (ref: RefObject<HTMLDivElement | null>) => {
+    height: number | undefined;
+};

package/dist/hooks/use-measured-height.js

@@ -0,0 +1,47 @@
+"use strict";
+import { useState, useCallback, useEffect } from 'react';
+
+const useMeasuredHeight = ref => {
+  const [height, setHeight] = useState(undefined);
+  const calculateHeight = useCallback(() => {
+    if (ref.current) {
+      const measuredHeight = ref.current.scrollHeight;
+      setHeight(prevHeight => {
+        // Only update if height actually changed
+        return prevHeight !== measuredHeight ? measuredHeight : prevHeight;
+      });
+    }
+  }, [ref]);
+  useEffect(() => {
+    const element = ref.current;
+    if (!element) {
+      return;
+    }
+
+    // Use ResizeObserver's initial notification instead of manual call
+    const resizeObserver = new ResizeObserver(calculateHeight);
+
+    // Optimize MutationObserver callback
+    const mutationObserver = new MutationObserver(mutations => {
+      // Check if any mutation is aria-hidden before calculating
+      const hasAriaHiddenChange = mutations.some(mutation => mutation.type === "attributes" && mutation.attributeName === "aria-hidden");
+      if (hasAriaHiddenChange) {
+        calculateHeight();
+      }
+    });
+    resizeObserver.observe(element);
+    mutationObserver.observe(element, {
+      attributeFilter: ["aria-hidden"],
+      attributes: true
+    });
+    return () => {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [ref, calculateHeight]);
+  return {
+    height
+  };
+};
+
+export { useMeasuredHeight };

package/dist/hooks/use-media-query.d.ts

@@ -0,0 +1,6 @@
+type UseMediaQueryOptions = {
+    defaultValue?: boolean;
+    initializeWithValue?: boolean;
+};
+export declare function useMediaQuery(query: string, { defaultValue, initializeWithValue }?: UseMediaQueryOptions): boolean;
+export {};

package/dist/hooks/use-media-query.js

@@ -0,0 +1,50 @@
+"use strict";
+import { useState } from 'react';
+import { useIsomorphicLayoutEffect } from './use-isomorphic-layout-effect.js';
+
+const IS_SERVER = typeof window === "undefined";
+function useMediaQuery(query, {
+  defaultValue = false,
+  initializeWithValue = true
+} = {}) {
+  const getMatches = query => {
+    if (IS_SERVER) {
+      return defaultValue;
+    }
+    return window.matchMedia(query).matches;
+  };
+  const [matches, setMatches] = useState(() => {
+    if (initializeWithValue) {
+      return getMatches(query);
+    }
+    return defaultValue;
+  });
+
+  // Handles the change event of the media query.
+  function handleChange() {
+    setMatches(getMatches(query));
+  }
+  useIsomorphicLayoutEffect(() => {
+    const matchMedia = window.matchMedia(query);
+
+    // Triggered at the first client-side load and if query changes
+    handleChange();
+
+    // Use deprecated `addListener` and `removeListener` to support Safari < 14 (#135)
+    if (matchMedia.addListener) {
+      matchMedia.addListener(handleChange);
+    } else {
+      matchMedia.addEventListener("change", handleChange);
+    }
+    return () => {
+      if (matchMedia.removeListener) {
+        matchMedia.removeListener(handleChange);
+      } else {
+        matchMedia.removeEventListener("change", handleChange);
+      }
+    };
+  }, [query]);
+  return matches;
+}
+
+export { useMediaQuery };

package/dist/hooks/use-mounted.d.ts

@@ -0,0 +1 @@
+export declare function useIsMounted(): () => boolean;

package/dist/hooks/use-mounted.js

@@ -0,0 +1,15 @@
+"use strict";
+import { useRef, useEffect, useCallback } from 'react';
+
+function useIsMounted() {
+  const isMounted = useRef(false);
+  useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+  return useCallback(() => isMounted.current, []);
+}
+
+export { useIsMounted };

package/dist/hooks/use-overlay-state.d.ts

@@ -0,0 +1,52 @@
+export interface UseOverlayStateProps {
+    /**
+     * Whether the overlay is currently open (controlled)
+     */
+    isOpen?: boolean;
+    /**
+     * Whether the overlay is open by default (uncontrolled)
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Handler that is called when the overlay's open state changes
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export interface UseOverlayStateReturn {
+    /**
+     * Whether the overlay is currently open
+     */
+    readonly isOpen: boolean;
+    /**
+     * Sets the overlay's open state
+     */
+    setOpen(isOpen: boolean): void;
+    /**
+     * Opens the overlay
+     */
+    open(): void;
+    /**
+     * Closes the overlay
+     */
+    close(): void;
+    /**
+     * Toggles the overlay's open state
+     */
+    toggle(): void;
+}
+/**
+ * Hook to manage overlay trigger state (Modal, AlertDialog, Popover, etc.)
+ * Provides methods to open, close, and toggle the overlay
+ *
+ * @example
+ * ```tsx
+ * const state = useOverlayState();
+ *
+ * <Button onPress={state.open}>Open Dialog</Button>
+ * <Modal isOpen={state.isOpen} onOpenChange={state.setOpen}>
+ *   <Button onPress={state.close}>Close</Button>
+ * </Modal>
+ * ```
+ */
+export declare const useOverlayState: (props?: UseOverlayStateProps) => UseOverlayStateReturn;

package/dist/hooks/use-overlay-state.js

@@ -0,0 +1,70 @@
+"use strict";
+import { useState, useRef, useEffect, useCallback } from 'react';
+
+/**
+ * Hook to manage overlay trigger state (Modal, AlertDialog, Popover, etc.)
+ * Provides methods to open, close, and toggle the overlay
+ *
+ * @example
+ * ```tsx
+ * const state = useOverlayState();
+ *
+ * <Button onPress={state.open}>Open Dialog</Button>
+ * <Modal isOpen={state.isOpen} onOpenChange={state.setOpen}>
+ *   <Button onPress={state.close}>Close</Button>
+ * </Modal>
+ * ```
+ */
+const useOverlayState = (props = {}) => {
+  const {
+    defaultOpen = false,
+    isOpen: controlledIsOpen,
+    onOpenChange
+  } = props;
+
+  // Internal state for uncontrolled mode
+  const [uncontrolledIsOpen, setUncontrolledIsOpen] = useState(defaultOpen);
+
+  // Determine if controlled
+  const isControlled = controlledIsOpen !== undefined;
+  const isOpen = isControlled ? controlledIsOpen : uncontrolledIsOpen;
+
+  // Keep a stable reference to onOpenChange to avoid recreating callbacks
+  const onOpenChangeRef = useRef(onOpenChange);
+
+  // Update ref in effect to avoid updating during render
+  useEffect(() => {
+    onOpenChangeRef.current = onOpenChange;
+  }, [onOpenChange]);
+
+  // Stable setter function that works for both controlled and uncontrolled modes
+  const setOpen = useCallback(nextIsOpen => {
+    // Always call the onChange callback if provided
+    onOpenChangeRef.current?.(nextIsOpen);
+
+    // Update internal state only in uncontrolled mode
+    if (!isControlled) {
+      setUncontrolledIsOpen(nextIsOpen);
+    }
+  }, [isControlled]);
+
+  // Memoized convenience methods
+  const open = useCallback(() => {
+    setOpen(true);
+  }, [setOpen]);
+  const close = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const toggle = useCallback(() => {
+    setOpen(!isOpen);
+  }, [setOpen, isOpen]);
+  return {
+    close,
+    isOpen,
+    open,
+    setOpen,
+    toggle
+  };
+};
+
+export { useOverlayState };

package/dist/hooks/use-safe-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from "react";
+export declare const useSafeLayoutEffect: typeof useEffect;

package/dist/hooks/use-safe-layout-effect.js

@@ -0,0 +1,6 @@
+"use strict";
+import { useLayoutEffect, useEffect } from 'react';
+
+const useSafeLayoutEffect = globalThis?.document ? useLayoutEffect : useEffect;
+
+export { useSafeLayoutEffect };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./components";
+export * from "./hooks";
+export { tv, cn, type VariantProps } from "tailwind-variants";