Merge pull request #13 from infinum/release/1.7.0

1.7.0

CHANGELOG.md

@@ -3,6 +3,16 @@ All notable changes to this project will be documented in this file.
 
 This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a CHANGELOG](https://keepachangelog.com/).
 
+## [1.7.0] - 2024-10-09
+- Updated dependencies.
+- `Repeater`, `Draggable`, `DraggableList` and `ItemCollection` will now behave better when `undefined` is passed as value.
+- Fixed overlap issues with `Select` components.
+- Improved `ColorPicker` grouping logic and made grouped menu more compact.
+- Added `MiniResponsive` for cases you need to use a `Responsive` in a limited space. Works best with `OptionSelect` or other `Button`-like components!
+- Fixed `Spacer` not applying `className` in some cases.
+- Tweaked `MediaPlaceholder` colors a bit.
+- `MediaPlaceholder` can now have any child items passed. They are rendered below the label and icon.
+
 ## [1.6.1] - 2024-09-30
 - Fixed `clearable` not working in Select components.
 - Fixed `Tabs` tab alignment when in horizontal mode.
@@ -189,6 +199,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 - Initial release
 
 [Unreleased]: https://github.com/infinum/eightshift-ui-components/compare/master...HEAD
+[1.7.0]: https://github.com/infinum/eightshift-ui-components/compare/1.6.1...1.7.0
 [1.6.1]: https://github.com/infinum/eightshift-ui-components/compare/1.6.0...1.6.1
 [1.6.0]: https://github.com/infinum/eightshift-ui-components/compare/1.5.1...1.6.0
 [1.5.1]: https://github.com/infinum/eightshift-ui-components/compare/1.5.0...1.5.1

lib/components/color-pickers/color-picker.jsx

@@ -4,7 +4,6 @@ import { ColorSwatch } from './color-swatch';
 import { RichLabel } from '../rich-label/rich-label';
 import { BaseControl } from '../base-control/base-control';
 import { clsx } from 'clsx/lite';
-
 import { icons } from '../../icons/icons';
 
 /**
@@ -259,7 +258,7 @@ export const ColorPicker = (props) => {
 							return (
 								<MenuSection
 									key={groupSlug}
-									label={colorGroupNames[groupSlug]}
+									aria-label={colorGroupNames[groupSlug]}
 								>
 									{colors.map((color) => (
 										<SingleItem

lib/components/draggable-list/draggable-list.jsx

@@ -5,7 +5,7 @@ import { clsx } from 'clsx/lite';
 import { List, arrayMove, arrayRemove } from 'react-movable';
 
 const fixIds = (items, itemIdBase) => {
-	return items.map((item, i) => ({
+	return items?.map((item, i) => ({
 		...item,
 		id: item?.id ?? `${itemIdBase}-${i}`,
 	}));
@@ -81,7 +81,11 @@ export const DraggableList = (props) => {
 		...rest
 	} = props;
 
-	const items = fixIds(rawItems, itemIdBase);
+	if (typeof rawItems === 'undefined' || rawItems === null || !Array.isArray(rawItems)) {
+		console.warn(__("DraggableList: 'items' are not an array or are undefined!", 'eightshift-ui-components'));
+	}
+
+	const items = fixIds(rawItems ?? [], itemIdBase);
 
 	if (hidden) {
 		return null;

lib/components/draggable/draggable.jsx

@@ -8,10 +8,12 @@ import { DragDropProvider } from '@dnd-kit/react';
 import { move } from '@dnd-kit/helpers';
 
 const fixIds = (items, itemIdBase) => {
-	return items.map((item, i) => ({
-		...item,
-		id: item?.id ?? `${itemIdBase}-${i}`,
-	}));
+	return (
+		items?.map((item, i) => ({
+			...item,
+			id: item?.id ?? `${itemIdBase}-${i}`,
+		})) ?? []
+	);
 };
 
 const SortableItem = ({ id, index, disabled, children, axis }) => {
@@ -93,7 +95,11 @@ export const Draggable = (props) => {
 		...rest
 	} = props;
 
-	const [items, setItems] = useState(fixIds(rawItems));
+	if (typeof rawItems === 'undefined' || rawItems === null || !Array.isArray(rawItems)) {
+		console.warn(__("Draggable: 'items' are not an array or are undefined!", 'eightshift-ui-components'));
+	}
+
+	const [items, setItems] = useState(fixIds(rawItems ?? []));
 
 	// Ensure the internal state is updated if items are updated externally.
 	useEffect(() => {

lib/components/index.js

@@ -26,6 +26,7 @@ export { ListBox } from './list-box/list-box';
 export { MatrixAlign } from './matrix-align/matrix-align';
 export { MediaPlaceholder } from './placeholders/media-placeholder';
 export { Menu, MenuItem, MenuSection, MenuSeparator, SubMenuItem } from './menu/menu';
+export { MiniResponsive } from './responsive/mini-responsive';
 export { Notice } from './notice/notice';
 export { NumberPicker } from './number-picker/number-picker';
 export { Popover, TriggeredPopover } from './popover/popover';

lib/components/item-collection/item-collection.jsx

@@ -1,4 +1,5 @@
 import { Fragment } from 'react';
+import { __ } from '@wordpress/i18n';
 
 /**
  * A simple component to manage a collection of items.
@@ -29,12 +30,18 @@ import { Fragment } from 'react';
  * @preserve
  */
 export const ItemCollection = (props) => {
-	const { children, items, onChange, hidden } = props;
+	const { children, items: rawItems, onChange, hidden } = props;
 
 	if (hidden) {
 		return null;
 	}
 
+	if (typeof rawItems === 'undefined' || rawItems === null || !Array.isArray(rawItems)) {
+		console.warn(__("ItemCollection: 'items' are not an array or are undefined!", 'eightshift-ui-components'));
+	}
+
+	const items = rawItems ?? [];
+
 	return items.map((item, index) => (
 		<Fragment key={index}>
 			{children({

lib/components/menu/menu.jsx

@@ -155,7 +155,7 @@ export const MenuSection = (props) => {
 			className={clsx(
 				'es-uic-space-y-1 es-uic-border-b es-uic-border-b-gray-200 es-uic-pb-1 last:es-uic-border-b-0',
 				label && 'es-uic-pt-2 first:es-uic-pt-1.5',
-				!label && 'last:es-uic-pb-1',
+				!label && 'last:es-uic-pb-1 has-[>_:only-child]:es-uic-pb-0',
 			)}
 		>
 			{label && <Header className='es-uic-ml-1.5 es-uic-text-xs es-uic-font-medium es-uic-text-gray-400'>{label}</Header>}

lib/components/placeholders/media-placeholder.jsx

@@ -24,15 +24,15 @@ import { icons } from '../../icons/icons';
  * @preserve
  */
 export const MediaPlaceholder = (props) => {
-	const { style = 'default', size = 'default', className, icon, helpText, hidden } = props;
+	const { style = 'default', size = 'default', className, icon, helpText, children, hidden } = props;
 
 	if (hidden) {
 		return null;
 	}
 
 	const styleClassName = {
-		default: 'es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-text-gray-300 es-uic-shadow',
-		simple: 'es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-dashed es-uic-text-gray-300',
+		default: 'es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-bg-gray-50 es-uic-text-gray-400 es-uic-shadow',
+		simple: 'es-uic-rounded-lg es-uic-border es-uic-border-gray-300 es-uic-border-dashed es-uic-text-gray-400',
 	};
 
 	const sizeClassName = {
@@ -48,15 +48,17 @@ export const MediaPlaceholder = (props) => {
 	return (
 		<div
 			className={clsx(
-				'es-uic-flex es-uic-flex-col es-uic-items-center es-uic-justify-center es-uic-gap-2 es-uic-overflow-hidden',
+				'es-uic-flex es-uic-flex-col es-uic-items-center es-uic-justify-center es-uic-gap-2 es-uic-overflow-hidden es-uic-p-2',
 				styleClassName[style] ?? styleClassName?.default,
 				sizeClassName[size] ?? sizeClassName?.default,
 				className,
 			)}
 		>
 			<div className='[&>svg]:es-uic-size-7'>{icon ?? icons.image}</div>
 
-			{helpText && <div className='es-uic-text-sm es-uic-text-gray-400'>{helpText}</div>}
+			{helpText && <div className='es-uic-text-sm es-uic-text-gray-500'>{helpText}</div>}
+
+			{children && <div className='es-uic-mt-2 es-uic-flex es-uic-items-center es-uic-gap-x-2 es-uic-gap-y-2.5 es-uic-text-sm'>{children}</div>}
 		</div>
 	);
 };

lib/components/repeater/repeater.jsx

@@ -9,7 +9,7 @@ import { clsx } from 'clsx/lite';
 import { List, arrayMove, arrayRemove } from 'react-movable';
 
 const fixIds = (items, itemIdBase) => {
-	return items.map((item, i) => ({
+	return items?.map((item, i) => ({
 		...item,
 		id: item?.id ?? `${itemIdBase}-${i}`,
 	}));
@@ -94,7 +94,11 @@ export const Repeater = (props) => {
 		hidden,
 	} = props;
 
-	const items = fixIds(rawItems, itemIdBase);
+	if (typeof rawItems === 'undefined' || rawItems === null || !Array.isArray(rawItems)) {
+		console.warn(__("Repeater: 'items' are not an array or are undefined!", 'eightshift-ui-components'));
+	}
+
+	const items = fixIds(rawItems ?? [], itemIdBase);
 
 	const canDelete = items.length > (minItems ?? 0);
 	const canAdd = items.length < (maxItems ?? Number.MAX_SAFE_INTEGER);