@oliasoft-open-source/react-ui-library 2.4.8 → 3.0.0

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

@@ -1,440 +0,0 @@
-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 '@infinium/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

@@ -1,123 +0,0 @@
-@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

@@ -1,157 +0,0 @@
-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;
-  }
-};