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

package/build/es/simple-single-select/menu/filter.js

@@ -0,0 +1,53 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, spacers } from '@dhis2/ui-constants';
+import { Input } from '@dhis2-ui/input';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../../locales/index.js';
+export function Filter(_ref) {
+  let {
+    ariaControls,
+    dataTest,
+    label,
+    placeholder,
+    tabIndex,
+    value,
+    onChange,
+    onKeyDown
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["3850436710", [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]]])
+  }, /*#__PURE__*/React.createElement(Input, {
+    dense: true,
+    tabIndex: tabIndex,
+    ariaControls: ariaControls,
+    ariaHaspopup: "listbox",
+    ariaLabel: label || i18n.t('Search options'),
+    dataTest: `${dataTest}-input`,
+    value: value,
+    onChange: _ref2 => {
+      let {
+        value
+      } = _ref2;
+      return onChange(value);
+    },
+    type: "text",
+    name: "filter",
+    placeholder: placeholder,
+    onKeyDown: (_, e) => onKeyDown(e)
+  }), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3850436710",
+    dynamic: [colors.white, spacers.dp8, spacers.dp8, spacers.dp4, spacers.dp8]
+  }, [`div.__jsx-style-dynamic-selector{height:100%;-webkit-inset-block-start:0;-ms-intb-rlock-start:0;inset-block-start:0;background:${colors.white};}`]));
+}
+Filter.propTypes = {
+  ariaControls: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onChange: PropTypes.func.isRequired,
+  dataTest: PropTypes.string,
+  label: PropTypes.string,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  onKeyDown: PropTypes.func
+};

package/build/es/simple-single-select/menu/index.js

@@ -0,0 +1 @@
+export { Menu } from './menu.js';

package/build/es/simple-single-select/menu/loading.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, spacers, theme } from '@dhis2/ui-constants';
+import { CircularLoader } from '@dhis2-ui/loader';
+import PropTypes from 'prop-types';
+import React from 'react';
+export function Loading(_ref) {
+  let {
+    message
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["316664301", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + "container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["316664301", [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]])
+  }, /*#__PURE__*/React.createElement(CircularLoader, {
+    small: true
+  })), message, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "316664301",
+    dynamic: [spacers.dp16, colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
+  }, [`.container.__jsx-style-dynamic-selector{box-sizing:border-box;width:100%;height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:${spacers.dp16};-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;color:${colors.grey700};font-family:${theme.fonts};font-size:13px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};background:rgba(255,255,255,0.8);}`]));
+}
+Loading.propTypes = {
+  message: PropTypes.string
+};

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

