@scality/core-ui 0.115.0

package/dist/components/selectv2/SelectStyle.js

@@ -0,0 +1,238 @@
+import Select from 'react-select';
+import styled from 'styled-components';
+import { spacing } from '../../spacing';
+import { fontSize, fontWeight, zIndex } from '../../style/theme';
+import { getThemePropSelector } from '../../utils';
+const SelectStyle = styled(Select) `
+  font-size: ${fontSize.base};
+  box-sizing: border-box;
+  width: ${({ width }) => width};
+  ${({ isDefault }) => isDefault ? `height: ${spacing.r32}` : `height: ${spacing.r24}`};
+
+  ${({ isDefault }) => !isDefault && `font-weight: ${fontWeight.bold};`}
+  .sc-select__control {
+    ${({ isDefault }) => isDefault ? `min-height: ${spacing.r32}` : `min-height: ${spacing.r24}`};
+    padding-left: ${({ isDefault }) => (isDefault ? spacing.r8 : spacing.r16)};
+    cursor: pointer;
+
+    caret-color: ${({ isDefault }) => getThemePropSelector(isDefault ? 'textSecondary' : 'textPrimary')};
+    background-color: ${({ isDefault }) => getThemePropSelector(isDefault ? 'backgroundLevel1' : 'selectedActive')};
+    height: auto;
+    border-radius: ${({ isDefault }) => (isDefault ? spacing.r4 : spacing.r12)};
+    border: ${spacing.r1} solid
+      ${({ isDefault }) => getThemePropSelector(isDefault ? 'border' : 'selectedActive')};
+
+    &:hover {
+      border: ${spacing.r1} solid
+        ${({ isDefault }) => getThemePropSelector(isDefault ? 'infoPrimary' : 'selectedActive')};
+      ${({ isDefault }) => !isDefault && `background-color: ${getThemePropSelector('highlight')};`}
+    }
+
+    &.sc-select__control--is-disabled {
+      pointer-events: auto;
+      cursor: not-allowed;
+      opacity: 0.5;
+
+      &:hover {
+        border: ${spacing.r1} solid
+          ${({ isDefault }) => getThemePropSelector(isDefault ? 'border' : 'selectedActive')};
+      }
+    }
+
+    &.sc-select__control--menu-is-open {
+      ${(props) => props.isDefault
+    ? `background-color: ${props.theme.backgroundLevel1};`
+    : `
+            border-radius: ${props.isMenuBottom
+        ? `${spacing.r12} ${spacing.r12} 0 0`
+        : `0 0 ${spacing.r12} ${spacing.r12}`};
+            background-color: ${props.theme.selectedActive} !important;
+      `}
+    }
+
+    &.sc-select__control--is-focused {
+      .sc-select__placeholder {
+        ${(props) => props.isSearchable && `opacity: 0.5;`}
+      }
+      ${(props) => props.isDefault
+    ? `border-color: ${props.theme.infoPrimary};`
+    : `
+             border-color: ${props.theme.selectedActive};
+             background-color: ${props.theme.highlight};
+      `}
+      box-shadow: none;
+      outline: none;
+    }
+
+    .sc-select__input {
+      ${({ isDefault }) => isDefault && `margin-top: ${spacing.r1};`}
+      color: ${getThemePropSelector('textPrimary')};
+
+      & > input {
+        font-weight: inherit;
+        font-family: inherit;
+      }
+    }
+
+    .sc-select__placeholder {
+      font-style: italic;
+      color: ${getThemePropSelector('textSecondary')};
+    }
+
+    .sc-select__value-container {
+      ${({ isDefault }) => !isDefault && `max-height: ${spacing.r24};`}
+      padding: 0;
+
+      input {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        opacity: 1 !important;
+      }
+
+      .value-container-icon {
+        color: ${getThemePropSelector('textPrimary')};
+        padding-right: ${spacing.r4};
+      }
+    }
+
+    .sc-select__single-value {
+      color: ${getThemePropSelector('textPrimary')};
+    }
+
+    .sc-select__indicator,
+    .sc-select__dropdown-indicator {
+      padding: 0 ${spacing.r8} 0 ${spacing.r8};
+      color: ${({ isDefault }) => getThemePropSelector(isDefault ? 'textSecondary' : 'textPrimary')};
+    }
+  }
+
+  .sc-select__menu {
+    width: ${({ width }) => width};
+    border: ${spacing.r1} solid
+      ${({ isDefault }) => getThemePropSelector(isDefault ? 'border' : 'selectedActive')};
+    ${(props) => props.options &&
+    props.options.length === 0 &&
+    !props.isDefault &&
+    `
+      border: none;
+    `}
+    color: ${getThemePropSelector('textPrimary')};
+    background-color: ${getThemePropSelector('backgroundLevel1')};
+    box-sizing: border-box;
+    overflow: hidden;
+    margin: 0;
+    ${(props) => !props.isDefault &&
+    `
+        border-radius: ${props.isMenuBottom
+        ? `0 0 ${spacing.r12} ${spacing.r12}`
+        : `${spacing.r12} ${spacing.r12} 0 0`};
+    `}
+    z-index: ${zIndex.dropdown};
+
+    .sc-select__menu-list {
+      padding: 0;
+      overflow: hidden;
+      ${({ isDefault }) => isDefault
+    ? `
+        max-height: calc(${spacing.r32} * ${(props) => props.ITEMS_PER_SCROLL_WINDOW} + ${spacing.r32} / 2);`
+    : `
+        max-height: calc(${spacing.r24} * ${(props) => props.ITEMS_PER_SCROLL_WINDOW} + ${spacing.r24} / 2);`}
+
+      .sc-select__menu-notice {
+        color: ${({ isDefault }) => getThemePropSelector(isDefault ? 'textSecondary' : 'textPrimary')};
+        &.sc-select__menu-notice--no-options {
+          background-color: ${({ isDefault }) => getThemePropSelector(isDefault ? 'backgroundLevel3' : 'selectedActive')};
+        }
+      }
+      .sc-tooltip {
+        width: 100%;
+      }
+
+      div > .react-window-option > .sc-select__option,
+      .sc-select__option {
+        cursor: pointer;
+        background-color: ${getThemePropSelector('backgroundLevel1')};
+        height: ${({ isDefault }) => (isDefault ? spacing.r40 : spacing.r24)};
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        border: ${spacing.r1} solid transparent;
+        border-radius: 0;
+        ${(props) => props.isDefault &&
+    `border-bottom: ${spacing.r1} solid ${props.theme.border};`}
+        padding-left: 0;
+
+        .option-icon {
+          padding-right: ${spacing.r4};
+        }
+
+        &.sc-select__option--is-focused {
+          ${({ isDefault }) => isDefault &&
+    `background-color: ${getThemePropSelector('backgroundLevel1')};`}
+          border: ${spacing.r1} dashed
+            ${getThemePropSelector('selectedActive')};
+        }
+
+        &.sc-select__option:hover {
+          border: ${spacing.r1} solid transparent;
+          background-color: ${getThemePropSelector('highlight')};
+        }
+
+        &.sc-select__option--is-disabled {
+          cursor: not-allowed;
+          opacity: 50%;
+          background-color: ${getThemePropSelector('backgroundLevel2')};
+          font-style: italic;
+          i {
+            color: ${getThemePropSelector('textPrimary')};
+          }
+        }
+
+        &.sc-select__option--is-selected {
+          &:before {
+            content: '';
+            background: ${getThemePropSelector('selectedActive')};
+            position: absolute;
+            right: 0;
+            height: ${spacing.r24};
+            width: ${spacing.r4};
+          }
+          background-color: ${getThemePropSelector('highlight')};
+          color: ${(props) => props.theme.textPrimary};
+        }
+
+        &.sc-select__option--is-disabled:hover {
+          opacity: 50%;
+          background-color: ${getThemePropSelector('backgroundLevel2')};
+        }
+
+        .sc-highlighted-matching-text {
+          color: ${getThemePropSelector('selectedActive')};
+        }
+
+        .option-value-wrapper {
+          display: flex;
+          align-items: center;
+          width: stretch;
+          padding: ${spacing.r4} ${spacing.r8} ${spacing.r4} ${spacing.r16};
+        }
+      }
+
+      ${({ isDefault }) => isDefault &&
+    `
+          div > .react-window-option:first-of-type > .sc-select__option {
+          .sc-select__option:first-of-type {
+            border-radius: ${spacing.r4} ${spacing.r4} 0 0;
+          }
+
+          div > .react-window-option:last-of-type > .sc-select__option {
+          .sc-select__option:last-of-type {
+            border-bottom: ${spacing.r1} solid transparent;
+            border-radius: 0 0 ${spacing.r4} ${spacing.r4};
+          }
+        `}
+    }
+  }
+`;
+export { SelectStyle };

package/dist/components/selectv2/Selectv2.component.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+export type OptionProps = {
+    title?: string;
+    disabled?: boolean;
+    icon?: React.ReactNode;
+    children?: React.ReactNode;
+    value: string;
+    disabledReason?: React.ReactNode;
+};
+export declare function Option({ value, children, disabled, icon, disabledReason, ...rest }: OptionProps): JSX.Element;
+export type SelectProps = {
+    id: string;
+    placeholder?: string;
+    disabled?: boolean;
+    children?: React.ReactNode;
+    defaultValue?: string;
+    value?: string;
+    onFocus?: (event: FocusEvent) => void;
+    onBlur?: (event: FocusEvent) => void;
+    onChange: (newValue: string) => void;
+    variant?: 'default' | 'rounded';
+    size?: '1' | '2/3' | '1/2' | '1/3';
+    className?: string;
+    menuPosition?: 'fixed' | 'absolute';
+};
+declare function SelectWithOptionContext(props: SelectProps): JSX.Element;
+declare namespace SelectWithOptionContext {
+    var Option: typeof import("./Selectv2.component").Option;
+}
+export declare const Select: typeof SelectWithOptionContext;
+export {};
+//# sourceMappingURL=Selectv2.component.d.ts.map

package/dist/components/selectv2/Selectv2.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Selectv2.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/selectv2/Selectv2.component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAMN,MAAM,OAAO,CAAC;AAcf,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC,CAAC;AAkBF,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,cAAc,EACd,GAAG,IAAI,EACR,EAAE,WAAW,GAAG,GAAG,CAAC,OAAO,CA0B3B;AAyND,MAAM,MAAM,WAAW,GAAG;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACtC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACrC,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,IAAI,CAAC,EAAE,GAAG,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;IACnC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;CACrC,CAAC;AAgBF,iBAAS,uBAAuB,CAAC,KAAK,EAAE,WAAW,eAyBlD;kBAzBQ,uBAAuB;;;AAiKhC,eAAO,MAAM,MAAM,gCAA0B,CAAC"}

package/dist/components/selectv2/Selectv2.component.js

@@ -0,0 +1,267 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, useRef, } from 'react';
+import { ScrollbarWrapper, Tooltip } from '../../index';
+import { components } from 'react-select';
+import { Icon } from '../icon/Icon.component';
+import { SelectStyle } from './SelectStyle';
+import { FixedSizeList as List } from 'react-window';
+import { convertRemToPixels } from '../../utils';
+import { spacing } from '../../spacing';
+import { convertSizeToRem } from '../inputv2/inputv2';
+import { ConstrainedText } from '../constrainedtext/Constrainedtext.component';
+const ITEMS_PER_SCROLL_WINDOW = 4;
+// more/equal than NOPT_SEARCH options enable search
+const NOPT_SEARCH = 8;
+const usePreviousValue = (value) => {
+    const ref = useRef(null);
+    useEffect(() => {
+        ref.current = value;
+    });
+    return ref.current;
+};
+function useOptions() {
+    const optionContext = useContext(OptionContext);
+    if (!optionContext)
+        throw new Error('useOptions cannot be rendered outside the Select component');
+    return Object.values(optionContext.options);
+}
+export function Option({ value, children, disabled, icon, disabledReason, ...rest }) {
+    const optionContext = useContext(OptionContext);
+    if (!optionContext)
+        throw new Error('Option cannot be rendered outside the Select component');
+    const prevValue = usePreviousValue(value);
+    useEffect(() => {
+        if (prevValue && prevValue !== value) {
+            optionContext.unregister(prevValue);
+        }
+        optionContext.register({
+            value: value,
+            label: children || '',
+            isDisabled: disabled || false,
+            icon: icon,
+            disabledReason: disabledReason,
+            optionProps: { ...rest },
+        });
+        return () => {
+            optionContext.unregister(value);
+        };
+        //eslint-disable-next-line react-hooks/exhaustive-deps --  optionContext is mutable
+    }, [children, disabled, icon, value, prevValue]);
+    return _jsx(_Fragment, {});
+}
+const Input = (props) => {
+    const ariaProps = {
+        role: props.selectProps.isSearchable ? 'combobox' : 'listbox',
+        'aria-expanded': props.selectProps.menuIsOpen,
+        'aria-autocomplete': 'list',
+    };
+    return _jsx(components.Input, { ...props, ...ariaProps });
+};
+const selectDropdownIndicator = (caretType, indicatorDirection) => {
+    if (caretType === 'chevron') {
+        if (indicatorDirection === 'up')
+            return 'Chevron-up';
+        else
+            return 'Chevron-down';
+    }
+    else {
+        if (indicatorDirection === 'up')
+            return 'Dropdown-up';
+        else
+            return 'Dropdown-down';
+    }
+};
+const DropdownIndicator = (props) => {
+    const indicatorDirection = props.selectProps.menuIsOpen ? 'up' : 'down';
+    const caretType = props.selectProps.isDefault ? 'chevron' : 'caret';
+    return (_jsx(components.DropdownIndicator, { ...props, children: _jsx(Icon, { name: props.isDisabled
+                ? 'Deletion-marker'
+                : selectDropdownIndicator(caretType, indicatorDirection) }) }));
+};
+const InternalOption = (width, isDefaultVariant) => (props) => {
+    const formatOptionLabel = () => {
+        const label = props.data.label;
+        const inputValue = props.selectProps.inputValue;
+        const parts = label
+            .split(inputValue)
+            .flatMap((item, index) => [inputValue, item])
+            .slice(1);
+        const reducedWidth = `${parseFloat(width.replace('rem')) - 2}rem`;
+        if (inputValue) {
+            return (_jsx(ConstrainedText, { lineClamp: isDefaultVariant ? 2 : 1, tooltipStyle: {
+                    width: reducedWidth,
+                }, text: parts.map((part, i) => {
+                    const highlightStyle = part.toLowerCase() === inputValue.toLowerCase()
+                        ? 'sc-highlighted-matching-text'
+                        : '';
+                    return (_jsx("span", { className: highlightStyle, children: part }, i));
+                }) }));
+        }
+        else {
+            return (_jsx(ConstrainedText, { lineClamp: isDefaultVariant ? 2 : 1, tooltipStyle: {
+                    width: reducedWidth,
+                }, text: label }));
+        }
+    };
+    const innerProps = {
+        ...props.innerProps,
+        ...props.data.optionProps,
+        // remove onMouseMove & onMouseOver so that options are not focused on hover
+        onMouseMove: undefined,
+        onMouseOver: undefined,
+        role: 'option',
+        'aria-disabled': props.isDisabled,
+        'aria-selected': props.isSelected,
+    };
+    return (_jsx(Tooltip, { overlay: props.data.isDisabled && props.data.disabledReason, placement: "right", overlayStyle: { marginLeft: '0.5rem', maxWidth: '15rem' }, children: _jsxs(components.Option, { ...props, innerProps: innerProps, isFocused: props.isFocused && props.selectProps.keyboardFocusEnabled, children: [_jsxs("div", { className: "option-value-wrapper", children: [_jsx("div", { className: "option-icon", children: props.data.icon }), formatOptionLabel()] }), _jsx("div", { children: props.isDisabled && _jsx(Icon, { name: "Deletion-marker" }) })] }) }));
+};
+const Menu = (props) => {
+    useEffect(() => {
+        props.selectProps.setIsMenuBottom(props.placement === 'bottom');
+    }, [props]);
+    return _jsx(components.Menu, { ...props });
+};
+const getScrollOffset = (list, index, itemCount, offset) => {
+    const { itemSize, height } = list.props;
+    const scrollOffset = list.state ? list.state.scrollOffset : 0;
+    const lastItemOffset = Math.max(0, itemCount * itemSize - height);
+    const maxOffset = Math.min(lastItemOffset, index * itemSize);
+    const minOffset = Math.max(0, index * itemSize - height + itemSize);
+    if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
+        return scrollOffset;
+    }
+    else if (scrollOffset < minOffset) {
+        return minOffset === 0 ? minOffset : minOffset + offset;
+    }
+    else {
+        return maxOffset === 0 ? maxOffset : maxOffset - offset;
+    }
+};
+const MenuList = (props) => {
+    const listRef = useRef(null);
+    const { children, getValue } = props;
+    const [selectedOption] = getValue();
+    const optionHeight = convertRemToPixels(parseFloat(props.selectProps.isDefault ? spacing.r40 : spacing.r24)) || 32;
+    let selectedIndex = 0;
+    let focusedIndex = 0;
+    if (children && children.length > 0) {
+        selectedIndex = children.findIndex((child) => child.props.data === selectedOption);
+        focusedIndex = props.focusedOption
+            ? children.findIndex((child) => child.props.data === props.focusedOption)
+            : selectedIndex;
+    }
+    const initialOffset = selectedIndex * optionHeight - (ITEMS_PER_SCROLL_WINDOW - 1) * optionHeight;
+    useEffect(() => {
+        if (listRef && listRef.current) {
+            // @ts-ignore
+            listRef.current.scrollTo(getScrollOffset(listRef.current, focusedIndex, children.length, optionHeight / 2));
+        }
+    }, [children.length, focusedIndex, optionHeight, listRef]);
+    if (children.length > ITEMS_PER_SCROLL_WINDOW) {
+        return (
+        // @ts-ignore
+        _jsx(List, { ref: listRef, className: "sc-select__menu-list", height: optionHeight * ITEMS_PER_SCROLL_WINDOW + optionHeight / 2, itemCount: children.length, itemSize: optionHeight, initialScrollOffset: initialOffset, 
+            // css prop willChange used by react-window causes display issues with tooltip
+            style: { willChange: undefined }, children: ({ index, style }) => {
+                return (_jsx("div", { className: "react-window-option", style: style, children: children[index] }));
+            } }));
+    }
+    return _jsx(components.MenuList, { ...props, children: children });
+};
+const ValueContainer = ({ children, ...props }) => {
+    const selectedOption = props.selectProps.selectedOption;
+    const icon = selectedOption ? selectedOption.icon : null;
+    return (_jsxs(components.ValueContainer, { ...props, children: [icon ? _jsx("div", { className: "value-container-icon", children: icon }) : null, _jsx("div", { children: children })] }));
+};
+const OptionContext = createContext(null);
+function SelectWithOptionContext(props) {
+    const [options, setOptions] = useState({});
+    const register = (option) => {
+        setOptions((prevOptions) => ({
+            ...prevOptions,
+            [option.value]: option,
+        }));
+    };
+    const unregister = (value) => {
+        setOptions((prevOptions) => {
+            const { [value]: _, ...rest } = prevOptions;
+            return rest;
+        });
+    };
+    return (_jsx(OptionContext.Provider, { value: { options, register, unregister }, children: _jsxs(_Fragment, { children: [_jsx(SelectBox, { ...props }), props.children] }) }));
+}
+function SelectBox({ placeholder = 'Select...', disabled = false, defaultValue, value, onChange, variant = 'default', className, size = '1', id, ...rest }) {
+    if (defaultValue && value) {
+        console.error('The `defaultValue` will be overridden by the `value` if they are set at the same time.');
+    }
+    const [keyboardFocusEnabled, setKeyboardFocusEnabled] = useState(false);
+    const [searchSelection, setSearchSelection] = useState('');
+    const [searchValue, setSearchValue] = useState('');
+    const [customPlaceholder, setPlaceholder] = useState(placeholder);
+    const isDefaultVariant = variant === 'default';
+    const [isMenuBottom, setIsMenuBottom] = useState(true);
+    const selectRef = useRef();
+    const options = useOptions();
+    const handleChange = (option) => {
+        const newValue = option ? option.value : '';
+        if (onChange && typeof onChange === 'function' && newValue !== value) {
+            onChange(newValue);
+        }
+        if (options && options.length > NOPT_SEARCH) {
+            selectRef.current.blur();
+        }
+    };
+    const handleSearchInput = (inputValue, { action }) => {
+        if (options && options.length > NOPT_SEARCH) {
+            if (action === 'menu-close') {
+                setSearchSelection('');
+            }
+            if (action === 'input-blur' || action === 'set-value') {
+                if (searchValue)
+                    setPlaceholder(searchValue);
+                else
+                    setPlaceholder(placeholder);
+                setSearchValue(inputValue);
+            }
+            else {
+                setSearchValue(inputValue);
+                if (inputValue.length === 0)
+                    setPlaceholder(placeholder);
+            }
+        }
+    };
+    const isEmptyStringInOptions = options.find((option) => option.value === '');
+    // Force to reset the value
+    useEffect(() => {
+        if (!defaultValue &&
+            !isEmptyStringInOptions &&
+            value === '' &&
+            selectRef.current &&
+            selectRef.current.select) {
+            selectRef.current.select.clearValue();
+        }
+    }, [value, selectRef, isEmptyStringInOptions]);
+    return (_jsx(ScrollbarWrapper, { children: _jsx(_Fragment, { children: options && (_jsx(SelectStyle, { inputId: id, className: ['sc-select', className].join(' '), classNamePrefix: "sc-select", name: "sc-select", value: searchSelection || options.find((opt) => opt.value === value), defaultValue: defaultValue, inputValue: options.length > NOPT_SEARCH ? searchValue : undefined, selectedOption: options.find((opt) => opt.value === value), keyboardFocusEnabled: keyboardFocusEnabled, options: options, isDisabled: disabled, placeholder: customPlaceholder, menuPlacement: "auto", isSearchable: options.length > NOPT_SEARCH, components: {
+                    Input: Input,
+                    Option: InternalOption(convertSizeToRem(size), isDefaultVariant),
+                    Menu: Menu,
+                    MenuList: MenuList,
+                    ValueContainer: ValueContainer,
+                    DropdownIndicator: DropdownIndicator,
+                    IndicatorSeparator: null,
+                }, isDefault: isDefaultVariant, ITEMS_PER_SCROLL_WINDOW: ITEMS_PER_SCROLL_WINDOW, onChange: handleChange, onInputChange: handleSearchInput, ref: selectRef, isMenuBottom: isMenuBottom, setIsMenuBottom: setIsMenuBottom, onBlur: rest.onBlur, onFocus: rest.onFocus, onMenuClose: () => setKeyboardFocusEnabled(false), onKeyDown: (event) => {
+                    if (event &&
+                        event.key === 'Enter' &&
+                        selectRef &&
+                        !selectRef.current.state.isOpen) {
+                        selectRef.current.setState({
+                            menuIsOpen: true,
+                        });
+                    }
+                    else {
+                        setKeyboardFocusEnabled(true);
+                    }
+                }, width: convertSizeToRem(size), ...rest })) }) }));
+}
+SelectWithOptionContext.Option = Option;
+export const Select = SelectWithOptionContext;

