@7shifts/sous-chef 2.17.0 → 2.17.2

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.
Files changed (67) hide show
  1. package/dist/core/DataTable/DataTable.d.ts +1 -3
  2. package/dist/core/DataTable/types.d.ts +7 -3
  3. package/dist/core/DataTableEditableCell/DataTableEditableCell.d.ts +1 -2
  4. package/dist/core/DataTableRow/DataTableRow.d.ts +1 -1
  5. package/dist/core/Flex/Flex.d.ts +0 -2
  6. package/dist/core/Inline/Inline.d.ts +0 -1
  7. package/dist/core/Stack/Stack.d.ts +0 -1
  8. package/dist/forms/SelectField/CustomContainer/CustomContainer.d.ts +2 -6
  9. package/dist/forms/SelectField/CustomOption/CustomOption.d.ts +2 -5
  10. package/dist/index.css +546 -962
  11. package/dist/index.d.ts +2 -1
  12. package/dist/index.js +41 -57
  13. package/dist/index.js.map +1 -1
  14. package/dist/index.modern.js +41 -57
  15. package/dist/index.modern.js.map +1 -1
  16. package/dist/layout/Card/Card.d.ts +2 -2
  17. package/dist/layout/Flex/Flex.d.ts +21 -0
  18. package/dist/layout/Flex/index.d.ts +1 -0
  19. package/dist/layout/Flex/types.d.ts +4 -0
  20. package/dist/layout/Inline/Inline.d.ts +21 -0
  21. package/dist/layout/Inline/index.d.ts +1 -0
  22. package/dist/layout/Stack/Stack.d.ts +20 -0
  23. package/dist/layout/Stack/index.d.ts +1 -0
  24. package/dist/layout/index.d.ts +4 -1
  25. package/dist/lists/DataTable/DataTable.d.ts +31 -0
  26. package/dist/lists/DataTable/DataTableCell/DataTableCell.d.ts +7 -0
  27. package/dist/lists/DataTable/DataTableCell/index.d.ts +1 -0
  28. package/dist/lists/DataTable/DataTableContext.d.ts +11 -0
  29. package/dist/lists/DataTable/DataTableHeader.d.ts +9 -0
  30. package/dist/lists/DataTable/index.d.ts +1 -0
  31. package/dist/lists/DataTable/types.d.ts +34 -0
  32. package/dist/lists/DataTableEditableCell/DataTableEditableCell.d.ts +22 -0
  33. package/dist/lists/DataTableEditableCell/index.d.ts +1 -0
  34. package/dist/lists/DataTableRow/DataTableRow.d.ts +11 -0
  35. package/dist/lists/DataTableRow/DataTableRowActions/DataTableRowActions.d.ts +6 -0
  36. package/dist/lists/DataTableRow/DataTableRowActions/index.d.ts +1 -0
  37. package/dist/lists/DataTableRow/index.d.ts +1 -0
  38. package/dist/lists/ResourceTable/ResourceTable.d.ts +28 -0
  39. package/dist/lists/ResourceTable/ResourceTableContext.d.ts +8 -0
  40. package/dist/lists/ResourceTable/ResourceTableHeader.d.ts +12 -0
  41. package/dist/lists/ResourceTable/index.d.ts +1 -0
  42. package/dist/lists/ResourceTable/types.d.ts +26 -0
  43. package/dist/lists/ResourceTableRow/ResourceTableRow.d.ts +13 -0
  44. package/dist/lists/ResourceTableRow/index.d.ts +1 -0
  45. package/dist/lists/index.d.ts +9 -0
  46. package/package.json +1 -1
  47. package/dist/icons/IconArrowDown.d.ts +0 -11
  48. package/dist/icons/IconArrowLeft.d.ts +0 -9
  49. package/dist/icons/IconArrowRight.d.ts +0 -9
  50. package/dist/icons/IconArrowUp.d.ts +0 -9
  51. package/dist/icons/IconCalendar.d.ts +0 -9
  52. package/dist/icons/IconCheck.d.ts +0 -9
  53. package/dist/icons/IconChevronDown.d.ts +0 -9
  54. package/dist/icons/IconChevronUp.d.ts +0 -8
  55. package/dist/icons/IconClose.d.ts +0 -9
  56. package/dist/icons/IconComment.d.ts +0 -9
  57. package/dist/icons/IconDelete.d.ts +0 -9
  58. package/dist/icons/IconEdit.d.ts +0 -9
  59. package/dist/icons/IconExclaim.d.ts +0 -9
  60. package/dist/icons/IconEye.d.ts +0 -9
  61. package/dist/icons/IconEyeSlash.d.ts +0 -9
  62. package/dist/icons/IconLocation.d.ts +0 -9
  63. package/dist/icons/IconMinusCircle.d.ts +0 -9
  64. package/dist/icons/IconMore.d.ts +0 -9
  65. package/dist/icons/IconRemove.d.ts +0 -8
  66. package/dist/icons/IconUser.d.ts +0 -8
  67. package/dist/icons/IconUserPlus.d.ts +0 -9
