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

package/src/components/select/select.test.js

@@ -1,519 +0,0 @@
-import {
-  isMulti,
-  isSimpleOptions,
-  isSimpleSelectedOptions,
-  standardizeOptions,
-  standardizeSelectedOptions,
-  standardizeSelectedOption,
-  getFirstSelectedOptionIndex,
-  nonExistentValue,
-} from './select.input';
-
-describe('select (inputs)', () => {
-  test('is multi select', () => {
-    expect(isMulti([])).toBe(true);
-    expect(isMulti([{ label: 'Monkeys', value: 'bananas' }])).toBe(true);
-    expect(isMulti(null)).toBe(false);
-    expect(isMulti('Monkeys')).toBe(false);
-    expect(isMulti({ label: 'Monkeys', value: 'bananas' })).toBe(false);
-  });
-
-  test('is simple options', () => {
-    expect(isSimpleOptions(['Cat', 'Mouse'])).toBe(true);
-    expect(isSimpleOptions([1, 2])).toBe(true);
-    expect(
-      isSimpleOptions([
-        { label: 'Cat', value: 'Cat' },
-        { label: 'Mouse', value: 'Mouse' },
-      ]),
-    ).toBe(false);
-    expect(isSimpleOptions([{ label: 'Cat', value: 'Cat' }, 'Mouse', 4])).toBe(
-      true,
-    );
-    expect(isSimpleOptions([])).toBe(false);
-    expect(isSimpleOptions(undefined)).toBe(false);
-  });
-
-  test('is simple selected options', () => {
-    expect(isSimpleSelectedOptions(['Cat', 'Mouse'])).toBe(true);
-    expect(isSimpleSelectedOptions([11, 12])).toBe(true);
-    expect(isSimpleSelectedOptions('Cat')).toBe(true);
-    expect(isSimpleSelectedOptions(6)).toBe(true);
-    expect(
-      isSimpleOptions([
-        { label: 'Cat', value: 'Cat' },
-        { label: 'Mouse', value: 'Mouse' },
-      ]),
-    ).toBe(false);
-    expect(isSimpleOptions([{ label: 'Cat', value: 'Cat' }, 'Mouse', 7])).toBe(
-      true,
-    );
-    expect(isSimpleOptions([])).toBe(false);
-    expect(isSimpleOptions(undefined)).toBe(false);
-  });
-
-  test('standardize options', () => {
-    expect(
-      standardizeOptions(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-        ],
-        false,
-      ),
-    ).toStrictEqual([
-      { label: 'Cat', value: 'cat' },
-      { label: 'Mouse', value: 'mouse' },
-    ]);
-    expect(standardizeOptions(['Cat', 'Mouse'], true)).toStrictEqual([
-      { label: 'Cat', value: 'Cat' },
-      { label: 'Mouse', value: 'Mouse' },
-    ]);
-    expect(standardizeOptions([5, 6], true)).toStrictEqual([
-      { label: 5, value: 5 },
-      { label: 6, value: 6 },
-    ]);
-    expect(
-      standardizeOptions([{ label: 'Cat', value: 'cat' }, 'Mouse', 9], true),
-    ).toStrictEqual([
-      { label: 'Cat', value: 'cat' },
-      { label: 'Mouse', value: 'Mouse' },
-      { label: 9, value: 9 },
-    ]);
-    expect(standardizeOptions([], true)).toStrictEqual([]);
-    expect(standardizeOptions(undefined, true)).toStrictEqual(undefined);
-  });
-
-  test('standardize selected options (single select)', () => {
-    expect(
-      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
-        label: 'Cat',
-        value: 'cat',
-      }),
-    ).toStrictEqual({ label: 'Cat', value: 'cat' });
-    expect(
-      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], 'cat'),
-    ).toStrictEqual({
-      label: 'Cat',
-      value: 'cat',
-    });
-    expect(
-      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
-        value: 'cat',
-        monkeys: 'bananas',
-      }),
-    ).toStrictEqual({
-      label: 'Cat',
-      value: 'cat',
-    });
-    expect(
-      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], 'Foobar'),
-    ).toStrictEqual({ label: 'Foobar', value: 'Foobar' });
-    expect(
-      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], {
-        value: '',
-      }),
-    ).toStrictEqual(undefined);
-    expect(
-      standardizeSelectedOptions([{ label: 'Cat', value: 'cat' }], null),
-    ).toStrictEqual(undefined);
-    expect(
-      standardizeSelectedOptions([{ label: 8, value: 8 }], 8),
-    ).toStrictEqual({
-      label: 8,
-      value: 8,
-    });
-    expect(
-      standardizeSelectedOptions([{ label: 8, value: 8 }], '8'), //allow coercion
-    ).toStrictEqual({
-      label: 8,
-      value: 8,
-    });
-    expect(standardizeSelectedOptions([], null)).toStrictEqual(undefined);
-    expect(standardizeSelectedOptions([], undefined)).toStrictEqual(undefined);
-  });
-
-  test('standardize selected options (multi-select)', () => {
-    expect(
-      standardizeSelectedOptions(null, [
-        { label: 'Cat', value: 'cat' },
-        { label: 'Mouse', value: 'mouse' },
-      ]),
-    ).toStrictEqual([
-      { label: 'Cat', value: 'cat' },
-      { label: 'Mouse', value: 'mouse' },
-    ]);
-    expect(
-      standardizeSelectedOptions(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-        ],
-        ['cat', 'mouse'],
-      ),
-    ).toStrictEqual([
-      { label: 'Cat', value: 'cat' },
-      { label: 'Mouse', value: 'mouse' },
-    ]);
-    expect(
-      standardizeSelectedOptions(
-        [
-          { label: 1, value: 1 },
-          { label: 2, value: 2 },
-        ],
-        [1, 2],
-      ),
-    ).toStrictEqual([
-      { label: 1, value: 1 },
-      { label: 2, value: 2 },
-    ]);
-    expect(
-      standardizeSelectedOptions(
-        [
-          { label: 1, value: 1 },
-          { label: 2, value: 2 },
-        ],
-        ['1', '2'], //allow coercion
-      ),
-    ).toStrictEqual([
-      { label: 1, value: 1 },
-      { label: 2, value: 2 },
-    ]);
-    expect(
-      standardizeSelectedOptions(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 5, value: 5 },
-        ],
-        ['cat', { label: 'Mouse', value: 'mouse' }, 5],
-      ),
-    ).toStrictEqual([
-      { label: 'Cat', value: 'cat' },
-      { label: 'Mouse', value: 'mouse' },
-      { label: 5, value: 5 },
-    ]);
-    expect(
-      standardizeSelectedOptions(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 5, value: 5 },
-        ],
-        [
-          { value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          null,
-          undefined,
-          '',
-        ],
-      ),
-    ).toStrictEqual([
-      { label: 'Cat', value: 'cat' },
-      { label: 'Mouse', value: 'mouse' },
-    ]);
-    expect(standardizeSelectedOptions(null, [])).toStrictEqual([]);
-  });
-
-  test('standardize selected option', () => {
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-        ],
-        { label: 'Mouse', value: 'mouse' },
-      ),
-    ).toStrictEqual({ label: 'Mouse', value: 'mouse' });
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-        ],
-        { value: 'mouse' },
-      ),
-    ).toStrictEqual({ label: 'Mouse', value: 'mouse' });
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-        ],
-        'mouse',
-      ),
-    ).toStrictEqual({ label: 'Mouse', value: 'mouse' });
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 1 },
-          { label: 'Mouse', value: 2 },
-        ],
-        { value: 1 },
-      ),
-    ).toStrictEqual({ label: 'Cat', value: 1 });
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 1 },
-          { label: 'Mouse', value: 2 },
-        ],
-        { value: '1' }, //allow coercion
-      ),
-    ).toStrictEqual({ label: 'Cat', value: 1 });
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 1 },
-          { label: 'Mouse', value: 2 },
-        ],
-        1,
-      ),
-    ).toStrictEqual({ label: 'Cat', value: 1 });
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 1 },
-          { label: 'Mouse', value: 2 },
-        ],
-        '1', //allow coercion
-      ),
-    ).toStrictEqual({ label: 'Cat', value: 1 });
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-        ],
-        null,
-      ),
-    ).toStrictEqual(undefined);
-    expect(standardizeSelectedOption([], 'mouse')).toStrictEqual({
-      label: 'mouse',
-      value: 'mouse',
-    });
-    //non-existent values
-    expect(standardizeSelectedOption(undefined, 'mouse')).toStrictEqual({
-      label: 'mouse',
-      value: 'mouse',
-    });
-    expect(
-      standardizeSelectedOption(
-        [
-          { label: 'Cat', value: 1 },
-          { label: 'Mouse', value: 2 },
-        ],
-        { label: 'Vampire', value: 'vampire' },
-      ),
-    ).toStrictEqual({ label: 'Vampire', value: 'vampire' });
-    expect(
-      standardizeSelectedOption(['Cat', 'Mouse'], 'Vampire'),
-    ).toStrictEqual({ label: 'Vampire', value: 'Vampire' });
-  });
-
-  test('get first selected option index', () => {
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        { label: 'Mouse', value: 'mouse' },
-      ),
-    ).toBe(1);
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        [
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-      ),
-    ).toBe(1);
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 1 },
-          { label: 'Mouse', value: 2 },
-          { label: 'Dog', value: 3 },
-        ],
-        { label: 'Mouse', value: 2 },
-      ),
-    ).toBe(1);
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 1 },
-          { label: 'Mouse', value: 2 },
-          { label: 'Dog', value: 3 },
-        ],
-        { label: 'Mouse', value: '2' }, //allow coercion
-      ),
-    ).toBe(1);
-    expect(
-      //with headings (should be omitted from index)
-      getFirstSelectedOptionIndex(
-        [
-          { type: 'Heading', label: 'Enemies' },
-          { label: 'Cat', value: 1 },
-          { type: 'Heading', label: 'Friends' },
-          { label: 'Mouse', value: 2 },
-          { label: 'Dog', value: 3 },
-        ],
-        { label: 'Mouse', value: '2' }, //allow coercion
-      ),
-    ).toBe(1);
-    expect(getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], 'Mouse')).toBe(
-      1,
-    );
-    expect(getFirstSelectedOptionIndex([1, 2, 3], 2)).toBe(1);
-    expect(getFirstSelectedOptionIndex([1, 2, 3], '2')).toBe(
-      //allow coercion
-      1,
-    );
-    expect(
-      getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], ['Mouse', 'Dog']),
-    ).toBe(1);
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        { label: 'Camel', value: 'camel' },
-      ),
-    ).toBe(null);
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        [{ label: 'Camel', value: 'camel' }],
-      ),
-    ).toBe(null);
-    expect(getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], 'Camel')).toBe(
-      null,
-    );
-    expect(
-      getFirstSelectedOptionIndex(['Cat', 'Mouse', 'Dog'], ['Camel', 'Sheep']),
-    ).toBe(null);
-    expect(getFirstSelectedOptionIndex([], 'Camel')).toBe(null);
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        null,
-      ),
-    ).toBe(null);
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        [],
-      ),
-    ).toBe(null);
-    expect(
-      getFirstSelectedOptionIndex(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        undefined,
-      ),
-    ).toBe(null);
-  });
-
-  test('non-existent value', () => {
-    expect(
-      nonExistentValue(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        { label: 'Cat', value: 'cat' },
-      ),
-    ).toBe(false);
-    expect(
-      nonExistentValue(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        { label: 'Vampire', value: 'vampire' },
-      ),
-    ).toBe(true);
-    expect(
-      nonExistentValue(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        null,
-      ),
-    ).toBe(false);
-    expect(
-      nonExistentValue(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        undefined,
-      ),
-    ).toBe(false);
-    expect(
-      nonExistentValue(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        '',
-      ),
-    ).toBe(false);
-    expect(
-      nonExistentValue(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-        ],
-      ),
-    ).toBe(false);
-    expect(
-      nonExistentValue(
-        [
-          { label: 'Cat', value: 'cat' },
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Dog', value: 'dog' },
-        ],
-        [
-          { label: 'Mouse', value: 'mouse' },
-          { label: 'Vampire', value: 'vampire' },
-        ],
-      ),
-    ).toBe(true);
-  });
-});

