colibri-ui 0.8.84 → 0.8.87

package/Avatar/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
@@ -10,105 +9,119 @@ var index_props = require('./index.props.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var SIZE_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default["size-s"]), constants.AvatarSize.M, styles__default.default["size-m"]), constants.AvatarSize.L, styles__default.default["size-l"]), constants.AvatarSize.XL, styles__default.default["size-xl"]), constants.AvatarSize.XXL, styles__default.default["size-xxl"]), constants.AvatarSize.XXXL, styles__default.default["size-xxxl"]);
-var TEXT_CLASSES = _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, constants.AvatarSize.S, styles__default.default["text-s"]), constants.AvatarSize.M, styles__default.default["text-m"]), constants.AvatarSize.L, styles__default.default["text-l"]), constants.AvatarSize.XL, styles__default.default["text-xl"]), constants.AvatarSize.XXL, styles__default.default["text-xxl"]), constants.AvatarSize.XXXL, styles__default.default["text-xxxl"]);
-var UserStubIcon = function UserStubIcon() {
-  return /*#__PURE__*/React__default.default.createElement("svg", {
-    className: styles__default.default["avatar-stub-icon"],
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 42 39",
-    fill: "none",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React__default.default.createElement("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M33.6 37.997c-2.9-1.709-7-4.725-8.6-4.725h-3.802c-.9 0-2.8-.805-3-1.507-.199-.503-.199-1.408-.1-2.212 0-.1.303-.1.402 0 .8.905 1.099 1.508 1.9 1.508h1.8c.7 0 3.1-2.111 4.099-4.725.2-.603.4-1.608.5-2.713 0-.1.1-.202.1-.1.1.501.3 1.105.4 1.105.3.201.7-.603 1.2-1.709.5-1.006.5-1.608.7-2.413.3-1.105-.1-1.91-.4-1.91a.91.91 0 0 0-.7.302c-.1 0-.2 0-.2-.1 0-.704.1-1.81.9-2.413-1.1-1.005-.4-2.714-.4-2.714.4.2.4 0 .4 0l-.2-1.106c.6-.1 1.1-.603 1.1-.603s-1.6-.402-2.4-1.005c.7-.202 1.117-.957 1.117-.957S27 9.952 26 9.65c.9-.904.3-2.15.3-2.15s-1.6.441-4.7.441c-2.2-.1-3-.402-4.6 1.207-1.9 1.909-1.9 2.412-3.1 2.412 1 1.407.5 2.814.5 2.814l-.1 2.112.1.401s0 .1.1.302c0 .101 0 .303.1.402l.3 1.61s-.1.1-.2 0a1.42 1.42 0 0 0-1.2-.604c-.3 0-.8.805-.4 1.91.3.804.6 1.306.9 2.412s.9 1.91 1.2 1.71q.15-.153.3-.906c0-.1.1 0 .2.102.1 1.004.3 1.908.5 2.411.2.302.4.703.6 1.005-.2 1.709-.4 3.82-.8 5.428-2.6.704-6.6 1.91-10 2.714C2.2 31.967 0 26.74 0 21.11 0 9.45 9.4 0 21 0s21 9.45 21 21.11c0 6.936-3.3 13.066-8.4 16.887",
-    clipRule: "evenodd"
-  }));
+const SIZE_CLASSES = {
+  [constants.AvatarSize.S]: styles__default.default["size-s"],
+  [constants.AvatarSize.M]: styles__default.default["size-m"],
+  [constants.AvatarSize.L]: styles__default.default["size-l"],
+  [constants.AvatarSize.XL]: styles__default.default["size-xl"],
+  [constants.AvatarSize.XXL]: styles__default.default["size-xxl"],
+  [constants.AvatarSize.XXXL]: styles__default.default["size-xxxl"]
 };
-var OrgStubIcon = function OrgStubIcon() {
-  return /*#__PURE__*/React__default.default.createElement("svg", {
-    className: styles__default.default["avatar-stub-icon"],
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 42 42",
-    fill: "none",
-    "aria-hidden": "true"
-  }, /*#__PURE__*/React__default.default.createElement("path", {
-    fill: "currentColor",
-    fillRule: "evenodd",
-    d: "M19.103 27.36V34H9V12.062L22.567 6v21.36h-3.464zm-6.64 0v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732h-6.64zm0-4.042v1.732h6.64V16.68h-6.64zM32.67 27.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526v9.237z",
-    clipRule: "evenodd"
-  }));
+const TEXT_CLASSES = {
+  [constants.AvatarSize.S]: styles__default.default["text-s"],
+  [constants.AvatarSize.M]: styles__default.default["text-m"],
+  [constants.AvatarSize.L]: styles__default.default["text-l"],
+  [constants.AvatarSize.XL]: styles__default.default["text-xl"],
+  [constants.AvatarSize.XXL]: styles__default.default["text-xxl"],
+  [constants.AvatarSize.XXXL]: styles__default.default["text-xxxl"]
 };
-var Avatar = /*#__PURE__*/React.memo(function (props) {
-  var src = props.src,
-    _props$size = props.size,
-    size = _props$size === void 0 ? constants.AvatarSize.M : _props$size,
-    className = props.className,
-    bordered = props.bordered,
-    _props$alt = props.alt,
-    alt = _props$alt === void 0 ? "Profile avatar" : _props$alt,
-    _props$accountType = props.accountType,
-    accountType = _props$accountType === void 0 ? index_props.AccountType.Organization : _props$accountType,
-    onClick = props.onClick,
-    initials = props.initials,
-    loading = props.loading,
-    ariaLabel = props.ariaLabel,
-    ref = props.ref,
+const UserStubIcon = () => (/*#__PURE__*/React__default.default.createElement("svg", {
+  className: styles__default.default["avatar-stub-icon"],
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 42 39",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React__default.default.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M33.6 37.997c-2.9-1.709-7-4.725-8.6-4.725h-3.802c-.9 0-2.8-.805-3-1.507-.199-.503-.199-1.408-.1-2.212 0-.1.303-.1.402 0 .8.905 1.099 1.508 1.9 1.508h1.8c.7 0 3.1-2.111 4.099-4.725.2-.603.4-1.608.5-2.713 0-.1.1-.202.1-.1.1.501.3 1.105.4 1.105.3.201.7-.603 1.2-1.709.5-1.006.5-1.608.7-2.413.3-1.105-.1-1.91-.4-1.91a.91.91 0 0 0-.7.302c-.1 0-.2 0-.2-.1 0-.704.1-1.81.9-2.413-1.1-1.005-.4-2.714-.4-2.714.4.2.4 0 .4 0l-.2-1.106c.6-.1 1.1-.603 1.1-.603s-1.6-.402-2.4-1.005c.7-.202 1.117-.957 1.117-.957S27 9.952 26 9.65c.9-.904.3-2.15.3-2.15s-1.6.441-4.7.441c-2.2-.1-3-.402-4.6 1.207-1.9 1.909-1.9 2.412-3.1 2.412 1 1.407.5 2.814.5 2.814l-.1 2.112.1.401s0 .1.1.302c0 .101 0 .303.1.402l.3 1.61s-.1.1-.2 0a1.42 1.42 0 0 0-1.2-.604c-.3 0-.8.805-.4 1.91.3.804.6 1.306.9 2.412s.9 1.91 1.2 1.71q.15-.153.3-.906c0-.1.1 0 .2.102.1 1.004.3 1.908.5 2.411.2.302.4.703.6 1.005-.2 1.709-.4 3.82-.8 5.428-2.6.704-6.6 1.91-10 2.714C2.2 31.967 0 26.74 0 21.11 0 9.45 9.4 0 21 0s21 9.45 21 21.11c0 6.936-3.3 13.066-8.4 16.887",
+  clipRule: "evenodd"
+})));
+const OrgStubIcon = () => (/*#__PURE__*/React__default.default.createElement("svg", {
+  className: styles__default.default["avatar-stub-icon"],
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 42 42",
+  fill: "none",
+  "aria-hidden": "true"
+}, /*#__PURE__*/React__default.default.createElement("path", {
+  fill: "currentColor",
+  fillRule: "evenodd",
+  d: "M19.103 27.36V34H9V12.062L22.567 6v21.36h-3.464zm-6.64 0v1.733h3.176V27.36h-3.175zm0-6.638v1.732h6.64v-1.732h-6.64zm0-4.042v1.732h6.64V16.68h-6.64zM32.67 27.36h-6.062v1.733h6.062V34h-9.526V18.124h9.526v9.237z",
+  clipRule: "evenodd"
+})));
+const getRoleProps = (onClick, label) => onClick ? {
+  role: "button",
+  tabIndex: 0,
+  "aria-label": label,
+  onClick,
+  onKeyDown: event => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onClick();
+  }
+} : {
+  role: "img",
+  "aria-label": label
+};
+const Avatar = /*#__PURE__*/React.memo(props => {
+  const {
+      src,
+      size = constants.AvatarSize.M,
+      className,
+      bordered,
+      alt = "Profile avatar",
+      accountType = index_props.AccountType.Organization,
+      onClick,
+      initials,
+      loading,
+      ariaLabel,
+      ref
+    } = props,
     rest = tslib.__rest(props, ["src", "size", "className", "bordered", "alt", "accountType", "onClick", "initials", "loading", "ariaLabel", "ref"]);
-  var hasInitials = initials && initials.trim().length > 0;
-  var hasCustomImage = Boolean(src);
+  const hasInitials = initials && initials.trim().length > 0;
+  const hasCustomImage = Boolean(src);
+  const roleProps = getRoleProps(onClick, ariaLabel || alt);
   if (hasCustomImage) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-      React__default.default.createElement("div", {
-        className: clsx__default.default(styles__default.default["avatar-wrapper"], _defineProperty__default.default({}, styles__default.default["avatar-loader"], Boolean(loading))),
-        onClick: onClick,
-        role: "button",
-        "aria-label": ariaLabel || "Avatar"
-      }, /*#__PURE__*/React__default.default.createElement("img", Object.assign({
-        ref: ref,
-        "data-testid": "avatar",
-        alt: alt,
-        src: src,
-        className: clsx__default.default(styles__default.default.avatar, _defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), SIZE_CLASSES[size], className)
-      }, rest)))
-    );
+    return /*#__PURE__*/React__default.default.createElement("div", Object.assign({
+      className: clsx__default.default(styles__default.default["avatar-wrapper"], {
+        [styles__default.default["avatar-loader"]]: Boolean(loading)
+      })
+    }, onClick && roleProps), /*#__PURE__*/React__default.default.createElement("img", Object.assign({
+      ref: ref,
+      "data-testid": "avatar",
+      alt: alt,
+      src: src,
+      className: clsx__default.default(styles__default.default.avatar, {
+        [styles__default.default["avatar-bordered"]]: Boolean(bordered)
+      }, SIZE_CLASSES[size], className)
+    }, rest)));
   }
   if (hasInitials) {
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-      React__default.default.createElement("span", Object.assign({
-        ref: ref,
-        "data-testid": "avatar",
-        role: "button",
-        "aria-label": ariaLabel || "Avatar",
-        onClick: onClick,
-        className: clsx__default.default(styles__default.default["avatar-initials"], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), styles__default.default["avatar-loader"], Boolean(loading)), SIZE_CLASSES[size], className)
-      }, rest), /*#__PURE__*/React__default.default.createElement("span", {
-        className: clsx__default.default(styles__default.default["initials-text"], TEXT_CLASSES[size])
-      }, initials.trim().slice(0, 2)))
-    );
-  }
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line jsx-a11y/click-events-have-key-events
-    React__default.default.createElement("span", Object.assign({
+    return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
       ref: ref,
-      "data-testid": "avatar",
-      role: "button",
-      "aria-label": ariaLabel || "Avatar",
-      onClick: onClick,
-      className: clsx__default.default(styles__default.default["avatar-stub"], _defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["avatar-bordered"], Boolean(bordered)), styles__default.default["avatar-loader"], Boolean(loading)), SIZE_CLASSES[size], className)
-    }, rest), accountType === index_props.AccountType.Organization ? (/*#__PURE__*/React__default.default.createElement(OrgStubIcon, null)) : (/*#__PURE__*/React__default.default.createElement(UserStubIcon, null)))
-  );
+      "data-testid": "avatar"
+    }, roleProps, {
+      className: clsx__default.default(styles__default.default["avatar-initials"], {
+        [styles__default.default["avatar-bordered"]]: Boolean(bordered),
+        [styles__default.default["avatar-loader"]]: Boolean(loading)
+      }, SIZE_CLASSES[size], className)
+    }, rest), /*#__PURE__*/React__default.default.createElement("span", {
+      className: clsx__default.default(styles__default.default["initials-text"], TEXT_CLASSES[size])
+    }, initials.trim().slice(0, 2)));
+  }
+  return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
+    ref: ref,
+    "data-testid": "avatar"
+  }, roleProps, {
+    className: clsx__default.default(styles__default.default["avatar-stub"], {
+      [styles__default.default["avatar-bordered"]]: Boolean(bordered),
+      [styles__default.default["avatar-loader"]]: Boolean(loading)
+    }, SIZE_CLASSES[size], className)
+  }, rest), accountType === index_props.AccountType.Organization ? (/*#__PURE__*/React__default.default.createElement(OrgStubIcon, null)) : (/*#__PURE__*/React__default.default.createElement(UserStubIcon, null)));
 });
 
 exports.Avatar = Avatar;

