@kwantis-id3/frontend-library 1.0.0-rc.5 → 1.0.0-rc.7

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

@@ -0,0 +1,23 @@
+/** @jsxImportSource @emotion/react */
+import { ReactNode } from "react";
+export type DrawerProps = {
+    /** Position of the drawer */
+    anchor: "top" | "right" | "bottom" | "left";
+    /** Trigger showed when drawer is closed */
+    closedTrigger?: ReactNode;
+    /** Trigger showed when drawer is open */
+    openTrigger?: ReactNode;
+    /** Component to be rendered when Drawer is open */
+    openContent?: ReactNode;
+    /** Component to be rendered when Drawer is closed */
+    closedContent?: ReactNode;
+    /** Min open of the drawer as number of pixels. If not defined the minOpen will be the height of closedContent if present, otherwise 0px */
+    minOpen?: number;
+    /** Max open of the drawer as number of pixels. If not defined the maxOpen will be the height of openContent with limit at 90vh/vw */
+    maxOpen?: number;
+    /** Background color */
+    bgColor?: string;
+    /** Trigger hover color */
+    triggerHoverColor?: string;
+};
+export declare const Drawer: ({ anchor, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerHoverColor, }: DrawerProps) => import("@emotion/react/jsx-runtime").JSX.Element;

package/dist/esm/types/components/Drawer/DrawerStyled.d.ts

@@ -0,0 +1,25 @@
+export declare const DrawerBody: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $anchor: "top" | "right" | "bottom" | "left";
+    $isOpen: boolean;
+    $minOpen?: string;
+    $maxOpen?: string;
+    $bgColor?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const DrawerContent: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $anchor: "top" | "right" | "bottom" | "left";
+    $isOpen: boolean;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Trigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $anchor: "top" | "right" | "bottom" | "left";
+    $bgColor?: string;
+    $triggerHoverColor?: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

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

@@ -0,0 +1 @@
+export { Drawer, DrawerProps } from "./Drawer";

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

@@ -2,8 +2,6 @@ import React from "react";
 interface TextFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
     /** Classname given to the container div */
     containerClassName?: string;
-    /** Disables the input */
-    isDisabled?: boolean;
     /** The color of the input */
     color?: string;
     /** Change the styles of the input field */

package/dist/esm/types/components/TreeView/ControlledTreeView.d.ts

@@ -0,0 +1,4 @@
+/** @jsxImportSource @emotion/react */
+import { FC } from "react";
+import { TControlledTreeViewProps } from "./TreeViewInterfaces";
+export declare const ControlledTreeView: FC<TControlledTreeViewProps>;

package/dist/esm/types/components/TreeView/TreeUtils.d.ts

@@ -0,0 +1,3 @@
+import { TTreeViewItem } from "./TreeViewInterfaces";
+export declare const getRootItems: (items: TTreeViewItem[]) => TTreeViewItem[];
+export declare const getChildrenItems: (items: TTreeViewItem[], parentId: string) => TTreeViewItem[];

package/dist/esm/types/components/TreeView/TreeViewInterfaces.d.ts