@@ -1,10 +1,10 @@
1
1
  import React from 'react';
2
- import { Action } from '../../core';
2
+ import { MenuAction } from '../../overlay/Menu/types';
3
3
  declare type Props = {
4
4
  children: React.ReactNode;
5
5
  onClick?: () => void;
6
6
  isSelected?: boolean;
7
- actions?: Action[];
7
+ actions?: MenuAction[];
8
8
  testId?: string;
9
9
  };
10
10
  declare const Card: ({ children, onClick, isSelected, actions, testId }: Props) => JSX.Element;
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import type { AlignItems, FlexWrap, JustifyContent, Space } from './types';
3
+ declare type Props = {
4
+ children: React.ReactNode;
5
+ space?: Space;
6
+ /** It sets how each item will grow or shrink to fit the space available in its flex container. The default value is `0 1 auto` but it can be overriden. Check it out this [official doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) to see all the possible values. */
7
+ flex?: (string | number)[];
8
+ alignItems?: AlignItems;
9
+ justifyContent?: JustifyContent;
10
+ inlineFlex?: boolean;
11
+ direction?: 'row' | 'column';
12
+ flexItems?: boolean;
13
+ flexWrap?: FlexWrap;
14
+ testId?: string;
15
+ extraClass?: string;
16
+ };
17
+ /**
18
+ * Flex is a internal component used by Stack and Inline. DON'T use this component outside of Sous Chef
19
+ */
20
+ declare const Flex: React.FC<Props>;
21
+ export default Flex;
@@ -0,0 +1 @@
1
+ export { default } from './Flex';
@@ -0,0 +1,4 @@
1
+ export declare type AlignItems = 'flex-start' | 'flex-end' | 'center' | 'stretch';
2
+ export declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
3
+ export declare type JustifyContent = 'start' | 'end' | 'center' | 'space-between';
4
+ export declare type Space = 0 | 4 | 8 | 12 | 16 | 20 | 24 | 28 | 32 | 36 | 40 | 44 | 48 | 52 | 56 | 60;
@@ -0,0 +1,21 @@
1
+ import React from 'react';
2
+ import type { AlignItems, FlexWrap, JustifyContent, Space } from '../Flex/types';
3
+ declare type Props = {
4
+ children: React.ReactNode;
5
+ /** From `0` to `60` with multiples of `4`, eg. `8`, `12`, `16` and so on. */
6
+ space?: Space;
7
+ /** It sets how each item will grow or shrink to fit the space available in its flex container. The default value is `0 1 auto` but it can be overriden. Check it out this [official doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) to see all the possible values. */
8
+ flex?: (string | number)[];
9
+ /** One of: `flex-start`, `flex-end`, `center`, `stretch` */
10
+ alignItems?: AlignItems;
11
+ /** One of: `start`, `end`, `center`, `space-between` */
12
+ justifyContent?: JustifyContent;
13
+ inlineFlex?: boolean;
14
+ flexWrap?: FlexWrap;
15
+ testId?: string;
16
+ };
17
+ /**
18
+ * Layout component to easily line elements up in a row.
19
+ */
20
+ declare const Inline: React.FC<Props>;
21
+ export default Inline;
@@ -0,0 +1 @@
1
+ export { default } from './Inline';
@@ -0,0 +1,20 @@
1
+ import * as React from 'react';
2
+ import type { JustifyContent, Space, AlignItems } from '../Flex/types';
3
+ declare type Props = {
4
+ children: React.ReactNode;
5
+ /** From `0` to `60` with multiples of `4`, eg. `8`, `12`, `16` and so on. */
6
+ space?: Space;
7
+ /** It sets how each item will grow or shrink to fit the space available in its flex container. The default value is `0 1 auto` but it can be overriden. Check it out this [official doc](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) to see all the possible values. */
8
+ flex?: (string | number)[];
9
+ /** One of: `flex-start`, `flex-end`, `center`, `stretch` */
10
+ alignItems?: AlignItems;
11
+ /** One of: `start`, `end`, `center`, `space-between` */
12
+ justifyContent?: JustifyContent;
13
+ flexItems?: boolean;
14
+ testId?: string;
15
+ };
16
+ /**
17
+ * Layout component to easily stack elements up in a column.
18
+ */
19
+ declare const Stack: React.FC<Props>;
20
+ export default Stack;
@@ -0,0 +1 @@
1
+ export { default } from './Stack';
@@ -1,2 +1,5 @@
1
1
  import Card from './Card';
