@atlaskit/select 21.8.1 → 21.8.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/select
 
+## 21.8.3
+
+### Patch Changes
+
+- [`f31216f23df61`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f31216f23df61) -
+  Removes internally exported API from files which will soon be exported as top-level API
+
+## 21.8.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 21.8.1
 
 ### Patch Changes

package/dist/cjs/select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./create-select"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "0.0.0-development";
+var packageVersion = "21.8.2";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/utils/grouped-options-announcement.js

@@ -3,38 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.countAllOptions = void 0;
-exports.generateGroupLabel = generateGroupLabel;
 exports.isOptionsGrouped = void 0;
-function generateGroupLabel(onFocusProps, defaultOptions) {
-  var _groupData$options$fi;
-  var focused = onFocusProps.focused;
-  var isOptionFocused = function isOptionFocused(option) {
-    return option.label === focused.label;
-  };
-  var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
-    var _option$options;
-    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
-  });
-  var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
-  var totalLength = countAllOptions(defaultOptions);
-  return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " (").concat(groupOptionIndex + 1, " of ").concat(totalLength, ")");
-}
-
 // Helper function which identifies if options are grouped.
 var isOptionsGrouped = exports.isOptionsGrouped = function isOptionsGrouped(arr) {
   return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
     return obj.hasOwnProperty('options');
   });
-};
-
-// Helper function which calculates how many options are in total in all groups.
-var countAllOptions = exports.countAllOptions = function countAllOptions(groupsArray) {
-  var totalLength = groupsArray === null || groupsArray === void 0 ? void 0 : groupsArray.reduce(function (acc, currentGroup) {
-    var _group$options;
-    var group = currentGroup;
-    acc += group === null || group === void 0 || (_group$options = group.options) === null || _group$options === void 0 ? void 0 : _group$options.length;
-    return acc;
-  }, 0);
-  return totalLength;
 };

package/dist/es2019/select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './create-select';
 const packageName = "@atlaskit/select";
-const packageVersion = "0.0.0-development";
+const packageVersion = "21.8.2";
 export const SelectWithoutAnalytics = createSelect(AsyncSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/utils/grouped-options-announcement.js

@@ -1,32 +1,4 @@
-export function generateGroupLabel(onFocusProps, defaultOptions) {
-  var _groupData$options$fi;
-  const {
-    focused
-  } = onFocusProps;
-  const isOptionFocused = option => {
-    return option.label === focused.label;
-  };
-  const groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(option => {
-    var _option$options;
-    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
-  });
-  const groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
-  const totalLength = countAllOptions(defaultOptions);
-  return `${focused.label}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label} (${groupOptionIndex + 1} of ${totalLength})`;
-}
-
 // Helper function which identifies if options are grouped.
 export const isOptionsGrouped = arr => {
   return arr === null || arr === void 0 ? void 0 : arr.every(obj => obj.hasOwnProperty('options'));
-};
-
-// Helper function which calculates how many options are in total in all groups.
-export const countAllOptions = groupsArray => {
-  const totalLength = groupsArray === null || groupsArray === void 0 ? void 0 : groupsArray.reduce((acc, currentGroup) => {
-    var _group$options;
-    const group = currentGroup;
-    acc += group === null || group === void 0 ? void 0 : (_group$options = group.options) === null || _group$options === void 0 ? void 0 : _group$options.length;
-    return acc;
-  }, 0);
-  return totalLength;
 };

package/dist/esm/select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './create-select';
 var packageName = "@atlaskit/select";
-var packageVersion = "0.0.0-development";
+var packageVersion = "21.8.2";
 export var SelectWithoutAnalytics = createSelect(AsyncSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/utils/grouped-options-announcement.js

@@ -1,32 +1,6 @@
-export function generateGroupLabel(onFocusProps, defaultOptions) {
-  var _groupData$options$fi;
-  var focused = onFocusProps.focused;
-  var isOptionFocused = function isOptionFocused(option) {
-    return option.label === focused.label;
-  };
-  var groupData = defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.find(function (option) {
-    var _option$options;
-    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
-  });
-  var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
-  var totalLength = countAllOptions(defaultOptions);
-  return "".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " (").concat(groupOptionIndex + 1, " of ").concat(totalLength, ")");
-}
-
 // Helper function which identifies if options are grouped.
 export var isOptionsGrouped = function isOptionsGrouped(arr) {
   return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
     return obj.hasOwnProperty('options');
   });
