Merge pull request #4 from infinum/release/1.4.7

Release 1.4.7

CHANGELOG.md

@@ -3,6 +3,13 @@ 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.4.7] - 2024-08-16
+- Disabled focus handling in `Expandable` due to Gutenberg conflicts.
+- Fixed `LinkInput` external value not previewing.
+- Added `truncateEnd` text helper.
+- Fixed drag markers not disappearing in `Repeater` when an item is expanded.
+- Tweaked `NumberPicker` to make sure it always looks OK (thanks WPML).
+
 ## [1.4.6] - 2024-08-08
 - Fixed an issue with item saving within some variants of `Select` components.
 - Slightly tweaked menu and popover entry animations.
@@ -145,6 +152,7 @@ This projects adheres to [Semantic Versioning](https://semver.org/) and [Keep a
 
 [Unreleased]: https://github.com/infinum/eightshift-ui-components/compare/master...HEAD
 
+[1.4.7]: https://github.com/infinum/eightshift-ui-components/compare/1.4.6...1.4.7
 [1.4.6]: https://github.com/infinum/eightshift-ui-components/compare/1.4.5...1.4.6
 [1.4.5]: https://github.com/infinum/eightshift-ui-components/compare/1.4.4...1.4.5
 [1.4.4]: https://github.com/infinum/eightshift-ui-components/compare/1.4.3...1.4.4

lib/components/component-toggle/component-toggle.jsx

@@ -110,6 +110,7 @@ export const ComponentToggle = (props) => {
 				)
 			}
 			disabled={!useComponent || expandButtonDisabled}
+			noFocusHandling
 		>
 			{!expandButtonDisabled && <div className={contentClassName}>{children}</div>}
 		</Expandable>

lib/components/link-input/link-input.jsx

@@ -70,6 +70,7 @@ export const LinkInput = (props) => {
 	const triggerRef = useRef(null);
 
 	const suggestionList = useAsyncList({
+		initialFilterText: url,
 		async load({ signal, filterText }) {
 			// const items = await fetchSuggestions(inputValue, signal);
 			const items = await fetchSuggestions(filterText, signal);

lib/components/number-picker/number-picker.jsx

@@ -131,7 +131,7 @@ export const NumberPicker = ({
 					<Input
 						onFocus={() => setIsInputFocused(true)}
 						onBlur={() => setIsInputFocused(false)}
-						className='es-uic-col-start-2 es-uic-row-span-2 es-uic-bg-transparent es-uic-py-1 es-uic-text-sm es-uic-tabular-nums selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950 focus:es-uic-outline-none'
+						className='es-uic-col-start-2 es-uic-row-span-2 !es-uic-border-none es-uic-bg-transparent !es-uic-px-0 !es-uic-py-1 es-uic-text-sm es-uic-tabular-nums !es-uic-shadow-none !es-uic-outline-none selection:es-uic-bg-teal-500/20 selection:es-uic-text-teal-950 focus:!es-uic-shadow-none focus:es-uic-outline-none'
 						placeholder={placeholder}
 						style={{
 							width: fixedWidth ? `${fixedWidth}ch` : `calc(${min < 0 ? '0.75ch + ' : ''}${(max ?? 1000)?.toString()?.length} * 1ch)`,

lib/components/repeater/repeater.jsx

@@ -119,7 +119,7 @@ export const Repeater = (props) => {
 	const [canDelete, setCanDelete] = useState(false);
 	const [isPanelOpen, setIsPanelOpen] = useState({});
 
-	const isAnyPanelOpen = Object.keys(isPanelOpen)?.length < 1 ? false : Object.entries(isPanelOpen).every(([_, v]) => v === true);
+	const isAnyPanelOpen = Object.keys(isPanelOpen)?.length < 1 ? false : Object.entries(isPanelOpen).some(([_, v]) => v === true);
 
 	if (canDelete && items.length < (minItems ?? 1)) {
 		setCanDelete(false);

lib/utilities/text-helpers.js

@@ -101,3 +101,50 @@ export const truncate = (input, maxLength, separator = '...') => {
 
 	return `${leftPart}${separator}`;
 };
+
+/**
+ * Slices the string at the end and inputs the provided separator so that the string is maxLength characters long.
+ *
+ * @param {string} input             - String to slice.
+ * @param {number} maxLength         - Maximum allowed string length.
+ * @param {string} [separator='...'] - Separator to insert.
+ *
+ * @access public
+ *
+ * @returns {string|Error} Truncated string or error if separator length exceeds maxLength.
+ *
+ * Usage:
+ * ```js
+ * truncateMiddle('https://eightshift.com/contact/', 22);
+ * ```
+ *
+ * Output:
+ * ```js
+ * "https://ei.../contact/"
+ *
+ * @preserve
+ */
+export const truncateEnd = (input, maxLength, separator = '...') => {
+	if (!input) {
+		return null;
+	}
+
+	// If the string is shorter than maxLength, just return it.
+	if (input?.length <= maxLength) {
+		return input;
+	}
+
+	// Return error if separator would prevent any characters from the word showing.
+	if (separator.length + 1 > maxLength) {
+		throw new Error("Separator length exceeds the passed maximum length, string wouldn't be visible.");
+	}
+
+	// Smartly split up the string.
+	const maxStringLength = maxLength - separator.length;
+
+	const leftPartLength = Math.ceil(maxStringLength);
+
+	const leftPart = input.slice(0, leftPartLength).trim();
+
+	return `${leftPart}${separator}`;
+};

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@eightshift/ui-components",
-	"version": "1.4.6",
+	"version": "1.4.7",
 	"type": "module",
 	"main": "./dist/index.js",
 	"module": "./dist/index.js",