2
- export { Card };
2
+ import Inline from './Inline';
3
+ import Stack from './Stack';
4
+ export { Card, Inline, Stack };
5
+ export type { AlignItems, FlexWrap, JustifyContent } from './Flex/types';
@@ -0,0 +1,31 @@
1
+ import React from 'react';
2
+ import type { Column, CustomComponent, Item, Sort } from './types';
3
+ declare type Props<T> = {
4
+ /** Each element represents a row and each key of the object represents a column */
5
+ items: Item<T>[];
6
+ /** For each column element, the `name` property should match the key on `items` */
7
+ columns?: Column[];
8
+ /** A custom component for customizing how the each item is rendered. It pass as props: `item`, `index`, `columnSizes` and `columns` */
9
+ itemComponent?: React.ComponentType<CustomComponent<T>>;
10
+ maxHeight?: number;
11
+ /** Used for pagination */
12
+ hasPrevious?: boolean;
13
+ /** Used for pagination */
14
+ hasNext?: boolean;
15
+ /** Used for pagination */
16
+ onPreviousClick?: () => void;
17
+ /** Used for pagination */
18
+ onNextClick?: () => void;
19
+ isLoading?: boolean;
20
+ /** It is fired when a sorted column is clicked to be sorted */
21
+ onSort?: (sort: Sort) => void;
22
+ showActionMenu?: boolean;
23
+ /** Will render footer component if not null - expects a custom RowItem component */
24
+ footerComponent?: React.ReactNode;
25
+ /** Will render vertical borders between columns if true */
26
+ hasVerticalBorders?: boolean;
27
+ /** Used to override the default data-testid */
28
+ testId?: string;
29
+ };
30
+ declare const DataTable: <T extends unknown>({ items, columns, itemComponent, maxHeight, hasPrevious, hasNext, onPreviousClick, onNextClick, onSort, isLoading, showActionMenu, footerComponent, hasVerticalBorders, testId }: Props<T>) => JSX.Element;
31
+ export default DataTable;
@@ -0,0 +1,7 @@
1
+ import React from 'react';
2
+ declare type Props = {
3
+ children: React.ReactNode;
4
+ columnIndex: number;
5
+ };
6
+ declare const DataTableCell: ({ children, columnIndex }: Props) => JSX.Element;
7
+ export default DataTableCell;
@@ -0,0 +1 @@
1
+ export * from './DataTableCell';
@@ -0,0 +1,11 @@
1
+ /// <reference types="react" />
2
+ import type { Column } from './types';
3
+ export declare type DataTableContextType = {
4
+ columns?: Column[];
5
+ showActionMenu?: boolean;
6
+ numberOfRows: number;
7
+ hasVerticalBorders?: boolean;
8
+ };
9
+ declare const Context: import("react").Context<DataTableContextType>;
10
+ export declare const useDataTableContext: () => DataTableContextType;
11
+ export default Context;
@@ -0,0 +1,9 @@
1
+ import React from 'react';
2
+ import type { Column, Sort } from './types';
3
+ declare type Props = {
4
+ columns: Column[];
5
+ onSort?: (sort: Sort) => void;
6
+ showActionMenu?: boolean;
7
+ };
8
+ declare const DataTableHeader: React.FC<Props>;
9
+ export default DataTableHeader;
@@ -0,0 +1 @@
1
+ export { default } from './DataTable';
@@ -0,0 +1,34 @@
1
+ import React from 'react';
2
+ import Button from '../../actions/Button/Button';
3
+ import { MenuAction } from '../../overlay/Menu/types';
4
+ export declare type Column = {
5
+ name: string;
6
+ label?: React.ReactNode;
7
+ size?: number;
8
+ isSortable?: boolean;
9
+ currentSort?: SortDirection;
10
+ isRightAligned?: boolean;
11
+ };
12
+ export declare type SortDirection = 'asc' | 'desc' | null;
13
+ export declare type Sort = {
14
+ columnName: string;
15
+ direction: SortDirection;
16
+ };
17
+ export declare type Item<T> = T | (T & {
18
+ actions?: Action[];
19
+ });
20
+ export declare type CustomComponent<T> = {
21
+ item: Item<T>;
22
+ index: number;
23
+ columnSizes?: number[];
24
+ columns?: Column[];
25
+ };
26
+ declare type KebabAction = {
27
+ showInKebab?: true;
28
+ } & MenuAction;
29
+ declare type ButtonAction = {
30
+ buttonProps?: Pick<React.ComponentPropsWithoutRef<typeof Button>, 'theme' | 'disabled' | 'loading' | 'title'>;
31
+ showInKebab: false;
32
+ } & MenuAction;
33
+ export declare type Action = KebabAction | ButtonAction;
34
+ export {};
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ declare type Props = {
3
+ name: string;
4
+ columnIndex: number;
5
+ rowIndex: number;
6
+ id?: string;
7
+ value?: string;
8
+ onChange?: (e: string) => void;
9
+ onBlur?: (e: string) => void;
10
+ placeholder?: string;
11
+ disabled?: boolean;
12
+ error?: string;
13
+ /** Use a prefix for things like currency symbols (“$”, “¥”, “£”) or icons. */
14
+ prefix?: React.ReactNode;
15
+ /** Use suffix for things like units of measure (“in”, “cm”, ”hours”) or icons. */
16
+ suffix?: React.ReactNode;
17
+ defaultValue?: string;
18
+ type?: 'text' | 'currency';
19
+ testId?: string;
20
+ };
21
+ declare const DataTableEditableCell: ({ name, columnIndex, rowIndex, id: inputId, value, onChange, onBlur, placeholder, disabled, error, prefix, suffix, defaultValue, type, testId }: Props) => JSX.Element;
22
+ export default DataTableEditableCell;
@@ -0,0 +1 @@
1
+ export { default } from './DataTableEditableCell';
@@ -0,0 +1,11 @@
1
+ import React from 'react';
2
+ import type { Action } from '../DataTable/types';
3
+ declare type Props = {
4
+ children: React.ReactNode;
5
+ onClick?: () => void;
6
+ isSelected?: boolean;
7
+ actions?: Action[];
8
+ hasDefaultPadding?: boolean;
9
+ } & Omit<React.HTMLProps<HTMLDivElement>, 'css'>;
10
+ declare const DataTableRow: React.ForwardRefExoticComponent<Pick<Props, "children" | "type" | "default" | "disabled" | "onClick" | "id" | "title" | "href" | "target" | "size" | "cite" | "data" | "form" | "label" | "slot" | "span" | "style" | "summary" | "pattern" | "key" | "color" | "className" | "height" | "lang" | "max" | "media" | "method" | "min" | "name" | "width" | "role" | "tabIndex" | "crossOrigin" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "contextMenu" | "list" | "start" | "wrap" | "dir" | "checked" | "value" | "placeholder" | "prefix" | "content" | "translate" | "hidden" | "open" | "multiple" | "autoFocus" | "defaultValue" | "autoComplete" | "maxLength" | "isSelected" | "readOnly" | "required" | "sizes" | "htmlFor" | "step" | "actions" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "high" | "hrefLang" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "mediaGroup" | "minLength" | "muted" | "nonce" | "noValidate" | "optimum" | "playsInline" | "poster" | "preload" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "src" | "srcDoc" | "srcLang" | "srcSet" | "useMap" | "wmode" | "defaultChecked" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "hasDefaultPadding"> & React.RefAttributes<HTMLDivElement>>;
11
+ export default DataTableRow;
@@ -0,0 +1,6 @@
1
+ import type { Action } from '../../DataTable/types';
2
+ declare type Props = {
3
+ actions: Action[];
4
+ };
5
+ declare const ActionsCell: ({ actions }: Props) => JSX.Element;
6
+ export default ActionsCell;
@@ -0,0 +1 @@
1
+ export { default } from './DataTableRowActions';
@@ -0,0 +1 @@
1
+ export { default } from './DataTableRow';
@@ -0,0 +1,28 @@
1
+ import React from 'react';
2
+ import type { Column, CustomComponent, Item, Sort } from './types';
3
+ declare type Props<T> = {
4
+ /** Each element represents a row and each key of the object represents a column */
5
+ items: Item<T>[];
6
+ /** For each column element, the `name` property should match the key on `items` */
7
+ columns?: Column[];
8
+ /** A custom component for customizing how the each item is rendered. It pass as props: `item`, `index`, `columnSizes` and `columns` */
9
+ itemComponent?: React.ComponentType<CustomComponent<T>>;
10
+ maxHeight?: number;
11
+ /** Used for pagination */
12
+ hasPrevious?: boolean;
13
+ /** Used for pagination */
14
+ hasNext?: boolean;
15
+ /** Used for pagination */
16
+ onPreviousClick?: () => void;
17
+ /** Used for pagination */
18
+ onNextClick?: () => void;
19
+ isLoading?: boolean;
20
+ /** It is fired when a sorted column is clicked to be sorted */
21
+ onSort?: (sort: Sort) => void;
22
+ showActionMenu?: boolean;
23
+ };
24
+ /**
25
+ * @deprecated On v2.0 we introduced the `DataTable` that should be used for tabular data. This component will be removed on v3.0.
26
+ */
27
+ declare const ResourceTable: <T extends unknown>({ items, columns, itemComponent, maxHeight, hasPrevious, hasNext, onPreviousClick, onNextClick, onSort, isLoading, showActionMenu }: Props<T>) => JSX.Element;
28
+ export default ResourceTable;
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export declare type ResourceTableContextType = {
3
+ columnSizes?: number[];
4
+ showActionMenu?: boolean;
5
+ };
6
+ declare const Context: import("react").Context<ResourceTableContextType>;
7
+ export declare const useResourceTableContext: () => ResourceTableContextType;
8
+ export default Context;
@@ -0,0 +1,12 @@
1
+ import React from 'react';
2
+ import type { Column, Sort } from './types';
3
+ declare type Props = {
4
+ columns: Column[];
5
+ onSort?: (sort: Sort) => void;
6
+ showActionMenu?: boolean;
7
+ };
8
+ /**
9
+ * @deprecated On v2.0 we introduced the `DataTable` that should be used for tabular data. This component will be removed on v3.0.
10
+ */
11
+ declare const ResourceTableHeader: React.FC<Props>;
12
+ export default ResourceTableHeader;
@@ -0,0 +1 @@
1
+ export { default } from './ResourceTable';
@@ -0,0 +1,26 @@
1
+ import React from 'react';
2
+ export declare type Column = {
3
+ name: string;
4
+ label?: React.ReactNode;
5
+ size?: number;
6
+ isSortable?: boolean;
7
+ currentSort?: SortDirection;
8
+ };
9
+ export declare type SortDirection = 'asc' | 'desc' | null;
10
+ export declare type Sort = {
11
+ columnName: string;
12
+ direction: SortDirection;
13
+ };
14
+ export declare type Item<T> = T | (T & {
15
+ actions?: Action[];
16
+ });
17
+ export declare type CustomComponent<T> = {
18
+ item: Item<T>;
19
+ index: number;
20
+ columnSizes?: number[];
21
+ columns?: Column[];
22
+ };
23
+ export declare type Action = {
24
+ label: React.ReactNode;
25
+ onAction: () => void;
26
+ };
@@ -0,0 +1,13 @@
1
+ import React from 'react';
2
+ import type { Action } from '../ResourceTable/types';
3
+ declare type Props = {
4
+ children: React.ReactNode;
5
+ onClick?: () => void;
6
+ isSelected?: boolean;
7
+ actions?: Action[];
8
+ };
9
+ /**
10
+ * @deprecated On v2.0 we introduced the `DataTable` that should be used for tabular data. This component will be removed on v3.0.
11
+ */
12
+ declare const ResourceTableRow: React.FC<Props>;
13
+ export default ResourceTableRow;
@@ -0,0 +1 @@
1
+ export { default } from './ResourceTableRow';
@@ -0,0 +1,9 @@
1
+ import ResourceTable from './ResourceTable';
2
+ import ResourceTableRow from './ResourceTableRow';
3
+ import DataTable from './DataTable';
4
+ import DataTableRow from './DataTableRow';
5
+ import DataTableCell from './DataTable/DataTableCell/DataTableCell';
6
+ import DataTableEditableCell from './DataTableEditableCell';
7
+ export { ResourceTable, ResourceTableRow, DataTable, DataTableRow, DataTableCell, DataTableEditableCell };
8
+ export type { CustomComponent, Column, SortDirection, Sort } from './ResourceTable/types';
9
+ export type { Column as DataTableColumn, CustomComponent as DataTableCustomComponent, Action } from './DataTable/types';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@7shifts/sous-chef",
3
- "version": "2.17.0",
3
+ "version": "2.17.2",
4
4
  "description": "7shifts component library",
