@homecode/ui 4.22.3 → 4.22.6

package/dist/esm/index.js

@@ -10,6 +10,7 @@ export { DatePickerInput } from './src/components/DatePickerInput/DatePickerInpu
 export { DateTime, formatDate } from './src/components/DateTime/DateTime.js';
 export { Draggable } from './src/components/Draggable/Draggable.js';
 export { Expand } from './src/components/Expand/Expand.js';
+export { Flex } from './src/components/Flex/Flex.js';
 export { Form } from './src/components/Form/Form.js';
 export { Gallery } from './src/components/Gallery/Gallery.js';
 export { Heading } from './src/components/Heading/Heading.js';

package/dist/esm/src/components/Autocomplete/Autocomplete.js

@@ -33,6 +33,7 @@ import '../DatePickerInput/DatePickerInput.styl.js';
 import '../../tools/queryParams.js';
 import '../Draggable/Draggable.styl.js';
 import '../Expand/Expand.styl.js';
+import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';
@@ -57,7 +58,7 @@ import '../Virtualized/List/List.styl.js';
 import '../Virtualized/List/ListScroll.styl.js';
 
 function Autocomplete(props) {
-    const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, debounceDelay = 300, round = false, blur = false, inputProps = {}, popupProps = {}, } = props;
+    const { className, inputWrapperClassName, value, onChange, size = 'm', getOptions, onSelect, debounceDelay = 300, round = false, blur = false, inputProps = {}, popupProps = {}, menuProps = {}, } = props;
     const isMounted = useIsMounted();
     const [options, setOptions] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -138,7 +139,7 @@ function Autocomplete(props) {
     const optionsList = useMemo(() => {
         if (!options.length)
             return null;
-        return (jsx(Menu, { className: S.options, size: size, offset: { y: { before: 20, after: 20 } }, children: options.map((option, index) => (jsx(Menu.Item, { focused: focusedIndex === index, className: S.option, onClick: () => handleSelect(option), onMouseEnter: () => setFocusedIndex(index), children: option.render ? option.render(option) : option.label }, option.id))) }));
+        return (jsx(Menu, { className: S.options, size: size, offset: { y: { before: 20, after: 20 } }, ...menuProps, children: options.map((option, index) => (jsx(Menu.Item, { focused: focusedIndex === index, className: S.option, onClick: () => handleSelect(option), onMouseEnter: () => setFocusedIndex(index), children: option.render ? option.render(option) : option.label }, option.id))) }));
     }, [options, focusedIndex]);
     return (jsx(Popup, { className: classes, isOpen: isOpen, focusControl: true, round: round, size: size, blur: blur, direction: "bottom", ...popupProps, trigger: jsxs("div", { className: inputWrapperClassName, children: [jsx(Input, { ref: inputRef, 
                     // @ts-ignore

package/dist/esm/src/components/Flex/Flex.js

@@ -0,0 +1,8 @@
+import { jsx } from 'react/jsx-runtime';
+import S from './Flex.styl.js';
+
+const Flex = ({ children, ...props }) => {
+    return (jsx("div", { className: S.root, ...props, children: children }));
+};
+
+export { Flex };

package/dist/esm/src/components/Flex/Flex.styl.js

@@ -0,0 +1,7 @@
+import styleInject from '../../../node_modules/style-inject/dist/style-inject.es.js';
+
+var css_248z = ".Flex_root__1yZ2z{display:flex}";
+var S = {"root":"Flex_root__1yZ2z"};
+styleInject(css_248z);
+
+export { S as default };

package/dist/esm/src/components/Icon/icons/checkers.svg.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+var _path, _path2;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var SvgCheckers = function SvgCheckers(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 200 150"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fill: "#fff",
+    fillOpacity: 0.8,
+    d: "M0 0h200v150H0z"
+  })), _path2 || (_path2 = /*#__PURE__*/React.createElement("path", {
+    d: "M0 0h50v50H0zm100 0h50v50h-50zM50 50h50v50H50zm100 0h50v50h-50zM0 100h50v50H0zm100 0h50v50h-50z"
+  })));
+};
+
+export { SvgCheckers as default };

package/dist/esm/src/components/Icon/icons/{compas.svg.js → compass.svg.js}

@@ -2,14 +2,14 @@ import * as React from 'react';
 
 var _linearGradient, _path;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-var SvgCompas = function SvgCompas(props) {
+var SvgCompass = function SvgCompass(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     fill: "currentColor",
     viewBox: "0 0 24 24"
   }, props), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
-    id: "compas_svg__a"
+    id: "compass_svg__a"
   }, /*#__PURE__*/React.createElement("stop", {
     offset: 0,
     style: {
@@ -35,8 +35,8 @@ var SvgCompas = function SvgCompas(props) {
       stopOpacity: 1
     }
   })), _linearGradient || (_linearGradient = /*#__PURE__*/React.createElement("linearGradient", {
-    xlinkHref: "#compas_svg__a",
-    id: "compas_svg__b",
+    xlinkHref: "#compass_svg__a",
+    id: "compass_svg__b",
     x1: 16.621,
     x2: 40.144,
     y1: 9.343,
@@ -48,9 +48,9 @@ var SvgCompas = function SvgCompas(props) {
   })), /*#__PURE__*/React.createElement("path", {
     d: "M12.06.27c-.589 0-.96.601-1.7 1.8-1.872 3.052-4.625 7.886-4.626 9.96s2.744 6.917 4.611 9.97c.735 1.202 1.105 1.804 1.694 1.803.588 0 .958-.602 1.698-1.8 1.873-3.053 4.627-7.886 4.627-9.96.001-2.074-2.743-6.914-4.611-9.964C13.018.873 12.648.268 12.059.269",
     style: {
-      fill: "url(#compas_svg__b)"
+      fill: "url(#compass_svg__b)"
     }
   }));
 };
 
-export { SvgCompas as default };
+export { SvgCompass as default };

package/dist/esm/src/components/Icon/icons/index.js

@@ -8,8 +8,9 @@ var ICONS = {
     check: () => import('./check.svg.js'),
     close: () => import('./close.svg.js'),
     colors: () => import('./colors.svg.js'),
-    compas: () => import('./compas.svg.js'),
+    compass: () => import('./compass.svg.js'),
     copy: () => import('./copy.svg.js'),
+    checkers: () => import('./checkers.svg.js'),
     chevronUp: () => import('./chevronUp.svg.js'),
     chevronDown: () => import('./chevronDown.svg.js'),
     chevronRight: () => import('./chevronRight.svg.js'),

package/dist/esm/src/components/Input/Input.js

@@ -33,6 +33,7 @@ import 'moment';
 import '../DatePickerInput/DatePickerInput.styl.js';
 import '../Draggable/Draggable.styl.js';
 import '../Expand/Expand.styl.js';
+import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';

package/dist/esm/src/components/InputFile/InputFile.js

@@ -36,6 +36,7 @@ import 'moment';
 import '../DatePickerInput/DatePickerInput.styl.js';
 import { Draggable } from '../Draggable/Draggable.js';
 import '../Expand/Expand.styl.js';
+import '../Flex/Flex.styl.js';
 import '../Form/Form.styl.js';
 import '../Form/Validator.js';
 import '../Form/SubmitButtons/SubmitButtons.styl.js';

package/dist/esm/types/src/components/Autocomplete/Autocomplete.types.d.ts

@@ -1,6 +1,7 @@
 import { FormControl, Size } from 'uilib/types';
 import { Props as InputProps } from 'uilib/components/Input/Input.types';
 import { Props as PopupProps } from 'uilib/components/Popup/Popup.types';
+import { MenuProps } from 'uilib/components/Menu/Menu.types';
 export type Option = {
     id: string;
     label: string;
@@ -17,6 +18,7 @@ export type Props = FormControl<Value, HTMLInputElement> & {
     debounceDelay?: number;
     inputProps?: Partial<InputProps>;
     popupProps?: Partial<PopupProps>;
+    menuProps?: Partial<MenuProps>;
     round?: boolean;
     blur?: boolean;
 };

package/dist/esm/types/src/components/Flex/Flex.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from 'react';
+type FlexProps = HTMLAttributes<HTMLDivElement> & {
+    children: React.ReactNode;
+};
+export declare const Flex: ({ children, ...props }: FlexProps) => JSX.Element;
+export {};

package/dist/esm/types/src/components/Icon/icons/index.d.ts

@@ -8,8 +8,9 @@ declare const _default: {
     check: () => Promise<any>;
     close: () => Promise<any>;
     colors: () => Promise<any>;
-    compas: () => Promise<any>;
+    compass: () => Promise<any>;
     copy: () => Promise<any>;
+    checkers: () => Promise<any>;
     chevronUp: () => Promise<any>;
     chevronDown: () => Promise<any>;
     chevronRight: () => Promise<any>;

package/dist/esm/types/src/components/index.d.ts

@@ -10,6 +10,7 @@ export * from './DatePickerInput/DatePickerInput';
 export * from './DateTime/DateTime';
 export * from './Draggable/Draggable';
 export * from './Expand/Expand';
+export * from './Flex/Flex';
 export * from './Form/Form';
 export * from './Gallery/Gallery';
 export * from './Heading/Heading';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homecode/ui",
-  "version": "4.22.3",
+  "version": "4.22.6",
   "description": "React UI components library",
   "scripts": {
     "test": "jest",