@oliasoft-open-source/react-ui-library 1.0.0

package/src/components/select/custom-select/custom-select.jsx

@@ -0,0 +1,440 @@
+import { uniqWith, isEqual } from 'lodash';
+import React, { useRef, useReducer, useEffect, useContext } from 'react';
+import PropTypes from 'prop-types';
+import { useLayer, mergeRefs } from 'react-laag';
+import ResizeObserver from 'resize-observer-polyfill';
+import KeyboardEventHandler from 'react-keyboard-event-handler';
+import { useFocus } from '../../../hooks';
+import { placementOptions } from './layer/placementOptions';
+import { Layer } from './layer/layer';
+import { Trigger } from './trigger/trigger';
+import {
+  initialLayerFocus,
+  initialTriggerFocus,
+  nextLayerFocus,
+  reducer,
+} from './custom-select.reducer';
+import { getTextWidth } from '../../../helpers/text';
+import styles from './custom-select.module.less';
+import { DisabledContext } from '../../../helpers/disabled-context';
+import { actionsShape } from '../../actions/actions.shape';
+
+export const CustomSelect = ({
+  multi: isMulti,
+  disabled,
+  error,
+  warning,
+  tooltip,
+  options,
+  selectedOptions,
+  onChange,
+  onCreate,
+  small,
+  isInTable,
+  tabIndex,
+  width,
+  autoLayerWidth,
+  onFocus,
+  onBlur,
+  searchable,
+  clearable,
+  groupOrder,
+  maxTooltipWidth,
+  firstSelectedOptionIndex,
+  placeholder,
+  right,
+  closeOnOptionActionClick,
+  testId,
+}) => {
+  const disabledContext = useContext(DisabledContext);
+  const createAble = onCreate !== null;
+  const listRef = useRef(null);
+  const [triggerRef, setTriggerFocus] = useFocus();
+
+  const [state, dispatch] = useReducer(
+    reducer,
+    { options, firstSelectedOptionIndex },
+    ({ options }) => ({
+      searchValue: '',
+      visibleOptions: options,
+      layerFocus: initialLayerFocus(options, firstSelectedOptionIndex), //also gets reset when layer opens (because options can change)
+      triggerFocus: initialTriggerFocus,
+      isLayerOpen: false,
+    }),
+  );
+
+  const closeLayer = () => {
+    if (state.isLayerOpen) {
+      dispatch({ type: 'CLOSE_LAYER' });
+    }
+    setTriggerFocus();
+  };
+  const openLayer = () => dispatch({ type: 'OPEN_LAYER' });
+
+  //Update visible options upon external changes to the options prop
+  const isFirstRun = useRef(true);
+  useEffect(() => {
+    if (isFirstRun.current) {
+      isFirstRun.current = false;
+    } else {
+      dispatch({ type: 'SET_VISIBLE_OPTIONS', options });
+    }
+  }, [options]);
+
+  const onSelectOption = (evt, option, close) => {
+    if (!(disabled || disabledContext)) {
+      if (close) {
+        close();
+      }
+      if (option) {
+        if (option.createAble) {
+          onCreate(option.value);
+        } else {
+          if (!option.disabled) {
+            const newSelectedOptions =
+              selectedOptions instanceof Array
+                ? uniqWith(selectedOptions.concat(option), isEqual) //de-duplicate
+                : option;
+            onChange(evt, newSelectedOptions);
+          }
+        }
+      }
+      dispatch({ type: 'CLEAR_SEARCH', options });
+      setTriggerFocus();
+    }
+  };
+
+  /*
+    For auto-width custom selects, we measure the width of the options before
+    rendering, using a temporary canvas element. Then we add some extra width for
+    the input UI chrome/elements.
+  */
+
+  const isAutoWidth = width === 'auto';
+  const calcAutoWidth = isAutoWidth || autoLayerWidth;
+  const font = 'bold 14px sans-serif'; //bold font to match selected value width in dropdown
+  const autoWidth = calcAutoWidth //text width in px of the longest option
+    ? Math.ceil(
+        options.reduce((acc, option) => {
+          const optionActionsWidth = (option?.actions?.length ?? 0) * 24; // actions width
+          const optionWidth =
+            getTextWidth(option.label, font) + optionActionsWidth;
+          acc = optionWidth > acc ? optionWidth : acc;
+          return acc;
+        }, 0),
+      )
+    : null;
+  const extraTriggerWidth = calcAutoWidth
+    ? 14 * 2 + // option label padding
+      24 + // tick or arrow icon
+      (isMulti ? 11 : 0) + //selected multi option box
+      (clearable ? 28 : 0) + // clearable icon
+      12 //extra space for scrollbar on Chrome/Safari
+    : 0;
+  const triggerWidth = isAutoWidth
+    ? `calc(${autoWidth}px + ${extraTriggerWidth}px)`
+    : width;
+  const extraLayerWidth = autoLayerWidth
+    ? 14 * 2 + // option label padding
+      24 + // tick
+      12 //extra space for scrollbar on Chrome/Safari
+    : 0;
+  const layerWidth = autoLayerWidth
+    ? `calc(${autoWidth}px + ${extraLayerWidth}px)`
+    : '0px';
+
+  const { renderLayer, layerProps, triggerProps, triggerBounds } = useLayer({
+    isOpen: state.isLayerOpen,
+    overflowContainer: true,
+    ...placementOptions,
+    ResizeObserver,
+    onOutsideClick: closeLayer,
+    onParentClose: closeLayer,
+  });
+
+  const onClickTrigger = () => {
+    if (disabled || disabledContext) {
+      return;
+    }
+
+    if (state.isLayerOpen) {
+      closeLayer();
+      return;
+    }
+
+    dispatch({
+      type: 'RESET_LAYER_FOCUS',
+      options,
+      firstSelectedOptionIndex,
+    });
+    openLayer();
+  };
+
+  // reset search filter when layer closes
+  const isFirstRender = useRef(true);
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+    } else {
+      if (!state.isLayerOpen) {
+        dispatch({ type: 'CLEAR_SEARCH', options });
+      }
+    }
+  }, [state.isLayerOpen]);
+
+  const onClickDeselectOption = (evt, options) => {
+    const newSelectedOptions =
+      selectedOptions instanceof Array
+        ? selectedOptions.filter((option) => option.value !== options.value)
+        : null;
+    onChange(evt, newSelectedOptions);
+  };
+
+  const onClickClearAll = (evt) => {
+    const newSelectedOptions =
+      selectedOptions instanceof Array ? [] : { value: null };
+    onChange(evt, newSelectedOptions);
+  };
+
+  const onChangeSearch = (value) =>
+    dispatch({
+      type: 'ON_CHANGE_SEARCH',
+      options,
+      value,
+      createAble,
+    });
+
+  /*
+     Keyboard actions
+   */
+
+  const clickTrigger = () => {
+    openLayer();
+    dispatch({ type: 'BLUR_TRIGGER_INPUTS' });
+  };
+
+  const scrollToItem = (index) => {
+    if (listRef.current && Number.isInteger(index)) {
+      listRef.current.scrollToItem(index);
+    }
+  };
+  const focusNextLayerOption = (direction) => {
+    const next = nextLayerFocus(direction, state.layerFocus);
+    dispatch({ type: 'FOCUS_LAYER_OPTIONS', nextLayerFocus: next });
+    scrollToItem(next.current);
+  };
+  const focusTriggerInputs = (direction) => {
+    dispatch({
+      type: 'FOCUS_TRIGGER_INPUTS',
+      direction,
+      selectedOptions,
+    });
+  };
+  const clearAll = (evt) => onClickClearAll(evt);
+  const deselectIsFocused =
+    selectedOptions && selectedOptions[state.triggerFocus.currentOption];
+  const deselectOption = (evt) => {
+    onClickDeselectOption(
+      evt,
+      selectedOptions[state.triggerFocus.currentOption],
+    );
+  };
+  const selectOption = (evt) => {
+    onSelectOption(
+      evt,
+      state.visibleOptions[state.layerFocus.current],
+      closeLayer,
+    );
+  };
+  const clearAllIsFocused = state.triggerFocus.clearAll;
+
+  const onKeyEvent = (key, evt) => {
+    switch (key) {
+      case 'up': {
+        focusNextLayerOption(key);
+        break;
+      }
+      case 'down': {
+        if (state.isLayerOpen) {
+          focusNextLayerOption(key);
+        } else {
+          clickTrigger();
+        }
+        break;
+      }
+      case 'left':
+      case 'right': {
+        focusTriggerInputs(key);
+        break;
+      }
+      case 'enter': {
+        if (clearAllIsFocused) {
+          clearAll(evt);
+        } else if (deselectIsFocused) {
+          deselectOption(evt);
+        } else {
+          selectOption(evt);
+        }
+        break;
+      }
+      case 'esc': {
+        closeLayer();
+        break;
+      }
+      default:
+    }
+  };
+
+  return (
+    <KeyboardEventHandler
+      handleKeys={['tab', 'up', 'down', 'left', 'right', 'enter', 'esc']}
+      onKeyEvent={onKeyEvent}
+    >
+      <Trigger
+        selectedOptions={selectedOptions}
+        searchValue={state.searchValue}
+        isOpen={state.isLayerOpen}
+        focusedSelectedOptionIndex={state.triggerFocus.currentOption}
+        clearAllIsFocused={clearAllIsFocused}
+        width={triggerWidth}
+        searchable={searchable}
+        triggerRef={mergeRefs(triggerRef, triggerProps.ref)}
+        error={error}
+        warning={warning}
+        tooltip={tooltip}
+        small={small}
+        isInTable={isInTable}
+        disabled={disabled || disabledContext}
+        clearable={clearable}
+        tabIndex={tabIndex}
+        onClickTrigger={onClickTrigger}
+        onChangeSearch={onChangeSearch}
+        onClickDeselect={onClickDeselectOption}
+        onClickClear={onClickClearAll}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        groupOrder={groupOrder}
+        maxTooltipWidth={maxTooltipWidth}
+        placeholder={placeholder}
+        right={right}
+        testId={testId}
+      />
+      {state.isLayerOpen &&
+        renderLayer(
+          <div
+            {...layerProps} // eslint-disable-line react/jsx-props-no-spreading
+            className={styles.layerContainer}
+          >
+            <Layer
+              listRef={listRef}
+              isMulti={isMulti}
+              sections={state.visibleOptions}
+              selectedOptions={selectedOptions}
+              onSelectOption={(evt, option) => {
+                onSelectOption(evt, option, closeLayer);
+              }}
+              closeLayer={closeOnOptionActionClick ? closeLayer : null}
+              triggerRect={triggerBounds}
+              width={`max(${layerWidth}, ${triggerBounds.width}px)`}
+              focusedOptionIndex={state.layerFocus.current}
+              firstSelectedOptionIndex={firstSelectedOptionIndex}
+            />
+          </div>,
+        )}
+    </KeyboardEventHandler>
+  );
+};
+
+export const selectOptionShape = PropTypes.oneOfType([
+  PropTypes.shape({
+    //option
+    label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    icon: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
+    actions: actionsShape,
+    testId: PropTypes.string,
+  }),
+  PropTypes.shape({
+    //Heading
+    label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+    type: PropTypes.string,
+  }),
+]);
+
+const selectedOptionShape = {
+  label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+};
+
+export const selectedOptionsShape = PropTypes.oneOfType([
+  PropTypes.string, //single-select
+  PropTypes.number, //number
+  PropTypes.shape(selectedOptionShape), //single-select
+  PropTypes.arrayOf(PropTypes.shape(selectedOptionShape)), //multi-select
+  PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), //multi-select
+]);
+
+CustomSelect.defaultProps = {
+  multi: false,
+  disabled: false,
+  error: null,
+  warning: null,
+  tooltip: null,
+  selectedOptions: null,
+  onChange: () => {},
+  onCreate: null,
+  small: false,
+  tabIndex: 0,
+  width: null,
+  autoLayerWidth: false,
+  onFocus: () => {},
+  onBlur: () => {},
+  searchable: true,
+  clearable: false,
+  //private props (don't use)
+  isInTable: false,
+  groupOrder: null,
+  firstSelectedOptionIndex: null,
+  right: false,
+  testId: undefined,
+};
+
+export const CustomSelectShape = {
+  multi: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  warning: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  tooltip: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.node,
+  ]),
+  options: PropTypes.arrayOf(selectOptionShape).isRequired,
+  selectedOptions: selectedOptionsShape,
+  onChange: PropTypes.func,
+  onCreate: PropTypes.func,
+  small: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  width: PropTypes.string,
+  autoLayerWidth: PropTypes.bool,
+  onFocus: PropTypes.func,
+  onBlur: PropTypes.func,
+  searchable: PropTypes.bool,
+  clearable: PropTypes.bool,
+  //private props (don't use)
+  isInTable: PropTypes.bool,
+  groupOrder: PropTypes.string,
+  firstSelectedOptionIndex: PropTypes.number,
+  right: PropTypes.bool,
+  testId: PropTypes.string,
+};
+
+CustomSelect.propTypes = CustomSelectShape;

