@atlaskit/datetime-picker 12.1.0 → 12.1.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/datetime-picker
 
+## 12.1.1
+
+### Patch Changes
+
+- [`3fa327b5d01`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fa327b5d01) - [ux] Border on a subtle appearance date-picker will now persist after a date is selected and field is in focus
+
 ## 12.1.0
 
 ### Minor Changes

package/dist/cjs/components/DatePicker.js

@@ -68,7 +68,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.0";
+var packageVersion = "12.1.1";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -216,7 +216,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         });
       } else {
         _this.setState({
-          isOpen: false
+          isOpen: false,
+          isFocused: false
         });
       }
 
@@ -235,7 +236,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       } else {
         _this.setState({
           isOpen: true,
-          view: value
+          view: value,
+          isFocused: true
         });
       }
 
@@ -386,9 +388,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         _this.forceUpdate();
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSubtleControlStyles", function (isOpen) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSubtleControlStyles", function () {
       return {
-        border: "2px solid ".concat(isOpen ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "transparent"),
+        border: "2px solid ".concat(_this.getSafeState().isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "transparent"),
         backgroundColor: 'transparent',
         padding: '1px'
       };
@@ -442,6 +444,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
     _this.state = {
       isOpen: _this.props.defaultIsOpen,
+      isFocused: false,
       clearingFromIcon: false,
       inputValue: _this.props.selectProps.inputValue,
       selectedValue: _this.props.value || _this.props.defaultValue,
@@ -509,7 +512,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
-      var controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles(isOpen) : {};
+      var controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles() : {};
       var disabledStyle = isDisabled ? {
         pointerEvents: 'none'
       } : {};

package/dist/cjs/components/DateTimePicker.js

@@ -58,7 +58,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.0";
+var packageVersion = "12.1.1";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = (0, _core.css)({

package/dist/cjs/components/TimePicker.js

@@ -67,7 +67,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.0";
+var packageVersion = "12.1.1";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.1.0",
+	"version": "12.1.1",
 	"sideEffects": false
 }

package/dist/es2019/components/DatePicker.js

@@ -18,7 +18,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/FixedLayer';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.0";
+const packageVersion = "12.1.1";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -161,7 +161,8 @@ class DatePicker extends Component {
         });
       } else {
         this.setState({
-          isOpen: false
+          isOpen: false,
+          isFocused: false
         });
       }
 
@@ -182,7 +183,8 @@ class DatePicker extends Component {
       } else {
         this.setState({
           isOpen: true,
-          view: value
+          view: value,
+          isFocused: true
         });
       }
 
@@ -335,8 +337,8 @@ class DatePicker extends Component {
       }
     });
 
