musae 0.2.6 → 0.2.8

package/dist/components/transfer/hooks.js

@@ -0,0 +1,49 @@
+import { useState, useMemo, useCallback } from 'react';
+import { useControlledState } from '@aiszlab/relax';
+
+/**
+ * @description
+ * options
+ */
+const useTransfer = (props) => {
+    const [value, setValue] = useControlledState(props.value);
+    const [transferKeys, setTransferKeys] = useState([]);
+    const [untransferKeys, setUntransferKeys] = useState([]);
+    const options = useMemo(() => {
+        return props.options.reduce((prev, item) => prev.set(item.value, item), new Map());
+    }, [props.options]);
+    const [transferred, untransferred] = useMemo(() => {
+        return (value ?? []).reduce(([transferred, untransferred], key) => {
+            if (untransferred.has(key)) {
+                transferred.set(key, untransferred.get(key));
+                untransferred.delete(key);
+            }
+            return [transferred, untransferred];
+        }, [new Map(), new Map(options)]);
+    }, [options, value]);
+    const transfer = useCallback(() => {
+        setValue((prev = []) => [...prev, ...transferKeys]);
+        setTransferKeys([]);
+    }, [transferKeys]);
+    const untransfer = useCallback(() => {
+        setValue((prev = []) => {
+            return Array.from(untransferKeys.reduce((checkedKeys, unchecked) => {
+                checkedKeys.delete(unchecked);
+                return checkedKeys;
+            }, new Set(prev)));
+        });
+        setUntransferKeys([]);
+    }, [untransferKeys]);
+    return {
+        transferred,
+        untransferred,
+        transfer,
+        untransfer,
+        transferKeys,
+        untransferKeys,
+        setTransferKeys,
+        setUntransferKeys,
+    };
+};
+
+export { useTransfer };

package/dist/components/transfer/index.d.ts

@@ -0,0 +1,2 @@
+import Transfer from "./transfer";
+export { Transfer };

package/dist/components/transfer/item.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TransferItemProps } from "./types";
+declare const Item: ({ value, label }: TransferItemProps) => React.JSX.Element;
+export default Item;

package/dist/components/transfer/item.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Checkbox } from '../checkbox/index.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TransferClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+
+const Item = ({
+  value,
+  label
+}) => {
+  const classNames = useClassNames(ComponentToken.Transfer);
+  const styled = {
+    item: {
+      className: "musae-78zum5 musae-6s0dn4 musae-gj1dgu musae-ovjknk musae-vbka3v"
+    }
+  };
+  return React.createElement("li", {
+    className: clsx(classNames[TransferClassToken.Item], styled.item.className),
+    style: styled.item.style
+  }, React.createElement(Checkbox, {
+    value: value
+  }), label);
+};
+
+export { Item as default };

package/dist/components/transfer/list.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TransferListProps } from "./types";
+declare const List: ({ options, title, onChange, value }: TransferListProps) => React.JSX.Element;
+export default List;

package/dist/components/transfer/list.js

@@ -0,0 +1,122 @@
+import React, { useContext } from 'react';
+import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.js';
+import { useTheme } from '../theme/hooks.js';
+import { ColorToken } from '../../utils/colors.js';
+import Item from './item.js';
+import { Checkbox } from '../checkbox/index.js';
+import { Context } from './context.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TransferClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import { typography } from '../theme/theme.js';
+
+const styles = {
+  list: props => [{
+    width: "musae-fx4e2q",
+    height: "musae-1ajdkb8",
+    borderWidth: "musae-1i8jmgv",
+    borderInlineWidth: null,
+    borderInlineStartWidth: null,
+    borderLeftWidth: null,
+    borderInlineEndWidth: null,
+    borderRightWidth: null,
+    borderBlockWidth: null,
+    borderTopWidth: null,
+    borderBottomWidth: 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,
+    borderRadius: "musae-1h268bu",
+    borderStartStartRadius: null,
+    borderStartEndRadius: null,
+    borderEndStartRadius: null,
+    borderEndEndRadius: null,
+    borderTopLeftRadius: null,
+    borderTopRightRadius: null,
+    borderBottomLeftRadius: null,
+    borderBottomRightRadius: null,
+    $$css: true
+  }, {
+    "--borderColor": props.outlineColor != null ? props.outlineColor : "initial"
+  }],
+  header: props => [{
+    display: "musae-78zum5",
+    alignItems: "musae-6s0dn4",
+    paddingBlock: "musae-mcngwa",
+    paddingTop: null,
+    paddingBottom: null,
+    paddingInline: "musae-gj1dgu",
+    paddingStart: null,
+    paddingLeft: null,
+    paddingEnd: null,
+    paddingRight: null,
+    borderBottomWidth: "musae-lntmim",
+    borderBottomColor: "musae-43481e",
+    borderBottomStyle: "musae-1q0q8m5",
+    $$css: true
+  }, {
+    "--borderBottomColor": props.outlineColor != null ? props.outlineColor : "initial"
+  }]
+};
+const List = ({
+  options,
+  title,
+  onChange,
+  value
+}) => {
+  const theme = useTheme();
+  const {
+    disabled
+  } = useContext(Context);
+  const classNames = useClassNames(ComponentToken.Transfer);
+  const styled = {
+    list: _stylex.props(styles.list({
+      outlineColor: theme.colors[ColorToken.Outline]
+    })),
+    header: _stylex.props(styles.header({
+      outlineColor: theme.colors[ColorToken.Outline]
+    }), typography.body.medium),
+    title: {
+      className: "musae-b3r6kr musae-p4054r musae-1isitws"
+    }
+  };
+  return React.createElement("div", {
+    className: clsx(classNames[TransferClassToken.List], styled.list.className),
+    style: styled.list.style
+  }, React.createElement("div", {
+    className: clsx(classNames[TransferClassToken.Header], styled.header.className),
+    style: styled.header.style
+  }, React.createElement("span", null, options.length, "\u9879"), React.createElement("span", {
+    className: clsx(classNames[TransferClassToken.Title], styled.title.className),
+    style: styled.title.style
+  }, title)), React.createElement(Checkbox.Group, {
+    value: value,
+    onChange: onChange,
+    disabled: disabled
+  }, React.createElement("ul", {
+    className: classNames[TransferClassToken.Body]
+  }, options.map(option => {
+    return React.createElement(Item, {
+      key: option.value,
+      label: option.label,
+      value: option.value
+    });
+  }))));
+};
+
+export { List as default };

package/dist/components/transfer/transfer.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { TransferProps } from "./types";
+declare const Transfer: ({ options, value, titles, disabled, className, style }: TransferProps) => React.JSX.Element;
+export default Transfer;

package/dist/components/transfer/transfer.js

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import { useTransfer } from './hooks.js';
+import List from './list.js';
+import Button from '../button/button.js';
+import { Context } from './context.js';
+import { useClassNames } from '../../hooks/use-class-names.js';
+import { ComponentToken, TransferClassToken } from '../../utils/class-name.js';
+import clsx from 'clsx';
+import KeyboardArrowRight from '../icon/icons/hardware/keyboard-arrow-right.js';
+import KeyboardArrowLeft from '../icon/icons/hardware/keyboard-arrow-left.js';
+
+const Transfer = ({
+  options,
+  value,
+  titles = [null, null],
+  disabled = false,
+  className,
+  style
+}) => {
+  const {
+    transferred,
+    untransferred,
+    transfer,
+    untransfer,
+    transferKeys,
+    untransferKeys,
+    setTransferKeys,
+    setUntransferKeys
+  } = useTransfer({
+    options,
+    value
+  });
+  const classNames = useClassNames(ComponentToken.Transfer);
+  const styled = {
+    transfer: {
+      className: "musae-78zum5 musae-1q0g3np musae-6s0dn4 musae-vbka3v"
+    },
+    operation: {
+      className: "musae-78zum5 musae-dt5ytf musae-vbka3v"
+    }
+  };
+  const contextValue = useMemo(() => {
+    return {
+      disabled
+    };
+  }, [disabled]);
+  return React.createElement(Context.Provider, {
+    value: contextValue
+  }, React.createElement("div", {
+    className: clsx(classNames[TransferClassToken.Transfer], className, styled.transfer.className),
+    style: {
+      ...styled.transfer.style,
+      ...style
+    }
+  }, React.createElement(List, {
+    options: Array.from(untransferred.values()),
+    title: titles[0],
+    value: transferKeys,
+    onChange: setTransferKeys
+  }), React.createElement("div", {
+    className: clsx(classNames[TransferClassToken.Operation], styled.operation.className),
+    style: styled.operation.style
+  }, React.createElement(Button, {
+    shape: "circular",
+    size: "small",
+    onClick: transfer,
+    disabled: disabled || transferKeys.length === 0
+  }, React.createElement(KeyboardArrowRight, null)), React.createElement(Button, {
+    shape: "circular",
+    size: "small",
+    onClick: untransfer,
+    disabled: disabled || untransferKeys.length === 0
+  }, React.createElement(KeyboardArrowLeft, null))), React.createElement(List, {
+    options: Array.from(transferred.values()),
+    title: titles[1],
+    value: untransferKeys,
+    onChange: setUntransferKeys
+  })));
+};
+var Transfer$1 = Transfer;
+
+export { Transfer$1 as default };

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

@@ -0,0 +1,87 @@
+import type { Key, ReactNode } from "react";
+import type { Option } from "../../types/option";
+import { ComponentProps } from "../../types/element";
+export type TransferOption = Omit<Option, "children">;
+/**
+ * @description
+ * transfer props
+ */
+export type TransferProps = ComponentProps & {
+    /**
+     * @description
+     * options
+     * @requires
+     */
+    options: TransferOption[];
+    /**
+     * @description
+     * value
+     * @default void 0
+     */
+    value?: Key[];
+    /**
+     * @description
+     * titles
+     * @default [null, null]
+     */
+    titles?: [ReactNode, ReactNode];
+    /**
+     * @description
+     * disabled
+     * @default false
+     */
+    disabled?: boolean;
+};
+/**
+ * @description
+ * transfer list props
+ */
+export type TransferListProps = {
+    /**
+     * @description
+     * value
+     */
+    value: Key[];
+    /**
+     * @description
+     * options
+     */
+    options: TransferOption[];
+    /**
+     * @description
+     * title
+     */
+    title?: ReactNode;
+    /**
+     * @description
+     * change handler
+     */
+    onChange: (keys: Key[]) => void;
+};
+/**
+ * @description
+ * transfer item props
+ */
+export type TransferItemProps = {
+    /**
+     * @description
+     * value
+     */
+    value: Key;
+    /**
+     * @description
+     * label
+     */
+    label: ReactNode;
+};
+/**
+ * @description
+ * context value
+ */
+export type ContextValue = {
+    /**
+     * @description
+     * disabled
+     */
+    disabled: boolean;
+};

package/dist/components/tree/list.js

@@ -1,4 +1,4 @@
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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, { useContext } from 'react';
 import Node from './node.js';
 import clsx from 'clsx';
@@ -6,7 +6,8 @@ import { useAnimate } from 'framer-motion';
 import Context from './context.js';
 import { useClassNames } from '../../hooks/use-class-names.js';
 import { ComponentToken, TreeClassToken } from '../../utils/class-name.js';
-import { useExpandEffect } from '../../hooks/use-expand-effect.js';
+import { useExpandable } from '../../hooks/use-expandable.js';
+import { useUpdateEffect } from '@aiszlab/relax';
 
 const styles = {
   list: {
@@ -33,11 +34,17 @@ const List = ({
     onExpand
   } = useContext(Context);
   const classNames = useClassNames(ComponentToken.Tree);
-  useExpandEffect({
-    animate,
-    target: scope,
-    expanded
-  });
+  const {
+    expand,
+    collapse
+  } = useExpandable();
+  useUpdateEffect(async () => {
+    if (expanded) {
+      await expand([scope, animate]);
+      return;
+    }
+    await collapse([scope, animate]);
+  }, [expanded]);
   const styled = props(styles.list, !expanded && styles.hidden);
   return React.createElement("ul", {
     className: 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/.pnpm/@stylexjs_stylex@0.7.4/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 clsx from 'clsx';
 import { useTheme } from '../theme/hooks.js';
 import { ColorToken } from '../../utils/colors.js';

package/dist/components/waterfall/sequential.js

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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 => [{

package/dist/components/waterfall/waterfall.js

@@ -1,4 +1,4 @@
-import { props } from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.4/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';

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

@@ -135,6 +135,7 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
     };
     24: {
         0: string;
+        1: string;
     };
     25: {
         0: string;
@@ -160,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;
@@ -217,4 +224,13 @@ export declare const useClassNames: <T extends ComponentToken>(token: T) => {
         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';