package/dist/components/sidebar/Sidebar.component.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+type Item = {
+    label: string;
+    onClick: (arg0: any) => void;
+    active?: boolean;
+    icon?: JSX.Element;
+};
+type Items = Array<Item>;
+export type Props = {
+    expanded?: boolean;
+    actions: Items;
+    hoverable?: boolean;
+    onToggleClick?: () => void;
+};
+export type WrapperProps = {
+    expanded?: boolean;
+    hoverable?: boolean;
+    hovered?: boolean;
+};
+declare function Sidebar({ expanded, actions, onToggleClick, hoverable, ...rest }: Props): JSX.Element;
+export { Sidebar };
+//# sourceMappingURL=Sidebar.component.d.ts.map

package/dist/components/sidebar/Sidebar.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sidebar.component.d.ts","sourceRoot":"","sources":["../../../src/lib/components/sidebar/Sidebar.component.tsx"],"names":[],"mappings":";AAaA,KAAK,IAAI,GAAG;IACV,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,IAAI,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACpB,CAAC;AACF,KAAK,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,CAAC;AACzB,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,EAAE,KAAK,CAAC;IACf,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B,CAAC;AACF,MAAM,MAAM,YAAY,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AA6HF,iBAAS,OAAO,CAAC,EACf,QAAQ,EACR,OAAO,EACP,aAAa,EACb,SAAS,EACT,GAAG,IAAI,EACR,EAAE,KAAK,eAqDP;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}