@10up/block-components
Version:
10up Components built for the WordPress Block Editor.
1,250 lines (1,173 loc) • 159 kB
JavaScript
/******/ (function() { // webpackBootstrap
/******/ "use strict";
/******/ var __webpack_modules__ = ({
/***/ "./components/content-picker/DraggableChip.tsx":
/*!*****************************************************!*\
!*** ./components/content-picker/DraggableChip.tsx ***!
\*****************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__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__) {
__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__) {
__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');
} else if (mode === 'post') {
fields.push('title');
fields.push('url');
fields.push('subtype');
fields.push('status'); // Include status to check for trashed posts
} else {
fields.push('name');
fields.push('taxonomy');
}
const getEntityRecordParameters = [entityKind, item.type, item.id, {
_fields: fields
}];
const result = getEntityRecord(...getEntityRecordParameters);
if (result) {
let newItem;
if (mode === 'post') {
const post = result;
newItem = {
title: post.title.rendered,
url: post.link,
id: post.id,
type: post.type,
status: post.status // Include status for trashed post detection
};
} else if (mode === 'user') {
const user = result;
newItem = {
title: user.name,
url: user.link,
id: user.id,
type: 'user'
};
} else {
const taxonomy = result;
newItem = {
title: taxonomy.name,
url: taxonomy.link,
id: taxonomy.id,
type: taxonomy.taxonomy
};
}
if (item.uuid) {
newItem.uuid = item.uuid;
}
acc[item.uuid] = newItem;
} else if (hasFinishedResolution('getEntityRecord', getEntityRecordParameters)) {
acc[item.uuid] = null;
}
return acc;
}, {});
}, [posts, entityKind]);
const items = posts.map(item => item.uuid);
const sensors = (0,_dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.useSensors)((0,_dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.useSensor)(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.MouseSensor, {
activationConstraint: {
distance: 5
}
}), (0,_dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.useSensor)(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.TouchSensor, {
activationConstraint: {
delay: 250,
tolerance: 5
}
}));
const handleDragStart = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {
setActiveId(event.active.id);
}, []);
const handleDragEnd = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useCallback)(event => {
const {
active,
over
} = event;
setActiveId(null);
if (active.id !== over?.id) {
const oldIndex = posts.findIndex(post => post.uuid === active.id);
const newIndex = posts.findIndex(post => post.uuid === over?.id);
setPosts((0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.arrayMove)(posts, oldIndex, newIndex));
}
}, [posts, setPosts]);
const handleDragCancel = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useCallback)(() => {
setActiveId(null);
}, []);
const activePost = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useMemo)(() => activeId ? preparedItems?.[activeId] : null, [activeId, preparedItems]);
const renderItems = items => {
return items.map((post, index) => {
const preparedItem = preparedItems[post.uuid];
// If the item doesn't exist (was deleted) or is trashed, show a placeholder with remove option
if (!preparedItem) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_PickedItem__WEBPACK_IMPORTED_MODULE_8__["default"], {
isOrderable: hasMultiplePosts && isOrderable,
key: post.uuid,
handleItemDelete: handleItemDelete,
item: {
id: post.id,
type: post.type,
uuid: post.uuid,
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('(Item no longer exists)', '10up-block-components'),
url: ''
},
mode: mode,
id: post.uuid,
positionInSet: index + 1,
setSize: items.length,
onMoveUp: () => {
if (index === 0) return;
setPosts((0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.arrayMove)(posts, index, index - 1));
},
onMoveDown: () => {
if (index === items.length - 1) return;
setPosts((0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.arrayMove)(posts, index, index + 1));
},
PickedItemPreviewComponent: PickedItemPreviewComponent,
isDeleted: true,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 6
}
});
}
// Check if the post is trashed (only for post mode)
const isTrashOrDeleted = mode === 'post' && preparedItem && preparedItem.status === 'trash';
if (isTrashOrDeleted) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_PickedItem__WEBPACK_IMPORTED_MODULE_8__["default"], {
isOrderable: hasMultiplePosts && isOrderable,
key: post.uuid,
handleItemDelete: handleItemDelete,
item: {
id: preparedItem.id,
type: preparedItem.type,
uuid: preparedItem.uuid,
title: (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('(Item in trash)', '10up-block-components'),
url: preparedItem.url
},
mode: mode,
id: post.uuid,
positionInSet: index + 1,
setSize: items.length,
onMoveUp: () => {
if (index === 0) return;
setPosts((0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.arrayMove)(posts, index, index - 1));
},
onMoveDown: () => {
if (index === items.length - 1) return;
setPosts((0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.arrayMove)(posts, index, index + 1));
},
PickedItemPreviewComponent: PickedItemPreviewComponent,
isDeleted: true,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 250,
columnNumber: 6
}
});
}
const handleMoveUp = () => {
if (index === 0) return;
setPosts((0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.arrayMove)(posts, index, index - 1));
};
const handleMoveDown = () => {
if (index === items.length - 1) return;
setPosts((0,_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.arrayMove)(posts, index, index + 1));
};
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_PickedItem__WEBPACK_IMPORTED_MODULE_8__["default"], {
isOrderable: hasMultiplePosts && isOrderable,
key: post.uuid,
handleItemDelete: handleItemDelete,
item: preparedItem,
mode: mode,
id: post.uuid,
positionInSet: index + 1,
setSize: items.length,
onMoveUp: handleMoveUp,
onMoveDown: handleMoveDown,
PickedItemPreviewComponent: PickedItemPreviewComponent,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 290,
columnNumber: 5
}
});
});
};
// If not orderable or only one item, render simple list
if (!isOrderable || !hasMultiplePosts) {
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(StyledTreeGrid, {
className: "block-editor-list-view-tree",
"aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('Selected items list'),
onCollapseRow: () => {},
onExpandRow: () => {},
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 310,
columnNumber: 4
}
}, renderItems(posts));
}
// If orderable, wrap with drag and drop context
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.DndContext, {
sensors: sensors,
collisionDetection: _dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.closestCenter,
onDragStart: handleDragStart,
onDragEnd: handleDragEnd,
onDragCancel: handleDragCancel,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 323,
columnNumber: 3
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(StyledTreeGrid, {
className: "block-editor-list-view-tree",
"aria-label": (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_4__.__)('Selected items list'),
onCollapseRow: () => {},
onExpandRow: () => {},
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 330,
columnNumber: 4
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.SortableContext, {
items: items,
strategy: _dnd_kit_sortable__WEBPACK_IMPORTED_MODULE_2__.verticalListSortingStrategy,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 336,
columnNumber: 5
}
}, renderItems(posts))), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_dnd_kit_core__WEBPACK_IMPORTED_MODULE_1__.DragOverlay, {
dropAnimation: dropAnimation,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 340,
columnNumber: 4
}
}, activeId && activePost ? (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_DraggableChip__WEBPACK_IMPORTED_MODULE_9__.DraggableChip, {
title: activePost.title,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 341,
columnNumber: 31
}
}) : null));
};
/* harmony default export */ __webpack_exports__["default"] = (SortableList);
/***/ }),
/***/ "./components/content-search/SearchItem.tsx":
/*!**************************************************!*\
!*** ./components/content-search/SearchItem.tsx ***!
\**************************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ defaultRenderItemType: function() { return /* binding */ defaultRenderItemType; }
/* 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 _wordpress_url__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! @wordpress/url */ "@wordpress/url");
/* harmony import */ var _wordpress_url__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_wordpress_url__WEBPACK_IMPORTED_MODULE_2__);
/* harmony import */ var _wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! @wordpress/html-entities */ "@wordpress/html-entities");
/* harmony import */ var _wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3__);
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/components */ "@wordpress/components");
/* harmony import */ var _wordpress_components__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _wordpress_rich_text__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @wordpress/rich-text */ "@wordpress/rich-text");
/* harmony import */ var _wordpress_rich_text__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_5__);
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/content-search/SearchItem.tsx";
const SearchItemWrapper = _emotion_styled__WEBPACK_IMPORTED_MODULE_1___default()((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Button))`
&&& {
display: flex;
text-align: left;
width: 100%;
justify-content: space-between;
align-items: center;
border-radius: 2px;
box-sizing: border-box;
height: auto !important;
padding: 0.3em 0.7em;
overflow: hidden;
&:hover {
/* Add opacity background to support future color changes */
/* Reduce background from #ddd to 0.05 for text contrast */
background-color: rgba(0, 0, 0, 0.05);
}
}
`;
const SearchItemHeader = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().span)`
display: flex;
flex-direction: column;
align-items: flex-start;
`;
const SearchItemTitle = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().span)`
padding-right: ${({
showType
}) => showType ? 0 : undefined};
`;
const SearchItemInfo = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().span)`
padding-right: ${({
showType
}) => showType ? 0 : undefined};
`;
const SearchItemType = (_emotion_styled__WEBPACK_IMPORTED_MODULE_1___default().span)`
background-color: rgba(0, 0, 0, 0.05);
color: black;
padding: 2px 4px;
text-transform: capitalize;
border-radius: 2px;
flex-shrink: 0;
`;
const StyledTextHighlight = _emotion_styled__WEBPACK_IMPORTED_MODULE_1___default()((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.TextHighlight))`
margin: 0 !important;
padding: 0 !important;
`;
function defaultRenderItemType(suggestion) {
// Rename 'post_tag' to 'tag'. Ideally, the API would return the localized CPT or taxonomy label.
if (suggestion.type === 'post_tag') {
return 'tag';
}
if (suggestion.subtype) {
return suggestion.subtype;
}
return suggestion.type;
}
const SearchItem = ({
item: suggestion,
onSelect: onClick,
searchTerm = '',
id = '',
contentTypes,
renderType = defaultRenderItemType
}) => {
const showType = !!(suggestion.type && contentTypes.length > 1);
const richTextContent = (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_5__.create)({
html: suggestion.title
});
const textContent = (0,_wordpress_rich_text__WEBPACK_IMPORTED_MODULE_5__.getTextContent)(richTextContent);
const titleContent = (0,_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3__.decodeEntities)(textContent);
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.Tooltip, {
text: (0,_wordpress_html_entities__WEBPACK_IMPORTED_MODULE_3__.decodeEntities)(suggestion.title),
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 3
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(SearchItemWrapper, {
id: id,
onClick: onClick,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 92,
columnNumber: 4
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(SearchItemHeader, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 93,
columnNumber: 5
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(SearchItemTitle, {
showType: showType,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 94,
columnNumber: 6
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(StyledTextHighlight, {
text: titleContent,
highlight: searchTerm,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 95,
columnNumber: 7
}
})), (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(SearchItemInfo, {
"aria-hidden": true,
showType: showType,
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 97,
columnNumber: 6
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_components__WEBPACK_IMPORTED_MODULE_4__.__experimentalTruncate, {
numberOfLines: 1,
limit: 55,
ellipsizeMode: "middle",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 98,
columnNumber: 7
}
}, (0,_wordpress_url__WEBPACK_IMPORTED_MODULE_2__.filterURLForDisplay)((0,_wordpress_url__WEBPACK_IMPORTED_MODULE_2__.safeDecodeURI)(suggestion.url)) || ''))), showType && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(SearchItemType, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 103,
columnNumber: 18
}
}, renderType(suggestion))));
};
/* harmony default export */ __webpack_exports__["default"] = (SearchItem);
/***/ }),
/***/ "./components/content-search/index.tsx":
/*!*********************************************!*\
!*** ./components/content-search/index.tsx ***!
\*********************************************/
/***/ (function(__unused_webpack_module, __webpack_exports__, __webpack_require__) {
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ ContentSearch: function() { return /* binding */ ContentSearchWrapper; }
/* 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 _wordpress_compose__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! @wordpress/compose */ "@wordpress/compose");
/* harmony import */ var _wordpress_compose__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__);
/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! @tanstack/react-query */ "@tanstack/react-query");
/* harmony import */ var _tanstack_react_query__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_tanstack_react_query__WEBPACK_IMPORTED_MODULE_5__);
/* harmony import */ var _SearchItem__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ./SearchItem */ "./components/content-search/SearchItem.tsx");
/* harmony import */ var _styled_components_context__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! ../styled-components-context */ "./components/styled-components-context/index.tsx");
/* harmony import */ var _hooks_use_debounced_input__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! ../../hooks/use-debounced-input */ "./hooks/use-debounced-input/index.ts");
/* harmony import */ var _hooks_use_on_click_outside__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! ../../hooks/use-on-click-outside */ "./hooks/use-on-click-outside.ts");
/* harmony import */ var _utils__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! ./utils */ "./components/content-search/utils.ts");
var _jsxFileName = "/Users/fabiankaegy/Developer/10up/block-components/components/content-search/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 queryClient = new _tanstack_react_query__WEBPACK_IMPORTED_MODULE_5__.QueryClient();
// Equalize height of list icons to match loader in order to reduce jumping.
const listMinHeight = '46px';
const List = (_emotion_styled__WEBPACK_IMPORTED_MODULE_3___default().ul)`
max-height: 350px;
overflow-y: auto;
list-style: none !important;
margin: 0;
padding: 0 !important;
`;
const ListItem = (_emotion_styled__WEBPACK_IMPORTED_MODULE_3___default().li)`
margin-bottom: 0;
`;
const StyledSpinner = _emotion_styled__WEBPACK_IMPORTED_MODULE_3___default()((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.Spinner))`
/* Custom styles to reduce jumping while loading the results */
min-height: ${listMinHeight};
display: flex;
align-items: center;
justify-content: center;
`;
const LoadingContainer = (_emotion_styled__WEBPACK_IMPORTED_MODULE_3___default().div)`
display: flex;
justify-content: center;
margin-top: 1em;
button {
/* Reduce the jumping of the width when text changes to "Loading" */
min-width: 90px;
}
`;
const StyledNavigableMenu = _emotion_styled__WEBPACK_IMPORTED_MODULE_3___default()((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.NavigableMenu))`
width: 100%;
`;
const StyledSearchControl = _emotion_styled__WEBPACK_IMPORTED_MODULE_3___default()((0,_wordpress_components__WEBPACK_IMPORTED_MODULE_1__.SearchControl))`
width: 100%;
`;
const StyledNoResults = (_emotion_styled__WEBPACK_IMPORTED_MODULE_3___default().li)`
color: inherit;
cursor: default;
padding-left: 3px;
`;
const ContentSearchNoResults = () => (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(StyledNoResults, {
className: "tenup-content-search-list-item components-button",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 90,
columnNumber: 2
}
}, (0,_wordpress_i18n__WEBPACK_IMPORTED_MODULE_2__.__)('Nothing found.', '10up-block-components'));
const ContentSearch = ({
onSelectItem = () => {
console.log('Select!'); // eslint-disable-line no-console
},
placeholder = '',
label,
hideLabelFromVision = true,
contentTypes = ['post', 'page'],
mode = 'post',
perPage = 20,
queryFilter = query => query,
excludeItems = [],
renderItemType = undefined,
renderItem: SearchResultItem = _SearchItem__WEBPACK_IMPORTED_MODULE_6__["default"],
fetchInitialResults,
options
}) => {
const debounceOptions = options && options.inputDelay ? {
delay: options.inputDelay
} : undefined;
const [searchInput, setSearchString, searchString] = (0,_hooks_use_debounced_input__WEBPACK_IMPORTED_MODULE_8__.useDebouncedInput)('', debounceOptions);
const [isFocused, setIsFocused] = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useState)(false);
const searchContainer = (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.useRef)(null);
const handleItemSelection = item => {
setSearchString('');
setIsFocused(false);
onSelectItem(item);
};
const clickOutsideRef = (0,_hooks_use_on_click_outside__WEBPACK_IMPORTED_MODULE_9__.useOnClickOutside)(() => {
setIsFocused(false);
});
const mergedRef = (0,_wordpress_compose__WEBPACK_IMPORTED_MODULE_4__.useMergeRefs)([searchContainer, clickOutsideRef]);
const {
status,
data,
error,
isFetching,
isFetchingNextPage,
fetchNextPage,
hasNextPage
} = (0,_tanstack_react_query__WEBPACK_IMPORTED_MODULE_5__.useInfiniteQuery)({
queryKey: ['search', searchString, contentTypes.join(','), mode, perPage, queryFilter],
queryFn: async ({
pageParam = 1,
signal
}) => (0,_utils__WEBPACK_IMPORTED_MODULE_10__.fetchSearchResults)({
keyword: searchString,
page: pageParam,
mode,
perPage,
contentTypes,
queryFilter,
excludeItems,
signal
}),
getNextPageParam: lastPage => lastPage.nextPage,
getPreviousPageParam: firstPage => firstPage.previousPage,
initialPageParam: 1
});
const searchResults = data?.pages.map(page => page?.results).flat() || undefined;
const hasSearchString = !!searchString.length;
const hasSearchResults = status === 'success' && searchResults && !!searchResults.length;
const hasInitialResults = fetchInitialResults && isFocused;
const hasNoResults = !!error || !isFetching && !hasSearchResults;
const isPending = status === 'pending';
return (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(StyledNavigableMenu, {
ref: mergedRef,
orientation: "vertical",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 158,
columnNumber: 3
}
}, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(StyledSearchControl, {
value: searchInput,
onChange: newSearchString => {
setSearchString(newSearchString);
},
label: label,
hideLabelFromVision: hideLabelFromVision,
placeholder: placeholder,
autoComplete: "off",
onFocus: () => {
setIsFocused(true);
},
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 159,
columnNumber: 4
}
}), hasSearchString || hasInitialResults ? (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.Fragment, null, (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(List, {
className: "tenup-content-search-list",
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 6
}
}, isPending && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(StyledSpinner, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 176,
columnNumber: 21
}
}), hasNoResults && (0,_wordpress_element__WEBPACK_IMPORTED_MODULE_0__.createElement)(ContentSearchNoResults, {
__self: undefined,
__source: {
fileName: _jsxFileName,
lineNumber: 177,
columnNu