@dreamcommerce/aurora 0.3.17 → 0.3.20

package/build/esm/packages/aurora/src/components/dropdown/components/option_multiple.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import classnames from 'classnames';
+import ControlCheckbox from '../../controls/hoc/control_checkbox/index.js';
+import { cssDropdownListItem, cssDropdownListItemSelected, cssDropdownListItemDisabled, cssDropdownListItemReadonly } from '../css_classes.js';
+import cssClasses from '../../../css/dropdown/main.module.less.js';
+import Item from './item.js';
+
+/**
+ * Dropdown.OptionMultiple component. Should be only used within Dropdown.List
+ * @component
+ * @example
+ * const option = {
+ *  text: 'Option 1',
+ *  value: '1'
+ * }
+ *
+ * <Dropdown.OptionMultiple
+ *  key="id1"
+ *  option={option}
+ *  isSelected={false}
+ *  isDisabled={false}
+ *  isReadonly={false}
+ *  onClick={(option) => console.log(option)}
+ * />
+ */
+var OptionMultiple = function (_a) {
+    var _b;
+    var 
+    /**
+     * select option
+     */
+    option = _a.option, 
+    /**
+     * indicates if option component is selected
+     */
+    isSelected = _a.isSelected, 
+    /**
+     * indicates if option component is readonly
+     */
+    isReadonly = _a.isReadonly, 
+    /**
+     * indicates if option component is disabled
+     */
+    isDisabled = _a.isDisabled, 
+    /**
+     * onClick callback
+     */
+    onClick = _a.onClick;
+    var itemClasses = classnames(cssClasses[cssDropdownListItem], (_b = {},
+        _b[cssClasses[cssDropdownListItemSelected]] = isSelected,
+        _b[cssClasses[cssDropdownListItemDisabled]] = isDisabled,
+        _b[cssClasses[cssDropdownListItemReadonly]] = isReadonly,
+        _b));
+    /**
+     * click handler works only for options that are neither readonly nor disabled
+     */
+    var clickHandler = isReadonly || isDisabled ? undefined : function () { return onClick(option); };
+    return (React.createElement(Item, { isSelected: isSelected, onClick: clickHandler },
+        React.createElement("div", { className: itemClasses },
+            React.createElement(ControlCheckbox, { initiallyChecked: isSelected, disabled: isReadonly || isDisabled, label: option === null || option === void 0 ? void 0 : option.text }))));
+};
+
+export default OptionMultiple;
+//# sourceMappingURL=option_multiple.js.map

package/build/esm/packages/aurora/src/components/dropdown/components/option_multiple.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/components/search.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDropdownSearchProps } from '../types';
+/**
+ * Dropdown.Search component. Displays search control.
+ * @component
+ * @example
+ * <Dropdown.Search onKeyUp={(ev) => console.log(`${ev} is a keyboard event`)} />
+ */
+declare const Search: React.FC<IDropdownSearchProps>;
+export default Search;

package/build/esm/packages/aurora/src/components/dropdown/components/search.js

@@ -0,0 +1,28 @@
+import React, { useRef } from 'react';
+import Input from '../../controls/components/input.js';
+import { useDropdownContext } from '../context/index.js';
+import { cssDropdownSearch } from '../css_classes.js';
+import cssClasses from '../../../css/dropdown/main.module.less.js';
+import { useKeyboardOpenClose } from '../hooks/use_keyboard_open_close.js';
+
+/**
+ * Dropdown.Search component. Displays search control.
+ * @component
+ * @example
+ * <Dropdown.Search onKeyUp={(ev) => console.log(`${ev} is a keyboard event`)} />
+ */
+var Search = function (_a) {
+    var 
+    /**
+     * on key up callback
+     */
+    onKeyUp = _a.onKeyUp;
+    var _b = useDropdownContext(), toggleDropdown = _b.toggleDropdown, isOpen = _b.isOpen;
+    var ref = useRef(null);
+    useKeyboardOpenClose(toggleDropdown, isOpen, ref);
+    return (React.createElement("aside", { className: cssClasses[cssDropdownSearch], ref: ref },
+        React.createElement(Input, { placeholder: "Szukaj", padding: "small", onKeyUp: onKeyUp, autoFocus: true })));
+};
+
+export default Search;
+//# sourceMappingURL=search.js.map

