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

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

@@ -1,13 +0,0 @@
-import React from 'react';
-import styles from '../custom-select.module.less';
-
-export const Heading = ({ label }) => {
-  return (
-    <div
-      onClick={(evt) => evt.stopPropagation()} //don't close menu
-      className={styles.heading}
-    >
-      {label}
-    </div>
-  );
-};

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

@@ -1,73 +0,0 @@
-import React, { useEffect } from 'react';
-import cx from 'classnames';
-import { FixedSizeList as List } from 'react-window';
-import styles from '../custom-select.module.less';
-import { Section } from './section';
-
-export const Layer = ({
-  listRef,
-  isMulti,
-  sections,
-  selectedOptions,
-  onSelectOption,
-  focusedOptionIndex,
-  width,
-  firstSelectedOptionIndex,
-  closeLayer,
-}) => {
-  useEffect(() => {
-    if (firstSelectedOptionIndex !== null && listRef.current !== null) {
-      listRef.current.scrollToItem(firstSelectedOptionIndex, 'start');
-    }
-  }, []);
-  const optionHeight = 38;
-  return (
-    <div className={cx(styles.layer)}>
-      {!sections.length ? (
-        <ul>
-          <li>
-            <div className={styles.message} style={{ width }}>
-              No matches
-            </div>
-          </li>
-        </ul>
-      ) : (
-        <List
-          ref={listRef}
-          height={
-            sections.length < 10
-              ? optionHeight * sections.length
-              : optionHeight * 10
-          }
-          itemCount={sections.length}
-          itemSize={optionHeight}
-          width={width}
-        >
-          {({ index, style }) => (
-            <div style={style}>
-              <Section
-                closeLayer={closeLayer}
-                section={sections[index]}
-                selected={
-                  isMulti &&
-                  sections[index].type !== 'Heading' &&
-                  selectedOptions
-                    ? selectedOptions.some(
-                        (v) => v && v.value === sections[index].value,
-                      )
-                    : selectedOptions
-                    ? sections[index].value === selectedOptions.value
-                    : false
-                }
-                focused={focusedOptionIndex === index}
-                onSelectOption={(evt) => {
-                  onSelectOption(evt, sections[index]);
-                }}
-              />
-            </div>
-          )}
-        </List>
-      )}
-    </div>
-  );
-};

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

@@ -1,54 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { FaCheck } from 'react-icons/fa';
-import styles from '../custom-select.module.less';
-import { Text } from '../../../text/text';
-import { Actions } from '../../../actions/actions';
-
-export const Option = ({
-  details,
-  label,
-  icon,
-  disabled,
-  selected,
-  focused,
-  onSelectOption,
-  actions,
-  closeLayer,
-  testId,
-}) => {
-  return (
-    <div
-      className={cx(
-        styles.option,
-        disabled ? styles.disabled : '',
-        selected ? styles.selected : '',
-        focused ? styles.focused : '',
-      )}
-      onClick={!disabled ? onSelectOption : () => {}}
-      data-testid={testId}
-    >
-      <div className={styles.optionContent}>
-        <span className={styles.label} title={label}>
-          {label}
-          {icon && <span className={styles.icon}>{icon}</span>}
-        </span>
-      </div>
-      {details && (
-        <div className={cx(styles.details)}>
-          <Text faint>{details}</Text>
-        </div>
-      )}
-      {!!actions?.length && (
-        <div className={cx(styles.actions)}>
-          <Actions actions={actions} closeLayer={closeLayer} right />
-        </div>
-      )}
-      {selected ? (
-        <span className={styles.check}>
-          <FaCheck />
-        </span>
-      ) : null}
-    </div>
-  );
-};

package/src/components/select/custom-select/layer/placementOptions.js

@@ -1,7 +0,0 @@
-export const placementOptions = {
-  auto: true,
-  possiblePlacements: ['bottom-start', 'top-start'],
-  placement: 'bottom-start',
-  preferX: 'right',
-  preferY: 'bottom',
-};

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

