@7shifts/sous-chef 3.20.1-beta.2 → 3.20.1-beta.3

package/dist/controls/DateFilter/DateFilterDisplay/DateFilterDisplay.d.ts

@@ -1,3 +1,4 @@
+import React from 'react';
 import { WeekStart } from '../../../utils/date';
 import { DateFilterMode } from '../types';
 declare type Props = {
@@ -6,5 +7,5 @@ declare type Props = {
     weekStart: WeekStart;
     onClick: () => void;
 };
-declare const DateFilterDisplay: ({ mode, selectedDate, weekStart, onClick }: Props) => JSX.Element;
+declare const DateFilterDisplay: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLButtonElement>>;
 export default DateFilterDisplay;

package/dist/index.css

@@ -1533,7 +1533,7 @@ h5._3CIA3 {
   font-weight: 700;
 }
 
-._1hBvL._1hBvL._1hBvL._1hBvL {
+._1hBvL._1hBvL {
   color: var(--color-grey-300);
 }
 
@@ -1612,7 +1612,7 @@ h5._3CIA3 {
   font-weight: 700;
 }
 
-._3kzmn._3kzmn._3kzmn._3kzmn {
+._3kzmn._3kzmn {
   color: var(--color-grey-300);
 }
 
@@ -1977,7 +1977,7 @@ input:disabled + ._2mA8e::after {
   outline: none;
 }
 ._18V8V {
-  width: 264px;
+  width: 277px;
 }
 ._2v9v_ {
   height: 18px;
@@ -2623,7 +2623,7 @@ input:disabled + ._1tMq-::after {
   font-weight: 700;
 }
 
-._2t43r._2t43r._2t43r._2t43r {
+._2t43r._2t43r {
   color: var(--color-grey-300);
 }
 

package/dist/index.js

@@ -7474,7 +7474,7 @@ var DateFilterText = function DateFilterText(_ref) {
     case DATE_FILTER_MODE.WEEK:
       var weekRange = createWeekRange(selectedDate, weekStart);
       return React__default.createElement(Inline, {
-        space: 12
+        space: 16
       }, React__default.createElement("span", null, getDateString(weekRange.start, mode)), React__default.createElement(IconArrowRight, {
         size: "small",
         color: "grey-400"
@@ -7485,7 +7485,7 @@ var DateFilterText = function DateFilterText(_ref) {
   }
 };
 
-var DateFilterDisplay = function DateFilterDisplay(_ref) {
+var DateFilterDisplay = React.forwardRef(function (_ref, ref) {
   var _classnames;
 
   var mode = _ref.mode,
@@ -7495,7 +7495,8 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
   return React__default.createElement("button", {
     className: classnames(styles$G['date-filter-display'], (_classnames = {}, _classnames[styles$G['date-filter-display--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames[styles$G['date-filter-display--non-interactive']] = mode === DATE_FILTER_MODE.MONTH, _classnames)),
     onClick: onClick,
-    tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined
+    tabIndex: mode === DATE_FILTER_MODE.MONTH ? -1 : undefined,
+    ref: ref
   }, React__default.createElement(Inline, {
     space: 12,
     alignItems: "center"
@@ -7509,7 +7510,7 @@ var DateFilterDisplay = function DateFilterDisplay(_ref) {
     selectedDate: selectedDate,
     weekStart: weekStart
   })));
-};
+});
 
 var styles$H = {"date-stepper":"_s8MoI","date-stepper--backward":"_34Yoi","date-stepper--forward":"_BeWpb"};
 
@@ -7576,7 +7577,6 @@ var DateFilter = function DateFilter(_ref) {
 
   return React__default.createElement("div", {
     "data-testid": testId,
-    ref: calendarAnchorRef,
     className: classnames(styles$F['date-filter'], (_classnames = {}, _classnames[styles$F['date-filter--wide']] = mode === DATE_FILTER_MODE.WEEK, _classnames))
   }, React__default.createElement(Inline, {
     space: 0
@@ -7596,7 +7596,8 @@ var DateFilter = function DateFilter(_ref) {
       return setCalendarOpen(function (prevState) {
         return !prevState;
       });
-    }
+    },
+    ref: calendarAnchorRef
   }), React__default.createElement(DateFilterStepper, {
     mode: mode,
     stepDirection: STEP_DIRECTION.FORWARD,