Merge branch '1.x' into navigation

assets/js/src/core/components/accordion/accordion.styles.ts

@@ -67,7 +67,7 @@ export const useStyles = createStyles(({ token, css }) => {
             > .ant-collapse-header {
                 display: inline-flex;
                 width: 100%;
-                align-items: center;
+                align-items: baseline;
 
                 > .ant-collapse-header-text {
                     margin-inline-end: 0;

assets/js/src/core/components/accordion/accordion.tsx

@@ -89,6 +89,7 @@ export const Accordion = ({
           role={ 'button' }
           size="small"
           type={ 'text' }
+          variant='minimal'
         />
       )
     }
@@ -107,8 +108,7 @@ export const Accordion = ({
       className: itemClassNames.join(' '),
       label: <>
         <Flex
-          align={ 'center' }
-          vertical={ false }
+          align={ 'baseline' }
         >
           {expandIconPosition === 'start' && (item.children !== null) && !(item.disabled === true) &&
                         chevronButton()}

assets/js/src/core/components/element-tree/element-tree.tsx

@@ -30,6 +30,7 @@ import { Box } from '../box/box'
 
 export interface TreeSearchProps {
   node: TreeNodeProps
+  isLoading?: boolean
   mergeAdditionalQueryParams?: Dispatch<unknown>
   total: number
 }

assets/js/src/core/components/element-tree/list/tree-list.tsx

@@ -34,7 +34,7 @@ export const TreeList = ({ node }: TreeListProps): React.JSX.Element => {
   const { isLoading, isFetching, isError, data } = apiHookResult
   const { uploadFileList, uploadingNode } = useContext(UploadContext)!
 
-  if (isLoading === true || isFetching === true) {
+  if (isLoading === true) {
     return (
       <Skeleton style={ { paddingLeft: token.paddingSM + (node.level + 1.5) * 24 } } />
     )
@@ -54,6 +54,7 @@ export const TreeList = ({ node }: TreeListProps): React.JSX.Element => {
           style={ { paddingLeft: token.paddingSM + (node.level + 1) * 24 } }
         >
           <RenderFilter
+            isLoading={ isFetching }
             mergeAdditionalQueryParams={ mergeAdditionalQueryParams }
             node={ node }
             total={ total }

assets/js/src/core/components/select/select.styles.ts

@@ -94,6 +94,14 @@ export const useStyles = createStyles(({ css, token }, props: StylesProps) => {
       }
     `,
 
+    selectContainerWithClear: css`
+      &:hover {
+        .ant-select-arrow {
+          display: none;
+        }
+      }
+    `,
+
     select: css`
       width: ${!isEmptyValue(props.width) ? `${props.width}px` : 'initial'};
       

assets/js/src/core/components/select/select.tsx

@@ -25,11 +25,12 @@ export interface SelectProps extends AntdSelectProps {
   width?: number
 }
 
-export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, customArrowIcon, mode, status, className, width, ...antdSelectProps }, ref): React.JSX.Element => {
+export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, customArrowIcon, mode, status, className, width, allowClear, ...antdSelectProps }, ref): React.JSX.Element => {
   const selectRef = useRef<RefSelectProps>(null)
 
   const [isActive, setIsActive] = useState(false)
   const [isFocus, setIsFocus] = useState(false)
+  const [isSelected, setIsSelected] = useState(false)
 
   useImperativeHandle(ref, () => selectRef.current!)
 
@@ -41,7 +42,8 @@ export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, cus
 
   const selectContainerClassNames = cn(styles.selectContainer, {
     [styles.selectContainerWarning]: isStatusWarning,
-    [styles.selectContainerError]: isStatusError
+    [styles.selectContainerError]: isStatusError,
+    [styles.selectContainerWithClear]: allowClear === true && isSelected
   })
   const selectClassNames = cn(className, styles.select, {
     [styles.selectWithCustomIcon]: withCustomIcon
@@ -54,6 +56,10 @@ export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, cus
 
   const handleClick = (): void => { setIsActive(!isActive) }
 
+  const handleChange = (value: string): void => {
+    !isEmpty(value) ? setIsSelected(true) : setIsSelected(false)
+  }
+
   const getSuffixIcon = (): React.JSX.Element => {
     const isShowCustomIcon = !isEmpty(customArrowIcon) && isString(customArrowIcon)
     const iconToShow = isShowCustomIcon ? customArrowIcon : (isActive ? 'chevron-up' : 'chevron-down')
@@ -83,10 +89,12 @@ export const Select = forwardRef<RefSelectProps, SelectProps>(({ customIcon, cus
         />
       )}
       <AntdSelect
+        allowClear={ allowClear }
         className={ selectClassNames }
         menuItemSelectedIcon={ getItemSelectedIcon() }
         mode={ mode }
         onBlur={ () => { setIsFocus(false) } }
+        onChange={ handleChange }
         onDropdownVisibleChange={ handleClick }
         onFocus={ () => { setIsFocus(true) } }
         ref={ selectRef }

assets/js/src/core/modules/asset/tree/search/search-container.tsx

@@ -20,6 +20,7 @@ const SearchContainer = (props: TreeSearchProps): React.JSX.Element => {
   const { t } = useTranslation()
   return (
     <BaseSearchContainer
+      { ...props }
       label={ t('asset.asset-tree.search', { folderName: props.node.label }) }
       node={ props.node }
       total={ props.total }

assets/js/src/core/modules/data-object/tree/search/search-container.tsx

@@ -20,6 +20,7 @@ const SearchContainer = (props: TreeSearchProps): React.JSX.Element => {
   const { t } = useTranslation()
   return (
     <BaseSearchContainer
+      { ...props }
       label={ t('data-object.data-object-tree.search', { folderName: props.node.label }) }
       node={ props.node }
       total={ props.total }

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/versions/create-version-accordion-item-functions.tsx

@@ -25,6 +25,7 @@ import { Flex } from '@Pimcore/components/flex/flex'
 import { Space } from '@Pimcore/components/space/space'
 import { Tag } from '@Pimcore/components/tag/tag'
 import { useTranslation } from 'react-i18next'
+import { Box } from '@Pimcore/components/box/box'
 
 interface VersionIdentifiers {
   id: number
@@ -82,12 +83,18 @@ export const createVersionAccordionItem = ({
     return (
       <div>
         {selectable && (
-          <Checkbox
-            checked={ selected }
-            onChange={ () => {
-              selectVersion(vId)
-            } }
-          />
+          <Box
+            inline
+            padding={ { right: 'extra-small' } }
+          >
+            <Checkbox
+              checked={ selected }
+              onChange={ () => {
+                selectVersion(vId)
+              } }
+            />
+          </Box>
+
         )}
         <span className={ 'title' }>
           {`${t('version.version')} ${version.versionCount} | ${formatDateTime({
@@ -115,15 +122,17 @@ export const createVersionAccordionItem = ({
 
   const Extra = (): React.JSX.Element => {
     const { t } = useTranslation()
-    const color = published ? 'success' : 'blue'
-    const icon = published ? 'world' : 'user'
+
+    if (!published) {
+      return <></>
+    }
 
     return (
       <Tag
-        color={ color }
-        iconName={ icon }
+        color={ 'success' }
+        iconName={ 'world' }
       >
-        { published ? t('version.published') : t('version.own-draft') }
+        {t('version.published')}
       </Tag>
     )
   }
@@ -151,7 +160,7 @@ export const createVersionAccordionItem = ({
         vertical
       >
         <Flex
-          align='center'
+          align='top'
           justify='space-between'
         >
           <Tag className={ 'id-tag' }>ID: {version.id}</Tag>

assets/js/src/core/modules/element/editor/shared-tab-manager/tabs/versions/version-api-slice-enhanced.ts

@@ -43,4 +43,11 @@ export const api = baseApi.enhanceEndpoints({
 })
 
 export type * from './version-api-slice.gen'
-export const { useVersionAssetDownloadByIdQuery, useVersionCleanupForElementByTypeAndIdMutation, useVersionDeleteByIdMutation, useVersionGetByIdQuery, useVersionGetCollectionForElementByTypeAndIdQuery, useVersionPublishByIdMutation, useVersionUpdateByIdMutation } = api
+export const {
+  useVersionAssetDownloadByIdQuery,
+  useVersionCleanupForElementByTypeAndIdMutation,
+  useVersionDeleteByIdMutation, useVersionGetByIdQuery,
+  useVersionGetCollectionForElementByTypeAndIdQuery,
+  useVersionPublishByIdMutation,
+  useVersionUpdateByIdMutation
+} = api

assets/js/src/core/modules/element/tree/search/search-container.tsx

@@ -46,6 +46,7 @@ const SearchContainer = (props: SearchContainerProps): React.JSX.Element => {
   return (
     <Search
       aria-label={ props.label }
+      loading={ props.isLoading }
       onSearch={ onSearch }
       placeholder={ props.label }
       size='small'

public/build/69610f6d-d9b8-4bf0-9eb5-332ac89fe1e2/entrypoints.json

@@ -0,0 +1,12 @@
+{
+  "entrypoints": {
+    "core-dll": {
+      "css": [
+        "/bundles/pimcorestudioui/build/69610f6d-d9b8-4bf0-9eb5-332ac89fe1e2/core-dll.css"
+      ],
+      "js": [
+        "/bundles/pimcorestudioui/build/69610f6d-d9b8-4bf0-9eb5-332ac89fe1e2/core-dll.js"
+      ]
+    }
+  }
+}