Improvements for Picker component

packages/react-components/src/components/Picker/Picker.module.scss

@@ -1,6 +1,7 @@
 $base-class: 'picker';
 
 .#{$base-class} {
+  box-sizing: border-box;
   color: var(--content-default);
   display: inline-block;
   position: relative;

packages/react-components/src/components/Picker/Picker.spec.tsx

@@ -74,4 +74,13 @@ describe('<Picker> component', () => {
     userEvent.click(getByTestId('picker-trigger__clear-icon'));
     expect(onSelect).toHaveBeenCalledWith(null);
   });
+
+  it('should render selected option if selectedOption is provided', () => {
+    const { getByText } = renderComponent({
+      ...defaultProps,
+      selectedOption: { key: 'three', name: 'Option three' },
+    });
+
+    expect(getByText('Option three')).toBeVisible();
+  });
 });

packages/react-components/src/components/Picker/Picker.stories.tsx

@@ -96,3 +96,37 @@ PickerWithGroupedOptions.args = {
   ],
   onSelect: (item) => console.log(item),
 };
+
+export const PickerWithDisabledSearch = StoryTemplate.bind({});
+PickerWithDisabledSearch.args = {
+  searchDisabled: true,
+  options: [
+    { key: 'groupA', name: 'Group A title header', groupHeader: true },
+    { key: 'one', name: 'Option one' },
+    { key: 'two', name: 'Option two' },
+    { key: 'three', name: 'Option three' },
+    { key: 'groupB', name: 'Group B title header', groupHeader: true },
+    { key: 'four', name: 'Option four' },
+    { key: 'five', name: 'Option five' },
+    { key: 'six', name: 'Option six', disabled: true },
+    { key: 'seven', name: 'Option seven', disabled: true },
+  ],
+  onSelect: (item) => console.log(item),
+};
+
+export const PickerWithSelectedOption = StoryTemplate.bind({});
+PickerWithSelectedOption.args = {
+  selectedOption: { key: 'two', name: 'Option two' },
+  options: [
+    { key: 'groupA', name: 'Group A title header', groupHeader: true },
+    { key: 'one', name: 'Option one' },
+    { key: 'two', name: 'Option two' },
+    { key: 'three', name: 'Option three' },
+    { key: 'groupB', name: 'Group B title header', groupHeader: true },
+    { key: 'four', name: 'Option four' },
+    { key: 'five', name: 'Option five' },
+    { key: 'six', name: 'Option six', disabled: true },
+    { key: 'seven', name: 'Option seven', disabled: true },
+  ],
+  onSelect: (item) => console.log(item),
+};

packages/react-components/src/components/Picker/Picker.tsx

@@ -1,23 +1,27 @@
 import * as React from 'react';
 import { Error } from '@livechat/design-system-icons/react/material';
+import cx from 'clsx';
+
 import { Trigger, TriggerSize } from './Trigger';
 import { IPickerListItem, PickerList } from './PickerList';
 import { Icon } from '../Icon';
-import styles from './Picker.module.scss';
-import cx from 'clsx';
 import { KeyCodes } from '../../utils/keyCodes';
 
+import styles from './Picker.module.scss';
+
 const baseClass = 'picker';
 
 export interface IPickerProps {
   disabled?: boolean;
   label?: string;
   error?: string;
   options: IPickerListItem[];
+  selectedOption?: IPickerListItem;
   size?: TriggerSize;
   placeholder?: string;
   isRequired?: boolean;
   noSearchResultText?: string;
+  searchDisabled?: boolean;
   onSelect: (selectedItem: IPickerListItem | null) => void;
 }
 