package/build/esm/packages/aurora/src/components/dropdown/components/search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/components/select.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { IDropdownSelectProps } from '../types';
+/**
+ * Dropdown.Select component. Displays select like control. Use it only if you have selectable values.
+ * @component
+ * @example
+ * <Dropdown.Select name="select_name" selectedOptions={['value1', 'value2']} />
+ */
+declare const Select: React.FC<IDropdownSelectProps>;
+export default Select;

package/build/esm/packages/aurora/src/components/dropdown/components/select.js

@@ -0,0 +1,60 @@
+import React, { useRef } from 'react';
+import { useDropdownContext } from '../context/index.js';
+import cssClasses from '../../../css/dropdown/main.module.less.js';
+import { useKeyboardOpenClose } from '../hooks/use_keyboard_open_close.js';
+import InputWrapper from '../../controls/components/input_wrapper.js';
+
+/**
+ * Dropdown.Select component. Displays select like control. Use it only if you have selectable values.
+ * @component
+ * @example
+ * <Dropdown.Select name="select_name" selectedOptions={['value1', 'value2']} />
+ */
+var Select = function (_a) {
+    var 
+    /**
+     * select name
+     */
+    name = _a.name, 
+    /**
+     * is select disabled, used for styling purposes
+     */
+    _b = _a.isDisabled, 
+    /**
+     * is select disabled, used for styling purposes
+     */
+    isDisabled = _b === void 0 ? false : _b, 
+    /**
+     * is select readonly, used for styling purposes
+     */
+    _c = _a.isReadonly, 
+    /**
+     * is select readonly, used for styling purposes
+     */
+    isReadonly = _c === void 0 ? false : _c, 
+    /**
+     * array of selected options
+     */
+    selectedOptions = _a.selectedOptions;
+    var ref = useRef(null);
+    /**
+     * get values from dropdown context
+     */
+    var _d = useDropdownContext(), isOpen = _d.isOpen, toggleDropdown = _d.toggleDropdown;
+    /**
+     * value for display purposes, its texts not actual values from options
+     */
+    var value = selectedOptions.map(function (option) { return option.text; }).join(', ');
+    /**
+     * disabled options should have hidden inputs with values rendered
+     */
+    var notDisabled = selectedOptions.filter(function (option) { return !option.isDisabled; });
+    var $hiddenInputs = notDisabled.map(function (option) { return (React.createElement("input", { key: option.value, type: "hidden", name: name, value: option.value, disabled: isDisabled, readOnly: isReadonly })); });
+    useKeyboardOpenClose(toggleDropdown, isOpen, ref);
+    return (React.createElement("div", { className: cssClasses['select'], "aria-expanded": isOpen, "aria-haspopup": "listbox", ref: ref },
+        React.createElement(InputWrapper, { value: value, isFocused: Boolean(isOpen), isDisabled: isDisabled, isReadOnly: isReadonly, onClick: toggleDropdown }),
+        $hiddenInputs));
+};
+
+export default Select;
+//# sourceMappingURL=select.js.map

package/build/esm/packages/aurora/src/components/dropdown/components/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const DROPDOWN_TEST_ID: {
+    dropdown: string;
+    label: string;
+};
+export declare const DROPDOWN_Z_INDEX = 1200;
+export declare const DROPDOWN_ON_MODAL_Z_INDEX = 2200;

package/build/esm/packages/aurora/src/components/dropdown/constants.js

@@ -0,0 +1,11 @@
+var DROPDOWN_MAIN_TEST_ID = 'dropdown';
+var DROPDOWN_LABEL_TEST_ID = "".concat(DROPDOWN_MAIN_TEST_ID, "__label");
+var DROPDOWN_TEST_ID = {
+    dropdown: DROPDOWN_MAIN_TEST_ID,
+    label: DROPDOWN_LABEL_TEST_ID
+};
+var DROPDOWN_Z_INDEX = 1200;
+var DROPDOWN_ON_MODAL_Z_INDEX = 2200;
+
+export { DROPDOWN_ON_MODAL_Z_INDEX, DROPDOWN_TEST_ID, DROPDOWN_Z_INDEX };
+//# sourceMappingURL=constants.js.map

package/build/esm/packages/aurora/src/components/dropdown/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/context/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IDropdownContext } from './types';
+export declare const DropdownContext: import("react").Context<{}>;
+/**
+ * drodown context
+ */
+export declare function useDropdownContext(): IDropdownContext;