@@ -0,0 +1,78 @@
+import { Interpolation, Theme } from "@emotion/react";
+import React from "react";
+/**
+ * A callback to customize how items are rendered
+ * @property isOpen: A boolean indicating if the item is expanded
+ * @property hasChildren: A boolean indicating if the item has children
+ * @property item: the entire item object
+ */
+export type TCustomRenderProps = {
+    isOpen: boolean;
+    item: TTreeViewItem;
+};
+/**
+ * A callback to customize how the content of the items is rendered
+ * @extends TCustomRenderProps
+ * @property icon: The icon of the item. If the renderIcon callback is provided, this will be the result of that callback
+ * @property title: The title of the item. If the renderTitle callback is provided, this will be the result of that callback
+ */
+export type TRenderTriggerProps = TCustomRenderProps & {
+    icon: React.ReactNode;
+    title: React.ReactNode;
+};
+type TTreeItemFunctions = {
+    /** A callback to customize how the titles are rendered */
+    renderTitle?: (props: TCustomRenderProps) => React.ReactNode;
+    /** A callback to customize how the icons are rendered */
+    renderIcon?: (props: TCustomRenderProps) => React.ReactNode;
+    /** A callback to customize how the content of the items is rendered */
+    renderTrigger?: (props: TRenderTriggerProps) => React.ReactNode;
+    /** A callback executed when an item is focused. An item gets focused when you click on it. Focusing and item will also select it. */
+    onFocusItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is selected. To select an item, ctrl+click on it. */
+    onSelectItems?: (item: string[]) => void;
+    /** A callback executed when an item is expanded */
+    onExpandItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is collapsed */
+    onCollapseItem?: (item: TTreeViewItem) => void;
+    /** A callback to handle the expansion of items without children */
+    onMissingChildren?: (item: TTreeViewItem) => void;
+};
+type TTreeViewProps = TTreeItemFunctions & {
+    /** An array representing the items that the tree needs to render */
+    items: TTreeViewItem[];
+    /** Disable multi-selection possibility */
+    isMultiSelectionDisabled?: boolean;
+    /** Custom styles */
+    sx?: Interpolation<Theme>;
+};
+export type TUncontrolledTreeViewProps = TTreeViewProps & {
+    items: TTreeViewItem[];
+};
+export type TControlledTreeViewProps = TTreeViewProps & {
+    /** The current state of the Tree View. */
+    viewState: TViewState;
+};
+export type TViewState = {
+    /** The list of ids of items that are selected */
+    selectedItems?: string[];
+    /** The list of ids of items that are expanded */
+    expandedItems?: string[];
+    /** The focused item */
+    focusedItem?: string;
+};
+export type TTreeViewItem = TTreeItemFunctions & {
+    /** Item identifier */
+    id: string;
+    /** Item name */
+    name: string;
+    /** The possible children of this item */
+    children?: string[];
+    /** If the item should be rendered as a folder even with no children */
+    isFolder?: boolean;
+    /** A callback to fetch children asynchronously */
+    childrenAsync?: () => Promise<TTreeViewItem[]>;
+    /** Custom styles */
+    sx?: Interpolation<Theme>;
+};
+export {};

package/dist/esm/types/components/TreeView/TreeViewSyled.d.ts

@@ -0,0 +1,24 @@
+export declare const TreeView: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const TreeItemsWrapper: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
+export declare const TreeItemTrigger: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    $isFocused: boolean;
+    $isExpanded: boolean;
+    $isSelected: boolean;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export declare const TreeItemChildren: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & import("react").ClassAttributes<HTMLUListElement> & import("react").HTMLAttributes<HTMLUListElement> & {
+    theme?: import("@emotion/react").Theme;
+} & {
+    $isExpanded: boolean;
+}, {}, {}>;

package/dist/esm/types/components/TreeView/UncontrolledTreeView.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { TUncontrolledTreeViewProps } from "./TreeViewInterfaces";
+export declare const UncontrolledTreeView: FC<TUncontrolledTreeViewProps>;

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

@@ -0,0 +1,3 @@
+export * from "./TreeViewInterfaces";
+export * from "./ControlledTreeView";
+export * from "./UncontrolledTreeView";

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

@@ -11,3 +11,5 @@ export { Tag, TTagProps } from "./Tag";
 export { Card, CardHeader, CardContent, CardFooter, CardIndicators, CardMediaSection, TCardSectionProps, } from "./Card";
 export { Table, renderCell, TTableProps, TTableCell, TCellValues, TTableRow, } from "./Table";
 export { MultiViewList, TMultiViewListProps } from "./MultiViewList";
+export { ControlledTreeView, UncontrolledTreeView, TControlledTreeViewProps, TUncontrolledTreeViewProps, TViewState, TTreeViewItem, TCustomRenderProps, } from "./TreeView";
+export { Drawer, DrawerProps } from "./Drawer";

package/dist/esm/types/utils/colors.d.ts

@@ -6,15 +6,25 @@
 export declare const getContrastColor: (color: string) => string;
 /**
  *
- * @param color the color to darken
+ * @param color a color
  * @param strength the strength (0-100) to darken the color
  * @returns the color darkened by the strength
  */
 export declare const darkenColor: (color: string, strength?: number) => string;
 /**
  *
- * @param color the color to lighten
+ * @param color a color
  * @param strength the strength (0-100) to lighten the color
  * @returns the color lightened by the strength
  */
 export declare const lightenColor: (color: string, strength?: number) => string;
+/**
+ * @param color a color
+ * @returns the hover color, based on if the color is dark or light
+ */
+export declare const getHoverColor: (color: string) => string;
+/**
+ * @param color a color
+ * @returns the active color, based on if the color is dark or light
+ */
+export declare const getActiveColor: (color: string) => string;

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

