@orfium/ictinus 5.7.1 → 5.8.0

package/dist/src/components/TableV4/TableV4.d.ts

@@ -0,0 +1,70 @@
+import { default as React } from 'react';
+import { ExtendedColumn, Sort, SortingOrder } from './types';
+
+export type ContentComponent<T> = (data: Cell<T>) => React.ReactNode;
+export type Cell<T> = {
+    /** the content of the cell to be displayed. You can pass also custom component. `ContentComponent: (data: Cell<T>) => React.ReactNode`. The type defines that will be a function that returns cell to use cell data.  */
+    content: number | string | ContentComponent<T>;
+    /** the truncated tooltip content, you can override it or it will take the content @default content */
+    tooltipContent?: string;
+    /** show or not the truncated tooltip @default true if the text is truncated */
+    hasTruncatedTooltip?: boolean;
+    /** the colSpan of the cell to be displayed */
+    colSpan?: number;
+    /** the type of the cell to be displayed @default normal */
+    type?: 'financial' | 'normal';
+    /** the alignment of the cell to be displayed */
+    align?: 'left' | 'right';
+    /** the width of the cell to be displayed */
+    widthPercentage?: number;
+};
+export type Row<T> = {
+    /** the id of the row */
+    id: string | number;
+    /** the cells of the row, see Cell type for each */
+    cells: Cell<T>[];
+    /** the expanded content of the row, if its expandable */
+    expanded?: ({ row, isSelected, isExpanded, }: {
+        row: Row<T>;
+        isSelected: boolean;
+        isExpanded: boolean;
+    }) => React.ReactNode;
+    rowSpan?: number;
+};
+export type Selection = string | number;
+export type TableType = 'normal' | 'nested-header';
+export type TablePropsV4<T> = {
+    /** The data for the table that needs to display. */
+    data: Row<T>[];
+    /** An array of titles or objects to define columns. */
+    columns: (string | ExtendedColumn)[];
+    /** Boolean defining if the header is fixed or not. */
+    hasFixedHeader?: boolean;
+    /** Boolean defining if the CTA's container is fixed or not. */
+    hasFixedCTA?: boolean;
+    /** Type of the table which determine the headers display. */
+    type?: TableType;
+    /** Boolean defining the padding all over the table cells and rows. */
+    isPadded?: boolean;
+    /** Function that once provided on each check will return the selection. */
+    onCheck?: (data: Selection[]) => void;
+    /** Function that once provided will provide the currently selected sorting configuration */
+    onSort?: (column: string, order: SortingOrder) => void;
+    /** Initial sorting column and order. Should be provided along with onSort */
+    initialSort?: Sort;
+    /** If provided sort will only work with this option (asc or desc only). By default supports bidirectional sort*/
+    sortDir?: SortingOrder;
+    /** Top left text on the table - showing a counter, text etc. */
+    topLeftText?: string | React.ReactElement;
+    /** Top right area to define a custom component for buttons or other usage. */
+    topRightArea?: (data: Row<T>[], selectionData?: Selection[]) => React.ReactNode;
+    /** Action cell width for Table with Expandable Rows (in %)*/
+    actionWidth?: number;
+    /** If true, table's expandable rows will be expanded on initial render. */
+    isInitiallyExpanded?: boolean;
+    /** Data test id prefix for all th/td elements */
+    dataTestIdPrefix?: string;
+};
+declare function TableV4<T>({ data, columns, type, hasFixedHeader, hasFixedCTA, onCheck, isPadded, onSort, initialSort, sortDir, topLeftText, topRightArea, actionWidth, isInitiallyExpanded, dataTestIdPrefix, }: TablePropsV4<T>): import("@emotion/react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof TableV4>;
+export default _default;

package/dist/src/components/{Table/Table.stories.d.ts → TableV4/TableV4.stories.d.ts}

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
-    component: import('react').MemoExoticComponent<(<T>({ data, columns, type, hasFixedHeader, hasFixedCTA, onCheck, isPadded, onSort, initialSort, sortDir, topLeftText, topRightArea, actionWidth, isInitiallyExpanded, dataTestIdPrefix, }: import('./Table').TableProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element)>;
+    component: import('react').MemoExoticComponent<(<T>({ data, columns, type, hasFixedHeader, hasFixedCTA, onCheck, isPadded, onSort, initialSort, sortDir, topLeftText, topRightArea, actionWidth, isInitiallyExpanded, dataTestIdPrefix, }: import('./TableV4').TablePropsV4<T>) => import("@emotion/react/jsx-runtime").JSX.Element)>;
     parameters: {
         design: {
             type: string;

package/dist/src/components/TableV4/TableV4.style.d.ts

@@ -0,0 +1,6 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from '../../theme';
+
+export declare const tableStyle: () => () => SerializedStyles;
+export declare const tableCTAStyle: (isFixed: boolean) => (theme: Theme) => SerializedStyles;
+export declare const tableRowHeadersStyle: (hasExpandableRows: boolean, hasOnCheck: boolean, hasFixedHeader: boolean) => (theme: Theme) => SerializedStyles;

package/dist/src/components/{Table → TableV4}/components/RenderRowOrNestedRow/RenderRowOrNestedRow.d.ts

@@ -1,6 +1,6 @@
-import { Row } from '../../Table';
+import { Row } from '../../TableV4';
 
-declare const _default: {
+declare const RenderRowOrNestedRow: {
     <T extends {
         [key: string]: unknown;
     }>({ row, dataTestIdPrefix, rowIndex, isInitiallyExpanded, }: {
@@ -11,4 +11,5 @@ declare const _default: {
     }): import("@emotion/react/jsx-runtime").JSX.Element;
     displayName: string;
 };
+declare const _default: typeof RenderRowOrNestedRow;
 export default _default;

package/dist/src/components/{Table → TableV4}/components/RenderRowOrNestedRow/components/ContentCell/ContentCell.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { ContentComponent, TableType } from '../../../../Table';
+import { ContentComponent, TableType } from '../../../../TableV4';
 
 type ContentCellProps = {
     columns: string[];

package/dist/src/components/{Table → TableV4}/components/TableCell/utils.d.ts

@@ -1,3 +1,3 @@
 import { ReactNode } from 'react';
 
-export declare const getTestId: (children: ReactNode, component: 'td' | 'th', dataTestIdPrefix?: string, rowIndex?: number, index?: string | number) => string;
+export declare const getTestId: (children: ReactNode, component: "td" | "th", dataTestIdPrefix?: string, rowIndex?: number, index?: string | number) => string;

package/dist/src/components/{Table → TableV4}/components/TableRowWrapper/TableRowWrapper.d.ts

@@ -1,4 +1,4 @@
-import { Row, Selection, TableType } from '../../Table';
+import { Row, Selection, TableType } from '../../TableV4';
 
 export type TableRowWrapperProps<T> = {
     row: Row<T>;
@@ -17,5 +17,6 @@ export type TableRowWrapperProps<T> = {
     dataTestIdPrefix?: string;
     rowIndex?: number;
 };
-declare const _default: <T extends Record<string, unknown>>(props: TableRowWrapperProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const TableRowWrapper: <T extends Record<string, unknown>>(props: TableRowWrapperProps<T>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const _default: typeof TableRowWrapper;
 export default _default;

package/dist/src/components/TableV4/index.d.ts

@@ -0,0 +1,3 @@
+export { default } from './TableV4';
+export * from './TableV4';
+export * from './types';

package/dist/src/components/TableV4/types.d.ts

@@ -0,0 +1,18 @@
+import { TooltipPlacement } from '../Tooltip/Tooltip.types';
+
+export type SortingOrder = 'asc' | 'desc';
+export type ExtendedColumn = {
+    content: {
+        label: string;
+        sortingKey: string;
+    };
+    tooltip?: {
+        content: string;
+        placement?: TooltipPlacement;
+    };
+    isSortable?: boolean;
+};
+export type Sort = {
+    column: string;
+    order: SortingOrder;
+};

package/dist/src/components/TableV4/utils/TableStoryComponents.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { Cell, Row } from '../TableV4';
+import { ExtendedColumn } from '../types';
+
+/** This is just a dummy component to be used in Storybook for showing the Row type on props */
+export declare const RowStory: React.FC<Row<unknown>>;
+/** This is just a dummy component to be used in Storybook for showing the Cell type on props */
+export declare const CellStory: React.FC<Cell<unknown>>;
+/** This is just a dummy component to be used in Storybook for showing the ExtendedColumn type on props */
+export declare const ExtendedColumnStory: React.FC<ExtendedColumn>;

package/dist/src/components/Tag/Tag.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import('react').ForwardRefExoticComponent<Omit<Partial<Omit<import('react').HTMLProps<HTMLDivElement>, "color" | "css" | "size">> & {

package/dist/src/components/Tag/Tag.style.d.ts

@@ -2,7 +2,7 @@ import { SerializedStyles } from '@emotion/react';
 import { TagProps } from './Tag.types';
 import { Theme } from '../../theme';
 
-export declare const tagContainerStyles: ({ size, color, isSelectable, isClearable, isSelected, }: Pick<TagProps, 'size' | 'color' | 'isSelected'> & {
+export declare const tagContainerStyles: ({ size, color, isSelectable, isClearable, isSelected, }: Pick<TagProps, "size" | "color" | "isSelected"> & {
     isSelectable?: boolean;
     isClearable?: boolean;
 }) => (theme: Theme) => SerializedStyles;

package/dist/src/components/Tag/hooks/useGetTagUtils.d.ts

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 import { TestProps } from '../../../utils/types';
 import { TagProps } from '../Tag.types';
 
-declare const useGetTagUtils: ({ color, iconName, onSelect, onClear, isSelected, dataTestPrefixId, }: Pick<TagProps, 'iconName' | 'color' | 'onSelect' | 'onClear' | 'isSelected'> & TestProps) => {
+declare const useGetTagUtils: ({ color, iconName, onSelect, onClear, isSelected, dataTestPrefixId, }: Pick<TagProps, "iconName" | "color" | "onSelect" | "onClear" | "isSelected"> & TestProps) => {
     isSelectable: boolean;
     isClearable: boolean;
     isInteractive: boolean;

package/dist/src/components/TextArea/TextArea.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<Omit<import('./TextArea').TextAreaProps, "ref"> & import('react').RefAttributes<HTMLTextAreaElement>>>;

package/dist/src/components/TextArea/TextArea.style.d.ts

@@ -8,4 +8,4 @@ export declare const sxProp: ({ isResizeEnabled }: Partial<TextAreaProps>) => (t
     textField: CSSObject;
     input: CSSObject;
 };
-export declare const hintMessageStyle: ({ isDisabled }: Pick<TextAreaProps, 'isDisabled'>) => (theme: Theme) => SerializedStyles;
+export declare const hintMessageStyle: ({ isDisabled }: Pick<TextAreaProps, "isDisabled">) => (theme: Theme) => SerializedStyles;

package/dist/src/components/TextField/TextField.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('./TextField').TextFieldProps & import('react').RefAttributes<HTMLInputElement>>>;

package/dist/src/components/TextField/TextField.style.d.ts

@@ -1,8 +1,11 @@
 import { SerializedStyles } from '@emotion/react';
 import { Theme } from 'theme';
+import { TextFieldProps } from '.';
 
 export declare const iconWrapperStyle: ({ iconPosition, isClickable }: {
-    iconPosition?: 'left' | 'right';
+    iconPosition?: "left" | "right";
     isClickable?: boolean;
 }) => (theme: Theme) => SerializedStyles;
-export declare const suffixContainerStyle: (isClickable?: boolean) => () => SerializedStyles;
+export declare const suffixContainerStyle: ({ size, isClickable }: Pick<TextFieldProps, "size"> & {
+    isClickable?: boolean;
+}) => () => SerializedStyles;

package/dist/src/components/TextInputBase/TextInputBase.d.ts

@@ -1,7 +1,6 @@
 import { CSSObject } from '@emotion/serialize';
 import { default as React } from 'react';
-import { ComponentSizes } from 'types';
-import { TestProps } from '../../utils/types';
+import { ComponentSizes, TestProps } from '../../utils/types';
 import { AcceptedIconNames } from '../Icon';
 
 export type TextInputBaseProps = {

package/dist/src/components/ThemeProvider/ThemeProvider.d.ts

@@ -1,4 +1,4 @@
-import { ThemeConfig } from 'theme';
+import { ThemeConfig } from '../../theme/types';
 import { DeepPartial } from '../../utils/types';
 import * as React from 'react';
 export type ThemeProviderProps = {

package/dist/src/components/Tooltip/Tooltip.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('./Tooltip.types').TooltipProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/src/components/Tooltip/Tooltip.style.d.ts

@@ -2,4 +2,4 @@ import { SerializedStyles } from '@emotion/react';
 import { TooltipProps } from './Tooltip.types';
 import { Theme } from '../../theme';
 
-export declare const tooltipStyle: ({ isInverted, isInteractive, }: Pick<TooltipProps, 'isInverted' | 'isInteractive'>) => (theme: Theme) => SerializedStyles;
+export declare const tooltipStyle: ({ isInverted, isInteractive, }: Pick<TooltipProps, "isInverted" | "isInteractive">) => (theme: Theme) => SerializedStyles;

package/dist/src/components/Tooltip/Tooltip.types.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export type TooltipPlacement = 'top' | 'right' | 'bottom' | 'left';
 export type InteractiveTooltip = {
     isInteractive: true;
@@ -25,5 +24,7 @@ export type TooltipProps = TooltipContent & {
     /** Hide delay for tooltip */
     /** @default 500 */
     delayOut?: number;
+    /** The tooltip can be controlled or uncontrolled, this attribute can be used to handle show and hide tooltip outside tooltip  */
+    isOpen?: boolean;
     children: React.ReactElement;
 };

package/dist/src/components/TopAppBar/TopAppBar.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import('react').FC<import('./TopAppBar.types').TopAppBarProps>;

package/dist/src/components/TruncatedContent/TruncatedContent.style.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const TruncationDiv: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
-    as?: import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>;
+    as?: React.ElementType;
 }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/src/components/Typography/Typography.stories.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare const _default: {
     title: string;
     component: import('react').ForwardRefExoticComponent<import('./Typography').TypographyProps & import('react').RefAttributes<HTMLHeadingElement>>;

package/dist/src/components/storyUtils/TooltipShowcase/TooltipShowcase.d.ts

@@ -1,6 +1,6 @@
 import { TooltipProps } from '../../Tooltip/Tooltip.types';
 
-declare const TooltipShowcase: ({ buttonText, isInverted, delayIn, delayOut, placement, }: Pick<TooltipProps, 'isInverted' | 'delayIn' | 'delayOut' | 'placement'> & {
+declare const TooltipShowcase: ({ buttonText, isInverted, delayIn, delayOut, placement, }: Pick<TooltipProps, "isInverted" | "delayIn" | "delayOut" | "placement"> & {
     buttonText?: string;
 }) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default TooltipShowcase;

package/dist/src/components/utils/PositionInScreen/PositionInScreen.d.ts

@@ -15,6 +15,7 @@ export type PositionInScreenProps = {
     offsetY?: number;
     /** The parent element */
     parent: JSX.Element;
+    placement?: 'top' | 'bottom';
     /** Sx prop to override specific properties */
     sx?: {
         container?: CSSObject;

package/dist/src/components/utils/PositionInScreen/hooks.d.ts

@@ -1,4 +1,4 @@
-export declare const usePositionInScreen: (parentRef: React.MutableRefObject<any>, itemRef: React.MutableRefObject<any>, offsetX: number, offsetY: number, isVisible?: boolean) => {
+export declare const usePositionInScreen: (parentRef: React.MutableRefObject<any>, itemRef: React.MutableRefObject<any>, offsetX: number, offsetY: number, isVisible?: boolean, placement?: "top" | "bottom") => {
     x: number;
     y: number;
 };

package/dist/src/index.d.ts

@@ -87,6 +87,8 @@ export { Switch } from './components/Controls';
 export * from './components/Controls/Switch';
 export { default as Table } from './components/Table';
 export * from './components/Table';
+export { default as TableV4 } from './components/TableV4';
+export * from './components/TableV4';
 export { default as Tag } from './components/Tag';
 export * from './components/Tag';
 export { default as TextField } from './components/TextField';
@@ -95,6 +97,8 @@ export { default as Search } from './components/Search';
 export * from './components/Search';
 export { default as TextArea } from './components/TextArea';
 export * from './components/TextArea';
+export { default as NumberField } from './components/NumberField';
+export * from './components/NumberField';
 export { default as ThemeProvider } from './components/ThemeProvider';
 export * from './components/ThemeProvider';
 export { default as Toast } from './components/Toast';

package/dist/src/storybook/Tip/Tip.style.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
 export declare const TipWrapper: import('@emotion/styled').StyledComponent<{
     theme?: import('@emotion/react').Theme;
-    as?: import('react').ElementType<any, keyof import("react").JSX.IntrinsicElements>;
+    as?: React.ElementType;
 }, import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/src/utils/date.d.ts

@@ -1,5 +1,5 @@
-import { Dayjs as DayjsType, default as dayjsLib } from 'dayjs';
+import { Dayjs as DayjsType } from 'dayjs';
 
-declare const dayjs: typeof dayjsLib;
+declare const dayjs: import('dayjs').DayjsFn;
 export type Dayjs = DayjsType;
 export default dayjs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.7.1",
+  "version": "5.8.0",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",
@@ -33,7 +33,6 @@
     "@emotion/jest": "^11.11.0",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@optimize-lodash/rollup-plugin": "^4.0.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@storybook/addon-a11y": "^7.6.11",
@@ -64,7 +63,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "@testing-library/user-event": "^14.5.1",
     "@types/events": "^3.0.0",
-    "@types/lodash": "^4.14.149",
+    "@types/lodash-es": "^4.17.12",
     "@types/pluralize": "^0.0.29",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
@@ -117,15 +116,15 @@
   },
   "dependencies": {
     "@storybook/addon-controls": "^7.6.17",
-    "@tippyjs/react": "^4.2.5",
-    "dayjs": "^1.8.34",
+    "@tanstack/react-table": "^8.15.3",
+    "dayjs": "^2.0.0-alpha.4",
     "emotion-reset": "^3.0.1",
     "eslint-plugin-unused-imports": "^3.0.0",
     "jscodeshift": "^0.15.1",
-    "lodash": "^4.17.19",
+    "lodash-es": "^4.17.21",
     "patch-package": "^8.0.0",
     "pluralize": "^8.0.0",
-    "polished": "^3.4.4",
+    "polished": "^4.3.1",
     "postinstall-postinstall": "^2.1.0",
     "react-aria": "^3.30.0",
     "react-aria-components": "^1.0.0-rc.0",
@@ -136,6 +135,7 @@
     "react-responsive": "^10.0.0",
     "react-stately": "^3.28.0",
     "react-textarea-autosize": "^8.5.3",
+    "react-tooltip": "^5.26.4",
     "react-window": "^1.8.6",
     "recharts": "^2.8.0",
     "tslib": "^2.4.1",
@@ -179,7 +179,9 @@
     "documentation:up": "node server/docs-server.js",
     "chromatic": "chromatic",
     "build-storybook": "yarn build",
-    "yalc:push": "yalc publish --push"
+    "yalc:push": "yalc publish --push",
+    "lint-staged": "lint-staged --verbose",
+    "tsc-check": "tsc -p ."
   },
   "keywords": [
     "Orfium",

package/dist/style.css

@@ -1 +0,0 @@
-.tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:"";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}