@trackunit/react-components 0.1.336 → 0.1.338

package/index.cjs.js

@@ -19,7 +19,6 @@ var reactUse = require('react-use');
 var reactRouter = require('@tanstack/react-router');
 var react = require('@floating-ui/react');
 var omit = require('lodash/omit');
-var usePortal = require('react-useportal');
 var reactHelmetAsync = require('react-helmet-async');
 var tailwindMerge = require('tailwind-merge');
 var reactTabs = require('@radix-ui/react-tabs');
@@ -53,7 +52,6 @@ var IconSpriteOutline__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteOu
 var IconSpriteSolid__default = /*#__PURE__*/_interopDefaultLegacy(IconSpriteSolid);
 var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
-var usePortal__default = /*#__PURE__*/_interopDefaultLegacy(usePortal);
 
 const docs = {
     source: {
@@ -3789,103 +3787,6 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     return (jsxRuntime.jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxRuntime.jsxs(Popover, Object.assign({}, popoverProps, { children: [jsxRuntime.jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsxRuntime.jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsxRuntime.jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsxRuntime.jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
 };
 
-const cvaModalContainer = cssClassVarianceUtilities.cvaMerge(["h-full", "w-full", "flex", "items-center"]);
-const cvaModalCard = cssClassVarianceUtilities.cvaMerge([
-    "m-auto",
-    "shadow-2xl",
-    "w-[calc(100%-1rem)]",
-    "max-h-[min(100%-1rem,30%+600px)]",
-    "max-w-[min(100%-1rem,30%+600px)]",
-]);
-const cvaModalBackdrop = cssClassVarianceUtilities.cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "fixed",
-    "top-0",
-    "left-0",
-    "w-full",
-    "h-full",
-    "z-20",
-    "invisible",
-    "opacity-0",
-    "transition-all",
-], {
-    variants: {
-        show: {
-            true: "animate-modal-fade",
-            false: "",
-        },
-        noShadow: {
-            true: "",
-            false: "bg-black/50",
-        },
-    },
-});
-
-/**
- * The Backdrop for the modal.
- 
- * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
- * @returns {JSX.Element} ModalBackdrop component
- */
-const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
-    const ref = React__namespace.useRef(null);
-    return (jsxRuntime.jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow }), onMouseDown: e => {
-            // only react on click on backdrop - accessing first child to get around styled element element
-            if (ref.current !== null && e.target === ref.current.children[0]) {
-                onClick();
-            }
-        }, ref: ref, children: children }));
-};
-
-/**
- * - Modals are used to present critical information or request user input needed to complete a user's workflow.
- * - Modals interrupt a user's workflow by design.
- * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
- 
- */
-const Modal = React__namespace.forwardRef(({ isOpen, children, dataTestId, className, role = "", noBackdropShadow = false, onDismissClick = () => {
-    return;
-}, }, ref) => {
-    return (jsxRuntime.jsx(ModalBackdrop, { isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsxRuntime.jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsxRuntime.jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
-});
-Modal.displayName = "Modal";
-
-/**
- * The useModal component should be used to inform the user of important information.
- 
- * @param {UseModalProps} props - The props for the useModal hook
- * @returns {*} useModal return
- */
-const useModal = ({ closeOnOutsideClick } = {}) => {
-    const modalRef = React.useRef(null);
-    const { isOpen, togglePortal, openPortal, closePortal, Portal } = usePortal__default["default"]({
-        closeOnOutsideClick,
-        onPortalClick: ({ target }) => {
-            var _a;
-            if (!closeOnOutsideClick) {
-                return;
-            }
-            // eslint-disable-next-line local-rules/no-typescript-assertion
-            const clickingOutsideModal = !((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.contains(target));
-            if (clickingOutsideModal) {
-                closePortal();
-            }
-        },
-    });
-    const PortalWrapper = (props) => (jsxRuntime.jsx(Portal, { children: jsxRuntime.jsx(Modal, Object.assign({ isOpen: isOpen, ref: modalRef }, props)) }));
-    PortalWrapper.displayName = "Modal";
-    const WrappedModal = React.useCallback(PortalWrapper, [Portal, isOpen]);
-    return {
-        Modal: WrappedModal,
-        toggleModal: togglePortal,
-        openModal: openPortal,
-        closeModal: closePortal,
-        isOpen,
-    };
-};
-
 const cvaNotice = cssClassVarianceUtilities.cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cssClassVarianceUtilities.cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
@@ -4700,8 +4601,6 @@ exports.Indicator = Indicator;
 exports.KPICard = KPICard;
 exports.MenuItem = MenuItem;
 exports.MenuList = MenuList;
-exports.Modal = Modal;
-exports.ModalBackdrop = ModalBackdrop;
 exports.MoreMenu = MoreMenu;
 exports.Notice = Notice;
 exports.PackageNameStoryComponent = PackageNameStoryComponent;
@@ -4766,7 +4665,6 @@ exports.useIsFullscreen = useIsFullscreen;
 exports.useIsTextCutOff = useIsTextCutOff;
 exports.useLocalStorage = useLocalStorage;
 exports.useLocalStorageReducer = useLocalStorageReducer;
-exports.useModal = useModal;
 exports.useOptionallyElevatedState = useOptionallyElevatedState;
 exports.useOverflowItems = useOverflowItems;
 exports.usePopoverContext = usePopoverContext;

package/index.esm.js

@@ -16,7 +16,6 @@ import { usePrevious, useMeasure, useCopyToClipboard } from 'react-use';
 import { Link, useBlocker } from '@tanstack/react-router';
 import { useFloating, FloatingFocusManager, autoUpdate, offset, flip, shift, size, useClick, useDismiss, useHover as useHover$1, useRole, useInteractions, useMergeRefs, FloatingPortal, arrow, useTransitionStatus, FloatingArrow } from '@floating-ui/react';
 import omit from 'lodash/omit';
-import usePortal from 'react-useportal';
 import { HelmetProvider, Helmet } from 'react-helmet-async';
 import { twMerge } from 'tailwind-merge';
 import { Trigger, Content, List, Root } from '@radix-ui/react-tabs';
@@ -3757,103 +3756,6 @@ const MoreMenu = ({ className, dataTestId, popoverProps, iconProps = {
     return (jsx("div", { className: cvaMoreMenu({ className }), "data-testid": dataTestId, ref: actionMenuRef, children: jsxs(Popover, Object.assign({}, popoverProps, { children: [jsx(PopoverTrigger, { children: customButton !== null && customButton !== void 0 ? customButton : jsx(IconButton, Object.assign({}, iconButtonProps, { icon: jsx(Icon, Object.assign({ name: "EllipsisHorizontal" }, iconProps)) })) }), jsx(PopoverContent, { portalId: customPortalId, children: close => (typeof children === "function" ? children(close) : children) })] })) }));
 };
 
-const cvaModalContainer = cvaMerge(["h-full", "w-full", "flex", "items-center"]);
-const cvaModalCard = cvaMerge([
-    "m-auto",
-    "shadow-2xl",
-    "w-[calc(100%-1rem)]",
-    "max-h-[min(100%-1rem,30%+600px)]",
-    "max-w-[min(100%-1rem,30%+600px)]",
-]);
-const cvaModalBackdrop = cvaMerge([
-    "flex",
-    "justify-center",
-    "items-center",
-    "fixed",
-    "top-0",
-    "left-0",
-    "w-full",
-    "h-full",
-    "z-20",
-    "invisible",
-    "opacity-0",
-    "transition-all",
-], {
-    variants: {
-        show: {
-            true: "animate-modal-fade",
-            false: "",
-        },
-        noShadow: {
-            true: "",
-            false: "bg-black/50",
-        },
-    },
-});
-
-/**
- * The Backdrop for the modal.
- 
- * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
- * @returns {JSX.Element} ModalBackdrop component
- */
-const ModalBackdrop = ({ children, isVisible, onClick, noShadow }) => {
-    const ref = React.useRef(null);
-    return (jsx("div", { className: cvaModalBackdrop({ show: isVisible, noShadow }), onMouseDown: e => {
-            // only react on click on backdrop - accessing first child to get around styled element element
-            if (ref.current !== null && e.target === ref.current.children[0]) {
-                onClick();
-            }
-        }, ref: ref, children: children }));
-};
-
-/**
- * - Modals are used to present critical information or request user input needed to complete a user's workflow.
- * - Modals interrupt a user's workflow by design.
- * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
- 
- */
-const Modal = React.forwardRef(({ isOpen, children, dataTestId, className, role = "", noBackdropShadow = false, onDismissClick = () => {
-    return;
-}, }, ref) => {
-    return (jsx(ModalBackdrop, { isVisible: isOpen, noShadow: noBackdropShadow, onClick: onDismissClick, children: isOpen ? (jsx("div", { className: cvaModalContainer(), ref: ref, role: role, children: jsx(Card, { className: cvaModalCard({ className }), dataTestId: dataTestId, children: children }) })) : null }));
-});
-Modal.displayName = "Modal";
-
-/**
- * The useModal component should be used to inform the user of important information.
- 
- * @param {UseModalProps} props - The props for the useModal hook
- * @returns {*} useModal return
- */
-const useModal = ({ closeOnOutsideClick } = {}) => {
-    const modalRef = useRef(null);
-    const { isOpen, togglePortal, openPortal, closePortal, Portal } = usePortal({
-        closeOnOutsideClick,
-        onPortalClick: ({ target }) => {
-            var _a;
-            if (!closeOnOutsideClick) {
-                return;
-            }
-            // eslint-disable-next-line local-rules/no-typescript-assertion
-            const clickingOutsideModal = !((_a = modalRef.current) === null || _a === void 0 ? void 0 : _a.contains(target));
-            if (clickingOutsideModal) {
-                closePortal();
-            }
-        },
-    });
-    const PortalWrapper = (props) => (jsx(Portal, { children: jsx(Modal, Object.assign({ isOpen: isOpen, ref: modalRef }, props)) }));
-    PortalWrapper.displayName = "Modal";
-    const WrappedModal = useCallback(PortalWrapper, [Portal, isOpen]);
-    return {
-        Modal: WrappedModal,
-        toggleModal: togglePortal,
-        openModal: openPortal,
-        closeModal: closePortal,
-        isOpen,
-    };
-};
-
 const cvaNotice = cvaMerge(["flex", "items-center"]);
 const cvaNoticeLabel = cvaMerge(["pl-1", "pr-1", "font-medium", "text-sm"], {
     variants: {
@@ -4644,4 +4546,4 @@ const cvaClickable = cvaMerge([
     },
 });
 
-export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, Modal, ModalBackdrop, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useModal, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };
+export { Alert, Badge, Breadcrumb, BreadcrumbContainer, BreadcrumbItem, Button, Card, CardBody, CardFooter, CardHeader, Collapse, CompletionStatusIndicator, CopyableText, Drawer, EmptyState, EmptyValue, ExternalLink, Heading, Icon, IconButton, Indicator, KPICard, MenuItem, MenuList, MoreMenu, Notice, PackageNameStoryComponent, Page, PageContent, PageHeader, Pagination, Popover, PopoverContent, PopoverTitle, PopoverTrigger, Prompt, ROLE_CARD, SectionHeader, Sidebar, SkeletonLines, Spacer, Spinner, StarButton, Tab, TabContent, TabList, Tabs, Tag, Text, Timeline, TimelineElement, Tooltip, ValueBar, VirtualizedList, WidgetBody, cvaButton, cvaButtonPrefixSuffix, cvaButtonSpinner, cvaButtonSpinnerContainer, cvaClickable, cvaIconButton, cvaIndicator, cvaIndicatorIcon, cvaIndicatorIconBackground, cvaIndicatorLabel, cvaIndicatorPing, cvaMenuItem, cvaMenuItemLabel, cvaMenuItemPrefix, cvaMenuItemSuffix, docs, getDevicePixelRatio, getValueBarColorByValue, iconColorNames, iconPalette, setLocalStorage, useClickOutside, useContainerProps, useContinuousTimeout, useDebounce, useDevicePixelRatio, useGeometry, useHover, useIsFirstRender, useIsFullscreen, useIsTextCutOff, useLocalStorage, useLocalStorageReducer, useOptionallyElevatedState, useOverflowItems, usePopoverContext, usePrompt, useResize, useSelfUpdatingRef, useTimeout, useVisibilityChange };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.1.336",
+  "version": "0.1.338",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "engines": {
@@ -16,7 +16,6 @@
     "@radix-ui/react-tabs": "^1.0.4",
     "@trackunit/ui-icons": "*",
     "@trackunit/shared-utils": "*",
-    "react-useportal": "1.0.18",
     "react-helmet-async": "^1.3.0",
     "zod": "3.22.4",
     "lodash": "4.17.21",

package/src/components/index.d.ts

@@ -14,7 +14,6 @@ export * from "./Icon/Icon";
 export * from "./Indicator";
 export * from "./KPICard/KPICard";
 export * from "./Menu";
-export * from "./Modal";
 export * from "./Notice";
 export * from "./Page";
 export * from "./PageHeader";

package/src/components/Modal/Modal.d.ts

@@ -1,35 +0,0 @@
-import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
-export interface ModalProps extends CommonProps {
-    /**
-     * Whether modal is open or not.
-     */
-    isOpen?: boolean;
-    /**
-     * Whether modal should be closed when clicked outside of it.
-     */
-    onDismissClick?: () => void;
-    /**
-     * Child elements to be rendered inside the modal.
-     */
-    children: React.ReactNode;
-    /**
-     * Test id to be applied to the modal.
-     */
-    dataTestId?: string;
-    /**
-     * Aria role to be applied to element
-     */
-    role?: string;
-    /**
-     * Whether modal has backdrop shadow or not
-     */
-    noBackdropShadow?: boolean;
-}
-/**
- * - Modals are used to present critical information or request user input needed to complete a user's workflow.
- * - Modals interrupt a user's workflow by design.
- * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
- 
- */
-export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;

package/src/components/Modal/Modal.variants.d.ts

@@ -1,6 +0,0 @@
-export declare const cvaModalContainer: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaModalCard: (props?: import("class-variance-authority/dist/types").ClassProp | undefined) => string;
-export declare const cvaModalBackdrop: (props?: ({
-    show?: boolean | null | undefined;
-    noShadow?: boolean | null | undefined;
-} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/src/components/Modal/ModalBackdrop.d.ts

@@ -1,14 +0,0 @@
-import * as React from "react";
-export interface ModalBackdropProps {
-    onClick: () => void;
-    children: React.ReactNode;
-    isVisible?: boolean;
-    noShadow?: boolean;
-}
-/**
- * The Backdrop for the modal.
- 
- * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
- * @returns {JSX.Element} ModalBackdrop component
- */
-export declare const ModalBackdrop: ({ children, isVisible, onClick, noShadow }: ModalBackdropProps) => JSX.Element;

package/src/components/Modal/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./Modal";
-export * from "./ModalBackdrop";
-export * from "./useModal";

package/src/components/Modal/useModal.d.ts

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { ModalProps } from "./Modal";
-export interface UseModalProps {
-    closeOnOutsideClick?: boolean;
-}
-/**
- * The useModal component should be used to inform the user of important information.
- 
- * @param {UseModalProps} props - The props for the useModal hook
- * @returns {*} useModal return
- */
-export declare const useModal: ({ closeOnOutsideClick }?: UseModalProps) => {
-    Modal: {
-        (props: ModalProps): JSX.Element;
-        displayName: string;
-    };
-    toggleModal: any;
-    openModal: any;
-    closeModal: any;
-    isOpen: any;
-};