package/src/components/select/custom-select/custom-select.module.less

@@ -0,0 +1,123 @@
+@import '../../../style/variables.less';
+
+.layerContainer {
+  z-index: @zindex_dropdown;
+}
+
+.layer {
+  font-family: sans-serif !important;
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-top: 2px;
+  background: var(--color-background-input);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  position: relative;
+
+  ul {
+    margin: 0;
+    padding: 0;
+    list-style-type: none;
+
+    li {
+      list-style: none;
+      display: block;
+    }
+  }
+}
+
+.heading {
+  color: var(--color-text-muted);
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-size: 12px;
+  padding: @input_padding_y @input_padding_x;
+  max-width: 100%;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.message {
+  color: #bbb;
+  padding: @input_padding_y @input_padding_x;
+}
+
+.option {
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 100%;
+  padding: @input_padding_y @input_padding_x;
+
+  &.focused,
+  &:hover {
+    background-color: var(--color-background-menuitem-hover);
+    cursor: pointer;
+  }
+
+  &.disabled {
+    opacity: 0.2;
+    cursor: inherit;
+  }
+
+  &.selected {
+    background-color: var(--color-background-menuitem-active) !important;
+    font-weight: bold;
+
+    &:hover {
+      cursor: text;
+    }
+
+    .check {
+      font-size: 12px;
+      color: var(--color-text-primary);
+      margin-left: 10px;
+
+      svg {
+        display: block;
+      }
+    }
+  }
+
+  .optionContent {
+    flex-wrap: wrap;
+    margin-right: auto;
+    overflow: hidden;
+
+    .label {
+      max-width: 100%;
+      display: block;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .icon {
+      margin-left: 7px;
+      line-height: 0; // Strips empty whitespace
+    }
+  }
+}
+
+.details {
+  float: right;
+  display: inline;
+  padding-right: 22px;
+}
+
+.selected > .details {
+  padding-right: 1px;
+}
+
+.actions {
+  margin-right: 22px;
+}
+
+.selected > .actions {
+  margin-right: 0;
+  padding-left: 22px;
+}

package/src/components/select/custom-select/custom-select.reducer.js

@@ -0,0 +1,157 @@
+export const initialTriggerFocus = {
+  options: ['none', 'clearAll'],
+  currentIndex: 0,
+  currentOption: false,
+  clearAll: false,
+};
+
+const initialLayerFocusIndex = (firstSelectedOptionIndex) =>
+  firstSelectedOptionIndex !== null ? firstSelectedOptionIndex + 1 : 0;
+
+export const initialLayerFocus = (options, firstSelectedOptionIndex) => {
+  const layerFocusOptions = options && [
+    'none',
+    ...(options &&
+      options
+        .map((o, i) => (o.type !== 'Heading' ? i : null))
+        .filter((o) => o !== null)),
+  ];
+  const layerFocusIndex = initialLayerFocusIndex(firstSelectedOptionIndex);
+  return {
+    options: layerFocusOptions,
+    currentIndex: layerFocusIndex,
+    current: layerFocusOptions[layerFocusIndex],
+  };
+};
+
+export const nextLayerFocus = (direction, layerFocus) => {
+  const sign = direction === 'up' ? -1 : 1;
+  const increment = layerFocus.currentIndex + sign;
+  const nextIndex =
+    (increment < 0 ? layerFocus.options.length - 1 : increment) %
+    layerFocus.options.length;
+  const next = layerFocus.options[nextIndex];
+  return {
+    ...layerFocus,
+    currentIndex: nextIndex,
+    current: next,
+  };
+};
+
+const nextTriggerFocus = (direction, selectedOptions, triggerFocus) => {
+  const isMulti = selectedOptions instanceof Array;
+  const sign = direction === 'left' ? -1 : 1;
+  const nextOptions = isMulti
+    ? [
+        'none',
+        ...Array(selectedOptions ? selectedOptions.length : 0).keys(),
+        'clearAll',
+      ]
+    : ['none', 'clearAll'];
+  const increment = triggerFocus.currentIndex + sign;
+  const nextIndex =
+    (increment < 0 ? nextOptions.length - 1 : increment) % nextOptions.length;
+  const next = nextOptions[nextIndex];
+  const clearAll = next === 'clearAll';
+  return {
+    options: nextOptions,
+    currentIndex: nextIndex,
+    currentOption: next,
+    clearAll,
+  };
+};
+
+const blurTriggerFocus = () => initialTriggerFocus;
+
+const blurLayerFocus = (layerFocus) => ({
+  ...layerFocus,
+  currentIndex: 0,
+  current: 'none',
+});
+
+export const reducer = (state, action) => {
+  switch (action.type) {
+    case 'SET_VISIBLE_OPTIONS': {
+      return {
+        ...state,
+        visibleOptions: action.options,
+      };
+    }
+    case 'RESET_LAYER_FOCUS': {
+      return {
+        ...state,
+        layerFocus: initialLayerFocus(
+          action.options,
+          action.firstSelectedOptionIndex,
+        ),
+      };
+    }
+    case 'CLEAR_SEARCH': {
+      return {
+        ...state,
+        visibleOptions: action.options,
+        searchValue: '',
+      };
+    }
+    case 'ON_CHANGE_SEARCH': {
+      let visibleOptions = action.options.filter((o) =>
+        String(o.label)
+          .toLowerCase()
+          .includes(String(action.value).toLowerCase()),
+      );
+      if (action.createAble && action.value !== '') {
+        visibleOptions = visibleOptions.concat({
+          label: `Create "${action.value}"`,
+          value: action.value,
+          createAble: true,
+        });
+      }
+      return {
+        ...state,
+        searchValue: action.value,
+        visibleOptions,
+        layerFocus: blurLayerFocus(state.layerFocus),
+      };
+    }
+    case 'FOCUS_TRIGGER_INPUTS': {
+      const { direction, selectedOptions } = action;
+      return {
+        ...state,
+        triggerFocus: nextTriggerFocus(
+          direction,
+          selectedOptions,
+          state.triggerFocus,
+        ),
+        layerFocus: blurLayerFocus(state.layerFocus),
+      };
+    }
+    case 'BLUR_TRIGGER_INPUTS': {
+      return {
+        ...state,
+        triggerFocus: blurTriggerFocus(),
+      };
+    }
+    case 'FOCUS_LAYER_OPTIONS': {
+      const { nextLayerFocus } = action;
+      return {
+        ...state,
+        layerFocus: nextLayerFocus,
+        triggerFocus: blurTriggerFocus(),
+      };
+    }
+    case 'OPEN_LAYER': {
+      return {
+        ...state,
+        isLayerOpen: true,
+      };
+    }
+    case 'CLOSE_LAYER': {
+      return {
+        ...state,
+        isLayerOpen: false,
+      };
+    }
+    default:
+      return state;
+  }
+};