@dhis2-ui/select 10.9.2 → 10.10.0-alpha.2

package/build/es/simple-single-select-field/simple-single-select-field.js

@@ -0,0 +1,131 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import { requiredIf } from '@dhis2/prop-types';
+import { sharedPropTypes } from '@dhis2/ui-constants';
+import { Field } from '@dhis2-ui/field';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { SimpleSingleSelect, optionProp } from '../simple-single-select/index.js';
+export function SimpleSingleSelectField(props) {
+  const {
+    className,
+    dataTest,
+    disabled,
+    error,
+    helpText,
+    label,
+    name,
+    required,
+    valid,
+    validationText,
+    warning
+  } = props;
+  const labelId = `${name}-label`;
+  return /*#__PURE__*/React.createElement(Field, {
+    className: className,
+    dataTest: dataTest,
+    disabled: disabled,
+    required: required,
+    labelId: labelId,
+    label: label,
+    helpText: helpText,
+    validationText: validationText,
+    error: error,
+    warning: warning,
+    valid: valid
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelect, _extends({}, props, {
+    labelledBy: labelId
+  })));
+}
+SimpleSingleSelectField.propTypes = {
+  /** Label displayed above the input **/
+  label: PropTypes.string.isRequired,
+  /** necessary for IDs that are required for accessibility **/
+  name: PropTypes.string.isRequired,
+  /** An array of options **/
+  options: PropTypes.arrayOf(optionProp).isRequired,
+  /** A callback that will be called with the new value or an empty string **/
+  onChange: PropTypes.func.isRequired,
+  /** Will focus the select initially **/
+  autoFocus: PropTypes.bool,
+  /** Additional class names that will be applied to the root element **/
+  className: PropTypes.string,
+  /** This will allow us to put an aria-label on the clear button **/
+  clearText: requiredIf(props => props.clearable, PropTypes.string),
+  /** Whether a clear button should be displayed or not **/
+  clearable: PropTypes.bool,
+  /** A value for a `data-test` attribute on the root element **/
+  dataTest: PropTypes.string,
+  /** Renders a select with lower height **/
+  dense: PropTypes.bool,
+  /** Disables all interactions with the select (except focussing) **/
+  disabled: PropTypes.bool,
+  /** Text or component to display when there are no options **/
+  empty: PropTypes.node,
+  /** Applies 'error' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  error: sharedPropTypes.statusPropType,
+  /** Help text that will be displayed below the input **/
+  filterHelpText: PropTypes.string,
+  /** Value will be used as aria-label attribute on the filter input **/
+  filterLabel: PropTypes.string,
+  /** Placeholder for the filter input **/
+  filterPlaceholder: PropTypes.string,
+  /** Value of the filter input **/
+  filterValue: PropTypes.string,
+  /** Whether the select should display a filter input **/
+  filterable: PropTypes.bool,
+  /** Help text, displayed below the input **/
+  helpText: PropTypes.string,
+  /** Will show a loading indicator at the end of the options-list **/
+  loading: PropTypes.bool,
+  /** Text that will be displayed next to the loading indicator **/
+  menuLoadingText: PropTypes.string,
+  /** Allows to modify the max height of the menu **/
+  menuMaxHeight: PropTypes.string,
+  /** String that will be displayed when the select is being filtered but the options array is empty **/
+  noMatchText: requiredIf(props => props.filterable, PropTypes.string),
+  /** Allows to override what's rendered inside the `button[role="option"]`.
+   * Can be overriden on an individual option basis **/
+  optionComponent: PropTypes.elementType,
+  /** For a11y: How aggressively the user should be updated about changes in options **/
+  optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
+  /** String to show when there's no value and no valueLabel **/
+  placeholder: PropTypes.string,
+  /** String that will be displayed before the label of the selected option **/
+  prefix: PropTypes.string,
+  /** Whether a value is required or not **/
+  required: PropTypes.bool,
+  /** Standard HTML tab-index attribute that will be put on the combobox's root element **/
+  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** Applies 'valid' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  valid: sharedPropTypes.statusPropType,
+  /** Text shown below input when `props.error` is true **/
+  validationText: PropTypes.string,
+  /** As of now, this component does not support being uncontrolled **/
+  value: PropTypes.string,
+  /**
+   * When the option is not in the options list (e.g. not loaded or list is
+   * filtered), but a selected value needs to be displayed, then this prop can
+   * be used to supply the text to be shown.
+   **/
+  valueLabel: requiredIf(props => {
+    if (props.options.find(_ref => {
+      let {
+        value
+      } = _ref;
+      return props.value === value;
+    })) {
+      return false;
+    }
+    return props.value;
+  }, PropTypes.string),
+  /** Applies 'warning' appearance for validation feedback. Mutually exclusive with `warning` and `valid` props **/
+  warning: sharedPropTypes.statusPropType,
+  /** Will be called when the combobox is loses focus **/
+  onBlur: PropTypes.func,
+  /** Will be called when the last option is scrolled into the visible area **/
+  onEndReached: PropTypes.func,
+  /** Will be called when the filter value changes **/
+  onFilterChange: PropTypes.func,
+  /** Will be called when the combobox is being focused **/
+  onFocus: PropTypes.func
+};