@@ -2,6 +2,4 @@ import useIsMobile from "./isMobile";
 export { transientOptions } from "./transientOptions";
 export { styled } from "./styled";
 export { useIsMobile };
-export { getContrastColor } from "./colors";
-export { darkenColor } from "./colors";
-export { lightenColor } from "./colors";
+export { getContrastColor, darkenColor, lightenColor, getHoverColor, getActiveColor } from "./colors";

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { PropsWithChildren, FC } from 'react';
+import React__default, { PropsWithChildren, FC, ReactNode } from 'react';
 import { Interpolation, CreateStyled } from '@emotion/styled';
 import { Theme, Interpolation as Interpolation$1 } from '@emotion/react';
 import { ColumnDef } from '@tanstack/react-table';
@@ -169,8 +169,6 @@ declare const Accordion: React__default.FC<TAccordionProps>;
 interface TextFieldProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
     /** Classname given to the container div */
     containerClassName?: string;
-    /** Disables the input */
-    isDisabled?: boolean;
     /** The color of the input */
     color?: string;
     /** Change the styles of the input field */
@@ -447,6 +445,110 @@ type TMultiViewListProps<Cell extends TCellValues, Row extends TTableRow<Cell>>
 
 declare const MultiViewList: <Cell extends TCellValues, Row extends TTableRow<Cell>>(props: TMultiViewListProps<Cell, Row>) => _emotion_react_jsx_runtime.JSX.Element;
 
+/**
+ * A callback to customize how items are rendered
+ * @property isOpen: A boolean indicating if the item is expanded
+ * @property hasChildren: A boolean indicating if the item has children
+ * @property item: the entire item object
+ */
+type TCustomRenderProps = {
+    isOpen: boolean;
+    item: TTreeViewItem;
+};
+/**
+ * A callback to customize how the content of the items is rendered
+ * @extends TCustomRenderProps
+ * @property icon: The icon of the item. If the renderIcon callback is provided, this will be the result of that callback
+ * @property title: The title of the item. If the renderTitle callback is provided, this will be the result of that callback
+ */
+type TRenderTriggerProps = TCustomRenderProps & {
+    icon: React__default.ReactNode;
+    title: React__default.ReactNode;
+};
+type TTreeItemFunctions = {
+    /** A callback to customize how the titles are rendered */
+    renderTitle?: (props: TCustomRenderProps) => React__default.ReactNode;
+    /** A callback to customize how the icons are rendered */
+    renderIcon?: (props: TCustomRenderProps) => React__default.ReactNode;
+    /** A callback to customize how the content of the items is rendered */
+    renderTrigger?: (props: TRenderTriggerProps) => React__default.ReactNode;
+    /** A callback executed when an item is focused. An item gets focused when you click on it. Focusing and item will also select it. */
+    onFocusItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is selected. To select an item, ctrl+click on it. */
+    onSelectItems?: (item: string[]) => void;
+    /** A callback executed when an item is expanded */
+    onExpandItem?: (item: TTreeViewItem) => void;
+    /** A callback executed when an item is collapsed */
+    onCollapseItem?: (item: TTreeViewItem) => void;
+    /** A callback to handle the expansion of items without children */
+    onMissingChildren?: (item: TTreeViewItem) => void;
+};
+type TTreeViewProps = TTreeItemFunctions & {
+    /** An array representing the items that the tree needs to render */
+    items: TTreeViewItem[];
+    /** Disable multi-selection possibility */
+    isMultiSelectionDisabled?: boolean;
+    /** Custom styles */
+    sx?: Interpolation$1<Theme>;
+};
+type TUncontrolledTreeViewProps = TTreeViewProps & {
+    items: TTreeViewItem[];
+};
+type TControlledTreeViewProps = TTreeViewProps & {
+    /** The current state of the Tree View. */
+    viewState: TViewState;
+};
+type TViewState = {
+    /** The list of ids of items that are selected */
+    selectedItems?: string[];
+    /** The list of ids of items that are expanded */
+    expandedItems?: string[];
+    /** The focused item */
+    focusedItem?: string;
+};
+type TTreeViewItem = TTreeItemFunctions & {
+    /** Item identifier */
+    id: string;
+    /** Item name */
+    name: string;
+    /** The possible children of this item */
+    children?: string[];
+    /** If the item should be rendered as a folder even with no children */
+    isFolder?: boolean;
+    /** A callback to fetch children asynchronously */
+    childrenAsync?: () => Promise<TTreeViewItem[]>;
+    /** Custom styles */
+    sx?: Interpolation$1<Theme>;
+};
+
+/** @jsxImportSource @emotion/react */
+
+declare const ControlledTreeView: FC<TControlledTreeViewProps>;
+
+declare const UncontrolledTreeView: FC<TUncontrolledTreeViewProps>;
+
+type DrawerProps = {
+    /** Position of the drawer */
+    anchor: "top" | "right" | "bottom" | "left";
+    /** Trigger showed when drawer is closed */
+    closedTrigger?: ReactNode;
+    /** Trigger showed when drawer is open */
+    openTrigger?: ReactNode;
+    /** Component to be rendered when Drawer is open */
+    openContent?: ReactNode;
+    /** Component to be rendered when Drawer is closed */
+    closedContent?: ReactNode;
+    /** Min open of the drawer as number of pixels. If not defined the minOpen will be the height of closedContent if present, otherwise 0px */
+    minOpen?: number;
+    /** Max open of the drawer as number of pixels. If not defined the maxOpen will be the height of openContent with limit at 90vh/vw */
+    maxOpen?: number;
+    /** Background color */
+    bgColor?: string;
+    /** Trigger hover color */
+    triggerHoverColor?: string;
+};
+declare const Drawer: ({ anchor, openContent, closedContent, openTrigger, closedTrigger, minOpen, maxOpen, bgColor, triggerHoverColor, }: DrawerProps) => _emotion_react_jsx_runtime.JSX.Element;
+
 /**
  * Hook to check if the screen is mobile. The default breakpoint is 768px.
  * @param {number=} mobileBreakpoint breakpoint width to check against
@@ -473,17 +575,27 @@ declare const styled: CreateStyled;
 declare const getContrastColor: (color: string) => string;
 /**
  *
- * @param color the color to darken
+ * @param color a color
  * @param strength the strength (0-100) to darken the color
  * @returns the color darkened by the strength
  */
 declare const darkenColor: (color: string, strength?: number) => string;
 /**
  *
- * @param color the color to lighten
+ * @param color a color
  * @param strength the strength (0-100) to lighten the color
  * @returns the color lightened by the strength
  */
 declare const lightenColor: (color: string, strength?: number) => string;
