@dhis2-ui/select 10.16.1 → 10.16.3-alpha.1

package/src/simple-single-select/features/menu-positioning.test.e2e.js

@@ -0,0 +1,187 @@
+describe('SimpleSingleSelect: Menu positioning', () => {
+    it('should open in the default position', () => {
+        // Given there is enough space below the anchor to fit the SingleSelect menu
+        cy.visitStory('Simple Single Select', 'Default position')
+
+        // When the SingleSelect is clicked
+        cy.findByRole('combobox').click()
+
+        // Then the top of the menu is aligned with the bottom of the input
+        cy.all(
+            () => cy.findByRole('combobox'),
+            () => cy.findByRole('listbox')
+        ).should(([selectedValue, menu]) => {
+            expect(selectedValue.length).to.equal(1)
+            expect(menu.length).to.equal(1)
+
+            const $selectedValue = selectedValue[0]
+            const $menu = menu[0]
+
+            const selectedValueRect = $selectedValue.getBoundingClientRect()
+            const menuRect = $menu.getBoundingClientRect()
+
+            // The listbox is inside a container with a border,
+            // hence the increased delta
+            expect(menuRect.top).to.be.closeTo(selectedValueRect.bottom, 2)
+        })
+
+        // And the left of the SingleSelect is aligned with the left of the anchor
+        cy.all(
+            () => cy.findByRole('combobox'),
+            () => cy.findByRole('listbox')
+        ).should(([selectedValue, menu]) => {
+            expect(selectedValue.length).to.equal(1)
+            expect(menu.length).to.equal(1)
+
+            const $selectedValue = selectedValue[0]
+            const $menu = menu[0]
+
+            const selectedValueRect = $selectedValue.getBoundingClientRect()
+            const menuRect = $menu.getBoundingClientRect()
+
+            // The listbox is inside a container with a border,
+            // hence the increased delta
+            expect(selectedValueRect.left).to.be.closeTo(menuRect.left, 2)
+        })
+    })
+
+    it('should flipp the position when insufficient space below', () => {
+        // Given there is not enough space below the anchor to fit the SingleSelect menu
+        cy.visitStory('Simple Single Select', 'Flipped position')
+
+        // When the SingleSelect is clicked
+        cy.findByRole('combobox').click()
+
+        // Then the bottom of the menu is aligned with the top of the input
+        cy.all(
+            () => cy.findByRole('combobox'),
+            // We need to get the parent as the menu itself
+            // extends withing the div container
+            () => cy.findByRole('listbox').invoke('parent')
+        ).should(([selectedValue, menu]) => {
+            expect(selectedValue.length).to.equal(1)
+            expect(menu.length).to.equal(1)
+
+            const $selectedValue = selectedValue[0]
+            const $menu = menu[0]
+
+            const selectedValueRect = $selectedValue.getBoundingClientRect()
+            const menuRect = $menu.getBoundingClientRect()
+
+            expect(selectedValueRect.top).to.be.closeTo(menuRect.bottom, 2)
+        })
+
+        // And the left of the SingleSelect is aligned with the left of the anchor
+        cy.all(
+            () => cy.findByRole('combobox'),
+            () => cy.findByRole('listbox')
+        ).should(([selectedValue, menu]) => {
+            expect(selectedValue.length).to.equal(1)
+            expect(menu.length).to.equal(1)
+
+            const $selectedValue = selectedValue[0]
+            const $menu = menu[0]
+
+            const selectedValueRect = $selectedValue.getBoundingClientRect()
+            const menuRect = $menu.getBoundingClientRect()
+
+            // The listbox is inside a container with a border,
+            // hence the increased delta
+            expect(selectedValueRect.left).to.be.closeTo(menuRect.left, 2)
+        })
+    })
+
+    it('should shift the menu into view when insufficient space below and above', () => {
+        // Given there is not enough space above or below the anchor to fit the SingleSelect menu
+        cy.visitStory('Simple Single Select', 'Shifted into view')
+
+        // When the SingleSelect is clicked
+        cy.findByRole('combobox').click()
+
+        // Then it is rendered on top of the SingleSelect
+        cy.all(
+            () => cy.findByRole('combobox'),
+            () => cy.findByRole('listbox')
+        ).should(([selectedValue, menu]) => {
+            expect(selectedValue.length).to.equal(1)
+            expect(menu.length).to.equal(1)
+
+            const $selectedValue = selectedValue[0]
+            const $menu = menu[0]
+
+            const selectedValueRect = $selectedValue.getBoundingClientRect()
+            const menuRect = $menu.getBoundingClientRect()
+
+            expect(selectedValueRect.top).to.be.greaterThan(menuRect.top)
+            expect(menuRect.bottom).to.be.greaterThan(selectedValueRect.bottom)
+        })
+
+        // And the left of the SingleSelect is aligned with the left of the anchor
+        cy.all(
+            () => cy.findByRole('combobox'),
+            () => cy.findByRole('listbox')
+        ).should(([selectedValue, menu]) => {
+            expect(selectedValue.length).to.equal(1)
+            expect(menu.length).to.equal(1)
+
+            const $selectedValue = selectedValue[0]
+            const $menu = menu[0]
+
+            const selectedValueRect = $selectedValue.getBoundingClientRect()
+            const menuRect = $menu.getBoundingClientRect()
+
+            expect(selectedValueRect.top).to.be.greaterThan(menuRect.top)
+            expect(menuRect.bottom).to.be.greaterThan(selectedValueRect.bottom)
+        })
+    })
+
+    it('should keep the menu in position while the window is scrolled', () => {
+        // Given there is enough space below the anchor to fit the SingleSelect menu
+        cy.visitStory('Simple Single Select', 'Default position')
+
+        // When the SingleSelect is clicked
+        cy.findByRole('combobox').click()
+
+        // And the window is scrolled down
+        cy.get('body').then(($body) => $body.height('5000px')) // Ensure the body can scroll first
+        cy.scrollTo(0, 800)
+
+        // Then the top of the menu is aligned with the bottom of the input
+        cy.all(
+            () => cy.findByRole('combobox'),
+            () => cy.findByRole('listbox')
+        ).should(([selectedValue, menu]) => {
+            expect(selectedValue.length).to.equal(1)
+            expect(menu.length).to.equal(1)
+
+            const $selectedValue = selectedValue[0]
+            const $menu = menu[0]
+
+            const selectedValueRect = $selectedValue.getBoundingClientRect()
+            const menuRect = $menu.getBoundingClientRect()
+
+            // The listbox is inside a container with a border,
+            // hence the increased delta
+            expect(menuRect.top).to.be.closeTo(selectedValueRect.bottom, 2)
+        })
+
+        // And the left of the SingleSelect is aligned with the left of the anchor
+        cy.all(
+            () => cy.findByRole('combobox'),
+            () => cy.findByRole('listbox')
+        ).should(([selectedValue, menu]) => {
+            expect(selectedValue.length).to.equal(1)
+            expect(menu.length).to.equal(1)
+
+            const $selectedValue = selectedValue[0]
+            const $menu = menu[0]
+
+            const selectedValueRect = $selectedValue.getBoundingClientRect()
+            const menuRect = $menu.getBoundingClientRect()
+
+            // The listbox is inside a container with a border,
+            // hence the increased delta
+            expect(selectedValueRect.left).to.be.closeTo(menuRect.left, 2)
+        })
+    })
+})

