@sqrzro/ui 4.0.0-alpha.44 → 4.0.0-alpha.46

package/dist/components/collections/Collection/index.js

@@ -32,6 +32,7 @@ async function CollectionComponent({ data, defaultFilters, emptyMessageProps, fi
     const componentEmptyMessageProps = checkHasFilters(awaitedSearchParams)
         ? {
             children: messages.EMPTY_FILTER_DESCRIPTION,
+            icon: emptyMessageProps?.icon ?? null,
             title: messages.EMPTY_FILTER_TITLE,
         }
         : emptyMessageProps;

package/dist/filters/utility/render-value.js

@@ -7,7 +7,7 @@ function getNamesFromIDs(ids, data) {
     const set = new Set(ids);
     return data
         .filter((item) => set.has(item.value))
-        .map((item) => item.$data?.label || item.label);
+        .map((item) => item.$data?.label || String(item.label));
 }
 const LENGTH_OF_YEAR = 4;
 const PAD = 2;

package/dist/forms/components/Autocomplete/index.d.ts

@@ -7,5 +7,5 @@ export interface AutocompleteComponentProps<T> extends DropdownComponentProps<T>
     selected?: DropdownObject<T> | null;
 }
 export type AutocompleteProps<T> = ClassNameProps<DropdownClassNames> & InputProps<T | null> & AutocompleteComponentProps<T>;
-declare function Autocomplete<T>({ hasError, isDisabled, isLoading, isOptional, name, onChange, onSearch, options, selected, placeholder, value, }: Readonly<AutocompleteProps<T>>): React.ReactElement;
+declare function Autocomplete<T>({ hasError, isDisabled, name, onChange, onSearch, options, selected, placeholder, value, }: Readonly<AutocompleteProps<T>>): React.ReactElement;
 export default Autocomplete;

package/dist/forms/components/Autocomplete/index.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment, useRef, useState } from 'react';
 import Popover from '../../../components/utility/Popover';
 import useClickOutside from '../../../hooks/useClickOutside';
-import DropdownList from '../DropdownList';
 import StaticTextInput from '../StaticTextInput';
 import TextInput from '../TextInput';
-function Autocomplete({ hasError, isDisabled, isLoading, isOptional, name, onChange, onSearch, options, selected, placeholder, value, }) {
+import AutocompleteList from '../AutocompleteList';
+function Autocomplete({ hasError, isDisabled, name, onChange, onSearch, options, selected, placeholder, value, }) {
     const inputRef = useRef(null);
     const [search, setSearch] = useState('');
     const [isOpen, setIsOpen, ref] = useClickOutside();
@@ -32,6 +32,6 @@ function Autocomplete({ hasError, isDisabled, isLoading, isOptional, name, onCha
             inputRef.current?.focus();
         }, 10);
     }
-    return (_jsx("div", { ref: ref, className: "relative", children: selected ? (_jsx(StaticTextInput, { details: selected.details, hasError: hasError, isDisabled: isDisabled, isOptional: isOptional, label: selected.label, name: name, onClick: handleReset, placeholder: placeholder || 'Select...', value: value ? String(value) : '' })) : (_jsxs(Fragment, { children: [_jsx(TextInput, { ref: inputRef, hasError: hasError, isDisabled: isDisabled, name: `${name}_search`, onChange: handleSearch, onFocus: () => setIsOpen(Boolean(options?.length)), placeholder: "Start typing...", value: search }), _jsx(Popover, { align: "center", isOpen: isOpen, isScrollable: true, children: options?.length ? (_jsx(DropdownList, { name: name, onChange: handleChange, options: options ?? [], value: value })) : isLoading ? (_jsx("div", { children: "Loading..." })) : (_jsx("div", { children: "No results" })) })] })) }));
+    return (_jsx("div", { ref: ref, className: "relative", children: selected ? (_jsx(StaticTextInput, { details: selected.details, hasError: hasError, isDisabled: isDisabled, isOptional: true, label: selected.label, name: name, onClear: handleReset, placeholder: placeholder || 'Select...', value: value ? String(value) : '' })) : (_jsxs(Fragment, { children: [_jsx(TextInput, { ref: inputRef, hasError: hasError, isDisabled: isDisabled, name: `${name}_search`, onChange: handleSearch, onFocus: () => setIsOpen(true), placeholder: "Start typing...", value: search }), _jsx(Popover, { align: "center", isOpen: isOpen && search.length >= 3, isScrollable: true, children: _jsx(AutocompleteList, { name: name, onChange: handleChange, options: options, search: search, value: value }) })] })) }));
 }
 export default Autocomplete;

package/dist/forms/components/AutocompleteList/index.d.ts

@@ -0,0 +1,7 @@
+import type { DropdownObject, InputProps } from '../../interfaces';
+interface AutocompleteListProps<T> extends InputProps<T | null> {
+    options?: DropdownObject<T>[];
+    search: string;
+}
+declare function AutocompleteList<T>({ name, onChange, options, search, value, }: AutocompleteListProps<T>): React.ReactElement | null;
+export default AutocompleteList;

package/dist/forms/components/AutocompleteList/index.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment } from 'react';
+import DropdownList from '../DropdownList';
+function AutocompleteList({ name, onChange, options, search, value, }) {
+    if (!options?.length) {
+        return (_jsx(DropdownList, { name: name, options: [
+                {
+                    label: (_jsxs(Fragment, { children: ["No results found for ", _jsx("strong", { children: search })] })),
+                    value: null,
+                },
+            ] }));
+    }
+    return _jsx(DropdownList, { name: name, onChange: onChange, options: options, value: value });
+}
+export default AutocompleteList;

