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

package/src/components/select/select.input.js

@@ -0,0 +1,146 @@
+export const isMulti = (selectedOptions) => selectedOptions instanceof Array;
+
+const isEmptyNullOrUndefined = (value) =>
+  value === null || value === undefined || value === '';
+
+export const standardizeOptions = (options, simple) => {
+  return simple && options instanceof Array
+    ? options.map((o) =>
+        typeof o === 'string' || typeof o === 'number'
+          ? { label: o, value: o }
+          : o,
+      )
+    : options;
+};
+
+export const standardizeSelectedOption = (
+  standardizedOptions,
+  selectedOption,
+) => {
+  if (
+    selectedOption !== null &&
+    typeof selectedOption === 'object' &&
+    selectedOption.hasOwnProperty('label') &&
+    selectedOption.hasOwnProperty('value')
+  ) {
+    return selectedOption;
+  } else {
+    const value =
+      selectedOption !== null &&
+      typeof selectedOption === 'object' &&
+      selectedOption.hasOwnProperty('value')
+        ? selectedOption.value
+        : selectedOption;
+    const foundFullValue =
+      standardizedOptions instanceof Array
+        ? standardizedOptions
+            .filter((o) => o.type !== 'Heading')
+            .find((o) => o.value == value /* allow coercion */)
+        : undefined;
+    return (
+      foundFullValue ||
+      (isEmptyNullOrUndefined(value) ? undefined : { value, label: value })
+    );
+  }
+};
+
+export const standardizeSelectedOptions = (
+  standardizedOptions,
+  selectedOptions,
+) => {
+  const isMulti = selectedOptions instanceof Array;
+  if (isMulti) {
+    return selectedOptions
+      .map((selectedOption) =>
+        standardizeSelectedOption(standardizedOptions, selectedOption),
+      )
+      .filter((selectedOption) => selectedOption !== undefined);
+  } else {
+    return selectedOptions === null
+      ? undefined
+      : standardizeSelectedOption(standardizedOptions, selectedOptions);
+  }
+};
+
+export const isSimpleOptions = (options) =>
+  options instanceof Array &&
+  options.some((o) => typeof o === 'string' || typeof o === 'number');
+
+export const isSimpleSelectedOptions = (selectedOptions) => {
+  return (
+    typeof selectedOptions === 'string' ||
+    typeof selectedOptions === 'number' ||
+    (selectedOptions instanceof Array && isSimpleOptions(selectedOptions))
+  );
+};
+
+export const getFirstSelectedOptionIndex = (options, selectedOptions) => {
+  const firstSelected =
+    selectedOptions instanceof Array
+      ? selectedOptions.length
+        ? selectedOptions[0]
+        : null
+      : selectedOptions;
+  const firstSelectedValue =
+    firstSelected === null || firstSelected === undefined
+      ? null
+      : typeof firstSelected === 'string' || typeof firstSelected === 'number'
+      ? firstSelected
+      : firstSelected.value;
+  const index = options
+    .filter((o) => o.type !== 'Heading')
+    .findIndex((o) => {
+      if (typeof o === 'string' || typeof o === 'number') {
+        return o == firstSelectedValue; //allow coercion
+      } else {
+        return o.value == firstSelectedValue; //allow coercion
+      }
+    });
+  return index === -1 ? null : index;
+};
+
+export const nonExistentValue = (options, selectedOptions) => {
+  const isMulti = selectedOptions instanceof Array;
+  const selected = isMulti
+    ? selectedOptions
+    : isEmptyNullOrUndefined(selectedOptions)
+    ? []
+    : [selectedOptions];
+  return !selected.every((selectedValue) => {
+    const found = options.find((o) => o.value === selectedValue.value);
+    return found !== undefined;
+  });
+};
+
+export const standardizeInputs = (
+  options,
+  selectedOptions,
+  enableAutoScroll,
+  checkNonExistentValues,
+) => {
+  const cleanedOptions = options instanceof Array ? options : []; // don't crash when options is null or wrong type
+  const multi = isMulti(selectedOptions);
+  const simpleOptions = isSimpleOptions(cleanedOptions);
+  const simpleSelectedOptions = isSimpleSelectedOptions(selectedOptions);
+  const standardizedOptions = standardizeOptions(cleanedOptions, simpleOptions);
+  const firstSelectedOptionIndex = enableAutoScroll
+    ? getFirstSelectedOptionIndex(cleanedOptions, selectedOptions)
+    : null;
+  const standardizedSelectedOptions = standardizeSelectedOptions(
+    standardizedOptions,
+    selectedOptions,
+    simpleSelectedOptions,
+    multi,
+  );
+  const hasNonExistentValue = checkNonExistentValues
+    ? nonExistentValue(standardizedOptions, standardizedSelectedOptions)
+    : false;
+  return {
+    options: standardizedOptions,
+    selectedOptions: standardizedSelectedOptions,
+    multi,
+    simpleInputs: simpleOptions,
+    firstSelectedOptionIndex,
+    hasNonExistentValue,
+  };
+};

