@atlaskit/radio 8.3.2 → 8.3.3

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/radio
 
+## 8.3.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 8.3.2
 
 ### Patch Changes

package/codemods/__tests__/not-yet-migrate-aria-labelledby.tsx

@@ -10,6 +10,27 @@ describe('Rename `aria-labelledby` prop to `labelId`', () => {
 		{},
 		`
       import React from 'react';
+      import { Foo } from 'foo';
+
+      const SimpleRadio = () => {
+        return <Foo aria-labelledby="large" />;
+      }
+    `,
+		`
+      import React from 'react';
+      import { Foo } from 'foo';
+
+      const SimpleRadio = () => {
+        return <Foo aria-labelledby="large" />;
+      }
+    `,
+		'should do nothing with wrong import and wrong package',
+	);
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+      import React from 'react';
       import { Radio } from 'foo';
 
       const SimpleRadio = () => {
@@ -91,4 +112,463 @@ describe('Rename `aria-labelledby` prop to `labelId`', () => {
 			'should not mess up the other props',
 		);
 	});
+	defineInlineTest(
+		{ default: transformer, parser: 'tsx' },
+		{},
+		`
+/** @jsx jsx */
+import React from 'react';
+import { Radio } from '@atlaskit/radio';
+import { cssMap, jsx } from '@atlaskit/css';
+import { token } from '@atlaskit/tokens';
+import { FormattedMessage } from '@atlassian/jira-intl';
+import { isDefined } from '@atlassian/jira-portfolio-3-portfolio/src/common/ramda/index.tsx';
+import {
+  AUTO_SCHEDULE_OVERWRITE,
+  ISSUE_VALUES,
+  type AutoScheduleOverwriteOptions,
+  type IssueValues,
+} from '@atlassian/jira-portfolio-3-portfolio/src/common/view/constant.tsx';
+import commonMessages from '@atlassian/jira-portfolio-3-portfolio/src/common/view/messages.tsx';
+import messages from './messages.tsx';
+import type { Props } from './types.tsx';
+
+const DETAILED_OVERWRITE_OPTIONS = [
+  {
+    value: AUTO_SCHEDULE_OVERWRITE.ALL_VALUES,
+    label: <FormattedMessage {...messages.overwriteAllValuesDesc} />,
+  },
+  {
+    value: AUTO_SCHEDULE_OVERWRITE.EMPTY_VALUES_ONLY,
+    label: <FormattedMessage {...messages.overwriteEmptyValuesOnlyDesc} />,
+  },
+];
+
+const OVERWRITE_OPTIONS = [
+  {
+    value: AUTO_SCHEDULE_OVERWRITE.ALL_VALUES,
+    label: <FormattedMessage {...messages.overwriteAllValues} />,
+  },
+  {
+    value: AUTO_SCHEDULE_OVERWRITE.EMPTY_VALUES_ONLY,
+    label: <FormattedMessage {...messages.overwriteEmptyValuesOnly} />,
+  },
+];
+
+const OVERWRITE_ISSUE_VALUES = [
+  {
+    value: ISSUE_VALUES.SPRINT,
+    label: <FormattedMessage {...commonMessages.sprints} />,
+  },
+  {
+    value: ISSUE_VALUES.RELEASE,
+    label: <FormattedMessage {...commonMessages.releases} />,
+  },
+  {
+    value: ISSUE_VALUES.TEAM,
+    label: <FormattedMessage {...commonMessages.teams} />,
+  },
+];
+
+const API_KEYS_FOR_OVERWRITE_ISSUE_VALUES = {
+  [ISSUE_VALUES.SPRINT]: 'ignoreSprints',
+  [ISSUE_VALUES.RELEASE]: 'ignoreReleases',
+  [ISSUE_VALUES.TEAM]: 'ignoreTeams',
+} as const;
+
+const ConfigurationTable = ({
+  autoScheduleConfiguration,
+  isReadOnly,
+  updateAutoScheduleConfiguration,
+  withDetailedHeader,
+  isReleasesEnabled,
+}: Props) => {
+  const getOverwriteHeader = () => {
+    return withDetailedHeader ? DETAILED_OVERWRITE_OPTIONS : OVERWRITE_OPTIONS;
+  };
+
+  const isOptionSelected = (
+    issueValue: IssueValues,
+    overwriteOption: AutoScheduleOverwriteOptions,
+  ) => {
+    const apiKey = API_KEYS_FOR_OVERWRITE_ISSUE_VALUES[issueValue];
+
+    return (
+      isDefined(autoScheduleConfiguration) &&
+      ((autoScheduleConfiguration[apiKey] &&
+        overwriteOption === AUTO_SCHEDULE_OVERWRITE.ALL_VALUES) ||
+        (!autoScheduleConfiguration[apiKey] &&
+          overwriteOption === AUTO_SCHEDULE_OVERWRITE.EMPTY_VALUES_ONLY))
+    );
+  };
+
+  const onConfigurationChange = (
+    issueValue: IssueValues,
+    overwriteOption: AutoScheduleOverwriteOptions,
+  ): void => {
+    updateAutoScheduleConfiguration({
+      [API_KEYS_FOR_OVERWRITE_ISSUE_VALUES[issueValue]]:
+        overwriteOption === AUTO_SCHEDULE_OVERWRITE.ALL_VALUES,
+    });
+  };
+
+  const filterOutReleasesOptionWhenReleasesIsDisabled = ({
+    value,
+  }: {
+    value: IssueValues;
+    label: JSX.Element;
+  }) => isReleasesEnabled || value !== ISSUE_VALUES.RELEASE;
+
+  return (
+    <div
+      role="grid"
+      aria-labelledby="overwrite-issue-values-title"
+      aria-describedby="overwrite-issue-values-desc"
+      aria-busy="true"
+    >
+      <div role="rowgroup">
+        <div role="row" css={localStyles.header}>
+          <div css={[localStyles.optionHeader, localStyles.firstColumn]} />
+          <div
+            css={[
+              localStyles.optionValueHeader,
+              !withDetailedHeader && localStyles.optionValueBorder,
+            ]}
+          >
+            {OVERWRITE_ISSUE_VALUES.filter(filterOutReleasesOptionWhenReleasesIsDisabled).map(
+              ({ label, value }, colIndex) => (
+                <div
+                  css={localStyles.optionValueContent}
+                  id={\`column-\${colIndex}\`}
+                  role="columnheader"
+                  key={value}
+                >
+                  <div css={localStyles.optionHeader}>{label}</div>
+                </div>
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+      <div role="rowgroup" css={localStyles.radioContent}>
+        {getOverwriteHeader().map(({ label, value: optionValue }, rowIndex) => (
+          <div role="row" key={optionValue} css={localStyles.radioRow}>
+            <div
+              id={\`row-\${rowIndex}\`}
+              role="rowheader"
+              css={[localStyles.rowHeader, localStyles.firstColumn]}
+            >
+              {label}
+            </div>
+            <div css={localStyles.radioSelection}>
+              {OVERWRITE_ISSUE_VALUES.filter(filterOutReleasesOptionWhenReleasesIsDisabled).map(
+                ({ value: issueValue }, colIndex) => (
+                  <div role="gridcell" key={issueValue}>
+                    <Radio
+                      isChecked={isOptionSelected(issueValue, optionValue)}
+                      labelId={\`column-\${colIndex} row-\${rowIndex}\`}
+                      name={issueValue}
+                      isDisabled={isReadOnly}
+                      value={optionValue}
+                      onChange={() => onConfigurationChange(issueValue, optionValue)}
+                    />
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const localStyles = cssMap({
+  header: {
+    display: 'flex',
+  },
+  firstColumn: {
+    minWidth: '220px',
+  },
+  optionHeader: {
+    flex: '1 1 0',
+    font: token('font.heading.xxsmall'),
+    color: token('color.text.subtlest'),
+    marginBottom: token('space.100'),
+  },
+  optionValueHeader: {
+    display: 'flex',
+    flex: '1.5 1 0',
+    marginTop: token('space.250'),
+  },
+  optionValueBorder: {
+    borderBottomStyle: 'solid',
+    borderBottomColor: token('color.border'),
+    borderBottomWidth: token('border.width.outline'),
+  },
+  optionValueContent: {
+    flex: '1 1 0',
+    textAlign: 'center',
+  },
+  rowHeader: {
+    flex: '1 1 0',
+    marginTop: token('space.100'),
+    color: token('color.text'),
+  },
+  radioContent: {
+    marginTop: token('space.050'),
+    marginBottom: token('space.150'),
+  },
+  radioRow: {
+    display: 'flex',
+  },
+  radioSelection: {
+    display: 'flex',
+    flex: '1.5 1 0',
+    marginTop: token('space.050'),
+    marginBottom: token('space.050'),
+    justifyContent: 'space-around',
+  },
+  button: {
+    textAlign: 'end',
+  },
+  section: {
+    paddingTop: token('space.150'),
+    paddingRight: token('space.150'),
+    paddingBottom: token('space.150'),
+    paddingLeft: token('space.150'),
+  },
+});
+
+export default ConfigurationTable;
+    `,
+		`
+/** @jsx jsx */
+import React from 'react';
+import { Radio } from '@atlaskit/radio';
+import { cssMap, jsx } from '@atlaskit/css';
+import { token } from '@atlaskit/tokens';
+import { FormattedMessage } from '@atlassian/jira-intl';
+import { isDefined } from '@atlassian/jira-portfolio-3-portfolio/src/common/ramda/index.tsx';
+import {
+  AUTO_SCHEDULE_OVERWRITE,
+  ISSUE_VALUES,
+  type AutoScheduleOverwriteOptions,
+  type IssueValues,
+} from '@atlassian/jira-portfolio-3-portfolio/src/common/view/constant.tsx';
+import commonMessages from '@atlassian/jira-portfolio-3-portfolio/src/common/view/messages.tsx';
+import messages from './messages.tsx';
+import type { Props } from './types.tsx';
+
+const DETAILED_OVERWRITE_OPTIONS = [
+  {
+    value: AUTO_SCHEDULE_OVERWRITE.ALL_VALUES,
+    label: <FormattedMessage {...messages.overwriteAllValuesDesc} />,
+  },
+  {
+    value: AUTO_SCHEDULE_OVERWRITE.EMPTY_VALUES_ONLY,
+    label: <FormattedMessage {...messages.overwriteEmptyValuesOnlyDesc} />,
+  },
+];
+
+const OVERWRITE_OPTIONS = [
+  {
+    value: AUTO_SCHEDULE_OVERWRITE.ALL_VALUES,
+    label: <FormattedMessage {...messages.overwriteAllValues} />,
+  },
+  {
+    value: AUTO_SCHEDULE_OVERWRITE.EMPTY_VALUES_ONLY,
+    label: <FormattedMessage {...messages.overwriteEmptyValuesOnly} />,
+  },
+];
+
+const OVERWRITE_ISSUE_VALUES = [
+  {
+    value: ISSUE_VALUES.SPRINT,
+    label: <FormattedMessage {...commonMessages.sprints} />,
+  },
+  {
+    value: ISSUE_VALUES.RELEASE,
+    label: <FormattedMessage {...commonMessages.releases} />,
+  },
+  {
+    value: ISSUE_VALUES.TEAM,
+    label: <FormattedMessage {...commonMessages.teams} />,
+  },
+];
+
+const API_KEYS_FOR_OVERWRITE_ISSUE_VALUES = {
+  [ISSUE_VALUES.SPRINT]: 'ignoreSprints',
+  [ISSUE_VALUES.RELEASE]: 'ignoreReleases',
+  [ISSUE_VALUES.TEAM]: 'ignoreTeams',
+} as const;
+
+const ConfigurationTable = ({
+  autoScheduleConfiguration,
+  isReadOnly,
+  updateAutoScheduleConfiguration,
+  withDetailedHeader,
+  isReleasesEnabled,
+}: Props) => {
+  const getOverwriteHeader = () => {
+    return withDetailedHeader ? DETAILED_OVERWRITE_OPTIONS : OVERWRITE_OPTIONS;
+  };
+
+  const isOptionSelected = (
+    issueValue: IssueValues,
+    overwriteOption: AutoScheduleOverwriteOptions,
+  ) => {
+    const apiKey = API_KEYS_FOR_OVERWRITE_ISSUE_VALUES[issueValue];
+
+    return (
+      isDefined(autoScheduleConfiguration) &&
+      ((autoScheduleConfiguration[apiKey] &&
+        overwriteOption === AUTO_SCHEDULE_OVERWRITE.ALL_VALUES) ||
+        (!autoScheduleConfiguration[apiKey] &&
+          overwriteOption === AUTO_SCHEDULE_OVERWRITE.EMPTY_VALUES_ONLY))
+    );
+  };
+
+  const onConfigurationChange = (
+    issueValue: IssueValues,
+    overwriteOption: AutoScheduleOverwriteOptions,
+  ): void => {
+    updateAutoScheduleConfiguration({
+      [API_KEYS_FOR_OVERWRITE_ISSUE_VALUES[issueValue]]:
+        overwriteOption === AUTO_SCHEDULE_OVERWRITE.ALL_VALUES,
+    });
+  };
+
+  const filterOutReleasesOptionWhenReleasesIsDisabled = ({
+    value,
+  }: {
+    value: IssueValues;
+    label: JSX.Element;
+  }) => isReleasesEnabled || value !== ISSUE_VALUES.RELEASE;
+
+  return (
+    <div
+      role="grid"
+      aria-labelledby="overwrite-issue-values-title"
+      aria-describedby="overwrite-issue-values-desc"
+      aria-busy="true"
+    >
+      <div role="rowgroup">
+        <div role="row" css={localStyles.header}>
+          <div css={[localStyles.optionHeader, localStyles.firstColumn]} />
+          <div
+            css={[
+              localStyles.optionValueHeader,
+              !withDetailedHeader && localStyles.optionValueBorder,
+            ]}
+          >
+            {OVERWRITE_ISSUE_VALUES.filter(filterOutReleasesOptionWhenReleasesIsDisabled).map(
+              ({ label, value }, colIndex) => (
+                <div
+                  css={localStyles.optionValueContent}
+                  id={\`column-\${colIndex}\`}
+                  role="columnheader"
+                  key={value}
+                >
+                  <div css={localStyles.optionHeader}>{label}</div>
+                </div>
+              ),
+            )}
+          </div>
+        </div>
+      </div>
+      <div role="rowgroup" css={localStyles.radioContent}>
+        {getOverwriteHeader().map(({ label, value: optionValue }, rowIndex) => (
+          <div role="row" key={optionValue} css={localStyles.radioRow}>
+            <div
+              id={\`row-\${rowIndex}\`}
+              role="rowheader"
+              css={[localStyles.rowHeader, localStyles.firstColumn]}
+            >
+              {label}
+            </div>
+            <div css={localStyles.radioSelection}>
+              {OVERWRITE_ISSUE_VALUES.filter(filterOutReleasesOptionWhenReleasesIsDisabled).map(
+                ({ value: issueValue }, colIndex) => (
+                  <div role="gridcell" key={issueValue}>
+                    <Radio
+                      isChecked={isOptionSelected(issueValue, optionValue)}
+                      labelId={\`column-\${colIndex} row-\${rowIndex}\`}
+                      name={issueValue}
+                      isDisabled={isReadOnly}
+                      value={optionValue}
+                      onChange={() => onConfigurationChange(issueValue, optionValue)}
+                    />
+                  </div>
+                ),
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const localStyles = cssMap({
+  header: {
+    display: 'flex',
+  },
+  firstColumn: {
+    minWidth: '220px',
+  },
+  optionHeader: {
+    flex: '1 1 0',
+    font: token('font.heading.xxsmall'),
+    color: token('color.text.subtlest'),
+    marginBottom: token('space.100'),
+  },
+  optionValueHeader: {
+    display: 'flex',
+    flex: '1.5 1 0',
+    marginTop: token('space.250'),
+  },
+  optionValueBorder: {
+    borderBottomStyle: 'solid',
+    borderBottomColor: token('color.border'),
+    borderBottomWidth: token('border.width.outline'),
+  },
+  optionValueContent: {
+    flex: '1 1 0',
+    textAlign: 'center',
+  },
+  rowHeader: {
+    flex: '1 1 0',
+    marginTop: token('space.100'),
+    color: token('color.text'),
+  },
+  radioContent: {
+    marginTop: token('space.050'),
+    marginBottom: token('space.150'),
+  },
+  radioRow: {
+    display: 'flex',
+  },
+  radioSelection: {
+    display: 'flex',
+    flex: '1.5 1 0',
+    marginTop: token('space.050'),
+    marginBottom: token('space.050'),
+    justifyContent: 'space-around',
+  },
+  button: {
+    textAlign: 'end',
+  },
+  section: {
+    paddingTop: token('space.150'),
+    paddingRight: token('space.150'),
+    paddingBottom: token('space.150'),
+    paddingLeft: token('space.150'),
+  },
+});
+
+export default ConfigurationTable;
+    `,
+		'should do nothing with wrong import and wrong package',
+	);
 });

