@wordpress/dataviews 11.2.1-next.v.0 → 11.3.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.
- package/CHANGELOG.md +27 -1
- package/build/components/dataform-controls/combobox.cjs +80 -0
- package/build/components/dataform-controls/combobox.cjs.map +7 -0
- package/build/components/dataform-controls/date.cjs +35 -10
- package/build/components/dataform-controls/date.cjs.map +2 -2
- package/build/components/dataform-controls/index.cjs +2 -0
- package/build/components/dataform-controls/index.cjs.map +3 -3
- package/build/components/dataform-layouts/card/index.cjs +58 -3
- package/build/components/dataform-layouts/card/index.cjs.map +3 -3
- package/build/components/dataform-layouts/panel/dropdown.cjs +18 -8
- package/build/components/dataform-layouts/panel/dropdown.cjs.map +3 -3
- package/build/components/dataform-layouts/panel/index.cjs +5 -3
- package/build/components/dataform-layouts/panel/index.cjs.map +2 -2
- package/build/components/dataform-layouts/panel/modal.cjs +16 -10
- package/build/components/dataform-layouts/panel/modal.cjs.map +3 -3
- package/build/components/dataviews-bulk-actions/index.cjs +16 -18
- package/build/components/dataviews-bulk-actions/index.cjs.map +3 -3
- package/build/components/dataviews-item-actions/index.cjs +4 -1
- package/build/components/dataviews-item-actions/index.cjs.map +2 -2
- package/build/components/dataviews-layouts/activity/activity-item.cjs +6 -1
- package/build/components/dataviews-layouts/activity/activity-item.cjs.map +2 -2
- package/build/components/dataviews-layouts/table/column-header-menu.cjs +73 -66
- package/build/components/dataviews-layouts/table/column-header-menu.cjs.map +2 -2
- package/build/components/dataviews-layouts/table/index.cjs +3 -2
- package/build/components/dataviews-layouts/table/index.cjs.map +2 -2
- package/build/components/dataviews-picker-footer/index.cjs +8 -15
- package/build/components/dataviews-picker-footer/index.cjs.map +3 -3
- package/build/field-types/index.cjs +2 -0
- package/build/field-types/index.cjs.map +3 -3
- package/build/field-types/utils/get-filter.cjs +36 -0
- package/build/field-types/utils/get-filter.cjs.map +7 -0
- package/build/hooks/use-report-validity.cjs +39 -0
- package/build/hooks/use-report-validity.cjs.map +7 -0
- package/build/types/field-api.cjs.map +1 -1
- package/build/utils/filter-sort-and-paginate.cjs +6 -174
- package/build/utils/filter-sort-and-paginate.cjs.map +2 -2
- package/build/utils/get-footer-message.cjs +49 -0
- package/build/utils/get-footer-message.cjs.map +7 -0
- package/build/utils/operators.cjs +203 -24
- package/build/utils/operators.cjs.map +2 -2
- package/build-module/components/dataform-controls/combobox.mjs +49 -0
- package/build-module/components/dataform-controls/combobox.mjs.map +7 -0
- package/build-module/components/dataform-controls/date.mjs +35 -10
- package/build-module/components/dataform-controls/date.mjs.map +2 -2
- package/build-module/components/dataform-controls/index.mjs +2 -0
- package/build-module/components/dataform-controls/index.mjs.map +2 -2
- package/build-module/components/dataform-layouts/card/index.mjs +59 -3
- package/build-module/components/dataform-layouts/card/index.mjs.map +2 -2
- package/build-module/components/dataform-layouts/panel/dropdown.mjs +20 -10
- package/build-module/components/dataform-layouts/panel/dropdown.mjs.map +2 -2
- package/build-module/components/dataform-layouts/panel/index.mjs +5 -3
- package/build-module/components/dataform-layouts/panel/index.mjs.map +2 -2
- package/build-module/components/dataform-layouts/panel/modal.mjs +18 -12
- package/build-module/components/dataform-layouts/panel/modal.mjs.map +2 -2
- package/build-module/components/dataviews-bulk-actions/index.mjs +17 -19
- package/build-module/components/dataviews-bulk-actions/index.mjs.map +2 -2
- package/build-module/components/dataviews-item-actions/index.mjs +4 -1
- package/build-module/components/dataviews-item-actions/index.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/activity/activity-item.mjs +6 -1
- package/build-module/components/dataviews-layouts/activity/activity-item.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/table/column-header-menu.mjs +74 -67
- package/build-module/components/dataviews-layouts/table/column-header-menu.mjs.map +2 -2
- package/build-module/components/dataviews-layouts/table/index.mjs +4 -3
- package/build-module/components/dataviews-layouts/table/index.mjs.map +2 -2
- package/build-module/components/dataviews-picker-footer/index.mjs +8 -15
- package/build-module/components/dataviews-picker-footer/index.mjs.map +2 -2
- package/build-module/field-types/index.mjs +2 -0
- package/build-module/field-types/index.mjs.map +2 -2
- package/build-module/field-types/utils/get-filter.mjs +15 -0
- package/build-module/field-types/utils/get-filter.mjs.map +7 -0
- package/build-module/hooks/use-report-validity.mjs +18 -0
- package/build-module/hooks/use-report-validity.mjs.map +7 -0
- package/build-module/utils/filter-sort-and-paginate.mjs +7 -198
- package/build-module/utils/filter-sort-and-paginate.mjs.map +2 -2
- package/build-module/utils/get-footer-message.mjs +28 -0
- package/build-module/utils/get-footer-message.mjs.map +7 -0
- package/build-module/utils/operators.mjs +203 -24
- package/build-module/utils/operators.mjs.map +2 -2
- package/build-style/style-rtl.css +15 -16
- package/build-style/style.css +15 -16
- package/build-types/components/dataform-controls/combobox.d.ts +6 -0
- package/build-types/components/dataform-controls/combobox.d.ts.map +1 -0
- package/build-types/components/dataform-controls/date.d.ts.map +1 -1
- package/build-types/components/dataform-controls/index.d.ts.map +1 -1
- package/build-types/components/dataform-layouts/card/index.d.ts +2 -0
- package/build-types/components/dataform-layouts/card/index.d.ts.map +1 -1
- package/build-types/components/dataform-layouts/panel/dropdown.d.ts +3 -2
- package/build-types/components/dataform-layouts/panel/dropdown.d.ts.map +1 -1
- package/build-types/components/dataform-layouts/panel/index.d.ts.map +1 -1
- package/build-types/components/dataform-layouts/panel/modal.d.ts +3 -2
- package/build-types/components/dataform-layouts/panel/modal.d.ts.map +1 -1
- package/build-types/components/dataviews-bulk-actions/index.d.ts.map +1 -1
- package/build-types/components/dataviews-item-actions/index.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/activity/activity-item.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/table/column-header-menu.d.ts.map +1 -1
- package/build-types/components/dataviews-layouts/table/index.d.ts.map +1 -1
- package/build-types/components/dataviews-picker-footer/index.d.ts.map +1 -1
- package/build-types/dataform/stories/content.story.d.ts +14 -0
- package/build-types/dataform/stories/content.story.d.ts.map +1 -0
- package/build-types/dataform/stories/index.story.d.ts +1 -1
- package/build-types/dataform/stories/index.story.d.ts.map +1 -1
- package/build-types/dataform/stories/validation.d.ts +1 -1
- package/build-types/dataform/stories/validation.d.ts.map +1 -1
- package/build-types/dataviews/stories/fixtures.d.ts.map +1 -1
- package/build-types/dataviews/stories/index.story.d.ts +4 -1
- package/build-types/dataviews/stories/index.story.d.ts.map +1 -1
- package/build-types/dataviews/stories/layout-custom.d.ts +11 -0
- package/build-types/dataviews/stories/layout-custom.d.ts.map +1 -0
- package/build-types/dataviews-picker/stories/fixtures.d.ts.map +1 -1
- package/build-types/dataviews-picker/stories/index.story.d.ts +1 -1
- package/build-types/dataviews-picker/stories/index.story.d.ts.map +1 -1
- package/build-types/field-types/index.d.ts.map +1 -1
- package/build-types/field-types/stories/index.story.d.ts +1 -1
- package/build-types/field-types/stories/index.story.d.ts.map +1 -1
- package/build-types/field-types/utils/get-filter.d.ts +7 -0
- package/build-types/field-types/utils/get-filter.d.ts.map +1 -0
- package/build-types/hooks/use-report-validity.d.ts +14 -0
- package/build-types/hooks/use-report-validity.d.ts.map +1 -0
- package/build-types/types/field-api.d.ts +3 -0
- package/build-types/types/field-api.d.ts.map +1 -1
- package/build-types/utils/filter-sort-and-paginate.d.ts.map +1 -1
- package/build-types/utils/get-footer-message.d.ts +10 -0
- package/build-types/utils/get-footer-message.d.ts.map +1 -0
- package/build-types/utils/operators.d.ts +2 -1
- package/build-types/utils/operators.d.ts.map +1 -1
- package/build-wp/index.js +2730 -2179
- package/package.json +22 -20
- package/src/components/dataform-controls/combobox.tsx +58 -0
- package/src/components/dataform-controls/date.tsx +45 -10
- package/src/components/dataform-controls/index.tsx +2 -0
- package/src/components/dataform-layouts/card/index.tsx +81 -3
- package/src/components/dataform-layouts/panel/dropdown.tsx +26 -11
- package/src/components/dataform-layouts/panel/index.tsx +6 -4
- package/src/components/dataform-layouts/panel/modal.tsx +24 -12
- package/src/components/dataviews-bulk-actions/index.tsx +23 -20
- package/src/components/dataviews-bulk-actions/style.scss +0 -3
- package/src/components/dataviews-item-actions/index.tsx +6 -1
- package/src/components/dataviews-layouts/activity/activity-item.tsx +8 -1
- package/src/components/dataviews-layouts/table/column-header-menu.tsx +99 -73
- package/src/components/dataviews-layouts/table/index.tsx +12 -3
- package/src/components/dataviews-layouts/table/style.scss +14 -7
- package/src/components/dataviews-picker-footer/index.tsx +8 -18
- package/src/dataform/stories/content.story.mdx +159 -0
- package/src/dataform/stories/content.story.tsx +390 -0
- package/src/dataform/stories/index.story.tsx +8 -1
- package/src/dataform/stories/validation.tsx +98 -5
- package/src/dataviews/stories/best-practices.story.mdx +55 -0
- package/src/dataviews/stories/fixtures.tsx +1 -3
- package/src/dataviews/stories/index.story.tsx +6 -1
- package/src/dataviews/stories/layout-custom.tsx +140 -0
- package/src/dataviews/test/dataviews.tsx +66 -1
- package/src/dataviews-picker/stories/fixtures.tsx +1 -3
- package/src/dataviews-picker/stories/index.story.tsx +1 -1
- package/src/field-types/index.tsx +2 -0
- package/src/field-types/stories/index.story.tsx +2 -0
- package/src/field-types/utils/get-filter.ts +18 -0
- package/src/hooks/use-report-validity.ts +32 -0
- package/src/types/field-api.ts +11 -0
- package/src/utils/filter-sort-and-paginate.ts +11 -306
- package/src/utils/get-footer-message.ts +41 -0
- package/src/utils/operators.tsx +303 -31
package/CHANGELOG.md
CHANGED
|
@@ -2,7 +2,30 @@
|
|
|
2
2
|
|
|
3
3
|
## Unreleased
|
|
4
4
|
|
|
5
|
-
## 11.
|
|
5
|
+
## 11.3.0 (2026-01-29)
|
|
6
|
+
|
|
7
|
+
### Enhancements
|
|
8
|
+
|
|
9
|
+
- DataViews: Add card form layout validation. [#74547](https://github.com/WordPress/gutenberg/pull/74547)
|
|
10
|
+
- DataViews: Show validation errors when a panel closes. [#74995](https://github.com/WordPress/gutenberg/pull/74995)
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
- DataForm: Sync React-level validation to native inputs on date fields. [#74994](https://github.com/WordPress/gutenberg/pull/74994)
|
|
15
|
+
- Fix primary action visibility in table layout when the action doesn't support bulk operations, and fix compact action menu not visible on mobile when there is only one action. [#74836](https://github.com/WordPress/gutenberg/pull/74836)
|
|
16
|
+
- DataViews: Use regular casing for bulk selection count. [#74573](https://github.com/WordPress/gutenberg/pull/74573)
|
|
17
|
+
|
|
18
|
+
### Code Quality
|
|
19
|
+
|
|
20
|
+
- DataViews: Move filtering logic in field types. [#74733](https://github.com/WordPress/gutenberg/pull/74733)
|
|
21
|
+
- DataViews: Adjust table primary media field styles. [#74813](https://github.com/WordPress/gutenberg/pull/74813)
|
|
22
|
+
|
|
23
|
+
### Enhancements
|
|
24
|
+
|
|
25
|
+
- Add new `combobox` DataForm control. [#74891](https://github.com/WordPress/gutenberg/pull/74891)
|
|
26
|
+
- Include total items count in footer. [#73491](https://github.com/WordPress/gutenberg/pull/73491)
|
|
27
|
+
|
|
28
|
+
## 11.2.0 (2026-01-16)
|
|
6
29
|
|
|
7
30
|
### Code Quality
|
|
8
31
|
|
|
@@ -16,6 +39,7 @@
|
|
|
16
39
|
- Fix missing dependencies. [#74310](https://github.com/WordPress/gutenberg/pull/74310)
|
|
17
40
|
- Add details layout to DataForm validation story. [#74445](https://github.com/WordPress/gutenberg/pull/74445)
|
|
18
41
|
- Updated `fast-deep-equal` imports for compatibility with strict Node.js resolution ([#74530](https://github.com/WordPress/gutenberg/pull/74530))
|
|
42
|
+
- Add "custom layout" story via "free form". [#74605](https://github.com/WordPress/gutenberg/pull/74605)
|
|
19
43
|
|
|
20
44
|
### Bug Fixes
|
|
21
45
|
|
|
@@ -26,6 +50,8 @@
|
|
|
26
50
|
- DataViews: Fix table row multiselection in Firefox [#73945](https://github.com/WordPress/gutenberg/pull/73945)
|
|
27
51
|
- DataViews: `filterSortAndPaginate()` will ignore sorting on non-sortable fields [#73950](https://github.com/WordPress/gutenberg/pull/73950)
|
|
28
52
|
- DataViews: Fix locked fields order when toggling visibility in properties section. [#74326](https://github.com/WordPress/gutenberg/pull/74326)
|
|
53
|
+
- Dataviews: Fix column header move item in RTL moves in the opposite direction to the arrow. [#74644](https://github.com/WordPress/gutenberg/pull/74644)
|
|
54
|
+
- Dataviews: Fix insert left and right handling in table layout for RTL languages. [#74681](https://github.com/WordPress/gutenberg/pull/74681)
|
|
29
55
|
|
|
30
56
|
### Enhancements
|
|
31
57
|
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
|
|
30
|
+
// packages/dataviews/src/components/dataform-controls/combobox.tsx
|
|
31
|
+
var combobox_exports = {};
|
|
32
|
+
__export(combobox_exports, {
|
|
33
|
+
default: () => Combobox
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(combobox_exports);
|
|
36
|
+
var import_components = require("@wordpress/components");
|
|
37
|
+
var import_element = require("@wordpress/element");
|
|
38
|
+
var import_use_elements = __toESM(require("../../hooks/use-elements.cjs"));
|
|
39
|
+
var import_lock_unlock = require("../../lock-unlock.cjs");
|
|
40
|
+
var import_get_custom_validity = __toESM(require("./utils/get-custom-validity.cjs"));
|
|
41
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
|
+
var { ValidatedComboboxControl } = (0, import_lock_unlock.unlock)(import_components.privateApis);
|
|
43
|
+
function Combobox({
|
|
44
|
+
data,
|
|
45
|
+
field,
|
|
46
|
+
onChange,
|
|
47
|
+
hideLabelFromVision,
|
|
48
|
+
validity
|
|
49
|
+
}) {
|
|
50
|
+
const { label, description, placeholder, getValue, setValue, isValid } = field;
|
|
51
|
+
const value = getValue({ item: data }) ?? "";
|
|
52
|
+
const onChangeControl = (0, import_element.useCallback)(
|
|
53
|
+
(newValue) => onChange(setValue({ item: data, value: newValue ?? "" })),
|
|
54
|
+
[data, onChange, setValue]
|
|
55
|
+
);
|
|
56
|
+
const { elements, isLoading } = (0, import_use_elements.default)({
|
|
57
|
+
elements: field.elements,
|
|
58
|
+
getElements: field.getElements
|
|
59
|
+
});
|
|
60
|
+
if (isLoading) {
|
|
61
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_components.Spinner, {});
|
|
62
|
+
}
|
|
63
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
64
|
+
ValidatedComboboxControl,
|
|
65
|
+
{
|
|
66
|
+
required: !!field.isValid?.required,
|
|
67
|
+
customValidity: (0, import_get_custom_validity.default)(isValid, validity),
|
|
68
|
+
label,
|
|
69
|
+
value,
|
|
70
|
+
help: description,
|
|
71
|
+
placeholder,
|
|
72
|
+
options: elements,
|
|
73
|
+
onChange: onChangeControl,
|
|
74
|
+
hideLabelFromVision,
|
|
75
|
+
allowReset: true,
|
|
76
|
+
expandOnFocus: true
|
|
77
|
+
}
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
//# sourceMappingURL=combobox.cjs.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../src/components/dataform-controls/combobox.tsx"],
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { privateApis, Spinner } from '@wordpress/components';\nimport { useCallback } from '@wordpress/element';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps } from '../../types';\nimport useElements from '../../hooks/use-elements';\nimport { unlock } from '../../lock-unlock';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { ValidatedComboboxControl } = unlock( privateApis );\n\nexport default function Combobox< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { label, description, placeholder, getValue, setValue, isValid } =\n\t\tfield;\n\tconst value = getValue( { item: data } ) ?? '';\n\n\tconst onChangeControl = useCallback(\n\t\t( newValue: string | null ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue ?? '' } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst { elements, isLoading } = useElements( {\n\t\telements: field.elements,\n\t\tgetElements: field.getElements,\n\t} );\n\n\tif ( isLoading ) {\n\t\treturn <Spinner />;\n\t}\n\n\treturn (\n\t\t<ValidatedComboboxControl\n\t\t\trequired={ !! field.isValid?.required }\n\t\t\tcustomValidity={ getCustomValidity( isValid, validity ) }\n\t\t\tlabel={ label }\n\t\t\tvalue={ value }\n\t\t\thelp={ description }\n\t\t\tplaceholder={ placeholder }\n\t\t\toptions={ elements }\n\t\t\tonChange={ onChangeControl }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tallowReset\n\t\t\texpandOnFocus\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAAqC;AACrC,qBAA4B;AAM5B,0BAAwB;AACxB,yBAAuB;AACvB,iCAA8B;AA2BrB;AAzBT,IAAM,EAAE,yBAAyB,QAAI,2BAAQ,6BAAY;AAE1C,SAAR,SAAmC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,GAAkC;AACjC,QAAM,EAAE,OAAO,aAAa,aAAa,UAAU,UAAU,QAAQ,IACpE;AACD,QAAM,QAAQ,SAAU,EAAE,MAAM,KAAK,CAAE,KAAK;AAE5C,QAAM,sBAAkB;AAAA,IACvB,CAAE,aACD,SAAU,SAAU,EAAE,MAAM,MAAM,OAAO,YAAY,GAAG,CAAE,CAAE;AAAA,IAC7D,CAAE,MAAM,UAAU,QAAS;AAAA,EAC5B;AAEA,QAAM,EAAE,UAAU,UAAU,QAAI,oBAAAA,SAAa;AAAA,IAC5C,UAAU,MAAM;AAAA,IAChB,aAAa,MAAM;AAAA,EACpB,CAAE;AAEF,MAAK,WAAY;AAChB,WAAO,4CAAC,6BAAQ;AAAA,EACjB;AAEA,SACC;AAAA,IAAC;AAAA;AAAA,MACA,UAAW,CAAC,CAAE,MAAM,SAAS;AAAA,MAC7B,oBAAiB,2BAAAC,SAAmB,SAAS,QAAS;AAAA,MACtD;AAAA,MACA;AAAA,MACA,MAAO;AAAA,MACP;AAAA,MACA,SAAU;AAAA,MACV,UAAW;AAAA,MACX;AAAA,MACA,YAAU;AAAA,MACV,eAAa;AAAA;AAAA,EACd;AAEF;",
|
|
6
|
+
"names": ["useElements", "getCustomValidity"]
|
|
7
|
+
}
|
|
@@ -158,17 +158,42 @@ function ValidatedDateControl({
|
|
|
158
158
|
setCustomValidity(void 0);
|
|
159
159
|
}, [inputRefs]);
|
|
160
160
|
(0, import_element.useEffect)(() => {
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
161
|
+
const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs];
|
|
162
|
+
const result = validity ? (0, import_get_custom_validity.default)(isValid, validity) : void 0;
|
|
163
|
+
for (const ref of refs) {
|
|
164
|
+
const input = ref.current;
|
|
165
|
+
if (input) {
|
|
166
|
+
input.setCustomValidity(
|
|
167
|
+
result?.type === "invalid" && result.message ? result.message : ""
|
|
168
|
+
);
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}, [inputRefs, isValid, validity]);
|
|
172
|
+
(0, import_element.useEffect)(() => {
|
|
173
|
+
const refs = Array.isArray(inputRefs) ? inputRefs : [inputRefs];
|
|
174
|
+
const handleInvalid = (event) => {
|
|
175
|
+
event.preventDefault();
|
|
176
|
+
setIsTouched(true);
|
|
177
|
+
};
|
|
178
|
+
for (const ref of refs) {
|
|
179
|
+
ref.current?.addEventListener("invalid", handleInvalid);
|
|
180
|
+
}
|
|
181
|
+
return () => {
|
|
182
|
+
for (const ref of refs) {
|
|
183
|
+
ref.current?.removeEventListener("invalid", handleInvalid);
|
|
184
|
+
}
|
|
185
|
+
};
|
|
186
|
+
}, [inputRefs, setIsTouched]);
|
|
187
|
+
(0, import_element.useEffect)(() => {
|
|
188
|
+
if (!isTouched) {
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
const result = validity ? (0, import_get_custom_validity.default)(isValid, validity) : void 0;
|
|
192
|
+
if (result) {
|
|
193
|
+
setCustomValidity(result);
|
|
194
|
+
} else {
|
|
195
|
+
validateRefs();
|
|
170
196
|
}
|
|
171
|
-
return void 0;
|
|
172
197
|
}, [isTouched, isValid, validity, validateRefs]);
|
|
173
198
|
const onBlur = (event) => {
|
|
174
199
|
if (isTouched) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataform-controls/date.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport {\n\tformat,\n\tisValid as isValidDate,\n\tsubMonths,\n\tsubDays,\n\tsubYears,\n\tstartOfMonth,\n\tstartOfYear,\n} from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalInputControl as InputControl,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getDate, getSettings } from '@wordpress/date';\nimport { error as errorIcon } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport RelativeDateControl from './utils/relative-date-control';\nimport {\n\tOPERATOR_IN_THE_PAST,\n\tOPERATOR_OVER,\n\tOPERATOR_BETWEEN,\n} from '../../constants';\nimport { unlock } from '../../lock-unlock';\nimport type {\n\tDataFormControlProps,\n\tFieldValidity,\n\tFormatDate,\n\tNormalizedField,\n} from '../../types';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { DateCalendar, DateRangeCalendar } = unlock( componentsPrivateApis );\n\ntype DateRange = [ string, string ] | undefined;\n\nconst DATE_PRESETS: {\n\tid: string;\n\tlabel: string;\n\tgetValue: () => Date;\n}[] = [\n\t{\n\t\tid: 'today',\n\t\tlabel: __( 'Today' ),\n\t\tgetValue: () => getDate( null ),\n\t},\n\t{\n\t\tid: 'yesterday',\n\t\tlabel: __( 'Yesterday' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subDays( today, 1 );\n\t\t},\n\t},\n\t{\n\t\tid: 'past-week',\n\t\tlabel: __( 'Past week' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subDays( today, 7 );\n\t\t},\n\t},\n\t{\n\t\tid: 'past-month',\n\t\tlabel: __( 'Past month' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subMonths( today, 1 );\n\t\t},\n\t},\n];\n\nconst DATE_RANGE_PRESETS = [\n\t{\n\t\tid: 'last-7-days',\n\t\tlabel: __( 'Last 7 days' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subDays( today, 7 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'last-30-days',\n\t\tlabel: __( 'Last 30 days' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subDays( today, 30 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'month-to-date',\n\t\tlabel: __( 'Month to date' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ startOfMonth( today ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'last-year',\n\t\tlabel: __( 'Last year' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subYears( today, 1 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'year-to-date',\n\t\tlabel: __( 'Year to date' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ startOfYear( today ), today ];\n\t\t},\n\t},\n];\n\nconst parseDate = ( dateString?: string ): Date | null => {\n\tif ( ! dateString ) {\n\t\treturn null;\n\t}\n\tconst parsed = getDate( dateString );\n\treturn parsed && isValidDate( parsed ) ? parsed : null;\n};\n\nconst formatDate = ( date?: Date | string ): string => {\n\tif ( ! date ) {\n\t\treturn '';\n\t}\n\treturn typeof date === 'string' ? date : format( date, 'yyyy-MM-dd' );\n};\n\nfunction ValidatedDateControl< Item >( {\n\tfield,\n\tvalidity,\n\tinputRefs,\n\tisTouched,\n\tsetIsTouched,\n\tchildren,\n}: {\n\tfield: NormalizedField< Item >;\n\tvalidity?: FieldValidity;\n\tinputRefs:\n\t\t| React.RefObject< HTMLInputElement >\n\t\t| React.RefObject< HTMLInputElement >[];\n\tisTouched: boolean;\n\tsetIsTouched: ( touched: boolean ) => void;\n\tchildren: React.ReactNode;\n} ) {\n\tconst { isValid } = field;\n\tconst [ customValidity, setCustomValidity ] = useState<\n\t\t| { type: 'valid' | 'validating' | 'invalid'; message?: string }\n\t\t| undefined\n\t>( undefined );\n\n\tconst validateRefs = useCallback( () => {\n\t\t// Check HTML5 validity on all refs\n\t\tconst refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];\n\t\tfor ( const ref of refs ) {\n\t\t\tconst input = ref.current;\n\t\t\tif ( input && ! input.validity.valid ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage: input.validationMessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// No errors\n\t\tsetCustomValidity( undefined );\n\t}, [ inputRefs ] );\n\n\tuseEffect( () => {\n\t\tif ( isTouched ) {\n\t\t\tconst timeoutId = setTimeout( () => {\n\t\t\t\tif ( validity ) {\n\t\t\t\t\tsetCustomValidity( getCustomValidity( isValid, validity ) );\n\t\t\t\t} else {\n\t\t\t\t\tvalidateRefs();\n\t\t\t\t}\n\t\t\t}, 0 );\n\t\t\treturn () => clearTimeout( timeoutId );\n\t\t}\n\t\treturn undefined;\n\t}, [ isTouched, isValid, validity, validateRefs ] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\t\t}\n\t};\n\n\treturn (\n\t\t<div onBlur={ onBlur }>\n\t\t\t{ children }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ customValidity && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'components-validated-control__indicator',\n\t\t\t\t\t\t\tcustomValidity.type === 'invalid'\n\t\t\t\t\t\t\t\t? 'is-invalid'\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\tcustomValidity.type === 'valid'\n\t\t\t\t\t\t\t\t? 'is-valid'\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__indicator-icon\"\n\t\t\t\t\t\t\ticon={ errorIcon }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ customValidity.message }\n\t\t\t\t\t</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction CalendarDateControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tsetValue,\n\t\tgetValue,\n\t\tisValid,\n\t\tformat: fieldFormat,\n\t} = field;\n\tconst [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(\n\t\tnull\n\t);\n\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDate ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\n\tconst fieldValue = getValue( { item: data } );\n\tconst value = typeof fieldValue === 'string' ? fieldValue : undefined;\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\tconst parsedDate = parseDate( value );\n\t\treturn parsedDate || new Date(); // Default to current month\n\t} );\n\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onSelectDate = useCallback(\n\t\t( newDate: Date | undefined | null ) => {\n\t\t\tconst dateValue = newDate\n\t\t\t\t? format( newDate, 'yyyy-MM-dd' )\n\t\t\t\t: undefined;\n\t\t\tonChangeCallback( dateValue );\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst handlePresetClick = useCallback(\n\t\t( preset: ( typeof DATE_PRESETS )[ 0 ] ) => {\n\t\t\tconst presetDate = preset.getValue();\n\t\t\tconst dateValue = formatDate( presetDate );\n\n\t\t\tsetCalendarMonth( presetDate );\n\t\t\tonChangeCallback( dateValue );\n\t\t\tsetSelectedPresetId( preset.id );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst handleManualDateChange = useCallback(\n\t\t( newValue?: string ) => {\n\t\t\tonChangeCallback( newValue );\n\t\t\tif ( newValue ) {\n\t\t\t\tconst parsedDate = parseDate( newValue );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst {\n\t\ttimezone: { string: timezoneString },\n\t} = getSettings();\n\n\tconst displayLabel = isValid?.required\n\t\t? `${ label } (${ __( 'Required' ) })`\n\t\t: label;\n\n\treturn (\n\t\t<ValidatedDateControl\n\t\t\tfield={ field }\n\t\t\tvalidity={ validity }\n\t\t\tinputRefs={ validityTargetRef }\n\t\t\tisTouched={ isTouched }\n\t\t\tsetIsTouched={ setIsTouched }\n\t\t>\n\t\t\t<BaseControl\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t\t\t{ /* Preset buttons */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ DATE_PRESETS.map( ( preset ) => {\n\t\t\t\t\t\t\tconst isSelected = selectedPresetId === preset.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\t\t\tkey={ preset.id }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tisPressed={ isSelected }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\thandlePresetClick( preset )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ preset.label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tisPressed={ ! selectedPresetId }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tdisabled={ !! selectedPresetId }\n\t\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Custom' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t{ /* Manual date input */ }\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tref={ validityTargetRef }\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tlabel={ __( 'Date' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ handleManualDateChange }\n\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ /* Calendar widget */ }\n\t\t\t\t\t<DateCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={\n\t\t\t\t\t\t\tvalue ? parseDate( value ) || undefined : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ onSelectDate }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezoneString || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</BaseControl>\n\t\t</ValidatedDateControl>\n\t);\n}\n\nfunction CalendarDateRangeControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, getValue, setValue, format: fieldFormat } = field;\n\tlet value: DateRange;\n\tconst fieldValue = getValue( { item: data } );\n\tif (\n\t\tArray.isArray( fieldValue ) &&\n\t\tfieldValue.length === 2 &&\n\t\tfieldValue.every( ( date ) => typeof date === 'string' )\n\t) {\n\t\tvalue = fieldValue as DateRange;\n\t}\n\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDate ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: DateRange ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(\n\t\tnull\n\t);\n\n\tconst selectedRange = useMemo( () => {\n\t\tif ( ! value ) {\n\t\t\treturn { from: undefined, to: undefined };\n\t\t}\n\n\t\tconst [ from, to ] = value;\n\t\treturn {\n\t\t\tfrom: parseDate( from ) || undefined,\n\t\t\tto: parseDate( to ) || undefined,\n\t\t};\n\t}, [ value ] );\n\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\treturn selectedRange.from || new Date();\n\t} );\n\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst fromInputRef = useRef< HTMLInputElement >( null );\n\tconst toInputRef = useRef< HTMLInputElement >( null );\n\n\tconst updateDateRange = useCallback(\n\t\t( fromDate?: Date | string, toDate?: Date | string ) => {\n\t\t\tif ( fromDate && toDate ) {\n\t\t\t\tonChangeCallback( [\n\t\t\t\t\tformatDate( fromDate ),\n\t\t\t\t\tformatDate( toDate ),\n\t\t\t\t] );\n\t\t\t} else if ( ! fromDate && ! toDate ) {\n\t\t\t\tonChangeCallback( undefined );\n\t\t\t}\n\t\t\t// Do nothing if only one date is set - wait for both\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst onSelectCalendarRange = useCallback(\n\t\t(\n\t\t\tnewRange:\n\t\t\t\t| { from: Date | undefined; to?: Date | undefined }\n\t\t\t\t| undefined\n\t\t) => {\n\t\t\tupdateDateRange( newRange?.from, newRange?.to );\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ updateDateRange ]\n\t);\n\n\tconst handlePresetClick = useCallback(\n\t\t( preset: ( typeof DATE_RANGE_PRESETS )[ 0 ] ) => {\n\t\t\tconst [ startDate, endDate ] = preset.getValue();\n\t\t\tsetCalendarMonth( startDate );\n\t\t\tupdateDateRange( startDate, endDate );\n\t\t\tsetSelectedPresetId( preset.id );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ updateDateRange ]\n\t);\n\n\tconst handleManualDateChange = useCallback(\n\t\t( fromOrTo: 'from' | 'to', newValue?: string ) => {\n\t\t\tconst [ currentFrom, currentTo ] = value || [\n\t\t\t\tundefined,\n\t\t\t\tundefined,\n\t\t\t];\n\t\t\tconst updatedFrom = fromOrTo === 'from' ? newValue : currentFrom;\n\t\t\tconst updatedTo = fromOrTo === 'to' ? newValue : currentTo;\n\n\t\t\tupdateDateRange( updatedFrom, updatedTo );\n\n\t\t\tif ( newValue ) {\n\t\t\t\tconst parsedDate = parseDate( newValue );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ value, updateDateRange ]\n\t);\n\n\tconst { timezone } = getSettings();\n\n\tconst displayLabel = field.isValid?.required\n\t\t? `${ label } (${ __( 'Required' ) })`\n\t\t: label;\n\n\treturn (\n\t\t<ValidatedDateControl\n\t\t\tfield={ field }\n\t\t\tvalidity={ validity }\n\t\t\tinputRefs={ [ fromInputRef, toInputRef ] }\n\t\t\tisTouched={ isTouched }\n\t\t\tsetIsTouched={ setIsTouched }\n\t\t>\n\t\t\t<BaseControl\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t\t\t{ /* Preset buttons */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ DATE_RANGE_PRESETS.map( ( preset ) => {\n\t\t\t\t\t\t\tconst isSelected = selectedPresetId === preset.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\t\t\tkey={ preset.id }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tisPressed={ isSelected }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\thandlePresetClick( preset )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ preset.label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tisPressed={ ! selectedPresetId }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\t\tdisabled={ !! selectedPresetId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Custom' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t{ /* Manual date range inputs */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\tclassName=\"dataviews-controls__date-range-inputs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ fromInputRef }\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tlabel={ __( 'From' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value?.[ 0 ] }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleManualDateChange( 'from', newValue )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ toInputRef }\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tlabel={ __( 'To' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value?.[ 1 ] }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleManualDateChange( 'to', newValue )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t<DateRangeCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={ selectedRange }\n\t\t\t\t\t\tonSelect={ onSelectCalendarRange }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezone.string || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</BaseControl>\n\t\t</ValidatedDateControl>\n\t);\n}\n\nexport default function DateControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tif ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {\n\t\treturn (\n\t\t\t<RelativeDateControl\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\toperator={ operator }\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\treturn (\n\t\t\t<CalendarDateRangeControl\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CalendarDateControl\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
-
"mappings": "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",
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport {\n\tformat,\n\tisValid as isValidDate,\n\tsubMonths,\n\tsubDays,\n\tsubYears,\n\tstartOfMonth,\n\tstartOfYear,\n} from 'date-fns';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tBaseControl,\n\tButton,\n\tIcon,\n\tprivateApis as componentsPrivateApis,\n\t__experimentalInputControl as InputControl,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\nimport { getDate, getSettings } from '@wordpress/date';\nimport { error as errorIcon } from '@wordpress/icons';\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport RelativeDateControl from './utils/relative-date-control';\nimport {\n\tOPERATOR_IN_THE_PAST,\n\tOPERATOR_OVER,\n\tOPERATOR_BETWEEN,\n} from '../../constants';\nimport { unlock } from '../../lock-unlock';\nimport type {\n\tDataFormControlProps,\n\tFieldValidity,\n\tFormatDate,\n\tNormalizedField,\n} from '../../types';\nimport getCustomValidity from './utils/get-custom-validity';\n\nconst { DateCalendar, DateRangeCalendar } = unlock( componentsPrivateApis );\n\ntype DateRange = [ string, string ] | undefined;\n\nconst DATE_PRESETS: {\n\tid: string;\n\tlabel: string;\n\tgetValue: () => Date;\n}[] = [\n\t{\n\t\tid: 'today',\n\t\tlabel: __( 'Today' ),\n\t\tgetValue: () => getDate( null ),\n\t},\n\t{\n\t\tid: 'yesterday',\n\t\tlabel: __( 'Yesterday' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subDays( today, 1 );\n\t\t},\n\t},\n\t{\n\t\tid: 'past-week',\n\t\tlabel: __( 'Past week' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subDays( today, 7 );\n\t\t},\n\t},\n\t{\n\t\tid: 'past-month',\n\t\tlabel: __( 'Past month' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn subMonths( today, 1 );\n\t\t},\n\t},\n];\n\nconst DATE_RANGE_PRESETS = [\n\t{\n\t\tid: 'last-7-days',\n\t\tlabel: __( 'Last 7 days' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subDays( today, 7 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'last-30-days',\n\t\tlabel: __( 'Last 30 days' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subDays( today, 30 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'month-to-date',\n\t\tlabel: __( 'Month to date' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ startOfMonth( today ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'last-year',\n\t\tlabel: __( 'Last year' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ subYears( today, 1 ), today ];\n\t\t},\n\t},\n\t{\n\t\tid: 'year-to-date',\n\t\tlabel: __( 'Year to date' ),\n\t\tgetValue: () => {\n\t\t\tconst today = getDate( null );\n\t\t\treturn [ startOfYear( today ), today ];\n\t\t},\n\t},\n];\n\nconst parseDate = ( dateString?: string ): Date | null => {\n\tif ( ! dateString ) {\n\t\treturn null;\n\t}\n\tconst parsed = getDate( dateString );\n\treturn parsed && isValidDate( parsed ) ? parsed : null;\n};\n\nconst formatDate = ( date?: Date | string ): string => {\n\tif ( ! date ) {\n\t\treturn '';\n\t}\n\treturn typeof date === 'string' ? date : format( date, 'yyyy-MM-dd' );\n};\n\nfunction ValidatedDateControl< Item >( {\n\tfield,\n\tvalidity,\n\tinputRefs,\n\tisTouched,\n\tsetIsTouched,\n\tchildren,\n}: {\n\tfield: NormalizedField< Item >;\n\tvalidity?: FieldValidity;\n\tinputRefs:\n\t\t| React.RefObject< HTMLInputElement >\n\t\t| React.RefObject< HTMLInputElement >[];\n\tisTouched: boolean;\n\tsetIsTouched: ( touched: boolean ) => void;\n\tchildren: React.ReactNode;\n} ) {\n\tconst { isValid } = field;\n\tconst [ customValidity, setCustomValidity ] = useState<\n\t\t| { type: 'valid' | 'validating' | 'invalid'; message?: string }\n\t\t| undefined\n\t>( undefined );\n\n\tconst validateRefs = useCallback( () => {\n\t\t// Check HTML5 validity on all refs\n\t\tconst refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];\n\t\tfor ( const ref of refs ) {\n\t\t\tconst input = ref.current;\n\t\t\tif ( input && ! input.validity.valid ) {\n\t\t\t\tsetCustomValidity( {\n\t\t\t\t\ttype: 'invalid',\n\t\t\t\t\tmessage: input.validationMessage,\n\t\t\t\t} );\n\t\t\t\treturn;\n\t\t\t}\n\t\t}\n\n\t\t// No errors\n\t\tsetCustomValidity( undefined );\n\t}, [ inputRefs ] );\n\n\t// Sync React-level validation to native inputs.\n\tuseEffect( () => {\n\t\tconst refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];\n\t\tconst result = validity\n\t\t\t? getCustomValidity( isValid, validity )\n\t\t\t: undefined;\n\t\tfor ( const ref of refs ) {\n\t\t\tconst input = ref.current;\n\t\t\tif ( input ) {\n\t\t\t\tinput.setCustomValidity(\n\t\t\t\t\tresult?.type === 'invalid' && result.message\n\t\t\t\t\t\t? result.message\n\t\t\t\t\t\t: ''\n\t\t\t\t);\n\t\t\t}\n\t\t}\n\t}, [ inputRefs, isValid, validity ] );\n\n\t// Listen for 'invalid' events (e.g., from reportValidity() on card re-expand).\n\tuseEffect( () => {\n\t\tconst refs = Array.isArray( inputRefs ) ? inputRefs : [ inputRefs ];\n\t\tconst handleInvalid = ( event: Event ) => {\n\t\t\tevent.preventDefault();\n\t\t\tsetIsTouched( true );\n\t\t};\n\t\tfor ( const ref of refs ) {\n\t\t\tref.current?.addEventListener( 'invalid', handleInvalid );\n\t\t}\n\t\treturn () => {\n\t\t\tfor ( const ref of refs ) {\n\t\t\t\tref.current?.removeEventListener( 'invalid', handleInvalid );\n\t\t\t}\n\t\t};\n\t}, [ inputRefs, setIsTouched ] );\n\n\tuseEffect( () => {\n\t\tif ( ! isTouched ) {\n\t\t\treturn;\n\t\t}\n\t\tconst result = validity\n\t\t\t? getCustomValidity( isValid, validity )\n\t\t\t: undefined;\n\t\tif ( result ) {\n\t\t\tsetCustomValidity( result );\n\t\t} else {\n\t\t\tvalidateRefs();\n\t\t}\n\t}, [ isTouched, isValid, validity, validateRefs ] );\n\n\tconst onBlur = ( event: React.FocusEvent< HTMLDivElement > ) => {\n\t\tif ( isTouched ) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only consider \"blurred from the component\" if focus has fully left the wrapping div.\n\t\t// This prevents unnecessary blurs from components with multiple focusable elements.\n\t\tif (\n\t\t\t! event.relatedTarget ||\n\t\t\t! event.currentTarget.contains( event.relatedTarget )\n\t\t) {\n\t\t\tsetIsTouched( true );\n\t\t}\n\t};\n\n\treturn (\n\t\t<div onBlur={ onBlur }>\n\t\t\t{ children }\n\t\t\t<div aria-live=\"polite\">\n\t\t\t\t{ customValidity && (\n\t\t\t\t\t<p\n\t\t\t\t\t\tclassName={ clsx(\n\t\t\t\t\t\t\t'components-validated-control__indicator',\n\t\t\t\t\t\t\tcustomValidity.type === 'invalid'\n\t\t\t\t\t\t\t\t? 'is-invalid'\n\t\t\t\t\t\t\t\t: undefined,\n\t\t\t\t\t\t\tcustomValidity.type === 'valid'\n\t\t\t\t\t\t\t\t? 'is-valid'\n\t\t\t\t\t\t\t\t: undefined\n\t\t\t\t\t\t) }\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\tclassName=\"components-validated-control__indicator-icon\"\n\t\t\t\t\t\t\ticon={ errorIcon }\n\t\t\t\t\t\t\tsize={ 16 }\n\t\t\t\t\t\t\tfill=\"currentColor\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{ customValidity.message }\n\t\t\t\t\t</p>\n\t\t\t\t) }\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nfunction CalendarDateControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst {\n\t\tid,\n\t\tlabel,\n\t\tsetValue,\n\t\tgetValue,\n\t\tisValid,\n\t\tformat: fieldFormat,\n\t} = field;\n\tconst [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(\n\t\tnull\n\t);\n\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDate ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\n\tconst fieldValue = getValue( { item: data } );\n\tconst value = typeof fieldValue === 'string' ? fieldValue : undefined;\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\tconst parsedDate = parseDate( value );\n\t\treturn parsedDate || new Date(); // Default to current month\n\t} );\n\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst validityTargetRef = useRef< HTMLInputElement >( null );\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: string | undefined ) =>\n\t\t\tonChange( setValue( { item: data, value: newValue } ) ),\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst onSelectDate = useCallback(\n\t\t( newDate: Date | undefined | null ) => {\n\t\t\tconst dateValue = newDate\n\t\t\t\t? format( newDate, 'yyyy-MM-dd' )\n\t\t\t\t: undefined;\n\t\t\tonChangeCallback( dateValue );\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst handlePresetClick = useCallback(\n\t\t( preset: ( typeof DATE_PRESETS )[ 0 ] ) => {\n\t\t\tconst presetDate = preset.getValue();\n\t\t\tconst dateValue = formatDate( presetDate );\n\n\t\t\tsetCalendarMonth( presetDate );\n\t\t\tonChangeCallback( dateValue );\n\t\t\tsetSelectedPresetId( preset.id );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst handleManualDateChange = useCallback(\n\t\t( newValue?: string ) => {\n\t\t\tonChangeCallback( newValue );\n\t\t\tif ( newValue ) {\n\t\t\t\tconst parsedDate = parseDate( newValue );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t}\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst {\n\t\ttimezone: { string: timezoneString },\n\t} = getSettings();\n\n\tconst displayLabel = isValid?.required\n\t\t? `${ label } (${ __( 'Required' ) })`\n\t\t: label;\n\n\treturn (\n\t\t<ValidatedDateControl\n\t\t\tfield={ field }\n\t\t\tvalidity={ validity }\n\t\t\tinputRefs={ validityTargetRef }\n\t\t\tisTouched={ isTouched }\n\t\t\tsetIsTouched={ setIsTouched }\n\t\t>\n\t\t\t<BaseControl\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t\t\t{ /* Preset buttons */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ DATE_PRESETS.map( ( preset ) => {\n\t\t\t\t\t\t\tconst isSelected = selectedPresetId === preset.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\t\t\tkey={ preset.id }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tisPressed={ isSelected }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\thandlePresetClick( preset )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ preset.label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tisPressed={ ! selectedPresetId }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tdisabled={ !! selectedPresetId }\n\t\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Custom' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t{ /* Manual date input */ }\n\t\t\t\t\t<InputControl\n\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\tref={ validityTargetRef }\n\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\tlabel={ __( 'Date' ) }\n\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\tvalue={ value }\n\t\t\t\t\t\tonChange={ handleManualDateChange }\n\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t/>\n\n\t\t\t\t\t{ /* Calendar widget */ }\n\t\t\t\t\t<DateCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={\n\t\t\t\t\t\t\tvalue ? parseDate( value ) || undefined : undefined\n\t\t\t\t\t\t}\n\t\t\t\t\t\tonSelect={ onSelectDate }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezoneString || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</BaseControl>\n\t\t</ValidatedDateControl>\n\t);\n}\n\nfunction CalendarDateRangeControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tconst { id, label, getValue, setValue, format: fieldFormat } = field;\n\tlet value: DateRange;\n\tconst fieldValue = getValue( { item: data } );\n\tif (\n\t\tArray.isArray( fieldValue ) &&\n\t\tfieldValue.length === 2 &&\n\t\tfieldValue.every( ( date ) => typeof date === 'string' )\n\t) {\n\t\tvalue = fieldValue as DateRange;\n\t}\n\n\tconst weekStartsOn =\n\t\t( fieldFormat as FormatDate ).weekStartsOn ??\n\t\tgetSettings().l10n.startOfWeek;\n\n\tconst onChangeCallback = useCallback(\n\t\t( newValue: DateRange ) => {\n\t\t\tonChange(\n\t\t\t\tsetValue( {\n\t\t\t\t\titem: data,\n\t\t\t\t\tvalue: newValue,\n\t\t\t\t} )\n\t\t\t);\n\t\t},\n\t\t[ data, onChange, setValue ]\n\t);\n\n\tconst [ selectedPresetId, setSelectedPresetId ] = useState< string | null >(\n\t\tnull\n\t);\n\n\tconst selectedRange = useMemo( () => {\n\t\tif ( ! value ) {\n\t\t\treturn { from: undefined, to: undefined };\n\t\t}\n\n\t\tconst [ from, to ] = value;\n\t\treturn {\n\t\t\tfrom: parseDate( from ) || undefined,\n\t\t\tto: parseDate( to ) || undefined,\n\t\t};\n\t}, [ value ] );\n\n\tconst [ calendarMonth, setCalendarMonth ] = useState< Date >( () => {\n\t\treturn selectedRange.from || new Date();\n\t} );\n\n\tconst [ isTouched, setIsTouched ] = useState( false );\n\tconst fromInputRef = useRef< HTMLInputElement >( null );\n\tconst toInputRef = useRef< HTMLInputElement >( null );\n\n\tconst updateDateRange = useCallback(\n\t\t( fromDate?: Date | string, toDate?: Date | string ) => {\n\t\t\tif ( fromDate && toDate ) {\n\t\t\t\tonChangeCallback( [\n\t\t\t\t\tformatDate( fromDate ),\n\t\t\t\t\tformatDate( toDate ),\n\t\t\t\t] );\n\t\t\t} else if ( ! fromDate && ! toDate ) {\n\t\t\t\tonChangeCallback( undefined );\n\t\t\t}\n\t\t\t// Do nothing if only one date is set - wait for both\n\t\t},\n\t\t[ onChangeCallback ]\n\t);\n\n\tconst onSelectCalendarRange = useCallback(\n\t\t(\n\t\t\tnewRange:\n\t\t\t\t| { from: Date | undefined; to?: Date | undefined }\n\t\t\t\t| undefined\n\t\t) => {\n\t\t\tupdateDateRange( newRange?.from, newRange?.to );\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ updateDateRange ]\n\t);\n\n\tconst handlePresetClick = useCallback(\n\t\t( preset: ( typeof DATE_RANGE_PRESETS )[ 0 ] ) => {\n\t\t\tconst [ startDate, endDate ] = preset.getValue();\n\t\t\tsetCalendarMonth( startDate );\n\t\t\tupdateDateRange( startDate, endDate );\n\t\t\tsetSelectedPresetId( preset.id );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ updateDateRange ]\n\t);\n\n\tconst handleManualDateChange = useCallback(\n\t\t( fromOrTo: 'from' | 'to', newValue?: string ) => {\n\t\t\tconst [ currentFrom, currentTo ] = value || [\n\t\t\t\tundefined,\n\t\t\t\tundefined,\n\t\t\t];\n\t\t\tconst updatedFrom = fromOrTo === 'from' ? newValue : currentFrom;\n\t\t\tconst updatedTo = fromOrTo === 'to' ? newValue : currentTo;\n\n\t\t\tupdateDateRange( updatedFrom, updatedTo );\n\n\t\t\tif ( newValue ) {\n\t\t\t\tconst parsedDate = parseDate( newValue );\n\t\t\t\tif ( parsedDate ) {\n\t\t\t\t\tsetCalendarMonth( parsedDate );\n\t\t\t\t}\n\t\t\t}\n\n\t\t\tsetSelectedPresetId( null );\n\t\t\tsetIsTouched( true );\n\t\t},\n\t\t[ value, updateDateRange ]\n\t);\n\n\tconst { timezone } = getSettings();\n\n\tconst displayLabel = field.isValid?.required\n\t\t? `${ label } (${ __( 'Required' ) })`\n\t\t: label;\n\n\treturn (\n\t\t<ValidatedDateControl\n\t\t\tfield={ field }\n\t\t\tvalidity={ validity }\n\t\t\tinputRefs={ [ fromInputRef, toInputRef ] }\n\t\t\tisTouched={ isTouched }\n\t\t\tsetIsTouched={ setIsTouched }\n\t\t>\n\t\t\t<BaseControl\n\t\t\t\tid={ id }\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tlabel={ displayLabel }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t>\n\t\t\t\t<Stack direction=\"column\" gap=\"md\">\n\t\t\t\t\t{ /* Preset buttons */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\twrap=\"wrap\"\n\t\t\t\t\t\tjustify=\"flex-start\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ DATE_RANGE_PRESETS.map( ( preset ) => {\n\t\t\t\t\t\t\tconst isSelected = selectedPresetId === preset.id;\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\t\t\tkey={ preset.id }\n\t\t\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\t\t\tisPressed={ isSelected }\n\t\t\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\t\t\tonClick={ () =>\n\t\t\t\t\t\t\t\t\t\thandlePresetClick( preset )\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ preset.label }\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t} ) }\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tclassName=\"dataviews-controls__date-preset\"\n\t\t\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\t\t\tisPressed={ ! selectedPresetId }\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\taccessibleWhenDisabled={ false }\n\t\t\t\t\t\t\tdisabled={ !! selectedPresetId }\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{ __( 'Custom' ) }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t{ /* Manual date range inputs */ }\n\t\t\t\t\t<Stack\n\t\t\t\t\t\tdirection=\"row\"\n\t\t\t\t\t\tgap=\"xs\"\n\t\t\t\t\t\tjustify=\"space-between\"\n\t\t\t\t\t\tclassName=\"dataviews-controls__date-range-inputs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ fromInputRef }\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tlabel={ __( 'From' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value?.[ 0 ] }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleManualDateChange( 'from', newValue )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<InputControl\n\t\t\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\t\t\tref={ toInputRef }\n\t\t\t\t\t\t\ttype=\"date\"\n\t\t\t\t\t\t\tlabel={ __( 'To' ) }\n\t\t\t\t\t\t\thideLabelFromVision\n\t\t\t\t\t\t\tvalue={ value?.[ 1 ] }\n\t\t\t\t\t\t\tonChange={ ( newValue ) =>\n\t\t\t\t\t\t\t\thandleManualDateChange( 'to', newValue )\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\trequired={ !! field.isValid?.required }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</Stack>\n\n\t\t\t\t\t<DateRangeCalendar\n\t\t\t\t\t\tstyle={ { width: '100%' } }\n\t\t\t\t\t\tselected={ selectedRange }\n\t\t\t\t\t\tonSelect={ onSelectCalendarRange }\n\t\t\t\t\t\tmonth={ calendarMonth }\n\t\t\t\t\t\tonMonthChange={ setCalendarMonth }\n\t\t\t\t\t\ttimeZone={ timezone.string || undefined }\n\t\t\t\t\t\tweekStartsOn={ weekStartsOn }\n\t\t\t\t\t/>\n\t\t\t\t</Stack>\n\t\t\t</BaseControl>\n\t\t</ValidatedDateControl>\n\t);\n}\n\nexport default function DateControl< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\toperator,\n\tvalidity,\n}: DataFormControlProps< Item > ) {\n\tif ( operator === OPERATOR_IN_THE_PAST || operator === OPERATOR_OVER ) {\n\t\treturn (\n\t\t\t<RelativeDateControl\n\t\t\t\tclassName=\"dataviews-controls__date\"\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\toperator={ operator }\n\t\t\t/>\n\t\t);\n\t}\n\n\tif ( operator === OPERATOR_BETWEEN ) {\n\t\treturn (\n\t\t\t<CalendarDateRangeControl\n\t\t\t\tdata={ data }\n\t\t\t\tfield={ field }\n\t\t\t\tonChange={ onChange }\n\t\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\t\tvalidity={ validity }\n\t\t\t/>\n\t\t);\n\t}\n\n\treturn (\n\t\t<CalendarDateControl\n\t\t\tdata={ data }\n\t\t\tfield={ field }\n\t\t\tonChange={ onChange }\n\t\t\thideLabelFromVision={ hideLabelFromVision }\n\t\t\tvalidity={ validity }\n\t\t/>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["componentsPrivateApis", "isValidDate", "getCustomValidity", "clsx", "errorIcon", "InputControl", "RelativeDateControl"]
|
|
7
7
|
}
|
|
@@ -35,6 +35,7 @@ __export(dataform_controls_exports, {
|
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(dataform_controls_exports);
|
|
37
37
|
var import_checkbox = __toESM(require("./checkbox.cjs"));
|
|
38
|
+
var import_combobox = __toESM(require("./combobox.cjs"));
|
|
38
39
|
var import_datetime = __toESM(require("./datetime.cjs"));
|
|
39
40
|
var import_date = __toESM(require("./date.cjs"));
|
|
40
41
|
var import_email = __toESM(require("./email.cjs"));
|
|
@@ -57,6 +58,7 @@ var FORM_CONTROLS = {
|
|
|
57
58
|
array: import_array.default,
|
|
58
59
|
checkbox: import_checkbox.default,
|
|
59
60
|
color: import_color.default,
|
|
61
|
+
combobox: import_combobox.default,
|
|
60
62
|
datetime: import_datetime.default,
|
|
61
63
|
date: import_date.default,
|
|
62
64
|
email: import_email.default,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/dataform-controls/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps, Field, EditConfig } from '../../types';\nimport checkbox from './checkbox';\nimport datetime from './datetime';\nimport date from './date';\nimport email from './email';\nimport telephone from './telephone';\nimport url from './url';\nimport integer from './integer';\nimport number from './number';\nimport radio from './radio';\nimport select from './select';\nimport text from './text';\nimport toggle from './toggle';\nimport textarea from './textarea';\nimport toggleGroup from './toggle-group';\nimport array from './array';\nimport color from './color';\nimport password from './password';\nimport hasElements from '../../field-types/utils/has-elements';\n\ninterface FormControls {\n\t[ key: string ]: ComponentType< DataFormControlProps< any > >;\n}\n\nconst FORM_CONTROLS: FormControls = {\n\tarray,\n\tcheckbox,\n\tcolor,\n\tdatetime,\n\tdate,\n\temail,\n\ttelephone,\n\turl,\n\tinteger,\n\tnumber,\n\tpassword,\n\tradio,\n\tselect,\n\ttext,\n\ttoggle,\n\ttextarea,\n\ttoggleGroup,\n};\n\nfunction isEditConfig( value: any ): value is EditConfig {\n\treturn (\n\t\tvalue && typeof value === 'object' && typeof value.control === 'string'\n\t);\n}\n\nfunction createConfiguredControl( config: EditConfig ) {\n\tconst { control, ...controlConfig } = config;\n\tconst BaseControlType = getControlByType( control );\n\tif ( BaseControlType === null ) {\n\t\treturn null;\n\t}\n\n\treturn function ConfiguredControl< Item >(\n\t\tprops: DataFormControlProps< Item >\n\t) {\n\t\treturn <BaseControlType { ...props } config={ controlConfig } />;\n\t};\n}\n\nexport function getControl< Item >(\n\tfield: Field< Item >,\n\tfallback: string | null\n): ComponentType< DataFormControlProps< Item > > | null {\n\tif ( typeof field.Edit === 'function' ) {\n\t\treturn field.Edit;\n\t}\n\n\tif ( typeof field.Edit === 'string' ) {\n\t\treturn getControlByType( field.Edit );\n\t}\n\n\tif ( isEditConfig( field.Edit ) ) {\n\t\treturn createConfiguredControl( field.Edit );\n\t}\n\n\tif ( hasElements( field ) && field.type !== 'array' ) {\n\t\treturn getControlByType( 'select' );\n\t}\n\n\tif ( fallback === null ) {\n\t\treturn null;\n\t}\n\n\treturn getControlByType( fallback );\n}\n\nexport function getControlByType( type: string ) {\n\tif ( Object.keys( FORM_CONTROLS ).includes( type ) ) {\n\t\treturn FORM_CONTROLS[ type ];\n\t}\n\n\treturn null;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,sBAAqB;AACrB,sBAAqB;AACrB,kBAAiB;AACjB,mBAAkB;AAClB,uBAAsB;AACtB,iBAAgB;AAChB,qBAAoB;AACpB,oBAAmB;AACnB,mBAAkB;AAClB,oBAAmB;AACnB,kBAAiB;AACjB,oBAAmB;AACnB,sBAAqB;AACrB,0BAAwB;AACxB,mBAAkB;AAClB,mBAAkB;AAClB,sBAAqB;AACrB,0BAAwB;
|
|
6
|
-
"names": ["array", "checkbox", "color", "datetime", "date", "email", "telephone", "url", "integer", "number", "password", "radio", "select", "text", "toggle", "textarea", "toggleGroup", "hasElements"]
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport type { ComponentType } from 'react';\n\n/**\n * Internal dependencies\n */\nimport type { DataFormControlProps, Field, EditConfig } from '../../types';\nimport checkbox from './checkbox';\nimport combobox from './combobox';\nimport datetime from './datetime';\nimport date from './date';\nimport email from './email';\nimport telephone from './telephone';\nimport url from './url';\nimport integer from './integer';\nimport number from './number';\nimport radio from './radio';\nimport select from './select';\nimport text from './text';\nimport toggle from './toggle';\nimport textarea from './textarea';\nimport toggleGroup from './toggle-group';\nimport array from './array';\nimport color from './color';\nimport password from './password';\nimport hasElements from '../../field-types/utils/has-elements';\n\ninterface FormControls {\n\t[ key: string ]: ComponentType< DataFormControlProps< any > >;\n}\n\nconst FORM_CONTROLS: FormControls = {\n\tarray,\n\tcheckbox,\n\tcolor,\n\tcombobox,\n\tdatetime,\n\tdate,\n\temail,\n\ttelephone,\n\turl,\n\tinteger,\n\tnumber,\n\tpassword,\n\tradio,\n\tselect,\n\ttext,\n\ttoggle,\n\ttextarea,\n\ttoggleGroup,\n};\n\nfunction isEditConfig( value: any ): value is EditConfig {\n\treturn (\n\t\tvalue && typeof value === 'object' && typeof value.control === 'string'\n\t);\n}\n\nfunction createConfiguredControl( config: EditConfig ) {\n\tconst { control, ...controlConfig } = config;\n\tconst BaseControlType = getControlByType( control );\n\tif ( BaseControlType === null ) {\n\t\treturn null;\n\t}\n\n\treturn function ConfiguredControl< Item >(\n\t\tprops: DataFormControlProps< Item >\n\t) {\n\t\treturn <BaseControlType { ...props } config={ controlConfig } />;\n\t};\n}\n\nexport function getControl< Item >(\n\tfield: Field< Item >,\n\tfallback: string | null\n): ComponentType< DataFormControlProps< Item > > | null {\n\tif ( typeof field.Edit === 'function' ) {\n\t\treturn field.Edit;\n\t}\n\n\tif ( typeof field.Edit === 'string' ) {\n\t\treturn getControlByType( field.Edit );\n\t}\n\n\tif ( isEditConfig( field.Edit ) ) {\n\t\treturn createConfiguredControl( field.Edit );\n\t}\n\n\tif ( hasElements( field ) && field.type !== 'array' ) {\n\t\treturn getControlByType( 'select' );\n\t}\n\n\tif ( fallback === null ) {\n\t\treturn null;\n\t}\n\n\treturn getControlByType( fallback );\n}\n\nexport function getControlByType( type: string ) {\n\tif ( Object.keys( FORM_CONTROLS ).includes( type ) ) {\n\t\treturn FORM_CONTROLS[ type ];\n\t}\n\n\treturn null;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,sBAAqB;AACrB,sBAAqB;AACrB,sBAAqB;AACrB,kBAAiB;AACjB,mBAAkB;AAClB,uBAAsB;AACtB,iBAAgB;AAChB,qBAAoB;AACpB,oBAAmB;AACnB,mBAAkB;AAClB,oBAAmB;AACnB,kBAAiB;AACjB,oBAAmB;AACnB,sBAAqB;AACrB,0BAAwB;AACxB,mBAAkB;AAClB,mBAAkB;AAClB,sBAAqB;AACrB,0BAAwB;AA2Cf;AArCT,IAAM,gBAA8B;AAAA,EACnC,oBAAAA;AAAA,EACA,0BAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,4BAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,wBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,oBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,0BAAAC;AAAA,EACA,iCAAAC;AACD;AAEA,SAAS,aAAc,OAAkC;AACxD,SACC,SAAS,OAAO,UAAU,YAAY,OAAO,MAAM,YAAY;AAEjE;AAEA,SAAS,wBAAyB,QAAqB;AACtD,QAAM,EAAE,SAAS,GAAG,cAAc,IAAI;AACtC,QAAM,kBAAkB,iBAAkB,OAAQ;AAClD,MAAK,oBAAoB,MAAO;AAC/B,WAAO;AAAA,EACR;AAEA,SAAO,SAAS,kBACf,OACC;AACD,WAAO,4CAAC,mBAAkB,GAAG,OAAQ,QAAS,eAAgB;AAAA,EAC/D;AACD;AAEO,SAAS,WACf,OACA,UACuD;AACvD,MAAK,OAAO,MAAM,SAAS,YAAa;AACvC,WAAO,MAAM;AAAA,EACd;AAEA,MAAK,OAAO,MAAM,SAAS,UAAW;AACrC,WAAO,iBAAkB,MAAM,IAAK;AAAA,EACrC;AAEA,MAAK,aAAc,MAAM,IAAK,GAAI;AACjC,WAAO,wBAAyB,MAAM,IAAK;AAAA,EAC5C;AAEA,UAAK,oBAAAC,SAAa,KAAM,KAAK,MAAM,SAAS,SAAU;AACrD,WAAO,iBAAkB,QAAS;AAAA,EACnC;AAEA,MAAK,aAAa,MAAO;AACxB,WAAO;AAAA,EACR;AAEA,SAAO,iBAAkB,QAAS;AACnC;AAEO,SAAS,iBAAkB,MAAe;AAChD,MAAK,OAAO,KAAM,aAAc,EAAE,SAAU,IAAK,GAAI;AACpD,WAAO,cAAe,IAAK;AAAA,EAC5B;AAEA,SAAO;AACR;",
|
|
6
|
+
"names": ["array", "checkbox", "color", "combobox", "datetime", "date", "email", "telephone", "url", "integer", "number", "password", "radio", "select", "text", "toggle", "textarea", "toggleGroup", "hasElements"]
|
|
7
7
|
}
|
|
@@ -35,14 +35,38 @@ __export(card_exports, {
|
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(card_exports);
|
|
37
37
|
var import_components = require("@wordpress/components");
|
|
38
|
+
var import_ui = require("@wordpress/ui");
|
|
38
39
|
var import_element = require("@wordpress/element");
|
|
39
40
|
var import_icons = require("@wordpress/icons");
|
|
41
|
+
var import_i18n = require("@wordpress/i18n");
|
|
40
42
|
var import__ = require("../index.cjs");
|
|
41
43
|
var import_dataform_context = __toESM(require("../../dataform-context/index.cjs"));
|
|
42
44
|
var import_data_form_layout = require("../data-form-layout.cjs");
|
|
43
45
|
var import_normalize_form = require("../normalize-form.cjs");
|
|
44
46
|
var import_get_summary_fields = require("../get-summary-fields.cjs");
|
|
47
|
+
var import_use_report_validity = __toESM(require("../../../hooks/use-report-validity.cjs"));
|
|
45
48
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
49
|
+
function countInvalidFields(validity) {
|
|
50
|
+
if (!validity) {
|
|
51
|
+
return 0;
|
|
52
|
+
}
|
|
53
|
+
let count = 0;
|
|
54
|
+
const validityRules = Object.keys(validity).filter(
|
|
55
|
+
(key) => key !== "children"
|
|
56
|
+
);
|
|
57
|
+
for (const key of validityRules) {
|
|
58
|
+
const rule = validity[key];
|
|
59
|
+
if (rule?.type === "invalid") {
|
|
60
|
+
count++;
|
|
61
|
+
}
|
|
62
|
+
}
|
|
63
|
+
if (validity.children) {
|
|
64
|
+
for (const childValidity of Object.values(validity.children)) {
|
|
65
|
+
count += countInvalidFields(childValidity);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
return count;
|
|
69
|
+
}
|
|
46
70
|
var NonCollapsibleCardHeader = ({
|
|
47
71
|
children,
|
|
48
72
|
...props
|
|
@@ -63,12 +87,16 @@ var NonCollapsibleCardHeader = ({
|
|
|
63
87
|
function useCardHeader(layout) {
|
|
64
88
|
const { isOpened, isCollapsible } = layout;
|
|
65
89
|
const [isOpen, setIsOpen] = (0, import_element.useState)(isOpened);
|
|
90
|
+
const [touched, setTouched] = (0, import_element.useState)(false);
|
|
66
91
|
(0, import_element.useEffect)(() => {
|
|
67
92
|
setIsOpen(isOpened);
|
|
68
93
|
}, [isOpened]);
|
|
69
94
|
const toggle = (0, import_element.useCallback)(() => {
|
|
95
|
+
if (isOpen) {
|
|
96
|
+
setTouched(true);
|
|
97
|
+
}
|
|
70
98
|
setIsOpen((prev) => !prev);
|
|
71
|
-
}, []);
|
|
99
|
+
}, [isOpen]);
|
|
72
100
|
const CollapsibleCardHeader = (0, import_element.useCallback)(
|
|
73
101
|
({
|
|
74
102
|
children,
|
|
@@ -113,7 +141,12 @@ function useCardHeader(layout) {
|
|
|
113
141
|
);
|
|
114
142
|
const effectiveIsOpen = isCollapsible ? isOpen : true;
|
|
115
143
|
const CardHeaderComponent = isCollapsible ? CollapsibleCardHeader : NonCollapsibleCardHeader;
|
|
116
|
-
return {
|
|
144
|
+
return {
|
|
145
|
+
isOpen: effectiveIsOpen,
|
|
146
|
+
CardHeader: CardHeaderComponent,
|
|
147
|
+
touched,
|
|
148
|
+
setTouched
|
|
149
|
+
};
|
|
117
150
|
}
|
|
118
151
|
function isSummaryFieldVisible(summaryField, summaryConfig, isOpen) {
|
|
119
152
|
if (!summaryConfig || Array.isArray(summaryConfig) && summaryConfig.length === 0) {
|
|
@@ -149,6 +182,7 @@ function FormCardField({
|
|
|
149
182
|
}) {
|
|
150
183
|
const { fields } = (0, import_element.useContext)(import_dataform_context.default);
|
|
151
184
|
const layout = field.layout;
|
|
185
|
+
const cardBodyRef = (0, import_element.useRef)(null);
|
|
152
186
|
const form = (0, import_element.useMemo)(
|
|
153
187
|
() => ({
|
|
154
188
|
layout: import_normalize_form.DEFAULT_LAYOUT,
|
|
@@ -156,11 +190,26 @@ function FormCardField({
|
|
|
156
190
|
}),
|
|
157
191
|
[field]
|
|
158
192
|
);
|
|
159
|
-
const { isOpen, CardHeader } = useCardHeader(layout);
|
|
193
|
+
const { isOpen, CardHeader, touched, setTouched } = useCardHeader(layout);
|
|
194
|
+
const handleBlur = (0, import_element.useCallback)(() => {
|
|
195
|
+
setTouched(true);
|
|
196
|
+
}, [setTouched]);
|
|
197
|
+
(0, import_use_report_validity.default)(cardBodyRef, isOpen && touched);
|
|
160
198
|
const summaryFields = (0, import_get_summary_fields.getSummaryFields)(layout.summary, fields);
|
|
161
199
|
const visibleSummaryFields = summaryFields.filter(
|
|
162
200
|
(summaryField) => isSummaryFieldVisible(summaryField, layout.summary, isOpen)
|
|
163
201
|
);
|
|
202
|
+
const invalidCount = countInvalidFields(validity);
|
|
203
|
+
const showValidationBadge = touched && invalidCount > 0 && layout.isCollapsible;
|
|
204
|
+
const validationBadge = showValidationBadge ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Badge, { intent: "high", children: (0, import_i18n.sprintf)(
|
|
205
|
+
/* translators: %d: Number of fields that need attention */
|
|
206
|
+
(0, import_i18n._n)(
|
|
207
|
+
"%d field needs attention",
|
|
208
|
+
"%d fields need attention",
|
|
209
|
+
invalidCount
|
|
210
|
+
),
|
|
211
|
+
invalidCount
|
|
212
|
+
) }) : null;
|
|
164
213
|
const sizeCard = {
|
|
165
214
|
blockStart: "medium",
|
|
166
215
|
blockEnd: "medium",
|
|
@@ -178,6 +227,7 @@ function FormCardField({
|
|
|
178
227
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
|
|
179
228
|
withHeader2 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { className: "dataforms-layouts-card__field-header", children: [
|
|
180
229
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-card__field-header-label", children: field.label }),
|
|
230
|
+
validationBadge,
|
|
181
231
|
visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map(
|
|
182
232
|
(summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
183
233
|
summaryField.render,
|
|
@@ -196,6 +246,8 @@ function FormCardField({
|
|
|
196
246
|
{
|
|
197
247
|
size: sizeCardBody2,
|
|
198
248
|
className: "dataforms-layouts-card__field-control",
|
|
249
|
+
ref: cardBodyRef,
|
|
250
|
+
onBlur: handleBlur,
|
|
199
251
|
children: [
|
|
200
252
|
field.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-description", children: field.description }),
|
|
201
253
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
@@ -232,6 +284,7 @@ function FormCardField({
|
|
|
232
284
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_components.Card, { className: "dataforms-layouts-card__field", size: sizeCard, children: [
|
|
233
285
|
withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { className: "dataforms-layouts-card__field-header", children: [
|
|
234
286
|
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "dataforms-layouts-card__field-header-label", children: fieldDefinition.label }),
|
|
287
|
+
validationBadge,
|
|
235
288
|
visibleSummaryFields.length > 0 && layout.withHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "dataforms-layouts-card__field-summary", children: visibleSummaryFields.map((summaryField) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
236
289
|
summaryField.render,
|
|
237
290
|
{
|
|
@@ -248,6 +301,8 @@ function FormCardField({
|
|
|
248
301
|
{
|
|
249
302
|
size: sizeCardBody,
|
|
250
303
|
className: "dataforms-layouts-card__field-control",
|
|
304
|
+
ref: cardBodyRef,
|
|
305
|
+
onBlur: handleBlur,
|
|
251
306
|
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
252
307
|
RegularLayout,
|
|
253
308
|
{
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/dataform-layouts/card/index.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\n\nconst NonCollapsibleCardHeader = ( {\n\tchildren,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n} ) => (\n\t<OriginalCardHeader isBorderless { ...props }>\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\theight: '40px', // This is to match the chevron's __next40pxDefaultSize\n\t\t\t\twidth: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\talignItems: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t</OriginalCardHeader>\n);\n\nexport function useCardHeader( layout: NormalizedCardLayout ) {\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\n\t// Sync internal state when the isOpened prop changes.\n\t// This is unlikely to happen in production, but it helps with storybook controls.\n\tuseEffect( () => {\n\t\tsetIsOpen( isOpened );\n\t}, [ isOpened ] );\n\n\tconst toggle = useCallback( () => {\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<OriginalCardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t\tisBorderless\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</OriginalCardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\tconst effectiveIsOpen = isCollapsible ? isOpen : true;\n\tconst CardHeaderComponent = isCollapsible\n\t\t? CollapsibleCardHeader\n\t\t: NonCollapsibleCardHeader;\n\n\treturn { isOpen: effectiveIsOpen, CardHeader: CardHeaderComponent };\n}\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CardHeader } = useCardHeader( layout );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\tconst sizeCard = {\n\t\tblockStart: 'medium' as const,\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\tif ( !! field.children ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\n\t\tconst sizeCardBody = {\n\t\t\tblockStart: withHeader\n\t\t\t\t? ( 'none' as const )\n\t\t\t\t: ( 'medium' as const ),\n\t\t\tblockEnd: 'medium' as const,\n\t\t\tinlineStart: 'medium' as const,\n\t\t\tinlineEnd: 'medium' as const,\n\t\t};\n\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</CardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody\n\t\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\n\tconst sizeCardBody = {\n\t\tblockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t{ withHeader && (\n\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ visibleSummaryFields.length > 0 && layout.withHeader && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody\n\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t>\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t/>\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,wBAKO;AACP,
|
|
6
|
-
"names": ["OriginalCardHeader", "DataFormContext", "withHeader", "sizeCardBody"]
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport {\n\tButton,\n\tCard,\n\tCardBody,\n\tCardHeader as OriginalCardHeader,\n} from '@wordpress/components';\nimport { Badge } from '@wordpress/ui';\nimport {\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from '@wordpress/element';\nimport { chevronDown, chevronUp } from '@wordpress/icons';\nimport { sprintf, _n } from '@wordpress/i18n';\n\n/**\n * Internal dependencies\n */\nimport { getFormFieldLayout } from '..';\nimport DataFormContext from '../../dataform-context';\nimport type {\n\tFieldLayoutProps,\n\tFieldValidity,\n\tNormalizedCardLayout,\n\tNormalizedField,\n\tNormalizedForm,\n\tNormalizedLayout,\n} from '../../../types';\nimport { DataFormLayout } from '../data-form-layout';\nimport { DEFAULT_LAYOUT } from '../normalize-form';\nimport { getSummaryFields } from '../get-summary-fields';\nimport useReportValidity from '../../../hooks/use-report-validity';\n\nfunction countInvalidFields( validity: FieldValidity | undefined ): number {\n\tif ( ! validity ) {\n\t\treturn 0;\n\t}\n\n\tlet count = 0;\n\tconst validityRules = Object.keys( validity ).filter(\n\t\t( key ) => key !== 'children'\n\t);\n\n\tfor ( const key of validityRules ) {\n\t\tconst rule = validity[ key as keyof Omit< FieldValidity, 'children' > ];\n\t\tif ( rule?.type === 'invalid' ) {\n\t\t\tcount++;\n\t\t}\n\t}\n\n\t// Count children recursively\n\tif ( validity.children ) {\n\t\tfor ( const childValidity of Object.values( validity.children ) ) {\n\t\t\tcount += countInvalidFields( childValidity );\n\t\t}\n\t}\n\n\treturn count;\n}\n\nconst NonCollapsibleCardHeader = ( {\n\tchildren,\n\t...props\n}: {\n\tchildren: React.ReactNode;\n} ) => (\n\t<OriginalCardHeader isBorderless { ...props }>\n\t\t<div\n\t\t\tstyle={ {\n\t\t\t\theight: '40px', // This is to match the chevron's __next40pxDefaultSize\n\t\t\t\twidth: '100%',\n\t\t\t\tdisplay: 'flex',\n\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\talignItems: 'center',\n\t\t\t} }\n\t\t>\n\t\t\t{ children }\n\t\t</div>\n\t</OriginalCardHeader>\n);\n\nexport function useCardHeader( layout: NormalizedCardLayout ) {\n\tconst { isOpened, isCollapsible } = layout;\n\tconst [ isOpen, setIsOpen ] = useState( isOpened );\n\tconst [ touched, setTouched ] = useState( false );\n\n\t// Sync internal state when the isOpened prop changes.\n\t// This is unlikely to happen in production, but it helps with storybook controls.\n\tuseEffect( () => {\n\t\tsetIsOpen( isOpened );\n\t}, [ isOpened ] );\n\n\tconst toggle = useCallback( () => {\n\t\t// Mark as touched when collapsing (going from open to closed)\n\t\tif ( isOpen ) {\n\t\t\tsetTouched( true );\n\t\t}\n\t\tsetIsOpen( ( prev ) => ! prev );\n\t}, [ isOpen ] );\n\n\tconst CollapsibleCardHeader = useCallback(\n\t\t( {\n\t\t\tchildren,\n\t\t\t...props\n\t\t}: {\n\t\t\tchildren: React.ReactNode;\n\t\t\t[ key: string ]: any;\n\t\t} ) => (\n\t\t\t<OriginalCardHeader\n\t\t\t\t{ ...props }\n\t\t\t\tonClick={ toggle }\n\t\t\t\tstyle={ {\n\t\t\t\t\tcursor: 'pointer',\n\t\t\t\t\t...props.style,\n\t\t\t\t} }\n\t\t\t\tisBorderless\n\t\t\t>\n\t\t\t\t<div\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: '100%',\n\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\tjustifyContent: 'space-between',\n\t\t\t\t\t\talignItems: 'center',\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t\t<Button\n\t\t\t\t\t__next40pxDefaultSize\n\t\t\t\t\tvariant=\"tertiary\"\n\t\t\t\t\ticon={ isOpen ? chevronUp : chevronDown }\n\t\t\t\t\taria-expanded={ isOpen }\n\t\t\t\t\taria-label={ isOpen ? 'Collapse' : 'Expand' }\n\t\t\t\t/>\n\t\t\t</OriginalCardHeader>\n\t\t),\n\t\t[ toggle, isOpen ]\n\t);\n\n\tconst effectiveIsOpen = isCollapsible ? isOpen : true;\n\tconst CardHeaderComponent = isCollapsible\n\t\t? CollapsibleCardHeader\n\t\t: NonCollapsibleCardHeader;\n\n\treturn {\n\t\tisOpen: effectiveIsOpen,\n\t\tCardHeader: CardHeaderComponent,\n\t\ttouched,\n\t\tsetTouched,\n\t};\n}\n\nfunction isSummaryFieldVisible< Item >(\n\tsummaryField: NormalizedField< Item >,\n\tsummaryConfig: NormalizedCardLayout[ 'summary' ],\n\tisOpen: boolean\n) {\n\t// If no summary config, dont't show any fields\n\tif (\n\t\t! summaryConfig ||\n\t\t( Array.isArray( summaryConfig ) && summaryConfig.length === 0 )\n\t) {\n\t\treturn false;\n\t}\n\n\t// Convert to array for consistent handling\n\tconst summaryConfigArray = Array.isArray( summaryConfig )\n\t\t? summaryConfig\n\t\t: [ summaryConfig ];\n\n\t// Find the config for this specific field\n\tconst fieldConfig = summaryConfigArray.find( ( config ) => {\n\t\tif ( typeof config === 'string' ) {\n\t\t\treturn config === summaryField.id;\n\t\t}\n\t\tif ( typeof config === 'object' && 'id' in config ) {\n\t\t\treturn config.id === summaryField.id;\n\t\t}\n\t\treturn false;\n\t} );\n\n\t// If field is not in summary config, don't show it\n\tif ( ! fieldConfig ) {\n\t\treturn false;\n\t}\n\n\t// If it's a string, always show it\n\tif ( typeof fieldConfig === 'string' ) {\n\t\treturn true;\n\t}\n\n\t// If it has visibility rules, respect them\n\tif ( typeof fieldConfig === 'object' && 'visibility' in fieldConfig ) {\n\t\treturn (\n\t\t\tfieldConfig.visibility === 'always' ||\n\t\t\t( fieldConfig.visibility === 'when-collapsed' && ! isOpen )\n\t\t);\n\t}\n\n\t// Default to always show\n\treturn true;\n}\n\nexport default function FormCardField< Item >( {\n\tdata,\n\tfield,\n\tonChange,\n\thideLabelFromVision,\n\tvalidity,\n}: FieldLayoutProps< Item > ) {\n\tconst { fields } = useContext( DataFormContext );\n\tconst layout = field.layout as NormalizedCardLayout;\n\tconst cardBodyRef = useRef< HTMLDivElement >( null );\n\n\tconst form: NormalizedForm = useMemo(\n\t\t() => ( {\n\t\t\tlayout: DEFAULT_LAYOUT as NormalizedLayout,\n\t\t\tfields: field.children ?? [],\n\t\t} ),\n\t\t[ field ]\n\t);\n\n\tconst { isOpen, CardHeader, touched, setTouched } = useCardHeader( layout );\n\n\t// Mark the card as touched when any field inside it is blurred.\n\t// This aligns with how validated controls show errors on blur.\n\tconst handleBlur = useCallback( () => {\n\t\tsetTouched( true );\n\t}, [ setTouched ] );\n\n\t// When the card is expanded after being touched (collapsed with errors),\n\t// trigger reportValidity to show field-level errors.\n\tuseReportValidity( cardBodyRef, isOpen && touched );\n\n\tconst summaryFields = getSummaryFields< Item >( layout.summary, fields );\n\n\tconst visibleSummaryFields = summaryFields.filter( ( summaryField ) =>\n\t\tisSummaryFieldVisible( summaryField, layout.summary, isOpen )\n\t);\n\n\t// Count invalid fields for validation badge\n\tconst invalidCount = countInvalidFields( validity );\n\tconst showValidationBadge =\n\t\ttouched && invalidCount > 0 && layout.isCollapsible;\n\n\tconst validationBadge = showValidationBadge ? (\n\t\t<Badge intent=\"high\">\n\t\t\t{ sprintf(\n\t\t\t\t/* translators: %d: Number of fields that need attention */\n\t\t\t\t_n(\n\t\t\t\t\t'%d field needs attention',\n\t\t\t\t\t'%d fields need attention',\n\t\t\t\t\tinvalidCount\n\t\t\t\t),\n\t\t\t\tinvalidCount\n\t\t\t) }\n\t\t</Badge>\n\t) : null;\n\n\tconst sizeCard = {\n\t\tblockStart: 'medium' as const,\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\tif ( !! field.children ) {\n\t\tconst withHeader = !! field.label && layout.withHeader;\n\n\t\tconst sizeCardBody = {\n\t\t\tblockStart: withHeader\n\t\t\t\t? ( 'none' as const )\n\t\t\t\t: ( 'medium' as const ),\n\t\t\tblockEnd: 'medium' as const,\n\t\t\tinlineStart: 'medium' as const,\n\t\t\tinlineEnd: 'medium' as const,\n\t\t};\n\n\t\treturn (\n\t\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t\t{ withHeader && (\n\t\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t\t{ field.label }\n\t\t\t\t\t\t</span>\n\t\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t\t{ visibleSummaryFields.length > 0 &&\n\t\t\t\t\t\t\tlayout.withHeader && (\n\t\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t\t\t{ visibleSummaryFields.map(\n\t\t\t\t\t\t\t\t\t\t( summaryField ) => (\n\t\t\t\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t\t\t)\n\t\t\t\t\t\t\t\t\t) }\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t) }\n\t\t\t\t\t</CardHeader>\n\t\t\t\t) }\n\t\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t\t<CardBody\n\t\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ field.description && (\n\t\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-description\">\n\t\t\t\t\t\t\t\t{ field.description }\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t) }\n\t\t\t\t\t\t<DataFormLayout\n\t\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\t\tvalidity={ validity?.children }\n\t\t\t\t\t\t/>\n\t\t\t\t\t</CardBody>\n\t\t\t\t) }\n\t\t\t</Card>\n\t\t);\n\t}\n\n\tconst fieldDefinition = fields.find(\n\t\t( fieldDef ) => fieldDef.id === field.id\n\t);\n\n\tif ( ! fieldDefinition || ! fieldDefinition.Edit ) {\n\t\treturn null;\n\t}\n\n\tconst RegularLayout = getFormFieldLayout( 'regular' )?.component;\n\tif ( ! RegularLayout ) {\n\t\treturn null;\n\t}\n\tconst withHeader = !! fieldDefinition.label && layout.withHeader;\n\n\tconst sizeCardBody = {\n\t\tblockStart: withHeader ? ( 'none' as const ) : ( 'medium' as const ),\n\t\tblockEnd: 'medium' as const,\n\t\tinlineStart: 'medium' as const,\n\t\tinlineEnd: 'medium' as const,\n\t};\n\n\treturn (\n\t\t<Card className=\"dataforms-layouts-card__field\" size={ sizeCard }>\n\t\t\t{ withHeader && (\n\t\t\t\t<CardHeader className=\"dataforms-layouts-card__field-header\">\n\t\t\t\t\t<span className=\"dataforms-layouts-card__field-header-label\">\n\t\t\t\t\t\t{ fieldDefinition.label }\n\t\t\t\t\t</span>\n\t\t\t\t\t{ validationBadge }\n\t\t\t\t\t{ visibleSummaryFields.length > 0 && layout.withHeader && (\n\t\t\t\t\t\t<div className=\"dataforms-layouts-card__field-summary\">\n\t\t\t\t\t\t\t{ visibleSummaryFields.map( ( summaryField ) => (\n\t\t\t\t\t\t\t\t<summaryField.render\n\t\t\t\t\t\t\t\t\tkey={ summaryField.id }\n\t\t\t\t\t\t\t\t\titem={ data }\n\t\t\t\t\t\t\t\t\tfield={ summaryField }\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) ) }\n\t\t\t\t\t\t</div>\n\t\t\t\t\t) }\n\t\t\t\t</CardHeader>\n\t\t\t) }\n\t\t\t{ ( isOpen || ! withHeader ) && (\n\t\t\t\t// If it doesn't have a header, keep it open.\n\t\t\t\t// Otherwise, the card will not be visible.\n\t\t\t\t<CardBody\n\t\t\t\t\tsize={ sizeCardBody }\n\t\t\t\t\tclassName=\"dataforms-layouts-card__field-control\"\n\t\t\t\t\tref={ cardBodyRef }\n\t\t\t\t\tonBlur={ handleBlur }\n\t\t\t\t>\n\t\t\t\t\t<RegularLayout\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfield={ field }\n\t\t\t\t\t\tonChange={ onChange }\n\t\t\t\t\t\thideLabelFromVision={\n\t\t\t\t\t\t\thideLabelFromVision || withHeader\n\t\t\t\t\t\t}\n\t\t\t\t\t\tvalidity={ validity }\n\t\t\t\t\t/>\n\t\t\t\t</CardBody>\n\t\t\t) }\n\t\t</Card>\n\t);\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
|
+
"names": ["OriginalCardHeader", "DataFormContext", "useReportValidity", "withHeader", "sizeCardBody"]
|
|
7
7
|
}
|