@atlaskit/datetime-picker 16.2.3 → 17.0.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @atlaskit/datetime-picker
 
+## 17.0.1
+
+### Patch Changes
+
+- [#142578](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142578)
+  [`a1e85a3a1ca96`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a1e85a3a1ca96) -
+  Add componenets API support in selectProps
+- Updated dependencies
+
+## 17.0.0
+
+### Major Changes
+
+- [#129617](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129617)
+  [`0afd40c7a88c1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0afd40c7a88c1) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/datetime-picker`, you will need to ensure
+  that your bundler is configured to handle `.css` imports correctly. Most bundlers come with
+  built-in support for `.css` imports, so you may not need to do anything. If you are using a
+  different bundler, please refer to the documentation for that bundler to understand how to handle
+  `.css` imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
 ## 16.2.3
 
 ### Patch Changes

package/dist/cjs/components/date-picker-class.compiled.css

@@ -0,0 +1,16 @@
+
+._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tke1k8s{min-height:1.5rem}
+._1ul91k8s{min-width:1.5rem}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._i0dl1kw7{flex-basis:inherit}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}

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

@@ -1,3 +1,4 @@
+/* date-picker-class.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.DatePickerWithoutAnalytics = void 0;
+require("./date-picker-class.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -13,16 +18,15 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
 var _dateFns = require("date-fns");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _new = require("@atlaskit/button/new");
+var _css = require("@atlaskit/css");
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _calendar = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar"));
 var _locale = require("@atlaskit/locale");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _select = _interopRequireWildcard(require("@atlaskit/select"));
 var _internal = require("../internal");
 var _datePickerMigration = require("../internal/date-picker-migration");
@@ -35,19 +39,9 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 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; }
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "16.2.3";
-var dropdownIndicatorStyles = (0, _primitives.xcss)({
-  minWidth: "var(--ds-space-300, 24px)",
-  minHeight: "var(--ds-space-300, 24px)",
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center'
-});
+var packageVersion = "17.0.1";
 var datePickerDefaultProps = {
   defaultIsOpen: false,
   defaultValue: '',
@@ -66,29 +60,13 @@ var datePickerDefaultProps = {
   // Not including a default prop for value as it will
   // Make the component a controlled component
 };
-var pickerContainerStyles = (0, _react2.css)({
-  position: 'relative'
-});
-var iconContainerStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  height: '100%',
-  position: 'absolute',
-  alignItems: 'center',
-  flexBasis: 'inherit',
-  color: 'color.text.subtlest',
-  insetBlockStart: 'space.0',
-  insetInlineEnd: 'space.0',
-  transition: "color 150ms",
-  ':hover': {
-    color: 'color.text.subtle'
-  }
-});
-var iconSpacingWithClearButtonStyles = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.400'
-});
-var iconSpacingWithoutClearButtonStyles = (0, _primitives.xcss)({
-  marginInlineEnd: 'space.050'
-});
+var styles = {
+  pickerContainerStyles: "_kqswh2mm",
+  iconContainerStyles: "_v564vrg3 _1e0c1txw _4t3i1osq _kqswstnw _4cvr1h6o _i0dl1kw7 _syaz131l _152tze3t _rjxpze3t _30l31gjq",
+  iconSpacingWithClearButtonStyles: "_12l2xy5q",
+  iconSpacingWithoutClearButtonStyles: "_12l21b66",
+  dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o"
+};
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/function (_Component) {
@@ -470,23 +448,23 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
       var showClearIndicator = Boolean((value || selectInputValue) && !hideIcon);
       var clearIndicator = Icon;
 
-      // eslint-disable-next-line @atlaskit/platform/no-preconditioning
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
       if ((0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
         clearIndicator = function clearIndicator(props) {
-          return (0, _react2.jsx)(_primitives.Box, {
-            xcss: dropdownIndicatorStyles
-          }, (0, _react2.jsx)(Icon, props));
+          return /*#__PURE__*/React.createElement(_compiled.Box, {
+            xcss: styles.dropdownIndicatorStyles
+          }, /*#__PURE__*/React.createElement(Icon, props));
         };
       }
       var dropDownIcon = appearance === 'subtle' || hideIcon || showClearIndicator ? null : clearIndicator;
       var SingleValue = (0, _singleValue.makeSingleValue)({
         lang: this.props.locale
       });