+/**
+ * @param color a color
+ * @returns the hover color, based on if the color is dark or light
+ */
+declare const getHoverColor: (color: string) => string;
+/**
+ * @param color a color
+ * @returns the active color, based on if the color is dark or light
+ */
+declare const getActiveColor: (color: string) => string;
 
-export { Accordion, Button, ButtonProps, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, Dropdown, DropdownItem, DropdownProps, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewList, SingleSelect, SingleSelectProps, Slider, SliderProps, TAccordionProps, TCardSectionProps, TCellValues, TColorScale, TIndicatorProps, TIndicatorVariants, TMultiViewListProps, TTableCell, TTableProps, TTableRow, TTagProps, TThemeMode, Table, Tag, ThemeContextProvider, darkenColor, defaultDarkPalette, defaultLightPalette, getContrastColor, lightenColor, renderCell, styled, transientOptions, useIsMobile, useThemeContext };
+export { Accordion, Button, ButtonProps, Card, CardContent, CardFooter, CardHeader, CardIndicators, CardMediaSection, ControlledTreeView, Drawer, DrawerProps, Dropdown, DropdownItem, DropdownProps, IBackgroundColors, ICommonColors, IIndicatorColors, IPalette, IStandardPaletteColor, ITagColors, IThemeContextProps, IThemeContextValue, Indicator, InputField, Modal, MultiSelect, MultiSelectProps, MultiViewList, SingleSelect, SingleSelectProps, Slider, SliderProps, TAccordionProps, TCardSectionProps, TCellValues, TColorScale, TControlledTreeViewProps, TCustomRenderProps, TIndicatorProps, TIndicatorVariants, TMultiViewListProps, TTableCell, TTableProps, TTableRow, TTagProps, TThemeMode, TTreeViewItem, TUncontrolledTreeViewProps, TViewState, Table, Tag, ThemeContextProvider, UncontrolledTreeView, darkenColor, defaultDarkPalette, defaultLightPalette, getActiveColor, getContrastColor, getHoverColor, lightenColor, renderCell, styled, transientOptions, useIsMobile, useThemeContext };

package/package.json

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