package/src/components/side-bar/container.module.less

@@ -1,29 +0,0 @@
-@import '../../style/variables.less';
-
-.oContent {
-  @media print {
-    position: absolute;
-    left: 0;
-    top: 0;
-    overflow: visible;
-    padding: 0 !important;
-  }
-
-  background-color: var(--color-background);
-  position: fixed;
-  right: 0;
-  bottom: 0;
-  top: @topbar_height;
-  left: @sidebar_width_collapsed;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto;
-}
-
-.oContentWithPadding {
-  padding: 1.5rem 1.5rem 0 1.5rem;
-}
-
-.oContentNoSideBar {
-  left: 0;
-}

package/src/components/side-bar/link.jsx

@@ -1,83 +0,0 @@
-import React, { memo } from 'react';
-import cx from 'classnames';
-import isEqual from 'react-fast-compare';
-import styles from './side-bar.module.less';
-import { Tooltip } from '../tooltip/tooltip';
-import { Icon } from '../icon/icon';
-import { Badge } from '../badge/badge';
-import { styleVariables } from '../../helpers/styles';
-
-const TooltipIcon = memo(
-  ({ isOpen, label, icon, invalid }) => {
-    const Unbadged = () => (
-      <Tooltip
-        text={label}
-        enabled={!isOpen}
-        placement="right-center"
-        possiblePlacements={['right-center']}
-        triggerOffset={30}
-        fontSize={16}
-        padding="10px 16px"
-        display="block"
-      >
-        <Icon icon={icon} size={30} color="white" />
-      </Tooltip>
-    );
-
-    const Badged = () => (
-      <Badge small margin="-2px" color={styleVariables.col_danger} title="!">
-        <Unbadged />
-      </Badge>
-    );
-
-    return (
-      <>
-        <span className={styles.icon}>
-          {invalid ? <Badged /> : <Unbadged />}
-        </span>
-        <span className={styles.label}>{label}</span>
-      </>
-    );
-  },
-  /*
-    Only re-render if props have changed
-    Re-rendering tooltips when not necessary causes 'ghost tooltip' issues,
-    because re-renders cause mouse events to get swallowed, which prevents
-    tooltips closing when the main thread is blocked
-    We use a deep equality check because the the label can theoretically be JSX
-   */
-  (prevProps, nextProps) => isEqual(prevProps, nextProps),
-);
-
-export const Link = ({ isOpen, items, sectionIndex, onClick, testId }) => {
-  return (
-    <div className={styles.list}>
-      {items.map((link, i) => {
-        const key = `${sectionIndex}_${i}`;
-        return (
-          <a
-            href={link.value}
-            className={cx(
-              styles.item,
-              link.isActive ? styles.active : '',
-              link.isExperimental ? styles.experimental : '',
-            )}
-            key={key}
-            onClick={(evt) =>
-              onClick(evt, link.value, link.label, link.onClick)
-            }
-            data-testid={testId}
-          >
-            <TooltipIcon
-              key={key}
-              label={link.label}
-              icon={link.icon}
-              invalid={link.invalid}
-              isOpen={isOpen}
-            />
-          </a>
-        );
-      })}
-    </div>
-  );
-};

package/src/components/side-bar/sections.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Link } from './link';
-import styles from './side-bar.module.less';
-
-export const Sections = ({ isOpen, sections, onClick }) => {
-  return (
-    <>
-      {sections.map((section, i) => (
-        <React.Fragment key={i}>
-          <h5 className={styles.subtitle}>{section.heading.toUpperCase()}</h5>
-          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-          <Link
-            isOpen={isOpen}
-            items={section.items}
-            sectionindex={i}
-            onClick={onClick}
-            testId={section.testId}
-          />
-        </React.Fragment>
-      ))}
-    </>
-  );
-};