@obosbbl/grunnmuren-react 1.4.9 → 1.5.1
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>>;
|
|
@@ -7,7 +7,9 @@ export interface TextAreaProps extends React.ComponentPropsWithoutRef<'textarea'
|
|
|
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>>;
|
|
@@ -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 || validationMessage;
|
|
598
607
|
return /* @__PURE__ */ jsxs("div", {
|
|
599
608
|
className: "grid gap-2",
|
|
600
609
|
children: [/* @__PURE__ */ jsxs("label", {
|
|
@@ -608,14 +617,12 @@ const Checkbox = forwardRef((props, ref) => {
|
|
|
608
617
|
ref,
|
|
609
618
|
type: "checkbox"
|
|
610
619
|
}, rest), {
|
|
611
|
-
"aria-describedby":
|
|
612
|
-
|
|
613
|
-
}),
|
|
614
|
-
"aria-invalid": !!error
|
|
620
|
+
"aria-describedby": errorMsg ? errorMsgId : void 0,
|
|
621
|
+
"aria-invalid": !!error || validity === "invalid"
|
|
615
622
|
})), children]
|
|
616
|
-
}),
|
|
623
|
+
}), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
|
|
617
624
|
id: errorMsgId,
|
|
618
|
-
children:
|
|
625
|
+
children: errorMsg
|
|
619
626
|
})]
|
|
620
627
|
});
|
|
621
628
|
});
|
|
@@ -1327,30 +1334,28 @@ const TextArea = forwardRef((props, ref) => {
|
|
|
1327
1334
|
error,
|
|
1328
1335
|
id: idProp,
|
|
1329
1336
|
label,
|
|
1330
|
-
|
|
1331
|
-
validate = true
|
|
1337
|
+
disableValidation = false
|
|
1332
1338
|
} = _a, rest = __objRest(_a, [
|
|
1333
1339
|
"description",
|
|
1334
1340
|
"error",
|
|
1335
1341
|
"id",
|
|
1336
1342
|
"label",
|
|
1337
|
-
"
|
|
1338
|
-
"validate"
|
|
1343
|
+
"disableValidation"
|
|
1339
1344
|
]);
|
|
1340
1345
|
const ownRef = useRef(null);
|
|
1341
1346
|
const {
|
|
1342
1347
|
validity,
|
|
1343
1348
|
validationMessage
|
|
1344
|
-
} = useFormControlValidity(ownRef,
|
|
1349
|
+
} = useFormControlValidity(ownRef, !disableValidation);
|
|
1345
1350
|
const id = useFallbackId(idProp);
|
|
1346
1351
|
const helpTextId = id + "help";
|
|
1347
1352
|
const errorMsgId = id + "err";
|
|
1348
|
-
const errorMsg = error
|
|
1353
|
+
const errorMsg = error || validationMessage;
|
|
1349
1354
|
return /* @__PURE__ */ jsxs("div", {
|
|
1350
1355
|
className: "grid gap-2",
|
|
1351
1356
|
children: [/* @__PURE__ */ jsx(FormLabel, {
|
|
1352
1357
|
htmlFor: id,
|
|
1353
|
-
isRequired: required,
|
|
1358
|
+
isRequired: props.required,
|
|
1354
1359
|
isInvalid: !!error || validity === "invalid",
|
|
1355
1360
|
children: label
|
|
1356
1361
|
}), description && /* @__PURE__ */ jsx(FormHelperText, {
|
|
@@ -1359,14 +1364,13 @@ const TextArea = forwardRef((props, ref) => {
|
|
|
1359
1364
|
}), /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({
|
|
1360
1365
|
as: "textarea",
|
|
1361
1366
|
ref: composeRefs(ownRef, ref),
|
|
1362
|
-
id
|
|
1363
|
-
required
|
|
1367
|
+
id
|
|
1364
1368
|
}, rest), {
|
|
1365
1369
|
isInvalid: !!error || validity === "invalid",
|
|
1366
1370
|
"aria-describedby": cx({
|
|
1367
|
-
[errorMsgId]:
|
|
1371
|
+
[errorMsgId]: errorMsg,
|
|
1368
1372
|
[helpTextId]: description
|
|
1369
|
-
})
|
|
1373
|
+
}) || void 0
|
|
1370
1374
|
})), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
|
|
1371
1375
|
id: errorMsgId,
|
|
1372
1376
|
children: errorMsg
|
|
@@ -1379,32 +1383,30 @@ const TextField = forwardRef((props, ref) => {
|
|
|
1379
1383
|
error,
|
|
1380
1384
|
id: idProp,
|
|
1381
1385
|
label,
|
|
1382
|
-
required,
|
|
1383
1386
|
type = "text",
|
|
1384
|
-
|
|
1387
|
+
disableValidation = false
|
|
1385
1388
|
} = _a, rest = __objRest(_a, [
|
|
1386
1389
|
"description",
|
|
1387
1390
|
"error",
|
|
1388
1391
|
"id",
|
|
1389
1392
|
"label",
|
|
1390
|
-
"required",
|
|
1391
1393
|
"type",
|
|
1392
|
-
"
|
|
1394
|
+
"disableValidation"
|
|
1393
1395
|
]);
|
|
1394
1396
|
const ownRef = useRef(null);
|
|
1395
1397
|
const {
|
|
1396
1398
|
validity,
|
|
1397
1399
|
validationMessage
|
|
1398
|
-
} = useFormControlValidity(ownRef,
|
|
1400
|
+
} = useFormControlValidity(ownRef, !disableValidation);
|
|
1399
1401
|
const id = useFallbackId(idProp);
|
|
1400
1402
|
const helpTextId = id + "help";
|
|
1401
1403
|
const errorMsgId = id + "err";
|
|
1402
|
-
const errorMsg = error
|
|
1404
|
+
const errorMsg = error || validationMessage;
|
|
1403
1405
|
return /* @__PURE__ */ jsxs("div", {
|
|
1404
1406
|
className: "grid gap-2",
|
|
1405
1407
|
children: [/* @__PURE__ */ jsx(FormLabel, {
|
|
1406
1408
|
htmlFor: id,
|
|
1407
|
-
isRequired: required,
|
|
1409
|
+
isRequired: props.required,
|
|
1408
1410
|
isInvalid: !!error || validity === "invalid",
|
|
1409
1411
|
children: label
|
|
1410
1412
|
}), description && /* @__PURE__ */ jsx(FormHelperText, {
|
|
@@ -1412,15 +1414,14 @@ const TextField = forwardRef((props, ref) => {
|
|
|
1412
1414
|
children: description
|
|
1413
1415
|
}), /* @__PURE__ */ jsx(Input, __spreadProps(__spreadValues({
|
|
1414
1416
|
id,
|
|
1415
|
-
required,
|
|
1416
1417
|
ref: composeRefs(ownRef, ref),
|
|
1417
1418
|
type
|
|
1418
1419
|
}, rest), {
|
|
1419
1420
|
isInvalid: !!error || validity === "invalid",
|
|
1420
1421
|
"aria-describedby": cx({
|
|
1421
|
-
[errorMsgId]:
|
|
1422
|
+
[errorMsgId]: errorMsg,
|
|
1422
1423
|
[helpTextId]: description
|
|
1423
|
-
})
|
|
1424
|
+
}) || void 0
|
|
1424
1425
|
})), errorMsg && /* @__PURE__ */ jsx(FormErrorMessage, {
|
|
1425
1426
|
id: errorMsgId,
|
|
1426
1427
|
children: errorMsg
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@obosbbl/grunnmuren-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.5.1",
|
|
4
4
|
"description": "OBOS Grunnmuren design system React components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
],
|
|
18
18
|
"types": "./dist/index.d.ts",
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@babel/core": "7.19.
|
|
21
|
-
"@obosbbl/grunnmuren-tailwind": "0.7.
|
|
20
|
+
"@babel/core": "7.19.6",
|
|
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": {
|