Merge branch 'master' into vibe3

mondaycom · Oct 9, 2024 · b06be40 · b06be40
2 parents 5ba9094 + cb0c87e
commit b06be40
Show file tree

Hide file tree

Showing 7 changed files with 64 additions and 16 deletions.
diff --git a/packages/core/CHANGELOG.md b/packages/core/CHANGELOG.md
@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.139.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.139.0) (2024-10-09)
+
+
+### Features
+
+* add inputAriaLabel to Dropdown component ([#2466](https://github.com/mondaycom/vibe/issues/2466)) ([1cb3d1e](https://github.com/mondaycom/vibe/commit/1cb3d1eb7608abb575620eb1ba7acbe9e68a77f4))
+
+
+
+
+
+## [2.138.1](https://github.com/mondaycom/vibe/compare/[email protected]@2.138.1) (2024-10-08)
+
+
+### Bug Fixes
+
+* **ColorPickerClearButton:** button isn't clickable inside MenuItem ([#2464](https://github.com/mondaycom/vibe/issues/2464)) ([d6bc515](https://github.com/mondaycom/vibe/commit/d6bc51513d95db7db1c4dc8c81ed0a8282dc6990))
+
+
+
+
+
 # [2.138.0](https://github.com/mondaycom/vibe/compare/[email protected]@2.138.0) (2024-10-06)
 
 

diff --git a/packages/core/README.md b/packages/core/README.md
@@ -76,3 +76,17 @@ npm start
 ## Themes
 
 Theming is supported using CSS variables - for more info on theming please read the [theme guidelines](./THEME_README.md) file
+
+## SSR (Server Side Rendering)
+
+Components are using style injection on the client side (into <head> element)
+This is not usable on the server side.
+In order to get the required styles on the server side, you should initialize
+
+```javascript
+globalThis.injectedStyles = {};
+```
+
+in order to have each server side render component css inserted into the injectedStyles object
+each component will insert its css string under a unique key.
+Then you can join all the values into one string and add it under a <style> element
diff --git a/packages/core/scripts/styleInject.ejs b/packages/core/scripts/styleInject.ejs
@@ -1,21 +1,25 @@
 function styleInject(css) {
-    if(typeof document === 'undefined') return;
-    const head = document.head || document.getElementsByTagName('head')[0];
     const id = "<%= hashValue %>_<%= version %>";
-    const styleExists = head.querySelector("#" + id);
-
-    if(styleExists) return;
-
-    const style = document.createElement('style');
-    style.id = id;
-
-    if (head.firstChild) {
-        head.insertBefore(style, head.firstChild);
-    } else {
-        head.appendChild(style);
+    if(typeof document !== 'undefined') {
+        const head = document.head || document.getElementsByTagName('head')[0];
+        const styleExists = head.querySelector("#" + id);
+
+        if(styleExists) return;
+
+        const style = document.createElement('style');
+        style.id = id;
+
+        if (head.firstChild) {
+            head.insertBefore(style, head.firstChild);
+        } else {
+            head.appendChild(style);
+        }
+
+        style.appendChild(document.createTextNode(css));
+    } else if (globalThis.injectedStyles) {
+        // support SSR environments
+        globalThis.injectedStyles[id] = css;
     }
-
-    style.appendChild(document.createTextNode(css));
 }
 
 styleInject(<%= cssVariableName %>);
diff --git a/.../core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx b/.../core/src/components/ColorPicker/components/ColorPickerContent/ColorPickerClearButton.tsx
@@ -27,6 +27,7 @@ export const ColorPickerClearButton: VibeComponent<ColorPickerClearButtonProps>
         size="small"
         kind="tertiary"
         onClick={() => onSelectionAction(-1)} //hack - we don't really have a grid, it's just for keyboard navigation outside the clear button
+        blurOnMouseUp={false}
         className={styles.clearColorButton}
       >
         <Icon size="16" className={styles.clearColorIcon} />

diff --git a/packages/core/src/components/Dropdown/Dropdown.tsx b/packages/core/src/components/Dropdown/Dropdown.tsx
@@ -18,6 +18,7 @@ import {
   defaultCustomStyles,
   DROPDOWN_CHIP_COLORS,
   DROPDOWN_ID,
+  DROPDOWN_INPUT_ARIA_LABEL,
   DROPDOWN_MENU_ARIA_LABEL,
   DROPDOWN_MENU_ID,
   DROPDOWN_MENU_PLACEMENT,
@@ -89,6 +90,7 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
       id = DROPDOWN_ID,
       menuId = DROPDOWN_MENU_ID,
       menuAriaLabel = DROPDOWN_MENU_ARIA_LABEL,
+      inputAriaLabel = DROPDOWN_INPUT_ARIA_LABEL,
       autoFocus = false,
       multi = false,
       multiline = false,
@@ -260,7 +262,7 @@ const Dropdown: VibeComponent<DropdownComponentProps, HTMLElement> & {
             aria-activedescendant={ariaActiveDescendant}
             role="combobox"
             aria-expanded={!readOnly && menuIsOpen}
-            aria-label="Dropdown input"
+            aria-label={inputAriaLabel}
             aria-controls={menuId}
           />
         );

diff --git a/packages/core/src/components/Dropdown/Dropdown.types.ts b/packages/core/src/components/Dropdown/Dropdown.types.ts
@@ -32,6 +32,10 @@ export interface CustomMenuBaseProps {
    * aria-label attribute for the menu container
    */
   menuAriaLabel?: string;
+  /**
+   * aria-label attribute for the dropdown input
+   */
+  inputAriaLabel?: string;
 }
 
 export type CustomMenuProps = CustomMenuBaseProps & MenuProps<OptionTypeBase, boolean>;

diff --git a/packages/core/src/components/Dropdown/DropdownConstants.ts b/packages/core/src/components/Dropdown/DropdownConstants.ts
@@ -5,6 +5,7 @@ export const ADD_AUTO_HEIGHT_COMPONENTS = ["container", "control", "valueContain
 export const DROPDOWN_ID = "dropdown-menu-id";
 export const DROPDOWN_MENU_ID = "dropdown-menu-list-id";
 export const DROPDOWN_MENU_ARIA_LABEL = "Dropdown menu";
+export const DROPDOWN_INPUT_ARIA_LABEL = "Dropdown input";
 
 /**
  * @deprecated