@instructure/ui-date-input 10.8.0 → 10.8.1-snapshot-2

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/CHANGELOG.md +11 -0
  2. package/es/DateInput2/__new-tests__/DateInput2.test.js +26 -7
  3. package/es/DateInput2/index.js +3 -2
  4. package/es/DateInput2/props.js +2 -1
  5. package/lib/DateInput2/__new-tests__/DateInput2.test.js +26 -7
  6. package/lib/DateInput2/index.js +3 -1
  7. package/lib/DateInput2/props.js +2 -1
  8. package/package.json +23 -23
  9. package/src/DateInput2/__new-tests__/DateInput2.test.tsx +22 -0
  10. package/src/DateInput2/index.tsx +7 -2
  11. package/src/DateInput2/props.ts +7 -1
  12. package/tsconfig.build.tsbuildinfo +1 -1
  13. package/types/DateInput/index.d.ts.map +1 -1
  14. package/types/DateInput2/index.d.ts +2 -1
  15. package/types/DateInput2/index.d.ts.map +1 -1
  16. package/types/DateInput2/props.d.ts +4 -0
  17. package/types/DateInput2/props.d.ts.map +1 -1
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [10.8.1-snapshot-2](https://github.com/instructure/instructure-ui/compare/v10.8.0...v10.8.1-snapshot-2) (2024-12-11)
7
+
8
+
9
+ ### Features
10
+
11
+ * **ui-date-input:** add support for custom calendar icon ([a0fff9d](https://github.com/instructure/instructure-ui/commit/a0fff9dc8ab96c45f1cb9bf2d4a49d8ba03b7b2b))
12
+
13
+
14
+
15
+
16
+
6
17
  # [10.8.0](https://github.com/instructure/instructure-ui/compare/v10.7.0...v10.8.0) (2024-12-09)
7
18
 
8
19
  **Note:** Version bump only for package @instructure/ui-date-input
package/es/DateInput2/__new-tests__/DateInput2.test.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
2
- var _DateInputExample, _DateInputExample2, _DateInputExample3, _DateInputExample4;
2
+ var _DateInputExample, _DateInputExample2, _IconHeartLine, _DateInputExample3, _DateInputExample4;
3
3
  /*
4
4
  * The MIT License (MIT)
5
5
  *
@@ -28,6 +28,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react';
28
28
  import { vi } from 'vitest';
29
29
  import userEvent from '@testing-library/user-event';
30
30
  import '@testing-library/jest-dom';
31
+ import { IconHeartLine } from '@instructure/ui-icons';
31
32
  import { DateInput2 } from '../index';
32
33
  const LABEL_TEXT = 'Choose a date';
33
34
  const DateInputExample = () => {
@@ -108,6 +109,24 @@ describe('<DateInput2 />', () => {
108
109
  expect(calendarIcon).toBeInTheDocument();
109
110
  expect(calendarLabel).toBeInTheDocument();
110
111
  });
112
+ it('should render a custom calendar icon with screen reader label', async () => {
113
+ const iconLabel = 'Calendar icon Label';
114
+ const _render4 = render(/*#__PURE__*/React.createElement(DateInput2, {
115
+ renderLabel: "Choose a date",
116
+ screenReaderLabels: {
117
+ calendarIcon: iconLabel,
118
+ nextMonthButton: 'Next month',
119
+ prevMonthButton: 'Previous month'
120
+ },
121
+ value: "",
122
+ renderCalendarIcon: _IconHeartLine || (_IconHeartLine = /*#__PURE__*/React.createElement(IconHeartLine, null))
123
+ })),
124
+ container = _render4.container;
125
+ const calendarIcon = container.querySelector('svg[name="IconHeart"]');
126
+ const calendarLabel = screen.getByText(iconLabel);
127
+ expect(calendarIcon).toBeInTheDocument();
128
+ expect(calendarLabel).toBeInTheDocument();
129
+ });
111
130
  it('should not show calendar table by default', async () => {
112
131
  render(_DateInputExample3 || (_DateInputExample3 = /*#__PURE__*/React.createElement(DateInputExample, null)));
113
132
  const calendarTable = screen.queryByRole('table');
@@ -175,7 +194,7 @@ describe('<DateInput2 />', () => {
175
194
  });
176
195
  it('should set interaction type to disabled', async () => {
177
196
  const interactionDisabled = 'disabled';
178
- const _render4 = render(/*#__PURE__*/React.createElement(DateInput2, {
197
+ const _render5 = render(/*#__PURE__*/React.createElement(DateInput2, {
179
198
  renderLabel: "Choose a date",
180
199
  screenReaderLabels: {
181
200
  calendarIcon: 'Calendar',
@@ -185,13 +204,13 @@ describe('<DateInput2 />', () => {
185
204
  value: "",
186
205
  interaction: interactionDisabled
187
206
  })),
188
- container = _render4.container;
207
+ container = _render5.container;
189
208
  const dateInput = container.querySelector('input');
190
209
  expect(dateInput).toHaveAttribute(interactionDisabled);
191
210
  });
192
211
  it('should set interaction type to readonly', async () => {
193
212
  const interactionReadOnly = 'readonly';
194
- const _render5 = render(/*#__PURE__*/React.createElement(DateInput2, {
213
+ const _render6 = render(/*#__PURE__*/React.createElement(DateInput2, {
195
214
  renderLabel: "Choose a date",
196
215
  screenReaderLabels: {
197
216
  calendarIcon: 'Calendar',
@@ -201,7 +220,7 @@ describe('<DateInput2 />', () => {
201
220
  value: "",
202
221
  interaction: interactionReadOnly
203
222
  })),
204
- container = _render5.container;
223
+ container = _render6.container;
205
224
  const dateInput = container.querySelector('input');
206
225
  const calendarButton = screen.getByRole('button');
207
226
  expect(dateInput).toHaveAttribute(interactionReadOnly);
@@ -213,7 +232,7 @@ describe('<DateInput2 />', () => {
213
232
  });
214
233
  });
215
234
  it('should set required', async () => {
216
- const _render6 = render(/*#__PURE__*/React.createElement(DateInput2, {
235
+ const _render7 = render(/*#__PURE__*/React.createElement(DateInput2, {
217
236
  renderLabel: "Choose a date",
218
237
  screenReaderLabels: {
219
238
  calendarIcon: 'Calendar',
@@ -223,7 +242,7 @@ describe('<DateInput2 />', () => {
223
242
  value: "",
224
243
  isRequired: true
225
244
  })),
226
- container = _render6.container;
245
+ container = _render7.container;
227
246
  const dateInput = container.querySelector('input');
228
247
  expect(dateInput).toHaveAttribute('required');
229
248
  });
package/es/DateInput2/index.js CHANGED
@@ -31,7 +31,7 @@ import { IconButton } from '@instructure/ui-buttons';
31
31
  import { IconCalendarMonthLine, IconArrowOpenEndSolid, IconArrowOpenStartSolid } from '@instructure/ui-icons';
32
32
  import { Popover } from '@instructure/ui-popover';
33
33
  import { TextInput } from '@instructure/ui-text-input';
34
- import { passthroughProps } from '@instructure/ui-react-utils';
34
+ import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils';
35
35
  import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n';
36
36
  import { jsx } from '@instructure/emotion';
37
37
  import { propTypes } from './props';
@@ -131,6 +131,7 @@ const DateInput2 = ({
131
131
  placeholder,
132
132
  dateFormat,
133
133
  onRequestValidateDate,
134
+ renderCalendarIcon,
134
135
  // margin, TODO enable this prop
135
136
  ...rest
136
137
  }) => {
@@ -267,7 +268,7 @@ const DateInput2 = ({
267
268
  screenReaderLabel: screenReaderLabels.calendarIcon,
268
269
  shape: "circle",
269
270
  interaction: interaction
270
- }, _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
271
+ }, renderCalendarIcon ? callRenderProp(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = jsx(IconCalendarMonthLine, null))),
271
272
  isShowingContent: showPopover,
272
273
  onShowContent: () => setShowPopover(true),
273
274
  onHideContent: () => setShowPopover(false),
package/es/DateInput2/props.js CHANGED
@@ -42,6 +42,7 @@ const propTypes = {
42
42
  timezone: PropTypes.string,
43
43
  withYearPicker: PropTypes.object,
44
44
  dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
45
- onRequestValidateDate: PropTypes.func
45
+ onRequestValidateDate: PropTypes.func,
46
+ renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
46
47
  };
47
48
  export { propTypes };
package/lib/DateInput2/__new-tests__/DateInput2.test.js CHANGED
@@ -8,8 +8,9 @@ var _react2 = require("@testing-library/react");
8
8
  var _vitest = require("vitest");
9
9
  var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
10
10
  require("@testing-library/jest-dom");
11
+ var _IconHeartLine2 = require("@instructure/ui-icons/lib/IconHeartLine.js");
11
12
  var _index = require("../index");
12
- var _DateInputExample, _DateInputExample2, _DateInputExample3, _DateInputExample4;
13
+ var _DateInputExample, _DateInputExample2, _IconHeartLine, _DateInputExample3, _DateInputExample4;
13
14
  /*
14
15
  * The MIT License (MIT)
15
16
  *
@@ -112,6 +113,24 @@ describe('<DateInput2 />', () => {
112
113
  expect(calendarIcon).toBeInTheDocument();
113
114
  expect(calendarLabel).toBeInTheDocument();
114
115
  });
116
+ it('should render a custom calendar icon with screen reader label', async () => {
117
+ const iconLabel = 'Calendar icon Label';
118
+ const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
119
+ renderLabel: "Choose a date",
120
+ screenReaderLabels: {
121
+ calendarIcon: iconLabel,
122
+ nextMonthButton: 'Next month',
123
+ prevMonthButton: 'Previous month'
124
+ },
125
+ value: "",
126
+ renderCalendarIcon: _IconHeartLine || (_IconHeartLine = /*#__PURE__*/_react.default.createElement(_IconHeartLine2.IconHeartLine, null))
127
+ })),
128
+ container = _render4.container;
129
+ const calendarIcon = container.querySelector('svg[name="IconHeart"]');
130
+ const calendarLabel = _react2.screen.getByText(iconLabel);
131
+ expect(calendarIcon).toBeInTheDocument();
132
+ expect(calendarLabel).toBeInTheDocument();
133
+ });
115
134
  it('should not show calendar table by default', async () => {
116
135
  (0, _react2.render)(_DateInputExample3 || (_DateInputExample3 = /*#__PURE__*/_react.default.createElement(DateInputExample, null)));
117
136
  const calendarTable = _react2.screen.queryByRole('table');
@@ -179,7 +198,7 @@ describe('<DateInput2 />', () => {
179
198
  });
180
199
  it('should set interaction type to disabled', async () => {
181
200
  const interactionDisabled = 'disabled';
182
- const _render4 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
201
+ const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
183
202
  renderLabel: "Choose a date",
184
203
  screenReaderLabels: {
185
204
  calendarIcon: 'Calendar',
@@ -189,13 +208,13 @@ describe('<DateInput2 />', () => {
189
208
  value: "",
190
209
  interaction: interactionDisabled
191
210
  })),
192
- container = _render4.container;
211
+ container = _render5.container;
193
212
  const dateInput = container.querySelector('input');
194
213
  expect(dateInput).toHaveAttribute(interactionDisabled);
195
214
  });
196
215
  it('should set interaction type to readonly', async () => {
197
216
  const interactionReadOnly = 'readonly';
198
- const _render5 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
217
+ const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
199
218
  renderLabel: "Choose a date",
200
219
  screenReaderLabels: {
201
220
  calendarIcon: 'Calendar',
@@ -205,7 +224,7 @@ describe('<DateInput2 />', () => {
205
224
  value: "",
206
225
  interaction: interactionReadOnly
207
226
  })),
208
- container = _render5.container;
227
+ container = _render6.container;
209
228
  const dateInput = container.querySelector('input');
210
229
  const calendarButton = _react2.screen.getByRole('button');
211
230
  expect(dateInput).toHaveAttribute(interactionReadOnly);
@@ -217,7 +236,7 @@ describe('<DateInput2 />', () => {
217
236
  });
218
237
  });
219
238
  it('should set required', async () => {
220
- const _render6 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
239
+ const _render7 = (0, _react2.render)(/*#__PURE__*/_react.default.createElement(_index.DateInput2, {
221
240
  renderLabel: "Choose a date",
222
241
  screenReaderLabels: {
223
242
  calendarIcon: 'Calendar',
@@ -227,7 +246,7 @@ describe('<DateInput2 />', () => {
227
246
  value: "",
228
247
  isRequired: true
229
248
  })),
230
- container = _render6.container;
249
+ container = _render7.container;
231
250
  const dateInput = container.querySelector('input');
232
251
  expect(dateInput).toHaveAttribute('required');
233
252
  });
package/lib/DateInput2/index.js CHANGED
@@ -14,6 +14,7 @@ var _IconArrowOpenEndSolid = require("@instructure/ui-icons/lib/IconArrowOpenEnd
14
14
  var _IconArrowOpenStartSolid = require("@instructure/ui-icons/lib/IconArrowOpenStartSolid.js");
15
15
  var _Popover = require("@instructure/ui-popover/lib/Popover");
16
16
  var _TextInput = require("@instructure/ui-text-input/lib/TextInput");
17
+ var _callRenderProp = require("@instructure/ui-react-utils/lib/callRenderProp.js");
17
18
  var _passthroughProps = require("@instructure/ui-react-utils/lib/passthroughProps.js");
18
19
  var _ApplyLocaleContext = require("@instructure/ui-i18n/lib/ApplyLocale/ApplyLocaleContext.js");
19
20
  var _Locale = require("@instructure/ui-i18n/lib/Locale.js");
@@ -140,6 +141,7 @@ const DateInput2 = ({
140
141
  placeholder,
141
142
  dateFormat,
142
143
  onRequestValidateDate,
144
+ renderCalendarIcon,
143
145
  // margin, TODO enable this prop
144
146
  ...rest
145
147
  }) => {
@@ -276,7 +278,7 @@ const DateInput2 = ({
276
278
  screenReaderLabel: screenReaderLabels.calendarIcon,
277
279
  shape: "circle",
278
280
  interaction: interaction
279
- }, _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
281
+ }, renderCalendarIcon ? (0, _callRenderProp.callRenderProp)(renderCalendarIcon) : _IconCalendarMonthLin || (_IconCalendarMonthLin = (0, _emotion.jsx)(_IconCalendarMonthLine.IconCalendarMonthLine, null))),
280
282
  isShowingContent: showPopover,
281
283
  onShowContent: () => setShowPopover(true),
282
284
  onHideContent: () => setShowPopover(false),
package/lib/DateInput2/props.js CHANGED
@@ -49,5 +49,6 @@ const propTypes = exports.propTypes = {
49
49
  timezone: _propTypes.default.string,
50
50
  withYearPicker: _propTypes.default.object,
51
51
  dateFormat: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
52
- onRequestValidateDate: _propTypes.default.func
52
+ onRequestValidateDate: _propTypes.default.func,
53
+ renderCalendarIcon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func])
53
54
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-date-input",
3
- "version": "10.8.0",
3
+ "version": "10.8.1-snapshot-2",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,32 +23,32 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-axe-check": "10.8.0",
27
- "@instructure/ui-babel-preset": "10.8.0",
28
- "@instructure/ui-buttons": "10.8.0",
29
- "@instructure/ui-scripts": "10.8.0",
30
- "@instructure/ui-test-utils": "10.8.0",
31
- "@testing-library/jest-dom": "^6.4.6",
26
+ "@instructure/ui-axe-check": "10.8.1-snapshot-2",
27
+ "@instructure/ui-babel-preset": "10.8.1-snapshot-2",
28
+ "@instructure/ui-buttons": "10.8.1-snapshot-2",
29
+ "@instructure/ui-scripts": "10.8.1-snapshot-2",
30
+ "@instructure/ui-test-utils": "10.8.1-snapshot-2",
31
+ "@testing-library/jest-dom": "^6.6.3",
32
32
  "@testing-library/react": "^16.0.1",
33
33
  "@testing-library/user-event": "^14.5.2",
34
- "vitest": "^2.1.1"
34
+ "vitest": "^2.1.8"
35
35
  },
36
36
  "dependencies": {
37
- "@babel/runtime": "^7.25.6",
38
- "@instructure/emotion": "10.8.0",
39
- "@instructure/shared-types": "10.8.0",
40
- "@instructure/ui-calendar": "10.8.0",
41
- "@instructure/ui-form-field": "10.8.0",
42
- "@instructure/ui-i18n": "10.8.0",
43
- "@instructure/ui-icons": "10.8.0",
44
- "@instructure/ui-popover": "10.8.0",
45
- "@instructure/ui-position": "10.8.0",
46
- "@instructure/ui-prop-types": "10.8.0",
47
- "@instructure/ui-react-utils": "10.8.0",
48
- "@instructure/ui-selectable": "10.8.0",
49
- "@instructure/ui-testable": "10.8.0",
50
- "@instructure/ui-text-input": "10.8.0",
51
- "@instructure/ui-utils": "10.8.0",
37
+ "@babel/runtime": "^7.26.0",
38
+ "@instructure/emotion": "10.8.1-snapshot-2",
39
+ "@instructure/shared-types": "10.8.1-snapshot-2",
40
+ "@instructure/ui-calendar": "10.8.1-snapshot-2",
41
+ "@instructure/ui-form-field": "10.8.1-snapshot-2",
42
+ "@instructure/ui-i18n": "10.8.1-snapshot-2",
43
+ "@instructure/ui-icons": "10.8.1-snapshot-2",
44
+ "@instructure/ui-popover": "10.8.1-snapshot-2",
45
+ "@instructure/ui-position": "10.8.1-snapshot-2",
46
+ "@instructure/ui-prop-types": "10.8.1-snapshot-2",
47
+ "@instructure/ui-react-utils": "10.8.1-snapshot-2",
48
+ "@instructure/ui-selectable": "10.8.1-snapshot-2",
49
+ "@instructure/ui-testable": "10.8.1-snapshot-2",
50
+ "@instructure/ui-text-input": "10.8.1-snapshot-2",
51
+ "@instructure/ui-utils": "10.8.1-snapshot-2",
52
52
  "moment-timezone": "^0.5.45",
53
53
  "prop-types": "^15.8.1"
54
54
  },
package/src/DateInput2/__new-tests__/DateInput2.test.tsx CHANGED
@@ -26,6 +26,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'
26
26
  import { vi, MockInstance } from 'vitest'
27
27
  import userEvent from '@testing-library/user-event'
28
28
  import '@testing-library/jest-dom'
29
+ import { IconHeartLine } from '@instructure/ui-icons'
29
30
 
30
31
  import { DateInput2 } from '../index'
31
32
 
@@ -125,6 +126,27 @@ describe('<DateInput2 />', () => {
125
126
  expect(calendarLabel).toBeInTheDocument()
126
127
  })
127
128
 
129
+ it('should render a custom calendar icon with screen reader label', async () => {
130
+ const iconLabel = 'Calendar icon Label'
131
+ const { container } = render(
132
+ <DateInput2
133
+ renderLabel="Choose a date"
134
+ screenReaderLabels={{
135
+ calendarIcon: iconLabel,
136
+ nextMonthButton: 'Next month',
137
+ prevMonthButton: 'Previous month'
138
+ }}
139
+ value=""
140
+ renderCalendarIcon={<IconHeartLine />}
141
+ />
142
+ )
143
+ const calendarIcon = container.querySelector('svg[name="IconHeart"]')
144
+ const calendarLabel = screen.getByText(iconLabel)
145
+
146
+ expect(calendarIcon).toBeInTheDocument()
147
+ expect(calendarLabel).toBeInTheDocument()
148
+ })
149
+
128
150
  it('should not show calendar table by default', async () => {
129
151
  render(<DateInputExample />)
130
152
  const calendarTable = screen.queryByRole('table')
package/src/DateInput2/index.tsx CHANGED
@@ -34,7 +34,7 @@ import {
34
34
  } from '@instructure/ui-icons'
35
35
  import { Popover } from '@instructure/ui-popover'
36
36
  import { TextInput } from '@instructure/ui-text-input'
37
- import { passthroughProps } from '@instructure/ui-react-utils'
37
+ import { callRenderProp, passthroughProps } from '@instructure/ui-react-utils'
38
38
 
39
39
  import { ApplyLocaleContext, Locale } from '@instructure/ui-i18n'
40
40
  import { jsx } from '@instructure/emotion'
@@ -152,6 +152,7 @@ const DateInput2 = ({
152
152
  placeholder,
153
153
  dateFormat,
154
154
  onRequestValidateDate,
155
+ renderCalendarIcon,
155
156
  // margin, TODO enable this prop
156
157
  ...rest
157
158
  }: DateInput2Props) => {
@@ -298,7 +299,11 @@ const DateInput2 = ({
298
299
  shape="circle"
299
300
  interaction={interaction}
300
301
  >
301
- <IconCalendarMonthLine />
302
+ {renderCalendarIcon ? (
303
+ callRenderProp(renderCalendarIcon)
304
+ ) : (
305
+ <IconCalendarMonthLine />
306
+ )}
302
307
  </IconButton>
303
308
  }
304
309
  isShowingContent={showPopover}
package/src/DateInput2/props.ts CHANGED
@@ -165,6 +165,11 @@ type DateInput2OwnProps = {
165
165
  utcDateString: string
166
166
  ) => void
167
167
  // margin?: Spacing // TODO enable this prop
168
+
169
+ /**
170
+ * Custom icon for the icon button opening the picker.
171
+ */
172
+ renderCalendarIcon?: Renderable
168
173
  }
169
174
 
170
175
  type PropKeys = keyof DateInput2OwnProps
@@ -195,7 +200,8 @@ const propTypes: PropValidators<PropKeys> = {
195
200
  timezone: PropTypes.string,
196
201
  withYearPicker: PropTypes.object,
197
202
  dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
198
- onRequestValidateDate: PropTypes.func
203
+ onRequestValidateDate: PropTypes.func,
204
+ renderCalendarIcon: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
199
205
  }
200
206
 
201
207
  export type { DateInput2Props }