package/codemods/utils.tsx

@@ -238,19 +238,21 @@ export const createRenameFuncFor =
 			});
 		});
 
-		let variable = hasVariableAssignment(j, source, specifier);
-		if (variable) {
-			(variable as Collection<VariableDeclaration>)
-				.find(j.VariableDeclarator)
-				.forEach((declarator) => {
-					j(declarator)
-						.find(j.Identifier)
-						.filter((identifier) => identifier.name === 'id')
-						.forEach((ids) => {
-							findIdentifierAndReplaceAttribute(j, source, ids.node.name, from, to);
-						});
-				});
-		}
+		// Ignoring this because it's causing false positives for the radio rename initiative
+
+		// let variable = hasVariableAssignment(j, source, specifier);
+		// if (variable) {
+		// 	(variable as Collection<VariableDeclaration>)
+		// 		.find(j.VariableDeclarator)
+		// 		.forEach((declarator) => {
+		// 			j(declarator)
+		// 				.find(j.Identifier)
+		// 				.filter((identifier) => identifier.name === 'id')
+		// 				.forEach((ids) => {
+		// 					findIdentifierAndReplaceAttribute(j, source, ids.node.name, from, to);
+		// 				});
+		// 		});
+		// }
 	};
 
 export const createRemoveFuncFor =

