Merge branch 'master' into ellipsis

CHANGELOG.md

@@ -1,3 +1,15 @@
+# 8.4.7 - 8/12/24
+- [fix] Fix ref for textarea
+
+# 8.4.6 - 8/9/24
+- [improvement] Move Backdrop to TW theme #253
+
+# 8.4.5 - 8/9/24
+- [fix] Add "use client" for ThemeProvider #252
+
+# 8.4.4 - 7/30/24
+- [improvement] Added format of the date displayed in the calendar header
+- 
 # 8.4.3 - 7/25/24
 - [improvement] allow wildcards on theme hook
 

README.md

@@ -38,7 +38,8 @@
 
 - [Reaflow](https://reaflow.dev?utm=reablocks) - Open-source library for workflow and diagram graphs.
 - [Reagraph](https://reagraph.dev?utm=reablocks) - Open-source library for large webgl based network graphs.
-- [Reaviz](https://reaviz.dev?utm=reablocks) - Open-source library for data visualizations for React. 
+- [Reaviz](https://reaviz.dev?utm=reablocks) - Open-source library for data visualizations for React.
+- [Reachat](https://reachat.dev?utm=reablocks) - Open-source library for building LLM/Chat UIs for React.
 
 ## 🔭 Development
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reablocks",
-  "version": "8.4.3",
+  "version": "8.4.7",
   "description": "Component library for React",
   "scripts": {
     "build": "npm run build:js && npm run build:styles && npm run rewrite:stories && npm run build:docs",

src/form/Calendar/Calendar.story.tsx

@@ -186,6 +186,7 @@ export const Multiview = () => {
         value={range}
         onChange={val => setRange(val as [Date, Date])}
         showDayOfWeek
+        headerDateFormat="MMMM yyyy"
       />
       <Divider />
       <Stack justifyContent="center">

src/form/Calendar/CalendarRange.tsx

@@ -47,6 +47,11 @@ export interface CalendarRangeProps
    */
   previousYearArrow?: React.ReactNode | string;
 
+  /**
+   * The format of the date displayed in the calendar header.
+   */
+  headerDateFormat?: string;
+
   /**
    * Theme for the CalendarRange.
    */
@@ -67,6 +72,7 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
   onChange,
   monthsToDisplay = 2,
   direction = 'future',
+  headerDateFormat = 'MMMM',
   theme: customTheme,
   ...rest
 }) => {
@@ -164,7 +170,10 @@ export const CalendarRange: FC<CalendarRangeProps> = ({
         <SmallHeading className={theme.title} disableMargins>
           {displayMonths.map(i => (
             <span key={addMonths(viewValue, showPast ? -i : i).toDateString()}>
-              {format(addMonths(viewValue, showPast ? -i : i), 'MMMM')}
+              {format(
+                addMonths(viewValue, showPast ? -i : i),
+                headerDateFormat
+              )}
             </span>
           ))}
         </SmallHeading>

src/form/Textarea/Textarea.story.tsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import { useRef } from 'react';
 import { Stack } from '../../layout/Stack';
 import { Textarea } from './Textarea';
+import { Button } from '@/elements';
 
 export default {
   title: 'Components/Form/Textarea',
@@ -32,3 +33,14 @@ export const Sizes = () => (
     <Textarea value="Large" size="large" />
   </Stack>
 );
+
+export const OutsideFocus = () => {
+  const inputRef = useRef(null);
+
+  return (
+    <Stack direction="column">
+      <Button onClick={() => inputRef?.current.focus()}>Click to focus</Button>
+      <Textarea ref={inputRef} />
+    </Stack>
+  );
+};

src/form/Textarea/Textarea.tsx

@@ -1,8 +1,8 @@
-import React, {
-  FC,
+import {
   forwardRef,
   RefObject,
   useImperativeHandle,
+  useLayoutEffect,
   useRef
 } from 'react';
 import TextareaAutosize, {
@@ -61,32 +61,37 @@ export interface TextAreaRef {
   focus?: () => void;
 }
 
-export const Textarea: FC<TextareaProps & TextAreaRef> = forwardRef<
-  TextAreaRef,
-  TextareaProps
->(
+export const Textarea = forwardRef<TextAreaRef, TextareaProps>(
   (
     {
       fullWidth,
       size = 'medium',
       containerClassName,
       className,
       error,
+      autoFocus,
       theme: customTheme,
       ...rest
     },
-    ref
+    inputRef
   ) => {
     const containerRef = useRef<HTMLDivElement | null>(null);
-    const inputRef = useRef<HTMLTextAreaElement | null>(null);
+    const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
-    useImperativeHandle(ref, () => ({
-      inputRef,
+    useImperativeHandle(inputRef, () => ({
+      textareaRef,
       containerRef,
-      blur: () => inputRef.current?.blur(),
-      focus: () => inputRef.current?.focus()
+      blur: () => textareaRef.current?.blur(),
+      focus: () => textareaRef.current?.focus()
     }));
 
+    useLayoutEffect(() => {
+      if (autoFocus) {
+        // Small timeout for page loading
+        requestAnimationFrame(() => textareaRef.current?.focus());
+      }
+    }, [autoFocus]);
+
     const theme: TextareaTheme = useComponentTheme('textarea', customTheme);
 
     return (
@@ -100,14 +105,15 @@ export const Textarea: FC<TextareaProps & TextAreaRef> = forwardRef<
         ref={containerRef}
       >
         <TextareaAutosize
-          ref={inputRef}
+          ref={textareaRef}
           className={twMerge(
             theme.input,
             fullWidth && theme.fullWidth,
             rest.disabled && theme.disabled,
             theme.sizes[size],
             className
           )}
+          autoFocus={autoFocus}
           {...rest}
         />
       </div>

src/layers/Backdrop/Backdrop.tsx

@@ -1,7 +1,8 @@
 import React, { FC, MouseEvent } from 'react';
-import classNames from 'classnames';
 import { motion } from 'framer-motion';
-import css from './Backdrop.module.css';
+import { cn, useComponentTheme } from '@/utils';
+
+import { BackdropTheme } from './BackdropTheme';
 
 export interface BackdropProps {
   /**
@@ -19,6 +20,11 @@ export interface BackdropProps {
    */
   className?: string;
 
+  /**
+   * Theme for the Backdrop.
+   */
+  theme?: BackdropTheme;
+
   /**
    * Callback for when the backdrop is clicked.
    */
@@ -29,14 +35,19 @@ export const Backdrop: FC<BackdropProps> = ({
   zIndex = 998,
   portalIndex = 0,
   className,
+  theme: customTheme,
   onClick
-}) => (
-  <motion.div
-    className={classNames(css.backdrop, className)}
-    initial={{ opacity: 0 }}
-    animate={{ opacity: 0.8 - (portalIndex as number) / 10 }}
-    exit={{ opacity: 0 }}
-    style={{ zIndex }}
-    onClick={onClick}
-  />
-);
+}) => {
+  const theme = useComponentTheme<BackdropTheme>('backdrop', customTheme);
+
+  return (
+    <motion.div
+      className={cn(theme.base, className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: theme.opacity - (portalIndex as number) / 10 }}
+      exit={{ opacity: 0 }}
+      style={{ zIndex }}
+      onClick={onClick}
+    />
+  );
+};

src/layers/Backdrop/BackdropTheme.tsx

@@ -0,0 +1,14 @@
+export interface BackdropTheme {
+  base: string;
+  opacity: number;
+}
+
+export const backdropTheme: BackdropTheme = {
+  base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-black',
+  opacity: 0.8
+};
+
+export const legacyBackdropTheme: BackdropTheme = {
+  base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-[var(--color-layer-transparent)]',
+  opacity: 0.8
+};

src/layers/Backdrop/index.ts

@@ -1 +1,2 @@
 export * from './Backdrop';
+export * from './BackdropTheme';

src/utils/Theme/ThemeProvider.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, {
   createContext,
   FC,

src/utils/Theme/themes/theme.ts

@@ -82,7 +82,10 @@ import {
   TooltipTheme,
   CalloutTheme,
   calloutTheme,
-  legacyCalloutTheme
+  legacyCalloutTheme,
+  BackdropTheme,
+  backdropTheme,
+  legacyBackdropTheme
 } from '@/layers';
 
 import {
@@ -194,6 +197,7 @@ export interface ReablocksTheme {
     breadcrumbs: BreadcrumbsTheme;
     stepper: StepperTheme;
     callout: CalloutTheme;
+    backdrop: BackdropTheme;
   };
 }
 
@@ -242,7 +246,8 @@ export const theme: ReablocksTheme = {
     jsonTree: jsonTreeTheme,
     breadcrumbs: breadcrumbsTheme,
     stepper: stepperTheme,
-    callout: calloutTheme
+    callout: calloutTheme,
+    backdrop: backdropTheme
   }
 };
 
@@ -291,6 +296,7 @@ export const legacyThemeVars: ReablocksTheme = {
     jsonTree: legacyJsonTreeTheme,
     breadcrumbs: legacyBreadcrumbTheme,
     stepper: legacyStepperTheme,
-    callout: legacyCalloutTheme
+    callout: legacyCalloutTheme,
+    backdrop: legacyBackdropTheme
   }
 };