@coopdigital/react 1.12.0 → 1.13.0

package/dist/utils/index.d.ts

@@ -1,5 +1,8 @@
-export declare const bgPropToClass: (color: string, userClasses?: string) => string;
-export declare const hasUserBg: (userClasses?: string) => boolean;
-export declare const hasUserBorder: (userClasses?: string) => boolean;
-export declare const bgClassToColor: (userClasses: string) => string | null;
-export declare function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined;
+//#region src/utils/index.d.ts
+declare const bgPropToClass: (color: string, userClasses?: string) => string;
+declare const hasUserBg: (userClasses?: string) => boolean;
+declare const hasUserBorder: (userClasses?: string) => boolean;
+declare const bgClassToColor: (userClasses: string) => string | null;
+declare function getSlotProp<R = unknown>(slot: React.ReactNode, prop: string): R | undefined;
+//#endregion
+export { bgClassToColor, bgPropToClass, getSlotProp, hasUserBg, hasUserBorder };

package/dist/utils/index.js

@@ -1,21 +1,17 @@
-import { isValidElement } from 'react';
-
+import { isValidElement } from "react";
+//#region src/utils/index.ts
+const bgPropToClass = (color, userClasses) => userClasses?.includes("bg-") ? "" : `bg-${color}`;
 const hasUserBg = (userClasses) => {
-    return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("bg-")) ? true : false;
+	return typeof userClasses === "string" && userClasses?.includes("bg-") ? true : false;
 };
 const hasUserBorder = (userClasses) => {
-    return typeof userClasses === "string" && (userClasses === null || userClasses === void 0 ? void 0 : userClasses.includes("border-")) ? true : false;
+	return typeof userClasses === "string" && userClasses?.includes("border-") ? true : false;
 };
 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;
+	return /bg-([^\s]+)/.exec(userClasses)?.[1] ?? 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];
-    }
-    return undefined;
+	if (isValidElement(slot) && prop in slot.props) return slot.props[prop];
 }
-
-export { bgClassToColor, getSlotProp, hasUserBg, hasUserBorder };
+//#endregion
+export { bgClassToColor, bgPropToClass, getSlotProp, hasUserBg, hasUserBorder };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "1.12.0",
+  "version": "1.13.0",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -20,6 +20,7 @@
       "default": "./dist/components/icons/index.js"
     }
   },
+  "sideEffects": false,
   "files": [
     "dist",
     "src/**/*.{tsx,ts}",
@@ -100,12 +101,12 @@
     "storybook": "$storybook"
   },
   "dependencies": {
-    "@coopdigital/styles": "^1.8.0",
+    "@coopdigital/styles": "^1.9.0",
     "@radix-ui/react-popover": "^1.1.17",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
     "merge-refs": "^2.0.0",
     "react-day-picker": "^10.0.1"
   },
-  "gitHead": "c8027883e30598c32aaf9c458862793e31ce520c"
+  "gitHead": "d5e150b91846f92c6c0fdd72bb162e9d5548787c"
 }

package/src/components/Select/Select.tsx

@@ -22,6 +22,11 @@ export interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement
   disabled?: boolean
   /** **(Optional)** Specify the Select error state. */
   error?: boolean
+  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+   *
+   * Default: false
+   */
+  fit?: boolean
   /** **(Optional)** Specify the Select id. Will be auto-generated if not set. */
   id?: string
   /** Specify the Select name. */