package/src/simple-single-select/index.js

@@ -0,0 +1,2 @@
+export { optionProp } from './shared-prop-types.js'
+export { SimpleSingleSelect } from './simple-single-select.js'

package/src/simple-single-select/is-option-hidden.js

@@ -0,0 +1,21 @@
+// If this many pixels are invisible, we still consider the option visible
+// The reason we're doing this is because of JS' number issues,
+// e.g:
+//      optionOffsetBottom is 345.6000061035156
+//      containerOffsetBottom is 345.5999984741211
+//      -> Without tolerance, option is invisible
+const TOLERANCE = 2
+
+export function isOptionHidden(option, scrollContainer) {
+    const optionOffsetTop = option.getBoundingClientRect().top
+    const optionHeight = option.offsetHeight
+    const optionOffsetBottom = optionOffsetTop + optionHeight
+    const containerOffsetTop = scrollContainer.getBoundingClientRect().top
+    const containerHeight = scrollContainer.offsetHeight
+    const containerOffsetBottom = containerOffsetTop + containerHeight
+
+    return (
+        optionOffsetBottom > containerOffsetBottom + TOLERANCE ||
+        optionOffsetTop < containerOffsetTop - TOLERANCE
+    )
+}

package/src/simple-single-select/menu/empty.js

@@ -0,0 +1,27 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const Empty = ({ children }) => (
+    <div>
+        {children}
+
+        <style jsx>{`
+            div {
+                color: ${colors.grey700};
+                font-family: ${theme.fonts};
+                font-size: 13px;
+                line-height: 16px;
+                padding-block: ${spacers.dp8};
+                padding-inline: ${spacers.dp24};
+                text-align: center;
+            }
+        `}</style>
+    </div>
+)
+
+Empty.propTypes = {
+    children: PropTypes.string.isRequired,
+}
+
+export { Empty }

package/src/simple-single-select/menu/filter.js

