musae 0.2.5 → 0.2.7

package/dist/components/tree/tree.js

@@ -1,22 +1,26 @@
 import React, { useMemo } from 'react';
 import List from './list.js';
 import Context from './context.js';
-import { useToggleable } from '@aiszlab/relax';
-import { useExpandedKeys } from './hooks.js';
+import { useTogglable } from '@aiszlab/relax';
+import { useExpandedKeys, useSelectedKeys } from './hooks.js';
 
-const Tree = ({ expandedKeys: _expandedKeys, onExpand, className, style, ...props }) => {
-    const { toggledKeys: checkedKeys, toggle: check } = useToggleable(props.nodes);
-    const { toggle, expandedKeys } = useExpandedKeys([_expandedKeys, onExpand]);
+const Tree = ({ expandedKeys: _expandedKeys, onExpand, className, style, nodes, selectable = true, selectedKeys: _selectedKeys, }) => {
+    const { toggledKeys: checkedKeys, toggle: check } = useTogglable(nodes);
+    const { expandedKeys, toggle: expand } = useExpandedKeys([_expandedKeys, onExpand]);
+    const { selectedKeys, toggle: select } = useSelectedKeys({ selectedKeys: _selectedKeys });
     const contextValue = useMemo(() => {
         return {
             checkedKeys,
-            check,
+            onCheck: check,
             expandedKeys,
-            toggle,
+            onExpand: expand,
+            selectedKeys,
+            onSelect: select,
+            selectable,
         };
-    }, [check, checkedKeys, toggle, expandedKeys]);
+    }, [check, checkedKeys, expand, expandedKeys, select, selectedKeys, selectable]);
     return (React.createElement(Context.Provider, { value: contextValue },
-        React.createElement(List, { nodes: props.nodes, className: className, style: style })));
+        React.createElement(List, { nodes: nodes, className: className, style: style })));
 };
 var Tree$1 = Tree;
 

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

@@ -44,6 +44,18 @@ export type TreeProps = ComponentProps & {
      * @default void 0
      */
     onExpand?: (keys: Key[]) => void;
+    /**
+     * @description
+     * selectable
+     * @default true
+     */
+    selectable?: boolean;
+    /**
+     * @description
+     * selected keys
+     * @default void 0
+     */
+    selectedKeys?: Key[];
 };
 /**
  * @description
@@ -64,7 +76,7 @@ export type TreeNodeProps = WithLevel<Omit<TreeNode, "children" | "key">> & {
      * @description
      * expand handler
      */
-    onToggle?: (key: Key) => void;
+    onExpand?: (key: Key) => void;
 };
 /**
  * @description
@@ -87,31 +99,14 @@ export type TreeListProps = ComponentProps & {
      */
     level?: number;
 };
-/**
- * @description
- * context value
- */
 export type ContextValue = {
-    /**
-     * @description
-     * checked keys
-     */
     checkedKeys: Set<Key>;
-    /**
-     * @description
-     * check
-     */
-    check?: (key: Key) => void;
-    /**
-     * @description
-     * expandedKeys
-     */
+    onCheck?: (key: Key) => void;
     expandedKeys: Set<Key>;
-    /**
-     * @description
-     * toggle
-     */
-    toggle?: (key: Key) => void;
+    onExpand?: (key: Key) => void;
+    selectedKeys: Set<Key>;
+    onSelect?: (key: Key) => void;
+    selectable: boolean;
 };
 /**
  * @description

package/dist/components/waterfall/sequential.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
 
 const styles = {
   column: props => [{
@@ -10,6 +10,9 @@ const styles = {
     display: "musae-78zum5",
     flexDirection: "musae-dt5ytf",
     rowGap: "musae-m8a6f2",
+    overflow: "musae-ysyzu8",
+    overflowX: null,
+    overflowY: null,
     $$css: true
   }, {
     "--rowGap": (val => typeof val === "number" ? val + "px" : val != null ? val : "initial")(props.rowGap)

package/dist/components/waterfall/waterfall.js

@@ -1,10 +1,12 @@
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.6.1/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/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 { useUpdateEffect, useMounted } from '@aiszlab/relax';
 import Sequential from './sequential.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, WaterfallClassToken } from '../../utils/class-name.js';
 
 const styles = {
   waterfall: props => [{
@@ -62,6 +64,7 @@ const Waterfall = ({
     columns,
     rowGap
   });
+  const classNames = useClassNames(ComponentToken.Waterfall);
   const styled = props(styles.waterfall({
     rowGap,
     columnGap
@@ -96,7 +99,7 @@ const Waterfall = ({
       columns: columns,
       children: children,
       rowGap: rowGap,
-      className: clsx(className, styled.className),
+      className: clsx(classNames[WaterfallClassToken.Sequential], className, styled.className),
       style: {
         ...styled.style,
         ...style
@@ -104,7 +107,7 @@ const Waterfall = ({
     });
   }
   return React.createElement("div", {
-    className: clsx(className, styled.className),
+    className: clsx(classNames[WaterfallClassToken.Waterfall], className, styled.className),
     style: {
       ...styled.style,
       ...style

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

@@ -108,6 +108,7 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         2: string;
         3: string;
         4: string;
+        5: string;
     };
     21: {
         0: string;
@@ -126,9 +127,15 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         0: string;
         1: string;
         2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
+        7: string;
     };
     24: {
         0: string;
+        1: string;
     };
     25: {
         0: string;
@@ -154,16 +161,22 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
     28: {
         0: string;
         1: string;
-        5: string;
         6: string;
         7: string;
+        8: string;
         2: string;
         3: string;
         4: string;
+        5: string;
     };
     29: {
         0: string;
         1: string;
+        2: string;
+        3: string;
+        4: string;
+        5: string;
+        6: string;
     };
     30: {
         0: string;
@@ -207,4 +220,17 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         5: string;
         6: string;
     };
+    38: {
+        0: string;
+        1: string;
+    };
+    39: {
+        0: string;
+        6: string;
+        1: string;
+        3: string;
+        5: string;
+        2: string;
+        4: string;
+    };
 }[T];

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

@@ -0,0 +1,11 @@
+import { PortalProps } from "../components/portal/types";
+/**
+ * @description
+ * container
+ */
+export declare const useContainer: ({ container }: {
+    container: PortalProps["container"];
+}) => {
+    container: import("@aiszlab/relax/types").Voidable<HTMLElement>;
+    isDocumentBody: boolean;
+};

