@geneui/components 2.15.0-canary-2c19c64-17052024 → 2.15.0-canary-25f0015-20052024

package/DatePickerInput/index.js

@@ -477,7 +477,7 @@ function DateRangePickerInput(_ref) {
       const end = dayjsWithPlugins(endDate);
       setStartDate(start);
       setEndDate(end);
-      if (!withTime) {
+      if (!withTime && !isMobile) {
         inputRef.current.blur();
         setPopoverState(false);
       }

package/InteractiveWidget/index.js

@@ -0,0 +1,81 @@
+import { _ as __rest } from '../tslib.es6-f211516f.js';
+import React__default, { useRef } from 'react';
+import { c as classnames } from '../index-031ff73c.js';
+import Icon from '../Icon/index.js';
+import Switcher from '../Switcher/index.js';
+import Tag from '../Tag/index.js';
+import Tooltip from '../Tooltip/index.js';
+import 'prop-types';
+import '../dateValidation-67caec66.js';
+import 'react-dom';
+import '../configs-1fb8eed2.js';
+import { u as useEllipsisDetection } from '../useEllipsisDetection-4d997d5d.js';
+import { s as styleInject } from '../style-inject.es-746bb8ed.js';
+import '../_rollupPluginBabelHelpers-e8fb2e5c.js';
+import '../index-a0e4e333.js';
+import '../hooks/useKeyDown.js';
+import '../checkboxRadioSwitcher-5b69d7bd.js';
+import '../guid-8ddf77b3.js';
+import '../_commonjsHelpers-24198af3.js';
+import '../Popover-f4d1cac0.js';
+import '../hooks/useDeviceType.js';
+import '../hooks/useWindowSize.js';
+import '../hooks/useDebounce.js';
+import '../GeneUIProvider/index.js';
+
+const InteractiveWidgetIcon = ({ children, iconColor, appearance, iconBackground }) => {
+    return (React__default.createElement("div", { className: `widgetIcon widgetIcon-${appearance}`, style: iconColor ? { '--icon-color': iconColor, filter: 'alpha(opacity=60)' } : {} },
+        iconBackground && React__default.createElement("div", { className: "widgetIcon__background" }),
+        typeof children === 'string' ? (
+        // @ts-ignore
+        React__default.createElement(Icon, { type: children, className: classnames({ widgetIcon__iconDefault: appearance === 'default' }) })) : (children)));
+};
+
+var css_248z = "[data-gene-ui-version=\"2.14.0\"] .interactiveWidget{background:var(--background);border-radius:1.6rem;box-sizing:border-box;display:flex;height:10.4rem;min-width:1px;padding:2rem;width:100%}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget:focus-visible{outline:.2rem var(--hero) solid}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget-border{border:.2rem solid rgba(var(--background-sc-rgb),.05)}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget-border:hover{border:.2rem solid var(--hero)}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget-pointer{cursor:pointer}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget-pointer:hover{background:rgba(var(--hero-rgb),.1)}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget-disabled{opacity:.6;pointer-events:none}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__wrapper{align-items:center;display:flex;height:100%;min-width:0;width:100%}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__content{display:flex;flex-direction:column;height:100%;justify-content:flex-start;min-width:0;overflow:hidden;width:100%}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__header{align-items:center;display:flex;margin-bottom:.6rem;min-width:0;width:100%}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__titleWrapper{display:flex;flex:1;max-width:100%;min-width:0;padding-inline-end:1.6rem}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__title{font-size:1.6rem;font-weight:700}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__infoIcon{margin-inline-start:.4rem}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__components{align-items:center;display:flex;flex:0 0 auto}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__switcher{margin-inline-start:1.6rem}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget__description{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;font-size:1.2rem;line-height:1.6rem;opacity:.7;overflow:hidden;text-overflow:ellipsis}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget .widgetIcon{fill:var(--icon-color);align-items:center;color:var(--icon-color);display:flex;flex:0 0 auto;justify-content:center;margin-inline-end:2rem;position:relative;z-index:1}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget .widgetIcon-default{box-sizing:border-box;height:6.4rem;padding:1rem;width:6.4rem}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget .widgetIcon-compact{height:2.4rem;width:2.4rem}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget .widgetIcon-compact .widgetIcon__background{display:none}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget .widgetIcon__iconDefault{font-size:4rem}[data-gene-ui-version=\"2.14.0\"] .interactiveWidget .widgetIcon__background{background:var(--icon-color);border-radius:100%;height:100%;left:0;opacity:.07;position:absolute;top:0;width:100%;z-index:-1}";
+styleInject(css_248z);
+
+const InteractiveWidget = (_a) => {
+    var { className, withBorder = true, onClick, disabled = false, icon, title, appearance = 'default', iconColor = 'var(--background-sc)', tagName, tagColor, switcherProps, titleInfo, description, iconBackground = true } = _a, restProps = __rest(_a, ["className", "withBorder", "onClick", "disabled", "icon", "title", "appearance", "iconColor", "tagName", "tagColor", "switcherProps", "titleInfo", "description", "iconBackground"]);
+    const titleRef = useRef(null);
+    const descriptionRef = useRef(null);
+    const isTitleTruncated = useEllipsisDetection(titleRef);
+    const isDescriptionTruncated = useEllipsisDetection(descriptionRef);
+    return (React__default.createElement("div", Object.assign({ className: classnames('interactiveWidget', {
+            'interactiveWidget-border': withBorder,
+            'interactiveWidget-pointer': onClick,
+            'interactiveWidget-disabled': disabled
+        }, className), tabIndex: 0, onClick: (event) => {
+            onClick && onClick(event);
+        }, onKeyDown: (event) => {
+            if (disabled)
+                return;
+            onClick && onClick(event);
+        } }, restProps),
+        React__default.createElement("div", { className: 'interactiveWidget__wrapper' },
+            icon && appearance === 'default' && (React__default.createElement(InteractiveWidgetIcon, { children: icon, appearance: appearance, iconColor: iconColor, iconBackground: iconBackground })),
+            React__default.createElement("div", { className: 'interactiveWidget__content' },
+                React__default.createElement("div", { className: `interactiveWidget__header interactiveWidget__header-${appearance}` },
+                    icon && appearance === 'compact' && (React__default.createElement(InteractiveWidgetIcon, { children: icon, appearance: appearance, iconColor: iconColor })),
+                    React__default.createElement("div", { className: "interactiveWidget__titleWrapper" },
+                        title && (
+                        // @ts-ignore
+                        React__default.createElement(Tooltip, { text: title, isVisible: isTitleTruncated },
+                            React__default.createElement("h3", { className: 'interactiveWidget__title ellipsis-text', ref: titleRef }, title))),
+                        titleInfo && title && (
+                        // @ts-ignore
+                        React__default.createElement(Tooltip, { text: titleInfo },
+                            React__default.createElement(Icon, { className: 'interactiveWidget__infoIcon', type: 'bc-icon-info-48' })))),
+                    (switcherProps || tagName) && (React__default.createElement("div", { className: "interactiveWidget__components" },
+                        tagName && (
+                        // @ts-ignore
+                        React__default.createElement(Tag, { name: tagName, color: tagColor, appearance: "outline", size: "small", cornerRadius: 'smooth-radius' })),
+                        switcherProps && (
+                        // @ts-ignore
+                        React__default.createElement(Switcher, Object.assign({ className: 'interactiveWidget__switcher', changeOnEnter: true }, switcherProps)))))),
+                description && (
+                //@ts-ignore
+                React__default.createElement(Tooltip, { text: description, isVisible: isDescriptionTruncated },
+                    React__default.createElement("p", { className: "interactiveWidget__description", ref: descriptionRef }, description)))))));
+};
+
+export { InteractiveWidget as default };

package/Range/index.js

@@ -2,7 +2,7 @@ import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useState, useRef, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { c as classnames } from '../index-031ff73c.js';
-import { c as createSliderWithTooltip, R as Range } from '../rangeAndSlider-740a236c.js';
+import { c as createSliderWithTooltip, R as Range } from '../rangeAndSlider-693a3d41.js';
 import useWidth from '../hooks/useWidth.js';
 import '../dateValidation-67caec66.js';
 import 'react-dom';

package/Slider/index.js

@@ -2,7 +2,7 @@ import { _ as _extends } from '../_rollupPluginBabelHelpers-e8fb2e5c.js';
 import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { c as classnames } from '../index-031ff73c.js';
-import { c as createSliderWithTooltip, S as Slider } from '../rangeAndSlider-740a236c.js';
+import { c as createSliderWithTooltip, S as Slider } from '../rangeAndSlider-693a3d41.js';
 import useWidth from '../hooks/useWidth.js';
 import '../dateValidation-67caec66.js';
 import 'react-dom';

package/index.d.ts

@@ -66,6 +66,7 @@ export { default as Textarea } from './lib/molecules/Textarea';
 export { default as Counter } from './lib/molecules/Counter';
 export { default as AdvancedSearch } from './lib/molecules/AdvancedSearch';
 export { default as Copy } from './lib/molecules/Copy';
+export { default as InteractiveWidget } from './lib/molecules/InteractiveWidget';
 export { default as FormableMultiSelectDropdown } from './lib/organisms/Form/Formables/FormableMultiSelectDropdown';
 export { default as FormableNumberInput } from './lib/organisms/Form/Formables/FormableNumberInput';
 export { default as FormableDatePicker } from './lib/organisms/Form/Formables/FormableDatePicker';

package/index.js

@@ -75,6 +75,7 @@ export { default as Textarea } from './Textarea/index.js';
 export { default as Counter } from './Counter/index.js';
 export { default as AdvancedSearch } from './AdvancedSearch/index.js';
 export { default as Copy } from './Copy/index.js';
+export { default as InteractiveWidget } from './InteractiveWidget/index.js';
 export { default as FormableMultiSelectDropdown } from './FormableMultiSelectDropdown/index.js';
 export { default as FormableNumberInput } from './FormableNumberInput/index.js';
 export { default as FormableDatePicker } from './FormableDatePicker/index.js';
@@ -139,7 +140,7 @@ import './localization-4ba17032.js';
 import './Popover-f4d1cac0.js';
 import './index-122432cd.js';
 import './debounce-4419bc2f.js';
-import './rangeAndSlider-740a236c.js';
+import './rangeAndSlider-693a3d41.js';
 import './index-45eafea6.js';
 import './react-lifecycles-compat.es-6e1f3768.js';
 import './SuggestionList/index.js';

package/lib/molecules/InteractiveWidget/InteractiveWidget.d.ts

@@ -0,0 +1,70 @@
+import { FC, MouseEvent, KeyboardEvent, ReactNode } from 'react';
+import Switcher from '../../atoms/Switcher';
+import { IHTMLDivElementAttributes } from '../../../types';
+import './InteractiveWidget.scss';
+interface IInteractiveWidgetProps extends IHTMLDivElementAttributes {
+    /**
+     * Show/Hide border.
+     */
+    withBorder?: boolean;
+    /**
+     * Additional className will be applied on the wrapper element.
+     */
+    className?: string;
+    /**
+     * Fires an event on Widget click `((event: Event) => void)`.
+     */
+    onClick?: (event: MouseEvent | KeyboardEvent) => void;
+    /**
+     * Disabled state.
+     */
+    disabled?: boolean;
+    /**
+     * The `icon` prop determines the representation of an icon within the component.
+     * It can be a string, such as a URL for an SVG image, or a React component for example <Icon> component.
+     */
+    icon?: ReactNode;
+    /**
+     * This property controls the size of the icon, influencing the appearance of the component.<br>
+     * Possible values: `'default' | 'compact'`
+     */
+    appearance?: 'default' | 'compact';
+    /**
+     * The prop determines the color of the icon in the component.
+     * It should be a string representing a valid CSS color value.
+     */
+    iconColor?: string;
+    /**
+     * Label for tag component.
+     * Adding props you will add the `<Tag/>` component.
+     */
+    tagName?: string;
+    /**
+     * Color value for tag component.
+     */
+    tagColor?: string;
+    /**
+     * Props for `<Switcher/>` component (see `<Switcher/>` component documentation).
+     * Adding props you wil add the component.
+     */
+    switcherProps?: typeof Switcher.propTypes;
+    /**
+     * The main descriptive text or title for the component.
+     */
+    title?: string;
+    /**
+     * Additional information or tooltip string that appears when hovering over the info icon next to the title.
+     * If not provided, the info icon will not be displayed.
+     */
+    titleInfo?: string;
+    /**
+     * Description paragraph.
+     */
+    description?: string;
+    /**
+     * Icon background color for default appearance.
+     */
+    iconBackground?: boolean;
+}
+declare const InteractiveWidget: FC<IInteractiveWidgetProps>;
+export { IInteractiveWidgetProps, InteractiveWidget as default };

package/lib/molecules/InteractiveWidget/InteractiveWidgetIcon.d.ts

@@ -0,0 +1,8 @@
+import { FC, PropsWithChildren } from 'react';
+interface IInteractiveWidgetIconProps extends PropsWithChildren {
+    appearance?: 'default' | 'compact';
+    iconColor?: string;
+    iconBackground?: boolean;
+}
+declare const InteractiveWidgetIcon: FC<IInteractiveWidgetIconProps>;
+export default InteractiveWidgetIcon;

package/lib/molecules/InteractiveWidget/index.d.ts

@@ -0,0 +1 @@
+export { IInteractiveWidgetProps, default as default } from './InteractiveWidget';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@geneui/components",
     "description": "The Gene UI components library designed for BI tools",
-    "version": "2.15.0-canary-2c19c64-17052024",
+    "version": "2.15.0-canary-25f0015-20052024",
     "author": "SoftConstruct",
     "homepage": "https://github.com/softconstruct/gene-ui-components#readme",
     "repository": {

package/{rangeAndSlider-740a236c.js → rangeAndSlider-693a3d41.js}

@@ -360,16 +360,24 @@ var _uid = function (key) {
   return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id$1 + px).toString(36));
 };
 
-var shared$1 = _sharedExports('keys');
-var uid$2 = _uid;
-var _sharedKey = function (key) {
-  return shared$1[key] || (shared$1[key] = uid$2(key));
-};
+var _sharedKey;
+var hasRequired_sharedKey;
+
+function require_sharedKey () {
+	if (hasRequired_sharedKey) return _sharedKey;
+	hasRequired_sharedKey = 1;
+	var shared = _sharedExports('keys');
+	var uid = _uid;
+	_sharedKey = function (key) {
+	  return shared[key] || (shared[key] = uid(key));
+	};
+	return _sharedKey;
+}
 
 var has$5 = _has;
 var toIObject$5 = _toIobject;
 var arrayIndexOf = _arrayIncludes(false);
-var IE_PROTO$1 = _sharedKey('IE_PROTO');
+var IE_PROTO$1 = require_sharedKey()('IE_PROTO');
 
 var _objectKeysInternal = function (object, names) {
   var O = toIObject$5(object);
@@ -633,7 +641,7 @@ function require_objectCreate () {
 	var anObject = _anObject;
 	var dPs = require_objectDps();
 	var enumBugKeys = require_enumBugKeys();
-	var IE_PROTO = _sharedKey('IE_PROTO');
+	var IE_PROTO = require_sharedKey()('IE_PROTO');
 	var Empty = function () { /* empty */ };
 	var PROTOTYPE = 'prototype';
 
@@ -715,7 +723,7 @@ var _iterCreate = function (Constructor, NAME, next) {
 // 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O)
 var has$3 = _has;
 var toObject$3 = _toObject;
-var IE_PROTO = _sharedKey('IE_PROTO');
+var IE_PROTO = require_sharedKey()('IE_PROTO');
 var ObjectProto$1 = Object.prototype;
 
 var _objectGpo = Object.getPrototypeOf || function (O) {

package/types/index.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export interface IHTMLDivElementAttributes extends Omit<HTMLAttributes<HTMLDivElement>, 'onKeyDown'> {
+}