package/dist/forms/components/Dropdown/index.js

@@ -10,7 +10,7 @@ function findByValue(options, value) {
     return options.find((item) => item.value === value);
 }
 export function renderLabel(options, value) {
-    return findByValue(options, value)?.label || '';
+    return String(findByValue(options, value)?.label || '');
 }
 export function renderDetails(options, value) {
     return findByValue(options, value)?.details || '';

package/dist/forms/components/FormError/index.js

@@ -1,9 +1,10 @@
 'use client';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { useClassNames } from '../../../styles/context';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClassNames, useIcon } from '../../../styles/context';
 import tw from '../../../styles/classnames/utility/tw';
 function FormError({ children, classNames, classNameProps, id, isAssistive, }) {
     const componentClassNames = useClassNames('formField', { props: classNameProps }, classNames);
-    return (_jsx("div", { className: tw(componentClassNames?.error, isAssistive ? 'sr-only' : null), id: `${id}_err`, children: children }));
+    const Icon = useIcon('formField.error');
+    return (_jsxs("div", { className: tw(componentClassNames?.error, isAssistive ? 'sr-only' : null), id: `${id}_err`, children: [Icon ? (_jsx("div", { className: "h-5 w-5", children: _jsx(Icon, {}) })) : null, children] }));
 }
 export default FormError;

package/dist/forms/components/StaticTextInput/index.d.ts

@@ -10,7 +10,7 @@ export interface StaticTextInputClassNames {
 }
 export interface StaticTextInputProps extends ClassNameProps<StaticTextInputClassNames>, Omit<InputProps<string[] | string, string[] | string>, 'onChange'> {
     details?: string | null;
-    label: string;
+    label: React.ReactNode;
     icon?: React.ReactNode;
     isOptional?: boolean;
     onClear?: () => void;

package/dist/forms/components/StaticTextInput/index.js

@@ -16,6 +16,6 @@ function StaticTextInput({ classNames, classNameProps, details, hasError, icon,
     function handleClear() {
         onClear?.();
     }
-    return (_jsxs("div", { className: tw('relative', componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [_jsx("input", { name: name, type: "hidden", value: value ? value.toString() : '' }), label ? (_jsxs(Fragment, { children: [_jsx("span", { className: componentClassNames?.label, children: label }), details ? (_jsx("small", { className: componentClassNames?.details, children: details })) : null] })) : (_jsx("span", { className: componentClassNames?.placeholder, children: placeholder })), onClick ? (_jsx("button", { className: "absolute -bottom-px -left-px -right-px -top-px", disabled: isDisabled, onClick: onClick, onKeyDown: onKeyDown, tabIndex: 0, type: "button", children: _jsx(Assistive, { children: "Toggle" }) })) : null, _jsxs("div", { className: "absolute bottom-0 right-1 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsxs("button", { className: tw('flex-none', componentClassNames?.clear), onClick: handleClear, type: "button", children: [ClearIcon ? _jsx(ClearIcon, {}) : null, _jsx(Assistive, { children: "Clear" })] })) : null, icon && !isDisabled ? (_jsx("div", { className: tw('pointer-events-none flex-none bg-red-300', componentClassNames?.icon), children: icon })) : null] })] }));
+    return (_jsxs("div", { className: tw('relative', componentClassNames?.root, isDisabled ? 'pointer-events-none opacity-30' : null), children: [_jsx("input", { name: name, type: "hidden", value: value ? value.toString() : '' }), label ? (_jsxs(Fragment, { children: [_jsx("span", { className: componentClassNames?.label, children: label }), details ? (_jsx("small", { className: componentClassNames?.details, children: details })) : null] })) : (_jsx("span", { className: componentClassNames?.placeholder, children: placeholder })), onClick ? (_jsx("button", { className: "absolute -bottom-px -left-px -right-px -top-px", disabled: isDisabled, onClick: onClick, onKeyDown: onKeyDown, tabIndex: 0, type: "button", children: _jsx(Assistive, { children: "Toggle" }) })) : null, _jsxs("div", { className: "absolute bottom-0 right-1 top-0 flex w-0 items-center justify-end", children: [isOptional && hasValue(value) ? (_jsxs("button", { className: tw('flex-none', componentClassNames?.clear), onClick: handleClear, type: "button", children: [ClearIcon ? _jsx(ClearIcon, {}) : null, _jsx(Assistive, { children: "Clear" })] })) : null, icon && !isDisabled ? (_jsx("div", { className: tw('pointer-events-none flex-none', componentClassNames?.icon), children: icon })) : null] })] }));
 }
 export default StaticTextInput;

package/dist/forms/interfaces.d.ts

@@ -7,7 +7,7 @@ export interface DropdownObject<T = string> {
     $data?: Record<string, string>;
     details?: string | null;
     isDisabled?: boolean;
-    label: string;
+    label: React.ReactNode;
     value: T;
 }
 export type EditingStatus = 'CANCELLED' | 'EDITING' | 'SAVED';

package/dist/styles/icons/config.d.ts

@@ -10,6 +10,7 @@ export interface UIIcons {
     'filter.clear'?: IconComponent;
     'filter.panel'?: IconComponent;
     'filter.search'?: IconComponent;
+    'formField.error'?: IconComponent;
     'passwordComplexity.invalid'?: IconComponent;
     'passwordComplexity.valid'?: IconComponent;
     'passwordInput.hidden'?: IconComponent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sqrzro/ui",
   "type": "module",
-  "version": "4.0.0-alpha.44",
+  "version": "4.0.0-alpha.46",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "license": "ISC",