@atlaskit/calendar 14.2.2 → 14.3.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/calendar
 
+## 14.3.0
+
+### Minor Changes
+
+- [#111878](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/111878)
+  [`223959ef57c80`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/223959ef57c80) -
+  Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
+  is implicitly set to automatic.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 14.2.2
 
 ### Patch Changes
@@ -18,7 +31,7 @@
 
 - [#90213](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90213)
   [`aa06d98a6384`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/aa06d98a6384) -
-  Add support for React 18.
+  Add support for React 18 in non-strict mode.
 
 ## 14.1.0
 

package/README.md

@@ -13,4 +13,5 @@ yarn add @atlaskit/calendar
 
 ## Usage
 
-Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/core/calendar).
+Detailed docs and example usage can be found
+[here](https://atlaskit.atlassian.com/packages/core/calendar).

package/__perf__/examples.tsx

@@ -1,90 +1,73 @@
 import React from 'react';
 
 import { fireEvent } from '@testing-library/dom';
-import {
-  type InteractionTaskArgs,
-  type PublicInteractionTask,
-} from 'storybook-addon-performance';
+import { type InteractionTaskArgs, type PublicInteractionTask } from 'storybook-addon-performance';
 
 import Calendar from '../src';
 
 const testId = 'calendar-test-id';
 
-const getLastElement = (
-  container: HTMLElement,
-  testIdAttributeValue: string,
-) => {
-  const elements = container.querySelectorAll(
-    `[data-testId="${testIdAttributeValue}"]`,
-  );
-  return elements[elements.length - 1];
+const getLastElement = (container: HTMLElement, testIdAttributeValue: string) => {
+	const elements = container.querySelectorAll(`[data-testId="${testIdAttributeValue}"]`);
+	return elements[elements.length - 1];
 };
 
 const CalendarPerformance = () => {
-  return (
-    <Calendar
-      disabled={['2020-12-04']}
-      defaultPreviouslySelected={['2020-12-06']}
-      defaultSelected={['2020-12-18']}
-      defaultMonth={12}
-      defaultYear={2020}
-      testId={testId}
-    />
-  );
+	return (
+		<Calendar
+			disabled={['2020-12-04']}
+			defaultPreviouslySelected={['2020-12-06']}
+			defaultSelected={['2020-12-18']}
+			defaultMonth={12}
+			defaultYear={2020}
+			testId={testId}
+		/>
+	);
 };
 
 const interactionTasks: PublicInteractionTask[] = [
-  {
-    name: 'onFocus',
-    description: 'Render calendar and focus on it',
-    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-      const calendarContainer = getLastElement(
-        container,
-        `${testId}--container`,
-      );
-      fireEvent.focus(calendarContainer);
-    },
-  },
-  {
-    name: 'onBlur',
-    description: 'Render calendar and remove focus',
-    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-      const calendarContainer = getLastElement(
-        container,
-        `${testId}--container`,
-      );
-      fireEvent.focus(calendarContainer);
-      fireEvent.blur(calendarContainer);
-    },
-  },
-  {
-    name: 'onChange',
-    description: 'Render calendar and change month',
-    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-      const nextMonthButton = getLastElement(
-        container,
-        `${testId}--next-month`,
-      );
-      fireEvent.click(nextMonthButton);
-    },
-  },
-  {
-    name: 'onSelect',
-    description: 'Render calendar and click on day(date) cell',
-    run: async ({ container }: InteractionTaskArgs): Promise<void> => {
-      const dateCell = getLastElement(container, `${testId}--selected-day`);
-      fireEvent.click(dateCell);
-    },
-  },
+	{
+		name: 'onFocus',
+		description: 'Render calendar and focus on it',
+		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+			const calendarContainer = getLastElement(container, `${testId}--container`);
+			fireEvent.focus(calendarContainer);
+		},
+	},
+	{
+		name: 'onBlur',
+		description: 'Render calendar and remove focus',
+		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+			const calendarContainer = getLastElement(container, `${testId}--container`);
+			fireEvent.focus(calendarContainer);
+			fireEvent.blur(calendarContainer);
+		},
+	},
+	{
+		name: 'onChange',
+		description: 'Render calendar and change month',
+		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+			const nextMonthButton = getLastElement(container, `${testId}--next-month`);
+			fireEvent.click(nextMonthButton);
+		},
+	},
+	{
+		name: 'onSelect',
+		description: 'Render calendar and click on day(date) cell',
+		run: async ({ container }: InteractionTaskArgs): Promise<void> => {
+			const dateCell = getLastElement(container, `${testId}--selected-day`);
+			fireEvent.click(dateCell);
+		},
+	},
 ];
 
 CalendarPerformance.story = {
-  name: 'calendar',
-  parameters: {
-    performance: {
-      interactions: interactionTasks,
-    },
-  },
+	name: 'calendar',
+	parameters: {
+		performance: {
+			interactions: interactionTasks,
+		},
+	},
 };
 
 export default CalendarPerformance;