@@ -0,0 +1,149 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, elevations } from '@dhis2/ui-constants';
+import { Layer } from '@dhis2-ui/layer';
+import { Popper } from '@dhis2-ui/popper';
+import PropTypes from 'prop-types';
+import React, { useEffect, useState } from 'react';
+import { optionProp } from '../shared-prop-types.js';
+import { Empty } from './empty.js';
+import { Filter } from './filter.js';
+import { Loading } from './loading.js';
+import { NoMatch } from './no-match.js';
+import { OptionsList } from './options-list.js';
+export function Menu(_ref) {
+  let {
+    comboBoxId,
+    focussedOptionIndex,
+    name,
+    options,
+    onChange,
+    optionComponent,
+    dataTest,
+    disabled,
+    empty,
+    filterLabel,
+    filterPlaceholder,
+    filterValue,
+    filterable,
+    hidden,
+    labelledBy,
+    listBoxRef,
+    loading,
+    loadingText,
+    maxHeight,
+    noMatchText,
+    optionUpdateStrategy,
+    selectRef,
+    selectedValue,
+    tabIndex,
+    onBlur,
+    onClose,
+    onEndReached,
+    onFilterChange,
+    onFilterInputKeyDown
+  } = _ref;
+  const [menuWidth, setWidth] = useState('auto');
+  const dataTestPrefix = `${dataTest}-menu`;
+  useEffect(() => {
+    if (selectRef) {
+      const callback = () => setWidth(`${selectRef.offsetWidth}px`);
+      callback(); // We want to know the width as soon as the
+
+      selectRef.addEventListener('resize', callback);
+      return () => selectRef.removeEventListener('resize', callback);
+    }
+  }, [selectRef]);
+  if (hidden) {
+    return null;
+  }
+  const hasNoFilterMatch = !options.length && filterValue &&
+  // We don't want to show the noMatchText when
+  // we're in the process of loading options
+  !loading;
+  const isEmpty = !options.length && !filterValue;
+  return /*#__PURE__*/React.createElement(Layer, {
+    onBackdropClick: onClose,
+    transparent: true
+  }, /*#__PURE__*/React.createElement(Popper, {
+    reference: selectRef,
+    placement: "bottom-start",
+    observeReferenceResize: true
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      width: menuWidth,
+      maxHeight
+    },
+    className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "menu"
+  }, filterable && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "filter-container"
+  }, /*#__PURE__*/React.createElement(Filter, {
+    dataTest: `${dataTestPrefix}-filter`,
+    value: filterValue,
+    label: filterLabel,
+    ariaControls: `${name}-listbox`,
+    placeholder: filterPlaceholder,
+    tabIndex: tabIndex,
+    onChange: onFilterChange,
+    onKeyDown: onFilterInputKeyDown
+  })), isEmpty && /*#__PURE__*/React.createElement(Empty, null, empty), hasNoFilterMatch && /*#__PURE__*/React.createElement(NoMatch, null, noMatchText), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "listbox-container"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "listbox-wrapper"
+  }, /*#__PURE__*/React.createElement(OptionsList, {
+    ref: listBoxRef,
+    comboBoxId: comboBoxId,
+    optionComponent: optionComponent,
+    dataTest: `${dataTestPrefix}-list`,
+    disabled: disabled,
+    focussedOptionIndex: focussedOptionIndex,
+    labelledBy: labelledBy,
+    loading: loading,
+    id: `${name}-listbox`,
+    optionUpdateStrategy: optionUpdateStrategy,
+    options: options,
+    selectedValue: selectedValue,
+    onBlur: onBlur,
+    onChange: onChange,
+    onEndReached: onEndReached
+  })), loading && /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["2949029222", [colors.white, colors.grey200, elevations.e300]]]) + " " + "menu-loading-container"
+  }, /*#__PURE__*/React.createElement(Loading, {
+    message: loadingText
+  }))), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2949029222",
+    dynamic: [colors.white, colors.grey200, elevations.e300]
+  }, [`.menu.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:auto;background:${colors.white};border:1px solid ${colors.grey200};border-radius:3px;box-shadow:${elevations.e300};box-sizing:content-box;}`, ".listbox-container.__jsx-style-dynamic-selector{position:relative;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow:hidden;}", ".listbox-wrapper.__jsx-style-dynamic-selector{overflow:auto;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".menu-loading-container.__jsx-style-dynamic-selector{position:absolute;left:0;top:0;width:100%;height:100%;}"]))));
+}
+Menu.propTypes = {
+  comboBoxId: PropTypes.string.isRequired,
+  focussedOptionIndex: PropTypes.number.isRequired,
+  listBoxRef: PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLElement)
+  }).isRequired,
+  name: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(optionProp).isRequired,
+  onChange: PropTypes.func.isRequired,
+  dataTest: PropTypes.string,
+  disabled: PropTypes.bool,
+  empty: PropTypes.node,
+  filterLabel: PropTypes.string,
+  filterPlaceholder: PropTypes.string,
+  filterValue: PropTypes.string,
+  filterable: PropTypes.bool,
+  hidden: PropTypes.bool,
+  labelledBy: PropTypes.string,
+  loading: PropTypes.bool,
+  loadingText: PropTypes.string,
+  maxHeight: PropTypes.string,
+  noMatchText: PropTypes.string,
+  optionComponent: PropTypes.elementType,
+  optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
+  selectRef: PropTypes.instanceOf(HTMLElement),
+  selectedValue: PropTypes.string,
+  tabIndex: PropTypes.string,
+  onBlur: PropTypes.func,
+  onClose: PropTypes.func,
+  onEndReached: PropTypes.func,
+  onFilterChange: PropTypes.func,
+  onFilterInputKeyDown: PropTypes.func
+};