package/build/esm/packages/aurora/src/components/dropdown/context/index.js

@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+
+var DropdownContext = createContext({});
+/**
+ * drodown context
+ */
+function useDropdownContext() {
+    var context = useContext(DropdownContext);
+    if (Object.keys(context).length === 0 && context.constructor === Object) {
+        throw new Error("Dropdown compound components cannot be rendered outside the Dropdown component");
+    }
+    return context;
+}
+
+export { DropdownContext, useDropdownContext };
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/dropdown/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/context/types.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface IDropdownContext {
+    wrapperRef?: React.RefObject<HTMLDivElement>;
+    isOpen?: boolean;
+    toggleDropdown?: () => void;
+}

package/build/esm/packages/aurora/src/components/dropdown/context/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/dropdown/context/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../../src/components/dropdown/context/types.ts"],"names":[],"mappings":""}

package/build/esm/packages/aurora/src/components/dropdown/css_classes.d.ts

@@ -0,0 +1,20 @@
+export declare const cssDropdown = "dropdown";
+export declare const cssDropdownContent: string;
+export declare const cssDropdownContentRight: string;
+export declare const cssDropdownHeader: string;
+export declare const cssDropdownHeaderIcon: string;
+export declare const cssDropdownHeaderTitle: string;
+export declare const cssDropdownHeaderContent: string;
+export declare const cssDropdownItemWithHover: string;
+export declare const cssDropdownInput: string;
+export declare const cssDropdownList: string;
+export declare const cssDropdownSearch: string;
+export declare const cssDropdownWithScroll: string;
+export declare const cssDropdownListWithGroup: string;
+export declare const cssDropdownListHead: string;
+export declare const cssDropdownListItem: string;
+export declare const cssDropdownListItemSelected: string;
+export declare const cssDropdownListItemDisabled: string;
+export declare const cssDropdownListItemReadonly: string;
+export declare const cssIcon = "icon";
+export declare const cssIconBack: string;

package/build/esm/packages/aurora/src/components/dropdown/css_classes.js

@@ -0,0 +1,19 @@
+var cssDropdown = 'dropdown';
+var cssDropdownContent = "".concat(cssDropdown, "__content");
+var cssDropdownContentRight = "".concat(cssDropdownContent, "_right");
+var cssDropdownHeader = "".concat(cssDropdown, "__header");
+var cssDropdownHeaderTitle = "".concat(cssDropdown, "__header-title");
+var cssDropdownHeaderContent = "".concat(cssDropdown, "__header-content");
+var cssDropdownItemWithHover = "".concat(cssDropdown, "__item-with-hover");
+var cssDropdownList = "".concat(cssDropdown, "__list");
+var cssDropdownSearch = "".concat(cssDropdown, "__search");
+var cssDropdownWithScroll = "".concat(cssDropdown, "__list_with-scroll");
+var cssDropdownListWithGroup = "".concat(cssDropdown, "__list_with-group");
+var cssDropdownListHead = "".concat(cssDropdown, "__list-head");
+var cssDropdownListItem = "".concat(cssDropdown, "__list-item");
+var cssDropdownListItemSelected = "".concat(cssDropdown, "__list-item_selected");
+var cssDropdownListItemDisabled = "".concat(cssDropdown, "__list-item_disabled");
+var cssDropdownListItemReadonly = "".concat(cssDropdown, "__list-item_readonly");
+
+export { cssDropdown, cssDropdownContent, cssDropdownContentRight, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle, cssDropdownItemWithHover, cssDropdownList, cssDropdownListHead, cssDropdownListItem, cssDropdownListItemDisabled, cssDropdownListItemReadonly, cssDropdownListItemSelected, cssDropdownListWithGroup, cssDropdownSearch, cssDropdownWithScroll };
+//# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/dropdown/css_classes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/hoc/multiselect/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { IMultiSelectProps } from '../../types';
+/**
+ * MultiSelect component. Build with Dropdown composed components.
+ *
+ * @component
+ * @example
+ * const options = [{
+ *  text: 'Option 1',
+ *  value: 'value1'
+ * }, {
+ *  text: 'Option 2,,
+ *  value: 'value2'
+ * }];
+ * return (
+ *  <MultiSelect name="my_select_name" options={options} onChange={(option) => console.log(option)} />
+ * )
+ */
+declare const Multiple: React.FC<IMultiSelectProps>;
+export default Multiple;

