@dhis2-ui/select 10.16.5 → 10.18.0

package/src/select/menu-wrapper.js

@@ -7,11 +7,23 @@ import React from 'react'
 const MenuWrapper = ({
     children,
     dataTest,
+    inputWidth,
     maxHeight = '280px',
-    menuWidth,
+    menuMaxWidth,
+    menuMinWidth,
     onClick,
     selectRef,
 }) => {
+    // menuMinWidth or menuMaxWidth enables flexible sizing (fit-content), with
+    // min-width = max(input, menuMinWidth). Without them, width matches the input.
+    const flexible = menuMinWidth || menuMaxWidth
+    const width = flexible ? 'fit-content' : inputWidth
+    const flexibleMinWidth = menuMinWidth
+        ? `max(${inputWidth}, ${menuMinWidth})`
+        : inputWidth
+    const minWidth = flexible ? flexibleMinWidth : 'auto'
+    const maxWidth = menuMaxWidth || 'none'
+
     return (
         <Layer onBackdropClick={onClick} transparent>
             <Popper
@@ -24,7 +36,9 @@ const MenuWrapper = ({
 
                     <style jsx>{`
                         div {
-                            width: ${menuWidth};
+                            width: ${width};
+                            min-width: ${minWidth};
+                            max-width: ${maxWidth};
                             height: auto;
                             max-height: ${maxHeight};
                             overflow: auto;
@@ -42,10 +56,12 @@ const MenuWrapper = ({
 
 MenuWrapper.propTypes = {
     dataTest: PropTypes.string.isRequired,
-    menuWidth: PropTypes.string.isRequired,
+    inputWidth: PropTypes.string.isRequired,
     selectRef: PropTypes.object.isRequired,
     children: PropTypes.node,
     maxHeight: PropTypes.string,
+    menuMaxWidth: PropTypes.string,
+    menuMinWidth: PropTypes.string,
     onClick: PropTypes.func,
 }
 

package/src/select/select.js

@@ -15,7 +15,7 @@ const DOWN_KEY = 40
 export class Select extends Component {
     state = {
         open: false,
-        menuWidth: 'auto',
+        inputWidth: 'auto',
     }
 
     static defaultProps = {
@@ -30,7 +30,7 @@ export class Select extends Component {
             this.inputRef.current.focus()
         }
 
-        this.setState({ menuWidth: this.getMenuWidth() })
+        this.setState({ inputWidth: this.getInputWidth() })
         window.addEventListener('resize', this.onResize)
     }
 
@@ -48,21 +48,21 @@ export class Select extends Component {
      * See: https://nolanlawson.com/2018/09/25/accurately-measuring-layout-on-the-web
      */
     onResize = debounce(() => {
-        const menuWidth = this.getMenuWidth()
+        const inputWidth = this.getInputWidth()
 
-        if (this.state.menuWidth !== menuWidth) {
-            this.setState({ menuWidth })
+        if (this.state.inputWidth !== inputWidth) {
+            this.setState({ inputWidth })
         }
     }, 50)
 
-    getMenuWidth() {
+    getInputWidth() {
         const { offsetWidth } = this.inputRef.current
-        const { menuWidth } = this.state
+        const { inputWidth } = this.state
 
-        if (offsetWidth && `${offsetWidth}px` !== menuWidth) {
+        if (offsetWidth && `${offsetWidth}px` !== inputWidth) {
             return `${offsetWidth}px`
         }
-        return menuWidth
+        return inputWidth
     }
 
     handleFocusInput = () => {
@@ -82,7 +82,7 @@ export class Select extends Component {
     handleOpen = () => {
         this.setState({
             open: true,
-            menuWidth: this.getMenuWidth(),
+            inputWidth: this.getInputWidth(),
         })
     }
 
@@ -159,7 +159,7 @@ export class Select extends Component {
     }
 
     render() {
-        const { open, menuWidth } = this.state
+        const { open, inputWidth } = this.state
         const {
             children,
             className,
@@ -167,6 +167,8 @@ export class Select extends Component {
             onChange,
             tabIndex,
             maxHeight,
+            menuMinWidth,
+            menuMaxWidth,
             error,
             warning,
             valid,
@@ -220,7 +222,9 @@ export class Select extends Component {
                         onClick={this.onOutsideClick}
                         maxHeight={maxHeight}
                         selectRef={this.selectRef}
-                        menuWidth={menuWidth}
+                        inputWidth={inputWidth}
+                        menuMinWidth={menuMinWidth}
+                        menuMaxWidth={menuMaxWidth}
                         dataTest={`${dataTest}-menu`}
                     >
                         {menu}
@@ -246,6 +250,8 @@ Select.propTypes = {
     error: sharedPropTypes.statusPropType,
     initialFocus: PropTypes.bool,
     maxHeight: PropTypes.string,
+    menuMaxWidth: PropTypes.string,
+    menuMinWidth: PropTypes.string,
     tabIndex: PropTypes.string,
     valid: sharedPropTypes.statusPropType,
     warning: sharedPropTypes.statusPropType,

package/src/simple-single-select/__stories__/WithMenuMaxWidth.js

@@ -0,0 +1,24 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+const options = [
+    { value: '1', label: 'option one' },
+    { value: '2', label: 'option two' },
+    { value: '3', label: 'A much longer option label that gets clamped' },
+]
+
+export const WithMenuMaxWidth = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <div style={{ width: 120 }}>
+            <SimpleSingleSelect
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={options}
+                menuMaxWidth="200px"
+            />
+        </div>
+    )
+}

package/src/simple-single-select/__stories__/WithMenuMinWidth.js

@@ -0,0 +1,25 @@
+import React, { useState } from 'react'
+import { SimpleSingleSelect } from '../simple-single-select.js'
+
+const options = [
+    { value: '1', label: 'option one' },
+    { value: '2', label: 'option two' },
+    { value: '3', label: 'option three' },
+    { value: '4', label: 'A longer option that exceeds the minimum' },
+]
+
+export const WithMenuMinWidth = () => {
+    const [selected, setSelected] = useState(null)
+
+    return (
+        <div style={{ width: 120 }}>
+            <SimpleSingleSelect
+                name="simple"
+                selected={selected}
+                onChange={setSelected}
+                options={options}
+                menuMinWidth="240px"
+            />
+        </div>
+    )
+}

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

@@ -26,6 +26,8 @@ export function Menu({
     loading,
     loadingText,
     maxHeight,
+    maxWidth,
+    minWidth,
     noMatchText,
     optionUpdateStrategy,
     selectRef,
@@ -34,18 +36,16 @@ export function Menu({
     onClose,
     onEndReached,
 }) {
-    const [menuWidth, setWidth] = useState('auto')
+    const [selectWidth, setSelectWidth] = useState()
     const dataTestPrefix = `${dataTest}-menu`
 
+    // Re-measuring whenever `hidden` changes keeps the width current when the
+    // select's container has been resized since the menu was last opened
     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)
+            setSelectWidth(`${selectRef.offsetWidth}px`)
         }
-    }, [selectRef])
+    }, [selectRef, hidden])
 
     if (hidden) {
         return null
@@ -60,6 +60,14 @@ export function Menu({
 
     const isEmpty = !options.length && !filterValue
 
+    const flexible = Boolean(minWidth || maxWidth)
+    // We never want the menu narrower than the select, so a maxWidth below
+    // the select's width intentionally has no effect
+    const flexibleMinWidth =
+        minWidth && selectWidth
+            ? `max(${selectWidth}, ${minWidth})`
+            : minWidth || selectWidth
+
     return (
         <Layer onBackdropClick={onClose} transparent>
             <Popper
@@ -67,7 +75,15 @@ export function Menu({
                 placement="bottom-start"
                 observeReferenceResize
             >
-                <div className="menu" style={{ width: menuWidth, maxHeight }}>
+                <div
+                    className="menu"
+                    style={{
+                        width: flexible ? 'fit-content' : selectWidth,
+                        minWidth: flexible ? flexibleMinWidth : undefined,
+                        maxWidth,
+                        maxHeight,
+                    }}
+                >
                     {isEmpty && <Empty>{empty}</Empty>}
 
                     {hasNoFilterMatch && <NoMatch>{noMatchText}</NoMatch>}
@@ -160,6 +176,8 @@ Menu.propTypes = {
     loading: PropTypes.bool,
     loadingText: PropTypes.string,
     maxHeight: PropTypes.string,
+    maxWidth: PropTypes.string,
+    minWidth: PropTypes.string,
     noMatchText: PropTypes.string,
     optionComponent: PropTypes.elementType,
     optionUpdateStrategy: PropTypes.oneOf(['off', 'polite', 'assertive']),

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

@@ -12,6 +12,9 @@ import {
     useHandleKeyPressOnFilterInput,
 } from './use-handle-key-press/index.js'
 
+const defaultSelected = { label: '', value: '' }
+const noop = () => undefined
+
 function useFocussedOptionIndex({ filterable, filterValue, options }) {
     const [defaultFocussedOptionIndex, setDefaultFocussedOptionIndex] =
         useState(0)
@@ -75,19 +78,21 @@ export function SimpleSingleSelect({
     loading = false,
     menuLoadingText: _menuLoadingText = '',
     menuMaxHeight = '288px',
+    menuMaxWidth,
+    menuMinWidth,
     noMatchText: _noMatchText = '',
     optionUpdateStrategy = 'polite',
     placeholder = '',
     prefix = '',
-    selected = { label: '', value: '' },
+    selected = defaultSelected,
     tabIndex = '0',
     valid = false,
     warning = false,
-    onBlur = () => undefined,
-    onClear = () => undefined,
-    onEndReached = () => undefined,
-    onFilterChange = () => undefined,
-    onFocus = () => undefined,
+    onBlur = noop,
+    onClear = noop,
+    onEndReached = noop,
+    onFilterChange = noop,
+    onFocus = noop,
 }) {
     // We can't translate with default props as the translation function would
     // be called before we get any translations from the consuming app/lib
@@ -261,6 +266,8 @@ export function SimpleSingleSelect({
                 loading={loading}
                 loadingText={menuLoadingText}
                 maxHeight={menuMaxHeight}
+                maxWidth={menuMaxWidth}
+                minWidth={menuMinWidth}
                 noMatchText={noMatchText}
                 optionUpdateStrategy={optionUpdateStrategy}
                 options={options}
@@ -342,6 +349,12 @@ SimpleSingleSelect.propTypes = {
     /** Allows to modify the max height of the menu **/
     menuMaxHeight: PropTypes.string,
 
+    /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) **/
+    menuMaxWidth: PropTypes.string,
+
+    /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) **/
+    menuMinWidth: 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),
 

package/src/simple-single-select/simple-single-select.prod.stories.js

@@ -22,6 +22,8 @@ export { WithOptionsAndLoadingText } from './__stories__/WithOptionsAndLoadingTe
 export { WithoutOptionsAndLoading } from './__stories__/WithoutOptionsAndLoading.js'
 export { WithManyOptions } from './__stories__/WithManyOptions.js'
 export { WithCustomLowMaxHeight } from './__stories__/WithCustomLowMaxHeight.js'
+export { WithMenuMinWidth } from './__stories__/WithMenuMinWidth.js'
+export { WithMenuMaxWidth } from './__stories__/WithMenuMaxWidth.js'
 export { WithOptionsAndDisabled } from './__stories__/WithOptionsAndDisabled.js'
 export { WithSelectionAndDisabled } from './__stories__/WithSelectionAndDisabled.js'
 export { WithPrefix } from './__stories__/WithPrefix.js'

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

@@ -150,6 +150,74 @@ describe('<SimpleSingleSelect />', () => {
         expect(menu.style.maxHeight).toBe('100px')
     })
 
+    describe('dropdown menu width', () => {
+        let offsetWidth
+
+        beforeEach(() => {
+            // The menu's width is derived from the select's measured width,
+            // which is always 0 in jsdom
+            offsetWidth = jest
+                .spyOn(HTMLElement.prototype, 'offsetWidth', 'get')
+                .mockReturnValue(120)
+        })
+
+        afterEach(() => {
+            offsetWidth.mockRestore()
+        })
+
+        const renderAndOpen = (props) => {
+            render(
+                <SimpleSingleSelect
+                    name="simple"
+                    selected={{ value: 'foo', label: 'Foo' }}
+                    onChange={() => null}
+                    options={[{ value: 'foo', label: 'Foo' }]}
+                    {...props}
+                />
+            )
+
+            fireEvent.click(screen.getByRole('combobox'))
+
+            const listbox = screen.getByRole('listbox')
+            return listbox.parentNode.parentNode.parentNode
+        }
+
+        it('should match the width of the select by default', () => {
+            const menu = renderAndOpen()
+
+            expect(menu.style.width).toBe('120px')
+        })
+
+        it('should not be narrower than menuMinWidth or the select', () => {
+            const menu = renderAndOpen({ menuMinWidth: '240px' })
+
+            expect(menu.style.minWidth).toBe('max(120px, 240px)')
+        })
+
+        it('should not be wider than menuMaxWidth', () => {
+            const menu = renderAndOpen({ menuMaxWidth: '200px' })
+
+            expect(menu.style.maxWidth).toBe('200px')
+            expect(menu.style.minWidth).toBe('120px')
+        })
+
+        it('should re-measure the select when the menu is reopened', () => {
+            renderAndOpen({ menuMinWidth: '240px' })
+            const comboBox = screen.getByRole('combobox')
+
+            // close the menu
+            fireEvent.click(comboBox)
+
+            // widen the select while the menu is closed, then reopen it
+            offsetWidth.mockReturnValue(300)
+            fireEvent.click(comboBox)
+
+            const listbox = screen.getByRole('listbox')
+            const menu = listbox.parentNode.parentNode.parentNode
+            expect(menu.style.minWidth).toBe('max(300px, 240px)')
+        })
+    })
+
     it('should accept a placeholder', () => {
         render(
             <SimpleSingleSelect

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

@@ -137,6 +137,12 @@ SimpleSingleSelectField.propTypes = {
     /** Allows to modify the max height of the menu **/
     menuMaxHeight: PropTypes.string,
 
+    /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) **/
+    menuMaxWidth: PropTypes.string,
+
+    /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) **/
+    menuMinWidth: 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),
 

package/src/simple-single-select-field/simple-single-select-field.prod.stories.js

@@ -26,6 +26,13 @@ const options = [
     { value: '10', label: 'ten' },
 ]
 
+const longOptions = [
+    { value: '1', label: 'option one' },
+    { value: '2', label: 'option two' },
+    { value: '3', label: 'option three' },
+    { value: '4', label: 'A longer option that exceeds the minimum' },
+]
+
 export default {
     title: 'SimpleSingleSelectField',
     component: SimpleSingleSelectField,
@@ -186,3 +193,45 @@ export const InputWidth = () => {
         </div>
     )
 }
+
+export const WithMenuMinWidth = () => {
+    const [value, setValue] = useState('')
+    const valueLabel = value
+        ? longOptions.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <div style={{ width: 120 }}>
+            <SimpleSingleSelectField
+                name="simple"
+                label="This is the label"
+                value={value}
+                valueLabel={valueLabel}
+                onChange={(nextValue) => setValue(nextValue)}
+                options={longOptions}
+                menuMinWidth="240px"
+            />
+        </div>
+    )
+}
+
+export const WithMenuMaxWidth = () => {
+    const [value, setValue] = useState('')
+    const valueLabel = value
+        ? longOptions.find((option) => option.value === value)?.label
+        : ''
+
+    return (
+        <div style={{ width: 120 }}>
+            <SimpleSingleSelectField
+                name="simple"
+                label="This is the label"
+                value={value}
+                valueLabel={valueLabel}
+                onChange={(nextValue) => setValue(nextValue)}
+                options={longOptions}
+                menuMaxWidth="200px"
+            />
+        </div>
+    )
+}

package/src/simple-single-select-field/simple-single-select-field.test.js

@@ -52,6 +52,8 @@ describe('<SimpleSingleSelectField />', () => {
                 loading={false}
                 menuLoadingText=""
                 menuMaxHeight=""
+                menuMaxWidth="400px"
+                menuMinWidth="240px"
                 noMatchText=""
                 optionUpdateStrategy="off"
                 placeholder=""
@@ -91,6 +93,8 @@ describe('<SimpleSingleSelectField />', () => {
         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].menuMaxWidth).toBe('400px')
+        expect(SimpleSingleSelect.mock.calls[0][0].menuMinWidth).toBe('240px')
         expect(SimpleSingleSelect.mock.calls[0][0].noMatchText).toBe('')
         expect(SimpleSingleSelect.mock.calls[0][0].optionUpdateStrategy).toBe(
             'off'

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

@@ -13,6 +13,8 @@ const SingleSelect = ({
     selected = '',
     tabIndex,
     maxHeight,
+    menuMinWidth,
+    menuMaxWidth,
     inputMaxHeight,
     onChange,
     onFocus,
@@ -68,6 +70,8 @@ const SingleSelect = ({
                     menu={menu}
                     tabIndex={tabIndex}
                     maxHeight={maxHeight}
+                    menuMinWidth={menuMinWidth}
+                    menuMaxWidth={menuMaxWidth}
                     onChange={onChange}
                     onFocus={onFocus}
                     onKeyDown={onKeyDown}
@@ -127,6 +131,10 @@ SingleSelect.propTypes = {
     loading: PropTypes.bool,
     loadingText: PropTypes.string,
     maxHeight: PropTypes.string,
+    /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+    menuMaxWidth: PropTypes.string,
+    /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+    menuMinWidth: PropTypes.string,
     /** Text to show when filter returns no results. Required if `filterable` prop is true */
     noMatchText: requiredIf((props) => props.filterable, PropTypes.string),
     placeholder: PropTypes.string,

package/src/single-select/single-select.prod.stories.js

@@ -356,3 +356,29 @@ export const ShiftedIntoView = (args) => (
         `}</style>
     </>
 )
+
+export const WithMenuMaxWidth = (args) => (
+    <div style={{ width: 120 }}>
+        <SingleSelect {...args}>
+            <SingleSelectOption value="1" label="option one" />
+            <SingleSelectOption value="2" label="option two" />
+            <SingleSelectOption value="3" label="A much longer option label" />
+        </SingleSelect>
+    </div>
+)
+WithMenuMaxWidth.args = { menuMaxWidth: '200px' }
+
+export const WithMenuMinWidth = (args) => (
+    <div style={{ width: 120 }}>
+        <SingleSelect {...args}>
+            <SingleSelectOption value="1" label="option one" />
+            <SingleSelectOption value="2" label="option two" />
+            <SingleSelectOption value="3" label="option three" />
+            <SingleSelectOption
+                value="4"
+                label="A longer option that exceeds the minimum"
+            />
+        </SingleSelect>
+    </div>
+)
+WithMenuMinWidth.args = { menuMinWidth: '240px' }

package/src/single-select-field/single-select-field.js

@@ -45,6 +45,8 @@ class SingleSelectField extends React.Component {
             helpText,
             validationText,
             maxHeight,
+            menuMinWidth,
+            menuMaxWidth,
             inputMaxHeight,
             inputWidth,
             children,
@@ -81,6 +83,8 @@ class SingleSelectField extends React.Component {
                         selected={selected}
                         tabIndex={tabIndex}
                         maxHeight={maxHeight}
+                        menuMinWidth={menuMinWidth}
+                        menuMaxWidth={menuMaxWidth}
                         inputMaxHeight={inputMaxHeight}
                         onChange={onChange}
                         onFocus={onFocus}
@@ -148,6 +152,10 @@ SingleSelectField.propTypes = {
     loadingText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     /** Constrains height of the SingleSelect */
     maxHeight: PropTypes.string,
+    /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+    menuMaxWidth: PropTypes.string,
+    /** See [dropdown menu width](https://developers.dhis2.org/docs/ui/components/select#dropdown-menu-width) */
+    menuMinWidth: PropTypes.string,
     /** Text to display when there are no filter results */
     noMatchText: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
     /** Placeholder text when the SingleSelect is empty */

package/src/single-select-field/single-select-field.prod.stories.js

@@ -144,3 +144,34 @@ DefaultFilterPlaceholderAndNoMatchText.storyName =
 export const DefaultLoadingText = Template.bind({})
 DefaultLoadingText.args = { loading: true, ...DefaultEmpty.args }
 DefaultLoadingText.storyName = 'Default: loadingText'
+
+export const WithMenuMaxWidth = Template.bind({})
+WithMenuMaxWidth.args = {
+    inputWidth: '120px',
+    menuMaxWidth: '200px',
+    children: [
+        <SingleSelectOption key="1" value="1" label="option one" />,
+        <SingleSelectOption key="2" value="2" label="option two" />,
+        <SingleSelectOption
+            key="3"
+            value="3"
+            label="A much longer option label"
+        />,
+    ],
+}
+
+export const WithMenuMinWidth = Template.bind({})
+WithMenuMinWidth.args = {
+    inputWidth: '120px',
+    menuMinWidth: '240px',
+    children: [
+        <SingleSelectOption key="1" value="1" label="option one" />,
+        <SingleSelectOption key="2" value="2" label="option two" />,
+        <SingleSelectOption key="3" value="3" label="option three" />,
+        <SingleSelectOption
+            key="4"
+            value="4"
+            label="A longer option that exceeds the minimum"
+        />,
+    ],
+}

package/src/single-select-option/single-select-option.js

@@ -63,9 +63,11 @@ const SingleSelectOption = ({
                 flex-shrink: 0;
                 background-size: contain;
                 background-repeat: no-repeat;
-                background-image: ${active
-                    ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')`
-                    : 'none'};
+                background-image: ${
+                    active
+                        ? `url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTMuNjMyMDkgNy44MzIxNEMzLjI3MjA5IDcuNDcyMTQgMi43MjAwOSA3LjQ3MjE0IDIuMzYwMDkgNy44MzIxNEMyLjAwMDA5IDguMTkyMTQgMi4wMDAwOSA4Ljc0NDE0IDIuMzYwMDkgOS4xMDQxNEw1LjYyNDA5IDEyLjM2ODFDNS45ODQwOSAxMi43MjgxIDYuNTM2MDkgMTIuNzI4MSA2Ljg5NjA5IDEyLjM2ODFMMTQuNjQ4MSA0LjY0MDE0QzE1LjAwODEgNC4yODAxNCAxNS4wMDgxIDMuNzI4MTQgMTQuNjQ4MSAzLjM2ODE0QzE0LjI4ODEgMy4wMDgxNCAxMy43MzYxIDMuMDA4MTQgMTMuMzUyMSAzLjM2ODE0TDYuMjcyMDkgMTAuNDcyMUwzLjYzMjA5IDcuODMyMTRaIiBmaWxsPSIjMDA2OTVDIi8+Cjwvc3ZnPgo=')`
+                        : 'none'
+                };
             }
         `}</style>
     </div>