@atlaskit/datetime-picker 18.6.0 → 18.7.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/datetime-picker
 
+## 18.7.1
+
+### Patch Changes
+
+- [`a7ec100f7d560`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a7ec100f7d560) -
+  The top-layer code path now uses `@atlaskit/top-layer`'s `useAnchoredPopover`, so these popovers
+  are capped to the viewport and one too wide for the space beside its trigger moves to a roomier
+  side rather than wrapping into it. No public API change. Behind the `platform-dst-top-layer` gate
+  (`platform-dst-top-layer-tooltip` for `@atlaskit/tooltip`, `platform-dst-top-layer-spotlight` for
+  `@atlaskit/spotlight`); legacy (flag-off) behaviour is unchanged.
+- Updated dependencies
+
+## 18.7.0
+
+### Minor Changes
+
+- [`22469cd6605a3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/22469cd6605a3) -
+  When platform-dst-locale-week-start-day is enabled, Calendar and DatePicker default the first day
+  of the week from the locale via Intl.Locale.getWeekInfo(). @atlaskit/locale adds
+  getFirstDayOfWeek() for that lookup. Pass weekStartDay to keep Sunday or any other start day.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.6.0
 
 ### Minor Changes

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

@@ -45,7 +45,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; }
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.5.2";
+var packageVersion = "18.7.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -503,7 +503,7 @@ var DatePicker = /*#__PURE__*/(0, _react.forwardRef)(function (props, _forwarded
     onCalendarChange: onCalendarChange,
     onCalendarSelect: onCalendarSelect,
     calendarLocale: locale,
-    calendarWeekStartDay: weekStartDay,
+    calendarWeekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : (0, _fg.fg)('platform-dst-locale-week-start-day') ? l10n.getFirstDayOfWeek() : undefined,
     shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay,
     /**
      * This overrides the inner wrapper the Calendar.

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

@@ -33,7 +33,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 // for typing `process`
 // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.5.2";
+var packageVersion = "18.7.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -32,7 +32,7 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 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; } // oxlint-disable-next-line @atlassian/no-restricted-imports
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.5.2";
+var packageVersion = "18.7.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

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

@@ -16,7 +16,7 @@ var _components = require("@atlaskit/react-select/components");
 var _index = require("@atlaskit/top-layer/placement-map/index");
 var _popover = require("@atlaskit/top-layer/popover/popover");
 var _popoverSurface = require("@atlaskit/top-layer/popover-surface");
-var _useAnchorPosition = require("@atlaskit/top-layer/use-anchor-position");
+var _useAnchoredPopover = require("@atlaskit/top-layer/use-anchored-popover");
 var _excluded = ["className", "clearValue", "cx", "getStyles", "getValue", "hasValue", "innerProps", "innerRef", "isLoading", "isMulti", "isRtl", "maxMenuHeight", "menuPlacement", "menuPosition", "menuShouldScrollIntoView", "minMenuHeight", "options", "placement", "selectOption", "selectProps", "setValue", "children"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
@@ -30,7 +30,7 @@ var popupPlacement = (0, _index.fromLegacyPlacement)({
 /**
  * Top-layer version of the fixed layer menu used in the time picker.
  *
- * Uses `Popover` + `useAnchorPosition` so the time options list renders
+ * Uses `Popover` + `useAnchoredPopover` so the time options list renders
  * in the browser's top layer via the native Popover API and is positioned
  * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
  * and portal-based layering.
@@ -66,7 +66,7 @@ var FixedLayerMenuTopLayer = exports.FixedLayerMenuTopLayer = function FixedLaye
   var triggerRef = (0, _react.useRef)((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
   triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
   var popoverRef = (0, _react.useRef)(null);
-  (0, _useAnchorPosition.useAnchorPosition)({
+  (0, _useAnchoredPopover.useAnchoredPopover)({
     anchorRef: triggerRef,
     popoverRef: popoverRef,
     placement: popupPlacement,

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

@@ -32,7 +32,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.5.2";
+const packageVersion = "18.7.0";
 const styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -431,7 +431,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, _forwardedRef) => {
     onCalendarChange,
     onCalendarSelect,
     calendarLocale: locale,
-    calendarWeekStartDay: weekStartDay,
+    calendarWeekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : fg('platform-dst-locale-week-start-day') ? l10n.getFirstDayOfWeek() : undefined,
     shouldSetFocusOnCurrentDay,
     /**
      * This overrides the inner wrapper the Calendar.

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

@@ -20,7 +20,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.5.2";
+const packageVersion = "18.7.0";
 const analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName,

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

@@ -19,7 +19,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 const packageName = "@atlaskit/datetime-picker";
-const packageVersion = "18.5.2";
+const packageVersion = "18.7.0";
 const defaultTimeFormat = 'h:mma';
 const menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

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

@@ -7,7 +7,7 @@ import { components } from '@atlaskit/react-select/components';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
 import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
-import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
 
 /**
  * Bottom-start placement: time options menu appears below and aligned to the
@@ -20,7 +20,7 @@ const popupPlacement = fromLegacyPlacement({
 /**
  * Top-layer version of the fixed layer menu used in the time picker.
  *
- * Uses `Popover` + `useAnchorPosition` so the time options list renders
+ * Uses `Popover` + `useAnchoredPopover` so the time options list renders
  * in the browser's top layer via the native Popover API and is positioned
  * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
  * and portal-based layering.
@@ -57,7 +57,7 @@ export const FixedLayerMenuTopLayer = ({
   const triggerRef = useRef((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
   triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
   const popoverRef = useRef(null);
-  useAnchorPosition({
+  useAnchoredPopover({
     anchorRef: triggerRef,
     popoverRef,
     placement: popupPlacement,

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

@@ -38,7 +38,7 @@ import { MenuTopLayer } from '../internal/menu-top-layer';
 import { parseDate } from '../internal/parse-date';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.5.2";
+var packageVersion = "18.7.0";
 var styles = {
   pickerContainerStyle: "_kqswh2mm",
   dropdownIndicatorStyles: "_1ul91k8s _1tke1k8s _1e0c1txw _4cvr1h6o _1bah1h6o",
@@ -496,7 +496,7 @@ var DatePicker = /*#__PURE__*/forwardRef(function (props, _forwardedRef) {
     onCalendarChange: onCalendarChange,
     onCalendarSelect: onCalendarSelect,
     calendarLocale: locale,
-    calendarWeekStartDay: weekStartDay,
+    calendarWeekStartDay: weekStartDay !== null && weekStartDay !== void 0 ? weekStartDay : fg('platform-dst-locale-week-start-day') ? l10n.getFirstDayOfWeek() : undefined,
     shouldSetFocusOnCurrentDay: shouldSetFocusOnCurrentDay,
     /**
      * This overrides the inner wrapper the Calendar.

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

@@ -27,7 +27,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import DatePicker from './date-picker';
 import TimePicker from './time-picker';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.5.2";
+var packageVersion = "18.7.0";
 var analyticsAttributes = {
   componentName: 'dateTimePicker',
   packageName: packageName,

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

@@ -25,7 +25,7 @@ import { convertTokens } from '../internal/parse-tokens';
 import { placeholderDatetime } from '../internal/placeholder-date-time';
 import { makeSingleValue } from '../internal/single-value';
 var packageName = "@atlaskit/datetime-picker";
-var packageVersion = "18.5.2";
+var packageVersion = "18.7.0";
 var defaultTimeFormat = 'h:mma';
 var menuStyles = {
   /* Need to remove default absolute positioning as that causes issues with position fixed */

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

@@ -9,7 +9,7 @@ import { components } from '@atlaskit/react-select/components';
 import { fromLegacyPlacement } from '@atlaskit/top-layer/placement-map/index';
 import { Popover } from '@atlaskit/top-layer/popover/popover';
 import { PopoverSurface } from '@atlaskit/top-layer/popover-surface';
-import { useAnchorPosition } from '@atlaskit/top-layer/use-anchor-position';
+import { useAnchoredPopover } from '@atlaskit/top-layer/use-anchored-popover';
 
 /**
  * Bottom-start placement: time options menu appears below and aligned to the
@@ -22,7 +22,7 @@ var popupPlacement = fromLegacyPlacement({
 /**
  * Top-layer version of the fixed layer menu used in the time picker.
  *
- * Uses `Popover` + `useAnchorPosition` so the time options list renders
+ * Uses `Popover` + `useAnchoredPopover` so the time options list renders
  * in the browser's top layer via the native Popover API and is positioned
  * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
  * and portal-based layering.
@@ -58,7 +58,7 @@ var FixedLayerMenuTopLayer = function FixedLayerMenuTopLayer(_ref) {
   var triggerRef = useRef((_selectProps$fixedLay = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay !== void 0 ? _selectProps$fixedLay : null);
   triggerRef.current = (_selectProps$fixedLay2 = selectProps.fixedLayerRef) !== null && _selectProps$fixedLay2 !== void 0 ? _selectProps$fixedLay2 : null;
   var popoverRef = useRef(null);
-  useAnchorPosition({
+  useAnchoredPopover({
     anchorRef: triggerRef,
     popoverRef: popoverRef,
     placement: popupPlacement,

package/dist/types/internal/fixed-layer-menu-top-layer.d.ts

@@ -2,7 +2,7 @@ import type { MenuProps, OptionType } from '@atlaskit/select/types';
 /**
  * Top-layer version of the fixed layer menu used in the time picker.
  *
- * Uses `Popover` + `useAnchorPosition` so the time options list renders
+ * Uses `Popover` + `useAnchoredPopover` so the time options list renders
  * in the browser's top layer via the native Popover API and is positioned
  * via CSS Anchor Positioning. This avoids overflow clipping, z-index wars,
  * and portal-based layering.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/datetime-picker",
-	"version": "18.6.0",
+	"version": "18.7.1",
 	"description": "A date time picker allows the user to select an associated date and time.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,20 +33,20 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^12.5.0",
 		"@atlaskit/button": "^25.3.0",
-		"@atlaskit/calendar": "^19.2.0",
+		"@atlaskit/calendar": "^19.3.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/ds-lib": "^8.0.0",
-		"@atlaskit/icon": "^37.6.0",
+		"@atlaskit/icon": "^37.7.0",
 		"@atlaskit/layering": "^5.2.0",
-		"@atlaskit/locale": "^5.2.0",
+		"@atlaskit/locale": "^5.3.0",
 		"@atlaskit/platform-feature-flags": "^2.2.0",
 		"@atlaskit/popper": "^9.4.0",
 		"@atlaskit/primitives": "^22.5.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/react-select": "^4.9.0",
 		"@atlaskit/select": "^22.11.0",
-		"@atlaskit/tokens": "^16.11.0",
-		"@atlaskit/top-layer": "^4.4.0",
+		"@atlaskit/tokens": "^16.12.0",
+		"@atlaskit/top-layer": "^5.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0"
@@ -90,6 +90,9 @@
 		},
 		"platform-dst-dp-parse-date-format": {
 			"type": "boolean"
+		},
+		"platform-dst-locale-week-start-day": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/datetime-picker/"