@trackunit/react-components 0.0.111 → 0.0.112

package/components/Popover/AnimatedPopover.d.ts

@@ -2,14 +2,42 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { PopoverLifecycle } from "./usePopover";
 export interface AnimatedPopoverProps extends CommonProps {
+    /**
+     * Controls the lifecycle of the popover.
+     */
     lifecycle: PopoverLifecycle;
+    /**
+     * Sets the popover to closing state.
+     */
     onRequestClose: () => void;
+    /**
+     * Sets the popover to closed state.
+     */
     onClosed: () => void;
+    /**
+     * Child nodes
+     */
     children: React.ReactNode;
+    /**
+     * The delay(in seconds) for triggering the popover state when entering it.
+     */
     enterDelay?: number;
+    /**
+     * The delay(in seconds) for triggering the popover state when exiting it.
+     */
     exitDelay?: number;
     /** An element to use as the portal root for the popover component */
     bindTo?: HTMLElement;
+    /**
+     * Whether the popover should have a backdrop or not.
+     */
     enableBackdrop?: boolean;
 }
+/**
+ * The Popover component is used to display some content on top of another.
+ * Use a popover to expose a small amount of information or functionality.
+ *
+ * @param {AnimatedPopoverProps} props - The props for the Card component
+ * @returns {JSX.Element} Popover component
+ */
 export declare const AnimatedPopover: React.ForwardRefExoticComponent<AnimatedPopoverProps & React.RefAttributes<HTMLDivElement>>;

package/components/Popover/PopoverList.d.ts

@@ -9,4 +9,4 @@ export interface PopoverListProps extends CommonProps {
  * @param {PopoverListProps} props - The props for the PopoverList component
  * @returns {JSX.Element} PopoverList component
  */
-export declare const PopoverList: ({ className, children, dataTestId, }: PopoverListProps) => JSX.Element;
+export declare const PopoverList: ({ className, children, dataTestId }: PopoverListProps) => JSX.Element;

package/components/Popover/PopoverListItem.d.ts

@@ -8,8 +8,17 @@ export interface PopoverListItemProps extends CommonProps {
     onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
     /** Navigation Url for this item */
     url?: string;
+    /**
+     * The prefix to be displayed for the list item.
+     */
     prefix?: React.ReactNode;
+    /**
+     * The suffix to be displayed for the list item.
+     */
     suffix?: React.ReactNode;
+    /**
+     * The child nodes.
+     */
     children: React.ReactNode;
     renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
 }

package/components/Popover/PopoverTitle.d.ts

@@ -2,7 +2,13 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 export interface PopoverTitleProps extends CommonProps {
     action?: React.ReactNode;
+    /**
+     * Whether there should be a divider between the title and the content.
+     */
     divider?: boolean;
+    /**
+     * The child nodes.
+     */
     children?: React.ReactNode;
 }
 /**

package/components/Popover/usePopover.d.ts

@@ -2,9 +2,21 @@ import { Placement } from "@popperjs/core";
 import * as React from "react";
 export declare type PopoverPlacement = Placement;
 export interface UsePopoverProps<T, Y> {
+    /**
+     * Reference to the target component.
+     */
     targetRef: React.RefObject<T>;
+    /**
+     * Reference to the popover component.
+     */
     popoverRef: React.RefObject<Y>;
+    /**
+     * Placement of the popover.
+     */
     placement?: PopoverPlacement;
+    /**
+     * The positional offset of the popover from the target component.
+     */
     offset?: [number, number];
 }
 export declare enum PopoverLifecycle {

package/index.js

@@ -1860,6 +1860,14 @@ const usePopover = ({
   };
 };
 
+/**
+ * The Popover component is used to display some content on top of another.
+ * Use a popover to expose a small amount of information or functionality.
+ *
+ * @param {AnimatedPopoverProps} props - The props for the Card component
+ * @returns {JSX.Element} Popover component
+ */
+
 const AnimatedPopover = React.forwardRef(({
   lifecycle,
   onRequestClose,
@@ -1913,9 +1921,7 @@ const AnimatedPopover = React.forwardRef(({
   });
 });
 const Backdrop$1 = tw.div`
-  fixed
-  inset-0
-  z-popover
+  tu-popover-backdrop
 `;
 
 const AnimatedContainer = ({
@@ -1953,7 +1959,7 @@ const AnimatedContainer = ({
 };
 
 const StyledContainer = tw.div`
-  z-[22]
+  tu-popover-container
 `;
 
 /**
@@ -1982,12 +1988,10 @@ const PopoverList = ({
   }));
 };
 const List = tw.ul`
-  list-none
-  p-0
-  m-0
+  tu-popover-list
 `;
 const StyledCardBody = tw(CardBody)`
-  max-h-full
+  tu-popover-list-body
 `;
 
 /**
@@ -2153,21 +2157,16 @@ const PopoverListItem = ({
   }));
 };
 const StyledText$2 = tw(Text)`
-  ${p => p.$selected ? tws`text-primary-600` : tws`text-neutral-600`}
-  group-hover:text-primary-500
+  tu-popover-list-item__text
+  ${p => p.$selected && tws`tu-popover-list-item__text--selected`}
 `;
 const ListItem = tw.li`
   group
-  ${p => !p.disabled ? "cursor-pointer" : "cursor-not-allowed"}
-  whitespace-nowrap
-  py-1
-  px-2
-  ${p => !p.disabled ? tws`hover:bg-neutral-50` : null}
+  tu-popover-list-item
+  ${p => p.disabled && tws`tu-popover-list-item--disabled`}
 `;
 const UnstyledAnchor = tw.a`
-  block
-  w-full
-  text-inherit
+  tu-popover-list-item__anchor
 `;
 
 /**
@@ -2201,21 +2200,11 @@ const PopoverTitle = ({
   }));
 };
 const Container$5 = tw.div`
-  flex
-  items-center
-  px-2
-  py-1
-
-  ${p => p.$divider ? `
-      border-b
-      border-solid
-      border-b-neutral-100
-      mb-1
-    ` : null}
+  tu-popover-title-container
+  ${p => p.$divider && `tu-popover-title-container--divider`}
 `;
 const StyledText$1 = tw(Text)`
-  flex-1
-  text-neutral-500
+tu-popover-title-text
 `;
 
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.111",
+  "version": "0.0.112",
   "repository": "https://github.com/Trackunit/manager",
   "license": "SEE LICENSE IN LICENSE.txt",
   "dependencies": {