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

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

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

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

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

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