package/codemods/11.0.0-lite-mode.tsx

@@ -3,8 +3,8 @@ import { removeInnerProps } from './migrations/remove-inner-props';
 import { createTransformer } from './utils';
 
 const transformer = createTransformer('@atlaskit/calendar', [
-  flattenCertainInnerPropsAsProp,
-  removeInnerProps,
+	flattenCertainInnerPropsAsProp,
+	removeInnerProps,
 ]);
 
 export default transformer;

package/codemods/__tests__/11.0.0-lite-mode.tsx

@@ -5,10 +5,10 @@ import transformer from '../11.0.0-lite-mode';
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Calendar code-mods', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
 
@@ -32,7 +32,7 @@ describe('Calendar code-mods', () => {
       );
     }
     `,
-    `
+		`
     /* TODO: (from codemod) This file uses the @atlaskit/calendar \`innerProps\` which
     has now been removed due to its poor performance characteristics. Codemod
     has auto flattened 'className' & 'style' properties inside it if present as a standalone props to calendar.
@@ -58,13 +58,13 @@ describe('Calendar code-mods', () => {
       );
     }
     `,
-    `should flatten style & className in innerProps as standalone prop
+		`should flatten style & className in innerProps as standalone prop
       & then remove innerProps`,
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
 
@@ -89,7 +89,7 @@ describe('Calendar code-mods', () => {
       );
     }
     `,
