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

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

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

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

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