@via-profit/ui-kit 0.1.0-rc.79 → 0.1.0-rc.80

package/Autocomplete/AutocompleteContainer.d.ts

@@ -49,12 +49,57 @@ export interface AutocompleteProps<T, Multiple extends boolean | undefined = und
      * items render function
      */
     readonly children: Children<T>;
+    /**
+     * A function that returns a filtered array of values. which correspond to the entered query
+     * Example:
+     * ```tsx
+     * <Autocomplete
+     *  filterItems={(items, { query }) =>
+     *    items.filter(item => item.name.toLocaleLowerCase().indexOf(query) !== -1)
+     *  }
+     *  ...
+     * >
+     * ```
+     * </Autocomplete>
+     */
     readonly filterItems?: FilterItems<T>;
+    /**
+     * The function that will be called when an item is selected from the list
+     */
     readonly onChange?: OnChange<T, Multiple>;
+    /**
+     * A function that transforms the selected item into a string
+     * Example:
+     * ```tsx
+     * <Autocomplete
+     *   selectedItemToString={item => item.name} // item is {id: 1, name: 'Oleg'}
+     *   ...
+     * >
+     *   ...
+     * </Autocomplete>
+     * ```
+     */
     readonly selectedItemToString: ItemToString<T, Multiple>;
+    /**
+     * A function that determines which of the elements is currently selected\
+     * Example:
+     * ```tsx
+     * <Menu
+     *   ...
+     *   getOptionSelected={({ item, value }) => item.id === value.id}
+     */
     readonly getOptionSelected?: GetOptionSelected<T>;
+    /**
+     * The function that will be called at the moment when you want to close the autocomplete
+     */
     readonly onRequestClose?: OnRequestClose;
+    /**
+     * The function that will be called at the moment when you change the input value of input element
+     */
     readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The function that will be called at the moment when you want to open the selectbox
