@7shifts/sous-chef 3.34.0-beta.2 → 3.34.0-beta0

package/dist/layout/CalloutCard/CalloutCard.d.ts

@@ -11,5 +11,8 @@ type Props = {
     };
     testId?: string;
 };
+/**
+ * @deprecated Use `<EmptyState as='card' />` instead
+ */
 declare const CalloutCard: ({ header, title, children, mediaUrl, onClose, actions, testId }: Props) => React.JSX.Element;
 export default CalloutCard;

package/dist/layout/Card/Card.d.ts

@@ -1,13 +1,14 @@
 import React from 'react';
-import { PositionStyles } from '../../foundation/types';
+import type { DataProps, PositionStyles } from '../../foundation/types';
 import { MenuAction } from '../../overlay/KebabMenu/types';
 type Props = {
     children: React.ReactNode;
     onClick?: () => void;
+    onClose?: () => void;
     isSelected?: boolean;
     disabled?: boolean;
     actions?: MenuAction[];
     testId?: string;
-} & PositionStyles;
-declare const Card: ({ children, onClick, isSelected, disabled, actions, testId, ...positionProps }: Props) => React.JSX.Element;
+} & PositionStyles & DataProps;
+declare const Card: ({ children, onClick, onClose, isSelected, disabled, actions, testId, ...rest }: Props) => React.JSX.Element;
 export default Card;

package/dist/layout/Flex/Flex.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { AlignItems, FlexWrap, JustifyContent, Space, SpaceConfig } from './types';
-import { PositionStyles } from '../../foundation/types';
+import { DataProps, PositionStyles } from '../../foundation/types';
 type Props = {
     children: React.ReactNode;
     space?: Space | SpaceConfig;
@@ -15,7 +15,7 @@ type Props = {
     flexGrow?: number;
     testId?: string;
     extraClass?: string;
-} & PositionStyles;
+} & PositionStyles & DataProps;
 /**
  * Flex is a internal component used by Stack and Inline. DON'T use this component outside of Sous Chef
  */

package/dist/layout/Inline/Inline.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { PositionStyles } from '../../foundation/types';
+import { DataProps, PositionStyles } from '../../foundation/types';
 import type { AlignItems, FlexWrap, JustifyContent, Space, SpaceConfig } from '../Flex/types';
 type Props = {
     children: React.ReactNode;
@@ -15,7 +15,7 @@ type Props = {
     flexWrap?: FlexWrap;
     testId?: string;
     flexGrow?: number;
-} & PositionStyles;
+} & PositionStyles & DataProps;
 /**
  * Layout component to easily line elements up in a row.
  */

package/dist/layout/Stack/Stack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { PositionStyles } from '../../foundation/types';
+import { DataProps, PositionStyles } from '../../foundation/types';
 import type { JustifyContent, Space, AlignItems, SpaceConfig } from '../Flex/types';
 type Props = {
     children: React.ReactNode;
@@ -14,7 +14,7 @@ type Props = {
     flexItems?: boolean;
     testId?: string;
     flexGrow?: number;
-} & PositionStyles;
+} & PositionStyles & DataProps;
 /**
  * Layout component to easily stack elements up in a column.
  */

package/dist/lists/DataTable/DataTable.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
-import type { DataTableColumn, DataTableCustomComponent, DataTableItem, DataTableSort, StickyColumns } from './types';
+import type { DataTableColumn, DataTableCustomComponent, DataTableEmptyState as DataTableEmptyStateType, DataTableItem, DataTableSort, StickyColumns } from './types';
+import type { DataProps } from '../../foundation/types';
 type Props<T> = {
     /** Each element represents a row and each key of the object represents a column */
     items: DataTableItem<T>[];
@@ -30,6 +31,7 @@ type Props<T> = {
     testId?: string;
     /** Used to make the left, rigth or both edge columns sticky */
     stickyColumns?: StickyColumns;
-};
-declare const DataTable: <T extends unknown>({ items, columns, itemComponent, maxHeight, hasPrevious, hasNext, onPreviousClick, onNextClick, onSort, isLoading, showActionMenu, footerComponent, hasVerticalBorders, testId, skeletonRowLayout, stickyColumns }: Props<T>) => React.JSX.Element;
+    emptyState?: DataTableEmptyStateType;
+} & DataProps;
+declare const DataTable: <T extends unknown>({ items, columns, itemComponent, maxHeight, hasPrevious, hasNext, onPreviousClick, onNextClick, onSort, isLoading, showActionMenu, footerComponent, hasVerticalBorders, testId, skeletonRowLayout, stickyColumns, emptyState, ...otherProps }: Props<T>) => React.JSX.Element;
 export default DataTable;

package/dist/lists/DataTable/DataTableEmptyState/DataTableEmptyState.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { DataTableColumn, DataTableEmptyState as DataTableEmptyStateType } from '../types';
+type Props = {
+    columns?: DataTableColumn[];
+    customEmptyState?: DataTableEmptyStateType;
+};
+declare const DataTableEmptyState: ({ columns, customEmptyState }: Props) => React.JSX.Element;
+export default DataTableEmptyState;