package/build/esm/packages/aurora/src/components/dropdown/hoc/multiselect/index.js

@@ -0,0 +1,143 @@
+import React, { useRef, useState } from 'react';
+import { DropdownContext } from '../../context/index.js';
+import { cssDropdown } from '../../css_classes.js';
+import cssClasses from '../../../../css/dropdown/main.module.less.js';
+import { handleSearchKeyUp, isSelected, handleItemClick } from '../../utilities.js';
+import { useValues } from '../../hooks/use_values.js';
+import { useToggle } from '../../hooks/use_toggle.js';
+import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
+import Dropdown from '../../index.js';
+
+/**
+ * MultiSelect component. Build with Dropdown composed components.
+ *
+ * @component
+ * @example
+ * const options = [{
+ *  text: 'Option 1',
+ *  value: 'value1'
+ * }, {
+ *  text: 'Option 2,,
+ *  value: 'value2'
+ * }];
+ * return (
+ *  <MultiSelect name="my_select_name" options={options} onChange={(option) => console.log(option)} />
+ * )
+ */
+var Multiple = function (_a) {
+    var 
+    /**
+     * multiselect name, used also for hidden inputs
+     */
+    name = _a.name, 
+    /**
+     * array of multiselect options
+     */
+    options = _a.options, 
+    /**
+     * array of default values (for select its always one element),
+     * array is used to be compatible with multiselects
+     */
+    _b = _a.defaultValues, 
+    /**
+     * array of default values (for select its always one element),
+     * array is used to be compatible with multiselects
+     */
+    defaultValues = _b === void 0 ? [] : _b, 
+    /**
+     * indicates if select is readonly
+     */
+    _c = _a.isReadonly, 
+    /**
+     * indicates if select is readonly
+     */
+    isReadonly = _c === void 0 ? false : _c, 
+    /**
+     * indicatse if select is disabled
+     */
+    _d = _a.isDisabled, 
+    /**
+     * indicatse if select is disabled
+     */
+    isDisabled = _d === void 0 ? false : _d, 
+    /**
+     * indicates if selects has groups (similiar to optgroup), options
+     * then have left-padding, and you should use options with isHeader
+     * set to true
+     */
+    _e = _a.isWithGroups, 
+    /**
+     * indicates if selects has groups (similiar to optgroup), options
+     * then have left-padding, and you should use options with isHeader
+     * set to true
+     */
+    isWithGroups = _e === void 0 ? false : _e, 
+    /**
+     * indicates if select should have search to look for options
+     */
+    _f = _a.isWithSearch, 
+    /**
+     * indicates if select should have search to look for options
+     */
+    isWithSearch = _f === void 0 ? false : _f, 
+    /**
+     * indicates if select should be opened at render
+     */
+    _g = _a.defaultIsOpen, 
+    /**
+     * indicates if select should be opened at render
+     */
+    defaultIsOpen = _g === void 0 ? false : _g, 
+    /**
+     * indicates if select should hide on option click
+     */
+    _h = _a.defaultCloseOnClick, 
+    /**
+     * indicates if select should hide on option click
+     */
+    defaultCloseOnClick = _h === void 0 ? false : _h, 
+    /**
+     * called on select toggle
+     */
+    onToggle = _a.onToggle, 
+    /**
+     * called on option change
+     */
+    onChange = _a.onChange;
+    /**
+     * reference to dropdown wrapper element
+     */
+    var wrapperRef = useRef(null);
+    /**
+     * isOpen provides state if dropdown is open(visible), toggleDropdown is a function which toggles dropdown content
+     */
+    var _j = useToggle(defaultIsOpen, onToggle), isOpen = _j[0], toggleDropdown = _j[1];
+    /**
+     * hook with option list state, and method to change option list
+     */
+    var _k = useState(options), optionsList = _k[0], setOptionsList = _k[1];
+    /**
+     * hook with selected value, and method do change it
+     */
+    var _l = useValues(wrapperRef, options, defaultValues, onChange), selectedValues = _l[0], setSelectedValues = _l[1];
+    /**
+     * context values, they may be used with useContext in any component which is part of Dropdown composition
+     */
+    var value = React.useMemo(function () { return ({ wrapperRef: wrapperRef, isOpen: isOpen, toggleDropdown: toggleDropdown }); }, [isOpen, toggleDropdown]);
+    /**
+     * hook which resets options list to default on close if select has search and it was used
+     */
+    useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);
+    return (React.createElement(DropdownContext.Provider, { value: value },
+        React.createElement("div", { ref: wrapperRef, className: cssClasses[cssDropdown] },
+            React.createElement(Dropdown.Select, { name: name, isReadonly: isReadonly, isDisabled: isDisabled, selectedOptions: selectedValues }),
+            React.createElement(Dropdown.Content, null,
+                isWithSearch && React.createElement(Dropdown.Search, { onKeyUp: function (ev) { return handleSearchKeyUp(ev, options, setOptionsList); } }),
+                React.createElement(Dropdown.List, { isWithGroups: isWithGroups }, optionsList === null || optionsList === void 0 ? void 0 : optionsList.map(function (option) {
+                    var _a, _b;
+                    return option.isHeader ? (React.createElement(Dropdown.Header, { key: option.text, text: option.text })) : (React.createElement(Dropdown.OptionMultiple, { key: option.value, option: option, isSelected: isSelected(option, selectedValues), isDisabled: (_a = option.isDisabled) !== null && _a !== void 0 ? _a : isDisabled, isReadonly: (_b = option.isReadonly) !== null && _b !== void 0 ? _b : isReadonly, onClick: function (option) { return handleItemClick(option, defaultCloseOnClick, setSelectedValues, toggleDropdown); } }));
+                }))))));
+};
+
+export default Multiple;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/dropdown/hoc/multiselect/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/hoc/select/index.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ISelectProps } from '../../types';
+/**
+ * Select component. Build with Dropdown composed components.
+ *
+ * @component
+ * @example
+ * const options = [{
+ *  text: 'Option 1',
+ *  value: 'value1'
+ * }, {
+ *  text: 'Option 2,,
+ *  value: 'value2'
+ * }];
+ * return (
+ *  <Select name="my_select_name" options={options} onChange={(option) => console.log(option)} />
+ * )
+ */
+declare const Select: React.FC<ISelectProps>;
+export default Select;

