@coopdigital/react 1.8.0 → 1.8.2

package/dist/components/DatePicker/DatePicker.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useMemo, useReducer, useCallback } from 'react';
 import { DayPicker } from 'react-day-picker';
@@ -30,10 +30,8 @@ const defaultFormatters = {
     formatWeekdayName: (d) => d.toLocaleDateString("default", { weekday: "short" }).slice(0, 2),
 };
 const Calendar = ({ captionLayout = "label", className, disabled, endMonth, formatters, showOutsideDays = true, startMonth, ...props }) => {
-    return (jsx(DayPicker, { captionLayout: captionLayout, className: className, disabled: disabled, endMonth: endMonth, formatters: {
-            ...defaultFormatters,
-            ...formatters,
-        }, navLayout: "around", showOutsideDays: showOutsideDays, startMonth: startMonth, weekStartsOn: 1, ...props }));
+    const combinedFormatters = useMemo(() => ({ ...defaultFormatters, ...formatters }), [formatters]);
+    return (jsx(DayPicker, { captionLayout: captionLayout, className: className, disabled: disabled, endMonth: endMonth, formatters: combinedFormatters, navLayout: "around", showOutsideDays: showOutsideDays, startMonth: startMonth, weekStartsOn: 1, ...props }));
 };
 const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy", disabled, disabledDates, endDate, error = false, id, initialDate = now, initialSelected = false, mode = "single", name, onChange, onSelect, ref, required = false, size, startDate, ...props }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
