@atlaskit/calendar 18.1.0 → 18.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/calendar.docs.tsx +4 -0
- package/compass.yml +47 -0
- package/dist/cjs/calendar.js +1 -1
- package/dist/cjs/internal/components/date.compiled.css +5 -1
- package/dist/cjs/internal/components/date.js +6 -1
- package/dist/cjs/internal/components/header.compiled.css +3 -0
- package/dist/cjs/internal/components/header.js +11 -1
- package/dist/es2019/calendar.js +1 -1
- package/dist/es2019/internal/components/date.compiled.css +5 -1
- package/dist/es2019/internal/components/date.js +6 -1
- package/dist/es2019/internal/components/header.compiled.css +3 -0
- package/dist/es2019/internal/components/header.js +11 -1
- package/dist/esm/calendar.js +1 -1
- package/dist/esm/internal/components/date.compiled.css +5 -1
- package/dist/esm/internal/components/date.js +6 -1
- package/dist/esm/internal/components/header.compiled.css +3 -0
- package/dist/esm/internal/components/header.js +11 -1
- package/dist/types/internal/components/header.d.ts +4 -0
- package/package.json +11 -8
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/calendar
|
|
2
2
|
|
|
3
|
+
## 18.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies
|
|
8
|
+
|
|
9
|
+
## 18.2.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [`00debd55c4e53`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/00debd55c4e53) -
|
|
14
|
+
Add motion to Calendar day cells and month/year navigation arrows behind the
|
|
15
|
+
platform-dst-motion-uplift-list-item feature flag
|
|
16
|
+
|
|
3
17
|
## 18.1.0
|
|
4
18
|
|
|
5
19
|
### Minor Changes
|
package/calendar.docs.tsx
CHANGED
|
@@ -9,6 +9,10 @@ const documentation: StructuredContentSource = {
|
|
|
9
9
|
description:
|
|
10
10
|
"A calendar component for date selection and display. This component is in Beta phase, meaning it's stable at version 1.0+ but may receive improvements based on customer feedback.",
|
|
11
11
|
status: 'general-availability',
|
|
12
|
+
designSource: {
|
|
13
|
+
figmaUrl:
|
|
14
|
+
'https://www.figma.com/design/BGz5AdkWe3yTIYdKnTSZuY/ADS-Components?node-id=13289-46824',
|
|
15
|
+
},
|
|
12
16
|
import: {
|
|
13
17
|
name: 'Calendar',
|
|
14
18
|
package: '@atlaskit/calendar',
|
package/compass.yml
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
configVersion: 1
|
|
2
|
+
id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/56862b4a-a6f2-478f-92e6-e3a2b57b0769
|
|
3
|
+
name: '@atlaskit/calendar'
|
|
4
|
+
ownerId: ari:cloud:teams::team/814283d6-8695-4329-b2f8-d78b2645722f # Design System Team (ADS)
|
|
5
|
+
labels:
|
|
6
|
+
- platform-code
|
|
7
|
+
- platform-afm
|
|
8
|
+
typeId: OTHER
|
|
9
|
+
fields:
|
|
10
|
+
tier: 4
|
|
11
|
+
lifecycle: Active
|
|
12
|
+
isMonorepoProject: true
|
|
13
|
+
links:
|
|
14
|
+
- name: Root Repository
|
|
15
|
+
type: REPOSITORY
|
|
16
|
+
url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
|
|
17
|
+
- name: Slack Channel
|
|
18
|
+
type: CHAT_CHANNEL
|
|
19
|
+
url: https://atlassian.enterprise.slack.com/archives/CFJ9DU39U # #help-design-system
|
|
20
|
+
- name: Calendar
|
|
21
|
+
type: REPOSITORY
|
|
22
|
+
url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/design-system/calendar
|
|
23
|
+
customFields:
|
|
24
|
+
- name: Department
|
|
25
|
+
type: text
|
|
26
|
+
value: Eng - Design System Fundamentals
|
|
27
|
+
- name: Technical Owner
|
|
28
|
+
type: user
|
|
29
|
+
value: ari:cloud:identity::user/557058:86a9b692-7997-49cb-9984-080801b1de91 # Jared Crowe
|
|
30
|
+
- name: Reviewer Team
|
|
31
|
+
type: text
|
|
32
|
+
value: ari:cloud:teams::team/be19136e-6275-419f-be0c-fcee844b8684 # Design System Engineers
|
|
33
|
+
- name: Required Reviewers Opt In
|
|
34
|
+
type: boolean
|
|
35
|
+
value: true
|
|
36
|
+
- name: Reviewer Selection Mechanism
|
|
37
|
+
type: text
|
|
38
|
+
value: random(3)
|
|
39
|
+
- name: Required Reviewer Approvals
|
|
40
|
+
type: number
|
|
41
|
+
value: 1
|
|
42
|
+
- name: Trusted Committers
|
|
43
|
+
type: text
|
|
44
|
+
value: ari:cloud:teams::team/814283d6-8695-4329-b2f8-d78b2645722f # Design System Team (ADS)
|
|
45
|
+
- name: Trusted Reviewer Teams
|
|
46
|
+
type: text
|
|
47
|
+
value: ari:cloud:teams::team/42f4416b-e028-4daa-b2a5-afe213ac75e1 # Design System Designers
|
package/dist/cjs/calendar.js
CHANGED
|
@@ -36,7 +36,7 @@ var styles = {
|
|
|
36
36
|
var analyticsAttributes = {
|
|
37
37
|
componentName: 'calendar',
|
|
38
38
|
packageName: "@atlaskit/calendar",
|
|
39
|
-
packageVersion: "18.0
|
|
39
|
+
packageVersion: "18.2.0"
|
|
40
40
|
};
|
|
41
41
|
var InnerCalendar = /*#__PURE__*/(0, _react.forwardRef)(function Calendar(_ref, ref) {
|
|
42
42
|
var day = _ref.day,
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
4
|
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
5
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
|
+
._v5641mma{transition:var(--ds-listitem-selected,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
7
|
+
._v5641x7n{transition:var(--ds-listitem-hovered,background-color border-color color 50ms cubic-bezier(.4,1,.6,1))}
|
|
6
8
|
._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
7
9
|
._1dqonqa1{border-style:solid}
|
|
8
10
|
._1h6d1j28{border-color:transparent}
|
|
@@ -31,7 +33,8 @@
|
|
|
31
33
|
._syazazsu{color:var(--ds-text-subtle,#505258)}
|
|
32
34
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
33
35
|
._y3gn1h6o{text-align:center}
|
|
34
|
-
._y4tirdoj{padding-inline-end:9px}
|
|
36
|
+
._y4tirdoj{padding-inline-end:9px}
|
|
37
|
+
._1gk4glyw:focus-visible{transition:none}._10knnqa1:focus-visible{border-style:solid}
|
|
35
38
|
._1wysdkaa:focus-visible{border-width:var(--ds-border-width-focused,2px)}
|
|
36
39
|
._pojj1v1w:focus-visible{border-color:var(--ds-border-focused,#4688ec)}
|
|
37
40
|
._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
|
|
@@ -42,5 +45,6 @@
|
|
|
42
45
|
._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
43
46
|
._irr31j28:hover{background-color:transparent}
|
|
44
47
|
._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
|
|
48
|
+
._1gglpoum:active{transition:var(--ds-listitem-pressed,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
45
49
|
._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
|
|
46
50
|
._9h8hi7uo:active{color:var(--ds-text,#292a2e)}
|
|
@@ -23,6 +23,11 @@ var dateCellDisabledStyle = null;
|
|
|
23
23
|
var dateCellStyles = null;
|
|
24
24
|
// platform-dst-shape-theme-default TODO: Merge into base after rollout
|
|
25
25
|
var dateCellStylesT26Shape = null;
|
|
26
|
+
|
|
27
|
+
// platform-dst-motion-uplift-list-item cleanup: once fully rolled out, fold these
|
|
28
|
+
// transitions into the styles above and drop the gate in the `css` array below.
|
|
29
|
+
var dateCellMotionStyles = null;
|
|
30
|
+
var dateCellSelectedMotionStyles = null;
|
|
26
31
|
var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Date(_ref2, _ref) {
|
|
27
32
|
var day = _ref2.children,
|
|
28
33
|
_ref2$isDisabled = _ref2.isDisabled,
|
|
@@ -99,7 +104,7 @@ var Date = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
99
104
|
"data-sibling": isSibling || undefined,
|
|
100
105
|
"data-today": isToday || undefined,
|
|
101
106
|
"data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day")),
|
|
102
|
-
className: (0, _runtime.ax)(["_kkk2n7od _2rkofajl _11c8fhey _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazi7uo _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj1v1w _10knnqa1 _1wysdkaa _irr31dpa _30l3i7uo _1di6fcek _9h8hi7uo", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", isSibling && "_syaz1rpy _30l31rpy", isToday && "_syaz6x5g _k48pwu06 _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk15s3 _syazazsu _30l3azsu", isSelected && "_bfhk15s3 _syaz6x5g _irr3ufnl _30l36x5g", isDisabled && "_syaz1gmx _80om13gf _irr31j28 _30l31gmx"])
|
|
107
|
+
className: (0, _runtime.ax)(["_kkk2n7od _2rkofajl _11c8fhey _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazi7uo _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj1v1w _10knnqa1 _1wysdkaa _irr31dpa _30l3i7uo _1di6fcek _9h8hi7uo", (0, _platformFeatureFlags.fg)('platform-dst-shape-theme-default') && "_2rko1qi0", isSibling && "_syaz1rpy _30l31rpy", isToday && "_syaz6x5g _k48pwu06 _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk15s3 _syazazsu _30l3azsu", isSelected && "_bfhk15s3 _syaz6x5g _irr3ufnl _30l36x5g", isDisabled && "_syaz1gmx _80om13gf _irr31j28 _30l31gmx", (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-list-item') && "_v5641x7n _1gk4glyw _1gglpoum", (isSelected || isPreviouslySelected) && (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-list-item') && "_v5641mma"])
|
|
103
108
|
}, day));
|
|
104
109
|
}));
|
|
105
110
|
Date.displayName = 'Date';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
._1rxy1x7n button{transition:var(--ds-listitem-hovered,background-color border-color color 50ms cubic-bezier(.4,1,.6,1))}
|
|
2
|
+
._21j8glyw button:focus-visible{transition:none}
|
|
3
|
+
._1xkmpoum button:active{transition:var(--ds-listitem-pressed,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* header.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
1
2
|
"use strict";
|
|
2
3
|
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -6,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
7
|
value: true
|
|
7
8
|
});
|
|
8
9
|
exports.default = void 0;
|
|
10
|
+
require("./header.compiled.css");
|
|
11
|
+
var _runtime = require("@compiled/react/runtime");
|
|
9
12
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
10
13
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
11
14
|
var _react = _interopRequireWildcard(require("react"));
|
|
@@ -16,8 +19,12 @@ var _chevronDoubleLeft = _interopRequireDefault(require("@atlaskit/icon/core/che
|
|
|
16
19
|
var _chevronDoubleRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-double-right"));
|
|
17
20
|
var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/core/chevron-left"));
|
|
18
21
|
var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/core/chevron-right"));
|
|
22
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
23
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
20
24
|
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); }
|
|
25
|
+
// platform-dst-motion-uplift-list-item cleanup: once fully rolled out, drop the gate
|
|
26
|
+
// in the return below and always apply these transitions.
|
|
27
|
+
var arrowMotionStyles = null;
|
|
21
28
|
var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
|
|
22
29
|
var monthLongTitle = _ref.monthLongTitle,
|
|
23
30
|
year = _ref.year,
|
|
@@ -77,7 +84,7 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
|
|
|
77
84
|
}
|
|
78
85
|
handleClickNextYear(e);
|
|
79
86
|
};
|
|
80
|
-
|
|
87
|
+
var header = /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
81
88
|
paddingInline: "space.100"
|
|
82
89
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
|
|
83
90
|
space: "space.0",
|
|
@@ -147,6 +154,9 @@ var Header = /*#__PURE__*/(0, _react.memo)(function Header(_ref) {
|
|
|
147
154
|
},
|
|
148
155
|
label: "".concat(nextYearLabel, ", ").concat(nextYearHeading)
|
|
149
156
|
}))));
|
|
157
|
+
return (0, _platformFeatureFlags.fg)('platform-dst-motion-uplift-list-item') ? /*#__PURE__*/_react.default.createElement("div", {
|
|
158
|
+
className: (0, _runtime.ax)(["_1rxy1x7n _1xkmpoum _21j8glyw"])
|
|
159
|
+
}, header) : header;
|
|
150
160
|
});
|
|
151
161
|
Header.displayName = 'Header';
|
|
152
162
|
|
package/dist/es2019/calendar.js
CHANGED
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
4
|
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
5
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
|
+
._v5641mma{transition:var(--ds-listitem-selected,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
7
|
+
._v5641x7n{transition:var(--ds-listitem-hovered,background-color border-color color 50ms cubic-bezier(.4,1,.6,1))}
|
|
6
8
|
._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
7
9
|
._1dqonqa1{border-style:solid}
|
|
8
10
|
._1h6d1j28{border-color:transparent}
|
|
@@ -31,7 +33,8 @@
|
|
|
31
33
|
._syazazsu{color:var(--ds-text-subtle,#505258)}
|
|
32
34
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
33
35
|
._y3gn1h6o{text-align:center}
|
|
34
|
-
._y4tirdoj{padding-inline-end:9px}
|
|
36
|
+
._y4tirdoj{padding-inline-end:9px}
|
|
37
|
+
._1gk4glyw:focus-visible{transition:none}._10knnqa1:focus-visible{border-style:solid}
|
|
35
38
|
._1wysdkaa:focus-visible{border-width:var(--ds-border-width-focused,2px)}
|
|
36
39
|
._pojj1v1w:focus-visible{border-color:var(--ds-border-focused,#4688ec)}
|
|
37
40
|
._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
|
|
@@ -42,5 +45,6 @@
|
|
|
42
45
|
._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
43
46
|
._irr31j28:hover{background-color:transparent}
|
|
44
47
|
._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
|
|
48
|
+
._1gglpoum:active{transition:var(--ds-listitem-pressed,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
45
49
|
._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
|
|
46
50
|
._9h8hi7uo:active{color:var(--ds-text,#292a2e)}
|
|
@@ -14,6 +14,11 @@ const dateCellDisabledStyle = null;
|
|
|
14
14
|
const dateCellStyles = null;
|
|
15
15
|
// platform-dst-shape-theme-default TODO: Merge into base after rollout
|
|
16
16
|
const dateCellStylesT26Shape = null;
|
|
17
|
+
|
|
18
|
+
// platform-dst-motion-uplift-list-item cleanup: once fully rolled out, fold these
|
|
19
|
+
// transitions into the styles above and drop the gate in the `css` array below.
|
|
20
|
+
const dateCellMotionStyles = null;
|
|
21
|
+
const dateCellSelectedMotionStyles = null;
|
|
17
22
|
const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
|
|
18
23
|
children: day,
|
|
19
24
|
isDisabled = false,
|
|
@@ -85,7 +90,7 @@ const Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date({
|
|
|
85
90
|
"data-sibling": isSibling || undefined,
|
|
86
91
|
"data-today": isToday || undefined,
|
|
87
92
|
"data-testid": testId && (isSelected ? `${testId}--selected-day` : `${testId}--day`),
|
|
88
|
-
className: ax(["_kkk2n7od _2rkofajl _11c8fhey _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazi7uo _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj1v1w _10knnqa1 _1wysdkaa _irr31dpa _30l3i7uo _1di6fcek _9h8hi7uo", fg('platform-dst-shape-theme-default') && "_2rko1qi0", isSibling && "_syaz1rpy _30l31rpy", isToday && "_syaz6x5g _k48pwu06 _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk15s3 _syazazsu _30l3azsu", isSelected && "_bfhk15s3 _syaz6x5g _irr3ufnl _30l36x5g", isDisabled && "_syaz1gmx _80om13gf _irr31j28 _30l31gmx"])
|
|
93
|
+
className: ax(["_kkk2n7od _2rkofajl _11c8fhey _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazi7uo _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj1v1w _10knnqa1 _1wysdkaa _irr31dpa _30l3i7uo _1di6fcek _9h8hi7uo", fg('platform-dst-shape-theme-default') && "_2rko1qi0", isSibling && "_syaz1rpy _30l31rpy", isToday && "_syaz6x5g _k48pwu06 _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk15s3 _syazazsu _30l3azsu", isSelected && "_bfhk15s3 _syaz6x5g _irr3ufnl _30l36x5g", isDisabled && "_syaz1gmx _80om13gf _irr31j28 _30l31gmx", fg('platform-dst-motion-uplift-list-item') && "_v5641x7n _1gk4glyw _1gglpoum", (isSelected || isPreviouslySelected) && fg('platform-dst-motion-uplift-list-item') && "_v5641mma"])
|
|
89
94
|
}, day));
|
|
90
95
|
}));
|
|
91
96
|
Date.displayName = 'Date';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
._1rxy1x7n button{transition:var(--ds-listitem-hovered,background-color border-color color 50ms cubic-bezier(.4,1,.6,1))}
|
|
2
|
+
._21j8glyw button:focus-visible{transition:none}
|
|
3
|
+
._1xkmpoum button:active{transition:var(--ds-listitem-pressed,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
/* header.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
1
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./header.compiled.css";
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
2
5
|
import React, { memo, useState } from 'react';
|
|
3
6
|
import { IconButton } from '@atlaskit/button/new';
|
|
4
7
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
@@ -7,7 +10,11 @@ import ChevronDoubleLeftIcon from '@atlaskit/icon/core/chevron-double-left';
|
|
|
7
10
|
import ChevronDoubleRightIcon from '@atlaskit/icon/core/chevron-double-right';
|
|
8
11
|
import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
|
|
9
12
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
13
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
10
14
|
import { Box, Inline } from '@atlaskit/primitives/compiled';
|
|
15
|
+
// platform-dst-motion-uplift-list-item cleanup: once fully rolled out, drop the gate
|
|
16
|
+
// in the return below and always apply these transitions.
|
|
17
|
+
const arrowMotionStyles = null;
|
|
11
18
|
const Header = /*#__PURE__*/memo(function Header({
|
|
12
19
|
monthLongTitle,
|
|
13
20
|
year,
|
|
@@ -61,7 +68,7 @@ const Header = /*#__PURE__*/memo(function Header({
|
|
|
61
68
|
}
|
|
62
69
|
handleClickNextYear(e);
|
|
63
70
|
};
|
|
64
|
-
|
|
71
|
+
const header = /*#__PURE__*/React.createElement(Box, {
|
|
65
72
|
paddingInline: "space.100"
|
|
66
73
|
}, /*#__PURE__*/React.createElement(Inline, {
|
|
67
74
|
space: "space.0",
|
|
@@ -123,6 +130,9 @@ const Header = /*#__PURE__*/memo(function Header({
|
|
|
123
130
|
})),
|
|
124
131
|
label: `${nextYearLabel}, ${nextYearHeading}`
|
|
125
132
|
}))));
|
|
133
|
+
return fg('platform-dst-motion-uplift-list-item') ? /*#__PURE__*/React.createElement("div", {
|
|
134
|
+
className: ax(["_1rxy1x7n _1xkmpoum _21j8glyw"])
|
|
135
|
+
}, header) : header;
|
|
126
136
|
});
|
|
127
137
|
Header.displayName = 'Header';
|
|
128
138
|
|
package/dist/esm/calendar.js
CHANGED
|
@@ -27,7 +27,7 @@ var styles = {
|
|
|
27
27
|
var analyticsAttributes = {
|
|
28
28
|
componentName: 'calendar',
|
|
29
29
|
packageName: "@atlaskit/calendar",
|
|
30
|
-
packageVersion: "18.0
|
|
30
|
+
packageVersion: "18.2.0"
|
|
31
31
|
};
|
|
32
32
|
var InnerCalendar = /*#__PURE__*/forwardRef(function Calendar(_ref, ref) {
|
|
33
33
|
var day = _ref.day,
|
|
@@ -3,6 +3,8 @@
|
|
|
3
3
|
._11c8fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
4
|
._2rko1qi0{border-radius:var(--ds-radius-medium,6px)}
|
|
5
5
|
._2rkofajl{border-radius:var(--ds-radius-small,3px)}
|
|
6
|
+
._v5641mma{transition:var(--ds-listitem-selected,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
7
|
+
._v5641x7n{transition:var(--ds-listitem-hovered,background-color border-color color 50ms cubic-bezier(.4,1,.6,1))}
|
|
6
8
|
._189e1dm9{border-width:var(--ds-border-width-selected,2px)}
|
|
7
9
|
._1dqonqa1{border-style:solid}
|
|
8
10
|
._1h6d1j28{border-color:transparent}
|
|
@@ -31,7 +33,8 @@
|
|
|
31
33
|
._syazazsu{color:var(--ds-text-subtle,#505258)}
|
|
32
34
|
._syazi7uo{color:var(--ds-text,#292a2e)}
|
|
33
35
|
._y3gn1h6o{text-align:center}
|
|
34
|
-
._y4tirdoj{padding-inline-end:9px}
|
|
36
|
+
._y4tirdoj{padding-inline-end:9px}
|
|
37
|
+
._1gk4glyw:focus-visible{transition:none}._10knnqa1:focus-visible{border-style:solid}
|
|
35
38
|
._1wysdkaa:focus-visible{border-width:var(--ds-border-width-focused,2px)}
|
|
36
39
|
._pojj1v1w:focus-visible{border-color:var(--ds-border-focused,#4688ec)}
|
|
37
40
|
._30l31gmx:hover{color:var(--ds-text-disabled,#080f214a)}
|
|
@@ -42,5 +45,6 @@
|
|
|
42
45
|
._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
|
|
43
46
|
._irr31j28:hover{background-color:transparent}
|
|
44
47
|
._irr3ufnl:hover{background-color:var(--ds-background-selected-hovered,#cfe1fd)}
|
|
48
|
+
._1gglpoum:active{transition:var(--ds-listitem-pressed,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
45
49
|
._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}
|
|
46
50
|
._9h8hi7uo:active{color:var(--ds-text,#292a2e)}
|
|
@@ -14,6 +14,11 @@ var dateCellDisabledStyle = null;
|
|
|
14
14
|
var dateCellStyles = null;
|
|
15
15
|
// platform-dst-shape-theme-default TODO: Merge into base after rollout
|
|
16
16
|
var dateCellStylesT26Shape = null;
|
|
17
|
+
|
|
18
|
+
// platform-dst-motion-uplift-list-item cleanup: once fully rolled out, fold these
|
|
19
|
+
// transitions into the styles above and drop the gate in the `css` array below.
|
|
20
|
+
var dateCellMotionStyles = null;
|
|
21
|
+
var dateCellSelectedMotionStyles = null;
|
|
17
22
|
var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref2, _ref) {
|
|
18
23
|
var day = _ref2.children,
|
|
19
24
|
_ref2$isDisabled = _ref2.isDisabled,
|
|
@@ -90,7 +95,7 @@ var Date = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Date(_ref2, _ref)
|
|
|
90
95
|
"data-sibling": isSibling || undefined,
|
|
91
96
|
"data-today": isToday || undefined,
|
|
92
97
|
"data-testid": testId && (isSelected ? "".concat(testId, "--selected-day") : "".concat(testId, "--day")),
|
|
93
|
-
className: ax(["_kkk2n7od _2rkofajl _11c8fhey _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazi7uo _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj1v1w _10knnqa1 _1wysdkaa _irr31dpa _30l3i7uo _1di6fcek _9h8hi7uo", fg('platform-dst-shape-theme-default') && "_2rko1qi0", isSibling && "_syaz1rpy _30l31rpy", isToday && "_syaz6x5g _k48pwu06 _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk15s3 _syazazsu _30l3azsu", isSelected && "_bfhk15s3 _syaz6x5g _irr3ufnl _30l36x5g", isDisabled && "_syaz1gmx _80om13gf _irr31j28 _30l31gmx"])
|
|
98
|
+
className: ax(["_kkk2n7od _2rkofajl _11c8fhey _1h6d1j28 _1dqonqa1 _189e1dm9 _1e0c1ule _kqswh2mm _16jlkb7n _bfhk1j28 _syazi7uo _80omtlke _85i51b66 _1q511b66 _y4tirdoj _bozgrdoj _y3gn1h6o _pojj1v1w _10knnqa1 _1wysdkaa _irr31dpa _30l3i7uo _1di6fcek _9h8hi7uo", fg('platform-dst-shape-theme-default') && "_2rko1qi0", isSibling && "_syaz1rpy _30l31rpy", isToday && "_syaz6x5g _k48pwu06 _1ywu1ule _1qdgyh40 _18postnw _1hfk1r31 _aetrb3bt _1gufv77o _1czdv77o _g0nfv77o", isPreviouslySelected && "_bfhk15s3 _syazazsu _30l3azsu", isSelected && "_bfhk15s3 _syaz6x5g _irr3ufnl _30l36x5g", isDisabled && "_syaz1gmx _80om13gf _irr31j28 _30l31gmx", fg('platform-dst-motion-uplift-list-item') && "_v5641x7n _1gk4glyw _1gglpoum", (isSelected || isPreviouslySelected) && fg('platform-dst-motion-uplift-list-item') && "_v5641mma"])
|
|
94
99
|
}, day));
|
|
95
100
|
}));
|
|
96
101
|
Date.displayName = 'Date';
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
._1rxy1x7n button{transition:var(--ds-listitem-hovered,background-color border-color color 50ms cubic-bezier(.4,1,.6,1))}
|
|
2
|
+
._21j8glyw button:focus-visible{transition:none}
|
|
3
|
+
._1xkmpoum button:active{transition:var(--ds-listitem-pressed,background-color border-color color .1s cubic-bezier(.4,1,.6,1))}
|
|
@@ -1,5 +1,8 @@
|
|
|
1
|
+
/* header.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
1
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
|
+
import "./header.compiled.css";
|
|
5
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
3
6
|
import React, { memo, useState } from 'react';
|
|
4
7
|
import { IconButton } from '@atlaskit/button/new';
|
|
5
8
|
import { useId } from '@atlaskit/ds-lib/use-id';
|
|
@@ -8,7 +11,11 @@ import ChevronDoubleLeftIcon from '@atlaskit/icon/core/chevron-double-left';
|
|
|
8
11
|
import ChevronDoubleRightIcon from '@atlaskit/icon/core/chevron-double-right';
|
|
9
12
|
import ChevronLeftIcon from '@atlaskit/icon/core/chevron-left';
|
|
10
13
|
import ChevronRightIcon from '@atlaskit/icon/core/chevron-right';
|
|
14
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
11
15
|
import { Box, Inline } from '@atlaskit/primitives/compiled';
|
|
16
|
+
// platform-dst-motion-uplift-list-item cleanup: once fully rolled out, drop the gate
|
|
17
|
+
// in the return below and always apply these transitions.
|
|
18
|
+
var arrowMotionStyles = null;
|
|
12
19
|
var Header = /*#__PURE__*/memo(function Header(_ref) {
|
|
13
20
|
var monthLongTitle = _ref.monthLongTitle,
|
|
14
21
|
year = _ref.year,
|
|
@@ -68,7 +75,7 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
|
|
|
68
75
|
}
|
|
69
76
|
handleClickNextYear(e);
|
|
70
77
|
};
|
|
71
|
-
|
|
78
|
+
var header = /*#__PURE__*/React.createElement(Box, {
|
|
72
79
|
paddingInline: "space.100"
|
|
73
80
|
}, /*#__PURE__*/React.createElement(Inline, {
|
|
74
81
|
space: "space.0",
|
|
@@ -138,6 +145,9 @@ var Header = /*#__PURE__*/memo(function Header(_ref) {
|
|
|
138
145
|
},
|
|
139
146
|
label: "".concat(nextYearLabel, ", ").concat(nextYearHeading)
|
|
140
147
|
}))));
|
|
148
|
+
return fg('platform-dst-motion-uplift-list-item') ? /*#__PURE__*/React.createElement("div", {
|
|
149
|
+
className: ax(["_1rxy1x7n _1xkmpoum _21j8glyw"])
|
|
150
|
+
}, header) : header;
|
|
141
151
|
});
|
|
142
152
|
Header.displayName = 'Header';
|
|
143
153
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/calendar",
|
|
3
|
-
"version": "18.1
|
|
3
|
+
"version": "18.2.1",
|
|
4
4
|
"description": "An interactive calendar for date selection experiences.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -31,17 +31,17 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
|
-
"@atlaskit/analytics-next": "^12.
|
|
35
|
-
"@atlaskit/button": "^24.
|
|
34
|
+
"@atlaskit/analytics-next": "^12.2.0",
|
|
35
|
+
"@atlaskit/button": "^24.3.0",
|
|
36
36
|
"@atlaskit/css": "^1.0.0",
|
|
37
37
|
"@atlaskit/ds-lib": "^8.0.0",
|
|
38
|
-
"@atlaskit/heading": "^6.
|
|
39
|
-
"@atlaskit/icon": "^
|
|
38
|
+
"@atlaskit/heading": "^6.2.0",
|
|
39
|
+
"@atlaskit/icon": "^37.0.0",
|
|
40
40
|
"@atlaskit/locale": "^5.0.0",
|
|
41
41
|
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
42
|
-
"@atlaskit/primitives": "^20.
|
|
42
|
+
"@atlaskit/primitives": "^20.5.0",
|
|
43
43
|
"@atlaskit/react-compiler-gating": "^0.2.0",
|
|
44
|
-
"@atlaskit/tokens": "^15.
|
|
44
|
+
"@atlaskit/tokens": "^15.5.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|
|
46
46
|
"@compiled/react": "^0.20.0",
|
|
47
47
|
"date-fns": "^2.17.0"
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@atlaskit/form": "^16.1.0",
|
|
58
58
|
"@atlaskit/link": "^4.1.0",
|
|
59
59
|
"@atlaskit/section-message": "^9.2.0",
|
|
60
|
-
"@atlaskit/select": "^22.
|
|
60
|
+
"@atlaskit/select": "^22.5.0",
|
|
61
61
|
"@atlassian/ssr-tests": "workspace:^",
|
|
62
62
|
"@atlassian/structured-docs-types": "workspace:^",
|
|
63
63
|
"@testing-library/react": "^16.3.0",
|
|
@@ -92,6 +92,9 @@
|
|
|
92
92
|
"platform-feature-flags": {
|
|
93
93
|
"platform-dst-shape-theme-default": {
|
|
94
94
|
"type": "boolean"
|
|
95
|
+
},
|
|
96
|
+
"platform-dst-motion-uplift-list-item": {
|
|
97
|
+
"type": "boolean"
|
|
95
98
|
}
|
|
96
99
|
},
|
|
97
100
|
"homepage": "https://atlassian.design/components/calendar/"
|