-    `
+		`
     /* TODO: (from codemod) This file uses the @atlaskit/calendar \`innerProps\` which
     has now been removed due to its poor performance characteristics. Codemod
     has auto flattened 'className' & 'style' properties inside it if present as a standalone props to calendar.
@@ -115,13 +115,13 @@ describe('Calendar code-mods', () => {
       );
     }
     `,
-    `should only flatten style & className in innerProps as standalone prop
+		`should only flatten style & className in innerProps as standalone prop
       & then remove innerProps`,
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar= () => {
@@ -140,7 +140,7 @@ describe('Calendar code-mods', () => {
       );
     }
     `,
-    `
+		`
     /* TODO: (from codemod) This file uses the @atlaskit/calendar \`innerProps\` which
     has now been removed due to its poor performance characteristics. Codemod
     has auto flattened 'className' & 'style' properties inside it if present as a standalone props to calendar.
@@ -160,7 +160,7 @@ describe('Calendar code-mods', () => {
       );
     }
     `,
-    `should not flatten any other prop apart from style & className in innerProps
+		`should not flatten any other prop apart from style & className in innerProps
       & just remove innerProps`,
-  );
+	);
 });

package/codemods/__tests__/flatten-certain-inner-props-as-prop.tsx

@@ -3,17 +3,15 @@ jest.autoMockOff();
 import { flattenCertainInnerPropsAsProp } from '../migrations/flatten-certain-inner-props-as-prop';
 import { createTransformer } from '../utils';
 
-const transformer = createTransformer('@atlaskit/calendar', [
-  flattenCertainInnerPropsAsProp,
-]);
+const transformer = createTransformer('@atlaskit/calendar', [flattenCertainInnerPropsAsProp]);
 
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Flatten Inner Prop Style As Prop', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar = () => {
@@ -30,7 +28,7 @@ describe('Flatten Inner Prop Style As Prop', () => {
       )
     };
   `,
-    `
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar = () => {
@@ -51,12 +49,12 @@ describe('Flatten Inner Prop Style As Prop', () => {
       );
     };
   `,
-    'should flatten style & className properties in inner props as a new standalone props',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should flatten style & className properties in inner props as a new standalone props',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar = () => {
@@ -69,7 +67,7 @@ describe('Flatten Inner Prop Style As Prop', () => {
       )
     };
   `,
-    `
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar = () => {
@@ -82,12 +80,12 @@ describe('Flatten Inner Prop Style As Prop', () => {
       );
     };
   `,
-    'should just flatten className property in inner props as a new standalone prop',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should just flatten className property in inner props as a new standalone prop',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar = () => {
@@ -103,7 +101,7 @@ describe('Flatten Inner Prop Style As Prop', () => {
       )
     };
   `,
-    `
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar = () => {
@@ -122,12 +120,12 @@ describe('Flatten Inner Prop Style As Prop', () => {
       );
     };
   `,
-    'should just flatten style property in inner props as a new standalone prop',
-  );
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+		'should just flatten style property in inner props as a new standalone prop',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar = () => {
@@ -140,7 +138,7 @@ describe('Flatten Inner Prop Style As Prop', () => {
       )
     };
   `,
-    `
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
     const SimpleCalendar = () => {
@@ -153,6 +151,6 @@ describe('Flatten Inner Prop Style As Prop', () => {
       )
     };
   `,
-    'should not flatten any other prop in inner props if className & style prop is not present',
-  );
+		'should not flatten any other prop in inner props if className & style prop is not present',
+	);
 });

package/codemods/__tests__/remove-inner-props.tsx

@@ -8,10 +8,10 @@ const transformer = createTransformer('@atlaskit/calendar', [removeInnerProps]);
 const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
 
 describe('Remove innerProps', () => {
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
 
@@ -28,7 +28,7 @@ describe('Remove innerProps', () => {
       );
     }
   `,
-    `
+		`
     /* TODO: (from codemod) This file uses the @atlaskit/calendar \`innerProps\` which
     has now been removed due to its poor performance characteristics. Codemod
     has auto flattened 'className' & 'style' properties inside it if present as a standalone props to calendar.
@@ -41,13 +41,13 @@ describe('Remove innerProps', () => {
       return <Calendar />;
     }
   `,
-    'should remove innerProps from Calendar and leave a TODO comment',
-  );
+		'should remove innerProps from Calendar and leave a TODO comment',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import AkCalendar from '@atlaskit/calendar';
 
@@ -64,7 +64,7 @@ describe('Remove innerProps', () => {
       );
     }
   `,
-    `
+		`
     /* TODO: (from codemod) This file uses the @atlaskit/calendar \`innerProps\` which
     has now been removed due to its poor performance characteristics. Codemod
     has auto flattened 'className' & 'style' properties inside it if present as a standalone props to calendar.
@@ -77,13 +77,13 @@ describe('Remove innerProps', () => {
       return <AkCalendar />;
     }
   `,
-    'should also remove innerProps from some random default import name of Calendar (eg: AkCalendar) and leave a TODO comment',
-  );
+		'should also remove innerProps from some random default import name of Calendar (eg: AkCalendar) and leave a TODO comment',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
 
@@ -103,7 +103,7 @@ describe('Remove innerProps', () => {
       );
     }
   `,
-    `
+		`
     /* TODO: (from codemod) This file uses the @atlaskit/calendar \`innerProps\` which
     has now been removed due to its poor performance characteristics. Codemod
     has auto flattened 'className' & 'style' properties inside it if present as a standalone props to calendar.
@@ -121,13 +121,13 @@ describe('Remove innerProps', () => {
       );
     }
   `,
-    'should remove innerProps from Calendar, leave a TODO comment & just keep other props intact',
-  );
+		'should remove innerProps from Calendar, leave a TODO comment & just keep other props intact',
+	);
 
-  defineInlineTest(
-    { default: transformer, parser: 'tsx' },
-    {},
-    `
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
 
@@ -141,7 +141,7 @@ describe('Remove innerProps', () => {
       );
     }
   `,
-    `
+		`
     import React from 'react';
     import Calendar from '@atlaskit/calendar';
 
@@ -155,6 +155,6 @@ describe('Remove innerProps', () => {
       );
     }
   `,
-    'should not remove & leave a TODO comment when innerProps is itself not present',
-  );
+		'should not remove & leave a TODO comment when innerProps is itself not present',
+	);
 });

package/codemods/migrations/flatten-certain-inner-props-as-prop.tsx

@@ -5,7 +5,7 @@ const prop = 'innerProps';
 const childProps = ['style', 'className'];
 
 export const flattenCertainInnerPropsAsProp = flattenCertainChildPropsAsProp(
-  component,
-  prop,
-  childProps,
+	component,
+	prop,
+	childProps,
 );