carbon-react 146.4.4 → 146.4.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts +5 -1
  2. package/esm/components/date/__internal__/date-picker/date-picker.component.js +7 -2
  3. package/esm/components/date/__internal__/date-picker/day-picker.style.js +1 -1
  4. package/esm/components/date/date.component.d.ts +4 -0
  5. package/esm/components/date/date.component.js +7 -1
  6. package/esm/components/date-range/date-range.component.d.ts +9 -1
  7. package/esm/components/date-range/date-range.component.js +10 -2
  8. package/esm/components/popover-container/popover-container.style.js +1 -3
  9. package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts +5 -1
  10. package/lib/components/date/__internal__/date-picker/date-picker.component.js +7 -2
  11. package/lib/components/date/__internal__/date-picker/day-picker.style.js +1 -1
  12. package/lib/components/date/date.component.d.ts +4 -0
  13. package/lib/components/date/date.component.js +7 -1
  14. package/lib/components/date-range/date-range.component.d.ts +9 -1
  15. package/lib/components/date-range/date-range.component.js +10 -2
  16. package/lib/components/popover-container/popover-container.style.js +1 -3
  17. package/package.json +1 -1
package/esm/components/date/__internal__/date-picker/date-picker.component.d.ts CHANGED
@@ -33,9 +33,13 @@ export interface DatePickerProps {
33
33
  pickerTabGuardId?: string;
34
34
  /** Callback triggered when the picker is closed */
35
35
  onPickerClose?: () => void;
36
+ /** Prop to specify the aria-label attribute of the date picker */
37
+ ariaLabel?: string;
38
+ /** Prop to specify the aria-labelledby attribute of the date picker */
39
+ ariaLabelledBy?: string;
36
40
  }
37
41
  export declare const DatePicker: {
38
- ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, onPickerClose, }: DatePickerProps): React.JSX.Element | null;
42
+ ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, onPickerClose, ariaLabel: datePickerAriaLabel, ariaLabelledBy: datePickerAriaLabelledBy, }: DatePickerProps): React.JSX.Element | null;
39
43
  displayName: string;
40
44
  };
41
45
  export default DatePicker;