+     */
     readonly onRequestOpen?: (event: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLInputElement, Element> | React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Overridable components map

package/Menu/MenuContainer.d.ts

@@ -128,11 +128,6 @@ export interface MenuProps<T, Multiple extends boolean | undefined = undefined>
      * Called when item selected
      */
     readonly onSelectItem?: OnSelectItem<T, Multiple>;
-    /**
-     * A function that renders each list item as string\
-     * \
-     * **Default**: `JSON.stringify(...)`
-     */
     /**
      * The function that will be called at the moment when you want to close the menu
      */

package/Modal/BaseModal/ModalWrapper.js

@@ -10,6 +10,7 @@ const TabManager_1 = __importDefault(require("../../utils/TabManager"));
 const ModalWrapper = props => {
     const { children, isOpen: isOpenProp, autofocus = true } = props;
     const { state, dispatch } = (0, context_1.useContext)();
+    const initialOpenStateRef = react_1.default.useRef(isOpenProp);
     const [alreadyMounted, setMountState] = react_1.default.useState(true);
     const { closeOnEscape, isMounted, isOpen, destroyTimeout, onRequestClose } = state;
     const containerRef = react_1.default.useRef(null);
@@ -98,7 +99,7 @@ const ModalWrapper = props => {
      */
     react_1.default.useEffect(() => {
         var _a;
-        if (isOpen !== isOpenProp) {
+        if (isOpen !== isOpenProp || initialOpenStateRef.current) {
             /**
              * Mark as mounted and wait minimum loop of event (15ms) then mark as open
              */

package/Selectbox/index.d.ts

@@ -12,6 +12,9 @@ import { SelectboxButtonWrapperProps } from './SelectboxButtonWrapper';
 import { SelectboxContainerProps } from './SelectboxContainer';
 export { SelectboxItem };
 export interface SelectboxProps<T, Multiple extends boolean | undefined = undefined> extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'value' | 'onChange' | 'children'> {
+    /**
+     * Array of values
+     */
     readonly items: readonly T[];
     readonly value: Value<T, Multiple>;
     /**
@@ -72,12 +75,47 @@ export interface SelectboxProps<T, Multiple extends boolean | undefined = undefi
      * items render function
      */
     readonly children: Children<T>;
+    /**
+     * The function that will be called when an item is selected from the list
+     */
     readonly onChange?: OnChange<T, Multiple>;
+    /**
+     * A function that transforms the selected item into a string
+     * Example:
+     * ```tsx
+     * <Selectbox
+     *   selectedItemToString={item => item.name} // item is {id: 1, name: 'Oleg'}
+     *   ...
+     * >
+     *   ...
+     * </Selectbox>
+     * ```
+     */
     readonly selectedItemToString: ItemToString<T, Multiple>;
+    /**
+     * A function that determines which of the elements is currently selected\
+     * Example:
+     * ```tsx
+     * <Selectbox
+     *   getOptionSelected={({ item, value }) => item.id === value.id}
+     * >
+     *   ...
+     * </Selectbox>
+     * ```
+     */
     readonly getOptionSelected?: GetOptionSelected<T>;
+    /**
+     * The function that will be called at the moment when you want to close the selectbox
+     */
     readonly onRequestClose?: OnRequestClose;
-    readonly onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The function that will be called at the moment when you want to open the selectbox
+     */
     readonly onRequestOpen?: (event: React.KeyboardEvent<HTMLElement> | React.MouseEvent<HTMLElement> | React.FocusEvent<HTMLInputElement, Element> | React.ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Еhe label that will be shown if there are no selected items
+     */
+    readonly notSetLabel?: string;
     /**
      * Overridable components map
      */

package/Selectbox/index.js

@@ -29,7 +29,7 @@ const TextFieldErrorText_1 = __importDefault(require("../TextField/TextFieldErro
 const SelectboxButtonWrapper_1 = __importDefault(require("./SelectboxButtonWrapper"));
 const SelectboxContainer_1 = __importDefault(require("./SelectboxContainer"));
 const Selectbox = react_1.default.forwardRef((props, ref) => {
-    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'auto-start-end', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText"]);
+    const { items, value, multiple, isOpen = false, isLoading = false, anchorPos = 'auto-start-end', fullWidth = false, children, onChange, selectedItemToString, getOptionSelected, onRequestOpen = () => undefined, onRequestClose = () => undefined, overrides, id, label, onFocus, requiredAsterisk, error, errorText, notSetLabel = 'Not set' } = props, nativeButtonProps = __rest(props, ["items", "value", "multiple", "isOpen", "isLoading", "anchorPos", "fullWidth", "children", "onChange", "selectedItemToString", "getOptionSelected", "onRequestOpen", "onRequestClose", "overrides", "id", "label", "onFocus", "requiredAsterisk", "error", "errorText", "notSetLabel"]);
     const menuRef = react_1.default.useRef(null);
     const overridesMap = react_1.default.useMemo(() => ({
         Button: (overrides === null || overrides === void 0 ? void 0 : overrides.Button) || SelectboxButton_1.default,
@@ -69,10 +69,10 @@ const Selectbox = react_1.default.forwardRef((props, ref) => {
     }, [onRequestClose, anchorElement]);
     const renderValueAsString = react_1.default.useCallback(() => {
         if ((!multiple && !value) || (multiple && value.length === 0)) {
-            return 'Not set label';
+            return notSetLabel;
         }
         return selectedItemToString(value);
-    }, [multiple, selectedItemToString, value]);
+    }, [multiple, selectedItemToString, value, notSetLabel]);
     const inputID = react_1.default.useMemo(() => {
         if (typeof id === 'string') {
             return id;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@via-profit/ui-kit",
-  "version": "0.1.0-rc.79",
+  "version": "0.1.0-rc.80",
   "description": "UI Kit",
   "repository": {
     "type": "git",

package/Calendar/CalendarBottomBar.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-export type CalendarBottomBarProps = React.HTMLAttributes<HTMLDivElement>;
-declare const _default: React.ForwardRefExoticComponent<CalendarBottomBarProps & React.RefAttributes<HTMLDivElement>>;
-export default _default;

package/Calendar/CalendarBottomBar.js

@@ -1,28 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const Container = styled_1.default.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`;
-const CalendarBottomBar = (props, ref) => {
-    const { children } = props, restProps = __rest(props, ["children"]);
-    return (react_1.default.createElement(Container, Object.assign({}, restProps, { ref: ref }), children));
-};
-exports.default = react_1.default.forwardRef(CalendarBottomBar);

package/Calendar/CalendarMonthControl.d.ts

@@ -1,6 +0,0 @@
-import React from 'react';
-export interface CalendarMonthControlProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    readonly displayIcon: 'prev' | 'next';
-}
-declare const _default: React.ForwardRefExoticComponent<CalendarMonthControlProps & React.RefAttributes<HTMLButtonElement>>;
-export default _default;

package/Calendar/CalendarMonthControl.js

@@ -1,41 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const styled_1 = __importDefault(require("@emotion/styled"));
-const react_2 = require("@emotion/react");
-const Button_1 = __importDefault(require("../Button"));
-const IconChevronLeft_1 = __importDefault(require("./IconChevronLeft"));
-const IconChevronRight_1 = __importDefault(require("./IconChevronRight"));
-const StyledButton = (0, styled_1.default)(Button_1.default) `
-  color: ${({ theme }) => theme.color.accentSecondaryContrast.toString()};
-  &:hover {
-    color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.5).toString()};
-    background-color: ${({ theme }) => theme.color.accentSecondary.lighten(10).toString()};
-  }
-  &:active {
-    color: ${({ theme }) => theme.color.accentSecondaryContrast.alpha(0.9).toString()};
-  }
-  ${({ disabled }) => disabled &&
-    (0, react_2.css) `
-      opacity: 0.5;
-    `};
-`;
-const CalendarMonthControl = (props, ref) => {
-    const { displayIcon } = props, restProps = __rest(props, ["displayIcon"]);
-    return (react_1.default.createElement(StyledButton, Object.assign({ variant: "plain", iconOnly: true, type: "button" }, restProps, { ref: ref }), displayIcon === 'next' ? react_1.default.createElement(IconChevronRight_1.default, null) : react_1.default.createElement(IconChevronLeft_1.default, null)));
-};
-exports.default = react_1.default.forwardRef(CalendarMonthControl);

package/Calendar/IconChevronLeft.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default _default;

package/Calendar/IconChevronLeft.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const IconChevronLeft = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: "1em", height: "1em", ref: ref }, props),
-    react_1.default.createElement("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 48, d: "M328 112 184 256l144 144" })));
-exports.default = react_1.default.forwardRef(IconChevronLeft);

package/Selectbox/IconShow.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-declare const _default: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export default _default;

package/Selectbox/IconShow.js

@@ -1,9 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
-const IconShow = (props, ref) => (react_1.default.createElement("svg", Object.assign({ xmlns: "http://www.w3.org/2000/svg", version: "1.1", width: "1em", height: "1em", viewBox: "0 0 512 512" }, props, { ref: ref }),
-    react_1.default.createElement("path", { d: "m105.79 160.82a24 24 0 0 0-10.76 6.2109 24 24 0 0 0 0 33.941l144 144a24.002 24.002 0 0 0 33.941 0l144-144a24 24 0 0 0 0-33.941 24 24 0 0 0-33.941 0l-127.03 127.03-127.03-127.03a24 24 0 0 0-23.182-6.2109z", fill: "currentColor" })));
-exports.default = react_1.default.forwardRef(IconShow);