@frontify/fondue
Version:
Design system of Frontify
156 lines (155 loc) • 6.82 kB
JavaScript
import { jsxs as l, jsx as t } from "react/jsx-runtime";
import { IconCaretDown as B } from "@frontify/fondue-icons";
import { useButton as D } from "@react-aria/button";
import { useFocusRing as I, FocusScope as M } from "@react-aria/focus";
import { useMenuTrigger as W } from "@react-aria/menu";
import { useOverlay as L, DismissButton as h } from "@react-aria/overlays";
import { mergeProps as z } from "@react-aria/utils";
import { useMenuTriggerState as E } from "@react-stately/menu";
import { useRef as x, useState as Y, useEffect as U } from "react";
import { ActionMenu as V } from "../../ActionMenu/ActionMenu.es.js";
import { useMemoizedId as g } from "../../../hooks/useMemoizedId.es.js";
import { FOCUS_STYLE as _ } 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 $ } from "../AssetThumbnail.es.js";
import { AssetSubline as q } from "./AssetSubline.es.js";
import { SpinningCircle as G } from "./SpinningCircle.es.js";
import { motion as H } from "../../../node_modules/.pnpm/framer-motion@12.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/render/components/motion/proxy.es.js";
import { AnimatePresence as J } from "../../../node_modules/.pnpm/framer-motion@12.38.0_react-dom@18.3.1_react@18.3.1__react@18.3.1/node_modules/framer-motion/dist/es/components/AnimatePresence/index.es.js";
const K = ({
asset: e,
size: i,
actions: v,
isLoading: m,
hideSize: k = !1,
hideExtension: y = !1
}) => {
const S = g(), u = g(), r = x(null), o = E({}), { isOpen: s, focusStrategy: N } = o, { menuTriggerProps: A } = W({}, o, r), { buttonProps: F } = D(A, r), { isFocusVisible: w, focusProps: C } = I(), d = x(null), { overlayProps: T } = L(
{ onClose: () => o.close(), shouldCloseOnBlur: !0, isOpen: s, isDismissable: !0 },
d
), f = (e == null ? void 0 : e.name) || "Your Asset", [O, P] = Y(0);
return U(() => {
let c = null;
const R = () => {
var b;
const j = ((b = r.current) == null ? void 0 : b.getBoundingClientRect().width) ?? 0;
c = setTimeout(() => P(j), 0);
}, p = new ResizeObserver(R);
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",
{
type: "button",
...z(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 && _,
i === a.Large ? "tw-h-[11.5rem] tw-flex-col" : "tw-h-14",
s || 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",
i === a.Large ? "tw-w-full tw-h-32" : "tw-w-14 tw-h-full"
]),
children: /* @__PURE__ */ t(G, { size: i })
}
),
e && /* @__PURE__ */ t($, { asset: e, size: i, isActive: s || 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",
i === 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",
(s || w) && "tw-font-medium"
]),
children: f
}
),
/* @__PURE__ */ t(
q,
{
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",
s ? "tw-rotate-180 tw-text-black-90" : "tw-text-black-60"
]),
children: /* @__PURE__ */ t(B, { size: 16 })
}
) })
]
}
)
]
}
),
/* @__PURE__ */ t(J, { children: s && /* @__PURE__ */ t(
H.div,
{
style: {
width: O
},
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(M, { restoreFocus: !0, children: /* @__PURE__ */ l("div", { ...T, ref: d, children: [
/* @__PURE__ */ t(h, { onDismiss: () => o.close() }),
/* @__PURE__ */ t(
V,
{
menuBlocks: v,
focus: N ?? void 0,
onClick: () => o.close()
}
),
/* @__PURE__ */ t(h, { onDismiss: () => o.close() })
] }) })
},
`asset-input-menu-${S}`
) })
]
}
);
};
K.displayName = "FondueSelectedAsset";
export {
K as SelectedAsset
};
//# sourceMappingURL=SelectedAsset.es.js.map