package/build/es/simple-single-select/menu/no-match.js

@@ -0,0 +1,21 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, spacers, theme } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+const NoMatch = _ref => {
+  let {
+    children,
+    className
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3788156646", [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]]]) + " " + (className || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3788156646",
+    dynamic: [colors.grey700, theme.fonts, spacers.dp8, spacers.dp24]
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey700};font-family:${theme.fonts};font-size:13px;line-height:16px;padding-block:${spacers.dp8};padding-inline:${spacers.dp24};text-align:center;}`]));
+};
+NoMatch.propTypes = {
+  children: PropTypes.string.isRequired,
+  className: PropTypes.string
+};
+export { NoMatch };

package/build/es/simple-single-select/menu/option.js

@@ -0,0 +1,111 @@
+import _JSXStyle from "styled-jsx/style";
+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 { colors, spacers } from '@dhis2/ui-constants';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { useEffect, useRef } from 'react';
+const VISIBILE_INTERSECTION_RATIO = 0.99;
+function DefaultStyle(_ref) {
+  let {
+    label,
+    disabled,
+    highlighted
+  } = _ref;
+  return /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["4038065645", [colors.grey900, spacers.dp8, spacers.dp12, spacers.dp16, colors.grey200, colors.teal700, colors.white, colors.grey500]]]) + " " + (cx('option', {
+      disabled,
+      active: highlighted
+    }) || "")
+  }, label, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4038065645",
+    dynamic: [colors.grey900, spacers.dp8, spacers.dp12, spacers.dp16, colors.grey200, colors.teal700, colors.white, colors.grey500]
+  }, [`span.__jsx-style-dynamic-selector{display:block;cursor:pointer;font-size:14px;-webkit-text-decoration:none;text-decoration:none;color:${colors.grey900};padding-block:${spacers.dp8};padding-inline:${spacers.dp12};line-height:${spacers.dp16};}`, `span.__jsx-style-dynamic-selector:hover{background-color:${colors.grey200};}`, `span.__jsx-style-dynamic-selector:active,span.active.__jsx-style-dynamic-selector{background-color:${colors.teal700};color:${colors.white};cursor:auto;}`, `span.disabled.__jsx-style-dynamic-selector{color:${colors.grey500};cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`, "span.disabled.__jsx-style-dynamic-selector:hover{background-color:initial;}"]));
+}
+DefaultStyle.propTypes = {
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  highlighted: PropTypes.bool
+};
+export function Option(_ref2) {
+  let {
+    comboBoxId,
+    index,
+    label,
+    value,
+    onClick,
+    component: StyleComponent = DefaultStyle,
+    dataTest,
+    disabled,
+    highlighted,
+    listBoxRef,
+    onBecameVisible,
+    ...rest
+  } = _ref2;
+  const buttonRef = useRef();
+  useEffect(() => {
+    if (onBecameVisible) {
+      const scrollableContainer = listBoxRef.current.parentNode;
+      const intersectionOptions = {
+        root: scrollableContainer,
+        threshold: VISIBILE_INTERSECTION_RATIO
+      };
+      const intersectionHandler = entries => {
+        entries.forEach(result => {
+          const {
+            intersectionRatio
+          } = result;
+          if (intersectionRatio >= VISIBILE_INTERSECTION_RATIO) {
+            onBecameVisible();
+          }
+        });
+      };
+      const observer = new IntersectionObserver(intersectionHandler, intersectionOptions);
+      observer.observe(buttonRef.current);
+      return () => observer.disconnect();
+    }
+  }, [onBecameVisible, listBoxRef]);
+  return /*#__PURE__*/React.createElement("button", {
+    ref: buttonRef,
+    id: `${comboBoxId}-${index}`,
+    "data-test": dataTest,
+    disabled: disabled,
+    role: "option",
+    "aria-selected": highlighted || 'false',
+    "aria-disabled": disabled,
+    "aria-label": label,
+    onClick: () => {
+      if (!disabled) {
+        onClick({
+          value,
+          label
+        });
+      }
+    },
+    className: "jsx-4228237498"
+  }, /*#__PURE__*/React.createElement(StyleComponent, _extends({
+    value: value,
+    label: label,
+    index: index,
+    disabled: disabled,
+    highlighted: highlighted
+  }, rest, {
+    className: "jsx-4228237498" + " " + (rest && rest.className != null && rest.className || "")
+  }), label), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4228237498"
+  }, ["button.jsx-4228237498{display:block;width:100%;padding:0;border:0;background:0;outline:0;text-align:start;}"]));
+}
+Option.propTypes = {
+  comboBoxId: PropTypes.string.isRequired,
+  index: PropTypes.number.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  onClick: PropTypes.func.isRequired,
+  component: PropTypes.elementType,
+  dataTest: PropTypes.string,
+  disabled: PropTypes.bool,
+  highlighted: PropTypes.bool,
+  listBoxRef: PropTypes.shape({
+    current: PropTypes.instanceOf(HTMLElement)
+  }),
+  onBecameVisible: PropTypes.func
+};

package/build/es/simple-single-select/menu/options-list.js

@@ -0,0 +1,88 @@
+import PropTypes from 'prop-types';
+import React, { forwardRef, useEffect } from 'react';
+import { isOptionHidden } from '../is-option-hidden.js';
+import { optionProp } from '../shared-prop-types.js';
+import { Option } from './option.js';
+export const OptionsList = /*#__PURE__*/forwardRef(function OptionsList(_ref, ref) {
+  let {
+    comboBoxId,
+    optionComponent,
+    focussedOptionIndex,
+    id,
+    labelledBy,
+    optionUpdateStrategy,
+    options,
+    selectedValue,
+    dataTest,
+    disabled,
+    loading,
+    onChange,
+    onBlur,
+    onEndReached
+  } = _ref;
+  // scrolls the highlighted option into view when:
+  // * the highlighted option changes
+  // * the menu opens
+  useEffect(() => {
+    const {
+      current: listBox
+    } = ref;
+    const highlightedOption = listBox.childNodes[focussedOptionIndex];
+    if (highlightedOption) {
+      const listBoxParent = listBox.parentNode;
+      const optionHidden = isOptionHidden(highlightedOption, listBoxParent);
+      if (optionHidden) {
+        highlightedOption.scrollIntoView();
+      }
+    }
+  }, [focussedOptionIndex, ref]);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    role: "listbox",
+    id: id,
+    "aria-labelledby": labelledBy,
+    "aria-live": optionUpdateStrategy,
+    "aria-busy": loading.toString(),
+    "data-test": dataTest,
+    onBlur: onBlur
+  }, options.map((_ref2, index) => {
+    let {
+      value,
+      label,
+      component,
+      disabled: optionDisabled = false
+    } = _ref2;
+    const isSelected = value === selectedValue;
+    const isLast = index === options.length - 1;
+    return /*#__PURE__*/React.createElement(Option, {
+      listBoxRef: ref,
+      dataTest: `${dataTest}-option`,
+      highlighted: focussedOptionIndex === index,
+      key: value,
+      value: value,
+      label: label,
+      index: index,
+      comboBoxId: comboBoxId,
+      disabled: disabled || optionDisabled,
+      onClick: isSelected ? () => null : onChange,
+      component: component || optionComponent,
+      onBecameVisible: isLast ? onEndReached : undefined
+    });
+  }));
+});
+OptionsList.propTypes = {
+  comboBoxId: PropTypes.string.isRequired,
+  focussedOptionIndex: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
+  options: PropTypes.arrayOf(optionProp).isRequired,
+  onChange: PropTypes.func.isRequired,
+  dataTest: PropTypes.string,
+  disabled: PropTypes.bool,
+  labelledBy: PropTypes.string,
+  loading: PropTypes.bool,
+  optionComponent: PropTypes.elementType,
+  optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),
+  selectedValue: PropTypes.string,
+  onBlur: PropTypes.func,
+  onEndReached: PropTypes.func
+};

package/build/es/simple-single-select/selected-value/clear-button.js

@@ -0,0 +1,68 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, theme } from '@dhis2/ui-constants';
+import { Tooltip } from '@dhis2-ui/tooltip';
+import PropTypes from 'prop-types';
+import React from 'react';
+import i18n from '../../locales/index.js';
+function ClearButton(_ref) {
+  let {
+    onClear,
+    clearText,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("button", {
+    "aria-label": i18n.t('{{clearText}}', {
+      clearText
+    }),
+    "data-test": dataTest,
+    onClick: e => {
+      e.stopPropagation();
+      onClear();
+    },
+    className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
+  }, /*#__PURE__*/React.createElement("svg", {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16Zm3.536-5.879a1 1 0 1 1-1.415 1.414l-2.12-2.12-2.122 2.121a1 1 0 1 1-1.415-1.414L6.586 8 4.464 5.878A1 1 0 1 1 5.88 4.464L8 6.586l2.121-2.121a1 1 0 1 1 1.415 1.414L9.415 8l2.12 2.121Z",
+    fill: "none",
+    className: _JSXStyle.dynamic([["2606883952", [colors.grey500, colors.grey800, colors.grey200, theme.focus]]])
+  })), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2606883952",
+    dynamic: [colors.grey500, colors.grey800, colors.grey200, theme.focus]
+  }, ["button.__jsx-style-dynamic-selector{background:none;border:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;cursor:pointer;height:24px;width:24px;border-radius:3px;}", `button.__jsx-style-dynamic-selector svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${colors.grey500};}`, `button.__jsx-style-dynamic-selector:hover svg.__jsx-style-dynamic-selector path.__jsx-style-dynamic-selector{fill:${colors.grey800};}`, `button.__jsx-style-dynamic-selector:hover{background:${colors.grey200};}`, `button.__jsx-style-dynamic-selector:focus{outline:2px solid ${theme.focus};}`]));
+}
+ClearButton.propTypes = {
+  clearText: PropTypes.string.isRequired,
+  onClear: PropTypes.func.isRequired,
+  dataTest: PropTypes.string
+};
+function ClearButtonWithTooltip(_ref2) {
+  let {
+    onClear,
+    clearText,
+    dataTest
+  } = _ref2;
+  const clearButton = /*#__PURE__*/React.createElement(ClearButton, {
+    onClear: onClear,
+    dataTest: dataTest,
+    clearText: clearText
+  });
+  if (!clearText) {
+    return clearButton;
+  }
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    openDelay: 500,
+    content: clearText
+  }, clearButton);
+}
+ClearButtonWithTooltip.propTypes = {
+  clearText: PropTypes.string.isRequired,
+  onClear: PropTypes.func.isRequired,
+  dataTest: PropTypes.string
+};
+export { ClearButtonWithTooltip as ClearButton };

package/build/es/simple-single-select/selected-value/container.js

@@ -0,0 +1,91 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, theme } from '@dhis2/ui-constants';
+import cx from 'classnames';
+import PropTypes from 'prop-types';
+import React, { forwardRef, useCallback, useEffect } from 'react';
+export const Container = /*#__PURE__*/forwardRef(function Container(_ref, ref) {
+  let {
+    children,
+    comboBoxId,
+    autoFocus,
+    dataTest,
+    dense,
+    disabled,
+    error,
+    expanded,
+    labelledBy,
+    name,
+    placeholder,
+    tabIndex,
+    valid,
+    warning,
+    onBlur,
+    onClick: _onClick,
+    onFocus,
+    onKeyDown
+  } = _ref;
+  // Using useEffect so we have access to the ref, which will be set before
+  // the first call to the useEffect's callback
+  useEffect(() => {
+    if (autoFocus) {
+      ref.current.focus();
+    }
+  },
+  // We want to run this only once:
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  []);
+  const onClick = useCallback(function () {
+    if (!disabled) {
+      _onClick(...arguments);
+    }
+  }, [disabled, _onClick]);
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    ref: ref,
+    "aria-controls": `${name}-listbox`,
+    "aria-expanded": expanded.toString(),
+    "aria-haspopup": "listbox",
+    "aria-labelledby": labelledBy,
+    "aria-placeholder": placeholder,
+    id: comboBoxId,
+    role: "combobox",
+    tabIndex: tabIndex,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    onClick: onClick,
+    onKeyDown: e => {
+      e.stopPropagation();
+      onKeyDown(e);
+    },
+    className: _JSXStyle.dynamic([["2391216206", [colors.grey500, colors.grey900, theme.focus, theme.focus, theme.valid, theme.warning, theme.error, colors.grey100, colors.grey500, theme.disabled]]]) + " " + (cx({
+      error,
+      warning,
+      valid,
+      disabled,
+      dense
+    }) || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2391216206",
+    dynamic: [colors.grey500, colors.grey900, theme.focus, theme.focus, theme.valid, theme.warning, theme.error, colors.grey100, colors.grey500, theme.disabled]
+  }, [`div.__jsx-style-dynamic-selector{background-color:white;border-radius:3px;border:1px solid ${colors.grey500};box-sizing:border-box;min-height:40px;padding-block:6px;padding-inline:12px;box-shadow:inset 0 0 1px 0 rgba(48,54,60,0.1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:${colors.grey900};font-size:14px;line-height:16px;}`, `div.__jsx-style-dynamic-selector:not(.disabled):focus,div.__jsx-style-dynamic-selector:not(.disabled):active{outline:none;box-shadow:inset 0 0 0 2px ${theme.focus};border-color:${theme.focus};}`, `div.valid.__jsx-style-dynamic-selector{border-color:${theme.valid};}`, `div.warning.__jsx-style-dynamic-selector{border-color:${theme.warning};}`, `div.error.__jsx-style-dynamic-selector{border-color:${theme.error};}`, `div.disabled.__jsx-style-dynamic-selector{background-color:${colors.grey100};border-color:${colors.grey500};color:${theme.disabled};cursor:not-allowed;}`, "div.dense.__jsx-style-dynamic-selector{padding-block:2px;padding-inline:8px;min-height:32px;}"]));
+});
+Container.propTypes = {
+  children: PropTypes.any.isRequired,
+  comboBoxId: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  onKeyDown: PropTypes.func.isRequired,
+  autoFocus: PropTypes.bool,
+  dataTest: PropTypes.string,
+  dense: PropTypes.bool,
+  disabled: PropTypes.bool,
+  error: PropTypes.bool,
+  expanded: PropTypes.bool,
+  labelledBy: PropTypes.string,
+  placeholder: PropTypes.string,
+  tabIndex: PropTypes.string,
+  valid: PropTypes.bool,
+  warning: PropTypes.bool,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func
+};

package/build/es/simple-single-select/selected-value/index.js

@@ -0,0 +1 @@
+export { SelectedValue } from './selected-value.js';

package/build/es/simple-single-select/selected-value/placeholder.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+export function Placeholder(_ref) {
+  let {
+    placeholder,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["1027033961", [colors.grey600]]]) + " " + (className || "")
+  }, placeholder, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1027033961",
+    dynamic: [colors.grey600]
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey600};-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`]));
+}
+Placeholder.propTypes = {
+  dataTest: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  placeholder: PropTypes.string
+};

package/build/es/simple-single-select/selected-value/prefix.js

@@ -0,0 +1,23 @@
+import _JSXStyle from "styled-jsx/style";
+import { colors, spacers } from '@dhis2/ui-constants';
+import PropTypes from 'prop-types';
+import React from 'react';
+export function Prefix(_ref) {
+  let {
+    prefix,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["1343055987", [colors.grey600, spacers.dp12]]]) + " " + (className || "")
+  }, prefix, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1343055987",
+    dynamic: [colors.grey600, spacers.dp12]
+  }, [`div.__jsx-style-dynamic-selector{color:${colors.grey600};padding-inline-end:${spacers.dp12};font-size:14px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}`]));
+}
+Prefix.propTypes = {
+  dataTest: PropTypes.string.isRequired,
+  className: PropTypes.string,
+  prefix: PropTypes.string
+};