@1money/component-ui 0.0.43 → 0.0.44

package/lib/components/Trigger/interface.d.ts

@@ -1,5 +1,7 @@
 import type { CSSProperties, ReactElement, ReactNode, Ref } from 'react';
 import type { Placement } from '@floating-ui/react';
+import type { FloatingAnimation } from "../../hooks/useFloatingAnimation";
+export type { FloatingAnimation, FloatingAnimationKind } from "../../hooks/useFloatingAnimation";
 export type TriggerAction = 'click' | 'hover' | 'focus';
 export interface TriggerContentContext {
     close: () => void;
@@ -22,8 +24,20 @@ export interface TriggerProps {
     defaultOpen?: boolean;
     /** Show arrow pointing to trigger */
     showArrow?: boolean;
-    /** Gap between panel and trigger (px) */
-    offset?: number;
+    /**
+     * Gap between panel and trigger.
+     * - `number`: shorthand for `mainAxis` (perpendicular distance, in px).
+     * - object form (forwarded to floating-ui's `offset` middleware):
+     *   - `mainAxis`: distance perpendicular to the placement edge (e.g. vertical for `bottom-*`).
+     *   - `crossAxis`: distance parallel to the placement edge.
+     *   - `alignmentAxis`: shift along the alignment edge for `*-start` / `*-end` placements
+     *     (negative shifts toward the alignment side).
+     */
+    offset?: number | {
+        mainAxis?: number;
+        crossAxis?: number;
+        alignmentAxis?: number | null;
+    };
     /** Render in portal */
     portal?: boolean;
     /** Close on outside click / ESC */
@@ -35,6 +49,15 @@ export interface TriggerProps {
     };
     /** Reposition the floating panel on scroll/resize/reference movement. Default true. */
     autoReposition?: boolean;
+    /** Sync the floating panel width to the trigger element's width. Default false. */
+    matchTriggerWidth?: boolean;
+    /**
+     * Open/close animation. Default `{ duration: { open: 150, close: 100 }, initialScale: 0.96 }`.
+     * Set to `false` to disable animation entirely (panel appears/disappears instantly).
+     * - `duration`: ms; pass a number for symmetric, or an object for separate open/close timings.
+     * - `initialScale`: starting scale on enter / ending scale on exit (`1` = no scale, `0` = collapsed).
+     */
+    animation?: FloatingAnimation;
     /** Custom class for floating panel */
     overlayClassName?: string;
     /** Custom style for floating panel */

package/lib/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useFloatingAnimation } from './useFloatingAnimation';
+export type { FloatingAnimation, FloatingAnimationKind } from './useFloatingAnimation';

package/lib/hooks/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "useFloatingAnimation", {
+  enumerable: true,
+  get: function get() {
+    return _useFloatingAnimation.useFloatingAnimation;
+  }
+});
+var _useFloatingAnimation = require("./useFloatingAnimation");
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9ob29rcy9pbmRleC50cyJdLCJuYW1lcyI6WyJfdXNlRmxvYXRpbmdBbmltYXRpb24iLCJyZXF1aXJlIl0sIm1hcHBpbmdzIjoiOzs7Ozs7Ozs7OztBQUFBLElBQUFBLHFCQUFBLEdBQUFDLE9BQUEiLCJmaWxlIjoiaG9va3MvaW5kZXguanMiLCJzb3VyY2VzQ29udGVudCI6W251bGxdLCJzb3VyY2VSb290IjoiLi4vLi4vLi4vLi4vLi4vLi4vLi4vLi4vc3JjIn0=

package/lib/hooks/useFloatingAnimation.d.ts

@@ -0,0 +1,24 @@
+import type { FloatingContext, Placement } from '@floating-ui/react';
+export type FloatingAnimationKind = 'scale' | 'height';
+export type FloatingAnimation = false | {
+    /**
+     * Animation style.
+     * - `'scale'` (default): uniform `scale()` + opacity. Suited for tooltips, popovers.
+     * - `'height'`: vertical-only `scaleY()` + opacity, content unfolds along the placement edge. Suited for dropdowns, select panels.
+     */
+    kind?: FloatingAnimationKind;
+    duration?: number | {
+        open?: number;
+        close?: number;
+    };
+    /**
+     * Starting/ending scale.
+     * - For `kind: 'scale'`, default `0.96` (subtle pop).
+     * - For `kind: 'height'`, default `0` (collapsed to a line at the placement edge).
+     */
+    initialScale?: number;
+};
+export declare function useFloatingAnimation(context: FloatingContext, placement: Placement | undefined, animation: FloatingAnimation | undefined): {
+    isMounted: boolean;
+    styles: import("react").CSSProperties;
+};