package/src/components/select/select.jsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import * as PropTypes from 'prop-types';
+import { NativeSelect } from './native-select/native-select';
+import {
+  CustomSelect,
+  selectOptionShape,
+  selectedOptionsShape,
+} from './custom-select/custom-select';
+import { standardizeInputs } from './select.input';
+
+export const Select = (props) => {
+  const {
+    name,
+    options: rawOptions = [],
+    value: rawSelectedOptions,
+    native,
+    onChange,
+    deprecatedEventHandler,
+    autoScroll = true,
+    warning,
+    error,
+    checkNonExistentValues,
+    closeOnOptionActionClick,
+    testId,
+  } = props;
+  const enableAutoScroll = !native && autoScroll === true;
+  const {
+    multi,
+    simpleInputs,
+    options,
+    selectedOptions,
+    firstSelectedOptionIndex,
+    hasNonExistentValue,
+  } = standardizeInputs(
+    rawOptions,
+    rawSelectedOptions,
+    enableAutoScroll,
+    checkNonExistentValues,
+  );
+  const canUseNative = !multi; //ignore searchable since it's on by default
+  const useNative = native && canUseNative;
+  if (native && !canUseNative) {
+    console.warn('Native select does not support provided props (see stories)');
+  }
+
+  const nonExistentWarning = 'Value no longer available for re-selection';
+  const fullWarning = hasNonExistentValue ? (
+    warning ? (
+      <div>
+        <div>{nonExistentWarning}</div>
+        <div>{warning}</div>
+      </div>
+    ) : (
+      nonExistentWarning
+    )
+  ) : (
+    warning
+  );
+
+  const fullError =
+    hasNonExistentValue && error ? (
+      <div>
+        <div>{nonExistentWarning}</div>
+        <div>{error}</div>
+      </div>
+    ) : (
+      error
+    );
+
+  const onChangeSelectedValue = (evt, selectedOptions) => {
+    if (deprecatedEventHandler) {
+      const newSelectedOptions = multi
+        ? selectedOptions.map((o) => (simpleInputs ? o.value : o))
+        : simpleInputs
+        ? selectedOptions.value
+        : selectedOptions;
+      onChange(newSelectedOptions);
+    } else {
+      /*
+        - For React synthetic events, mutate the values and forward the event
+        - For native (keyboard) events, clone the enumerable properties and forward
+        - Explanation:
+          https://gitlab.com/oliasoft-open-source/react-ui-library/-/issues/77
+      */
+      const isSyntheticEvent = !(evt instanceof Event);
+      const value = multi ? selectedOptions : selectedOptions.value;
+      if (isSyntheticEvent) {
+        evt.target.name = name;
+        evt.target.value = value;
+        if (!multi) {
+          evt.target.label = selectedOptions.label;
+        }
+        onChange(evt);
+      } else {
+        onChange({
+          ...evt,
+          target: {
+            ...evt.target,
+            name,
+            value,
+            ...(!multi && { label: selectedOptions.label }),
+          },
+        });
+      }
+    }
+  };
+
+  return useNative ? (
+    <NativeSelect
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
+      options={options}
+      selectedOption={selectedOptions}
+      onChange={onChangeSelectedValue}
+      hasNonExistentValue={hasNonExistentValue}
+      warning={fullWarning}
+      error={fullError}
+      testId={testId}
+    />
+  ) : (
+    <CustomSelect
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
+      options={options}
+      selectedOptions={selectedOptions}
+      onChange={onChangeSelectedValue}
+      multi={multi}
+      firstSelectedOptionIndex={firstSelectedOptionIndex}
+      warning={fullWarning}
+      error={fullError}
+      testId={testId}
+      closeOnOptionActionClick={closeOnOptionActionClick}
+    />
+  );
+};
+
+Select.defaultProps = {
+  autoLayerWidth: false,
+  borderRadius: null,
+  clearable: false,
+  disabled: false,
+  error: null,
+  firstSelectedOptionIndex: null,
+  groupOrder: null,
+  isInTable: false,
+  multi: false,
+  onBlur: () => {},
+  onChange: () => {},
+  onCreate: null,
+  onFocus: () => {},
+  right: false,
+  searchable: true,
+  selectedOption: null,
+  selectedOptions: null,
+  small: false,
+  tabIndex: 0,
+  tooltip: null,
+  warning: null,
+  width: null,
+  checkNonExistentValues: true,
+  closeOnOptionActionClick: true,
+  testId: undefined,
+};
+
+const SelectShape = {
+  name: PropTypes.string,
+  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,
+  value: 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,
+  maxTooltipWidth: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  autoScroll: PropTypes.bool,
+  checkNonExistentValues: PropTypes.bool,
+  testId: PropTypes.string,
+  closeOnOptionActionClick: PropTypes.bool,
+  //native select only:
+  borderRadius: PropTypes.number,
+  //deprecated props:
+  deprecatedEventHandler: PropTypes.bool,
+  //private props (don't use)
+  isInTable: PropTypes.bool,
+  right: PropTypes.bool,
+};
+
+Select.propTypes = PropTypes.shape(SelectShape).isRequired;

