@atlaskit/link-datasource 0.17.4 → 0.17.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/link-datasource
 
+## 0.17.5
+
+### Patch Changes
+
+- [`d417c0728a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d417c0728a8) - Added logic to show selected options at the top of the column picker
+
 ## 0.17.4
 
 ### Patch Changes

package/dist/cjs/ui/issue-like-table/column-picker/index.js

@@ -7,6 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.ColumnPicker = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
@@ -19,6 +21,10 @@ var ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange;
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    allOptions = _useState2[0],
+    setAllOptions = _useState2[1];
   var mapColumnToOption = (0, _react.useCallback)(function (_ref2) {
     var key = _ref2.key,
       title = _ref2.title;
@@ -31,12 +37,11 @@ var ColumnPicker = function ColumnPicker(_ref) {
     var key = _ref3.key;
     return selectedColumnKeys.includes(key);
   }).map(mapColumnToOption);
-  var allOptions = (0, _react.useMemo)(function () {
-    return columns.filter(function (_ref4) {
-      var title = _ref4.title,
-        key = _ref4.key;
+  (0, _react.useEffect)(function () {
+    setAllOptions(columns.filter(function (_ref4) {
+      var title = _ref4.title;
       return title;
-    }).map(mapColumnToOption);
+    }).map(mapColumnToOption));
   }, [columns, mapColumnToOption]);
   var handleChange = (0, _react.useCallback)(function (selectedOptions) {
     var selectedValues = selectedOptions.map(function (_ref5) {
@@ -56,6 +61,18 @@ var ColumnPicker = function ColumnPicker(_ref) {
     });
     onSelectedColumnKeysChange(selectedValues);
   }, [columns, onSelectedColumnKeysChange]);
+  var onPopupOpen = (0, _react.useCallback)(function () {
+    if (!allOptions.length) {
+      return;
+    }
+    var nonSelectedOptions = allOptions.filter(function (option) {
+      return !selectedOptions.find(function (selectedOption) {
+        return selectedOption.value === option.value;
+      });
+    });
+    var sortedOptions = [].concat((0, _toConsumableArray2.default)(selectedOptions), (0, _toConsumableArray2.default)(nonSelectedOptions));
+    sortedOptions.length > 0 && setAllOptions(sortedOptions);
+  }, [allOptions, selectedOptions]);
   return (0, _react2.jsx)(_select.PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -64,6 +81,7 @@ var ColumnPicker = function ColumnPicker(_ref) {
     },
     options: allOptions,
     value: selectedOptions,
+    onOpen: onPopupOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.17.4",
+	"version": "0.17.5",
 	"sideEffects": false
 }

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
@@ -11,6 +11,7 @@ export const ColumnPicker = ({
   selectedColumnKeys,
   onSelectedColumnKeysChange
 }) => {
+  const [allOptions, setAllOptions] = useState([]);
   const mapColumnToOption = useCallback(({
     key,
     title
@@ -21,11 +22,10 @@ export const ColumnPicker = ({
   const selectedOptions = columns.filter(({
     key
   }) => selectedColumnKeys.includes(key)).map(mapColumnToOption);
-  const allOptions = useMemo(() => {
-    return columns.filter(({
-      title,
-      key
-    }) => title).map(mapColumnToOption);
+  useEffect(() => {
+    setAllOptions(columns.filter(({
+      title
+    }) => title).map(mapColumnToOption));
   }, [columns, mapColumnToOption]);
   const handleChange = useCallback(selectedOptions => {
     const selectedValues = selectedOptions.map(({
@@ -42,6 +42,14 @@ export const ColumnPicker = ({
     });
     onSelectedColumnKeysChange(selectedValues);
   }, [columns, onSelectedColumnKeysChange]);
+  const onPopupOpen = useCallback(() => {
+    if (!allOptions.length) {
+      return;
+    }
+    const nonSelectedOptions = allOptions.filter(option => !selectedOptions.find(selectedOption => selectedOption.value === option.value));
+    const sortedOptions = [...selectedOptions, ...nonSelectedOptions];
+    sortedOptions.length > 0 && setAllOptions(sortedOptions);
+  }, [allOptions, selectedOptions]);
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -50,6 +58,7 @@ export const ColumnPicker = ({
     },
     options: allOptions,
     value: selectedOptions,
+    onOpen: onPopupOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.17.4",
+	"version": "0.17.5",
 	"sideEffects": false
 }

package/dist/esm/ui/issue-like-table/column-picker/index.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isOpen"];
 /** @jsx jsx */
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { jsx } from '@emotion/react';
 import Button from '@atlaskit/button/standard-button';
 import BoardIcon from '@atlaskit/icon/glyph/board';
@@ -12,6 +14,10 @@ export var ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
     onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    allOptions = _useState2[0],
+    setAllOptions = _useState2[1];
   var mapColumnToOption = useCallback(function (_ref2) {
     var key = _ref2.key,
       title = _ref2.title;
@@ -24,12 +30,11 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     var key = _ref3.key;
     return selectedColumnKeys.includes(key);
   }).map(mapColumnToOption);
-  var allOptions = useMemo(function () {
-    return columns.filter(function (_ref4) {
-      var title = _ref4.title,
-        key = _ref4.key;
+  useEffect(function () {
+    setAllOptions(columns.filter(function (_ref4) {
+      var title = _ref4.title;
       return title;
-    }).map(mapColumnToOption);
+    }).map(mapColumnToOption));
   }, [columns, mapColumnToOption]);
   var handleChange = useCallback(function (selectedOptions) {
     var selectedValues = selectedOptions.map(function (_ref5) {
@@ -49,6 +54,18 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     });
     onSelectedColumnKeysChange(selectedValues);
   }, [columns, onSelectedColumnKeysChange]);
+  var onPopupOpen = useCallback(function () {
+    if (!allOptions.length) {
+      return;
+    }
+    var nonSelectedOptions = allOptions.filter(function (option) {
+      return !selectedOptions.find(function (selectedOption) {
+        return selectedOption.value === option.value;
+      });
+    });
+    var sortedOptions = [].concat(_toConsumableArray(selectedOptions), _toConsumableArray(nonSelectedOptions));
+    sortedOptions.length > 0 && setAllOptions(sortedOptions);
+  }, [allOptions, selectedOptions]);
   return jsx(PopupSelect, {
     classNamePrefix: 'column-picker-popup',
     testId: 'column-picker-popup',
@@ -57,6 +74,7 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     },
     options: allOptions,
     value: selectedOptions,
+    onOpen: onPopupOpen,
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
     isMulti: true,

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "0.17.4",
+	"version": "0.17.5",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-datasource",
-  "version": "0.17.4",
+  "version": "0.17.5",
   "description": "UI Components to support linking platform dataset feature",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"