@7shifts/sous-chef 2.8.3 → 2.9.0

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from '../../actions/Button/Button';
 export declare type Column = {
     name: string;
     label?: React.ReactNode;
@@ -21,7 +22,17 @@ export declare type CustomComponent<T> = {
     columnSizes?: number[];
     columns?: Column[];
 };
-export declare type Action = {
+declare type BaseAction = {
+    action?: string;
     label: React.ReactNode;
-    onAction: () => void;
+    onAction: (e: React.MouseEvent | React.KeyboardEvent) => void;
 };
+declare type KebabAction = {
+    showInKebab?: true;
+} & BaseAction;
+declare type ButtonAction = {
+    buttonProps?: Pick<React.ComponentPropsWithoutRef<typeof Button>, 'theme' | 'disabled' | 'loading' | 'title'>;
+    showInKebab: false;
+} & BaseAction;
+export declare type Action = KebabAction | ButtonAction;
+export {};

package/dist/core/DataTableRow/DataTableRowActions/DataTableRowActions.d.ts

@@ -0,0 +1,6 @@
+import type { Action } from '../../DataTable/types';
+declare type Props = {
+    actions: Action[];
+};
+declare const ActionsCell: ({ actions }: Props) => JSX.Element;
+export default ActionsCell;

package/dist/core/DataTableRow/DataTableRowActions/index.d.ts

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

package/dist/core/index.d.ts

@@ -8,5 +8,5 @@ import DataTableCell from './DataTable/DataTableCell/DataTableCell';
 import DataTableEditableCell from './DataTableEditableCell';
 export { ResourceTable, ResourceTableRow, Inline, Stack, DataTable, DataTableRow, DataTableCell, DataTableEditableCell };
 export type { AlignItems, FlexWrap, JustifyContent } from './Flex/types';
-export type { CustomComponent, Column, SortDirection, Sort, Action } from './ResourceTable/types';
-export type { Column as DataTableColumn, CustomComponent as DataTableCustomComponent } from './DataTable/types';
+export type { CustomComponent, Column, SortDirection, Sort } from './ResourceTable/types';
+export type { Column as DataTableColumn, CustomComponent as DataTableCustomComponent, Action } from './DataTable/types';

package/dist/index.css

@@ -821,6 +821,158 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
 Please ask a designer if you have questions about which colours to use.
 */
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
+._1QDLF {
+  color: #555;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+}
+
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
+._2wiMV {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: #555;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+}
+
+/**
+This component is built with acessibility in mind.
+The `<input type="checkbox" />` is not removed from screen or changed its `apparence`. It would mess up with the `outline`.
+Instead we are keeping it on the screen with a `opacity: 0`. When it is active we turn the `outline` on the upper class to keep the native bahaviour.
+
+Just for future references:
+`.toggle [type='checkbox']` = input checkbox
+`.toggle__switch::before`   = toggle bottom layer
+`.toggle__switch::after`    = toggle knub
+*/
+._1ui8X {
+  display: inline-flex;
+  align-items: center;
+}
+
+._1YRJT {
+  line-height: normal;
+  padding: 0;
+  width: auto;
+  float: none;
+  color: #555;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  min-height: 16px;
+  margin-left: 8px;
+}
+
+._1jEiW {
+  color: #555;
+  font-family: "Proxima Nova", sans-serif;
+  font-weight: 400;
+  font-size: 12px;
+  margin-left: 48px;
+  display: block;
+}
+
+._1ui8X [type=checkbox] {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+
+._3tNyE {
+  position: relative;
+  cursor: pointer;
+}
+
+/* default states */
+._3tNyE::before {
+  content: "";
+  display: block;
+  background: #c1c1c1;
+  transition: all ease-in-out 150ms;
+  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
+  border-radius: 26px;
+  height: 20px;
+  width: 40px;
+}
+
+._3tNyE::after {
+  content: "";
+  display: block;
+  position: absolute;
+  left: 2px;
+  right: 21px;
+  top: 2px;
+  background: #fff;
+  border: 1px solid #c1c1c1;
+  border-radius: 24px;
+  height: 14px;
+  width: 14px;
+  transition: all ease-in-out 150ms;
+  box-shadow: 0 0 4px rgba(0, 0, 0, 0.03);
+}
+
+/* special states */
+._1ui8X [type=checkbox]:focus-visible + ._3tNyE {
+  outline: #6d87dd solid 1px;
+}
+
+._1ui8X [type=checkbox]:disabled + ._3tNyE {
+  opacity: 0.4;
+  cursor: default;
+}
+
+._1ui8X [type=checkbox]:disabled + ._3tNyE::after {
+  box-shadow: none;
+}
+
+/* checked states */
+._1ui8X [type=checkbox]:checked + ._3tNyE::before {
+  background: #3abda9;
+}
+
+._1ui8X [type=checkbox]:checked + ._3tNyE::after {
+  border-color: #3abda9;
+  left: 21px;
+  right: 2px;
+}
+/*********************************
+For new colours, see _colors.scss.
+**********************************/
+/* stylelint-disable color-no-hex */
+/*
+These are the colour variables to be used around the webapp.
+The variables are set up to describe the color and number which represents the lightness of the color.
+The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
+The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
+Please ask a designer if you have questions about which colours to use.
+*/
 ._of22N {
   display: flex;
   font-size: 12px;
@@ -2417,158 +2569,6 @@ The smaller the number the lighter the color. So $eggplant-100 would be light pu
 The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
 Please ask a designer if you have questions about which colours to use.
 */
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._1QDLF {
-  color: #555;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-}
-
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
-._2wiMV {
-  line-height: normal;
-  padding: 0;
-  width: auto;
-  float: none;
-  color: #555;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  min-height: 16px;
-}
-
-/**
-This component is built with acessibility in mind.
-The `<input type="checkbox" />` is not removed from screen or changed its `apparence`. It would mess up with the `outline`.
-Instead we are keeping it on the screen with a `opacity: 0`. When it is active we turn the `outline` on the upper class to keep the native bahaviour.
-
-Just for future references:
-`.toggle [type='checkbox']` = input checkbox
-`.toggle__switch::before`   = toggle bottom layer
-`.toggle__switch::after`    = toggle knub
-*/
-._1ui8X {
-  display: inline-flex;
-  align-items: center;
-}
-
-._1YRJT {
-  line-height: normal;
-  padding: 0;
-  width: auto;
-  float: none;
-  color: #555;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 600;
-  font-size: 14px;
-  min-height: 16px;
-  margin-left: 8px;
-}
-
-._1jEiW {
-  color: #555;
-  font-family: "Proxima Nova", sans-serif;
-  font-weight: 400;
-  font-size: 12px;
-  margin-left: 48px;
-  display: block;
-}
-
-._1ui8X [type=checkbox] {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-._3tNyE {
-  position: relative;
-  cursor: pointer;
-}
-
-/* default states */
-._3tNyE::before {
-  content: "";
-  display: block;
-  background: #c1c1c1;
-  transition: all ease-in-out 150ms;
-  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.03);
-  border-radius: 26px;
-  height: 20px;
-  width: 40px;
-}
-
-._3tNyE::after {
-  content: "";
-  display: block;
-  position: absolute;
-  left: 2px;
-  right: 21px;
-  top: 2px;
-  background: #fff;
-  border: 1px solid #c1c1c1;
-  border-radius: 24px;
-  height: 14px;
-  width: 14px;
-  transition: all ease-in-out 150ms;
-  box-shadow: 0 0 4px rgba(0, 0, 0, 0.03);
-}
-
-/* special states */
-._1ui8X [type=checkbox]:focus-visible + ._3tNyE {
-  outline: #6d87dd solid 1px;
-}
-
-._1ui8X [type=checkbox]:disabled + ._3tNyE {
-  opacity: 0.4;
-  cursor: default;
-}
-
-._1ui8X [type=checkbox]:disabled + ._3tNyE::after {
-  box-shadow: none;
-}
-
-/* checked states */
-._1ui8X [type=checkbox]:checked + ._3tNyE::before {
-  background: #3abda9;
-}
-
-._1ui8X [type=checkbox]:checked + ._3tNyE::after {
-  border-color: #3abda9;
-  left: 21px;
-  right: 2px;
-}
-/*********************************
-For new colours, see _colors.scss.
-**********************************/
-/* stylelint-disable color-no-hex */
-/*
-These are the colour variables to be used around the webapp.
-The variables are set up to describe the color and number which represents the lightness of the color.
-The smaller the number the lighter the color. So $eggplant-100 would be light purple and $eggplant-600 would be dark purple.
-The base colour is the default colour and is numbered with 400. If someone says "use Tangerine" they are referring to the base color.
-Please ask a designer if you have questions about which colours to use.
-*/
 ._2puqJ {
   position: fixed;
   inset: 0px;