@geneui/components 2.11.2 → 2.12.2

package/Alert/index.js

@@ -0,0 +1,97 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { s as screenTypes } from '../configs-fed6ac34.js';
+import '../dateValidation-67caec66.js';
+import 'react-dom';
+import useDeviceType from '../hooks/useDeviceType.js';
+import Icon from '../Icon/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../_commonjsHelpers-24198af3.js';
+import '../hooks/useWindowSize.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .alert-holder{background:var(--background);border-radius:.6rem;width:100%;word-break:break-word}[data-gene-ui-version=\"2.12.2\"] .toaster-holder.top .alert-holder.mobile-view:first-child,[data-gene-ui-version=\"2.12.2\"] .toaster-holder.top .alert-holder.mobile-view:first-child .alert-box{border-top-left-radius:0;border-top-right-radius:0}[data-gene-ui-version=\"2.12.2\"] .toaster-holder.bottom .alert-holder.mobile-view:last-child,[data-gene-ui-version=\"2.12.2\"] .toaster-holder.bottom .alert-holder.mobile-view:last-child .alert-box{border-bottom-left-radius:0;border-bottom-right-radius:0}[data-gene-ui-version=\"2.12.2\"] .alert-box{background:rgba(var(--confirm-rgb),.1);border:1px solid var(--confirm);border-radius:.6rem;display:flex;min-height:4.2rem;padding:.8rem .7rem;width:100%}[data-gene-ui-version=\"2.12.2\"] .alert-box.type-info{--confirm:var(--hero);--confirm-hover:var(--hero-hover);--confirm-sc:var(--hero-sc);--confirm-rgb:var(--hero-rgb);--confirm-sc-rgb:var(--hero-sc-rgb)}[data-gene-ui-version=\"2.12.2\"] .alert-box.type-warning{--confirm:var(--warning);--confirm-hover:var(--warning-hover);--confirm-sc:var(--warning-sc);--confirm-rgb:var(--warning-rgb);--confirm-sc-rgb:var(--warning-sc-rgb)}[data-gene-ui-version=\"2.12.2\"] .alert-box.type-error{--confirm:var(--danger);--confirm-hover:var(--danger-hover);--confirm-sc:var(--danger-sc);--confirm-rgb:var(--danger-rgb);--confirm-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.12.2\"] .alert-box.type-note{--confirm:var(--note);--confirm-hover:var(--note-hover);--confirm-sc:var(--note-sc);--confirm-rgb:var(--note-rgb);--confirm-sc-rgb:var(--note-sc-rgb)}[data-gene-ui-version=\"2.12.2\"] .alert-box.type-message{--confirm:var(--message);--confirm-hover:var(--message-hover);--confirm-sc:var(--message-sc);--confirm-rgb:var(--message-rgb);--confirm-sc-rgb:var(--message-sc-rgb)}[data-gene-ui-version=\"2.12.2\"] .alert-holder.mobile-view .alert-box{border-bottom-color:rgba(var(--background-sc-rgb),.1);border-width:0 0 1px}[data-gene-ui-version=\"2.12.2\"] .toaster-holder:not(.top,.bottom,.center) .alert-holder.mobile-view .alert-box{border-radius:0}[data-gene-ui-version=\"2.12.2\"] .alert-box>li{flex-shrink:0;padding:0 .7rem}[data-gene-ui-version=\"2.12.2\"] .alert-box>li.ab-c-c{align-self:center;flex:auto;margin:.4rem 0}[data-gene-ui-version=\"2.12.2\"] .alert-box>li.ab-bc-icon-c{max-width:100%}[data-gene-ui-version=\"2.12.2\"] .alert-box>li a,[data-gene-ui-version=\"2.12.2\"] .alert-box>li.ab-bc-icon-c{color:var(--confirm)}[data-gene-ui-version=\"2.12.2\"] .alert-box .bc-icon-close{cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .alert-box .bc-icon-close:hover{color:var(--confirm)}}[data-gene-ui-version=\"2.12.2\"] .alert-box a{color:var(--hero);font-weight:600}[data-gene-ui-version=\"2.12.2\"] .alert-box-title{font:600 1.4rem/1.8rem var(--font-family)}[data-gene-ui-version=\"2.12.2\"] .alert-text{font:600 1.2rem/1.42 var(--font-family);margin:.8rem 0 0}";
+styleInject(css_248z);
+
+const alertTypes = ['success', 'info', 'warning', 'error', 'note', 'message'];
+function Alert(_ref) {
+  let {
+    type,
+    title,
+    onClose,
+    message,
+    screenType,
+    iconProps,
+    swapIcon,
+    className,
+    ...rest
+  } = _ref;
+  const {
+    isMobile
+  } = useDeviceType(screenType);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: classnames('alert-holder', {
+      'mobile-view': isMobile
+    }, className)
+  }, rest), /*#__PURE__*/React__default.createElement("ul", {
+    className: classnames('alert-box', "type-".concat(type))
+  }, (swapIcon || iconProps) && /*#__PURE__*/React__default.createElement("li", {
+    className: "ab-bc-icon-c"
+  }, swapIcon || /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-".concat(type === 'warning' ? 'info' : type).concat(iconProps.isFilled ? '-fill' : '')
+  })), /*#__PURE__*/React__default.createElement("li", {
+    className: "ab-c-c"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "alert-box-title"
+  }, title), message && /*#__PURE__*/React__default.createElement("div", {
+    className: "alert-text"
+  }, message)), !!onClose && /*#__PURE__*/React__default.createElement("li", {
+    className: "ab-action-c",
+    onClick: onClose
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-close"
+  }))));
+}
+Alert.propTypes = {
+  /**
+   * Alert type is for specifying information message to be delivered. Also a corresponding "Icon" atom will be displayed
+   */
+  type: PropTypes.oneOf(alertTypes),
+  /**
+   * Main field to describe alert information. Any valid React node
+   */
+  title: PropTypes.node.isRequired,
+  /**
+   * Additional classname
+   */
+  className: PropTypes.string,
+  /**
+   * Use this field for describing information more verbose. Any valid React node
+   */
+  message: PropTypes.node,
+  /**
+   * The switch between mobile and desktop version of Alert will be applied automatically, when the prop is not specified.
+   * When the prop is present it must be changed from outside.
+   */
+  screenType: PropTypes.oneOf(screenTypes),
+  /**
+   * When function is passed an "Icon" atom("type": "bc-icon-close") will be displayed((event: Event) => void).
+   */
+  onClose: PropTypes.func,
+  /**
+   * Same as "Icon" atom props
+   */
+  iconProps: PropTypes.shape({
+    ...Icon.propTypes
+  }),
+  /**
+   * Use this prop for replace main "Icon". Note that when the prop is specified "type" prop will not work(will be overlooked).
+   */
+  swapIcon: PropTypes.node
+};
+Alert.defaultProps = {
+  type: 'info'
+};
+
+export { alertTypes, Alert as default };