-    _defineProperty(this, "getSubtleControlStyles", isOpen => ({
-      border: `2px solid ${isOpen ? `var(--ds-border-focused, ${B100})` : `transparent`}`,
+    _defineProperty(this, "getSubtleControlStyles", () => ({
+      border: `2px solid ${this.getSafeState().isFocused ? `var(--ds-border-focused, ${B100})` : `transparent`}`,
       backgroundColor: 'transparent',
       padding: '1px'
     }));
@@ -396,6 +398,7 @@ class DatePicker extends Component {
     } = getDateObj(new Date());
     this.state = {
       isOpen: this.props.defaultIsOpen,
+      isFocused: false,
       clearingFromIcon: false,
       inputValue: this.props.selectProps.inputValue,
       selectedValue: this.props.value || this.props.defaultValue,
@@ -460,7 +463,7 @@ class DatePicker extends Component {
     const {
       styles: selectStyles = {}
     } = selectProps;
-    const controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles(isOpen) : {};
+    const controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles() : {};
     const disabledStyle = isDisabled ? {
       pointerEvents: 'none'
     } : {};

package/dist/es2019/components/DateTimePicker.js

@@ -17,7 +17,7 @@ import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.0";
+const packageVersion = "12.1.1";
 /* eslint-disable react/no-unused-prop-types */
 
 const isInvalidBorderStyles = css({

package/dist/es2019/components/TimePicker.js

@@ -14,7 +14,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "12.1.0";
+const packageVersion = "12.1.1";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.1.0",
+	"version": "12.1.1",
 	"sideEffects": false
 }

package/dist/esm/components/DatePicker.js

@@ -33,7 +33,7 @@ import { defaultDateFormat, EmptyClearIndicator, padToTwo, placeholderDatetime }
 import FixedLayer from '../internal/FixedLayer';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.0";
+var packageVersion = "12.1.1";
 /* eslint-disable react/no-unused-prop-types */
 
 function getDateObj(date) {
@@ -190,7 +190,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
         });
       } else {
         _this.setState({
-          isOpen: false
+          isOpen: false,
+          isFocused: false
         });
       }
 
@@ -210,7 +211,8 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       } else {
         _this.setState({
           isOpen: true,
-          view: value
+          view: value,
+          isFocused: true
         });
       }
 
@@ -369,9 +371,9 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSubtleControlStyles", function (isOpen) {
+    _defineProperty(_assertThisInitialized(_this), "getSubtleControlStyles", function () {
       return {
-        border: "2px solid ".concat(isOpen ? "var(--ds-border-focused, ".concat(B100, ")") : "transparent"),
+        border: "2px solid ".concat(_this.getSafeState().isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "transparent"),
         backgroundColor: 'transparent',
         padding: '1px'
       };
@@ -428,6 +430,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
     _this.state = {
       isOpen: _this.props.defaultIsOpen,
+      isFocused: false,
       clearingFromIcon: false,
       inputValue: _this.props.selectProps.inputValue,
       selectedValue: _this.props.value || _this.props.defaultValue,
@@ -495,7 +498,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
 
       var _selectProps$styles = selectProps.styles,
           selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
-      var controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles(isOpen) : {};
+      var controlStyles = appearance === 'subtle' ? this.getSubtleControlStyles() : {};
       var disabledStyle = isDisabled ? {
         pointerEvents: 'none'
       } : {};

package/dist/esm/components/DateTimePicker.js

@@ -31,7 +31,7 @@ import DatePicker from './DatePicker';
 import TimePicker from './TimePicker';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.0";
+var packageVersion = "12.1.1";
 /* eslint-disable react/no-unused-prop-types */
 
 var isInvalidBorderStyles = css({

package/dist/esm/components/TimePicker.js

@@ -32,7 +32,7 @@ import FixedLayer from '../internal/FixedLayer';
 import parseTime from '../internal/parseTime';
 import { convertTokens } from './utils';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "12.1.0";
+var packageVersion = "12.1.1";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "12.1.0",
+	"version": "12.1.1",
 	"sideEffects": false
 }

package/dist/types/components/DatePicker.d.ts

@@ -109,6 +109,7 @@ interface State {
      * This variable defines whether the default onSelectBlur or onSelectFocus
      * events should behave as normal
      */
+    isFocused: boolean;
     clearingFromIcon: boolean;
     value: string;
     /** Value to be shown in the calendar as selected.  */
@@ -168,6 +169,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
         inputValue: any;
         isOpen: boolean;
         value: string;
+        isFocused: boolean;
         clearingFromIcon: boolean;
         selectedValue: string;
         view: string;
@@ -190,7 +192,7 @@ declare class DatePicker extends Component<DatePickerProps, State> {
     refCalendar: (ref: CalendarRef | null) => void;
     handleInputChange: (inputValue: string, actionMeta: {}) => void;
     getContainerRef: (ref: HTMLElement | null) => void;
-    getSubtleControlStyles: (isOpen: boolean) => {
+    getSubtleControlStyles: () => {
         border: string;
         backgroundColor: string;
         padding: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "12.1.0",
+  "version": "12.1.1",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,7 +29,7 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/locale": "^2.1.0",
     "@atlaskit/popper": "^5.2.0",
-    "@atlaskit/select": "^15.3.0",
+    "@atlaskit/select": "^15.4.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",