package/src/components/select/select.stories-data.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import {
+  FaExclamationTriangle,
+  FaPencilAlt,
+  FaSkull,
+  FaTrash,
+} from 'react-icons/fa';
+
+export const options = [
+  { label: 'Aardvarks', value: 'termites' },
+  { label: 'Kangaroos', value: 'grass' },
+  { label: 'Monkeys', value: 'bananas', disabled: true },
+];
+
+export const optionsWithDetails = [
+  { label: 'Kangaroos', value: 'grass', details: '(grass)' },
+  { label: 'Monkeys', value: 'bananas', details: '(bananas)' },
+  { label: 'Possums', value: 'slugs', details: '(slugs)' },
+];
+
+export const optionsWithHeadings = [
+  { type: 'Heading', label: 'Large' },
+  { label: 'Aardvarks', value: 'termites' },
+  { label: 'Kangaroos', value: 'grass' },
+  { label: 'Monkeys', value: 'bananas' },
+  { type: 'Heading', label: 'Small' },
+  { label: 'Possums', value: 'slugs' },
+];
+
+export const optionsNumeric = [
+  { label: 1, value: 1 },
+  { label: 2, value: 2 },
+  { label: 3, value: 3 },
+  { label: 4, value: 4 },
+];
+
+export const optionsWithIcons = [
+  {
+    label: 'Aardvarks',
+    value: 'termites',
+  },
+  { label: 'Monkeys', value: 'bananas' },
+  {
+    label: 'Vampires',
+    value: 'blood',
+    icon: <FaExclamationTriangle color="var(--color-text-warning)" />,
+  },
+  {
+    label: 'Zombies',
+    value: 'brains',
+    icon: <FaSkull color="var(--color-text-error)" />,
+  },
+];
+
+export const actions = [
+  {
+    label: 'Delete',
+    icon: <FaTrash />,
+    onClick: () => {},
+  },
+  {
+    label: 'Rename',
+    icon: <FaPencilAlt />,
+    onClick: () => {},
+  },
+];
+
+export const optionsWithActions = [
+  {
+    label: 'Kangaroos',
+    value: 'grass',
+    actions,
+  },
+  {
+    label: 'Monkeys',
+    value: 'bananas',
+    actions,
+  },
+  {
+    label: 'Possums',
+    value: 'slugs',
+    actions,
+    details: '(some details)',
+  },
+];
+
+export const optionsLong = [...Array(10000).keys()].map((o, i) => ({
+  label: Math.random().toString(36).substring(7),
+  value: i,
+}));
+
+export const optionsSimple = ['Aardvarks', 'Kangaroos', 'Monkeys', 'Possums'];

