musae 0.2.2 → 0.2.4

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/tabs/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue | null>;
 export default Context;

package/dist/components/tabs/item.js

@@ -14,7 +14,9 @@ const Item = ({ value, onClick, ...props }) => {
     const click = useCallback(() => {
         onClick(value);
     }, [onClick, value]);
-    return (React.createElement(Button, { variant: "text", color: isActive ? "primary" : "secondary", ref: setItem, onClick: click, className: classNames[TabsClassToken.Item], ripple: false }, props.label));
+    return (React.createElement(Button, { variant: "text", color: isActive ? "primary" : "secondary", ref: setItem, onClick: click, className: classNames[TabsClassToken.Item], ripple: false, style: {
+            borderRadius: "10% 10% 0 0",
+        } }, props.label));
 };
 
 export { Item as default };

package/dist/components/tabs/tabs.js

@@ -3,7 +3,7 @@ import { useControlledState, useMounted } from '@aiszlab/relax';
 import { useAnimate } from 'framer-motion';
 import Context from './context.js';
 import Item from './item.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import { useClassNames } from '../../hooks/use-class-names.js';

package/dist/components/tag/tag.js

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TagClassToken } from '../../utils/class-name.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { typography } from '../theme/theme.js';
 import { ColorToken } from '../../utils/colors.js';

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { Palette, ContextValue, Theme, Mode } from "./types";
 export declare const PALETTE: Readonly<Palette>;
 /**
@@ -28,6 +27,6 @@ export declare const useSwitchable: ({ theme }: {
     theme: Theme;
 }) => {
     mode: Mode;
-    toggle: (event: import("react").MouseEvent<Element, MouseEvent>) => void;
+    toggle: (event: import("react").MouseEvent) => void;
     colors: Record<import("../../utils/colors").ColorToken, string>;
 };

package/dist/components/time-picker/panel.js

@@ -4,7 +4,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimePickerClassToken } from '../../utils/class-name.js';
 import Button from '../button/button.js';
 import dayjs from 'dayjs';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 import clsx from 'clsx';

package/dist/components/time-picker/time-picker.js

@@ -5,7 +5,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimePickerClassToken } from '../../utils/class-name.js';
 import Panel from './panel.js';
 import { useValue } from './hooks.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { useEvent } from '@aiszlab/relax';
 import { styles } from '../input/input.js';
 

package/dist/components/timeline/context.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { ContextValue } from "./types";
 export declare const Context: import("react").Context<ContextValue>;

package/dist/components/timeline/item.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import { Context } from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TimelineClassToken } from '../../utils/class-name.js';

package/dist/components/tour/tour.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Portal from '../portal/portal.js';
 import Popper from '../popper/popper.js';
-import _stylex from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import Button from '../button/button.js';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/tree/context.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue>;
 export default Context;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { TreeProps } from "./types";
 /**
  * @description

package/dist/components/tree/list.js

@@ -1,4 +1,4 @@
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import React, { useContext } from 'react';
 import Node from './node.js';
 import clsx from 'clsx';

package/dist/components/tree/node.js

@@ -3,7 +3,7 @@ import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TreeClassToken } from '../../utils/class-name.js';
 import Context from './context.js';
 import { Checkbox } from '../checkbox/index.js';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 import clsx from 'clsx';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

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

@@ -7,37 +7,39 @@ export type UploadProps = {
     /**
      * @description
      * on upload wrapper click handler
+     * @default void 0
      */
-    onClick: () => void;
+    onClick?: () => void;
     /**
      * @description
      * disabled
-     *
      * @default false
      */
     disabled?: boolean;
     /**
      * @description
      * multiple
-     *
      * @default false
      */
     multiple?: boolean;
     /**
      * @description
      * children
+     * @default void 0
      */
     children?: ReactNode;
     /**
      * @description
      * uploader
+     * @default void 0
      */
-    uploader: (file: File) => Promise<string>;
+    uploader?: (file: File) => Promise<string>;
     /**
      * @description
      * error
+     * @default void 0
      */
-    onError?: (event: any) => void;
+    onError?: (error: unknown) => void;
 };
 /**
  * @description
@@ -54,7 +56,7 @@ export type UploadedsRef = {
  * @description
  * uploaded list props
  */
-export type UploadedsProps = Pick<UploadProps, "uploader">;
+export type UploadedsProps = Pick<UploadProps, "uploader" | "onError">;
 /**
  * @description
  * status

package/dist/components/upload/upload.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import { UploadProps } from "./types";
-declare const Upload: ({ onClick: _onClick, disabled, multiple, children, uploader, onError }: UploadProps) => React.JSX.Element;
+declare const Upload: ({ onClick: _onClick, disabled, multiple, children: _children, uploader, onError }: UploadProps) => React.JSX.Element;
 export default Upload;

package/dist/components/upload/upload.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { useRef, useMemo, cloneElement } from 'react';
 import { useEvent } from '@aiszlab/relax';
 import { Keyboard } from '../../utils/keyboard.js';
 import Uploadeds from './uploadeds.js';
@@ -7,7 +7,7 @@ const Upload = ({
   onClick: _onClick,
   disabled,
   multiple,
-  children,
+  children: _children,
   uploader,
   onError
 }) => {
@@ -28,7 +28,7 @@ const Upload = ({
   });
   const onClick = useEvent(() => {
     inputRef.current?.click();
-    _onClick();
+    _onClick?.();
   });
   const onKeyDown = useEvent(e => {
     if (e.key !== Keyboard.Enter) return;
@@ -47,6 +47,12 @@ const Upload = ({
       className: "musae-1s85apg"
     }
   };
+  const children = useMemo(() => {
+    // @ts-ignore
+    return cloneElement(_children, {
+      disabled
+    });
+  }, [_children, disabled]);
   return React.createElement("div", null, React.createElement("div", {
     ...(!disabled && {
       onClick,
@@ -64,7 +70,8 @@ const Upload = ({
     onChange: onChange
   }), children), React.createElement(Uploadeds, {
     ref: uploadedsRef,
-    uploader: uploader
+    uploader: uploader,
+    onError: onError
   }));
 };
 var Upload$1 = Upload;

package/dist/components/upload/uploadeds.js

@@ -4,7 +4,8 @@ import Loading from '../icon/icons/mock/loading.js';
 import Clear from '../icon/icons/content/clear.js';
 
 const Uploadeds = forwardRef(({
-  uploader
+  uploader,
+  onError
 }, ref) => {
   const [items, setItems] = useState(new Map());
   const _counter = useRef(0);
@@ -22,17 +23,21 @@ const Uploadeds = forwardRef(({
   useImperativeHandle(ref, () => {
     return {
       add: async file => {
+        const hasUploader = !!uploader;
+        const status = hasUploader ? "loading" : "success";
         // push current file
         const id = _counter.current++;
         setItems(items => {
           return new Map(items).set(id, {
             file,
-            status: "loading"
+            status
           });
         });
         // call request by user provided
-        const url = await uploader(file).catch(() => {
+        if (!hasUploader) return;
+        const url = await uploader(file).catch(error => {
           loaded(id, "error");
+          onError?.(error);
           return null;
         });
         if (!url) return;

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

@@ -1,12 +1,10 @@
-/// <reference types="react" />
 /**
  * @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/sequential.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   column: props => [{

package/dist/components/waterfall/waterfall.js

@@ -1,9 +1,9 @@
-import { props } from '../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 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",