-      var selectComponents = _objectSpread(_objectSpread({
+      var selectComponents = _objectSpread(_objectSpread(_objectSpread({
         DropdownIndicator: shouldShowCalendarButton ? _internal.EmptyComponent : dropDownIcon
       }, shouldShowCalendarButton ? {
         IndicatorsContainer: function IndicatorsContainer(props) {
-          return (0, _react2.jsx)(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
+          return /*#__PURE__*/React.createElement(_indicatorsContainer.IndicatorsContainer, (0, _extends2.default)({}, props, {
             showClearIndicator: showClearIndicator
           }));
         }
@@ -495,7 +473,7 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
         SingleValue: SingleValue
       }, !showClearIndicator && {
         ClearIndicator: _internal.EmptyComponent
-      });
+      }), selectProps.components);
       var _selectProps$styles = selectProps.styles,
         selectStyles = _selectProps$styles === void 0 ? {} : _selectProps$styles;
       var disabledStyle = isDisabled ? {
@@ -543,107 +521,105 @@ var DatePickerComponent = exports.DatePickerWithoutAnalytics = /*#__PURE__*/func
 
       // `label` takes precedence of the `inputLabel`
       var fullopenCalendarLabel = label || inputLabel ? "".concat(label || inputLabel, ", ").concat(openCalendarLabel) : openCalendarLabel;
-      return (
-        // These event handlers must be on this element because the events come
-        // from different child elements.
-        // Until innerProps is removed, it must remain a div rather than a primitive component.
-        (0, _react2.jsx)("div", (0, _extends2.default)({}, innerProps, {
-          css: pickerContainerStyles
-          // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
-          ,
-          role: "presentation",
-          onBlur: this.onContainerBlur,
-          onFocus: this.onContainerFocus,
-          onClick: this.onInputClick,
-          onInput: this.onTextInput,
-          onKeyDown: this.onInputKeyDown,
-          ref: this.getContainerRef,
-          "data-testid": testId && "".concat(testId, "--container")
-        }), (0, _react2.jsx)("input", {
-          name: name,
-          type: "hidden",
-          value: value,
-          "data-testid": testId && "".concat(testId, "--input")
-        }), (0, _react2.jsx)(_select.default, (0, _extends2.default)({
-          appearance: this.props.appearance,
-          "aria-describedby": ariaDescribedBy,
-          label: label || undefined,
-          autoFocus: autoFocus,
-          clearControlLabel: clearControlLabel,
-          closeMenuOnSelect: true
-          // FOr some reason, this and the below `styles` type error _only_ show
-          // up when you alter some of the properties in the `selectComponents`
-          // object. These errors are still present, and I suspect have always
-          // been present, without changing the unrelated code. Ignoring as the
-          // component still works as expected despite this error. And also
-          // because the select refresh team may solve it later.
-          ,
-          components: selectComponents,
-          enableAnimation: false,
-          inputId: id,
-          inputValue: actualSelectInputValue,
-          isDisabled: isDisabled,
-          isRequired: isRequired,
-          menuIsOpen: menuIsOpen,
-          onBlur: this.onSelectBlur,
-          onChange: this.onSelectChange,
-          onFocus: this.onSelectFocus,
-          onInputChange: this.handleSelectInputChange,
-          placeholder: (0, _datePickerMigration.getPlaceholder)({
-            placeholder: this.props.placeholder,
-            l10n: this.state.l10n
-          }),
-          styles: mergedStyles,
-          value: initialValue
-        }, selectProps, {
-          // These are below the spread because I don't know what is in
-          // selectProps or not and what wil be overwritten
-          isClearable: true,
-          isInvalid: isInvalid,
-          spacing: spacing,
-          testId: testId
-          // These aren't part of `Select`'s API, but we're using them here.
-          // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
-          ,
-          calendarContainerRef: calendarProps.calendarContainerRef,
-          calendarDisabled: calendarProps.calendarDisabled,
-          calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
-          calendarLocale: calendarProps.calendarLocale,
-          calendarMaxDate: calendarProps.calendarMaxDate,
-          calendarMinDate: calendarProps.calendarMinDate,
-          calendarRef: calendarProps.calendarRef,
-          calendarValue: calendarProps.calendarValue,
-          calendarView: calendarProps.calendarView,
-          calendarWeekStartDay: calendarProps.calendarWeekStartDay,
-          nextMonthLabel: nextMonthLabel,
-          onCalendarChange: calendarProps.onCalendarChange,
-          onCalendarSelect: calendarProps.onCalendarSelect,
-          previousMonthLabel: previousMonthLabel,
-          shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
-          menuInnerWrapper: calendarProps.menuInnerWrapper
-        })), shouldShowCalendarButton && !isDisabled ? (0, _react2.jsx)(_useId.IdProvider, {
-          prefix: "open-calendar-label--"
-        }, function (_ref3) {
-          var openCalendarLabelId = _ref3.id;
-          return (0, _react2.jsx)(_primitives.Box, {
-            xcss: [iconContainerStyles, value && !hideIcon ? iconSpacingWithClearButtonStyles : iconSpacingWithoutClearButtonStyles]
-          }, (0, _react2.jsx)(_new.IconButton, {
-            appearance: "subtle",
-            label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
-            "aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
-            id: openCalendarLabelId,
-            icon: function icon(iconProps) {
-              return (0, _react2.jsx)(_calendar.default, (0, _extends2.default)({}, iconProps, {
-                color: "var(--ds-icon, #44546F)"
-              }));
-            },
-            onClick: _this2.onCalendarButtonClick,
-            onKeyDown: _this2.onCalendarButtonKeyDown,
-            ref: _this2.calendarButtonRef,
-            testId: testId && "".concat(testId, "--open-calendar-button")
-          }));
-        }) : null)
-      );
+      return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, innerProps, {
+        // Since the onclick, onfocus are passed down, adding role="presentation" prevents typecheck errors.
+        role: "presentation",
+        onBlur: this.onContainerBlur,
+        onFocus: this.onContainerFocus,
+        onClick: this.onInputClick,
+        onInput: this.onTextInput,
+        onKeyDown: this.onInputKeyDown,
+        ref: this.getContainerRef,
+        "data-testid": testId && "".concat(testId, "--container"),
+        className: (0, _runtime.ax)([styles.pickerContainerStyles])
+      }), /*#__PURE__*/React.createElement("input", {
+        name: name,
+        type: "hidden",
+        value: value,
+        "data-testid": testId && "".concat(testId, "--input")
+      }), /*#__PURE__*/React.createElement(_select.default, (0, _extends2.default)({
+        appearance: this.props.appearance,
+        "aria-describedby": ariaDescribedBy,
+        label: label || undefined
+        // eslint-disable-next-line jsx-a11y/no-autofocus
+        ,
+        autoFocus: autoFocus,
+        clearControlLabel: clearControlLabel,
+        closeMenuOnSelect: true,
+        enableAnimation: false,
+        inputId: id,
+        inputValue: actualSelectInputValue,
+        isDisabled: isDisabled,
+        isRequired: isRequired,
+        menuIsOpen: menuIsOpen,
+        onBlur: this.onSelectBlur,
+        onChange: this.onSelectChange,
+        onFocus: this.onSelectFocus,
+        onInputChange: this.handleSelectInputChange,
+        placeholder: (0, _datePickerMigration.getPlaceholder)({
+          placeholder: this.props.placeholder,
+          l10n: this.state.l10n
+        })
+        // @ts-ignore -- Argument of type 'StylesConfig<OptionType, false, GroupBase<OptionType>>' is not assignable to parameter of type 'StylesConfig<OptionType, boolean, GroupBase<OptionType>>'
+        ,
+        styles: mergedStyles,
+        value: initialValue
+      }, selectProps, {
+        // For some reason, this and the below `styles` type error _only_ show
+        // up when you alter some of the properties in the `selectComponents`
+        // object. These errors are still present, and I suspect have always
+        // been present, without changing the unrelated code. Ignoring as the
+        // component still works as expected despite this error. And also
+        // because the select refresh team may solve it later.
+        components: selectComponents
+        // These are below the spread because I don't know what is in
+        // selectProps or not and what wil be overwritten
+        ,
+        isClearable: true,
+        isInvalid: isInvalid,
+        spacing: spacing,
+        testId: testId
+        // These aren't part of `Select`'s API, but we're using them here.
+        // @ts-ignore --  Property 'calendarContainerRef' does not exist on type 'IntrinsicAttributes & LibraryManagedAttributes<(<Option extends unknown = OptionType, IsMulti extends boolean = false>(props: AtlaskitSelectProps<Option, IsMulti> & { ...; }) => Element), AtlaskitSelectProps<...> & { ...; }>'.
+        ,
+        calendarContainerRef: calendarProps.calendarContainerRef,
+        calendarDisabled: calendarProps.calendarDisabled,
+        calendarDisabledDateFilter: calendarProps.calendarDisabledDateFilter,
+        calendarLocale: calendarProps.calendarLocale,
+        calendarMaxDate: calendarProps.calendarMaxDate,
+        calendarMinDate: calendarProps.calendarMinDate,
+        calendarRef: calendarProps.calendarRef,
+        calendarValue: calendarProps.calendarValue,
+        calendarView: calendarProps.calendarView,
+        calendarWeekStartDay: calendarProps.calendarWeekStartDay,
+        nextMonthLabel: nextMonthLabel,
+        onCalendarChange: calendarProps.onCalendarChange,
+        onCalendarSelect: calendarProps.onCalendarSelect,
+        previousMonthLabel: previousMonthLabel,
+        shouldSetFocusOnCurrentDay: calendarProps.shouldSetFocusOnCurrentDay,
+        menuInnerWrapper: calendarProps.menuInnerWrapper
+      })), shouldShowCalendarButton && !isDisabled ? /*#__PURE__*/React.createElement(_useId.IdProvider, {
+        prefix: "open-calendar-label--"
+      }, function (_ref3) {
+        var openCalendarLabelId = _ref3.id;
+        return /*#__PURE__*/React.createElement(_compiled.Box, {
+          xcss: (0, _css.cx)(styles.iconContainerStyles, value && !hideIcon ? styles.iconSpacingWithClearButtonStyles : styles.iconSpacingWithoutClearButtonStyles)
+        }, /*#__PURE__*/React.createElement(_new.IconButton, {
+          appearance: "subtle",
+          label: !inputLabelId ? fullopenCalendarLabel : openCalendarLabel,
+          "aria-labelledby": inputLabelId ? "".concat(inputLabelId, " ").concat(openCalendarLabelId) : undefined,
+          id: openCalendarLabelId,
+          icon: function icon(iconProps) {
+            return /*#__PURE__*/React.createElement(_calendar.default, (0, _extends2.default)({}, iconProps, {
+              color: "var(--ds-icon, #44546F)"
+            }));
+          },
+          onClick: _this2.onCalendarButtonClick,
+          onKeyDown: _this2.onCalendarButtonKeyDown,
+          ref: _this2.calendarButtonRef,
+          testId: testId && "".concat(testId, "--open-calendar-button")
+        }));
+      }) : null);
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/cjs/components/date-picker-fc.compiled.css

@@ -0,0 +1,16 @@
+
+._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tke1k8s{min-height:1.5rem}
+._1ul91k8s{min-width:1.5rem}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._i0dl1kw7{flex-basis:inherit}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}