@react-fabric/form 1.0.0-beta.62 → 1.0.0-beta.63

package/src/input/ColorPicker.tsx

@@ -21,17 +21,9 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import Color from "color";
-import {
-  memo,
-  startTransition,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useState,
-  type FC,
-} from "react";
-import { SketchPicker } from "react-color";
+import chroma from "chroma-js";
+import { memo, startTransition, useCallback, useDeferredValue, useEffect, useState, type FC } from "react";
+import { BlockPicker, SketchPicker } from "react-color";
 
 export interface ColorProps {
   /**
@@ -46,6 +38,10 @@ export interface ColorProps {
    * hide alpha value
    */
   hideAlpha?: boolean;
+  /**
+   * show only swatches, hide the color picker
+   */
+  picker?: "default" | "swatches";
   /**
    * color value
    */
@@ -57,16 +53,16 @@ export interface ColorProps {
 }
 
 const DEFAULT_SWATCHES = [
-  Color("#d7323a").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#ff781c").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#f7b731").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#88ab1b").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#22aa85").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#399bec").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#4862c8").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#aa66cf").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#f43f7b").mix(Color("#171a1c"), 0.5).hex(),
-  Color("#a37f4f").mix(Color("#171a1c"), 0.5).hex(),
+  chroma.mix("#d7323a", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#ff781c", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#f7b731", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#88ab1b", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#22aa85", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#399bec", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#4862c8", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#aa66cf", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#f43f7b", "#171a1c", 0.5, "lab").hex(),
+  chroma.mix("#a37f4f", "#171a1c", 0.5, "lab").hex(),
 
   "#d7323a",
   "#ff781c",
@@ -79,16 +75,16 @@ const DEFAULT_SWATCHES = [
   "#f43f7b",
   "#a37f4f",
 
-  Color("#d7323a").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#ff781c").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#f7b731").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#88ab1b").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#22aa85").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#399bec").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#4862c8").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#aa66cf").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#f43f7b").mix(Color("#f1f3f4"), 0.5).hex(),
-  Color("#a37f4f").mix(Color("#f1f3f4"), 0.5).hex(),
+  chroma.mix("#d7323a", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#ff781c", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#f7b731", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#88ab1b", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#22aa85", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#399bec", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#4862c8", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#aa66cf", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#f43f7b", "#f1f3f4", 0.5, "lab").hex(),
+  chroma.mix("#a37f4f", "#f1f3f4", 0.5, "lab").hex(),
 
   "#171a1c",
   "#2d3439",
@@ -108,19 +104,12 @@ const DEFAULT_SWATCHES = [
  * The component uses the `react-color` library for the color picker functionality.
  *
  * @param {ColorProps} props - The properties for the ColorPicker component.
- * @returns {JSX.Element} The rendered ColorPicker component.
+ * @returns {React.ReactElement} The rendered ColorPicker component.
  *
  * @see {@link https://react-color.github.io/react-color/} for more details on the color picker library.
  */
-// eslint-disable-next-line react/display-name
 export const ColorPicker: FC<ColorProps> = memo(
-  ({
-    value,
-    onChange,
-    hideAlpha,
-    defaultColor = "#fff",
-    swatches = DEFAULT_SWATCHES,
-  }: ColorProps) => {
+  ({ value, onChange, hideAlpha, defaultColor = "#fff", swatches = DEFAULT_SWATCHES, picker = "default" }: ColorProps) => {
     const [actualValue, setActualValue] = useState("");
     const deferred = useDeferredValue(value ?? defaultColor);
 
@@ -136,13 +125,21 @@ export const ColorPicker: FC<ColorProps> = memo(
       [onChange],
     );
 
+    const E = (picker === "swatches" ? BlockPicker : SketchPicker) as unknown as FC<any>;
+
     return (
       <div
         role="none"
+        className="fabric-colorPicker-container"
         // prevent default on mouse down to avoid selection issues
         onMouseDown={(e) => e.preventDefault()}
+        style={
+          {
+            "--color-selected": value,
+          } as any
+        }
       >
-        <SketchPicker
+        <E
           width="16rem"
           className={"fabric-colorPicker"}
           styles={
@@ -166,8 +163,7 @@ export const ColorPicker: FC<ColorProps> = memo(
                 },
                 picker: {
                   backgroundColor: "var(--fabric-bg)",
-                  boxShadow:
-                    "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
+                  boxShadow: "0 0 0 1px var(--color-shadow), 0 0 8px var(--fabric-shadow)",
                 },
                 checkboard: {
                   white: "transparent",
@@ -177,14 +173,11 @@ export const ColorPicker: FC<ColorProps> = memo(
             } as AnyObject
           }
           color={actualValue}
+          colors={swatches}
           presetColors={swatches}
           disableAlpha={hideAlpha}
-          onChange={({ rgb: { a = 1, ...rgb } }) =>
-            setActualValue(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
-          }
-          onChangeComplete={({ rgb: { a = 1, ...rgb } }) =>
-            handleChange(Color(rgb).alpha(a)[a < 1 ? "hexa" : "hex"]())
-          }
+          onChange={({ rgb: { a = 1, ...rgb } }) => setActualValue(chroma(rgb).alpha(a).hex())}
+          onChangeComplete={({ rgb: { a = 1, ...rgb } }) => handleChange(chroma(rgb).alpha(a).hex())}
         />
       </div>
     );

package/src/input/DateInput.tsx

@@ -77,7 +77,7 @@ export interface DateProps
  * The component supports both date and datetime types, with appropriate formatting.
  *
  * @param {DateProps} props - The properties for the DateInput component.
- * @returns {JSX.Element} - The rendered DateInput component.
+ * @returns {React.ReactElement} - The rendered DateInput component.
  */
 export const DateInput = ({
   ref,
@@ -236,7 +236,7 @@ export const DateInput = ({
             zIndex: "var(--z-popover)",
             ...floatingStyles,
           }}
-          className="shadow-lg bg-base ring-1 ring-tint-100"
+          className="shadow-lg bg-default ring-1 ring-tint-100"
           data-ref="dropdownBody"
           {...getFloatingProps()}
         >
@@ -251,7 +251,7 @@ export const DateInput = ({
             ref={arrowRef}
             context={context}
             strokeWidth={0.5}
-            className="fill-base stroke-muted"
+            className="fill-default stroke-muted"
           />
         </div>
       )}

package/src/input/Field.tsx

@@ -38,7 +38,7 @@ export interface FieldProps extends ChildrenProp, CssProp {
   /**
    * append to label end
    */
-  appendLabel?: JSX.Element | string | number | boolean;
+  appendLabel?: React.ReactElement | string | number | boolean;
   /**
    * info label at bottom
    */
@@ -90,7 +90,7 @@ export const Field = ({
         className={classNames(
           "fabric-fieldGroup",
           !plain && !noOutline && "outline",
-          !plain && "bg-base",
+          !plain && "bg-default",
           plain && "flex-wrap",
           "flex-1 rounded",
           !vertical && "flex",

package/src/input/File.tsx

@@ -82,7 +82,7 @@ const FileExists = (prop: AnyObject) => {
  * It handles file changes, invalid states, and read-only or disabled states.
  *
  * @param {FileInputProps} props - The properties for the FileInput component.
- * @returns {JSX.Element} - The rendered FileInput component.
+ * @returns {React.ReactElement} - The rendered FileInput component.
  */
 export const FileInput = ({
   ref,

package/src/input/Hidden.tsx

@@ -41,14 +41,12 @@ interface Props {
  * This is useful for cases where you need to update the form state without user interaction.
  *
  * @param {Object} props - Component properties.
- * @returns {JSX.Element} The rendered hidden input field and error icon.
+ * @returns {React.ReactElement} The rendered hidden input field and error icon.
  */
 export const HiddenInput = ({
   // @ts-expect-error ignore
-  // eslint-disable-next-line react/prop-types
   invalid,
   // @ts-expect-error ignore
-  // eslint-disable-next-line react/prop-types
   error,
   value = "",
   name,

package/src/input/Input.tsx

@@ -47,7 +47,7 @@ export interface TextInputProps extends InputProps, RefProp<HTMLInputElement> {
  * The component uses a wrapper to handle the clear button and styling, and it supports deferred value updates to optimize performance.
  *
  * @param {TextInputProps} props - The properties for the text input component.
- * @returns {JSX.Element} - A JSX element representing the text input field.
+ * @returns {React.ReactElement} - A JSX element representing the text input field.
  */
 export const Input = ({
   ref,

package/src/input/Number.tsx

@@ -56,7 +56,7 @@ export interface NumberProps
  * It also includes a clear button to reset the input value.
  *
  * @param {NumberProps} props - The properties for the Number input component.
- * @returns {JSX.Element} The rendered Number input component.
+ * @returns {React.ReactElement} The rendered Number input component.
  */
 export const Number = ({
   ref,

package/src/input/Password.tsx

@@ -51,7 +51,7 @@ export interface PasswordProps extends InputProps, RefProp<HTMLInputElement> {
  * Password input component with optional strength meter and toggle visibility.
  *
  * @param {PasswordProps} props - The properties for the Password component.
- * @returns {JSX.Element} The rendered Password input component.
+ * @returns {React.ReactElement} The rendered Password input component.
  */
 export const Password = ({
   ref,

package/src/input/Radio.tsx

@@ -31,7 +31,7 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
   /**
    * radio label
    */
-  label?: JSX.Element | string;
+  label?: React.ReactElement | string;
   /**
    * value
    */
@@ -76,7 +76,7 @@ export interface RadioProps extends RefProp<HTMLInputElement> {
  * It supports disabled and invalid states, and allows for custom width.
  *
  * @param {RadioProps} props - The properties for the Radio component.
- * @returns {JSX.Element} The rendered Radio input component.
+ * @returns {React.ReactElement} The rendered Radio input component.
  */
 export const Radio = ({
   ref,

package/src/input/RadioGroup.tsx

@@ -26,6 +26,7 @@ import {
   type ChildrenProp,
   type CssProp,
 } from "@react-fabric/core/dist/types/types";
+import classNames from "classnames";
 import { cloneElement } from "react";
 import { FieldWrapper } from "../internal/FieldWrapper";
 import { type Radio } from "./Radio";
@@ -38,7 +39,7 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
   /**
    * append to label end
    */
-  appendLabel?: JSX.Element | string | number | boolean;
+  appendLabel?: React.ReactElement | string | number | boolean;
   /**
    * field info
    */
@@ -84,20 +85,21 @@ export interface RadioGroupProps extends ChildrenProp<typeof Radio>, CssProp {
  * The component supports inline and vertical orientations, and can handle change events.
  *
  * @param {RadioGroupProps} props - The properties for the RadioGroup component.
- * @returns {JSX.Element} The rendered RadioGroup component.
+ * @returns {React.ReactElement} The rendered RadioGroup component.
  */
 export const RadioGroup = ({
   children,
   name,
   className,
   optionWidth,
+  vertical,
   value,
   onChange,
   ...rest
 }: RadioGroupProps) => {
   return (
     <FieldWrapper {...rest}>
-      <div className={className}>
+      <div className={classNames(className, vertical && "flex flex-col gap-1")}>
         {cloneChildren(children, (child: AnyObject) =>
           cloneElement(child, {
             name,

package/src/input/RangeSlider.tsx

@@ -103,7 +103,7 @@ export interface RangeProps
  * The component is designed to be flexible and customizable, allowing for various configurations.
  *
  * @param {RangeProps} props - The properties for the RangeSlider component.
- * @returns {JSX.Element} The rendered RangeSlider component.
+ * @returns {React.ReactElement} The rendered RangeSlider component.
  */
 export const RangeSlider = ({
   error,

package/src/input/Search.tsx

@@ -62,7 +62,7 @@ export interface SearchProps extends InputProps, RefProp<HTMLInputElement> {
  * and handling search actions with a debounce mechanism.
  *
  * @param {SearchProps} props - The properties for the Search component.
- * @returns {JSX.Element} The rendered Search input component.
+ * @returns {React.ReactElement} The rendered Search input component.
  */
 export const Search = ({
   ref,

package/src/input/Slider.tsx

@@ -105,7 +105,7 @@ export interface SliderProps
  * It also supports deferred value updates for smoother interactions.
  *
  * @param {SliderProps} props - The properties for the Slider component.
- * @returns {JSX.Element} The rendered Slider component.
+ * @returns {React.ReactElement} The rendered Slider component.
  */
 export const Slider = ({
   error,

package/src/input/Switch.tsx

@@ -41,7 +41,7 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
   /**
    * Switch label
    */
-  label?: JSX.Element | string;
+  label?: React.ReactElement | string;
   /**
    * checked
    */
@@ -94,7 +94,7 @@ export interface SwitchProps extends RefProp<HTMLInputElement> {
  * It supports disabled and invalid states, and handles change events.
  *
  * @param {SwitchProps} props - The properties for the Switch component.
- * @returns {JSX.Element} The rendered Switch input component.
+ * @returns {React.ReactElement} The rendered Switch input component.
  */
 export const Switch = ({
   ref,
@@ -137,8 +137,8 @@ export const Switch = ({
         invalid ? "ring-danger-500" : "ring-primary-500",
         disabled
           ? "opacity-50 cursor-not-allowed"
-          : "hover:opacity-100 cursor-pointer",
-        "inline-flex gap-1 py-1 items-center relative cursor-pointer opacity-85 rounded ring-offset-2 has-focus-visible:ring-1",
+          : "opacity-85 hover:opacity-100 cursor-pointer",
+        "inline-flex gap-1 py-1 items-center relative rounded ring-offset-2 has-focus-visible:ring-1",
       )}
       style={{ width }}
     >
@@ -147,7 +147,7 @@ export const Switch = ({
           actualValue && getBgClass(color ? `${color}-500` : "primary-500"),
           !actualValue &&
             (defaultColor ? getBgClass(`${defaultColor}-500`) : "bg-tint-200"),
-          "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] cursor-pointer rounded-full p-[0.25em] transition-colors duration-200 ease-in-out",
+          "relative grid grid-cols-2 items-center h-[1.5em] min-w-[2.5em] rounded-full p-[0.25em] transition-colors duration-200 ease-in-out",
         )}
         style={{
           backgroundColor: actualValue
@@ -157,7 +157,7 @@ export const Switch = ({
       >
         <input
           className={classNames(
-            "appearance-none absolute opacity-0 inset-0 bg-transparent border-none outline-none ring-0",
+            "appearance-none absolute opacity-0 inset-0 bg-transparent border-none cursor-[inherit] outline-none ring-0",
           )}
           aria-invalid={invalid}
           aria-disabled={disabled}

package/src/input/Textarea.tsx

@@ -63,7 +63,7 @@ export interface TextareaProps
  * providing a clear interface for text input with optional validation and accessibility features.
  *
  * @param {TextareaProps} props - The properties for the Textarea component.
- * @returns {JSX.Element} The rendered Textarea component.
+ * @returns {React.ReactElement} The rendered Textarea component.
  */
 export const Textarea = ({
   ref,

package/src/internal/InputWrapper.tsx

@@ -152,7 +152,6 @@ export const InputWrapper = ({
           className={classNames(
             "text-tint-500 hover:text-tint-700 p-1 z-1 flex-content",
             "fabric-inputClear",
-            textarea && "self-start mt-1 me-1",
           )}
         />
       )}
@@ -190,7 +189,7 @@ export const InputWrapper = ({
               ? "icon-[mdi--arrow-collapse]"
               : "icon-[mdi--arrow-expand]"
           }
-          className="hidden group-hover:block absolute top-0 end-0 bg-base hover:bg-tint-200 p-1 opacity-65 rounded-capped"
+          className="hidden group-hover:block absolute top-0 inset-e-0 bg-default hover:bg-tint-200 p-1 opacity-65 rounded-capped"
         />
       )}
     </div>

package/src/select/AutoComplete.tsx

@@ -43,10 +43,7 @@ import { type SelectProps } from "../types";
 import { Options } from "./Options";
 import { useSelect } from "./useSelect";
 
-type AutoCompleteProps = Omit<
-  SelectProps<string>,
-  "options" | "allowCreate" | "createOption"
-> & {
+type AutoCompleteProps = Omit<SelectProps<string>, "options" | "allowCreate" | "createOption"> & {
   /**
    * auto-complete history
    */
@@ -66,7 +63,7 @@ type AutoCompleteProps = Omit<
  * It supports multiple selections, history suggestions, and custom styling.
  *
  * @param {AutoCompleteProps} props - The properties for the AutoComplete component.
- * @returns {JSX.Element} The rendered AutoComplete component.
+ * @returns {React.ReactElement} The rendered AutoComplete component.
  */
 export const AutoComplete = ({
   ref,
@@ -156,9 +153,7 @@ export const AutoComplete = ({
     },
   });
 
-  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions(
-    [dismiss, navigation, typeahead],
-  );
+  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([dismiss, navigation, typeahead]);
 
   const referenceProps = useMemo(() => {
     const props: AnyObject = getReferenceProps();
@@ -167,9 +162,7 @@ export const AutoComplete = ({
       ...props,
       onFocus,
       onBlur(evt: React.FocusEvent) {
-        if (
-          evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)
-        ) {
+        if (evt.relatedTarget?.closest(`[data-select-dropdown="${dropdownKey}"]`)) {
           refs.domReference.current?.querySelector("input")?.focus();
           return;
         }
@@ -195,10 +188,7 @@ export const AutoComplete = ({
         } else if (evt.key === "Backspace") {
           !state.query && multiple && handleRemove();
         } else if (["ArrowUp", "ArrowDown"].includes(evt.key)) {
-          if (
-            ["ArrowUp", "ArrowDown"].includes(evt.key) &&
-            state.activeIndex === null
-          ) {
+          if (["ArrowUp", "ArrowDown"].includes(evt.key) && state.activeIndex === null) {
             setActiveIndex(state.selectedIndex);
           }
           setTimeout(() => {
@@ -207,17 +197,7 @@ export const AutoComplete = ({
         }
       },
     };
-  }, [
-    getReferenceProps,
-    onEnterPressed,
-    handleQuery,
-    onFocus,
-    onBlur,
-    multiple,
-    refs,
-    state.query,
-    state.activeIndex,
-  ]);
+  }, [getReferenceProps, onEnterPressed, handleQuery, onFocus, onBlur, multiple, refs, state.query, state.activeIndex]);
 
   const floatingProps = useMemo(() => {
     return getFloatingProps({
@@ -227,9 +207,7 @@ export const AutoComplete = ({
 
   const makeItemProps = useCallback(
     (item: AnyObject) => {
-      const selected = isArray(state.value)
-        ? state.value?.includes?.(item)
-        : state.value === item;
+      const selected = isArray(state.value) ? state.value?.includes?.(item) : state.value === item;
       return getItemProps({
         "data-selected": selected ? true : undefined,
         onClick() {
@@ -287,9 +265,7 @@ export const AutoComplete = ({
           "group flex-1 py-1 px-2 truncate text-start flex gap-1 relative min-h-5 justify-start",
           multiple ? "flex-wrap" : "flex-nowrap overflow-hidden",
         )}
-        onMouseUp={(e) =>
-          e.currentTarget.querySelector<HTMLElement>("input")?.focus()
-        }
+        onMouseUp={(e) => e.currentTarget.querySelector<HTMLElement>("input")?.focus()}
       >
         {displayValue}
         <textarea
@@ -314,28 +290,17 @@ export const AutoComplete = ({
           {...referenceProps}
           onChange={(evt) => handleQuery(evt.target.value)}
         />
-        <button
-          type="submit"
-          ref={submitRef}
-          tabIndex={-1}
-          className="opacity-0 absolute"
-        />
+        <button type="submit" ref={submitRef} tabIndex={-1} className="opacity-0 absolute" />
       </div>
       {state.loading && (
         <Icon
-          className={classNames(
-            "flex-content p-2 z-0 order-9 text-muted pointer-events-none",
-          )}
+          className={classNames("flex-content p-2 z-0 order-9 text-muted pointer-events-none")}
           icon="icon-[svg-spinners--eclipse]"
         />
       )}
       {state.open && !state.loading && (
-        <FloatingPortal>
-          <FloatingFocusManager
-            context={context}
-            initialFocus={-1}
-            visuallyHiddenDismiss
-          >
+        <FloatingPortal root={refs.domReference.current?.closest<HTMLElement>(".theme-base") ?? undefined}>
+          <FloatingFocusManager context={context} initialFocus={-1} visuallyHiddenDismiss closeOnFocusOut>
             <Options
               ref={refs.setFloating}
               className="outline shadow-lg max-h-[40vh] z-(--z-popover)"
@@ -348,11 +313,7 @@ export const AutoComplete = ({
               active={state.activeIndex}
               itemRef={setItemRef}
               itemProps={makeItemProps}
-              empty={
-                <div className="text-muted text-sm px-2 py-1">
-                  No history available
-                </div>
-              }
+              empty={<div className="text-muted text-sm px-2 py-1">No history available</div>}
             >
               {(item) => item}
             </Options>

package/src/select/DualList.tsx

@@ -95,7 +95,7 @@ export interface DualListProps<T>
  * This component is useful for scenarios where users need to manage selections from a larger set of options, such as in forms or settings.
  *
  * @param {DualListProps<T>} props - The properties for the DualList component.
- * @returns {JSX.Element} The rendered DualList component.
+ * @returns {React.ReactElement} The rendered DualList component.
  */
 export const DualList = <T extends AnyObject = string>({
   ref,
@@ -241,7 +241,7 @@ export const DualList = <T extends AnyObject = string>({
           />
         </div>
         <div className="self-center mx-2">
-          <ButtonGroup vertical className="outline overflow-hidden bg-base">
+          <ButtonGroup vertical className="outline overflow-hidden bg-default">
             <Button
               size="sm"
               variant="link"