@@ -53,8 +51,10 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
     }
     const [state, setState] = useReducer((stale, fresh) => ({ ...stale, ...fresh }), { ...initialState, [mode]: initialValues.state, open: false, view: initialValues.view });
     const dispatchChanges = useCallback((value) => {
-        typeof onChange === "function" && onChange(value);
-        typeof onSelect === "function" && onSelect(value);
+        if (typeof onChange === "function")
+            onChange(value);
+        if (typeof onSelect === "function")
+            onSelect(value);
     }, [onChange, onSelect]);
     const updateValues = useCallback((selected) => {
         var _a, _b, _c;
@@ -111,6 +111,9 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
         id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
         name: name,
     };
+    const computedSuffix = useMemo(() => {
+        return disabled ? (jsx("span", { className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) })) : (jsx(Popover.Trigger, { "aria-label": "Choose date", className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) }));
+    }, [disabled]);
     const getPlaceholder = () => {
         const lowerCaseDateFormat = dateFormat.toLowerCase();
         switch (mode) {
@@ -124,19 +127,19 @@ const DatePicker = ({ className, closeOnSelect = true, dateFormat = "dd/MM/yyyy"
     };
     return (jsxs("div", { ...componentProps, children: [jsxs(Popover, { onOpenChange: setOpen, open: state.open, children: [jsx(Popover.Anchor, { className: "coop-datepicker-inner", children: jsx(TextInput, { autoComplete: "off", className: "coop-datepicker-input", disabled: disabled, id: valueProps.id + "_display", 
                             //maxLength={dateFormat.length}
-                            name: name + "_display", onChange: updateFromInput, placeholder: getPlaceholder(), ref: ref, required: required, size: size, suffix: disabled ? (jsx("span", { className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) })) : (jsx(Popover.Trigger, { "aria-label": "Choose date", className: "coop-datepicker-trigger", children: jsx(CalendarIcon, { width: 24 }) })), suffixInline: true, value: (_f = (_e = state === null || state === void 0 ? void 0 : state[mode]) === null || _e === void 0 ? void 0 : _e.input) !== null && _f !== void 0 ? _f : "" }) }), jsxs(Popover.Content, { "aria-label": "Date picker", className: "coop-datepicker-calendar bg-white", collisionPadding: 16, sideOffset: 4, children: [jsx(Calendar
+                            name: name + "_display", onChange: updateFromInput, placeholder: getPlaceholder(), ref: ref, required: required, size: size, suffix: computedSuffix, suffixInline: true, value: (_f = (_e = state === null || state === void 0 ? void 0 : state[mode]) === null || _e === void 0 ? void 0 : _e.input) !== null && _f !== void 0 ? _f : "" }) }), jsxs(Popover.Content, { "aria-label": "Date picker", className: "coop-datepicker-calendar bg-white", collisionPadding: 16, sideOffset: 4, children: [jsx(Calendar
                             // jsx-ally throws here because we set autoFocus, but this
                             // is not a standard element. Daypicker uses this value to
                             // focus the day rather than the nav when it renders.
-                            // eslint-disable-next-line jsx-a11y/no-autofocus
+                            // oxlint-disable-next-line jsx-a11y/no-autofocus
                             , { 
                                 // jsx-ally throws here because we set autoFocus, but this
                                 // is not a standard element. Daypicker uses this value to
                                 // focus the day rather than the nav when it renders.
-                                // eslint-disable-next-line jsx-a11y/no-autofocus
+                                // oxlint-disable-next-line jsx-a11y/no-autofocus
                                 autoFocus: true, captionLayout: "dropdown", 
                                 //defaultMonth={defaultMonth}
-                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CrossIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("div", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", role: "status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && (jsx("input", { ...valueProps, value: (_l = (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : (_k = state.single) === null || _k === void 0 ? void 0 : _k.input) !== null && _l !== void 0 ? _l : "" })), mode === "multiple" && (jsx("input", { ...valueProps, value: (_q = (_o = (_m = state.multiple) === null || _m === void 0 ? void 0 : _m.field) !== null && _o !== void 0 ? _o : (_p = state.multiple) === null || _p === void 0 ? void 0 : _p.input) !== null && _q !== void 0 ? _q : "" })), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${valueProps.id}_start`, name: `${name}_start`, value: (_v = (_t = (_s = (_r = state.range) === null || _r === void 0 ? void 0 : _r.field) === null || _s === void 0 ? void 0 : _s.from) !== null && _t !== void 0 ? _t : (_u = state.range) === null || _u === void 0 ? void 0 : _u.input) !== null && _v !== void 0 ? _v : "" }), jsx("input", { ...baseValueProps, id: `${valueProps.id}_end`, name: `${name}_end`, value: (_0 = (_y = (_x = (_w = state.range) === null || _w === void 0 ? void 0 : _w.field) === null || _x === void 0 ? void 0 : _x.to) !== null && _y !== void 0 ? _y : (_z = state.range) === null || _z === void 0 ? void 0 : _z.input) !== null && _0 !== void 0 ? _0 : "" })] }))] }));
+                                disabled: disabledDates, endMonth: endDate, month: state.view, onMonthChange: setView, onSelect: updateValues, startMonth: startDate, ...calendarProps[mode] }), jsxs("div", { className: "coop-datepicker-actions", children: [jsxs(Button, { "aria-label": "Cancel", className: "bg-tint-grey", onClick: resetState, size: "sm", children: ["Clear ", jsx(CrossIcon, { stroke: "black", strokeWidth: 1 })] }), jsx(Popover.Close, { asChild: true, children: jsxs(Button, { "aria-label": "Accept", size: "sm", children: ["OK ", jsx(TickIcon, { stroke: "white", strokeWidth: 1 })] }) })] })] })] }), jsx("output", { "aria-live": "assertive", className: "sr-only coop-datepicker-status", children: (_g = state.message) !== null && _g !== void 0 ? _g : footerMessage[mode] }), mode === "single" && (jsx("input", { ...valueProps, value: (_l = (_j = (_h = state.single) === null || _h === void 0 ? void 0 : _h.field) !== null && _j !== void 0 ? _j : (_k = state.single) === null || _k === void 0 ? void 0 : _k.input) !== null && _l !== void 0 ? _l : "" })), mode === "multiple" && (jsx("input", { ...valueProps, value: (_q = (_o = (_m = state.multiple) === null || _m === void 0 ? void 0 : _m.field) !== null && _o !== void 0 ? _o : (_p = state.multiple) === null || _p === void 0 ? void 0 : _p.input) !== null && _q !== void 0 ? _q : "" })), mode === "range" && (jsxs(Fragment, { children: [jsx("input", { ...baseValueProps, id: `${valueProps.id}_start`, name: `${name}_start`, value: (_v = (_t = (_s = (_r = state.range) === null || _r === void 0 ? void 0 : _r.field) === null || _s === void 0 ? void 0 : _s.from) !== null && _t !== void 0 ? _t : (_u = state.range) === null || _u === void 0 ? void 0 : _u.input) !== null && _v !== void 0 ? _v : "" }), jsx("input", { ...baseValueProps, id: `${valueProps.id}_end`, name: `${name}_end`, value: (_0 = (_y = (_x = (_w = state.range) === null || _w === void 0 ? void 0 : _w.field) === null || _x === void 0 ? void 0 : _x.to) !== null && _y !== void 0 ? _y : (_z = state.range) === null || _z === void 0 ? void 0 : _z.input) !== null && _0 !== void 0 ? _0 : "" })] }))] }));
 };
 DatePicker.slot = {
     field: true,

package/dist/components/DatePicker/datepicker-utils.js

@@ -72,13 +72,12 @@ const initialState = {
     validated: false,
 };
 function getSingleDate(date, df, now) {
-    var _a;
     if (!date)
         return initialState;
     let parsed;
     let input = "";
     if (typeof date === "string") {
-        input = (_a = date.toString()) !== null && _a !== void 0 ? _a : "";
+        input = date !== null && date !== void 0 ? date : "";
         parsed = parse(date, df, now);
     }
     else if (isValidDate(date)) {
@@ -191,7 +190,7 @@ const getDateValues = (mode, selected, dateFormat, now) => {
         return getRangeDate(selected, dateFormat, now);
 };
 const shouldSkipParsing = (value) => {
-    return typeof value !== "string" ? true : !!(value.length < 8 || value.split("/").length < 3);
+    return typeof value !== "string" ? true : value.length < 8 || value.split("/").length < 3;
 };
 const shouldClose = (mode, value, closeOnSelect) => {
     var _a, _b;
@@ -204,10 +203,10 @@ const shouldClose = (mode, value, closeOnSelect) => {
     else
         return false;
 };
-/* eslint-disable @typescript-eslint/no-unused-vars */
+/* oxlint-disable eslint/no-unused-vars */
 const isSingle = (m, d) => m === "single";
 const isMultiple = (m, d) => m === "multiple";
 const isRange = (m, d) => m === "range";
-/* eslint-enable @typescript-eslint/no-unused-vars */
+/* oxlint-enable eslint/no-unused-vars */
 
 export { getDateValues, getDefaultMonth, getEndDate, getISODateString, getInitialDate, getMultipleDate, getRangeDate, getRangeFromString, getSingleDate, getStartDate, isMultiple, isRange, isSingle, isValidDate, isValidRangeFrom, isValidRangeTo, shouldClose, shouldSkipParsing };

package/dist/components/Dialog/Dialog.js

@@ -13,7 +13,7 @@ const useDialog = () => {
         throw new Error("Dialog components must be used inside <Dialog>");
     return ctx;
 };
-const Dialog = ({ children, className, closedBy = "any", label, mode = "dialog", onClose, onOpen, onToggle, open = false, position, ref, role, ...props }) => {
+const Dialog = ({ children, className, closedBy = "any", label, mode = "dialog", onClose, onOpen, onToggle, open, position, ref, role, ...props }) => {
     const dialogRef = useRef(null);
     useEffect(() => {
         const dialog = dialogRef.current;

package/dist/components/Field/Field.js

@@ -31,7 +31,7 @@ const Field = ({ boxed = false, children, className, error = false, hideErrorBar
             var _a, _b, _c, _d;
             if (child && typeof child === "object" && "type" in child) {
                 if (typeof (child === null || child === void 0 ? void 0 : child.type) === "function" && "slot" in child.type) {
-                    const { slot } = child === null || child === void 0 ? void 0 : child.type;
+                    const { slot } = child.type;
                     slots.Control = child;
                     if (slots.Control.props) {
                         controlProps.inline = (_a = slot.inline) !== null && _a !== void 0 ? _a : false;

package/dist/components/Image/Image.js

@@ -11,8 +11,8 @@ const getContentfulParams = (src, width, height) => {
         ...(height ? [["h", height]] : []),
     ];
     params.forEach(([k, v]) => {
-        var _a;
-        (_a = url.searchParams.get(k)) !== null && _a !== void 0 ? _a : url.searchParams.set(k, v);
+        if (!url.searchParams.has(k))
+            url.searchParams.set(k, v);
     });
     return {
         height: (_a = url.searchParams.get("h")) !== null && _a !== void 0 ? _a : height,

package/dist/components/Textarea/Textarea.js

@@ -9,7 +9,7 @@ const DEBOUNCE_DELAY = 750;
 const charCountMessage = (remaining) => {
     return `You have ${Math.abs(remaining).toLocaleString()} ${Math.abs(remaining) === 1 ? "character" : "characters"} ${remaining < 0 ? "too many" : "remaining"}`;
 };
-const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange = undefined, placeholder, ref, rows = 4, size, ...props }) => {
+const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, counter = false, cutoff = false, disabled = false, error = false, id, maxLength, name, onChange: userOnChange, placeholder, ref, rows = 4, size, ...props }) => {
     var _a;
     const field = useField();
     const componentProps = {
@@ -31,7 +31,8 @@ const Textarea = ({ "aria-placeholder": ariaPlaceholder, className, cols = 30, c
     const showCounter = !disabled && counter && maxLength && remaining != null && debouncedRemaining != null;
     const handleChange = (e) => {
         userOnChange === null || userOnChange === void 0 ? void 0 : userOnChange(e);
-        maxLength && e.target && setRemaining(maxLength - e.target.value.length);
+        if (maxLength && e.target)
+            setRemaining(maxLength - e.target.value.length);
     };
     // const formItemProps = { "aria-disabled": disabled ? true : undefined }
     return (jsxs("div", { className: "coop-textarea-wrapper", children: [jsx("textarea", { ...componentProps, onChange: handleChange, ref: ref }), showCounter && (jsxs(Fragment, { children: [jsx("small", { "aria-hidden": "true", className: "coop-textarea-counter", ...(remaining < 0 && { "data-error": true }), children: charCountMessage(remaining) }), jsx("span", { "aria-live": "polite", className: "sr-only", children: charCountMessage(debouncedRemaining) })] }))] }));

package/dist/components/ValidationSummary/ValidationSummary.js

@@ -17,7 +17,7 @@ const ValidationSummary = ({ autoScroll = true, children, className, forceMount
     const slots = { ...useSlots(componentSlots, children) };
     const errors = React.isValidElement(slots.ValidationSummaryErrors) &&
         Object.keys((_a = slots.ValidationSummaryErrors.props.errors) !== null && _a !== void 0 ? _a : {});
-    const hasErrors = !!(Object.keys(errors).length > 0);
+    const hasErrors = Object.keys(errors).length > 0;
     const internalRef = useRef(null);
     useEffect(() => {
         var _a, _b;

package/dist/hooks/useSlots.js

@@ -3,7 +3,7 @@ import React from 'react';
 function isKey(x, k) {
     return k in x;
 }
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typecscript/no-explicit-any
 function isLazy(type) {
     return typeof type === "object" && type !== null && "_payload" in type && "_init" in type;
 }

package/dist/utils/index.js

@@ -10,6 +10,7 @@ const bgClassToColor = (userClasses) => {
     var _a, _b;
     return (_b = (_a = /bg-([^\s]+)/.exec(userClasses)) === null || _a === void 0 ? void 0 : _a[1]) !== null && _b !== void 0 ? _b : null;
 };
+// oxlint-disable-next-line typescript/no-unnecessary-type-parameters
 function getSlotProp(slot, prop) {
     if (isValidElement(slot) && prop in slot.props) {
         return slot.props[prop];

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.8.0",
+  "version": "1.8.2",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -100,11 +100,11 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.5.0",
+    "@coopdigital/styles": "^1.5.1",
     "@radix-ui/react-popover": "^1.1.17",
     "clsx": "^2.1.1",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "6a99f896553ea4541e8337bfa290d1838853a242"
+  "gitHead": "bbd5f9f7c7ff206270e54690655c3087ad7add8c"
 }

package/src/components/Button/Button.tsx

@@ -10,7 +10,7 @@ import { LoadingIcon } from "../icons"
 
 export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `button`. */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typescript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode

package/src/components/Card/Card.tsx

@@ -17,10 +17,9 @@ export interface CardProps extends HTMLAttributes<HTMLDivElement> {
   className?: string
   /** **(Optional)** Specify the URL that the Card will link to. */
   href?: string
-  /* eslint-disable @typescript-eslint/no-explicit-any */
   /** **(Optional)** Specify a custom element to use instead of `a`. */
+  // oxlint-disable-next-line typescript/no-explicit-any
   hrefAs?: React.FC<any> | ForwardRefExoticComponent<any> | string
-  /* eslint-enable */
   /** **(Optional)** Specify the position of the image in the Card. */
   imagePosition?: "left" | "right"
   /** **(Optional)** Specify the orientation of the Card. */

package/src/components/DatePicker/DatePicker.tsx

@@ -138,16 +138,15 @@ const Calendar = ({
   startMonth,
   ...props
 }: DayPickerProps) => {
+  const combinedFormatters = useMemo(() => ({ ...defaultFormatters, ...formatters }), [formatters])
+
   return (
     <DayPicker
       captionLayout={captionLayout}
       className={className}
       disabled={disabled}
       endMonth={endMonth}
-      formatters={{
-        ...defaultFormatters,
-        ...formatters,
-      }}
+      formatters={combinedFormatters}
       navLayout="around"
       showOutsideDays={showOutsideDays}
       startMonth={startMonth}
@@ -209,8 +208,8 @@ const DatePicker = ({
 
   const dispatchChanges = useCallback(
     (value: string | DateRangeStr | undefined) => {
-      typeof onChange === "function" && onChange(value)
-      typeof onSelect === "function" && onSelect(value)
+      if (typeof onChange === "function") onChange(value)
+      if (typeof onSelect === "function") onSelect(value)
     },
     [onChange, onSelect]
   )
@@ -284,6 +283,18 @@ const DatePicker = ({
     name: name,
   }
 
+  const computedSuffix = useMemo(() => {
+    return disabled ? (
+      <span className="coop-datepicker-trigger">
+        <CalendarIcon width={24} />
+      </span>
+    ) : (
+      <Popover.Trigger aria-label="Choose date" className="coop-datepicker-trigger">
+        <CalendarIcon width={24} />
+      </Popover.Trigger>
+    )
+  }, [disabled])
+
   const getPlaceholder = () => {
     const lowerCaseDateFormat = dateFormat.toLowerCase()
     switch (mode) {
@@ -312,17 +323,7 @@ const DatePicker = ({
             ref={ref}
             required={required}
             size={size}
-            suffix={
-              disabled ? (
-                <span className="coop-datepicker-trigger">
-                  <CalendarIcon width={24} />
-                </span>
-              ) : (
-                <Popover.Trigger aria-label="Choose date" className="coop-datepicker-trigger">
-                  <CalendarIcon width={24} />
-                </Popover.Trigger>
-              )
-            }
+            suffix={computedSuffix}
             suffixInline={true}
             value={state?.[mode]?.input ?? ""}
           />
@@ -337,7 +338,7 @@ const DatePicker = ({
             // jsx-ally throws here because we set autoFocus, but this
             // is not a standard element. Daypicker uses this value to
             // focus the day rather than the nav when it renders.
-            // eslint-disable-next-line jsx-a11y/no-autofocus
+            // oxlint-disable-next-line jsx-a11y/no-autofocus
             autoFocus
             captionLayout="dropdown"
             //defaultMonth={defaultMonth}
@@ -362,9 +363,9 @@ const DatePicker = ({
         </Popover.Content>
       </Popover>
 
-      <div aria-live="assertive" className="sr-only coop-datepicker-status" role="status">
+      <output aria-live="assertive" className="sr-only coop-datepicker-status">
         {state.message ?? footerMessage[mode]}
-      </div>
+      </output>
 
       {mode === "single" && (
         <input {...valueProps} value={state.single?.field ?? state.single?.input ?? ""} />

package/src/components/DatePicker/datepicker-utils.ts

@@ -131,7 +131,7 @@ export function getSingleDate(date: Date | DateBase, df: string, now: Date): RDa
   let input = ""
 
   if (typeof date === "string") {
-    input = date.toString() ?? ""
+    input = date ?? ""
     parsed = parse(date, df, now)
   } else if (isValidDate(date)) {
     input = format(date, df)
@@ -254,7 +254,7 @@ export const getDateValues = (mode: Mode, selected: DateType, dateFormat: string
 }
 
 export const shouldSkipParsing = (value: string): boolean => {
-  return typeof value !== "string" ? true : !!(value.length < 8 || value.split("/").length < 3)
+  return typeof value !== "string" ? true : value.length < 8 || value.split("/").length < 3
 }
 
 export const shouldClose = (mode: Mode, value: DateType, closeOnSelect?: boolean): boolean => {
@@ -264,8 +264,8 @@ export const shouldClose = (mode: Mode, value: DateType, closeOnSelect?: boolean
   else return false
 }
 
-/* eslint-disable @typescript-eslint/no-unused-vars */
+/* oxlint-disable eslint/no-unused-vars */
 export const isSingle = (m: Mode, d: DateType): d is Date & DateBase => m === "single"
 export const isMultiple = (m: Mode, d: DateType): d is Date[] & DateBase => m === "multiple"
 export const isRange = (m: Mode, d: DateType): d is DateRange & DateBase => m === "range"
-/* eslint-enable @typescript-eslint/no-unused-vars */
+/* oxlint-enable eslint/no-unused-vars */

package/src/components/Dialog/Dialog.tsx

@@ -102,7 +102,7 @@ const Dialog = ({
   onClose,
   onOpen,
   onToggle,
-  open = false,
+  open,
   position,
   ref,
   role,
@@ -190,7 +190,7 @@ const Dialog = ({
 
   return (
     <DialogContext.Provider value={{ ref: dialogRef }}>
-      {/*eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
+      {/*oxlint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
       <dialog
         {...componentProps}
         onCancel={handleCancel}

package/src/components/Field/Field.tsx

@@ -63,7 +63,7 @@ const Field = ({
 
       if (child && typeof child === "object" && "type" in child) {
         if (typeof child?.type === "function" && "slot" in child.type) {
-          const { slot } = child?.type as { slot: SlotConfig }
+          const { slot } = child.type as { slot: SlotConfig }
 
           slots.Control = child
 

package/src/components/Image/Image.tsx

@@ -26,7 +26,7 @@ const getContentfulParams = (src: string, width: string, height: string | undefi
   ]
 
   params.forEach(([k, v]) => {
-    url.searchParams.get(k) ?? url.searchParams.set(k, v)
+    if (!url.searchParams.has(k)) url.searchParams.set(k, v)
   })
 
   return {

package/src/components/Pill/Pill.tsx

@@ -9,7 +9,7 @@ import { hasUserBg } from "../../utils"
 
 export interface PillProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typecscript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode

package/src/components/Signpost/Signpost.tsx

@@ -8,7 +8,7 @@ import { Image, ImageProps } from "../Image"
 
 export interface SignpostProps extends HTMLAttributes<HTMLDivElement> {
   /** **(Optional)** Specify a custom element to override default `a`. */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typecscript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** Main content inside the component. It can be any valid JSX or string. */
   children: React.ReactNode

package/src/components/Tag/Tag.tsx

@@ -7,7 +7,7 @@ import { hasUserBg } from "../../../src/utils"
 
 export interface TagProps extends HTMLAttributes<HTMLAnchorElement> {
   /** **(Optional)** Specify a custom element to override default `a` or `span`. */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // oxlint-disable-next-line typecscript/no-explicit-any
   as?: React.FC<any> | ForwardRefExoticComponent<any> | string
   /** **(Optional)** Main content inside the component. It can be any valid JSX or string. */
   children?: React.ReactNode

package/src/components/Textarea/Textarea.tsx

@@ -58,7 +58,7 @@ const Textarea = ({
   id,
   maxLength,
   name,
-  onChange: userOnChange = undefined,
+  onChange: userOnChange,
   placeholder,
   ref,
   rows = 4,
@@ -89,7 +89,7 @@ const Textarea = ({
 
   const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
     userOnChange?.(e)
-    maxLength && e.target && setRemaining(maxLength - e.target.value.length)
+    if (maxLength && e.target) setRemaining(maxLength - e.target.value.length)
   }
   // const formItemProps = { "aria-disabled": disabled ? true : undefined }
   return (

package/src/components/ValidationSummary/ValidationSummary.tsx

@@ -1,5 +1,5 @@
 "use client"
-/* eslint-disable jsx-a11y/anchor-is-valid */
+/* oxlint-disable jsx-a11y/anchor-is-valid */
 
 import type { HTMLAttributes, JSX, ReactNode, Ref } from "react"
 
@@ -84,7 +84,7 @@ const ValidationSummary = ({
     React.isValidElement(slots.ValidationSummaryErrors) &&
     Object.keys((slots.ValidationSummaryErrors.props as ValidationSummaryErrorsProps).errors ?? {})
 
-  const hasErrors = !!(Object.keys(errors).length > 0)
+  const hasErrors = Object.keys(errors).length > 0
 
   const internalRef = useRef<HTMLDivElement>(null)
 

package/src/hooks/useSlots.ts

@@ -8,7 +8,7 @@ export function isKey<T extends object>(x: T, k: PropertyKey): k is keyof T {
   return k in x
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typecscript/no-explicit-any
 export function isLazy<T extends React.ComponentType<any>>(
   type: unknown
 ): type is LazyComponent<T> {

package/src/types/index.ts

@@ -13,7 +13,7 @@ export interface LazyPayload<T> {
   default: T
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// oxlint-disable-next-line typecscript/no-explicit-any
 export interface LazyComponent<T extends React.ComponentType<any>> {
   _init: (payload: unknown) => T
   _payload: Promise<LazyPayload<T>> | LazyPayload<T>

package/src/types/react.d.ts

@@ -1,4 +1,5 @@
-/* eslint-disable @typescript-eslint/consistent-indexed-object-style */
+// oxlint-disable unicorn/require-module-specifiers 
+// oxlint-disable typescript/consistent-indexed-object-style
 declare module "react" {
   interface CSSProperties {
     [key: `--${string}`]: string | number | undefined;

package/src/utils/index.ts

@@ -15,6 +15,7 @@ export const bgClassToColor = (userClasses: string) => {
   return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? null
 }
 
+// oxlint-disable-next-line typescript/no-unnecessary-type-parameters
 export function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined {
   if (isValidElement(slot) && prop in (slot.props as object)) {
     return (slot.props as Record<string, unknown>)[prop] as R