package/Avatar/index.js

@@ -0,0 +1,30 @@
+import React__default from 'react';
+import { c as classnames } from '../index-6ff23041.js';
+import { r as getInitials, n as noop } from '../index-a0e4e333.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import 'prop-types';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
+import 'react-dom';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .user-avatar-c{--size:2.6rem;background:var(--background-sc) no-repeat 50% 50%/cover;border-radius:.3rem;box-shadow:0 0 0 0 rgba(var(--background-sc-rgb),.2);color:var(--background);font:600 calc(var(--size)/2.3)/var(--size) var(--font-family);height:var(--size);text-align:center;transition:box-shadow .3s;width:var(--size)}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.clickable{cursor:pointer}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.clickable:hover{box-shadow:0 0 0 .3rem rgba(var(--background-sc-rgb),.2)}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c:not(.color-default){background:var(--background) no-repeat 50% 50%/cover;box-shadow:0 0 0 0 rgba(var(--background-rgb),.2);color:var(--background-sc)}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c:not(.color-default).clickable:hover{box-shadow:0 0 0 .3rem rgba(var(--background-rgb),.2)}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.color-green{--background:var(--confirm);--background-hover:var(--confirm-hover);--background-sc:var(--confirm-sc);--background-rgb:var(--confirm-rgb);--background-sc-rgb:var(--confirm-sc-rgb)}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.color-red{--background:var(--danger);--background-hover:var(--danger-hover);--background-sc:var(--danger-sc);--background-rgb:var(--danger-rgb);--background-sc-rgb:var(--danger-sc-rgb)}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.shape-circle{border-radius:100%}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.text-small{font-size:calc(var(--size)/2.5)}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c[class*=bc-icon-]{font-size:calc(var(--size)/2);line-height:var(--size)}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.size-small{--size:2.2rem}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.size-medium{--size:3.6rem}[data-gene-ui-version=\"2.12.2\"] .user-avatar-c.size-big{--size:4.6rem}";
+styleInject(css_248z);
+
+const Avatar = ({ src, icon, size, color, shape, onClick, children }) => {
+    return (React__default.createElement("div", { className: classnames('user-avatar-c', {
+            [`size-${size}`]: size,
+            [`color-${color}`]: color,
+            [`shape-${shape}`]: shape,
+            [icon]: !src && icon,
+            'text-small': typeof children === 'string' && children.length > 1,
+            clickable: !!onClick
+        }), style: { backgroundImage: src ? `url(${src})` : '' }, onClick: onClick }, !src && !icon && children && getInitials(children)));
+};
+Avatar.defaultProps = {
+    onClick: noop,
+    size: 'default',
+    color: 'default',
+    shape: 'circle'
+};
+
+export { Avatar as default };

package/Badge/index.js

@@ -0,0 +1,75 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { b as badgeConfig } from '../configs-fed6ac34.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .badge{max-width:-webkit-fit-content;max-width:-moz-fit-content;max-width:fit-content;position:relative}[data-gene-ui-version=\"2.12.2\"] .badge__content{background:var(--danger);border-radius:3rem;color:var(--danger-sc);display:block;font:600 1rem/1.6rem var(--font-family);min-width:1.6rem;padding:0 .5rem;text-align:center}[data-gene-ui-version=\"2.12.2\"] .badge__content-children{position:absolute;top:-.8rem}html:not([dir=rtl]) .badge__content-children{right:-.8rem}html[dir=rtl] .badge__content-children{left:-.8rem}[data-gene-ui-version=\"2.12.2\"] .badge__content-dot{height:1rem;min-height:1rem;min-width:1rem;top:-.5rem;width:1rem}html:not([dir=rtl]) .badge__content-dot{right:-.5rem}html[dir=rtl] .badge__content-dot{left:-.5rem}[data-gene-ui-version=\"2.12.2\"] .badge__content-medium{line-height:1.8rem;min-height:1.8rem;min-width:1.8rem}[data-gene-ui-version=\"2.12.2\"] .badge__content-big{line-height:2.2rem;min-height:2.2rem;min-width:2.2rem}[data-gene-ui-version=\"2.12.2\"] .badge__content-huge{font-size:1.3rem;line-height:2.6rem;min-height:2.6rem;min-width:2.6rem}[data-gene-ui-version=\"2.12.2\"] .badge__content-big,[data-gene-ui-version=\"2.12.2\"] .badge__content-huge,[data-gene-ui-version=\"2.12.2\"] .badge__content-medium{top:-1rem}html:not([dir=rtl]) .badge__content-big,html:not([dir=rtl]) .badge__content-huge,html:not([dir=rtl]) .badge__content-medium{right:-1rem}html[dir=rtl] .badge__content-big,html[dir=rtl] .badge__content-huge,html[dir=rtl] .badge__content-medium{left:-1rem}[data-gene-ui-version=\"2.12.2\"] .badge__content-primary{background:var(--hero)}";
+styleInject(css_248z);
+
+const getShowValue = (count, maxCount) => {
+  if (count !== 0 && !count) return null;
+  if (!maxCount) return count;
+  return count > maxCount ? "".concat(maxCount, "+") : count;
+};
+function Badge(_ref) {
+  let {
+    children,
+    size,
+    color,
+    count,
+    dot,
+    maxCount,
+    className,
+    ...restProps
+  } = _ref;
+  const show = useMemo(() => dot ? '' : getShowValue(count, maxCount), [dot, count, maxCount]);
+  return /*#__PURE__*/React__default.createElement("div", _extends({
+    className: "badge"
+  }, restProps), show !== null && /*#__PURE__*/React__default.createElement("span", {
+    className: classnames('badge__content', className, {
+      ["badge__content-".concat(size)]: size,
+      ["badge__content-".concat(color)]: color,
+      ["badge__content-dot"]: dot,
+      ["badge__content-children"]: children
+    })
+  }, show), children);
+}
+Badge.propTypes = {
+  /**
+   * Any valid React node
+   */
+  children: PropTypes.node,
+  /**
+   * Any custom class name
+   */
+  className: PropTypes.string,
+  /**
+   * Badge size
+   */
+  size: PropTypes.oneOf(badgeConfig.size),
+  /**
+   * Badge color
+   */
+  color: PropTypes.oneOf(badgeConfig.color),
+  /**
+   * Shows the specified number on the badge
+   */
+  count: PropTypes.number,
+  /**
+   * Set this property to have only dot instead of number
+   */
+  dot: PropTypes.bool,
+  /**
+   * When the "count" is greater than "maxCount" Badge will show "maxCount" value and "+"
+   */
+  maxCount: PropTypes.number
+};
+Badge.defaultProps = {
+  dot: false,
+  size: badgeConfig.size[0],
+  color: badgeConfig.color[0]
+};
+
+export { Badge as default };

package/{Breadcrumb.js → Breadcrumb/index.js}

@@ -1,29 +1,30 @@
-import { _ as _extends } from './_rollupPluginBabelHelpers-e8fb2e5c.js';
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useState, useCallback, Fragment } from 'react';
-import { p as propTypesExports } from './index-e0af0caf.js';
-import { c as classnames } from './index-6ff23041.js';
-import { n as noop } from './index-ac59cb10.js';
-import Button from './Button.js';
-import { P as Popover } from './index-084588e9.js';
-import Icon from './Icon.js';
-import Menu from './Menu.js';
-import './globalStyling-9c60a159.js';
-import { s as styleInject } from './style-inject.es-746bb8ed.js';
-import './dateValidation-67caec66.js';
-import './_commonjsHelpers-24198af3.js';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import { n as noop } from '../index-a0e4e333.js';
+import Button from '../Button/index.js';
+import Popover from '../Popover/index.js';
+import Icon from '../Icon/index.js';
+import Menu from '../Menu/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../dateValidation-67caec66.js';
+import '../_commonjsHelpers-24198af3.js';
 import 'react-dom';