package/dist/cjs/radio.js

@@ -20,7 +20,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["ariaLabel", "aria-labelledby", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "labelId", "name", "onChange", "value", "testId", "analyticsContext"];
 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); }
 var packageName = "@atlaskit/radio";
-var packageVersion = "8.3.1";
+var packageVersion = "8.3.2";
 var noop = _noop.default;
 var labelPaddingStyles = null;
 var labelStyles = null;

package/dist/es2019/radio.js

@@ -9,7 +9,7 @@ import __noop from '@atlaskit/ds-lib/noop';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 const packageName = "@atlaskit/radio";
-const packageVersion = "8.3.1";
+const packageVersion = "8.3.2";
 const noop = __noop;
 const labelPaddingStyles = null;
 const labelStyles = null;

package/dist/esm/radio.js

@@ -11,7 +11,7 @@ import __noop from '@atlaskit/ds-lib/noop';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 var packageName = "@atlaskit/radio";
-var packageVersion = "8.3.1";
+var packageVersion = "8.3.2";
 var noop = __noop;
 var labelPaddingStyles = null;
 var labelStyles = null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "8.3.2",
+	"version": "8.3.3",
 	"description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -33,11 +33,11 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
-		"@atlaskit/css": "^0.13.0",
+		"@atlaskit/css": "^0.14.0",
 		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/theme": "^20.0.0",
-		"@atlaskit/tokens": "^6.2.0",
+		"@atlaskit/tokens": "^6.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3"
 	},
@@ -51,9 +51,9 @@
 		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/checkbox": "^17.1.0",
 		"@atlaskit/docs": "^11.0.0",
-		"@atlaskit/form": "^12.4.0",
+		"@atlaskit/form": "^12.5.0",
 		"@atlaskit/link": "^3.2.0",
-		"@atlaskit/primitives": "^14.13.0",
+		"@atlaskit/primitives": "^14.14.0",
 		"@atlaskit/section-message": "^8.7.0",
 		"@atlaskit/ssr": "workspace:^",
 		"@atlassian/ssr-tests": "^0.3.0",