@@ -1,35 +0,0 @@
-import React, { useContext } from 'react';
-import { DisabledContext } from '../../../../helpers/disabled-context';
-import { Heading } from './heading';
-import { Option } from './option';
-
-export const Section = ({
-  section,
-  selected,
-  focused,
-  onSelectOption,
-  closeLayer,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-
-  switch (section.type) {
-    case 'Heading':
-      return <Heading label={section.label} />;
-    case 'Option':
-    default:
-      return (
-        <Option
-          closeLayer={closeLayer}
-          actions={section.actions}
-          label={section.label}
-          details={section.details}
-          icon={section.icon}
-          disabled={section.disabled || disabledContext}
-          selected={selected}
-          focused={focused}
-          onSelectOption={onSelectOption}
-          testId={section.testId}
-        />
-      );
-  }
-};

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

@@ -1,100 +0,0 @@
-import React from 'react';
-import * as PropTypes from 'prop-types';
-import cx from 'classnames';
-import { FaTimes } from 'react-icons/fa';
-import styles from './trigger.module.less';
-
-export const Input = ({
-  selectedOptions,
-  searchable,
-  searchValue,
-  inputRef,
-  onChange,
-  onClickDeselect,
-  error,
-  focusedSelectedOptionIndex,
-  placeholder,
-}) => {
-  const isMulti = selectedOptions instanceof Array;
-  const hasSelectedValues = isMulti
-    ? selectedOptions.length > 0
-    : selectedOptions !== null;
-  const placeHolder = !searchValue && !hasSelectedValues ? placeholder : '';
-  const selectedSingleValue =
-    !isMulti && !searchValue && selectedOptions ? selectedOptions.label : '';
-  const size = searchValue.length || 2;
-  return (
-    <div className={styles.triggerInputContainer}>
-      {placeHolder && (
-        <span
-          className={cx(
-            styles.placeHolder,
-            searchable ? styles.searchable : '',
-          )}
-        >
-          {placeHolder}
-        </span>
-      )}
-      {selectedSingleValue !== '' && (
-        <span
-          className={cx(
-            styles.selectedSingleValue,
-            searchable ? styles.searchable : '',
-          )}
-        >
-          {selectedSingleValue}
-        </span>
-      )}
-      {isMulti ? (
-        <div className={styles.multiOptions}>
-          {selectedOptions
-            .filter((option) => option && option.label)
-            .map((option, index) => (
-              <span key={index} className={styles.multiOptionWrapper}>
-                <span
-                  className={styles.multiOption}
-                  key={index}
-                  onClick={(evt) => {
-                    evt.stopPropagation();
-                  }}
-                >
-                  <span className={styles.label}>{option.label}</span>
-                  <span
-                    className={cx(
-                      styles.closeMultiOption,
-                      focusedSelectedOptionIndex === index ? styles.focus : '',
-                    )}
-                    onClick={(evt) => {
-                      evt.stopPropagation();
-                      onClickDeselect(evt, option);
-                    }}
-                  >
-                    <FaTimes className={styles.icon} />
-                  </span>
-                </span>
-              </span>
-            ))}
-        </div>
-      ) : null}
-
-      {searchable ? (
-        <input
-          tabIndex={-1}
-          ref={inputRef}
-          size={size}
-          className={cx(styles.input, error ? styles.error : '')}
-          value={searchValue}
-          onChange={(evt) => onChange(evt.target.value)}
-        />
-      ) : null}
-    </div>
-  );
-};
-
-Input.defaultProps = {
-  placeholder: 'Select...',
-};
-
-Input.propTypes = {
-  placeholder: PropTypes.string,
-};

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

@@ -1,155 +0,0 @@
-import React from 'react';
-import cx from 'classnames';
-import { FaTimes } from 'react-icons/fa';
-import { useFocus } from '../../../../hooks/use-focus';
-import { Input } from './input';
-import { Tooltip } from '../../../tooltip/tooltip';
-import styles from './trigger.module.less';
-import { isStringNumberOrNode } from '../../../../helpers/types';
-import { Text } from '../../../text/text';
-
-export const Trigger = ({
-  selectedOptions,
-  searchValue,
-  searchable,
-  clearable,
-  onClickTrigger,
-  width,
-  element,
-  error,
-  warning,
-  tooltip,
-  small,
-  isInTable,
-  disabled,
-  onChangeSearch,
-  onClickDeselect,
-  onClickClear,
-  tabIndex,
-  isOpen,
-  triggerRef,
-  clearAllIsFocused,
-  focusedSelectedOptionIndex,
-  onFocus,
-  onBlur,
-  groupOrder,
-  maxTooltipWidth,
-  placeholder,
-  right,
-  testId,
-}) => {
-  const [inputRef, setInputFocus] = useFocus();
-
-  const canClear =
-    clearable &&
-    selectedOptions &&
-    (selectedOptions.value || selectedOptions.length > 0);
-
-  const order = (() => {
-    if (groupOrder) {
-      switch (groupOrder) {
-        case 'first':
-          return styles.groupOrderFirst;
-        case 'last':
-          return styles.groupOrderLast;
-        default:
-          return styles.groupOrderMiddle;
-      }
-    }
-    return '';
-  })();
-
-  const selectedOptionsWithDetails = selectedOptions?.details
-    ? {
-        ...selectedOptions,
-        label: (
-          <div className={cx(styles.detailedLabel)}>
-            <Text>{selectedOptions.label}</Text>
-            <Text faint>{selectedOptions.details}</Text>
-          </div>
-        ),
-      }
-    : selectedOptions;
-
-  const triggerInput = (
-    <div
-      style={{
-        ...(width ? { width } : {}),
-      }}
-    >
-      {element}
-      <div
-        ref={triggerRef}
-        tabIndex={tabIndex}
-        className={cx(
-          styles.trigger,
-          isOpen ? styles.isOpen : '',
-          error ? styles.error : warning ? styles.warning : '',
-          disabled ? styles.disabled : '',
-          small ? styles.small : '',
-          isInTable ? styles.isInTable : '',
-          right ? styles.right : '',
-          order,
-        )}
-        onClick={(evt) => {
-          evt.stopPropagation();
-          setInputFocus();
-          onClickTrigger(evt);
-        }}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        data-testid={testId}
-      >
-        <Input
-          selectedOptions={selectedOptionsWithDetails}
-          placeholder={placeholder}
-          searchable={searchable}
-          searchValue={searchValue}
-          inputRef={inputRef}
-          onChange={onChangeSearch}
-          error={error}
-          onClickDeselect={onClickDeselect}
-          focusedSelectedOptionIndex={focusedSelectedOptionIndex}
-        />
-        <span className={styles.icons}>
-          {canClear ? (
-            <span
-              className={cx(
-                styles.clearAll,
-                clearAllIsFocused ? styles.focus : '',
-              )}
-              onClick={(evt) => {
-                evt.stopPropagation();
-                onClickClear(evt);
-              }}
-            >
-              <FaTimes className={cx(styles.iconClear)} />
-            </span>
-          ) : (
-            <span className={cx(styles.iconOpen)} />
-          )}
-        </span>
-      </div>
-    </div>
-  );
-
-  return (
-    <>
-      <Tooltip
-        error={!!error}
-        warning={!!warning}
-        text={tooltip || error || warning}
-        enabled={
-          (tooltip && isStringNumberOrNode(tooltip)) ||
-          (error && isStringNumberOrNode(error)) ||
-          (warning && isStringNumberOrNode(warning)) ||
-          false
-        }
-        maxWidth={maxTooltipWidth}
-        placement="bottom-center"
-      >
-        {triggerInput}
-      </Tooltip>
-    </>
-  );
-};