@7shifts/sous-chef 1.5.0 → 1.5.4

package/CHANGELOG.md

@@ -1,3 +1,31 @@
+## 1.5.4 (January 10th, 2021)
+
+### Enhancements
+
+-   MultiSelectField: Added new prop closeOnSelect which is set to false by default in order for the dropdown to stay open while selecting options. ([#71](https://github.com/7shifts/sous-chef/pull/71))
+
+## 1.5.3 (December 13th, 2021)
+
+### Enhancements
+
+-   Button: Updated link button themes to have proper one shade darker color (excluding contrast, icon, and toolbar theme) on hover. ([#70](https://github.com/7shifts/sous-chef/pull/70))
+
+## 1.5.2 (November 10th, 2021)
+
+### Enhancements
+
+-   PasswordField: Updated met criteria bullet to IconCheck to be consistent with mobile ([#69](https://github.com/7shifts/sous-chef/pull/69))
+
+### New Components
+
+- IconCheck: added for now to use in PasswordCriteria. ([#69](https://github.com/7shifts/sous-chef/pull/69))
+
+## 1.5.1 (October 20th, 2021)
+
+### Bug fixes
+
+-   DataTable: Exported `DataTableCustomComponent` type ([#67](https://github.com/7shifts/sous-chef/pull/67))
+
 ## 1.5.0 (October 19th, 2021)
 
 ### New components

package/dist/core/ResourceTable/types.js.flow

@@ -12,20 +12,21 @@ export type Column = {
     size?: number,
     isSortable?: boolean,
     currentSort?: SortDirection,
+    isRightAligned?: boolean
 };
 export type SortDirection = 'asc' | 'desc' | null;
 export type Sort = {
     columnName: string,
-    direction: SortDirection,
+    direction: SortDirection
 };
 export type Item<T> = T | (T & { actions?: Action[] });
 export type CustomComponent<T> = {
     item: Item<T>,
     index: number,
     columnSizes?: number[],
-    columns?: Column[],
+    columns?: Column[]
 };
 export type Action = {
     label: React$Node,
-    onAction: () => void,
+    onAction: () => void
 };

package/dist/core/index.d.ts

@@ -9,4 +9,4 @@ 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 } from './DataTable/types';
+export type { Column as DataTableColumn, CustomComponent as DataTableCustomComponent } from './DataTable/types';

package/dist/core/index.js.flow

@@ -5,25 +5,35 @@
  * @flow
  */
 
-import ResourceTable from "./ResourceTable";
-import ResourceTableRow from "./ResourceTableRow";
-import Inline from "./Inline";
-import Stack from "./Stack";
-import DataTable from "./DataTable"
-import DataTableRow from "./DataTableRow";
-import DataTableCell from "./DataTableCell";
-import DataTableEditableCell from "./DataTableEditableCell";
+import ResourceTable from './ResourceTable';
+import ResourceTableRow from './ResourceTableRow';
+import Inline from './Inline';
+import Stack from './Stack';
+import DataTable from './DataTable';
+import DataTableRow from './DataTableRow';
+import DataTableCell from './DataTableCell';
+import DataTableEditableCell from './DataTableEditableCell';
 
-declare export { ResourceTable, ResourceTableRow, Inline, Stack, DataTable, DataTableRow, DataTableCell, DataTableEditableCell };
-export type { AlignItems, FlexWrap, JustifyContent } from "./Flex/types";
+declare 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";
+    CustomComponent,
+    Column,
+    SortDirection,
+    Sort,
+    Action
+} from './ResourceTable/types';
 
 export type {
-  Column as DataTableColumn
-} from "./DataTable/types";
+    Column as DataTableColumn,
+    CustomComponent as DataTableCustomComponent
+} from './DataTable/types';

package/dist/forms/DatePickerField/DatePickerField.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+declare type Props = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: Date;
+    disabledDays?: (day: Date) => boolean;
+    /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
+    format?: string;
+    initialMonth?: Date;
+    onChange?: (e: Date) => void;
+    onBlur?: () => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    defaultValue?: Date;
+    readOnly?: boolean;
+};
+/** DatePickerField form element. */
+declare const DatePickerField: React.FC<Props>;
+export default DatePickerField;

package/dist/forms/DatePickerField/DatePickerField.js.flow

@@ -0,0 +1,35 @@
+/**
+ * Flowtype definitions for DatePickerField
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+import * as React from 'react';
+declare type Props = {
+    name: string,
+
+    /**
+     * If not provided it will generate a random id so the label links properly with the text input
+     */
+    id?: string,
+    value?: Date,
+    disabledDays?: (day: Date) => boolean,
+
+    /**
+     * Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format
+     */
+    format?: string,
+    initialMonth?: Date,
+    onChange?: (e: Date) => void,
+    onBlur?: () => void,
+    label?: React$Node,
+    caption?: React$Node,
+    error?: string,
+    placeholder?: string,
+    disabled?: boolean,
+    defaultValue?: Date,
+    readOnly?: boolean,
+};
+declare var DatePickerField: (props: Props) => React$Node;
+declare export default typeof DatePickerField;

package/dist/forms/DatePickerField/index.d.ts

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

package/dist/forms/DatePickerField/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+declare export { default } from "./DatePickerField";

package/dist/forms/MultiSelectField/MultiSelectField.d.ts

@@ -14,7 +14,8 @@ declare type Props<T> = {
     error?: string;
     placeholder?: string;
     disabled?: boolean;
+    closeOnSelect?: boolean;
 };
 /** Component to make possible choose from a predefined options. */
-declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, disabled }: Props<T>) => JSX.Element;
+declare const MultiSelectField: <T extends unknown>({ name, id: inputId, value, options, onChange, onBlur, CustomOption: UserCustomOption, label, caption, error, placeholder, disabled, closeOnSelect }: Props<T>) => JSX.Element;
 export default MultiSelectField;

package/dist/forms/WeekPickerField/WeekPickerField.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { WeekStart } from '../../utils/date';
+declare type Props = {
+    name: string;
+    /** If not provided it will generate a random id so the label links properly with the text input */
+    id?: string;
+    value?: Date;
+    disabledDays?: (day: Date) => boolean;
+    /** Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format */
+    format?: string;
+    initialMonth?: Date;
+    onChange?: (e: Date) => void;
+    onBlur?: () => void;
+    label?: React.ReactNode;
+    caption?: React.ReactNode;
+    error?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    defaultValue?: Date;
+    readOnly?: boolean;
+    weekStart?: WeekStart;
+};
+/** WeekPickerField form element. */
+declare const WeekPickerField: React.FC<Props>;
+export default WeekPickerField;

package/dist/forms/WeekPickerField/WeekPickerField.js.flow

@@ -0,0 +1,35 @@
+/**
+ * Flowtype definitions for DatePickerField
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+import * as React from 'react';
+declare type Props = {
+    name: string,
+
+    /**
+     * If not provided it will generate a random id so the label links properly with the text input
+     */
+    id?: string,
+    value?: Date,
+    disabledDays?: (day: Date) => boolean,
+
+    /**
+     * Reference this for valid formats: https://date-fns.org/v2.18.0/docs/format
+     */
+    format?: string,
+    initialMonth?: Date,
+    onChange?: (e: Date) => void,
+    onBlur?: () => void,
+    label?: React$Node,
+    caption?: React$Node,
+    error?: string,
+    placeholder?: string,
+    disabled?: boolean,
+    defaultValue?: Date,
+    readOnly?: boolean,
+};
+declare var WeekPickerField: (props: Props) => React$Node;
+declare export default typeof WeekPickerField;

package/dist/forms/WeekPickerField/index.d.ts

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

package/dist/forms/WeekPickerField/index.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for index
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+declare export { default } from './WeekPickerField';

package/dist/icons/{components/IconCheck.d.ts → IconCheck.d.ts}

@@ -1,8 +1,9 @@
 import React from 'react';
-import { IconSize } from '../types';
+import { Color } from '../foundation/colors';
+import { IconSize } from './types';
 declare type Props = {
     size?: IconSize;
-    color?: string;
-} & React.SVGProps<SVGSVGElement>;
+    color?: Color;
+};
 declare const IconCheck: React.FC<Props>;
 export default IconCheck;

package/dist/icons/IconCheck.js.flow

@@ -0,0 +1,17 @@
+/**
+ * Flowtype definitions for Button
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.14.1
+ * @flow
+ */
+
+ import * as React from 'react';
+ import type { Color } from '../foundation/colors';
+ import type { IconSize } from '../types';
+ 
+ declare type Props = {
+     size?: IconSize,
+     color?: Color,
+ };
+ declare var IconCheck: (props: Props) => React$Node;
+ declare export default typeof IconCheck;

package/dist/icons/{components/IconUser.js.flow → IconUser.flow}

@@ -6,11 +6,12 @@
  */
 
 import * as React from 'react';
+import type { Color } from '../foundation/colors';
 import type { IconSize } from '../types';
 
 declare type Props = {
     size?: IconSize,
-    color?: string
+    color?: Color
 };
 declare var IconUser: (props: Props) => React$Node;
-declare export default typeof IconUser;
+declare export default typeof IconEdit;

package/dist/icons/index.d.ts

@@ -3,6 +3,7 @@ import IconArrowLeft from './IconArrowLeft';
 import IconArrowRight from './IconArrowRight';
 import IconArrowUp from './IconArrowUp';
 import IconCalendar from './IconCalendar';
+import IconCheck from './IconCheck';
 import IconChevronDown from './IconChevronDown';
 import IconChevronUp from './IconChevronUp';
 import IconClose from './IconClose';
@@ -18,4 +19,4 @@ import IconMore from './IconMore';
 import IconRemove from './IconRemove';
 import IconUser from './IconUser';
 import IconUserPlus from './IconUserPlus';
-export { IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconCalendar, IconChevronDown, IconChevronUp, IconClose, IconComment, IconDelete, IconEdit, IconEye, IconEyeSlash, IconExclaim, IconLocation, IconMinusCircle, IconMore, IconRemove, IconUser, IconUserPlus };
+export { IconArrowDown, IconArrowLeft, IconArrowRight, IconArrowUp, IconCalendar, IconCheck, IconChevronDown, IconChevronUp, IconClose, IconComment, IconDelete, IconEdit, IconEye, IconEyeSlash, IconExclaim, IconLocation, IconMinusCircle, IconMore, IconRemove, IconUser, IconUserPlus };

package/dist/icons/index.js.flow

@@ -10,6 +10,7 @@ import IconArrowLeft from './IconArrowLeft';
 import IconArrowRight from './IconArrowRight';
 import IconArrowUp from './IconArrowUp';
 import IconCalendar from './IconCalendar';
+import IconCheck from './IconCheck';
 import IconChevronDown from './IconChevronDown';
 import IconChevronUp from './IconChevronUp';
 import IconComment from './IconComment';
@@ -31,6 +32,7 @@ declare export {
     IconArrowRight,
     IconArrowUp,
     IconCalendar,
+    IconCheck,
     IconChevronDown,
     IconChevronUp,
     IconComment,

package/dist/index.css

@@ -417,7 +417,7 @@ Please ask a designer if you have questions about which colours to use.
   ._23S36:hover {
     background: rgba(0, 0, 0, 0.03);
     border-color: #f8f8f8;
-    color: #5bc0de; }
+    color: #51acc7; }
   ._23S36:disabled {
     background: transparent;
     border-color: transparent;
@@ -434,7 +434,7 @@ Please ask a designer if you have questions about which colours to use.
   ._2CzxI:hover {
     background: rgba(0, 0, 0, 0.03);
     border-color: #f8f8f8;
-    color: #e76767; }
+    color: #cf5c5c; }
   ._2CzxI:disabled {
     background: transparent;
     border-color: transparent;
@@ -451,7 +451,7 @@ Please ask a designer if you have questions about which colours to use.
   ._21e4m:hover {
     background: rgba(0, 0, 0, 0.03);
     border-color: #f8f8f8;
-    color: #6d87dd; }
+    color: #6179c6; }
   ._21e4m:disabled {
     background: transparent;
     border-color: transparent;

package/dist/index.js

@@ -88,6 +88,22 @@ var IconCalendar = function IconCalendar(_ref) {
   })));
 };
 
+var IconCheck = function IconCheck(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'default' : _ref$size,
+      color = _ref.color;
+  return React__default.createElement("svg", {
+    viewBox: "0 0 20 20",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: getIconStyles(size),
+    "data-testid": "icon-check",
+    className: styles['icon']
+  }, React__default.createElement("g", null, React__default.createElement("path", {
+    fill: color != null ? color : '',
+    d: "M7.32398 16.832C6.99989 17.1535 6.47654 17.1514 6.15507 16.8273L0.239745 10.8642C-0.0817202 10.5401 -0.0796538 10.0168 0.244429 9.69531L0.831292 9.1132C1.15538 8.79173 1.67873 8.7938 2.0002 9.11788L6.7513 13.9074L18.0092 2.73975C18.3333 2.41828 18.8567 2.42035 19.1781 2.74443L19.7602 3.33129C20.0818 3.65538 20.0796 4.17873 19.7555 4.5002L7.32398 16.832Z"
+  })));
+};
+
 var IconChevronDown = function IconChevronDown(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'small' : _ref$size,
@@ -2493,7 +2509,12 @@ var PasswordCriteria = function PasswordCriteria(_ref) {
       children = _ref.children;
   return React__default.createElement("span", {
     className: classnames(styles$q['password-criteria'], (_classnames = {}, _classnames[styles$q['password-criteria--invalid']] = !met, _classnames))
-  }, "\u25CF ", children);
+  }, React__default.createElement(Inline, {
+    space: met ? 4 : 8
+  }, met ? React__default.createElement(IconCheck, {
+    size: "small",
+    color: GREY200
+  }) : "\u25CF", children));
 };
 
 var usePasswordCriteria = function usePasswordCriteria(criterias) {
@@ -2736,7 +2757,9 @@ var MultiSelectField = function MultiSelectField(_ref) {
       caption = _ref.caption,
       error = _ref.error,
       placeholder = _ref.placeholder,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      _ref$closeOnSelect = _ref.closeOnSelect,
+      closeOnSelect = _ref$closeOnSelect === void 0 ? false : _ref$closeOnSelect;
   var controllers = useMultiSelectFieldControllers({
     name: name,
     id: inputId,
@@ -2767,6 +2790,7 @@ var MultiSelectField = function MultiSelectField(_ref) {
     onChange: controllers.onChange,
     onBlur: controllers.onBlur,
     isMulti: true,
+    closeMenuOnSelect: closeOnSelect,
     components: {
       Option: UserCustomOption ? function (props) {
         return React__default.createElement(CustomOption, Object.assign({
@@ -3844,6 +3868,7 @@ exports.IconArrowLeft = IconArrowLeft;
 exports.IconArrowRight = IconArrowRight;
 exports.IconArrowUp = IconArrowUp;
 exports.IconCalendar = IconCalendar;
+exports.IconCheck = IconCheck;
 exports.IconChevronDown = IconChevronDown;
 exports.IconChevronUp = IconChevronUp;
 exports.IconClose = IconClose;