@@ -0,0 +1,61 @@
+import PropTypes from 'prop-types'
+import React from 'react'
+import i18n from '../../locales/index.js'
+
+export function Filter({
+    ariaControls,
+    dataTest,
+    inputRef,
+    label,
+    placeholder,
+    value,
+    onChange,
+    onKeyDown,
+}) {
+    return (
+        <>
+            <input
+                ref={inputRef}
+                className="filter-input"
+                type="text"
+                name="filter"
+                value={value}
+                placeholder={placeholder}
+                aria-label={label || i18n.t('Search options')}
+                aria-controls={ariaControls}
+                aria-haspopup="listbox"
+                data-test={dataTest}
+                onChange={(e) => onChange(e.target.value)}
+                onClick={(e) => e.stopPropagation()}
+                onKeyDown={(e) => {
+                    e.stopPropagation()
+                    onKeyDown?.(e)
+                }}
+            />
+            <style jsx>{`
+                .filter-input {
+                    flex: 1;
+                    border: none;
+                    outline: none;
+                    background: transparent;
+                    font-size: 14px;
+                    line-height: 16px;
+                    color: inherit;
+                    padding: 0;
+                    min-width: 0;
+                }
+            `}</style>
+        </>
+    )
+}
+
+Filter.propTypes = {
+    ariaControls: PropTypes.string.isRequired,
+    inputRef: PropTypes.object.isRequired,
+    value: PropTypes.string.isRequired,
+    onChange: PropTypes.func.isRequired,
+    dataTest: PropTypes.string,
+    label: PropTypes.string,
+    placeholder: PropTypes.string,
+    onKeyDown: PropTypes.func,
+}

package/src/simple-single-select/menu/index.js

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

package/src/simple-single-select/menu/loading.js

@@ -0,0 +1,38 @@
+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({ message }) {
+    return (
+        <div className="container">
+            <div>
+                <CircularLoader small />
+            </div>
+
+            {message}
+
+            <style jsx>{`
+                .container {
+                    box-sizing: border-box;
+                    width: 100%;
+                    height: 100%;
+                    display: flex;
+                    gap: ${spacers.dp16};
+                    align-items: 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);
+                }
+            `}</style>
+        </div>
+    )
+}
+
+Loading.propTypes = {
+    message: PropTypes.string,
+}

package/src/simple-single-select/menu/menu.js

@@ -0,0 +1,171 @@
+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 { Loading } from './loading.js'
+import { NoMatch } from './no-match.js'
+import { OptionsList } from './options-list.js'
+
+export function Menu({
+    comboBoxId,
+    focussedOptionIndex,
+    name,
+    options,
+    onChange,
+    optionComponent,
+    dataTest,
+    disabled,
+    empty,
+    filterValue,
+    hidden,
+    labelledBy,
+    listBoxRef,
+    loading,
+    loadingText,
+    maxHeight,
+    noMatchText,
+    optionUpdateStrategy,
+    selectRef,
+    selectedValue,
+    onBlur,
+    onClose,
+    onEndReached,
+}) {
+    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 (
+        <Layer onBackdropClick={onClose} transparent>
+            <Popper
+                reference={selectRef}
+                placement="bottom-start"
+                observeReferenceResize
+            >
+                <div className="menu" style={{ width: menuWidth, maxHeight }}>
+                    {isEmpty && <Empty>{empty}</Empty>}
+
+                    {hasNoFilterMatch && <NoMatch>{noMatchText}</NoMatch>}
+
+                    <div className="listbox-container">
+                        <div className="listbox-wrapper">
+                            <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}
+                            />
+                        </div>
+
+                        {loading && (
+                            <div className="menu-loading-container">
+                                <Loading message={loadingText} />
+                            </div>
+                        )}
+                    </div>
+
+                    <style jsx>{`
+                        .menu {
+                            display: flex;
+                            flex-direction: column;
+                            height: auto;
+                            background: ${colors.white};
+                            border: 1px solid ${colors.grey200};
+                            border-radius: 3px;
+                            box-shadow: ${elevations.e300};
+
+                            /* We want the provided height to be exact, otherwise
+                               the consumer would have to know about the border's width */
+                            box-sizing: content-box;
+                        }
+
+                        .listbox-container {
+                            position: relative;
+                            flex-grow: 1;
+                            display: flex;
+                            flex-direction: column;
+                            overflow: hidden;
+                        }
+
+                        .listbox-wrapper {
+                            overflow: auto;
+                            flex-grow: 1;
+                        }
+
+                        .menu-loading-container {
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            width: 100%;
+                            height: 100%;
+                        }
+                    `}</style>
+                </div>
+            </Popper>
+        </Layer>
+    )
+}
+
+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,
+    filterValue: PropTypes.string,
+    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,
+    onBlur: PropTypes.func,
+    onClose: PropTypes.func,
+    onEndReached: PropTypes.func,
+}

package/src/simple-single-select/menu/no-match.js

@@ -0,0 +1,28 @@
+import { colors, spacers, theme } from '@dhis2/ui-constants'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const NoMatch = ({ children, className }) => (
+    <div className={className}>
+        {children}
+
+        <style jsx>{`
+            div {
+                color: ${colors.grey700};
+                font-family: ${theme.fonts};
+                font-size: 13px;
+                line-height: 16px;
+                padding-block: ${spacers.dp8};
+                padding-inline: ${spacers.dp24};
+                text-align: center;
+            }
+        `}</style>
+    </div>
+)
+
+NoMatch.propTypes = {
+    children: PropTypes.string.isRequired,
+    className: PropTypes.string,
+}
+
+export { NoMatch }