@wordpress/widget-dashboard 0.1.1 → 0.3.1-next.v.202607070741.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 +24 -0
- package/README.md +10 -16
- package/build/components/actions/actions.cjs +2 -19
- package/build/components/actions/actions.cjs.map +3 -3
- package/build/components/commands/commands.cjs +1 -60
- package/build/components/commands/commands.cjs.map +2 -2
- package/build/{utils/grid-model-change → components/widget-attribute-controls}/index.cjs +7 -9
- package/build/components/widget-attribute-controls/index.cjs.map +7 -0
- package/build/components/widget-attribute-controls/widget-attribute-controls.cjs +93 -0
- package/build/components/widget-attribute-controls/widget-attribute-controls.cjs.map +7 -0
- package/build/components/widget-chrome/widget-chrome.cjs +16 -63
- package/build/components/widget-chrome/widget-chrome.cjs.map +2 -2
- package/build/components/{layout-settings → widget-frame}/index.cjs +9 -7
- package/build/components/widget-frame/index.cjs.map +7 -0
- package/build/components/widget-frame/widget-frame.cjs +193 -0
- package/build/components/widget-frame/widget-frame.cjs.map +7 -0
- package/build/{utils/migrate-layout → components/widget-header}/index.cjs +7 -7
- package/build/components/widget-header/index.cjs.map +7 -0
- package/build/components/widget-header/widget-header-infotip.cjs +166 -0
- package/build/components/widget-header/widget-header-infotip.cjs.map +7 -0
- package/build/components/widget-header/widget-header.cjs +173 -0
- package/build/components/widget-header/widget-header.cjs.map +7 -0
- package/build/components/{widget-settings/utils/get-admin-menu-inset.cjs → widget-layout-controls/index.cjs} +8 -18
- package/build/components/widget-layout-controls/index.cjs.map +7 -0
- package/build/components/{widgets/widget-layout-toolbar.cjs → widget-layout-controls/widget-layout-controls.cjs} +9 -100
- package/build/components/widget-layout-controls/widget-layout-controls.cjs.map +7 -0
- package/build/components/widget-picker/widget-picker.cjs +5 -93
- package/build/components/widget-picker/widget-picker.cjs.map +3 -3
- package/build/components/widget-preview-chrome/index.cjs +31 -0
- package/build/components/widget-preview-chrome/index.cjs.map +7 -0
- package/build/components/{widget-settings/widget-settings-toolbar.cjs → widget-preview-chrome/widget-preview-chrome.cjs} +41 -23
- package/build/components/widget-preview-chrome/widget-preview-chrome.cjs.map +7 -0
- package/build/components/widget-settings/index.cjs +3 -3
- package/build/components/widget-settings/index.cjs.map +1 -1
- package/build/components/widget-settings/utils/index.cjs +0 -3
- package/build/components/widget-settings/utils/index.cjs.map +2 -2
- package/build/components/widget-settings/widget-settings-trigger.cjs +22 -28
- package/build/components/widget-settings/widget-settings-trigger.cjs.map +2 -2
- package/build/components/widget-settings/widget-settings.cjs +40 -57
- package/build/components/widget-settings/widget-settings.cjs.map +2 -2
- package/build/components/widget-toolbar/widget-toolbar.cjs +7 -4
- package/build/components/widget-toolbar/widget-toolbar.cjs.map +2 -2
- package/build/components/widgets/widgets.cjs +14 -7
- package/build/components/widgets/widgets.cjs.map +2 -2
- package/build/context/dashboard-context.cjs +31 -80
- package/build/context/dashboard-context.cjs.map +2 -2
- package/build/context/ui-context.cjs +2 -18
- package/build/context/ui-context.cjs.map +2 -2
- package/build/types.cjs.map +1 -1
- package/build/utils/index.cjs +2 -5
- package/build/utils/index.cjs.map +2 -2
- package/build/widget-dashboard.cjs +0 -4
- package/build/widget-dashboard.cjs.map +2 -2
- package/build-module/components/actions/actions.mjs +3 -20
- package/build-module/components/actions/actions.mjs.map +2 -2
- package/build-module/components/commands/commands.mjs +2 -67
- package/build-module/components/commands/commands.mjs.map +2 -2
- package/build-module/components/widget-attribute-controls/index.mjs +6 -0
- package/build-module/components/widget-attribute-controls/index.mjs.map +7 -0
- package/build-module/components/widget-attribute-controls/widget-attribute-controls.mjs +68 -0
- package/build-module/components/widget-attribute-controls/widget-attribute-controls.mjs.map +7 -0
- package/build-module/components/widget-chrome/widget-chrome.mjs +17 -70
- package/build-module/components/widget-chrome/widget-chrome.mjs.map +2 -2
- package/build-module/components/widget-frame/index.mjs +7 -0
- package/build-module/components/widget-frame/index.mjs.map +7 -0
- package/build-module/components/widget-frame/widget-frame.mjs +157 -0
- package/build-module/components/widget-frame/widget-frame.mjs.map +7 -0
- package/build-module/components/widget-header/index.mjs +6 -0
- package/build-module/components/widget-header/index.mjs.map +7 -0
- package/build-module/components/widget-header/widget-header-infotip.mjs +141 -0
- package/build-module/components/widget-header/widget-header-infotip.mjs.map +7 -0
- package/build-module/components/widget-header/widget-header.mjs +138 -0
- package/build-module/components/widget-header/widget-header.mjs.map +7 -0
- package/build-module/components/widget-layout-controls/index.mjs +6 -0
- package/build-module/components/widget-layout-controls/index.mjs.map +7 -0
- package/build-module/components/widget-layout-controls/widget-layout-controls.mjs +90 -0
- package/build-module/components/widget-layout-controls/widget-layout-controls.mjs.map +7 -0
- package/build-module/components/widget-picker/widget-picker.mjs +6 -94
- package/build-module/components/widget-picker/widget-picker.mjs.map +3 -3
- package/build-module/components/widget-preview-chrome/index.mjs +6 -0
- package/build-module/components/widget-preview-chrome/index.mjs.map +7 -0
- package/build-module/components/{widget-settings/widget-settings-toolbar.mjs → widget-preview-chrome/widget-preview-chrome.mjs} +37 -19
- package/build-module/components/widget-preview-chrome/widget-preview-chrome.mjs.map +7 -0
- package/build-module/components/widget-settings/index.mjs +2 -2
- package/build-module/components/widget-settings/index.mjs.map +1 -1
- package/build-module/components/widget-settings/utils/index.mjs +0 -2
- package/build-module/components/widget-settings/utils/index.mjs.map +2 -2
- package/build-module/components/widget-settings/widget-settings-trigger.mjs +23 -29
- package/build-module/components/widget-settings/widget-settings-trigger.mjs.map +2 -2
- package/build-module/components/widget-settings/widget-settings.mjs +40 -57
- package/build-module/components/widget-settings/widget-settings.mjs.map +2 -2
- package/build-module/components/widget-toolbar/widget-toolbar.mjs +7 -4
- package/build-module/components/widget-toolbar/widget-toolbar.mjs.map +2 -2
- package/build-module/components/widgets/widgets.mjs +14 -7
- package/build-module/components/widgets/widgets.mjs.map +2 -2
- package/build-module/context/dashboard-context.mjs +31 -80
- package/build-module/context/dashboard-context.mjs.map +2 -2
- package/build-module/context/ui-context.mjs +2 -18
- package/build-module/context/ui-context.mjs.map +2 -2
- package/build-module/types.mjs.map +1 -1
- package/build-module/utils/index.mjs +1 -3
- package/build-module/utils/index.mjs.map +2 -2
- package/build-module/widget-dashboard.mjs +0 -4
- package/build-module/widget-dashboard.mjs.map +2 -2
- package/build-types/components/actions/actions.d.ts.map +1 -1
- package/build-types/components/commands/commands.d.ts.map +1 -1
- package/build-types/components/widget-attribute-controls/index.d.ts +2 -0
- package/build-types/components/widget-attribute-controls/index.d.ts.map +1 -0
- package/build-types/components/widget-attribute-controls/widget-attribute-controls.d.ts +23 -0
- package/build-types/components/widget-attribute-controls/widget-attribute-controls.d.ts.map +1 -0
- package/build-types/components/widget-chrome/widget-chrome.d.ts +8 -8
- package/build-types/components/widget-chrome/widget-chrome.d.ts.map +1 -1
- package/build-types/components/widget-frame/index.d.ts +3 -0
- package/build-types/components/widget-frame/index.d.ts.map +1 -0
- package/build-types/components/widget-frame/widget-frame.d.ts +25 -0
- package/build-types/components/widget-frame/widget-frame.d.ts.map +1 -0
- package/build-types/components/widget-header/index.d.ts +3 -0
- package/build-types/components/widget-header/index.d.ts.map +1 -0
- package/build-types/components/widget-header/widget-header-infotip.d.ts +20 -0
- package/build-types/components/widget-header/widget-header-infotip.d.ts.map +1 -0
- package/build-types/components/widget-header/widget-header.d.ts +38 -0
- package/build-types/components/widget-header/widget-header.d.ts.map +1 -0
- package/build-types/components/widget-layout-controls/index.d.ts +3 -0
- package/build-types/components/widget-layout-controls/index.d.ts.map +1 -0
- package/build-types/components/widget-layout-controls/widget-layout-controls.d.ts +14 -0
- package/build-types/components/widget-layout-controls/widget-layout-controls.d.ts.map +1 -0
- package/build-types/components/widget-picker/widget-picker.d.ts.map +1 -1
- package/build-types/components/widget-preview-chrome/index.d.ts +3 -0
- package/build-types/components/widget-preview-chrome/index.d.ts.map +1 -0
- package/build-types/components/widget-preview-chrome/widget-preview-chrome.d.ts +15 -0
- package/build-types/components/widget-preview-chrome/widget-preview-chrome.d.ts.map +1 -0
- package/build-types/components/widget-settings/index.d.ts +2 -2
- package/build-types/components/widget-settings/utils/index.d.ts +0 -1
- package/build-types/components/widget-settings/utils/index.d.ts.map +1 -1
- package/build-types/components/widget-settings/widget-settings-trigger.d.ts +4 -3
- package/build-types/components/widget-settings/widget-settings-trigger.d.ts.map +1 -1
- package/build-types/components/widget-settings/widget-settings.d.ts +2 -2
- package/build-types/components/widget-settings/widget-settings.d.ts.map +1 -1
- package/build-types/components/widget-toolbar/widget-toolbar.d.ts +10 -7
- package/build-types/components/widget-toolbar/widget-toolbar.d.ts.map +1 -1
- package/build-types/components/widgets/widgets.d.ts.map +1 -1
- package/build-types/context/dashboard-context.d.ts +23 -40
- package/build-types/context/dashboard-context.d.ts.map +1 -1
- package/build-types/context/ui-context.d.ts +0 -18
- package/build-types/context/ui-context.d.ts.map +1 -1
- package/build-types/types.d.ts +9 -15
- package/build-types/types.d.ts.map +1 -1
- package/build-types/utils/index.d.ts +0 -1
- package/build-types/utils/index.d.ts.map +1 -1
- package/build-types/widget-dashboard.d.ts +5 -5
- package/build-types/widget-dashboard.d.ts.map +1 -1
- package/package.json +17 -17
- package/src/components/actions/actions.tsx +2 -22
- package/src/components/commands/commands.tsx +3 -70
- package/src/components/widget-attribute-controls/index.ts +1 -0
- package/src/components/widget-attribute-controls/widget-attribute-controls.tsx +108 -0
- package/src/components/widget-chrome/widget-chrome.module.css +3 -68
- package/src/components/widget-chrome/widget-chrome.tsx +19 -130
- package/src/components/widget-frame/index.ts +2 -0
- package/src/components/widget-frame/widget-frame.module.css +17 -0
- package/src/components/widget-frame/widget-frame.tsx +138 -0
- package/src/components/widget-header/index.ts +2 -0
- package/src/components/widget-header/widget-header-infotip.tsx +82 -0
- package/src/components/widget-header/widget-header.module.css +76 -0
- package/src/components/widget-header/widget-header.tsx +101 -0
- package/src/components/widget-layout-controls/index.ts +2 -0
- package/src/components/{widgets/widget-layout-toolbar.tsx → widget-layout-controls/widget-layout-controls.tsx} +12 -13
- package/src/components/widget-picker/widget-picker.tsx +5 -10
- package/src/components/widget-preview-chrome/index.ts +2 -0
- package/src/components/widget-preview-chrome/widget-preview-chrome.module.css +22 -0
- package/src/components/widget-preview-chrome/widget-preview-chrome.tsx +65 -0
- package/src/components/widget-settings/index.ts +2 -2
- package/src/components/widget-settings/utils/index.ts +0 -1
- package/src/components/widget-settings/widget-settings-trigger.tsx +36 -43
- package/src/components/widget-settings/widget-settings.tsx +7 -26
- package/src/components/widget-toolbar/widget-toolbar.module.css +6 -9
- package/src/components/widget-toolbar/widget-toolbar.tsx +14 -8
- package/src/components/widgets/widgets.module.css +0 -1
- package/src/components/widgets/widgets.tsx +30 -8
- package/src/context/dashboard-context.tsx +70 -133
- package/src/context/ui-context.tsx +1 -39
- package/src/test/actions.test.tsx +7 -77
- package/src/test/commands.test.tsx +6 -45
- package/src/test/staging.test.tsx +82 -144
- package/src/test/widget-dashboard.test.tsx +24 -0
- package/src/types.ts +9 -16
- package/src/utils/index.ts +0 -1
- package/src/widget-dashboard.tsx +4 -8
- package/build/components/layout-settings/index.cjs.map +0 -7
- package/build/components/layout-settings/layout-model-edit-field/index.cjs +0 -186
- package/build/components/layout-settings/layout-model-edit-field/index.cjs.map +0 -7
- package/build/components/layout-settings/layout-model-edit-field/thumbnail-grid.cjs +0 -53
- package/build/components/layout-settings/layout-model-edit-field/thumbnail-grid.cjs.map +0 -7
- package/build/components/layout-settings/layout-model-edit-field/thumbnail-masonry.cjs +0 -53
- package/build/components/layout-settings/layout-model-edit-field/thumbnail-masonry.cjs.map +0 -7
- package/build/components/layout-settings/layout-settings.cjs +0 -207
- package/build/components/layout-settings/layout-settings.cjs.map +0 -7
- package/build/components/widget-settings/utils/get-admin-menu-inset.cjs.map +0 -7
- package/build/components/widget-settings/widget-settings-toolbar.cjs.map +0 -7
- package/build/components/widgets/widget-layout-toolbar.cjs.map +0 -7
- package/build/utils/grid-model-change/grid-model-change.cjs +0 -56
- package/build/utils/grid-model-change/grid-model-change.cjs.map +0 -7
- package/build/utils/grid-model-change/index.cjs.map +0 -7
- package/build/utils/migrate-layout/index.cjs.map +0 -7
- package/build/utils/migrate-layout/migrate-layout.cjs +0 -94
- package/build/utils/migrate-layout/migrate-layout.cjs.map +0 -7
- package/build-module/components/layout-settings/index.mjs +0 -6
- package/build-module/components/layout-settings/index.mjs.map +0 -7
- package/build-module/components/layout-settings/layout-model-edit-field/index.mjs +0 -151
- package/build-module/components/layout-settings/layout-model-edit-field/index.mjs.map +0 -7
- package/build-module/components/layout-settings/layout-model-edit-field/thumbnail-grid.mjs +0 -28
- package/build-module/components/layout-settings/layout-model-edit-field/thumbnail-grid.mjs.map +0 -7
- package/build-module/components/layout-settings/layout-model-edit-field/thumbnail-masonry.mjs +0 -28
- package/build-module/components/layout-settings/layout-model-edit-field/thumbnail-masonry.mjs.map +0 -7
- package/build-module/components/layout-settings/layout-settings.mjs +0 -187
- package/build-module/components/layout-settings/layout-settings.mjs.map +0 -7
- package/build-module/components/widget-settings/utils/get-admin-menu-inset.mjs +0 -16
- package/build-module/components/widget-settings/utils/get-admin-menu-inset.mjs.map +0 -7
- package/build-module/components/widget-settings/widget-settings-toolbar.mjs.map +0 -7
- package/build-module/components/widgets/widget-layout-toolbar.mjs +0 -181
- package/build-module/components/widgets/widget-layout-toolbar.mjs.map +0 -7
- package/build-module/utils/grid-model-change/grid-model-change.mjs +0 -30
- package/build-module/utils/grid-model-change/grid-model-change.mjs.map +0 -7
- package/build-module/utils/grid-model-change/index.mjs +0 -7
- package/build-module/utils/grid-model-change/index.mjs.map +0 -7
- package/build-module/utils/migrate-layout/index.mjs +0 -6
- package/build-module/utils/migrate-layout/index.mjs.map +0 -7
- package/build-module/utils/migrate-layout/migrate-layout.mjs +0 -69
- package/build-module/utils/migrate-layout/migrate-layout.mjs.map +0 -7
- package/build-types/components/layout-settings/index.d.ts +0 -2
- package/build-types/components/layout-settings/index.d.ts.map +0 -1
- package/build-types/components/layout-settings/layout-model-edit-field/index.d.ts +0 -17
- package/build-types/components/layout-settings/layout-model-edit-field/index.d.ts.map +0 -1
- package/build-types/components/layout-settings/layout-model-edit-field/thumbnail-grid.d.ts +0 -6
- package/build-types/components/layout-settings/layout-model-edit-field/thumbnail-grid.d.ts.map +0 -1
- package/build-types/components/layout-settings/layout-model-edit-field/thumbnail-masonry.d.ts +0 -6
- package/build-types/components/layout-settings/layout-model-edit-field/thumbnail-masonry.d.ts.map +0 -1
- package/build-types/components/layout-settings/layout-settings.d.ts +0 -14
- package/build-types/components/layout-settings/layout-settings.d.ts.map +0 -1
- package/build-types/components/widget-settings/utils/get-admin-menu-inset.d.ts +0 -17
- package/build-types/components/widget-settings/utils/get-admin-menu-inset.d.ts.map +0 -1
- package/build-types/components/widget-settings/widget-settings-toolbar.d.ts +0 -20
- package/build-types/components/widget-settings/widget-settings-toolbar.d.ts.map +0 -1
- package/build-types/components/widgets/widget-layout-toolbar.d.ts +0 -14
- package/build-types/components/widgets/widget-layout-toolbar.d.ts.map +0 -1
- package/build-types/utils/grid-model-change/grid-model-change.d.ts +0 -20
- package/build-types/utils/grid-model-change/grid-model-change.d.ts.map +0 -1
- package/build-types/utils/grid-model-change/index.d.ts +0 -2
- package/build-types/utils/grid-model-change/index.d.ts.map +0 -1
- package/build-types/utils/migrate-layout/index.d.ts +0 -2
- package/build-types/utils/migrate-layout/index.d.ts.map +0 -1
- package/build-types/utils/migrate-layout/migrate-layout.d.ts +0 -36
- package/build-types/utils/migrate-layout/migrate-layout.d.ts.map +0 -1
- package/src/components/layout-settings/index.ts +0 -1
- package/src/components/layout-settings/layout-model-edit-field/index.tsx +0 -98
- package/src/components/layout-settings/layout-model-edit-field/style.module.css +0 -34
- package/src/components/layout-settings/layout-model-edit-field/thumbnail-grid.tsx +0 -28
- package/src/components/layout-settings/layout-model-edit-field/thumbnail-masonry.tsx +0 -28
- package/src/components/layout-settings/layout-settings.tsx +0 -217
- package/src/components/widget-picker/widget-picker.module.css +0 -11
- package/src/components/widget-settings/utils/get-admin-menu-inset.ts +0 -30
- package/src/components/widget-settings/widget-settings-toolbar.module.css +0 -25
- package/src/components/widget-settings/widget-settings-toolbar.tsx +0 -45
- package/src/components/widgets/widget-layout-toolbar.module.css +0 -6
- package/src/utils/grid-model-change/grid-model-change.ts +0 -53
- package/src/utils/grid-model-change/index.ts +0 -1
- package/src/utils/migrate-layout/index.ts +0 -1
- package/src/utils/migrate-layout/migrate-layout.ts +0 -156
- package/src/utils/migrate-layout/test/migrate-layout.test.ts +0 -114
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/widget-settings/widget-settings.tsx", "../../../../style-runtime/src/index.ts", "../../../src/components/widget-settings/widget-settings.module.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { DataForm } from '@wordpress/dataviews';\nimport type { Field, Form } from '@wordpress/dataviews';\nimport { useCallback, useEffect, useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n// Dashboard is still experimental.\n// eslint-disable-next-line @wordpress/use-recommended-components\nimport { Button, Drawer } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { useDashboardInternalContext } from '../../context/dashboard-context';\nimport { useDashboardUIContext } from '../../context/ui-context';\nimport { getWidgetSettingsTitle } from './utils';\nimport styles from './widget-settings.module.css';\n\ntype WidgetAttributes = Record< string, unknown >;\n\n/**\n * Side drawer that edits one instance's attributes, mounted once at the\n * dashboard root. It resolves the active instance from `settingsWidgetUuid`\n * in the UI context (set by the per-instance gear), renders the type's\n * declarative `attributes` through `DataForm`, and enters from the edge away\n * from the widget.\n *\n * Edits write to the staging layer, so they preview live behind the drawer\n * and are published on Save or reverted on any other exit. Available in\n * normal mode only; the gear is hidden while the layout is being edited.\n */\nexport function WidgetSettings(): React.ReactNode {\n\tconst {\n\t\tlayout,\n\t\tonLayoutChange,\n\t\twidgetTypes,\n\t\tcommit,\n\t\tcancel: cancelStaging,\n\t\thasUncommittedChanges,\n\t} = useDashboardInternalContext();\n\tconst {\n\t\tsettingsWidgetUuid,\n\t\tsetSettingsWidgetUuid,\n\t\tsettingsDrawerSide,\n\t\tsettingsDrawerInset,\n\t} = useDashboardUIContext();\n\n\tconst open = settingsWidgetUuid !== null;\n\n\t// Keep the last opened instance resolved while the drawer animates\n\t// closed so its form and title don't blank out mid-transition. While\n\t// open the live `settingsWidgetUuid` wins, so opening shows no stale\n\t// frame.\n\tconst [ lastWidgetUuid, setLastWidgetUuid ] = useState< string | null >(\n\t\tsettingsWidgetUuid\n\t);\n\tuseEffect( () => {\n\t\tif ( settingsWidgetUuid ) {\n\t\t\tsetLastWidgetUuid( settingsWidgetUuid );\n\t\t}\n\t}, [ settingsWidgetUuid ] );\n\n\tconst activeUuid = settingsWidgetUuid ?? lastWidgetUuid;\n\tconst widget = activeUuid\n\t\t? layout.find( ( instance ) => instance.uuid === activeUuid )\n\t\t: undefined;\n\tconst widgetType = widget\n\t\t? widgetTypes.find( ( type ) => type.name === widget.type )\n\t\t: undefined;\n\n\tconst fields = useMemo< Field< WidgetAttributes >[] >(\n\t\t() => ( widgetType?.attributes ?? [] ) as Field< WidgetAttributes >[],\n\t\t[ widgetType?.attributes ]\n\t);\n\n\tconst form = useMemo< Form >(\n\t\t() => ( {\n\t\t\tlayout: { type: 'regular', labelPosition: 'top' },\n\t\t\tfields: fields.map( ( field ) => field.id ),\n\t\t} ),\n\t\t[ fields ]\n\t);\n\n\tconst handleChange = useCallback(\n\t\t( edits: Record< string, unknown > ) => {\n\t\t\tif ( ! widget ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonLayoutChange(\n\t\t\t\tlayout.map( ( instance ) =>\n\t\t\t\t\tinstance.uuid === widget.uuid\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...instance,\n\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t...( instance.attributes as object ),\n\t\t\t\t\t\t\t\t\t...edits,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: instance\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t\t[ layout, onLayoutChange, widget ]\n\t);\n\n\tconst close = useCallback(\n\t\t() => setSettingsWidgetUuid( null ),\n\t\t[ setSettingsWidgetUuid ]\n\t);\n\n\tconst handleSave = useCallback( () => {\n\t\tcommit();\n\t\tclose();\n\t}, [ commit, close ] );\n\n\tconst handleOpenChange = useCallback(\n\t\t( nextOpen: boolean ) => {\n\t\t\t// Any path out of the drawer other than Save discards the\n\t\t\t// staged edits, matching the layout-settings drawer.\n\t\t\tif ( ! nextOpen ) {\n\t\t\t\tcancelStaging();\n\t\t\t\tclose();\n\t\t\t}\n\t\t},\n\t\t[ cancelStaging, close ]\n\t);\n\n\t// For a left drawer, clear the fixed admin menu on the inline-start\n\t// edge so the drawer lands beside it. The admin bar at the top is\n\t// cleared in the CSS module.\n\tconst popupStyle = useMemo< React.CSSProperties >(\n\t\t() =>\n\t\t\tsettingsDrawerSide === 'left' && settingsDrawerInset > 0\n\t\t\t\t? { marginLeft: settingsDrawerInset }\n\t\t\t\t: {},\n\t\t[ settingsDrawerSide, settingsDrawerInset ]\n\t);\n\n\tconst hasForm = !! widget && !! widgetType && fields.length > 0;\n\n\tif ( ! hasForm ) {\n\t\treturn null;\n\t}\n\n\tconst title = getWidgetSettingsTitle( widgetType );\n\tconst data = ( widget?.attributes ??\n\t\twidgetType?.example?.attributes ??\n\t\t{} ) as WidgetAttributes;\n\n\treturn (\n\t\t<Drawer.Root\n\t\t\topen={ open }\n\t\t\tonOpenChange={ handleOpenChange }\n\t\t\tswipeDirection={ settingsDrawerSide }\n\t\t\tmodal={ false }\n\t\t\tdisablePointerDismissal\n\t\t>\n\t\t\t<Drawer.Popup\n\t\t\t\tsize=\"medium\"\n\t\t\t\tclassName={ styles.popup }\n\t\t\t\tstyle={ popupStyle }\n\t\t\t>\n\t\t\t\t<Drawer.Header>\n\t\t\t\t\t<Drawer.Title>{ title }</Drawer.Title>\n\t\t\t\t\t<Drawer.CloseIcon />\n\t\t\t\t</Drawer.Header>\n\n\t\t\t\t<Drawer.Content>\n\t\t\t\t\t<DataForm< WidgetAttributes >\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t/>\n\t\t\t\t</Drawer.Content>\n\n\t\t\t\t<Drawer.Footer>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\ttone=\"brand\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => handleOpenChange( false ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"solid\"\n\t\t\t\t\t\ttone=\"brand\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ handleSave }\n\t\t\t\t\t\tdisabled={ ! hasUncommittedChanges }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</Drawer.Footer>\n\t\t\t</Drawer.Popup>\n\t\t</Drawer.Root>\n\t);\n}\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"809494c486\", \"._34828f30ba41ad89__popup{margin-block-start:var(--wp-admin--admin-bar--height,0)}\");\n}\nexport default {\"popup\":\"_34828f30ba41ad89__popup\"};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,uBAAyB;AAEzB,qBAA0D;AAC1D,kBAAmB;AAGnB,gBAA+B;AAK/B,+BAA4C;AAC5C,wBAAsC;AACtC,mBAAuC;;;ACNvC,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACrB,QAAM,cAAc;AAEpB,MAAK,YAAY,kBAAmB;AACnC,WAAO,YAAY;AAAA,EACpB;AAEA,cAAY,mBAAmB;AAAA,IAC9B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC7B;AAEA,MAAK,OAAO,aAAa,aAAc;AACtC,qBAAkB,QAAS;AAAA,EAC5B;AAEA,SAAO,YAAY;AACpB;AAUA,SAAS,0BACR,gBACA,MACU;AACV,MAAK,CAAE,eAAe,MAAO;AAC5B,WAAO;AAAA,EACR;AAEA,aAAY,SAAS,eAAe,KAAK;AAAA,IACxC,SAAU,oBAAqB;AAAA,EAChC,GAAI;AACH,QAAK,MAAM,aAAc,oBAAqB,MAAM,MAAO;AAC1D,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,YAAa,gBAA0B,MAAc,KAAc;AAC3E,MAAK,CAAE,eAAe,MAAO;AAC5B;AAAA,EACD;AAEA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAK,cAAe;AAEhE,MAAK,CAAE,gBAAiB;AACvB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAK,gBAAgB,cAAe;AAAA,EAC5D;AAEA,MAAK,eAAe,IAAK,IAAK,GAAI;AACjC;AAAA,EACD;AAKA,MAAK,0BAA2B,gBAAgB,IAAK,GAAI;AACxD,mBAAe,IAAK,IAAK;AACzB;AAAA,EACD;AAEA,QAAM,QAAQ,eAAe,cAAe,OAAQ;AACpD,QAAM,aAAc,sBAAsB,IAAK;AAC/C,QAAM,YAAa,eAAe,eAAgB,GAAI,CAAE;AACxD,iBAAe,KAAK,YAAa,KAAM;AACvC,iBAAe,IAAK,IAAK;AAC1B;AAaO,SAAS,iBAAkB,gBAA2B;AAC5D,QAAM,UAAU,WAAW;AAE3B,UAAQ,UAAU;AAAA,IACjB;AAAA,KACE,QAAQ,UAAU,IAAK,cAAe,KAAK,KAAM;AAAA,EACpD;AAEA,aAAY,CAAE,MAAM,GAAI,KAAK,QAAQ,QAAS;AAC7C,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AAEA,SAAO,MAAM;AACZ,UAAM,QAAQ,QAAQ,UAAU,IAAK,cAAe;AAEpD,QAAK,UAAU,QAAY;AAC1B;AAAA,IACD;AAEA,QAAK,SAAS,GAAI;AACjB,cAAQ,UAAU,OAAQ,cAAe;AACzC;AAAA,IACD;AAEA,YAAQ,UAAU,IAAK,gBAAgB,QAAQ,CAAE;AAAA,EAClD;AACD;AAaO,SAAS,cAAe,MAAc,KAAc;AAC1D,QAAM,UAAU,WAAW;AAE3B,UAAQ,OAAO,IAAK,MAAM,GAAI;AAE9B,aAAY,kBAAkB,QAAQ,UAAU,KAAK,GAAI;AACxD,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AACD;;;ACpKA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,oFAAoF;AACjH;AACA,IAAO,0BAAQ,EAAC,SAAQ,2BAA0B;;;
|
|
4
|
+
"sourcesContent": ["/**\n * WordPress dependencies\n */\nimport { DataForm } from '@wordpress/dataviews';\nimport type { Field, Form } from '@wordpress/dataviews';\nimport { useCallback, useEffect, useMemo, useState } from '@wordpress/element';\nimport { __ } from '@wordpress/i18n';\n// Dashboard is still experimental.\n// eslint-disable-next-line @wordpress/use-recommended-components\nimport { Button, Drawer } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport { useDashboardInternalContext } from '../../context/dashboard-context';\nimport { useDashboardUIContext } from '../../context/ui-context';\nimport { getWidgetSettingsTitle } from './utils';\nimport styles from './widget-settings.module.css';\n\ntype WidgetAttributes = Record< string, unknown >;\n\n/**\n * Side drawer that edits one instance's attributes, mounted once at the\n * dashboard root. It resolves the active instance from `settingsWidgetUuid`\n * in the UI context (set by the per-instance gear), renders the type's\n * declarative `attributes` through `DataForm`, and enters from the\n * inline-end edge.\n *\n * Edits write to the staging layer, so they preview live behind the drawer\n * and are published on Save or reverted on any other exit. Available in\n * normal mode only; the gear is hidden while the layout is being edited.\n */\nexport function WidgetSettings(): React.ReactNode {\n\tconst {\n\t\tlayout,\n\t\tonLayoutChange,\n\t\twidgetTypes,\n\t\tcommit,\n\t\tcancel: cancelStaging,\n\t\thasUncommittedChanges,\n\t} = useDashboardInternalContext();\n\tconst { settingsWidgetUuid, setSettingsWidgetUuid } =\n\t\tuseDashboardUIContext();\n\n\tconst open = settingsWidgetUuid !== null;\n\n\t// Keep the last opened instance resolved while the drawer animates\n\t// closed so its form and title don't blank out mid-transition. While\n\t// open the live `settingsWidgetUuid` wins, so opening shows no stale\n\t// frame.\n\tconst [ lastWidgetUuid, setLastWidgetUuid ] = useState< string | null >(\n\t\tsettingsWidgetUuid\n\t);\n\tuseEffect( () => {\n\t\tif ( settingsWidgetUuid ) {\n\t\t\tsetLastWidgetUuid( settingsWidgetUuid );\n\t\t}\n\t}, [ settingsWidgetUuid ] );\n\n\tconst activeUuid = settingsWidgetUuid ?? lastWidgetUuid;\n\tconst widget = activeUuid\n\t\t? layout.find( ( instance ) => instance.uuid === activeUuid )\n\t\t: undefined;\n\tconst widgetType = widget\n\t\t? widgetTypes.find( ( type ) => type.name === widget.type )\n\t\t: undefined;\n\n\tconst fields = useMemo< Field< WidgetAttributes >[] >(\n\t\t() => ( widgetType?.attributes ?? [] ) as Field< WidgetAttributes >[],\n\t\t[ widgetType?.attributes ]\n\t);\n\n\tconst form = useMemo< Form >(\n\t\t() => ( {\n\t\t\tlayout: { type: 'regular', labelPosition: 'top' },\n\t\t\tfields: fields.map( ( field ) => field.id ),\n\t\t} ),\n\t\t[ fields ]\n\t);\n\n\tconst handleChange = useCallback(\n\t\t( edits: Record< string, unknown > ) => {\n\t\t\tif ( ! widget ) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tonLayoutChange(\n\t\t\t\tlayout.map( ( instance ) =>\n\t\t\t\t\tinstance.uuid === widget.uuid\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\t...instance,\n\t\t\t\t\t\t\t\tattributes: {\n\t\t\t\t\t\t\t\t\t...( instance.attributes as object ),\n\t\t\t\t\t\t\t\t\t...edits,\n\t\t\t\t\t\t\t\t},\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: instance\n\t\t\t\t)\n\t\t\t);\n\t\t},\n\t\t[ layout, onLayoutChange, widget ]\n\t);\n\n\tconst close = useCallback(\n\t\t() => setSettingsWidgetUuid( null ),\n\t\t[ setSettingsWidgetUuid ]\n\t);\n\n\tconst handleSave = useCallback( () => {\n\t\tcommit();\n\t\tclose();\n\t}, [ commit, close ] );\n\n\tconst handleOpenChange = useCallback(\n\t\t( nextOpen: boolean ) => {\n\t\t\t// Any path out of the drawer other than Save discards the\n\t\t\t// staged edits.\n\t\t\tif ( ! nextOpen ) {\n\t\t\t\tcancelStaging();\n\t\t\t\tclose();\n\t\t\t}\n\t\t},\n\t\t[ cancelStaging, close ]\n\t);\n\n\tconst hasForm = !! widget && !! widgetType && fields.length > 0;\n\n\tif ( ! hasForm ) {\n\t\treturn null;\n\t}\n\n\tconst title = getWidgetSettingsTitle( widgetType );\n\tconst data = ( widget?.attributes ??\n\t\twidgetType?.example?.attributes ??\n\t\t{} ) as WidgetAttributes;\n\n\treturn (\n\t\t<Drawer.Root\n\t\t\topen={ open }\n\t\t\tonOpenChange={ handleOpenChange }\n\t\t\tswipeDirection=\"right\"\n\t\t\tmodal={ false }\n\t\t\tdisablePointerDismissal\n\t\t>\n\t\t\t<Drawer.Popup size=\"medium\" className={ styles.popup }>\n\t\t\t\t<Drawer.Header>\n\t\t\t\t\t<Drawer.Title>{ title }</Drawer.Title>\n\t\t\t\t\t<Drawer.CloseIcon />\n\t\t\t\t</Drawer.Header>\n\n\t\t\t\t<Drawer.Content>\n\t\t\t\t\t<DataForm< WidgetAttributes >\n\t\t\t\t\t\tdata={ data }\n\t\t\t\t\t\tfields={ fields }\n\t\t\t\t\t\tform={ form }\n\t\t\t\t\t\tonChange={ handleChange }\n\t\t\t\t\t/>\n\t\t\t\t</Drawer.Content>\n\n\t\t\t\t<Drawer.Footer>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"minimal\"\n\t\t\t\t\t\ttone=\"brand\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ () => handleOpenChange( false ) }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Cancel' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"solid\"\n\t\t\t\t\t\ttone=\"brand\"\n\t\t\t\t\t\tsize=\"compact\"\n\t\t\t\t\t\tonClick={ handleSave }\n\t\t\t\t\t\tdisabled={ ! hasUncommittedChanges }\n\t\t\t\t\t>\n\t\t\t\t\t\t{ __( 'Save' ) }\n\t\t\t\t\t</Button>\n\t\t\t\t</Drawer.Footer>\n\t\t\t</Drawer.Popup>\n\t\t</Drawer.Root>\n\t);\n}\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"809494c486\", \"._34828f30ba41ad89__popup{margin-block-start:var(--wp-admin--admin-bar--height,0)}\");\n}\nexport default {\"popup\":\"_34828f30ba41ad89__popup\"};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -120,15 +120,15 @@ function registerStyle(hash, css) {
|
|
|
120
120
|
|
|
121
121
|
// packages/widget-dashboard/src/components/widget-toolbar/widget-toolbar.module.css
|
|
122
122
|
if (typeof process === "undefined" || process.env.NODE_ENV !== "test") {
|
|
123
|
-
registerStyle("
|
|
123
|
+
registerStyle("e1a51f5597", "._4a01b99834540429__widgetToolbar{background:var(--wpds-color-background-surface-neutral-strong,#fff);padding:var(--wpds-dimension-padding-xs,4px)}._78bb9900d58f945e__elevated{border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}");
|
|
124
124
|
}
|
|
125
|
-
var widget_toolbar_default = { "widgetToolbar": "_4a01b99834540429__widgetToolbar" };
|
|
125
|
+
var widget_toolbar_default = { "widgetToolbar": "_4a01b99834540429__widgetToolbar", "elevated": "_78bb9900d58f945e__elevated" };
|
|
126
126
|
|
|
127
127
|
// packages/widget-dashboard/src/components/widget-toolbar/widget-toolbar.tsx
|
|
128
128
|
var import_jsx_runtime = require("react/jsx-runtime");
|
|
129
129
|
function WidgetToolbar({
|
|
130
130
|
children,
|
|
131
|
-
|
|
131
|
+
editMode = false
|
|
132
132
|
}) {
|
|
133
133
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
134
134
|
import_ui.Stack,
|
|
@@ -136,7 +136,10 @@ function WidgetToolbar({
|
|
|
136
136
|
direction: "row",
|
|
137
137
|
align: "center",
|
|
138
138
|
gap: "xs",
|
|
139
|
-
className: (0, import_clsx.default)(
|
|
139
|
+
className: (0, import_clsx.default)(
|
|
140
|
+
widget_toolbar_default.widgetToolbar,
|
|
141
|
+
editMode && widget_toolbar_default.elevated
|
|
142
|
+
),
|
|
140
143
|
children
|
|
141
144
|
}
|
|
142
145
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/widget-toolbar/widget-toolbar.tsx", "../../../../style-runtime/src/index.ts", "../../../src/components/widget-toolbar/widget-toolbar.module.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport styles from './widget-toolbar.module.css';\n\nexport interface WidgetToolbarProps {\n\t
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAMjB,gBAAsB;;;ACCtB,IAAM,uBAAuB;AAU7B,SAAS,aAAa;AACrB,QAAM,cAAc;AAEpB,MAAK,YAAY,kBAAmB;AACnC,WAAO,YAAY;AAAA,EACpB;AAEA,cAAY,mBAAmB;AAAA,IAC9B,WAAW,oBAAI,IAAI;AAAA,IACnB,QAAQ,oBAAI,IAAI;AAAA,IAChB,gBAAgB,oBAAI,QAAQ;AAAA,EAC7B;AAEA,MAAK,OAAO,aAAa,aAAc;AACtC,qBAAkB,QAAS;AAAA,EAC5B;AAEA,SAAO,YAAY;AACpB;AAUA,SAAS,0BACR,gBACA,MACU;AACV,MAAK,CAAE,eAAe,MAAO;AAC5B,WAAO;AAAA,EACR;AAEA,aAAY,SAAS,eAAe,KAAK;AAAA,IACxC,SAAU,oBAAqB;AAAA,EAChC,GAAI;AACH,QAAK,MAAM,aAAc,oBAAqB,MAAM,MAAO;AAC1D,aAAO;AAAA,IACR;AAAA,EACD;AAEA,SAAO;AACR;AAUA,SAAS,YAAa,gBAA0B,MAAc,KAAc;AAC3E,MAAK,CAAE,eAAe,MAAO;AAC5B;AAAA,EACD;AAEA,QAAM,UAAU,WAAW;AAC3B,MAAI,iBAAiB,QAAQ,eAAe,IAAK,cAAe;AAEhE,MAAK,CAAE,gBAAiB;AACvB,qBAAiB,oBAAI,IAAI;AACzB,YAAQ,eAAe,IAAK,gBAAgB,cAAe;AAAA,EAC5D;AAEA,MAAK,eAAe,IAAK,IAAK,GAAI;AACjC;AAAA,EACD;AAKA,MAAK,0BAA2B,gBAAgB,IAAK,GAAI;AACxD,mBAAe,IAAK,IAAK;AACzB;AAAA,EACD;AAEA,QAAM,QAAQ,eAAe,cAAe,OAAQ;AACpD,QAAM,aAAc,sBAAsB,IAAK;AAC/C,QAAM,YAAa,eAAe,eAAgB,GAAI,CAAE;AACxD,iBAAe,KAAK,YAAa,KAAM;AACvC,iBAAe,IAAK,IAAK;AAC1B;AAaO,SAAS,iBAAkB,gBAA2B;AAC5D,QAAM,UAAU,WAAW;AAE3B,UAAQ,UAAU;AAAA,IACjB;AAAA,KACE,QAAQ,UAAU,IAAK,cAAe,KAAK,KAAM;AAAA,EACpD;AAEA,aAAY,CAAE,MAAM,GAAI,KAAK,QAAQ,QAAS;AAC7C,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AAEA,SAAO,MAAM;AACZ,UAAM,QAAQ,QAAQ,UAAU,IAAK,cAAe;AAEpD,QAAK,UAAU,QAAY;AAC1B;AAAA,IACD;AAEA,QAAK,SAAS,GAAI;AACjB,cAAQ,UAAU,OAAQ,cAAe;AACzC;AAAA,IACD;AAEA,YAAQ,UAAU,IAAK,gBAAgB,QAAQ,CAAE;AAAA,EAClD;AACD;AAaO,SAAS,cAAe,MAAc,KAAc;AAC1D,QAAM,UAAU,WAAW;AAE3B,UAAQ,OAAO,IAAK,MAAM,GAAI;AAE9B,aAAY,kBAAkB,QAAQ,UAAU,KAAK,GAAI;AACxD,gBAAa,gBAAgB,MAAM,GAAI;AAAA,EACxC;AACD;;;ACpKA,IAAI,OAAO,YAAY,eAAe,QAAQ,IAAI,aAAa,QAAQ;AACtE,gBAAc,cAAc,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { Stack } from '@wordpress/ui';\n\n/**\n * Internal dependencies\n */\nimport styles from './widget-toolbar.module.css';\n\nexport interface WidgetToolbarProps {\n\t/**\n\t * The active mode's controls.\n\t */\n\tchildren: ReactNode;\n\n\t/**\n\t * Lift the toolbar with a shadow while customizing.\n\t */\n\teditMode?: boolean;\n}\n\n/**\n * The per-tile toolbar chip holding the active mode's controls.\n * Always visible; lifted with a shadow only while customizing.\n *\n * @param {WidgetToolbarProps} props Component props.\n */\nexport function WidgetToolbar( {\n\tchildren,\n\teditMode = false,\n}: WidgetToolbarProps ): React.ReactNode {\n\treturn (\n\t\t<Stack\n\t\t\tdirection=\"row\"\n\t\t\talign=\"center\"\n\t\t\tgap=\"xs\"\n\t\t\tclassName={ clsx(\n\t\t\t\tstyles.widgetToolbar,\n\t\t\t\teditMode && styles.elevated\n\t\t\t) }\n\t\t>\n\t\t\t{ children }\n\t\t</Stack>\n\t);\n}\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"e1a51f5597\", \"._4a01b99834540429__widgetToolbar{background:var(--wpds-color-background-surface-neutral-strong,#fff);padding:var(--wpds-dimension-padding-xs,4px)}._78bb9900d58f945e__elevated{border:1px solid var(--wpds-color-stroke-surface-neutral-weak,#f0f0f0);box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}\");\n}\nexport default {\"widgetToolbar\":\"_4a01b99834540429__widgetToolbar\",\"elevated\":\"_78bb9900d58f945e__elevated\"};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["clsx"]
|
|
7
7
|
}
|
|
@@ -38,9 +38,11 @@ var import_element = require("@wordpress/element");
|
|
|
38
38
|
var import_grid = require("@wordpress/grid");
|
|
39
39
|
var import_dashboard_context = require("../../context/dashboard-context.cjs");
|
|
40
40
|
var import_use_dashboard_container_column_count = require("../../hooks/use-dashboard-container-column-count.cjs");
|
|
41
|
+
var import_widget_attribute_controls = require("../widget-attribute-controls/index.cjs");
|
|
41
42
|
var import_widget_chrome = require("../widget-chrome/index.cjs");
|
|
42
|
-
var
|
|
43
|
-
var
|
|
43
|
+
var import_widget_header = require("../widget-header/index.cjs");
|
|
44
|
+
var import_widget_layout_controls = require("../widget-layout-controls/index.cjs");
|
|
45
|
+
var import_widget_toolbar = require("../widget-toolbar/index.cjs");
|
|
44
46
|
var import_widget_resize_handle = require("./widget-resize-handle.cjs");
|
|
45
47
|
|
|
46
48
|
// packages/style-runtime/src/index.ts
|
|
@@ -205,18 +207,22 @@ var Widgets = (0, import_element.forwardRef)(
|
|
|
205
207
|
(type) => type.name === widget.type
|
|
206
208
|
);
|
|
207
209
|
const hasSettings = !!widgetType?.attributes?.length;
|
|
208
|
-
|
|
210
|
+
const isFullBleed = widgetType?.presentation === "full-bleed";
|
|
211
|
+
let controls;
|
|
209
212
|
if (editMode) {
|
|
210
|
-
|
|
213
|
+
controls = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_widget_layout_controls.WidgetLayoutControls, { widget });
|
|
211
214
|
} else if (hasSettings && widgetType) {
|
|
212
|
-
|
|
213
|
-
|
|
215
|
+
controls = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
216
|
+
import_widget_attribute_controls.WidgetAttributeControls,
|
|
214
217
|
{
|
|
215
218
|
widget,
|
|
216
219
|
widgetType
|
|
217
220
|
}
|
|
218
221
|
);
|
|
219
222
|
}
|
|
223
|
+
const toolbar = controls ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_widget_toolbar.WidgetToolbar, { editMode, children: controls }) : void 0;
|
|
224
|
+
const inSlot = editMode || isFullBleed;
|
|
225
|
+
const actionableArea = inSlot && toolbar ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_widget_header.WidgetHeader, { overlay: true, children: toolbar }) : void 0;
|
|
220
226
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
221
227
|
import_widget_chrome.WidgetChrome,
|
|
222
228
|
{
|
|
@@ -225,7 +231,8 @@ var Widgets = (0, import_element.forwardRef)(
|
|
|
225
231
|
className: (0, import_clsx.default)(widgets_default.tile, {
|
|
226
232
|
[widgets_default.tileEditMode]: editMode
|
|
227
233
|
}),
|
|
228
|
-
actionableArea
|
|
234
|
+
actionableArea,
|
|
235
|
+
headerToolbar: !inSlot ? toolbar : void 0
|
|
229
236
|
},
|
|
230
237
|
widget.uuid
|
|
231
238
|
);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/components/widgets/widgets.tsx", "../../../../style-runtime/src/index.ts", "../../../src/components/widgets/widgets.module.css"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useCallback, useMemo } from '@wordpress/element';\nimport { DashboardGrid, DashboardLanes } from '@wordpress/grid';\nimport type {\n\tDashboardGridLayoutItem,\n\tDashboardLanesLayoutItem,\n\tDragPreviewRenderProps,\n\tResizeHandleRenderProps,\n} from '@wordpress/grid';\nimport type { WidgetName } from '@wordpress/widget-primitives';\n\n/**\n * Internal dependencies\n */\nimport { useDashboardInternalContext } from '../../context/dashboard-context';\nimport { useDashboardContainerColumnCount } from '../../hooks/use-dashboard-container-column-count';\nimport { WidgetChrome } from '../widget-chrome';\nimport { WidgetSettingsToolbar } from '../widget-settings';\nimport { WidgetLayoutToolbar } from './widget-layout-toolbar';\nimport { WidgetResizeHandle } from './widget-resize-handle';\nimport styles from './widgets.module.css';\nimport type {\n\tDashboardWidget,\n\tGridTilePlacement,\n\tMasonryTilePlacement,\n} from '../../types';\n\nfunction toGridLayout( widgets: DashboardWidget[] ): DashboardGridLayoutItem[] {\n\treturn widgets.map( ( w ) => ( {\n\t\tkey: w.uuid,\n\t\t...( w.placement as GridTilePlacement | undefined ),\n\t} ) );\n}\n\nfunction toMasonryLayout(\n\twidgets: DashboardWidget[]\n): DashboardLanesLayoutItem[] {\n\treturn widgets.map( ( w ) => ( {\n\t\tkey: w.uuid,\n\t\t...( w.placement as MasonryTilePlacement | undefined ),\n\t} ) );\n}\n\nfunction applyGridChange(\n\twidgets: DashboardWidget[],\n\tgridLayout: DashboardGridLayoutItem[]\n): DashboardWidget[] {\n\treturn gridLayout.map( ( { key, ...placement } ) => {\n\t\tconst existing = widgets.find( ( w ) => w.uuid === key );\n\t\tif ( ! existing ) {\n\t\t\treturn {\n\t\t\t\tuuid: key,\n\t\t\t\ttype: '' as WidgetName,\n\t\t\t\tplacement,\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\t...existing,\n\t\t\tplacement,\n\t\t};\n\t} );\n}\n\nfunction applyMasonryChange(\n\twidgets: DashboardWidget[],\n\tmasonryLayout: DashboardLanesLayoutItem[]\n): DashboardWidget[] {\n\treturn masonryLayout.map( ( { key, ...placement } ) => {\n\t\tconst existing = widgets.find( ( w ) => w.uuid === key );\n\t\tif ( ! existing ) {\n\t\t\treturn {\n\t\t\t\tuuid: key,\n\t\t\t\ttype: '' as WidgetName,\n\t\t\t\tplacement,\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\t...existing,\n\t\t\tplacement,\n\t\t};\n\t} );\n}\n\nexport interface WidgetsProps {\n\tclassName?: string;\n}\n\n/**\n * Iterates `layout`, delegates each entry to `WidgetDashboard.WidgetChrome`, and\n * feeds the resulting tree into the active `@wordpress/grid` surface (2D grid\n * or masonry, picked from `gridSettings.model`).\n */\nexport const Widgets = forwardRef< HTMLDivElement, WidgetsProps >(\n\tfunction Widgets( { className }, ref ) {\n\t\tconst { layout, onLayoutChange, editMode, gridSettings, widgetTypes } =\n\t\t\tuseDashboardInternalContext();\n\t\tconst { containerRef, columnCount } =\n\t\t\tuseDashboardContainerColumnCount( ref );\n\t\tconst isMasonry = gridSettings.model === 'masonry';\n\n\t\tconst gridLayout = useMemo(\n\t\t\t() =>\n\t\t\t\tisMasonry ? toMasonryLayout( layout ) : toGridLayout( layout ),\n\t\t\t[ layout, isMasonry ]\n\t\t);\n\n\t\tconst handleGridChange = useCallback(\n\t\t\t( newGridLayout: DashboardGridLayoutItem[] ) => {\n\t\t\t\tonLayoutChange( applyGridChange( layout, newGridLayout ) );\n\t\t\t},\n\t\t\t[ layout, onLayoutChange ]\n\t\t);\n\n\t\tconst handleMasonryChange = useCallback(\n\t\t\t( newMasonryLayout: DashboardLanesLayoutItem[] ) => {\n\t\t\t\tonLayoutChange(\n\t\t\t\t\tapplyMasonryChange( layout, newMasonryLayout )\n\t\t\t\t);\n\t\t\t},\n\t\t\t[ layout, onLayoutChange ]\n\t\t);\n\n\t\tconst children = layout.map( ( widget, index ) => {\n\t\t\tconst widgetType = widgetTypes.find(\n\t\t\t\t( type ) => type.name === widget.type\n\t\t\t);\n\t\t\tconst hasSettings = !! widgetType?.attributes?.length;\n\n\t\t\t// One slot, chosen by mode: layout toolbar while customizing,\n\t\t\t// settings toolbar otherwise (undefined when nothing to configure).\n\t\t\tlet actionableArea: React.ReactNode;\n\t\t\tif ( editMode ) {\n\t\t\t\tactionableArea = <WidgetLayoutToolbar widget={ widget } />;\n\t\t\t} else if ( hasSettings && widgetType ) {\n\t\t\t\tactionableArea = (\n\t\t\t\t\t<WidgetSettingsToolbar\n\t\t\t\t\t\twidget={ widget }\n\t\t\t\t\t\twidgetType={ widgetType }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\treturn (\n\t\t\t\t<WidgetChrome\n\t\t\t\t\tkey={ widget.uuid }\n\t\t\t\t\twidget={ widget }\n\t\t\t\t\tindex={ index }\n\t\t\t\t\tclassName={ clsx( styles.tile, {\n\t\t\t\t\t\t[ styles.tileEditMode ]: editMode,\n\t\t\t\t\t} ) }\n\t\t\t\t\tactionableArea={ actionableArea }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\t\tconst renderDragPreview = useCallback(\n\t\t\t( { children: clone }: DragPreviewRenderProps ) => (\n\t\t\t\t<div className={ styles.dragPreview }>{ clone }</div>\n\t\t\t),\n\t\t\t[]\n\t\t);\n\n\t\tconst sharedRenderProps = {\n\t\t\teditMode,\n\t\t\trenderDragPreview,\n\t\t\trenderResizeHandle:\n\t\t\t\tWidgetResizeHandle as React.ComponentType< ResizeHandleRenderProps >,\n\t\t};\n\n\t\tconst surface: React.ReactNode = isMasonry ? (\n\t\t\t<DashboardLanes\n\t\t\t\tlayout={ gridLayout as DashboardLanesLayoutItem[] }\n\t\t\t\tcolumns={ columnCount }\n\t\t\t\tflowTolerance={ gridSettings.flowTolerance }\n\t\t\t\tonChangeLayout={ handleMasonryChange }\n\t\t\t\t{ ...sharedRenderProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</DashboardLanes>\n\t\t) : (\n\t\t\t<DashboardGrid\n\t\t\t\tlayout={ gridLayout as DashboardGridLayoutItem[] }\n\t\t\t\tcolumns={ columnCount }\n\t\t\t\trowHeight={ gridSettings.rowHeight }\n\t\t\t\tonChangeLayout={ handleGridChange }\n\t\t\t\t{ ...sharedRenderProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</DashboardGrid>\n\t\t);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ containerRef }\n\t\t\t\tclassName={ clsx( styles.grid, className ) }\n\t\t\t>\n\t\t\t\t{ surface }\n\t\t\t</div>\n\t\t);\n\t}\n);\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"8516d4e5b3\", \"._942bbd7b48da810c__grid{--wp-grid-placeholder-radius:var(--wpds-border-radius-lg,8px);--wp-grid-drag-preview-radius:var(--wpds-border-radius-lg,8px);container-name:widget-dashboard;container-type:inline-size;width:100%}.a87790b3d11e7d7d__tile{border-radius:var(--wpds-border-radius-lg,8px);height:100%}._5315dd1c30ef4e77__tileEditMode{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}._5315dd1c30ef4e77__tileEditMode:focus-visible{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:2px}._6b2daa817d860e6e__dragPreview{height:100%}._6b2daa817d860e6e__dragPreview .a87790b3d11e7d7d__tile{box-shadow:none}\");\n}\nexport default {\"grid\":\"_942bbd7b48da810c__grid\",\"tile\":\"a87790b3d11e7d7d__tile\",\"tileEditMode\":\"_5315dd1c30ef4e77__tileEditMode\",\"dragPreview\":\"_6b2daa817d860e6e__dragPreview\"};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,kBAAiB;AAKjB,qBAAiD;AACjD,kBAA8C;AAY9C,+BAA4C;AAC5C,kDAAiD;AACjD,2BAA6B;AAC7B,
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport clsx from 'clsx';\n\n/**\n * WordPress dependencies\n */\nimport { forwardRef, useCallback, useMemo } from '@wordpress/element';\nimport { DashboardGrid, DashboardLanes } from '@wordpress/grid';\nimport type {\n\tDashboardGridLayoutItem,\n\tDashboardLanesLayoutItem,\n\tDragPreviewRenderProps,\n\tResizeHandleRenderProps,\n} from '@wordpress/grid';\nimport type { WidgetName } from '@wordpress/widget-primitives';\n\n/**\n * Internal dependencies\n */\nimport { useDashboardInternalContext } from '../../context/dashboard-context';\nimport { useDashboardContainerColumnCount } from '../../hooks/use-dashboard-container-column-count';\nimport { WidgetAttributeControls } from '../widget-attribute-controls';\nimport { WidgetChrome } from '../widget-chrome';\nimport { WidgetHeader } from '../widget-header';\nimport { WidgetLayoutControls } from '../widget-layout-controls';\nimport { WidgetToolbar } from '../widget-toolbar';\nimport { WidgetResizeHandle } from './widget-resize-handle';\nimport styles from './widgets.module.css';\nimport type {\n\tDashboardWidget,\n\tGridTilePlacement,\n\tMasonryTilePlacement,\n} from '../../types';\n\nfunction toGridLayout( widgets: DashboardWidget[] ): DashboardGridLayoutItem[] {\n\treturn widgets.map( ( w ) => ( {\n\t\tkey: w.uuid,\n\t\t...( w.placement as GridTilePlacement | undefined ),\n\t} ) );\n}\n\nfunction toMasonryLayout(\n\twidgets: DashboardWidget[]\n): DashboardLanesLayoutItem[] {\n\treturn widgets.map( ( w ) => ( {\n\t\tkey: w.uuid,\n\t\t...( w.placement as MasonryTilePlacement | undefined ),\n\t} ) );\n}\n\nfunction applyGridChange(\n\twidgets: DashboardWidget[],\n\tgridLayout: DashboardGridLayoutItem[]\n): DashboardWidget[] {\n\treturn gridLayout.map( ( { key, ...placement } ) => {\n\t\tconst existing = widgets.find( ( w ) => w.uuid === key );\n\t\tif ( ! existing ) {\n\t\t\treturn {\n\t\t\t\tuuid: key,\n\t\t\t\ttype: '' as WidgetName,\n\t\t\t\tplacement,\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\t...existing,\n\t\t\tplacement,\n\t\t};\n\t} );\n}\n\nfunction applyMasonryChange(\n\twidgets: DashboardWidget[],\n\tmasonryLayout: DashboardLanesLayoutItem[]\n): DashboardWidget[] {\n\treturn masonryLayout.map( ( { key, ...placement } ) => {\n\t\tconst existing = widgets.find( ( w ) => w.uuid === key );\n\t\tif ( ! existing ) {\n\t\t\treturn {\n\t\t\t\tuuid: key,\n\t\t\t\ttype: '' as WidgetName,\n\t\t\t\tplacement,\n\t\t\t};\n\t\t}\n\t\treturn {\n\t\t\t...existing,\n\t\t\tplacement,\n\t\t};\n\t} );\n}\n\nexport interface WidgetsProps {\n\tclassName?: string;\n}\n\n/**\n * Iterates `layout`, delegates each entry to `WidgetDashboard.WidgetChrome`, and\n * feeds the resulting tree into the active `@wordpress/grid` surface (2D grid\n * or masonry, picked from `gridSettings.model`).\n */\nexport const Widgets = forwardRef< HTMLDivElement, WidgetsProps >(\n\tfunction Widgets( { className }, ref ) {\n\t\tconst { layout, onLayoutChange, editMode, gridSettings, widgetTypes } =\n\t\t\tuseDashboardInternalContext();\n\t\tconst { containerRef, columnCount } =\n\t\t\tuseDashboardContainerColumnCount( ref );\n\t\tconst isMasonry = gridSettings.model === 'masonry';\n\n\t\tconst gridLayout = useMemo(\n\t\t\t() =>\n\t\t\t\tisMasonry ? toMasonryLayout( layout ) : toGridLayout( layout ),\n\t\t\t[ layout, isMasonry ]\n\t\t);\n\n\t\tconst handleGridChange = useCallback(\n\t\t\t( newGridLayout: DashboardGridLayoutItem[] ) => {\n\t\t\t\tonLayoutChange( applyGridChange( layout, newGridLayout ) );\n\t\t\t},\n\t\t\t[ layout, onLayoutChange ]\n\t\t);\n\n\t\tconst handleMasonryChange = useCallback(\n\t\t\t( newMasonryLayout: DashboardLanesLayoutItem[] ) => {\n\t\t\t\tonLayoutChange(\n\t\t\t\t\tapplyMasonryChange( layout, newMasonryLayout )\n\t\t\t\t);\n\t\t\t},\n\t\t\t[ layout, onLayoutChange ]\n\t\t);\n\n\t\tconst children = layout.map( ( widget, index ) => {\n\t\t\tconst widgetType = widgetTypes.find(\n\t\t\t\t( type ) => type.name === widget.type\n\t\t\t);\n\t\t\tconst hasSettings = !! widgetType?.attributes?.length;\n\t\t\tconst isFullBleed = widgetType?.presentation === 'full-bleed';\n\n\t\t\t// The active mode's controls: layout while customizing, the\n\t\t\t// attribute controls (high-relevance fields plus the gear)\n\t\t\t// otherwise.\n\t\t\tlet controls: React.ReactNode;\n\t\t\tif ( editMode ) {\n\t\t\t\tcontrols = <WidgetLayoutControls widget={ widget } />;\n\t\t\t} else if ( hasSettings && widgetType ) {\n\t\t\t\tcontrols = (\n\t\t\t\t\t<WidgetAttributeControls\n\t\t\t\t\t\twidget={ widget }\n\t\t\t\t\t\twidgetType={ widgetType }\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tconst toolbar = controls ? (\n\t\t\t\t<WidgetToolbar editMode={ editMode }>\n\t\t\t\t\t{ controls }\n\t\t\t\t</WidgetToolbar>\n\t\t\t) : undefined;\n\n\t\t\t// Normal mode hosts the toolbar in the in-card header, beside the\n\t\t\t// identity. Customize controls and full-bleed widgets need it in\n\t\t\t// the grid's actionable-area slot instead: the slot sits outside\n\t\t\t// the draggable card, so the controls stay clickable (in-card they\n\t\t\t// would be captured by the drag listeners).\n\t\t\tconst inSlot = editMode || isFullBleed;\n\t\t\tconst actionableArea =\n\t\t\t\tinSlot && toolbar ? (\n\t\t\t\t\t<WidgetHeader overlay>{ toolbar }</WidgetHeader>\n\t\t\t\t) : undefined;\n\n\t\t\treturn (\n\t\t\t\t<WidgetChrome\n\t\t\t\t\tkey={ widget.uuid }\n\t\t\t\t\twidget={ widget }\n\t\t\t\t\tindex={ index }\n\t\t\t\t\tclassName={ clsx( styles.tile, {\n\t\t\t\t\t\t[ styles.tileEditMode ]: editMode,\n\t\t\t\t\t} ) }\n\t\t\t\t\tactionableArea={ actionableArea }\n\t\t\t\t\theaderToolbar={ ! inSlot ? toolbar : undefined }\n\t\t\t\t/>\n\t\t\t);\n\t\t} );\n\n\t\tconst renderDragPreview = useCallback(\n\t\t\t( { children: clone }: DragPreviewRenderProps ) => (\n\t\t\t\t<div className={ styles.dragPreview }>{ clone }</div>\n\t\t\t),\n\t\t\t[]\n\t\t);\n\n\t\tconst sharedRenderProps = {\n\t\t\teditMode,\n\t\t\trenderDragPreview,\n\t\t\trenderResizeHandle:\n\t\t\t\tWidgetResizeHandle as React.ComponentType< ResizeHandleRenderProps >,\n\t\t};\n\n\t\tconst surface: React.ReactNode = isMasonry ? (\n\t\t\t<DashboardLanes\n\t\t\t\tlayout={ gridLayout as DashboardLanesLayoutItem[] }\n\t\t\t\tcolumns={ columnCount }\n\t\t\t\tflowTolerance={ gridSettings.flowTolerance }\n\t\t\t\tonChangeLayout={ handleMasonryChange }\n\t\t\t\t{ ...sharedRenderProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</DashboardLanes>\n\t\t) : (\n\t\t\t<DashboardGrid\n\t\t\t\tlayout={ gridLayout as DashboardGridLayoutItem[] }\n\t\t\t\tcolumns={ columnCount }\n\t\t\t\trowHeight={ gridSettings.rowHeight }\n\t\t\t\tonChangeLayout={ handleGridChange }\n\t\t\t\t{ ...sharedRenderProps }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</DashboardGrid>\n\t\t);\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ containerRef }\n\t\t\t\tclassName={ clsx( styles.grid, className ) }\n\t\t\t>\n\t\t\t\t{ surface }\n\t\t\t</div>\n\t\t);\n\t}\n);\n", "type GlobalScopeWithStyleRuntime = typeof globalThis & {\n\t// This global is shared by separately bundled copies of this package.\n\t// Keep its shape backward compatible after release.\n\t__wpStyleRuntime?: {\n\t\tdocuments: Map< Document, number >;\n\t\tstyles: Map< string, string >;\n\t\tinjectedStyles: WeakMap< Document, Set< string > >;\n\t};\n};\n\nconst STYLE_HASH_ATTRIBUTE = 'data-wp-hash';\n\n/**\n * Returns the shared style runtime registry.\n *\n * The registry is stored on `globalThis` so separately bundled copies of this\n * package can coordinate through the same document and style maps.\n *\n * @return The shared runtime registry.\n */\nfunction getRuntime() {\n\tconst globalScope = globalThis as GlobalScopeWithStyleRuntime;\n\n\tif ( globalScope.__wpStyleRuntime ) {\n\t\treturn globalScope.__wpStyleRuntime;\n\t}\n\n\tglobalScope.__wpStyleRuntime = {\n\t\tdocuments: new Map(),\n\t\tstyles: new Map(),\n\t\tinjectedStyles: new WeakMap(),\n\t};\n\n\tif ( typeof document !== 'undefined' ) {\n\t\tregisterDocument( document );\n\t}\n\n\treturn globalScope.__wpStyleRuntime;\n}\n\n/**\n * Checks whether a document already contains a style tag for a hash.\n *\n * @param targetDocument Document to inspect.\n * @param hash Stable hash for the transformed CSS.\n *\n * @return Whether the style hash already exists in the document.\n */\nfunction documentContainsStyleHash(\n\ttargetDocument: Document,\n\thash: string\n): boolean {\n\tif ( ! targetDocument.head ) {\n\t\treturn false;\n\t}\n\n\tfor ( const style of targetDocument.head.querySelectorAll(\n\t\t`style[${ STYLE_HASH_ATTRIBUTE }]`\n\t) ) {\n\t\tif ( style.getAttribute( STYLE_HASH_ATTRIBUTE ) === hash ) {\n\t\t\treturn true;\n\t\t}\n\t}\n\n\treturn false;\n}\n\n/**\n * Injects a registered style into a document, unless that document already\n * contains a style tag for the same hash.\n *\n * @param targetDocument Document to inject the style into.\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nfunction injectStyle( targetDocument: Document, hash: string, css: string ) {\n\tif ( ! targetDocument.head ) {\n\t\treturn;\n\t}\n\n\tconst runtime = getRuntime();\n\tlet injectedStyles = runtime.injectedStyles.get( targetDocument );\n\n\tif ( ! injectedStyles ) {\n\t\tinjectedStyles = new Set();\n\t\truntime.injectedStyles.set( targetDocument, injectedStyles );\n\t}\n\n\tif ( injectedStyles.has( hash ) ) {\n\t\treturn;\n\t}\n\n\t// Older generated CSS module output can still inject matching style tags\n\t// after this document's cache is created, so keep the DOM as the fallback\n\t// source of truth on cache misses.\n\tif ( documentContainsStyleHash( targetDocument, hash ) ) {\n\t\tinjectedStyles.add( hash );\n\t\treturn;\n\t}\n\n\tconst style = targetDocument.createElement( 'style' );\n\tstyle.setAttribute( STYLE_HASH_ATTRIBUTE, hash );\n\tstyle.appendChild( targetDocument.createTextNode( css ) );\n\ttargetDocument.head.appendChild( style );\n\tinjectedStyles.add( hash );\n}\n\n/**\n * Registers a document as a style injection target.\n *\n * Existing registered styles are replayed into the document immediately.\n * Documents are reference-counted so multiple providers can safely register the\n * same document without one cleanup removing it while another registration is\n * still active.\n *\n * @param targetDocument Document to receive registered styles.\n * @return Cleanup function that unregisters this document registration.\n */\nexport function registerDocument( targetDocument: Document ) {\n\tconst runtime = getRuntime();\n\n\truntime.documents.set(\n\t\ttargetDocument,\n\t\t( runtime.documents.get( targetDocument ) ?? 0 ) + 1\n\t);\n\n\tfor ( const [ hash, css ] of runtime.styles ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n\n\treturn () => {\n\t\tconst count = runtime.documents.get( targetDocument );\n\n\t\tif ( count === undefined ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( count <= 1 ) {\n\t\t\truntime.documents.delete( targetDocument );\n\t\t\treturn;\n\t\t}\n\n\t\truntime.documents.set( targetDocument, count - 1 );\n\t};\n}\n\n/**\n * Registers a style and injects it into all registered documents.\n *\n * The hash is used as the deduplication key, so calling this repeatedly with\n * the same hash will not add duplicate style tags to a document.\n * Registered styles are retained for the lifetime of the page so they can be\n * replayed into documents that are registered later.\n *\n * @param hash Stable hash for the transformed CSS.\n * @param css CSS text to inject.\n */\nexport function registerStyle( hash: string, css: string ) {\n\tconst runtime = getRuntime();\n\n\truntime.styles.set( hash, css );\n\n\tfor ( const targetDocument of runtime.documents.keys() ) {\n\t\tinjectStyle( targetDocument, hash, css );\n\t}\n}\n", "import { registerStyle } from '@wordpress/style-runtime';\nif (typeof process === 'undefined' || process.env.NODE_ENV !== 'test') {\n\tregisterStyle(\"8516d4e5b3\", \"._942bbd7b48da810c__grid{--wp-grid-placeholder-radius:var(--wpds-border-radius-lg,8px);--wp-grid-drag-preview-radius:var(--wpds-border-radius-lg,8px);container-name:widget-dashboard;container-type:inline-size;width:100%}.a87790b3d11e7d7d__tile{border-radius:var(--wpds-border-radius-lg,8px);height:100%}._5315dd1c30ef4e77__tileEditMode{box-shadow:var(--wpds-elevation-xs,0 1px 1px 0 #00000008,0 1px 2px 0 #00000005,0 3px 3px 0 #00000005,0 4px 4px 0 #00000003)}._5315dd1c30ef4e77__tileEditMode:focus-visible{outline:var(--wpds-border-width-focus,var(--wp-admin-border-width-focus,2px)) solid var(--wpds-color-stroke-focus,var(--wp-admin-theme-color,#3858e9));outline-offset:2px}._6b2daa817d860e6e__dragPreview{height:100%}._6b2daa817d860e6e__dragPreview .a87790b3d11e7d7d__tile{box-shadow:none}\");\n}\nexport default {\"grid\":\"_942bbd7b48da810c__grid\",\"tile\":\"a87790b3d11e7d7d__tile\",\"tileEditMode\":\"_5315dd1c30ef4e77__tileEditMode\",\"dragPreview\":\"_6b2daa817d860e6e__dragPreview\"};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Widgets", "clsx"]
|
|
7
7
|
}
|
|
@@ -35,9 +35,9 @@ __export(dashboard_context_exports, {
|
|
|
35
35
|
});
|
|
36
36
|
module.exports = __toCommonJS(dashboard_context_exports);
|
|
37
37
|
var import_es6 = __toESM(require("fast-deep-equal/es6/index.js"));
|
|
38
|
+
var import_compose = require("@wordpress/compose");
|
|
38
39
|
var import_element = require("@wordpress/element");
|
|
39
40
|
var import_default_grid = require("../utils/default-grid/index.cjs");
|
|
40
|
-
var import_grid_model_change = require("../utils/grid-model-change/index.cjs");
|
|
41
41
|
var import_normalize_grid_settings = require("../utils/normalize-grid-settings/index.cjs");
|
|
42
42
|
var import_row_height_presets = require("../utils/row-height-presets/index.cjs");
|
|
43
43
|
var import_types = require("../types.cjs");
|
|
@@ -53,6 +53,7 @@ var DEFAULT_RESOLVE_WIDGET_MODULE = (moduleId) => import(
|
|
|
53
53
|
/* webpackIgnore: true */
|
|
54
54
|
moduleId
|
|
55
55
|
);
|
|
56
|
+
var AUTO_SAVE_DELAY_MS = 5e3;
|
|
56
57
|
function canonicalize(layout) {
|
|
57
58
|
const indexed = layout.map((widget, index) => ({
|
|
58
59
|
widget,
|
|
@@ -87,21 +88,16 @@ function WidgetDashboardProvider({
|
|
|
87
88
|
onEditChange,
|
|
88
89
|
resolveWidgetModule = DEFAULT_RESOLVE_WIDGET_MODULE,
|
|
89
90
|
gridSettings: committedGridSettings = import_default_grid.DEFAULT_GRID,
|
|
90
|
-
onGridSettingsChange,
|
|
91
91
|
children
|
|
92
92
|
}) {
|
|
93
93
|
const [stagingLayout, setStagingLayout] = (0, import_element.useState)(committedLayout);
|
|
94
94
|
(0, import_element.useEffect)(() => {
|
|
95
95
|
setStagingLayout(committedLayout);
|
|
96
96
|
}, [committedLayout]);
|
|
97
|
-
const
|
|
98
|
-
() => (
|
|
97
|
+
const gridSettings = (0, import_element.useMemo)(
|
|
98
|
+
() => resolveGridSettings(committedGridSettings),
|
|
99
|
+
[committedGridSettings]
|
|
99
100
|
);
|
|
100
|
-
(0, import_element.useEffect)(() => {
|
|
101
|
-
setStagingGridSettings(
|
|
102
|
-
(0, import_normalize_grid_settings.normalizeGridSettings)(committedGridSettings, import_row_height_presets.DEFAULT_ROW_HEIGHT)
|
|
103
|
-
);
|
|
104
|
-
}, [committedGridSettings]);
|
|
105
101
|
const hasLayoutChanges = (0, import_element.useMemo)(
|
|
106
102
|
() => !(0, import_es6.default)(
|
|
107
103
|
canonicalize(committedLayout),
|
|
@@ -109,85 +105,43 @@ function WidgetDashboardProvider({
|
|
|
109
105
|
),
|
|
110
106
|
[committedLayout, stagingLayout]
|
|
111
107
|
);
|
|
112
|
-
const
|
|
113
|
-
() => !(0, import_es6.default)(committedGridSettings, stagingGridSettings),
|
|
114
|
-
[committedGridSettings, stagingGridSettings]
|
|
115
|
-
);
|
|
116
|
-
const hasUncommittedChanges = hasLayoutChanges || hasGridSettingsChanges;
|
|
108
|
+
const hasUncommittedChanges = hasLayoutChanges;
|
|
117
109
|
const commit = (0, import_element.useCallback)(
|
|
118
110
|
(options) => {
|
|
119
111
|
if (hasLayoutChanges) {
|
|
120
112
|
onLayoutChange(canonicalize(stagingLayout));
|
|
121
113
|
}
|
|
122
|
-
if (hasGridSettingsChanges) {
|
|
123
|
-
onGridSettingsChange?.(
|
|
124
|
-
(0, import_normalize_grid_settings.normalizeGridSettings)(
|
|
125
|
-
stagingGridSettings,
|
|
126
|
-
import_row_height_presets.DEFAULT_ROW_HEIGHT
|
|
127
|
-
)
|
|
128
|
-
);
|
|
129
|
-
}
|
|
130
114
|
if (options?.exitEditMode !== false) {
|
|
131
115
|
onEditChange?.(false);
|
|
132
116
|
}
|
|
133
117
|
},
|
|
134
|
-
[
|
|
135
|
-
hasLayoutChanges,
|
|
136
|
-
hasGridSettingsChanges,
|
|
137
|
-
onLayoutChange,
|
|
138
|
-
onGridSettingsChange,
|
|
139
|
-
stagingLayout,
|
|
140
|
-
stagingGridSettings,
|
|
141
|
-
onEditChange
|
|
142
|
-
]
|
|
118
|
+
[hasLayoutChanges, onLayoutChange, stagingLayout, onEditChange]
|
|
143
119
|
);
|
|
144
|
-
const
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
}
|
|
149
|
-
setStagingGridSettings(committedGridSettings);
|
|
150
|
-
if (options?.exitEditMode !== false) {
|
|
151
|
-
onEditChange?.(false);
|
|
152
|
-
}
|
|
153
|
-
},
|
|
154
|
-
[committedLayout, committedGridSettings, onEditChange]
|
|
120
|
+
const publishAutoSave = (0, import_compose.useEvent)(() => commit({ exitEditMode: false }));
|
|
121
|
+
const scheduleAutoSave = (0, import_element.useMemo)(
|
|
122
|
+
() => (0, import_compose.debounce)(publishAutoSave, AUTO_SAVE_DELAY_MS),
|
|
123
|
+
[publishAutoSave]
|
|
155
124
|
);
|
|
156
|
-
const
|
|
157
|
-
(
|
|
158
|
-
|
|
159
|
-
layout: stagingLayout,
|
|
160
|
-
gridSettings: stagingGridSettings,
|
|
161
|
-
targetModel
|
|
162
|
-
});
|
|
163
|
-
if (!next) {
|
|
164
|
-
return;
|
|
165
|
-
}
|
|
166
|
-
setStagingLayout(next.layout);
|
|
167
|
-
setStagingGridSettings(next.gridSettings);
|
|
168
|
-
onLayoutChange(canonicalize(next.layout));
|
|
169
|
-
onGridSettingsChange?.(
|
|
170
|
-
(0, import_normalize_grid_settings.normalizeGridSettings)(next.gridSettings, import_row_height_presets.DEFAULT_ROW_HEIGHT)
|
|
171
|
-
);
|
|
172
|
-
onEditChange?.(false);
|
|
173
|
-
},
|
|
174
|
-
[
|
|
175
|
-
stagingLayout,
|
|
176
|
-
stagingGridSettings,
|
|
177
|
-
onLayoutChange,
|
|
178
|
-
onGridSettingsChange,
|
|
179
|
-
onEditChange
|
|
180
|
-
]
|
|
125
|
+
const flushAutoSave = (0, import_element.useCallback)(
|
|
126
|
+
() => scheduleAutoSave.flush(),
|
|
127
|
+
[scheduleAutoSave]
|
|
181
128
|
);
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
129
|
+
(0, import_element.useEffect)(() => {
|
|
130
|
+
if (!editMode) {
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
scheduleAutoSave.flush();
|
|
134
|
+
}, [editMode, scheduleAutoSave]);
|
|
135
|
+
(0, import_element.useEffect)(() => () => scheduleAutoSave.flush(), [scheduleAutoSave]);
|
|
136
|
+
const cancel = (0, import_element.useCallback)(() => {
|
|
137
|
+
setStagingLayout(committedLayout);
|
|
138
|
+
onEditChange?.(false);
|
|
139
|
+
}, [committedLayout, onEditChange]);
|
|
185
140
|
(0, import_element.useEffect)(() => {
|
|
186
141
|
if (stagingLayout.length === 0) {
|
|
187
142
|
onEditChange?.(true);
|
|
188
143
|
}
|
|
189
144
|
}, [stagingLayout.length === 0]);
|
|
190
|
-
const canEditGridSettings = onGridSettingsChange !== void 0;
|
|
191
145
|
const value = (0, import_element.useMemo)(
|
|
192
146
|
() => ({
|
|
193
147
|
widgetTypes,
|
|
@@ -195,13 +149,11 @@ function WidgetDashboardProvider({
|
|
|
195
149
|
layout: stagingLayout,
|
|
196
150
|
onLayoutChange: setStagingLayout,
|
|
197
151
|
onLayoutReset,
|
|
198
|
-
gridSettings
|
|
199
|
-
onGridSettingsChange: setStagingGridSettings,
|
|
200
|
-
canEditGridSettings,
|
|
201
|
-
resetGridSettings,
|
|
152
|
+
gridSettings,
|
|
202
153
|
commit,
|
|
203
|
-
commitGridModelChange,
|
|
204
154
|
cancel,
|
|
155
|
+
scheduleAutoSave,
|
|
156
|
+
flushAutoSave,
|
|
205
157
|
hasUncommittedChanges,
|
|
206
158
|
editMode,
|
|
207
159
|
onEditChange,
|
|
@@ -212,12 +164,11 @@ function WidgetDashboardProvider({
|
|
|
212
164
|
isResolvingWidgetTypes,
|
|
213
165
|
stagingLayout,
|
|
214
166
|
onLayoutReset,
|
|
215
|
-
|
|
216
|
-
canEditGridSettings,
|
|
217
|
-
resetGridSettings,
|
|
167
|
+
gridSettings,
|
|
218
168
|
commit,
|
|
219
|
-
commitGridModelChange,
|
|
220
169
|
cancel,
|
|
170
|
+
scheduleAutoSave,
|
|
171
|
+
flushAutoSave,
|
|
221
172
|
hasUncommittedChanges,
|
|
222
173
|
editMode,
|
|
223
174
|
onEditChange,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/context/dashboard-context.tsx"],
|
|
4
|
-
"sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from '@wordpress/element';\nimport type {\n\tResolveWidgetModule,\n\tWidgetType,\n} from '@wordpress/widget-primitives';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_GRID } from '../utils/default-grid';\nimport { computeGridModelChange } from '../utils/grid-model-change';\nimport { normalizeGridSettings } from '../utils/normalize-grid-settings';\nimport { DEFAULT_ROW_HEIGHT } from '../utils/row-height-presets';\nimport type {\n\tWidgetGridModel,\n\tWidgetGridSettings,\n\tDashboardWidget,\n} from '../types';\nimport { WIDGET_DASHBOARD_COLUMN_COUNT } from '../types';\n\ntype GridSettingsWithColumns = WidgetGridSettings & { columns: number };\n\nfunction resolveGridSettings(\n\tsettings: WidgetGridSettings\n): GridSettingsWithColumns {\n\tconst normalized = normalizeGridSettings( settings, DEFAULT_ROW_HEIGHT );\n\treturn {\n\t\t...normalized,\n\t\tcolumns: WIDGET_DASHBOARD_COLUMN_COUNT,\n\t};\n}\n\nconst DEFAULT_RESOLVE_WIDGET_MODULE: ResolveWidgetModule = ( moduleId ) =>\n\timport( /* webpackIgnore: true */ moduleId );\n\n/**\n * Canonical form of `layout`: widgets sorted by `placement.order` (falling\n * back to array index), then `order` stripped since position now implies it.\n * Used both as the comparison form for `hasUncommittedChanges` (so a change\n * and its undo compare equal) and as the publish form, keeping persisted\n * payloads free of redundant `order` fields.\n *\n * @param {DashboardWidget[]} layout Layout to canonicalize.\n * @return {DashboardWidget[]} Canonicalized layout.\n */\nfunction canonicalize( layout: DashboardWidget[] ): DashboardWidget[] {\n\tconst indexed = layout.map( ( widget, index ) => ( {\n\t\twidget,\n\t\torder: widget.placement?.order ?? index,\n\t} ) );\n\n\tindexed.sort( ( a, b ) => a.order - b.order );\n\n\treturn indexed.map( ( { widget } ) => {\n\t\tif ( ! widget.placement ) {\n\t\t\treturn widget;\n\t\t}\n\t\tconst { order: _stripped, ...placement } = widget.placement;\n\t\treturn { ...widget, placement };\n\t} );\n}\n\n/**\n * Rich state distributed to every compound component inside `WidgetDashboard`.\n * Internal — compounds reach the full state via `useDashboardInternalContext()`.\n *\n * `layout`/`onLayoutChange` and `gridSettings`/`onGridSettingsChange` here\n * operate on the staging layer, not the committed props. Mutations from\n * compound children stay in staging until `commit` publishes them on the\n * consumer.\n */\ninterface InternalDashboardContextValue {\n\twidgetTypes: WidgetType[];\n\tisResolvingWidgetTypes: boolean;\n\tlayout: DashboardWidget[];\n\tonLayoutChange: ( layout: DashboardWidget[] ) => void;\n\tonLayoutReset?: () => void;\n\tgridSettings: GridSettingsWithColumns;\n\tonGridSettingsChange: ( gridSettings: WidgetGridSettings ) => void;\n\tcanEditGridSettings: boolean;\n\n\t/**\n\t * Restores the staging copy of `gridSettings` to the package's\n\t * built-in defaults. Does not touch the committed slice; the user\n\t * must `commit` to publish the reset, or `cancel` to discard it.\n\t */\n\tresetGridSettings: () => void;\n\n\t/**\n\t * Publishes staged slices that differ from their committed\n\t * counterparts. By default also exits edit mode; pass\n\t * `{ exitEditMode: false }` when committing from the layout\n\t * settings drawer so customize mode stays active.\n\t */\n\tcommit: ( options?: CommitOptions ) => void;\n\n\t/**\n\t * Switches the layout model, updates staging, and publishes\n\t * immediately — equivalent to changing the model in layout\n\t * settings and clicking Save.\n\t */\n\tcommitGridModelChange: ( targetModel: WidgetGridModel ) => void;\n\n\t/**\n\t * Reverts staging slices. By default reverts both layout and grid\n\t * settings and exits edit mode. Pass `{ exitEditMode: false }` when\n\t * dismissing the layout settings drawer. Pass `{ revertLayout: false }`\n\t * to revert only grid settings (preserves in-progress widget layout\n\t * edits while customize mode is active).\n\t */\n\tcancel: ( options?: CancelOptions ) => void;\n\n\thasUncommittedChanges: boolean;\n\teditMode: boolean;\n\tonEditChange?: ( next: boolean ) => void;\n\tresolveWidgetModule: ResolveWidgetModule;\n}\n\ninterface CommitOptions {\n\texitEditMode?: boolean;\n}\n\ninterface CancelOptions {\n\texitEditMode?: boolean;\n\trevertLayout?: boolean;\n}\n\nconst Context = createContext< InternalDashboardContextValue | null >( null );\n\n/**\n * Compound-internal hook — exposes the full provider state.\n * Not part of the public API; lives in the same module\n * so compound components can reach the state directly.\n */\nexport function useDashboardInternalContext(): InternalDashboardContextValue {\n\tconst ctx = useContext( Context );\n\tif ( ! ctx ) {\n\t\tthrow new Error(\n\t\t\t'Dashboard compound used outside a WidgetDashboard subtree.'\n\t\t);\n\t}\n\treturn ctx;\n}\n\ninterface ProviderProps {\n\twidgetTypes: WidgetType[];\n\tisResolvingWidgetTypes?: boolean;\n\tlayout: DashboardWidget[];\n\n\t/**\n\t * Fired on commit when the staged layout differs from `layout`.\n\t */\n\tonLayoutChange: ( layout: DashboardWidget[] ) => void;\n\n\t/**\n\t * Optional reset action surfaced by the bundled `Actions`.\n\t */\n\tonLayoutReset?: () => void;\n\n\teditMode?: boolean;\n\tonEditChange?: ( next: boolean ) => void;\n\n\t/**\n\t * Overrides the default `import()` resolution of\n\t * `WidgetType.renderModule`.\n\t */\n\tresolveWidgetModule?: ResolveWidgetModule;\n\n\tgridSettings?: WidgetGridSettings;\n\n\t/**\n\t * Fired on commit when the staged settings differ from\n\t * `gridSettings`.\n\t */\n\tonGridSettingsChange?: ( gridSettings: WidgetGridSettings ) => void;\n\n\tchildren: ReactNode;\n}\n\n/**\n * Provider for the dashboard's staging layer. Owns staging copies of\n * `layout` and `gridSettings`; `commit` publishes whichever slice\n * differs from its committed prop, `cancel` reverts both.\n *\n * Staging re-syncs from the committed props on prop change. In-flight\n * edits are dropped silently when an external update (cross-tab commit,\n * reset, websocket push) lands. Consumers that cannot tolerate this\n * loss should mediate the prop updates before forwarding them here.\n *\n * @param {ProviderProps} props Component props.\n */\nexport function WidgetDashboardProvider( {\n\twidgetTypes,\n\tisResolvingWidgetTypes = false,\n\tlayout: committedLayout,\n\tonLayoutChange,\n\tonLayoutReset,\n\teditMode = false,\n\tonEditChange,\n\tresolveWidgetModule = DEFAULT_RESOLVE_WIDGET_MODULE,\n\tgridSettings: committedGridSettings = DEFAULT_GRID,\n\tonGridSettingsChange,\n\tchildren,\n}: ProviderProps ): React.ReactNode {\n\tconst [ stagingLayout, setStagingLayout ] =\n\t\tuseState< DashboardWidget[] >( committedLayout );\n\n\t// External change in `layout` (consumer-side reset, cross-tab sync,\n\t// websocket push, etc.) drops any in-flight staging edits without\n\t// surfacing a warning. See the provider JSDoc for the trade-off.\n\tuseEffect( () => {\n\t\tsetStagingLayout( committedLayout );\n\t}, [ committedLayout ] );\n\n\tconst [ stagingGridSettings, setStagingGridSettings ] =\n\t\tuseState< WidgetGridSettings >( () =>\n\t\t\tnormalizeGridSettings( committedGridSettings, DEFAULT_ROW_HEIGHT )\n\t\t);\n\n\t// Same external-resync semantics as `stagingLayout`.\n\tuseEffect( () => {\n\t\tsetStagingGridSettings(\n\t\t\tnormalizeGridSettings( committedGridSettings, DEFAULT_ROW_HEIGHT )\n\t\t);\n\t}, [ committedGridSettings ] );\n\n\tconst hasLayoutChanges = useMemo(\n\t\t() =>\n\t\t\t! fastDeepEqual(\n\t\t\t\tcanonicalize( committedLayout ),\n\t\t\t\tcanonicalize( stagingLayout )\n\t\t\t),\n\t\t[ committedLayout, stagingLayout ]\n\t);\n\n\tconst hasGridSettingsChanges = useMemo(\n\t\t() => ! fastDeepEqual( committedGridSettings, stagingGridSettings ),\n\t\t[ committedGridSettings, stagingGridSettings ]\n\t);\n\n\tconst hasUncommittedChanges = hasLayoutChanges || hasGridSettingsChanges;\n\n\tconst commit = useCallback(\n\t\t( options?: CommitOptions ) => {\n\t\t\tif ( hasLayoutChanges ) {\n\t\t\t\tonLayoutChange( canonicalize( stagingLayout ) );\n\t\t\t}\n\n\t\t\tif ( hasGridSettingsChanges ) {\n\t\t\t\tonGridSettingsChange?.(\n\t\t\t\t\tnormalizeGridSettings(\n\t\t\t\t\t\tstagingGridSettings,\n\t\t\t\t\t\tDEFAULT_ROW_HEIGHT\n\t\t\t\t\t)\n\t\t\t\t);\n\t\t\t}\n\n\t\t\tif ( options?.exitEditMode !== false ) {\n\t\t\t\tonEditChange?.( false );\n\t\t\t}\n\t\t},\n\t\t[\n\t\t\thasLayoutChanges,\n\t\t\thasGridSettingsChanges,\n\t\t\tonLayoutChange,\n\t\t\tonGridSettingsChange,\n\t\t\tstagingLayout,\n\t\t\tstagingGridSettings,\n\t\t\tonEditChange,\n\t\t]\n\t);\n\n\tconst cancel = useCallback(\n\t\t( options?: CancelOptions ) => {\n\t\t\tif ( options?.revertLayout !== false ) {\n\t\t\t\tsetStagingLayout( committedLayout );\n\t\t\t}\n\t\t\tsetStagingGridSettings( committedGridSettings );\n\t\t\tif ( options?.exitEditMode !== false ) {\n\t\t\t\tonEditChange?.( false );\n\t\t\t}\n\t\t},\n\t\t[ committedLayout, committedGridSettings, onEditChange ]\n\t);\n\n\tconst commitGridModelChange = useCallback(\n\t\t( targetModel: WidgetGridModel ) => {\n\t\t\tconst next = computeGridModelChange( {\n\t\t\t\tlayout: stagingLayout,\n\t\t\t\tgridSettings: stagingGridSettings,\n\t\t\t\ttargetModel,\n\t\t\t} );\n\n\t\t\tif ( ! next ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tsetStagingLayout( next.layout );\n\t\t\tsetStagingGridSettings( next.gridSettings );\n\t\t\tonLayoutChange( canonicalize( next.layout ) );\n\t\t\tonGridSettingsChange?.(\n\t\t\t\tnormalizeGridSettings( next.gridSettings, DEFAULT_ROW_HEIGHT )\n\t\t\t);\n\t\t\tonEditChange?.( false );\n\t\t},\n\t\t[\n\t\t\tstagingLayout,\n\t\t\tstagingGridSettings,\n\t\t\tonLayoutChange,\n\t\t\tonGridSettingsChange,\n\t\t\tonEditChange,\n\t\t]\n\t);\n\n\tconst resetGridSettings = useCallback( () => {\n\t\tsetStagingGridSettings( DEFAULT_GRID );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\tif ( stagingLayout.length === 0 ) {\n\t\t\tonEditChange?.( true );\n\t\t}\n\n\t\t// Only react to the layout count flipping to zero; firing on every\n\t\t// onEditChange identity change would also reopen edit mode after the\n\t\t// user explicitly closed it on a non-empty layout.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ stagingLayout.length === 0 ] );\n\n\tconst canEditGridSettings = onGridSettingsChange !== undefined;\n\n\tconst value = useMemo< InternalDashboardContextValue >(\n\t\t() => ( {\n\t\t\twidgetTypes,\n\t\t\tisResolvingWidgetTypes,\n\t\t\tlayout: stagingLayout,\n\t\t\tonLayoutChange: setStagingLayout,\n\t\t\tonLayoutReset,\n\t\t\tgridSettings: resolveGridSettings( stagingGridSettings ),\n\t\t\tonGridSettingsChange: setStagingGridSettings,\n\t\t\tcanEditGridSettings,\n\t\t\tresetGridSettings,\n\t\t\tcommit,\n\t\t\tcommitGridModelChange,\n\t\t\tcancel,\n\t\t\thasUncommittedChanges,\n\t\t\teditMode,\n\t\t\tonEditChange,\n\t\t\tresolveWidgetModule,\n\t\t} ),\n\t\t[\n\t\t\twidgetTypes,\n\t\t\tisResolvingWidgetTypes,\n\t\t\tstagingLayout,\n\t\t\tonLayoutReset,\n\t\t\tstagingGridSettings,\n\t\t\tcanEditGridSettings,\n\t\t\tresetGridSettings,\n\t\t\tcommit,\n\t\t\tcommitGridModelChange,\n\t\t\tcancel,\n\t\t\thasUncommittedChanges,\n\t\t\teditMode,\n\t\t\tonEditChange,\n\t\t\tresolveWidgetModule,\n\t\t]\n\t);\n\n\treturn <Context.Provider value={ value }>{ children }</Context.Provider>;\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGA,iBAA0B;AAM1B,qBAOO;AASP,0BAA6B;AAC7B
|
|
4
|
+
"sourcesContent": ["/**\n * External dependencies\n */\nimport fastDeepEqual from 'fast-deep-equal/es6/index.js';\nimport type { ReactNode } from 'react';\n\n/**\n * WordPress dependencies\n */\nimport { debounce, useEvent } from '@wordpress/compose';\nimport {\n\tcreateContext,\n\tuseCallback,\n\tuseContext,\n\tuseEffect,\n\tuseMemo,\n\tuseState,\n} from '@wordpress/element';\nimport type {\n\tResolveWidgetModule,\n\tWidgetType,\n} from '@wordpress/widget-primitives';\n\n/**\n * Internal dependencies\n */\nimport { DEFAULT_GRID } from '../utils/default-grid';\nimport { normalizeGridSettings } from '../utils/normalize-grid-settings';\nimport { DEFAULT_ROW_HEIGHT } from '../utils/row-height-presets';\nimport type { WidgetGridSettings, DashboardWidget } from '../types';\nimport { WIDGET_DASHBOARD_COLUMN_COUNT } from '../types';\n\ntype GridSettingsWithColumns = WidgetGridSettings & { columns: number };\n\nfunction resolveGridSettings(\n\tsettings: WidgetGridSettings\n): GridSettingsWithColumns {\n\tconst normalized = normalizeGridSettings( settings, DEFAULT_ROW_HEIGHT );\n\treturn {\n\t\t...normalized,\n\t\tcolumns: WIDGET_DASHBOARD_COLUMN_COUNT,\n\t};\n}\n\nconst DEFAULT_RESOLVE_WIDGET_MODULE: ResolveWidgetModule = ( moduleId ) =>\n\timport( /* webpackIgnore: true */ moduleId );\n\n/**\n * Inline widget-instance edits stage live, then publish once the user pauses.\n * A single global timer, so editing several widgets settles into one save.\n */\nconst AUTO_SAVE_DELAY_MS = 5000;\n\n/**\n * Canonical form of `layout`: widgets sorted by `placement.order` (falling\n * back to array index), then `order` stripped since position now implies it.\n * Used both as the comparison form for `hasUncommittedChanges` (so a change\n * and its undo compare equal) and as the publish form, keeping persisted\n * payloads free of redundant `order` fields.\n *\n * @param {DashboardWidget[]} layout Layout to canonicalize.\n * @return {DashboardWidget[]} Canonicalized layout.\n */\nfunction canonicalize( layout: DashboardWidget[] ): DashboardWidget[] {\n\tconst indexed = layout.map( ( widget, index ) => ( {\n\t\twidget,\n\t\torder: widget.placement?.order ?? index,\n\t} ) );\n\n\tindexed.sort( ( a, b ) => a.order - b.order );\n\n\treturn indexed.map( ( { widget } ) => {\n\t\tif ( ! widget.placement ) {\n\t\t\treturn widget;\n\t\t}\n\t\tconst { order: _stripped, ...placement } = widget.placement;\n\t\treturn { ...widget, placement };\n\t} );\n}\n\n/**\n * Rich state distributed to every compound component inside `WidgetDashboard`.\n * Internal — compounds reach the full state via `useDashboardInternalContext()`.\n *\n * `layout`/`onLayoutChange` here operate on the staging layer, not the\n * committed props. Mutations from compound children stay in staging until\n * `commit` publishes them on the consumer.\n */\ninterface InternalDashboardContextValue {\n\twidgetTypes: WidgetType[];\n\tisResolvingWidgetTypes: boolean;\n\tlayout: DashboardWidget[];\n\tonLayoutChange: ( layout: DashboardWidget[] ) => void;\n\tonLayoutReset?: () => void;\n\tgridSettings: GridSettingsWithColumns;\n\n\t/**\n\t * Publishes the staged layout when it differs from the committed\n\t * prop. By default also exits edit mode; pass `{ exitEditMode: false }`\n\t * for inline auto-saves that keep the current mode.\n\t */\n\tcommit: ( options?: CommitOptions ) => void;\n\n\t/**\n\t * Reverts the staged layout and exits edit mode.\n\t */\n\tcancel: () => void;\n\n\t/**\n\t * Debounced auto-save for inline widget-instance edits. Controls call it\n\t * after staging a change; a single global timer publishes once the edits\n\t * settle. The settings drawer does not use it (it commits on Save).\n\t */\n\tscheduleAutoSave: () => void;\n\n\t/**\n\t * Publishes any pending auto-save immediately. Called when leaving the\n\t * inline surface (opening the drawer, entering customize) so staged inline\n\t * edits do not commingle with the drawer's explicit-save flow.\n\t */\n\tflushAutoSave: () => void;\n\n\thasUncommittedChanges: boolean;\n\teditMode: boolean;\n\tonEditChange?: ( next: boolean ) => void;\n\tresolveWidgetModule: ResolveWidgetModule;\n}\n\ninterface CommitOptions {\n\texitEditMode?: boolean;\n}\n\nconst Context = createContext< InternalDashboardContextValue | null >( null );\n\n/**\n * Compound-internal hook — exposes the full provider state.\n * Not part of the public API; lives in the same module\n * so compound components can reach the state directly.\n */\nexport function useDashboardInternalContext(): InternalDashboardContextValue {\n\tconst ctx = useContext( Context );\n\tif ( ! ctx ) {\n\t\tthrow new Error(\n\t\t\t'Dashboard compound used outside a WidgetDashboard subtree.'\n\t\t);\n\t}\n\treturn ctx;\n}\n\ninterface ProviderProps {\n\twidgetTypes: WidgetType[];\n\tisResolvingWidgetTypes?: boolean;\n\tlayout: DashboardWidget[];\n\n\t/**\n\t * Fired on commit when the staged layout differs from `layout`.\n\t */\n\tonLayoutChange: ( layout: DashboardWidget[] ) => void;\n\n\t/**\n\t * Optional reset action surfaced by the bundled `Actions`.\n\t */\n\tonLayoutReset?: () => void;\n\n\teditMode?: boolean;\n\tonEditChange?: ( next: boolean ) => void;\n\n\t/**\n\t * Overrides the default `import()` resolution of\n\t * `WidgetType.renderModule`.\n\t */\n\tresolveWidgetModule?: ResolveWidgetModule;\n\n\tgridSettings?: WidgetGridSettings;\n\n\tchildren: ReactNode;\n}\n\n/**\n * Provider for the dashboard's staging layer. Owns the staging copy of\n * `layout`; `commit` publishes it when it differs from the committed\n * prop, `cancel` reverts it.\n *\n * Staging re-syncs from the committed prop on prop change. In-flight\n * edits are dropped silently when an external update (cross-tab commit,\n * reset, websocket push) lands. Consumers that cannot tolerate this\n * loss should mediate the prop updates before forwarding them here.\n *\n * @param {ProviderProps} props Component props.\n */\nexport function WidgetDashboardProvider( {\n\twidgetTypes,\n\tisResolvingWidgetTypes = false,\n\tlayout: committedLayout,\n\tonLayoutChange,\n\tonLayoutReset,\n\teditMode = false,\n\tonEditChange,\n\tresolveWidgetModule = DEFAULT_RESOLVE_WIDGET_MODULE,\n\tgridSettings: committedGridSettings = DEFAULT_GRID,\n\tchildren,\n}: ProviderProps ): React.ReactNode {\n\tconst [ stagingLayout, setStagingLayout ] =\n\t\tuseState< DashboardWidget[] >( committedLayout );\n\n\t// External change in `layout` (consumer-side reset, cross-tab sync,\n\t// websocket push, etc.) drops any in-flight staging edits without\n\t// surfacing a warning. See the provider JSDoc for the trade-off.\n\tuseEffect( () => {\n\t\tsetStagingLayout( committedLayout );\n\t}, [ committedLayout ] );\n\n\tconst gridSettings = useMemo(\n\t\t() => resolveGridSettings( committedGridSettings ),\n\t\t[ committedGridSettings ]\n\t);\n\n\tconst hasLayoutChanges = useMemo(\n\t\t() =>\n\t\t\t! fastDeepEqual(\n\t\t\t\tcanonicalize( committedLayout ),\n\t\t\t\tcanonicalize( stagingLayout )\n\t\t\t),\n\t\t[ committedLayout, stagingLayout ]\n\t);\n\n\tconst hasUncommittedChanges = hasLayoutChanges;\n\n\tconst commit = useCallback(\n\t\t( options?: CommitOptions ) => {\n\t\t\tif ( hasLayoutChanges ) {\n\t\t\t\tonLayoutChange( canonicalize( stagingLayout ) );\n\t\t\t}\n\n\t\t\tif ( options?.exitEditMode !== false ) {\n\t\t\t\tonEditChange?.( false );\n\t\t\t}\n\t\t},\n\t\t[ hasLayoutChanges, onLayoutChange, stagingLayout, onEditChange ]\n\t);\n\n\t// Auto-save for inline edits.\n\t// A single debounced timer publishes through `useEvent`, so it always\n\t// reads the latest `commit` (and so the current staging) without\n\t// resetting on staging re-renders.\n\tconst publishAutoSave = useEvent( () => commit( { exitEditMode: false } ) );\n\n\tconst scheduleAutoSave = useMemo(\n\t\t() => debounce( publishAutoSave, AUTO_SAVE_DELAY_MS ),\n\t\t[ publishAutoSave ]\n\t);\n\n\tconst flushAutoSave = useCallback(\n\t\t() => scheduleAutoSave.flush(),\n\t\t[ scheduleAutoSave ]\n\t);\n\n\t// Entering customize flushes any pending inline save first, so it does not\n\t// commingle with the layout edit flow.\n\tuseEffect( () => {\n\t\tif ( ! editMode ) {\n\t\t\treturn;\n\t\t}\n\n\t\tscheduleAutoSave.flush();\n\t}, [ editMode, scheduleAutoSave ] );\n\n\t// Flush, not cancel, on unmount: an edit still inside the debounce window\n\t// must persist when the user navigates away from the dashboard.\n\tuseEffect( () => () => scheduleAutoSave.flush(), [ scheduleAutoSave ] );\n\n\tconst cancel = useCallback( () => {\n\t\tsetStagingLayout( committedLayout );\n\t\tonEditChange?.( false );\n\t}, [ committedLayout, onEditChange ] );\n\n\tuseEffect( () => {\n\t\tif ( stagingLayout.length === 0 ) {\n\t\t\tonEditChange?.( true );\n\t\t}\n\n\t\t// Only react to the layout count flipping to zero; firing on every\n\t\t// onEditChange identity change would also reopen edit mode after the\n\t\t// user explicitly closed it on a non-empty layout.\n\t\t// eslint-disable-next-line react-hooks/exhaustive-deps\n\t}, [ stagingLayout.length === 0 ] );\n\n\tconst value = useMemo< InternalDashboardContextValue >(\n\t\t() => ( {\n\t\t\twidgetTypes,\n\t\t\tisResolvingWidgetTypes,\n\t\t\tlayout: stagingLayout,\n\t\t\tonLayoutChange: setStagingLayout,\n\t\t\tonLayoutReset,\n\t\t\tgridSettings,\n\t\t\tcommit,\n\t\t\tcancel,\n\t\t\tscheduleAutoSave,\n\t\t\tflushAutoSave,\n\t\t\thasUncommittedChanges,\n\t\t\teditMode,\n\t\t\tonEditChange,\n\t\t\tresolveWidgetModule,\n\t\t} ),\n\t\t[\n\t\t\twidgetTypes,\n\t\t\tisResolvingWidgetTypes,\n\t\t\tstagingLayout,\n\t\t\tonLayoutReset,\n\t\t\tgridSettings,\n\t\t\tcommit,\n\t\t\tcancel,\n\t\t\tscheduleAutoSave,\n\t\t\tflushAutoSave,\n\t\t\thasUncommittedChanges,\n\t\t\teditMode,\n\t\t\tonEditChange,\n\t\t\tresolveWidgetModule,\n\t\t]\n\t);\n\n\treturn <Context.Provider value={ value }>{ children }</Context.Provider>;\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["fastDeepEqual"]
|
|
7
7
|
}
|
|
@@ -38,34 +38,18 @@ function useDashboardUIContext() {
|
|
|
38
38
|
}
|
|
39
39
|
function WidgetDashboardUIProvider({ children }) {
|
|
40
40
|
const [inserterOpen, setInserterOpen] = (0, import_element.useState)(false);
|
|
41
|
-
const [layoutSettingsOpen, setLayoutSettingsOpen] = (0, import_element.useState)(false);
|
|
42
41
|
const [resetDialogOpen, setResetDialogOpen] = (0, import_element.useState)(false);
|
|
43
42
|
const [settingsWidgetUuid, setSettingsWidgetUuid] = (0, import_element.useState)(null);
|
|
44
|
-
const [settingsDrawerSide, setSettingsDrawerSide] = (0, import_element.useState)("right");
|
|
45
|
-
const [settingsDrawerInset, setSettingsDrawerInset] = (0, import_element.useState)(0);
|
|
46
43
|
const value = (0, import_element.useMemo)(
|
|
47
44
|
() => ({
|
|
48
45
|
inserterOpen,
|
|
49
46
|
setInserterOpen,
|
|
50
|
-
layoutSettingsOpen,
|
|
51
|
-
setLayoutSettingsOpen,
|
|
52
47
|
resetDialogOpen,
|
|
53
48
|
setResetDialogOpen,
|
|
54
49
|
settingsWidgetUuid,
|
|
55
|
-
setSettingsWidgetUuid
|
|
56
|
-
settingsDrawerSide,
|
|
57
|
-
setSettingsDrawerSide,
|
|
58
|
-
settingsDrawerInset,
|
|
59
|
-
setSettingsDrawerInset
|
|
50
|
+
setSettingsWidgetUuid
|
|
60
51
|
}),
|
|
61
|
-
[
|
|
62
|
-
inserterOpen,
|
|
63
|
-
layoutSettingsOpen,
|
|
64
|
-
resetDialogOpen,
|
|
65
|
-
settingsWidgetUuid,
|
|
66
|
-
settingsDrawerSide,
|
|
67
|
-
settingsDrawerInset
|
|
68
|
-
]
|
|
52
|
+
[inserterOpen, resetDialogOpen, settingsWidgetUuid]
|
|
69
53
|
);
|
|
70
54
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Context.Provider, { value, children });
|
|
71
55
|
}
|