package/src/components/select/select.stories.jsx

@@ -0,0 +1,135 @@
+import React, { useState } from 'react';
+import { Select } from './select';
+import * as storyData from './select.stories-data';
+
+export default {
+  title: 'Forms/Select',
+  component: Select,
+  args: {
+    options: storyData.options,
+    native: false,
+    multi: false,
+    disabled: false,
+    small: false,
+    autoLayerWidth: false,
+    clearable: false,
+    searchable: true,
+    right: false,
+  },
+};
+
+const Template = (args) => {
+  const { multi, value } = args;
+  const [selectedValue, setSelectedValue] = useState(
+    value || (multi ? [] : undefined),
+  );
+  const handleChange = (evt) => {
+    const { value } = evt.target;
+    setSelectedValue(multi ? value : { value });
+  };
+  return (
+    <Select
+      // eslint-disable-next-line react/jsx-props-no-spreading
+      {...args}
+      value={selectedValue}
+      onChange={handleChange}
+    />
+  );
+};
+
+export const Default = Template.bind({});
+
+export const Native = Template.bind({});
+Native.args = { native: true };
+
+export const Multiselect = Template.bind({});
+Multiselect.args = { multi: true };
+
+export const Empty = Template.bind({});
+Empty.args = { options: [] };
+
+export const Clearable = Template.bind({});
+Clearable.args = { clearable: true };
+
+export const OptionsWithDetails = Template.bind({});
+OptionsWithDetails.args = { options: storyData.optionsWithDetails };
+
+export const NonExistentValue = Template.bind({});
+NonExistentValue.args = { value: { label: 'Vampires', value: 'blood' } };
+
+export const CustomPlaceholder = Template.bind({});
+CustomPlaceholder.args = { placeholder: 'Select the best animal...' };
+
+export const OptionsWithHeadings = Template.bind({});
+OptionsWithHeadings.args = { options: storyData.optionsWithHeadings };
+
+export const OptionsWithIcons = Template.bind({});
+OptionsWithIcons.args = { options: storyData.optionsWithIcons };
+
+export const OptionsWithActions = Template.bind({});
+OptionsWithActions.args = { options: storyData.optionsWithActions };
+
+export const NotSearchable = Template.bind({});
+NotSearchable.args = { searchable: false };
+
+export const Small = Template.bind({});
+Small.args = { small: true };
+
+export const RightAligned = Template.bind({});
+RightAligned.args = { right: true };
+
+export const AutoWidth = Template.bind({});
+AutoWidth.parameters = {
+  docs: {
+    description: {
+      story: 'Avoid `width: auto` for very long lists in custom selects (slow)',
+    },
+  },
+};
+AutoWidth.args = { width: 'auto' };
+
+export const AutoLayerWidth = Template.bind({});
+AutoLayerWidth.parameters = {
+  docs: {
+    description: {
+      story:
+        'Avoid autoLayerWidth for very long lists in custom selects (slow)',
+    },
+  },
+};
+AutoLayerWidth.args = { width: '70px', autoLayerWidth: true };
+
+export const FixedWidth = Template.bind({});
+FixedWidth.args = { width: '200px' };
+
+export const Tooltip = Template.bind({});
+Tooltip.args = { tooltip: 'Some info' };
+
+export const Error = Template.bind({});
+Error.args = { error: 'Some info' };
+
+export const Warning = Template.bind({});
+Warning.args = { warning: 'Some info' };
+
+export const Disabled = Template.bind({});
+Disabled.args = { disabled: true };
+
+export const NumericOptions = Template.bind({});
+NumericOptions.args = { options: storyData.optionsNumeric };
+
+export const SimpleOptions = Template.bind({});
+SimpleOptions.args = { options: storyData.optionsSimple };
+
+export const VeryLongList = Template.bind({});
+VeryLongList.parameters = {
+  docs: {
+    description: {
+      story:
+        'Avoid `width: auto` and autoLayerWidth for very long lists in custom selects (slow). Consider checkNonExistentValues={false}.',
+    },
+  },
+};
+VeryLongList.args = { options: storyData.optionsLong };
+
+export const DeprecatedEventHandler = Template.bind({});
+DeprecatedEventHandler.args = { deprecatedEventHandler: true };