-import './Popover-f4d1cac0.js';
-import './index-122432cd.js';
-import './useDeviceType-dd51db38.js';
-import './configs-91c86664.js';
-import './useWindowSize-80369d76.js';
-import './GeneUIProvider.js';
-import './Portal.js';
-import './Scrollbar.js';
-import './guid-8ddf77b3.js';
-import './Option.js';
-import './useEllipsisDetection-ef536015.js';
-import './Tooltip.js';
+import '../Popover-f4d1cac0.js';
+import '../index-122432cd.js';
+import '../hooks/useDeviceType.js';
+import '../configs-fed6ac34.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useUpdatableRef.js';
+import '../hooks/useForceUpdate.js';
+import '../GeneUIProvider/index.js';
+import '../Portal/index.js';
+import '../Scrollbar/index.js';
+import '../guid-8ddf77b3.js';
+import '../Option/index.js';
+import '../hooks/useEllipsisDetection.js';
+import '../Tooltip/index.js';
 
 function BreadcrumbItem(_ref) {
   let {
@@ -39,7 +40,7 @@ function BreadcrumbItem(_ref) {
   }, data.title);
 }
 
-var css_248z = "[data-gene-ui-version=\"1.0.0\"] .bread-crumbs-holder{align-items:center;display:flex;font-weight:600;justify-content:flex-start;min-height:3.6rem;width:100%}[data-gene-ui-version=\"1.0.0\"] .bread-crumbs-holder>*+:not(button){margin:0 0 0 1rem}html[dir=rtl] .bread-crumbs-holder>*+:not(button){margin:0 1rem 0 0}[data-gene-ui-version=\"1.0.0\"] .bread-crumbs-holder>button{margin:0 .4rem}[data-gene-ui-version=\"1.0.0\"] .bread-crumbs-holder>button+.icon,html[dir=rtl] .bread-crumbs-holder>button+.icon{margin:0}[data-gene-ui-version=\"1.0.0\"] .breadcrumbs-link{color:inherit;cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"1.0.0\"] .breadcrumbs-link:hover{color:var(--hero)}}[data-gene-ui-version=\"1.0.0\"] .breadcrumbs-link.active{color:var(--hero)}";
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .bread-crumbs-holder{align-items:center;display:flex;font-weight:600;justify-content:flex-start;min-height:3.6rem;width:100%}[data-gene-ui-version=\"2.12.2\"] .bread-crumbs-holder>*+:not(button){margin:0 0 0 1rem}html[dir=rtl] .bread-crumbs-holder>*+:not(button){margin:0 1rem 0 0}[data-gene-ui-version=\"2.12.2\"] .bread-crumbs-holder>button{margin:0 .4rem}[data-gene-ui-version=\"2.12.2\"] .bread-crumbs-holder>button+.icon,html[dir=rtl] .bread-crumbs-holder>button+.icon{margin:0}[data-gene-ui-version=\"2.12.2\"] .breadcrumbs-link{color:inherit;cursor:pointer}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .breadcrumbs-link:hover{color:var(--hero)}}[data-gene-ui-version=\"2.12.2\"] .breadcrumbs-link.active{color:var(--hero)}";
 styleInject(css_248z);
 
 function Breadcrumb(_ref) {
@@ -97,25 +98,25 @@ Breadcrumb.propTypes = {
   /**
    * Data items to display
    */
-  data: propTypesExports.arrayOf(propTypesExports.shape({
-    title: propTypesExports.node.isRequired
+  data: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.node.isRequired
   })).isRequired,
   /**
    * Additional className
    */
-  className: propTypesExports.string,
+  className: PropTypes.string,
   /**
    * Breadcrumbs will render collapsed view when "data" length is greater than 4, when set to "true"
    */
-  collapsed: propTypesExports.bool,
+  collapsed: PropTypes.bool,
   /**
    * Fires an event on breadcrumb item click((item: data[item] => void))
    */
-  onClick: propTypesExports.func,
+  onClick: PropTypes.func,
   /**
    * Use this prop to define the middle component between breadcrumb items.
    */
-  separator: propTypesExports.node
+  separator: PropTypes.node
 };
 Breadcrumb.defaultProps = {
   collapsed: false,

package/BusyLoader/index.js

@@ -0,0 +1,68 @@
+import React__default from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import Icon from '../Icon/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .loader-holder{align-items:center;color:var(--hero);display:flex;flex-direction:column;margin:auto;position:relative;text-align:center}[data-gene-ui-version=\"2.12.2\"] .loader-holder.p-static{margin:6rem}[data-gene-ui-version=\"2.12.2\"] .loader-holder.p-absolute{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}[data-gene-ui-version=\"2.12.2\"] .loader-holder .s-medium{font-size:2.8rem}[data-gene-ui-version=\"2.12.2\"] .loader-holder .s-big{font-size:5.4rem}[data-gene-ui-version=\"2.12.2\"] .loader-text{font:600 1.6rem/2rem var(--font-family);margin:1rem 0 0}[data-gene-ui-version=\"2.12.2\"] .bubble-loader{animation:sk-rotate 2s linear infinite;height:6.6rem;position:relative;width:6.6rem}@keyframes sk-rotate{to{transform:rotate(1turn)}}[data-gene-ui-version=\"2.12.2\"] .bubble-loader .dot{animation:sk-bounce 2s ease-in-out infinite;background:var(--hero);border-radius:100%;height:60%;position:absolute;top:0;width:60%}@keyframes sk-bounce{0%,to{transform:scale(0)}50%{transform:scale(1)}}[data-gene-ui-version=\"2.12.2\"] .bubble-loader .dot2{animation-delay:-1s;bottom:0;top:auto}[data-gene-ui-version=\"2.12.2\"] .bar-loader{height:.6rem;left:0;overflow:hidden;position:fixed;top:calc(var(--header-height, .6rem) - .6rem);width:100%}[data-gene-ui-version=\"2.12.2\"] .bar-loader:before{animation:bar-loader .8s linear infinite;background:linear-gradient(270deg,#7eb8ff 30%,#8d14e6 50%,#7eb8ff 70%) no-repeat 50% 50%/100vw .6rem;content:\"\";display:block;height:100%;left:50%;max-width:0;opacity:0;overflow:hidden;position:absolute;top:0;transform:translateX(-50%);width:100%}@keyframes bar-loader{0%,to{opacity:0}10%,90%{opacity:1}0%{max-width:0}to{max-width:100%}}";
+styleInject(css_248z);
+
+function BubbleLoader() {
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "bubble-loader"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: "dot dot1"
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: "dot dot2"
+  }));
+}
+function BusyLoader(props) {
+  const {
+    type,
+    isBusy,
+    children,
+    className,
+    loadingText,
+    spinnerSize
+  } = props;
+  return type === 'bar' ? /*#__PURE__*/React__default.createElement("div", {
+    className: "bar-loader"
+  }) : isBusy ? /*#__PURE__*/React__default.createElement("div", {
+    className: classnames('loader-holder', className)
+  }, type === 'spinner' ? /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-loader s-".concat(spinnerSize)
+  }) : /*#__PURE__*/React__default.createElement(BubbleLoader, null), loadingText && /*#__PURE__*/React__default.createElement("div", {
+    className: "loader-text"
+  }, loadingText)) : children;
+}
+BusyLoader.propTypes = {
+  /**
+   * Show loader
+   */
+  isBusy: PropTypes.bool,
+  /**
+   * Any valid React node. Renders when "isBusy" is set to false
+   */
+  children: PropTypes.node,
+  /**
+   * Show some text when loading
+   */
+  loadingText: PropTypes.string,
+  /**
+   * Loader available type/style
+   */
+  type: PropTypes.oneOf(['spinner', 'bubbles', 'bar']),
+  /**
+   * Loader size
+   */
+  spinnerSize: PropTypes.oneOf(['small', 'medium', 'big'])
+};
+BusyLoader.defaultProps = {
+  isBusy: true,
+  children: null,
+  type: 'spinner',
+  spinnerSize: 'small'
+};
+
+export { BusyLoader as default };

