colibri-ui 0.8.64 → 0.8.66

package/Badge/index.js

@@ -34,8 +34,8 @@ var Badge = function Badge(_a) {
   if (invisibleProp == null && (content === 0 && !showZero || content == null)) {
     invisible = true;
   }
-  var displayValue = content ? content > max ? "".concat(max, "+") : content : undefined;
-  return /*#__PURE__*/React__default.default.createElement(index.BadgeControl, Object.assign({}, props), children, displayValue && (/*#__PURE__*/React__default.default.createElement("span", {
+  var displayValue = content == null ? undefined : content > max ? "".concat(max, "+") : content;
+  return /*#__PURE__*/React__default.default.createElement(index.BadgeControl, Object.assign({}, props), children, displayValue !== undefined && (/*#__PURE__*/React__default.default.createElement("span", {
     className: clsx__default.default(styles__default.default.root, _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["root_direction_".concat(direction)], Boolean(direction)), styles__default.default["root_invisible"], Boolean(invisible)), className),
     "data-testid": "badge",
     style: {

package/Dropdown/index.js

@@ -23,6 +23,8 @@ var Dropdown = function Dropdown(_ref) {
     zIndex = _ref.zIndex,
     fontSize = _ref.fontSize,
     disabled = _ref.disabled,
+    _ref$defaultVisible = _ref.defaultVisible,
+    defaultVisible = _ref$defaultVisible === void 0 ? false : _ref$defaultVisible,
     onVisibleChange = _ref.onVisibleChange,
     overlay = _ref.overlay,
     _ref$placement = _ref.placement,
@@ -31,8 +33,7 @@ var Dropdown = function Dropdown(_ref) {
     strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? ["hover"] : _ref$trigger,
-    _ref$visible = _ref.visible,
-    visibleProp = _ref$visible === void 0 ? true : _ref$visible,
+    visibleProp = _ref.visible,
     _ref$preventOverflow = _ref.preventOverflow,
     preventOverflow = _ref$preventOverflow === void 0 ? false : _ref$preventOverflow,
     _ref$preventAutoClose = _ref.preventAutoClose,
@@ -42,14 +43,23 @@ var Dropdown = function Dropdown(_ref) {
     _ref$samewidth = _ref.samewidth,
     samewidth = _ref$samewidth === void 0 ? false : _ref$samewidth;
   var _a;
-  var _useState = React.useState(false),
+  var _useState = React.useState(defaultVisible),
     _useState2 = _slicedToArray__default.default(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var isVisible = visibleProp && visible && !disabled;
+    internalVisible = _useState2[0],
+    setInternalVisible = _useState2[1];
+  var isControlled = visibleProp !== undefined;
+  var visible = isControlled ? visibleProp : internalVisible;
+  var isVisible = visible && !disabled;
+  var setOpen = React.useCallback(function (nextVisible) {
+    if (disabled && nextVisible) return;
+    if (!isControlled) {
+      setInternalVisible(nextVisible);
+    }
+    onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible);
+  }, [disabled, isControlled, onVisibleChange]);
   var _useFloating = react.useFloating({
       open: isVisible,
-      onOpenChange: setVisible,
+      onOpenChange: setOpen,
       placement: placement,
       strategy: strategy,
       whileElementsMounted: react.autoUpdate,
@@ -61,15 +71,17 @@ var Dropdown = function Dropdown(_ref) {
     update = _useFloating.update,
     finalPlacement = _useFloating.placement;
   var hover = react.useHover(context, {
-    enabled: trigger.includes("hover")
+    enabled: !disabled && trigger.includes("hover")
   });
   var click = react.useClick(context, {
-    enabled: trigger.includes("click")
+    enabled: !disabled && trigger.includes("click")
   });
   var focus = react.useFocus(context, {
-    enabled: trigger.includes("focus")
+    enabled: !disabled && trigger.includes("focus")
+  });
+  var dismiss = react.useDismiss(context, {
+    outsidePress: false
   });
-  var dismiss = react.useDismiss(context);
   var role = react.useRole(context, {
     role: "menu"
   });
@@ -84,12 +96,9 @@ var Dropdown = function Dropdown(_ref) {
   var onClickOverlay = React.useCallback(function (event) {
     event.stopPropagation();
     if (!preventAutoClose) {
-      setVisible(false);
+      setOpen(false);
     }
-  }, [preventAutoClose]);
-  React.useEffect(function () {
-    if (onVisibleChange) onVisibleChange(visible);
-  }, [onVisibleChange, visible]);
+  }, [preventAutoClose, setOpen]);
   React.useEffect(function () {
     if (update) update();
   }, [update, visible]);
@@ -98,7 +107,7 @@ var Dropdown = function Dropdown(_ref) {
     tabIndex: 0
   }, getReferenceProps(reference.props))), isVisible && (/*#__PURE__*/React__default.default.createElement(react.FloatingPortal, null, /*#__PURE__*/React__default.default.createElement(index.default, {
     onClick: function onClick() {
-      return setVisible(false);
+      return setOpen(false);
     }
   }, /*#__PURE__*/React__default.default.createElement("div", Object.assign({
     ref: refs.setFloating,

package/Dropdown/index.props.d.ts

@@ -2,17 +2,18 @@ import type { ReactNode } from "react";
 import type { Placement, Strategy } from "@floating-ui/react";
 export type Trigger = "click" | "hover" | "focus";
 export type DropdownProps = {
-    zIndex?: number;
-    fontSize?: number;
+    defaultVisible?: boolean;
     disabled?: boolean;
+    flip?: boolean;
+    fontSize?: number;
     onVisibleChange?: (visible: boolean) => void;
     overlay: ReactNode;
     placement?: Placement;
-    strategy?: Strategy;
-    trigger?: [Trigger, ...Trigger[]];
-    visible?: boolean;
     preventOverflow?: boolean;
     preventAutoClose?: boolean;
-    flip?: boolean;
     samewidth?: boolean;
+    strategy?: Strategy;
+    trigger?: [Trigger, ...Trigger[]];
+    visible?: boolean;
+    zIndex?: number;
 };

package/Image/index.js

@@ -51,13 +51,13 @@ var Image = function Image(_a) {
     setFailed(true);
   }, []);
   return /*#__PURE__*/React__default.default.createElement("picture", {
-    ref: ref,
     className: styles__default.default.root
   }, !!sources.length && sources.map(function (source, index) {
     return /*#__PURE__*/React__default.default.createElement("source", Object.assign({
       key: "item-".concat(index)
     }, source));
   }), /*#__PURE__*/React__default.default.createElement("img", Object.assign({
+    ref: ref,
     alt: alt,
     style: sizeAttrs,
     className: clsx__default.default(className),

package/InputRadio/InputRadio.module.css

@@ -1,5 +1,6 @@
 .label {
   display: inline-block;
+  position: relative;
   vertical-align: baseline;
 }
 

package/TimeSelect/index.js

@@ -14,6 +14,7 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var TimeSelect = function TimeSelect(_ref) {
   var value = _ref.value,
     name = _ref.name,
+    className = _ref.className,
     currentDate = _ref.currentDate,
     selectedDate = _ref.selectedDate,
     label = _ref.label,
@@ -24,7 +25,11 @@ var TimeSelect = function TimeSelect(_ref) {
     allowedTimeRange = _ref.allowedTimeRange,
     placeholder = _ref.placeholder,
     fullWidth = _ref.fullWidth,
+    customInputRoot = _ref.customInputRoot,
+    fontSize = _ref.fontSize,
     required = _ref.required,
+    size = _ref.size,
+    zIndex = _ref.zIndex,
     hasError = _ref.hasError,
     hint = _ref.hint;
   var baseOptions = React.useMemo(function () {
@@ -44,17 +49,22 @@ var TimeSelect = function TimeSelect(_ref) {
         disabled: isDisabled
       });
     });
-  }, [baseOptions, currentDate, selectedDate, allowedTimeRange]);
+  }, [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
   return /*#__PURE__*/React__default.default.createElement(index$1.default, {
+    className: className,
+    customInputRoot: customInputRoot,
+    fontSize: fontSize,
     fullWidth: fullWidth,
     name: name,
     value: value,
     required: required,
+    size: size,
     placeholder: placeholder,
     label: label,
     options: options,
     onChange: onChange,
     disabled: disabled,
+    zIndex: zIndex,
     hasError: hasError,
     hint: hint
   });

package/esm/Badge/index.js

@@ -23,8 +23,8 @@ var Badge = function Badge(_a) {
   if (invisibleProp == null && (content === 0 && !showZero || content == null)) {
     invisible = true;
   }
-  var displayValue = content ? content > max ? "".concat(max, "+") : content : undefined;
-  return /*#__PURE__*/React__default.createElement(BadgeControl, Object.assign({}, props), children, displayValue && (/*#__PURE__*/React__default.createElement("span", {
+  var displayValue = content == null ? undefined : content > max ? "".concat(max, "+") : content;
+  return /*#__PURE__*/React__default.createElement(BadgeControl, Object.assign({}, props), children, displayValue !== undefined && (/*#__PURE__*/React__default.createElement("span", {
     className: clsx(styles.root, _defineProperty(_defineProperty({}, styles["root_direction_".concat(direction)], Boolean(direction)), styles["root_invisible"], Boolean(invisible)), className),
     "data-testid": "badge",
     style: {

package/esm/Dropdown/index.js

@@ -1,8 +1,8 @@
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React__default, { useState, useMemo, Children, useCallback, useEffect } from 'react';
+import React__default, { useState, useCallback, useMemo, Children, useEffect } from 'react';
 import clsx from 'clsx';
-import { useFloating, offset, autoUpdate, flip, shift, useHover, useClick, useFocus, useDismiss, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
+import { useFloating, autoUpdate, offset, flip, shift, useHover, useClick, useFocus, useDismiss, useRole, useInteractions, FloatingPortal } from '@floating-ui/react';
 import ClickOutside from '../ClickOutside/index.js';
 import styles from './Dropdown.module.css';
 
@@ -11,6 +11,8 @@ var Dropdown = function Dropdown(_ref) {
     zIndex = _ref.zIndex,
     fontSize = _ref.fontSize,
     disabled = _ref.disabled,
+    _ref$defaultVisible = _ref.defaultVisible,
+    defaultVisible = _ref$defaultVisible === void 0 ? false : _ref$defaultVisible,
     onVisibleChange = _ref.onVisibleChange,
     overlay = _ref.overlay,
     _ref$placement = _ref.placement,
@@ -19,8 +21,7 @@ var Dropdown = function Dropdown(_ref) {
     strategy = _ref$strategy === void 0 ? "absolute" : _ref$strategy,
     _ref$trigger = _ref.trigger,
     trigger = _ref$trigger === void 0 ? ["hover"] : _ref$trigger,
-    _ref$visible = _ref.visible,
-    visibleProp = _ref$visible === void 0 ? true : _ref$visible,
+    visibleProp = _ref.visible,
     _ref$preventOverflow = _ref.preventOverflow,
     preventOverflow = _ref$preventOverflow === void 0 ? false : _ref$preventOverflow,
     _ref$preventAutoClose = _ref.preventAutoClose,
@@ -30,14 +31,23 @@ var Dropdown = function Dropdown(_ref) {
     _ref$samewidth = _ref.samewidth,
     samewidth = _ref$samewidth === void 0 ? false : _ref$samewidth;
   var _a;
-  var _useState = useState(false),
+  var _useState = useState(defaultVisible),
     _useState2 = _slicedToArray(_useState, 2),
-    visible = _useState2[0],
-    setVisible = _useState2[1];
-  var isVisible = visibleProp && visible && !disabled;
+    internalVisible = _useState2[0],
+    setInternalVisible = _useState2[1];
+  var isControlled = visibleProp !== undefined;
+  var visible = isControlled ? visibleProp : internalVisible;
+  var isVisible = visible && !disabled;
+  var setOpen = useCallback(function (nextVisible) {
+    if (disabled && nextVisible) return;
+    if (!isControlled) {
+      setInternalVisible(nextVisible);
+    }
+    onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(nextVisible);
+  }, [disabled, isControlled, onVisibleChange]);
   var _useFloating = useFloating({
       open: isVisible,
-      onOpenChange: setVisible,
+      onOpenChange: setOpen,
       placement: placement,
       strategy: strategy,
       whileElementsMounted: autoUpdate,
@@ -49,15 +59,17 @@ var Dropdown = function Dropdown(_ref) {
     update = _useFloating.update,
     finalPlacement = _useFloating.placement;
   var hover = useHover(context, {
-    enabled: trigger.includes("hover")
+    enabled: !disabled && trigger.includes("hover")
   });
   var click = useClick(context, {
-    enabled: trigger.includes("click")
+    enabled: !disabled && trigger.includes("click")
   });
   var focus = useFocus(context, {
-    enabled: trigger.includes("focus")
+    enabled: !disabled && trigger.includes("focus")
+  });
+  var dismiss = useDismiss(context, {
+    outsidePress: false
   });
-  var dismiss = useDismiss(context);
   var role = useRole(context, {
     role: "menu"
   });
@@ -72,12 +84,9 @@ var Dropdown = function Dropdown(_ref) {
   var onClickOverlay = useCallback(function (event) {
     event.stopPropagation();
     if (!preventAutoClose) {
-      setVisible(false);
+      setOpen(false);
     }
-  }, [preventAutoClose]);
-  useEffect(function () {
-    if (onVisibleChange) onVisibleChange(visible);
-  }, [onVisibleChange, visible]);
+  }, [preventAutoClose, setOpen]);
   useEffect(function () {
     if (update) update();
   }, [update, visible]);
@@ -86,7 +95,7 @@ var Dropdown = function Dropdown(_ref) {
     tabIndex: 0
   }, getReferenceProps(reference.props))), isVisible && (/*#__PURE__*/React__default.createElement(FloatingPortal, null, /*#__PURE__*/React__default.createElement(ClickOutside, {
     onClick: function onClick() {
-      return setVisible(false);
+      return setOpen(false);
     }
   }, /*#__PURE__*/React__default.createElement("div", Object.assign({
     ref: refs.setFloating,

package/esm/Dropdown/index.props.d.ts

@@ -2,17 +2,18 @@ import type { ReactNode } from "react";
 import type { Placement, Strategy } from "@floating-ui/react";
 export type Trigger = "click" | "hover" | "focus";
 export type DropdownProps = {
-    zIndex?: number;
-    fontSize?: number;
+    defaultVisible?: boolean;
     disabled?: boolean;
+    flip?: boolean;
+    fontSize?: number;
     onVisibleChange?: (visible: boolean) => void;
     overlay: ReactNode;
     placement?: Placement;
-    strategy?: Strategy;
-    trigger?: [Trigger, ...Trigger[]];
-    visible?: boolean;
     preventOverflow?: boolean;
     preventAutoClose?: boolean;
-    flip?: boolean;
     samewidth?: boolean;
+    strategy?: Strategy;
+    trigger?: [Trigger, ...Trigger[]];
+    visible?: boolean;
+    zIndex?: number;
 };

package/esm/Image/index.js

@@ -40,13 +40,13 @@ var Image = function Image(_a) {
     setFailed(true);
   }, []);
   return /*#__PURE__*/React__default.createElement("picture", {
-    ref: ref,
     className: styles.root
   }, !!sources.length && sources.map(function (source, index) {
     return /*#__PURE__*/React__default.createElement("source", Object.assign({
       key: "item-".concat(index)
     }, source));
   }), /*#__PURE__*/React__default.createElement("img", Object.assign({
+    ref: ref,
     alt: alt,
     style: sizeAttrs,
     className: clsx(className),

package/esm/InputRadio/InputRadio.module.css

@@ -1,5 +1,6 @@
 .label {
   display: inline-block;
+  position: relative;
   vertical-align: baseline;
 }
 

package/esm/TimeSelect/index.js

@@ -6,6 +6,7 @@ import OptionLabel from './Label/index.js';
 var TimeSelect = function TimeSelect(_ref) {
   var value = _ref.value,
     name = _ref.name,
+    className = _ref.className,
     currentDate = _ref.currentDate,
     selectedDate = _ref.selectedDate,
     label = _ref.label,
@@ -16,7 +17,11 @@ var TimeSelect = function TimeSelect(_ref) {
     allowedTimeRange = _ref.allowedTimeRange,
     placeholder = _ref.placeholder,
     fullWidth = _ref.fullWidth,
+    customInputRoot = _ref.customInputRoot,
+    fontSize = _ref.fontSize,
     required = _ref.required,
+    size = _ref.size,
+    zIndex = _ref.zIndex,
     hasError = _ref.hasError,
     hint = _ref.hint;
   var baseOptions = useMemo(function () {
@@ -36,17 +41,22 @@ var TimeSelect = function TimeSelect(_ref) {
         disabled: isDisabled
       });
     });
-  }, [baseOptions, currentDate, selectedDate, allowedTimeRange]);
+  }, [baseOptions, currentDate, selectedDate, allowedTimeRange, interval]);
   return /*#__PURE__*/React__default.createElement(Select, {
+    className: className,
+    customInputRoot: customInputRoot,
+    fontSize: fontSize,
     fullWidth: fullWidth,
     name: name,
     value: value,
     required: required,
+    size: size,
     placeholder: placeholder,
     label: label,
     options: options,
     onChange: onChange,
     disabled: disabled,
+    zIndex: zIndex,
     hasError: hasError,
     hint: hint
   });

package/index.js

@@ -27,12 +27,12 @@ var index$m = require('./Separator/index.js');
 var index$n = require('./Skeleton/index.js');
 var index$o = require('./Status/index.js');
 var index$p = require('./Switch/index.js');
-var index$q = require('./TabsMenu/index.js');
-var index$r = require('./TabsPanels/index.js');
-var index$s = require('./TextArea/index.js');
-var index$t = require('./Theme/index.js');
-var index$u = require('./Tooltip/index.js');
-var index$v = require('./TimeSelect/index.js');
+var index$r = require('./TabsMenu/index.js');
+var index$s = require('./TabsPanels/index.js');
+var index$t = require('./TextArea/index.js');
+var index$q = require('./Theme/index.js');
+var index$v = require('./Tooltip/index.js');
+var index$u = require('./TimeSelect/index.js');
 var index$w = require('./Typography/index.js');
 var index$x = require('./hooks/useMediaSizes/index.js');
 var index$y = require('./hooks/useScrollLock/index.js');
@@ -45,8 +45,8 @@ var Cross = require('./Icons/Cross.js');
 var CrossFill = require('./Icons/CrossFill.js');
 var Edit = require('./Icons/Edit.js');
 var Exit = require('./Icons/Exit.js');
-var EyeOpen = require('./Icons/EyeOpen.js');
 var EyeClosed = require('./Icons/EyeClosed.js');
+var EyeOpen = require('./Icons/EyeOpen.js');
 var Help = require('./Icons/Help.js');
 var Info = require('./Icons/Info.js');
 var Minus = require('./Icons/Minus.js');
@@ -87,12 +87,12 @@ exports.SkeletonRect = index$n.SkeletonRect;
 exports.SkeletonText = index$n.SkeletonText;
 exports.Status = index$o.default;
 exports.Switch = index$p.default;
-exports.TabsMenu = index$q.default;
-exports.TabsPanels = index$r.default;
-exports.TextArea = index$s.default;
-exports.THEMES = index$t.THEMES;
-exports.Tooltip = index$u.default;
-exports.TimeSelect = index$v.default;
+exports.TabsMenu = index$r.default;
+exports.TabsPanels = index$s.default;
+exports.TextArea = index$t.default;
+exports.THEMES = index$q.THEMES;
+exports.Tooltip = index$v.default;
+exports.TimeSelect = index$u.default;
 exports.Typography = index$w.default;
 exports.useMediaSizes = index$x.default;
 exports.useScrollLock = index$y.default;
@@ -104,8 +104,8 @@ exports.Cross = Cross.default;
 exports.CrossFill = CrossFill.default;
 exports.Edit = Edit.default;
 exports.Exit = Exit.default;
-exports.EyeOpen = EyeOpen.default;
 exports.EyeClosed = EyeClosed.default;
+exports.EyeOpen = EyeOpen.default;
 exports.Help = Help.default;
 exports.Info = Info.default;
 exports.Minus = Minus.default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colibri-ui",
-  "version": "0.8.64",
+  "version": "0.8.66",
   "description": "React UI components library",
   "main": "index.js",
   "types": "index.d.ts",
@@ -25,12 +25,45 @@
   },
   "homepage": "https://github.com/ColibriMQLab/ColibriUI#readme",
   "dependencies": {
-    "@floating-ui/react": "^0.27.16",
+    "@floating-ui/react": "0.27.19",
     "clsx": "^2.1.1",
     "date-fns": "3.6.0",
     "react-textarea-autosize": "8.5.9"
   },
   "devDependencies": {},
+  "resolutions": {
+    "@babel/core": "7.29.6",
+    "@babel/plugin-transform-modules-systemjs": "7.29.4",
+    "@tootallnate/once": "2.0.1",
+    "**/glob/minimatch/brace-expansion": "1.1.13",
+    "**/rimraf/glob/minimatch/brace-expansion": "1.1.13",
+    "eslint/minimatch/brace-expansion": "1.1.13",
+    "@eslint/config-array/minimatch/brace-expansion": "1.1.13",
+    "fork-ts-checker-webpack-plugin/minimatch/brace-expansion": "1.1.13",
+    "**/@typescript-eslint/**/brace-expansion": "5.0.7",
+    "**/typescript-eslint/**/brace-expansion": "5.0.7",
+    "diff": "4.0.4",
+    "fast-uri": "3.1.2",
+    "flatted": "3.4.2",
+    "form-data": "4.0.6",
+    "handlebars": "4.7.9",
+    "immutable": "5.1.9",
+    "lodash": "4.18.1",
+    "anymatch/picomatch": "2.3.2",
+    "@storybook/core/picomatch": "2.3.2",
+    "storybook/picomatch": "2.3.2",
+    "**/readdirp/picomatch": "2.3.2",
+    "jest-util/picomatch": "2.3.2",
+    "micromatch/picomatch": "2.3.2",
+    "**/@rollup/pluginutils/picomatch": "4.0.4",
+    "**/tinyglobby/picomatch": "4.0.4",
+    "postcss": "8.5.16",
+    "**/terser-webpack-plugin/serialize-javascript": "7.0.7",
+    "svgo": "3.3.3",
+    "webpack": "5.108.3",
+    "ws": "8.21.0",
+    "yaml": "1.10.3"
+  },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",