@fattureincloud/fic-design-system 0.19.37 → 0.19.39

package/dist/components/tableV3/hooks/useScrollShadows.d.ts

@@ -0,0 +1,22 @@
+import { RefObject } from 'react';
+interface Options {
+    enabled: boolean;
+    hasCheckbox: boolean;
+    hasActions: boolean;
+}
+/**
+ * Toggles two shadow overlays on the table to hint at horizontally scrollable content.
+ *
+ * The overlays' visibility and horizontal offset are updated imperatively on the
+ * wrapper DOM node (via CSS classes and CSS variables) to avoid re-rendering the
+ * whole table on every scroll event.
+ *
+ * - `has-left-shadow`  -> there is content hidden on the left (scrolled to the right)
+ * - `has-right-shadow` -> there is content hidden on the right (not scrolled to the end)
+ *
+ * The offsets (`--dstbl-left-shadow-offset` / `--dstbl-right-shadow-offset`) anchor the
+ * shadows to the inner edge of the sticky checkbox / actions columns when present,
+ * falling back to the table edges otherwise.
+ */
+declare const useScrollShadows: (scrollRef: RefObject<HTMLElement>, wrapperRef: RefObject<HTMLElement>, { enabled, hasActions, hasCheckbox }: Options) => void;
+export default useScrollShadows;

package/dist/components/tableV3/scrollShadows.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/react';
+interface ScrollShadowsArgs {
+    leftFixedColumn: boolean;
+    rightFixedColumn: boolean;
+    showScrollShadows: boolean;
+}
+export declare const HorizontalScrollShadows: Story<ScrollShadowsArgs>;
+declare const ScrollShadowsStories: Meta<ScrollShadowsArgs>;
+export default ScrollShadowsStories;

package/dist/components/tableV3/styled.d.ts

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ScrollShadowWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const LeftShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const RightShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const HorizontalScroll: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
     maxHeight?: number | undefined;
     hideScrollBar?: boolean | undefined;

package/dist/components/tableV3/table.stories.d.ts

@@ -2,5 +2,15 @@ import { Meta, Story } from '@storybook/react';
 import { DataType } from './stories/types';
 import { TableProps } from './types';
 export declare const Template: Story<TableProps<DataType>>;
+/**
+ * Story to verify that tooltips are rendered above the sticky table header, including during
+ * the fade-in/fade-out animation. It covers both cases:
+ * - `rowTooltip`: every row has a tooltip (placed on top of the row, so on the first visible
+ *   rows it overlaps the header)
+ * - in-cell `Tooltip`: the "Info" column renders an icon wrapped in a Tooltip
+ * Scroll the table and hover the rows/icons closest to the header: the tooltip must appear
+ * entirely above the header from the very first frame of the animation.
+ */
+export declare const TooltipsOverHeader: Story<TableProps<DataType>>;
 declare const TableStories: Meta<TableProps<DataType>>;
 export default TableStories;

package/dist/components/tableV3/types/tableTypes.d.ts

@@ -26,6 +26,7 @@ export declare type TableProps<T> = SelectableTable<T> & PaginatedTable & Sortab
     uniqueId: keyof T;
     customAction?: (row: Row<T>) => JSX.Element | null;
     disableScroll?: boolean;