package/Button/index.js

@@ -0,0 +1,129 @@
+import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import React__default, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { c as classnames } from '../index-6ff23041.js';
+import Icon from '../Icon/index.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+
+var css_248z = "[data-gene-ui-version=\"2.12.2\"] .btn{--size:3.6rem;align-items:center;border:1px solid #0000;border-radius:var(--button-external-border-radius,var(--button-external-size,var(--size)));color:inherit;cursor:pointer;display:flex;font:600 1.4rem/2rem var(--font-family);justify-content:center;min-height:var(--button-external-size,var(--size));min-width:var(--button-external-size,var(--size));position:relative;transition:color .3s,background .3s,opacity .2s;-webkit-user-select:none;user-select:none}[data-gene-ui-version=\"2.12.2\"] .btn:focus-visible{border-radius:var(--button-external-border-radius,var(--button-external-size,var(--size)));outline:.2rem var(--hero) solid}[data-gene-ui-version=\"2.12.2\"] .btn:disabled{opacity:.5;pointer-events:none}[data-gene-ui-version=\"2.12.2\"] .btn.s-medium{--size:3.2rem;font-size:1.2rem}[data-gene-ui-version=\"2.12.2\"] .btn.s-big{--size:4.2rem}[data-gene-ui-version=\"2.12.2\"] .btn.cr-smooth{border-radius:var(--button-external-border-radius,.4rem)}[data-gene-ui-version=\"2.12.2\"] .btn>*+*{margin:0 0 0 .4rem}html[dir=rtl] .btn>*+*{margin:0 .4rem 0 0}[data-gene-ui-version=\"2.12.2\"] .btn.id-end{flex-direction:row-reverse}[data-gene-ui-version=\"2.12.2\"] .btn.id-end>*+*{margin:0 .7rem 0 0}html[dir=rtl] .btn.id-end>*+*{margin:0 0 0 .7rem}[data-gene-ui-version=\"2.12.2\"] .btn:not(.c-icon){padding:0 2rem}[data-gene-ui-version=\"2.12.2\"] .btn:not(.c-icon).f-content-size{padding:0 1.3rem}[data-gene-ui-version=\"2.12.2\"] .btn:not(.c-icon).f-default{min-width:10rem}[data-gene-ui-version=\"2.12.2\"] .btn:not(.c-icon).f-full-width{width:100%}[data-gene-ui-version=\"2.12.2\"] .btn:not(.c-icon).loading-padding{padding:0 .6rem}[data-gene-ui-version=\"2.12.2\"] .btn.c-confirm{--hero:var(--confirm);--hero-sc:var(--confirm-sc);--hero-hover:var(--confirm-hover)}[data-gene-ui-version=\"2.12.2\"] .btn.c-danger{--hero:var(--danger);--hero-sc:var(--danger-sc);--hero-hover:var(--danger-hover)}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-outline{border-color:var(--hero);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-outline:hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-outline:active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-minimal:not(.c-default){color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-minimal:hover{background:rgba(var(--background-sc-rgb),.03)}}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-minimal.active{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-grayscale:not(:disabled){background:rgba(var(--background-sc-rgb),.01)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-grayscale:not(:disabled):hover{background:rgba(var(--background-sc-rgb),.03)}}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-grayscale:not(:disabled).active{background:rgba(var(--background-sc-rgb),.03)}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-grayscale:not(.c-default){color:var(--hero)}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-clean:not(.c-default){color:rgba(var(--background-sc-rgb),.6)}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-clean:not(:disabled){background:rgba(var(--hero-rgb),.1);color:var(--hero)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-clean:not(:disabled):hover{background:var(--hero);color:var(--hero-sc)}}[data-gene-ui-version=\"2.12.2\"] .btn:not(.active).a-clean:not(:disabled).active{background:var(--hero);color:var(--hero-sc)}[data-gene-ui-version=\"2.12.2\"] .btn:not(.a-grayscale).with-shadow{box-shadow:0 .2rem .4rem 0 #0000001a}[data-gene-ui-version=\"2.12.2\"] .btn.a-grayscale:not(:disabled){box-shadow:0 1px 0 0 #00000029}[data-gene-ui-version=\"2.12.2\"] .btn.a-default,[data-gene-ui-version=\"2.12.2\"] .btn.active{background:var(--hero);color:var(--hero-sc)}@media (hover:hover){[data-gene-ui-version=\"2.12.2\"] .btn.a-default:hover,[data-gene-ui-version=\"2.12.2\"] .btn.active:hover{background:var(--hero-hover)}}[data-gene-ui-version=\"2.12.2\"] .btn.loading-state>:not(.btn-loader-holder){color:#0000!important}[data-gene-ui-version=\"2.12.2\"] .btn .btn-loader-holder{left:50%;margin:0;position:absolute;top:50%;transform:translate(-50%,-50%)}";
+styleInject(css_248z);
+
+const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    appearance,
+    size,
+    flexibility,
+    color,
+    itemsDirection,
+    cornerRadius,
+    icon,
+    active,
+    className,
+    withShadow,
+    loading,
+    ariaLabel,
+    ...restProps
+  } = _ref;
+  const noChildren = !children && children !== 0;
+  return /*#__PURE__*/React__default.createElement("button", _extends({
+    className: classnames('btn', className, "a-".concat(appearance), "s-".concat(size), "f-".concat(flexibility), "c-".concat(color), "id-".concat(itemsDirection), "cr-".concat(cornerRadius), {
+      active,
+      'c-icon': !!icon && noChildren,
+      'with-shadow': withShadow,
+      'loading-padding': !noChildren && !icon && loading
+    }),
+    ref: ref
+  }, ariaLabel ? {
+    'aria-label': ariaLabel
+  } : {}, restProps), icon && (loading ? /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-loader"
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    type: icon
+  })), !noChildren && (!icon && loading ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-loader"
+  }), /*#__PURE__*/React__default.createElement("span", null, children)) : /*#__PURE__*/React__default.createElement("span", {
+    className: "ellipsis-text"
+  }, children)), loading && noChildren && /*#__PURE__*/React__default.createElement("div", {
+    className: "btn-loader-holder"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    type: "bc-icon-loader"
+  })));
+});
+const ButtonConfig = {
+  appearance: ['default', 'outline', 'minimal', 'grayscale', 'clean'],
+  size: ['default', 'medium', 'big'],
+  color: ['primary', 'confirm', 'danger', 'default'],
+  flexibility: ['default', 'content-size', 'full-width'],
+  itemsDirection: ['start', 'end'],
+  cornerRadius: ['round', 'smooth']
+};
+Button.propTypes = {
+  /**
+   * Any valid React node
+   */
+  children: PropTypes.node,
+  /**
+   * The way how the Button should be displayed
+   */
+  appearance: PropTypes.oneOf(ButtonConfig.appearance),
+  /**
+   * Button size
+   */
+  size: PropTypes.oneOf(ButtonConfig.size),
+  /**
+   * How to display inscription in relation to it's parent in Button
+   */
+  flexibility: PropTypes.oneOf(ButtonConfig.flexibility),
+  /**
+   * Button color
+   */
+  color: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(ButtonConfig.color)]),
+  /**
+   * Button children direction either from the start, or from the end
+   */
+  itemsDirection: PropTypes.oneOf(ButtonConfig.itemsDirection),
+  /**
+   * Button corner radius
+   */
+  cornerRadius: PropTypes.oneOf(ButtonConfig.cornerRadius),
+  /**
+   * The property will add an "Icon" as Button child. The valid values can be found in "Icon" atom
+   */
+  icon: PropTypes.string,
+  /**
+   * Button disabled state
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Button active state
+   */
+  active: PropTypes.bool,
+  /**
+   * Adding shadow to button
+   */
+  withShadow: PropTypes.bool,
+  /**
+   * Button additianl className
+   */
+  className: PropTypes.string,
+  /**
+   * Button text transforms to spinner
+   */
+  loading: PropTypes.bool,
+  /**
+   * aria-label for button.
+   */
+  ariaLabel: PropTypes.string
+};
+Button.defaultProps = {
+  appearance: ButtonConfig.appearance[0],
+  size: ButtonConfig.size[0],
+  flexibility: ButtonConfig.flexibility[0],
+  color: ButtonConfig.color[0],
+  itemsDirection: ButtonConfig.itemsDirection[0],
+  cornerRadius: ButtonConfig.cornerRadius[0]
+};
+Button.displayName = 'Button';
+
+export { Button as default };

