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

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

@@ -1,289 +0,0 @@
-@import '../../../../style/variables.less';
-@import '../../../../style/mixins.less';
-
-.trigger {
-  font-family: sans-serif !important;
-  font-weight: normal;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  border: 1px solid var(--color-border);
-  border-radius: @input_border_radius;
-  padding-right: 11px;
-  background: var(--color-background-input);
-  min-height: @input_height;
-  position: relative;
-
-  input {
-    border: none !important;
-    background: transparent !important;
-  }
-
-  &.isInTable {
-    .inputInTable();
-
-    .input {
-      background: transparent !important;
-    }
-
-    &.isOpen,
-    &:hover,
-    &:focus {
-      position: relative;
-      z-index: 2;
-    }
-  }
-
-  &:hover {
-    border-color: var(--color-border-hover);
-    cursor: pointer;
-  }
-
-  &.isOpen,
-  &:focus {
-    .inputFocus();
-  }
-
-  &.error {
-    .inputError();
-  }
-
-  &.warning {
-    .inputWarning();
-  }
-
-  &.disabled {
-    .inputDisabled();
-
-    .iconOpen {
-      background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='gray' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
-    }
-  }
-}
-
-.icons {
-  display: flex;
-  align-items: center;
-  flex-wrap: nowrap;
-  flex-shrink: 0;
-  position: relative;
-  z-index: 2;
-  font-size: 12px;
-
-  .clearAll {
-    color: var(--color-border);
-    padding: 5px;
-    margin-right: -5px;
-
-    &:hover,
-    &.focus {
-      color: var(--color-text);
-      outline: 0;
-    }
-  }
-
-  .iconOpen {
-    color: inherit;
-    display: block;
-    height: 12px;
-    width: 12px;
-    flex-shrink: 0;
-    background: transparent
-      url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='gray' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
-      no-repeat center;
-    background-size: 8px 10px;
-  }
-
-  svg {
-    display: block;
-  }
-}
-
-.triggerInputContainer {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  overflow: hidden;
-  position: relative;
-  z-index: 1;
-  flex-grow: 1;
-
-  .right & {
-    margin-right: 8px;
-    justify-content: flex-end;
-    text-align: right;
-
-    input {
-      padding-right: 0;
-      padding-left: 0;
-      text-align: right;
-      width: 0;
-
-      &:focus {
-        width: auto;
-      }
-    }
-  }
-}
-
-.multiOptions {
-  padding: 3px;
-  max-width: 100%;
-  display: flex;
-  flex-wrap: wrap;
-
-  &:empty {
-    display: none !important;
-  }
-
-  .multiOptionWrapper {
-    padding: 3px;
-    max-width: 100%;
-
-    .small & {
-      padding: 0;
-    }
-  }
-
-  .multiOption {
-    user-select: none;
-    display: inline-flex;
-    align-items: center;
-    border: 1px solid var(--color-border);
-    background-color: var(--color-background);
-
-    padding-left: 7px;
-    border-radius: 3px;
-    font-size: 12px;
-    line-height: 24px;
-    height: 24px;
-    color: var(--color-text);
-    max-width: 100%;
-
-    .label {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      flex-grow: 1;
-    }
-
-    .closeMultiOption {
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-      width: 24px;
-      opacity: 0.25;
-
-      &:hover,
-      &.focus {
-        opacity: 1;
-        outline: 0;
-      }
-    }
-  }
-}
-
-.selectedSingleValue,
-.placeHolder {
-  line-height: @input_height - 2px;
-  right: 0;
-  left: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: block;
-  margin-top: -0.5px; // Fix discrepancy between Webkit & FF
-
-  &.searchable {
-    position: absolute;
-  }
-}
-
-.selectedSingleValue,
-.placeHolder,
-.input {
-  padding-left: @input_padding_x;
-}
-
-.placeHolder {
-  color: var(--color-text-faint);
-}
-
-.input {
-  font-family: @default_font;
-  background-color: transparent;
-  border: none;
-  color: var(--color-text);
-
-  &.error {
-    color: var(--color-text-error) !important;
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.small {
-  min-height: @input_height_small;
-  padding-right: @input_padding_small_x;
-  font-size: @input_font_size_small;
-
-  .selectedSingleValue,
-  .placeHolder,
-  .input {
-    padding-left: @input_padding_small_x;
-    height: @input_height_small - 2px;
-    line-height: @input_height_small - 2px;
-  }
-
-  .multiOptions {
-    padding: 1px;
-  }
-
-  .multiOption {
-    line-height: @input_height_small - 6px;
-    height: @input_height_small - 6px;
-    margin: 1px;
-  }
-}
-
-.groupOrderFirst,
-.groupOrderMiddle,
-.groupOrderLast {
-  .input:hover,
-  .input:focus {
-    z-index: 2;
-  }
-}
-
-.groupOrderFirst,
-.groupOrderMiddle {
-  margin-right: -1px;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.groupOrderLast,
-.groupOrderMiddle {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}
-
-.detailedLabel {
-  width: 100%;
-
-  :first-child {
-    float: left;
-    position: absolute;
-    background-color: white;
-    padding-right: 5px;
-  }
-
-  :last-child {
-    float: right;
-    padding-right: 10px;
-  }
-}

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

@@ -1,198 +0,0 @@
-import React, { useContext } from 'react';
-import PropTypes from 'prop-types';
-import cx from 'classnames';
-import styles from './native-select.module.less';
-import { Tooltip } from '../../tooltip/tooltip';
-import { isStringNumberOrNode } from '../../../helpers/types';
-import { DisabledContext } from '../../../helpers/disabled-context';
-
-export const NativeSelect = ({
-  disabled,
-  error,
-  tooltip,
-  options,
-  selectedOption,
-  right,
-  small,
-  width,
-  borderRadius,
-  onChange,
-  tabIndex,
-  warning,
-  onFocus,
-  onBlur,
-  maxTooltipWidth,
-  placeholder,
-  clearable,
-  hasNonExistentValue,
-  groupOrder,
-  testId,
-  isInTable,
-}) => {
-  const disabledContext = useContext(DisabledContext);
-  const internalValue =
-    selectedOption === null
-      ? 'unselected'
-      : selectedOption.value === null
-      ? 'unselected'
-      : selectedOption.value; //null not allowed as a React prop to a select input
-  const isUnselected = internalValue === 'unselected';
-
-  const viewOptions = (
-    internalValue === 'unselected' || clearable
-      ? [
-          <option
-            key="unselected"
-            value="unselected"
-            disabled={!clearable}
-            hidden={!clearable}
-          >
-            {placeholder || 'Select...'}
-          </option>,
-        ]
-      : []
-  )
-    .concat(
-      hasNonExistentValue
-        ? [
-            <option
-              key="selectedNonExistentValue"
-              value={selectedOption.value}
-              disabled={disabled || disabledContext}
-            >
-              {selectedOption.label}
-            </option>,
-          ]
-        : [],
-    )
-    .concat(
-      options.map((option, i) => {
-        return (
-          <option key={i} value={option.value} data-testid={option.testId}>
-            {option.label}
-          </option>
-        );
-      }),
-    );
-
-  const order = (() => {
-    if (groupOrder) {
-      switch (groupOrder) {
-        case 'first':
-          return styles.groupOrderFirst;
-        case 'last':
-          return styles.groupOrderLast;
-        default:
-          return styles.groupOrderMiddle;
-      }
-    }
-    return '';
-  })();
-
-  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"
-    >
-      <select
-        className={cx(
-          styles.select,
-          isUnselected ? styles.unSelected : '',
-          error ? styles.error : warning ? styles.warning : '',
-          right ? styles.right : '',
-          small ? styles.small : '',
-          isInTable ? styles.isInTable : '',
-          order,
-        )}
-        style={{
-          width: width || '',
-          borderRadius: borderRadius || '',
-        }}
-        onChange={(evt) => {
-          const { value } = evt.target;
-          const nextValue =
-            value === 'unselected'
-              ? { value: null }
-              : options.find((o) => String(o.value) === String(value));
-          onChange(evt, nextValue);
-        }}
-        onFocus={onFocus}
-        onBlur={onBlur}
-        tabIndex={tabIndex}
-        value={internalValue}
-        disabled={disabled || disabledContext}
-        data-testid={testId}
-      >
-        {viewOptions}
-      </select>
-    </Tooltip>
-  );
-};
-
-export const selectOptionShape = {
-  label: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-};
-
-NativeSelect.defaultProps = {
-  borderRadius: null,
-  disabled: false,
-  error: null,
-  warning: null,
-  tooltip: null,
-  onChange: () => {},
-  onFocus: () => {},
-  onBlur: () => {},
-  right: false,
-  small: false,
-  tabIndex: 0,
-  selectedOption: null,
-  width: null,
-  groupOrder: null,
-  testId: undefined,
-  isInTable: false,
-};
-
-export const NativeSelectShape = {
-  borderRadius: PropTypes.number,
-  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(PropTypes.shape(selectOptionShape)).isRequired,
-  onChange: PropTypes.func,
-  onFocus: PropTypes.func,
-  onBlur: PropTypes.func,
-  right: PropTypes.bool,
-  small: PropTypes.bool,
-  tabIndex: PropTypes.number,
-  selectedOption: PropTypes.shape(selectOptionShape),
-  width: PropTypes.string,
-  groupOrder: PropTypes.string,
-  testId: PropTypes.string,
-  //private props (don't use)
-  isInTable: PropTypes.bool,
-};
-
-NativeSelect.propTypes = NativeSelectShape;

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

@@ -1,107 +0,0 @@
-@import '../../../style/variables.less';
-@import '../../../style/mixins.less';
-
-.select {
-  appearance: none !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  display: inline-block;
-  width: 100%;
-  padding: 0.67857143em 12px;
-  padding-right: 30px;
-  line-height: 1.21428571em;
-  color: var(--color-text);
-  vertical-align: middle;
-  background: var(--color-background-input)
-    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='gray' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
-    no-repeat right 12px center;
-  background-size: 8px 10px !important;
-  border: 1px solid var(--color-border);
-  border-radius: 0.28571429rem;
-  height: 38px;
-  font-family: sans-serif !important;
-
-  // Styles for option dropdown in browsers that support it (e.g. Windows/Chrome)
-  option {
-    background: var(--color-background-input);
-    color: var(--color-text);
-
-    &:focus {
-      background-color: var(--color-background-menuitem-active);
-    }
-  }
-
-  &:-moz-focusring {
-    color: transparent !important;
-    text-shadow: 0 0 0 #000 !important;
-  }
-
-  &:hover {
-    border-color: var(--color-border-hover);
-  }
-
-  &:focus {
-    .inputFocus();
-  }
-
-  &.isInTable {
-    .inputInTable();
-  }
-
-  &.unSelected {
-    color: var(--color-text-faint) !important;
-
-    &:-moz-focusring {
-      color: transparent !important;
-      text-shadow: 0 0 0 #000 !important;
-    }
-  }
-
-  &.error {
-    .inputError();
-  }
-
-  &.warning {
-    .inputWarning();
-  }
-
-  &.small {
-    font-size: @input_font_size_small;
-    height: @input_height_small;
-    padding: @input_padding_small_y @input_padding_small_x;
-    background-position: right 8px center !important;
-    padding-right: 28px;
-  }
-
-  &.right {
-    text-align: right;
-    text-align-last: right;
-  }
-
-  &[disabled] {
-    .inputDisabled();
-    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='gray' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E");
-  }
-}
-
-.groupOrderFirst,
-.groupOrderMiddle,
-.groupOrderLast {
-  .input:hover,
-  .input:focus {
-    z-index: 2;
-  }
-}
-
-.groupOrderFirst,
-.groupOrderMiddle {
-  margin-right: -1px;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-.groupOrderLast,
-.groupOrderMiddle {
-  border-top-left-radius: 0 !important;
-  border-bottom-left-radius: 0 !important;
-}