package/esm/components/date/__internal__/date-picker/date-picker.component.js CHANGED
@@ -26,7 +26,9 @@ export const DatePicker = ({
26
26
  open,
27
27
  setOpen,
28
28
  pickerTabGuardId,
29
- onPickerClose
29
+ onPickerClose,
30
+ ariaLabel: datePickerAriaLabel,
31
+ ariaLabelledBy: datePickerAriaLabelledBy
30
32
  }) => {
31
33
  const [focusedMonth, setFocusedMonth] = useState(selectedDays || new Date());
32
34
  const locale = useLocale();
@@ -129,7 +131,10 @@ export const DatePicker = ({
129
131
  ref: ref,
130
132
  onMouseDown: pickerMouseDown,
131
133
  onKeyUp: handleKeyUp,
132
- onKeyDown: handleOnKeyDown
134
+ onKeyDown: handleOnKeyDown,
135
+ role: "region",
136
+ "aria-label": datePickerAriaLabel,
137
+ "aria-labelledby": datePickerAriaLabelledBy
133
138
  }, /*#__PURE__*/React.createElement("div", {
134
139
  id: pickerTabGuardId
135
140
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
package/esm/components/date/__internal__/date-picker/day-picker.style.js CHANGED
@@ -302,7 +302,7 @@ const StyledDayPicker = styled.div`
302
302
  ${officialReactDayPickerStyling}
303
303
 
304
304
  .rdp-root {
305
- z-index: 1000;
305
+ z-index: 2000;
306
306
  top: calc(100% + 1px);
307
307
  left: 0;
308
308
  background-color: var(--colorsUtilityYang100);
package/esm/components/date/date.component.d.ts CHANGED
@@ -44,6 +44,10 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
44
44
  onPickerClose?: () => void;
45
45
  /** Date format string to be applied to the date inputs */
46
46
  dateFormatOverride?: string;
47
+ /** Prop to specify the aria-label attribute of the date picker */
48
+ datePickerAriaLabel?: string;
49
+ /** Prop to specify the aria-labelledby attribute of the date picker */
50
+ datePickerAriaLabelledBy?: string;
47
51
  }
48
52
  export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
49
53
  export default DateInput;
package/esm/components/date/date.component.js CHANGED
@@ -41,6 +41,8 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
41
41
  inputName,
42
42
  onPickerClose,
43
43
  onPickerOpen,
44
+ datePickerAriaLabel,
45
+ datePickerAriaLabelledBy,
44
46
  ...rest
45
47
  }, ref) => {
46
48
  const wrapperRef = useRef(null);
@@ -356,7 +358,9 @@ const DateInput = /*#__PURE__*/React.forwardRef(({
356
358
  open: open,
357
359
  setOpen: setOpen,
358
360
  pickerTabGuardId: pickerTabGuardId.current,
359
- onPickerClose: onPickerClose
361
+ onPickerClose: onPickerClose,
362
+ ariaLabel: datePickerAriaLabel,
363
+ ariaLabelledBy: datePickerAriaLabelledBy
360
364
  }));
361
365
  });
362
366
  if (process.env.NODE_ENV !== "production") {
@@ -488,6 +492,8 @@ if (process.env.NODE_ENV !== "production") {
488
492
  "data-role": PropTypes.string,
489
493
  "datatype": PropTypes.string,
490
494
  "dateFormatOverride": PropTypes.string,
495
+ "datePickerAriaLabel": PropTypes.string,
496
+ "datePickerAriaLabelledBy": PropTypes.string,
491
497
  "defaultChecked": PropTypes.bool,
492
498
  "defaultValue": PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.number, PropTypes.string]),
493
499
  "dir": PropTypes.string,
package/esm/components/date-range/date-range.component.d.ts CHANGED
@@ -87,9 +87,17 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
87
87
  isOptional?: boolean;
88
88
  /** Date format string to be applied to the date inputs */
89
89
  dateFormatOverride?: string;
90
+ /** Prop to specify the aria-label attribute of the start date picker */
91
+ datePickerStartAriaLabel?: string;
92
+ /** Prop to specify the aria-labelledby attribute of the start date picker */
93
+ datePickerStartAriaLabelledBy?: string;
94
+ /** Prop to specify the aria-label attribute of the end date picker */
95
+ datePickerEndAriaLabel?: string;
96
+ /** Prop to specify the aria-labelledby attribute of the end date picker */
97
+ datePickerEndAriaLabelledBy?: string;
90
98
  }
91
99
  export declare const DateRange: {
92
- ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;
100
+ ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, datePickerStartAriaLabel, datePickerStartAriaLabelledBy, datePickerEndAriaLabel, datePickerEndAriaLabelledBy, ...rest }: DateRangeProps): React.JSX.Element;
93
101
  displayName: string;
94
102
  };
95
103
  export default DateRange;
package/esm/components/date-range/date-range.component.js CHANGED
@@ -27,6 +27,10 @@ export const DateRange = ({
27
27
  endRef,
28
28
  required,
29
29
  isOptional,
30
+ datePickerStartAriaLabel,
31
+ datePickerStartAriaLabelledBy,
32
+ datePickerEndAriaLabel,
33
+ datePickerEndAriaLabelledBy,
30
34
  ...rest
31
35
  }) => {
32
36
  const {
@@ -215,7 +219,9 @@ export const DateRange = ({
215
219
  labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
216
220
  ,
217
221
  tooltipPosition: tooltipPosition,
218
- ref: startRef
222
+ ref: startRef,
223
+ datePickerAriaLabel: datePickerStartAriaLabel,
224
+ datePickerAriaLabelledBy: datePickerStartAriaLabelledBy
219
225
  })), /*#__PURE__*/React.createElement(DateInput, _extends({
220
226
  my: 0 // prevents any form spacing being applied
221
227
  }, dateProps("end"), {
@@ -225,7 +231,9 @@ export const DateRange = ({
225
231
  labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
226
232
  ,
227
233
  tooltipPosition: tooltipPosition,
228
- ref: endRef
234
+ ref: endRef,
235
+ datePickerAriaLabel: datePickerEndAriaLabel,
236
+ datePickerAriaLabelledBy: datePickerEndAriaLabelledBy
229
237
  }))));
230
238
  };
231
239
  DateRange.displayName = "DateRange";
package/esm/components/popover-container/popover-container.style.js CHANGED
@@ -22,9 +22,7 @@ const PopoverContainerContentStyle = styled.div`
22
22
  box-shadow: var(--boxShadow100);
23
23
  min-width: 300px;
24
24
  position: absolute;
25
- z-index: ${({
26
- theme
27
- }) => theme.zIndex.popover};
25
+ z-index: 2000;
28
26
 
29
27
  ${({
30
28
  disableAnimation
package/lib/components/date/__internal__/date-picker/date-picker.component.d.ts CHANGED
@@ -33,9 +33,13 @@ export interface DatePickerProps {
33
33
  pickerTabGuardId?: string;
34
34
  /** Callback triggered when the picker is closed */
35
35
  onPickerClose?: () => void;
36
+ /** Prop to specify the aria-label attribute of the date picker */
37
+ ariaLabel?: string;
38
+ /** Prop to specify the aria-labelledby attribute of the date picker */
39
+ ariaLabelledBy?: string;
36
40
  }
37
41
  export declare const DatePicker: {
38
- ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, onPickerClose, }: DatePickerProps): React.JSX.Element | null;
42
+ ({ inputElement, minDate, maxDate, selectedDays, disablePortal, onDayClick, pickerMouseDown, pickerProps, open, setOpen, pickerTabGuardId, onPickerClose, ariaLabel: datePickerAriaLabel, ariaLabelledBy: datePickerAriaLabelledBy, }: DatePickerProps): React.JSX.Element | null;
39
43
  displayName: string;
40
44
  };
41
45
  export default DatePicker;
package/lib/components/date/__internal__/date-picker/date-picker.component.js CHANGED
@@ -35,7 +35,9 @@ const DatePicker = ({
35
35
  open,
36
36
  setOpen,
37
37
  pickerTabGuardId,
38
- onPickerClose
38
+ onPickerClose,
39
+ ariaLabel: datePickerAriaLabel,
40
+ ariaLabelledBy: datePickerAriaLabelledBy
39
41
  }) => {
40
42
  const [focusedMonth, setFocusedMonth] = (0, _react.useState)(selectedDays || new Date());
41
43
  const locale = (0, _useLocale.default)();
@@ -138,7 +140,10 @@ const DatePicker = ({
138
140
  ref: ref,
139
141
  onMouseDown: pickerMouseDown,
140
142
  onKeyUp: handleKeyUp,
141
- onKeyDown: handleOnKeyDown
143
+ onKeyDown: handleOnKeyDown,
144
+ role: "region",
145
+ "aria-label": datePickerAriaLabel,
146
+ "aria-labelledby": datePickerAriaLabelledBy
142
147
  }, /*#__PURE__*/_react.default.createElement("div", {
143
148
  id: pickerTabGuardId
144
149
  // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
package/lib/components/date/__internal__/date-picker/day-picker.style.js CHANGED
@@ -311,7 +311,7 @@ const StyledDayPicker = _styledComponents.default.div`
311
311
  ${officialReactDayPickerStyling}
312
312
 
313
313
  .rdp-root {
314
- z-index: 1000;
314
+ z-index: 2000;
315
315
  top: calc(100% + 1px);
316
316
  left: 0;
317
317
  background-color: var(--colorsUtilityYang100);
package/lib/components/date/date.component.d.ts CHANGED
@@ -44,6 +44,10 @@ export interface DateInputProps extends Omit<TextboxProps, "value" | "formattedV
44
44
  onPickerClose?: () => void;
45
45
  /** Date format string to be applied to the date inputs */
46
46
  dateFormatOverride?: string;
47
+ /** Prop to specify the aria-label attribute of the date picker */
48
+ datePickerAriaLabel?: string;
49
+ /** Prop to specify the aria-labelledby attribute of the date picker */
50
+ datePickerAriaLabelledBy?: string;
47
51
  }
48
52
  export declare const DateInput: React.ForwardRefExoticComponent<DateInputProps & React.RefAttributes<HTMLInputElement>>;
49
53
  export default DateInput;
package/lib/components/date/date.component.js CHANGED
@@ -50,6 +50,8 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
50
50
  inputName,
51
51
  onPickerClose,
52
52
  onPickerOpen,
53
+ datePickerAriaLabel,
54
+ datePickerAriaLabelledBy,
53
55
  ...rest
54
56
  }, ref) => {
55
57
  const wrapperRef = (0, _react.useRef)(null);
@@ -365,7 +367,9 @@ const DateInput = exports.DateInput = /*#__PURE__*/_react.default.forwardRef(({
365
367
  open: open,
366
368
  setOpen: setOpen,
367
369
  pickerTabGuardId: pickerTabGuardId.current,
368
- onPickerClose: onPickerClose
370
+ onPickerClose: onPickerClose,
371
+ ariaLabel: datePickerAriaLabel,
372
+ ariaLabelledBy: datePickerAriaLabelledBy
369
373
  }));
370
374
  });
371
375
  if (process.env.NODE_ENV !== "production") {
@@ -497,6 +501,8 @@ if (process.env.NODE_ENV !== "production") {
497
501
  "data-role": _propTypes.default.string,
498
502
  "datatype": _propTypes.default.string,
499
503
  "dateFormatOverride": _propTypes.default.string,
504
+ "datePickerAriaLabel": _propTypes.default.string,
505
+ "datePickerAriaLabelledBy": _propTypes.default.string,
500
506
  "defaultChecked": _propTypes.default.bool,
501
507
  "defaultValue": _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.number, _propTypes.default.string]),
502
508
  "dir": _propTypes.default.string,
package/lib/components/date-range/date-range.component.d.ts CHANGED
@@ -87,9 +87,17 @@ export interface DateRangeProps extends StyledDateRangeProps, MarginProps, TagPr
87
87
  isOptional?: boolean;
88
88
  /** Date format string to be applied to the date inputs */
89
89
  dateFormatOverride?: string;
90
+ /** Prop to specify the aria-label attribute of the start date picker */
91
+ datePickerStartAriaLabel?: string;
92
+ /** Prop to specify the aria-labelledby attribute of the start date picker */
93
+ datePickerStartAriaLabelledBy?: string;
94
+ /** Prop to specify the aria-label attribute of the end date picker */
95
+ datePickerEndAriaLabel?: string;
96
+ /** Prop to specify the aria-labelledby attribute of the end date picker */
97
+ datePickerEndAriaLabelledBy?: string;
90
98
  }
91
99
  export declare const DateRange: {
92
- ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, ...rest }: DateRangeProps): React.JSX.Element;
100
+ ({ endDateProps, id, labelsInline, name, onBlur, onChange, startDateProps, tooltipPosition, validationOnLabel, value, startRef, endRef, required, isOptional, datePickerStartAriaLabel, datePickerStartAriaLabelledBy, datePickerEndAriaLabel, datePickerEndAriaLabelledBy, ...rest }: DateRangeProps): React.JSX.Element;
93
101
  displayName: string;
94
102
  };
95
103
  export default DateRange;
package/lib/components/date-range/date-range.component.js CHANGED
@@ -36,6 +36,10 @@ const DateRange = ({
36
36
  endRef,
37
37
  required,
38
38
  isOptional,
39
+ datePickerStartAriaLabel,
40
+ datePickerStartAriaLabelledBy,
41
+ datePickerEndAriaLabel,
42
+ datePickerEndAriaLabelledBy,
39
43
  ...rest
40
44
  }) => {
41
45
  const {
@@ -224,7 +228,9 @@ const DateRange = ({
224
228
  labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
225
229
  ,
226
230
  tooltipPosition: tooltipPosition,
227
- ref: startRef
231
+ ref: startRef,
232
+ datePickerAriaLabel: datePickerStartAriaLabel,
233
+ datePickerAriaLabelledBy: datePickerStartAriaLabelledBy
228
234
  })), /*#__PURE__*/_react.default.createElement(_date.default, _extends({
229
235
  my: 0 // prevents any form spacing being applied
230
236
  }, dateProps("end"), {
@@ -234,7 +240,9 @@ const DateRange = ({
234
240
  labelWidth: inlineLabelWidth // Textbox only applies this when labelsInLine prop is true
235
241
  ,
236
242
  tooltipPosition: tooltipPosition,
237
- ref: endRef
243
+ ref: endRef,
244
+ datePickerAriaLabel: datePickerEndAriaLabel,
245
+ datePickerAriaLabelledBy: datePickerEndAriaLabelledBy
238
246
  }))));
239
247
  };
240
248
  exports.DateRange = DateRange;
package/lib/components/popover-container/popover-container.style.js CHANGED
@@ -31,9 +31,7 @@ const PopoverContainerContentStyle = exports.PopoverContainerContentStyle = _sty
31
31
  box-shadow: var(--boxShadow100);
32
32
  min-width: 300px;
33
33
  position: absolute;
34
- z-index: ${({
35
- theme
36
- }) => theme.zIndex.popover};
34
+ z-index: 2000;
37
35
 
38
36
  ${({
39
37
  disableAnimation
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "carbon-react",
3
- "version": "146.4.4",
3
+ "version": "146.4.6",
4
4
  "description": "A library of reusable React components for easily building user interfaces.",
5
5
  "files": [
6
6
  "lib",