@fattureincloud/fic-design-system 0.19.37 → 0.19.38

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

@@ -79,6 +79,7 @@ import { TableProps } from './types';
  * @param {RenderEmptyStateCallback} [renderEmptyState] - A function that returns a JSX element to be displayed when the table is empty
  * @param {RowTooltipCallback} [rowTooltip - A function that returns a string to be displayed as a tooltip over the row
  * @param {boolean} [showFooter] - If true, the table will display a footer
+ * @param {boolean} [showScrollShadows] - If true, shows vertical shadows at the table edges (or at the inner edge of the sticky checkbox/actions columns) while there is horizontally scrollable content
  * @param {keyof TData} uniqueId - The unique identifier of the data row
  * @param {boolean} [isSelectable] - If true, the table will display a checkbox in the first column to allow row selection
  * @param {string[]} [rowSelection] - The list of selected rows, obligatory if isSelectable is true

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/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;