@frontify/fondue
Version:
Design system of Frontify
155 lines (154 loc) • 6.56 kB
JavaScript
import { jsxs as l, jsx as t } from "react/jsx-runtime";
import { useButton as j } from "@react-aria/button";
import { useFocusRing as B, FocusScope as D } from "@react-aria/focus";
import { useMenuTrigger as z } from "@react-aria/menu";
import { useOverlay as M, DismissButton as b } from "@react-aria/overlays";
import { mergeProps as W } from "@react-aria/utils";
import { useMenuTriggerState as L } from "@react-stately/menu";
import { AnimatePresence as E, motion as Y } from "framer-motion";
import { useRef as x, useState as U, useEffect as V } from "react";
import { ActionMenu as _ } from "../../ActionMenu/ActionMenu/ActionMenu.es.js";
import $ from "../../../foundation/Icon/Generated/IconCaretDown.es.js";
import { IconSize as q } from "../../../foundation/Icon/IconSize.es.js";
import { useMemoizedId as g } from "../../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as G } from "../../../utilities/focusStyle.es.js";
import { merge as n } from "../../../utilities/merge.es.js";
import { AssetInputSize as a } from "../AssetInput.es.js";
import { AssetThumbnail as H } from "../AssetThumbnail.es.js";
import { AssetSubline as J } from "./AssetSubline.es.js";
import { SpinningCircle as K } from "./SpinningCircle.es.js";
const Q = ({
asset: e,
size: s,
actions: v,
isLoading: m,
hideSize: k = !1,
hideExtension: y = !1
}) => {
const S = g(), u = g(), r = x(null), o = L({}), { isOpen: i, focusStrategy: N } = o, { menuTriggerProps: A } = z({}, o, r), { buttonProps: F } = j(A, r), { isFocusVisible: w, focusProps: C } = B(), d = x(null), { overlayProps: T } = M(
{ onClose: () => o.close(), shouldCloseOnBlur: !0, isOpen: i, isDismissable: !0 },
d
), f = (e == null ? void 0 : e.name) || "Your Asset", [I, O] = U(0);
return V(() => {
let c = null;
const P = () => {
var h;
const R = ((h = r.current) == null ? void 0 : h.getBoundingClientRect().width) ?? 0;
c = window.setTimeout(() => O(R), 0);
}, p = new ResizeObserver(P);
return r.current && p.observe(r.current), () => {
c && clearTimeout(c), p.disconnect();
};
}, []), /* @__PURE__ */ l(
"div",
{
className: "tw-font-sans tw-w-full tw-text-s tw-bg-transparent tw-font-normal tw-min-w-0",
title: f,
"data-test-id": "asset-single-input",
children: [
/* @__PURE__ */ l(
"button",
{
...W(F, C),
ref: r,
"aria-labelledby": u,
className: n([
"tw-w-full tw-flex tw-border tw-rounded tw-overflow-hidden hover:tw-border-black-90 dark:hover:tw-border-black-40 focus-visible:tw-outline-none",
w && G,
s === a.Large ? "tw-h-[11.5rem] tw-flex-col" : "tw-h-14",
i || w ? "tw-border-black-90 dark:tw-border-black-10" : "tw-border-black-20 dark:tw-border-black-80"
]),
children: [
m && !e && /* @__PURE__ */ t(
"div",
{
className: n([
"tw-flex tw-justify-center tw-items-center",
s === a.Large ? "tw-w-full tw-h-32" : "tw-w-14 tw-h-full"
]),
children: /* @__PURE__ */ t(K, { size: s })
}
),
e && /* @__PURE__ */ t(H, { asset: e, size: s, isActive: i || w }),
/* @__PURE__ */ l(
"div",
{
className: n([
"tw-min-w-0 tw-max-w-full tw-flex tw-flex-auto tw-self-stretch tw-border-black-100 tw-border-opacity-25",
s === a.Large ? "tw-h-14 tw-border-t" : "tw-h-full tw-border-l"
]),
children: [
/* @__PURE__ */ l("div", { className: "tw-min-w-0 tw-pr-3 tw-pl-4 tw-flex tw-flex-auto tw-flex-col tw-items-start tw-justify-center tw-h-full", children: [
/* @__PURE__ */ t(
"span",
{
id: u,
className: n([
"tw-max-w-full tw-text-black-100 tw-text-s tw-truncate dark:tw-text-white",
(i || w) && "tw-font-medium"
]),
children: f
}
),
/* @__PURE__ */ t(
J,
{
asset: e,
isLoading: m,
hideSize: k,
hideExtension: y
}
)
] }),
/* @__PURE__ */ t("div", { className: "tw-p-4 tw-flex tw-flex-none tw-items-center tw-justify-center", children: /* @__PURE__ */ t(
"span",
{
className: n([
"tw-transition-transform",
i ? "tw-rotate-180 tw-text-black-90" : "tw-text-black-60"
]),
children: /* @__PURE__ */ t($, { size: q.Size16 })
}
) })
]
}
)
]
}
),
/* @__PURE__ */ t(E, { children: i && /* @__PURE__ */ t(
Y.div,
{
style: {
width: I
},
className: "tw-absolute tw-left-auto tw-w-full tw-overflow-hidden tw-box-border tw-p-0 tw-shadow-mid tw-list-none tw-m-0 tw-mt-2 tw-z-20",
"data-test-id": "asset-single-input-flyout",
initial: { height: 0 },
animate: { height: "auto" },
exit: { height: 0 },
transition: { ease: [0.04, 0.62, 0.23, 0.98], duration: 0.5 },
children: /* @__PURE__ */ t(D, { restoreFocus: !0, children: /* @__PURE__ */ l("div", { ...T, ref: d, children: [
/* @__PURE__ */ t(b, { onDismiss: () => o.close() }),
/* @__PURE__ */ t(
_,
{
menuBlocks: v,
focus: N ?? void 0,
onClick: () => o.close()
}
),
/* @__PURE__ */ t(b, { onDismiss: () => o.close() })
] }) })
},
`asset-input-menu-${S}`
) })
]
}
);
};
Q.displayName = "FondueSelectedAsset";
export {
Q as SelectedAsset
};
//# sourceMappingURL=SelectedAsset.es.js.map