Merge release/v3.2.1 into main branch (#1249)

* Fix aria label on CreateableSelect (#1246)

* Set RichTextEditor value to empty string if editor is empty (#1247)

* Fix Heading default props & stories, fix disabled prop of CreateableSelect (#1248)

Author: github-actions[bot]

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "dependencies": {
     "@tiptap/core": "^2.3.1",
     "@tiptap/extension-bold": "^2.3.1",

src/Heading/Heading.stories.tsx

@@ -19,12 +19,11 @@ export default meta;
 type Story = StoryObj<typeof Heading>;
 
 /**
-  A default `Heading` as a level `2` with size `xxl` and weight `bold`
+  A default `Heading` as a level `1` weight `bold`
 */
 export const Default: Story = {
   args: {
     children: 'The fastest way to recruit research participants',
-    level: 1,
   },
 };
 

src/Heading/Heading.tsx

@@ -16,7 +16,7 @@ export interface HeadingProps {
    * logical hierarchy where each heading level represents a sublevel of the previous one,
    * and avoid skipping levels.
    */
-  level: 1 | 2 | 3 | 4 | 5 | 6;
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
   /**
    * @type {string}
    * @description Sizes map to the available font-sizes from the defined list of font-types.

src/RichTextEditor/RichTextEditor.tsx

@@ -171,7 +171,7 @@ const RichTextEditor = forwardRef((
     extensions: editorExtensions,
     content: initialValue,
     onUpdate: ({ editor: ttEditor }) => {
-      const html = ttEditor.getHTML();
+      const html = ttEditor.isEmpty ? '' : ttEditor.getHTML();
 
       // if allowAttributes or allowedTags aren't passed
       // then use defaults from sanitize-html by not passing that key in the options

src/Select/CreatableSelect.jsx

@@ -15,12 +15,12 @@ const CreatableSelect = ({
   className,
   components,
   defaultValue,
-  disabled,
-  getOptionValue,
   getOptionLabel,
+  getOptionValue,
   id,
   inputId,
   isClearable,
+  isDisabled,
   isLoading,
   menuWidth,
   modal,
@@ -34,18 +34,18 @@ const CreatableSelect = ({
 }) => (
   <Creatable
     {...props}
-    ariaLabel={ariaLabel}
+    aria-label={ariaLabel}
     ariaLabelledBy={ariaLabelledBy}
     className={`${className || ''} CreatableSelect`}
     classNamePrefix="Select"
     components={components}
     defaultValue={defaultValue}
-    disabled={disabled}
     getOptionLabel={getOptionLabel}
     getOptionValue={getOptionValue}
     id={id}
     inputId={inputId}
     isClearable={isClearable}
+    isDisabled={isDisabled}
     isLoading={isLoading}
     menuPortalTarget={modal ? document.body : undefined}
     name={name}
@@ -73,7 +73,6 @@ CreatableSelect.propTypes = {
   className: PropTypes.string,
   components: PropTypes.any,
   defaultValue: PropTypes.object,
-  disabled: PropTypes.bool,
   getOptionLabel: PropTypes.func,
   getOptionValue: PropTypes.func,
   id: PropTypes.string,
@@ -83,6 +82,7 @@ CreatableSelect.propTypes = {
   */
   inputId: PropTypes.string.isRequired,
   isClearable: PropTypes.bool,
+  isDisabled: PropTypes.bool,
   isLoading: PropTypes.bool,
   menuWidth: PropTypes.string,
   modal: PropTypes.bool,
@@ -102,7 +102,7 @@ CreatableSelect.defaultProps = {
   className: undefined,
   components: undefined,
   defaultValue: undefined,
-  disabled: false,
+  isDisabled: false,
   getOptionLabel: undefined,
   getOptionValue: undefined,
   isClearable: false,