package/CHANGELOG.md

@@ -1,5 +1,58 @@
 # Changelog
 
+## [2.12.2](https://github.com/softconstruct/gene-ui-components/compare/v2.12.1...v2.12.2) (2024-02-02)
+
+
+### Bug Fixes
+
+* **Dropdown:**  default value falsy case ([f3167e8](https://github.com/softconstruct/gene-ui-components/commit/f3167e8461f07efb6aceda393930eda25057baaf))
+* **Dropdown:** fix value dynamicly changing on clearable state" ([fa4f53b](https://github.com/softconstruct/gene-ui-components/commit/fa4f53b7d9806df655382532cbe8c8f8ef942fa6))
+* **ExtendedInput:** focus event logic ([#56](https://github.com/softconstruct/gene-ui-components/issues/56)) ([681c9e3](https://github.com/softconstruct/gene-ui-components/commit/681c9e3990a2bf70575903c376427b4226784290))
+* **MapChart:** fix lint error ([32695c6](https://github.com/softconstruct/gene-ui-components/commit/32695c6748a24bc90c577612fd6389b2da9ef33f))
+* **PopoverV2:** move to up container parent ref definition ([#58](https://github.com/softconstruct/gene-ui-components/issues/58)) ([5d73395](https://github.com/softconstruct/gene-ui-components/commit/5d73395a4f33c3d10677314460e32e8972623250))
+* **ValidatableNumberInput:** clear bad values of input ([#59](https://github.com/softconstruct/gene-ui-components/issues/59)) ([f3a10a9](https://github.com/softconstruct/gene-ui-components/commit/f3a10a965c1af2f1228d00efc8f64f20881bb4d1))
+* **Widget:** add support headerActions prop functional for compact type ([#57](https://github.com/softconstruct/gene-ui-components/issues/57)) ([4210d35](https://github.com/softconstruct/gene-ui-components/commit/4210d3539a8fc45444b61970eb46a9235496a1ce))
+
+# [2.12.1](https://github.com/softconstruct/gene-ui-components/compare/v2.11.2...v2.12.1) (2024-01-11)
+
+### Bug Fixes
+
+-   **CommitMessage:** disable scope lowercase functional in the git-cz package
+    ([#46](https://github.com/softconstruct/gene-ui-components/issues/46))
+    ([120bebe](https://github.com/softconstruct/gene-ui-components/commit/120bebe883430c04ebd8b0aea09408809a3f8e3a))
+-   **Component-stage:** fix and improve component-stage
+    ([b244edb](https://github.com/softconstruct/gene-ui-components/commit/b244edbdaca3d1d3415df8c59a15cef51d7dbbbe))
+-   **DatePickerInput:** close picker popover after value selection
+    ([#48](https://github.com/softconstruct/gene-ui-components/issues/48))
+    ([e58be53](https://github.com/softconstruct/gene-ui-components/commit/e58be53709630eb00cacf089c767c91aa3021675))
+-   **Dropdown:** input truncated text blinking fix
+    ([#37](https://github.com/softconstruct/gene-ui-components/issues/37))
+    ([19f4e54](https://github.com/softconstruct/gene-ui-components/commit/19f4e54bb3fb37d6acefd7e55480ea82dba9c5a7))
+-   **Dropdown:** open by tab key will autofocus to searhc input
+    ([d2a130b](https://github.com/softconstruct/gene-ui-components/commit/d2a130bbf65dfa8b47337fd4df8f91ec44ec7efa))
+-   **Dropdown:** remove Dropdown search input autofocus
+    ([be5b4e6](https://github.com/softconstruct/gene-ui-components/commit/be5b4e6802a31545f6fca86b2bfcd1959e1cf003))
+-   **Module:** remove undefined modules exports from the library entry point
+    ([c2d32c2](https://github.com/softconstruct/gene-ui-components/commit/c2d32c2c68924477957f8016c79a67522d623b9c))
+-   **Stories:** import and export changes
+    ([896ce5c](https://github.com/softconstruct/gene-ui-components/commit/896ce5c2484c03a5fd020991f0c5757e0203dae1))
+-   **Theming:** dark and light mode fix
+    ([a7c3c24](https://github.com/softconstruct/gene-ui-components/commit/a7c3c2461614e6f810d67eee13e0b50ec6de969e))
+-   **Version-select:** version select container fix
+    ([e57c363](https://github.com/softconstruct/gene-ui-components/commit/e57c3635ee8d0d3422c9db82f6bb6d151e040a10))
+
+### Features
+
+-   **Addon-jest:** add test addon to storybook
+    ([d3849b2](https://github.com/softconstruct/gene-ui-components/commit/d3849b20375b17d803e3bf6ee3163352bce84d81))
+-   **Table:** add copied tooltip text for table col element
+    ([#36](https://github.com/softconstruct/gene-ui-components/issues/36))
+    ([356b35a](https://github.com/softconstruct/gene-ui-components/commit/356b35ae66b419bea53b4826a8df6197ecfa3074))
+-   **Test:** add jest, enzyme and setup testing env
+    ([c91f9d9](https://github.com/softconstruct/gene-ui-components/commit/c91f9d94949ea61ec246760e8588e339fe2b2188))
+-   **Typescript:** add ts support, remove some redundant modules, change tree shake logic
+    ([58838da](https://github.com/softconstruct/gene-ui-components/commit/58838da2b3c2ad8effaf64649d97cbb4444dfd44))
+
 # 2.11.2 (2023-11-25)
 
 ### Bug Fixes