musae 0.2.2 → 0.2.3

package/dist/components/rate/star.js

@@ -31,8 +31,8 @@ const styles = {
       $$css: true
     }
   },
-  leading: {
-    default: props => [{
+  half: {
+    default: {
       position: "musae-10l6tqk",
       width: "musae-1gn8jaj",
       height: "musae-b27hse",
@@ -46,7 +46,7 @@ const styles = {
       overflowX: null,
       overflowY: null,
       $$css: true
-    }, {}],
+    },
     checked: props => [{
       opacity: "musae-1hc1fzr",
       color: "musae-19dipnz",
@@ -55,12 +55,12 @@ const styles = {
       "--color": props.color != null ? props.color : "initial"
     }]
   },
-  trailing: {
+  full: {
     default: {
       userSelect: "musae-87ps6o",
       $$css: true
     },
-    checkd: props => [{
+    checked: props => [{
       color: "musae-19dipnz",
       $$css: true
     }, {
@@ -104,12 +104,10 @@ const Star = ({
     star: _stylex.props(styles.star.default({
       color: theme.colors[ColorToken.SurfaceContainerHighest]
     }), disabled && styles.star.disabled),
-    leading: _stylex.props(styles.leading.default({
-      hoveredColor: theme.colors[ColorToken.Primary]
-    }), isHalf && styles.leading.checked({
+    half: _stylex.props(styles.half.default, isHalf && styles.half.checked({
       color: theme.colors[ColorToken.Primary]
     })),
-    trailing: _stylex.props(styles.trailing.default, isFull && styles.trailing.checkd({
+    full: _stylex.props(styles.full.default, isFull && styles.full.checked({
       color: theme.colors[ColorToken.Primary]
     }))
   };
@@ -117,8 +115,8 @@ const Star = ({
     className: clsx(classNames[RateClassToken.Star], styled.star.className),
     style: styled.star.style
   }, React.createElement("div", {
-    className: clsx(classNames[RateClassToken.Leading], styled.leading.className),
-    style: styled.leading.style,
+    className: clsx(classNames[RateClassToken.Half], styled.half.className),
+    style: styled.half.style,
     ...(!disabled && {
       ...halfHoverProps,
       onClick: half
@@ -126,8 +124,8 @@ const Star = ({
   }, createElement(_Star, {
     size: "large"
   })), React.createElement("div", {
-    className: clsx(classNames[RateClassToken.Trailing], styled.trailing.className),
-    style: styled.trailing.style,
+    className: clsx(classNames[RateClassToken.Full], styled.full.className),
+    style: styled.full.style,
     ...(!disabled && {
       ...fullHoverProps,
       onClick: full

package/dist/components/ripple/hooks.js

@@ -1,18 +1,21 @@
 import { useState, useCallback, useMemo } from 'react';
+import { useIdentity } from '@aiszlab/relax';
 
 function useRipple() {
     const [_ripples, _setRipples] = useState(new Map());
+    const [, unique] = useIdentity();
     const add = useCallback((event) => {
         const trigger = event.currentTarget;
         const size = Math.max(trigger.clientWidth, trigger.clientHeight);
         const { x, y } = trigger.getBoundingClientRect();
         _setRipples((prev) => {
-            return new Map(prev).set(crypto.randomUUID(), {
+            return new Map(prev).set(unique(), {
                 size,
                 x: event.clientX - x - size / 2,
                 y: event.clientY - y - size / 2,
             });
         });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     const clear = useCallback((key) => {
         _setRipples((prev) => {

package/dist/components/table/body.js

@@ -1,5 +1,5 @@
 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 clsx from 'clsx';
@@ -8,6 +8,38 @@ import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';
 
 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.borderColor != null ? props.borderColor : "initial"
+  }],
   bordered: {
     borderInline: "musae-10htjfm",
     $$css: true
@@ -20,8 +52,8 @@ const Body = props$1 => {
   } = useTable();
   const theme = useTheme();
   if (!table) return null;
-  const styled = props(bordered && styles.bordered, typography.body.small, styles$1.cell({
-    outlineColor: theme.colors[ColorToken.OutlineVariant]
+  const styled = props(bordered && styles.bordered, typography.body.small, styles.cell({
+    borderColor: theme.colors[ColorToken.OutlineVariant]
   }));
   return React.createElement("tbody", null, table.getRowModel().rows.map(row => React.createElement("tr", {
     key: row.id

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

@@ -2,3 +2,9 @@
 import type { ContextValue } from "./types";
 declare const Context: import("react").Context<ContextValue<unknown>>;
 export default Context;
+/**
+ * @author murukal
+ * @description
+ * use table context hook
+ */
+export declare const useTable: <T>() => ContextValue<T>;

package/dist/components/table/context.js

@@ -1,7 +1,15 @@
-import { createContext } from 'react';
+import { createContext, useContext } from 'react';
 
 const Context = createContext({
     bordered: false,
 });
+/**
+ * @author murukal
+ * @description
+ * use table context hook
+ */
+const useTable = () => {
+    return useContext(Context);
+};
 
-export { Context as default };
+export { Context as default, useTable };

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

@@ -0,0 +1,3 @@
+import type { HeaderCellProps } from "../types";
+declare const Cell: ({ sortable, children: _children, value, sortDirections: _sortDirections }: HeaderCellProps) => any;
+export default Cell;

package/dist/components/table/header/cell.js

@@ -0,0 +1,129 @@
+import React, { useContext, useMemo } from 'react';
+import { toFunction, useEvent, isUndefined } from '@aiszlab/relax';
+import _stylex from '../../../node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../../theme/hooks.js';
+import { ColorToken } from '../../../utils/colors.js';
+import Context from '../context.js';
+import UnfoldMore from '../../icon/icons/navigation/unfold-more.js';
+
+const styles = {
+  cell: {
+    default: {
+      display: "musae-78zum5",
+      justifyContent: "musae-1qughib",
+      alignItems: "musae-6s0dn4",
+      $$css: true
+    },
+    handlers: props => [{
+      display: "musae-3nfvp2",
+      flexDirection: "musae-1q0g3np",
+      gap: "musae-29tp26",
+      rowGap: null,
+      columnGap: null,
+      color: "musae-19dipnz",
+      userSelect: "musae-87ps6o",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }]
+  },
+  sort: {
+    default: {
+      position: "musae-1n2onr6",
+      cursor: "musae-1ypdohk",
+      $$css: true
+    },
+    half: {
+      position: "musae-10l6tqk",
+      top: "musae-9oc6z4",
+      insetInlineStart: "musae-1at4hj2",
+      left: null,
+      right: null,
+      height: "musae-1cj5796",
+      overflow: "musae-b3r6kr",
+      overflowX: null,
+      overflowY: null,
+      $$css: true
+    },
+    checked: props => [{
+      color: "musae-19dipnz",
+      $$css: true
+    }, {
+      "--color": props.color != null ? props.color : "initial"
+    }]
+  }
+};
+const Cell = ({
+  sortable = false,
+  children: _children,
+  value,
+  sortDirections: _sortDirections
+}) => {
+  const {
+    sortDescriptor,
+    onSortChange
+  } = useContext(Context);
+  const children = toFunction(_children)();
+  const theme = useTheme();
+  // convert sort directions to usable
+  const sortDirections = useMemo(() => {
+    return _sortDirections.reduce((prev, item, index) => {
+      return prev.set(item, _sortDirections[index + 1] ?? null);
+    }, new Map());
+  }, [_sortDirections]);
+  const sort = useMemo(() => {
+    if (sortDescriptor?.key === value) {
+      return sortDescriptor.direction;
+    }
+    return null;
+  }, [sortDescriptor, value]);
+  // sort handler
+  const onSort = useEvent(() => {
+    const _direction = sortDirections.get(sort);
+    const __direction = isUndefined(_direction) ? "ascending" : _direction;
+    onSortChange?.({
+      key: value,
+      direction: __direction
+    });
+  });
+  // only children, render directly
+  if (!sortable) {
+    return children;
+  }
+  const styled = {
+    cell: _stylex.props(styles.cell.default),
+    handlers: _stylex.props(styles.cell.handlers({
+      color: theme.colors[ColorToken.SurfaceContainerHighest]
+    })),
+    sort: _stylex.props(styles.sort.default),
+    fullSort: _stylex.props(sort === "descending" && styles.sort.checked({
+      color: theme.colors[ColorToken.Primary]
+    })),
+    halfSort: _stylex.props(styles.sort.half, sort === "ascending" && styles.sort.checked({
+      color: theme.colors[ColorToken.Primary]
+    }))
+  };
+  return React.createElement("div", {
+    className: styled.cell.className,
+    style: styled.cell.style
+  }, children, React.createElement("span", {
+    className: styled.handlers.className,
+    style: styled.handlers.style
+  }, React.createElement("span", {
+    className: styled.sort.className,
+    style: styled.sort.style,
+    onClick: onSort
+  }, React.createElement("div", {
+    className: styled.fullSort.className,
+    style: styled.fullSort.style
+  }, React.createElement(UnfoldMore, {
+    size: "medium"
+  })), !!sort && React.createElement("div", {
+    className: styled.halfSort.className,
+    style: styled.halfSort.style
+  }, React.createElement(UnfoldMore, {
+    size: "medium"
+  })))));
+};
+
+export { Cell as default };

package/dist/components/table/{header.d.ts → header/header.d.ts}

@@ -1,4 +1,4 @@
 import React from "react";
-import { HeaderProps } from "./types";
+import type { HeaderProps } from "../types";
 declare const Header: <T>(props: HeaderProps) => React.JSX.Element | null;
 export default Header;

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",
@@ -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)));
 };