@fattureincloud/fic-design-system 0.19.36 → 0.19.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/dropdown/DropdownImpl.d.ts +1 -1
- package/dist/components/dropdown/types.d.ts +1 -0
- package/dist/components/tableV3/TableV3.d.ts +1 -0
- package/dist/components/tableV3/hooks/useScrollShadows.d.ts +22 -0
- package/dist/components/tableV3/scrollShadows.stories.d.ts +9 -0
- package/dist/components/tableV3/styled.d.ts +3 -0
- package/dist/components/tableV3/types/tableTypes.d.ts +1 -0
- package/dist/index.esm.js +2 -2
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/package.json +5 -2
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { DropdownProps } from './types';
|
|
3
|
-
declare const DropdownImpl: ({ blockIframeClick, className, content, disableArrowNavigation, emptyState, fullWidth, isDisabled, maxHeight, maxWidth, minWidthAsTrigger, offsetY, onClose, onOpen, open, outsideTriggers, placement, portalContainer, renderContent, renderTrigger, setOpen, sideButton, title, triggerStyles, usePortal, withPadding, }: DropdownProps) => JSX.Element;
|
|
3
|
+
declare const DropdownImpl: ({ blockIframeClick, className, content, disableArrowNavigation, disablePlacementFlip, emptyState, fullWidth, isDisabled, maxHeight, maxWidth, minWidthAsTrigger, offsetY, onClose, onOpen, open, outsideTriggers, placement, portalContainer, renderContent, renderTrigger, setOpen, sideButton, title, triggerStyles, usePortal, withPadding, }: DropdownProps) => JSX.Element;
|
|
4
4
|
export default DropdownImpl;
|
|
@@ -79,6 +79,7 @@ import { TableProps } from './types';
|
|
|
79
79
|
* @param {RenderEmptyStateCallback} [renderEmptyState] - A function that returns a JSX element to be displayed when the table is empty
|
|
80
80
|
* @param {RowTooltipCallback} [rowTooltip - A function that returns a string to be displayed as a tooltip over the row
|
|
81
81
|
* @param {boolean} [showFooter] - If true, the table will display a footer
|
|
82
|
+
* @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
|
|
82
83
|
* @param {keyof TData} uniqueId - The unique identifier of the data row
|
|
83
84
|
* @param {boolean} [isSelectable] - If true, the table will display a checkbox in the first column to allow row selection
|
|
84
85
|
* @param {string[]} [rowSelection] - The list of selected rows, obligatory if isSelectable is true
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { RefObject } from 'react';
|
|
2
|
+
interface Options {
|
|
3
|
+
enabled: boolean;
|
|
4
|
+
hasCheckbox: boolean;
|
|
5
|
+
hasActions: boolean;
|
|
6
|
+
}
|
|
7
|
+
/**
|
|
8
|
+
* Toggles two shadow overlays on the table to hint at horizontally scrollable content.
|
|
9
|
+
*
|
|
10
|
+
* The overlays' visibility and horizontal offset are updated imperatively on the
|
|
11
|
+
* wrapper DOM node (via CSS classes and CSS variables) to avoid re-rendering the
|
|
12
|
+
* whole table on every scroll event.
|
|
13
|
+
*
|
|
14
|
+
* - `has-left-shadow` -> there is content hidden on the left (scrolled to the right)
|
|
15
|
+
* - `has-right-shadow` -> there is content hidden on the right (not scrolled to the end)
|
|
16
|
+
*
|
|
17
|
+
* The offsets (`--dstbl-left-shadow-offset` / `--dstbl-right-shadow-offset`) anchor the
|
|
18
|
+
* shadows to the inner edge of the sticky checkbox / actions columns when present,
|
|
19
|
+
* falling back to the table edges otherwise.
|
|
20
|
+
*/
|
|
21
|
+
declare const useScrollShadows: (scrollRef: RefObject<HTMLElement>, wrapperRef: RefObject<HTMLElement>, { enabled, hasActions, hasCheckbox }: Options) => void;
|
|
22
|
+
export default useScrollShadows;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Meta, Story } from '@storybook/react';
|
|
2
|
+
interface ScrollShadowsArgs {
|
|
3
|
+
leftFixedColumn: boolean;
|
|
4
|
+
rightFixedColumn: boolean;
|
|
5
|
+
showScrollShadows: boolean;
|
|
6
|
+
}
|
|
7
|
+
export declare const HorizontalScrollShadows: Story<ScrollShadowsArgs>;
|
|
8
|
+
declare const ScrollShadowsStories: Meta<ScrollShadowsArgs>;
|
|
9
|
+
export default ScrollShadowsStories;
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const Container: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
|
+
export declare const ScrollShadowWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
+
export declare const LeftShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
|
+
export declare const RightShadow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
3
6
|
export declare const HorizontalScroll: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
|
|
4
7
|
maxHeight?: number | undefined;
|
|
5
8
|
hideScrollBar?: boolean | undefined;
|
|
@@ -26,6 +26,7 @@ export declare type TableProps<T> = SelectableTable<T> & PaginatedTable & Sortab
|
|
|
26
26
|
uniqueId: keyof T;
|
|
27
27
|
customAction?: (row: Row<T>) => JSX.Element | null;
|
|
28
28
|
disableScroll?: boolean;
|
|
29
|
+
showScrollShadows?: boolean;
|
|
29
30
|
};
|
|
30
31
|
export declare type LoadingStyle = {
|
|
31
32
|
backgroundColor?: string;
|