package/dist/lists/DataTable/DataTableEmptyState/index.d.ts

@@ -0,0 +1 @@
+export { default } from './DataTableEmptyState';

package/dist/lists/DataTable/constants.d.ts

@@ -2,6 +2,7 @@ export declare const DATA_TABLE_STATES: {
     readonly CONTENT: "CONTENT";
     readonly SKELETON_LOADING: "SKELETON_LOADING";
     readonly BACKGROUND_LOADING: "BACKGROUND_LOADING";
+    readonly EMPTY: "EMPTY";
 };
 export declare const DATA_TABLE_SCROLL_STATES: {
     readonly NO_SCROLL: "NO_SCROLL";

package/dist/lists/DataTable/types.d.ts

@@ -34,7 +34,12 @@ type ButtonAction = {
     showInKebab: false;
 } & MenuAction;
 export type DataTableAction = KebabAction | ButtonAction;
-export type DataTableState = 'CONTENT' | 'SKELETON_LOADING' | 'BACKGROUND_LOADING';
+export type DataTableState = 'CONTENT' | 'SKELETON_LOADING' | 'BACKGROUND_LOADING' | 'EMPTY';
 export type StickyColumns = 'left' | 'right' | 'both';
 export type ScrollState = 'NO_SCROLL' | 'SCROLLABLE_CONTENT_ON_BOTH_SIDES' | 'SCROLLABLE_CONTENT_ON_LEFT' | 'SCROLLABLE_CONTENT_ON_RIGHT';
+export type DataTableEmptyState = {
+    title: string;
+    caption: string;
+    image?: string;
+};
 export {};

package/dist/media/Badge/Badge.d.ts

@@ -6,5 +6,5 @@ type Props = {
     title?: string;
     testId?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const Badge: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Badge;

package/dist/overlay/DropdownList/domain.d.ts

@@ -1,2 +1 @@
 export declare const canInteractWithItem: (child: React.ReactElement) => boolean;
-export declare const calculateScrollYPosition: (newFocusItem: number, lastFocusItem: number, paneScrollTop: number, maxPaneHeight: number, elementYPosition: number) => number | null;

package/dist/overlay/Modal/Modal.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { ZIndex } from '../../foundation/tokens/zindex/z-index-types';
+import type { DataProps } from '../../foundation/types';
 type Props = {
     children: React.ReactNode;
     header?: React.ReactNode;
@@ -16,9 +17,9 @@ type Props = {
     maxWidth?: number;
     shouldReturnFocusAfterClose?: boolean;
     testId?: string;
-};
+} & DataProps;
 declare const Modal: {
-    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId }: Props): React.JSX.Element;
+    ({ children, header, subHeader, onClose, loading, zIndex, rootElementId, width, height, maxWidth, shouldReturnFocusAfterClose, testId, ...otherProps }: Props): React.JSX.Element;
     setAppElement(rootElement: string | HTMLElement): void;
 };
 export default Modal;

package/dist/overlay/Tooltip/Tooltip.d.ts

@@ -18,5 +18,5 @@ type Props = {
     children: React.ReactElement;
     testId?: string;
 };
-declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
-export default _default;
+declare const Tooltip: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export default Tooltip;

package/dist/utils/elements.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+type Config = {
+    component: React.ReactElement['type'];
+    displayName: string;
+};
+export declare const checkIsComponent: (element: React.ReactElement, config: Config) => boolean;
+export {};

package/dist/utils/props.d.ts

@@ -23,5 +23,8 @@ type GetDataPropsResponse = {
     dataProps: ObjectMap<string>;
     otherProps: ObjectMap;
 };
-export declare const getDataProps: (props: ObjectMap) => GetDataPropsResponse;
+type GetDataPropsConfig = {
+    removeDataPrefix: boolean;
+};
+export declare const getDataProps: (props: ObjectMap, config?: GetDataPropsConfig) => GetDataPropsResponse;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@7shifts/sous-chef",
-    "version": "3.34.0-beta.2",
+    "version": "3.34.0-beta0",
     "description": "7shifts component library",
     "author": "7shifts",
     "license": "MIT",
@@ -27,6 +27,7 @@
         "test:unit:coverage": "run-s \"test:unit --coverage --coveragePathIgnorePatterns .stories.tsx index.ts icon-typescript-template.js types.ts\"",
         "test:watch": "react-scripts test --colors --transformIgnorePatterns \"node_modules/(?!time-autocomplete)/\" --env=jest-environment-jsdom-sixteen  --setupTestFrameworkScriptFile=./jestSetup.js",
         "test:visual": "chromatic --project-token=9226d55e4d56 --exit-zero-on-changes --build-script-name=storybook:chromatic:build",
+        "start": "yarn storybook",
         "storybook": "storybook dev -p 6006 --loglevel info",
         "storybook:chromatic": "storybook dev -p 6006",
         "storybook:chromatic:build": "storybook build -o ./.storybook/dist",