@atlaskit/datetime-picker 13.5.1 → 13.5.3

package/dist/cjs/components/date-picker.js

@@ -36,7 +36,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.5.1";
+var packageVersion = "13.5.3";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -107,6 +107,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onCalendarSelect", function (_ref2) {
+      var _this$containerRef;
       var iso = _ref2.iso;
       _this.setState({
         selectInputValue: '',
@@ -121,14 +122,11 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       // focus functionality. While that would be the 'right react' way to do it, it doesnt
       // post any other benefits; performance wise, we are only searching within the
       // container, making it quick.
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team-date-picker-input-focus-fix_awmzp')) {
-        var _this$containerRef;
-        var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
-        innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
-        _this.setState({
-          isOpen: false
-        });
-      }
+      var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
+      innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+      _this.setState({
+        isOpen: false
+      });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onInputClick", function () {
       if (!_this.props.isDisabled && !_this.getSafeState().isOpen) {
@@ -207,7 +205,7 @@ var DatePicker = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Co
       var keyPressed = event.key.toLowerCase();
 
       // If the input is focused and the calendar is not visible, handle space and enter clicks
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team-date-picker-input-focus-fix_awmzp') && !_this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
+      if (!_this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
         _this.setState({
           isOpen: true
         });

package/dist/cjs/components/date-time-picker.js

@@ -31,7 +31,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.5.1";
+var packageVersion = "13.5.3";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = (0, _react2.css)({
@@ -45,6 +45,7 @@ var timePickerContainerStyles = (0, _react2.css)({
 });
 var iconContainerStyles = (0, _react2.css)({
   display: 'flex',
+  margin: "var(--ds-border-width, 1px)",
   alignItems: 'center',
   flexBasis: 'inherit',
   backgroundColor: 'inherit',

package/dist/cjs/components/time-picker.js

@@ -36,7 +36,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // eslint-disable-next-line no-restricted-imports
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.5.1";
+var packageVersion = "13.5.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/cjs/internal/date-time-picker-container.js

@@ -14,7 +14,8 @@ var isInvalidBorderStyles = (0, _react.css)({
   borderColor: "var(--ds-border-danger, ".concat(_colors.R400, ")")
 });
 var isFocusedBorderStyles = (0, _react.css)({
-  borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")")
+  borderColor: "var(--ds-border-focused, ".concat(_colors.B100, ")"),
+  boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(_colors.B100, ")"))
 });
 var isFocusedStyles = (0, _react.css)({
   backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.N0, ")")

package/dist/cjs/internal/fixed-layer.js

@@ -89,7 +89,9 @@ var FixedLayer = exports.default = /*#__PURE__*/function (_React$Component) {
             update = _ref2.update;
           _this2.update = update;
           return /*#__PURE__*/_react.default.createElement("div", {
-            ref: ref,
+            ref: ref
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+            ,
             style: _objectSpread(_objectSpread({}, style), {}, {
               zIndex: _constants.layers.dialog()
             }),

package/dist/es2019/components/date-picker.js

@@ -16,7 +16,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.5.1";
+const packageVersion = "13.5.3";
 const datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -84,6 +84,7 @@ class DatePicker extends Component {
     _defineProperty(this, "onCalendarSelect", ({
       iso
     }) => {
+      var _this$containerRef;
       this.setState({
         selectInputValue: '',
         isOpen: false,
@@ -97,14 +98,11 @@ class DatePicker extends Component {
       // focus functionality. While that would be the 'right react' way to do it, it doesnt
       // post any other benefits; performance wise, we are only searching within the
       // container, making it quick.
-      if (getBooleanFF('platform.design-system-team-date-picker-input-focus-fix_awmzp')) {
-        var _this$containerRef;
-        const innerCombobox = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
-        innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
-        this.setState({
-          isOpen: false
-        });
-      }
+      const innerCombobox = (_this$containerRef = this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
+      innerCombobox === null || innerCombobox === void 0 ? void 0 : innerCombobox.focus();
+      this.setState({
+        isOpen: false
+      });
     });
     _defineProperty(this, "onInputClick", () => {
       if (!this.props.isDisabled && !this.getSafeState().isOpen) {
@@ -185,7 +183,7 @@ class DatePicker extends Component {
       const keyPressed = event.key.toLowerCase();
 
       // If the input is focused and the calendar is not visible, handle space and enter clicks
-      if (getBooleanFF('platform.design-system-team-date-picker-input-focus-fix_awmzp') && !this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
+      if (!this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
         this.setState({
           isOpen: true
         });

package/dist/es2019/components/date-time-picker.js

@@ -15,7 +15,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.5.1";
+const packageVersion = "13.5.3";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 const datePickerContainerStyles = css({
@@ -29,6 +29,7 @@ const timePickerContainerStyles = css({
 });
 const iconContainerStyles = css({
   display: 'flex',
+  margin: "var(--ds-border-width, 1px)",
   alignItems: 'center',
   flexBasis: 'inherit',
   backgroundColor: 'inherit',

package/dist/es2019/components/time-picker.js

@@ -16,7 +16,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "13.5.1";
+const packageVersion = "13.5.3";
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/es2019/internal/date-time-picker-container.js

@@ -6,7 +6,8 @@ const isInvalidBorderStyles = css({
   borderColor: `var(--ds-border-danger, ${R400})`
 });
 const isFocusedBorderStyles = css({
-  borderColor: `var(--ds-border-focused, ${B100})`
+  borderColor: `var(--ds-border-focused, ${B100})`,
+  boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B100})`}`
 });
 const isFocusedStyles = css({
   backgroundColor: `var(--ds-background-input-pressed, ${N0})`

package/dist/es2019/internal/fixed-layer.js

@@ -62,7 +62,9 @@ export default class FixedLayer extends React.Component {
       }) => {
         this.update = update;
         return /*#__PURE__*/React.createElement("div", {
-          ref: ref,
+          ref: ref
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
           style: {
             ...style,
             zIndex: layers.dialog()

package/dist/esm/components/date-picker.js

@@ -27,7 +27,7 @@ import { getSafeCalendarValue, getShortISOString } from '../internal/parse-date'
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.5.1";
+var packageVersion = "13.5.3";
 var datePickerDefaultProps = {
   appearance: 'default',
   autoFocus: false,
@@ -98,6 +98,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onCalendarSelect", function (_ref2) {
+      var _this$containerRef;
       var iso = _ref2.iso;
       _this.setState({
         selectInputValue: '',
@@ -112,14 +113,11 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       // focus functionality. While that would be the 'right react' way to do it, it doesnt
       // post any other benefits; performance wise, we are only searching within the
       // container, making it quick.
-      if (getBooleanFF('platform.design-system-team-date-picker-input-focus-fix_awmzp')) {
-        var _this$containerRef;
-        var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
-        innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
-        _this.setState({
-          isOpen: false
-        });
-      }
+      var innerCombobox = (_this$containerRef = _this.containerRef) === null || _this$containerRef === void 0 ? void 0 : _this$containerRef.querySelector('[role="combobox"]');
+      innerCombobox === null || innerCombobox === void 0 || innerCombobox.focus();
+      _this.setState({
+        isOpen: false
+      });
     });
     _defineProperty(_assertThisInitialized(_this), "onInputClick", function () {
       if (!_this.props.isDisabled && !_this.getSafeState().isOpen) {
@@ -198,7 +196,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
       var keyPressed = event.key.toLowerCase();
 
       // If the input is focused and the calendar is not visible, handle space and enter clicks
-      if (getBooleanFF('platform.design-system-team-date-picker-input-focus-fix_awmzp') && !_this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
+      if (!_this.state.isOpen && (keyPressed === 'enter' || keyPressed === ' ')) {
         _this.setState({
           isOpen: true
         });

package/dist/esm/components/date-time-picker.js

@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.5.1";
+var packageVersion = "13.5.3";
 // Make DatePicker 50% the width of DateTimePicker
 // If rendering an icon container, shrink the TimePicker
 var datePickerContainerStyles = css({
@@ -39,6 +39,7 @@ var timePickerContainerStyles = css({
 });
 var iconContainerStyles = css({
   display: 'flex',
+  margin: "var(--ds-border-width, 1px)",
   alignItems: 'center',
   flexBasis: 'inherit',
   backgroundColor: 'inherit',

package/dist/esm/components/time-picker.js

@@ -28,7 +28,7 @@ import parseTime from '../internal/parse-time';
 import { convertTokens } from '../internal/parse-tokens';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "13.5.1";
+var packageVersion = "13.5.3";
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */
   position: 'static',

package/dist/esm/internal/date-time-picker-container.js

@@ -6,7 +6,8 @@ var isInvalidBorderStyles = css({
   borderColor: "var(--ds-border-danger, ".concat(R400, ")")
 });
 var isFocusedBorderStyles = css({
-  borderColor: "var(--ds-border-focused, ".concat(B100, ")")
+  borderColor: "var(--ds-border-focused, ".concat(B100, ")"),
+  boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", "var(--ds-border-focused, ".concat(B100, ")"))
 });
 var isFocusedStyles = css({
   backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")")

package/dist/esm/internal/fixed-layer.js

@@ -83,7 +83,9 @@ var FixedLayer = /*#__PURE__*/function (_React$Component) {
             update = _ref2.update;
           _this2.update = update;
           return /*#__PURE__*/React.createElement("div", {
-            ref: ref,
+            ref: ref
+            // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+            ,
             style: _objectSpread(_objectSpread({}, style), {}, {
               zIndex: layers.dialog()
             }),

package/dist/types/types.d.ts

@@ -6,9 +6,7 @@ export type Spacing = 'compact' | 'default';
 export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
     /**
      * Set the appearance of the picker.
-     *
      * `subtle` will remove the borders, background, and icon.
-     *
      * **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;

package/dist/types-ts4.5/types.d.ts

@@ -6,9 +6,7 @@ export type Spacing = 'compact' | 'default';
 export interface DatePickerBaseProps extends WithAnalyticsEventsProps {
     /**
      * Set the appearance of the picker.
-     *
      * `subtle` will remove the borders, background, and icon.
-     *
      * **NOTE:** Appearance values will be ignored if styles are parsed through `selectProps`.
      */
     appearance?: Appearance;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/datetime-picker",
-  "version": "13.5.1",
+  "version": "13.5.3",
   "description": "A date time picker allows the user to select an associated date and time.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -47,8 +47,8 @@
     "@atlaskit/locale": "^2.7.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/popper": "^6.0.0",
-    "@atlaskit/select": "^17.9.0",
-    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/select": "^17.10.0",
+    "@atlaskit/theme": "^12.9.0",
     "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -63,9 +63,9 @@
     "@af/accessibility-testing": "*",
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/button": "^17.16.0",
+    "@atlaskit/button": "^17.17.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/form": "^10.2.0",
+    "@atlaskit/form": "^10.3.0",
     "@atlaskit/modal-dialog": "^12.13.0",
     "@atlaskit/popup": "^1.17.0",
     "@atlaskit/range": "^7.2.0",
@@ -74,7 +74,6 @@
     "@atlaskit/textfield": "^6.3.0",
     "@atlaskit/toggle": "^13.1.0",
     "@atlaskit/visual-regression": "*",
-    "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
@@ -110,11 +109,7 @@
     },
     "platform.design-system-team.date-picker-input-a11y-fix_cbbxs": {
       "type": "boolean"
-    },
-    "platform.design-system-team-date-picker-input-focus-fix_awmzp": {
-      "type": "boolean"
     }
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
   "homepage": "https://atlassian.design/components/datetime-picker/"
 }