@rocket.chat/fuselage 0.85.0 → 0.86.0

package/dist/fuselage.development.js

@@ -66,8 +66,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.Palette = exports.isShadowColor = exports.isStatusColor = exports.isStatusBackgroundColor = exports.isBadgeColor = exports.isTextIconColor = exports.isStrokeColor = exports.isSurfaceColor = exports.shadowColors = exports.badgeBackgroundColors = exports.statusColors = exports.statusBackgroundColors = exports.textIconColors = exports.strokeColors = exports.surfaceColors = exports.neutral = exports.__setThrowErrorOnInvalidToken__ = exports.throwErrorOnInvalidToken = exports.Var = void 0;
-const colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/colors.json */ "@rocket.chat/fuselage-tokens/colors.json"));
 const badge_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/badge.json */ "@rocket.chat/fuselage-tokens/dist/badge.json"));
+const colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/colors.json */ "@rocket.chat/fuselage-tokens/dist/colors.json"));
 const font_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/font.json */ "@rocket.chat/fuselage-tokens/dist/font.json"));
 const shadow_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/shadow.json */ "@rocket.chat/fuselage-tokens/dist/shadow.json"));
 const status_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/status.json */ "@rocket.chat/fuselage-tokens/dist/status.json"));
@@ -113,7 +113,7 @@ exports.neutral = {
 // Falls back to the primitive palette directly. TODO(fuselage-tokens):
 // remove `primitive()` and its call sites below once resolved.
 const primitive = (ref, name) => new Var(name, colors_json_1.default[ref]);
-const surfaceTokens = surface_json_1.default.surface.light;
+const surfaceTokens = surface_json_1.default.light;
 exports.surfaceColors = {
     'surface-light': new Var('surface-light', surfaceTokens.light),
     'surface-tint': new Var('surface-tint', surfaceTokens.tint),
@@ -129,7 +129,7 @@ exports.surfaceColors = {
     'surface-transparent': 'transparent',
     'surface-sidebar': new Var('surface-sidebar', surfaceTokens.sidebar),
 };
-const strokeTokens = stroke_json_1.default.stroke.light;
+const strokeTokens = stroke_json_1.default.light;
 exports.strokeColors = {
     'stroke-extra-light': new Var('stroke-extra-light', strokeTokens.extraLight),
     'stroke-light': new Var('stroke-light', strokeTokens.light),
@@ -141,7 +141,7 @@ exports.strokeColors = {
     'stroke-extra-light-error': new Var('stroke-extra-light-error', strokeTokens.extraLightError),
     'stroke-error': new Var('stroke-error', strokeTokens.error),
 };
-const fontTokens = font_json_1.default.font.light;
+const fontTokens = font_json_1.default.light;
 exports.textIconColors = {
     'font-white': new Var('font-white', fontTokens.white),
     'font-disabled': new Var('font-disabled', fontTokens.disabled),
@@ -155,7 +155,7 @@ exports.textIconColors = {
     'font-pure-black': new Var('font-pure-black', fontTokens.pureBlack),
     'font-pure-white': new Var('font-pure-white', fontTokens.pureWhite),
 };
-const statusTokens = status_json_1.default.status.light;
+const statusTokens = status_json_1.default.light;
 exports.statusBackgroundColors = {
     'status-background-info': new Var('status-background-info', statusTokens.info),
     'status-background-success': new Var('status-background-success', statusTokens.success),
@@ -177,7 +177,7 @@ exports.statusColors = {
     'status-font-on-service-1': new Var('status-font-on-service-1', statusTokens['font-on-service-1']),
     'status-font-on-service-2': new Var('status-font-on-service-2', statusTokens['font-on-service-2']),
 };
-const badgeTokens = badge_json_1.default.badge.light;
+const badgeTokens = badge_json_1.default.light;
 exports.badgeBackgroundColors = {
     'badge-background-level-0': new Var('badge-background-level-0', badgeTokens['level-0']),
     'badge-background-level-1': new Var('badge-background-level-1', badgeTokens['level-1']),
@@ -185,7 +185,7 @@ exports.badgeBackgroundColors = {
     'badge-background-level-3': new Var('badge-background-level-3', badgeTokens['level-3']),
     'badge-background-level-4': new Var('badge-background-level-4', badgeTokens['level-4']),
 };
-const shadowTokens = shadow_json_1.default.shadow.light;
+const shadowTokens = shadow_json_1.default.light;
 exports.shadowColors = {
     'shadow-elevation-border': new Var('shadow-elevation-border', shadowTokens['elevation-border']),
     'shadow-elevation-1': new Var('shadow-elevation-1', shadowTokens['elevation-1']),
@@ -826,8 +826,8 @@ const prependClassName_1 = __webpack_require__(/*! ../../helpers/prependClassNam
 /**
  * Communicates notification’s amount and types.
  */
-function Badge({ is: Tag = 'span', variant = 'secondary', small, className, disabled, ...props }) {
-    const modifiers = [variant, small && 'small', disabled && 'disabled']
+function Badge({ is: Tag = 'span', variant = 'secondary', small, className, ...props }) {
+    const modifiers = [variant, small && 'small']
         .filter(Boolean)
         .map((modifier) => `rcx-badge--${modifier}`)
         .join(' ');
@@ -6520,7 +6520,7 @@ function Options({ maxHeight = 'x144', multiple, renderEmpty: EmptyComponent = O
                             return;
                         (0, prevent_1.prevent)(e);
                         onSelect([value, label, selected, disabled, type, url]);
-                    }, value: value, selected: selected, disabled: disabled, focus: cursor === i }, value));
+                    }, value: value, selected: !!selected, disabled: disabled, focus: cursor === i }, value));
         }
     }), [options, cursor, onSelect, OptionComponent]);
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: (0, jsx_runtime_1.jsx)(Scrollable_1.Scrollable, { vertical: true, smooth: true, children: (0, jsx_runtime_1.jsxs)(Tile_1.Tile, { ref: liRef, elevation: '0', padding: 'none', maxHeight: maxHeight, onMouseDown: prevent_1.prevent, onClick: prevent_1.prevent, is: 'ol', "aria-multiselectable": multiple || true, role: 'listbox', id: id, "aria-activedescendant": options?.[cursor]?.[0]
@@ -6755,7 +6755,7 @@ function OptionsPaginated({ ref, withTitle, multiple, renderEmpty: EmptyComponen
                 (0, prevent_1.prevent)(e);
                 onSelect([value, label]);
                 return false;
-            }, key: value, value: value, selected: selected || (multiple !== true && undefined), focus: cursor === index || undefined }));
+            }, key: value, value: value, selected: !!selected, focus: cursor === index || undefined }));
     };
     return ((0, jsx_runtime_1.jsx)(Box_1.Box, { "rcx-options": true, ...props, ref: ref, children: (0, jsx_runtime_1.jsx)(Tile_1.Tile, { padding: 0, paddingBlock: 'x12', paddingInline: 0, elevation: '2', children: !options.length ? ((0, jsx_runtime_1.jsx)(EmptyComponent, {})) : ((0, jsx_runtime_1.jsx)(react_virtuoso_1.Virtuoso, { endReached: endReached, style: { height: '144px' }, totalCount: options.length, data: options, 
                 // TODO Add a scroller element
@@ -7181,14 +7181,14 @@ const stroke_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fusel
 const surface_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/surface.json */ "@rocket.chat/fuselage-tokens/dist/surface.json"));
 const getTokens = (theme) => {
     const tokens = {
-        badge: badge_json_1.default.badge[theme],
-        button: button_json_1.default.button[theme],
-        font: font_json_1.default.font[theme],
-        shadow: shadow_json_1.default.shadow[theme],
-        status: status_json_1.default.status[theme],
-        statusBullet: statusBullet_json_1.default.statusBullet[theme],
-        stroke: stroke_json_1.default.stroke[theme],
-        surface: surface_json_1.default.surface[theme],
+        badge: badge_json_1.default[theme],
+        button: button_json_1.default[theme],
+        font: font_json_1.default[theme],
+        shadow: shadow_json_1.default[theme],
+        status: status_json_1.default[theme],
+        statusBullet: statusBullet_json_1.default[theme],
+        stroke: stroke_json_1.default[theme],
+        surface: surface_json_1.default[theme],
     };
     return tokens;
 };
@@ -9157,13 +9157,12 @@ Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.SidebarGroupTitle = void 0;
 const jsx_runtime_1 = __webpack_require__(/*! react/jsx-runtime */ "react/jsx-runtime");
 const Chevron_1 = __webpack_require__(/*! ../Chevron */ "./src/components/Chevron/index.ts");
-const SidebarCollapseGroupMenu_1 = __webpack_require__(/*! ./SidebarCollapseGroupMenu */ "./src/components/SidebarV2/SidebarCollapseGroupMenu.tsx");
 const SidebarGroupTitle = ({ title, titleId, badge, menu, barProps, expanded, role, ...props }) => ((0, jsx_runtime_1.jsxs)("div", { className: [
         'rcx-box rcx-box--full',
         'rcx-sidebar-v2-collapse-group__bar rcx-box--animated',
     ]
         .filter(Boolean)
-        .join(' '), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'rcx-box rcx-sidebar-v2-collapse-group__bar-button', role: role, ...barProps, children: [expanded !== undefined && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { size: 'x20', right: !expanded }), title && ((0, jsx_runtime_1.jsx)("h4", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title', id: titleId, children: title })), !expanded && badge && badge] }), menu && (0, jsx_runtime_1.jsx)(SidebarCollapseGroupMenu_1.SidebarCollapseGroupMenu, { children: menu })] }));
+        .join(' '), ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'rcx-box rcx-sidebar-v2-collapse-group__bar-button', role: role, ...barProps, children: [expanded !== undefined && (0, jsx_runtime_1.jsx)(Chevron_1.Chevron, { size: 'x20', right: !expanded }), title && ((0, jsx_runtime_1.jsx)("h4", { className: 'rcx-box rcx-box--full rcx-sidebar-v2-collapse-group__title', id: titleId, children: title })), !expanded && badge && badge] }), menu] }));
 exports.SidebarGroupTitle = SidebarGroupTitle;
 
 
@@ -11358,7 +11357,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.getPaletteColor = void 0;
-const colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/colors.json */ "@rocket.chat/fuselage-tokens/colors.json"));
+const colors_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/colors.json */ "@rocket.chat/fuselage-tokens/dist/colors.json"));
 const invariant_1 = __importDefault(__webpack_require__(/*! invariant */ "invariant"));
 const isPaletteColorRef = (ref) => typeof ref === 'string' && ref in colors_json_1.default;
 const mapTypeToPrefix = {
@@ -11939,7 +11938,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", ({ value: true }));
 exports.fontScale = exports.fontFamily = exports.spacing = exports.size = exports.color = exports.fontColor = exports.backgroundColor = exports.strokeColor = exports.borderRadius = exports.borderWidth = void 0;
-const typography_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/typography.json */ "@rocket.chat/fuselage-tokens/typography.json"));
+const border_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/border.json */ "@rocket.chat/fuselage-tokens/dist/border.json"));
+const typography_json_1 = __importDefault(__webpack_require__(/*! @rocket.chat/fuselage-tokens/dist/typography.json */ "@rocket.chat/fuselage-tokens/dist/typography.json"));
 const memo_1 = __webpack_require__(/*! @rocket.chat/memo */ "@rocket.chat/memo");
 const invariant_1 = __importDefault(__webpack_require__(/*! invariant */ "invariant"));
 const Theme_1 = __webpack_require__(/*! ./Theme */ "./src/Theme.ts");
