musae 0.2.1 → 0.2.3

package/dist/components/table/{header.js → header/header.js}

@@ -1,20 +1,48 @@
 import React from 'react';
-import { useTable, styles as styles$1 } from './hooks.js';
+import { useTable } from '../context.js';
 import { flexRender } from '@tanstack/react-table';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
-import { useTheme } from '../theme/hooks.js';
+import { props } from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../../theme/hooks.js';
 import clsx from 'clsx';
-import { ColorToken } from '../../utils/colors.js';
-import { typography } from '../theme/theme.js';
+import { ColorToken } from '../../../utils/colors.js';
+import { typography } from '../../theme/theme.js';
 
 const styles = {
   cell: props => [{
     backgroundColor: "musae-q1mx2j",
     textAlign: "musae-1yc453h",
     position: "musae-1n2onr6",
+    paddingInline: "musae-iujutg",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    paddingBlock: "musae-avjae4",
+    paddingTop: null,
+    paddingBottom: null,
+    borderColor: "musae-eqt46j",
+    borderInlineColor: null,
+    borderInlineStartColor: null,
+    borderLeftColor: null,
+    borderInlineEndColor: null,
+    borderRightColor: null,
+    borderBlockColor: null,
+    borderTopColor: null,
+    borderBottomColor: null,
+    borderStyle: "musae-1y0btm7",
+    borderInlineStyle: null,
+    borderInlineStartStyle: null,
+    borderLeftStyle: null,
+    borderInlineEndStyle: null,
+    borderRightStyle: null,
+    borderBlockStyle: null,
+    borderTopStyle: null,
+    borderBottomStyle: null,
+    borderBottomWidth: "musae-lntmim",
     $$css: true
   }, {
-    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial"
+    "--backgroundColor": props.backgroundColor != null ? props.backgroundColor : "initial",
+    "--borderColor": props.borderColor != null ? props.borderColor : "initial"
   }],
   unbordered: props => [{
     ":not(:last-of-type)::after_content": "musae-x7gz8e",
@@ -24,7 +52,7 @@ const styles = {
     ":not(:last-of-type)::after_height": "musae-1su0kt9",
     ":not(:last-of-type)::after_backgroundColor": "musae-9cqmhv",
     ":not(:last-of-type)::after_transform": "musae-1kmnipp",
-    ":not(:last-of-type)::after_insetInlineEnd": "musae-192i3sz",
+    ":not(:last-of-type)::after_insetInlineEnd": "musae-1sd0t5p",
     ":not(:last-of-type)::after_left": null,
     ":not(:last-of-type)::after_right": null,
     $$css: true
@@ -53,11 +81,10 @@ const Header = props$1 => {
   if (!table) return null;
   const headerGroups = table.getHeaderGroups();
   const styled = props(styles.cell({
-    backgroundColor: theme.colors[ColorToken.Surface]
-  }), typography.label.small, bordered ? styles.bordered : styles.unbordered({
+    backgroundColor: theme.colors[ColorToken.Surface],
+    borderColor: theme.colors[ColorToken.OutlineVariant]
+  }), typography.label.small, bordered && styles.bordered, !bordered && styles.unbordered({
     backgroundColor: theme.colors[ColorToken.OutlineVariant]
-  }), styles$1.cell({
-    outlineColor: theme.colors[ColorToken.OutlineVariant]
   }));
   return React.createElement("thead", {
     className: props$1.className

package/dist/components/table/hooks.d.ts

@@ -1,33 +1,20 @@
-import { type CSSProperties } from "react";
-import type { ContextValue, TableProps } from "./types";
-export declare const styles: Readonly<{
-    readonly cell: (props: {
-        outlineColor: CSSProperties["borderColor"];
-    }) => readonly [Readonly<{
-        paddingInline: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingInline", string>;
-        paddingBlock: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"paddingBlock", string>;
-        borderColor: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderColor", import("csstype").Property.BorderColor | undefined>;
-        borderStyle: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderStyle", "solid">;
-        borderBottomWidth: import("@stylexjs/stylex/lib/StyleXTypes").StyleXClassNameFor<"borderBottomWidth", string>;
-    }>, typeof import("@stylexjs/stylex/lib/StyleXTypes").StyleXInlineStylesTag];
-}>;
+import { type ColumnDef } from "@tanstack/react-table";
+import type { Column, ContextValue, SortDescriptor } from "./types";
 /**
  * @description
  * use columns
  */
-export declare const useColumns: <T>([columns]: [TableProps<T>["columns"]]) => import("@tanstack/react-table").ColumnDef<T, any>[];
-/**
- * @author murukal
- * @description
- * use table context hook
- */
-export declare const useTable: <T>() => ContextValue<T>;
+export declare const useColumns: <T>({ columns }: {
+    columns: Column<T>[];
+}) => ColumnDef<T, any>[];
 /**
  * @author murukal
  * @description
  * for context value
  */
-export declare const useContextValue: <T>({ table: _table, bordered, }: {
+export declare const useContextValue: <T>({ table: _table, bordered, sortDescriptor: _sortDescriptor, onSortChange: _onSortChange, }: {
     table: ContextValue<T>["table"];
     bordered: boolean;
+    sortDescriptor?: SortDescriptor;
+    onSortChange?: (sortDescriptor: SortDescriptor) => void;
 }) => ContextValue<unknown>;

package/dist/components/table/hooks.js

@@ -1,72 +1,50 @@
 import { createColumnHelper } from '@tanstack/react-table';
-import { useRef, useMemo, useContext } from 'react';
-import Context from './context.js';
+import { useRef, useMemo, createElement } from 'react';
+import Cell from './header/cell.js';
+import { useControlledState, useEvent } from '@aiszlab/relax';
 
-const styles = {
-  cell: props => [{
-    paddingInline: "musae-iujutg",
-    paddingStart: null,
-    paddingLeft: null,
-    paddingEnd: null,
-    paddingRight: null,
-    paddingBlock: "musae-avjae4",
-    paddingTop: null,
-    paddingBottom: null,
-    borderColor: "musae-eqt46j",
-    borderInlineColor: null,
-    borderInlineStartColor: null,
-    borderLeftColor: null,
-    borderInlineEndColor: null,
-    borderRightColor: null,
-    borderBlockColor: null,
-    borderTopColor: null,
-    borderBottomColor: null,
-    borderStyle: "musae-1y0btm7",
-    borderInlineStyle: null,
-    borderInlineStartStyle: null,
-    borderLeftStyle: null,
-    borderInlineEndStyle: null,
-    borderRightStyle: null,
-    borderBlockStyle: null,
-    borderTopStyle: null,
-    borderBottomStyle: null,
-    borderBottomWidth: "musae-lntmim",
-    $$css: true
-  }, {
-    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
-  }]
-};
 /**
  * @description
  * use columns
  */
-const useColumns = ([columns]) => {
-  const {
-    current: helper
-  } = useRef(createColumnHelper());
-  return columns ? columns(helper) : [];
-};
-/**
- * @author murukal
- * @description
- * use table context hook
- */
-const useTable = () => {
-  return useContext(Context);
+const useColumns = ({ columns }) => {
+    const helper = useRef(createColumnHelper());
+    return useMemo(() => {
+        return columns.map(({ key, render, title, sortable = false, sortDirections = ["ascending", "descending"] }) => {
+            // @ts-ignore
+            return helper.current.accessor(key, {
+                header: createElement(Cell, { children: title, sortable, value: key, sortDirections }),
+                cell: (_context) => {
+                    const value = _context.getValue();
+                    if (!render) {
+                        return value;
+                    }
+                    return render(value, _context.row.original, _context.row.index);
+                },
+            });
+        });
+    }, [columns]);
 };
 /**
  * @author murukal
  * @description
  * for context value
  */
-const useContextValue = ({
-  table: _table,
-  bordered
-}) => {
-  return useMemo(() => ({
-    table: _table,
-    bordered
-  }), [_table, bordered]);
+const useContextValue = ({ table: _table, bordered, sortDescriptor: _sortDescriptor, onSortChange: _onSortChange, }) => {
+    const [sortDescriptor, setSortDescriptor] = useControlledState(_sortDescriptor);
+    // sort change handler
+    const onSortChange = useEvent((sortDescriptor) => {
+        setSortDescriptor(sortDescriptor);
+        _onSortChange?.(sortDescriptor);
+    });
+    return useMemo(() => ({
+        // @ts-ignore
+        table: _table,
+        bordered,
+        // sort descriptor
+        sortDescriptor,
+        onSortChange,
+    }), [_table, bordered, sortDescriptor, onSortChange]);
 };
 
-export { styles, useColumns, useContextValue, useTable };
+export { useColumns, useContextValue };

package/dist/components/table/table.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { TableProps } from "./types";
-declare const Table: <T>({ bordered, dataSource, ...props }: TableProps<T>) => React.JSX.Element;
+declare const Table: <T>({ bordered, dataSource, columns: _columns, sortDescriptor, onSortChange, }: TableProps<T>) => React.JSX.Element;
 export default Table;

package/dist/components/table/table.js

@@ -1,30 +1,36 @@
 import { useReactTable, getCoreRowModel } from '@tanstack/react-table';
 import React from 'react';
 import { useColumns, useContextValue } from './hooks.js';
-import Header from './header.js';
+import Header from './header/header.js';
 import Context from './context.js';
 import Body from './body.js';
 
 const Table = ({
   bordered = false,
   dataSource = [],
-  ...props
+  columns: _columns = [],
+  sortDescriptor,
+  onSortChange
 }) => {
-  const columns = useColumns([props.columns]);
+  const columns = useColumns({
+    columns: _columns
+  });
   const table = useReactTable({
-    columns: columns,
+    columns,
     data: dataSource,
     getCoreRowModel: getCoreRowModel()
   });
   const contextValue = useContextValue({
     table,
-    bordered
+    bordered,
+    sortDescriptor,
+    onSortChange
   });
   return React.createElement(Context.Provider, {
     value: contextValue
   }, React.createElement("table", {
     ...{
-      className: "musae-1l2rt3b"
+      className: "musae-h8yej3"
     }
   }, React.createElement(Header, null), React.createElement(Body, null)));
 };

package/dist/components/table/types.d.ts

@@ -1,6 +1,44 @@
-import type { ColumnDef, ColumnHelper } from "@tanstack/react-table";
+import type { DeepKeys } from "@tanstack/react-table";
 import type { Table } from "@tanstack/react-table";
 import type { ComponentProps } from "../../types/element";
+import type { Key, ReactNode } from "react";
+export type SortDirection = "ascending" | "descending" | null;
+export type SortDescriptor = {
+    key: Key;
+    direction: SortDirection;
+};
+/**
+ * @description
+ * column def
+ */
+export type Column<T, V = unknown> = {
+    /**
+     * @description
+     * key
+     */
+    key: DeepKeys<T>;
+    /**
+     * @description
+     * title
+     */
+    title: ReactNode | (() => ReactNode);
+    /**
+     * @description
+     * custom render, render is not provided, just render value
+     */
+    render?: (value: V, record: T, index: number) => ReactNode | unknown;
+    /**
+     * @description
+     * enable sort
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * @description
+     * allowed sort orders
+     */
+    sortDirections?: SortDirection[];
+};
 /**
  * @description
  * table props
@@ -14,17 +52,28 @@ export type TableProps<T> = {
     dataSource?: T[];
     /**
      * @description
-     * in react table, columns always are created by helper
-     * so in musae, we use this function to create columns
+     * columns
      * @default void 0
      */
-    columns?: (helper: ColumnHelper<T>) => ColumnDef<T, any>[];
+    columns?: Column<T>[];
     /**
      * @description
      * bordered
      * @default false
      */
     bordered?: boolean;
+    /**
+     * @description
+     * sort descriptor
+     * @default void 0
+     */
+    sortDescriptor?: SortDescriptor;
+    /**
+     * @description
+     * callback when table has changed, like sort
+     * @default void 0
+     */
+    onSortChange?: (sortDescriptor: SortDescriptor) => void;
 };
 /**
  * @author murukal
@@ -42,6 +91,15 @@ export type ContextValue<T> = {
      * if current table is bordered
      */
     bordered: boolean;
+    /**
+     * {@link} `SortDescriptor`
+     */
+    sortDescriptor?: SortDescriptor;
+    /**
+     * @description
+     * `SortDescriptor` Setter
+     */
+    onSortChange?: (sortDescriptor: SortDescriptor) => void;
 };
 /**
  * @description
@@ -53,3 +111,13 @@ export type HeaderProps = ComponentProps;
  * body props
  */
 export type BodyProps = ComponentProps;
+/**
+ * @description
+ * header cell props
+ */
+export type HeaderCellProps = {
+    sortable?: boolean;
+    children: ReactNode | (() => ReactNode);
+    value: Key;
+    sortDirections: SortDirection[];
+};

package/dist/components/tour/tour.js

@@ -17,7 +17,7 @@ import { useGutters } from '../../hooks/use-gutters.js';
 const styles = {
   overlay: props => [{
     position: "musae-10l6tqk",
-    inset: "musae-10a8y8t",
+    inset: "musae-ezip7x",
     insetInline: null,
     insetInlineStart: null,
     insetInlineEnd: null,

package/dist/components/waterfall/hooks.d.ts

@@ -3,10 +3,9 @@
  * @description
  * repaint child
  */
-export declare const useRepaint: ({ columns, rowGap, isSequential, }: {
+export declare const useRepaint: ({ columns, rowGap }: {
     columns: number;
     rowGap: number;
-    isSequential: boolean;
 }) => {
     maxHeight: number;
     collect: (index: number, ref: HTMLDivElement | null) => void;

package/dist/components/waterfall/hooks.js

@@ -1,11 +1,11 @@
-import { useEvent, useUpdateEffect } from '@aiszlab/relax';
+import { useEvent } from '@aiszlab/relax';
 import { useRef, useState, useCallback } from 'react';
 
 /**
  * @description
  * repaint child
  */
-const useRepaint = ({ columns, rowGap, isSequential, }) => {
+const useRepaint = ({ columns, rowGap }) => {
     const items = useRef(new Map());
     const [maxHeight, setMaxHeight] = useState(0);
     const [orders, setOrders] = useState(new Map());
@@ -30,12 +30,6 @@ const useRepaint = ({ columns, rowGap, isSequential, }) => {
         setMaxHeight(Math.max(...columnHeights));
         setOrders(_orders);
     });
-    useUpdateEffect(() => {
-        // no need to repaint when `sequential`
-        if (isSequential)
-            return;
-        repaint();
-    }, [rowGap]);
     const order = useCallback((index) => {
         return orders.get(index) ?? null;
     }, [orders]);

package/dist/components/waterfall/waterfall.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { useRepaint } from './hooks.js';
 import clsx from 'clsx';
 import { useGutters } from '../../hooks/use-gutters.js';
-import { useMounted } from '@aiszlab/relax';
+import { useUpdateEffect, useMounted } from '@aiszlab/relax';
 import Sequential from './sequential.js';
 
 const styles = {
@@ -60,8 +60,7 @@ const Waterfall = ({
     repaint
   } = useRepaint({
     columns,
-    rowGap,
-    isSequential: sequential
+    rowGap
   });
   const styled = props(styles.waterfall({
     rowGap,
@@ -69,17 +68,22 @@ const Waterfall = ({
   }), !sequential && maxHeight > 0 && styles.repainted({
     maxHeight: maxHeight
   }));
+  useUpdateEffect(() => {
+    // no need to repaint when `sequential`
+    if (sequential) return;
+    repaint();
+  }, [rowGap]);
   useMounted(() => {
     // no need to observer when `sequential`
     if (sequential) return;
     // observer be called when the component is mounted
     // so in waterfall we use current time to first render
-    // FIXME: repaint twice in layout effect & resize observer
     const resizer = new ResizeObserver(() => {
       repaint();
     });
     Array.from(items.current.values()).forEach(node => {
-      node && resizer.observe(node);
+      if (!node) return;
+      resizer.observe(node);
     });
     return () => {
       resizer.disconnect();

package/dist/components/watermark/types.d.ts

@@ -7,7 +7,7 @@ type Font = {
     /**
      * @description
      * fill color
-     * @default "rgba(0,0,0,.15)"
+     * @default "rgba(0, 0, 0, 0.15)"
      */
     color?: CanvasFillStrokeStyles["fillStyle"];
     /**

package/dist/components/watermark/watermark.js

@@ -8,7 +8,7 @@ const Watermark = ({
   width = 120,
   height = 64,
   font: {
-    color = "rgba(0,0,0,.15)",
+    color = "rgba(0, 0, 0, 0.15)",
     fontSize = 16,
     fontFamily = "sans-serif",
     fontStyle = "normal",

package/dist/hooks/use-class-names.d.ts

@@ -192,4 +192,19 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         1: string;
         2: string;
     };
+    36: {
+        0: string;
+        1: string;
+        2: string;
+    };
+    37: {
+        0: string;
+        1: string;
+        2: string;
+        3: string;
+        7: string;
+        4: string;
+        5: string;
+        6: string;
+    };
 }[T];

package/dist/hooks/use-expand-effect.d.ts

@@ -1,5 +1,5 @@
 import { useAnimate } from "framer-motion";
-type UsedAnimate = ReturnType<typeof useAnimate<HTMLUListElement>>;
+type UsedAnimate = ReturnType<typeof useAnimate<HTMLElement>>;
 /**
  * @description
  * effect for expand handler

package/dist/hooks/use-expand-effect.js

@@ -7,23 +7,27 @@ import { useUpdateEffect } from '@aiszlab/relax';
 const useExpandEffect = ({ expanded, target, animate, }) => {
     useUpdateEffect(async () => {
         if (expanded) {
-            target.current.attributeStyleMap.set("height", 0);
-            target.current.attributeStyleMap.set("overflow", "hidden");
-            target.current.attributeStyleMap.set("display", "block");
+            target.current.style.height = "0";
+            target.current.style.overflow = "hidden";
+            target.current.style.display = "inherit";
             await animate(target.current, {
                 height: "auto",
             });
-            target.current.attributeStyleMap.clear();
+            target.current.style.height = "";
+            target.current.style.overflow = "";
+            target.current.style.display = "";
             return;
         }
         // style play like display: none
-        target.current.attributeStyleMap.set("overflow", "hidden");
-        target.current.attributeStyleMap.set("height", "auto");
-        target.current.attributeStyleMap.set("display", "block");
+        target.current.style.overflow = "hidden";
+        target.current.style.height = "auto";
+        target.current.style.display = "inherit";
         await animate(target.current, {
             height: 0,
         });
-        target.current.attributeStyleMap.clear();
+        target.current.style.height = "";
+        target.current.style.overflow = "";
+        target.current.style.display = "none";
     }, [expanded]);
 };
 

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

@@ -0,0 +1,11 @@
+import { HTMLAttributeReferrerPolicy } from "react";
+/**
+ * @description
+ * prefetch image
+ * if image load failed, get fail status
+ */
+export declare const useImage: ({ src, crossOrigin, referrerPolicy, }: {
+    src?: string;
+    crossOrigin?: string;
+    referrerPolicy?: HTMLAttributeReferrerPolicy;
+}) => false | "error" | "loaded";

package/dist/hooks/use-image.js

@@ -0,0 +1,34 @@
+import { useState, useEffect } from 'react';
+
+/**
+ * @description
+ * prefetch image
+ * if image load failed, get fail status
+ */
+const useImage = ({ src, crossOrigin, referrerPolicy = "no-referrer", }) => {
+    const [isLoaded, setIsLoaded] = useState(false);
+    useEffect(() => {
+        if (!src) {
+            return;
+        }
+        setIsLoaded(false);
+        const image = new Image();
+        image.onload = () => {
+            setIsLoaded("loaded");
+        };
+        image.onerror = () => {
+            setIsLoaded("error");
+        };
+        image.crossOrigin = crossOrigin ?? null;
+        image.referrerPolicy = referrerPolicy;
+        image.src = src;
+        return () => {
+            image.onload = null;
+            image.onerror = null;
+            image.remove();
+        };
+    }, [src, crossOrigin, referrerPolicy]);
+    return isLoaded;
+};
+
+export { useImage };

package/dist/index.d.ts

@@ -47,6 +47,7 @@ export { Upload } from "./components/upload";
 export { Progress } from "./components/progress";
 export { Popover } from "./components/popover";
 export { Watermark } from "./components/watermark";
+export { Collapse } from "./components/collapse";
 /**
  * @description
  * hooks

package/dist/index.js

@@ -44,6 +44,7 @@ export { default as Upload } from './components/upload/upload.js';
 export { default as Progress } from './components/progress/progress.js';
 export { default as Popover } from './components/popover/popover.js';
 export { default as Watermark } from './components/watermark/watermark.js';
+export { default as Collapse } from './components/collapse/collapse.js';
 export { useMessage } from './components/message/hooks.js';
 export { useNotification } from './components/notification/hooks.js';
 export { useTheme } from './components/theme/hooks.js';