@@ -53,6 +58,7 @@ const Select = ({
   className,
   disabled,
   error,
+  fit = false,
   id,
   name,
   ref,
@@ -64,6 +70,7 @@ const Select = ({
   const componentProps = {
     className: clsx("coop-select", "coop-field-element", className),
     "data-error": error ?? undefined,
+    "data-fit": fit || undefined,
     "data-size": size ?? undefined,
     disabled,
     id: id ?? field?.id,

package/src/components/TextInput/TextInput.tsx

@@ -16,6 +16,11 @@ export interface TextInputProps extends Omit<
   disabled?: boolean
   /** **(Optional)** Specify the TextInput error state. */
   error?: boolean
+  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+   *
+   * Default: false
+   */
+  fit?: boolean
   /** **(Optional)** Specify the TextInput id. Will be auto-generated if not set. */
   id?: string
   /** Specify the TextInput name. */
@@ -55,6 +60,7 @@ const TextInput = ({
   className,
   disabled,
   error = false,
+  fit = false,
   id,
   name,
   placeholder,
@@ -73,6 +79,7 @@ const TextInput = ({
     "aria-placeholder": placeholder ?? ariaPlaceholder ?? undefined,
     className: clsx("coop-text-input", "coop-field-element", className),
     "data-error": error || undefined,
+    "data-fit": fit || undefined,
     "data-size": size?.length ? size : undefined,
     disabled,
     id: id ?? field?.id,

package/src/components/Textarea/Textarea.tsx

@@ -31,6 +31,11 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
   disabled?: boolean
   /** **(Optional)** Specify the Textarea error state */
   error?: boolean
+  /** **(Optional)** Specify the wrapper behaviour. When true, width is fit-content, otherwise it expands to 100%.
+   *
+   * Default: false
+   */
+  fit?: boolean
   /** **(Optional)** Specify the Textarea id. Will be auto-generated if not set. */
   id?: string
   /** **(Optional)** Specify the Textarea maxLength. This is the maximum number of characters users can enter. */
@@ -55,6 +60,7 @@ const Textarea = ({
   cutoff = false,
   disabled = false,
   error = false,
+  fit = false,
   id,
   maxLength,
   name,
@@ -72,6 +78,7 @@ const Textarea = ({
     className: clsx("coop-textarea", "coop-field-element", className),
     cols,
     "data-error": error ?? undefined,
+    "data-fit": fit || undefined,
     "data-size": size ?? undefined,
     disabled,
     id: id ?? field?.id,

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useDebounce } from "./useDebounce"
+export { useId } from "./useId"
+export { useSlots } from "./useSlots"

package/src/index.ts

@@ -1,27 +1,27 @@
-export * from "./components/AlertBanner"
-export * from "./components/Author"
-export * from "./components/Button"
-export * from "./components/Card"
-export * from "./components/Checkbox"
-export * from "./components/DatePicker"
-export * from "./components/Dialog"
-export * from "./components/Expandable"
-export * from "./components/Field"
-export * from "./components/Fieldset"
-export * from "./components/Flourish"
-export * from "./components/Form"
-export * from "./components/Image"
-export * from "./components/LoadingSpinner"
-export * from "./components/Pill"
-export * from "./components/Popover"
-export * from "./components/Radio"
-export * from "./components/RootSVG"
-export * from "./components/Searchbox"
-export * from "./components/Select"
-export * from "./components/Signpost"
-export * from "./components/SkipNav"
-export * from "./components/Squircle"
-export * from "./components/Tag"
-export * from "./components/Textarea"
-export * from "./components/TextInput"
-export * from "./components/ValidationSummary"
+export * from "./components/AlertBanner/AlertBanner"
+export * from "./components/Author/Author"
+export * from "./components/Button/Button"
+export * from "./components/Card/Card"
+export * from "./components/Checkbox/Checkbox"
+export * from "./components/DatePicker/DatePicker"
+export * from "./components/Dialog/Dialog"
+export * from "./components/Expandable/Expandable"
+export * from "./components/Field/Field"
+export * from "./components/Fieldset/Fieldset"
+export * from "./components/Flourish/Flourish"
+export * from "./components/Form/Form"
+export * from "./components/Image/Image"
+export * from "./components/LoadingSpinner/LoadingSpinner"
+export * from "./components/Pill/Pill"
+export * from "./components/Popover/Popover"
+export * from "./components/Radio/Radio"
+export * from "./components/RootSVG/RootSVG"
+export * from "./components/Searchbox/Searchbox"
+export * from "./components/Select/Select"
+export * from "./components/Signpost/Signpost"
+export * from "./components/SkipNav/SkipNav"
+export * from "./components/Squircle/Squircle"
+export * from "./components/Tag/Tag"
+export * from "./components/Textarea/Textarea"
+export * from "./components/TextInput/TextInput"
+export * from "./components/ValidationSummary/ValidationSummary"

package/dist/components/Field/Field.context.d.ts

@@ -1,14 +0,0 @@
-export interface FieldConfig {
-    disabled: boolean;
-    id: string;
-    inline?: boolean;
-    suffix?: string;
-}
-export interface FieldContextValue {
-    disabled?: boolean;
-    id?: string;
-    inline?: boolean;
-    suffix?: string;
-}
-export declare const FieldContext: import("react").Context<FieldContextValue | null>;
-export declare const useField: () => FieldContextValue | null;

package/dist/components/Searchbox/Searchbox.context.d.ts

@@ -1,13 +0,0 @@
-import { RefObject } from "react";
-import { StandardSizes } from "../../types";
-interface SearchboxContextValue {
-    buttonId?: string;
-    id?: string;
-    inputId?: string;
-    isLoading?: boolean;
-    ref?: RefObject<HTMLFormElement | null> | null;
-    size?: StandardSizes;
-}
-export declare const SearchboxContext: import("react").Context<SearchboxContextValue>;
-export declare const useSearchbox: () => SearchboxContextValue;
-export {};

package/dist/components/ValidationSummary/validationsummary-utils.d.ts

@@ -1,2 +0,0 @@
-export declare const sanitizeFieldId: (id: string) => string;
-export declare const getFieldElement: (field: string, id?: string) => HTMLInputElement | null;