@10up/block-components
Version:
10up Components built for the WordPress Block Editor.
1,238 lines (1,141 loc) • 412 kB
JavaScript
/******/ (function() { // webpackBootstrap
/******/ var __webpack_modules__ = ({
/***/ "./api/index.ts":
/*!**********************!*\
!*** ./api/index.ts ***!
\**********************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ registerBlockExtension: function() { return /* reexport safe */ _register_block_extension__WEBPACK_IMPORTED_MODULE_0__.registerBlockExtension; },
/* harmony export */ registerBlockExtention: function() { return /* reexport safe */ _register_block_extension__WEBPACK_IMPORTED_MODULE_0__.registerBlockExtension; },
/* harmony export */ registerIcons: function() { return /* reexport safe */ _register_icons__WEBPACK_IMPORTED_MODULE_1__.registerIcons; },
/* harmony export */ unregisterBlockExtension: function() { return /* reexport safe */ _register_block_extension__WEBPACK_IMPORTED_MODULE_0__.unregisterBlockExtension; }
/* harmony export */ });
/* harmony import */ var _register_block_extension__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./register-block-extension */ "./api/register-block-extension/index.tsx");
/* harmony import */ var _register_icons__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./register-icons */ "./api/register-icons/index.ts");
/***/ }),
/***/ "./api/register-block-extension/index.tsx":
/*!************************************************!*\
!*** ./api/register-block-extension/index.tsx ***!
\************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ registerBlockExtension: function() { return /* binding */ registerBlockExtension; },
/* harmony export */ unregisterBlockExtension: function() { return /* binding */ unregisterBlockExtension; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/hooks */ "@wordpress/hooks");
/* harmony import */ var _wordpress_hooks__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! clsx */ "clsx");
/* harmony import */ var clsx__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(clsx__WEBPACK_IMPORTED_MODULE_3__);
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/api/register-block-extension/index.tsx";
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function registerBlockExtension(blockName, {
attributes,
classNameGenerator,
inlineStyleGenerator,
Edit,
extensionName,
order = 'after'
}) {
const isMultiBlock = Array.isArray(blockName);
const shouldApplyBlockExtension = blockType => {
if (blockName === '*' || blockName === 'all') {
return true;
}
if (isMultiBlock) {
return blockName.includes(blockType);
}
return blockType === blockName;
};
if (blockName === '*') {
blockName = 'all'; // eslint-disable-line no-param-reassign
}
// @ts-expect-error isMultiBlock verifies if this is an Array and supports join or not.
const blockNamespace = isMultiBlock ? blockName.join('-') : blockName;
const addAttributesToBlock = (settings, name) => {
if (!shouldApplyBlockExtension(name)) {
return settings;
}
return {
...settings,
attributes: {
...settings.attributes,
...attributes
}
};
};
(0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__.addFilter)('blocks.registerBlockType', `namespace/${blockNamespace}/${extensionName}/addAttributesToBlock`, addAttributesToBlock);
const addSettingsToBlock = (0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_2__.createHigherOrderComponent)(BlockEdit => {
return props => {
const {
name,
isSelected
} = props;
if (!shouldApplyBlockExtension(name)) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(BlockEdit, _extends({}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 84,
columnNumber: 12
}
}));
}
const shouldRenderBefore = order === 'before' && isSelected;
const shouldRenderAfter = order === 'after' && isSelected;
const shouldRenderFallback = !shouldRenderBefore && !shouldRenderAfter && isSelected;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, shouldRenderBefore && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Edit, _extends({}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 29
}
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(BlockEdit, _extends({}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 6
}
})), shouldRenderAfter && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Edit, _extends({}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 28
}
})), shouldRenderFallback && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Edit, _extends({}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 96,
columnNumber: 31
}
})));
};
}, 'addSettingsToBlock');
(0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__.addFilter)('editor.BlockEdit', `namespace/${blockNamespace}/${extensionName}/addSettingsToBlock`, addSettingsToBlock);
const addAdditionalPropertiesInEditor = (0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_2__.createHigherOrderComponent)(BlockList => {
return props => {
const {
name,
attributes,
className = '',
style = {},
wrapperProps
} = props;
if (!shouldApplyBlockExtension(name)) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(BlockList, _extends({}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 113,
columnNumber: 12
}
}));
}
const additionalClassName = classNameGenerator(attributes);
const newClassName = clsx__WEBPACK_IMPORTED_MODULE_3___default()(className, additionalClassName);
let additionalStyles = null;
let newStyles = {
...style
};
if (typeof inlineStyleGenerator === 'function') {
additionalStyles = inlineStyleGenerator(attributes);
newStyles = {
...style,
...wrapperProps?.style,
...additionalStyles
};
}
if (!additionalClassName && !additionalStyles) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(BlockList, _extends({}, props, {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 127,
columnNumber: 12
}
}));
}
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(BlockList, _extends({}, props, {
className: newClassName,
wrapperProps: {
...wrapperProps,
style: newStyles
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 5
}
}));
};
}, 'addAdditionalPropertiesInEditor');
(0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__.addFilter)('editor.BlockListBlock', `namespace/${blockNamespace}/${extensionName}/addAdditionalPropertiesInEditor`, addAdditionalPropertiesInEditor);
const addAdditionalPropertiesToSavedMarkup = (props, block, attributes) => {
const {
className,
style
} = props;
if (!shouldApplyBlockExtension(block.name)) {
return props;
}
const additionalClassName = classNameGenerator(attributes);
const newClassName = clsx__WEBPACK_IMPORTED_MODULE_3___default()(className, additionalClassName);
let additionalStyles = null;
let newStyles = {
...style
};
if (typeof inlineStyleGenerator === 'function') {
additionalStyles = inlineStyleGenerator(attributes);
newStyles = {
...style,
...additionalStyles
};
}
if (!additionalClassName && !additionalStyles) {
return props;
}
return {
...props,
className: newClassName,
style: newStyles
};
};
(0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__.addFilter)('blocks.getSaveContent.extraProps', `namespace/${blockNamespace}/${extensionName}/addAdditionalPropertiesToSavedMarkup`, addAdditionalPropertiesToSavedMarkup);
}
/**
* Unregister a block extension that was previously registered using registerBlockExtension.
*
* @param {string|string[]} blockName - The name of the block or an array of block names to unregister the extension from.
* @param {string} extensionName - The name of the extension to unregister.
*/
function unregisterBlockExtension(blockName, extensionName) {
if (!blockName || !extensionName) {
return;
}
const isMultiBlock = Array.isArray(blockName);
if (blockName === '*') {
blockName = 'all'; // eslint-disable-line no-param-reassign
}
// @ts-expect-error isMultiBlock verifies if this is an Array and supports join or not.
const blockNamespace = isMultiBlock ? blockName.join('-') : blockName;
// Remove all the filters that were added by registerBlockExtension
(0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__.removeFilter)('blocks.registerBlockType', `namespace/${blockNamespace}/${extensionName}/addAttributesToBlock`);
(0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__.removeFilter)('editor.BlockEdit', `namespace/${blockNamespace}/${extensionName}/addSettingsToBlock`);
(0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__.removeFilter)('editor.BlockListBlock', `namespace/${blockNamespace}/${extensionName}/addAdditionalPropertiesInEditor`);
(0,_wordpress_hooks__WEBPACK_IMPORTED_MODULE_1__.removeFilter)('blocks.getSaveContent.extraProps', `namespace/${blockNamespace}/${extensionName}/addAdditionalPropertiesToSavedMarkup`);
}
/***/ }),
/***/ "./api/register-icons/index.ts":
/*!*************************************!*\
!*** ./api/register-icons/index.ts ***!
\*************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ registerIcons: function() { return /* binding */ registerIcons; }
/* harmony export */ });
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_dom_ready__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/dom-ready */ "@wordpress/dom-ready");
/* harmony import */ var _wordpress_dom_ready__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_dom_ready__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _stores__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! ../../stores */ "./stores/index.ts");
function registerIcons(options) {
_wordpress_dom_ready__WEBPACK_IMPORTED_MODULE_1___default()(() => {
(0,_wordpress_data__WEBPACK_IMPORTED_MODULE_0__.dispatch)(_stores__WEBPACK_IMPORTED_MODULE_2__.iconStore).registerIconSet(options);
});
}
/***/ }),
/***/ "./components/author/context.ts":
/*!**************************************!*\
!*** ./components/author/context.ts ***!
\**************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ AuthorContext: function() { return /* binding */ AuthorContext; },
/* harmony export */ useAuthor: function() { return /* binding */ useAuthor; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
const AuthorContext = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createContext)({
avatar_urls: {},
description: '',
email: '',
first_name: '',
id: 0,
last_name: '',
link: '',
name: '',
nickname: '',
registered_date: '',
slug: '',
url: ''
});
const useAuthor = () => {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useContext)(AuthorContext);
};
/***/ }),
/***/ "./components/author/index.tsx":
/*!*************************************!*\
!*** ./components/author/index.tsx ***!
\*************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ Avatar: function() { return /* binding */ Avatar; },
/* harmony export */ Bio: function() { return /* binding */ Bio; },
/* harmony export */ Email: function() { return /* binding */ Email; },
/* harmony export */ FirstName: function() { return /* binding */ FirstName; },
/* harmony export */ LastName: function() { return /* binding */ LastName; },
/* harmony export */ Name: function() { return /* binding */ Name; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _context__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! ./context */ "./components/author/context.ts");
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/author/index.tsx";
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const Name = props => {
const {
tagName: TagName = 'span',
...rest
} = props;
const {
name,
link
} = (0,_context__WEBPACK_IMPORTED_MODULE_3__.useAuthor)();
const wrapperProps = {
...rest
};
if (TagName === 'a' && link) {
wrapperProps.href = link;
}
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(TagName, _extends({}, wrapperProps, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 20,
columnNumber: 9
}
}), name);
};
const FirstName = props => {
const {
tagName: TagName = 'span',
...rest
} = props;
const {
first_name: firstName
} = (0,_context__WEBPACK_IMPORTED_MODULE_3__.useAuthor)();
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(TagName, _extends({}, rest, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 9
}
}), firstName);
};
const LastName = props => {
const {
tagName: TagName = 'span',
...rest
} = props;
const {
last_name: lastName
} = (0,_context__WEBPACK_IMPORTED_MODULE_3__.useAuthor)();
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(TagName, _extends({}, rest, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 9
}
}), lastName);
};
function useDefaultAvatar() {
const {
avatarURL: defaultAvatarUrl
} = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_1__.useSelect)(select => {
// @ts-ignore-next-line The type definitions for the block editor store are incomplete.
const {
getSettings
} = select(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.store);
const {
__experimentalDiscussionSettings
} = getSettings();
return __experimentalDiscussionSettings;
}, []);
return defaultAvatarUrl;
}
const Avatar = props => {
const {
...rest
} = props;
const authorDetails = (0,_context__WEBPACK_IMPORTED_MODULE_3__.useAuthor)();
const avatarUrls = authorDetails?.avatar_urls ? Object.values(authorDetails.avatar_urls) : null;
const defaultAvatar = useDefaultAvatar();
const avatarSourceUrl = avatarUrls ? avatarUrls[avatarUrls.length - 1] : defaultAvatar;
// eslint-disable-next-line jsx-a11y/alt-text
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("img", _extends({
src: avatarSourceUrl
}, rest, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 71,
columnNumber: 9
}
}));
};
const Bio = props => {
const {
tagName: TagName = 'p',
...rest
} = props;
const {
description
} = (0,_context__WEBPACK_IMPORTED_MODULE_3__.useAuthor)();
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(TagName, _extends({}, rest, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 9
}
}), description);
};
const Email = props => {
const {
...rest
} = props;
const {
email
} = (0,_context__WEBPACK_IMPORTED_MODULE_3__.useAuthor)();
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)("a", _extends({
href: `mailto:${email}`
}, rest, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 3
}
}), email);
};
/***/ }),
/***/ "./components/clipboard-button/index.tsx":
/*!***********************************************!*\
!*** ./components/clipboard-button/index.tsx ***!
\***********************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ ClipboardButton: function() { return /* binding */ ClipboardButton; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__);
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/clipboard-button/index.tsx";
const ClipboardButton = ({
text = '',
disabled = false,
onSuccess = () => {},
labels = {}
}) => {
const [hasCopied, setHasCopied] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const copy = labels.copy ? labels.copy : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Copy');
const copied = labels.copied ? labels.copied : (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_3__.__)('Copied');
(0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useEffect)(() => {
let timerId;
if (hasCopied) {
timerId = setTimeout(() => {
setHasCopied(false);
}, 3000);
}
return () => {
if (timerId) {
clearTimeout(timerId);
}
};
}, [hasCopied]);
function successfullyCopied() {
/**
* The 'copied' label stays for 3 seconds.
* We don't want to save again within the same time frame.
*/
if (hasCopied) {
return;
}
onSuccess();
setHasCopied(true);
}
const ref = (0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_1__.useCopyToClipboard)(text, successfullyCopied);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_2__.Button, {
disabled: disabled,
ref: ref,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 82,
columnNumber: 3
}
}, hasCopied ? copied : copy);
};
/***/ }),
/***/ "./components/color-settings/index.tsx":
/*!*********************************************!*\
!*** ./components/color-settings/index.tsx ***!
\*********************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ ColorSetting: function() { return /* binding */ ColorSetting; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/block-editor */ "@wordpress/block-editor");
/* harmony import */ var _wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_3__);
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/color-settings/index.tsx";
/**
* WordPress dependencies
*/
// eslint-disable-next-line import/prefer-default-export
const ColorSetting = ({
label = '',
help = '',
className = '',
hideLabelFromVision = false,
colors,
value = '',
onChange,
disableCustomColors = false,
clearable = true
}) => {
const instanceId = (0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_3__.useInstanceId)(ColorSetting);
const id = `color-settings-${instanceId}`;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.BaseControl, {
id: id,
label: label,
help: help,
className: className,
hideLabelFromVision: hideLabelFromVision,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 83,
columnNumber: 3
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_block_editor__WEBPACK_IMPORTED_MODULE_2__.ColorPalette, {
colors: colors,
value: value,
onChange: onChange,
disableCustomColors: disableCustomColors,
clearable: clearable,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 4
}
}));
};
/***/ }),
/***/ "./components/content-picker/DraggableChip.tsx":
/*!*****************************************************!*\
!*** ./components/content-picker/DraggableChip.tsx ***!
\*****************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ DraggableChip: function() { return /* binding */ DraggableChip; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _emotion_styled__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @emotion/styled */ "@emotion/styled");
/* harmony import */ var _emotion_styled__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_emotion_styled__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _drag_handle__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ../drag-handle */ "./components/drag-handle/index.tsx");
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/content-picker/DraggableChip.tsx";
const ChipWrapper = (_emotion_styled__WEBPACK_IMPORTED_MODULE_3___default().div)`
pointer-events: none;
`;
const Chip = (_emotion_styled__WEBPACK_IMPORTED_MODULE_3___default().div)`
background: #1e1e1e;
opacity: 0.9;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
color: #fff;
display: inline-flex;
margin: 0;
padding: 8px;
font-size: 0.875rem;
line-height: 1.4;
white-space: nowrap;
max-width: min(300px, 100%);
svg {
fill: currentColor;
}
`;
const DraggableChip = props => {
let {
title = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Moving 1 item', '10up-block-components')
} = props;
if (!title) {
title = (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Moving 1 item', '10up-block-components');
}
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(ChipWrapper, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 41,
columnNumber: 3
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(Chip, {
"data-testid": "draggable-chip",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 42,
columnNumber: 4
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Flex, {
justify: "center",
align: "center",
gap: 4,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 43,
columnNumber: 5
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.FlexItem, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 44,
columnNumber: 6
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.__experimentalTruncate, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 45,
columnNumber: 7
}
}, title)), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_drag_handle__WEBPACK_IMPORTED_MODULE_4__.DragHandle, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 47,
columnNumber: 6
}
}))));
};
/***/ }),
/***/ "./components/content-picker/PickedItem.tsx":
/*!**************************************************!*\
!*** ./components/content-picker/PickedItem.tsx ***!
\**************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ PickedItemPreview: function() { return /* binding */ PickedItemPreview; }
/* harmony export */ });
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _emotion_styled__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @emotion/styled */ "@emotion/styled");
/* harmony import */ var _emotion_styled__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_emotion_styled__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dnd-kit/sortable */ "@dnd-kit/sortable");
/* harmony import */ var _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _dnd_kit_utilities__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @dnd-kit/utilities */ "@dnd-kit/utilities");
/* harmony import */ var _dnd_kit_utilities__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_dnd_kit_utilities__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_html_entities__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/html-entities */ "@wordpress/html-entities");
/* harmony import */ var _wordpress_html_entities__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @wordpress/icons */ "@wordpress/icons");
/* harmony import */ var _wordpress_icons__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_wordpress_icons__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__);
/* harmony import */ var _drag_handle__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../drag-handle */ "./components/drag-handle/index.tsx");
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/content-picker/PickedItem.tsx";
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const PickedItemContainer = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().div)`
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
min-height: 36px;
max-width: 100%;
width: 100%;
color: ${({
isDeleted
}) => isDeleted ? '#cc1818' : '#1e1e1e'};
opacity: ${({
isDragging,
isDeleted
}) => {
if (isDragging) return 0.5;
if (isDeleted) return 0.7;
return 1;
}};
background: ${({
isDragging,
isDeleted
}) => {
if (isDragging) return '#f0f0f0';
if (isDeleted) return '#fef7f7';
return 'transparent';
}};
border: ${({
isDeleted
}) => isDeleted ? '1px solid #f0b7b7' : 'none'};
border-radius: 2px;
transition: background-color 0.1s linear;
cursor: ${({
isDragging,
isOrderable
}) => {
if (!isOrderable) return 'default';
return isDragging ? 'grabbing' : 'grab';
}};
touch-action: none;
&:hover {
background: ${({
isDeleted
}) => isDeleted ? '#fef0f0' : '#f0f0f0'};
.move-up-button,
.move-down-button,
.remove-button {
opacity: 1;
pointer-events: auto;
}
}
.components-button.has-icon {
min-width: 24px;
padding: 0;
height: 24px;
}
&:not(:hover) .remove-button {
opacity: 0;
pointer-events: none;
}
`;
const DragHandleWrapper = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().div)`
display: ${({
isDragging
}) => isDragging ? 'flex' : 'none'};
align-items: center;
justify-content: center;
opacity: ${({
isDragging
}) => isDragging ? 1 : 0};
pointer-events: ${({
isDragging
}) => isDragging ? 'auto' : 'none'};
transition: opacity 0.1s linear;
position: absolute;
left: 8px;
`;
const RemoveButton = _emotion_styled__WEBPACK_IMPORTED_MODULE_1___default()((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.Button))`
opacity: ${({
isDragging
}) => isDragging ? 0 : 1};
pointer-events: ${({
isDragging
}) => isDragging ? 'none' : 'auto'};
transition: opacity 0.1s linear;
&:focus {
opacity: 1;
pointer-events: auto;
}
`;
const ItemContent = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().div)`
flex: 1;
min-width: 0;
max-width: calc(100% - 80px); /* Account for the width of buttons */
display: flex;
flex-direction: column;
gap: 2px;
padding-left: ${({
isDragging
}) => isDragging ? '24px' : '0'};
transition: padding-left 0.1s linear;
`;
const ItemTitle = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().span)`
font-size: 0.875rem;
line-height: 1.4;
font-weight: 500;
color: ${({
isDeleted
}) => isDeleted ? '#cc1818' : '#1e1e1e'};
font-style: ${({
isDeleted
}) => isDeleted ? 'italic' : 'normal'};
`;
const ItemURL = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().span)`
font-size: 0.75rem;
line-height: 1.4;
color: #757575;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
`;
const MoveButton = _emotion_styled__WEBPACK_IMPORTED_MODULE_1___default()((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.Button))`
&.components-button.has-icon {
min-width: 20px;
padding: 0;
height: 14px;
}
&.components-button.has-icon svg {
width: 18px;
height: 18px;
}
opacity: 0;
pointer-events: none;
transition: opacity 0.1s linear;
&:focus {
opacity: 1;
pointer-events: auto;
}
`;
const ButtonContainer = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().div)`
display: flex;
align-items: center;
gap: 4px;
margin-left: auto;
`;
/**
* Component to render a preview of a picked item.
*
* @component
* @param {object} props - The component props.
* @param {PickedItemType} props.item - The picked item to display.
* @param {boolean} props.isDeleted - Whether the item has been deleted.
* @returns {*} React JSX
*/
const PickedItemPreview = ({
item,
isDeleted = false
}) => {
const decodedTitle = (0,_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_5__.decodeEntities)(item.title);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(ItemTitle, {
isDeleted: isDeleted,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 194,
columnNumber: 4
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalTruncate, {
title: decodedTitle,
"aria-label": decodedTitle,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 195,
columnNumber: 5
}
}, decodedTitle)), item.url && !isDeleted && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(ItemURL, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 200,
columnNumber: 5
}
}, (0,_wordpress_url__WEBPACK_IMPORTED_MODULE_4__.filterURLForDisplay)((0,_wordpress_url__WEBPACK_IMPORTED_MODULE_4__.safeDecodeURI)(item.url)) || ''));
};
/**
* PickedItem
*
* @param {PickedItemProps} props react props
* @returns {*} React JSX
*/
const PickedItem = ({
item,
isOrderable = false,
handleItemDelete,
id,
isDragging = false,
positionInSet = 1,
setSize = 1,
onMoveUp,
onMoveDown,
PickedItemPreviewComponent,
isDeleted = false
}) => {
const {
attributes,
listeners,
setNodeRef,
transform,
transition
} = (0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.useSortable)({
id
});
const style = {
transform: _dnd_kit_utilities__WEBPACK_IMPORTED_MODULE_3__.CSS.Transform.toString(transform),
transition
};
const isFirst = positionInSet === 1;
const isLast = positionInSet === setSize;
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalTreeGridRow, {
level: 1,
positionInSet: positionInSet,
setSize: setSize,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 238,
columnNumber: 3
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(PickedItemContainer, _extends({
ref: setNodeRef,
style: style
}, attributes, listeners, {
isDragging: isDragging,
isOrderable: isOrderable,
isDeleted: isDeleted,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 239,
columnNumber: 4
}
}), isOrderable && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(DragHandleWrapper, {
isDragging: isDragging,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 249,
columnNumber: 6
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_drag_handle__WEBPACK_IMPORTED_MODULE_9__.DragHandle, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 7
}
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(ItemContent, {
isDragging: isDragging,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 5
}
}, PickedItemPreviewComponent ? (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(PickedItemPreviewComponent, {
item: item,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 255,
columnNumber: 7
}
}) : (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(PickedItemPreview, {
item: item,
isDeleted: isDeleted,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 257,
columnNumber: 7
}
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(ButtonContainer, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 260,
columnNumber: 5
}
}, isOrderable && !isDragging && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.__experimentalVStack, {
spacing: 0,
className: "move-buttons",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 262,
columnNumber: 7
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(MoveButton, {
disabled: isFirst,
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__.chevronUp,
onClick: e => {
e.stopPropagation();
onMoveUp?.();
},
className: "move-up-button",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 263,
columnNumber: 8
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.VisuallyHidden, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 272,
columnNumber: 9
}
}, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Move item up', '10up-block-components'))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(MoveButton, {
disabled: isLast,
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__.chevronDown,
onClick: e => {
e.stopPropagation();
onMoveDown?.();
},
className: "move-down-button",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 276,
columnNumber: 8
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_8__.VisuallyHidden, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 285,
columnNumber: 9
}
}, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Move item down', '10up-block-components')))), !isDragging && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(RemoveButton, {
className: "remove-button",
icon: _wordpress_icons__WEBPACK_IMPORTED_MODULE_7__.close,
size: "small",
variant: "tertiary",
isDestructive: true,
label: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_6__.__)('Remove item', '10up-block-components'),
onClick: e => {
e.stopPropagation();
handleItemDelete(item);
},
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 292,
columnNumber: 7
}
}))));
};
/* harmony default export */ __webpack_exports__["default"] = (PickedItem);
/***/ }),
/***/ "./components/content-picker/SortableList.tsx":
/*!****************************************************!*\
!*** ./components/content-picker/SortableList.tsx ***!
\****************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! @wordpress/element */ "@wordpress/element");
/* harmony import */ var _wordpress_element__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__);
/* harmony import */ var _dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! @dnd-kit/core */ "@dnd-kit/core");
/* harmony import */ var _dnd_kit_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__);
/* harmony import */ var _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @dnd-kit/sortable */ "@dnd-kit/sortable");
/* harmony import */ var _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/i18n */ "@wordpress/i18n");
/* harmony import */ var _wordpress_i18n__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/data */ "@wordpress/data");
/* harmony import */ var _wordpress_data__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_data__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! @wordpress/core-data */ "@wordpress/core-data");
/* harmony import */ var _wordpress_core_data__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_6__);
/* harmony import */ var _emotion_styled__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! @emotion/styled */ "@emotion/styled");
/* harmony import */ var _emotion_styled__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_emotion_styled__WEBPACK_IMPORTED_MODULE_7__);
/* harmony import */ var _PickedItem__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ./PickedItem */ "./components/content-picker/PickedItem.tsx");
/* harmony import */ var _DraggableChip__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ./DraggableChip */ "./components/content-picker/DraggableChip.tsx");
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/content-picker/SortableList.tsx";
const dropAnimation = {
..._dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.defaultDropAnimation,
dragSourceOpacity: 0.5
};
function getEntityKind(mode) {
let type;
switch (mode) {
case 'post':
type = 'postType';
break;
case 'user':
type = 'root';
break;
default:
type = 'taxonomy';
break;
}
return type;
}
const StyledTreeGrid = _emotion_styled__WEBPACK_IMPORTED_MODULE_7___default()((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_3__.__experimentalTreeGrid))`
max-width: 100%;
display: block;
& tbody,
& tr,
& td {
display: block;
max-width: 100%;
width: 100%;
}
`;
const SortableList = ({
posts,
isOrderable = false,
handleItemDelete,
mode = 'post',
setPosts,
PickedItemPreviewComponent
}) => {
const hasMultiplePosts = posts.length > 1;
const [activeId, setActiveId] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(null);
const entityKind = getEntityKind(mode);
// Fetch all posts data at once
const preparedItems = (0,_wordpress_data__WEBPACK_IMPORTED_MODULE_5__.useSelect)(select => {
// @ts-ignore-next-line - The WordPress types are missing the hasFinishedResolution method.
const {
getEntityRecord,
hasFinishedResolution
} = select(_wordpress_core_data__WEBPACK_IMPORTED_MODULE_6__.store);
return posts.reduce((acc, item) => {
const fields = ['link', 'type', 'id'];
if (mode === 'user') {
fields.push('name');