package/lib/hooks/useFloatingAnimation.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFloatingAnimation = useFloatingAnimation;
+var _react = require("@floating-ui/react");
+var TRANSFORM_ORIGIN_BY_SIDE = {
+  top: 'bottom center',
+  bottom: 'top center',
+  left: 'center right',
+  right: 'center left'
+};
+var DEFAULT_DURATION = {
+  open: 150,
+  close: 100
+};
+var DEFAULT_SCALE_INITIAL = 0.96;
+var DEFAULT_HEIGHT_INITIAL = 0;
+function useFloatingAnimation(context, placement, animation) {
+  var _a, _b, _c, _d;
+  var disabled = animation === false;
+  var config = disabled ? undefined : animation;
+  var kind = (_a = config === null || config === void 0 ? void 0 : config.kind) !== null && _a !== void 0 ? _a : 'scale';
+  var duration = (_b = config === null || config === void 0 ? void 0 : config.duration) !== null && _b !== void 0 ? _b : DEFAULT_DURATION;
+  var defaultInitialScale = kind === 'height' ? DEFAULT_HEIGHT_INITIAL : DEFAULT_SCALE_INITIAL;
+  var initialScale = (_c = config === null || config === void 0 ? void 0 : config.initialScale) !== null && _c !== void 0 ? _c : defaultInitialScale;
+  var side = (placement !== null && placement !== void 0 ? placement : 'bottom-start').split('-')[0];
+  var transformOrigin = (_d = TRANSFORM_ORIGIN_BY_SIDE[side]) !== null && _d !== void 0 ? _d : 'top center';
+  var collapsedTransform = kind === 'height' ? "scaleY(".concat(initialScale, ")") : "scale(".concat(initialScale, ")");
+  var expandedTransform = kind === 'height' ? 'scaleY(1)' : 'scale(1)';
+  return (0, _react.useTransitionStyles)(context, {
+    duration: disabled ? 0 : duration,
+    initial: {
+      opacity: 0,
+      transform: collapsedTransform
+    },
+    open: {
+      opacity: 1,
+      transform: expandedTransform
+    },
+    close: {
+      opacity: 0,
+      transform: collapsedTransform
+    },
+    common: {
+      transformOrigin: transformOrigin
+    }
+  });
+}
+//# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInNyYy9ob29rcy91c2VGbG9hdGluZ0FuaW1hdGlvbi50cyIsImhvb2tzL3VzZUZsb2F0aW5nQW5pbWF0aW9uLmpzIl0sIm5hbWVzIjpbIl9yZWFjdCIsInJlcXVpcmUiLCJUUkFOU0ZPUk1fT1JJR0lOX0JZX1NJREUiLCJ0b3AiLCJib3R0b20iLCJsZWZ0IiwicmlnaHQiLCJERUZBVUxUX0RVUkFUSU9OIiwib3BlbiIsImNsb3NlIiwiREVGQVVMVF9TQ0FMRV9JTklUSUFMIiwiREVGQVVMVF9IRUlHSFRfSU5JVElBTCIsInVzZUZsb2F0aW5nQW5pbWF0aW9uIiwiY29udGV4dCIsInBsYWNlbWVudCIsImFuaW1hdGlvbiIsIl9hIiwiX2IiLCJfYyIsIl9kIiwiZGlzYWJsZWQiLCJjb25maWciLCJ1bmRlZmluZWQiLCJraW5kIiwiZHVyYXRpb24iLCJkZWZhdWx0SW5pdGlhbFNjYWxlIiwiaW5pdGlhbFNjYWxlIiwic2lkZSIsInNwbGl0IiwidHJhbnNmb3JtT3JpZ2luIiwiY29sbGFwc2VkVHJhbnNmb3JtIiwiY29uY2F0IiwiZXhwYW5kZWRUcmFuc2Zvcm0iLCJ1c2VUcmFuc2l0aW9uU3R5bGVzIiwiaW5pdGlhbCIsIm9wYWNpdHkiLCJ0cmFuc2Zvcm0iLCJjb21tb24iXSwibWFwcGluZ3MiOiI7Ozs7OztBQUFBLElBQUFBLE1BQUEsR0FBQUMsT0FBQTtBQXVCQSxJQUFNQyx3QkFBd0IsR0FBMkI7RUFDdkRDLEdBQUcsRUFBRSxlQUFlO0VBQ3BCQyxNQUFNLEVBQUUsWUFBWTtFQUNwQkMsSUFBSSxFQUFFLGNBQWM7RUFDcEJDLEtBQUssRUFBRTtBQ3JCVCxDRHNCQztBQUVELElBQU1DLGdCQUFnQixHQUFHO0VBQUVDLElBQUksRUFBRSxHQUFHO0VBQUVDLEtBQUssRUFBRTtBQUFHLENBQVc7QUFDM0QsSUFBTUMscUJBQXFCLEdBQUcsSUFBSTtBQUNsQyxJQUFNQyxzQkFBc0IsR0FBRyxDQUFDO0FBRTFCLFNBQVVDLG9CQUFvQkEsQ0FDbENDLE9BQXdCLEVBQ3hCQyxTQUFnQyxFQUNoQ0MsU0FBd0MsRUFBQTtFQzFCdEMsSUFBSUMsRUFBRSxFQUFFQyxFQUFFLEVBQUVDLEVBQUUsRUFBRUMsRUFBRTtFRDRCcEIsSUFBTUMsUUFBUSxHQUFHTCxTQUFTLEtBQUssS0FBSztFQUNwQyxJQUFNTSxNQUFNLEdBQUdELFFBQVEsR0FBR0UsU0FBUyxHQUFHUCxTQUFTO0VBQy9DLElBQU1RLElBQUksR0FBMEIsQ0FBQVAsRUFBQSxHQUFBSyxNQUFNLEtBQUEsSUFBQSxJQUFOQSxNQUFNLEtBQUEsS0FBQSxDQUFBLEdBQUEsS0FBQSxDQUFBLEdBQU5BLE1BQU0sQ0FBRUUsSUFBSSxNQUFBLElBQUEsSUFBQVAsRUFBQSxLQUFBLEtBQUEsQ0FBQSxHQUFBQSxFQUFBLEdBQUksT0FBTztFQUMzRCxJQUFNUSxRQUFRLEdBQUcsQ0FBQVAsRUFBQSxHQUFBSSxNQUFNLEtBQUEsSUFBQSxJQUFOQSxNQUFNLEtBQUEsS0FBQSxDQUFBLEdBQUEsS0FBQSxDQUFBLEdBQU5BLE1BQU0sQ0FBRUcsUUFBUSxNQUFBLElBQUEsSUFBQVAsRUFBQSxLQUFBLEtBQUEsQ0FBQSxHQUFBQSxFQUFBLEdBQUlWLGdCQUFnQjtFQUNyRCxJQUFNa0IsbUJBQW1CLEdBQ3ZCRixJQUFJLEtBQUssUUFBUSxHQUFHWixzQkFBc0IsR0FBR0QscUJBQXFCO0VBQ3BFLElBQU1nQixZQUFZLEdBQUcsQ0FBQVIsRUFBQSxHQUFBRyxNQUFNLEtBQUEsSUFBQSxJQUFOQSxNQUFNLEtBQUEsS0FBQSxDQUFBLEdBQUEsS0FBQSxDQUFBLEdBQU5BLE1BQU0sQ0FBRUssWUFBWSxNQUFBLElBQUEsSUFBQVIsRUFBQSxLQUFBLEtBQUEsQ0FBQSxHQUFBQSxFQUFBLEdBQUlPLG1CQUFtQjtFQUNoRSxJQUFNRSxJQUFJLEdBQUcsQ0FBQ2IsU0FBUyxLQUFBLElBQUEsSUFBVEEsU0FBUyxLQUFBLEtBQUEsQ0FBQSxHQUFUQSxTQUFTLEdBQUksY0FBYyxFQUFFYyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQyxDQUFDO0VBQ3hELElBQU1DLGVBQWUsR0FBRyxDQUFBVixFQUFBLEdBQUFqQix3QkFBd0IsQ0FBQ3lCLElBQUksQ0FBQyxNQUFBLElBQUEsSUFBQVIsRUFBQSxLQUFBLEtBQUEsQ0FBQSxHQUFBQSxFQUFBLEdBQUksWUFBWTtFQUV0RSxJQUFNVyxrQkFBa0IsR0FDdEJQLElBQUksS0FBSyxRQUFRLGFBQUFRLE1BQUEsQ0FBYUwsWUFBWSxrQkFBQUssTUFBQSxDQUFlTCxZQUFZLE1BQUc7RUFDMUUsSUFBTU0saUJBQWlCLEdBQUdULElBQUksS0FBSyxRQUFRLEdBQUcsV0FBVyxHQUFHLFVBQVU7RUFFdEUsT0FBTyxJQUFBVSwwQkFBbUIsRUFBQ3BCLE9BQU8sRUFBRTtJQUNsQ1csUUFBUSxFQUFFSixRQUFRLEdBQUcsQ0FBQyxHQUFHSSxRQUFRO0lBQ2pDVSxPQUFPLEVBQUU7TUFBRUMsT0FBTyxFQUFFLENBQUM7TUFBRUMsU0FBUyxFQUFFTjtJQUFrQixDQUFFO0lBQ3REdEIsSUFBSSxFQUFFO01BQUUyQixPQUFPLEVBQUUsQ0FBQztNQUFFQyxTQUFTLEVBQUVKO0lBQWlCLENBQUU7SUFDbER2QixLQUFLLEVBQUU7TUFBRTBCLE9BQU8sRUFBRSxDQUFDO01BQUVDLFNBQVMsRUFBRU47SUFBa0IsQ0FBRTtJQUNwRE8sTUFBTSxFQUFFO01BQUVSLGVBQWUsRUFBZkE7SUFBZTtFQzlCekIsQ0QrQkQsQ0FBQztBQUNKIiwiZmlsZSI6Imhvb2tzL3VzZUZsb2F0aW5nQW5pbWF0aW9uLmpzIiwic291cmNlc0NvbnRlbnQiOltudWxsLCJpbXBvcnQgeyB1c2VUcmFuc2l0aW9uU3R5bGVzIH0gZnJvbSAnQGZsb2F0aW5nLXVpL3JlYWN0JztcbmNvbnN0IFRSQU5TRk9STV9PUklHSU5fQllfU0lERSA9IHtcbiAgICB0b3A6ICdib3R0b20gY2VudGVyJyxcbiAgICBib3R0b206ICd0b3AgY2VudGVyJyxcbiAgICBsZWZ0OiAnY2VudGVyIHJpZ2h0JyxcbiAgICByaWdodDogJ2NlbnRlciBsZWZ0Jyxcbn07XG5jb25zdCBERUZBVUxUX0RVUkFUSU9OID0geyBvcGVuOiAxNTAsIGNsb3NlOiAxMDAgfTtcbmNvbnN0IERFRkFVTFRfU0NBTEVfSU5JVElBTCA9IDAuOTY7XG5jb25zdCBERUZBVUxUX0hFSUdIVF9JTklUSUFMID0gMDtcbmV4cG9ydCBmdW5jdGlvbiB1c2VGbG9hdGluZ0FuaW1hdGlvbihjb250ZXh0LCBwbGFjZW1lbnQsIGFuaW1hdGlvbikge1xuICAgIHZhciBfYSwgX2IsIF9jLCBfZDtcbiAgICBjb25zdCBkaXNhYmxlZCA9IGFuaW1hdGlvbiA9PT0gZmFsc2U7XG4gICAgY29uc3QgY29uZmlnID0gZGlzYWJsZWQgPyB1bmRlZmluZWQgOiBhbmltYXRpb247XG4gICAgY29uc3Qga2luZCA9IChfYSA9IGNvbmZpZyA9PT0gbnVsbCB8fCBjb25maWcgPT09IHZvaWQgMCA/IHZvaWQgMCA6IGNvbmZpZy5raW5kKSAhPT0gbnVsbCAmJiBfYSAhPT0gdm9pZCAwID8gX2EgOiAnc2NhbGUnO1xuICAgIGNvbnN0IGR1cmF0aW9uID0gKF9iID0gY29uZmlnID09PSBudWxsIHx8IGNvbmZpZyA9PT0gdm9pZCAwID8gdm9pZCAwIDogY29uZmlnLmR1cmF0aW9uKSAhPT0gbnVsbCAmJiBfYiAhPT0gdm9pZCAwID8gX2IgOiBERUZBVUxUX0RVUkFUSU9OO1xuICAgIGNvbnN0IGRlZmF1bHRJbml0aWFsU2NhbGUgPSBraW5kID09PSAnaGVpZ2h0JyA/IERFRkFVTFRfSEVJR0hUX0lOSVRJQUwgOiBERUZBVUxUX1NDQUxFX0lOSVRJQUw7XG4gICAgY29uc3QgaW5pdGlhbFNjYWxlID0gKF9jID0gY29uZmlnID09PSBudWxsIHx8IGNvbmZpZyA9PT0gdm9pZCAwID8gdm9pZCAwIDogY29uZmlnLmluaXRpYWxTY2FsZSkgIT09IG51bGwgJiYgX2MgIT09IHZvaWQgMCA/IF9jIDogZGVmYXVsdEluaXRpYWxTY2FsZTtcbiAgICBjb25zdCBzaWRlID0gKHBsYWNlbWVudCAhPT0gbnVsbCAmJiBwbGFjZW1lbnQgIT09IHZvaWQgMCA/IHBsYWNlbWVudCA6ICdib3R0b20tc3RhcnQnKS5zcGxpdCgnLScpWzBdO1xuICAgIGNvbnN0IHRyYW5zZm9ybU9yaWdpbiA9IChfZCA9IFRSQU5TRk9STV9PUklHSU5fQllfU0lERVtzaWRlXSkgIT09IG51bGwgJiYgX2QgIT09IHZvaWQgMCA/IF9kIDogJ3RvcCBjZW50ZXInO1xuICAgIGNvbnN0IGNvbGxhcHNlZFRyYW5zZm9ybSA9IGtpbmQgPT09ICdoZWlnaHQnID8gYHNjYWxlWSgke2luaXRpYWxTY2FsZX0pYCA6IGBzY2FsZSgke2luaXRpYWxTY2FsZX0pYDtcbiAgICBjb25zdCBleHBhbmRlZFRyYW5zZm9ybSA9IGtpbmQgPT09ICdoZWlnaHQnID8gJ3NjYWxlWSgxKScgOiAnc2NhbGUoMSknO1xuICAgIHJldHVybiB1c2VUcmFuc2l0aW9uU3R5bGVzKGNvbnRleHQsIHtcbiAgICAgICAgZHVyYXRpb246IGRpc2FibGVkID8gMCA6IGR1cmF0aW9uLFxuICAgICAgICBpbml0aWFsOiB7IG9wYWNpdHk6IDAsIHRyYW5zZm9ybTogY29sbGFwc2VkVHJhbnNmb3JtIH0sXG4gICAgICAgIG9wZW46IHsgb3BhY2l0eTogMSwgdHJhbnNmb3JtOiBleHBhbmRlZFRyYW5zZm9ybSB9LFxuICAgICAgICBjbG9zZTogeyBvcGFjaXR5OiAwLCB0cmFuc2Zvcm06IGNvbGxhcHNlZFRyYW5zZm9ybSB9LFxuICAgICAgICBjb21tb246IHsgdHJhbnNmb3JtT3JpZ2luIH0sXG4gICAgfSk7XG59Il0sInNvdXJjZVJvb3QiOiIuLi8uLi8uLi8uLi8uLi8uLi8uLi8uLi9zcmMifQ==