colibri-ui 0.8.84 → 0.8.86

package/Accordion/Accordion.module.css

@@ -26,6 +26,10 @@
 .button svg {
   flex: none;
 }
+.button:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-focus-ring);
+  outline-offset: var(--focus-ring-width);
+}
 
 .text {
   overflow: hidden;

package/Accordion/index.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var clsx = require('clsx');
 require('../Icons/index.js');
@@ -11,30 +9,23 @@ var Chevron = require('../Icons/Chevron.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Accordion = function Accordion(_ref) {
-  var title = _ref.title,
-    _ref$boldTitle = _ref.boldTitle,
-    boldTitle = _ref$boldTitle === void 0 ? false : _ref$boldTitle,
-    children = _ref.children,
-    className = _ref.className,
-    tabIndex = _ref.tabIndex;
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    isOpen = _useState2[0],
-    setIsOpen = _useState2[1];
-  var contentRef = React.useRef(null);
-  var toggleAccordion = function toggleAccordion() {
-    return setIsOpen(!isOpen);
-  };
-  React.useEffect(function () {
+const Accordion = ({
+  title,
+  boldTitle = false,
+  children,
+  className,
+  tabIndex
+}) => {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const contentRef = React.useRef(null);
+  const toggleAccordion = () => setIsOpen(!isOpen);
+  React.useEffect(() => {
     if (contentRef.current) {
-      contentRef.current.style.blockSize = isOpen ? "".concat(contentRef.current.scrollHeight, "px") : "0";
+      contentRef.current.style.blockSize = isOpen ? `${contentRef.current.scrollHeight}px` : "0";
     }
   }, [isOpen]);
   return /*#__PURE__*/React__default.default.createElement("div", {
@@ -45,12 +36,13 @@ var Accordion = function Accordion(_ref) {
     className: styles__default.default.button,
     onClick: toggleAccordion,
     type: "button",
-    role: "button",
     "aria-expanded": isOpen,
     tabIndex: tabIndex,
     "aria-label": "Toggle"
   }, /*#__PURE__*/React__default.default.createElement(Chevron.Chevron, {
-    className: clsx__default.default(styles__default.default.chevron, _defineProperty__default.default({}, styles__default.default["chevron_open"], Boolean(isOpen))),
+    className: clsx__default.default(styles__default.default.chevron, {
+      [styles__default.default["chevron_open"]]: Boolean(isOpen)
+    }),
     width: 20,
     height: 20
   }), /*#__PURE__*/React__default.default.createElement(index.Typography, {

package/Autocomplete/Autocomplete.js

@@ -1,7 +1,5 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
-var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
@@ -12,118 +10,89 @@ var styles = require('./Autocomplete.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
-var _slicedToArray__default = /*#__PURE__*/_interopDefault(_slicedToArray);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
-  var options = props.options,
-    value = props.value,
-    _props$defaultValue = props.defaultValue,
-    defaultValue = _props$defaultValue === void 0 ? "" : _props$defaultValue,
-    onValueChange = props.onValueChange,
-    onOptionSelect = props.onOptionSelect,
-    filterOption = props.filterOption,
-    renderOption = props.renderOption,
-    _props$getOptionKey = props.getOptionKey,
-    getOptionKey = _props$getOptionKey === void 0 ? function (option) {
-      return option.value;
-    } : _props$getOptionKey,
-    _props$minQueryLength = props.minQueryLength,
-    minQueryLength = _props$minQueryLength === void 0 ? 0 : _props$minQueryLength,
-    open = props.open,
-    _props$defaultOpen = props.defaultOpen,
-    defaultOpen = _props$defaultOpen === void 0 ? false : _props$defaultOpen,
-    onOpenChange = props.onOpenChange,
-    _props$openOnFocus = props.openOnFocus,
-    openOnFocus = _props$openOnFocus === void 0 ? true : _props$openOnFocus,
-    _props$loading = props.loading,
-    loading = _props$loading === void 0 ? false : _props$loading,
-    _props$loadingText = props.loadingText,
-    loadingText = _props$loadingText === void 0 ? "Loading..." : _props$loadingText,
-    _props$emptyText = props.emptyText,
-    emptyText = _props$emptyText === void 0 ? "No results found" : _props$emptyText,
-    label = props.label,
-    hint = props.hint,
-    hasError = props.hasError,
-    success = props.success,
-    _props$clearable = props.clearable,
-    clearable = _props$clearable === void 0 ? true : _props$clearable,
-    _props$clearLabel = props.clearLabel,
-    clearLabel = _props$clearLabel === void 0 ? "Clear value" : _props$clearLabel,
-    _props$size = props.size,
-    size = _props$size === void 0 ? "m" : _props$size,
-    _props$listMaxHeight = props.listMaxHeight,
-    listMaxHeight = _props$listMaxHeight === void 0 ? "var(--component-autocomplete-list-max-height)" : _props$listMaxHeight,
-    containerClassName = props.containerClassName,
-    className = props.className,
-    disabled = props.disabled,
-    readOnly = props.readOnly,
-    required = props.required,
-    id = props.id,
-    _onFocus = props.onFocus,
-    onBlur = props.onBlur,
-    onKeyDown = props.onKeyDown,
+const AutocompleteInner = (props, forwardedRef) => {
+  const {
+      options,
+      value,
+      defaultValue = "",
+      onValueChange,
+      onOptionSelect,
+      filterOption,
+      renderOption,
+      getOptionKey = option => option.value,
+      minQueryLength = 0,
+      open,
+      defaultOpen = false,
+      onOpenChange,
+      openOnFocus = true,
+      loading = false,
+      loadingText = "Loading...",
+      emptyText = "No results found",
+      label,
+      hint,
+      hasError,
+      success,
+      clearable = true,
+      clearLabel = "Clear value",
+      size = "m",
+      listMaxHeight = "var(--component-autocomplete-list-max-height)",
+      containerClassName,
+      className,
+      disabled,
+      readOnly,
+      required,
+      id,
+      onFocus,
+      onBlur,
+      onKeyDown
+    } = props,
     inputProps = tslib.__rest(props, ["options", "value", "defaultValue", "onValueChange", "onOptionSelect", "filterOption", "renderOption", "getOptionKey", "minQueryLength", "open", "defaultOpen", "onOpenChange", "openOnFocus", "loading", "loadingText", "emptyText", "label", "hint", "hasError", "success", "clearable", "clearLabel", "size", "listMaxHeight", "containerClassName", "className", "disabled", "readOnly", "required", "id", "onFocus", "onBlur", "onKeyDown"]);
-  var generatedId = React.useId();
-  var inputId = id !== null && id !== void 0 ? id : generatedId;
-  var listId = "".concat(inputId, "-listbox");
-  var controlled = value !== undefined;
-  var _useState = React.useState(defaultValue),
-    _useState2 = _slicedToArray__default.default(_useState, 2),
-    internalValue = _useState2[0],
-    setInternalValue = _useState2[1];
-  var _useState3 = React.useState(defaultOpen),
-    _useState4 = _slicedToArray__default.default(_useState3, 2),
-    internalOpen = _useState4[0],
-    setInternalOpen = _useState4[1];
-  var _useState5 = React.useState(-1),
-    _useState6 = _slicedToArray__default.default(_useState5, 2),
-    activeIndex = _useState6[0],
-    setActiveIndex = _useState6[1];
-  var rootRef = React.useRef(null);
-  var controlRef = React.useRef(null);
-  var inputRef = React.useRef(null);
-  var optionRefs = React.useRef([]);
-  var query = controlled ? value : internalValue;
-  var isOpen = open !== null && open !== void 0 ? open : internalOpen;
-  var setInputRef = function setInputRef(node) {
+  const generatedId = React.useId();
+  const inputId = id !== null && id !== void 0 ? id : generatedId;
+  const listId = `${inputId}-listbox`;
+  const controlled = value !== undefined;
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const [activeIndex, setActiveIndex] = React.useState(-1);
+  const rootRef = React.useRef(null);
+  const controlRef = React.useRef(null);
+  const inputRef = React.useRef(null);
+  const optionRefs = React.useRef([]);
+  const query = controlled ? value : internalValue;
+  const isOpen = open !== null && open !== void 0 ? open : internalOpen;
+  const setInputRef = node => {
     inputRef.current = node;
     if (typeof forwardedRef === "function") forwardedRef(node);else if (forwardedRef) forwardedRef.current = node;
   };
-  var setOpen = React.useCallback(function (next) {
+  const setOpen = React.useCallback(next => {
     if (open === undefined) setInternalOpen(next);
     onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(next);
     if (!next) setActiveIndex(-1);
   }, [onOpenChange, open]);
-  var filteredOptions = React.useMemo(function () {
+  const filteredOptions = React.useMemo(() => {
     if (query.length < minQueryLength) return [];
-    var normalized = query.trim().toLocaleLowerCase();
-    var predicate = filterOption !== null && filterOption !== void 0 ? filterOption : function (option) {
-      return option.label.toLocaleLowerCase().includes(normalized);
-    };
-    return options.filter(function (option) {
-      return predicate(option, query);
-    });
+    const normalized = query.trim().toLocaleLowerCase();
+    const predicate = filterOption !== null && filterOption !== void 0 ? filterOption : option => option.label.toLocaleLowerCase().includes(normalized);
+    return options.filter(option => predicate(option, query));
   }, [filterOption, minQueryLength, options, query]);
-  var showPopup = isOpen && !disabled && !readOnly && query.length >= minQueryLength;
-  React.useEffect(function () {
+  const showPopup = isOpen && !disabled && !readOnly && query.length >= minQueryLength;
+  React.useEffect(() => {
     if (!showPopup) return undefined;
-    var closeOutside = function closeOutside(event) {
+    const closeOutside = event => {
       var _a;
       if (!((_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) setOpen(false);
     };
     document.addEventListener("mousedown", closeOutside);
-    return function () {
-      return document.removeEventListener("mousedown", closeOutside);
-    };
+    return () => document.removeEventListener("mousedown", closeOutside);
   }, [setOpen, showPopup]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     setActiveIndex(-1);
   }, [query]);
-  React.useEffect(function () {
+  React.useEffect(() => {
     var _a;
     if (activeIndex >= 0) {
       (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
@@ -131,11 +100,11 @@ var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
       });
     }
   }, [activeIndex]);
-  var changeValue = function changeValue(next) {
+  const changeValue = next => {
     if (!controlled) setInternalValue(next);
     onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(next);
   };
-  var selectOption = function selectOption(option) {
+  const selectOption = option => {
     var _a;
     if (option.disabled) return;
     changeValue(option.label);
@@ -143,21 +112,21 @@ var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
     setOpen(false);
     (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
   };
-  var moveActive = function moveActive(direction) {
+  const moveActive = direction => {
     if (!showPopup) setOpen(true);
     if (!filteredOptions.length) return;
-    var next = activeIndex;
-    for (var attempts = 0; attempts < filteredOptions.length; attempts += 1) {
+    let next = activeIndex;
+    for (let attempts = 0; attempts < filteredOptions.length; attempts += 1) {
       next = (next + direction + filteredOptions.length) % filteredOptions.length;
       if (!filteredOptions[next].disabled) break;
     }
     setActiveIndex(next);
   };
-  var handleChange = function handleChange(_event, next) {
+  const handleChange = (_event, next) => {
     changeValue(next);
     setOpen(next.length >= minQueryLength);
   };
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     if (event.defaultPrevented) return;
     if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -171,40 +140,38 @@ var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
       setOpen(false);
     } else if (event.key === "Home" && showPopup) {
       event.preventDefault();
-      var first = filteredOptions.findIndex(function (option) {
-        return !option.disabled;
-      });
+      const first = filteredOptions.findIndex(option => !option.disabled);
       setActiveIndex(first);
     } else if (event.key === "End" && showPopup) {
       event.preventDefault();
-      var last = filteredOptions.length - 1;
+      let last = filteredOptions.length - 1;
       while (last >= 0 && filteredOptions[last].disabled) last -= 1;
       setActiveIndex(last);
     } else if (event.key === "Tab") {
       setOpen(false);
     }
   };
-  var clearButton = clearable && query && !disabled && !readOnly && (/*#__PURE__*/React__default.default.createElement("button", {
+  const clearButton = clearable && query && !disabled && !readOnly && (/*#__PURE__*/React__default.default.createElement("button", {
     type: "button",
     className: styles__default.default.clear,
     "aria-label": clearLabel,
-    onMouseDown: function onMouseDown(event) {
-      return event.preventDefault();
-    },
-    onClick: function onClick() {
+    onMouseDown: event => event.preventDefault(),
+    onClick: () => {
       var _a;
       changeValue("");
       setOpen(openOnFocus && minQueryLength === 0);
       (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   }, /*#__PURE__*/React__default.default.createElement(Cross.Cross, null)));
-  var endIcon = /*#__PURE__*/React__default.default.createElement("span", {
+  const endIcon = /*#__PURE__*/React__default.default.createElement("span", {
     className: styles__default.default["end-icons"]
   }, clearButton, /*#__PURE__*/React__default.default.createElement(Chevron.Chevron, {
-    className: clsx__default.default(styles__default.default.chevron, _defineProperty__default.default({}, styles__default.default["chevron_open"], showPopup)),
+    className: clsx__default.default(styles__default.default.chevron, {
+      [styles__default.default["chevron_open"]]: showPopup
+    }),
     "aria-hidden": "true"
   }));
-  var popup = showPopup && (/*#__PURE__*/React__default.default.createElement("div", {
+  const popup = showPopup && (/*#__PURE__*/React__default.default.createElement("div", {
     className: styles__default.default.popup
   }, /*#__PURE__*/React__default.default.createElement("ul", {
     id: listId,
@@ -218,37 +185,37 @@ var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
     className: styles__default.default.message
   }, loadingText)) : filteredOptions.length === 0 ? (/*#__PURE__*/React__default.default.createElement("li", {
     className: styles__default.default.message
-  }, emptyText)) : filteredOptions.map(function (option, index) {
-    var active = index === activeIndex;
-    var selected = option.label === query;
+  }, emptyText)) : filteredOptions.map((option, index) => {
+    const active = index === activeIndex;
+    const selected = option.label === query;
     return /*#__PURE__*/React__default.default.createElement("li", {
-      ref: function ref(node) {
+      ref: node => {
         optionRefs.current[index] = node;
       },
-      id: "".concat(listId, "-").concat(index),
+      id: `${listId}-${index}`,
       key: getOptionKey(option),
       role: "option",
       "aria-selected": selected,
       "aria-disabled": option.disabled || undefined,
-      className: clsx__default.default(styles__default.default.option, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default.active, active), styles__default.default.selected, selected), styles__default.default["option_disabled"], option.disabled)),
-      onMouseDown: function onMouseDown(event) {
-        return event.preventDefault();
-      },
-      onMouseEnter: function onMouseEnter() {
+      className: clsx__default.default(styles__default.default.option, {
+        [styles__default.default.active]: active,
+        [styles__default.default.selected]: selected,
+        [styles__default.default["option_disabled"]]: option.disabled
+      }),
+      onMouseDown: event => event.preventDefault(),
+      onMouseEnter: () => {
         if (!option.disabled) setActiveIndex(index);
       },
-      onKeyDown: function onKeyDown(event) {
+      onKeyDown: event => {
         if (event.key === "Enter" || event.key === " ") {
           event.preventDefault();
           selectOption(option);
         }
       },
-      onClick: function onClick() {
-        return selectOption(option);
-      }
+      onClick: () => selectOption(option)
     }, renderOption ? renderOption(option, {
-      active: active,
-      selected: selected
+      active,
+      selected
     }) : (/*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, option.contentLeft && (/*#__PURE__*/React__default.default.createElement("span", {
       className: styles__default.default.side
     }, option.contentLeft)), /*#__PURE__*/React__default.default.createElement("span", {
@@ -259,7 +226,9 @@ var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
   }))));
   return /*#__PURE__*/React__default.default.createElement("div", {
     ref: rootRef,
-    className: clsx__default.default(styles__default.default.root, styles__default.default["size_".concat(size)], _defineProperty__default.default({}, styles__default.default.success, success), containerClassName)
+    className: clsx__default.default(styles__default.default.root, styles__default.default[`size_${size}`], {
+      [styles__default.default.success]: success
+    }, containerClassName)
   }, /*#__PURE__*/React__default.default.createElement(index.Input, Object.assign({}, inputProps, {
     id: inputId,
     type: "text",
@@ -267,7 +236,7 @@ var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
     "aria-autocomplete": "list",
     "aria-expanded": showPopup,
     "aria-controls": showPopup ? listId : undefined,
-    "aria-activedescendant": activeIndex >= 0 ? "".concat(listId, "-").concat(activeIndex) : undefined,
+    "aria-activedescendant": activeIndex >= 0 ? `${listId}-${activeIndex}` : undefined,
     "aria-invalid": hasError || undefined,
     autoComplete: "off",
     className: clsx__default.default(styles__default.default.field, className),
@@ -286,13 +255,13 @@ var AutocompleteInner = function AutocompleteInner(props, forwardedRef) {
     value: query,
     onBlur: onBlur,
     onChange: handleChange,
-    onFocus: function onFocus(event) {
-      _onFocus === null || _onFocus === void 0 ? void 0 : _onFocus(event);
+    onFocus: event => {
+      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
       if (openOnFocus && query.length >= minQueryLength) setOpen(true);
     },
     onKeyDown: handleKeyDown
   })));
 };
-var Autocomplete = /*#__PURE__*/React.forwardRef(AutocompleteInner);
+const Autocomplete = /*#__PURE__*/React.forwardRef(AutocompleteInner);
 
 exports.Autocomplete = Autocomplete;

package/Avatar/Avatar.module.css

@@ -143,4 +143,10 @@
   100% {
     transform: rotate(360deg);
   }
+}
+.avatar-wrapper:focus-visible,
+.avatar-initials:focus-visible,
+.avatar-stub:focus-visible {
+  outline: var(--focus-ring-width) solid var(--color-focus-ring);
+  outline-offset: var(--focus-ring-width);
 }