+    showScrollShadows?: boolean;
 };
 export declare type LoadingStyle = {
     backgroundColor?: string;

package/dist/components/tooltip/styled.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
+/**
+ * The fade animation must be applied to the popper element (TooltipContainer) and NOT to this
+ * wrapper: while `opacity < 1` an element creates a new stacking context, and since this wrapper
+ * is unpositioned (z-index: auto) the whole tooltip would be painted below any positioned element
+ * with a z-index (e.g. TableV3's sticky header) for the duration of the animation, popping above
+ * it only once the transition ends. TooltipContainer is positioned by popper and carries
+ * z-index: 9999, so animating it keeps the tooltip on top even while fading.
+ */
 export declare const BodyAnimationWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export declare const MessageIcon: import("styled-components").StyledComponent<({ isDisabled, onClick, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
 export declare const ButtonContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/verticalTab/VerticalTab.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { VerticalTabProps } from './types';
+declare const VerticalTab: ({ width, renderLeftContent, renderRightContent, }: VerticalTabProps) => JSX.Element;
+export default VerticalTab;

package/dist/components/verticalTab/components/VerticalTabSelector/VerticalTabSelector.d.ts

@@ -0,0 +1,13 @@
+import { MouseEvent } from 'react';
+import { IconProps } from '../../../icon';
+import { VerticalTabSelectorStatus } from './types';
+export interface VerticalTabSelectorProps {
+    leftIcon?: IconProps;
+    text: string;
+    counter?: number;
+    active?: boolean;
+    status: VerticalTabSelectorStatus;
+    onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+declare const VerticalTabSelector: ({ leftIcon, text, status, counter, active, onClick, }: VerticalTabSelectorProps) => JSX.Element;
+export default VerticalTabSelector;

package/dist/components/verticalTab/components/VerticalTabSelector/index.d.ts

@@ -0,0 +1,5 @@
+export { default as verticalTabSelectorPalette } from './verticalTabSelectorPalette';
+import { VerticalTabSelectorStatus } from './types';
+import VerticalTabSelector from './VerticalTabSelector';
+export { VerticalTabSelector, VerticalTabSelectorStatus };
+export { VerticalTabSelectorPalette } from './types';

package/dist/components/verticalTab/components/VerticalTabSelector/styled.d.ts

@@ -0,0 +1,11 @@
+import { DefaultTheme } from 'styled-components';
+import { VerticalTabSelectorProps } from './VerticalTabSelector';
+export declare const VerticalTabSelectorWrapper: import("styled-components").StyledComponent<"button", DefaultTheme, {
+    active: VerticalTabSelectorProps['active'];
+    status: VerticalTabSelectorProps['status'];
+}, never>;
+export declare const IconContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const StatusContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {}, never>;
+export declare const TextContainer: import("styled-components").StyledComponent<"div", DefaultTheme, {
+    status: VerticalTabSelectorProps['status'];
+}, never>;

package/dist/components/verticalTab/components/VerticalTabSelector/types.d.ts

@@ -0,0 +1,37 @@
+import { paletteColor } from '../../../../styles/types';
+export declare enum VerticalTabSelectorStatus {
+    DEFAULT = "default",
+    COMPLETED = "completed",
+    EDIT = "edit",
+    WARNING = "warning"
+}
+export declare type VerticalTabSelectorPalette = {
+    default: {
+        active: {
+            color: paletteColor;
+            backgroundColor: paletteColor;
+            hoverBackground: paletteColor;
+            activeButtonBackground: paletteColor;
+        };
+        inactive: {
+            color: paletteColor;
+            backgroundColor: paletteColor;
+            hoverBackground: paletteColor;
+            activeButtonBackground: paletteColor;
+        };
+    };
+    warning: {
+        active: {
+            color: paletteColor;
+            backgroundColor: paletteColor;
+            hoverBackground: paletteColor;
+            activeButtonBackground: paletteColor;
+        };
+        inactive: {
+            color: paletteColor;
+            backgroundColor: paletteColor;
+            hoverBackground: paletteColor;
+            activeButtonBackground: paletteColor;
+        };
+    };
+};

package/dist/components/verticalTab/components/VerticalTabSelector/verticalTabSelector.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react';
+import { VerticalTabSelectorProps } from './VerticalTabSelector';
+export declare const Template: Story<VerticalTabSelectorProps>;
+declare const VerticalTabSelectorStories: Meta<VerticalTabSelectorProps>;
+export default VerticalTabSelectorStories;

package/dist/components/verticalTab/components/VerticalTabSelector/verticalTabSelectorPalette.d.ts

@@ -0,0 +1,3 @@
+import { VerticalTabSelectorPalette } from './types';
+declare const verticalTabSelectorPalette: VerticalTabSelectorPalette;
+export default verticalTabSelectorPalette;

package/dist/components/verticalTab/index.d.ts

@@ -0,0 +1,2 @@
+import VerticalTab from './VerticalTab';
+export { VerticalTab };

package/dist/components/verticalTab/styled.d.ts

@@ -0,0 +1,6 @@
+import { VerticalTabProps } from './types';
+export declare const VerticalTabWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
+    width: VerticalTabProps['width'];
+}, never>;
+export declare const VerticalTabSelectorsWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const VerticalTabContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/dist/components/verticalTab/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface VerticalTabProps {
+    width?: string | number;
+    renderLeftContent: () => JSX.Element | JSX.Element[];
+    renderRightContent: () => JSX.Element | JSX.Element[];
+}

package/dist/components/verticalTab/verticalTab.stories.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Meta, Story } from '@storybook/react';
+import { VerticalTabProps } from './types';
+export declare const Template: Story<VerticalTabProps>;
+export declare const WithVerticalTabSelectors: () => JSX.Element;
+export declare const WithVerticalTabSelectorsEdit: () => JSX.Element;
+declare const VerticalTabStories: Meta<VerticalTabProps>;
+export default VerticalTabStories;