package/dist/hooks/use-container.js

@@ -0,0 +1,23 @@
+import { isFunction, isDomUsable } from '@aiszlab/relax';
+import { useMemo } from 'react';
+
+/**
+ * @description
+ * container
+ */
+const useContainer = ({ container }) => {
+    const _container = useMemo(() => {
+        if (!isFunction(container))
+            return container ?? (isDomUsable() ? document.body : null);
+        return container();
+    }, [container]);
+    const isDocumentBody = useMemo(() => {
+        return isDomUsable() && _container === document.body;
+    }, [_container]);
+    return {
+        container: _container,
+        isDocumentBody,
+    };
+};
+
+export { useContainer };

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

@@ -0,0 +1,11 @@
+import { useAnimate } from "framer-motion";
+type UsedAnimate = ReturnType<typeof useAnimate<HTMLElement>>;
+/**
+ * @description
+ * expand handler
+ */
+export declare const useExpandable: () => {
+    expand: ([element, animate]: UsedAnimate) => Promise<void>;
+    collapse: ([element, animate]: UsedAnimate) => Promise<void>;
+};
+export {};

package/dist/hooks/use-expandable.js

@@ -0,0 +1,37 @@
+import { useEvent } from '@aiszlab/relax';
+
+/**
+ * @description
+ * expand handler
+ */
+const useExpandable = () => {
+    const expand = useEvent(async ([element, animate]) => {
+        // style play like display: none
+        element.current.style.height = "0";
+        element.current.style.overflow = "hidden";
+        element.current.style.display = "inherit";
+        await animate(element.current, {
+            height: "auto",
+        });
+        element.current.style.height = "";
+        element.current.style.overflow = "";
+        element.current.style.display = "";
+    });
+    const collapse = useEvent(async ([element, animate]) => {
+        element.current.style.overflow = "hidden";
+        element.current.style.height = "auto";
+        element.current.style.display = "inherit";
+        await animate(element.current, {
+            height: 0,
+        });
+        element.current.style.height = "";
+        element.current.style.overflow = "";
+        element.current.style.display = "none";
+    });
+    return {
+        expand,
+        collapse,
+    };
+};
+
+export { useExpandable };

package/dist/index.d.ts

@@ -48,6 +48,8 @@ export { Progress } from "./components/progress";
 export { Popover } from "./components/popover";
 export { Watermark } from "./components/watermark";
 export { Collapse } from "./components/collapse";
+export { FloatingActionButton } from "./components/floating-action-button";
+export { Transfer } from "./components/transfer";
 /**
  * @description
  * hooks

package/dist/index.js

@@ -45,6 +45,8 @@ 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 { default as FloatingActionButton } from './components/floating-action-button/floating-action-button.js';
+export { default as Transfer } from './components/transfer/transfer.js';
 export { useMessage } from './components/message/hooks.js';
 export { useNotification } from './components/notification/hooks.js';
 export { useTheme } from './components/theme/hooks.js';