@@ -11965,20 +11965,14 @@ const measure = (computeSpecialValue) => (0, memo_1.memoize)((value) => {
     return value;
 });
 exports.borderWidth = measure((value) => {
-    if (value === 'none') {
-        return '0px';
-    }
-    if (value === 'default') {
-        return (0, exports.borderWidth)('x1');
+    if (typeof value === 'string' && value in border_json_1.default.width) {
+        return `${border_json_1.default.width[value]}px`;
     }
     return undefined;
 });
 exports.borderRadius = measure((value) => {
-    if (value === 'none') {
-        return '0px';
-    }
-    if (value === 'full') {
-        return '9999px';
+    if (typeof value === 'string' && value in border_json_1.default.radius) {
+        return `${border_json_1.default.radius[value] / 16}rem`;
     }
     return undefined;
 });
@@ -12111,22 +12105,22 @@ exports.spacing = measure((value) => {
     }
     return undefined;
 });
-const isFontFamily = (value) => typeof value === 'string' && value in typography_json_1.default.fontFamilies;
+const isFontFamily = (value) => typeof value === 'string' && value in typography_json_1.default.fontFamily;
 exports.fontFamily = (0, memo_1.memoize)((value) => {
     if (!isFontFamily(value)) {
         return undefined;
     }
-    const fontFamily = typography_json_1.default.fontFamilies[value]
+    const fontFamily = typography_json_1.default.fontFamily[value]
         .map((fontFace) => (fontFace.includes(' ') ? `'${fontFace}'` : fontFace))
         .join(', ');
     return (0, toCSSValue_1.toCSSFontValue)(value, fontFamily);
 });
-const isFontScale = (value) => typeof value === 'string' && value in typography_json_1.default.fontScales;
+const isFontScale = (value) => typeof value === 'string' && value in typography_json_1.default.fontScale;
 exports.fontScale = (0, memo_1.memoize)((value) => {
     if (!isFontScale(value)) {
         return undefined;
     }
-    const { fontSize, fontWeight, lineHeight, letterSpacing } = typography_json_1.default.fontScales[value];
+    const { fontSize, fontWeight, lineHeight, letterSpacing } = typography_json_1.default.fontScale[value];
     return {
         fontSize: `${fontSize / 16}rem`,
         fontWeight,
@@ -12158,16 +12152,6 @@ module.exports = require("@rocket.chat/fuselage-hooks");
 
 /***/ },
 
-/***/ "@rocket.chat/fuselage-tokens/colors.json"
-/*!***********************************************************!*\
-  !*** external "@rocket.chat/fuselage-tokens/colors.json" ***!
-  \***********************************************************/
-(module) {
-
-module.exports = require("@rocket.chat/fuselage-tokens/colors.json");
-
-/***/ },
-
 /***/ "@rocket.chat/fuselage-tokens/dist/badge.json"
 /*!***************************************************************!*\
   !*** external "@rocket.chat/fuselage-tokens/dist/badge.json" ***!
@@ -12178,6 +12162,16 @@ module.exports = require("@rocket.chat/fuselage-tokens/dist/badge.json");
 
 /***/ },
 
+/***/ "@rocket.chat/fuselage-tokens/dist/border.json"
+/*!****************************************************************!*\
+  !*** external "@rocket.chat/fuselage-tokens/dist/border.json" ***!
+  \****************************************************************/
+(module) {
+
+module.exports = require("@rocket.chat/fuselage-tokens/dist/border.json");
+
+/***/ },
+
 /***/ "@rocket.chat/fuselage-tokens/dist/button.json"
 /*!****************************************************************!*\
   !*** external "@rocket.chat/fuselage-tokens/dist/button.json" ***!
@@ -12188,6 +12182,16 @@ module.exports = require("@rocket.chat/fuselage-tokens/dist/button.json");
 
 /***/ },
 
+/***/ "@rocket.chat/fuselage-tokens/dist/colors.json"
+/*!****************************************************************!*\
+  !*** external "@rocket.chat/fuselage-tokens/dist/colors.json" ***!
+  \****************************************************************/
+(module) {
+
+module.exports = require("@rocket.chat/fuselage-tokens/dist/colors.json");
+
+/***/ },
+
 /***/ "@rocket.chat/fuselage-tokens/dist/font.json"
 /*!**************************************************************!*\
   !*** external "@rocket.chat/fuselage-tokens/dist/font.json" ***!
@@ -12248,13 +12252,13 @@ module.exports = require("@rocket.chat/fuselage-tokens/dist/surface.json");
 
 /***/ },
 
-/***/ "@rocket.chat/fuselage-tokens/typography.json"
-/*!***************************************************************!*\
-  !*** external "@rocket.chat/fuselage-tokens/typography.json" ***!
-  \***************************************************************/
+/***/ "@rocket.chat/fuselage-tokens/dist/typography.json"
+/*!********************************************************************!*\
+  !*** external "@rocket.chat/fuselage-tokens/dist/typography.json" ***!
+  \********************************************************************/
 (module) {
 
-module.exports = require("@rocket.chat/fuselage-tokens/typography.json");
+module.exports = require("@rocket.chat/fuselage-tokens/dist/typography.json");
 
 /***/ },