package/build/esm/packages/aurora/src/components/dropdown/hoc/select/index.js

@@ -0,0 +1,144 @@
+import React, { useRef, useState, useEffect } from 'react';
+import { DropdownContext } from '../../context/index.js';
+import { cssDropdown } from '../../css_classes.js';
+import cssClasses from '../../../../css/dropdown/main.module.less.js';
+import { handleSearchKeyUp, isSelected, handleItemClick } from '../../utilities.js';
+import { useValue } from '../../hooks/use_value.js';
+import { useToggle } from '../../hooks/use_toggle.js';
+import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
+import Dropdown from '../../index.js';
+
+/**
+ * Select component. Build with Dropdown composed components.
+ *
+ * @component
+ * @example
+ * const options = [{
+ *  text: 'Option 1',
+ *  value: 'value1'
+ * }, {
+ *  text: 'Option 2,,
+ *  value: 'value2'
+ * }];
+ * return (
+ *  <Select name="my_select_name" options={options} onChange={(option) => console.log(option)} />
+ * )
+ */
+var Select = function (_a) {
+    var 
+    /**
+     * select name, used also for hidden inputs
+     */
+    name = _a.name, 
+    /**
+     * array of select options
+     */
+    options = _a.options, 
+    /**
+     * array of default values (for select its always one element), array is
+     * used to be compatible with multiselects
+     */
+    defaultValues = _a.defaultValues, 
+    /**
+     * indicates if select is readonly
+     */
+    _b = _a.isReadonly, 
+    /**
+     * indicates if select is readonly
+     */
+    isReadonly = _b === void 0 ? false : _b, 
+    /**
+     * indicates if select is disabled
+     */
+    _c = _a.isDisabled, 
+    /**
+     * indicates if select is disabled
+     */
+    isDisabled = _c === void 0 ? false : _c, 
+    /**
+     * indicates if selects has groups (similar to optgroup), options then have
+     * left-padding, and you should use options with isHeader set to true
+     */
+    _d = _a.isWithGroups, 
+    /**
+     * indicates if selects has groups (similar to optgroup), options then have
+     * left-padding, and you should use options with isHeader set to true
+     */
+    isWithGroups = _d === void 0 ? false : _d, 
+    /**
+     * indicates if select should have search to look for options
+     */
+    _e = _a.isWithSearch, 
+    /**
+     * indicates if select should have search to look for options
+     */
+    isWithSearch = _e === void 0 ? false : _e, 
+    /**
+     * indicates if select should be opened at render
+     */
+    _f = _a.defaultIsOpen, 
+    /**
+     * indicates if select should be opened at render
+     */
+    defaultIsOpen = _f === void 0 ? false : _f, 
+    /**
+     * indicates if select should hide on option click
+     */
+    _g = _a.defaultCloseOnClick, 
+    /**
+     * indicates if select should hide on option click
+     */
+    defaultCloseOnClick = _g === void 0 ? true : _g, 
+    /**
+     * called on select toggle
+     */
+    onToggle = _a.onToggle, 
+    /**
+     * called on option change
+     */
+    onChange = _a.onChange, 
+    /**
+     * Place where portal should be placed, by default to body
+     * this can be used to put modal inside modal
+     */
+    portalContainer = _a.portalContainer;
+    /**
+     * reference to dropdown wrapper element
+     */
+    var wrapperRef = useRef(null);
+    /**
+     * isOpen provides state if dropdown is open(visible), toggleDropdown is a function which toggles dropdown content
+     */
+    var _h = useToggle(defaultIsOpen, onToggle), isOpen = _h[0], toggleDropdown = _h[1];
+    /**
+     * hook with option list state, and method to change option list
+     */
+    var _j = useState([]), optionsList = _j[0], setOptionsList = _j[1];
+    /**
+     * hook with selected value, and method do change it
+     */
+    var _k = useValue(wrapperRef, options, defaultValues, onChange), selectedValues = _k[0], setSelectedValues = _k[1];
+    /**
+     * context values, they may be used with useContext in any component which is part of Dropdown composition
+     */
+    var value = React.useMemo(function () { return ({ wrapperRef: wrapperRef, isOpen: isOpen, toggleDropdown: toggleDropdown }); }, [isOpen, toggleDropdown]);
+    /**
+     * hook which resets options list to default on close if select has search and it was used
+     */
+    useSetOptionsOnClose(isWithSearch, isOpen, setOptionsList, options);
+    useEffect(function () {
+        setOptionsList(options);
+    }, [options]);
+    return (React.createElement(DropdownContext.Provider, { value: value },
+        React.createElement("div", { ref: wrapperRef, className: cssClasses[cssDropdown] },
+            React.createElement(Dropdown.Select, { name: name, isReadonly: isReadonly, isDisabled: isDisabled, selectedOptions: selectedValues }),
+            React.createElement(Dropdown.Content, { portalContainer: portalContainer },
+                isWithSearch && React.createElement(Dropdown.Search, { onKeyUp: function (ev) { return handleSearchKeyUp(ev, options, setOptionsList); } }),
+                React.createElement(Dropdown.List, { isWithGroups: isWithGroups }, optionsList === null || optionsList === void 0 ? void 0 : optionsList.map(function (option) {
+                    var _a, _b;
+                    return option.isHeader ? (React.createElement(Dropdown.Header, { key: option.text, text: option.text })) : (React.createElement(Dropdown.Option, { key: option.value, option: option, isSelected: isSelected(option, selectedValues), isDisabled: (_a = option.isDisabled) !== null && _a !== void 0 ? _a : isDisabled, isReadonly: (_b = option.isReadonly) !== null && _b !== void 0 ? _b : isReadonly, onClick: function (option) { return handleItemClick(option, defaultCloseOnClick, setSelectedValues, toggleDropdown); } }));
+                }))))));
+};
+
+export default Select;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/dropdown/hoc/select/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/dropdown/hooks/index.d.ts

@@ -0,0 +1,5 @@
+import { useValue } from './use_value';
+import { useValues } from './use_values';
+import { useToggle } from './use_toggle';
+import { useSetOptionsOnClose } from './use_set_options_on_close';
+export { useValue, useValues, useToggle, useSetOptionsOnClose };

package/build/esm/packages/aurora/src/components/dropdown/hooks/index.js

@@ -0,0 +1,6 @@
+import { useValue } from './use_value';
+import { useValues } from './use_values';
+import { useToggle } from './use_toggle';
+import { useSetOptionsOnClose } from './use_set_options_on_close';
+export { useValue, useValues, useToggle, useSetOptionsOnClose };
+//# sourceMappingURL=index.js.map