carbon-react 106.6.9 → 106.6.10

package/esm/components/date/__internal__/date-picker/date-picker.component.js

@@ -17,7 +17,8 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   disablePortal,
   onDayClick,
   pickerMouseDown,
-  pickerProps
+  pickerProps,
+  open
 }, ref) => {
   const l = useLocale();
   const {
@@ -27,22 +28,27 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
   const {
     weekStartsOn
   } = options;
-  const monthsLong = Array.from({
+  const monthsLong = useMemo(() => Array.from({
     length: 12
-  }).map((_, i) => localize.month(i));
-  const monthsShort = Array.from({
+  }).map((_, i) => {
+    const month = localize.month(i);
+    return month[0].toUpperCase() + month.slice(1);
+  }), [localize]);
+  const monthsShort = useMemo(() => Array.from({
     length: 12
   }).map((_, i) => localize.month(i, {
     width: "abbreviated"
-  }).substring(0, 3));
-  const weekdaysLong = Array.from({
+  }).substring(0, 3)), [localize]);
+  const weekdaysLong = useMemo(() => Array.from({
     length: 7
-  }).map((_, i) => localize.day(i));
-  const weekdaysShort = Array.from({
+  }).map((_, i) => localize.day(i)), [localize]);
+  const weekdaysShort = useMemo(() => Array.from({
     length: 7
-  }).map((_, i) => localize.day(i, l.locale() === "de" ? {} : {
+  }).map((_, i) => localize.day(i, ["de", "pl"].filter(str => l.locale().includes(str)).length ? {
+    width: "wide"
+  } : {
     width: "abbreviated"
-  }).substring(0, 3));
+  }).substring(0, 3)), [l, localize]);
   const popoverModifiers = useMemo(() => [{
     name: "offset",
     options: {
@@ -65,6 +71,10 @@ const DatePicker = /*#__PURE__*/React.forwardRef(({
 
   const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
 
+  if (!open) {
+    return null;
+  }
+
   return /*#__PURE__*/React.createElement(Popover, {
     placement: "bottom-start",
     reference: inputElement,
@@ -125,6 +135,9 @@ DatePicker.propTypes = {
   pickerProps: PropTypes.object,
 
   /** Callback to handle mousedown event on picker */
-  pickerMouseDown: PropTypes.func
+  pickerMouseDown: PropTypes.func,
+
+  /** Sets whether the picker should be displayed */
+  open: PropTypes.bool
 };
 export default DatePicker;

package/esm/components/date/__internal__/date-picker/date-picker.d.ts

@@ -16,6 +16,8 @@ export interface DatePickerProps extends Pick<DayPickerProps, "onDayClick"> {
   selectedDays?: Date;
   /** Callback to handle mousedown event on picker container */
   pickerMouseDown?: () => void;
+  /** Sets whether the picker should be displayed */
+  open?: boolean;
 }
 
 declare function DatePicker(

package/esm/components/date/date.component.js

@@ -310,7 +310,7 @@ const DateInput = ({
     size: size,
     disabled: disabled,
     readOnly: readOnly
-  })), open && /*#__PURE__*/React.createElement(DatePicker, {
+  })), /*#__PURE__*/React.createElement(DatePicker, {
     disablePortal: disablePortal,
     inputElement: parentRef,
     pickerProps: pickerProps,
@@ -320,7 +320,8 @@ const DateInput = ({
     minDate: minDate,
     maxDate: maxDate,
     ref: pickerRef,
-    pickerMouseDown: handlePickerMouseDown
+    pickerMouseDown: handlePickerMouseDown,
+    open: open
   }));
 };
 

package/lib/components/date/__internal__/date-picker/date-picker.component.js

@@ -39,7 +39,8 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
   disablePortal,
   onDayClick,
   pickerMouseDown,
-  pickerProps
+  pickerProps,
+  open
 }, ref) => {
   const l = (0, _useLocale.default)();
   const {
@@ -49,22 +50,27 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
   const {
     weekStartsOn
   } = options;
-  const monthsLong = Array.from({
+  const monthsLong = (0, _react.useMemo)(() => Array.from({
     length: 12
-  }).map((_, i) => localize.month(i));
-  const monthsShort = Array.from({
+  }).map((_, i) => {
+    const month = localize.month(i);
+    return month[0].toUpperCase() + month.slice(1);
+  }), [localize]);
+  const monthsShort = (0, _react.useMemo)(() => Array.from({
     length: 12
   }).map((_, i) => localize.month(i, {
     width: "abbreviated"
-  }).substring(0, 3));
-  const weekdaysLong = Array.from({
+  }).substring(0, 3)), [localize]);
+  const weekdaysLong = (0, _react.useMemo)(() => Array.from({
     length: 7
-  }).map((_, i) => localize.day(i));
-  const weekdaysShort = Array.from({
+  }).map((_, i) => localize.day(i)), [localize]);
+  const weekdaysShort = (0, _react.useMemo)(() => Array.from({
     length: 7
-  }).map((_, i) => localize.day(i, l.locale() === "de" ? {} : {
+  }).map((_, i) => localize.day(i, ["de", "pl"].filter(str => l.locale().includes(str)).length ? {
+    width: "wide"
+  } : {
     width: "abbreviated"
-  }).substring(0, 3));
+  }).substring(0, 3)), [l, localize]);
   const popoverModifiers = (0, _react.useMemo)(() => [{
     name: "offset",
     options: {
@@ -87,6 +93,10 @@ const DatePicker = /*#__PURE__*/_react.default.forwardRef(({
 
   const formatDay = date => `${weekdaysShort[date.getDay()]} ${date.getDate()} ${monthsShort[date.getMonth()]} ${date.getFullYear()}`;
 
+  if (!open) {
+    return null;
+  }
+
   return /*#__PURE__*/_react.default.createElement(_popover.default, {
     placement: "bottom-start",
     reference: inputElement,
@@ -148,7 +158,10 @@ DatePicker.propTypes = {
   pickerProps: _propTypes.default.object,
 
   /** Callback to handle mousedown event on picker */
-  pickerMouseDown: _propTypes.default.func
+  pickerMouseDown: _propTypes.default.func,
+
+  /** Sets whether the picker should be displayed */
+  open: _propTypes.default.bool
 };
 var _default = DatePicker;
 exports.default = _default;

package/lib/components/date/__internal__/date-picker/date-picker.d.ts

@@ -16,6 +16,8 @@ export interface DatePickerProps extends Pick<DayPickerProps, "onDayClick"> {
   selectedDays?: Date;
   /** Callback to handle mousedown event on picker container */
   pickerMouseDown?: () => void;
+  /** Sets whether the picker should be displayed */
+  open?: boolean;
 }
 
 declare function DatePicker(

package/lib/components/date/date.component.js

@@ -335,7 +335,7 @@ const DateInput = ({
     size: size,
     disabled: disabled,
     readOnly: readOnly
-  })), open && /*#__PURE__*/_react.default.createElement(_datePicker.default, {
+  })), /*#__PURE__*/_react.default.createElement(_datePicker.default, {
     disablePortal: disablePortal,
     inputElement: parentRef,
     pickerProps: pickerProps,
@@ -345,7 +345,8 @@ const DateInput = ({
     minDate: minDate,
     maxDate: maxDate,
     ref: pickerRef,
-    pickerMouseDown: handlePickerMouseDown
+    pickerMouseDown: handlePickerMouseDown,
+    open: open
   }));
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "106.6.9",
+  "version": "106.6.10",
   "description": "A library of reusable React components for easily building user interfaces.",
   "engineStrict": true,
   "engines": {