Fix deprecation warnings,

### Changed
- Change `data-active` attribute to be a boolean attribute (i.e., emit \<foo data-active> instead of \<foo data-active="true">)
- Rename componentWillReceiveProps to [UNSAFE_componentWillReceiveProps](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) to avoid deprecation warnings in React 16.11+
- Add deprecation warnings for Date components because they're not fully localized/accessible. We should use the [Office Fabric control](https://developer.microsoft.com/en-us/fabric/#/controls/web/datepicker) instead.
### Fixed
- Update handlebars version to fix vulnerability

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG
 
+## 7.0.7
+### Changed
+- Change `data-active` attribute to be a boolean attribute (i.e., emit \<foo data-active> instead of \<foo data-active="true">)
+- Rename componentWillReceiveProps to [UNSAFE_componentWillReceiveProps](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html) to avoid deprecation warnings in React 16.11+
+- Add deprecation warnings for Date components because they're not fully localized/accessible. We should use the [Office Fabric control](https://developer.microsoft.com/en-us/fabric/#/controls/web/datepicker) instead.
+### Fixed
+- Update handlebars version to fix vulnerability
+
 ## 7.0.6
 ### Changed
 - Added data-test-active to active navigation item

lib/components/Balloon/Balloon.tsx

@@ -76,7 +76,7 @@ export class Balloon extends React.Component<BalloonProps, BalloonState> {
         };
     }
 
-    componentWillReceiveProps(newProps: BalloonProps) {
+    UNSAFE_componentWillReceiveProps(newProps: BalloonProps) {
         this.setState({
             visible: this.state.hovered || newProps.expanded,
         });

lib/components/DateTime/Calendar.tsx

@@ -60,6 +60,7 @@ export interface CalendarState {
  * Calendar control
  *
  * @param props Control properties (defined in `CalendarProps` interface)
+ * @deprecated This is not fully localized/accessible. Use https://developer.microsoft.com/en-us/fabric/#/controls/web/datepicker instead.
  */
 export class Calendar extends React.Component<CalendarProps, Partial<CalendarState>> {
     static defaultProps = {
@@ -119,7 +120,7 @@ export class Calendar extends React.Component<CalendarProps, Partial<CalendarSta
         this.setContainerRef = this.setContainerRef.bind(this);
     }
 
-    componentWillReceiveProps(newProps: CalendarProps) {
+    UNSAFE_componentWillReceiveProps(newProps: CalendarProps) {
         const date = this.state.currentDate.copy();
         let update = false;
         if (newProps.year !== this.props.year && newProps.year > 0) {

lib/components/DateTime/DateField.tsx

@@ -72,6 +72,7 @@ export interface DateFieldProps extends React.Props<DateFieldType> {
  * High level form text field
  *
  * @param props Control properties (defined in `DateFieldProps` interface)
+ * @deprecated This is not fully localized/accessible. Use https://developer.microsoft.com/en-us/fabric/#/controls/web/datepicker instead.
  */
 export const DateField: React.StatelessComponent<DateFieldProps> = (props: DateFieldProps) => {
     const tooltipId = (!!props.tooltip) ? `${props.name}-tt` : undefined;

lib/components/DateTime/DatePicker.tsx

@@ -91,6 +91,7 @@ export interface DatePickerState {
  * Low level date picker control
  *
  * (Use the `DateField` control instead when making a form with standard styling)
+ * @deprecated This is not fully localized/accessible. Use https://developer.microsoft.com/en-us/fabric/#/controls/web/datepicker instead.
  */
 export class DatePicker extends React.Component<DatePickerProps, Partial<DatePickerState>> {
     static defaultProps = {
@@ -207,7 +208,7 @@ export class DatePicker extends React.Component<DatePickerProps, Partial<DatePic
      *
      * @param newProps new DatePickerProps
      */
-    componentWillReceiveProps(newProps: DatePickerProps) {
+    UNSAFE_componentWillReceiveProps(newProps: DatePickerProps) {
         if ((this.props.initialValue !== newProps.initialValue || this.props.localTimezone !== newProps.localTimezone) && newProps.initialValue !== 'invalid') {
             const newState = this.getInitialState(newProps, this.input.value);
             this.setState({

lib/components/DateTime/DateTimeField.tsx

@@ -91,6 +91,7 @@ export interface DateTimeFieldState {
  * High level date time field
  *
  * @param props Control properties (defined in `DateTimeFieldProps` interface)
+ * @deprecated This is not fully localized/accessible. Use https://developer.microsoft.com/en-us/fabric/#/controls/web/datepicker instead.
  */
 export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<DateTimeFieldState>> {
     static defaultProps = {
@@ -211,7 +212,7 @@ export class DateTimeField extends React.Component<DateTimeFieldProps, Partial<D
         };
     }
 
-    componentWillReceiveProps(newProps: DateTimeFieldProps) {
+    UNSAFE_componentWillReceiveProps(newProps: DateTimeFieldProps) {
         if (this.props.initialValue !== newProps.initialValue || this.props.localTimezone !== newProps.localTimezone) {
             this.setState(this.getInitialState(newProps));
         }

lib/components/DateTime/TimeInput.tsx

@@ -170,7 +170,7 @@ export class TimeInput extends React.Component<TimeInputProps, TimeInputState> {
         return time;
     }
 
-    componentWillReceiveProps(newProps) {
+    UNSAFE_componentWillReceiveProps(newProps) {
         let newState: any = {};
         let update = false;
         let newHours = this.state.hours;

lib/components/Input/NumberInput.tsx

@@ -226,7 +226,7 @@ export class NumberInput extends React.Component<NumberInputProps, NumberInputSt
         }
     }
 
-    componentWillReceiveProps(newProps: NumberInputProps) {
+    UNSAFE_componentWillReceiveProps(newProps: NumberInputProps) {
         if (this.props.initialValue !== newProps.initialValue) {
             this.setState(this.getInitialState(newProps.initialValue));
         }

lib/components/Navigation/Navigation.tsx

@@ -39,7 +39,7 @@ export function Navigation({ isExpanded, onClick, attr, children, farBottomChild
                 // Only take the first active link as active and set everything else to not active
                 if (item.className.includes('global-nav-item-active') && activeItemIndex === -1) {
                     activeItemIndex = i;
-                    item.setAttribute('data-active', 'true');
+                    item.setAttribute('data-active', ''); // set boolean attribute
                 } else {
                     item.removeAttribute('data-active');
                 }

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@microsoft/azure-iot-ux-fluent-controls",
-    "version": "7.0.6",
+    "version": "7.0.7",
     "description": "Azure IoT UX Fluent Controls",
     "main": "./lib/index.js",
     "types": "./lib/index.d.ts",