@seeqdev/qomponents 0.0.203 → 0.0.204

package/dist/index.js

@@ -4955,15 +4955,17 @@ const errorClasses$4 = 'tw:border-sq-danger';
 const borderColorClasses$4 = [
     'tw:border-sq-disabled-gray',
     'tw:dark:border-sq-dark-disabled-gray',
+    'tw:hover:border-sq-theme-dark',
+    'tw:dark:hover:border-sq-theme-dark-dark',
     'tw:dark:focus:border-sq-theme-dark-dark',
     'tw:dark:active:border-sq-theme-darker',
     'tw:focus:border-sq-theme-dark',
     'tw:active:border-sq-theme-dark',
 ].join(' ');
 const baseClasses$6 = 'tw:h-8.5 tw:leading-normal tw:outline-none tw:py-1 tw:px-3' +
-    ' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray  tw:disabled:dark:bg-sq-dark-disabled-gray' +
-    ' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:placeholder-gray-400' +
-    '  tw:dark:placeholder-sq-dark-text/30 specTextField';
+    ' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
+    ' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:placeholder-gray-400!' +
+    ' tw:dark:placeholder-sq-dark-text/30! specTextField';
 const darkTheme$3 = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text tw:disabled:dark:text-sq-dark-text/30';
 const lightTheme$3 = 'tw:text-sq-text-color tw:disabled:text-sq-darkish-gray';
 const sizeClasses = {
@@ -5030,8 +5032,8 @@ const TextField = React.forwardRef((props, ref) => {
 const alignment = 'tw:flex';
 const labelClasses = 'tw:ml-1.5 tw:text-sm tw:-mt-0.5';
 const baseClasses$5 = 'tw:appearance-none tw:border tw:h-3.5 tw:w-3.5 tw:focus:ring-0 tw:focus:ring-offset-0 tw:outline-none tw:focus:outline-none' +
-    '  tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-text tw:dark:hover:bg-sq-dark-background' +
-    ' tw:checked:text-white tw:checked:border-sq-text-color tw:checked:hover:border-sq-theme-dark' +
+    ' tw:dark:bg-sq-dark-background tw:dark:border-sq-dark-text tw:dark:enabled:hover:bg-sq-dark-background' +
+    ' tw:checked:text-white tw:checked:border-sq-text-color tw:checked:enabled:hover:border-sq-theme-dark' +
     ' tw:checked:active:border-sq-theme-darker tw:checked:focus:border-sq-theme-dark tw:disabled:border-sq-disabled-gray' +
     ' tw:dark:disabled:border-sq-fairly-dark-gray tw:dark:checked:focus:bg-sq-dark-background';
 const checkboxClasses = `tw:rounded ${baseClasses$5}`;
@@ -5040,7 +5042,7 @@ const radioClasses = `tw:rounded-full ${baseClasses$5}`;
  * Checkbox and Radio Box Component.
  */
 const Checkbox = (props) => {
-    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames, extraLabelClassNames, testId, ...tooltipProps } = props;
+    const { type = 'checkbox', value, disabled = false, label, onChange, onClick, onKeyDown, checked, defaultChecked, id, name, extraClassNames = '', extraLabelClassNames, testId, ...tooltipProps } = props;
     const assignedId = id ?? 'checkbox_' + Math.random();
     const tooltipData = getQTipData(tooltipProps);
     return (jsxRuntime.jsxs("span", { className: `${alignment} ${extraClassNames}`, children: [jsxRuntime.jsx("input", { value: value, type: type, "data-testid": testId, name: name, id: assignedId, readOnly: !onChange, checked: checked, defaultChecked: defaultChecked, className: `${type === 'checkbox' ? checkboxClasses : radioClasses} ${disabled ? 'tw:cursor-not-allowed' : 'tw:cursor-pointer'}`, disabled: disabled, onClick: onClick, onChange: onChange, onKeyDown: onKeyDown, ...tooltipData }), label && (jsxRuntime.jsx("label", { htmlFor: assignedId, className: `${labelClasses} ${extraLabelClassNames} ${disabled
@@ -5049,15 +5051,17 @@ const Checkbox = (props) => {
 };
 
 const baseClasses$4 = 'tw:leading-normal tw:outline-none tw:py-1 tw:px-3 tw:rounded-md tw:w-full' +
-    ' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray  tw:disabled:dark:bg-sq-dark-disabled-gray' +
+    ' tw:disabled:pointer-events-none tw:disabled:bg-sq-light-gray tw:disabled:dark:bg-sq-dark-disabled-gray' +
     ' tw:disabled:cursor-not-allowed tw:p-1 tw:border-solid tw:border tw:text-sm';
 const darkTheme$2 = 'tw:dark:bg-sq-dark-background tw:dark:text-sq-dark-text ' +
-    'tw:dark:placeholder-sq-dark-text/30  tw:disabled:dark:text-sq-dark-text/30';
-const lightTheme$2 = 'tw:text-sq-text-color tw:placeholder-gray-400  tw:disabled:text-sq-darkish-gray';
+    'tw:dark:placeholder-sq-dark-text/30! tw:disabled:dark:text-sq-dark-text/30';
+const lightTheme$2 = 'tw:text-sq-text-color tw:placeholder-gray-400! tw:disabled:text-sq-darkish-gray';
 const errorClasses$3 = 'tw:border-sq-danger';
 const borderColorClasses$3 = [
     'tw:border-sq-disabled-gray',
     'tw:dark:border-sq-dark-disabled-gray',
+    'tw:hover:border-sq-theme-dark',
+    'tw:dark:hover:border-sq-theme-dark-dark',
     'tw:dark:focus:border-sq-theme-darker',
     'tw:dark:active:border-sq-theme-darker',
     'tw:focus:border-sq-theme-dark',
@@ -14139,13 +14143,18 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
         }
         onChange(newValue);
     };
+    // react-select defaults blurInputOnSelect to true on touch-capable devices; that can close the menu even when
+    // closeMenuOnSelect is false. Only make `blurInputOnSelect=false` when `closeMenuOnSelect=false` (e.g., multi-select
+    // where the menu should stay open after each pick), otherwise set to `undefined` to default to the built-in
+    // react-select behaviour.
+    const blurInputOnSelect = closeMenuOnSelect ? undefined : false;
     const props = {
         id,
         value,
         inputId,
         placeholder,
         closeMenuOnSelect,
-        blurInputOnSelect: closeMenuOnSelect,
+        blurInputOnSelect,
         isSearchable: creatable ? true : isSearchable,
         isMulti,
         isClearable,
@@ -14184,7 +14193,7 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
                 return `${appliedClasses} ${baseClasses$3} ${containerStyles} specSelectControl ${isDisabled ? disabledClasses$3 : ''} ${small ? 'tw:pl-2 tw:pr-1' : 'tw:pl-2.5 tw:pr-1.5'}`;
             },
             placeholder: () => placeholderStyles,
-            container: ({ selectProps }) => {
+            container: () => {
                 return `${textStyles} ${extraClassNames} tw:pointer-events-auto!`;
             },
             input: () => textStyles + ' specSelectInput',
@@ -14192,12 +14201,15 @@ const Select = ({ options, value, placeholder = 'select', noOptionsMessage = 'no
             menu: () => menuStyles,
             menuPortal: () => 'tw:z-[9000]!',
             dropdownIndicator: () => dropDownIndicatorStyles,
-            option: ({ isSelected, isDisabled }) => {
+            option: ({ isSelected, isDisabled, isFocused }) => {
                 let classes = optionStyles;
                 if (isDisabled) {
                     classes += ' specDisabledOption ';
                 }
-                return isSelected ? classes + ' tw:bg-sq-colored-hover tw:dark:bg-sq-colored-hover-dark' : classes;
+                if (isSelected) {
+                    return classes + ' tw:bg-sq-colored-hover tw:dark:bg-sq-colored-hover-dark';
+                }
+                return isFocused ? classes + ' tw:bg-sq-gray-highlight tw:dark:bg-sq-gray-highlight-dark' : classes;
             },
             singleValue: () => 'specOpenSelect',
             multiValue: () => multiValueStyles,
@@ -14604,7 +14616,7 @@ const DialogFooter = (props) => jsxRuntime.jsx("div", { ...props });
 DialogFooter.displayName = 'DialogFooter';
 const DialogTitle = React.forwardRef((props, ref) => jsxRuntime.jsx(Title, { ref: ref, ...props }));
 DialogTitle.displayName = Title.displayName;
-const DialogDescription = React.forwardRef((props, ref) => jsxRuntime.jsx(Description, { ref: ref, ...props }));
+const DialogDescription = React.forwardRef((props, ref) => (jsxRuntime.jsx(Description, { asChild: true, children: jsxRuntime.jsx("div", { ref: ref, ...props }) })));
 DialogDescription.displayName = Description.displayName;
 const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, subtitle, children, open = false, onClose, customButton = false, customButtonLabel = 'Back', onClickCustomButton, submitButtonLabel = 'Submit', cancelButtonLabel = 'Cancel', disableSubmitButton = false, stopPropagationSubmitButton = false, onSubmit, isTitleEditable = false, onTitleChanged, inputExtraClassNames, hideCloseIcon = false, size = 'xl', titleIconPosition = 'left', hideFooterButtons = false, hideSubmitButton = false, hideCancelButton = false, testId = 'modal', modalFooter, dialogClassName, titlePlaceholder, titleRequired, titleError, submitButtonTooltip, cancelButtonTooltip, disableCustomButton, customHeader, middleFooterSection = jsxRuntime.jsx(jsxRuntime.Fragment, {}), customButtonVariant = 'outline', submitButtonVariant = 'theme', keepFocusInsideModal = true, onPointerDownOutside, onInteractOutside, ariaDescribedBy, }) => {
     const [isLoading, setIsLoading] = React.useState(false);
@@ -14655,7 +14667,7 @@ const Modal = ({ titleIcon, title = 'Modal title example', titleSuffixLabel, sub
                 'tw:max-w-4xl': size === '4xl',
                 'tw:max-w-5xl': size === '5xl',
                 'tw:max-w-6xl': size === '6xl',
-            }, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw:flex tw:w-full tw:justify-between tw:border-sq-disabled-gray\n          tw:dark:border-sq-dark-disabled-gray tw:border-0 tw:border-b tw:px-6 tw:py-4", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:w-full", children: renderTitle() }), !hideCloseIcon && (jsxRuntime.jsx(DialogClose, { autoFocus: false, className: "tw:[&:has(:focus-visible)]:none tw:opacity-70 tw:bg-transparent tw:hover:opacity-100  close tw:text-base tw:cursor-pointer tw:ml-4", "data-testid": "closeButton", children: jsxRuntime.jsx("span", { className: "tw:cursor-pointer", children: "\u00D7" }) }))] }), jsxRuntime.jsx(DialogDescription, { className: "modal-body tw:px-6 tw:py-4 tw:overflow-y-auto", asChild: true, children: children }), !hideFooterButtons && (jsxRuntime.jsx(DialogFooter, { className: "modal-footer tw:px-6 tw:py-4", children: modalFooter ?? (jsxRuntime.jsxs("div", { className: "tw:flex tw:w-full tw:justify-between", "data-testid": "modalFooter", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:justify-start", children: customButton && (jsxRuntime.jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw:justify-start tw:min-w-25", testId: "customButton", variant: customButtonVariant })) }), jsxRuntime.jsxs("div", { className: "tw:flex tw:justify-end", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:items-center", children: middleFooterSection }), !hideCancelButton && (jsxRuntime.jsx(DialogClose, { asChild: true, children: jsxRuntime.jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw:mr-5 tw:min-w-25", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsxRuntime.jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw:animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw:min-w-25" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+            }, dialogClassName), children: [jsxRuntime.jsxs(DialogHeader, { className: "modal-header tw:flex tw:w-full tw:justify-between tw:border-sq-disabled-gray\n          tw:dark:border-sq-dark-disabled-gray tw:border-0 tw:border-b tw:px-6 tw:py-4", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:w-full", children: renderTitle() }), !hideCloseIcon && (jsxRuntime.jsx(DialogClose, { autoFocus: false, className: "tw:[&:has(:focus-visible)]:none tw:opacity-70 tw:bg-transparent tw:hover:opacity-100  close tw:text-base tw:cursor-pointer tw:ml-4", "data-testid": "closeButton", children: jsxRuntime.jsx("span", { className: "tw:cursor-pointer", children: "\u00D7" }) }))] }), jsxRuntime.jsx(DialogDescription, { className: "modal-body tw:px-6 tw:py-4 tw:overflow-y-auto", children: children }), !hideFooterButtons && (jsxRuntime.jsx(DialogFooter, { className: "modal-footer tw:px-6 tw:py-4", children: modalFooter ?? (jsxRuntime.jsxs("div", { className: "tw:flex tw:w-full tw:justify-between", "data-testid": "modalFooter", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:justify-start", children: customButton && (jsxRuntime.jsx(Button, { label: customButtonLabel, onClick: onClickCustomButton, disabled: disableCustomButton, extraClassNames: "tw:justify-start tw:min-w-25", testId: "customButton", variant: customButtonVariant })) }), jsxRuntime.jsxs("div", { className: "tw:flex tw:justify-end", children: [jsxRuntime.jsx("div", { className: "tw:flex tw:items-center", children: middleFooterSection }), !hideCancelButton && (jsxRuntime.jsx(DialogClose, { asChild: true, children: jsxRuntime.jsx(Button, { label: cancelButtonLabel, extraClassNames: "tw:mr-5 tw:min-w-25", tooltip: cancelButtonTooltip, variant: "outline", stopPropagation: false, testId: "cancelButton" }) })), !hideSubmitButton && (jsxRuntime.jsx(Button, { label: submitButtonLabel, onClick: handleSubmit, disabled: disableSubmitButton || isLoading, variant: submitButtonVariant, stopPropagation: stopPropagationSubmitButton, tooltip: submitButtonTooltip, icon: isLoading ? 'fc-loading-notch tw:animate-spin' : undefined, iconPosition: "left", testId: "submitButton", extraClassNames: "tw:min-w-25" }))] })] })) }))] }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
 };
 
 function createCollection(name) {