@ultraviolet/plus
Version:
Ultraviolet Plus
72 lines (71 loc) • 8.08 kB
JavaScript
"use client";
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("@emotion/react/jsx-runtime");
const _styled = require("@emotion/styled/base");
const icons = require("@ultraviolet/icons");
const ui = require("@ultraviolet/ui");
const react = require("react");
const NavigationProvider = require("./NavigationProvider.cjs");
const constants = require("./constants.cjs");
const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
const _styled__default = /* @__PURE__ */ _interopDefaultCompat(_styled);
const StickyFooter = /* @__PURE__ */ _styled__default.default("div", process.env.NODE_ENV === "production" ? {
target: "e1j950560"
} : {
target: "e1j950560",
label: "StickyFooter"
})("display:flex;width:100%;background:", ({
theme
}) => theme.colors.neutral.background, ";border-top:1px solid ", ({
theme
}) => theme.colors.neutral.borderWeak, ";padding:", ({
theme
}) => `${theme.space["1"]} ${theme.space["2"]}`, ";transition:justify-content ", constants.ANIMATION_DURATION, "ms ease-in-out;box-shadow:", ({
theme
}) => theme.shadows.defaultShadow, ';transition:box-shadow 230ms ease-in-out;justify-content:flex-end;&[data-has-overflow-style="false"]{box-shadow:none;border:none;}' + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9ob21lL3J1bm5lci93b3JrL3VsdHJhdmlvbGV0L3VsdHJhdmlvbGV0L3BhY2thZ2VzL3BsdXMvc3JjL2NvbXBvbmVudHMvTmF2aWdhdGlvbi9Gb290ZXIudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVcrQiIsImZpbGUiOiIvaG9tZS9ydW5uZXIvd29yay91bHRyYXZpb2xldC91bHRyYXZpb2xldC9wYWNrYWdlcy9wbHVzL3NyYy9jb21wb25lbnRzL05hdmlnYXRpb24vRm9vdGVyLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIid1c2UgY2xpZW50J1xuXG5pbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCdcbmltcG9ydCB7IEFycm93TGVmdERvdWJsZUljb24sIEFycm93UmlnaHREb3VibGVJY29uIH0gZnJvbSAnQHVsdHJhdmlvbGV0L2ljb25zJ1xuaW1wb3J0IHsgQnV0dG9uLCBUb29sdGlwIH0gZnJvbSAnQHVsdHJhdmlvbGV0L3VpJ1xuaW1wb3J0IHR5cGUgeyBSZWZPYmplY3QgfSBmcm9tICdyZWFjdCdcbmltcG9ydCB7IHVzZUNhbGxiYWNrLCB1c2VFZmZlY3QsIHVzZU1lbW8sIHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnXG5pbXBvcnQgeyB1c2VOYXZpZ2F0aW9uIH0gZnJvbSAnLi9OYXZpZ2F0aW9uUHJvdmlkZXInXG5pbXBvcnQgeyBBTklNQVRJT05fRFVSQVRJT04gfSBmcm9tICcuL2NvbnN0YW50cydcbmltcG9ydCB0eXBlIHsgTmF2aWdhdGlvblByb3BzIH0gZnJvbSAnLi90eXBlcydcblxuY29uc3QgU3RpY2t5Rm9vdGVyID0gc3R5bGVkLmRpdmBcbiAgZGlzcGxheTogZmxleDtcbiAgd2lkdGg6IDEwMCU7XG4gIGJhY2tncm91bmQ6ICR7KHsgdGhlbWUgfSkgPT4gdGhlbWUuY29sb3JzLm5ldXRyYWwuYmFja2dyb3VuZH07XG4gIGJvcmRlci10b3A6IDFweCBzb2xpZCAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLmNvbG9ycy5uZXV0cmFsLmJvcmRlcldlYWt9O1xuICBwYWRkaW5nOiAkeyh7IHRoZW1lIH0pID0+IGAke3RoZW1lLnNwYWNlWycxJ119ICR7dGhlbWUuc3BhY2VbJzInXX1gfTtcbiAgdHJhbnNpdGlvbjoganVzdGlmeS1jb250ZW50ICR7QU5JTUFUSU9OX0RVUkFUSU9OfW1zIGVhc2UtaW4tb3V0O1xuICBib3gtc2hhZG93OiAkeyh7IHRoZW1lIH0pID0+IHRoZW1lLnNoYWRvd3MuZGVmYXVsdFNoYWRvd307XG4gIHRyYW5zaXRpb246IGJveC1zaGFkb3cgMjMwbXMgZWFzZS1pbi1vdXQ7XG4gIGp1c3RpZnktY29udGVudDogZmxleC1lbmQ7XG5cbiAgJltkYXRhLWhhcy1vdmVyZmxvdy1zdHlsZT1cImZhbHNlXCJdIHtcbiAgICBib3gtc2hhZG93OiBub25lO1xuICAgIGJvcmRlcjogbm9uZTtcbiAgfVxuYFxuXG50eXBlIEZvb3RlclByb3BzID0ge1xuICBvblRvZ2dsZUV4cGFuZDogTmF2aWdhdGlvblByb3BzWydvblRvZ2dsZUV4cGFuZCddXG4gIGNvbnRlbnRSZWY6IFJlZk9iamVjdDxIVE1MRGl2RWxlbWVudCB8IG51bGw+XG59XG5cbmV4cG9ydCBjb25zdCBGb290ZXIgPSAoeyBvblRvZ2dsZUV4cGFuZCwgY29udGVudFJlZiB9OiBGb290ZXJQcm9wcykgPT4ge1xuICBjb25zdCB7IGV4cGFuZGVkLCB0b2dnbGVFeHBhbmQsIGxvY2FsZXMgfSA9IHVzZU5hdmlnYXRpb24oKVxuXG4gIGNvbnN0IGlzU2Nyb2xsQXRCb3R0b20gPSB1c2VDYWxsYmFjaygoKSA9PiB7XG4gICAgaWYgKGNvbnRlbnRSZWYuY3VycmVudCkge1xuICAgICAgaWYgKFxuICAgICAgICBjb250ZW50UmVmLmN1cnJlbnQuc2Nyb2xsVG9wICsgY29udGVudFJlZi5jdXJyZW50Lm9mZnNldEhlaWdodCA+PVxuICAgICAgICBjb250ZW50UmVmLmN1cnJlbnQuc2Nyb2xsSGVpZ2h0XG4gICAgICApIHtcbiAgICAgICAgcmV0dXJuIGZhbHNlXG4gICAgICB9XG5cbiAgICAgIHJldHVybiB0cnVlXG4gICAgfVxuXG4gICAgcmV0dXJuIHRydWVcbiAgfSwgW2NvbnRlbnRSZWZdKVxuXG4gIGNvbnN0IFtmb290ZXJIYXNPdmVyZmxvd1N0eWxlLCBzZXRGb290ZXJIYXNPdmVyZmxvd1N0eWxlXSA9IHVzZVN0YXRlKFxuICAgIGlzU2Nyb2xsQXRCb3R0b20oKSxcbiAgKVxuXG4gIC8vIFRoaXMgaXMgZm9yIGRldGVjdGluZyBpZiB0aGVyZSBpcyBzY3JvbGwgb24gdGhlIGNvbnRlbnQgYW5kIHNldCB0aGUgc2hhZG93IG9uIHRoZSBmb290ZXJcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBjdXJyZW50Q29udGVudFJlZiA9IGNvbnRlbnRSZWYuY3VycmVudFxuXG4gICAgY29uc3Qgc2Nyb2xsID0gKCkgPT4ge1xuICAgICAgY29uc3QgaGFzT3ZlcmZsb3cgPSBpc1Njcm9sbEF0Qm90dG9tKClcblxuICAgICAgaWYgKGZvb3Rlckhhc092ZXJmbG93U3R5bGUgIT09IGhhc092ZXJmbG93KSB7XG4gICAgICAgIHNldEZvb3Rlckhhc092ZXJmbG93U3R5bGUoaGFzT3ZlcmZsb3cpXG4gICAgICB9XG4gICAgfVxuXG4gICAgaWYgKGN1cnJlbnRDb250ZW50UmVmKSB7XG4gICAgICBjdXJyZW50Q29udGVudFJlZi5hZGRFdmVudExpc3RlbmVyKCdzY3JvbGwnLCBzY3JvbGwpXG4gICAgfVxuXG4gICAgcmV0dXJuICgpID0+IHtcbiAgICAgIGN1cnJlbnRDb250ZW50UmVmPy5yZW1vdmVFdmVudExpc3RlbmVyKCdzY3JvbGwnLCBzY3JvbGwpXG4gICAgfVxuICB9LCBbZm9vdGVySGFzT3ZlcmZsb3dTdHlsZSwgaXNTY3JvbGxBdEJvdHRvbSwgY29udGVudFJlZl0pXG5cbiAgLy8gVGhpcyB3aWxsIHNldCB0aGUgc2hhZG93IG9uIHRoZSBmb290ZXIgd2hlbiB0aGUgY29tcG9uZW50IGlzIG1vdW50ZWRcbiAgdXNlRWZmZWN0KCgpID0+IHtcbiAgICBzZXRGb290ZXJIYXNPdmVyZmxvd1N0eWxlKGlzU2Nyb2xsQXRCb3R0b20oKSlcbiAgfSwgW2lzU2Nyb2xsQXRCb3R0b21dKVxuXG4gIGNvbnN0IEljb24gPSB1c2VNZW1vKFxuICAgICgpID0+IChleHBhbmRlZCA/IEFycm93TGVmdERvdWJsZUljb24gOiBBcnJvd1JpZ2h0RG91YmxlSWNvbiksXG4gICAgW2V4cGFuZGVkXSxcbiAgKVxuXG4gIGNvbnN0IGxhYmVsID0gdXNlTWVtbyhcbiAgICAoKSA9PlxuICAgICAgZXhwYW5kZWRcbiAgICAgICAgPyBsb2NhbGVzWyduYXZpZ2F0aW9uLmNvbGxhcHNlLmJ1dHRvbiddXG4gICAgICAgIDogbG9jYWxlc1snbmF2aWdhdGlvbi5leHBhbmQuYnV0dG9uJ10sXG4gICAgW2V4cGFuZGVkLCBsb2NhbGVzXSxcbiAgKVxuXG4gIHJldHVybiAoXG4gICAgPFN0aWNreUZvb3RlciBkYXRhLWhhcy1vdmVyZmxvdy1zdHlsZT17Zm9vdGVySGFzT3ZlcmZsb3dTdHlsZX0+XG4gICAgICA8VG9vbHRpcCB0ZXh0PXtsYWJlbH0gcGxhY2VtZW50PVwicmlnaHRcIj5cbiAgICAgICAgPEJ1dHRvblxuICAgICAgICAgIHZhcmlhbnQ9XCJnaG9zdFwiXG4gICAgICAgICAgc2VudGltZW50PVwibmV1dHJhbFwiXG4gICAgICAgICAgc2l6ZT1cInNtYWxsXCJcbiAgICAgICAgICBhcmlhLWxhYmVsPXtsYWJlbH1cbiAgICAgICAgICBvbkNsaWNrPXsoKSA9PiB7XG4gICAgICAgICAgICB0b2dnbGVFeHBhbmQoKVxuICAgICAgICAgICAgb25Ub2dnbGVFeHBhbmQ/LighZXhwYW5kZWQpXG4gICAgICAgICAgfX1cbiAgICAgICAgPlxuICAgICAgICAgIDxJY29uIC8+XG4gICAgICAgIDwvQnV0dG9uPlxuICAgICAgPC9Ub29sdGlwPlxuICAgIDwvU3RpY2t5Rm9vdGVyPlxuICApXG59XG4iXX0= */"));
const Footer = ({
onToggleExpand,
contentRef
}) => {
const {
expanded,
toggleExpand,
locales
} = NavigationProvider.useNavigation();
const isScrollAtBottom = react.useCallback(() => {
if (contentRef.current) {
if (contentRef.current.scrollTop + contentRef.current.offsetHeight >= contentRef.current.scrollHeight) {
return false;
}
return true;
}
return true;
}, [contentRef]);
const [footerHasOverflowStyle, setFooterHasOverflowStyle] = react.useState(isScrollAtBottom());
react.useEffect(() => {
const currentContentRef = contentRef.current;
const scroll = () => {
const hasOverflow = isScrollAtBottom();
if (footerHasOverflowStyle !== hasOverflow) {
setFooterHasOverflowStyle(hasOverflow);
}
};
if (currentContentRef) {
currentContentRef.addEventListener("scroll", scroll);
}
return () => {
currentContentRef?.removeEventListener("scroll", scroll);
};
}, [footerHasOverflowStyle, isScrollAtBottom, contentRef]);
react.useEffect(() => {
setFooterHasOverflowStyle(isScrollAtBottom());
}, [isScrollAtBottom]);
const Icon = react.useMemo(() => expanded ? icons.ArrowLeftDoubleIcon : icons.ArrowRightDoubleIcon, [expanded]);
const label = react.useMemo(() => expanded ? locales["navigation.collapse.button"] : locales["navigation.expand.button"], [expanded, locales]);
return /* @__PURE__ */ jsxRuntime.jsx(StickyFooter, { "data-has-overflow-style": footerHasOverflowStyle, children: /* @__PURE__ */ jsxRuntime.jsx(ui.Tooltip, { text: label, placement: "right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Button, { variant: "ghost", sentiment: "neutral", size: "small", "aria-label": label, onClick: () => {
toggleExpand();
onToggleExpand?.(!expanded);
}, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, {}) }) }) });
};
exports.Footer = Footer;