@obosbbl/grunnmuren-react 1.4.8 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -7,5 +7,7 @@ export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
|
|
|
7
7
|
className?: string;
|
|
8
8
|
/** Error message for the form control */
|
|
9
9
|
error?: string;
|
|
10
|
+
/** Disables the built in HTML5 validation. If using custom validation for an entire form, consider setting `noValidate` on the form element instead. @default false */
|
|
11
|
+
disableValidation?: boolean;
|
|
10
12
|
}
|
|
11
|
-
export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "
|
|
13
|
+
export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "form" | "error" | "slot" | "style" | "title" | "pattern" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "value" | "list" | "step" | "autoComplete" | "accept" | "alt" | "autoFocus" | "capture" | "checked" | "disabled" | "multiple" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "maxLength" | "minLength" | "src" | "crossOrigin" | "height" | "width" | "name" | "type" | "enterKeyHint" | "max" | "min" | "readOnly" | "required" | "size" | "disableValidation"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -3,7 +3,7 @@ export interface RadioGroupProps extends Omit<React.ComponentPropsWithoutRef<'di
|
|
|
3
3
|
/** The value of the radio button to be initially selected. For uncontrolled usage */
|
|
4
4
|
defaultValue?: string;
|
|
5
5
|
/** Help text for the radio group. */
|
|
6
|
-
description?:
|
|
6
|
+
description?: React.ReactNode;
|
|
7
7
|
/** The `name` attribute for the radio buttons. */
|
|
8
8
|
name: string;
|
|
9
9
|
/** The label for the radio group. */
|
|
@@ -2,12 +2,14 @@
|
|
|
2
2
|
export interface TextAreaProps extends React.ComponentPropsWithoutRef<'textarea'> {
|
|
3
3
|
children?: never;
|
|
4
4
|
/** Help text for the form control */
|
|
5
|
-
description?:
|
|
5
|
+
description?: React.ReactNode;
|
|
6
6
|
/** Error message for the form control */
|
|
7
7
|
error?: string;
|
|
8
8
|
/** Label for the form control */
|
|
9
9
|
label: string;
|
|
10
|
-
/**
|
|
11
|
-
validate?:
|
|
10
|
+
/** @deprecated. use `disableValidation` instead */
|
|
11
|
+
validate?: never;
|
|
12
|
+
/** Disables the built in HTML5 validation. If using custom validation for an entire form, consider setting `noValidate` on the form element instead. @default false */
|
|
13
|
+
disableValidation?: boolean;
|
|
12
14
|
}
|
|
13
15
|
export declare const TextArea: import("react").ForwardRefExoticComponent<TextAreaProps & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
export interface TextFieldProps extends React.ComponentPropsWithoutRef<'input'> {
|
|
3
3
|
children?: never;
|
|
4
4
|
/** Help text for the form control */
|
|
5
|
-
description?:
|
|
5
|
+
description?: React.ReactNode;
|
|
6
6
|
/** Error message for the form control */
|
|
7
7
|
error?: string;
|
|
8
8
|
/** Label for the form control */
|
|
@@ -11,7 +11,9 @@ export interface TextFieldProps extends React.ComponentPropsWithoutRef<'input'>
|
|
|
11
11
|
leftAddon?: React.ReactNode;
|
|
12
12
|
/** React node on the left (ex. icon, text, component) */
|
|
13
13
|
rightAddon?: React.ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
validate?:
|
|
14
|
+
/** @deprecated. use `disableValidation` instead */
|
|
15
|
+
validate?: never;
|
|
16
|
+
/** Disables the built in HTML5 validation. If using custom validation for an entire form, consider setting `noValidate` on the form element instead. @default false */
|
|
17
|
+
disableValidation?: boolean;
|
|
16
18
|
}
|
|
17
19
|
export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
|
package/dist/grunnmuren.es.js
CHANGED
|
@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
|
|
|
29
29
|
}
|
|
30
30
|
return target;
|
|
31
31
|
};
|
|
32
|
-
import { useState, useCallback, useEffect, useId, createContext, useContext, forwardRef, Children, isValidElement, cloneElement,
|
|
32
|
+
import { useState, useCallback, useEffect, useId, createContext, useContext, forwardRef, Children, isValidElement, cloneElement, useRef, useMemo } from "react";
|
|
33
33
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
34
34
|
import useCollapse from "react-collapsed";
|
|
35
35
|
import cx from "clsx";
|
|
@@ -159,39 +159,40 @@ function useFormControlValidity(ref, enabled = true) {
|
|
|
159
159
|
const [validationMessage, setValidationMessage] = useState();
|
|
160
160
|
const onBlur = useCallback((event) => {
|
|
161
161
|
const isValid = event.target.checkValidity();
|
|
162
|
-
if (isValid
|
|
162
|
+
if (isValid) {
|
|
163
163
|
setValidity("valid");
|
|
164
164
|
setValidationMessage(void 0);
|
|
165
165
|
}
|
|
166
|
-
}, [
|
|
166
|
+
}, []);
|
|
167
167
|
const onInput = useCallback((event) => {
|
|
168
|
-
if (
|
|
168
|
+
if (validity !== "indeterminate") {
|
|
169
169
|
const isValid = event.target.checkValidity();
|
|
170
170
|
if (isValid) {
|
|
171
171
|
setValidity("valid");
|
|
172
172
|
setValidationMessage(void 0);
|
|
173
173
|
}
|
|
174
174
|
}
|
|
175
|
-
}, [
|
|
175
|
+
}, [validity]);
|
|
176
176
|
const onInvalid = useCallback((event) => {
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
}
|
|
183
|
-
}, [enabled]);
|
|
177
|
+
event.preventDefault();
|
|
178
|
+
const message = event.target.validationMessage;
|
|
179
|
+
setValidationMessage(message);
|
|
180
|
+
setValidity("invalid");
|
|
181
|
+
}, []);
|
|
184
182
|
useEffect(() => {
|
|
183
|
+
var _a;
|
|
185
184
|
const { current } = ref;
|
|
186
|
-
current == null ? void 0 : current.
|
|
187
|
-
|
|
188
|
-
|
|
185
|
+
if (enabled && ((_a = current == null ? void 0 : current.form) == null ? void 0 : _a.noValidate) !== true) {
|
|
186
|
+
current == null ? void 0 : current.addEventListener("blur", onBlur);
|
|
187
|
+
current == null ? void 0 : current.addEventListener("input", onInput);
|
|
188
|
+
current == null ? void 0 : current.addEventListener("invalid", onInvalid);
|
|
189
|
+
}
|
|
189
190
|
return () => {
|
|
190
191
|
current == null ? void 0 : current.removeEventListener("blur", onBlur);
|
|
191
192
|
current == null ? void 0 : current.removeEventListener("input", onInput);
|
|
192
193
|
current == null ? void 0 : current.removeEventListener("invalid", onInvalid);
|
|
193
194
|
};
|
|
194
|
-
});
|
|
195
|
+
}, [enabled, onInput]);
|
|
195
196
|
return { validity, validationMessage };
|
|
196
197
|
}
|
|
197
198
|
function useFallbackId(id) {
|
|
@@ -586,15 +587,23 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
586
587
|
children,
|
|
587
588
|
className,
|
|
588
589
|
error,
|
|
589
|
-
id: idProp
|
|
590
|
+
id: idProp,
|
|
591
|
+
disableValidation = false
|
|
590
592
|
} = _a, rest = __objRest(_a, [
|
|
591
593
|
"children",
|
|
592
594
|
"className",
|
|
593
595
|
"error",
|
|
594
|
-
"id"
|
|
596
|
+
"id",
|
|
597
|
+
"disableValidation"
|
|
595
598
|
]);
|
|
599
|
+
const ownRef = useRef(null);
|
|
600
|
+
const {
|
|
601
|
+
validity,
|
|
602
|
+
validationMessage
|
|
603
|
+
} = useFormControlValidity(ownRef, !disableValidation);
|
|
596
604
|
const id = useFallbackId(idProp);
|
|
597
605
|
const errorMsgId = id + "err";
|
|
606
|
+
const errorMsg = error != null ? error : validationMessage;
|
|
598
607
|
return /* @__PURE__ */ jsxs("div", {
|
|
599
608
|
className: "grid gap-2",
|
|
600
609
|
children: [/* @__PURE__ */ jsxs("label", {
|
|
@@ -611,11 +620,11 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
611
620
|
"aria-describedby": cx({
|
|
612
621
|
[errorMsgId]: !!error
|
|
613
622
|
}),
|
|
614
|
-
"aria-invalid": !!error
|
|
623
|
+
"aria-invalid": !!error || validity === "invalid"
|
|
615
624
|
})), children]
|
|
616
|
-
}), !!
|
|
625
|
+
}), !!errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
|
|
617
626
|
id: errorMsgId,
|
|
618
|
-
children:
|
|
627
|
+
children: errorMsg
|
|
619
628
|
})]
|
|
620
629
|
});
|
|
621
630
|
});
|
|
@@ -1327,21 +1336,19 @@ const TextArea = forwardRef((props, ref) => {
|
|
|
1327
1336
|
error,
|
|
1328
1337
|
id: idProp,
|
|
1329
1338
|
label,
|
|
1330
|
-
|
|
1331
|
-
validate = true
|
|
1339
|
+
disableValidation = false
|
|
1332
1340
|
} = _a, rest = __objRest(_a, [
|
|
1333
1341
|
"description",
|
|
1334
1342
|
"error",
|
|
1335
1343
|
"id",
|
|
1336
1344
|
"label",
|
|
1337
|
-
"
|
|
1338
|
-
"validate"
|
|
1345
|
+
"disableValidation"
|
|
1339
1346
|
]);
|
|
1340
1347
|
const ownRef = useRef(null);
|
|
1341
1348
|
const {
|
|
1342
1349
|
validity,
|
|
1343
1350
|
validationMessage
|
|
1344
|
-
} = useFormControlValidity(ownRef,
|
|
1351
|
+
} = useFormControlValidity(ownRef, !disableValidation);
|
|
1345
1352
|
const id = useFallbackId(idProp);
|
|
1346
1353
|
const helpTextId = id + "help";
|
|
1347
1354
|
const errorMsgId = id + "err";
|
|
@@ -1350,7 +1357,7 @@ const TextArea = forwardRef((props, ref) => {
|
|
|
1350
1357
|
className: "grid gap-2",
|
|
1351
1358
|
children: [/* @__PURE__ */ jsx(FormLabel, {
|
|
1352
1359
|
htmlFor: id,
|
|
1353
|
-
isRequired: required,
|
|
1360
|
+
isRequired: props.required,
|
|
1354
1361
|
isInvalid: !!error || validity === "invalid",
|
|
1355
1362
|
children: label
|
|
1356
1363
|
}), description && /* @__PURE__ */ jsx(FormHelperText, {
|
|
@@ -1359,8 +1366,7 @@ const TextArea = forwardRef((props, ref) => {
|
|
|
1359
1366
|
}), /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({
|
|
1360
1367
|
as: "textarea",
|
|
1361
1368
|
ref: composeRefs(ownRef, ref),
|
|
1362
|
-
id
|
|
1363
|
-
required
|
|
1369
|
+
id
|
|
1364
1370
|
}, rest), {
|
|
1365
1371
|
isInvalid: !!error || validity === "invalid",
|
|
1366
1372
|
"aria-describedby": cx({
|
|
@@ -1379,23 +1385,21 @@ const TextField = forwardRef((props, ref) => {
|
|
|
1379
1385
|
error,
|
|
1380
1386
|
id: idProp,
|
|
1381
1387
|
label,
|
|
1382
|
-
required,
|
|
1383
1388
|
type = "text",
|
|
1384
|
-
|
|
1389
|
+
disableValidation = false
|
|
1385
1390
|
} = _a, rest = __objRest(_a, [
|
|
1386
1391
|
"description",
|
|
1387
1392
|
"error",
|
|
1388
1393
|
"id",
|
|
1389
1394
|
"label",
|
|
1390
|
-
"required",
|
|
1391
1395
|
"type",
|
|
1392
|
-
"
|
|
1396
|
+
"disableValidation"
|
|
1393
1397
|
]);
|
|
1394
1398
|
const ownRef = useRef(null);
|
|
1395
1399
|
const {
|
|
1396
1400
|
validity,
|
|
1397
1401
|
validationMessage
|
|
1398
|
-
} = useFormControlValidity(ownRef,
|
|
1402
|
+
} = useFormControlValidity(ownRef, !disableValidation);
|
|
1399
1403
|
const id = useFallbackId(idProp);
|
|
1400
1404
|
const helpTextId = id + "help";
|
|
1401
1405
|
const errorMsgId = id + "err";
|
|
@@ -1404,7 +1408,7 @@ const TextField = forwardRef((props, ref) => {
|
|
|
1404
1408
|
className: "grid gap-2",
|
|
1405
1409
|
children: [/* @__PURE__ */ jsx(FormLabel, {
|
|
1406
1410
|
htmlFor: id,
|
|
1407
|
-
isRequired: required,
|
|
1411
|
+
isRequired: props.required,
|
|
1408
1412
|
isInvalid: !!error || validity === "invalid",
|
|
1409
1413
|
children: label
|
|
1410
1414
|
}), description && /* @__PURE__ */ jsx(FormHelperText, {
|
|
@@ -1412,7 +1416,6 @@ const TextField = forwardRef((props, ref) => {
|
|
|
1412
1416
|
children: description
|
|
1413
1417
|
}), /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({
|
|
1414
1418
|
id,
|
|
1415
|
-
required,
|
|
1416
1419
|
ref: composeRefs(ownRef, ref),
|
|
1417
1420
|
type
|
|
1418
1421
|
}, rest), {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@obosbbl/grunnmuren-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.0",
|
|
4
4
|
"description": "OBOS Grunnmuren design system React components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
"types": "./dist/index.d.ts",
|
|
19
19
|
"devDependencies": {
|
|
20
20
|
"@babel/core": "7.19.3",
|
|
21
|
-
"@obosbbl/grunnmuren-tailwind": "0.7.
|
|
21
|
+
"@obosbbl/grunnmuren-tailwind": "0.7.3",
|
|
22
22
|
"@storybook/addon-controls": "6.5.12",
|
|
23
23
|
"@storybook/addon-docs": "6.5.12",
|
|
24
24
|
"@storybook/addon-postcss": "2.0.0",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"@types/react": "18.0.21",
|
|
29
29
|
"@types/react-dom": "18.0.6",
|
|
30
30
|
"@vitejs/plugin-react": "1.3.2",
|
|
31
|
-
"postcss": "8.4.
|
|
31
|
+
"postcss": "8.4.18",
|
|
32
32
|
"react": "18.2.0",
|
|
33
33
|
"react-dom": "18.2.0",
|
|
34
34
|
"require-from-string": "2.0.2",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"react-use": "17.4.0"
|
|
46
46
|
},
|
|
47
47
|
"peerDependencies": {
|
|
48
|
-
"@obosbbl/grunnmuren-tailwind": "^0.7.
|
|
48
|
+
"@obosbbl/grunnmuren-tailwind": "^0.7.3",
|
|
49
49
|
"react": "^18"
|
|
50
50
|
},
|
|
51
51
|
"peerDependenciesMeta": {
|