-};
-
-// Helper function which calculates how many options are in total in all groups.
-export var countAllOptions = function countAllOptions(groupsArray) {
-  var totalLength = groupsArray === null || groupsArray === void 0 ? void 0 : groupsArray.reduce(function (acc, currentGroup) {
-    var _group$options;
-    var group = currentGroup;
-    acc += group === null || group === void 0 || (_group$options = group.options) === null || _group$options === void 0 ? void 0 : _group$options.length;
-    return acc;
-  }, 0);
-  return totalLength;
 };

package/dist/types/utils/grouped-options-announcement.d.ts

@@ -1,5 +1,3 @@
-import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from '@atlaskit/react-select';
+import { type OptionsOrGroups } from '@atlaskit/react-select';
 import { type GroupType, type OptionType } from '../types';
-export declare function generateGroupLabel(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
 export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
-export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;

package/dist/types-ts4.5/utils/grouped-options-announcement.d.ts

@@ -1,5 +1,3 @@
-import { type AriaOnFocusProps, type GroupBase, type OptionsOrGroups } from '@atlaskit/react-select';
+import { type OptionsOrGroups } from '@atlaskit/react-select';
 import { type GroupType, type OptionType } from '../types';
-export declare function generateGroupLabel(onFocusProps: AriaOnFocusProps<OptionType, GroupBase<OptionType>>, defaultOptions?: OptionsOrGroups<OptionType, GroupType<OptionType>>): string;
 export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>> | undefined) => boolean | undefined;
-export declare const countAllOptions: (groupsArray: readonly GroupType<OptionType>[]) => number;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "21.8.1",
+	"version": "21.8.3",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -34,7 +34,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/ds-lib": "^6.0.0",
-		"@atlaskit/icon": "^32.0.0",
+		"@atlaskit/icon": "^33.0.0",
 		"@atlaskit/layering": "^3.6.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^18.0.0",
@@ -60,8 +60,8 @@
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/button": "^23.10.0",
 		"@atlaskit/checkbox": "^17.3.0",
-		"@atlaskit/docs": "^11.6.0",
-		"@atlaskit/drawer": "^11.0.0",
+		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/drawer": "^12.0.0",
 		"@atlaskit/form": "^15.4.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/logo": "^19.10.0",
@@ -70,6 +70,7 @@
 		"@atlaskit/section-message": "^8.12.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",
 		"@atlassian/ssr-tests": "workspace:^",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"@testing-library/user-event": "^14.4.3",
 		"ast-types": "^0.13.3",

package/select.docs.tsx

@@ -0,0 +1,51 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'Select',
+		description: 'A flexible select component for single and multi-selection.',
+		status: 'general-availability',
+		import: {
+			name: 'Select',
+			package: '@atlaskit/select',
+			type: 'default',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for choosing one or more from a list; common in forms and inline edit',
+			'Use a visible label for the field—do not use placeholder as the only label (placeholder disappears and is not accessible)',
+			'Use logical order (e.g. most selected first, numeric)',
+			'Do not overwhelm with too many options',
+			'Enable search for long option lists',
+			'Consider loading states for async data',
+			'Avoid alphabetical ordering (not localizable); use logical order for translatable option lists',
+		],
+		contentGuidelines: [
+			'Write clear, descriptive option labels',
+			'Use consistent terminology across options',
+			'Keep option text concise but meaningful',
+			'Group related options only when all items are groupable; use well-known categories or for disambiguation (e.g. Portland ME vs OR); no group of one',
+		],
+		accessibilityGuidelines: [
+			'Use labels and helper text for the field—do not use placeholder as label (disappears on focus, not accessible)',
+			'Clear control is removed from tab order; keyboard users clear selection via Delete',
+			'Provide clear labels for all selects',
+			'Ensure keyboard navigation with arrow keys',
+			'Support screen reader announcements',
+		],
+		examples: [
+			{
+				name: 'Default',
+				description: 'The default select appearance.',
+				source: path.resolve(__dirname, './examples/constellation/select-appearance-default.tsx'),
+			},
+		],
+		keywords: ['select', 'dropdown', 'form', 'input', 'options', 'choice', 'picker'],
+		categories: ['form'],
+	},
+];
+
+export default documentation;