@@ -26,15 +30,17 @@ export const Picker: React.FC<IPickerProps> = ({
   error,
   label,
   options,
+  selectedOption,
   size = 'medium',
   placeholder = 'Select option',
   isRequired,
   noSearchResultText = 'No results found',
+  searchDisabled = false,
   onSelect,
 }) => {
   const [isListOpen, setIsListOpen] = React.useState<boolean>(false);
   const [selectedItem, setSelectedItem] =
-    React.useState<IPickerListItem | null>(null);
+    React.useState<IPickerListItem | null>(selectedOption || null);
   const [searchPhrase, setSearchPhrase] = React.useState<string | null>(null);
   const triggerRef = React.useRef<HTMLDivElement>(null);
 
@@ -107,7 +113,7 @@ export const Picker: React.FC<IPickerProps> = ({
   }, [searchPhrase]);
 
   return (
-    <div ref={triggerRef} className={baseClass}>
+    <div ref={triggerRef} className={styles[baseClass]}>
       {label && (
         <div
           className={cx(styles[`${baseClass}__label`], {
@@ -119,6 +125,7 @@ export const Picker: React.FC<IPickerProps> = ({
       )}
       <div className={styles[`${baseClass}__container`]}>
         <Trigger
+          isSearchDisabled={searchDisabled}
           isError={!!error}
           isOpen={isListOpen}
           isDisabled={disabled}

packages/react-components/src/components/Picker/PickerList.module.scss

@@ -1,3 +1,5 @@
+@import '../../utils/StackingContextLevel';
+
 $base-class: 'picker-list';
 
 .#{$base-class} {
@@ -14,6 +16,7 @@ $base-class: 'picker-list';
   padding: 4px 0;
   position: absolute;
   width: 341px;
+  z-index: $stacking-context-level-dropdown;
 
   &--compact {
     top: 36px;

packages/react-components/src/components/Picker/Trigger.spec.tsx

@@ -7,6 +7,7 @@ import styles from './Trigger.module.scss';
 const baseClass = 'picker-trigger';
 
 const defaultProps = {
+  isSearchDisabled: false,
   isItemSelected: false,
   isOpen: false,
   onClick: () => noop,
@@ -111,4 +112,14 @@ describe('<Trigger> component', () => {
 
     expect(queryByTestId(`${baseClass}__clear-icon`)).toBeNull();
   });
+
+  it('should render Trigger without input if isOpen and isSearchDisabled', () => {
+    const { queryByRole } = renderComponent({
+      ...defaultProps,
+      isOpen: true,
+      isSearchDisabled: true,
+    });
+
+    expect(queryByRole('textbox')).toBeNull();
+  });
 });

packages/react-components/src/components/Picker/Trigger.tsx

@@ -14,6 +14,7 @@ const baseClass = 'picker-trigger';
 export type TriggerSize = 'compact' | 'medium' | 'large';
 
 export interface ITriggerProps {
+  isSearchDisabled: boolean;
   isDisabled?: boolean;
   isError?: boolean;
   isItemSelected: boolean;
@@ -27,6 +28,7 @@ export interface ITriggerProps {
 
 export const Trigger: React.FC<ITriggerProps> = ({
   children,
+  isSearchDisabled,
   isDisabled,
   isError,
   isItemSelected,
@@ -55,10 +57,16 @@ export const Trigger: React.FC<ITriggerProps> = ({
       }
     };
 
-    document.addEventListener('keydown', onKeyDown);
+    if (!isSearchDisabled) {
+      document.addEventListener('keydown', onKeyDown);
+    }
 
-    return () => document.removeEventListener('keydown', onKeyDown);
-  }, []);
+    return () => {
+      if (!isSearchDisabled) {
+        document.removeEventListener('keydown', onKeyDown);
+      }
+    };
+  }, [isSearchDisabled]);
 
   const handleTriggerClick = () => {
     onClick();
@@ -80,7 +88,7 @@ export const Trigger: React.FC<ITriggerProps> = ({
       onClick={handleTriggerClick}
       tabIndex={0}
     >
-      {isOpen ? (
+      {isOpen && !isSearchDisabled ? (
         <input
           className={styles[`${baseClass}__input`]}
           placeholder="Select option"

packages/react-components/src/utils/StackingContextLevel.scss

@@ -0,0 +1,5 @@
+/**
+ * Definition of z-index values to be used across application.
+ */
+
+$stacking-context-level-dropdown: 10000;