package/Badge/Badge.module.css

@@ -12,7 +12,8 @@
   padding: 0 var(--space-1);
   place-content: center center;
   position: absolute;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   z-index: 1;
 }
 .root_direction_right {

package/Badge/Control/index.js

@@ -11,9 +11,11 @@ var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var BadgeControl = function BadgeControl(_a) {
-  var className = _a.className,
-    children = _a.children,
+const BadgeControl = _a => {
+  var {
+      className,
+      children
+    } = _a,
     props = tslib.__rest(_a, ["className", "children"]);
   return /*#__PURE__*/React__default.default.createElement("span", Object.assign({
     className: clsx__default.default(styles__default.default.root, className)

package/Badge/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
@@ -9,30 +8,31 @@ var styles = require('./Badge.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Badge = function Badge(_a) {
-  var children = _a.children,
-    className = _a.className,
-    content = _a.content,
-    _a$direction = _a.direction,
-    direction = _a$direction === void 0 ? "right" : _a$direction,
-    invisibleProp = _a.invisible,
-    _a$max = _a.max,
-    max = _a$max === void 0 ? 99 : _a$max,
-    _a$showZero = _a.showZero,
-    showZero = _a$showZero === void 0 ? false : _a$showZero,
+const Badge = _a => {
+  var {
+      children,
+      className,
+      content,
+      direction = "right",
+      invisible: invisibleProp,
+      max = 99,
+      showZero = false
+    } = _a,
     props = tslib.__rest(_a, ["children", "className", "content", "direction", "invisible", "max", "showZero"]);
-  var invisible = invisibleProp;
+  let invisible = invisibleProp;
   if (invisibleProp == null && (content === 0 && !showZero || content == null)) {
     invisible = true;
   }
-  var displayValue = content == null ? undefined : content > max ? "".concat(max, "+") : content;
+  const displayValue = content == null ? undefined : content > max ? `${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),
+    className: clsx__default.default(styles__default.default.root, {
+      [styles__default.default[`root_direction_${direction}`]]: Boolean(direction),
+      [styles__default.default["root_invisible"]]: Boolean(invisible)
+    }, className),
     "data-testid": "badge"
   }, displayValue)));
 };

package/Button/index.js

@@ -1,6 +1,5 @@
 'use strict';
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var tslib = require('tslib');
 var React = require('react');
 var clsx = require('clsx');
@@ -8,35 +7,39 @@ var styles = require('./Button.module.css');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefault(_defineProperty);
 var React__default = /*#__PURE__*/_interopDefault(React);
 var clsx__default = /*#__PURE__*/_interopDefault(clsx);
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-var Button = function Button(_a) {
-  var className = _a.className,
-    _a$fullWidth = _a.fullWidth,
-    fullWidth = _a$fullWidth === void 0 ? false : _a$fullWidth,
-    _a$variant = _a.variant,
-    variant = _a$variant === void 0 ? "primary" : _a$variant,
-    iconStart = _a.iconStart,
-    iconEnd = _a.iconEnd,
-    icon = _a.icon,
-    size = _a.size,
-    children = _a.children,
-    disabled = _a.disabled,
-    onClick = _a.onClick,
-    type = _a.type,
-    ref = _a.ref,
+const Button = _a => {
+  var {
+      className,
+      fullWidth = false,
+      variant = "primary",
+      iconStart,
+      iconEnd,
+      icon,
+      size,
+      children,
+      disabled,
+      onClick,
+      type,
+      ref
+    } = _a,
     props = tslib.__rest(_a, ["className", "fullWidth", "variant", "iconStart", "iconEnd", "icon", "size", "children", "disabled", "onClick", "type", "ref"]);
   return /*#__PURE__*/React__default.default.createElement("button", Object.assign({
     onClick: onClick,
     ref: ref,
-    className: clsx__default.default(styles__default.default.root, _defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default(_defineProperty__default.default({}, styles__default.default["root_icon"], Boolean(icon)), styles__default.default["root_fullWidth"], Boolean(fullWidth)), styles__default.default["size_".concat(size)], Boolean(size)), styles__default.default["variant_".concat(variant)], Boolean(variant)), styles__default.default["variant_".concat(variant, "_disabled")], Boolean(disabled)), className),
+    className: clsx__default.default(styles__default.default.root, {
+      [styles__default.default["root_icon"]]: Boolean(icon),
+      [styles__default.default["root_fullWidth"]]: Boolean(fullWidth),
+      [styles__default.default[`size_${size}`]]: Boolean(size),
+      [styles__default.default[`variant_${variant}`]]: Boolean(variant),
+      [styles__default.default[`variant_${variant}_disabled`]]: Boolean(disabled)
+    }, className),
     disabled: disabled,
     "data-testid": "button",
-    type: type || "button",
-    role: "button"
+    type: type || "button"
   }, props), icon && /*#__PURE__*/React__default.default.createElement("span", {
     className: styles__default.default.icon
   }, icon), iconStart && /*#__PURE__*/React__default.default.createElement("span", {

package/Button/tokens.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var commonButtonTokens = {
+const commonButtonTokens = {
   "component-button-font-size-xs": "0.75rem",
   "component-button-font-size-s": "0.8125rem",
   "component-button-font-size-m": "0.9375rem",
@@ -12,7 +12,7 @@ var commonButtonTokens = {
   "component-button-radius": "1.125rem",
   "component-button-radius-lg": "1.5rem"
 };
-var BUTTON_TOKENS = Object.assign(Object.assign({}, commonButtonTokens), {
+const BUTTON_TOKENS = Object.assign(Object.assign({}, commonButtonTokens), {
   "component-button-primary-bg": "var(--color-action-primary)",
   "component-button-primary-border": "var(--color-action-primary)",
   "component-button-primary-text": "var(--color-action-secondary)",