package/build/es/simple-single-select-field/simple-single-select-field.prod.stories.js

@@ -0,0 +1,172 @@
+import React, { useState } from 'react';
+import { SimpleSingleSelectField } from './index.js';
+const description = `
+\`SimpleSingleSelectField\` is a wrapper around a \`SimpleSingleSelect\` component that adds a label, help text, validation text, and other features.
+
+See the SimpleSingleSelect for more information, and read more at [Design System: Select](https://github.com/dhis2/design-system/blob/master/molecules/select.md).
+
+\`\`\`js
+import { SimpleSingleSelectField, SingleSelectOption } from '@dhis2/ui'
+\`\`\`
+
+_**Note**: The dropdowns in some of the following stories won't appear correctly on this page. View these demos in the 'Canvas' tab._
+`;
+const options = [{
+  value: '1',
+  label: 'one'
+}, {
+  value: '2',
+  label: 'two'
+}, {
+  value: '3',
+  label: 'three'
+}, {
+  value: '4',
+  label: 'four'
+}, {
+  value: '5',
+  label: 'five'
+}, {
+  value: '6',
+  label: 'six'
+}, {
+  value: '7',
+  label: 'seven'
+}, {
+  value: '8',
+  label: 'eight'
+}, {
+  value: '9',
+  label: 'nine'
+}, {
+  value: '10',
+  label: 'ten'
+}];
+export default {
+  title: 'SimpleSingleSelectField',
+  component: SimpleSingleSelectField,
+  parameters: {
+    docs: {
+      description: {
+        component: description
+      }
+    }
+  }
+};
+export const Default = () => {
+  var _options$find;
+  const [value, setValue] = useState('3');
+  const valueLabel = value ? (_options$find = options.find(option => option.value === value)) === null || _options$find === void 0 ? void 0 : _options$find.label : '';
+  return /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+export const WithHelpText = () => {
+  var _options$find2;
+  const [value, setValue] = useState('3');
+  const valueLabel = value ? (_options$find2 = options.find(option => option.value === value)) === null || _options$find2 === void 0 ? void 0 : _options$find2.label : '';
+  return /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    name: "simple",
+    label: "This is the label",
+    helpText: "This is the help text",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+export const StatusValid = () => {
+  var _options$find3;
+  const [value, setValue] = useState('3');
+  const valueLabel = value ? (_options$find3 = options.find(option => option.value === value)) === null || _options$find3 === void 0 ? void 0 : _options$find3.label : '';
+  return /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    valid: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    validationText: "Totally valid!",
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+export const StatusWarning = () => {
+  var _options$find4;
+  const [value, setValue] = useState('3');
+  const valueLabel = value ? (_options$find4 = options.find(option => option.value === value)) === null || _options$find4 === void 0 ? void 0 : _options$find4.label : '';
+  return /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    warning: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    validationText: "Hm, not quite, I warn thee!",
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+export const StatusError = () => {
+  var _options$find5;
+  const [value, setValue] = useState('3');
+  const valueLabel = value ? (_options$find5 = options.find(option => option.value === value)) === null || _options$find5 === void 0 ? void 0 : _options$find5.label : '';
+  return /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    error: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    validationText: "That value is wrong. Sorry!",
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+export const StatusDisabled = () => {
+  var _options$find6;
+  const [value, setValue] = useState('3');
+  const valueLabel = value ? (_options$find6 = options.find(option => option.value === value)) === null || _options$find6 === void 0 ? void 0 : _options$find6.label : '';
+  return /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    disabled: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+export const Required = () => {
+  var _options$find7;
+  const [value, setValue] = useState('3');
+  const valueLabel = value ? (_options$find7 = options.find(option => option.value === value)) === null || _options$find7 === void 0 ? void 0 : _options$find7.label : '';
+  return /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    required: true,
+    name: "simple",
+    label: "This is the label",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  });
+};
+export const InputWidth = () => {
+  var _options$find8;
+  const [value, setValue] = useState('3');
+  const valueLabel = value ? (_options$find8 = options.find(option => option.value === value)) === null || _options$find8 === void 0 ? void 0 : _options$find8.label : '';
+  return /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: 200
+    }
+  }, /*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+    name: "simple",
+    label: "A very long label indeed, well at least longer than the input field to show how it looks and works and stuff",
+    value: value,
+    valueLabel: valueLabel,
+    onChange: nextValue => setValue(nextValue),
+    options: options
+  }));
+};

package/build/es/simple-single-select-field/simple-single-select-field.test.js

@@ -0,0 +1,130 @@
+import '@testing-library/jest-dom';
+import { Field } from '@dhis2-ui/field';
+import { render } from '@testing-library/react';
+import React from 'react';
+import { SimpleSingleSelect } from '../simple-single-select/simple-single-select.js';
+import { SimpleSingleSelectField } from './simple-single-select-field.js';
+jest.mock('../simple-single-select/simple-single-select.js', () => ({
+  SimpleSingleSelect: jest.fn(() => /*#__PURE__*/React.createElement("div", null))
+}));
+jest.mock('@dhis2-ui/field', () => ({
+  Field: jest.fn(_ref => {
+    let {
+      children
+    } = _ref;
+    return children;
+  })
+}));
+describe('<SimpleSingleSelectField />', () => {
+  afterEach(() => {
+    Field.mockClear();
+    SimpleSingleSelect.mockClear();
+  });
+  it('should forward props to the SimpleSingleSelect component', () => {
+    const options = [];
+    const optionComponent = () => null;
+    const onChange = () => null;
+    const onBlur = () => null;
+    const onEndReached = () => null;
+    const onFilterChange = () => null;
+    const onFocus = () => null;
+    render(/*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+      label: "Label text"
+      // Props that'll be passed to SimpleSingleSelect
+      ,
+      name: "foo",
+      options: options,
+      onChange: onChange,
+      autoFocus: false,
+      className: "",
+      clearText: "",
+      clearable: false,
+      optionComponent: optionComponent,
+      dataTest: "",
+      dense: false,
+      disabled: false,
+      empty: "",
+      filterHelpText: "",
+      filterLabel: "",
+      filterPlaceholder: "",
+      filterValue: "",
+      filterable: false,
+      loading: false,
+      menuLoadingText: "",
+      menuMaxHeight: "",
+      noMatchText: "",
+      optionUpdateStrategy: "off",
+      placeholder: "",
+      prefix: "",
+      tabIndex: "",
+      valid: true,
+      value: "",
+      valueLabel: "",
+      onBlur: onBlur,
+      onEndReached: onEndReached,
+      onFilterChange: onFilterChange,
+      onFocus: onFocus
+    }));
+    expect(SimpleSingleSelect.mock.calls[0][0].name).toBe('foo');
+    expect(SimpleSingleSelect.mock.calls[0][0].options).toBe(options);
+    expect(SimpleSingleSelect.mock.calls[0][0].onChange).toBe(onChange);
+    expect(SimpleSingleSelect.mock.calls[0][0].autoFocus).toBe(false);
+    expect(SimpleSingleSelect.mock.calls[0][0].className).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].clearText).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].clearable).toBe(false);
+    expect(SimpleSingleSelect.mock.calls[0][0].optionComponent).toBe(optionComponent);
+    expect(SimpleSingleSelect.mock.calls[0][0].dataTest).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].dense).toBe(false);
+    expect(SimpleSingleSelect.mock.calls[0][0].disabled).toBe(false);
+    expect(SimpleSingleSelect.mock.calls[0][0].empty).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].filterHelpText).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].filterLabel).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].filterPlaceholder).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].filterValue).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].filterable).toBe(false);
+    expect(SimpleSingleSelect.mock.calls[0][0].labelledBy).toBe('foo-label');
+    expect(SimpleSingleSelect.mock.calls[0][0].loading).toBe(false);
+    expect(SimpleSingleSelect.mock.calls[0][0].menuLoadingText).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].menuMaxHeight).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].noMatchText).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].optionUpdateStrategy).toBe('off');
+    expect(SimpleSingleSelect.mock.calls[0][0].placeholder).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].prefix).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].tabIndex).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].valid).toBe(true);
+    expect(SimpleSingleSelect.mock.calls[0][0].value).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].valueLabel).toBe('');
+    expect(SimpleSingleSelect.mock.calls[0][0].onBlur).toBe(onBlur);
+    expect(SimpleSingleSelect.mock.calls[0][0].onEndReached).toBe(onEndReached);
+    expect(SimpleSingleSelect.mock.calls[0][0].onFilterChange).toBe(onFilterChange);
+    expect(SimpleSingleSelect.mock.calls[0][0].onFocus).toBe(onFocus);
+  });
+  it('should pass the right props to the Field component', () => {
+    render(/*#__PURE__*/React.createElement(SimpleSingleSelectField, {
+      label: "Label text",
+      className: "class name",
+      dataTest: "data test",
+      disabled: true,
+      required: true,
+      helpText: "Help text",
+      validationText: "Validation text",
+      valid: true
+      // Props required by SimpleSingleSelect
+      ,
+      name: "foo",
+      options: [],
+      onChange: () => null
+    }));
+    expect(Field.mock.calls[0][0].className).toBe('class name');
+    expect(Field.mock.calls[0][0].dataTest).toBe('data test');
+    expect(Field.mock.calls[0][0].disabled).toBe(true);
+    expect(Field.mock.calls[0][0].required).toBe(true);
+    expect(Field.mock.calls[0][0].labelId).toBe('foo-label');
+    expect(Field.mock.calls[0][0].label).toBe('Label text');
+    expect(Field.mock.calls[0][0].helpText).toBe('Help text');
+    expect(Field.mock.calls[0][0].validationText).toBe('Validation text');
+    expect(Field.mock.calls[0][0].error).toBe(undefined);
+    expect(Field.mock.calls[0][0].warning).toBe(undefined);
+    expect(Field.mock.calls[0][0].valid).toBe(true);
+  });
+});

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/select",
-    "version": "10.9.2",
+    "version": "10.10.0-alpha.2",
     "description": "UI Select",
     "repository": {
         "type": "git",
@@ -33,21 +33,21 @@
         "styled-jsx": "^4"
     },
     "dependencies": {
-        "@dhis2-ui/box": "10.9.2",
-        "@dhis2-ui/button": "10.9.2",
-        "@dhis2-ui/card": "10.9.2",
-        "@dhis2-ui/checkbox": "10.9.2",
-        "@dhis2-ui/chip": "10.9.2",
-        "@dhis2-ui/field": "10.9.2",
-        "@dhis2-ui/input": "10.9.2",
-        "@dhis2-ui/layer": "10.9.2",
-        "@dhis2-ui/loader": "10.9.2",
-        "@dhis2-ui/popper": "10.9.2",
-        "@dhis2-ui/status-icon": "10.9.2",
-        "@dhis2-ui/tooltip": "10.9.2",
+        "@dhis2-ui/box": "10.10.0-alpha.2",
+        "@dhis2-ui/button": "10.10.0-alpha.2",
+        "@dhis2-ui/card": "10.10.0-alpha.2",
+        "@dhis2-ui/checkbox": "10.10.0-alpha.2",
+        "@dhis2-ui/chip": "10.10.0-alpha.2",
+        "@dhis2-ui/field": "10.10.0-alpha.2",
+        "@dhis2-ui/input": "10.10.0-alpha.2",
+        "@dhis2-ui/layer": "10.10.0-alpha.2",
+        "@dhis2-ui/loader": "10.10.0-alpha.2",
+        "@dhis2-ui/popper": "10.10.0-alpha.2",
+        "@dhis2-ui/status-icon": "10.10.0-alpha.2",
+        "@dhis2-ui/tooltip": "10.10.0-alpha.2",
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2/ui-constants": "10.9.2",
-        "@dhis2/ui-icons": "10.9.2",
+        "@dhis2/ui-constants": "10.10.0-alpha.2",
+        "@dhis2/ui-icons": "10.10.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },