@kwantis-id3/frontend-library 1.0.0 → 1.2.0

package/dist/esm/types/components/AIBubble/AIBubble.d.ts

@@ -0,0 +1,3 @@
+/** @jsxImportSource @emotion/react */
+import { TAIBubbleProps } from "./AIBubbleInterfaces";
+export declare const AIBubble: ({ url, externalUrl, placement, align, color, bubbleSize, iconSize, collapsedSize, showCloseButton, showExpandButton, ...rest }: TAIBubbleProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/AIBubble/AIBubbleInterfaces.d.ts

@@ -0,0 +1,11 @@
+import { TPopoverProps } from "../Popover";
+export type TAIBubbleProps = Omit<TPopoverProps, "trigger" | "children" | "topBarLeft" | "expandable"> & {
+    /** URL to embed in the iframe */
+    url: string;
+    /** URL to external link */
+    externalUrl?: string;
+    /** Size of the trigger bubble */
+    bubbleSize?: number;
+    /** Size of the icon inside the trigger bubble */
+    iconSize?: number;
+};

package/dist/esm/types/components/AIBubble/AIBubbleStyled.d.ts

@@ -0,0 +1,7 @@
+export declare const BubbleTrigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $size: number;
+    $bgColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/AIBubble/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./AIBubble";
+export * from "./AIBubbleInterfaces";

package/dist/esm/types/components/Accordion/AccordionInterfaces.d.ts

@@ -18,4 +18,6 @@ export type TAccordionProps = PropsWithChildren & {
      * @default "default"
      */
     variant?: "default" | "light";
+    /** Reverses the layout so the content expands above the header */
+    reversed?: boolean;
 };

package/dist/esm/types/components/Accordion/AccordionStyled.d.ts

@@ -10,6 +10,7 @@ export declare const StyledAccordion: import("@emotion/styled").StyledComponent<
 } & {
     $variant: "default" | "light";
     $isOpen: boolean;
+    $reversed?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const StyledAccordionHeader: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
@@ -31,4 +32,5 @@ export declare const Icon: import("@emotion/styled").StyledComponent<{
     as?: React.ElementType;
 } & {
     $isOpen: boolean;
+    $reversed?: boolean;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/dist/esm/types/components/Button/ButtonInterfaces.d.ts

@@ -20,4 +20,6 @@ export type TButtonProps = {
     disabled?: boolean;
     /** Elements to render as children */
     children?: React.ReactNode;
+    /** HTML data-testid for testing */
+    "data-testid"?: string;
 };

package/dist/esm/types/components/Dropdown/DropdownInterfaces.d.ts

@@ -38,6 +38,8 @@ export type TDropdownProps = {
     borderWidth?: string;
     /** Controls wether the dropdown should extend towards the left or the right */
     direction?: "left" | "right";
+    /** Controls whether the dropdown menu opens above or below the trigger */
+    placement?: "top" | "bottom";
     /** Controls whether the dropdown body should have absolute or fixed position
      * By default, it is set to absolute, which means the dropdown will be positioned relative to its parent element.
      * Use fixed if you want the body to be above the entire page, regardless of the parent element.
@@ -48,5 +50,6 @@ export type TDropdownProps = {
 };
 export type TDropdownItemProps = TDropdownItem & {
     direction?: string;
+    placement?: "top" | "bottom";
     closeBody: () => void;
 };

package/dist/esm/types/components/Dropdown/DropdownStyled.d.ts

@@ -14,6 +14,7 @@ export declare const DropdownBody: import("@emotion/styled").StyledComponent<{
     $isOpen: boolean;
     $bgColor: string;
     $position: "absolute" | "fixed";
+    $placement: "top" | "bottom";
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DropdownItemInnerContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;
@@ -31,6 +32,7 @@ export declare const DropdownBodyMobile: import("@emotion/styled").StyledCompone
 } & {
     $isOpen: boolean;
     $bgColor: string;
+    $placement?: "top" | "bottom";
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DropdownItemMobileContainer: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme;

package/dist/esm/types/components/Popover/Popover.d.ts

@@ -0,0 +1,4 @@
+/** @jsxImportSource @emotion/react */
+import React from "react";
+import { TPopoverProps } from "./PopoverInterfaces";
+export declare const Popover: ({ trigger, children, placement, align, color, showArrow, isOpen: controlledIsOpen, onToggle, closeOnOutsideClick, width, height, position, showCloseButton, sx, onOpen, onClose, expandable, collapsedSize, expandedSize, showExpandButton, topBarLeft, isExpanded: controlledIsExpanded, onExpandedChange, }: TPopoverProps) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | import("@emotion/react/jsx-runtime").JSX.Element | null | undefined;

package/dist/esm/types/components/Popover/PopoverInterfaces.d.ts

@@ -0,0 +1,79 @@
+import { Theme } from "@emotion/react";
+import { Interpolation } from "@emotion/react";
+export type TPopoverProps = {
+    /** The trigger element that opens the popover on click */
+    trigger: React.ReactNode;
+    /** The content rendered inside the popover */
+    children: React.ReactNode | ((actions: TPopoverActions) => React.ReactNode);
+    /** Controls placement of the popover relative to the trigger */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Controls alignment of the popover panel relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Background color of the popover */
+    color?: string;
+    /** Whether to show the arrow pointing to the trigger */
+    showArrow?: boolean;
+    /** Controlled open state. */
+    isOpen?: boolean;
+    /** Called when the popover requests to open or close (controlled mode) */
+    onToggle?: (isOpen: boolean) => void;
+    /** Close the popover when clicking outside of it */
+    closeOnOutsideClick?: boolean;
+    /** Custom width of collapsed popover panel */
+    width?: string;
+    /** Custom height of collapsed popover panel */
+    height?: string;
+    /** Positions the trigger fixed on the screen */
+    position?: TPopoverPosition;
+    /** Whether ti show a close button */
+    showCloseButton?: boolean;
+    /** Custom styles applied to the popover panel  */
+    sx?: Interpolation<Theme>;
+    /** Called when the popover opens */
+    onOpen?: () => void;
+    /** Called when the popover closes */
+    onClose?: () => void;
+    /** Controlled expanded state. If provided, the expanded mode is controlled */
+    /** Enables the expand/collapse feature */
+    expandable?: boolean;
+    /** Size of the collapsed popover panel. Overrides width/height when it is expandable popover */
+    collapsedSize?: {
+        width?: string;
+        height?: string;
+    };
+    /** Size of the expanded popover panel. Defaults to 90vw x 90vh */
+    expandedSize?: {
+        width?: string;
+        height?: string;
+    };
+    /** Whether to show expand/collapse button in the top bar */
+    showExpandButton?: boolean;
+    /** Content to render on the left side of the top bar */
+    topBarLeft?: (isExpanded: boolean) => React.ReactNode;
+    /** Controlled expanded state */
+    isExpanded?: boolean;
+    /** Called when the expanded state changes */
+    onExpandedChange?: (isExpanded: boolean) => void;
+};
+export type TPopoverActions = {
+    /** Closes the popover */
+    close: () => void;
+    /** Expands the popover when expandable={true} */
+    expand: () => void;
+    /** Collapses the popover when expandable={true} */
+    collapse: () => void;
+    /** Whether the popover is currently expanded */
+    isExpanded: boolean;
+};
+export type TPopoverPosition = {
+    /** Distance from top of viewport */
+    top?: string;
+    /** Distance from bottom of viewport */
+    bottom?: string;
+    /** Distance from left of viewport */
+    left?: string;
+    /** Distance from right of viewport */
+    right?: string;
+    /** Z-index of the fixed wrapper */
+    zIndex?: number;
+};

package/dist/esm/types/components/Popover/PopoverStyled.d.ts

@@ -0,0 +1,56 @@
+export declare const getPositionStyles: (placement: "top" | "bottom" | "left" | "right", align: "start" | "center" | "end") => import("@emotion/react").SerializedStyles;
+export declare const PopoverWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PopoverTriggerContainer: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PopoverArrow: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $placement: "top" | "bottom" | "left" | "right";
+    $bgColor: string;
+    $isOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PopoverContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $isOpen: boolean;
+    $placement: "top" | "bottom" | "left" | "right";
+    $align: "start" | "center" | "end";
+    $bgColor: string;
+    $textColor: string;
+    $width?: string;
+    $height?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Backdrop: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $isVisible: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Panel: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $isOpen: boolean;
+    $isExpanded: boolean;
+    $collapsedWidth?: string;
+    $collapsedHeight?: string;
+    $expandedWidth?: string;
+    $expandedHeight?: string;
+    $bgColor: string;
+    $textColor: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TopBar: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const PanelContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/esm/types/components/Popover/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Popover";
+export * from "./PopoverInterfaces";

package/dist/esm/types/components/index.d.ts

@@ -16,3 +16,5 @@ export * from "./TreeView";
 export * from "./Drawer";
 export * from "./Checkbox";
 export * from "./Switch";
+export * from "./Popover";
+export * from "./AIBubble";

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as _emotion_react from '@emotion/react';
 import { Interpolation, Theme } from '@emotion/react';
 import * as react from 'react';
-import { PropsWithChildren, ReactElement, FC, ReactNode } from 'react';
+import react__default, { PropsWithChildren, ReactElement, FC, ReactNode } from 'react';
 import * as _emotion_styled from '@emotion/styled';
 import { CreateStyled } from '@emotion/styled';
 import { ColumnDef } from '@tanstack/react-table';
@@ -28,6 +28,8 @@ type TButtonProps = {
     disabled?: boolean;
     /** Elements to render as children */
     children?: React.ReactNode;
+    /** HTML data-testid for testing */
+    "data-testid"?: string;
 };
 
 declare const Button: (props: TButtonProps) => _emotion_react_jsx_runtime.JSX.Element;
@@ -175,6 +177,8 @@ type TAccordionProps = PropsWithChildren & {
      * @default "default"
      */
     variant?: "default" | "light";
+    /** Reverses the layout so the content expands above the header */
+    reversed?: boolean;
 };
 
 declare const Accordion: FC<TAccordionProps>;
@@ -356,6 +360,8 @@ type TDropdownProps = {
     borderWidth?: string;
     /** Controls wether the dropdown should extend towards the left or the right */
     direction?: "left" | "right";
+    /** Controls whether the dropdown menu opens above or below the trigger */
+    placement?: "top" | "bottom";
     /** Controls whether the dropdown body should have absolute or fixed position
      * By default, it is set to absolute, which means the dropdown will be positioned relative to its parent element.
      * Use fixed if you want the body to be above the entire page, regardless of the parent element.
@@ -366,6 +372,7 @@ type TDropdownProps = {
 };
 type TDropdownItemProps = TDropdownItem & {
     direction?: string;
+    placement?: "top" | "bottom";
     closeBody: () => void;
 };
 
@@ -672,6 +679,99 @@ type TSwitchProps = {
 
 declare const Switch: (props: TSwitchProps) => _emotion_react_jsx_runtime.JSX.Element;
 
+type TPopoverProps = {
+    /** The trigger element that opens the popover on click */
+    trigger: React.ReactNode;
+    /** The content rendered inside the popover */
+    children: React.ReactNode | ((actions: TPopoverActions) => React.ReactNode);
+    /** Controls placement of the popover relative to the trigger */
+    placement?: "top" | "bottom" | "left" | "right";
+    /** Controls alignment of the popover panel relative to the trigger */
+    align?: "start" | "center" | "end";
+    /** Background color of the popover */
+    color?: string;
+    /** Whether to show the arrow pointing to the trigger */
+    showArrow?: boolean;
+    /** Controlled open state. */
+    isOpen?: boolean;
+    /** Called when the popover requests to open or close (controlled mode) */
+    onToggle?: (isOpen: boolean) => void;
+    /** Close the popover when clicking outside of it */
+    closeOnOutsideClick?: boolean;
+    /** Custom width of collapsed popover panel */
+    width?: string;
+    /** Custom height of collapsed popover panel */
+    height?: string;
+    /** Positions the trigger fixed on the screen */
+    position?: TPopoverPosition;
+    /** Whether ti show a close button */
+    showCloseButton?: boolean;
+    /** Custom styles applied to the popover panel  */
+    sx?: Interpolation<Theme>;
+    /** Called when the popover opens */
+    onOpen?: () => void;
+    /** Called when the popover closes */
+    onClose?: () => void;
+    /** Controlled expanded state. If provided, the expanded mode is controlled */
+    /** Enables the expand/collapse feature */
+    expandable?: boolean;
+    /** Size of the collapsed popover panel. Overrides width/height when it is expandable popover */
+    collapsedSize?: {
+        width?: string;
+        height?: string;
+    };
+    /** Size of the expanded popover panel. Defaults to 90vw x 90vh */
+    expandedSize?: {
+        width?: string;
+        height?: string;
+    };
+    /** Whether to show expand/collapse button in the top bar */
+    showExpandButton?: boolean;
+    /** Content to render on the left side of the top bar */
+    topBarLeft?: (isExpanded: boolean) => React.ReactNode;
+    /** Controlled expanded state */
+    isExpanded?: boolean;
+    /** Called when the expanded state changes */
+    onExpandedChange?: (isExpanded: boolean) => void;
+};
+type TPopoverActions = {
+    /** Closes the popover */
+    close: () => void;
+    /** Expands the popover when expandable={true} */
+    expand: () => void;
+    /** Collapses the popover when expandable={true} */
+    collapse: () => void;
+    /** Whether the popover is currently expanded */
+    isExpanded: boolean;
+};
+type TPopoverPosition = {
+    /** Distance from top of viewport */
+    top?: string;
+    /** Distance from bottom of viewport */
+    bottom?: string;
+    /** Distance from left of viewport */
+    left?: string;
+    /** Distance from right of viewport */
+    right?: string;
+    /** Z-index of the fixed wrapper */
+    zIndex?: number;
+};
+
+declare const Popover: ({ trigger, children, placement, align, color, showArrow, isOpen: controlledIsOpen, onToggle, closeOnOutsideClick, width, height, position, showCloseButton, sx, onOpen, onClose, expandable, collapsedSize, expandedSize, showExpandButton, topBarLeft, isExpanded: controlledIsExpanded, onExpandedChange, }: TPopoverProps) => string | number | bigint | boolean | Iterable<react__default.ReactNode> | Promise<string | number | bigint | boolean | react__default.ReactPortal | react__default.ReactElement<unknown, string | react__default.JSXElementConstructor<any>> | Iterable<react__default.ReactNode> | null | undefined> | _emotion_react_jsx_runtime.JSX.Element | null | undefined;
+
+type TAIBubbleProps = Omit<TPopoverProps, "trigger" | "children" | "topBarLeft" | "expandable"> & {
+    /** URL to embed in the iframe */
+    url: string;
+    /** URL to external link */
+    externalUrl?: string;
+    /** Size of the trigger bubble */
+    bubbleSize?: number;
+    /** Size of the icon inside the trigger bubble */
+    iconSize?: number;
+};
+
+declare const AIBubble: ({ url, externalUrl, placement, align, color, bubbleSize, iconSize, collapsedSize, showCloseButton, showExpandButton, ...rest }: TAIBubbleProps) => _emotion_react_jsx_runtime.JSX.Element;
+
 /**
  * emotion.js doesn't support transient options out of the box.
  *
@@ -721,4 +821,4 @@ declare const getActiveColor: (color: string) => string;
 
 declare function usePrefersColorScheme(): "light" | "dark";
 
-export { Accordion, AccordionGroup, Button, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, Checkbox, ControlledTreeView, DataGrid, Drawer, Dropdown, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewGrid, MultiViewList, SingleSelect, SingleSelectProps, Slider, Switch, TAccordionProps, TButtonProps, TButtonVariants, TCardSectionProps, TCellValues, TCheckboxProps, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TDataGridProps, TDataGridRow, TDrawerProps, TDropdownItem, TDropdownItemProps, TDropdownProps, TIndicatorInstanceProps, TIndicatorProps, TIndicatorVariants, TModalProps, TMultiViewGridProps, TMultiViewListProps, TRenderTriggerProps, TSliderProps, TSwitchProps, TTableCell, TTableProps, TTableRow, TTagProps, TTextFieldProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, commonColors, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, transientOptions, useIsMobile, usePrefersColorScheme, useThemeContext };
+export { AIBubble, Accordion, AccordionGroup, Button, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, Checkbox, ControlledTreeView, DataGrid, Drawer, Dropdown, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewGrid, MultiViewList, Popover, SingleSelect, SingleSelectProps, Slider, Switch, TAIBubbleProps, TAccordionProps, TButtonProps, TButtonVariants, TCardSectionProps, TCellValues, TCheckboxProps, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TDataGridProps, TDataGridRow, TDrawerProps, TDropdownItem, TDropdownItemProps, TDropdownProps, TIndicatorInstanceProps, TIndicatorProps, TIndicatorVariants, TModalProps, TMultiViewGridProps, TMultiViewListProps, TPopoverActions, TPopoverPosition, TPopoverProps, TRenderTriggerProps, TSliderProps, TSwitchProps, TTableCell, TTableProps, TTableRow, TTagProps, TTextFieldProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, commonColors, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, transientOptions, useIsMobile, usePrefersColorScheme, useThemeContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kwantis-id3/frontend-library",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "Kwantis frontend components collection",
   "scriptsComments": {
     "storybook": "Starts storybook in development mode",