5
5
  "author": "7shifts",
6
6
  "license": "MIT",
@@ -1,11 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- rotate?: number;
8
- dataTestId?: string;
9
- };
10
- declare const IconArrowDown: React.FC<Props>;
11
- export default IconArrowDown;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconArrowLeft: React.FC<Props>;
9
- export default IconArrowLeft;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconArrowRight: React.FC<Props>;
9
- export default IconArrowRight;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconArrowUp: React.FC<Props>;
9
- export default IconArrowUp;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconCalendar: React.FC<Props>;
9
- export default IconCalendar;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconCheck: React.FC<Props>;
9
- export default IconCheck;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- declare type Props = {
3
- size?: 'small' | 'medium';
4
- color?: string;
5
- rotate?: number;
6
- dataTestId?: string;
7
- };
8
- declare const IconChevronDown: React.FC<Props>;
9
- export default IconChevronDown;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- declare type Props = {
4
- size?: 'small' | 'medium';
5
- color?: Color;
6
- };
7
- declare const IconChevronUp: React.FC<Props>;
8
- export default IconChevronUp;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconClose: React.FC<Props>;
9
- export default IconClose;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconComment: React.FC<Props>;
9
- export default IconComment;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconDelete: React.FC<Props>;
9
- export default IconDelete;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconEdit: React.FC<Props>;
9
- export default IconEdit;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconExclaim: React.FC<Props>;
9
- export default IconExclaim;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconEye: React.FC<Props>;
9
- export default IconEye;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconEyeSlash: React.FC<Props>;
9
- export default IconEyeSlash;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconLocation: React.FC<Props>;
9
- export default IconLocation;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconMinusCircle: React.FC<Props>;
9
- export default IconMinusCircle;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconMore: React.FC<Props>;
9
- export default IconMore;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- declare type Props = {
4
- size?: 'small' | 'medium' | 'default' | 'large';
5
- color?: Color;
6
- };
7
- declare const IconRemove: React.FC<Props>;
8
- export default IconRemove;
@@ -1,8 +0,0 @@
1
- import React from 'react';
2
- import { IconSize } from './types';
3
- declare type Props = {
4
- size?: IconSize;
5
- color?: string;
6
- };
7
- declare const IconUser: React.FC<Props>;
8
- export default IconUser;
@@ -1,9 +0,0 @@
1
- import React from 'react';
2
- import { Color } from '../foundation/colors';
3
- import { IconSize } from './types';
4
- declare type Props = {
5
- size?: IconSize;
6
- color?: Color;
7
- };
8
- declare const IconUserPlus: React.FC<Props>;
9
- export default IconUserPlus;